feat(client): 库存移动卡片品名后缀生产日期 + 商品抽屉生产日期行
- 原型先行(L1):mobile-atoms 新增 .mc-nm .mc-date 原子(xs muted mono 左距8), index.html 登记,m-inventory 卡片模板与详情 sheet 同步补生产日期 - MCard 新增 nmSuffix 插槽镜像 .mc-date;库存窄屏卡片品名后缀生产日期小字 - Product 模型补 production_date(只读侧,不进 toJson);商品抽屉信息区 新增「生产日期」行(分类后、当前库存前,mono) - 重生成库存移动 golden ×6(inventory_list_mobile / m_inventory 三主题) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@@ -14,6 +14,8 @@ class Product {
|
||||
final double? purchasePrice;
|
||||
final double? salePrice;
|
||||
final int? minStock;
|
||||
// 生产日期(YYYY-MM-DD,后端 Date 序列化,空串=未填)
|
||||
final String? productionDate;
|
||||
final String? description;
|
||||
final String? remark;
|
||||
final Map<String, dynamic>? customFields;
|
||||
@@ -41,6 +43,7 @@ class Product {
|
||||
this.purchasePrice,
|
||||
this.salePrice,
|
||||
this.minStock,
|
||||
this.productionDate,
|
||||
this.description,
|
||||
this.remark,
|
||||
this.customFields,
|
||||
@@ -75,6 +78,7 @@ class Product {
|
||||
minStock: json['min_stock'] != null
|
||||
? (json['min_stock'] as num).toInt()
|
||||
: null,
|
||||
productionDate: json['production_date'] as String?,
|
||||
description: json['description'] as String?,
|
||||
remark: json['remark'] as String?,
|
||||
customFields: json['custom_fields'] as Map<String, dynamic>?,
|
||||
|
||||
@@ -613,6 +613,8 @@ class _InventoryListScreenState extends ConsumerState<InventoryListScreen> {
|
||||
return MCard(
|
||||
onTap: item.productId != null ? () => _openEditor(item) : null,
|
||||
nm: item.productName.isEmpty ? '-' : item.productName,
|
||||
// 生产日期小字缀在品名后(原型 .mc-date,2026-07-10 用户口径)
|
||||
nmSuffix: (item.productionDate ?? '').isEmpty ? null : item.productionDate,
|
||||
sub: sub.isEmpty ? null : sub,
|
||||
badges: [DsTextIconBadge(status)],
|
||||
amtWidget: Text.rich(
|
||||
|
||||
@@ -101,6 +101,9 @@ class MCard extends StatelessWidget {
|
||||
/// mc-nm 标题(600 heading)。
|
||||
final String nm;
|
||||
|
||||
/// mc-date 标题后缀(原型 .mc-nm .mc-date:xs muted mono,左距 8);null 不渲染。
|
||||
final String? nmSuffix;
|
||||
|
||||
/// mc-sub 副行(xs muted mono);null 不渲染。
|
||||
final String? sub;
|
||||
|
||||
@@ -119,6 +122,7 @@ class MCard extends StatelessWidget {
|
||||
const MCard({
|
||||
super.key,
|
||||
required this.nm,
|
||||
this.nmSuffix,
|
||||
this.sub,
|
||||
this.badges = const [],
|
||||
this.amt,
|
||||
@@ -151,13 +155,32 @@ class MCard extends StatelessWidget {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(nm,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsBody,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: t.heading)),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.baseline,
|
||||
textBaseline: TextBaseline.alphabetic,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(nm,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsBody,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: t.heading)),
|
||||
),
|
||||
if (nmSuffix != null) ...[
|
||||
const SizedBox(width: 8),
|
||||
Text(nmSuffix!,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsXs,
|
||||
color: t.muted,
|
||||
fontFamily: AppFonts.mono,
|
||||
fontFamilyFallback:
|
||||
AppFonts.monoFallback)),
|
||||
],
|
||||
],
|
||||
),
|
||||
if (sub != null) ...[
|
||||
const SizedBox(height: 3),
|
||||
Text(sub!,
|
||||
|
||||
@@ -394,6 +394,9 @@ class _ProductEditorDrawerState extends ConsumerState<_ProductEditorDrawer> {
|
||||
if ((p.series ?? '').isNotEmpty) rows.add(('系列', b(p.series!)));
|
||||
if ((p.spec ?? '').isNotEmpty) rows.add(('规格', b(p.spec!)));
|
||||
if ((p.categoryName ?? '').isNotEmpty) rows.add(('分类', b(p.categoryName!)));
|
||||
if ((p.productionDate ?? '').isNotEmpty) {
|
||||
rows.add(('生产日期', b(p.productionDate!, mono: true)));
|
||||
}
|
||||
if (widget.qty != null) {
|
||||
rows.add((
|
||||
'当前库存',
|
||||
|
||||
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 235 KiB |
|
Before Width: | Height: | Size: 205 KiB After Width: | Height: | Size: 229 KiB |
|
Before Width: | Height: | Size: 213 KiB After Width: | Height: | Size: 237 KiB |
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 156 KiB |
@@ -437,7 +437,7 @@
|
||||
<section class="section" id="m-comp">
|
||||
<h2>移动专属组件 .m-*</h2><p class="desc">来自 <code>mobile-atoms.css</code> 的移动专属原子,由 <code>mobile-shell.js</code> 装配外壳。<b>复用上方公用原子</b>(按钮/徽章/分段/输入),此处只展示移动新增的 <code>.m-*</code>。</p>
|
||||
<div style="margin:0 0 16px"><a class="btn ghost" href="screens/mobile-kit.html"><svg viewBox="0 0 24 24"><use href="#i-ic62"/></svg>打开移动 UI Kit · 全部 .m-* 实机展示</a></div>
|
||||
<div class="pcard"><div class="pcard-h"><h3>移动壳 + 列表(实机预览)</h3><span class="tk">.m-top · .m-tabbar · .m-page · .m-kpi · .m-search · .m-filters/.m-pill · .m-card/.m-row · .m-fab</span></div>
|
||||
<div class="pcard"><div class="pcard-h"><h3>移动壳 + 列表(实机预览)</h3><span class="tk">.m-top · .m-tabbar · .m-page · .m-kpi · .m-search · .m-filters/.m-pill · .m-card/.m-row(.mc-nm 可带 .mc-date 日期后缀)· .m-fab</span></div>
|
||||
<div class="pcard-b" style="align-items:flex-start"><div class="mdemo">
|
||||
<div class="mphone">
|
||||
<div class="m-top"><div class="m-title">库存</div><div class="m-actions"><div class="m-ic"><svg viewBox="0 0 24 24"><use href="#i-shirt"/></svg></div><div class="m-ic"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg><span class="m-dot">3</span></div><div class="m-av">王</div></div></div>
|
||||
@@ -451,7 +451,7 @@
|
||||
<div class="m-search" style="margin-top:12px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="商品名 / 拼音 / 编码"></div>
|
||||
<div class="m-filters"><div class="m-pill on">全部</div><div class="m-pill">酱香</div><div class="m-pill">浓香</div><div class="m-pill">清香</div></div>
|
||||
<div class="m-section">商品 · 共 10</div>
|
||||
<a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">茅台 飞天 53°</div><div class="mc-sub">MT-FT-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-在售">在售</span><span class="mc-amt">128 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
|
||||
<a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">茅台 飞天 53°<span class="mc-date">2024-07-11</span></div><div class="mc-sub">MT-FT-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-在售">在售</span><span class="mc-amt">128 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
|
||||
<a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">剑南春 水晶剑</div><div class="mc-sub">JNC-SJ-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-缺货">缺货</span><span class="mc-amt">8 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
|
||||
</div></div>
|
||||
<nav class="m-tabbar">
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
.m-row{display:flex; align-items:center; gap:12px;}
|
||||
.m-row .mc-main{min-width:0; flex:1;}
|
||||
.m-row .mc-nm{font-weight:600; color:var(--heading); font-size:var(--fs-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||||
.m-row .mc-nm .mc-date{font-weight:400; font-size:var(--fs-xs); color:var(--muted); font-family:var(--font-mono); margin-left:8px;}
|
||||
.m-row .mc-sub{font-size:var(--fs-xs); color:var(--muted); margin-top:3px; font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||||
.m-row .mc-right{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none;}
|
||||
.m-row .mc-amt{font-weight:700; color:var(--heading); font-size:var(--fs-body); font-family:var(--font-mono);}
|
||||
|
||||
@@ -36,16 +36,16 @@
|
||||
<script src="mobile-shell.js"></script>
|
||||
<script>
|
||||
const ITEMS=[
|
||||
{name:'茅台 飞天 53°',code:'MT-FT-500',spec:'500ml×6',series:'飞天',batch:'PZ240711',qty:128,unit:'件',cost:'¥2,680',supplier:'贵州茅台经销',status:'在售'},
|
||||
{name:'五粮液 普五 52°',code:'WLY-PW-500',spec:'500ml×6',series:'普五',batch:'PZ240428',qty:64,unit:'件',cost:'¥1,050',supplier:'宜宾五粮液',status:'在售'},
|
||||
{name:'剑南春 水晶剑',code:'JNC-SJ-500',spec:'500ml×6',series:'水晶剑',batch:'PZ231115',qty:8,unit:'件',cost:'¥438',supplier:'绵竹剑南春',status:'已售'},
|
||||
{name:'国窖 1573',code:'GJ-1573-500',spec:'500ml×6',series:'1573',batch:'PZ240208',qty:42,unit:'件',cost:'¥980',supplier:'泸州老窖',status:'在售'},
|
||||
{name:'洋河 梦之蓝 M6',code:'YH-M6-500',spec:'550ml×6',series:'梦之蓝M6',batch:'PZ240520',qty:23,unit:'件',cost:'¥620',supplier:'洋河股份',status:'库存'},
|
||||
{name:'泸州老窖 特曲',code:'LZLJ-TQ-500',spec:'500ml×6',series:'特曲',batch:'PZ240630',qty:156,unit:'件',cost:'¥320',supplier:'泸州老窖',status:'在售'},
|
||||
{name:'习酒 窖藏 1988',code:'XJ-JC1988',spec:'500ml×6',series:'窖藏1988',batch:'PZ230918',qty:31,unit:'件',cost:'¥760',supplier:'贵州习酒',status:'在售'},
|
||||
{name:'汾酒 青花 20',code:'FJ-QH20-500',spec:'500ml×6',series:'青花20',batch:'PZ240112',qty:0,unit:'件',cost:'¥420',supplier:'山西杏花村',status:'已售'},
|
||||
{name:'郎酒 红花郎 15',code:'LJ-HHL15',spec:'500ml×6',series:'红花郎15',batch:'PZ240325',qty:54,unit:'件',cost:'¥560',supplier:'四川郎酒',status:'在售'},
|
||||
{name:'西凤酒 旗舰版',code:'XF-QJ-500',spec:'500ml×6',series:'旗舰版',batch:'PZ240614',qty:88,unit:'件',cost:'¥280',supplier:'陕西西凤',status:'在售'},
|
||||
{name:'茅台 飞天 53°',code:'MT-FT-500',spec:'500ml×6',series:'飞天',batch:'PZ240711',prod:'2024-07-11',qty:128,unit:'件',cost:'¥2,680',supplier:'贵州茅台经销',status:'在售'},
|
||||
{name:'五粮液 普五 52°',code:'WLY-PW-500',spec:'500ml×6',series:'普五',batch:'PZ240428',prod:'2024-04-28',qty:64,unit:'件',cost:'¥1,050',supplier:'宜宾五粮液',status:'在售'},
|
||||
{name:'剑南春 水晶剑',code:'JNC-SJ-500',spec:'500ml×6',series:'水晶剑',batch:'PZ231115',prod:'2023-11-15',qty:8,unit:'件',cost:'¥438',supplier:'绵竹剑南春',status:'已售'},
|
||||
{name:'国窖 1573',code:'GJ-1573-500',spec:'500ml×6',series:'1573',batch:'PZ240208',prod:'2024-02-08',qty:42,unit:'件',cost:'¥980',supplier:'泸州老窖',status:'在售'},
|
||||
{name:'洋河 梦之蓝 M6',code:'YH-M6-500',spec:'550ml×6',series:'梦之蓝M6',batch:'PZ240520',prod:'2024-05-20',qty:23,unit:'件',cost:'¥620',supplier:'洋河股份',status:'库存'},
|
||||
{name:'泸州老窖 特曲',code:'LZLJ-TQ-500',spec:'500ml×6',series:'特曲',batch:'PZ240630',prod:'2024-06-30',qty:156,unit:'件',cost:'¥320',supplier:'泸州老窖',status:'在售'},
|
||||
{name:'习酒 窖藏 1988',code:'XJ-JC1988',spec:'500ml×6',series:'窖藏1988',batch:'PZ230918',prod:'2023-09-18',qty:31,unit:'件',cost:'¥760',supplier:'贵州习酒',status:'在售'},
|
||||
{name:'汾酒 青花 20',code:'FJ-QH20-500',spec:'500ml×6',series:'青花20',batch:'PZ240112',prod:'2024-01-12',qty:0,unit:'件',cost:'¥420',supplier:'山西杏花村',status:'已售'},
|
||||
{name:'郎酒 红花郎 15',code:'LJ-HHL15',spec:'500ml×6',series:'红花郎15',batch:'PZ240325',prod:'2024-03-25',qty:54,unit:'件',cost:'¥560',supplier:'四川郎酒',status:'在售'},
|
||||
{name:'西凤酒 旗舰版',code:'XF-QJ-500',spec:'500ml×6',series:'旗舰版',batch:'PZ240614',prod:'2024-06-14',qty:88,unit:'件',cost:'¥280',supplier:'陕西西凤',status:'在售'},
|
||||
];
|
||||
const state={q:''};
|
||||
|
||||
@@ -57,7 +57,7 @@ function render(){
|
||||
if(!rows.length){ L.innerHTML=`<div class="m-empty"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>没有匹配的商品 · 调整筛选或搜索</div>`; return; }
|
||||
L.innerHTML=rows.map((it,i)=>`<a class="m-card" onclick="openItem(${ITEMS.indexOf(it)})">
|
||||
<div class="m-row">
|
||||
<div class="mc-main"><div class="mc-nm">${it.name}</div><div class="mc-sub">${it.code} · ${it.spec} · ${it.cost}</div></div><!-- 单价=成本进价,仅管理员可见(2026-07-06) -->
|
||||
<div class="mc-main"><div class="mc-nm">${it.name}<span class="mc-date">${it.prod}</span></div><div class="mc-sub">${it.code} · ${it.spec} · ${it.cost}</div></div><!-- 单价=成本进价,仅管理员可见(2026-07-06) -->
|
||||
<div class="mc-right"><span class="badge b-${it.status}">${it.status}</span><span class="mc-amt"><span class="${it.qty<=10?'qty-low':''}">${it.qty}</span> ${it.unit}</span></div>
|
||||
<div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
|
||||
</div>
|
||||
@@ -66,7 +66,7 @@ function render(){
|
||||
function openItem(idx){ const it=ITEMS[idx];
|
||||
if(!peEdit||peEdit.idx!==idx) peEdit={idx,imgs:[PE_SAMPLE[0],'',''],introName:'',introBody:''};
|
||||
const hasIntro=!!peEdit.introName;
|
||||
openSheet(it.name, `<div class="drow"><span>编码</span><b style="font-family:var(--font-mono)">${it.code}</b></div><div class="drow"><span>规格</span><b>${it.spec}</b></div><div class="drow"><span>系列</span><b>${it.series}</b></div><div class="drow"><span>批次号</span><b style="font-family:var(--font-mono)">${it.batch}</b></div><div class="drow"><span>当前库存</span><b>${it.qty} ${it.unit}</b></div><div class="drow"><span>成本价</span><b>${it.cost}</b></div><div class="drow"><span>供应商</span><b>${it.supplier}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b style="display:flex;align-items:center;gap:10px"><span class="badge b-${it.status}">${it.status}</span>${it.status==='已售'?'':`<button class="switch ${it.status==='在售'?'on':''}" aria-label="挂售切换" onclick="this.classList.toggle('on');const b=this.previousElementSibling;const on=this.classList.contains('on');b.textContent=on?'在售':'库存';b.className='badge '+(on?'b-在售':'b-库存');"></button>`}</b></div>
|
||||
openSheet(it.name, `<div class="drow"><span>编码</span><b style="font-family:var(--font-mono)">${it.code}</b></div><div class="drow"><span>规格</span><b>${it.spec}</b></div><div class="drow"><span>系列</span><b>${it.series}</b></div><div class="drow"><span>批次号</span><b style="font-family:var(--font-mono)">${it.batch}</b></div><div class="drow"><span>生产日期</span><b style="font-family:var(--font-mono)">${it.prod}</b></div><div class="drow"><span>当前库存</span><b>${it.qty} ${it.unit}</b></div><div class="drow"><span>成本价</span><b>${it.cost}</b></div><div class="drow"><span>供应商</span><b>${it.supplier}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b style="display:flex;align-items:center;gap:10px"><span class="badge b-${it.status}">${it.status}</span>${it.status==='已售'?'':`<button class="switch ${it.status==='在售'?'on':''}" aria-label="挂售切换" onclick="this.classList.toggle('on');const b=this.previousElementSibling;const on=this.classList.contains('on');b.textContent=on?'在售':'库存';b.className='badge '+(on?'b-在售':'b-库存');"></button>`}</b></div>
|
||||
<div class="pe-card" style="margin-top:14px"><div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic27"/></svg></span>商品图片</div>
|
||||
<div class="pe-b"><div class="pe-gallery" id="mGallery"></div><div class="pe-note">建议主图为白底产品图,可再加细节图(瓶身/防伪)与场景图。</div></div></div>
|
||||
<div class="pe-card"><div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic28"/></svg></span>商品介绍 / 卖点</div>
|
||||
|
||||