feat(packages/external): 三维模型支持mtl材质和材质贴图上传显示

@@ -11,8 +11,6 @@ export const useChartInteract = (
   useChartEditStore: ChartEditStoreType,
   useChartEditStore: ChartEditStoreType,
   param: { [T: string]: any },
   param: { [T: string]: any },
   interactEventOn: string,
   interactEventOn: string,
-  target: string,
-  status: boolean
 ) => {
 ) => {
   const chartEditStore = useChartEditStore()
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
   const { interactEvents } = chartConfig.events

+<template>
+  <setting-item :name="fileSizeMsg">
+    <n-upload
+      :max="max"
+      :customRequest="customRequest"
+      :onBeforeUpload="beforeUploadHandle"
+      :default-file-list="fileList"
+      @change="handleUploadChange"
+    >
+      <n-button> 上传文件</n-button>
+    </n-upload>
+  </setting-item>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import { SettingItem } from '@/components/Pages/ChartItemSetting'
+import { uploadFile } from '@/api/external/contentSave/content'
+import type { UploadFileInfo } from 'naive-ui'
+import { UploadCustomRequestOptions } from 'naive-ui'
+
+const props = defineProps({
+  max: {
+    type: Number,
+    default: 1
+  },
+  fileSizeConst: {
+    type: Number,
+    default: 50
+  },
+  singleFileType: {
+    type: String,
+    default: 'mtl'
+  },
+  threeSupportFileFormat: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emits = defineEmits(['fileStaticUri'])
+
+const fileList = ref<UploadFileInfo[]>([])
+
+const fileSizeMsg = ref(`文件需小于 ${props.fileSizeConst}M；格式为${props.threeSupportFileFormat.join(',')}的文件`)
+
+const extname = (filename: string) => {
+  if (!filename || typeof filename != 'string') {
+    return false
+  }
+  let a = filename.split('').reverse().join('')
+  let b = a.substring(0, a.search(/\./)).split('').reverse().join('')
+  return b
+}
+
+// 上传图片前置处理
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  const type = extname(file.file.name) as string
+  const size = file.file.size
+  if (size / (1024 * 1024) > props.fileSizeConst) {
+    window['$message'].warning(`文件超出 ${props.fileSizeConst}M限制，请重新上传！`)
+    return false
+  }
+  if (!props.threeSupportFileFormat.includes(type)) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
+  fileList.value = []
+  emits('fileStaticUri', data.fileList as never as any)
+}
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      const uploadRes = await uploadFile(formData)
+      if (uploadRes) {
+        fileList.value.push({
+          id: -Math.random() + '',
+          name: uploadRes?.fileName,
+          status: 'finished',
+          url: uploadRes?.fileStaticUri
+        })
+        fileList.value = fileList.value.filter((item: UploadFileInfo) => {
+          return item.status === 'finished'
+        })
+        emits('fileStaticUri', fileList.value)
+        window['$message'].success('上传文件成功！')
+      }
+    } else {
+      window['$message'].error('上传文件失败，请稍后重试！')
+    }
+  })
+}
+</script>

