Merge branch 'dev' into dev-commet

2026-04-23 00:00:12 +08:00 · 2023-01-09 23:24:58 +08:00
parent 89194848de 9aff88c678
commit 98b38640d1
103 changed files with 623 additions and 308 deletions
@@ -26,12 +26,8 @@ export default {
    msg: '请求成功',
    data: {
      dimensions: ['name', 'value'],
-      source: [
-        { name: '厦门', 'value|0-40': 20 },
-        { name: '南阳', 'value|20-60': 40 },
-        { name: '北京', 'value|40-80': 60 },
-        { name: '上海', 'value|60-100': 80 },
-        { name: '新疆', value: 100 }
+      "source|2-5": [
+        { 'name|+1': ["厦门","福州","北京","上海","新疆","郑州","湖南","内蒙古"], 'value|0-40': 20 },
      ]
    }
  },
@@ -14,16 +14,19 @@
 </template>

 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import { useLangStore } from '@/store/modules/langStore/langStore'
 import { langList } from '@/i18n/index'
 import { LangEnum } from '@/enums/styleEnum'
 import { icon } from '@/plugins'

 const { LanguageIcon } = icon.ionicons5
+const { locale } = useI18n();
 const langStore = useLangStore()
 const options = langList

 const handleSelect = (key: LangEnum) => {
+  locale.value = key;
  langStore.changeLang(key)
 }
 </script>
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
    <n-list bordered class="go-system-info">
      <template #header>
        <n-space justify="space-between">
@@ -51,10 +51,10 @@ const props = defineProps({

 const emit = defineEmits(['update:modelShow'])
 const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
-const modelShow = ref(false)
+const modelShowRef = ref(false)

 watch(() => props.modelShow, (newValue) => {
-  modelShow.value = newValue
+  modelShowRef.value = newValue
 })

 const closeHandle = () => {
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
    <n-list bordered class="go-system-setting">
      <template #header>
        <n-space justify="space-between">
@@ -82,7 +82,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelShow'])
 const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
 const settingStore = useSettingStore()
-const modelShow = ref(false)
+const modelShowRef = ref(false)

 const list = reactive<ListType[]>([
  {
@@ -168,7 +168,7 @@ const list = reactive<ListType[]>([
 ])

 watch(() => props.modelShow, (newValue) => {
-  modelShow.value = newValue
+  modelShowRef.value = newValue
 })

 const closeHandle = () => {
@@ -79,5 +79,6 @@ export enum MacKeyboard {
  ALT = '⌥',
  CTRL_SOURCE_KEY = '⌘',
  SHIFT_SOURCE_KEY = '⇧',
-  ALT_SOURCE_KEY = '⌥'
+  ALT_SOURCE_KEY = '⌥',
+  SPACE = 'Space'
 }
@@ -23,6 +23,8 @@ export const langList = [
 ]

 const i18n = createI18n({
+  legacy: false,
+  globalInjection:true,
  locale: langStorage?.lang || lang,
  fallbackLocale: langStorage?.lang || lang,
  messages: {
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const BarCommonConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.BAR,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'bar_x.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/bar_y.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const BarCrossrangeConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.BAR,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'bar_y.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/capsule.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const CapsuleChartConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.BAR,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'capsule.png'
 }
@@ -111,18 +111,18 @@ watch(
  }
 )

-const calcData = (data: any) => {
-  mergeConfig(props.chartConfig.option)
-  calcCapsuleLengthAndLabelData()
-}
-
-const mergeConfig = (data: any) => {
-  state.mergedConfig = cloneDeep(data || {})
+const calcData = (data: any, type?: string) => {
+  let cloneConfig = cloneDeep(props.chartConfig.option || {})
+  state.mergedConfig = cloneConfig
+  if (type == 'preview') {
+    cloneConfig.dataset = data
+  }
+  calcCapsuleLengthAndLabelData(state.mergedConfig.dataset)
 }

 // 数据解析
-const calcCapsuleLengthAndLabelData = () => {
-  const { source } = state.mergedConfig.dataset
+const calcCapsuleLengthAndLabelData = (dataset: any) => {
+  const { source } = dataset
  if (!source.length) return

  state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
@@ -151,7 +151,7 @@ onMounted(() => {

 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  calcData(newData)
+  calcData(newData, 'preview')
 })
 </script>

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const LineCommonConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.LINE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_gradient_single.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const LineGradientSingleConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.LINE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_gradient_single.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_gradient.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const LineGradientsConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.LINE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_gradient.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_linear_single.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const LineLinearSingleConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.LINE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_linear_single.png'
 }
@@ -1,5 +1,4 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import image from '@/assets/images/chart/charts/map_amap.png'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const MapAmapConfig: ConfigType = {
@@ -11,5 +10,5 @@ export const MapAmapConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MAP,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'map_amap.png'
 }
@@ -1,5 +1,4 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import image from '@/assets/images/chart/charts/map.png'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const MapBaseConfig: ConfigType = {
@@ -11,5 +10,5 @@ export const MapBaseConfig: ConfigType = {
    categoryName: ChatCategoryEnumName.MAP,
    package: PackagesCategoryEnum.CHARTS,
    chartFrame: ChartFrameEnum.COMMON,
-    image
-  }
+    image: 'map.png'
+}
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/funnel.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const FunnelConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'funnel.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/heatmap.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const HeatmapConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'heatmap.png'
 }
@@ -1,5 +1,3 @@
-// 展示图片
-import image from '@/assets/images/chart/charts/process.png'
 // 公共类型声明
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 // 当前[信息模块]分类声明
@@ -21,5 +19,5 @@ export const ProcessConfig: ConfigType = {
  // 包分类
  package: PackagesCategoryEnum.CHARTS,
  // 图片
-  image: image
+  image: 'process.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/radar.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const RadarConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'radar.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/tree_map.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const TreeMapConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'tree_map.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/water_WaterPolo.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const WaterPoloConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'water_WaterPolo.png'
 }
@@ -11,5 +11,5 @@ export const PieCircleConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.PIE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'pie-circle.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/pie.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const PieCommonConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.PIE,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'pie.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/scatter-multi.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const ScatterCommonConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.SCATTER,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'scatter-multi.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/scatter-logarithmic-regression.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const ScatterLogarithmicRegressionConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.SCATTER,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'scatter-logarithmic-regression.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border01.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border01Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border01.png'
 }
@@ -10,5 +10,5 @@ export const Border02Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border02.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border03.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border03Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border03.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border04.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border04Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border04.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border05.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border05Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border05.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border06.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border06Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border06.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border07.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border07Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border07.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border08.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border08Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border08.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border09.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border09Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border09.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border10.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border10Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border10.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border11.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border11Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border11.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border12.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border12Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border12.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border13.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Border13Config: ConfigType = {
  category: ChatCategoryEnum.BORDER,
  categoryName: ChatCategoryEnumName.BORDER,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border13.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates01.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Decorates01Config: ConfigType = {
  category: ChatCategoryEnum.DECORATE,
  categoryName: ChatCategoryEnumName.DECORATE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates01.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates02.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Decorates02Config: ConfigType = {
  category: ChatCategoryEnum.DECORATE,
  categoryName: ChatCategoryEnumName.DECORATE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates02.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates03.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Decorates03Config: ConfigType = {
  category: ChatCategoryEnum.DECORATE,
  categoryName: ChatCategoryEnumName.DECORATE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates01.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates04.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const Decorates04Config: ConfigType = {
  category: ChatCategoryEnum.DECORATE,
  categoryName: ChatCategoryEnumName.DECORATE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates04.png'
 }
@@ -10,5 +10,5 @@ export const Decorates05Config: ConfigType = {
  category: ChatCategoryEnum.DECORATE,
  categoryName: ChatCategoryEnumName.DECORATE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates05.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates06.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const Decorates06Config: ConfigType = {
  categoryName: ChatCategoryEnumName.DECORATE,
  package: PackagesCategoryEnum.DECORATES,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'decorates06.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/clock.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const ClockConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.DECORATES,
  chartFrame: ChartFrameEnum.STATIC,
-  image
+  image: 'clock.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/countdown.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const CountDownConfig: ConfigType = {
  category: ChatCategoryEnum.MORE,
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'countdown.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/flipper-number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const FlipperNumberConfig: ConfigType = {
  category: ChatCategoryEnum.MORE,
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'flipper-number.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const NumberConfig: ConfigType = {
  category: ChatCategoryEnum.MORE,
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'number.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/time.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const TimeCommonConfig: ConfigType = {
  category: ChatCategoryEnum.MORE,
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'time.png'
 }
@@ -26,7 +26,7 @@ let yearMonthDay = ref('2021-2-3')
 let nowData = ref('08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 let boxShadow = ref('none')
-
+let timer: any = null
 const { w, h } = toRefs(props.chartConfig.attr)

 let {
@@ -60,7 +60,7 @@ watch(
  }
 )
 onMounted(() => {
-  const timer = setInterval(() => {
+  timer = setInterval(() => {
    var datetime = new Date()
    var year = datetime.getFullYear()
    var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
@@ -81,7 +81,7 @@ onMounted(() => {
  }, 500)
 })
 onUnmounted(() => {
-  clearInterval()
+  clearInterval(timer)
 })
 useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/threeEarth01.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const ThreeEarth01Config: ConfigType = {
  categoryName: ChatCategoryEnumName.THREE,
  package: PackagesCategoryEnum.DECORATES,
  chartFrame: ChartFrameEnum.STATIC,
-  image
+  image: 'threeEarth01.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/iframe.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const IframeConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.INFORMATIONS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'iframe.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/photo.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const ImageConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.INFORMATIONS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'photo.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/video.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const VideoConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.INFORMATIONS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'video.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/words_cloud.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const WordCloudConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.INFORMATIONS,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'words_cloud.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_barrage.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const TextBarrageConfig: ConfigType = {
  category: ChatCategoryEnum.TEXT,
  categoryName: ChatCategoryEnumName.TEXT,
  package: PackagesCategoryEnum.INFORMATIONS,
-  image
+  image: 'text_barrage.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_static.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

@@ -10,5 +9,5 @@ export const TextCommonConfig: ConfigType = {
  category: ChatCategoryEnum.TEXT,
  categoryName: ChatCategoryEnumName.TEXT,
  package: PackagesCategoryEnum.INFORMATIONS,
-  image
+  image: 'text_static.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_gradient.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const TextGradientConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.TEXT,
  package: PackagesCategoryEnum.INFORMATIONS,
  chartFrame: ChartFrameEnum.NAIVE_UI,
-  image
+  image: 'text_gradient.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/tables/tables_list.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const TableListConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.TABLE,
  package: PackagesCategoryEnum.TABLES,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'tables_list.png'
 }
@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/tables/table_scrollboard.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

@@ -11,5 +10,5 @@ export const TableScrollBoardConfig: ConfigType = {
  categoryName: ChatCategoryEnumName.TABLE,
  package: PackagesCategoryEnum.TABLES,
  chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'table_scrollboard.png'
 }
@@ -22,7 +22,7 @@ export type ConfigType = {
  categoryName: string
  package: string
  chartFrame?: ChartFrameEnum
-  image: string | (() => Promise<typeof import('*.png')>)
+  image: string
 }

 // 数据请求
@@ -2,15 +2,11 @@ import { ChartList } from '@/packages/components/Charts/index'
 import { DecorateList } from '@/packages/components/Decorates/index'
 import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
-import {
-  PackagesCategoryEnum,
-  PackagesType,
-  ConfigType,
-  FetchComFlagType
-} from '@/packages/index.d'
+import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'

-const configModules = import.meta.globEager("./components/**/config.vue")
-const indexModules = import.meta.globEager("./components/**/index.vue")
+const configModules = import.meta.globEager('./components/**/config.vue')
+const indexModules = import.meta.globEager('./components/**/index.vue')
+const imagesModules = import.meta.globEager('../assets/images/chart/**')

 // * 所有图表
 export let packagesList: PackagesType = {
@@ -24,7 +20,7 @@ export let packagesList: PackagesType = {
 * * 获取目标组件配置信息
 * @param targetData
 */
- export const createComponent = async (targetData: ConfigType) => {
+export const createComponent = async (targetData: ConfigType) => {
  const { category, key } = targetData
  const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
  return new chart.default()
@@ -36,10 +32,10 @@ export let packagesList: PackagesType = {
 * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
 */
 const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
-  const module = flag === FetchComFlagType.VIEW ? indexModules: configModules
+  const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
  for (const key in module) {
    const urlSplit = key.split('/')
-    if(urlSplit[urlSplit.length -2 ] === chartName) {
+    if (urlSplit[urlSplit.length - 2] === chartName) {
      return module[key]
    }
  }
@@ -49,7 +45,7 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
 * * 获取展示组件
 * @param {ConfigType} dropData 配置项
 */
- export const fetchChartComponent = (dropData: ConfigType) => {
+export const fetchChartComponent = (dropData: ConfigType) => {
  const { key } = dropData
  return fetchComponent(key, FetchComFlagType.VIEW)?.default
 }
@@ -58,7 +54,27 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
 * * 获取配置组件
 * @param {ConfigType} dropData 配置项
 */
- export const fetchConfigComponent = (dropData: ConfigType) => {
+export const fetchConfigComponent = (dropData: ConfigType) => {
  const { key } = dropData
  return fetchComponent(key, FetchComFlagType.CONFIG)?.default
-}
+}
+
+/**
+ * * 获取图片内容
+ * @param {ConfigType} targetData 配置项
+ */
+export const fetchImages = async (targetData: ConfigType) => {
+  // 新数据动态处理
+  const { image, package: targetDataPackage } = targetData
+  // 兼容旧数据
+  if (image.includes('@') || image.includes('base64')) return image
+
+  const imageName = image.substring(image.lastIndexOf('/') + 1)
+  for (const key in imagesModules) {
+    const urlSplit = key.split('/')
+    if (urlSplit[urlSplit.length - 1] === imageName) {
+      return imagesModules[key]?.default
+    }
+  }
+  return ''
+}
@@ -6,6 +6,13 @@
    "name": "碧空绿",
    "pinyin": "bikonlv"
  },
+  {
+    "CMYK": [73, 17, 20, 1],
+    "RGB": [102, 169, 201],
+    "hex": "#66a9c9",
+    "name": "涧石蓝",
+    "pinyin": "jianshilan"
+  },
  {
    "CMYK": [4, 13, 67, 0],
    "RGB": [248, 223, 114],
@@ -19,12 +26,5 @@
    "hex": "#3c7eff",
    "name": "深海蓝",
    "pinyin": "shenhailan"
-  },
-  {
-    "CMYK": [59, 12, 19, 0],
-    "RGB": [138, 188, 209],
-    "hex": "#8abcd1",
-    "name": "秋波蓝",
-    "pinyin": "qiubolan"
  }
 ]
@@ -48,6 +48,7 @@ export type EditCanvasType = {

 // 滤镜/背景色/宽高主题等
 export enum EditCanvasConfigEnum {
+  PROJECT_NAME = 'projectName',
  WIDTH = 'width',
  HEIGHT = 'height',
  CHART_THEME_COLOR = 'chartThemeColor',
@@ -78,6 +79,8 @@ export interface EditCanvasConfigType {
  [FilterEnum.SKEW_X]: number
  [FilterEnum.SKEW_Y]: number
  [FilterEnum.BLEND_MODE]: string
+  // 大屏名称
+  [EditCanvasConfigEnum.PROJECT_NAME]?: string
  // 大屏宽度
  [EditCanvasConfigEnum.WIDTH]: number
  // 大屏高度
@@ -75,6 +75,8 @@ export const useChartEditStore = defineStore({
    // -----------------------
    // 画布属性（需存储给后端）
    editCanvasConfig: {
+      // 项目名称
+      projectName: undefined,
      // 默认宽度
      width: 1920,
      // 默认高度
@@ -1,5 +1,5 @@
 export enum ChartModeEnum {
-  SINGLE= 'single',
+  SINGLE = 'single',
  DOUBLE = 'double'
 }

@@ -13,7 +13,9 @@ export enum ChartLayoutStoreEnum {
  CHARTS = 'charts',
  DETAILS = 'details',
  Chart_TYPE = 'chartType',
-  LAYER_TYPE = 'layerType'
+  LAYER_TYPE = 'layerType',
+  PERCENTAGE = 'percentage',
+  RE_POSITION_CANVAS = 'rePositionCanvas'
 }

 export interface ChartLayoutType {
@@ -27,4 +29,8 @@ export interface ChartLayoutType {
  [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum
  // 层级展示方式
  [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
+  // 当前正在加载的数量
+  [ChartLayoutStoreEnum.PERCENTAGE]: number
+  // 是否重置当前画布位置
+  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }
@@ -24,6 +24,10 @@ export const useChartLayoutStore = defineStore({
    chartType: ChartModeEnum.SINGLE,
    // 图层类型（默认图片）
    layerType: LayerModeEnum.THUMBNAIL,
+    // 当前加载数量
+    percentage: 0,
+    // 是否重置当前画布位置
+    rePositionCanvas: false,
    // 防止值不存在
    ...storageChartLayout
  }),
@@ -42,6 +46,12 @@ export const useChartLayoutStore = defineStore({
    },
    getLayerType(): LayerModeEnum {
      return this.layerType
+    },
+    getPercentage(): number {
+      return this.percentage
+    },
+    getRePositionCanvas(): boolean {
+      return this.rePositionCanvas
    }
  },
  actions: {
@@ -49,11 +59,19 @@ export const useChartLayoutStore = defineStore({
      this.$patch(state => {
        state[key] = value
      })
+      // 存储本地
      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
+      // 这里需要标记重置画布位置
+      this.rePositionCanvas = true;
      // 重新计算拖拽区域缩放比例
      setTimeout(() => {
        chartEditStore.computedScale()
      }, 500)
+    },
+    setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
+      this.$patch(state => {
+        state[key] = value
+      })
    }
  }
 })
@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 import { lang } from '@/settings/designSetting'
 import { LangStateType } from './langStore.d'
 import { LangEnum } from '@/enums/styleEnum'
-import i18n from '@/i18n/index'
 import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
@@ -25,10 +24,8 @@ export const useLangStore = defineStore({
  actions: {
    changeLang(lang: LangEnum): void {
      const settingStore = useSettingStore()
-      
      if (this.lang === lang) return
      this.lang = lang
-      i18n.global.locale = lang
      setLocalStorage(GO_LANG_STORE, this.$state)

      if (settingStore.getChangeLangReload) {
@@ -17,7 +17,7 @@
 }

@mixin deep() {
-  :deep {
+  :deep() {
    @content;
  }
 }
@@ -291,3 +291,45 @@ export const setKeyboardDressShow = (keyCode?: number) => {
  }
 }

+/**
+ * * JSON序列化，支持函数和 undefined
+ * @param data
+ */
+export const JSONStringify = (data: object) => {
+  return JSON.stringify(
+    data,
+    (key, val) => {
+      // 处理函数丢失问题
+      if (typeof val === 'function') {
+        return `${val}`
+      }
+      // 处理 undefined 丢失问题
+      if (typeof val === 'undefined') {
+        return 'undefined'
+      }
+      return val
+    },
+    2
+  )
+}
+
+/**
+ * * JSON反序列化，支持函数和 undefined
+ * @param data
+ */
+export const JSONParse = (data: string) => {
+  return JSON.parse(data, (k, v) => {
+    if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) {
+      return eval(`(function(){return ${v}})()`)
+    }
+    return v
+  })
+}
+
+/**
+ * * 修改顶部标题
+ * @param title
+ */
+export const setTitle = (title?: string) => {
+  title && (document.title = title)
+}
@@ -22,7 +22,7 @@
          </n-text>
        </div>
        <div class="list-center go-flex-center go-transition">
-          <img class="list-img" v-lazy="item.image" alt="图表图片" />
+          <charts-item-image class="list-img" :chartConfig="item"></charts-item-image>
        </div>
        <div class="list-bottom">
          <n-text class="list-bottom-text" depth="3">
@@ -37,16 +37,18 @@
 <script setup lang="ts">
 import { PropType, watch, ref, Ref, computed, nextTick } from 'vue'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
+import { ChartsItemImage } from '../ChartsItemImage'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
+import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import omit from 'lodash/omit'
+
 const chartEditStore = useChartEditStore()

 defineProps({
@@ -70,7 +72,7 @@ const dragStartHandle = (e: DragEvent, item: ConfigType) => {
  componentInstall(item.chartKey, fetchChartComponent(item))
  componentInstall(item.conKey, fetchConfigComponent(item))
  // 将配置项绑定到拖拽属性上
-  e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSON.stringify(omit(item, ['image'])))
+  e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])))
  // 修改状态
  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
 }
@@ -0,0 +1,3 @@
+import ChartsItemImage from './index.vue'
+
+export { ChartsItemImage }
@@ -0,0 +1,24 @@
+<template>
+  <img class="list-img" v-lazy="imageInfo" alt="图表图片" />
+</template>
+
+<script setup lang="ts">
+import { ref, PropType } from 'vue'
+import { fetchImages } from '@/packages'
+import { ConfigType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<ConfigType>,
+    required: true
+  },
+})
+
+const imageInfo = ref('')
+
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.chartConfig)
+}
+fetchImageUrl()
+</script>
@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-pond-control" v-model:show="modelShow" :mask-closable="false">
+  <n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">
    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
      <template #header></template>
      <template #header-extra> </template>
@@ -37,7 +37,6 @@

  <!-- 请求配置model -->
  <pond-data-request
-    v-if="requestShow"
    v-model:modelShow="requestShow"
    :targetDataRequest="editData"
    :isEdit="isEdit"
@@ -59,7 +58,7 @@ import { icon } from '@/plugins'
 import { getUUID, goDialog } from '@/utils'
 import { cloneDeep } from 'lodash'

-defineProps({
+const props = defineProps({
  modelShow: Boolean
 })

@@ -68,6 +67,7 @@ const { PencilIcon } = icon.ionicons5
 const { chartEditStore, targetData } = useTargetData()
 const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)
 const requestShow = ref(false)
+const modelShowRef = ref(false)
 const loading = ref(false)
 const isEdit = ref(false)
 const editData = ref<RequestDataPondItemType>()
@@ -82,6 +82,10 @@ const pondData = computed(() => {
  return data[0]
 })

+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+
 watch(
  () => pondData.value,
  newValue => {
@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" :closeOnEsc="false">
+  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
      <template #header></template>
      <template #header-extra> </template>
@@ -29,7 +29,7 @@
 </template>

 <script script lang="ts" setup>
-import { toRefs, PropType } from 'vue'
+import { ref, toRefs, PropType, watch } from 'vue'
 import { RequestContentTypeEnum } from '@/enums/httpEnum'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
@@ -46,11 +46,22 @@ const emit = defineEmits(['update:modelShow', 'sendHandle'])
 // 解构基础配置
 const { chartConfig } = toRefs(props.targetData as CreateComponentType)
 const { requestContentType } = toRefs((props.targetData as CreateComponentType).request)
+const modelShowRef = ref(false)
 const requestContentTypeObj = {
  [RequestContentTypeEnum.DEFAULT]: '普通请求',
  [RequestContentTypeEnum.SQL]: 'SQL 请求'
 }

+watch(
+  () => props.modelShow,
+  newValue => {
+    modelShowRef.value = newValue
+  },
+  {
+    immediate: true
+  }
+)
+
 const closeHandle = () => {
  emit('update:modelShow', false)
 }
@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" :closeOnEsc="false">
+  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
      <template #header></template>
      <template #header-extra> </template>
@@ -42,7 +42,7 @@
 </template>

 <script script lang="ts" setup>
-import { PropType, ref, watchEffect } from 'vue'
+import { PropType, ref, watch } from 'vue'
 import { RequestContentTypeEnum } from '@/enums/httpEnum'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
@@ -58,6 +58,12 @@ const emit = defineEmits(['update:modelShow', 'editSaveHandle'])

 const pondName = ref()
 const inputInstRef = ref()
+const modelShowRef = ref(false)
+
+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+

 const closeHandle = () => {
  emit('update:modelShow', false)
@@ -1,7 +1,7 @@
 import { ref, toRef, nextTick } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { readFile, downloadTextFile } from '@/utils'
+import { readFile, downloadTextFile, JSONStringify, JSONParse } from '@/utils'

 export const useFile = (targetData: any) => {
  const uploadFileListRef = ref()
@@ -23,7 +23,7 @@ export const useFile = (targetData: any) => {
    nextTick(() => {
      if (file.file) {
        readFile(file.file).then((fileData: any) => {
-          targetData.value.option.dataset = JSON.parse(fileData)
+          targetData.value.option.dataset = JSONParse(fileData)
        })
      } else {
        window['$message'].error('导入数据失败，请稍后重试或联系管理员！')
@@ -35,7 +35,7 @@ export const useFile = (targetData: any) => {
  const download = () => {
    try {
      window['$message'].success('下载中，请耐心等待...')
-      downloadTextFile(JSON.stringify(targetData.value.option.dataset), undefined, 'json')
+      downloadTextFile(JSONStringify(targetData.value.option.dataset), undefined, 'json')
    } catch (error) {
      window['$message'].error('下载失败，数据错误！')
    }
@@ -35,8 +35,12 @@ import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from '
 import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import throttle from 'lodash/throttle'

 const chartEditStore = useChartEditStore()
+const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()

 const thick = 20
@@ -84,6 +88,7 @@ const themeColor = computed(() => {
  return designStore.getAppTheme
 })

+// 处理鼠标拖动
 const handleWheel = (e: any) => {
  if (e.ctrlKey || e.metaKey) {
    e.preventDefault()
@@ -102,6 +107,7 @@ const handleWheel = (e: any) => {
  }
 }

+// 滚动条处理
 const handleScroll = () => {
  if (!$app.value) return
  const screensRect = $app.value.getBoundingClientRect()
@@ -111,6 +117,7 @@ const handleScroll = () => {
  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
 }

+// 拖拽处理
 const dragCanvas = (e: any) => {
  e.preventDefault()
  e.stopPropagation()
@@ -148,6 +155,7 @@ const dragCanvas = (e: any) => {
  })
 }

+// 计算画布大小
 const canvasBox = () => {
  const layoutDom = document.getElementById('go-chart-edit-layout')
  if (layoutDom) {
@@ -162,7 +170,7 @@ const canvasBox = () => {
  }
 }

-// 在位置不动的情况下重绘标尺
+// 重绘标尺
 const reDraw = () => {
  sketchRuleReDraw.value = false
  setTimeout(() => {
@@ -170,13 +178,6 @@ const reDraw = () => {
  }, 10)
 }

-watch(
-  () => designStore.getDarkTheme,
-  () => {
-    reDraw()
-  }
-)
-
 // 滚动居中
 const canvasPosCenter = () => {
  const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
@@ -186,20 +187,32 @@ const canvasPosCenter = () => {
  $app.value.scrollTop = containerHeight / 2 - height / 2
 }

-// 处理标尺重制大小
+// 处理主题变化
+watch(
+  () => designStore.getDarkTheme,
+  () => {
+    reDraw()
+  }
+)
+
+// // 处理标尺重制大小
 watch(
  () => scale.value,
  (newValue, oldValue) => {
-    if (oldValue !== newValue) {
+    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
+      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
      handleScroll()
-      chartEditStore.setScale(newValue)
      setTimeout(() => {
        canvasPosCenter()
-      }, 500)
+        reDraw()
+      }, 400)
+    } else {
+      throttle(reDraw, 20)
    }
  }
 )

+// 处理鼠标样式
 watch(
  () => isPressSpace.value,
  newValue => {
@@ -93,7 +93,7 @@ watch(
    position: absolute;
    width: 100%;
    height: 100%;
-    border-radius: 10px;
+    border-radius: 5px;
    overflow: hidden;
  }
  .select-border {
@@ -107,7 +107,7 @@ watch(
  .select-background {
    top: 2px;
    left: 2px;
-    opacity: 0.03;
+    opacity: 0.2;
    background-color: v-bind('themeColor');
  }
 }
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" :mask-closable="true" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" :mask-closable="true" @afterLeave="closeHandle">
    <n-table class="model-content" :bordered="false" :single-line="false">
      <thead>
        <tr>
@@ -19,7 +19,8 @@
        <tr v-for="(item, index) in shortcutKeyOptions" :key="index">
          <td>{{ item.label }}</td>
          <td>{{ item.win }}</td>
-          <td>
+          <td v-if="item.macSource">{{ item.mac }}</td>
+          <td v-else>
            <n-gradient-text :size="22">{{ item.mac.substr(0, 1) }}</n-gradient-text>
            + {{ item.mac.substr(3) }}
          </td>
@@ -30,39 +31,37 @@
 </template>

 <script setup lang="ts">
+import { watch, ref } from 'vue'
 import { icon } from '@/plugins'
 import { WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'

 const { CloseIcon } = icon.ionicons5
+const modelShowRef = ref(false)

 const emit = defineEmits(['update:modelShow'])

-defineProps({
+const props = defineProps({
  modelShow: Boolean
 })

+
+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+
 // 快捷键
 const shortcutKeyOptions = [
  {
-    label: '向上移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ `,
+    label: '拖拽画布',
+    win: `${WinKeyboard.SPACE.toUpperCase()} + 🖱️ `,
+    mac: `${MacKeyboard.SPACE.toUpperCase()} + 🖱️ `,
+    macSource: true
+  },
+  {
+    label: '向 上/右/下/左 移动',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ 或 → 或 ↓ 或 ←`,
    mac: `${MacKeyboard.CTRL.toUpperCase()} + ↑ `
  },
-  {
-    label: '向右移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + → `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + → `
-  },
-  {
-    label: '向下移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ↓ `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ↓ `
-  },
-  {
-    label: '向左移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ← `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ← `
-  },
  {
    label: '锁定',
    win: `${WinKeyboard.CTRL.toUpperCase()} + L `,
@@ -129,6 +128,7 @@ const shortcutKeyOptions = [
    mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `
  }
 ]
+
 const closeHandle = () => {
  emit('update:modelShow', false)
 }
@@ -1,7 +1,7 @@
 import { ref, nextTick } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { readFile, goDialog } from '@/utils'
+import { readFile, goDialog, JSONParse } from '@/utils'
 import { useSync } from '@/views/chart/hooks/useSync.hook'

 export const useFile = () => {
@@ -34,7 +34,7 @@ export const useFile = () => {
            // 新增
            onPositiveCallback: async () => {
              try {
-                fileData = JSON.parse(fileData)
+                fileData = JSONParse(fileData)
                await updateComponent(fileData, false, true)
                window['$message'].success('导入成功！')
              } catch (error) {
@@ -45,7 +45,7 @@ export const useFile = () => {
            // 覆盖
            onNegativeCallback: async () => {
              try {
-                fileData = JSON.parse(fileData)
+                fileData = JSONParse(fileData)
                await updateComponent(fileData, true, true)
                window['$message'].success('导入成功！')
              } catch (error) {
@@ -1,5 +1,5 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { canvasCut, downloadTextFile } from '@/utils'
+import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
 const chartEditStore = useChartEditStore()

 // 导出
@@ -9,9 +9,7 @@ export const exportHandle = () => {

  // 导出数据
  downloadTextFile(
-    JSON.stringify(chartEditStore.getStorageInfo || [], (k, v) => {
-      return v === undefined ? null : v
-    }),
+    JSONStringify(chartEditStore.getStorageInfo || []),
    undefined,
    'json'
  )
@@ -6,7 +6,7 @@ import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { loadingStart, loadingFinish, loadingError, setComponentPosition } from '@/utils'
+import { loadingStart, loadingFinish, loadingError, setComponentPosition, JSONParse } from '@/utils'
 import { throttle, cloneDeep } from 'lodash'

 const chartEditStore = useChartEditStore()
@@ -28,7 +28,7 @@ export const dragHandle = async (e: DragEvent) => {

    // 修改状态
    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
-    const dropData: Exclude<ConfigType, ['image']> = JSON.parse(drayDataString)
+    const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)

    // 创建新图表组件
    let newComponent: CreateComponentType = await createComponent(dropData)
@@ -152,7 +152,7 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C
        }
      }
    })
-  }, 20)
+  }, 30)

  // 鼠标抬起
  const mouseup = () => {
@@ -30,9 +30,13 @@

 <script setup lang="ts">
 import { ref, nextTick, computed } from 'vue'
-import { fetchRouteParamsLocation } from '@/utils'
+import { fetchRouteParamsLocation, setTitle } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { icon } from '@/plugins'
+
 const { FishIcon } = icon.ionicons5
+const chartEditStore = useChartEditStore()

 const focus = ref<boolean>(false)
 const inputInstRef = ref(null)
@@ -51,7 +55,10 @@ const title = ref<string>(fetchProhectInfoById() || '')
 const comTitle = computed(() => {
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  title.value = title.value.replace(/\s/g, '')
-  return title.value.length ? title.value : '新项目'
+  const newTitle = title.value.length ? title.value : '新项目'
+  setTitle(`工作空间-${newTitle}`)
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, newTitle)
+  return newTitle
 })

 const handleFocus = () => {
@@ -5,7 +5,7 @@
        class="list-img"
        object-fit="contain"
        preview-disabled
-        :src="image"
+        :src="imageInfo"
        :fallback-src="requireErrorImg()"
      ></n-image>
      <n-ellipsis style="margin-right: auto">
@@ -20,16 +20,18 @@
 </template>

 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, PropType, ref, watch } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { fetchImages } from '@/packages'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { LayersStatus } from '../LayersStatus/index'

 const props = defineProps({
  componentData: {
-    type: Object,
+    type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
    required: true
  },
  isGroup: {
@@ -45,9 +47,13 @@ const props = defineProps({
 // 全局颜色
 const designStore = useDesignStore()
 const chartEditStore = useChartEditStore()
+const imageInfo = ref('')

-// eslint-disable-next-line vue/no-setup-props-destructure
-const { image } = props.componentData.chartConfig
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.componentData.chartConfig)
+}
+fetchImageUrl()

 // 颜色
 const themeColor = computed(() => {
@@ -0,0 +1,3 @@
+import ContentLoad from './index.vue'
+
+export { ContentLoad }
@@ -0,0 +1,40 @@
+<template>
+  <n-modal :show="showModal" :close-on-esc="false" transform-origin="center">
+    <div>
+      <span> 拼命加载中... </span>
+      <n-progress type="line" :color="themeColor" :percentage="percentage" style="width: 300px" />
+    </div>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const chartLayoutStore = useChartLayoutStore()
+const designStore = useDesignStore()
+const showModal = ref(false)
+const percentage = ref(0)
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 监听百分比
+watch(
+  () => chartLayoutStore.getPercentage,
+  newValue => {
+    if (newValue === 0) {
+      setTimeout(() => {
+        percentage.value = newValue
+        showModal.value = false
+      }, 500);
+      return
+    }
+    percentage.value = newValue
+    showModal.value = newValue > 0
+  }
+)
+</script>
@@ -2,6 +2,8 @@ import { getUUID } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
 import { BaseEvent, EventLife, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
@@ -85,7 +87,7 @@ const componentMerge = (newObject: any, sources: any, notComponent = false) => {
 export const useSync = () => {
  const chartEditStore = useChartEditStore()
  const chartHistoryStore = useChartHistoryStore()
-
+  const chartLayoutStore = useChartLayoutStore()
  /**
   * * 组件动态注册
   * @param projectData 项目数据
@@ -151,7 +153,13 @@ export const useSync = () => {
    for (const key in projectData) {
      // 组件
      if (key === ChartEditStoreEnum.COMPONENT_LIST) {
+        let loadIndex = 0
+        const listLength = projectData[key].length;
        for (const comItem of projectData[key]) {
+          // 设置加载数量
+          let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+          chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
+          // 判断类型
          if (comItem.isGroup) {
            // 创建分组
            let groupClass = new PublicGroupConfigClass()
@@ -182,6 +190,9 @@ export const useSync = () => {
        componentMerge(chartEditStore[key], projectData[key], true)
      }
    }
+
+    // 清除数量
+    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
  }

  return {
@@ -32,6 +32,8 @@
    :on-clickoutside="onClickOutSide"
    @select="handleMenuSelect"
  ></n-dropdown>
+  <!-- 加载蒙层 -->
+  <content-load></content-load>
 </template>

 <script setup lang="ts">
@@ -53,6 +55,7 @@ const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle
 const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
 const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
 const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
+const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))

 // 右键
 const {
@@ -38,7 +38,7 @@ import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { SavePageEnum } from '@/enums/editPageEnum'
 import { getSessionStorageInfo } from '../preview/utils'
 import type { ChartEditStorageType } from '../preview/index.d'
-import { setSessionStorage } from '@/utils'
+import { setSessionStorage, JSONStringify, JSONParse, setTitle } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'

@@ -48,7 +48,8 @@ const content = ref('')
 // 从sessionStorage 获取数据
 async function getDataBySession() {
  const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
-  content.value = JSON.stringify(localStorageInfo, undefined, 2)
+  setTitle(`编辑-${localStorageInfo.editCanvasConfig.projectName}`)
+  content.value = JSONStringify(localStorageInfo)
 }
 setTimeout(getDataBySession)

@@ -72,7 +73,7 @@ async function importJSON() {
 // 同步 [画布页失去焦点时同步数据到JSON页，JSON页Ctrl+S 时同步数据到画布页]
 window.opener.addEventListener(SavePageEnum.CHART, (e: any) => {
  setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [e.detail])
-  content.value = JSON.stringify(e.detail, undefined, 2)
+  content.value = JSONStringify(e.detail)
 })

 // 窗口失焦 + 保存 => 同步数据
@@ -90,7 +91,7 @@ async function updateSync() {
    return window['$message'].error('源窗口已关闭，视图同步失败')
  }
  try {
-    const detail = JSON.parse(content.value)
+    const detail = JSONParse(content.value)
    delete detail.id
    // 保持id不变
    window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
@@ -2,7 +2,7 @@
  <div
    class="chart-item"
    v-for="(item, index) in localStorageInfo.componentList"
-    :class="animationsClass(item.styles.animations)"
+    :class="[animationsClass(item.styles.animations), !item.isGroup && 'hidden']"
    :key="item.id"
    :style="{
      ...getComponentAttrStyle(item.attr, index),
@@ -78,6 +78,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 .chart-item {
  position: absolute;
-  overflow: hidden;
+  &.hidden {
+    overflow: hidden;
+  }
 }
 </style>
@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
-import { getFilterStyle } from '@/utils'
+import { getFilterStyle, setTitle } from '@/utils'
 import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
@@ -38,6 +38,7 @@ import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type { ChartEditStorageType } from './index.d'

 const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`)

 const previewRefStyle = computed(() => {
  return {
@@ -89,6 +89,7 @@ import { renderIcon, renderLang,  requireErrorImg } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
 import { Chartype } from '../../index.d'
+import { log } from 'console'
 const {
  EllipsisHorizontalCircleSharpIcon,
  CopyIcon,
@@ -1,7 +1,8 @@
-import { ref, Ref } from 'vue'
+import { ref } from 'vue'
 import { ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath } from '@/utils'
-import { Chartype } from '../../..'
+import { Chartype } from '../../../index.d'
+
 export const useModalDataInit = () => {
  const modalShow = ref<boolean>(false)
  const modalData = ref<Chartype | null>(null)
@@ -25,7 +25,7 @@
  </div>
  <project-items-modal-card
    v-if="modalData"
-    v-model:modalShow="modalShow"
+    :modalShow="modalShow"
    :cardData="modalData"
    @close="closeModal"
    @edit="editHandle"
@@ -41,8 +41,7 @@ import { useDataListInit } from './hooks/useData.hook'

 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
 const { list, deleteHandle } = useDataListInit()
-const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
-  useModalDataInit()
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()
 </script>

 <style lang="scss" scoped>
@@ -2,7 +2,7 @@
  <!-- mask-closable 暂时是失效的，不知道为啥 -->
  <n-modal
    class="go-modal-box"
-    v-model:show="modalShow"
+    v-model:show="showRef"
    @afterLeave="closeHandle"
  >
    <n-card hoverable size="small">
@@ -75,20 +75,36 @@
 </template>

 <script setup lang="ts">
-import { reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { renderIcon, renderLang } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'

 const { HammerIcon } = icon.ionicons5
-
+const showRef = ref(false)
 const emit = defineEmits(['close', 'edit'])

 const props = defineProps({
-  modalShow: Boolean,
-  cardData: Object
+  modalShow: {
+    required: true,
+    type: Boolean
+  },
+  cardData: {
+    required: true,
+    type: Object
+  }
 })

+watch(
+  () => props.modalShow,
+  newValue => {
+    showRef.value = newValue
+  },
+  {
+    immediate: true
+  }
+)
+
 // 处理url获取
 const requireUrl = (name: string) => {
  return new URL(`../../../../../assets/images/${name}`, import.meta.url).href
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="show" class="go-create-modal">
+  <n-modal v-model:show="showRef" class="go-create-modal" @afterLeave="closeHandle">
    <n-space size="large">
      <n-card class="card-box" hoverable>
        <template #header>
@@ -35,20 +35,21 @@
 </template>

 <script lang="ts" setup>
-import { watch, reactive } from 'vue'
+import { ref, watch, shallowRef } from 'vue'
 import { icon } from '@/plugins'
 import { PageEnum, ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath, renderLang, getUUID } from '@/utils'

 const { FishIcon, CloseIcon } = icon.ionicons5
 const { StoreIcon, ObjectStorageIcon } = icon.carbon
-const $t = window['$t']
+const showRef = ref(false)
+
 const emit = defineEmits(['close'])
 const props = defineProps({
  show: Boolean
 })

-const typeList = reactive([
+const typeList = shallowRef([
  {
    title: renderLang('project.new_project'),
    key: ChartEnum.CHART_HOME_NAME,
@@ -69,11 +70,8 @@ const typeList = reactive([
  }
 ])

-// 解决点击模态层不会触发 @on-after-leave 的问题
 watch(props, newValue => {
-  if (!newValue.show) {
-    closeHandle()
-  }
+  showRef.value = newValue.show
 })

 // 关闭对话框
@@ -92,7 +90,7 @@ const btnHandle = (key: string) => {
 <style lang="scss" scoped>
 $cardWidth: 570px;

-@include go("create-modal") {
+@include go('create-modal') {
  position: fixed;
  top: 200px;
  left: 50%;
@@ -103,7 +101,7 @@ $cardWidth: 570px;
    border: 1px solid rgba(0, 0, 0, 0);
    @extend .go-transition;
    &:hover {
-      @include hover-border-color("hover-border-color");
+      @include hover-border-color('hover-border-color');
    }
    &-tite {
      font-size: 14px;