# 海獭湾 `/work/` 平面模式设计 RAG

## 目标

`/work/` 后续需要支持两种并存体验：

- `3D 模式`
  - 当前默认体验
  - 以在线工作区、人物、空间、触发对象和沉浸式路径为主
- `平面模式`
  - 传统网页体验
  - 以导航、业务入口、任务、智能体、在线成员、文档和操作效率为主

右上角需要有一个清晰的 `SWITCH` 开关，用户可以随时在两种模式间切换。

平面模式不是营销落地页，也不是普通企业官网。它是 `/work/` 3D 在线工作区的同构网页视图：把空间里的区域、对象和交互，映射成更简约、更实用、更高效的二维工作台。

## 用户意图

用户明确希望同一个站点同时满足：

- 简约实用性
  - 快速理解平台
  - 快速进入任务、发单、提现、文档、智能体
  - 不需要一定进入 3D 场景
- 创意趣味性
  - 保留 3D 在线工作区
  - 保留空间感、人物感、可漫游感
  - 允许用户按心情和设备切换

因此平面模式应该偏“在线公司运行台”，而不是“3D 场景说明页”。

## 当前 3D 内容梳理

活动地图来自：

- `GET /office_game_map_api?action=load-active`

当前地图由多个 `placement` 组成。主要区域如下。

### 1. 公司大门

3D 语义：

- 访客入口
- 门禁预览
- 平台品牌第一印象
- 预约终端、开发日志、企业铭牌等对象

可映射平面模块：

- 首页 Hero / 入口区
- 平台一句话说明
- 登录 / 注册 / 进入在线工作区
- 赚钱入口
- 平台说明文档
- 开发日志
- 预约入口

当前 open_url 对象：

- `预约终端机` -> `https://jobcdn.cn/booking/`
- `开发日志看板` -> `https://jobcdn.cn/dev_log/`
- `开发日志` -> `https://jobcdn.cn/dev_log/`
- `预约终端机` -> `https://jobcdn.cn/booking`

### 2. 默认-会议室

3D 语义：

- 协作讨论空间
- 会议桌、植物、复印机、书籍等办公对象

可映射平面模块：

- 协作说明
- 项目讨论入口
- 团队协作状态
- 最近会议 / 协作记录占位

当前没有直接 open_url 对象，平面模式不必为它做强入口，只作为“协作空间”模块出现。

### 3. 默认-开放办公区-01

3D 语义：

- 人类办公区
- 多个工位、电脑、工牌、本子、座椅
- 真人成员和 AI 协作的日常执行空间

可映射平面模块：

- 在线成员 / 工作状态
- 我的账号与个人形象
- 当前任务执行区
- 快捷入口：任务列表、我的接单、提交结果、收益

当前 open_url 对象较少，但对象名称已经明确表达“工位 / 电脑 / 工牌”，适合转成工作台中的“成员与任务执行”区域。

### 4. 服务器阵列

3D 语义：

- 智能体仓库
- 服务器、面板、管理屏
- AI agent 管理和启用入口

可映射平面模块：

- 智能体中心
- 已有智能体列表
- 启用 / 管理 / 配置智能体
- 智能体连接、状态与能力摘要

当前 open_url 对象：

- `智能体管理面板` -> `https://jobcdn.cn/agent_terminal/index.php?agent=receptionist`

注意：公开文案和最终 UI 应继续使用无后缀路由；该旧 URL 是活动地图存量数据，平面模式展示时应规范化为 `/agent_terminal/` 或后续新路由。

### 5. 默认-任务发布大厅

3D 语义：

- 任务发布入口
- 发单客服 / 任务发布终端
- 任务相关操作空间

可映射平面模块：

- 发单入口
- 公开任务中心
- 任务发布流程
- 任务发布终端
- 任务质量提示

当前 open_url 对象：

- `任务发布客服 nemo` -> `https://jobcdn.cn/task_publish_terminal/`

### 6. 人类办公区-入口

3D 语义：

- 通往人类办公区的入口
- 电梯按钮、导航、玻璃墙、门牌

可映射平面模块：

- 站内导航区
- 在线工作区分区导航
- “进入人类办公区 / 进入任务大厅 / 进入智能体仓库”的二维导航地图

### 7. 入口提示

3D 语义：

- `入口提示-人类办公区`
- `入口提示-任务大厅`

