pref: use ModeSwitchButton replace old component

 <script lang="ts" setup>
 <script lang="ts" setup>
   import { RadioButton, RadioGroup, Tooltip } from 'ant-design-vue';
   import { RadioButton, RadioGroup, Tooltip } from 'ant-design-vue';
-  import { AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
-  import { Mode } from './const';
-  const props = defineProps<{
-    value: Mode;
-  }>();
+  import { TABLE_CARD_MODE_LIST } from './const';
+  import { ModeList } from './types';
+  import Icon from '../Icon';
+  const props = withDefaults(
+    defineProps<{
+      value: string;
+      mode?: ModeList[];
+    }>(),
+    {
+      mode: () => TABLE_CARD_MODE_LIST,
+    }
+  );
 
 
   const emit = defineEmits(['change']);
   const emit = defineEmits(['change']);
 
 
@@ -16,15 +23,12 @@
 
 
 <template>
 <template>
   <RadioGroup :value="props.value" button-style="solid" @change="handleChange">
   <RadioGroup :value="props.value" button-style="solid" @change="handleChange">
-    <Tooltip title="卡片模式">
-      <RadioButton class="cursor-pointer" :value="Mode.CARD">
-        <AppstoreOutlined />
-      </RadioButton>
-    </Tooltip>
-    <Tooltip title="列表模式">
-      <RadioButton class="cursor-pointer" :value="Mode.TABLE">
-        <UnorderedListOutlined />
-      </RadioButton>
-    </Tooltip>
+    <template v-for="item in $props.mode" :key="item.value">
+      <Tooltip :title="item.label">
+        <RadioButton class="cursor-pointer" :value="item.value">
+          <Icon :icon="item.icon" />
+        </RadioButton>
+      </Tooltip>
+    </template>
   </RadioGroup>
   </RadioGroup>
 </template>
 </template>

-export const enum Mode {
+import { ModeList } from './types';
+
+export enum EnumTableCardMode {
   CARD = 'CARD',
   CARD = 'CARD',
   TABLE = 'TABLE',
   TABLE = 'TABLE',
 }
 }
+
+export enum EnumTableChartMode {
+  TABLE = 'TABLE',
+  CHART = 'CHART',
+}
+
+export const TABLE_CARD_MODE_LIST: ModeList[] = [
+  {
+    label: '卡片模式',
+    value: EnumTableCardMode.CARD,
+    icon: 'ant-design:appstore-outlined',
+  },
+  {
+    label: '列表模式',
+    value: EnumTableCardMode.TABLE,
+    icon: 'ant-design:unordered-list-outlined',
+  },
+];
+
+export const TABLE_CHART_MODE_LIST: ModeList[] = [
+  {
+    label: '图表模式',
+    value: EnumTableChartMode.CHART,
+    icon: 'ant-design:line-chart-outlined',
+  },
+  {
+    label: '列表模式',
+    value: EnumTableChartMode.TABLE,
+    icon: 'ant-design:unordered-list-outlined',
+  },
+];

 export { default as ModeSwitchButton } from './ModeSwitchButton.vue';
 export { default as ModeSwitchButton } from './ModeSwitchButton.vue';
 export { default as CardLayoutButton } from './CardLayoutButton.vue';
 export { default as CardLayoutButton } from './CardLayoutButton.vue';
-export { Mode } from './const';
+export {
+  EnumTableCardMode,
+  EnumTableChartMode,
+  TABLE_CARD_MODE_LIST,
+  TABLE_CHART_MODE_LIST,
+} from './const';
+export type { ModeList } from './types';

+import { ExtractPropTypes } from 'vue';
+import Icon from '../Icon';
+
+export interface ModeList {
+  value: string;
+  label: string;
+  icon?: string;
+  iconProps?: ExtractPropTypes<typeof Icon>;
+}

 <script lang="ts" setup>
 <script lang="ts" setup>
   import { computed, nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
   import { computed, nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-  import { Empty, Spin, Tooltip, Button } from 'ant-design-vue';
+  import { Empty, Spin } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
   import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
   import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
   import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
@@ -13,8 +13,12 @@
   import { useHistoryData } from '../../hook/useHistoryData';
   import { useHistoryData } from '../../hook/useHistoryData';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { useTable, BasicTable } from '/@/components/Table';
   import { useTable, BasicTable } from '/@/components/Table';
-  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+  import {
+    ModeSwitchButton,
+    TABLE_CHART_MODE_LIST,
+    EnumTableChartMode,
+  } from '/@/components/Widget';
 
 
   interface DeviceDetail {
   interface DeviceDetail {
     tbDeviceId: string;
     tbDeviceId: string;
@@ -26,12 +30,7 @@
     attr?: string;
     attr?: string;
   }>();
   }>();
 
 
-  enum Mode {
-    TABLE = 'table',
-    CHART = 'chart',
-  }
-
-  const mode = ref<Mode>(Mode.CHART);
+  const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
 
 
   const chartRef = ref();
   const chartRef = ref();
 
 
@@ -151,9 +150,9 @@
             attrInfo?.detail.dataType.type as unknown as DataTypeEnum
             attrInfo?.detail.dataType.type as unknown as DataTypeEnum
           )
           )
         ) {
         ) {
-          mode.value = Mode.TABLE;
+          mode.value = EnumTableChartMode.TABLE;
         } else {
         } else {
-          mode.value = Mode.CHART;
+          mode.value = EnumTableChartMode.CHART;
         }
         }
       }
       }
     } catch (error) {}
     } catch (error) {}
