# 前端项目 - 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` 包含树数据、日志、配置等接口

## 安装和运行

### 开发环境
```bash
# 进入web目录
cd svc-code/web

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

# 启动开发服务器
npm run dev
```
开发服务器运行在 `http://localhost:3000`，API请求代理到 `http://localhost:8787`

### 生产构建
```bash
# 构建前端
npm run build

# 构建产物输出到 web/dist 目录
```
构建完成后，可以使用以下方式提供前端服务：

## 集成到Go服务

### 方式1：使用嵌入（推荐）
1. 构建前端：`cd web && npm run build`
2. 集成 `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调用代码已注释。例如：

```typescript
// 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: [...] }
  ]
}
```

## 开发说明

1. **添加新页面**：
   - 在 `src/views/` 下创建目录
   - 在 `src/router/index.ts` 中添加路由
   - 在 `src/App.vue` 的菜单中添加对应项

2. **连接后端API**：
   - 在 `src/api/` 下创建对应模块
   - 取消注释API调用代码
   - 根据后端响应格式调整接口

3. **样式自定义**：
   - 全局样式：`src/styles/index.scss`
   - 组件样式：使用 `<style scoped>`

## 注意事项

1. **依赖安装**：如果 `npm install` 失败，可以尝试：
   ```bash
   npm cache clean --force
   npm install --registry=https://registry.npmjs.org
   ```

2. **Markdown编辑器**：当前使用了基础版本，如需完整功能需安装插件：
   ```bash
   npm install @kangc/v-md-editor@2.3.17
   ```

3. **Go嵌入**：确保 `web/dist` 目录存在且包含构建产物

4. **API代理**：开发时Vite将 `/api` 请求代理到 `http://localhost:8787`

## 后续开发建议

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

## 文件清单

已创建的主要文件：
- 配置文件：`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