好了，设计现在需要给美国那边看，估计还有修改吧

“wangming”
1 parent 940fb6ea
Showing 14 changed files with 471 additions and 57 deletions
美国版/Food Labeling Management App UniApp/src/components/AppIcon.vue
美国版/Food Labeling Management App UniApp/src/locales/en.ts
美国版/Food Labeling Management App UniApp/src/locales/zh.ts
美国版/Food Labeling Management App UniApp/src/pages/labels/labels.vue
美国版/Food Labeling Management App UniApp/src/pages/labels/preview.vue
美国版/Food Labeling Management App UniApp/src/pages/login/login.vue
美国版/Food Labeling Management App UniApp/src/pages/more/label-report.vue
美国版/Food Labeling Management App UniApp/src/pages/more/print-detail.vue
美国版/Food Labeling Management App UniApp/src/pages/more/print-log.vue
美国版/Food Labeling Management App UniApp/src/pages/store-select/store-select.vue
美国版/Food Labeling Management App UniApp/src/static/chicken lable.png
美国版/Food Labeling Management App UniApp/src/static/chicken-lable.png
美国版/Food Labeling Management App UniApp/src/utils/printLog.ts
美国版/Food Labeling Management App UniApp/src/utils/printRecords.ts
@@ -53,6 +53,8 @@ const icons: Record&lt;string, string&gt; = {
   lock: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>',
   chevronDown: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>',
   chevronUp: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>',
+  squares: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>',
+  list: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>',
 }
  
 const svgContent = computed(() => icons[props.name] || icons.food)
