From 59f07d8ac45c1ce50b5da4345c23556450a8d65d Mon Sep 17 00:00:00 2001 From: Soybean Date: Tue, 23 Jul 2024 15:52:01 +0800 Subject: [PATCH 01/10] fix(projects): fix vertical-mix menu selected --- src/layouts/modules/global-menu/modules/vertical-mix-menu.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue b/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue index d0edd2a6..a8106000 100644 --- a/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue +++ b/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue @@ -117,6 +117,7 @@ watch( Date: Sun, 28 Jul 2024 23:00:22 +0800 Subject: [PATCH 02/10] feat(projects): add color fading mode.close #567 (#569) --- .../theme-drawer/modules/dark-mode.vue | 7 +++++++ src/locales/langs/en-us.ts | 1 + src/locales/langs/zh-cn.ts | 1 + src/store/modules/theme/index.ts | 21 +++++++++++++++---- src/store/modules/theme/shared.ts | 20 +++++++----------- src/styles/css/global.css | 4 ---- src/theme/settings.ts | 1 + src/typings/app.d.ts | 3 +++ 8 files changed, 38 insertions(+), 20 deletions(-) diff --git a/src/layouts/modules/theme-drawer/modules/dark-mode.vue b/src/layouts/modules/theme-drawer/modules/dark-mode.vue index f5bcebf4..f66e495e 100644 --- a/src/layouts/modules/theme-drawer/modules/dark-mode.vue +++ b/src/layouts/modules/theme-drawer/modules/dark-mode.vue @@ -25,6 +25,10 @@ function handleGrayscaleChange(value: boolean) { themeStore.setGrayscale(value); } +function handleColourWeaknessChange(value: boolean) { + themeStore.setColourWeakness(value); +} + const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical')); @@ -53,6 +57,9 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo + + + diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index 917f5ad4..26441217 100644 --- a/src/locales/langs/en-us.ts +++ b/src/locales/langs/en-us.ts @@ -65,6 +65,7 @@ const local: App.I18n.Schema = { auto: 'Follow System' }, grayscale: 'Grayscale', + colourWeakness: 'Colour Weakness', layoutMode: { title: 'Layout Mode', vertical: 'Vertical Menu Mode', diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index a19033ae..95f1e665 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -65,6 +65,7 @@ const local: App.I18n.Schema = { auto: '跟随系统' }, grayscale: '灰色模式', + colourWeakness: '色弱模式', layoutMode: { title: '布局模式', vertical: '左侧菜单模式', diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index 0812638d..a1a39a01 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -10,8 +10,8 @@ import { createThemeToken, getNaiveTheme, initThemeSettings, - toggleCssDarkMode, - toggleGrayscaleMode + toggleAuxiliaryColorModes, + toggleCssDarkMode } from './shared'; /** Theme store */ @@ -33,6 +33,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => { /** grayscale mode */ const grayscaleMode = computed(() => settings.value.grayscale); + /** colourWeakness mode */ + const colourWeaknessMode = computed(() => settings.value.colourWeakness); + /** Theme colors */ const themeColors = computed(() => { const { themeColor, otherColor, isInfoFollowPrimary } = settings.value; @@ -79,6 +82,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => { settings.value.grayscale = isGrayscale; } + /** + * Set colourWeakness value + * + * @param isColourWeakness + */ + function setColourWeakness(isColourWeakness: boolean) { + settings.value.colourWeakness = isColourWeakness; + } + /** Toggle theme scheme */ function toggleThemeScheme() { const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto']; @@ -167,9 +179,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => { ); watch( - grayscaleMode, + [grayscaleMode, colourWeaknessMode], val => { - toggleGrayscaleMode(val); + toggleAuxiliaryColorModes(val[0], val[1]); }, { immediate: true } ); @@ -197,6 +209,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => { naiveTheme, settingsJson, setGrayscale, + setColourWeakness, resetStore, setThemeScheme, toggleThemeScheme, diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts index 31d0c7d8..448c6992 100644 --- a/src/store/modules/theme/shared.ts +++ b/src/store/modules/theme/shared.ts @@ -180,20 +180,16 @@ export function toggleCssDarkMode(darkMode = false) { } /** - * Toggle grayscale mode + * Toggle auxiliary color modes * - * @param grayscaleMode Is grayscale mode + * @param grayscaleMode + * @param colourWeakness */ -export function toggleGrayscaleMode(grayscaleMode = false) { - const GRAYSCALE_CLASS = 'grayscale'; - - const { add, remove } = toggleHtmlClass(GRAYSCALE_CLASS); - - if (grayscaleMode) { - add(); - } else { - remove(); - } +export function toggleAuxiliaryColorModes(grayscaleMode = false, colourWeakness = false) { + const htmlElement = document.documentElement; + htmlElement.style.filter = [grayscaleMode ? 'grayscale(100%)' : '', colourWeakness ? 'invert(80%)' : ''] + .filter(Boolean) + .join(' '); } type NaiveColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active'; diff --git a/src/styles/css/global.css b/src/styles/css/global.css index 141d4de0..3121a315 100644 --- a/src/styles/css/global.css +++ b/src/styles/css/global.css @@ -11,7 +11,3 @@ body, html { overflow-x: hidden; } - -html.grayscale { - filter: grayscale(100%); -} diff --git a/src/theme/settings.ts b/src/theme/settings.ts index be92e1e8..74c1c885 100644 --- a/src/theme/settings.ts +++ b/src/theme/settings.ts @@ -2,6 +2,7 @@ export const themeSettings: App.Theme.ThemeSetting = { themeScheme: 'light', grayscale: false, + colourWeakness: false, recommendColor: false, themeColor: '#646cff', otherColor: { diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts index c455caeb..728a2c7f 100644 --- a/src/typings/app.d.ts +++ b/src/typings/app.d.ts @@ -10,6 +10,8 @@ declare namespace App { themeScheme: UnionKey.ThemeScheme; /** grayscale mode */ grayscale: boolean; + /** colour weakness mode */ + colourWeakness: boolean; /** Whether to recommend color */ recommendColor: boolean; /** Theme color */ @@ -332,6 +334,7 @@ declare namespace App { theme: { themeSchema: { title: string } & Record; grayscale: string; + colourWeakness: string; layoutMode: { title: string; reverseHorizontalMix: string } & Record; recommendColor: string; recommendColorDesc: string; From ea8aa6c4e607fdc6a7cd972cb0adab4f964ef132 Mon Sep 17 00:00:00 2001 From: paynezhuang Date: Mon, 29 Jul 2024 23:04:26 +0800 Subject: [PATCH 03/10] feat(projects): add full screen watermark. close#571 (#573) --- src/App.vue | 17 +++++++++++++++++ .../modules/theme-drawer/modules/page-fun.vue | 13 +++++++++++++ src/locales/langs/en-us.ts | 4 ++++ src/locales/langs/zh-cn.ts | 4 ++++ src/theme/settings.ts | 4 ++++ src/typings/app.d.ts | 11 +++++++++++ src/typings/components.d.ts | 1 + 7 files changed, 54 insertions(+) diff --git a/src/App.vue b/src/App.vue index 22353307..35f65f69 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,6 +21,22 @@ const naiveLocale = computed(() => { const naiveDateLocale = computed(() => { return naiveDateLocales[appStore.locale]; }); + +const watermarkProps = computed(() => { + return { + content: themeStore.watermark.text, + cross: true, + fullscreen: true, + fontSize: 16, + lineHeight: 16, + width: 384, + height: 384, + xOffset: 12, + yOffset: 60, + rotate: -15, + zIndex: 9999 + }; +}); diff --git a/src/layouts/modules/theme-drawer/modules/page-fun.vue b/src/layouts/modules/theme-drawer/modules/page-fun.vue index 8f80994f..4595c8a5 100644 --- a/src/layouts/modules/theme-drawer/modules/page-fun.vue +++ b/src/layouts/modules/theme-drawer/modules/page-fun.vue @@ -101,6 +101,19 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra > + + + + + + diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index 26441217..8b331859 100644 --- a/src/locales/langs/en-us.ts +++ b/src/locales/langs/en-us.ts @@ -135,6 +135,10 @@ const local: App.I18n.Schema = { height: 'Footer Height', right: 'Right Footer' }, + watermark: { + visible: 'Watermark Full Screen Visible', + text: 'Watermark Text' + }, themeDrawerTitle: 'Theme Configuration', pageFunTitle: 'Page Function', configOperation: { diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index 95f1e665..630b2910 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -135,6 +135,10 @@ const local: App.I18n.Schema = { height: '底部高度', right: '底部局右' }, + watermark: { + visible: '显示全屏水印', + text: '水印文本' + }, themeDrawerTitle: '主题配置', pageFunTitle: '页面功能', configOperation: { diff --git a/src/theme/settings.ts b/src/theme/settings.ts index 74c1c885..8fa6098e 100644 --- a/src/theme/settings.ts +++ b/src/theme/settings.ts @@ -49,6 +49,10 @@ export const themeSettings: App.Theme.ThemeSetting = { height: 48, right: true }, + watermark: { + visible: false, + text: 'SoybeanAdmin' + }, tokens: { light: { colors: { diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts index 728a2c7f..d1a7f599 100644 --- a/src/typings/app.d.ts +++ b/src/typings/app.d.ts @@ -95,6 +95,13 @@ declare namespace App { /** Whether float the footer to the right when the layout is 'horizontal-mix' */ right: boolean; }; + /** Watermark */ + watermark: { + /** Whether to show the watermark */ + visible: boolean; + /** Watermark text */ + text: string; + }; /** define some theme settings tokens, will transform to css variables */ tokens: { light: ThemeSettingToken; @@ -375,6 +382,10 @@ declare namespace App { height: string; right: string; }; + watermark: { + visible: string; + text: string; + }; themeDrawerTitle: string; pageFunTitle: string; configOperation: { diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts index 1067e4db..1b0ebf02 100644 --- a/src/typings/components.d.ts +++ b/src/typings/components.d.ts @@ -84,6 +84,7 @@ declare module 'vue' { NThing: typeof import('naive-ui')['NThing'] NTooltip: typeof import('naive-ui')['NTooltip'] NTree: typeof import('naive-ui')['NTree'] + NWatermark: typeof import('naive-ui')['NWatermark'] PinToggler: typeof import('./../components/common/pin-toggler.vue')['default'] ReloadButton: typeof import('./../components/common/reload-button.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] From eed617f9eb0f6455a98bda95cc1e319d7be0d1c1 Mon Sep 17 00:00:00 2001 From: Azir <2075125282@qq.com> Date: Tue, 30 Jul 2024 09:31:26 +0800 Subject: [PATCH 04/10] optimize(types): remove useless types. --- src/typings/api.d.ts | 138 ------------------------------------------- 1 file changed, 138 deletions(-) diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts index e581c4a3..bb3d8757 100644 --- a/src/typings/api.d.ts +++ b/src/typings/api.d.ts @@ -81,142 +81,4 @@ declare namespace Api { home: import('@elegant-router/types').LastLevelRouteKey; } } - - /** - * namespace SystemManage - * - * backend api module: "systemManage" - */ - namespace SystemManage { - type CommonSearchParams = Pick; - - /** role */ - type Role = Common.CommonRecord<{ - /** role name */ - roleName: string; - /** role code */ - roleCode: string; - /** role description */ - roleDesc: string; - }>; - - /** role search params */ - type RoleSearchParams = CommonType.RecordNullable< - Pick & CommonSearchParams - >; - - /** role list */ - type RoleList = Common.PaginatingQueryRecord; - - /** all role */ - type AllRole = Pick; - - /** - * user gender - * - * - "1": "male" - * - "2": "female" - */ - type UserGender = '1' | '2'; - - /** user */ - type User = Common.CommonRecord<{ - /** user name */ - userName: string; - /** user gender */ - userGender: UserGender | null; - /** user nick name */ - nickName: string; - /** user phone */ - userPhone: string; - /** user email */ - userEmail: string; - /** user role code collection */ - userRoles: string[]; - }>; - - /** user search params */ - type UserSearchParams = CommonType.RecordNullable< - Pick & - CommonSearchParams - >; - - /** user list */ - type UserList = Common.PaginatingQueryRecord; - - /** - * menu type - * - * - "1": directory - * - "2": menu - */ - type MenuType = '1' | '2'; - - type MenuButton = { - /** - * button code - * - * it can be used to control the button permission - */ - code: string; - /** button description */ - desc: string; - }; - - /** - * icon type - * - * - "1": iconify icon - * - "2": local icon - */ - type IconType = '1' | '2'; - - type MenuPropsOfRoute = Pick< - import('vue-router').RouteMeta, - | 'i18nKey' - | 'keepAlive' - | 'constant' - | 'order' - | 'href' - | 'hideInMenu' - | 'activeMenu' - | 'multiTab' - | 'fixedIndexInTab' - | 'query' - >; - - type Menu = Common.CommonRecord<{ - /** parent menu id */ - parentId: number; - /** menu type */ - menuType: MenuType; - /** menu name */ - menuName: string; - /** route name */ - routeName: string; - /** route path */ - routePath: string; - /** component */ - component?: string; - /** iconify icon name or local icon name */ - icon: string; - /** icon type */ - iconType: IconType; - /** buttons */ - buttons?: MenuButton[] | null; - /** children menu */ - children?: Menu[] | null; - }> & - MenuPropsOfRoute; - - /** menu list */ - type MenuList = Common.PaginatingQueryRecord; - - type MenuTree = { - id: number; - label: string; - pId: number; - children?: MenuTree[]; - }; - } } From f26d0a61ebcabb471a0aba439a313925cd696b4b Mon Sep 17 00:00:00 2001 From: Soybean Date: Tue, 30 Jul 2024 14:41:30 +0800 Subject: [PATCH 05/10] optimize(projects): add type WatermarkProps --- src/App.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.vue b/src/App.vue index 35f65f69..e617af50 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,7 @@