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">
|
||||
<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 },
|
||||
]
|
||||
|
||||
/** 页面可见的风格列表 */
|
||||
|
||||