chore:调整样式

README.md

@@ -2,6 +2,16 @@
 `CatchAdmin`是一款基于[Laravel](https://laravel.com)和[Element Plus](https://element-plus.org)二次开发而成后台管理系统。`Laravel` 社区也有许多非常优秀的后台管理系统，例如 `Nova`, 官方出品，当然是收费的，免费的有基于 `Livewire` 的 `Filament`，还有不得不说的 `Laravel Admin`。`CatchAdmin` 还是采用传统的前后端分离策略，`Laravel` 框架仅仅作为 `Api` 输出。将管理系统模块之间的耦合降到了最低限度。每个模块之间都有独立的控制器，路由，模型，数据表。在开发上尽可能将模块之间的影响降到最低，降低了开发上的难度。基于 `CatchAdmin `可以开发 `CMS`，`CRM`，`OA` 等 等系统。也封装了很多实用的工具，提升开发体验。
 
 [中文](./README.md)|[英文](./README-en.md)
+## 前后端完全分离版本
+请使用 `server` 分支, 如果是新项目，请一定使用该完全分离分支。我们将在不久后会将项目分离出来
+
+## 其他版本
+- [tp8 新版本](https://gitee.com/catchamin/catchadmin-tp)
+- [webman 高性能版本](https://gitee.com/catchamin/catchadmin-webman)
+
+## 新功能
+- [动态表单](https://catchadmin.com/docs/3.0/front/catch-form)
+- [动态表格](https://catchadmin.com/docs/3.0/front/catch-table)
 
 ## 专业版
 [专业版本官方地址](https://license.catchadmin.com)
@@ -12,10 +22,6 @@
 
 我深信，付费后台管理系统将为您带来更多的价值和便利，帮助您提升工作效率
 
-## 其他版本
-- [tp8 新版本](https://gitee.com/catchamin/catchadmin-tp)
-- [webman 高性能版本](https://gitee.com/catchamin/catchadmin-webman)
-
 ## ⚠️Thinkphp 用户注意
 由于新版本使用 `Laravel` 开发，所以请使用 `thinkphp` 分支或者 tag2.6.2，thinkphp 版本已经非常稳定了。
 

composer.json

@@ -11,19 +11,18 @@
     ],
     "license": "MIT",
     "require": {
-        "php": "^8.1",
+        "php": "^8.2",
         "ext-pdo": "*",
         "ext-zip": "*",
-        "doctrine/dbal": "^3.4",
-        "guzzlehttp/guzzle": "^7.2",
-        "laravel/framework": "^10.0",
-        "laravel/tinker": "^2.8",
-        "catchadmin/core": "^0.2.7"
+        "guzzlehttp/guzzle": "^7.8.1",
+        "laravel/framework": "^11.0",
+        "laravel/tinker": "^v2.9.0",
+        "catchadmin/core": "^0.3.4"
     },
     "require-dev": {
-        "fakerphp/faker": "^1.9.1",
-        "mockery/mockery": "^1.4.4",
-        "pestphp/pest": "^1.22"
+        "fakerphp/faker": "^v1.23.1",
+        "mockery/mockery": "^1.6.9",
+        "pestphp/pest": "^v2.34.2"
     },
     "autoload": {
         "psr-4": {

modules/Develop/Models/Schemas.php

@@ -6,8 +6,8 @@ use Catch\Base\CatchModel;
 use Catch\Enums\Status;
 use Exception;
 use Illuminate\Database\Eloquent\Model;
-use Illuminate\Support\Facades\DB;
 use Modules\Develop\Support\Generate\Create\Schema;
+use Illuminate\Support\Facades\Schema as SchemaFacade;
 
 class Schemas extends CatchModel
 {
@@ -90,16 +90,13 @@ class Schemas extends CatchModel
     {
         $schema = parent::firstBy($id);
 
-        $columns = [];
-
-        foreach (getTableColumns($schema->name) as $columnString) {
-            $column = DB::connection()->getDoctrineColumn(DB::connection()->getTablePrefix().$schema->name, $columnString);
+        foreach (SchemaFacade::getColumns($schema->name) as $column) {
             $columns[] = [
-                'name' => $column->getName(),
-                'type' => $column->getType()->getName(),
-                'nullable' => ! $column->getNotnull(),
-                'default' => $column->getDefault(),
-                'comment' => $column->getComment()
+                'name' => $column['name'],
+                'type' => $column['type_name'],
+                'nullable' => $column['nullable'],
+                'default' => $column['default'],
+                'comment' => $column['comment'],
             ];
         }
 

modules/Develop/Support/Generate/stubs/vue/form.stub

@@ -13,14 +13,14 @@ import { useShow } from '/admin/composables/curd/useShow'
 import { onMounted } from 'vue'
 
 const props = defineProps({
-  primary: String | Number,
+  primary: [String, Number],
   api: String,
 })
 
-const { formData, form, loading, submitForm, close } = useCreate(props.api, props.primary)
+const { formData, form, loading, submitForm, close } = useCreate(props.api as string, props.primary)
 
 if (props.primary) {
-  useShow(props.api, props.primary, formData)
+  useShow(props.api as string, props.primary, formData)
 }
 
 const emit = defineEmits(['close'])

modules/Develop/views/dymaic/create.vue

@@ -0,0 +1,287 @@
+<template>
+    <div>
+        <CatchForm :schema="form" @onSubmit="submit"/>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const form = {
+    items: [
+        {
+            name: 'Grid_FhAuLh',
+            props: {
+                columns: 2
+            },
+            component: 'grid',
+            children: [
+                {
+                    name: 'Grid_qRvhpR',
+                    props: {
+                        columns: 1
+                    },
+                    component: 'grid',
+                    children: [
+                        {
+                            name: 'type',
+                            props: {
+                                clearable: true,
+                                options: [
+                                    {
+                                        value: 1,
+                                        label: '目录'
+                                    },
+                                    {
+                                        value: 2,
+                                        label: '菜单'
+                                    },
+                                    {
+                                        value: 3,
+                                        label: '按钮'
+                                    }
+                                ],
+                                optionType: 'button'
+                            },
+                            label: '菜单类型',
+                            component: 'radio',
+                            class: 'mt-4',
+                            initialValue: 1
+                        },
+                        {
+                            name: 'permission_name',
+                            props: {
+                                clearable: true
+                            },
+                            label: '菜单名称',
+                            component: 'input',
+                            class: 'mt-4',
+                            required: true
+                        },
+                        {
+                            name: 'module',
+                            props: {
+                                clearable: true,
+                                options: [
+                                    {
+                                        label: '权限管理',
+                                        value: 'permissions'
+                                    },
+                                    {
+                                        label: '动态表单',
+                                        value: 'test'
+                                    },
+                                    {
+                                        label: 'Testss',
+                                        value: 'tests'
+                                    }
+                                ]
+                            },
+                            label: '所属模块',
+                            component: 'select',
+                            class: 'mt-4',
+                            required: true,
+                            hidden: '{{$values.type == 3}}'
+                        },
+                        {
+                            name: 'route',
+                            props: {
+                                clearable: true
+                            },
+                            label: '路由Path',
+                            component: 'input',
+                            class: 'mt-4',
+                            required: true,
+                            hidden: '{{$values.type == 3}}'
+                        },
+                        {
+                            name: 'redirect',
+                            props: {
+                                clearable: true
+                            },
+                            label: '重定向',
+                            component: 'input',
+                            class: 'mt-4',
+                            hidden: '{{$values.type == 3}}'
+                        },
+                        {
+                            name: 'sort',
+                            props: {
+                                clearable: true,
+                                min: 1,
+                                max: 10000
+                            },
+                            label: '排序',
+                            component: 'input_number',
+                            class: 'mt-4',
+                            initialValue: 1
+                        }
+                    ]
+                },
+                {
+                    name: 'Grid',
+                    props: {
+                        columns: 1
+                    },
+                    component: 'grid',
+                    children: [
+                        {
+                            name: 'parent_id',
+                            props: {
+                                clearable: true,
+                                options: [
+                                    {
+                                        id: 1,
+                                        parent_id: 0,
+                                        permission_name: '权限管理',
+                                        children: [
+                                            {
+                                                id: 2,
+                                                parent_id: 1,
+                                                permission_name: '角色管理'
+                                            },
+                                            {
+                                                id: 8,
+                                                parent_id: 1,
+                                                permission_name: '菜单管理'
+                                            },
+                                            {
+                                                id: 15,
+                                                parent_id: 1,
+                                                permission_name: '岗位管理'
+                                            },
+                                            {
+                                                id: 22,
+                                                parent_id: 1,
+                                                permission_name: '部门管理'
+                                            },
+                                            {
+                                                id: 29,
+                                                parent_id: 1,
+                                                permission_name: '创建菜单'
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        id: 30,
+                                        parent_id: 0,
+                                        permission_name: '测试',
+                                        children: [
+                                            {
+                                                id: 31,
+                                                parent_id: 30,
+                                                permission_name: '测试看看'
+                                            },
+                                            {
+                                                id: 37,
+                                                parent_id: 30,
+                                                permission_name: '创建'
+                                            }
+                                        ]
+                                    }
+                                ],
+                                label: 'permission_name',
+                                valueKey: 'id',
+                                value: 'id',
+                                'show-all-levels': false,
+                                checkStrictly: true,
+                                class: 'w-full'
+                            },
+                            label: '上级菜单',
+                            component: 'cascader',
+                            class: 'mt-4'
+                        },
+                        {
+                            name: 'permission_mark',
+                            props: {
+                                clearable: true,
+                                api: 'options/controllers',
+                                query: {
+                                    module: '{{ $values.module }}'
+                                }
+                            },
+                            label: '权限标识',
+                            component: '{{$values.type == 3 ? "input" : "select"}}',
+                            class: 'mt-4',
+                            hidden: '{{$values.type == 1}}',
+                            required: true
+                        },
+                        {
+                            name: 'icon',
+                            props: {
+                                clearable: true
+                            },
+                            label: '图标',
+                            component: 'icon_select',
+                            class: 'mt-4',
+                            hidden: '{{$values.type == 3}}'
+                        },
+                        {
+                            name: 'component',
+                            props: {
+                                clearable: true,
+                                "allow-create": true
+                            },
+                            label: '所属组件',
+                            component: 'select',
+                            class: 'mt-4',
+                            hidden: '{{$values.type == 3}}'
+                        },
+                        {
+                            name: 'hidden',
+                            props: {
+                                options: [
+                                    {
+                                        value: 1,
+                                        label: '是'
+                                    },
+                                    {
+                                        value: 2,
+                                        label: '否'
+                                    }
+                                ]
+                            },
+                            label: '是否隐藏',
+                            component: 'radio',
+                            class: 'mt-4',
+                            initialValue: 2,
+                            hidden: '{{$values.type == 3}}'
+                        },
+                        {
+                            name: 'keepalive',
+                            props: {
+                                options: [
+                                    {
+                                        value: 1,
+                                        label: '是'
+                                    },
+                                    {
+                                        value: 2,
+                                        label: '否'
+                                    }
+                                ]
+                            },
+                            label: '是否缓存',
+                            component: 'radio',
+                            class: 'mt-4',
+                            initialValue: 2,
+                            hidden: '{{$values.type == 3}}'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
+// @ts-nocheck
+/**import { useCreate } from '@/form/composables/useCreate'
+const props = defineProps({
+    primary: [String, Number],
+    api: String,
+})
+
+
+const { form } = useCreate(props.api, props.primary)
+*/
+const submit = (formData) => {
+    console.log(formData)
+}
+</script>

modules/Develop/views/dymaic/index.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <catch-table
+            :columns="columns"
+            :api="api"
+            :search-form="search"
+            row-key="id"
+            :pagination="false"
+        >
+            <template #dialog="row">
+                <Create :primary="row?.id" :api="api"/>
+            </template>
+        </catch-table>
+    </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import Create from './create.vue'
+
+const api = 'permissions/roles'
+const columns = [
+    {
+        label: '角色名称',
+        prop: 'role_name'
+    },
+    {
+        label: '角色标识',
+        prop: 'description'
+    },
+    {
+        label: '角色描述',
+        prop: 'role_name'
+    },
+    {
+        label: '创建时间',
+        prop: 'created_at'
+    },
+    {
+        type: 'operate',
+        label: '操作',
+        width: 200
+    }
+];
+const search = [
+    {
+        type: 'input',
+        label: '角色名称',
+        name: 'role_name'
+    }
+]
+</script>
+

modules/Develop/views/generate/components/structure.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <el-table :data="structures">
-      <el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" width="100px" />
-      <el-table-column prop="label" :label="$t('generate.schema.structure.form_label')" width="150px">
+      <el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')"  />
+      <el-table-column prop="label" :label="$t('generate.schema.structure.form_label')">
         <template #default="scope">
           <el-input v-model="scope.row.label" />
         </template>
       </el-table-column>
-      <el-table-column prop="label" :label="$t('generate.schema.structure.form_component')" width="110px">
+      <el-table-column prop="label" :label="$t('generate.schema.structure.form_component')" >
         <template #default="scope">
           <el-select v-model="scope.row.form_component" class="w-full" filterable>
             <el-option v-for="component in formComponents" :key="component" :label="component" :value="component" />
@@ -29,14 +29,14 @@
           <el-switch v-model="scope.row.search" inline-prompt :active-text="$t('system.yes')" :inactive-text="$t('system.no')" width="45px" />
         </template>
       </el-table-column>
-      <el-table-column prop="search_op" :label="$t('generate.schema.structure.search_op.name')" width="150px">
+      <el-table-column prop="search_op" :label="$t('generate.schema.structure.search_op.name')" >
         <template #default="scope">
           <el-select v-model="scope.row.search_op" :placeholder="$t('generate.schema.structure.search_op.placeholder')" class="w-full">
             <el-option v-for="op in operates" :key="op" :label="op" :value="op" />
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column prop="validates" :label="$t('generate.schema.structure.rules.name')" width="250px">
+      <el-table-column prop="validates" :label="$t('generate.schema.structure.rules.name')">
         <template #default="scope">
           <el-select v-model="scope.row.validates" :placeholder="$t('generate.schema.structure.rules.placeholder')" multiple filterable allow-create clearable class="w-full">
             <el-option v-for="validate in validates" :key="validate" :label="validate" :value="validate" />
@@ -44,7 +44,7 @@
         </template>
       </el-table-column>
       <!--<el-table-column prop="comment" label="注释" />-->
-      <el-table-column prop="id" :label="$t('generate.schema.structure.operate')" width="120px">
+      <el-table-column prop="id" :label="$t('generate.schema.structure.operate')">
         <template #default="scope">
           <el-button type="danger" :icon="Delete" @click="deleteField(scope.row.field)" size="small" />
         </template>

modules/Develop/views/router.ts

@@ -25,6 +25,12 @@ const router: RouteRecordRaw[] = [
         meta: { title: '代码生成', hidden: true, active_menu: '/develop/schemas' },
         component: () => import('./generate/index.vue'),
       },
+      {
+        path: 'dymaic',
+        name: 'dymaic',
+        meta: { title: '动态表格' },
+        component: () => import('./dymaic/index.vue'),
+      },
     ],
   },
 ]

modules/Develop/views/schema/steps/structure.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <el-table :data="structures" class="draggable">
+      <VueDraggable v-model="structures" target=".el-table__body tbody" animation="150" @end="onEnd">
+          <el-table :data="structures" class="draggable" :lazy="false">
           <el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" />
           <el-table-column prop="type" :label="$t('generate.schema.structure.type.name')">
             <template #default="scope">
@@ -22,6 +23,7 @@
             </template>
           </el-table-column>
         </el-table>
+    </VueDraggable>
 
     <div class="flex justify-end mt-4">
       <el-button type="success" :icon="Plus" @click="addField">{{ $t('system.add') }}</el-button>
@@ -88,21 +90,21 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, Ref, ref } from 'vue'
+import { Ref, ref } from 'vue'
 import { useSchemaStore, Structure } from '../store'
 import { Delete, Plus, Edit } from '@element-plus/icons-vue'
 import type { FormInstance } from 'element-plus'
 import Message from '/admin/support/message'
 import http from '/admin/support/http'
 import { Code } from '/admin/enum/app'
+import { VueDraggable } from 'vue-draggable-plus'
 
 const schemaStore = useSchemaStore()
 const emits = defineEmits(['prev', 'next'])
 const visible = ref(false)
 
-const structures = computed(() => {
-  return schemaStore.getStructures
-})
+// 初始化
+const structures = ref(schemaStore.getStructures)
 
 const structure: Ref<Structure> = ref(schemaStore.initStructure())
 // structure
@@ -117,6 +119,8 @@ const updateField = (id: number) => {
       structure.value = s
     }
   })
+
+  schemaStore.setStructures(structures.value)
 }
 
 const form = ref<FormInstance>()
@@ -134,7 +138,10 @@ const submitStructure = (formEl: FormInstance | undefined) => {
 }
 
 const deleteField = (id: number) => {
-  schemaStore.filterStructures(id)
+    structures.value = structures.value.filter((s: Structure) => {
+        return !(s.id === id)
+    })
+    schemaStore.setStructures(structures.value)
 }
 
 const next = () => {
@@ -149,7 +156,10 @@ const next = () => {
     })
   }
 }
-
+// 调整数据结构
+const onEnd = () => {
+    schemaStore.setStructures(structures.value)
+}
 const types: string[] = [
   'id',
   'smallIncrements',
@@ -201,7 +211,6 @@ const types: string[] = [
   'tinyIncrements',
   'tinyInteger',
   'tinyText',
-  'unsignedDecimal',
   'uuid',
   'year',
 ]

modules/Permissions/Http/Controllers/PermissionsController.php

@@ -34,7 +34,7 @@ class PermissionsController extends Controller
         }
 
         return $this->model->setBeforeGetList(function ($query) {
-            return $query->with('actions')->whereIn('type', [MenuType::Top->value(), MenuType::Menu->value()]);
+            return $query->with('actions')->whereIn('type', [MenuType::Top->value(), MenuType::Menu->value()])->orderByDesc('sort');
         })->getList();
     }
 

modules/User/Models/Traits/UserRelations.php

@@ -59,7 +59,7 @@ trait UserRelations
         /* @var Permissions $permissionsModel */
         $permissionsModel = app($this->getPermissionsModel());
         if ($this->isSuperAdmin()) {
-            $permissions = $permissionsModel->get();
+            $permissions = $permissionsModel->orderByDesc('sort')->get();
         } else {
             $permissionIds = Collection::make();
             $this->roles()->with('permissions')->get()
@@ -67,7 +67,7 @@ trait UserRelations
                     $permissionIds = $permissionIds->concat($role->permissions?->pluck('id'));
                 });
 
-            $permissions = $permissionsModel->whereIn('id', $permissionIds->unique())->get();
+            $permissions = $permissionsModel->whereIn('id', $permissionIds->unique())->orderByDesc('sort')->get();
         }
 
         $this->setAttribute('permissions', $permissions->each(fn ($permission) => $permission->setAttribute('hidden', $permission->isHidden())));

package.json

@@ -16,6 +16,7 @@
         "pinia": "^2.1.7",
         "terser": "^5.29.2",
         "vue": "^3.4.21",
+        "vue-draggable-plus": "^0.4.0",
         "vue-i18n": "9",
         "vue-router": "4.3.0",
         "vuedraggable": "^2.24.3"

resources/admin/components/catchForm/CatchForm.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-form :class="schema.class" :model="formValues"  :label-width="schema.labelWidth || 100" :label-position="schema.labelAlign || 'right'" :size="schema.size || 'default'" :disabled="schema.disabled" :hide-required-asterisk="schema.hideRequiredAsterisk" ref="formRef" v-bind="$attrs">
+    <FormRender :formItems="formItems" />
+    <slot name="body"/>
+    <FormItem v-bind="footer" />
+    <slot name="footer"/>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, provide, watch, onMounted } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { handleLinkages, deepParse, setDataByPath, getDataByPath } from '/admin/components/catchForm/support'
+import FormRender from './FormRender.vue'
+import FormItem from './FormItem.vue'
+import { cloneDeep, merge } from 'lodash'
+import type { anyObject, schemaType } from '/admin/components/catchForm/config/commonType'
+import { $schema, $formValues, $selectData, $formEvents, $initialValues } from '/admin/components/catchForm/config/symbol'
+
+const props = defineProps<
+  Readonly<{
+    schema: schemaType
+    schemaContext?: anyObject
+  }>
+>()
+
+const modelValue = defineModel()
+const emit = defineEmits<{
+  onChange: [values: anyObject]
+  onSubmit: [values: anyObject]
+  onSubmitFailed: [e: anyObject]
+}>()
+const formRef = ref<FormInstance>()
+const selectData = reactive({})
+const initialValues = reactive({})
+const stateFormValues = ref({})
+
+const formValues = computed({
+  get() {
+    return modelValue.value || stateFormValues.value
+  },
+  set(values) {
+    modelValue.value = values
+    stateFormValues.value = values
+  }
+})
+
+const context = computed(() => ({
+  $values: formValues.value,
+  $selectData: selectData,
+  $initialValues: initialValues,
+  ...props.schemaContext
+}))
+
+const formItems = computed(() => deepParse(props.schema.items || [], context.value))
+
+// 保持schema的响应 传递给后代使用
+const currentSchema = computed(() => props.schema)
+
+// 表单底部
+const defaultFooter = {
+    name: 'FormFooter',
+    props: {
+        class: 'flex justify-end mt-4'
+    },
+    component: 'inline',
+    children: [
+        {
+            name: 'divider_xAlcpi',
+            props: {
+                name: '提交',
+                clickEvent: 'submitForm'
+            },
+            component: 'button',
+            style: 'margin-right:10px'
+        },
+        {
+            name: 'divider_UktsYm',
+            props: {
+                name: '重置',
+                clickEvent: 'resetForm',
+                type: 'default'
+            },
+            component: 'button'
+        }
+    ]
+}
+const footer = computed(() => props.schema.footer || defaultFooter)
+const validate = () => formRef.value?.validate()
+
+const submit = async () => {
+  try {
+    await validate()
+    emit('onSubmit', formValues.value)
+    return formValues.value
+  } catch (e: any) {
+    emit('onSubmitFailed', e)
+    return Promise.reject(e)
+  }
+}
+
+const getFormValues = () => ({ ...formValues.value })
+const setFormValues = (values: anyObject) => {
+  formValues.value = { ...formValues.value, ...values }
+}
+
+const resetFields = (names: string[]) => {
+  if (names) {
+    let temp = cloneDeep(formValues.value)
+
+    names.forEach(name => {
+      temp = setDataByPath(temp, name, getDataByPath(initialValues, name))
+    })
+
+    formValues.value = temp
+
+  } else {
+    formValues.value = initialValues
+  }
+
+  clearValidate();
+}
+// 这里做一个魔法操作，分栏操作，导致第二栏没有办法初始化，所以 resetFields 下
+// 只有创建的时候进行该操作
+onMounted(() => {
+    resetFields([]);
+})
+// const reset validates
+const clearValidate = () => {
+  formRef.value?.clearValidate()
+}
+watch(
+  formValues,
+  (newVal, oldVal) => {
+    emit('onChange', newVal)
+    handleLinkages({ newVal, oldVal, formValues, formItems: formItems.value })
+  },
+  { deep: true }
+)
+
+watch(initialValues, newVal => {
+  formValues.value = merge(formValues.value, newVal)
+})
+
+provide($schema, currentSchema)
+provide($formValues, {
+  formValues,
+  updateFormValues: (values: anyObject) => (formValues.value = values)
+})
+provide($selectData, selectData)
+provide($formEvents, { submit, validate, getFormValues, setFormValues, resetFields })
+provide($initialValues, {
+  initialValues,
+  updateInitialValues: (values: anyObject) => Object.assign(initialValues, values)
+})
+
+defineExpose({ submit, validate, getFormValues, setFormValues, resetFields, context })
+</script>

resources/admin/components/catchForm/Disabled.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-if="disabled" v-bind="$attrs" class="disabled-wrapper">
+    <div class="mask"></div>
+    <slot />
+  </div>
+
+  <template v-else> <slot /> </template>
+</template>
+
+<script setup>
+defineProps({
+  disabled: Boolean
+})
+</script>
+
+<style scoped lang="scss">
+.disabled-wrapper {
+  background-color: var(--el-disabled-bg-color);
+  position: relative;
+  .mask {
+    cursor: not-allowed;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 10;
+  }
+}
+</style>

resources/admin/components/catchForm/FormItem.vue

@@ -0,0 +1,193 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<template>
+  <template v-if="!hidden">
+    <div v-if="config.type === 'layout'" :style="itemStyle" :class="thisProps.class">
+      <component :is="config.component"  :name="name" :props="props" :children="children" />
+    </div>
+
+    <div v-else-if="config.type === 'assist'" :style="itemStyle" :class="thisProps.class">
+      <component :is="config.component" v-bind="props" />
+    </div>
+
+    <el-form-item v-else id="form-item" :style="itemStyle" :label="label" :key="name" :prop="name" :rules="computeRules" :class="thisProps.class">
+      <!--<template #label v-if="!hideLabel">
+        <div class="form-item-label">
+          <div >{{ label }}</div>
+          <div class="ico" v-if="help">
+            <el-tooltip class="box-item" effect="dark" :content="help">
+              <div><icon-render name="help" /></div>
+            </el-tooltip>
+          </div>
+        </div>
+      </template>-->
+      <component :is="config.component" :class="formItemProps.class" :disabled="schema.disabled" :size="schema.size" v-bind="formItemProps" v-model:[config.modelName]="value" />
+    </el-form-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, onMounted, ref } from 'vue'
+import { isArray, isString } from 'lodash'
+import { isRegexString, getDataByPath, setDataByPath } from '/admin/components/catchForm/support'
+import { $global, $schema, $formValues, $initialValues } from '/admin/components/catchForm/config/symbol'
+import type { formItemType, changeItemType, schemaType, anyObject, $globalType } from '/admin/components/catchForm/config/commonType'
+import defaultElements from '/admin/components/catchForm/components'
+
+type FormItemProps = {
+  label?: string
+  name: string
+  component: string
+  required?: boolean
+  props?: object
+  initialValue?: any
+  help?: string
+  children?: formItemType[]
+  hidden?: boolean | string
+  hideLabel?: boolean
+  rules?: any[]
+  // eslint-disable-next-line vue/no-reserved-props
+  class?: string
+  // eslint-disable-next-line vue/no-reserved-props
+  style?: any
+  change?: changeItemType[]
+}
+
+const thisProps = defineProps<FormItemProps>()
+
+const { elements = {} } = inject<$globalType>($global, { elements: defaultElements })
+
+const schema = inject<schemaType>($schema)
+
+const { formValues, updateFormValues } = inject($formValues, {
+  formValues: ref({}),
+  updateFormValues: (values: anyObject) => {
+    console.log(values)
+  }
+})
+
+const { initialValues, updateInitialValues } = inject($initialValues, {
+  initialValues: {},
+  updateInitialValues: (values: anyObject) => {
+    console.log(values)
+  }
+})
+
+const value = computed({
+  get() {
+    return getDataByPath(formValues.value, thisProps.name)
+  },
+  set(val) {
+      const newValues = setDataByPath(formValues.value, thisProps.name, val)
+
+      updateFormValues(newValues)
+  }
+})
+
+const itemStyle = computed(() => ({
+  // marginBottom: thisProps.design ? 0 : '18px',
+  ...thisProps.style
+}))
+
+const computeRules = computed(() => {
+  const { rules, required } = thisProps
+
+  const ruleData = []
+
+  if (required) {
+    ruleData.push({ required: true, message: '该字段是必填字段', trigger: 'blur' })
+  }
+
+  if (rules) {
+    const ruleParse = rules.map(({ type, message, trigger, customReg }) => {
+      const ruleDef = {
+        message,
+        trigger
+      }
+      if (['email', 'url'].includes(type)) {
+        return { ...ruleDef, type }
+      }
+      if (type === 'custom') {
+        return {
+          ...ruleDef,
+          pattern: customReg
+        }
+      }
+      if (isRegexString(type)) {
+        return {
+          ...ruleDef,
+          pattern: type
+        }
+      }
+      return {}
+    })
+    return [...ruleData, ...ruleParse]
+  }
+
+  return ruleData
+})
+
+const currentComponent = computed(() => {
+  if (isString(value.value) && /^{{\s*(.*?)\s*}}$/.test(value.value)) {
+    return 'input'
+  }
+
+  return thisProps.component
+})
+
+const config = computed(() => {
+  return elements[currentComponent.value] || {}
+})
+
+const formItemProps = computed(() => {
+  const initProps: anyObject = {
+    ...thisProps.props,
+    name: thisProps.name
+  }
+
+  if (thisProps.children) {
+    initProps.children = thisProps.children
+  }
+
+  return initProps
+})
+
+onMounted(() => {
+    if (thisProps.initialValue !== undefined) {
+        if (!value.value || (isArray(value.value) && value.value.length === 0)) {
+            const newInitialValues = setDataByPath(initialValues, thisProps.name, thisProps.initialValue)
+            updateInitialValues(newInitialValues)
+            // select array value
+            if (isArray(value.value)) {
+                nextTick(() => {
+                    value.value = thisProps.initialValue
+                })
+            }
+        }
+    }
+    /**
+    if (!value.value && thisProps.default !== undefined) {
+        const newInitialValues = setDataByPath(initialValues, thisProps.name, thisProps.default)
+        updateInitialValues(newInitialValues)
+    }*/
+})
+</script>
+
+<style lang="scss">
+#form-item {
+  .form-item-label {
+    display: flex;
+    position: relative;
+    .ico {
+      margin-left: 3px;
+      font-size: 15px;
+      position: relative;
+      .el-tooltip__trigger {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>

resources/admin/components/catchForm/FormRender.vue

@@ -0,0 +1,13 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<template>
+  <form-item v-for="item in formItems" :key="item.name" v-bind="item" />
+</template>
+
+<script setup lang="ts">
+import type { formItemsType } from '/admin/components/catchForm/config/commonType'
+import FormItem from './FormItem.vue'
+
+const props = defineProps<{
+  formItems: formItemsType
+}>()
+</script>

resources/admin/components/catchForm/components/Alert/index.ts

@@ -0,0 +1,6 @@
+import { ElAlert } from 'element-plus'
+export default {
+  name: 'alert',
+  component: ElAlert,
+  type: 'assist'
+}

resources/admin/components/catchForm/components/Button/Button.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-button class="Button" v-bind="{ ...$attrs, ...props }" @click="onClick">{{ name }}</el-button>
+</template>
+
+<script setup>
+import { inject } from 'vue'
+import { ElButton } from 'element-plus'
+import { $formEvents } from '/admin/components/catchForm/config/symbol'
+
+const formEvents = inject($formEvents)
+
+const props = defineProps({
+  name: String,
+  disabled: Boolean,
+  type: {
+    type: String,
+    default: 'primary'
+  },
+  clickEvent: String,
+  customEvent: Function,
+  color: String
+})
+
+const onClick = () => {
+  if (props.clickEvent === 'submitForm') {
+    formEvents.submit()
+  }
+  if (props.clickEvent === 'resetForm') {
+    formEvents.resetFields()
+  }
+  if (props.clickEvent === 'custom') {
+    props.customEvent()
+  }
+}
+</script>
+
+<style scoped>
+.Button {
+  /* background-color: v-bind(color); */
+}
+</style>

resources/admin/components/catchForm/components/Button/index.ts

@@ -0,0 +1,7 @@
+import Button from './Button.vue'
+
+export default {
+  name: 'button',
+  component: Button,
+  type: 'assist'
+}

resources/admin/components/catchForm/components/Card/Card.vue

@@ -0,0 +1,24 @@
+<template>
+  <ElCard v-bind="{ ...props, ...$attrs }">
+    <FormRender :formItems="children" />
+  </ElCard>
+</template>
+
+<script setup>
+import { ElCard } from 'element-plus'
+import FormRender from '/admin/components/catchForm/FormRender.vue'
+
+defineProps({
+  props: Object,
+  children: Array,
+  design: Boolean
+})
+</script>
+
+<style lang="scss">
+.form-item-grid {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>

resources/admin/components/catchForm/components/Card/index.ts

@@ -0,0 +1,7 @@
+import Card from './Card.vue'
+
+export default {
+  name: 'card',
+  component: Card,
+  type: 'layout'
+}

resources/admin/components/catchForm/components/Cascader/Cascader.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-cascader
+    v-model="modelValue"
+    :options="options"
+    :show-all-levels="!takeLastLevel"
+    :props="{
+      multiple,
+      value: valueKey,
+      label,
+      checkStrictly,
+    }"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => []
+  },
+  checkStrictly: {
+    type: Boolean,
+    default: false
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: 'label'
+  },
+  valueKey: {
+    type: String,
+    default: 'value'
+  },
+  value: {
+    type:[String, Number, Array],
+    default: ''
+  },
+  api: Object,
+  name: String,
+  takeLastLevel: {
+    type: Boolean,
+    default: false
+  }
+})
+const modelValue = defineModel()
+onMounted(() => {
+  modelValue.value = props.value
+})
+</script>

resources/admin/components/catchForm/components/Cascader/index.ts

@@ -0,0 +1,7 @@
+import Cascader from './Cascader.vue'
+
+export default {
+  name: 'cascader',
+  type: 'basic',
+  component: Cascader
+}

resources/admin/components/catchForm/components/Checkbox/Checkbox.vue

@@ -0,0 +1,71 @@
+<template>
+  <div v-if="!options.length" style="font-size: 12px">暂无选项</div>
+
+  <el-checkbox-group v-bind="$attrs" v-model="modelValue" @change="selectChange">
+    <template v-if="optionType === 'circle' || optionType === 'border'">
+      <el-checkbox v-for="item in options" :key="item[valueKey]" :value="item[valueKey]" :border="optionType === 'border'" :disabled="item.disabled">{{ item[label] }}</el-checkbox>
+    </template>
+
+    <el-space v-if="optionType === 'button'" wrap :size="[space, space]">
+      <el-checkbox-button v-for="item in options" :key="item[valueKey]" :value="item[valueKey]" size="large" :disabled="item.disabled">{{ item[label] }}</el-checkbox-button>
+    </el-space>
+  </el-checkbox-group>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => []
+  },
+  mode: {
+    type: String,
+    default: 'static'
+  },
+  label: {
+    type: String,
+    default: 'label'
+  },
+  valueKey: {
+    type: String,
+    default: 'value'
+  },
+  autoSelectedFirst: {
+    type: Boolean,
+    default: false
+  },
+  api: Object,
+  name: String,
+  optionType: {
+    type: String,
+    default: 'circle'
+  },
+  space: {
+    type: Number,
+    default: 0
+  },
+  multiple: {
+    type: Boolean,
+    default: true // 不可更改
+  },
+  value: {
+    type: Array,
+    default: []
+  },
+})
+
+// const emits = defineEmits(['update:modelValue', 'onChangeSelect'])
+const modelValue = defineModel()
+const selectChange = value => {
+  modelValue.value = value
+}
+
+onMounted(() => {
+    modelValue.value = props.value
+})
+// const { selectVal, currentOptions, selectChange, loading } = useSelect(props, emits)
+</script>
+
+<style lang="scss" scoped></style>

resources/admin/components/catchForm/components/Checkbox/index.ts

@@ -0,0 +1,7 @@
+import Checkbox from './Checkbox.vue'
+
+export default {
+  name: 'checkbox',
+  type: 'basic',
+  component: Checkbox
+}

resources/admin/components/catchForm/components/Collapse/Collapse.vue

@@ -0,0 +1,34 @@
+<template>
+  <ElCollapse v-bind="{ ...props, ...$attrs }" v-model="activeKey">
+    <ElCollapseItem v-for="item in children" :key="item.name" :name="item.name">
+      <template #title>
+        <Title :title="item.title" italic type="h4" />
+      </template>
+      <FormRender :formItems="item.children" />
+    </ElCollapseItem>
+  </ElCollapse>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import FormRender from '/admin/components/catchForm/FormRender.vue'
+import Title from '../Title/Title.vue'
+const thisProps = defineProps({
+  props: Object,
+  children: Array
+})
+
+const activeKey = ref([])
+
+onMounted(() => {
+  activeKey.value = thisProps.children.filter(item => item.checked).map(item => item.name)
+})
+</script>
+
+<style lang="scss">
+.form-item-grid {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>

resources/admin/components/catchForm/components/Collapse/index.ts

@@ -0,0 +1,7 @@
+import Collapse from './Collapse.vue'
+
+export default {
+  name: 'collapse',
+  component: Collapse,
+  type: 'layout'
+}

resources/admin/components/catchForm/components/ColorPicker/ColorPicker.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: ''
+    }
+})
+
+const modelValue = defineModel()
+
+onMounted(() => {
+    modelValue.value = props.value
+})
+</script>
+
+<template>
+<el-color-picker v-model="modelValue" v-bind="$attrs"/>
+</template>
+
+<style scoped lang="scss">
+
+</style>

resources/admin/components/catchForm/components/ColorPicker/index.ts

@@ -0,0 +1,6 @@
+import { ElColorPicker } from 'element-plus'
+export default {
+  name: 'color_picker',
+  component: ElColorPicker,
+  type: 'basic'
+}

resources/admin/components/catchForm/components/Custom/Custom.vue

@@ -0,0 +1,30 @@
+<template>
+  <span class="empty" v-if="!componentName">请输入全局注册得组件名</span>
+  <component v-else :is="componentName" v-model="value" v-bind="$attrs" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineProps({
+  componentName: String,
+  modelValue: null
+})
+
+const modelValue = defineModel()
+
+const value = computed({
+  get() {
+    return modelValue.value
+  },
+  set(val) {
+    modelValue.value = val
+  }
+})
+</script>
+
+<style scoped>
+.empty {
+  font-size: 12px;
+}
+</style>

resources/admin/components/catchForm/components/Custom/index.ts

@@ -0,0 +1,11 @@
+import Custom from './Custom.vue'
+
+export default {
+  name: 'custom',
+  component: Custom,
+  initialValues: {
+    label: '自定义组件',
+    component: 'Custom',
+    props: {}
+  }
+}

resources/admin/components/catchForm/components/DatePicker/index.ts

@@ -0,0 +1,7 @@
+import { ElDatePicker } from 'element-plus'
+
+export default {
+  name: 'date_picker',
+  component: ElDatePicker,
+  type: 'basic'
+}

resources/admin/components/catchForm/components/Divider/Divider.vue

@@ -0,0 +1,13 @@
+<template>
+  <ElDivider v-bind="$attrs">{{ title }}</ElDivider>
+</template>
+
+<script setup>
+import { ElDivider } from 'element-plus'
+
+defineProps({
+  title: String
+})
+</script>
+
+<style></style>

resources/admin/components/catchForm/components/Divider/index.ts

@@ -0,0 +1,7 @@
+import Divider from './Divider.vue'
+
+export default {
+  name: 'divider',
+  component: Divider,
+  type: 'assist'
+}

resources/admin/components/catchForm/components/FormList/FormList.vue

@@ -0,0 +1,161 @@
+<template>
+  <div id="formList">
+    <div>
+      <template v-if="mode === 'inline'">
+        <el-form-item v-for="(item, index) in list" :key="item.key" class="list-item">
+          <div class="list-item-content">
+            <el-space>
+              <form-item v-for="field in fields(index)" v-bind="field" :key="field.label" :name="`${name}.${index}.${field.name}`" hideLabel />
+            </el-space>
+
+            <el-button v-if="allowReduce" @click="handleReduceItem(index)" circle size="small" :disabled="disabled">
+                <Icon name="minus"/>
+              </el-button>
+          </div>
+        </el-form-item>
+      </template>
+
+      <template v-if="mode === 'card'">
+        <el-card v-for="(item, index) in list" :key="item.key" class="list-card">
+          <template #header>
+            <div class="card-header">
+              <span>{{ title + (index + 1) }}</span>
+              <el-button v-if="allowReduce" @click="handleReduceItem(index)" circle size="small" :disabled="disabled">
+                  <Icon name="minus"/>
+              </el-button>
+            </div>
+          </template>
+          <form-item v-for="field in fields(index)" v-bind="field" :key="field.label" class="list-card-item" :name="`${name}.${index}.${field.name}`" />
+        </el-card>
+      </template>
+
+      <el-table v-if="mode === 'table' && list.length" :data="list" style="width: 100%">
+        <el-table-column :prop="item.name" :label="item.label" :key="item.name" v-for="item in children" :width="item.width" :formatter="(row, _, __, index) => formatter(item, row, index)" />
+        <el-table-column fixed="right" min-width="60">
+          <template #default="record">
+            <el-button v-if="allowReduce" @click="handleReduceItem(record.$index)" circle size="small" :disabled="disabled">
+                <Icon name="minus"/>
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div>
+        <el-button v-if="allowAdd && !isMax" @click="handleAddItem" circle size="small" :disabled="disabled">
+            <Icon name="plus"/>
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, h } from 'vue'
+import FormItem from '/admin/components/catchForm/FormItem.vue'
+import { deepParse } from '/admin/components/catchForm/support'
+
+const props = defineProps({
+  modelValue: Array,
+  children: Array,
+  allowAdd: {
+    default: true,
+    type: Boolean
+  },
+  allowReduce: {
+    default: true,
+    type: Boolean
+  },
+  defaultLineCount: {
+    default: 0,
+    type: Number
+  },
+  maxLines: {
+    default: 999,
+    type: Number
+  },
+  mode: {
+    default: 'table',
+    type: String
+  },
+  title: {
+    default: '卡片',
+    type: String
+  },
+  newItemDefaults: {
+    type: Function,
+    default: () => ({})
+  },
+  name: String,
+  disabled: Boolean
+})
+
+const modelValue = defineModel();
+
+const list = computed(() => {
+  return modelValue.value || []
+})
+
+const fields = computed(() => index => deepParse(props.children, { $item: list.value[index], $index: index }))
+
+const isMax = computed(() => {
+  return list.value.length >= props.maxLines
+})
+
+const handleAddItem = () => {
+  if (isMax.value) {
+    return
+  }
+
+  modelValue.value = [...list.value, props.newItemDefaults(list.value.length)]
+}
+
+const handleReduceItem = index => {
+  const newData = list.value.filter((v, i) => i !== index)
+
+  modelValue.value = newData
+}
+
+const formatter = (item, data, index) => {
+  return h(FormItem, {
+    ...deepParse(item, { $item: list.value[index], $index: index }),
+    hideLabel: true,
+    style: { marginBottom: 0 },
+    name: `${props.name}.${index}.${item.name}`
+  })
+  // return (
+  //   <FormItem
+  //     {...deepParse(item, { $item: list.value[index], $index: index })}
+  //     hideLabel
+  //     style={{ marginBottom: 0 }}
+  //     name={`${props.name}.${index}.${item.name}`}
+  //   />
+  // )
+}
+</script>
+
+<style lang="scss">
+#formList {
+  position: relative;
+  width: 100%;
+  .list-item {
+    margin-bottom: 10px;
+    .list-item-content {
+      display: flex;
+    }
+  }
+  .list-card {
+    margin-bottom: 10px;
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .list-card-item {
+      margin-bottom: 15px;
+    }
+  }
+  .list-btn {
+    margin-left: 10px;
+  }
+}
+</style>

