feat: 新增项目信息修改功能

src/api/path/project.ts

@@ -42,7 +42,7 @@ export const saveProjectApi = async (data: object) => {
   }
 }
 
-// * 修改项目
+// * 修改项目基础信息
 export const updateProjectApi = async (data: object) => {
   try {
     const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/edit`, data);

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

@@ -42,8 +42,10 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.SAVE_STATUS]: SyncEnum
 }
 
-// 滤镜/背景色/宽高主题等
+// 画布数据/滤镜/背景色/宽高主题等
 export enum EditCanvasConfigEnum {
+  PROJECT_NAME = 'projectName',
+  REMARKS = 'remarks',
   WIDTH = 'width',
   HEIGHT = 'height',
   CHART_THEME_COLOR = 'chartThemeColor',
@@ -56,6 +58,10 @@ export enum EditCanvasConfigEnum {
 
 // 画布属性（需保存）
 export interface EditCanvasConfigType {
+  // 项目名称
+  [EditCanvasConfigEnum.PROJECT_NAME]: string,
+  // 项目描述
+  [EditCanvasConfigEnum.REMARKS]: string,
   // 滤镜-色相
   [FilterEnum.HUE_ROTATE]: number
   // 滤镜-饱和度

src/store/modules/chartEditStore/chartEditStore.ts

@@ -72,6 +72,10 @@ export const useChartEditStore = defineStore({
     // -----------------------
     // 画布属性（需存储给后端）
     editCanvasConfig: {
+      // 项目名称
+      projectName: '',
+      // 描述
+      remarks: '',
       // 默认宽度
       width: 1920,
       // 默认高度

src/utils/router.ts

@@ -167,7 +167,7 @@ export const fetchRouteParams = () => {
  * * 通过硬解析获取当前路由下的参数
  * @returns object
  */
-export const fetchRouteParamsByhistory = () => {
+export const fetchRouteParamsLocation = () => {
   try {
     return document.location.hash.split('/').pop() || ''
   } catch (error) {

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

@@ -24,32 +24,31 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed } from 'vue'
+import { ref, nextTick, computed, watchEffect } from 'vue'
-import { fetchRouteParams } from '@/utils'
+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 { updateProjectApi } from '@/api/path/project'
+import { useSync } from '../../hooks/useSync.hook'
 import { icon } from '@/plugins'
+
+const chartEditStore = useChartEditStore()
+const { dataSyncUpdate } = useSync()
 const { FishIcon } = icon.ionicons5
 
 const focus = ref<boolean>(false)
 const inputInstRef = ref(null)
 
-// 根据路由 id 参数获取项目信息
+const title = ref<string>(fetchRouteParamsLocation())
-const fetchProhectInfoById = () => {
-  const routeParamsRes = fetchRouteParams()
-  if (!routeParamsRes) return
-  const { id } = routeParamsRes
-  if (id.length) {
-    return id[0]
-  }
-  return ''
-
-}
-
-const title = ref<string>(fetchProhectInfoById() || '')
 
+watchEffect(() => {
+  title.value = chartEditStore.getEditCanvasConfig.projectName || ''
+})
 
 const comTitle = computed(() => {
-  title.value = title.value.replace(/\s/g, "");
+  title.value = title.value && title.value.replace(/\s/g, "")
-  return title.value.length ? title.value : '新项目'
+  return title.value.length ? title.value : fetchRouteParamsLocation()
 })
 
 const handleFocus = () => {
@@ -59,7 +58,20 @@ const handleFocus = () => {
   })
 }
 
-const handleBlur = () => {
+const handleBlur = async () => {
   focus.value = false
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.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()
+  } else {
+    httpErrorHandle()
+  }
 }
 </script>

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

@@ -1,7 +1,7 @@
 import { onUnmounted } from 'vue';
-import { getUUID, httpErrorHandle, fetchRouteParamsByhistory } from '@/utils'
+import { getUUID, httpErrorHandle, fetchRouteParamsLocation } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { EditCanvasTypeEnum, ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { EditCanvasTypeEnum, ChartEditStoreEnum, EditCanvasConfigEnum, 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'
@@ -24,7 +24,7 @@ export const useSync = () => {
    * @param isSplace 是否替换数据
    * @returns 
    */
-  const updateComponent = async (projectData: any, isSplace = false) => {
+  const updateComponent = async (projectData: ChartEditStorage, isSplace = false) => {
     if (isSplace) {
       // 清除列表
       chartEditStore.componentList = []
@@ -65,14 +65,27 @@ export const useSync = () => {
     }
   }
 
+  /**
+   * * 赋值全局数据
+   * @param projectData 项目数据
+   * @returns 
+   */
+  const updateStoreInfo = (projectData: ChartEditStorage) => {
+    const { projectName, remarks } = projectData.editCanvasConfig
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, projectName)
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.REMARKS, remarks)
+  }
+
   // 数据获取
   const dataSyncFetch = async () => {
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
     try {
-      const res: any = await fetchProjectApi({ projectId: fetchRouteParamsByhistory() })
+      const res: any = await fetchProjectApi({ projectId: fetchRouteParamsLocation() })
       if (res.code === ResultEnum.SUCCESS) {
         if (res.data) {
           const data = JSON.parse(res.data)
+          updateStoreInfo(data)
+          // 更新全局数据
           await updateComponent(data)
           return
         }
@@ -93,7 +106,7 @@ export const useSync = () => {
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
     
     let params = new FormData()
-    params.append('projectId', fetchRouteParamsByhistory())
+    params.append('projectId', fetchRouteParamsLocation())
     params.append('content', JSON.stringify(chartEditStore.getStorageInfo || {}))
     const res: any = await saveProjectApi(params)
 
@@ -123,6 +136,7 @@ export const useSync = () => {
 
   return {
     updateComponent,
+    updateStoreInfo,
     dataSyncFetch,
     dataSyncUpdate,
     intervalDataSyncUpdate