diff --git a/config/vite.config.dev.ts b/config/vite.config.dev.ts
index c462ff3..f840381 100644
--- a/config/vite.config.dev.ts
+++ b/config/vite.config.dev.ts
@@ -14,8 +14,8 @@ export default mergeConfig(
       proxy: {
         '/api': {
           // target: 'http://8.134.75.234:8081',
-          // target: 'http://192.168.3.238:8081',
-          target: 'http://localhost:8081',
+          target: 'http://192.168.3.119:8081',
+          // target: 'http://localhost:8081',
           changeOrigin: true,
         },
       },
diff --git a/src/api/guest.ts b/src/api/guest.ts
new file mode 100644
index 0000000..ff4fd16
--- /dev/null
+++ b/src/api/guest.ts
@@ -0,0 +1,39 @@
+import axios from 'axios';
+
+export interface GuestRecord {
+  id?: number;
+  name?: string;
+  idCard?: string;
+  phone?: string;
+  roomNumber?: string;
+  checkInTime?: string;
+}
+
+export interface GuestQueryRecord {
+  size: number;
+  current: number;
+  name?: string;
+  status?: number;
+  roomNumber?: string;
+}
+
+export function queryGuestList(data: GuestQueryRecord){
+  return axios.get('/api/rest/hotel/guest', { params: data });
+}
+
+export function createGuest(data: GuestRecord) {
+  return axios.post('/api/rest/hotel/guest', data);
+}
+
+export function deleteGuest(id: number) {
+  return axios.delete(`/api/rest/hotel/guest/${id}`);
+}
+
+export function updateGuest(data: GuestRecord) {
+  return axios.patch(`/api/rest/hotel/guest/${data.id}`, data);
+}
+
+// 游客退房
+export function checkOutGuest(id: any) {
+  return axios.put(`/api/rest/hotel/guest/${id}`);
+}
\ No newline at end of file
diff --git a/src/api/hotel.ts b/src/api/hotel.ts
new file mode 100644
index 0000000..dfe774a
--- /dev/null
+++ b/src/api/hotel.ts
@@ -0,0 +1,38 @@
+import axios from 'axios';
+
+export interface HotelRecord {
+  id?: number;
+  roomNumber?: string;
+  createTime?: string;
+}
+
+export interface HotelQueryRecord {
+  size: number;
+  pages: number;
+  status?: number;
+  roomNumber?: string;
+}
+
+export interface CreateHotelRecord {
+  roomNumber: string;
+}
+
+export function createHotel(data: CreateHotelRecord) {
+  return axios.post('/api/rest/hotel/room', data);
+}
+
+export function queryHotelList(data: HotelQueryRecord) {
+  return axios.get('/api/rest/hotel/room', { params: data });
+}
+
+export function deleteHotel(id: number) {
+  return axios.delete(`/api/rest/hotel/room/${id}`);
+}
+
+export function updateHotel(id:number, data: HotelRecord) {
+  return axios.patch(`/api/rest/hotel/room/${id}`, data);
+}
+
+export function HotelList(){
+  return axios.get('/api/rest/hotel/room/unoccupied');
+}
diff --git a/src/router/routes/modules/hotel.ts b/src/router/routes/modules/hotel.ts
new file mode 100644
index 0000000..79eefe2
--- /dev/null
+++ b/src/router/routes/modules/hotel.ts
@@ -0,0 +1,46 @@
+import { DEFAULT_LAYOUT } from '../base';
+import { AppRouteRecordRaw } from '../types';
+
+const HOTEL: AppRouteRecordRaw = {
+  path: '/hotel',
+  name: 'Hotel',
+  component: DEFAULT_LAYOUT,
+  meta: {
+    locale: '酒店管理',
+    title: '酒店管理',
+    icon: 'icon-empty',
+    requiresAuth: true,
+    order: 1,
+    // permissions: ['hotel'],
+    permissions: ['*'],
+  },
+  children: [
+    {
+      path: 'room',
+      name: 'Room',
+      component: () => import('@/views/hotel/room/index.vue'),
+      meta: {
+        locale: '房间管理',
+        title: '房间管理',
+        requiresAuth: true,
+        // permissions: ['hotel:room'],
+        permissions: ['*'],
+      },
+    },
+    {
+      path: 'guest',
+      name: 'Guest',
+      component: () => import('@/views/hotel/guest/index.vue'),
+      meta: {
+        locale: '游客管理',
+        title: '游客管理',
+        requiresAuth: true,
+        // permissions: ['hotel:guest'],
+        permissions: ['*'],
+      },
+    },
+
+  ],
+};
+
+export default HOTEL;
diff --git a/src/views/hotel/guest/components/guest-edit.vue b/src/views/hotel/guest/components/guest-edit.vue
new file mode 100644
index 0000000..8122520
--- /dev/null
+++ b/src/views/hotel/guest/components/guest-edit.vue
@@ -0,0 +1,171 @@
+<template>
+  <a-button
+    v-if="props.isCreate"
+    type="primary"
+    @click="handleClick"
+  >
+    <template #icon><icon-plus /></template>
+    新建
+  </a-button>
+  <a-button
+    v-if="!props.isCreate"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px', padding: '7px' }"
+    @click="handleClick"
+  >
+    <template #icon><icon-edit /></template>
+    编辑
+  </a-button>
+  <a-modal
+    width="700px"
+    :visible="visible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+    <a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
+      <a-form-item
+        field="name"
+        label="姓名"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '姓名不能为空' }]"
+      >
+        <a-input
+          v-model="formData.name"
+          placeholder="请输入姓名"
+        />
+      </a-form-item>
+      <a-form-item
+        field="idCard"
+        label="身份证号"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '身份证号不能为空' }]"
+      >
+        <a-input
+          v-model="formData.idCard"
+          placeholder="请输入身份证号"
+        />
+      </a-form-item>
+      <a-form-item
+        field="phone"
+        label="手机号"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '手机号不能为空' }]"
+      >
+        <a-input
+          v-model="formData.phone"
+          placeholder="请输入手机号"
+        />
+      </a-form-item>
+      <a-form-item
+        field="roomNumber"
+        label="房间号"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '房间号不能为空' }]"
+      >
+        <a-select
+          v-model="formData.roomNumber"
+          placeholder="请选择房间号"
+          :options="roomOptions"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, PropType, ref } from 'vue';
+import { FormInstance, Message } from '@arco-design/web-vue';
+import useVisible from '@/hooks/visible';
+import { GuestRecord, createGuest, updateGuest } from '@/api/guest';
+  import { HotelList } from '@/api/hotel'; // 引入查询房间号的API
+
+const props = defineProps({
+  guest: {
+    type: Object as PropType<GuestRecord>,
+  },
+  isCreate: Boolean,
+});
+
+const { visible, setVisible } = useVisible(false);
+const createEditRef = ref<FormInstance>();
+
+// 房间号选项列表
+const roomOptions = ref<{ label: string; value: string }[]>([]);
+
+// 获取房间号选项
+const fetchRoomOptions = async () => {
+  try {
+    // const res = await queryHotelList({ size: 100, pages: 1 }); // 查询所有房间号
+    const res = await HotelList();
+    roomOptions.value = res.data.map((room: any) => ({
+      label: room.roomNumber,
+      value: room.roomNumber,
+    }));
+  } catch (error) {
+    Message.error({
+      content: '获取房间号失败，请重试',
+      duration: 5 * 1000,
+    });
+  }
+};
+
+// 表单数据
+const formData = ref<GuestRecord>({
+  name: '',
+  idCard: '',
+  phone: '',
+  roomNumber: '',
+  ...props.guest,
+});
+
+const emit = defineEmits(['refresh']);
+
+const modalTitle = computed(() => {
+  return props.isCreate ? '新建游客' : '编辑游客信息';
+});
+
+// 组件被点击
+const handleClick = () => {
+  setVisible(true);
+  fetchRoomOptions();
+};
+
+// 提交
+const handleSubmit = async () => {
+  const valid = await createEditRef.value?.validate();
+  if (!valid) {
+    try {
+      if (props.isCreate) {
+        await createGuest(formData.value);
+        Message.success({
+          content: '新建游客成功',
+          duration: 5 * 1000,
+        });
+      } else {
+        await updateGuest(formData.value);
+        Message.success({
+          content: '编辑游客成功',
+          duration: 5 * 1000,
+        });
+      }
+      emit('refresh');
+      setVisible(false);
+    } catch (error) {
+      Message.error({
+        content: '操作失败，请重试',
+        duration: 5 * 1000,
+      });
+    }
+  }
+};
+
+// 关闭
+const handleCancel = async () => {
+  createEditRef.value?.resetFields();
+  setVisible(false);
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/hotel/guest/index.vue b/src/views/hotel/guest/index.vue
new file mode 100644
index 0000000..a953323
--- /dev/null
+++ b/src/views/hotel/guest/index.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="container">
+    <a-card class="general-card" title="游客管理">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 12 }"
+            label-align="right"
+          >
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-form-item field="name" label="姓名">
+                  <a-input
+                    v-model="formModel.name"
+                    placeholder="请输入姓名"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item field="roomNumber" label="房间号">
+                  <a-input
+                    v-model="formModel.roomNumber"
+                    placeholder="请输入房间号"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 42px" direction="vertical" />
+        <a-col :flex="'46px'" style="text-align: right">
+          <a-space :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 10px" />
+      <a-row style="margin-bottom: 16px">
+        <a-col :span="12">
+          <a-space>
+            <GuestEdit ref="createRef" :is-create="true" @refresh="search" />
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="display: flex; align-items: center; justify-content: end"
+        >
+          <a-tooltip content="刷新">
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :columns="columns"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        :pagination="false"
+        style="margin-bottom: 40px"
+      >
+        <template #checkInTime="{ record }">
+          {{ dayjs(record.checkInTime).format('YYYY-MM-DD') }}
+        </template>
+        <template #status="{ record }">
+          <a-tag v-if="record.status === 0" color="gray">已退房</a-tag>
+          <a-tag v-else-if="record.status === 1" color="green">入住中</a-tag>
+        </template>
+        <template #operations="{ record }">
+          <GuestEdit
+            ref="editRef"
+            :guest="record"
+            :is-create="false"
+            @refresh="search"
+          />
+          <a-button
+            v-if="record.status === 1"
+            type="outline"
+            size="small"
+            status="warning"
+            style="padding: 7px;margin-right: 10px"
+            @click="handleCheckOut(record)"
+          >
+            <template #icon><icon-export /></template>
+            退房
+          </a-button>
+          <a-popconfirm
+            content="确认删除此游客？"
+            type="error"
+            @ok="handleDelete(record)"
+          >
+            <a-button
+              type="outline"
+              size="small"
+              status="danger"
+              style="padding: 7px"
+            >
+              <template #icon><icon-delete /></template>
+              删除
+            </a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+      <a-pagination
+        style="float: right; position: relative; right: 1px; bottom: 25px"
+        :total="pagination.total"
+        :size="size"
+        show-total
+        show-jumper
+        show-page-size
+        @page-size-change="onSizeChange"
+        @change="onPageChange"
+      />
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import useLoading from '@/hooks/loading';
+import dayjs from 'dayjs';
+import { Pagination } from '@/types/global';
+import { GuestRecord, queryGuestList, deleteGuest, checkOutGuest } from '@/api/guest';
+import GuestEdit from './components/guest-edit.vue';
+
+const { loading, setLoading } = useLoading(true);
+const renderData = ref<GuestRecord[]>([]);
+const formModel = ref({
+  name: '',
+  roomNumber: '',
+});
+
+const pagination: Pagination = {
+  page: 1,
+  size: 10,
+  current: 1,
+  total: 0,
+};
+
+// 表格头部
+const columns = computed(() => [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+  },
+  {
+    title: '身份证号',
+    dataIndex: 'idCard',
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phone',
+  },
+  {
+    title: '房间号',
+    dataIndex: 'roomNumber',
+  },
+  {
+    title: '入住时间',
+    dataIndex: 'checkInTime',
+    slotName: 'checkInTime',
+  },
+  {
+    title: '入住状态',
+    dataIndex: 'status',
+    slotName: 'status',
+  },
+  {
+    title: '操作',
+    dataIndex: 'operations',
+    slotName: 'operations',
+  },
+]);
+
+// 获取表格数据
+const fetchData = async (
+  params: any = { page: 1, size: 10, current: 1 }
+) => {
+  setLoading(true);
+  try {
+    const res = await queryGuestList(params);
+    renderData.value = res.data.records;
+    pagination.page = res.data.page;
+    pagination.current = res.data.current;
+    pagination.total = res.data.total;
+    pagination.size = res.data.size;
+  } catch (err) {
+    Message.error({
+      content: '获取数据失败，请重试',
+      duration: 5 * 1000,
+    });
+  } finally {
+    setLoading(false);
+  }
+};
+
+// 查询
+const search = () => {
+  fetchData({
+    ...pagination,
+    ...formModel.value,
+  });
+};
+
+// 重置
+const reset = () => {
+  formModel.value = { name: '', roomNumber: '' };
+  fetchData();
+};
+
+// 删除
+const handleDelete = async (record: GuestRecord) => {
+  try {
+    await deleteGuest(record.id!);
+    Message.success({
+      content: '删除游客成功',
+      duration: 5 * 1000,
+    });
+    fetchData();
+  } catch (error) {
+    Message.error({
+      content: '删除游客失败，请重试',
+      duration: 5 * 1000,
+    });
+  }
+};
+
+const handleCheckOut = async (record: GuestRecord) => {
+  try {
+    await checkOutGuest(record.id);
+    Message.success({
+      content: '退房成功',
+      duration: 5 * 1000,
+    });
+    fetchData();
+  } catch (error) {
+    Message.error({
+      content: '退房失败，请重试',
+      duration: 5 * 1000,
+    });
+  }
+}
+
+// 分页发生改变
+const onPageChange = (current: number) => {
+  pagination.page = current;
+  pagination.current = current;
+  search();
+};
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 0 20px 20px 20px;
+}
+.action-icon {
+  margin-left: 12px;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/hotel/room/components/room-edit.vue b/src/views/hotel/room/components/room-edit.vue
new file mode 100644
index 0000000..cd44429
--- /dev/null
+++ b/src/views/hotel/room/components/room-edit.vue
@@ -0,0 +1,111 @@
+<template>
+  <a-button
+    v-if="props.isCreate"
+    type="primary"
+    @click="handleClick"
+  >
+    <template #icon><icon-plus /></template>
+    新建
+  </a-button>
+  <a-button
+    v-if="!props.isCreate"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px', padding: '7px' }"
+    @click="handleClick"
+  >
+    <template #icon><icon-edit /></template>
+    编辑
+  </a-button>
+  <a-modal
+    width="700px"
+    :visible="visible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+    <a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
+      <a-form-item
+        field="roomNumber"
+        label="房间号"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '房间号不能为空' }]"
+      >
+        <a-input
+          v-model="formData.roomNumber"
+          placeholder="请输入房间号"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType, ref } from 'vue';
+import { FormInstance, Message } from '@arco-design/web-vue';
+import useVisible from '@/hooks/visible';
+import { HotelRecord, createHotel, updateHotel } from '@/api/hotel';
+
+const props = defineProps({
+  hotel: {
+    type: Object as PropType<HotelRecord>,
+  },
+  isCreate: Boolean,
+});
+
+const { visible, setVisible } = useVisible(false);
+const createEditRef = ref<FormInstance>();
+
+const formData = ref<HotelRecord>({
+  roomNumber: '',
+  ...props.hotel,
+});
+
+const emit = defineEmits(['refresh']);
+
+const modalTitle = computed(() => {
+  return props.isCreate ? '新建房间' : '编辑房间信息';
+});
+
+// 组件被点击
+const handleClick = () => {
+  setVisible(true);
+};
+
+// 提交
+const handleSubmit = async () => {
+  const valid = await createEditRef.value?.validate();
+  if (!valid) {
+    try {
+      if (props.isCreate) {
+        await createHotel(formData.value);
+        Message.success({
+          content: '新建房间成功',
+          duration: 5 * 1000,
+        });
+      } else {
+        await updateHotel(formData.value.id!, formData.value);
+        Message.success({
+          content: '编辑房间成功',
+          duration: 5 * 1000,
+        });
+      }
+      emit('refresh');
+      setVisible(false);
+    } catch (error) {
+      Message.error({
+        content: '操作失败，请重试',
+        duration: 5 * 1000,
+      });
+    }
+  }
+};
+
+// 关闭
+const handleCancel = async () => {
+  createEditRef.value?.resetFields();
+  setVisible(false);
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/hotel/room/index.vue b/src/views/hotel/room/index.vue
new file mode 100644
index 0000000..1d67e82
--- /dev/null
+++ b/src/views/hotel/room/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="container">
+    <a-card class="general-card" title="酒店管理">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 12 }"
+            label-align="right"
+          >
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-form-item field="roomNumber" label="房间号">
+                  <a-input
+                    v-model="formModel.roomNumber"
+                    placeholder="请输入房间号"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 42px" direction="vertical" />
+        <a-col :flex="'46px'" style="text-align: right">
+          <a-space :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 10px" />
+      <a-row style="margin-bottom: 16px">
+        <a-col :span="12">
+          <a-space>
+            <RoomEdit ref="createRef" :is-create="true" @refresh="search" />
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="display: flex; align-items: center; justify-content: end"
+        >
+          <a-tooltip content="刷新">
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :columns="columns"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        :pagination="false"
+        style="margin-bottom: 40px"
+      >
+        <template #createTime="{ record }">
+          {{ dayjs(record.createTime).format('YYYY-MM-DD') }}
+        </template>
+        <template #status="{ record }">
+          <a-tag v-if="record.status === 0" color="gray">空闲中</a-tag>
+          <a-tag v-else-if="record.status === 1" color="green">入住中</a-tag>
+        </template>
+        <template #operations="{ record }">
+          <RoomEdit
+            ref="editRef"
+            :hotel="record"
+            :is-create="false"
+            @refresh="search"
+          />
+          <a-popconfirm
+            content="确认删除此房间？"
+            type="error"
+            @ok="handleDelete(record)"
+          >
+            <a-button
+              type="outline"
+              size="small"
+              status="danger"
+              style="padding: 7px"
+            >
+              <template #icon><icon-delete /></template>
+              删除
+            </a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+      <a-pagination
+        style="float: right; position: relative; right: 1px; bottom: 25px"
+        :total="pagination.total"
+        :size="size"
+        show-total
+        show-jumper
+        show-page-size
+        @page-size-change="onSizeChange"
+        @change="onPageChange"
+      />
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import useLoading from '@/hooks/loading';
+import dayjs from 'dayjs';
+import { Pagination } from '@/types/global';
+import { HotelRecord, queryHotelList, deleteHotel } from '@/api/hotel';
+import RoomEdit from '@/views/hotel/room/components/room-edit.vue';
+import { UserParams } from '@/api/user';
+
+const { loading, setLoading } = useLoading(true);
+const renderData = ref<HotelRecord[]>([]);
+const formModel = ref({
+  roomNumber: '',
+});
+
+const pagination: Pagination = {
+  page: 1,
+  size: 10,
+  current: 1,
+  total: 10,
+};
+
+// 表格头部
+const columns = computed(() => [
+  {
+    title: '房间号',
+    dataIndex: 'roomNumber',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    slotName: 'createTime',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    slotName: 'status',
+  }
+  {
+    title: '操作',
+    dataIndex: 'operations',
+    slotName: 'operations',
+  },
+]);
+
+// 获取表格数据
+const fetchData = async (
+  params: any = { page: 1, size: 10, current: 1 }
+) => {
+  setLoading(true);
+  try {
+    const res = await queryHotelList(params);
+    renderData.value = res.data.records;
+    pagination.page = res.data.page;
+    pagination.current = res.data.current;
+    pagination.total = res.data.total;
+    pagination.size = res.data.size;
+  } catch (err) {
+    Message.error({
+      content: '获取数据失败，请重试',
+      duration: 5 * 1000,
+    });
+  } finally {
+    setLoading(false);
+  }
+};
+
+// 查询
+const search = () => {
+  fetchData({
+    ...pagination,
+    ...formModel.value,
+  } as unknown as UserParams);
+};
+
+// 重置
+const reset = () => {
+  formModel.value = { roomNumber: '' };
+  fetchData();
+};
+
+// 分页发生改变
+const onPageChange = (current: number) => {
+  pagination.page = current;
+  pagination.current = current;
+  search();
+};
+
+// 删除
+const handleDelete = async (record: HotelRecord) => {
+  try {
+    await deleteHotel(record.id!);
+    Message.success({
+      content: '删除房间成功',
+      duration: 5 * 1000,
+    });
+    fetchData();
+  } catch (error) {
+    Message.error({
+      content: '删除房间失败，请重试',
+      duration: 5 * 1000,
+    });
+  }
+};
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 0 20px 20px 20px;
+}
+.action-icon {
+  margin-left: 12px;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file