feat:工具细节完成

.vscode/settings.json

@@ -1,23 +1,71 @@
 {
-  // 通用配置
+  // ====== 1. 编辑器通用设置 ======
   "editor.fontSize": 14, // 字体大小
-  "editor.wordWrap": "on", // 自动换行
-  "editor.tabSize": 2, // 缩进2空格（Vue推荐）
+  "editor.lineHeight": 24, // 行高，让代码不那么紧凑
+  "editor.tabSize": 2, // Tab 键的宽度为 2 个空格
+  "editor.insertSpaces": true, // 敲 Tab 键时插入空格而不是制表符
+  "editor.detectIndentation": false, // 关闭自动检测缩进，强制使用 tabSize
+  "editor.renderWhitespace": "none", // 不显示空白字符（'all'/'boundary'/'none'）
+  "editor.minimap.enabled": false, // 显示代码小地图
+  "editor.wordWrap": "off", // 不自动换行，让 Prettier 处理
+  "editor.cursorSmoothCaretAnimation": "on", // 光标动画更平滑
+  "editor.smoothScrolling": true, // 滚动平滑
+
+  // ====== 2. 格式化设置 (Prettier) ======
+  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化程序为 Prettier
   "editor.formatOnSave": true, // 保存时自动格式化
-  // Vue专用配置
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode" // 使用Vetur格式化
+  "editor.formatOnPaste": false, // 粘贴时是否格式化，通常设置为 false 避免干扰
+  "editor.formatOnType": false, // 输入时是否格式化，通常设置为 false 避免干扰
+
+  // ====== 3. Prettier 插件的特定配置 ======
+  // 这些配置会覆盖 .prettierrc 中的同名配置，如果项目有 .prettierrc，建议在 .prettierrc 中配置
+  "prettier.printWidth": 100, // 单行代码的最大长度（超过会换行）
+  "prettier.tabWidth": 2, // 缩进宽度为 2 个空格
+  "prettier.useTabs": false, // 不使用 Tab 字符缩进，使用空格
+  "prettier.singleQuote": true, // 使用单引号代替双引号
+  "prettier.semi": false, // 不在语句末尾添加分号
+  "prettier.trailingComma": "es5", // 在多行对象、数组等末尾添加逗号（如在 ES5 中有效）
+  "prettier.bracketSpacing": true, // 在对象字面量的大括号之间添加空格
+  "prettier.jsxBracketSameLine": false, // JSX 元素的右括号是否和属性在同一行
+  "prettier.arrowParens": "avoid", // 箭头函数只有一个参数时省略括号 (e.g., x => x 而不是 (x) => x)
+  "prettier.endOfLine": "lf", // 统一行尾序列为 LF (Linux Line Feed)
+  "prettier.vueIndentScriptAndStyle": true, // Vue 文件中 <script> 和 <style> 标签内容是否缩进
+
+  // ====== 4. ESLint 插件的特定配置 ======
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue", // 确保 ESLint 检查 .vue 文件
+    "html", // 如果你有 HTML 文件也想检查
+    "json", // 如果有 JSON 文件也想检查
+    "jsonc" // 支持 JSON With Comments
+  ],
+  // 保存时自动修复 ESLint 发现的问题（需要安装 ESLint 扩展）
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
   },
-  "vetur.format.defaultFormatter.html": "js-beautify-html", // HTML格式化引擎
-  "vetur.format.defaultFormatterOptions": {
-    "js-beautify-html": {
-      "wrap_line_length": 120, // 每行最大字符数（控制标签属性换行）
-      "wrap_attributes": "auto", // 属性自动换行（auto为智能换行）
-      "end_with_newline": false // 结尾不加空行
-    }
-  },
-  // Prettier配置
-  "prettier.singleQuote": true, // 强制单引号
-  "prettier.semi": false, // 去除分号
-  "files.saveConflictResolution": "overwriteFileOnDisk"
+
+  // ====== 5. Vue (Volar) 插件的特定配置 ======
+  // Volar 通常无需太多配置，它会自动处理 Vue 3 的语言特性
+  "volar.autoCreateQuotes": true, // 自动补全引号
+  "volar.completion.preferredTagCasing": "auto", // 标签自动补全
+  "volar.jsx.autoComplete": true,
+
+  // ====== 6. 文件关联（可选）======
+  // 如果你的文件扩展名不是标准的，可以添加关联
+  // "files.associations": {
+  //     "*.vue": "vue"
+  // },
+
+  // ====== 7. 其他常用设置 ======
+  "files.encoding": "utf8", // 文件编码
+  "files.eol": "\n", // 默认行尾字符为 LF (Unix/Linux)
+  "files.trimTrailingWhitespace": true, // 保存时自动去除行尾多余空格
+  "files.insertFinalNewline": true, // 保存时确保文件末尾有空行
+  "telemetry.telemetryLevel": "off" // 关闭遥测数据收集，保护隐私
+
+  // ====== 8. 终端字体（可选）======
+  // "terminal.integrated.fontSize": 13
 }

css/common.css

@@ -150,7 +150,14 @@
   display: flex;
   flex-direction: column;
 }
-
+.graph-container .title {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+}
+.graph-container .title .time-range {
+  margin-left: 24px;
+}
 .graph-container .line-graph {
   flex: 1;
   min-height: 0;
@@ -365,11 +372,6 @@
   margin-left: 8px;
 }
 
-.total-prpd-panel
-  .prpd-box
-  .totle-prpds
-  .total-prpd-item
-  .switcher
-  .active-span {
+.total-prpd-panel .prpd-box .totle-prpds .total-prpd-item .switcher .active-span {
   color: #1890ff;
 }