Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(diy-card): 快捷操作 2.17~2.19.1 — 5 动作/图标自定义/图层式管理/素材图标库/次序调整

Browse Source 
- common.js: ACT_GRID_ICONS 结构化{glyph|css} + save 紫档 + WAP_LINE_ICONS(SVG 线稿
  data URI, 自写 b64ascii) + CARD_ICON_LIB 素材库 30 枚(与后端三源同步) +
  normalizeActVis/ActLabels/CustomActs/ActOrder + libIconBg 实时上色
- mini.vue: 宫格图标优先级 img > 素材库 > SVG 线稿 > 首字; acts computed 重构
  (actVis 显隐过滤 + actLabels 改名 + actOrder 次序 + order 外扩展类型尾接 +
  customActs 尾接 + 四 cfg 字段合并); 操作区双位置 + 独立成块样式 + qrSrc 自定义图
- show/self.vue: doAct 补 save 分支(goSaveContact 资料白名单下发) + miniConfig
  透传 actVis/actLabels/actOrder/customActs/qrImage 等 2.17~2.19 字段
- 测试: diy-card 7 套件 111 项全绿(style-v2 22 项含 svg 快照/素材库三源同步/
  template 配平/嵌套结构反例)
This commit is contained in:
ZF Sun
2026-10-24 08:48:28 +08:00
parent 0b3a49f0d1
commit a26b9d6601
8 changed files with 1732 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
tests/diy-card-ab-visual.test.js
View File

