feat: 新增预览页

src/components/SystemSet/index.vue

@@ -69,16 +69,6 @@ defineProps({
 const settingStore = useSettingStore()
 
 const list = reactive<ListType[]>([
-  {
-    key: SettingStoreEnums.CHART_ALIGN_RANGE,
-    value: settingStore.getChartAlignRange,
-    type: 'number',
-    name: '吸附距离',
-    min: 10,
-    suffix: 'px',
-    step: 2,
-    desc: '移动图表时的吸附距离'
-  },
   {
     key: SettingStoreEnums.ASIDE_ALL_COLLAPSED,
     value: settingStore.getAsideAllCollapsed,
@@ -100,6 +90,16 @@ const list = reactive<ListType[]>([
     name: '切换语言',
     desc: '切换语言重新加载页面',
     tip: '若遇到部分区域语言切换失败，则开启'
+  },
+  {
+    key: SettingStoreEnums.CHART_ALIGN_RANGE,
+    value: settingStore.getChartAlignRange,
+    type: 'number',
+    name: '吸附距离',
+    min: 10,
+    suffix: 'px',
+    step: 2,
+    desc: '移动图表时的吸附距离'
   }
 ])
 

src/enums/pageEnum.ts

@@ -6,6 +6,12 @@ export enum ChartEnum {
   CHART_HOME_NAME = 'ChartHome',
 }
 
+export enum PreviewEnum {
+  //  图表预览
+  CHART_PREVIEW = '/chart/preview/:id(.*)*',
+  CHART_PREVIEW_NAME = 'ChartPreview',
+}
+
 export enum PageEnum {
   // 登录
   BASE_LOGIN = '/login',

src/enums/storageEnum.ts

@@ -1,14 +1,16 @@
 export enum StorageEnum {
   // 全局设置
-  GO_SYSTEM_SETTING_STORE = 'GO-SYSTEM-SETTING',
+  GO_SYSTEM_SETTING_STORE = 'GO_SYSTEM_SETTING',
   // token 等信息
-  GO_ACCESS_TOKEN_STORE = 'GO-ACCESS-TOKEN',
+  GO_ACCESS_TOKEN_STORE = 'GO_ACCESS_TOKEN',
   // 登录信息
   GO_LOGIN_INFO_STORE = 'GO_LOGIN_INFO',
   // 语言
-  GO_LANG_STORE = 'GO-LANG',
+  GO_LANG_STORE = 'GO_LANG',
   // 当前选择的主题
-  GO_DESIGN_STORE = 'GO-DESIGN',
+  GO_DESIGN_STORE = 'GO_DESIGN',
-  // 拖拽页面
+  // 工作台布局配置
-  GO_CHART_LAYOUT_STORE = 'GO-Chart-Layout-Store'
+  GO_CHART_LAYOUT_STORE = 'GO_CHART_LAYOUT',
+  // 工作台需要保存的数据
+  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST'
 }

src/router/index.ts

@@ -20,7 +20,8 @@ const RootRoute: Array<RouteRecordRaw> = [
     children: [
       ...HttpErrorPage,
       modules.projectRoutes,
-      modules.chartRoutes
+      modules.chartRoutes,
+      modules.previewRoutes
     ]
   }
 ]

src/router/modules/index.ts

@@ -1,7 +1,9 @@
 import projectRoutes from './project.router'
 import chartRoutes from './chart.route'
+import previewRoutes from './preview.route'
 
 export default {
   projectRoutes,
-  chartRoutes
+  chartRoutes,
+  previewRoutes
 }

src/router/modules/preview.route.ts

@@ -0,0 +1,20 @@
+import { RouteRecordRaw } from 'vue-router'
+import { PreviewEnum } from '@/enums/pageEnum'
+
+// 引入路径
+const importPath = {
+  'PreviewEnum.CHART_PREVIEW_NAME': () => import('@/views/preview/index.vue')
+}
+
+const chartRoutes: RouteRecordRaw = {
+  path: PreviewEnum.CHART_PREVIEW,
+  name: PreviewEnum.CHART_PREVIEW_NAME,
+  component: importPath['PreviewEnum.CHART_PREVIEW_NAME'],
+  meta: {
+    title: '预览',
+    isRoot: true
+  }
+}
+
+
+export default chartRoutes

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -120,7 +120,7 @@ export enum ChartEditStoreEnum {
 }
 
 // Store 类型
-export interface chartEditStoreType {
+export interface ChartEditStoreType {
   [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
@@ -129,3 +129,8 @@ export interface chartEditStoreType {
   [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
   [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
 }
+
+export interface ChartEditStorage {
+  [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType,
+  [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
+}

src/store/modules/chartEditStore/chartEditStore.ts

@@ -8,7 +8,9 @@ import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import {
-  chartEditStoreType,
+  ChartEditStoreEnum,
+  ChartEditStorage,
+  ChartEditStoreType,
   EditCanvasType,
   MousePositionType,
   TargetChartType,
@@ -21,7 +23,7 @@ const chartHistoryStoreStore = useChartHistoryStoreStore()
 // 编辑区域内容
 export const useChartEditStore = defineStore({
   id: 'useChartEditStore',
-  state: (): chartEditStoreType => ({
+  state: (): ChartEditStoreType => ({
     // 画布属性
     editCanvas: {
       // 编辑区域 Dom
@@ -106,6 +108,13 @@ export const useChartEditStore = defineStore({
     },
     getComponentList(): CreateComponentType[] {
       return this.componentList
+    },
+    // 获取需要存储的数据项
+    getStorageInfo(): ChartEditStorage {
+      return {
+        [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
+        [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList
+      }
     }
   },
   actions: {
@@ -113,6 +122,7 @@ export const useChartEditStore = defineStore({
     setEditCanvas<T extends keyof EditCanvasType,  K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value
     },
+    // * 设置 editCanvasConfig（需保存后端） 数据项
     setEditCanvasConfig<T extends keyof EditCanvasConfigType,  K extends EditCanvasConfigType[T]>(key: T, value: K) {
       this.editCanvasConfig[key] = value
     },

src/utils/router.ts

@@ -37,10 +37,14 @@ export const routerTurnByName = (
  * @param pageName
  */
 export const fetchPathByName = (pageName: string, p?: string) => {
+  try {
     const pathData = router.resolve({
       name: pageName,
     })
     return p ? (pathData as any)[p] : pathData
+  } catch (error) {
+    window['$message'].warning('查询路由信息失败，请联系管理员！')
+  }
 }
 
 /**
@@ -130,8 +134,12 @@ export const openGiteeSourceCode = () => {
  * @returns object
  */
 export const fetchRouteParams = () => {
+  try {
     const route = useRoute()
     return route.params
+  } catch (error) {
+    window['$message'].warning('查询路由信息失败，请联系管理员！')
+  }
 }
 
 /**

src/utils/storage.ts

@@ -2,7 +2,7 @@
 /**
  * * 存储本地会话数据
  * @param k 键名
- * @param v 键值
+ * @param v 键值（无需stringiiy）
  * @returns RemovableRef
  */
  export const setLocalStorage = <T>(k: string, v: T) => {
@@ -15,9 +15,10 @@
 
 /**
  * * 获取本地会话数据
+ * @param k 键名
  * @returns any
  */
-export const getLocalStorage: (k: string) => any = (k: string) => {
+export const getLocalStorage = (k: string) => {
   const item = window.localStorage.getItem(k)
   try {
     return item ? JSON.parse(item) : item

src/views/chart/HeaderRightBtn/index.vue

@@ -1,32 +1,73 @@
 <template>
   <n-space class="go-mt-0">
-    <n-button v-for="item in btnList" :key="item.title" ghost size="small">
+    <n-button v-for="item in btnList" :key="item.title" ghost size="small" @click="item.event">
       <template #icon>
         <component :is="item.icon"></component>
       </template>
-      <span>
+      <span>{{ item.title }}</span>
-        {{ item.title }}
-      </span>
     </n-button>
   </n-space>
 </template>
 
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { renderIcon } from '@/utils'
+import { renderIcon, fetchPathByName, routerTurnByPath, setLocalStorage, getLocalStorage } from '@/utils'
+import { PreviewEnum } from '@/enums/pageEnum'
+import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
+import { useRoute } from 'vue-router'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
 const { BrowsersOutlineIcon, SendIcon } = icon.ionicons5
+const chartEditStore = useChartEditStore()
+
+// TODO 我也不知道为什么不能实时获取，必须初始化获取
+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 localStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+
+  if (localStorageInfo?.length) {
+    // 重复替换
+    const repeateIndex = localStorageInfo.findIndex((e: { id: string }) => e.id === previewId)
+    if (repeateIndex !== -1) {
+      localStorageInfo.splice(repeateIndex, 1, { id: previewId, ...storageInfo })
+    }
+    setLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST, localStorageInfo)
+  } else {
+    setLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id: previewId, ...storageInfo }])
+  }
+
+  // 跳转
+  routerTurnByPath(path, [previewId], undefined, true)
+}
+
+// 发布
+const sendHandle = () => {
+  window['$message'].warning('该功能暂未实现（因为压根没有后台）')
+}
 
 const btnList = reactive([
   {
+    key: '',
     select: true,
     title: '预览',
-    icon: renderIcon(BrowsersOutlineIcon)
+    icon: renderIcon(BrowsersOutlineIcon),
+    event: previewHandle
   },
   {
     select: true,
     title: '发布',
-    icon: renderIcon(SendIcon)
+    icon: renderIcon(SendIcon),
+    event: sendHandle
   }
 ])
 </script>

src/views/chart/HeaderTitle/index.vue

@@ -34,7 +34,9 @@ const inputInstRef = ref(null)
 
 // 根据路由 id 参数获取项目信息
 const fetchProhectInfoById = () => {
-  const { id } = fetchRouteParams()
+  const routeParamsRes = fetchRouteParams()
+  if (!routeParamsRes) return
+  const { id } = routeParamsRes
   if (id.length) {
     // todo 从后端获取项目信息并存储
     return '编辑项目' + id[0]
@@ -43,7 +45,7 @@ const fetchProhectInfoById = () => {
 
 }
 
-const title = ref<string>(fetchProhectInfoById())
+const title = ref<string>(fetchProhectInfoById() || '')
 
 
 const comTitle = computed(() => {

src/views/preview/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="go-preview">
+    <h1>预览</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getLocalStorage, fetchRouteParams } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+
+const init = () => {
+  const routeParamsRes = fetchRouteParams()
+  if (!routeParamsRes) return
+  const { id } = routeParamsRes
+
+  const storageList = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST)
+
+  for (let i = 0; i < storageList.length; i++) {
+    if (id.toString() === storageList[i]['id']) {
+      console.log(storageList[i]);
+      break; 
+    }
+  }
+}
+
+init()
+</script>
+
+<style lang="scss" scoped>
+@include go("preview") {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  @include background-image("background-image");
+}
+</style>