lcap-frontend-library 0.0.1

package/packages/lcap-frontend-library/references/lcap-extension-component/platform/theme-variables-mobile-ui.md

@@ -0,0 +1,85 @@
+# 使用 CloudUI 全局主题变量
+
+## 复制变量文件
+
+创建文件 `.storybook/vars.css`, 内容如下:
+
+```css
+
+:root {
+  /**
+   * ========================
+   *   Global Variables
+   * ========================
+   */
+  --van-space-baset: 16px;
+
+  /* Brand Colors */
+  --van-brand-primary: #337eff;
+  --van-brand-success: #26bd71;
+  --van-brand-problem: #ffb21a;
+  --van-brand-warning: #ffb21a;
+  --van-brand-error: #f24957;
+  --van-brand-disabled: #ebebeb;
+
+  /* Component Base Colors */
+  --van-component-text-color: #333;
+  --van-component-active-color: #f2f3f5;
+  --van-component-active-opacity: 0.7;
+  --van-component-disabled-opacity: 0.5;
+  --van-component-background-color: #f7f8fa;
+  --van-component-background-color-light: #fafafa;
+  --van-component-text-link-color: #576b95;
+
+  /* Font */
+  --van-font-color: #333;
+  --van-font-size-xs: 10px;
+  --van-font-size-sm: 12px;
+  --van-font-size-md: 14px;
+  --van-font-size-lg: 16px;
+  --van-font-weight-bold: 500;
+  --van-line-height-xs: 14px;
+  --van-line-height-sm: 18px;
+  --van-line-height-md: 20px;
+  --van-line-height-lg: 22px;
+  --van-base-font-family: blinkmacsystemfont, 'Helvetica Neue',
+    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif, -apple-system;
+  --van-price-integer-font-family: avenir-heavy, pingfang sc, helvetica neue,
+    arial, sans-serif;
+
+  /* Border Color */
+  --van-border-color: #e5e5e5;
+  --van-border-width-base: 1px;
+  --van-border-radius-sm: 2px;
+  --van-border-radius-md: 4px;
+  --van-border-radius-lg: 8px;
+  --van-border-radius-max: 16px;
+
+  /* Padding */
+  --van-padding-base: 6px;
+  --van-padding-xs: calc(var(--van-padding-base) * 2);
+  --van-padding-sm: calc(var(--van-padding-base) * 3);
+  --van-padding-md: calc(var(--van-padding-base) * 4);
+  --van-padding-lg: calc(var(--van-padding-base) * 6);
+  --van-padding-xl: calc(var(--van-padding-base) * 8);
+
+  --van-space-base: var(
+    --van-space-baset
+  ); /* @desc 布局内各元素之间的外间距, 如：1px */ /* @prefix van */
+  --van-space-shrink: -1px;
+  --van-space-mini: 4px;
+  --van-space-small: 10px;
+  --van-space-large: 30px;
+}
+```
+
+## 在 `.storybook/preview.js` 文件中导入全局变量
+
+```js
+import './vars.css';
+
+// ......
+```
+
+完成后就可以在组件中使用以上的全局 css 变量

package/packages/lcap-frontend-library/references/lcap-extension-component/theme.md

