feat: 页面调整

src/components/TopNavBar/index.vue

@@ -12,13 +12,21 @@
 
       <!-- 中间标题区域 -->
       <view :class="[
-        'nav-bar-center flex items-center justify-center',
+        'nav-bar-center flex min-h-[30px] items-center justify-center',
         `nav-bar-center--${titleAlign}`,
       ]">
         <slot name="title">
-          <text class="text-[17px] font-[500] text-[#000000]" :style="{ color: titleColor }">
-            {{ title }}
-          </text>
+          <view
+            class="flex w-full min-w-0 flex-col justify-center"
+            :class="titleContentClass"
+          >
+            <text class="max-w-full truncate text-[17px] font-[500] leading-[21px] text-[#000000]" :style="{ color: titleColor }">
+              {{ title }}
+            </text>
+            <text v-if="subtitle" class="mt-[1px] max-w-full truncate text-[11px] leading-[14px]" :style="{ color: subtitleColor }">
+              {{ subtitle }}
+            </text>
+          </view>
         </slot>
       </view>
 
@@ -40,6 +48,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  subtitle: {
+    type: String,
+    default: "",
+  },
   // 是否固定在顶部
   fixed: {
     type: Boolean,
@@ -60,6 +72,10 @@ const props = defineProps({
     type: String,
     default: "#000",
   },
+  subtitleColor: {
+    type: String,
+    default: "#667085",
+  },
   // 返回按钮图标颜色
   backIconColor: {
     type: String,
@@ -141,10 +157,16 @@ const navBarStyle = computed(() => {
 
 const navContentStyle = computed(() => {
   return {
-    height: navBarHeight.value + "px",
+    height: navBarHeight.value + (props.subtitle ? 12 : 0) + "px",
   };
 });
 
+const titleContentClass = computed(() =>
+  props.titleAlign === "left"
+    ? "items-start text-left"
+    : "items-center text-center"
+);
+
 const hasBackListener = computed(() => {
   const vnodeProps = instance?.vnode?.props || {};
   return Boolean(vnodeProps.onBack);