feat(projects): Using data dictionary rendering.

src/constants/business.ts

@@ -1,104 +0,0 @@
-import { transformRecordToOption } from '@/utils/common';
-
-export const enableStatusRecord: Record<Api.Common.EnableStatus, App.I18n.I18nKey> = {
-  '1': 'page.manage.common.status.enable',
-  '0': 'page.manage.common.status.disable'
-};
-
-export const enableStatusTag: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
-  0: 'error',
-  1: 'success'
-};
-
-export const enableStatusOptions = transformRecordToOption(enableStatusRecord);
-
-/** user gender */
-export const userGenderRecord: Record<Api.SystemManage.UserGender, App.I18n.I18nKey> = {
-  '0': 'page.manage.user.userGender.confidential',
-  '1': 'page.manage.user.userGender.male',
-  '2': 'page.manage.user.userGender.female'
-};
-
-export const userGenderTag: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
-  0: 'warning',
-  1: 'primary',
-  2: 'error'
-};
-
-export const userGenderOptions = transformRecordToOption(userGenderRecord);
-
-/** menu type */
-export const menuTypeRecord: Record<Api.SystemManage.MenuType, App.I18n.I18nKey> = {
-  '1': 'page.manage.menu.menuType.directory',
-  '2': 'page.manage.menu.menuType.menu'
-};
-
-export const menuTypeTag: Record<Api.SystemManage.MenuType, NaiveUI.ThemeColor> = {
-  1: 'default',
-  2: 'primary'
-};
-
-export const menuTypeOptions = transformRecordToOption(menuTypeRecord);
-
-/** menu icon type */
-export const menuIconTypeRecord: Record<Api.SystemManage.IconType, App.I18n.I18nKey> = {
-  '1': 'page.manage.menu.iconType.iconify',
-  '2': 'page.manage.menu.iconType.local'
-};
-
-export const menuIconTypeOptions = transformRecordToOption(menuIconTypeRecord);
-
-/** monitor logs login status */
-export const logsLoginStatusRecord: Record<Api.Monitor.LogsLoginStatus, App.I18n.I18nKey> = {
-  '0': 'page.monitor.logs.login.loginStatus.fail',
-  '1': 'page.monitor.logs.login.loginStatus.success'
-};
-
-export const logsLoginStatusTag: Record<Api.Monitor.LogsLoginStatus, NaiveUI.ThemeColor> = {
-  0: 'error',
-  1: 'success'
-};
-
-export const logsLoginStatusOptions = transformRecordToOption(logsLoginStatusRecord);
-
-/** monitor logs scheduler status */
-export const logsSchedulerStatusRecord: Record<Api.Monitor.SchedulerExecuteStatus, App.I18n.I18nKey> = {
-  FAIL: 'page.monitor.logs.scheduler.executeStatus.fail',
-  SUCCESS: 'page.monitor.logs.scheduler.executeStatus.success'
-};
-
-export const logsSchedulerStatusTag: Record<Api.Monitor.SchedulerExecuteStatus, NaiveUI.ThemeColor> = {
-  FAIL: 'error',
-  SUCCESS: 'success'
-};
-
-export const logsSchedulerStatusOptions = transformRecordToOption(logsSchedulerStatusRecord);
-
-/** monitor scheduler trigger state */
-export const schedulerTriggerStateRecord: Record<Api.Monitor.SchedulerTriggerState, App.I18n.I18nKey> = {
-  WAITING: 'page.monitor.scheduler.triggerStates.waiting',
-  ACQUIRED: 'page.monitor.scheduler.triggerStates.acquired',
-  EXECUTING: 'page.monitor.scheduler.triggerStates.executing',
-  PAUSED: 'page.monitor.scheduler.triggerStates.paused',
-  BLOCKED: 'page.monitor.scheduler.triggerStates.blocked',
-  ERROR: 'page.monitor.scheduler.triggerStates.error'
-};
-
-export const schedulerTriggerStateTag: Record<Api.Monitor.SchedulerTriggerState, NaiveUI.ThemeColor> = {
-  WAITING: 'success',
-  ACQUIRED: 'success',
-  EXECUTING: 'success',
-  PAUSED: 'error',
-  BLOCKED: 'error',
-  ERROR: 'error'
-};
-
-export const schedulerTriggerStateOptions = transformRecordToOption(schedulerTriggerStateRecord);
-
-/** dict type */
-export const dictTypeRecord: Record<Api.SystemManage.DictType, App.I18n.I18nKey> = {
-  '1': 'page.manage.dict.dictType.system',
-  '2': 'page.manage.dict.dictType.business'
-};
-
-export const dictTypeOptions = transformRecordToOption(dictTypeRecord);

