oryxos: Skill for Claude Code

OryxOS 管理台前端生成规范

本 skill 是 OryxOS Web 管理台（/admin）前端的唯一风格与工程口径来源。生成或扩展管理台页面时读它、照它做，保证每次产出跟官网首页同一个气质、可复现、能被 Spring 直接托管。

何时用 / 不用

• 用：生成整套只读管理台（26 节）、给管理台加页（30 节的"Agent 管理"页：列表 + 新建表单 + 编辑/删除）、调整管理台样式使其与首页一致。
• 不用：后端 REST（那是 spec-kit 的 Java 管道）、认证鉴权（核心阶段内网假设）、脱离下方 token 的自创配色。

一、设计 token（唯一风格来源，值取自 website/.vitepress/theme/custom.css，一个字别自创）

深色主题 + 橙色强调，跟首页完全一致。生成的 Vue 工程里放一份 src/styles/tokens.css 并全局引入：

:root {
  /* 背景层次 */
  --bg:        #000000;   /* 页面底 */
  --bg-soft:   #111111;   /* 卡片 / 面板 */
  --bg-mute:   #1a1a1a;   /* 悬浮 / 选中块 */
  --border:    #222222;   /* 分隔线 / 边框 */
  /* 主色（橙）——仅用于强调：激活项、链接、数值高亮、主按钮。不铺大面积 */
  --brand-1:   #c2550a;   /* 深 */
  --brand-2:   #ea6a00;   /* hover / 强调 */
  --brand:     #f97316;   /* 主 */
  --brand-soft: rgba(249, 115, 22, 0.12);
  /* 文字 */
  --text-1:    #f5f5f5;   /* 主 */
  --text-2:    #a3a3a3;   /* 次 */
  --text-3:    #666666;   /* 弱 / 占位 */
  /* 状态 */
  --ok:        #22c55e;   /* 成功 */
  --err:       #ef4444;   /* 失败 */
  --warn:      #f97316;   /* 警告（复用橙） */
  /* 字体 */
  --font-base: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  /* 形状 */
  --radius:    5px;       /* 小圆角，克制 */
}

• 正文用 --font-base；ID / session_id / JSON / cron / token 数这类机读值一律 --font-mono。
• 主色只点睛，不做大色块背景；整体克制、留白足。

二、工程约定（决定它能不能被 Spring 托管）

• 技术栈：Vue 3 + Vite（跟 website/ 同生态；管理台是 app，用普通 Vue SPA，不用 VitePress）。源码在 oryxos-web/src/main/frontend/。
• base 与产物：vite.config 设 base: '/admin/'、build.outDir 指到 ../resources/static/admin（即 oryxos-web/src/main/resources/static/admin/），资源用相对路径。
• SPA 路径回落：Spring 对 /admin/** 未命中路径回落 admin/index.html；GET /api/v1/** 不受影响（后端接线，提醒 plan 处理）。
• 数据来源：只调 /api/v1/**。只读页调 GET（/sessions、/profiles、/tools、/memory、/info）；管理页（30 节）调 POST/PUT/DELETE /agents。开发期 npm run dev 起热更、代理 /api 到 :8080；发布形态是"打进 fat JAR、一个进程托管一切"。
• 错误展示：后端统一 ErrorBody（errorCode/message/timestamp）；页面出错就把 message 显示出来，不吞、不弹裸堆栈。