Skip to content

Commit 65a65de

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
feat: theme
1 parent 190d258 commit 65a65de

File tree

12 files changed

+56
-56
lines changed

12 files changed

+56
-56
lines changed

‎ui/src/layout/layout-template/MainLayout.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="app-layout">
3-
<div class="app-header">
3+
<div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''">
44
<SystemHeader v-if="isShared"></SystemHeader>
55
<UserHeader v-else />
66
</div>
@@ -27,7 +27,10 @@ const route = useRoute()
2727
const isShared = computed(() => {
2828
return route.path.endsWith('hared') || route.name.includes('ResourceManagement')
2929
})
30-
const { user } = useStore()
30+
const { theme } = useStore()
31+
const isDefaultTheme = computed(() => {
32+
return theme.isDefaultTheme()
33+
})
3134
</script>
3235
<style lang="scss" scoped>
3336
@use './index.scss';

‎ui/src/layout/layout-template/SimpleLayout.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<script setup lang="ts">
2+
import { computed } from 'vue'
23
import UserHeader from '@/layout/layout-header/UserHeader.vue'
34
import AppMain from '@/layout/app-main/index.vue'
5+
import useStore from '@/stores'
6+
const { theme } = useStore()
7+
const isDefaultTheme = computed(() => {
8+
return theme.isDefaultTheme()
9+
})
410
</script>
511

612
<template>
713
<div class="app-layout">
8-
<div class="app-header">
14+
<div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''">
915
<UserHeader />
1016
</div>
1117
<div class="app-main">

‎ui/src/layout/layout-template/SystemMainLayout.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="app-layout">
3-
<div class="app-header">
3+
<div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''">
44
<SystemHeader />
55
</div>
66
<div class="app-main">
@@ -14,11 +14,15 @@
1414
</div>
1515
</template>
1616
<script setup lang="ts">
17+
import { computed } from 'vue'
1718
import SystemHeader from '@/layout/layout-header/SystemHeader.vue'
1819
import Sidebar from '@/layout/components/sidebar/index.vue'
1920
import AppMain from '@/layout/app-main/index.vue'
2021
import useStore from '@/stores'
21-
const { user } = useStore()
22+
const { theme } = useStore()
23+
const isDefaultTheme = computed(() => {
24+
return theme.isDefaultTheme()
25+
})
2226
</script>
2327
<style lang="scss" scoped>
2428
@use './index.scss';

‎ui/src/stores/modules/theme.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@ const useThemeStore = defineStore('theme', {
2424
this.themeInfo = cloneDeep(data)
2525
},
2626

27-
// async theme(loading?: Ref<boolean>) {
28-
// return await ThemeApi.getThemeInfo(loading).then((ok) => {
29-
// this.setTheme(ok.data)
30-
// // window.document.title = this.themeInfo['title'] || 'MaxKB'
31-
// // const link = document.querySelector('link[rel="icon"]') as any
32-
// // if (link) {
33-
// // link['href'] = this.themeInfo['icon'] || '/favicon.ico'
34-
// // }
35-
// })
36-
// },
27+
async theme(loading?: Ref<boolean>) {
28+
return await ThemeApi.getThemeInfo(loading).then((ok) => {
29+
this.setTheme(ok.data)
30+
// window.document.title = this.themeInfo['title'] || 'MaxKB'
31+
// const link = document.querySelector('link[rel="icon"]') as any
32+
// if (link) {
33+
// link['href'] = this.themeInfo['icon'] || '/favicon.ico'
34+
// }
35+
})
36+
},
3737
},
3838
})
3939

