From 68d834aec9d4efb12cebb66db1d574b100c16788 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Thu, 19 Jun 2025 15:33:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AA=9E=E8=A8=80=E5=8C=85?=
 =?UTF-8?q?=E3=80=81=E5=82=B3=E5=85=A5=E5=8F=83=E6=95=B8=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E3=80=81=E6=AC=84=E4=BD=8D=E5=BF=85=E5=A1=AB=E7=AD=89bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customUI/FileSystemCollapse.vue           |  3 +-
 src/components/customUI/Input.vue             |  2 +-
 src/components/customUI/InputNumber.vue       |  2 +-
 src/components/customUI/Modal.vue             |  2 +-
 src/components/customUI/RadioGroup.vue        |  2 +-
 src/components/customUI/SearchSelect.vue      |  2 +-
 src/components/customUI/Select.vue            |  4 +-
 src/components/customUI/Textarea.vue          |  2 +-
 src/components/navbar/Navbar.vue              | 25 ++++++++--
 src/config/cn.json                            |  3 +-
 src/config/tw.json                            |  3 +-
 src/config/us.json                            |  3 +-
 src/router/index.js                           |  9 ----
 .../components/AssetMainListAddModal.vue      |  5 +-
 .../components/AssetSubListAddModal.vue       |  7 ++-
 .../AssetManagement/components/AssetTable.vue | 47 +++++++++++++------
 .../components/AssetTableAddModal.vue         |  3 +-
 .../AssetTableModalLeftInfoDept.vue           |  2 +-
 .../AssetTableModalLeftInfoGraph.vue          |  2 +-
 .../components/AssetTableModalLeftInfoIoT.vue |  2 +-
 .../AssetTableModalLeftInfoMQTT.vue           |  2 +-
 .../accountManagement/AccountManagement.vue   |  6 +--
 .../components/AccountModal.vue               |  2 +-
 .../components/AccountPasswordModal.vue       |  4 +-
 .../components/RoleAuthModal.vue              |  2 +-
 src/views/alert/AlertManagement.vue           |  6 +--
 .../components/AlertQuery/AlertTableModal.vue |  4 +-
 .../AlertSetting/AlertNotifyTableAddModal.vue |  5 +-
 .../AlertOutliersTableAddModal.vue            |  3 +-
 .../components/AlertSetting/AlertSetting.vue  | 30 +++++++-----
 src/views/dashboard/Dashboard.vue             |  2 +-
 .../components/DashboardElecRank.vue          |  2 +-
 .../components/DashboardSysProgressModal.vue  | 14 +++++-
 .../energyManagement/EnergyManagement.vue     |  8 ++--
 .../EnergyChart/CarbonEmissionModal.vue       | 13 +++--
 .../EnergyChart/ElecConsumption.vue           | 23 +++++++--
 .../EnergyChart/ImmediateDemandModal.vue      |  2 +-
 .../EnergyHistoryTable/EnergyDataTable.vue    |  2 +-
 .../graphManagement/components/GraphModal.vue |  2 +-
 .../history/components/HistorySidebar.vue     |  2 +-
 .../components/OperationSearchType.vue        |  2 +-
 .../components/OperationTableModal.vue        |  2 +-
 src/views/setting/SettingManagement.vue       | 18 +++----
 .../setting/components/BuildingModal.vue      |  2 +-
 src/views/setting/components/DeptModal.vue    |  2 +-
 .../components/ElecPriceManagement.vue        |  6 +--
 .../setting/components/ElecTypeModal.vue      |  2 +-
 src/views/setting/components/FloorsModal.vue  |  2 +-
 .../setting/components/MQTTListAddModal.vue   |  9 +++-
 src/views/setting/components/VendorModal.vue  |  2 +-
 src/views/system/components/SystemCard.vue    |  4 +-
 .../components/SystemInfoModalContent.vue     | 16 +++----
 52 files changed, 195 insertions(+), 136 deletions(-)

