@peng_kai/kit 0.2.0-beta.29 → 0.2.0-beta.30

package/admin/components/filter/src/FilterDrawer.vue

@@ -1,153 +1,153 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<{
-  loading?: boolean
-  filterQuery?: any
-  filterParams?: any
-  filterForm?: any
-}>(), {
-  loading: undefined,
-});
-const emits = defineEmits<{
-  (e: 'filter'): void
-  (e: 'reset', value: number): void
-}>();
-
-const filterVisible = ref(false);
-const loading = computed(() => {
-  const _loading1 = props.loading;
-  const _loading2: boolean = props.filterQuery?.isFetching.value;
-
-  if (_loading1 === undefined && _loading2 === undefined)
-    return false;
-
-  if (_loading1 !== undefined)
-    return _loading1;
-
-  return _loading2;
-});
-
-function filter() {
-  props.filterParams?.update?.();
-  emits('filter');
-  filterVisible.value = false;
-}
-
-function reset() {
-  props.filterForm?.$form.resetFields?.();
-  props.filterParams?.update?.();
-  emits('reset', 1);
-  filterVisible.value = false;
-}
-</script>
-
-<template>
-  <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
-    <!-- .filter-params 为空时显示 .filter-params-tips -->
-
-    <div class="m--3 p-3" @click="filterVisible = true">
-      <div class="filter-params">
-        <slot name="params" />
-      </div>
-      <div class="filter-params-tips">
-        条件筛选，点击打开
-      </div>
-    </div>
-
-    <!-- 操作区 -->
-    <div v-if="$slots.actions || $slots.moreActions" class="actions">
-      <slot name="actions" />
-
-      <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
-        <AButton type="link" size="small">
-          更多
-        </AButton>
-        <template #overlay>
-          <slot name="moreActions" />
-        </template>
-      </ADropdown>
-    </div>
-  </div>
-
-  <ADrawer
-    v-model:open="filterVisible" class="filter-drawer" placement="bottom"
-    height="50vh"
-  >
-    <template #extra>
-      <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
-        重置
-      </AButton>
-      <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
-        筛选
-      </AButton>
-    </template>
-    <template #default>
-      <slot />
-    </template>
-  </ADrawer>
-</template>
-
-<style scoped lang="scss">
-.filter-params {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 5px 15px;
-}
-
-// .filter-params 为空时显示 .filter-params-tips
-.filter-params-tips {
-  display: none;
-  color: theme('colors.gray.DEFAULT');
-}
-
-.filter-params:empty {
-  display: none;
-}
-
-.filter-params:empty + .filter-params-tips {
-  display: block;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: 1px solid var(--antd-colorBorderSecondary);
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-}
-</style>
-
-<style lang="scss">
-.filter-drawer {
-  .ant-drawer-header {
-    padding: 16px;
-
-    .ant-drawer-close {
-      --expand: 5px;
-
-      padding: var(--expand);
-      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
-    }
-  }
-
-  .ant-drawer-body {
-    padding: 16px;
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-
-    .ant-form-item-label {
-      padding-bottom: 0;
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  loading?: boolean
+  filterQuery?: any
+  filterParams?: any
+  filterForm?: any
+}>(), {
+  loading: undefined,
+});
+const emits = defineEmits<{
+  (e: 'filter'): void
+  (e: 'reset', value: number): void
+}>();
+
+const filterVisible = ref(false);
+const loading = computed(() => {
+  const _loading1 = props.loading;
+  const _loading2: boolean = props.filterQuery?.isFetching.value;
+
+  if (_loading1 === undefined && _loading2 === undefined)
+    return false;
+
+  if (_loading1 !== undefined)
+    return _loading1;
+
+  return _loading2;
+});
+
+function filter() {
+  props.filterParams?.update?.();
+  emits('filter');
+  filterVisible.value = false;
+}
+
+function reset() {
+  props.filterForm?.$form.resetFields?.();
+  props.filterParams?.update?.();
+  emits('reset', 1);
+  filterVisible.value = false;
+}
+</script>
+
+<template>
+  <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
+    <!-- .filter-params 为空时显示 .filter-params-tips -->
+
+    <div class="m--3 p-3" @click="filterVisible = true">
+      <div class="filter-params">
+        <slot name="params" />
+      </div>
+      <div class="filter-params-tips">
+        条件筛选，点击打开
+      </div>
+    </div>
+
+    <!-- 操作区 -->
+    <div v-if="$slots.actions || $slots.moreActions" class="actions">
+      <slot name="actions" />
+
+      <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
+        <AButton type="link" size="small">
+          更多
+        </AButton>
+        <template #overlay>
+          <slot name="moreActions" />
+        </template>
+      </ADropdown>
+    </div>
+  </div>
+
+  <ADrawer
+    v-model:open="filterVisible" class="filter-drawer" placement="bottom"
+    height="50vh"
+  >
+    <template #extra>
+      <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
+        重置
+      </AButton>
+      <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
+        筛选
+      </AButton>
+    </template>
+    <template #default>
+      <slot />
+    </template>
+  </ADrawer>
+</template>
+
+<style scoped lang="scss">
+.filter-params {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 5px 15px;
+}
+
+// .filter-params 为空时显示 .filter-params-tips
+.filter-params-tips {
+  display: none;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.filter-params:empty {
+  display: none;
+}
+
+.filter-params:empty + .filter-params-tips {
+  display: block;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--antd-colorBorderSecondary);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+}
+</style>
+
+<style lang="scss">
+.filter-drawer {
+  .ant-drawer-header {
+    padding: 16px;
+
+    .ant-drawer-close {
+      --expand: 5px;
+
+      padding: var(--expand);
+      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 16px;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    .ant-form-item-label {
+      padding-bottom: 0;
+    }
+  }
+}
+</style>

package/admin/components/scroll-nav/index.ts

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

package/admin/components/text/index.ts

@@ -1,13 +1,13 @@
-import Hash from './src/Hash.vue';
-import Amount from './src/Amount.vue';
-import Datetime from './src/Datetime.vue';
-import Duration from './src/Duration.vue';
-
-export { createTagGetter } from './src/createTagGetter';
-
-export const Text = {
-  Hash,
-  Amount,
-  Datetime,
-  Duration,
-};
+import Hash from './src/Hash.vue';
+import Amount from './src/Amount.vue';
+import Datetime from './src/Datetime.vue';
+import Duration from './src/Duration.vue';
+
+export { createTagGetter } from './src/createTagGetter';
+
+export const Text = {
+  Hash,
+  Amount,
+  Datetime,
+  Duration,
+};

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

@@ -1,121 +1,121 @@
-<script lang="ts">
-import { computed } from 'vue';
-import bigNumber from 'bignumber.js';
-import isNil from 'lodash-es/isNil';
-
-export const config = {
-  aboveColor: '#52c41a',
-  belowColor: '#ff4d4f',
-};
-
-/**
- * 当 symbol 为以下值时，使用预设的 Logo
- */
-const presetSymbols: 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://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',
-};
-</script>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    /** 金额 */
-    amount?: string | number
-    /** 符号Logo, 可以是币种Logo的URL、法定货币符号($) */
-    symbol?: string
-    /** 精度 */
-    precision?: number
-    /** 单位，如币种名称 */
-    unit?: string
-    /** 保留小数的位数 */
-    fractionDigits?: number
-    /** 是否填充 0 */
-    padZero?: boolean
-    /** 金额是否红/绿显示 */
-    colorful?: boolean
-    /** 是否是大约数 */
-    approx?: boolean
-  }>(),
-  {
-    padZero: false,
-    fractionDigits: 18,
-    colorful: false,
-  },
-);
-
-const amountText = computed(() => {
-  const _amount = props.amount;
-
-  if (isNil(_amount))
-    return '-';
-
-  let bn = bigNumber(_amount);
-  bn = !isNil(props.precision) ? bn.dividedBy(10 ** props.precision) : bn;
-  let bnt = bn.toFormat(props.fractionDigits);
-  bnt = props.padZero ? bnt : bnt.replace(/\.?0+$/, '');
-
-  return bnt;
-});
-const amountColor = computed(() => {
-  const num = Number.parseFloat(props.amount as string);
-
-  if (!props.colorful || (Number.isNaN(num) ? true : num === 0))
-    return '';
-
-  return num > 0 ? config.aboveColor : (num < 0 ? config.belowColor : '');
-});
-const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? '');
-</script>
-
-<template>
-  <div class="amount-wrapper" :style="{ '--amount-color': amountColor }">
-    <!-- 约等于 -->
-    <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 class="color-$amount-color amount">{{ amountText }}</span>
-
-    <!-- 单位 -->
-    <span v-if="props.unit" class="unit">{{ props.unit }}</span>
-  </div>
-</template>
-
-<style lang="scss">
-.amount-wrapper {
-  display: flex;
-  align-items: center;
-
-  .symbol-logo {
-    display: block;
-    width: 1.1em;
-    height: 1.1em;
-    margin-right: 0.2em;
-  }
-
-  .amount {
-    font-family: 'dinm';
-  }
-
-  .currency-name {
-    margin-left: 0.2em;
-  }
-
-  .unit {
-    display: inline-block;
-    margin-left: 0.2em;
-  }
-}
-</style>
+<script lang="ts">
+import { computed } from 'vue';
+import bigNumber from 'bignumber.js';
+import isNil from 'lodash-es/isNil';
+
+export const config = {
+  aboveColor: '#52c41a',
+  belowColor: '#ff4d4f',
+};
+
+/**
+ * 当 symbol 为以下值时，使用预设的 Logo
+ */
+const presetSymbols: 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://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',
+};
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /** 金额 */
+    amount?: string | number
+    /** 符号Logo, 可以是币种Logo的URL、法定货币符号($) */
+    symbol?: string
+    /** 精度 */
+    precision?: number
+    /** 单位，如币种名称 */
+    unit?: string
+    /** 保留小数的位数 */
+    fractionDigits?: number
+    /** 是否填充 0 */
+    padZero?: boolean
+    /** 金额是否红/绿显示 */
+    colorful?: boolean
+    /** 是否是大约数 */
+    approx?: boolean
+  }>(),
+  {
+    padZero: false,
+    fractionDigits: 18,
+    colorful: false,
+  },
+);
+
+const amountText = computed(() => {
+  const _amount = props.amount;
+
+  if (isNil(_amount))
+    return '-';
+
+  let bn = bigNumber(_amount);
+  bn = !isNil(props.precision) ? bn.dividedBy(10 ** props.precision) : bn;
+  let bnt = bn.toFormat(props.fractionDigits);
+  bnt = props.padZero ? bnt : bnt.replace(/\.?0+$/, '');
+
+  return bnt;
+});
+const amountColor = computed(() => {
+  const num = Number.parseFloat(props.amount as string);
+
+  if (!props.colorful || (Number.isNaN(num) ? true : num === 0))
+    return '';
+
+  return num > 0 ? config.aboveColor : (num < 0 ? config.belowColor : '');
+});
+const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? '');
+</script>
+
+<template>
+  <div class="amount-wrapper" :style="{ '--amount-color': amountColor }">
+    <!-- 约等于 -->
+    <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 class="color-$amount-color amount">{{ amountText }}</span>
+
+    <!-- 单位 -->
+    <span v-if="props.unit" class="unit">{{ props.unit }}</span>
+  </div>
+</template>
+
+<style lang="scss">
+.amount-wrapper {
+  display: flex;
+  align-items: center;
+
+  .symbol-logo {
+    display: block;
+    width: 1.1em;
+    height: 1.1em;
+    margin-right: 0.2em;
+  }
+
+  .amount {
+    font-family: 'dinm';
+  }
+
+  .currency-name {
+    margin-left: 0.2em;
+  }
+
+  .unit {
+    display: inline-block;
+    margin-left: 0.2em;
+  }
+}
+</style>

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

