From 14e3f9ea4a7d3ae117d4321f5070b93065b774d4 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Thu, 3 Jul 2025 11:37:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E9=81=AE=E7=BD=A9=E6=94=B9?=
 =?UTF-8?q?=20|=20=E8=A8=AD=E5=82=99=E7=AE=A1=E7=90=86UI=20|=202D=20/=203D?=
 =?UTF-8?q?=20=E9=A1=AF=E7=A4=BA=E8=A8=AD=E5=AE=9A=E9=A0=81=E9=9D=A2?=
 =?UTF-8?q?=E5=88=9D=E5=88=87=E7=89=88=20|=20MQTT=20switch=20=E9=A1=AF?=
 =?UTF-8?q?=E7=A4=BA=20=E5=88=9D=E5=88=87=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/prompts/exportCSV.prompt.md           | 29 +++++++++++++
 src/assets/base.css                           |  1 +
 src/components/alarm/AlarmDrawer.vue          |  2 +-
 src/components/customUI/Textarea.vue          |  2 +-
 src/fontawsomeIconRegister.js                 |  5 ++-
 .../components/AssetTableModalLeftInfo.vue    |  4 --
 .../AssetTableModalLeftInfoMQTT.vue           | 17 +++++++-
 .../components/AssetTableModalRightInfo.vue   | 10 +++--
 src/views/setting/SettingManagement.vue       |  5 ++-
 .../setting/components/PointListAddModal.vue  | 28 +++++++++++++
 .../setting/components/ViewModeSetting.vue    | 41 +++++++++++++++++++
 .../components/SystemInfoModalDesktop.vue     |  7 ++--
 12 files changed, 134 insertions(+), 17 deletions(-)
 create mode 100644 .github/prompts/exportCSV.prompt.md
 create mode 100644 src/views/setting/components/ViewModeSetting.vue

diff --git a/.github/prompts/exportCSV.prompt.md b/.github/prompts/exportCSV.prompt.md
new file mode 100644
index 0000000..7adc4d0
--- /dev/null
+++ b/.github/prompts/exportCSV.prompt.md
@@ -0,0 +1,29 @@
+---
+mode: agent
+---
+# API 路徑整理與引用檢查規則
+
+## 目標
+- 針對 apis 目錄下所有子資料夾（如 account、alert、asset、building、dashboard、energy、forge、graph、history、login、operation、productSetting、system）的 api.js 與 index.js 檔案，完整追蹤 API 路徑的實際引用情形。
+- 追蹤流程：
+  1. 先在 api.js 找出所有 API 路徑常數（如 `export const GET_XXX_API = '/path'`）。
+  2. 在 index.js 檔案確認這些常數有被 import 並包裝成 API function（如 `getXXX`）。
+  3. 再全專案搜尋這些 API function 是否有被其他檔案 import 並呼叫。
+- 產生一份 csv 報表，格式如下：
+
+| API 路徑 | 定義常數 | API function | 是否有被引用 |
+|----------|----------|--------------|-------------|
+| /user    | GET_USER_API | getUser | Y | 
+| /admin   | GET_ADMIN_API | getAdmin | N |
+
+## 詳細規則
+- 處理 apis 目錄下所有子資料夾的 api.js 與 index.js 檔案。
+- API 路徑的定義需涵蓋 get/post/put/delete 等（如 `export const API = '/path'`）。
+- 只統計有被 index.js import 並包裝成 function 的 API 路徑。
+- 檢查 function 是否有被其他檔案 import 並呼叫（排除 apis 目錄本身）。
+- 匹配到的檔案需記錄完整路徑，可多個檔案以分號分隔。
+- 統計結果輸出為 csv 檔案。
+
+## 輸出
+- 檔名：api_usage_report.csv
+- 欄位：API 路徑, 定義常數, API function, 是否有被引用, 
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index 09140d1..545b288 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -58,6 +58,7 @@
   box-sizing: border-box;
   margin: 0;
   font-weight: normal;
