refactor: 使用useForm重构登录(未完成)

packages/@core/ui-kit/shadcn-ui/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './expandable-arrow';
 export * from './full-screen';
 export * from './hover-card';
 export * from './icon';
+export * from './input-captcha';
 export * from './input-password';
 export * from './link';
 export * from './logo';

packages/@core/ui-kit/shadcn-ui/src/components/input-captcha/index.ts

@@ -0,0 +1 @@
+export { default as VbenInputCaptcha } from './input-captcha.vue';

packages/@core/ui-kit/shadcn-ui/src/components/input-captcha/input-captcha.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Input as VbenInput } from '../ui/input';
+/**
+ * 非通用组件 直接按业务来写
+ */
+defineProps({
+  captcha: {
+    default: '',
+    type: String,
+  },
+  label: {
+    default: '验证码',
+    type: String,
+  },
+  placeholder: {
+    default: '验证码',
+    type: String,
+  },
+});
+
+defineEmits<{ captchaClick: [] }>();
+
+const modelValue = defineModel({ default: '', type: String });
+</script>
+
+<template>
+  <!-- 图片验证码 -->
+  <div class="flex w-full">
+    <div class="flex-1">
+      <VbenInput
+        id="code"
+        v-model="modelValue"
+        :class="$attrs.class ?? {}"
+        :label="label"
+        :placeholder="placeholder"
+        name="code"
+        required
+        type="text"
+      />
+    </div>
+    <img
+      :src="captcha"
+      class="h-[40px] w-[115px] rounded-r-md"
+      @click="$emit('captchaClick')"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+/**
+  验证码输入框样式
+  去除右边的圆角
+*/
+input[id='code'] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+</style>