@@ -200,7 +199,7 @@
     setOptions(setChartOptions(res, selectedKeys));
     setOptions(setChartOptions(res, selectedKeys));
   };
   };
 
 
-  const switchMode = (flag: Mode) => {
+  const switchMode = (flag: EnumTableChartMode) => {
     mode.value = flag;
     mode.value = flag;
   };
   };
 
 
@@ -221,55 +220,32 @@
     </section>
     </section>
     <section class="bg-white p-3">
     <section class="bg-white p-3">
       <Spin :spinning="loading" :absolute="true">
       <Spin :spinning="loading" :absolute="true">
-        <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
-          <Tooltip title="图表模式">
-            <Button
-              :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
-              class="!p-2 !children:flex flex justify-center items-center border-r-0"
-              @click="switchMode(Mode.CHART)"
-            >
-              <LineChartOutlined />
-            </Button>
-          </Tooltip>
-
-          <Tooltip title="列表模式">
-            <Button
-              class="!p-2 !children:flex flex justify-center items-center"
-              @click="switchMode(Mode.TABLE)"
-            >
-              <BarsOutlined />
-            </Button>
-          </Tooltip>
+        <div
+          v-show="mode === EnumTableChartMode.CHART"
+          class="flex h-70px items-center justify-end p-2"
+        >
+          <ModeSwitchButton
+            v-model:value="mode"
+            :mode="TABLE_CHART_MODE_LIST"
+            @change="switchMode"
+          />
         </div>
         </div>
         <div
         <div
-          v-show="isNull && mode === Mode.CHART"
+          v-show="isNull && mode === EnumTableChartMode.CHART"
           ref="chartRef"
           ref="chartRef"
           :style="{ height: '400px', width: '100%' }"
           :style="{ height: '400px', width: '100%' }"
         >
         >
         </div>
         </div>
-        <Empty v-show="!isNull && mode === Mode.CHART" />
+        <Empty v-show="!isNull && mode === EnumTableChartMode.CHART" />
 
 
-        <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
+        <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerTable">
           <template #toolbar>
           <template #toolbar>
-            <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
-              <Tooltip title="图表模式">
-                <Button
-                  class="!p-2 !children:flex flex justify-center items-center border-r-0"
-                  @click="switchMode(Mode.CHART)"
-                >
-                  <LineChartOutlined />
-                </Button>
-              </Tooltip>
-
-              <Tooltip title="列表模式">
-                <Button
-                  :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
-                  class="!p-2 !children:flex flex justify-center items-center"
-                  @click="switchMode(Mode.TABLE)"
-                >
-                  <BarsOutlined />
-                </Button>
-              </Tooltip>
+            <div class="flex h-70px items-center justify-end p-2">
+              <ModeSwitchButton
+                v-model:value="mode"
+                :mode="TABLE_CHART_MODE_LIST"
+                @change="switchMode"
+              />
             </div>
             </div>
           </template>
           </template>
         </BasicTable>
         </BasicTable>

 <script lang="ts" setup>
 <script lang="ts" setup>
   import { nextTick, onUnmounted, reactive, ref, unref } from 'vue';
   import { nextTick, onUnmounted, reactive, ref, unref } from 'vue';
