feat: enhance system settings management with new dependency and cust…

…omization tabs

- Introduced new tabs for managing system settings: 'Customize' and 'Dependency'.
- Refactored SystemDetail.vue to utilize the new tab components for better organization.
- Added form validation and file upload handling for custom logos in the Customize tab.
- Implemented state management for dependency settings, including auto-install options.
- Updated internationalization files to include new labels for dependency management.
- Improved the overall user experience by streamlining the settings interface and enhancing functionality.

These changes provide a more structured approach to managing system settings, improving usability and clarity in the user interface.

src/components/core/database/tables/DatabaseTableDetailData.vue

@@ -30,9 +30,9 @@ const getRowHash = (row: DatabaseTableRow) => {
     return row.__hash__;
   }
   if (primaryColumnName.value) {
-    return getMd5(JSON.stringify(row[primaryColumnName.value]));
+    return getMd5(row[primaryColumnName.value]);
   }
-  return getMd5(JSON.stringify(row));
+  return getMd5(row);
 };
 
 const getHeaderIcon = (column: DatabaseColumn) => {

src/components/core/dependency/DependencySetupDialog.vue

@@ -3,7 +3,7 @@ import { computed, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
 import useRequest from '@/services/request';
-import { browser } from 'globals';
+import { ClForm } from '@/components';
 
 const t = translate;
 
@@ -13,6 +13,8 @@ const ns: ListStoreNamespace = 'dependency';
 const store = useStore();
 const { dependency: state, node: nodeState } = store.state as RootStoreState;
 
+const formRef = ref<typeof ClForm>();
+
 const config = computed(() => state.config);
 const lang = computed(() => state.lang);
 
@@ -57,6 +59,9 @@ const onConfirm = async () => {
   // Skip if the confirm button is disabled
   if (confirmButtonDisabled.value) return;
 
+  // Validate form
+  await formRef.value?.validate();
+
   // Install config setup
   await store.dispatch(`${ns}/installConfigSetup`, {
     id: activeConfigSetup.value?._id,
@@ -124,7 +129,7 @@ defineOptions({ name: 'ClDependencySetupDialog' });
     @confirm="onConfirm"
     @close="onClose"
   >
-    <cl-form>
+    <cl-form ref="formRef" :model="form">
       <cl-form-item :span="4" :label="t('views.env.deps.config.form.name')">
         <cl-tag
           :key="config?.name"
@@ -136,11 +141,14 @@ defineOptions({ name: 'ClDependencySetupDialog' });
       <cl-form-item
         :span="4"
         :label="t('views.env.deps.configSetup.form.version')"
+        required
+        prop="version"
       >
         <el-select
           v-model="form.version"
           :disabled="getVersionsLoading"
           :placeholder="t('common.status.loading')"
+          default-first-option
           filterable
         >
           <el-option

src/components/ui/file/FileEditor.vue

@@ -66,7 +66,6 @@ const activeFileItem = computed<FileNavItem | undefined>(
 const themeColors = ref<monaco.editor.IColors>({});
 
 const styles = computed<FileEditorStyles>(() => {
-  console.debug(themeColors.value);
   return {
     default: {
       backgroundColor: themeColors.value['editor.background'],

src/components/ui/resize/ResizeHandle.vue

@@ -63,7 +63,6 @@ const initResize = (event: MouseEvent) => {
     direction === 'horizontal'
       ? targetRef?.clientHeight || 0
       : targetRef?.clientWidth || 0;
-  console.debug(initialSize.value);
   startX.value = event.clientX;
   startY.value = event.clientY;
   document.addEventListener('mousemove', resize);

src/i18n/lang/en/views/system.ts

@@ -1,7 +1,7 @@
 const system: LViewsSystem = {
   menuItems: {
-    customize: 'Customize',
-    registration: 'User Registration',
+    customize: 'Customization',
+    dependency: 'Dependency Management',
   },
   customize: {
     customTitle: 'Custom Site Title',
@@ -16,6 +16,9 @@ const system: LViewsSystem = {
       fileSizeExceeded: 'File size exceeded',
     },
   },
+  dependency: {
+    autoInstall: 'Auto Install',
+  },
 };
 
 export default system;

src/i18n/lang/zh/views/system.ts

@@ -1,7 +1,7 @@
 const system: LViewsSystem = {
   menuItems: {
-    customize: '自定义',
-    registration: '用户注册',
+    customize: '自定义管理',
+    dependency: '依赖管理',
   },
   customize: {
     customTitle: '自定义网站标题',
@@ -15,6 +15,9 @@ const system: LViewsSystem = {
       fileSizeExceeded: '文件大小超过限制',
     },
   },
+  dependency: {
+    autoInstall: '自动安装',
+  },
 };
 
 export default system;

src/interfaces/common/concept.d.ts

@@ -0,0 +1,3 @@
+export declare global {
+  type GeneralConcept = 'customize';
+}

src/interfaces/i18n/views/system.d.ts

@@ -1,7 +1,7 @@
 interface LViewsSystem {
   menuItems: {
     customize: string;
-    registration: string;
+    dependency: string;
   };
   customize: {
     customTitle: string;
@@ -15,4 +15,7 @@ interface LViewsSystem {
       fileSizeExceeded: string;
     };
   };
+  dependency: {
+    autoInstall: string;
+  };
 }

src/interfaces/models/setting.d.ts

@@ -1,6 +1,18 @@
 export declare global {
-  interface Setting extends BaseModel {
+  interface Setting<T = Record<string, any>> extends BaseModel {
     key: string;
-    value: { [key: string]: any };
+    value: T;
+  }
+
+  interface SettingCustomize {
+    custom_title?: string;
+    show_custom_title?: boolean;
+    custom_logo?: string;
+    show_custom_logo?: boolean;
+    hide_platform_version?: boolean;
+  }
+
+  interface SettingDependency {
+    auto_install?: boolean;
   }
 }

src/interfaces/store/modules/system.d.ts

@@ -8,18 +8,27 @@ declare global {
   }
 
   interface SystemStoreState {
-    customize: Setting;
+    settings: Record<string, Setting>;
   }
 
   interface SystemStoreGetters
     extends GetterTree<SystemStoreState, RootStoreState> {}
 
   interface SystemStoreMutations extends MutationTree<SystemStoreState> {
-    setCustomize: StoreMutation<SystemStoreState, Setting>;
+    setSetting: StoreMutation<
+      SystemStoreState,
+      { key: string; value: Setting }
+    >;
+    resetSetting: StoreMutation<SystemStoreState, { key: string }>;
+    setSettings: StoreMutation<
+      SystemStoreState,
+      { settings: Record<string, Setting> }
+    >;
+    resetSettings: StoreMutation<SystemStoreState>;
   }
 
   interface SystemStoreActions extends BaseStoreActions {
-    getCustomize: StoreAction<SystemStoreState>;
-    saveCustomize: StoreAction<SystemStoreState>;
+    getSetting: StoreAction<SystemStoreState, { key: string }>;
+    saveSetting: StoreAction<SystemStoreState, { key: string; value: Setting }>;
   }
 }

src/layouts/components/Sidebar.vue

@@ -63,7 +63,7 @@ const toggleSidebar = () => {
 
 const systemInfo = computed<SystemInfo>(() => commonState.systemInfo || {});
 
-const customize = computed<Setting>(() => systemState.customize);
+const customize = computed<Setting>(() => systemState.settings.customize);
 const showCustomTitle = computed<boolean>(
   () => customize.value?.value?.show_custom_title
 );
@@ -87,7 +87,7 @@ const customizedLogo = computed<string>(() => {
 
 onBeforeMount(async () => {
   if (isPro()) {
-    await store.dispatch('system/getCustomize');
+    await store.dispatch('system/getSetting', { key: 'customize' });
   }
 });
 
@@ -131,7 +131,11 @@ defineOptions({ name: 'ClSidebar' });
         </div>
       </div>
       <div v-else class="logo">
-        <img class="logo-img" alt="logo-img" :src="logoIcon" />
+        <img
+          class="logo-img"
+          alt="logo-img"
+          :src="showCustomLogo ? customizedLogo : logoIcon"
+        />
       </div>
     </div>
 

src/layouts/content/list/ListLayout.vue

@@ -117,7 +117,7 @@ const getNavActionButtonDisabled = (btn: ListActionButton) => {
 
 const tableColumnsHash = computed<string>(() => {
   const { tableColumns } = props;
-  return getMd5(JSON.stringify(tableColumns));
+  return getMd5(tableColumns);
 });
 
 const className = computed(() => {

src/store/modules/dependency.ts

@@ -294,8 +294,7 @@ const actions = {
         total: res.total,
       };
       if (
-        getMd5(JSON.stringify(tableData.data)) !==
-        getMd5(JSON.stringify(state.installedDependenciesTableData))
+        getMd5(tableData.data) !== getMd5(state.installedDependenciesTableData)
       ) {
         commit('setInstalledDependenciesTableData', tableData);
       }
@@ -324,10 +323,7 @@ const actions = {
         data: res.data || [],
         total: res.total,
       };
-      if (
-        getMd5(JSON.stringify(state.searchRepoTableData)) !==
-        getMd5(JSON.stringify(tableData.data))
-      ) {
+      if (getMd5(state.searchRepoTableData) !== getMd5(tableData.data)) {
         commit('setSearchRepoTableData', tableData);
       }
       return res;
@@ -488,10 +484,7 @@ const actions = {
         data: res.data || [],
         total: res.total,
       };
-      if (
-        getMd5(JSON.stringify(state.configSetupTableData)) !==
-        getMd5(JSON.stringify(tableData.data))
-      ) {
+      if (getMd5(state.configSetupTableData) !== getMd5(tableData.data)) {
         commit('setConfigSetupTableData', tableData);
       }
       return res;

src/store/modules/system.ts

@@ -1,29 +1,64 @@
 import useRequest from '@/services/request';
+import { getMd5 } from '@/utils';
 
 const { get, post, put } = useRequest();
 
-export default {
-  namespaced: true,
-  state: {
-    customize: { key: 'customize', value: {} },
+const getDefaultSetting = (key: string): Setting => {
+  return { key, value: {} };
+};
+
+const state = {
+  settings: {},
+} as SystemStoreState;
+
+const getters = {} as SystemStoreGetters;
+
+const mutations = {
+  setSetting: (state: SystemStoreState, { key, value }) => {
+    state.settings[key] = value || getDefaultSetting(key);
+  },
+  resetSetting: (state: SystemStoreState, { key }) => {
+    state.settings[key] = getDefaultSetting(key);
   },
-  getters: {},
-  mutations: {
-    setCustomize(state, siteTitle) {
-      state.customize = { ...siteTitle };
-    },
+  setSettings: (state: SystemStoreState, { settings }) => {
+    state.settings = settings;
   },
-  actions: {
-    getCustomize: async ({ state }: StoreActionContext<SystemStoreState>) => {
-      const res = await get('/settings/customize');
-      state.customize = res.data || { key: 'customize', value: {} };
-    },
-    saveCustomize: async ({ state }: StoreActionContext<SystemStoreState>) => {
-      if (!state.customize._id) {
-        await post('/settings/customize', state.customize);
-      } else {
-        await put('/settings/customize', state.customize);
-      }
-    },
+  resetSettings: (state: SystemStoreState) => {
+    state.settings = {};
   },
+} as SystemStoreMutations;
+
+const actions = {
+  getSetting: async (
+    { commit }: StoreActionContext<SystemStoreState>,
+    { key }: { key: string }
+  ) => {
+    const res = await get(`/settings/${key}`);
+    const resData = res.data || getDefaultSetting(key);
+    commit('setSetting', { key, value: resData });
+  },
+  saveSetting: async (
+    _: StoreActionContext<SystemStoreState>,
+    {
+      key,
+      value,
+    }: {
+      key: string;
+      value: Setting;
+    }
+  ) => {
+    if (!value._id) {
+      await post(`/settings/${key}`, value);
+    } else {
+      await put(`/settings/${key}`, value);
+    }
+  },
+} as SystemStoreActions;
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
 } as SystemStoreModule;

src/utils/hash.ts

@@ -1,5 +1,8 @@
 import md5 from 'md5';
 
-export const getMd5 = (text: string): string => {
-  return md5(text).toString();
+export const getMd5 = (value: any): string => {
+  if (typeof value !== 'string') {
+    value = JSON.stringify(value);
+  }
+  return md5(value).toString();
 };

src/utils/icon.ts

@@ -131,9 +131,11 @@ export const getIconByTabName = (tabName: string): Icon => {
       return ['fa', 'circle'];
   }
 };
+
 export const getIconByNavItem = (item: NavItem): Icon => {
   return getIconByTabName(item.id);
 };
+
 export const getIconByAction = (action: string): Icon | undefined => {
   switch (action) {
     // Basic Actions
@@ -294,3 +296,12 @@ export const getIconByRouteConcept = (concept: RouteConcept): Icon => {
       return ['fa', 'circle'];
   }
 };
+
+export const getIconByGeneralConcept = (concept: GeneralConcept): Icon => {
+  switch (concept) {
+    case 'customize':
+      return ['fa', 'palette'];
+    default:
+      return ['fa', 'circle'];
+  }
+};

src/utils/index.ts

@@ -29,3 +29,4 @@ export * from './notification';
 export * from './time';
 export * from './icon';
 export * from './dependency';
+export * from './base64';