资源库与项目

职责与结构

作为资源库与项目中的一种可复用卡片变体，展示资源名称、类型与大幅预览。模板库和已配置节点库使用同一渲染函数及材质；各业务入口通过属性和事件接入自己的选择、使用或打开动作。

结构对应参考图：上方名称与次级类别、下方内嵌圆角媒体、媒体左下角蓝色数量胶囊、右下角白色圆胶囊箭头。标题采用组件字号，名称与类别以字重和间距区分。外壳和按钮采用共享液态玻璃，预览内容不叠加模糊。预览选择按钮和使用按钮互为同级，避免嵌套或整卡误触插入。

变体与 Tokens

变体使用规则
项目	规范
参考比例	以约500px宽卡片为几何基准：内嵌媒体476:388，媒体左右及底部约12px留白；外圆角约36px、内圆角约28px，信息与操作距媒体边缘约20px。名称区随标题自然增高，标题16–24px、半粗字重，类别12px，文字间距4px。
液态玻璃	沿用 glass-reflection、surface-pane、glass-border、glass-blur-compact、shadow-1。高光边缘和单层磨砂表达透光；图片保持清晰，圆形操作继承共享白色玻璃按钮及交互状态。
项目与模板	项目使用现有真实封面，类别在名称下方。左下复用 status-label 的蓝色数量胶囊，显示“节点 · 数量”，数量不表示运行状态。此变体示例独立于已有分类页的搜索、选用和项目预览，不改写原卡片的业务职责。
工具图库	模板和节点类型展示在名称下方；左下统一显示节点数量，单个已配置节点为“节点 · 1”。节点库仍保留五类、11个命名节点、配置来源与搜索信息。点击预览仅选择，右下箭头明确执行“使用”，按钮内不显示文字。
窄容器	间距、圆角与媒体比例按卡片容器调整，标题至少16px、类别12px；动作复用44px白色图标按钮，箭头20px。文字保持可读尺寸且允许自然增高，胶囊为动作留出空间；图库减少列数后内部滚动，不缩放整张卡片。
回退与状态	减少透明度或不支持 backdrop-filter 时使用共享实底；强制颜色保留边界与操作。选中以卡片边界表示，焦点独立可见，禁用选择与使用都不可执行。

参考媒体几何由本组件局部变量定义，cqi仅用于间距、圆角与可读范围内的标题字号。标题复用 --text-title/--text-h2、--weight-semibold，类别复用 --text-caption/--line-caption。卡片模糊为 --glass-blur-compact；动作直接采用共享 .btn.icon-only.lg.on-media 的44px白色胶囊和状态，箭头 --icon-md。左下复用 .status-label 的28px胶囊几何，--status-fill 使用 --color-primary。媒体 aspect-ratio为476/388，外壳高度随标题自然增长。项目照片 cover，工作流与节点预览 contain，避免裁剪内容。

交互与状态示例

参考比例 · 液态玻璃材质

节点 · 4

预览只选择，右下箭头执行使用；此处为本地示例。

图库尺寸 · 同一组件

节点 · 5

节点 · 3

选择与使用仅影响此组示例。

交互与无障碍

预览按钮只选中当前资源，不执行插入。右下箭头具有含资源名称的 aria-label 与原生 title；Enter、Space 采用原生按钮激活。此处的演示使用只更新所属实例并冒泡 resourcecarduse，不调用服务或写入项目。图库由工具面板适配器继续处理 toolpaneluse、节点类型及保存配置，各实例互不影响。

接入约定

接入参数与事件
项目	规范
共享渲染	resourcePreviewCardHTML(spec) 导出纯标记。必填 id/title；subtitle/meta 为纯文本。nodeCount 可选且须为非负安全整数，优先于meta，输出“节点 · N”；完整文本保留在DOM中，title显示“节点数量：N”。mediaHTML 仅接收组件内可信生成的预览内容；外部字符串先转义。
媒体与动作	mediaFit为cover/contain。articleAttributes、previewAttributes、actionAttributes仅接受data-、aria-、title、disabled、tabindex，值统一转义；属性注入与事件执行由业务适配器负责。
选择与使用	资源规范示例使用 data-resource-select/data-resource-use 与 article 的 data-resource-key/name。initResourcePreviewCards(host=document) 幂等初始化，仅当前 data-resource-preview-demo 实例响应。resourcecarduse.detail 为 key/label。
工具图库复用	工具图库使用相同 renderer，保留 data-tool-result/search/type/config 与 data-tool-choice/use；节点快捷添加仍为独立图标标题组件。节点库使用事件继续包含 nodeType/config。

查看最小使用示例

import {resourcePreviewCardHTML} from './scripts/resource-preview-card.mjs';
const html = resourcePreviewCardHTML({
  id:'customer-service-card', title:'客户服务流程', subtitle:'流程模板',
  nodeCount:3, mediaFit:'contain',
  mediaHTML:'<img src="assets/tool-panels/template-customer-service.svg" alt="">',
  articleAttributes:{'data-resource-key':'customer-service','data-resource-name':'客户服务流程'},
  previewAttributes:{'data-resource-select':'customer-service'},
  actionAttributes:{'data-resource-use':'customer-service'},
  actionLabel:'使用客户服务流程'
});
// 引用共享 CSS；示例接入 initResourcePreviewCards(host)。
// 正式业务适配器监听自己的选择/使用事件，不监听整张 article 的点击。

维护位置：scripts/resource-preview-card.mjs/css；示例行为：scripts/resource-preview-card.js。组合应用见本页末尾引用。

Library Pages / 资源分类页与卡片

Library Pages / 资源分类页与卡片

模板库

设备巡检与异常处置

空白业务流程

没有找到匹配的模板

Project Card / 已有项目

产线巡检试点

Liquid Glass / 内嵌预览资源卡片