diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs index d531f98a..be5ecd15 100644 --- a/.stylelintrc.cjs +++ b/.stylelintrc.cjs @@ -27,5 +27,8 @@ module.exports = { }, ], 'media-feature-range-notation': 'prefix', + 'color-function-notation': 'legacy', + // 由于使用了Element UI组件库，修改组件样式时会出现`.tj-form-item__label``这种带有下划线的类名，stylelint就会报错。这里使用正则表达式允许选择器中出现短横线和下划线。 + 'selector-class-pattern': '^[a-z][a-zA-Z0-9_-]+$', }, } diff --git a/.vscode/launch.json b/.vscode/launch.json index 04a51fdd..38fbffcb 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -5,9 +5,9 @@ "version": "0.2.0", "configurations": [ { - "type": "msedge", + "type": "chrome", "request": "launch", - "name": "vuejs: edge", + "name": "vuejs: chrome", "preLaunchTask": "vue: start", "url": "http://localhost:9988", "webRoot": "${workspaceFolder}/src" diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 5b637d5d..5abcd3ad 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -7,7 +7,25 @@ "script": "dev", "detail": "vite", "isBackground": true, - "problemMatcher": [] + "problemMatcher": [ + { + "owner": "typescript", + "fileLocation": "relative", + "pattern": { + "regexp": "^([^\\s].*)\\((\\d+|\\,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$", + "file": 1, + "location": 2, + "severity": 3, + "code": 4, + "message": 5 + }, + "background": { + "activeOnStart": true, + "beginsPattern": "mall-chat-web@0.0.0 dev", + "endsPattern": "ready in \\d+ ms" + } + } + ] } ] } diff --git a/src/components/LoginBox/index.vue b/src/components/LoginBox/index.vue index 61f4af79..cc998eae 100644 --- a/src/components/LoginBox/index.vue +++ b/src/components/LoginBox/index.vue @@ -41,7 +41,9 @@ watchEffect(() => {

- + 扫码成功~，点击“登录”继续登录

