diff --git a/src/pages.json b/src/pages.json
index 51547ba..6c5d206 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -199,6 +199,14 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/store/room-manage",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/store/store",
       "type": "page",
diff --git a/src/pages/store/img/bookroom.png b/src/pages/store/img/bookroom.png
new file mode 100644
index 0000000..d80eac7
Binary files /dev/null and b/src/pages/store/img/bookroom.png differ
diff --git a/src/pages/store/img/device.png b/src/pages/store/img/device.png
new file mode 100644
index 0000000..2ee7e5d
Binary files /dev/null and b/src/pages/store/img/device.png differ
diff --git a/src/pages/store/img/renew.png b/src/pages/store/img/renew.png
new file mode 100644
index 0000000..4a92e3c
Binary files /dev/null and b/src/pages/store/img/renew.png differ
diff --git a/src/pages/store/img/room.png b/src/pages/store/img/room.png
new file mode 100644
index 0000000..0ea0c08
Binary files /dev/null and b/src/pages/store/img/room.png differ
diff --git a/src/pages/store/room-manage.vue b/src/pages/store/room-manage.vue
new file mode 100644
index 0000000..d8cf917
--- /dev/null
+++ b/src/pages/store/room-manage.vue
@@ -0,0 +1,190 @@
+<route lang="jsonc" type="page">
+{
+  "layout": "default",
+  "style": {
+    "navigationStyle": "custom"
+  }
+}
+</route>
+
+<script lang="ts" setup>
+import { router } from '@/utils/tools'
+
+const OSS = inject('OSS')
+const navbarHeight = inject('navbarHeight')
+
+// 房间状态枚举
+enum RoomStatus {
+  AVAILABLE = 'available', // 空闲中 - 绿色
+  CLEANING = 'cleaning', // 待打扫 - 蓝色/橙色
+  MAINTENANCE = 'maintenance', // 维护中 - 红色
+  IN_USE = 'in_use', // 使用中 - 蓝色
+}
+
+// 房间状态配置
+const statusConfig = {
+  [RoomStatus.AVAILABLE]: {
+    text: '空闲中',
+    color: '#4C9F44', // 绿色
+  },
+  [RoomStatus.CLEANING]: {
+    text: '待打扫',
+    color: '#1890FF', // 蓝色
+  },
+  [RoomStatus.MAINTENANCE]: {
+    text: '维护中',
+    color: '#F65353', // 红色
+  },
+  [RoomStatus.IN_USE]: {
+    text: '使用中',
+    color: '#1890FF', // 蓝色
+  },
+}
+
+// Mock 房间数据
+const roomList = ref([
+  {
+    id: 1,
+    name: '对月',
+    type: '榻榻米',
+    image: `${OSS}images/room1.jpg`, // Mock图片，实际需要替换
+    status: RoomStatus.AVAILABLE,
+  },
+  {
+    id: 2,
+    name: '听雨',
+    type: '榻榻米',
+    image: `${OSS}images/room2.jpg`,
+    status: RoomStatus.CLEANING,
+  },
+  {
+    id: 3,
+    name: '观星',
+    type: '榻榻米',
+    image: `${OSS}images/room3.jpg`,
+    status: RoomStatus.MAINTENANCE,
+  },
+  {
+    id: 4,
+    name: '品茶',
+    type: '榻榻米',
+    image: `${OSS}images/room4.jpg`,
+    status: RoomStatus.CLEANING,
+  },
+  {
+    id: 5,
+    name: '静心',
+    type: '榻榻米',
+    image: `${OSS}images/room5.jpg`,
+    status: RoomStatus.IN_USE,
+  },
+])
+
+const RoomManage = {
+  /**
+   * 点击房间卡片
+   */
+  handleClickRoom: (room: any) => {
+    router.navigateTo(`/pages/store/room-detail?id=${room.id}`)
+  },
+
+  /**
+   * 点击编辑房间图片
+   */
+  handleEditImage: (room: any, event: any) => {
+    event.stopPropagation()
+    // TODO: 实现编辑房间图片功能
+    console.log('编辑房间图片:', room.id)
+  },
+
+  /**
+   * 点击更多选项
+   */
+  handleMore: () => {
+    // TODO: 实现更多选项功能
+    console.log('更多选项')
+  },
+
+  /**
+   * 点击目标图标
+   */
+  handleTarget: () => {
+    // TODO: 实现目标功能
+    console.log('目标功能')
+  },
+}
+
+/**
+ * 获取状态配置
+ */
+function getStatusConfig(status: RoomStatus) {
+  return statusConfig[status] || statusConfig[RoomStatus.AVAILABLE]
+}
+</script>
+
+<template>
+  <view>
+    <!-- 导航栏 -->
+    <view>
+      <navbar title="包间管理" custom-class="!bg-white" />
+    </view>
+
+    <!-- 房间列表 -->
+    <view class="px-30rpx pb-40rpx pt-30rpx">
+      <view class="grid grid-cols-2 gap-24rpx">
+        <view
+          v-for="room in roomList"
+          :key="room.id"
+          class="flex flex-col overflow-hidden rounded-16rpx bg-white"
+          @click="RoomManage.handleClickRoom(room)"
+        >
+          <!-- 房间图片 -->
+          <view class="relative aspect-[4/3] w-full">
+            <wd-img width="100%" height="100%" :src="room.image" mode="aspectFill" />
+            <!-- 编辑图标覆盖层 -->
+            <view
+              class="absolute right-16rpx top-16rpx h-48rpx w-48rpx flex items-center justify-center rounded-24rpx bg-black bg-opacity-40"
+              @click.stop="RoomManage.handleEditImage(room, $event)"
+            >
+              <wd-icon name="edit" size="16px" color="#fff" />
+            </view>
+          </view>
+
+          <!-- 房间信息 -->
+          <view class="flex flex-col p-24rpx">
+            <!-- 房间名称 -->
+            <view class="mb-0rpx text-center text-28rpx text-[#303133] leading-40rpx">
+              {{ room.name }} ({{ room.type }})
+            </view>
+
+            <!-- 状态指示器 -->
+            <view class="flex items-baseline justify-center align-middle">
+              <!-- 状态点 -->
+              <view
+                class="mr-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full"
+                :style="{ backgroundColor: getStatusConfig(room.status).color }"
+              />
+              <!-- 状态文字 -->
+              <view
+                class="text-24rpx text-[#303133] leading-34rpx"
+                :style="{ color: getStatusConfig(room.status).color }"
+              >
+                {{ getStatusConfig(room.status).text }}
+              </view>
+              <!-- 右箭头 -->
+              <view class="ml-8rpx">
+                <wd-icon name="arrow-right" size="12px" :color="getStatusConfig(room.status).color" />
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  background: #f6f7f8;
+}
+</style>
diff --git a/src/pages/store/store.vue b/src/pages/store/store.vue
index 8a4d2bd..227ebe6 100644
--- a/src/pages/store/store.vue
+++ b/src/pages/store/store.vue
@@ -1,338 +1,114 @@
 <route lang="jsonc" type="page">
