fix: 修改绘制界面样式，新增返回首页按钮

src/views/chart/components/ContentBox/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="go-content-box" :class="[`bg-depth${depth}`, flex && 'flex']">
     <div v-if="showTop" class="top go-mt-0 go-flex-no-wrap">
-      <n-space class="go-flex-no-wrap">
+      <n-space class="go-flex-no-wrap" :size="5">
         <n-ellipsis>
           <n-text>{{ title }}</n-text>
         </n-ellipsis>

src/views/chart/components/ContentCharts/index.vue

@@ -4,11 +4,11 @@
     :class="{ scoped: !getCharts }"
     title="图表"
     :depth="2"
-    :backIcon="getCharts"
+    :backIcon="false"
   >
     <template #icon>
       <n-icon size="14" :depth="2">
-        <component :is="BarChartIcon" />
+        <BarChartIcon />
       </n-icon>
     </template>
   </ContentBox>

src/views/chart/components/ContentDetails/index.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, shallowRef } from 'vue'
 import { renderIcon } from '@/utils'
 import { icon } from '@/plugins'
 import { ContentBox } from '../ContentBox/index'
@@ -43,13 +43,13 @@ const tabList = reactive([
     key: 'setting',
     title: '配置项',
     icon: renderIcon(CubeIcon),
-    render: Setting
+    render: shallowRef(Setting)
   },
   {
     key: 'behind',
     title: '后端数据',
     icon: renderIcon(FlashIcon),
-    render: Behind
+    render: shallowRef(Behind)
   }
 ])
 </script>

src/views/chart/components/HeaderLeftBtn/index.vue

@@ -1,51 +1,58 @@
 <template>
-  <n-space class="header-left-btn">
-    <n-tooltip
-      v-for="item in btnList"
-      :key="item.key"
-      placement="bottom"
-      trigger="hover"
-    >
-      <template #trigger>
-        <n-button
-          :type="item.select ? 'info' : ''"
-          size="small"
-          ghost
-          @click="clickHandle(item)"
-        >
-          <component :is="item.icon"></component>
-        </n-button>
-      </template>
-      <span>
-        {{ item.title }}
-      </span>
-    </n-tooltip>
+  <n-space class="header-left-btn" :size="25">
+    <n-button size="small" quaternary #icon @click="goHome(true, '返回将不会保存任何操作')">
+      <n-icon :depth="3">
+        <HomeIcon />
+      </n-icon>
+    </n-button>
+    <n-space>
+      <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
+        <template #trigger>
+          <n-button
+            :type="item.select ? 'success' : ''"
+            size="small"
+            ghost
+            @click="clickHandle(item)"
+          >
+            <component :is="item.icon"></component>
+          </n-button>
+        </template>
+        <span>{{ item.title }}</span>
+      </n-tooltip>
+    </n-space>
   </n-space>
 </template>
 
 <script setup lang="ts">
-import { toRefs, reactive } from 'vue'
-import { renderIcon } from '@/utils'
+import { toRefs, Ref, reactive } from 'vue'
+import { renderIcon, routerTurnByName, goHome } from '@/utils'
 import { icon } from '@/plugins'
-const { LayersIcon, BarChartIcon, PrismIcon } = icon.ionicons5
+const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 
 const { setItem } = useChartLayoutStore()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 
-const btnList = reactive([
-  {
-    key: 'layers',
-    select: getLayers,
-    title: '图层控制',
-    icon: renderIcon(LayersIcon)
-  },
+type ItemType = {
+  key: string;
+  select: Ref<boolean> | boolean;
+  title: string;
+  icon: any
+}
+
+const btnList = reactive<ItemType[]>([
   {
     key: 'charts',
     select: getCharts,
     title: '图表组件',
     icon: renderIcon(BarChartIcon)
   },
+  {
+    key: 'layers',
+    select: getLayers,
+    title: '图层控制',
+    icon: renderIcon(LayersIcon)
+  },
   {
     key: 'details',
     select: getDetails,
@@ -54,12 +61,15 @@ const btnList = reactive([
   }
 ])
 
-const clickHandle = (item: { [T: string]: string }) => {
+
+
+const clickHandle = (item: ItemType) => {
   setItem(item.key, !item.select)
 }
 </script>
 <style lang="scss" scoped>
 .header-left-btn {
-  padding-right: 212px;
+  margin-left: -37px;
+  padding-right: 149px;
 }
 </style>

src/views/chart/components/HeaderTitle/index.vue

@@ -5,9 +5,7 @@
     </n-icon>
     <n-text @click="handleFocus">
       工作空间 -
-      <n-button v-show="!focus" secondary round size="tiny">
-        {{ comTitle }}
-      </n-button>
+      <n-button v-show="!focus" secondary round size="tiny">{{ comTitle }}</n-button>
     </n-text>
 
     <n-input
@@ -27,22 +25,36 @@
 
 <script setup lang="ts">
 import { ref, nextTick, computed } from 'vue'
+import { fetchRouteParams } from '@/utils'
 import { icon } from '@/plugins'
 const { FishIcon } = icon.ionicons5
 
 const focus = ref<boolean>(false)
-const title = ref<string>('')
 const inputInstRef = ref(null)
 
+// 根据路由 id 参数获取项目信息
+const fetchProhectInfoById = () => {
+  const { id } = fetchRouteParams()
+  if (id.length) {
+    // todo 从后端获取项目信息并存储
+    return '编辑项目' + id[0]
+  }
+  return ''
+
+}
+
+const title = ref<string>(fetchProhectInfoById())
+
+
 const comTitle = computed(() => {
-  title.value = title.value.replace(/\s/g,"");
+  title.value = title.value.replace(/\s/g, "");
   return title.value.length ? title.value : '新项目'
 })
 
 const handleFocus = () => {
   focus.value = true
   nextTick(() => {
-    ;(<any>inputInstRef).value.focus()
+    ; (<any>inputInstRef).value.focus()
   })
 }
 

src/views/chart/index.vue

@@ -13,8 +13,8 @@
         </template>
       </HeaderPro>
       <n-layout-content content-style="overflow:hidden; display: flex">
-        <ContentLayers />
         <ContentCharts />
+        <ContentLayers />
         <ContentDraw />
         <ContentDetails />
       </n-layout-content>