@peng_kai/kit 0.2.30 → 0.2.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { computed, reactive } from 'vue';
|
|
2
|
+
import { computed, reactive, ref, toValue } from 'vue';
|
|
3
3
|
import { useInjectedAdminConfig } from '../../provider';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
export interface CurrencyIconProps {
|
|
6
|
+
symbol?: string
|
|
7
|
+
size?: string
|
|
8
|
+
cdn?: string
|
|
9
|
+
useCdn?: boolean
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const imgIcons = ref<Record<string, string>>({
|
|
6
13
|
USDT: 'https://api.iconify.design/cryptocurrency-color:usdt.svg',
|
|
7
14
|
TRX: 'https://api.iconify.design/cryptocurrency-color:trx.svg',
|
|
8
15
|
USDC: 'https://api.iconify.design/cryptocurrency-color:usdc.svg',
|
|
@@ -12,45 +19,62 @@ const presetSymbols = reactive<Record<string, string>>({
|
|
|
12
19
|
MATIC: 'https://api.iconify.design/cryptocurrency-color:matic.svg',
|
|
13
20
|
SOL: 'https://api.iconify.design/cryptocurrency-color:sol.svg',
|
|
14
21
|
});
|
|
15
|
-
const
|
|
22
|
+
const textIcons = ref(['¥', '€', '¥', '₱', '$', 'AED', 'ARS', '$', 'BDT', 'R$', '$', 'Fr', '$', 'Kč', 'KR', '£', 'Ft', 'Rp', '₪', '₹', '₩', '$', 'RM', 'NGN', 'KR', '$', 'Rs', 'zł', '₽', 'SAR', 'SEK', 'S$', '฿', '₺', 'NT$', 'UAH', '₫', 'R']);
|
|
23
|
+
const fullback = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjODQ4YTlkNTUiIGQ9Ik0xMCAyMGExMCAxMCAwIDEgMSAwLTIwIDEwIDEwIDAgMCAxIDAgMjBtMS01aDFhMyAzIDAgMCAwIDAtNkg3Ljk5YTEgMSAwIDAgMSAwLTJIMTRWNWgtM1YzSDl2Mkg4YTMgMyAwIDEgMCAwIDZoNGExIDEgMCAxIDEgMCAySDZ2MmgzdjJoMnoiLz48L3N2Zz4=';
|
|
24
|
+
|
|
25
|
+
const checkHttpUrl = (value: unknown) => String(value).startsWith('http');
|
|
26
|
+
const checkBase64 = (value: unknown) => String(value).startsWith('data:image');
|
|
16
27
|
</script>
|
|
17
28
|
|
|
18
29
|
<script setup lang="ts">
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}>(), {
|
|
30
|
+
defineOptions({
|
|
31
|
+
inheritAttrs: false,
|
|
32
|
+
});
|
|
33
|
+
const props = withDefaults(defineProps<CurrencyIconProps>(), {
|
|
24
34
|
size: '1.1em',
|
|
25
35
|
symbol: '',
|
|
26
36
|
useCdn: true,
|
|
27
37
|
});
|
|
28
38
|
|
|
29
|
-
const { cdn } = useInjectedAdminConfig() ?? {};
|
|
30
|
-
|
|
39
|
+
const { cdn: cdnCtx } = useInjectedAdminConfig() ?? {};
|
|
40
|
+
const cdn = computed(() => props.useCdn ? (props.cdn || toValue(cdnCtx)) : '');
|
|
31
41
|
const src = computed(() => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
if (isHttpUrl)
|
|
42
|
+
if (checkHttpUrl(props.symbol) || checkBase64(props.symbol))
|
|
35
43
|
return props.symbol;
|
|
36
|
-
else if (
|
|
44
|
+
else if (textIcons.value?.includes(props.symbol))
|
|
37
45
|
return props.symbol;
|
|
38
|
-
else if (
|
|
46
|
+
else if (cdn.value)
|
|
39
47
|
return `${cdn.value}/currency/${props.symbol}.svg`;
|
|
40
48
|
else
|
|
41
|
-
return
|
|
49
|
+
return (imgIcons.value[props.symbol.toUpperCase()] ?? fullback);
|
|
42
50
|
});
|
|
51
|
+
|
|
52
|
+
function onError(ev: Event) {
|
|
53
|
+
const $img = ev.target as HTMLImageElement;
|
|
54
|
+
$img.src = fullback;
|
|
55
|
+
}
|
|
43
56
|
</script>
|
|
44
57
|
|
|
45
58
|
<template>
|
|
46
59
|
<img
|
|
47
|
-
|
|
60
|
+
v-if="checkHttpUrl(src) || checkBase64(src)"
|
|
61
|
+
v-bind="$attrs"
|
|
62
|
+
class="currency-icon"
|
|
48
63
|
:src="src"
|
|
49
64
|
:alt="props.symbol"
|
|
50
65
|
:style="{ fontSize: $props.size }"
|
|
66
|
+
@error="onError"
|
|
51
67
|
>
|
|
68
|
+
<span v-else v-bind="$attrs">{{ src }}</span>
|
|
52
69
|
</template>
|
|
53
70
|
|
|
71
|
+
<style lang="scss" scoped>
|
|
72
|
+
img.currency-icon {
|
|
73
|
+
width: 1em;
|
|
74
|
+
height: 1em;
|
|
75
|
+
}
|
|
76
|
+
</style>
|
|
77
|
+
|
|
54
78
|
<!--
|
|
55
79
|
透明图片
|
|
56
80
|
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
|
|
@@ -65,9 +65,9 @@ const amountColor = computed(() => {
|
|
|
65
65
|
<template>
|
|
66
66
|
<div class="amount-wrapper" :style="{ '--amount-color': amountColor }">
|
|
67
67
|
<!-- 约等于 -->
|
|
68
|
-
<span v-if="props.approx"
|
|
68
|
+
<span v-if="props.approx">≈</span>
|
|
69
69
|
<!-- 符号 -->
|
|
70
|
-
<CurrencyIcon
|
|
70
|
+
<CurrencyIcon class="symbol-logo" :symbol="symbol" :useCdn="useCdn" />
|
|
71
71
|
<!-- 金额 -->
|
|
72
72
|
<span class="color-$amount-color amount">{{ amountText }}</span>
|
|
73
73
|
<!-- 单位 -->
|
|
@@ -80,10 +80,8 @@ const amountColor = computed(() => {
|
|
|
80
80
|
display: flex;
|
|
81
81
|
align-items: center;
|
|
82
82
|
|
|
83
|
-
.symbol-logo {
|
|
83
|
+
img.symbol-logo {
|
|
84
84
|
display: block;
|
|
85
|
-
width: 1.1em;
|
|
86
|
-
height: 1.1em;
|
|
87
85
|
margin-right: 0.2em;
|
|
88
86
|
}
|
|
89
87
|
|