.vscode/settings.json

@@ -22,7 +22,6 @@
   "cSpell.words": [
     "baomitu",
     "bezier",
-    "Cascader",
     "Clickoutside",
     "codabar",
     "commitmsg",
@@ -45,7 +44,6 @@
     "siderbar",
     "snapline",
     "stylelint",
-    "unocss",
     "WUJIE",
     "zlevel"
   ]

CHANGELOG.md

@@ -1,23 +1,3 @@
-## 5.2.2
-
-## Feats
-
-- `RForm` 组件相关
-  - 新增 `submitWhenEnter` 配置项，允许在按下回车键时自动触发表单的校验，如果校验成功则会自动触发 `onFinish` 事件
-  - 新增 `onFinish` 配置项，允许在表单校验成功后自动触发的事件
-  - 新增 `autocomplete` 配置项，允许配置表单的自动完成功能，默认配置为 `off`
-  - 新增 `loading` 配置项，允许配置表单的加载状态
-  - 新增 `loadingDescription` 配置项，允许配置表单的加载状态的描述
-- `useForm` 相关
-  - 新增 `validateTargetField` 方法，允许验证指定表单项的规则
-  - 初始化方法现在支持传入函数，允许动态获取表单的初始化值与规则
-  - `formModel` 方法现在会默认联合 `Recordable` 类型，获取初始化类型中未获取到的类型时，默认推到为 `any` 类型
-  - 新增了 `formConditionRef` 属性，现在可以在内部解构获取一个 `ref` 包裹的响应式初始化表单对象值
-  - 新增了 `updateFormCondition` 方法，允许更新表单的值，该方法会覆盖初始化值
-- 更新依赖为主流版本
-- 新增 `unocss` 原子化样式库，但是不推荐全量使用，仅作为一些简单的样式片段使用，否则在调试的时候将会是灾难
-  > 新增 `unocss` 后，在使用 `ProTable` 组件的流体高度最外层父元素配置时，可以便捷的配置 `h-full` 即可。
-
 ## 5.2.1
 
 ## Feats

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "5.2.2",
+  "version": "5.2.1",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || ^20.0.0 || >=22.0.0",
@@ -48,8 +48,8 @@
     "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
     "naive-ui": "^2.42.0",
-    "pinia": "^3.0.3",
+    "pinia": "^3.0.1",
-    "pinia-plugin-persistedstate": "^4.4.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
     "print-js": "^1.6.0",
     "vue": "^3.5.17",
     "vue-demi": "0.14.10",
