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

This commit is contained in:
Agent
2026-03-28 14:01:05 +00:00
parent 8c7e500fbb
commit f47f078357
+53 -33
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>