refactor(TopNavBar): replace SCSS with utility classes

remove the unused src/components/TopNavBar/styles/index.scss file, strip the component's style import, and update class bindings to use conditional inline utilities instead of legacy modifier classes

src/components/TopNavBar/index.vue

@@ -9,8 +9,8 @@
 
       <!-- 中间标题区域 -->
       <div :class="[
-        'flex-1 h-[30px] px-[20px] flex items-center justify-center',
-        `nav-bar-center--${titleAlign}`,
+        'flex-1 h-[30px] px-[20px] flex items-center',
+        titleAlign === 'center' ? 'justify-center text-center' : 'justify-start text-left',
       ]">
         <slot name="title">
           <text class="text-[17px] font-medium text-black" :style="{ color: titleColor }">
@@ -103,9 +103,9 @@ onMounted(() => {
 // 计算导航栏样式类
 const navBarClass = computed(() => {
   return [
-    "top-nav-bar",
+    "w-full",
     {
-      "top-nav-bar--fixed": props.fixed,
+      "fixed top-0 left-0 right-0": props.fixed,
     },
   ];
 });
@@ -129,7 +129,3 @@ const handleBack = () => {
   }
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

src/components/TopNavBar/styles/index.scss

@@ -1,44 +0,0 @@
-// TopNavBar 组件样式
-.top-nav-bar {
-  width: 100%;
-  background-color: #e8fff1;
-
-  &--fixed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 999;
-  }
-}
-
-
-.nav-bar-center {
-  flex: 1;
-  height: 30px;
-  padding: 0 20px; // 为左右按钮留出空间
-
-  // 居中对齐（默认）
-  &--center {
-    justify-content: center;
-
-    .nav-bar-title {
-      text-align: center;
-    }
-  }
-
-  // 左对齐
-  &--left {
-    justify-content: flex-start;
-    padding-left: 20px; // 为返回按钮留出更多空间
-
-    .nav-bar-title {
-      text-align: left;
-    }
-  }
-}
-
-// 固定导航栏时的页面内容适配
-.page-with-fixed-navbar {
-  padding-top: calc(var(--status-bar-height, 44px) + 44px);
-}