refactor: 简化画风选择卡片,移除选中/未选中双图切换逻辑
画风卡片改为统一使用单张图片,删除 active 状态图片资源, 简化 StyleSelectView 组件数据结构和模板渲染逻辑。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
BIN
frontend/screenshot-style-select.png
Normal file
|
After Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 223 KiB |
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 244 KiB |
|
Before Width: | Height: | Size: 234 KiB |
|
Before Width: | Height: | Size: 247 KiB After Width: | Height: | Size: 17 KiB |
@ -27,7 +27,7 @@ export default { name: 'StyleSelectView' }
|
|||||||
|
|
||||||
<div class="style-preview">
|
<div class="style-preview">
|
||||||
<img
|
<img
|
||||||
:src="selected === s.styleId ? s.imgActive : s.img"
|
:src="s.img"
|
||||||
:alt="s.styleName"
|
:alt="s.styleName"
|
||||||
class="style-preview-img"
|
class="style-preview-img"
|
||||||
/>
|
/>
|
||||||
@ -60,15 +60,11 @@ import {
|
|||||||
import PageHeader from '@/components/aicreate/PageHeader.vue'
|
import PageHeader from '@/components/aicreate/PageHeader.vue'
|
||||||
import { useAicreateStore } from '@/stores/aicreate'
|
import { useAicreateStore } from '@/stores/aicreate'
|
||||||
|
|
||||||
// 导入画风图片:{style}-normal.png 未选中,{style}-active.png 选中
|
// 导入画风图片
|
||||||
import styleCartoonNormal from '@/assets/images/style-cartoon-normal.png'
|
import styleCartoonNormal from '@/assets/images/style-cartoon-normal.png'
|
||||||
import styleCartoonActive from '@/assets/images/style-cartoon-active.png'
|
|
||||||
import styleWatercolorNormal from '@/assets/images/style-watercolor-normal.png'
|
import styleWatercolorNormal from '@/assets/images/style-watercolor-normal.png'
|
||||||
import styleWatercolorActive from '@/assets/images/style-watercolor-active.png'
|
|
||||||
import styleInkNormal from '@/assets/images/style-ink-normal.png'
|
import styleInkNormal from '@/assets/images/style-ink-normal.png'
|
||||||
import styleInkActive from '@/assets/images/style-ink-active.png'
|
|
||||||
import stylePencilNormal from '@/assets/images/style-pencil-normal.png'
|
import stylePencilNormal from '@/assets/images/style-pencil-normal.png'
|
||||||
import stylePencilActive from '@/assets/images/style-pencil-active.png'
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const store = useAicreateStore()
|
const store = useAicreateStore()
|
||||||
@ -78,22 +74,20 @@ interface StyleItem {
|
|||||||
styleId: string
|
styleId: string
|
||||||
styleName: string
|
styleName: string
|
||||||
desc: string
|
desc: string
|
||||||
/** 未选中态图片 */
|
/** 风格图片 */
|
||||||
img: string
|
img: string
|
||||||
/** 选中态图片 */
|
|
||||||
imgActive: string
|
|
||||||
/** hidden=true 时暂不展示,后续开发开放 */
|
/** hidden=true 时暂不展示,后续开发开放 */
|
||||||
hidden?: boolean
|
hidden?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles: StyleItem[] = [
|
const styles: StyleItem[] = [
|
||||||
{ styleId: 'style_cartoon', styleName: '卡通风格', desc: '色彩鲜明,充满童趣', img: styleCartoonNormal, imgActive: styleCartoonActive },
|
{ styleId: 'style_cartoon', styleName: '卡通风格', desc: '色彩鲜明,充满童趣', img: styleCartoonNormal },
|
||||||
{ styleId: 'style_watercolor', styleName: '水彩风格', desc: '柔和透明,梦幻浪漫', img: styleWatercolorNormal, imgActive: styleWatercolorActive },
|
{ styleId: 'style_watercolor', styleName: '水彩风格', desc: '柔和透明,梦幻浪漫', img: styleWatercolorNormal },
|
||||||
{ styleId: 'style_ink', styleName: '水墨国风', desc: '古韵悠长,意境深远', img: styleInkNormal, imgActive: styleInkActive },
|
{ styleId: 'style_ink', styleName: '水墨国风', desc: '古韵悠长,意境深远', img: styleInkNormal },
|
||||||
{ styleId: 'style_pencil', styleName: '彩铅风格', desc: '细腻温暖,自然亲切', img: stylePencilNormal, imgActive: stylePencilActive },
|
{ styleId: 'style_pencil', styleName: '彩铅风格', desc: '细腻温暖,自然亲切', img: stylePencilNormal },
|
||||||
// 油画、剪贴画暂不开放,后续开发后去掉 hidden 即可
|
// 油画、剪贴画暂不开放,后续开发后去掉 hidden 即可
|
||||||
{ styleId: 'style_oilpaint', styleName: '油画风格', desc: '色彩浓郁,质感丰富', img: '', imgActive: '', hidden: true },
|
{ styleId: 'style_oilpaint', styleName: '油画风格', desc: '色彩浓郁,质感丰富', img: '', hidden: true },
|
||||||
{ styleId: 'style_collage', styleName: '剪贴画', desc: '趣味拼贴,创意满满', img: '', imgActive: '', hidden: true },
|
{ styleId: 'style_collage', styleName: '剪贴画', desc: '趣味拼贴,创意满满', img: '', hidden: true },
|
||||||
]
|
]
|
||||||
|
|
||||||
/** 页面可见的风格列表 */
|
/** 页面可见的风格列表 */
|
||||||
|
|||||||