Merge branch 'ww' into 'main'

perf: 重构新增功能代码

See merge request yunteng/thingskit-view!7

+<template>
+  <svg :class="[prefixCls, $attrs.class, spin && 'svg-icon-spin']" :style="getStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+<script lang="ts" setup>import { useDesign } from '@/hooks/external/useDesign';
+import { computed, CSSProperties } from 'vue';
+
+
+const props = withDefaults(
+  defineProps<{
+    prefix?: string
+    name: string
+    size?: number | string,
+    spin?: boolean
+  }>(),
+  {
+    prefix: 'icon',
+    size: 16,
+    spin: false
+  }
+)
+
+const { prefixCls } = useDesign('svg-icon');
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+
+const getStyle = computed((): CSSProperties => {
+  const { size } = props;
+  let s = `${size}`;
+  s = `${s.replace('px', '')}px`;
+  return {
+    width: s,
+    height: s,
+  };
+});
+</script> 
+<style lang="less" scoped>
+@prefix-cls: ~'@{tkNamespace}-svg-icon';
+
+.@{prefix-cls} {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: -0.15em;
+  fill: currentColor;
+}
+
+.svg-icon-spin {
+  animation: loadingCircle 1s infinite linear;
+}
+</style>

@@ -82,16 +82,3 @@ export enum MacKeyboard {
   ALT_SOURCE_KEY = '⌥',
   SPACE = 'Space'
 }
-
-
-// 同步状态枚举
-export enum SyncEnum {
-  // 等待
-  PENDING,
-  // 开始
-  START,
-  // 成功
-  SUCCESS,
-  // 失败
-  FAILURE
-}

+// 同步状态枚举
+export enum SyncEnum {
+  // 等待
+  PENDING,
+  // 开始
+  START,
+  // 成功
+  SUCCESS,
+  // 失败
+  FAILURE
+}

+export function useDesign(scope: string) {
+  const values = 'things-kit'
+  return {
+    prefixCls: `${values}-${scope}`,
+    prefixVar: values,
+  };
+}

 import { ChartFrameEnum } from '@/packages/index.d'
 import { ConfigType } from '@/packages/index.d'