resources/admin/components/catchForm/components/FormList/index.ts

@@ -0,0 +1,7 @@
+import FormList from './FormList.vue'
+
+export default {
+  name: 'form_list',
+  component: FormList,
+  type: 'high'
+}

resources/admin/components/catchForm/components/Gird/Grid.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="form-item-grid">
+    <div :style="gridStyle">
+      <FormRender :formItems="children" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import FormRender from '/admin/components/catchForm/FormRender.vue'
+
+const thisProps = defineProps({
+  name: String,
+  props: Object,
+  children: Array,
+  design: Boolean
+})
+const gridStyle = computed(() => ({
+  display: 'grid',
+  'grid-template-columns': `repeat(${thisProps.props.columns}, 1fr)`,
+  'row-gap': thisProps.props['row-gap'] + 'px',
+  'column-gap': thisProps.props['column-gap'] + 'px'
+}))
+</script>
+
+<style scoped lang="scss">
+.form-item-grid {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+  .el-form-item__content {
+    align-items: start;
+  }
+}
+</style>

resources/admin/components/catchForm/components/Gird/index.ts

@@ -0,0 +1,7 @@
+import Grid from './Grid.vue'
+
+export default {
+  name: 'grid',
+  type: 'layout',
+  component: Grid
+}

resources/admin/components/catchForm/components/IconSelect/IconSelect.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-popover placement="right" :width="400" trigger="click">
+    <template #reference>
+      <el-input v-model="iconModel" name="icon" clearable />
+    </template>
+    <div>
+      <Icons v-model="iconModel" @close="closeSelectIcon" />
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const iconModel = defineModel()
+// 选择 icon
+const visible = ref(false)
+// 关闭选择 icon
+const closeSelectIcon = () => {
+  visible.value = false
+}
+</script>

