Skip to content

Commit

Permalink
feat: 增加导航拦设置功能
Browse files Browse the repository at this point in the history
  • Loading branch information
@wangdan-fit2cloud
wangdan-fit2cloud committed Sep 2, 2024
1 parent 3e1b6b1 commit dfcb181
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 19 deletions.
27 changes: 21 additions & 6 deletions ui/src/layout/components/top-bar/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions ui/src/stores/modules/user.ts
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions ui/src/utils/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
128 changes: 117 additions & 11 deletions ui/src/views/theme/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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'
Expand All @@ -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)
Expand All @@ -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('')
Expand Down Expand Up @@ -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) {
Expand All @@ -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)
}
Expand All @@ -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)
}
})
Expand Down Expand Up @@ -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>

0 comments on commit dfcb181

Please sign in to comment.