@@ -59,6 +59,8 @@
     "vue3-next-qrcode": "3.0.2"
   },
   "devDependencies": {
+    "@amap/amap-jsapi-types": "0.0.15",
+    "@ant-design/icons-vue": "7.0.1",
     "@commitlint/cli": "19.7.1",
     "@commitlint/config-conventional": "19.7.1",
     "@eslint/js": "9.28.0",
@@ -68,6 +70,7 @@
     "@types/jsbarcode": "3.11.4",
     "@types/lodash-es": "4.17.12",
     "@types/mockjs": "1.0.10",
+    "@types/three": "0.171.0",
     "@typescript-eslint/eslint-plugin": "8.24.0",
     "@typescript-eslint/parser": "8.24.0",
     "@vitejs/plugin-vue": "5.2.3",
@@ -93,7 +96,6 @@
     "sass": "1.86.3",
     "svg-sprite-loader": "6.0.11",
     "typescript": "5.8.3",
-    "unocss": "66.3.3",
     "unplugin-auto-import": "19.1.2",
     "unplugin-vue-components": "0.28.0",
     "vite": "6.3.5",

src/components/base/RForm/src/Form.tsx

@@ -1,41 +1,17 @@
-import { NForm, NSpin } from 'naive-ui'
+import { NForm } from 'naive-ui'
 
 import props from './props'
-import { call, unrefElement } from '@/utils'
+import { call } from '@/utils'
 import { useTemplateRef } from 'vue'
-import { useEventListener } from '@vueuse/core'
 
 import type { RFormInst } from './types'
-import type { ShallowRef } from 'vue'
+import type { FormProps } from 'naive-ui'
 
 export default defineComponent({
   name: 'RForm',
   props,
   setup(props, { expose }) {
     const formRef = useTemplateRef<RFormInst>('formRef')
-    const currentSubmitFn = computed(() => props.onFinish ?? Promise.resolve)
-
-    const bindKeydownListener = (e: KeyboardEvent) => {
-      const keyCode = e.code
-
-      if (keyCode === 'Enter') {
-        e.stopPropagation()
-        e.preventDefault()
-
-        formRef.value?.validate().then(currentSubmitFn.value)
-      }
-    }
-
-    if (props.submitWhenEnter) {
-      useEventListener(
-        formRef as unknown as ShallowRef<HTMLElement>,
-        'keydown',
-        bindKeydownListener,
-        {
-          capture: true,
-        },
-      )
-    }
 
     onMounted(() => {
       // 主动调用 register 方法，满足 useForm 方法正常调用
@@ -44,16 +20,6 @@ export default defineComponent({
       if (onRegister && formRef.value) {
         call(onRegister, formRef.value)
       }
-
-      if (formRef.value) {
-        const formElement = unrefElement(
-          formRef.value as unknown as HTMLFormElement,
-        )
-
-        if (formElement) {
-          formElement.autocomplete = props.autocomplete
-        }
-      }
     })
 
     expose()
@@ -64,22 +30,13 @@ export default defineComponent({
   },
   render() {
     const { $attrs, $props, $slots } = this
-    const { loading, loadingDescription, ...restProps } = $props
 
     return (
-      <NSpin
+      <NForm {...$attrs} {...($props as FormProps)} ref="formRef">
-        show={loading}
+        {{
-        description={loadingDescription}
+          ...$slots,
-        style={{
-          height: 'auto',
         }}
-      >
+      </NForm>
-        <NForm {...$attrs} {...restProps} ref="formRef">
-          {{
-            ...$slots,
-          }}
-        </NForm>
-      </NSpin>
     )
   },
 })

src/components/base/RForm/src/hooks/useForm.ts

@@ -40,11 +40,10 @@ const useForm = <
   T extends Recordable = Recordable,
   R extends RFormRules = RFormRules,
 >(
-  model?: T | (() => T),
+  model?: T,
-  rules?: R | (() => R),
+  rules?: R,
 ) => {
   const formRef = shallowRef<RFormInst>()
-  const formModelRef = ref<T>()
 
   const register = (inst: RFormInst) => {
     if (inst) {
@@ -62,15 +61,6 @@ const useForm = <
     return formRef.value
   }
 
-  // 初始化 formModelRef 的值，根据 model 的类型进行初始化
-  const initialFormModel = () => {
-    if (typeof model === 'function') {
-      formModelRef.value = model() ?? ({} as T)
-    } else {
-      formModelRef.value = cloneDeep(model) ?? ({} as T)
-    }
-  }
-
   /**
    *
    * @description
@@ -101,9 +91,6 @@ const useForm = <
    * 该方法可以实现重置表单的需求，因为在 vue 的设计理念中，表单的值绑定是直接绑定在每个组件上，
    * 而不是利用 Form 表单机制，所以需要这么去做表单的初始化操作维护机制。
    *
-   * 在 5.2.2 版本中，新增了 formConditionRef 属性，现在可以解构获取一个 ref 包裹的响应式初始化表单对象值；
-   * 这样就可以直接在 hook 中调用一个响应式的表单对象值。
-   *
    * @example
    *
    * interface FormModel {
@@ -122,13 +109,7 @@ const useForm = <
    *  formModelRef.value = formModel()
    * }
    */
-  const formModel = (): T & Recordable => {
+  const formModel = () => cloneDeep(model) || ({} as T)
-    if (typeof model === 'function') {
-      return model()
-    }
-
-    return cloneDeep(model) || ({} as T)
-  }
 
   /**
    *
@@ -137,17 +118,12 @@ const useForm = <
    *
    * 调用该方法时，需要确保初始化 useForm 方法的时候传入了 rules，否则可能有意想不到的问题发生。
    */
-  const formRules = () => {
+  const formRules = () => cloneDeep(rules) || ({} as R)
-    if (typeof rules === 'function') {
-      return rules()
-    }
-
-    return cloneDeep(rules) || ({} as R)
-  }
 
   /**
    *
-   * @param values 需要重置的表单值，该参数会覆盖初始化值
+   * @param values 需要重置的表单值
+   * @param extraValues 额外的表单值，当你需要初始化额外的表单值的时候，可以传入该参数
    *
    * @warning
    * 请注意初始化值的问题，如果设置初始化值为 undefined，
@@ -161,80 +137,14 @@ const useForm = <
    * 所以，最佳的实践应该是初始化 useForm 方法的时候，就应该确定好初始化值。
    * 然后，在需要重置表单的时候，直接调用该方法即可。
    */
-  const reset = <Values extends T = T>(values?: Values & Recordable) => {
+  const reset = <Values extends T = T>(
-    formModelRef.value = Object.assign(
+    values: Values & Recordable,
-      formModelRef.value as T,
+    extraValues?: Recordable,
-      formModel(),
+  ) => {
-      values,
+    Object.assign(values ?? {}, formModel(), extraValues)
-    )
     restoreValidation()
   }
 
-  /**
-   *
-   * @param key 需要验证的表单项的 key
-   *
-   * @see https://www.naiveui.com/zh-CN/dark/components/form#partially-apply-rules.vue
-   *
-   * @description
-   * 验证表单项的规则。
-   *
-   * 注意，该方法想要正常运转，需要在定义 rules 时定义唯一 key；
-   * 否则，该逻辑执行会失败。
-   *
-   * @example
-   * const [register, { validateTargetField }] = useForm(
-   *  {
-   *    name: null,
-   *  },
-   *  {
-   *    name: {
-   *      required: true,
-   *      message: 'name is required',
-   *      trigger: ['blur', 'change'],
-   *      type: 'string',
-   *      key: 'name',
-   *    },
-   *  },
-   * )
-   *
-   * validateTargetField('name')
-   */
-  const validateTargetField = (key: string) => {
-    if (!key || typeof key !== 'string') {
-      throw new Error(
-        `[useForm-validateTargetField]: except key is string, but got ${typeof key}.`,
-      )
-    }
-
-    return validate(void 0, (rules) => {
-      return rules?.key === key
-    })
-  }
-
-  /**
-   *
-   * @description
-   * 更新表单的值，该方法会覆盖初始化值。
-   * 推荐在表单组件中使用该方法，而不是直接修改表单的值，符合函数式的理念。
-   *
-   * @example
-   * const [register, { updateFormCondition }] = useForm(
-   *  {
-   *    name: null,
-   *  },
-   * )
-   *
-   * updateFormCondition({
-   *  name: 'John',
-   * })
-   */
-  const updateFormCondition = (values: T & Recordable) => {
-    formModelRef.value = Object.assign(formModelRef.value as T, values)
-  }
-
-  initialFormModel()
-
   return [
     register,
     {
@@ -244,9 +154,6 @@ const useForm = <
       formModel,
       formRules,
       reset,
-      validateTargetField,
-      formConditionRef: formModelRef as Ref<T>,
-      updateFormCondition,
     },
   ] as const
 }

src/components/base/RForm/src/props.ts

@@ -1,75 +1,10 @@
 import { formProps } from 'naive-ui'
-import { omit } from 'lodash-es'
 
-import type { MaybeArray, AnyFC } from '@/types'
+import type { MaybeArray } from '@/types'
 import type { RFormInst } from './types'
 
 const props = {
-  ...omit(formProps, ['onSubmit']),
+  ...formProps,
-  /**
-   *
-   * @description
-   * 表单的加载状态。
-   *
-   * @default false
-   */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   *
-   * @description
-   * 表单的加载状态的描述。
-   *
-   * @default undefined
-   */
-  loadingDescription: {
-    type: String,
-    default: void 0,
-  },
-  /**
-   *
-   * @description
-   * 表单的自动完成功能。
-   *
-   * @default 'off'
-   */
-  autocomplete: {
-    type: String as PropType<AutoFillBase>,
-    default: 'off',
-  },
-  /**
-   *
-   * @description
-   * 是否在按下回车键时自动触发表单的校验，如果校验成功则会自动触发 onFinish 事件。
-   * 该功能需要结合 onFinish 属性使用。
-   *
-   * 注意，该属性不支持响应式更新，只依赖于初始化传入的值；
-   * 因为该方法特性的原因，做响应式的更新意义不大。
-   *
-   * 并且该属性启用后，会自动的拦截 Enter 键的默认行为；
-   * 例如 NSelect, NInput 等官方自带组件的默认快捷键功能，都会被阻止；
-   * 但是不得不这么做，以避免一些奇奇怪怪的问题。
-   *
-   * @default false
-   */
-  submitWhenEnter: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   *
-   * @description
-   * 表单校验成功后自动触发的事件，该事件的触发时机为 submitWhenEnter 属性为 true 时，按下回车键触发。
-   * 该功能需要结合 submitWhenEnter 属性使用。
-   *
-   * @default null
-   */
-  onFinish: {
-    type: Function as PropType<AnyFC>,
-    default: null,
-  },
   /**
    *
    * @description

src/components/base/RTransitionComponent/src/index.vue

@@ -31,9 +31,8 @@ import type { TransitionProps } from './types'
 
 /**
  *
- * @description
+ * 使用宏编译模式时，可以使用 defineOptions 声明组件选项
- * 使用宏编译模式时，可以使用 defineOptions 声明组件选项。
+ * 常用方法即是声明该组件的 name inheritAttrs 等属性
- * 常用方法即是声明该组件的 name inheritAttrs 等属性。
  */
 defineOptions({
   name: 'RTransitionComponent',

src/components/pro/RCollapse/Collapse.tsx

@@ -5,26 +5,6 @@ import collapseGridProps from '../../base/RCollapseGrid/src/props'
 
 import type { GridProps } from 'naive-ui'
 
-export const collapseProps = Object.assign({}, formProps, {
-  ...collapseGridProps,
-  open: {
-    type: Boolean,
-    default: true,
-  },
-  cols: {
-    type: [Number, String] as PropType<GridProps['cols']>,
-    default: '4 xs:1 s:2 m:2 l:4 xl:4 2xl:6',
-  },
-  bordered: {
-    type: Boolean,
-    default: true,
-  },
-  responsive: {
-    type: String as PropType<GridProps['responsive']>,
-    default: 'screen',
-  },
-})
-
 /**
  *
  * @description
@@ -33,7 +13,25 @@ export const collapseProps = Object.assign({}, formProps, {
  */
 export default defineComponent({
   name: 'RCollapse',
-  props: collapseProps,
+  props: Object.assign({}, formProps, {
+    ...collapseGridProps,
+    open: {
+      type: Boolean,
+      default: true,
+    },
+    cols: {
+      type: [Number, String] as PropType<GridProps['cols']>,
+      default: '4 xs:1 s:2 m:2 l:4 xl:4 2xl:6',
+    },
+    bordered: {
+      type: Boolean,
+      default: true,
+    },
+    responsive: {
+      type: String as PropType<GridProps['responsive']>,
+      default: 'screen',
+    },
+  }),
   render() {
     const { $slots, $props } = this
     const { labelPlacement, showFeedback, ...rest } = $props

src/main.ts

@@ -5,7 +5,6 @@ import './app-components/provider/provider.scss' // 初始化 provider 包注入
 import 'vue3-next-qrcode/es/style.css' // vue3-next-qrcode 样式
 
 import 'virtual:svg-icons-register' // vite-plugin-svg-icons 脚本，启用 svg 雪碧图
-import 'virtual:uno.css'
 
 import { setupRouter } from './router'
 import { setupStore } from './store'

src/types/modules/helper.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-export type RecordKey = string | number | symbol
+type RecordKey = string | number | symbol
 
 /**
  *

src/views/demo/form/index.tsx

@@ -10,12 +10,9 @@ import {
   NRadio,
   NRadioGroup,
   NCard,
-  NText,
-  NSwitch,
 } from 'naive-ui'
 
 import { useForm } from '@/components'
-import { useHookPlusRequest } from '@/axios'
 
 interface FormModel {
   name: string | null
@@ -32,12 +29,12 @@ export default defineComponent({
     const [
       register,
       {
+        getFormInstance,
         validate,
         restoreValidation,
+        formModel,
         formRules,
         reset,
-        validateTargetField,
-        formConditionRef,
       },
     ] = useForm<FormModel>(
       {
@@ -74,124 +71,101 @@ export default defineComponent({
       },
     )
 
-    const formLoading = ref(false)
+    /**
+     *
+     * @description
+     * 如果只是简单的数据，可以在初始化 useForm 的时候直接传入第一个参数；
+     * 然后使用 formModel 方法获取到初始化 model 数据。
+     *
+     * 当然，在 vue 中，推荐使用该方法进行表单值的初始化操作；
+     * 因为，可以在你需要的时候实现便捷的一键初始化表单需求。
+     */
+    const condition = ref(formModel())
 
-    const { run: runHookPlusRequest } = useHookPlusRequest(
+    /**
-      () => {
+     *
-        return new Promise((resolve, reject) => {
+     * @param key 需要校验的字段。
-          validate()
+     *
-            .then(() => {
+     * @see https://www.naiveui.com/zh-CN/dark/components/form#partially-apply-rules.vue
-              formLoading.value = true
+     *
-
+     * @description
-              setTimeout(() => {
+     * 执行部分的校验规则。
-                window.$message.success('校验成功')
+     */
-                resolve(true)
+    const onlyValidateSection = (key: string) => {
-              }, 500)
+      validate(void 0, (rules) => {
-            })
+        return rules?.key === key
-            .catch(reject)
+      })
-            .finally(() => {
+    }
-              formLoading.value = false
-            })
-        })
-      },
-      {
-        manual: true,
-      },
-    )
 
     return {
       register,
-      formConditionRef,
+      condition,
       restoreValidation,
       validate,
       formRules,
-      validateTargetField,
+      onlyValidateSection,
       reset,
-      formLoading,
-      runHookPlusRequest,
     }
   },
   render() {
-    const { formConditionRef } = this
+    const { condition } = this
     const {
       register,
       restoreValidation,
+      validate,
       formRules,
-      validateTargetField,
+      onlyValidateSection,
       reset,
-      runHookPlusRequest,
     } = this
 
     return (
-      <NCard
+      <NCard title="useForm 表单校验">
-        title={() => (
+        <RForm onRegister={register} rules={formRules()} model={condition}>
-          <NFlex align="center">
+          <NGrid cols={24} xGap={24}>
-            <NText>useForm 表单校验</NText>
+            <NFormItemGi label="姓名" path="name" span={12}>
-            <NSwitch v-model:value={this.formLoading} />
+              <NInput v-model:value={condition.name} />
-          </NFlex>
+            </NFormItemGi>
-        )}
+            <NFormItemGi label="年龄" path="age" span={12}>
-      >
+              <NInputNumber
-        {{
+                v-model:value={condition.age}
-          default: () => (
+                showButton={false}
-            <RForm
+                style="width: 100%"
-              onRegister={register}
+              />
-              rules={formRules()}
+            </NFormItemGi>
-              model={formConditionRef}
+            <NFormItemGi label="出生日期" path="date" span={12}>
-              submitWhenEnter
+              <NDatePicker v-model:value={condition.date} style="width: 100%" />
-              onFinish={() => {
+            </NFormItemGi>
-                window.$message.success('表单提交成功')
+            <NFormItemGi label="性别" path="gender" span={12}>
-              }}
+              <NRadioGroup v-model:value={condition.gender}>
-              loading={this.formLoading}
+                <NRadio value="girl">女</NRadio>
-            >
+                <NRadio value="man">男</NRadio>
-              <NGrid cols={24} xGap={24}>
+              </NRadioGroup>
-                <NFormItemGi label="姓名" path="name" span={12}>
+            </NFormItemGi>
-                  <NInput v-model:value={formConditionRef.name} />
+            <NFormItemGi label="备注信息" span={24}>
-                </NFormItemGi>
+              <NInput type="textarea" v-model:value={condition.remark} />
-                <NFormItemGi label="年龄" path="age" span={12}>
+            </NFormItemGi>
-                  <NInputNumber
+            <NFormItemGi span={24}>
-                    v-model:value={formConditionRef.age}
+              <NFlex justify="flex-end" style="width: 100%">
-                    showButton={false}
+                <NButton type="info" onClick={() => reset(this.condition)}>
-                  />
+                  重置表单为初始状态
-                </NFormItemGi>
+                </NButton>
-                <NFormItemGi label="出生日期" path="date" span={12}>
+                <NButton type="warning" onClick={restoreValidation.bind(this)}>
-                  <NDatePicker v-model:value={formConditionRef.date} />
+                  移除校验状态
-                </NFormItemGi>
+                </NButton>
-                <NFormItemGi label="性别" path="gender" span={12}>
+                <NButton
-                  <NRadioGroup v-model:value={formConditionRef.gender}>
+                  type="primary"
-                    <NRadio value="girl">女</NRadio>
+                  onClick={() => onlyValidateSection('name')}
-                    <NRadio value="man">男</NRadio>
+                >
-                  </NRadioGroup>
+                  仅校验姓名字段
-                </NFormItemGi>
+                </NButton>
-                <NFormItemGi label="备注信息" span={24}>
+                <NButton type="primary" onClick={() => validate()}>
-                  <NInput
+                  校验
-                    type="textarea"
+                </NButton>
-                    v-model:value={formConditionRef.remark}
+                <NButton attrType="reset">重置</NButton>
-                  />
+              </NFlex>
-                </NFormItemGi>
+            </NFormItemGi>
-                <NFormItemGi span={24}>
+          </NGrid>
-                  <NFlex>
+        </RForm>
-                    <NButton type="info" onClick={() => reset()}>
-                      重置表单为初始状态
-                    </NButton>
-                    <NButton type="warning" onClick={restoreValidation}>
-                      移除校验状态
-                    </NButton>
-                    <NButton
-                      type="primary"
-                      onClick={() => validateTargetField('name')}
-                    >
-                      仅校验姓名字段
-                    </NButton>
-                    <NButton type="primary" onClick={runHookPlusRequest}>
-                      校验
-                    </NButton>
-                  </NFlex>
-                </NFormItemGi>
-              </NGrid>
-            </RForm>
-          ),
-          'header-extra': () => '输入表单的时候，试试按下 Enter 键',
-        }}
       </NCard>
     )
   },

uno.config.ts

@@ -1,5 +0,0 @@
-import { defineConfig } from 'unocss'
-
-export default defineConfig({
-  safelist: ['w-full', 'h-full'],
-})

unplugin/.eslintrc-auto-import.json

@@ -88,7 +88,6 @@
     "useModel": true,
     "useTemplateRef": true,
     "Slot": true,
-    "Slots": true,
+    "Slots": true
-    "NFormItem": true
   }
 }

unplugin/auto-imports.d.ts

@@ -7,7 +7,6 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const NFormItem: typeof import('naive-ui')['NFormItem']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']

vite.plugin.config.ts

@@ -13,7 +13,6 @@ import viteEslint from 'vite-plugin-eslint'
 import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import unpluginViteComponents from 'unplugin-vue-components/vite'
-import unoCSS from 'unocss/vite'
 
 import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2'
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
@@ -213,7 +212,6 @@ function baseOptions(mode: string): PluginOption[] {
       inject: 'body-last',
       customDomId: '__svg__icons__dom__',
     }),
-    unoCSS(),
   ]
 }