fix: 修改图片引入打包报错的问题

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -48,7 +48,7 @@
         :min="10"
         :max="200"
         :step="5"
-        :format-tooltip="v => `${v}%`"
+        :format-tooltip="sliderFormatTooltip"
         :disabled="lockScale"
         :marks="sliderMaks"
         @update:value="sliderHandle"
@@ -124,6 +124,9 @@ const lockHandle = () => {
 // 拖动
 const sliderValue = ref(100)
 
+// 拖动格式化
+const sliderFormatTooltip =  (v: string) => `${v}%`
+
 // 拖动处理
 const sliderHandle = (v: number) => {
   chartEditStore.setScale(v / 100)

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -30,7 +30,7 @@ const rangeStyle = computed(() => {
   const background = getEditCanvasConfig.value.background
   const backgroundImage = getEditCanvasConfig.value.backgroundImage
   const selectColor = getEditCanvasConfig.value.selectColor
-  const backgroundColor = background ? background : null
+  const backgroundColor = background ? background : undefined
   const computedBackground = selectColor
     ? { background: backgroundColor }
     : { background: `url(${backgroundImage}) no-repeat center/100% !important` }
@@ -51,7 +51,6 @@ const rangeModelStyle = computed(() => {
   position: relative;
   border: 1px solid;
   border-radius: 15px;
-  background: url('@/assets/images/canvas/pageBg.png');
   @include fetch-theme('box-shadow');
   @include filter-border-color('hover-border-color');
   @include fetch-theme-custom('border-color', 'background-color4');

src/views/login/index.vue

@@ -118,7 +118,6 @@
 import { reactive, ref, onMounted } from 'vue'
 import {
   routerTurnByName,
-  requireUrl,
   cryptoEncode,
   setLocalStorage
 } from '@/utils'
@@ -199,7 +198,7 @@ const bgList = ref([
 
 // 处理url获取
 const getImageUrl = (name: string, folder: string) => {
-  return requireUrl(`../assets/images/${folder}/`, `${name}.png`)
+  return new URL(`../../assets/images/${folder}/${name}.png`, import.meta.url).href
 }
 
 // 打乱

src/views/project/items/components/Card/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-items-list-card">
+  <div v-if="cardData" class="go-items-list-card">
     <n-card hoverable size="small">
       <div class="list-content">
         <!-- 顶部按钮 -->
@@ -18,7 +18,7 @@
             height="200"
             preview-disabled
             :src="
-              requireUrl('../assets/images/project', 'moke-20211219181327.png')
+              requireUrl('project/moke-20211219181327.png')
             "
             :alt="cardData.title"
             :fallback-src="requireFallbackImg()"
@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, PropType } from 'vue'
-import { renderIcon, renderLang, requireUrl, requireFallbackImg } from '@/utils'
+import { renderIcon, renderLang,  requireFallbackImg } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn'
 import { Chartype } from '../../index.d'
@@ -99,12 +99,17 @@ const {
 } = icon.ionicons5
 
 const emit = defineEmits(['delete', 'resize', 'edit'])
-const t = window['$t']
 
 const props = defineProps({
   // todo 定义列表ITEN的 type
   cardData: Object as PropType<Chartype>
 })
+
+// 处理url获取
+const requireUrl = (name: string) => {
+  return new URL(`../../../../../assets/images/${name}`, import.meta.url).href
+}
+
 const fnBtnList = reactive([
   {
     label: renderLang('global.r_edit'),

src/views/project/items/components/List/hooks/useData.hook.ts

@@ -1,34 +1,39 @@
-import { ref, Ref } from 'vue'
+import { ref } from 'vue'
 import { goDialog } from '@/utils'
 import { DialogEnum } from '@/enums/pluginEnum'
-
+import { ChartList } from '../../../index.d'
 // 数据初始化
 export const useDataListInit = () => {
-  const list = ref<{id: number, title:string, release: boolean}[]>([
+  const list = ref<ChartList>([
     {
       id: 1,
       title: '物料1',
-      release: true
+      release: true,
+      label: '官方案例'
     },
     {
       id: 2,
       title: '物料2',
-      release: false
+      release: false,
+      label: '官方案例'
     },
     {
       id: 3,
       title: '物料3',
-      release: false
+      release: false,
+      label: '官方案例'
     },
     {
       id: 4,
       title: '物料4',
-      release: false
+      release: false,
+      label: '官方案例'
     },
     {
       id: 5,
       title: '物料5',
-      release: false
+      release: false,
+      label: '官方案例'
     }
   ])
 

src/views/project/items/components/List/hooks/useModal.hook.ts

@@ -1,10 +1,10 @@
 import { ref, Ref } from 'vue'
 import { ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath } from '@/utils'
+import { Chartype } from '../../../index.d'
 export const useModalDataInit = () => {
   const modalShow = ref<boolean>(false)
-  // TODO 补充 modalData 类型格式
-  const modalData = ref<object | null>(null)
+  const modalData = ref<Chartype | null>(null)
 
   // 关闭 modal
   const closeModal = () => {
@@ -13,15 +13,17 @@ export const useModalDataInit = () => {
   }
 
   // 打开 modal
-  const resizeHandle = (cardData: Ref<object | null>) => {
+  const resizeHandle = (cardData: Chartype) => {
+    if(!cardData) return
     modalShow.value = true
     modalData.value = cardData
   }
 
   // 打开 modal
-  const editHandle = (cardData: Ref<object | null>) => {
+  const editHandle = (cardData: Chartype) => {
+    if(!cardData) return
     const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href')
-    routerTurnByPath(path, [(<any>cardData).id], undefined, true)
+    routerTurnByPath(path, [cardData.id], undefined, true)
   }
 
   return {

src/views/project/items/components/List/index.vue

@@ -17,6 +17,7 @@
     </n-grid>
   </div>
   <ModalCard
+    v-if="modalData"
     v-model:modalShow="modalShow"
     :cardData="modalData"
     @close="closeModal"

src/views/project/items/components/ModalCard/index.vue

@@ -27,7 +27,7 @@
         <div class="list-content-img">
           <img
             :src="
-              requireUrl('../assets/images/project', 'moke-20211219181327.png')
+              requireUrl('/project/moke-20211219181327.png')
             "
             :alt="cardData?.title"
           />
@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { renderIcon, renderLang, requireUrl } from '@/utils'
+import { renderIcon, renderLang } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn'
 
@@ -89,6 +89,11 @@ const props = defineProps({
   cardData: Object
 })
 
+// 处理url获取
+const requireUrl = (name: string) => {
+  return new URL(`../../../../../assets/images/${name}`, import.meta.url).href
+}
+
 const fnBtnList = reactive([
   {
     label: renderLang('global.r_edit'),

src/views/project/items/index.d.ts

@@ -1,11 +1,8 @@
 export type Chartype = {
   id: number | string
   title: string // 标题
-  lableId: string | number
   label: string // 标签
-  release: number // 0未发布 | 1已发布
-  icon: any
-  ['string']: string
+  release: boolean // 0未发布 | 1已发布
 }
 
 export type ChartList = Chartype[]