@@ -44,12 +44,29 @@ test('common: rowIconFor 字段→图标映射(无字形字段退化为空)', as
assert.equal(m.rowIconFor('phone'), 'icon-dianhua');
assert.equal(m.rowIconFor('wechat'), 'icon-weixin');
assert.equal(m.rowIconFor('address'), 'icon-dizhi');
// 无字形: 邮箱/网站/自定义/未知 → 空串(模板退化为文字标签)
// 无字形: 邮箱/网站/自定义/未知 → 空串(模板走 CSS 描边图标或文字标签档)
assert.equal(m.rowIconFor('email'), '');
assert.equal(m.rowIconFor('website'), '');
assert.equal(m.rowIconFor('custom'), '');
assert.equal(m.rowIconFor(''), '');
assert.equal(m.rowIconFor(undefined), '');
// 2.17.1: rowCssIconFor —— 邮箱/网站走 CSS 描边图标(信封/线框地球), 口径互补
assert.equal(m.rowCssIconFor('email'), 'mail');
assert.equal(m.rowCssIconFor('website'), 'web');
assert.equal(m.rowCssIconFor('mobile'), '', '有 iconfont 字形的字段不走 CSS 档');
assert.equal(m.rowCssIconFor(''), '');
assert.equal(m.rowCssIconFor(undefined), '');
// 2.18.1: 宫格图标 = WAP_LINE_ICONS(与 wap detail 快捷操作同源 SVG 线稿), wx/save 固定色
assert.equal(m.WAP_LINE_ICONS.tel.mode, 'stroke');
assert.equal(m.WAP_LINE_ICONS.wx.mode, 'fill');
assert.equal(m.WAP_LINE_ICONS.wx.color, '#07C160', 'wx 微信绿固定色');
assert.equal(m.WAP_LINE_ICONS.save.color, '#FF9500', 'save 通讯录橙固定色');
assert.equal(m.WAP_LINE_ICONS.mail.mode, 'stroke');
assert.equal(m.WAP_LINE_ICONS.web.mode, 'stroke');
assert.ok(m.svgLineIconBg('unknown', '#000') === '', '未知类型空串');
assert.ok(m.svgLineIconBg('tel', '#0F6E56').indexOf('base64,') > 0, 'data URI base64 形态');
// 宫格 preset 补 save 紫色档
assert.deepEqual(m.ACT_GRID_PRESETS.save, { bg: '#F0E9FB', fg: '#5B3DA8' });
});
test('common: rowActOf 由 href 派生点击动作', async () => {
@@ -80,10 +97,13 @@ test('common: 二维码四档归一化 + 尺寸表', async () => {
// =============================================================
test('mini: 资料行图标列 + 文字标签退化', () => {
assert.match(miniSrc, /<text v-if="rowIcon\(row\)" class="row-icon iconfont" :class="rowIcon\(row\)"/);
// 2.17.1: 行首新增 CSS 描边图标档(邮箱/网站), iconfont 档退为 v-else-if
assert.match(miniSrc, /<view v-if="rowCssIcon\(row\)" class="row-css-wrap">/);
assert.match(miniSrc, /<text v-else-if="rowIcon\(row\)" class="row-icon iconfont" :class="rowIcon\(row\)"/);
assert.match(miniSrc, /<text v-else class="row-label"/);
// rowIcon 受 showRowIcons 开关控制(默认开)
// rowIcon 受 showRowIcons 开关控制(默认开); CSS 档同受此开关
assert.match(miniSrc, /rowIcon\(row\)\s*\{\s*return flagOn\(this\.c\.showRowIcons,\s*true\)/);
assert.match(miniSrc, /rowCssIcon\(row\)\s*\{\s*return flagOn\(this\.c\.showRowIcons,\s*true\)/);
});
test('mini: 资料行可点(开关 + href 派生 + emit row-act)', () => {
@@ -103,8 +123,9 @@ test('mini: 二维码四档渲染分支齐全', () => {
assert.match(miniSrc, /v-if="showQrHead" class="mini-qr mini-qr-head"/);
assert.match(miniSrc, /v-if="showQrRows" class="mini-qr"/);
assert.match(miniSrc, /v-if="showQrBottom" class="mini-qr"/);
// 总条件仍要求名片有 qr_url
assert.match(miniSrc, /showQrBase\(\)\s*\{\s*return flagOn\(this\.c\.showQr,\s*false\) && !!\(this\.card && this\.card\.qr_url\)/);
// 总条件仍要求有码源(2.18: 自定义图 qrImage 优先, 回落名片码)
assert.match(miniSrc, /showQrBase\(\)\s*\{\s*return flagOn\(this\.c\.showQr,\s*false\) && !!this\.qrSrc/);
assert.match(miniSrc, /qrSrc\(\)\s*\{[\s\S]*?String\(this\.c\.qrImage \|\| ''\)\.trim\(\)[\s\S]*?card && this\.card\.qr_url/);
});
test('mini: corner 档 Logo 避让 + 资料行/操作区动态让位', () => {
@@ -113,7 +134,9 @@ test('mini: corner 档 Logo 避让 + 资料行/操作区动态让位', () => {
// 头部水平让位 = cornerHeadStyle 动态反算(审计修复: 静态 180rpx 在自定义大尺寸下不足)
assert.match(miniSrc, /<view class="mini-head" :style="cornerHeadStyle">/);
// 资料行/操作区让位 = cornerClearStyle 动态反算(自定义大尺寸/关 tip 自动跟随, 不用 calc)
assert.match(miniSrc, /:style="cornerClearStyle"/);
// 2.18: 让位经 rowsClearStyle 分流(操作区在上方时资料行不重复位移); 操作区为 独立块样式+让位 合并绑定
assert.match(miniSrc, /rowsClearStyle\(\)\s*\{[\s\S]*?this\.actsAbove \? \{\} : this\.cornerClearStyle/);
assert.match(miniSrc, /:style="\[actsBlockStyle, cornerClearStyle\]"/);
// 静态 CSS 让位必须已移除(动态值才是单一事实来源)
assert.ok(!/padding-right: 180rpx;/.test(miniSrc), '静态 180rpx 让位应废弃, 改由 cornerHeadStyle 动态给出');
// 浮层 CSS 只定位于层次; 视觉衬底(白卡等)由 qrBlockStyle 内联决定