@peng_kai/kit 0.2.26 → 0.2.28

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

@@ -2,9 +2,17 @@
 import { computed, reactive } from 'vue';
 import { useInjectedAdminConfig } from '../../provider';
 
-const icons = reactive<Record<string, string>>({});
-
-const fullback = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjODQ4YTlkNTUiIGQ9Ik0xMCAyMGExMCAxMCAwIDEgMSAwLTIwIDEwIDEwIDAgMCAxIDAgMjBtMS01aDFhMyAzIDAgMCAwIDAtNkg3Ljk5YTEgMSAwIDAgMSAwLTJIMTRWNWgtM1YzSDl2Mkg4YTMgMyAwIDEgMCAwIDZoNGExIDEgMCAxIDEgMCAySDZ2MmgzdjJoMnoiLz48L3N2Zz4=';
+const presetSymbols = reactive<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',
+  ETH: 'https://api.iconify.design/cryptocurrency-color:eth.svg',
+  BNB: 'https://api.iconify.design/cryptocurrency-color:bnb.svg',
+  BUSD: 'https://api.iconify.design/token-branded:busd.svg',
+  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']);
 </script>
 
 <script setup lang="ts">
@@ -18,17 +26,19 @@ const props = withDefaults(defineProps<{
   useCdn: true,
 });
 
-const { cdn } = useInjectedAdminConfig()!;
+const { cdn } = useInjectedAdminConfig() ?? {};
 
 const src = computed(() => {
   const isHttpUrl = props.symbol.startsWith('http');
 
   if (isHttpUrl)
     return props.symbol;
-  else if (props.useCdn && cdn.value)
+  else if (presetTextSymbols.includes(props.symbol))
+    return props.symbol;
+  else if (props.useCdn && cdn?.value)
     return `${cdn.value}/currency/${props.symbol}.svg`;
   else
-    return icons[props.symbol.toUpperCase()];
+    return presetSymbols[props.symbol.toUpperCase()];
 });
 </script>
 