@@ -4,7 +4,7 @@ export default {
     appName: 'Food Label System',
     employeePortal: 'Employee Portal',
     email: 'Email',
-    emailPlaceholder: 'your.email@company.com',
+    emailPlaceholder: "your.email{'@'}company.com",
     password: 'Password',
     passwordPlaceholder: 'Enter your password',
     rememberMe: 'Remember me',
@@ -4,7 +4,7 @@ export default {
     appName: '食品标签系统',
     employeePortal: '员工门户',
     email: '电子邮件',
-    emailPlaceholder: 'your.email@company.com',
+    emailPlaceholder: "your.email{'@'}company.com",
     password: '密码',
     passwordPlaceholder: '输入您的密码',
     rememberMe: '记住我',
@@ -103,7 +103,7 @@
                         <text class="type-badge-text">{{ product.labelTypes.length }} Types</text>
                       </view>
                     </view>
-                    <text class="food-name">{{ product.name }}</text>
+                    <text class="food-name">{{ getDisplayName(product) }}</text>
                     <text class="food-desc">{{ product.templateName }}</text>
                   </view>
                 </view>
@@ -117,7 +117,7 @@
     <view v-if="showSubTypeModal" class="modal-mask" @click="showSubTypeModal = false">
       <view class="modal-body" @click.stop>
         <text class="modal-title">Select Label Type</text>
-        <text class="modal-desc">{{ selectedProduct ? selectedProduct.name : '' }}</text>
+        <text class="modal-desc">{{ selectedProduct ? getDisplayName(selectedProduct) : '' }}</text>
         <view class="subtype-list">
           <view
             v-for="lt in currentLabelTypes"
@@ -396,6 +396,14 @@ const productCategoriesByLabel: Record&lt;string, ProductCategory[]&gt; = {
   ],
 }
  
+// 按详情页规则：chicken→Chicken，2"x6"/2"x4"→Cheese Burger Deluxe，其余→Syrup（图片仍用产品图）
+function getDisplayName(product: Product): string {
+  if (product.id === 'chicken') return 'Chicken'
+  const size = product.templateSize || ''
+  if (size.indexOf('2"x6"') >= 0 || size.indexOf('2"x4"') >= 0) return 'Cheese Burger Deluxe'
+  return 'Syrup'
+}
+
 const filteredProductCategories = computed(() => {
   const cats = productCategoriesByLabel[selectedCategory.value] || []
   const s = searchTerm.value.toLowerCase()
@@ -405,7 +413,8 @@ const filteredProductCategories = computed(() =&gt; {
       return {
         ...cat,
         products: cat.products.filter(function (p) {
-          return p.name.toLowerCase().indexOf(s) >= 0
+          const displayName = getDisplayName(p)
+          return p.name.toLowerCase().indexOf(s) >= 0 || displayName.toLowerCase().indexOf(s) >= 0
         }),
       }
     })
@@ -54,6 +54,10 @@
  
       <view class="info-row">
         <view class="info-item">
+          <text class="info-label">Label ID</text>
+          <text class="info-value">{{ labelId }}</text>
+        </view>
+        <view class="info-item">
           <text class="info-label">Last Edited</text>
           <text class="info-value">{{ lastEdited }}</text>
         </view>
@@ -94,6 +98,10 @@
           <view class="modal-label-inner">
             <image :src="labelImage" class="modal-label-img" mode="widthFix" />
           </view>
+          <view class="modal-label-id">
+            <text class="modal-label-id-label">Label ID</text>
+            <text class="modal-label-id-value">{{ labelId }}</text>
+          </view>
         </view>
       </view>
     </view>
@@ -109,6 +117,8 @@ import AppIcon from &#39;../../components/AppIcon.vue&#39;
 import SideMenu from '../../components/SideMenu.vue'
 import LocationPicker from '../../components/LocationPicker.vue'
 import { getStatusBarHeight } from '../../utils/statusBar'
+import { generateNextLabelId } from '../../utils/printLog'
+import chickenLabelImg from '../../static/chicken-lable.png'
  
 const statusBarHeight = getStatusBarHeight()
 const isPrinting = ref(false)
@@ -119,6 +129,7 @@ const showPreviewModal = ref(false)
 const btConnected = ref(false)
 const btDeviceName = ref('')
  
+const productId = ref('chicken')
 const productName = ref('Chicken')
 const productCategory = ref('Meat')
 const labelTypeName = ref('')
@@ -126,8 +137,12 @@ const templateSize = ref(&#39;2&quot;x2&quot;&#39;)
 const templateName = ref('Basic')
 const lastEdited = ref('2025.12.03 11:45')
 const locationName = ref('Location A')
+const labelId = ref('')
  
 const labelImage = computed(() => {
+  if (productId.value === 'chicken') {
+    return chickenLabelImg
+  }
   const size = templateSize.value
   if (size.indexOf('2"x6"') >= 0 || size.indexOf('2"x4"') >= 0) {
     return '/static/lable2.png'
@@ -135,10 +150,13 @@ const labelImage = computed(() =&gt; {
   return '/static/lable1.png'
 })
  
-// 产品名称按标签模板固定：lable1 → Syrup，lable2 → Cheese Burger Deluxe
-const displayProductName = computed(() =>
-  labelImage.value.includes('lable1') ? 'Syrup' : 'Cheese Burger Deluxe'
-)
+// 按详情规则与产品列表一致：chicken→Chicken，lable2→Cheese Burger Deluxe，lable1→Syrup
+const displayProductName = computed(() => {
+  if (productId.value === 'chicken') return 'Chicken'
+  const size = templateSize.value
+  if (size.indexOf('2"x6"') >= 0 || size.indexOf('2"x4"') >= 0) return 'Cheese Burger Deluxe'
+  return 'Syrup'
+})
  
 onShow(() => {
   const name = uni.getStorageSync('btDeviceName')
@@ -178,6 +196,7 @@ onLoad((opts: any) =&gt; {
  
   const product = productMap[pid]
   if (product) {
+    productId.value = pid
     productName.value = product.name
     productCategory.value = product.category
     templateSize.value = product.templateSize
@@ -194,6 +213,7 @@ onLoad((opts: any) =&gt; {
  
   const storeId = uni.getStorageSync('storeId') || '001'
   locationName.value = 'Location A'
+  labelId.value = generateNextLabelId()
 })
  
 const increment = () => { if (printQty.value < 99) printQty.value++ }
@@ -442,18 +462,22 @@ const handlePrint = () =&gt; {
  
 .info-row {
   display: flex;
-  gap: 16rpx;
   margin-bottom: 24rpx;
 }
  
 .info-item {
   flex: 1;
+  min-width: 0;
   background: #fff;
   padding: 20rpx 24rpx;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
  
+.info-item + .info-item {
+  margin-left: 10rpx;
+}
+
 .info-label {
   font-size: 22rpx;
   color: #9ca3af;
@@ -614,6 +638,28 @@ const handlePrint = () =&gt; {
   padding: 24rpx;
 }
  
+.modal-label-id {
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1rpx solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.modal-label-id-label {
+  font-size: 26rpx;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.modal-label-id-value {
+  font-size: 28rpx;
+  color: #111827;
+  font-weight: 600;
+}
+
 .modal-top {
   display: flex;
   justify-content: space-between;
 <template>
   <view class="login-page">
-    <view class="header-hero" :style="{ paddingTop: (statusBarHeight + 40) + 'px' }">
+    <view class="header-hero" :style="{ paddingTop: (statusBarHeight + 16) + 'px' }">
       <view class="logo-section">
         <image class="login-logo" src="/static/logo_us.png" mode="aspectFit" />
         <text class="hero-sub">{{ t('login.employeePortal') }}</text>
@@ -14,6 +14,7 @@
           <input
             v-model="email"
             type="text"
+            inputmode="email"
             class="input"
             :placeholder="t('login.emailPlaceholder')"
             placeholder-class="placeholder"
@@ -77,14 +78,14 @@ const handleLogin = () =&gt; {
 .login-page {
   min-height: 100vh;
   background: #f9fafb;
-  display: flex;
-  flex-direction: column;
+  padding-bottom: 48rpx;
 }
  
 .header-hero {
   background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
-  padding: 0 48rpx 64rpx;
+  padding: 0 48rpx 24rpx;
   text-align: center;
+  flex-shrink: 0;
 }
  
 .logo-section {
@@ -94,9 +95,9 @@ const handleLogin = () =&gt; {
 }
  
 .login-logo {
-  width: 420rpx;
-  height: 140rpx;
-  margin-bottom: 20rpx;
+  width: 360rpx;
+  height: 120rpx;
+  margin-bottom: 12rpx;
   background: rgba(255,255,255,0.92);
   border-radius: 16rpx;
   padding: 16rpx;
@@ -108,9 +109,7 @@ const handleLogin = () =&gt; {
 }
  
 .form-wrap {
-  flex: 1;
-  padding: 48rpx;
-  margin-top: -32rpx;
+  padding: 24rpx 48rpx 48rpx;
 }
  
 .form-card {
@@ -134,10 +133,14 @@ const handleLogin = () =&gt; {
  
 .input {
   height: 96rpx;
+  min-height: 48px;
   padding: 0 24rpx;
   background: #f3f4f6;
   border-radius: 16rpx;
   font-size: 32rpx;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
 }
  
 .placeholder {
@@ -15,6 +15,33 @@
       </view>
     </view>
  
+    <view class="period-bar">
+      <view
+        v-for="p in periodOptions"
+        :key="p.value"
+        class="period-btn"
+        :class="{ active: period === p.value }"
+        @click="selectPeriod(p.value)"
+      >
+        <text class="period-text">{{ p.label }}</text>
+      </view>
+    </view>
+
+    <view v-if="period === 'custom'" class="custom-date-bar">
+      <view class="date-field">
+        <text class="date-label">Start</text>
+        <picker mode="date" :value="customStart" :end="customEnd || '2099-12-31'" @change="onStartChange">
+          <view class="date-picker-btn">{{ customStart || 'Select' }}</view>
+        </picker>
+      </view>
+      <view class="date-field">
+        <text class="date-label">End</text>
+        <picker mode="date" :value="customEnd" :start="customStart || '2000-01-01'" @change="onEndChange">
+          <view class="date-picker-btn">{{ customEnd || 'Select' }}</view>
+        </picker>
+      </view>
+    </view>
+
     <scroll-view class="content" scroll-y>
       <!-- 指标卡 -->
       <view class="metrics-grid">
@@ -104,6 +131,42 @@ import { getStatusBarHeight } from &#39;../../utils/statusBar&#39;
  
 const statusBarHeight = getStatusBarHeight()
 const isMenuOpen = ref(false)
+const period = ref('7d')
+const customStart = ref('')
+const customEnd = ref('')
+
+const periodOptions = [
+  { value: '7d', label: 'Last 7 Days' },
+  { value: '30d', label: 'Last 30 Days' },
+  { value: '90d', label: 'Last 90 Days' },
+  { value: 'custom', label: 'Custom' },
+]
+
+function selectPeriod(val: string) {
+  period.value = val
+  if (val === 'custom') {
+    const today = formatDate(new Date())
+    const weekAgo = new Date()
+    weekAgo.setDate(weekAgo.getDate() - 7)
+    customStart.value = customStart.value || formatDate(weekAgo)
+    customEnd.value = customEnd.value || today
+  }
+}
+
+function formatDate(d: Date): string {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+function onStartChange(e: any) {
+  customStart.value = e.detail.value
+}
+
+function onEndChange(e: any) {
+  customEnd.value = e.detail.value
+}
  
 const categoryDataRaw = [
   { name: 'Dairy', value: 450 },
@@ -187,6 +250,67 @@ const goBack = () =&gt; {
   color: #fff;
 }
  
+.period-bar {
+  display: flex;
+  gap: 12rpx;
+  padding: 16rpx 28rpx;
+  background: #fff;
+  border-bottom: 1rpx solid #e5e7eb;
+}
+
+.period-btn {
+  flex: 1;
+  padding: 16rpx 24rpx;
+  border-radius: 12rpx;
+  background: #f3f4f6;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.period-btn.active {
+  background: linear-gradient(135deg, #1F3A8A, #1447E6);
+}
+
+.period-btn.active .period-text {
+  color: #fff;
+}
+
+.period-text {
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.custom-date-bar {
+  display: flex;
+  gap: 24rpx;
+  padding: 20rpx 28rpx;
+  background: #fff;
+  border-bottom: 1rpx solid #e5e7eb;
+}
+
+.date-field {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.date-label {
+  font-size: 24rpx;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.date-picker-btn {
+  padding: 20rpx 24rpx;
+  background: #f3f4f6;
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  color: #111827;
+  border: 2rpx solid #e5e7eb;
+}
+
 .content {
   flex: 1;
   padding: 24rpx 28rpx 40rpx;
@@ -378,10 +502,10 @@ const goBack = () =&gt; {
   font-size: 24rpx;
 }
  
-.col-name { flex: 1; min-width: 0; }
-.col-cat { flex: 0 0 140rpx; }
-.col-total { flex: 0 0 120rpx; text-align: right; }
-.col-pct { flex: 0 0 88rpx; text-align: right; }
+.col-name { flex: 1; min-width: 0; text-align: left; }
+.col-cat { flex: 0 0 140rpx; text-align: left; }
+.col-total { flex: 0 0 120rpx; text-align: left; }
+.col-pct { flex: 0 0 88rpx; text-align: left; }
  
 .product-row:not(.header) .col-name { color: #111827; font-weight: 500; }
 .product-row:not(.header) .col-cat { color: #6b7280; }
@@ -27,6 +27,10 @@
         <text class="detail-section-title">Print Info</text>
         <view class="info-card">
           <view class="info-row">
+            <text class="info-label">Label ID</text>
+            <text class="info-value">{{ record.labelId }}</text>
+          </view>
+          <view class="info-row">
             <text class="info-label">Print Time</text>
             <text class="info-value">{{ record.dateFull }} {{ record.time }}</text>
           </view>
@@ -74,7 +78,8 @@ import AppIcon from &#39;../../components/AppIcon.vue&#39;
 import SideMenu from '../../components/SideMenu.vue'
 import LocationPicker from '../../components/LocationPicker.vue'
 import { getStatusBarHeight } from '../../utils/statusBar'
-import { getRecordById } from '../../utils/printRecords'
+import { getRecordByLabelId } from '../../utils/printLog'
+import chickenLabelImg from '../../static/chicken-lable.png'
  
 const statusBarHeight = getStatusBarHeight()
 const isMenuOpen = ref(false)
@@ -83,6 +88,9 @@ const record = ref&lt;any&gt;(null)
 const labelImage = computed(() => {
   const r = record.value
   if (!r) return '/static/lable1.png'
+  if (r.productName === 'Chicken') {
+    return chickenLabelImg
+  }
   const size = r.templateSize || ''
   if (size.indexOf('2"x6"') >= 0 || size.indexOf('2"x4"') >= 0) {
     return '/static/lable2.png'
@@ -90,15 +98,20 @@ const labelImage = computed(() =&gt; {
   return '/static/lable1.png'
 })
  
-// 产品名称按标签模板固定：lable1 → Syrup，lable2 → Cheese Burger Deluxe
-const displayProductName = computed(() =>
-  labelImage.value.includes('lable1') ? 'Syrup' : 'Cheese Burger Deluxe'
-)
+// 与产品列表、详情一致：按标签图 Chicken/Syrup/Cheese Burger Deluxe
+const displayProductName = computed(() => {
+  const r = record.value
+  if (!r) return ''
+  if (r.productName === 'Chicken') return 'Chicken'
+  const size = r.templateSize || ''
+  if (size.indexOf('2"x6"') >= 0 || size.indexOf('2"x4"') >= 0) return 'Cheese Burger Deluxe'
+  return 'Syrup'
+})
  
 onLoad((opts: any) => {
-  const id = opts && opts.id
-  if (id) {
-    record.value = getRecordById(id)
+  const labelId = opts && opts.labelId
+  if (labelId) {
+    record.value = getRecordByLabelId(labelId)
   }
 })
  
@@ -15,8 +15,28 @@
       </view>
     </view>
  
+    <view class="view-toggle">
+      <view
+        class="toggle-btn"
+        :class="{ active: viewMode === 'card' }"
+        @click="viewMode = 'card'"
+      >
+        <AppIcon name="squares" size="sm" :color="viewMode === 'card' ? 'white' : 'gray'" />
+        <text class="toggle-text">Card</text>
+      </view>
+      <view
+        class="toggle-btn"
+        :class="{ active: viewMode === 'list' }"
+        @click="viewMode = 'list'"
+      >
+        <AppIcon name="list" size="sm" :color="viewMode === 'list' ? 'white' : 'gray'" />
+        <text class="toggle-text">List</text>
+      </view>
+    </view>
+
     <scroll-view class="content" scroll-y>
-      <view class="log-list">
+      <!-- 卡片视图 -->
+      <view v-if="viewMode === 'card'" class="log-list">
         <view
           v-for="row in printLogData"
           :key="row.labelId"
@@ -56,6 +76,34 @@
           </view>
         </view>
       </view>
+
+      <!-- 列表视图 -->
+      <view v-else class="log-table-wrap">
+        <view class="log-table">
+          <view class="log-table-header">
+            <text class="th th-product">Product</text>
+            <text class="th th-id">Label ID</text>
+            <text class="th th-printed">Printed At</text>
+            <text class="th th-expires">Expires</text>
+            <text class="th th-action">Action</text>
+          </view>
+          <view
+            v-for="row in printLogData"
+            :key="row.labelId"
+            class="log-table-row"
+          >
+            <text class="td td-product">{{ row.productName }}</text>
+            <text class="td td-id">{{ row.labelId }}</text>
+            <text class="td td-printed">{{ row.printedAt }}</text>
+            <text class="td td-expires">{{ row.expiryDate }}</text>
+            <view class="td td-action">
+              <view class="reprint-btn-sm" @click="handleReprint(row)">
+                <AppIcon name="printer" size="sm" color="white" />
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
     </scroll-view>
  
     <SideMenu v-model="isMenuOpen" />
@@ -68,20 +116,16 @@ import AppIcon from &#39;../../components/AppIcon.vue&#39;
 import SideMenu from '../../components/SideMenu.vue'
 import LocationPicker from '../../components/LocationPicker.vue'
 import { getStatusBarHeight } from '../../utils/statusBar'
+import { printLogList } from '../../utils/printLog'
  
 const statusBarHeight = getStatusBarHeight()
 const isMenuOpen = ref(false)
+const viewMode = ref<'card' | 'list'>('card')
  
-const printLogData = ref([
-  { labelId: '1-251201', productName: 'Whole Milk', category: 'Dairy', template: '2"x2" Basic', printedAt: '2024-03-20 09:30 AM', printedBy: 'Alice Johnson', location: 'Downtown Store (101)', expiryDate: '2024-03-27' },
-  { labelId: '2-251201', productName: 'Ground Beef', category: 'Meat', template: '2"x2" Basic', printedAt: '2024-03-20 10:15 AM', printedBy: 'Bob Smith', location: 'Uptown Store (102)', expiryDate: '2024-03-23' },
-  { labelId: '3-251201', productName: 'Croissant', category: 'Bakery', template: '2"x2" Basic', printedAt: '2024-03-19 14:00 PM', printedBy: 'Charlie Brown', location: 'Downtown Store (101)', expiryDate: '2024-03-20' },
-  { labelId: '4-251201', productName: 'Caesar Salad', category: 'Deli', template: '2"x6" G\'n\'G !!!', printedAt: '2024-03-18 11:45 AM', printedBy: 'Alice Johnson', location: 'Downtown Store (101)', expiryDate: '2024-03-21' },
-  { labelId: '5-251201', productName: 'Orange Juice', category: 'Beverage', template: '2"x2" Basic', printedAt: '2024-03-18 08:20 AM', printedBy: 'Bob Smith', location: 'Airport Kiosk (201)', expiryDate: '2024-03-25' },
-])
+const printLogData = ref(printLogList)
  
 const handleReprint = (row: any) => {
-  uni.showToast({ title: 'Reprint: ' + row.productName, icon: 'none' })
+  uni.navigateTo({ url: `/pages/more/print-detail?labelId=${encodeURIComponent(row.labelId)}` })
 }
  
 const goBack = () => {
@@ -250,4 +294,125 @@ const goBack = () =&gt; {
   font-weight: 600;
   color: #fff;
 }
+
+.view-toggle {
+  display: flex;
+  gap: 12rpx;
+  padding: 16rpx 28rpx;
+  background: #fff;
+  border-bottom: 1rpx solid #e5e7eb;
+}
+
+.toggle-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: 16rpx 24rpx;
+  border-radius: 12rpx;
+  background: #f3f4f6;
+  transition: all 0.2s;
+}
+
+.toggle-btn.active {
+  background: linear-gradient(135deg, #1F3A8A, #1447E6);
+}
+
+.toggle-btn.active .toggle-text {
+  color: #fff;
+}
+
+.toggle-text {
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.log-table-wrap {
+  background: #fff;
+  border-radius: 20rpx;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
+  border: 1rpx solid #e5e7eb;
+}
+
+/* 确保横向滚动条可见（H5/浏览器） */
+.log-table-wrap::-webkit-scrollbar {
+  height: 6px;
+}
+.log-table-wrap::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+.log-table-wrap::-webkit-scrollbar-track {
+  background: #f3f4f6;
+}
+
+.log-table {
+  width: max-content;
+  min-width: 100%;
+}
+
+.log-table-header {
+  display: flex;
+  padding: 24rpx 28rpx;
+  gap: 16rpx;
+  background: #fafbfc;
+  border-bottom: 1rpx solid #e5e7eb;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.log-table-row {
+  display: flex;
+  padding: 24rpx 28rpx;
+  gap: 16rpx;
+  border-bottom: 1rpx solid #e5e7eb;
+  align-items: center;
+  font-size: 26rpx;
+}
+
+.log-table-row:last-child {
+  border-bottom: none;
+}
+
+.th, .td {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.th-product, .td-product { flex: 0 0 auto; min-width: 140rpx; }
+.th-id, .td-id { flex: 0 0 auto; min-width: 140rpx; }
+.th-printed, .td-printed { flex: 0 0 auto; min-width: 200rpx; }
+.th-expires, .td-expires { flex: 0 0 auto; min-width: 200rpx; }
+.th-action, .td-action {
+  flex: 0 0 80rpx;
+  width: 80rpx;
+  min-width: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.td-product { color: #111827; font-weight: 500; }
+.td-id { color: #6b7280; font-size: 24rpx; }
+.td-printed, .td-expires { color: #4b5563; }
+
+.reprint-btn-sm {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+  background: linear-gradient(135deg, #1F3A8A, #1447E6);
+  border-radius: 12rpx;
+}
+
+.reprint-btn-sm:active {
+  opacity: 0.9;
+}
 </style>
@@ -48,7 +48,7 @@
       </view>
     </view>
  
-    <view class="bottom-bar" :style="{ paddingBottom: (bottomSafeArea + 20) + 'px' }">
+    <view class="bottom-bar" :style="{ paddingBottom: (bottomSafeArea + 24) + 'px' }">
       <view
         class="confirm-btn"
         :class="{ disabled: !selectedStore }"
@@ -96,10 +96,12 @@ const handleConfirm = () =&gt; {
 .page {
   min-height: 100vh;
   background: #f9fafb;
-  padding-bottom: 200rpx;
+  display: flex;
+  flex-direction: column;
 }
  
 .header-hero {
+  flex-shrink: 0;
   background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
   padding: 16rpx 32rpx 32rpx;
 }
@@ -136,7 +138,11 @@ const handleConfirm = () =&gt; {
 }
  
 .list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
   padding: 32rpx;
+  padding-bottom: 24rpx;
 }
  
 .card {
@@ -214,12 +220,8 @@ const handleConfirm = () =&gt; {
 }
  
 .bottom-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 32rpx 48rpx;
-  padding-bottom: 48rpx;
+  flex-shrink: 0;
+  padding: 24rpx 48rpx;
   background: #ffffff;
   border-top: 1rpx solid #e5e7eb;
 }
+/**
+ * Print Log 为唯一数据源，labelId 格式: X-YYMMDD
+ */
+export interface PrintLogRecord {
+  labelId: string
+  productName: string
+  category: string
+  template: string
+  templateSize: string
+  templateName: string
+  printedAt: string
+  printedBy: string
+  location: string
+  expiryDate: string
+  qty: number
+  dateFull: string
+  time: string
+  labelType?: string
+  printer: string
+}
+
+export const printLogList: PrintLogRecord[] = [
+  { labelId: '1-251201', productName: 'Whole Milk', category: 'Dairy', template: '2"x2" Basic', templateSize: '2"x2"', templateName: 'Basic', printedAt: '2024-03-20 09:30 AM', printedBy: 'Alice Johnson', location: 'Downtown Store (101)', expiryDate: '2024-03-27 14:30', qty: 1, dateFull: 'Mar 20, 2024', time: '09:30 AM', printer: 'Zebra ZD421' },
+  { labelId: '2-251201', productName: 'Ground Beef', category: 'Meat', template: '2"x2" Basic', templateSize: '2"x2"', templateName: 'Basic', printedAt: '2024-03-20 10:15 AM', printedBy: 'Bob Smith', location: 'Uptown Store (102)', expiryDate: '2024-03-23 09:45', qty: 1, dateFull: 'Mar 20, 2024', time: '10:15 AM', printer: 'Zebra ZD421' },
+  { labelId: '3-251201', productName: 'Croissant', category: 'Bakery', template: '2"x2" Basic', templateSize: '2"x2"', templateName: 'Basic', printedAt: '2024-03-19 14:00 PM', printedBy: 'Charlie Brown', location: 'Downtown Store (101)', expiryDate: '2024-03-20 16:00', qty: 1, dateFull: 'Mar 19, 2024', time: '02:00 PM', printer: 'Zebra ZD421' },
+  { labelId: '4-251201', productName: 'Caesar Salad', category: 'Deli', template: '2"x6" G\'n\'G !!!', templateSize: '2"x6"', templateName: "G'n'G", printedAt: '2024-03-18 11:45 AM', printedBy: 'Alice Johnson', location: 'Downtown Store (101)', expiryDate: '2024-03-21 11:30', qty: 1, dateFull: 'Mar 18, 2024', time: '11:45 AM', printer: 'Brother QL-820NWB' },
+  { labelId: '5-251201', productName: 'Orange Juice', category: 'Beverage', template: '2"x2" Basic', templateSize: '2"x2"', templateName: 'Basic', printedAt: '2024-03-18 08:20 AM', printedBy: 'Bob Smith', location: 'Airport Kiosk (201)', expiryDate: '2024-03-25 08:00', qty: 1, dateFull: 'Mar 18, 2024', time: '08:20 AM', printer: 'Brother QL-820NWB' },
+]
+
+export function getRecordByLabelId(labelId: string): PrintLogRecord | undefined {
+  return printLogList.find(r => r.labelId === labelId)
+}
+
+/** 生成下一个 labelId，格式与 print log 一致 X-YYMMDD */
+export function generateNextLabelId(): string {
+  const now = new Date()
+  const yy = String(now.getFullYear()).slice(-2)
+  const mm = String(now.getMonth() + 1).padStart(2, '0')
+  const dd = String(now.getDate()).padStart(2, '0')
+  const datePart = yy + mm + dd
+  const todayRecords = printLogList.filter(r => {
+    const parts = r.labelId.split('-')
+    return parts.length === 2 && parts[1] === datePart
+  })
+  const maxSeq = todayRecords.length > 0
+    ? Math.max(...todayRecords.map(r => parseInt(r.labelId.split('-')[0], 10)))
+    : 0
+  return `${maxSeq + 1}-${datePart}`
+}
 export interface PrintRecord {
   id: string
+  labelId: string
   productName: string
   category: string
   qty: number
@@ -14,14 +15,14 @@ export interface PrintRecord {
 }
  
 export const printRecordsList: PrintRecord[] = [
-  { id: '1', productName: 'Chicken Sandwich', category: 'Sandwich', qty: 2, userName: 'John Smith', date: '12/04', dateFull: 'Dec 4, 2025', time: '10:45 AM', templateSize: '2"x6"', templateName: "G'n'G", printer: 'Zebra ZD421' },
-  { id: '2', productName: 'Chicken', category: 'Meat', qty: 1, userName: 'John Smith', date: '12/04', dateFull: 'Dec 4, 2025', time: '10:32 AM', labelType: 'Defrost', templateSize: '2"x2"', templateName: 'Basic', printer: 'Zebra ZD421' },
-  { id: '3', productName: 'Caesar Salad', category: 'Salads', qty: 3, userName: 'Jane Doe', date: '12/04', dateFull: 'Dec 4, 2025', time: '09:15 AM', templateSize: '2"x4"', templateName: "G'n'G", printer: 'Brother QL-820NWB' },
-  { id: '4', productName: 'Beef', category: 'Meat', qty: 1, userName: 'John Smith', date: '12/03', dateFull: 'Dec 3, 2025', time: '4:20 PM', labelType: 'Heated', templateSize: '2"x2"', templateName: 'Basic', printer: 'Zebra ZD421' },
-  { id: '5', productName: 'Cheese Burger', category: 'Sandwich', qty: 2, userName: 'Jane Doe', date: '12/03', dateFull: 'Dec 3, 2025', time: '3:45 PM', templateSize: '2"x6"', templateName: "G'n'G", printer: 'Brother QL-820NWB' },
-  { id: '6', productName: 'Ice Cream', category: 'Frozen', qty: 1, userName: 'John Smith', date: '12/03', dateFull: 'Dec 3, 2025', time: '2:30 PM', labelType: 'Vanilla', templateSize: '2"x2"', templateName: 'Storage', printer: 'Epson TM-T88VI' },
-  { id: '7', productName: 'Milk', category: 'Dairy', qty: 1, userName: 'Jane Doe', date: '12/03', dateFull: 'Dec 3, 2025', time: '11:00 AM', templateSize: '2"x2"', templateName: 'Basic', printer: 'Zebra ZD421' },
-  { id: '8', productName: 'Turkey Club', category: 'Sandwich', qty: 1, userName: 'John Smith', date: '12/02', dateFull: 'Dec 2, 2025', time: '1:20 PM', templateSize: '2"x6"', templateName: "G'n'G", printer: 'Brother QL-820NWB' },
+  { id: '1', labelId: '1-251204', productName: 'Chicken Sandwich', category: 'Sandwich', qty: 2, userName: 'John Smith', date: '12/04', dateFull: 'Dec 4, 2025', time: '10:45 AM', templateSize: '2"x6"', templateName: "G'n'G", printer: 'Zebra ZD421' },
+  { id: '2', labelId: '2-251204', productName: 'Chicken', category: 'Meat', qty: 1, userName: 'John Smith', date: '12/04', dateFull: 'Dec 4, 2025', time: '10:32 AM', labelType: 'Defrost', templateSize: '2"x2"', templateName: 'Basic', printer: 'Zebra ZD421' },
+  { id: '3', labelId: '3-251204', productName: 'Caesar Salad', category: 'Salads', qty: 3, userName: 'Jane Doe', date: '12/04', dateFull: 'Dec 4, 2025', time: '09:15 AM', templateSize: '2"x4"', templateName: "G'n'G", printer: 'Brother QL-820NWB' },
+  { id: '4', labelId: '4-251203', productName: 'Beef', category: 'Meat', qty: 1, userName: 'John Smith', date: '12/03', dateFull: 'Dec 3, 2025', time: '4:20 PM', labelType: 'Heated', templateSize: '2"x2"', templateName: 'Basic', printer: 'Zebra ZD421' },
+  { id: '5', labelId: '5-251203', productName: 'Cheese Burger', category: 'Sandwich', qty: 2, userName: 'Jane Doe', date: '12/03', dateFull: 'Dec 3, 2025', time: '3:45 PM', templateSize: '2"x6"', templateName: "G'n'G", printer: 'Brother QL-820NWB' },
+  { id: '6', labelId: '6-251203', productName: 'Ice Cream', category: 'Frozen', qty: 1, userName: 'John Smith', date: '12/03', dateFull: 'Dec 3, 2025', time: '2:30 PM', labelType: 'Vanilla', templateSize: '2"x2"', templateName: 'Storage', printer: 'Epson TM-T88VI' },
+  { id: '7', labelId: '7-251203', productName: 'Milk', category: 'Dairy', qty: 1, userName: 'Jane Doe', date: '12/03', dateFull: 'Dec 3, 2025', time: '11:00 AM', templateSize: '2"x2"', templateName: 'Basic', printer: 'Zebra ZD421' },
+  { id: '8', labelId: '8-251202', productName: 'Turkey Club', category: 'Sandwich', qty: 1, userName: 'John Smith', date: '12/02', dateFull: 'Dec 2, 2025', time: '1:20 PM', templateSize: '2"x6"', templateName: "G'n'G", printer: 'Brother QL-820NWB' },
 ]
  
 export function getRecordById(id: string): PrintRecord | undefined {