refactor(category): 重构分类页面UI

- 重构分类页面导航栏，将标题+搜索框改为仅搜索框样式
- 优化分类页面左侧列表与右侧内容区域的布局及视觉样式
- 重写搜索栏宽度计算逻辑
- 优化分类滚动组件、侧边列表、排序栏及子标签栏的交互样式
- 增加分类头部图片条件渲染及商品列表嵌入模式样式
- 关闭商品列表划线价默认显示配置

components/category/category-scroller.vue

@@ -9,14 +9,19 @@
       @click="$emit('change', item)"
     >
       <template v-if="mode === 'icon'">
-        <view class="cs-icon">
-          <u-image width="88rpx" height="88rpx" shape="circle" :src="item.image">
-            <template #loading><u-loading-icon></u-loading-icon></template>
-          </u-image>
+        <view class="cs-icon-box">
+          <view class="cs-icon">
+            <u-image width="80rpx" height="80rpx" shape="circle" :src="item.image" mode="aspectFill">
+              <template #loading><u-loading-icon></u-loading-icon></template>
+            </u-image>
+          </view>
         </view>
         <text class="cs-name">{{ item.name }}</text>
       </template>
-      <text v-else class="cs-text-name">{{ item.name }}</text>
+      <template v-else>
+        <text class="cs-text-name">{{ item.name }}</text>
+        <view class="cs-text-line" v-if="item.id === currentId"></view>
+      </template>
     </view>
   </scroll-view>
 </template>
@@ -37,7 +42,7 @@ const props = withDefaults(defineProps<{
 defineEmits(['change'])
 
 const intoView = computed(() =>
-  props.currentId != null ? `cs-${props.currentId}` : ''
+  props.currentId != null ? 'cs-' + props.currentId : ''
 )
 </script>
 
@@ -45,49 +50,84 @@ const intoView = computed(() =>
 .cate-scroller {
   white-space: nowrap;
   width: 100%;
-  background: #fff;
+  background: #ffffff;
+  border-bottom: 1rpx solid #f2f3f5;
+  box-sizing: border-box;
+  flex-shrink: 0;
 }
 .cs-item {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  width: 120rpx;
-  padding: 16rpx 0 10rpx;
+  justify-content: center;
+  width: 130rpx;
+  padding: 16rpx 6rpx 14rpx;
   vertical-align: top;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+.cs-icon-box {
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3rpx solid transparent;
+  box-sizing: border-box;
+  background: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.cs-item.active .cs-icon-box {
+  border-color: $light-color;
+  box-shadow: 0 4rpx 12rpx rgba(255, 102, 0, 0.15);
 }
 .cs-icon {
-  width: 88rpx;
-  height: 88rpx;
+  width: 80rpx;
+  height: 80rpx;
   border-radius: 50%;
   overflow: hidden;
-  border: 2rpx solid transparent;
-}
-.cs-item.active .cs-icon {
-  border-color: $light-color;
+  background: #f6f7f9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .cs-name {
-  margin-top: 8rpx;
-  font-size: 22rpx;
-  color: #333;
-  max-width: 110rpx;
+  margin-top: 10rpx;
+  font-size: 24rpx;
+  color: #555;
+  max-width: 120rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 1.2;
 }
 .cs-item.active .cs-name {
   color: $light-color;
-  font-weight: bold;
+  font-weight: 600;
 }
 .cs-item--text {
   width: auto;
-  padding: 18rpx 24rpx;
+  padding: 18rpx 28rpx;
+  position: relative;
 }
 .cs-text-name {
   font-size: 26rpx;
-  color: #333;
+  color: #666;
+  transition: color 0.2s ease;
 }
 .cs-item--text.active .cs-text-name {
   color: $light-color;
-  font-weight: bold;
+  font-weight: 600;
+}
+.cs-text-line {
+  position: absolute;
+  bottom: 6rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 32rpx;
+  height: 4rpx;
+  border-radius: 2rpx;
+  background: $light-color;
 }
 </style>