resources/admin/components/catchForm/components/IconSelect/index.ts

@@ -0,0 +1,7 @@
+import IconSelect from './IconSelect.vue'
+
+export default {
+  name: 'icon_select',
+  type: 'basic',
+  component: IconSelect
+}

resources/admin/components/catchForm/components/Inline/Inline.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="form-item-inline">
+    <div :class="InlineStyle">
+      <FormRender :formItems="children" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import FormRender from '/admin/components/catchForm/FormRender.vue'
+
+const thisProps = defineProps({
+  name: String,
+  props: Object,
+  children: Array,
+  class: String
+})
+const InlineStyle = computed(() => thisProps.props.class)
+</script>

resources/admin/components/catchForm/components/Inline/index.ts

@@ -0,0 +1,7 @@
+import Inline from './Inline.vue'
+
+export default {
+  name: 'inline',
+  type: 'layout',
+  component: Inline
+}

resources/admin/components/catchForm/components/Input/index.ts

@@ -0,0 +1,8 @@
+import { ElInput } from 'element-plus'
+import { h } from 'vue'
+
+export default {
+  name: 'input',
+  component: h(ElInput, { showWordLimit: true, autocomplete: 'off' }),
+  type: 'basic'
+}

resources/admin/components/catchForm/components/InputNumber/InputNumber.vue