-import { PackagesCategoryEnum } from '@/packages/components/external/types'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LeftCenterRightHeadConfig: ConfigType = {
@@ -10,7 +10,7 @@ export const LeftCenterRightHeadConfig: ConfigType = {
     title: '通用头部',
     category: ChatCategoryEnum.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
-    package: PackagesCategoryEnum.COMPOSES,
+    package: EPackagesCategoryEnum.COMPOSES,
     chartFrame: ChartFrameEnum.COMMON,
     image: 'left_center_rightHead.png',
 }

 import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
-import { PackagesCategoryEnum } from '@/packages/components/external/types'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LeftCenterRightHeadCommonConfig: ConfigType = {
@@ -9,7 +9,7 @@ export const LeftCenterRightHeadCommonConfig: ConfigType = {
     title: '头部',
     category: ChatCategoryEnum.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
-    package: PackagesCategoryEnum.COMPOSES,
+    package: EPackagesCategoryEnum.COMPOSES,
     chartFrame: ChartFrameEnum.COMMON,
     image: 'left_center_rightHead.png',
 }

+<template>
+  <section :class="prefixCls">
+    <slot />
+    <div class="point top-left"></div>
+    <div class="point top-right"></div>
+    <div class="point bottom-left"></div>
+    <div class="point bottom-right"></div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { useDesign } from '@/hooks/external/useDesign';
+
+const props = defineProps<{
+  border: string
+}>()
+
+const { prefixCls } = useDesign('svg-border')
+</script>
+
+<style lang="scss" scoped>
+@include thingsKit('svg-border') {
+  $pointSize: 5px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid black;
+  margin: 5px;
+
+  .round {
+    border-radius: 50%;
+  }
+
+  .point {
+    position: absolute;
+    width: $pointSize;
+    height: $pointSize;
+    border-radius: 50%;
+    background-color: black;
+  }
+
+  .top-left {
+    top: 0;
+    left: 0;
+    transform: translate(-2.5px, -2.5px);
+  }
+
+  .top-right {
+    top: 0;
+    right: 0;
+    transform: translate(2.5px, -2.5px);
+  }
+
+  .bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: translate(-2.5px, 2.5px);
+  }
+
+  .bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: translate(-2.5px, -2.5px);
+  }
+
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ClockConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  border: 6,
+  color: '#ffffff',
+  bgColor: '#84a5e9',
+  borderColor: '#ffffff'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ClockConfig.key
+  public chartConfig = cloneDeep(ClockConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="时钟" expanded>
+    <SettingItemBox name="表盘">
+      <SettingItem name="背景色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.bgColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框大小">
+        <n-input-number v-model:value="optionData.border" size="small" :step="0.5" :min="0"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="指针">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Decorates/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('Icon', true)
+
+export const ClockConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '时钟2',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'clock.png'
+}

+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :viewBox="`0 0 200 200`">
+    <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
+      <feOffset in="blur" dx="2.5" dy="2.5" />
+    </filter>
+
+    <!-- 表盘 -->
+    <g>
+      <circle id="shadow" style="fill: rgba(0, 0, 0, 0.1)" cx="100" cy="100" r="87" filter="url(#innerShadow)"></circle>
+      <circle id="circle" class="clock-border" cx="100" cy="100" r="80"></circle>
+    </g>
+
+    <!-- 指针 -->
+    <g>
+      <line x1="100" y1="100" x2="100" y2="55" style="stroke-width: 3px" class="clock-line">
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          dur="43200s"
+          repeatCount="indefinite"
+          :from="`${hoursAngle} 100 100`"
+          :to="`${hoursAngle + 360} 100 100`"
+        />
+      </line>
+      <line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px" class="clock-line">
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          dur="3600s"
+          repeatCount="indefinite"
+          :from="`${minuteAngle} 100 100`"
+          :to="`${minuteAngle + 360} 100 100`"
+        />
+      </line>
+      <line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px" class="clock-line">
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          dur="60s"
+          repeatCount="indefinite"
+          :from="`${secAngle} 100 100`"
+          :to="`${secAngle + 360} 100 100`"
+        />
+      </line>
+    </g>
+
+    <!-- 中心圆点 -->
+    <circle id="center" style="fill: #128a86; stroke: #c1efed; stroke-width: 2px" cx="100" cy="100" r="3"></circle>
+
+    <!-- 刻度线 -->
+    <line
+      x1="100"
+      y1="30"
+      x2="100"
+      y2="40"
+      class="clock-line"
+      :transform="`rotate(${((num + 1) * 360) / 12} 100 100)`"
+      v-for="num in 12"
+      :key="`line_${num + 1}`"
+    ></line>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+import { useProjectInfoStore } from '@/store/external/module/projectInfo';
+
+const projectInfoStore = useProjectInfoStore()
+ 
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+let { border, color, bgColor, borderColor } = toRefs(props.chartConfig.option)
+
+const date = new Date()
+const hoursAngle = (360 * date.getHours()) / 12 + date.getMinutes() / 2
+const minuteAngle = (360 * date.getMinutes()) / 60
+const secAngle = (360 * date.getSeconds()) / 60
+</script>
+
+<style lang="scss" scoped>
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.clock-border {
+  stroke: v-bind('borderColor');
+  stroke-width: v-bind('border+"px"');
+  fill: v-bind('bgColor');
+}
+.clock-line {
+  stroke: v-bind('color') !important;
+}
+</style>

+import { PackagesType as NativePackagesType } from '@/packages/index.d'
 import { ConfigType } from "@/packages/index.d"
 
 // 包分类枚举
-export enum PackagesCategoryEnum {
+export enum EPackagesCategoryEnum {
   COMPOSES = 'external/Composes',
 }
 
 // 图表包类型
-export type PackagesType = {
-  [PackagesCategoryEnum.COMPOSES]: ConfigType[]
-}
+export type EPackagesType = {
+  [EPackagesCategoryEnum.COMPOSES]: ConfigType[]
+} & NativePackagesType
 
 // 包分类名称
-export enum PackagesCategoryName {
+export enum EPackagesCategoryName {
   COMPOSES = '组合',
 }
+

-import { PackagesCategoryEnum, PackagesType } from '@/packages/components/external/types'
+import { EPackagesCategoryEnum, EPackagesType } from '@/packages/components/external/types'
 import { ComposesList } from '@/packages/components/external/Composes'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
 
-export function useInjectLib(packagesList: any) {
+export function useInjectLib(packagesList: EPackagesType) {
+  packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
 
-  // console.log(ComposesList)
-  packagesList[PackagesCategoryEnum.COMPOSES] = ComposesList
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
+}
+
+/**
+ * 
+ * @param packagesList 
+ * @param categoryName 
+ * @param config 
+ */
+function addWidgetToCategoryByCategoryName(packagesList: EPackagesType, categoryName: PackagesCategoryEnum, config: ConfigType) {
+  packagesList[categoryName].push(config)
 }

+
+import { ConfigType } from "../index.d"
+import { matchExternalPrefixReg } from "./useWidgetKey"
+
+
+export const createComponent = async (configType: ConfigType) => {
+  const { key, chartKey, category, package: packageName } = configType
+  const hasExternalPrefix = matchExternalPrefixReg.test(chartKey)
+  const chart = await import(`../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts`)
+  return new chart.default()
+}
+

+export const EXTERNAL_WIDGET_PREFIX = 'External'
+
+export const matchExternalPrefixReg = new RegExp(`^${EXTERNAL_WIDGET_PREFIX}`)
+
+export const CHART_COMPONENT_PREFIX = 'VC'
+
+export const CONFIG_COMPONENT_PREFIX = 'VCC'
+
+/**
+ * 
+ * @param scope directory name 目录名
+ * @returns 
+ */
+export const useWidgetKey = (scope: string, extendPrimitiveCategory = false) => {
+  const prefix = extendPrimitiveCategory ? EXTERNAL_WIDGET_PREFIX : ''
+  return {
+    key: scope,
+    chartKey: `${prefix}${CHART_COMPONENT_PREFIX}${scope}`,
+    conKey: `${prefix}${CONFIG_COMPONENT_PREFIX}${scope}`
+  }
+}

+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { SyncEnum } from '@/enums/external/editPageEnum'
+
+export enum ProjectInfoEnum {
+  INFO = 'info',
+  // ID
+  PROJECT_ID = 'projectId',
+  // 名称
+  PROJECT_NAME = 'projectName',
+  // 描述
+  REMARKS = 'remarks',
+  // 缩略图
+  THUMBNAIL = 'thumbnail',
+  // 是否公开发布
+  RELEASE = 'release',
+  // 组织id
+  ORGANIZATION_ID = 'organizationId',
+  //保存给服务端的state
+  STATE_DATA = 'state',
+
+  SAVE_STATUS = 'saveStatus'
+}
+
+export enum EEditCanvasTypeEnum {
+  SAVE_STATUS = 'saveStatus',
+}
+
+
+// Store 类型
+export interface ProjectInfoStoreType {
+  [ProjectInfoEnum.INFO]: {
+    [ProjectInfoEnum.PROJECT_ID]: string
+    [ProjectInfoEnum.PROJECT_NAME]: string
+    [ProjectInfoEnum.REMARKS]: string
+    [ProjectInfoEnum.THUMBNAIL]: string
+    [ProjectInfoEnum.RELEASE]: boolean
+    [ProjectInfoEnum.RELEASE]: boolean
+    [ProjectInfoEnum.ORGANIZATION_ID]: string
+    [ProjectInfoEnum.STATE_DATA]: number
+  }
+
+  [ProjectInfoEnum.SAVE_STATUS]: SyncEnum
+}

+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { ProjectInfoEnum, ProjectInfoStoreType } from './projectInfo.d'
+import { defineStore } from "pinia";
+import { SyncEnum } from "@/enums/external/editPageEnum";
+
+export const useProjectInfoStore = defineStore({
+  id: 'useProjectInfoStore',
+  state: (): ProjectInfoStoreType => ({
+    info: {
+      projectId: '',
+      projectName: '',
+      remarks: '',
+      thumbnail: '',
+      release: false,
+      organizationId: '',
+      state: 0,
+    },
+
+    saveStatus: SyncEnum.FAILURE
+  }),
+  getters: {
+    getProjectInfo(): ProjectInfoStoreType[ProjectInfoEnum.INFO] {
+      return Reflect.get(this, ProjectInfoEnum.INFO)
+    },
+    getSaveStatus(): ProjectInfoStoreType[ProjectInfoEnum.SAVE_STATUS] {
+      return Reflect.get(this, ProjectInfoEnum.SAVE_STATUS)
+    }
+  },
+  actions: {
+    setProjectInfo<T extends ProjectInfoStoreType[ProjectInfoEnum.INFO]>(value: T) {
+      this[ProjectInfoEnum.INFO] = value
+    },
+    setProjectInfoByKey<T extends keyof ProjectInfoStoreType[ProjectInfoEnum.INFO], K extends ProjectInfoStoreType[ProjectInfoEnum.INFO][T]>(key: T, value: K) {
+      this[ProjectInfoEnum.INFO][key] = value
+    },
+    setSaveStatus(status: SyncEnum) {
+      this[ProjectInfoEnum.SAVE_STATUS] = status
+    }
+  }
+})

 import { CreateComponentType, CreateComponentGroupType, FilterEnum } from '@/packages/index.d'
 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-import { SyncEnum } from '@/enums/editPageEnum'
 import {
   RequestHttpEnum,
   RequestContentTypeEnum,
@@ -13,37 +12,6 @@ import {
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
-// THINGS_KIT
-// 项目数据枚举
-export enum ProjectInfoEnum {
-  // ID
-  PROJECT_ID = 'projectId',
-  // 名称
-  PROJECT_NAME = 'projectName',
-  // 描述
-  REMARKS = 'remarks',
-  // 缩略图
-  THUMBNAIL = 'thumbnail',
-  // 是否公开发布
-  RELEASE = 'release',
-  // organizationId
-  ORGANIZATIONID = 'organizationId',
-  //保存给服务端的state
-  STATE_DATA = 'state',
-}
-// THINGS_KIT
-// 项目数据
-export type ProjectInfoType = {
-  [ProjectInfoEnum.PROJECT_ID]: string
-  [ProjectInfoEnum.PROJECT_NAME]: string
-  [ProjectInfoEnum.REMARKS]: string
-  [ProjectInfoEnum.THUMBNAIL]: string
-  [ProjectInfoEnum.RELEASE]: boolean
-  [ProjectInfoEnum.RELEASE]: boolean
-  [ProjectInfoEnum.ORGANIZATIONID]: string
-  [ProjectInfoEnum.STATE_DATA]: number
-}
-
 // 编辑画布属性
 export enum EditCanvasTypeEnum {
   EDIT_LAYOUT_DOM = 'editLayoutDom',
@@ -52,8 +20,6 @@ export enum EditCanvasTypeEnum {
   SCALE = 'scale',
   USER_SCALE = 'userScale',
   LOCK_SCALE = 'lockScale',
-  SAVE_STATUS = 'saveStatus',
-
   IS_CREATE = 'isCreate',
   IS_DRAG = 'isDrag',
   IS_SELECT = 'isSelect'
@@ -74,8 +40,6 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.LOCK_SCALE]: boolean
   // 初始化创建
   [EditCanvasTypeEnum.IS_CREATE]: boolean
-  // 保存状态
-  [EditCanvasTypeEnum.SAVE_STATUS]: SyncEnum
   // 拖拽中
   [EditCanvasTypeEnum.IS_DRAG]: boolean
   // 框选中
@@ -169,8 +133,6 @@ export type RecordChartType = {
 
 // Store 枚举
 export enum ChartEditStoreEnum {
-  PROJECT_INFO = 'projectInfo',
-
   EDIT_RANGE = 'editRange',
   EDIT_CANVAS = 'editCanvas',
   RIGHT_MENU_SHOW = 'rightMenuShow',
@@ -193,8 +155,8 @@ type RequestPublicConfigType = {
 
 // 数据池项类型
 export type RequestDataPondItemType = {
-  dataPondId: string
-  dataPondName: string
+  dataPondId: string,
+  dataPondName: string,
   dataPondRequestConfig: RequestConfigType
 }
 
@@ -232,7 +194,6 @@ export interface RequestConfigType extends RequestPublicConfigType {
 
 // Store 类型
 export interface ChartEditStoreType {
-  [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType
   [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean

@@ -15,10 +15,9 @@ import {
   HistoryItemType,
   HistoryTargetTypeEnum
 } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-import { MenuEnum,SyncEnum } from '@/enums/editPageEnum'
+import { MenuEnum } from '@/enums/editPageEnum'
 import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils'
 import {
-  ProjectInfoType,
   ChartEditStoreEnum,
   ChartEditStorage,
   ChartEditStoreType,
@@ -37,19 +36,6 @@ const settingStore = useSettingStore()
 export const useChartEditStore = defineStore({
   id: 'useChartEditStore',
   state: (): ChartEditStoreType => ({
-    // THINGS_KIT
-    // 项目数据
-    projectInfo: {
-      projectId: '',
-      projectName: '',
-      remarks: '',
-      thumbnail: '',
-      release: false,
-      // THINGS_KIT
-      //保存缩图需要的组织id
-      organizationId: '',
-      state: 0
-    },
     // 画布属性
     editCanvas: {
       // 编辑区域 Dom
@@ -68,10 +54,7 @@ export const useChartEditStore = defineStore({
       // 拖拽中
       isDrag: false,
       // 框选中
-      isSelect: false,
-      // THINGS_KIT
-      // 同步中
-      saveStatus: SyncEnum.PENDING
+      isSelect: false
     },
     // 右键菜单
     rightMenuShow: false,
@@ -151,10 +134,6 @@ export const useChartEditStore = defineStore({
     componentList: []
   }),
   getters: {
-    // THINGS_KIT
-    getProjectInfo(): ProjectInfoType {
-      return this.projectInfo
-    },
     getMousePosition(): MousePositionType {
       return this.mousePosition
     },
@@ -189,11 +168,6 @@ export const useChartEditStore = defineStore({
     }
   },
   actions: {
-    // THINGS_KIT
-    // * 设置 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
@@ -211,7 +185,7 @@ export const useChartEditStore = defineStore({
       this.targetChart.hoverId = hoverId
     },
     // * 设置目标数据 select
-    setTargetSelectChart(selectId?: string | string[], push: boolean = false) {
+    setTargetSelectChart(selectId?: string | string[], push = false) {
       // 重复选中
       if (this.targetChart.selectId.find((e: string) => e === selectId)) return
 
@@ -528,15 +502,15 @@ export const useChartEditStore = defineStore({
           e.id = getUUID()
           // 分组列表生成新 id
           if (e.isGroup) {
-            ;(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
+            (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
               item.id = getUUID()
             })
           }
-
+        
           return e
         }
         const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
-        const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [recordCharts.charts]
+        const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ]
         // 多项
         targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
           this.addComponentList(parseHandle(e), undefined, true)
@@ -564,7 +538,7 @@ export const useChartEditStore = defineStore({
       this.setTargetSelectChart()
 
       // 重新选中
-      let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
+      const historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
       if (isArray(historyData)) {
         // 选中目标元素，支持多个
         historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
@@ -861,7 +835,7 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 锁定
-    setLock(status: boolean = true, isHistory: boolean = true) {
+    setLock(status = true, isHistory = true) {
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
@@ -890,11 +864,11 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 解除锁定
-    setUnLock(isHistory: boolean = true) {
+    setUnLock(isHistory = true) {
       this.setLock(false, isHistory)
     },
     // * 隐藏
-    setHide(status: boolean = true, isHistory: boolean = true) {
+    setHide(status = true, isHistory = true) {
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
@@ -923,7 +897,7 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 显示
-    setShow(isHistory: boolean = true) {
+    setShow(isHistory = true) {
       this.setHide(false, isHistory)
     },
     // ----------------

@@ -3,6 +3,8 @@
 @import "./animation.scss";
 @import "./mixins/mixins.scss";
 
+// THINGS_KIT 增加scss mixins
+@import "../external/mixins.scss";
 // 过度
 .go-transition {
   transition: all 0.4s;

+$tkNamespace: things-kit;
+@mixin thingsKit($block) {
+  $B: $tkNamespace + '-' + $block;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin goId($block) {
+  $B: $tkNamespace + '-' + $block;
+  ##{$B} {
+    @content;
+  }
+}

@@ -4,8 +4,8 @@ import { AsyncLoading, AsyncSkeletonLoading } from '@/components/GoLoading'
 /**
  * * 动态注册组件
  */
-export const componentInstall = <T> (key:string, node: T)  => {
-  if(!window['$vue'].component(key) && node) {
+export const componentInstall = <T>(key: string, node: T) => {
+  if (!window['$vue'].component(key) && node) {
     window['$vue'].component(key, node)
   }
 }
@@ -21,7 +21,7 @@ export const loadAsyncComponent = (loader: AsyncComponentLoader<any>) =>
     loadingComponent: AsyncLoading,
     delay: 20,
   })
-  
+
 export const loadSkeletonAsyncComponent = (loader: AsyncComponentLoader<any>) =>
   defineAsyncComponent({
     loader,

@@ -5,7 +5,7 @@
       class="go-content-charts-item-box"
       :class="[chartMode === ChartModeEnum.DOUBLE ? 'double' : 'single']"
     >
-      <!-- 每一项组件的渲染 -->
+      <!-- 每一项组件的渲染 --> 
       <div
         class="item-box"
         v-for="(item, index) in menuOptions"
@@ -13,7 +13,7 @@
         draggable
         @dragstart="dragStartHandle($event, item)"
         @dragend="dragendHandle"
-        @dblclick="dblclickHandle(item)"
+        @dblclick="dblclickHandle(item)" 
       >
         <div class="list-header">
           <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
@@ -44,10 +44,13 @@ import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
-import { createComponent } from '@/packages'
+// import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 
+// THINGS_KIT 覆盖原始创建组件逻辑
+import { createComponent } from '@/packages/external/override'
+
 import omit from 'lodash/omit'
 
 const chartEditStore = useChartEditStore()

-import { PackagesCategoryEnum, PackagesCategoryName } from "@/packages/components/external/types"
+import { EPackagesCategoryEnum, EPackagesCategoryName } from "@/packages/components/external/types"
 import { icon } from '@/plugins'
 import { renderIcon } from "@/utils"
 
@@ -6,8 +6,8 @@ const { GraphicalDataFlowIcon } = icon.carbon
 
 export function useInjectAside(packagesListObj: Recordable) {
 
-  packagesListObj[PackagesCategoryEnum.COMPOSES] = {
+  packagesListObj[EPackagesCategoryEnum.COMPOSES] = {
     icon: renderIcon(GraphicalDataFlowIcon),
-    label: PackagesCategoryName.COMPOSES
+    label: EPackagesCategoryName.COMPOSES
   }
 }

@@ -6,10 +6,17 @@ import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/pack
 // 图表
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+// THINGS_KIT 追加组件库进入aside 侧边栏
 import { useInjectAside } from './external/useInjectAside'
 // 图标
 const { BarChartIcon } = icon.ionicons5
-const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
+const {
+  TableSplitIcon,
+  RoadmapIcon,
+  SpellCheckIcon,
+  GraphicalDataFlowIcon,
+} = icon.carbon
+
 
 // 图表
 export type MenuOptionsType = {
@@ -25,23 +32,22 @@ const menuOptions: MenuOptionsType[] = []
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {
     icon: renderIcon(RoadmapIcon),
-    label: PackagesCategoryName.CHARTS
+    label: PackagesCategoryName.CHARTS,
   },
   [PackagesCategoryEnum.INFORMATIONS]: {
     icon: renderIcon(SpellCheckIcon),
-    label: PackagesCategoryName.INFORMATIONS
+    label: PackagesCategoryName.INFORMATIONS,
   },
   [PackagesCategoryEnum.TABLES]: {
     icon: renderIcon(TableSplitIcon),
-    label: PackagesCategoryName.TABLES
+    label: PackagesCategoryName.TABLES,
   },
   [PackagesCategoryEnum.DECORATES]: {
     icon: renderIcon(GraphicalDataFlowIcon),
-    label: PackagesCategoryName.DECORATES
-  }
+    label: PackagesCategoryName.DECORATES,
+  },
 }
-
-// THINGS_KIT
+// THINGS_KIT 追加组件库进入aside 侧边栏
 useInjectAside(packagesListObj as any)
 
 // 处理列表
@@ -54,7 +60,7 @@ const handlePackagesList = () => {
       // @ts-ignore
       label: packagesListObj[val].label,
       // @ts-ignore
-      list: getPackagesList[val]
+      list: getPackagesList[val],
     })
   }
 }
@@ -79,4 +85,12 @@ const clickItemHandle = (key: string, item: any) => {
   beforeSelect = key
 }
 
-export { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions }
+export {
+  getCharts,
+  BarChartIcon,
+  themeColor,
+  selectOptions,
+  selectValue,
+  clickItemHandle,
+  menuOptions,
+}

@@ -55,4 +55,4 @@ const useSyncUpdateHandle = () => {
 export const useSyncUpdate = () => {
   const routerParamsInfo = useRoute()
   watch(() => routerParamsInfo.name, useSyncUpdateHandle(), { immediate: true })
-}
\ No newline at end of file
+}

 <template>
   <!-- <edit-rule></edit-rule> -->
-  <content-box
-      id="go-chart-edit-layout"
-      :flex="true"
-      :showTop="false"
-      :showBottom="true"
-      :depth="1"
-      :xScroll="true"
-      :disabledScroll="true"
-      @mousedown="mousedownHandleUnStop"
-      @drop="dragHandle"
-      @dragover="dragoverHandle"
-      @dragenter="dragoverHandle"
-  >
+  <content-box id="go-chart-edit-layout" :flex="true" :showTop="false" :showBottom="true" :depth="1" :xScroll="true"
+    :disabledScroll="true" @mousedown="mousedownHandleUnStop" @drop="dragHandle" @dragover="dragoverHandle"
+    @dragenter="dragoverHandle">
     <edit-rule>
       <!-- 画布主体 -->
       <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
         <!-- 展示 -->
         <edit-range>
           <!-- 滤镜预览 -->
-          <div
-              :style="{
-              ...getFilterStyle(chartEditStore.getEditCanvasConfig),
-              ...rangeStyle
-            }"
-          >
+          <div :style="{
+            ...getFilterStyle(chartEditStore.getEditCanvasConfig),
+            ...rangeStyle
+          }">
             <!-- 图表 -->
             <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
               <!-- 分组 -->
-              <edit-group
-                  v-if="item.isGroup"
-                  :groupData="(item as CreateComponentGroupType)"
-                  :groupIndex="index"
-              ></edit-group>
+              <edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)"
+                :groupIndex="index"></edit-group>
 
               <!-- 单组件 -->
-              <edit-shape-box
-                  v-else
-                  :data-id="item.id"
-                  :index="index"
-                  :style="{
+              <edit-shape-box v-else :data-id="item.id" :index="index" :style="{
                 ...useComponentStyle(item.attr, index),
                 ...getBlendModeStyle(item.styles) as any
-              }"
-                  :item="item"
-                  @click="mouseClickHandle($event, item)"
-                  @mousedown="mousedownHandle($event, item)"
-                  @mouseenter="mouseenterHandle($event, item)"
-                  @mouseleave="mouseleaveHandle($event, item)"
-                  @contextmenu="handleContextMenu($event, item, optionsHandle)"
-              >
-                <component
-                    class="edit-content-chart"
-                    :class="animationsClass(item.styles.animations)"
-                    :is="item.chartConfig.chartKey"
-                    :chartConfig="item"
-                    :themeSetting="themeSetting"
-                    :themeColor="themeColor"
-                    :style="{
+              }" :item="item" @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)"
+                @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)"
+                @contextmenu="handleContextMenu($event, item, optionsHandle)">
+                <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
+                  :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
+                  :themeColor="themeColor" :style="{
                     ...useSizeStyle(item.attr),
                     ...getFilterStyle(item.styles),
                     ...getTransformStyle(item.styles)
-                  }"
-                ></component>
+                  }"></component>
               </edit-shape-box>
             </div>
           </div>
@@ -83,45 +53,46 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, computed} from 'vue'
-import {chartColors} from '@/settings/chartThemes/index'
-import {MenuEnum} from '@/enums/editPageEnum'
-import {CreateComponentType, CreateComponentGroupType} from '@/packages/index.d'
-import {animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle} from '@/utils'
-import {useContextMenu} from '@/views/chart/hooks/useContextMenu.hook'
-import {MenuOptionsItemType} from '@/views/chart/hooks/useContextMenu.hook.d'
-import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
-
-import {useLayout} from './hooks/useLayout.hook'
-import {useAddKeyboard} from '../hooks/useKeyboard.hook'
-import {dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle} from './hooks/useDrag.hook'
-import {useComponentStyle, useSizeStyle} from './hooks/useStyle.hook'
-import {useSync} from '../hooks/useSync.hook'
-
-import {ContentBox} from '../ContentBox/index'
-import {EditGroup} from './components/EditGroup'
-import {EditRange} from './components/EditRange'
-import {EditRule} from './components/EditRule'
-import {EditBottom} from './components/EditBottom'
-import {EditShapeBox} from './components/EditShapeBox'
-import {EditTools} from './components/EditTools'
+import { onMounted, computed } from 'vue'
+import { chartColors } from '@/settings/chartThemes/index'
+import { MenuEnum } from '@/enums/editPageEnum'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
+import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+import { useLayout } from './hooks/useLayout.hook'
+import { useAddKeyboard } from '../hooks/useKeyboard.hook'
+import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
+import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
+// THINGS_KIT 引入同步数据源hook
+import { useSyncRemote } from '../hooks/external/useRemote.hook'
+
+import { ContentBox } from '../ContentBox/index'
+import { EditGroup } from './components/EditGroup'
+import { EditRange } from './components/EditRange'
+import { EditRule } from './components/EditRule'
+import { EditBottom } from './components/EditBottom'
+import { EditShapeBox } from './components/EditShapeBox'
+import { EditTools } from './components/EditTools'
 
 const chartEditStore = useChartEditStore()
-const {handleContextMenu} = useContextMenu()
-const {dataSyncFetch, intervalDataSyncUpdate} = useSync()
+const { handleContextMenu } = useContextMenu()
+const { dataSyncFetch, intervalDataSyncUpdate } = useSyncRemote()
 
 
 // 布局处理
 useLayout()
 
 // 点击事件
-const {mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle} = useMouseHandle()
+const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
 
 // 右键事件
 const optionsHandle = (
-    targetList: MenuOptionsItemType[],
-    allList: MenuOptionsItemType[],
-    targetInstance: CreateComponentType
+  targetList: MenuOptionsItemType[],
+  allList: MenuOptionsItemType[],
+  targetInstance: CreateComponentType
 ) => {
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
@@ -167,8 +138,8 @@ const rangeStyle = computed(() => {
   const backgroundColor = background ? background : undefined
 
   const computedBackground = selectColor
-      ? {background: backgroundColor}
-      : {background: `url(${backgroundImage}) no-repeat center center / cover !important`}
+    ? { background: backgroundColor }
+    : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }
 
   // @ts-ignore
   return {

@@ -59,14 +59,15 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-import { useSync } from '../../hooks/useSync.hook'
+// THINGS_KIT 新增同步逻辑
+import { useSyncRemote } from '../../hooks/external/useRemote.hook'
 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 { SaveIcon } = icon.carbon
 const { setItem } = useChartLayoutStore()
-const { dataSyncUpdate } = useSync()
+const { dataSyncUpdate } = useSyncRemote()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 const chartEditStore = useChartEditStore()
 const chartHistoryStore = useChartHistoryStore()

@@ -3,34 +3,22 @@
     <n-icon size="20" :depth="3">
       <fish-icon></fish-icon>
     </n-icon>
-    <!-- THINGS_KIT -->
     <n-text @click="handleFocus">
       工作空间 -
-      <n-button  secondary round size="tiny">
+      <n-button v-show="!focus" secondary round size="tiny">
         <span class="title">
           {{ comTitle }}
         </span>
       </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"
-      @keyup.enter="handleBlur"
-      @blur="handleBlur"
-    ></n-input> -->
+    <n-input v-show="focus" ref="inputInstRef" size="small" type="text" maxlength="16" show-count round
+      placeholder="请输入项目名称" v-model:value.trim="title" @keyup.enter="handleBlur" @blur="handleBlur"></n-input>
   </n-space>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed,watchEffect } from 'vue'
+import { ref, nextTick, computed } from 'vue'
 import { fetchRouteParamsLocation, setTitle } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -42,12 +30,17 @@ const chartEditStore = useChartEditStore()
 const focus = ref<boolean>(false)
 const inputInstRef = ref(null)
 
-// THINGS_KIT
-const title = ref<string>(fetchRouteParamsLocation())
+// 根据路由 id 参数获取项目信息
+const fetchProhectInfoById = () => {
+  const id = fetchRouteParamsLocation()
+  if (id.length) {
+    return id[0]
+  }
+  return ''
+}
+
+const title = ref<string>(fetchProhectInfoById() || '')
 
-watchEffect(() => {
-  title.value = chartEditStore.getProjectInfo.projectName || ''
-})
 const comTitle = computed(() => {
   // eslint-disable-next-line vue/no-side-effects-in-computed-properties
   title.value = title.value.replace(/\s/g, '')

+import {  fetchRouteParamsLocation, JSONStringify, JSONParse, base64toFile } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 
+import { ProjectInfoEnum } from '@/store/external/module/projectInfo.d' 
+import { onUnmounted } from 'vue'
+import { saveInterval } from '@/settings/designSetting'
+import throttle from 'lodash/throttle'
+import html2canvas from 'html2canvas'
+import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
+// 画布枚举
+import { SyncEnum } from '@/enums/external/editPageEnum' 
+import { useProjectInfoStore } from '@/store/external/module/projectInfo'
+import { useSync } from '../useSync.hook'
+
+ 
+
+// 请求处理
+export const useSyncRemote = () => {
+  const chartEditStore = useChartEditStore() 
+  const projectInfoStore = useProjectInfoStore()
+  const { updateComponent } = useSync()
+ 
+  /**
+   * * 赋值全局数据
+   * @param projectData 项目数据
+   * @returns
+   */
+  const updateStoreInfo = (projectData: {
+    dataViewId: string
+    dataViewName: string
+    indexImage: string
+    id: string
+    state: number
+    organizationId: string
+    dataViewContent: { id: string; content: string; enabled: boolean }
+  }) => {
+    const { dataViewId, dataViewName, indexImage, state, dataViewContent, organizationId } = projectData
+    // ID
+    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_ID, dataViewId)
+    // 名称
+    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_NAME, dataViewName)
+    // 描述
+    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.REMARKS, dataViewContent?.id)
+    // 缩略图
+    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.THUMBNAIL, indexImage)
+    // 发布
+    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.RELEASE, state === 1)
+    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.ORGANIZATION_ID, organizationId)
+    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.STATE_DATA, state)
+  }
+
+  // * 数据获取
+  const dataSyncFetch = async () => {
+    // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复
+    // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复
+    chartEditStore.componentList = []
+    projectInfoStore.setSaveStatus(SyncEnum.START)
+    try {
+      const id = fetchRouteParamsLocation()
+      const res = await getDataView(id)
+      updateStoreInfo(res)
+      // 更新全局数据
+      await updateComponent(JSONParse(res.dataViewContent.content))
+
+      projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_ID, res.dataViewId)
+      setTimeout(() => {
+        projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
+      }, 1000)
+
+    } catch (error) {
+      projectInfoStore.setSaveStatus(SyncEnum.FAILURE)
+    }
+  }
+
+  // 数据保存
+  const dataSyncUpdate = throttle(async (updateImg = true) => {
+    if (!fetchRouteParamsLocation()) return 
+    const projectId = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
+    const id = projectInfoStore.getProjectInfo[ProjectInfoEnum.REMARKS]
+    const dataViewName = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
+    const organizationId = projectInfoStore.getProjectInfo[ProjectInfoEnum.ORGANIZATION_ID]
+    const state = projectInfoStore.getProjectInfo[ProjectInfoEnum.STATE_DATA]
+
+    if (projectId === null || projectId === '') {
+      window['$message'].error('数据初未始化成功,请刷新页面！')
+      return
+    }
+    projectInfoStore.setSaveStatus(SyncEnum.START)
+    // 异常处理：缩略图上传失败不影响JSON的保存
+    try {
+      if (updateImg) {
+        // 获取缩略图片
+        const range = document.querySelector('.go-edit-range') as HTMLElement
+        // 生成图片
+        const canvasImage: HTMLCanvasElement = await html2canvas(range, {
+          backgroundColor: null,
+          allowTaint: true,
+          useCORS: true
+        })
+
+        // 上传预览图
+        const uploadParams = new FormData()
+        uploadParams.append(
+          'file',
+          base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
+        )
+        const uploadRes = await uploadFile(uploadParams)
+
+        // 保存预览图
+        if (uploadRes) {
+          await saveDataViewList({
+            name: dataViewName,
+            organizationId,
+            state,
+            id: fetchRouteParamsLocation(),
+            thumbnail: `${uploadRes.fileStaticUri}`
+          })
+        }
+      }
+    } catch (e) {
+      console.log(e)
+    }
+    // 保存数据
+    const saveContent = {
+      dataViewContent: {
+        id,
+        content: JSONStringify(chartEditStore.getStorageInfo || {})
+      },
+      dataViewName,
+      dataViewId: projectId,
+      projectId
+    }
+    await contentUpdateApi(saveContent)
+    window['$message'].success('保存成功！')
+    // 成功状态
+    setTimeout(() => {
+      projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
+    }, 1000)
+    return
+    // 失败状态
+    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
+  }, 3000)
+
+  // * 定时处理
+  const intervalDataSyncUpdate = () => {
+    // 定时获取数据
+    const syncTiming = setInterval(() => {
+      dataSyncUpdate()
+    }, saveInterval * 1000)
+
+    // 销毁
+    onUnmounted(() => {
+      clearInterval(syncTiming)
+    })
+  }
+  return {  
+    dataSyncFetch,
+    dataSyncUpdate,
+    intervalDataSyncUpdate
+  }
+}

-// THINGS_KIT
-import { getUUID, fetchRouteParamsLocation, JSONStringify, JSONParse, base64toFile } from '@/utils'
+import { getUUID } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import {
-  EditCanvasTypeEnum,
-  ChartEditStoreEnum,
-  ChartEditStorage,
-  ProjectInfoEnum
-} from '@/store/modules/chartEditStore/chartEditStore.d'
+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 { fetchChartComponent, fetchConfigComponent } from '@/packages/index'
+
+// THINGS_KIT 重写createComponent 创建组件的逻辑
+// import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
+import { createComponent } from '@/packages/external/override'
+
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { BaseEvent, EventLife } from '@/enums/eventEnum'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 import merge from 'lodash/merge'
-import { onUnmounted } from 'vue'
-import { saveInterval } from '@/settings/designSetting'
-import throttle from 'lodash/throttle'
-// THINGS_KIT
-import html2canvas from 'html2canvas'
-import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
-// 画布枚举
-import { SyncEnum } from '@/enums/editPageEnum'
 
 /**
  * * 画布-版本升级对旧数据无法兼容的补丁
@@ -130,7 +121,7 @@ export const useSync = () => {
       }
 
       if (e.isGroup) {
-        ;(e as CreateComponentGroupType).groupList.forEach(groupItem => {
+        (e as CreateComponentGroupType).groupList.forEach(groupItem => {
           intComponent(groupItem)
         })
       } else {
@@ -144,7 +135,7 @@ export const useSync = () => {
       callBack?: (componentInstance: CreateComponentType) => void
     ) => {
       // 补充 class 上的方法
-      let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+      const newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
       if (callBack) {
         if (changeId) {
           callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
@@ -169,10 +160,10 @@ export const useSync = () => {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         let loadIndex = 0
-        const listLength = projectData[key].length
+        const listLength = projectData[key].length;
         for (const comItem of projectData[key]) {
           // 设置加载数量
-          let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+          const percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
           chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
           // 判断类型
           if (comItem.isGroup) {
@@ -209,148 +200,8 @@ export const useSync = () => {
     // 清除数量
     chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
   }
-  // THINGS_KIT
-  /**
-   * * 赋值全局数据
-   * @param projectData 项目数据
-   * @returns
-   */
-  const updateStoreInfo = (projectData: {
-    dataViewId: string
-    dataViewName: string
-    indexImage: string
-    id: string
-    state: number
-    organizationId: string
-    dataViewContent: { id: string; content: string; enabled: boolean }
-  }) => {
-    const { dataViewId, dataViewName, indexImage, state, dataViewContent, organizationId } = projectData
-    // ID
-    chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, dataViewId)
-    // 名称
-    chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, dataViewName)
-    // 描述
-    chartEditStore.setProjectInfo(ProjectInfoEnum.REMARKS, dataViewContent?.id)
-    // 缩略图
-    chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)
-    // 发布
-    chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, state === 1)
-    chartEditStore.setProjectInfo(ProjectInfoEnum.ORGANIZATIONID, organizationId)
-    chartEditStore.setProjectInfo(ProjectInfoEnum.STATE_DATA, state)
-  }
-  // THINGS_KIT
-  // * 数据获取
-  const dataSyncFetch = async () => {
-    // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复
-    // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复
-    chartEditStore.componentList = []
-    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
-    try {
-      const id = fetchRouteParamsLocation()
-      const res = await getDataView(id)
-      updateStoreInfo(res)
-      // 更新全局数据
-      await updateComponent(JSONParse(res.dataViewContent.content))
-
-      chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, res.dataViewId)
-      setTimeout(() => {
-        chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
-      }, 1000)
-      // return
-      // }
-      // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-    } catch (error) {
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-      // httpErrorHandle()
-    }
-  }
-  // THINGS_KIT
-  // 数据保存
-  const dataSyncUpdate = throttle(async (updateImg = true) => {
-    if (!fetchRouteParamsLocation()) return
-    const projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
-    const id = chartEditStore.getProjectInfo[ProjectInfoEnum.REMARKS]
-    const dataViewName = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
-    const organizationId = chartEditStore.getProjectInfo[ProjectInfoEnum.ORGANIZATIONID]
-    const state = chartEditStore.getProjectInfo[ProjectInfoEnum.STATE_DATA]
 
-    if (projectId === null || projectId === '') {
-      window['$message'].error('数据初未始化成功,请刷新页面！')
-      return
-    }
-    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
-    // 异常处理：缩略图上传失败不影响JSON的保存
-    try {
-      if (updateImg) {
-        // 获取缩略图片
-        const range = document.querySelector('.go-edit-range') as HTMLElement
-        // 生成图片
-        const canvasImage: HTMLCanvasElement = await html2canvas(range, {
-          backgroundColor: null,
-          allowTaint: true,
-          useCORS: true
-        })
-
-        // 上传预览图
-        const uploadParams = new FormData()
-        uploadParams.append(
-          'file',
-          base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
-        )
-        const uploadRes = await uploadFile(uploadParams)
-        console.log(uploadRes.fileStaticUri)
-        // 保存预览图
-        if (uploadRes) {
-          await saveDataViewList({
-            name: dataViewName,
-            organizationId,
-            state,
-            id: fetchRouteParamsLocation(),
-            thumbnail: `${uploadRes.fileStaticUri}`
-          })
-        }
-      }
-    } catch (e) {
-      console.log(e)
-    }
-    // 保存数据
-    const saveContent = {
-      dataViewContent: {
-        id,
-        content: JSONStringify(chartEditStore.getStorageInfo || {})
-      },
-      dataViewName,
-      dataViewId: projectId,
-      projectId
-    }
-    await contentUpdateApi(saveContent)
-    window['$message'].success('保存成功！')
-    // 成功状态
-    setTimeout(() => {
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
-    }, 1000)
-    return
-    // 失败状态
-    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-  }, 3000)
-  // THINGS_KIT
-  // * 定时处理
-  const intervalDataSyncUpdate = () => {
-    // 定时获取数据
-    const syncTiming = setInterval(() => {
-      dataSyncUpdate()
-    }, saveInterval * 1000)
-
-    // 销毁
-    onUnmounted(() => {
-      clearInterval(syncTiming)
-    })
-  }
   return {
-    updateComponent,
-    // THINGS_KIT
-    dataSyncFetch,
-    dataSyncUpdate,
-    intervalDataSyncUpdate
+    updateComponent
   }
 }

@@ -26,7 +26,7 @@
             lineNumbers: 'on',
             minimap: { enabled: true }
           }"
-        />
+      />
       </n-layout-content>
     </n-layout>
   </div>
@@ -38,22 +38,16 @@ 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, JSONStringify, JSONParse, setTitle, fetchRouteParamsLocation } from '@/utils'
+import { setSessionStorage, JSONStringify, JSONParse, setTitle } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
-// THINGS_KIT
-import { useSync } from '@/views/chart/hooks/useSync.hook'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-// THINGS_KIT
-const chartEditStore = useChartEditStore()
-const { dataSyncUpdate } = useSync()
+
 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
 const showOpenFilePicker: Function = (window as any).showOpenFilePicker
 const content = ref('')
 // 从sessionStorage 获取数据
 async function getDataBySession() {
-  const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
+  const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
   setTitle(`编辑-${localStorageInfo.editCanvasConfig.projectName}`)
   content.value = JSONStringify(localStorageInfo)
 }
@@ -90,7 +84,7 @@ document.addEventListener('keydown', function (e) {
   }
 })
 addEventListener('blur', updateSync)
-// THINGS_KIT
+
 // 同步更新
 async function updateSync() {
   if (!window.opener) {
@@ -100,11 +94,6 @@ async function updateSync() {
     const detail = JSONParse(content.value)
     delete detail.id
     // 保持id不变
-    // 带后端版本额外处理请求
-    if (dataSyncUpdate) {
-      chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
-      await dataSyncUpdate(false) // JSON界面保存不上传缩略图
-    }
     window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
   } catch (e) {
     window['$message'].error('内容格式有误')