chore: 修改项目信息结构

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

@@ -8,6 +8,23 @@ import type {
   GlobalThemeJsonType,
 } from '@/settings/chartThemes/index'
 
+// 项目数据枚举
+export enum ProjectInfoEnum {
+  // 名称
+  PROJECT_NAME = 'projectName',
+  // 描述
+  REMARKS = 'remarks',
+  // 缩略图
+  THUMBNAIL= 'thumbnail'
+}
+
+// 项目数据
+export type ProjectInfoType = {
+  projectName: string,
+  remarks: string,
+  thumbnail: string
+}
+
 // 编辑画布属性
 export enum EditCanvasTypeEnum {
   EDIT_LAYOUT_DOM = 'editLayoutDom',
@@ -44,8 +61,6 @@ export type EditCanvasType = {
 
 // 画布数据/滤镜/背景色/宽高主题等
 export enum EditCanvasConfigEnum {
-  PROJECT_NAME = 'projectName',
-  REMARKS = 'remarks',
   WIDTH = 'width',
   HEIGHT = 'height',
   CHART_THEME_COLOR = 'chartThemeColor',
@@ -57,7 +72,7 @@ export enum EditCanvasConfigEnum {
 }
 
 // 画布属性（需保存）
-export interface EditCanvasConfigType {
+export type EditCanvasConfigType = {
   // 项目名称
   [EditCanvasConfigEnum.PROJECT_NAME]: string,
   // 项目描述
@@ -129,6 +144,7 @@ export type RecordChartType = {
 
 // Store 枚举
 export enum ChartEditStoreEnum {
+  PROJECT_INFO = 'projectInfo',
   EDIT_RANGE = 'editRange',
   EDIT_CANVAS = 'editCanvas',
   RIGHT_MENU_SHOW = 'rightMenuShow',
@@ -161,6 +177,7 @@ export type RequestConfigType = {
 
 // Store 类型
 export interface ChartEditStoreType {
+  [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType
   [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean

src/store/modules/chartEditStore/chartEditStore.ts

@@ -15,6 +15,7 @@ import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@
 import { MenuEnum, SyncEnum } from '@/enums/editPageEnum'
 
 import {
+  ProjectInfoType,
   ChartEditStoreEnum,
   ChartEditStorage,
   ChartEditStoreType,
@@ -33,6 +34,12 @@ const settingStore = useSettingStore()
 export const useChartEditStore = defineStore({
   id: 'useChartEditStore',
   state: (): ChartEditStoreType => ({
+    // 项目数据
+    projectInfo: {
+      projectName: '',
+      remarks: '',
+      thumbnail: ''
+    },
     // 画布属性
     editCanvas: {
       // 编辑区域 Dom
@@ -72,10 +79,6 @@ export const useChartEditStore = defineStore({
     // -----------------------
     // 画布属性（需存储给后端）
     editCanvasConfig: {
-      // 项目名称
-      projectName: '',
-      // 描述
-      remarks: '',
       // 默认宽度
       width: 1920,
       // 默认高度
@@ -117,6 +120,9 @@ export const useChartEditStore = defineStore({
     componentList: []
   }),
   getters: {
+    getProjectInfo(): ProjectInfoType {
+      return this.projectInfo
+    },
     getMousePosition(): MousePositionType {
       return this.mousePosition
     },
@@ -151,6 +157,10 @@ export const useChartEditStore = defineStore({
     }
   },
   actions: {
+    // * 设置 peojectInfo 数据项
+    setProjectInfo<T extends keyof ProjectInfoType,  K extends ProjectInfoType[T]>(key: T, value: K) {
+      this.projectInfo[key] = value
+    },
     // * 设置 editCanvas 数据项
     setEditCanvas<T extends keyof EditCanvasType,  K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value

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

@@ -28,7 +28,7 @@ import { ref, nextTick, computed, watchEffect } from 'vue'
 import { ResultEnum } from '@/enums/httpEnum'
 import { fetchRouteParamsLocation, httpErrorHandle } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { updateProjectApi } from '@/api/path/project'
 import { useSync } from '../../hooks/useSync.hook'
 import { icon } from '@/plugins'
@@ -43,7 +43,7 @@ const inputInstRef = ref(null)
 const title = ref<string>(fetchRouteParamsLocation())
 
 watchEffect(() => {
-  title.value = chartEditStore.getEditCanvasConfig.projectName || ''
+  title.value = chartEditStore.getProjectInfo.projectName || ''
 })
 
 const comTitle = computed(() => {
@@ -60,13 +60,10 @@ const handleFocus = () => {
 
 const handleBlur = async () => {
   focus.value = false
-  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, title.value || '')
+  chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, title.value || '')
-  const { remarks, backgroundImage, background } = chartEditStore.getEditCanvasConfig
   const res:any = await updateProjectApi({
     id: fetchRouteParamsLocation(),
     projectName: title.value,
-    indexImage: backgroundImage || background,
-    remarks: remarks
   })
   if(res.code === ResultEnum.SUCCESS) {
     dataSyncUpdate()

src/views/chart/hooks/useSync.hook.ts

@@ -1,7 +1,7 @@
 import { onUnmounted } from 'vue';
 import { getUUID, httpErrorHandle, fetchRouteParamsLocation } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { EditCanvasTypeEnum, ChartEditStoreEnum, EditCanvasConfigEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { fetchChartComponent, createComponent } from '@/packages/index'
 import { CreateComponentType } from '@/packages/index.d'
@@ -50,7 +50,6 @@ export const useSync = () => {
           let newComponent: CreateComponentType = await createComponent(
             comItem.chartConfig
           )
-          // 不保存到记录
           chartEditStore.addComponentList(
             Object.assign(newComponent, {...comItem, id: getUUID()}),
             false,
@@ -70,10 +69,19 @@ export const useSync = () => {
    * @param projectData 项目数据
    * @returns 
    */
-  const updateStoreInfo = (projectData: ChartEditStorage) => {
+  const updateStoreInfo = (projectData: {
-    const { projectName, remarks } = projectData.editCanvasConfig
+    id: string,
-    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, projectName)
+    projectName: string,
-    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.REMARKS, remarks)
+    indexImage: string,
+    remarks: string,
+  }) => {
+    const { projectName, remarks, indexImage } = projectData
+    // 名称
+    chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, projectName)
+    // 描述
+    chartEditStore.setProjectInfo(ProjectInfoEnum.REMARKS, remarks)
+    // 缩略图
+    chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)
   }
 
   // 数据获取
@@ -83,10 +91,9 @@ export const useSync = () => {
       const res: any = await fetchProjectApi({ projectId: fetchRouteParamsLocation() })
       if (res.code === ResultEnum.SUCCESS) {
         if (res.data) {
-          const data = JSON.parse(res.data)
+          updateStoreInfo(res.data)
-          updateStoreInfo(data)
           // 更新全局数据
-          await updateComponent(data)
+          await updateComponent(JSON.parse(res.data.content))
           return
         }
         setTimeout(() => {
@@ -103,6 +110,7 @@ export const useSync = () => {
 
   // 数据保存
   const dataSyncUpdate = async () => {
+    if(!fetchRouteParamsLocation()) return
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
     
     let params = new FormData()