Skip to content

Commit 3a8b5ac

Browse files
VLSMBVLSMB
authored
feat: add front-end ci (#109)
* refactor: remove unused frontend code * feat: add es-lint for frontend * fix: lint * feat: add es-lint ci * feat: add es-lint ci * fix: ci * fix: lint warn
1 parent f66a56b commit 3a8b5ac

48 files changed

Lines changed: 11456 additions & 6916 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/frontend-check.yml‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
#
2+
# Copyright 2024-2025 the original author or authors.
3+
#
4+
# Licensed under the Apache License, Version 2.0 (the "License");
5+
# you may not use this file except in compliance with the License.
6+
# You may obtain a copy of the License at
7+
#
8+
# https://www.apache.org/licenses/LICENSE-2.0
9+
#
10+
# Unless required by applicable law or agreed to in writing, software
11+
# distributed under the License is distributed on an "AS IS" BASIS,
12+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
# See the License for the specific language governing permissions and
14+
# limitations under the License.
15+
#
16+
name: Frontend Check
17+
18+
on:
19+
push:
20+
branches:
21+
- main
22+
pull_request:
23+
branches:
24+
- main
25+
26+
jobs:
27+
frontend-check:
28+
name: Frontend Build and Code Quality Check
29+
runs-on: ubuntu-latest
30+
steps:
31+
- name: Checkout code
32+
uses: actions/checkout@v4
33+
- name: Setup Node.js
34+
uses: actions/setup-node@v4
35+
with:
36+
node-version: '18'
37+
cache: 'npm'
38+
cache-dependency-path: spring-ai-alibaba-data-agent-frontend/package-lock.json
39+
- name: Install dependencies
40+
run: |
41+
cd spring-ai-alibaba-data-agent-frontend
42+
npm ci
43+
- name: Build project
44+
run: |
45+
cd spring-ai-alibaba-data-agent-frontend
46+
npm run build
47+
- name: ESLint check
48+
run: |
49+
cd spring-ai-alibaba-data-agent-frontend
50+
npm run lint:check
51+
- name: Prettier format check
52+
run: |
53+
cd spring-ai-alibaba-data-agent-frontend
54+
npm run format:check
55+
- name: Unused code check
56+
run: |
57+
cd spring-ai-alibaba-data-agent-frontend
58+
npm run unused

‎spring-ai-alibaba-data-agent-frontend/.eslintignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
dist
2+
node_modules
3+
coverage
4+
*.min.js
5+
*.min.css
6+
package-lock.json
7+
yarn.lock
8+
pnpm-lock.yaml
9+
.DS_Store
10+
Thumbs.db
11+
.eslintcache
12+
*.log

‎spring-ai-alibaba-data-agent-frontend/.eslintrc.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
es2021: true,
6+
node: true,
7+
},
8+
extends: [
9+
'eslint:recommended',
10+
'@vue/eslint-config-typescript',
11+
'@vue/eslint-config-prettier',
12+
'plugin:vue/vue3-essential',
13+
],
14+
overrides: [
15+
{
16+
files: ['*.ts', '*.tsx', '*.vue'],
17+
parser: 'vue-eslint-parser',
18+
parserOptions: {
19+
parser: '@typescript-eslint/parser',
20+
ecmaVersion: 'latest',
21+
sourceType: 'module',
22+
},
23+
},
24+
],
25+
plugins: ['vue', '@typescript-eslint'],
26+
rules: {
27+
// TypeScript 相关规则
28+
'@typescript-eslint/no-unused-vars': 'error',
29+
'@typescript-eslint/no-explicit-any': 'warn',
30+
'@typescript-eslint/explicit-function-return-type': 'off',
31+
'@typescript-eslint/explicit-module-boundary-types': 'off',
32+
33+
// Vue 相关规则
34+
'vue/multi-word-component-names': 'off',
35+
'vue/no-unused-components': 'error',
36+
'vue/no-unused-vars': 'error',
37+
'vue/require-default-prop': 'error',
38+
'vue/require-prop-types': 'error',
39+
40+
// 通用规则
41+
'no-unused-vars': 'off', // 使用 TypeScript 的规则
42+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
43+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
44+
'prefer-const': 'error',
45+
'no-var': 'error',
46+
'object-shorthand': 'error',
47+
'quote-props': ['error', 'as-needed'],
48+
},
49+
};

