修复大部分页面状态组件2

pages/mall/admin/product/product-management/index.uvue

@@ -115,10 +115,12 @@
           <view class="td col-stock"><text>{{ item.stock }}</text></view>
           <view class="td col-sort"><text>{{ item.sort }}</text></view>
           <view class="td col-status">
-            <view class="mock-switch" :class="{ on: item.status === 1 }">
-              <text class="switch-txt">{{ item.status === 1 ? '上架' : '下架' }}</text>
-              <view class="switch-dot"></view>
-            </view>
+            <StatusSwitch 
+              :modelValue="item.status === 1" 
+              activeText="上架" 
+              inactiveText="下架"
+              @update:modelValue="(val : boolean) => item.status = (val ? 1 : 0)"
+            />
           </view>
           <view class="td col-op op-group">
             <text class="op-link" @click.stop="goEdit(item.id)">编辑</text>
@@ -162,6 +164,7 @@
 <script setup lang="uts">
 import { ref } from 'vue'
 import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 const total = ref(49)
 const activeStatus = ref('selling')
@@ -521,60 +524,6 @@ function moveToRecycle(id: number) {
 .p-name-txt { font-size: 13px; line-height: 1.4; color: #333; }
 
 .activity-tags {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 4px;
-  .tag {
-    padding: 2px 4px;
-    font-size: 11px;
-    color: #fff;
-    border-radius: 2px;
-    &.kj { background: #1890ff; }
-    &.pt { background: #52c41a; }
-    &.ms { background: #f5222d; }
-  }
-}
-
-.mock-switch {
-  width: 50px;
-  height: 20px;
-  background: #dbdbdb;
-  border-radius: 10px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 4px;
-  &.on {
-    background: #1890ff;
-    .switch-dot { left: 32px; }
-    .switch-txt { left: 6px; }
-  }
-  &:not(.on) {
-    .switch-txt { right: 6px; }
-    .switch-dot { left: 2px; }
-  }
-  .switch-txt { 
-    position: absolute;
-    font-size: 10px; 
-    color: #fff; 
-  }
-  .switch-dot {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    background: #fff;
-    border-radius: 50%;
-    transition: left 0.2s;
-  }
-}
-
-.op-link { 
-  font-size: 13px; 
-  color: #1890ff; 
-  cursor: pointer; 
-  &.danger { color: #ff4d4f; }
-}
 .op-divider { color: #e8e8e8; font-size: 12px; margin: 0 4px; }
 
 .more-dropdown {