feat: 增加导航拦设置功能

ui/src/layout/components/top-bar/index.vue

@@ -20,28 +20,43 @@
         <AppIcon iconName="app-pricing" class="mr-8" style="font-size: 20px"></AppIcon>
         购买专业版
       </el-button>
-      <el-tooltip effect="dark" :content="$t('layout.topbar.github')" placement="top">
+      <el-tooltip
+        effect="dark"
+        :content="$t('layout.topbar.github')"
+        placement="top"
+        v-if="user.themeInfo?.showProject"
+      >
         <AppIcon
           iconName="app-github"
           class="cursor color-secondary mr-8 ml-8"
           style="font-size: 20px"
-          @click="toUrl('https://github.com/1Panel-dev/MaxKB')"
+          @click="toUrl(user.themeInfo?.projectUrl)"
         ></AppIcon>
       </el-tooltip>
-      <el-tooltip effect="dark" :content="$t('layout.topbar.wiki')" placement="top">
+      <el-tooltip
+        effect="dark"
+        :content="$t('layout.topbar.wiki')"
+        placement="top"
+        v-if="user.themeInfo?.showUserManual"
+      >
         <AppIcon
           iconName="app-reading"
           class="cursor color-secondary mr-8 ml-8"
           style="font-size: 20px"
-          @click="toUrl('https://maxkb.cn/docs/')"
+          @click="toUrl(user.themeInfo?.userManualUrl)"
         ></AppIcon>
       </el-tooltip>
-      <el-tooltip effect="dark" :content="$t('layout.topbar.forum')" placement="top">
+      <el-tooltip
+        effect="dark"
+        :content="$t('layout.topbar.forum')"
+        placement="top"
+        v-if="user.themeInfo?.showForum"
+      >
         <AppIcon
           iconName="app-help"
           class="cursor color-secondary mr-16 ml-8"
           style="font-size: 20px"
-          @click="toUrl('https://bbs.fit2cloud.com/c/mk/11')"
+          @click="toUrl(user.themeInfo?.forumUrl)"
         ></AppIcon>
       </el-tooltip>
       <el-dropdown v-if="false" trigger="click" type="primary">

ui/src/stores/modules/user.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { type Ref } from 'vue'
 import type { User } from '@/api/type/user'
-
+import { cloneDeep } from 'lodash'
 import UserApi from '@/api/user'
 import ThemeApi from '@/api/theme'
 import { useElementPlusTheme } from 'use-element-plus-theme'