diff --git a/src/components/customUI/FileSystemCollapse.vue b/src/components/customUI/FileSystemCollapse.vue
index 7b058b0..ae41078 100644
--- a/src/components/customUI/FileSystemCollapse.vue
+++ b/src/components/customUI/FileSystemCollapse.vue
@@ -64,10 +64,11 @@ watch(
       twMerge(
         'flex-col text-xl',
         cls,
-        openChildren.includes(dataParentKey) || open ? 'flex' : 'hidden'
+        openChildren.includes(d.key) || open ? 'flex' : 'hidden'
       )
     "
     v-for="d in data"
+    :key="d.key"
     :data-parent="d.key"
     :open="open"
   >
diff --git a/src/components/customUI/Input.vue b/src/components/customUI/Input.vue
index 5930c2a..bbaf4c5 100644
--- a/src/components/customUI/Input.vue
+++ b/src/components/customUI/Input.vue
@@ -9,7 +9,7 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  value: String,
+  value: Object,
   isTopLabelExist: {
     type: Boolean,
     default: true,
diff --git a/src/components/customUI/InputNumber.vue b/src/components/customUI/InputNumber.vue
index 4bc9ea4..39cf804 100644
--- a/src/components/customUI/InputNumber.vue
+++ b/src/components/customUI/InputNumber.vue
@@ -9,7 +9,7 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  value: String,
+  value: Object,
   isTopLabelExist: {
     type: Boolean,
     default: true,
diff --git a/src/components/customUI/Modal.vue b/src/components/customUI/Modal.vue
index 7e7e77a..ed875ab 100644
--- a/src/components/customUI/Modal.vue
+++ b/src/components/customUI/Modal.vue
@@ -51,7 +51,7 @@ onMounted(() => {
       : 'focus-visible:outline-none backdrop:bg-transparent',
   )" :style="modalStyle" v-draggable="draggable">
     <div :class="twMerge(
-      'modal-box static rounded-md border border-info py-5 px-6 overflow-y-scroll bg-normal',
+      'modal-box static rounded-md border border-info py-5 px-6 overflow-y-auto bg-normal',
       modalClass
     )
       " :style="{ minWidth: isNaN(width) ? width : `${width}px` }">
diff --git a/src/components/customUI/RadioGroup.vue b/src/components/customUI/RadioGroup.vue
index f0ed74a..1e949af 100644
--- a/src/components/customUI/RadioGroup.vue
+++ b/src/components/customUI/RadioGroup.vue
@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 
 const props = defineProps({
   name: String,
-  value: String,
+  value: Object,
   items: Array,
   isLabelExist: {
     type: Boolean,
diff --git a/src/components/customUI/SearchSelect.vue b/src/components/customUI/SearchSelect.vue
index ae493eb..17fa2ac 100644
--- a/src/components/customUI/SearchSelect.vue
+++ b/src/components/customUI/SearchSelect.vue
@@ -18,7 +18,7 @@ const props = defineProps({
   Attribute: String,
   onChange: Function,
   selectClass: String,
-  value: String || Number,
+  value: Object,
   isTopLabelExist: {
     type: Boolean,
     default: true,
diff --git a/src/components/customUI/Select.vue b/src/components/customUI/Select.vue
index 41166bc..1396843 100644
--- a/src/components/customUI/Select.vue
+++ b/src/components/customUI/Select.vue
@@ -18,7 +18,7 @@ const props = defineProps({
   Attribute: String,
   onChange: Function,
   selectClass: String,
-  value: String || Number,
+  value: Object,
   isTopLabelExist: {
     type: Boolean,
     default: true,
@@ -70,9 +70,7 @@ const props = defineProps({
         :class="twMerge(disabled ? `text-white` : 'text-dark')"
         :value="option.value || option.key || option"
       >
-        <span>
           {{ option[Attribute] || option }}
-        </span>
       </option>
     </select>
     <div :class="twMerge(isBottomLabelExist ? 'label' : '')">
diff --git a/src/components/customUI/Textarea.vue b/src/components/customUI/Textarea.vue
index e14f010..02f6c0c 100644
--- a/src/components/customUI/Textarea.vue
+++ b/src/components/customUI/Textarea.vue
@@ -3,7 +3,7 @@ import { defineProps } from "vue";
 
 const props = defineProps({
   name: String,
-  value: String,
+  value: Object,
   placeholder: String,
 });
 </script>
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index 480984f..6610ac3 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import NavbarItem from "./NavbarItem.vue";
 import NavbarBuilding from "./NavbarBuilding.vue";
 import Logo from "@/assets/img/logo.svg";
@@ -10,6 +11,7 @@ import { twMerge } from "tailwind-merge";
 
 const user = ref("");
 const menuShow = ref(true);
+const router = useRouter();
 
 const store = useUserInfoStore();
 onMounted(() => {
@@ -24,12 +26,25 @@ const toggleMenu = () => {
 };
 
 const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
+
+const logout = () => {
+  document.cookie = "JWT-Authorization=; Max-Age=0";
+  document.cookie = "user_name=; Max-Age=0";
+  store.user.token = "";
+  store.user.user_name = "";
+  router.push({ path: "/login" });
+};
 </script>
 
 <template>
   <header class="navbar bg-dark text-light-info w-full relative z-50">
     <div class="navbar-start min-w-[480px] lg:min-w-[440px]">
-      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" @click="toggleMenu">
+      <div
+        tabindex="0"
+        role="button"
+        class="btn btn-ghost lg:hidden"
+        @click="toggleMenu"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="h-5 w-5"
@@ -93,12 +108,12 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
               class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
             >
               <li class="text-white">
-                <router-link
-                  to="logout"
-                  type="link"
+                <a
+                  href="#"
+                  @click.prevent="logout"
                   class="flex flex-col justify-center items-center"
                   >{{ $t("sign_out") }}
-                </router-link>
+                </a>
               </li>
             </ul>
           </div>
diff --git a/src/config/cn.json b/src/config/cn.json
index e416b64..0143d23 100644
--- a/src/config/cn.json
+++ b/src/config/cn.json
@@ -399,7 +399,8 @@
     "sure_to_delete_permanent": "是否确认永久删除该项目?",
     "delete_success": "删除成功",
     "delete_failed": "删除失败",
-    "mqtt_refresh": "重新设定成功"
+    "mqtt_refresh": "重新设定成功",
+    "schema_name_required": "架构名称栏位必填"
   },
   "setting": {
     "MQTT_parse": "MQTT 解析",
diff --git a/src/config/tw.json b/src/config/tw.json
index b47894c..9114167 100644
--- a/src/config/tw.json
+++ b/src/config/tw.json
@@ -399,7 +399,8 @@
     "sure_to_delete_permanent": "是否確認永久刪除該項目?",
     "delete_success": "刪除成功",
     "delete_failed": "刪除失敗",
-    "mqtt_refresh": "重新設定成功"
+    "mqtt_refresh": "重新設定成功",
+    "schema_name_required": "架構名稱欄位必填"
   },
   "setting": {
     "MQTT_parse": "MQTT 解析",
diff --git a/src/config/us.json b/src/config/us.json
index 1bdf52b..95f0f08 100644
--- a/src/config/us.json
+++ b/src/config/us.json
@@ -399,7 +399,8 @@
     "sure_to_delete_permanent": "Are you sure you want to permanently delete this item?",
     "delete_success": "Delete successfully",
     "delete_failed": "Delete failed",
-    "mqtt_refresh": "MQTT reset successful"
+    "mqtt_refresh": "MQTT reset successful",
+    "schema_name_required": "The schema name field is required"
   },
   "setting": {
     "MQTT_parse": "MQTT Parse",
diff --git a/src/router/index.js b/src/router/index.js
index 36f5941..bbcdcfb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -107,15 +107,6 @@ router.beforeEach(async (to, from, next) => {
   const token = useGetCookie("JWT-Authorization");
   const user_name = useGetCookie("user_name");
 
-  if (to.path === "/logout") {
-    document.cookie = "JWT-Authorization=; Max-Age=0";
-    document.cookie = "user_name=; Max-Age=0";
-    auth.user.token = "";
-    auth.user.user_name = "";
-    window.location.reload();
-    next({ path: "/login" });
-  }
-
   if ((authRequired && !token) || to.path === "/") {
     auth.user.token = "";
     next({ path: "/login" });
diff --git a/src/views/AssetManagement/components/AssetMainListAddModal.vue b/src/views/AssetManagement/components/AssetMainListAddModal.vue
index 6804bf6..63f199d 100644
--- a/src/views/AssetManagement/components/AssetMainListAddModal.vue
+++ b/src/views/AssetManagement/components/AssetMainListAddModal.vue
@@ -61,9 +61,8 @@ const onReset = () => {
         ? t('assetManagement.edit_system_category')
         : t('assetManagement.add_system_category')
     "
-    :open="open"
     :onCancel="onReset"
-    width="300"
+    :width="300"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 flex flex-col items-center">
@@ -75,7 +74,7 @@ const onReset = () => {
             </span></template
           >
         </Input>
-        <Input name="system_value" :value="formState" :readonly="props.formState?.id">
+        <Input name="system_value" :value="formState" :readonly="Boolean(props.formState?.id)">
           <template #topLeft>{{ $t("assetManagement.system_value") }}</template>
           <template #bottomLeft
             ><span class="text-error text-base">
diff --git a/src/views/AssetManagement/components/AssetSubListAddModal.vue b/src/views/AssetManagement/components/AssetSubListAddModal.vue
index eefb406..b6aa834 100644
--- a/src/views/AssetManagement/components/AssetSubListAddModal.vue
+++ b/src/views/AssetManagement/components/AssetSubListAddModal.vue
@@ -95,9 +95,8 @@ const onOk = async () => {
         ? t('assetManagement.edit_device_category')
         : t('assetManagement.add_device_category')
     "
-    :open="open"
     :onCancel="onCancel"
-    width="300"
+    :width="300"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 flex flex-col items-center">
@@ -112,7 +111,7 @@ const onOk = async () => {
         <Input
           name="system_value"
           :value="formState"
-          :readonly="props.formState?.id"
+          :readonly="Boolean(props.formState?.id)"
         >
           <template #topLeft>{{ $t("assetManagement.system_value") }}</template>
           <template #bottomLeft
@@ -128,7 +127,7 @@ const onOk = async () => {
           name="system_parent_id"
           :value="formState"
           selectClass="border-info  focus-within:border-info"
-          :disabled="props.formState?.id"
+          :disabled="Boolean(props.formState?.id)"
         >
           <template #topLeft>{{
             $t("assetManagement.system_parent")
diff --git a/src/views/AssetManagement/components/AssetTable.vue b/src/views/AssetManagement/components/AssetTable.vue
index a8d6cfc..03391b1 100644
--- a/src/views/AssetManagement/components/AssetTable.vue
+++ b/src/views/AssetManagement/components/AssetTable.vue
@@ -4,12 +4,14 @@ import { onMounted, ref, watch, inject, provide, computed } from "vue";
 import useSearchParam from "@/hooks/useSearchParam";
 import AssetTableAddModal from "./AssetTableAddModal.vue";
 import { getOperationCompanyList } from "@/apis/operation";
-import { getAssetFloorList } from "@/apis/asset";
+import { postMQTTRefresh } from "@/apis/alert";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const { openToast, cancelToastOpen } = inject("app_toast");
-const { companyOptions, departmentList, floors } = inject("asset_modal_options");
+const { companyOptions, departmentList, floors } = inject(
+  "asset_modal_options"
+);
 const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
 const { searchParams, changeParams } = useSearchParam();
 
@@ -33,7 +35,8 @@ const getAssetData = async () => {
       floor: floors.value.find(({ floor_guid }) => d.floor_guid === floor_guid)
         ?.full_name,
       company: companyOptions.value.find(({ id }) => d.operation_id === id),
-      department: departmentList.value.find(({ id }) => d.department_id === id)?.name,
+      department: departmentList.value.find(({ id }) => d.department_id === id)
+        ?.name,
       buying_date: d?.buying_date
         ? dayjs(d?.buying_date).format("YYYY-MM-DD")
         : "",
@@ -44,6 +47,15 @@ const getAssetData = async () => {
   }
 };
 
+const refreshMQTT = async () => {
+  const res = await postMQTTRefresh();
+  if (res.isSuccess) {
+    openToast("success", t("msg.mqtt_refresh"));
+  } else {
+    openToast("error", res.msg, "#outliers_add_table_item");
+  }
+};
+
 onMounted(async () => {
   getAssetData();
 });
@@ -113,8 +125,8 @@ watch(
   (newValue) => {
     if (newValue.value?.subSys_id) {
       getAssetData();
-    }else{
-      tableData.value=[];
+    } else {
+      tableData.value = [];
     }
   },
   {
@@ -162,7 +174,7 @@ const remove = async (id) => {
     const res = await deleteAssetItem(id);
     if (res.isSuccess) {
       getAssetData();
-      openToast("success",  t("msg.delete_success"));
+      openToast("success", t("msg.delete_success"));
     } else {
       openToast("error", res.msg);
     }
@@ -175,14 +187,21 @@ provide("asset_table_data", {
 </script>
 
 <template>
-  <div class="flex justify-start items-center mt-10">
-    <h3 class="text-xl mr-5">{{ $t("assetManagement.device_list") }}</h3>
-    <AssetTableAddModal
-      :openModal="openModal"
-      :onCancel="onCancel"
-      :editRecord="editRecord"
-      :getData="getAssetData"
-    />
+  <div class="flex justify-between items-center mt-10">
+    <div class="flex">
+      <h3 class="text-xl mr-5">{{ $t("assetManagement.device_list") }}</h3>
+      <AssetTableAddModal
+        :openModal="openModal"
+        :onCancel="onCancel"
+        :editRecord="editRecord"
+        :getData="getAssetData"
+      />
+    </div>
+    <button class="btn btn-sm btn-add" @click.prevent="refreshMQTT">
+      <font-awesome-icon :icon="['fas', 'cog']" />{{
+        $t("alert.reorganization")
+      }}
+    </button>
   </div>
   <Table :columns="columns" :dataSource="tableData" class="mt-3">
     <template #bodyCell="{ record, column, index }">
diff --git a/src/views/AssetManagement/components/AssetTableAddModal.vue b/src/views/AssetManagement/components/AssetTableAddModal.vue
index 91d7fa8..2a9ae93 100644
--- a/src/views/AssetManagement/components/AssetTableAddModal.vue
+++ b/src/views/AssetManagement/components/AssetTableAddModal.vue
@@ -108,9 +108,8 @@ const closeModal = () => {
   <Modal
     id="asset_add_table_item"
     :title="editRecord?.main_id ? $t('assetManagement.edit_device') : $t('assetManagement.add_device')"
-    :open="open"
     :onCancel="closeModal"
-    width="1600"
+    :width="1600"
   >
     <template #modalContent>
       <form ref="form" class="grid grid-cols-5 gap-5">
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfoDept.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfoDept.vue
index 093debb..d2d0070 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoDept.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoDept.vue
@@ -127,7 +127,7 @@ const onCancel = () => {
     id="asset_add_dept"
     :title="t('assetManagement.department')"
     :onCancel="onCancel"
-    width="400"
+    :width="400"
   >
     <template #modalContent>
       <form ref="form">
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
index 90cacd2..55ccf75 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
@@ -138,7 +138,7 @@ onMounted(async () => {
     id="asset_add_graph_item"
     :title="t('graphManagement.title')"
     :onCancel="onCancel"
-    width="500"
+    :width="500"
   >
     <template #modalContent>
       <ul class="menu bg-base-200 rounded-box text-lg w-full mt-3">
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
index 2406460..dfedf1a 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
@@ -225,7 +225,7 @@ const deleteItem = (value) => {
     id="asset_add_IoT_item"
     :title="t('assetManagement.associated_device')"
     :onCancel="onCancel"
-    width="900"
+    :width="900"
   >
     <template #modalContent>
       <ButtonGroup
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
index a92a524..8b62e41 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
@@ -106,7 +106,7 @@ const onCancel = () => {
     </button>
   </div>
 
-  <Modal id="mqtt_test" title="MQTT Topic" :onCancel="onCancel" width="400">
+  <Modal id="mqtt_test" title="MQTT Topic" :onCancel="onCancel" :width="400">
     <template #modalContent>
       <!-- 顯示接收到的訊息 -->
       <div v-if="receivedMessages.length > 0" class="overflow-y-auto h-96">
diff --git a/src/views/accountManagement/AccountManagement.vue b/src/views/accountManagement/AccountManagement.vue
index b6df707..accaf70 100644
--- a/src/views/accountManagement/AccountManagement.vue
+++ b/src/views/accountManagement/AccountManagement.vue
@@ -2,7 +2,7 @@
 import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
 import Account from "./components/Account.vue";
 import Role from "./components/Role.vue";
-import { computed, watch, onBeforeMount } from "vue";
+import { computed, watch, onBeforeMount, markRaw } from "vue";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
@@ -18,13 +18,13 @@ const initializeItems = () => {
       title: t("accountManagement.account_title"),
       key: "account",
       active: true,
-      component: Account,
+      component: markRaw(Account),
     },
     {
       title: t("accountManagement.role_title"),
       key: "role",
       active: false,
-      component: Role,
+       component: markRaw(Role),
     },
   ]);
 };
diff --git a/src/views/accountManagement/components/AccountModal.vue b/src/views/accountManagement/components/AccountModal.vue
index 95a7bb2..4d05d00 100644
--- a/src/views/accountManagement/components/AccountModal.vue
+++ b/src/views/accountManagement/components/AccountModal.vue
@@ -127,7 +127,7 @@ const onOk = async () => {
     id="account_user_modal"
     :title="formState?.Id ? t('button.edit') : t('button.add')"
     :onCancel="onCancel"
-    width="710"
+    :width="710"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
diff --git a/src/views/accountManagement/components/AccountPasswordModal.vue b/src/views/accountManagement/components/AccountPasswordModal.vue
index b365198..39513e4 100644
--- a/src/views/accountManagement/components/AccountPasswordModal.vue
+++ b/src/views/accountManagement/components/AccountPasswordModal.vue
@@ -9,7 +9,7 @@ const { t } = useI18n();
 const { openToast } = inject("app_toast");
 
 const props = defineProps({
-  account: String,
+  account: Object,
 });
 
 const formState = ref({
@@ -48,7 +48,7 @@ const onOk = async () => {
     id="account_user_password_modal"
     :title="t('accountManagement.change_password')"
     :onCancel="onCancel"
-    width="710"
+   :width="710"
   >
     <template #modalContent>
       <p class="mt-10 text-3xl">{{ account.Name }}</p>
diff --git a/src/views/accountManagement/components/RoleAuthModal.vue b/src/views/accountManagement/components/RoleAuthModal.vue
index a5339d9..b10a453 100644
--- a/src/views/accountManagement/components/RoleAuthModal.vue
+++ b/src/views/accountManagement/components/RoleAuthModal.vue
@@ -13,7 +13,7 @@ import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const props = defineProps({
-  selectedRole: String,
+  selectedRole: Object,
   cancelModal: Function,
   disabled: Boolean,
   update: Function,
diff --git a/src/views/alert/AlertManagement.vue b/src/views/alert/AlertManagement.vue
index 910b477..767725f 100644
--- a/src/views/alert/AlertManagement.vue
+++ b/src/views/alert/AlertManagement.vue
@@ -2,7 +2,7 @@
 import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
 import AlertQuery from "./components/AlertQuery/AlertQuery.vue";
 import AlertSetting from "./components/AlertSetting/AlertSetting.vue";
-import { computed, watch, onBeforeMount } from "vue";
+import { computed, watch, onBeforeMount, markRaw } from "vue";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
@@ -18,13 +18,13 @@ const initializeItems = () => {
       title: t("alert.query_title"),
       key: "Query",
       active: true,
-      component: AlertQuery,
+      component: markRaw(AlertQuery),
     },
     {
       title: t("alert.setting_title"),
       key: "Setting",
       active: false,
-      component: AlertSetting,
+      component: markRaw(AlertSetting),
     },
   ]);
 };
diff --git a/src/views/alert/components/AlertQuery/AlertTableModal.vue b/src/views/alert/components/AlertQuery/AlertTableModal.vue
index 49f5a58..bd8cd1b 100644
--- a/src/views/alert/components/AlertQuery/AlertTableModal.vue
+++ b/src/views/alert/components/AlertQuery/AlertTableModal.vue
@@ -160,7 +160,7 @@ watch(
     id="alert_action_item"
     :title="t('alert.repair_order')"
     :onCancel="onCancel"
-    width="710"
+    :width="710"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
@@ -199,7 +199,7 @@ watch(
             {
               key: 1,
               value: 1,
-              title: $t('alert.maintenance'),
+              title: $t('operation.maintenance'),
             },
             {
               key: 2,
diff --git a/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue b/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
index d8c074a..17efbc8 100644
--- a/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
+++ b/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
@@ -94,9 +94,8 @@ const closeModal = () => {
   <Modal
     id="notify_add_table_item"
     :title="t('alert.notify_list')"
-    :open="open"
     :onCancel="closeModal"
-    width="300"
+    :width="300"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 flex flex-col items-center">
@@ -128,7 +127,7 @@ const closeModal = () => {
           <p class="text-light text-base">{{ $t("alert.notify_items") }}</p>
           <AlertNoticesTable
             :SaveCheckAuth="SaveCheckAuth"
-            :NoticeData="[noticeList[2]]"
+            :NoticeData="[noticeList[1]]"
             :onChange="onChange"
           />
           <span class="text-error text-base">
diff --git a/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue b/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
index a92da1b..b620ba0 100644
--- a/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
+++ b/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
@@ -119,9 +119,8 @@ const closeModal = () => {
   <Modal
     id="outliers_add_table_item"
     :title="t('alert.alarm_settings')"
-    :open="open"
     :onCancel="closeModal"
-    width="710"
+    :width="710"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
diff --git a/src/views/alert/components/AlertSetting/AlertSetting.vue b/src/views/alert/components/AlertSetting/AlertSetting.vue
index a1398d3..98d8dd1 100644
--- a/src/views/alert/components/AlertSetting/AlertSetting.vue
+++ b/src/views/alert/components/AlertSetting/AlertSetting.vue
@@ -10,17 +10,17 @@ const { locale } = useI18n();
 const timesList = ref([]);
 const noticeList = ref([]);
 
-const timesListData = async () => {
-  const res = await getAlarmScheduleList();
-  timesList.value = res.data.map((items) => ({
-    ...items,
-    key:items.id,
-    schedule_array: JSON.parse(items.schedule_json).map((time, index) => ({
-      day: index + 1,
-      time,
-    })),
-  }));
-};
+// const timesListData = async () => {
+//   const res = await getAlarmScheduleList();
+//   timesList.value = res.data.map((items) => ({
+//     ...items,
+//     key:items.id,
+//     schedule_array: JSON.parse(items.schedule_json).map((time, index) => ({
+//       day: index + 1,
+//       time,
+//     })),
+//   }));
+// };
 
 const NoticeListData = async () => {
   const res = await getNoticeList(locale.value);
@@ -32,11 +32,15 @@ watch(locale, () => {
 });
 
 onMounted(() => {
-  timesListData();
+  // timesListData();
   NoticeListData();
 });
 
-provide("notify_table", { timesList, noticeList, timesListData });
+provide("notify_table", {
+  timesList,
+  noticeList,
+  // timesListData
+});
 </script>
 
 <template>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 55df5ce..c3647b7 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -16,7 +16,7 @@ import { twMerge } from "tailwind-merge";
 const store = useBuildingStore();
 const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
 let intervalId = null;
-const energyCostData = ref(null);
+const energyCostData = ref({});
 const formState = ref({
   building_guid: null,
   floor_guid: "all",
diff --git a/src/views/dashboard/components/DashboardElecRank.vue b/src/views/dashboard/components/DashboardElecRank.vue
index ed7b3fd..3e50f92 100644
--- a/src/views/dashboard/components/DashboardElecRank.vue
+++ b/src/views/dashboard/components/DashboardElecRank.vue
@@ -26,7 +26,7 @@ const currentEnergyType = ref({
 
 // 取得當前能耗資料
 const getCurrentEnergyData = () => {
-  if (!props.energyCostData) {
+  if (!props.energyCostData || !props.energyCostData.rank) { 
     return []; // 或者返回一些默认值
   }
 
diff --git a/src/views/dashboard/components/DashboardSysProgressModal.vue b/src/views/dashboard/components/DashboardSysProgressModal.vue
index f4915ce..d6d63c9 100644
--- a/src/views/dashboard/components/DashboardSysProgressModal.vue
+++ b/src/views/dashboard/components/DashboardSysProgressModal.vue
@@ -35,6 +35,16 @@ watch(selectedBtn, (newVal, oldVal) => {
     detailData.value = props.modalData[newVal.key];
   }
 });
+
+watch(
+  () => props.modalData,
+  (newVal, oldVal) => {
+    if (newVal) {
+      changeActiveBtn(items.value[0]);
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
@@ -51,13 +61,13 @@ watch(selectedBtn, (newVal, oldVal) => {
             }
           "
         />
-        <Button
+        <button
           type="link"
           class="btn-link btn-text-without-border px-2"
           @click="onCancel"
         >
           <font-awesome-icon :icon="['fas', 'times']" class="text-[#a5abb1]" />
-        </Button>
+        </button>
       </div>
     </template>
     <template #modalContent>
diff --git a/src/views/energyManagement/EnergyManagement.vue b/src/views/energyManagement/EnergyManagement.vue
index c08b990..efd2a46 100644
--- a/src/views/energyManagement/EnergyManagement.vue
+++ b/src/views/energyManagement/EnergyManagement.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, markRaw } from "vue";
 import { useRoute } from "vue-router";
 
 import EnergyChart from "./components/EnergyChart/EnergyChart.vue";
@@ -14,12 +14,12 @@ const updateComponent = () => {
 
   if (main_system_id === "energy_chart") {
     if (sub_system_id === "chart") {
-      currentComponent.value = EnergyChart;
+      currentComponent.value = markRaw(EnergyChart);
     } else {
-      currentComponent.value = EnergyHistoryTable;
+      currentComponent.value = markRaw(EnergyHistoryTable);
     }
   } else if (main_system_id === "energy_report") {
-    currentComponent.value = EnergyReport;
+    currentComponent.value = markRaw(EnergyReport);
   } else {
     currentComponent.value = null; 
   }
diff --git a/src/views/energyManagement/components/EnergyChart/CarbonEmissionModal.vue b/src/views/energyManagement/components/EnergyChart/CarbonEmissionModal.vue
index 0df8e47..6ef2cfb 100644
--- a/src/views/energyManagement/components/EnergyChart/CarbonEmissionModal.vue
+++ b/src/views/energyManagement/components/EnergyChart/CarbonEmissionModal.vue
@@ -42,7 +42,7 @@ const onOk = async () => {
 
   const res = await postEditCarbonValue({
     ...values,
-    "building_guid":store.selectedBuilding.building_guid,
+    building_guid: store.selectedBuilding.building_guid,
   });
   if (res.isSuccess) {
     props.getData();
@@ -67,19 +67,24 @@ const closeModal = () => {
 </script>
 
 <template>
-  <button class="btn btn-sm btn-success ms-auto me-3" @click.stop.prevent="openModal">
+  <button
+    class="btn btn-sm btn-success ms-auto me-3"
+    @click.stop.prevent="openModal"
+  >
     {{ $t("button.edit") }}
   </button>
   <Modal
     id="carbon_emission_item"
     :title="t('energy.edit_carbon_emission')"
     :onCancel="closeModal"
-    width="300"
+    :width="300"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 flex flex-col items-center">
         <Input :value="formState" class="w-full" name="coefficient">
-          <template #topLeft>{{$t('energy.carbon_emission_coefficient')}}</template>
+          <template #topLeft>{{
+            $t("energy.carbon_emission_coefficient")
+          }}</template>
           <template #bottomLeft>
             <span class="text-error text-base">
               {{ formErrorMsg.coefficient }}
diff --git a/src/views/energyManagement/components/EnergyChart/ElecConsumption.vue b/src/views/energyManagement/components/EnergyChart/ElecConsumption.vue
index 460ee3e..7af6dfc 100644
--- a/src/views/energyManagement/components/EnergyChart/ElecConsumption.vue
+++ b/src/views/energyManagement/components/EnergyChart/ElecConsumption.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, nextTick, watch, inject } from "vue";
+import { ref, onMounted, watch, inject } from "vue";
 import * as echarts from "echarts";
 import { getRealTimeDist } from "@/apis/energy";
 import { useI18n } from "vue-i18n";
@@ -7,6 +7,7 @@ const { search_data } = inject("energy_data");
 const { t } = useI18n();
 
 const chartDiv = ref(null);
+let myChart = null;  // 添加 myChart 变量
 
 const chartOption = {
   tooltip: {
@@ -91,12 +92,18 @@ const loadData = async (value) => {
       chartOption.series[0].links = links;
 
       // 初始化圖表
-      const myChart = echarts.init(chartDiv.value);
+      if (myChart) {
+        myChart.dispose();  // 銷毀之前的實例
+      }
+      myChart = echarts.init(chartDiv.value);
       myChart.setOption(chartOption);
     }
   } else {
-    // 初始化圖表
-    echarts.init(chartDiv.value).clear();
+    // 清空圖表
+    if (myChart) {
+      myChart.dispose();  // 銷毀之前的實例
+      myChart = null;
+    }
   }
 };
 
@@ -115,6 +122,12 @@ watch(
     deep: true,
   }
 );
+
+onMounted(() => {
+  // 初始化圖表
+  myChart = echarts.init(chartDiv.value);
+  myChart.setOption(chartOption);
+});
 </script>
 
 <template>
@@ -138,4 +151,4 @@ ul li:last-child:after {
   @apply absolute top-0 bottom-0 left-full block w-full h-[1px] bg-slate-600 m-auto z-10;
   content: "";
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/energyManagement/components/EnergyChart/ImmediateDemandModal.vue b/src/views/energyManagement/components/EnergyChart/ImmediateDemandModal.vue
index ef92b79..32a35f0 100644
--- a/src/views/energyManagement/components/EnergyChart/ImmediateDemandModal.vue
+++ b/src/views/energyManagement/components/EnergyChart/ImmediateDemandModal.vue
@@ -81,7 +81,7 @@ const onCancel = () => {
     id="immediate_demand_add_item"
     :title="t('energy.edit_automatic_demand')"
     :onCancel="closeModal"
-    width="300"
+    :width="300"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 flex flex-col items-center">
diff --git a/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue b/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue
index 9e1b7ac..ec0aa70 100644
--- a/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue
+++ b/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue
@@ -132,7 +132,7 @@ const columns = computed(() => {
         key: "endTime",
       },
       {
-        title: t("energy.ectricity_classification"),
+        title: t("energy.electricity_classification"),
         key: "elecType",
       },
       {
diff --git a/src/views/graphManagement/components/GraphModal.vue b/src/views/graphManagement/components/GraphModal.vue
index f2c8cf8..5da7cf9 100644
--- a/src/views/graphManagement/components/GraphModal.vue
+++ b/src/views/graphManagement/components/GraphModal.vue
@@ -126,7 +126,7 @@ watch(
   <button class="btn btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
-  <Modal id="graph_add_item" :title="t('graphManagement.upload')" :onCancel="onCancel" width="800">
+  <Modal id="graph_add_item" :title="t('graphManagement.upload')" :onCancel="onCancel" :width="800">
     <template #modalContent>
       <form ref="form" class="mt-5">
         <div class="mb-2">
diff --git a/src/views/history/components/HistorySidebar.vue b/src/views/history/components/HistorySidebar.vue
index 139f971..3a8c0f8 100644
--- a/src/views/history/components/HistorySidebar.vue
+++ b/src/views/history/components/HistorySidebar.vue
@@ -110,7 +110,7 @@ const checkedBuilding = computed(() => {
 
     if (
       selectedDeviceNumber.value?.filter(
-        (d) => d.split("_")[1] === building_tag
+        (d) => d?.split("_")[1] === building_tag
       ).length === allDevices.length
     ) {
       selected.push(building_tag);
diff --git a/src/views/operation/components/OperationSearchType.vue b/src/views/operation/components/OperationSearchType.vue
index f8719bf..295a8b3 100644
--- a/src/views/operation/components/OperationSearchType.vue
+++ b/src/views/operation/components/OperationSearchType.vue
@@ -7,7 +7,7 @@ import { twMerge } from "tailwind-merge";
 import { useI18n } from 'vue-i18n';
 const { t, locale } = useI18n(); 
 const props = defineProps({
-  selected: String,
+  selected: Object,
 });
 
 const { searchParams, changeParams } = useSearchParam();
diff --git a/src/views/operation/components/OperationTableModal.vue b/src/views/operation/components/OperationTableModal.vue
index c33a7c6..26e3439 100644
--- a/src/views/operation/components/OperationTableModal.vue
+++ b/src/views/operation/components/OperationTableModal.vue
@@ -226,7 +226,7 @@ watch(
 </script>
 
 <template>
-  <Modal id="operation_action_item" :onCancel="onCancel" width="710">
+  <Modal id="operation_action_item" :onCancel="onCancel" :width="710">
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
         <template v-if="searchParams?.work_type < 3">
diff --git a/src/views/setting/SettingManagement.vue b/src/views/setting/SettingManagement.vue
index 4555ff3..3a2b414 100644
--- a/src/views/setting/SettingManagement.vue
+++ b/src/views/setting/SettingManagement.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, markRaw } from "vue";
 import { useRoute } from "vue-router";
 
 import Dept from "./components/Dept.vue";
@@ -19,21 +19,21 @@ const updateComponent = () => {
   const { main_system_id, sub_system_id } = route.params;
 
   if (sub_system_id === "Department") {
-    currentComponent.value = Dept;
+    currentComponent.value =  markRaw(Dept);
   } else if (sub_system_id === "ElecType") {
-    currentComponent.value = ElecType;
+    currentComponent.value = markRaw(ElecType);
   } else if (sub_system_id === "Vendor") {
-    currentComponent.value = Vendor;
+    currentComponent.value = markRaw(Vendor);
   } else if (sub_system_id === "Floor") {
-    currentComponent.value = Floors;
+    currentComponent.value = markRaw(Floors);
   } else if (sub_system_id === "Building") {
-    currentComponent.value = Building;
+    currentComponent.value = markRaw(Building);
   } else if (sub_system_id === "ElecPricing") {
-    currentComponent.value = ElecPriceManagement;
+    currentComponent.value = markRaw(ElecPriceManagement);
   } else if (sub_system_id === "MQTT_Result") {
-    currentComponent.value = MQTTList;
+    currentComponent.value = markRaw(MQTTList);
   } else if (sub_system_id === "Demand") {
-    currentComponent.value = Demand;
+    currentComponent.value = markRaw(Demand);
   } 
 };
 
diff --git a/src/views/setting/components/BuildingModal.vue b/src/views/setting/components/BuildingModal.vue
index 0885c59..7c8f22b 100644
--- a/src/views/setting/components/BuildingModal.vue
+++ b/src/views/setting/components/BuildingModal.vue
@@ -46,7 +46,7 @@ const onOk = async () => {
     id="build_modal"
     :title="props.formState?.building_guid ? t('button.edit') : t('button.add')"
     :onCancel="onCancel"
-    width="400"
+    :width="400"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
diff --git a/src/views/setting/components/DeptModal.vue b/src/views/setting/components/DeptModal.vue
index be9d1d3..28fc0d3 100644
--- a/src/views/setting/components/DeptModal.vue
+++ b/src/views/setting/components/DeptModal.vue
@@ -48,7 +48,7 @@ const onOk = async () => {
     id="dept_modal"
     :title="props.formState?.id ? t('button.edit') : t('button.add')"
     :onCancel="onCancel"
-    width="400"
+    :width="400"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
diff --git a/src/views/setting/components/ElecPriceManagement.vue b/src/views/setting/components/ElecPriceManagement.vue
index 648e00d..504f269 100644
--- a/src/views/setting/components/ElecPriceManagement.vue
+++ b/src/views/setting/components/ElecPriceManagement.vue
@@ -2,7 +2,7 @@
 import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
 import ElecPriceRes from "./ElecPriceRes.vue";
 import ElecPriceStd from "./ElecPriceStd.vue";
-import { computed, watch, onBeforeMount, ref, provide } from "vue";
+import { computed, watch, onBeforeMount, ref, provide, markRaw } from "vue";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
 import { getTimeElec } from "@/apis/energy";
@@ -26,13 +26,13 @@ const initializeItems = () => {
       title: t("energy.residential"),
       key: "Residential",
       active: true,
-      component: ElecPriceRes,
+      component: markRaw(ElecPriceRes),
     },
     {
       title: t("energy.standard"),
       key: "Standard",
       active: false,
-      component: ElecPriceStd,
+      component: markRaw(ElecPriceStd),
     },
   ]);
 };
diff --git a/src/views/setting/components/ElecTypeModal.vue b/src/views/setting/components/ElecTypeModal.vue
index 0038d5c..a952f1b 100644
--- a/src/views/setting/components/ElecTypeModal.vue
+++ b/src/views/setting/components/ElecTypeModal.vue
@@ -46,7 +46,7 @@ const onOk = async () => {
     id="elec_modal"
     :title="props.formState?.id ? t('button.edit') : t('button.add')"
     :onCancel="onCancel"
-    width="400"
+    :width="400"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
diff --git a/src/views/setting/components/FloorsModal.vue b/src/views/setting/components/FloorsModal.vue
index 807709a..740086c 100644
--- a/src/views/setting/components/FloorsModal.vue
+++ b/src/views/setting/components/FloorsModal.vue
@@ -66,7 +66,7 @@ const onOk = async () => {
     id="floor_modal"
     :title="props.formState?.floor_guid ? t('button.edit') : t('button.add')"
     :onCancel="onCancel"
-    width="400"
+    :width="400"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
diff --git a/src/views/setting/components/MQTTListAddModal.vue b/src/views/setting/components/MQTTListAddModal.vue
index c88c45a..99f8985 100644
--- a/src/views/setting/components/MQTTListAddModal.vue
+++ b/src/views/setting/components/MQTTListAddModal.vue
@@ -102,6 +102,10 @@ watch(
 );
 
 const onOk = async () => {
+  if (!schemaName.value) {
+    openToast("error", t("msg.schema_name_required"), "#MQTT_Parse_item");
+    return;
+  }
   const points = formStates.value.map((state) => ({
     PointOrg: state.PointOrg,
     PointSys: props.pointsData.find((point) => point.id === state.item_id)
@@ -181,13 +185,14 @@ const onCancel = () => {
             type="text"
             v-model.text="schemaName"
             class="input border-info focus-within:border-info"
+            required
           />
         </div>
         <table class="table w-1/2 mt-2">
           <thead>
             <tr>
-              <th>{{$t("setting.IoT_point_structure")}}</th>
-              <th>{{$t("setting.system_point_name")}}</th>
+              <th>{{ $t("setting.IoT_point_structure") }}</th>
+              <th>{{ $t("setting.system_point_name") }}</th>
             </tr>
           </thead>
           <tbody>
diff --git a/src/views/setting/components/VendorModal.vue b/src/views/setting/components/VendorModal.vue
index 8fff154..4f33097 100644
--- a/src/views/setting/components/VendorModal.vue
+++ b/src/views/setting/components/VendorModal.vue
@@ -60,7 +60,7 @@ const onOk = async () => {
     id="company_modal"
     :title="props.formState?.id ? t('button.edit') : t('button.add')"
     :onCancel="onCancel"
-    width="710"
+    :width="710"
   >
     <template #modalContent>
       <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index feaa56d..ceba84d 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -32,7 +32,7 @@ const cancelDialog = () => {
       frameborder="0"
       class="w-full h-full"
     ></iframe>
-    <Button
+    <button
       type="link"
       class="btn-link btn-text-without-border z-20 absolute right-[2.3rem] top-[2.2rem]"
       @click="cancelDialog"
@@ -41,7 +41,7 @@ const cancelDialog = () => {
         :icon="['fas', 'times']"
         class="text-[#a5abb1] text-2xl"
       />
-    </Button>
+    </button>
   </dialog>
 
   <template v-if="showData.length > 0">
diff --git a/src/views/system/components/SystemInfoModalContent.vue b/src/views/system/components/SystemInfoModalContent.vue
index 1d2e7f6..b6367e1 100644
--- a/src/views/system/components/SystemInfoModalContent.vue
+++ b/src/views/system/components/SystemInfoModalContent.vue
@@ -33,25 +33,25 @@ const onCancel = () => {
     <div class="card-title py-2 border-b border-zinc-700 justify-between">
       <h3>{{ data?.value?.full_name }}</h3>
       <div>
-        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('desktop')">
+        <button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('desktop')">
           <font-awesome-icon :icon="['fas', 'desktop']" size="lg"
             :class="twMerge(currentTab === 'desktop' ? 'text-success' : 'text-[#a5abb1]')" />
-        </Button>
-        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('image')">
+        </button>
+        <button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('image')">
           <font-awesome-icon :icon="['fas', 'image']" size="lg"
             :class="twMerge(currentTab === 'image' ? 'text-success' : 'text-[#a5abb1]')" />
-        </Button>
-        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('cog')">
+        </button>
+        <button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('cog')">
           <font-awesome-icon :icon="['fas', 'cog']" size="lg"
             :class="twMerge(currentTab === 'cog' ? 'text-success' : 'text-[#a5abb1]')" />
-        </Button>
+        </button>
         <!-- <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('chart')">
           <font-awesome-icon :icon="['fas', 'chart-line']" size="lg"
             :class="twMerge(currentTab === 'chart' ? 'text-success' : 'text-[#a5abb1]')" />
         </Button> -->
-        <Button type="link" class="btn-link btn-text-without-border px-2" @click="onCancel">
+        <button type="link" class="btn-link btn-text-without-border px-2" @click="onCancel">
           <font-awesome-icon :icon="['fas', 'times']" size="lg" class="text-[#a5abb1]" />
-        </Button>
+        </button>
       </div>
     </div>
     <div class="card-body p-0">