新增前端vue

web-vue/packages/core/components/CountDown/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '@jeesite/core/utils';
+import countButton from './src/CountButton.vue';
+import countdownInput from './src/CountdownInput.vue';
+
+export const CountdownInput = withInstall(countdownInput);
+export const CountButton = withInstall(countButton);

web-vue/packages/core/components/CountDown/src/CountButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
+    {{ getButtonText }}
+  </Button>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watchEffect, computed, unref } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import { useCountdown } from './useCountdown';
+  import { isFunction } from '@jeesite/core/utils/is';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+
+  const props = {
+    value: { type: [Object, Number, String, Array] },
+    count: { type: Number, default: 60 },
+    beforeStartFunc: {
+      type: Function as PropType<() => Promise<boolean>>,
+      default: null,
+    },
+  };
+
+  export default defineComponent({
+    name: 'CountButton',
+    components: { Button },
+    props,
+    setup(props) {
+      const loading = ref(false);
+
+      const { currentCount, isStart, start, reset } = useCountdown(props.count);
+      const { t } = useI18n();
+
+      const getButtonText = computed(() => {
+        return !unref(isStart)
+          ? t('component.countdown.normalText')
+          : t('component.countdown.sendText', [unref(currentCount)]);
+      });
+
+      watchEffect(() => {
+        props.value === undefined && reset();
+      });
+
+      /**
+       * @description: Judge whether there is an external function before execution, and decide whether to start after execution
+       */
+      async function handleStart() {
+        const { beforeStartFunc } = props;
+        if (beforeStartFunc && isFunction(beforeStartFunc)) {
+          loading.value = true;
+          try {
+            const canStart = await beforeStartFunc();
+            canStart && start();
+          } finally {
+            loading.value = false;
+          }
+        } else {
+          start();
+        }
+      }
+      return { handleStart, currentCount, loading, getButtonText, isStart };
+    },
+  });
+</script>

web-vue/packages/core/components/CountDown/src/CountdownInput.vue

@@ -0,0 +1,58 @@
+<template>
+  <a-input v-bind="$attrs" :class="prefixCls" :size="size" v-model:value="state" autocomplete="off">
+    <template #addonAfter>
+      <CountButton
+        type="link"
+        :size="size === 'large' ? 'middle' : 'small'"
+        :count="count"
+        :value="state"
+        :beforeStartFunc="sendCodeApi"
+      />
+    </template>
+    <template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+  </a-input>
+</template>
+<script lang="ts" setup name="CountDownInput">
+  import { PropType } from 'vue';
+  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
+  import { useRuleFormItem } from '@jeesite/core/hooks/component/useFormItem';
+  import CountButton from './CountButton.vue';
+
+  const props = defineProps({
+    value: { type: String },
+    size: { type: String, validator: (v: string) => ['default', 'large', 'small'].includes(v) },
+    count: { type: Number, default: 60 },
+    sendCodeApi: {
+      type: Function as PropType<() => Promise<boolean>>,
+      default: () => {},
+    },
+  });
+
+  const emit = defineEmits(['change', 'update:value']);
+
+  const { prefixCls } = useDesign('countdown-input');
+  const [state] = useRuleFormItem(props);
+</script>
+<style lang="less">
+  @prefix-cls: ~'jeesite-countdown-input';
+
+  .@{prefix-cls} {
+    .ant-input-group-addon {
+      padding-right: 0;
+      background-color: transparent;
+      border: none;
+
+      button {
+        font-size: 14px;
+
+        &.ant-btn-sm {
+          font-size: 13px;
+          height: 22px;
+          padding: 0 7px;
+        }
+      }
+    }
+  }
+</style>

web-vue/packages/core/components/CountDown/src/useCountdown.ts

@@ -0,0 +1,51 @@
+import { ref, unref } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
+
+export function useCountdown(count: number) {
+  const currentCount = ref(count);
+
+  const isStart = ref(false);
+
+  let timerId: ReturnType<typeof setInterval> | null;
+
+  function clear() {
+    timerId && window.clearInterval(timerId);
+  }
+
+  function stop() {
+    isStart.value = false;
+    clear();
+    timerId = null;
+  }
+
+  function start() {
+    if (unref(isStart) || !!timerId) {
+      return;
+    }
+    isStart.value = true;
+    timerId = setInterval(() => {
+      if (unref(currentCount) === 1) {
+        stop();
+        currentCount.value = count;
+      } else {
+        currentCount.value -= 1;
+      }
+    }, 1000);
+  }
+
+  function reset() {
+    currentCount.value = count;
+    stop();
+  }
+
+  function restart() {
+    reset();
+    start();
+  }
+
+  tryOnUnmounted(() => {
+    reset();
+  });
+
+  return { start, reset, restart, clear, stop, currentCount, isStart };
+}