@@ -38,7 +38,7 @@ const useUserStore = defineStore({
     setTheme(data: any) {
       const { changeTheme } = useElementPlusTheme(this.themeInfo?.theme)
       changeTheme(data?.['theme'])
-      this.themeInfo = data
+      this.themeInfo = cloneDeep(data)
     },
     isExpire() {
       return this.isXPack && !this.XPACK_LICENSE_IS_VALID

ui/src/utils/theme.ts

@@ -37,3 +37,12 @@ export const defaultSetting = {
   title: 'MaxKB',
   slogan: '欢迎使用 MaxKB 智能知识库'
 }
+
+export const defaultPlatformSetting = {
+  showUserManual: true,
+  userManualUrl: 'https://maxkb.cn/docs/',
+  showForum: true,
+  forumUrl: 'https://bbs.fit2cloud.com/c/mk/11',
+  showProject: true,
+  projectUrl: 'https://github.com/1Panel-dev/MaxKB'
+}

ui/src/views/theme/index.vue

@@ -25,7 +25,7 @@
           <el-card shadow="never" class="layout-bg">
             <div class="flex-between">
               <h5 class="mb-16">页面预览</h5>
-              <el-button type="primary" link @click="resetForm"> 恢复默认 </el-button>
+              <el-button type="primary" link @click="resetForm('login')"> 恢复默认 </el-button>
             </div>
             <el-scrollbar>
               <div class="theme-preview">
@@ -133,6 +133,85 @@
             </div>
           </el-card>
         </div>
+        <div class="app-card p-24 mt-16">
+          <h5 class="mb-16">平台设置</h5>
+          <el-card shadow="never" class="layout-bg">
+            <div class="flex-between">
+              <h5 class="mb-16">页面预览</h5>
+              <el-button type="primary" link @click="resetForm('platform')"> 恢复默认 </el-button>
+            </div>
+            <el-scrollbar>
+              <div class="theme-preview">
+                <el-row :gutter="8">
+                  <el-col :span="16">
+                    <div class="theme-platform mr-16">
+                      <div
+                        class="theme-platform-header border-b flex-between"
+                        :class="!isDefaultTheme ? 'custom-header' : ''"
+                      >
+                        <div class="flex-center h-full">
+                          <div class="app-title-container cursor">
+                            <div class="logo flex-center">
+                              <LogoFull height="25px" />
+                            </div>
+                          </div>
+                        </div>
+                        <div class="flex-center">
+                          <AppIcon
+                            iconName="app-github"
+                            class="cursor color-secondary mr-8 ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showProject"
+                          ></AppIcon>
+                          <AppIcon
+                            iconName="app-reading"
+                            class="cursor color-secondary mr-8 ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showUserManual"
+                          ></AppIcon>
+                          <AppIcon
+                            iconName="app-help"
+                            class="cursor color-secondary ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showForum"
+                          ></AppIcon>
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="theme-form">
+                      <div>
+                        <el-checkbox v-model="themeForm.showUserManual" label="显示用户手册" />
+                        <div class="ml-16">
+                          <el-input
+                            v-model="themeForm.userManualUrl"
+                            placeholder="请输入 URL 地址"
+                          />
+                        </div>
+                      </div>
+                      <div class="my-2">
+                        <el-checkbox v-model="themeForm.showForum" label="显示论坛求助" />
+                        <div class="ml-16">
+                          <el-input v-model="themeForm.forumUrl" placeholder="请输入 URL 地址" />
+                        </div>
+                      </div>
+                      <div class="mt-2">
+                        <el-checkbox v-model="themeForm.showProject" label="显示项目地址" />
+                        <div class="ml-16">
+                          <el-input v-model="themeForm.projectUrl" placeholder="请输入 URL 地址" />
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-scrollbar>
+            <div class="mt-16">
+              <el-text type="info">默认为 MaxKB 登录界面，支持自定义设置</el-text>
+            </div>
+          </el-card>
+        </div>
       </div>
     </el-scrollbar>
     <div class="theme-setting__operate w-full p-16-24">
@@ -143,12 +222,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { useRouter, onBeforeRouteLeave } from 'vue-router'
 import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
 import { cloneDeep } from 'lodash'
 import LoginPreview from './LoginPreview.vue'
-import { themeList, defaultSetting } from '@/utils/theme'
+import { themeList, defaultSetting, defaultPlatformSetting } from '@/utils/theme'
 import ThemeApi from '@/api/theme'
 import { MsgSuccess, MsgError } from '@/utils/message'
 import useStore from '@/stores'
@@ -161,6 +240,9 @@ onBeforeRouteLeave((to, from) => {
 })
 
 const themeInfo = computed(() => user.themeInfo)
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
 
 const themeFormRef = ref<FormInstance>()
 const loading = ref(false)
@@ -171,7 +253,13 @@ const themeForm = ref<any>({
   loginLogo: '',
   loginImage: '',
   title: 'MaxKB',
-  slogan: '欢迎使用 MaxKB 智能知识库'
+  slogan: '欢迎使用 MaxKB 智能知识库',
+  showUserManual: false,
+  userManualUrl: '',
+  showForum: false,
+  forumUrl: '',
+  showProject: false,
+  projectUrl: ''
 })
 const themeRadio = ref('')
 const customColor = ref('')
@@ -201,6 +289,7 @@ const onChange = (file: any, fileList: UploadFiles, attr: string) => {
       themeForm.value[attr] = file.raw
     }
   }
+  user.setTheme(themeForm.value)
 }
 
 function changeThemeHandle(val: string) {
@@ -219,11 +308,20 @@ function resetTheme() {
   themeForm.value = cloneDeep(themeInfo.value)
 }
 
-function resetForm() {
-  themeForm.value = {
-    theme: themeForm.value.theme,
-    ...defaultSetting
-  }
+function resetForm(val: string) {
+  themeForm.value =
+    val === 'base'
+      ? {
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultSetting
+        }
+      : {
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultPlatformSetting
+        }
+
   user.setTheme(themeForm.value)
 }
 
@@ -249,11 +347,11 @@ onMounted(() => {
     router.push({ path: `/application` })
   }
   if (themeInfo.value) {
-    themeRadio.value = themeList.some((v) => v === themeInfo.value.theme)
+    themeRadio.value = themeList.some((v) => v.value === themeInfo.value.theme)
       ? themeInfo.value.theme
       : 'custom'
     customColor.value = themeInfo.value.theme
-    themeForm.value = themeInfo.value
+    themeForm.value = cloneDeep(themeInfo.value)
     cloneTheme.value = cloneDeep(themeInfo.value)
   }
 })
@@ -281,5 +379,13 @@ onMounted(() => {
   .theme-preview {
     min-width: 1000px;
   }
+  .theme-platform {
+    background: #ffffff;
+    height: 220px;
+    .theme-platform-header {
+      padding: 10px 20px;
+      background: var(--app-header-bg-color);
+    }
+  }
 }
 </style>