‎ui/src/stores/modules/user.ts

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export interface userStateTypes {
2020
version?: string
2121
license_is_valid: boolean
2222
edition: 'CE' | 'PE' | 'EE'
23-
themeInfo: any
2423
workspace_id: string
2524
workspace_list: Array<any>
2625
}
@@ -32,7 +31,6 @@ const useUserStore = defineStore('user', {
3231
version: '',
3332
license_is_valid: false,
3433
edition: 'CE',
35-
themeInfo: null,
3634
workspace_id: '',
3735
workspace_list: [],
3836
}),
@@ -42,14 +40,7 @@ const useUserStore = defineStore('user', {
4240
? localStorage.getItem('MaxKB-locale') || getBrowserLang()
4341
: sessionStorage.getItem('language') || getBrowserLang()
4442
},
45-
isDefaultTheme() {
46-
return !this.themeInfo?.theme || this.themeInfo?.theme === '#3370FF'
47-
},
48-
setTheme(data: any) {
49-
const { changeTheme } = useElementPlusTheme(this.themeInfo?.theme)
50-
changeTheme(data?.['theme'])
51-
this.themeInfo = cloneDeep(data)
52-
},
43+
5344
setWorkspaceId(workspace_id: string) {
5445
this.workspace_id = workspace_id
5546
localStorage.setItem('workspace_id', workspace_id)
@@ -114,16 +105,7 @@ const useUserStore = defineStore('user', {
114105
const login = useLoginStore()
115106
login.userAccessToken = token || ''
116107
},
117-
async theme(loading?: Ref<boolean>) {
118-
return await ThemeApi.getThemeInfo(loading).then((ok) => {
119-
this.setTheme(ok.data)
120-
// window.document.title = this.themeInfo['title'] || 'MaxKB'
121-
// const link = document.querySelector('link[rel="icon"]') as any
122-
// if (link) {
123-
// link['href'] = this.themeInfo['icon'] || '/favicon.ico'
124-
// }
125-
})
126-
},
108+
127109
async profile(loading?: Ref<boolean>) {
128110
return UserApi.getUserProfile(loading).then((ok) => {
129111
this.userInfo = ok.data
@@ -151,11 +133,11 @@ const useUserStore = defineStore('user', {
151133
// this.version = ok.data?.version || '-'
152134
this.license_is_valid = ok.data.license_is_valid
153135
this.edition = ok.data.edition
154-
136+
const theme = useThemeStore()
155137
if (this.isEE() || this.isPE()) {
156-
await this.theme()
138+
await theme.theme()
157139
} else {
158-
this.themeInfo = {
140+
theme.themeInfo = {
159141
...defaultPlatformSetting,
160142
}
161143
}

‎ui/src/styles/app.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,3 +485,8 @@ h5 {
485485
height: var(--app-main-height);
486486
box-sizing: border-box;
487487
}
488+
489+
// 自定义主题
490+
.custom-header {
491+
background: var(--el-color-primary-light-9) !important;
492+
}

‎ui/src/views/application-workflow/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,12 +143,12 @@ import { WorkFlowInstance } from '@/workflow/common/validate'
143143
import { hasPermission } from '@/utils/permission'
144144
import { t } from '@/locales'
145145
146-
const { user, application } = useStore()
146+
const { theme, application } = useStore()
147147
const router = useRouter()
148148
const route = useRoute()
149149
150150
const isDefaultTheme = computed(() => {
151-
return user.isDefaultTheme()
151+
return theme.isDefaultTheme()
152152
})
153153
const {
154154
params: { id },

‎ui/src/views/chat/base/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ import { ref, computed } from 'vue'
4343
import { isAppIcon } from '@/utils/common'
4444
import useStore from '@/stores'
4545
46-
const { user } = useStore()
46+
const { theme } = useStore()
4747
4848
const isDefaultTheme = computed(() => {
49-
return user.isDefaultTheme()
49+
return theme.isDefaultTheme()
5050
})
5151
5252
const loading = ref(false)

‎ui/src/views/chat/user-login/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
<span
106106
:style="{
107107
'font-size': item === 'OAUTH2' ? '8px' : '10px',
108-
color: user.themeInfo?.theme,
108+
color: theme.themeInfo?.theme,
109109
}"
110110
>{{ item }}</span
111111
>

‎ui/src/views/login/ForgotPassword.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<login-layout v-if="!loading" v-loading="loading || sendLoading">
33
<LoginContainer
44
:subTitle="
5-
user.themeInfo?.slogan ? user.themeInfo?.slogan : $t('views.system.theme.defaultSlogan')
5+
theme.themeInfo?.slogan ? theme.themeInfo?.slogan : $t('views.system.theme.defaultSlogan')
66
"
77
>
88
<h2 class="mb-24">{{ $t('views.login.forgotPassword') }}</h2>
@@ -81,7 +81,7 @@ import { t } from '@/locales'
8181
import useStore from '@/stores'
8282
8383
const router = useRouter()
84-
const { user } = useStore()
84+
const { theme } = useStore()
8585
8686
const CheckEmailForm = ref<CheckCodeRequest>({
8787
email: '',

‎ui/src/views/login/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
<span
9797
:style="{
9898
'font-size': item === 'OAUTH2' ? '8px' : '10px',
99-
color: user.themeInfo?.theme,
99+
color: theme.themeInfo?.theme,
100100
}"
101101
>{{ item }}</span
102102
>

‎ui/src/views/theme/index.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -263,16 +263,16 @@ import { MsgSuccess, MsgError } from '@/utils/message'
263263
import useStore from '@/stores'
264264
import { t } from '@/locales'
265265
266-
const { user } = useStore()
266+
const { theme } = useStore()
267267
const router = useRouter()
268268
269269
onBeforeRouteLeave((to, from) => {
270-
user.setTheme(cloneTheme.value)
270+
theme.setTheme(cloneTheme.value)
271271
})
272272
273-
const themeInfo = computed(() => user.themeInfo)
273+
const themeInfo = computed(() => theme.themeInfo)
274274
const isDefaultTheme = computed(() => {
275-
return user.isDefaultTheme()
275+
return theme.isDefaultTheme()
276276
})
277277
278278
const themeFormRef = ref<FormInstance>()
@@ -308,23 +308,23 @@ const onChange = (file: any, fileList: UploadFiles, attr: string) => {
308308
} else {
309309
themeForm.value[attr] = file.raw
310310
}
311-
user.setTheme(themeForm.value)
311+
theme.setTheme(themeForm.value)
312312
}
313313
314314
function changeThemeHandle(val: string) {
315315
if (val !== 'custom') {
316316
themeForm.value.theme = val
317-
user.setTheme(themeForm.value)
317+
theme.setTheme(themeForm.value)
318318
}
319319
}
320320
321321
function customColorHandle(val: string) {
322322
themeForm.value.theme = val
323-
user.setTheme(themeForm.value)
323+
theme.setTheme(themeForm.value)
324324
}
325325
326326
function resetTheme() {
327-
user.setTheme(cloneTheme.value)
327+
theme.setTheme(cloneTheme.value)
328328
themeForm.value = cloneDeep(themeInfo.value)
329329
}
330330
@@ -342,7 +342,7 @@ function resetForm(val: string) {
342342
...defaultPlatformSetting,
343343
}
344344
345-
user.setTheme(themeForm.value)
345+
theme.setTheme(themeForm.value)
346346
}
347347
348348
const updateTheme = async (formEl: FormInstance | undefined, test?: string) => {
@@ -354,7 +354,7 @@ const updateTheme = async (formEl: FormInstance | undefined, test?: string) => {
354354
fd.append(item, themeForm.value[item])
355355
})
356356
ThemeApi.postThemeInfo(fd, loading).then((res) => {
357-
user.theme()
357+
theme.theme()
358358
cloneTheme.value = cloneDeep(themeForm.value)
359359
MsgSuccess(t('views.system.theme.saveSuccess'))
360360
})

0 commit comments

Comments
 (0)