重命名 src/views/chart/contentHeader 为 src/views/chart/ContentHeader

src/views/chart/ContentHeader/headerLeftBtn/index.ts

@@ -0,0 +1,3 @@
+import HeaderLeftBtn from './index.vue'
+
+export { HeaderLeftBtn }

src/views/chart/ContentHeader/headerLeftBtn/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <n-space class="header-left-btn" :size="25">
+    <n-button size="small" quaternary @click="goHomeHandle()">
+      <template #icon>
+        <n-icon :depth="3">
+          <home-icon></home-icon>
+        </n-icon>
+      </template>
+    </n-button>
+    <n-space>
+      <!-- 模块展示按钮 -->
+      <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
+        <template #trigger>
+          <n-button size="small" ghost :type="styleHandle(item)" @click="clickHandle(item)">
+            <component :is="item.icon"></component>
+          </n-button>
+        </template>
+        <span>{{ item.title }}</span>
+      </n-tooltip>
+
+      <n-divider vertical />
+
+      <!-- 历史记录按钮 -->
+      <n-tooltip v-for="item in historyList" :key="item.key" placement="bottom" trigger="hover">
+        <template #trigger>
+          <n-button size="small" ghost type="primary" :disabled="!item.select" @click="clickHistoryHandle(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, Ref, reactive, computed } from 'vue'
+import { renderIcon, goDialog, goHome } from '@/utils'
+import { icon } from '@/plugins'
+import { useRemoveKeyboard } from '../../hooks/useKeyboard.hook'
+
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+
+const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
+const { setItem } = useChartLayoutStore()
+const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
+const chartEditStore = useChartEditStore()
+const chartHistoryStore = useChartHistoryStore()
+
+interface ItemType<T> {
+  key: T
+  select: Ref<boolean> | boolean
+  title: string
+  icon: any
+}
+
+const btnList = reactive<ItemType<ChartLayoutStoreEnum>[]>([
+  {
+    key: ChartLayoutStoreEnum.CHARTS,
+    select: getCharts,
+    title: '图表组件',
+    icon: renderIcon(BarChartIcon)
+  },
+  {
+    key: ChartLayoutStoreEnum.LAYERS,
+    select: getLayers,
+    title: '图层控制',
+    icon: renderIcon(LayersIcon)
+  },
+  {
+    key: ChartLayoutStoreEnum.DETAILS,
+    select: getDetails,
+    title: '详情设置',
+    icon: renderIcon(PrismIcon)
+  }
+])
+
+const isBackStack = computed(()=> chartHistoryStore.getBackStack.length> 1)
+
+const isForwardStack = computed(()=> chartHistoryStore.getForwardStack.length> 0)
+
+const historyList = reactive<ItemType<HistoryStackEnum>[]>([
+  {
+    key: HistoryStackEnum.BACK_STACK,
+    // 一定会有初始化画布
+    select: isBackStack,
+    title: '后退',
+    icon: renderIcon(ArrowBackIcon)
+  },
+  {
+    key: HistoryStackEnum.FORWARD_STACK,
+    select: isForwardStack,
+    title: '前进',
+    icon: renderIcon(ArrowForwardIcon)
+  }
+])
+
+
+// store 描述的是展示的值，所以和 ContentConfigurations 的 collapsed 是相反的
+const styleHandle = (item: ItemType<ChartLayoutStoreEnum>) => {
+  if (item.key === ChartLayoutStoreEnum.DETAILS) {
+    return item.select ? '' : 'primary'
+  }
+  return item.select ? 'primary' : ''
+}
+
+// 布局处理
+const clickHandle = (item: ItemType<ChartLayoutStoreEnum>) => {
+  setItem(item.key, !item.select)
+}
+
+// 历史记录处理
+const clickHistoryHandle = (item: ItemType<HistoryStackEnum>) => {
+  switch (item.key) {
+    case HistoryStackEnum.BACK_STACK:
+      chartEditStore.setBack()
+      break;
+    case HistoryStackEnum.FORWARD_STACK:
+      chartEditStore.setForward()
+      break;
+  }
+}
+
+// 返回首页
+const goHomeHandle = () => {
+  goDialog({
+    message: '返回将不会保存任何操作',
+    isMaskClosable: true,
+    onPositiveCallback: () => {
+      goHome()
+      useRemoveKeyboard()
+    }
+  })
+}
+</script>
+<style lang="scss" scoped>
+.header-left-btn {
+  margin-left: -37px;
+ }
+</style>

