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

pages/mall/admin/kefu/list.uvue

@@ -13,7 +13,7 @@
         <view class="th col-id"><text class="th-txt">ID</text></view>
         <view class="th col-avatar"><text class="th-txt">客服头像</text></view>
         <view class="th col-name"><text class="th-txt">客服名称</text></view>
-        <view class="th col-status"><text class="th-txt">客服状态</text></view>
+        <view class="th col-status"><text class="th-txt">状态</text></view>
         <view class="th col-time"><text class="th-txt">添加时间</text></view>
         <view class="th col-op"><text class="th-txt">操作</text></view>
       </view>
@@ -26,12 +26,7 @@
           </view>
           <view class="td col-name"><text class="td-txt">{{ item.name }}</text></view>
           <view class="td col-status">
-            <view :class="['switch-btn', item.status ? 'switch-on' : 'switch-off']" @click="toggleStatus(item)">
-              <view class="switch-inner">
-                <text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
-              </view>
-              <view class="switch-dot"></view>
-            </view>
+            <StatusSwitch v-model="item.status" />
           </view>
           <view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
           <view class="td col-op">
@@ -68,6 +63,7 @@
 
 <script setup lang="uts">
 import { ref } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 interface KefuItem {
   id: string
@@ -87,10 +83,6 @@ const kefuList = ref<KefuItem[]>([
   { id: '152', avatar: '/static/logo.png', name: 'kk', status: true, time: '2024-09-16 00:05:22' }
 ])
 
-const toggleStatus = (item: KefuItem) => {
-  item.status = !item.status
-}
-
 const handleAdd = () => {
   console.log('Add Kefu')
 }
@@ -202,45 +194,6 @@ const handleAdd = () => {
   background-color: #f0f0f0;
 }
 
-/* 开关组件 1:1 复刻 */
-.switch-btn {
-  width: 60px;
-  height: 24px;
-  border-radius: 12px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 6px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.switch-on { background-color: #2d8cf0; }
-.switch-off { background-color: #ccc; }
-
-.switch-inner {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-
-.switch-txt {
-  color: #fff;
-  font-size: 11px;
-}
-
-.switch-dot {
-  width: 18px;
-  height: 18px;
-  background-color: #fff;
-  border-radius: 9px;
-  position: absolute;
-  top: 3px;
-}
-
-.switch-on .switch-dot { right: 3px; }
-.switch-off .switch-dot { left: 3px; }
-
 /* 操作按钮 */
 .btn-action {
   font-size: 13px;