@@ -0,0 +1,39 @@
+<template>
+  <span id="NumberInput">
+    <el-input-number v-bind="{ ...$attrs, ...props }" v-model="value" />
+    <span class="unit" v-if="unit">{{ unit }} </span>
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { ElInputNumber } from 'element-plus'
+
+const props = defineProps({
+  unit: String,
+  min: { type: Number, default: 0 },
+  max: Number,
+  disabled: Boolean,
+  step: { type: Number, default: 1 }
+})
+
+const modelValue = defineModel()
+
+const value = computed({
+  get() {
+    return modelValue.value
+  },
+  set(val) {
+    modelValue.value = val
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+#NumberInput {
+  position: relative;
+  .unit {
+    margin: 0 5px;
+  }
+}
+</style>

resources/admin/components/catchForm/components/InputNumber/index.ts

@@ -0,0 +1,7 @@
+import InputNumber from './InputNumber.vue'
+
+export default {
+  name: 'input_number',
+  type: 'basic',
+  component: InputNumber
+}

resources/admin/components/catchForm/components/Password/index.ts

@@ -0,0 +1,8 @@
+import { ElInput } from 'element-plus'
+import { h } from 'vue'
+
+export default {
+  name: 'password',
+  component: h(ElInput, { type: 'password', showWordLimit: true, autocomplete: 'off' }),
+  type: 'basic'
+}

resources/admin/components/catchForm/components/Radio/Radio.vue

@@ -0,0 +1,68 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<template>
+  <div v-if="!options.length" style="font-size: 12px">暂无选项</div>
+  <el-radio-group v-model="modelValue" @change="clickRadio" v-bind="$attrs">
+    <el-space wrap :direction="direction" :size="[space, space]" alignment="normal" v-if="space > 0">
+      <template v-if="optionType === 'circle' || optionType === 'border'">
+        <el-radio v-for="item in options"  :key="item[value]" :value="item[value]" :border="optionType === 'border'">{{ item[label] }}</el-radio>
+      </template>
+
+      <template v-else>
+        <el-radio-button v-for="item in options"  :key="item[value]" :value="item[value]" :size="$attrs.size">{{ item[label] }} </el-radio-button>
+      </template>
+    </el-space>
+    <div v-else>
+      <template v-if="optionType === 'circle' || optionType === 'border'">
+        <el-radio v-for="item in options"  :key="item[value]" :value="item[value]" :border="optionType === 'border'">{{ item[label] }}</el-radio>
+      </template>
+
+      <template v-else>
+        <el-radio-button v-for="item in options"  :key="item[value]" :value="item[value]" :size="$attrs.size">{{ item[label] }} </el-radio-button>
+      </template>
+    </div>
+  </el-radio-group>
+</template>
+
+<script setup>
+// import { defineEmits } from 'vue'
+// import useSelect from '/admin/components/catchForm/hooks/useSelect'
+
+defineProps({
+  options: {
+    type: Array,
+    default: () => []
+  },
+  label: {
+    type: String,
+    default: 'label'
+  },
+  value: {
+    type: String,
+    default: 'value'
+  },
+  autoSelectedFirst: {
+    type: Boolean,
+    default: false
+  },
+  api: Object,
+  name: String,
+  optionType: {
+    type: String,
+    default: 'circle'
+  },
+
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
+  space: {
+    type: Number,
+    default: 0
+  }
+})
+
+const modelValue = defineModel()
+const clickRadio = value => {
+    modelValue.value = value
+}
+</script>

resources/admin/components/catchForm/components/Radio/index.ts

@@ -0,0 +1,7 @@
+import Radio from './Radio.vue'
+
+export default {
+  name: 'radio',
+  type: 'basic',
+  component: Radio
+}

resources/admin/components/catchForm/components/Rate/index.ts

@@ -0,0 +1,7 @@
+import { ElRate } from 'element-plus'
+
+export default {
+  name: 'rate',
+  component: ElRate,
+  type: 'basic'
+}

resources/admin/components/catchForm/components/Select/Select.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-select v-bind="$attrs" class="w-full" clearable filterable :multiple="multiple" :value-key="valueKey" v-model="modelValue">
+    <template v-if="group">
+      <el-option-group v-for="group in elOptions" :key="group[label]" :label="group[label]">
+        <el-option v-for="item in group.options" :key="item[valueKey]" :label="item[label]" :value="item[valueKey]" />
+      </el-option-group>
+    </template>
+    <el-option v-for="option in elOptions" :key="option[valueKey]" :label="option[label]" :value="option[valueKey]" v-else>
+      <slot />
+    </el-option>
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import {  inject, ref, watch } from 'vue'
+import { $global} from '/admin/components/catchForm/config/symbol'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    require: false,
+    default: () => {
+      return []
+    }
+  },
+  label: {
+    type: String,
+    default: 'label'
+  },
+  valueKey: {
+      type: String,
+      default: 'value'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  api: {
+    type: String,
+    require: false,
+    default: ''
+  },
+  group: {
+    type: Boolean,
+    default: false
+  },
+  query: {
+    type: Object,
+    default: null
+  }
+})
+
+interface Option {
+  label: string
+  value: string | number
+}
+
+interface GroupOption {
+  label: string
+  options: Array<Option>
+}
+
+const modelValue = defineModel()
+
+const { http } = inject($global)
+const getOptions = () => {
+    http.get(props.api, props.query).then(r => {
+    elOptions.value = r.data.data
+  })
+}
+
+const elOptions: any = props.group ? ref<Array<GroupOption>>() : ref<Array<Option>>()
+if (props.api) {
+  if (!props.query) {
+    getOptions()
+  } else {
+    watch(props, function () {
+      getOptions()
+    })
+  }
+} else {
+  elOptions.value = props.options
+}
+</script>

resources/admin/components/catchForm/components/Select/index.ts

@@ -0,0 +1,7 @@
+import Select from './Select.vue'
+
+export default {
+  name: 'select',
+  type: 'basic',
+  component: Select
+}

resources/admin/components/catchForm/components/Slider/index.ts

@@ -0,0 +1,7 @@
+import { ElSlider } from 'element-plus'
+
+export default {
+  name: 'slider',
+  component: ElSlider,
+  type: 'basic'
+}

resources/admin/components/catchForm/components/Switch/index.ts

@@ -0,0 +1,7 @@
+import { ElSwitch } from 'element-plus'
+import cswitch from './index.vue'
+export default {
+  name: 'switch',
+  component: cswitch,
+  type: 'basic'
+}

resources/admin/components/catchForm/components/Switch/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { before } from 'node:test'
+
+const props = defineProps({
+    value: {
+        type: [Boolean, String, Number],
+        default: false
+    }
+})
+
+defineOptions({
+    name: 'cswitch'
+})
+
+const valueModel = defineModel()
+onMounted(() => {
+    valueModel.value = props.value
+})
+
+const change = (val: any) => {
+    valueModel.value = val
+}
+</script>
+
+<template>
+  <el-switch @change="change" v-model="valueModel"/>
+</template>

resources/admin/components/catchForm/components/TextArea/index.ts

@@ -0,0 +1,8 @@
+import { ElInput } from 'element-plus'
+import { h } from 'vue'
+
+export default {
+  name: 'textarea',
+  component: h(ElInput, { type: 'textarea', showWordLimit: true, autocomplete: 'off' }),
+  type: 'basic'
+}

resources/admin/components/catchForm/components/Title/Title.vue

@@ -0,0 +1,23 @@
+<template>
+  <component :is="type" :class="class" :style="{ fontStyle: italic ? 'italic' : 'normal' }">{{
+    title
+  }}</component>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '这是一个标题'
+  },
+  type: {
+    type: String,
+    default: 'h3'
+  },
+  class: {
+    type: String,
+    default: ''
+  },
+  italic: Boolean
+})
+</script>

resources/admin/components/catchForm/components/Title/index.ts

@@ -0,0 +1,7 @@
+import Title from './Title.vue'
+
+export default {
+  name: 'title',
+  component: Title,
+  type: 'assist'
+}

resources/admin/components/catchForm/components/Transfer/Transfer.vue

@@ -0,0 +1,38 @@
+<template>
+  <Disabled :disabled="disabled"> <ElTransfer v-bind="$attrs" v-model="modelValue" :data="options" :props="{ label: props.label, key: props.valueKey }" /></Disabled>
+</template>
+
+<script setup>
+import { ElTransfer } from 'element-plus'
+import Disabled from '/admin/components/catchForm/Disabled.vue'
+
+const modelValue = defineModel()
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => []
+  },
+  mode: {
+    type: String,
+    default: 'static'
+  },
+  label: {
+    type: String,
+    default: 'label'
+  },
+  valueKey: {
+    type: String,
+    default: 'value'
+  },
+  api: Object,
+  disabled: Boolean
+})
+
+// const emits = defineEmits(['update:modelValue', 'onChangeSelect'])
+
+// const { selectVal, currentOptions, selectChange, loading } = useSelect(props, emits)
+
+// watchEffect(() => {
+//   console.log(currentOptions.value)
+// })
+</script>

resources/admin/components/catchForm/components/Transfer/index.ts

@@ -0,0 +1,7 @@
+import Transfer from './Transfer.vue'
+
+export default {
+  name: 'transfer',
+  type: 'basic',
+  component: Transfer
+}

resources/admin/components/catchForm/components/Tree/Tree.vue

@@ -0,0 +1,86 @@
+<template>
+    <el-tree
+        ref="tree"
+        :data="data"
+        :node-key="valueKey"
+        :class="class"
+        :props="{ label }"
+        @check="selectPermissions"
+        @node-click="nodeClick"
+    />
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, onMounted, watch, inject } from 'vue'
+import { isArray } from 'lodash'
+import { $global} from '/admin/components/catchForm/config/symbol'
+
+const tree = ref()
+const  modelValue = defineModel()
+const currentCheckedKeys = ref<Array<number>|Array<string>|string|number>([])
+const data = ref<any>([])
+const { http } = inject($global)
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => []
+  },
+  mode: {
+    type: String,
+    default: 'static'
+  },
+  label: {
+    type: String,
+    default: 'label'
+  },
+  valueKey: {
+    type: String,
+    default: 'id'
+  },
+  class: {
+    type: String,
+    default: 'w-full'
+  },
+  api: {
+      type: String,
+      default: null
+  },
+})
+
+if (props.api) {
+    http.get(props.api).then((r:any) => {
+        data.value = r.data.data
+    })
+} else {
+    data.value = props.options
+}
+
+// 设置已选权限
+const selectPermissions = (checkedNodes: any, checkedKeys: any) => {
+    currentCheckedKeys.value = checkedKeys.checkedKeys.concat(checkedKeys.halfCheckedKeys).sort()
+    tree.value.setCheckedKeys(checkedKeys.checkedKeys)
+}
+
+onMounted(() => {
+    nextTick(() => {
+        if (tree.value) {
+            if (isArray(modelValue.value)) {
+                modelValue.value.forEach(id => {
+                    tree.value.setChecked(id, true, false)
+                })
+            } else {
+                tree.value.setCurrentKey(modelValue.value, true, false);
+            }
+        }
+    });
+});
+
+const nodeClick = (node:any) => {
+    currentCheckedKeys.value = node.id
+}
+// 监听选中的 checked
+watch(() => currentCheckedKeys.value, (newValue) => {
+    modelValue.value = newValue
+}, {deep: true})
+</script>

resources/admin/components/catchForm/components/Tree/index.ts

@@ -0,0 +1,7 @@
+import Tree from './Tree.vue'
+
+export default {
+  name: 'tree',
+  type: 'basic',
+  component: Tree
+}

resources/admin/components/catchForm/components/Upload/Upload.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-upload v-model:file-list="fileList" :action="action" :name="uploadKey" multiple :before-upload="beforeAvatarUpload" :limit="limit" :on-exceed="handleExceed" v-bind="$attrs">
+    <el-button type="primary">
+      <template #icon><IconRender name="upload" /></template>
+      {{ buttonText }}
+    </el-button>
+  </el-upload>
+</template>
+
+<script setup>
+import { onBeforeMount, computed } from 'vue'
+import { ElUpload, ElButton, ElMessage } from 'element-plus'
+
+const props = defineProps({
+  action: String,
+  height: Number,
+  width: Number,
+  fileTypes: { type: Array, default: () => [] },
+  size: Number,
+  dataPath: {
+    type: String,
+    default: 'data'
+  },
+  uploadKey: {
+    type: String,
+    default: 'file'
+  },
+  buttonText: {
+    type: String,
+    default: '点击上传'
+  },
+  limit: {
+    type: Number,
+    default: 2
+  }
+})
+
+const modelValue = defineModel({
+  type: Array,
+  required: true
+})
+
+const fileList = computed({
+  get() {
+    return modelValue.value
+  },
+  set(val) {
+    modelValue.value = val
+  }
+})
+
+const beforeAvatarUpload = rawFile => {
+  const [, type] = rawFile.type.split('/')
+
+  // if (!props.fileTypes.includes(type)) {
+  //   ElMessage.error('不支持该图片格式!')
+  //   return false
+  // }
+
+  if (rawFile.size / 1024 / 1024 > props.size) {
+    ElMessage.error(`图片文件大小不能超过${props.size}MB！`)
+    return false
+  }
+
+  return true
+}
+
+const handleExceed = () => {
+  ElMessage.warning(`上传数量限制为 ${props.limit} 个！`)
+}
+
+onBeforeMount(() => {
+  const { modelValue } = props
+
+  if (modelValue) {
+    imageUrl.value = modelValue
+  }
+})
+</script>

resources/admin/components/catchForm/components/Upload/index.ts

@@ -0,0 +1,7 @@
+import Upload from './Upload.vue'
+
+export default {
+  name: 'upload',
+  component: Upload,
+  type: 'basic'
+}

resources/admin/components/catchForm/components/UploadFile/UploadFile.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { uploadFile } from '/admin/composables/upload'
+const props = defineProps({
+    action: {
+        type: String
+    },
+    name: {
+        type: String,
+        default: 'image'
+    },
+    auto: {
+        type: Boolean,
+        default: true
+    },
+    // eslint-disable-next-line vue/no-reserved-props
+    class: {
+        type: String,
+        default: 'w-24 h-24'
+    },
+    requestFrom: {
+        type: String,
+        default: 'Dashboard'
+    },
+    token:{
+        type: String,
+        required: true
+    },
+    ext: {
+        type: Array,
+        default: () => {
+            return ['docx', 'pdf', 'txt', 'html', 'zip', 'tar', 'doc', 'css', 'csv', 'ppt', 'xlsx', 'xls', 'xml']
+        }
+    }
+})
+
+// 定义文件 v-model
+const fileModel = defineModel({
+    type: String,
+    default: '',
+    required: true
+})
+const { upload, beforeUpload, handleExceed, handleSuccess, file, filename} = uploadFile(props.action, props.ext)
+// 更新 model 的 value
+watch(
+    () => file.value,
+    (newValue, oldValue) => {
+        fileModel.value = newValue
+    }
+)
+</script>
+<template>
+    <el-upload
+        ref="upload"
+        :action="action"
+        :show-file-list="false"
+        :name="name"
+        :on-exceed="handleExceed"
+        :auto-upload="auto"
+        :headers="{ authorization: token, 'Request-from': requestFrom }"
+        v-bind="$attrs"
+        :before-upload="beforeUpload"
+        :on-success="handleSuccess"
+        :limit="1"
+    >
+        <div v-if="fileModel">
+            {{ filename }}
+        </div>
+        <div v-else>
+            <div class="flex items-center justify-center w-24 h-12 text-[14px] border border-blue-100 border-dashed rounded">
+                <div>点击上传文件</div>
+            </div>
+        </div>
+    </el-upload>
+</template>
+
+<style scoped lang="scss">
+
+</style>

resources/admin/components/catchForm/components/UploadFile/index.ts

@@ -0,0 +1,7 @@
+import UploadFile from './UploadFile.vue'
+
+export default {
+    name: 'upload_file',
+    component: UploadFile,
+    type: 'basic'
+}

resources/admin/components/catchForm/components/UploadFiles/UploadFiles.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { uploadFile } from '/admin/composables/upload'
+import {  getFilename } from '/admin/support/helper'
+import { Plus, Delete } from '@element-plus/icons-vue'
+
+const props = defineProps({
+    action: {
+        type: String,
+        required: true
+    },
+    name: {
+        type: String,
+        default: 'image'
+    },
+    auto: {
+        type: Boolean,
+        default: true
+    },
+    // eslint-disable-next-line vue/no-reserved-props
+    class: {
+        type: String,
+        default: 'w-24 h-24'
+    },
+    requestFrom: {
+        type: String,
+        default: 'Dashboard'
+    },
+    token:{
+        type: String,
+        required: true
+    },
+    ext: {
+        type: Array,
+        default: () => {
+            return ['docx', 'pdf', 'txt', 'html', 'zip', 'tar', 'doc', 'css', 'csv', 'ppt', 'xlsx', 'xls', 'xml']
+        }
+    }
+})
+
+// 定义文件 v-model
+const filesModel = defineModel({
+    type: Array,
+    default: [],
+    required: true
+})
+const files = ref([])
+
+const { upload, beforeUpload, handleExceed, handleSuccess, file, filename} = uploadFile(props.action, props.ext)
+const delFile = (key: number) => {
+    files.value = files.value.filter((item, index) => index !== key)
+    filesModel.value = files.value
+}
+// 更新 model 的 value
+watch(
+    () => file.value,
+    (newValue, oldValue) => {
+        files.value.push(newValue)
+    }
+)
+
+watch(() => files.value, (newValue, oldValue) => {
+    filesModel.value = newValue
+}, { deep: true, immediate: true })
+</script>
+<template>
+    <el-upload
+        ref="upload"
+        :action="action"
+        multiple
+        :show-file-list="false"
+        :name="name"
+        :auto-upload="auto"
+        :headers="{ authorization: token, 'Request-from': requestFrom }"
+        v-bind="$attrs"
+        :on-exceed="handleExceed"
+        :before-upload="beforeUpload"
+        :on-success="handleSuccess"
+    >
+        <div class="flex flex-col w-full">
+            <div>
+                <div class="flex items-center justify-center w-24 h-12 text-[14px] border border-blue-100 border-dashed rounded">
+                    <div>点击上传文件</div>
+                </div>
+            </div>
+            <div class="w-full">
+                <div v-for="(item, key) in files" :key="key" class="flex justify-between w-full">
+                    <div>{{ getFilename(item) }}</div>
+                    <div class="h-8 flex items-center ml-4"><el-icon @click.stop="delFile(key)" class="cursor-pointer"><Delete /></el-icon></div>
+                </div>
+            </div>
+        </div>
+    </el-upload>
+</template>
+

