feat: 更新 API 地址，添加分类组件，优化市场页面布局和功能

src/components/ui/tabs/index.vue

@@ -7,6 +7,8 @@ interface TabsProps {
   closable?: boolean;
   addable?: boolean;
   placement?: "top" | "bottom" | "left" | "right";
+  sticky?: boolean;
+  stickyTop?: string | number;
   tabStyle?: string | Record<string, any>;
   tabClass?: string;
   paneStyle?: string | Record<string, any>;
@@ -27,6 +29,8 @@ const props = withDefaults(defineProps<TabsProps>(), {
   closable: false,
   addable: false,
   placement: "top",
+  sticky: false,
+  stickyTop: 0,
 });
 
 const emit = defineEmits<TabsEmits>();
@@ -229,14 +233,34 @@ const tabsClasses = computed(() => [
   `ui-tabs--${props.placement}`,
   {
     "ui-tabs--animated": props.animated,
+    "ui-tabs--sticky": props.sticky,
   },
 ]);
+
+// 计算sticky样式
+const stickyStyle = computed(() => {
+  if (!props.sticky)
+    return {};
+
+  const topValue = typeof props.stickyTop === "number"
+    ? `${props.stickyTop}px`
+    : props.stickyTop;
+
+  return {
+    position: "sticky" as const,
+    top: topValue,
+    zIndex: 100,
+  };
+});
 </script>
 
 <template>
   <div :class="tabsClasses">
-    <!-- 标签头部 -->
-    <div class="ui-tabs__nav-wrapper" :class="[`ui-tabs__nav-wrapper--${placement}`]">
+    <div
+      class="ui-tabs__nav-wrapper"
+      :class="[`ui-tabs__nav-wrapper--${placement}`]"
+      :style="props.sticky ? stickyStyle : {}"
+    >
       <div
         ref="tabsRef"
         class="ui-tabs__nav"
@@ -304,11 +328,11 @@ const tabsClasses = computed(() => [
 
 .ui-tabs {
   @apply w-full;
-  --ui-tabs-primary: var(--ion-color-primary, #007aff);
-  --ui-tabs-primary-rgb: var(--ion-color-primary-rgb, 0, 122, 255);
-  --ui-tabs-background: var(--ion-background-color, #ffffff);
-  --ui-tabs-text: var(--ion-text-color, #000000);
-  --ui-tabs-text-rgb: var(--ion-text-color-rgb, 0, 0, 0);
+  --ui-tabs-primary: var(--ion-color-primary);
+  --ui-tabs-primary-rgb: var(--ion-color-primary-rgb);
+  --ui-tabs-background: var(--ion-background-color);
+  --ui-tabs-text: var(--ion-text-color);
+  --ui-tabs-text-rgb: var(--ion-text-color-rgb);
 }
 
 /* 导航包装器 */
@@ -316,7 +340,15 @@ const tabsClasses = computed(() => [
   @apply relative;
 }
 
-.ui-tabs__nav-wrapper--top {
+/* Sticky 布局 */
+.ui-tabs--sticky .ui-tabs__nav-wrapper {
+  background-color: var(--ui-tabs-background);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.ui-tabs--sticky.ui-tabs--animated .ui-tabs__nav-wrapper {
+  transition: background-color 0.2s ease;
 }
 
 .ui-tabs__nav-wrapper--bottom {
@@ -365,13 +397,13 @@ const tabsClasses = computed(() => [
   color: var(--ion-color-medium, #6b7280);
 }
 
-.ui-tab:hover {
-  color: var(--ion-color-dark, #374151);
+.ui-tab:hover:not(.ui-tab--disabled):not(.ui-tab--active) {
+  color: var(--ion-color-primary) !important;
 }
 
 .ui-tab--active {
   @apply font-medium;
-  color: var(--ui-tabs-primary);
+  color: var(--ion-color-primary) !important;
 }
 
 .ui-tab--disabled {
@@ -385,11 +417,7 @@ const tabsClasses = computed(() => [
 }
 
 .ui-tab--bar.ui-tab--active {
-  border-color: var(--ui-tabs-primary);
-}
-
-.ui-tab--bar:hover:not(.ui-tab--disabled):not(.ui-tab--active) {
-  background-color: rgba(var(--ui-tabs-primary-rgb), 0.05);
+  border-color: var(--ion-color-primary) !important;
 }
 
 /* Line 类型 */
@@ -397,10 +425,6 @@ const tabsClasses = computed(() => [
   @apply py-3;
 }
 
-.ui-tab--line:hover:not(.ui-tab--disabled):not(.ui-tab--active) {
-  background-color: rgba(var(--ui-tabs-primary-rgb), 0.05);
-}
-
 /* Segment 类型 */
 .ui-tab--segment {
   @apply px-3 py-2 rounded-md;
@@ -413,10 +437,6 @@ const tabsClasses = computed(() => [
     0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
-.ui-tab--segment:hover:not(.ui-tab--disabled):not(.ui-tab--active) {
-  background-color: rgba(var(--ui-tabs-primary-rgb), 0.1);
-}
-
 /* 尺寸变化 */
 .ui-tab--small {
   @apply text-sm;
@@ -574,6 +594,8 @@ const tabsClasses = computed(() => [
 /* Dark mode 支持 */
 @media (prefers-color-scheme: dark) {
   .ui-tabs {
+    --ui-tabs-primary: var(--ion-color-primary, #ffffff);
+    --ui-tabs-primary-rgb: var(--ion-color-primary-rgb, 255, 255, 255);
     --ui-tabs-background: var(--ion-background-color, #1a1a1a);
     --ui-tabs-text: var(--ion-text-color, #ffffff);
   }