diff --git a/src/utils/common.ts b/src/utils/common.ts
index d07a649..6bf70c3 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -68,9 +68,8 @@ export function translateOptions2(options: string[]) {
  * tag Color
  *
  * @param index
- * @param total
  */
-export function tagColor(index: number, total: number = 5) {
+export function tagColor(index: number) {
   const tagMap: Record<number, NaiveUI.ThemeColor> = {
     0: 'error',
     1: 'info',
@@ -79,5 +78,5 @@ export function tagColor(index: number, total: number = 5) {
     4: 'default'
   };
 
-  return tagMap[index % total];
+  return tagMap[index % 5];
 }
diff --git a/src/views/group/index.vue b/src/views/group/index.vue
index 3fa7faa..240c7aa 100644
--- a/src/views/group/index.vue
+++ b/src/views/group/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NSwitch, NTag } from 'naive-ui';
+import { NButton, NTag } from 'naive-ui';
 import { ref } from 'vue';
 import { fetchGetGroupConfigList, fetchUpdateGroupStatus } from '@/service/api';
 import { $t } from '@/locales';
@@ -7,6 +7,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { groupConfigIdModeRecord, yesOrNoRecord } from '@/constants/business';
 import { tagColor } from '@/utils/common';
+import StatusSwitch from '@/components/common/status-switch.vue';
 import GroupOperateDrawer from './modules/group-operate-drawer.vue';
 import GroupDetailDrawer from './modules/group-detail-drawer.vue';
 import GroupSearch from './modules/group-search.vue';
@@ -14,7 +15,6 @@ import GroupSearch from './modules/group-search.vue';
 const appStore = useAppStore();
 
 /** 组状态 Switch 的 loading 状态 */
-const statusSwithLoading = ref(false);
 const detailData = ref();
 const detailVisible = defineModel<boolean>('detailVisible', {
   default: false
@@ -58,15 +58,16 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       align: 'center',
       width: 80,
       render: row => {
-        return (
-          <NSwitch
-            v-model:value={row.groupStatus}
-            v-model:loading={statusSwithLoading.value}
-            checkedValue={1}
-            uncheckedValue={0}
-            onUpdateValue={() => handleUpdateValue(row)}
-          ></NSwitch>
-        );
+        const fetchFn = async (groupStatus: Api.Common.EnableStatusNumber, callback: () => void) => {
+          const { error } = await fetchUpdateGroupStatus({ groupName: row.groupName, groupStatus: row.groupStatus });
+          if (!error) {
+            row.groupStatus = groupStatus;
+            window.$message?.success($t('common.updateSuccess'));
+          }
+          callback();
+        };
+
+        return <StatusSwitch v-model:value={row.groupStatus} onFetch={fetchFn} />;
       }
     },
     {
@@ -108,7 +109,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
 
         const label = $t(yesOrNoRecord[row.initScene!]);
 
-        return <NTag type={tagColor(row.initScene!, 2)}>{label}</NTag>;
+        return <NTag type={tagColor(row.initScene!)}>{label}</NTag>;
       }
     },
     {
@@ -152,16 +153,6 @@ const {
 function edit(id: string) {
   handleEdit(id);
 }
-
-async function handleUpdateValue(group: Api.GroupConfig.GroupConfig) {
-  statusSwithLoading.value = true;
-  try {
-    await fetchUpdateGroupStatus({ groupName: group.groupName, groupStatus: group.groupStatus });
-  } finally {
-    await getData();
-    statusSwithLoading.value = false;
-  }
-}
 </script>
 
 <template>
diff --git a/src/views/group/modules/group-detail-drawer.vue b/src/views/group/modules/group-detail-drawer.vue
index 8dc8d4a..77fba68 100644
--- a/src/views/group/modules/group-detail-drawer.vue
+++ b/src/views/group/modules/group-detail-drawer.vue
@@ -35,7 +35,7 @@ watch(
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">
       <NDescriptionsItem :label="$t('page.groupConfig.groupStatus')">
-        <NTag :type="tagColor(rowData?.groupStatus!, 2)">{{ $t(groupConfigStatusRecord[rowData?.groupStatus!]) }}</NTag>
+        <NTag :type="tagColor(rowData?.groupStatus!)">{{ $t(groupConfigStatusRecord[rowData?.groupStatus!]) }}</NTag>
       </NDescriptionsItem>
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">
@@ -43,7 +43,7 @@ watch(
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">
       <NDescriptionsItem :label="$t('page.groupConfig.idGeneratorMode')">
-        <NTag :type="tagColor(rowData?.idGeneratorMode!, 2)">
+        <NTag :type="tagColor(rowData?.idGeneratorMode!)">
           {{ $t(groupConfigIdModeRecord[rowData?.idGeneratorMode!]) }}
         </NTag>
       </NDescriptionsItem>
@@ -55,7 +55,7 @@ watch(
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">
       <NDescriptionsItem :label="$t('page.groupConfig.initScene')">
-        <NTag :type="tagColor(rowData?.initScene!, 2)">{{ $t(yesOrNoRecord[rowData?.initScene!]) }}</NTag>
+        <NTag :type="tagColor(rowData?.initScene!)">{{ $t(yesOrNoRecord[rowData?.initScene!]) }}</NTag>
       </NDescriptionsItem>
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">