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

src/settings/systemSetting.ts

@@ -7,4 +7,4 @@ export const asideAllCollapsed = true
 export const hidePackageOneCategory = true
 
 // 切换语言是否进行路由刷新
-export const changeLangReload = true
+export const changeLangReload = false

src/utils/utils.ts

@@ -2,12 +2,13 @@ import { h } from 'vue'
 import { NIcon } from 'naive-ui'
 import screenfull from 'screenfull'
 import throttle from 'lodash/throttle'
+import Image_404 from '../assets/images/exception/image-404.png'
 
 /**
  * * 生成一个不重复的ID
  * @param { Number } randomLength
  */
-export const getUUID = (randomLength = 10) =>{
+export const getUUID = (randomLength = 10) => {
   return Number(
     Math.random().toString().substr(2, randomLength) + Date.now()
   ).toString(36)
@@ -32,14 +33,15 @@ export const renderLang = (lang: string, set = {}, tag = 'span') => {
 }
 
 /**
+ * ! 编译会报错，暂不使用
  * * 处理 vite 中无法使用 require 的问题，utils 文件为根路径
  * @param path
  * @param name
  * @returns url
  */
-export const requireUrl = (path: string, name: string) => {
-  return new URL(`${path}/${name}`, import.meta.url).href
-}
+// export const requireUrl = (path: string, name: string) => {
+//   return new URL(`${path}/${name}`, import.meta.url).href
+// }
 
 /**
  * * 获取错误处理图片，默认 404 图
@@ -47,12 +49,8 @@ export const requireUrl = (path: string, name: string) => {
  * @param name
  * @returns url
  */
-export const requireFallbackImg = (path?: string, name?: string) => {
-  const url = path && name
-  return new URL(
-    url ? `${path}/${name}` : '../assets/images/exception/image-404.png',
-    import.meta.url
-  ).href
+export const requireFallbackImg = () => {
+  return Image_404
 }
 
 /**
@@ -78,11 +76,14 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
 
 /**
  * * 设置元素属性
- * @param HTMLElement 元素 
+ * @param HTMLElement 元素
  * @param key 键名
  * @param value 键值
  */
-export const setDomAttribute = <K extends keyof CSSStyleDeclaration, V extends CSSStyleDeclaration[K]>(
+export const setDomAttribute = <
+  K extends keyof CSSStyleDeclaration,
+  V extends CSSStyleDeclaration[K]
+>(
   HTMLElement: HTMLElement,
   key: K,
   value: V
@@ -100,28 +101,28 @@ export const isMac = () => {
   return /macintosh|mac os x/i.test(navigator.userAgent)
 }
 
-/** 
+/**
  * * file转url
-*/
-export const fileToUrl = (file:File): string => {
-  const Url = URL || window.URL || window.webkitURL;
-  const ImageUrl = Url.createObjectURL(file);
+ */
+export const fileToUrl = (file: File): string => {
+  const Url = URL || window.URL || window.webkitURL
+  const ImageUrl = Url.createObjectURL(file)
   return ImageUrl
-};
+}
 
-/** 
+/**
  * * file转base64
-*/
-export const fileTobase64 = (file:File, callback: Function) => {
-  let reader = new FileReader();
-  reader.readAsDataURL(file);
+ */
+export const fileTobase64 = (file: File, callback: Function) => {
+  let reader = new FileReader()
+  reader.readAsDataURL(file)
   reader.onload = function (e: ProgressEvent<FileReader>) {
-    if(e.target) {
-      let base64 = e.target.result;
+    if (e.target) {
+      let base64 = e.target.result
       callback(base64)
     }
-  };
-};
+  }
+}
 
 /**
  * * 挂载监听

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[]