feat: 🚀 新增stylelint对scss样式的规范处理，新增提交的emoji图标处理。

.commitlintrc.cjs

@@ -1,5 +1,14 @@
 // .commitlintrc.js
 /** @type {import('cz-git').UserConfig} */
+const fs = require("fs");
+const path = require("path");
+
+
+const scopes = fs
+  .readdirSync(path.resolve(__dirname, "src"), { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .map(dirent => dirent.name.replace(/s$/, ""));
+
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
@@ -27,48 +36,24 @@ module.exports = {
       confirmCommit: '是否提交或修改commit ? | Are you sure you want to proceed with the commit above?'
     },
     types: [
-      { value: 'feat', name: 'feat:     新增功能 | A new feature' },
+      { value: 'feat', name: 'feat:     🚀  新增功能 | A new feature', emoji: "🚀" },
-      { value: 'fix', name: 'fix:      修复缺陷 | A bug fix' },
+      { value: 'fix', name: 'fix:      🧩  修复缺陷 | A bug fix', emoji: "🧩"  },
-      {
+      { value: 'docs', name: 'docs:     📚  文档更新 | Documentation only changes', emoji: "📚" },
-        value: 'docs',
+      { value: 'style', name: 'style:    🎨  代码格式 | Changes that do not affect the meaning of the code', emoji: "🎨"  },
-        name: 'docs:     文档更新 | Documentation only changes'
+      { value: 'refactor', name: 'refactor: ♻️  代码重构 | A code change that neither fixes a bug nor adds a feature', emoji: "♻️"  },
-      },
+      { value: 'perf', name: 'perf:     ⚡️  性能提升 | A code change that improves performance', emoji: "⚡️"  },
-      {
+      { value: 'test', name: 'test:     ✅  测试相关 | Adding missing tests or correcting existing tests', emoji: "✅"  },
-        value: 'style',
+      { value: 'build', name: 'build:    📦️  构建相关 | Changes that affect the build system or external dependencies', emoji: "📦️"  },
-        name: 'style:    代码格式 | Changes that do not affect the meaning of the code'
+      { value: 'ci', name: 'ci:       🎡  持续集成 | Changes to our CI configuration files and scripts', emoji: "🎡"  },
-      },
+      { value: 'revert', name: 'revert:   ⏪️  回退代码 | Revert to a commit', emoji: "⏪️"  },
-      {
+      { value: 'chore', name: 'chore:    🔨  其他修改 | Other changes that do not modify src or test files', emoji: "🔨" }
-        value: 'refactor',
-        name: 'refactor: 代码重构 | A code change that neither fixes a bug nor adds a feature'
-      },
-      {
-        value: 'perf',
-        name: 'perf:     性能提升 | A code change that improves performance'
-      },
-      {
-        value: 'test',
-        name: 'test:     测试相关 | Adding missing tests or correcting existing tests'
-      },
-      {
-        value: 'build',
-        name: 'build:    构建相关 | Changes that affect the build system or external dependencies'
-      },
-      {
-        value: 'ci',
-        name: 'ci:       持续集成 | Changes to our CI configuration files and scripts'
-      },
-      { value: 'revert', name: 'revert:   回退代码 | Revert to a commit' },
-      {
-        value: 'chore',
-        name: 'chore:    其他修改 | Other changes that do not modify src or test files'
-      }
     ],
-    useEmoji: false,
+    useEmoji: true,
     emojiAlign: 'center',
     useAI: false,
     aiNumber: 1,
     themeColorCode: '',
-    scopes: [],
+    scopes: [...scopes],
     allowCustomScopes: true,
     allowEmptyScopes: true,
     customScopesAlign: 'bottom',

.lintstagedrc

@@ -12,6 +12,11 @@
   "*.vue": [
     "prettier --write",
     "eslint --fix",
+    "stylelint --fix",
+    "git add"
+  ],
+  "*.{scss,less,styl,html}": [
+    "stylelint --fix",
     "git add"
   ]
 }

.stylelintignore

@@ -0,0 +1,4 @@
+/dist/*
+/public/*
+public/*
+stats.html

.stylelintrc.cjs

@@ -0,0 +1,40 @@
+// @see: https://stylelint.io
+
+module.exports = {
+  root: true,
+  // 继承某些已有的规则
+  extends: [
+    "stylelint-config-standard", // 配置 stylelint 拓展插件
+    "stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
+    "stylelint-config-standard-scss", // 配置 stylelint scss 插件
+    "stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化
+    "stylelint-config-recess-order" // 配置 stylelint css 属性书写顺序插件,
+  ],
+  overrides: [
+    // 扫描 .vue/html 文件中的 <style> 标签内的样式
+    {
+      files: ["**/*.{vue,html}"],
+      customSyntax: "postcss-html"
+    }
+  ],
+  rules: {
+    "function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
+    "color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
+    "rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
+    "font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
+    "scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件
+    "property-no-unknown": null, // 禁止未知的属性
+    "no-empty-source": null, // 禁止空源码
+    "selector-class-pattern": null, // 强制选择器类名的格式
+    "value-no-vendor-prefix": null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)
+    "no-descending-specificity": null, // 不允许较低特异性的选择器出现在覆盖较高特异性的选择器
+    "value-keyword-case": null, // 解决在 scss 中使用 v-bind 大写单词报错
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["global", "v-deep", "deep"]
+      }
+    ]
+  },
+  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"]
+};

