diff --git a/package.json b/package.json
index 6bb206e..d037014 100644
--- 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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4ab2c9..0551dae 100644
--- 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:
diff --git a/src/main.ts b/src/main.ts
index bcb2c12..a6cbc63 100644
--- 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')
}
diff --git a/src/store/modules/fc.ts b/src/store/modules/fc.ts
new file mode 100644
index 0000000..6327bd2
--- /dev/null
+++ 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
+ },
+ },
+
+})
diff --git a/src/views/fc/designer/index.vue b/src/views/fc/designer/index.vue
index ace91a8..510c18d 100644
--- 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>
diff --git a/src/views/fc/resolver/index.vue b/src/views/fc/resolver/index.vue
new file mode 100644
index 0000000..01a2cf1
--- /dev/null
+++ 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>