feat: 收拢css变量

fix: 修复 F5 debug 报错.

.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_-]+$',
   },
 }

.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"

.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": "[email protected] dev",
+            "endsPattern": "ready in \\d+ ms"
+          }
+        }
+      ]
     }
   ]
 }

src/components/LoginBox/index.vue

@@ -41,7 +41,9 @@ watchEffect(() => {
       </div>
 
       <p class="login-desc" v-if="loginStatus === LoginStatus.Waiting">
-        <ElIcon :size="32" class="login-desc-icon" color="#67c23a"><IEpSuccessFilled /></ElIcon>
+        <ElIcon :size="32" class="login-desc-icon" color="var(--color-wechat)"
+          ><IEpSuccessFilled
+        /></ElIcon>
         扫码成功~，点击“登录”继续登录
       </p>
       <p class="login-desc" v-if="loginStatus === LoginStatus.Init">

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);
 }

src/components/RenderMsg.tsx

@@ -20,7 +20,7 @@ export default defineComponent({
         result = result?.replace(
           url,
           `<a rel="noopener noreferrer nofollow" target="_blank" class="msg-content-link" style="color: ${
-            props.isMe ? '#fff' : 'var(--color-primary)'
+            props.isMe ? 'var(--color-white)' : 'var(--color-primary)'
           };" href="${url.includes('http') ? url : `//${url}`}">${sanitize(title as string)}</a>`,
         )
       }

src/components/UserSettingBox/index.vue

@@ -109,7 +109,7 @@ const onCancelEditName = async () => {
         />
         <el-icon
           size="20"
-          color="#fff"
+          color="var(--font-main)"
           class="setting-avatar-sex"
           v-if="userInfo.sex && [SexType.Man, SexType.Female].includes(userInfo.sex)"
           :style="{
@@ -199,7 +199,7 @@ const onCancelEditName = async () => {
               <!-- <el-button size="small" v-if="badge.wearing === IsYet.Yes">卸下</el-button> -->
             </template>
             <el-tooltip effect="dark" :content="badge.describe" placement="top">
-              <el-icon class="badge-item-info" color="#fff"><IEpInfoFilled /></el-icon>
+              <el-icon class="badge-item-info" color="var(--font-main)"><IEpInfoFilled /></el-icon>
             </el-tooltip>
           </div>
         </li>

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 {

src/styles/base.css

@@ -1,50 +1,52 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :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;

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;
 }

src/views/Home/components/ChatBox/index.vue

@@ -94,7 +94,7 @@ const insertText = (emoji: string) => {
   <div class="chat-box">
     <div class="chat-wrapper">
       <template v-if="isSelect">
-        <ElIcon :size="160" color="#999"><IEpChatDotRound /></ElIcon>
+        <ElIcon :size="160" color="var(--font-light)"><IEpChatDotRound /></ElIcon>
       </template>
       <template v-else>
         <div class="chat">

src/views/Home/components/ChatBox/styles.scss

@@ -1,4 +1,3 @@
-/* stylelint-disable selector-class-pattern */
 .chat-box {
   display: flex;
   flex: 1;
@@ -20,7 +19,7 @@
   flex: 1;
   flex-direction: column;
   height: 100%;
-  background-color: var(--color-gray-bg);
+  background-color: var(--background-secondary);
   border-radius: 8px;
 }
 
@@ -39,7 +38,7 @@
     color: var(--font-light);
     word-wrap: break-all;
     white-space: pre-wrap;
-    background-color: #424656;
+    background-color: var(--background-3);
     border-radius: 8px;
   }
 
@@ -57,7 +56,7 @@
     border-radius: 4px;
 
     &:hover {
-      background-color: var(--color-gray-bg);
+      background-color: var(--background-secondary);
     }
   }
 
@@ -95,16 +94,16 @@
       width: 100%;
       padding: 10px;
       font-size: 14px;
-      color: #fff;
+      color: var(--font-main);
       resize: none;
-      background-color: #424656;
+      background-color: var(--background-3);
       border: none;
       border-radius: 16px;
       box-shadow: none;
       transition: 0.2s;
 
       &:focus {
-        outline: 2px solid #2287e1;
+        outline: 2px solid var(--hover-primary);
       }
     }
   }
@@ -120,16 +119,16 @@
     padding: 0;
     padding-top: 4px;
     font-size: 24px;
-    color: #fff;
+    color: var(--font-main);
     cursor: pointer;
     background-color: var(--color-primary);
     border: 0;
     border-radius: 12px;
-    box-shadow: 0 0 5px 0 #08f;
+    box-shadow: 0 0 5px 0 var(--hover-primary);
     transition: 0.3s;
 
     &:hover {
-      box-shadow: 0 0 10px 0 #08f;
+      box-shadow: 0 0 10px 0 var(--hover-primary);
     }
 
     &:disabled {
@@ -159,7 +158,7 @@
   border-radius: 4px;
 
   &:hover {
-    background-color: #424656;
+    background-color: var(--background-3);
   }
 }