src/views/chart/ContentHeader/headerRightBtn/index.ts

@@ -0,0 +1,3 @@
+import HeaderRightBtn from './index.vue'
+
+export { HeaderRightBtn }

src/views/chart/ContentHeader/headerRightBtn/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <n-space class="go-mt-0">
+    <n-button v-for="item in btnList" :key="item.title" ghost @click="item.event">
+      <template #icon>
+        <component :is="item.icon"></component>
+      </template>
+      <span>{{ item.title }}</span>
+    </n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { shallowReactive } from 'vue'
+import { renderIcon, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
+import { PreviewEnum } from '@/enums/pageEnum'
+import { StorageEnum } from '@/enums/storageEnum'
+import { useRoute } from 'vue-router'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { icon } from '@/plugins'
+
+const { BrowsersOutlineIcon, SendIcon } = icon.ionicons5
+const chartEditStore = useChartEditStore()
+
+const routerParamsInfo = useRoute()
+
+// 预览
+const previewHandle = () => {
+  const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
+  if (!path) return
+  const { id } = routerParamsInfo.params
+  // id 标识
+  const previewId = typeof id === 'string' ? id : id[0]
+  const storageInfo = chartEditStore.getStorageInfo
+  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+
+  if (sessionStorageInfo?.length) {
+    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === previewId)
+    // 重复替换
+    if (repeateIndex !== -1) {
+      sessionStorageInfo.splice(repeateIndex, 1, { id: previewId, ...storageInfo })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    } else {
+      sessionStorageInfo.push({
+        id: previewId, ...storageInfo
+      })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    }
+  } else {
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id: previewId, ...storageInfo }])
+  }
+  // 跳转
+  routerTurnByPath(path, [previewId], undefined, true)
+}
+
+// 发布
+const sendHandle = () => {
+  window['$message'].warning('该功能暂未实现（因为压根没有后台）')
+}
+
+const btnList = shallowReactive([
+  {
+    select: true,
+    title: '预览',
+    icon: renderIcon(BrowsersOutlineIcon),
+    event: previewHandle
+  },
+  {
+    select: true,
+    title: '发布',
+    icon: renderIcon(SendIcon),
+    event: sendHandle
+  }
+])
+
+</script>
+<style lang="scss" scoped>
+.align-center {
+  margin-top: -4px;
+}
+</style>

src/views/chart/ContentHeader/headerTitle/index.ts

@@ -0,0 +1,3 @@
+import HeaderTitle from './index.vue'
+
+export { HeaderTitle }

src/views/chart/ContentHeader/headerTitle/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <n-space>
+    <n-icon size="20" :depth="3">
+      <fish-icon></fish-icon>
+    </n-icon>
+    <n-text @click="handleFocus">
+      工作空间 -
+      <n-button v-show="!focus" secondary round size="tiny">{{ comTitle }}</n-button>
+    </n-text>
+
+    <n-input
+      v-show="focus"
+      ref="inputInstRef"
+      size="small"
+      type="text"
+      maxlength="16"
+      show-count
+      round
+      placeholder="请输入项目名称"
+      v-model:value.trim="title"
+      @blur="handleBlur"
+   ></n-input>
+  </n-space>
+</template>
+
+<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 inputInstRef = ref(null)
+
+// 根据路由 id 参数获取项目信息
+const fetchProhectInfoById = () => {
+  const routeParamsRes = fetchRouteParams()
+  if (!routeParamsRes) return
+  const { id } = routeParamsRes
+  if (id.length) {
+    return id[0]
+  }
+  return ''
+
+}
+
+const title = ref<string>(fetchProhectInfoById() || '')
+
+
+const comTitle = computed(() => {
+  title.value = title.value.replace(/\s/g, "");
+  return title.value.length ? title.value : '新项目'
+})
+
+const handleFocus = () => {
+  focus.value = true
+  nextTick(() => {
+    ; (<any>inputInstRef).value.focus()
+  })
+}
+
+const handleBlur = () => {
+  focus.value = false
+}
+</script>