跳到主要内容

前端架构：SayClaw Admin Portal

技术栈​

层技术
框架Soybean Admin
语言Vue 3 + TypeScript
构建Vite + pnpm
样式UnoCSS（原子类，Web/H5 共用）
路由elegant-router（自动路由）
状态Pinia

多端架构​

Web（PC 端）和 H5（移动端）同一个项目，数据层完全共用，视图层目录分开。

apps/sayclaw-admin/
└── src/
    ├── service/
    │   └── api/              # ✅ 共用：所有后端 API 调用
    │       ├── auth.ts       #    登录、Google OAuth、JWT
    │       ├── servers.ts    #    服务器 & 容器
    │       ├── instances.ts  #    OpenClaw 实例
    │       └── admin-users.ts#    后台账号 CRUD
    │
    ├── store/                # ✅ 共用：全局状态
    │   ├── auth.ts           #    用户信息、JWT token
    │   ├── servers.ts        #    服务器列表 & 实时状态
    │   └── instances.ts      #    实例列表 & 健康状态
    │
    ├── hooks/                # ✅ 共用：可复用逻辑
    │   ├── useServers.ts
    │   ├── useInstances.ts
    │   └── useAdminUsers.ts
    │
    ├── views/
    │   ├── shared/           # ✅ 共用视图
    │   │   └── login/        #    登录页（账号密码 + Google OAuth）
    │   │
    │   ├── web/              # 💻 PC 端专属视图
    │   │   ├── dashboard/    #    数据总览（完整统计卡片）
    │   │   ├── servers/      #    服务器 & 容器管理（表格 + 操作）
    │   │   ├── instances/    #    实例管理（全功能）
    │   │   └── admin-users/  #    后台账号管理（CRUD）
    │   │
    │   └── h5/               # 📱 H5 端专属视图
    │       ├── home/         #    简洁概览（卡片式）
    │       ├── servers/      #    服务器列表（只读）
    │       └── instances/    #    实例状态查看
    │
    ├── layouts/
    │   ├── web-layout/       # 💻 PC 布局：侧边栏 + 顶栏
    │   └── h5-layout/        # 📱 H5 布局：底部 Tab 导航
    │
    └── router/
        ├── web.ts            # /web/* 路由（PC）
        └── h5.ts             # /h5/* 路由（H5）

路由设计​

端路径前缀布局
PC Web/web/*侧边栏导航
H5 移动/h5/*底部 Tab 导航
共用/auth/*无布局（登录、OAuth Callback）

自动端检测​

用户访问 admin.sayclaw.ai 时，根据 User-Agent 自动跳转：

// router/index.ts
const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent)
router.replace(isMobile ? '/h5/home' : '/web/dashboard')

数据层设计​

所有 API 调用指向 https://api.sayclaw.ai/api/v1，Web 和 H5 共用同一套：

// service/api/instances.ts（Web + H5 共用）
export const getInstances = () => request.get('/instances')
export const getInstanceHealth = () => request.get('/instances/health-check')

// views/web/instances/index.vue（PC 完整表格）
// views/h5/instances/index.vue（H5 简洁卡片）
// —— 都调用同一个 getInstances()

页面功能对照​

功能Web (PC)H5 (移动)
登录✅ 账号密码 + Google OAuth✅ 共用同一页
数据总览✅ 完整统计卡片 + 状态表格✅ 简洁卡片概览
服务器管理✅ 表格 + 容器操作（重启/停止）📋 列表查看（只读）
实例管理✅ 全功能（健康检查、配置）📋 状态卡片查看
后台账号管理✅ 完整 CRUD（新增/删除/停用）暂不做

品牌配置​

// 品牌色
primary: '#5B4FE8'   // SayClaw 深蓝紫

// 标题
appTitle: 'SayClaw 管理后台'

// Logo：暂用文字 Logo

部署​

pnpm build
# dist/ → /var/www/sayclaw-admin/
# Nginx: admin.sayclaw.ai → /var/www/sayclaw-admin/
# SPA fallback: try_files $uri $uri/ /index.html

开发进度​

里程碑状态
目录结构 & 路由规划✅ 已完成
数据层（service + store + hooks）🔄 进行中
Web 登录页（Google OAuth）🔄 进行中
Web Dashboard📋 待开发
Web 服务器管理📋 待开发
Web 实例管理📋 待开发
Web 账号管理📋 待开发
H5 首页 & 实例状态📋 待开发
自动端检测跳转📋 待开发
Build & 生产部署📋 待开发