Merge branch 'ft' into 'main_dev'

perf(components/GoUserInfo): 覆盖external下的GoUserInfo等

See merge request yunteng/thingskit-view!32

+import GoUserInfo from './index.vue';
+
+export { GoUserInfo };

+<template>
+  <n-dropdown trigger="hover" @select="handleSelect" :show-arrow="true" :options="options">
+    <div class="user-info-box">
+      <person-icon v-if="fallback"></person-icon>
+      <n-avatar v-if="!fallback" round object-fit="cover" size="medium" :src="Person" @error="errorHandle"></n-avatar>
+    </div>
+  </n-dropdown>
+
+  <!-- 系统设置 model -->
+  <go-system-set v-model:modelShow="modelShow"></go-system-set>
+  <!-- 关于软件 model -->
+  <go-system-info v-model:modelShow="modelShowInfo"></go-system-info>
+</template>
+
+<script lang="ts" setup>
+import { h, ref, computed } from 'vue'
+import { NAvatar, NText } from 'naive-ui'
+import { renderIcon } from '@/utils'
+import { logout, renderLang } from '@/utils'
+import { GoSystemSet } from '@/components/GoSystemSet/index'
+import { GoSystemInfo } from '@/components/GoSystemInfo/index'
+import Person from './person.png'
+import { icon } from '@/plugins'
+import { useUserStore } from '@/store/external/modules/user'
+import { useSyncRemote } from '@/views/chart/hooks/external/useRemote.hook'
+const { ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
+
+const t = window['$t']
+
+const { dataSyncUpdate } = useSyncRemote()
+
+const modelShowInfo = ref(false)
+const modelShow = ref(false)
+
+// 是否失败
+const fallback = ref(false)
+
+// 用户图标渲染
+const renderUserInfo = () => {
+  const userStoreOverride = useUserStore()
+  const { username, avatar } = userStoreOverride.getUserInfo
+  console.log(userStoreOverride.getUserInfo)
+  return h(
+    'div',
+    {
+      style: 'display: flex; align-items: center; padding: 8px 12px;'
+    },
+    [
+      h(NAvatar, {
+        round: true,
+        style: 'margin-right: 12px;',
+        src: Person
+      }),
+      h('div', null, [
+        h('div', null, [
+          h('div', null, [
+            h('div', null, [h(NText, { depth: 2 }, { default: () => (!username ? 'ThingsKit' : username) })])
+          ])
+        ])
+      ])
+    ]
+  )
+}
+const options = ref([
+  {
+    label: '我的信息',
+    key: 'info',
+    type: 'render',
+    render: renderUserInfo
+  },
+  {
+    type: 'divider',
+    key: 'd1'
+  },
+  {
+    label: renderLang('global.sys_set'),
+    key: 'sysSet',
+    icon: renderIcon(SettingsSharpIcon)
+  },
+  // THINGS_KIT 隐藏关于软件
+  // {
+  //   label: renderLang('global.contact'),
+  //   key: 'contact',
+  //   icon: renderIcon(ChatboxEllipsesIcon)
+  // },
+  {
+    type: 'divider',
+    key: 'd3'
+  },
+  {
+    label: '关闭并退出',
+    key: 'closePage',
+    icon: renderIcon(LogOutOutlineIcon)
+  }
+  // {
+  //   label: renderLang('global.logout'),
+  //   key: 'logout',
+  //   icon: renderIcon(LogOutOutlineIcon)
+  // }
+])
+
+// 图片渲染错误
+const errorHandle = (e: Event) => {
+  fallback.value = true
+}
+
+// 系统设置
+const sysSetHandle = () => {
+  modelShow.value = true
+}
+
+// 系统设置
+const sysInfoHandle = () => {
+  modelShowInfo.value = true
+}
+
+// THINGS_KIT 修改退出登录
+const userStore = useUserStore()
+const handleSelect = (key: string) => {
+  switch (key) {
+    case 'contact':
+      sysInfoHandle()
+      break
+    case 'sysSet':
+      sysSetHandle()
+      break
+    case 'closePage':
+      handleClosePage()
+      break
+    case 'logout':
+      // THINGS_KIT 修改退出登录
+      userStore.logout(true)
+      // logout()
+      break
+  }
+}
+
+const handleClosePage = () => {
+  //先保存当前页面数据
+  dataSyncUpdate()
+  //兼容Firefox Chrome
+  var userAgent = navigator.userAgent
+  if (userAgent.indexOf('Firefox') != -1 || userAgent.indexOf('Chrome') != -1) {
+    window.location.href = 'about:blank'
+    window.close()
+  } else {
+    window.opener = null
+    window.open('', '_self')
+    window.close()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-info-box {
+  cursor: pointer;
+  transform: scale(0.7);
+}
+</style>

@@ -17,5 +17,10 @@
 </template>
 <script setup lang="ts">
 import { LayoutHeader } from '@/layout/components/LayoutHeader'
-import { GoUserInfo } from '@/components/GoUserInfo'
+/**
+ * THINGS_KIT 升级版本这里有冲突
+ * 源文件 '@/components/GoUserInfo'
+ * 修改后 '@/components/external/GoUserInfo'
+ */
+import { GoUserInfo } from '@/components/external/GoUserInfo'
 </script>

@@ -15,5 +15,5 @@ export const LeftCenterRightHeadAnimatConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     package: EPackagesCategoryEnum.COMPOSES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'decorates02.png',
+    image: 'decorates07.png',
 }

@@ -13,5 +13,5 @@ export const CameraConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: EPackagesCategoryEnum.COMPOSES,
   chartFrame: ChartFrameEnum.NAIVE_UI,
-  image: 'dateTime.png'
+  image: 'camera.png'
 }

@@ -13,5 +13,5 @@ export const Title1Config: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: EPackagesCategoryEnum.COMPOSES,
   chartFrame: ChartFrameEnum.NAIVE_UI,
-  image: 'dateTime.png'
+  image: 'title1.png'
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Title2Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '我是标题',
+  attribute: {
+    linearColors: ['#21649C', '#060F1E', '#2AFFFF', '#000000', '#ffcc33', '#ffcc33'],
+    fontSize: 20,
+    fontPos: {
+      x: 0,
+      y: 20
+    },
+    fontColor: '#2AFFFF'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Title2Config.key
+  public chartConfig = cloneDeep(Title2Config)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="配置" :expanded="true">
+    <SettingItemBox name="标题">
+      <SettingItem name="内容">
+        <n-input v-model:value="optionData.dataset" />
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="optionData.attribute.fontSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="x轴位置">
+        <n-input-number v-model:value="optionData.attribute.fontPos.x" />
+      </SettingItem>
+      <SettingItem name="y轴位置">
+        <n-input-number v-model:value="optionData.attribute.fontPos.y" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox
+      :name="`装饰颜色-${index + 1}`"
+      v-for="(item, index) in optionData.attribute.linearColors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.attribute.linearColors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Title2')
+export const Title2Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '小标题2',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: EPackagesCategoryEnum.COMPOSES,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'title2.png'
+}

+<template>
+  <div class="go-content-box">
+    <svg :width="w" :height="h" fill="none">
+      <defs xmlns="http://www.w3.org/2000/svg">
+        <linearGradient id="linear_title2_u" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
+        </linearGradient>
+        <linearGradient id="linear_title2_d" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.linearColors[4]" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <g opacity="1" transform="translate(0 0)  rotate(0 160 15)">
+        <path
+          id="矩形 title2_u"
+          fill-rule="evenodd"
+          fill="url(#linear_title2_u)"
+          transform="translate(0 0)  rotate(0 160 15)"
+          opacity="1"
+          :d="`M2.77,${h} L${w},${h} L${w},0 L${
+            w - 11.44
+          },0 C10.58,0 9.81,0.55 9.54,1.37 L0.88,27.37 C0.68,27.98 0.78,28.65 1.15,29.17 C1.53,29.69 2.13,30 2.77,30 Z `"
+        />
+        <path
+          id="矩形 title2_u"
+          style="stroke: url(#linear_title2_d); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
+          transform="translate(0 0)  rotate(0 160 15)"
+          :d="`M2.77,${h} L${w},${h} L${w},0 L11.44,0 C10.58,0 9.81,0.55 9.54,1.37 L0.88,27.37 C0.68,27.98 0.78,28.65 1.15,29.17 C1.53,29.69 2.13,30 2.77,30 Z `"
+        />
+        <g opacity="1" :transform="`translate(24 ${h / 2 - 26 / 2})  rotate(0 46 13)`">
+          <text>
+            <tspan
+              :x="attribute.fontPos.x"
+              :y="attribute.fontPos.y"
+              :font-size="attribute.fontSize"
+              line-height="0"
+              :fill="attribute.fontColor"
+              opacity="1"
+              font-family="YouSheBiaoTiHei"
+              letter-spacing="0"
+            >
+              {{ dataset }}
+            </tspan>
+          </text>
+        </g>
+        <path
+          id="矩形 title2_d"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[4] }"
+          :transform="`translate(9  ${h / 2 - 15 / 2})  rotate(0 3.5 7.5)`"
+          opacity="1"
+          d="M0,15L2,15L7,0L5,0L0,15Z "
+        />
+        <path
+          id="矩形 title2_d"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[5] }"
+          :transform="`translate(15 ${h / 2 - 15 / 2})  rotate(0 3.5 7.5)`"
+          opacity="1"
+          d="M0,15L2,15L7,0L5,0L0,15Z "
+        />
+      </g>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { dataset, attribute } = toRefs(props.chartConfig.option)
+
+const { w, h } = toRefs(props.chartConfig.attr)
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Title3Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '我是标题',
+  attribute: {
+    linearColors: [
+      '#21649C',
+      '#060F1E',
+      '#2AFFFF',
+      '#2AFFFF',
+      '#2AFFFF',
+      '#2AFFFF',
+      '#2affff',
+      '#16d9d9',
+      '#2affff',
+      '#2affff',
+      '#2affff',
+      '#2affff'
+    ],
+    fontSize: 20,
+    fontPos: {
+      x: 0,
+      y: 20
+    },
+    fontColor: '#2AFFFF'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Title3Config.key
+  public chartConfig = cloneDeep(Title3Config)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="配置" :expanded="true">
+    <SettingItemBox name="标题">
+      <SettingItem name="内容">
+        <n-input v-model:value="optionData.dataset" />
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="optionData.attribute.fontSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="x轴位置">
+        <n-input-number v-model:value="optionData.attribute.fontPos.x" />
+      </SettingItem>
+      <SettingItem name="y轴位置">
+        <n-input-number v-model:value="optionData.attribute.fontPos.y" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox
+      :name="`装饰颜色-${index + 1}`"
+      v-for="(item, index) in optionData.attribute.linearColors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.attribute.linearColors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Title3')
+export const Title3Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '小标题3',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: EPackagesCategoryEnum.COMPOSES,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'title3.png'
+}

+<template>
+  <div class="go-content-box">
+    <svg :width="w" :height="h" fill="none">
+      <defs>
+        <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
+        </linearGradient>
+        <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <g opacity="1" transform="translate(-6.249999273677531e-8 0.5)  rotate(0 160.00000003125 15.000000000000005)">
+        <path
+          id="矩形 16"
+          fill-rule="evenodd"
+          fill="url(#linear_0)"
+          transform="translate(6.249999895402425e-8 2)  rotate(0 160 13)"
+          opacity="1"
+          :d="`M0,${h - 5} L${w},${h - 5} L${w},0 L0,0 L0,${h - 5} Z`"
+        />
+        <g opacity="1" :transform="`translate(34.0000000625  ${h / 2 - 26 / 2})  rotate(0 46 13)`">
+          <text>
+            <tspan
+              :x="attribute.fontPos.x"
+              :y="attribute.fontPos.y"
+              :font-size="attribute.fontSize"
+              line-height="0"
+              :fill="attribute.fontColor"
+              opacity="1"
+              font-family="YouSheBiaoTiHei"
+              letter-spacing="0"
+            >
+              {{ dataset }}
+            </tspan>
+          </text>
+        </g>
+        <path
+          id="路径 5"
+          style="stroke: url(#linear_1); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
+          transform="translate(6.249999895402425e-8 30)  rotate(0 160 0)"
+          d="M0,0L320,0 "
+        />
+        <path
+          id="路径 5"
+          style="stroke: url(#linear_2); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
+          transform="translate(6.249999895402425e-8 0)  rotate(0 160 0)"
+          d="M0,0L320,0 "
+        />
+        <path
+          id="路径 5"
+          :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
+          transform="translate(0 0.0005)  rotate(0 2.000000062499999 0)"
+          d="M0,0L4,0 "
+        />
+        <path
+          id="路径 5"
+          :style="{ stroke: attribute.linearColors[11], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
+          :transform="`translate(0 ${h - 1})  rotate(0 2.000000062499999 0)`"
+          d="M0,0 L4,0 "
+        />
+        <g opacity="1" :transform="`translate(10.0000000625 ${h / 2 - 18 / 2})  rotate(0 8.598076211353316 9)`">
+          <path
+            id="三角形 1"
+            fill-rule="evenodd"
+            :style="{ fill: attribute.linearColors[6] }"
+            transform="translate(4 0)  rotate(0 6.598076211353316 4.5)"
+            opacity="1"
+            d="M2.8,9L13.2,9L0,0L2.8,9Z "
+          />
+          <path
+            id="三角形 1"
+            fill-rule="evenodd"
+            :style="{ fill: attribute.linearColors[7] }"
+            transform="translate(4 9)  rotate(0 6.598076211353316 4.5)"
+            opacity="1"
+            d="M13.2,0L2.8,0L0,9L13.2,0Z "
+          />
+          <path
+            id="圆形 7"
+            fill-rule="evenodd"
+            :style="{ fill: attribute.linearColors[8] }"
+            transform="translate(0 7)  rotate(0 2 2)"
+            opacity="1"
+            d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
+          />
+        </g>
+        <path
+          id="矩形 17"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[9] }"
+          transform="translate(6.249999895402425e-8 2)  rotate(0 0.5 13)"
+          opacity="1"
+          :d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`"
+        />
+      </g>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { dataset, attribute } = toRefs(props.chartConfig.option)
+
+const { w, h } = toRefs(props.chartConfig.attr)
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