.vscode/settings.json

@@ -6,7 +6,7 @@
   // 关闭默认格式化
   "editor.formatOnSave": false,
   // 开启 stylint
-  // "stylelint.enable": true,
+  "stylelint.enable": true,
 
   // 保存自动修复
   "editor.codeActionsOnSave": {
@@ -19,7 +19,7 @@
   },
 
   // 开启 stylelint
-  // "stylelint.validate": ["scss", "vue"], // 必须包含"vue"以识别Vue文件中的<style>
+  "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],
 
   // 静默样式规则自动修复
   "eslint.rules.customizations": [

package.json

@@ -1,58 +1,81 @@
 {
-  "name": "demo",
+  "name": "ruoyi-element-ai",
   "type": "module",
   "version": "0.0.0",
   "private": true,
+  "description": "ruoyi-element-ai open-source PC AI template",
+  "author": {
+    "name": "HeJiaYue520",
+    "email": "2834007710@qq.com",
+    "url": "https://github.com/HeJiaYue520/HeJiaYue520"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/element-plus-x/ruoyi-element-ai",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:element-plus-x/ruoyi-element-ai.git"
+  },
+  "bugs": {
+    "url": "https://github.com/element-plus-x/ruoyi-element-ai/issues"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "prepare": "husky",
     "lint": "eslint .",
+    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "fix": "eslint . --fix"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@floating-ui/core": "^1.7.0",
+    "@floating-ui/core": "^1.7.1",
-    "@floating-ui/dom": "^1.7.0",
+    "@floating-ui/dom": "^1.7.1",
     "@floating-ui/vue": "^1.1.6",
     "@jsonlee_12138/enum": "^1.0.4",
-    "@vueuse/core": "^13.2.0",
+    "@vueuse/core": "^13.3.0",
-    "@vueuse/integrations": "^13.2.0",
+    "@vueuse/integrations": "^13.3.0",
-    "element-plus": "^2.9.10",
+    "element-plus": "^2.9.11",
-    "hook-fetch": "1.1.1",
+    "hook-fetch": "1.1.2",
     "nprogress": "^0.2.0",
-    "pinia": "^3.0.2",
+    "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.3.0",
     "qrcode": "^1.5.4",
     "radash": "^12.1.0",
     "reset-css": "^5.0.2",
-    "vue": "^3.5.14",
+    "vue": "^3.5.16",
     "vue-element-plus-x": "1.2.0",
     "vue-router": "4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.13.1",
+    "@antfu/eslint-config": "^4.13.3",
     "@changesets/cli": "^2.29.4",
     "@commitlint/config-conventional": "^19.8.1",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vue/tsconfig": "^0.7.0",
     "commitlint": "^19.8.1",
     "cz-git": "^1.11.1",
-    "eslint": "^9.27.0",
+    "eslint": "^9.28.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.0.0",
+    "lint-staged": "^16.1.0",
     "prettier": "^3.5.3",
-    "sass-embedded": "^1.89.0",
+    "sass-embedded": "^1.89.1",
     "typescript": "~5.8.3",
     "typescript-api-pro": "^0.0.7",
-    "unocss": "66.1.2",
+    "unocss": "66.1.3",
-    "unplugin-auto-import": "^19.2.0",
+    "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.5.0",
+    "unplugin-vue-components": "^28.7.0",
     "vite": "^6.3.5",
     "vite-plugin-env-typed": "^0.0.2",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^2.2.10",
+    "stylelint": "^16.20.0",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recess-order": "^6.0.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
+    "stylelint-config-recommended-vue": "^1.6.0",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-scss": "^15.0.1"
   },
   "config": {
     "commitizen": {

src/components/IconSelect/index.vue

@@ -76,26 +76,22 @@ function selectedIcon(name: string) {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
   }
-
   .icon-item {
-    cursor: pointer;
-    padding: 0px 4px;
-    margin: 3px 0 3px !important;
     width: fit-content !important;
     height: fit-content;
-    text-align: center;
+    padding: 0 4px;
+    margin: 3px 0 !important;
     font-size: 18px;
+    text-align: center;
+    cursor: pointer;
   }
-
   .icon-item:hover {
     box-shadow: 1px 1px 10px 0 #a1a1a1;
   }
-
   .el-tab-pane {
     height: 200px;
     overflow: auto;
   }
-
   .icon_name {
     display: none;
   }
@@ -106,58 +102,48 @@ function selectedIcon(name: string) {
   .icon-body {
     padding: 10px;
   }
-
   .icon_name {
     display: block;
   }
 
   overflow: hidden;
-
   .grid-container {
-    margin-top: 12px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    border-left: 1px solid #eee;
-    border-top: 1px solid #eee;
-    overflow-y: auto;
-    overflow-x: hidden;
     height: 500px;
+    margin-top: 12px;
+    overflow: hidden auto;
+    border-top: 1px solid #eeeeee;
+    border-left: 1px solid #eeeeee;
   }
-
   .icon-item {
+    width: 100% !important;
     padding: 16px 0;
     margin: 0 !important;
-    border-right: 1px solid #eee;
-    border-bottom: 1px solid #eee;
     margin-right: -1px;
     margin-bottom: -1px;
-    width: 100% !important;
     text-align: center;
+    border-right: 1px solid #eeeeee;
+    border-bottom: 1px solid #eeeeee;
   }
-
   span {
     display: block;
-    font-size: 16px;
     margin-top: 4px;
+    font-size: 16px;
   }
-
   .disabled {
     pointer-events: none;
   }
-
   .grid {
-    border-top: 1px solid #eee;
+    border-top: 1px solid #eeeeee;
   }
 }
-
-.icons-container span {
-  font-size: 12px !important;
-  color: #99a9bf;
-}
-
 .icons-container svg {
+  span,
+  svg {
     font-size: 24px !important;
     color: #606266;
+  }
 }
 </style>

src/components/LoginDialog/components/FormLogin/AccountPassword.vue

@@ -103,20 +103,18 @@ async function handleSubmit() {
   flex-direction: column;
   gap: 16px;
 }
-
 .form-group {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
 }
-
 .login-btn {
-  margin-top: 24px;
   padding: 12px;
-  background: #409eff;
+  margin-top: 24px;
   color: white;
+  cursor: pointer;
+  background: #409eff;
   border: none;
   border-radius: 4px;
-  cursor: pointer;
 }
 </style>

src/components/LoginDialog/components/FormLogin/RegistrationForm.vue

@@ -181,20 +181,18 @@ async function getEmailCode() {
   flex-direction: column;
   gap: 16px;
 }
-
 .form-group {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
 }
-
 .login-btn {
-  margin-top: 24px;
   padding: 12px;
-  background: #409eff;
+  margin-top: 24px;
   color: white;
+  cursor: pointer;
+  background: #409eff;
   border: none;
   border-radius: 4px;
-  cursor: pointer;
 }
 </style>

src/components/LoginDialog/components/FormLogin/VerificationCode.vue

@@ -27,20 +27,18 @@
   flex-direction: column;
   gap: 16px;
 }
-
 .form-group {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
 }
-
 .login-btn {
-  margin-top: 24px;
   padding: 12px;
-  background: #409eff;
+  margin-top: 24px;
   color: white;
+  cursor: pointer;
+  background: #409eff;
   border: none;
   border-radius: 4px;
-  cursor: pointer;
 }
 </style>

src/components/LoginDialog/components/QrCodeLogin/index.vue

@@ -179,91 +179,78 @@ onBeforeUnmount(() => {
 .qr-wrapper {
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 8px;
-
+  align-items: center;
   .tip {
     font-size: 16px;
     font-weight: 500;
     color: #303133;
   }
-
   .qr-img-wrapper {
     position: relative;
     width: 180px;
     height: 180px;
-    border-radius: 16px;
-    overflow: hidden;
     padding: 12px;
+    overflow: hidden;
     border: 1px solid #f0f2f5;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+    border-radius: 16px;
-
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 8%);
     .qr-img {
-      width: 100%;
-      height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-
+      width: 100%;
+      height: 100%;
       .el-icon {
         font-size: 18px;
         color: #909399;
       }
     }
-
     .expired-overlay,
     .scanned-overlay {
       position: absolute;
       top: 0;
       left: 0;
-      width: 100%;
-      height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 100%;
+      height: 100%;
       border-radius: 16px;
     }
-
     .expired-overlay {
-      background: hsla(0, 0%, 100%, 0.95);
       cursor: pointer;
-
+      background: hsl(0deg 0% 100% / 95%);
       .expired-content {
         display: flex;
         flex-direction: column;
         gap: 8px;
         text-align: center;
-
         .expired-text {
           font-size: 14px;
           color: #909399;
         }
       }
     }
-
     .scanned-overlay {
-      background: hsla(120, 60%, 97%, 0.95);
       cursor: default;
-
+      background: hsl(120deg 60% 97% / 95%);
       .scanned-content {
         display: flex;
         flex-direction: column;
         gap: 8px;
         align-items: center;
-
         .success-icon {
           font-size: 18px;
           color: #67c23a;
         }
-
         .scanned-text {
           display: flex;
+          gap: 8px;
           align-items: center;
           font-size: 14px;
-          gap: 8px;
           color: #606266;
         }
-
         .countdown-text {
           font-size: 12px;
           color: #909399;

src/components/LoginDialog/index.vue

@@ -113,16 +113,14 @@ function onAfterLeave() {
 /* 动画样式（仅作用于弹框） */
 .dialog-zoom-enter-active,
 .dialog-zoom-leave-active {
-  transition: all 0.3s ease-in-out;
   transform-origin: center;
+  transition: all 0.3s ease-in-out;
 }
-
 .dialog-zoom-enter-from,
 .dialog-zoom-leave-to {
   opacity: 0;
   transform: scale(0.8);
 }
-
 .dialog-zoom-enter-to,
 .dialog-zoom-leave-from {
   opacity: 1;
@@ -134,122 +132,107 @@ function onAfterLeave() {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(3px);
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100vw;
+  height: 100vh;
   overflow: hidden;
   user-select: none;
+  background-color: rgb(0 0 0 / 50%);
   opacity: 1;
+  backdrop-filter: blur(3px);
   transition: opacity 0.3s;
 }
-
 .mask[hidden] {
   opacity: 0;
 }
 
 /* 对话框容器样式 */
 .glass-dialog {
+  z-index: 1000;
   display: flex;
   width: fit-content;
+  max-width: 90%;
   height: var(--login-dialog-height);
+  padding: var(--login-dialog-padding);
+  overflow: hidden;
   background-color: #ffffff;
   border-radius: var(--login-dialog-border-radius);
-  overflow: hidden;
+  box-shadow: 0 4px 24px rgb(0 0 0 / 10%);
-  padding: var(--login-dialog-padding);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  max-width: 90%;
 }
 
 /* 以下样式与原代码一致，未修改 */
 .left-section {
-  width: calc(var(--login-dialog-width) / 2);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: calc(var(--login-dialog-width) / 2);
   padding: var(--login-dialog-section-padding);
-  background: linear-gradient(
+  background: linear-gradient(233deg, rgb(113 161 255 / 60%) 17.67%, rgb(154 219 255 / 60%) 70.4%);
-    233deg,
-    rgba(113, 161, 255, 0.6) 17.67%,
-    rgba(154, 219, 255, 0.6) 70.4%
-  );
 }
-
 .left-section .logo-wrap {
   display: flex;
+  gap: 8px;
   align-items: center;
   justify-content: center;
   margin-top: 24px;
-  gap: 8px;
 }
-
 .left-section .logo-wrap .logo-img {
   width: 40px;
   height: 40px;
-  border-radius: 12px;
   padding: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
-  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
   background: var(--login-dialog-logo-background);
+  border-radius: 12px;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 8%);
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 10%));
 }
-
 .left-section .logo-wrap .logo-text {
   font-size: 16px;
   font-weight: 600;
   color: var(--login-dialog-logo-text-color);
 }
-
 .left-section .ad-banner {
   position: relative;
   width: 100%;
   height: 100%;
 }
-
 .left-section .ad-banner .svg-icon {
   position: absolute;
   width: 100%;
   height: 310px;
 }
-
 .right-section {
-  width: calc(var(--login-dialog-width) / 2);
   position: relative;
-  padding: var(--login-dialog-section-padding);
   display: flex;
   flex-direction: column;
+  width: calc(var(--login-dialog-width) / 2);
+  padding: var(--login-dialog-section-padding);
 }
-
 .right-section .content-wrapper {
   flex: 1;
-  overflow: hidden;
   padding: 8px 0;
+  overflow: hidden;
 }
-
 .right-section .content-title {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   font-size: 20px;
   font-weight: 700;
-  align-items: center;
-  justify-content: center;
 }
-
 .right-section .mode-toggle {
   position: absolute;
   top: 16px;
   right: 16px;
-  cursor: pointer;
-  color: var(--login-dialog-mode-toggle-color);
-  transition: color 0.3s;
   font-size: 24px;
+  color: var(--login-dialog-mode-toggle-color);
+  cursor: pointer;
+  transition: color 0.3s;
 }
-
 .right-section .form-container,
 .right-section .qr-container {
   display: flex;
@@ -259,48 +242,40 @@ function onAfterLeave() {
   width: 100%;
   height: 100%;
 }
-
 .right-section .form-box {
-  justify-self: center;
+  place-self: center center;
-  align-self: center;
-  height: 100%;
   width: 260px;
+  height: 100%;
   padding: var(--login-dialog-section-padding);
   border-radius: var(--login-dialog-border-radius);
 }
 
-@media (max-width: 800px) {
+@media (width <= 800px) {
   .left-section {
     display: none !important;
   }
-
   .glass-dialog {
-    padding: var(--login-dialog-padding);
     height: var(--login-dialog-height);
+    padding: var(--login-dialog-padding);
   }
-
   .right-section {
     padding: calc(var(--login-dialog-section-padding) - 8px);
   }
-
   .content-wrapper {
     padding: 4px 0;
   }
 }
-
 .animate-up-down {
-  animation: upDown 5s linear 0ms infinite;
+  animation: up-down 5s linear 0ms infinite;
 }
 
-@keyframes upDown {
+@keyframes up-down {
   0% {
     transform: translateY(0);
   }
-
   50% {
     transform: translateY(-20px);
   }
-
   100% {
     transform: translateY(0);
   }

src/components/ModelSelect/index.vue

@@ -110,24 +110,20 @@ function handleClick(item: GetSessionListVO) {
 <style scoped lang="scss">
 .model-select-box {
   color: var(--el-color-primary, #409eff);
+  background: var(--el-color-primary-light-9, rgb(235.9 245.3 255));
   border: 1px solid var(--el-color-primary, #409eff);
-  background: var(--el-color-primary-light-9, rgb(235.9, 245.3, 255));
   border-radius: 10px;
 }
-
 .popover-content-box-item.is-select {
-  color: var(--el-color-primary, #409eff);
   font-weight: 700;
+  color: var(--el-color-primary, #409eff);
 }
-
 .popover-content-box {
-  height: 200px;
-  gap: 4px;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  gap: 4px;
-  overflow-x: hidden;
+  height: 200px;
-
+  overflow: hidden auto;
   .popover-content-box-items {
     :deep() {
       .popover-trigger-item-text {
@@ -135,23 +131,20 @@ function handleClick(item: GetSessionListVO) {
       }
     }
   }
-
   .popover-content-box-item-text {
-    background-color: black;
     color: white;
+    background-color: black;
   }
 
   // 滚动条样式
   &::-webkit-scrollbar {
     width: 4px;
   }
-
   &::-webkit-scrollbar-track {
     background: #f5f5f5;
   }
-
   &::-webkit-scrollbar-thumb {
-    background: #ccc;
+    background: #cccccc;
     border-radius: 4px;
   }
 }

src/components/Popover/index.vue

@@ -3,8 +3,8 @@ import type { CSSProperties } from 'vue';
 import { arrow, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue';
 import { onClickOutside } from '@vueuse/core';
 
-export type PopoverPlacement =
+export type PopoverPlacement
-  | 'top'
+  = | 'top'
     | 'top-start'
     | 'top-end'
     | 'bottom'
@@ -190,13 +190,11 @@ function handleClick() {
     transform 0.2s ease;
   will-change: transform, opacity;
 }
-
 .popover-fade-enter-from,
 .popover-fade-leave-to {
   opacity: 0;
   transform: scale(0.95);
 }
-
 .popover-fade-enter-to,
 .popover-fade-leave-from {
   opacity: 1;

src/components/SvgIcon/index.vue

@@ -24,17 +24,16 @@ const svgClass = computed(() => {
 <style scope lang="scss">
 .sub-el-icon,
 .nav-icon {
-  display: inline-block;
-  font-size: 15px;
-  margin-right: 12px;
   position: relative;
+  display: inline-block;
+  margin-right: 12px;
+  font-size: 15px;
 }
-
 .svg-icon {
+  position: relative;
   width: 1em;
   height: 1em;
-  position: relative;
-  fill: currentColor;
   vertical-align: -2px;
+  fill: currentColor;
 }
 </style>

src/layouts/LayoutVertical/index.vue

@@ -43,22 +43,19 @@ useWindowWidthObserver();
 
 <style lang="scss" scoped>
 .layout-container {
+  position: relative;
   width: 100%;
   height: 100vh;
-  position: relative;
   overflow: hidden;
-
   .layout-header {
     padding: 0;
   }
-
   .layout-main {
-    padding: 0;
     height: 100%;
+    padding: 0;
   }
-
   .layout-container-main {
-    margin-left: var(--sidebar-left-container-default-width, 0px);
+    margin-left: var(--sidebar-left-container-default-width, 0);
     transition: margin-left 0.3s ease;
   }
 }
@@ -67,7 +64,6 @@ useWindowWidthObserver();
 .el-menu {
   border-right: none;
 }
-
 .layout-scrollbar {
   width: 100%;
 }

src/layouts/components/Aside/index.vue

@@ -209,16 +209,15 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
 <style scoped lang="scss">
 // 基础样式
 .aside-container {
-  height: 100%;
-  left: 0;
-  top: 0;
   position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 11;
   width: var(--sidebar-default-width);
+  height: 100%;
   pointer-events: auto;
   background-color: var(--sidebar-background-color);
-  border-right: 0.5px solid var(--s-color-border-tertiary, rgba(0, 0, 0, 0.08));
+  border-right: 0.5px solid var(--s-color-border-tertiary, rgb(0 0 0 / 8%));
-  z-index: 11;
-
   .aside-wrapper {
     display: flex;
     flex-direction: column;
@@ -226,33 +225,30 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
 
     // 侧边栏头部样式
     .aside-header {
-      height: 36px;
-      margin: 10px 12px 0px;
       display: flex;
       align-items: center;
-
+      height: 36px;
+      margin: 10px 12px 0;
       .logo-img {
+        box-sizing: border-box;
         width: 36px;
         height: 36px;
-        border-radius: 50%;
-        background-color: #fff;
-        overflow: hidden;
-        box-sizing: border-box;
         padding: 4px;
-
+        overflow: hidden;
+        background-color: #ffffff;
+        border-radius: 50%;
         img {
-          width: 100%;
-          height: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
+          width: 100%;
+          height: 100%;
         }
       }
-
       .logo-text {
         font-size: 16px;
-        color: rgba(0, 0, 0, 0.85);
         font-weight: 700;
+        color: rgb(0 0 0 / 85%);
         transform: skewX(-2deg);
       }
     }
@@ -261,56 +257,49 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
     .aside-body {
       .creat-chat-btn-wrapper {
         padding: 0 12px;
-
         .creat-chat-btn {
-          user-select: none;
           display: flex;
+          gap: 6px;
           align-items: center;
           padding: 8px 6px;
           margin-top: 16px;
           margin-bottom: 6px;
           color: #0057ff;
-          background-color: rgba(0, 87, 255, 0.06);
-          border-radius: 12px;
-          border: 1px solid rgba(0, 102, 255, 0.15);
           cursor: pointer;
-          gap: 6px;
+          user-select: none;
-
+          background-color: rgb(0 87 255 / 6%);
+          border: 1px solid rgb(0 102 255 / 15%);
+          border-radius: 12px;
           &:hover {
-            background-color: rgba(0, 87, 255, 0.12);
+            background-color: rgb(0 87 255 / 12%);
           }
-
           .creat-chat-text {
             font-size: 14px;
             font-weight: 700;
             line-height: 22px;
           }
-
           .add-icon {
-            font-size: 16px;
             width: 24px;
             height: 24px;
+            font-size: 16px;
           }
-
           .svg-icon {
-            margin-left: auto;
             height: 24px;
-            color: rgba(0, 87, 255, 0.3);
+            margin-left: auto;
+            color: rgb(0 87 255 / 30%);
           }
         }
       }
-
       .aside-content {
         display: flex;
+        flex: 1;
         flex-direction: column;
         height: 100%;
-        flex: 1;
         min-height: 0;
 
         // 会话列表高度-基础样式
         .conversations-wrap {
           height: calc(100vh - 110px);
-
           .label {
             display: flex;
             align-items: center;
@@ -325,63 +314,58 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
 // 折叠样式
 .aside-container-collapse {
   position: absolute;
-  opacity: 0;
-  // 向左偏移一个宽度
-  transform: translateX(-100%);
   top: 54px;
-  border-radius: 15px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  box-shadow:
-    0px 10px 20px 0px rgba(0, 0, 0, 0.1),
-    0px 0px 1px 0px rgba(0, 0, 0, 0.15);
-  height: auto;
   z-index: 22;
-  overflow: hidden;
+  height: auto;
   max-height: calc(100% - 110px);
   padding-bottom: 12px;
+  overflow: hidden;
+
+  /* 禁用悬停事件 */
+  pointer-events: none;
+  border: 1px solid rgb(0 0 0 / 8%);
+  border-radius: 15px;
+  box-shadow:
+    0 10px 20px 0 rgb(0 0 0 / 10%),
+    0 0 1px 0 rgb(0 0 0 / 15%);
+  opacity: 0;
 
   // 指定样式过渡
-  transition-property: opacity, transform;
+
-  transition-duration: 0.3s, 0.3s;
+  // 向左偏移一个宽度
-  transition-timing-function: ease, ease;
+  transform: translateX(-100%);
-  transition-delay: 0.3s, 0.3s;
+  transition:
+    opacity 0.3s ease 0.3s,
+    transform 0.3s ease 0.3s;
 
   /* 新增：未激活悬停时覆盖延迟 */
   &.no-delay {
     transition-delay: 0s, 0s;
   }
-
-  /* 禁用悬停事件 */
-  pointer-events: none;
-
-  &:hover,
-  &.aside-container-suspended {
-    pointer-events: auto;
-    /* 悬停激活后恢复事件响应 */
-  }
 }
 
 // 悬停样式
 .aside-container-collapse:hover,
 .aside-container-collapse.aside-container-suspended {
-  // 直接在这里写悬停时的样式（与 aside-container-suspended 一致）
-  opacity: 1;
-  transform: translateX(15px);
-  border-radius: 15px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  box-shadow:
-    0px 10px 20px 0px rgba(0, 0, 0, 0.1),
-    0px 0px 1px 0px rgba(0, 0, 0, 0.15);
   height: auto;
-  overflow: hidden;
   max-height: calc(100% - 110px);
   padding-bottom: 12px;
+  overflow: hidden;
+  pointer-events: auto;
+  border: 1px solid rgb(0 0 0 / 8%);
+  border-radius: 15px;
+  box-shadow:
+    0 10px 20px 0 rgb(0 0 0 / 10%),
+    0 0 1px 0 rgb(0 0 0 / 15%);
+
+  // 直接在这里写悬停时的样式（与 aside-container-suspended 一致）
+  opacity: 1;
 
   // 过渡动画沿用原有设置
-  transition-property: opacity, transform;
+  transform: translateX(15px);
-  transition-duration: 0.3s, 0.3s;
+  transition:
-  transition-timing-function: ease, ease;
+    opacity 0.3s ease 0s,
-  transition-delay: 0s, 0s;
+    transform 0.3s ease 0s;
 
   // 会话列表高度-悬停样式
   .conversations-wrap {

src/layouts/components/Header/components/Avatar.vue

@@ -130,12 +130,11 @@ function handleClick(item: any) {
   width: 520px;
   height: 520px;
 }
-
 .popover-content-box {
-  background: #fff;
+  padding: 8px;
+  background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
-  padding: 8px;
 }
 </style>

src/layouts/components/Header/components/CreateChat.vue

@@ -31,15 +31,14 @@ function handleCreatChat() {
 
 <style scoped lang="scss">
 .is-disabled {
-  opacity: 0.5;
   cursor: not-allowed;
-
+  opacity: 0.5;
   &:hover {
-    background-color: transparent;
     color: #0057ff;
+    cursor: not-allowed;
+    background-color: transparent;
     border-color: #0057ff;
     border-style: solid;
-    cursor: not-allowed;
     transition: none;
   }
 }

src/layouts/components/Header/components/TitleEditing.vue

@@ -74,15 +74,14 @@ function handleClickTitle() {
   transition: all 0.3s ease;
   &:hover {
     .svg-icon {
-      opacity: 1;
       display: block;
+      opacity: 1;
     }
   }
-
   .svg-icon {
-    transition: all 0.3s ease;
-    opacity: 0.5;
     display: none;
+    opacity: 0.5;
+    transition: all 0.3s ease;
   }
 }
 </style>

src/layouts/components/Header/index.vue

@@ -79,14 +79,12 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
 
 <style scoped lang="scss">
 .header-container {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
   width: 100%;
   height: fit-content;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-
   .header-box {
-    height: var(--header-container-default-heigth);
     width: 100%;
     width: calc(
       100% - var(--sidebar-left-container-default-width, 0px) - var(
@@ -94,8 +92,9 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
           0px
         )
     );
-    margin: 0 var(--sidebar-right-container-default-width, 0px) 0
+    height: var(--header-container-default-heigth);
-      var(--sidebar-left-container-default-width, 0px);
+    margin: 0 var(--sidebar-right-container-default-width, 0) 0
+      var(--sidebar-left-container-default-width, 0);
   }
 }
 </style>

src/pages/chat/index.vue

@@ -18,14 +18,14 @@ const sessionId = computed(() => route.params?.id);
 
 <style lang="scss" scoped>
 .chat-container {
-  padding: 0 16px;
-  width: calc(100% - 32px);
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: calc(100% - 32px);
   height: 100%;
+  padding: 0 16px;
   overflow-anchor: none;
 }
 </style>

src/pages/chat/layouts/chatDefaul/index.vue

@@ -108,13 +108,12 @@ watch(
 <style scoped lang="scss">
 .chat-defaul-wrap {
   position: relative;
-  width: 100%;
-  max-width: 800px;
-  min-height: 450px;
   display: flex;
   flex-direction: column;
   align-items: center;
-
+  width: 100%;
+  max-width: 800px;
+  min-height: 450px;
   .chat-defaul-sender {
     width: 100%;
   }

src/pages/chat/layouts/chatWithId/index.vue

@@ -324,48 +324,41 @@ watch(
 <style scoped lang="scss">
 .chat-with-id-container {
   position: relative;
-  width: 100%;
-  max-width: 800px;
-  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-
-  .chat-warp {
   width: 100%;
-    height: calc(100vh - 60px);
+  max-width: 800px;
+  height: 100%;
+  .chat-warp {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-
+    width: 100%;
+    height: calc(100vh - 60px);
     .thinking-chain-warp {
       margin-bottom: 12px;
     }
   }
-
   :deep() {
     .el-bubble-list {
       padding-top: 24px;
     }
-
     .el-bubble {
       padding: 0 12px;
       padding-bottom: 24px;
     }
-
     .el-typewriter {
-      border-radius: 12px;
       overflow: hidden;
+      border-radius: 12px;
     }
-
     .markdown-body {
       background-color: transparent;
     }
   }
-
   .chat-defaul-sender {
-    margin-bottom: 22px;
     width: 100%;
+    margin-bottom: 22px;
   }
 }
 </style>

src/pages/error/403.vue

@@ -32,30 +32,25 @@ function handleHomePage() {
 #box {
   overflow: hidden;
 }
-
 #banner {
   margin-top: 60px;
   background: url("@/assets/images/error/403.png") no-repeat;
   background-size: 100%;
 }
-
 .elx-top {
   width: 600px;
   height: 400px;
   margin: 0 auto;
 }
-
 .elx-bottom {
   height: 300px;
   margin-top: 20px;
   text-align: center;
 }
-
 .elx-text1 {
   font-size: 46px;
   font-weight: bold;
 }
-
 .elx-text2 {
   padding-top: 30px;
   font-family: YouYuan;

src/pages/error/404.vue

@@ -32,30 +32,25 @@ function handleHomePage() {
 #box {
   overflow: hidden;
 }
-
 #banner {
   margin-top: 60px;
   background: url("@/assets/images/error/404.png") no-repeat;
   background-size: 100%;
 }
-
 .elx-top {
   width: 600px;
   height: 400px;
   margin: 0 auto;
 }
-
 .elx-bottom {
   height: 300px;
   margin-top: 20px;
   text-align: center;
 }
-
 .elx-text1 {
   font-size: 46px;
   font-weight: bold;
 }
-
 .elx-text2 {
   padding-top: 30px;
   font-family: YouYuan;

types/components.d.ts

@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -35,7 +35,7 @@ declare module 'vue' {
     VerificationCode: typeof import('./../src/components/LoginDialog/components/FormLogin/VerificationCode.vue')['default']
     WelecomeText: typeof import('./../src/components/WelecomeText/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
+  export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }

types/import_meta.d.ts

@@ -5,7 +5,6 @@ interface ImportMetaEnv {
   readonly VITE_WEB_TITLE_EN: string;
   readonly VITE_WEB_ENV: string;
   readonly VITE_WEB_BASE_API: string;
-  readonly VITE_BUILD_COMPRESS: string;
   readonly VITE_API_URL: string;
 }