@@ -6,7 +6,7 @@ import { chartInitConfig } from '@/settings/designSetting'
 
 
 export const option = {
 export const option = {
   //vue3dLoader支持数组或字符串，暂且绑定字符串，这个插件可以加载多个模型
   //vue3dLoader支持数组或字符串，暂且绑定字符串，这个插件可以加载多个模型
-  dataset: "",
+  dataset: '',
   backgroundColor: '', //场景背景色
   backgroundColor: '', //场景背景色
   backgroundAlpha: 0, //场景透明度
   backgroundAlpha: 0, //场景透明度
   enableDamping: false, //是否启用阻尼
   enableDamping: false, //是否启用阻尼
@@ -19,7 +19,9 @@ export const option = {
    */
    */
   outputEncoding: 'liner',
   outputEncoding: 'liner',
   clearScene: false, //是否清空场景内容
   clearScene: false, //是否清空场景内容
-  lights: [] //灯光，暂且没实现
+  lights: [], //灯光，暂且没实现
+  mtlPath: [], //.mtl材质路径，比如搭配obj使用
+  textureImage: [] //jpg/png 材质路径
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
 <template>
   <collapse-item name="三维配置" :expanded="true">
   <collapse-item name="三维配置" :expanded="true">
-    <setting-item-box name="文件上传" :alone="true">
-      <setting-item :name="fileSizeMsg">
-        <n-upload
-          :max="1"
-          :customRequest="customRequest"
-          :onBeforeUpload="beforeUploadHandle"
-          :default-file-list="defaultFileList"
-        >
-          <n-button> 上传文件</n-button>
-        </n-upload>
-      </setting-item>
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>提示</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <span class="help-span">{{ threeFileHelpMessgae }}</span>
+        </n-tooltip>
+      </template>
+      <FileUpload
+        :max="1"
+        :threeSupportFileFormat="threeSupportFileFormat"
+        :singleFileType="singleFileTypeNotMtl"
+        @fileStaticUri="handleFileStaticUri"
+      />
+    </setting-item-box>
+    <setting-item-box name="mtl材质文件上传">
+      <FileUpload :max="10" :threeSupportFileFormat="supportFileMtl" @fileStaticUri="handleFileMtlStaticUri" />
+    </setting-item-box>
+    <setting-item-box name="材质贴图上传">
+      <FileUpload
+        :max="10"
+        :threeSupportFileFormat="supportFileTextureImage"
+        @fileStaticUri="handleFileTextureImageStaticUri"
+      />
     </setting-item-box>
     </setting-item-box>
     <setting-item-box name="属性配置">
     <setting-item-box name="属性配置">
       <setting-item name="场景色(需要这种格式HEX #000000，否则失效)">
       <setting-item name="场景色(需要这种格式HEX #000000，否则失效)">
@@ -39,12 +56,15 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, h, ref, nextTick } from 'vue'
+import { PropType, ref } from 'vue'
 import { option } from './config'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { NInputNumber, NSelect } from 'naive-ui'
 import { NInputNumber, NSelect } from 'naive-ui'
-import { uploadFile } from '@/api/external/contentSave/content'
-import { UploadCustomRequestOptions } from 'naive-ui'
+import FileUpload from './components/FileUpload.vue'
+import { icon } from '@/plugins'
+import type { UploadFileInfo } from 'naive-ui'
+
+const { HelpOutlineIcon } = icon.ionicons5
 
 
 const props = defineProps({
 const props = defineProps({
   optionData: {
   optionData: {
@@ -53,17 +73,15 @@ const props = defineProps({
   }
   }
 })
 })
 
 
-const defaultFileList = ref([])
+const singleFileTypeNotMtl = ref('')
 
 
-//文件限制大小
-const fileSizeConst = ref(50)
+const threeFileHelpMessgae = ref('如果格式为obj，则上传顺序是，先上传材质贴图（png或jpg）、mtl材质文件，最后是obj')
 
 
-/**
- * 三维文件格式,vue-3d-loader是这个插件支持的格式，其他格式待解决
- */
 const threeSupportFileFormat = ['fbx', 'obj', 'gltf', 'stl', 'dae', 'glb', 'ply', 'json']
 const threeSupportFileFormat = ['fbx', 'obj', 'gltf', 'stl', 'dae', 'glb', 'ply', 'json']
 
 
-const fileSizeMsg = ref(`文件需小于 ${fileSizeConst.value}M ，格式为${threeSupportFileFormat.join(',')}的文件`)
+const supportFileMtl = ['mtl']
+
+const supportFileTextureImage = ['jpg', 'png']
 
 
 const handleChange = (e: boolean) => {
 const handleChange = (e: boolean) => {
   if (e) props.optionData.dataset = ''
   if (e) props.optionData.dataset = ''
@@ -74,51 +92,24 @@ const encodinghList = [
   { label: 'sRGB ', value: 'sRGB ' }
   { label: 'sRGB ', value: 'sRGB ' }
 ]
 ]
 
 
-
-const extname = (filename: string) => {
-  if (!filename || typeof filename != 'string') {
-    return false
-  }
-  let a = filename.split('').reverse().join('')
-  let b = a.substring(0, a.search(/\./)).split('').reverse().join('')
-  return b
+const handleFileStaticUri = (value: UploadFileInfo[]) => {
+  props.optionData.dataset = value[0]?.url as string
 }
 }
 
 
-// 上传图片前置处理
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-const beforeUploadHandle = async ({ file }) => {
-  defaultFileList.value = []
-  const type = extname(file.file.name) as string
-  const size = file.file.size
-  if (size / (1024 * 1024) > fileSizeConst.value) {
-    window['$message'].warning(`文件超出 ${fileSizeConst.value}M限制，请重新上传！`)
-    return false
-  }
-  if (!threeSupportFileFormat.includes(type)) {
-    window['$message'].warning('文件格式不符合，请重新上传！')
-    return false
-  }
-  return true
+const handleFileMtlStaticUri = (value: UploadFileInfo[]) => {
+  props.optionData.mtlPath = value.map(item => item?.url) as any
 }
 }
 
 
-// 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      const formData = new FormData()
-      formData.append('file', file.file)
-      const uploadRes = await uploadFile(formData)
-      if (uploadRes) {
-        props.optionData.dataset = uploadRes?.fileStaticUri
-        window['$message'].success('上传文件成功！')
-      }
-    } else {
-      window['$message'].error('上传文件失败，请稍后重试！')
-    }
-  })
+const handleFileTextureImageStaticUri = (value: UploadFileInfo[]) => {
+  props.optionData.textureImage = value.map(item => item?.url) as any
 }
 }
 </script>
 </script>
 
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.help-span {
+  display: flex;
+  flex-wrap: wrap;
+  width: 8vw;
+  color: white;
+}
+</style>

@@ -9,6 +9,8 @@
         :height="h"
         :height="h"
         :width="w"
         :width="w"
         :filePath="dataset"
         :filePath="dataset"
+        :mltPath="mtlPath"
+        :textureImage="textureImage"
         :autoPlay="autoPlay"
         :autoPlay="autoPlay"
         :enableDamping="enableDamping"
         :enableDamping="enableDamping"
         :outputEncoding="outputEncoding"
         :outputEncoding="outputEncoding"
@@ -101,6 +103,8 @@ const {
   autoPlay,
   autoPlay,
   enableDamping,
   enableDamping,
   dataset,
   dataset,
+  mtlPath,
+  textureImage,
   outputEncoding,
   outputEncoding,
   clearScene,
   clearScene,
   dampingFactor
   dampingFactor

@@ -19,12 +19,17 @@ export const option = {
       targetButton: ''
       targetButton: ''
     }
     }
   ],
   ],