resources/admin/components/catchForm/components/UploadFiles/index.ts

@@ -0,0 +1,7 @@
+import UploadFiles from './UploadFiles.vue'
+
+export default {
+    name: 'upload_files',
+    component: UploadFiles,
+    type: 'basic'
+}

resources/admin/components/catchForm/components/UploadImage/UploadImage.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-upload
+    :action="action"
+    :show-file-list="false"
+    name="image"
+    :auto-upload="auto"
+    :headers="{ authorization: token, 'Request-from': requestFrom }"
+    ref="upload"
+    :on-exceed="handleExceed"
+    :on-success="handleSuccess"
+    :before-upload="beforeUpload"
+    :limit="1"
+  >
+    <img v-if="fileModel" :src="fileModel" :class="class" />
+    <div v-else>
+      <div class="flex items-center justify-center w-24 h-24 border border-collapse">
+        <el-icon><Plus /></el-icon>
+      </div>
+    </div>
+  </el-upload>
+</template>
+<script setup lang="ts">
+import { watch } from 'vue'
+import { uploadImage } from '/admin/composables/upload'
+import { Plus } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  action: {
+    type: String
+  },
+  name: {
+    type: String,
+    default: 'image'
+  },
+  auto: {
+    type: Boolean,
+    default: true
+  },
+  // eslint-disable-next-line vue/no-reserved-props
+  class: {
+    type: String,
+    default: 'w-24 h-24'
+  },
+  requestFrom: {
+   type: String,
+   default: 'Dashboard'
+  },
+  token:{
+     type: String
+  },
+  ext: {
+    type: Array,
+    default: () => ['jpg', 'jpeg', 'png', 'bmp', 'gif']
+  }
+})
+
+// 定义文件 v-model
+const fileModel = defineModel({
+  type: String,
+  default: '',
+  required: true
+})
+const { upload, beforeUpload, handleExceed, handleSuccess, file } = uploadImage(props.action, props.ext)
+// 更新 model 的 value
+watch(
+  () => file.value,
+  (newValue, oldValue) => {
+    fileModel.value = newValue
+  }
+)
+</script>

resources/admin/components/catchForm/components/UploadImage/index.ts

@@ -0,0 +1,7 @@
+import UploadImage from './UploadImage.vue'
+
+export default {
+  name: 'upload_image',
+  component: UploadImage,
+  type: 'basic'
+}

resources/admin/components/catchForm/components/UploadImages/UploadImages.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="grid grid-cols-4 gap-2">
+        <div v-for="(item, key) in images" :key="key" class="relative w-24 h-24 group">
+            <img :src="item" class="w-full h-full" />
+            <div class="w-full h-full absolute top-0 left-0 bg-black bg-opacity-50 z-10 hidden group-hover:block" >
+            </div>
+            <div class="absolute top-9 left-10 text-white z-50" >
+                <el-icon @click.prevent="delImage(key)" class="cursor-pointer"><Delete /></el-icon>
+            </div>
+        </div>
+        <div>
+            <el-upload
+                :action="action"
+                :show-file-list="false"
+                :name="name"
+                multiple
+                :headers="{ authorization: token, 'Request-from': requestFrom }"
+                ref="upload"
+                :on-exceed="handleExceed"
+                :on-success="handleSuccess"
+                :before-upload="beforeUpload"
+            >
+                <div class="flex items-center justify-center w-24 h-24 border border-collapse">
+                    <el-icon><Plus /></el-icon>
+                </div>
+            </el-upload>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { uploadImage } from '/admin/composables/upload'
+import { Plus, Delete } from '@element-plus/icons-vue'
+
+const props = defineProps({
+    action: {
+        type: String,
+        required: true
+    },
+    name: {
+        type: String,
+        default: 'image'
+    },
+    auto: {
+        type: Boolean,
+        default: true
+    },
+    // eslint-disable-next-line vue/no-reserved-props
+    class: {
+        type: String,
+        default: 'w-24 h-24 p-2'
+    },
+    requestFrom: {
+        type: String,
+        default: 'Dashboard'
+    },
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    token:{
+        type: String,
+        required: true
+    },
+    ext: {
+        type: Array,
+        default: () => ['jpg', 'jpeg', 'png', 'bmp', 'gif']
+    }
+})
+
+// 定义文件 v-model
+const filesModel = defineModel({
+    type: Array<String>,
+    default: [],
+    required: true
+})
+const images = ref([])
+const { upload, beforeUpload, handleExceed, handleSuccess, file } = uploadImage(props.action, props.ext)
+const delImage = (key: number) => {
+    images.value = images.value.filter((item, index) => index !== key)
+    filesModel.value = images.value
+}
+// 更新 model 的 value
+watch(
+    () => file.value,
+    (newValue, oldValue) => {
+        images.value.push(newValue)
+    }
+)
+
+watch(() => images.value, (newValue, oldValue) => {
+    filesModel.value = newValue
+}, { deep: true, immediate: true })
+</script>
+

resources/admin/components/catchForm/components/UploadImages/index.ts

@@ -0,0 +1,7 @@
+import UploadImages from './UploadImages.vue'
+
+export default {
+  name: 'upload_images',
+  component: UploadImages,
+  type: 'basic'
+}

resources/admin/components/catchForm/components/index.ts

@@ -0,0 +1,12 @@
+import type { formElement } from '/admin/components/catchForm/config/commonType'
+
+const modules = import.meta.glob('./*/index.ts', { eager: true })
+const components: { [component: string]: formElement } = {}
+
+for (const path in modules) {
+  const data = (modules[path] as { default: formElement }).default
+  if (data) {
+    components[data.name] = data
+  }
+}
+export default components

resources/admin/components/catchForm/config/commonAttr/apiAttr.js

@@ -0,0 +1,64 @@
+export default [
+  {
+    label: 'url',
+    component: 'Input',
+    name: 'props.api.url',
+    initialValue: '/current/query/article',
+    designKey: 'form-UrE8'
+  },
+  {
+    label: '请求方式',
+    component: 'Radio',
+    name: 'props.api.method',
+    props: {
+      mode: 'static',
+      autoSelectedFirst: true,
+      options: [
+        {
+          label: 'GET',
+          value: 'GET'
+        },
+        {
+          label: 'POST',
+          value: 'POST'
+        },
+        {
+          label: 'PUT',
+          value: 'PUT'
+        },
+        {
+          label: 'DELETE',
+          value: 'DELETE'
+        }
+      ]
+    },
+    designKey: 'form-nOpD'
+  },
+  {
+    label: '请求参数',
+    component: 'JsonEdit',
+    name: 'props.api.params',
+    hidden: '{{ ["POST","PUT"].includes($values.props.api.method) }}',
+    initialValue: {},
+    props: {
+      mode: 'dialog'
+    }
+  },
+  {
+    label: '请求参数',
+    component: 'JsonEdit',
+    name: 'props.api.data',
+    hidden: '{{ ["GET","DELETE"].includes($values.props.api.method) }}',
+    initialValue: {},
+    props: {
+      mode: 'dialog'
+    }
+  },
+  {
+    label: '数据路径',
+    component: 'Input',
+    name: 'props.api.dataPath',
+    initialValue: 'data',
+    designKey: 'form-UrE8'
+  }
+]

resources/admin/components/catchForm/config/commonAttr/basicAttr.js

@@ -0,0 +1,47 @@
+import { recursionDelete } from '/admin/components/catchForm/support'
+
+const basicAttr = (omit = [], moreAttrs = []) => {
+  const attr = [
+    { label: '标签', component: 'Input', name: 'label' },
+    {
+      label: '唯一标识',
+      component: 'Input',
+      name: 'name',
+      help: "既是唯一标识，也是数据路径。比如输入【props.name】，数据就会保存为 { props: { name:'xxx' } }"
+    },
+    { label: '字段说明', component: 'Textarea', name: 'help' },
+    {
+      label: '占位提示',
+      component: 'Input',
+      name: 'props.placeholder',
+      designKey: 'form-ekRL'
+    },
+    { label: '初始值', component: 'Input', name: 'initialValue' },
+    {
+      component: 'Grid',
+      children: [
+        { label: '是否必填', component: 'Switch', name: 'required' },
+        { label: '是否只读', component: 'Switch', name: 'props.readonly' },
+        { label: '是否禁用', component: 'Switch', name: 'props.disabled' },
+        { label: '隐藏字段', component: 'Switch', name: 'hidden' },
+        { label: '隐藏标签', component: 'Switch', name: 'hideLabel' }
+      ],
+      props: {
+        columns: 3,
+        'row-gap': 0,
+        'column-gap': 20
+      },
+      designKey: 'form-R003',
+      name: 'cNmCuu',
+      style: {
+        marginBottom: 0
+      }
+    }
+  ]
+
+  const omitAttrs = recursionDelete(attr, (item) => !omit.includes(item.name))
+
+  return [...omitAttrs, ...moreAttrs]
+}
+
+export default basicAttr

resources/admin/components/catchForm/config/commonAttr/highAttr.js

@@ -0,0 +1,18 @@
+const basicAttr = (omit = []) => {
+  const attr = [
+    { label: '自定义class', component: 'Input', name: 'props.class' },
+    {
+      label: '自定义style',
+      component: 'JsonEdit',
+      name: 'props.style',
+      help: '与vue的style对象格式一样',
+      props: {
+        mode: 'dialog'
+      }
+    }
+  ]
+
+  return attr.filter((item) => !omit.includes(item.name))
+}
+
+export default basicAttr

resources/admin/components/catchForm/config/commonAttr/index.js

@@ -0,0 +1,6 @@
+export { default as basicAttr } from './basicAttr'
+export { default as highAttr } from './highAttr'
+export { default as apiAttr } from './apiAttr'
+export { default as linkageAttr } from './linkageAttr'
+export { default as optionAttr } from './optionAttr'
+export { default as mergeAttr } from './mergeAttr'

resources/admin/components/catchForm/config/commonAttr/linkageAttr.js

@@ -0,0 +1,36 @@
+export default [
+  {
+    component: 'Alert',
+    props: {
+      type: 'success',
+      description: '对于配置级的联动，请直接点击下方按钮【编辑配置文本】，通过插值表达式实现',
+      closable: true,
+      'show-icon': true
+    },
+    designKey: 'design-MQPU',
+    name: 'form-Oqi5'
+  },
+  {
+    label: '值联动',
+    help: '本字段值改变时，修改其他字段的值',
+    name: 'change',
+    component: 'FormList',
+    children: [
+      {
+        label: '目标字段',
+        name: 'target',
+        component: 'Input',
+        props: {}
+      },
+      {
+        label: '值',
+        name: 'value',
+        component: 'Input',
+        props: {}
+      }
+    ],
+    props: {
+      mode: 'card'
+    }
+  }
+]

resources/admin/components/catchForm/config/commonAttr/mergeAttr.js

@@ -0,0 +1,32 @@
+const mergeAttr = (attrConfig) => {
+  const { basic = [], high = [], linkage = [] } = attrConfig
+
+  const attrs = [
+    {
+      component: 'Collapse',
+      name: 'mergeAttr',
+      children: [
+        {
+          title: '常用属性',
+          name: 'basic',
+          checked: true,
+          children: basic
+        },
+        {
+          title: '高级属性',
+          name: 'high',
+          children: high
+        },
+        {
+          title: '联动规则',
+          name: 'linkage',
+          children: linkage
+        }
+      ]
+    }
+  ]
+
+  return attrs
+}
+
+export default mergeAttr

resources/admin/components/catchForm/config/commonAttr/optionAttr.js

@@ -0,0 +1,91 @@
+import apiAttr from './apiAttr'
+
+export default [
+  {
+    component: 'Divider',
+    props: {
+      title: '选项设置',
+      contentPosition: 'center'
+    },
+    designKey: 'design-gSnX',
+    name: 'form-xDEe',
+    style: {
+      marginTop: '40px'
+    }
+  },
+  {
+    label: '标签key',
+    component: 'Input',
+    name: 'props.labelKey',
+    designKey: 'form-X6hs'
+  },
+  {
+    label: '值Key',
+    component: 'Input',
+    name: 'props.valueKey',
+    designKey: 'form-STkl'
+  },
+  {
+    label: '数据模式',
+    component: 'Radio',
+    name: 'props.mode',
+    props: {
+      mode: 'static',
+      options: [
+        {
+          label: '静态',
+          value: 'static'
+        },
+        {
+          label: '远程',
+          value: 'remote'
+        }
+      ],
+      optionType: 'button',
+      space: 0
+    },
+    designKey: 'form-PLpj'
+  },
+  {
+    label: '静态选项',
+    name: 'props.options',
+    component: 'FormList',
+    hidden: '{{$values.props.mode!=="static"}}',
+    children: [
+      {
+        label: '选项名',
+        name: '{{$values.props.labelKey}}',
+        component: 'Input',
+        props: {
+          placeholder: '请输入...'
+        },
+        designKey: 'form-LnGh'
+        // initialValue: "{{ '选项' + ($index+1) }}"
+      },
+      {
+        label: '选项值',
+        name: '{{$values.props.valueKey}}',
+        component: 'Input',
+        props: {},
+        designKey: 'form-HYtW'
+        // initialValue: "{{ 'value' + ($index+1) }}"
+      }
+    ],
+    designKey: 'form-Iwpd',
+    props: {
+      mode: 'table',
+      newItemDefaults:
+        '{{ (index) => ({ [$values.props.labelKey]: `选项${index + 1}`, [$values.props.valueKey]: `value${index + 1}` }) }}'
+    }
+  },
+  {
+    component: 'Card',
+    props: {
+      // header: '远程数据'
+    },
+    designKey: 'id-pGeN',
+    name: 'form-6vzT',
+    hidden: '{{$values.props.mode==="static"}}',
+    children: apiAttr
+  }
+]

resources/admin/components/catchForm/config/commonType.ts

@@ -0,0 +1,70 @@
+type anyObject = { [key: string]: any }
+
+type formValuesType = anyObject
+
+type contextType = {
+  $values: formValuesType
+  $selectData: formValuesType
+  $initialValues: formValuesType
+  [key: string]: any
+}
+
+type changeItemType = {
+  target: string
+  value: any
+}
+
+interface formItemType {
+  label?: string
+  name: string
+  component: string
+  required?: boolean
+  props?: object
+  default?: any
+  help?: string
+  children?: formItemType[]
+  hidden?: boolean | string
+  hideLabel?: boolean
+  rules?: any[]
+  class?: string
+  style?: any
+  change?: changeItemType[]
+  footer: formItemType
+}
+
+type formItemsType = formItemType[]
+
+type schemaType = {
+  labelWidth: number
+  labelAlign: string
+  size: string
+  footer: Object
+  class?: string
+  disabled?: boolean
+  hideRequiredAsterisk?: boolean
+  labelBold?: boolean
+  items: formItemsType
+}
+
+type formElement = {
+  name: string
+  component: any
+  icon: string
+  type: 'assist' | 'layout' | 'basic' | 'high'
+  order: number
+  attr: formItemsType
+  initialValues: formItemType
+  modelName: string
+}
+
+type iconSelectConfigType = { component?: any; propKey?: string; iconList?: string[] }
+
+type $globalType = {
+  http?: any
+  getSchema?: (schemaId: string) => Promise<schemaType>
+  elements?: { [key: string]: formElement }
+  iconSelectConfig?: iconSelectConfigType
+  customElements?: { [key: string]: formElement }
+}
+
+export type { anyObject, schemaType, formValuesType, contextType, formItemType, formItemsType, formElement, changeItemType, $globalType, iconSelectConfigType }

