Skip to content

Dev #409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fastapiadmin merged 5 commits into from
May 16, 2026
Merged

Dev #409

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0344765
feat(components): 增强 FaForm/FaDialog/FaDrawer 并重构业务页面
fastapiadmin May 15, 2026
d56ec93
refactor(crud): 提取通用CRUD逻辑与清理样式
fastapiadmin May 15, 2026
bb768d1
style: 调整代码缩进与换行格式
May 15, 2026
8725be6
refactor: 重构工具模块导入与项目代码结构
May 16, 2026
0b1780f
chore: 删除无用的自定义提交规则配置文件
May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: 重构工具模块导入与项目代码结构 
1.  统一所有API文件的request导入路径，从@utils/http改为@utils
2.  合并工具类导出，将分散的工具模块整合到@utils统一出口
3.  重构状态管理导入路径，统一从@utils导入相关工具与store
4.  整理组件导入与样式引用，优化项目内组件与样式的引用路径
5.  新增部分基础组件与工具方法，完善项目基础能力
6.  修复部分样式类名的书写规范，统一类名格式
  • Loading branch information
zhangtao
zhangtao committed May 16, 2026
commit 8725be6d7d4b31b6d0c9755f4844b6211d5956b8
21 changes: 10 additions & 11 deletions frontend/web/.prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets
stats.html
node_modules/
dist/
public/
.vscode/
src/types/import/
.auto-import.json
pnpm-lock.yaml
package-lock.json
.stylelintcache
.eslintcache
stats.html
36 changes: 18 additions & 18 deletions frontend/web/.prettierrc.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
74 changes: 32 additions & 42 deletions frontend/web/.stylelintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
module.exports = {
// 继承推荐规范配置
extends: [
"stylelint-config-standard",
"stylelint-config-recommended",
"stylelint-config-recommended-scss",
"stylelint-config-recommended-vue/scss",
"stylelint-config-html/vue",
"stylelint-config-recess-order",
],
plugins: [
"stylelint-prettier", // 统一代码风格，格式冲突时以 Prettier 规则为准
],
// 指定不同文件对应的解析器
overrides: [
{
files: ["**/*.{vue,html}"],
Expand All @@ -21,57 +13,55 @@ module.exports = {
files: ["**/*.{css,scss}"],
customSyntax: "postcss-scss",
},
// Markdown 预览样式由多段合并，存在有意重复的限定选择器
{
files: ["**/src/styles/core/md.scss"],
rules: {
"no-duplicate-selectors": null,
},
},
],
// 自定义规则
rules: {
"prettier/prettier": true, // 强制执行 Prettier 格式化规则（需配合 .prettierrc 配置文件）
"declaration-property-value-no-unknown": null, // 允许非常规数值格式 ,如 height: calc(100% - 50)
// Tailwind CSS v4 使用 @reference 引入主题而不注入样式，需放行
"scss/at-rule-no-unknown": [
true,
{
// Tailwind CSS v4：@custom-variant、@theme、@utility、@layer 等
ignoreAtRules: ["reference", "custom-variant", "theme", "utility", "layer"],
},
],
"import-notation": "string", // 指定导入CSS文件的方式("string"|"url")
"selector-class-pattern": null, // 选择器类名命名规则
"custom-property-pattern": null, // 自定义属性命名规则
"keyframes-name-pattern": null, // 动画帧节点样式命名规则
"no-descending-specificity": null, // 允许无降序特异性
"no-empty-source": null, // 允许空样式
"property-no-vendor-prefix": null, // 允许属性前缀
// SCSS @if/@else 链与 Prettier 易冲突，关闭「at-rule 前空行」检查
"import-notation": "string",
"selector-class-pattern": null,
"custom-property-pattern": null,
"keyframes-name-pattern": null,
"no-descending-specificity": null,
"no-empty-source": null,
"property-no-vendor-prefix": null,
"at-rule-empty-line-before": null,
// 允许 global 、export 、deep伪类
// 允许 Vue SFC :deep() / ::deep / :global() / :slotted() 伪选择器
"selector-pseudo-class-no-unknown": [
true,
{
ignorePseudoClasses: ["global", "export", "deep"],
ignorePseudoClasses: ["global", "export", "deep", "slotted"],
},
],
// 允许 Vue 3 的 ::deep 伪元素选择器
"selector-pseudo-element-no-unknown": [
true,
{
ignorePseudoElements: ["deep"],
},
],
// 允许未知属性
"property-no-unknown": [
// 允许 SCSS + Tailwind CSS v4 专属 at-rules
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": [
true,
{
ignoreProperties: [],
ignoreAtRules: [
"apply",
"use",
"mixin",
"include",
"extend",
"each",
"if",
"else",
"for",
"while",
"reference",
"tailwind",
"theme",
"utility",
"custom-variant",
"layer",
"config",
"plugin",
],
},
],
// 允许未知规则
"at-rule-no-unknown": null, // 禁用默认的未知 at-rule 检查,
},
};
6 changes: 6 additions & 0 deletions frontend/web/.trae/rules/git-commit-message.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
alwaysApply: true
scene: git_message
---

Write your rules here to customize the style of AI-generated commit messages.
114 changes: 57 additions & 57 deletions frontend/web/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ main.ts 启动

### 1. 环境准备

| 工具 | 版本要求 |
|------|-----------|
| Node.js | ≥ 20.19（见 `package.json` → `engines`） |
| pnpm | ≥ 8.8，推荐 **pnpm 9**（与 `packageManager` 字段一致） |
| 工具 | 版本要求 |
| ------- | ------------------------------------------------------ |
| Node.js | ≥ 20.19（见 `package.json` → `engines`） |
| pnpm | ≥ 8.8，推荐 **pnpm 9**（与 `packageManager` 字段一致） |

未安装 pnpm 时可执行：`corepack enable && corepack prepare pnpm@9.15.3 --activate`（版本可按项目 `packageManager` 调整）。

Expand Down Expand Up @@ -76,45 +76,45 @@ cp .env.example .env

## 常见问题（排查）

| 现象 | 建议 |
|------|------|
| `ECONNREFUSED` / 网络错误 | 后端未启动或 **`VITE_API_BASE_URL`** 端口错误 |
| 接口 401 / 频繁跳转登录 | Token 失效或未登录；清除站点本地存储后重新登录 |
| 修改 `.env` 不生效 | 必须 **重启** `pnpm dev` |
| 依赖异常、热更新怪异 | 尝试 **`pnpm clean:cache`** 后再 **`pnpm dev`**；仍不行可 **`pnpm dev:force`** |
| 类型报错 | 运行 **`pnpm type-check`**；自动生成类型见 `src/types/import/`（勿手改自动生成的 d.ts） |
| 现象 | 建议 |
| ------------------------- | --------------------------------------------------------------------------------------- |
| `ECONNREFUSED` / 网络错误 | 后端未启动或 **`VITE_API_BASE_URL`** 端口错误 |
| 接口 401 / 频繁跳转登录 | Token 失效或未登录；清除站点本地存储后重新登录 |
| 修改 `.env` 不生效 | 必须 **重启** `pnpm dev` |
| 依赖异常、热更新怪异 | 尝试 **`pnpm clean:cache`** 后再 **`pnpm dev`**；仍不行可 **`pnpm dev:force`** |
| 类型报错 | 运行 **`pnpm type-check`**；自动生成类型见 `src/types/import/`（勿手改自动生成的 d.ts） |

---

## 技术栈

| 类别 | 选型 |
|------|------|
| 框架 | Vue 3（Composition API / `<script setup>`） |
| 构建 | Vite 7 |
| 语言 | TypeScript |
| UI | Element Plus |
| 路由 | Vue Router 4（Hash；静态路由 + 守卫内动态 `addRoute`） |
| 状态 | Pinia + pinia-plugin-persistedstate |
| 样式 | Tailwind CSS、SCSS |
| HTTP | Axios |
| 国际化 | vue-i18n |
| 类别 | 选型 |
| ------ | ------------------------------------------------------ |
| 框架 | Vue 3（Composition API / `<script setup>`） |
| 构建 | Vite 7 |
| 语言 | TypeScript |
| UI | Element Plus |
| 路由 | Vue Router 4（Hash；静态路由 + 守卫内动态 `addRoute`） |
| 状态 | Pinia + pinia-plugin-persistedstate |
| 样式 | Tailwind CSS、SCSS |
| HTTP | Axios |
| 国际化 | vue-i18n |

---

## 常用脚本

| 命令 | 说明 |
|------|------|
| `pnpm dev` | 本地开发（读取 `.env` + `.env.development`） |
| `pnpm dev:force` | 强制预打包依赖后启动（缓存异常时） |
| `pnpm build` | `vue-tsc` 类型检查 + 生产构建，产物在 **`dist/`** |
| `pnpm build:dev` / `build:test` / `build:pro` | 按 mode 构建（需对应 env 文件） |
| `pnpm preview` | 本地预览构建结果 |
| `pnpm type-check` | 仅 TypeScript 检查 |
| `pnpm lint` | ESLint + Prettier + Stylelint |
| `pnpm clean:dev` | 执行 `scripts/clean-dev.ts`（清理演示等，使用前阅读脚本说明） |
| `pnpm clean:cache` | 清理 Vite 等缓存 |
| 命令 | 说明 |
| --------------------------------------------- | ------------------------------------------------------------- |
| `pnpm dev` | 本地开发（读取 `.env` + `.env.development`） |
| `pnpm dev:force` | 强制预打包依赖后启动（缓存异常时） |
| `pnpm build` | `vue-tsc` 类型检查 + 生产构建，产物在 **`dist/`** |
| `pnpm build:dev` / `build:test` / `build:pro` | 按 mode 构建（需对应 env 文件） |
| `pnpm preview` | 本地预览构建结果 |
| `pnpm type-check` | 仅 TypeScript 检查 |
| `pnpm lint` | ESLint + Prettier + Stylelint |
| `pnpm clean:dev` | 执行 `scripts/clean-dev.ts`（清理演示等，使用前阅读脚本说明） |
| `pnpm clean:cache` | 清理 Vite 等缓存 |

---

Expand Down Expand Up @@ -146,14 +146,14 @@ src/

## 路径别名（编写代码时）

| 别名 | 指向 |
|------|------|
| `@` | `src/` |
| `@views` | `src/views` |
| `@stores` | `src/store` |
| `@utils` | `src/utils` |
| `@styles` | `src/styles` |
| `@imgs` / `@icons` | 图片与 SVG |
| 别名 | 指向 |
| ------------------ | ------------ |
| `@` | `src/` |
| `@views` | `src/views` |
| `@stores` | `src/store` |
| `@utils` | `src/utils` |
| `@styles` | `src/styles` |
| `@imgs` / `@icons` | 图片与 SVG |

与 **`vite.config.ts`**、`tsconfig.json` 中 `paths` 保持一致。

Expand All @@ -163,29 +163,29 @@ src/

只有以 **`VITE_`** 开头的变量会注入前端代码。下列与 **`pnpm dev`** 关系最密切：

| 变量 | 作用 |
|------|------|
| `VITE_PORT` | 开发服务器端口 |
| `VITE_BASE_URL` | 部署基础路径（子目录部署时形如 `/admin/`） |
| `VITE_APP_BASE_API` | 接口路径前缀，与 Vite 代理匹配 |
| `VITE_API_URL` | 浏览器侧发出的 API 根前缀（开发时常为 `/`） |
| `VITE_API_BASE_URL` | **代理目标**：后端 HTTP 根地址 |
| `VITE_ACCESS_MODE` | `frontend` / `backend` / `mixed`，菜单与路由来源 |
| `VITE_APP_WS_ENDPOINT` | WebSocket（如 AI 对话） |
| `VITE_APP_TITLE` | 页面标题（可被后端参数配置覆盖） |
| 变量 | 作用 |
| ---------------------- | ------------------------------------------------ |
| `VITE_PORT` | 开发服务器端口 |
| `VITE_BASE_URL` | 部署基础路径（子目录部署时形如 `/admin/`） |
| `VITE_APP_BASE_API` | 接口路径前缀，与 Vite 代理匹配 |
| `VITE_API_URL` | 浏览器侧发出的 API 根前缀（开发时常为 `/`） |
| `VITE_API_BASE_URL` | **代理目标**：后端 HTTP 根地址 |
| `VITE_ACCESS_MODE` | `frontend` / `backend` / `mixed`，菜单与路由来源 |
| `VITE_APP_WS_ENDPOINT` | WebSocket（如 AI 对话） |
| `VITE_APP_TITLE` | 页面标题（可被后端参数配置覆盖） |

完整列表以仓库内 **`.env`**、**`.env.development`** 为准；模板说明见 **`.env.example`**。

---

## 路由与菜单（扩展页面时）

| 文件 | 职责 |
|------|------|
| `src/router/staticRoutes.ts` | 静态路由、`dashboardLayoutChildren`、壳层菜单合并 |
| `src/router/dynamicRoutes.ts` | 菜单驱动的动态路由 |
| `src/router/beforeEach.ts` | 权限与动态挂载 |
| `src/router/MenuProcessor.ts` | 后端菜单 → 前端路由记录 |
| 文件 | 职责 |
| ----------------------------- | ------------------------------------------------- |
| `src/router/staticRoutes.ts` | 静态路由、`dashboardLayoutChildren`、壳层菜单合并 |
| `src/router/dynamicRoutes.ts` | 菜单驱动的动态路由 |
| `src/router/beforeEach.ts` | 权限与动态挂载 |
| `src/router/MenuProcessor.ts` | 后端菜单 → 前端路由记录 |

新增业务页：一般需要 **视图 +（可选）静态或动态路由 + 后端菜单/i18n**，三者路径与 **name** 保持一致。

Expand Down
9 changes: 9 additions & 0 deletions frontend/web/build/banner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export const BANNER = [
" ___ _ _ __ _ ",
" .' ..] / |_ (_) | ] (_) ",
" _| |_ ,--. .--. `| |-',--. _ .--. __ ,--. .--.| | _ .--..--. __ _ .--. ",
" '-| |-'`'_\\ : ( (`\\] | | `'_\\ :[ '/ '`\\ [ | `'_\\ : / /'`\\' | [ `.-. .-. | [ | [ `.-. | ",
" | | // | |, `'.'. | |,// | |,| \\__/ | | | // | |,| \\__/ | | | | | | | | | | | | | ",
" [___] \\'-;__/[\\__) )\\__/\\'-;__/| ;.__/ [___]\\'-;__/ '.__.;__][___||__||__][___][___||__] ",
" [__] ",
].join("\n");
Loading