feat: dynamic configuration

src/api/sys/configuration.ts

@@ -1,12 +1,17 @@
 import { defHttp } from '@/utils/http/axios';
 import { ErrorMessageMode } from '/#/axios';
-import { BaseDataResp, BaseListReq, BaseResp, BaseIDsReq, BaseIDReq } from '@/api/model/baseModel';
-import { ConfigurationInfo, ConfigurationListResp } from './model/configurationModel';
+import { BaseDataResp, BaseResp, BaseIDsReq, BaseIDReq } from '@/api/model/baseModel';
+import {
+  ConfigurationInfo,
+  ConfigurationListResp,
+  ConfigurationListReq,
+} from './model/configurationModel';
 
 enum Api {
   CreateConfiguration = '/sys-api/configuration/create',
   UpdateConfiguration = '/sys-api/configuration/update',
   GetConfigurationList = '/sys-api/configuration/list',
+  GetPublicSystemConfigurationList = '/sys-api/configuration/system/list',
   DeleteConfiguration = '/sys-api/configuration/delete',
   GetConfigurationById = '/sys-api/configuration',
 }
@@ -15,17 +20,34 @@ enum Api {
  * @description: Get configuration list
  */
 
-export const getConfigurationList = (params: BaseListReq, mode: ErrorMessageMode = 'notice') => {
+export const getConfigurationList = (
+  params: ConfigurationListReq,
+  mode: ErrorMessageMode = 'notice',
+) => {
   return defHttp.post<BaseDataResp<ConfigurationListResp>>(
     { url: Api.GetConfigurationList, params },
     { errorMessageMode: mode },
   );
 };
 
+/**
+ * @description: Get public system configuration list
+ */
+
+export const getPublicSystemConfigurationList = (mode: ErrorMessageMode = 'none') => {
+  return defHttp.get<BaseDataResp<ConfigurationListResp>>(
+    { url: Api.GetPublicSystemConfigurationList },
+    { errorMessageMode: mode },
+  );
+};
+
 /**
  *  @description: Create a new configuration
  */
-export const createConfiguration = (params: ConfigurationInfo, mode: ErrorMessageMode = 'notice') => {
+export const createConfiguration = (
+  params: ConfigurationInfo,
+  mode: ErrorMessageMode = 'notice',
+) => {
   return defHttp.post<BaseResp>(
     { url: Api.CreateConfiguration, params: params },
     {
@@ -38,7 +60,10 @@ export const createConfiguration = (params: ConfigurationInfo, mode: ErrorMessag
 /**
  *  @description: Update the configuration
  */
-export const updateConfiguration = (params: ConfigurationInfo, mode: ErrorMessageMode = 'notice') => {
+export const updateConfiguration = (
+  params: ConfigurationInfo,
+  mode: ErrorMessageMode = 'notice',
+) => {
   return defHttp.post<BaseResp>(
     { url: Api.UpdateConfiguration, params: params },
     {

src/api/sys/model/configurationModel.ts

@@ -21,3 +21,9 @@ export interface ConfigurationInfo {
  */
 
 export type ConfigurationListResp = BaseListResp<ConfigurationInfo>;
+
+export interface ConfigurationListReq {
+  page: number;
+  pageSize: number;
+  category?: string;
+}

src/components/Application/src/AppLogo.vue

@@ -4,9 +4,10 @@
 -->
 <template>
   <div class="anticon" :class="getAppLogoClass" @click="goHome">
-    <img src="../../../assets/images/logo.png" />
+    <img v-if="dynamicConfigStore.getSystemLogo !== ''" :src="dynamicConfigStore.getSystemLogo" />
+    <img v-if="dynamicConfigStore.getSystemLogo === ''" src="../../../assets/images/logo.png" />
     <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
-      {{ title }}
+      {{ dynamicConfigStore.getSystemName !== '' ? dynamicConfigStore.getSystemName : title }}
     </div>
   </div>
 </template>
@@ -18,6 +19,7 @@
   import { useDesign } from '@/hooks/web/useDesign';
   import { PageEnum } from '@/enums/pageEnum';
   import { useUserStore } from '@/store/modules/user';
+  import { useDynamicConfigStore } from '@/store/modules/dynamicConfig';
 
   const props = defineProps({
     /**
@@ -39,6 +41,7 @@
   const userStore = useUserStore();
   const { title } = useGlobSetting();
   const go = useGo();
+  const dynamicConfigStore = useDynamicConfigStore();
 
   const getAppLogoClass = computed(() => [
     prefixCls,

src/router/guard/permissionGuard.ts

@@ -1,6 +1,7 @@
 import type { Router, RouteRecordRaw } from 'vue-router';
 
 import { usePermissionStoreWithOut } from '@/store/modules/permission';
+import { useDynamicConfigStore } from '/@/store/modules/dynamicConfig';
 
 import { PageEnum } from '@/enums/pageEnum';
 import { useUserStoreWithOut } from '@/store/modules/user';
@@ -9,6 +10,7 @@ import { PAGE_NOT_FOUND_ROUTE } from '@/router/routes/basic';
 
 import { RootRoute } from '@/router/routes';
 import { PAGE_NOT_FOUND_NAME_CHILDREN } from '../constant';
+import { useAppStore } from '/@/store/modules/app';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 
@@ -19,6 +21,9 @@ const whitePathList: PageEnum[] = [LOGIN_PATH];
 export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
+  const dynamicConfigStore = useDynamicConfigStore();
+  const appStore = useAppStore();
+
   router.beforeEach(async (to, from, next) => {
     if (
       from.path === ROOT_PATH &&
@@ -98,6 +103,11 @@ export function createPermissionGuard(router: Router) {
       return;
     }
 
+    // init dynamic config
+    dynamicConfigStore.getDynamicConfigFromServer().then(() => {
+      appStore.setProjectConfig({ showSettingButton: dynamicConfigStore.showSettingButton });
+    });
+
     const routes = await permissionStore.buildRoutesAction();
 
     routes.forEach((route) => {

src/store/modules/dynamicConfig.ts

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia';
+import { getPublicSystemConfigurationList } from '/@/api/sys/configuration';
+
+interface DynamicConfig {
+  systemName: string;
+  systemLogo: string;
+  showSettingButton: boolean;
+}
+
+export const useDynamicConfigStore = defineStore('app-dynamic-config', {
+  state: (): DynamicConfig => ({
+    systemName: '',
+    systemLogo: '',
+    showSettingButton: true,
+  }),
+  getters: {
+    getSystemName(): string {
+      return this.systemName;
+    },
+    getSystemLogo(): string {
+      return this.systemLogo;
+    },
+  },
+  actions: {
+    async getDynamicConfigFromServer() {
+      const config = await getPublicSystemConfigurationList();
+
+      if (config.code === 0 && config.data.total !== 0) {
+        const name = config.data.data.find((v) => v.key == 'sys.ui.name');
+        if (name !== undefined) {
+          this.systemName = name.value !== undefined ? name.value : '';
+        }
+
+        const logo = config.data.data.find((v) => v.key == 'sys.ui.logo');
+        if (logo !== undefined) {
+          this.systemLogo = logo.value !== undefined ? logo.value : '';
+        }
+
+        const showSettingButton = config.data.data.find((v) => v.key == 'sys.ui.showSettingButton');
+        if (showSettingButton !== undefined) {
+          this.showSettingButton =
+            showSettingButton.value !== undefined && showSettingButton.value === 'true'
+              ? true
+              : false;
+        }
+      } else if (config.code === 0 && config.data.total === 0) {
+        this.systemName = '';
+        this.systemLogo = '';
+        this.showSettingButton = true;
+      }
+    },
+  },
+  persist: true,
+});

src/views/sys/login/Login.vue

@@ -57,6 +57,7 @@
   import { useI18n } from '@/hooks/web/useI18n';
   import { useDesign } from '@/hooks/web/useDesign';
   import { useLocaleStore } from '@/store/modules/locale';
+  import { useDynamicConfigStore } from '/@/store/modules/dynamicConfig';
 
   defineProps({
     sessionTimeout: {
@@ -70,6 +71,8 @@
   const localeStore = useLocaleStore();
   const showLocale = localeStore.getShowPicker;
   const title = computed(() => globSetting?.title ?? '');
+  const dynamicConfigStore = useDynamicConfigStore();
+  dynamicConfigStore.getDynamicConfigFromServer();
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-login';