暫無描述

前端项目 - Vue 3 + Element Plus + Vite

项目结构

svc-code/web/
├── index.html              # Vite入口文件（替换原有）
├── package.json           # 依赖配置
├── vite.config.ts         # Vite配置
├── tsconfig.json          # TypeScript配置
├── src/
│   ├── App.vue            # 主应用（含顶部工具栏）
│   ├── main.ts            # 应用入口
│   ├── views/             # 页面视图
│   │   ├── init/          # 初始化页面（完整实现）
│   │   ├── replenish/     # 补货（占位）
│   │   ├── transfer/      # 调货（占位）
│   │   ├── allocation/    # 配货（占位）
│   │   ├── distribution/  # 分货（占位）
│   │   └── report/        # 报表（占位）
│   ├── components/        # 组件
│   ├── router/            # 路由配置
│   ├── api/               # API接口（静态数据）
│   ├── styles/            # 全局样式
│   └── utils/             # 工具函数
├── public/                # 静态资源
└── dist/                  # 构建输出（用于Go嵌入）

功能特性

1. 顶部工具栏

Element Plus Menu组件
6个菜单项：初始化、补货、调货、配货、分货、报表
路由导航，当前高亮显示

2. 初始化页面（唯一实现）

布局结构：

┌─────────────────────────────────────────────┐
│ 顶部工具栏（App.vue）                         │
├───────────────┬─────────────────────────────┤
│ 左侧树        │ 右侧（Splitpanes垂直分割）     │
│               ├─────────────────────────────┤
│ 可拖动分割线  │ 上部：Tabs区域                 │
│               │   • 日志（文本显示）           │
│               │   • Agent（Markdown编辑器）   │
│               │   • Skills（Markdown编辑器）  │
│               │   • Data（SQL/Markdown高亮）  │
│               ├─────────────────────────────┤
│               │ 下部：可拖拽高度的多行输入框   │
│               │   • 支持换行                 │
│               │   • 可拖拽调整高度           │
└───────────────┴─────────────────────────────┘

组件细节：

左侧树：Element Plus Tree组件，美观样式，静态数据
可拖动分割线：使用splitpanes组件实现左右拖动
Tabs区域：Element Plus Tabs组件，4个标签页
下部输入框：可拖拽调整高度的textarea

3. API层

所有API调用代码已注释，返回静态模拟数据
提供完整的接口定义，便于后续集成Go后端
示例：api/init.ts 包含树数据、日志、配置等接口

安装和运行

开发环境

# 进入web目录
cd svc-code/web

# 安装依赖（可能需要多次尝试，网络问题）
npm install

# 启动开发服务器
npm run dev

开发服务器运行在 http://localhost:3000，API请求代理到 http://localhost:8787

生产构建

# 构建前端
npm run build

# 构建产物输出到 web/dist 目录

构建完成后，可以使用以下方式提供前端服务：

集成到Go服务

方式1：使用嵌入（推荐）

构建前端：cd web && npm run build
集成 embed_frontend.go 到 main.go： ```go // 导入embed包（如果还没有） // import “embed”

// 替换现有的静态文件服务（大约第89-90行） // 原来的： // fs := http.FileServer(http.Dir(“web”)) // webServcie.GetRouter().Handle(“/”, fs)

// 修改为： // frontendHandler := ServeFrontend() // webServcie.GetRouter().Handle(“/”, frontendHandler)

3. 重新编译Go程序

### 方式2：使用文件系统
```go
// 修改main.go中的静态文件服务
fs := http.FileServer(http.Dir("web/dist"))
webServcie.GetRouter().Handle("/", fs)

技术栈

Vue 3 + Composition API + TypeScript
Element Plus - UI组件库
Vite - 构建工具
Vue Router - 路由管理
splitpanes - 可拖动分割线
@kangc/v-md-editor - Markdown编辑器
highlight.js - 代码高亮
axios - HTTP客户端

目录说明

页面目录

src/views/init/ - 初始化页面（完整实现）
src/views/replenish/ - 补货页面（占位）
src/views/transfer/ - 调货页面（占位）
src/views/allocation/ - 配货页面（占位）
src/views/distribution/ - 分货页面（占位）
src/views/report/ - 报表页面（占位）

组件

src/components/VMarkdownEditor.vue - Markdown编辑器组件
src/components/VMarkdownPreview.vue - Markdown预览组件

API层

src/api/index.ts - axios配置和拦截器
src/api/init.ts - 初始化相关API（静态数据）

静态数据

所有展示数据均为前端模拟，API调用代码已注释。例如：

// api/init.ts
export const getTreeData = async (): Promise<TreeNode[]> => {
  // TODO: 调用后端API
  // const response = await request.get('/api/init/tree')
  // return response.data
  
  // 静态数据
  return [
    { id: '1', label: '数据库', icon: 'DataBoard', children: [...] }
  ]
}

开发说明

添加新页面：
- 在 src/views/ 下创建目录
- 在 src/router/index.ts 中添加路由
- 在 src/App.vue 的菜单中添加对应项
连接后端API：
- 在 src/api/ 下创建对应模块
- 取消注释API调用代码
- 根据后端响应格式调整接口
样式自定义：
- 全局样式：src/styles/index.scss
- 组件样式：使用 <style scoped>

注意事项

依赖安装：如果 npm install 失败，可以尝试：

npm cache clean --force
npm install --registry=https://registry.npmjs.org

Markdown编辑器：当前使用了基础版本，如需完整功能需安装插件：
```
npm install @kangc/v-md-editor@2.3.17
```
Go嵌入：确保 web/dist 目录存在且包含构建产物
API代理：开发时Vite将 /api 请求代理到 http://localhost:8787

后续开发建议

实现剩余页面：按照初始化页面的模式实现其他页面
连接真实API：取消注释API调用，连接Go后端
状态管理：根据需要添加Pinia进行状态管理
国际化：添加i18n支持多语言
主题切换：实现深色/浅色主题切换

文件清单

已创建的主要文件：

配置文件：package.json, vite.config.ts, tsconfig.json
入口文件：index.html, main.ts, App.vue
页面文件：views/init/Index.vue 等6个页面
组件文件：components/VMarkdownEditor.vue, components/VMarkdownPreview.vue
API文件：api/index.ts, api/init.ts
样式文件：styles/index.scss
路由文件：router/index.ts
Go嵌入文件：../embed_frontend.go
说明文件：本README

README-frontend.md 7.3KB 歷史記錄 原始文件