fix(table): 卡片勾选收敛至勾位图标并消除勾选重渲闪烁(pro#4)

- 委托收敛勾位判定+快速路径 class 回显
- 勾位光标样式
- usercard/goodscard 勾位适配
- 两个技能文档契约同步
This commit is contained in:
augushong
2026-10-03 11:55:56 +00:00
parent 20a5470a4a
commit a9f9045d10
7 changed files with 57 additions and 22 deletions

View File

@@ -17,8 +17,8 @@
上下文契约(admin-table.js buildLayoutContext):
- rows:行上下文数组,d 与表格行数据同构(含原始字段 + _cells/_operatHtml/_checked/_disabled)
- list:列表上下文 {tableId, page, count, checkedAll}(Vue 形态不叫 _list)
- 行根元素携带 data-table-id + data-id 两属性即获得统一行选中委托(点击卡片
切换勾选,按钮/表单控件/layui 美化层自动豁免),选中态经 :class 高亮回显
- 行根元素携带 data-table-id + data-id 两属性即获得统一行选中委托(点击勾位
图标切换勾选,按钮/表单控件/layui 美化层自动豁免),选中态经 :class 高亮回显
- _cells/_operatHtml 含渲染产物 HTML,必须用 v-html 输出;纯文本字段用
{{ }} 原生插值(自动转义);处理函数内不得修改渲染上下文数据(冻结契约)
- 事件无需自行绑定:操作按钮与 switch 经页面级委托和 form 事件天然生效
@@ -40,13 +40,13 @@
:class="{'ua-data-card-checked': d._checked, 'ua-data-card-disabled': d._disabled}">
<!-- 图区:4:3 商品大图(撑满裁切不变形、圆角随卡片),无图或 404 时
降级为占位图标;右上角悬浮状态开关(半透明白底小容器),
左上角勾位图标按行选中态显示 -->
左上角勾位图标常显(.ua-data-card-check:未选中灰可点、选中变绿) -->
<div class="goodscard-cover">
<span class="goodscard-img-empty" title="未设置图片"><i class="layui-icon layui-icon-picture"></i></span>
<img v-if="d.logo" :src="d.logo" :alt="d.title" class="goodscard-img"
@error="$event.target.style.display = 'none'">
<div class="goodscard-status" v-html="d._cells.status"></div>
<i v-if="d._checked" class="layui-icon layui-icon-ok-circle goodscard-check"></i>
<i class="layui-icon layui-icon-ok-circle goodscard-check ua-data-card-check"></i>
</div>
<!-- 主体:名称(600 字重、最多两行截断)+ 分类徽标与销量同排 + 价格
层级(折扣价红大字、市场价灰删除线)+ 库存徽标(stock<20 红
@@ -144,7 +144,7 @@
position: absolute;
top: 8px;
left: 8px;
color: #1e9fff;
margin-left: 0;
font-size: 22px;
background-color: #fff;
border-radius: 50%;

View File

@@ -11,8 +11,8 @@
上下文契约(admin-table.js buildLayoutContext):
- rows:行上下文数组,d 与表格行数据同构(含原始字段 + _cells/_operatHtml/_checked/_disabled)
- list:列表上下文 {tableId, page, count, checkedAll}(Vue 形态不叫 _list)
- 行根元素携带 data-table-id + data-id 两属性即获得统一行选中委托(点击卡片
切换勾选,按钮/表单控件/layui 美化层自动豁免),选中态经 :class 高亮回显
- 行根元素携带 data-table-id + data-id 两属性即获得统一行选中委托(点击勾位
图标切换勾选,按钮/表单控件/layui 美化层自动豁免),选中态经 :class 高亮回显
- _cells/_operatHtml 含渲染产物 HTML,必须用 v-html 输出;纯文本字段用
{{ }} 原生插值(自动转义,与 laytpl 的 {{- }} 不同)
- 事件无需自行绑定:操作按钮与 switch 经页面级委托和 form 事件天然生效
@@ -45,6 +45,7 @@
<span class="usercard-account" :title="d.username">{{ d.username }}</span>
</div>
<div class="usercard-status" v-html="d._cells.status"></div>
<div class="ua-data-card-check"><i class="layui-icon layui-icon-ok-circle"></i></div>
</div>
<!-- 主体:紧凑小字段两列排布(手机无值显示 —,登录次数为 pill 徽标),
备注有值才渲染、单行省略;均为纯文本原始字段插值 -->