@peng_kai/kit 0.2.21 → 0.2.23

package/admin/components/currency/index.ts

@@ -0,0 +1 @@
+export { default as CurrencyIcon } from './src/CurrencyIcon.vue';

package/admin/components/currency/src/CurrencyIcon.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { computed, reactive } from 'vue';
+import { useInjectedAdminConfig } from '../../provider';
+
+const icons = reactive<Record<string, string>>({});
+
+const fullback = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjODQ4YTlkNTUiIGQ9Ik0xMCAyMGExMCAxMCAwIDEgMSAwLTIwIDEwIDEwIDAgMCAxIDAgMjBtMS01aDFhMyAzIDAgMCAwIDAtNkg3Ljk5YTEgMSAwIDAgMSAwLTJIMTRWNWgtM1YzSDl2Mkg4YTMgMyAwIDEgMCAwIDZoNGExIDEgMCAxIDEgMCAySDZ2MmgzdjJoMnoiLz48L3N2Zz4=';
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  symbol?: string
+  size?: string
+  useCdn?: boolean
+}>(), {
+  size: '1.1em',
+  symbol: '',
+  useCdn: true,
+});
+
+const { cdn } = useInjectedAdminConfig()!;
+
+const src = computed(() => {
+  const isHttpUrl = props.symbol.startsWith('http');
+
+  if (isHttpUrl)
+    return props.symbol;
+  else if (props.useCdn && cdn.value)
+    return `${cdn.value}/currency/${props.symbol}.svg`;
+  else
+    return icons[props.symbol.toUpperCase()];
+});
+</script>
+
+<template>
+  <img
+    class="h-[1em] w-[1em] rounded-full bg-sys-layer-c text-inherit"
+    :src="src"
+    :alt="props.symbol"
+    :style="{ fontSize: $props.size }"
+  >
+</template>
+
+<!--
+  透明图片
+  data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
+-->

package/admin/components/provider/index.ts

@@ -0,0 +1 @@
+export { default as AdminProvider, useInjectedAdminConfig, useProvidingAdminConfig } from './src/AdminProvider.vue';

package/admin/components/provider/src/AdminProvider.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { createInjectionState } from '@vueuse/core';
+import type { MaybeRefOrGetter } from 'vue';
+import { toRef } from 'vue';
+
+interface AdminConfig {
+  cdn: MaybeRefOrGetter<string | undefined | null>
+}
+
+export const [useProvidingAdminConfig, useInjectedAdminConfig] = createInjectionState((adminConfig: AdminConfig) => {
+  const cdn = toRef(adminConfig.cdn);
+
+  return { cdn };
+}, { injectionKey: 'TTADMIN-PROVIDER-KEY' });
+</script>
+
+<script setup lang="ts">
+</script>
+
+<template>
+  <slot />
+</template>

package/admin/components/text/src/Amount.vue

@@ -2,6 +2,7 @@
 import { computed, reactive } from 'vue';
 import bigNumber from 'bignumber.js';
 import isNil from 'lodash-es/isNil';
+import { CurrencyIcon } from '../../currency';
 
 export const config = {
   aboveColor: '#52c41a',
@@ -11,19 +12,10 @@ export const config = {
 /**
  * 当 symbol 为以下值时，使用预设的 Logo
  */
-const presetSymbols: Record<string, string> = reactive({
-  USDT: 'https://api.iconify.design/cryptocurrency-color:usdt.svg',
-  TRX: 'https://api.iconify.design/cryptocurrency-color:trx.svg',
-  USDC: 'https://api.iconify.design/cryptocurrency-color:usdc.svg',
-  ETH: 'https://api.iconify.design/cryptocurrency-color:eth.svg',
-  BNB: 'https://api.iconify.design/cryptocurrency-color:bnb.svg',
-  BUSD: 'https://assets.coingecko.com/coins/images/9576/large/BUSD.png',
-  MATIC: 'https://api.iconify.design/cryptocurrency-color:matic.svg',
-  SOL: 'https://api.iconify.design/cryptocurrency-color:sol.svg',
-});
+const presetTextSymbols = reactive(['$', '￥']);
 
-export function setConfig(symbols: Record<string, string>) {
-  Object.assign(presetSymbols, symbols);
+export function setConfig(textSymbols: string[]) {
+  presetTextSymbols.concat(textSymbols);
 }
 </script>
 
@@ -46,11 +38,13 @@ const props = withDefaults(
     colorful?: boolean
     /** 是否是大约数 */
     approx?: boolean
+    useCdn?: boolean
   }>(),
   {
     padZero: false,
     fractionDigits: 18,
     colorful: false,
+    useCdn: true,
   },
 );
 
@@ -75,7 +69,6 @@ const amountColor = computed(() => {
 
   return num > 0 ? config.aboveColor : (num < 0 ? config.belowColor : '');
 });
-const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? '');
 </script>
 
 <template>
@@ -83,11 +76,10 @@ const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? ''
     <!-- 约等于 -->
     <span v-if="props.approx" class="color-$amount-color">≈</span>
 
-    <!-- 符号 -->
-    <img v-if="symbol.startsWith('http')" class="symbol-logo" :src="symbol">
-
-    <!-- 图片Logo -->
-    <span v-else class="color-$amount-color">{{ symbol }}</span> <!-- 文本Logo，如法定币种符号(￥、$) -->
+    <!-- 文本符号，如法定币种符号(￥、$) -->
+    <span v-if="!symbol || presetTextSymbols.includes(symbol)" class="color-$amount-color">{{ symbol }}</span>
+    <!-- 图片符号 -->
+    <CurrencyIcon v-else class="symbol-logo" :symbol="symbol" :useCdn="useCdn" />
 
     <!-- 金额 -->
     <span class="color-$amount-color amount">{{ amountText }}</span>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "description": "",
   "author": "",
   "license": "ISC",