-import { ButtonConfig } from './Button/index'
 import { Title1Config } from './Title1/index'
+import { Title2Config } from './Title2/index'
+import { Title3Config } from './Title3/index'
+import { ButtonConfig } from './Button/index'
 import { CameraConfig } from './Camera/index'
 
-export default [ButtonConfig, Title1Config, CameraConfig]
+export default [Title1Config, Title2Config, Title3Config, CameraConfig, ButtonConfig]

@@ -13,5 +13,5 @@ export const ClockConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.STATIC,
-  image: 'clock.png'
+  image: 'clock1.png'
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideImageConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 图片路径
+  dataset: '',
+  // 适应方式
+  fit: 'fill',
+  // 圆角
+  borderRadius: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideImageConfig.key
+  public chartConfig = cloneDeep(OverrideImageConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="上传图片" :alone="true">
+      <setting-item>
+        <n-card class="upload-box">
+          <n-upload
+            :show-file-list="false"
+            v-model:file-list="uploadFileListRef"
+            :customRequest="customRequest"
+            :onBeforeUpload="beforeUploadHandle"
+          >
+            <n-upload-dragger>
+              <img v-if="optionData.dataset" class="upload-show" :src="optionData.dataset" alt="背景" />
+              <div class="upload-img" v-show="!optionData.dataset">
+                <img src="@/assets/images/canvas/noImage.png" />
+                <n-text class="upload-desc" depth="3">
+                  图片需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
+                </n-text>
+              </div>
+            </n-upload-dragger>
+          </n-upload>
+        </n-card>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, nextTick } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { UploadCustomRequestOptions } from 'naive-ui'
+import { backgroundImageSize } from '@/settings/designSetting'
+import { fetchRouteParamsLocation } from '@/utils'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const uploadFileListRef = ref()
+
+// 上传图片前置处理
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  uploadFileListRef.value = []
+  const type = file.file.type
+  const size = file.file.size
+
+  if (size > 1024 * 1024 * backgroundImageSize) {
+    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
+    return false
+  }
+  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      // 修改名称
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('file', newNameFile)
+      const uploadRes = await uploadFile(uploadParams)
+      if (uploadRes) {
+        props.optionData.dataset = uploadRes?.fileStaticUri
+        window['$message'].success('添加图片成功！')
+      }
+    } else {
+      window['$message'].error('添加图片失败，请稍后重试！')
+    }
+  })
+}
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  }
+]
+</script>
+<style lang="scss" scoped>
+$uploadHeight: 193px;
+.upload-box {
+  cursor: pointer;
+  margin-bottom: 20px;
+  @include deep() {
+    .n-card__content {
+      padding: 0;
+      overflow: hidden;
+    }
+    .n-upload-dragger {
+      padding: 5px;
+    }
+  }
+  .upload-show {
+    width: -webkit-fill-available;
+    height: $uploadHeight;
+    border-radius: 5px;
+  }
+  .upload-img {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    img {
+      height: 150px;
+    }
+    .upload-desc {
+      padding: 10px 0;
+    }
+  }
+}
+</style>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideImage', true)
+
+export const OverrideImageConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义图片',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'photo.png'
+}

