@templmf/temp-solf-lmf 0.0.150 → 0.0.151

package/new.txt

@@ -1,31 +1,48 @@
-【数据提取规则】
-1. 识别设计稿中所有"内容型"节点（文本、图片、列表项、
-   状态类图标如选中/未选中、数值/计数、用户头像等），
-   不要把它们的具体值直接写进模板（如 <div>张三</div>），
-   而是定义为响应式变量，模板里用插值引用（如 {{ userName }}）。
-
-2. 对于重复结构（同一组件在设计稿里出现多次，比如卡片列表、
-   tab 项、评论项），必须识别为"同一个组件 + 循环渲染"，
-   不要为每一项单独写一份重复的静态 HTML/JSX。
-   用 v-for / .map() 遍历一个数组类型的 ref，而不是
-   把每条数据都平铺展开。
-
-3. 状态类 UI（选中态、hover态、展开/收起、开关切换、
-   tab 当前激活项等）必须提取为响应式状态变量，
-   并写出对应的切换逻辑（如 @click 绑定的方法），
-   不要只输出某一个静态状态的样式结果。
-
-4. 数值类内容（价格、数量、进度百分比、评分等）提取为
-   独立的 ref，方便后续接口对接时直接替换数据源，
-   不要把计算结果或格式化后的字符串写死。
-
-5. 图片/头像类 src 也提取为 ref 或 props，不要把
-   本地 assets 路径直接硬编码在多处。
-
-【输出结构要求】
-- 用 Vue3 <script setup> 语法，数据统一在顶部用
-  ref()/reactive() 声明
-- 模板中不出现设计稿里的具体文案、数字、图片路径，
-  这些都应该来自上面声明的变量
-- 如果同一数据结构在设计稿中重复出现三次以上，
-  必须重构为数组 + v-for，而不是逐个复制粘贴
+【图标与图片资源处理规则】
+
+禁止使用 v-html 渲染 SVG，禁止将 SVG 源码内联在
+JS/TS 变量或模板字符串中。禁止把图片以 base64 或
+data URL 形式内联。
+
+正确做法如下：
+
+1. SVG 图标必须落地为独立的 .svg 文件，存放到统一目录
+   （如 src/assets/icons/ 或 src/assets/svg/），
+   文件命名要有语义（参考设计稿节点的 name 属性或
+   semanticRole，比如 icon-search.svg、icon-close.svg），
+   不要用 icon_1.svg / icon_2.svg 这种无意义命名。
+
+2. 图标在组件中的引用方式二选一（根据项目现有约定选择，
+   如不确定优先用第一种）：
+   a) 作为普通 img 引入：
+      <img src="@/assets/icons/icon-search.svg" alt="搜索" />
+   b) 作为 Vue 单文件组件封装（如果项目用 svg-sprite
+      或 vite-svg-loader 之类的方案）：
+      import IconSearch from '@/assets/icons/icon-search.svg?component'
+      <IconSearch />
+   不要选择内联字符串 + v-html 的方式。
+
+3. 图标尺寸继承 rem/em 的需求，通过外层容器控制，不要
+   依赖内联 SVG 才能做到"不写死尺寸"，普通 <img> 标签
+   同样可以用 CSS 控制宽高继承父级 font-size：
+   .icon { width: 0.4rem; height: 0.4rem; }
+   .icon img { width: 100%; height: 100%; }
+
+4. 图片类资源（非图标，如产品图、背景图、头像占位图）
+   同样落地为独立文件，存放到 src/assets/images/ 目录，
+   通过标准 import 或 src 路径引用，命名规则同上，
+   不要保留 get_node_image / 图片填充节点导出时的
+   原始哈希文件名（如 image_a1b2c3.png），
+   要重命名为语义化名称（如 banner-home.png）。
+
+5. 图片路径统一管理方式（可选，视项目规模而定）：
+   如果图片资源较多，建议在一个统一的 assets 或 images
+   常量文件里导出所有路径，组件里从该文件 import，
+   而不是每个组件里各自写死相对路径字符串。
+
+【输出前自查】
+- 代码中不应出现 v-html 关键字用于渲染图标
+- 代码中不应出现 <svg ...>...</svg> 内联在模板或
+  script 里的情况
+- 所有图片/图标的 src 或 import 路径应指向 assets
+  目录下的具体文件，且文件名有语义

package/package.json

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