‎spring-ai-alibaba-data-agent-frontend/.prettierignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
dist
2+
node_modules
3+
coverage
4+
*.min.js
5+
*.min.css
6+
package-lock.json
7+
yarn.lock
8+
pnpm-lock.yaml
9+
.DS_Store
10+
Thumbs.db
11+
.eslintcache
12+
*.log

‎spring-ai-alibaba-data-agent-frontend/.prettierrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"semi": true,
3+
"trailingComma": "all",
4+
"singleQuote": true,
5+
"printWidth": 100,
6+
"tabWidth": 2,
7+
"useTabs": false,
8+
"bracketSpacing": true,
9+
"arrowParens": "avoid",
10+
"endOfLine": "lf",
11+
"vueIndentScriptAndStyle": true,
12+
"htmlWhitespaceSensitivity": "ignore"
13+
}

‎spring-ai-alibaba-data-agent-frontend/README-CODE-STYLE.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# 代码规范和检查工具配置说明
2+
3+
## 已配置的工具
4+
5+
### 1. 代码格式化工具
6+
7+
- **Prettier**: 自动格式化代码，确保代码风格一致
8+
- 配置文件: `.prettierrc`
9+
- 忽略文件: `.prettierignore`
10+
11+
### 2. 代码规范检查工具
12+
13+
- **ESLint**: 检查代码质量和规范
14+
- **@typescript-eslint**: TypeScript 代码检查
15+
- **eslint-plugin-vue**: Vue 组件代码检查
16+
- 配置文件: `.eslintrc.js`
17+
- 忽略文件: `.eslintignore`
18+
19+
### 3. 未使用代码检查工具
20+
21+
- **unimported**: 检查未使用的导入和依赖
22+
- **knip**: 检查未使用的文件、导出和依赖
23+
- 配置文件: `knip.json`
24+
25+
### 4. TypeScript 类型检查
26+
27+
- **vue-tsc**: Vue + TypeScript 类型检查
28+
- 配置文件: `tsconfig.json`, `tsconfig.node.json`
29+
30+
## 安装步骤
31+
32+
1. 进入前端项目目录：
33+
34+
```bash
35+
cd spring-ai-alibaba-data-agent-frontend
36+
```
37+
38+
2. 安装所有依赖：
39+
40+
```bash
41+
npm install
42+
```
43+
44+
## 使用命令
45+
46+
### 代码格式化
47+
48+
```bash
49+
# 格式化所有代码
50+
npm run format
51+
52+
# 检查代码格式（不修改）
53+
npm run format:check
54+
```
55+
56+
### 代码规范检查
57+
58+
```bash
59+
# 检查并自动修复代码规范问题
60+
npm run lint
61+
62+
# 只检查不修复
63+
npm run lint:check
64+
```
65+
66+
### 未使用代码检查
67+
68+
```bash
69+
# 检查未使用的导入和代码
70+
npm run unused
71+
```
72+
73+
### 组合命令
74+
75+
```bash
76+
# 完整的代码质量检查
77+
npm run lint:check && npm run format:check && npm run unused
78+
```
79+
80+
## 推荐的开发流程
81+
82+
1. 开发时实时检查：
83+
- 在 VS Code 中安装 ESLint 和 Prettier 插件
84+
- 启用保存时自动格式化
85+
86+
2. 提交前检查：
87+
88+
```bash
89+
npm run lint && npm run format
90+
```
91+
92+
3. 定期清理：
93+
```bash
94+
npm run unused
95+
```
96+
97+
## 规则说明
98+
99+
### Prettier 规则
100+
101+
- 使用单引号
102+
- 行尾分号
103+
- 尾随逗号
104+
- 最大行宽 100 字符
105+
- 缩进 2 个空格
106+
107+
### ESLint 规则
108+
109+
- 检查未使用的变量和导入
110+
- Vue 组件命名规则
111+
- TypeScript 严格模式
112+
- 生产环境禁用 console 和 debugger
113+
114+
这些配置将帮助您的项目保持代码质量。

