fix: 修改类型错误，调整页面细节，新增拖拽上传图片

src/components/LoadingComponent/Skeleton.vue

@@ -1,5 +1,5 @@
 <template>
   <div>
-     <Skeleton repeat="3" :show="true"/>
+     <Skeleton :repeat="3" :show="true"/>
   </div>
 </template>

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: {

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,

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
   // 图表主题颜色

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<{
+const menuOptions = shallowReactive<{
-  [T: string]: any
+  key: string
-}>([])
+  icon: ReturnType<typeof renderIcon>
+  label: ReturnType<typeof renderLang>
+  list: PackagesType
+}[]>([])
 
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {

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: -webkit-fill-available;
-      width: 326px;
+      height: $updloadHeight;
-      height: 193px;
-      margin-bottom: -7px;
       border-radius: 5px;
     }
     .upload-img {
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 326px;
       img {
         height: 150px;
       }

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 }" />