@peng_kai/kit 0.2.0-beta.24 → 0.2.0-beta.26

package/admin/components/settings/src/Settings.vue

@@ -0,0 +1,329 @@
+<script lang="ts">
+import { reactiveComputed } from '@vueuse/core';
+import { cloneDeep, mapKeys, mapValues } from 'lodash-es';
+import dayjs from 'dayjs';
+import { Button, Card, CheckboxGroup, DatePicker, type DatePickerProps, Form, FormItem, Input, InputNumber, RadioGroup, RangePicker, Select, Textarea } from 'ant-design-vue';
+import { computed, ref, toRef } from 'vue';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+import { type ItemSchema, useAntdForm } from '../../../../antd';
+
+interface IConfigDetail {
+  category_id: number
+  data_type: string
+  form_type: number
+  key: string
+  label: string
+  options: any
+  required: number
+  sort: number
+  status: number
+  summary: string
+  value: any
+}
+
+enum FormTypes {
+  /** 数字输入框 */
+  NUMBER_INPUT = 0,
+  /** 文本输入框 */
+  TEXT_INPUT = 1,
+  /** 多行文本输入框 */
+  TEXTAREA = 2,
+  /** 开关 */
+  SWITCH = 3,
+  /** 单选框 */
+  RADIO = 4,
+  /** 多选框 */
+  CHECKBOX = 5,
+  /** 单选下拉选择器 */
+  SINGLE_SELECT = 6,
+  /** 多选下拉选择器 */
+  MULTIPLE_SELECT = 7,
+  /** 单一日期选择器 */
+  SINGLE_DATE_PICKER = 13,
+  /** 日期范围选择器 */
+  RANGE_DATE_PICKER = 14,
+}
+
+const antdPropsResolvers: Record<number, (config: IConfigDetail) => IConfigDetail> = {
+  [FormTypes.SWITCH](config) {
+    const props: any = {};
+
+    if (config.options) {
+      props.options = config.options.split(',').map((item: any) => {
+        const [label, value] = item.split(':');
+        return { value, label };
+      });
+    }
+    else {
+      props.options = [{ value: '1', label: '是' }, { value: '0', label: '否' }];
+    }
+
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.RADIO](config) {
+    return this[FormTypes.SWITCH](config);
+  },
+  [FormTypes.CHECKBOX](config) {
+    const props: any = {};
+    props.options = config.options.split(',').map((item: any) => {
+      const [label, value] = item.split(':');
+      return { value, label };
+    });
+
+    config.value = config.value.split(',');
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.SINGLE_SELECT](config) {
+    return this[FormTypes.SWITCH](config);
+  },
+  [FormTypes.MULTIPLE_SELECT](config) {
+    return this[FormTypes.CHECKBOX](config);
+  },
+  [FormTypes.SINGLE_DATE_PICKER](config) {
+    const props: DatePickerProps = {};
+
+    if (config.options) {
+      const [minDate, maxDate] = (config.options || '/').split('/').map(dayjs);
+      props.disabledDate = (current) => {
+        return current.isBefore(minDate) || current.isAfter(maxDate);
+      };
+    }
+
+    config.value = config.value === '' ? undefined : dayjs(config.value);
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.RANGE_DATE_PICKER](config) {
+    const props: DatePickerProps = {};
+
+    if (config.options) {
+      const [minDate, maxDate] = (config.options || '/').split('/').map(dayjs);
+      props.disabledDate = (current) => {
+        return current.isBefore(minDate) || current.isAfter(maxDate);
+      };
+    }
+
+    if (config.value === '')
+      config.value = [undefined, undefined];
+    else
+      config.value = (config.value || '/').split('/').map(dayjs);
+
+    config.options = props;
+
+    return config;
+  },
+};
+const antdValueResolvers: Record<number, (value: any) => any> = {
+  [FormTypes.CHECKBOX](value) {
+    if (Array.isArray(value))
+      return value.join(',');
+
+    return value;
+  },
+  [FormTypes.MULTIPLE_SELECT](value) {
+    if (Array.isArray(value))
+      return value.join(',');
+
+    return value;
+  },
+  [FormTypes.SINGLE_DATE_PICKER](value) {
+    if (dayjs.isDayjs(value))
+      return value.format('YYYY-MM-DD');
+
+    return value;
+  },
+  [FormTypes.RANGE_DATE_PICKER](value) {
+    if (dayjs.isDayjs(value[0]) && dayjs.isDayjs(value[1]))
+      return [value[0].format('YYYY-MM-DD'), value[1].format('YYYY-MM-DD')].join('/');
+
+    return value;
+  },
+};
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  categoryApi: Api.Request
+  configApi: Api.Request
+  updateApi: Api.Request
+}>();
+
+const queryClient = useQueryClient();
+
+/* 配置分类 */
+const categoryId = ref(1);
+const categoryQuerier = useQuery({
+  queryKey: [props.categoryApi.id],
+  queryFn: () => props.categoryApi(undefined),
+});
+const categoryList = computed(() => categoryQuerier.data.value?.map((item: any) => ({ key: String(item.type), tab: item.label })));
+
+/* 当前分类下的配置 */
+const configQuerier = useQuery<IConfigDetail[] | undefined>({
+  enabled: computed(() => !!categoryQuerier.data.value),
+  queryKey: [props.configApi.id, categoryId],
+  queryFn: () => props.configApi({ category_id: categoryId.value }),
+});
+const configList = computed(() => {
+  const list = cloneDeep(configQuerier.data.value);
+
+  if (!list?.length)
+    return;
+
+  for (let i = 0; i < list.length; i++) {
+    const config = { ...list[i] };
+    list[i] = antdPropsResolvers[config.form_type]?.(config) ?? config;
+  }
+
+  return list;
+});
+const configMap = computed(() => mapKeys(cloneDeep(configQuerier.data.value ?? []), 'key'));
+
+/* 配置表单 */
+const settingMutator = useMutation({
+  mutationKey: [props.updateApi.id],
+  mutationFn: props.updateApi.setDefaultConfig({ successMessage: '更新成功' }),
+  onSuccess() {
+    configQuerier.refetch();
+    queryClient.invalidateQueries({ queryKey: [props.configApi.id], exact: false });
+  },
+});
+const formSchema = reactiveComputed(() => {
+  const _configList = configList.value ?? [];
+  const entries = _configList.map(config => [
+    config.key,
+    {
+      value: cloneDeep(config.value),
+      rules: config.required ? [{ required: true }] : undefined,
+    },
+  ] as [string, ItemSchema]);
+  const schema = Object.fromEntries(entries);
+
+  return schema;
+});
+const settingForm = useAntdForm(formSchema, {
+  transform(state) {
+    return mapValues(state, (v, k) => {
+      const formType = configMap.value[k].form_type;
+      const resolver = antdValueResolvers[formType];
+      return resolver ? resolver(v) : v;
+    });
+  },
+});
+
+/** 提交表单内容 */
+async function submitSetting() {
+  const body = await settingForm.$form.validate?.().catch(() => {});
+
+  if (body)
+    await settingMutator.mutateAsync({ requestBody: body });
+}
+
+/** 重置表单内容 */
+function resetSetting() {
+  configList.value?.forEach(config => settingForm.state[config.key] = cloneDeep(config.value));
+  settingForm.$form.clearValidate?.();
+}
+</script>
+
+<template>
+  <Card
+    class="antd-cover__actions-right-align"
+    :activeTabKey="String(categoryId)"
+    :tabList="categoryList"
+    :loading="configQuerier.isPending.value"
+    @tabChange="key => categoryId = Number(key)"
+  >
+    <Form
+      v-bind="settingForm.props"
+      class="ant-cover__col2-form"
+      layout="vertical"
+      :disabled="settingMutator.isPending.value"
+    >
+      <template v-for="item of configList" :key="item.key">
+        <FormItem v-bind="settingForm.itemProps[item.key]" :label="item.label" :extra="item.summary">
+          <slot
+            v-if="$slots[item.key]"
+            :name="item.key"
+            :state="toRef(settingForm.state, item.key)"
+            :config="item"
+            :orginConfig="configMap[item.key]"
+          />
+          <template v-else>
+            <slot v-if="item.form_type === FormTypes.NUMBER_INPUT" :name="FormTypes.NUMBER_INPUT">
+              <InputNumber v-model:value="settingForm.state[item.key]" class="w-full" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.TEXT_INPUT" :name="FormTypes.TEXT_INPUT">
+              <Input v-model:value="settingForm.state[item.key]" allowClear />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.TEXTAREA" :name="FormTypes.TEXTAREA">
+              <Textarea v-model:value="settingForm.state[item.key]" :rows="4" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.SWITCH" :name="FormTypes.SWITCH">
+              <RadioGroup
+                v-model:value="settingForm.state[item.key]"
+                v-bind="item.options"
+                buttonStyle="solid"
+                optionType="button"
+              />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.RADIO" :name="FormTypes.RADIO">
+              <RadioGroup
+                v-model:value="settingForm.state[item.key]"
+                buttonStyle="solid"
+                v-bind="item.options"
+              />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.CHECKBOX" :name="FormTypes.CHECKBOX">
+              <CheckboxGroup v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.SINGLE_SELECT" :name="FormTypes.SINGLE_SELECT">
+              <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.MULTIPLE_SELECT" :name="FormTypes.MULTIPLE_SELECT">
+              <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" mode="multiple" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.SINGLE_DATE_PICKER" :name="FormTypes.SINGLE_DATE_PICKER">
+              <DatePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.RANGE_DATE_PICKER" :name="FormTypes.RANGE_DATE_PICKER">
+              <RangePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+            </slot>
+
+            <span v-else class="text-red">没有找到预设 form_type:{{ item.form_type }}，可以通过 {{ item.key }} 插槽自定义</span>
+          </template>
+        </FormItem>
+      </template>
+    </Form>
+
+    <template #actions>
+      <Button :disabled="settingMutator.isPending.value" @click="resetSetting()">
+        重置
+      </Button>
+      <Button type="primary" :loading="settingMutator.isPending.value" @click="submitSetting()">
+        提交
+      </Button>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.ant-cover__col2-form :deep(.ant-form-item-label > label) {
+  // padding-left: 0.5em;
+  // border-left: 2px solid #2361d0;
+}
+</style>

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>