resources/admin/components/catchForm/config/symbol.ts

@@ -0,0 +1,10 @@
+/* eslint-disable symbol-description */
+export const $global = Symbol()
+export const $schema = Symbol()
+export const $formValues = Symbol()
+export const $selectData = Symbol()
+export const $formEvents = Symbol()
+export const $initialValues = Symbol()
+export const $current = Symbol()
+export const $methods = Symbol()
+export const $hoverKey = Symbol()

resources/admin/components/catchForm/directive/index.js

@@ -0,0 +1,2 @@
+export { default as selectLoadMore } from './selectLoadMore'
+export { default as tableLoadMore } from './tableLoadMore'

resources/admin/components/catchForm/directive/selectLoadMore.js

@@ -0,0 +1,23 @@
+import { nextTick } from 'vue'
+
+const loadMore = (app) => {
+  app.directive('selectLoadMore', {
+    mounted: function (el, binding) {
+      nextTick(() => {
+        const dropdown = document.querySelector(`.${binding.arg} .el-select-dropdown__wrap`) // 获取下拉框元素
+
+        if (dropdown) {
+          dropdown.addEventListener('scroll', function () {
+            // 监听元素触底
+            const condition = this.scrollHeight - this.scrollTop - 5 <= this.clientHeight
+            if (condition) {
+              binding.value()
+            }
+          })
+        }
+      })
+    }
+  })
+}
+
+export default loadMore

resources/admin/components/catchForm/directive/tableLoadMore.js

@@ -0,0 +1,20 @@
+import { nextTick } from 'vue'
+
+const loadMore = app => {
+  app.directive('tableLoadMore', {
+    mounted: function (el, binding) {
+      nextTick(() => {
+        const dom = el.querySelector('.el-scrollbar__wrap') // 获取下拉框元素
+        dom.addEventListener('scroll', function () {
+          // 监听元素触底
+          const condition = this.scrollHeight - this.scrollTop - 5 <= this.clientHeight
+          if (condition) {
+            binding.value()
+          }
+        })
+      })
+    }
+  })
+}
+
+export default loadMore

resources/admin/components/catchForm/hooks/useRequest.js

@@ -0,0 +1,49 @@
+import { ref, watch, inject } from 'vue'
+import { isEqual, debounce, throttle } from 'lodash'
+import { getDataByPath } from '/admin/components/catchForm/support'
+
+const useRequest = ({ api, debounceTime, throttleTime }) => {
+  const $request = inject('$request')
+
+  const data = ref([])
+  const loading = ref(false)
+
+  const fetchData = async () => {
+    loading.value = true
+
+    const res = await $request.get(api)
+
+    const resData = getDataByPath(res, api.dataPath)
+
+    data.value = resData
+
+    loading.value = false
+  }
+
+  const debounceRemote = debounce(fetchData, debounceTime)
+  const throttleRemote = throttle(fetchData, throttleTime)
+
+  const run = () => {
+    if (debounceTime) {
+      return debounceRemote()
+    }
+    if (throttleTime) {
+      return throttleRemote()
+    }
+
+    return fetchData()
+  }
+
+  watch(
+    () => api,
+    (newVal, oldVal) => {
+      if (!isEqual(newVal, oldVal)) {
+        run()
+      }
+    }
+  )
+
+  return { data, loading }
+}
+
+export default useRequest

resources/admin/components/catchForm/hooks/useSelect.js

@@ -0,0 +1,151 @@
+import { ref, reactive, computed, watch, onMounted, inject } from 'vue'
+import { isEqual, isPlainObject, debounce } from 'lodash'
+import { getDataByPath } from '/admin/components/catchForm/support'
+import { $selectData, $global } from '/admin/components/catchForm/config/symbol'
+
+const useSelect = (props, emits) => {
+  const selectData = inject($selectData)
+
+  const { request } = inject($global)
+
+  const selectVal = computed({
+    get() {
+      return props.modelValue
+    },
+    set(val) {
+      emits('update:modelValue', val)
+    }
+  })
+
+  const currentOptions = ref([])
+
+  const loading = ref(false)
+
+  const isMax = ref(false)
+
+  const stateParams = reactive({
+    pageNum: 1,
+    pageSize: 10
+    // filters: {},
+  })
+
+  const fetchData = debounce(async () => {
+    if (isMax.value || !props.api) return
+
+    const { url, method, data, dataPath } = props.api
+
+    loading.value = true
+
+    let res = null
+    if (method === 'get') {
+      res = await request.get(url, data)
+    } else {
+      res = await request.post(url, data)
+    }
+
+    const resData = getDataByPath(res, dataPath)
+
+    if (resData.length !== stateParams.pageSize) {
+      isMax.value = true
+    }
+
+    const resDataParse = resData.map(item => {
+      if (isPlainObject(item)) {
+        return item
+      }
+      return { label: item, value: item }
+    })
+
+    currentOptions.value = [...currentOptions.value, ...resDataParse]
+
+    stateParams.pageNum++
+
+    loading.value = false
+  }, 300)
+
+  onMounted(() => {
+    const { mode, options } = props
+    if (mode === 'static') {
+      currentOptions.value = options
+      isMax.value = true
+    }
+    if (mode === 'remote') {
+      fetchData()
+    }
+  })
+
+  watch(
+    () => props.api,
+    (newVal, oldVal) => {
+      // bug：这里发生只api内存地址变化，实际api无变化也会触发监听。暂时使用深层对比解决
+      if (!isEqual(newVal, oldVal)) {
+        currentOptions.value = []
+        isMax.value = false
+        stateParams.pageNum = 1
+        fetchData()
+      }
+    }
+  )
+
+  watch(currentOptions, newVal => {
+    const { autoSelectedFirst, modelValue, valueKey, multiple, sort } = props
+    // 自动选中第一项
+    if (autoSelectedFirst && newVal.length && !modelValue?.length) {
+      const firstValue = multiple ? [newVal[0][valueKey]] : newVal[0][valueKey]
+      emits('update:modelValue', firstValue)
+      selectChange(firstValue)
+    }
+
+    if (sort) {
+      currentOptions.value = currentOptions.value.sort((a, b) => a.value - b.value)
+    }
+  })
+
+  watch(
+    () => props.options,
+    newVal => {
+      if (props.mode === 'static') {
+        currentOptions.value = newVal
+      }
+    }
+  )
+
+  watch(
+    () => props.mode,
+    newVal => {
+      if (newVal === 'static') {
+        currentOptions.value = props.options
+      }
+      if (newVal === 'remote') {
+        currentOptions.value = []
+        fetchData()
+      }
+    }
+  )
+
+  const selectChange = val => {
+    const { valueKey, multiple, name } = props
+
+    let valueData = {}
+
+    if (multiple) {
+      // 多选就过滤出vals对应的源数据
+      valueData = currentOptions.value.filter(item => {
+        return val.includes(item[valueKey])
+      })
+    } else {
+      // 单选找到单项对应的源数据
+      valueData = currentOptions.value.find(item => item[valueKey] === val)
+    }
+
+    // 如果接到了selectData，给顶级组件保存当前值对应得数据源
+    if (selectData) {
+      selectData[name] = valueData
+    }
+    emits('onChangeSelect', selectData)
+  }
+
+  return { selectVal, selectChange, currentOptions, loading, fetchData, isMax }
+}
+
+export default useSelect

resources/admin/components/catchForm/index.ts

@@ -0,0 +1,69 @@
+import type { App } from 'vue'
+import CatchForm from './CatchForm.vue'
+import { $global } from '/admin/components/catchForm/config/symbol'
+import * as Directives from '/admin/components/catchForm/directive'
+
+import type {
+  anyObject,
+  schemaType,
+  formValuesType,
+  contextType,
+  formItemType,
+  formItemsType,
+  formElement,
+  changeItemType,
+  $globalType
+} from '/admin/components/catchForm/config/commonType'
+import components from '/admin/components/catchForm/components'
+
+/**
+ * 合并 custom elements
+ * @param customElements
+ * @returns
+ */
+const handleMergeElements = (customElements: { [key: string]: formElement }) => {
+  const mergeElements: { [key: string]: formElement } = {}
+
+  Object.entries(components).forEach(([key, value]) => {
+    const customData = customElements[key]
+    if (customData) {
+      return (mergeElements[key] = {
+        ...value,
+        component: customData.component,
+        modelName: customData.modelName || 'modelValue',
+        attr: customData.attr || value.attr
+      })
+    }
+
+    return (mergeElements[key] = { ...value, modelName: 'modelValue' })
+  })
+
+  return mergeElements
+}
+
+type $optionsType = {
+  http?: any
+  // elements?: { [key: string]: formElement }
+  // iconSelectConfig?: iconSelectConfigType
+  customElements?: { [key: string]: formElement }
+}
+
+const install = function (app: App<Element>, options: $optionsType = {}) {
+  const { http, customElements = {} } = options
+
+  app.provide($global, {
+    http: http,
+    elements: handleMergeElements(customElements)
+  })
+  // 注册指令
+  Object.values(Directives).forEach(fn => fn(app))
+}
+
+export { CatchForm }
+
+export type { anyObject, schemaType, formValuesType, contextType, formItemType, formItemsType, formElement, changeItemType, $globalType }
+
+export function bootstrapCatchForm(app: App, options:Object = {}) {
+  install(app, options)
+  app.component('CatchForm', CatchForm)
+}

resources/admin/components/catchForm/support/index.ts

@@ -0,0 +1,163 @@
+/* eslint-disable no-new-func */
+import { cloneDeep, isString, isPlainObject, isArray } from 'lodash'
+import type { formValuesType } from '/admin/components/catchForm/config/commonType'
+import type { formItemType, formItemsType } from '/admin/components/catchForm/config/commonType'
+import { isEqual } from 'lodash'
+import type { anyObject, contextType} from '/admin/components/catchForm/config/commonType'
+
+type handleLinkagesType = (obj: { newVal: Object; oldVal: Object; formValues: anyObject; formItems: formItemsType }) => void
+
+// 模板转换函数，将一个由双大括号包裹的字符串，转化为js表达式并返回结果（context限制变量范围）
+const templateParse = (str: string, context: contextType) => {
+    if (!str) return str
+    if (typeof str !== 'string') return str
+
+    const template = str.match(/{{(.+?)}}/)
+    if (template) {
+        try {
+            const parse = new Function(Object.keys(context).join(','), 'return ' + template[1])
+
+            return parse(...Object.values(context))
+        } catch (e) {
+            // console.log(str, '模板转换错误：', e)
+            return str
+        }
+    } else {
+        return str
+    }
+}
+
+const deepParse = (prop: any, context: contextType): any => {
+    const $values = context.$values
+
+    if (isString(prop)) {
+        return templateParse(prop, context)
+    }
+
+    if (isPlainObject(prop)) {
+        return Object.keys(prop).reduce((all, key) => {
+            const itemContext = { ...context }
+
+            if (prop.name && $values) {
+                itemContext.$val = getDataByPath($values, prop.name)
+                itemContext.$select = context.$selectData[prop.name]
+            }
+
+            return { ...all, [key]: deepParse(prop[key], itemContext) }
+        }, {})
+    }
+    if (isArray(prop)) {
+        return prop.map(item => {
+            return deepParse(item, context)
+        })
+    }
+
+    return prop
+}
+
+const handleLinkages: handleLinkagesType = ({ newVal, oldVal, formValues, formItems }) => {
+    for (const item of formItems) {
+        const newValue = getDataByPath(newVal, item.name)
+        const oldValue = getDataByPath(oldVal, item.name)
+
+        if (item.change && !isEqual(newValue, oldValue)) {
+            let temp = cloneDeep(formValues.value)
+            item.change.forEach(({ target, value }) => {
+                temp = setDataByPath(temp, target, value)
+            })
+            formValues.value = temp
+        }
+
+        if (item.children && item.component !== 'FormList') {
+            handleLinkages({
+                newVal,
+                oldVal,
+                formValues,
+                formItems: item.children
+            })
+        }
+    }
+}
+
+const recursionDelete = (items: formItemsType, callback: (item: formItemType) => boolean): formItemsType => {
+    const data = items.filter(callback)
+    return data.map(item => {
+        if (item.children) {
+            return {
+                ...item,
+                children: recursionDelete(item.children, callback)
+            }
+        }
+        return item
+    })
+}
+const setDataByPath = (object: formValuesType, path: string, value: any) => {
+    const cloneObj = cloneDeep(object)
+    // 将路径字符串分割成路径数组
+    const pathArray = path.split('.')
+    // 递归函数，用于在对象的深层级找到要修改的位置并更新其值
+    function update(obj: formValuesType, pathArray: string[], value: any) {
+        // 如果路径数组为空，表示已经到达了最后一级，更新值并返回
+        if (pathArray.length === 1) {
+            obj[pathArray[0]] = value
+            return
+        }
+
+        // 获取当前路径的第一个部分
+        const currentKey = pathArray.shift()
+
+        if (currentKey) {
+            // 如果当前键不存在，则创建一个空对象
+            if (!obj[currentKey]) {
+                obj[currentKey] = {}
+            }
+
+            // 递归调用更新函数
+            update(obj[currentKey], pathArray, value)
+        }
+    }
+
+    // 调用递归函数
+    update(cloneObj, pathArray, value)
+
+    // 返回更新后的对象
+    return cloneObj
+}
+
+const isRegexString = (str: string) => {
+    const regexMetaCharacters = /[.*+?^${}()|[\]\\]/
+
+    return regexMetaCharacters.test(str)
+}
+
+const getRandomId = (length: number) => {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+    let randomId = ''
+
+    for (let i = 0; i < length; i++) {
+        const randomIndex = Math.floor(Math.random() * characters.length)
+        randomId += characters.charAt(randomIndex)
+    }
+
+    return randomId
+}
+
+const getDataByPath = (obj: anyObject, path: string) => {
+    // 使用正则表达式分割路径字符串
+    const keys = path.split('.')
+
+    // 遍历路径，逐层深入对象
+    let result = obj
+    for (const key of keys) {
+        if (result && typeof result === 'object' && key in result) {
+            result = result[key]
+        } else {
+            // 如果路径无效，返回 undefined 或者其他默认值
+            return undefined
+        }
+    }
+
+    return result
+}
+
+export { setDataByPath, recursionDelete, isRegexString, getRandomId, handleLinkages, getDataByPath, deepParse}

resources/admin/components/catchTable/components/ellipsis/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div v-if="notNeedPopover()">
+    {{ content }}
+  </div>
+  <el-popover v-else effect="dark" placement="top-start" :width="300" trigger="hover" :content="content">
+    <template #reference>
+      {{ ellipsis(length) }}
+    </template>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+interface Prop {
+  content?: string
+  length: number
+}
+
+const props = defineProps<Prop>()
+
+// need popover
+const notNeedPopover = () => {
+  const length = props.content ? props.content.length : 0
+  return length <= 20
+}
+
+// 截取
+const ellipsis = (length: number): string => {
+  if (props.content) {
+    return props.content.substring(0, length) + '...'
+  }
+
+  return ''
+}
+</script>

resources/admin/components/catchTable/components/switchColumn/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-switch @change="enabeldField" :active-value="activeValue" :inactive-value="inactiveValue" :model-value="modelValue" :loading="loading" />
+</template>
+
+<script lang="ts" setup>
+import { useEnabled } from '/admin/composables/curd/useEnabled'
+import { Status } from '/admin/enum/app'
+import { ref, inject } from 'vue'
+
+const props = defineProps({
+  api: {
+    required: true,
+    type: String
+  },
+  id: {
+    required: false,
+    type: [String, Number]
+  },
+  field: {
+    require: false,
+    type: String,
+    default: 'status'
+  },
+  refresh: {
+    type: Function,
+    defaulat: null,
+    required: false
+  }
+})
+
+const modelValue = defineModel()
+// @ts-ignore
+const { enabled, success, loading, afterEnabled } = useEnabled()
+
+const activeValue = ref<boolean | number | string>()
+const inactiveValue = ref<boolean | number | string>()
+
+if (typeof modelValue.value === 'boolean') {
+  activeValue.value = true
+  inactiveValue.value = false
+} else {
+  activeValue.value = Status.ENABLE
+  inactiveValue.value = Status.DISABLE
+}
+
+success(() => {
+  modelValue.value = modelValue.value === activeValue.value ? inactiveValue.value : activeValue.value
+})
+
+afterEnabled.value = () => {
+  if (props.refresh) {
+    props.refresh()
+  } else {
+    const refresh = inject('refresh') as Function
+    refresh()
+  }
+}
+
+const enabeldField = () => {
+  enabled(props.api, props.id as string | number, { field: props.field })
+}
+</script>

resources/admin/components/catchTable/csearch.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="grid w-full grid-cols-1 gap-4 pl-2 sm:grid-cols-3 lg:grid-cols-6 place-content-between">
+    <template v-for="(item, k) in fields" :key="k">
+      <div v-if="item.show && (k < 3 || expand)" class="align-items-center justify-items-center">
+        <el-form-item :label="item.label" v-if="item.type === 'input'">
+          <el-input :placeholder="item.placeholder" v-model="query[item.name]" clearable />
+        </el-form-item>
+        <el-form-item :label="item.label" v-if="item.type === 'select'">
+          <Select :api="item.api" :options="item.options" v-model="query[item.name]" :placeholder="item.placeholder" />
+        </el-form-item>
+        <el-form-item :label="item.label" v-if="item.type === 'input-number'">
+          <el-input-number v-model="query[item.name]" :placeholder="item.placeholder" clearable />
+        </el-form-item>
+        <el-form-item :label="item.label" v-if="item.type === 'date'">
+          <el-date-picker type="date" v-model="query[item.name]" :placeholder="item.placeholder" clearable value-format="YYYY-MM-DD" />
+        </el-form-item>
+        <el-form-item :label="item.label" v-if="item.type === 'datetime'">
+          <el-date-picker type="datetime" v-model="query[item.name]" :placeholder="item.placeholder" clearable value-format="YYYY-MM-DD HH:mm:ss" />
+        </el-form-item>
+        <el-form-item :label="item.label" v-if="item.type === 'tree'">
+          <el-tree-select v-model="query[item.name]" value-key="id" :placeholder="item.placeholder" clearable :data="item.options" check-strictly :props="item.props" />
+        </el-form-item>
+        <template v-if="item.type === 'range'">
+          <div class="flex flex-wrap">
+            <el-form-item :label="item.label">
+              <div class="flex flex-wrap gap-x-2">
+                <div v-for="(sitem, key) in item.children" :key="key">
+                  <el-input v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'input'" clearable />
+                  <Select :api="item.api" :options="item.options" v-model="query[item.name]" :placeholder="item.placeholder" clearable v-if="item.type === 'select'" />
+                  <el-input-number v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'input-number'" clearable />
+                  <el-date-picker type="date" v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'date'" clearable value-format="YYYY-MM-DD" />
+                  <el-date-picker type="datetime" v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'datetime'" clearable value-format="YYYY-MM-DD HH:mm:ss" />
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </template>
+      </div>
+    </template>
+    <div class="flex justify-end col-end-0 sm:col-end-5 lg:col-end-8">
+      <el-button type="primary" @click="search"> {{ t('system.search') }} </el-button>
+      <el-button @click="reset"> {{ t('system.reset') }} </el-button>
+      <el-button @click="expandSearch()" v-if="fields.length > 3" text circle>
+        <Icon :name="expand ? 'chevron-up' : 'chevron-down'" className="w-4 h-4" />
+      </el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// @ts-nocheck
+import { reactive, ref } from 'vue'
+import { isBoolean, t } from '/admin/support/helper'
+type itemType = 'input' | 'select' | 'input-number' | 'date' | 'datetime' | 'range'
+interface Option {
+  label: string
+  value: string | number
+}
+interface field {
+  type: itemType
+  label: string
+  name: string
+  api?: string
+  placeholder?: string
+  default?: any
+  options?: Array<Option>
+  children?: Array<field>
+  show?: boolean
+  props?: Object // 树形 props
+}
+
+const props = defineProps({
+  fields: {
+    type: Array<field>,
+    default: () => {
+      return []
+    }
+  }
+})
+
+const emits = defineEmits(['search', 'reset'])
+const query = ref<Object>({})
+const expand = ref<boolean>(false)
+
+const _fields = ref<Array<field>>(props.fields)
+_fields.value = _fields.value?.map(field => {
+  if (!field.placeholder) {
+    field.placeholder = (field.type === 'select' ? '请选择' : '请输入') + field.label
+  }
+  field.show = isBoolean(field.show) ? field.show : true
+  return reactive(field)
+})
+
+const search = () => {
+  emits('search', query.value, true)
+}
+
+const reset = () => {
+  query.value = {}
+  emits('reset')
+}
+const expandSearch = () => {
+  expand.value = !expand.value
+}
+
+defineExpose({ reset })
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  font-size: 14px !important;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 0px !important;
+}
+</style>

resources/admin/components/catchTable/ctable.ts

@@ -0,0 +1,63 @@
+export type columnType = 'expand' | 'selection' | 'index' | 'operate'
+export type fixed = 'fiexed' | 'right' | 'left'
+export interface Column {
+  type?: columnType // 类型 expand select index
+  label?: string
+  prop?: string
+  'min-width'?: string | number
+  width?: number | string
+  slot?: 'string'
+  header: 'string' // 表头插槽名称
+  align?: string
+  fixed?: fixed
+  sortable?: boolean | string
+  'sort-method'?: Function
+  'sort-by'?: Function
+  resizable?: boolean
+  formatter?: Function // function(row, column, cellValue, index)
+  'header-align'?: string
+  'class-name'?: string
+  selectable?: Function // function(row, index)
+  show: boolean
+  index?: number | Function // 如果设置了 type=index，可以通过传递 index 属性来自定义索引
+  children?: Array<Column> // 多级表头
+  filter?:Function,
+  ellipsis?:boolean|number, // 当文字太多时，可以使用省略文字
+  switch?: boolean, // swith 字段状态切换
+  switchRefresh?: Function, // switch refresh 刷新
+  // 图片预览
+  image?: boolean,
+  preview: boolean, // 默认不预览
+  // 标签
+  tags?: boolean|Array<number>,
+  // 链接🔗
+  link?:boolean,
+  link_text?: string,
+  // 操作
+  update?: boolean, // 编辑操作
+  destroy?: boolean // 删除操作
+}
+
+// 分页
+export interface paginate {
+  layout:string,
+  limit: number,
+  page: number,
+  limits: Array<number>,
+  total: number,
+  changePage: Function,
+  changeLimit: Function
+}
+
+// option
+export interface Option {
+  label: string,
+  value: string|number
+}
+// 搜索 item
+export interface SItem {
+  type: string,
+  name: string,
+  default: any,
+  options: Array<Option>
+}

resources/admin/components/catchTable/ctcolumns.tsx

@@ -0,0 +1,48 @@
+import { defineComponent } from 'vue'
+import { ElTableColumn } from 'element-plus'
+import { Column } from './ctable'
+
+export default defineComponent({
+  name: 'DynamicTable',
+  props: {
+    columns: {
+      type: Array<Column>,
+      default: []
+    },
+    api: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, { slots }) {
+    const renderColumns = (columns: Array<Column>) => {
+      return columns.map(column => {
+        if (column.children) {
+          return (
+            <ElTableColumn label="{column.label}" key="{column.label}">
+              {renderColumns(column.children)}
+            </ElTableColumn>
+          )
+        } else {
+          return (
+            <ElTableColumn label="{column.label}" prop="{column.prop}" key="{column.prop}">
+              {{
+                default: (row: any) => {
+                  // 使用默认插槽
+                  return row[column.prop as string]
+                },
+                customSlot: (row: any) => {
+                  // 使用具名插槽 customSlot
+                  return slots.customSlot ? slots.customSlot({ column, row }) : null
+                }
+              }}
+            </ElTableColumn>
+          )
+        }
+      })
+    }
+
+    return renderColumns(props.columns)
+    // return () => <ElTable data="{props.data}">{renderColumns(props.columns)}</ElTable>
+  }
+})

resources/admin/components/catchTable/index.vue

@@ -0,0 +1,475 @@
+<!--
+ - 数据表格
+ - 二次封装 ElementPlus 表格
+ - author JaguarJack
+ - 仅限 pro 试用
+-->
+<template>
+  <div>
+    <div v-if="searchFields.length > 0 && showSearch" class="flex flex-wrap gap-5 pt-5 pb-5 pl-5 pr-5 bg-white dark:bg-regal-dark">
+      <csearch :fields="searchFields" @search="doSearch" @reset="reset" ref="csearchRef" />
+      <slot name="csearch" />
+    </div>
+    <div class="pb-5 pl-5 pr-5 mt-3 bg-white dark:bg-regal-dark" :style="{ height: height }" ref="catch-table">
+      <!-- 表格头部 -->
+      <div class="h-16 pt-5">
+        <!-- 多选 -->
+        <div v-if="multiSelectIds.length > 0" class="flex justify-between">
+          <div class="flex pt-2 text-sm text-slate-400"><Icon name="check" class="mr-2" /> 已选 {{ multiSelectIds.length }} 条数据</div>
+          <div class="flex gap-2">
+            <!--批量操作的插槽-->
+            <slot name="multiOperate" />
+            <el-button @click="destroy(props.api, multiSelectIds.join(','))" type="danger" plain size="small"> <Icon name="trash" className="w-4 h-4 mr-1" />删除 </el-button>
+          </div>
+        </div>
+        <!-- 正常头部 -->
+        <div class="flex flex-row justify-between" v-else>
+          <div>
+            <Add @click="openDialog" v-if="operation" />
+            <el-button @click="download(exportUrl ? exportUrl : api)" v-if="exports">导出</el-button>
+            <!-- 头部插槽 -->
+            <slot name="operation" />
+          </div>
+          <!---表头 tools-->
+          <div class="flex flex-row justify-end w-1/3 tools" v-if="showTools">
+            <!-- 刷新 如果没有搜索，则使用默认的重置，有，就通过 ref 调用搜索的重置 -->
+            <el-button text circle @click="csearchRef ? csearchRef.reset() : reset()">
+              <el-icon><RefreshRight /></el-icon>
+            </el-button>
+            <!-- 密度 -->
+            <el-button text circle>
+              <el-dropdown size="small" @command="setTableSize">
+                <el-icon><More /></el-icon>
+                <template #dropdown>
+                  <el-dropdown-menu class="w-20 mt-2">
+                    <el-dropdown-item command="large" v-if="tableSize === 'large'">宽松</el-dropdown-item>
+                    <el-dropdown-item command="large" v-else>宽松</el-dropdown-item>
+                    <el-dropdown-item command="default" divided>默认</el-dropdown-item>
+                    <el-dropdown-item command="small" divided>紧凑</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </el-button>
+            <!-- 栏目 -->
+            <el-button text circle>
+              <el-popover placement="bottom" :width="100" trigger="hover" title="列设置">
+                <template #reference>
+                  <Icon name="squares-plus" className="w-4 h-4" />
+                </template>
+                <template #default>
+                  <div v-for="column in tableColumns" :key="column.prop">
+                    <el-checkbox v-model="column.show" v-if="!column.type || column.type === 'operate'">
+                      {{ column.label }}
+                    </el-checkbox>
+                  </div>
+                </template>
+              </el-popover>
+            </el-button>
+            <el-button @click="showSearch = !showSearch" text circle>
+              <Icon name="magnifying-glass" className="w-4 h-4" />
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <div class="mt-3" :style="{ height: 'auto' }">
+        <el-table
+          v-loading="loading"
+          v-bind="$attrs"
+          :data="tableData"
+          :row-key="rowKey"
+          ref="catchtable"
+          :height="height"
+          :size="tableSize"
+          :border="border"
+          :empty-text="emptyText"
+          :summary-method="summaryMethod"
+          :default-sort="sort"
+          @sort-change="customSortChange"
+          @filter-change="filterChange"
+          @selection-change="multiSelect"
+          class="catchtable"
+        >
+          <!-- 无数据展示 -->
+          <template #empty>
+            <div>{{ emptyText }}</div>
+          </template>
+          <!-- column 展示 -->
+          <template v-for="(column, index) in tableColumns" :key="index">
+            <!--- selection | expand -->
+            <el-table-column
+              v-if="column.show && (column.type === 'selection' || column.type === 'expand')"
+              :type="column.type"
+              :prop="column.prop"
+              :aligh="column.align"
+              :label="column.label"
+              :width="column.width"
+              :min-width="column['min-width']"
+              :align="column.align"
+              :fixed="column.fixed"
+            />
+            <!--- type === index -->
+            <el-table-column
+              v-if="column.show && column.type === 'index'"
+              :type="column.type"
+              :prop="column.prop"
+              :aligh="column.align"
+              :label="column.label"
+              :width="column.width"
+              :min-width="column['min-width']"
+              :align="column.align"
+              :index="index"
+              :fixed="column.fixed"
+            />
+            <!--- type === operate -->
+            <el-table-column
+              v-if="column.show && column.type === 'operate'"
+              :aligh="column.align"
+              :label="column.label"
+              :width="column.width"
+              :min-width="column['min-width']"
+              :align="column.align"
+              :fixed="column.fixed"
+            >
+              <template #default="scope">
+                <slot name="_operate" v-bind="scope" />
+                <Update v-if="column.update" @click="openDialog(scope.row)" />
+                <Destroy v-if="column.destroy" @click="destroy(api as string, scope.row[primaryName])" />
+                <slot name="operate" v-bind="scope" />
+              </template>
+            </el-table-column>
+            <!--- 多级表头 || normal -->
+            <tcolumns :column="column" v-if="column.show && !column.type" :api="api" @refresh="doSearch()">
+              <template v-for="slot in Object.keys($slots)" #[slot]="scope: Record<string, any>">
+                <slot :name="slot" v-bind="scope" />
+              </template>
+            </tcolumns>
+          </template>
+        </el-table>
+      </div>
+      <!--- 分页 -->
+      <div v-if="showPaginate()">
+        <el-pagination
+          background
+          :layout="layout"
+          :current-page="page"
+          :page-size="limit"
+          @current-change="changePage"
+          @size-change="changeLimit"
+          :total="+total"
+          :page-sizes="limits"
+          class="flex justify-end mt-5"
+        />
+      </div>
+      <Dialog v-model="visible" :title="title" destroy-on-close :width="dialogWidth" :height="dialogHeight">
+        <slot name="dialog" v-bind="row" />
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, computed, onMounted, provide } from 'vue'
+import tcolumns from './tcolumns.vue'
+// import ctcolumns from './ctcolumns'
+import { Column, SItem } from './ctable'
+import csearch from './csearch.vue'
+import { isBoolean } from '/admin/support/helper'
+import useSearch from './useSearch'
+import { useDestroy } from '/admin/composables/curd/useDestroy'
+import { More, RefreshRight } from '@element-plus/icons-vue'
+import { useExcelDownload } from '/admin/composables/curd/useExcelDownload'
+
+// define props
+const props = defineProps({
+  // 请求接口
+  api: {
+    type: String,
+    default: null
+  },
+  // 高度
+  height: {
+    type: [String, Number],
+    default: () => {
+      return 'auto'
+    }
+  },
+  border: {
+    type: Boolean,
+    default: true
+  },
+  // table 的尺寸 'large', 'default', 'small'
+  size: {
+    type: String,
+    default: 'default'
+  },
+  // 行数据的 Key，用来优化 Table 的渲染
+  rowKey: {
+    type: [String, Function],
+    default: ''
+  },
+  // 空数据显示文本
+  emptyText: {
+    type: String,
+    default: () => {
+      return '暂无数据'
+    }
+  },
+  // 自定义的合计计算方法 function({ columns, data })
+  summaryMethod: {
+    type: Function,
+    default: () => {
+      return null
+    }
+  },
+  // 合并行或列的计算方法 function({ row, column, rowIndex, columnIndex })
+  spanMethod: {
+    type: Function,
+    default: () => {
+      return null
+    }
+  },
+
+  // 分页设置
+  pagination: {
+    type: Boolean,
+    default: true
+  },
+  // 每页显示数量
+  limit: {
+    type: Number,
+    default: 10
+  },
+  // 页码
+  page: {
+    type: Number,
+    default: 1
+  },
+  // 显示数量集合
+  limits: {
+    type: Array,
+    default: () => {
+      return [10, 20, 30, 40, 50]
+    }
+  },
+  layout: {
+    type: String,
+    default: () => {
+      return 'total,sizes,prev, pager,next'
+    }
+  },
+  // 表格列设置
+  columns: {
+    type: Array<Column>,
+    default: () => {
+      return []
+    }
+  },
+  // 排序
+  sort: {
+    type: Object,
+    default: () => {
+      return { order: '' }
+    }
+  },
+  // 排序事件
+  sortChange: {
+    type: Function,
+    defaualt: null
+  },
+  // 筛选事件
+  filterChange: {
+    type: Function,
+    defaualt: null
+  },
+  searchForm: {
+    type: Array<SItem>,
+    default: () => {
+      return []
+    }
+  },
+  operation: {
+    type: Boolean,
+    default: true
+  },
+  showTools: {
+    type: Boolean,
+    default: true
+  },
+  primaryName: {
+    type: String,
+    default: 'id'
+  },
+  // 默认参数
+  defaultParams: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  // 删除确认提示语
+  destroyConfirm: {
+    type: String,
+    default: '确定删除吗'
+  },
+  // 权限标识
+  permissionMark: {
+    type: String,
+    default: ''
+  },
+  dialogWidth: {
+    type: String,
+    default: ''
+  },
+  dialogHeight: {
+    type: String,
+    default: ''
+  },
+  exports: {
+    type: Boolean,
+    default: false
+  },
+  exportUrl: {
+    type: String,
+    default: ''
+  },
+  searchable: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 显示分页
+const showPaginate = () => {
+  if (props.rowKey) {
+    return false
+  }
+
+  return props.pagination
+}
+
+// 获取默认参数
+const getDefulatParams = () => {
+  return props.defaultParams
+}
+
+const row = ref()
+// search 对象
+const csearchRef = ref()
+// 搜索
+const searchFields = ref<Array<any>>(props.searchForm)
+// eslint-disable-next-line vue/no-dupe-keys
+const { limit, page, total, changeLimit, searchParams, changePage, doSearch, reset, loading, data, getTableData } = useSearch(props.api, showPaginate(), props.limit, props.page, getDefulatParams())
+// 多选 ID
+const multiSelectIds = ref<Array<string | number>>([])
+// 获取 table data
+const tableData = computed(() => data.value?.data)
+// 表格 columns
+const tableColumns = ref<Array<Column>>([])
+// 初始化 columns
+const initColumns = () => {
+  props.columns.forEach(c => {
+    // 默认显示
+    c.show = isBoolean(c.show) ? c.show : true
+    // 更新操作和删除操作
+    if (c.type === 'operate') {
+      c.update = isBoolean(c.update) ? c.update : true
+      c.destroy = isBoolean(c.destroy) ? c.destroy : true
+    }
+
+    tableColumns.value.push(reactive(c))
+  })
+}
+
+// excel 导出
+const { download } = useExcelDownload()
+// 排序
+const customSortChange = (column: any, prop: string, order: string) => {
+  if (props.sortChange) {
+    return props.sortChange(column, prop, order)
+  } else {
+    // 排序
+    let sort = 'desc'
+    if (column.order === 'ascending') {
+      sort = 'asc'
+    }
+    searchParams.value = Object.assign(searchParams.value, { sortField: column.prop, order: sort })
+    // 排序之后重新请求
+    getTableData()
+  }
+}
+
+// dialog
+const visible = ref<boolean>(false)
+const title = ref<string>()
+const openDialog = (v = null, dialogTitle: string = '') => {
+  row.value = v
+
+  visible.value = true
+  // @ts-ignore
+  title.value = dialogTitle || (v?.id ? '更新' : '创建')
+}
+const closeDialog = () => {
+  visible.value = false
+  reset()
+}
+// 批量选择
+const multiSelect = (rows: Array<any>) => {
+  multiSelectIds.value = []
+  rows.forEach(item => {
+    multiSelectIds.value.push(item.id)
+  })
+}
+// 获取批量选择的 IDs
+const getMultiSelectIds = () => {
+  return multiSelectIds.value
+}
+
+const tableSize = ref<string>(props.size)
+// 设置 table 的size
+const setTableSize = (command: string | number | object) => {
+  tableSize.value = command as string
+}
+const showSearch = ref<boolean>(props.searchable)
+
+// 删除
+const { destroy, deleted } = useDestroy(props.destroyConfirm)
+// onMounted
+onMounted(() => {
+  deleted(reset)
+})
+
+// 页面初始化
+initColumns()
+getTableData()
+
+// 暴露外部的 delete
+const del = (api: string, id: any) => {
+  destroy(api, id)
+  reset()
+}
+
+// 设置默认搜索参数
+const setDefaultParams = (params: Object) => {
+  searchParams.value = Object.assign(searchParams.value, params)
+  searchParams.value = Object.assign(searchParams.value, getDefulatParams())
+}
+
+// 曝露方法
+defineExpose({ doSearch, openDialog, del, closeDialog, reset, setDefaultParams, getMultiSelectIds })
+// 注入
+provide('closeDialog', () => {
+  closeDialog()
+})
+provide('refresh', () => {
+  doSearch()
+})
+</script>
+<style scoped scss>
+:deep(.tools .el-button) {
+  background-color: var(--el-fill-color-light) !important;
+}
+
+:deep(.catchtable .el-table__header .el-table__cell) {
+  background: var(--catch-table-header-bg-color) !important;
+}
+</style>

resources/admin/components/catchTable/tcolumns.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-table-column :label="column.label" v-if="column.children">
+    <tcolumns :column="child" v-for="(child, k) in column.children" :key="k" :api="api">
+      <template v-for="slot in Object.keys($slots)" #[slot]="scope: Record<string, any>">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+    </tcolumns>
+  </el-table-column>
+  <el-table-column
+    :type="column.type"
+    :prop="column.prop"
+    :aligh="column.align"
+    :label="column.label"
+    :width="column.width"
+    :min-width="column['min-width']"
+    :align="column.align"
+    :sortable="column.sortable"
+    :formatter="column.formatter"
+    v-else
+  >
+    <!-- 自定义 column header 插槽 -->
+    <template #header v-if="column.header">
+      {{ column.width }}
+      <slot :name="column.header" />
+    </template>
+    <!-- 插槽内容 -->
+    <template #default="scope">
+      <!-- 自定义 -->
+      <slot :name="column.slot" v-bind="scope" v-if="column.slot" />
+      <!-- default -->
+      <slot :name="column.prop" v-bind="scope" v-if="column.prop && !column.slot">
+        <!-- 长字段省略号显示 -->
+        <span v-if="column.ellipsis">
+          <Ellipsis :content="scope.row[column.prop]" :length="isBoolean(column.ellipsis) ? 20 : (column.ellipsis as number)" />
+        </span>
+        <!-- switch 字段切换-->
+        <span v-else-if="column.switch && column.prop">
+          <SwitchColumn :field="column.prop" :api="api" :id="scope.row.id" v-model="scope.row[column.prop]" :refresh="column.switchRefresh || refresh" />
+        </span>
+        <!-- 图片预览 -->
+        <span v-else-if="column.image && column.prop">
+          <div v-if="scope.row[column.prop]">
+            <el-image
+              width="100"
+              class="preview_img"
+              :src="getImage(column.filter ? column.filter(scope.row[column.prop]) : scope.row[column.prop])"
+              :z-index="10000"
+              style="width: 50px; height: 50px"
+              v-if="!column.preview"
+            >
+              <template #error>
+                <div class="image-slot">
+                  <el-icon><icon-picture /></el-icon>
+                </div>
+              </template>
+            </el-image>
+            <el-image
+              class="cursor-pointer preview_img"
+              :src="getImage(column.filter ? column.filter(scope.row[column.prop]) : scope.row[column.prop])"
+              :z-index="10000"
+              :initial-index="0"
+              style="width: 50px; height: 50px"
+              :preview-teleported="true"
+              :preview-src-list="column.filter ? column.filter(scope.row[column.prop]) : scope.row[column.prop]"
+              v-else
+            >
+              <template #error>
+                <div class="image-slot">
+                  <el-icon><icon-picture /></el-icon>
+                </div>
+              </template>
+            </el-image>
+          </div>
+        </span>
+        <!-- 链接 -->
+        <span v-else-if="column.link && column.prop">
+          <a :href="column.filter ? column.filter(scope.row[column.prop]) : scope.row[column.prop]" target="_blank">
+            <el-tag>{{ column.link_text ? column.link_text : '链接' }}</el-tag>
+          </a>
+        </span>
+        <!-- 标签 -->
+        <span v-else-if="column.tags && column.prop">
+          <el-tag :type="getTagsType(column.tags, scope.row[column.prop])">{{ column.filter ? column.filter(scope.row[column.prop]) : scope.row[column.prop] }}</el-tag>
+        </span>
+        <!-- 普通字段 -->
+        <span v-else>
+          {{ column.filter ? column.filter(scope.row[column.prop]) : scope.row[column.prop] }}
+        </span>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+<script lang="ts" setup>
+import { isBoolean, isUndefined } from '/admin/support/helper'
+import { Column } from './ctable'
+import Ellipsis from './components/ellipsis/index.vue'
+import SwitchColumn from './components/switchColumn/index.vue'
+import { Picture as IconPicture } from '@element-plus/icons-vue'
+
+interface Props {
+  column: Column
+  api: string
+}
+
+defineProps<Props>()
+
+const getImage = (src: string | Array<string>) => {
+  if (isUndefined(src) || src === null) {
+    return null
+  }
+
+  if (typeof src === 'string') {
+    return src
+  }
+  return src[0]
+}
+
+const getTagsType = (tags: Array<number> | boolean, value: number) => {
+  if (typeof tags === 'boolean') {
+    return 'primary'
+  }
+  if (value) {
+    const res = tags[value - 1]
+
+    return res || 'primary'
+  }
+
+  return 'primary'
+}
+
+// switch 重新请求刷新页面
+const emits = defineEmits(['refresh'])
+const refresh = () => {
+  emits('refresh')
+}
+</script>
+<style scoped lang="scss">
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+.image-slot .el-icon {
+  font-size: 30px;
+}
+</style>

resources/admin/components/catchTable/types.ts

@@ -0,0 +1,19 @@
+export type itemType = 'input' | 'select' | 'input-number' | 'date' | 'datetime' | 'range'
+
+export interface Option {
+  label: string
+  value: string | number
+}
+
+export interface Field {
+  type: itemType
+  label: string
+  name: string
+  api?: string
+  placeholder?: string
+  default?: any
+  options?: Array<Option>
+  children?: Array<Field>
+  show?: boolean
+  props?: Object // 树形 props
+}

resources/admin/components/catchTable/useSearch.ts

@@ -0,0 +1,93 @@
+import { ref } from 'vue'
+import http from '/admin/support/http'
+
+interface response {
+  code: number
+  data: Array<Object> | Object
+  message: string
+  total?: number
+  page?: number
+  limit?: number
+}
+
+export default function useSearch(api: string | Function, isPagination: boolean, pageLimit: number, currentPage: number, defaultParams: Object = {}) {
+  // 默认设置分页参数
+  const limit = ref<number>(pageLimit)
+  const page = ref<number>(currentPage)
+  const total = ref<number>(0)
+  const loading = ref<boolean>(false)
+  // 搜索参数
+  const searchParams = ref<Object>({})
+  const data = ref<response>()
+
+  if (isPagination) {
+    searchParams.value = Object.assign(searchParams.value, { page: currentPage, limit: pageLimit })
+  }
+
+  // 分页切换
+  const changePage = (p: number) => {
+    page.value = p
+    setPaginateParams(p)
+  }
+
+  // limit 切换
+  const changeLimit = (l: number) => {
+    limit.value = l
+    page.value = 1
+    setPaginateParams(0, l)
+  }
+
+  // 设置分页查询参数
+  const setPaginateParams = (page: number = 0, limit: number = 0) => {
+    if (page) {
+      // @ts-ignore
+      searchParams.value.page = page
+    }
+    if (limit) {
+      // @ts-ignore
+      searchParams.value.limit = limit
+    }
+
+    getTableData()
+  }
+
+  // 执行 search
+  const doSearch = (params: Object | null = null, append: boolean = true) => {
+    if (params && !append) {
+      searchParams.value = params
+    } else {
+      searchParams.value = Object.assign(searchParams.value, params)
+    }
+    getTableData()
+  }
+
+  // 重置 || 刷新
+  const reset = () => {
+    searchParams.value = Object.assign({})
+    if (isPagination) {
+      // 这里会调用 getTableData 方法
+      setPaginateParams(currentPage, pageLimit)
+    } else {
+      getTableData()
+    }
+  }
+
+  const getTableData = () => {
+    loading.value = true
+    setDefaultParams()
+    http.get(api as string, searchParams.value).then(r => {
+      loading.value = false
+      data.value = r.data
+      if (isPagination) {
+        total.value = r.data.total
+      }
+    })
+  }
+
+  // 设置搜索默认参数
+  const setDefaultParams = () => {
+    searchParams.value = Object.assign(searchParams.value, defaultParams)
+  }
+
+  return { limit, page, total, changeLimit, setPaginateParams, searchParams, changePage, doSearch, reset, loading, data, getTableData }
+}

resources/admin/composables/upload.ts

@@ -0,0 +1,85 @@
+import { ref } from 'vue'
+import { getFileExt, getFilename } from '/admin/support/helper'
+import { Code } from '/admin/enum/app'
+import Message from '/admin/support/message'
+import { genFileId } from 'element-plus'
+import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
+
+// 上传文件
+export function uploadFile(action: string, ext: Array<String>, isValidate: boolean = true) {
+  const upload = ref<UploadInstance>()
+
+  const file = ref<string>('')
+  const filename = ref<string>('')
+  const fileExtensions = ext.join('|')
+
+  // 上传前的钩子 判断文件类型
+  const beforeUpload = (file: UploadRawFile) => {
+    if (isValidate) {
+        const isCanUpload = ext.indexOf(getFileExt(file.name).substring(1)) > -1
+      if (!isCanUpload) {
+        Message.error('不符合上传文件类型，仅支持' + fileExtensions)
+      }
+      return isCanUpload
+    } else {
+      return true
+    }
+  }
+
+  const handleExceed: UploadProps['onExceed'] = files => {
+    upload.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    upload.value!.handleStart(file)
+    upload.value!.submit()
+  }
+
+  const handleSuccess = (response: any, uploadFile: any) => {
+    if (response.code === Code.SUCCESS) {
+      file.value = response.data.path
+      filename.value = getFilename(file.value)
+    } else {
+      Message.error(response.message)
+    }
+  }
+
+  return { upload, beforeUpload, handleExceed, handleSuccess, file, filename, fileExtensions }
+}
+
+// 上传图片
+// 上传文件
+export function uploadImage(action: string, extensions: Array<String>) {
+  const upload = ref<UploadInstance>()
+
+  const file = ref<string>('')
+  const filename = ref<string>('')
+  const fileExtensions = extensions
+
+  // 上传前的钩子 判断文件类型
+  const beforeUpload = (file: UploadRawFile) => {
+    const isCanUpload = fileExtensions.indexOf(getFileExt(file.name).substring(1)) > -1
+    if (!isCanUpload) {
+      Message.error('不符合上传文件类型，仅支持' + fileExtensions)
+    }
+    return isCanUpload
+  }
+
+  const handleExceed: UploadProps['onExceed'] = files => {
+    upload.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    upload.value!.handleStart(file)
+    upload.value!.submit()
+  }
+
+  const handleSuccess = (response: any, uploadFile: any) => {
+    if (response.code === Code.SUCCESS) {
+      file.value = response.data.path
+      filename.value = getFilename(file.value)
+    } else {
+      Message.error(response.message)
+    }
+  }
+
+  return { upload, beforeUpload, handleExceed, handleSuccess, file, filename, fileExtensions }
+}

resources/admin/i18n/languages/en.ts

@@ -14,6 +14,8 @@ const en = {
     finish: 'Finish',
     back: 'Back',
     update: 'Update',
+    search: 'Search',
+    reset: 'Reset'
   },
 
   login: {