refactor: 简化画风选择卡片,移除选中/未选中双图切换逻辑

画风卡片改为统一使用单张图片,删除 active 状态图片资源,
简化 StyleSelectView 组件数据结构和模板渲染逻辑。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
En 2026-04-10 13:42:39 +08:00
parent 8995e2f2e2
commit df1817fe23
10 changed files with 9 additions and 15 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 223 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 236 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 247 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -27,7 +27,7 @@ export default { name: 'StyleSelectView' }
<div class="style-preview">
<img
:src="selected === s.styleId ? s.imgActive : s.img"
:src="s.img"
:alt="s.styleName"
class="style-preview-img"
/>
@ -60,15 +60,11 @@ import {
import PageHeader from '@/components/aicreate/PageHeader.vue'
import { useAicreateStore } from '@/stores/aicreate'
// {style}-normal.png {style}-active.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 styleWatercolorActive from '@/assets/images/style-watercolor-active.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 stylePencilActive from '@/assets/images/style-pencil-active.png'
const router = useRouter()
const store = useAicreateStore()
@ -78,22 +74,20 @@ interface StyleItem {
styleId: string
styleName: string
desc: string
/** 未选中态图片 */
/** 风格图片 */
img: string
/** 选中态图片 */
imgActive: string
/** hidden=true 时暂不展示,后续开发开放 */
hidden?: boolean
}
const styles: StyleItem[] = [
{ styleId: 'style_cartoon', styleName: '卡通风格', desc: '色彩鲜明,充满童趣', img: styleCartoonNormal, imgActive: styleCartoonActive },
{ styleId: 'style_watercolor', styleName: '水彩风格', desc: '柔和透明,梦幻浪漫', img: styleWatercolorNormal, imgActive: styleWatercolorActive },
{ styleId: 'style_ink', styleName: '水墨国风', desc: '古韵悠长,意境深远', img: styleInkNormal, imgActive: styleInkActive },
{ styleId: 'style_pencil', styleName: '彩铅风格', desc: '细腻温暖,自然亲切', img: stylePencilNormal, imgActive: stylePencilActive },
{ styleId: 'style_cartoon', styleName: '卡通风格', desc: '色彩鲜明,充满童趣', img: styleCartoonNormal },
{ styleId: 'style_watercolor', styleName: '水彩风格', desc: '柔和透明,梦幻浪漫', img: styleWatercolorNormal },
{ styleId: 'style_ink', styleName: '水墨国风', desc: '古韵悠长,意境深远', img: styleInkNormal },
{ styleId: 'style_pencil', styleName: '彩铅风格', desc: '细腻温暖,自然亲切', img: stylePencilNormal },
// hidden
{ styleId: 'style_oilpaint', styleName: '油画风格', desc: '色彩浓郁,质感丰富', img: '', imgActive: '', hidden: true },
{ styleId: 'style_collage', styleName: '剪贴画', desc: '趣味拼贴,创意满满', img: '', imgActive: '', hidden: true },
{ styleId: 'style_oilpaint', styleName: '油画风格', desc: '色彩浓郁,质感丰富', img: '', hidden: true },
{ styleId: 'style_collage', styleName: '剪贴画', desc: '趣味拼贴,创意满满', img: '', hidden: true },
]
/** 页面可见的风格列表 */