模型选择器

pages/index.vue

@@ -7,9 +7,14 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
       p.text-gray-400 尝试可以应用于您的图像的不同风格样式 {{ imageCreate.models_show }}
       div.flex.flex-wrap.gap-2.items-center.pt-2
         div.cursor-pointer.select-none(v-for="(item, index) in filters" :key="item.name" class="w-5/16 h-20 bg-gray-500 rounded-lg")
-          div.flex.justify-center.items-center.h-full(v-if="!item.name" @click="ModelsShow(index)")
+          div.flex.justify-center.items-center.h-full(v-if="!item.name" @click="ModelsShow(index, item)")
             img.w-6.h-6(:src="IconPlusCircle" alt="PlusCircle")
-          div.flex.items-end.h-full(v-else :style="`background-image: url(${item.image}); background-size: cover; background-position: center;`" @click="ModelsShow(index)")
+          div.flex.items-end.h-full.border-purple-700.rounded-md(
+            v-else
+            :style="`background-image: url(${item.image}); background-size: cover; background-position: center;`"
+            :class="{'border-2': new_task.model === item.name}"
+            @click="ModelsChange(item)"
+          )
             p(class="p-1") {{item.name}}
       // 风格滤镜列表(弹出/悬浮)
       div(v-show="imageCreate.models_show" class="absolute w-screen lg:w-[400px] bottom-2 flex flex-col" style="max-height: 80vh; left: 394px; top: 6vh;")
@@ -26,7 +31,12 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
           div(class="h-32 lg:h-28")
           div(class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-3 gap-2 p-2 pt-0")
             template(v-for="item in models" :key="item.name")
-              button.h-24(class="transition-[transform,opacity] origin-center filter-button relative aspect-[6/5] duration-200 border-2 rounded-lg overflow-hidden  active:border-blue-300/50 border-transparent hover:border-high" aria-label="Select filter style: Colorpop" style="transition-delay: 10ms;")
+              button.h-24(
+                class="transition-[transform,opacity] origin-center filter-button relative aspect-[6/5] duration-200 border-2 rounded-lg overflow-hidden  active:border-blue-300/50 border-transparent hover:border-high"
+                aria-label="Select filter style: Colorpop"
+                style="transition-delay: 10ms;"
+                @click="ModelsSelect(imageCreate.filter_ctive, item)"
+              )
                 span( style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;")
                   img( alt="Colorpop" :src="item.image" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover;" sizes="100vw" srcset="https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 640w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 750w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 828w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1080w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1200w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1920w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 2048w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 3840w")
                 div( class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 flex flex-col justify-end text-gray-100 text-left text-sm p-1") {{ item.name }}
@@ -225,13 +235,18 @@ const imageCreate = ref({
   // 私有会话
 })
 
+// 新任务表单
+const new_task = ref({
+  model: 'None',
+})
+
 
 const filters = ref([
   { name:'None',      image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
   { name:'Colorpop1', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
   { name:'Colorpop2', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
   { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
-  { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
+  { name:'Colorpop4', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
   { name:'',          image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
 ])
 
@@ -240,10 +255,10 @@ const models = ref([
   { name:'Colorpop1', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
   { name:'Colorpop2', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
   { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
-  { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
+  { name:'Colorpop4', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
-  { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
+  { name:'Colorpop5', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
-  { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
+  { name:'Colorpop6', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
-  { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
+  { name:'Colorpop7', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
 ])
 
 const tasks = ref([
@@ -263,12 +278,28 @@ const sizes = ref([
   { id:'image-dim-6', width:768, height:512 },
 ])
 
-const ModelsShow = (index) => {
+// 显示模型列表
-  console.log(index)
+const ModelsShow = (index, model) => {
-  imageCreate.value.filter_ctive = index
+  console.log(index, model)
+  imageCreate.value.filter_ctive = index // 正在操作的坐标
   imageCreate.value.models_show = !imageCreate.value.models_show
 }
 
+// 切换要使用的模型
+const ModelsChange = (model) => {
+  console.log(model)
+  new_task.value.model = model.name
+  imageCreate.value.models_show = false
+}
+
+// 选择模型到常用模型
+const ModelsSelect = (index, model) => {
+  console.log(index, model)
+  filters.value[index] = model
+  new_task.value.model = model.name
+  imageCreate.value.models_show = false
+}
+
 </script>
 
 <style>