feat(dict): reuse user dictionaries in personal center

src/views/personal-center/index.vue

@@ -97,13 +97,7 @@
 
                   <div class="flex justify-between items-center py-2">
                     <span class="text-gray-600">状态</span>
-                    <n-tag
-                      :type="(personalData.userStatus || '0') === '0' ? 'info' : 'error'"
-                      :style="(personalData.userStatus || '0') === '0' ? { backgroundColor: '#6366f1', color: 'white', border: 'none' } : {}"
-                      size="small"
-                    >
-                      {{ getStatusText(personalData.userStatus || '0') }}
-                    </n-tag>
+                    <DictTag dict-type="sys_switch_status" :value="personalData.userStatus || '0'" />
                   </div>
 
                   <div class="flex justify-between items-center py-2">
@@ -260,12 +254,14 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useAuthStore } from '@/store/auth'
 import { coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
 import { getPersonalData, updateBasicData, updatePassword, uploadAvatar } from '@/service/api/personal'
 import type { PersonalDataVo, UpdatePasswordBo, UpdatePersonalBo } from '@/service/api/personal'
 import { serviceConfig } from '@/../service.config'
+import DictTag from '@/components/common/DictTag.vue'
+import { useDict } from '@/hooks'
 
 // 获取用户信息
 const authStore = useAuthStore()
@@ -343,29 +339,12 @@ const passwordRules = {
   ],
 }
 
-// 性别选项
-const genderOptions = [
-  { label: '男', value: '1' },
-  { label: '女', value: '2' },
-  { label: '未知', value: '3' },
-]
+const { getSelectOptions, getDictLabel } = useDict(['sys_user_sex', 'sys_switch_status'])
 
-// 状态选项
-const statusOptions = [
-  { label: '启用', value: '0' },
-  { label: '停用', value: '1' },
-]
+const genderOptions = computed(() => getSelectOptions('sys_user_sex'))
 
-// 获取性别显示文字
 function getGenderText(sex: string) {
-  const option = genderOptions.find(item => item.value === sex)
-  return option?.label || '未知'
-}
-
-// 获取状态显示文字
-function getStatusText(status: string) {
-  const option = statusOptions.find(item => item.value === status)
-  return option?.label || '未知'
+  return getDictLabel('sys_user_sex', sex, '未知')
 }
 
 // 获取角色名称列表