fix: 图标改用简洁线条风格符号

This commit is contained in:
Agent
2026-03-28 14:01:05 +00:00
parent 8c7e500fbb
commit f47f078357

View File

@@ -1,39 +1,51 @@
<template> <template>
<view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx' }"> <view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx', backgroundColor: bgColor, borderRadius: radius }">
<text :style="{ fontSize: (size * 0.55) + 'rpx', color: color }">{{ iconChar }}</text> <text :style="{ fontSize: fontSize, color: textColor }">{{ iconChar }}</text>
</view> </view>
</template> </template>
<script> <script>
// 简洁线条图标(用 Unicode 符号)
const icons = { const icons = {
home: '', home: '',
user: '用户', user: '',
chart: '', chart: '',
product: '', product: '',
add: '', add: '+',
search: '', search: '',
order: '', order: '',
edit: '', edit: '',
check: '', check: '',
close: '', close: '',
stock: '', stock: '',
alert: '', alert: '',
in: '', in: '',
out: '', out: '',
customer: '', customer: '',
money: '', money: '¤',
logout: '退', logout: '',
right: '', right: '',
left: '', left: '',
down: '', down: '',
lock: '', lock: '',
calendar: '', calendar: '',
setting: '', setting: '',
wechat: '', wechat: '',
cash: '', cash: '💵',
alipay: '', alipay: '💴',
plus: '', plus: '+',
flow: '' flow: ''
}
const colors = {
blue: '#1890ff',
green: '#52c41a',
red: '#ff4d4f',
orange: '#fa8c16',
purple: '#722ed1',
cyan: '#13c2c2',
pink: '#eb2f96',
gray: '#8c8c8c'
} }
export default { export default {
@@ -41,11 +53,20 @@ export default {
props: { props: {
name: { type: String, required: true }, name: { type: String, required: true },
size: { type: [Number, String], default: 48 }, size: { type: [Number, String], default: 48 },
color: { type: String, default: '' } color: { type: String, default: '' },
bgColor: { type: String, default: 'transparent' },
radius: { type: String, default: '0' },
theme: { type: String, default: '' } // blue, green, red, orange, purple, cyan, pink
}, },
computed: { computed: {
iconChar() { iconChar() {
return icons[this.name] || '?' return icons[this.name] || ''
},
textColor() {
return this.color || (this.theme ? colors[this.theme] : '#666')
},
fontSize() {
return (this.size * 0.5) + 'rpx'
} }
} }
} }
@@ -56,6 +77,5 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 500;
} }
</style> </style>