-  buttonType:'primary'
+  buttonType: 'primary',
+  buttonGhost: false,
+  buttonDashed: false,
+  buttonColor: '',
+  buttonTextColor: 'white',
+  buttonTextSize: '16',
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ButtonConfig.key
   public key = ButtonConfig.key
-  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 90, h: 40, zIndex: -1 }
   public chartConfig = cloneDeep(ButtonConfig)
   public chartConfig = cloneDeep(ButtonConfig)
   public interactActions = interactActions
   public interactActions = interactActions
   public option = cloneDeep(option)
   public option = cloneDeep(option)

@@ -3,17 +3,42 @@
     <setting-item-box name="默认值" :alone="true">
     <setting-item-box name="默认值" :alone="true">
       <n-select size="small" v-model:value="optionData.buttonType" :options="buttonTypeOptions" />
       <n-select size="small" v-model:value="optionData.buttonType" :options="buttonTypeOptions" />
     </setting-item-box>
     </setting-item-box>
-    <setting-item-box name="跳转配置项" :alone="true">
+    <setting-item-box name="虚线">
+      <setting-item name="">
+        <n-switch v-model:value="optionData.buttonDashed" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="透明">
+      <setting-item name="">
+        <n-switch v-model:value="optionData.buttonGhost" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="颜色">
+      <setting-item name="">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="文字颜色">
+      <setting-item name="">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonTextColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="文字大小">
+      <setting-item name="">
+        <n-input-number v-model:value="optionData.buttonTextSize" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="跳转配置" :alone="true">
       <setting-item v-for="(item, index) in optionData.dataset" :key="index">
       <setting-item v-for="(item, index) in optionData.dataset" :key="index">
-        <n-input v-model:value="item.label" size="small" placeholder="按钮文字"></n-input>
+        <n-input v-model:value="item.label" size="small" placeholder="按钮文字id"></n-input>
         <div style="height: 5px"></div>
         <div style="height: 5px"></div>
-        <n-input v-model:value="item.currentButton" size="small" placeholder="当前按钮"></n-input>
+        <n-input v-model:value="item.currentButton" size="small" placeholder="当前按钮id"></n-input>
         <div style="height: 5px"></div>
         <div style="height: 5px"></div>