diff --git a/src/components/LoginBox/styles.scss b/src/components/LoginBox/styles.scss index f4fbe608..7441a66a 100644 --- a/src/components/LoginBox/styles.scss +++ b/src/components/LoginBox/styles.scss @@ -2,12 +2,10 @@ border-radius: 8px !important; } -/* stylelint-disable-next-line selector-class-pattern */ :global(.login-box-modal .el-dialog__header) { padding: 0; } -/* stylelint-disable-next-line selector-class-pattern */ :global(.login-box-modal .el-dialog__headerbtn) { z-index: 5; } @@ -32,7 +30,7 @@ margin-top: 12px; margin-bottom: 16px; font-size: 14px; - color: rgb(0 0 0 / 45%); + color: var(--font-light); } .login-desc { @@ -48,5 +46,5 @@ .login-desc-bold { font-weight: bold; - color: #2aae67; + color: var(--color-wechat); } diff --git a/src/components/RenderMsg.tsx b/src/components/RenderMsg.tsx index 468503be..c66a9f7e 100644 --- a/src/components/RenderMsg.tsx +++ b/src/components/RenderMsg.tsx @@ -20,7 +20,7 @@ export default defineComponent({ result = result?.replace( url, `${sanitize(title as string)}`, ) } diff --git a/src/components/UserSettingBox/index.vue b/src/components/UserSettingBox/index.vue index db74eb77..a370c1c8 100644 --- a/src/components/UserSettingBox/index.vue +++ b/src/components/UserSettingBox/index.vue @@ -109,7 +109,7 @@ const onCancelEditName = async () => { /> 卸下 --> - + diff --git a/src/components/UserSettingBox/styles.scss b/src/components/UserSettingBox/styles.scss index 7c98ffc6..4c822038 100644 --- a/src/components/UserSettingBox/styles.scss +++ b/src/components/UserSettingBox/styles.scss @@ -1,4 +1,3 @@ -/* stylelint-disable selector-class-pattern */ :global(.setting-box-modal) { border-radius: 8px !important; } @@ -39,7 +38,7 @@ z-index: 10; padding: 2px; background-color: var(--avatar-sex-bg-color); - border: 1px solid #fff; + border: 1px solid var(--color-white); border-radius: 50%; --avatar-sex-bg-man: var(--color-primary); @@ -91,7 +90,7 @@ align-items: center; justify-content: center; pointer-events: none; - background-color: rgba($color: #000, $alpha: 20%); + background-color: var(--hover-bg-2); border-radius: 50%; opacity: 0; } @@ -102,7 +101,7 @@ align-items: center; justify-content: center; width: 30%; - background-color: rgba($color: #000, $alpha: 20%); + background-color: var(--hover-bg-2); border-radius: 50%; &:hover { diff --git a/src/styles/base.css b/src/styles/base.css index 05d216e9..10426391 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -1,50 +1,52 @@ /* color palette from */ :root { - --vt-c-white: #fff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - --vt-c-black: #181818; - --vt-c-black-soft: #222; - --vt-c-black-mute: #282828; - --vt-c-indigo: #2c3e50; - --vt-c-divider-light-1: rgb(60 60 60 / 29%); - --vt-c-divider-light-2: rgb(60 60 60 / 12%); - --vt-c-divider-dark-1: rgb(84 84 84 / 65%); - --vt-c-divider-dark-2: rgb(84 84 84 / 48%); - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgb(60 60 60 / 66%); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgb(235 235 235 / 64%); - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - --color-background-black-mute: rgb(255 255 255 / 20%); - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - --section-gap: 160px; --color-primary: #1d90f5; - --color-primary-hover: var(--el-color-primary); - --color-dark-bg: #272a37; - --color-gray-bg: #323644; - --font-white: #fff; + --color-wechat: #2aae67; + --color-online: greenyellow; + --color-white: #fff; + --color-gold: #c59512; + --color-light-1: #bebebe; + --color-light-2: #dedfe0; + --color-light-3: #e9e9eb; + --color-light-4: #f5f5f5; + + /* font */ + --font-main: #fff; --font-base: #333; --font-gray: #666; --font-light: #999; + --font-light-1: #eee; + --font-pink: #fe2c55; + + /* 背景色 */ + --background-indigo: #2c3e50; + --background-wrapper: #272a37; + --background-secondary: #323644; + --background-black-half: rgba(0, 0, 0, 50%); + --background-dark: rgba(39, 42, 55, 40%); + --background-mask: rgba(255, 255, 255, 20%); + --background-1: #2b2d31; + --background-2: #383c4b; + --background-3: #424656; + --background-4: #efe2bb; + + /* hover */ + --hover-primary: #2287e1; + --hover-bg-1: #484d5f; + --hover-bg-2: rgba(0, 0, 0, 20%); + + /* border */ + --border-base: var(--color-background-1); + --border-pink: #b52c47; } -@media (prefers-color-scheme: dark) { +/* @media (prefers-color-scheme: dark) { :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); + --background-wrapper: var(--color-light-4); + --background-secondary: var(--color-light-3); + --font-main: var(--font-base); } -} +} */ *, *::before, @@ -62,7 +64,6 @@ body { Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 15px; line-height: 1.5; - color: var(--color-text); background: var(--color-background); transition: color 0.5s, background-color 0.5s; text-rendering: optimizelegibility; @@ -72,7 +73,7 @@ body { a:link, a:visited { - color: #fff; + color: var(--color-white); text-decoration: none; cursor: pointer; transition: color 0.3s ease; diff --git a/src/styles/main.css b/src/styles/main.css index 881df16d..d85f5448 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -2,16 +2,12 @@ #app { min-height: 100vh; - - /* margin: 0 auto; */ font-weight: normal; } /* width */ ::-webkit-scrollbar { width: 4px; - - /* background-color: transparent; */ } /* Track */ @@ -21,23 +17,15 @@ /* Handle */ ::-webkit-scrollbar-thumb { - background: #666; + background-color: var(--font-gray); border-radius: 2px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { - background: #555; + background: var(--hover-bg-1); } -/* -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} */ - [hidden] { display: none !important; } diff --git a/src/views/Home/components/ChatBox/index.vue b/src/views/Home/components/ChatBox/index.vue index 7a30df4e..fc75de3d 100644 --- a/src/views/Home/components/ChatBox/index.vue +++ b/src/views/Home/components/ChatBox/index.vue @@ -94,7 +94,7 @@ const insertText = (emoji: string) => {