-	{
-		"layout": "tabbar",
-		"style": {
-			"navigationStyle": "custom"
-		}
-	}
+{
+  "layout": "tabbar",
+  "style": {
+    "navigationStyle": "custom"
+  }
+}
 </route>
 
 <script lang="ts" setup>
-import type { IUserResult } from '@/api/types/user'
-import { getUserInfo } from '@/api/user'
-import { useUserStore } from '@/store'
 import { router } from '@/utils/tools'
-import headerBgImg from './img/bg.png'
-import modifyBgImg from './img/modify.png'
-import editIconImg from './img/修改 (1).png'
-import defaultAvatarImg from './img/头像.png'
-import playIconImg from './img/播放 (5).png'
+import bookroomImg from './img/bookroom.png'
+import deviceImg from './img/device.png'
+import renewImg from './img/renew.png'
+import roomImg from './img/room.png'
 
 const OSS = inject('OSS')
 const navbarHeight = inject('navbarHeight')
-const rightPadding = inject('capsuleOffset')
 
 // 本地图片资源
-const defaultAvatar = defaultAvatarImg as string
-const editIcon = editIconImg as string
-const playIcon = playIconImg as string
-const headerBg = headerBgImg as string
-const modifyBg = modifyBgImg as string
+const roomIcon = roomImg as string
+const deviceIcon = deviceImg as string
+const bookroomIcon = bookroomImg as string
+const renewIcon = renewImg as string
 
