test: create fc demo

2025-02-14 17:51:47 +08:00 · 2025-02-14 17:51:47 +08:00 · f48f3660c7
commit f48f3660c7
parent d17fd46ea5
6 changed files with 210 additions and 26 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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:
--- a/src/main.ts
+++ b/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')
 }

--- a/src/store/modules/fc.ts
+++ b/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
+    },
+  },
+
+})
--- a/src/views/fc/designer/index.vue
+++ b/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 formApi = ref(null)
+const designer = ref()

-const formRules = ref([
-  {
-    type: 'input',
-    field: 'username',
-    title: '用户名',
-    value: '',
-  },
-  {
-    type: 'input',
-    field: 'password',
-    props: {
-      type: 'password',
-    },
-    title: '密码',
-    value: '',
-  },
-])
+const fcStore = useFormCreateStore()
+
+function onSave(e: any) {
+  const { createMessage } = useMessage()
+  createMessage.success()
+
+  fcStore.setInfo(e)
+}
+
+const config = ref({
+  showSaveBtn: true,
+})
 </script>

 <template>
-  <div id="app">
-    <form-create v-model="formData" v-model:api="formApi" :rule="formRules" />
+  <div>
+    <fc-designer ref="designer" height="100vh" :config="config" @save="onSave" />
  </div>
 </template>
--- a/src/views/fc/resolver/index.vue
+++ b/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>