src/constants/common.ts

@@ -1,13 +1,12 @@
 import { transformRecordToOption } from '@/utils/common';
 
-export const yesOrNoRecord: Record<CommonType.YesOrNo, App.I18n.I18nKey> = {
-  Y: 'common.yesOrNo.yes',
-  N: 'common.yesOrNo.no'
+const themeColorRecord: Record<NaiveUI.ThemeColor, string> = {
+  default: 'Default',
+  error: 'Error',
+  primary: 'Primary',
+  info: 'Info',
+  success: 'Success',
+  warning: 'Warning'
 };
 
-export const yesOrNoTag: Record<CommonType.YesOrNo, NaiveUI.ThemeColor> = {
-  Y: 'success',
-  N: 'error'
-};
-
-export const yesOrNoOptions = transformRecordToOption(yesOrNoRecord);
+export const themeColorOptions = transformRecordToOption(themeColorRecord);

src/enum/index.ts

@@ -3,5 +3,6 @@ export enum SetupStoreId {
   Theme = 'theme-store',
   Auth = 'auth-store',
   Route = 'route-store',
-  Tab = 'tab-store'
+  Tab = 'tab-store',
+  Dict = 'dict-store'
 }

src/hooks/business/dict.ts

@@ -0,0 +1,74 @@
+import { NTag, NText } from 'naive-ui';
+import type { VNode } from 'vue';
+import { h } from 'vue';
+import { useDictStore } from '@/store/modules/dict';
+
+export function useDict() {
+  const dictStore = useDictStore();
+
+  /**
+   * Get dictionary options by dictionary code
+   *
+   * @param code Dictionary code
+   * @returns Dictionary options array
+   */
+  function dictOptions(code: string): Api.SystemManage.DictOptions[] | [] {
+    return dictStore.options(code);
+  }
+
+  /**
+   * Get the dictionary item type by dictionary code and value
+   *
+   * @param code Dictionary code
+   * @param value Dictionary item value
+   * @returns The theme color associated with the dictionary item type
+   */
+  function dcitType(code: string, value: string): NaiveUI.ThemeColor {
+    return dictStore.type(code).get(value) || 'default';
+  }
+
+  /**
+   * Get dictionary label by dictionary code and value
+   *
+   * @param code Dictionary code
+   * @param value Dictionary item value
+   * @returns Dictionary item label
+   */
+  function dictLabel(code: string, value: string): string {
+    return dictStore.map(code).get(value) || '';
+  }
+
+  /**
+   * Get dictionary text node by dictionary code and value
+   *
+   * @param code Dictionary code
+   * @param value Dictionary item value
+   * @returns VNode representing the dictionary text
+   */
+  function dictText(code: string, value: string | null): VNode | null {
+    if (value === null) return null;
+    const type = dcitType(code, value);
+    return h(NText, { type }, () => dictLabel(code, value));
+  }
+
+  /**
+   * Get dictionary tag node by dictionary code and value
+   *
+   * @param code Dictionary code
+   * @param value Dictionary item value
+   * @returns VNode representing the dictionary tag
+   */
+  function dictTag(code: string, value: string | null): VNode | null {
+    if (value === null) return null;
+    const type = dcitType(code, value);
+    return h(NTag, { type, bordered: false }, () => dictLabel(code, value));
+  }
+
+  return {
+    dictLabel,
+    dcitType,
+    dictText,
+    dictTag,
+    dictOptions
+  };
+}

src/locales/langs/en-us.ts

@@ -535,6 +535,7 @@ const local: App.I18n.Schema = {
         zhCN: 'Simplified Chinese',
         enUS: 'English',
         color: 'Color',
+        type: 'Type',
         sort: 'Sort',
         status: 'Status',
         description: 'Description',
@@ -543,6 +544,7 @@ const local: App.I18n.Schema = {
           zhCN: 'Please enter item simplified Chinese',
           enUS: 'Please enter item English',
           color: 'Please enter color',
+          type: 'Please select type',
           sort: 'Please enter sort',
           status: 'Please select item status',
           description: 'Please enter item description'

src/locales/langs/zh-cn.ts

@@ -536,13 +536,15 @@ const local: App.I18n.Schema = {
         enUS: '英文',
         color: '#颜色',
         sort: '排序',
+        type: '类型',
         status: '状态',
         description: '描述',
         form: {
           value: '请输入字典值',
           zhCN: '请输入字典项中文',
           enUS: '请输入字典项英文',
           color: '请选择颜色',
+          type: '请选择类型',
           sort: '请输入排序',
           status: '请选择字典项状态',
           description: '请输入字典描述'

src/router/guard/route.ts

@@ -4,6 +4,7 @@ import { getRouteName } from '@/router/elegant/transform';
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouteStore } from '@/store/modules/route';
 import { localStg } from '@/utils/storage';
+import { useDictStore } from '@/store/modules/dict';
 
 /**
  * create route guard
@@ -90,6 +91,7 @@ export function createRouteGuard(router: Router) {
 async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw | null> {
   const authStore = useAuthStore();
   const routeStore = useRouteStore();
+  const dictStore = useDictStore();
 
   const notFoundRoute: RouteKey = 'not-found';
   const isNotFoundRoute = to.name === notFoundRoute;
@@ -155,11 +157,15 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
     return location;
   }
 
+  // initalize the user info
   await authStore.initUserInfo();
 
   // initialize the auth route
   await routeStore.initAuthRoute();
 
+  // initialize the dict item
+  await dictStore.init();
+
   // the route is captured by the "not-found" route because the auth route is not initialized
   // after the auth route is initialized, redirect to the original route
   if (isNotFoundRoute) {

src/service/api/manage/dict.ts

@@ -105,4 +105,21 @@ export function fetchDeleteDictItem(data: Api.Common.DeleteParams) {
   });
 }
 
+/** get all item dict Map */
+export function fetchGetAllDictItemMap() {
+  return request<Map<String, Api.SystemManage.DictOptions[]>>({
+    url: '/sys_dict_item/all_dict',
+    method: 'GET'
+  });
+}
+
+/** get item dict Map */
+export function fetchGetDictItemMap(data: Api.SystemManage.DictStoreSearchParams) {
+  return request<Api.SystemManage.DictOptions[]>({
+    url: '/sys_dict_item/map_options',
+    method: 'GET',
+    data
+  });
+}
+
 // =============== Dict End  ===============

src/store/modules/auth/index.ts

@@ -9,12 +9,14 @@ import { localStg } from '@/utils/storage';
 import { $t } from '@/locales';
 import { useRouteStore } from '../route';
 import { useTabStore } from '../tab';
+import { useDictStore } from '../dict';
 import { clearAuthStorage, getToken } from './shared';
 
 export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
   const route = useRoute();
   const routeStore = useRouteStore();
   const tabStore = useTabStore();
+  const dictStore = useDictStore();
   const { toLogin, redirectFromLogin } = useRouterPush(false);
   const { loading: loginLoading, startLoading, endLoading } = useLoading();
 
@@ -73,6 +75,8 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
       if (pass) {
         await routeStore.initAuthRoute();
 
+        await dictStore.init();
+
         if (redirect) {
           await redirectFromLogin();
         }

src/store/modules/dict/index.ts

@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { SetupStoreId } from '@/enum';
+import { fetchGetAllDictItemMap } from '@/service/api';
+
+export const useDictStore = defineStore(SetupStoreId.Dict, () => {
+  const dictItemMap = ref<Map<String, Api.SystemManage.DictOptions[]>>();
+
+  /** Initialize dictionary data */
+  async function init() {
+    // Fetch data from API
+    const { error, data } = await fetchGetAllDictItemMap();
+    if (!error) {
+      // Convert the fetched data to a Map and assign it to dictItemMap
+      dictItemMap.value = new Map(Object.entries(data));
+    }
+  }
+
+  /**
+   * Get dictionary item type map by dictionary code
+   *
+   * @param code Dictionary code
+   * @returns Dictionary item type map
+   */
+  function type(code: string): Map<string, NaiveUI.ThemeColor> {
+    return options(code).reduce((acc, item) => acc.set(item.value, item.type), new Map<string, NaiveUI.ThemeColor>());
+  }
+
+  /**
+   * Get dictionary item label map by dictionary code
+   *
+   * @param code Dictionary code
+   * @returns Dictionary item label map
+   */
+  function map(code: string): Map<string, string> {
+    return options(code).reduce((acc, item) => acc.set(item.value, item.label), new Map<string, string>());
+  }
+
+  /**
+   * Get dictionary item array by dictionary code
+   *
+   * @param code Dictionary code
+   * @returns Dictionary item array
+   */
+  function options(code: string): Api.SystemManage.DictOptions[] | [] {
+    return dictItemMap.value?.get(code) || [];
+  }
+
+  return {
+    init,
+    type,
+    map,
+    options
+  };
+});