diff --git a/src/views/base/DepartmentView.vue b/src/views/base/DepartmentView.vue
index bf168b5f7fd7e5d76b0d9c52cdb8b179804763fc..0882e067bf22d39b2274fe42913224d6cc3f0d2e 100644
--- a/src/views/base/DepartmentView.vue
+++ b/src/views/base/DepartmentView.vue
@@ -177,18 +177,14 @@ const formRef = ref(null);
 const sortedInfo = ref({ order: null, columnKey: null });
 const departmentOptions = ref([]);
 const leaderOptions = ref([]);
-
-// 通用列表过滤配置与值
+const filterValues = ref({});
+const currentFilterParams = reactive({});
 const departmentFilterConfig = computed(() =>
   getDepartmentFilterConfig(t, departmentOptions.value, leaderOptions.value),
 );
-const filterValues = reactive({ [DepartmentFields.IS_DELETED]: 0 });
-
-// 将过滤表单值转换为接口查询参数
-const currentFilterParams = reactive({});
 
 const buildServerParamsFromFilters = () => {
-  const params = {};
+  let params = {};
   const fields = departmentFilterConfig.value?.fields || [];
   fields.forEach((f) => {
     const val = filterValues[f.name];
@@ -238,17 +234,14 @@ const handleFilterSearch = (vals) => {
 };
 
 const handleFilterReset = (vals) => {
-  if (vals && typeof vals === "object") {
-    // filterValues is reactive
-    Object.keys(filterValues).forEach((k) => delete filterValues[k]);
-    Object.assign(filterValues, vals);
-  } else {
-    Object.keys(filterValues).forEach((k) => (filterValues[k] = null));
-  }
   Object.keys(currentFilterParams).forEach(
     (k) => delete currentFilterParams[k],
   );
-  pagination.current = 1;
+  if (vals && typeof vals === "object") {
+    filterValues.value = { ...vals };
+  } else {
+    filterValues.value = {};
+  }
   fetchDepartmentData();
 };
 
diff --git a/src/views/customermanagement/CustomerTypeView.vue b/src/views/customermanagement/CustomerTypeView.vue
index cd816301981bcabc7748cf0d7d3d25973b9232c5..21e766142c51e80bbf6abc64083191780ec34cb6 100644
--- a/src/views/customermanagement/CustomerTypeView.vue
+++ b/src/views/customermanagement/CustomerTypeView.vue
@@ -3,21 +3,21 @@
     <h1 style="margin-bottom: 15px">{{ translatedPageTitle }}</h1>
     <div class="operation-bar">
       <a-button style="margin-right: 12px" @click="refreshData">
-        <sync-outlined /> {{ $t("message.refreshData") }}
+        <SyncOutlined /> {{ $t("message.refreshData") }}
       </a-button>
       <a-button
         v-perm="CustomerTypePermissions.CREATE"
         type="primary"
         @click="showModal"
       >
-        <plus-outlined /> {{ $t("message.insertCustomerType") }}
+        <PlusOutlined /> {{ $t("message.insertCustomerType") }}
       </a-button>
     </div>
 
     <a-collapse style="margin-bottom: 15px">
       <a-collapse-panel key="1" :header="$t('message.filter')">
         <template #expandIcon="{ isActive }">
-          <caret-right-outlined
+          <CaretRightOutlined
             :style="{ transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }"
           />
         </template>
@@ -48,14 +48,14 @@
             style="margin-right: 12px"
             @click="editCustomerType(record)"
           >
-            <edit-outlined /> {{ $t("message.edit") }}
+            <EditOutlined /> {{ $t("message.edit") }}
           </a-button>
           <a-popconfirm
             :title="t('message.areYouSureToDeleteRecord')"
             @confirm="handleDelete(record)"
           >
             <a-button v-perm="CustomerTypePermissions.DELETE" danger>
-              <delete-outlined /> {{ $t("message.delete") }}
+              <DeleteOutlined /> {{ $t("message.delete") }}
             </a-button>
           </a-popconfirm>
         </template>
@@ -124,13 +124,6 @@ import {
   updateCustomerType,
   deleteCustomerType,
 } from "@/api/customertypeapi";
-import {
-  SyncOutlined,
-  PlusOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  CaretRightOutlined,
-} from "@ant-design/icons-vue";
 import { showErrorNotification, showSuccessNotification } from "@/utils/index";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getCustomerTypeFilterConfig } from "@/filters/customertype.filter.config";
diff --git a/src/views/customermanagement/VipLevelView.vue b/src/views/customermanagement/VipLevelView.vue
index 7ff812bacf53721d4bbf62dc9907c42aae6c3739..340c599462f6a2e01ede2356358c180f609e80c3 100644
--- a/src/views/customermanagement/VipLevelView.vue
+++ b/src/views/customermanagement/VipLevelView.vue
@@ -4,20 +4,20 @@
     <a-button
       style="margin-bottom: 15px; margin-right: 15px"
       @click="refreshData"
-      ><sync-outlined /> {{ $t("message.refreshData") }}</a-button
+      ><SyncOutlined /> {{ $t("message.refreshData") }}</a-button
     >
     <a-button
       v-perm="VipLevelPermissions.CREATE"
       type="primary"
       style="margin-bottom: 15px"
       @click="showModal"
-      ><plus-outlined /> {{ $t("message.insertVipRule") }}</a-button
+      ><PlusOutlined /> {{ $t("message.insertVipRule") }}</a-button
     >
 
     <a-collapse style="margin-bottom: 15px">
       <a-collapse-panel key="1" :header="$t('message.filter')">
         <template #expandIcon="{ isActive }">
-          <caret-right-outlined
+          <CaretRightOutlined
             :style="{ transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }"
           />
         </template>
@@ -47,14 +47,14 @@
             v-perm="VipLevelPermissions.UPDATE"
             style="margin-right: 15px"
             @click="editVipRule(record)"
-            ><edit-outlined /> {{ $t("message.edit") }}</a-button
+            ><EditOutlined /> {{ $t("message.edit") }}</a-button
           >
           <a-popconfirm
             :title="t('message.areYouSureToDeleteRecord')"
             @confirm="handleDelete(record)"
           >
             <a-button v-perm="VipLevelPermissions.DELETE" danger
-              ><delete-outlined /> {{ $t("message.delete") }}</a-button
+              ><DeleteOutlined /> {{ $t("message.delete") }}</a-button
             >
           </a-popconfirm>
         </template>
@@ -140,11 +140,6 @@ import { VipLevelPermissions } from "@/common/permissioncode";
 import { formatCurrency } from "@/utils/index";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getVipRuleFilterConfig } from "@/filters/viprule.filter.config";
-import {
-  SyncOutlined,
-  EditOutlined,
-  CaretRightOutlined,
-} from "@ant-design/icons-vue";
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/src/views/finance/InternalFinanceView.vue b/src/views/finance/InternalFinanceView.vue
index 699852515722f906747a5ca0e5f24f4365b412b5..f8604aab6efffc35a08da5c6120c002480e8d56c 100644
--- a/src/views/finance/InternalFinanceView.vue
+++ b/src/views/finance/InternalFinanceView.vue
@@ -4,19 +4,19 @@
     <a-button
       style="margin-bottom: 15px; margin-right: 15px"
       @click="refreshData"
-      ><sync-outlined /> {{ $t("message.refreshData") }}</a-button
+      ><SyncOutlined /> {{ $t("message.refreshData") }}</a-button
     >
     <a-button
       v-perm="InternalFinancePermissions.CREATE"
       type="primary"
       style="margin-bottom: 15px"
       @click="showModal"
-      ><plus-outlined /> {{ $t("message.insertInternalFinance") }}</a-button
+      ><PlusOutlined /> {{ $t("message.insertInternalFinance") }}</a-button
     >
     <a-collapse style="margin-bottom: 15px">
       <a-collapse-panel key="1" :header="$t('message.filter')">
         <template #expandIcon="{ isActive }">
-          <caret-right-outlined
+          <CaretRightOutlined
             :style="{ transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }"
           />
         </template>
@@ -185,7 +185,6 @@ import { InternalFinancePermissions } from "@/common/permissioncode";
 import dayjs from "dayjs";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getInternalFinanceFilterConfig } from "@/filters/internalfinance.filter.config";
