新增 TagSwitch 项目级通用组件

Web/src/components/TagSwitch/README.md

@@ -0,0 +1,22 @@
+# `TagSwitch` 使用说明
+
+`TagSwitch`，是基于 [喵你个汪](https://https://gitee.com/jasondom) PR的 `SysDict`组件封装的标签开关，展示状态下显示为 tag 标签，需要修改时，移动鼠标至 `tag` 上将自动切换为 `switch` ，点击即可切换。本组件与 `switch` 一样，适用于仅有两个不同值的场景(如： 启用/禁用、 是/否、 男/女 等)。
+
+---
+
+## 如何使用
+
+```html
+<template>
+	<tag-switch v-model="你要绑定的值" :active-value="switch打开时的值" :inactive-value="switch关闭时的值" code="字典编码" @change="change回调的方法" />
+</template>
+<script lang="ts" setup>
+import TagSwitch from '/@/components/TagSwitch/index.vue';
+</script>
+```
+
+注意：`code` 必须为在系统中已经配置的数据字典
+
+---
+
+最新更新于 2025.09.29

Web/src/components/TagSwitch/index.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="tagsw">
+        <el-switch size="small" class="tagsw-switch" 
+            v-model="tgswModelValue"
+            :active-value="activeValue"
+            :inactive-value="inactiveValue" 
+            @change="handleChange"
+        />
+        <span class="tagsw-tage">
+            <GSysDict v-model="tgswModelValue" :code="code" />
+        </span>
+    </div>
+</template>
+
+<script lang="ts" setup name="TagSwitch">
+import { computed, PropType } from 'vue';
+import GSysDict from "/@/components/sysDict/sysDict.vue";
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const props = defineProps({
+    /**
+     * 绑定的值，支持多种类型
+     * @example
+     * <tag-switch v-model="value" code="xxxx" />
+   */
+    modelValue: {
+        type: [String, Number, Boolean, Array, null] as PropType<string | number | boolean | any[] | null>,
+        default: null,
+        required: true,
+    },
+
+    /**
+     * 字典编码，用于获取字典项 (同sys-dict)
+     * @example 'gender'
+   */
+    code: {
+        type: String,
+        required: true,
+    },
+    
+    /**
+     * switch 状态为 on 时的值，默认true (同el-switch)
+     * @example true
+     */
+    activeValue: {
+        type: [String, Number, Boolean] as PropType<string | number | boolean>,
+        default: true,
+    },
+    /**
+     * switch的状态为 off 时的值，默false (同el-switch)
+     * @example false
+     */
+    inactiveValue: {
+        type: [String, Number, Boolean] as PropType<string | number | boolean>,
+        default: false,
+    },
+});
+const tgswModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+
+
+const handleChange = (val: any) => {
+    emit('change', val);
+};
+</script>
+
+<style lang="scss" scoped>
+.tagsw {
+    //width: 100%;
+
+    .tagsw-switch {
+        display: none;
+        height: 100%;
+        line-height: 100%;
+    }
+
+    .tagsw-tage {
+        display: block;
+    }
+}
+.tagsw:hover {
+    .tagsw-switch {
+        display: inline-flex;
+    }
+
+    .tagsw-tage {
+        display: none;
+    }
+}
+</style>

Web/src/views/system/user/index.vue

@@ -72,8 +72,7 @@
 							show-overflow-tooltip />
 						<el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
 							<template #default="scope">
-								<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" size="small"
-									@change="changeStatus(scope.row)" v-auth="'sysUser:setStatus'" />
+								<TagSwitch v-model="scope.row.status" :active-value="1" :inactive-value="2" code="StatusEnum" @change="changeStatus(scope.row)" v-auth="'sysUser:setStatus'" />
 							</template>
 						</el-table-column>
 						<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip />
@@ -140,6 +139,7 @@ import 'splitpanes/dist/splitpanes.css';
 import { getAPI } from '/@/utils/axios-utils';
 import { SysUserApi, SysOrgApi } from '/@/api-services/api';
 import { SysUser, UpdateUserInput, OrgTreeOutput } from '/@/api-services/models';
+import TagSwitch from '/@/components/TagSwitch/index.vue';
 
 const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
 const editUserRef = ref<InstanceType<typeof EditUser>>();