@@ -1,26 +1,26 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
-  seconds: number
-}>();
-
-const formattedDuration = computed(() => {
-  const days = Math.floor(props.seconds / (3600 * 24));
-  const hours = Math.floor((props.seconds % (3600 * 24)) / 3600);
-  const minutes = Math.floor((props.seconds % 3600) / 60);
-  const seconds = props.seconds % 60;
-  let formattedDuration = '';
-
-  days >= 1 && (formattedDuration += `${Math.floor(days)}天 `);
-  hours >= 1 && (formattedDuration += `${Math.floor(hours)}小时 `);
-  minutes >= 1 && (formattedDuration += `${Math.floor(minutes)}分钟 `);
-  seconds >= 1 && (formattedDuration += `${Math.floor(seconds)}秒`);
-
-  return formattedDuration;
-});
-</script>
-
-<template>
-  <span>{{ formattedDuration }}</span>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  seconds: number
+}>();
+
+const formattedDuration = computed(() => {
+  const days = Math.floor(props.seconds / (3600 * 24));
+  const hours = Math.floor((props.seconds % (3600 * 24)) / 3600);
+  const minutes = Math.floor((props.seconds % 3600) / 60);
+  const seconds = props.seconds % 60;
+  let formattedDuration = '';
+
+  days >= 1 && (formattedDuration += `${Math.floor(days)}天 `);
+  hours >= 1 && (formattedDuration += `${Math.floor(hours)}小时 `);
+  minutes >= 1 && (formattedDuration += `${Math.floor(minutes)}分钟 `);
+  seconds >= 1 && (formattedDuration += `${Math.floor(seconds)}秒`);
+
+  return formattedDuration;
+});
+</script>
+
+<template>
+  <span>{{ formattedDuration }}</span>
+</template>