简柏林 / thingskit-view · Commits

Commit b7c7f4220b4cd330ff7ea529c4d79ab679f6ff3e

Authored by xp.Huang
2 parents 9948fce0 cc60d29c

Merge branch 'ww' into 'main' 

perf: 重构新增功能代码

See merge request yunteng/thingskit-view!7
Inline Side-by-side
Showing 34 changed files with 763 additions and 402 deletions
  1 +<template>
  2 + <svg :class="[prefixCls, $attrs.class, spin && 'svg-icon-spin']" :style="getStyle" aria-hidden="true">
  3 + <use :xlink:href="symbolId" />
  4 + </svg>
  5 +</template>
  6 +<script lang="ts" setup>import { useDesign } from '@/hooks/external/useDesign';
  7 +import { computed, CSSProperties } from 'vue';
  8 +
  9 +
  10 +const props = withDefaults(
  11 + defineProps<{
  12 + prefix?: string
  13 + name: string
  14 + size?: number | string,
  15 + spin?: boolean
  16 + }>(),
  17 + {
  18 + prefix: 'icon',
  19 + size: 16,
  20 + spin: false
  21 + }
  22 +)
  23 +
  24 +const { prefixCls } = useDesign('svg-icon');
  25 +const symbolId = computed(() => `#${props.prefix}-${props.name}`);
  26 +
  27 +const getStyle = computed((): CSSProperties => {
  28 + const { size } = props;
  29 + let s = `${size}`;
  30 + s = `${s.replace('px', '')}px`;
  31 + return {
  32 + width: s,
  33 + height: s,
  34 + };
  35 +});
  36 +</script>
  37 +<style lang="less" scoped>
  38 +@prefix-cls: ~'@{tkNamespace}-svg-icon';
  39 +
  40 +.@{prefix-cls} {
  41 + display: inline-block;
  42 + overflow: hidden;
  43 + vertical-align: -0.15em;
  44 + fill: currentColor;
  45 +}
  46 +
  47 +.svg-icon-spin {
  48 + animation: loadingCircle 1s infinite linear;
  49 +}
  50 +</style>
@@ -82,16 +82,3 @@ export enum MacKeyboard { @@ -82,16 +82,3 @@ export enum MacKeyboard {
82 ALT_SOURCE_KEY = '⌥', 82 ALT_SOURCE_KEY = '⌥',
83 SPACE = 'Space' 83 SPACE = 'Space'
84 } 84 }
85 -  
86 -  
87 -// 同步状态枚举  
88 -export enum SyncEnum {  
89 - // 等待  
90 - PENDING,  
91 - // 开始  
92 - START,  
93 - // 成功  
94 - SUCCESS,  
95 - // 失败  
96 - FAILURE  
97 -}  
  1 +// 同步状态枚举
  2 +export enum SyncEnum {
  3 + // 等待
  4 + PENDING,
  5 + // 开始
  6 + START,
  7 + // 成功
  8 + SUCCESS,
  9 + // 失败
  10 + FAILURE
  11 +}
  1 +export function useDesign(scope: string) {
  2 + const values = 'things-kit'
  3 + return {
  4 + prefixCls: `${values}-${scope}`,
  5 + prefixVar: values,
  6 + };
  7 +}