+<template>
+  <div :style="getStyle(borderRadius)">
+    <n-image
+      :object-fit="fit"
+      preview-disabled
+      :src="!option.dataset ? logo : option.dataset"
+      :fallback-src="requireErrorImg()"
+      :width="w"
+      :height="h"
+    ></n-image>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, shallowReactive, watch, toRefs } from 'vue'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import logo from '@/assets/logo.png'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: ''
+})
+
+const getStyle = (radius: number) => {
+  return {
+    borderRadius: `${radius}px`,
+    overflow: 'hidden'
+  }
+}
+
+// 编辑更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>

@@ -2,12 +2,14 @@ import { EPackagesCategoryEnum, EPackagesType } from '@/packages/components/exte
 import { ComposesList } from '@/packages/components/external/Composes'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
+import { OverrideImageConfig } from '@/packages/components/external/Informations/Mores/OverrideImage'
 
 export function useInjectLib(packagesList: EPackagesType) {
 
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
 
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig)
 }
 
 /**

+import HeaderLeftBtn from './index.vue'
+
+export { HeaderLeftBtn }

+<template>
+  <n-space class="header-left-btn" :size="25">
+    <n-button disabled size="small" quaternary @click="goHomeHandle()">
+      <template #icon>
+        <n-icon :depth="3">
+          <home-icon></home-icon>
+        </n-icon>
+      </template>
+    </n-button>
+    <n-space>
+      <!-- 模块展示按钮 -->
+      <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
+        <template #trigger>
+          <n-button size="small" ghost :type="styleHandle(item)" @click="clickHandle(item)">
+            <component :is="item.icon"></component>
+          </n-button>
+        </template>
+        <span>{{ item.title }}</span>
+      </n-tooltip>
+
+      <n-divider vertical />
+
+      <!-- 历史记录按钮 -->
+      <n-tooltip v-for="item in historyList" :key="item.key" placement="bottom" trigger="hover">
+        <template #trigger>
+          <n-button size="small" ghost type="primary" :disabled="!item.select" @click="clickHistoryHandle(item)">
+            <component :is="item.icon"></component>
+          </n-button>
+        </template>
+        <span>{{ item.title }}</span>
+      </n-tooltip>
+      <n-divider vertical />
+      <!-- 保存 -->
+      <n-tooltip placement="bottom" trigger="hover">
+        <template #trigger>
+          <div class="save-btn">
+            <n-button size="small" type="primary" ghost @click="dataSyncUpdate()">
+              <template #icon>
+                <n-icon>
+                  <Save />
+                </n-icon>
+              </template>
+            </n-button>
+          </div>
+        </template>
+        <span>保存</span>
+      </n-tooltip>
+    </n-space>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { toRefs, Ref, reactive, computed } from 'vue'
+import { renderIcon, goDialog, goHome } from '@/utils'
+import { icon } from '@/plugins'
+import { Save } from '@vicons/carbon'
+import { useRemoveKeyboard } from '../../../hooks/useKeyboard.hook'
+
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+// 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 { setItem } = useChartLayoutStore()
+const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
+const chartEditStore = useChartEditStore()
+const chartHistoryStore = useChartHistoryStore()
+const { dataSyncUpdate } = useSyncRemote()
+
+interface ItemType<T> {
+  key: T
+  select: Ref<boolean> | boolean
+  title: string
+  icon: any
+}
+
+const btnList = reactive<ItemType<ChartLayoutStoreEnum>[]>([
+  {
+    key: ChartLayoutStoreEnum.CHARTS,
+    select: getCharts,
+    title: '图表组件',
+    icon: renderIcon(BarChartIcon)
+  },
+  {
+    key: ChartLayoutStoreEnum.LAYERS,
+    select: getLayers,
+    title: '图层控制',
+    icon: renderIcon(LayersIcon)
+  },
+  {
+    key: ChartLayoutStoreEnum.DETAILS,
+    select: getDetails,
+    title: '详情设置',
+    icon: renderIcon(PrismIcon)
+  }
+])
+
+const isBackStack = computed(() => chartHistoryStore.getBackStack.length > 1)
+
+const isForwardStack = computed(() => chartHistoryStore.getForwardStack.length > 0)
+
+const historyList = reactive<ItemType<HistoryStackEnum>[]>([
+  {
+    key: HistoryStackEnum.BACK_STACK,
+    // 一定会有初始化画布
+    select: isBackStack,
+    title: '后退',
+    icon: renderIcon(ArrowBackIcon)
+  },
+  {
+    key: HistoryStackEnum.FORWARD_STACK,
+    select: isForwardStack,
+    title: '前进',
+    icon: renderIcon(ArrowForwardIcon)
+  }
+])
+
+
+// store 描述的是展示的值，所以和 ContentConfigurations 的 collapsed 是相反的
+const styleHandle = (item: ItemType<ChartLayoutStoreEnum>) => {
+  if (item.key === ChartLayoutStoreEnum.DETAILS) {
+    return item.select ? '' : 'primary'
+  }
+  return item.select ? 'primary' : ''
+}
+
+// 布局处理
+const clickHandle = (item: ItemType<ChartLayoutStoreEnum>) => {
+  setItem(item.key, !item.select)
+}
+
+// 历史记录处理
+const clickHistoryHandle = (item: ItemType<HistoryStackEnum>) => {
+  switch (item.key) {
+    case HistoryStackEnum.BACK_STACK:
+      chartEditStore.setBack()
+      break;
+    case HistoryStackEnum.FORWARD_STACK:
+      chartEditStore.setForward()
+      break;
+  }
+}
+
+// 返回首页
+const goHomeHandle = () => {
+  goDialog({
+    message: '返回将不会保存任何操作',
+    isMaskClosable: true,
+    onPositiveCallback: () => {
+      goHome()
+      useRemoveKeyboard()
+    }
+  })
+}
+</script>
+<style lang="scss" scoped>
+.header-left-btn {
+  margin-left: -37px;
+}
+</style>

+import HeaderRightBtn from './index.vue'
+
+export { HeaderRightBtn }

+<template>
+  <n-space class="go-mt-0">
+    <n-button v-for="item in comBtnList" :key="item.title" :type="item.type" ghost @click="item.event">
+      <template #icon>
+        <component :is="item.icon"></component>
+      </template>
+      <span>{{ item.title }}</span>
+    </n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { renderIcon, goDialog, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
+import { PreviewEnum } from '@/enums/pageEnum'
+import { StorageEnum } from '@/enums/storageEnum'
+import { useRoute } from 'vue-router'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { syncData } from '../../../ContentEdit/components/EditTools/hooks/useSyncUpdate.hook'
+import { icon } from '@/plugins'
+import { cloneDeep } from 'lodash'
+
+const { BrowsersOutlineIcon, SendIcon, AnalyticsIcon } = icon.ionicons5
+const chartEditStore = useChartEditStore()
+
+const routerParamsInfo = useRoute()
+
+// 预览
+const previewHandle = () => {
+  const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
+  if (!path) return
+  const { id } = routerParamsInfo.params
+  // id 标识
+  const previewId = typeof id === 'string' ? id : id[0]
+  const storageInfo = chartEditStore.getStorageInfo
+  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+
+  if (sessionStorageInfo?.length) {
+    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === previewId)
+    // 重复替换
+    if (repeateIndex !== -1) {
+      sessionStorageInfo.splice(repeateIndex, 1, { id: previewId, ...storageInfo })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    } else {
+      sessionStorageInfo.push({
+        id: previewId,
+        ...storageInfo
+      })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    }
+  } else {
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id: previewId, ...storageInfo }])
+  }
+  // 跳转
+  routerTurnByPath(path, [previewId], undefined, true)
+}
+
+// 发布
+const sendHandle = () => {
+  goDialog({
+    message: '想体验发布功能，请前往 master-fetch 分支查看: https://demo.mtruning.club/#/login',
+    positiveText: '了然',
+    closeNegativeText: true,
+    onPositiveCallback: () => {}
+  })
+}
+
+const btnList = [
+  {
+    select: true,
+    title: '同步内容',
+    type: 'primary',
+    icon: renderIcon(AnalyticsIcon),
+    event: syncData
+  },
+  {
+    select: true,
+    title: '预览',
+    icon: renderIcon(BrowsersOutlineIcon),
+    event: previewHandle
+  },
+  // {
+  //   select: true,
+  //   title: '发布',
+  //   icon: renderIcon(SendIcon),
+  //   event: sendHandle
+  // }
+]
+
+const comBtnList = computed(() => {
+  if (chartEditStore.getEditCanvas.isCodeEdit) {
+    return btnList
+  }
+  const cloneList = cloneDeep(btnList)
+  cloneList.shift()
+  return cloneList
+})
+</script>
+
+<style lang="scss" scoped>
+.align-center {
+  margin-top: -4px;
+}
+</style>

@@ -50,9 +50,13 @@ const chartEditStore = useChartEditStore()
 
 // 记录初始化
 chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)
-
-const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/index.vue'))
-const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/index.vue'))
+/**
+ * THINGS_KIT 升级版本这里有冲突
+ * 源文件 './ContentHeader/headerRightBtn/index.vue' ./ContentHeader/headerLeftBtn/index.vue'
+ * 修改后 './ContentHeader/headerRightBtn/external/index.vue' ./ContentHeader/headerLeftBtn/external/index.vue'
+ */
+const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/external/index.vue'))
+const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/external/index.vue'))
 const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle/index.vue'))
 const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
 const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))