‎spring-ai-alibaba-data-agent-frontend/README.md‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -99,28 +99,28 @@ export default defineConfig({
9999
proxy: {
100100
'/api': {
101101
target: 'http://localhost:8065', // 修改为实际的后端地址
102-
changeOrigin: true
102+
changeOrigin: true,
103103
},
104104
'/nl2sql': {
105105
target: 'http://localhost:8065', // 修改为实际的后端地址
106106
target: 'http://your-backend-host:port', // 修改为你的后端地址
107-
changeOrigin: true
107+
changeOrigin: true,
108108
},
109109
'/nl2sql': {
110110
target: 'http://your-backend-host:port', // 修改为你的后端地址
111-
changeOrigin: true
112-
}
113-
}
114-
}
115-
})
111+
changeOrigin: true,
112+
},
113+
},
114+
},
115+
});
116116
```
117117

118118
## 功能说明
119119

120120
### 首页 - NL2SQL演示
121121

122122
- **功能**: 输入自然语言问题，系统自动转换为SQL查询
123-
- **特性**:
123+
- **特性**:
124124
- 实时流式响应显示
125125
- 数据源初始化
126126
- 查询结果可视化
@@ -130,7 +130,7 @@ export default defineConfig({
130130
### 业务知识管理
131131

132132
- **功能**: 管理企业知识库，配置业务术语和同义词
133-
- **操作**:
133+
- **操作**:
134134
- 新增/编辑/删除业务知识
135135
- 搜索功能
136136
- 默认召回配置
@@ -198,20 +198,20 @@ npm run build
198198
server {
199199
listen 80;
200200
server_name your-domain.com;
201-
201+
202202
# 前端静态文件
203203
location / {
204204
root /path/to/dist;
205205
try_files $uri $uri/ /index.html;
206206
}
207-
207+
208208
# API 代理
209209
location /api/ {
210210
proxy_pass http://backend-server:8080;
211211
proxy_set_header Host $host;
212212
proxy_set_header X-Real-IP $remote_addr;
213213
}
214-
214+
215215
location /nl2sql/ {
216216
proxy_pass http://backend-server:8080;
217217
proxy_set_header Host $host;
@@ -258,13 +258,15 @@ server {
258258
- **语义模型配置页面**: 在 `src/views/SemanticModel.vue` 中设置 `useMockData = true`
259259

260260
模拟数据模式下：
261+
261262
- 所有 CRUD 操作使用本地模拟数据
262263
- 模拟网络延迟效果
263264
- 无需启动后端服务即可测试界面功能
264265

265266
### 切换到生产模式
266267

267268
当后端服务可用时：
269+
268270
1. 确保后端服务运行在 `http://localhost:8065`
269271
2. 将相应页面中的 `useMockData` 设置为 `false`
270272
3. 重新启动开发服务器

‎spring-ai-alibaba-data-agent-frontend/index.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,20 @@
1313
See the License for the specific language governing permissions and
1414
limitations under the License.
1515
-->
16-
<!DOCTYPE html>
16+
<!doctype html>
1717
<html lang="zh-CN">
1818
<head>
1919
<meta charset="UTF-8" />
2020
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2121
<title>Spring AI Alibaba Data Agent Web UI</title>
22-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
23-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css">
22+
<link
23+
rel="stylesheet"
24+
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
25+
/>
26+
<link
27+
rel="stylesheet"
28+
href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css"
29+
/>
2430
</head>
2531
<body>
2632
<div id="app"></div>

‎spring-ai-alibaba-data-agent-frontend/knip.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "https://unpkg.com/knip@4/schema.json",
3+
"entry": ["src/main.js", "src/**/*.vue", "vite.config.js"],
4+
"project": ["src/**/*.{js,ts,vue}"],
5+
"ignore": ["**/*.d.ts"],
6+
"ignoreDependencies": ["@vitejs/plugin-vue", "vite"]
7+
}

0 commit comments

Comments
 (0)