feat: 颜色上传可以从library选择&历史列表参数修改

2025-09-24 11:51:22 +08:00
parent 05e9bada5a
commit 3e3b8b17fe
8 changed files with 184 additions and 57 deletions
--- a/src/component/Detail/detailLeft/colorBox/index.vue
+++ b/src/component/Detail/detailLeft/colorBox/index.vue
@@ -16,8 +16,16 @@
 			</div>
 		</div>
 		<div class="detailText">{{$t('DesignPrintOperation.Colorfromimage')}}</div>
-		<div class="uploadImage">
-			<upload @selectUplpadColor="selectUplpadColor"></upload>
+		<div class="uploadImage flex flex-align-center flex-justify-around">
+			<div class="upload-container flex flex-column flex-align-center" :class="{'hide': !showLibrary}">
+				<upload ref="uploadRef" @selectUplpadColor="selectUplpadColor" @selectFile="showLibrary = false"  @deleteColor="showLibrary = true"></upload>
+				<div class="upload-text" v-show="showLibrary"> {{ $t('LibraryPage.Upload') }} </div>
+			</div>
+			<div class="upload-container flex flex-column flex-align-center"  v-show="showLibrary">
+				<!-- <i class="fi fi-rr-followcollection"></i> -->
+				  <SvgIcon name="CLibrary" size="40" @click="handleOpenLibrary" />
+				<div class="upload-text"> {{ $t('LibraryPage.library') }} </div>
+			</div>
 		</div>
 		<div class="detailText">{{$t('DesignPrintOperation.ColorCode')}}</div>
 		<div class="colorCode">
@@ -30,7 +38,14 @@
 			<!-- <div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div> -->
 		</div>
    </div>
-    
+    <SelectImages 
+		ref="selectImages"
+		@select="handleImageSelect"
+		radio
+		full-data
+		:api="Https.httpUrls.queryLibraryPage"
+		isLibrary
+		/>
 </template>
 <script lang="ts">
 import { defineComponent,computed,ref,watch,nextTick,toRefs, reactive, onMounted} from 'vue'
@@ -39,14 +54,16 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { useI18n } from 'vue-i18n'
-import { rgbaToHex,rgbToHsv } from "@/tool/util"
+import { rgbaToHex,rgbToHsv,UrlToFile } from "@/tool/util"
 import { message,Upload} from 'ant-design-vue';
+import SelectImages from '@/component/common/SelectImages.vue'
+

 import upload from './upload.vue'
 import pallet from './pallet.vue'
 export default defineComponent({
    components:{
-		upload,pallet
+		upload,pallet,SelectImages
    },
    setup(props,{emit}) {
        const store = useStore();
@@ -243,6 +260,33 @@ export default defineComponent({
 					});
 			})
 		}
+
+		const uploadRef = ref<any>(null)
+		const selectImages = ref<any>(null)
+		const showLibrary = ref(true)
+		const handleOpenLibrary = ()=>{
+			selectImages.value.init()
+		}
+		const handleImageSelect = (item:any)=>{
+			console.log('item',item)
+			UrlToFile(item.url,item.name).then((file:any)=>{
+				console.log('file',file)
+				// 构造符合 fileUploadChange 期望的数据结构
+				const fileData = {
+					file: {
+						originFileObj: file,  // 将 File 对象放在 originFileObj 属性中
+						status: 'done'
+					}
+				}
+				uploadRef.value.fileUploadChange(fileData)
+			})
+			// uploadRef.value.selectColor(item)
+		}
+		const handleShowListChange=(val:boolean)=>{
+			console.log('val',val)
+			showLibrary.value = !val
+		}
+
 		const selectUplpadColor = (item:any)=>{
 			colorData.selectColor = JSON.parse(JSON.stringify(item))
 		}
@@ -301,6 +345,14 @@ export default defineComponent({
 			selectUplpadColor,
 			setSelectColor,
 			getTcxColor,
+			handleOpenLibrary,
+			Https,
+			showLibrary,
+			selectImages,
+			uploadRef,
+			handleImageSelect,
+			handleShowListChange,
+
        }
    },

