From d689698ddd34e21b1f1eb2c1fbacca46524b25dc Mon Sep 17 00:00:00 2001
From: mtruning <1262327911@qq.com>
Date: Sat, 12 Feb 2022 12:16:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=EF=BC=8C=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoadingComponent/Skeleton.vue  |  2 +-
 .../Charts/Bars/BarCommon/index.vue           |  1 -
 src/plugins/naive.ts                          |  6 ++++++
 .../chartEditStore/chartEditStore.d.ts        |  2 +-
 .../ContentCharts/hooks/useAside.hook.ts      | 13 ++++++++-----
 .../components/CanvasPage/index.vue           | 19 +++++++++++--------
 .../components/ListItem/index.vue             |  4 ++--
 7 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/LoadingComponent/Skeleton.vue b/src/components/LoadingComponent/Skeleton.vue
index fd56b243..dfe881b8 100644
--- a/src/components/LoadingComponent/Skeleton.vue
+++ b/src/components/LoadingComponent/Skeleton.vue
@@ -1,5 +1,5 @@
 <template>
   <div>
-     <Skeleton repeat="3" :show="true"/>
+     <Skeleton :repeat="3" :show="true"/>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index b8f7cdb5..c6d55638 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -18,7 +18,6 @@ import config from './config'
 const props = defineProps({
   themeData: {
     type: Object || String,
-    default: 'dark',
     required: true
   },
   chartData: {
diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts
index 75889dfd..779456d3 100644
--- a/src/plugins/naive.ts
+++ b/src/plugins/naive.ts
@@ -74,6 +74,9 @@ import {
   NLoadingBarProvider,
   NModal,
   NUpload,
+  NUploadFileList,
+  NUploadTrigger,
+  NUploadDragger,
   NTree,
   NSpin,
   NTimePicker,
@@ -163,6 +166,9 @@ const naive = create({
     NLoadingBarProvider,
     NModal,
     NUpload,
+    NUploadFileList,
+    NUploadTrigger,
+    NUploadDragger,
     NTree,
     NSpin,
     NTimePicker,
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 4d9718d7..2a2f6c79 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -58,7 +58,7 @@ export interface EditCanvasConfigType {
   [EditCanvasConfigEnum.UN_OPACITY]: number
   // 背景色
   [EditCanvasConfigEnum.BACKGROUND]?: string
-  [EditCanvasConfigEnum.BACKGROUND_IAMGE]?: string | ArrayBuffer | null
+  [EditCanvasConfigEnum.BACKGROUND_IAMGE]?: string | null
   // 图表主题颜色
   [EditCanvasConfigEnum.CHART_THEME]: string
   // 图表主题颜色
diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
index eef2fd6d..2190f347 100644
--- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts
+++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
@@ -1,8 +1,8 @@
-import { reactive, ref } from 'vue'
+import { shallowReactive, ref } from 'vue'
 import { icon } from '@/plugins'
 import { renderLang, renderIcon } from '@/utils'
 import { themeColor, setItem, getCharts } from './useLayout.hook'
-import { PackagesCategoryEnum, PackagesCategoryName } from '@/packages/index.d'
+import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
 // 图表
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
@@ -17,9 +17,12 @@ const {
 
 // 图表
 const { getPackagesList } = usePackagesStore()
-const menuOptions = reactive<{
-  [T: string]: any
-}>([])
+const menuOptions = shallowReactive<{
+  key: string
+  icon: ReturnType<typeof renderIcon>
+  label: ReturnType<typeof renderLang>
+  list: PackagesType
+}[]>([])
 
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
index cbaed28a..4bc8c8f6 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
@@ -29,8 +29,8 @@
       >
         <n-upload-dragger>
           <img
-            class="upload-show"
             v-if="canvasConfig.backgroundImage"
+            class="upload-show"
             :src="canvasConfig.backgroundImage"
             alt="背景"
           />
@@ -95,7 +95,7 @@
     <n-divider />
 
     <!-- 主题选择和全局配置 -->
-    <n-tabs v-show="!selectTarget" class="tabs-box" size="small" type="segment">
+    <n-tabs class="tabs-box" size="small" type="segment">
       <n-tab-pane
         v-for="item in globalTabList"
         :key="item.key"
@@ -226,6 +226,8 @@ const customRequest = (options: UploadCustomRequestOptions) => {
 </script>
 
 <style lang="scss" scoped>
+$updloadWidth: 326px;
+$updloadHeight: 193px;
 @include go(canvas-setting) {
   padding-top: 20px;
   .upload-box {
@@ -233,22 +235,23 @@ const customRequest = (options: UploadCustomRequestOptions) => {
     margin-bottom: 20px;
     @include deep() {
       .n-card__content {
-        padding: 0px;
+        padding: 0;
         overflow: hidden;
       }
+      .n-upload-dragger {
+        padding: 5px;
+        width: $updloadWidth;
+      }
     }
     .upload-show {
-      display: block;
-      width: 326px;
-      height: 193px;
-      margin-bottom: -7px;
+      width: -webkit-fill-available;
+      height: $updloadHeight;
       border-radius: 5px;
     }
     .upload-img {
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 326px;
       img {
         height: 150px;
       }
diff --git a/src/views/chart/ContentLayers/components/ListItem/index.vue b/src/views/chart/ContentLayers/components/ListItem/index.vue
index 7ca7e401..64e94275 100644
--- a/src/views/chart/ContentLayers/components/ListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/ListItem/index.vue
@@ -12,9 +12,9 @@
         :fallback-src="requireFallbackImg()"
       />
       <n-ellipsis>
-        <b-text class="list-text">
+        <n-text class="list-text">
           {{ title }}
-        </b-text>
+        </n-text>
       </n-ellipsis>
     </div>
     <div :class="{ 'select-modal': select }" />