package/admin/components/permission-tree/PermissionTree.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Checkbox } from 'ant-design-vue';
+import { Checkbox, FormItemRest } from 'ant-design-vue';
 import { computed, triggerRef, watch } from 'vue';
 
 interface TTree {
@@ -9,19 +9,6 @@ interface TTree {
   children?: TTree[]
 }
 
-export function treeToIds(tree: TTree[]) {
-  const ids = [] as number[];
-
-  const isCheckedFn = (node: TTree) => {
-    node.checked && ids.push(node.id);
-    node.children?.length && node.children.forEach(isCheckedFn);
-  };
-
-  tree.forEach(isCheckedFn);
-
-  return ids;
-}
-
 function treeToTable(tree: TTree[]) {
   interface TD {
     id: number
@@ -79,47 +66,36 @@ function treeToStates(tree: TTree[]) {
 
   tree.forEach(assId);
 
-  // for (const id in ids) {
-  //   const state = states[id];
-  //   state.indet = isIndet(state.children.map(cid => states[cid].checked));
-  //   state.children.forEach(cid => states[cid].checked = state.checked);
-  //   [...state.parents].reverse().forEach((pid) => {
-  //     const checks = states[pid].children.map(cid => states[cid].checked);
-  //     state.indet = isIndet(checks);
-  //     state.checked = checks.every(checked => checked);
-  //   });
-  // }
-
-  // Object.keys(states)
-  // [...ids].forEach((id) => {
-  //   const state = states[id];
-  //   state.checked = true;
-  //   state.children.forEach((cid) => {
-  //     states[cid].checked = true;
-  //     states[cid].indet = false;
-  //   });
-  // });
-
   return states;
 }
 
 function updateStates(states: ReturnType<typeof treeToStates>, id: number, checked: boolean) {
   const state = states[id];
+
+  if (!state)
+    return;
+
   state.checked = checked;
   state.indet = false;
   state.children.forEach((cid) => {
-    states[cid].checked = checked;
-    states[cid].indet = false;
+    const cState = states[cid];
+    if (cState) {
+      cState.checked = checked;
+      cState.indet = false;
+    }
   });
-  [...state.parents].reverse().forEach((pid) => {
-    const checks = states[pid].children.map(pid => states[pid].checked);
-    states[pid].indet = isIndet(checks);
-    states[pid].checked = checks.every(checked => checked);
+  [...state.parents].forEach((pid) => {
+    const pState = states[pid];
+    if (pState) {
+      const checks = pState.children.map(cid => states[cid]?.checked);
+      pState.indet = isIndet(checks);
+      pState.checked = checks.every(checked => checked);
+    }
   });
 }
 
 function statesToIds(states: ReturnType<typeof treeToStates>) {
-  return Object.keys(states).map(Number).filter(id => states[id].checked);
+  return Object.keys(states).map(Number).filter(id => states[id]?.checked);
 }
 
 function findAllParents(tree: any[], id: number, path: any[] = []): any[] | undefined {
@@ -157,60 +133,71 @@ function isIndet(arr: boolean[]) {
 
 <script setup lang="ts">
 const props = defineProps<{
-  treeData: TTree[]
+  treeData: TTree[] | null | undefined
 }>();
 const ids = defineModel<number[]>('value', { default: [] });
-const tableData = computed(() => treeToTable(props.treeData));
-const stateMap = computed(() => treeToStates(props.treeData));
+const tableData = computed(() => props.treeData && treeToTable(props.treeData));
+const stateMap = computed(() => props.treeData && treeToStates(props.treeData));
 
 watch(ids, (newV, oldV) => {
-  if (newV === oldV)
+  if (newV === oldV || !stateMap.value)
     return;
 
-  newV.forEach(id => updateStates(stateMap.value, id, true));
+  newV.forEach(id => updateStates(stateMap.value!, id, true));
   triggerRef(stateMap);
 }, { immediate: true });
 
+watch(stateMap, (newV) => {
+  if (newV) {
+    ids.value.forEach(id => updateStates(newV, id, true));
+    triggerRef(stateMap);
+  }
+});
+
 function onCheckChange(id: number) {
-  const checked = !ids.value.includes(id);
-  updateStates(stateMap.value, id, checked);
-  ids.value = statesToIds(stateMap.value);
+  if (stateMap.value) {
+    const checked = !ids.value.includes(id);
+    updateStates(stateMap.value, id, checked);
+    ids.value = statesToIds(stateMap.value);
+  }
 }
 </script>
 
 <template>
   <table class="w-full border-collapse border-$antd-colorBorderSecondary" border>
-    <tr v-for="(row, ri) of tableData" :key="ri">
-      <!-- 模块 -->
-      <td v-if="row[0]" class="w-[6em] px-[1em] py-0.5em" :rowspan="row[0].span">
-        <Checkbox
-          :checked="stateMap[row[0].id].indet ? false : stateMap[row[0].id].checked"
-          :indeterminate="stateMap[row[0].id].indet" @change="onCheckChange(row[0].id)"
-        >
-          {{ row[0].label }}{{ row[0].id }}
-        </Checkbox>
-      </td>
-      <!-- 页面 -->
-      <td v-if="row[1]" class="w-[9em] px-[1em] py-0.5em">
-        <Checkbox
-          :checked="stateMap[row[1].id].indet ? false : stateMap[row[1].id].checked"
-          :indeterminate="stateMap[row[1].id].indet" @change="onCheckChange(row[1].id)"
-        >
-          {{ row[1].label }}
-        </Checkbox>
-      </td>
-      <!-- 功能 -->
-      <td v-if="row[2]" class="px-[1em] py-0.5em">
-        <div class="feat-list">
+    <FormItemRest>
+      <tr v-for="(row, ri) of tableData" :key="ri">
+        <!-- 模块 -->
+        <td v-if="row[0]" class="w-[6em] px-[1em] py-0.5em" :rowspan="row[0].span">
+          <Checkbox
+            :checked="stateMap?.[row[0].id].indet ? false : stateMap?.[row[0].id].checked"
+            :indeterminate="stateMap?.[row[0].id].indet" @change="onCheckChange(row[0].id)"
+          >
+            {{ row[0].label }}{{ row[0].id }}
+          </Checkbox>
+        </td>
+        <!-- 页面 -->
+        <td v-if="row[1]" class="w-[9em] px-[1em] py-0.5em">
           <Checkbox
-            v-for="fItem of row[2]" :key="fItem?.id" :checked="stateMap[fItem.id].checked"
-            @change="onCheckChange(fItem.id)"
+            :checked="stateMap?.[row[1].id].indet ? false : stateMap?.[row[1].id].checked"
+            :indeterminate="stateMap?.[row[1].id].indet" @change="onCheckChange(row[1].id)"
           >
-            {{ fItem.label }}
+            {{ row[1].label }} {{ row[1].id }}
           </Checkbox>
-        </div>
-      </td>
-    </tr>
+        </td>
+        <!-- 功能 -->
+        <td v-if="row[2]" class="px-[1em] py-0.5em">
+          <div class="feat-list">
+            <Checkbox
+              v-for="fItem of row[2]" :key="fItem?.id" :checked="stateMap?.[fItem.id].checked"
+              @change="onCheckChange(fItem.id)"
+            >
+              {{ fItem.label }} {{ fItem.id }}
+            </Checkbox>
+          </div>
+        </td>
+      </tr>
+    </FormItemRest>
   </table>
 </template>
 

package/admin/components/permission-tree/index.ts

@@ -1 +1 @@
-export { default as PermissionTreeCheckbox, treeToIds } from './PermissionTree.vue';
+export { default as PermissionTreeCheckbox } from './PermissionTree.vue';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, reactive } from 'vue';
+import { computed } from 'vue';
 import bigNumber from 'bignumber.js';
 import isNil from 'lodash-es/isNil';
 import { CurrencyIcon } from '../../currency';
@@ -8,15 +8,6 @@ export const config = {
   aboveColor: '#52c41a',
   belowColor: '#ff4d4f',
 };
-
-/**
- * 当 symbol 为以下值时，使用预设的 Logo
- */
-const presetTextSymbols = reactive(['$', '￥']);
-
-export function setConfig(textSymbols: string[]) {
-  presetTextSymbols.concat(textSymbols);
-}
 </script>
 
 <script setup lang="ts">
@@ -75,15 +66,10 @@ const amountColor = computed(() => {
   <div class="amount-wrapper" :style="{ '--amount-color': amountColor }">
     <!-- 约等于 -->
     <span v-if="props.approx" class="color-$amount-color">≈</span>
-
-    <!-- 文本符号，如法定币种符号(￥、$) -->
-    <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>
-
     <!-- 单位 -->
     <span v-if="props.unit" class="unit">{{ props.unit }}</span>
   </div>

package/package.json

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