-  import { List, Button, Tooltip, Card } from 'ant-design-vue';
+  import { List, Button, Card } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import { PageWrapper } from '/@/components/Page';
-  import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { BasicTable, useTable } from '/@/components/Table';
   import { realTimeDataColumns } from '../../config/detail.config';
   import { realTimeDataColumns } from '../../config/detail.config';
   import { useWebSocket } from '@vueuse/core';
   import { useWebSocket } from '@vueuse/core';
@@ -20,6 +19,7 @@
   import { isArray, isObject } from '/@/utils/is';
   import { isArray, isObject } from '/@/utils/is';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { ModeSwitchButton, EnumTableCardMode } from '/@/components/Widget';
 
 
   interface ReceiveMessage {
   interface ReceiveMessage {
     data: {
     data: {
@@ -112,14 +112,9 @@
 
 
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
 
 
-  enum Mode {
-    TABLE = 'table',
-    CARD = 'card',
-  }
-
-  const mode = ref<Mode>(Mode.CARD);
+  const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
 
 
-  const switchMode = async (value: Mode) => {
+  const switchMode = async (value: EnumTableCardMode) => {
     mode.value = value;
     mode.value = value;
     await nextTick();
     await nextTick();
     setTableData(socketInfo.dataSource);
     setTableData(socketInfo.dataSource);
@@ -210,28 +205,14 @@
       </div>
       </div>
     </section>
     </section>
     <section class="bg-light-50">
     <section class="bg-light-50">
-      <div v-show="mode === Mode.CARD" class="flex h-70px items-center justify-end p-2">
-        <Tooltip title="卡片模式">
-          <Button
-            :class="[mode === Mode.CARD && '!bg-blue-500 svg:text-light-50']"
-            class="!p-2 !children:flex flex justify-center items-center border-r-0"
-            @click="switchMode(Mode.CARD)"
-          >
-            <AppstoreOutlined />
-          </Button>
-        </Tooltip>
-
-        <Tooltip title="列表模式">
-          <Button
-            class="!p-2 !children:flex flex justify-center items-center"
-            @click="switchMode(Mode.TABLE)"
-          >
-            <BarsOutlined />
-          </Button>
-        </Tooltip>
+      <div
+        v-show="mode === EnumTableCardMode.CARD"
+        class="flex h-70px items-center justify-end p-2"
+      >
+        <ModeSwitchButton v-model:value="mode" @change="switchMode" />
       </div>
       </div>
       <List
       <List
-        v-if="mode === Mode.CARD"
+        v-if="mode === EnumTableCardMode.CARD"
         class="list-mode !px-2"
         class="list-mode !px-2"
         :data-source="socketInfo.dataSource"
         :data-source="socketInfo.dataSource"
         :grid="grid"
         :grid="grid"
@@ -260,27 +241,13 @@
       </List>
       </List>
     </section>
     </section>
 
 
-    <BasicTable v-if="mode === Mode.TABLE" @register="registerTable">
+    <BasicTable v-if="mode === EnumTableCardMode.TABLE" @register="registerTable">
       <template #toolbar>
       <template #toolbar>
-        <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
-          <Tooltip title="卡片模式">
-            <Button
-              class="!p-2 !children:flex flex justify-center items-center border-r-0"
-              @click="switchMode(Mode.CARD)"
-            >
-              <AppstoreOutlined />
-            </Button>
-          </Tooltip>
-
-          <Tooltip title="列表模式">
-            <Button
-              :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
-              class="!p-2 !children:flex flex justify-center items-center"
-              @click="switchMode(Mode.TABLE)"
-            >
-              <BarsOutlined />
-            </Button>
-          </Tooltip>
+        <div
+          v-show="mode === EnumTableCardMode.TABLE"
+          class="flex h-70px items-center justify-end p-2"
+        >
+          <ModeSwitchButton v-model:value="mode" @change="switchMode" />
         </div>
         </div>
       </template>
       </template>
     </BasicTable>
     </BasicTable>

@@ -50,28 +50,18 @@
       <TimePeriodForm @register="timePeriodRegister" />
       <TimePeriodForm @register="timePeriodRegister" />
       <section>
       <section>
         <Spin :spinning="loading">
         <Spin :spinning="loading">
-          <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
-            <Tooltip title="图表模式">
-              <Button
-                :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
-                class="!p-2 !children:flex flex justify-center items-center border-r-0"
-                @click="switchMode(Mode.CHART)"
-              >
-                <LineChartOutlined />
-              </Button>
-            </Tooltip>
-
-            <Tooltip title="列表模式">
-              <Button
-                class="!p-2 !children:flex flex justify-center items-center"
-                @click="switchMode(Mode.TABLE)"
-              >
-                <BarsOutlined />
-              </Button>
-            </Tooltip>
+          <div
+            v-show="mode === EnumTableChartMode.CHART"
+            class="flex h-70px items-center justify-end p-2"
+          >
+            <ModeSwitchButton
+              v-model:value="mode"
+              :mode="TABLE_CHART_MODE_LIST"
+              @change="switchMode"
+            />
           </div>
           </div>
           <div
           <div
-            v-show="isNull && mode === Mode.CHART"
+            v-show="isNull && mode === EnumTableChartMode.CHART"
             ref="chartRef"
             ref="chartRef"
             :style="{ height: '400px', width }"
             :style="{ height: '400px', width }"
           >
           >
@@ -79,30 +69,17 @@
           <Empty
           <Empty
             :style="{ height: '550px', width }"
             :style="{ height: '550px', width }"
             class="flex flex-col justify-center items-center"
             class="flex flex-col justify-center items-center"
-            v-show="!isNull && mode === Mode.CHART"
+            v-show="!isNull && mode === EnumTableChartMode.CHART"
           />
           />
 
 
-          <BasicTable v-show="mode === Mode.TABLE" @register="registerAttrTable">
+          <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerAttrTable">
             <template #toolbar>
             <template #toolbar>
-              <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
-                <Tooltip title="图表模式">
-                  <Button
-                    class="!p-2 !children:flex flex justify-center items-center border-r-0"
-                    @click="switchMode(Mode.CHART)"
-                  >
-                    <LineChartOutlined />
-                  </Button>
-                </Tooltip>
-
-                <Tooltip title="列表模式">
-                  <Button
-                    :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
-                    class="!p-2 !children:flex flex justify-center items-center"
-                    @click="switchMode(Mode.TABLE)"
-                  >
-                    <BarsOutlined />
-                  </Button>
-                </Tooltip>
+              <div class="flex h-70px items-center justify-end p-2">
+                <ModeSwitchButton
+                  v-model:value="mode"
+                  :mode="TABLE_CHART_MODE_LIST"
+                  @change="switchMode"
+                />
               </div>
               </div>
             </template>
             </template>
           </BasicTable>
           </BasicTable>
@@ -134,7 +111,7 @@
   import { formSchema, columns } from './config.data';
   import { formSchema, columns } from './config.data';
   import { BasicTable, useTable } from '/@/components/Table';
   import { BasicTable, useTable } from '/@/components/Table';
   import { devicePage } from '/@/api/alarm/contact/alarmContact';
   import { devicePage } from '/@/api/alarm/contact/alarmContact';
-  import { Tag, Empty, Spin, Tooltip, Button } from 'ant-design-vue';
+  import { Tag, Empty, Spin } from 'ant-design-vue';
   import { DeviceState } from '/@/api/device/model/deviceModel';
   import { DeviceState } from '/@/api/device/model/deviceModel';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { useModal, BasicModal } from '/@/components/Modal';
   import { useModal, BasicModal } from '/@/components/Modal';
@@ -157,8 +134,12 @@
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
   import { useAsyncQueue } from './useAsyncQueue';
   import { useAsyncQueue } from './useAsyncQueue';
   import { useHistoryData } from '../list/hook/useHistoryData';
   import { useHistoryData } from '../list/hook/useHistoryData';
-  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { formatToDateTime } from '/@/utils/dateUtil';
+  import {
+    TABLE_CHART_MODE_LIST,
+    EnumTableChartMode,
+    ModeSwitchButton,
+  } from '/@/components/Widget';
 
 
   interface DeviceInfo {
   interface DeviceInfo {
     alarmStatus: 0 | 1;
     alarmStatus: 0 | 1;
@@ -183,10 +164,7 @@
       DeviceDetailDrawer,
       DeviceDetailDrawer,
       TimePeriodForm,
       TimePeriodForm,
       Spin,
       Spin,
-      Tooltip,
-      Button,
-      LineChartOutlined,
-      BarsOutlined,
+      ModeSwitchButton,
     },
     },
     props: {
     props: {
       width: {
       width: {
@@ -199,12 +177,7 @@
       },
       },
     },
     },
     setup() {
     setup() {
-      enum Mode {
-        TABLE = 'table',
-        CHART = 'chart',
-      }
-
-      const mode = ref<Mode>(Mode.CHART);
+      const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
       let entityId = '';
       let entityId = '';
       let globalRecord: any = {};
       let globalRecord: any = {};
       const wrapRef = ref<HTMLDivElement | null>(null);
       const wrapRef = ref<HTMLDivElement | null>(null);
@@ -571,13 +544,14 @@
         openGatewayDetailDrawer(true, data);
         openGatewayDetailDrawer(true, data);
       };
       };
 
 
-      const switchMode = (flag: Mode) => {
+      const switchMode = (flag: EnumTableChartMode) => {
         mode.value = flag;
         mode.value = flag;
       };
       };
 
 
       return {
       return {
         mode,
         mode,
-        Mode,
+        EnumTableChartMode,
+        TABLE_CHART_MODE_LIST,
         wrapRef,
         wrapRef,
         registerTable,
         registerTable,
         deviceRowClick,
         deviceRowClick,

@@ -4,7 +4,7 @@
   import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
   import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
   import { ReloadOutlined, EyeOutlined, FormOutlined, MoreOutlined } from '@ant-design/icons-vue';
   import { ReloadOutlined, EyeOutlined, FormOutlined, MoreOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
-  import { CardLayoutButton, Mode, ModeSwitchButton } from '/@/components/Widget';
+  import { CardLayoutButton, EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
   import { Authority } from '/@/components/Authority';
   import { Authority } from '/@/components/Authority';
   import {
   import {
     deviceConfigDelete,
     deviceConfigDelete,
@@ -94,7 +94,7 @@
     }
     }
   };
   };
 
 
-  const handleModeChange = (mode: Mode) => {
+  const handleModeChange = (mode: EnumTableCardMode) => {
     emit('changeMode', mode);
     emit('changeMode', mode);
   };
   };
 
 

@@ -118,10 +118,10 @@
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
   import { Popconfirm } from 'ant-design-vue';
   import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
   import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
-  import { Mode, ModeSwitchButton } from '/@/components/Widget';
+  import { EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
 
 
   defineProps<{
   defineProps<{
-    mode: Mode;
+    mode: EnumTableCardMode;
   }>();
   }>();
 
 
   const emit = defineEmits(['changeMode']);
   const emit = defineEmits(['changeMode']);
@@ -310,7 +310,7 @@
     disabled.value = true;
     disabled.value = true;
   };
   };
 
 
-  const handleModeChange = (value: Mode) => {
+  const handleModeChange = (value: EnumTableCardMode) => {
     emit('changeMode', value);
     emit('changeMode', value);
   };
   };
 </script>
 </script>

@@ -2,17 +2,21 @@
   import { ref } from 'vue';
   import { ref } from 'vue';
   import TableMode from './TableMode.vue';
   import TableMode from './TableMode.vue';
   import CardMode from './CardMode.vue';
   import CardMode from './CardMode.vue';
-  import { Mode } from '/@/components/Widget';
-  const mode = ref(Mode.CARD);
+  import { EnumTableCardMode } from '/@/components/Widget';
+  const mode = ref(EnumTableCardMode.CARD);
 
 
-  const handleChangeMode = (flag: Mode) => {
+  const handleChangeMode = (flag: EnumTableCardMode) => {
     mode.value = flag;
     mode.value = flag;
   };
   };
 </script>
 </script>
 
 
 <template>
 <template>
   <section>
   <section>
-    <CardMode v-if="mode === Mode.CARD" :mode="mode" @change-mode="handleChangeMode" />
-    <TableMode v-if="mode === Mode.TABLE" :mode="mode" @change-mode="handleChangeMode" />
+    <CardMode v-if="mode === EnumTableCardMode.CARD" :mode="mode" @change-mode="handleChangeMode" />
+    <TableMode
+      v-if="mode === EnumTableCardMode.TABLE"
+      :mode="mode"
+      @change-mode="handleChangeMode"
+    />
   </section>
   </section>
 </template>
 </template>

 <script lang="ts" setup>
 <script lang="ts" setup>
   import { computed, nextTick, Ref, ref, unref } from 'vue';
   import { computed, nextTick, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-  import { Empty, Tooltip, Button, Spin } from 'ant-design-vue';
+  import { Empty, Spin } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
   import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -14,19 +14,18 @@
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { useHistoryData } from '/@/views/device/list/hook/useHistoryData';
   import { useHistoryData } from '/@/views/device/list/hook/useHistoryData';
   import { BasicTable, useTable } from '/@/components/Table';
   import { BasicTable, useTable } from '/@/components/Table';
-  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { formatToDateTime } from '/@/utils/dateUtil';
+  import {
+    ModeSwitchButton,
+    TABLE_CHART_MODE_LIST,
+    EnumTableChartMode,
+  } from '/@/components/Widget';
 
 
   type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
   type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
 
 
   defineEmits(['register']);
   defineEmits(['register']);
 
 
-  enum Mode {
-    TABLE = 'table',
-    CHART = 'chart',
-  }
-
-  const mode = ref<Mode>(Mode.CHART);
+  const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
 
 
   const chartRef = ref();
   const chartRef = ref();
 
 
@@ -245,7 +244,7 @@
     destory();
     destory();
   };
   };
 
 
-  const switchMode = (flag: Mode) => {
+  const switchMode = (flag: EnumTableChartMode) => {
     mode.value = flag;
     mode.value = flag;
   };
   };
 </script>
 </script>
@@ -269,61 +268,38 @@
       </section>
       </section>
       <section class="bg-white p-3" style="min-height: 350px">
       <section class="bg-white p-3" style="min-height: 350px">
         <Spin :spinning="loading" :absolute="true">
         <Spin :spinning="loading" :absolute="true">
-          <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
-            <Tooltip title="图表模式">
-              <Button
-                :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
-                class="!p-2 !children:flex flex justify-center items-center border-r-0"
-                @click="switchMode(Mode.CHART)"
-              >
-                <LineChartOutlined />
-              </Button>
-            </Tooltip>
-
-            <Tooltip title="列表模式">
-              <Button
-                class="!p-2 !children:flex flex justify-center items-center"
-                @click="switchMode(Mode.TABLE)"
-              >
-                <BarsOutlined />
-              </Button>
-            </Tooltip>
+          <div
+            v-show="mode === EnumTableChartMode.CHART"
+            class="flex h-70px items-center justify-end p-2"
+          >
+            <ModeSwitchButton
+              v-model:value="mode"
+              :mode="TABLE_CHART_MODE_LIST"
+              @change="switchMode"
+            />
           </div>
           </div>
 
 
           <div
           <div
-            v-show="isNull && mode === Mode.CHART"
+            v-show="isNull && mode === EnumTableChartMode.CHART"
             ref="chartRef"
             ref="chartRef"
             :style="{ height: '350px', width: '100%' }"
             :style="{ height: '350px', width: '100%' }"
           >
           >
           </div>
           </div>
           <Empty
           <Empty
-            v-if="mode === Mode.CHART"
+            v-if="mode === EnumTableChartMode.CHART"
             class="h-350px flex flex-col justify-center items-center"
             class="h-350px flex flex-col justify-center items-center"
             description="暂无数据，请选择设备查询"
             description="暂无数据，请选择设备查询"
             v-show="!isNull"
             v-show="!isNull"
           />
           />
 
 
-          <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
+          <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerTable">
             <template #toolbar>
             <template #toolbar>
-              <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
-                <Tooltip title="图表模式">
-                  <Button
-                    class="!p-2 !children:flex flex justify-center items-center border-r-0"
-                    @click="switchMode(Mode.CHART)"
-                  >
-                    <LineChartOutlined />
-                  </Button>
-                </Tooltip>
-
-                <Tooltip title="列表模式">
-                  <Button
-                    :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
-                    class="!p-2 !children:flex flex justify-center items-center"
-                    @click="switchMode(Mode.TABLE)"
-                  >
-                    <BarsOutlined />
-                  </Button>
-                </Tooltip>
+              <div class="flex h-70px items-center justify-end p-2">
+                <ModeSwitchButton
+                  v-model:value="mode"
+                  :mode="TABLE_CHART_MODE_LIST"
+                  @change="switchMode"
+                />
               </div>
               </div>
             </template>
             </template>
           </BasicTable>
           </BasicTable>