go-svc-configure/web

svc-configure 前端管理界面

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

🚀 快速开始

环境要求

• Node.js 18+
• npm 9+
• Go 1.25+

安装依赖

cd svc-configure/web
npm install

开发运行

npm run dev

访问 http://localhost:3001

生产构建

npm run build:prod

集成到Go服务

cd svc-configure
go build

📁 项目结构

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

🔧 权限问题修复

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

1. 修复router目录权限

# 删除旧的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 包含以下导入：

import router from './router'  // 而不是 './router.ts'

3. 构建前端

cd svc-configure/web
npm run build:prod

4. 构建Go服务

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. 构建失败

# 清除缓存
rm -rf node_modules package-lock.json
npm install
npm run build

2. API请求失败

• 检查后端服务是否运行（端口8080）
• 检查代理配置（vite.config.ts）
• 检查网络连接

3. 权限问题

# 清除macOS扩展属性
xattr -rc svc-configure/

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

4. Go构建错误

# 检查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开发

// 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加速
• 数据库查询优化

🔍 测试

单元测试

npm run test:unit

端到端测试

npm run test:e2e

API测试

访问 http://localhost:3001/test-api.html

📝 部署

开发环境

npm run dev

生产环境

npm run build:prod
go build -o svc-configure
./svc-configure

Docker部署

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
• 紧急问题：联系系统管理员