+  scrollbar-color: auto !important;
 }
 
 body {
diff --git a/src/components/alarm/AlarmDrawer.vue b/src/components/alarm/AlarmDrawer.vue
index 7363e00..274c122 100644
--- a/src/components/alarm/AlarmDrawer.vue
+++ b/src/components/alarm/AlarmDrawer.vue
@@ -36,7 +36,7 @@ const toggleErrIcon = () => {
     </div>
     <div
       v-if="showErr"
-      class="drawer-side translate-y-20 max-h-[90vh] overflow-x-hidden overflow-y-scroll"
+      class="drawer-side translate-y-20 max-h-[90vh] overflow-x-hidden overflow-y-scroll w-[300px] left-auto right-0"
     >
       <AlarmCards />
     </div>
diff --git a/src/components/customUI/Textarea.vue b/src/components/customUI/Textarea.vue
index 02f6c0c..33f100f 100644
--- a/src/components/customUI/Textarea.vue
+++ b/src/components/customUI/Textarea.vue
@@ -15,7 +15,7 @@ const props = defineProps({
       <span class="label-text-alt"> <slot name="topRight"></slot></span>
     </div>
     <textarea
-      class="textarea text-lg rounded-md border-info focus-within:border-info h-24"
+      class="textarea text-lg rounded-md border-info focus-within:border-info h-40"
       :placeholder="placeholder"
       :name="name"
       v-model="value[name]"
diff --git a/src/fontawsomeIconRegister.js b/src/fontawsomeIconRegister.js
index 3758302..3bd58c8 100644
--- a/src/fontawsomeIconRegister.js
+++ b/src/fontawsomeIconRegister.js
@@ -65,7 +65,7 @@ import {
   faClock,
   faCheckCircle
 } from "@fortawesome/free-solid-svg-icons";
-import { faCircle } from "@fortawesome/free-regular-svg-icons";
+import { faCircle,faPaperPlane } from "@fortawesome/free-regular-svg-icons";
 
 /* add icons to the library */
 library.add(
@@ -130,7 +130,8 @@ library.add(
   faCrown,
   faClock,
   faCheckCircle,
-  faCircle
+  faCircle,
+  faPaperPlane
 );
 
 export default library;
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue
index 281112f..7e6ff11 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue
@@ -3,8 +3,6 @@ import { ref, inject, onBeforeMount, onMounted, watch } from "vue";
 import * as yup from "yup";
 import "yup-phone-lite";
 import useSearchParam from "@/hooks/useSearchParam";
-import AssetTableModalLeftInfoIoT from "./AssetTableModalLeftInfoIoT.vue";
-import AssetTableModalLeftInfoGraph from "./AssetTableModalLeftInfoGraph.vue";
 import AssetTableModalLeftInfoMQTT from "./AssetTableModalLeftInfoMQTT.vue";
 import useUserInfoStore from "@/stores/useUserInfoStore";
 import dayjs from "dayjs";
@@ -209,8 +207,6 @@ watch(
     </Select>
   </div>
   <AssetTableModalLeftInfoMQTT />
-  <AssetTableModalLeftInfoGraph />
-  <AssetTableModalLeftInfoIoT />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
index 8b62e41..7ae94ee 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
@@ -96,9 +96,9 @@ const onCancel = () => {
 </script>
 
 <template>
-  <div class="flex w-72">
+  <div class="flex col-span-2 pb-5">
     <Input :value="formState" name="topic">
-      <template #topLeft>MQTT Topic</template>
+      <template #topLeft>MQTT subscribe topic</template>
     </Input>
     <button type="button" class="btn btn-add mt-11 ms-1" @click="openModal">
       <font-awesome-icon :icon="['fas', 'cog']" />
@@ -106,6 +106,19 @@ const onCancel = () => {
     </button>
   </div>
 
+  <div class="flex flex-col col-span-2 border-t-gray-400 border-t py-5">
+    <Input :value="formState" name="topic">
+      <template #topLeft>MQTT publish topic</template>
+    </Input>
+    <Textarea :value="formState" name="notice" class="">
+      <template #topLeft>MQTT 傳送的訊息</template>
+    </Textarea>
+    <button type="button" class="btn btn-add mt-6 w-24" @click="openModal">
+      <font-awesome-icon :icon="['far', 'paper-plane']" />
+      Send
+    </button>
+  </div>
+
   <Modal id="mqtt_test" title="MQTT Topic" :onCancel="onCancel" :width="400">
     <template #modalContent>
       <!-- 顯示接收到的訊息 -->
diff --git a/src/views/AssetManagement/components/AssetTableModalRightInfo.vue b/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
index 444ac12..dbeeb9b 100644
--- a/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
+++ b/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
@@ -2,6 +2,8 @@
 import { onMounted, ref, inject, onBeforeMount, watch, computed } from "vue";
 import EffectScatter from "@/components/chart/EffectScatter.vue";
 import useBuildingStore from "@/stores/useBuildingStore";
+import AssetTableModalLeftInfoIoT from "./AssetTableModalLeftInfoIoT.vue";
+import AssetTableModalLeftInfoGraph from "./AssetTableModalLeftInfoGraph.vue";
 import * as yup from "yup";
 import { twMerge } from "tailwind-merge";
 import { useI18n } from "vue-i18n";
@@ -115,7 +117,7 @@ const getCoordinate = (position) => {
 
 <template>
   <!-- 平面圖 -->
-
+  
   <div class="flex gap-4 mb-5">
     <Select
       :value="formState"
@@ -143,7 +145,7 @@ const getCoordinate = (position) => {
       ></Input
     >
   </div>
-  <div class="relative">
+  <div class="relative min-h-[70vh]">
     <EffectScatter
       id="asset_floor_chart"
       ref="asset_floor_chart"
@@ -157,11 +159,13 @@ const getCoordinate = (position) => {
     />
     <div
       v-if="!currentFloor?.floor_map_url"
-      class="absolute top-0 left-0 flex justify-center items-center min-h-[500px] w-full border border-stone-900 shadow-lg bg-sub-success bg-opacity-25 rounded-md"
+      class="absolute top-0 left-0 flex justify-center items-center min-h-[70vh] w-full border border-stone-900 shadow-lg bg-sub-success bg-opacity-25 rounded-md"
     >
       <p class="text-2xl">{{ $t("assetManagement.add_floor_text") }}</p>
     </div>
   </div>
+<AssetTableModalLeftInfoGraph />
+  <AssetTableModalLeftInfoIoT />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/setting/SettingManagement.vue b/src/views/setting/SettingManagement.vue
index 3a2b414..731c652 100644
--- a/src/views/setting/SettingManagement.vue
+++ b/src/views/setting/SettingManagement.vue
@@ -10,6 +10,7 @@ import Building from "./components/Building.vue";
 import ElecPriceManagement from "./components/ElecPriceManagement.vue";
 import MQTTList from "./components/MQTTList.vue";
 import Demand from "./components/Demand.vue";
+import ViewModeSetting from "./components/ViewModeSetting.vue";
 // import PointList from "./components/PointList.vue";
 
 const route = useRoute();
@@ -33,7 +34,9 @@ const updateComponent = () => {
   } else if (sub_system_id === "MQTT_Result") {
     currentComponent.value = markRaw(MQTTList);
   } else if (sub_system_id === "Demand") {
-    currentComponent.value = markRaw(Demand);
+    currentComponent.value = markRaw(Demand); 
+  } else if (sub_system_id === "ViewModeSetting") {
+    currentComponent.value = markRaw(ViewModeSetting);
   } 
 };
 
diff --git a/src/views/setting/components/PointListAddModal.vue b/src/views/setting/components/PointListAddModal.vue
index 1ebb4eb..d8a74cf 100644
--- a/src/views/setting/components/PointListAddModal.vue
+++ b/src/views/setting/components/PointListAddModal.vue
@@ -151,6 +151,34 @@ watch(
         >
           <template #topLeft>{{ $t("setting.hide_point") }}</template>
         </RadioGroup>
+
+        <RadioGroup
+          class="my-2"
+          name="is_link"
+          :value="formState"
+          :items="[
+            {
+              key: 1,
+              value: 1,
+              title: '開啟',
+            },
+            {
+              key: 0,
+              value: 0,
+              title: '關閉',
+            },
+          ]"
+          :required="true"
+        >
+          <template #topLeft>switch 顯示</template>
+        </RadioGroup>
+        <Textarea :value="formState" name="notice" class="w-full my-2">
+          <template #topLeft>switch 開啟時傳送的訊息</template>
+        </Textarea>
+        <Textarea :value="formState" name="notice" class="w-full my-2">
+          <template #topLeft>switch 關閉時傳送的訊息</template>
+        </Textarea>
+        
       </form>
     </template>
     <template #modalAction>
diff --git a/src/views/setting/components/ViewModeSetting.vue b/src/views/setting/components/ViewModeSetting.vue
new file mode 100644
index 0000000..b8400e4
--- /dev/null
+++ b/src/views/setting/components/ViewModeSetting.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { onMounted, ref, inject, computed } from "vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
+
+const formState = ref({
+  lorf: [],
+});
+
+const updateFileList = (files) => {
+  formState.value.lorf = files;
+};
+</script>
+
+<template>
+  <div class="flex justify-start items-center mt-10 mb-5">
+    <h3 class="text-xl mr-5">2D / 3D 顯示設定 :</h3>
+  </div>
+  <div class="flex gap-5">
+    <span class="text-lg">3D 模型顯示 : </span
+    ><input
+      type="checkbox"
+      className="toggle toggle-lg toggle-success"
+      defaultChecked
+    />
+  </div>
+  <Upload
+    class="my-2 max-w-[600px] w-full"
+    name="oriFile"
+    :fileList="formState?.lorf"
+    :getFileList="updateFileList"
+    :multiple="true"
+    :baseUrl="`${FILE_BASEURL}/upload/operation`"
+    formats="png、jpg"
+  >
+    <template #topLeft>首頁2D圖上傳 :</template>
+  </Upload>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/views/system/components/SystemInfoModalDesktop.vue b/src/views/system/components/SystemInfoModalDesktop.vue
index a8d3799..cd7fe8a 100644
--- a/src/views/system/components/SystemInfoModalDesktop.vue
+++ b/src/views/system/components/SystemInfoModalDesktop.vue
@@ -36,8 +36,9 @@ const groupedData = computed(() => {
   return grouped;
 });
 
-const togglePowerSwitch = () => {
-  console.log("Power Switch");
+const togglePowerSwitch = (e, val) => {
+  const isChecked = e.target.checked;
+  console.log("Power Switch", e, val, "狀態:", isChecked); 
 };
 </script>
 
@@ -73,7 +74,7 @@ const togglePowerSwitch = () => {
                   type="checkbox"
                   class="toggle toggle-success"
                   :checked="group.value"
-                  @change="togglePowerSwitch()"
+                  @change="togglePowerSwitch($event, group.value)"
                 />
               </template>
               <template v-else>