@@ -312,6 +364,30 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
+
+.flex{
+	display: flex;
+}
+
+.flex-column{
+	flex-direction: column;
+}
+
+.flex-align-center{
+	align-items: center;
+}
+
+.flex-justify-center{
+	justify-content: center;
+}
+
+.flex-justify-between{
+	justify-content: space-between;
+}
+
+.flex-justify-around{
+	justify-content: space-around;
+}
    .color{
 		// width: 34rem;
 		width: 100%;
@@ -374,6 +450,25 @@ export default defineComponent({
 			height: 10rem;
 			width: 100%;
 			border-radius: .5rem;
+			.upload-container{
+				background-color: #EDEDED;
+				padding: 1rem 2rem;
+				border-radius: 1rem;
+				width: 8rem;
+				height: 8rem;
+				&.hide{
+					width: initial;
+					height: initial;
+					border: none;
+					padding: 0;
+					flex: 1;
+					background-color: transparent;
+					padding-left: 1rem;
+				}
+				:deep(.ant-upload){
+					background: transparent;
+				}
+			}
 		}
 		> .colorCode{
 			margin-bottom: 3rem;
--- a/src/component/Detail/detailLeft/colorBox/upload.vue
+++ b/src/component/Detail/detailLeft/colorBox/upload.vue
@@ -44,7 +44,7 @@ import { rgbaToHex } from "@/tool/util"
 export default defineComponent({
    components:{
    },
-	emits:['selectUplpadColor'],
+	emits:['selectUplpadColor','deleteColor','selectFile'],
    setup(props,{emit}) {
 		const {t} = useI18n();
        const store = useStore();
@@ -63,6 +63,8 @@ export default defineComponent({
 		})
 		
 		const fileUploadChange = (data:any)=>{
+						emit('selectFile')
+						console.log('fileUploadChange',data)
            let file:any = data.file
            let fileData = file.originFileObj
            var reader = new FileReader();
@@ -157,6 +159,7 @@ export default defineComponent({
 		const colorDeleteFile = ()=>{
 			colorUpload.uploadList[colorUpload.selectDetail.id] = []
 			colorUpload.colorList[colorUpload.selectDetail.id] = []
+			emit('deleteColor')
 		}
        return{
 			...toRefs(colorUpload),
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -40,7 +40,8 @@
 						</div>
 					</div>
 					<a-dropdown>
-						<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i>
+						<!-- <i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i> -->
+						<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
 						<template #overlay>
 							<a-menu>
 								<a-menu-item>
@@ -60,7 +61,7 @@
 											@change="(file) => fileUploadChange(file)"
 										>
 										<div class="drop-container">
-										<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
+											<folder-outlined />
 											<div>{{ $t('PrintboardUpload.Upload') }}</div>
 										</div>
 										</a-upload>
@@ -248,6 +249,7 @@ import createSlogan from "@/component/HomePage/createSlogan.vue";
 import { useI18n } from "vue-i18n";
 import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 import SelectImages from '@/component/common/SelectImages.vue'
+import { FolderOutlined } from '@ant-design/icons-vue';

 export default defineComponent({
 	components: {
@@ -255,7 +257,8 @@ export default defineComponent({
 		generalMenu,
 		createSlogan,
 		sketchCategory,
-		SelectImages
+		SelectImages,
+		FolderOutlined
 	},
    props: ["msg",'sketchCatecoryList','scene','gender'],
 	emits:['setLibrary'],
--- a/src/component/common/SelectImages.vue
+++ b/src/component/common/SelectImages.vue
@@ -8,7 +8,7 @@

      <div class="modal-content">
        <!-- 分类标签 -->
-        <div class="image-categories">
+        <div v-if="showCategories" class="image-categories">
          <div
            v-for="category in categories"
            :key="category"
@@ -88,11 +88,6 @@ import { navTypeList } from '@/tool/listData'

 const { t } = useI18n()

-const libraryTypeList = [
-  { label: t('Canvas.all'), value: '' },
-  ...navTypeList(t).library.list
-]
-
 // Props
 const props = defineProps({
  api: {
@@ -110,35 +105,58 @@ const props = defineProps({
  fullData: {
    type: Boolean,
    default: false
+  },
+  level1Type: {
+    type: String,
+    default: ''
  }
 })

 // Emits
 const emits = defineEmits(['select'])

-// 响应式数据
+const libraryTypeList = ref([
+  ...navTypeList(t).library.list.filter(item => item.value !== 'MyBrand')
+])
+
+// 根据传入的level1Type参数确定默认选中的分类
+const getDefaultCategory = () => {
+  if (props.level1Type) {
+    // 如果传入了level1Type，查找匹配的category
+    const matchedCategory = libraryTypeList.value.find(
+      item => item.value === props.level1Type
+    )
+    return matchedCategory ? matchedCategory.label : libraryTypeList.value[0]?.label || ''
+  }
+  // 如果没有传入参数，选择第一个
+  return libraryTypeList.value[0]?.label || ''
+}
+
 const showPanel = ref(false)
-const selectedCategory = ref(t('Canvas.all'))
+const selectedCategory = ref(getDefaultCategory())
 const selectList = ref([])
 const list = ref([])

-// 新增：分页和加载状态
 const currentPage = ref(1)
 const hasMore = ref(true)
 const loading = ref(false)
-// 内部管理的分页大小
 const pageSize = ref(10)
 const total = ref(0)

 // 计算属性：获取所有分类
 const categories = computed(() => {
  if (props.isLibrary) {
-    return libraryTypeList.map(item => item.label)
+    return libraryTypeList.value.map(item => item.label)
  } else {
    return []
  }
 })

+// 计算属性：是否显示分类选择器
+const showCategories = computed(() => {
+  return !props.level1Type // 如果没有传入level1Type参数，则显示分类选择器
+})
+
 // 新增：API请求函数
 const fetchImages = async (
  page = 1,
@@ -148,11 +166,10 @@ const fetchImages = async (
  if (!props.api) return
  loading.value = true

-  const type = libraryTypeList.find(item => item.label === category).value
-  console.log('type', type)
+  const type = libraryTypeList.value.find(item => item.label === category)?.value
  const params = {
    classificationIdList: [],
-    level1Type: 'Printboard',
+    level1Type: props.level1Type || type,
    level2Type: '',
    page,
    ageGroup: '',