feat:ui add

This commit is contained in:
2026-09-13 03:09:01 +08:00
parent fe3cd08229
commit 323f520d7b
5 changed files with 560 additions and 75 deletions
@@ -6,24 +6,90 @@ import { logger } from '../../utils/logger'
// 日志模块名
const LOG = 'clothes-detail'
const ATTRS = [
{ key: 'category_main', label: '大类', type: 'text' },
{ key: 'category_sub', label: '小类', type: 'text' },
{ key: 'style', label: '风格', type: 'text' },
{ key: 'color_main', label: '主色', type: 'color' },
{ key: 'color_sub', label: '副色', type: 'text' },
{ key: 'thickness', label: '厚度', type: 'text' },
{ key: 'version', label: '版型', type: 'text' },
{ key: 'material', label: '材质', type: 'text' },
{ key: 'pattern', label: '花纹', type: 'text' },
{ key: 'sleeve_type', label: '袖型', type: 'text' },
{ key: 'clothes_type', label: '衣长', type: 'text' },
{ key: 'neckline_type', label: '领型', type: 'text' },
{ key: 'formality', label: '正式程度', type: 'score' },
{ key: 'occasions', label: '适用场合', type: 'text' },
{ key: 'visual_impact', label: '视觉冲击力', type: 'score' },
// 属性分组定义(对齐设计稿:基础属性 / 版型与材质 / 智能量化评估)
const ATTR_GROUPS = [
{
title: '基础属性',
attrs: [
{ key: 'category_main', label: '大类', type: 'text' },
{ key: 'category_sub', label: '小类', type: 'text' },
{ key: 'style', label: '风格', type: 'text' },
{ key: 'color_main', label: '主色', type: 'color' },
{ key: 'color_sub', label: '副色', type: 'text' },
],
},
{
title: '版型与材质',
attrs: [
{ key: 'thickness', label: '厚度', type: 'text' },
{ key: 'version', label: '版型', type: 'text' },
{ key: 'material', label: '材质', type: 'text' },
{ key: 'pattern', label: '花纹', type: 'text' },
{ key: 'sleeve_type', label: '袖型', type: 'text' },
{ key: 'clothes_type', label: '衣长', type: 'text' },
{ key: 'neckline_type', label: '领型', type: 'text' },
],
},
{
title: '智能量化评估',
attrs: [
{ key: 'formality', label: '正式程度', type: 'score' },
{ key: 'occasions', label: '适用场合', type: 'multi' },
{ key: 'visual_impact', label: '视觉冲击力', type: 'score' },
],
},
]
// 属性快捷选项(选择面板内点选,仍支持自定义输入)
const ATTR_OPTIONS: Record<string, string[]> = {
category_main: ['上装', '下装', '连衣裙', '外套', '鞋', '配饰'],
style: ['简约', '休闲', '通勤', '运动', '甜美', '复古'],
thickness: ['薄', '适中', '厚'],
version: ['宽松', '修身', '阔腿', '紧身', '常规合身'],
material: ['纯棉', '牛仔布', '针织', '皮质', '羊毛', '涤纶'],
pattern: ['纯色', '条纹', '格纹', '印花', '波点'],
sleeve_type: ['无袖', '短袖', '长袖'],
clothes_type: ['短款', '常规', '中长', '长款'],
neckline_type: ['圆领', 'V领', '方领', '翻领', '高领'],
occasions: ['休闲', '通勤', '约会', '运动', '聚会', '正式', '度假'],
}
// 主色色板(名称 → 色值),供面板点选
const COLOR_PRESETS = [
{ name: '白色', value: '#FFFFFF' },
{ name: '黑色', value: '#1C1C1E' },
{ name: '灰色', value: '#8E8E93' },
{ name: '红色', value: '#FF3B30' },
{ name: '粉色', value: '#FF2D55' },
{ name: '橙色', value: '#FF9500' },
{ name: '黄色', value: '#FFCC00' },
{ name: '绿色', value: '#34C759' },
{ name: '蓝色', value: '#007AFF' },
{ name: '紫色', value: '#5856D6' },
{ name: '棕色', value: '#A2845E' },
{ name: '米色', value: '#F5EFE0' },
]
interface AttrMeta {
key: string
label: string
type: string
}
// 多值字段(适用场合)按分隔符拆分为标签
function splitValues(v: string): string[] {
if (!v) return []
return v.split(/[、,,/|;;\s]+/).filter((s) => !!s)
}
function findAttr(key: string): AttrMeta | null {
for (const group of ATTR_GROUPS) {
const hit = (group.attrs as AttrMeta[]).find((a) => a.key === key)
if (hit) return hit
}
return null
}
// 将后端 image_process_status 映射为前端展示步骤:0=排队中 1=AI 抠图 2=智能分类
function statusToStep(status: number): number {
if (status === ProcessStatus.QUEUED) return 0
@@ -35,7 +101,8 @@ function statusToStep(status: number): number {
Page({
data: {
uuid: '',
attrs: ATTRS,
attrGroups: ATTR_GROUPS,
colorPresets: COLOR_PRESETS,
detail: {} as ClothesItem,
formData: {} as ClothesItem,
imageStatus: 0,
@@ -44,6 +111,14 @@ Page({
loading: true,
editMode: false,
notFound: false,
// 底部属性选择面板
sheetVisible: false,
sheetKey: '',
sheetLabel: '',
sheetType: 'text',
sheetOptions: [] as string[],
sheetValue: '',
sheetValues: [] as string[],
},
onLoad(query: Record<string, string>) {
@@ -124,7 +199,7 @@ Page({
onToggleEdit() {
if (this.data.editMode) {
this.setData({ editMode: false })
this.setData({ editMode: false, sheetVisible: false })
} else {
this.setData({ editMode: true, formData: { ...this.data.detail } })
}
@@ -138,39 +213,70 @@ Page({
this.setData({ 'formData.remark': e.detail.value })
},
// 点击属性行:打开底部选择面板
onAttrTap(e: WechatMiniprogram.TouchEvent) {
if (!this.data.editMode) return
const key = e.currentTarget.dataset.key as string
const attr = ATTRS.find((a) => a.key === key)
const attr = findAttr(key)
if (!attr) return
const current = (this.data.formData as any)[key] || ''
if (attr.type === 'score') {
wx.showActionSheet({
itemList: ['1', '2', '3', '4', '5'],
success: (res) => {
this.setData({ [`formData.${key}`]: String(res.tapIndex + 1) })
},
})
return
}
wx.showModal({
title: `编辑${attr.label}`,
editable: true,
placeholderText: `请输入${attr.label}`,
content: current,
success: (res) => {
if (res.confirm) {
this.setData({ [`formData.${key}`]: res.content })
}
},
const current = (((this.data.formData as any)[key] || '') + '') as string
logger.debug(LOG, '打开属性面板, key=', key, 'type=', attr.type)
this.setData({
sheetVisible: true,
sheetKey: key,
sheetLabel: attr.label,
sheetType: attr.type,
sheetOptions: ATTR_OPTIONS[key] || [],
sheetValue: attr.type === 'multi' ? '' : current,
sheetValues: attr.type === 'multi' ? splitValues(current) : [],
})
},
onSheetClose() {
this.setData({ sheetVisible: false })
},
onSheetInput(e: WechatMiniprogram.Input) {
this.setData({ sheetValue: e.detail.value })
},
// 单选快捷选项
onSheetOptionTap(e: WechatMiniprogram.TouchEvent) {
this.setData({ sheetValue: e.currentTarget.dataset.value as string })
},
// 多选快捷选项(适用场合)
onSheetValueTap(e: WechatMiniprogram.TouchEvent) {
const value = e.currentTarget.dataset.value as string
const list = this.data.sheetValues.slice()
const idx = list.indexOf(value)
if (idx >= 0) list.splice(idx, 1)
else list.push(value)
this.setData({ sheetValues: list })
},
// 色板点选
onSheetColorTap(e: WechatMiniprogram.TouchEvent) {
this.setData({ sheetValue: e.currentTarget.dataset.name as string })
},
// 评分点选
onSheetScoreTap(e: WechatMiniprogram.TouchEvent) {
this.setData({ sheetValue: String(e.currentTarget.dataset.value) })
},
onSheetConfirm() {
const { sheetKey, sheetType, sheetValue, sheetValues } = this.data
if (!sheetKey) return
const value = sheetType === 'multi' ? sheetValues.join('、') : (sheetValue || '').trim()
logger.info(LOG, '属性更新, key=', sheetKey, 'value=', value)
this.setData({ [`formData.${sheetKey}`]: value, sheetVisible: false })
},
onSave() {
const fd = this.data.formData as any
const body: Record<string, any> = {}
// 后端 ClothesUpdateByUUIDRequest.ClothesUUID 为必填(binding required),请求体需携带
const body: Record<string, any> = { clothes_uuid: this.data.uuid }
const fields: Array<[string, string]> = [
['name', 'name'],
['remark', 'remark'],
@@ -1,3 +1,45 @@
<wxs module="fmt">
var COLOR_MAP = {
'白色': '#FFFFFF',
'黑色': '#1C1C1E',
'灰色': '#8E8E93',
'红色': '#FF3B30',
'粉色': '#FF2D55',
'橙色': '#FF9500',
'黄色': '#FFCC00',
'绿色': '#34C759',
'蓝色': '#007AFF',
'紫色': '#5856D6',
'棕色': '#A2845E',
'米色': '#F5EFE0'
}
function hex(v) {
if (!v) return ''
if (v.charAt(0) === '#') return v
return COLOR_MAP[v] || ''
}
function tags(v) {
if (!v) return []
var sep = '、,,/|;; \t\n\r'
var out = []
var cur = ''
for (var i = 0; i < v.length; i++) {
var ch = v.charAt(i)
if (sep.indexOf(ch) >= 0) {
if (cur) {
out.push(cur)
cur = ''
}
} else {
cur += ch
}
}
if (cur) out.push(cur)
return out
}
module.exports = { hex: hex, tags: tags }
</wxs>
<view class="page detail-page">
<navigation-bar title="衣物详情">
<view
@@ -83,45 +125,73 @@
<view wx:else class="name-text">{{detail.name || '未命名衣物'}}</view>
</view>
<!-- 属性列表 -->
<view class="card attr-card">
<!-- 属性分组(基础属性 / 版型与材质 / 智能量化评估) -->
<view class="card attr-card" wx:for="{{attrGroups}}" wx:key="title" wx:for-item="group">
<view class="group-title">{{group.title}}</view>
<view
class="attr-row hairline"
wx:for="{{attrs}}"
class="attr-row hairline {{editMode ? 'edit' : ''}}"
wx:for="{{group.attrs}}"
wx:key="key"
data-key="{{item.key}}"
bindtap="onAttrTap"
>
<view class="attr-label">{{item.label}}</view>
<view class="attr-value">
<!-- 评分:5 段圆条 + 分值 -->
<block wx:if="{{item.type === 'score'}}">
<view class="score-bar">
<view class="score-fill" style="width: {{(detail[item.key] || 0) * 20}}%"></view>
<view class="score-dots">
<view
class="score-dot {{dotIdx < ((editMode ? formData[item.key] : detail[item.key]) || 0) ? 'on' : ''}} {{item.key === 'visual_impact' ? 'violet' : ''}}"
wx:for="{{[1, 2, 3, 4, 5]}}"
wx:for-item="dot"
wx:for-index="dotIdx"
wx:key="*this"
></view>
</view>
<text class="score-num">{{detail[item.key] || 0}}/5</text>
<text class="score-num">{{(editMode ? formData[item.key] : detail[item.key]) || 0}}/5</text>
</block>
<block wx:else>
<text class="attr-text">{{detail[item.key] || '—'}}</text>
<!-- 适用场合:胶囊标签 -->
<block wx:elif="{{item.type === 'multi'}}">
<view
wx:if="{{item.key === 'color_main' && detail.color_main}}"
class="scene-list"
wx:if="{{fmt.tags(editMode ? formData.occasions : detail.occasions).length}}"
>
<text
class="tag tag-blue scene-tag"
wx:for="{{fmt.tags(editMode ? formData.occasions : detail.occasions)}}"
wx:for-item="scene"
wx:key="*this"
>{{scene}}</text>
</view>
<text wx:else class="attr-text weak">—</text>
</block>
<!-- 普通文本 / 主色 -->
<block wx:else>
<text class="attr-text">{{(editMode ? formData[item.key] : detail[item.key]) || '—'}}</text>
<view
wx:if="{{item.key === 'color_main' && fmt.hex(editMode ? formData.color_main : detail.color_main)}}"
class="color-dot"
style="background: {{detail.color_main}}"
style="background: {{fmt.hex(editMode ? formData.color_main : detail.color_main)}}"
></view>
</block>
</view>
<view wx:if="{{editMode}}" class="icon icon-chevron-right edit-arrow"></view>
</view>
</view>
<!-- 备注 -->
<view class="remark-row">
<!-- 备注 -->
<view class="card remark-card">
<view class="group-title">备注信息</view>
<view class="remark-body">
<textarea
wx:if="{{editMode}}"
class="textarea"
value="{{formData.remark}}"
bindinput="onRemarkInput"
placeholder="备注"
placeholder="添加备注…"
/>
<view wx:elif="{{detail.remark}}" class="remark-text">备注:{{detail.remark}}</view>
<view wx:elif="{{detail.remark}}" class="remark-text">{{detail.remark}}</view>
<view wx:else class="remark-text weak">暂无备注</view>
</view>
</view>
</block>
@@ -139,4 +209,81 @@
</block>
</view>
</scroll-view>
<!-- 底部属性选择面板 -->
<view class="sheet-mask" wx:if="{{sheetVisible}}" bindtap="onSheetClose"></view>
<view class="sheet" wx:if="{{sheetVisible}}">
<view class="sheet-head">
<text class="sheet-title">{{sheetLabel}}</text>
<view class="sheet-done" bindtap="onSheetConfirm">完成</view>
</view>
<scroll-view scroll-y class="sheet-body">
<!-- 评分:大号点选圆点 -->
<block wx:if="{{sheetType === 'score'}}">
<view class="sheet-score">
<view
class="sheet-score-dot {{index < (sheetValue * 1) ? 'on' : ''}}"
wx:for="{{[1, 2, 3, 4, 5]}}"
wx:key="*this"
data-value="{{item}}"
bindtap="onSheetScoreTap"
>{{item}}</view>
</view>
</block>
<!-- 多选(适用场合) -->
<block wx:elif="{{sheetType === 'multi'}}">
<view class="sheet-tags">
<view
class="sheet-tag {{sheetValues.indexOf(item) >= 0 ? 'on' : ''}}"
wx:for="{{sheetOptions}}"
wx:key="*this"
data-value="{{item}}"
bindtap="onSheetValueTap"
>{{item}}</view>
</view>
</block>
<!-- 主色:色板 + 自定义 -->
<block wx:elif="{{sheetType === 'color'}}">
<view class="sheet-colors">
<view
class="sheet-color {{sheetValue === item.name || sheetValue === item.value ? 'on' : ''}}"
wx:for="{{colorPresets}}"
wx:key="name"
data-name="{{item.name}}"
bindtap="onSheetColorTap"
>
<view class="sheet-color-dot" style="background: {{item.value}}"></view>
</view>
</view>
<input
class="input sheet-input"
value="{{sheetValue}}"
bindinput="onSheetInput"
placeholder="也可输入色值,如 #FFFFFF"
/>
</block>
<!-- 文本:快捷选项 + 自定义输入 -->
<block wx:else>
<view class="sheet-tags" wx:if="{{sheetOptions.length}}">
<view
class="sheet-tag {{sheetValue === item ? 'on' : ''}}"
wx:for="{{sheetOptions}}"
wx:key="*this"
data-value="{{item}}"
bindtap="onSheetOptionTap"
>{{item}}</view>
</view>
<input
class="input sheet-input"
value="{{sheetValue}}"
bindinput="onSheetInput"
placeholder="请输入{{sheetLabel}}"
/>
</block>
</scroll-view>
<view class="safe-bottom"></view>
</view>
</view>
@@ -50,15 +50,36 @@
color: #000;
}
.attr-card {
/* ===== 属性分组卡片 ===== */
.card.attr-card {
margin: 0 24rpx 24rpx;
padding: 0 32rpx;
padding: 0;
overflow: hidden;
}
.group-title {
padding: 14rpx 32rpx;
font-size: 24rpx;
font-weight: 600;
color: #8E8E93;
background: rgba(242, 242, 247, 0.6);
border-bottom: 1rpx solid #E5E5EA;
}
.attr-row {
display: flex;
align-items: center;
min-height: 88rpx;
min-height: 92rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
.attr-row:last-child {
border-bottom: none;
}
.attr-row.edit:active {
background: #F2F2F7;
}
.attr-label {
@@ -73,11 +94,19 @@
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
.attr-text {
font-size: 28rpx;
color: #3C3C43;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attr-text.weak {
color: #C7C7CC;
}
.color-dot {
@@ -86,20 +115,33 @@
border-radius: 50%;
margin-left: 16rpx;
border: 1rpx solid #E5E5EA;
flex-shrink: 0;
}
.score-bar {
width: 160rpx;
height: 8rpx;
border-radius: 4rpx;
background: #F2F2F7;
overflow: hidden;
/* ===== 评分:5 段圆条 ===== */
.score-dots {
display: flex;
align-items: center;
}
.score-fill {
height: 100%;
.score-dot {
width: 28rpx;
height: 12rpx;
border-radius: 6rpx;
background: #E5E5EA;
margin-left: 8rpx;
}
.score-dot:first-child {
margin-left: 0;
}
.score-dot.on {
background: #007AFF;
border-radius: 4rpx;
}
.score-dot.violet.on {
background: #5856D6;
}
.score-num {
@@ -108,6 +150,23 @@
margin-left: 16rpx;
min-width: 60rpx;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ===== 适用场合标签 ===== */
.scene-list {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
.scene-tag {
margin-left: 8rpx;
}
.scene-tag:first-child {
margin-left: 0;
}
.edit-arrow {
@@ -115,18 +174,184 @@
height: 28rpx;
color: #C7C7CC;
margin-left: 12rpx;
flex-shrink: 0;
}
.remark-row {
padding: 24rpx 0;
/* ===== 备注卡片 ===== */
.card.remark-card {
margin: 0 24rpx 24rpx;
padding: 0;
overflow: hidden;
}
.remark-body {
padding: 24rpx 32rpx;
}
.remark-text {
font-size: 26rpx;
color: #8E8E93;
font-size: 28rpx;
color: #3C3C43;
line-height: 1.6;
}
.remark-text.weak {
color: #C7C7CC;
}
/* ===== 底部属性选择面板 ===== */
.sheet-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
animation: mask-in 0.2s ease;
}
.sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: #fff;
border-radius: 32rpx 32rpx 0 0;
max-height: 72vh;
display: flex;
flex-direction: column;
animation: sheet-up 0.25s ease;
}
.sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28rpx 32rpx 12rpx;
}
.sheet-title {
font-size: 32rpx;
font-weight: 600;
color: #000;
}
.sheet-done {
font-size: 30rpx;
font-weight: 600;
color: #007AFF;
padding: 8rpx 0 8rpx 32rpx;
}
.sheet-done:active {
opacity: 0.6;
}
.sheet-body {
padding: 12rpx 32rpx 32rpx;
max-height: 56vh;
box-sizing: border-box;
}
/* 选项胶囊 */
.sheet-tags {
display: flex;
flex-wrap: wrap;
}
.sheet-tag {
padding: 16rpx 30rpx;
margin: 0 16rpx 16rpx 0;
border-radius: 18rpx;
background: #F2F2F7;
color: #3C3C43;
font-size: 28rpx;
line-height: 1;
}
.sheet-tag.on {
background: #007AFF;
color: #fff;
font-weight: 500;
}
.sheet-tag:active {
opacity: 0.8;
}
.sheet-input {
margin-top: 12rpx;
}
/* 色板 */
.sheet-colors {
display: flex;
flex-wrap: wrap;
}
.sheet-color {
width: 96rpx;
height: 96rpx;
margin: 0 20rpx 20rpx 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4rpx solid transparent;
box-sizing: border-box;
}
.sheet-color.on {
border-color: #007AFF;
}
.sheet-color-dot {
width: 68rpx;
height: 68rpx;
border-radius: 50%;
border: 1rpx solid #E5E5EA;
}
/* 评分点选 */
.sheet-score {
display: flex;
justify-content: space-between;
padding: 20rpx 0 8rpx;
}
.sheet-score-dot {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
background: #F2F2F7;
color: #8E8E93;
font-size: 34rpx;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.sheet-score-dot.on {
background: #007AFF;
color: #fff;
}
.sheet-score-dot:active {
opacity: 0.8;
}
@keyframes sheet-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes mask-in {
from { opacity: 0; }
to { opacity: 1; }
}
.footer {
padding: 16rpx 24rpx 48rpx;
}
@@ -102,7 +102,12 @@ Page({
},
doPublic(isPublic: number) {
request({ url: `/outfit/${this.data.uuid}/public`, method: 'PUT', data: { is_public: isPublic } })
// 后端 OutfitPublicRequest.OutfitUUID 为必填(binding required),请求体需携带
request({
url: `/outfit/${this.data.uuid}/public`,
method: 'PUT',
data: { outfit_uuid: this.data.uuid, is_public: isPublic },
})
.then(() => {
logger.info(LOG, '公开状态变更成功, isPublic=', isPublic)
this.setData({ 'outfit.is_public': isPublic })
+3 -1
View File
@@ -200,12 +200,14 @@ Page({
return
}
const body = {
const body: Record<string, any> = {
outfit_name: name,
outfit_desc: this.data.outfitDesc,
scene: this.data.scene,
items: this.data.selectedUuids.map((u) => ({ clothes_uuid: u })),
}
// 编辑态后端 OutfitUpdateByUUIDRequest.OutfitUUID 为必填(binding required),请求体需携带
if (this.data.isEdit) body.outfit_uuid = this.data.uuid
this.setData({ saving: true })
const req = this.data.isEdit