1 import { ChartFrameEnum } from '@/packages/index.d' 1 import { ChartFrameEnum } from '@/packages/index.d'
2 import { ConfigType } from '@/packages/index.d' 2 import { ConfigType } from '@/packages/index.d'
3 -import { PackagesCategoryEnum } from '@/packages/components/external/types' 3 +import { EPackagesCategoryEnum } from '@/packages/components/external/types'
4 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' 4 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
5 5
6 export const LeftCenterRightHeadConfig: ConfigType = { 6 export const LeftCenterRightHeadConfig: ConfigType = {
@@ -10,7 +10,7 @@ export const LeftCenterRightHeadConfig: ConfigType = { @@ -10,7 +10,7 @@ export const LeftCenterRightHeadConfig: ConfigType = {
10 title: '通用头部', 10 title: '通用头部',
11 category: ChatCategoryEnum.HEADCOMBINATION, 11 category: ChatCategoryEnum.HEADCOMBINATION,
12 categoryName: ChatCategoryEnumName.HEADCOMBINATION, 12 categoryName: ChatCategoryEnumName.HEADCOMBINATION,
13 - package: PackagesCategoryEnum.COMPOSES, 13 + package: EPackagesCategoryEnum.COMPOSES,
14 chartFrame: ChartFrameEnum.COMMON, 14 chartFrame: ChartFrameEnum.COMMON,
15 image: 'left_center_rightHead.png', 15 image: 'left_center_rightHead.png',
16 } 16 }
1 import { ChartFrameEnum, ConfigType } from '@/packages/index.d' 1 import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
2 -import { PackagesCategoryEnum } from '@/packages/components/external/types' 2 +import { EPackagesCategoryEnum } from '@/packages/components/external/types'
3 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' 3 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
4 4
5 export const LeftCenterRightHeadCommonConfig: ConfigType = { 5 export const LeftCenterRightHeadCommonConfig: ConfigType = {
@@ -9,7 +9,7 @@ export const LeftCenterRightHeadCommonConfig: ConfigType = { @@ -9,7 +9,7 @@ export const LeftCenterRightHeadCommonConfig: ConfigType = {
9 title: '头部', 9 title: '头部',
10 category: ChatCategoryEnum.HEADCOMBINATION, 10 category: ChatCategoryEnum.HEADCOMBINATION,
11 categoryName: ChatCategoryEnumName.HEADCOMBINATION, 11 categoryName: ChatCategoryEnumName.HEADCOMBINATION,
12 - package: PackagesCategoryEnum.COMPOSES, 12 + package: EPackagesCategoryEnum.COMPOSES,
13 chartFrame: ChartFrameEnum.COMMON, 13 chartFrame: ChartFrameEnum.COMMON,
14 image: 'left_center_rightHead.png', 14 image: 'left_center_rightHead.png',
15 } 15 }
  1 +<template>
  2 + <section :class="prefixCls">
  3 + <slot />
  4 + <div class="point top-left"></div>
  5 + <div class="point top-right"></div>
  6 + <div class="point bottom-left"></div>
  7 + <div class="point bottom-right"></div>
  8 + </section>
  9 +</template>
  10 +
  11 +<script lang="ts" setup>
  12 +import { useDesign } from '@/hooks/external/useDesign';
  13 +
  14 +const props = defineProps<{
  15 + border: string
  16 +}>()
  17 +
  18 +const { prefixCls } = useDesign('svg-border')
  19 +</script>
  20 +
  21 +<style lang="scss" scoped>
  22 +@include thingsKit('svg-border') {
  23 + $pointSize: 5px;
  24 + position: relative;
  25 + display: flex;
  26 + justify-content: center;
  27 + align-items: center;
  28 + width: 100%;
  29 + height: 100%;
  30 + border: 1px solid black;
  31 + margin: 5px;
  32 +
  33 + .round {
  34 + border-radius: 50%;
  35 + }
  36 +
  37 + .point {
  38 + position: absolute;
  39 + width: $pointSize;
  40 + height: $pointSize;
  41 + border-radius: 50%;
  42 + background-color: black;
  43 + }
  44 +
  45 + .top-left {
  46 + top: 0;
  47 + left: 0;
  48 + transform: translate(-2.5px, -2.5px);
  49 + }
  50 +
  51 + .top-right {
  52 + top: 0;
  53 + right: 0;
  54 + transform: translate(2.5px, -2.5px);
  55 + }
  56 +
  57 + .bottom-left {
  58 + bottom: 0;
  59 + left: 0;
  60 + transform: translate(-2.5px, 2.5px);
  61 + }
  62 +
  63 + .bottom-right {
  64 + bottom: 0;
  65 + right: 0;
  66 + transform: translate(-2.5px, -2.5px);
  67 + }
  68 +
  69 +}
  70 +</style>
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { ClockConfig } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +
  6 +export const option = {
  7 + border: 6,
  8 + color: '#ffffff',
  9 + bgColor: '#84a5e9',
  10 + borderColor: '#ffffff'
  11 +}
  12 +
  13 +export default class Config extends PublicConfigClass implements CreateComponentType {
  14 + public key = ClockConfig.key
  15 + public chartConfig = cloneDeep(ClockConfig)
  16 + public option = cloneDeep(option)
  17 +}
  1 +<template>
  2 + <CollapseItem name="时钟" expanded>
  3 + <SettingItemBox name="表盘">
  4 + <SettingItem name="背景色">
  5 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.bgColor"></n-color-picker>
  6 + </SettingItem>
  7 + <SettingItem name="边框色">
  8 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
  9 + </SettingItem>
  10 + <SettingItem name="边框大小">
  11 + <n-input-number v-model:value="optionData.border" size="small" :step="0.5" :min="0"></n-input-number>
  12 + </SettingItem>
  13 + </SettingItemBox>
  14 + <SettingItemBox name="指针">
  15 + <SettingItem name="颜色">
  16 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
  17 + </SettingItem>
  18 + </SettingItemBox>
  19 + </CollapseItem>
  20 +</template>
  21 +
  22 +<script setup lang="ts">
  23 +import { PropType } from 'vue'
  24 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  25 +import { option } from './config'
  26 +
  27 +const props = defineProps({
  28 + optionData: {
  29 + type: Object as PropType<typeof option>,
  30 + required: true
  31 + }
  32 +})
  33 +</script>
  1 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  2 +import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Decorates/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, conKey, chartKey } = useWidgetKey('Icon', true)
  6 +
  7 +export const ClockConfig: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '时钟2',
  12 + category: ChatCategoryEnum.MORE,
  13 + categoryName: ChatCategoryEnumName.MORE,
  14 + package: PackagesCategoryEnum.DECORATES,
  15 + chartFrame: ChartFrameEnum.STATIC,
  16 + image: 'clock.png'
  17 +}
  1 +<template>
  2 + <svg xmlns="http://www.w3.org/2000/svg" :viewBox="`0 0 200 200`">
  3 + <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
  4 + <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
  5 + <feOffset in="blur" dx="2.5" dy="2.5" />
  6 + </filter>
  7 +
  8 + <!-- 表盘 -->
  9 + <g>
  10 + <circle id="shadow" style="fill: rgba(0, 0, 0, 0.1)" cx="100" cy="100" r="87" filter="url(#innerShadow)"></circle>
  11 + <circle id="circle" class="clock-border" cx="100" cy="100" r="80"></circle>
  12 + </g>
  13 +
  14 + <!-- 指针 -->
  15 + <g>
  16 + <line x1="100" y1="100" x2="100" y2="55" style="stroke-width: 3px" class="clock-line">
  17 + <animateTransform
  18 + attributeName="transform"
  19 + attributeType="XML"
  20 + type="rotate"
  21 + dur="43200s"
  22 + repeatCount="indefinite"
  23 + :from="`${hoursAngle} 100 100`"
  24 + :to="`${hoursAngle + 360} 100 100`"
  25 + />
  26 + </line>
  27 + <line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px" class="clock-line">
  28 + <animateTransform
  29 + attributeName="transform"
  30 + attributeType="XML"
  31 + type="rotate"
  32 + dur="3600s"
  33 + repeatCount="indefinite"
  34 + :from="`${minuteAngle} 100 100`"
  35 + :to="`${minuteAngle + 360} 100 100`"
  36 + />
  37 + </line>
  38 + <line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px" class="clock-line">
  39 + <animateTransform
  40 + attributeName="transform"
  41 + attributeType="XML"
  42 + type="rotate"
  43 + dur="60s"
  44 + repeatCount="indefinite"
  45 + :from="`${secAngle} 100 100`"
  46 + :to="`${secAngle + 360} 100 100`"
  47 + />
  48 + </line>
  49 + </g>
  50 +
  51 + <!-- 中心圆点 -->
  52 + <circle id="center" style="fill: #128a86; stroke: #c1efed; stroke-width: 2px" cx="100" cy="100" r="3"></circle>
  53 +
  54 + <!-- 刻度线 -->
  55 + <line
  56 + x1="100"
  57 + y1="30"
  58 + x2="100"
  59 + y2="40"
  60 + class="clock-line"
  61 + :transform="`rotate(${((num + 1) * 360) / 12} 100 100)`"
  62 + v-for="num in 12"
  63 + :key="`line_${num + 1}`"
  64 + ></line>
  65 + </svg>
  66 +</template>
  67 +
  68 +<script setup lang="ts">
  69 +import { PropType, toRefs } from 'vue'
  70 +import { CreateComponentType } from '@/packages/index.d'
  71 +import { option } from './config'
  72 +import { useProjectInfoStore } from '@/store/external/module/projectInfo';
  73 +
  74 +const projectInfoStore = useProjectInfoStore()
  75 +
  76 +
  77 +const props = defineProps({
  78 + chartConfig: {
  79 + type: Object as PropType<CreateComponentType & typeof option>,
  80 + required: true
  81 + }
  82 +})
  83 +
  84 +let { border, color, bgColor, borderColor } = toRefs(props.chartConfig.option)
  85 +
  86 +const date = new Date()
  87 +const hoursAngle = (360 * date.getHours()) / 12 + date.getMinutes() / 2
  88 +const minuteAngle = (360 * date.getMinutes()) / 60
  89 +const secAngle = (360 * date.getSeconds()) / 60
  90 +</script>
  91 +
  92 +<style lang="scss" scoped>
  93 +svg {
  94 + display: block;
  95 + width: 100%;
  96 + height: 100%;
  97 +}
  98 +.clock-border {
  99 + stroke: v-bind('borderColor');
  100 + stroke-width: v-bind('border+"px"');
  101 + fill: v-bind('bgColor');
  102 +}
  103 +.clock-line {
  104 + stroke: v-bind('color') !important;
  105 +}
  106 +</style>
  1 +import { PackagesType as NativePackagesType } from '@/packages/index.d'
1 import { ConfigType } from "@/packages/index.d" 2 import { ConfigType } from "@/packages/index.d"
2 3
3 // 包分类枚举 4 // 包分类枚举
4 -export enum PackagesCategoryEnum { 5 +export enum EPackagesCategoryEnum {
5 COMPOSES = 'external/Composes', 6 COMPOSES = 'external/Composes',
6 } 7 }
7 8
8 // 图表包类型 9 // 图表包类型
9 -export type PackagesType = {  
10 - [PackagesCategoryEnum.COMPOSES]: ConfigType[]  
11 -} 10 +export type EPackagesType = {
  11 + [EPackagesCategoryEnum.COMPOSES]: ConfigType[]
  12 +} & NativePackagesType
12 13
13 // 包分类名称 14 // 包分类名称
14 -export enum PackagesCategoryName { 15 +export enum EPackagesCategoryName {
15 COMPOSES = '组合', 16 COMPOSES = '组合',
16 } 17 }
  18 +
1 -import { PackagesCategoryEnum, PackagesType } from '@/packages/components/external/types' 1 +import { EPackagesCategoryEnum, EPackagesType } from '@/packages/components/external/types'
2 import { ComposesList } from '@/packages/components/external/Composes' 2 import { ComposesList } from '@/packages/components/external/Composes'
  3 +import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
  4 +import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
3 5
4 -export function useInjectLib(packagesList: any) { 6 +export function useInjectLib(packagesList: EPackagesType) {
  7 + packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
5 8
6 - // console.log(ComposesList)  
7 - packagesList[PackagesCategoryEnum.COMPOSES] = ComposesList 9 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
  10 +}
  11 +
  12 +/**
  13 + *
  14 + * @param packagesList
  15 + * @param categoryName
  16 + * @param config
  17 + */
  18 +function addWidgetToCategoryByCategoryName(packagesList: EPackagesType, categoryName: PackagesCategoryEnum, config: ConfigType) {
  19 + packagesList[categoryName].push(config)
8 } 20 }
  1 +
  2 +import { ConfigType } from "../index.d"
  3 +import { matchExternalPrefixReg } from "./useWidgetKey"
  4 +
  5 +
  6 +export const createComponent = async (configType: ConfigType) => {
  7 + const { key, chartKey, category, package: packageName } = configType
  8 + const hasExternalPrefix = matchExternalPrefixReg.test(chartKey)
  9 + const chart = await import(`../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts`)
  10 + return new chart.default()
  11 +}
  12 +
  1 +export const EXTERNAL_WIDGET_PREFIX = 'External'
  2 +
  3 +export const matchExternalPrefixReg = new RegExp(`^${EXTERNAL_WIDGET_PREFIX}`)
  4 +
  5 +export const CHART_COMPONENT_PREFIX = 'VC'
  6 +
  7 +export const CONFIG_COMPONENT_PREFIX = 'VCC'
  8 +
  9 +/**
  10 + *
  11 + * @param scope directory name 目录名
  12 + * @returns
  13 + */
  14 +export const useWidgetKey = (scope: string, extendPrimitiveCategory = false) => {
  15 + const prefix = extendPrimitiveCategory ? EXTERNAL_WIDGET_PREFIX : ''
  16 + return {
  17 + key: scope,
  18 + chartKey: `${prefix}${CHART_COMPONENT_PREFIX}${scope}`,
  19 + conKey: `${prefix}${CONFIG_COMPONENT_PREFIX}${scope}`
  20 + }
  21 +}
  1 +import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
  2 +import { SyncEnum } from '@/enums/external/editPageEnum'
  3 +
  4 +export enum ProjectInfoEnum {
  5 + INFO = 'info',
  6 + // ID
  7 + PROJECT_ID = 'projectId',
  8 + // 名称
  9 + PROJECT_NAME = 'projectName',
  10 + // 描述
  11 + REMARKS = 'remarks',
  12 + // 缩略图
  13 + THUMBNAIL = 'thumbnail',
  14 + // 是否公开发布
  15 + RELEASE = 'release',
  16 + // 组织id
  17 + ORGANIZATION_ID = 'organizationId',
  18 + //保存给服务端的state
  19 + STATE_DATA = 'state',
  20 +
  21 + SAVE_STATUS = 'saveStatus'
  22 +}
  23 +
  24 +export enum EEditCanvasTypeEnum {
  25 + SAVE_STATUS = 'saveStatus',
  26 +}
  27 +
  28 +
  29 +// Store 类型
  30 +export interface ProjectInfoStoreType {
  31 + [ProjectInfoEnum.INFO]: {
  32 + [ProjectInfoEnum.PROJECT_ID]: string
  33 + [ProjectInfoEnum.PROJECT_NAME]: string
  34 + [ProjectInfoEnum.REMARKS]: string
  35 + [ProjectInfoEnum.THUMBNAIL]: string
  36 + [ProjectInfoEnum.RELEASE]: boolean
  37 + [ProjectInfoEnum.RELEASE]: boolean
  38 + [ProjectInfoEnum.ORGANIZATION_ID]: string
  39 + [ProjectInfoEnum.STATE_DATA]: number
  40 + }
  41 +
  42 + [ProjectInfoEnum.SAVE_STATUS]: SyncEnum
  43 +}
  1 +import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
  2 +import { ProjectInfoEnum, ProjectInfoStoreType } from './projectInfo.d'
  3 +import { defineStore } from "pinia";
  4 +import { SyncEnum } from "@/enums/external/editPageEnum";
  5 +
  6 +export const useProjectInfoStore = defineStore({
  7 + id: 'useProjectInfoStore',
  8 + state: (): ProjectInfoStoreType => ({
  9 + info: {
  10 + projectId: '',
  11 + projectName: '',
  12 + remarks: '',
  13 + thumbnail: '',
  14 + release: false,
  15 + organizationId: '',
  16 + state: 0,
  17 + },
  18 +
  19 + saveStatus: SyncEnum.FAILURE
  20 + }),
  21 + getters: {
  22 + getProjectInfo(): ProjectInfoStoreType[ProjectInfoEnum.INFO] {
  23 + return Reflect.get(this, ProjectInfoEnum.INFO)
  24 + },
  25 + getSaveStatus(): ProjectInfoStoreType[ProjectInfoEnum.SAVE_STATUS] {
  26 + return Reflect.get(this, ProjectInfoEnum.SAVE_STATUS)
  27 + }
  28 + },
  29 + actions: {
  30 + setProjectInfo<T extends ProjectInfoStoreType[ProjectInfoEnum.INFO]>(value: T) {
  31 + this[ProjectInfoEnum.INFO] = value
  32 + },
  33 + setProjectInfoByKey<T extends keyof ProjectInfoStoreType[ProjectInfoEnum.INFO], K extends ProjectInfoStoreType[ProjectInfoEnum.INFO][T]>(key: T, value: K) {
  34 + this[ProjectInfoEnum.INFO][key] = value
  35 + },
  36 + setSaveStatus(status: SyncEnum) {
  37 + this[ProjectInfoEnum.SAVE_STATUS] = status
  38 + }
  39 + }
  40 +})
1 import { CreateComponentType, CreateComponentGroupType, FilterEnum } from '@/packages/index.d' 1 import { CreateComponentType, CreateComponentGroupType, FilterEnum } from '@/packages/index.d'
2 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' 2 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
3 -import { SyncEnum } from '@/enums/editPageEnum'  
4 import { 3 import {
5 RequestHttpEnum, 4 RequestHttpEnum,
6 RequestContentTypeEnum, 5 RequestContentTypeEnum,
@@ -13,37 +12,6 @@ import { @@ -13,37 +12,6 @@ import {
13 import { PreviewScaleEnum } from '@/enums/styleEnum' 12 import { PreviewScaleEnum } from '@/enums/styleEnum'
14 import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index' 13 import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
15 14
16 -// THINGS_KIT  
17 -// 项目数据枚举  
18 -export enum ProjectInfoEnum {  
19 - // ID  
20 - PROJECT_ID = 'projectId',  
21 - // 名称  
22 - PROJECT_NAME = 'projectName',  
23 - // 描述  
24 - REMARKS = 'remarks',  
25 - // 缩略图  
26 - THUMBNAIL = 'thumbnail',  
27 - // 是否公开发布  
28 - RELEASE = 'release',  
29 - // organizationId  
30 - ORGANIZATIONID = 'organizationId',  
31 - //保存给服务端的state  
32 - STATE_DATA = 'state',  
33 -}  
34 -// THINGS_KIT  
35 -// 项目数据  
36 -export type ProjectInfoType = {  
37 - [ProjectInfoEnum.PROJECT_ID]: string  
38 - [ProjectInfoEnum.PROJECT_NAME]: string  
39 - [ProjectInfoEnum.REMARKS]: string  
40 - [ProjectInfoEnum.THUMBNAIL]: string  
41 - [ProjectInfoEnum.RELEASE]: boolean  
42 - [ProjectInfoEnum.RELEASE]: boolean  
43 - [ProjectInfoEnum.ORGANIZATIONID]: string  
44 - [ProjectInfoEnum.STATE_DATA]: number  
45 -}  
46 -  
47 // 编辑画布属性 15 // 编辑画布属性
48 export enum EditCanvasTypeEnum { 16 export enum EditCanvasTypeEnum {
49 EDIT_LAYOUT_DOM = 'editLayoutDom', 17 EDIT_LAYOUT_DOM = 'editLayoutDom',
@@ -52,8 +20,6 @@ export enum EditCanvasTypeEnum { @@ -52,8 +20,6 @@ export enum EditCanvasTypeEnum {
52 SCALE = 'scale', 20 SCALE = 'scale',
53 USER_SCALE = 'userScale', 21 USER_SCALE = 'userScale',
54 LOCK_SCALE = 'lockScale', 22 LOCK_SCALE = 'lockScale',
55 - SAVE_STATUS = 'saveStatus',  
56 -  
57 IS_CREATE = 'isCreate', 23 IS_CREATE = 'isCreate',
58 IS_DRAG = 'isDrag', 24 IS_DRAG = 'isDrag',
59 IS_SELECT = 'isSelect' 25 IS_SELECT = 'isSelect'
@@ -74,8 +40,6 @@ export type EditCanvasType = { @@ -74,8 +40,6 @@ export type EditCanvasType = {
74 [EditCanvasTypeEnum.LOCK_SCALE]: boolean 40 [EditCanvasTypeEnum.LOCK_SCALE]: boolean
75 // 初始化创建 41 // 初始化创建
76 [EditCanvasTypeEnum.IS_CREATE]: boolean 42 [EditCanvasTypeEnum.IS_CREATE]: boolean
77 - // 保存状态  
78 - [EditCanvasTypeEnum.SAVE_STATUS]: SyncEnum  
79 // 拖拽中 43 // 拖拽中
80 [EditCanvasTypeEnum.IS_DRAG]: boolean 44 [EditCanvasTypeEnum.IS_DRAG]: boolean
81 // 框选中 45 // 框选中
@@ -169,8 +133,6 @@ export type RecordChartType = { @@ -169,8 +133,6 @@ export type RecordChartType = {
169 133
170 // Store 枚举 134 // Store 枚举
171 export enum ChartEditStoreEnum { 135 export enum ChartEditStoreEnum {
172 - PROJECT_INFO = 'projectInfo',  
173 -  
174 EDIT_RANGE = 'editRange', 136 EDIT_RANGE = 'editRange',
175 EDIT_CANVAS = 'editCanvas', 137 EDIT_CANVAS = 'editCanvas',
176 RIGHT_MENU_SHOW = 'rightMenuShow', 138 RIGHT_MENU_SHOW = 'rightMenuShow',
@@ -193,8 +155,8 @@ type RequestPublicConfigType = { @@ -193,8 +155,8 @@ type RequestPublicConfigType = {
193 155
194 // 数据池项类型 156 // 数据池项类型
195 export type RequestDataPondItemType = { 157 export type RequestDataPondItemType = {
196 - dataPondId: string  
197 - dataPondName: string 158 + dataPondId: string,
  159 + dataPondName: string,
198 dataPondRequestConfig: RequestConfigType 160 dataPondRequestConfig: RequestConfigType
199 } 161 }
200 162
@@ -232,7 +194,6 @@ export interface RequestConfigType extends RequestPublicConfigType { @@ -232,7 +194,6 @@ export interface RequestConfigType extends RequestPublicConfigType {
232 194
233 // Store 类型 195 // Store 类型
234 export interface ChartEditStoreType { 196 export interface ChartEditStoreType {
235 - [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType  
236 [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType 197 [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
237 [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType 198 [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
238 [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean 199 [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
@@ -15,10 +15,9 @@ import { @@ -15,10 +15,9 @@ import {
15 HistoryItemType, 15 HistoryItemType,
16 HistoryTargetTypeEnum 16 HistoryTargetTypeEnum
17 } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' 17 } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
18 -import { MenuEnum,SyncEnum } from '@/enums/editPageEnum' 18 +import { MenuEnum } from '@/enums/editPageEnum'
19 import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils' 19 import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils'
20 import { 20 import {
21 - ProjectInfoType,  
22 ChartEditStoreEnum, 21 ChartEditStoreEnum,
23 ChartEditStorage, 22 ChartEditStorage,
24 ChartEditStoreType, 23 ChartEditStoreType,
@@ -37,19 +36,6 @@ const settingStore = useSettingStore() @@ -37,19 +36,6 @@ const settingStore = useSettingStore()
37 export const useChartEditStore = defineStore({ 36 export const useChartEditStore = defineStore({
38 id: 'useChartEditStore', 37 id: 'useChartEditStore',
39 state: (): ChartEditStoreType => ({ 38 state: (): ChartEditStoreType => ({
40 - // THINGS_KIT  
41 - // 项目数据  
42 - projectInfo: {  
43 - projectId: '',  
44 - projectName: '',  
45 - remarks: '',  
46 - thumbnail: '',  
47 - release: false,  
48 - // THINGS_KIT  
49 - //保存缩图需要的组织id  
50 - organizationId: '',  
51 - state: 0  
52 - },  
53 // 画布属性 39 // 画布属性
54 editCanvas: { 40 editCanvas: {
55 // 编辑区域 Dom 41 // 编辑区域 Dom
@@ -68,10 +54,7 @@ export const useChartEditStore = defineStore({ @@ -68,10 +54,7 @@ export const useChartEditStore = defineStore({
68 // 拖拽中 54 // 拖拽中
69 isDrag: false, 55 isDrag: false,
70 // 框选中 56 // 框选中
71 - isSelect: false,  
72 - // THINGS_KIT  
73 - // 同步中  
74 - saveStatus: SyncEnum.PENDING 57 + isSelect: false
75 }, 58 },
76 // 右键菜单 59 // 右键菜单
77 rightMenuShow: false, 60 rightMenuShow: false,
@@ -151,10 +134,6 @@ export const useChartEditStore = defineStore({ @@ -151,10 +134,6 @@ export const useChartEditStore = defineStore({
151 componentList: [] 134 componentList: []
152 }), 135 }),
153 getters: { 136 getters: {
154 - // THINGS_KIT  
155 - getProjectInfo(): ProjectInfoType {  
156 - return this.projectInfo  
157 - },  
158 getMousePosition(): MousePositionType { 137 getMousePosition(): MousePositionType {
159 return this.mousePosition 138 return this.mousePosition
160 }, 139 },
@@ -189,11 +168,6 @@ export const useChartEditStore = defineStore({ @@ -189,11 +168,6 @@ export const useChartEditStore = defineStore({
189 } 168 }
190 }, 169 },
191 actions: { 170 actions: {
192 - // THINGS_KIT  
193 - // * 设置 peojectInfo 数据项  
194 - setProjectInfo<T extends keyof ProjectInfoType, K extends ProjectInfoType[T]>(key: T, value: K) {  
195 - this.projectInfo[key] = value  
196 - },  
197 // * 设置 editCanvas 数据项 171 // * 设置 editCanvas 数据项
198 setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) { 172 setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
199 this.editCanvas[key] = value 173 this.editCanvas[key] = value
@@ -211,7 +185,7 @@ export const useChartEditStore = defineStore({ @@ -211,7 +185,7 @@ export const useChartEditStore = defineStore({
211 this.targetChart.hoverId = hoverId 185 this.targetChart.hoverId = hoverId
212 }, 186 },
213 // * 设置目标数据 select 187 // * 设置目标数据 select
214 - setTargetSelectChart(selectId?: string | string[], push: boolean = false) { 188 + setTargetSelectChart(selectId?: string | string[], push = false) {
215 // 重复选中 189 // 重复选中
216 if (this.targetChart.selectId.find((e: string) => e === selectId)) return 190 if (this.targetChart.selectId.find((e: string) => e === selectId)) return
217 191
@@ -528,15 +502,15 @@ export const useChartEditStore = defineStore({ @@ -528,15 +502,15 @@ export const useChartEditStore = defineStore({
528 e.id = getUUID() 502 e.id = getUUID()
529 // 分组列表生成新 id 503 // 分组列表生成新 id
530 if (e.isGroup) { 504 if (e.isGroup) {
531 - ;(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => { 505 + (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
532 item.id = getUUID() 506 item.id = getUUID()
533 }) 507 })
534 } 508 }
535 - 509 +
536 return e 510 return e
537 } 511 }
538 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT 512 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
539 - const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [recordCharts.charts] 513 + const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ]
540 // 多项 514 // 多项
541 targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => { 515 targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
542 this.addComponentList(parseHandle(e), undefined, true) 516 this.addComponentList(parseHandle(e), undefined, true)
@@ -564,7 +538,7 @@ export const useChartEditStore = defineStore({ @@ -564,7 +538,7 @@ export const useChartEditStore = defineStore({
564 this.setTargetSelectChart() 538 this.setTargetSelectChart()
565 539
566 // 重新选中 540 // 重新选中
567 - let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType> 541 + const historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
568 if (isArray(historyData)) { 542 if (isArray(historyData)) {
569 // 选中目标元素，支持多个 543 // 选中目标元素，支持多个
570 historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => { 544 historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
@@ -861,7 +835,7 @@ export const useChartEditStore = defineStore({ @@ -861,7 +835,7 @@ export const useChartEditStore = defineStore({
861 } 835 }
862 }, 836 },
863 // * 锁定 837 // * 锁定
864 - setLock(status: boolean = true, isHistory: boolean = true) { 838 + setLock(status = true, isHistory = true) {
865 try { 839 try {
866 // 暂不支持多选 840 // 暂不支持多选
867 if (this.getTargetChart.selectId.length > 1) return 841 if (this.getTargetChart.selectId.length > 1) return
@@ -890,11 +864,11 @@ export const useChartEditStore = defineStore({ @@ -890,11 +864,11 @@ export const useChartEditStore = defineStore({
890 } 864 }
891 }, 865 },
892 // * 解除锁定 866 // * 解除锁定
893 - setUnLock(isHistory: boolean = true) { 867 + setUnLock(isHistory = true) {
894 this.setLock(false, isHistory) 868 this.setLock(false, isHistory)
895 }, 869 },
896 // * 隐藏 870 // * 隐藏
897 - setHide(status: boolean = true, isHistory: boolean = true) { 871 + setHide(status = true, isHistory = true) {
898 try { 872 try {
899 // 暂不支持多选 873 // 暂不支持多选
900 if (this.getTargetChart.selectId.length > 1) return 874 if (this.getTargetChart.selectId.length > 1) return
@@ -923,7 +897,7 @@ export const useChartEditStore = defineStore({ @@ -923,7 +897,7 @@ export const useChartEditStore = defineStore({
923 } 897 }
924 }, 898 },
925 // * 显示 899 // * 显示
926 - setShow(isHistory: boolean = true) { 900 + setShow(isHistory = true) {
927 this.setHide(false, isHistory) 901 this.setHide(false, isHistory)
928 }, 902 },
929 // ---------------- 903 // ----------------
@@ -3,6 +3,8 @@ @@ -3,6 +3,8 @@
3 @import "./animation.scss"; 3 @import "./animation.scss";
4 @import "./mixins/mixins.scss"; 4 @import "./mixins/mixins.scss";
5 5
  6 +// THINGS_KIT 增加scss mixins
  7 +@import "../external/mixins.scss";
6 // 过度 8 // 过度
7 .go-transition { 9 .go-transition {
8 transition: all 0.4s; 10 transition: all 0.4s;
  1 +$tkNamespace: things-kit;
  2 +@mixin thingsKit($block) {
  3 + $B: $tkNamespace + '-' + $block;
  4 + .#{$B} {
  5 + @content;
  6 + }
  7 +}
  8 +
  9 +@mixin goId($block) {
  10 + $B: $tkNamespace + '-' + $block;
  11 + ##{$B} {
  12 + @content;
  13 + }
  14 +}
@@ -4,8 +4,8 @@ import { AsyncLoading, AsyncSkeletonLoading } from '@/components/GoLoading' @@ -4,8 +4,8 @@ import { AsyncLoading, AsyncSkeletonLoading } from '@/components/GoLoading'
4 /** 4 /**
5 * * 动态注册组件 5 * * 动态注册组件
6 */ 6 */
7 -export const componentInstall = <T> (key:string, node: T) => {  
8 - if(!window['$vue'].component(key) && node) { 7 +export const componentInstall = <T>(key: string, node: T) => {
  8 + if (!window['$vue'].component(key) && node) {
9 window['$vue'].component(key, node) 9 window['$vue'].component(key, node)
10 } 10 }
11 } 11 }
@@ -21,7 +21,7 @@ export const loadAsyncComponent = (loader: AsyncComponentLoader<any>) => @@ -21,7 +21,7 @@ export const loadAsyncComponent = (loader: AsyncComponentLoader<any>) =>
21 loadingComponent: AsyncLoading, 21 loadingComponent: AsyncLoading,
22 delay: 20, 22 delay: 20,
23 }) 23 })
24 - 24 +
25 export const loadSkeletonAsyncComponent = (loader: AsyncComponentLoader<any>) => 25 export const loadSkeletonAsyncComponent = (loader: AsyncComponentLoader<any>) =>
26 defineAsyncComponent({ 26 defineAsyncComponent({
27 loader, 27 loader,
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 class="go-content-charts-item-box" 5 class="go-content-charts-item-box"
6 :class="[chartMode === ChartModeEnum.DOUBLE ? 'double' : 'single']" 6 :class="[chartMode === ChartModeEnum.DOUBLE ? 'double' : 'single']"
7 > 7 >
8 - <!-- 每一项组件的渲染 --> 8 + <!-- 每一项组件的渲染 -->
9 <div 9 <div
10 class="item-box" 10 class="item-box"
11 v-for="(item, index) in menuOptions" 11 v-for="(item, index) in menuOptions"
@@ -13,7 +13,7 @@ @@ -13,7 +13,7 @@
13 draggable 13 draggable
14 @dragstart="dragStartHandle($event, item)" 14 @dragstart="dragStartHandle($event, item)"
15 @dragend="dragendHandle" 15 @dragend="dragendHandle"
16 - @dblclick="dblclickHandle(item)" 16 + @dblclick="dblclickHandle(item)"
17 > 17 >
18 <div class="list-header"> 18 <div class="list-header">
19 <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn> 19 <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 @@ -44,10 +44,13 @@ import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore
44 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' 44 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
45 import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils' 45 import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils'
46 import { DragKeyEnum } from '@/enums/editPageEnum' 46 import { DragKeyEnum } from '@/enums/editPageEnum'
47 -import { createComponent } from '@/packages' 47 +// import { createComponent } from '@/packages'
48 import { ConfigType, CreateComponentType } from '@/packages/index.d' 48 import { ConfigType, CreateComponentType } from '@/packages/index.d'
49 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index' 49 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
50 50
  51 +// THINGS_KIT 覆盖原始创建组件逻辑
  52 +import { createComponent } from '@/packages/external/override'
  53 +
51 import omit from 'lodash/omit' 54 import omit from 'lodash/omit'
52 55
53 const chartEditStore = useChartEditStore() 56 const chartEditStore = useChartEditStore()
1 -import { PackagesCategoryEnum, PackagesCategoryName } from "@/packages/components/external/types" 1 +import { EPackagesCategoryEnum, EPackagesCategoryName } from "@/packages/components/external/types"
2 import { icon } from '@/plugins' 2 import { icon } from '@/plugins'
3 import { renderIcon } from "@/utils" 3 import { renderIcon } from "@/utils"
4 4
@@ -6,8 +6,8 @@ const { GraphicalDataFlowIcon } = icon.carbon @@ -6,8 +6,8 @@ const { GraphicalDataFlowIcon } = icon.carbon
6 6
7 export function useInjectAside(packagesListObj: Recordable) { 7 export function useInjectAside(packagesListObj: Recordable) {
8 8
9 - packagesListObj[PackagesCategoryEnum.COMPOSES] = { 9 + packagesListObj[EPackagesCategoryEnum.COMPOSES] = {
10 icon: renderIcon(GraphicalDataFlowIcon), 10 icon: renderIcon(GraphicalDataFlowIcon),
11 - label: PackagesCategoryName.COMPOSES 11 + label: EPackagesCategoryName.COMPOSES
12 } 12 }
13 } 13 }
@@ -6,10 +6,17 @@ import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/pack @@ -6,10 +6,17 @@ import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/pack
6 // 图表 6 // 图表
7 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore' 7 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
8 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' 8 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
  9 +// THINGS_KIT 追加组件库进入aside 侧边栏
9 import { useInjectAside } from './external/useInjectAside' 10 import { useInjectAside } from './external/useInjectAside'
10 // 图标 11 // 图标
11 const { BarChartIcon } = icon.ionicons5 12 const { BarChartIcon } = icon.ionicons5
12 -const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon 13 +const {
  14 + TableSplitIcon,
  15 + RoadmapIcon,
  16 + SpellCheckIcon,
  17 + GraphicalDataFlowIcon,
  18 +} = icon.carbon
  19 +
13 20
14 // 图表 21 // 图表
15 export type MenuOptionsType = { 22 export type MenuOptionsType = {
@@ -25,23 +32,22 @@ const menuOptions: MenuOptionsType[] = [] @@ -25,23 +32,22 @@ const menuOptions: MenuOptionsType[] = []
25 const packagesListObj = { 32 const packagesListObj = {
26 [PackagesCategoryEnum.CHARTS]: { 33 [PackagesCategoryEnum.CHARTS]: {
27 icon: renderIcon(RoadmapIcon), 34 icon: renderIcon(RoadmapIcon),
28 - label: PackagesCategoryName.CHARTS 35 + label: PackagesCategoryName.CHARTS,
29 }, 36 },
30 [PackagesCategoryEnum.INFORMATIONS]: { 37 [PackagesCategoryEnum.INFORMATIONS]: {
31 icon: renderIcon(SpellCheckIcon), 38 icon: renderIcon(SpellCheckIcon),
32 - label: PackagesCategoryName.INFORMATIONS 39 + label: PackagesCategoryName.INFORMATIONS,
33 }, 40 },
34 [PackagesCategoryEnum.TABLES]: { 41 [PackagesCategoryEnum.TABLES]: {
35 icon: renderIcon(TableSplitIcon), 42 icon: renderIcon(TableSplitIcon),
36 - label: PackagesCategoryName.TABLES 43 + label: PackagesCategoryName.TABLES,
37 }, 44 },
38 [PackagesCategoryEnum.DECORATES]: { 45 [PackagesCategoryEnum.DECORATES]: {
39 icon: renderIcon(GraphicalDataFlowIcon), 46 icon: renderIcon(GraphicalDataFlowIcon),
40 - label: PackagesCategoryName.DECORATES  
41 - } 47 + label: PackagesCategoryName.DECORATES,
  48 + },
42 } 49 }
43 -  
44 -// THINGS_KIT 50 +// THINGS_KIT 追加组件库进入aside 侧边栏
45 useInjectAside(packagesListObj as any) 51 useInjectAside(packagesListObj as any)
46 52
47 // 处理列表 53 // 处理列表
@@ -54,7 +60,7 @@ const handlePackagesList = () => { @@ -54,7 +60,7 @@ const handlePackagesList = () => {
54 // @ts-ignore 60 // @ts-ignore
55 label: packagesListObj[val].label, 61 label: packagesListObj[val].label,
56 // @ts-ignore 62 // @ts-ignore
57 - list: getPackagesList[val] 63 + list: getPackagesList[val],
58 }) 64 })
59 } 65 }
60 } 66 }
@@ -79,4 +85,12 @@ const clickItemHandle = (key: string, item: any) => { @@ -79,4 +85,12 @@ const clickItemHandle = (key: string, item: any) => {
79 beforeSelect = key 85 beforeSelect = key
80 } 86 }
81 87
82 -export { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions } 88 +export {
  89 + getCharts,
  90 + BarChartIcon,
  91 + themeColor,
  92 + selectOptions,
  93 + selectValue,
  94 + clickItemHandle,
  95 + menuOptions,
  96 +}
@@ -55,4 +55,4 @@ const useSyncUpdateHandle = () => { @@ -55,4 +55,4 @@ const useSyncUpdateHandle = () => {
55 export const useSyncUpdate = () => { 55 export const useSyncUpdate = () => {
56 const routerParamsInfo = useRoute() 56 const routerParamsInfo = useRoute()
57 watch(() => routerParamsInfo.name, useSyncUpdateHandle(), { immediate: true }) 57 watch(() => routerParamsInfo.name, useSyncUpdateHandle(), { immediate: true })
58 -}  
  58 +}
1 <template> 1 <template>
2 <!-- <edit-rule></edit-rule> --> 2 <!-- <edit-rule></edit-rule> -->
3 - <content-box  
4 - id="go-chart-edit-layout"  
5 - :flex="true"  
6 - :showTop="false"  
7 - :showBottom="true"  
8 - :depth="1"  
9 - :xScroll="true"  
10 - :disabledScroll="true"  
11 - @mousedown="mousedownHandleUnStop"  
12 - @drop="dragHandle"  
13 - @dragover="dragoverHandle"  
14 - @dragenter="dragoverHandle"  
15 - > 3 + <content-box id="go-chart-edit-layout" :flex="true" :showTop="false" :showBottom="true" :depth="1" :xScroll="true"
  4 + :disabledScroll="true" @mousedown="mousedownHandleUnStop" @drop="dragHandle" @dragover="dragoverHandle"
  5 + @dragenter="dragoverHandle">
16 <edit-rule> 6 <edit-rule>
17 <!-- 画布主体 --> 7 <!-- 画布主体 -->
18 <div id="go-chart-edit-content" @contextmenu="handleContextMenu"> 8 <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
19 <!-- 展示 --> 9 <!-- 展示 -->
20 <edit-range> 10 <edit-range>
21 <!-- 滤镜预览 --> 11 <!-- 滤镜预览 -->
22 - <div  
23 - :style="{  
24 - ...getFilterStyle(chartEditStore.getEditCanvasConfig),  
25 - ...rangeStyle  
26 - }"  
27 - > 12 + <div :style="{
  13 + ...getFilterStyle(chartEditStore.getEditCanvasConfig),
  14 + ...rangeStyle
  15 + }">
28 <!-- 图表 --> 16 <!-- 图表 -->
29 <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id"> 17 <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
30 <!-- 分组 --> 18 <!-- 分组 -->
31 - <edit-group  
32 - v-if="item.isGroup"  
33 - :groupData="(item as CreateComponentGroupType)"  
34 - :groupIndex="index"  
35 - ></edit-group> 19 + <edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)"
  20 + :groupIndex="index"></edit-group>
36 21
37 <!-- 单组件 --> 22 <!-- 单组件 -->
38 - <edit-shape-box  
39 - v-else  
40 - :data-id="item.id"  
41 - :index="index"  
42 - :style="{ 23 + <edit-shape-box v-else :data-id="item.id" :index="index" :style="{
43 ...useComponentStyle(item.attr, index), 24 ...useComponentStyle(item.attr, index),
44 ...getBlendModeStyle(item.styles) as any 25 ...getBlendModeStyle(item.styles) as any
45 - }"  
46 - :item="item"  
47 - @click="mouseClickHandle($event, item)"  
48 - @mousedown="mousedownHandle($event, item)"  
49 - @mouseenter="mouseenterHandle($event, item)"  
50 - @mouseleave="mouseleaveHandle($event, item)"  
51 - @contextmenu="handleContextMenu($event, item, optionsHandle)"  
52 - >  
53 - <component  
54 - class="edit-content-chart"  
55 - :class="animationsClass(item.styles.animations)"  
56 - :is="item.chartConfig.chartKey"  
57 - :chartConfig="item"  
58 - :themeSetting="themeSetting"  
59 - :themeColor="themeColor"  
60 - :style="{ 26 + }" :item="item" @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)"
  27 + @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)"
  28 + @contextmenu="handleContextMenu($event, item, optionsHandle)">
  29 + <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
  30 + :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
  31 + :themeColor="themeColor" :style="{
61 ...useSizeStyle(item.attr), 32 ...useSizeStyle(item.attr),
62 ...getFilterStyle(item.styles), 33 ...getFilterStyle(item.styles),
63 ...getTransformStyle(item.styles) 34 ...getTransformStyle(item.styles)
64 - }"  
65 - ></component> 35 + }"></component>
66 </edit-shape-box> 36 </edit-shape-box>
67 </div> 37 </div>
68 </div> 38 </div>
@@ -83,45 +53,46 @@ @@ -83,45 +53,46 @@
83 </template> 53 </template>
84 54
85 <script lang="ts" setup> 55 <script lang="ts" setup>
86 -import {onMounted, computed} from 'vue'  
87 -import {chartColors} from '@/settings/chartThemes/index'  
88 -import {MenuEnum} from '@/enums/editPageEnum'  
89 -import {CreateComponentType, CreateComponentGroupType} from '@/packages/index.d'  
90 -import {animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle} from '@/utils'  
91 -import {useContextMenu} from '@/views/chart/hooks/useContextMenu.hook'  
92 -import {MenuOptionsItemType} from '@/views/chart/hooks/useContextMenu.hook.d'  
93 -import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'  
94 -  
95 -import {useLayout} from './hooks/useLayout.hook'  
96 -import {useAddKeyboard} from '../hooks/useKeyboard.hook'  
97 -import {dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle} from './hooks/useDrag.hook'  
98 -import {useComponentStyle, useSizeStyle} from './hooks/useStyle.hook'  
99 -import {useSync} from '../hooks/useSync.hook'  
100 -  
101 -import {ContentBox} from '../ContentBox/index'  
102 -import {EditGroup} from './components/EditGroup'  
103 -import {EditRange} from './components/EditRange'  
104 -import {EditRule} from './components/EditRule'  
105 -import {EditBottom} from './components/EditBottom'  
106 -import {EditShapeBox} from './components/EditShapeBox'  
107 -import {EditTools} from './components/EditTools' 56 +import { onMounted, computed } from 'vue'
  57 +import { chartColors } from '@/settings/chartThemes/index'
  58 +import { MenuEnum } from '@/enums/editPageEnum'
  59 +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
  60 +import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
  61 +import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
  62 +import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
  63 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  64 +
  65 +import { useLayout } from './hooks/useLayout.hook'
  66 +import { useAddKeyboard } from '../hooks/useKeyboard.hook'
  67 +import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
  68 +import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
  69 +// THINGS_KIT 引入同步数据源hook
  70 +import { useSyncRemote } from '../hooks/external/useRemote.hook'
  71 +
  72 +import { ContentBox } from '../ContentBox/index'
  73 +import { EditGroup } from './components/EditGroup'
  74 +import { EditRange } from './components/EditRange'
  75 +import { EditRule } from './components/EditRule'
  76 +import { EditBottom } from './components/EditBottom'
  77 +import { EditShapeBox } from './components/EditShapeBox'
  78 +import { EditTools } from './components/EditTools'
108 79
109 const chartEditStore = useChartEditStore() 80 const chartEditStore = useChartEditStore()
110 -const {handleContextMenu} = useContextMenu()  
111 -const {dataSyncFetch, intervalDataSyncUpdate} = useSync() 81 +const { handleContextMenu } = useContextMenu()
  82 +const { dataSyncFetch, intervalDataSyncUpdate } = useSyncRemote()
112 83
113 84
114 // 布局处理 85 // 布局处理
115 useLayout() 86 useLayout()
116 87
117 // 点击事件 88 // 点击事件
118 -const {mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle} = useMouseHandle() 89 +const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
119 90
120 // 右键事件 91 // 右键事件
121 const optionsHandle = ( 92 const optionsHandle = (
122 - targetList: MenuOptionsItemType[],  
123 - allList: MenuOptionsItemType[],  
124 - targetInstance: CreateComponentType 93 + targetList: MenuOptionsItemType[],
  94 + allList: MenuOptionsItemType[],
  95 + targetInstance: CreateComponentType
125 ) => { 96 ) => {
126 // 多选处理 97 // 多选处理
127 if (chartEditStore.getTargetChart.selectId.length > 1) { 98 if (chartEditStore.getTargetChart.selectId.length > 1) {
@@ -167,8 +138,8 @@ const rangeStyle = computed(() => { @@ -167,8 +138,8 @@ const rangeStyle = computed(() => {
167 const backgroundColor = background ? background : undefined 138 const backgroundColor = background ? background : undefined
168 139
169 const computedBackground = selectColor 140 const computedBackground = selectColor
170 - ? {background: backgroundColor}  
171 - : {background: `url(${backgroundImage}) no-repeat center center / cover !important`} 141 + ? { background: backgroundColor }
  142 + : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }
172 143
173 // @ts-ignore 144 // @ts-ignore
174 return { 145 return {
@@ -59,14 +59,15 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore @@ -59,14 +59,15 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
59 59
60 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' 60 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
61 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' 61 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
62 -import { useSync } from '../../hooks/useSync.hook' 62 +// THINGS_KIT 新增同步逻辑
  63 +import { useSyncRemote } from '../../hooks/external/useRemote.hook'
63 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' 64 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
64 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' 65 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
65 66
66 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5 67 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
67 const { SaveIcon } = icon.carbon 68 const { SaveIcon } = icon.carbon
68 const { setItem } = useChartLayoutStore() 69 const { setItem } = useChartLayoutStore()
69 -const { dataSyncUpdate } = useSync() 70 +const { dataSyncUpdate } = useSyncRemote()
70 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore()) 71 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
71 const chartEditStore = useChartEditStore() 72 const chartEditStore = useChartEditStore()
72 const chartHistoryStore = useChartHistoryStore() 73 const chartHistoryStore = useChartHistoryStore()
@@ -3,34 +3,22 @@ @@ -3,34 +3,22 @@
3 <n-icon size="20" :depth="3"> 3 <n-icon size="20" :depth="3">
4 <fish-icon></fish-icon> 4 <fish-icon></fish-icon>
5 </n-icon> 5 </n-icon>
6 - <!-- THINGS_KIT -->  
7 <n-text @click="handleFocus"> 6 <n-text @click="handleFocus">
8 工作空间 - 7 工作空间 -
9 - <n-button secondary round size="tiny"> 8 + <n-button v-show="!focus" secondary round size="tiny">
10 <span class="title"> 9 <span class="title">
11 {{ comTitle }} 10 {{ comTitle }}
12 </span> 11 </span>
13 </n-button> 12 </n-button>
14 </n-text> 13 </n-text>
15 14
16 - <!-- <n-input  
17 - v-show="focus"  
18 - ref="inputInstRef"  
19 - size="small"  
20 - type="text"  
21 - maxlength="16"  
22 - show-count  
23 - round  
24 - placeholder="请输入项目名称"  
25 - v-model:value.trim="title"  
26 - @keyup.enter="handleBlur"  
27 - @blur="handleBlur"  
28 - ></n-input> --> 15 + <n-input v-show="focus" ref="inputInstRef" size="small" type="text" maxlength="16" show-count round
  16 + placeholder="请输入项目名称" v-model:value.trim="title" @keyup.enter="handleBlur" @blur="handleBlur"></n-input>
29 </n-space> 17 </n-space>
30 </template> 18 </template>
31 19
32 <script setup lang="ts"> 20 <script setup lang="ts">
33 -import { ref, nextTick, computed,watchEffect } from 'vue' 21 +import { ref, nextTick, computed } from 'vue'
34 import { fetchRouteParamsLocation, setTitle } from '@/utils' 22 import { fetchRouteParamsLocation, setTitle } from '@/utils'
35 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 23 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
36 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d' 24 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -42,12 +30,17 @@ const chartEditStore = useChartEditStore() @@ -42,12 +30,17 @@ const chartEditStore = useChartEditStore()
42 const focus = ref<boolean>(false) 30 const focus = ref<boolean>(false)
43 const inputInstRef = ref(null) 31 const inputInstRef = ref(null)
44 32
45 -// THINGS_KIT  
46 -const title = ref<string>(fetchRouteParamsLocation()) 33 +// 根据路由 id 参数获取项目信息
  34 +const fetchProhectInfoById = () => {
  35 + const id = fetchRouteParamsLocation()
  36 + if (id.length) {
  37 + return id[0]
  38 + }
  39 + return ''
  40 +}
  41 +
  42 +const title = ref<string>(fetchProhectInfoById() || '')
47 43
48 -watchEffect(() => {  
49 - title.value = chartEditStore.getProjectInfo.projectName || ''  
50 -})  
51 const comTitle = computed(() => { 44 const comTitle = computed(() => {
52 // eslint-disable-next-line vue/no-side-effects-in-computed-properties 45 // eslint-disable-next-line vue/no-side-effects-in-computed-properties
53 title.value = title.value.replace(/\s/g, '') 46 title.value = title.value.replace(/\s/g, '')
  1 +import { fetchRouteParamsLocation, JSONStringify, JSONParse, base64toFile } from '@/utils'
  2 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  3 +import { ProjectInfoEnum } from '@/store/external/module/projectInfo.d'
  4 +import { onUnmounted } from 'vue'
  5 +import { saveInterval } from '@/settings/designSetting'
  6 +import throttle from 'lodash/throttle'
  7 +import html2canvas from 'html2canvas'
  8 +import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
  9 +// 画布枚举
  10 +import { SyncEnum } from '@/enums/external/editPageEnum'
  11 +import { useProjectInfoStore } from '@/store/external/module/projectInfo'
  12 +import { useSync } from '../useSync.hook'
  13 +
  14 +
  15 +
  16 +// 请求处理
  17 +export const useSyncRemote = () => {
  18 + const chartEditStore = useChartEditStore()
  19 + const projectInfoStore = useProjectInfoStore()
  20 + const { updateComponent } = useSync()
  21 +
  22 + /**
  23 + * * 赋值全局数据
  24 + * @param projectData 项目数据
  25 + * @returns
  26 + */
  27 + const updateStoreInfo = (projectData: {
  28 + dataViewId: string
  29 + dataViewName: string
  30 + indexImage: string
  31 + id: string
  32 + state: number
  33 + organizationId: string
  34 + dataViewContent: { id: string; content: string; enabled: boolean }
  35 + }) => {
  36 + const { dataViewId, dataViewName, indexImage, state, dataViewContent, organizationId } = projectData
  37 + // ID
  38 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_ID, dataViewId)
  39 + // 名称
  40 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_NAME, dataViewName)
  41 + // 描述
  42 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.REMARKS, dataViewContent?.id)
  43 + // 缩略图
  44 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.THUMBNAIL, indexImage)
  45 + // 发布
  46 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.RELEASE, state === 1)
  47 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.ORGANIZATION_ID, organizationId)
  48 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.STATE_DATA, state)
  49 + }
  50 +
  51 + // * 数据获取
  52 + const dataSyncFetch = async () => {
  53 + // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复
  54 + // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复
  55 + chartEditStore.componentList = []
  56 + projectInfoStore.setSaveStatus(SyncEnum.START)
  57 + try {
  58 + const id = fetchRouteParamsLocation()
  59 + const res = await getDataView(id)
  60 + updateStoreInfo(res)
  61 + // 更新全局数据
  62 + await updateComponent(JSONParse(res.dataViewContent.content))
  63 +
  64 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_ID, res.dataViewId)
  65 + setTimeout(() => {
  66 + projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
  67 + }, 1000)
  68 +
  69 + } catch (error) {
  70 + projectInfoStore.setSaveStatus(SyncEnum.FAILURE)
  71 + }
  72 + }
  73 +
  74 + // 数据保存
  75 + const dataSyncUpdate = throttle(async (updateImg = true) => {
  76 + if (!fetchRouteParamsLocation()) return
  77 + const projectId = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
  78 + const id = projectInfoStore.getProjectInfo[ProjectInfoEnum.REMARKS]
  79 + const dataViewName = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
  80 + const organizationId = projectInfoStore.getProjectInfo[ProjectInfoEnum.ORGANIZATION_ID]
  81 + const state = projectInfoStore.getProjectInfo[ProjectInfoEnum.STATE_DATA]
  82 +
  83 + if (projectId === null || projectId === '') {
  84 + window['$message'].error('数据初未始化成功,请刷新页面！')
  85 + return
  86 + }
  87 + projectInfoStore.setSaveStatus(SyncEnum.START)
  88 + // 异常处理：缩略图上传失败不影响JSON的保存
  89 + try {
  90 + if (updateImg) {
  91 + // 获取缩略图片
  92 + const range = document.querySelector('.go-edit-range') as HTMLElement
  93 + // 生成图片
  94 + const canvasImage: HTMLCanvasElement = await html2canvas(range, {
  95 + backgroundColor: null,
  96 + allowTaint: true,
  97 + useCORS: true
  98 + })
  99 +
  100 + // 上传预览图
  101 + const uploadParams = new FormData()
  102 + uploadParams.append(
  103 + 'file',
  104 + base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
  105 + )
  106 + const uploadRes = await uploadFile(uploadParams)
  107 +
  108 + // 保存预览图
  109 + if (uploadRes) {
  110 + await saveDataViewList({
  111 + name: dataViewName,
  112 + organizationId,
  113 + state,
  114 + id: fetchRouteParamsLocation(),
  115 + thumbnail: `${uploadRes.fileStaticUri}`
  116 + })
  117 + }
  118 + }
  119 + } catch (e) {
  120 + console.log(e)
  121 + }
  122 + // 保存数据
  123 + const saveContent = {
  124 + dataViewContent: {
  125 + id,
  126 + content: JSONStringify(chartEditStore.getStorageInfo || {})
  127 + },
  128 + dataViewName,
  129 + dataViewId: projectId,
  130 + projectId
  131 + }
  132 + await contentUpdateApi(saveContent)
  133 + window['$message'].success('保存成功！')
  134 + // 成功状态
  135 + setTimeout(() => {
  136 + projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
  137 + }, 1000)
  138 + return
  139 + // 失败状态
  140 + // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
  141 + }, 3000)
  142 +
  143 + // * 定时处理
  144 + const intervalDataSyncUpdate = () => {
  145 + // 定时获取数据
  146 + const syncTiming = setInterval(() => {
  147 + dataSyncUpdate()
  148 + }, saveInterval * 1000)
  149 +
  150 + // 销毁
  151 + onUnmounted(() => {
  152 + clearInterval(syncTiming)
  153 + })
  154 + }
  155 + return {
  156 + dataSyncFetch,
  157 + dataSyncUpdate,
  158 + intervalDataSyncUpdate
  159 + }
  160 +}
1 -// THINGS_KIT  
2 -import { getUUID, fetchRouteParamsLocation, JSONStringify, JSONParse, base64toFile } from '@/utils' 1 +import { getUUID } from '@/utils'
3 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
4 -import {  
5 - EditCanvasTypeEnum,  
6 - ChartEditStoreEnum,  
7 - ChartEditStorage,  
8 - ProjectInfoEnum  
9 -} from '@/store/modules/chartEditStore/chartEditStore.d' 3 +import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
10 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' 4 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
11 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' 5 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
12 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' 6 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
13 -import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index' 7 +import { fetchChartComponent, fetchConfigComponent } from '@/packages/index'
  8 +
  9 +// THINGS_KIT 重写createComponent 创建组件的逻辑
  10 +// import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
  11 +import { createComponent } from '@/packages/external/override'
  12 +
14 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' 13 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
15 import { BaseEvent, EventLife } from '@/enums/eventEnum' 14 import { BaseEvent, EventLife } from '@/enums/eventEnum'
16 import { PublicGroupConfigClass } from '@/packages/public/publicConfig' 15 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
17 import merge from 'lodash/merge' 16 import merge from 'lodash/merge'
18 -import { onUnmounted } from 'vue'  
19 -import { saveInterval } from '@/settings/designSetting'  
20 -import throttle from 'lodash/throttle'  
21 -// THINGS_KIT  
22 -import html2canvas from 'html2canvas'  
23 -import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'  
24 -// 画布枚举  
25 -import { SyncEnum } from '@/enums/editPageEnum'  
26 17
27 /** 18 /**
28 * * 画布-版本升级对旧数据无法兼容的补丁 19 * * 画布-版本升级对旧数据无法兼容的补丁
@@ -130,7 +121,7 @@ export const useSync = () => { @@ -130,7 +121,7 @@ export const useSync = () => {
130 } 121 }
131 122
132 if (e.isGroup) { 123 if (e.isGroup) {
133 - ;(e as CreateComponentGroupType).groupList.forEach(groupItem => { 124 + (e as CreateComponentGroupType).groupList.forEach(groupItem => {
134 intComponent(groupItem) 125 intComponent(groupItem)
135 }) 126 })
136 } else { 127 } else {
@@ -144,7 +135,7 @@ export const useSync = () => { @@ -144,7 +135,7 @@ export const useSync = () => {
144 callBack?: (componentInstance: CreateComponentType) => void 135 callBack?: (componentInstance: CreateComponentType) => void
145 ) => { 136 ) => {
146 // 补充 class 上的方法 137 // 补充 class 上的方法
147 - let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig) 138 + const newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
148 if (callBack) { 139 if (callBack) {
149 if (changeId) { 140 if (changeId) {
150 callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() })) 141 callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
@@ -169,10 +160,10 @@ export const useSync = () => { @@ -169,10 +160,10 @@ export const useSync = () => {
169 // 组件 160 // 组件
170 if (key === ChartEditStoreEnum.COMPONENT_LIST) { 161 if (key === ChartEditStoreEnum.COMPONENT_LIST) {
171 let loadIndex = 0 162 let loadIndex = 0
172 - const listLength = projectData[key].length 163 + const listLength = projectData[key].length;
173 for (const comItem of projectData[key]) { 164 for (const comItem of projectData[key]) {
174 // 设置加载数量 165 // 设置加载数量
175 - let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString()) 166 + const percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
176 chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage) 167 chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
177 // 判断类型 168 // 判断类型
178 if (comItem.isGroup) { 169 if (comItem.isGroup) {
@@ -209,148 +200,8 @@ export const useSync = () => { @@ -209,148 +200,8 @@ export const useSync = () => {
209 // 清除数量 200 // 清除数量
210 chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0) 201 chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
211 } 202 }
212 - // THINGS_KIT  
213 - /**  
214 - * * 赋值全局数据  
215 - * @param projectData 项目数据  
216 - * @returns  
217 - */  
218 - const updateStoreInfo = (projectData: {  
219 - dataViewId: string  
220 - dataViewName: string  
221 - indexImage: string  
222 - id: string  
223 - state: number  
224 - organizationId: string  
225 - dataViewContent: { id: string; content: string; enabled: boolean }  
226 - }) => {  
227 - const { dataViewId, dataViewName, indexImage, state, dataViewContent, organizationId } = projectData  
228 - // ID  
229 - chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, dataViewId)  
230 - // 名称  
231 - chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, dataViewName)  
232 - // 描述  
233 - chartEditStore.setProjectInfo(ProjectInfoEnum.REMARKS, dataViewContent?.id)  
234 - // 缩略图  
235 - chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)  
236 - // 发布  
237 - chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, state === 1)  
238 - chartEditStore.setProjectInfo(ProjectInfoEnum.ORGANIZATIONID, organizationId)  
239 - chartEditStore.setProjectInfo(ProjectInfoEnum.STATE_DATA, state)  
240 - }  
241 - // THINGS_KIT  
242 - // * 数据获取  
243 - const dataSyncFetch = async () => {  
244 - // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复  
245 - // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复  
246 - chartEditStore.componentList = []  
247 - chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)  
248 - try {  
249 - const id = fetchRouteParamsLocation()  
250 - const res = await getDataView(id)  
251 - updateStoreInfo(res)  
252 - // 更新全局数据  
253 - await updateComponent(JSONParse(res.dataViewContent.content))  
254 -  
255 - chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, res.dataViewId)  
256 - setTimeout(() => {  
257 - chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)  
258 - }, 1000)  
259 - // return  
260 - // }  
261 - // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)  
262 - } catch (error) {  
263 - chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)  
264 - // httpErrorHandle()  
265 - }  
266 - }  
267 - // THINGS_KIT  
268 - // 数据保存  
269 - const dataSyncUpdate = throttle(async (updateImg = true) => {  
270 - if (!fetchRouteParamsLocation()) return  
271 - const projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]  
272 - const id = chartEditStore.getProjectInfo[ProjectInfoEnum.REMARKS]  
273 - const dataViewName = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]  
274 - const organizationId = chartEditStore.getProjectInfo[ProjectInfoEnum.ORGANIZATIONID]  
275 - const state = chartEditStore.getProjectInfo[ProjectInfoEnum.STATE_DATA]  
276 203
277 - if (projectId === null || projectId === '') {  
278 - window['$message'].error('数据初未始化成功,请刷新页面！')  
279 - return  
280 - }  
281 - chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)  
282 - // 异常处理：缩略图上传失败不影响JSON的保存  
283 - try {  
284 - if (updateImg) {  
285 - // 获取缩略图片  
286 - const range = document.querySelector('.go-edit-range') as HTMLElement  
287 - // 生成图片  
288 - const canvasImage: HTMLCanvasElement = await html2canvas(range, {  
289 - backgroundColor: null,  
290 - allowTaint: true,  
291 - useCORS: true  
292 - })  
293 -  
294 - // 上传预览图  
295 - const uploadParams = new FormData()  
296 - uploadParams.append(  
297 - 'file',  
298 - base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)  
299 - )  
300 - const uploadRes = await uploadFile(uploadParams)  
301 - console.log(uploadRes.fileStaticUri)  
302 - // 保存预览图  
303 - if (uploadRes) {  
304 - await saveDataViewList({  
305 - name: dataViewName,  
306 - organizationId,  
307 - state,  
308 - id: fetchRouteParamsLocation(),  
309 - thumbnail: `${uploadRes.fileStaticUri}`  
310 - })  
311 - }  
312 - }  
313 - } catch (e) {  
314 - console.log(e)  
315 - }  
316 - // 保存数据  
317 - const saveContent = {  
318 - dataViewContent: {  
319 - id,  
320 - content: JSONStringify(chartEditStore.getStorageInfo || {})  
321 - },  
322 - dataViewName,  
323 - dataViewId: projectId,  
324 - projectId  
325 - }  
326 - await contentUpdateApi(saveContent)  
327 - window['$message'].success('保存成功！')  
328 - // 成功状态  
329 - setTimeout(() => {  
330 - chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)  
331 - }, 1000)  
332 - return  
333 - // 失败状态  
334 - // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)  
335 - }, 3000)  
336 - // THINGS_KIT  
337 - // * 定时处理  
338 - const intervalDataSyncUpdate = () => {  
339 - // 定时获取数据  
340 - const syncTiming = setInterval(() => {  
341 - dataSyncUpdate()  
342 - }, saveInterval * 1000)  
343 -  
344 - // 销毁  
345 - onUnmounted(() => {  
346 - clearInterval(syncTiming)  
347 - })  
348 - }  
349 return { 204 return {
350 - updateComponent,  
351 - // THINGS_KIT  
352 - dataSyncFetch,  
353 - dataSyncUpdate,  
354 - intervalDataSyncUpdate 205 + updateComponent
355 } 206 }
356 } 207 }
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 lineNumbers: 'on', 26 lineNumbers: 'on',
27 minimap: { enabled: true } 27 minimap: { enabled: true }
28 }" 28 }"
29 - /> 29 + />
30 </n-layout-content> 30 </n-layout-content>
31 </n-layout> 31 </n-layout>
32 </div> 32 </div>
@@ -38,22 +38,16 @@ import { MonacoEditor } from '@/components/Pages/MonacoEditor' @@ -38,22 +38,16 @@ import { MonacoEditor } from '@/components/Pages/MonacoEditor'
38 import { SavePageEnum } from '@/enums/editPageEnum' 38 import { SavePageEnum } from '@/enums/editPageEnum'
39 import { getSessionStorageInfo } from '../preview/utils' 39 import { getSessionStorageInfo } from '../preview/utils'
40 import type { ChartEditStorageType } from '../preview/index.d' 40 import type { ChartEditStorageType } from '../preview/index.d'
41 -import { setSessionStorage, JSONStringify, JSONParse, setTitle, fetchRouteParamsLocation } from '@/utils' 41 +import { setSessionStorage, JSONStringify, JSONParse, setTitle } from '@/utils'
42 import { StorageEnum } from '@/enums/storageEnum' 42 import { StorageEnum } from '@/enums/storageEnum'
43 import { icon } from '@/plugins' 43 import { icon } from '@/plugins'
44 -// THINGS_KIT  
45 -import { useSync } from '@/views/chart/hooks/useSync.hook'  
46 -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'  
47 -import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'  
48 -// THINGS_KIT  
49 -const chartEditStore = useChartEditStore()  
50 -const { dataSyncUpdate } = useSync() 44 +
51 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5 45 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
52 const showOpenFilePicker: Function = (window as any).showOpenFilePicker 46 const showOpenFilePicker: Function = (window as any).showOpenFilePicker
53 const content = ref('') 47 const content = ref('')
54 // 从sessionStorage 获取数据 48 // 从sessionStorage 获取数据
55 async function getDataBySession() { 49 async function getDataBySession() {
56 - const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType 50 + const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
57 setTitle(`编辑-${localStorageInfo.editCanvasConfig.projectName}`) 51 setTitle(`编辑-${localStorageInfo.editCanvasConfig.projectName}`)
58 content.value = JSONStringify(localStorageInfo) 52 content.value = JSONStringify(localStorageInfo)
59 } 53 }
@@ -90,7 +84,7 @@ document.addEventListener('keydown', function (e) { @@ -90,7 +84,7 @@ document.addEventListener('keydown', function (e) {
90 } 84 }
91 }) 85 })
92 addEventListener('blur', updateSync) 86 addEventListener('blur', updateSync)
93 -// THINGS_KIT 87 +
94 // 同步更新 88 // 同步更新
95 async function updateSync() { 89 async function updateSync() {
96 if (!window.opener) { 90 if (!window.opener) {
@@ -100,11 +94,6 @@ async function updateSync() { @@ -100,11 +94,6 @@ async function updateSync() {
100 const detail = JSONParse(content.value) 94 const detail = JSONParse(content.value)
101 delete detail.id 95 delete detail.id
102 // 保持id不变 96 // 保持id不变
103 - // 带后端版本额外处理请求  
104 - if (dataSyncUpdate) {  
105 - chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())  
106 - await dataSyncUpdate(false) // JSON界面保存不上传缩略图  
107 - }  
108 window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail })) 97 window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
109 } catch (e) { 98 } catch (e) {
110 window['$message'].error('内容格式有误') 99 window['$message'].error('内容格式有误')