aurora-admin/.design_library/kole-ui-mobile/components/cell.json

{
  "schemaVersion": 1,
  "sourceKind": "authored-spec",
  "provenance": "authored-in-repo",
  "specFile": "spec/移动端规格.md",
  "confidence": "high",
  "specSection": "7 · 单元格 Cell",
  "slug": "cell",
  "name": "单元格 Cell",
  "semanticTypeCandidates": [
    "cell",
    "list-item"
  ],
  "variantDimensions": [
    {
      "name": "arrow",
      "values": [
        "false",
        "true"
      ]
    },
    {
      "name": "link",
      "values": [
        "false",
        "true"
      ]
    }
  ],
  "representativeVariants": [
    {
      "arrow": "true",
      "link": "true",
      "label": "可点单元格（带箭头）"
    },
    {
      "arrow": "false",
      "link": "false",
      "label": "纯展示单元格"
    },
    {
      "arrow": "false",
      "link": "true",
      "label": "可点无箭头"
    },
    {
      "arrow": "true",
      "link": "false",
      "label": "有箭头但不可点"
    }
  ],
  "anatomy": {
    "cell": "根元素，一行两类内容（左侧主区 / 右侧值区）",
    "title": "主标题，单行省略",
    "desc": "可选副标题，单行省略",
    "value": "右侧值或状态文字",
    "arrow": "可选右箭头，表示可进入",
    "icon": "可选左侧图标"
  },
  "structurePatterns": {
    "arrow": "false / true",
    "link": "false（纯展示）/ true（整行可点）"
  },
  "usageHints": [
    "列表的基本单元：一行里承载「标题 + 说明 + 值 + 箭头」，可整行点击进入下级",
    "可点单元格整行都是热区，高度不小于 56px",
    "按下反馈是整行背景变化，不是只有文字变色",
    "单元格之间默认有 1px 分隔线，可用 borderless 关掉"
  ],
  "doNotInvent": [
    "多行标题的折叠规则",
    "单元格内多列布局的栅格规则"
  ],
  "unknowns": [
    "副标题最多显示几行",
    "右侧值超长时的截断策略"
  ],
  "interaction": [
    "可点单元格整行都是热区，高度不小于 56px",
    "按下反馈是整行背景变化，不是只有文字变色",
    "单元格之间默认有 1px 分隔线，可用 borderless 关掉"
  ],
  "accessibility": [
    "可点单元格用原生 button；纯展示单元格用 div",
    "值区只作展示时不要放进可聚焦元素"
  ],
  "api": {
    "source": "implementation",
    "note": "props / events / slots 为 6 端实现的公共接口（说明文字取自规格对应小节）。字段名与各端源码逐名核对：node tools/verify-mobile-docs.mjs",
    "requiredNote": "「必传」按严格定义：实现里**没有默认值**时才为 Y（本门禁逐条核对 props 与各端源码的默认值，防止契约与实现脱节）。",
    "props": [
      {
        "name": "title",
        "type": "string",
        "default": "''",
        "desc": "主标题，单行省略（规格 §7.2）",
        "required": false
      },
      {
        "name": "desc",
        "type": "string",
        "default": "''",
        "desc": "可选副标题，单行省略（规格 §7.2）",
        "required": false
      },
      {
        "name": "value",
        "type": "string",
        "default": "''",
        "desc": "右侧值或状态文字（规格 §7.2）",
        "required": false
      },
      {
        "name": "arrow",
        "type": "boolean",
        "default": "false",
        "desc": "变体 arrow：显示右箭头表示可进入（规格 §7.3）",
        "required": false
      },
      {
        "name": "link",
        "type": "boolean",
        "default": "false",
        "desc": "变体 link：整行可点（规格 §7.3）",
        "required": false
      },
      {
        "name": "borderless",
        "type": "boolean",
        "default": "false",
        "desc": "关掉底部 1px 分隔线（规格 §7.5）",
        "required": false
      },
      {
        "name": "disabled",
        "type": "boolean",
        "default": "false",
        "desc": "置灰且不响应（规格 §7.4）",
        "required": false
      }
    ],
    "events": [
      {
        "name": "click",
        "params": "—",
        "desc": "可点单元格（link=true）点击时触发"
      }
    ],
    "slots": [
      {
        "name": "default",
        "desc": "右侧自定义内容，替代 value（规格 §7.2）"
      },
      {
        "name": "icon",
        "desc": "可选左侧图标（规格 §7.2）"
      }
    ]
  },
  "variantClasses": {
    "arrow": {
      "false": [],
      "true": [
        ".kole-m-cell__arrow"
      ]
    },
    "link": {
      "false": [],
      "true": [
        ".kole-m-cell--link"
      ]
    }
  },
  "demos": [
    {
      "id": "basic",
      "group": "01 组件类型",
      "title": "基础用法",
      "desc": "标题 + 右侧值 + 箭头，最常见的可点单元格。",
      "variant": "link=true / arrow=true"
    },
    {
      "id": "desc",
      "group": "01 组件类型",
      "title": "带副标题",
      "desc": "两行文字（主 + 副），副标题单行省略。",
      "variant": "desc"
    },
    {
      "id": "custom",
      "group": "01 组件类型",
      "title": "自定义右侧",
      "desc": "右侧放开关、标签等非文字内容（此处用标签示意）。",
      "variant": "slots.default"
    },
    {
      "id": "group",
      "group": "02 组件状态",
      "title": "分组列表",
      "desc": "一组单元格共享分隔线；组内最后一条用 borderless 收尾。",
      "variant": "borderless"
    },
    {
      "id": "disabled",
      "group": "02 组件状态",
      "title": "禁用",
      "desc": "置灰且不响应点击（无权限项的常见表达）。",
      "variant": "disabled=true"
    }
  ],
  "related": [
    {
      "slug": "swipecell",
      "why": "行内还需要滑动操作时用滑动单元格；只进入下级用普通单元格"
    },
    {
      "slug": "actionsheet",
      "why": "点击单元格后需要提供多个动作时用动作面板；单一跳转保留单元格语义"
    }
  ]
}