# svc-configure 前端管理界面

基于 Vue 3 + Element Plus 的前端管理界面，用于管理配置服务的租户、角色、用户、项目等资源。

## 🚀 快速开始

### 环境要求
- Node.js 18+
- npm 9+
- Go 1.25+

### 安装依赖
```bash
cd svc-configure/web
npm install
```

### 开发运行
```bash
npm run dev
```
访问 `http://localhost:3001`

### 生产构建
```bash
npm run build:prod
```

### 集成到Go服务
```bash
cd svc-configure
go build
```

## 📁 项目结构

```
src/
├── api/                    # API模块（35个端点）
├── views/                 # 页面组件（9个管理页面）
├── components/            # 公共组件
├── store/                 # 状态管理（Pinia）
├── styles/                # 全局样式
├── App.vue               # 根组件
├── main.ts               # 应用入口
└── router.ts             # 路由配置（临时位置）
```

## 🔧 权限问题修复

如果遇到文件权限问题，执行以下步骤：

### 1. 修复router目录权限
```bash
# 删除旧的router目录（如果存在）
rm -rf svc-configure/web/src/router

# 创建新的router目录
mkdir -p svc-configure/web/src/router

# 将router.ts移动到正确位置
mv svc-configure/web/src/router.ts svc-configure/web/src/router/index.ts
```

### 2. 修复main.ts导入
确保 `svc-configure/web/src/main.ts` 包含以下导入：
```typescript
import router from './router'  // 而不是 './router.ts'
```

### 3. 构建前端
```bash
cd svc-configure/web
npm run build:prod
```

### 4. 构建Go服务
```bash
cd svc-configure
go build
```

## 📋 功能清单

### ✅ 已完成
- **登录系统**：用户登录/注册，Token认证
- **仪表盘**：系统统计，快速操作，最近活动
- **租户管理**：创建、编辑、删除、列表
- **角色管理**：创建、编辑、删除、列表
- **用户管理**：用户注册、登录、邀请码、租户管理员
- **项目管理**：创建、编辑、删除、列表
- **Agent管理**：Agent配置，JSON编辑器，项目关联
- **Skill管理**：Skill配置，类型筛选，项目关联
- **配置管理**：启动配置、元数据初始化、Token管理

### 🔄 API支持（35个端点）
- 租户管理API (5个)
- 角色管理API (5个)
- 用户管理API (5个)
- 项目管理API (5个)
- 项目Agent API (5个)
- 项目Skill API (5个)
- 启动配置API (5个)

## 🎨 界面特性

- **响应式布局**：侧边栏折叠，适配各种屏幕
- **操作便捷**：表格搜索、筛选、分页
- **表单验证**：实时验证，错误提示
- **JSON编辑器**：语法高亮，格式验证
- **权限控制**：路由守卫，Token认证
- **错误处理**：统一错误提示，友好界面

## 🔐 认证机制

### 1. Token认证
- 用户登录后获得token
- 自动添加到请求头
- 过期自动跳转登录

### 2. Basic认证
- 使用admin/123（配置文件）
- 用于管理员操作
- 后端自动处理

## 🚨 常见问题

### 1. 构建失败
```bash
# 清除缓存
rm -rf node_modules package-lock.json
npm install
npm run build
```

### 2. API请求失败
- 检查后端服务是否运行（端口8080）
- 检查代理配置（vite.config.ts）
- 检查网络连接

### 3. 权限问题
```bash
# 清除macOS扩展属性
xattr -rc svc-configure/

# 修改权限
chmod -R 755 svc-configure/
```

### 4. Go构建错误
```bash
# 检查dist目录
ls -la svc-configure/web/dist/

# 重新构建前端
cd svc-configure/web && npm run build:prod
```

## 📊 页面说明

### 登录页面 (`/login`)
- 用户登录表单
- 注册功能（需要邀请码）
- 未登录自动跳转

### 仪表盘 (`/dashboard`)
- 系统统计数据
- 快速操作按钮
- 最近活动记录
- 系统说明文档

### 管理页面
- **列表视图**：表格展示、搜索、分页、操作
- **表单视图**：创建/编辑资源、实时验证
- **详情视图**：查看详细信息、相关操作

## 🛠️ 开发指南

### 添加新页面
1. 在 `src/views` 创建Vue组件
2. 在 `src/router.ts` 添加路由配置
3. 在 `src/api` 添加对应API模块
4. 在侧边栏添加菜单项（Layout.vue）

### API开发
```typescript
// 1. 在types.ts定义类型
export interface Resource {
  id: string
  name: string
  // ...
}

// 2. 创建API模块
export const resourceApi = {
  create: async (data: ResourceRequest) => request.post('/create/resource', data),
  // ...
}

// 3. 在页面中调用
const result = await resourceApi.create(formData)
```

### 样式规范
- 使用SCSS编写样式
- 遵循Element Plus设计规范
- 使用CSS变量保持一致性

## 📈 性能优化

### 已实施
- 组件懒加载
- API请求缓存
- 图片资源优化
- 代码分割

### 计划中
- 服务端渲染（SSR）
- CDN加速
- 数据库查询优化

## 🔍 测试

### 单元测试
```bash
npm run test:unit
```

### 端到端测试
```bash
npm run test:e2e
```

### API测试
访问 `http://localhost:3001/test-api.html`

## 📝 部署

### 开发环境
```bash
npm run dev
```

### 生产环境
```bash
npm run build:prod
go build -o svc-configure
./svc-configure
```

### Docker部署
```dockerfile
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build:prod

FROM golang:1.25-alpine
WORKDIR /app
COPY --from=builder /app/dist ./web/dist
COPY go.mod go.sum ./
RUN go mod download
COPY . .
RUN go build -o svc-configure
CMD ["./svc-configure"]
```

## 🤝 贡献指南

1. Fork仓库
2. 创建特性分支
3. 提交更改
4. 推送到分支
5. 创建Pull Request

## 📄 许可证

项目遵循公司内部许可证。

## 🆘 支持

- 问题反馈：创建Issue
- 功能请求：提交Feature Request
- 紧急问题：联系系统管理员