ow

uniapp/youjiala/src/components/page-navbar/page-navbar.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 /**
- * 文件页顶部导航栏：「返回箭头 + 居中标题 + 右侧两个显隐开关」。
+ * 文件页顶部导航栏：「返回箭头 + 居中标题 + 传输入口 + 右侧两个显隐开关」。
  * 根目录不显示返回（showBack=false）；标题两侧等宽占位保证真居中。
  * 右侧 search/grid 两个图标分别切换页面里搜索框与快捷入口区的显隐，
  * 点亮（蓝）= 对应区域显示，置灰 = 隐藏；排序按钮在 file-tab-filter 工具区。
+ * 传输图标是跳转入口（带进行中计数角标），不参与显隐切换；字形用自绘 SVG（transferGlyph）。
  * 纯展示组件：不自己做导航与显隐逻辑，按钮语义一律 emit 给页面决定。
  * 顶栏配色跟随截图（白底黑字），不并入 app-page 的绿色 u-navbar，故页面用 hide-nav 让位。
  */
+import { computed } from "vue";
+import { TRANSFER_ACTIVE_COLOR, transferGlyph } from "@/utils/transferGlyph";
+
 const props = defineProps({
     /** 页面标题（页面用 t() 翻译好后传进来） */
     title: {
@@ -28,13 +32,22 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    /** 进行中上传任务数：>0 时传输图标点亮并挂数字角标 */
+    transferring: {
+        type: Number,
+        default: 0,
+    },
 });
 
 const emit = defineEmits<{
     (e: "back"): void;
     (e: "toggle-search"): void;
     (e: "toggle-quick"): void;
+    (e: "transfer"): void;
 }>();
+
+/** 传输字形：有进行中任务点亮（iconfont 主色蓝），空闲置灰 */
+const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_ACTIVE_COLOR : "#8f959e"));
 </script>
 
 <template>
@@ -48,6 +61,13 @@ const emit = defineEmits<{
             {{ props.title }}
         </text>
         <view class="page-navbar__side page-navbar__side--right">
+            <!-- 传输列表入口（常显）：有进行中任务时点亮 + 数字角标 -->
+            <view class="page-navbar__btn page-navbar__btn--transfer" @tap="emit('transfer')">
+                <image class="page-navbar__transfer-img" :src="transferIcon" mode="aspectFit" />
+                <text v-if="props.transferring" class="page-navbar__badge">
+                    {{ props.transferring > 99 ? "99+" : props.transferring }}
+                </text>
+            </view>
             <!-- 切换搜索框显隐 -->
             <view class="page-navbar__btn" @tap="emit('toggle-search')">
                 <u-icon name="search" size="38" :color="props.searchOn ? '#2b8fff' : '#8f959e'" />
@@ -72,12 +92,12 @@ const emit = defineEmits<{
     background-color: transparent;
 }
 
-/* 左右等宽占位（容纳右侧两个按钮）：任何状态下标题都严格居中 */
+/* 左右等宽占位（容纳右侧三个按钮）：任何状态下标题都严格居中 */
 .page-navbar__side {
     display: flex;
     align-items: center;
     gap: 6rpx;
-    width: 148rpx;
+    width: 208rpx;
     min-height: 64rpx;
     flex-shrink: 0;
 }
@@ -107,6 +127,31 @@ const emit = defineEmits<{
     height: 60rpx;
 }
 
+/* 传输入口：右上角挂进行中计数角标 */
+.page-navbar__btn--transfer {
+    position: relative;
+}
+
+/* 自绘 SVG 传输字形：与同行 u-icon size=38 视觉对齐 */
+.page-navbar__transfer-img {
+    width: 40rpx;
+    height: 40rpx;
+}
+
+.page-navbar__badge {
+    position: absolute;
+    top: 2rpx;
+    right: 0;
+    min-width: 26rpx;
+    padding: 0 6rpx;
+    border-radius: 999rpx;
+    font-size: 18rpx;
+    line-height: 26rpx;
+    text-align: center;
+    color: #ffffff;
+    background-color: #f0413e;
+}
+
 .page-navbar__title {
     flex: 1;
     text-align: center;