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>
<view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx' }">
<text :style="{ fontSize: (size * 0.55) + 'rpx', color: color }">{{ iconChar }}</text>
<view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx', backgroundColor: bgColor, borderRadius: radius }">
<text :style="{ fontSize: fontSize, color: textColor }">{{ iconChar }}</text>
</view>
</template>
<script>
// 简洁线条图标(用 Unicode 符号)
const icons = {
home: '首',
user: '用户',
chart: '图',
product: '商',
add: '添',
search: '搜',
order: '单',
edit: '编',
check: '确',
close: '关',
stock: '库',
alert: '警',
in: '入',
out: '出',
customer: '客',
money: '钱',
logout: '退',
right: '右',
left: '左',
down: '下',
lock: '锁',
calendar: '历',
setting: '设',
wechat: '微',
cash: '现',
alipay: '支',
plus: '加',
flow: '流'
home: '⌂',
user: '⊙',
chart: '◐',
product: '▦',
add: '+',
search: '◎',
order: '☰',
edit: '✎',
check: '✓',
close: '✕',
stock: '⌖',
alert: '⚡',
in: '↓',
out: '↑',
customer: '☺',
money: '¤',
logout: '↺',
right: '›',
left: '‹',
down: '⌄',
lock: '⌘',
calendar: '▦',
setting: '⚙',
wechat: '✉',
cash: '💵',
alipay: '💴',
plus: '+',
flow: '↔'
}
const colors = {
blue: '#1890ff',
green: '#52c41a',
red: '#ff4d4f',
orange: '#fa8c16',
purple: '#722ed1',
cyan: '#13c2c2',
pink: '#eb2f96',
gray: '#8c8c8c'
}
export default {
@@ -41,11 +53,20 @@ export default {
props: {
name: { type: String, required: true },
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: {
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;
align-items: center;
justify-content: center;
font-weight: 500;
}
</style>