-import { DeleteOutlined } from "@ant-design/icons-vue";
 
 const { t } = useI18n();
 const route = useRoute();
@@ -208,7 +207,7 @@ const internalfinanceFilterConfig = computed(() =>
     personOptions.value,
   ),
 );
-const filterValues = reactive({ [InternalFinanceFields.IS_DELETED]: 0 });
+const filterValues = ref({ [InternalFinanceFields.IS_DELETED]: 0 });
 const currentFilterParams = reactive({});
 
 const form = reactive({ ...initialFormValues });
diff --git a/src/views/humanresourcemanagement/StaffManagementView.vue b/src/views/humanresourcemanagement/StaffManagementView.vue
index 3c02f9aa347bc5a87052b37e400b7ca31ae59042..b9315280c4d72861b70fa55d5b3594f4fba3e988 100644
--- a/src/views/humanresourcemanagement/StaffManagementView.vue
+++ b/src/views/humanresourcemanagement/StaffManagementView.vue
@@ -392,7 +392,7 @@ const employeeFilterConfig = computed(() =>
     staffPositionOptions.value,
   ),
 );
-const filterValues = reactive({ [EmployeeFields.IS_DELETED]: 0 });
+const filterValues = ref({ [EmployeeFields.IS_DELETED]: 0 });
 
 const viewDetail = (record) => {
   router.push({
@@ -472,7 +472,7 @@ const buildServerParamsFromFilters = () => {
   const params = {};
   const fields = employeeFilterConfig.value?.fields || [];
   fields.forEach((f) => {
-    const val = filterValues[f.name];
+    const val = filterValues.value[f.name];
     if (
       val === null ||
       val === undefined ||
@@ -508,7 +508,7 @@ const buildServerParamsFromFilters = () => {
 };
 
 const handleFilterSearch = (vals) => {
-  Object.assign(filterValues, vals);
+  filterValues.value = { ...vals };
   const built = buildServerParamsFromFilters();
   Object.keys(currentFilterParams).forEach(
     (k) => delete currentFilterParams[k],
@@ -519,13 +519,8 @@ const handleFilterSearch = (vals) => {
 };
 
 const handleFilterReset = (vals) => {
-  if (vals && typeof vals === "object") {
-    // filterValues is reactive
-    Object.keys(filterValues).forEach((k) => delete filterValues[k]);
-    Object.assign(filterValues, vals);
-  } else {
-    Object.keys(filterValues).forEach((k) => (filterValues[k] = null));
-  }
+  // 使用ref的value属性更新值
+  filterValues.value = vals ? { ...vals } : {};
   Object.keys(currentFilterParams).forEach(
     (k) => delete currentFilterParams[k],
   );
@@ -539,7 +534,7 @@ const fetchStaffData = async () => {
     const result = await fetchEmployees({
       [EmployeeFields.PAGE]: pagination.current,
       [EmployeeFields.PAGE_SIZE]: pagination.pageSize,
-      [EmployeeFields.IS_DELETED]: filterValues[EmployeeFields.IS_DELETED],
+      [EmployeeFields.IS_DELETED]: filterValues.value[EmployeeFields.IS_DELETED],
       ...currentFilterParams,
     });
     if (result?.Items) {
diff --git a/src/views/hydroelectricity/HydroelectricityInfoView.vue b/src/views/hydroelectricity/HydroelectricityInfoView.vue
index bf874f26763fd30c05bba3faa2d9f5990701a7d7..5238ed9f0e9547708de1e6524bf2cfa67e5485a7 100644
--- a/src/views/hydroelectricity/HydroelectricityInfoView.vue
+++ b/src/views/hydroelectricity/HydroelectricityInfoView.vue
@@ -4,13 +4,13 @@
     <a-button
       style="margin-bottom: 15px; margin-right: 15px"
       @click="refreshData"
-      ><sync-outlined /> {{ $t("message.refreshData") }}</a-button
+      ><SyncOutlined /> {{ $t("message.refreshData") }}</a-button
     >
 
     <a-collapse style="margin-bottom: 15px">
       <a-collapse-panel key="1" :header="$t('message.filter')">
         <template #expandIcon="{ isActive }">
-          <caret-right-outlined
+          <CaretRightOutlined
             :style="{ transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }"
           />
         </template>
@@ -40,14 +40,14 @@
             v-perm="HydroelectricityPermissions.UPDATE"
             style="margin-right: 15px"
             @click="editHydroelectricity(record)"
-            ><edit-outlined /> {{ $t("message.edit") }}</a-button
+            ><EditOutlined /> {{ $t("message.edit") }}</a-button
           >
           <a-popconfirm
             :title="t('message.areYouSureToDeleteRecord')"
             @confirm="handleDelete(record)"
           >
             <a-button v-perm="HydroelectricityPermissions.DELETE" danger
-              ><delete-outlined /> {{ $t("message.delete") }}</a-button
+              ><DeleteOutlined /> {{ $t("message.delete") }}</a-button
             >
           </a-popconfirm>
         </template>
@@ -137,11 +137,6 @@ import { HydroelectricityPermissions } from "@/common/permissioncode";
 import dayjs from "dayjs";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getEnergyManagementFilterConfig } from "@/filters/energymanagement.filter.config";
-import {
-  SyncOutlined,
-  EditOutlined,
-  CaretRightOutlined,
-} from "@ant-design/icons-vue";
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/src/views/materialmanagement/GoodsmanagementView.vue b/src/views/materialmanagement/GoodsmanagementView.vue
index d2a57626c7a2b69e2c4a10117e4a5811e4177e3a..a2b1799d3de7918c1b09cf00f0415c9428de752e 100644
--- a/src/views/materialmanagement/GoodsmanagementView.vue
+++ b/src/views/materialmanagement/GoodsmanagementView.vue
@@ -4,20 +4,20 @@
     <a-button
       style="margin-bottom: 15px; margin-right: 15px"
       @click="refreshData"
-      ><sync-outlined /> {{ $t("message.refreshData") }}</a-button
+      ><SyncOutlined /> {{ $t("message.refreshData") }}</a-button
     >
     <a-button
       v-perm="GoodsManagementPermissions.CREATE"
       type="primary"
       style="margin-bottom: 15px"
       @click="showModal"
-      ><plus-outlined /> {{ $t("message.insertGoods") }}</a-button
+      ><PlusOutlined /> {{ $t("message.insertGoods") }}</a-button
     >
 
     <a-collapse style="margin-bottom: 15px">
       <a-collapse-panel key="1" :header="$t('message.filter')">
         <template #expandIcon="{ isActive }">
-          <caret-right-outlined
+          <CaretRightOutlined
             :style="{ transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }"
           />
         </template>
@@ -47,14 +47,14 @@
             v-perm="GoodsManagementPermissions.UPDATE"
             style="margin-right: 15px"
             @click="editGoods(record)"
-            ><edit-outlined /> {{ $t("message.edit") }}</a-button
+            ><EditOutlined /> {{ $t("message.edit") }}</a-button
           >
           <a-popconfirm
             :title="t('message.areYouSureToDeleteRecord')"
             @confirm="handleDelete(record)"
           >
             <a-button v-perm="GoodsManagementPermissions.DELETE" danger
-              ><delete-outlined /> {{ $t("message.delete") }}</a-button
+              ><DeleteOutlined /> {{ $t("message.delete") }}</a-button
             >
           </a-popconfirm>
         </template>
@@ -131,11 +131,6 @@ import { showErrorNotification, showSuccessNotification } from "@/utils/index";
 import generateSnowflakeId from "@/utils/snowflake";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getGoodsFilterConfig } from "@/filters/goods.filter.config";
-import {
-  SyncOutlined,
-  EditOutlined,
-  CaretRightOutlined,
-} from "@ant-design/icons-vue";
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/src/views/operationmanagement/OperationLogView.vue b/src/views/operationmanagement/OperationLogView.vue
index 7924fa863bacb1db2fada0bb503dd7ae89419fec..d0aba7add2e3ada6c635694d436e38812b8c1708 100644
--- a/src/views/operationmanagement/OperationLogView.vue
+++ b/src/views/operationmanagement/OperationLogView.vue
@@ -97,7 +97,7 @@ const dateRange = ref([]);
 
 // 通用列表过滤配置与值
 const logFilterConfig = computed(() => getLogFilterConfig(t));
-const filterValues = reactive({ [LogFields.IS_DELETED]: 0 });
+const filterValues = ref({ [LogFields.IS_DELETED]: 0 });
 
 const pagination = reactive({
   current: 1,
diff --git a/src/views/operationmanagement/RequestLogView.vue b/src/views/operationmanagement/RequestLogView.vue
index f6f28c5b6ecd707b12e87590dcb71b8ca3968fe9..176f156eec6d17d30f386e1a84f2504c32f846cd 100644
--- a/src/views/operationmanagement/RequestLogView.vue
+++ b/src/views/operationmanagement/RequestLogView.vue
@@ -63,7 +63,7 @@ const logs = ref([]);
 const logLevelFilter = ref(null);
 const dateRange = ref([]);
 
-const filterValues = reactive({});
+const filterValues = ref({});
 const currentFilterParams = reactive({});
 
 const pagination = reactive({
diff --git a/src/views/roominformation/ReserManagementView.vue b/src/views/roominformation/ReserManagementView.vue
index e505c8077729e6be239a923bb7501824544901b4..9c548b5ef90770261b2a3f33bd86d5f846217795 100644
--- a/src/views/roominformation/ReserManagementView.vue
+++ b/src/views/roominformation/ReserManagementView.vue
@@ -4,19 +4,19 @@
     <a-button
       style="margin-bottom: 15px; margin-right: 15px"
       @click="refreshData"
-      ><sync-outlined /> {{ $t("message.refreshData") }}</a-button
+      ><SyncOutlined /> {{ $t("message.refreshData") }}</a-button
     >
     <a-button
       v-perm="ReservationManagementPermissions.CREATE"
       type="primary"
       style="margin-bottom: 15px"
       @click="showModal"
-      ><plus-outlined /> {{ $t("message.insertReser") }}</a-button
+      ><PlusOutlined /> {{ $t("message.insertReser") }}</a-button
     >
     <a-collapse style="margin-bottom: 15px">
       <a-collapse-panel key="1" :header="$t('message.filter')">
         <template #expandIcon="{ isActive }">
-          <caret-right-outlined
+          <CaretRightOutlined
             :style="{ transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }"
           />
         </template>
@@ -45,14 +45,14 @@
             v-perm="ReservationManagementPermissions.UPDATE"
             style="margin-right: 15px"
             @click="editReser(record)"
-            ><edit-outlined /> {{ $t("message.edit") }}</a-button
+            ><EditOutlined /> {{ $t("message.edit") }}</a-button
           >
           <a-popconfirm
             :title="t('message.areYouSureToDeleteRecord')"
             @confirm="handleDelete(record)"
           >
             <a-button v-perm="ReservationManagementPermissions.DELETE" danger
-              ><delete-outlined /> {{ $t("message.delete") }}</a-button
+              ><DeleteOutlined /> {{ $t("message.delete") }}</a-button
             >
           </a-popconfirm>
         </template>
@@ -143,13 +143,6 @@ import {
 import { RoomFields } from "@/entities/room.entity";
 import { ConstantFields } from "@/entities/constant.entity";
 import { useI18n } from "vue-i18n";
-import {
-  SyncOutlined,
-  PlusOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  CaretRightOutlined,
-} from "@ant-design/icons-vue";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getReserFilterConfig } from "@/filters/reser.filter.config";
 import dayjs from "dayjs";
@@ -177,7 +170,7 @@ const currentFilterParams = reactive({});
 const reserFilterConfig = computed(() =>
   getReserFilterConfig(t, roomOptions.value, reserTypeOptions.value),
 );
-const filterValues = reactive({ [ReserFields.IS_DELETED]: 0 });
+const filterValues = ref({ [ReserFields.IS_DELETED]: 0 });
 const displayResers = computed(() => {
   const items = resers.value || [];
   let fields = reserFilterConfig.value?.fields || [];
diff --git a/src/views/roominformation/RoomConfigView.vue b/src/views/roominformation/RoomConfigView.vue
index c5dd353391c8795266d702e40cc7ff8718d08ba1..028a15ff0131be7d72e3cc5929c5ff078b95fce8 100644
--- a/src/views/roominformation/RoomConfigView.vue
+++ b/src/views/roominformation/RoomConfigView.vue
@@ -4,20 +4,20 @@
     <a-button
       style="margin-bottom: 15px; margin-right: 15px"
       @click="refreshData"
-      ><sync-outlined /> {{ $t("message.refreshData") }}</a-button
+      ><SyncOutlined /> {{ $t("message.refreshData") }}</a-button
     >
     <a-button
       v-perm="RoomConfigPermissions.CREATE"
       type="primary"
       style="margin-bottom: 15px"
       @click="showModal"
-      ><plus-outlined /> {{ $t("message.insertRoomConfig") }}</a-button
+      ><PlusOutlined /> {{ $t("message.insertRoomConfig") }}</a-button
     >
 
     <a-collapse style="margin-bottom: 15px">
       <a-collapse-panel key="1" :header="$t('message.filter')">
         <template #expandIcon="{ isActive }">
-          <caret-right-outlined
+          <CaretRightOutlined
             :style="{ transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }"
           />
         </template>
@@ -47,14 +47,14 @@
             v-perm="RoomConfigPermissions.UPDATE"
             style="margin-right: 15px"
             @click="editRoomConfig(record)"
-            ><edit-outlined /> {{ $t("message.edit") }}</a-button
+            ><EditOutlined /> {{ $t("message.edit") }}</a-button
           >
           <a-popconfirm
             :title="t('message.areYouSureToDeleteRecord')"
             @confirm="handleDelete(record)"
           >
             <a-button v-perm="RoomConfigPermissions.DELETE" danger
-              ><delete-outlined /> {{ $t("message.delete") }}</a-button
+              ><DeleteOutlined /> {{ $t("message.delete") }}</a-button
             >
           </a-popconfirm>
         </template>
@@ -131,11 +131,6 @@ import { RoomConfigPermissions } from "@/common/permissioncode";
 import { formatCurrency } from "@/utils/index";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getRoomConfigFilterConfig } from "@/filters/roomconfig.filter.config";
-import {
-  SyncOutlined,
-  EditOutlined,
-  CaretRightOutlined,
-} from "@ant-design/icons-vue";
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/src/views/roominformation/RoomManagementView.vue b/src/views/roominformation/RoomManagementView.vue
index 87de82c69f8809866e0799183a4ed70b4dbc53cf..3187310bc2049ecece51dffe104fa688dba68066 100644
--- a/src/views/roominformation/RoomManagementView.vue
+++ b/src/views/roominformation/RoomManagementView.vue
@@ -4,20 +4,20 @@
     <a-button
       style="margin-bottom: 15px; margin-right: 15px"
       @click="refreshData"
-      ><sync-outlined /> {{ $t("message.refreshData") }}</a-button
+      ><SyncOutlined /> {{ $t("message.refreshData") }}</a-button
     >
     <a-button
       v-perm="RoomManagementPermissions.CREATE"
       type="primary"
       style="margin-bottom: 15px"
       @click="showModal"
-      ><plus-outlined /> {{ $t("message.insertRoom") }}</a-button
+      ><PlusOutlined /> {{ $t("message.insertRoom") }}</a-button
     >
 
     <a-collapse style="margin-bottom: 15px">
       <a-collapse-panel key="1" :header="$t('message.filter')">
         <template #expandIcon="{ isActive }">
-          <caret-right-outlined
+          <CaretRightOutlined
             :style="{ transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }"
           />
         </template>
@@ -47,14 +47,14 @@
             v-perm="RoomManagementPermissions.UPDATE"
             style="margin-right: 15px"
             @click="editRoom(record)"
-            ><edit-outlined /> {{ $t("message.edit") }}</a-button
+            ><EditOutlined /> {{ $t("message.edit") }}</a-button
           >
           <a-popconfirm
             :title="t('message.areYouSureToDeleteRecord')"
             @confirm="handleDelete(record)"
           >
             <a-button v-perm="RoomManagementPermissions.DELETE" danger
-              ><delete-outlined /> {{ $t("message.delete") }}</a-button
+              ><DeleteOutlined /> {{ $t("message.delete") }}</a-button
             >
           </a-popconfirm>
         </template>
@@ -133,11 +133,6 @@ import { useI18n } from "vue-i18n";
 import { RoomManagementPermissions } from "@/common/permissioncode";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getRoomFilterConfig } from "@/filters/room.filter.config";
-import {
-  SyncOutlined,
-  EditOutlined,
-  CaretRightOutlined,
-} from "@ant-design/icons-vue";
 
 const { t } = useI18n();
 const route = useRoute();