merge(dev): mini-user store list card redesign

apps/mini-user/src/pages/stores/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { View, Text, Image, Input } from '@tarojs/components';
 import Taro, { useDidShow, usePullDownRefresh, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
+import { StoreStatus, STORE_STATUS_LABELS } from '@dukang/shared-types';
 import PageShell from '../../components/PageShell';
 import TabMainHeader from '../../components/TabMainHeader';
 import WechatShareReady from '../../components/WechatShareReady';
@@ -348,6 +349,12 @@ export default function StoresPage() {
     return parts.length ? `营业时间: ${parts.join('，')}` : '营业时间: 10:00-22:00';
   }
 
+  function formatStatus(store: Store) {
+    const status = store.status as StoreStatus | undefined;
+    if (status && STORE_STATUS_LABELS[status]) return STORE_STATUS_LABELS[status];
+    return STORE_STATUS_LABELS[StoreStatus.OPEN];
+  }
+
   const sharePayload = useMemo(
     () => ({
       title: '杜康好客门店',
@@ -427,22 +434,24 @@ export default function StoresPage() {
               {s.coverUrl ? (
                 <Image className="store-card-cover" src={s.coverUrl} mode="aspectFill" />
               ) : (
-                <View className="store-card-cover--empty" />
+                <View className="store-card-cover store-card-cover--empty" />
               )}
               <View className="store-card-body">
-                <Text className="store-card-name">{s.name}</Text>
+                <View className="store-card-head">
-                <Text className="store-card-meta">
+                  <Text className="store-card-name">{s.name}</Text>
-                  {s.district ? `${s.district} · ` : ''}
-                  {s.address || '地址待完善'}
-                </Text>
-                <Text className="store-card-meta">{formatHours(s)}</Text>
-                {s.avgPrice != null && Number(s.avgPrice) > 0 ? (
-                  <Text className="store-card-meta">人均¥{Number(s.avgPrice).toFixed(0)}</Text>
-                ) : null}
-                <View className="store-card-footer">
                   <Text className="store-card-distance">
                     {formatDistanceMeters(s.distanceMeters)}
                   </Text>
+                </View>
+                <View className="store-card-status-row">
+                  <Text className="store-card-status">{formatStatus(s)}</Text>
+                  <Text className="store-card-hours">{formatHours(s)}</Text>
+                </View>
+                <Text className="store-card-address">
+                  {s.address || (s.district ? `${s.district}` : '地址待完善')}
+                </Text>
+                <View className="store-card-footer">
+                  <View className="store-card-footer-spacer" />
                   <Text
                     className="store-card-cta"
                     onClick={(e) => {

apps/mini-user/src/styles/stores.css

@@ -145,62 +145,124 @@
 }
 
 .store-card {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 12px;
+  padding: 12px;
   background: var(--color-card);
   border-radius: var(--radius-lg);
-  overflow: hidden;
   box-shadow: var(--shadow-card);
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+  box-sizing: border-box;
 }
 
 .store-card-cover {
-  width: 100%;
+  flex-shrink: 0;
-  height: 160px;
+  width: 96px;
+  height: 96px;
+  border-radius: var(--radius-md);
   background: var(--color-surface-container);
   display: block;
 }
 
 .store-card-cover--empty {
-  height: 160px;
   background: var(--color-surface-container);
 }
 
 .store-card-body {
-  padding: 14px 16px 16px;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-.store-card-name {
+.store-card-head {
-  display: block;
+  display: flex;
-  font-family: var(--font-headline);
+  align-items: flex-start;
-  font-size: 16px;
+  justify-content: space-between;
-  font-weight: 700;
+  gap: 8px;
-  color: var(--color-on-surface);
   margin-bottom: 6px;
 }
 
-.store-card-meta {
+.store-card-name {
-  display: block;
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-headline);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--color-on-surface);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.store-card-distance {
+  flex-shrink: 0;
   font-size: 12px;
+  line-height: 1.35;
   color: var(--color-subtle-gray);
+}
+
+.store-card-status-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
   margin-bottom: 4px;
 }
 
+.store-card-status {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  background: rgba(45, 106, 79, 0.12);
+  color: var(--color-success-green);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.store-card-hours {
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--color-subtle-gray);
+}
+
+.store-card-address {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--color-subtle-gray);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
 .store-card-footer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  margin-top: auto;
-  margin-top: 12px;
+  padding-top: 8px;
 }
 
-.store-card-distance {
+.store-card-footer-spacer {
-  font-size: 12px;
+  flex: 1;
-  color: var(--color-on-surface-variant);
 }
 
 .store-card-cta {
-  padding: 6px 14px;
+  flex-shrink: 0;
+  padding: 6px 16px;
   border-radius: var(--radius-full);
-  background: rgba(166, 29, 36, 0.08);
+  background: var(--color-heritage-red);
-  color: var(--color-heritage-red);
+  color: #fff;
   font-size: 12px;
   font-weight: 600;
+  line-height: 1.4;
 }