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

src/plugins/icon.ts

@@ -36,7 +36,8 @@ import {
   Cube as CubeIcon,
   ChevronBackOutline as ChevronBackOutlineIcon,
   Flash as FlashIcon,
-  SettingsSharp as SettingsSharpIcon
+  SettingsSharp as SettingsSharpIcon,
+  Home as HomeIcon
 } from '@vicons/ionicons5'
 
 // ionicons5 在这里
@@ -116,7 +117,9 @@ const ionicons5 = {
   // 后端数据（闪电）
   FlashIcon,
   // 设置（齿轮）
-  SettingsSharpIcon
+  SettingsSharpIcon,
+  // 回退
+  HomeIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/utils/page.ts

@@ -1,7 +1,9 @@
+import { useRoute } from 'vue-router'
 import { ResultEnum } from '@/enums/httpEnum'
 import { ErrorPageNameMap, PageEnum } from '@/enums/pageEnum'
 import router from '@/router'
 import { docPath, giteeSourceCodePath } from '@/settings/pathConst'
+import { goDialog } from '@/utils/plugin'
 
 /**
  * * 根据名字跳转路由
@@ -21,12 +23,12 @@ export const routerTurnByName = (
   }
   if (isReplace) {
     router.replace({
-      name: pageName
+      name: pageName,
     })
     return
   }
   router.push({
-    name: pageName
+    name: pageName,
   })
 }
 
@@ -37,7 +39,7 @@ export const routerTurnByName = (
  */
 export const fetchPathByName = (pageName: string, p?: string) => {
   const pathData = router.resolve({
-    name: pageName
+    name: pageName,
   })
   return p ? (pathData as any)[p] : pathData
 }
@@ -65,12 +67,12 @@ export const routerTurnByPath = (
   }
   if (isReplace) {
     router.replace({
-      path: fullPath
+      path: fullPath,
     })
     return
   }
   router.push({
-    path: fullPath
+    path: fullPath,
   })
 }
 
@@ -123,3 +125,27 @@ export const openDoc = () => {
 export const openGiteeSourceCode = () => {
   openNewWindow(giteeSourceCodePath)
 }
+
+/**
+ * * 获取当前路由下的参数
+ * @returns object
+ */
+export const fetchRouteParams = () => {
+  const route = useRoute()
+  return route.params
+}
+
+/**
+ * * 是否需要确认
+ * @param confirm
+ */
+export const goHome = (confirm?: boolean, message?: string) => {
+  if (confirm) {
+    goDialog({
+      message,
+      onPositiveCallback: () => {
+        routerTurnByName(PageEnum.BASE_HOME_NAME)
+      },
+    })
+  }
+}

src/utils/plugin.ts

@@ -7,16 +7,16 @@ import { renderIcon } from '@/utils'
 
 /**
  * * render 对话框
- * @param { Function } dialogFn dialog函数，暂时必须从页面传过来
  * @param { Object} params 配置参数
+ * @param { Function } dialogFn 函数
  */
 export const goDialog = (
   params: {
     // 基本
-    type: DialogEnum
+    type?: DialogEnum
     message?: string
     // 回调
-    onPositiveCallback?: Function
+    onPositiveCallback: Function
     onNegativeCallback?: Function
     // 异步
     promise?: boolean
@@ -56,12 +56,13 @@ export const goDialog = (
     }
   }
 
-  const d: DialogReactive = (typeObj as any)[type]['fn']({
+  const d: DialogReactive = (typeObj as any)[type || DialogEnum.warning]['fn']({
     title: '提示',
     icon: renderIcon(InformationCircleIcon, { size: dialogIconSize }),
-    content: (typeObj as any)[type]['message'],
+    content: (typeObj as any)[type || DialogEnum.warning]['message'],
     positiveText: '确定',
     negativeText: '取消',
+    // 是否通过遮罩关闭
     maskClosable: maskClosable,
     onPositiveClick: async () => {
       // 执行异步

src/utils/utils.ts

@@ -55,6 +55,12 @@ export const requireFallbackImg = (path?: string, name?: string) => {
   ).href
 }
 
+/**
+ * 全屏操作函数
+ * @param isFullscreen 
+ * @param isEnabled 
+ * @returns 
+ */
 export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
   // 是否是全屏
   if (isFullscreen) return screenfull.isFullscreen
@@ -72,12 +78,11 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
 
 /**
  * * 挂载监听
- * @returns url
  */
 export const goAddEventListener = <K extends keyof WindowEventMap>(
   target: EventTarget,
   type: K,
-  listener: EventListenerOrEventListenerObject,
+  listener: any,
   options?: boolean | AddEventListenerOptions | undefined
 ) => {
   if (!target) return
@@ -90,9 +95,9 @@ export const goAddEventListener = <K extends keyof WindowEventMap>(
     options
   )
 }
+
 /**
  * * 卸载监听
- * @returns url
  */
 export const goRemoveEventListener = <K extends keyof WindowEventMap>(
   target: EventTarget,

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-space class="header-left-btn" :size="25">
-    <n-tooltip
+    <n-button size="small" quaternary #icon @click="goHome(true, '返回将不会保存任何操作')">
-      v-for="item in btnList"
+      <n-icon :depth="3">
-      :key="item.key"
+        <HomeIcon />
-      placement="bottom"
+      </n-icon>
-      trigger="hover"
+    </n-button>
-    >
+    <n-space>
-      <template #trigger>
+      <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
-        <n-button
+        <template #trigger>
-          :type="item.select ? 'info' : ''"
+          <n-button
-          size="small"
+            :type="item.select ? 'success' : ''"
-          ghost
+            size="small"
-          @click="clickHandle(item)"
+            ghost
-        >
+            @click="clickHandle(item)"
-          <component :is="item.icon"></component>
+          >
-        </n-button>
+            <component :is="item.icon"></component>
-      </template>
+          </n-button>
-      <span>
+        </template>
-        {{ item.title }}
+        <span>{{ item.title }}</span>
-      </span>
+      </n-tooltip>
-    </n-tooltip>
+    </n-space>
   </n-space>
 </template>
 
 <script setup lang="ts">
-import { toRefs, reactive } from 'vue'
+import { toRefs, Ref, reactive } from 'vue'
-import { renderIcon } from '@/utils'
+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([
+type ItemType = {
-  {
+  key: string;
-    key: 'layers',
+  select: Ref<boolean> | boolean;
-    select: getLayers,
+  title: string;
-    title: '图层控制',
+  icon: any
-    icon: renderIcon(LayersIcon)
+}
-  },
+
+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">
+      <n-button v-show="!focus" secondary round size="tiny">{{ comTitle }}</n-button>
-        {{ 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>