refactor: 优化公共组件

src/components/button/Button.tsx

@@ -1,19 +1,25 @@
-import {defineComponent} from 'vue';
+import {SlotsType, defineComponent} from 'vue';
 import {NButton, buttonProps} from 'naive-ui';
 import './index.css';
 
 export default defineComponent({
   name: 'LDButton',
   props: buttonProps,
-  setup(props, {slots}) {
-    return function() {
-      return <NButton
+  slots: Object as SlotsType<{
+    default?: string | undefined;
+  }>,
+  render() {
+    const props = this.$props;
+    const slots = this.$slots;
+
+    return (
+      <NButton
         class="ld-button"
         {...props}
         type="primary"
       >
         {slots.default?.()}
-      </NButton>;
-    };
+      </NButton>
+    );
   },
 });

src/components/login-field/input/index.tsx

@@ -1,4 +1,4 @@
-import {defineComponent, Fragment, h} from 'vue';
+import {defineComponent, Fragment, h, SlotsType} from 'vue';
 import {useField} from 'vee-validate';
 import {useI18n} from 'vue-i18n';
 import {NInput, inputProps} from 'naive-ui';
@@ -11,7 +11,12 @@ export default defineComponent({
     placeholder: {type: String, required: true},
     type: inputProps.type,
   },
-  setup(props, {slots}) {
+  slots: Object as SlotsType<{
+    passwordInvisibleIcon?: string | undefined;
+    passwordvisibleIcon?: string | undefined;
+    prefix?: string | undefined;
+  }>,
+  setup(props) {
     const {
       value,
       errorMessage,
@@ -20,33 +25,50 @@ export default defineComponent({
 
     const {t} = useI18n();
 
-    return function() {
-      return h(
+    return {
+      value,
+      errorMessage,
+      setValue,
+      t,
+    };
+  },
+  render() {
+    const {
+      value,
+      errorMessage,
+      setValue,
+      t,
+    } = this;
+    const props = this.$props;
+    const {prefix, passwordInvisibleIcon, passwordvisibleIcon} = this.$slots;
+
+    return (
+      h(
         Fragment as any,
         null,
         [
           h(
             NInput,
             {
-              value: value.value,
+              value,
               ...props,
               class: 'ld-login-field',
               onUpdateValue: setValue,
               showPasswordOn: 'click',
             },
             {
-              prefix: slots.prefix,
-              'password-invisible-icon': slots.passwordInvisibleIcon,
-              'password-visible-icon': slots.passwordvisibleIcon,
+              prefix,
+              'password-invisible-icon': passwordInvisibleIcon,
+              'password-visible-icon': passwordvisibleIcon,
             },
           ),
           h(
             'p',
             {class: ['ld-login-field-error', {'ld-login-field-error-hidden': !errorMessage}]},
-            errorMessage.value && t(errorMessage.value),
+            errorMessage && t(errorMessage),
           ),
         ],
-      );
-    };
+      )
+    );
   },
 });

src/components/login-field/upload/index.tsx

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue';
+import {VNodeRef, defineComponent} from 'vue';
 import placeholder from '@assets/images/register/imgPlaceholder.webp';
 import {useI18n} from 'vue-i18n';
 import {useDropFile, useUpload} from './hooks';
@@ -19,45 +19,69 @@ export default defineComponent({
     const [{uploadRef}, {onUpload, onUploadClick}] = useUpload(setValue);
     const {zoneRef, isOverDropZone} = useDropFile(onUpload);
 
-    return function() {
-      return (
-        <div
-          ref={zoneRef}
+    return {
+      t,
+      value,
+      setValue,
+      errorMessage,
+      uploadRef,
+      onUploadClick,
+      zoneRef,
+      isOverDropZone,
+    };
+  },
+  render() {
+    const {
+      t,
+      value,
+      errorMessage,
+      onUploadClick,
+      isOverDropZone,
+    } = this;
+    const {title} = this.$props;
+
+    return (
+      <div
+        ref="zoneRef"
+        class={[
+          'ld-login-upload-wrapper',
+          {'ld-login-upload-drop-active': isOverDropZone},
+        ]}
+      >
+        <p class="ld-login-upload-title">{title}</p>
+        <NImage
+          objectFit="cover"
+          src={value ? value : placeholder}
           class={[
-            'ld-login-upload-wrapper',
-            {'ld-login-upload-drop-active': isOverDropZone.value},
+            'ld-login-upload-placeholder',
+            {'ld-login-upload-preview-img': Boolean(value)},
+          ]}
+          previewDisabled={value.length === 0}
+          previewSrc={value || void 0}
+        />
+        <p class="ld-login-upload-drap-tip">
+          {t('register.uploadTip')}
+          <span onClick={onUploadClick}>
+            {t('register.upload')}
+          </span>
+        </p>
+        <p
+          v-show={!value}
+          class={[
+            'ld-login-upload-max-size-tip',
+            {'ld-login-upload-upload-error-tip': Boolean(errorMessage)},
           ]}
         >
-          <p class="ld-login-upload-title">{props.title}</p>
-          <NImage
-            objectFit="cover"
-            src={value.value ? value.value : placeholder}
-            class={[
-              'ld-login-upload-placeholder',
-              {'ld-login-upload-preview-img': Boolean(value.value)},
-            ]}
-            previewDisabled={value.value.length === 0}
-            previewSrc={value.value || void 0}
-          />
-          <p class="ld-login-upload-drap-tip">
-            {t('register.uploadTip')}
-            <span onClick={onUploadClick}>
-              {t('register.upload')}
-            </span>
-          </p>
-          <p
-            v-show={!value.value}
-            class={[
-              'ld-login-upload-max-size-tip',
-              {'ld-login-upload-upload-error-tip': Boolean(errorMessage.value)},
-            ]}
-          >
-            {t(errorMessage.value || 'register.maxSizeTip')}
-          </p>
+          {t(errorMessage || 'register.maxSizeTip')}
+        </p>
 
-          <input v-show={false} ref={uploadRef} type="file" accept="image/*" />
-        </div>
-      );
-    };
+        <input
+          v-show={false}
+          ref="uploadRef"
+          type="file"
+          accept="image/*"
+        />
+      </div>
+    );
   },
 });