From a91914fb43aeea5d65cdcbf97ca00e315e32c913 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Thu, 13 Nov 2025 11:54:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AA=BF=E6=95=B4=20Breadcrumb=20=E7=B5=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Breadcrumb.vue |  2 +-
 src/components/Navbar.vue            | 38 +++++++++++++++-------------
 src/views/PlantInfo.vue              |  8 +++---
 src/views/PlantReport.vue            |  2 --
 src/views/PlantSetting.vue           |  4 +--
 src/views/PlantsOverview.vue         |  6 ++---
 6 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/components/Common/Breadcrumb.vue b/src/components/Common/Breadcrumb.vue
index 7aab4da..b82ae72 100644
--- a/src/components/Common/Breadcrumb.vue
+++ b/src/components/Common/Breadcrumb.vue
@@ -1,7 +1,7 @@
 <template>
   <el-breadcrumb
     separator="/"
-    style="margin: 15px 5px; font-size: 0.9rem; opacity: 0.7"
+    style="margin: 15px 10px; font-size: 1.05rem; opacity: 0.9"
   >
     <el-breadcrumb-item
       v-for="(item, idx) in breadcrumbs"
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d8fbeac..8b14b7d 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -6,33 +6,37 @@
           v-if="props.isCollapse"
           src="../assets/bars-3.svg"
           alt="展開"
-          style="width: 24px; height: 24px"
+          style="width: 20px; height: 20px"
         />
         <img
           v-else
           src="../assets/x-mark.svg"
           alt="收合"
-          style="width: 24px; height: 24px"
+          style="width: 20px; height: 20px"
         />
       </el-button>
-      <span class="title">工控運維管理平台</span>
+      <Breadcrumb />
+    </div>
+    <div class="title-area">
+      <span class="title">工控運維管理平台</span>
+      <el-dropdown size="large">
+        <el-button type="text" circle>
+          <el-avatar :icon="UserFilled" />
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu style="font-size: large">
+            <el-dropdown-item>個人資料</el-dropdown-item>
+            <el-dropdown-item>帳號登出</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
-    <el-dropdown size="large">
-      <el-button type="text" circle>
-        <el-avatar :icon="UserFilled" /> 
-      </el-button>
-      <template #dropdown>
-        <el-dropdown-menu style="font-size: large;">
-          <el-dropdown-item>個人資料</el-dropdown-item>
-          <el-dropdown-item>帳號登出</el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
   </nav>
 </template>
 
 <script setup lang="ts">
 import { computed, defineProps, defineEmits } from "vue";
+import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import { UserFilled } from "@element-plus/icons-vue";
 
 const props = defineProps({
@@ -64,10 +68,10 @@ const toggleCollapse = () => {
 }
 .title {
   margin-bottom: 0;
-  font-size: 1.5rem;
+  font-size: 1.1rem;
   font-weight: 600;
-  color: #333;
-  padding-left: 10px;
+  color: #5d5d5d;
+  padding-right: 10px;
 }
 .collapse-btn {
   vertical-align: middle;
diff --git a/src/views/PlantInfo.vue b/src/views/PlantInfo.vue
index 5a141d3..71070fe 100644
--- a/src/views/PlantInfo.vue
+++ b/src/views/PlantInfo.vue
@@ -1,5 +1,4 @@
 <template>
-  <Breadcrumb />
   <el-row :gutter="20" style="margin-top: 20px">
     <el-col :xs="24">
       <el-card
@@ -8,9 +7,9 @@
         style="margin-bottom: 0"
         :body-style="{ paddingTop: '16px', paddingBottom: '0' }"
       >
-        <template #header>
+        <!-- <template #header>
           <span style="">{{ title }}</span>
-        </template>
+        </template> -->
         <el-tabs
           v-model="activeName"
           type="border-card"
@@ -27,7 +26,7 @@
               <span style="margin-left: 4px">{{ tab.label }}</span>
             </template>
             <template v-if="tab.src && activeName === tab.name">
-              <CustomIframe :src="tab.src" minHeight="calc(100vh - 300px)" />
+              <CustomIframe :src="tab.src" minHeight="calc(100vh - 210px)" />
             </template>
             <template v-else-if="tab.name === 'abnormal-record'">
               異常紀錄
@@ -42,7 +41,6 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import CustomIframe from "../components/Common/CustomIframe.vue";
 import {
   Odometer,
diff --git a/src/views/PlantReport.vue b/src/views/PlantReport.vue
index e430079..184a506 100644
--- a/src/views/PlantReport.vue
+++ b/src/views/PlantReport.vue
@@ -1,5 +1,4 @@
 <template>
-  <Breadcrumb />
   <el-row :gutter="20" style="margin-top: 20px">
     <el-col :xs="24" :md="5">
       <SiteMenu
@@ -41,7 +40,6 @@
 <script setup>
 import { ref, computed } from "vue";
 import dayjs from "dayjs";
-import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import SiteMenu from "../components/Report/SiteMenu.vue";
 import ReportFilter from "../components/Report/ReportFilter.vue";
 import ReportSummaryTable from "../components/Report/ReportSummaryTable.vue";
diff --git a/src/views/PlantSetting.vue b/src/views/PlantSetting.vue
index 85b97c1..9e2ba02 100644
--- a/src/views/PlantSetting.vue
+++ b/src/views/PlantSetting.vue
@@ -1,5 +1,4 @@
 <template>
-  <Breadcrumb />
   <el-row :gutter="20" style="margin-top: 20px">
     <el-col :xs="24">
       <el-card
@@ -36,7 +35,7 @@
               <span style="margin-left: 4px">{{ tab.label }}</span>
             </template>
             <template v-if="tab.src && activeName === tab.name">
-              <CustomIframe :src="tab.src" minHeight="calc(100vh - 300px)" />
+              <CustomIframe :src="tab.src" minHeight="calc(100vh - 280px)" />
             </template>
             <template v-else-if="tab.name === 'abnormal-setting'">
               異常紀錄
@@ -50,7 +49,6 @@
 
 <script setup>
 import { ref, computed } from "vue";
-import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import CustomIframe from "../components/Common/CustomIframe.vue";
 import { ScaleToOriginal, Warning } from "@element-plus/icons-vue";
 
diff --git a/src/views/PlantsOverview.vue b/src/views/PlantsOverview.vue
index 309e72f..5232ca9 100644
--- a/src/views/PlantsOverview.vue
+++ b/src/views/PlantsOverview.vue
@@ -1,17 +1,15 @@
 <template>
-  <Breadcrumb />
   <el-row :gutter="20" style="margin-top: 20px">
-    <el-col :xs="24">
+    <el-col :xs="24" >
       <CustomIframe
         src="/ord/file:^px/All.px|view:hx:HxPxView|view:?fullScreen=true"
-        minHeight="calc(100vh - 156px)"
+        minHeight="calc(100vh - 130px)"
       />
     </el-col>
   </el-row>
 </template>
 
 <script setup>
-import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import CustomIframe from "../components/Common/CustomIframe.vue";
 </script>
 <style scoped></style>