@@ -0,0 +1,234 @@
+---
+outline: deep
+---
+
+<script setup>
+import { VTCodeGroup, VTCodeGroupTab } from '../../.vitepress/components'
+</script>
+
+# 主题样式配置
+
+## 1. 功能说明
+
+在IDE的 **更多**->**自定义主题样式** 中配置组件的默认外观，或者在 **组件属性**->**样式面板** 中设置主题样式。
+
+
+
+## 2. 功能实现
+
+### 2.1 创建主题文件
+
+在组件目录下创建文件夹 theme，theme文件夹下创建文件 index.vue / index.jsx 和 vars.css 。
+
+<VTCodeGroup>
+  <VTCodeGroupTab label="Vue2">
+
+  ```
+  |-- src
+  |---- components
+  |------- cwd-capsule-switch
+  |----------- theme              // 主题目录
+  |------------- index.vue        // 组件主题预览
+  |------------- vars.css         // 可配置变量
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="React">
+
+  ```
+  |-- src
+  |---- components
+  |------- CwdCapluse
+  |---------- theme               // 主题目录
+  |------------- index.jsx        // 组件主题预览
+  |------------- vars.css         // 可配置变量
+  ```
+
+  </VTCodeGroupTab>
+</VTCodeGroup>
+
+示意图如下：
+
+
+
+### 2.2 配置文件
+
+1.  配置文件 index.vue / index.jsx。默认可使用组件区块实例作为主题配置预览。
+
+    <VTCodeGroup>
+      <VTCodeGroupTab label="Vue2">
+
+      ```vue
+      <!-- index.vue -->
+      <template>
+        <demo-preview></demo-preview>
+      </template>
+      <script>
+      // 默认可使用组件区块实例作为主题配置预览
+      import createStoriesPreview from '@lcap/builder/input/vue2/stories-preview';
+      import * as stories from '../stories/block.stories';
+
+      const DemoPreview = createStoriesPreview(stories);
+
+      export default {
+        components: {
+          DemoPreview,
+        },
+      };
+      </script>
+      ```
+
+
+      </VTCodeGroupTab>
+      <VTCodeGroupTab label="React">
+
+      ```typescript
+      // index.jsx
+      // 默认可使用组件区块实例作为主题配置预览
+      import createStoriesPreview from '@lcap/builder/input/react/stories-preview';
+      import * as stories from '../stories/block.stories';
+
+      export default createStoriesPreview(stories);
+      ```
+
+      </VTCodeGroupTab>
+    </VTCodeGroup>
+
+    
+
+
+2.  配置文件 vars.css 。标注支持自定义主题样式的组件以及组件样式相应的变量。
+
+    
+
+    <div class="highlight">
+
+    vars.css 文件配置规范：
+
+    - 组件主题注释
+
+        - @component 必需，注释支持自定义主题样式的组件的组件名称，组件名称与 api.ts 中一致。
+        - @hidden 非必需，表示隐藏该组件主题配置功能
+    - 变量注释
+
+        - @desc 必需，注释组件样式对应的变量
+        - @type 注释变量类型，默认为 input，支持填写color、size、input。
+        - @group 表示变量分组
+        - @hidden 非必需，表示隐藏该变量配置功能
+
+    </div>
+
+    <details>
+        <summary title="点击展开示例代码">
+            点击展开示例代码
+        </summary>
+
+    ```css
+    /**
+    * @component cwd-capsule
+    */
+    .cwd-capsule {
+    /**
+    * @desc 背景颜色
+    * @type color
+    */
+    --cwd-capsule-background-color: rgb(236, 236, 236);
+
+    /**
+    * @desc 背景颜色(选中态)
+    * @type color
+    */
+    --cwd-capsule-background-color-active: #fff;
+
+    /**
+    * @desc 字体颜色
+    * @type color
+    */
+    --cwd-capsule-color: #666;
+
+    /**
+    * @desc 字体颜色(选中态)
+    * @type color
+    */
+    --cwd-capsule-color-active: #333;
+
+    /**
+    * @desc 字体大小
+    * @type input
+    */
+    --cwd-capsule-font-size: 14px;
+    }
+    ```
+
+    </details>
+
+
+## 3. 本地预览调试
+
+1.  在 src 目录下配置文件 theme.stories.js，用于本地调试主题配置预览。
+
+    <VTCodeGroup>
+    <VTCodeGroupTab label="Vue2">
+
+    ```javascript
+    import ComponentPreview from 'virtual:lcap-theme-component-previews.js';
+
+    export default {
+      title: '主题配置预览',
+      // More on argTypes: https://storybook.js.org/docs/api/argtypes
+      argTypes: {
+        backgroundColor: { control: 'color' },
+      },
+    };
+
+    export const Components = {
+      name: '组件预览',
+      render: (args, { argTypes }) => {
+        return {
+          props: Object.keys(argTypes),
+          components: {
+            ComponentPreview,
+          },
+          template: '<ComponentPreview v-bind="$props" />',
+        };
+      },
+    };
+    ```
+
+    </VTCodeGroupTab>
+    <VTCodeGroupTab label="React">
+
+    ```javascript
+    import ComponentPreview from 'virtual:lcap-theme-component-previews.js';
+
+    export default {
+      title: '主题配置预览',
+      // More on argTypes: https://storybook.js.org/docs/api/argtypes
+      argTypes: {
+        backgroundColor: { control: 'color' },
+      },
+    };
+
+    export const Components = {
+      name: '组件预览',
+      render: ComponentPreview,
+    };
+    ```
+
+    </VTCodeGroupTab>
+    </VTCodeGroup>
+    
+2.  打开终端运行 npm run dev 启动服务，预览默认主题配置效果。
+
+    
+
+## 4. 使用效果演示
+
+npm run build之后dist-theme目录下会生成theme.config.json文件与theme/index.html预览文件。
+
+以下效果为依赖库打包发布并在IDE中引入后的使用演示。
+
+
+
+
+

package/packages/lcap-frontend-library/references/lcap-extension-component/workflow-guardrails.md

@@ -0,0 +1,328 @@
+---
+outline: deep
+---
+
+# 工作流护栏（避免常见疏漏）
+
+本文档将"经验教训"沉淀为**可执行规则**：每条规则都包含触发条件、推荐做法与可验收的落点。用于 `speckit.plan` / `speckit.implement` 以及日常组件开发自检。
+
+> 核心原则：**规范文档不是用来"读"的，是用来"转化"的**。计划阶段就要把规则落成表格与具体参数，实现阶段严格按计划执行。
+
+---
+
+## 1. 本地脚本执行前：权限与环境预检
+
+### 触发条件
+
+- 需要执行仓库内的本地脚本（如 `scripts/bash/*.sh`）。
+
+### 推荐做法
+
+- **先检查可执行性**：优先 `test -x <script>` 或 `ls -l <script>` 确认权限位。
+- 若脚本**不可执行**：
+  - **优先**用解释器直接运行：`bash <script>`（避免改权限位带来的协作/CI 副作用）。
+  - 只有在确有需要（例如工具链明确要求可执行位）时，才执行 `chmod +x <script>`，并将权限位修复纳入仓库（避免下次再踩坑）。
+- 运行 `npm` 命令前，如遇"缺依赖/缺环境"错误：**按报错补齐依赖**，而不是每次都人工检查 `package.json`。
+- **单测前检查测试依赖**：执行 `npm run test` 前，若项目含 Vue 组件单测（Vitest + @vue/test-utils），须先确认已安装 `@vue/test-utils`、`jsdom`（如 `npm list @vue/test-utils jsdom` 或查看 package.json）；未安装或出现 `Failed to resolve import "@vue/test-utils"` 时，先执行 `npm install -D @vue/test-utils jsdom`，再跑单测。
+
+### 验收要点
+
+- [ ] 执行脚本前已确认可执行性；不可执行时采用 `bash` 运行或已修复权限位并纳入仓库。
+- [ ] 依赖缺失时按报错补装，并确保后续命令可重复通过。
+- [ ] 跑单测前已确认 `@vue/test-utils`、`jsdom` 已安装；若报解析失败则先安装再重跑。
+
+---
+
+## 2. CSS Modules / `<style module>`：测试定位规则
+
+### 触发条件
+
+- 组件使用 CSS Modules（如 Vue SFC 的 `<style module>`）或构建会对 className 哈希化。
+
+### 推荐做法（按优先级）
+
+1. **首选 `data-testid`/`data-test`**：在关键交互/断言节点添加稳定的测试标识（同时利于 Vitest 与测试脚本复用）。
+2. **语义定位**：优先按可访问性语义定位（如 role/label/text），若组件具备对应语义。
+3. **组件级定位**：Vue Test Utils 使用 `findComponent(...)` 或按组件结构定位。
+4. **兜底**：仅在无法引入上述方式时，才使用 CSS 选择器；避免依赖精确类名（如 `.root`）。`[class*="xxx"]` 可以作为临时兜底，但需确保不会误匹配，并尽量配合父容器或更具体结构收敛范围。
+
+### 验收要点
+
+- [ ] 单测/交互测试不依赖 CSS Modules 哈希后的精确类名。
+- [ ] 关键断言点具备稳定定位方式（优先 `data-testid`）。
+
+---
+
+## 3. 浮点数/比例/缩放：断言精度容差
+
+### 触发条件
+
+- 涉及缩放、比例、百分比、动画进度、布局计算等浮点数运算。
+
+### 推荐做法
+
+- **禁止**使用 `toBe` / `toEqual` 对浮点数做精确相等断言。
+- 统一使用 `toBeCloseTo(value, digits)`，digits 依据业务精度选择（例如 2 或 3）。
+
+### 验收要点
+
+- [ ] 浮点数相关断言使用 `toBeCloseTo`，且精度位数合理。
+
+---
+
+## 4. 测试定位与事件隔离（Storybook / 单测）
+
+### 触发条件
+
+- 测试定位不稳定（同一选择器命中多个元素）。
+- 控制台出现 Vue 警告（如 `Wrong type passed as event handler`），或 Storybook Demo 中事件未触发/触发异常。
+
+### 推荐做法
+
+#### 4.1 选择器唯一性（优先级）
+
+1. **首选**稳定测试标识与可访问性语义（如 `data-testid`、role、label、text）。
+2. 次选结构化选择器（限定容器范围、组合标签/属性/文本）。
+3. 只有在必要时才使用 `.first()` / `.nth()` 作为兜底；兜底前先保证选择器语义足够明确。
+
+#### 4.2 Storybook 中 Props 与 Events 分离（条件触发）
+
+- 当出现"事件被当作 prop 传入"导致的控制台 warning/错误时：
+  - 将 `args` 拆为 `props` 与 `events`：
+    - `props` 用 `v-bind="props"`
+    - `events` 用 `v-on="events"`（或逐个显式绑定）
+- 不要求所有组件都一刀切拆分；以"**无警告 + 事件行为正确**"为准。
+
+### 验收要点
+
+- [ ] 测试定位唯一且稳定（优先 testid/role/label）。
+- [ ] Storybook demo 控制台无上述事件处理警告，且断言覆盖关键行为。
+
+---
+
+## 5. "计划即契约"：将规则转化为可检查产出
+
+### 触发条件
+
+- 执行 `speckit.plan` 生成 `plan.md`。
+
+### 推荐做法
+
+- **必须**把实现规则转化为计划中的"具体表格/具体参数"，而不是只写成验收勾选项。
+- 常见"规则 → 产出"的映射示例：
+  - **样式规范** → `plan.md` 中的「样式与主题适配」+ **样式变量映射表**（并明确引用 `theme-variables-*.md` 的具体变量名）。
+  - **展示类默认值** → 在 Props 表中写出具体默认值/示例数据结构（NASL 类型）与空数据表现。
+  - **双向绑定** → 在接口设计中标注 sync/回写事件，并在实现顺序中安排验证点（含测试）。
+  - **根节点透传** → 明确透传策略（Vue2/Vue3/React）与对应验收方式。
+
+### 验收要点
+
+- [ ] `plan.md` 中可直接看到样式映射表、默认值结构、双向绑定回写路径等"可执行细节"。
+- [ ] 实现阶段严格按计划落地；若计划变更，先更新计划再改代码。
+
+---
+
+## 6. 第三方库集成规范 (Third-party Library Integration)
+
+### 触发条件
+
+- 组件依赖第三方 npm 包（如图表、PDF、富文本等渲染库）。
+
+### 推荐做法
+
+- **强制调研步骤**：引入或使用三方库后，必须执行 `npm list <package>` 确认实际安装版本，并直接查看 `node_modules/<package>/package.json` 中的 `exports` 或 `types` 定义，确认关键 API（Props、Events、Methods）在**当前版本**中的真实名称与签名。
+- **避坑**：不要依赖过往经验或 AI 的旧数据；版本升级（如 v1 → v2）常伴随破坏性变更，必须以当前依赖的版本为准编写 api.ts 与实现。
+
+### 验收要点
+
+- [ ] 计划/实现中引用的三方库 API 与当前安装版本一致；Props/Events 名称已对照 node_modules 或官方文档核实。
+
+---
+
+## 7. 测试质量要求 (Testing Standards)
+
+### Mock 准则（单元/交互测试）
+
+- 在单元测试中 Mock 第三方组件时，**禁止**基于"假设"编写事件触发逻辑。
+- 必须先通过运行真实组件（或最小 Demo）并打印/观察真实事件流，再将事件名与参数同步到 Mock 代码。
+
+### 测试用例零容忍
+
+- **严禁**为通过测试而删除或跳过失败用例；任何失败必须按逻辑 Bug 排查并修复。
+- **Timeout** 视为逻辑或环境问题，须排查原因（选择器不稳定、未等待加载、端口冲突等），不得以"跳过"或"忽略"处理。
+- 失败时保留现场信息（如错误信息、步骤）便于复现。
+
+### 验收要点
+
+- [ ] 单测中 Mock 的事件与真实组件行为一致（经实测或文档确认）。
+- [ ] 无被注释掉或跳过的失败用例；Timeout 已排查并修复。
+
+---
+
+## 8. Vitest 与 E2E 职责分层
+
+### 触发条件
+
+- 编写任何组件的 Vitest 单元测试或 Playwright E2E 测试时。
+
+### 核心原则
+
+jsdom 是**纯 JavaScript DOM 模拟器**，没有布局引擎、图形引擎和 CSS 解析引擎。
+
+| 维度 | Vitest（jsdom） | Playwright（E2E） |
+|------|----------------|-------------------|
+| 职责 | 逻辑正确性、DOM 结构、事件触发 | 渲染结果、视觉表现、浏览器 API 产出 |
+| 判定 | "DOM 属性被正确设置了吗？" | "浏览器渲染出了正确的效果吗？" |
+
+### jsdom 不支持的 API（禁止在 Vitest 中依赖其结果）
+
+> **判定规则**：凡需要**布局引擎**（位置/尺寸）、**图形引擎**（Canvas/SVG）、**CSS 引擎**（样式计算）的 API，jsdom 中均不可靠。
+
+| 分类 | 不支持的 API | jsdom 表现 |
+|------|-------------|-----------|
+| 图形 | Canvas 2D / WebGL `getContext()` | 返回 null |
+| 图形 | `OffscreenCanvas`、`createImageBitmap` | 不存在 |
+| 图形 | SVG `getBBox()` / `getCTM()` | 抛错或返回 0 |
+| 图形 | `URL.createObjectURL()` | 不存在或空 |
+| 图形 | `HTMLMediaElement.play()/pause()` | stub，不触发事件 |
+| 布局 | `getBoundingClientRect()` | 全部为 0 |
+| 布局 | `offsetWidth/Height`、`clientWidth/Height` | 始终为 0 |
+| 布局 | `scrollWidth/Height`、`scrollTo()`、`scrollIntoView()` | 为 0 或无效 |
+| CSS | `getComputedStyle()` 读 class 样式 | 不解析 `<style>`，仅返回默认值 |
+| CSS | `matchMedia()` | 不存在 |
+| CSS | CSS Transition/Animation 事件 | 不触发 |
+| CSS | `element.animate()` | 不存在 |
+| 浏览器 | `Web Worker` / `SharedWorker` | 不存在 |
+| 浏览器 | `IntersectionObserver` / `ResizeObserver` | 不存在 |
+| 浏览器 | `navigator.clipboard` / `requestFullscreen` | 不存在 |
+| 浏览器 | `DragEvent` 实际拖拽行为 | 无真实拖拽 |
+
+### Mock 决策原则
+
+**一句话**：mock 浏览器 API 是为了**防崩溃 + 验证调用参数**；**不是**为了伪造返回值再断言渲染产出。
+
+```
+组件用了 jsdom 不支持的 API？
+├─ 否 → 正常 Vitest，无需 mock
+└─ 是 → 你要断言该 API 的"产出"（返回值/渲染结果）？
+   ├─ 是 → ❌ 移至 E2E
+   └─ 否（只验证调用逻辑）→ ✅ mock 后仅断言【参数】
+```
+
+### Vitest 应该测试 / 禁止测试
+
+| ✅ Vitest 测试 | ❌ 禁止（移至 E2E） |
+|---------------|-------------------|
+| DOM 结构（节点存在、class、data-testid） | Canvas/SVG 渲染输出（toDataURL、data:image） |
+| Props 响应式（prop → DOM 属性更新） | `getComputedStyle` 读取 class 样式 |
+| 事件 emit（触发 + 参数） | 元素尺寸/位置（offsetWidth、getBoundingClientRect） |
+| 纯逻辑（计算函数、composable） | CSS 渲染效果（定位/穿透/层叠/滚动/动画） |
+| Slot 渲染、$attrs 透传 | 响应式断点（matchMedia） |
+| 条件渲染（v-if/v-show） | mock API 返回值或其驱动的渲染产出 |
+| mock 后验证 API 调用参数 | — |
+
+### `element.style.xxx` 使用边界
+
+| 值来源 | Vitest 可断言 | 原因 |
+|--------|:------------:|------|
+| Props 直传 / 纯 JS 计算 | ✅ | 不依赖浏览器 API |
+| Canvas/toDataURL 产出 | ❌ | jsdom 无图形引擎 |
+| getBoundingClientRect / offsetWidth | ❌ | jsdom 返回 0 |
+| getComputedStyle / ResizeObserver 回调 | ❌ | jsdom 不支持 |
+
+**规则**：若内联样式值的计算链中**任一环节**经过 jsdom 不支持的 API，则禁止在 Vitest 中断言，移至 E2E。
+
+### 禁令红线
+
+| # | 禁止行为 |
+|:-:|----------|
+| P1 | Vitest 中引入 canvas-mock 来**断言渲染结果**（可引入防崩，禁止断言 toDataURL） |
+| P2 | Vitest 中使用 `getComputedStyle(el).xxx`（用 `element.style.xxx` 替代） |
+| P3 | Vitest 中断言 offsetWidth / getBoundingClientRect（始终为 0） |
+| P4 | Vitest 中验证 CSS 渲染效果（定位/穿透/层叠是浏览器行为） |
+| P5 | 为迁就 Vitest 把静态样式内联到 `:style`（见规则 9） |
+| P6 | E2E 中测试纯逻辑（那是 Vitest 的事） |
+
+### 验收要点
+
+- [ ] Vitest 中无 `getComputedStyle` / 无 Canvas 渲染产出断言 / 无 offsetWidth 断言。
+- [ ] Mock 仅用于防崩溃 + 验证调用参数，未断言 mock 返回值。
+- [ ] `element.style.xxx` 仅断言 props 直传值，未断言浏览器 API 产出。
+- [ ] CSS 渲染效果（穿透、定位、层叠、尺寸）仅在 E2E 断言。
+- [ ] 每个 spec 验收标准在 Vitest 或 E2E 中至少被一个覆盖。
+
+---
+
+## 9. 组件样式放置规范
+
+### 触发条件
+
+- 编写任何 Vue SFC 组件的样式时。
+
+### 核心原则
+
+样式隔离 + 样式放置决定测试策略（与规则 8 互锁）：
+
+| 优先级 | 方式 | 适用 | 测试影响 |
+|--------|------|------|----------|
+| **1** | `<style scoped>` | 绝大多数组件 | class 名稳定，E2E 验证效果 |
+| **2** | `<style module>` | 极强隔离/多主题 | hash 类名，需 data-testid 定位 |
+| **3** | 内联 `:style` | **仅**运行时动态计算值 | Vitest 可断言（限 props 直传） |
+
+### 关键约束
+
+- **禁止**裸 `<style>`（无 scoped/module），会污染全局。
+- **静态样式必须写在 `<style scoped>`**：position、pointer-events、z-index、background-repeat 等。
+- **内联 `:style` 仅用于动态值**：prop 计算的宽高、Canvas 生成的 backgroundImage、JS 控制的 display。
+- **禁止**为迁就 Vitest 而将静态样式内联（jsdom 不解析 scoped 样式不是内联的理由）。
+
+### 样式放置 → 测试方式
+
+```
+静态定位/层叠/间距  → <style scoped>  → E2E 验证效果
+动态 prop 计算值    → 内联 :style     → Vitest 验证 element.style.xxx
+Canvas/API 产出     → 内联 :style     → E2E 验证（Vitest 禁止断言）
+条件 class 切换     → <style scoped>  → Vitest 验证 classes()
+```
+
+### 代码示例
+
+```vue
+<!-- ✅ 正确：静态样式在 scoped，仅动态值内联 -->
+<template>
+  <div class="my-component" v-bind="$attrs">
+    <slot />
+    <div
+      class="overlay"
+      :style="{ backgroundImage: `url(${generatedUrl})` }"
+      data-testid="overlay"
+    />
+  </div>
+</template>
+
+<style scoped>
+.my-component { position: relative; }
+.overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+</style>
+```
+
+```vue
+<!-- ❌ 错误：静态样式内联（为迁就 Vitest 测试） -->
+<template>
+  <div :style="{ position: 'relative' }">
+    <div :style="{ position: 'absolute', pointerEvents: 'none', zIndex: 10 }" />
+  </div>
+</template>
+```
+
+### 验收要点
+
+- [ ] 无裸 `<style>`（必须 scoped 或 module）。
+- [ ] 静态样式在 `<style scoped>` 中，未因测试需求而内联。
+- [ ] 内联 `:style` 仅含运行时动态值。
+- [ ] Vitest 验证 class 存在 + props 内联值；渲染效果在 E2E 验证。