@peng_kai/kit 0.2.30 → 0.2.32

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

@@ -1,8 +1,15 @@
 <script lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, reactive, ref, toValue } from 'vue';
 import { useInjectedAdminConfig } from '../../provider';
 
-const presetSymbols = reactive<Record<string, string>>({
+export interface CurrencyIconProps {
+  symbol?: string
+  size?: string
+  cdn?: string
+  useCdn?: boolean
+}
+
+const imgIcons = ref<Record<string, string>>({
   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',
@@ -12,45 +19,62 @@ const presetSymbols = reactive<Record<string, string>>({
   MATIC: 'https://api.iconify.design/cryptocurrency-color:matic.svg',
   SOL: 'https://api.iconify.design/cryptocurrency-color:sol.svg',
 });
-const presetTextSymbols = reactive(['¥', '€', '¥', '₱', '$', 'AED', 'ARS', '$', 'BDT', 'R$', '$', 'Fr', '$', 'Kč', 'KR', '£', 'Ft', 'Rp', '₪', '₹', '₩', '$', 'RM', 'NGN', 'KR', '$', 'Rs', 'zł', '₽', 'SAR', 'SEK', 'S$', '฿', '₺', 'NT$', 'UAH', '₫', 'R']);
+const textIcons = ref(['¥', '€', '¥', '₱', '$', 'AED', 'ARS', '$', 'BDT', 'R$', '$', 'Fr', '$', 'Kč', 'KR', '£', 'Ft', 'Rp', '₪', '₹', '₩', '$', 'RM', 'NGN', 'KR', '$', 'Rs', 'zł', '₽', 'SAR', 'SEK', 'S$', '฿', '₺', 'NT$', 'UAH', '₫', 'R']);
+const fullback = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjODQ4YTlkNTUiIGQ9Ik0xMCAyMGExMCAxMCAwIDEgMSAwLTIwIDEwIDEwIDAgMCAxIDAgMjBtMS01aDFhMyAzIDAgMCAwIDAtNkg3Ljk5YTEgMSAwIDAgMSAwLTJIMTRWNWgtM1YzSDl2Mkg4YTMgMyAwIDEgMCAwIDZoNGExIDEgMCAxIDEgMCAySDZ2MmgzdjJoMnoiLz48L3N2Zz4=';
+
+const checkHttpUrl = (value: unknown) => String(value).startsWith('http');
+const checkBase64 = (value: unknown) => String(value).startsWith('data:image');
 </script>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  symbol?: string
-  size?: string
-  useCdn?: boolean
-}>(), {
+defineOptions({
+  inheritAttrs: false,
+});
+const props = withDefaults(defineProps<CurrencyIconProps>(), {
   size: '1.1em',
   symbol: '',
   useCdn: true,
 });
 
-const { cdn } = useInjectedAdminConfig() ?? {};
-
+const { cdn: cdnCtx } = useInjectedAdminConfig() ?? {};
+const cdn = computed(() => props.useCdn ? (props.cdn || toValue(cdnCtx)) : '');
 const src = computed(() => {
-  const isHttpUrl = props.symbol.startsWith('http');
-
-  if (isHttpUrl)
+  if (checkHttpUrl(props.symbol) || checkBase64(props.symbol))
     return props.symbol;
-  else if (presetTextSymbols.includes(props.symbol))
+  else if (textIcons.value?.includes(props.symbol))
     return props.symbol;
-  else if (props.useCdn && cdn?.value)
+  else if (cdn.value)
     return `${cdn.value}/currency/${props.symbol}.svg`;
   else
-    return presetSymbols[props.symbol.toUpperCase()];
+    return (imgIcons.value[props.symbol.toUpperCase()] ?? fullback);
 });
+
+function onError(ev: Event) {
+  const $img = ev.target as HTMLImageElement;
+  $img.src = fullback;
+}
 </script>
 
 <template>
   <img
-    class="h-[1em] w-[1em] rounded-full bg-sys-layer-c text-inherit"
+    v-if="checkHttpUrl(src) || checkBase64(src)"
+    v-bind="$attrs"
+    class="currency-icon"
     :src="src"
     :alt="props.symbol"
     :style="{ fontSize: $props.size }"
+    @error="onError"
   >
+  <span v-else v-bind="$attrs">{{ src }}</span>
 </template>
 
+<style lang="scss" scoped>
+img.currency-icon {
+  width: 1em;
+  height: 1em;
+}
+</style>
+
 <!--
   透明图片
   data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

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

@@ -65,9 +65,9 @@ const amountColor = computed(() => {
 <template>
   <div class="amount-wrapper" :style="{ '--amount-color': amountColor }">
     <!-- 约等于 -->
-    <span v-if="props.approx" class="color-$amount-color">≈</span>
+    <span v-if="props.approx">≈</span>
     <!-- 符号 -->
-    <CurrencyIcon v-else class="symbol-logo" :symbol="symbol" :useCdn="useCdn" />
+    <CurrencyIcon class="symbol-logo" :symbol="symbol" :useCdn="useCdn" />
     <!-- 金额 -->
     <span class="color-$amount-color amount">{{ amountText }}</span>
     <!-- 单位 -->
@@ -80,10 +80,8 @@ const amountColor = computed(() => {
   display: flex;
   align-items: center;
 
-  .symbol-logo {
+  img.symbol-logo {
     display: block;
-    width: 1.1em;
-    height: 1.1em;
     margin-right: 0.2em;
   }
 

package/package.json

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

package/utils/locale/LocaleManager.ts

@@ -25,7 +25,7 @@ export class LocaleManager {
   public constructor(loaders: ILoaders) {
     this.metaLoaders = mapKeys(loaders.meta, (_, path) => path.match(metaPathRE)?.[1] ?? path);
     this.messageLoaders = mapKeys(loaders.message, (_, path) => path.match(messagePathRE)?.[1] ?? path);
-    this._locale = this.defaultLocale;
+    this.locale = this.defaultLocale;
   }
 
   /** 当前区域 */
@@ -58,6 +58,7 @@ export class LocaleManager {
     const localeTargets = [searchParams.get('locale'), searchParams.get('lang'), this.getStorageLocale(), navigator.language]
       .filter(locale => !!locale)
       .map(locale => locale!.replace('_', '-'));
+    // 区域代码矩阵，2级数组的第1项是这个区域的标识（也是这个语言对应的文件名:en-US.json），后面是这个区域的代码
     const codeMatrix = this.localesAvailable.map(locale => [locale, ...this.localeMetas[locale].codes]);
     let localeFinal = '';
 

package/vue/components/nav-manager/NavManager.vue

@@ -8,7 +8,7 @@ function useHistory(initialValue: string[] = []) {
   const history = ref([...initialValue]);
   const current = computed(() => history.value[history.value.length - 1]);
   const isFirst = computed(() => history.value.length === 1);
-  const lastOperation = ref<'to' | 'back' | 'replace'>('to');
+  const lastOperation = ref<'to' | 'back' | 'replace'>('replace');
 
   const to = (name: string) => {
     lastOperation.value = 'to';