chore: 将 example 应用里示例页面中遗留的 element-plus 组件全部替换为内建组件

apps/example/src/router/modules/feature.example.ts

@@ -31,15 +31,6 @@ const routes: RouteRecordRaw = {
         icon: 'i-mdi:regex',
       },
     },
-    {
-      path: 'tableautoheight',
-      name: 'featureExampleTableautoheight',
-      component: () => import('@/views/feature_example/table.autoheight.vue'),
-      meta: {
-        title: '表格高度自适应',
-        icon: 'i-tabler:arrow-autofit-height',
-      },
-    },
     {
       path: 'reload',
       name: 'featureExampleReload',

apps/example/src/views/feature_example/rules.vue

@@ -458,23 +458,14 @@ const dialog = ref({
   form: {
     test: '',
   },
-  formRules: {
-    test: [
-      {
-        validator: (_rule: any, value: any, callback: any) => {
-          if (rules.value[dialog.value.index].rule.test(value)) {
-            callback()
-          }
-          else {
-            callback(new Error('不通过'))
-          }
-        },
-        trigger: 'change',
-      },
-    ],
-  },
 })
 
+const validationSchema = {
+  test(value: string) {
+    return rules.value[dialog.value.index].rule.test(value) ? true : '不通过'
+  },
+}
+
 watch(copied, (val) => {
   val && useFaToast().success(`复制成功：${text.value}`)
 })
@@ -498,7 +489,7 @@ function open(url: string) {
       </FaButton>
     </FaPageHeader>
     <FaPageMain v-for="(item, index) in rules" :key="index" :title="item.title">
-      <div class="rule">
+      <div class="mb-4">
         {{ item.rule }}
       </div>
       <div class="space-x-2">
@@ -510,18 +501,12 @@ function open(url: string) {
         </FaButton>
       </div>
     </FaPageMain>
-    <ElDialog v-model="dialog.visible" :title="rules[dialog.index].title" width="500px">
-      <ElForm :model="dialog.form" :rules="dialog.formRules">
-        <ElFormItem prop="test">
-          <ElInput v-model="dialog.form.test" :placeholder="`例如：${rules[dialog.index].examples.join('、')}`" />
-        </ElFormItem>
-      </ElForm>
-    </ElDialog>
+    <FaModal v-model="dialog.visible" :title="rules[dialog.index].title" class="w-[500px]" :footer="false">
+      <FaForm :model="dialog.form" :validation-schema="validationSchema">
+        <FaFormItem name="test">
+          <FaInput :placeholder="`例如：${rules[dialog.index].examples.join('、')}`" class="w-full" />
+        </FaFormItem>
+      </FaForm>
+    </FaModal>
   </div>
 </template>
-
-<style scoped>
-.rule {
-  margin-bottom: 20px;
-}
-</style>

apps/example/src/views/feature_example/table.autoheight.vue

@@ -1,132 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'FeatureExampleTableautoheight',
-})
-
-const dataList = ref([
-  {
-    date: '2016-05-02',
-    name: 'John Doe',
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Jim Green',
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Joe Black',
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-03',
-    name: 'John Smith',
-    address: 'New York No. 2 Lake Park',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Jim Beam',
-    address: 'London No. 2 Lake Park',
-  },
-  {
-    date: '2016-05-01',
-    name: 'John Doe',
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-03',
-    name: 'Jim Green',
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-04',
-    name: 'John Doe',
-    address: 'New York No. 2 Lake Park',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Joe Black',
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-03',
-    name: 'Jim Green',
-    address: 'London No. 2 Lake Park',
-  },
-  {
-    date: '2016-05-04',
-    name: 'John Smith',
-    address: 'New York No. 2 Lake Park',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Jim Beam',
-    address: 'London No. 2 Lake Park',
-  },
-  {
-    date: '2016-05-03',
-    name: 'John Doe',
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Jim Green',
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-01',
-    name: 'John Doe',
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-03',
-    name: 'Jim Green',
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-03',
-    name: 'John Smith',
-    address: 'New York No. 2 Lake Park',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Jim Beam',
-    address: 'London No. 2 Lake Park',
-  },
-  {
-    date: '2016-05-01',
-    name: 'John Doe',
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    date: '2016-05-03',
-    name: 'John Doe',
-    address: 'New York No. 1 Lake Park',
-  },
-])
-</script>
-
-<template>
-  <div class="absolute-container">
-    <FaPageHeader title="表格高度自适应" class="mb-0" />
-    <FaPageMain class="flex-1 overflow-auto" main-class="flex-1 flex flex-col overflow-auto">
-      <ElTable :data="dataList" stripe highlight-current-row border height="100%">
-        <ElTableColumn type="index" width="50" />
-        <ElTableColumn prop="date" label="Date" width="180" />
-        <ElTableColumn prop="name" label="Name" width="180" />
-        <ElTableColumn prop="address" label="Address" />
-      </ElTable>
-    </FaPageMain>
-  </div>
-</template>
-
-<style scoped>
-.absolute-container {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-</style>

apps/example/src/views/plugin_example/currency.input.vue

@@ -17,9 +17,11 @@ const Option = createReusableTemplate<{
 const localeEnabled = ref(false)
 const locale = ref('zh-ZH')
 const locales = ref(['de-DE', 'de-CH', 'en-US', 'en-IN', 'nl-NL', 'sv-SE', 'fr-FR', 'es-ES', 'pt-PT', 'pt-BR', 'zh-ZH', 'ja-JP', 'ar-SA', 'fa-IR', 'bg-BG'])
+const localeOptions = computed(() => locales.value.map(item => ({ label: item, value: item })))
 
 const currency = ref('CNY')
 const currencies = ref(['EUR', 'USD', 'GBP', 'BRL', 'INR', 'CNY', 'JPY', 'SAR', 'IRR', 'BGN'])
+const currencyOptions = computed(() => currencies.value.map(item => ({ label: item, value: item })))
 
 const currencyDisplay = ref('symbol')
 const currencyDisplays = ref([
@@ -40,8 +42,24 @@ const hideNegligibleDecimalDigitsOnFocus = ref(true)
 const hideNegligibleDecimalDigitsOnFocusEnabled = ref(true)
 
 const valueRangeEnabled = ref(false)
-const minValue = ref(undefined)
-const maxValue = ref(undefined)
+const minValue = ref<number>()
+const maxValue = ref<number>()
+const minNumberValue = computed({
+  get() {
+    return minValue.value ?? 0
+  },
+  set(value: number) {
+    minValue.value = value
+  },
+})
+const maxNumberValue = computed({
+  get() {
+    return maxValue.value ?? 0
+  },
+  set(value: number) {
+    maxValue.value = value
+  },
+})
 
 const precisionEnabled = ref(false)
 const precisionRangeEnabled = ref(false)
@@ -51,6 +69,7 @@ function range(from: number, to: number) {
 }
 const precision = ref(2)
 const precisionOptions = computed(() => range(1, 16))
+const precisionSelectOptions = computed(() => precisionOptions.value.map(item => ({ label: String(item), value: item })))
 
 const valueScalingEnabled = ref(false)
 const valueScaling = ref('precision')
@@ -74,8 +93,8 @@ const options = computed(() => {
     currencyDisplay: currencyDisplay.value,
     valueRange: valueRangeEnabled.value
       ? {
-          min: minValue.value === '' ? undefined : minValue.value,
-          max: maxValue.value === '' ? undefined : maxValue.value,
+          min: minValue.value,
+          max: maxValue.value,
         }
       : undefined,
     precision: precisionEnabled.value
@@ -93,8 +112,22 @@ const options = computed(() => {
   }
 })
 
-// @ts-expect-error inputRef
-const { inputRef, setValue, setOptions, numberValue, formattedValue } = useCurrencyInput(options.value as CurrencyInputOptions)
+const currencyInputRef = useTemplateRef<{ ref?: HTMLInputElement }>('currencyInputRef')
+const { inputRef: currencyNativeInputRef, setValue, setOptions, numberValue, formattedValue } = useCurrencyInput(options.value as CurrencyInputOptions)
+const formattedInputValue = computed({
+  get() {
+    return formattedValue.value ?? ''
+  },
+  set(value: string) {
+    formattedValue.value = value
+  },
+})
+
+watch(currencyInputRef, (value) => {
+  currencyNativeInputRef.value = value?.ref ?? null
+}, {
+  flush: 'post',
+})
 
 watch(options, (value) => {
   setOptions(value as CurrencyInputOptions)
@@ -106,7 +139,8 @@ watch(numberValue, (val) => {
   immediate: true,
 })
 
-onMounted(() => {
+onMounted(async () => {
+  await nextTick()
   numberValue.value = 1234.5
 })
 
@@ -154,7 +188,7 @@ function open(url: string) {
     </FaPageHeader>
     <FaPageMain>
       <div class="gap-y-4 grid items-center md-gap-x-8 md-grid-cols-2">
-        <ElInput ref="inputRef" v-model="formattedValue" />
+        <FaInput ref="currencyInputRef" v-model="formattedInputValue" class="w-full" />
         <div>
           数值：<code class="ml-2">{{ numberValue != null ? numberValue : 'null' }}</code>
         </div>
@@ -164,87 +198,85 @@ function open(url: string) {
       <template #title>
         <div class="flex items-center justify-between">
           选项
-          <ElButton v-if="isSupported" size="small" @click="handleCopy">
+          <FaButton v-if="isSupported" size="sm" @click="handleCopy">
             复制选项
-          </ElButton>
+          </FaButton>
         </div>
       </template>
       <div class="gap-x-8 grid grid-cols-1 md-grid-cols-2">
         <div>
           <Option.reuse label="地理位置">
             <template #switch>
-              <ElSwitch v-model="localeEnabled" />
+              <FaSwitch v-model="localeEnabled" />
             </template>
-            <ElSelect v-model="locale" :disabled="!localeEnabled">
-              <ElOption v-for="item in locales" :key="item" :value="item" :label="item" />
-            </ElSelect>
+            <FaSelect v-model="locale" :options="localeOptions" :disabled="!localeEnabled" class="w-full" />
           </Option.reuse>
           <Option.reuse label="货币">
-            <ElSelect v-model="currency">
-              <ElOption v-for="item in currencies" :key="item" :value="item" :label="item" />
-            </ElSelect>
+            <FaSelect v-model="currency" :options="currencyOptions" class="w-full" />
           </Option.reuse>
           <Option.reuse label="货币显示" description="如何在格式化中显示货币">
-            <ElSelect v-model="currencyDisplay">
-              <ElOption v-for="item in currencyDisplays" :key="item.value" :value="item.value" :label="item.label" />
-            </ElSelect>
+            <FaSelect v-model="currencyDisplay" :options="currencyDisplays" class="w-full" />
           </Option.reuse>
           <Option.reuse label="会计标志" description="是否使用会计符号格式化">
             <template #switch>
-              <ElSwitch v-model="accountingSign" />
+              <FaSwitch v-model="accountingSign" />
             </template>
           </Option.reuse>
           <Option.reuse label="使用分组" description="是否使用分组分隔符，如千/万/千万分隔符">
             <template #switch>
-              <ElSwitch v-model="useGrouping" />
+              <FaSwitch v-model="useGrouping" />
             </template>
           </Option.reuse>
           <Option.reuse label="无干扰输入" description="对焦时隐藏格式的不同部分，以方便输入">
             <div>
-              <ElCheckbox v-model="hideCurrencySymbolOnFocus" label="隐藏货币符号" />
+              <FaCheckbox v-model="hideCurrencySymbolOnFocus">
+                隐藏货币符号
+              </FaCheckbox>
             </div>
             <div>
-              <ElCheckbox v-model="hideGroupingSeparatorOnFocus" label="隐藏分组分隔符" />
+              <FaCheckbox v-model="hideGroupingSeparatorOnFocus">
+                隐藏分组分隔符
+              </FaCheckbox>
             </div>
             <div>
-              <ElCheckbox v-model="hideNegligibleDecimalDigitsOnFocus" :disabled="!hideNegligibleDecimalDigitsOnFocusEnabled" label="隐藏可忽略的小数位数" />
+              <FaCheckbox v-model="hideNegligibleDecimalDigitsOnFocus" :disabled="!hideNegligibleDecimalDigitsOnFocusEnabled">
+                隐藏可忽略的小数位数
+              </FaCheckbox>
             </div>
           </Option.reuse>
         </div>
         <div>
           <Option.reuse label="数值范围" description="验证在模糊时触发，并在超出范围时自动设置相应的阈值">
             <template #switch>
-              <ElSwitch v-model="valueRangeEnabled" />
+              <FaSwitch v-model="valueRangeEnabled" />
             </template>
             <div class="flex items-center space-x-4">
-              <ElInputNumber v-model="minValue" :disabled="!valueRangeEnabled" placeholder="最小值" class="flex-1" />
+              <FaNumberField v-model="minNumberValue" :disabled="!valueRangeEnabled" class="flex-1" />
               <span class="text-center">to</span>
-              <ElInputNumber v-model="maxValue" :disabled="!valueRangeEnabled" placeholder="最大值" class="flex-1" />
+              <FaNumberField v-model="maxNumberValue" :disabled="!valueRangeEnabled" class="flex-1" />
             </div>
           </Option.reuse>
           <Option.reuse label="精确度" description="覆盖显示的小数位数，仅适用于支持小数位的货币">
             <template #switch>
-              <ElSwitch v-model="precisionEnabled" />
+              <FaSwitch v-model="precisionEnabled" />
             </template>
-            <div>
-              <ElCheckbox v-model="precisionRangeEnabled" :disabled="!precisionEnabled" label="使用范围" />
-              <ElSlider v-if="precisionRangeEnabled" v-model="precisionRangeValue" range show-stops :min="1" :max="15" />
-              <ElSelect v-else v-model="precision" :disabled="!precisionEnabled">
-                <ElOption v-for="item in precisionOptions" :key="item" :value="item" :label="item" />
-              </ElSelect>
+            <div class="space-y-2">
+              <FaCheckbox v-model="precisionRangeEnabled" :disabled="!precisionEnabled">
+                使用范围
+              </FaCheckbox>
+              <FaSlider v-if="precisionRangeEnabled" v-model="precisionRangeValue" :min="1" :max="15" />
+              <FaSelect v-else v-model="precision" :options="precisionSelectOptions" :disabled="!precisionEnabled" />
             </div>
           </Option.reuse>
           <Option.reuse label="数值缩放" description="对输出值进行缩放">
             <template #switch>
-              <ElSwitch v-model="valueScalingEnabled" />
+              <FaSwitch v-model="valueScalingEnabled" />
             </template>
-            <ElSelect v-model="valueScaling" :disabled="!valueScalingEnabled">
-              <ElOption v-for="item in valueScalingOptions" :key="item.value" :value="item.value" :label="item.label" />
-            </ElSelect>
+            <FaSelect v-model="valueScaling" :options="valueScalingOptions" :disabled="!valueScalingEnabled" class="w-full" />
           </Option.reuse>
           <Option.reuse label="自动小数位" description="是否自动插入小数符号，将最后输入的数字作为小数位">
             <template #switch>
-              <ElSwitch v-model="autoDecimalDigits" />
+              <FaSwitch v-model="autoDecimalDigits" />
             </template>
           </Option.reuse>
         </div>

apps/example/src/views/standard_module_example/components/DetailForm/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
+import type { FormExpose } from '@fantastic-admin/components'
 import apiStandardModule from '@/api/modules/standardModule'
 
 export interface Props {
@@ -12,64 +12,76 @@ const props = withDefaults(
   },
 )
 
+interface DetailFormModel {
+  id: number | string
+  title: string
+}
+
 const loading = ref(false)
-const formRef = useTemplateRef<FormInstance>('formRef')
-const form = ref({
+const formRef = useTemplateRef<FormExpose>('formRef')
+const model = ref<DetailFormModel>({
   id: props.id,
   title: '',
 })
-const formRules = ref<FormRules>({
-  title: [
-    { required: true, message: '请输入标题', trigger: 'blur' },
-  ],
-})
+
+const validationSchema = {
+  title(value: string) {
+    return value ? true : '请输入标题'
+  },
+}
 
 onMounted(() => {
-  if (form.value.id !== '') {
+  if (model.value.id !== '') {
     getInfo()
   }
 })
 
 function getInfo() {
   loading.value = true
-  apiStandardModule.detail(form.value.id).then((res: any) => {
+  apiStandardModule.detail(model.value.id).then((res: any) => {
     loading.value = false
-    form.value.title = res.data.title
+    model.value.title = res.data.title
   }).catch(() => {
     loading.value = false
   })
 }
 
+async function submit() {
+  const result = await formRef.value?.validate()
+
+  if (!result?.valid) {
+    return false
+  }
+
+  if (model.value.id === '') {
+    await apiStandardModule.create(model.value)
+    useFaToast().success('新增成功')
+  }
+  else {
+    await apiStandardModule.edit(model.value)
+    useFaToast().success('编辑成功')
+  }
+
+  return true
+}
+
 defineExpose({
-  submit() {
-    return new Promise<void>((resolve) => {
-      formRef.value?.validate((valid) => {
-        if (valid) {
-          if (form.value.id === '') {
-            apiStandardModule.create(form.value).then(() => {
-              useFaToast().success('新增成功')
-              resolve()
-            })
-          }
-          else {
-            apiStandardModule.edit(form.value).then(() => {
-              useFaToast().success('编辑成功')
-              resolve()
-            })
-          }
-        }
-      })
-    })
-  },
+  submit,
 })
 </script>
 
 <template>
   <div v-loading="loading">
-    <ElForm ref="formRef" :model="form" :rules="formRules" label-width="120px" label-suffix="：">
-      <ElFormItem label="标题" prop="title">
-        <FaInput v-model="form.title" placeholder="请输入标题" class="w-full" />
-      </ElFormItem>
-    </ElForm>
+    <FaForm
+      ref="formRef"
+      :model="model"
+      :validation-schema="validationSchema"
+      label-placement="right"
+      :label-width="120"
+    >
+      <FaFormItem name="title" label="标题" required>
+        <FaInput placeholder="请输入标题" class="w-full" />
+      </FaFormItem>
+    </FaForm>
   </div>
 </template>

apps/example/src/views/standard_module_example/detail.vue

@@ -12,7 +12,11 @@ const router = useRouter()
 const formRef = useTemplateRef('formRef')
 
 function onSubmit() {
-  formRef.value?.submit().then(() => {
+  formRef.value?.submit().then((success) => {
+    if (!success) {
+      return
+    }
+
     eventBus.emit('get-data-list')
     onCancel()
   })
@@ -34,11 +38,9 @@ function onCancel() {
       </FaPageHeader>
     </FaFixedBar>
     <FaPageMain>
-      <ElRow>
-        <ElCol :md="24" :lg="16">
-          <DetailForm :id="route.params.id as string" ref="formRef" />
-        </ElCol>
-      </ElRow>
+      <div class="max-w-4xl w-full">
+        <DetailForm :id="route.params.id as string" ref="formRef" />
+      </div>
     </FaPageMain>
     <FaFixedBar position="bottom" class="flex-center gap-4">
       <FaButton @click="onSubmit">

apps/example/src/views/standard_module_example/list.vue

@@ -122,7 +122,11 @@ const { open: openModal, update: updateModal } = useFaModal().create({
   beforeClose: (action, done) => {
     if (action === 'confirm') {
       // 调用 DetailForm 组件内部 submit 方法
-      formRef.value?.submit().then(() => {
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
         getDataList()
         done()
       })
@@ -144,7 +148,11 @@ const { open: openDrawer, update: updateDrawer } = useFaDrawer().create({
   beforeClose: (action, done) => {
     if (action === 'confirm') {
       // 调用 DetailForm 组件内部 submit 方法
-      formRef.value?.submit().then(() => {
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
         getDataList()
         done()
       })