deerflow-code/parallel-agents-vue-offline-pack/docs/05-嵌入与深色样式.md

测试用例 · 嵌入与深色样式

覆盖：接口地址走配置文件、组件库构建产物、嵌入其它 Vue 项目、放进抽屉/弹窗自适应、深色成色、 不污染宿主全局样式。

---

PA-EMBED-01 · 接口地址走配置文件（P0）

操作步骤

1. 不传 :base-url，只改 src/config.ts 的 DEFAULT_BASE_URL 为目标后端地址。
2. 运行面板触发请求。

预期结果

• 请求打到配置文件里的地址。
• 传 :base-url prop 时优先用 prop（覆盖配置默认）。
• dev 下设 VITE_PA_BASE_URL 环境变量也能覆盖默认。

---

PA-EMBED-02 · 组件库构建产物（P0）

操作步骤

pnpm build:lib

预期结果

• dist/ 产出：parallel-agents-vue.js（ESM）、parallel-agents-vue.umd.cjs（UMD）、parallel-agents-vue.css。
• vue 被 external（不打进库，由宿主提供）。
• 构建无报错、无「named + default exports」警告。

---

PA-EMBED-03 · 嵌入其它 Vue 项目（P0）

操作步骤

1. 在另一个 Vue3 项目里：

   import { ParallelAgentsPanel } from "parallel-agents-vue";
   import "parallel-agents-vue/style.css";
   

2. 模板中放置：

   <ParallelAgentsPanel :username="user" :agents="agents" />
   

预期结果

• 组件正常渲染、可交互（深色面板，与 demo 一致）。
• 只需 :username + :agents 两个 prop 即可跑起来（接口地址走配置）。
• 也支持 app.use(ParallelAgentsVue) 全局注册后用 <ParallelAgentsPanel/>。

---

PA-EMBED-04 · 放进抽屉 / 弹窗自适应（P0）

操作步骤

1. 把面板放进宿主的抽屉 / 对话框，外层给一个固定高度容器：

   <YourDrawer v-model="open">
     <div style="height: 80vh"><ParallelAgentsPanel :username="user" :agents="agents" /></div>
   </YourDrawer>
   

2. 改变容器尺寸 / 视口大小。

预期结果

• 面板充满容器（根元素 h-full w-full flex flex-col min-h-0），不溢出、不塌缩。
• 会话区内部独立滚动，输入区与席位条固定不被挤掉。
• 窄容器下消息列表正常显示、内部滚动，不溢出。

---

PA-EMBED-05 · 深色成色自带、与宿主主题无关（P1）

操作步骤

1. 分别在浅色宿主页和深色宿主页里嵌入面板。

预期结果

• 面板始终是深蓝深色（自带 --pa-* token，作用域在 .parallel-agents），不随宿主明暗变化。
• 文案、徽标、步骤卡、并行列底、滚动条等观感与圆桌 Step2 深色一致。
• 传 :dark="false" 时按实现切换（如未实现浅色则保持深色，至少不报错）。

---

PA-EMBED-06 · 不污染宿主全局样式（P0）

目的：核对未引入 Tailwind preflight（不重置宿主全局标签样式）。

操作步骤

1. 在一个有自己样式的宿主页里嵌入面板（页面有 h1/p/button/ul 等默认样式）。

预期结果

• 嵌入后，宿主页面自身的 h1/p/button/列表/边距 等样式不被改变（没有被 Tailwind 的 reset 抹平）。
• 面板内部样式正常（不依赖宿主提供 Tailwind）。
• 类名都在 .parallel-agents 作用域下，不与宿主类名冲突。

---

PA-EMBED-07 · 多实例并存（P2）

操作步骤

1. 同一页面放置 2 个面板实例（不同 agents / 不同 username）。

预期结果

• 两个实例各自独立运行、各自保存/回显，互不串流、互不串 token 缓存（缓存按 baseUrl::username 区分）。