feat: customized site title

src/i18n/lang/en/router.ts

@@ -21,6 +21,7 @@ const router: LRouter = {
     },
     notification: 'Notification',
     environment: 'Environment',
+    system: 'System Settings',
     misc: {
       disclaimer: 'Disclaimer',
       mySettings: 'My Settings',

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

@@ -12,6 +12,7 @@ import tokens from './tokens';
 import env from './env';
 import notification from './notification';
 import environment from './environment';
+import system from './system';
 import plugins from './plugins';
 import misc from './misc';
 
@@ -31,6 +32,7 @@ const views: LViews = {
   notification,
   environment,
   plugins,
+  system,
   misc,
 };
 export default views;

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

@@ -0,0 +1,6 @@
+const system: LViewsSystem = {
+  customizeSiteTitle: 'Customize Site Title',
+  siteTitle: 'Site Title',
+};
+
+export default system;

src/i18n/lang/zh/router.ts

@@ -21,6 +21,7 @@ const router: LRouter = {
     },
     notification: '消息通知',
     environment: '环境变量',
+    system: '系统设置',
     misc: {
       disclaimer: '免责声明',
       mySettings: '我的设置',

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

@@ -12,6 +12,7 @@ import tokens from './tokens';
 import env from './env';
 import notification from './notification';
 import environment from './environment';
+import system from './system';
 import plugins from './plugins';
 import misc from './misc';
 
@@ -31,6 +32,7 @@ const views: LViews = {
   notification,
   environment,
   plugins,
+  system,
   misc,
 };
 export default views;

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

@@ -0,0 +1,6 @@
+const system: LViewsSystem = {
+  customizeSiteTitle: '是否自定义网站标题',
+  siteTitle: '网站标题',
+};
+
+export default system;

src/interfaces/i18n/router.d.ts

@@ -22,6 +22,7 @@ export declare global {
       };
       notification: string;
       environment: string;
+      system: string;
       misc: {
         disclaimer: string;
         mySettings: string;

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

@@ -16,5 +16,6 @@ export declare global {
     misc: LViewsMisc;
     ds: LViewsDataSource;
     environment: LViewsEnvironments;
+    system: LViewsSystem;
   }
 }

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

@@ -0,0 +1,4 @@
+interface LViewsSystem {
+  customizeSiteTitle: string;
+  siteTitle: string;
+}

src/interfaces/models/setting.d.ts

@@ -1,6 +1,6 @@
 export declare global {
   interface Setting extends BaseModel {
     key: string;
-    value: { [key: string]: string };
+    value: { [key: string]: any };
   }
 }

src/interfaces/store/index.d.ts

@@ -19,6 +19,7 @@ export declare global {
     notification: NotificationStoreState;
     ds: DataSourceStoreState;
     environment: EnvironmentStoreState;
+    system: SystemStoreState;
   }
 
   type StoreGetter<S, T, R = RootStoreState> = (state: S, getters: GetterTree<S, R>, rootState: R, rootGetters: any) => T;

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

@@ -0,0 +1,25 @@
+import {GetterTree, Module, MutationTree} from 'vuex';
+
+declare global {
+  interface SystemStoreModule extends Module<SystemStoreState, RootStoreState> {
+    getters: SystemStoreGetters;
+    mutations: SystemStoreMutations;
+    actions: SystemStoreActions;
+  }
+
+  interface SystemStoreState {
+    siteTitle: Setting;
+  }
+
+  interface SystemStoreGetters extends GetterTree<SystemStoreState, RootStoreState> {
+  }
+
+  interface SystemStoreMutations extends MutationTree<SystemStoreState> {
+    setSiteTitle: StoreMutation<SystemStoreState, Setting>;
+  }
+
+  interface SystemStoreActions extends BaseStoreActions {
+    getSiteTitle: StoreAction<SystemStoreState>;
+    saveSiteTitle: StoreAction<SystemStoreState>;
+  }
+}

src/layouts/components/Sidebar.vue

@@ -14,22 +14,38 @@
     <font-awesome-icon v-else :icon="['fas', 'indent']"/>
   </span>
   <el-aside :class="sidebarCollapsed ? 'collapsed' : ''" class="sidebar" width="inherit">
+    <!-- Logo -->
     <div class="logo-container">
       <div v-if="!sidebarCollapsed" class="logo">
-        <img class="logo-img" alt="logo-img" :src="logo"/>
-        <span class="logo-sub-title">
-          <div class="logo-sub-title-block">
-            {{ t(systemInfo.edition || '') }}
-          </div>
-          <div class="logo-sub-title-block">
-            {{ systemInfo.version }}
-          </div>
-        </span>
+        <div
+          v-if="!siteTitle.value?.customize_site_title || !siteTitle.value?.site_title"
+          class="logo"
+        >
+          <img class="logo-img" alt="logo-img" :src="logo"/>
+          <span class="logo-sub-title">
+            <div class="logo-sub-title-block">
+              {{ t(systemInfo.edition || '') }}
+            </div>
+            <div class="logo-sub-title-block">
+              {{ systemInfo.version }}
+            </div>
+          </span>
+        </div>
+        <div v-else class="logo-title">
+          {{ siteTitle.value?.site_title }}
+        </div>
       </div>
       <div v-else class="logo">
-        <img class="logo-img" alt="logo-img" :src="logoIcon"/>
+        <img
+          class="logo-img"
+          alt="logo-img"
+          :src="logoIcon"
+        />
       </div>
     </div>
+    <!-- ./Logo -->
+
+    <!-- Sidebar Menu -->
     <div class="sidebar-menu">
       <el-menu
         :collapse="sidebarCollapsed"
@@ -46,6 +62,7 @@
         <div class="plugin-anchor"/>
       </el-menu>
     </div>
+    <!-- ./Sidebar Menu -->
   </el-aside>
   <div class="script-anchor"/>
 </template>
@@ -74,6 +91,7 @@ export default defineComponent({
     const {
       common: commonState,
       layout: layoutState,
+      system: systemState,
     } = store.state as RootStoreState;
 
     const storeNamespace = 'layout';
@@ -137,6 +155,8 @@ export default defineComponent({
 
     const systemInfo = computed<SystemInfo>(() => commonState.systemInfo || {});
 
+    const siteTitle = computed<Setting>(() => systemState.siteTitle);
+
     return {
       sidebarCollapsed,
       toggleIcon,
@@ -148,6 +168,7 @@ export default defineComponent({
       onMenuItemClick,
       toggleSidebar,
       systemInfo,
+      siteTitle,
       t,
     };
   },
@@ -194,7 +215,7 @@ export default defineComponent({
 
       .logo-title {
         font-family: BlinkMacSystemFont, -apple-system, segoe ui, roboto, oxygen, ubuntu, cantarell, fira sans, droid sans, helvetica neue, helvetica, arial, sans-serif;
-        font-size: 28px;
+        font-size: 20px;
         font-weight: 600;
         margin-left: 12px;
         color: #ffffff;

src/router/index.ts

@@ -12,9 +12,10 @@ import token from '@/router/token';
 import env from '@/router/env';
 import notification from '@/router/notification';
 import plugin from '@/router/plugin';
-import misc from '@/router/misc';
 import ds from '@/router/ds';
 import environment from '@/router/environment';
+import system from '@/router/system';
+import misc from '@/router/misc';
 import {initRouterAuth} from '@/router/hooks/auth';
 import {initRouterStats} from '@/router/hooks/stats';
 import {ROUTER_ROOT_NAME_ROOT} from '@/constants/router';
@@ -43,6 +44,7 @@ export function getDefaultRoutes(): Array<RouteRecordRaw> {
         ...misc,
         ...ds,
         ...environment,
+        ...system,
       ],
     },
   ];
@@ -72,7 +74,7 @@ export function getDefaultSidebarMenuItems(): MenuItem[] {
     },
     {path: '/notifications', title: 'router.menuItems.notification', icon: ['fa', 'envelope']},
     {path: '/environments', title: 'router.menuItems.environment', icon: ['fa', 'percent']},
-    // {path: '/plugins', title: 'router.menuItems.plugins', icon: ['fa', 'plug']},
+    {path: '/system', title: 'router.menuItems.system', icon: ['fa', 'cogs']},
   ];
 }
 

src/router/system.ts

@@ -0,0 +1,11 @@
+import {RouteRecordRaw} from 'vue-router';
+
+const endpoint = 'system';
+
+export default [
+  {
+    name: 'SystemDetail',
+    path: endpoint,
+    component: () => import('@/views/system/detail/SystemDetail.vue'),
+  },
+] as Array<RouteRecordRaw>;

src/store/index.ts

@@ -16,6 +16,7 @@ import git from '@/store/modules/git';
 import notification from '@/store/modules/notification';
 import ds from '@/store/modules/ds';
 import environment from '@/store/modules/environment';
+import system from '@/store/modules/system';
 
 let _store: Store<RootStoreState>;
 
@@ -39,6 +40,7 @@ export const createStore = (): Store<RootStoreState> => {
       notification,
       ds,
       environment,
+      system,
     },
   });
 };

src/store/modules/layout.ts

@@ -52,6 +52,7 @@ export default {
           if ([
             '/notifications',
             '/environments',
+            '/system',
           ].includes(d.path) && rootState.common.systemInfo?.edition !== 'global.edition.pro') {
             return false;
           }

src/store/modules/system.ts

@@ -0,0 +1,30 @@
+import useRequest from "@/services/request";
+
+const {
+  get,
+  put,
+} = useRequest();
+
+export default {
+  namespaced: true,
+  state: {
+    siteTitle: {},
+  },
+  getters: {},
+  mutations: {
+    setSiteTitle(state, siteTitle) {
+      state.siteTitle = {...siteTitle};
+    }
+  },
+  actions: {
+    getSiteTitle: async ({state}: StoreActionContext<SystemStoreState>) => {
+      const res = await get('/settings/site_title');
+      state.siteTitle = res.data;
+      console.debug(state.siteTitle);
+    },
+    saveSiteTitle: async ({state}: StoreActionContext<SystemStoreState>) => {
+      console.debug(state.siteTitle);
+      await put('/settings/site_title', state.siteTitle);
+    },
+  }
+} as SystemStoreModule;

src/views/system/detail/SystemDetail.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="system-detail">
+    <cl-nav-actions>
+      <cl-nav-action-group-detail-common
+        :show-back-button="false"
+        :show-save-button="true"
+        @save="onSave"
+      />
+    </cl-nav-actions>
+    <cl-form>
+      <cl-form-item
+        :span="1"
+        :label="t('views.system.customizeSiteTitle')"
+      >
+        <cl-switch v-model="siteTitle.value.customize_site_title" @change="onSiteTitleChange"/>
+      </cl-form-item>
+      <cl-form-item
+        :span="3"
+        :label="t('views.system.siteTitle')"
+      >
+        <el-input
+          v-model="siteTitle.value.site_title"
+          :disabled="!siteTitle.value.customize_site_title"
+          placeholder="网站标题"
+          @change="onSiteTitleChange"
+        />
+      </cl-form-item>
+    </cl-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onBeforeMount, ref} from "vue";
+import {translate} from "@/utils";
+import {useStore} from "vuex";
+import {ElMessage} from "element-plus";
+
+const t = translate;
+
+const ns = 'system';
+const store = useStore();
+const {
+  system: state,
+} = store.state as RootStoreState;
+
+const siteTitle = ref<Setting>({
+  key: 'site_title',
+  value: {
+    customize_site_title: false,
+    site_title: '',
+  }
+});
+const onSiteTitleChange = () => {
+  store.commit(`${ns}/setSiteTitle`, siteTitle.value)
+};
+onBeforeMount(async () => {
+  await store.dispatch(`${ns}/getSiteTitle`);
+  siteTitle.value = state.siteTitle;
+});
+
+const onSave = async () => {
+  await store.dispatch(`${ns}/saveSiteTitle`);
+  await ElMessage.success(t('common.message.success.save'));
+};
+</script>
+
+<style lang="scss" scoped>
+.system-detail {
+  background-color: #ffffff;
+  min-height: 100%;
+
+  .el-form {
+    padding: 20px;
+  }
+}
+</style>