可映射平面模块：

- 页面中的方向卡片
- 当前区域提示
- 快速跳转按钮

## 平面模式信息架构

平面模式建议使用单页应用式结构，分成以下区域。

### 顶部栏

必须包含：

- 左侧品牌：`海獭湾`
- 中部导航：
  - 工作台
  - 任务
  - 智能体
  - 成员
  - 文档
  - 提现
- 右侧：
  - 当前登录状态 / 工牌
  - `SWITCH` 模式切换

`SWITCH` 状态：

- `3D`
  - 回到当前 Three.js 在线工作区
- `平面`
  - 显示传统网页工作台

文案建议：

- 不使用“游戏”
- 不使用“大厅”
- 3D 模式可叫 `3D 工作区`
- 平面模式可叫 `平面工作台`

### 首屏工作台

首屏要回答：

- 这是什么
- 我现在能做什么
- 我应该从哪里开始

模块：

- 主标题：`AI 协同任务系统`
- 副标题：`在同一在线平台上，让真人与 AI 协作完成任务、交付结果，并把能力转化为持续价值。`
- 主要按钮：
  - `进入在线工作区`
  - `查看公开任务`
  - `发布任务`
- 状态摘要：
  - 当前任务数
  - 当前开放任务
  - 可提现状态
  - 在线成员 / 智能体状态

### 区域映射导航

把 3D 区域映射为平面卡片或分栏：

- 公司大门 -> 入口与信任
- 开放办公区 -> 我的工作
- 任务发布大厅 -> 发单与任务
- 服务器阵列 -> 智能体
- 会议室 -> 协作
- 开发日志 / 预约终端 -> 平台动态与预约

每个区域卡片包含：

- 区域名称
- 一句业务解释
- 3D 来源对象数量 / 可操作入口数量
- 平面 CTA
- 可选 `在 3D 中查看` 小按钮

### 任务与收益区

平面模式必须比 3D 模式更高效：

- 任务摘要
- 公开任务入口
- 我的接单
- 提交结果
- 收益 / 提现入口
- 发单入口

可链接：

- `/tasks/`
- `/tasks/publish`
- `/tasks/agent_api?action=manifest`
- `/company/api?action=session&compact=1&intent=onboard_only`（只入职）
- `/company/api?action=next`（开始工作）
- `/withdrawals/`

### 智能体区

映射服务器阵列和智能体仓库：

- 我的智能体
- 智能体连接状态
- 启用智能体
- 管理智能体
- 智能体 API / curl 入口

可链接：

- `/agent_terminal/`
- `/work/assistant_agent_api`
- `/company/api?action=agent-evolution&compact=1`

### 文档与信任区

平面模式要更适合真人和 AI 都理解：

- 平台说明文档
- 赚钱入口
- 信任中心
- 提现规则
- API / curl 快速开始
- MCP 入口

可链接：

- `/api-center/`
- `/company/api?action=earn-money&compact=1`
- `/trust/`
- `/withdrawals/`
- `/mcp/`

## Stitch 设计方向

### 设备

先做 `Desktop 1280 x 1024`。

原因：

- `/work/` 当前核心体验偏桌面
- 右上角 SWITCH 更容易在桌面表达
- 平面模式第一版应验证信息架构，而不是先追移动端

后续再扩展：

- Tablet
- Mobile

### 视觉方向

关键词：

- 黑白高级
- 在线公司运行台
- 简约但不是营销页
- 传统网页效率
- 保留一丝 3D 空间映射感

不要：

- 不要做成传统公司官网
- 不要做成游戏登录页
- 不要大 Hero 占满一屏
- 不要过多装饰卡片
- 不要使用紫蓝大渐变、霓虹球、抽象背景

### 推荐布局

桌面首版：

- 顶部固定导航，高度约 64px
- 右上角 SWITCH：`平面工作台 / 3D 工作区`
- 页面主体两栏：
  - 左侧：当前工作状态 + 区域导航
  - 右侧：任务、智能体、文档与收益
- 中间保留一个“空间映射条”
  - 用简化平面图或区域列表表达 3D 空间映射
  - 不做真实地图编辑器

### 核心组件

- Mode switch
- Status strip
- Zone mapping cards
- Task action list
- Agent panel
- Docs/trust shortcuts
- Activity/development log strip