-        <n-input v-model:value="item.targetButton" size="small" placeholder="目标按钮"></n-input>
+        <n-input v-model:value="item.targetButton" size="small" placeholder="目标按钮id"></n-input>
         <div style="height: 5px"></div>
         <div style="height: 5px"></div>
-        <n-input v-model:value="item.current" size="small" placeholder="当前页面"></n-input>
+        <n-input v-model:value="item.current" size="small" placeholder="当前页面id"></n-input>
         <div style="height: 5px"></div>
         <div style="height: 5px"></div>
-        <n-input v-model:value="item.target" size="small" placeholder="目标页面"></n-input>
+        <n-input v-model:value="item.target" size="small" placeholder="目标页面id"></n-input>
         <div style="height: 5px"></div>
         <div style="height: 5px"></div>
       </setting-item>
       </setting-item>
     </setting-item-box>
     </setting-item-box>

@@ -2,9 +2,13 @@
   <n-button
   <n-button
     :style="{ width: `${w}px`, height: `${h}px` }"
     :style="{ width: `${w}px`, height: `${h}px` }"
     :type="buttonType"
     :type="buttonType"
-    @click="onClick(option.value.dataset[0],true)"
-    >{{ option.value.dataset[0].label }}</n-button
+    :dashed="buttonDashed"
+    :ghost="buttonGhost"
+    :color="buttonColor"
+    @click="onClick(option.value.dataset[0])"
   >
   >
+    <span class="button-text-color">{{ option.value.dataset[0].label }}</span>
+  </n-button>
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
@@ -24,24 +28,24 @@ const props = defineProps({
 })
 })
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
-const { buttonType } = toRefs(props.chartConfig.option)
+const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize } = toRefs(
+  props.chartConfig.option
+)
 const option = shallowReactive({
 const option = shallowReactive({
   value: cloneDeep(props.chartConfig.option)
   value: cloneDeep(props.chartConfig.option)
 })
 })
 
 
-const onClick = (v: any, s: boolean) => {
+const onClick = (v: any) => {
   useChartInteract(
   useChartInteract(
     props.chartConfig,
     props.chartConfig,
     useChartEditStore,
     useChartEditStore,
     { [ComponentInteractParamsEnum.DATA]: v?.current },
     { [ComponentInteractParamsEnum.DATA]: v?.current },
     InteractEventOn.CHANGE,
     InteractEventOn.CHANGE,
-    v?.target,
-    s
   )
   )
 }
 }
 
 
 onMounted(() => {
 onMounted(() => {
-  onClick(option.value.dataset[0], false)
+  onClick(option.value.dataset[0])
 })
 })
 
 
 // 手动更新
 // 手动更新
@@ -49,7 +53,7 @@ watch(
   () => props.chartConfig.option,
   () => props.chartConfig.option,
   (newData: any) => {
   (newData: any) => {
     option.value = newData
     option.value = newData
-    // onClick(newData.tabValue, true)
+    // onClick(newData.tabValue)
   },
   },
   {
   {
     immediate: true,
     immediate: true,
@@ -57,3 +61,10 @@ watch(
   }
   }
 )
 )
 </script>
 </script>
+
+<style lang="scss" scoped>
+.button-text-color {
+  color: v-bind('buttonTextColor');
+  font-size: v-bind('`${buttonTextSize}px`');
+}
+</style>

@@ -94,7 +94,6 @@ const fileList = ref<UploadFileInfo[]>([])
 watch(
 watch(
   () => props.optionData,
   () => props.optionData,
   newValue => {
   newValue => {
-    console.log(newValue)
     fileList.value = newValue?.dataset
     fileList.value = newValue?.dataset
   },
   },
   {
   {
@@ -120,7 +119,6 @@ const beforeUploadHandle = async ({ file }) => {
 }
 }
 
 
 const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
 const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
-  console.log(data.fileList)
   props.optionData.dataset = data.fileList as never as any
   props.optionData.dataset = data.fileList as never as any
 }
 }
 
 
@@ -147,7 +145,6 @@ const customRequest = (options: UploadCustomRequestOptions) => {
           return item.status === 'finished'
           return item.status === 'finished'
         })
         })
         fileList.value = fileArr
         fileList.value = fileArr
-        console.log(fileList.value)
         props.optionData.dataset = fileList.value as never as any
         props.optionData.dataset = fileList.value as never as any
         window['$message'].success('添加图片成功！')
         window['$message'].success('添加图片成功！')
       }
       }