refactor: 重构工具模块导入与项目代码结构

1.  统一所有API文件的request导入路径，从@utils/http改为@utils
2.  合并工具类导出，将分散的工具模块整合到@utils统一出口
3.  重构状态管理导入路径，统一从@utils导入相关工具与store
4.  整理组件导入与样式引用，优化项目内组件与样式的引用路径
5.  新增部分基础组件与工具方法，完善项目基础能力
6.  修复部分样式类名的书写规范，统一类名格式

frontend/web/.prettierrc.yaml

@@ -1,40 +1,40 @@
-# 在单参数箭头函数中始终添加括号
+# 单参数箭头函数始终添加括号
 arrowParens: "always"
 # JSX 多行元素的闭合标签另起一行
 bracketSameLine: false
-# 对象字面量中的括号之间添加空格
+# 对象字面量括号之间添加空格 { foo: bar }
 bracketSpacing: true
-# 自动格式化嵌入的代码（如 Markdown 和 HTML 内的代码）
+# 自动格式化嵌入的代码（Markdown/HTML 内的代码块）
 embeddedLanguageFormatting: "auto"
-# 忽略 HTML 空白敏感度，将空白视为非重要内容
-htmlWhitespaceSensitivity: "ignore"
+# HTML 空白敏感度，CSS 模式保留 display 相关空白
+htmlWhitespaceSensitivity: "css"
 # 不插入 @prettier 的 pragma 注释
 insertPragma: false
-# 在 JSX 中使用双引号
+# JSX 中使用双引号
 jsxSingleQuote: false
-# 每行代码的最大长度限制为 100 字符
+# 每行最大长度
 printWidth: 100
-# 在 Markdown 中保留原有的换行格式
+# Markdown 换行保留原格式
 proseWrap: "preserve"
-# 仅在必要时添加对象属性的引号
+# 对象属性仅在必要时添加引号
 quoteProps: "as-needed"
-# 不要求文件开头插入 @prettier 的 pragma 注释
+# 不要求文件开头有 @prettier 的 pragma 注释
 requirePragma: false
-# 在语句末尾添加分号
+# 语句末尾添加分号
 semi: true
-# 使用双引号而不是单引号
+# 使用双引号
 singleQuote: false
-# 缩进使用 2 个空格
+# 缩进 2 个空格
 tabWidth: 2
-# 在多行元素的末尾添加逗号（ES5 支持的对象、数组等）
+# 多行尾随逗号（ES5 支持的对象、数组等）
 trailingComma: "es5"
-# 使用空格而不是制表符缩进
+# 使用空格而非制表符缩进
 useTabs: false
-# Vue 文件中的 <script> 和 <style> 不增加额外的缩进
+# Vue 文件 <script> 和 <style> 不额外缩进
 vueIndentScriptAndStyle: false
-# 根据系统自动检测换行符
+# 换行符自动检测（LF / CRLF）
 endOfLine: "auto"
-# 对 HTML 文件应用特定格式化规则
+# HTML 文件使用专用解析器
 overrides:
   - files: "*.html"
     options: