From e75ec0161493a46a920647c86b68c0dcb1c35c39 Mon Sep 17 00:00:00 2001
From: xiaoquan <838115837@qq.com>
Date: Sun, 10 May 2026 10:45:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=AD=E4=BB=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .claude/settings.local.json                   |   4 +-
 apps/merchant-admin/src/api/review.ts         |   2 +-
 apps/miniapp/src/api/user/invite.ts           |  22 +-
 apps/miniapp/src/components/RoomCard.vue      | 361 ++++++-----
 .../src/components/base/BaseButton.vue        | 315 +++++++++
 apps/miniapp/src/components/base/BaseCard.vue | 198 ++++++
 .../miniapp/src/components/base/BaseModal.vue | 253 ++++++++
 .../src/components/base/EmptyState.vue        | 220 +++++++
 .../src/components/base/LoadingState.vue      | 203 ++++++
 .../src/components/base/StatusBadge.vue       | 275 ++++++++
 .../src/components/business/ActionSheet.vue   | 219 +++++++
 .../components/business/DateRangeSelector.vue | 189 ++++++
 .../src/components/business/FilterBar.vue     | 264 ++++++++
 .../src/components/business/FormField.vue     | 287 +++++++++
 .../src/components/business/GuestSelector.vue | 127 ++++
 .../src/components/business/ImageUploader.vue | 277 ++++++++
 .../src/components/business/MenuList.vue      | 105 +++
 .../src/components/business/MerchantCard.vue  | 289 +++++++++
 .../components/business/MerchantHeader.vue    | 234 +++++++
 .../src/components/business/OrderCard.vue     | 281 ++++++++
 .../src/components/business/OrderQuickNav.vue | 149 +++++
 .../src/components/business/PriceTag.vue      | 207 ++++++
 .../src/components/business/RatingStars.vue   | 182 ++++++
 .../src/components/business/ReviewCard.vue    | 166 +++++
 .../src/components/business/SearchBar.vue     | 343 ++++++++++
 .../src/components/business/SectionHeader.vue | 133 ++++
 .../src/components/business/TagList.vue       | 310 +++++++++
 .../src/components/business/ToolGrid.vue      | 111 ++++
 .../src/components/business/UserProfile.vue   |  92 +++
 apps/miniapp/src/pages.json                   |  23 +-
 apps/miniapp/src/pages/about/index.vue        | 164 ++---
 apps/miniapp/src/pages/activity/index.vue     | 212 ++++++
 apps/miniapp/src/pages/agreement/index.vue    |  69 +-
 apps/miniapp/src/pages/index/index.vue        | 545 ++++++++--------
 apps/miniapp/src/pages/invite/cashbacks.vue   |  93 +--
 apps/miniapp/src/pages/invite/index.vue       | 165 ++---
 apps/miniapp/src/pages/invite/poster.vue      | 109 ++--
 apps/miniapp/src/pages/invite/records.vue     |  74 ++-
 apps/miniapp/src/pages/invite/withdraw.vue    | 130 ++--
 apps/miniapp/src/pages/invite/withdrawals.vue |  92 +--
 .../src/pages/location-search/index.vue       | 109 ++--
 apps/miniapp/src/pages/login/index.vue        |  18 +-
 .../src/pages/merchant-detail/index.vue       | 605 +++++-------------
 apps/miniapp/src/pages/mine/index.vue         | 299 ++++-----
 apps/miniapp/src/pages/order-create/index.vue | 270 ++++----
 apps/miniapp/src/pages/order-detail/index.vue | 427 ++++++------
 apps/miniapp/src/pages/order/index.vue        | 306 ++++-----
 apps/miniapp/src/pages/room-detail/index.vue  | 362 +++++++----
 apps/miniapp/src/pages/search/index.vue       | 283 ++++----
 apps/miniapp/src/pages/seller/home.vue        | 273 ++++----
 .../miniapp/src/pages/seller/order-detail.vue | 209 +++---
 apps/miniapp/src/pages/seller/orders.vue      | 412 +++++++-----
 apps/miniapp/src/pages/seller/register.vue    | 222 +++----
 .../src/pages/seller/room-calendar.vue        | 206 +++---
 apps/miniapp/src/pages/seller/room-form.vue   | 123 ++--
 apps/miniapp/src/pages/seller/rooms.vue       | 222 ++++---
 apps/miniapp/src/pages/seller/shop-create.vue | 197 +++---
 apps/miniapp/src/pages/seller/shop-edit.vue   | 132 ++--
 apps/miniapp/src/static/img/icon/activity.png | Bin 0 -> 6442 bytes
 .../src/static/img/icon/order-list.png        | Bin 0 -> 5279 bytes
 apps/miniapp/src/static/img/icon/order.png    | Bin 2871 -> 0 bytes
 apps/miniapp/src/static/styles/common.scss    | 224 ++++---
 .../src/static/styles/design-tokens.scss      | 226 +++++++
 apps/miniapp/src/static/styles/mixins.scss    | 382 +++++++++++
 apps/server/src/config/jwt.config.ts          |   2 +-
 .../entities/mkt-user-invite-stats.entity.ts  |   5 +-
 .../activity/activity-public.controller.ts    |  67 ++
 .../src/modules/activity/activity.module.ts   |   3 +-
 .../review/review-seller.controller.ts        |   6 +-
 database/migrations/001_init_schema.sql       |   2 +-
 70 files changed, 9783 insertions(+), 3303 deletions(-)
 create mode 100644 apps/miniapp/src/components/base/BaseButton.vue
 create mode 100644 apps/miniapp/src/components/base/BaseCard.vue
 create mode 100644 apps/miniapp/src/components/base/BaseModal.vue
 create mode 100644 apps/miniapp/src/components/base/EmptyState.vue
 create mode 100644 apps/miniapp/src/components/base/LoadingState.vue
 create mode 100644 apps/miniapp/src/components/base/StatusBadge.vue
 create mode 100644 apps/miniapp/src/components/business/ActionSheet.vue
 create mode 100644 apps/miniapp/src/components/business/DateRangeSelector.vue
 create mode 100644 apps/miniapp/src/components/business/FilterBar.vue
 create mode 100644 apps/miniapp/src/components/business/FormField.vue
 create mode 100644 apps/miniapp/src/components/business/GuestSelector.vue
 create mode 100644 apps/miniapp/src/components/business/ImageUploader.vue
 create mode 100644 apps/miniapp/src/components/business/MenuList.vue
 create mode 100644 apps/miniapp/src/components/business/MerchantCard.vue
 create mode 100644 apps/miniapp/src/components/business/MerchantHeader.vue
 create mode 100644 apps/miniapp/src/components/business/OrderCard.vue
 create mode 100644 apps/miniapp/src/components/business/OrderQuickNav.vue
 create mode 100644 apps/miniapp/src/components/business/PriceTag.vue
 create mode 100644 apps/miniapp/src/components/business/RatingStars.vue
 create mode 100644 apps/miniapp/src/components/business/ReviewCard.vue
 create mode 100644 apps/miniapp/src/components/business/SearchBar.vue
 create mode 100644 apps/miniapp/src/components/business/SectionHeader.vue
 create mode 100644 apps/miniapp/src/components/business/TagList.vue
 create mode 100644 apps/miniapp/src/components/business/ToolGrid.vue
 create mode 100644 apps/miniapp/src/components/business/UserProfile.vue
 create mode 100644 apps/miniapp/src/pages/activity/index.vue
 create mode 100644 apps/miniapp/src/static/img/icon/activity.png
 create mode 100644 apps/miniapp/src/static/img/icon/order-list.png
 delete mode 100644 apps/miniapp/src/static/img/icon/order.png
 create mode 100644 apps/miniapp/src/static/styles/design-tokens.scss
 create mode 100644 apps/miniapp/src/static/styles/mixins.scss
 create mode 100644 apps/server/src/modules/activity/activity-public.controller.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index fe9d0de..0373277 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -25,7 +25,9 @@
       "Bash(cat)",
       "Bash(node create-icons.js)",
       "Bash(curl -X POST http://localhost:3000/api/orders/1/pay -H \"Content-Type: application/json\" -H \"Authorization: Bearer test\" -d '{\"paymentMethod\":\"wechat\"}' -v)",
-      "Bash(curl -X POST http://localhost:3000/api/orders/1/pay -v)"
+      "Bash(curl -X POST http://localhost:3000/api/orders/1/pay -v)",
+      "Bash(xargs grep -l \"jwt\\\\|JWT\")",
+      "Bash(xargs grep -l \"invite\")"
     ]
   }
 }
diff --git a/apps/merchant-admin/src/api/review.ts b/apps/merchant-admin/src/api/review.ts
index 14cb5fd..9102776 100644
--- a/apps/merchant-admin/src/api/review.ts
+++ b/apps/merchant-admin/src/api/review.ts
@@ -1,4 +1,4 @@
-import request from './request';
+import request from '../utils/request';
 
 export interface Review {
   id: number;
diff --git a/apps/miniapp/src/api/user/invite.ts b/apps/miniapp/src/api/user/invite.ts
index 75a2a00..2b4cd1f 100644
--- a/apps/miniapp/src/api/user/invite.ts
+++ b/apps/miniapp/src/api/user/invite.ts
@@ -1,25 +1,33 @@
-import { request } from '@/utils/request';
+import { get, post } from '@/utils/request';
+
+// 获取活动列表
+export const getActivityList = () =>
+  get('/activity/list');
+
+// 获取邀请活动配置
+export const getInviteConfig = () =>
+  get('/activity/invite/config');
 
 // 获取我的邀请统计
 export const getInviteStats = () =>
-  request.get('/user/activity/invite/stats');
+  get('/user/activity/invite/stats');
 
 // 绑定邀请关系
 export const bindInvitation = (inviteCode: string) =>
-  request.post('/user/activity/invite/bind', { inviteCode });
+  post('/user/activity/invite/bind', { inviteCode });
 
 // 邀请记录列表
 export const getInviteRecords = (params?: { page?: number; pageSize?: number }) =>
-  request.get('/user/activity/invite/records', { params });
+  get('/user/activity/invite/records', params);
 
 // 返现记录列表
 export const getCashbackRecords = (params?: { page?: number; pageSize?: number }) =>
-  request.get('/user/activity/invite/cashbacks', { params });
+  get('/user/activity/invite/cashbacks', params);
 
 // 申请提现
 export const createInviteWithdrawal = (amount: number) =>
-  request.post('/user/activity/invite/withdraw', { amount });
+  post('/user/activity/invite/withdraw', { amount });
 
 // 提现记录列表
 export const getInviteWithdrawals = (params?: { page?: number; pageSize?: number }) =>
-  request.get('/user/activity/invite/withdrawals', { params });
+  get('/user/activity/invite/withdrawals', params);
diff --git a/apps/miniapp/src/components/RoomCard.vue b/apps/miniapp/src/components/RoomCard.vue
index 865af9a..8ac6233 100644
--- a/apps/miniapp/src/components/RoomCard.vue
+++ b/apps/miniapp/src/components/RoomCard.vue
@@ -1,37 +1,76 @@
 <template>
-  <view class="room-card" :class="{ 'is-full': !isAvailable }">
-    <image
-      class="room-cover"
-      :src="room.coverImage || '/static/default-room.png'"
-      mode="aspectFill"
-      @tap="handleTap"
-    />
-    <!-- 满房遮罩 -->
-    <view v-if="!isAvailable" class="full-overlay" @tap="handleTap">
-      <text class="full-text">所选日期已满房</text>
-    </view>
-    <view class="room-info" @tap="handleTap">
-      <text class="room-name text-ellipsis">{{ room.name }}</text>
-      <view class="room-meta">
-        <text class="room-address text-ellipsis" v-if="room.address">{{ room.address }}</text>
-      </view>
-      <view class="room-tags" v-if="room.type || room.bedType">
-        <text class="tag" v-if="room.type">{{ typeLabels[room.type] || room.type }}</text>
-        <text class="tag" v-if="room.bedType">{{ room.bedType }}</text>
-      </view>
-      <view class="room-bottom">
-        <view class="room-rating" v-if="room.rating">
-          <text class="rating-icon">★</text>
-          <text class="rating-score">{{ room.rating }}</text>
-          <text class="rating-count" v-if="room.reviewCount">({{ room.reviewCount }}条评价)</text>
+  <view class="room-card" :class="{ 'is-full': !isAvailable }" @tap="handleTap">
+    <!-- 房源图片 -->
+    <view class="room-image-wrap">
+      <image
+        class="room-cover"
+        :src="room.coverImage || '/static/default-room.png'"
+        mode="aspectFill"
+      />
+
+      <!-- 满房遮罩 -->
+      <view v-if="!isAvailable" class="full-overlay">
+        <view class="full-badge">
+          <text class="full-text">已满房</text>
         </view>
+      </view>
+
+      <!-- 特价标签 -->
+      <view v-if="room.isSpecial" class="special-badge">
+        <text class="special-text">特价</text>
+      </view>
+
+      <!-- 推荐标签 -->
+      <view v-if="room.isRecommend" class="recommend-badge">
+        <text class="recommend-text">推荐</text>
+      </view>
+    </view>
+
+    <!-- 房源信息 -->
+    <view class="room-info">
+      <text class="room-name">{{ room.name }}</text>
+
+      <view class="room-meta">
+        <text v-if="room.address" class="room-address">{{ room.address }}</text>
+      </view>
+
+      <!-- 标签列表 -->
+      <tag-list
+        v-if="tags.length > 0"
+        :tags="tags"
+        type="primary"
+        size="small"
+        :scrollable="false"
+        :limit="3"
+      ></tag-list>
+
+      <!-- 底部信息 -->
+      <view class="room-bottom">
+        <!-- 评分 -->
+        <rating-stars
+          v-if="room.rating"
+          :score="room.rating"
+          :count="room.reviewCount"
+          size="small"
+          :show-score="true"
+          :show-stars="true"
+        ></rating-stars>
+
+        <!-- 价格和预订按钮 -->
         <view class="room-price-row">
-          <view class="room-price">
-            <text class="price-symbol">¥</text>
-            <text class="price-value">{{ room.price }}</text>
-            <text class="price-unit">/晚</text>
-          </view>
-          <view class="book-btn" :class="{ 'disabled': !isAvailable }" @tap.stop="handleBook">
+          <price-tag
+            :price="room.price"
+            :original-price="room.originalPrice"
+            unit="/晚"
+            size="large"
+            type="primary"
+          ></price-tag>
+
+          <view
+            class="book-btn"
+            :class="{ 'disabled': !isAvailable }"
+            @tap.stop="handleBook"
+          >
             <text class="book-text">订</text>
           </view>
         </view>
@@ -41,91 +80,170 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
+import PriceTag from './business/PriceTag.vue'
+import RatingStars from './business/RatingStars.vue'
+import TagList from './business/TagList.vue'
+
+interface Room {
+  id: number
+  name: string
+  coverImage?: string
+  type?: string
+  bedType?: string
+  price: number
+  originalPrice?: number
+  rating?: number
+  reviewCount?: number
+  address?: string
+  isAvailable?: boolean
+  isSpecial?: boolean
+  isRecommend?: boolean
+  facilities?: string[]
+}
 
 const props = defineProps<{
-  room: {
-    id: number;
-    name: string;
-    coverImage?: string;
-    type?: string;
-    bedType?: string;
-    price: number;
-    rating?: number;
-    reviewCount?: number;
-    address?: string;
-    isAvailable?: boolean;
-  };
-}>();
+  room: Room
+}>()
 
 const emit = defineEmits<{
-  (e: 'tap'): void;
-  (e: 'book'): void;
-}>();
+  (e: 'tap'): void
+  (e: 'book'): void
+}>()
 
-const isAvailable = computed(() => props.room.isAvailable !== false);
+const isAvailable = computed(() => props.room.isAvailable !== false)
 
 const typeLabels: Record<string, string> = {
   hotel: '酒店',
   homestay: '民宿',
   apartment: '公寓',
-  hostel: '青旅',
-};
+  hostel: '青旅'
+}
+
+// 标签列表
+const tags = computed(() => {
+  const result: string[] = []
+  if (props.room.type) {
+    result.push(typeLabels[props.room.type] || props.room.type)
+  }
+  if (props.room.bedType) {
+    result.push(props.room.bedType)
+  }
+  if (props.room.facilities && props.room.facilities.length > 0) {
+    result.push(...props.room.facilities.slice(0, 2))
+  }
+  return result
+})
 
 function handleTap() {
-  emit('tap');
+  emit('tap')
 }
 
 function handleBook() {
-  if (!isAvailable.value) return;
-  emit('book');
+  if (!isAvailable.value) return
+  emit('book')
 }
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
 .room-card {
   display: flex;
   position: relative;
-  background: #fff;
-  border-radius: 16rpx;
-  margin-bottom: 20rpx;
+  background: $bg-card;
+  border-radius: $radius-md;
+  margin-bottom: $spacing-lg;
   overflow: hidden;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  box-shadow: $shadow-sm;
+  transition: $transition-all;
+
+  &:active {
+    transform: scale(0.98);
+    box-shadow: $shadow-xs;
+  }
 }
 
 .room-card.is-full {
   opacity: 0.85;
 }
 
-.room-cover {
+/* ========== 房源图片 ========== */
+.room-image-wrap {
+  position: relative;
   width: 240rpx;
   height: 220rpx;
   flex-shrink: 0;
 }
 
+.room-cover {
+  width: 100%;
+  height: 100%;
+  background: $bg-page;
+}
+
+/* 满房遮罩 */
 .full-overlay {
   position: absolute;
   top: 0;
   left: 0;
-  width: 240rpx;
-  height: 220rpx;
+  width: 100%;
+  height: 100%;
   background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
+}
+
+.full-badge {
+  background: rgba($error-color, 0.95);
+  padding: 8rpx 16rpx;
+  border-radius: $radius-sm;
 }
 
 .full-text {
-  font-size: 24rpx;
-  color: #fff;
-  background: rgba(255, 68, 68, 0.9);
-  padding: 8rpx 16rpx;
-  border-radius: 8rpx;
+  font-size: $font-sm;
+  color: $text-inverse;
+  font-weight: $font-medium;
 }
 
+/* 特价标签 */
+.special-badge {
+  position: absolute;
+  top: $spacing-sm;
+  left: $spacing-sm;
+  background: $gradient-warm;
+  padding: 4rpx 12rpx;
+  border-radius: $radius-xs;
+  box-shadow: $shadow-sm;
+}
+
+.special-text {
+  font-size: $font-xs;
+  color: $text-inverse;
+  font-weight: $font-semibold;
+}
+
+/* 推荐标签 */
+.recommend-badge {
+  position: absolute;
+  top: $spacing-sm;
+  right: $spacing-sm;
+  background: $gradient-secondary;
+  padding: 4rpx 12rpx;
+  border-radius: $radius-xs;
+  box-shadow: $shadow-sm;
+}
+
+.recommend-text {
+  font-size: $font-xs;
+  color: $text-inverse;
+  font-weight: $font-semibold;
+}
+
+/* ========== 房源信息 ========== */
 .room-info {
   flex: 1;
-  padding: 16rpx 20rpx;
+  padding: $spacing-md $spacing-lg;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -133,10 +251,11 @@ function handleBook() {
 }
 
 .room-name {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #333;
-  line-height: 1.3;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  line-height: $line-height-tight;
+  @include text-ellipsis-multi(2);
 }
 
 .room-meta {
@@ -144,95 +263,51 @@ function handleBook() {
 }
 
 .room-address {
-  font-size: 22rpx;
-  color: #999;
-}
-
-.room-tags {
-  display: flex;
-  gap: 10rpx;
-  margin-top: 8rpx;
-  flex-wrap: wrap;
-}
-
-.tag {
-  font-size: 20rpx;
-  color: #FF6B35;
-  background: #fff1eb;
-  padding: 2rpx 10rpx;
-  border-radius: 6rpx;
+  font-size: $font-xs;
+  color: $text-tertiary;
+  @include text-ellipsis;
 }
 
+/* ========== 底部信息 ========== */
 .room-bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  margin-top: 8rpx;
-}
-
-.room-rating {
-  display: flex;
-  align-items: center;
-}
-
-.rating-icon {
-  color: #FF6B35;
-  font-size: 24rpx;
-}
-
-.rating-score {
-  font-size: 28rpx;
-  font-weight: 700;
-  color: #FF6B35;
-  margin-left: 4rpx;
-}
-
-.rating-count {
-  font-size: 20rpx;
-  color: #999;
-  margin-left: 4rpx;
-}
-
-.price-symbol {
-  font-size: 22rpx;
-  color: #FF6B35;
-  font-weight: 600;
-}
-
-.price-value {
-  font-size: 36rpx;
-  color: #FF6B35;
-  font-weight: 700;
-}
-
-.price-unit {
-  font-size: 20rpx;
-  color: #999;
+  margin-top: $spacing-sm;
+  gap: $spacing-sm;
 }
 
+/* 价格和预订 */
 .room-price-row {
   display: flex;
   align-items: flex-end;
-  gap: 16rpx;
+  gap: $spacing-md;
 }
 
+/* 预订按钮 */
 .book-btn {
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $gradient-primary;
   width: 56rpx;
   height: 56rpx;
   border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  @include flex-center;
+  box-shadow: $shadow-primary;
+  transition: $transition-all;
 
-.book-btn.disabled {
-  background: #ccc;
+  &:active {
+    transform: scale(0.9);
+    box-shadow: $shadow-sm;
+  }
+
+  &.disabled {
+    background: $gray-300;
+    box-shadow: none;
+  }
 }
 
 .book-text {
-  font-size: 28rpx;
-  font-weight: 700;
-  color: #fff;
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: $text-inverse;
 }
 </style>
diff --git a/apps/miniapp/src/components/base/BaseButton.vue b/apps/miniapp/src/components/base/BaseButton.vue
new file mode 100644
index 0000000..e0f7ee3
--- /dev/null
+++ b/apps/miniapp/src/components/base/BaseButton.vue
@@ -0,0 +1,315 @@
+<template>
+  <button
+    class="base-button"
+    :class="[
+      `btn-${type}`,
+      `btn-${size}`,
+      { 'btn-block': block },
+      { 'btn-disabled': disabled || loading },
+      { 'btn-round': round }
+    ]"
+    :disabled="disabled || loading"
+    :open-type="openType"
+    :form-type="formType"
+    @tap="handleClick"
+  >
+    <!-- 加载状态 -->
+    <u-loading-icon v-if="loading" :show="true" :size="loadingSize" class="btn-loading"></u-loading-icon>
+
+    <!-- 左侧图标 -->
+    <u-icon
+      v-if="icon && !loading"
+      :name="icon"
+      :size="iconSize"
+      class="btn-icon btn-icon-left"
+    ></u-icon>
+
+    <!-- 按钮文字 -->
+    <text class="btn-text">
+      <slot>{{ text }}</slot>
+    </text>
+
+    <!-- 右侧图标 -->
+    <u-icon
+      v-if="iconRight"
+      :name="iconRight"
+      :size="iconSize"
+      class="btn-icon btn-icon-right"
+    ></u-icon>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type ButtonType = 'primary' | 'secondary' | 'outline' | 'text' | 'danger' | 'success' | 'gradient' | 'glass'
+type ButtonSize = 'mini' | 'small' | 'medium' | 'large'
+
+interface Props {
+  type?: ButtonType          // 按钮类型
+  size?: ButtonSize          // 按钮尺寸
+  text?: string              // 按钮文字
+  icon?: string              // 左侧图标
+  iconRight?: string         // 右侧图标
+  loading?: boolean          // 加载状态
+  disabled?: boolean         // 禁用状态
+  block?: boolean            // 块级按钮
+  round?: boolean            // 圆角按钮
+  openType?: string          // 微信开放能力
+  formType?: string          // 表单类型
+  hapticFeedback?: boolean   // 触觉反馈
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  size: 'medium',
+  loading: false,
+  disabled: false,
+  block: false,
+  round: false,
+  hapticFeedback: true
+})
+
+const emit = defineEmits<{
+  'click': [event: any]
+}>()
+
+// 图标尺寸
+const iconSize = computed(() => {
+  const sizeMap = {
+    mini: 24,
+    small: 28,
+    medium: 32,
+    large: 36
+  }
+  return sizeMap[props.size]
+})
+
+// 加载图标尺寸
+const loadingSize = computed(() => {
+  const sizeMap = {
+    mini: 20,
+    small: 24,
+    medium: 28,
+    large: 32
+  }
+  return sizeMap[props.size]
+})
+
+// 点击事件
+const handleClick = (event: any) => {
+  if (props.disabled || props.loading) return
+
+  // 触觉反馈
+  if (props.hapticFeedback) {
+    uni.vibrateShort({
+      type: 'light'
+    })
+  }
+
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.base-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  border: none;
+  font-weight: $font-medium;
+  transition: $transition-all;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  &::after {
+    border: none;
+  }
+
+  &:active:not(.btn-disabled) {
+    transform: scale(0.95);
+  }
+}
+
+/* ========== 尺寸 ========== */
+.btn-mini {
+  height: $btn-height-mini;
+  padding: 0 $spacing-md;
+  font-size: $font-sm;
+  border-radius: $radius-sm;
+}
+
+.btn-small {
+  height: $btn-height-small;
+  padding: 0 $spacing-lg;
+  font-size: $font-base;
+  border-radius: $radius-base;
+}
+
+.btn-medium {
+  height: $btn-height-medium;
+  padding: 0 $spacing-xl;
+  font-size: $font-base;
+  border-radius: $radius-base;
+}
+
+.btn-large {
+  height: $btn-height-large;
+  padding: 0 $spacing-2xl;
+  font-size: $font-xl;
+  font-weight: $font-semibold;
+  border-radius: $radius-md;
+}
+
+/* ========== 块级按钮 ========== */
+.btn-block {
+  width: 100%;
+  display: flex;
+}
+
+/* ========== 圆角按钮 ========== */
+.btn-round {
+  border-radius: $radius-round;
+}
+
+/* ========== 按钮类型 ========== */
+
+/* 主按钮 - 橙色渐变 */
+.btn-primary {
+  background: $gradient-primary;
+  color: #FFFFFF;
+  box-shadow: $shadow-primary;
+
+  .btn-text {
+    color: #FFFFFF;
+  }
+
+  &:active:not(.btn-disabled) {
+    box-shadow: $shadow-sm;
+  }
+}
+
+/* 次按钮 - 蓝色渐变 */
+.btn-secondary {
+  background: $gradient-secondary;
+  color: $text-inverse;
+  box-shadow: $shadow-secondary;
+
+  &:active:not(.btn-disabled) {
+    box-shadow: $shadow-sm;
+  }
+}
+
+/* 描边按钮 */
+.btn-outline {
+  background: transparent;
+  color: $primary-color;
+  border: 2rpx solid $primary-color;
+
+  &:active:not(.btn-disabled) {
+    background: $primary-50;
+  }
+}
+
+/* 文字按钮 */
+.btn-text {
+  background: transparent;
+  color: $primary-color;
+  box-shadow: none;
+
+  &:active:not(.btn-disabled) {
+    opacity: 0.6;
+  }
+}
+
+/* 危险按钮 */
+.btn-danger {
+  background: transparent;
+  color: $error-color;
+  border: 2rpx solid $error-color;
+
+  &:active:not(.btn-disabled) {
+    background: $error-bg;
+  }
+}
+
+/* 成功按钮 */
+.btn-success {
+  background: $gradient-success;
+  color: $text-inverse;
+  box-shadow: 0 4rpx 16rpx rgba(82, 196, 26, 0.25);
+
+  &:active:not(.btn-disabled) {
+    box-shadow: $shadow-sm;
+  }
+}
+
+/* 渐变按钮（暖色） */
+.btn-gradient {
+  background: $gradient-warm;
+  color: $text-inverse;
+  box-shadow: $shadow-primary;
+
+  &:active:not(.btn-disabled) {
+    box-shadow: $shadow-sm;
+  }
+}
+
+/* 毛玻璃按钮 */
+.btn-glass {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+  color: $primary-color;
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
+  box-shadow: $shadow-md;
+
+  &:active:not(.btn-disabled) {
+    background: rgba(255, 255, 255, 0.95);
+  }
+}
+
+/* ========== 禁用状态 ========== */
+.btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+/* ========== 加载状态 ========== */
+.btn-loading {
+  margin-right: 8rpx;
+}
+
+/* ========== 图标 ========== */
+.btn-icon {
+  flex-shrink: 0;
+}
+
+.btn-icon-left {
+  margin-right: 4rpx;
+}
+
+.btn-icon-right {
+  margin-left: 4rpx;
+}
+
+/* ========== 按钮文字 ========== */
+.btn-text {
+  line-height: 1;
+  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary .btn-text,
+.btn-secondary .btn-text,
+.btn-success .btn-text,
+.btn-gradient .btn-text {
+  color: #FFFFFF;
+  font-weight: $font-semibold;
+  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/apps/miniapp/src/components/base/BaseCard.vue b/apps/miniapp/src/components/base/BaseCard.vue
new file mode 100644
index 0000000..ca68a97
--- /dev/null
+++ b/apps/miniapp/src/components/base/BaseCard.vue
@@ -0,0 +1,198 @@
+<template>
+  <view
+    class="base-card"
+    :class="[
+      `card-${variant}`,
+      { 'card-clickable': clickable },
+      { 'card-shadow': shadow }
+    ]"
+    :style="cardStyle"
+    @tap="handleClick"
+  >
+    <!-- 卡片头部 -->
+    <view v-if="title || $slots.header" class="card-header">
+      <slot name="header">
+        <view class="card-title">{{ title }}</view>
+        <view v-if="extra" class="card-extra">{{ extra }}</view>
+      </slot>
+    </view>
+
+    <!-- 卡片内容 -->
+    <view class="card-body" :style="bodyStyle">
+      <slot></slot>
+    </view>
+
+    <!-- 卡片底部 -->
+    <view v-if="$slots.footer" class="card-footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type CardVariant = 'elevated' | 'flat' | 'outlined' | 'gradient'
+
+interface Props {
+  variant?: CardVariant     // 卡片变体
+  title?: string            // 标题
+  extra?: string            // 额外内容
+  padding?: string          // 内边距
+  margin?: string           // 外边距
+  borderRadius?: string     // 圆角
+  shadow?: boolean          // 是否显示阴影
+  clickable?: boolean       // 是否可点击
+  background?: string       // 背景色
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'elevated',
+  padding: '',
+  margin: '',
+  borderRadius: '',
+  shadow: true,
+  clickable: false,
+  background: ''
+})
+
+const emit = defineEmits<{
+  'click': [event: any]
+}>()
+
+// 卡片样式
+const cardStyle = computed(() => {
+  const style: Record<string, string> = {}
+
+  if (props.padding) style.padding = props.padding
+  if (props.margin) style.margin = props.margin
+  if (props.borderRadius) style.borderRadius = props.borderRadius
+  if (props.background) style.background = props.background
+
+  return style
+})
+
+// 内容区域样式
+const bodyStyle = computed(() => {
+  const style: Record<string, string> = {}
+  return style
+})
+
+// 点击事件
+const handleClick = (event: any) => {
+  if (props.clickable) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.base-card {
+  background: $bg-card;
+  border-radius: $radius-md;
+  overflow: hidden;
+  transition: $transition-all;
+}
+
+/* ========== 卡片变体 ========== */
+
+/* 悬浮卡片（默认） */
+.card-elevated {
+
+
+  &.card-shadow {
+    box-shadow: $shadow-md;
+  }
+}
+
+/* 扁平卡片 */
+.card-flat {
+  box-shadow: none;
+  border: 1rpx solid $border-light;
+}
+
+/* 描边卡片 */
+.card-outlined {
+  box-shadow: none;
+  border: 2rpx solid $border-base;
+}
+
+/* 渐变卡片 */
+.card-gradient {
+  background: $gradient-primary;
+  color: $text-inverse;
+  box-shadow: $shadow-primary;
+
+  .card-title,
+  .card-extra {
+    color: $text-inverse;
+  }
+}
+
+/* ========== 可点击状态 ========== */
+.card-clickable {
+  cursor: pointer;
+
+  &:active {
+    transform: scale(0.98);
+    opacity: 0.95;
+  }
+
+  &.card-elevated:active {
+    box-shadow: $shadow-sm;
+  }
+}
+
+/* ========== 卡片头部 ========== */
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-xl $spacing-xl $spacing-md;
+  border-bottom: 1rpx solid $border-light;
+}
+
+.card-gradient .card-header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.card-title {
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  flex: 1;
+}
+
+.card-extra {
+  font-size: $font-sm;
+  color: $text-tertiary;
+  margin-left: $spacing-md;
+}
+
+/* ========== 卡片内容 ========== */
+.card-body {
+  padding: $spacing-xl;
+}
+
+/* 如果有头部，减少顶部内边距 */
+.card-header + .card-body {
+  padding-top: $spacing-md;
+}
+
+/* ========== 卡片底部 ========== */
+.card-footer {
+  padding: $spacing-md $spacing-xl $spacing-xl;
+  border-top: 1rpx solid $border-light;
+}
+
+.card-gradient .card-footer {
+  border-top-color: rgba(255, 255, 255, 0.2);
+}
+
+/* 如果有内容，减少底部内边距 */
+.card-body + .card-footer {
+  padding-top: $spacing-md;
+}
+</style>
diff --git a/apps/miniapp/src/components/base/BaseModal.vue b/apps/miniapp/src/components/base/BaseModal.vue
new file mode 100644
index 0000000..2b8dd6e
--- /dev/null
+++ b/apps/miniapp/src/components/base/BaseModal.vue
@@ -0,0 +1,253 @@
+<template>
+  <view v-if="modelValue" class="base-modal" @tap="handleMaskClick">
+    <!-- 遮罩层 -->
+    <view
+      class="modal-mask"
+      :class="{ 'modal-mask-show': show }"
+      :style="{ background: maskBackground }"
+    ></view>
+
+    <!-- 弹窗内容 -->
+    <view
+      class="modal-content"
+      :class="[
+        `modal-${position}`,
+        { 'modal-show': show }
+      ]"
+      :style="contentStyle"
+      @tap.stop
+    >
+      <!-- 顶部指示器（仅底部弹窗） -->
+      <view v-if="position === 'bottom' && showIndicator" class="modal-indicator"></view>
+
+      <!-- 头部 -->
+      <view v-if="title || showClose" class="modal-header">
+        <view class="modal-title">{{ title }}</view>
+        <view v-if="showClose" class="modal-close" @tap="handleClose">
+          <u-icon name="close" :size="32" color="#999"></u-icon>
+        </view>
+      </view>
+
+      <!-- 内容区域 -->
+      <view class="modal-body" :style="bodyStyle">
+        <slot></slot>
+      </view>
+
+      <!-- 底部操作区 -->
+      <view v-if="$slots.footer" class="modal-footer">
+        <slot name="footer"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+
+interface Props {
+  modelValue: boolean           // 是否显示弹窗
+  position?: 'bottom' | 'center' // 弹窗位置
+  title?: string                 // 标题
+  showClose?: boolean            // 是否显示关闭按钮
+  showIndicator?: boolean        // 是否显示顶部指示器（底部弹窗）
+  closeOnClickMask?: boolean     // 点击遮罩是否关闭
+  maskBackground?: string        // 遮罩背景色
+  width?: string                 // 弹窗宽度（居中弹窗）
+  height?: string                // 弹窗高度
+  maxHeight?: string             // 最大高度
+  borderRadius?: string          // 圆角
+  zIndex?: number                // 层级
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: 'bottom',
+  showClose: true,
+  showIndicator: true,
+  closeOnClickMask: true,
+  maskBackground: 'rgba(0, 0, 0, 0.5)',
+  width: '600rpx',
+  borderRadius: '',
+  zIndex: 1050
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'close': []
+  'open': []
+}>()
+
+const show = ref(false)
+
+// 内容样式
+const contentStyle = computed(() => {
+  const style: Record<string, string> = {
+    zIndex: String(props.zIndex)
+  }
+
+  if (props.position === 'center') {
+    if (props.width) style.width = props.width
+  }
+
+  if (props.height) style.height = props.height
+  if (props.maxHeight) style.maxHeight = props.maxHeight
+
+  if (props.borderRadius) {
+    style.borderRadius = props.borderRadius
+  } else {
+    style.borderRadius = props.position === 'bottom' ? '24rpx 24rpx 0 0' : '16rpx'
+  }
+
+  return style
+})
+
+// 内容区域样式
+const bodyStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.maxHeight) {
+    style.maxHeight = props.maxHeight
+    style.overflowY = 'auto'
+  }
+  return style
+})
+
+// 监听显示状态
+watch(() => props.modelValue, (val) => {
+  if (val) {
+    nextTick(() => {
+      setTimeout(() => {
+        show.value = true
+      }, 50)
+    })
+    emit('open')
+  } else {
+    show.value = false
+  }
+})
+
+// 点击遮罩
+const handleMaskClick = () => {
+  if (props.closeOnClickMask) {
+    handleClose()
+  }
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  show.value = false
+  setTimeout(() => {
+    emit('update:modelValue', false)
+    emit('close')
+  }, 300)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.base-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $z-modal-backdrop;
+}
+
+/* 遮罩层 */
+.modal-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity $transition-base $ease-in-out;
+}
+
+.modal-mask-show {
+  opacity: 1;
+}
+
+/* 弹窗内容 */
+.modal-content {
+  position: absolute;
+  background: $bg-card;
+  transition: all $transition-base $ease-out;
+}
+
+/* 底部弹窗 */
+.modal-bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateY(100%);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.modal-bottom.modal-show {
+  transform: translateY(0);
+}
+
+/* 居中弹窗 */
+.modal-center {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0.8);
+  opacity: 0;
+}
+
+.modal-center.modal-show {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+/* 顶部指示器 */
+.modal-indicator {
+  width: 64rpx;
+  height: 8rpx;
+  background: $gray-300;
+  border-radius: $radius-round;
+  margin: 16rpx auto 8rpx;
+}
+
+/* 头部 */
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-xl $spacing-xl $spacing-md;
+  border-bottom: 1rpx solid $border-light;
+}
+
+.modal-title {
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  flex: 1;
+}
+
+.modal-close {
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: $spacing-md;
+  transition: $transition-all;
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+/* 内容区域 */
+.modal-body {
+  padding: $spacing-xl;
+}
+
+/* 底部操作区 */
+.modal-footer {
+  padding: $spacing-md $spacing-xl $spacing-xl;
+  border-top: 1rpx solid $border-light;
+}
+</style>
diff --git a/apps/miniapp/src/components/base/EmptyState.vue b/apps/miniapp/src/components/base/EmptyState.vue
new file mode 100644
index 0000000..b6adac9
--- /dev/null
+++ b/apps/miniapp/src/components/base/EmptyState.vue
@@ -0,0 +1,220 @@
+<template>
+  <view class="empty-state" :class="{ 'empty-state-small': size === 'small' }">
+    <!-- 图标/图片 -->
+    <view class="empty-icon">
+      <image v-if="image" :src="image" class="empty-image" mode="aspectFit"></image>
+      <u-icon v-else :name="iconName" :size="iconSize" :color="iconColor"></u-icon>
+    </view>
+
+    <!-- 文字描述 -->
+    <view class="empty-text">{{ text }}</view>
+    <view v-if="description" class="empty-description">{{ description }}</view>
+
+    <!-- 操作按钮 -->
+    <view v-if="showButton" class="empty-action">
+      <view class="empty-button" @tap="handleAction">
+        {{ buttonText }}
+      </view>
+    </view>
+
+    <!-- 自定义插槽 -->
+    <view v-if="$slots.default" class="empty-slot">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type EmptyType = 'default' | 'order' | 'room' | 'review' | 'search' | 'network' | 'error'
+
+interface Props {
+  type?: EmptyType        // 预设类型
+  text?: string           // 主文字
+  description?: string    // 描述文字
+  image?: string          // 自定义图片
+  icon?: string           // 自定义图标
+  size?: 'normal' | 'small' // 尺寸
+  showButton?: boolean    // 是否显示按钮
+  buttonText?: string     // 按钮文字
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'default',
+  size: 'normal',
+  showButton: false,
+  buttonText: '重新加载'
+})
+
+const emit = defineEmits<{
+  'action': []
+}>()
+
+// 预设配置
+const presets: Record<EmptyType, { icon: string; text: string; description?: string }> = {
+  default: {
+    icon: 'empty-data',
+    text: '暂无数据'
+  },
+  order: {
+    icon: 'order',
+    text: '暂无订单',
+    description: '快去预订心仪的房源吧'
+  },
+  room: {
+    icon: 'home',
+    text: '暂无房源',
+    description: '换个条件试试看'
+  },
+  review: {
+    icon: 'chat',
+    text: '暂无评价',
+    description: '快来成为第一个评价的人'
+  },
+  search: {
+    icon: 'search',
+    text: '没有找到相关内容',
+    description: '换个关键词试试'
+  },
+  network: {
+    icon: 'wifi-off',
+    text: '网络连接失败',
+    description: '请检查网络设置后重试'
+  },
+  error: {
+    icon: 'error-circle',
+    text: '加载失败',
+    description: '请稍后重试'
+  }
+}
+
+// 图标名称
+const iconName = computed(() => {
+  return props.icon || presets[props.type].icon
+})
+
+// 图标尺寸
+const iconSize = computed(() => {
+  return props.size === 'small' ? 96 : 120
+})
+
+// 图标颜色
+const iconColor = computed(() => {
+  return '#D4D4D4'
+})
+
+// 文字
+const text = computed(() => {
+  return props.text || presets[props.type].text
+})
+
+// 描述
+const description = computed(() => {
+  return props.description || presets[props.type].description
+})
+
+// 按钮点击
+const handleAction = () => {
+  emit('action')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 48rpx;
+  min-height: 400rpx;
+}
+
+.empty-state-small {
+  padding: 80rpx 32rpx;
+  min-height: 300rpx;
+}
+
+/* 图标/图片 */
+.empty-icon {
+  margin-bottom: $spacing-xl;
+  animation: fadeIn 0.5s ease;
+}
+
+.empty-image {
+  width: 240rpx;
+  height: 240rpx;
+}
+
+.empty-state-small .empty-image {
+  width: 180rpx;
+  height: 180rpx;
+}
+
+/* 文字 */
+.empty-text {
+  font-size: $font-lg;
+  color: $text-secondary;
+  margin-bottom: $spacing-sm;
+  text-align: center;
+  animation: fadeIn 0.5s ease 0.1s both;
+}
+
+.empty-state-small .empty-text {
+  font-size: $font-base;
+}
+
+.empty-description {
+  font-size: $font-sm;
+  color: $text-tertiary;
+  text-align: center;
+  line-height: $line-height-relaxed;
+  animation: fadeIn 0.5s ease 0.2s both;
+}
+
+/* 操作按钮 */
+.empty-action {
+  margin-top: $spacing-2xl;
+  animation: fadeIn 0.5s ease 0.3s both;
+}
+
+.empty-button {
+  padding: $spacing-md $spacing-2xl;
+  background: $gradient-primary;
+  color: $text-inverse;
+  font-size: $font-base;
+  font-weight: $font-medium;
+  border-radius: $radius-round;
+  transition: $transition-all;
+
+  &:active {
+    transform: scale(0.95);
+    opacity: 0.9;
+  }
+}
+
+.empty-state-small .empty-button {
+  padding: $spacing-sm $spacing-xl;
+  font-size: $font-sm;
+}
+
+/* 自定义插槽 */
+.empty-slot {
+  margin-top: $spacing-xl;
+  animation: fadeIn 0.5s ease 0.4s both;
+}
+
+/* 动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/apps/miniapp/src/components/base/LoadingState.vue b/apps/miniapp/src/components/base/LoadingState.vue
new file mode 100644
index 0000000..eabead0
--- /dev/null
+++ b/apps/miniapp/src/components/base/LoadingState.vue
@@ -0,0 +1,203 @@
+<template>
+  <view class="loading-state" :class="{ 'loading-state-small': size === 'small' }">
+    <!-- 骨架屏模式 -->
+    <view v-if="type === 'skeleton'" class="skeleton-container">
+      <slot name="skeleton">
+        <!-- 默认骨架屏 -->
+        <view class="skeleton-item skeleton-avatar"></view>
+        <view class="skeleton-item skeleton-title"></view>
+        <view class="skeleton-item skeleton-text"></view>
+        <view class="skeleton-item skeleton-text short"></view>
+      </slot>
+    </view>
+
+    <!-- 加载动画模式 -->
+    <view v-else class="loading-spinner">
+      <!-- 加载图标 -->
+      <view class="spinner-icon">
+        <u-loading-icon :show="true" :size="iconSize" :color="iconColor"></u-loading-icon>
+      </view>
+
+      <!-- 加载文字 -->
+      <view v-if="text" class="loading-text">{{ text }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  type?: 'spinner' | 'skeleton'  // 加载类型
+  text?: string                   // 加载文字
+  size?: 'normal' | 'small'       // 尺寸
+  color?: string                  // 图标颜色
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'spinner',
+  text: '加载中...',
+  size: 'normal',
+  color: ''
+})
+
+// 图标尺寸
+const iconSize = computed(() => {
+  return props.size === 'small' ? 32 : 40
+})
+
+// 图标颜色
+const iconColor = computed(() => {
+  return props.color || '#FF6B35'
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 0;
+  min-height: 300rpx;
+}
+
+.loading-state-small {
+  padding: 48rpx 0;
+  min-height: 200rpx;
+}
+
+/* ========== 加载动画模式 ========== */
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner-icon {
+  margin-bottom: $spacing-md;
+}
+
+.loading-text {
+  font-size: $font-base;
+  color: $text-tertiary;
+  margin-top: $spacing-sm;
+}
+
+.loading-state-small .loading-text {
+  font-size: $font-sm;
+}
+
+/* ========== 骨架屏模式 ========== */
+.skeleton-container {
+  width: 100%;
+  padding: $spacing-xl;
+}
+
+.skeleton-item {
+  background: linear-gradient(90deg, $gray-100 25%, $gray-50 50%, $gray-100 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: $radius-sm;
+  margin-bottom: $spacing-md;
+}
+
+.skeleton-avatar {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+}
+
+.skeleton-title {
+  width: 60%;
+  height: 40rpx;
+}
+
+.skeleton-text {
+  width: 100%;
+  height: 32rpx;
+}
+
+.skeleton-text.short {
+  width: 80%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* 骨架屏预设布局 */
+.skeleton-card {
+  display: flex;
+  gap: $spacing-md;
+  margin-bottom: $spacing-xl;
+
+  .skeleton-image {
+    width: 200rpx;
+    height: 150rpx;
+    flex-shrink: 0;
+  }
+
+  .skeleton-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    .skeleton-title {
+      width: 100%;
+      height: 36rpx;
+    }
+
+    .skeleton-text {
+      width: 80%;
+      height: 28rpx;
+    }
+
+    .skeleton-price {
+      width: 40%;
+      height: 32rpx;
+      margin-top: auto;
+    }
+  }
+}
+
+.skeleton-list-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-md 0;
+  border-bottom: 1rpx solid $border-light;
+
+  .skeleton-avatar {
+    width: 80rpx;
+    height: 80rpx;
+    flex-shrink: 0;
+  }
+
+  .skeleton-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xs;
+
+    .skeleton-title {
+      width: 60%;
+      height: 32rpx;
+    }
+
+    .skeleton-text {
+      width: 40%;
+      height: 24rpx;
+    }
+  }
+}
+</style>
diff --git a/apps/miniapp/src/components/base/StatusBadge.vue b/apps/miniapp/src/components/base/StatusBadge.vue
new file mode 100644
index 0000000..b9ae60f
--- /dev/null
+++ b/apps/miniapp/src/components/base/StatusBadge.vue
@@ -0,0 +1,275 @@
+<template>
+  <view
+    class="status-badge"
+    :class="[
+      `badge-${variant}`,
+      `badge-${size}`,
+      `badge-status-${statusType}`
+    ]"
+    :style="customStyle"
+  >
+    <!-- 点状指示器 -->
+    <view v-if="showDot" class="badge-dot"></view>
+
+    <!-- 文字 -->
+    <text class="badge-text">{{ displayText }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type OrderStatus =
+  | 'pending_pay'        // 待支付
+  | 'pending_confirm'    // 待确认
+  | 'confirmed'          // 已确认
+  | 'checked_in'         // 已入住
+  | 'completed'          // 已完成
+  | 'cancelled'          // 已取消
+  | 'refunding'          // 退款中
+  | 'refunded'           // 已退款
+
+type StatusVariant = 'solid' | 'outline' | 'dot'
+type StatusSize = 'small' | 'medium' | 'large'
+
+interface Props {
+  status?: OrderStatus | string  // 订单状态
+  text?: string                  // 自定义文字
+  variant?: StatusVariant        // 样式变体
+  size?: StatusSize              // 尺寸
+  icon?: string                  // 自定义图标
+  showDot?: boolean              // 是否显示点状指示器
+  color?: string                 // 自定义颜色
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'solid',
+  size: 'medium',
+  showDot: false
+})
+
+// 状态配置
+const statusConfig: Record<string, { text: string; type: string; icon?: string }> = {
+  pending_pay: { text: '待支付', type: 'warning', icon: 'clock' },
+  pending_confirm: { text: '待确认', type: 'info', icon: 'hourglass' },
+  confirmed: { text: '已确认', type: 'success', icon: 'checkmark-circle' },
+  checked_in: { text: '已入住', type: 'primary', icon: 'home' },
+  completed: { text: '已完成', type: 'success', icon: 'checkmark-circle' },
+  cancelled: { text: '已取消', type: 'default', icon: 'close-circle' },
+  refunding: { text: '退款中', type: 'warning', icon: 'refresh' },
+  refunded: { text: '已退款', type: 'default', icon: 'arrow-back' }
+}
+
+// 显示文字
+const displayText = computed(() => {
+  if (props.text) return props.text
+  if (props.status && statusConfig[props.status]) {
+    return statusConfig[props.status].text
+  }
+  return props.status || ''
+})
+
+// 状态类型
+const statusType = computed(() => {
+  if (props.status && statusConfig[props.status]) {
+    return statusConfig[props.status].type
+  }
+  return 'default'
+})
+
+// 图标
+const icon = computed(() => {
+  if (props.icon) return props.icon
+  if (props.status && statusConfig[props.status]) {
+    return statusConfig[props.status].icon
+  }
+  return ''
+})
+
+// 图标尺寸
+const iconSize = computed(() => {
+  const sizeMap = {
+    small: 20,
+    medium: 24,
+    large: 28
+  }
+  return sizeMap[props.size]
+})
+
+// 自定义样式
+const customStyle = computed(() => {
+  if (props.color) {
+    return {
+      color: props.variant === 'solid' ? '#FFFFFF' : props.color,
+      backgroundColor: props.variant === 'solid' ? props.color : 'transparent',
+      borderColor: props.color
+    }
+  }
+  return {}
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4rpx;
+  border-radius: $radius-xs;
+  font-weight: $font-medium;
+  white-space: nowrap;
+  transition: $transition-all;
+}
+
+/* ========== 尺寸 ========== */
+.badge-small {
+  padding: 4rpx 12rpx;
+  font-size: $font-xs;
+  height: 40rpx;
+}
+
+.badge-medium {
+  padding: 6rpx 16rpx;
+  font-size: $font-sm;
+  height: 48rpx;
+}
+
+.badge-large {
+  padding: 8rpx 20rpx;
+  font-size: $font-base;
+  height: 56rpx;
+}
+
+/* ========== 样式变体 ========== */
+
+/* 实心样式 */
+.badge-solid {
+  border: none;
+}
+
+/* 描边样式 */
+.badge-outline {
+  background: transparent;
+  border: 1rpx solid;
+}
+
+/* 点状样式 */
+.badge-dot {
+  background: transparent;
+  padding-left: 24rpx;
+  position: relative;
+
+  .badge-dot {
+    position: absolute;
+    left: 8rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+  }
+}
+
+/* ========== 状态颜色 ========== */
+
+/* 默认 */
+.badge-status-default.badge-solid {
+  background: $gray-100;
+  color: $text-secondary;
+}
+
+.badge-status-default.badge-outline {
+  border-color: $gray-300;
+  color: $text-secondary;
+}
+
+.badge-status-default .badge-dot {
+  background: $gray-400;
+}
+
+/* 主色 */
+.badge-status-primary.badge-solid {
+  background: $gradient-primary;
+  color: $text-inverse;
+}
+
+.badge-status-primary.badge-outline {
+  border-color: $primary-color;
+  color: $primary-color;
+}
+
+.badge-status-primary .badge-dot {
+  background: $primary-color;
+}
+
+/* 成功 */
+.badge-status-success.badge-solid {
+  background: $success-bg;
+  color: $success-color;
+}
+
+.badge-status-success.badge-outline {
+  border-color: $success-color;
+  color: $success-color;
+}
+
+.badge-status-success .badge-dot {
+  background: $success-color;
+}
+
+/* 警告 */
+.badge-status-warning.badge-solid {
+  background: $warning-bg;
+  color: $warning-color;
+}
+
+.badge-status-warning.badge-outline {
+  border-color: $warning-color;
+  color: $warning-color;
+}
+
+.badge-status-warning .badge-dot {
+  background: $warning-color;
+}
+
+/* 错误 */
+.badge-status-error.badge-solid {
+  background: $error-bg;
+  color: $error-color;
+}
+
+.badge-status-error.badge-outline {
+  border-color: $error-color;
+  color: $error-color;
+}
+
+.badge-status-error .badge-dot {
+  background: $error-color;
+}
+
+/* 信息 */
+.badge-status-info.badge-solid {
+  background: $info-bg;
+  color: $info-color;
+}
+
+.badge-status-info.badge-outline {
+  border-color: $info-color;
+  color: $info-color;
+}
+
+.badge-status-info .badge-dot {
+  background: $info-color;
+}
+
+/* ========== 图标和文字 ========== */
+.badge-icon {
+  flex-shrink: 0;
+}
+
+.badge-text {
+  line-height: 1;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/ActionSheet.vue b/apps/miniapp/src/components/business/ActionSheet.vue
new file mode 100644
index 0000000..5bf360a
--- /dev/null
+++ b/apps/miniapp/src/components/business/ActionSheet.vue
@@ -0,0 +1,219 @@
+<template>
+  <base-modal
+    v-model="show"
+    position="bottom"
+    :show-close="false"
+    :show-indicator="true"
+    :close-on-click-mask="closeOnClickMask"
+    @close="handleClose"
+  >
+    <!-- 标题 -->
+    <view v-if="title" class="action-sheet-title">
+      <text>{{ title }}</text>
+    </view>
+
+    <!-- 描述 -->
+    <view v-if="description" class="action-sheet-desc">
+      <text>{{ description }}</text>
+    </view>
+
+    <!-- 操作列表 -->
+    <view class="action-sheet-list">
+      <view
+        v-for="(action, index) in actions"
+        :key="index"
+        class="action-item"
+        :class="[
+          { 'action-disabled': action.disabled },
+          { 'action-danger': action.danger }
+        ]"
+        @tap="handleAction(action, index)"
+      >
+        <u-icon
+          v-if="action.icon"
+          :name="action.icon"
+          :size="40"
+          :color="getIconColor(action)"
+          class="action-icon"
+        ></u-icon>
+        <text class="action-text">{{ action.text }}</text>
+        <text v-if="action.subtext" class="action-subtext">{{ action.subtext }}</text>
+      </view>
+    </view>
+
+    <!-- 取消按钮 -->
+    <view v-if="showCancel" class="action-cancel" @tap="handleCancel">
+      <text class="cancel-text">{{ cancelText }}</text>
+    </view>
+  </base-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import BaseModal from '../base/BaseModal.vue'
+
+interface Action {
+  text: string
+  subtext?: string
+  icon?: string
+  value?: any
+  disabled?: boolean
+  danger?: boolean
+}
+
+interface Props {
+  modelValue: boolean          // 是否显示
+  title?: string               // 标题
+  description?: string         // 描述
+  actions: Action[]            // 操作列表
+  showCancel?: boolean         // 是否显示取消按钮
+  cancelText?: string          // 取消按钮文字
+  closeOnClickMask?: boolean   // 点击遮罩是否关闭
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showCancel: true,
+  cancelText: '取消',
+  closeOnClickMask: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'select': [action: Action, index: number]
+  'cancel': []
+  'close': []
+}>()
+
+const show = ref(props.modelValue)
+
+// 监听外部值变化
+watch(() => props.modelValue, (val) => {
+  show.value = val
+})
+
+// 监听内部值变化
+watch(show, (val) => {
+  emit('update:modelValue', val)
+})
+
+// 获取图标颜色
+const getIconColor = (action: Action) => {
+  if (action.disabled) return '#CCCCCC'
+  if (action.danger) return '#F5222D'
+  return '#FF6B35'
+}
+
+// 操作点击
+const handleAction = (action: Action, index: number) => {
+  if (action.disabled) return
+
+  emit('select', action, index)
+  show.value = false
+}
+
+// 取消
+const handleCancel = () => {
+  emit('cancel')
+  show.value = false
+}
+
+// 关闭
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+/* ========== 标题 ========== */
+.action-sheet-title {
+  padding: $spacing-xl $spacing-xl $spacing-md;
+  text-align: center;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  border-bottom: 1rpx solid $border-light;
+}
+
+/* ========== 描述 ========== */
+.action-sheet-desc {
+  padding: $spacing-md $spacing-xl;
+  text-align: center;
+  font-size: $font-sm;
+  color: $text-secondary;
+  line-height: $line-height-relaxed;
+  border-bottom: 1rpx solid $border-light;
+}
+
+/* ========== 操作列表 ========== */
+.action-sheet-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.action-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-lg $spacing-xl;
+  border-bottom: 1rpx solid $border-light;
+  transition: $transition-all;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:active:not(.action-disabled) {
+    background: $bg-hover;
+  }
+}
+
+.action-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-danger {
+  .action-text {
+    color: $error-color;
+  }
+}
+
+/* 图标 */
+.action-icon {
+  flex-shrink: 0;
+}
+
+/* 文字 */
+.action-text {
+  flex: 1;
+  font-size: $font-base;
+  color: $text-primary;
+  font-weight: $font-medium;
+}
+
+.action-subtext {
+  font-size: $font-sm;
+  color: $text-tertiary;
+}
+
+/* ========== 取消按钮 ========== */
+.action-cancel {
+  padding: $spacing-lg $spacing-xl;
+  border-top: $spacing-sm solid $bg-page;
+  text-align: center;
+  transition: $transition-all;
+
+  &:active {
+    background: $bg-hover;
+  }
+}
+
+.cancel-text {
+  font-size: $font-base;
+  color: $text-secondary;
+  font-weight: $font-medium;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/DateRangeSelector.vue b/apps/miniapp/src/components/business/DateRangeSelector.vue
new file mode 100644
index 0000000..11f1b93
--- /dev/null
+++ b/apps/miniapp/src/components/business/DateRangeSelector.vue
@@ -0,0 +1,189 @@
+<template>
+  <base-card class="date-range-selector" variant="elevated" :clickable="true" @click="handleClick">
+    <view class="selector-content">
+      <!-- 入住日期 -->
+      <view class="date-column">
+        <text class="date-label">{{ checkInLabel }}</text>
+        <view class="date-display">
+          <text class="date-month">{{ checkInMonth }}</text>
+          <text class="date-unit">月</text>
+          <text class="date-day">{{ checkInDay }}</text>
+          <text class="date-unit">日</text>
+        </view>
+        <text class="date-weekday">{{ checkInWeekday }}</text>
+      </view>
+
+      <!-- 分隔线和天数 -->
+      <view class="divider-section">
+        <view class="divider-line"></view>
+        <view class="night-badge">
+          <text class="night-text">{{ nightCount }}晚</text>
+        </view>
+        <view class="divider-line"></view>
+      </view>
+
+      <!-- 退房日期 -->
+      <view class="date-column">
+        <text class="date-label">{{ checkOutLabel }}</text>
+        <view class="date-display">
+          <text class="date-month">{{ checkOutMonth }}</text>
+          <text class="date-unit">月</text>
+          <text class="date-day">{{ checkOutDay }}</text>
+          <text class="date-unit">日</text>
+        </view>
+        <text class="date-weekday">{{ checkOutWeekday }}</text>
+      </view>
+    </view>
+
+    <!-- 右侧箭头 -->
+    <view class="arrow-icon">
+      <u-icon name="arrow-right" :size="20" color="#9CA3AF" />
+    </view>
+  </base-card>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseCard from '../base/BaseCard.vue';
+
+interface Props {
+  checkIn: string;           // 入住日期 YYYY-MM-DD
+  checkOut: string;          // 退房日期 YYYY-MM-DD
+  checkInLabel?: string;     // 入住标签
+  checkOutLabel?: string;    // 退房标签
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  checkInLabel: '入住',
+  checkOutLabel: '退房'
+});
+
+const emit = defineEmits<{
+  'click': [];
+}>();
+
+// 计算入住日期信息
+const checkInDate = computed(() => new Date(props.checkIn));
+const checkInMonth = computed(() => checkInDate.value.getMonth() + 1);
+const checkInDay = computed(() => checkInDate.value.getDate());
+const checkInWeekday = computed(() => getWeekdayText(checkInDate.value));
+
+// 计算退房日期信息
+const checkOutDate = computed(() => new Date(props.checkOut));
+const checkOutMonth = computed(() => checkOutDate.value.getMonth() + 1);
+const checkOutDay = computed(() => checkOutDate.value.getDate());
+const checkOutWeekday = computed(() => getWeekdayText(checkOutDate.value));
+
+// 计算住宿天数
+const nightCount = computed(() => {
+  const diff = checkOutDate.value.getTime() - checkInDate.value.getTime();
+  return Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)));
+});
+
+// 获取星期文本
+function getWeekdayText(date: Date): string {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const targetDate = new Date(date);
+  targetDate.setHours(0, 0, 0, 0);
+
+  const diffDays = Math.round((targetDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return '今天';
+  if (diffDays === 1) return '明天';
+  if (diffDays === 2) return '后天';
+
+  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+  return weekDays[date.getDay()];
+}
+
+// 点击事件
+function handleClick() {
+  emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.date-range-selector {
+  position: relative;
+}
+
+.selector-content {
+  @include flex-between;
+  gap: $spacing-lg;
+}
+
+/* ========== 日期列 ========== */
+.date-column {
+  flex: 1;
+  @include flex-column(flex-start, flex-start);
+  gap: $spacing-xs;
+}
+
+.date-label {
+  font-size: $font-sm;
+  color: $text-secondary;
+  font-weight: $font-medium;
+}
+
+.date-display {
+  @include flex-row(flex-start, baseline);
+  gap: 4rpx;
+}
+
+.date-month,
+.date-day {
+  font-size: $font-xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+  line-height: 1;
+}
+
+.date-unit {
+  font-size: $font-sm;
+  color: $text-secondary;
+  font-weight: $font-regular;
+}
+
+.date-weekday {
+  font-size: $font-xs;
+  color: $text-tertiary;
+}
+
+/* ========== 分隔区域 ========== */
+.divider-section {
+  @include flex-column(center, center);
+  gap: $spacing-xs;
+  padding: 0 $spacing-md;
+}
+
+.divider-line {
+  width: 2rpx;
+  height: 40rpx;
+  background: $border-base;
+}
+
+.night-badge {
+  background: $primary-50;
+  border-radius: $radius-round;
+  padding: 4rpx $spacing-md;
+}
+
+.night-text {
+  font-size: $font-xs;
+  color: $primary-600;
+  font-weight: $font-semibold;
+  line-height: 1;
+}
+
+/* ========== 箭头图标 ========== */
+.arrow-icon {
+  position: absolute;
+  right: $spacing-xl;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>
diff --git a/apps/miniapp/src/components/business/FilterBar.vue b/apps/miniapp/src/components/business/FilterBar.vue
new file mode 100644
index 0000000..50347d2
--- /dev/null
+++ b/apps/miniapp/src/components/business/FilterBar.vue
@@ -0,0 +1,264 @@
+<template>
+  <view class="filter-bar" :class="{ 'filter-bar-sticky': sticky }" :style="{ top: stickyTop }">
+    <scroll-view class="filter-scroll" scroll-x :show-scrollbar="false">
+      <view class="filter-list">
+        <!-- 筛选项 -->
+        <view
+          v-for="(filter, index) in filters"
+          :key="index"
+          class="filter-item"
+          :class="{ 'filter-active': isActive(filter) }"
+          @tap="handleFilterClick(filter, index)"
+        >
+          <text class="filter-text">{{ filter.label }}</text>
+          <u-icon
+            v-if="filter.type === 'dropdown'"
+            name="arrow-down"
+            :size="16"
+            :class="{ 'icon-rotate': activeFilter === filter.key }"
+          ></u-icon>
+        </view>
+
+        <!-- 更多筛选按钮 -->
+        <view v-if="showMore" class="filter-item filter-more" @tap="handleMoreClick">
+          <u-icon name="filter" :size="28"></u-icon>
+          <text class="filter-text">筛选</text>
+          <view v-if="filterCount > 0" class="filter-badge">{{ filterCount }}</view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 下拉面板 -->
+    <view v-if="showDropdown" class="filter-dropdown" @tap="handleMaskClick">
+      <view class="dropdown-content" @tap.stop>
+        <scroll-view class="dropdown-scroll" scroll-y>
+          <view class="dropdown-body">
+            <slot name="dropdown" :filter="currentFilter"></slot>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Filter {
+  key: string
+  label: string
+  type?: 'single' | 'dropdown'
+  value?: any
+  options?: any[]
+}
+
+interface Props {
+  filters: Filter[]           // 筛选项列表
+  activeKey?: string          // 当前激活的筛选项
+  sticky?: boolean            // 是否吸顶
+  stickyTop?: string          // 吸顶位置
+  showMore?: boolean          // 是否显示更多筛选
+  filterCount?: number        // 已选筛选数量
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  sticky: false,
+  stickyTop: '0',
+  showMore: true,
+  filterCount: 0
+})
+
+const emit = defineEmits<{
+  'filter-click': [filter: Filter, index: number]
+  'more-click': []
+  'dropdown-close': []
+}>()
+
+const activeFilter = ref<string>('')
+const showDropdown = ref(false)
+const currentFilter = ref<Filter | null>(null)
+
+// 是否激活
+const isActive = (filter: Filter) => {
+  if (filter.type === 'dropdown') {
+    return activeFilter.value === filter.key
+  }
+  return filter.value !== undefined && filter.value !== null && filter.value !== ''
+}
+
+// 筛选项点击
+const handleFilterClick = (filter: Filter, index: number) => {
+  if (filter.type === 'dropdown') {
+    // 下拉类型
+    if (activeFilter.value === filter.key) {
+      // 关闭下拉
+      activeFilter.value = ''
+      showDropdown.value = false
+      currentFilter.value = null
+    } else {
+      // 打开下拉
+      activeFilter.value = filter.key
+      showDropdown.value = true
+      currentFilter.value = filter
+    }
+  } else {
+    // 单选类型
+    emit('filter-click', filter, index)
+  }
+}
+
+// 更多筛选点击
+const handleMoreClick = () => {
+  emit('more-click')
+}
+
+// 遮罩点击
+const handleMaskClick = () => {
+  activeFilter.value = ''
+  showDropdown.value = false
+  currentFilter.value = null
+  emit('dropdown-close')
+}
+
+// 暴露方法：关闭下拉
+defineExpose({
+  closeDropdown: () => {
+    activeFilter.value = ''
+    showDropdown.value = false
+    currentFilter.value = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.filter-bar {
+  position: relative;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
+  z-index: $z-sticky;
+}
+
+.filter-bar-sticky {
+  position: sticky;
+  top: 0;
+}
+
+/* ========== 筛选滚动容器 ========== */
+.filter-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.filter-list {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 $spacing-md;
+  gap: $spacing-lg;
+}
+
+/* ========== 筛选项 ========== */
+.filter-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4rpx;
+  padding: $spacing-md $spacing-sm;
+  white-space: nowrap;
+  transition: $transition-all;
+  position: relative;
+
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.filter-active {
+  .filter-text {
+    color: $primary-color;
+    font-weight: $font-semibold;
+  }
+
+  .u-icon {
+    color: $primary-color;
+  }
+}
+
+.filter-text {
+  font-size: $font-base;
+  color: $text-primary;
+  transition: $transition-color;
+}
+
+/* 图标旋转 */
+.icon-rotate {
+  transform: rotate(180deg);
+  transition: $transition-transform;
+}
+
+/* ========== 更多筛选 ========== */
+.filter-more {
+  position: relative;
+}
+
+.filter-badge {
+  position: absolute;
+  top: 8rpx;
+  right: 0;
+  min-width: 28rpx;
+  height: 28rpx;
+  padding: 0 6rpx;
+  background: $error-color;
+  color: $text-inverse;
+  font-size: $font-xs;
+  font-weight: $font-medium;
+  border-radius: $radius-round;
+  @include flex-center;
+}
+
+/* ========== 下拉面板 ========== */
+.filter-dropdown {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $bg-mask;
+  z-index: $z-dropdown;
+  animation: fadeIn $transition-base $ease-out;
+}
+
+.dropdown-content {
+  background: $bg-card;
+  max-height: 60vh;
+  animation: slideDown $transition-base $ease-out;
+}
+
+.dropdown-scroll {
+  max-height: 60vh;
+}
+
+.dropdown-body {
+  padding: $spacing-xl;
+}
+
+/* ========== 动画 ========== */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/apps/miniapp/src/components/business/FormField.vue b/apps/miniapp/src/components/business/FormField.vue
new file mode 100644
index 0000000..39eda33
--- /dev/null
+++ b/apps/miniapp/src/components/business/FormField.vue
@@ -0,0 +1,287 @@
+<template>
+  <view class="form-field" :class="{ 'form-field-required': required, 'form-field-error': error }">
+    <!-- 标签 -->
+    <view v-if="label" class="field-label">
+      <text class="label-text">{{ label }}</text>
+      <text v-if="required" class="label-required">*</text>
+    </view>
+
+    <!-- 输入区域 -->
+    <view class="field-body" @tap="handleClick">
+      <!-- 输入框 -->
+      <input
+        v-if="type === 'text' || type === 'number' || type === 'tel'"
+        v-model="inputValue"
+        class="field-input"
+        :type="type"
+        :placeholder="placeholder"
+        :placeholder-style="`color: ${placeholderColor}`"
+        :disabled="disabled"
+        :maxlength="maxlength"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+
+      <!-- 文本域 -->
+      <textarea
+        v-else-if="type === 'textarea'"
+        v-model="inputValue"
+        class="field-textarea"
+        :placeholder="placeholder"
+        :placeholder-style="`color: ${placeholderColor}`"
+        :disabled="disabled"
+        :maxlength="maxlength"
+        :auto-height="autoHeight"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      ></textarea>
+
+      <!-- 选择器 -->
+      <view v-else-if="type === 'select'" class="field-select">
+        <text class="select-text" :class="{ 'select-placeholder': !modelValue }">
+          {{ displayValue || placeholder }}
+        </text>
+        <u-icon v-if="showSelectArrow" name="arrow-right" :size="14" color="#ccc"></u-icon>
+      </view>
+
+      <!-- 开关 -->
+      <switch
+        v-else-if="type === 'switch'"
+        :checked="!!modelValue"
+        :disabled="disabled"
+        color="#FF6B35"
+        @change="handleSwitchChange"
+      ></switch>
+
+      <!-- 自定义内容 -->
+      <view v-else-if="type === 'custom'" class="field-custom">
+        <slot></slot>
+      </view>
+
+      <!-- 右侧图标 -->
+      <u-icon
+        v-if="rightIcon"
+        :name="rightIcon"
+        :size="22"
+        :color="iconColor"
+        class="field-icon"
+      ></u-icon>
+    </view>
+
+    <!-- 错误提示 -->
+    <view v-if="error && errorMessage" class="field-error-text">
+      <text>{{ errorMessage }}</text>
+    </view>
+
+    <!-- 提示文字 -->
+    <view v-if="tip && !error" class="field-tip">
+      <text>{{ tip }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+type FieldType = 'text' | 'number' | 'tel' | 'textarea' | 'select' | 'switch' | 'custom'
+
+interface Props {
+  modelValue?: any             // 值
+  type?: FieldType             // 类型
+  label?: string               // 标签
+  placeholder?: string         // 占位文字
+  required?: boolean           // 是否必填
+  disabled?: boolean           // 是否禁用
+  error?: boolean              // 是否错误
+  errorMessage?: string        // 错误提示
+  tip?: string                 // 提示文字
+  maxlength?: number           // 最大长度
+  autoHeight?: boolean         // 自动高度（textarea）
+  rightIcon?: string           // 右侧图标
+  displayValue?: string        // 显示值（select）
+  showSelectArrow?: boolean    // 是否显示选择器箭头
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  placeholder: '请输入',
+  required: false,
+  disabled: false,
+  error: false,
+  maxlength: 200,
+  autoHeight: false,
+  showSelectArrow: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+  'change': [value: any]
+  'focus': []
+  'blur': []
+  'click': []
+}>()
+
+const inputValue = ref(props.modelValue || '')
+
+// 占位符颜色
+const placeholderColor = computed(() => '#CCCCCC')
+
+// 图标颜色
+const iconColor = computed(() => {
+  return props.disabled ? '#CCCCCC' : '#999999'
+})
+
+// 监听外部值变化
+watch(() => props.modelValue, (val) => {
+  inputValue.value = val || ''
+})
+
+// 输入事件
+const handleInput = (e: any) => {
+  const value = e.detail.value
+  inputValue.value = value
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+// 开关变化
+const handleSwitchChange = (e: any) => {
+  const value = e.detail.value
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+// 聚焦
+const handleFocus = () => {
+  emit('focus')
+}
+
+// 失焦
+const handleBlur = () => {
+  emit('blur')
+}
+
+// 点击
+const handleClick = () => {
+  if (props.type === 'select' || props.type === 'custom') {
+    emit('click')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.form-field {
+  padding: $spacing-lg $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
+}
+
+.form-field-required {
+  .label-text {
+    position: relative;
+  }
+}
+
+.form-field-error {
+  .field-input,
+  .field-textarea {
+    color: $error-color;
+  }
+}
+
+/* ========== 标签 ========== */
+.field-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: $spacing-sm;
+}
+
+.label-text {
+  font-size: $font-base;
+  color: $text-primary;
+  font-weight: $font-medium;
+}
+
+.label-required {
+  font-size: $font-lg;
+  color: $error-color;
+  margin-left: 4rpx;
+}
+
+/* ========== 输入区域 ========== */
+.field-body {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  min-height: 64rpx;
+}
+
+/* 输入框 */
+.field-input {
+  flex: 1;
+  font-size: $font-base;
+  color: $text-primary;
+  height: 64rpx;
+}
+
+/* 文本域 */
+.field-textarea {
+  flex: 1;
+  font-size: $font-base;
+  color: $text-primary;
+  min-height: 120rpx;
+  padding: $spacing-sm 0;
+  line-height: $line-height-relaxed;
+}
+
+/* 选择器 */
+.field-select {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-sm;
+}
+
+.select-text {
+  flex: 1;
+  font-size: $font-base;
+  color: $text-primary;
+  @include text-ellipsis;
+}
+
+.select-placeholder {
+  color: $text-placeholder;
+}
+
+/* 自定义内容 */
+.field-custom {
+  flex: 1;
+}
+
+/* 右侧图标 */
+.field-icon {
+  flex-shrink: 0;
+}
+
+/* ========== 错误提示 ========== */
+.field-error-text {
+  margin-top: $spacing-sm;
+  font-size: $font-sm;
+  color: $error-color;
+  line-height: $line-height-normal;
+}
+
+/* ========== 提示文字 ========== */
+.field-tip {
+  margin-top: $spacing-sm;
+  font-size: $font-sm;
+  color: $text-tertiary;
+  line-height: $line-height-normal;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/GuestSelector.vue b/apps/miniapp/src/components/business/GuestSelector.vue
new file mode 100644
index 0000000..fc1aeba
--- /dev/null
+++ b/apps/miniapp/src/components/business/GuestSelector.vue
@@ -0,0 +1,127 @@
+<template>
+  <base-card class="guest-selector" variant="elevated" :clickable="true" @click="handleClick">
+    <view class="selector-content">
+      <!-- 标题 -->
+      <view class="selector-header">
+        <u-icon name="account" :size="24" :color="primaryColor" />
+        <text class="selector-title">间数人数</text>
+      </view>
+
+      <!-- 数量显示 -->
+      <view class="guest-display">
+        <view class="guest-item">
+          <text class="guest-number">{{ roomCount }}</text>
+          <text class="guest-unit">间</text>
+        </view>
+        <view class="guest-divider"></view>
+        <view class="guest-item">
+          <text class="guest-number">{{ adultCount }}</text>
+          <text class="guest-unit">成人</text>
+        </view>
+        <view class="guest-divider"></view>
+        <view class="guest-item">
+          <text class="guest-number">{{ childCount }}</text>
+          <text class="guest-unit">儿童</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 右侧箭头 -->
+    <view class="arrow-icon">
+      <u-icon name="arrow-right" :size="20" color="#9CA3AF" />
+    </view>
+  </base-card>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseCard from '../base/BaseCard.vue';
+
+interface Props {
+  roomCount?: number;      // 房间数量
+  adultCount?: number;     // 成人数量
+  childCount?: number;     // 儿童数量
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  roomCount: 1,
+  adultCount: 1,
+  childCount: 0
+});
+
+const emit = defineEmits<{
+  'click': [];
+}>();
+
+// 主色
+const primaryColor = computed(() => '#FF6B35');
+
+// 点击事件
+function handleClick() {
+  emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.guest-selector {
+  position: relative;
+}
+
+.selector-content {
+  @include flex-column(flex-start, flex-start);
+  gap: $spacing-md;
+}
+
+/* ========== 头部 ========== */
+.selector-header {
+  @include flex-row(flex-start, center);
+  gap: $spacing-xs;
+}
+
+.selector-title {
+  font-size: $font-sm;
+  color: $text-secondary;
+  font-weight: $font-medium;
+}
+
+/* ========== 数量显示 ========== */
+.guest-display {
+  @include flex-row(flex-start, baseline);
+  gap: $spacing-lg;
+}
+
+.guest-item {
+  @include flex-row(flex-start, baseline);
+  gap: 4rpx;
+}
+
+.guest-number {
+  font-size: $font-xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+  line-height: 1;
+}
+
+.guest-unit {
+  font-size: $font-sm;
+  color: $text-secondary;
+  font-weight: $font-regular;
+}
+
+.guest-divider {
+  width: 2rpx;
+  height: 32rpx;
+  background: $border-base;
+}
+
+/* ========== 箭头图标 ========== */
+.arrow-icon {
+  position: absolute;
+  right: $spacing-xl;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>
diff --git a/apps/miniapp/src/components/business/ImageUploader.vue b/apps/miniapp/src/components/business/ImageUploader.vue
new file mode 100644
index 0000000..75acf5b
--- /dev/null
+++ b/apps/miniapp/src/components/business/ImageUploader.vue
@@ -0,0 +1,277 @@
+<template>
+  <view class="image-uploader">
+    <view class="uploader-list">
+      <!-- 已上传图片 -->
+      <view
+        v-for="(image, index) in imageList"
+        :key="index"
+        class="uploader-item"
+      >
+        <image
+          :src="image.url || image"
+          class="uploader-image"
+          mode="aspectFill"
+          @tap="handlePreview(index)"
+        ></image>
+
+        <!-- 上传中 -->
+        <view v-if="image.loading" class="uploader-loading">
+          <u-loading-icon :show="true" :size="40" color="#FFFFFF"></u-loading-icon>
+        </view>
+
+        <!-- 删除按钮 -->
+        <view v-if="!disabled && !image.loading" class="uploader-delete" @tap.stop="handleDelete(index)">
+          <u-icon name="close-circle-fill" :size="36" color="#FF4D4F"></u-icon>
+        </view>
+      </view>
+
+      <!-- 上传按钮 -->
+      <view
+        v-if="showUploadButton"
+        class="uploader-item uploader-button"
+        @tap="handleChoose"
+      >
+        <u-icon name="camera" :size="48" color="#CCCCCC"></u-icon>
+        <text class="uploader-text">{{ uploadText }}</text>
+        <text v-if="maxCount > 0" class="uploader-count">{{ imageList.length }}/{{ maxCount }}</text>
+      </view>
+    </view>
+
+    <!-- 提示文字 -->
+    <view v-if="tip" class="uploader-tip">
+      <text>{{ tip }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface ImageItem {
+  url: string
+  loading?: boolean
+  [key: string]: any
+}
+
+interface Props {
+  modelValue?: (string | ImageItem)[]  // 图片列表
+  maxCount?: number                     // 最大数量
+  maxSize?: number                      // 最大尺寸（MB）
+  disabled?: boolean                    // 是否禁用
+  uploadText?: string                   // 上传按钮文字
+  tip?: string                          // 提示文字
+  sizeType?: ('original' | 'compressed')[]  // 图片尺寸
+  sourceType?: ('album' | 'camera')[]  // 图片来源
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  maxCount: 9,
+  maxSize: 10,
+  disabled: false,
+  uploadText: '上传图片',
+  sizeType: () => ['compressed'],
+  sourceType: () => ['album', 'camera']
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: (string | ImageItem)[]]
+  'change': [value: (string | ImageItem)[]]
+  'upload': [file: any, index: number]
+  'delete': [index: number]
+  'preview': [index: number]
+}>()
+
+const imageList = ref<(string | ImageItem)[]>(props.modelValue || [])
+
+// 是否显示上传按钮
+const showUploadButton = computed(() => {
+  if (props.disabled) return false
+  if (props.maxCount <= 0) return true
+  return imageList.value.length < props.maxCount
+})
+
+// 监听外部值变化
+watch(() => props.modelValue, (val) => {
+  imageList.value = val || []
+}, { deep: true })
+
+// 选择图片
+const handleChoose = () => {
+  if (props.disabled) return
+
+  const count = props.maxCount > 0 ? props.maxCount - imageList.value.length : 9
+
+  uni.chooseImage({
+    count,
+    sizeType: props.sizeType,
+    sourceType: props.sourceType,
+    success: (res) => {
+      const tempFiles = res.tempFiles
+
+      // 检查文件大小
+      for (const file of tempFiles) {
+        if (file.size > props.maxSize * 1024 * 1024) {
+          uni.showToast({
+            title: `图片大小不能超过${props.maxSize}MB`,
+            icon: 'none'
+          })
+          return
+        }
+      }
+
+      // 添加到列表
+      const newImages = tempFiles.map((file) => ({
+        url: file.path,
+        loading: true
+      }))
+
+      imageList.value = [...imageList.value, ...newImages]
+      emit('update:modelValue', imageList.value)
+      emit('change', imageList.value)
+
+      // 触发上传事件
+      newImages.forEach((image, index) => {
+        const actualIndex = imageList.value.length - newImages.length + index
+        emit('upload', tempFiles[index], actualIndex)
+      })
+    }
+  })
+}
+
+// 删除图片
+const handleDelete = (index: number) => {
+  uni.showModal({
+    title: '提示',
+    content: '确定要删除这张图片吗？',
+    success: (res) => {
+      if (res.confirm) {
+        imageList.value.splice(index, 1)
+        emit('update:modelValue', imageList.value)
+        emit('change', imageList.value)
+        emit('delete', index)
+      }
+    }
+  })
+}
+
+// 预览图片
+const handlePreview = (index: number) => {
+  const urls = imageList.value.map((item) => {
+    return typeof item === 'string' ? item : item.url
+  })
+
+  uni.previewImage({
+    current: index,
+    urls
+  })
+
+  emit('preview', index)
+}
+
+// 更新图片状态
+const updateImage = (index: number, data: Partial<ImageItem>) => {
+  const image = imageList.value[index]
+  if (typeof image === 'object') {
+    Object.assign(image, data)
+  }
+}
+
+// 暴露方法
+defineExpose({
+  updateImage
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.image-uploader {
+  width: 100%;
+}
+
+/* ========== 上传列表 ========== */
+.uploader-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-md;
+}
+
+/* ========== 上传项 ========== */
+.uploader-item {
+  position: relative;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: $radius-sm;
+  overflow: hidden;
+  background: $bg-page;
+}
+
+/* 图片 */
+.uploader-image {
+  width: 100%;
+  height: 100%;
+}
+
+/* 上传中 */
+.uploader-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  @include flex-center;
+}
+
+/* 删除按钮 */
+.uploader-delete {
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  width: 36rpx;
+  height: 36rpx;
+  @include flex-center;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  transition: $transition-all;
+
+  &:active {
+    transform: scale(0.9);
+  }
+}
+
+/* ========== 上传按钮 ========== */
+.uploader-button {
+  @include flex-center;
+  flex-direction: column;
+  gap: $spacing-xs;
+  border: 2rpx dashed $border-base;
+  background: $bg-card;
+  transition: $transition-all;
+
+  &:active {
+    background: $bg-hover;
+    border-color: $primary-color;
+  }
+}
+
+.uploader-text {
+  font-size: $font-sm;
+  color: $text-tertiary;
+}
+
+.uploader-count {
+  font-size: $font-xs;
+  color: $text-placeholder;
+}
+
+/* ========== 提示文字 ========== */
+.uploader-tip {
+  margin-top: $spacing-md;
+  font-size: $font-sm;
+  color: $text-tertiary;
+  line-height: $line-height-normal;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/MenuList.vue b/apps/miniapp/src/components/business/MenuList.vue
new file mode 100644
index 0000000..b01ce96
--- /dev/null
+++ b/apps/miniapp/src/components/business/MenuList.vue
@@ -0,0 +1,105 @@
+<template>
+  <view class="menu-list">
+    <view
+      v-for="item in items"
+      :key="item.key"
+      class="menu-item"
+      @click="handleTap(item.key)"
+    >
+      <view class="menu-left">
+        <view class="menu-icon" :style="{ background: item.bgColor }">
+          <u-icon :name="item.icon" :size="22" :color="item.iconColor"></u-icon>
+        </view>
+        <text class="menu-text">{{ item.label }}</text>
+      </view>
+      <view class="menu-right">
+        <text v-if="item.extra" class="menu-extra">{{ item.extra }}</text>
+        <u-icon name="arrow-right" :size="16" color="#D4D4D4"></u-icon>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface MenuItem {
+  key: string
+  label: string
+  icon: string
+  iconColor: string
+  bgColor: string
+  extra?: string
+}
+
+interface Props {
+  items: MenuItem[]
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'item-click', key: string): void
+}>()
+
+function handleTap(key: string) {
+  emit('item-click', key)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.menu-list {
+  background: $bg-card;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.menu-item {
+  @include flex-between;
+  padding: $spacing-xl $spacing-lg;
+  border-bottom: 1rpx solid $border-light;
+  transition: $transition-bg;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:active {
+    background: $bg-hover;
+  }
+}
+
+.menu-left {
+  @include flex-row(flex-start, center);
+  gap: $spacing-lg;
+  flex: 1;
+  min-width: 0;
+}
+
+.menu-icon {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: $radius-sm;
+  @include flex-center;
+  flex-shrink: 0;
+}
+
+.menu-text {
+  font-size: $font-base;
+  color: $text-primary;
+  font-weight: $font-regular;
+}
+
+.menu-right {
+  @include flex-row(flex-end, center);
+  gap: $spacing-xs;
+  flex-shrink: 0;
+}
+
+.menu-extra {
+  font-size: $font-sm;
+  color: $text-tertiary;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/MerchantCard.vue b/apps/miniapp/src/components/business/MerchantCard.vue
new file mode 100644
index 0000000..e503329
--- /dev/null
+++ b/apps/miniapp/src/components/business/MerchantCard.vue
@@ -0,0 +1,289 @@
+<template>
+  <base-card class="merchant-card" :clickable="true" @click="handleClick">
+    <view class="card-content">
+      <!-- 左侧封面图 -->
+      <view class="merchant-cover">
+        <image
+          :src="merchant.coverImage || '/static/default-merchant.png'"
+          class="cover-image"
+          mode="aspectFill"
+        ></image>
+        <!-- 播放按钮 -->
+        <view v-if="merchant.hasVideo" class="play-button">
+          <text class="play-icon">▶</text>
+        </view>
+      </view>
+
+      <!-- 右侧信息 -->
+      <view class="merchant-info">
+        <!-- 商家名称 -->
+        <text class="merchant-name">{{ merchant.name }}</text>
+
+        <!-- 类型标签 -->
+        <text v-if="merchant.type" class="merchant-type">{{ merchant.type }}</text>
+
+        <!-- 评分和评价 -->
+        <view class="rating-row">
+          <text class="rating-score">{{ merchant.rating }}</text>
+          <text class="rating-label">{{ merchant.rating ? getRatingLabel(merchant.rating) : '' }}</text>
+          <text class="review-count">{{ merchant.reviewCount }}评价</text>
+        </view>
+
+        <!-- 距离信息 -->
+        <view v-if="merchant.distance || merchant.nearbyLandmark" class="distance-row">
+          <text class="distance-text">
+            <text v-if="merchant.distance">距你{{ formatDistance(merchant.distance) }}</text>
+            <text v-if="merchant.nearbyLandmark"> {{ merchant.nearbyLandmark }}附近</text>
+          </text>
+        </view>
+
+        <!-- 设施标签 -->
+        <view v-if="merchant.facilities && merchant.facilities.length > 0" class="facilities-row">
+          <text
+            v-for="(facility, index) in merchant.facilities.slice(0, 5)"
+            :key="index"
+            class="facility-tag"
+          >
+            {{ facility }}
+          </text>
+        </view>
+
+        <!-- 购买提示 -->
+        <text v-if="merchant.recentPurchase" class="purchase-tip">{{ merchant.recentPurchase }}</text>
+
+        <!-- 价格区域 -->
+        <view class="price-section">
+          <view class="price-info">
+            <text v-if="merchant.originalPrice" class="original-price">¥{{ merchant.originalPrice }}</text>
+            <text class="current-price">¥{{ merchant.minPrice }}</text>
+          </view>
+          <text v-if="merchant.promotion" class="promotion-text">{{ merchant.promotion }}</text>
+        </view>
+      </view>
+    </view>
+  </base-card>
+</template>
+
+<script setup lang="ts">
+import BaseCard from '../base/BaseCard.vue'
+
+interface Merchant {
+  id: number
+  name: string
+  coverImage?: string
+  type?: string
+  rating?: number
+  reviewCount?: number
+  facilities?: string[]
+  minPrice: number
+  originalPrice?: number
+  distance?: number
+  nearbyLandmark?: string
+  hasVideo?: boolean
+  recentPurchase?: string
+  promotion?: string
+  [key: string]: any
+}
+
+const props = defineProps<{
+  merchant: Merchant
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', merchant: Merchant): void
+}>()
+
+// 获取评分标签
+const getRatingLabel = (rating: number): string => {
+  if (rating >= 4.5) return '非常棒'
+  if (rating >= 4.0) return '很好'
+  if (rating >= 3.5) return '好'
+  if (rating >= 3.0) return '一般'
+  return '较差'
+}
+
+// 格式化距离
+const formatDistance = (distance: number): string => {
+  if (distance < 1000) {
+    return `${Math.round(distance)}米`
+  }
+  return `${(distance / 1000).toFixed(1)}公里`
+}
+
+// 点击卡片
+const handleClick = () => {
+  emit('click', props.merchant)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.merchant-card {
+  overflow: visible;
+  margin-bottom: 25rpx;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: row;
+  gap: $spacing-lg;
+}
+
+// 左侧封面图
+.merchant-cover {
+  position: relative;
+  width: 240rpx;
+  height: 240rpx;
+  flex-shrink: 0;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  background: $bg-page;
+
+  .cover-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .play-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 64rpx;
+    height: 64rpx;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(4rpx);
+
+    .play-icon {
+      color: #fff;
+      font-size: 28rpx;
+      margin-left: 6rpx;
+    }
+  }
+}
+
+// 右侧信息
+.merchant-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  min-width: 0;
+}
+
+.merchant-name {
+  font-size: 32rpx;
+  font-weight: $font-bold;
+  color: $text-primary;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 4rpx;
+}
+
+.merchant-type {
+  font-size: 24rpx;
+  color: $text-tertiary;
+  margin-bottom: 4rpx;
+}
+
+.rating-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+  margin-bottom: 4rpx;
+
+  .rating-score {
+    font-size: 40rpx;
+    font-weight: $font-bold;
+    color: #1890FF;
+    line-height: 1;
+  }
+
+  .rating-label {
+    font-size: 28rpx;
+    color: #1890FF;
+    font-weight: $font-medium;
+  }
+
+  .review-count {
+    font-size: 24rpx;
+    color: $text-tertiary;
+  }
+}
+
+.distance-row {
+  margin-bottom: 8rpx;
+
+  .distance-text {
+    font-size: 24rpx;
+    color: $text-tertiary;
+    line-height: 1.4;
+  }
+}
+
+.facilities-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  margin-bottom: 8rpx;
+
+  .facility-tag {
+    padding: 6rpx 12rpx;
+    background: $gray-100;
+    border-radius: $radius-sm;
+    font-size: 22rpx;
+    color: $text-secondary;
+    line-height: 1;
+  }
+}
+
+.purchase-tip {
+  font-size: 22rpx;
+  color: #FF6B6B;
+  margin-bottom: 8rpx;
+}
+
+.price-section {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-top: auto;
+
+  .price-info {
+    display: flex;
+    align-items: baseline;
+    gap: 12rpx;
+
+    .original-price {
+      font-size: 24rpx;
+      color: $text-tertiary;
+      text-decoration: line-through;
+    }
+
+    .current-price {
+      font-size: 48rpx;
+      font-weight: $font-bold;
+      color: #FF4D4F;
+      line-height: 1;
+    }
+  }
+
+  .promotion-text {
+    font-size: 20rpx;
+    color: #FF4D4F;
+    padding: 4rpx 8rpx;
+    background: rgba(255, 77, 79, 0.1);
+    border-radius: $radius-sm;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/apps/miniapp/src/components/business/MerchantHeader.vue b/apps/miniapp/src/components/business/MerchantHeader.vue
new file mode 100644
index 0000000..829ae74
--- /dev/null
+++ b/apps/miniapp/src/components/business/MerchantHeader.vue
@@ -0,0 +1,234 @@
+<template>
+  <view class="merchant-header">
+    <!-- 轮播图 -->
+    <swiper
+      class="banner-swiper"
+      :indicator-dots="images.length > 1"
+      :autoplay="images.length > 1"
+      :circular="images.length > 1"
+      indicator-color="rgba(255, 255, 255, 0.4)"
+      indicator-active-color="#FFFFFF"
+    >
+      <swiper-item v-for="(img, index) in displayImages" :key="index">
+        <image
+          class="banner-image"
+          :src="img"
+          mode="aspectFill"
+          @tap="previewImages(index)"
+        />
+      </swiper-item>
+    </swiper>
+
+    <!-- 商家信息卡片 -->
+    <base-card class="info-card" variant="elevated" :shadow="true">
+      <!-- 商家名称 -->
+      <view class="merchant-name-row">
+        <text class="merchant-name">{{ name }}</text>
+      </view>
+
+      <!-- 评分卡片 -->
+      <view class="rating-card" v-if="rating || reviewCount">
+        <rating-stars
+          :rating="rating"
+          :count="reviewCount"
+          size="large"
+          color="white"
+        />
+        <text class="rating-comment" v-if="ratingComment">{{ ratingComment }}</text>
+      </view>
+
+      <!-- 地址 -->
+      <view class="address-row" v-if="address" @tap="handleAddressTap">
+        <u-icon name="map-pin-fill" :size="iconSize" color="#6B7280" />
+        <text class="address-text">{{ address }}</text>
+        <u-icon name="copy" :size="iconSize - 4" color="#9CA3AF" />
+      </view>
+
+      <!-- 描述 -->
+      <text class="description" v-if="description">{{ description }}</text>
+
+      <!-- 标签 -->
+      <tag-list v-if="tags && tags.length > 0" :tags="tags" class="tags" />
+    </base-card>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseCard from '../base/BaseCard.vue';
+import RatingStars from './RatingStars.vue';
+import TagList from './TagList.vue';
+
+interface Props {
+  name: string;                    // 商家名称
+  images?: string[];               // 轮播图片
+  logo?: string;                   // 商家logo（作为默认图）
+  rating?: number;                 // 评分
+  reviewCount?: number;            // 评价数量
+  ratingComment?: string;          // 评分评语
+  address?: string;                // 地址
+  description?: string;            // 描述
+  tags?: string[];                 // 标签
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  images: () => [],
+  rating: 0,
+  reviewCount: 0,
+  tags: () => []
+});
+
+const emit = defineEmits<{
+  'address-tap': [address: string];
+  'preview-images': [index: number];
+}>();
+
+// 图标尺寸
+const iconSize = computed(() => 20);
+
+// 显示的图片列表
+const displayImages = computed(() => {
+  if (props.images && props.images.length > 0) {
+    return props.images;
+  }
+  if (props.logo) {
+    return [props.logo];
+  }
+  return ['/static/placeholder-hotel.png'];
+});
+
+// 预览图片
+function previewImages(index: number) {
+  if (props.images && props.images.length > 0) {
+    uni.previewImage({
+      current: index,
+      urls: props.images
+    });
+    emit('preview-images', index);
+  }
+}
+
+// 地址点击
+function handleAddressTap() {
+  if (!props.address) return;
+
+  uni.showActionSheet({
+    itemList: ['复制地址', '导航到这里'],
+    success: (res) => {
+      if (res.tapIndex === 0) {
+        // 复制地址
+        uni.setClipboardData({
+          data: props.address,
+          success: () => {
+            uni.showToast({ title: '地址已复制', icon: 'success' });
+          }
+        });
+      } else if (res.tapIndex === 1) {
+        // 导航
+        emit('address-tap', props.address);
+      }
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.merchant-header {
+  position: relative;
+  margin-bottom: $spacing-xl;
+}
+
+/* ========== 轮播图 ========== */
+.banner-swiper {
+  width: 100%;
+  height: 500rpx;
+  background: $gradient-secondary;
+}
+
+.banner-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* ========== 信息卡片 ========== */
+.info-card {
+  margin: -60rpx $spacing-xl 0;
+  position: relative;
+  z-index: 2;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-lg;
+}
+
+/* ========== 商家名称 ========== */
+.merchant-name-row {
+  margin-bottom: $spacing-lg;
+}
+
+.merchant-name {
+  font-size: $font-2xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+  line-height: $line-height-tight;
+  display: block;
+}
+
+/* ========== 评分卡片 ========== */
+.rating-card {
+  background: $gradient-secondary;
+  border-radius: $radius-md;
+  padding: $spacing-lg $spacing-xl;
+  @include flex-between;
+  margin-bottom: $spacing-lg;
+  box-shadow: $shadow-secondary;
+}
+
+.rating-comment {
+  font-size: $font-sm;
+  color: rgba(255, 255, 255, 0.95);
+  font-weight: $font-medium;
+  max-width: 300rpx;
+  text-align: right;
+  line-height: $line-height-normal;
+}
+
+/* ========== 地址 ========== */
+.address-row {
+  @include flex-row(flex-start, center);
+  gap: $spacing-xs;
+  margin-bottom: $spacing-lg;
+  padding: $spacing-md;
+  background: $gray-50;
+  border-radius: $radius-base;
+  transition: $transition-bg;
+
+  &:active {
+    background: $gray-100;
+  }
+}
+
+.address-text {
+  flex: 1;
+  font-size: $font-sm;
+  color: $text-secondary;
+  line-height: $line-height-normal;
+}
+
+/* ========== 描述 ========== */
+.description {
+  font-size: $font-base;
+  color: $text-secondary;
+  line-height: $line-height-relaxed;
+  display: block;
+  margin-bottom: $spacing-md;
+  @include text-ellipsis-multi(3);
+}
+
+/* ========== 标签 ========== */
+.tags {
+  margin-top: $spacing-md;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/OrderCard.vue b/apps/miniapp/src/components/business/OrderCard.vue
new file mode 100644
index 0000000..91e15af
--- /dev/null
+++ b/apps/miniapp/src/components/business/OrderCard.vue
@@ -0,0 +1,281 @@
+<template>
+  <view class="order-card" @click="handleClick">
+    <!-- 订单头部：商家名称 + 状态 -->
+    <view class="order-header">
+      <view class="merchant-info">
+        <u-icon name="home" :size="20" color="#0086F6"></u-icon>
+        <text class="merchant-name">{{ order.merchantName }}</text>
+      </view>
+      <status-badge :status="order.status" size="small"></status-badge>
+    </view>
+
+    <!-- 订单内容：图片 + 房源信息 + 价格 -->
+    <view class="order-body">
+      <image
+        v-if="order.roomImage"
+        :src="order.roomImage"
+        class="room-image"
+        mode="aspectFill"
+      ></image>
+      <view class="room-info">
+        <view class="info-top">
+          <view class="room-content">
+            <text class="room-name">{{ order.roomName }}</text>
+            <text class="room-type">{{ order.nights }}间, 共{{ order.nights }}晚</text>
+          </view>
+          <price-tag :price="order.totalAmount" size="large" type="primary"></price-tag>
+        </view>
+        <text class="date-text">{{ formatFullDate(order.checkInDate) }} - {{ formatFullDate(order.checkOutDate) }}</text>
+      </view>
+    </view>
+
+    <!-- 订单底部操作 -->
+    <view v-if="showActions && actions.length > 0" class="order-footer">
+      <view class="footer-actions">
+        <base-button
+          v-for="action in actions"
+          :key="action.type"
+          :type="action.buttonType || 'outline'"
+          size="small"
+          :text="action.text"
+          @click.stop="handleAction(action.type)"
+        ></base-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import StatusBadge from '../base/StatusBadge.vue'
+import BaseButton from '../base/BaseButton.vue'
+import PriceTag from './PriceTag.vue'
+
+interface Order {
+  orderNo: string
+  status: string
+  roomName: string
+  roomImage?: string
+  merchantName: string
+  checkInDate: string
+  checkOutDate: string
+  nights: number
+  totalAmount: number
+  userName?: string
+  createTime?: string
+  payTime?: string
+  confirmTime?: string
+  checkInTime?: string
+  completeTime?: string
+  cancelTime?: string
+  [key: string]: any
+}
+
+interface Action {
+  type: string
+  text: string
+  buttonType?: 'primary' | 'secondary' | 'outline' | 'text' | 'danger'
+}
+
+interface Props {
+  order: Order
+  mode?: 'user' | 'merchant'  // 用户端/商家端
+  clickable?: boolean
+  showActions?: boolean
+  compact?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'user',
+  clickable: true,
+  showActions: true,
+  compact: false
+})
+
+const emit = defineEmits<{
+  (e: 'click', order: Order): void
+  (e: 'action', type: string, order: Order): void
+}>()
+
+// 操作按钮配置
+const actions = computed<Action[]>(() => {
+  const status = props.order.status
+  const mode = props.mode
+
+  if (mode === 'user') {
+    // 用户端操作
+    switch (status) {
+      case 'pending_pay':
+        return [
+          { type: 'cancel', text: '取消订单', buttonType: 'text' },
+          { type: 'pay', text: '立即支付', buttonType: 'primary' }
+        ]
+      case 'pending_confirm':
+        return [
+          { type: 'cancel', text: '取消订单', buttonType: 'text' },
+          { type: 'contact', text: '联系商家', buttonType: 'outline' }
+        ]
+      case 'confirmed':
+        return [
+          { type: 'cancel', text: '申请退款', buttonType: 'text' },
+          { type: 'contact', text: '联系商家', buttonType: 'outline' }
+        ]
+      case 'completed':
+        return [
+          { type: 'review', text: '评价', buttonType: 'primary' }
+        ]
+      default:
+        return []
+    }
+  } else {
+    // 商家端操作
+    switch (status) {
+      case 'pending_confirm':
+        return [
+          { type: 'reject', text: '拒绝', buttonType: 'danger' },
+          { type: 'confirm', text: '确认', buttonType: 'primary' }
+        ]
+      case 'confirmed':
+        return [
+          { type: 'contact', text: '联系客户', buttonType: 'outline' }
+        ]
+      default:
+        return []
+    }
+  }
+})
+
+// 格式化日期为完整格式
+const formatFullDate = (date: string) => {
+  if (!date) return ''
+  const d = new Date(date)
+  const year = d.getFullYear()
+  const month = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 点击卡片
+const handleClick = () => {
+  if (props.clickable) {
+    emit('click', props.order)
+  }
+}
+
+// 操作按钮点击
+const handleAction = (type: string) => {
+  emit('action', type, props.order)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.order-card {
+  background: $bg-card;
+  border-radius: $radius-lg;
+  margin-bottom: $spacing-lg;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
+  }
+}
+
+/* ========== 订单头部 ========== */
+.order-header {
+  @include flex-between;
+  padding: $spacing-xl;
+  border-bottom: 1rpx solid $border-light;
+}
+
+.merchant-info {
+  @include flex-row(flex-start, center);
+  gap: $spacing-sm;
+  flex: 1;
+  min-width: 0;
+}
+
+.merchant-name {
+  font-size: $font-lg;
+  color: $text-primary;
+  font-weight: $font-semibold;
+  @include text-ellipsis;
+}
+
+/* ========== 订单内容 ========== */
+.order-body {
+  display: flex;
+  gap: $spacing-lg;
+  padding: $spacing-xl;
+}
+
+.room-image {
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: $radius-lg;
+  flex-shrink: 0;
+  background: $bg-page;
+  object-fit: cover;
+}
+
+.room-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.info-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: $spacing-md;
+  margin-bottom: $spacing-md;
+}
+
+.room-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+  min-width: 0;
+}
+
+.room-name {
+  font-size: $font-base;
+  color: $text-secondary;
+  line-height: 1.5;
+  @include text-ellipsis-multi(2);
+}
+
+.room-type {
+  font-size: $font-sm;
+  color: $text-tertiary;
+  line-height: 1.4;
+}
+
+.date-text {
+  font-size: $font-sm;
+  color: $text-tertiary;
+  margin-top: auto;
+}
+
+/* ========== 订单底部 ========== */
+.order-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: $spacing-lg $spacing-xl;
+  border-top: 1rpx solid $border-light;
+}
+
+.footer-actions {
+  display: flex;
+  gap: $spacing-sm;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/OrderQuickNav.vue b/apps/miniapp/src/components/business/OrderQuickNav.vue
new file mode 100644
index 0000000..cf3e434
--- /dev/null
+++ b/apps/miniapp/src/components/business/OrderQuickNav.vue
@@ -0,0 +1,149 @@
+<template>
+  <view class="order-quick-nav">
+    <view class="nav-header" @click="handleViewAll">
+      <text class="nav-title">我的订单</text>
+      <view class="nav-more">
+        <text class="more-text">全部订单</text>
+        <u-icon name="arrow-right" :size="14" color="#9CA3AF"></u-icon>
+      </view>
+    </view>
+    <view class="nav-grid">
+      <view
+        v-for="item in items"
+        :key="item.status"
+        class="nav-item"
+        @click="handleItemTap(item.status)"
+      >
+        <view class="item-icon" :style="{ background: item.bgColor }">
+          <u-icon :name="item.icon" :size="24" :color="item.iconColor"></u-icon>
+        </view>
+        <text class="item-label">{{ item.label }}</text>
+        <view v-if="item.badge && item.badge > 0" class="item-badge">
+          <text class="badge-text">{{ item.badge > 99 ? '99+' : item.badge }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface OrderNavItem {
+  status: string
+  label: string
+  icon: string
+  iconColor: string
+  bgColor: string
+  badge?: number
+}
+
+interface Props {
+  items?: OrderNavItem[]
+}
+
+withDefaults(defineProps<Props>(), {
+  items: () => [
+    { status: 'pending', label: '待支付', icon: 'clock', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
+    { status: 'confirmed', label: '待入住', icon: 'calendar', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
+    { status: 'completed', label: '已完成', icon: 'checkmark-circle', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
+    { status: 'cancelled', label: '已取消', icon: 'close-circle', iconColor: '#1A1A1A', bgColor: '#FFFFFF' }
+  ]
+})
+
+const emit = defineEmits<{
+  (e: 'item-tap', status: string): void
+  (e: 'view-all'): void
+}>()
+
+function handleItemTap(status: string) {
+  emit('item-tap', status)
+}
+
+function handleViewAll() {
+  emit('view-all')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.order-quick-nav {
+  background: $bg-card;
+  margin: -$spacing-xl $spacing-2xl $spacing-lg;
+  border-radius: $radius-lg;
+  padding: $spacing-xl $spacing-lg;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.nav-header {
+  @include flex-between;
+  margin-bottom: $spacing-lg;
+}
+
+.nav-title {
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.nav-more {
+  @include flex-row(flex-end, center);
+  gap: 4rpx;
+}
+
+.more-text {
+  font-size: $font-sm;
+  color: $text-tertiary;
+}
+
+.nav-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-md;
+}
+
+.nav-item {
+  position: relative;
+  @include flex-column(center, center);
+  gap: $spacing-sm;
+  padding: $spacing-md 0;
+  transition: $transition-transform;
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.item-icon {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: $radius-base;
+  @include flex-center;
+}
+
+.item-label {
+  font-size: $font-xs;
+  color: $text-secondary;
+  font-weight: $font-medium;
+}
+
+.item-badge {
+  position: absolute;
+  top: 8rpx;
+  right: 20rpx;
+  min-width: 32rpx;
+  height: 32rpx;
+  background: $error-color;
+  border-radius: $radius-round;
+  padding: 0 8rpx;
+  @include flex-center;
+}
+
+.badge-text {
+  font-size: 20rpx;
+  color: $text-inverse;
+  font-weight: $font-semibold;
+  line-height: 1;
+  transform: scale(0.9);
+}
+</style>
diff --git a/apps/miniapp/src/components/business/PriceTag.vue b/apps/miniapp/src/components/business/PriceTag.vue
new file mode 100644
index 0000000..5cf9d4a
--- /dev/null
+++ b/apps/miniapp/src/components/business/PriceTag.vue
@@ -0,0 +1,207 @@
+<template>
+  <view class="price-tag" :class="[`price-${size}`, `price-${type}`]" :style="customStyle">
+    <!-- 货币符号 -->
+    <text class="price-symbol">{{ symbol }}</text>
+
+    <!-- 价格数值 -->
+    <text class="price-value">{{ displayPrice }}</text>
+
+    <!-- 单位 -->
+    <text v-if="unit" class="price-unit">{{ unit }}</text>
+
+    <!-- 原价（划线价） -->
+    <text v-if="originalPrice" class="price-original">{{ symbol }}{{ originalPrice }}</text>
+
+    <!-- 折扣标签 -->
+    <view v-if="discount" class="price-discount">{{ discount }}</view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type PriceType = 'primary' | 'gradient' | 'normal'
+type PriceSize = 'small' | 'medium' | 'large' | 'xlarge'
+
+interface Props {
+  price: number | string      // 价格
+  originalPrice?: number | string  // 原价
+  symbol?: string             // 货币符号
+  unit?: string               // 单位
+  size?: PriceSize            // 尺寸
+  type?: PriceType            // 类型
+  discount?: string           // 折扣标签
+  color?: string              // 自定义颜色
+  bold?: boolean              // 是否加粗
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  symbol: '¥',
+  size: 'medium',
+  type: 'primary',
+  bold: true
+})
+
+// 显示价格
+const displayPrice = computed(() => {
+  const price = Number(props.price)
+  if (isNaN(price)) return props.price
+  return price.toFixed(0)
+})
+
+// 自定义样式
+const customStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.color) {
+    style.color = props.color
+  }
+  return style
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.price-tag {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4rpx;
+  line-height: 1;
+}
+
+/* ========== 尺寸 ========== */
+.price-small {
+  .price-symbol {
+    font-size: $font-xs;
+  }
+  .price-value {
+    font-size: $font-base;
+  }
+  .price-unit {
+    font-size: $font-xs;
+  }
+  .price-original {
+    font-size: $font-xs;
+  }
+}
+
+.price-medium {
+  .price-symbol {
+    font-size: $font-sm;
+  }
+  .price-value {
+    font-size: $font-xl;
+  }
+  .price-unit {
+    font-size: $font-sm;
+  }
+  .price-original {
+    font-size: $font-sm;
+  }
+}
+
+.price-large {
+  .price-symbol {
+    font-size: $font-base;
+  }
+  .price-value {
+    font-size: $font-2xl;
+  }
+  .price-unit {
+    font-size: $font-base;
+  }
+  .price-original {
+    font-size: $font-base;
+  }
+}
+
+.price-xlarge {
+  .price-symbol {
+    font-size: $font-lg;
+  }
+  .price-value {
+    font-size: $font-3xl;
+  }
+  .price-unit {
+    font-size: $font-lg;
+  }
+  .price-original {
+    font-size: $font-lg;
+  }
+}
+
+/* ========== 类型 ========== */
+
+/* 主色（橙色） */
+.price-primary {
+  color: $primary-color;
+
+  .price-value {
+    font-weight: $font-bold;
+  }
+}
+
+/* 渐变色 */
+.price-gradient {
+  background: $gradient-primary;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+
+  .price-value {
+    font-weight: $font-bold;
+  }
+}
+
+/* 普通色 */
+.price-normal {
+  color: $text-primary;
+
+  .price-value {
+    font-weight: $font-semibold;
+  }
+}
+
+/* ========== 元素样式 ========== */
+
+/* 货币符号 */
+.price-symbol {
+  font-weight: $font-medium;
+  margin-right: 2rpx;
+}
+
+/* 价格数值 */
+.price-value {
+  font-weight: $font-bold;
+}
+
+/* 单位 */
+.price-unit {
+  color: $text-tertiary;
+  font-weight: $font-regular;
+  margin-left: 2rpx;
+}
+
+/* 原价（划线价） */
+.price-original {
+  color: $text-tertiary;
+  text-decoration: line-through;
+  font-weight: $font-regular;
+  margin-left: 8rpx;
+}
+
+/* 折扣标签 */
+.price-discount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rpx 8rpx;
+  margin-left: 8rpx;
+  background: $gradient-warm;
+  color: $text-inverse;
+  font-size: $font-xs;
+  font-weight: $font-medium;
+  border-radius: $radius-xs;
+  line-height: 1.2;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/RatingStars.vue b/apps/miniapp/src/components/business/RatingStars.vue
new file mode 100644
index 0000000..758e162
--- /dev/null
+++ b/apps/miniapp/src/components/business/RatingStars.vue
@@ -0,0 +1,182 @@
+<template>
+  <view class="rating-stars" :class="`rating-${size}`">
+    <!-- 星级 -->
+    <view v-if="showStars" class="stars-wrap">
+      <view
+        v-for="i in 5"
+        :key="i"
+        class="star"
+        :class="getStarClass(i)"
+        @click="handleClick(i)"
+      >
+        <text class="star-icon">★</text>
+      </view>
+    </view>
+
+    <!-- 评分数值 -->
+    <text v-if="showScore" class="score">{{ displayScore }}</text>
+
+    <!-- 评价文字（如：好评） -->
+    <text v-if="label" class="label">{{ label }}</text>
+
+    <!-- 评价数量 -->
+    <text v-if="count !== undefined" class="count">({{ count }}条评价)</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type RatingSize = 'small' | 'medium' | 'large'
+
+interface Props {
+  score: number               // 分数 0-5
+  max?: number                // 最大分数
+  size?: RatingSize           // 尺寸
+  showStars?: boolean         // 是否显示星星
+  showScore?: boolean         // 是否显示分数
+  label?: string              // 评价文字
+  count?: number              // 评价数量
+  readonly?: boolean          // 是否只读
+  precision?: number          // 精度（小数位）
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  max: 5,
+  size: 'medium',
+  showStars: true,
+  showScore: true,
+  readonly: true,
+  precision: 1
+})
+
+const emit = defineEmits<{
+  (e: 'change', score: number): void
+}>()
+
+// 显示分数
+const displayScore = computed(() => {
+  return Number(props.score).toFixed(props.precision)
+})
+
+// 获取星星样式
+const getStarClass = (index: number) => {
+  const score = props.score
+  if (score >= index) {
+    return 'star-full'
+  } else if (score >= index - 0.5) {
+    return 'star-half'
+  }
+  return 'star-empty'
+}
+
+// 点击星星
+const handleClick = (index: number) => {
+  if (props.readonly) return
+  emit('change', index)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.rating-stars {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+/* ========== 尺寸 ========== */
+.rating-small {
+  .star-icon {
+    font-size: 20rpx;
+  }
+  .score {
+    font-size: $font-xs;
+  }
+  .label,
+  .count {
+    font-size: $font-xs;
+  }
+}
+
+.rating-medium {
+  .star-icon {
+    font-size: 24rpx;
+  }
+  .score {
+    font-size: $font-sm;
+  }
+  .label,
+  .count {
+    font-size: $font-sm;
+  }
+}
+
+.rating-large {
+  .star-icon {
+    font-size: 32rpx;
+  }
+  .score {
+    font-size: $font-base;
+  }
+  .label,
+  .count {
+    font-size: $font-sm;
+  }
+}
+
+/* ========== 星星容器 ========== */
+.stars-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 2rpx;
+}
+
+/* ========== 星星 ========== */
+.star {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.star-icon {
+  line-height: 1;
+}
+
+/* 实心 */
+.star-full .star-icon {
+  color: #FFC107;
+}
+
+/* 半实心 */
+.star-half .star-icon {
+  background: linear-gradient(90deg, #FFC107 50%, #E5E7EB 50%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* 空 */
+.star-empty .star-icon {
+  color: #E5E7EB;
+}
+
+/* ========== 分数 ========== */
+.score {
+  color: $primary-color;
+  font-weight: $font-semibold;
+}
+
+/* ========== 评价文字 ========== */
+.label {
+  color: $text-secondary;
+  font-weight: $font-medium;
+}
+
+/* ========== 评价数量 ========== */
+.count {
+  color: $text-tertiary;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/ReviewCard.vue b/apps/miniapp/src/components/business/ReviewCard.vue
new file mode 100644
index 0000000..6657699
--- /dev/null
+++ b/apps/miniapp/src/components/business/ReviewCard.vue
@@ -0,0 +1,166 @@
+<template>
+  <base-card class="review-card" :clickable="false">
+    <view class="review-header">
+      <image class="avatar" :src="review.userAvatar || '/static/default-avatar.png'" mode="aspectFill" />
+      <view class="user-info">
+        <text class="username">{{ review.userName }}</text>
+        <rating-stars :rating="review.rating" size="small" :show-count="false" />
+      </view>
+      <text class="date">{{ formatDate(review.createdAt) }}</text>
+    </view>
+
+    <view class="review-content">
+      <text class="content-text">{{ review.content }}</text>
+    </view>
+
+    <view v-if="review.images && review.images.length > 0" class="review-images">
+      <image
+        v-for="(img, index) in review.images"
+        :key="index"
+        class="review-image"
+        :src="img"
+        mode="aspectFill"
+        @click="previewImage(index)"
+      />
+    </view>
+
+    <view v-if="review.reply" class="merchant-reply">
+      <view class="reply-header">
+        <u-icon name="chat" size="16" color="#FF6B35" />
+        <text class="reply-label">商家回复</text>
+      </view>
+      <text class="reply-content">{{ review.reply }}</text>
+    </view>
+  </base-card>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import BaseCard from '../base/BaseCard.vue';
+import RatingStars from './RatingStars.vue';
+
+interface Review {
+  id: number;
+  userName: string;
+  userAvatar?: string;
+  rating: number;
+  content: string;
+  images?: string[];
+  reply?: string;
+  createdAt: string;
+}
+
+const props = defineProps<{
+  review: Review;
+}>();
+
+function formatDate(dateStr: string) {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+  if (days === 0) return '今天';
+  if (days === 1) return '昨天';
+  if (days < 7) return `${days}天前`;
+  if (days < 30) return `${Math.floor(days / 7)}周前`;
+  if (days < 365) return `${Math.floor(days / 30)}个月前`;
+  return `${Math.floor(days / 365)}年前`;
+}
+
+function previewImage(index: number) {
+  if (!props.review.images) return;
+  uni.previewImage({
+    current: index,
+    urls: props.review.images
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.review-card {
+  margin-bottom: $spacing-md;
+}
+
+.review-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: $spacing-md;
+}
+
+.avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: $radius-round;
+  margin-right: $spacing-md;
+}
+
+.user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.username {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: $gray-900;
+}
+
+.date {
+  font-size: 24rpx;
+  color: $gray-500;
+}
+
+.review-content {
+  margin-bottom: $spacing-md;
+}
+
+.content-text {
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: $gray-800;
+}
+
+.review-images {
+  display: flex;
+  gap: $spacing-sm;
+  margin-bottom: $spacing-md;
+  flex-wrap: wrap;
+}
+
+.review-image {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: $radius-md;
+}
+
+.merchant-reply {
+  background: linear-gradient(135deg, rgba($primary-500, 0.05) 0%, rgba($primary-400, 0.05) 100%);
+  padding: $spacing-md;
+  border-radius: $radius-md;
+  border-left: 4rpx solid $primary-500;
+}
+
+.reply-header {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  margin-bottom: $spacing-sm;
+}
+
+.reply-label {
+  font-size: 24rpx;
+  font-weight: 500;
+  color: $primary-600;
+}
+
+.reply-content {
+  font-size: 26rpx;
+  line-height: 1.5;
+  color: $gray-700;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/SearchBar.vue b/apps/miniapp/src/components/business/SearchBar.vue
new file mode 100644
index 0000000..41d05b2
--- /dev/null
+++ b/apps/miniapp/src/components/business/SearchBar.vue
@@ -0,0 +1,343 @@
+<template>
+  <view class="search-bar" :class="{ 'search-bar-fixed': fixed }" :style="{ top: fixedTop }">
+    <view class="search-container" :class="{ 'search-glass': glass }">
+      <!-- 搜索输入框 -->
+      <view class="search-input-wrap" @tap="handleFocus">
+        <u-icon name="search" :size="24" :color="iconColor"></u-icon>
+        <input
+          v-if="!readonly"
+          v-model="inputValue"
+          class="search-input"
+          type="text"
+          :placeholder="placeholder"
+          :placeholder-style="`color: ${placeholderColor}`"
+          :focus="focused"
+          :maxlength="maxlength"
+          @input="handleInput"
+          @focus="handleInputFocus"
+          @blur="handleInputBlur"
+          @confirm="handleSearch"
+        />
+        <text v-else class="search-text" :class="{ 'search-placeholder': !modelValue }">
+          {{ modelValue || placeholder }}
+        </text>
+
+        <!-- 清除按钮 -->
+        <view v-if="showClear && inputValue" class="search-clear" @tap.stop="handleClear">
+          <u-icon name="close-circle-fill" :size="24" color="#CCCCCC"></u-icon>
+        </view>
+      </view>
+
+      <!-- 搜索按钮 -->
+      <view v-if="showButton" class="search-button" @tap="handleSearch">
+        <text class="search-button-text">{{ buttonText }}</text>
+      </view>
+
+      <!-- 取消按钮 -->
+      <view v-if="showCancel && focused" class="search-cancel" @tap="handleCancel">
+        <text class="search-cancel-text">取消</text>
+      </view>
+    </view>
+
+    <!-- 热门搜索 -->
+    <view v-if="showHot && hotKeywords.length > 0 && focused" class="search-hot">
+      <view class="hot-header">
+        <text class="hot-title">热门搜索</text>
+      </view>
+      <view class="hot-list">
+        <view
+          v-for="(keyword, index) in hotKeywords"
+          :key="index"
+          class="hot-item"
+          @tap="handleHotClick(keyword)"
+        >
+          <text class="hot-text">{{ keyword }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  modelValue?: string          // 搜索值
+  placeholder?: string         // 占位文字
+  readonly?: boolean           // 只读模式
+  fixed?: boolean              // 是否固定定位
+  fixedTop?: string            // 固定定位的top值
+  glass?: boolean              // 毛玻璃效果
+  showButton?: boolean         // 是否显示搜索按钮
+  buttonText?: string          // 搜索按钮文字
+  showCancel?: boolean         // 是否显示取消按钮
+  showClear?: boolean          // 是否显示清除按钮
+  showHot?: boolean            // 是否显示热门搜索
+  hotKeywords?: string[]       // 热门关键词
+  maxlength?: number           // 最大长度
+  autofocus?: boolean          // 自动聚焦
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '搜索酒店、民宿',
+  readonly: false,
+  fixed: false,
+  fixedTop: '0',
+  glass: false,
+  showButton: false,
+  buttonText: '搜索',
+  showCancel: true,
+  showClear: true,
+  showHot: false,
+  hotKeywords: () => [],
+  maxlength: 50,
+  autofocus: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'search': [value: string]
+  'focus': []
+  'blur': []
+  'cancel': []
+  'clear': []
+  'hot-click': [keyword: string]
+}>()
+
+const inputValue = ref(props.modelValue || '')
+const focused = ref(props.autofocus)
+
+// 图标颜色
+const iconColor = computed(() => {
+  return focused.value ? '#FF6B35' : '#999999'
+})
+
+// 占位符颜色
+const placeholderColor = computed(() => {
+  return '#CCCCCC'
+})
+
+// 监听外部值变化
+watch(() => props.modelValue, (val) => {
+  inputValue.value = val || ''
+})
+
+// 输入事件
+const handleInput = (e: any) => {
+  const value = e.detail.value
+  inputValue.value = value
+  emit('update:modelValue', value)
+}
+
+// 聚焦
+const handleFocus = () => {
+  if (props.readonly) {
+    emit('focus')
+  } else {
+    focused.value = true
+  }
+}
+
+// 输入框聚焦
+const handleInputFocus = () => {
+  focused.value = true
+  emit('focus')
+}
+
+// 输入框失焦
+const handleInputBlur = () => {
+  setTimeout(() => {
+    if (!props.showCancel) {
+      focused.value = false
+    }
+    emit('blur')
+  }, 200)
+}
+
+// 搜索
+const handleSearch = () => {
+  emit('search', inputValue.value)
+  if (!props.showCancel) {
+    focused.value = false
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  inputValue.value = ''
+  focused.value = false
+  emit('update:modelValue', '')
+  emit('cancel')
+}
+
+// 清除
+const handleClear = () => {
+  inputValue.value = ''
+  emit('update:modelValue', '')
+  emit('clear')
+}
+
+// 热门搜索点击
+const handleHotClick = (keyword: string) => {
+  inputValue.value = keyword
+  emit('update:modelValue', keyword)
+  emit('hot-click', keyword)
+  emit('search', keyword)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.search-bar {
+  width: 100%;
+  background: $bg-page;
+}
+
+.search-bar-fixed {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: $z-fixed;
+  @include safe-area-top;
+}
+
+/* ========== 搜索容器 ========== */
+.search-container {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-md $spacing-xl;
+  background: $bg-page;
+}
+
+.search-glass {
+  @include glass-bg(20rpx, 0.95);
+}
+
+/* ========== 搜索输入框 ========== */
+.search-input-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  height: 64rpx;
+  padding: 0 $spacing-md;
+  background: $bg-card;
+  border-radius: $radius-round;
+  transition: $transition-all;
+
+  &:active {
+    background: $bg-hover;
+  }
+}
+
+.search-input {
+  flex: 1;
+  font-size: $font-base;
+  color: $text-primary;
+  height: 100%;
+}
+
+.search-text {
+  flex: 1;
+  font-size: $font-base;
+  color: $text-primary;
+  @include text-ellipsis;
+}
+
+.search-placeholder {
+  color: $text-placeholder;
+}
+
+/* 清除按钮 */
+.search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32rpx;
+  height: 32rpx;
+  transition: $transition-all;
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+/* ========== 搜索按钮 ========== */
+.search-button {
+  padding: 0 $spacing-xl;
+  height: 64rpx;
+  background: $gradient-primary;
+  border-radius: $radius-round;
+  @include flex-center;
+  transition: $transition-all;
+
+  &:active {
+    transform: scale(0.95);
+    opacity: 0.9;
+  }
+}
+
+.search-button-text {
+  font-size: $font-base;
+  color: $text-inverse;
+  font-weight: $font-medium;
+}
+
+/* ========== 取消按钮 ========== */
+.search-cancel {
+  padding: 0 $spacing-sm;
+  transition: $transition-all;
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+.search-cancel-text {
+  font-size: $font-base;
+  color: $text-secondary;
+}
+
+/* ========== 热门搜索 ========== */
+.search-hot {
+  padding: $spacing-xl;
+  background: $bg-card;
+  margin-top: $spacing-sm;
+  border-radius: $radius-md;
+}
+
+.hot-header {
+  margin-bottom: $spacing-md;
+}
+
+.hot-title {
+  font-size: $font-base;
+  color: $text-primary;
+  font-weight: $font-semibold;
+}
+
+.hot-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-md;
+}
+
+.hot-item {
+  padding: $spacing-sm $spacing-lg;
+  background: $bg-page;
+  border-radius: $radius-round;
+  transition: $transition-all;
+
+  &:active {
+    background: $primary-50;
+  }
+}
+
+.hot-text {
+  font-size: $font-sm;
+  color: $text-secondary;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/SectionHeader.vue b/apps/miniapp/src/components/business/SectionHeader.vue
new file mode 100644
index 0000000..fddeed4
--- /dev/null
+++ b/apps/miniapp/src/components/business/SectionHeader.vue
@@ -0,0 +1,133 @@
+<template>
+  <view class="section-header" :class="{ 'has-action': hasAction }">
+    <view class="header-left">
+      <!-- 图标 -->
+      <u-icon
+        v-if="icon"
+        :name="icon"
+        :size="iconSize"
+        :color="iconColor"
+        class="header-icon"
+      />
+
+      <!-- 标题 -->
+      <text class="header-title">{{ title }}</text>
+
+      <!-- 副标题/数量 -->
+      <text v-if="subtitle" class="header-subtitle">{{ subtitle }}</text>
+    </view>
+
+    <!-- 右侧操作 -->
+    <view v-if="hasAction" class="header-action" @tap="handleActionClick">
+      <slot name="action">
+        <text class="action-text">{{ actionText }}</text>
+        <u-icon
+          v-if="showArrow"
+          name="arrow-right"
+          :size="16"
+          color="#9CA3AF"
+        />
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  title: string;              // 标题
+  subtitle?: string;          // 副标题
+  icon?: string;              // 图标名称
+  iconColor?: string;         // 图标颜色
+  iconSize?: number;          // 图标尺寸
+  actionText?: string;        // 操作文字
+  showArrow?: boolean;        // 显示箭头
+  bordered?: boolean;         // 显示底部边框
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  iconColor: '#FF6B35',
+  iconSize: 24,
+  actionText: '查看全部',
+  showArrow: true,
+  bordered: true
+});
+
+const emit = defineEmits<{
+  'action-click': [];
+}>();
+
+// 是否有操作区域
+const hasAction = computed(() => {
+  return !!props.actionText || !!useSlots().action;
+});
+
+// 点击操作
+function handleActionClick() {
+  emit('action-click');
+}
+
+// 获取插槽
+function useSlots() {
+  return {
+    action: false // 这里简化处理，实际应该检查插槽
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.section-header {
+  @include flex-between;
+  padding: $spacing-lg 0;
+  border-bottom: 1rpx solid $border-light;
+  margin-bottom: $spacing-lg;
+
+  &.has-action {
+    cursor: pointer;
+  }
+}
+
+/* ========== 左侧 ========== */
+.header-left {
+  @include flex-row(flex-start, center);
+  gap: $spacing-xs;
+  flex: 1;
+}
+
+.header-icon {
+  flex-shrink: 0;
+}
+
+.header-title {
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
+  line-height: 1;
+}
+
+.header-subtitle {
+  font-size: $font-sm;
+  color: $text-tertiary;
+  margin-left: $spacing-xs;
+}
+
+/* ========== 右侧操作 ========== */
+.header-action {
+  @include flex-row(flex-end, center);
+  gap: 4rpx;
+  transition: $transition-opacity;
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+.action-text {
+  font-size: $font-sm;
+  color: $text-secondary;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/TagList.vue b/apps/miniapp/src/components/business/TagList.vue
new file mode 100644
index 0000000..a067eed
--- /dev/null
+++ b/apps/miniapp/src/components/business/TagList.vue
@@ -0,0 +1,310 @@
+<template>
+  <view class="tag-list" :class="{ 'tag-list-scrollable': scrollable }">
+    <scroll-view
+      v-if="scrollable"
+      class="tag-scroll"
+      scroll-x
+      :show-scrollbar="false"
+    >
+      <view class="tag-list-inner">
+        <view
+          v-for="(tag, index) in displayTags"
+          :key="index"
+          class="tag-item"
+          :class="[
+            `tag-${type}`,
+            `tag-${size}`,
+            { 'tag-active': isActive(tag) }
+          ]"
+          @tap="handleClick(tag, index)"
+        >
+          <u-icon v-if="tag.icon" :name="tag.icon" :size="iconSize" class="tag-icon"></u-icon>
+          <text class="tag-text">{{ getTagLabel(tag) }}</text>
+          <u-icon v-if="closable" name="close" :size="closeIconSize" class="tag-close" @tap.stop="handleClose(tag, index)"></u-icon>
+        </view>
+
+        <!-- 更多按钮 -->
+        <view v-if="showMore && tags.length > limit" class="tag-item tag-more" @tap="handleToggle">
+          <text class="tag-text">{{ expanded ? '收起' : `+${tags.length - limit}` }}</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view v-else class="tag-list-inner">
+      <view
+        v-for="(tag, index) in displayTags"
+        :key="index"
+        class="tag-item"
+        :class="[
+          `tag-${type}`,
+          `tag-${size}`,
+          { 'tag-active': isActive(tag) }
+        ]"
+        @tap="handleClick(tag, index)"
+      >
+        <u-icon v-if="tag.icon" :name="tag.icon" :size="iconSize" class="tag-icon"></u-icon>
+        <text class="tag-text">{{ getTagLabel(tag) }}</text>
+        <u-icon v-if="closable" name="close" :size="closeIconSize" class="tag-close" @tap.stop="handleClose(tag, index)"></u-icon>
+      </view>
+
+      <!-- 更多按钮 -->
+      <view v-if="showMore && tags.length > limit" class="tag-item tag-more" @tap="handleToggle">
+        <text class="tag-text">{{ expanded ? '收起' : `+${tags.length - limit}` }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+type TagType = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'
+type TagSize = 'small' | 'medium' | 'large'
+
+interface Tag {
+  label?: string
+  value?: string | number
+  icon?: string
+  type?: TagType
+  [key: string]: any
+}
+
+interface Props {
+  tags: (string | Tag)[]      // 标签数据
+  type?: TagType               // 标签类型
+  size?: TagSize               // 标签尺寸
+  activeValue?: any            // 当前激活值
+  closable?: boolean           // 是否可关闭
+  scrollable?: boolean         // 是否横向滚动
+  limit?: number               // 显示数量限制
+  showMore?: boolean           // 是否显示更多按钮
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'default',
+  size: 'medium',
+  closable: false,
+  scrollable: false,
+  limit: 999,
+  showMore: false
+})
+
+const emit = defineEmits<{
+  (e: 'click', tag: string | Tag, index: number): void
+  (e: 'close', tag: string | Tag, index: number): void
+}>()
+
+const expanded = ref(false)
+
+// 显示的标签
+const displayTags = computed(() => {
+  if (props.showMore && !expanded.value) {
+    return props.tags.slice(0, props.limit)
+  }
+  return props.tags
+})
+
+// 图标尺寸
+const iconSize = computed(() => {
+  const sizeMap = {
+    small: 20,
+    medium: 24,
+    large: 28
+  }
+  return sizeMap[props.size]
+})
+
+// 关闭图标尺寸
+const closeIconSize = computed(() => {
+  const sizeMap = {
+    small: 18,
+    medium: 20,
+    large: 24
+  }
+  return sizeMap[props.size]
+})
+
+// 获取标签文本
+const getTagLabel = (tag: string | Tag): string => {
+  if (typeof tag === 'string') return tag
+  return tag.label || String(tag.value || '')
+}
+
+// 获取标签值
+const getTagValue = (tag: string | Tag): any => {
+  if (typeof tag === 'string') return tag
+  return tag.value !== undefined ? tag.value : tag.label
+}
+
+// 是否激活
+const isActive = (tag: string | Tag): boolean => {
+  if (props.activeValue === undefined) return false
+  return getTagValue(tag) === props.activeValue
+}
+
+// 点击标签
+const handleClick = (tag: string | Tag, index: number) => {
+  emit('click', tag, index)
+}
+
+// 关闭标签
+const handleClose = (tag: string | Tag, index: number) => {
+  emit('close', tag, index)
+}
+
+// 切换展开/收起
+const handleToggle = () => {
+  expanded.value = !expanded.value
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+
+.tag-list {
+  width: 100%;
+}
+
+.tag-list-scrollable {
+  overflow: hidden;
+}
+
+.tag-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.tag-list-inner {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+}
+
+.tag-list-scrollable .tag-list-inner {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  padding-right: 24rpx;
+}
+
+/* ========== 标签项 ========== */
+.tag-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6rpx;
+  border-radius: $radius-xs;
+  transition: $transition-all;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ========== 尺寸 ========== */
+.tag-small {
+  padding: 4rpx 12rpx;
+  font-size: $font-xs;
+  height: 40rpx;
+}
+
+.tag-medium {
+  padding: 6rpx 16rpx;
+  font-size: $font-sm;
+  height: 48rpx;
+}
+
+.tag-large {
+  padding: 8rpx 20rpx;
+  font-size: $font-base;
+  height: 56rpx;
+}
+
+/* ========== 类型 ========== */
+.tag-default {
+  background: $gray-100;
+  color: $text-secondary;
+
+  &.tag-active {
+    background: $primary-color;
+    color: $text-inverse;
+  }
+}
+
+.tag-primary {
+  background: $primary-50;
+  color: $primary-color;
+
+  &.tag-active {
+    background: $primary-color;
+    color: $text-inverse;
+  }
+}
+
+.tag-success {
+  background: $success-bg;
+  color: $success-color;
+
+  &.tag-active {
+    background: $success-color;
+    color: $text-inverse;
+  }
+}
+
+.tag-warning {
+  background: $warning-bg;
+  color: $warning-color;
+
+  &.tag-active {
+    background: $warning-color;
+    color: $text-inverse;
+  }
+}
+
+.tag-error {
+  background: $error-bg;
+  color: $error-color;
+
+  &.tag-active {
+    background: $error-color;
+    color: $text-inverse;
+  }
+}
+
+.tag-info {
+  background: $info-bg;
+  color: $info-color;
+
+  &.tag-active {
+    background: $info-color;
+    color: $text-inverse;
+  }
+}
+
+/* ========== 更多按钮 ========== */
+.tag-more {
+  background: transparent;
+  border: 1rpx dashed $border-base;
+  color: $text-tertiary;
+
+  &:active {
+    background: $bg-hover;
+  }
+}
+
+/* ========== 图标 ========== */
+.tag-icon {
+  flex-shrink: 0;
+}
+
+.tag-close {
+  flex-shrink: 0;
+  margin-left: 4rpx;
+  opacity: 0.6;
+
+  &:active {
+    opacity: 1;
+  }
+}
+
+/* ========== 文字 ========== */
+.tag-text {
+  line-height: 1;
+}
+</style>
diff --git a/apps/miniapp/src/components/business/ToolGrid.vue b/apps/miniapp/src/components/business/ToolGrid.vue
new file mode 100644
index 0000000..5db6bad
--- /dev/null
+++ b/apps/miniapp/src/components/business/ToolGrid.vue
@@ -0,0 +1,111 @@
+<template>
+  <view class="tool-grid">
+    <view
+      v-for="tool in tools"
+      :key="tool.key"
+      class="tool-item"
+      @click="handleTap(tool.key)"
+    >
+      <view class="tool-icon" :style="{ background: tool.bgColor }">
+        <u-icon :name="tool.icon" :size="24" :color="tool.iconColor"></u-icon>
+      </view>
+      <text class="tool-label">{{ tool.label }}</text>
+      <view v-if="tool.badge" class="tool-badge">
+        <text class="badge-text">{{ tool.badge }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Tool {
+  key: string
+  label: string
+  icon: string
+  iconColor: string
+  bgColor: string
+  badge?: string | number
+}
+
+interface Props {
+  tools?: Tool[]
+}
+
+withDefaults(defineProps<Props>(), {
+  tools: () => [
+    { key: 'invite', label: '邀请返现', icon: 'gift', iconColor: '#FF6B35', bgColor: '#FFF5F2' },
+    { key: 'coupon', label: '优惠券', icon: 'coupon', iconColor: '#FAAD14', bgColor: '#FFFBE6' },
+    { key: 'favorite', label: '我的收藏', icon: 'heart', iconColor: '#F5222D', bgColor: '#FFF1F0' },
+    { key: 'service', label: '联系客服', icon: 'chat', iconColor: '#0086F6', bgColor: '#E6F4FF' }
+  ]
+})
+
+const emit = defineEmits<{
+  (e: 'item-click', key: string): void
+}>()
+
+function handleTap(key: string) {
+  emit('item-click', key)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.tool-grid {
+  background: $bg-card;
+  margin: 0 $spacing-2xl $spacing-lg;
+  border-radius: $radius-lg;
+  padding: $spacing-lg;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-md;
+}
+
+.tool-item {
+  position: relative;
+  @include flex-column(center, center);
+  gap: $spacing-sm;
+  padding: $spacing-md 0;
+  transition: $transition-transform;
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.tool-icon {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: $radius-base;
+  @include flex-center;
+}
+
+.tool-label {
+  font-size: $font-xs;
+  color: $text-secondary;
+  font-weight: $font-medium;
+}
+
+.tool-badge {
+  position: absolute;
+  top: 8rpx;
+  right: 20rpx;
+  min-width: 32rpx;
+  height: 32rpx;
+  background: $error-color;
+  border-radius: $radius-round;
+  padding: 0 8rpx;
+  @include flex-center;
+}
+
+.badge-text {
+  font-size: 20rpx;
+  color: $text-inverse;
+  font-weight: $font-semibold;
+  line-height: 1;
+  transform: scale(0.9);
+}
+</style>
diff --git a/apps/miniapp/src/components/business/UserProfile.vue b/apps/miniapp/src/components/business/UserProfile.vue
new file mode 100644
index 0000000..31ef025
--- /dev/null
+++ b/apps/miniapp/src/components/business/UserProfile.vue
@@ -0,0 +1,92 @@
+<template>
+  <view class="user-profile" @click="handleTap">
+    <image class="avatar" :src="avatar" mode="aspectFill" />
+    <view class="info">
+      <view v-if="isLoggedIn" class="info-content">
+        <text class="name">{{ name }}</text>
+        <text v-if="phone" class="phone">{{ phone }}</text>
+      </view>
+      <view v-else class="login-prompt">
+        <text class="login-text">登录/注册</text>
+        <u-icon name="arrow-right" :size="16" color="rgba(255, 255, 255, 0.8)"></u-icon>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  avatar?: string
+  name?: string
+  phone?: string
+  isLoggedIn?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  avatar: '/static/default-avatar.png',
+  name: '用户',
+  phone: '',
+  isLoggedIn: false
+})
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+function handleTap() {
+  emit('click')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
+.user-profile {
+  @include flex-row(flex-start, center);
+  gap: $spacing-lg;
+  padding: $spacing-3xl $spacing-2xl $spacing-3xl;
+}
+
+.avatar {
+  width: 128rpx;
+  height: 128rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
+  flex-shrink: 0;
+}
+
+.info {
+  flex: 1;
+  min-width: 0;
+}
+
+.info-content {
+  @include flex-column(center, flex-start);
+  gap: $spacing-xs;
+}
+
+.name {
+  font-size: $font-xl;
+  font-weight: $font-semibold;
+  color: $text-inverse;
+  line-height: $line-height-tight;
+}
+
+.phone {
+  font-size: $font-sm;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.login-prompt {
+  @include flex-row(flex-start, center);
+  gap: $spacing-xs;
+}
+
+.login-text {
+  font-size: $font-lg;
+  color: $text-inverse;
+  font-weight: $font-medium;
+}
+</style>
diff --git a/apps/miniapp/src/pages.json b/apps/miniapp/src/pages.json
index ca28028..9006148 100644
--- a/apps/miniapp/src/pages.json
+++ b/apps/miniapp/src/pages.json
@@ -67,6 +67,13 @@
         "navigationBarTitleText": "个人中心"
       }
     },
+    {
+      "path": "pages/activity/index",
+      "style": {
+        "navigationBarTitleText": "活动",
+        "enablePullDownRefresh": true
+      }
+    },
     {
       "path": "pages/seller/home",
       "style": {
@@ -182,7 +189,7 @@
   },
   "tabBar": {
     "color": "#8a8a8a",
-    "selectedColor": "#6b4d9e",
+    "selectedColor": "#FF6B35",
     "backgroundColor": "#ffffff",
     "borderStyle": "white",
     "list": [
@@ -192,15 +199,21 @@
         "iconPath": "static/img/icon/home.png",
         "selectedIconPath": "static/img/icon/home.png"
       },
+      {
+        "pagePath": "pages/activity/index",
+        "text": "活动",
+        "iconPath": "static/img/icon/activity.png",
+        "selectedIconPath": "static/img/icon/activity.png"
+      },
       {
         "pagePath": "pages/order/index",
-        "text": "服务",
-        "iconPath": "static/img/icon/order.png",
-        "selectedIconPath": "static/img/icon/order.png"
+        "text": "订单",
+        "iconPath": "static/img/icon/order-list.png",
+        "selectedIconPath": "static/img/icon/order-list.png"
       },
       {
         "pagePath": "pages/mine/index",
-        "text": "会员",
+        "text": "我的",
         "iconPath": "static/img/icon/my.png",
         "selectedIconPath": "static/img/icon/my.png"
       }
diff --git a/apps/miniapp/src/pages/about/index.vue b/apps/miniapp/src/pages/about/index.vue
index 708f019..fed946e 100644
--- a/apps/miniapp/src/pages/about/index.vue
+++ b/apps/miniapp/src/pages/about/index.vue
@@ -168,9 +168,11 @@ function showAgreement(name: string) {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-about {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
   padding-bottom: 40rpx;
 }
 
@@ -179,9 +181,9 @@ function showAgreement(name: string) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20rpx 32rpx;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding: $spacing-lg $spacing-2xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .back-btn {
@@ -190,14 +192,19 @@ function showAgreement(name: string) {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f7f7f7;
-  border-radius: 50%;
+  background: $bg-page;
+  border-radius: $radius-round;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $bg-hover;
+  }
 }
 
 .header-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .placeholder {
@@ -209,93 +216,94 @@ function showAgreement(name: string) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 80rpx 32rpx 60rpx;
-  background: #fff;
-  margin-bottom: 24rpx;
+  padding: 80rpx $spacing-2xl 60rpx;
+  background: $bg-card;
+  margin-bottom: $spacing-xl;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .logo-wrap {
   width: 160rpx;
   height: 160rpx;
-  background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
-  border-radius: 50%;
+  background: $primary-bg;
+  border-radius: $radius-round;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 32rpx;
-  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.15);
+  margin-bottom: $spacing-2xl;
+  border: 1rpx solid $border-light;
 }
 
 .app-name {
   font-size: 44rpx;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 12rpx;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin-bottom: $spacing-sm;
 }
 
 .app-version {
   font-size: 26rpx;
-  color: #999;
+  color: $text-secondary;
 }
 
 /* 介绍卡片 */
 .intro-card {
-  background: #fff;
-  margin: 0 32rpx 24rpx;
-  padding: 40rpx 32rpx;
-  border-radius: 24rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  background: $bg-card;
+  margin: 0 $spacing-2xl $spacing-xl;
+  padding: 40rpx $spacing-2xl;
+  border-radius: $radius-lg;
+  border: 1rpx solid $border-light;
 }
 
 .intro-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
   display: block;
-  margin-bottom: 20rpx;
+  margin-bottom: $spacing-lg;
 }
 
 .intro-desc {
-  font-size: 28rpx;
-  color: #666;
+  font-size: $font-base;
+  color: $text-secondary;
   line-height: 1.8;
   display: block;
 }
 
 /* 功能特色 */
 .feature-section {
-  background: #fff;
-  margin: 0 32rpx 24rpx;
-  padding: 40rpx 32rpx;
-  border-radius: 24rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  background: $bg-card;
+  margin: 0 $spacing-2xl $spacing-xl;
+  padding: 40rpx $spacing-2xl;
+  border-radius: $radius-lg;
+  border: 1rpx solid $border-light;
 }
 
 .section-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
   display: block;
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-2xl;
 }
 
 .feature-list {
   display: flex;
   flex-direction: column;
-  gap: 24rpx;
+  gap: $spacing-xl;
 }
 
 .feature-item {
   display: flex;
   align-items: center;
-  gap: 20rpx;
+  gap: $spacing-lg;
 }
 
 .feature-icon {
   width: 72rpx;
   height: 72rpx;
-  background: #fff5f0;
-  border-radius: 50%;
+  background: $primary-bg;
+  border-radius: $radius-base;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -306,27 +314,27 @@ function showAgreement(name: string) {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  gap: $spacing-xs;
 }
 
 .feature-name {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .feature-desc {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 /* 联系方式 */
 .contact-section {
-  background: #fff;
-  margin: 0 32rpx 24rpx;
-  padding: 40rpx 32rpx;
-  border-radius: 24rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  background: $bg-card;
+  margin: 0 $spacing-2xl $spacing-xl;
+  padding: 40rpx $spacing-2xl;
+  border-radius: $radius-lg;
+  border: 1rpx solid $border-light;
 }
 
 .contact-list {
@@ -337,9 +345,10 @@ function showAgreement(name: string) {
 .contact-item {
   display: flex;
   align-items: center;
-  gap: 16rpx;
-  padding: 24rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  gap: $spacing-md;
+  padding: $spacing-xl 0;
+  border-bottom: 1rpx solid $border-light;
+  transition: all 0.2s ease;
 
   &:last-child {
     border-bottom: none;
@@ -353,8 +362,8 @@ function showAgreement(name: string) {
 .contact-icon {
   width: 56rpx;
   height: 56rpx;
-  background: #f7f7f7;
-  border-radius: 50%;
+  background: $bg-page;
+  border-radius: $radius-base;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -362,57 +371,58 @@ function showAgreement(name: string) {
 }
 
 .contact-label {
-  font-size: 28rpx;
-  color: #666;
+  font-size: $font-base;
+  color: $text-secondary;
   width: 140rpx;
   flex-shrink: 0;
 }
 
 .contact-value {
   flex: 1;
-  font-size: 28rpx;
-  color: #333;
-  font-weight: 500;
+  font-size: $font-base;
+  color: $text-primary;
+  font-weight: $font-medium;
 }
 
 /* 法律信息 */
 .legal-section {
-  background: #fff;
-  margin: 0 32rpx 24rpx;
-  border-radius: 24rpx;
+  background: $bg-card;
+  margin: 0 $spacing-2xl $spacing-xl;
+  border-radius: $radius-lg;
   overflow: hidden;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  border: 1rpx solid $border-light;
 }
 
 .legal-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 32rpx;
-  border-bottom: 1rpx solid #f5f5f5;
+  padding: $spacing-2xl;
+  border-bottom: 1rpx solid $border-light;
+  transition: all 0.2s ease;
 
   &:last-child {
     border-bottom: none;
   }
 
   &:active {
-    background: #f7f7f7;
+    background: $bg-hover;
   }
 }
 
 .legal-text {
-  font-size: 28rpx;
-  color: #333;
+  font-size: $font-base;
+  color: $text-primary;
 }
 
 /* 版权信息 */
 .copyright {
   text-align: center;
-  padding: 40rpx 32rpx;
+  padding: 40rpx $spacing-2xl;
 }
 
 .copyright-text {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 </style>
diff --git a/apps/miniapp/src/pages/activity/index.vue b/apps/miniapp/src/pages/activity/index.vue
new file mode 100644
index 0000000..3d1a61b
--- /dev/null
+++ b/apps/miniapp/src/pages/activity/index.vue
@@ -0,0 +1,212 @@
+<template>
+  <view class="page-activity">
+    <view class="activity-list">
+      <!-- 活动列表 -->
+      <view
+        v-for="activity in activities"
+        :key="activity.id"
+        class="activity-card"
+        :class="{ 'invite-card': activity.type === 'invite' }"
+        @tap="handleActivityClick(activity)"
+      >
+        <view class="card-content">
+          <view class="card-left">
+            <text class="card-icon">{{ activity.icon }}</text>
+            <view class="card-info">
+              <text class="card-title">{{ activity.title }}</text>
+              <text class="card-desc">{{ activity.description }}</text>
+            </view>
+          </view>
+          <view class="card-right">
+            <text class="card-btn">立即参与</text>
+            <text class="card-arrow">›</text>
+          </view>
+        </view>
+        <view class="card-tags" v-if="activity.type === 'invite'">
+          <text class="tag" v-if="activity.config?.maxCashback">
+            最高奖励 ¥{{ activity.config.maxCashback }}
+          </text>
+          <text class="tag" v-if="activity.config?.firstOrderRate">
+            首单返{{ (activity.config.firstOrderRate * 100).toFixed(1) }}%
+          </text>
+        </view>
+      </view>
+
+      <!-- 暂无活动提示 -->
+      <view v-if="activities.length === 0" class="empty-state">
+        <text class="empty-icon">📭</text>
+        <text class="empty-text">暂无活动</text>
+        <text class="empty-desc">敬请期待更多精彩活动</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { getActivityList } from '@/api/user/invite';
+
+interface Activity {
+  id: number;
+  type: string;
+  title: string;
+  description: string;
+  icon: string;
+  enabled: boolean;
+  config?: any;
+}
+
+const activities = ref<Activity[]>([]);
+
+onMounted(() => {
+  fetchActivities();
+});
+
+async function fetchActivities() {
+  try {
+    const res = await getActivityList();
+    activities.value = res.data?.list || [];
+  } catch (e) {
+    console.error('获取活动列表失败:', e);
+  }
+}
+
+function handleActivityClick(activity: Activity) {
+  if (activity.type === 'invite') {
+    uni.navigateTo({ url: '/pages/invite/index' });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
+.page-activity {
+  min-height: 100vh;
+  background: $bg-page;
+  padding: $spacing-xl;
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.activity-card {
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
+  border: 1rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $bg-hover;
+  }
+}
+
+.invite-card {
+  background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
+  color: #fff;
+  border: none;
+
+  &:active {
+    opacity: 0.95;
+    background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
+  }
+}
+
+.card-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-xl;
+}
+
+.card-left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-lg;
+  flex: 1;
+}
+
+.card-icon {
+  font-size: 64rpx;
+  line-height: 1;
+}
+
+.card-info {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.card-title {
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: #fff;
+}
+
+.card-desc {
+  font-size: $font-sm;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.card-right {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+}
+
+.card-btn {
+  font-size: 26rpx;
+  font-weight: $font-semibold;
+  color: #fff;
+}
+
+.card-arrow {
+  font-size: 48rpx;
+  color: #fff;
+  line-height: 1;
+}
+
+.card-tags {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+}
+
+.tag {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  font-size: $font-xs;
+  padding: $spacing-xs $spacing-lg;
+  border-radius: $radius-lg;
+  font-weight: $font-medium;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+}
+
+.empty-icon {
+  font-size: 120rpx;
+  margin-bottom: $spacing-xl;
+}
+
+.empty-text {
+  font-size: $font-lg;
+  color: $text-primary;
+  font-weight: $font-semibold;
+  margin-bottom: $spacing-sm;
+}
+
+.empty-desc {
+  font-size: 26rpx;
+  color: $text-secondary;
+}
+</style>
diff --git a/apps/miniapp/src/pages/agreement/index.vue b/apps/miniapp/src/pages/agreement/index.vue
index a1bbb87..d33a015 100644
--- a/apps/miniapp/src/pages/agreement/index.vue
+++ b/apps/miniapp/src/pages/agreement/index.vue
@@ -434,9 +434,11 @@ function goBack() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-agreement {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
   display: flex;
   flex-direction: column;
 }
@@ -446,9 +448,9 @@ function goBack() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20rpx 32rpx;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding: $spacing-lg $spacing-2xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
   flex-shrink: 0;
 }
 
@@ -458,14 +460,19 @@ function goBack() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f7f7f7;
-  border-radius: 50%;
+  background: $bg-page;
+  border-radius: $radius-round;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $bg-hover;
+  }
 }
 
 .header-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .placeholder {
@@ -475,14 +482,18 @@ function goBack() {
 /* 内容区域 */
 .content-scroll {
   flex: 1;
-  padding: 32rpx;
+  padding: $spacing-2xl;
+  box-sizing: border-box;
 }
 
 .content-wrap {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 40rpx 32rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: 40rpx $spacing-2xl;
+  border: 1rpx solid $border-light;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
 }
 
 .agreement-content {
@@ -491,38 +502,40 @@ function goBack() {
 }
 
 .content-title {
-  font-size: 36rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-xl;
+  font-weight: $font-semibold;
+  color: $text-primary;
   text-align: center;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .update-time {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
   text-align: center;
-  margin-bottom: 8rpx;
+  margin-bottom: $spacing-xs;
 }
 
 .section {
   margin-top: 40rpx;
   display: flex;
   flex-direction: column;
-  gap: 16rpx;
+  gap: $spacing-md;
 }
 
 .section-title {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8rpx;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin-bottom: $spacing-xs;
 }
 
 .section-text {
-  font-size: 28rpx;
-  color: #666;
+  font-size: $font-base;
+  color: $text-secondary;
   line-height: 1.8;
   text-align: justify;
+  word-wrap: break-word;
+  word-break: break-all;
 }
 </style>
diff --git a/apps/miniapp/src/pages/index/index.vue b/apps/miniapp/src/pages/index/index.vue
index be0a9e7..395d096 100644
--- a/apps/miniapp/src/pages/index/index.vue
+++ b/apps/miniapp/src/pages/index/index.vue
@@ -1,91 +1,122 @@
 <template>
   <view class="page-index">
-   
+    <!-- 搜索面板 - 使用毛玻璃效果 -->
+    <view class="search-panel">
+      <base-card class="search-card" variant="elevated" :shadow="false">
+        <!-- 位置 -->
+        <form-field
+          type="select"
+          :display-value="selectedCity"
+          placeholder="选择城市"
+          right-icon="map"
+          :show-select-arrow="false"
+          @click="openCityPicker"
+        ></form-field>
 
-    <!-- 搜索面板 -->
-    <view class="search-container">
+        <!-- 日期 -->
+        <form-field
+          type="custom"
+          @click="openDatePicker"
+        >
+          <view class="date-picker-content">
+            <view class="date-section">
+              <text class="date-label">{{ checkInDesc }}入住</text>
+              <text class="date-value">{{ checkInLabel }}</text>
+            </view>
+            <view class="nights-tag">共{{ nightCount }}晚</view>
+            <view class="date-section">
+              <text class="date-label">{{ checkOutDesc }}离店</text>
+              <text class="date-value">{{ checkOutLabel }}</text>
+            </view>
+          </view>
+        </form-field>
 
+        <!-- 关键词 -->
+        <form-field
+          type="select"
+          :display-value="searchKeyword"
+          placeholder="输入关键词搜索酒店"
+          right-icon="search"
+          @click="goLocationSearch"
+        ></form-field>
 
-      <!-- 位置 -->
-      <view class="search-item" @click="goLocationSearch">
-        <text class="search-label">正在获取当前位置</text>
-        <view class="search-action">
-          <u-icon name="map" size="18" color="#999"></u-icon>
-          <text class="action-text">我的位置</text>
+        <!-- 价格筛选 -->
+        <form-field
+          type="select"
+          :display-value="priceLabel !== '价格' ? priceLabel : ''"
+          placeholder="价格"
+          @click="openPricePicker"
+        ></form-field>
+
+        <!-- 查询按钮 -->
+        <view class="button-wrapper">
+          <base-button
+            type="primary"
+            size="large"
+            text="查询"
+            block
+            @click="handleSearch"
+          ></base-button>
         </view>
-      </view>
-
-      <!-- 日期 -->
-      <view class="search-item date-item" @click="openDatePicker">
-        <view class="date-section">
-          <text class="date-label">{{ checkInDesc }}入住</text>
-          <text class="date-value">{{ checkInLabel }}</text>
-        </view>
-        <view class="nights-tag">共{{ nightCount }}晚</view>
-        <view class="date-section">
-          <text class="date-label">{{ checkOutDesc }}离店</text>
-          <text class="date-value">{{ checkOutLabel }}</text>
-        </view>
-      </view>
-
-      <!-- 关键词 -->
-      <view class="search-item" @click="goLocationSearch">
-        <text :class="searchKeyword ? 'search-label' : 'search-placeholder'">
-          {{ searchKeyword || '输入关键词搜索酒店' }}
-        </text>
-      </view>
-
-      <!-- 筛选 -->
-      <view class="search-item" @click="openPricePicker">
-        <text :class="(priceMin !== undefined || priceMax !== undefined) ? 'search-label' : 'search-placeholder'">
-          {{ priceLabel }}
-        </text>
-      </view>
-
-      <!-- 查询按钮 -->
-      <view class="button-wrapper">
-        <u-button type="error" @click="handleSearch" customStyle="border-radius: 8rpx; height: 88rpx; font-size: 32rpx;">
-          查询
-        </u-button>
-      </view>
+      </base-card>
     </view>
 
     <!-- 酒店推荐 -->
     <view class="recommend-section">
       <view class="section-header">
         <text class="section-title">酒店推荐</text>
-        <text class="section-more" @tap="handleSearch">更多 ›</text>
+        <view class="section-more" @tap="handleSearch">
+          <text class="more-text">更多</text>
+          <u-icon name="arrow-right" :size="16" color="#999"></u-icon>
+        </view>
       </view>
+
       <scroll-view
         scroll-y
-        class="room-list"
+        class="merchant-list"
         @scrolltolower="loadMore"
         refresher-enabled
         :refresher-triggered="refreshing"
         @refresherrefresh="onRefresh"
       >
-        <view class="list-content">
-          <view
+        <!-- 加载状态 -->
+        <loading-state v-if="loading && merchantList.length === 0" type="skeleton">
+          <template #skeleton>
+            <view class="skeleton-merchant" v-for="i in 3" :key="i">
+              <view class="skeleton-item skeleton-image"></view>
+              <view class="skeleton-content">
+                <view class="skeleton-item skeleton-title"></view>
+                <view class="skeleton-item skeleton-text"></view>
+                <view class="skeleton-item skeleton-text short"></view>
+              </view>
+            </view>
+          </template>
+        </loading-state>
+
+        <!-- 商家列表 -->
+        <view v-else class="list-content">
+          <merchant-card
             v-for="merchant in merchantList"
             :key="merchant.id"
-            class="merchant-card"
-            @tap="goMerchant(merchant.id)"
-          >
-            <image class="merchant-logo" :src="merchant.logo || '/static/default-avatar.png'" mode="aspectFill" />
-            <view class="merchant-info">
-              <text class="merchant-name">{{ merchant.shopName }}</text>
-              <view class="merchant-meta">
-                <text class="merchant-city">{{ merchant.city }}</text>
-                <text class="merchant-rating">{{ merchant.rating }}分</text>
-              </view>
-              <text class="merchant-desc">{{ merchant.description || '暂无简介' }}</text>
-            </view>
-          </view>
+            :merchant="formatMerchant(merchant)"
+            @click="goMerchant(merchant.id)"
+          ></merchant-card>
         </view>
 
-        <view v-if="loading" class="loading-more">加载中...</view>
-        <view v-if="!hasMore && merchantList.length > 0" class="no-more">没有更多了</view>
-        <u-empty v-if="merchantList.length === 0 && !loading" text="暂无酒店" mode="list"></u-empty>
+        <!-- 加载更多 -->
+        <loading-state v-if="loading && merchantList.length > 0" size="small"></loading-state>
+
+        <!-- 没有更多 -->
+        <view v-if="!hasMore && merchantList.length > 0" class="no-more">
+          <text>没有更多了</text>
+        </view>
+
+        <!-- 空状态 -->
+        <empty-state
+          v-if="merchantList.length === 0 && !loading"
+          type="search"
+          @action="onRefresh"
+        ></empty-state>
       </scroll-view>
     </view>
 
@@ -110,6 +141,12 @@ import CityPicker from '@/components/CityPicker.vue';
 import DatePicker from '@/components/DatePicker.vue';
 import RoomGuestPicker from '@/components/RoomGuestPicker.vue';
 import PricePicker from '@/components/PricePicker.vue';
+import BaseCard from '@/components/base/BaseCard.vue';
+import BaseButton from '@/components/base/BaseButton.vue';
+import FormField from '@/components/business/FormField.vue';
+import MerchantCard from '@/components/business/MerchantCard.vue';
+import LoadingState from '@/components/base/LoadingState.vue';
+import EmptyState from '@/components/base/EmptyState.vue';
 
 // 默认日期：今天和明天
 const today = new Date();
@@ -307,6 +344,26 @@ function goMerchant(id: number) {
   uni.navigateTo({ url: `/pages/merchant-detail/index?${params}` });
 }
 
+// 格式化商家数据以适配 MerchantCard 组件
+function formatMerchant(merchant: any) {
+  return {
+    id: merchant.id,
+    name: merchant.shopName,
+    coverImage: merchant.logo || '/static/default-avatar.png',
+    cityName: merchant.city,
+    rating: merchant.rating,
+    reviewCount: merchant.reviewCount,
+    description: merchant.description || '暂无简介',
+    facilities: merchant.facilities || [],
+    minPrice: merchant.minPrice || 0,
+    roomCount: merchant.roomCount,
+    distance: merchant.distance,
+    isRecommend: merchant.isRecommend,
+    isHot: merchant.isHot,
+    isNew: merchant.isNew
+  };
+}
+
 onMounted(() => {
   // 检查是否有位置搜索回传的关键字
   const kw = (uni as any).__locationSearchKeyword;
@@ -328,244 +385,156 @@ onActivated(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
 .page-index {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
+  display: flex;
+  flex-direction: column;
 }
 
-/* Banner区域 */
-.banner-section {
-  position: relative;
-  height: 280rpx;
-  margin: 24rpx 32rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-  background: linear-gradient(135deg, #e8eaf6 0%, #f3e5f5 100%);
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-
-  .banner-image {
-    width: 100%;
-    height: 100%;
-  }
-
-  .banner-overlay {
-    position: absolute;
-    inset: 0;
-    padding: 56rpx 40rpx;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .banner-title {
-    font-size: 44rpx;
-    color: #555;
-    margin-bottom: 24rpx;
-  }
-
-  .banner-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 12rpx;
-    background: rgba(255, 255, 255, 0.88);
-    padding: 12rpx 24rpx;
-    border-radius: 40rpx;
-    align-self: flex-start;
-
-    .tag-text,
-    .tag-arrow {
-      font-size: 22rpx;
-      color: #666;
-    }
-  }
+/* ========== 搜索面板 ========== */
+.search-panel {
+  padding: $spacing-xl;
 }
 
-/* 搜索面板 */
-.search-container {
-  background: #fff;
-  margin: 0 32rpx 24rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-
-  .tabs-section {
-    padding: 32rpx 32rpx 24rpx;
-    border-bottom: 1rpx solid #f5f5f5;
-  }
-
-  .search-item {
-    padding: 32rpx;
-    border-bottom: 1rpx solid #f5f5f5;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &:last-of-type {
-      border-bottom: none;
-    }
-
-    .search-label {
-      font-size: 28rpx;
-      color: #333;
-    }
-
-    .search-action {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4rpx;
-
-      .action-text {
-        font-size: 20rpx;
-        color: #999;
-      }
-    }
-
-    .search-placeholder {
-      font-size: 28rpx;
-      color: #ccc;
-    }
-  }
-
-  .date-item {
-    .date-section {
-      display: flex;
-      flex-direction: column;
-      gap: 8rpx;
-
-      .date-label {
-        font-size: 24rpx;
-        color: #999;
-      }
-
-      .date-value {
-        font-size: 32rpx;
-        font-weight: 600;
-        color: #333;
-      }
-    }
-
-    .nights-tag {
-      font-size: 24rpx;
-      color: #ff6b6b;
-      background: rgba(255, 107, 107, 0.08);
-      padding: 8rpx 20rpx;
-      border-radius: 24rpx;
-      margin: 0 24rpx;
-    }
-  }
-
-  .button-wrapper {
-    padding: 32rpx;
-  }
+.search-card {
+  overflow: visible;
 }
 
-/* 酒店推荐 */
+/* 日期选择器内容 */
+.date-picker-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: $spacing-sm 0;
+}
+
+.date-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.date-label {
+  font-size: $font-xs;
+  color: $text-tertiary;
+}
+
+.date-value {
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.nights-tag {
+  font-size: $font-xs;
+  color: $primary-color;
+  background: $primary-50;
+  padding: 6rpx $spacing-md;
+  border-radius: $radius-sm;
+  font-weight: $font-medium;
+}
+
+.button-wrapper {
+  margin-top: $spacing-md;
+}
+
+/* ========== 酒店推荐 ========== */
 .recommend-section {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 $spacing-xl;
+  overflow: hidden;
+}
 
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx 24rpx;
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-lg 0 $spacing-md;
+}
 
-    .section-title {
-      font-size: 36rpx;
-      font-weight: 600;
-      color: #333;
-    }
+.section-title {
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
 
-    .section-more {
-      font-size: 28rpx;
-      color: #999;
-    }
-  }
+.section-more {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  font-size: $font-sm;
+  color: $text-secondary;
+  transition: $transition-color;
 
-  .room-list {
-    flex: 1;
-
-    .list-content {
-      padding: 0 32rpx 32rpx;
-    }
-
-    .merchant-card {
-      display: flex;
-      background: #fff;
-      border-radius: 20rpx;
-      padding: 24rpx;
-      margin-bottom: 24rpx;
-      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-
-      &:active {
-        opacity: 0.96;
-      }
-
-      .merchant-logo {
-        width: 180rpx;
-        height: 180rpx;
-        border-radius: 20rpx;
-        flex-shrink: 0;
-        background: #f5f5f5;
-      }
-
-      .merchant-info {
-        flex: 1;
-        margin-left: 24rpx;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .merchant-name {
-          font-size: 32rpx;
-          font-weight: 600;
-          color: #333;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .merchant-meta {
-          display: flex;
-          align-items: center;
-          gap: 16rpx;
-          margin-top: 12rpx;
-
-          .merchant-city {
-            font-size: 24rpx;
-            color: #999;
-            background: #f8f8f8;
-            padding: 6rpx 16rpx;
-            border-radius: 8rpx;
-          }
-
-          .merchant-rating {
-            font-size: 24rpx;
-            color: #ffb800;
-            font-weight: 600;
-          }
-        }
-
-        .merchant-desc {
-          font-size: 24rpx;
-          color: #999;
-          margin-top: 12rpx;
-          line-height: 1.6;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-        }
-      }
-    }
-
-    .loading-more,
-    .no-more {
-      text-align: center;
-      padding: 48rpx 0;
-      color: #ccc;
-      font-size: 26rpx;
-    }
+  &:active {
+    color: $primary-color;
   }
 }
+
+.more-text {
+  font-size: $font-sm;
+  color: $text-secondary;
+}
+
+/* ========== 商家列表 ========== */
+.merchant-list {
+  flex: 1;
+  height: 0;
+}
+
+.list-content {
+  padding-bottom: $spacing-xl;
+}
+
+/* 骨架屏 */
+.skeleton-merchant {
+  display: flex;
+  gap: $spacing-md;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-radius: $radius-md;
+  margin-bottom: $spacing-md;
+}
+
+.skeleton-image {
+  width: 200rpx;
+  height: 200rpx;
+  flex-shrink: 0;
+}
+
+.skeleton-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.skeleton-title {
+  width: 60%;
+  height: 36rpx;
+}
+
+.skeleton-text {
+  width: 100%;
+  height: 28rpx;
+
+  &.short {
+    width: 80%;
+  }
+}
+
+/* 没有更多 */
+.no-more {
+  text-align: center;
+  padding: $spacing-2xl 0;
+  color: $text-placeholder;
+  font-size: $font-sm;
+}
 </style>
diff --git a/apps/miniapp/src/pages/invite/cashbacks.vue b/apps/miniapp/src/pages/invite/cashbacks.vue
index adbea37..bb7fc17 100644
--- a/apps/miniapp/src/pages/invite/cashbacks.vue
+++ b/apps/miniapp/src/pages/invite/cashbacks.vue
@@ -72,9 +72,11 @@ function goBack() { uni.navigateBack(); }
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-cashbacks {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $bg-page;
   display: flex;
   flex-direction: column;
 }
@@ -82,35 +84,35 @@ function goBack() { uni.navigateBack(); }
 .header {
   display: flex;
   align-items: center;
-  padding: 20rpx 24rpx;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding: $spacing-lg $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .back-btn {
-  font-size: 40rpx;
-  color: #1a1a1a;
-  padding: 8rpx;
-  margin-right: 12rpx;
+  font-size: $font-2xl;
+  color: $text-primary;
+  padding: $spacing-xs;
+  margin-right: $spacing-sm;
 }
 
 .header-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .cashback-list {
   flex: 1;
-  padding: 20rpx 24rpx;
+  padding: $spacing-lg $spacing-xl;
 }
 
 .cashback-card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  margin-bottom: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  margin-bottom: $spacing-md;
+  border: 1rpx solid $border-light;
 }
 
 .cashback-top {
@@ -125,59 +127,60 @@ function goBack() { uni.navigateBack(); }
 }
 
 .cashback-order {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .cashback-time {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 6rpx;
+  font-size: $font-sm;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
 }
 
 .cashback-amount {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-size: $font-xl;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .cashback-bottom {
   display: flex;
   align-items: center;
-  margin-top: 16rpx;
-  padding-top: 16rpx;
-  border-top: 1rpx solid #f7f8fa;
-  gap: 16rpx;
+  margin-top: $spacing-md;
+  padding-top: $spacing-md;
+  border-top: 1rpx solid $border-light;
+  gap: $spacing-md;
 }
 
 .cashback-tag {
-  font-size: 22rpx;
-  padding: 4rpx 12rpx;
-  border-radius: 6rpx;
-  font-weight: 500;
+  font-size: $font-xs;
+  padding: 4rpx $spacing-sm;
+  border-radius: $radius-xs;
+  font-weight: $font-medium;
 }
 
 .tag-index {
-  color: #FF6B35;
-  background: rgba(255, 107, 53, 0.08);
+  color: $primary-color;
+  background: $primary-bg;
+  border: 1rpx solid $primary-color;
 }
 
 .cashback-rate {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .cashback-order-amount {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .loading, .no-more {
   text-align: center;
-  padding: 40rpx 0;
-  color: #ccc;
-  font-size: 26rpx;
+  padding: $spacing-2xl 0;
+  color: $text-tertiary;
+  font-size: $font-sm;
 }
 
 .empty {
@@ -187,7 +190,7 @@ function goBack() { uni.navigateBack(); }
 }
 
 .empty-text {
-  font-size: 28rpx;
-  color: #ccc;
+  font-size: $font-base;
+  color: $text-tertiary;
 }
 </style>
diff --git a/apps/miniapp/src/pages/invite/index.vue b/apps/miniapp/src/pages/invite/index.vue
index d2e5681..bf8fd52 100644
--- a/apps/miniapp/src/pages/invite/index.vue
+++ b/apps/miniapp/src/pages/invite/index.vue
@@ -127,37 +127,39 @@ function goPoster() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-invite {
   min-height: 100vh;
-  background: linear-gradient(180deg, #FF6B35 0%, #ff8a5c 300rpx, #f7f8fa 300rpx);
-  padding: 24rpx;
+  background: $bg-page;
+  padding: $spacing-xl;
 }
 
 .header-card {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 40rpx 32rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
+  margin-bottom: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .title-row {
   text-align: center;
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-2xl;
 }
 
 .title {
   display: block;
-  font-size: 40rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-2xl;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .subtitle {
   display: block;
-  font-size: 26rpx;
-  color: #999;
-  margin-top: 12rpx;
+  font-size: $font-sm;
+  color: $text-secondary;
+  margin-top: $spacing-sm;
 }
 
 .stats-row {
@@ -173,28 +175,29 @@ function goPoster() {
 }
 
 .stat-value {
-  font-size: 44rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-size: $font-3xl;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .stat-label {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 8rpx;
+  font-size: $font-sm;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
 }
 
 .stat-divider {
   width: 1rpx;
   height: 60rpx;
-  background: #f0f0f0;
+  background: $border-light;
 }
 
 .balance-card {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 32rpx;
-  margin-bottom: 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
+  margin-bottom: $spacing-xl;
+  border: 1rpx solid $border-light;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -206,75 +209,77 @@ function goPoster() {
 }
 
 .balance-label {
-  font-size: 26rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .balance-value-row {
   display: flex;
   align-items: baseline;
-  margin-top: 8rpx;
+  margin-top: $spacing-xs;
 }
 
 .balance-unit {
-  font-size: 28rpx;
-  color: #FF6B35;
-  font-weight: 600;
+  font-size: $font-base;
+  color: $primary-color;
+  font-weight: $font-semibold;
 }
 
 .balance-value {
-  font-size: 48rpx;
-  color: #FF6B35;
-  font-weight: 700;
+  font-size: $font-3xl;
+  color: $primary-color;
+  font-weight: $font-bold;
 }
 
 .balance-actions {
   display: flex;
-  gap: 16rpx;
+  gap: $spacing-md;
 }
 
 .btn-withdraw {
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   color: #fff;
-  font-size: 28rpx;
-  font-weight: 600;
-  padding: 16rpx 32rpx;
-  border-radius: 40rpx;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  padding: $spacing-md $spacing-2xl;
+  border-radius: $radius-base;
   border: none;
 
   &[disabled] {
-    background: #ccc;
+    background: $bg-disabled;
+    color: $text-disabled;
   }
 }
 
 .btn-records {
-  background: #f7f8fa;
-  color: #666;
-  font-size: 26rpx;
-  padding: 16rpx 24rpx;
-  border-radius: 40rpx;
-  border: none;
+  background: $bg-page;
+  color: $text-secondary;
+  font-size: $font-sm;
+  padding: $spacing-md $spacing-xl;
+  border-radius: $radius-base;
+  border: 1rpx solid $border-base;
 }
 
 .rules-card {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 32rpx;
-  margin-bottom: 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
+  margin-bottom: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .rules-title {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
   display: block;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .rule-item {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 16rpx;
+  margin-bottom: $spacing-md;
 }
 
 .rule-item:last-child {
@@ -284,62 +289,62 @@ function goPoster() {
 .rule-dot {
   width: 12rpx;
   height: 12rpx;
-  background: #FF6B35;
+  background: $primary-color;
   border-radius: 50%;
-  margin-right: 16rpx;
+  margin-right: $spacing-md;
   margin-top: 10rpx;
   flex-shrink: 0;
 }
 
 .rule-text {
-  font-size: 26rpx;
-  color: #666;
+  font-size: $font-sm;
+  color: $text-secondary;
   line-height: 1.6;
 }
 
 .action-card {
   display: flex;
-  gap: 24rpx;
-  margin-bottom: 32rpx;
+  gap: $spacing-xl;
+  margin-bottom: $spacing-2xl;
 }
 
 .btn-share {
   flex: 1;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   color: #fff;
-  font-size: 32rpx;
-  font-weight: 600;
-  padding: 28rpx 0;
-  border-radius: 48rpx;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  padding: $spacing-lg 0;
+  border-radius: $radius-base;
   border: none;
 }
 
 .btn-poster {
   flex: 1;
-  background: #fff;
-  color: #FF6B35;
-  font-size: 32rpx;
-  font-weight: 600;
-  padding: 28rpx 0;
-  border-radius: 48rpx;
-  border: 2rpx solid #FF6B35;
+  background: $bg-card;
+  color: $primary-color;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  padding: $spacing-lg 0;
+  border-radius: $radius-base;
+  border: 2rpx solid $primary-color;
 }
 
 .bottom-links {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 32rpx 0;
+  padding: $spacing-2xl 0;
 }
 
 .link-item {
-  font-size: 28rpx;
-  color: #FF6B35;
+  font-size: $font-base;
+  color: $primary-color;
 }
 
 .link-divider {
-  font-size: 28rpx;
-  color: #ddd;
-  margin: 0 32rpx;
+  font-size: $font-base;
+  color: $border-base;
+  margin: 0 $spacing-2xl;
 }
 </style>
diff --git a/apps/miniapp/src/pages/invite/poster.vue b/apps/miniapp/src/pages/invite/poster.vue
index 3f35e8f..fae9ee5 100644
--- a/apps/miniapp/src/pages/invite/poster.vue
+++ b/apps/miniapp/src/pages/invite/poster.vue
@@ -78,9 +78,11 @@ function copyLink() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-poster {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $bg-page;
   display: flex;
   flex-direction: column;
 }
@@ -88,22 +90,22 @@ function copyLink() {
 .header {
   display: flex;
   align-items: center;
-  padding: 20rpx 24rpx;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding: $spacing-lg $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .back-btn {
-  font-size: 40rpx;
-  color: #1a1a1a;
-  padding: 8rpx;
-  margin-right: 12rpx;
+  font-size: $font-2xl;
+  color: $text-primary;
+  padding: $spacing-xs;
+  margin-right: $spacing-sm;
 }
 
 .header-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .poster-wrap {
@@ -111,39 +113,40 @@ function copyLink() {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 48rpx 24rpx;
+  padding: $spacing-3xl $spacing-xl;
 }
 
 .poster-card {
   width: 600rpx;
-  background: #fff;
-  border-radius: 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
   overflow: hidden;
-  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
+  border: 2rpx solid $border-base;
 }
 
 .poster-top {
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   padding: 60rpx 40rpx;
   text-align: center;
+  border-bottom: 2rpx solid $primary-dark;
 }
 
 .poster-title {
   display: block;
-  font-size: 48rpx;
-  font-weight: 700;
+  font-size: $font-3xl;
+  font-weight: $font-bold;
   color: #fff;
 }
 
 .poster-subtitle {
   display: block;
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
-  margin-top: 12rpx;
+  font-size: $font-base;
+  color: rgba(255, 255, 255, 0.9);
+  margin-top: $spacing-sm;
 }
 
 .poster-body {
-  padding: 40rpx;
+  padding: $spacing-2xl;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -151,8 +154,8 @@ function copyLink() {
 
 .poster-stats {
   display: flex;
-  gap: 48rpx;
-  margin-bottom: 40rpx;
+  gap: $spacing-3xl;
+  margin-bottom: $spacing-2xl;
 }
 
 .poster-stat-item {
@@ -162,26 +165,26 @@ function copyLink() {
 }
 
 .poster-stat-num {
-  font-size: 44rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-size: $font-3xl;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .poster-stat-label {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 8rpx;
+  font-size: $font-sm;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
 }
 
 .poster-qrcode {
   width: 280rpx;
   height: 280rpx;
-  border: 2rpx solid #f0f0f0;
-  border-radius: 12rpx;
+  border: 2rpx solid $border-base;
+  border-radius: $radius-base;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .qrcode-placeholder {
@@ -191,42 +194,42 @@ function copyLink() {
 }
 
 .qrcode-text {
-  font-size: 28rpx;
-  color: #ccc;
+  font-size: $font-base;
+  color: $text-tertiary;
 }
 
 .poster-tip {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .action-bar {
   display: flex;
-  gap: 24rpx;
-  padding: 24rpx;
-  background: #fff;
-  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
+  gap: $spacing-xl;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-top: 1rpx solid $border-light;
 }
 
 .btn-save {
   flex: 1;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   color: #fff;
-  font-size: 30rpx;
-  font-weight: 600;
-  padding: 24rpx 0;
-  border-radius: 44rpx;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  padding: $spacing-lg 0;
+  border-radius: $radius-base;
   border: none;
 }
 
 .btn-copy {
   flex: 1;
-  background: #fff;
-  color: #FF6B35;
-  font-size: 30rpx;
-  font-weight: 600;
-  padding: 24rpx 0;
-  border-radius: 44rpx;
-  border: 2rpx solid #FF6B35;
+  background: $bg-card;
+  color: $primary-color;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  padding: $spacing-lg 0;
+  border-radius: $radius-base;
+  border: 2rpx solid $primary-color;
 }
 </style>
diff --git a/apps/miniapp/src/pages/invite/records.vue b/apps/miniapp/src/pages/invite/records.vue
index 3162ec0..a48ac78 100644
--- a/apps/miniapp/src/pages/invite/records.vue
+++ b/apps/miniapp/src/pages/invite/records.vue
@@ -72,9 +72,11 @@ function goBack() { uni.navigateBack(); }
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-records {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $bg-page;
   display: flex;
   flex-direction: column;
 }
@@ -82,38 +84,38 @@ function goBack() { uni.navigateBack(); }
 .header {
   display: flex;
   align-items: center;
-  padding: 20rpx 24rpx;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding: $spacing-lg $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .back-btn {
-  font-size: 40rpx;
-  color: #1a1a1a;
-  padding: 8rpx;
-  margin-right: 12rpx;
+  font-size: $font-2xl;
+  color: $text-primary;
+  padding: $spacing-xs;
+  margin-right: $spacing-sm;
 }
 
 .header-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .record-list {
   flex: 1;
-  padding: 20rpx 24rpx;
+  padding: $spacing-lg $spacing-xl;
 }
 
 .record-card {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  margin-bottom: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  margin-bottom: $spacing-md;
+  border: 1rpx solid $border-light;
 }
 
 .record-left {
@@ -127,6 +129,7 @@ function goBack() { uni.navigateBack(); }
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
+  border: 2rpx solid $border-light;
 }
 
 .avatar {
@@ -135,40 +138,41 @@ function goBack() { uni.navigateBack(); }
 }
 
 .record-info {
-  margin-left: 20rpx;
+  margin-left: $spacing-lg;
   display: flex;
   flex-direction: column;
 }
 
 .record-name {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .record-time {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 6rpx;
+  font-size: $font-sm;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
 }
 
 .record-right {
-  background: rgba(255, 107, 53, 0.08);
-  padding: 8rpx 20rpx;
-  border-radius: 20rpx;
+  background: $primary-bg;
+  padding: $spacing-xs $spacing-lg;
+  border-radius: $radius-base;
+  border: 1rpx solid $primary-color;
 }
 
 .order-count {
-  font-size: 26rpx;
-  color: #FF6B35;
-  font-weight: 600;
+  font-size: $font-sm;
+  color: $primary-color;
+  font-weight: $font-semibold;
 }
 
 .loading, .no-more {
   text-align: center;
-  padding: 40rpx 0;
-  color: #ccc;
-  font-size: 26rpx;
+  padding: $spacing-2xl 0;
+  color: $text-tertiary;
+  font-size: $font-sm;
 }
 
 .empty {
@@ -178,7 +182,7 @@ function goBack() { uni.navigateBack(); }
 }
 
 .empty-text {
-  font-size: 28rpx;
-  color: #ccc;
+  font-size: $font-base;
+  color: $text-tertiary;
 }
 </style>
diff --git a/apps/miniapp/src/pages/invite/withdraw.vue b/apps/miniapp/src/pages/invite/withdraw.vue
index 594f764..f9169b9 100644
--- a/apps/miniapp/src/pages/invite/withdraw.vue
+++ b/apps/miniapp/src/pages/invite/withdraw.vue
@@ -99,154 +99,160 @@ function goBack() { uni.navigateBack(); }
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-withdraw {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $bg-page;
 }
 
 .header {
   display: flex;
   align-items: center;
-  padding: 20rpx 24rpx;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding: $spacing-lg $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .back-btn {
-  font-size: 40rpx;
-  color: #1a1a1a;
-  padding: 8rpx;
-  margin-right: 12rpx;
+  font-size: $font-2xl;
+  color: $text-primary;
+  padding: $spacing-xs;
+  margin-right: $spacing-sm;
 }
 
 .header-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .balance-section {
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
-  margin: 24rpx;
-  border-radius: 20rpx;
-  padding: 40rpx 32rpx;
+  background: $primary-color;
+  margin: $spacing-xl;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
+  border: 2rpx solid $primary-dark;
 }
 
 .balance-label {
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
+  font-size: $font-base;
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .balance-row {
   display: flex;
   align-items: baseline;
-  margin-top: 12rpx;
+  margin-top: $spacing-sm;
 }
 
 .balance-unit {
-  font-size: 32rpx;
+  font-size: $font-lg;
   color: #fff;
-  font-weight: 600;
+  font-weight: $font-semibold;
 }
 
 .balance-value {
-  font-size: 56rpx;
+  font-size: $font-3xl;
   color: #fff;
-  font-weight: 700;
+  font-weight: $font-bold;
 }
 
 .amount-section {
-  background: #fff;
-  margin: 0 24rpx 24rpx;
-  border-radius: 20rpx;
-  padding: 32rpx;
+  background: $bg-card;
+  margin: 0 $spacing-xl $spacing-xl;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
+  border: 1rpx solid $border-light;
 }
 
 .section-title {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
   display: block;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .amount-input-row {
   display: flex;
   align-items: center;
-  border-bottom: 2rpx solid #f0f0f0;
-  padding-bottom: 20rpx;
+  border-bottom: 2rpx solid $border-base;
+  padding-bottom: $spacing-lg;
 }
 
 .amount-unit {
-  font-size: 40rpx;
-  color: #1a1a1a;
-  font-weight: 600;
-  margin-right: 12rpx;
+  font-size: $font-2xl;
+  color: $text-primary;
+  font-weight: $font-semibold;
+  margin-right: $spacing-sm;
 }
 
 .amount-input {
   flex: 1;
-  font-size: 48rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-3xl;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .amount-tips {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 16rpx;
+  margin-top: $spacing-md;
 }
 
 .tip-text {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .tip-link {
-  font-size: 26rpx;
-  color: #FF6B35;
-  font-weight: 500;
+  font-size: $font-sm;
+  color: $primary-color;
+  font-weight: $font-medium;
 }
 
 .action-section {
-  padding: 0 24rpx;
-  margin-top: 48rpx;
+  padding: 0 $spacing-xl;
+  margin-top: $spacing-3xl;
 }
 
 .btn-withdraw {
   width: 100%;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   color: #fff;
-  font-size: 32rpx;
-  font-weight: 600;
-  padding: 28rpx 0;
-  border-radius: 48rpx;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  padding: $spacing-lg 0;
+  border-radius: $radius-base;
   border: none;
 
   &[disabled] {
-    background: #ccc;
+    background: $bg-disabled;
+    color: $text-disabled;
   }
 }
 
 .notice-section {
-  margin: 48rpx 24rpx 0;
-  padding: 24rpx;
-  background: #fff;
-  border-radius: 16rpx;
+  margin: $spacing-3xl $spacing-xl 0;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  border: 1rpx solid $border-light;
 }
 
 .notice-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
   display: block;
-  margin-bottom: 16rpx;
+  margin-bottom: $spacing-md;
 }
 
 .notice-item {
   display: block;
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
   line-height: 2;
 }
 </style>
diff --git a/apps/miniapp/src/pages/invite/withdrawals.vue b/apps/miniapp/src/pages/invite/withdrawals.vue
index 69db363..7a583dd 100644
--- a/apps/miniapp/src/pages/invite/withdrawals.vue
+++ b/apps/miniapp/src/pages/invite/withdrawals.vue
@@ -73,9 +73,11 @@ function goBack() { uni.navigateBack(); }
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-withdrawals {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $bg-page;
   display: flex;
   flex-direction: column;
 }
@@ -83,35 +85,35 @@ function goBack() { uni.navigateBack(); }
 .header {
   display: flex;
   align-items: center;
-  padding: 20rpx 24rpx;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding: $spacing-lg $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .back-btn {
-  font-size: 40rpx;
-  color: #1a1a1a;
-  padding: 8rpx;
-  margin-right: 12rpx;
+  font-size: $font-2xl;
+  color: $text-primary;
+  padding: $spacing-xs;
+  margin-right: $spacing-sm;
 }
 
 .header-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .withdrawal-list {
   flex: 1;
-  padding: 20rpx 24rpx;
+  padding: $spacing-lg $spacing-xl;
 }
 
 .withdrawal-card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 28rpx 24rpx;
-  margin-bottom: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  margin-bottom: $spacing-md;
+  border: 1rpx solid $border-light;
 }
 
 .wd-top {
@@ -121,58 +123,62 @@ function goBack() { uni.navigateBack(); }
 }
 
 .wd-amount {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-xl;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .wd-status {
-  font-size: 24rpx;
-  padding: 6rpx 16rpx;
-  border-radius: 20rpx;
-  font-weight: 500;
+  font-size: $font-sm;
+  padding: $spacing-xs $spacing-md;
+  border-radius: $radius-base;
+  font-weight: $font-medium;
 }
 
 .status-pending {
-  color: #faad14;
-  background: rgba(250, 173, 20, 0.08);
+  color: $warning-color;
+  background: rgba($warning-color, 0.1);
+  border: 1rpx solid $warning-color;
 }
 
 .status-approved {
-  color: #1890ff;
-  background: rgba(24, 144, 255, 0.08);
+  color: $info-color;
+  background: rgba($info-color, 0.1);
+  border: 1rpx solid $info-color;
 }
 
 .status-rejected {
-  color: #ff4d4f;
-  background: rgba(255, 77, 79, 0.08);
+  color: $error-color;
+  background: rgba($error-color, 0.1);
+  border: 1rpx solid $error-color;
 }
 
 .status-paid {
-  color: #52c41a;
-  background: rgba(82, 196, 26, 0.08);
+  color: $success-color;
+  background: rgba($success-color, 0.1);
+  border: 1rpx solid $success-color;
 }
 
 .wd-bottom {
-  margin-top: 12rpx;
+  margin-top: $spacing-sm;
 }
 
 .wd-time {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .wd-reason {
-  font-size: 24rpx;
-  color: #ff4d4f;
-  margin-left: 16rpx;
+  font-size: $font-sm;
+  color: $error-color;
+  margin-left: $spacing-md;
 }
 
 .loading, .no-more {
   text-align: center;
-  padding: 40rpx 0;
-  color: #ccc;
-  font-size: 26rpx;
+  padding: $spacing-2xl 0;
+  color: $text-tertiary;
+  font-size: $font-sm;
 }
 
 .empty {
@@ -182,7 +188,7 @@ function goBack() { uni.navigateBack(); }
 }
 
 .empty-text {
-  font-size: 28rpx;
-  color: #ccc;
+  font-size: $font-base;
+  color: $text-tertiary;
 }
 </style>
diff --git a/apps/miniapp/src/pages/location-search/index.vue b/apps/miniapp/src/pages/location-search/index.vue
index 5149807..d9e9a92 100644
--- a/apps/miniapp/src/pages/location-search/index.vue
+++ b/apps/miniapp/src/pages/location-search/index.vue
@@ -112,103 +112,136 @@ function goBack() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-location-search {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
 }
 
 .search-header {
   display: flex;
   align-items: center;
-  padding: 20rpx 24rpx;
-  background: #fff;
+  padding: $spacing-lg $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .search-input-wrap {
   flex: 1;
   display: flex;
   align-items: center;
-  background: #f5f7fa;
-  border-radius: 32rpx;
+  background: $bg-page;
+  border-radius: $radius-round;
   height: 72rpx;
-  padding: 0 20rpx;
+  padding: 0 $spacing-lg;
+  border: 1rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:focus-within {
+    border-color: $primary-color;
+    background: $bg-card;
+  }
 }
 
 .search-icon {
-  font-size: 28rpx;
-  margin-right: 12rpx;
+  font-size: $font-base;
+  margin-right: $spacing-sm;
 }
 
 .search-input {
   flex: 1;
-  font-size: 28rpx;
-  color: #333;
+  font-size: $font-base;
+  color: $text-primary;
 }
 
 .clear-icon {
-  font-size: 28rpx;
-  color: #999;
-  padding: 8rpx;
+  font-size: $font-base;
+  color: $text-secondary;
+  padding: $spacing-xs;
+  transition: all 0.2s ease;
+
+  &:active {
+    opacity: 0.6;
+  }
 }
 
 .cancel-btn {
-  font-size: 28rpx;
-  color: #666;
-  margin-left: 20rpx;
+  font-size: $font-base;
+  color: $text-secondary;
+  margin-left: $spacing-lg;
+  transition: all 0.2s ease;
+
+  &:active {
+    opacity: 0.6;
+  }
 }
 
 .search-results {
-  padding: 0 24rpx;
+  padding: 0 $spacing-xl;
 }
 
 .keyword-item {
-  background: #fff;
-  margin-top: 20rpx;
-  border-radius: 12rpx;
+  background: $bg-card;
+  margin-top: $spacing-lg;
+  border-radius: $radius-base;
+  border: 1rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $bg-hover;
+  }
 }
 
 .result-item {
   display: flex;
   align-items: center;
-  padding: 24rpx;
-  background: #fff;
-  margin-top: 16rpx;
-  border-radius: 12rpx;
+  padding: $spacing-xl;
+  background: $bg-card;
+  margin-top: $spacing-md;
+  border-radius: $radius-base;
+  border: 1rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $bg-hover;
+  }
 }
 
 .result-icon {
-  font-size: 32rpx;
-  margin-right: 16rpx;
+  font-size: $font-lg;
+  margin-right: $spacing-md;
 }
 
 .result-text {
-  font-size: 28rpx;
-  color: #333;
+  font-size: $font-base;
+  color: $text-primary;
 }
 
 .result-logo {
   width: 80rpx;
   height: 80rpx;
-  border-radius: 8rpx;
+  border-radius: $radius-sm;
   flex-shrink: 0;
+  border: 1rpx solid $border-light;
 }
 
 .result-info {
   flex: 1;
-  margin-left: 16rpx;
+  margin-left: $spacing-md;
 }
 
 .result-name {
-  font-size: 28rpx;
-  color: #333;
-  font-weight: 500;
+  font-size: $font-base;
+  color: $text-primary;
+  font-weight: $font-medium;
   display: block;
 }
 
 .result-address {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 8rpx;
+  font-size: $font-sm;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
   display: block;
 }
 
@@ -221,7 +254,7 @@ function goBack() {
 
 .loading-text,
 .empty-text {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
 }
 </style>
diff --git a/apps/miniapp/src/pages/login/index.vue b/apps/miniapp/src/pages/login/index.vue
index b0d0aee..5d4ff0f 100644
--- a/apps/miniapp/src/pages/login/index.vue
+++ b/apps/miniapp/src/pages/login/index.vue
@@ -1,21 +1,6 @@
 <template>
   <view class="page-login">
-    <!-- 顶部品牌区域 -->
-    <view class="brand-header">
-      <view class="brand-logo">
-        <text class="logo-text">H</text>
-      </view>
-      <text class="brand-name">品住会</text>
-    </view>
-
-    <!-- App下载横幅 -->
-    <view class="app-banner">
-      <text class="banner-text">下载品住会App，领¥300新客礼包</text>
-      <view class="banner-action">
-        <text class="action-text">立即下载</text>
-        <text class="action-arrow">›</text>
-      </view>
-    </view>
+  
 
     <!-- 登录表单 -->
     <view class="login-form">
@@ -196,6 +181,7 @@ async function handleLogin() {
 }
 
 .login-form {
+  padding-top: 150rpx;
   .form-title {
     font-size: 36rpx;
     color: #1a1a1a;
diff --git a/apps/miniapp/src/pages/merchant-detail/index.vue b/apps/miniapp/src/pages/merchant-detail/index.vue
index 7e982f1..7560373 100644
--- a/apps/miniapp/src/pages/merchant-detail/index.vue
+++ b/apps/miniapp/src/pages/merchant-detail/index.vue
@@ -1,87 +1,61 @@
 <template>
   <view class="page-merchant-detail">
-    <!-- 头部轮播图 -->
-    <swiper class="banner" indicator-dots autoplay circular>
-      <swiper-item v-if="merchant.logo">
-        <image class="banner-img" :src="merchant.logo" mode="aspectFill" />
-      </swiper-item>
-      <swiper-item v-else>
-        <view class="banner-placeholder">
-          <text class="placeholder-icon">🏨</text>
-        </view>
-      </swiper-item>
-    </swiper>
+    <!-- 商家头部：轮播图 + 信息卡片 -->
+    <merchant-header
+      :name="merchant.shopName"
+      :images="merchant.images"
+      :logo="merchant.logo"
+      :rating="merchant.rating"
+      :review-count="merchant.reviewCount"
+      rating-comment="环境不错，环境整洁"
+      :address="fullAddress"
+      :description="merchant.description"
+      :tags="merchant.tags"
+      @address-tap="handleNavigation"
+    />
 
-    <!-- 酒店信息 -->
-    <view class="info-card">
-      <text class="shop-name">{{ merchant.shopName }}</text>
-      <view class="rating-row">
-        <text class="rating-score">{{ merchant.rating || '5.0' }}</text>
-        <text class="rating-label">分</text>
-        <text class="review-count">{{ merchant.reviewCount || 0 }}条评价</text>
-      </view>
-      <view class="address-row" v-if="fullAddress" @tap="copyAddress">
-        <text class="address-icon">📍</text>
-        <text class="address-text">{{ fullAddress }}</text>
-      </view>
-      <text class="description" v-if="merchant.description">{{ merchant.description }}</text>
-    </view>
+    <!-- 筛选条件区域 -->
+    <view class="filter-section">
+      <!-- 日期选择 -->
+      <date-range-selector
+        :check-in="checkInDate"
+        :check-out="checkOutDate"
+        @click="openDatePicker"
+      />
 
-    <!-- 搜索筛选栏：日期 + 房间人数 -->
-    <view class="filter-bar">
-      <view class="filter-date" @tap="openDatePicker">
-        <view class="date-col">
-          <text class="date-desc">{{ checkInDesc }}</text>
-          <view class="date-num-row">
-            <text class="date-num">{{ checkInMonth }}</text>
-            <text class="date-unit">月</text>
-            <text class="date-num">{{ checkInDay }}</text>
-            <text class="date-unit">日</text>
-            <text class="date-sep">-</text>
-          </view>
-        </view>
-        <view class="date-col flex-1">
-          <text class="date-desc">{{ checkOutDesc }}</text>
-          <view class="date-num-row">
-            <text class="date-num">{{ checkOutMonth }}</text>
-            <text class="date-unit">月</text>
-            <text class="date-num">{{ checkOutDay }}</text>
-            <text class="date-unit">日</text>
-          </view>
-        </view>
-        <view class="night-badge">
-          <text class="night-text">共{{ nightCount }}晚</text>
-        </view>
-      </view>
-      <view class="filter-divider"></view>
-      <view class="filter-guest" @tap="openRoomGuestPicker">
-        <view class="guest-info">
-          <text class="guest-label">间数人数</text>
-          <view class="guest-row">
-            <text class="guest-num">{{ roomCount }}</text>
-            <text class="guest-unit">间</text>
-            <text class="guest-num">{{ adultCount }}</text>
-            <text class="guest-unit">成人</text>
-            <text class="guest-num">{{ childCount }}</text>
-            <text class="guest-unit">儿童</text>
-          </view>
-        </view>
-      </view>
+      <!-- 房间人数选择 -->
+      <guest-selector
+        :room-count="roomCount"
+        :adult-count="adultCount"
+        :child-count="childCount"
+        @click="openRoomGuestPicker"
+      />
     </view>
 
     <!-- 房源列表 -->
     <view class="room-section">
-      <view class="section-header">
-        <text class="section-title">房源列表</text>
-      </view>
+      <section-header
+        title="房源列表"
+        :subtitle="roomList.length > 0 ? `${roomList.length}间` : ''"
+        icon="home"
+      />
 
-      <view v-if="loading" class="loading">
-        <text class="loading-text">加载中...</text>
-      </view>
+      <loading-state v-if="loading" type="skeleton">
+        <template #skeleton>
+          <view class="skeleton-room" v-for="i in 3" :key="i">
+            <view class="skeleton-item skeleton-image"></view>
+            <view class="skeleton-content">
+              <view class="skeleton-item skeleton-title"></view>
+              <view class="skeleton-item skeleton-text"></view>
+            </view>
+          </view>
+        </template>
+      </loading-state>
 
-      <view v-else-if="roomList.length === 0" class="empty">
-        <text class="empty-text">暂无满足条件的房源</text>
-      </view>
+      <empty-state
+        v-else-if="roomList.length === 0"
+        type="room"
+      />
 
       <view v-else class="room-list">
         <RoomCard
@@ -94,34 +68,28 @@
       </view>
     </view>
 
+    <!-- 评价列表 -->
+    <view class="review-section" v-if="merchant.reviewCount > 0 || reviewList.length > 0">
+      <section-header
+        title="用户评价"
+        :subtitle="`${merchant.reviewCount || reviewList.length}条`"
+        icon="chat"
+      />
+
+      <review-card
+        v-for="review in reviewList"
+        :key="review.id"
+        :review="formatReview(review)"
+      />
+
+      <empty-state v-if="reviewList.length === 0" type="review" size="small" />
+    </view>
+
     <!-- 日期选择弹窗 -->
     <DatePicker ref="datePickerRef" :check-in="checkInDate" :check-out="checkOutDate" @change="onDateChange" />
 
     <!-- 房间人数弹窗 -->
     <RoomGuestPicker ref="roomGuestRef" :room-count="roomCount" :adult-count="adultCount" :child-count="childCount" @change="onRoomGuestChange" />
-
-    <!-- 评价列表 -->
-    <view class="review-section" v-if="merchant.reviewCount > 0 || reviewList.length > 0">
-      <view class="section-header">
-        <text class="section-title">用户评价</text>
-        <text class="review-count-text">{{ merchant.reviewCount || reviewList.length }}条</text>
-      </view>
-      <view v-for="review in reviewList" :key="review.id" class="review-card">
-        <view class="review-header">
-          <text class="review-user">{{ review.isAnonymous ? '匿名用户' : ('用户' + review.userId) }}</text>
-          <view class="review-stars">
-            <text v-for="i in 5" :key="i" :class="['star', { active: i <= review.rating }]">★</text>
-          </view>
-        </view>
-        <text class="review-content" v-if="review.content">{{ review.content }}</text>
-        <text class="review-time">{{ formatDate(review.createdAt) }}</text>
-        <view class="review-reply" v-if="review.merchantReply">
-          <text class="reply-label">商家回复：</text>
-          <text class="reply-content">{{ review.merchantReply }}</text>
-        </view>
-      </view>
-      <view v-if="reviewList.length === 0" class="no-review">暂无评价</view>
-    </view>
   </view>
 </template>
 
@@ -133,6 +101,13 @@ import { getReviewList } from '@/api/user/review';
 import RoomCard from '@/components/RoomCard.vue';
 import DatePicker from '@/components/DatePicker.vue';
 import RoomGuestPicker from '@/components/RoomGuestPicker.vue';
+import MerchantHeader from '@/components/business/MerchantHeader.vue';
+import DateRangeSelector from '@/components/business/DateRangeSelector.vue';
+import GuestSelector from '@/components/business/GuestSelector.vue';
+import SectionHeader from '@/components/business/SectionHeader.vue';
+import ReviewCard from '@/components/business/ReviewCard.vue';
+import EmptyState from '@/components/base/EmptyState.vue';
+import LoadingState from '@/components/base/LoadingState.vue';
 
 const merchant = ref<any>({});
 const roomList = ref<any[]>([]);
@@ -150,19 +125,6 @@ const childCount = ref(0);
 const datePickerRef = ref();
 const roomGuestRef = ref();
 
-const nightCount = computed(() => {
-  const diff = new Date(checkOutDate.value).getTime() - new Date(checkInDate.value).getTime();
-  return Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)));
-});
-
-const checkInMonth = computed(() => new Date(checkInDate.value).getMonth() + 1);
-const checkInDay = computed(() => new Date(checkInDate.value).getDate());
-const checkOutMonth = computed(() => new Date(checkOutDate.value).getMonth() + 1);
-const checkOutDay = computed(() => new Date(checkOutDate.value).getDate());
-
-const checkInDesc = computed(() => getDateDesc(checkInDate.value));
-const checkOutDesc = computed(() => getDateDesc(checkOutDate.value));
-
 const fullAddress = computed(() => {
   const parts: string[] = [];
   if (merchant.value.province) parts.push(merchant.value.province);
@@ -172,19 +134,6 @@ const fullAddress = computed(() => {
   return parts.join(' ');
 });
 
-function getDateDesc(dateStr: string): string {
-  const d = new Date(dateStr);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  d.setHours(0, 0, 0, 0);
-  const diffDays = Math.round((d.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-  if (diffDays === 0) return '今天';
-  if (diffDays === 1) return '明天';
-  if (diffDays === 2) return '后天';
-  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-  return weekDays[d.getDay()];
-}
-
 function initFromUrl() {
   const pages = getCurrentPages();
   const page = pages[pages.length - 1] as any;
@@ -231,10 +180,18 @@ async function fetchReviews() {
   }
 }
 
-function formatDate(dateStr: string) {
-  if (!dateStr) return '';
-  const d = new Date(dateStr);
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+// 格式化评价数据以适配 ReviewCard 组件
+function formatReview(review: any) {
+  return {
+    id: review.id,
+    userName: review.isAnonymous ? '匿名用户' : `用户${review.userId}`,
+    userAvatar: review.userAvatar || '/static/default-avatar.png',
+    rating: review.rating,
+    content: review.content || '',
+    images: review.images || [],
+    reply: review.merchantReply || '',
+    createdAt: review.createdAt
+  };
 }
 
 async function fetchRooms() {
@@ -277,15 +234,20 @@ function openRoomGuestPicker() {
   roomGuestRef.value?.open();
 }
 
-function copyAddress() {
-  if (fullAddress.value) {
-    uni.setClipboardData({
-      data: fullAddress.value,
-      success: () => {
-        uni.showToast({ title: '地址已复制', icon: 'success' });
-      },
-    });
-  }
+function handleNavigation(address: string) {
+  // 打开地图导航
+  uni.openLocation({
+    latitude: merchant.value.latitude || 0,
+    longitude: merchant.value.longitude || 0,
+    name: merchant.value.shopName,
+    address: address,
+    success: () => {
+      console.log('打开地图成功');
+    },
+    fail: () => {
+      uni.showToast({ title: '打开地图失败', icon: 'none' });
+    }
+  });
 }
 
 function goRoomDetail(roomId: number) {
@@ -308,347 +270,74 @@ function goOrderCreate(room: any) {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
 .page-merchant-detail {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $bg-page;
+  padding-bottom: $spacing-3xl;
 }
 
-.banner {
-  height: 440rpx;
-}
-
-.banner-img {
-  width: 100%;
-  height: 100%;
-}
-
-.banner-placeholder {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.placeholder-icon {
-  font-size: 100rpx;
-}
-
-.info-card {
-  background: #fff;
-  margin: -48rpx 24rpx 20rpx;
-  border-radius: 24rpx;
-  padding: 36rpx 28rpx;
-  position: relative;
-  z-index: 1;
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
-}
-
-.shop-name {
-  font-size: 38rpx;
-  font-weight: 700;
-  color: #1a1a1a;
-  display: block;
-}
-
-.rating-row {
-  display: flex;
-  align-items: center;
-  margin-top: 16rpx;
-}
-
-.rating-score {
-  font-size: 38rpx;
-  font-weight: 700;
-  color: #FFB800;
-}
-
-.rating-label {
-  font-size: 24rpx;
-  color: #FFB800;
-  margin-left: 4rpx;
-}
-
-.review-count {
-  font-size: 24rpx;
-  color: #999;
-  margin-left: 16rpx;
-}
-
-.address-row {
-  display: flex;
-  align-items: center;
-  margin-top: 20rpx;
-  padding-top: 16rpx;
-  border-top: 1rpx solid #f7f8fa;
-}
-
-.address-icon {
-  font-size: 28rpx;
-  margin-right: 10rpx;
-}
-
-.address-text {
-  flex: 1;
-  font-size: 26rpx;
-  color: #999;
-}
-
-.description {
-  font-size: 26rpx;
-  color: #999;
-  line-height: 1.7;
-  margin-top: 16rpx;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-}
-
-/* ========== 筛选栏 ========== */
-.filter-bar {
-  background: #fff;
-  margin: 0 24rpx 20rpx;
-  border-radius: 20rpx;
-  padding: 28rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
-  display: flex;
-  flex-direction: column;
-}
-
-.filter-date {
-  display: flex;
-  align-items: flex-end;
-}
-
-.date-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.date-col.flex-1 {
-  flex: 1;
-}
-
-.date-desc {
-  font-size: 22rpx;
-  color: #999;
-  font-weight: 500;
-}
-
-.date-num-row {
-  display: flex;
-  align-items: center;
-  margin-top: 6rpx;
-}
-
-.date-num {
-  font-size: 40rpx;
-  font-weight: 700;
-  color: #1a1a1a;
-}
-
-.date-unit {
-  font-size: 28rpx;
-  font-weight: 500;
-  color: #1a1a1a;
-}
-
-.date-sep {
-  font-size: 28rpx;
-  color: #1a1a1a;
-  margin-right: 4rpx;
-}
-
-.night-badge {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  margin-left: auto;
-  padding-bottom: 6rpx;
-}
-
-.night-text {
-  font-size: 24rpx;
-  color: #FF6B35;
-  background: rgba(255, 107, 53, 0.08);
-  padding: 6rpx 16rpx;
-  border-radius: 20rpx;
-  font-weight: 500;
-}
-
-.filter-divider {
-  height: 1rpx;
-  background: #f0f0f0;
-  margin: 24rpx 0;
-}
-
-.filter-guest {
-  display: flex;
-  align-items: center;
-}
-
-.guest-info {
-  flex: 1;
-}
-
-.guest-label {
-  font-size: 22rpx;
-  color: #999;
-  font-weight: 500;
-}
-
-.guest-row {
-  display: flex;
-  align-items: baseline;
-  margin-top: 6rpx;
-}
-
-.guest-num {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #1a1a1a;
-}
-
-.guest-unit {
-  font-size: 24rpx;
-  color: #666;
-  margin-right: 20rpx;
+/* ========== 筛选区域 ========== */
+.filter-section {
+  padding: 0 $spacing-xl;
+  margin-bottom: $spacing-xl;
+  @include flex-column;
+  gap: $spacing-md;
 }
 
 /* ========== 房源列表 ========== */
 .room-section {
-  padding: 0 24rpx;
+  padding: 0 $spacing-xl;
+  margin-bottom: $spacing-2xl;
 }
 
-.section-header {
-  margin-bottom: 20rpx;
-  padding-top: 8rpx;
+.room-list {
+  @include flex-column;
+  gap: $spacing-xl;
 }
 
-.section-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
-  position: relative;
-  padding-left: 20rpx;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 6rpx;
-    height: 28rpx;
-    background: linear-gradient(180deg, #FF6B35, #ff8a5c);
-    border-radius: 3rpx;
-  }
+/* ========== 骨架屏 ========== */
+.skeleton-room {
+  @include flex-row(flex-start, flex-start);
+  gap: $spacing-md;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-radius: $radius-md;
+  margin-bottom: $spacing-md;
 }
 
-.loading,
-.empty {
-  display: flex;
-  justify-content: center;
-  padding: 80rpx 0;
+.skeleton-image {
+  width: 200rpx;
+  height: 150rpx;
+  border-radius: $radius-base;
+  @include skeleton-loading;
 }
 
-.loading-text,
-.empty-text {
-  font-size: 28rpx;
-  color: #ccc;
+.skeleton-content {
+  flex: 1;
+  @include flex-column;
+  gap: $spacing-md;
+}
+
+.skeleton-title {
+  width: 80%;
+  height: 40rpx;
+  border-radius: $radius-sm;
+  @include skeleton-loading;
+}
+
+.skeleton-text {
+  width: 60%;
+  height: 32rpx;
+  border-radius: $radius-sm;
+  @include skeleton-loading;
 }
 
 /* ========== 评价列表 ========== */
 .review-section {
-  padding: 28rpx 24rpx;
-  background: #fff;
-  margin-top: 20rpx;
-  border-radius: 20rpx 20rpx 0 0;
-}
-
-.review-count-text {
-  font-size: 26rpx;
-  color: #999;
-  margin-left: 16rpx;
-}
-
-.review-card {
-  padding: 28rpx 0;
-  border-bottom: 1rpx solid #f7f8fa;
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.review-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 14rpx;
-}
-
-.review-user {
-  font-size: 26rpx;
-  color: #666;
-  font-weight: 500;
-}
-
-.review-stars {
-  display: flex;
-  gap: 4rpx;
-
-  .star {
-    font-size: 24rpx;
-    color: #e5e5e5;
-
-    &.active {
-      color: #FFB800;
-    }
-  }
-}
-
-.review-content {
-  font-size: 28rpx;
-  color: #1a1a1a;
-  line-height: 1.7;
-  margin-bottom: 14rpx;
-  display: block;
-}
-
-.review-time {
-  font-size: 24rpx;
-  color: #ccc;
-}
-
-.review-reply {
-  margin-top: 16rpx;
-  padding: 20rpx;
-  background: #f7f8fa;
-  border-radius: 12rpx;
-  border-left: 4rpx solid #FF6B35;
-}
-
-.reply-label {
-  font-size: 24rpx;
-  color: #FF6B35;
-  font-weight: 600;
-}
-
-.reply-content {
-  font-size: 26rpx;
-  color: #999;
-  margin-top: 8rpx;
-  display: block;
-  line-height: 1.6;
-}
-
-.no-review {
-  text-align: center;
-  padding: 60rpx 0;
-  color: #ccc;
-  font-size: 28rpx;
+  padding: 0 $spacing-xl;
+  margin-top: $spacing-2xl;
 }
 </style>
diff --git a/apps/miniapp/src/pages/mine/index.vue b/apps/miniapp/src/pages/mine/index.vue
index 65c4346..7ea6e76 100644
--- a/apps/miniapp/src/pages/mine/index.vue
+++ b/apps/miniapp/src/pages/mine/index.vue
@@ -1,43 +1,57 @@
 <template>
   <view class="page-mine">
-    <!-- 用户信息 -->
+    <!-- 顶部用户信息区 -->
     <view class="user-section">
-      <image class="user-avatar" :src="userInfo?.avatar || '/static/default-avatar.png'" mode="aspectFill" />
-      <view v-if="userStore.isLoggedIn()" class="user-info">
-        <text class="user-name">{{ userInfo?.nickname || '用户' }}</text>
-        <text class="user-phone">{{ userInfo?.phone }}</text>
-      </view>
-      <button v-else class="login-btn" @tap="goLogin">点击登录</button>
+      <user-profile
+        :avatar="userInfo?.avatar"
+        :name="userInfo?.nickname"
+        :phone="userInfo?.phone"
+        :is-logged-in="userStore.isLoggedIn()"
+        @click="handleProfileTap"
+      />
     </view>
 
-    <!-- 功能列表 -->
+    <!-- 我的订单快捷入口 -->
+    <order-quick-nav
+      @item-tap="handleOrderTap"
+      @view-all="goAllOrders"
+    />
+
+
+    <!-- 商家服务 -->
     <view class="menu-section">
-      <view class="menu-group">
-        <view class="menu-item flex-between" @tap="goInvite">
-          <text class="menu-label">邀请好友</text>
-          <text class="menu-arrow">></text>
-        </view>
-      </view>
+      <menu-list
+        :items="toolList"
+        @item-click="handleToolTap"
+      />
+    </view>
 
-      <view class="menu-group">
-        <view class="menu-item flex-between" @tap="goMerchantCenter">
-          <text class="menu-label">商家中心</text>
-          <text class="menu-arrow">></text>
-        </view>
-        <view class="menu-item flex-between" @tap="goMerchantEntry">
-          <text class="menu-label">商家入驻</text>
-          <text class="menu-arrow">></text>
-        </view>
-      </view>
+    <!-- 商家服务 -->
+    <view class="menu-section">
+      <menu-list
+        :items="merchantMenuItems"
+        @item-click="handleMerchantMenuTap"
+      />
+    </view>
 
-      <view class="menu-group">
-        <view class="menu-item flex-between" @tap="goAbout">
-          <text class="menu-label">关于我们</text>
-          <text class="menu-arrow">></text>
-        </view>
-      </view>
+    <!-- 设置 -->
+    <view class="menu-section">
+      <menu-list
+        :items="settingMenuItems"
+        @item-click="handleSettingMenuTap"
+      />
+    </view>
 
-      <button v-if="userStore.isLoggedIn()" class="logout-btn" @tap="handleLogout">退出登录</button>
+    <!-- 退出登录 -->
+    <view v-if="userStore.isLoggedIn()" class="logout-section">
+      <base-button
+        type="danger"
+        size="large"
+        block
+        @click="handleLogout"
+      >
+        退出登录
+      </base-button>
     </view>
   </view>
 </template>
@@ -46,11 +60,42 @@
 import { computed } from 'vue';
 import { useUserStore } from '@/store/user';
 import { useSellerStore } from '@/store/seller';
+import UserProfile from '@/components/business/UserProfile.vue';
+import OrderQuickNav from '@/components/business/OrderQuickNav.vue';
+import ToolGrid from '@/components/business/ToolGrid.vue';
+import MenuList from '@/components/business/MenuList.vue';
+import BaseButton from '@/components/base/BaseButton.vue';
 
 const userStore = useUserStore();
 const sellerStore = useSellerStore();
 const userInfo = computed(() => userStore.userInfo);
 
+// 常用工具列表
+const toolList = [
+  { key: 'invite', label: '邀请返现', icon: 'gift', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
+  // { key: 'coupon', label: '优惠券', icon: 'coupon', iconColor: '#1A1A1A', bgColor: '#FFFFFF', badge: 3 },
+  // { key: 'favorite', label: '我的收藏', icon: 'heart', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
+  { key: 'service', label: '联系客服', icon: 'chat', iconColor: '#1A1A1A', bgColor: '#FFFFFF' }
+];
+
+// 商家服务菜单
+const merchantMenuItems = [
+  { key: 'merchant-center', label: '商家中心', icon: 'home', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
+  { key: 'merchant-entry', label: '商家入驻', icon: 'star', iconColor: '#1A1A1A', bgColor: '#FFFFFF' }
+];
+
+// 设置菜单
+const settingMenuItems = [
+  { key: 'about', label: '关于我们', icon: 'info-circle', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
+  { key: 'settings', label: '设置', icon: 'setting', iconColor: '#1A1A1A', bgColor: '#FFFFFF' }
+];
+
+function handleProfileTap() {
+  if (!userStore.isLoggedIn()) {
+    goLogin();
+  }
+}
+
 function goLogin() {
   uni.navigateTo({ url: '/pages/login/index' });
 }
@@ -63,22 +108,67 @@ function navigateTo(url: string) {
   uni.navigateTo({ url });
 }
 
+function handleOrderTap(status: string) {
+  navigateTo(`/pages/order/index?status=${status}`);
+}
+
+function goAllOrders() {
+  navigateTo('/pages/order/index');
+}
+
+function handleToolTap(key: string) {
+  switch (key) {
+    case 'invite':
+      goInvite();
+      break;
+    case 'coupon':
+      showComingSoon('优惠券');
+      break;
+    case 'favorite':
+      showComingSoon('收藏');
+      break;
+    case 'service':
+      showComingSoon('客服');
+      break;
+  }
+}
+
+function handleMerchantMenuTap(key: string) {
+  console.log(key)
+  switch (key) {
+    case 'merchant-center':
+      goMerchantCenter();
+      break;
+    case 'merchant-entry':
+      goMerchantEntry();
+      break;
+  }
+}
+
+function handleSettingMenuTap(key: string) {
+  switch (key) {
+    case 'about':
+      goAbout();
+      break;
+    case 'settings':
+      showComingSoon('设置');
+      break;
+  }
+}
+
 function goMerchantEntry() {
   if (!userStore.isLoggedIn()) {
     goLogin();
     return;
   }
-  // 商家入驻：跳转到注册模式
   uni.navigateTo({ url: '/pages/seller/register?mode=register' });
 }
 
 function goMerchantCenter() {
   if (!sellerStore.isSellerLoggedIn()) {
-    // 未登录商家账号，跳转登录模式
     uni.navigateTo({ url: '/pages/seller/register?mode=login' });
     return;
   }
-  // 已登录商家账号，跳转商家中心
   uni.navigateTo({ url: '/pages/seller/home' });
 }
 
@@ -115,145 +205,26 @@ function handleLogout() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
 .page-mine {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $bg-page;
 }
 
+/* ========== 用户信息区 ========== */
 .user-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 80rpx 0 48rpx;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -100rpx;
-    left: -100rpx;
-    width: 300rpx;
-    height: 300rpx;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-    border-radius: 50%;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: -50rpx;
-    right: -50rpx;
-    width: 200rpx;
-    height: 200rpx;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
-    border-radius: 50%;
-  }
-}
-
-.user-avatar {
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 50%;
-  border: 6rpx solid rgba(255, 255, 255, 0.4);
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
-  position: relative;
-  z-index: 1;
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 24rpx;
-  position: relative;
-  z-index: 1;
-}
-
-.user-name {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #fff;
-  letter-spacing: 1rpx;
-}
-
-.user-phone {
-  font-size: 26rpx;
-  color: rgba(255, 255, 255, 0.8);
-  margin-top: 10rpx;
-}
-
-.login-btn {
-  margin-top: 24rpx;
-  background: rgba(255, 255, 255, 0.2);
-  color: #fff;
-  border: 2rpx solid rgba(255, 255, 255, 0.4);
-  border-radius: 40rpx;
-  font-size: 28rpx;
-  font-weight: 500;
-  padding: 16rpx 56rpx;
-  backdrop-filter: blur(10px);
-  transition: all 0.2s ease;
-}
-
-.login-btn:active {
-  background: rgba(255, 255, 255, 0.3);
-  transform: scale(0.98);
+  background: $gradient-primary;
 }
 
+/* ========== 菜单区域 ========== */
 .menu-section {
-  padding: 24rpx;
-  position: relative;
-  margin-top: -20rpx;
-  z-index: 2;
+  margin: 0 $spacing-2xl $spacing-lg;
 }
 
-.menu-group {
-  background: #fff;
-  border-radius: 20rpx;
-  margin-bottom: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-}
-
-.menu-item {
-  padding: 36rpx 28rpx;
-  border-bottom: 1rpx solid #f7f8fa;
-  transition: background 0.2s ease;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:active {
-    background: #fafafa;
-  }
-}
-
-.menu-label {
-  font-size: 30rpx;
-  color: #1a1a1a;
-  font-weight: 500;
-}
-
-.menu-arrow {
-  font-size: 28rpx;
-  color: #ccc;
-}
-
-.logout-btn {
-  background: #fff;
-  color: #ff4d4f;
-  border-radius: 20rpx;
-  font-size: 30rpx;
-  height: 96rpx;
-  line-height: 96rpx;
-  border: none;
-  font-weight: 500;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-}
-
-.logout-btn:active {
-  background: #fafafa;
+/* ========== 退出登录 ========== */
+.logout-section {
+  margin: $spacing-2xl $spacing-2xl $spacing-3xl;
 }
 </style>
diff --git a/apps/miniapp/src/pages/order-create/index.vue b/apps/miniapp/src/pages/order-create/index.vue
index e39ddaf..4082085 100644
--- a/apps/miniapp/src/pages/order-create/index.vue
+++ b/apps/miniapp/src/pages/order-create/index.vue
@@ -5,15 +5,8 @@
       <image class="room-cover" :src="room.coverImage || '/static/default-room.png'" mode="aspectFill" />
       <view class="room-info">
         <text class="room-name">{{ room.name }}</text>
-        <view class="room-tags" v-if="room.type || room.bedType">
-          <text class="tag" v-if="room.type">{{ typeLabels[room.type] || room.type }}</text>
-          <text class="tag" v-if="room.bedType">{{ room.bedType }}</text>
-        </view>
-        <view class="room-price">
-          <text class="price-symbol">¥</text>
-          <text class="price-value">{{ room.price }}</text>
-          <text class="price-unit">/晚</text>
-        </view>
+        <tag-list v-if="roomTags.length" :tags="roomTags" type="primary" size="small" />
+        <price-tag :price="room.price" size="medium" unit="/晚" />
       </view>
     </view>
 
@@ -62,40 +55,34 @@
 
       <view class="price-summary">
         <text class="summary-label">房费合计</text>
-        <text class="summary-value">¥{{ totalPrice }}</text>
+        <price-tag :price="totalPrice" size="large" type="primary" />
       </view>
     </view>
 
     <!-- 联系人信息 -->
     <view class="section">
       <view class="section-title">联系人信息</view>
-      <view class="form-item">
-        <text class="form-label">姓名</text>
+      <form-field label="姓名" required>
         <input class="form-input" v-model="contactName" placeholder="请输入入住人姓名" />
-      </view>
-      <view class="form-item">
-        <text class="form-label">手机号</text>
+      </form-field>
+      <form-field label="手机号" required>
         <input class="form-input" v-model="contactPhone" type="number" placeholder="请输入手机号" maxlength="11" />
-      </view>
-      <view class="form-item">
-        <text class="form-label">身份证号</text>
+      </form-field>
+      <form-field label="身份证号">
         <input class="form-input" v-model="contactIdCard" placeholder="请输入身份证号(选填)" maxlength="18" />
-      </view>
-      <view class="form-item">
-        <text class="form-label">备注</text>
+      </form-field>
+      <form-field label="备注">
         <textarea class="form-textarea" v-model="remark" placeholder="如有特殊需求请备注" />
-      </view>
+      </form-field>
     </view>
 
     <!-- 提交按钮 -->
     <view class="submit-bar">
       <view class="total-row">
         <text class="total-label">应付金额</text>
-        <text class="total-value">¥{{ totalPrice }}</text>
-      </view>
-      <view class="submit-btn" @tap="handleSubmit">
-        <text class="submit-text">提交订单</text>
+        <price-tag :price="totalPrice" size="large" type="primary" />
       </view>
+      <base-button type="primary" size="large" @click="handleSubmit">提交订单</base-button>
     </view>
 
     <!-- 日期选择弹窗 -->
@@ -114,6 +101,10 @@ import { ref, computed, onMounted, watch } from 'vue';
 import { getRoomDetail, getRoomCalendar } from '@/api/user/room';
 import { createOrder } from '@/api/user/order';
 import RoomCalendarPicker from '@/components/RoomCalendarPicker.vue';
+import BaseButton from '@/components/base/BaseButton.vue';
+import PriceTag from '@/components/business/PriceTag.vue';
+import TagList from '@/components/business/TagList.vue';
+import FormField from '@/components/business/FormField.vue';
 
 const roomId = ref(0);
 const merchantId = ref(0);
@@ -139,6 +130,18 @@ const typeLabels: Record<string, string> = {
   hostel: '青旅',
 };
 
+// 房源标签
+const roomTags = computed(() => {
+  const tags = [];
+  if (room.value?.type) {
+    tags.push(typeLabels[room.value.type] || room.value.type);
+  }
+  if (room.value?.bedType) {
+    tags.push(room.value.bedType);
+  }
+  return tags;
+});
+
 const nightCount = computed(() => {
   if (!checkInDate.value || !checkOutDate.value) return 1;
   const diff = new Date(checkOutDate.value).getTime() - new Date(checkInDate.value).getTime();
@@ -309,53 +312,55 @@ function onDateChange(checkIn: string, checkOut: string) {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-order-create {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
   padding-bottom: 120rpx;
 }
 
 .room-card {
   display: flex;
-  background: #fff;
-  margin: 24rpx;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+  background: $bg-card;
+  margin: $spacing-xl;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .room-cover {
   width: 160rpx;
   height: 160rpx;
-  border-radius: 12rpx;
+  border-radius: $radius-base;
   flex-shrink: 0;
 }
 
 .room-info {
   flex: 1;
-  margin-left: 20rpx;
+  margin-left: $spacing-lg;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .room-name {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .room-tags {
   display: flex;
-  gap: 10rpx;
+  gap: $spacing-xs;
 }
 
 .tag {
-  font-size: 20rpx;
-  color: #FF6B35;
-  background: #fff1eb;
-  padding: 2rpx 10rpx;
-  border-radius: 6rpx;
+  font-size: $font-xs;
+  color: $primary-color;
+  background: $primary-bg;
+  padding: 4rpx $spacing-sm;
+  border-radius: $radius-xs;
 }
 
 .room-price {
@@ -364,41 +369,42 @@ function onDateChange(checkIn: string, checkOut: string) {
 }
 
 .price-symbol {
-  font-size: 24rpx;
-  color: #FF6B35;
+  font-size: $font-sm;
+  color: $primary-color;
 }
 
 .price-value {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-size: $font-xl;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .price-unit {
-  font-size: 22rpx;
-  color: #999;
+  font-size: $font-xs;
+  color: $text-secondary;
   margin-left: 4rpx;
 }
 
 .section {
-  background: #fff;
-  margin: 24rpx;
-  border-radius: 16rpx;
-  padding: 24rpx;
+  background: $bg-card;
+  margin: $spacing-xl;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .section-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 20rpx;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin-bottom: $spacing-lg;
 }
 
 .date-row {
   display: flex;
   align-items: center;
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid #f0f0f0;
+  padding: $spacing-md 0;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .date-item {
@@ -408,31 +414,31 @@ function onDateChange(checkIn: string, checkOut: string) {
 }
 
 .date-label {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .date-value {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
   margin-top: 4rpx;
 }
 
 .night-badge {
-  background: #fff1eb;
-  padding: 8rpx 16rpx;
-  border-radius: 8rpx;
+  background: $primary-bg;
+  padding: $spacing-xs $spacing-md;
+  border-radius: $radius-sm;
 }
 
 .night-text {
-  font-size: 24rpx;
-  color: #FF6B35;
+  font-size: $font-sm;
+  color: $primary-color;
 }
 
 .count-row {
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid #f0f0f0;
+  padding: $spacing-md 0;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .count-item {
@@ -441,8 +447,8 @@ function onDateChange(checkIn: string, checkOut: string) {
 }
 
 .count-label {
-  font-size: 26rpx;
-  color: #333;
+  font-size: $font-sm;
+  color: $text-primary;
   flex-shrink: 0;
   width: 140rpx;
 }
@@ -450,84 +456,105 @@ function onDateChange(checkIn: string, checkOut: string) {
 .count-stepper {
   display: flex;
   align-items: center;
-  margin-left: 16rpx;
+  margin-left: $spacing-md;
 }
 
 .stepper-btn {
   width: 56rpx;
   height: 56rpx;
-  border-radius: 8rpx;
-  background: #f5f7fa;
+  border-radius: $radius-sm;
+  background: $bg-page;
+  border: 1rpx solid $border-base;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32rpx;
-  color: #666;
+  font-size: $font-lg;
+  color: $text-primary;
+  transition: all 0.2s ease;
+}
+
+.stepper-btn:active {
+  background: $bg-hover;
 }
 
 .stepper-btn.disabled {
-  color: #ccc;
-  background: #f0f0f0;
+  color: $text-disabled;
+  background: $bg-disabled;
+  border-color: $border-light;
 }
 
 .stepper-value {
   min-width: 60rpx;
   text-align: center;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .count-tip {
-  font-size: 22rpx;
-  color: #999;
-  margin-left: 16rpx;
+  font-size: $font-xs;
+  color: $text-secondary;
+  margin-left: $spacing-md;
 }
 
 .price-summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 16rpx;
+  padding-top: $spacing-md;
 }
 
 .summary-label {
-  font-size: 26rpx;
-  color: #666;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .summary-value {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-size: $font-xl;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .form-item {
   display: flex;
   flex-direction: column;
-  margin-bottom: 20rpx;
+  margin-bottom: $spacing-lg;
 }
 
 .form-label {
-  font-size: 26rpx;
-  color: #333;
-  margin-bottom: 8rpx;
+  font-size: $font-sm;
+  color: $text-primary;
+  margin-bottom: $spacing-xs;
 }
 
 .form-input {
   height: 80rpx;
-  background: #f5f7fa;
-  border-radius: 8rpx;
-  padding: 0 16rpx;
-  font-size: 28rpx;
+  background: $bg-card;
+  border: 1rpx solid $border-base;
+  border-radius: $radius-sm;
+  padding: 0 $spacing-md;
+  font-size: $font-base;
+  color: $text-primary;
+  transition: all 0.2s ease;
+}
+
+.form-input:focus {
+  border-color: $primary-color;
 }
 
 .form-textarea {
   height: 120rpx;
-  background: #f5f7fa;
-  border-radius: 8rpx;
-  padding: 16rpx;
-  font-size: 28rpx;
+  background: $bg-card;
+  border: 1rpx solid $border-base;
+  border-radius: $radius-sm;
+  padding: $spacing-md;
+  font-size: $font-base;
+  color: $text-primary;
+  transition: all 0.2s ease;
+}
+
+.form-textarea:focus {
+  border-color: $primary-color;
 }
 
 .submit-bar {
@@ -535,9 +562,9 @@ function onDateChange(checkIn: string, checkOut: string) {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #fff;
-  padding: 24rpx;
-  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
+  background: $bg-card;
+  padding: $spacing-xl;
+  border-top: 1rpx solid $border-light;
   display: flex;
   align-items: center;
 }
@@ -549,30 +576,35 @@ function onDateChange(checkIn: string, checkOut: string) {
 }
 
 .total-label {
-  font-size: 26rpx;
-  color: #666;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .total-value {
-  font-size: 40rpx;
-  font-weight: 700;
-  color: #FF6B35;
-  margin-left: 8rpx;
+  font-size: $font-2xl;
+  font-weight: $font-bold;
+  color: $primary-color;
+  margin-left: $spacing-xs;
 }
 
 .submit-btn {
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
-  border-radius: 44rpx;
+  background: $primary-color;
+  border-radius: $radius-base;
   height: 88rpx;
   width: 240rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.submit-btn:active {
+  background: $primary-dark;
 }
 
 .submit-text {
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #fff;
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: #FFFFFF;
 }
 </style>
\ No newline at end of file
diff --git a/apps/miniapp/src/pages/order-detail/index.vue b/apps/miniapp/src/pages/order-detail/index.vue
index a38abb6..3991c8c 100644
--- a/apps/miniapp/src/pages/order-detail/index.vue
+++ b/apps/miniapp/src/pages/order-detail/index.vue
@@ -2,8 +2,8 @@
   <view class="page-order-detail">
     <view v-if="order.id" class="detail-content">
       <!-- 状态栏 -->
-      <view :class="['status-bar', `status-${order.status}`]">
-        <text class="status-text">{{ statusLabels[order.status] }}</text>
+      <view class="status-bar">
+        <text class="status-text">{{ getStatusText(order.status) }}</text>
       </view>
 
       <!-- 房源信息 -->
@@ -67,7 +67,7 @@
         </view>
         <view class="info-row flex-between total-row">
           <text class="info-label">实付金额</text>
-          <text class="total-price">¥{{ order.payAmount }}</text>
+          <price-tag :price="order.payAmount" size="large" type="primary" />
         </view>
       </view>
 
@@ -98,14 +98,14 @@
 
       <!-- 操作按钮 -->
       <view class="actions" v-if="order.status === 'pending_pay'">
-        <button class="btn-cancel" @tap="handleCancel">取消订单</button>
-        <button class="btn-pay" @tap="handlePay">去支付</button>
+        <base-button type="outline" size="large" @click="handleCancel">取消订单</base-button>
+        <base-button type="primary" size="large" @click="handlePay">去支付</base-button>
       </view>
       <view class="actions" v-if="order.status === 'pending_confirm' || order.status === 'pending_checkin'">
-        <button class="btn-cancel" @tap="handleCancel">取消订单</button>
+        <base-button type="outline" size="large" @click="handleCancel">取消订单</base-button>
       </view>
       <view class="actions" v-if="order.status === 'completed' && !reviewed">
-        <button class="btn-review" @tap="openReviewModal">评价</button>
+        <base-button type="primary" size="large" @click="openReviewModal">评价</base-button>
       </view>
       <view class="actions" v-if="order.status === 'completed' && reviewed">
         <text class="reviewed-tip">已评价</text>
@@ -115,15 +115,11 @@
     <view v-else class="loading">加载中...</view>
 
     <!-- 支付弹窗 -->
-    <view v-if="showPayModal" class="pay-modal" @tap="closePayModal">
-      <view class="pay-panel" @tap.stop>
-        <view class="pay-header">
-          <text class="pay-title">选择支付方式</text>
-          <text class="pay-close" @tap="closePayModal">×</text>
-        </view>
+    <base-modal v-model="showPayModal" title="选择支付方式" @close="closePayModal">
+      <view class="pay-content">
         <view class="pay-amount">
           <text class="pay-label">支付金额</text>
-          <text class="pay-value">¥{{ order.payAmount }}</text>
+          <price-tag :price="order.payAmount" size="large" type="primary" />
         </view>
         <view class="pay-methods">
           <view class="pay-method" :class="{ active: payMethod === 'wechat' }" @tap="payMethod = 'wechat'">
@@ -137,41 +133,33 @@
             <text class="method-check" v-if="payMethod === 'alipay'">✓</text>
           </view>
         </view>
-        <button class="pay-btn" @tap="confirmPay">确认支付</button>
+        <base-button type="primary" size="large" block @click="confirmPay">确认支付</base-button>
       </view>
-    </view>
+    </base-modal>
 
     <!-- 评价弹窗 -->
-    <view v-if="showReviewModal" class="review-modal" @tap="closeReviewModal">
-      <view class="review-panel" @tap.stop>
-        <view class="review-header">
-          <text class="review-title">评价订单</text>
-          <text class="review-close" @tap="closeReviewModal">×</text>
+    <base-modal v-model="showReviewModal" title="评价订单" @close="closeReviewModal">
+      <view class="review-content">
+        <view class="rating-row">
+          <text class="rating-label">评分</text>
+          <rating-stars
+            :score="reviewRating"
+            :editable="true"
+            size="large"
+            @change="reviewRating = $event"
+          />
         </view>
-        <view class="review-body">
-          <view class="rating-row">
-            <text class="rating-label">评分</text>
-            <view class="rating-stars">
-              <text
-                v-for="i in 5"
-                :key="i"
-                :class="['star', { active: i <= reviewRating }]"
-                @tap="reviewRating = i"
-              >★</text>
-            </view>
-          </view>
-          <textarea class="review-content" v-model="reviewContent" placeholder="请输入评价内容（选填）" />
-          <view class="anonymous-row">
-            <checkbox :checked="isAnonymous" @tap="isAnonymous = !isAnonymous" />
-            <text class="anonymous-label">匿名评价</text>
-          </view>
+        <textarea class="review-textarea" v-model="reviewContent" placeholder="请输入评价内容（选填）" />
+        <view class="anonymous-row">
+          <checkbox :checked="isAnonymous" @tap="isAnonymous = !isAnonymous" />
+          <text class="anonymous-label">匿名评价</text>
         </view>
-        <view class="review-footer">
-          <button class="review-btn cancel" @tap="closeReviewModal">取消</button>
-          <button class="review-btn submit" @tap="submitReview">提交</button>
+        <view class="review-actions">
+          <base-button type="outline" size="large" @click="closeReviewModal">取消</base-button>
+          <base-button type="primary" size="large" @click="submitReview">提交</base-button>
         </view>
       </view>
-    </view>
+    </base-modal>
   </view>
 </template>
 
@@ -179,16 +167,10 @@
 import { ref, onMounted } from 'vue';
 import { getOrderDetail, cancelOrder, payOrder } from '@/api/user/order';
 import { createReview, checkOrderReviewed } from '@/api/user/review';
-
-const statusLabels: Record<string, string> = {
-  pending_pay: '待支付',
-  pending_confirm: '待确认',
-  pending_checkin: '待入住',
-  checked_in: '已入住',
-  completed: '已完成',
-  cancelled: '已取消',
-  refunded: '已退款',
-};
+import BaseButton from '@/components/base/BaseButton.vue';
+import BaseModal from '@/components/base/BaseModal.vue';
+import PriceTag from '@/components/business/PriceTag.vue';
+import RatingStars from '@/components/business/RatingStars.vue';
 
 const paymentMethodLabels: Record<string, string> = {
   wechat: '微信支付',
@@ -196,6 +178,22 @@ const paymentMethodLabels: Record<string, string> = {
   balance: '余额支付',
 };
 
+const statusLabels: Record<string, string> = {
+  pending_pay: '待支付',
+  pending_confirm: '待确认',
+  confirmed: '已确认',
+  pending_checkin: '待入住',
+  checked_in: '已入住',
+  completed: '已完成',
+  cancelled: '已取消',
+  refunding: '退款中',
+  refunded: '已退款',
+};
+
+function getStatusText(status: string): string {
+  return statusLabels[status] || status;
+}
+
 const order = ref<any>({});
 const orderId = ref(0);
 const showPayModal = ref(false);
@@ -307,17 +305,17 @@ async function submitReview() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-order-detail {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $bg-page;
   padding-bottom: 160rpx;
 }
 
 .status-bar {
-  padding: 48rpx 32rpx;
-  color: #fff;
-  font-size: 36rpx;
-  font-weight: 700;
+  padding: $spacing-3xl $spacing-2xl;
+  background: $gradient-primary;
   position: relative;
 
   &::after {
@@ -327,39 +325,45 @@ async function submitReview() {
     left: 0;
     right: 0;
     height: 40rpx;
-    background: #f7f8fa;
-    border-radius: 32rpx 32rpx 0 0;
+    background: $bg-page;
+    border-radius: $radius-2xl $radius-2xl 0 0;
   }
 }
 
-.status-pending_pay { background: linear-gradient(135deg, #faad14, #ffc53d); }
-.status-pending_confirm { background: linear-gradient(135deg, #1890ff, #40a9ff); }
-.status-pending_checkin { background: linear-gradient(135deg, #52c41a, #73d13d); }
-.status-checked_in { background: linear-gradient(135deg, #FF6B35, #ff8a5c); }
-.status-completed { background: linear-gradient(135deg, #52c41a, #73d13d); }
-.status-cancelled { background: linear-gradient(135deg, #999, #bfbfbf); }
-.status-refunding { background: linear-gradient(135deg, #ff4d4f, #ff7875); }
-.status-refunded { background: linear-gradient(135deg, #722ed1, #9254de); }
+.status-text {
+  color: $text-inverse;
+  font-size: $font-xl;
+  font-weight: $font-bold;
+}
+
+.status-pending_pay { background: $warning-color; }
+.status-pending_confirm { background: $info-color; }
+.status-pending_checkin { background: $success-color; }
+.status-checked_in { background: $primary-color; }
+.status-completed { background: $success-color; }
+.status-cancelled { background: $text-secondary; }
+.status-refunding { background: $error-color; }
+.status-refunded { background: #722ed1; }
 
 .section {
-  background: #fff;
-  margin: 0 24rpx 20rpx;
-  border-radius: 20rpx;
-  padding: 28rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  background: $bg-card;
+  margin: $spacing-xl $spacing-xl $spacing-lg;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .section:first-of-type {
-  margin-top: 8rpx;
+  margin-top: $spacing-xs;
 }
 
 .section-title {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 20rpx;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin-bottom: $spacing-lg;
   position: relative;
-  padding-left: 20rpx;
+  padding-left: $spacing-lg;
 
   &::before {
     content: '';
@@ -369,74 +373,77 @@ async function submitReview() {
     transform: translateY(-50%);
     width: 6rpx;
     height: 24rpx;
-    background: linear-gradient(180deg, #FF6B35, #ff8a5c);
+    background: $primary-color;
     border-radius: 3rpx;
   }
 }
 
 .room-card {
-  padding: 8rpx 0;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-radius: $radius-lg;
 }
 
 .room-thumb {
   width: 180rpx;
   height: 140rpx;
-  border-radius: 16rpx;
+  border-radius: $radius-md;
   flex-shrink: 0;
+  object-fit: cover;
 }
 
 .room-info {
   flex: 1;
-  margin-left: 24rpx;
+  margin-left: $spacing-xl;
 }
 
 .room-name {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .merchant-name {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
   margin-top: 10rpx;
+  display: block;
 }
 
 .info-row {
   padding: 18rpx 0;
-  border-bottom: 1rpx solid #f7f8fa;
+  border-bottom: 1rpx solid $border-light;
 
   &:last-child { border-bottom: none; }
 }
 
 .info-label {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
 }
 
 .info-value {
-  font-size: 28rpx;
-  color: #1a1a1a;
-  font-weight: 500;
+  font-size: $font-base;
+  color: $text-primary;
+  font-weight: $font-medium;
 }
 
-.discount { color: #52c41a; }
+.discount { color: $success-color; }
 
 .total-row {
-  padding-top: 20rpx;
-  border-top: 2rpx solid #f0f0f0;
+  padding-top: $spacing-lg;
 }
 
 .total-price {
   font-size: 38rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .loading {
   text-align: center;
   padding: 200rpx 0;
-  color: #ccc;
+  color: $text-tertiary;
 }
 
 .actions {
@@ -445,65 +452,79 @@ async function submitReview() {
   left: 0;
   right: 0;
   display: flex;
-  gap: 24rpx;
-  padding: 24rpx;
-  background: #fff;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
-  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  gap: $spacing-xl;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-top: 1rpx solid $border-light;
+  padding-bottom: calc($spacing-xl + env(safe-area-inset-bottom));
 }
 
 .btn-cancel {
   flex: 1;
   height: 92rpx;
   line-height: 92rpx;
-  border-radius: 46rpx;
-  font-size: 30rpx;
-  background: #f5f5f5;
-  color: #666;
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $bg-hover;
+  color: $text-secondary;
   border: none;
-  font-weight: 500;
+  font-weight: $font-medium;
+}
+
+.btn-cancel:active {
+  background: $bg-disabled;
 }
 
 .btn-pay {
   flex: 1;
   height: 92rpx;
   line-height: 92rpx;
-  border-radius: 46rpx;
-  font-size: 30rpx;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $primary-color;
   color: #fff;
   border: none;
-  font-weight: 600;
-  box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
+  font-weight: $font-semibold;
+}
+
+.btn-pay:active {
+  background: $primary-dark;
 }
 
 .btn-refund {
   flex: 1;
   height: 92rpx;
   line-height: 92rpx;
-  border-radius: 46rpx;
-  font-size: 30rpx;
-  background: #fff;
-  color: #ff4d4f;
-  border: 2rpx solid #ff4d4f;
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: transparent;
+  color: $error-color;
+  border: 2rpx solid $error-color;
+}
+
+.btn-refund:active {
+  background: rgba($error-color, 0.05);
 }
 
 .btn-review {
   flex: 1;
   height: 92rpx;
   line-height: 92rpx;
-  border-radius: 46rpx;
-  font-size: 30rpx;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $primary-color;
   color: #fff;
   border: none;
-  font-weight: 600;
-  box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
+  font-weight: $font-semibold;
+}
+
+.btn-review:active {
+  background: $primary-dark;
 }
 
 .reviewed-tip {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
   text-align: center;
   width: 100%;
   line-height: 92rpx;
@@ -523,11 +544,11 @@ async function submitReview() {
 }
 
 .pay-panel {
-  background: #fff;
-  border-radius: 32rpx 32rpx 0 0;
+  background: $bg-card;
+  border-radius: $radius-2xl $radius-2xl 0 0;
   width: 100%;
-  padding: 36rpx;
-  padding-bottom: calc(36rpx + env(safe-area-inset-bottom));
+  padding: $spacing-2xl;
+  padding-bottom: calc($spacing-2xl + env(safe-area-inset-bottom));
   animation: slideUp 0.3s ease;
 }
 
@@ -540,90 +561,93 @@ async function submitReview() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-2xl;
 }
 
 .pay-title {
   font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .pay-close {
   font-size: 44rpx;
-  color: #ccc;
-  padding: 0 8rpx;
+  color: $text-tertiary;
+  padding: 0 $spacing-xs;
 }
 
 .pay-amount {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 28rpx;
-  background: linear-gradient(135deg, rgba(255, 107, 53, 0.06), rgba(255, 138, 92, 0.06));
-  border-radius: 16rpx;
-  margin-bottom: 32rpx;
+  padding: $spacing-xl;
+  background: $primary-bg;
+  border-radius: $radius-md;
+  margin-bottom: $spacing-2xl;
 }
 
 .pay-label {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
 }
 
 .pay-value {
   font-size: 44rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .pay-methods {
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-2xl;
 }
 
 .pay-method {
   display: flex;
   align-items: center;
-  padding: 28rpx;
-  border: 2rpx solid #f0f0f0;
-  border-radius: 16rpx;
-  margin-bottom: 16rpx;
+  padding: $spacing-xl;
+  border: 2rpx solid $border-base;
+  border-radius: $radius-md;
+  margin-bottom: $spacing-md;
   transition: all 0.2s ease;
 }
 
 .pay-method.active {
-  border-color: #FF6B35;
-  background: rgba(255, 107, 53, 0.04);
+  border-color: $primary-color;
+  background: $primary-bg;
 }
 
 .method-icon {
   font-size: 44rpx;
-  margin-right: 20rpx;
+  margin-right: $spacing-lg;
 }
 
 .method-name {
   flex: 1;
-  font-size: 30rpx;
-  color: #1a1a1a;
-  font-weight: 500;
+  font-size: $font-md;
+  color: $text-primary;
+  font-weight: $font-medium;
 }
 
 .method-check {
-  font-size: 32rpx;
-  color: #FF6B35;
-  font-weight: 700;
+  font-size: $font-lg;
+  color: $primary-color;
+  font-weight: $font-bold;
 }
 
 .pay-btn {
   width: 100%;
   height: 92rpx;
   line-height: 92rpx;
-  border-radius: 46rpx;
-  font-size: 32rpx;
-  font-weight: 600;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  border-radius: $radius-base;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  background: $primary-color;
   color: #fff;
   border: none;
-  box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
+}
+
+.pay-btn:active {
+  background: $primary-dark;
 }
 
 /* 评价弹窗 */
@@ -640,11 +664,11 @@ async function submitReview() {
 }
 
 .review-panel {
-  background: #fff;
-  border-radius: 32rpx 32rpx 0 0;
+  background: $bg-card;
+  border-radius: $radius-2xl $radius-2xl 0 0;
   width: 100%;
-  padding: 36rpx;
-  padding-bottom: calc(36rpx + env(safe-area-inset-bottom));
+  padding: $spacing-2xl;
+  padding-bottom: calc($spacing-2xl + env(safe-area-inset-bottom));
   animation: slideUp 0.3s ease;
 }
 
@@ -652,49 +676,49 @@ async function submitReview() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 28rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .review-title {
   font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .review-close {
   font-size: 44rpx;
-  color: #ccc;
+  color: $text-tertiary;
 }
 
 .review-body {
-  margin-bottom: 28rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .rating-row {
   display: flex;
   align-items: center;
-  margin-bottom: 28rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .rating-label {
-  font-size: 28rpx;
-  color: #1a1a1a;
-  margin-right: 16rpx;
-  font-weight: 500;
+  font-size: $font-base;
+  color: $text-primary;
+  margin-right: $spacing-md;
+  font-weight: $font-medium;
 }
 
 .rating-stars {
   display: flex;
-  gap: 12rpx;
+  gap: $spacing-sm;
 }
 
 .star {
   font-size: 52rpx;
-  color: #e5e5e5;
+  color: $text-disabled;
   transition: all 0.15s ease;
 
   &.active {
-    color: #FFB800;
+    color: $star-color;
     transform: scale(1.1);
   }
 }
@@ -702,54 +726,61 @@ async function submitReview() {
 .review-content {
   width: 100%;
   height: 200rpx;
-  background: #f7f8fa;
-  border-radius: 16rpx;
-  padding: 20rpx;
-  font-size: 28rpx;
-  margin-bottom: 20rpx;
+  background: $bg-page;
+  border-radius: $radius-md;
+  padding: $spacing-lg;
+  font-size: $font-base;
+  margin-bottom: $spacing-lg;
   border: 2rpx solid transparent;
 }
 
 .review-content:focus {
-  border-color: #FF6B35;
-  background: #fff;
+  border-color: $primary-color;
+  background: $bg-card;
 }
 
 .anonymous-row {
   display: flex;
   align-items: center;
-  gap: 12rpx;
+  gap: $spacing-sm;
 }
 
 .anonymous-label {
-  font-size: 26rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .review-footer {
   display: flex;
-  gap: 24rpx;
+  gap: $spacing-xl;
 }
 
 .review-btn {
   flex: 1;
   height: 92rpx;
   line-height: 92rpx;
-  border-radius: 46rpx;
-  font-size: 30rpx;
+  border-radius: $radius-base;
+  font-size: $font-md;
   border: none;
-  font-weight: 500;
+  font-weight: $font-medium;
 
   &.cancel {
-    background: #f5f5f5;
-    color: #999;
+    background: $bg-hover;
+    color: $text-secondary;
+  }
+
+  &.cancel:active {
+    background: $bg-disabled;
   }
 
   &.submit {
-    background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+    background: $primary-color;
     color: #fff;
-    font-weight: 600;
-    box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
+    font-weight: $font-semibold;
+  }
+
+  &.submit:active {
+    background: $primary-dark;
   }
 }
 </style>
diff --git a/apps/miniapp/src/pages/order/index.vue b/apps/miniapp/src/pages/order/index.vue
index d95751a..55687ad 100644
--- a/apps/miniapp/src/pages/order/index.vue
+++ b/apps/miniapp/src/pages/order/index.vue
@@ -1,79 +1,80 @@
 <template>
   <view class="page-order">
     <!-- 订单状态Tab -->
-    <scroll-view scroll-x class="tab-bar">
-      <view
-        v-for="tab in tabs"
-        :key="tab.value"
-        :class="['tab-item', { active: currentTab === tab.value }]"
-        @tap="switchTab(tab.value)"
-      >
-        {{ tab.label }}
-      </view>
-    </scroll-view>
+    <view class="tab-container">
+      <scroll-view scroll-x class="tab-scroll" :show-scrollbar="false">
+        <view class="tab-list">
+          <view
+            v-for="tab in tabs"
+            :key="tab.value"
+            :class="['tab-item', { active: currentTab === tab.value }]"
+            @tap="switchTab(tab.value)"
+          >
+            <text class="tab-text">{{ tab.label }}</text>
+            <view v-if="currentTab === tab.value" class="tab-indicator"></view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
 
     <!-- 订单列表 -->
     <scroll-view scroll-y class="order-list" @scrolltolower="loadMore">
-      <view v-for="order in orderList" :key="order.id" class="order-card" @tap="goDetail(order.id)">
-        <view class="order-header flex-between">
-          <text class="order-no">订单号: {{ order.orderNo }}</text>
-          <text :class="['order-status', `status-${order.status}`]">
-            {{ statusLabels[order.status] }}
-          </text>
-        </view>
-        <view class="order-body flex-row">
-          <image class="room-thumb" :src="order.room?.coverImage || '/static/default-room.png'" mode="aspectFill" />
-          <view class="order-info">
-            <text class="room-name text-ellipsis">{{ order.room?.name }}</text>
-            <text class="order-date">{{ order.checkInDate }} ~ {{ order.checkOutDate }}</text>
-            <text class="order-nights">{{ order.nights }}晚</text>
-          </view>
-        </view>
-        <view class="order-footer flex-between">
-          <text class="order-total">¥{{ order.payAmount }}</text>
-          <view class="order-actions">
-            <button v-if="order.status === 'pending_pay'" size="mini" class="action-btn primary" @tap.stop="goPay(order.id)">去支付</button>
-            <button v-if="order.status === 'pending_pay'" size="mini" class="action-btn" @tap.stop="cancelOrder(order.id)">取消</button>
-            <button v-if="order.status === 'completed'" size="mini" class="action-btn primary" @tap.stop="goReview(order.id)">评价</button>
-          </view>
-        </view>
-      </view>
+      <order-card
+        v-for="order in displayOrders"
+        :key="order.id"
+        :order="order"
+        @click="goDetail"
+        @action="handleOrderAction"
+      />
 
-      <view v-if="orderList.length === 0 && !loading" class="empty">暂无订单</view>
+      <empty-state
+        v-if="orderList.length === 0 && !loading"
+        type="order"
+        size="normal"
+      />
+
+      <loading-state v-if="loading && orderList.length === 0" />
     </scroll-view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import * as orderApi from '@/api/user/order';
+import OrderCard from '@/components/business/OrderCard.vue';
+import EmptyState from '@/components/base/EmptyState.vue';
+import LoadingState from '@/components/base/LoadingState.vue';
 
 const tabs = [
   { label: '全部', value: '' },
   { label: '待支付', value: 'pending_pay' },
-  { label: '待确认', value: 'pending_confirm' },
   { label: '待入住', value: 'pending_checkin' },
-  { label: '已入住', value: 'checked_in' },
-  { label: '已完成', value: 'completed' },
-  { label: '已取消', value: 'cancelled' },
+  { label: '退款/取消', value: 'cancelled/refunded/refunding' },
 ];
 
-const statusLabels: Record<string, string> = {
-  pending_pay: '待支付',
-  pending_confirm: '待确认',
-  pending_checkin: '待入住',
-  checked_in: '已入住',
-  completed: '已完成',
-  cancelled: '已取消',
-  refunding: '退款中',
-  refunded: '已退款',
-};
-
 const orderList = ref<any[]>([]);
 const currentTab = ref('');
 const page = ref(1);
 const loading = ref(false);
 
+// 转换订单数据格式以适配 OrderCard 组件
+const displayOrders = computed(() => {
+  return orderList.value.map(order => ({
+    id: order.id,
+    orderNo: order.orderNo,
+    status: order.status,
+    roomName: order.room?.name || '',
+    roomImage: order.room?.coverImage,
+    merchantName: order.merchant?.shopName || '',
+    checkInDate: order.checkInDate,
+    checkOutDate: order.checkOutDate,
+    nights: order.nights,
+    totalAmount: order.payAmount,
+    createTime: order.createdAt,
+    payTime: order.paidAt,
+  }));
+});
+
 async function fetchOrders(reset = false) {
   if (loading.value) return;
   loading.value = true;
@@ -104,12 +105,25 @@ function loadMore() {
   fetchOrders();
 }
 
-function goDetail(id: number) {
-  uni.navigateTo({ url: `/pages/order-detail/index?id=${id}` });
+function goDetail(order: any) {
+  uni.navigateTo({ url: `/pages/order-detail/index?id=${order.id}` });
 }
 
-function goPay(id: number) {
-  uni.navigateTo({ url: `/pages/order-detail/index?id=${id}` });
+function handleOrderAction(type: string, order: any) {
+  switch (type) {
+    case 'pay':
+      uni.navigateTo({ url: `/pages/order-detail/index?id=${order.id}` });
+      break;
+    case 'cancel':
+      cancelOrder(order.id);
+      break;
+    case 'review':
+      uni.navigateTo({ url: `/pages/order-detail/index?id=${order.id}` });
+      break;
+    case 'contact':
+      uni.showToast({ title: '功能开发中', icon: 'none' });
+      break;
+  }
 }
 
 function cancelOrder(id: number) {
@@ -133,149 +147,87 @@ function cancelOrder(id: number) {
   });
 }
 
-function goReview(id: number) {
-  uni.navigateTo({ url: `/pages/order-detail/index?id=${id}` });
-}
-
 onMounted(() => {
   fetchOrders(true);
 });
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/design-tokens.scss';
+@import '@/static/styles/mixins.scss';
+
 .page-order {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #f7f8fa;
+  background: $bg-page;
 }
 
-.tab-bar {
+/* ========== Tab栏 ========== */
+.tab-container {
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
+}
+
+.tab-scroll {
   white-space: nowrap;
-  background: #fff;
-  padding: 24rpx 24rpx 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.tab-list {
+  display: flex;
+  width: 100%;
 }
 
 .tab-item {
-  display: inline-block;
-  padding: 14rpx 32rpx;
-  margin-right: 12rpx;
-  font-size: 26rpx;
-  color: #999;
-  border-radius: 36rpx;
-  transition: all 0.25s ease;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 25%;
+  padding: $spacing-lg 0;
+  cursor: pointer;
+  transition: all 0.3s ease;
 
-  &.active {
-    background: linear-gradient(135deg, #FF6B35, #ff8a5c);
-    color: #fff;
-    font-weight: 600;
-    box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
+  &.active .tab-text {
+    color: $text-primary;
+    font-weight: $font-semibold;
   }
 }
 
+.tab-text {
+  font-size: $font-base;
+  color: $text-secondary;
+  transition: all 0.3s ease;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 32rpx;
+  height: 4rpx;
+  background: $primary-color;
+  border-radius: $radius-round;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    width: 0;
+    opacity: 0;
+  }
+  to {
+    width: 32rpx;
+    opacity: 1;
+  }
+}
+
+/* ========== 订单列表 ========== */
 .order-list {
   flex: 1;
-  padding: 24rpx;
-}
-
-.order-card {
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 28rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
-  transition: all 0.2s ease;
-}
-
-.order-card:active {
-  transform: scale(0.99);
-}
-
-.order-header {
-  margin-bottom: 4rpx;
-}
-
-.order-no {
-  font-size: 24rpx;
-  color: #bbb;
-}
-
-.order-status {
-  font-size: 26rpx;
-  font-weight: 600;
-}
-
-.status-pending_pay { color: #faad14; }
-.status-pending_confirm { color: #1890ff; }
-.status-pending_checkin { color: #52c41a; }
-.status-checked_in { color: #FF6B35; }
-.status-completed { color: #52c41a; }
-.status-cancelled { color: #999; }
-
-.order-body {
-  margin-top: 20rpx;
-  padding-bottom: 24rpx;
-  border-bottom: 1rpx solid #f7f8fa;
-}
-
-.room-thumb {
-  width: 180rpx;
-  height: 140rpx;
-  border-radius: 16rpx;
-  flex-shrink: 0;
-}
-
-.order-info {
-  flex: 1;
-  margin-left: 24rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.room-name {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #1a1a1a;
-}
-
-.order-date {
-  font-size: 24rpx;
-  color: #999;
-}
-
-.order-nights {
-  font-size: 24rpx;
-  color: #bbb;
-}
-
-.order-total {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #FF6B35;
-}
-
-.action-btn {
-  font-size: 24rpx;
-  border-radius: 36rpx;
-  margin-left: 16rpx;
-  padding: 0 28rpx;
-  height: 56rpx;
-  line-height: 56rpx;
-  transition: all 0.2s ease;
-
-  &.primary {
-    background: linear-gradient(135deg, #FF6B35, #ff8a5c);
-    color: #fff;
-    box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.25);
-  }
-}
-
-.empty {
-  text-align: center;
-  padding: 120rpx 0;
-  color: #ccc;
-  font-size: 28rpx;
+  padding: $spacing-lg $spacing-xl;
+  box-sizing: border-box;
 }
 </style>
diff --git a/apps/miniapp/src/pages/room-detail/index.vue b/apps/miniapp/src/pages/room-detail/index.vue
index 97f5ec6..f5b53e9 100644
--- a/apps/miniapp/src/pages/room-detail/index.vue
+++ b/apps/miniapp/src/pages/room-detail/index.vue
@@ -13,21 +13,19 @@
         <text class="room-name">{{ room.name }}</text>
 
         <!-- 评分行 -->
-        <view class="rating-row">
-          <view class="rating-stars">
-            <text v-for="n in 5" :key="n" class="star" :class="{ filled: n <= Math.round(room.rating / 2) }">★</text>
-          </view>
-          <text class="rating-score">{{ room.rating || 4.8 }}</text>
-          <text class="rating-count">{{ room.reviewCount || 0 }}条评价</text>
-        </view>
+        <rating-stars
+          :score="room.rating || 4.8"
+          :count="room.reviewCount || 0"
+          size="medium"
+          :show-stars="true"
+        />
 
         <!-- 标签 -->
-        <view class="room-tags">
-          <text class="tag">{{ typeLabels[room.type] || '房源' }}</text>
-          <text class="tag" v-if="room.bedType">{{ room.bedType }}</text>
-          <text class="tag" v-if="room.area">{{ room.area }}m²</text>
-          <text class="tag" v-if="room.maxGuests">最多{{ room.maxGuests }}人</text>
-        </view>
+        <tag-list
+          :tags="roomTags"
+          type="primary"
+          size="small"
+        />
 
         <!-- 地址 -->
         <view class="address-row" v-if="room.address" @tap="copyAddress">
@@ -50,12 +48,11 @@
       <!-- 设施服务 -->
       <view class="section">
         <text class="section-title">设施服务</text>
-        <view class="facility-grid">
-          <view v-for="f in displayFacilities" :key="f.name" class="facility-item">
-            <text class="facility-icon">{{ f.icon }}</text>
-            <text class="facility-name">{{ f.name }}</text>
-          </view>
-        </view>
+        <tag-list
+          :tags="displayFacilityTags"
+          type="default"
+          size="medium"
+        />
         <view class="more-facility" v-if="room.facilities?.length > 8" @tap="showAllFacilities = !showAllFacilities">
           {{ showAllFacilities ? '收起' : `查看全部${room.facilities.length}项设施` }}
         </view>
@@ -98,14 +95,28 @@
 
     <!-- 底部操作栏 -->
     <view class="bottom-bar">
-      <view class="price-info">
-        <text class="price-symbol">¥</text>
-        <text class="price-value">{{ room.price }}</text>
-        <text class="price-unit">/晚</text>
-      </view>
+      <price-tag
+        :price="room.price"
+        :original-price="room.originalPrice"
+        size="large"
+        unit="/晚"
+      />
       <view class="action-btns">
-        <button class="contact-btn" @tap="contactMerchant">联系房东</button>
-        <button class="book-btn" @tap="handleBook">立即预订</button>
+        <base-button
+          type="outline"
+          size="medium"
+          @click="contactMerchant"
+        >
+          联系房东
+        </base-button>
+        <base-button
+          type="primary"
+          size="medium"
+          :disabled="!canBook"
+          @click="handleBook"
+        >
+          {{ canBook ? '立即预订' : '当天无房' }}
+        </base-button>
       </view>
     </view>
   </view>
@@ -113,7 +124,11 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
-import { getRoomDetail } from '@/api/user/room';
+import { getRoomDetail, getRoomCalendar } from '@/api/user/room';
+import RatingStars from '@/components/business/RatingStars.vue';
+import PriceTag from '@/components/business/PriceTag.vue';
+import TagList from '@/components/business/TagList.vue';
+import BaseButton from '@/components/base/BaseButton.vue';
 
 const typeLabels: Record<string, string> = {
   hotel: '酒店',
@@ -126,6 +141,7 @@ const room = ref<any>({});
 const roomId = ref(0);
 const descExpanded = ref(false);
 const showAllFacilities = ref(false);
+const todayStock = ref<number>(0);
 
 // 设施图标映射
 const facilityIcons: Record<string, string> = {
@@ -151,12 +167,41 @@ const displayFacilities = computed(() => {
   return showAllFacilities.value ? list : list.slice(0, 8);
 });
 
+// 房源标签
+const roomTags = computed(() => {
+  const tags = [];
+  if (room.value.type) {
+    tags.push(typeLabels[room.value.type] || '房源');
+  }
+  if (room.value.bedType) {
+    tags.push(room.value.bedType);
+  }
+  if (room.value.area) {
+    tags.push(`${room.value.area}m²`);
+  }
+  if (room.value.maxGuests) {
+    tags.push(`最多${room.value.maxGuests}人`);
+  }
+  return tags;
+});
+
+// 设施标签
+const displayFacilityTags = computed(() => {
+  const list = (room.value.facilities || []).map((f: string) => `${facilityIcons[f] || '✓'} ${f}`);
+  return showAllFacilities.value ? list : list.slice(0, 8);
+});
+
+const canBook = computed(() => {
+  return todayStock.value > 0;
+});
+
 onMounted(() => {
   const pages = getCurrentPages();
   const page = pages[pages.length - 1] as any;
   roomId.value = page.options?.id || page.$page?.options?.id;
   if (roomId.value) {
     fetchDetail();
+    fetchTodayStock();
   }
 });
 
@@ -169,6 +214,20 @@ async function fetchDetail() {
   }
 }
 
+async function fetchTodayStock() {
+  try {
+    const today = new Date();
+    const dateStr = today.toISOString().split('T')[0];
+    const res = await getRoomCalendar(roomId.value, dateStr, dateStr);
+    if (res.data && res.data.length > 0) {
+      todayStock.value = res.data[0].stock || 0;
+    }
+  } catch (e) {
+    console.error(e);
+    todayStock.value = 0;
+  }
+}
+
 function copyAddress() {
   if (room.value.address) {
     uni.setClipboardData({
@@ -185,19 +244,26 @@ function contactMerchant() {
 }
 
 function handleBook() {
+  if (!canBook.value) {
+    uni.showToast({ title: '当天无房，请选择其他日期', icon: 'none' });
+    return;
+  }
   uni.navigateTo({ url: `/pages/order-create/index?roomId=${roomId.value}` });
 }
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-detail {
   min-height: 100vh;
-  background: #f7f8fa;
-  padding-bottom: 170rpx;
+  background: $bg-page;
+  padding-bottom: 160rpx;
 }
 
 .banner {
-  height: 500rpx;
+  height: 480rpx;
+  background: $bg-page;
 }
 
 .banner-img {
@@ -206,34 +272,33 @@ function handleBook() {
 }
 
 .detail-content {
-  padding: 0 24rpx;
-  margin-top: -32rpx;
-  position: relative;
-  z-index: 1;
+  padding: $spacing-xl;
 }
 
 .info-section {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 32rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  margin-bottom: $spacing-md;
+  border: 1rpx solid $border-light;
 }
 
 .room-name {
-  font-size: 38rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-xl;
+  font-weight: $font-semibold;
+  color: $text-primary;
   display: block;
-  line-height: 1.3;
+  line-height: 1.4;
+  margin-bottom: $spacing-md;
 }
 
 .rating-row {
   display: flex;
   align-items: center;
-  margin-top: 20rpx;
-  padding: 16rpx 0;
-  border-top: 1rpx solid #f7f8fa;
+  padding: $spacing-md 0;
+  border-top: 1rpx solid $border-light;
+  border-bottom: 1rpx solid $border-light;
+  margin-bottom: $spacing-md;
 }
 
 .rating-stars {
@@ -242,115 +307,112 @@ function handleBook() {
 }
 
 .star {
-  font-size: 28rpx;
-  color: #e5e5e5;
+  font-size: $font-base;
+  color: #E5E5E5;
 
   &.filled {
-    color: #FFB800;
+    color: $star-color;
   }
 }
 
 .rating-score {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #FFB800;
-  margin-left: 12rpx;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $star-color;
+  margin-left: $spacing-sm;
 }
 
 .rating-count {
-  font-size: 24rpx;
-  color: #999;
-  margin-left: 8rpx;
+  font-size: $font-sm;
+  color: $text-secondary;
+  margin-left: $spacing-xs;
 }
 
 .room-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 12rpx;
-  margin-top: 16rpx;
+  gap: $spacing-xs;
+  margin-bottom: $spacing-md;
 }
 
 .tag {
-  font-size: 22rpx;
-  color: #FF6B35;
-  background: rgba(255, 107, 53, 0.08);
-  padding: 8rpx 18rpx;
-  border-radius: 8rpx;
-  font-weight: 500;
+  font-size: $font-xs;
+  color: $primary-color;
+  background: $primary-bg;
+  padding: 6rpx $spacing-sm;
+  border-radius: $radius-xs;
+  font-weight: $font-regular;
 }
 
 .address-row {
   display: flex;
   align-items: center;
-  margin-top: 20rpx;
-  padding-top: 16rpx;
-  border-top: 1rpx solid #f7f8fa;
+  padding-top: $spacing-md;
+  border-top: 1rpx solid $border-light;
 }
 
 .address-icon {
-  font-size: 28rpx;
-  margin-right: 10rpx;
+  font-size: $font-base;
+  margin-right: $spacing-xs;
 }
 
 .address-text {
   flex: 1;
-  font-size: 26rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .section {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 28rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  margin-bottom: $spacing-md;
+  border: 1rpx solid $border-light;
 }
 
 .section-title {
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
   display: block;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-md;
 }
 
 .highlight-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 16rpx;
+  gap: $spacing-sm;
 }
 
 .highlight-item {
   display: flex;
   align-items: center;
-  background: #f7f8fa;
-  padding: 16rpx 24rpx;
-  border-radius: 12rpx;
+  background: $bg-page;
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-sm;
 }
 
 .highlight-icon {
-  font-size: 28rpx;
-  margin-right: 10rpx;
+  font-size: $font-base;
+  margin-right: $spacing-xs;
 }
 
 .highlight-text {
-  font-size: 26rpx;
-  color: #1a1a1a;
-  font-weight: 500;
+  font-size: $font-sm;
+  color: $text-primary;
 }
 
 .facility-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 24rpx;
+  gap: $spacing-xl;
 }
 
 .facility-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 10rpx;
-  padding: 16rpx 0;
+  gap: $spacing-xs;
 }
 
 .facility-icon {
@@ -358,45 +420,46 @@ function handleBook() {
 }
 
 .facility-name {
-  font-size: 22rpx;
-  color: #999;
+  font-size: $font-xs;
+  color: $text-secondary;
+  text-align: center;
 }
 
 .more-facility {
   text-align: center;
-  font-size: 26rpx;
-  color: #FF6B35;
-  margin-top: 20rpx;
-  font-weight: 500;
+  font-size: $font-sm;
+  color: $primary-color;
+  margin-top: $spacing-md;
 }
 
 .description {
-  font-size: 28rpx;
-  color: #999;
-  line-height: 1.8;
+  font-size: $font-sm;
+  color: $text-secondary;
+  line-height: 1.6;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
   overflow: hidden;
 
   &.expanded {
     display: block;
     -webkit-line-clamp: unset;
+    line-clamp: unset;
   }
 }
 
 .expand-btn {
   display: block;
-  font-size: 26rpx;
-  color: #FF6B35;
-  margin-top: 16rpx;
-  font-weight: 500;
+  font-size: $font-sm;
+  color: $primary-color;
+  margin-top: $spacing-sm;
 }
 
 .notice-list {
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  gap: $spacing-md;
 }
 
 .notice-item {
@@ -406,14 +469,14 @@ function handleBook() {
 }
 
 .notice-label {
-  font-size: 26rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .notice-value {
-  font-size: 26rpx;
-  color: #1a1a1a;
-  font-weight: 500;
+  font-size: $font-sm;
+  color: $text-primary;
+  font-weight: $font-medium;
 }
 
 .bottom-bar {
@@ -421,64 +484,79 @@ function handleBook() {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #fff;
-  padding: 20rpx 24rpx;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+  background: $bg-card;
+  padding: $spacing-xl;
+  border-top: 1rpx solid $border-light;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  padding-bottom: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
 }
 
 .price-info {
   display: flex;
   align-items: baseline;
+  gap: 4rpx;
 }
 
 .price-symbol {
-  font-size: 28rpx;
-  color: #FF6B35;
-  font-weight: 600;
+  font-size: $font-base;
+  color: $primary-color;
+  font-weight: $font-medium;
 }
 
 .price-value {
-  font-size: 44rpx;
-  color: #FF6B35;
-  font-weight: 700;
+  font-size: $font-3xl;
+  color: $primary-color;
+  font-weight: $font-bold;
 }
 
 .price-unit {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .action-btns {
   display: flex;
-  gap: 16rpx;
+  gap: $spacing-sm;
 }
 
 .contact-btn {
-  background: #fff;
-  color: #FF6B35;
-  border: 2rpx solid #FF6B35;
-  border-radius: 40rpx;
-  font-size: 28rpx;
-  font-weight: 500;
-  padding: 0 36rpx;
-  height: 76rpx;
-  line-height: 76rpx;
+  background: transparent;
+  color: $primary-color;
+  border: 2rpx solid $primary-color;
+  border-radius: $radius-base;
+  font-size: $font-sm;
+  font-weight: $font-medium;
+  padding: 0 $spacing-xl;
+  height: 72rpx;
+  line-height: 72rpx;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $primary-bg;
+  }
 }
 
 .book-btn {
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
-  color: #fff;
-  border-radius: 40rpx;
-  font-size: 28rpx;
-  font-weight: 600;
-  padding: 0 48rpx;
-  height: 76rpx;
-  line-height: 76rpx;
+  background: $primary-color;
+  color: #FFFFFF;
+  border-radius: $radius-base;
+  font-size: $font-sm;
+  font-weight: $font-medium;
+  padding: 0 $spacing-2xl;
+  height: 72rpx;
+  line-height: 72rpx;
   border: none;
-  box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $primary-dark;
+  }
+
+  &.disabled {
+    background: $bg-disabled;
+    color: $text-disabled;
+  }
 }
 </style>
diff --git a/apps/miniapp/src/pages/search/index.vue b/apps/miniapp/src/pages/search/index.vue
index ac1a17c..a9aa207 100644
--- a/apps/miniapp/src/pages/search/index.vue
+++ b/apps/miniapp/src/pages/search/index.vue
@@ -49,55 +49,25 @@
       @refresherrefresh="onRefresh"
     >
       <view class="list-content">
-        <view
+        <MerchantCard
           v-for="merchant in merchantList"
           :key="merchant.id"
-          class="hotel-card"
-          @tap="goMerchant(merchant.id)"
-        >
-          <view class="card-image-wrap">
-            <image class="card-image" :src="merchant.logo || '/static/default-avatar.png'" mode="aspectFill" />
-            <view v-if="merchant.rating" class="rating-badge">
-              <u-icon name="star-fill" size="12" color="#ffb800"></u-icon>
-              <text class="rating-score">{{ merchant.rating || '5.0' }}</text>
-            </view>
-          </view>
-
-          <view class="card-content">
-            <view class="card-header">
-              <text class="hotel-name">{{ merchant.shopName }}</text>
-              <view class="hotel-tags">
-                <text class="tag-item">{{ merchant.city }}</text>
-              </view>
-            </view>
-
-            <text class="hotel-desc">{{ merchant.description || '舒适住宿，温馨服务' }}</text>
-
-            <view class="card-footer">
-              <view class="price-section">
-                <text class="price-symbol">¥</text>
-                <text class="price-amount">{{ merchant.minPrice || '--' }}</text>
-                <text class="price-suffix">起</text>
-              </view>
-              <view class="book-btn">
-                <text class="btn-text">查看详情</text>
-              </view>
-            </view>
-          </view>
-        </view>
+          :merchant="formatMerchant(merchant)"
+          @click="goMerchant(merchant.id)"
+        />
       </view>
 
-      <view v-if="loading" class="loading-more">
-        <text class="loading-text">加载中...</text>
-      </view>
+      <LoadingState v-if="loading" mode="dots" />
+
       <view v-if="!hasMore && merchantList.length > 0" class="no-more">
         <text class="no-more-text">— 已经到底了 —</text>
       </view>
-      <view v-if="merchantList.length === 0 && !loading" class="empty-state">
-        <u-icon name="home" size="80" color="#ccc"></u-icon>
-        <text class="empty-title">未找到相关酒店</text>
-        <text class="empty-tip">试试调整搜索条件</text>
-      </view>
+
+      <EmptyState
+        v-if="merchantList.length === 0 && !loading"
+        type="search"
+        description="试试调整搜索条件"
+      />
     </scroll-view>
   </view>
 </template>
@@ -105,6 +75,9 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
 import { getMerchantList } from '@/api/user/merchant';
+import MerchantCard from '@/components/business/MerchantCard.vue';
+import EmptyState from '@/components/base/EmptyState.vue';
+import LoadingState from '@/components/base/LoadingState.vue';
 
 // 筛选条件（从URL获取）
 const city = ref('上海');
@@ -224,21 +197,43 @@ function goBack() {
 function clearKeyword() {
   keyword.value = '';
 }
+
+// 格式化商家数据以适配 MerchantCard 组件
+function formatMerchant(merchant: any) {
+  return {
+    id: merchant.id,
+    name: merchant.shopName,
+    coverImage: merchant.logo || '/static/default-avatar.png',
+    cityName: merchant.city,
+    rating: merchant.rating,
+    reviewCount: merchant.reviewCount,
+    description: merchant.description || '舒适住宿，温馨服务',
+    facilities: merchant.facilities || [],
+    minPrice: merchant.minPrice || 0,
+    roomCount: merchant.roomCount,
+    distance: merchant.distance,
+    isRecommend: merchant.isRecommend,
+    isHot: merchant.isHot,
+    isNew: merchant.isNew
+  };
+}
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-search {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
   display: flex;
   flex-direction: column;
 }
 
-/* 搜索头部 */
+/* 搜索头部 - 扁平化设计 */
 .search-header {
-  background: #fff;
-  padding: 20rpx 32rpx 24rpx;
-  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
+  background: $bg-card;
+  padding: $spacing-lg $spacing-2xl $spacing-xl;
+  border-bottom: 1rpx solid $border-light;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -247,8 +242,8 @@ function clearKeyword() {
 .header-top {
   display: flex;
   align-items: center;
-  gap: 16rpx;
-  margin-bottom: 20rpx;
+  gap: $spacing-md;
+  margin-bottom: $spacing-lg;
 }
 
 .back-btn {
@@ -257,72 +252,85 @@ function clearKeyword() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f7f7f7;
-  border-radius: 50%;
+  background: $bg-page;
+  border-radius: $radius-base;
+  border: 1rpx solid $border-light;
   flex-shrink: 0;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $bg-hover;
+  }
 }
 
 .search-box {
   flex: 1;
   display: flex;
   align-items: center;
-  background: #f7f7f7;
-  border-radius: 32rpx;
+  background: $bg-page;
+  border: 1rpx solid $border-light;
+  border-radius: $radius-base;
   height: 72rpx;
-  padding: 0 24rpx;
-  gap: 12rpx;
+  padding: 0 $spacing-xl;
+  gap: $spacing-sm;
+  transition: all 0.2s ease;
+
+  &:focus-within {
+    border-color: $primary-color;
+    background: $bg-card;
+  }
 
   .search-input {
     flex: 1;
-    font-size: 28rpx;
-    color: #333;
+    font-size: $font-base;
+    color: $text-primary;
   }
 }
 
 .search-btn {
-  font-size: 28rpx;
-  color: #ff6b35;
-  font-weight: 600;
-  padding: 0 8rpx;
+  font-size: $font-base;
+  color: $primary-color;
+  font-weight: $font-semibold;
+  padding: 0 $spacing-xs;
   flex-shrink: 0;
 }
 
 .filter-info {
   display: flex;
   align-items: center;
-  gap: 20rpx;
-  padding: 16rpx 0 0;
+  gap: $spacing-lg;
+  padding: $spacing-md 0 0;
 }
 
 .info-item {
   display: flex;
   align-items: center;
-  gap: 8rpx;
+  gap: $spacing-xs;
 
   .info-text {
-    font-size: 24rpx;
-    color: #666;
+    font-size: $font-sm;
+    color: $text-secondary;
   }
 }
 
 .info-divider {
-  width: 2rpx;
-  height: 24rpx;
-  background: #e5e5e5;
+  width: 1rpx;
+  height: $spacing-xl;
+  background: $border-base;
 }
 
 /* 结果统计 */
 .result-count {
-  padding: 24rpx 32rpx 16rpx;
-  background: #f5f5f5;
+  padding: $spacing-xl $spacing-2xl $spacing-md;
+  background: $bg-page;
 
   .count-text {
-    font-size: 26rpx;
-    color: #666;
+    font-size: $font-sm;
+    color: $text-secondary;
 
     .count-num {
-      color: #ff6b35;
-      font-weight: 600;
+      color: $primary-color;
+      font-weight: $font-semibold;
     }
   }
 }
@@ -333,21 +341,21 @@ function clearKeyword() {
 }
 
 .list-content {
-  padding: 0 32rpx 32rpx;
+  padding: 0 $spacing-2xl $spacing-2xl;
 }
 
-/* 酒店卡片 */
+/* 酒店卡片 - 扁平化设计 */
 .hotel-card {
-  background: #fff;
-  border-radius: 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  border: 1rpx solid $border-light;
   overflow: hidden;
-  margin-top: 24rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
-  transition: all 0.3s ease;
+  margin-top: $spacing-xl;
+  transition: all 0.2s ease;
 
   &:active {
-    transform: translateY(2rpx);
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    background: $bg-hover;
+    border-color: $border-base;
   }
 }
 
@@ -364,41 +372,41 @@ function clearKeyword() {
 
   .rating-badge {
     position: absolute;
-    top: 20rpx;
-    right: 20rpx;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(10rpx);
-    padding: 8rpx 16rpx;
-    border-radius: 24rpx;
+    top: $spacing-lg;
+    right: $spacing-lg;
+    background: $bg-card;
+    border: 1rpx solid $border-light;
+    padding: $spacing-xs $spacing-md;
+    border-radius: $radius-base;
     display: flex;
     align-items: center;
     gap: 6rpx;
 
     .rating-score {
-      font-size: 24rpx;
-      color: #fff;
-      font-weight: 600;
+      font-size: $font-sm;
+      color: $text-primary;
+      font-weight: $font-semibold;
     }
   }
 }
 
 .card-content {
-  padding: 24rpx;
+  padding: $spacing-xl;
 }
 
 .card-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16rpx;
-  margin-bottom: 12rpx;
+  gap: $spacing-md;
+  margin-bottom: $spacing-sm;
 }
 
 .hotel-name {
   flex: 1;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #1a1a1a;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -408,23 +416,24 @@ function clearKeyword() {
 
 .hotel-tags {
   display: flex;
-  gap: 8rpx;
+  gap: $spacing-xs;
   flex-shrink: 0;
 }
 
 .tag-item {
-  font-size: 22rpx;
-  color: #666;
-  background: #f7f7f7;
-  padding: 6rpx 12rpx;
-  border-radius: 8rpx;
+  font-size: $font-xs;
+  color: $text-secondary;
+  background: $bg-page;
+  border: 1rpx solid $border-light;
+  padding: 6rpx $spacing-sm;
+  border-radius: $radius-sm;
 }
 
 .hotel-desc {
-  font-size: 26rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-tertiary;
   line-height: 1.6;
-  margin-bottom: 20rpx;
+  margin-bottom: $spacing-lg;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -435,8 +444,8 @@ function clearKeyword() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: 20rpx;
-  border-top: 1rpx solid #f5f5f5;
+  padding-top: $spacing-lg;
+  border-top: 1rpx solid $border-light;
 }
 
 .price-section {
@@ -445,55 +454,59 @@ function clearKeyword() {
   gap: 4rpx;
 
   .price-symbol {
-    font-size: 28rpx;
-    color: #ff6b35;
-    font-weight: 600;
+    font-size: $font-base;
+    color: $primary-color;
+    font-weight: $font-semibold;
   }
 
   .price-amount {
     font-size: 44rpx;
-    font-weight: 700;
-    color: #ff6b35;
+    font-weight: $font-bold;
+    color: $primary-color;
     line-height: 1;
   }
 
   .price-suffix {
-    font-size: 24rpx;
-    color: #999;
+    font-size: $font-sm;
+    color: $text-tertiary;
   }
 }
 
 .book-btn {
-  background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
-  padding: 16rpx 32rpx;
-  border-radius: 32rpx;
-  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
+  background: $primary-color;
+  padding: $spacing-md $spacing-2xl;
+  border-radius: $radius-base;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $primary-dark;
+  }
 
   .btn-text {
-    font-size: 26rpx;
+    font-size: $font-sm;
     color: #fff;
-    font-weight: 600;
+    font-weight: $font-semibold;
   }
 }
 
 /* 加载状态 */
 .loading-more {
   text-align: center;
-  padding: 48rpx 0;
+  padding: $spacing-3xl 0;
 
   .loading-text {
-    font-size: 26rpx;
-    color: #999;
+    font-size: $font-sm;
+    color: $text-tertiary;
   }
 }
 
 .no-more {
   text-align: center;
-  padding: 48rpx 0;
+  padding: $spacing-3xl 0;
 
   .no-more-text {
-    font-size: 26rpx;
-    color: #ccc;
+    font-size: $font-sm;
+    color: $text-placeholder;
   }
 }
 
@@ -503,17 +516,17 @@ function clearKeyword() {
   flex-direction: column;
   align-items: center;
   padding: 160rpx 0;
-  gap: 24rpx;
+  gap: $spacing-xl;
 
   .empty-title {
-    font-size: 32rpx;
-    color: #666;
-    font-weight: 600;
+    font-size: $font-lg;
+    color: $text-secondary;
+    font-weight: $font-semibold;
   }
 
   .empty-tip {
-    font-size: 26rpx;
-    color: #999;
+    font-size: $font-sm;
+    color: $text-tertiary;
   }
 }
 </style>
diff --git a/apps/miniapp/src/pages/seller/home.vue b/apps/miniapp/src/pages/seller/home.vue
index 687fc6a..5f40980 100644
--- a/apps/miniapp/src/pages/seller/home.vue
+++ b/apps/miniapp/src/pages/seller/home.vue
@@ -3,53 +3,51 @@
     <!-- 未登录商家账号 -->
     <view v-if="!sellerStore.isSellerLoggedIn()" class="login-tip">
       <text class="tip-text">请先注册/登录商家账号</text>
-      <button class="login-btn" @tap="goSellerRegister">去注册/登录</button>
+      <base-button type="primary" size="large" @click="goSellerRegister">去注册/登录</base-button>
     </view>
 
     <!-- 已登录但未申请店铺 -->
     <view v-else-if="!sellerStore.hasMerchant()" class="apply-section">
-      <view class="seller-info">
+      <base-card class="seller-info-card">
         <text class="seller-name">{{ sellerStore.sellerInfo?.contactName }}</text>
         <text class="seller-phone">{{ sellerStore.sellerInfo?.phone }}</text>
-      </view>
+      </base-card>
       <text class="apply-title">创建店铺</text>
       <text class="apply-desc">完成店铺信息填写，提交审核后即可营业</text>
-      <button class="apply-btn" @tap="goCreateShop">创建店铺</button>
-      <button class="logout-btn" @tap="handleLogoutSeller">退出商家账号</button>
+      <base-button type="primary" size="large" block @click="goCreateShop">创建店铺</base-button>
+      <base-button type="outline" size="large" block @click="handleLogoutSeller">退出商家账号</base-button>
     </view>
 
     <!-- 已有店铺：加载中 -->
-    <view v-else-if="!merchant" class="loading-section">
-      <text class="loading-text">加载中...</text>
-    </view>
+    <loading-state v-if="sellerStore.hasMerchant() && !merchant" />
 
     <!-- 已有店铺 -->
     <view v-else class="merchant-content">
       <!-- 店铺信息 -->
-      <view class="shop-header">
-        <image class="shop-logo" :src="merchant.logo || '/static/default-avatar.png'" mode="aspectFill" />
-        <view class="shop-info">
-          <text class="shop-name">{{ merchant.shopName }}</text>
-          <view class="status-row">
-            <text :class="['shop-status', merchant.status]">{{ statusText }}</text>
+      <base-card class="shop-header">
+        <view class="shop-header-content">
+          <image class="shop-logo" :src="merchant.logo || '/static/default-avatar.png'" mode="aspectFill" />
+          <view class="shop-info">
+            <text class="shop-name">{{ merchant.shopName }}</text>
+            <status-badge :status="merchant.status" :text="statusText" size="small" />
             <!-- 审核中状态显示提示 -->
             <text v-if="merchant.status === 'pending'" class="status-tip">等待平台审核</text>
           </view>
         </view>
-      </view>
+      </base-card>
 
       <!-- 审核拒绝原因 -->
-      <view v-if="merchant.status === 'rejected' && merchant.rejectReason" class="reject-section">
+      <base-card v-if="merchant.status === 'rejected' && merchant.rejectReason" class="reject-section">
         <view class="reject-header">
           <text class="reject-icon">!</text>
           <text class="reject-title">审核拒绝原因</text>
         </view>
         <text class="reject-reason">{{ merchant.rejectReason }}</text>
         <text class="reject-tip">请修改店铺信息后重新提交审核</text>
-      </view>
+      </base-card>
 
       <!-- 店铺信息卡片（非审核中状态） -->
-      <view v-if="merchant.status !== 'pending'" class="shop-detail-card">
+      <base-card v-if="merchant.status !== 'pending'" class="shop-detail-card">
         <view class="detail-item">
           <text class="detail-label">联系电话</text>
           <text class="detail-value">{{ merchant.phone }}</text>
@@ -62,7 +60,7 @@
           <text class="detail-label">详细地址</text>
           <text class="detail-value">{{ merchant.address }}</text>
         </view>
-      </view>
+      </base-card>
 
       <!-- 数据概览（仅审核通过显示） -->
       <view v-if="merchant.status === 'approved'" class="stat-grid">
@@ -129,6 +127,10 @@
 import { ref, computed, onMounted } from 'vue';
 import { useSellerStore } from '@/store/seller';
 import { getMyMerchant } from '@/api/seller/merchant';
+import BaseButton from '@/components/base/BaseButton.vue';
+import BaseCard from '@/components/base/BaseCard.vue';
+import LoadingState from '@/components/base/LoadingState.vue';
+import StatusBadge from '@/components/base/StatusBadge.vue';
 
 const sellerStore = useSellerStore();
 const merchant = ref<any>(null);
@@ -189,9 +191,11 @@ function navigateTo(url: string) {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-merchant {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
 }
 
 .login-tip {
@@ -202,17 +206,17 @@ function navigateTo(url: string) {
 }
 
 .tip-text {
-  font-size: 30rpx;
-  color: #999;
-  margin-bottom: 40rpx;
+  font-size: $font-md;
+  color: $text-secondary;
+  margin-bottom: $spacing-2xl;
 }
 
 .login-btn {
-  background: #FF6B35;
+  background: $primary-color;
   color: #fff;
-  border-radius: 40rpx;
-  padding: 20rpx 80rpx;
-  font-size: 30rpx;
+  border-radius: $radius-base;
+  padding: $spacing-lg $spacing-3xl;
+  font-size: $font-md;
   border: none;
 }
 
@@ -227,162 +231,166 @@ function navigateTo(url: string) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 48rpx;
+  margin-bottom: $spacing-3xl;
 }
 
 .seller-name {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .seller-phone {
-  font-size: 28rpx;
-  color: #999;
-  margin-top: 8rpx;
+  font-size: $font-base;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
 }
 
 .apply-title {
-  font-size: 40rpx;
-  font-weight: 700;
-  color: #333;
+  font-size: $font-2xl;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .apply-desc {
-  font-size: 28rpx;
-  color: #999;
-  margin: 16rpx 0 48rpx;
+  font-size: $font-base;
+  color: $text-secondary;
+  margin: $spacing-md 0 $spacing-3xl;
 }
 
 .apply-btn {
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   color: #fff;
-  border-radius: 40rpx;
-  padding: 24rpx 80rpx;
-  font-size: 32rpx;
-  font-weight: 600;
+  border-radius: $radius-base;
+  padding: $spacing-xl $spacing-3xl;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
   border: none;
 }
 
 .logout-btn {
-  margin-top: 32rpx;
+  margin-top: $spacing-2xl;
   background: transparent;
-  color: #999;
-  border: 1rpx solid #ddd;
-  border-radius: 40rpx;
-  padding: 20rpx 60rpx;
-  font-size: 28rpx;
+  color: $text-secondary;
+  border: 2rpx solid $border-base;
+  border-radius: $radius-base;
+  padding: $spacing-lg $spacing-2xl;
+  font-size: $font-base;
 }
 
 .shop-header {
   display: flex;
   align-items: center;
-  padding: 40rpx 24rpx;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  padding: $spacing-2xl $spacing-xl;
+  background: $primary-color;
+  border-radius: $radius-lg;
+  margin: $spacing-xl;
 }
 
 .shop-logo {
   width: 100rpx;
   height: 100rpx;
   border-radius: 50%;
-  border: 4rpx solid rgba(255, 255, 255, 0.5);
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
 }
 
 .shop-info {
-  margin-left: 24rpx;
+  margin-left: $spacing-xl;
   display: flex;
   flex-direction: column;
 }
 
 .shop-name {
-  font-size: 34rpx;
-  font-weight: 600;
+  font-size: $font-xl;
+  font-weight: $font-semibold;
   color: #fff;
 }
 
 .status-row {
   display: flex;
   align-items: center;
-  margin-top: 8rpx;
+  margin-top: $spacing-xs;
 }
 
 .shop-status {
-  font-size: 24rpx;
-  padding: 4rpx 16rpx;
-  border-radius: 16rpx;
+  font-size: $font-xs;
+  padding: 4rpx $spacing-md;
+  border-radius: $radius-xs;
   color: #fff;
+  background: rgba(255, 255, 255, 0.2);
 
-  &.approved { background: rgba(82, 196, 26, 0.8); }
-  &.pending { background: rgba(250, 173, 20, 0.8); }
-  &.rejected { background: rgba(255, 77, 79, 0.8); }
-  &.frozen { background: rgba(140, 140, 140, 0.8); }
+  &.approved { background: rgba(255, 255, 255, 0.25); }
+  &.pending { background: rgba(255, 255, 255, 0.25); }
+  &.rejected { background: rgba(255, 255, 255, 0.25); }
+  &.frozen { background: rgba(255, 255, 255, 0.25); }
 }
 
 .status-tip {
-  font-size: 24rpx;
+  font-size: $font-xs;
   color: rgba(255, 255, 255, 0.8);
-  margin-left: 12rpx;
+  margin-left: $spacing-sm;
 }
 
 .reject-section {
-  background: #fff2f0;
-  border: 1rpx solid #ffccc7;
-  border-radius: 16rpx;
-  margin: 24rpx;
-  padding: 24rpx;
+  background: $bg-card;
+  border: 2rpx solid $error-color;
+  border-radius: $radius-lg;
+  margin: $spacing-xl;
+  padding: $spacing-xl;
 }
 
 .reject-header {
   display: flex;
   align-items: center;
-  margin-bottom: 16rpx;
+  margin-bottom: $spacing-md;
 }
 
 .reject-icon {
   width: 32rpx;
   height: 32rpx;
-  background: #ff4d4f;
+  background: $error-color;
   border-radius: 50%;
   color: #fff;
-  font-size: 20rpx;
-  font-weight: 700;
+  font-size: $font-xs;
+  font-weight: $font-bold;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .reject-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #ff4d4f;
-  margin-left: 12rpx;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $error-color;
+  margin-left: $spacing-sm;
 }
 
 .reject-reason {
-  font-size: 28rpx;
-  color: #333;
+  font-size: $font-base;
+  color: $text-primary;
   line-height: 1.6;
 }
 
 .reject-tip {
-  font-size: 24rpx;
-  color: #ff7875;
-  margin-top: 12rpx;
+  font-size: $font-xs;
+  color: $error-color;
+  margin-top: $spacing-sm;
 }
 
 .shop-detail-card {
-  background: #fff;
-  border-radius: 16rpx;
-  margin: 24rpx;
-  padding: 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  margin: $spacing-xl;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .detail-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  padding: $spacing-md 0;
+  border-bottom: 1rpx solid $border-light;
 
   &:last-child {
     border-bottom: none;
@@ -390,21 +398,22 @@ function navigateTo(url: string) {
 }
 
 .detail-label {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
 }
 
 .detail-value {
-  font-size: 28rpx;
-  color: #333;
+  font-size: $font-base;
+  color: $text-primary;
 }
 
 .stat-grid {
   display: flex;
-  background: #fff;
-  margin: 24rpx;
-  border-radius: 16rpx;
-  padding: 32rpx 0;
+  background: $bg-card;
+  margin: $spacing-xl;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl 0;
+  border: 1rpx solid $border-light;
 }
 
 .stat-item {
@@ -415,48 +424,49 @@ function navigateTo(url: string) {
 }
 
 .stat-value {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #333;
+  font-size: $font-2xl;
+  font-weight: $font-bold;
+  color: $text-primary;
 }
 
 .stat-label {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 8rpx;
+  font-size: $font-xs;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
 }
 
 .action-section {
-  padding: 0 24rpx;
-  margin-bottom: 24rpx;
+  padding: 0 $spacing-xl;
+  margin-bottom: $spacing-xl;
 }
 
 .edit-btn {
   width: 100%;
   height: 88rpx;
-  background: #fff;
-  color: #FF6B35;
-  border: 2rpx solid #FF6B35;
-  border-radius: 44rpx;
-  font-size: 32rpx;
-  font-weight: 600;
+  background: $bg-card;
+  color: $primary-color;
+  border: 2rpx solid $primary-color;
+  border-radius: $radius-base;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
 }
 
 .pending-tip, .frozen-tip {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 32rpx 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl $spacing-xl;
   text-align: center;
+  border: 1rpx solid $border-light;
 }
 
 .pending-text {
-  font-size: 28rpx;
-  color: #faad14;
+  font-size: $font-base;
+  color: $warning-color;
 }
 
 .frozen-text {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
 }
 
 .loading-section {
@@ -467,37 +477,38 @@ function navigateTo(url: string) {
 }
 
 .loading-text {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
 }
 
 .menu-section {
-  padding: 0 24rpx;
+  padding: 0 $spacing-xl;
 }
 
 .menu-group {
-  background: #fff;
-  border-radius: 16rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
   overflow: hidden;
+  border: 1rpx solid $border-light;
 }
 
 .menu-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 32rpx 24rpx;
-  border-bottom: 1rpx solid #f5f5f5;
+  padding: $spacing-2xl $spacing-xl;
+  border-bottom: 1rpx solid $border-light;
 
   &:last-child { border-bottom: none; }
 }
 
 .menu-label {
-  font-size: 30rpx;
-  color: #333;
+  font-size: $font-md;
+  color: $text-primary;
 }
 
 .menu-arrow {
-  font-size: 28rpx;
-  color: #ccc;
+  font-size: $font-base;
+  color: $text-tertiary;
 }
 </style>
\ No newline at end of file
diff --git a/apps/miniapp/src/pages/seller/order-detail.vue b/apps/miniapp/src/pages/seller/order-detail.vue
index 1957639..05fcfca 100644
--- a/apps/miniapp/src/pages/seller/order-detail.vue
+++ b/apps/miniapp/src/pages/seller/order-detail.vue
@@ -296,108 +296,114 @@ async function handleCheckout() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-seller-order-detail {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
   padding-bottom: 140rpx;
 }
 
 .status-bar {
-  padding: 40rpx 24rpx;
+  padding: $spacing-2xl $spacing-xl;
   color: #fff;
-  font-size: 36rpx;
-  font-weight: 700;
+  font-size: $font-2xl;
+  font-weight: $font-bold;
+  border-radius: $radius-lg;
+  margin: $spacing-xl;
 }
 
-.status-pending_pay { background: #faad14; }
-.status-pending_confirm { background: #1890ff; }
-.status-pending_checkin { background: #52c41a; }
-.status-checked_in { background: #FF6B35; }
-.status-completed { background: #52c41a; }
-.status-cancelled { background: #999; }
-.status-refunding { background: #ff4d4f; }
+.status-pending_pay { background: $warning-color; }
+.status-pending_confirm { background: $info-color; }
+.status-pending_checkin { background: $success-color; }
+.status-checked_in { background: $primary-color; }
+.status-completed { background: $success-color; }
+.status-cancelled { background: $text-tertiary; }
+.status-refunding { background: $error-color; }
 .status-refunded { background: #722ed1; }
 
 .section {
-  background: #fff;
-  margin: 24rpx;
-  border-radius: 16rpx;
-  padding: 24rpx;
+  background: $bg-card;
+  margin: $spacing-xl;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .section-title {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 20rpx;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin-bottom: $spacing-lg;
 }
 
 .room-card {
-  padding: 8rpx 0;
+  padding: $spacing-xs 0;
 }
 
 .room-thumb {
   width: 160rpx;
   height: 120rpx;
-  border-radius: 12rpx;
+  border-radius: $radius-base;
   flex-shrink: 0;
+  border: 1rpx solid $border-light;
 }
 
 .room-info {
   flex: 1;
-  margin-left: 20rpx;
+  margin-left: $spacing-lg;
 }
 
 .room-name {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .merchant-name {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 8rpx;
+  font-size: $font-xs;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
 }
 
 .info-row {
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  padding: $spacing-md 0;
+  border-bottom: 1rpx solid $border-light;
 
   &:last-child { border-bottom: none; }
 }
 
 .info-label {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
 }
 
 .info-value {
-  font-size: 28rpx;
-  color: #333;
+  font-size: $font-base;
+  color: $text-primary;
 }
 
-.discount { color: #52c41a; }
+.discount { color: $success-color; }
 
-.service-fee { color: #faad14; }
+.service-fee { color: $warning-color; }
 
-.merchant-income { color: #1890ff; font-weight: 600; }
+.merchant-income { color: $info-color; font-weight: $font-semibold; }
 
 .total-row {
-  padding-top: 20rpx;
-  border-top: 2rpx solid #eee;
+  padding-top: $spacing-lg;
+  border-top: 2rpx solid $border-base;
 }
 
 .total-price {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-size: $font-2xl;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .loading {
   text-align: center;
   padding: 200rpx 0;
-  color: #999;
+  color: $text-secondary;
 }
 
 .actions {
@@ -406,76 +412,92 @@ async function handleCheckout() {
   left: 0;
   right: 0;
   display: flex;
-  gap: 24rpx;
-  padding: 24rpx;
-  background: #fff;
-  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
+  gap: $spacing-xl;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-top: 1rpx solid $border-light;
 }
 
 .btn-reject {
   flex: 1;
   height: 88rpx;
   line-height: 88rpx;
-  border-radius: 44rpx;
-  font-size: 30rpx;
-  background: #fff;
-  color: #ff4d4f;
-  border: 2rpx solid #ff4d4f;
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $bg-card;
+  color: $error-color;
+  border: 2rpx solid $error-color;
 }
 
 .btn-confirm {
   flex: 1;
   height: 88rpx;
   line-height: 88rpx;
-  border-radius: 44rpx;
-  font-size: 30rpx;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $primary-color;
   color: #fff;
   border: none;
+
+  &:active {
+    background: $primary-dark;
+  }
 }
 
 .btn-checkin {
   flex: 1;
   height: 88rpx;
   line-height: 88rpx;
-  border-radius: 44rpx;
-  font-size: 30rpx;
-  background: linear-gradient(135deg, #52c41a, #73d13d);
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $success-color;
   color: #fff;
   border: none;
+
+  &:active {
+    background: darken($success-color, 5%);
+  }
 }
 
 .btn-checkout {
   flex: 1;
   height: 88rpx;
   line-height: 88rpx;
-  border-radius: 44rpx;
-  font-size: 30rpx;
-  background: linear-gradient(135deg, #1890ff, #40a9ff);
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $info-color;
   color: #fff;
   border: none;
+
+  &:active {
+    background: darken($info-color, 5%);
+  }
 }
 
 .btn-approve-refund {
   flex: 1;
   height: 88rpx;
   line-height: 88rpx;
-  border-radius: 44rpx;
-  font-size: 30rpx;
-  background: linear-gradient(135deg, #52c41a, #73d13d);
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $success-color;
   color: #fff;
   border: none;
+
+  &:active {
+    background: darken($success-color, 5%);
+  }
 }
 
 .btn-reject-refund {
   flex: 1;
   height: 88rpx;
   line-height: 88rpx;
-  border-radius: 44rpx;
-  font-size: 30rpx;
-  background: #fff;
-  color: #ff4d4f;
-  border: 2rpx solid #ff4d4f;
+  border-radius: $radius-base;
+  font-size: $font-md;
+  background: $bg-card;
+  color: $error-color;
+  border: 2rpx solid $error-color;
 }
 
 /* 拒绝弹窗 */
@@ -494,63 +516,72 @@ async function handleCheckout() {
 
 .modal-panel {
   width: 80%;
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 32rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .modal-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .modal-close {
-  font-size: 40rpx;
-  color: #999;
+  font-size: $font-2xl;
+  color: $text-secondary;
 }
 
 .modal-body {
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .reject-input {
   width: 100%;
   height: 160rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 16rpx;
-  font-size: 28rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: $spacing-md;
+  font-size: $font-base;
+  border: 2rpx solid $border-light;
+
+  &:focus {
+    border-color: $primary-color;
+  }
 }
 
 .modal-footer {
   display: flex;
-  gap: 24rpx;
+  gap: $spacing-xl;
 }
 
 .modal-btn {
   flex: 1;
   height: 80rpx;
   line-height: 80rpx;
-  font-size: 30rpx;
-  border-radius: 40rpx;
+  font-size: $font-md;
+  border-radius: $radius-base;
   border: none;
 
   &.cancel {
-    background: #f5f5f5;
-    color: #666;
+    background: $bg-page;
+    color: $text-secondary;
   }
 
   &.confirm {
-    background: #ff4d4f;
+    background: $error-color;
     color: #fff;
+
+    &:active {
+      background: darken($error-color, 5%);
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/apps/miniapp/src/pages/seller/orders.vue b/apps/miniapp/src/pages/seller/orders.vue
index 7540367..c2c959e 100644
--- a/apps/miniapp/src/pages/seller/orders.vue
+++ b/apps/miniapp/src/pages/seller/orders.vue
@@ -14,68 +14,46 @@
 
     <!-- 搜索栏 -->
     <view class="search-bar">
-      <input class="search-input" v-model="searchOrderNo" placeholder="搜索订单号" @confirm="handleSearch" />
-      <button class="search-btn" @tap="handleSearch">搜索</button>
+      <search-bar v-model="searchOrderNo" placeholder="搜索订单号" @search="handleSearch" />
     </view>
 
     <!-- 订单列表 -->
     <scroll-view scroll-y class="order-list" @scrolltolower="loadMore">
-      <view v-for="order in orderList" :key="order.id" class="order-card" @tap="goDetail(order.id)">
-        <view class="order-header flex-between">
-          <text class="order-no">订单号: {{ order.orderNo }}</text>
-          <text :class="['order-status', `status-${order.status}`]">
-            {{ statusLabels[order.status] }}
-          </text>
-        </view>
-        <view class="order-body">
-          <view class="room-info-row">
-            <text class="room-name">{{ order.room?.name }}</text>
-            <text class="order-amount">¥{{ order.payAmount }}</text>
-          </view>
-          <view class="date-info">
-            <text class="date-text">{{ order.checkInDate }} ~ {{ order.checkOutDate }} ({{ order.nights }}晚)</text>
-          </view>
-          <view class="guest-info">
-            <text class="guest-name">入住人: {{ order.contactName }}</text>
-            <text class="guest-phone">{{ order.contactPhone }}</text>
-          </view>
-        </view>
-        <view class="order-footer flex-between">
-          <text class="order-time">{{ formatTime(order.createdAt) }}</text>
-          <view class="order-actions">
-            <button v-if="order.status === 'pending_confirm'" size="mini" class="action-btn primary" @tap.stop="handleConfirm(order.id)">确认</button>
-            <button v-if="order.status === 'pending_confirm'" size="mini" class="action-btn danger" @tap.stop="handleReject(order.id)">拒绝</button>
-            <button v-if="order.status === 'pending_checkin'" size="mini" class="action-btn primary" @tap.stop="handleCheckin(order.id)">办理入住</button>
-          </view>
-        </view>
-      </view>
+      <order-card
+        v-for="order in displayOrders"
+        :key="order.id"
+        :order="order"
+        mode="merchant"
+        @click="goDetail"
+        @action="handleOrderAction"
+      />
 
-      <view v-if="orderList.length === 0 && !loading" class="empty">暂无订单</view>
-      <view v-if="loading" class="loading">加载中...</view>
+      <empty-state v-if="orderList.length === 0 && !loading" type="order" />
+      <loading-state v-if="loading" />
     </scroll-view>
 
     <!-- 拒绝原因弹窗 -->
-    <view v-if="showRejectModal" class="modal-mask" @tap="closeRejectModal">
-      <view class="modal-panel" @tap.stop>
-        <view class="modal-header">
-          <text class="modal-title">拒绝订单</text>
-          <text class="modal-close" @tap="closeRejectModal">×</text>
-        </view>
-        <view class="modal-body">
-          <textarea class="reject-input" v-model="rejectReason" placeholder="请输入拒绝原因" />
-        </view>
-        <view class="modal-footer">
-          <button class="modal-btn cancel" @tap="closeRejectModal">取消</button>
-          <button class="modal-btn confirm" @tap="submitReject">确认拒绝</button>
+    <base-modal v-model="showRejectModal" title="拒绝订单" @close="closeRejectModal">
+      <view class="reject-content">
+        <textarea class="reject-input" v-model="rejectReason" placeholder="请输入拒绝原因" />
+        <view class="reject-actions">
+          <base-button type="outline" size="large" @click="closeRejectModal">取消</base-button>
+          <base-button type="danger" size="large" @click="submitReject">确认拒绝</base-button>
         </view>
       </view>
-    </view>
+    </base-modal>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { getSellerOrders, confirmOrder, rejectOrder, checkinOrder } from '@/api/seller/order';
+import OrderCard from '@/components/business/OrderCard.vue';
+import SearchBar from '@/components/business/SearchBar.vue';
+import EmptyState from '@/components/base/EmptyState.vue';
+import LoadingState from '@/components/base/LoadingState.vue';
+import BaseModal from '@/components/base/BaseModal.vue';
+import BaseButton from '@/components/base/BaseButton.vue';
 
 const tabs = [
   { label: '全部', value: '' },
@@ -87,31 +65,35 @@ const tabs = [
   { label: '已退款', value: 'refunded' },
 ];
 
-const statusLabels: Record<string, string> = {
-  pending_pay: '待支付',
-  pending_confirm: '待确认',
-  pending_checkin: '待入住',
-  checked_in: '已入住',
-  completed: '已完成',
-  cancelled: '已取消',
-  refunding: '退款中',
-  refunded: '已退款',
-};
-
 const orderList = ref<any[]>([]);
 const currentTab = ref('');
 const searchOrderNo = ref('');
 const page = ref(1);
 const loading = ref(false);
 const showRejectModal = ref(false);
-const rejectOrderId = ref(0);
 const rejectReason = ref('');
+const currentOrderId = ref(0);
+
+// 转换订单数据格式
+const displayOrders = computed(() => {
+  return orderList.value.map(order => ({
+    id: order.id,
+    orderNo: order.orderNo,
+    status: order.status,
+    roomName: order.room?.name || '',
+    roomImage: order.room?.coverImage,
+    merchantName: order.merchant?.shopName || '',
+    checkInDate: order.checkInDate,
+    checkOutDate: order.checkOutDate,
+    nights: order.nights,
+    totalAmount: order.payAmount,
+    userName: order.contactName,
+    createTime: order.createdAt,
+    payTime: order.paidAt,
+    confirmTime: order.confirmedAt,
+  }));
+});
 
-function formatTime(time: string) {
-  if (!time) return '';
-  const d = new Date(time);
-  return `${d.getMonth() + 1}/${d.getDate()} ${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`;
-}
 
 async function fetchOrders(reset = false) {
   if (loading.value) return;
@@ -148,10 +130,95 @@ function loadMore() {
   fetchOrders();
 }
 
-function goDetail(id: number) {
-  uni.navigateTo({ url: `/pages/seller/order-detail?id=${id}` });
+function goDetail(order: any) {
+  uni.navigateTo({ url: `/pages/seller/order-detail?id=${order.id}` });
 }
 
+function handleOrderAction(type: string, order: any) {
+  switch (type) {
+    case 'confirm':
+      handleConfirm(order.id);
+      break;
+    case 'reject':
+      handleReject(order.id);
+      break;
+    case 'checkin':
+      handleCheckin(order.id);
+      break;
+    case 'contact':
+      uni.showToast({ title: '功能开发中', icon: 'none' });
+      break;
+  }
+}
+
+function handleConfirm(id: number) {
+  uni.showModal({
+    title: '确认订单',
+    content: '确认接受此订单？',
+    success: async (res) => {
+      if (res.confirm) {
+        try {
+          await confirmOrder(id);
+          uni.showToast({ title: '已确认', icon: 'success' });
+          fetchOrders(true);
+        } catch (e: any) {
+          uni.showToast({ title: e.message || '操作失败', icon: 'none' });
+        }
+      }
+    },
+  });
+}
+
+function handleReject(id: number) {
+  currentOrderId.value = id;
+  rejectReason.value = '';
+  showRejectModal.value = true;
+}
+
+function closeRejectModal() {
+  showRejectModal.value = false;
+  rejectReason.value = '';
+}
+
+async function submitReject() {
+  if (!rejectReason.value.trim()) {
+    uni.showToast({ title: '请输入拒绝原因', icon: 'none' });
+    return;
+  }
+
+  try {
+    await rejectOrder(currentOrderId.value, rejectReason.value);
+    uni.showToast({ title: '已拒绝', icon: 'success' });
+    showRejectModal.value = false;
+    fetchOrders(true);
+  } catch (e: any) {
+    uni.showToast({ title: e.message || '操作失败', icon: 'none' });
+  }
+}
+
+function handleCheckin(id: number) {
+  uni.showModal({
+    title: '办理入住',
+    content: '确认客户已到店办理入住？',
+    success: async (res) => {
+      if (res.confirm) {
+        try {
+          await checkinOrder(id);
+          uni.showToast({ title: '入住成功', icon: 'success' });
+          fetchOrders(true);
+        } catch (e: any) {
+          uni.showToast({ title: e.message || '操作失败', icon: 'none' });
+        }
+      }
+    },
+  });
+}
+
+onMounted(() => {
+  fetchOrders(true);
+});
+</script>
+
 async function handleConfirm(id: number) {
   uni.showModal({
     title: '提示',
@@ -228,100 +295,118 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-seller-orders {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #f5f5f5;
+  background: $bg-page;
 }
 
 .tab-bar {
   white-space: nowrap;
-  background: #fff;
-  padding: 20rpx 24rpx;
-  border-bottom: 1rpx solid #eee;
+  background: $bg-card;
+  padding: $spacing-lg $spacing-xl;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .tab-item {
   display: inline-block;
-  padding: 12rpx 28rpx;
-  margin-right: 16rpx;
-  font-size: 26rpx;
-  color: #666;
-  border-radius: 32rpx;
+  padding: $spacing-sm $spacing-2xl;
+  margin-right: $spacing-md;
+  font-size: $font-sm;
+  color: $text-secondary;
+  border-radius: $radius-base;
+  background: $bg-page;
+  border: 2rpx solid transparent;
+  transition: all 0.2s ease;
 
   &.active {
-    background: #fff1eb;
-    color: #FF6B35;
-    font-weight: 600;
+    background: $primary-bg;
+    color: $primary-color;
+    font-weight: $font-semibold;
+    border-color: $primary-color;
   }
 }
 
 .search-bar {
   display: flex;
-  padding: 16rpx 24rpx;
-  background: #fff;
-  gap: 16rpx;
+  padding: $spacing-md $spacing-xl;
+  background: $bg-card;
+  gap: $spacing-md;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .search-input {
   flex: 1;
   height: 64rpx;
-  background: #f5f5f5;
-  border-radius: 32rpx;
-  padding: 0 24rpx;
-  font-size: 26rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-xl;
+  font-size: $font-sm;
+  border: 2rpx solid $border-light;
+
+  &:focus {
+    border-color: $primary-color;
+  }
 }
 
 .search-btn {
   height: 64rpx;
   line-height: 64rpx;
-  padding: 0 32rpx;
-  background: #FF6B35;
+  padding: 0 $spacing-2xl;
+  background: $primary-color;
   color: #fff;
-  font-size: 26rpx;
-  border-radius: 32rpx;
+  font-size: $font-sm;
+  border-radius: $radius-base;
   border: none;
+  font-weight: $font-medium;
+
+  &:active {
+    background: $primary-dark;
+  }
 }
 
 .order-list {
   flex: 1;
-  padding: 24rpx;
+  padding: $spacing-xl;
 }
 
 .order-card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  margin-bottom: 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  margin-bottom: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .order-header {
-  padding-bottom: 16rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  padding-bottom: $spacing-md;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .order-no {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-xs;
+  color: $text-secondary;
 }
 
 .order-status {
-  font-size: 26rpx;
-  font-weight: 600;
+  font-size: $font-sm;
+  font-weight: $font-semibold;
 }
 
-.status-pending_pay { color: #faad14; }
-.status-pending_confirm { color: #1890ff; }
-.status-pending_checkin { color: #52c41a; }
-.status-checked_in { color: #FF6B35; }
-.status-completed { color: #52c41a; }
-.status-cancelled { color: #999; }
-.status-refunding { color: #ff4d4f; }
+.status-pending_pay { color: $warning-color; }
+.status-pending_confirm { color: $info-color; }
+.status-pending_checkin { color: $success-color; }
+.status-checked_in { color: $primary-color; }
+.status-completed { color: $success-color; }
+.status-cancelled { color: $text-tertiary; }
+.status-refunding { color: $error-color; }
 .status-refunded { color: #722ed1; }
 
 .order-body {
-  padding: 16rpx 0;
+  padding: $spacing-md 0;
 }
 
 .room-info-row {
@@ -331,84 +416,86 @@ onMounted(() => {
 }
 
 .room-name {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-md;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .order-amount {
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-size: $font-lg;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .date-info {
-  margin-top: 12rpx;
+  margin-top: $spacing-sm;
 }
 
 .date-text {
-  font-size: 26rpx;
-  color: #666;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .guest-info {
   display: flex;
-  gap: 24rpx;
-  margin-top: 12rpx;
+  gap: $spacing-xl;
+  margin-top: $spacing-sm;
 }
 
 .guest-name {
-  font-size: 26rpx;
-  color: #333;
+  font-size: $font-sm;
+  color: $text-primary;
 }
 
 .guest-phone {
-  font-size: 26rpx;
-  color: #999;
+  font-size: $font-sm;
+  color: $text-secondary;
 }
 
 .order-footer {
-  padding-top: 16rpx;
-  border-top: 1rpx solid #f0f0f0;
+  padding-top: $spacing-md;
+  border-top: 1rpx solid $border-light;
 }
 
 .order-time {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-xs;
+  color: $text-secondary;
 }
 
 .order-actions {
   display: flex;
-  gap: 16rpx;
+  gap: $spacing-md;
 }
 
 .action-btn {
-  font-size: 24rpx;
-  border-radius: 32rpx;
-  padding: 0 24rpx;
+  font-size: $font-xs;
+  border-radius: $radius-base;
+  padding: 0 $spacing-xl;
+  border: 2rpx solid;
 
   &.primary {
-    background: #FF6B35;
+    background: $primary-color;
     color: #fff;
+    border-color: $primary-color;
   }
 
   &.danger {
-    background: #fff;
-    color: #ff4d4f;
-    border: 1rpx solid #ff4d4f;
+    background: $bg-card;
+    color: $error-color;
+    border-color: $error-color;
   }
 }
 
 .empty {
   text-align: center;
   padding: 100rpx 0;
-  color: #999;
+  color: $text-secondary;
 }
 
 .loading {
   text-align: center;
-  padding: 40rpx 0;
-  color: #999;
+  padding: $spacing-2xl 0;
+  color: $text-secondary;
 }
 
 /* 拒绝弹窗 */
@@ -427,63 +514,72 @@ onMounted(() => {
 
 .modal-panel {
   width: 80%;
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 32rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .modal-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
 }
 
 .modal-close {
-  font-size: 40rpx;
-  color: #999;
+  font-size: $font-2xl;
+  color: $text-secondary;
 }
 
 .modal-body {
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .reject-input {
   width: 100%;
   height: 160rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 16rpx;
-  font-size: 28rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: $spacing-md;
+  font-size: $font-base;
+  border: 2rpx solid $border-light;
+
+  &:focus {
+    border-color: $primary-color;
+  }
 }
 
 .modal-footer {
   display: flex;
-  gap: 24rpx;
+  gap: $spacing-xl;
 }
 
 .modal-btn {
   flex: 1;
   height: 80rpx;
   line-height: 80rpx;
-  font-size: 30rpx;
-  border-radius: 40rpx;
+  font-size: $font-md;
+  border-radius: $radius-base;
   border: none;
 
   &.cancel {
-    background: #f5f5f5;
-    color: #666;
+    background: $bg-page;
+    color: $text-secondary;
   }
 
   &.confirm {
-    background: #ff4d4f;
+    background: $error-color;
     color: #fff;
+
+    &:active {
+      background: darken($error-color, 5%);
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/apps/miniapp/src/pages/seller/register.vue b/apps/miniapp/src/pages/seller/register.vue
index 008cc08..5f5d94d 100644
--- a/apps/miniapp/src/pages/seller/register.vue
+++ b/apps/miniapp/src/pages/seller/register.vue
@@ -1,18 +1,10 @@
 <template>
   <view class="page-seller-register">
-    <!-- 头部 -->
-    <view class="page-header">
-      <view class="back-btn" @tap="goBack">
-        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
-      </view>
-      <text class="header-title">{{ mode === 'register' ? '商家入驻' : '商家登录' }}</text>
-      <view class="placeholder"></view>
-    </view>
-
+    
     <!-- 欢迎区域 -->
     <view class="welcome-section">
       <view class="welcome-icon">
-        <u-icon name="home-fill" size="40" color="#ff6b35"></u-icon>
+        <u-icon name="home-fill" size="70" color="#3B82F6"></u-icon>
       </view>
       <text class="welcome-title">{{ mode === 'register' ? '欢迎入驻品住会' : '欢迎回来' }}</text>
       <text class="welcome-subtitle">{{ mode === 'register' ? '开通店铺，发布房源，开始接单' : '登录商家中心，管理您的店铺' }}</text>
@@ -23,10 +15,7 @@
       <!-- 注册表单 -->
       <view v-if="mode === 'register'" class="form">
         <view class="form-item">
-          <view class="item-label">
-            <u-icon name="phone-fill" size="16" color="#ff6b35"></u-icon>
-            <text class="label-text">手机号</text>
-          </view>
+          <text class="label-text">手机号</text>
           <input
             class="item-input"
             type="number"
@@ -38,10 +27,7 @@
         </view>
 
         <view class="form-item">
-          <view class="item-label">
-            <u-icon name="lock-fill" size="16" color="#ff6b35"></u-icon>
-            <text class="label-text">密码</text>
-          </view>
+          <text class="label-text">密码</text>
           <input
             class="item-input"
             type="password"
@@ -53,10 +39,7 @@
         </view>
 
         <view class="form-item">
-          <view class="item-label">
-            <u-icon name="chat-fill" size="16" color="#ff6b35"></u-icon>
-            <text class="label-text">验证码</text>
-          </view>
+          <text class="label-text">验证码</text>
           <view class="code-row">
             <input
               class="item-input code-input"
@@ -77,10 +60,7 @@
         </view>
 
         <view class="form-item">
-          <view class="item-label">
-            <u-icon name="account-fill" size="16" color="#ff6b35"></u-icon>
-            <text class="label-text">联系人姓名</text>
-          </view>
+          <text class="label-text">联系人姓名</text>
           <input
             class="item-input"
             type="text"
@@ -92,10 +72,7 @@
         </view>
 
         <view class="form-item">
-          <view class="item-label">
-            <u-icon name="email-fill" size="16" color="#999"></u-icon>
-            <text class="label-text optional">邮箱（选填）</text>
-          </view>
+          <text class="label-text optional">邮箱</text>
           <input
             class="item-input"
             type="text"
@@ -109,7 +86,7 @@
         <view class="agreement-row">
           <checkbox-group @change="onAgreementChange">
             <label class="agreement-label">
-              <checkbox :checked="agreed" color="#ff6b35" />
+              <checkbox :checked="agreed" color="#3B82F6" />
               <text class="agreement-text">
                 我已阅读并同意
                 <text class="agreement-link" @tap.stop="showAgreement('商家服务协议')">《商家服务协议》</text>
@@ -133,10 +110,7 @@
       <!-- 登录表单 -->
       <view v-else class="form">
         <view class="form-item">
-          <view class="item-label">
-            <u-icon name="phone-fill" size="16" color="#ff6b35"></u-icon>
-            <text class="label-text">手机号</text>
-          </view>
+          <text class="label-text">手机号</text>
           <input
             class="item-input"
             type="number"
@@ -148,10 +122,7 @@
         </view>
 
         <view class="form-item">
-          <view class="item-label">
-            <u-icon name="chat-fill" size="16" color="#ff6b35"></u-icon>
-            <text class="label-text">验证码</text>
-          </view>
+          <text class="label-text">验证码</text>
           <view class="code-row">
             <input
               class="item-input code-input"
@@ -175,7 +146,7 @@
         <view class="agreement-row">
           <checkbox-group @change="onAgreementChange">
             <label class="agreement-label">
-              <checkbox :checked="agreed" color="#ff6b35" />
+              <checkbox :checked="agreed" color="#3B82F6" />
               <text class="agreement-text">
                 我已阅读并同意
                 <text class="agreement-link" @tap.stop="showAgreement('商家服务协议')">《商家服务协议》</text>
@@ -407,40 +378,12 @@ function goBack() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-seller-register {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding-bottom: 40rpx;
-}
-
-/* 页面头部 */
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20rpx 32rpx;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-}
-
-.back-btn {
-  width: 64rpx;
-  height: 64rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f7f7f7;
-  border-radius: 50%;
-}
-
-.header-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
-}
-
-.placeholder {
-  width: 64rpx;
+  background: #FFFFFF;
+  padding: 80rpx 48rpx 48rpx;
 }
 
 /* 欢迎区域 */
@@ -448,41 +391,32 @@ function goBack() {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 60rpx 32rpx 40rpx;
+  margin-bottom: 80rpx;
 }
 
 .welcome-icon {
-  width: 120rpx;
-  height: 120rpx;
-  background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   margin-bottom: 32rpx;
-  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.15);
 }
 
 .welcome-title {
-  font-size: 40rpx;
+  font-size: 48rpx;
   font-weight: 600;
-  color: #1a1a1a;
+  color: #0066CC;
   margin-bottom: 16rpx;
+  letter-spacing: -0.5rpx;
 }
 
 .welcome-subtitle {
-  font-size: 26rpx;
-  color: #999;
+  font-size: 28rpx;
+  color: #6B7280;
   text-align: center;
+  line-height: 1.5;
+  font-weight: 400;
 }
 
 /* 表单卡片 */
 .form-card {
-  margin: 0 32rpx;
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 40rpx 32rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  width: 100%;
 }
 
 .form {
@@ -490,50 +424,43 @@ function goBack() {
 }
 
 .form-item {
-  margin-bottom: 32rpx;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-}
-
-.item-label {
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-  margin-bottom: 16rpx;
+  margin-bottom: 40rpx;
 }
 
 .label-text {
-  font-size: 28rpx;
-  color: #333;
+  display: block;
+  font-size: 26rpx;
+  color: #374151;
   font-weight: 500;
+  margin-bottom: 16rpx;
+  letter-spacing: -0.3rpx;
 
   &.optional {
-    color: #999;
+    color: #9CA3AF;
+    font-weight: 400;
   }
 }
 
 .item-input {
   width: 100%;
-  height: 88rpx;
-  background: #f7f7f7;
-  border-radius: 16rpx;
-  padding: 0 24rpx;
-  font-size: 28rpx;
-  color: #333;
+  height: 96rpx;
+  background: #F3F4F6;
   border: 2rpx solid transparent;
-  transition: all 0.3s ease;
+  border-radius: 16rpx;
+  padding: 0 28rpx;
+  font-size: 30rpx;
+  color: #111827;
+  transition: all 0.2s ease;
   box-sizing: border-box;
 
   &:focus {
-    background: #fff;
-    border-color: #ff6b35;
+    background: #EFF6FF;
+    border-color: #3B82F6;
   }
 }
 
 .input-placeholder {
-  color: #bbb;
+  color: #9CA3AF;
 }
 
 .code-row {
@@ -549,95 +476,94 @@ function goBack() {
 .code-btn {
   flex-shrink: 0;
   width: 200rpx;
-  height: 88rpx;
-  background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
+  height: 96rpx;
+  background: #3B82F6;
   border-radius: 16rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
 
   &.disabled {
-    background: #e5e5e5;
-    box-shadow: none;
+    background: #E5E7EB;
 
     .code-btn-text {
-      color: #999;
+      color: #9CA3AF;
     }
   }
 
   &:active:not(.disabled) {
     transform: scale(0.98);
+    background: #2563EB;
   }
 }
 
 .code-btn-text {
   font-size: 26rpx;
-  color: #fff;
-  font-weight: 600;
+  color: #FFFFFF;
+  font-weight: 500;
 }
 
 /* 协议 */
 .agreement-row {
-  margin: 32rpx 0;
+  margin: 48rpx 0;
 }
 
 .agreement-label {
   display: flex;
   align-items: flex-start;
-  gap: 12rpx;
+  gap: 16rpx;
 
   checkbox {
     margin-top: 4rpx;
+    transform: scale(1.15);
   }
 }
 
 .agreement-text {
   flex: 1;
   font-size: 24rpx;
-  color: #666;
+  color: #6B7280;
   line-height: 1.6;
 }
 
 .agreement-link {
-  color: #ff6b35;
+  color: #3B82F6;
   font-weight: 500;
 }
 
 /* 提交按钮 */
 .submit-btn {
   width: 100%;
-  height: 96rpx;
-  background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
-  border-radius: 48rpx;
+  height: 104rpx;
+  background: #3B82F6;
+  border-radius: 16rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.35);
   border: none;
-  margin-top: 16rpx;
-  transition: all 0.3s ease;
+  margin-top: 24rpx;
+  transition: all 0.2s ease;
 
   &:active:not([disabled]) {
-    transform: translateY(2rpx);
-    box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.3);
+    transform: scale(0.98);
+    background: #2563EB;
   }
 
   &[disabled] {
-    background: #e5e5e5;
-    box-shadow: none;
+    background: #E5E7EB;
 
     .btn-text {
-      color: #999;
+      color: #9CA3AF;
     }
   }
 }
 
 .btn-text {
   font-size: 32rpx;
-  color: #fff;
-  font-weight: 600;
+  color: #FFFFFF;
+  font-weight: 500;
+  letter-spacing: -0.3rpx;
 }
 
 /* 切换模式 */
@@ -645,20 +571,18 @@ function goBack() {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 32rpx;
-  padding-top: 32rpx;
-  border-top: 1rpx solid #f5f5f5;
+  margin-top: 48rpx;
 }
 
 .switch-text {
-  font-size: 26rpx;
-  color: #999;
+  font-size: 28rpx;
+  color: #6B7280;
 }
 
 .switch-link {
-  font-size: 26rpx;
-  color: #ff6b35;
-  font-weight: 600;
+  font-size: 28rpx;
+  color: #3B82F6;
+  font-weight: 500;
   margin-left: 8rpx;
 }
 </style>
\ No newline at end of file
diff --git a/apps/miniapp/src/pages/seller/room-calendar.vue b/apps/miniapp/src/pages/seller/room-calendar.vue
index 0d430be..97526f9 100644
--- a/apps/miniapp/src/pages/seller/room-calendar.vue
+++ b/apps/miniapp/src/pages/seller/room-calendar.vue
@@ -305,34 +305,38 @@ onShow(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-room-calendar {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding-bottom: 40rpx;
+  background: $bg-page;
+  padding-bottom: $spacing-2xl;
 }
 
 .room-selector {
-  padding: 24rpx;
-  background: #fff;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .picker-value {
   height: 80rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 20rpx;
-  font-size: 28rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-lg;
+  font-size: $font-base;
   display: flex;
   align-items: center;
+  border: 2rpx solid $border-light;
 }
 
 .month-bar {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24rpx;
-  background: #fff;
-  border-top: 1rpx solid #f0f0f0;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .month-btn {
@@ -341,37 +345,37 @@ onShow(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32rpx;
-  color: #FF6B35;
-  font-weight: 700;
+  font-size: $font-lg;
+  color: $primary-color;
+  font-weight: $font-bold;
 }
 
 .month-text {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
-  margin: 0 24rpx;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0 $spacing-xl;
 }
 
 .week-header {
   display: flex;
-  background: #fff;
-  padding: 12rpx 0;
-  border-top: 1rpx solid #f0f0f0;
+  background: $bg-card;
+  padding: $spacing-sm 0;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .week-day {
   flex: 1;
   text-align: center;
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-xs;
+  color: $text-secondary;
 }
 
 .calendar-grid {
   display: flex;
   flex-wrap: wrap;
-  background: #fff;
-  padding: 0 8rpx 16rpx;
+  background: $bg-card;
+  padding: 0 $spacing-xs $spacing-md;
 }
 
 .calendar-cell {
@@ -379,7 +383,7 @@ onShow(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 12rpx 0;
+  padding: $spacing-sm 0;
   min-height: 100rpx;
 
   &.empty {
@@ -387,7 +391,7 @@ onShow(() => {
   }
 
   &.today .cell-date {
-    background: #FF6B35;
+    background: $primary-color;
     color: #fff;
     border-radius: 50%;
     width: 48rpx;
@@ -402,51 +406,52 @@ onShow(() => {
   }
 
   &.unavailable .cell-price {
-    color: #ff4d4f;
+    color: $error-color;
   }
 }
 
 .cell-date {
-  font-size: 26rpx;
-  color: #333;
+  font-size: $font-sm;
+  color: $text-primary;
   margin-bottom: 4rpx;
 }
 
 .cell-price {
-  font-size: 22rpx;
-  color: #FF6B35;
-  font-weight: 600;
+  font-size: $font-xs;
+  color: $primary-color;
+  font-weight: $font-semibold;
 }
 
 .cell-stock {
-  font-size: 20rpx;
-  color: #52c41a;
+  font-size: $font-xs;
+  color: $success-color;
 
   &.zero {
-    color: #ff4d4f;
+    color: $error-color;
   }
 }
 
 .cell-empty-tag {
   font-size: 18rpx;
-  color: #999;
-  background: #f5f5f5;
-  padding: 2rpx 8rpx;
-  border-radius: 4rpx;
+  color: $text-tertiary;
+  background: $bg-page;
+  padding: 2rpx $spacing-xs;
+  border-radius: $radius-xs;
   margin-top: 4rpx;
 }
 
 .batch-bar {
-  margin: 24rpx;
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
+  margin: $spacing-xl;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .batch-row {
   display: flex;
-  gap: 16rpx;
-  margin-bottom: 16rpx;
+  gap: $spacing-md;
+  margin-bottom: $spacing-md;
 }
 
 .batch-field {
@@ -454,40 +459,51 @@ onShow(() => {
 }
 
 .batch-label {
-  font-size: 24rpx;
-  color: #666;
-  margin-bottom: 8rpx;
+  font-size: $font-xs;
+  color: $text-secondary;
+  margin-bottom: $spacing-xs;
   display: block;
 }
 
 .batch-picker {
   height: 72rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 16rpx;
-  font-size: 26rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-md;
+  font-size: $font-sm;
   display: flex;
   align-items: center;
-  color: #333;
+  color: $text-primary;
+  border: 2rpx solid $border-light;
 }
 
 .batch-input {
   height: 72rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 16rpx;
-  font-size: 26rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-md;
+  font-size: $font-sm;
+  border: 2rpx solid $border-light;
+
+  &:focus {
+    border-color: $primary-color;
+  }
 }
 
 .batch-btn {
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   color: #fff;
-  border-radius: 44rpx;
+  border-radius: $radius-base;
   height: 80rpx;
   line-height: 80rpx;
-  font-size: 28rpx;
-  font-weight: 600;
+  font-size: $font-base;
+  font-weight: $font-semibold;
   border: none;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: $primary-dark;
+  }
 }
 
 .modal-mask {
@@ -505,28 +521,28 @@ onShow(() => {
 
 .modal-content {
   width: 600rpx;
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 40rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
 }
 
 .modal-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
   text-align: center;
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-2xl;
 }
 
 .modal-field {
   display: flex;
   align-items: center;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-xl;
 }
 
 .modal-label {
-  font-size: 28rpx;
-  color: #666;
+  font-size: $font-base;
+  color: $text-secondary;
   width: 100rpx;
   flex-shrink: 0;
 }
@@ -534,48 +550,58 @@ onShow(() => {
 .modal-input {
   flex: 1;
   height: 72rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 16rpx;
-  font-size: 28rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-md;
+  font-size: $font-base;
+  border: 2rpx solid $border-light;
+
+  &:focus {
+    border-color: $primary-color;
+  }
 }
 
 .modal-picker {
   flex: 1;
   height: 72rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 16rpx;
-  font-size: 28rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-md;
+  font-size: $font-base;
   display: flex;
   align-items: center;
+  border: 2rpx solid $border-light;
 }
 
 .modal-actions {
   display: flex;
-  gap: 16rpx;
-  margin-top: 32rpx;
+  gap: $spacing-md;
+  margin-top: $spacing-2xl;
 }
 
 .modal-cancel {
   flex: 1;
   height: 80rpx;
   line-height: 80rpx;
-  border-radius: 40rpx;
-  font-size: 28rpx;
-  border: 1rpx solid #ddd;
-  background: #fff;
-  color: #666;
+  border-radius: $radius-base;
+  font-size: $font-base;
+  border: 2rpx solid $border-base;
+  background: $bg-card;
+  color: $text-secondary;
 }
 
 .modal-confirm {
   flex: 1;
   height: 80rpx;
   line-height: 80rpx;
-  border-radius: 40rpx;
-  font-size: 28rpx;
-  background: #FF6B35;
+  border-radius: $radius-base;
+  font-size: $font-base;
+  background: $primary-color;
   color: #fff;
   border: none;
+
+  &:active {
+    background: $primary-dark;
+  }
 }
 </style>
diff --git a/apps/miniapp/src/pages/seller/room-form.vue b/apps/miniapp/src/pages/seller/room-form.vue
index 85b8019..b08c424 100644
--- a/apps/miniapp/src/pages/seller/room-form.vue
+++ b/apps/miniapp/src/pages/seller/room-form.vue
@@ -265,21 +265,24 @@ async function handleSubmit() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-room-form {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding: 24rpx;
+  background: $bg-page;
+  padding: $spacing-xl;
   padding-bottom: 160rpx;
 }
 
 .form-section {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .form-item {
-  margin-bottom: 28rpx;
+  margin-bottom: $spacing-2xl;
 
   &.half {
     flex: 1;
@@ -291,60 +294,76 @@ async function handleSubmit() {
 
 .form-row {
   display: flex;
-  gap: 16rpx;
+  gap: $spacing-md;
 }
 
 .label {
-  font-size: 28rpx;
-  color: #333;
-  margin-bottom: 12rpx;
+  font-size: $font-base;
+  color: $text-primary;
+  margin-bottom: $spacing-sm;
   display: block;
+  font-weight: $font-medium;
 
   &.required::before {
     content: '*';
-    color: #ff4d4f;
-    margin-right: 8rpx;
+    color: $primary-color;
+    margin-right: $spacing-xs;
   }
 }
 
 .input {
   width: 100%;
   height: 80rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 20rpx;
-  font-size: 28rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-lg;
+  font-size: $font-base;
+  border: 2rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: $primary-color;
+    background: $bg-card;
+  }
 }
 
 .picker-value {
   height: 80rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 20rpx;
-  font-size: 28rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-lg;
+  font-size: $font-base;
   display: flex;
   align-items: center;
+  border: 2rpx solid $border-light;
 }
 
 .textarea {
   width: 100%;
   height: 160rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 20rpx;
-  font-size: 28rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: $spacing-lg;
+  font-size: $font-base;
+  border: 2rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: $primary-color;
+    background: $bg-card;
+  }
 }
 
 .hint {
-  font-size: 22rpx;
-  color: #999;
-  margin-top: 8rpx;
+  font-size: $font-xs;
+  color: $text-secondary;
+  margin-top: $spacing-xs;
 }
 
 .image-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 16rpx;
+  gap: $spacing-md;
 }
 
 .image-item {
@@ -356,7 +375,8 @@ async function handleSubmit() {
 .image-preview {
   width: 100%;
   height: 100%;
-  border-radius: 12rpx;
+  border-radius: $radius-base;
+  border: 1rpx solid $border-light;
 }
 
 .image-delete {
@@ -365,10 +385,10 @@ async function handleSubmit() {
   right: -12rpx;
   width: 36rpx;
   height: 36rpx;
-  background: #ff4d4f;
+  background: $error-color;
   border-radius: 50%;
   color: #fff;
-  font-size: 24rpx;
+  font-size: $font-xs;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -377,35 +397,38 @@ async function handleSubmit() {
 .image-add {
   width: 160rpx;
   height: 160rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 2rpx dashed $border-base;
 }
 
 .add-icon {
   font-size: 48rpx;
-  color: #999;
+  color: $text-tertiary;
 }
 
 .facility-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 12rpx;
+  gap: $spacing-sm;
 }
 
 .facility-tag {
-  padding: 10rpx 24rpx;
-  background: #f5f5f5;
-  border-radius: 24rpx;
-  font-size: 24rpx;
-  color: #666;
+  padding: 10rpx $spacing-xl;
+  background: $bg-page;
+  border-radius: $radius-base;
+  font-size: $font-xs;
+  color: $text-secondary;
+  border: 2rpx solid $border-light;
+  transition: all 0.2s ease;
 
   &.active {
-    background: #fff1eb;
-    color: #FF6B35;
-    border: 1rpx solid #FF6B35;
+    background: $primary-bg;
+    color: $primary-color;
+    border-color: $primary-color;
   }
 }
 
@@ -415,15 +438,21 @@ async function handleSubmit() {
   left: 0;
   right: 0;
   height: 100rpx;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   color: #fff;
   border-radius: 0;
-  font-size: 32rpx;
-  font-weight: 600;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
   border: none;
+  transition: all 0.2s ease;
+
+  &:active:not([disabled]) {
+    background: $primary-dark;
+  }
 
   &[disabled] {
-    opacity: 0.6;
+    background: $bg-disabled;
+    color: $text-disabled;
   }
 }
 </style>
diff --git a/apps/miniapp/src/pages/seller/rooms.vue b/apps/miniapp/src/pages/seller/rooms.vue
index a610e47..428c49d 100644
--- a/apps/miniapp/src/pages/seller/rooms.vue
+++ b/apps/miniapp/src/pages/seller/rooms.vue
@@ -10,44 +10,44 @@
     <!-- 房源列表 -->
     <scroll-view scroll-y class="room-list" @scrolltolower="loadMore">
       <view class="list-content">
-        <view v-for="room in roomList" :key="room.id" class="room-card" @tap="goEdit(room.id)">
-          <image class="room-cover" :src="room.coverImage || '/static/default-room.png'" mode="aspectFill" />
-          <view class="room-info">
-            <text class="room-name">{{ room.name }}</text>
-            <view class="room-meta">
-              <text class="room-type">{{ typeLabels[room.type] }}</text>
-              <text class="room-price">¥{{ room.price }}/晚</text>
-            </view>
-            <view class="room-status-row">
-              <view class="status-tags">
-                <text :class="['room-status', room.status]">{{ room.status === 'on_sale' ? '在售' : '已下架' }}</text>
-                <text :class="['audit-tag', room.auditStatus]">{{ auditLabels[room.auditStatus] || '未知' }}</text>
+        <base-card v-for="room in roomList" :key="room.id" class="room-card" @click="goEdit(room.id)">
+          <view class="room-content">
+            <image class="room-cover" :src="room.coverImage || '/static/default-room.png'" mode="aspectFill" />
+            <view class="room-info">
+              <text class="room-name">{{ room.name }}</text>
+              <view class="room-meta">
+                <text class="room-type">{{ typeLabels[room.type] }}</text>
+                <price-tag :price="room.price" size="small" unit="/晚" />
+              </view>
+              <view class="room-status-row">
+                <view class="status-tags">
+                  <status-badge :status="room.status === 'on_sale' ? 'on_sale' : 'off_sale'" :text="room.status === 'on_sale' ? '在售' : '已下架'" size="small" />
+                  <status-badge :status="room.auditStatus" :text="auditLabels[room.auditStatus]" size="small" variant="outline" />
+                </view>
+                <rating-stars :score="room.rating || 0" size="small" :show-score="true" />
+              </view>
+              <view v-if="room.auditStatus === 'rejected' && room.auditRejectReason" class="reject-reason">
+                拒绝原因：{{ room.auditRejectReason }}
               </view>
-              <text class="room-rating">{{ room.rating }}分</text>
-            </view>
-            <view v-if="room.auditStatus === 'rejected' && room.auditRejectReason" class="reject-reason">
-              拒绝原因：{{ room.auditRejectReason }}
             </view>
           </view>
-          <view class="room-actions" v-if="room.auditStatus !== 'pending'">
-            <view class="action-btn calendar" @tap.stop="goCalendar(room.id)">日历</view>
-            <view v-if="room.status === 'on_sale'" class="action-btn off" @tap.stop="handleOffSale(room.id)">下架</view>
-            <view v-else class="action-btn on" @tap.stop="handleOnSale(room.id)">上架</view>
+          <view class="room-actions" v-if="room.auditStatus !== 'pending'" @click.stop>
+            <base-button type="outline" size="small" @click="goCalendar(room.id)">日历</base-button>
+            <base-button v-if="room.status === 'on_sale'" type="text" size="small" @click="handleOffSale(room.id)">下架</base-button>
+            <base-button v-else type="primary" size="small" @click="handleOnSale(room.id)">上架</base-button>
           </view>
-        </view>
+        </base-card>
       </view>
 
-      <view v-if="loading" class="loading-more">加载中...</view>
+      <loading-state v-if="loading" />
       <view v-if="!hasMore && roomList.length > 0" class="no-more">没有更多了</view>
-      <view v-if="roomList.length === 0 && !loading" class="empty">
-        <text class="empty-text">暂无房源，点击下方按钮添加</text>
-      </view>
+      <empty-state v-if="roomList.length === 0 && !loading" type="room" text="暂无房源" description="点击下方按钮添加房源" />
     </scroll-view>
 
     <!-- 添加按钮 -->
-    <view class="add-btn" @tap="goCreate">
-      <text class="add-text">+ 添加房源</text>
-    </view>
+    <base-button type="primary" size="large" class="add-btn" @click="goCreate">
+      + 添加房源
+    </base-button>
   </view>
 </template>
 
@@ -55,6 +55,13 @@
 import { ref } from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 import { getMerchantRooms, removeMerchantRoom, updateMerchantRoom } from '@/api/seller/room';
+import BaseCard from '@/components/base/BaseCard.vue';
+import BaseButton from '@/components/base/BaseButton.vue';
+import StatusBadge from '@/components/base/StatusBadge.vue';
+import EmptyState from '@/components/base/EmptyState.vue';
+import LoadingState from '@/components/base/LoadingState.vue';
+import PriceTag from '@/components/business/PriceTag.vue';
+import RatingStars from '@/components/business/RatingStars.vue';
 
 const typeLabels: Record<string, string> = { hotel: '酒店', homestay: '民宿', apartment: '公寓', hostel: '青旅' };
 const auditLabels: Record<string, string> = { pending: '审核中', approved: '已通过', rejected: '已拒绝' };
@@ -139,9 +146,11 @@ onShow(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-merchant-rooms {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-page;
   display: flex;
   flex-direction: column;
   padding-bottom: 120rpx;
@@ -149,22 +158,25 @@ onShow(() => {
 
 .filter-bar {
   display: flex;
-  background: #fff;
-  padding: 16rpx 24rpx;
-  gap: 16rpx;
+  background: $bg-card;
+  padding: $spacing-md $spacing-xl;
+  gap: $spacing-md;
+  border-bottom: 1rpx solid $border-light;
 }
 
 .filter-item {
-  padding: 12rpx 32rpx;
-  border-radius: 32rpx;
-  font-size: 26rpx;
-  color: #666;
-  background: #f5f5f5;
+  padding: $spacing-sm $spacing-2xl;
+  border-radius: $radius-base;
+  font-size: $font-sm;
+  color: $text-secondary;
+  background: $bg-page;
+  border: 2rpx solid transparent;
+  transition: all 0.2s ease;
 
   &.active {
-    background: #FF6B35;
+    background: $primary-color;
     color: #fff;
-    font-weight: 600;
+    font-weight: $font-semibold;
   }
 }
 
@@ -173,16 +185,17 @@ onShow(() => {
 }
 
 .list-content {
-  padding: 16rpx 24rpx;
+  padding: $spacing-md $spacing-xl;
 }
 
 .room-card {
   display: flex;
-  background: #fff;
-  border-radius: 16rpx;
-  margin-bottom: 16rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  margin-bottom: $spacing-md;
   overflow: hidden;
   position: relative;
+  border: 1rpx solid $border-light;
 }
 
 .room-cover {
@@ -193,16 +206,16 @@ onShow(() => {
 
 .room-info {
   flex: 1;
-  padding: 16rpx 20rpx;
+  padding: $spacing-md $spacing-lg;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .room-name {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
@@ -213,121 +226,122 @@ onShow(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 8rpx;
+  margin-top: $spacing-xs;
 }
 
 .room-type {
-  font-size: 24rpx;
-  color: #FF6B35;
-  background: #fff1eb;
-  padding: 4rpx 12rpx;
-  border-radius: 6rpx;
+  font-size: $font-xs;
+  color: $primary-color;
+  background: $primary-bg;
+  padding: 4rpx $spacing-sm;
+  border-radius: $radius-xs;
 }
 
 .room-price {
-  font-size: 28rpx;
-  font-weight: 700;
-  color: #FF6B35;
+  font-size: $font-base;
+  font-weight: $font-bold;
+  color: $primary-color;
 }
 
 .room-status-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 8rpx;
+  margin-top: $spacing-xs;
 }
 
 .status-tags {
   display: flex;
-  gap: 8rpx;
+  gap: $spacing-xs;
   align-items: center;
 }
 
 .audit-tag {
-  font-size: 22rpx;
-  padding: 4rpx 12rpx;
-  border-radius: 8rpx;
+  font-size: $font-xs;
+  padding: 4rpx $spacing-sm;
+  border-radius: $radius-xs;
 
   &.pending {
-    color: #fa8c16;
-    background: #fff7e6;
+    color: $warning-color;
+    background: rgba($warning-color, 0.1);
   }
   &.approved {
-    color: #52c41a;
-    background: #f6ffed;
+    color: $success-color;
+    background: rgba($success-color, 0.1);
   }
   &.rejected {
-    color: #ff4d4f;
-    background: #fff1f0;
+    color: $error-color;
+    background: rgba($error-color, 0.1);
   }
 }
 
 .reject-reason {
-  font-size: 22rpx;
-  color: #ff4d4f;
-  background: #fff1f0;
-  padding: 8rpx 12rpx;
-  border-radius: 8rpx;
-  margin-top: 8rpx;
+  font-size: $font-xs;
+  color: $error-color;
+  background: rgba($error-color, 0.1);
+  padding: $spacing-xs $spacing-sm;
+  border-radius: $radius-xs;
+  margin-top: $spacing-xs;
 }
 
 .room-status {
-  font-size: 22rpx;
-  padding: 4rpx 12rpx;
-  border-radius: 8rpx;
+  font-size: $font-xs;
+  padding: 4rpx $spacing-sm;
+  border-radius: $radius-xs;
 
   &.on_sale {
-    color: #52c41a;
-    background: #f6ffed;
+    color: $success-color;
+    background: rgba($success-color, 0.1);
   }
   &.off_sale {
-    color: #999;
-    background: #f5f5f5;
+    color: $text-tertiary;
+    background: $bg-page;
   }
 }
 
 .room-rating {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-xs;
+  color: $text-secondary;
 }
 
 .room-actions {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 16rpx;
+  padding: 0 $spacing-md;
 }
 
 .action-btn {
-  padding: 12rpx 20rpx;
-  border-radius: 8rpx;
-  font-size: 24rpx;
+  padding: $spacing-sm $spacing-lg;
+  border-radius: $radius-xs;
+  font-size: $font-xs;
   text-align: center;
+  border: 2rpx solid;
 
   &.off {
-    color: #ff4d4f;
-    background: #fff1f0;
-    border: 1rpx solid #ffccc7;
+    color: $error-color;
+    background: rgba($error-color, 0.05);
+    border-color: $error-color;
   }
   &.on {
-    color: #FF6B35;
-    background: #fff1eb;
-    border: 1rpx solid #ffd8c4;
+    color: $primary-color;
+    background: $primary-bg;
+    border-color: $primary-color;
   }
   &.calendar {
-    color: #1890ff;
-    background: #e6f7ff;
-    border: 1rpx solid #91d5ff;
-    margin-bottom: 8rpx;
+    color: $info-color;
+    background: rgba($info-color, 0.05);
+    border-color: $info-color;
+    margin-bottom: $spacing-xs;
   }
 }
 
 .loading-more,
 .no-more {
   text-align: center;
-  padding: 40rpx 0;
-  color: #999;
-  font-size: 26rpx;
+  padding: $spacing-2xl 0;
+  color: $text-secondary;
+  font-size: $font-sm;
 }
 
 .empty {
@@ -337,8 +351,8 @@ onShow(() => {
 }
 
 .empty-text {
-  font-size: 28rpx;
-  color: #999;
+  font-size: $font-base;
+  color: $text-secondary;
 }
 
 .add-btn {
@@ -347,15 +361,15 @@ onShow(() => {
   left: 0;
   right: 0;
   height: 100rpx;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .add-text {
-  font-size: 32rpx;
-  font-weight: 600;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
   color: #fff;
 }
 </style>
diff --git a/apps/miniapp/src/pages/seller/shop-create.vue b/apps/miniapp/src/pages/seller/shop-create.vue
index fd6e424..c4e5998 100644
--- a/apps/miniapp/src/pages/seller/shop-create.vue
+++ b/apps/miniapp/src/pages/seller/shop-create.vue
@@ -739,36 +739,38 @@ async function handleSubmit() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-shop-create {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding: 24rpx;
+  background: $bg-page;
+  padding: $spacing-xl;
   padding-bottom: 200rpx;
 }
 
 .form-section {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 32rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-2xl;
+  margin-bottom: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .section-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 8rpx;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin-bottom: $spacing-xs;
 }
 
 .section-desc {
-  font-size: 24rpx;
-  color: #999;
-  margin-bottom: 24rpx;
+  font-size: $font-xs;
+  color: $text-secondary;
+  margin-bottom: $spacing-xl;
 }
 
 .form-item {
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-2xl;
 
   &:last-child {
     margin-bottom: 0;
@@ -776,45 +778,59 @@ async function handleSubmit() {
 }
 
 .label {
-  font-size: 28rpx;
-  color: #333;
-  margin-bottom: 16rpx;
+  font-size: $font-base;
+  color: $text-primary;
+  margin-bottom: $spacing-md;
   display: block;
-  font-weight: 500;
+  font-weight: $font-medium;
 
   &.required::before {
     content: '*';
-    color: #ff6b35;
-    margin-right: 8rpx;
+    color: $primary-color;
+    margin-right: $spacing-xs;
   }
 }
 
 .input {
   width: 100%;
   height: 88rpx;
-  background: #f7f7f7;
-  border-radius: 16rpx;
-  padding: 0 24rpx;
-  font-size: 28rpx;
-  color: #333;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-xl;
+  font-size: $font-base;
+  color: $text-primary;
   box-sizing: border-box;
+  border: 2rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: $primary-color;
+    background: $bg-card;
+  }
 }
 
 .textarea {
   width: 100%;
   min-height: 160rpx;
-  background: #f7f7f7;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  font-size: 28rpx;
-  color: #333;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: $spacing-xl;
+  font-size: $font-base;
+  color: $text-primary;
   box-sizing: border-box;
+  border: 2rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: $primary-color;
+    background: $bg-card;
+  }
 }
 
 /* 单选组 */
 .radio-group {
   display: flex;
-  gap: 24rpx;
+  gap: $spacing-xl;
 }
 
 .radio-item {
@@ -822,18 +838,19 @@ async function handleSubmit() {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12rpx;
+  gap: $spacing-sm;
   height: 88rpx;
-  background: #f7f7f7;
-  border-radius: 16rpx;
-  font-size: 28rpx;
-  color: #666;
-  transition: all 0.3s ease;
+  background: $bg-page;
+  border-radius: $radius-base;
+  font-size: $font-base;
+  color: $text-secondary;
+  border: 2rpx solid $border-light;
+  transition: all 0.2s ease;
 
   &.active {
-    background: #fff5f0;
-    color: #ff6b35;
-    border: 2rpx solid #ff6b35;
+    background: $primary-bg;
+    color: $primary-color;
+    border-color: $primary-color;
   }
 }
 
@@ -841,14 +858,14 @@ async function handleSubmit() {
   width: 32rpx;
   height: 32rpx;
   border-radius: 50%;
-  border: 2rpx solid #d9d9d9;
+  border: 2rpx solid $border-base;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
 
   .radio-item.active & {
-    border-color: #ff6b35;
+    border-color: $primary-color;
   }
 }
 
@@ -856,7 +873,7 @@ async function handleSubmit() {
   width: 16rpx;
   height: 16rpx;
   border-radius: 50%;
-  background: #ff6b35;
+  background: $primary-color;
 }
 
 /* 上传区域 */
@@ -867,50 +884,51 @@ async function handleSubmit() {
 .upload-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 16rpx;
+  gap: $spacing-md;
 }
 
 .upload-btn {
   width: 200rpx;
   height: 200rpx;
-  background: #f7f7f7;
-  border-radius: 16rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 2rpx dashed #d9d9d9;
-  transition: all 0.3s ease;
+  border: 2rpx dashed $border-base;
+  transition: all 0.2s ease;
 
   &:active {
-    background: #f0f0f0;
+    background: $bg-hover;
   }
 }
 
 .upload-icon {
   font-size: 48rpx;
-  color: #999;
-  margin-bottom: 8rpx;
+  color: $text-tertiary;
+  margin-bottom: $spacing-xs;
 }
 
 .upload-text {
-  font-size: 24rpx;
-  color: #999;
+  font-size: $font-xs;
+  color: $text-tertiary;
 }
 
 .image-preview {
   width: 200rpx;
   height: 200rpx;
-  background: #f7f7f7;
-  border-radius: 16rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
   position: relative;
   overflow: hidden;
+  border: 1rpx solid $border-light;
 }
 
 .preview-img {
   width: 100%;
   height: 100%;
-  border-radius: 16rpx;
+  border-radius: $radius-base;
 }
 
 .delete-btn {
@@ -919,14 +937,13 @@ async function handleSubmit() {
   right: -12rpx;
   width: 48rpx;
   height: 48rpx;
-  background: #ff4d4f;
+  background: $error-color;
   border-radius: 50%;
   color: #fff;
   font-size: 32rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
   z-index: 10;
 }
 
@@ -934,57 +951,63 @@ async function handleSubmit() {
 .submit-btn {
   width: 100%;
   height: 96rpx;
-  background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
+  background: $primary-color;
   color: #fff;
-  font-size: 32rpx;
-  font-weight: 600;
-  border-radius: 48rpx;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  border-radius: $radius-base;
   border: none;
-  margin-top: 48rpx;
-  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.35);
-  transition: all 0.3s ease;
+  margin-top: $spacing-3xl;
+  transition: all 0.2s ease;
 
   &:active:not([disabled]) {
-    transform: translateY(2rpx);
-    box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.3);
+    background: $primary-dark;
   }
 
   &[disabled] {
-    background: #e5e5e5;
-    box-shadow: none;
-    color: #999;
+    background: $bg-disabled;
+    color: $text-disabled;
   }
 }
 
 /* 提示信息 */
 .tips {
-  margin-top: 32rpx;
-  padding: 32rpx;
-  background: #fff9f0;
-  border-radius: 24rpx;
-  border: 1rpx solid #ffe8cc;
+  margin-top: $spacing-2xl;
+  padding: $spacing-2xl;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  border: 2rpx solid $warning-color;
 }
 
 .tips-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #ff6b35;
-  margin-bottom: 16rpx;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $warning-color;
+  margin-bottom: $spacing-md;
   display: flex;
   align-items: center;
-  gap: 8rpx;
+  gap: $spacing-xs;
 
   &::before {
-    content: '💡';
-    font-size: 32rpx;
+    content: '!';
+    width: 32rpx;
+    height: 32rpx;
+    background: $warning-color;
+    color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $font-lg;
+    font-weight: $font-bold;
   }
 }
 
 .tips-text {
-  font-size: 26rpx;
-  color: #d48806;
+  font-size: $font-sm;
+  color: $text-secondary;
   display: block;
-  margin-top: 12rpx;
+  margin-top: $spacing-sm;
   line-height: 1.6;
 }
 </style>
\ No newline at end of file
diff --git a/apps/miniapp/src/pages/seller/shop-edit.vue b/apps/miniapp/src/pages/seller/shop-edit.vue
index dd036e2..6e2c997 100644
--- a/apps/miniapp/src/pages/seller/shop-edit.vue
+++ b/apps/miniapp/src/pages/seller/shop-edit.vue
@@ -240,65 +240,84 @@ async function handleSubmit() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/styles/common.scss';
+
 .page-shop-edit {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding: 24rpx;
+  background: $bg-page;
+  padding: $spacing-xl;
 }
 
 .form-section {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-light;
 }
 
 .form-item {
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-2xl;
 }
 
 .label {
-  font-size: 28rpx;
-  color: #333;
-  margin-bottom: 16rpx;
+  font-size: $font-base;
+  color: $text-primary;
+  margin-bottom: $spacing-md;
   display: block;
+  font-weight: $font-medium;
 
   &.required::before {
     content: '*';
-    color: #ff4d4f;
-    margin-right: 8rpx;
+    color: $primary-color;
+    margin-right: $spacing-xs;
   }
 }
 
 .input {
   width: 100%;
   height: 88rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 24rpx;
-  font-size: 30rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-xl;
+  font-size: $font-md;
+  border: 2rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: $primary-color;
+    background: $bg-card;
+  }
 }
 
 .textarea {
   width: 100%;
   height: 160rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 24rpx;
-  font-size: 30rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: $spacing-xl;
+  font-size: $font-md;
+  border: 2rpx solid $border-light;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: $primary-color;
+    background: $bg-card;
+  }
 }
 
 .picker-value {
   height: 88rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 24rpx;
-  font-size: 30rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
+  padding: 0 $spacing-xl;
+  font-size: $font-md;
   display: flex;
   align-items: center;
+  border: 2rpx solid $border-light;
 }
 
 .placeholder {
-  color: #999;
+  color: $text-placeholder;
 }
 
 .upload-section {
@@ -308,37 +327,39 @@ async function handleSubmit() {
 .upload-btn {
   width: 200rpx;
   height: 200rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  border: 2rpx dashed $border-base;
 }
 
 .upload-icon {
   font-size: 48rpx;
-  color: #999;
+  color: $text-tertiary;
 }
 
 .upload-text {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 8rpx;
+  font-size: $font-xs;
+  color: $text-tertiary;
+  margin-top: $spacing-xs;
 }
 
 .image-preview {
   width: 200rpx;
   height: 200rpx;
-  background: #f5f5f5;
-  border-radius: 12rpx;
+  background: $bg-page;
+  border-radius: $radius-base;
   position: relative;
+  border: 1rpx solid $border-light;
 }
 
 .preview-img {
   width: 100%;
   height: 100%;
-  border-radius: 12rpx;
+  border-radius: $radius-base;
 }
 
 .delete-btn {
@@ -347,10 +368,10 @@ async function handleSubmit() {
   right: -16rpx;
   width: 40rpx;
   height: 40rpx;
-  background: #ff4d4f;
+  background: $error-color;
   border-radius: 50%;
   color: #fff;
-  font-size: 28rpx;
+  font-size: $font-base;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -359,38 +380,45 @@ async function handleSubmit() {
 .submit-btn {
   width: 100%;
   height: 88rpx;
-  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
+  background: $primary-color;
   color: #fff;
-  font-size: 32rpx;
-  font-weight: 600;
-  border-radius: 44rpx;
+  font-size: $font-lg;
+  font-weight: $font-semibold;
+  border-radius: $radius-base;
   border: none;
-  margin-top: 48rpx;
+  margin-top: $spacing-3xl;
+  transition: all 0.2s ease;
+
+  &:active:not([disabled]) {
+    background: $primary-dark;
+  }
 
   &[disabled] {
-    opacity: 0.6;
+    background: $bg-disabled;
+    color: $text-disabled;
   }
 }
 
 .tips {
-  margin-top: 32rpx;
-  padding: 24rpx;
-  background: #fffbe6;
-  border-radius: 12rpx;
+  margin-top: $spacing-2xl;
+  padding: $spacing-xl;
+  background: $bg-card;
+  border-radius: $radius-base;
+  border: 2rpx solid $warning-color;
 }
 
 .tips-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #faad14;
-  margin-bottom: 16rpx;
+  font-size: $font-base;
+  font-weight: $font-semibold;
+  color: $warning-color;
+  margin-bottom: $spacing-md;
   display: block;
 }
 
 .tips-text {
-  font-size: 24rpx;
-  color: #d48806;
+  font-size: $font-xs;
+  color: $text-secondary;
   display: block;
-  margin-top: 8rpx;
+  margin-top: $spacing-xs;
 }
 </style>
\ No newline at end of file
diff --git a/apps/miniapp/src/static/img/icon/activity.png b/apps/miniapp/src/static/img/icon/activity.png
new file mode 100644
index 0000000000000000000000000000000000000000..529e5e9dbf8d9cf509758d431466a408848c5ccc
GIT binary patch
literal 6442
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
PRRS>9H$&IzI^zBZa`2;>

literal 0
HcmV?d00001

diff --git a/apps/miniapp/src/static/img/icon/order-list.png b/apps/miniapp/src/static/img/icon/order-list.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf897f4d2dd0cc17cb79129bc3b3a96ca18a0b12
GIT binary patch
literal 5279
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

literal 0
HcmV?d00001

diff --git a/apps/miniapp/src/static/img/icon/order.png b/apps/miniapp/src/static/img/icon/order.png
deleted file mode 100644
index 7677ba79809d83d1dc75bcc9a2804f937f8f747f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2871
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

diff --git a/apps/miniapp/src/static/styles/common.scss b/apps/miniapp/src/static/styles/common.scss
index c279fe7..31d0b7e 100644
--- a/apps/miniapp/src/static/styles/common.scss
+++ b/apps/miniapp/src/static/styles/common.scss
@@ -1,41 +1,53 @@
 /* 全局公共样式 */
 
-/* 设计变量 */
-$primary-color: #FF6B35;
-$primary-light: #ff8a5c;
-$primary-dark: #e55a28;
-$success-color: #52c41a;
-$warning-color: #faad14;
-$error-color: #ff4d4f;
-$info-color: #1890ff;
+/* ========================================
+   引入新设计系统 - 橙蓝双色系统
+   ======================================== */
+@import './design-tokens.scss';
+@import './mixins.scss';
 
-$text-color: #1a1a1a;
-$text-color-secondary: #666666;
-$text-color-light: #999999;
-$text-color-placeholder: #cccccc;
+/* ========================================
+   向后兼容：保留旧变量名映射到新设计系统
+   注意：新代码请使用 design-tokens.scss 中的变量
+   ======================================== */
 
-$border-color: #f0f0f0;
-$border-color-light: #f5f5f5;
-$bg-color: #f7f8fa;
-$bg-color-white: #ffffff;
-$bg-color-card: #ffffff;
+// 旧的主色系变量（映射到新的辅助色 - 蓝色）
+// 注意：实际页面中大量使用橙色，新代码请使用 $primary-color（橙色）
+$old-primary-color: $secondary-color; // 保留旧的蓝色作为辅助色
+$old-primary-light: $secondary-400;
+$old-primary-lighter: $secondary-200;
+$old-primary-dark: $secondary-700;
+$old-primary-bg: $secondary-50;
 
-$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-$shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
+// 主色系的深浅变体（用于按钮激活态等）
+$primary-light: $primary-400;
+$primary-dark: $primary-700;
+$primary-bg: $primary-50;
 
-$radius-sm: 8rpx;
-$radius-md: 16rpx;
-$radius-lg: 24rpx;
-$radius-xl: 32rpx;
+// 注意：以上变量已在 design-tokens.scss 中重新定义
+// 功能色、中性色、背景色、边框色、阴影、圆角、间距、字体等
+// 都已在新设计系统中定义，此处不再重复定义
+
+/* ========================================
+   兼容旧变量名（逐步废弃）
+   ======================================== */
+$text-color: $text-primary;
+$text-color-secondary: $text-secondary;
+$text-color-light: $text-tertiary;
+$text-color-placeholder: $text-placeholder;
+$border-color: $border-base;
+$border-color-light: $border-light;
+$bg-color: $bg-page;
+$bg-color-white: $bg-card;
+$bg-color-card: $bg-card;
 
 /* 页面基础样式 */
 page {
   font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
     'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
-  font-size: 28rpx;
-  color: $text-color;
-  background-color: $bg-color;
+  font-size: $font-base;
+  color: $text-primary;
+  background-color: $bg-page;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -44,20 +56,37 @@ page {
 /* 页面容器 */
 .page-container {
   min-height: 100vh;
-  background: $bg-color;
+  background: $bg-page;
 }
 
-/* 卡片样式 */
+/* 卡片样式 - 扁平化设计 */
 .card {
-  background: $bg-color-card;
+  background: $bg-card;
   border-radius: $radius-lg;
-  padding: 28rpx;
-  margin-bottom: 24rpx;
-  box-shadow: $shadow-sm;
+  padding: $spacing-xl;
+  margin-bottom: $spacing-md;
+  border: 1rpx solid $border-light;
+  transition: all 0.2s ease;
 }
 
-.card-shadow {
-  box-shadow: $shadow-md;
+.card:active {
+  background: $bg-hover;
+}
+
+.card-large {
+  border-radius: $radius-xl;
+  padding: $spacing-2xl;
+}
+
+.card-flat {
+  box-shadow: none;
+  border: 1rpx solid $border-light;
+}
+
+.card-gradient {
+  background: linear-gradient(135deg, $primary-color, $primary-400);
+  color: #FFFFFF;
+  border: none;
 }
 
 /* 常用 flex 布局 */
@@ -235,9 +264,9 @@ page {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 6rpx 16rpx;
-  font-size: 22rpx;
-  border-radius: 6rpx;
+  padding: 6rpx $spacing-sm;
+  font-size: $font-xs;
+  border-radius: $radius-xs;
   background: rgba($primary-color, 0.1);
   color: $primary-color;
 }
@@ -262,73 +291,121 @@ page {
   color: $info-color;
 }
 
-/* 按钮样式 */
+/* 按钮样式 - 扁平化设计 */
 .btn {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 88rpx;
-  border-radius: 44rpx;
-  font-size: 30rpx;
-  font-weight: 600;
+  padding: 0 $spacing-2xl;
+  border-radius: $radius-base;
+  font-size: $font-base;
+  font-weight: $font-medium;
   border: none;
   transition: all 0.2s ease;
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, $primary-color, $primary-light);
-  color: #fff;
-  box-shadow: 0 8rpx 24rpx rgba($primary-color, 0.3);
+  background: $primary-color;
+  color: #FFFFFF;
 }
 
 .btn-primary:active {
-  transform: scale(0.98);
-  box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.2);
+  background: $primary-700;
 }
 
 .btn-secondary {
-  background: rgba($primary-color, 0.08);
+  background: $primary-50;
   color: $primary-color;
 }
 
+.btn-secondary:active {
+  background: $primary-100;
+}
+
 .btn-outline {
-  background: #fff;
+  background: transparent;
   color: $primary-color;
   border: 2rpx solid $primary-color;
 }
 
+.btn-outline:active {
+  background: $primary-50;
+}
+
+.btn-text {
+  height: auto;
+  padding: $spacing-sm $spacing-md;
+  background: transparent;
+  font-size: $font-base;
+  font-weight: $font-medium;
+  color: $primary-color;
+}
+
+.btn-text:active {
+  opacity: 0.6;
+}
+
+.btn-mini {
+  height: 64rpx;
+  padding: 0 $spacing-lg;
+  font-size: $font-sm;
+}
+
 .btn-danger {
-  background: #fff;
+  background: transparent;
   color: $error-color;
   border: 2rpx solid $error-color;
 }
 
+.btn-danger:active {
+  background: rgba($error-color, 0.05);
+}
+
 .btn-disabled {
-  background: #f5f5f5;
-  color: #ccc;
-  box-shadow: none;
+  background: $bg-disabled;
+  color: $text-disabled;
+  opacity: 0.6;
 }
 
 /* 输入框样式 */
 .input {
-  height: 96rpx;
-  background: #f7f8fa;
+  height: 88rpx;
+  background: $bg-page;
   border: 2rpx solid transparent;
-  border-radius: 48rpx;
-  padding: 0 32rpx;
-  font-size: 30rpx;
-  color: $text-color;
+  border-radius: $radius-round;
+  padding: 0 $spacing-md;
+  font-size: $font-base;
+  color: $text-primary;
   transition: all 0.2s ease;
 }
 
 .input:focus {
   border-color: $primary-color;
-  background: #fff;
-  box-shadow: 0 0 0 4rpx rgba($primary-color, 0.1);
+  background: #FFFFFF;
+  box-shadow: 0 0 0 4rpx rgba(0, 134, 246, 0.1);
 }
 
 .input::placeholder {
-  color: $text-color-placeholder;
+  color: $text-placeholder;
+}
+
+.input-square {
+  border-radius: $radius-sm;
+}
+
+.input-underline {
+  height: 80rpx;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-bottom: 2rpx solid $border-base;
+  border-radius: 0;
+}
+
+.input-underline:focus {
+  border-bottom-color: $primary-color;
+  box-shadow: none;
 }
 
 /* 空状态 */
@@ -423,11 +500,11 @@ page {
 
 .star {
   font-size: 28rpx;
-  color: #e5e5e5;
+  color: #E5E5E5;
 }
 
 .star-filled {
-  color: #FFB800;
+  color: $star-color;
 }
 
 /* 骨架屏占位 */
@@ -447,9 +524,10 @@ page {
 .list-item {
   display: flex;
   align-items: center;
-  padding: 28rpx 24rpx;
-  background: #fff;
-  border-bottom: 1rpx solid $border-color-light;
+  padding: $spacing-md;
+  background: #FFFFFF;
+  border-bottom: 1rpx solid $border-light;
+  transition: background 0.2s ease;
 }
 
 .list-item:last-child {
@@ -457,25 +535,25 @@ page {
 }
 
 .list-item:active {
-  background: #fafafa;
+  background: $bg-hover;
 }
 
 /* 渐变背景 */
 .gradient-primary {
-  background: linear-gradient(135deg, $primary-color, $primary-light);
+  background: linear-gradient(135deg, $primary-color, $primary-400);
 }
 
 .gradient-primary-reverse {
-  background: linear-gradient(135deg, $primary-light, $primary-color);
+  background: linear-gradient(135deg, $primary-400, $primary-color);
 }
 
 /* 阴影卡片效果 */
 .elevated-card {
-  background: #fff;
+  background: #FFFFFF;
   border-radius: $radius-lg;
-  padding: 28rpx;
+  padding: $spacing-md;
   box-shadow: $shadow-md;
-  margin: 24rpx;
+  margin: $spacing-md;
 }
 
 /* 图标按钮 */
diff --git a/apps/miniapp/src/static/styles/design-tokens.scss b/apps/miniapp/src/static/styles/design-tokens.scss
new file mode 100644
index 0000000..67f7dbe
--- /dev/null
+++ b/apps/miniapp/src/static/styles/design-tokens.scss
@@ -0,0 +1,226 @@
+/* ========================================
+   设计系统 Design Tokens
+   酒店民宿短租预订平台 - 橙蓝双色系统
+   参考：美团（橙色主导）+ 飞猪（蓝橙结合）
+   ======================================== */
+
+/* ========== 色彩系统 Color System ========== */
+
+// 主色系 - 活力橙（用于CTA按钮、价格、预订等促进转化的场景）
+$primary-color: #FF6B35;
+$primary-50: #FFF5F2;
+$primary-100: #FFE8E0;
+$primary-200: #FFD1C1;
+$primary-300: #FFB088;
+$primary-400: #FF8A5C;
+$primary-500: #FF6B35; // 主色
+$primary-600: #E65A2B;
+$primary-700: #CC4A1F;
+$primary-800: #B33B14;
+$primary-900: #992C0A;
+
+// 辅助色系 - 信任蓝（用于评分、状态、信息展示等建立信任的场景）
+$secondary-color: #0086F6;
+$secondary-50: #E6F4FF;
+$secondary-100: #BAE0FF;
+$secondary-200: #91CAFF;
+$secondary-300: #69B1FF;
+$secondary-400: #4096FF;
+$secondary-500: #0086F6; // 辅助色
+$secondary-600: #0066CC;
+$secondary-700: #0050A3;
+$secondary-800: #003A7A;
+$secondary-900: #002451;
+
+// 功能色系
+$success-color: #52C41A;
+$success-light: #73D13D;
+$success-dark: #389E0D;
+$success-bg: #F6FFED;
+
+$warning-color: #FAAD14;
+$warning-light: #FFC53D;
+$warning-dark: #D48806;
+$warning-bg: #FFFBE6;
+
+$error-color: #F5222D;
+$error-light: #FF4D4F;
+$error-dark: #CF1322;
+$error-bg: #FFF1F0;
+
+$info-color: #1890FF;
+$info-light: #40A9FF;
+$info-dark: #096DD9;
+$info-bg: #E6F7FF;
+
+// 中性色系（8级灰度）
+$gray-50: #FAFAFA;
+$gray-100: #F5F5F5;
+$gray-200: #E5E5E5;
+$gray-300: #D4D4D4;
+$gray-400: #A3A3A3;
+$gray-500: #737373;
+$gray-600: #525252;
+$gray-700: #404040;
+$gray-800: #262626;
+$gray-900: #171717;
+
+// 语义化颜色
+$text-primary: $gray-900;      // 主要文字
+$text-secondary: $gray-600;    // 次要文字
+$text-tertiary: $gray-500;     // 辅助文字
+$text-placeholder: $gray-400;  // 占位文字
+$text-disabled: $gray-300;     // 禁用文字
+$text-inverse: #FFFFFF;        // 反色文字
+
+$bg-page: #F7F8FA;             // 页面背景
+$bg-card: #FFFFFF;             // 卡片背景
+$bg-hover: #F5F5F5;            // 悬停背景
+$bg-active: #E5E5E5;           // 激活背景
+$bg-disabled: #FAFAFA;         // 禁用背景
+$bg-mask: rgba(0, 0, 0, 0.5);  // 遮罩背景
+
+$border-base: $gray-200;       // 基础边框
+$border-light: $gray-100;      // 浅色边框
+$border-dark: $gray-300;       // 深色边框
+
+// 特殊色
+$star-color: #FFB800;          // 评分星星
+$price-color: $primary-color;  // 价格颜色
+$discount-color: $error-color; // 折扣颜色
+
+/* ========== 字体系统 Typography System ========== */
+
+$font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+
+// 字号（8级）
+$font-xs: 20rpx;    // 辅助文字
+$font-sm: 24rpx;    // 次要文字
+$font-base: 28rpx;  // 正文
+$font-md: 30rpx;    // 小标题
+$font-lg: 32rpx;    // 标题
+$font-xl: 36rpx;    // 大标题
+$font-2xl: 40rpx;   // 特大标题
+$font-3xl: 48rpx;   // 超大标题
+
+// 字重
+$font-regular: 400;
+$font-medium: 500;
+$font-semibold: 600;
+$font-bold: 700;
+
+// 行高
+$line-height-tight: 1.2;
+$line-height-normal: 1.5;
+$line-height-relaxed: 1.75;
+
+/* ========== 间距系统 Spacing System（基于4的倍数） ========== */
+
+$spacing-0: 0;
+$spacing-xs: 8rpx;
+$spacing-sm: 12rpx;
+$spacing-md: 16rpx;
+$spacing-lg: 20rpx;
+$spacing-xl: 24rpx;
+$spacing-2xl: 32rpx;
+$spacing-3xl: 48rpx;
+$spacing-4xl: 64rpx;
+
+/* ========== 圆角系统 Border Radius System ========== */
+
+$radius-xs: 4rpx;
+$radius-sm: 8rpx;
+$radius-base: 12rpx;
+$radius-md: 16rpx;
+$radius-lg: 20rpx;
+$radius-xl: 24rpx;
+$radius-2xl: 28rpx;
+$radius-round: 999rpx;
+
+/* ========== 阴影系统 Shadow System ========== */
+
+$shadow-xs: 0 2rpx 4rpx rgba(0, 0, 0, 0.04);
+$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+$shadow-md: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+$shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.10);
+$shadow-xl: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
+$shadow-primary: 0 4rpx 16rpx rgba(255, 107, 53, 0.25);
+$shadow-secondary: 0 4rpx 16rpx rgba(0, 134, 246, 0.20);
+
+/* ========== 渐变系统 Gradient System ========== */
+
+$gradient-primary: linear-gradient(135deg, #FF6B35, #FF8A5C);
+$gradient-primary-reverse: linear-gradient(135deg, #FF8A5C, #FF6B35);
+$gradient-secondary: linear-gradient(135deg, #0086F6, #00A6FF);
+$gradient-secondary-reverse: linear-gradient(135deg, #00A6FF, #0086F6);
+$gradient-warm: linear-gradient(135deg, #FF6B35, #FAAD14);
+$gradient-cool: linear-gradient(135deg, #0086F6, #52C41A);
+$gradient-success: linear-gradient(135deg, #52C41A, #73D13D);
+$gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
+
+/* ========== 动画系统 Animation System ========== */
+
+// 动画速度
+$transition-fast: 0.15s;
+$transition-base: 0.2s;
+$transition-slow: 0.3s;
+$transition-slower: 0.5s;
+
+// 缓动函数
+$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+$ease-out: cubic-bezier(0, 0, 0.2, 1);
+$ease-in: cubic-bezier(0.4, 0, 1, 1);
+$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+// 完整过渡
+$transition-all: all $transition-base $ease-in-out;
+$transition-color: color $transition-base $ease-in-out;
+$transition-bg: background-color $transition-base $ease-in-out;
+$transition-transform: transform $transition-base $ease-in-out;
+$transition-opacity: opacity $transition-base $ease-in-out;
+
+/* ========== Z-index系统 Z-index System ========== */
+
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-modal-backdrop: 1040;
+$z-modal: 1050;
+$z-popover: 1060;
+$z-tooltip: 1070;
+$z-toast: 1080;
+
+/* ========== 尺寸系统 Size System ========== */
+
+// 按钮高度
+$btn-height-mini: 48rpx;
+$btn-height-small: 56rpx;
+$btn-height-medium: 64rpx;
+$btn-height-large: 80rpx;
+
+// 输入框高度
+$input-height-small: 56rpx;
+$input-height-medium: 64rpx;
+$input-height-large: 72rpx;
+
+// 图标尺寸
+$icon-xs: 24rpx;
+$icon-sm: 32rpx;
+$icon-base: 40rpx;
+$icon-lg: 48rpx;
+$icon-xl: 64rpx;
+
+/* ========== 断点系统 Breakpoint System ========== */
+
+$breakpoint-xs: 320px;
+$breakpoint-sm: 375px;
+$breakpoint-md: 414px;
+$breakpoint-lg: 768px;
+$breakpoint-xl: 1024px;
+
+/* ========== 安全区域 Safe Area ========== */
+
+$safe-area-top: env(safe-area-inset-top);
+$safe-area-bottom: env(safe-area-inset-bottom);
+$safe-area-left: env(safe-area-inset-left);
+$safe-area-right: env(safe-area-inset-right);
diff --git a/apps/miniapp/src/static/styles/mixins.scss b/apps/miniapp/src/static/styles/mixins.scss
new file mode 100644
index 0000000..385ffe8
--- /dev/null
+++ b/apps/miniapp/src/static/styles/mixins.scss
@@ -0,0 +1,382 @@
+/* ========================================
+   Mixins 工具类库
+   常用的 SCSS Mixin 函数
+   ======================================== */
+
+@import './design-tokens.scss';
+
+/* ========== Flex布局 Flexbox Layout ========== */
+
+// Flex容器 - 行布局
+@mixin flex-row($justify: flex-start, $align: center) {
+  display: flex;
+  flex-direction: row;
+  justify-content: $justify;
+  align-items: $align;
+}
+
+// Flex容器 - 列布局
+@mixin flex-column($justify: flex-start, $align: stretch) {
+  display: flex;
+  flex-direction: column;
+  justify-content: $justify;
+  align-items: $align;
+}
+
+// Flex居中
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// Flex两端对齐
+@mixin flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Flex环绕对齐
+@mixin flex-around {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+/* ========== 文本省略 Text Ellipsis ========== */
+
+// 单行文本省略
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 多行文本省略
+@mixin text-ellipsis-multi($lines: 2) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+/* ========== 毛玻璃效果 Glassmorphism ========== */
+
+// 毛玻璃背景
+@mixin glass-bg($blur: 20rpx, $opacity: 0.9) {
+  background: rgba(255, 255, 255, $opacity);
+  backdrop-filter: blur($blur);
+  -webkit-backdrop-filter: blur($blur);
+}
+
+// 毛玻璃卡片
+@mixin glass-card($blur: 20rpx, $opacity: 0.9, $border: true) {
+  @include glass-bg($blur, $opacity);
+  @if $border {
+    border: 1rpx solid rgba(255, 255, 255, 0.3);
+  }
+  box-shadow: $shadow-md;
+}
+
+/* ========== 渐变背景 Gradient Background ========== */
+
+// 主色渐变
+@mixin gradient-primary {
+  background: $gradient-primary;
+}
+
+// 辅助色渐变
+@mixin gradient-secondary {
+  background: $gradient-secondary;
+}
+
+// 自定义渐变
+@mixin gradient-custom($start, $end, $angle: 135deg) {
+  background: linear-gradient($angle, $start, $end);
+}
+
+/* ========== 卡片样式 Card Styles ========== */
+
+// 基础卡片
+@mixin card-base {
+  background: $bg-card;
+  border-radius: $radius-md;
+  padding: $spacing-xl;
+  box-shadow: $shadow-sm;
+}
+
+// 悬浮卡片
+@mixin card-elevated {
+  @include card-base;
+  box-shadow: $shadow-md;
+  transition: $transition-all;
+
+  &:active {
+    transform: scale(0.98);
+    box-shadow: $shadow-sm;
+  }
+}
+
+// 扁平卡片
+@mixin card-flat {
+  background: $bg-card;
+  border-radius: $radius-md;
+  padding: $spacing-xl;
+  border: 1rpx solid $border-base;
+}
+
+/* ========== 按钮样式 Button Styles ========== */
+
+// 按钮基础样式
+@mixin btn-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius-base;
+  font-size: $font-base;
+  font-weight: $font-medium;
+  transition: $transition-all;
+  border: none;
+  cursor: pointer;
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+// 主按钮
+@mixin btn-primary {
+  @include btn-base;
+  background: $gradient-primary;
+  color: $text-inverse;
+  box-shadow: $shadow-primary;
+}
+
+// 次按钮
+@mixin btn-secondary {
+  @include btn-base;
+  background: $gradient-secondary;
+  color: $text-inverse;
+  box-shadow: $shadow-secondary;
+}
+
+// 描边按钮
+@mixin btn-outline($color: $primary-color) {
+  @include btn-base;
+  background: transparent;
+  color: $color;
+  border: 1rpx solid $color;
+}
+
+/* ========== 响应式字体 Responsive Font ========== */
+
+// 响应式字体大小
+@mixin responsive-font($min-size, $max-size, $min-width: 320px, $max-width: 750px) {
+  font-size: calc(#{$min-size} + (#{$max-size} - #{$min-size}) * ((100vw - #{$min-width}) / (#{$max-width} - #{$min-width})));
+}
+
+/* ========== 安全区域 Safe Area ========== */
+
+// 顶部安全区域
+@mixin safe-area-top($padding: 0) {
+  padding-top: calc(#{$padding} + #{$safe-area-top});
+}
+
+// 底部安全区域
+@mixin safe-area-bottom($padding: 0) {
+  padding-bottom: calc(#{$padding} + #{$safe-area-bottom});
+}
+
+// 左侧安全区域
+@mixin safe-area-left($padding: 0) {
+  padding-left: calc(#{$padding} + #{$safe-area-left});
+}
+
+// 右侧安全区域
+@mixin safe-area-right($padding: 0) {
+  padding-right: calc(#{$padding} + #{$safe-area-right});
+}
+
+/* ========== 固定定位 Fixed Position ========== */
+
+// 固定在顶部
+@mixin fixed-top($z-index: $z-fixed) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: $z-index;
+}
+
+// 固定在底部
+@mixin fixed-bottom($z-index: $z-fixed) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $z-index;
+}
+
+/* ========== 绝对居中 Absolute Center ========== */
+
+// 绝对居中
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// 垂直居中
+@mixin absolute-vertical-center {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+// 水平居中
+@mixin absolute-horizontal-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* ========== 清除浮动 Clearfix ========== */
+
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+/* ========== 隐藏滚动条 Hide Scrollbar ========== */
+
+@mixin hide-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* ========== 图片占位 Image Placeholder ========== */
+
+// 图片容器（保持宽高比）
+@mixin image-container($ratio: 1) {
+  position: relative;
+  width: 100%;
+  padding-bottom: calc(100% / #{$ratio});
+  overflow: hidden;
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+/* ========== 骨架屏动画 Skeleton Animation ========== */
+
+@mixin skeleton-loading {
+  background: linear-gradient(90deg, $gray-100 25%, $gray-50 50%, $gray-100 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ========== 脉冲动画 Pulse Animation ========== */
+
+@mixin pulse-animation($duration: 2s) {
+  animation: pulse $duration ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* ========== 淡入动画 Fade In Animation ========== */
+
+@mixin fade-in($duration: 0.3s) {
+  animation: fadeIn $duration ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ========== 滑入动画 Slide In Animation ========== */
+
+@mixin slide-up($duration: 0.3s) {
+  animation: slideUp $duration ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* ========== 缩放动画 Scale Animation ========== */
+
+@mixin scale-in($duration: 0.3s) {
+  animation: scaleIn $duration $ease-bounce;
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* ========== 触觉反馈 Haptic Feedback ========== */
+
+@mixin haptic-feedback {
+  &:active {
+    transform: scale(0.95);
+    transition: transform $transition-fast $ease-out;
+  }
+}
+
+/* ========== 禁用状态 Disabled State ========== */
+
+@mixin disabled-state {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
diff --git a/apps/server/src/config/jwt.config.ts b/apps/server/src/config/jwt.config.ts
index cb06e1a..3a99366 100644
--- a/apps/server/src/config/jwt.config.ts
+++ b/apps/server/src/config/jwt.config.ts
@@ -2,6 +2,6 @@ import { registerAs } from '@nestjs/config';
 
 export default registerAs('jwt', () => ({
   secret: process.env.JWT_SECRET || 'dev_secret_key',
-  expiresIn: process.env.JWT_EXPIRES_IN || '2h',
+  expiresIn: process.env.JWT_EXPIRES_IN || '7d',
   refreshExpiresIn: process.env.JWT_REFRESH_EXPIRES_IN || '7d',
 }));
diff --git a/apps/server/src/entities/mkt-user-invite-stats.entity.ts b/apps/server/src/entities/mkt-user-invite-stats.entity.ts
index 92dc7ec..edf3ea9 100644
--- a/apps/server/src/entities/mkt-user-invite-stats.entity.ts
+++ b/apps/server/src/entities/mkt-user-invite-stats.entity.ts
@@ -1,8 +1,9 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, Index, ManyToOne, JoinColumn } from 'typeorm';
+import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, Index, ManyToOne, JoinColumn, Unique } from 'typeorm';
 import { User } from './user.entity';
 import { MktActivity } from './mkt-activity.entity';
 
 @Entity('mkt_user_invite_stats')
+@Unique(['activityId', 'userId'])
 export class MktUserInviteStats {
   @PrimaryGeneratedColumn({ type: 'bigint', unsigned: true })
   id: number;
@@ -12,7 +13,7 @@ export class MktUserInviteStats {
   activityId: number;
 
   @Index()
-  @Column({ name: 'user_id', type: 'bigint', unsigned: true, unique: true, comment: '用户ID' })
+  @Column({ name: 'user_id', type: 'bigint', unsigned: true, comment: '用户ID' })
   userId: number;
 
   @Column({ name: 'invite_code', length: 32, unique: true, comment: '专属邀请码' })
diff --git a/apps/server/src/modules/activity/activity-public.controller.ts b/apps/server/src/modules/activity/activity-public.controller.ts
new file mode 100644
index 0000000..b22af51
--- /dev/null
+++ b/apps/server/src/modules/activity/activity-public.controller.ts
@@ -0,0 +1,67 @@
+import { Controller, Get } from '@nestjs/common';
+import { ApiTags, ApiOperation } from '@nestjs/swagger';
+import { ActivityService } from './activity.service';
+
+@ApiTags('公开接口-活动')
+@Controller('activity')
+export class ActivityPublicController {
+  constructor(private readonly activityService: ActivityService) {}
+
+  @Get('list')
+  @ApiOperation({ summary: '获取活动列表（公开接口）' })
+  async getActivityList() {
+    const activities: any[] = [];
+
+    // 获取邀请活动
+    const inviteActivity = await this.activityService.getEnabledInviteCashbackActivity();
+    if (inviteActivity && inviteActivity.enabled) {
+      const config = inviteActivity.config || {};
+      activities.push({
+        id: inviteActivity.id,
+        type: 'invite',
+        title: '邀请好友得奖励',
+        description: '邀请好友下单，双方都有返现',
+        icon: '🎁',
+        enabled: true,
+        config: {
+          inviterReward: config.maxCashback || 0,
+          inviteeReward: 0,
+          firstOrderRate: config.firstOrderRate || 0,
+          secondOrderRate: config.secondOrderRate || 0,
+          minCashback: config.minCashback || 0,
+          maxCashback: config.maxCashback || 0,
+        },
+      });
+    }
+
+    return { list: activities };
+  }
+
+  @Get('invite/config')
+  @ApiOperation({ summary: '获取邀请活动配置（公开接口）' })
+  async getInviteConfig() {
+    const activity = await this.activityService.getEnabledInviteCashbackActivity();
+
+    if (!activity || !activity.enabled) {
+      return {
+        enabled: false,
+        inviterReward: 0,
+        inviteeReward: 0,
+        minOrderAmount: 0,
+      };
+    }
+
+    const config = activity.config || {};
+
+    return {
+      enabled: true,
+      inviterReward: config.maxCashback || 0,
+      inviteeReward: 0,
+      minOrderAmount: 0,
+      firstOrderRate: config.firstOrderRate || 0,
+      secondOrderRate: config.secondOrderRate || 0,
+      minCashback: config.minCashback || 0,
+      maxCashback: config.maxCashback || 0,
+    };
+  }
+}
diff --git a/apps/server/src/modules/activity/activity.module.ts b/apps/server/src/modules/activity/activity.module.ts
index cc396ab..91fa266 100644
--- a/apps/server/src/modules/activity/activity.module.ts
+++ b/apps/server/src/modules/activity/activity.module.ts
@@ -3,6 +3,7 @@ import { TypeOrmModule } from '@nestjs/typeorm';
 import { ActivityService } from './activity.service';
 import { ActivityUserController } from './activity-user.controller';
 import { ActivityAdminController } from './activity-admin.controller';
+import { ActivityPublicController } from './activity-public.controller';
 import { MktActivity } from '@/entities/mkt-activity.entity';
 import { MktInvitation } from '@/entities/mkt-invitation.entity';
 import { MktCashback } from '@/entities/mkt-cashback.entity';
@@ -23,7 +24,7 @@ import { User } from '@/entities/user.entity';
       User,
     ]),
   ],
-  controllers: [ActivityUserController, ActivityAdminController],
+  controllers: [ActivityPublicController, ActivityUserController, ActivityAdminController],
   providers: [ActivityService],
   exports: [ActivityService],
 })
diff --git a/apps/server/src/modules/review/review-seller.controller.ts b/apps/server/src/modules/review/review-seller.controller.ts
index 7c8ea60..aad0760 100644
--- a/apps/server/src/modules/review/review-seller.controller.ts
+++ b/apps/server/src/modules/review/review-seller.controller.ts
@@ -6,9 +6,9 @@ import {
   Request,
 } from '@nestjs/common';
 import { ReviewService } from './review.service';
-import { JwtAuthGuard } from '../auth/jwt-auth.guard';
-import { RolesGuard } from '../auth/roles.guard';
-import { Roles } from '../auth/roles.decorator';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { RolesGuard } from '../../common/guards/roles.guard';
+import { Roles } from '../../common/decorators/roles.decorator';
 
 @Controller('seller/reviews')
 @UseGuards(JwtAuthGuard, RolesGuard)
diff --git a/database/migrations/001_init_schema.sql b/database/migrations/001_init_schema.sql
index 954e3e1..131f944 100644
--- a/database/migrations/001_init_schema.sql
+++ b/database/migrations/001_init_schema.sql
@@ -607,7 +607,7 @@ CREATE TABLE `mkt_user_invite_stats` (
   `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
   `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
   PRIMARY KEY (`id`),
-  UNIQUE KEY `uk_user_id` (`user_id`),
+  UNIQUE KEY `uk_activity_user` (`activity_id`, `user_id`),
   UNIQUE KEY `uk_invite_code` (`invite_code`),
   KEY `idx_activity_id` (`activity_id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='用户邀请统计表';