-// 调试：检查背景图片路径
-console.log('headerBg:', headerBg)
-
-// 登录信息相关
-const user = ref<IUserResult>({
-  id: 0,
-  sn: 0,
-  sex: '未知',
-  account: '',
-  nickname: '',
-  real_name: '',
-  avatar: '',
-  collect_count: 0,
-  coupon_count: 0,
-  create_time: '',
-  has_auth: false,
-  has_password: false,
-  member: 0,
-  mobile: '',
-  user_money: '0.00',
-  version: '',
-})
-const isLogin = ref<boolean>(false)
-
-// 客服电话
-const showServiceMobile = ref<boolean>(false)
-const sheetMenu = ref<{ name: string }[]>([])
-
-// 门店信息
-const storeInfo = ref({
-  douyin_uid: '236598984587',
-  address: '上海浦东新区新金桥路58号新银东大厦 15楼F室',
-  business_hours: '08:00-22:00',
-  contact_phone: '021-8888888',
-})
-
-// 门店媒体列表（视频/图片）
-const storeMediaList = ref([
-  { type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
-  { type: 'image', url: `${OSS}images/my/store_image1.jpg`, overlay: null },
-  { type: 'image', url: `${OSS}images/my/store_image2.jpg`, overlay: null },
-  { type: 'image', url: `${OSS}images/my/store_image3.jpg`, overlay: null },
-  { type: 'image', url: `${OSS}images/my/store_image4.jpg`, overlay: null },
-  { type: 'image', url: `${OSS}images/my/store_image5.jpg`, overlay: 8 },
+// 功能卡片数据
+const storeMenus = ref([
+  {
+    id: 1,
+    title: '包间管理',
+    icon: roomIcon,
+    path: '/pages/store/room-manage',
+  },
+  {
+    id: 2,
+    title: '设备控制',
+    icon: deviceIcon,
+    path: '/pages/store/device',
+  },
+  {
+    id: 3,
+    title: '包间预定',
+    icon: bookroomIcon,
+    path: '/pages/store/bookroom',
+  },
+  {
+    id: 4,
+    title: '订单续订',
+    icon: renewIcon,
+    path: '/pages/store/renew',
+  },
 ])
 
-// 格式化账号显示（152****3412格式）
-function formatAccount(account: string) {
-  if (!account)
-    return ''
-  if (account.length <= 7)
-    return account
-  return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
-}
-
-onShow(() => {
-  const userStore = useUserStore()
-  isLogin.value = userStore.isLoggedIn
-  console.log('🚀 ~ isLogin.value:', 1)
-  if (isLogin.value) {
-    console.log('🚀 ~ isLogin.value:', 3)
-    // 获取用户详情信息接口
-    getUserInfo().then((res) => {
-      user.value = res
-    })
-  }
-  else {
-    console.log('🚀 ~ isLogin.value:', 4)
-    Object.keys(user.value).forEach((key) => {
-      user.value[key] = ''
-    })
-  }
-})
-
-onLoad(() => {
-  uni.$on('clearUser', () => {
-    console.log('🚀 ~ isLogin.value:', 2)
-
-    const userStore = useUserStore()
-    isLogin.value = userStore.isLoggedIn
-
-    Object.keys(user.value).forEach((key) => {
-      user.value[key] = ''
-    })
-  })
-})
-
-onUnload(() => {
-  uni.$off('clearUser')
-})
-
-const My = {
-  // 跳转到个人信息
-  handleToProfile: () => {
-    if (!isLogin.value) {
-      router.navigateTo('/pages/my/profile')
-    }
-    else {
-      router.navigateTo('/pages/login/login')
-    }
+const Store = {
+  /**
+   * 点击功能卡片
+   */
+  handleClickMenu: (item: any) => {
+    router.navigateTo(item.path)
   },
 
-  // 点击显示客服电话
-  handleShowService: () => {
-    showServiceMobile.value = true
-    sheetMenu.value = [
-      { name: '400-800-8888' },
-    ]
+  /**
+   * 点击更多选项
+   */
+  handleMore: () => {
+    // TODO: 实现更多选项功能
+    console.log('更多选项')
   },
 
-  // 选择菜单-拨打客服电话
-  handleSelectMenu: (item: any) => {
-    uni.makePhoneCall({
-      phoneNumber: item.item.name,
-    })
-  },
-
-  // 跳转到设置页面
-  handleToSettings: () => {
-    // TODO: 跳转到设置页面
-    console.log('跳转到设置页面')
-  },
-
-  // 编辑门店信息
-  handleEditStore: () => {
-    // TODO: 编辑门店信息
-    console.log('编辑门店信息')
-  },
-
-  // 预览媒体（视频/图片）
-  handlePreviewMedia: (index: number) => {
-    const item = storeMediaList.value[index]
-    if (item.type === 'video') {
-      // TODO: 播放视频
-      console.log('播放视频', item.url)
-    }
-    else {
-      // 预览图片
-      const urls = storeMediaList.value
-        .filter(i => i.type === 'image' && !i.overlay)
-        .map(i => i.url)
-      uni.previewImage({
-        current: index,
-        urls,
-      })
-    }
+  /**
+   * 点击目标图标
+   */
+  handleTarget: () => {
+    // TODO: 实现目标功能
+    console.log('目标功能')
   },
 }
 </script>
 
 <template>
   <view>
-    <view class="home-bg fixed left-0 top-0 w-[100%]" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
-      <wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
-        <template #left>
-          <view class="ml-16rpx flex items-center" @click="My.handleToSettings" />
-        </template>
-        <template #right>
-          <view class="right-slot mr-16rpx flex">
-            <view class="mr-16rpx flex flex-col" @click="My.handleShowService">
-              <wd-icon name="setting" color="#fff" size="16px" />
-            </view>
-          </view>
-        </template>
-      </wd-navbar>
+    <!-- 导航栏 -->
+    <view>
+      <navbar title="门店管理" custom-class="!bg-white" />
     </view>
 
-    <view class="pb-0rpx" :style="{ paddingTop: `${navbarHeight}px` }">
-      <!-- 账号昵称显示 -->
-      <view class="user-info-bg relative z-10 ml-30rpx mr-30rpx flex items-center" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
-        <view class="relative z-10">
-          <wd-img width="120rpx" height="120rpx" :src="(isLogin && user.avatar) ? user.avatar : defaultAvatar" mode="aspectFill" round />
-        </view>
-        <view class="relative z-10 ml-22rpx flex flex-1 items-center justify-between">
-          <view class="flex-1" @click="My.handleToProfile">
-            <view class="ml-8rpx flex items-center text-36rpx leading-50rpx" style="color: #fff;">
-              {{ isLogin ? user.nickname : '立即登录' }}
-              <wd-icon v-if="isLogin" name="arrow-right" size="24rpx" color="#fff" class="ml-8rpx" />
-            </view>
-            <view v-if="isLogin" class="ml-8rpx mt-8rpx text-24rpx leading-34rpx" style="color: #fff;">
-              账号: {{ formatAccount(user.account || user.mobile) }}
-            </view>
+    <!-- 功能卡片网格 -->
+    <view class="px-30rpx pt-40rpx">
+      <view class="grid grid-cols-2 gap-30rpx">
+        <view
+          v-for="item in storeMenus"
+          :key="item.id"
+          class="flex flex-col items-center rounded-16rpx bg-white p-40rpx"
+          @click="Store.handleClickMenu(item)"
+        >
+          <!-- 图标区域 -->
+          <view class="mb-24rpx h-160rpx w-160rpx flex items-center justify-center rounded-16rpx bg-[#F0F9FF]">
+            <wd-img width="120rpx" height="120rpx" :src="item.icon" mode="aspectFit" />
           </view>
-          <view class="relative ml-20rpx" @click="router.navigateTo('/bundle/wallet/wallet')">
-            <view class="h-148rpx w-300rpx">
-              <wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill" />
-            </view>
-            <view class="absolute bottom-12rpx left-24rpx">
-              <view class="flex items-center">
-                <view class="text-30rpx text-[#303133] font-bold leading-36rpx">
-                  ￥{{ isLogin ? user.user_money : '0.00' }}
-                </view>
-              </view>
-              <view class="ml-0rpx mt-4rpx text-20rpx text-[#909399] leading-28rpx">
-                钱包余额
-              </view>
-            </view>
-          </view>
-        </view>
-      </view>
-
-      <!-- 门店信息区域 -->
-      <view class="store-info-card mt-28rpx bg-white py-30rpx pl-30rpx">
-        <view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
-          门店茶址24小时智能茶室(中新店)地址
-        </view>
-        <view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
-          <text class="w-140rpx">抖音uid:</text>
-          <text class="flex-1 text-[#000]">{{ storeInfo.douyin_uid || '236598984587' }}</text>
-        </view>
-        <view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
-          <text class="w-140rpx">门店地址:</text>
-          <text class="flex-1 text-[#000]">{{ storeInfo.address || '上海浦东新区新金桥路58号新银东大厦 15楼F室' }}</text>
-        </view>
-        <view class="relative mb-16rpx flex items-center">
-          <view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
-            <text class="w-140rpx">营业时间:</text>
-            <text class="flex-1 text-[#000]">{{ storeInfo.business_hours || '08:00-22:00' }}</text>
-          </view>
-          <view class="modify-btn absolute right-0 flex items-center px-20rpx py-8rpx" :style="{ backgroundImage: modifyBg ? `url('${modifyBg}')` : 'none' }" @click="My.handleEditStore">
-            <wd-img width="24rpx" height="24rpx" :src="editIcon" class="mr-8rpx" />
-            <text class="text-24rpx text-[#fff]">修改</text>
-          </view>
-        </view>
-        <view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
-          <text class="w-140rpx">联系电话:</text>
-          <text class="flex-1 text-[#000]">{{ storeInfo.contact_phone || '021-8888888' }}</text>
-        </view>
-      </view>
-
-      <!-- 门店视频/图片区域 -->
-      <view class="bg-white px-30rpx">
-        <view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
-          门店视频/图片
-        </view>
-        <view class="grid grid-cols-3 gap-16rpx">
-          <view
-            v-for="(item, index) in storeMediaList"
-            :key="index"
-            class="relative aspect-square w-full overflow-hidden rounded-8rpx"
-            @click="My.handlePreviewMedia(index)"
-          >
-            <wd-img
-              width="100%"
-              height="100%"
-              :src="item.url"
-              mode="aspectFill"
-            />
-            <!-- 视频播放图标 -->
-            <view v-if="item.type === 'video'" class="absolute inset-0 flex items-center justify-center">
-              <wd-img width="60rpx" height="60rpx" :src="playIcon" />
-            </view>
-            <!-- +8 遮罩 -->
-            <view v-if="item.overlay" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
-              <text class="text-32rpx text-[#fff] font-bold">+{{ item.overlay }}</text>
-            </view>
+          <!-- 标题 -->
+          <view class="text-30rpx text-[#303133] leading-42rpx">
+            {{ item.title }}
           </view>
         </view>
       </view>
     </view>
-
-    <!-- 客服电话 -->
-    <wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
   </view>
 </template>
 
 <style lang="scss">
-	page {
-  background: #fff;
-}
-
-.home-bg {
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: top center;
-  min-height: 450rpx;
-}
-
-.user-info-bg {
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-  background-position: top center;
-  padding-top: 20rpx;
-  padding-bottom: 20rpx;
-  min-height: 200rpx;
-}
-
-.store-info-card {
-  position: relative;
-  z-index: 10;
-  border-radius: 32rpx 32rpx 0 0;
-}
-
-.modify-btn {
-  position: absolute;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-  min-width: 160rpx;
-  height: 90rpx;
-  justify-content: space-around;
-}
-
-.right-slot {
-  padding-right: v-bind(rightPadding);
+page {
+  background: #f6f7f8;
 }
 </style>