跳转至

前端应用总览

本仓库包含 三套主要前端（infinitecanvas / agent-system / admin-system），另有 chat 与 demo。本文说明职责划分与公共约定；C 端前台细节见 Infinite Canvas 前台，本地开发见 前端开发 Runbook。

应用对照

应用 源码目录 Dev 端口（以各 app vite.config.ts 为准） K3s 主机 ACK 主机 面向角色
infinitecanvas src/infinitecanvas/ 5173 canvas.localhost canvas.harness.local 终端用户（图现 AI 前台）
agent-system src/agent-system/ 5174 agent.localhost agent.harness.local 代理商
admin-system src/admin-system/ 5175 admin.localhost admin.harness.local 运营 / Canvas Admin
chat src/chat/ 5178 — chat.tuxianai.com 图现 Chat（对接 Hermes 流式 API）
demo src/demo/ 5177 — — C 端 Prompt 生图体验

端口口径

以各前端的 vite.config.ts 为准（见上表）。harness.yaml 服务注册表与之一致；若发现不一致以本表为准。

职责边界

终端用户 ──► infinitecanvas (canvas.*) ──► backend /api + storage
代理商   ──► agent-system   (agent.*)  ──► backend /api
运营     ──► admin-system   (admin.*)  ──► backend /api/admin
  • infinitecanvas：营销首页、无限二创画布、AI 工作区生图、资产库、账号中心。HTTP 经 shared/api/backendHttpClient.ts。
  • agent-system：代理商控制台（客户、链接、结算等）。须遵守 features/ / shared/ 边界，HTTP 经 shared/api/httpClient.ts。
  • admin-system：品类 / Prompt / 爆款 / 用户与计费等运营配置。边界规则同 agent。设计细节见 产品文档 · Admin。
  • chat：图现 Chat 前端，对接 Hermes 流式 API，部署单独见 Hermes/Chat Runbook。

公共约定

agent / admin（dependency-cruiser）

  1. features/ 模块之间禁止互相 import
  2. shared/ 不得依赖 features/
  3. HTTP 请求必须经 src/<app>/src/shared/api/httpClient.ts
  4. 页面 / 组件禁止直接使用 fetch 或 axios

验证：make agent-check / make admin-check（含 pnpm arch）。

infinitecanvas

  • 采用 pages/ + components/ + shared/api/ + context/，无 features 分层与 dependency-cruiser
  • 约定：业务请求走 src/infinitecanvas/src/shared/api/*，解析 backend { code, message, data } 包络
  • 验证：make canvas-check（typecheck + build + test）

API 与 Ingress（简表）

主机 静态资源 API 典型路由
canvas.harness.local infinitecanvas /api → backend；/api/storage → storage
agent.harness.local agent-system /api → backend
admin.harness.local admin-system /api → backend
upload.harness.local — storage 微服务

本地 Vite：agent / admin / canvas 默认 proxy /api → localhost:8001；仅排障时可设 VITE_BACKEND_API_URL 直连远端（需 CORS）。详见 前端开发 Runbook。

相关文档