@templmf/temp-solf-lmf 0.0.152 → 0.0.154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@templmf/temp-solf-lmf",
-  "version": "0.0.152",
+  "version": "0.0.154",
   "description": "",
   "main": "index.js",
   "scripts": {

package/rules.md

@@ -0,0 +1,185 @@
+# Figma → 代码 转换规则（分阶段执行版）
+
+## Step 0：数据获取
+
+### 1.1 figma-local-mcp获取节点
+- 通过 figma-local-mcp 拉取选中节点的完整树结构（layout、fill、text、constraints 等全部属性）。
+- 不要在这一步做任何转换或精简，只做数据收集，作为后续所有步骤的唯一依据。
+
+### 1.2 图形还原方式判断（CSS 优先，SVG 兜底）
+
+优先用 CSS 还原的情况：
+- ELLIPSE 且 width === height，单一纯色/渐变填充，无旋转
+  → border-radius: 50% + background
+- RECTANGLE，纯色/渐变填充，仅四角圆角（无不规则圆角），无旋转或仅90度整数倍旋转
+  → border-radius + background + transform: rotate()（如需要）
+- 纯直线（VECTOR 但 points 只有2个端点，水平或垂直）
+  → border-bottom/border-right 或 <hr>
+- 纯色/线性渐变的边框效果
+  → border 或 background + linear-gradient
+
+只能退回 SVG 的情况：
+- VECTOR 的 path 数据点数 > 4 个或包含贝塞尔曲线（非直线拼接）
+- BOOLEAN_OPERATION（布尔运算合成的复杂形状）
+- STAR / 不规则 POLYGON
+- 多色渐变叠加、mesh gradient 等 CSS 无法表达的填充
+
+判断优先级：先检查是否命中"CSS优先"规则，命中则不生成SVG；
+未命中任何CSS规则的，才允许用SVG，且需在Step1输出中注明
+"该图形因xxx原因保留为SVG"，方便你人工复核是否有更简单的CSS方案被漏判。
+
+
+---
+
+## Step 1：结构分析（只出大纲，不写代码）
+输出一份"精简前 → 精简后"的结构对照大纲，格式如下：
+
+Frame123 (Card容器)
+  └─ Group45 (仅1子节点，无样式) → 【删除，属性上移】
+      └─ Frame67 (标题+图标横排)      → 保留，命名建议: .card-header
+          └─ Text "标题"              → 保留，命名建议: .card-header__title
+          └─ Vector (icon)            → 保留，命名建议: .card-header__icon
+
+精简判断依据：
+- 单子节点 + 无背景/边框/阴影/圆角 → 合并
+- 连续多层 Auto Layout 且方向/对齐/样式完全一致 → 合并
+- 纯占位、可用 flex gap/padding 替代的空节点 → 删除
+
+⚠️ 这一步产出后暂停，等待人工确认结构是否合理，再进入 Step 2。
+
+---
+
+## Step 2：基于确认后的结构，生成代码（单位转换 + 语义化命名一次性完成）
+
+### 2.1 单位转换（100px = 1rem）
+- 公式：rem = Figma标注px / 100，保留2-3位小数，去除多余0
+- 需转换属性：width / height / padding / margin / gap / font-size /
+  line-height(px值) / border-radius / top/left/right/bottom
+- 不转换（保留px）：1px边框、box-shadow的模糊/扩散值
+- 项目根字号：html { font-size: 100px; }（或走 postcss-pxtorem 方案，需提前告知用哪种）
+
+### 2.2 语义化
+- HTML标签：header/nav/main/section/article/aside/footer 按角色使用；
+  列表用 ul/li；按钮用 button；图片用 img/picture + alt
+- class命名：按 Step 1 确认的命名建议，采用 BEM 规范，
+  禁止沿用 Figma 自动生成的 FrameXXX / GroupXXX
+- 文本/图标/状态类节点按语义角色命名（标题/正文/标签/图标按钮），不照抄图层名
+
+按 Step 1 确认后的树，逐层生成完整代码。
+
+### 2.3 样式输出方式（禁止行内样式）
+- 严禁使用 style="..." 行内样式，包括:
+  - HTML 中的 style 属性
+  - React/Vue 中的 style={{...}} 内联对象（除非是真正需要动态计算的值，
+    比如根据接口数据算出的进度条宽度，这类"运行时才能确定"的值除外）
+- 所有 Figma 转换出的静态样式（颜色、间距、字号、圆角、阴影等）必须写入
+  对应的样式文件：
+  - 原生项目 → 独立 .css 文件，配合 class 选择器
+  - Vue 项目 → <style scoped> 或 CSS Modules
+  - React 项目 → CSS Modules / SCSS Module / styled-components（不用行内 style 对象）
+  - 若项目使用 Tailwind → 用 Tailwind class（这也不算传统"行内样式"，但如果你不希望
+    class 里堆一长串 utility class，需额外说明，改用自定义 class + @apply）
+- 判断标准：只要这个值在设计稿里是"写死的"，就必须进样式文件；
+  只有真正依赖运行时数据/状态变化的值，才允许用动态样式（且优先用 CSS变量
+  + class切换的方式，而不是直接写 style 对象）。
+
+### 2.4 布局方式（主体框架禁止 position: absolute），Must 优先使用flex或者常规布局
+- 页面主体框架结构（页面级容器、区块布局、卡片列表、导航栏等承载"主要排版"的部分）
+  一律使用 flex 或 grid 布局，禁止使用 position: absolute 实现排列。
+- 转换判断依据：
+  - Figma 中的 Auto Layout 节点 → 直接转换为 flex（对应 flex-direction /
+    justify-content / align-items / gap）
+  - Figma 中非 Auto Layout，但子节点是"横向或纵向排列"的普通 Frame
+    → 视觉分析后手动转换为 flex，不要因为原图没设置 Auto Layout
+      就照抄 x/y 坐标转 absolute
+  - 多列等宽/等高的卡片/列表结构 → 优先用 grid（grid-template-columns
+    + gap），比 flex-wrap 更适合规则网格场景
+- 允许使用 position: absolute 的场景（例外，仅限"装饰性/悬浮性"元素）：
+  - 角标、气泡提示、悬浮按钮、模态框遮罩、图标叠加在图片右上角这类
+    "脱离文档流的点缀元素"
+  - 判断标准：去掉该元素后，主体内容排版是否受影响 → 不影响才允许用 absolute
+- 若 Figma 节点大量使用绝对坐标叠放（常见于设计师随手摆放、未使用 Auto Layout
+  的情况），Opencode 需要在 Step 1 结构分析阶段主动识别排列规律
+  （水平并排/垂直堆叠/网格），转换为合理的 flex/grid 结构，
+  而不是机械保留 x/y 坐标。
+
+### 2.5 图标语义化（SVG 与 Image 两类分别处理）
+
+#### A. SVG 类图标
+- 禁止用 Figma 自动生成的 vector 命名（Vector 1、Union、Ellipse 23 等）
+  作为 class 或组件名，必须按图标实际含义重新命名，例如：
+  - "Vector 12" → .icon-arrow-right / IconArrowRight
+  - "Union" (购物车形状) → .icon-cart / IconCart
+- 必须补充无障碍属性：
+  - 纯装饰性图标（不传达额外信息，旁边已有文字说明）：
+    加 aria-hidden="true"，不需要 title/alt
+  - 有独立语义的图标（如仅图标无文字的按钮、状态指示图标）：
+    补充 role="img" + aria-label="具体含义"，
+    或在 <svg> 内加 <title>具体含义</title>
+- 组件化处理（若项目是 Vue/React）：
+  - 高频复用的图标（出现2次以上）抽成独立组件，命名用语义化名称，
+    如 IconClose.vue / IconArrowRight.tsx，而非 Icon1.vue
+  - 支持通过 props 控制颜色/尺寸（currentColor + width/height 透传），
+    不要把颜色写死在 SVG path 里
+- 若图标含义无法直接从设计稿判断（比如抽象符号），
+  在 Step 1 结构分析阶段标注出来，请求人工确认具体命名，
+  不要凭空猜测语义导致命名误导。
+
+#### B. Image 类图标（位图，如 png/jpg 形式的图标）
+- <img> 标签必须补充语义化 alt：
+  - 纯装饰性图片图标 → alt=""（明确留空，而不是不写alt属性）
+  - 有信息传达的图标（如状态图标、品牌logo）→ alt="具体含义"
+    （如 alt="微信支付图标"，而非 alt="icon1.png"）
+- class/文件命名语义化：
+  - 禁止直接用 Figma 导出的哈希文件名（如 image_a1b2c3.png）作为最终引用名
+  - 按用途重命名，如 icon-wechat-pay.png、logo-brand.png
+- 背景图形式的图标（background-image: url(...)）:
+  - 需在父元素或所在容器上补充语义化 class 名 + 必要的 aria-label
+    （如果该图标本身承担交互功能，比如图标按钮）
+  - 纯装饰性背景图标可不加 aria 属性，但 class 命名依然要语义化
+
+#### C. 图标可交互场景（图标按钮）
+- 只有图标、没有文字的可点击图标（如关闭按钮、返回按钮）：
+  - 必须用 <button> 包裹（而非 div + onClick）
+  - 必须补充 aria-label="具体操作含义"（如 aria-label="关闭弹窗"）
+  - 图标本身（SVG/img）加 aria-hidden="true"，避免屏幕阅读器重复播报
+
+
+### 2.6 资源文件输出目录规范
+
+#### 目录结构（默认约定，可按项目实际调整）
+Must 所有从 Figma 导出的图标、图片资源，统一拷贝到项目 assets 目录下，
+按资源类型分子目录存放，不与组件代码混放：
+
+src/assets/
+  ├─ icons/          # SVG图标（内联使用或作为图标组件资源）
+  │   ├─ arrow-right.svg
+  │   ├─ close.svg
+  │   └─ cart.svg
+  ├─ images/         # 位图类资源（png/jpg，非图标用途，如插图、背景图）
+  │   ├─ banner-hero.png
+  │   └─ empty-state.png
+  └─ icons-image/     # 位图形式的图标（如无法转矢量的品牌icon）
+      ├─ wechat-pay.png
+      └─ logo-brand.png
+
+#### 命名与引用规则
+- 拷贝时禁止使用 Figma 导出的原始哈希文件名（如 icon_a1b2c3d4.svg），
+  必须按 2.5 节确定的语义化名称重命名后再放入对应目录
+- 引用路径统一走别名或相对路径规范，不允许绝对拼接:
+  - 若项目配置了路径别名（如 @/assets），统一用别名引用：
+    import IconClose from '@/assets/icons/close.svg'
+  - 若无别名配置，用相对路径，但需在 Step 1 阶段确认组件所在目录层级，
+    避免生成 ../../../assets/icons/close.svg 这类过深的相对路径
+
+#### 高频复用图标额外处理（若走 SVG 组件化方案，见2.5节）
+- 原始 .svg 文件依然放入 src/assets/icons/ 归档
+- 组件化后的 Vue/React 组件文件另外存放，如：
+  src/components/icons/IconClose.vue
+  （组件内部可直接内联 SVG 代码，或 import 对应 assets 下的原始svg）
+
+#### Step 2 生成代码时的执行动作
+- 生成代码的同时，需要将 figma-local-mcp 返回的图片/矢量资源
+  实际下载并写入上述目录结构，而不是只在代码里写引用路径、
+  资源文件却不存在
+---