red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化按钮图标间距样式并修复SKU规格属性显示,将图标间距规则调整为仅对非圆形按钮生效,同时修复数字人形象头像图片尺寸参数

Browse Source
This commit is contained in:
WUSIJIAN
2026-01-13 10:24:08 +08:00
parent ffaf455fe8
commit eec9a72a1d
3 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/theme/element.scss
View File

@@ -9,11 +9,26 @@
.el-button--default i.iconfont,
.el-button--default i.fa {
font-size: 14px !important;
}
// 非圆形按钮的图标右边距（圆形按钮不需要）
.el-button:not(.is-circle) i.el-icon + span,
.el-button:not(.is-circle) i.iconfont,
.el-button:not(.is-circle) i.fa,
.el-button--default:not(.is-circle) i.iconfont,
.el-button--default:not(.is-circle) i.fa {
margin-left: 5px;
}
.el-button:not(.is-circle) > i.el-icon:first-child:not(:last-child),
.el-button:not(.is-circle) > i.iconfont:first-child:not(:last-child),
.el-button:not(.is-circle) > i.fa:first-child:not(:last-child) {
margin-right: 5px;
}
.el-button--small i.iconfont,
.el-button--small i.fa {
font-size: 12px !important;
}
.el-button--small:not(.is-circle) > i.iconfont:first-child:not(:last-child),
.el-button--small:not(.is-circle) > i.fa:first-child:not(:last-child) {
margin-right: 5px;
}

25
src/views/assets/asset/component/skuDialog.vue
View File

@@ -23,7 +23,12 @@
<el-table-column prop="skuName" label="SKU名称" min-width="120" show-overflow-tooltip />
<el-table-column prop="specValues" label="规格属性" min-width="150">
<template #default="scope">
<span v-if="scope.row.specValues && Object.keys(scope.row.specValues).length > 0">
<span v-if="scope.row.specValues && Array.isArray(scope.row.specValues) && scope.row.specValues.length > 0">
<el-tag v-for="(item, idx) in scope.row.specValues" :key="idx" size="small" style="margin-right: 4px">
{{ item.name }}: {{ item.options?.[0]?.label || (Array.isArray(item.value) ? item.value[0] : item.value) }}
</el-tag>
</span>
<span v-else-if="scope.row.specValues && typeof scope.row.specValues === 'object' && !Array.isArray(scope.row.specValues) && Object.keys(scope.row.specValues).length > 0">
<el-tag v-for="(value, key) in scope.row.specValues" :key="key" size="small" style="margin-right: 4px">
{{ key }}: {{ value }}
</el-tag>
@@ -86,7 +91,7 @@
<div v-for="attr in assetSpecAttrs" :key="attr.name" class="spec-item">
<span class="spec-label">{{ attr.name }}：</span>
<el-select v-if="attr.options && attr.options.length > 0" v-model="specValuesMap[attr.name]" placeholder="请选择" style="width: 120px" filterable allow-create clearable>
<el-option v-for="opt in attr.options" :key="opt" :label="opt" :value="opt" />
<el-option v-for="opt in attr.options" :key="opt.value" :label="opt.label" :value="opt.value" />
</el-select>
<el-input v-else v-model="specValuesMap[attr.name]" placeholder="请输入" style="width: 120px" />
</div>
@@ -148,7 +153,7 @@ interface SpecValueItem {
interface AssetSpecAttr {
name: string;
options?: string[];
options?: { value: string; label: string }[];
dictType?: string;
}
@@ -241,7 +246,7 @@ const fetchAssetSpecAttrs = () => {
.filter((item: any) => item.type === 'multi_select')
.map((item: any) => ({
name: item.name,
options: item.options?.map((opt: any) => opt.label || opt.value) || [],
options: item.options?.map((opt: any) => ({ value: opt.value, label: opt.label || opt.value })) || [],
dictType: item.dictType || '',
}));
} else {
@@ -447,7 +452,7 @@ const removeSkuImage = () => {
};
// 获取属性的可选值
const getAttrOptions = (key: string): string[] => {
const getAttrOptions = (key: string): { value: string; label: string }[] => {
if (!key) return [];
const attr = assetSpecAttrs.value.find((a) => a.name === key);
return attr?.options || [];
@@ -503,9 +508,15 @@ const onSubmitSku = async () => {
if (attr.dictType) {
specItem.dictType = attr.dictType;
}
// 添加 options（只包含选中的值）
// 添加 options（只包含选中的值，格式与 metadata 一致）
if (attr.options && attr.options.length > 0) {
specItem.options = [{ label: selectedValue, value: selectedValue }];
// 从 options 中找到选中值对应的完整选项
const selectedOpt = attr.options.find((opt) => opt.value === selectedValue || opt.label === selectedValue);
if (selectedOpt) {
specItem.options = [{ value: selectedOpt.value, label: selectedOpt.label }];
} else {
specItem.options = [{ value: selectedValue, label: selectedValue }];
}
}
specValues.push(specItem);
}

12
src/views/digitalHuman/avatar/index.vue
View File

@@ -103,7 +103,7 @@ const mockData: AvatarItem[] = [
{
id: 1,
name: '商务男性形象',
avatar: 'https://img.icons8.com/3d-fluency/512/businessman.png',
avatar: 'https://img.icons8.com/3d-fluency/94/businessman.png',
description: '专业商务风格的男性数字人形象，适合企业宣传',
type: '真人形象',
status: 1,
@@ -112,7 +112,7 @@ const mockData: AvatarItem[] = [
{
id: 2,
name: '甜美女性形象',
avatar: 'https://img.icons8.com/3d-fluency/512/businesswoman.png',
avatar: 'https://img.icons8.com/3d-fluency/94/businesswoman.png',
description: '甜美可爱的女性数字人形象，适合直播带货',
type: '真人形象',
status: 1,
@@ -121,7 +121,7 @@ const mockData: AvatarItem[] = [
{
id: 3,
name: '卡通男孩形象',
avatar: 'https://img.icons8.com/3d-fluency/512/boy.png',
avatar: 'https://img.icons8.com/3d-fluency/94/person-male.png',
description: '活泼可爱的卡通男孩形象，适合儿童教育',
type: '卡通形象',
status: 1,
@@ -130,7 +130,7 @@ const mockData: AvatarItem[] = [
{
id: 4,
name: '知性女性形象',
avatar: 'https://img.icons8.com/3d-fluency/512/teacher.png',
avatar: 'https://img.icons8.com/3d-fluency/94/woman-profile.png',
description: '知性优雅的女性数字人形象，适合知识讲解',
type: '真人形象',
status: 0,
@@ -139,7 +139,7 @@ const mockData: AvatarItem[] = [
{
id: 5,
name: '科技机器人形象',
avatar: 'https://img.icons8.com/3d-fluency/512/robot-2.png',
avatar: 'https://img.icons8.com/3d-fluency/94/robot-2.png',
description: '未来科技风格的机器人形象，适合科技产品',
type: '3D形象',
status: 1,
@@ -148,7 +148,7 @@ const mockData: AvatarItem[] = [
{
id: 6,
name: '客服助手形象',
avatar: 'https://img.icons8.com/3d-fluency/512/customer-support.png',
avatar: 'https://img.icons8.com/3d-fluency/94/technical-support.png',
description: '专业友好的客服助手形象，适合在线客服场景',
type: '3D形象',
status: 1,