ow

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /**
- * 文件页顶部导航栏：「返回箭头 + 居中标题 + 传输入口 + 右侧两个显隐开关」。
- * 根目录不显示返回（showBack=false）；标题两侧等宽占位保证真居中。
+ * 文件页顶部导航栏：「返回箭头 + 左对齐标题 …… 传输入口 + 右侧两个显隐开关」。
+ * 根目录不显示返回（showBack=false）；标题左对齐、操作图标右对齐，稳定的两端对齐结构
+ * （避免居中标题与右侧图标在图标增减时产生的不对称视觉负担）。
  * 右侧 search/grid 两个图标分别切换页面里搜索框与快捷入口区的显隐，
  * 点亮（蓝）= 对应区域显示，置灰 = 隐藏；排序按钮在 file-tab-filter 工具区。
  * 传输图标是跳转入口（带进行中计数角标），不参与显隐切换；字形用自绘 SVG（transferGlyph）。
@@ -67,10 +68,8 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
 
 <template>
     <view class="page-navbar">
-        <view class="page-navbar__side page-navbar__side--left">
-            <view v-if="props.showBack" class="page-navbar__back" @tap="emit('back')">
-                <u-icon name="arrow-left" size="42" color="#1f2329" />
-            </view>
+        <view v-if="props.showBack" class="page-navbar__back" @tap="emit('back')">
+            <u-icon name="arrow-left" size="42" color="#1f2329" />
         </view>
         <text class="page-navbar__title">
             {{ props.title }}
@@ -107,20 +106,15 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
     background-color: transparent;
 }
 
-/* 左右等宽占位（容纳右侧三个按钮）：任何状态下标题都严格居中 */
+/* 右侧操作图标组：宽度自适应内容、不参与标题伸缩，标题始终左对齐 */
 .page-navbar__side {
     display: flex;
     align-items: center;
     gap: 6rpx;
-    width: 208rpx;
     min-height: 64rpx;
     flex-shrink: 0;
 }
 
-.page-navbar__side--left {
-    justify-content: flex-start;
-}
-
 .page-navbar__side--right {
     justify-content: flex-end;
 }
@@ -169,7 +163,8 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
 
 .page-navbar__title {
     flex: 1;
-    text-align: center;
+    min-width: 0;
+    text-align: left;
     font-size: 38rpx;
     font-weight: 600;
     color: #1f2329;