### 交互状态

Stitch 需要表达：

- 当前在 `平面工作台`
- SWITCH 可切回 `3D 工作区`
- 点击 3D 工作区后回到当前 `/work/` canvas
- 点击平面入口时打开对应页面或面板
- 登录前显示登录 / 注册
- 登录后显示工牌、任务、智能体和收益状态

## 给 Stitch 的提示词

请基于下面提示生成桌面设计：

```text
为海獭湾 `/work/` 设计一个 Desktop 1280x1024 的“平面工作台”网页界面。它和现有 3D 在线工作区并存，右上角必须有清晰的 SWITCH 开关，可在“平面工作台”和“3D 工作区”之间切换。

产品定位：海獭湾是一个真人与 AI 协作完成任务、交付结果并获得收益的纯在线公司平台。当前默认体验是 3D 在线工作区，里面有公司大门、开放办公区、服务器阵列、任务发布大厅、会议室、开发日志看板、预约终端、智能体管理面板和任务发布客服。平面模式要把这些 3D 区域映射成传统网页模块，让用户不进入 3D 也能快速完成任务、发单、管理智能体、读文档、查看收益和提现。

设计目标：简约、实用、高级、传统网页效率，但保留“这是 3D 工作区的平面映射”的感觉。不要做营销官网，不要做游戏页，不要大面积英雄海报，不要装饰性渐变背景。界面应像一个真实在线公司的工作台：密度高、扫描快、操作直接。

必备模块：
1. 顶部导航：海獭湾品牌、工作台、任务、智能体、成员、文档、提现。
2. 右上角 SWITCH：显示“平面工作台 / 3D 工作区”，当前状态为平面工作台。
3. 首屏主标题：AI 协同任务系统。
4. 副标题：在同一在线平台上，让真人与 AI 协作完成任务、交付结果，并把能力转化为持续价值。
5. 状态摘要：当前开放任务、任务类目、收益/提现状态、在线成员/智能体。
6. 区域映射：公司大门=入口与信任；开放办公区=我的工作；任务发布大厅=发单与任务；服务器阵列=智能体；会议室=协作；开发日志/预约终端=平台动态。
7. 任务操作区：查看公开任务、发布任务、接单、提交结果、查看收益。
8. 智能体区：我的智能体、启用、管理、API/curl 入口。
9. 文档与信任区：平台说明文档、赚钱入口、信任中心、提现规则、MCP。

视觉风格：黑白极简，Inter/PingFang SC，背景浅色，使用大面积留白和清晰网格；卡片圆角不超过 8px；用灰阶和间距分层，少用边框，禁止彩色装饰。按钮必须像真实产品按钮，图标可用 lucide 风格。所有文字必须适合中文业务场景，不使用“游戏/大厅/召唤/漫游”等词。3D 模式按钮叫“3D 工作区”，平面模式叫“平面工作台”。
```

## 实现策略建议

第一阶段只做前端视图切换：

- `/work/` 保持当前 3D 默认
- 新增平面模式 DOM 容器
- 右上角新增 SWITCH
- `localStorage` 保存用户上次模式
- URL 可支持 `?mode=flat` 和 `?mode=3d`

第二阶段接入真实数据：

- 任务摘要读取 `/tasks/api?action=summary`
- 登录状态读取 `/auth/api?action=current`
- 只入职场景下一步读取 `/company/api?action=session&compact=1&intent=onboard_only` 或 `/company/api?action=next&intent=onboard_only`
- 明确开始工作时再读取 `/company/api?action=next`
- 活动地图区域读取 `/office_game_map_api?action=load-active`
- 智能体列表读取 `/work/assistant_agent_api`

第三阶段做双向映射：

- 平面区域卡片点击 `在 3D 中查看`
- 3D 中触发对象点击可打开平面对应模块
- 保持同一个登录态、同一套任务和智能体数据

## 最小可交付版本

MVP 只需要：

1. 右上角 SWITCH
2. 默认 3D 模式
3. 平面模式首屏工作台
4. 区域映射卡片
5. 任务 / 智能体 / 文档 / 提现快捷入口
6. 记住上次模式

不需要第一版就实现：

- 完整移动端
- 完整地图编辑
- 纯服务端移动控制
- 复杂实时成员地图
- 3D 与平面精确坐标同步