fix: H5 分账记录对齐 PC 端 + 设备状态字典颜色修复 + ExtDLabel 颜色修复

- finance/index.vue: 内嵌分账标签页字段对齐，splitNo→tradeNo，新增出入账站点/交易流水号，移除站点ID
- finance/split-record.vue: 出入账站点改为仅显示名称，新增更新时间，统一文字大小
- ExtDLabel.vue: 全局 dict 渲染改为优先使用 dict.color 而非取模索引
- init.sql: 设备忙碌状态颜色从绿色 #52C41A 改为黄色 #E6A23C
- order/list.vue: 订单列表增加消费/归属站点、复制订单号功能、布局优化
- AppIcon.vue: 新增 copy 图标

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

admin-h5/src/components/AppIcon.vue

@@ -43,7 +43,8 @@ const svgPaths = {
   'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
   'arrow-down': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
   'refresh-cw': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>',
-  'log-out': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'
+  'log-out': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>',
+  'copy': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>'
 }
 
 const svgSrc = computed(() => {

admin-h5/src/pages/finance/index.vue

@@ -109,35 +109,33 @@
       
       <!-- 分账记录列表 -->
       <view v-else-if="activeTab === 1" class="split-list">
-        <view 
-          v-for="record in splitRecords" 
-          :key="record.id" 
+        <view
+          v-for="record in splitRecords"
+          :key="record.id"
           class="split-item"
         >
           <view class="split-header">
-            <view class="split-info">
-              <text class="split-no">分账编号: {{ record.splitNo }}</text>
-              <text class="split-time">{{ formatTime(record.createTime) }}</text>
-            </view>
-            <view class="split-amount">
-              <text class="amount-label">分账金额:</text>
-              <text class="amount-value">¥{{ formatAmount(record.amount || 0) }}</text>
+            <view class="split-type" :style="getSplitTypeStyle(record.type)">
+              {{ getSplitTypeText(record.type) }}
             </view>
+            <text class="amount-value">¥{{ formatAmount(record.amount || 0) }}</text>
           </view>
           <view class="split-content">
             <view class="split-detail">
-              <text class="detail-label">分账类型:</text>
-              <text class="detail-value">{{ getSplitTypeText(record.splitType) }}</text>
+              <text class="detail-label">入账站点</text>
+              <text class="detail-value">{{ record.toStationName || '-' }}</text>
             </view>
             <view class="split-detail">
-              <text class="detail-label">站点名称:</text>
-              <text class="detail-value">{{ record.stationName || '平台' }}</text>
+              <text class="detail-label">出账站点</text>
+              <text class="detail-value">{{ record.fromStationName || '-' }}</text>
             </view>
             <view class="split-detail">
-              <text class="detail-label">分账状态:</text>
-              <text class="detail-value" :style="getSplitStatusStyle(record.status)">
-                {{ getSplitStatusText(record.status) }}
-              </text>
+              <text class="detail-label">交易流水号</text>
+              <text class="detail-value trade-no">{{ record.tradeNo || '-' }}</text>
+            </view>
+            <view class="split-detail">
+              <text class="detail-label">创建时间</text>
+              <text class="detail-value">{{ formatTime(record.createTime) }}</text>
             </view>
           </view>
         </view>
@@ -266,20 +264,9 @@ const getSplitTypeText = (type) => {
   return fmtDictName('SplitRecord.type', type)
 }
 
-// 从字典获取分账状态文本
-const getSplitStatusText = (status) => {
-  return fmtDictName('SplitRecord.status', status)
-}
-
-// 从字典获取分账状态内联样式
-const getSplitStatusStyle = (status) => {
-  const color = getDictColor('SplitRecord.status', status)
-  if (color) {
-    return {
-      color: color,
-      backgroundColor: `${color}1A`
-    }
-  }
+const getSplitTypeStyle = (type) => {
+  const color = getDictColor('SplitRecord.type', type)
+  if (color) return { color, backgroundColor: `${color}1A` }
   return {}
 }
 </script>
@@ -602,36 +589,17 @@ const getSplitStatusStyle = (status) => {
 .split-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 24rpx;
-}
-
-.split-info {
-  flex: 1;
-}
-
-.split-no {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1A1A1A;
-  margin-bottom: 12rpx;
-  display: block;
-}
-
-.split-time {
-  font-size: 24rpx;
-  color: #999999;
-}
-
-.split-amount {
-  text-align: right;
+  align-items: center;
+  margin-bottom: 20rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 1rpx solid #F0F0F0;
 }
 
-.amount-label {
+.split-type {
   font-size: 24rpx;
-  color: #999999;
-  margin-bottom: 12rpx;
-  display: block;
+  font-weight: 500;
+  padding: 6rpx 20rpx;
+  border-radius: 100rpx;
 }
 
 .amount-value {
@@ -662,6 +630,14 @@ const getSplitStatusStyle = (status) => {
 .detail-value {
   color: #1A1A1A;
   font-weight: 500;
+  font-size: 26rpx;
+  flex: 1;
+  text-align: right;
+}
+
+.trade-no {
+  font-size: 24rpx;
+  word-break: break-all;
 }
 
 

admin-h5/src/pages/finance/split-record.vue

@@ -41,20 +41,24 @@
         <view class="item-content">
           <view class="info-row">
             <text class="info-label">入账站点</text>
-            <text class="info-value">{{ item.toStationName || item.toStationId || '-' }}</text>
+            <text class="info-value">{{ item.toStationName || '-' }}</text>
           </view>
           <view class="info-row">
             <text class="info-label">出账站点</text>
-            <text class="info-value">{{ item.fromStationName || item.fromStationId || '-' }}</text>
+            <text class="info-value">{{ item.fromStationName || '-' }}</text>
           </view>
           <view class="info-row">
-            <text class="info-label">流水号</text>
+            <text class="info-label">分账交易流水号</text>
             <text class="info-value trade-no">{{ item.tradeNo || '-' }}</text>
           </view>
           <view class="info-row">
             <text class="info-label">创建时间</text>
             <text class="info-value">{{ formatTime(item.createTime) }}</text>
           </view>
+          <view class="info-row">
+            <text class="info-label">更新时间</text>
+            <text class="info-value">{{ formatTime(item.updateTime) }}</text>
+          </view>
         </view>
       </view>
     </view>
@@ -297,9 +301,9 @@ onMounted(async () => {
 }
 .item-type {
   font-size: 24rpx;
-  padding: 6rpx 24rpx;
-  border-radius: 100rpx;
   font-weight: 500;
+  padding: 6rpx 20rpx;
+  border-radius: 100rpx;
 }
 .item-amount {
   font-size: 32rpx;
@@ -323,7 +327,7 @@ onMounted(async () => {
   text-align: right;
 }
 .info-value.trade-no {
-  font-size: 22rpx;
+  font-size: 24rpx;
   word-break: break-all;
 }
 

admin-h5/src/pages/order/list.vue

@@ -25,17 +25,26 @@
       >
         <!-- 订单头部 -->
         <view class="order-header">
-          <view class="order-id-section">
+          <view class="order-header-row">
             <text class="order-id-label">订单号</text>
-            <text class="order-id">{{ order.orderId }}</text>
-          </view>
-          <view class="status-tags">
             <text
               class="order-status"
               :style="getOrderStatusStyle(order.orderStatus)"
             >
               {{ getOrderStatusText(order.orderStatus) }}
             </text>
+          </view>
+          <view class="order-header-row">
+            <view class="order-id-wrapper">
+              <text class="order-id">{{ order.orderId }}</text>
+              <AppIcon
+                name="copy"
+                :size="28"
+                color="#C6171E"
+                class="copy-icon"
+                @click.stop="copyOrderId(order.orderId)"
+              />
+            </view>
             <text
               class="pay-status"
               :style="getPayStatusStyle(order.payStatus)"
@@ -48,13 +57,23 @@
         <!-- 订单核心信息 -->
         <view class="order-core-info">
           <view class="info-item">
-            <text class="info-label">设备编号</text>
-            <text class="info-value">{{ order.shortId || '未知设备' }}</text>
+            <text class="info-label">消费站点</text>
+            <text class="info-value">{{ order.stationName || '未知站点' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">归属站点</text>
+            <text class="info-value">{{ order.userStationName || '未知站点' }}</text>
           </view>
+        </view>
+        <view class="order-core-info">
           <view class="info-item">
             <text class="info-label">用户手机号</text>
             <text class="info-value">{{ order.mobilePhone || '匿名用户' }}</text>
           </view>
+          <view class="info-item">
+            <text class="info-label">设备编号</text>
+            <text class="info-value">{{ order.shortId || '未知设备' }}</text>
+          </view>
         </view>
         
         <!-- 时间信息 -->
@@ -75,15 +94,14 @@
             <text class="amount-label">消费总额</text>
             <text class="amount-value">¥{{ formatAmount(order.amount) }}</text>
           </view>
-          <view class="amount-item">
-            <text class="amount-label">实收金额</text>
-            <text class="amount-value highlight">¥{{ formatAmount(order.amountReceived) }}</text>
-          </view>
-          <!-- 显示应收金额 -->
           <view class="amount-item" v-if="order.amountReceivable !== undefined">
             <text class="amount-label">应收金额</text>
             <text class="amount-value">¥{{ formatAmount(order.amountReceivable) }}</text>
           </view>
+          <view class="amount-item">
+            <text class="amount-label">实收金额</text>
+            <text class="amount-value highlight">¥{{ formatAmount(order.amountReceived) }}</text>
+          </view>
         </view>
         
         <!-- 订单底部 -->
@@ -259,6 +277,15 @@ const handleSearch = () => {
 
 
 
+const copyOrderId = (orderId) => {
+  uni.setClipboardData({
+    data: String(orderId),
+    success: () => {
+      showToast('订单号已复制', 'success')
+    }
+  })
+}
+
 const viewOrderDetail = (orderId) => {
   if (!orderId) {
     showToast('订单ID不存在')
@@ -426,23 +453,35 @@ const onPullDownRefresh = () => {
 /* 订单头部 */
 .order-header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  flex-direction: column;
   margin-bottom: 24rpx;
   padding-bottom: 24rpx;
   border-bottom: 2rpx solid #F0F0F0;
 }
 
-.order-id-section {
+.order-header-row {
   display: flex;
-  flex-direction: column;
-  gap: 12rpx;
-  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.order-header-row:last-child {
+  margin-bottom: 0;
 }
 
 .order-id-label {
   font-size: 24rpx;
   color: #999999;
+  flex-shrink: 0;
+}
+
+.order-id-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-right: 16rpx;
+  min-width: 0;
 }
 
 .order-id {
@@ -453,12 +492,8 @@ const onPullDownRefresh = () => {
   line-height: 1.4;
 }
 
-/* 状态标签容器 */
-.status-tags {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 8rpx;
+.copy-icon {
+  margin-left: 12rpx;
   flex-shrink: 0;
 }
 
@@ -482,6 +517,11 @@ const onPullDownRefresh = () => {
   border-bottom: 2rpx solid #F0F0F0;
 }
 
+.order-core-info--single {
+  margin-bottom: 16rpx;
+  padding-bottom: 16rpx;
+}
+
 .order-time-info {
   display: flex;
   justify-content: space-between;
@@ -539,7 +579,6 @@ const onPullDownRefresh = () => {
 }
 
 .amount-value.highlight {
-  font-size: 36rpx;
   color: #C6171E;
   font-weight: 700;
 }

admin-web/src/components/form/ExtDLabel.vue

@@ -165,7 +165,7 @@ const setupLabel = ()=>{
 
     if (dict) {
       state.text = dict.name||dict.label;
-      state.style = setupColorStyle(state.colorList[dict.value%8||dict.value.length%8]);
+      state.style = setupColorStyle(dict.color || state.colorList[dict.value%8||dict.value.length%8]);
     }else{
       return "-"
     }

car-wash-entity/src/main/resources/sql/init.sql

@@ -384,7 +384,7 @@ INSERT INTO `t_data_dict` (`code`, `name`, `value`, `weight`, `remark`, `color`)
 -- 设备状态 (WashDevice.state)
 ('WashDevice.status', '设备正在初始化', 'init', 1, '设备状态', '#52C41A'),
 ('WashDevice.status', '设备空闲', 'idle', 2, '设备状态', '#52C41A'),
-('WashDevice.status', '设备忙碌', 'busy', 3, '设备状态', '#52C41A'),
+('WashDevice.status', '设备忙碌', 'busy', 3, '设备状态', '#E6A23C'),
 ('WashDevice.status', '不在营业时间', 'sleep', 4, '设备状态', '#999999'),
 ('WashDevice.status', '维护模式', 'maintenance', 5, '设备状态', '#FAAD14'),
 ('WashDevice.status', '设备故障', 'fault', 6, '设备状态', '#F5222D'),