From 134f44e44f6bc249189498089caf9e7b8925a14a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=94=E5=BA=86=E6=89=8D=E4=B8=A8=E9=9D=99=E8=A7=85?= Date: Fri, 5 Apr 2024 02:12:31 +0800 Subject: [PATCH] Add dark mode support (#16) --- ...-18e67d97-6a7d-45c1-9c09-eabcb36e2b20.json | 7 +++ package.json | 1 + src/assets/scss/_common.scss | 12 ++++ src/assets/scss/_element.scss | 12 +--- src/components/application/Status.vue | 1 - src/components/chat/AnsweringMark.vue | 2 +- src/components/chat/InputBox.vue | 13 +++-- src/components/chat/IntroductionItem.vue | 5 +- src/components/chat/Message.vue | 2 +- src/components/chat/ModelSelector.vue | 17 +++--- src/components/chat/SidePanel.vue | 11 ++-- src/components/chatdoc/AnsweringMark.vue | 2 +- src/components/chatdoc/Conversations.vue | 11 ++-- src/components/chatdoc/CreateRepository.vue | 2 +- src/components/chatdoc/InputBox.vue | 11 ++-- src/components/chatdoc/Message.vue | 2 +- src/components/common/Chevron.vue | 4 +- src/components/common/DarkSelector.vue | 57 +++++++++++++++++++ src/components/common/HelpEntry.vue | 29 ---------- src/components/common/HelpEntry2.vue | 45 --------------- src/components/common/Logo.vue | 25 ++++++++ src/components/common/Navigator.vue | 19 ++++++- src/components/console/SidePanel.vue | 4 +- .../midjourney/ElementsSelector.vue | 2 +- src/components/midjourney/ModeSelector.vue | 10 ++-- src/components/midjourney/PresetPanel.vue | 1 - .../midjourney/preset/ModelSelector.vue | 2 +- .../midjourney/preset/RatioSelector.vue | 4 +- .../midjourney/tasks/TaskBriefList.vue | 2 +- src/i18n/index.ts | 22 +++++++ src/models/auth.ts | 1 + src/pages/chatdoc/Index.vue | 9 +-- src/pages/chatdoc/Manage.vue | 2 +- src/pages/console/application/Buy.vue | 4 +- src/pages/console/application/List.vue | 4 +- src/pages/console/order/Detail.vue | 6 +- src/pages/console/order/List.vue | 4 +- src/pages/distribution/History.vue | 4 +- src/pages/distribution/Index.vue | 10 ++-- src/pages/distribution/Invitees.vue | 4 +- src/store/common/actions.ts | 5 ++ src/store/common/getters.ts | 5 ++ src/store/common/models.ts | 3 +- src/store/common/mutations.ts | 5 ++ src/store/common/state.ts | 5 ++ yarn.lock | 5 ++ 46 files changed, 247 insertions(+), 166 deletions(-) create mode 100644 change/@acedatacloud-hub-18e67d97-6a7d-45c1-9c09-eabcb36e2b20.json create mode 100644 src/components/common/DarkSelector.vue delete mode 100644 src/components/common/HelpEntry.vue delete mode 100644 src/components/common/HelpEntry2.vue create mode 100644 src/components/common/Logo.vue diff --git a/change/@acedatacloud-hub-18e67d97-6a7d-45c1-9c09-eabcb36e2b20.json b/change/@acedatacloud-hub-18e67d97-6a7d-45c1-9c09-eabcb36e2b20.json new file mode 100644 index 00000000..a9937d45 --- /dev/null +++ b/change/@acedatacloud-hub-18e67d97-6a7d-45c1-9c09-eabcb36e2b20.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "add dark mode support", + "packageName": "@acedatacloud/hub", + "email": "cqc@cuiqingcai.com", + "dependentChangeType": "patch" +} diff --git a/package.json b/package.json index 8b6287e5..8566ac2b 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "uuid": "^8.3.2", "vue": "^3.2.6", "vue-codemirror": "^6.1.1", + "vue-dark-switch": "^1.0.6", "vue-i18n": "^9.1.7", "vue-qrcode": "^2.2.0", "vue-router": "^4.0.11", diff --git a/src/assets/scss/_common.scss b/src/assets/scss/_common.scss index 04138312..93b430a7 100644 --- a/src/assets/scss/_common.scss +++ b/src/assets/scss/_common.scss @@ -7,6 +7,18 @@ body { overflow: hidden; } +html, +html.dark, +:root { + --el-color-primary: #277186; + --el-color-primary-light-3: #689caa; + --el-color-primary-light-5: #93b8c3; + --el-color-primary-light-7: #bed4db; + --el-color-primary-light-8: #d4e3e7; + --el-color-primary-light-9: #e9f1f3; + --el-color-primary-dark-2: #1f5a6b; +} + * { box-sizing: border-box; } diff --git a/src/assets/scss/_element.scss b/src/assets/scss/_element.scss index cd4198da..2a4cb6a8 100644 --- a/src/assets/scss/_element.scss +++ b/src/assets/scss/_element.scss @@ -1,14 +1,4 @@ -@forward 'element-plus/theme-chalk/src/common/var.scss' with ( - $colors: ( - 'primary': ( - 'base': #277186 - ), - 'danger': ( - 'base': #ec4450 - ) - ) -); - $--font-path: 'element-plus/theme-chalk/src/fonts'; @import 'element-plus/theme-chalk/src/index.scss'; +@import 'element-plus/theme-chalk/dark/css-vars.css'; diff --git a/src/components/application/Status.vue b/src/components/application/Status.vue index 61fd4eda..2193f22a 100644 --- a/src/components/application/Status.vue +++ b/src/components/application/Status.vue @@ -144,7 +144,6 @@ export default defineComponent({ .info { font-size: 14px; color: var(--el-text-color-regular); - // display: inline-block; text-align: center; } .actions { diff --git a/src/components/chat/AnsweringMark.vue b/src/components/chat/AnsweringMark.vue index 7392da8f..0a5165d2 100644 --- a/src/components/chat/AnsweringMark.vue +++ b/src/components/chat/AnsweringMark.vue @@ -34,7 +34,7 @@ export default defineComponent({ width: 2px; height: 16px; margin-top: 3px; - background-color: var(--el-color-black); + background-color: var(--el-text-color-primary); animation: blink 1s infinite; } diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue index af2dcd13..cac02779 100644 --- a/src/components/chat/InputBox.vue +++ b/src/components/chat/InputBox.vue @@ -34,7 +34,6 @@ .input-box { width: 100%; - border: 1px solid #eee; + border: 1px solid var(--el-border-color); border-radius: 10px; background: none; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); @@ -175,7 +176,7 @@ export default defineComponent({ .btn-upload { cursor: not-allowed; .icon-attachment { - color: #eee; + color: var(--el-text-color-disabled); } } } @@ -195,20 +196,20 @@ export default defineComponent({ left: 10px; .icon-attachment { font-size: 14px; - color: #666; + color: var(--el-text-color-primary); } } &.btn-send { right: 15px; &.disabled { .icon-send { - color: #eee; + color: var(--el-text-color-disabled); } cursor: not-allowed; } .icon-send { font-size: 16px; - color: #666; + color: var(--el-text-color-primary); } } } diff --git a/src/components/chat/IntroductionItem.vue b/src/components/chat/IntroductionItem.vue index cd423c8f..07eeb6b7 100644 --- a/src/components/chat/IntroductionItem.vue +++ b/src/components/chat/IntroductionItem.vue @@ -25,8 +25,9 @@ export default defineComponent({ diff --git a/src/components/chatdoc/Conversations.vue b/src/components/chatdoc/Conversations.vue index 5947e229..b7fddd6e 100644 --- a/src/components/chatdoc/Conversations.vue +++ b/src/components/chatdoc/Conversations.vue @@ -143,7 +143,7 @@ export default defineComponent({ padding: 15px; width: 300px; height: 100%; - border-right: 1px solid #eee; + border-right: 1px solid var(--el-border-color); overflow-y: scroll; .conversations { @@ -158,15 +158,15 @@ export default defineComponent({ flex-direction: row; padding: 10px; margin-bottom: 5px; - border: 1px dashed hsl(0, 0%, 93%); + border: 1px dashed var(--el-border-color); line-height: 30px; border-radius: 10px; - color: #666; + color: var(--el-text-color-primary); cursor: pointer; &.active, &:hover { - background-color: #eee; + background-color: var(--el-fill-color-extra-light); } .icons { @@ -183,10 +183,11 @@ export default defineComponent({ overflow: hidden; text-overflow: ellipsis; padding-right: 8px; - color: #666; + color: var(--el-text-color-primary); } .operations { width: 40px; + color: var(--el-text-color-regular); .icon { cursor: pointer; font-size: 14px; diff --git a/src/components/chatdoc/CreateRepository.vue b/src/components/chatdoc/CreateRepository.vue index 4df62901..d9a9bbcf 100644 --- a/src/components/chatdoc/CreateRepository.vue +++ b/src/components/chatdoc/CreateRepository.vue @@ -88,7 +88,7 @@ export default defineComponent({ height: 50px; border-radius: 50%; margin-top: 5px; - background-color: #eee; + background-color: var(--el-bg-color-page); margin-bottom: 0; } diff --git a/src/components/chatdoc/InputBox.vue b/src/components/chatdoc/InputBox.vue index 05fa0570..28ea9c37 100644 --- a/src/components/chatdoc/InputBox.vue +++ b/src/components/chatdoc/InputBox.vue @@ -12,7 +12,6 @@ diff --git a/src/components/common/DarkSelector.vue b/src/components/common/DarkSelector.vue new file mode 100644 index 00000000..c9261deb --- /dev/null +++ b/src/components/common/DarkSelector.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/src/components/common/HelpEntry.vue b/src/components/common/HelpEntry.vue deleted file mode 100644 index 8883d198..00000000 --- a/src/components/common/HelpEntry.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/src/components/common/HelpEntry2.vue b/src/components/common/HelpEntry2.vue deleted file mode 100644 index a6a73df7..00000000 --- a/src/components/common/HelpEntry2.vue +++ /dev/null @@ -1,45 +0,0 @@ - - - - - diff --git a/src/components/common/Logo.vue b/src/components/common/Logo.vue new file mode 100644 index 00000000..4bc2c38a --- /dev/null +++ b/src/components/common/Logo.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue index 337d22c9..7c202bae 100644 --- a/src/components/common/Navigator.vue +++ b/src/components/common/Navigator.vue @@ -4,7 +4,8 @@
- + +
.channel-selector { - background-color: #ececf1; + background-color: var(--el-bg-color-page); padding: 7px 6px; border-radius: 15px; margin-bottom: 5px; @@ -57,17 +57,15 @@ export default defineComponent({ margin-right: auto; .button { padding: 20px 30px; - color: black; + color: var(--el-text-color-primary); border: none; border-radius: 10px; margin: 0 3px; background-color: inherit; &:hover, - &:focus { - background-color: inherit; - } + &:focus, &.active { - background-color: white; + background-color: var(--el-fill-color-extra-light); } .icon { display: inline-block; diff --git a/src/components/midjourney/PresetPanel.vue b/src/components/midjourney/PresetPanel.vue index bd5c286f..f5e1335f 100644 --- a/src/components/midjourney/PresetPanel.vue +++ b/src/components/midjourney/PresetPanel.vue @@ -56,7 +56,6 @@ export default defineComponent({ border-right: 1px solid var(--el-border-color); height: 100%; padding: 10px; - background-color: var(--el-bg-color); .block { margin-bottom: 15px; } diff --git a/src/components/midjourney/preset/ModelSelector.vue b/src/components/midjourney/preset/ModelSelector.vue index 16805396..386fd2f0 100644 --- a/src/components/midjourney/preset/ModelSelector.vue +++ b/src/components/midjourney/preset/ModelSelector.vue @@ -81,7 +81,7 @@ export default defineComponent({ .item { width: 115px; height: 60px; - border: 2px solid #eee; + border: 2px solid var(--el-border-color); display: flex; flex-direction: column; align-items: center; diff --git a/src/components/midjourney/preset/RatioSelector.vue b/src/components/midjourney/preset/RatioSelector.vue index a7e5ca02..7b0e0f1f 100644 --- a/src/components/midjourney/preset/RatioSelector.vue +++ b/src/components/midjourney/preset/RatioSelector.vue @@ -101,7 +101,7 @@ export default defineComponent({ .item { width: 40px; height: 60px; - border: 2px solid #eee; + border: 2px solid var(--el-border-color); display: flex; flex-direction: column; align-items: center; @@ -118,7 +118,7 @@ export default defineComponent({ justify-content: center; .rect { - border: 2px solid #eee; + border: 2px solid var(--el-border-color); width: 20px; height: 20px; border-radius: 2px; diff --git a/src/components/midjourney/tasks/TaskBriefList.vue b/src/components/midjourney/tasks/TaskBriefList.vue index 837600a9..acb397af 100644 --- a/src/components/midjourney/tasks/TaskBriefList.vue +++ b/src/components/midjourney/tasks/TaskBriefList.vue @@ -85,7 +85,7 @@ export default defineComponent({ diff --git a/src/pages/distribution/Invitees.vue b/src/pages/distribution/Invitees.vue index 99712b40..ede1a554 100644 --- a/src/pages/distribution/Invitees.vue +++ b/src/pages/distribution/Invitees.vue @@ -139,7 +139,7 @@ export default defineComponent({ font-size: 26px; font-weight: bold; margin-bottom: 20px; - color: #333; + color: var(--el-text-color-primary); } .el-table { @@ -150,7 +150,7 @@ export default defineComponent({ .panel { padding: 30px; width: calc(100% - 300px); - background-color: #f3f5f6; + background-color: var(--el-bg-color-page); height: 100%; overflow-y: scroll; } diff --git a/src/store/common/actions.ts b/src/store/common/actions.ts index f39a5219..24ea37d7 100644 --- a/src/store/common/actions.ts +++ b/src/store/common/actions.ts @@ -25,6 +25,10 @@ export const setToken = ({ commit }: ActionContext, payl commit('setToken', payload); }; +export const setDark = ({ commit }: ActionContext, payload: boolean) => { + commit('setDark', payload); +}; + export const setLocale = ({ commit }: ActionContext, payload: string) => { commit('setLocale', payload); }; @@ -63,6 +67,7 @@ export default { resetUser, resetSetting, setToken, + setDark, setUser, getToken, getUser diff --git a/src/store/common/getters.ts b/src/store/common/getters.ts index 26c6d4b7..a3159410 100644 --- a/src/store/common/getters.ts +++ b/src/store/common/getters.ts @@ -8,6 +8,10 @@ export const user = (state: IRootState): any => { return state.user; }; +export const dark = (state: IRootState): boolean => { + return state.dark; +}; + export const locale = (state: IRootState): string => { return state.locale; }; @@ -25,5 +29,6 @@ export default { authenticated, user, token, + dark, setting }; diff --git a/src/store/common/models.ts b/src/store/common/models.ts index 8bcdf5bc..2da099f7 100644 --- a/src/store/common/models.ts +++ b/src/store/common/models.ts @@ -9,9 +9,10 @@ export interface ISetting { export interface ICommonState { token: IToken; - user: IUser; + user?: IUser; setting?: ISetting; locale: string; + dark: boolean; } export interface IRootState extends ICommonState { diff --git a/src/store/common/mutations.ts b/src/store/common/mutations.ts index a2b05c80..ff496248 100644 --- a/src/store/common/mutations.ts +++ b/src/store/common/mutations.ts @@ -12,6 +12,10 @@ export const setLocale = (state: IRootState, payload: string): void => { state.locale = payload; }; +export const setDark = (state: IRootState, payload: boolean): void => { + state.dark = payload; +}; + export const setToken = (state: IRootState, payload: any): void => { state.token = { ...state.token, @@ -43,6 +47,7 @@ export default { setUser, resetUser, setToken, + setDark, resetToken, setSetting, resetSetting diff --git a/src/store/common/state.ts b/src/store/common/state.ts index 87444a04..a82dd89f 100644 --- a/src/store/common/state.ts +++ b/src/store/common/state.ts @@ -1,10 +1,14 @@ import { IRootState } from './models'; import chatState from '../chat/state'; import midjourneyState from '../midjourney/state'; +import chatdocState from '../chatdoc/state'; +import { getLocale } from '@/i18n'; export default (): IRootState => { return { user: {}, + locale: getLocale(), + dark: window.matchMedia('(prefers-color-scheme: dark)').matches, token: { access: undefined, refresh: undefined, @@ -14,6 +18,7 @@ export default (): IRootState => { // if PC, set default to true, else false navigationCollapsed: window.innerWidth < 768 }, + chatdoc: chatdocState(), chat: chatState(), midjourney: midjourneyState() }; diff --git a/yarn.lock b/yarn.lock index a7e68df2..ddf6a451 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4333,6 +4333,11 @@ vue-codemirror@^6.1.1: "@codemirror/state" "6.x" "@codemirror/view" "6.x" +vue-dark-switch@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/vue-dark-switch/-/vue-dark-switch-1.0.6.tgz#1b64a0f42618a1efb1332dddef2e91ccf5c5cd0d" + integrity sha512-M8P2pdoEfO98Zgj3OMDjOgSKTU961oqZoOUidzaP61JzfqVbsEa7KUvQ1pNVx7oeNNXJiYMN147eYxb2oZzPKw== + vue-demi@*: version "0.12.1" resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz"