test: create fc demo

package.json

@@ -46,7 +46,8 @@
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
     "@ant-design/icons-vue": "^7.0.1",
-    "@form-create/ant-design-vue": "3",
+    "@form-create/ant-design-vue": "^3.2.18",
+    "@form-create/vant": "^3",
     "@iconify/iconify": "^3.1.1",
     "@videojs-player/vue": "^1.0.0",
     "@vue/runtime-core": "^3.3.8",
@@ -71,6 +72,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "sortablejs": "^1.15.0",
     "tinymce": "5.10.7",
+    "vant": "^4.9.17",
     "vditor": "^3.9.6",
     "video.js": "^7.21.5",
     "vue": "^3.3.8",

pnpm-lock.yaml

@@ -15,7 +15,10 @@ importers:
         specifier: ^7.0.1
         version: 7.0.1(vue@3.3.8(typescript@5.2.2))
       '@form-create/ant-design-vue':
-        specifier: '3'
+        specifier: ^3.2.18
+        version: 3.2.18(vue@3.3.8(typescript@5.2.2))
+      '@form-create/vant':
+        specifier: ^3
         version: 3.2.18(vue@3.3.8(typescript@5.2.2))
       '@iconify/iconify':
         specifier: ^3.1.1
@@ -89,6 +92,9 @@ importers:
       tinymce:
         specifier: 5.10.7
         version: 5.10.7
+      vant:
+        specifier: ^4.9.17
+        version: 4.9.17(vue@3.3.8(typescript@5.2.2))
       vditor:
         specifier: ^3.9.6
         version: 3.9.6
@@ -1195,6 +1201,11 @@ packages:
   '@form-create/utils@3.2.18':
     resolution: {integrity: sha512-C98bFPdFVMltiHQvEZqv4rVdhcqthJgvxMbWDlniL03HS5oyusnUvxUE8jf0I9zk5dZRDGmxKOUtzE3JDWP9nQ==}
 
+  '@form-create/vant@3.2.18':
+    resolution: {integrity: sha512-fV2ej/ydUF86IfUw5a3JwLOEVXdg3eoDPLCIII6XTRzKDYUBG+Gt6ni9ukmqeoMhJIXRF/aIoecVV6mkTgJsUQ==}
+    peerDependencies:
+      vue: ^3.1.0
+
   '@humanwhocodes/config-array@0.11.13':
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -1741,6 +1752,14 @@ packages:
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
 
+  '@vant/popperjs@1.3.0':
+    resolution: {integrity: sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==}
+
+  '@vant/use@1.6.0':
+    resolution: {integrity: sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==}
+    peerDependencies:
+      vue: ^3.0.0
+
   '@videojs-player/vue@1.0.0':
     resolution: {integrity: sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg==}
     peerDependencies:
@@ -1844,6 +1863,9 @@ packages:
   '@vue/shared@3.3.8':
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
 
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+
   '@vueuse/core@10.6.1':
     resolution: {integrity: sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==}
 
@@ -2447,6 +2469,9 @@ packages:
   dayjs@1.11.10:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -5164,6 +5189,11 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
+  vant@4.9.17:
+    resolution: {integrity: sha512-so/plH9G4au9rUrqy7yLB1slmZqY2Ub3Gq8ckMSQXbUEwTzmViVjEDqh/hNck/XELxwL+gIy2hLXiSgVcf2EBQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -6537,6 +6567,14 @@ snapshots:
 
   '@form-create/utils@3.2.18': {}
 
+  '@form-create/vant@3.2.18(vue@3.3.8(typescript@5.2.2))':
+    dependencies:
+      '@form-create/component-subform': 3.1.34
+      '@form-create/core': 3.2.18(vue@3.3.8(typescript@5.2.2))
+      '@form-create/utils': 3.2.18
+      dayjs: 1.11.13
+      vue: 3.3.8(typescript@5.2.2)
+
   '@humanwhocodes/config-array@0.11.13':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.1
@@ -7244,6 +7282,12 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  '@vant/popperjs@1.3.0': {}
+
+  '@vant/use@1.6.0(vue@3.3.8(typescript@5.2.2))':
+    dependencies:
+      vue: 3.3.8(typescript@5.2.2)
+
   '@videojs-player/vue@1.0.0(@types/video.js@7.3.55)(video.js@7.21.5)(vue@3.3.8(typescript@5.2.2))':
     dependencies:
       '@types/video.js': 7.3.55
@@ -7366,7 +7410,7 @@ snapshots:
       '@volar/language-core': 1.10.5
       '@volar/source-map': 1.10.5
       '@vue/compiler-dom': 3.3.7
-      '@vue/shared': 3.3.7
+      '@vue/shared': 3.3.8
       computeds: 0.0.1
       minimatch: 9.0.3
       muggle-string: 0.3.1
@@ -7407,6 +7451,8 @@ snapshots:
 
   '@vue/shared@3.3.8': {}
 
+  '@vue/shared@3.5.13': {}
+
   '@vueuse/core@10.6.1(vue@3.3.8(typescript@5.2.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -8028,6 +8074,8 @@ snapshots:
 
   dayjs@1.11.10: {}
 
+  dayjs@1.11.13: {}
+
   de-indent@1.0.2: {}
 
   debug@2.6.9:
@@ -10963,6 +11011,13 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
+  vant@4.9.17(vue@3.3.8(typescript@5.2.2)):
+    dependencies:
+      '@vant/popperjs': 1.3.0
+      '@vant/use': 1.6.0(vue@3.3.8(typescript@5.2.2))
+      '@vue/shared': 3.5.13
+      vue: 3.3.8(typescript@5.2.2)
+
   vary@1.1.2: {}
 
   vditor@3.9.6:

src/main.ts

@@ -1,10 +1,14 @@
 import 'uno.css'
 import 'ant-design-vue/dist/reset.css'
 import './design/index.less'
+import 'vant/lib/index.css'
 
 // Register icon sprite
 import 'virtual:svg-icons-register'
 import { createApp } from 'vue'
+import Antd from 'ant-design-vue'
+import vant from 'vant'
+import FcDesigner from '../lib/fcDesignerPro/dist/index.es'
 import App from './App.vue'
 import { initAppConfigStore } from '@/logics/initAppConfig'
 import { setupErrorHandle } from '@/logics/error-handle'
@@ -57,6 +61,14 @@ async function bootstrap() {
   // https://next.router.vuejs.org/api/#isready
   // await router.isReady();
 
+  // 挂载 Ant Design Vue
+  app.use(Antd)
+  // 挂载 Vant
+  app.use(vant)
+  // 挂载 fcDesignerPro 组件
+  app.use(FcDesigner)
+  // 挂载 formCreate
+  app.use(FcDesigner.formCreate)
   app.mount('#app')
 }
 

src/store/modules/fc.ts

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+
+interface CreateFormObject {
+  rule: any
+  options: any
+}
+
+export const useFormCreateStore = defineStore('app-fc', {
+  state: (): CreateFormObject => ({
+    rule: [],
+    options: {},
+  }),
+  getters: {
+    getInfo(state) {
+      return state
+    },
+  },
+  actions: {
+    setInfo(object: CreateFormObject) {
+      this.rule = object.rule
+      this.options = object.options
+    },
+  },
+
+})

src/views/fc/designer/index.vue

@@ -1,32 +1,26 @@
 <script setup lang="ts">
-import formCreate from '@form-create/ant-design-vue'
-
 import { ref } from 'vue'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useFormCreateStore } from '@/store/modules/fc'
 
-const formData = ref({})
+const designer = ref()
-const formApi = ref(null)
 
-const formRules = ref([
+const fcStore = useFormCreateStore()
-  {
+
-    type: 'input',
+function onSave(e: any) {
-    field: 'username',
+  const { createMessage } = useMessage()
-    title: '用户名',
+  createMessage.success()
-    value: '',
+
-  },
+  fcStore.setInfo(e)
-  {
+}
-    type: 'input',
+
-    field: 'password',
+const config = ref({
-    props: {
+  showSaveBtn: true,
-      type: 'password',
+})
-    },
-    title: '密码',
-    value: '',
-  },
-])
 </script>
 
 <template>
-  <div id="app">
+  <div>
-    <form-create v-model="formData" v-model:api="formApi" :rule="formRules" />
+    <fc-designer ref="designer" height="100vh" :config="config" @save="onSave" />
   </div>
 </template>

src/views/fc/resolver/index.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import formCreate from '@form-create/ant-design-vue'
+
+import { ref } from 'vue'
+
+// import { useFormCreateStore } from '@/store/modules/fc'
+
+const formData = ref({})
+const formApi = ref(null)
+
+// const fcStore = useFormCreateStore()
+
+const formRules = ref([
+  {
+    type: 'input',
+    field: 'F1pom74ios1tacc',
+    title: '输入框',
+    $required: false,
+    _fc_id: 'id_F3pvm74ios1tadc',
+    name: 'ref_F5t6m74ios1taec',
+    display: true,
+    hidden: false,
+    _fc_drag_tag: 'input',
+  },
+  {
+    type: 'input',
+    field: 'F4mzm74iossdafc',
+    title: '多行输入框',
+    $required: false,
+    props: {
+      type: 'textarea',
+    },
+    _fc_id: 'id_F8w8m74iossdagc',
+    name: 'ref_Fvgmm74iossdahc',
+    display: true,
+    hidden: false,
+    _fc_drag_tag: 'textarea',
+  },
+  {
+    type: 'aMentions',
+    modelField: 'value',
+    field: 'Fytam74iot6saic',
+    title: '提及',
+    $required: false,
+    props: {
+      options: [
+        {
+          label: 'Fuphoenixes',
+          value: 'Fuphoenixes',
+        },
+        {
+          label: 'kooriookami',
+          value: 'kooriookami',
+        },
+        {
+          label: 'Jeremy',
+          value: 'Jeremy',
+        },
+        {
+          label: 'btea',
+          value: 'btea',
+        },
+      ],
+    },
+    _fc_id: 'id_F09cm74iot6sajc',
+    name: 'ref_Fu38m74iot6sakc',
+    display: true,
+    hidden: false,
+    _fc_drag_tag: 'aMentions',
+  },
+  {
+    type: 'input',
+    field: 'Fzd0m74iotg9alc',
+    title: '输入框',
+    $required: false,
+    _fc_id: 'id_Fb8vm74iotg9amc',
+    name: 'ref_Fl6om74iotg9anc',
+    display: true,
+    hidden: false,
+    _fc_drag_tag: 'input',
+  },
+])
+
+// const refFcStore = storeToRefs(fcStore)
+//
+// watchEffect(() => {
+//   formRules.value = refFcStore.getInfo.value.rule
+// })
+</script>
+
+<template>
+  <div>
+    <!--    {{ refFcStore.getInfo.value.rule }} -->
+    <form-create v-model="formData" v-model:api="formApi" :rule="formRules" />
+  </div>
+</template>