├── docs
    ├── index.md
    ├── .vitepress
    │   └── config.ts
    └── introduction.md
├── .eslintrc
├── src
    ├── index.d.ts
    ├── assets
    │   └── logo.png
    ├── vueCustomProperties.d.ts
    ├── env.d.ts
    ├── components
    │   ├── Content
    │   │   ├── components
    │   │   │   ├── DraggableItem.vue
    │   │   │   └── Drop.vue
    │   │   └── Content.vue
    │   ├── LeftSider
    │   │   └── Sider.vue
    │   ├── RightSider
    │   │   ├── components
    │   │   │   ├── FormItemConfig
    │   │   │   │   ├── SwitchFormItemConfig.vue
    │   │   │   │   ├── TreeSelectFormItemConfig.vue
    │   │   │   │   ├── DividerConfig.vue
    │   │   │   │   ├── RateFormItemConfig.vue
    │   │   │   │   ├── InputFormItemConfig.vue
    │   │   │   │   ├── InputNumberFormItemConfig.vue
    │   │   │   │   ├── ColorPickerFormItemConfig.vue
    │   │   │   │   ├── CheckBoxFormItemConfig.vue
    │   │   │   │   ├── TimePickerFormItemConfig.vue
    │   │   │   │   ├── SliderFormItemConfig.vue
    │   │   │   │   ├── RadioFormItemConfig.vue
    │   │   │   │   ├── SelectFormItemConfig.vue
    │   │   │   │   ├── DatePickerFormItemConfig.vue
    │   │   │   │   └── UploadFormItemConfig.vue
    │   │   │   └── FormConfig
    │   │   │   │   └── FormConfig.vue
    │   │   └── Sider.vue
    │   └── Layout
    │   │   ├── components
    │   │       └── SetGenerateCodeModal
    │   │       │   └── SetGenerateCodeModal.vue
    │   │   └── Layout.vue
    ├── main.ts
    ├── utils
    │   ├── hook
    │   │   └── useConfig.ts
    │   ├── i18n
    │   │   ├── index.ts
    │   │   └── const.ts
    │   └── index.ts
    ├── App.vue
    ├── const
    │   └── const.ts
    └── store
    │   └── index.ts
├── .gitattributes
├── .vscode
    └── extensions.json
├── .husky
    └── pre-commit
├── lib
    ├── index.ts
    └── components
    │   └── proForm
    │       ├── types
    │           └── props.ts
    │       └── index.tsx
├── .gitignore
├── public
    └── favicon.ico
├── vite.config.ts
├── tsconfig.node.json
├── index.html
├── README.zh-CN.md
├── tsconfig.json
├── vite.config.lib.ts
├── README.md
└── package.json


/docs/index.md:
--------------------------------------------------------------------------------
1 | 111


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@antfu"
3 | }


--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | declare interface Window {
2 |   $message: any;
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx lint-staged
5 | 


--------------------------------------------------------------------------------
/lib/index.ts:
--------------------------------------------------------------------------------
1 | import ProFrom from './components/proForm/index'
2 | 
3 | export { ProFrom }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 | yarn.lock
7 | es
8 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/doom-9-zz/naive-ui-form-creator/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/doom-9-zz/naive-ui-form-creator/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/vueCustomProperties.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@vue/runtime-core' {
2 |   export interface ComponentCustomProperties {
3 |     $t: (target: string) => string;
4 |   }
5 | }
6 | 
7 | export {};
8 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [vue()],
7 | })
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts","vite.config.lib.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue'
5 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6 |   const component: DefineComponent<{}, {}, any>
7 |   export default component
8 | }
9 | 


--------------------------------------------------------------------------------
/src/components/Content/components/DraggableItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts"></script>
 2 | 
 3 | <template>
 4 |   <div
 5 |     draggable="true"
 6 |     data-drag="doom"
 7 |     :style="{
 8 |       transition: 'all 0.1s',
 9 |     }"
10 |   >
11 |     <slot />
12 |   </div>
13 | </template>
14 | 
15 | <style scoped></style>
16 | 


--------------------------------------------------------------------------------
/docs/.vitepress/config.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   title: 'VitePress111',
 3 |   description: 'Just playing around.',
 4 |   themeConfig: {
 5 |     sidebar: [
 6 |       {
 7 |         text: 'Guide',
 8 |         items: [
 9 |           { text: 'Introduction', link: '/introduction' },
10 |         ],
11 |       },
12 |     ],
13 |   },
14 | }
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>naive-ui-form-creator</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import naive from 'naive-ui'
 3 | import i18n from 'vue3-i18n-plugin'
 4 | import { store } from './store/index'
 5 | import App from './App.vue'
 6 | import i18nConfig from './utils/i18n/const'
 7 | 
 8 | createApp(App)
 9 |   .use(store)
10 |   .use(naive)
11 |   .use(i18n, {
12 |     initial: 'zh',
13 |     translationConfiguration: i18nConfig,
14 |   })
15 |   .mount('#app')
16 | 


--------------------------------------------------------------------------------
/src/utils/hook/useConfig.ts:
--------------------------------------------------------------------------------
 1 | import type { Ref } from 'vue'
 2 | import { ref, watch } from 'vue'
 3 | 
 4 | import { store } from '../../store/index'
 5 | 
 6 | export const useConfig = <T = Record<string, any>>(option: { sync?: boolean }): Ref<T> => {
 7 |   const Config = ref({ ...store.getters.formItemConfig })
 8 | 
 9 |   if (option.sync === undefined || option.sync) {
10 |     watch(
11 |       Config,
12 |       () => {
13 |         store.commit('changeSelectedFormItemConfig', Config.value)
14 |       },
15 |       {
16 |         deep: true,
17 |       },
18 |     )
19 |   }
20 | 
21 |   return Config
22 | }
23 | 


--------------------------------------------------------------------------------
/README.zh-CN.md:
--------------------------------------------------------------------------------
 1 | [English](https://github.com/doom-9/naive-ui-form-creator/blob/main/README.md)
 2 | 
 3 | ## 简介
 4 | 
 5 | `naive-ui-form-creator`是一个基于 `naive-ui` 组件库的**可视化表单生成器**，如果你有经常**制作`naive-ui`表单**的需求，可以使用此工具。`naive-ui-form-creator`是**可视化的**，**支持拖拽排序的**，它能够及时呈现和反馈表单的内容。
 6 | 
 7 | 在线预览：[地址](https://naive-create-form.vercel.app/)
 8 | 
 9 | ## 如何使用
10 | 
11 | 你可以 Fock 项目，自己部署访问，或者直接访问上面已经部署好的地址。
12 | 
13 | 当你制作完成表单后，点击右上角的**生成组件代码**，你就能得到一份 Vue3 的模版代码，然后拷贝到你的项目中使用。
14 | 
15 | ## 提示
16 | 
17 | 使用过程中如果遇到问题或者 bug，欢迎提交 issue，会及时修复的。
18 | 
19 | ## Todo
20 | 
21 | - [ ] 增加更多组件。
22 | - [x] 支持校验规则。
23 | - [ ] 优化拖拽动画。
24 | - [ ] 优化操作逻辑。
25 | - [x] 国际化
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "jsxFactory": "h",
10 |     "jsxFragmentFactory": "Fragment",
11 |     "sourceMap": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "esModuleInterop": true,
15 |     "lib": ["esnext", "dom"],
16 |     "skipLibCheck": true
17 |   },
18 |   "include": [
19 |     "src/**/*.ts",
20 |     "src/**/*.d.ts",
21 |     "src/**/*.tsx",
22 |     "src/**/*.vue",
23 |     "lib/**/*.tsx",
24 |     "lib/**/*.ts"
25 |   ],
26 |   "references": [{ "path": "./tsconfig.node.json" }]
27 | }
28 | 


--------------------------------------------------------------------------------
/vite.config.lib.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'path'
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | import vueJsx from '@vitejs/plugin-vue-jsx'
 5 | import dts from 'vite-plugin-dts'
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   plugins: [
10 |     vue(),
11 |     vueJsx({
12 |       // options are passed on to @vue/babel-plugin-jsx
13 |     }),
14 |     dts({
15 |       include: ['lib/**/*.tsx', 'lib/**/*.ts'],
16 |       insertTypesEntry: true,
17 |     }),
18 |   ],
19 |   build: {
20 |     lib: {
21 |       entry: resolve(__dirname, 'lib/index.ts'),
22 |       formats: ['es', 'cjs'],
23 |       fileName: 'index',
24 |     },
25 |     rollupOptions: {
26 |       // 确保外部化处理那些你不想打包进库的依赖
27 |       external: ['vue', 'naive-ui'],
28 |       output: {
29 |         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
30 |         globals: {
31 |           vue: 'Vue',
32 |         },
33 |         preserveModules: true,
34 |       },
35 |     },
36 |     outDir: 'dist',
37 |   },
38 | })
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [中文](https://github.com/doom-9/naive-ui-form-creator/blob/main/README.zh-CN.md)
 2 | 
 3 | ## Introduce
 4 | 
 5 | `Naive UI form creator` is a **visual form generator** based on the `naive UI` component library. You can use this tool if you often need to **create `naive UI` forms**. Naive UI form creator is **Visual** and **Support drag-and-drop sorting**,which can present and feed back the contents of the form in time.
 6 | 
 7 | Online preview: [Address](https://naive-create-form.vercel.app/)
 8 | 
 9 | ## How to use
10 | 
11 | You can either deploy your own access to the Fork project or directly access the address already deployed above.
12 | 
13 | When you have finished making the form, click **Generate Component Code** in the upper right corner, and you will get a template code for Vue3 and copy it to use in your project.
14 | 
15 | ## Tips
16 | 
17 | If you encounter problems or bugs during use, you are welcome to submit issues.
18 | 
19 | ## Todo
20 | 
21 | - [ ] Add more components.
22 | - [x] Supports checking rules.
23 | - [ ] Optimize drag animation.
24 | - [ ] Optimize operation logic.
25 | - [x] Internationalization
26 | 


--------------------------------------------------------------------------------
/src/utils/i18n/index.ts:
--------------------------------------------------------------------------------
 1 | import type { App } from 'vue'
 2 | import { ref } from 'vue'
 3 | 
 4 | interface I18nOptions {
 5 |   initial: string
 6 |   i18nConfig: Record<string, any>
 7 | }
 8 | 
 9 | const local = ref<string | undefined>(undefined)
10 | 
11 | const getOptionsValue = (target: string, options: Record<string, any>): string => {
12 |   const targetSplitArray = target.split('.')
13 |   if (local.value === undefined)
14 |     return ''
15 |   targetSplitArray.unshift(local.value)
16 |   let current = options
17 |   while (targetSplitArray.length > 0) {
18 |     current = current[targetSplitArray[0]]
19 |     if (current === undefined)
20 |       return ''
21 | 
22 |     targetSplitArray.shift()
23 |   }
24 |   if (typeof current === 'string')
25 |     return current
26 | 
27 |   return ''
28 | }
29 | 
30 | export const changeLocal = (value: string): void => {
31 |   local.value = value
32 | }
33 | 
34 | export default {
35 |   install: (app: App, options: I18nOptions) => {
36 |     local.value = options.initial
37 |     app.config.globalProperties.$t = (target: string): string => {
38 |       return getOptionsValue(target, options.i18nConfig)
39 |     }
40 |   },
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/LeftSider/Sider.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useStore } from 'vuex'
 3 | import { useMessage } from 'naive-ui'
 4 | import { LayoutOptions, options } from '../../const/const'
 5 | 
 6 | const store = useStore()
 7 | window.$message = useMessage()
 8 | const handleAddClick = (value: string) => {
 9 |   store.commit('add', {
10 |     value,
11 |   })
12 | }
13 | const handleLayoutAddClick = (value: string) => {
14 |   store.commit('add', {
15 |     value,
16 |   })
17 | }
18 | </script>
19 | 
20 | <template>
21 |   <n-space vertical>
22 |     <n-divider title-placement="center">
23 |       {{ $t('formComponent') }}
24 |     </n-divider>
25 |     <n-button
26 |       v-for="item in options"
27 |       :key="item.value"
28 |       type="primary"
29 |       size="large"
30 |       @click="handleAddClick(item.value)"
31 |     >
32 |       {{ $t(item.formItemConfig.label) }}
33 |     </n-button>
34 |     <n-divider title-placement="center">
35 |       {{ $t('layoutComponent') }}
36 |     </n-divider>
37 |     <n-button
38 |       v-for="item in LayoutOptions"
39 |       :key="item.value"
40 |       type="warning"
41 |       size="large"
42 |       @click="handleLayoutAddClick(item.value)"
43 |     >
44 |       {{ $t(item.formItemConfig.label) }}
45 |     </n-button>
46 |   </n-space>
47 | </template>
48 | 
49 | <style></style>
50 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/SwitchFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | import { ruleOptions } from '../../../../const/const'
 4 | 
 5 | const formValue = useConfig({})
 6 | </script>
 7 | 
 8 | <template>
 9 |   <n-form>
10 |     <n-form-item :label="$t('id')">
11 |       <n-input v-model:value="formValue.name" type="text" />
12 |     </n-form-item>
13 |     <n-form-item :label="$t('name')">
14 |       <n-input v-model:value="formValue.label" type="text" />
15 |     </n-form-item>
16 |     <n-form-item :label="$t('rules')">
17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
18 |     </n-form-item>
19 |     <n-form-item :label="$t('size')">
20 |       <n-radio-group v-model:value="formValue.size">
21 |         <n-space>
22 |           <n-radio :key="0" value="small">
23 |             small
24 |           </n-radio>
25 |           <n-radio :key="1" value="medium">
26 |             medium
27 |           </n-radio>
28 |           <n-radio :key="2" value="large">
29 |             large
30 |           </n-radio>
31 |         </n-space>
32 |       </n-radio-group>
33 |     </n-form-item>
34 |     <n-form-item :label="$t('round')">
35 |       <n-radio-group v-model:value="formValue.round">
36 |         <n-space>
37 |           <n-radio :key="0" :value="true">
38 |             {{ $t('yes') }}
39 |           </n-radio>
40 |           <n-radio :key="1" :value="false">
41 |             {{ $t('no') }}
42 |           </n-radio>
43 |         </n-space>
44 |       </n-radio-group>
45 |     </n-form-item>
46 |   </n-form>
47 | </template>
48 | 
49 | <style></style>
50 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/TreeSelectFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | import { ruleOptions } from '../../../../const/const'
 4 | 
 5 | const formValue = useConfig({})
 6 | </script>
 7 | 
 8 | <template>
 9 |   <n-form>
10 |     <n-form-item :label="$t('id')">
11 |       <n-input v-model:value="formValue.name" type="text" />
12 |     </n-form-item>
13 |     <n-form-item :label="$t('name')">
14 |       <n-input v-model:value="formValue.label" type="text" />
15 |     </n-form-item>
16 |     <n-form-item :label="$t('rules')">
17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
18 |     </n-form-item>
19 |     <n-form-item :label="$t('clearable')">
20 |       <n-radio-group v-model:value="formValue.clearable">
21 |         <n-space>
22 |           <n-radio :key="0" :value="true">
23 |             {{ $t('yes') }}
24 |           </n-radio>
25 |           <n-radio :key="1" :value="false">
26 |             {{ $t('no') }}
27 |           </n-radio>
28 |         </n-space>
29 |       </n-radio-group>
30 |     </n-form-item>
31 |     <n-form-item :label="$t('size')">
32 |       <n-radio-group v-model:value="formValue.size">
33 |         <n-space>
34 |           <n-radio :key="0" value="small">
35 |             small
36 |           </n-radio>
37 |           <n-radio :key="1" value="medium">
38 |             medium
39 |           </n-radio>
40 |           <n-radio :key="2" value="large">
41 |             large
42 |           </n-radio>
43 |         </n-space>
44 |       </n-radio-group>
45 |     </n-form-item>
46 |   </n-form>
47 | </template>
48 | 
49 | <style></style>
50 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/DividerConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | 
 4 | const formValue = useConfig({})
 5 | </script>
 6 | 
 7 | <template>
 8 |   <n-form>
 9 |     <n-form-item :label="$t('name')">
10 |       <n-input v-model:value="formValue.name" type="text" />
11 |     </n-form-item>
12 |     <n-form-item :label="$t('dashed')">
13 |       <n-radio-group v-model:value="formValue.dashed">
14 |         <n-space>
15 |           <n-radio :key="0" :value="true">
16 |             {{ $t('yes') }}
17 |           </n-radio>
18 |           <n-radio :key="1" :value="false">
19 |             {{ $t('no') }}
20 |           </n-radio>
21 |         </n-space>
22 |       </n-radio-group>
23 |     </n-form-item>
24 |     <n-form-item :label="$t('vertical')">
25 |       <n-radio-group v-model:value="formValue.vertical">
26 |         <n-space>
27 |           <n-radio :key="0" :value="true">
28 |             {{ $t('yes') }}
29 |           </n-radio>
30 |           <n-radio :key="1" :value="false">
31 |             {{ $t('no') }}
32 |           </n-radio>
33 |         </n-space>
34 |       </n-radio-group>
35 |     </n-form-item>
36 |     <n-form-item :label="$t('titlePlacement')">
37 |       <n-radio-group v-model:value="formValue.titlePlacement">
38 |         <n-space>
39 |           <n-radio :key="0" value="left">
40 |             left
41 |           </n-radio>
42 |           <n-radio :key="2" value="center">
43 |             center
44 |           </n-radio>
45 |           <n-radio :key="1" value="right">
46 |             right
47 |           </n-radio>
48 |         </n-space>
49 |       </n-radio-group>
50 |     </n-form-item>
51 |   </n-form>
52 | </template>
53 | 
54 | <style></style>
55 | 


--------------------------------------------------------------------------------
/src/components/Layout/components/SetGenerateCodeModal/SetGenerateCodeModal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import type { FormValidate } from 'naive-ui/es/form/src/interface'
 4 | import { useStore } from 'vuex'
 5 | 
 6 | const showModal = ref<boolean>(false)
 7 | const cancelCallback = () => {}
 8 | const handleShowModal = () => {
 9 |   showModal.value = true
10 | }
11 | const formRef = ref<null | {
12 |   validate: FormValidate
13 | }>(null)
14 | const formValue = ref({
15 |   import: false,
16 |   confirmAndCancelBtn: false,
17 | })
18 | 
19 | const store = useStore()
20 | const handleValidateClick = () => {
21 |   if (formRef.value) {
22 |     formRef.value.validate((errors) => {
23 |       if (!errors) {
24 |         store.commit('changeAutoAddImport', formValue.value.import)
25 |         store.commit('changeConfirmAndCancelBtn', formValue.value.confirmAndCancelBtn)
26 |       }
27 |       else {
28 |         // console.log(errors)
29 |       }
30 |     })
31 |   }
32 | }
33 | 
34 | defineExpose({
35 |   handleShowModal,
36 | })
37 | </script>
38 | 
39 | <template>
40 |   <n-modal
41 |     v-model:show="showModal"
42 |     preset="dialog"
43 |     :title="$t('modalTitle')"
44 |     :positive-text="$t('confirm')"
45 |     :negative-text="$t('cancel')"
46 |     @positive-click="handleValidateClick"
47 |     @negative-click="cancelCallback"
48 |   >
49 |     <n-form ref="formRef" :model="formValue" label-placement="left">
50 |       <n-form-item :label="$t('import')">
51 |         <n-switch v-model:value="formValue.import" />
52 |       </n-form-item>
53 |       <n-form-item :label="$t('confirmAndCancelBtn')">
54 |         <n-switch v-model:value="formValue.confirmAndCancelBtn" />
55 |       </n-form-item>
56 |     </n-form>
57 |   </n-modal>
58 | </template>
59 | 
60 | <style></style>
61 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/RateFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | import { ruleOptions } from '../../../../const/const'
 4 | 
 5 | const formValue = useConfig({})
 6 | </script>
 7 | 
 8 | <template>
 9 |   <n-form>
10 |     <n-form-item :label="$t('id')">
11 |       <n-input v-model:value="formValue.name" type="text" />
12 |     </n-form-item>
13 |     <n-form-item :label="$t('name')">
14 |       <n-input v-model:value="formValue.label" type="text" />
15 |     </n-form-item>
16 |     <n-form-item :label="$t('rules')">
17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
18 |     </n-form-item>
19 |     <n-form-item :label="$t('size')">
20 |       <n-radio-group v-model:value="formValue.size">
21 |         <n-space>
22 |           <n-radio :key="0" value="small">
23 |             small
24 |           </n-radio>
25 |           <n-radio :key="1" value="medium">
26 |             medium
27 |           </n-radio>
28 |           <n-radio :key="2" value="large">
29 |             large
30 |           </n-radio>
31 |         </n-space>
32 |       </n-radio-group>
33 |     </n-form-item>
34 |     <n-form-item :label="$t('count')">
35 |       <n-input-number v-model:value="formValue.count" />
36 |     </n-form-item>
37 |     <n-form-item :label="$t('allowHalf')">
38 |       <n-radio-group v-model:value="formValue.allowHalf">
39 |         <n-space>
40 |           <n-radio :key="0" :value="true">
41 |             {{ $t('yes') }}
42 |           </n-radio>
43 |           <n-radio :key="1" :value="false">
44 |             {{ $t('no') }}
45 |           </n-radio>
46 |         </n-space>
47 |       </n-radio-group>
48 |     </n-form-item>
49 |   </n-form>
50 | </template>
51 | 
52 | <style></style>
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "naive-create-form",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vue-tsc --noEmit && vite build",
 7 |     "lib-build": "vite build -c vite.config.lib.ts",
 8 |     "serve": "vite preview",
 9 |     "lint": "eslint .",
10 |     "check": "npx taze -w",
11 |     "docs:dev": "vitepress dev docs",
12 |     "docs:build": "vitepress build docs",
13 |     "docs:serve": "vitepress serve docs",
14 |     "prepare": "husky install"
15 |   },
16 |   "dependencies": {
17 |     "@types/uuid": "^8.3.4",
18 |     "@vicons/antd": "^0.11.0",
19 |     "highlight.js": "^11.6.0",
20 |     "naive-ui": "^2.31.0",
21 |     "uuid": "^8.3.2",
22 |     "vue": "^3.0.0",
23 |     "vue3-i18n-plugin": "^1.0.9",
24 |     "vuex": "^4.0.2"
25 |   },
26 |   "devDependencies": {
27 |     "@antfu/eslint-config": "^0.25.2",
28 |     "@types/node": "^18.0.4",
29 |     "@vicons/fluent": "^0.12.0",
30 |     "@vitejs/plugin-vue": "^2.3.3",
31 |     "@vitejs/plugin-vue-jsx": "^1.3.10",
32 |     "eslint": "^8.19.0",
33 |     "husky": "^7.0.4",
34 |     "lint-staged": "^13.0.3",
35 |     "typescript": "^4.7.4",
36 |     "vite": "^3.0.0",
37 |     "vite-plugin-dts": "^1.3.0",
38 |     "vitepress": "^1.0.0-draft.8",
39 |     "vue-tsc": "^0.3.0"
40 |   },
41 |   "peerDependencies": {
42 |     "naive-ui": "^2.31.0",
43 |     "vue": "^3.0.0"
44 |   },
45 |   "lint-staged": {
46 |     "*.ts": [
47 |       "prettier --write",
48 |       "eslint --fix"
49 |     ],
50 |     "*.vue": [
51 |       "prettier --write",
52 |       "eslint --fix"
53 |     ],
54 |     "*.tsx": [
55 |       "prettier --write",
56 |       "eslint --fix"
57 |     ]
58 |   },
59 |   "license": "MIT",
60 |   "files": [
61 |     "es",
62 |     "README.md"
63 |   ],
64 |   "types": "dist/index.d.ts",
65 |   "main": "dist/index.js",
66 |   "module": "dist/index.mjs"
67 | }
68 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import { useStore } from 'vuex'
 4 | import type { NDateLocale, NLocale } from 'naive-ui'
 5 | import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
 6 | import type { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface'
 7 | import hljs from 'highlight.js/lib/core'
 8 | import javascript from 'highlight.js/lib/languages/javascript'
 9 | 
10 | import { changeLocal } from 'vue3-i18n-plugin'
11 | import Layout from './components/Layout/Layout.vue'
12 | 
13 | hljs.registerLanguage('javascript', javascript)
14 | const theme = ref<null | BuiltInGlobalTheme>(null)
15 | const locale = ref<null | NLocale>(zhCN)
16 | const dateLocale = ref<null | NDateLocale>(dateZhCN)
17 | 
18 | const changeTheme = () => {
19 |   if (theme.value === null)
20 |     theme.value = darkTheme
21 |   else theme.value = null
22 | }
23 | 
24 | const store = useStore()
25 | const changeLocale = () => {
26 |   if (locale.value === null) {
27 |     locale.value = zhCN
28 |     dateLocale.value = dateZhCN
29 |     store.commit('changeLocal', 'zh')
30 |     changeLocal('zh')
31 |   }
32 |   else {
33 |     locale.value = null
34 |     dateLocale.value = null
35 |     store.commit('changeLocal', 'en')
36 |     changeLocal('en')
37 |   }
38 | }
39 | </script>
40 | 
41 | <template>
42 |   <n-config-provider
43 |     :theme="theme"
44 |     :hljs="hljs"
45 |     :locale="locale"
46 |     :date-locale="dateLocale"
47 |   >
48 |     <n-message-provider :max="3">
49 |       <Layout
50 |         :is-dark="theme === null ? false : true"
51 |         :is-english="locale === null ? true : false"
52 |         @changeTheme="changeTheme"
53 |         @changeLocale="changeLocale"
54 |       />
55 |     </n-message-provider>
56 |   </n-config-provider>
57 | </template>
58 | 
59 | <style>
60 | pre {
61 |   overflow: auto;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/InputFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | import { ruleOptions } from '../../../../const/const'
 4 | 
 5 | const formValue = useConfig({})
 6 | </script>
 7 | 
 8 | <template>
 9 |   <n-form>
10 |     <n-form-item :label="$t('id')">
11 |       <n-input v-model:value="formValue.name" type="text" />
12 |     </n-form-item>
13 |     <n-form-item :label="$t('name')">
14 |       <n-input v-model:value="formValue.label" type="text" />
15 |     </n-form-item>
16 |     <n-form-item :label="$t('rules')">
17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
18 |     </n-form-item>
19 |     <n-form-item :label="$t('clearable')">
20 |       <n-radio-group v-model:value="formValue.clearable">
21 |         <n-space>
22 |           <n-radio :key="0" :value="true">
23 |             {{ $t('yes') }}
24 |           </n-radio>
25 |           <n-radio :key="1" :value="false">
26 |             {{ $t('no') }}
27 |           </n-radio>
28 |         </n-space>
29 |       </n-radio-group>
30 |     </n-form-item>
31 |     <n-form-item :label="$t('maxlength')">
32 |       <n-input-number v-model:value="formValue.maxlength" />
33 |     </n-form-item>
34 |     <n-form-item :label="$t('minlength')">
35 |       <n-input-number v-model:value="formValue.minlength" />
36 |     </n-form-item>
37 |     <n-form-item :label="$t('type')">
38 |       <n-radio-group v-model:value="formValue.type">
39 |         <n-space>
40 |           <n-radio :key="0" value="text">
41 |             text
42 |           </n-radio>
43 |           <n-radio :key="1" value="password">
44 |             password
45 |           </n-radio>
46 |           <n-radio :key="2" value="textarea">
47 |             textarea
48 |           </n-radio>
49 |         </n-space>
50 |       </n-radio-group>
51 |     </n-form-item>
52 |     <n-form-item :label="$t('size')">
53 |       <n-radio-group v-model:value="formValue.size">
54 |         <n-space>
55 |           <n-radio :key="0" value="small">
56 |             small
57 |           </n-radio>
58 |           <n-radio :key="1" value="medium">
59 |             medium
60 |           </n-radio>
61 |           <n-radio :key="2" value="large">
62 |             large
63 |           </n-radio>
64 |         </n-space>
65 |       </n-radio-group>
66 |     </n-form-item>
67 |   </n-form>
68 | </template>
69 | 
70 | <style></style>
71 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/InputNumberFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | import { ruleOptions } from '../../../../const/const'
 4 | 
 5 | const formValue = useConfig({})
 6 | </script>
 7 | 
 8 | <template>
 9 |   <n-form>
10 |     <n-form-item :label="$t('id')">
11 |       <n-input v-model:value="formValue.name" type="text" />
12 |     </n-form-item>
13 |     <n-form-item :label="$t('name')">
14 |       <n-input v-model:value="formValue.label" type="text" />
15 |     </n-form-item>
16 |     <n-form-item :label="$t('rules')">
17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
18 |     </n-form-item>
19 |     <n-form-item :label="$t('clearable')">
20 |       <n-radio-group v-model:value="formValue.clearable">
21 |         <n-space>
22 |           <n-radio :key="0" :value="true">
23 |             {{ $t('yes') }}
24 |           </n-radio>
25 |           <n-radio :key="1" :value="false">
26 |             {{ $t('no') }}
27 |           </n-radio>
28 |         </n-space>
29 |       </n-radio-group>
30 |     </n-form-item>
31 |     <n-form-item :label="$t('max')">
32 |       <n-input-number v-model:value="formValue.max" />
33 |     </n-form-item>
34 |     <n-form-item :label="$t('min')">
35 |       <n-input-number v-model:value="formValue.min" />
36 |     </n-form-item>
37 |     <n-form-item :label="$t('step')">
38 |       <n-input-number v-model:value="formValue.step" />
39 |     </n-form-item>
40 |     <n-form-item :label="$t('showButton')">
41 |       <n-radio-group v-model:value="formValue.showButton">
42 |         <n-space>
43 |           <n-radio :key="0" :value="true">
44 |             {{ $t('yes') }}
45 |           </n-radio>
46 |           <n-radio :key="1" :value="false">
47 |             {{ $t('no') }}
48 |           </n-radio>
49 |         </n-space>
50 |       </n-radio-group>
51 |     </n-form-item>
52 |     <n-form-item :label="$t('size')">
53 |       <n-radio-group v-model:value="formValue.size">
54 |         <n-space>
55 |           <n-radio :key="0" value="small">
56 |             small
57 |           </n-radio>
58 |           <n-radio :key="1" value="medium">
59 |             medium
60 |           </n-radio>
61 |           <n-radio :key="2" value="large">
62 |             large
63 |           </n-radio>
64 |         </n-space>
65 |       </n-radio-group>
66 |     </n-form-item>
67 |   </n-form>
68 | </template>
69 | 
70 | <style></style>
71 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/ColorPickerFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | import { ruleOptions } from '../../../../const/const'
 4 | 
 5 | const formValue = useConfig({})
 6 | </script>
 7 | 
 8 | <template>
 9 |   <n-form>
10 |     <n-form-item :label="$t('id')">
11 |       <n-input v-model:value="formValue.name" type="text" />
12 |     </n-form-item>
13 |     <n-form-item :label="$t('name')">
14 |       <n-input v-model:value="formValue.label" type="text" />
15 |     </n-form-item>
16 |     <n-form-item :label="$t('rules')">
17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
18 |     </n-form-item>
19 |     <n-form-item :label="$t('size')">
20 |       <n-radio-group v-model:value="formValue.size">
21 |         <n-space>
22 |           <n-radio :key="0" value="small">
23 |             small
24 |           </n-radio>
25 |           <n-radio :key="1" value="medium">
26 |             medium
27 |           </n-radio>
28 |           <n-radio :key="2" value="large">
29 |             large
30 |           </n-radio>
31 |         </n-space>
32 |       </n-radio-group>
33 |     </n-form-item>
34 |     <n-form-item :label="$t('showAlpha')">
35 |       <n-radio-group v-model:value="formValue.showAlpha">
36 |         <n-space>
37 |           <n-radio :key="0" :value="true">
38 |             {{ $t('yes') }}
39 |           </n-radio>
40 |           <n-radio :key="1" :value="false">
41 |             {{ $t('no') }}
42 |           </n-radio>
43 |         </n-space>
44 |       </n-radio-group>
45 |     </n-form-item>
46 |     <n-form-item :label="$t('modes')">
47 |       <n-select
48 |         v-model:value="formValue.modes"
49 |         multiple
50 |         :options="[
51 |           {
52 |             label: 'rgb',
53 |             value: 'rgb',
54 |           },
55 |           {
56 |             label: 'hex',
57 |             value: 'hex',
58 |           },
59 |           {
60 |             label: 'hsl',
61 |             value: 'hsl',
62 |           },
63 |           {
64 |             label: 'hsv',
65 |             value: 'hsv',
66 |           },
67 |         ]"
68 |       />
69 |     </n-form-item>
70 |     <n-form-item :label="$t('actions')">
71 |       <n-select
72 |         v-model:value="formValue.actions"
73 |         multiple
74 |         :options="[
75 |           {
76 |             label: 'confirm',
77 |             value: 'confirm',
78 |           },
79 |         ]"
80 |       />
81 |     </n-form-item>
82 |   </n-form>
83 | </template>
84 | 
85 | <style></style>
86 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/CheckBoxFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useStore } from 'vuex'
 3 | import { useConfig } from '../../../../utils/hook/useConfig'
 4 | import { ruleOptions } from '../../../../const/const'
 5 | 
 6 | const formValue = useConfig<{
 7 |   label: string | undefined
 8 |   name: string | undefined
 9 |   max: number | undefined
10 |   min: number | undefined
11 |   options: Array<{
12 |     label: string
13 |     value: string
14 |   }>
15 |   rules: Array<string>
16 | }>({
17 |   sync: false,
18 | })
19 | const onCreate = () => {
20 |   return {
21 |     label: '',
22 |     value: '',
23 |   }
24 | }
25 | const store = useStore()
26 | const handleSubmit = () => {
27 |   store.commit('changeSelectedFormItemConfig', formValue.value)
28 | }
29 | </script>
30 | 
31 | <template>
32 |   <n-form>
33 |     <n-form-item :label="$t('id')">
34 |       <n-input v-model:value="formValue.name" type="text" />
35 |     </n-form-item>
36 |     <n-form-item :label="$t('name')">
37 |       <n-input v-model:value="formValue.label" type="text" />
38 |     </n-form-item>
39 |     <n-form-item :label="$t('rules')">
40 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
41 |     </n-form-item>
42 |     <n-form-item :label="$t('maxSelect')">
43 |       <n-input-number v-model:value="formValue.max" />
44 |     </n-form-item>
45 |     <n-form-item :label="$t('minSelect')">
46 |       <n-input-number v-model:value="formValue.min" />
47 |     </n-form-item>
48 |     <n-form-item :label="$t('addOptions')">
49 |       <n-dynamic-input
50 |         v-slot="{ index }"
51 |         v-model:value="formValue.options"
52 |         item-style="margin-bottom: 0;"
53 |         :on-create="onCreate"
54 |       >
55 |         <div style="display: flex">
56 |           <n-form-item :show-label="false">
57 |             <n-input
58 |               v-model:value="formValue.options[index].label"
59 |               placeholder="Label"
60 |               @keydown.enter.prevent
61 |             />
62 |           </n-form-item>
63 |           <div style="height: 34px; line-height: 34px; margin: 0 8px">
64 |             -
65 |           </div>
66 |           <n-form-item :show-label="false">
67 |             <n-input
68 |               v-model:value="formValue.options[index].value"
69 |               placeholder="Value"
70 |               @keydown.enter.prevent
71 |             />
72 |           </n-form-item>
73 |         </div>
74 |       </n-dynamic-input>
75 |     </n-form-item>
76 |     <n-button type="primary" @click="handleSubmit">
77 |       {{ $t('apply') }}
78 |     </n-button>
79 |   </n-form>
80 | </template>
81 | 
82 | <style></style>
83 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/TimePickerFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | import { ruleOptions } from '../../../../const/const'
 4 | 
 5 | const formValue = useConfig({})
 6 | </script>
 7 | 
 8 | <template>
 9 |   <n-form>
10 |     <n-form-item :label="$t('id')">
11 |       <n-input v-model:value="formValue.name" type="text" />
12 |     </n-form-item>
13 |     <n-form-item :label="$t('name')">
14 |       <n-input v-model:value="formValue.label" type="text" />
15 |     </n-form-item>
16 |     <n-form-item :label="$t('rules')">
17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
18 |     </n-form-item>
19 |     <n-form-item :label="$t('format')">
20 |       <n-input v-model:value="formValue.format" type="text" />
21 |     </n-form-item>
22 |     <n-form-item :label="$t('actions')">
23 |       <n-select
24 |         v-model:value="formValue.actions"
25 |         multiple
26 |         :options="[
27 |           {
28 |             label: 'now',
29 |             value: 'now',
30 |           },
31 |           {
32 |             label: 'confirm',
33 |             value: 'confirm',
34 |           },
35 |         ]"
36 |       />
37 |     </n-form-item>
38 |     <n-form-item :label="$t('clearable')">
39 |       <n-radio-group v-model:value="formValue.clearable">
40 |         <n-space>
41 |           <n-radio :key="0" :value="true">
42 |             {{ $t('yes') }}
43 |           </n-radio>
44 |           <n-radio :key="1" :value="false">
45 |             {{ $t('no') }}
46 |           </n-radio>
47 |         </n-space>
48 |       </n-radio-group>
49 |     </n-form-item>
50 |     <n-form-item :label="$t('size')">
51 |       <n-radio-group v-model:value="formValue.size">
52 |         <n-space>
53 |           <n-radio :key="0" value="small">
54 |             small
55 |           </n-radio>
56 |           <n-radio :key="1" value="medium">
57 |             medium
58 |           </n-radio>
59 |           <n-radio :key="2" value="large">
60 |             large
61 |           </n-radio>
62 |         </n-space>
63 |       </n-radio-group>
64 |     </n-form-item>
65 |     <n-form-item :label="$t('placeholder')">
66 |       <n-input v-model:value="formValue.placeholder" type="text" />
67 |     </n-form-item>
68 |     <n-form-item :label="$t('use12Hours')">
69 |       <n-radio-group v-model:value="formValue.use12Hours">
70 |         <n-space>
71 |           <n-radio :key="0" :value="true">
72 |             {{ $t('yes') }}
73 |           </n-radio>
74 |           <n-radio :key="1" :value="false">
75 |             {{ $t('no') }}
76 |           </n-radio>
77 |         </n-space>
78 |       </n-radio-group>
79 |     </n-form-item>
80 |   </n-form>
81 | </template>
82 | 
83 | <style></style>
84 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/SliderFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useConfig } from '../../../../utils/hook/useConfig'
 3 | import { ruleOptions } from '../../../../const/const'
 4 | 
 5 | const formValue = useConfig({})
 6 | </script>
 7 | 
 8 | <template>
 9 |   <n-form>
10 |     <n-form-item :label="$t('id')">
11 |       <n-input v-model:value="formValue.name" type="text" />
12 |     </n-form-item>
13 |     <n-form-item :label="$t('name')">
14 |       <n-input v-model:value="formValue.label" type="text" />
15 |     </n-form-item>
16 |     <n-form-item :label="$t('rules')">
17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
18 |     </n-form-item>
19 |     <n-form-item :label="$t('range')">
20 |       <n-radio-group v-model:value="formValue.range">
21 |         <n-space>
22 |           <n-radio :key="0" :value="true">
23 |             {{ $t('yes') }}
24 |           </n-radio>
25 |           <n-radio :key="1" :value="false">
26 |             {{ $t('no') }}
27 |           </n-radio>
28 |         </n-space>
29 |       </n-radio-group>
30 |     </n-form-item>
31 |     <n-form-item :label="$t('reverse')">
32 |       <n-radio-group v-model:value="formValue.reverse">
33 |         <n-space>
34 |           <n-radio :key="0" :value="true">
35 |             {{ $t('yes') }}
36 |           </n-radio>
37 |           <n-radio :key="1" :value="false">
38 |             {{ $t('no') }}
39 |           </n-radio>
40 |         </n-space>
41 |       </n-radio-group>
42 |     </n-form-item>
43 |     <n-form-item :label="$t('vertical')">
44 |       <n-radio-group v-model:value="formValue.vertical">
45 |         <n-space>
46 |           <n-radio :key="0" :value="true">
47 |             {{ $t('yes') }}
48 |           </n-radio>
49 |           <n-radio :key="1" :value="false">
50 |             {{ $t('no') }}
51 |           </n-radio>
52 |         </n-space>
53 |       </n-radio-group>
54 |     </n-form-item>
55 |     <n-form-item :label="$t('tooltip')">
56 |       <n-radio-group v-model:value="formValue.tooltip">
57 |         <n-space>
58 |           <n-radio :key="0" :value="true">
59 |             {{ $t('yes') }}
60 |           </n-radio>
61 |           <n-radio :key="1" :value="false">
62 |             {{ $t('no') }}
63 |           </n-radio>
64 |         </n-space>
65 |       </n-radio-group>
66 |     </n-form-item>
67 |     <n-form-item :label="$t('max')">
68 |       <n-input-number v-model:value="formValue.max" />
69 |     </n-form-item>
70 |     <n-form-item :label="$t('min')">
71 |       <n-input-number v-model:value="formValue.min" />
72 |     </n-form-item>
73 |     <n-form-item :label="$t('step')">
74 |       <n-input-number v-model:value="formValue.step" />
75 |     </n-form-item>
76 |   </n-form>
77 | </template>
78 | 
79 | <style></style>
80 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/RadioFormItemConfig.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useStore } from 'vuex'
 3 | import { useConfig } from '../../../../utils/hook/useConfig'
 4 | import { ruleOptions } from '../../../../const/const'
 5 | 
 6 | const formValue = useConfig<{
 7 |   label: string | undefined
 8 |   name: string | undefined
 9 |   size: 'small' | 'medium' | 'large'
10 |   options: Array<{
11 |     label: string
12 |     value: string
13 |   }>
14 |   rules: Array<string>
15 | }>({
16 |   sync: false,
17 | })
18 | const onCreate = () => {
19 |   return {
20 |     label: '',
21 |     value: '',
22 |   }
23 | }
24 | const store = useStore()
25 | const handleSubmit = () => {
26 |   store.commit('changeSelectedFormItemConfig', formValue.value)
27 | }
28 | </script>
29 | 
30 | <template>
31 |   <n-form>
32 |     <n-form-item :label="$t('id')">
33 |       <n-input v-model:value="formValue.name" type="text" />
34 |     </n-form-item>
35 |     <n-form-item :label="$t('name')">
36 |       <n-input v-model:value="formValue.label" type="text" />
37 |     </n-form-item>
38 |     <n-form-item :label="$t('rules')">
39 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
40 |     </n-form-item>
41 |     <n-form-item :label="$t('size')">
42 |       <n-radio-group v-model:value="formValue.size">
43 |         <n-space>
44 |           <n-radio :key="0" value="small">
45 |             small
46 |           </n-radio>
47 |           <n-radio :key="1" value="medium">
48 |             medium
49 |           </n-radio>
50 |           <n-radio :key="2" value="large">
51 |             large
52 |           </n-radio>
53 |         </n-space>
54 |       </n-radio-group>
55 |     </n-form-item>
56 |     <n-form-item :label="$t('addOptions')">
57 |       <n-dynamic-input
58 |         v-slot="{ index }"
59 |         v-model:value="formValue.options"
60 |         item-style="margin-bottom: 0;"
61 |         :on-create="onCreate"
62 |       >
63 |         <div style="display: flex">
64 |           <n-form-item :show-label="false">
65 |             <n-input
66 |               v-model:value="formValue.options[index].label"
67 |               placeholder="Label"
68 |               @keydown.enter.prevent
69 |             />
70 |           </n-form-item>
71 |           <div style="height: 34px; line-height: 34px; margin: 0 8px">
72 |             -
73 |           </div>
74 |           <n-form-item :show-label="false">
75 |             <n-input
76 |               v-model:value="formValue.options[index].value"
77 |               placeholder="Value"
78 |               @keydown.enter.prevent
79 |             />
80 |           </n-form-item>
81 |         </div>
82 |       </n-dynamic-input>
83 |     </n-form-item>
84 |     <n-button type="primary" @click="handleSubmit">
85 |       {{ $t('apply') }}
86 |     </n-button>
87 |   </n-form>
88 | </template>
89 | 
90 | <style></style>
91 | 


--------------------------------------------------------------------------------
/lib/components/proForm/types/props.ts:
--------------------------------------------------------------------------------
  1 | import type {
  2 |   CheckboxGroupProps,
  3 |   CheckboxProps,
  4 |   ColorPickerProps,
  5 |   DatePickerProps,
  6 |   FormItemProps,
  7 |   InputNumberProps,
  8 |   InputProps,
  9 |   RadioGroupProps,
 10 |   RadioProps,
 11 |   RateProps,
 12 |   SelectProps,
 13 |   SliderProps,
 14 |   SwitchProps,
 15 |   TimePickerProps,
 16 |   UploadProps,
 17 | } from 'naive-ui'
 18 | // import type { FileInfo } from 'naive-ui/es/upload/src/interface'
 19 | 
 20 | type addCommonProps<T extends Record<string, any>> = T & {
 21 |   formItemProps?: Omit<FormItemProps, 'label' | 'path'>
 22 |   label: string
 23 |   key: string
 24 |   show?: boolean
 25 |   tooltipConfig?: {
 26 |     show: boolean
 27 |     text: string
 28 |   }
 29 | }
 30 | 
 31 | export type ProFormItem =
 32 |   | addCommonProps<{
 33 |     type: 'input'
 34 |     props?: Omit<InputProps, 'onUpdateValue' | 'value'>
 35 |   }>
 36 |   | addCommonProps<{
 37 |     type: 'inputNumber'
 38 |     props?: Omit<InputNumberProps, 'onUpdateValue' | 'value'>
 39 |   }>
 40 |   | addCommonProps<{
 41 |     type: 'radio'
 42 |     props?:
 43 |     | Omit<RadioProps, 'label' | 'value' | 'checked' | 'onUpdateChecked'>
 44 |     | Omit<RadioGroupProps, 'onUpdateValue' | 'value'>
 45 |     valueEnum: {
 46 |       label: string
 47 |       value: string | number
 48 |     }[]
 49 |     group?: boolean
 50 |   }>
 51 |   | addCommonProps<{
 52 |     type: 'select'
 53 |     props?: Omit<SelectProps, 'onUpdateValue' | 'value' | 'options'>
 54 |     valueEnum: {
 55 |       label: string
 56 |       value: string | number
 57 |       disabled: boolean
 58 |     }[]
 59 |   }>
 60 |   | addCommonProps<{
 61 |     type: 'rate'
 62 |     props?: Omit<RateProps, 'onUpdateValue' | 'value'>
 63 |   }>
 64 |   | addCommonProps<{
 65 |     type: 'switch'
 66 |     props?: Omit<SwitchProps, 'onUpdateValue' | 'value'>
 67 |   }>
 68 |   | addCommonProps<{
 69 |     type: 'timePicker'
 70 |     props?: Omit<TimePickerProps, 'onUpdateValue' | 'value'>
 71 |   }>
 72 |   | addCommonProps<{
 73 |     type: 'datePicker'
 74 |     props?: Omit<DatePickerProps, 'onUpdateValue' | 'value'>
 75 |   }>
 76 |   | addCommonProps<{
 77 |     type: 'colorPicker'
 78 |     props?: Omit<ColorPickerProps, 'onUpdateValue' | 'value'>
 79 |   }>
 80 |   | addCommonProps<{
 81 |     type: 'checkbox'
 82 |     props?:
 83 |     | Omit<
 84 |             CheckboxProps,
 85 |             'onUpdateChecked' | 'value' | 'label' | 'disabled'
 86 |           >
 87 |     | Omit<CheckboxGroupProps, 'onUpdateValue' | 'value'>
 88 |     valueEnum: {
 89 |       label: string
 90 |       value: string | number
 91 |       disabled: boolean
 92 |     }[]
 93 |   }>
 94 |   | addCommonProps<{
 95 |     type: 'upload'
 96 |     props?: Omit<UploadProps, 'fileList' | 'onUpdateFileList'>
 97 |     buttonText?: string
 98 |   }>
 99 |   | addCommonProps<{
100 |     type: 'slider'
101 |     props?: Omit<SliderProps, 'onUpdateValue' | 'value'>
102 |   }>
103 |   | {
104 |     type: 'divider'
105 |     dashed?: boolean
106 |     titlePlacement?: 'left' | 'right' | 'center'
107 |     vertical?: boolean
108 |     text: string
109 |   }
110 | 
111 | export type ProFormItemType = 'input' | 'radio'
112 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormConfig/FormConfig.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref, watch } from 'vue'
  3 | import { useStore } from 'vuex'
  4 | import { initialFormState } from '../../../../const/const'
  5 | import type { State } from '../../../../store/index'
  6 | import { copyPropertyValue } from '../../../../utils/index'
  7 | 
  8 | const formValue = ref<State['formConfig']>({
  9 |   ...initialFormState,
 10 | })
 11 | const store = useStore()
 12 | watch(
 13 |   formValue,
 14 |   () => {
 15 |     store.commit('changeFormConfig', formValue.value)
 16 |   },
 17 |   {
 18 |     deep: true,
 19 |   },
 20 | )
 21 | const handleResetClick = () => {
 22 |   Object.keys(initialFormState).forEach((key) => {
 23 |     copyPropertyValue(formValue.value, initialFormState, key as keyof State['formConfig'])
 24 |   })
 25 | }
 26 | </script>
 27 | 
 28 | <template>
 29 |   <n-form>
 30 |     <n-form-item :label="$t('model')">
 31 |       <n-input v-model:value="formValue.model" type="text" />
 32 |     </n-form-item>
 33 |     <n-form-item :label="$t('size')">
 34 |       <n-radio-group v-model:value="formValue.size">
 35 |         <n-space>
 36 |           <n-radio key="small" value="small">
 37 |             small
 38 |           </n-radio>
 39 |           <n-radio key="medium" value="medium">
 40 |             medium
 41 |           </n-radio>
 42 |           <n-radio key="large" value="large">
 43 |             large
 44 |           </n-radio>
 45 |         </n-space>
 46 |       </n-radio-group>
 47 |     </n-form-item>
 48 |     <n-form-item :label="$t('inline')">
 49 |       <n-switch v-model:value="formValue.inline" />
 50 |     </n-form-item>
 51 |     <n-form-item :label="$t('labelPlacement')">
 52 |       <n-radio-group v-model:value="formValue.labelPlacement">
 53 |         <n-space>
 54 |           <n-radio key="left" value="left">
 55 |             left
 56 |           </n-radio>
 57 |           <n-radio key="top" value="top">
 58 |             top
 59 |           </n-radio>
 60 |         </n-space>
 61 |       </n-radio-group>
 62 |     </n-form-item>
 63 |     <n-form-item :label="$t('labelWidth')">
 64 |       <n-input v-model:value="formValue.labelWidth" type="text" />
 65 |     </n-form-item>
 66 |     <n-form-item :label="$t('labelAlign')">
 67 |       <n-radio-group v-model:value="formValue.labelAlign">
 68 |         <n-space>
 69 |           <n-radio key="left" value="left">
 70 |             left
 71 |           </n-radio>
 72 |           <n-radio key="right" value="right">
 73 |             right
 74 |           </n-radio>
 75 |         </n-space>
 76 |       </n-radio-group>
 77 |     </n-form-item>
 78 |     <n-form-item :label="$t('showFeedback')">
 79 |       <n-switch v-model:value="formValue.showFeedback" />
 80 |     </n-form-item>
 81 |     <n-form-item :label="$t('showLabel')">
 82 |       <n-switch v-model:value="formValue.showLabel" />
 83 |     </n-form-item>
 84 |     <n-form-item :label="$t('showRequireMark')">
 85 |       <n-switch v-model:value="formValue.showRequireMark" />
 86 |     </n-form-item>
 87 |     <n-form-item :label="$t('requireMarkPlacement')">
 88 |       <n-radio-group v-model:value="formValue.requireMarkPlacement">
 89 |         <n-space>
 90 |           <n-radio key="left" value="left">
 91 |             left
 92 |           </n-radio>
 93 |           <n-radio key="right" value="right">
 94 |             right
 95 |           </n-radio>
 96 |         </n-space>
 97 |       </n-radio-group>
 98 |     </n-form-item>
 99 |   </n-form>
100 |   <n-space>
101 |     <n-button type="warning" @click="handleResetClick">
102 |       {{ $t('reset') }}
103 |     </n-button>
104 |   </n-space>
105 | </template>
106 | 
107 | <style></style>
108 | 


--------------------------------------------------------------------------------
/docs/introduction.md:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import proForm from '../lib/components/proForm/index.tsx'
  3 | 
  4 | 
  5 | const formItems = [
  6 |         {
  7 |             type:'input',
  8 |             label:'姓名',
  9 |             key:'name',
 10 |             tooltipConfig:{
 11 |                 show:true,
 12 |                 text:'自己的真实姓名'
 13 |             }
 14 |         },
 15 |          {
 16 |             type:'inputNumber',
 17 |             label:'年龄',
 18 |             key:'age'
 19 |         },
 20 |         {
 21 |             type:'radio',
 22 |             label:'婚姻情况',
 23 |             key:'maritalStatus',
 24 |             valueEnum:[
 25 |                 {
 26 |                     label:'已婚',
 27 |                     value:'1'
 28 |                 },
 29 |                 {
 30 |                     label:'未婚',
 31 |                     value:'0'
 32 |                 },
 33 |             ]
 34 |         },
 35 |         {
 36 |             type:'select',
 37 |             label:'爱好',
 38 |             key:'like',
 39 |             valueEnum:[
 40 |                 {
 41 |                     label:'足球',
 42 |                     value:'0'
 43 |                 },
 44 |                 {
 45 |                     label:'篮球',
 46 |                     value:'1'
 47 |                 },
 48 |                 {
 49 |                     label:'乒乓球',
 50 |                     value:'2',
 51 |                     disabled:true
 52 |                 },
 53 |             ]
 54 |         },
 55 |         {
 56 |             type:'rate',
 57 |             label:'朋友打分',
 58 |             key:'rate'
 59 |         },
 60 |          {
 61 |             type:'switch',
 62 |             label:'是否工作',
 63 |             key:'job'
 64 |         },
 65 |         {
 66 |             type:'timePicker',
 67 |             label:'早上几点起床',
 68 |             key:'getup',
 69 |             tooltipConfig:{
 70 |                 show:true,
 71 |                 text:'时分秒'
 72 |             }
 73 |         },
 74 |         {
 75 |             type:'datePicker',
 76 |             label:'出生年月',
 77 |             key:'born'
 78 |         },
 79 |         {
 80 |             type:'colorPicker',
 81 |             label:'喜欢的颜色',
 82 |             key:'color',
 83 |             tooltipConfig:{
 84 |                 show:true,
 85 |                 text:'多彩的颜色'
 86 |             }
 87 |         },
 88 |          {
 89 |             type:'checkbox',
 90 |             label:'喜欢的食物',
 91 |             key:'food',
 92 |             valueEnum:[
 93 |                 {
 94 |                     label:'苹果',
 95 |                     value:'0'
 96 |                 },
 97 |                 {
 98 |                     label:'香蕉',
 99 |                     value:'1'
100 |                 },
101 |                 {
102 |                     label:'西瓜',
103 |                     value:'2',
104 |                     disabled:true
105 |                 },
106 |             ]
107 |         },
108 |         {
109 |             type:'upload',
110 |             label:'上传头像',
111 |             key:'avatar',
112 |             buttonText:'上传图片',
113 |         },
114 |         {
115 |             type:'slider',
116 |             label:'自我打分',
117 |             key:'slider',
118 |         },
119 |         {
120 |             type:'divider',
121 |             text:'配偶信息'
122 |         },
123 |     ]
124 | 
125 | const formProps = {
126 |     labelPlacement:'left',
127 |     rules: {
128 |         name: {
129 |           required: true,
130 |           message: '请输入姓名',
131 |           trigger: ['input']
132 |         }
133 |       }
134 | }
135 | 
136 | 
137 | </script>
138 | 
139 | # Docs
140 | 
141 | This is a .md using a custom component
142 | 
143 | <proForm :formItems="formItems" :formProps="formProps" title="个人信息录入" resetButton isKeyPressSubmit/>
144 | 
145 | ## More docs
146 | 
147 | ...
148 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/SelectFormItemConfig.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useStore } from 'vuex'
  3 | import { useConfig } from '../../../../utils/hook/useConfig'
  4 | import { ruleOptions } from '../../../../const/const'
  5 | 
  6 | const formValue = useConfig<{
  7 |   label: string | undefined
  8 |   name: string | undefined
  9 |   size: 'small' | 'medium' | 'large'
 10 |   multiple: boolean
 11 |   placeholder: string
 12 |   clearable: boolean
 13 |   options: Array<{
 14 |     label: string
 15 |     value: string
 16 |   }>
 17 |   rules: Array<string>
 18 | }>({
 19 |   sync: false,
 20 | })
 21 | 
 22 | const onCreate = () => {
 23 |   return {
 24 |     label: '',
 25 |     value: '',
 26 |   }
 27 | }
 28 | const store = useStore()
 29 | const handleSubmit = () => {
 30 |   store.commit('changeSelectedFormItemConfig', formValue.value)
 31 | }
 32 | </script>
 33 | 
 34 | <template>
 35 |   <n-form>
 36 |     <n-form-item :label="$t('id')">
 37 |       <n-input v-model:value="formValue.name" type="text" />
 38 |     </n-form-item>
 39 |     <n-form-item :label="$t('name')">
 40 |       <n-input v-model:value="formValue.label" type="text" />
 41 |     </n-form-item>
 42 |     <n-form-item :label="$t('rules')">
 43 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
 44 |     </n-form-item>
 45 |     <n-form-item :label="$t('clearable')">
 46 |       <n-radio-group v-model:value="formValue.clearable">
 47 |         <n-space>
 48 |           <n-radio :key="0" :value="true">
 49 |             {{ $t('yes') }}
 50 |           </n-radio>
 51 |           <n-radio :key="1" :value="false">
 52 |             {{ $t('no') }}
 53 |           </n-radio>
 54 |         </n-space>
 55 |       </n-radio-group>
 56 |     </n-form-item>
 57 |     <n-form-item :label="$t('placeholder')">
 58 |       <n-input v-model:value="formValue.placeholder" type="text" />
 59 |     </n-form-item>
 60 |     <n-form-item :label="$t('size')">
 61 |       <n-radio-group v-model:value="formValue.size">
 62 |         <n-space>
 63 |           <n-radio :key="0" value="small">
 64 |             small
 65 |           </n-radio>
 66 |           <n-radio :key="1" value="medium">
 67 |             medium
 68 |           </n-radio>
 69 |           <n-radio :key="2" value="large">
 70 |             large
 71 |           </n-radio>
 72 |         </n-space>
 73 |       </n-radio-group>
 74 |     </n-form-item>
 75 |     <n-form-item :label="$t('multiple')">
 76 |       <n-radio-group v-model:value="formValue.multiple">
 77 |         <n-space>
 78 |           <n-radio :key="0" :value="true">
 79 |             {{ $t('yes') }}
 80 |           </n-radio>
 81 |           <n-radio :key="1" :value="false">
 82 |             {{ $t('no') }}
 83 |           </n-radio>
 84 |         </n-space>
 85 |       </n-radio-group>
 86 |     </n-form-item>
 87 |     <n-form-item :label="$t('addOptions')">
 88 |       <n-dynamic-input
 89 |         v-slot="{ index }"
 90 |         v-model:value="formValue.options"
 91 |         item-style="margin-bottom: 0;"
 92 |         :on-create="onCreate"
 93 |       >
 94 |         <div style="display: flex">
 95 |           <n-form-item :show-label="false">
 96 |             <n-input
 97 |               v-model:value="formValue.options[index].label"
 98 |               placeholder="Label"
 99 |               @keydown.enter.prevent
100 |             />
101 |           </n-form-item>
102 |           <div style="height: 34px; line-height: 34px; margin: 0 8px">
103 |             -
104 |           </div>
105 |           <n-form-item :show-label="false">
106 |             <n-input
107 |               v-model:value="formValue.options[index].value"
108 |               placeholder="Value"
109 |               @keydown.enter.prevent
110 |             />
111 |           </n-form-item>
112 |         </div>
113 |       </n-dynamic-input>
114 |     </n-form-item>
115 |     <n-button type="primary" @click="handleSubmit">
116 |       {{ $t('apply') }}
117 |     </n-button>
118 |   </n-form>
119 | </template>
120 | 
121 | <style></style>
122 | 


--------------------------------------------------------------------------------
/src/components/RightSider/Sider.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { useStore } from 'vuex'
  3 | import { computed } from 'vue'
  4 | import FormConfig from './components/FormConfig/FormConfig.vue'
  5 | import InputFormItemConfig from './components/FormItemConfig/InputFormItemConfig.vue'
  6 | import CheckBoxFormItemConfig from './components/FormItemConfig/CheckBoxFormItemConfig.vue'
  7 | import ColorPickerFormItemConfig from './components/FormItemConfig/ColorPickerFormItemConfig.vue'
  8 | import RadioFormItemConfig from './components/FormItemConfig/RadioFormItemConfig.vue'
  9 | import RateFormItemConfig from './components/FormItemConfig/RateFormItemConfig.vue'
 10 | import SelectFormItemConfig from './components/FormItemConfig/SelectFormItemConfig.vue'
 11 | import SliderFormItemConfig from './components/FormItemConfig/SliderFormItemConfig.vue'
 12 | import SwitchFormItemConfig from './components/FormItemConfig/SwitchFormItemConfig.vue'
 13 | import TimePickerFormItemConfig from './components/FormItemConfig/TimePickerFormItemConfig.vue'
 14 | import DatePickerFormItemConfig from './components/FormItemConfig/DatePickerFormItemConfig.vue'
 15 | import TreeSelectFormItemConfig from './components/FormItemConfig/TreeSelectFormItemConfig.vue'
 16 | import UploadFormItemConfig from './components/FormItemConfig/UploadFormItemConfig.vue'
 17 | import InputNumberFormItemConfig from './components/FormItemConfig/InputNumberFormItemConfig.vue'
 18 | import DividerConfig from './components/FormItemConfig/DividerConfig.vue'
 19 | 
 20 | const store = useStore()
 21 | const selectedFormItemType = computed(() => {
 22 |   return store.state.selectedFormItemType
 23 | })
 24 | const selectedFormItem = computed(() => {
 25 |   return store.state.selectedFormItem
 26 | })
 27 | const formItemArrayLength = computed(() => {
 28 |   return store.getters.formItemArrayLength
 29 | })
 30 | const handleAddClick = () => {
 31 |   store.commit('addAndSelect', {
 32 |     value: '0',
 33 |   })
 34 | }
 35 | const showComponent = computed(() => {
 36 |   switch (selectedFormItemType.value) {
 37 |     case '0':
 38 |       return InputFormItemConfig
 39 |     case '1':
 40 |       return InputNumberFormItemConfig
 41 |     case '2':
 42 |       return RadioFormItemConfig
 43 |     case '3':
 44 |       return RateFormItemConfig
 45 |     case '4':
 46 |       return SelectFormItemConfig
 47 |     case '5':
 48 |       return SliderFormItemConfig
 49 |     case '6':
 50 |       return SwitchFormItemConfig
 51 |     case '7':
 52 |       return TimePickerFormItemConfig
 53 |     case '8':
 54 |       return TreeSelectFormItemConfig
 55 |     case '9':
 56 |       return UploadFormItemConfig
 57 |     case '10':
 58 |       return ColorPickerFormItemConfig
 59 |     case '11':
 60 |       return CheckBoxFormItemConfig
 61 |     case '12':
 62 |       return DatePickerFormItemConfig
 63 |     case '13':
 64 |       return DividerConfig
 65 |     default:
 66 |       return ''
 67 |   }
 68 | })
 69 | 
 70 | const tabsValue = computed(() => {
 71 |   return store.state.tabsValue
 72 | })
 73 | const handleTabsChange = (val: 'form' | 'formItem') => {
 74 |   store.commit('changeTabsValue', val)
 75 | }
 76 | </script>
 77 | 
 78 | <template>
 79 |   <n-divider title-placement="left">
 80 |     {{ $t('setUp') }}
 81 |   </n-divider>
 82 |   <n-tabs type="segment" :value="tabsValue" @update:value="handleTabsChange">
 83 |     <n-tab-pane name="formItem" :tab="$t('formItemConfiguration')">
 84 |       <n-empty
 85 |         v-if="formItemArrayLength === 0 || selectedFormItemType === ''"
 86 |         :description="$t('addFormItem')"
 87 |       >
 88 |         <template #extra>
 89 |           <n-button @click="handleAddClick">
 90 |             {{ $t('addFormItemAndSelect') }}
 91 |           </n-button>
 92 |         </template>
 93 |       </n-empty>
 94 |       <component :is="showComponent" v-else :key="selectedFormItem" />
 95 |     </n-tab-pane>
 96 |     <n-tab-pane name="form" :tab="$t('formConfiguration')">
 97 |       <FormConfig />
 98 |     </n-tab-pane>
 99 |   </n-tabs>
100 | </template>
101 | 
102 | <style></style>
103 | 


--------------------------------------------------------------------------------
/src/components/Layout/Layout.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useStore } from 'vuex'
  3 | import { ref } from 'vue'
  4 | import { FolderOutlined, SettingOutlined } from '@vicons/antd'
  5 | import LeftSider from '../LeftSider/Sider.vue'
  6 | import RightSider from '../RightSider/Sider.vue'
  7 | import Content from '../Content/Content.vue'
  8 | import { copy, generateCode } from '../../utils'
  9 | import type { State } from '../../store'
 10 | import SetGenerateCodeModal from './components/SetGenerateCodeModal/SetGenerateCodeModal.vue'
 11 | 
 12 | defineProps<{ isDark: boolean; isEnglish: boolean }>()
 13 | defineEmits(['changeTheme', 'changeLocale'])
 14 | const store = useStore<State>()
 15 | const modalCode = ref<string>('')
 16 | const showModal = ref<boolean>(false)
 17 | const handleOpenGithub = () => {
 18 |   window.open('https://github.com/doom-9/naive-create-form', '_blank')
 19 | }
 20 | const handleGenerateCode = () => {
 21 |   modalCode.value = generateCode(store.state.formItemArray)
 22 |   showModal.value = true
 23 | }
 24 | const submitCallback = () => {
 25 |   copy(modalCode.value)
 26 |   window.$message.success('Success')
 27 | }
 28 | const cancelCallback = () => {
 29 |   showModal.value = false
 30 | }
 31 | const SetGenerateCodeModalRef = ref<null | {
 32 |   handleShowModal: () => void
 33 | }>(null)
 34 | const handleGenerateCodeSet = () => {
 35 |   if (SetGenerateCodeModalRef.value)
 36 |     SetGenerateCodeModalRef.value.handleShowModal()
 37 | }
 38 | </script>
 39 | 
 40 | <template>
 41 |   <div style="height: 100vh; position: relative">
 42 |     <n-layout position="absolute">
 43 |       <n-layout-header
 44 |         style="
 45 |           height: 64px;
 46 |           padding: 10px;
 47 |           display: flex;
 48 |           justify-content: space-between;
 49 |           align-items: center;
 50 |         "
 51 |         bordered
 52 |       >
 53 |         <n-gradient-text type="success" :size="35">
 54 |           naive-ui-form-creator
 55 |         </n-gradient-text>
 56 |         <n-space>
 57 |           <n-button
 58 |             type="primary"
 59 |             strong
 60 |             secondary
 61 |             round
 62 |             size="medium"
 63 |             @click="handleGenerateCodeSet"
 64 |           >
 65 |             {{ $t('generateCodeSettings') }}
 66 |             <n-icon size="20">
 67 |               <SettingOutlined />
 68 |             </n-icon>
 69 |           </n-button>
 70 |           <n-button type="primary" strong secondary round size="medium" @click="handleGenerateCode">
 71 |             {{ $t('generateComponentCode') }}
 72 |             <n-icon size="20">
 73 |               <FolderOutlined />
 74 |             </n-icon>
 75 |           </n-button>
 76 |           <n-button strong quaternary round @click="$emit('changeTheme')">
 77 |             {{ $props.isDark ? $t('light') : $t('dark') }}
 78 |           </n-button>
 79 |           <n-button strong quaternary round @click="$emit('changeLocale')">
 80 |             {{ $props.isEnglish ? '中文' : 'English' }}
 81 |           </n-button>
 82 |           <n-button strong quaternary round @click="handleOpenGithub">
 83 |             Github
 84 |           </n-button>
 85 |         </n-space>
 86 |       </n-layout-header>
 87 |       <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px">
 88 |         <n-layout-sider bordered content-style="padding: 24px;" width="200">
 89 |           <LeftSider />
 90 |         </n-layout-sider>
 91 |         <n-layout content-style="padding: 24px;">
 92 |           <Content />
 93 |         </n-layout>
 94 |         <n-layout-sider
 95 |           bordered
 96 |           content-style="padding: 24px;border-left: 1px solid var(--border-color)"
 97 |           width="400"
 98 |         >
 99 |           <RightSider />
100 |         </n-layout-sider>
101 |       </n-layout>
102 |       <n-layout-footer bordered position="absolute" style="height: 64px; padding: 24px">
103 |         {{ $t('tip') }}
104 |       </n-layout-footer>
105 |     </n-layout>
106 |     <n-modal
107 |       v-model:show="showModal"
108 |       preset="dialog"
109 |       :title="$t('preview')"
110 |       :positive-text="$t('copy')"
111 |       :negative-text="$t('redo')"
112 |       @positive-click="submitCallback"
113 |       @negative-click="cancelCallback"
114 |     >
115 |       <n-code :code="modalCode" language="javascript" />
116 |     </n-modal>
117 |     <SetGenerateCodeModal ref="SetGenerateCodeModalRef" />
118 |   </div>
119 | </template>
120 | 
121 | <style scoped></style>
122 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/DatePickerFormItemConfig.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useConfig } from '../../../../utils/hook/useConfig'
  3 | import { ruleOptions } from '../../../../const/const'
  4 | 
  5 | const formValue = useConfig({})
  6 | </script>
  7 | 
  8 | <template>
  9 |   <n-form>
 10 |     <n-form-item :label="$t('id')">
 11 |       <n-input v-model:value="formValue.name" type="text" />
 12 |     </n-form-item>
 13 |     <n-form-item :label="$t('name')">
 14 |       <n-input v-model:value="formValue.label" type="text" />
 15 |     </n-form-item>
 16 |     <n-form-item :label="$t('rules')">
 17 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
 18 |     </n-form-item>
 19 |     <n-form-item :label="$t('type')">
 20 |       <n-radio-group v-model:value="formValue.type">
 21 |         <n-space>
 22 |           <n-radio :key="0" value="date">
 23 |             date
 24 |           </n-radio>
 25 |           <n-radio :key="1" value="datetime">
 26 |             datetime
 27 |           </n-radio>
 28 |           <n-radio :key="2" value="daterange">
 29 |             daterange
 30 |           </n-radio>
 31 |           <n-radio :key="3" value="datetimerange">
 32 |             datetimerange
 33 |           </n-radio>
 34 |           <n-radio :key="4" value="month">
 35 |             month
 36 |           </n-radio>
 37 |           <n-radio :key="5" value="year">
 38 |             year
 39 |           </n-radio>
 40 |         </n-space>
 41 |       </n-radio-group>
 42 |     </n-form-item>
 43 |     <n-form-item :label="$t('format')">
 44 |       <n-input v-model:value="formValue.format" type="text" />
 45 |     </n-form-item>
 46 |     <n-form-item :label="$t('actions')">
 47 |       <n-select
 48 |         v-model:value="formValue.actions"
 49 |         multiple
 50 |         :options="
 51 |           formValue.type === 'date' || formValue.type === 'year'
 52 |             ? [
 53 |               {
 54 |                 label: 'now',
 55 |                 value: 'now',
 56 |               },
 57 |               {
 58 |                 label: 'clear',
 59 |                 value: 'clear',
 60 |               },
 61 |             ]
 62 |             : formValue.type === 'datetime' || formValue.type === 'month'
 63 |               ? [
 64 |                 {
 65 |                   label: 'now',
 66 |                   value: 'now',
 67 |                 },
 68 |                 {
 69 |                   label: 'confirm',
 70 |                   value: 'confirm',
 71 |                 },
 72 |                 {
 73 |                   label: 'clear',
 74 |                   value: 'clear',
 75 |                 },
 76 |               ]
 77 |               : formValue.type === 'daterange' || formValue.type === 'datetimerange'
 78 |                 ? [
 79 |                   {
 80 |                     label: 'clear',
 81 |                     value: 'clear',
 82 |                   },
 83 |                   {
 84 |                     label: 'confirm',
 85 |                     value: 'confirm',
 86 |                   },
 87 |                 ]
 88 |                 : []
 89 |         "
 90 |       />
 91 |     </n-form-item>
 92 |     <n-form-item :label="$t('clearable')">
 93 |       <n-radio-group v-model:value="formValue.clearable">
 94 |         <n-space>
 95 |           <n-radio :key="0" :value="true">
 96 |             {{ $t('yes') }}
 97 |           </n-radio>
 98 |           <n-radio :key="1" :value="false">
 99 |             {{ $t('no') }}
100 |           </n-radio>
101 |         </n-space>
102 |       </n-radio-group>
103 |     </n-form-item>
104 |     <n-form-item :label="$t('size')">
105 |       <n-radio-group v-model:value="formValue.size">
106 |         <n-space>
107 |           <n-radio :key="0" value="small">
108 |             small
109 |           </n-radio>
110 |           <n-radio :key="1" value="medium">
111 |             medium
112 |           </n-radio>
113 |           <n-radio :key="2" value="large">
114 |             large
115 |           </n-radio>
116 |         </n-space>
117 |       </n-radio-group>
118 |     </n-form-item>
119 | 
120 |     <n-form-item v-if="formValue.type.includes('range')" :label="$t('startPlaceholder')">
121 |       <n-input v-model:value="formValue.startPlaceholder" type="text" />
122 |     </n-form-item>
123 |     <n-form-item v-if="formValue.type.includes('range')" :label="$t('endPlaceholder')">
124 |       <n-input v-model:value="formValue.endPlaceholder" type="text" />
125 |     </n-form-item>
126 |     <n-form-item v-if="formValue.type.includes('range')" :label="$t('separator')">
127 |       <n-input v-model:value="formValue.separator" type="text" />
128 |     </n-form-item>
129 |     <n-form-item v-else :label="$t('placeholder')">
130 |       <n-input v-model:value="formValue.placeholder" type="text" />
131 |     </n-form-item>
132 |   </n-form>
133 | </template>
134 | 
135 | <style></style>
136 | 


--------------------------------------------------------------------------------
/src/components/Content/components/Drop.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { onMounted, onUnmounted, ref } from 'vue'
  3 | import { useStore } from 'vuex'
  4 | import { getParentElement } from '../../../utils/index'
  5 | 
  6 | const margin = 15
  7 | const store = useStore()
  8 | const dragId = ref<string | null>(null)
  9 | const dropId = ref<string | null>(null)
 10 | const dropContainerElement = ref<HTMLDivElement | null>(null)
 11 | const dragElement = ref<HTMLElement | null>(null)
 12 | const dropElement = ref<HTMLElement | null>(null)
 13 | const initDragElementDataIndex = ref<number>(0)
 14 | 
 15 | const config = { childList: true }
 16 | const callback = function (mutationsList: any) {
 17 |   for (const mutation of mutationsList) {
 18 |     if (mutation.type === 'childList') {
 19 |       if (dropContainerElement.value) {
 20 |         const children = Array.from(dropContainerElement.value.children)
 21 |         children.forEach((child, index) => {
 22 |           child.setAttribute('data-index', index.toString())
 23 |           child.setAttribute('data-dropenter', 'false')
 24 |         })
 25 |       }
 26 |     }
 27 |   }
 28 | }
 29 | const observer = new MutationObserver(callback)
 30 | onMounted(() => {
 31 |   if (dropContainerElement.value)
 32 |     observer.observe(dropContainerElement.value, config)
 33 | })
 34 | onUnmounted(() => {
 35 |   observer.disconnect()
 36 | })
 37 | 
 38 | const handleTranslate = () => {
 39 |   if (
 40 |     dropContainerElement.value !== null
 41 |     && dragElement.value !== null
 42 |     && dropElement.value !== null
 43 |   ) {
 44 |     const { value: dropElementValue } = dropElement
 45 |     const { value: dragElementValue } = dragElement
 46 |     // 进入drop元素
 47 |     dropElementValue.setAttribute('data-dropenter', 'true')
 48 |     const dropDataIndex = Number(dropElementValue.getAttribute('data-index'))
 49 |     const dragDataIndex = Number(dragElementValue.getAttribute('data-index'))
 50 |     const downStr = `translateY(${dragElementValue.clientHeight + margin}px)`
 51 |     const upStr = `translateY(-${dragElementValue.clientHeight + margin}px)`
 52 | 
 53 |     // 往下拖动
 54 |     if (dropDataIndex > dragDataIndex) {
 55 |       const transformStr = (dropElementValue as HTMLDivElement).style.transform
 56 | 
 57 |       if (transformStr === downStr)
 58 |         (dropElementValue as HTMLDivElement).style.transform = 'translateY(0px)'
 59 | 
 60 |       else
 61 |         (dropElementValue as HTMLDivElement).style.transform = upStr
 62 |     }
 63 | 
 64 |     // 往上拖动
 65 |     if (dropDataIndex < dragDataIndex) {
 66 |       const transformStr = (dropElementValue as HTMLDivElement).style.transform
 67 | 
 68 |       if (transformStr === upStr)
 69 |         (dropElementValue as HTMLDivElement).style.transform = 'translateY(0px)'
 70 | 
 71 |       else
 72 |         (dropElementValue as HTMLDivElement).style.transform = downStr
 73 |     }
 74 | 
 75 |     if (dragElementValue !== null) {
 76 |       dragElementValue.setAttribute('data-index', `${dropDataIndex}`)
 77 |       dropElementValue.setAttribute('data-index', `${dragDataIndex}`)
 78 |     }
 79 | 
 80 |     // 动画执行期间不希望执行拖动事件
 81 |     setTimeout(() => {
 82 |       dropElementValue.setAttribute('data-dropenter', 'false')
 83 |     }, 100)
 84 |   }
 85 | }
 86 | 
 87 | const handleDragOver = (e: DragEvent) => {
 88 |   const ele = getParentElement(e.target as HTMLElement)
 89 |   if (ele !== null) {
 90 |     dropElement.value = ele
 91 |     dropId.value = ele.id
 92 | 
 93 |     const isDropEnter = dropElement.value.dataset.dropenter === 'true'
 94 |     if (dropId.value !== dragId.value && !isDropEnter)
 95 |       handleTranslate()
 96 |   }
 97 | }
 98 | const handleDragStart = (e: DragEvent) => {
 99 |   e.dataTransfer!.effectAllowed = 'move'
100 |   const ele = getParentElement(e.target as HTMLElement)
101 |   if (ele !== null) {
102 |     dragId.value = ele.id
103 |     dragElement.value = ele
104 |     dragElement.value!.style.visibility = 'hidden'
105 |     initDragElementDataIndex.value = Number(dragElement.value.getAttribute('data-index'))
106 |   }
107 | }
108 | 
109 | const handleDragEnd = () => {
110 |   if (dragId.value !== null && dropId.value !== null && dragElement.value !== null) {
111 |     dragElement.value!.style.visibility = 'visible'
112 |     const nowDragDataIndex = Number(dragElement.value.getAttribute('data-index'))
113 |     if (nowDragDataIndex === initDragElementDataIndex.value)
114 |       return
115 | 
116 |     store.commit('insertDrop', {
117 |       from: initDragElementDataIndex.value,
118 |       to: nowDragDataIndex,
119 |     })
120 | 
121 |     dragId.value = null
122 |     dropId.value = null
123 |     dragElement.value = null
124 |     dropElement.value = null
125 |   }
126 | }
127 | </script>
128 | 
129 | <template>
130 |   <div
131 |     ref="dropContainerElement"
132 |     @dragover.prevent="handleDragOver"
133 |     @dragstart="handleDragStart"
134 |     @dragend="handleDragEnd"
135 |   >
136 |     <slot />
137 |   </div>
138 | </template>
139 | 
140 | <style scoped></style>
141 | 


--------------------------------------------------------------------------------
/src/const/const.ts:
--------------------------------------------------------------------------------
  1 | import type { State } from '../store'
  2 | 
  3 | type selectItem = Array<{
  4 |   value: string
  5 |   formItemConfig: {
  6 |     [key: string]: any
  7 |   }
  8 | }>
  9 | 
 10 | export const options: selectItem = [
 11 |   {
 12 |     value: '0',
 13 |     formItemConfig: {
 14 |       label: 'input',
 15 |       name: undefined,
 16 |       rules: [],
 17 |       clearable: false,
 18 |       maxlength: undefined,
 19 |       minlength: undefined,
 20 |       type: 'text',
 21 |       size: 'medium',
 22 |     },
 23 |   },
 24 |   {
 25 |     value: '1',
 26 |     formItemConfig: {
 27 |       label: 'inputNumber',
 28 |       name: undefined,
 29 |       rules: [],
 30 |       clearable: false,
 31 |       max: undefined,
 32 |       min: undefined,
 33 |       type: 'text',
 34 |       size: 'medium',
 35 |       step: 1,
 36 |       showButton: true,
 37 |     },
 38 |   },
 39 |   {
 40 |     value: '2',
 41 |     formItemConfig: {
 42 |       label: 'radio',
 43 |       name: undefined,
 44 |       rules: [],
 45 |       size: 'medium',
 46 |       options: [],
 47 |     },
 48 |   },
 49 |   {
 50 |     value: '3',
 51 |     formItemConfig: {
 52 |       label: 'rate',
 53 |       name: undefined,
 54 |       rules: [],
 55 |       size: 'medium',
 56 |       count: 5,
 57 |       allowHalf: false,
 58 |     },
 59 |   },
 60 |   {
 61 |     value: '4',
 62 |     formItemConfig: {
 63 |       label: 'select',
 64 |       name: undefined,
 65 |       rules: [],
 66 |       size: 'medium',
 67 |       multiple: false,
 68 |       placeholder: '请选择',
 69 |       clearable: false,
 70 |       options: [],
 71 |     },
 72 |   },
 73 |   {
 74 |     value: '5',
 75 |     formItemConfig: {
 76 |       label: 'slider',
 77 |       name: undefined,
 78 |       rules: [],
 79 |       max: 100,
 80 |       min: 0,
 81 |       step: 1,
 82 |       range: false,
 83 |       reverse: false,
 84 |       vertical: false,
 85 |       tooltip: true,
 86 |     },
 87 |   },
 88 |   {
 89 |     value: '6',
 90 |     formItemConfig: {
 91 |       label: 'switch',
 92 |       name: undefined,
 93 |       rules: [],
 94 |       round: true,
 95 |       size: 'medium',
 96 |     },
 97 |   },
 98 |   {
 99 |     value: '7',
100 |     formItemConfig: {
101 |       label: 'timePicker',
102 |       name: undefined,
103 |       rules: [],
104 |       actions: [],
105 |       clearable: false,
106 |       format: 'HH:mm:ss',
107 |       size: 'medium',
108 |       placeholder: undefined,
109 |       use12Hours: false,
110 |     },
111 |   },
112 |   {
113 |     value: '12',
114 |     formItemConfig: {
115 |       label: 'datePicker',
116 |       name: undefined,
117 |       rules: [],
118 |       actions: [],
119 |       clearable: false,
120 |       format: '',
121 |       size: 'medium',
122 |       placeholder: undefined,
123 |       type: 'date',
124 |       startPlaceholder: undefined,
125 |       endPlaceholder: undefined,
126 |       separator: undefined,
127 |     },
128 |   },
129 |   {
130 |     value: '8',
131 |     formItemConfig: {
132 |       label: 'treeSelect',
133 |       name: undefined,
134 |       rules: [],
135 |       size: 'medium',
136 |       clearable: false,
137 |     },
138 |   },
139 |   {
140 |     value: '9',
141 |     formItemConfig: {
142 |       label: 'upload',
143 |       name: undefined,
144 |       rules: [],
145 |       accept: undefined,
146 |       action: undefined,
147 |       defaultUpload: true,
148 |       data: [],
149 |       headers: [],
150 |       listType: 'text',
151 |       max: undefined,
152 |       method: 'POST',
153 |       multiple: false,
154 |       fileName: 'file',
155 |       withCredentials: false,
156 |       showCancelButton: true,
157 |       showDownloadButton: false,
158 |       showRemoveButton: true,
159 |       showRetryButton: true,
160 |       showFileList: true,
161 |     },
162 |   },
163 |   {
164 |     value: '10',
165 |     formItemConfig: {
166 |       label: 'colorPicker',
167 |       name: undefined,
168 |       rules: [],
169 |       size: 'medium',
170 |       modes: [],
171 |       showAlpha: true,
172 |       actions: [],
173 |     },
174 |   },
175 |   {
176 |     value: '11',
177 |     formItemConfig: {
178 |       label: 'checkbox',
179 |       name: undefined,
180 |       rules: [],
181 |       max: undefined,
182 |       min: undefined,
183 |       options: [],
184 |     },
185 |   },
186 | ]
187 | 
188 | export const LayoutOptions: selectItem = [
189 |   {
190 |     value: '13',
191 |     formItemConfig: {
192 |       label: 'divider',
193 |       name: 'divider',
194 |       dashed: false,
195 |       vertical: false,
196 |       titlePlacement: 'center',
197 |     },
198 |   },
199 | ]
200 | 
201 | export const initialFormState: State['formConfig'] = {
202 |   labelPlacement: 'left',
203 |   labelWidth: '80',
204 |   labelAlign: 'left',
205 |   showRequireMark: false,
206 |   size: 'medium',
207 |   inline: false,
208 |   showFeedback: true,
209 |   showLabel: true,
210 |   requireMarkPlacement: 'right',
211 |   model: 'formValue',
212 | }
213 | 
214 | export const UI_NAME = 'naive-ui'
215 | export const PREFIX = 'n'
216 | 
217 | export const getItemConfig = (
218 |   value: string,
219 | ): {
220 |   [key: string]: any
221 | } => {
222 |   const mergeOptions = [...options, ...LayoutOptions]
223 |   const config = mergeOptions.find(item => item.value === value)
224 |   if (config !== undefined)
225 |     return config.formItemConfig
226 | 
227 |   return {}
228 | }
229 | 
230 | export const ruleOptions: Array<{
231 |   value: string
232 |   label: string
233 | }> = [
234 |   {
235 |     label: 'Required verification',
236 |     value: '0',
237 |   },
238 |   {
239 |     label: 'Mobile phone number verification',
240 |     value: '1',
241 |   },
242 |   {
243 |     label: 'ID card verification',
244 |     value: '2',
245 |   },
246 | ]
247 | 


--------------------------------------------------------------------------------
/src/utils/i18n/const.ts:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   zh: {
  3 |     input: '文本输入',
  4 |     inputNumber: '数字输入',
  5 |     radio: '单选',
  6 |     rate: '评分',
  7 |     select: '选择器',
  8 |     slider: '滑动选择',
  9 |     switch: '开关',
 10 |     timePicker: '时间选择器',
 11 |     datePicker: '日期选择器',
 12 |     treeSelect: '树形选择',
 13 |     upload: '上传',
 14 |     colorPicker: '颜色选择器',
 15 |     checkbox: '复选框',
 16 |     divider: '分割线',
 17 |     formComponent: '表单组件',
 18 |     layoutComponent: '布局组件',
 19 |     dark: '暗色',
 20 |     light: '亮色',
 21 |     preview: '预览',
 22 |     generateCodeSettings: '生成代码设置',
 23 |     generateComponentCode: '生成组件代码',
 24 |     tip: '使用过程中如果遇到问题或者 bug，欢迎提交 issue。',
 25 |     setUp: '设置',
 26 |     formItemConfiguration: '表单项配置',
 27 |     formConfiguration: '表单配置',
 28 |     add: '试着添加一个',
 29 |     addFormItem: '从左侧添加表单项',
 30 |     addFormItemAndSelect: '试着添加一个并且选中它',
 31 |     model: '收集到的值的对象标识',
 32 |     size: '尺寸',
 33 |     inline: '行内',
 34 |     labelPlacement: '标签位置',
 35 |     labelWidth: '标签宽度',
 36 |     labelAlign: '标签对齐',
 37 |     showFeedback: '显示反馈',
 38 |     showLabel: '显示标签',
 39 |     showRequireMark: '显示必填标记',
 40 |     requireMarkPlacement: '必填标记位置',
 41 |     reset: '重置',
 42 |     id: '标识',
 43 |     name: '名称',
 44 |     rules: '校验规则',
 45 |     maxSelect: '可被勾选的 checkbox 的最大数量',
 46 |     minSelect: '可被勾选的 checkbox 的最小数量',
 47 |     addOptions: '添加选项',
 48 |     apply: '应用',
 49 |     showAlpha: '显示透明度',
 50 |     modes: '模式',
 51 |     actions: '操作',
 52 |     type: '类型',
 53 |     format: '格式',
 54 |     clearable: '可清空',
 55 |     startPlaceholder: '开始时的占位符',
 56 |     endPlaceholder: '结束时的占位符',
 57 |     separator: '分隔符',
 58 |     placeholder: '占位符',
 59 |     maxlength: '最大长度',
 60 |     minlength: '最小长度',
 61 |     max: '最大值',
 62 |     min: '最小值',
 63 |     step: '步长',
 64 |     showButton: '显示按钮',
 65 |     count: '数量',
 66 |     allowHalf: '允许半选',
 67 |     multiple: '多选',
 68 |     range: '范围',
 69 |     reverse: '反向',
 70 |     vertical: '垂直',
 71 |     tooltip: '提示',
 72 |     round: '圆角',
 73 |     use12Hours: '12 小时制',
 74 |     accept: '接受文件类型',
 75 |     action: '请求提交的地址',
 76 |     uploadData: '需要附加的数据',
 77 |     headers: '请求头',
 78 |     defaultUpload: '默认上传',
 79 |     listType: '列表类型',
 80 |     uploadMax: '最大上传数量',
 81 |     method: '请求方法',
 82 |     fileName: '文件名',
 83 |     withCredentials: '携带cookie',
 84 |     showCancelButton: '显示取消按钮',
 85 |     showDownloadButton: '显示下载按钮',
 86 |     showRemoveButton: '显示移除按钮',
 87 |     showRetryButton: '显示重试按钮',
 88 |     showFileList: '显示文件列表',
 89 |     dashed: '虚线',
 90 |     titlePlacement: '标题位置',
 91 |     yes: '是',
 92 |     no: '否',
 93 |     import: '自动添加import',
 94 |     confirmAndCancelBtn: '确认和取消按钮',
 95 |     confirm: '确认',
 96 |     cancel: '取消',
 97 |     modalTitle: '选项',
 98 |     copy: '复制',
 99 |     redo: '重做',
100 |   },
101 |   en: {
102 |     input: 'Input',
103 |     inputNumber: 'InputNumber',
104 |     radio: 'Radio',
105 |     rate: 'Rate',
106 |     select: 'Select',
107 |     slider: 'Slider',
108 |     switch: 'Switch',
109 |     timePicker: 'TimePicker',
110 |     datePicker: 'DatePicker',
111 |     treeSelect: 'TreeSelect',
112 |     upload: 'Upload',
113 |     colorPicker: 'ColorPicker',
114 |     checkbox: 'Checkbox',
115 |     divider: 'Divider',
116 |     formComponent: 'Form Component',
117 |     layoutComponent: 'Layout Component',
118 |     dark: 'Dark',
119 |     light: 'Light',
120 |     preview: 'Preview',
121 |     generateCodeSettings: 'Generate Code Settings',
122 |     generateComponentCode: 'Generate Component Code',
123 |     tip: 'If you encounter problems or bugs during use, you are welcome to submit issue.',
124 |     setUp: 'Set Up',
125 |     formItemConfiguration: 'Form Item Configuration',
126 |     formConfiguration: 'Form Configuration',
127 |     add: 'Try adding one',
128 |     addFormItem: 'Add form items from left',
129 |     addFormItemAndSelect: 'Try adding one and select it',
130 |     model: 'Model',
131 |     size: 'Size',
132 |     inline: 'Inline',
133 |     labelPlacement: 'Label Placement',
134 |     labelWidth: 'Label Width',
135 |     labelAlign: 'Label Align',
136 |     showFeedback: 'Show Feedback',
137 |     showLabel: 'Show Label',
138 |     showRequireMark: 'Show Require Mark',
139 |     requireMarkPlacement: 'Require Mark Placement',
140 |     reset: 'Reset',
141 |     id: 'ID',
142 |     name: 'Name',
143 |     rules: 'Rules',
144 |     maxSelect: 'Maximum number of checkboxes that can be checked',
145 |     minSelect: 'Minimum number of checkboxes that can be checked',
146 |     addOptions: 'Add Options',
147 |     apply: 'Apply',
148 |     showAlpha: 'Show Alpha',
149 |     modes: 'Modes',
150 |     actions: 'Actions',
151 |     type: 'Type',
152 |     format: 'Format',
153 |     clearable: 'Clearable',
154 |     startPlaceholder: 'Start Placeholder',
155 |     endPlaceholder: 'End Placeholder',
156 |     separator: 'Separator',
157 |     placeholder: 'Placeholder',
158 |     maxlength: 'Maximum Length',
159 |     minlength: 'Minimum Length',
160 |     max: 'Maximum',
161 |     min: 'Minimum',
162 |     step: 'Step',
163 |     showButton: 'Show Button',
164 |     count: 'Count',
165 |     allowHalf: 'Allow Half',
166 |     multiple: 'Multiple',
167 |     range: 'Range',
168 |     reverse: 'Reverse',
169 |     vertical: 'Vertical',
170 |     tooltip: 'Tooltip',
171 |     round: 'Round',
172 |     use12Hours: 'Use 12 Hours',
173 |     accept: 'Accept File Type',
174 |     action: 'Action',
175 |     uploadData: 'Upload Data',
176 |     headers: 'Headers',
177 |     defaultUpload: 'Default Upload',
178 |     listType: 'List Type',
179 |     uploadMax: 'Maximum Upload',
180 |     method: 'Method',
181 |     fileName: 'File Name',
182 |     withCredentials: 'With Credentials',
183 |     showCancelButton: 'Show Cancel Button',
184 |     showDownloadButton: 'Show Download Button',
185 |     showRemoveButton: 'Show Remove Button',
186 |     showRetryButton: 'Show Retry Button',
187 |     showFileList: 'Show File List',
188 |     dashed: 'Dashed',
189 |     titlePlacement: 'Title Placement',
190 |     yes: 'Yes',
191 |     no: 'No',
192 |     import: 'Auto add import',
193 |     confirmAndCancelBtn: 'Confirm and Cancel Button',
194 |     confirm: 'Confirm',
195 |     cancel: 'Cancel',
196 |     modalTitle: 'Options',
197 |     copy: 'Copy',
198 |     redo: 'Redo',
199 |   },
200 | }
201 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
  1 | import { createStore } from 'vuex'
  2 | import { v4 as uuidv4 } from 'uuid'
  3 | import { getItemConfig, initialFormState } from '../const/const'
  4 | 
  5 | export interface formItemType {
  6 |   value: string
  7 |   id: string
  8 |   formItemConfig: {
  9 |     [key: string]: any
 10 |   }
 11 | }
 12 | 
 13 | export interface State {
 14 |   formItemArray: formItemType[]
 15 |   selectedFormItem: string
 16 |   selectedFormItemType: string
 17 |   autoAddImport: boolean
 18 |   confirmAndCancelBtn: boolean
 19 |   formConfig: {
 20 |     labelPlacement: 'left' | 'top'
 21 |     labelWidth: string
 22 |     labelAlign: 'left' | 'right'
 23 |     size: 'small' | 'medium' | 'large'
 24 |     inline: boolean
 25 |     showFeedback: boolean
 26 |     showLabel: boolean
 27 |     showRequireMark: boolean
 28 |     requireMarkPlacement: 'left' | 'right'
 29 |     model: string | undefined
 30 |   }
 31 |   tabsValue: 'form' | 'formItem'
 32 |   local: string
 33 | }
 34 | 
 35 | export const store = createStore<State>({
 36 |   strict: true,
 37 |   state() {
 38 |     return {
 39 |       formItemArray: [],
 40 |       autoAddImport: false,
 41 |       confirmAndCancelBtn: false,
 42 |       formConfig: initialFormState,
 43 |       selectedFormItem: '',
 44 |       selectedFormItemType: '',
 45 |       tabsValue: 'formItem',
 46 |       local: 'zh',
 47 |     }
 48 |   },
 49 |   mutations: {
 50 |     add(state: State, payload: Omit<formItemType, 'id' | 'formItemConfig'>): void {
 51 |       const id = uuidv4()
 52 |       state.formItemArray.push({
 53 |         id,
 54 |         formItemConfig: getItemConfig(payload.value),
 55 |         ...payload,
 56 |       })
 57 |       window.$message.success(state.local === 'zh' ? '操作成功' : 'Success')
 58 |     },
 59 |     addAndSelect(state: State, payload: Omit<formItemType, 'id' | 'formItemConfig'>): void {
 60 |       const id = uuidv4()
 61 |       state.formItemArray.push({
 62 |         id,
 63 |         formItemConfig: getItemConfig(payload.value),
 64 |         ...payload,
 65 |       })
 66 |       store.commit('changeSelectedFormItem', id)
 67 |       window.$message.success(state.local === 'zh' ? '操作成功' : 'Success')
 68 |     },
 69 |     remove(state: State, payload: string): void {
 70 |       state.formItemArray.splice(
 71 |         state.formItemArray.findIndex(item => item.id === payload),
 72 |         1,
 73 |       )
 74 |       window.$message.success(state.local === 'zh' ? '操作成功' : 'Success')
 75 |     },
 76 |     clear(state: State): void {
 77 |       state.formItemArray = []
 78 |     },
 79 |     copy(state: State, payload: string): void {
 80 |       const index = state.formItemArray.findIndex(item => item.id === payload)
 81 |       if (index !== -1) {
 82 |         const newItem = { ...state.formItemArray[index] }
 83 |         newItem.id = uuidv4()
 84 |         state.formItemArray.splice(index + 1, 0, newItem)
 85 |       }
 86 |       window.$message.success(state.local === 'zh' ? '操作成功' : 'Success')
 87 |     },
 88 |     up(state: State, payload: string) {
 89 |       const index = state.formItemArray.findIndex(item => item.id === payload)
 90 |       if (index > 0) {
 91 |         const item = state.formItemArray[index]
 92 |         state.formItemArray.splice(index, 1)
 93 |         state.formItemArray.splice(index - 1, 0, item)
 94 |       }
 95 |       else {
 96 |         window.$message.warning(state.local === 'zh' ? '已经是第一个了' : 'Already the first')
 97 |       }
 98 |     },
 99 |     down(state: State, payload: string) {
100 |       const index = state.formItemArray.findIndex(item => item.id === payload)
101 |       if (index < state.formItemArray.length - 1) {
102 |         const item = state.formItemArray[index]
103 |         state.formItemArray.splice(index, 1)
104 |         state.formItemArray.splice(index + 1, 0, item)
105 |       }
106 |       else {
107 |         window.$message.warning(state.local === 'zh' ? '已经是最后一个了' : 'Already the last')
108 |       }
109 |     },
110 |     exchange(state: State, payload: { id1: string; id2: string }) {
111 |       const index1 = state.formItemArray.findIndex(item => item.id === payload.id1)
112 |       const index2 = state.formItemArray.findIndex(item => item.id === payload.id2)
113 |       if (index1 !== -1 && index2 !== -1) {
114 |         const item1 = state.formItemArray[index1]
115 |         const item2 = state.formItemArray[index2]
116 |         state.formItemArray.splice(index1, 1, item2)
117 |         state.formItemArray.splice(index2, 1, item1)
118 |       }
119 |     },
120 |     insertDrop(state: State, payload: { from: number; to: number }) {
121 |       if (payload.from !== -1 && payload.to !== -1) {
122 |         if (payload.from < payload.to) {
123 |           const item1 = state.formItemArray[payload.from]
124 |           state.formItemArray.splice(payload.from, 1)
125 |           state.formItemArray.splice(payload.to, 0, item1)
126 |         }
127 |         if (payload.from > payload.to) {
128 |           const item1 = state.formItemArray[payload.from]
129 |           state.formItemArray.splice(payload.from, 1)
130 |           state.formItemArray.splice(payload.to, 0, item1)
131 |         }
132 | 
133 |         // dom diff
134 |         state.formItemArray = state.formItemArray.map((item) => {
135 |           item.id = uuidv4()
136 |           return item
137 |         })
138 |       }
139 |     },
140 |     changeAutoAddImport(state: State, payload: boolean) {
141 |       state.autoAddImport = payload
142 |       window.$message.success(state.local === 'zh' ? '操作成功' : 'Success')
143 |     },
144 |     changeFormConfig(state: State, payload: Partial<State['formConfig']>) {
145 |       state.formConfig = {
146 |         ...state.formConfig,
147 |         ...payload,
148 |       }
149 |       window.$message.success(state.local === 'zh' ? '操作成功' : 'Success')
150 |     },
151 |     changeSelectedFormItem(state: State, payload: string) {
152 |       state.selectedFormItem = payload
153 |       const index = state.formItemArray.findIndex(item => item.id === payload)
154 |       if (index !== -1)
155 |         state.selectedFormItemType = state.formItemArray[index].value
156 |     },
157 |     changeSelectedFormItemConfig(state: State, payload: formItemType['formItemConfig']) {
158 |       const index = state.formItemArray.findIndex(item => item.id === state.selectedFormItem)
159 |       if (index !== -1) {
160 |         state.formItemArray[index].formItemConfig = {
161 |           ...state.formItemArray[index].formItemConfig,
162 |           ...payload,
163 |         }
164 |       }
165 |       else {
166 |         window.$message.warning(
167 |           state.local === 'zh' ? '请先选择一个表单项' : 'Please select a form item',
168 |         )
169 |       }
170 |     },
171 |     changeTabsValue(state: State, payload: State['tabsValue']) {
172 |       state.tabsValue = payload
173 |     },
174 |     changeConfirmAndCancelBtn(state: State, payload: boolean) {
175 |       state.confirmAndCancelBtn = payload
176 |     },
177 |     changeLocal(state: State, payload: State['local']) {
178 |       state.local = payload
179 |     },
180 |   },
181 |   getters: {
182 |     formItemArrayLength(state) {
183 |       return state.formItemArray.length
184 |     },
185 |     formItemConfig(state) {
186 |       return state.formItemArray.find(item => item.id === state.selectedFormItem)?.formItemConfig
187 |     },
188 |     selectedFormItem(state) {
189 |       const index = state.formItemArray.findIndex(item => item.id === state.selectedFormItem)
190 |       if (index !== -1)
191 |         return state.formItemArray[index]
192 | 
193 |       return null
194 |     },
195 |   },
196 | })
197 | 


--------------------------------------------------------------------------------
/src/components/RightSider/components/FormItemConfig/UploadFormItemConfig.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useStore } from 'vuex'
  3 | import { useConfig } from '../../../../utils/hook/useConfig'
  4 | import { ruleOptions } from '../../../../const/const'
  5 | 
  6 | const formValue = useConfig<{
  7 |   label: string | undefined
  8 |   name: string | undefined
  9 |   accept: string | undefined
 10 |   action: string | undefined
 11 |   defaultUpload: boolean
 12 |   data: Array<{
 13 |     key: string
 14 |     value: string
 15 |   }>
 16 |   headers: Array<{
 17 |     key: string
 18 |     value: string
 19 |   }>
 20 |   listType: 'text' | 'image' | 'image-card'
 21 |   max: number | undefined
 22 |   method: string
 23 |   multiple: boolean
 24 |   fileName: string
 25 |   withCredentials: boolean
 26 |   showCancelButton: boolean
 27 |   showDownloadButton: boolean
 28 |   showRemoveButton: boolean
 29 |   showRetryButton: boolean
 30 |   showFileList: boolean
 31 |   rules: Array<string>
 32 | }>({
 33 |   sync: false,
 34 | })
 35 | 
 36 | const onCreate = () => {
 37 |   return {
 38 |     key: '',
 39 |     value: '',
 40 |   }
 41 | }
 42 | const store = useStore()
 43 | const handleSubmit = () => {
 44 |   store.commit('changeSelectedFormItemConfig', formValue.value)
 45 | }
 46 | </script>
 47 | 
 48 | <template>
 49 |   <n-form>
 50 |     <n-form-item :label="$t('id')">
 51 |       <n-input v-model:value="formValue.name" type="text" />
 52 |     </n-form-item>
 53 |     <n-form-item :label="$t('name')">
 54 |       <n-input v-model:value="formValue.label" type="text" />
 55 |     </n-form-item>
 56 |     <n-form-item :label="$t('rules')">
 57 |       <n-select v-model:value="formValue.rules" multiple :options="ruleOptions" />
 58 |     </n-form-item>
 59 |     <n-form-item :label="$t('accept')">
 60 |       <n-input v-model:value="formValue.accept" type="text" />
 61 |     </n-form-item>
 62 |     <n-form-item :label="$t('action')">
 63 |       <n-input v-model:value="formValue.action" type="text" />
 64 |     </n-form-item>
 65 |     <n-form-item :label="$t('uploadData')">
 66 |       <n-dynamic-input
 67 |         v-slot="{ index }"
 68 |         v-model:value="formValue.data"
 69 |         item-style="margin-bottom: 0;"
 70 |         :on-create="onCreate"
 71 |       >
 72 |         <div style="display: flex">
 73 |           <n-form-item :show-label="false">
 74 |             <n-input
 75 |               v-model:value="formValue.data[index].key"
 76 |               placeholder="Key"
 77 |               @keydown.enter.prevent
 78 |             />
 79 |           </n-form-item>
 80 |           <div style="height: 34px; line-height: 34px; margin: 0 8px">
 81 |             -
 82 |           </div>
 83 |           <n-form-item :show-label="false">
 84 |             <n-input
 85 |               v-model:value="formValue.data[index].value"
 86 |               placeholder="Value"
 87 |               @keydown.enter.prevent
 88 |             />
 89 |           </n-form-item>
 90 |         </div>
 91 |       </n-dynamic-input>
 92 |     </n-form-item>
 93 |     <n-form-item :label="$t('headers')">
 94 |       <n-dynamic-input
 95 |         v-slot="{ index }"
 96 |         v-model:value="formValue.headers"
 97 |         item-style="margin-bottom: 0;"
 98 |         :on-create="onCreate"
 99 |       >
100 |         <div style="display: flex">
101 |           <n-form-item :show-label="false">
102 |             <n-input
103 |               v-model:value="formValue.headers[index].key"
104 |               placeholder="Key"
105 |               @keydown.enter.prevent
106 |             />
107 |           </n-form-item>
108 |           <div style="height: 34px; line-height: 34px; margin: 0 8px">
109 |             -
110 |           </div>
111 |           <n-form-item :show-label="false">
112 |             <n-input
113 |               v-model:value="formValue.headers[index].value"
114 |               placeholder="Value"
115 |               @keydown.enter.prevent
116 |             />
117 |           </n-form-item>
118 |         </div>
119 |       </n-dynamic-input>
120 |     </n-form-item>
121 |     <n-form-item :label="$t('defaultUpload')">
122 |       <n-radio-group v-model:value="formValue.defaultUpload">
123 |         <n-space>
124 |           <n-radio :key="0" :value="true">
125 |             {{ $t('yes') }}
126 |           </n-radio>
127 |           <n-radio :key="1" :value="false">
128 |             {{ $t('no') }}
129 |           </n-radio>
130 |         </n-space>
131 |       </n-radio-group>
132 |     </n-form-item>
133 |     <n-form-item :label="$t('listType')">
134 |       <n-radio-group v-model:value="formValue.listType">
135 |         <n-space>
136 |           <n-radio :key="0" value="text">
137 |             text
138 |           </n-radio>
139 |           <n-radio :key="1" value="image">
140 |             image
141 |           </n-radio>
142 |           <n-radio :key="2" value="image-card">
143 |             image-card
144 |           </n-radio>
145 |         </n-space>
146 |       </n-radio-group>
147 |     </n-form-item>
148 |     <n-form-item :label="$t('uploadMax')">
149 |       <n-input-number v-model:value="formValue.max" />
150 |     </n-form-item>
151 |     <n-form-item :label="$t('method')">
152 |       <n-input v-model:value="formValue.method" type="text" />
153 |     </n-form-item>
154 |     <n-form-item :label="$t('multiple')">
155 |       <n-radio-group v-model:value="formValue.multiple">
156 |         <n-space>
157 |           <n-radio :key="0" :value="true">
158 |             {{ $t('yes') }}
159 |           </n-radio>
160 |           <n-radio :key="1" :value="false">
161 |             {{ $t('no') }}
162 |           </n-radio>
163 |         </n-space>
164 |       </n-radio-group>
165 |     </n-form-item>
166 |     <n-form-item :label="$t('fileName')">
167 |       <n-input v-model:value="formValue.fileName" type="text" />
168 |     </n-form-item>
169 |     <n-form-item :label="$t('withCredentials')">
170 |       <n-radio-group v-model:value="formValue.withCredentials">
171 |         <n-space>
172 |           <n-radio :key="0" :value="true">
173 |             {{ $t('yes') }}
174 |           </n-radio>
175 |           <n-radio :key="1" :value="false">
176 |             {{ $t('no') }}
177 |           </n-radio>
178 |         </n-space>
179 |       </n-radio-group>
180 |     </n-form-item>
181 |     <n-form-item :label="$t('showCancelButton')">
182 |       <n-radio-group v-model:value="formValue.showCancelButton">
183 |         <n-space>
184 |           <n-radio :key="0" :value="true">
185 |             {{ $t('yes') }}
186 |           </n-radio>
187 |           <n-radio :key="1" :value="false">
188 |             {{ $t('no') }}
189 |           </n-radio>
190 |         </n-space>
191 |       </n-radio-group>
192 |     </n-form-item>
193 |     <n-form-item :label="$t('showDownloadButton')">
194 |       <n-radio-group v-model:value="formValue.showDownloadButton">
195 |         <n-space>
196 |           <n-radio :key="0" :value="true">
197 |             {{ $t('yes') }}
198 |           </n-radio>
199 |           <n-radio :key="1" :value="false">
200 |             {{ $t('no') }}
201 |           </n-radio>
202 |         </n-space>
203 |       </n-radio-group>
204 |     </n-form-item>
205 |     <n-form-item :label="$t('showRemoveButton')">
206 |       <n-radio-group v-model:value="formValue.showRemoveButton">
207 |         <n-space>
208 |           <n-radio :key="0" :value="true">
209 |             {{ $t('yes') }}
210 |           </n-radio>
211 |           <n-radio :key="1" :value="false">
212 |             {{ $t('no') }}
213 |           </n-radio>
214 |         </n-space>
215 |       </n-radio-group>
216 |     </n-form-item>
217 |     <n-form-item :label="$t('showRetryButton')">
218 |       <n-radio-group v-model:value="formValue.showRetryButton">
219 |         <n-space>
220 |           <n-radio :key="0" :value="true">
221 |             {{ $t('yes') }}
222 |           </n-radio>
223 |           <n-radio :key="1" :value="false">
224 |             {{ $t('no') }}
225 |           </n-radio>
226 |         </n-space>
227 |       </n-radio-group>
228 |     </n-form-item>
229 |     <n-form-item :label="$t('showFileList')">
230 |       <n-radio-group v-model:value="formValue.showFileList">
231 |         <n-space>
232 |           <n-radio :key="0" :value="true">
233 |             {{ $t('yes') }}
234 |           </n-radio>
235 |           <n-radio :key="1" :value="false">
236 |             {{ $t('no') }}
237 |           </n-radio>
238 |         </n-space>
239 |       </n-radio-group>
240 |     </n-form-item>
241 |     <n-button type="primary" @click="handleSubmit">
242 |       {{ $t('apply') }}
243 |     </n-button>
244 |   </n-form>
245 | </template>
246 | 
247 | <style></style>
248 | 


--------------------------------------------------------------------------------
/src/components/Content/Content.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useStore } from 'vuex'
  3 | import { computed } from 'vue'
  4 | import { CopyOutlined, DeleteOutlined } from '@vicons/antd'
  5 | import type { State } from '../../store/index'
  6 | import DraggableItem from './components/DraggableItem.vue'
  7 | import Drop from './components/Drop.vue'
  8 | 
  9 | const store = useStore<State>()
 10 | const formItemArray = computed(() => {
 11 |   return store.state.formItemArray
 12 | })
 13 | const formConfig = computed(() => {
 14 |   return store.state.formConfig
 15 | })
 16 | const handleAddClick = () => {
 17 |   store.commit('add', {
 18 |     value: '0',
 19 |   })
 20 | }
 21 | const handleRemoveClick = (id: string) => {
 22 |   store.commit('remove', id)
 23 | }
 24 | const handleCopyClick = (id: string) => {
 25 |   store.commit('copy', id)
 26 | }
 27 | const setSelectedFormItem = (id: string) => {
 28 |   store.commit('changeSelectedFormItem', id)
 29 |   store.commit('changeTabsValue', 'formItem')
 30 | }
 31 | const selectedFormItem = computed(() => {
 32 |   return store.state.selectedFormItem
 33 | })
 34 | </script>
 35 | 
 36 | <template>
 37 |   <n-divider title-placement="left">
 38 |     {{ $t('preview') }}
 39 |   </n-divider>
 40 |   <n-empty v-if="formItemArray.length === 0" :description="$t('addFormItem')">
 41 |     <template #extra>
 42 |       <n-button @click="handleAddClick">
 43 |         {{ $t('add') }}
 44 |       </n-button>
 45 |     </template>
 46 |   </n-empty>
 47 |   <n-form
 48 |     v-else
 49 |     :label-placement="formConfig.labelPlacement"
 50 |     :size="formConfig.size"
 51 |     :label-width="formConfig.labelWidth"
 52 |     :label-align="formConfig.labelAlign"
 53 |     :show-feedback="formConfig.showFeedback"
 54 |     :show-label="formConfig.showLabel"
 55 |     :show-require-mark="formConfig.showRequireMark"
 56 |     :require-mark-placement="formConfig.requireMarkPlacement"
 57 |   >
 58 |     <Drop>
 59 |       <DraggableItem
 60 |         v-for="item in formItemArray"
 61 |         :id="item.id"
 62 |         :key="item.id"
 63 |         :style="{
 64 |           marginBottom: '15px',
 65 |         }"
 66 |       >
 67 |         <n-card
 68 |           :content-style="`cursor: pointer; ${
 69 |             selectedFormItem === item.id ? 'border: 1px solid #18a058;' : ''
 70 |           }`"
 71 |           @click="setSelectedFormItem(item.id)"
 72 |         >
 73 |           <div class="buttons">
 74 |             <n-space>
 75 |               <n-button circle type="primary" size="small" @click.stop="handleCopyClick(item.id)">
 76 |                 <n-icon size="20">
 77 |                   <CopyOutlined />
 78 |                 </n-icon>
 79 |               </n-button>
 80 |               <n-button circle type="error" size="small" @click.stop="handleRemoveClick(item.id)">
 81 |                 <n-icon size="20">
 82 |                   <DeleteOutlined />
 83 |                 </n-icon>
 84 |               </n-button>
 85 |             </n-space>
 86 |           </div>
 87 |           <n-form-item :label="$t(item.formItemConfig.label)">
 88 |             <n-input
 89 |               v-if="item.value === '0'"
 90 |               :clearable="item.formItemConfig.clearable"
 91 |               :maxlength="item.formItemConfig.maxlength"
 92 |               :type="item.formItemConfig.type"
 93 |               :size="item.formItemConfig.size"
 94 |             />
 95 |             <n-input-number
 96 |               v-else-if="item.value === '1'"
 97 |               :clearable="item.formItemConfig.clearable"
 98 |               :max="item.formItemConfig.max"
 99 |               :min="item.formItemConfig.min"
100 |               :size="item.formItemConfig.size"
101 |               :step="item.formItemConfig.step"
102 |               :show-button="item.formItemConfig.showButton"
103 |             />
104 |             <n-radio-group v-else-if="item.value === '2'" :size="item.formItemConfig.size">
105 |               <n-space>
106 |                 <n-radio
107 |                   v-for="item2 in item.formItemConfig.options ?? [
108 |                     {
109 |                       value: 'demo',
110 |                       label: 'demo',
111 |                     },
112 |                   ]"
113 |                   :key="item2.value"
114 |                   :value="item2.value"
115 |                 >
116 |                   {{ item2.label }}
117 |                 </n-radio>
118 |               </n-space>
119 |             </n-radio-group>
120 |             <n-rate
121 |               v-else-if="item.value === '3'"
122 |               :count="item.formItemConfig.count"
123 |               :size="item.formItemConfig.size"
124 |               :allow-half="item.formItemConfig.allowHalf"
125 |             />
126 |             <n-select
127 |               v-else-if="item.value === '4'"
128 |               :multiple="item.formItemConfig.multiple"
129 |               :size="item.formItemConfig.size"
130 |               :placeholder="item.formItemConfig.placeholder"
131 |               :clearable="item.formItemConfig.clearable"
132 |               :options="
133 |                 item.formItemConfig.options ?? [
134 |                   {
135 |                     label: 'select',
136 |                     value: 'select',
137 |                   },
138 |                 ]
139 |               "
140 |             />
141 |             <n-slider
142 |               v-else-if="item.value === '5'"
143 |               :default-value="[0, 0]"
144 |               :max="item.formItemConfig.max"
145 |               :min="item.formItemConfig.min"
146 |               :step="item.formItemConfig.step"
147 |               :range="item.formItemConfig.range"
148 |               :reverse="item.formItemConfig.reverse"
149 |               :vertical="item.formItemConfig.vertical"
150 |               :tooltip="item.formItemConfig.tooltip"
151 |             />
152 |             <n-switch
153 |               v-else-if="item.value === '6'"
154 |               :round="item.formItemConfig.round"
155 |               :size="item.formItemConfig.size"
156 |             />
157 |             <n-time-picker
158 |               v-else-if="item.value === '7'"
159 |               :size="item.formItemConfig.size"
160 |               :actions="item.formItemConfig.actions"
161 |               :clearable="item.formItemConfig.clearable"
162 |               :format="item.formItemConfig.format"
163 |               :placeholder="item.formItemConfig.placeholder"
164 |               :use-12-hours="item.formItemConfig.use12Hours"
165 |             />
166 |             <n-tree-select
167 |               v-else-if="item.value === '8'"
168 |               :size="item.formItemConfig.size"
169 |               :clearable="item.formItemConfig.clearable"
170 |               :options="[
171 |                 {
172 |                   label: 'tree',
173 |                   key: 'tree',
174 |                   children: [
175 |                     {
176 |                       label: 'tree-select',
177 |                       key: 'tree-select',
178 |                     },
179 |                   ],
180 |                 },
181 |               ]"
182 |             />
183 |             <n-upload
184 |               v-else-if="item.value === '9'"
185 |               :accept="item.formItemConfig.accept"
186 |               :action="item.formItemConfig.action"
187 |               :default-upload="item.formItemConfig.defaultUpload"
188 |               :list-type="item.formItemConfig.listType"
189 |               :max="item.formItemConfig.max"
190 |               :method="item.formItemConfig.method"
191 |               :multiple="item.formItemConfig.multiple"
192 |               :name="item.formItemConfig.fileName"
193 |               :with-credentials="item.formItemConfig.withCredentials"
194 |               :show-cancel-button="item.formItemConfig.showCancelButton"
195 |               :show-download-button="item.formItemConfig.showDownloadButton"
196 |               :show-remove-button="item.formItemConfig.showRemoveButton"
197 |               :show-retry-button="item.formItemConfig.showRetryButton"
198 |               :show-file-list="item.formItemConfig.showFileList"
199 |             >
200 |               <n-button>上传文件</n-button>
201 |             </n-upload>
202 |             <n-color-picker
203 |               v-else-if="item.value === '10'"
204 |               :size="item.formItemConfig.size"
205 |               :modes="item.formItemConfig.modes"
206 |               :show-alpha="item.formItemConfig.showAlpha"
207 |               :actions="item.formItemConfig.actions"
208 |             />
209 |             <n-checkbox-group
210 |               v-else-if="item.value === '11'"
211 |               :max="item.formItemConfig.max"
212 |               :min="item.formItemConfig.min"
213 |             >
214 |               <n-space item-style="display: flex;">
215 |                 <n-checkbox
216 |                   v-for="item2 in item.formItemConfig.options ?? [{ label: 'demo', value: 'demo' }]"
217 |                   :key="item2.value"
218 |                   :value="item2.value"
219 |                   :label="item2.label"
220 |                 />
221 |               </n-space>
222 |             </n-checkbox-group>
223 |             <n-date-picker
224 |               v-else-if="item.value === '12'"
225 |               :actions="item.formItemConfig.actions"
226 |               :clearable="item.formItemConfig.clearable"
227 |               :format="item.formItemConfig.format"
228 |               :size="item.formItemConfig.size"
229 |               :placeholder="item.formItemConfig.placeholder"
230 |               :type="item.formItemConfig.type"
231 |               :start-placeholder="item.formItemConfig.startPlaceholder"
232 |               :end-placeholder="item.formItemConfig.endPlaceholder"
233 |               :separator="item.formItemConfig.separator"
234 |             />
235 |             <n-divider
236 |               v-else-if="item.value === '13'"
237 |               :dashed="item.formItemConfig.dashed"
238 |               :vertical="item.formItemConfig.vertical"
239 |               :title-placement="item.formItemConfig.titlePlacement"
240 |             >
241 |               {{ item.formItemConfig.name }}
242 |             </n-divider>
243 |           </n-form-item>
244 |         </n-card>
245 |       </DraggableItem>
246 |     </Drop>
247 |   </n-form>
248 | </template>
249 | 
250 | <style scoped>
251 | .buttons {
252 |   position: absolute;
253 |   top: 100%;
254 |   right: 5%;
255 |   transform: translateY(-50%);
256 | }
257 | </style>
258 | 


--------------------------------------------------------------------------------
/lib/components/proForm/index.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable react/no-string-refs */
  2 | import type { ComputedRef, PropType } from 'vue'
  3 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
  4 | import { Fragment, computed, defineComponent, h, ref, watchEffect } from 'vue'
  5 | import type {
  6 |   CheckboxGroupProps,
  7 |   FormInst,
  8 |   FormProps,
  9 |   RadioGroupProps,
 10 | } from 'naive-ui'
 11 | import {
 12 |   NButton,
 13 |   NCheckbox,
 14 |   NCheckboxGroup,
 15 |   NColorPicker,
 16 |   NDatePicker,
 17 |   NDivider,
 18 |   NForm,
 19 |   NFormItem,
 20 |   NIcon,
 21 |   NInput,
 22 |   NInputNumber,
 23 |   NRadio,
 24 |   NRadioGroup,
 25 |   NRate,
 26 |   NSelect,
 27 |   NSlider,
 28 |   NSpace,
 29 |   NSwitch,
 30 |   NTimePicker,
 31 |   NTooltip,
 32 |   NUpload,
 33 | } from 'naive-ui'
 34 | import type { FormValidateCallback } from 'naive-ui/es/form/src/interface'
 35 | import type { FileInfo } from 'naive-ui/es/upload/src/interface'
 36 | import { QuestionCircle48Regular } from '@vicons/fluent'
 37 | import type { ProFormItem } from './types/props'
 38 | 
 39 | const ProFormProps = {
 40 |   formProps: Object as PropType<Omit<FormProps, 'model'>>,
 41 |   formItems: Array as PropType<ProFormItem[]>,
 42 |   resetButton: Boolean,
 43 |   validateButton: Boolean,
 44 |   submitButton: {
 45 |     type: Boolean,
 46 |     default: true,
 47 |   },
 48 |   onReset: Function as PropType<() => void>,
 49 |   onFinish: Function as PropType<() => void>,
 50 |   onError: Function as PropType<FormValidateCallback>,
 51 |   onValidate: Function as PropType<() => void>,
 52 |   title: String,
 53 |   isKeyPressSubmit: Boolean,
 54 | }
 55 | 
 56 | export default defineComponent({
 57 |   name: 'ProForm',
 58 |   props: ProFormProps,
 59 |   setup(props) {
 60 |     const getObj = (data: ProFormItem[] | undefined) => {
 61 |       if (!data)
 62 |         return {}
 63 | 
 64 |       const obj: Record<string, any> = {}
 65 | 
 66 |       data.forEach((item) => {
 67 |         if (item.type === 'divider')
 68 |           return
 69 |         obj[item.key] = null
 70 |       })
 71 | 
 72 |       return obj
 73 |     }
 74 | 
 75 |     const modalData = ref<Record<string, any>>(getObj(props.formItems))
 76 | 
 77 |     const formRef = ref<FormInst | null>(null)
 78 | 
 79 |     const handleValidateClick = () => {
 80 |       formRef.value?.validate((errors) => {
 81 |         if (!errors)
 82 |           props?.onValidate && props.onValidate()
 83 |         else props?.onError && props.onError(errors)
 84 |       })
 85 |     }
 86 | 
 87 |     const handleResetClick = () => {
 88 |       for (const key in modalData.value) {
 89 |         if (Object.prototype.hasOwnProperty.call(modalData.value, key))
 90 |           modalData.value[key] = null
 91 |       }
 92 |       props?.onReset && props.onReset()
 93 |     }
 94 | 
 95 |     const handleSubmitClick = () => {
 96 |       formRef.value?.validate((errors) => {
 97 |         if (!errors) {
 98 |           props?.onFinish && props.onFinish()
 99 |           console.log(modalData.value)
100 |         }
101 |         else {
102 |           props?.onError && props.onError(errors)
103 |         }
104 |       })
105 |     }
106 | 
107 |     const handleInputUpdateValue = (
108 |       val: string | number | null | (string | number)[] | Required<FileInfo>[],
109 |       key: string,
110 |     ) => {
111 |       modalData.value[key] = val
112 |     }
113 | 
114 |     const handleRadioUpdateChecked = (
115 |       val: boolean,
116 |       key: string,
117 |       flag: string | number,
118 |     ) => {
119 |       if (val)
120 |         modalData.value[key] = flag
121 |     }
122 | 
123 |     const keyDownHandler = (e: KeyboardEvent) => {
124 |       if (e.key === 'Enter')
125 |         handleSubmitClick()
126 |     }
127 | 
128 |     watchEffect(() => {
129 |       if (props.isKeyPressSubmit)
130 |         window.addEventListener('keydown', keyDownHandler)
131 |       else window.removeEventListener('keydown', keyDownHandler)
132 |     })
133 | 
134 |     const getNTooltipVnode = (item: ProFormItem) => {
135 |       if (item.type === 'divider')
136 |         return
137 |       return item.tooltipConfig?.show
138 |         ? (
139 |         <NTooltip trigger="hover">
140 |           {{
141 |             trigger: () => (
142 |               <NIcon size={20}>
143 |                 <QuestionCircle48Regular />
144 |               </NIcon>
145 |             ),
146 |             default: () => item.tooltipConfig?.text,
147 |           }}
148 |         </NTooltip>
149 |           )
150 |         : null
151 |     }
152 | 
153 |     const getNFormItemVnode: (
154 |       item: ProFormItem
155 |     ) => JSX.Element | JSX.Element[] | undefined = (item) => {
156 |       switch (item.type) {
157 |         case 'input':
158 |           return (
159 |             <NInput
160 |               {...item.props}
161 |               value={modalData.value[item.key]}
162 |               onUpdateValue={(value) => {
163 |                 handleInputUpdateValue(value, item.key)
164 |               }}
165 |             />
166 |           )
167 |         case 'inputNumber':
168 |           return (
169 |             <NInputNumber
170 |               {...item.props}
171 |               value={modalData.value[item.key]}
172 |               onUpdateValue={(value) => {
173 |                 handleInputUpdateValue(value, item.key)
174 |               }}
175 |             />
176 |           )
177 | 
178 |         case 'radio':
179 |           return item.valueEnum.length > 1
180 |             ? (
181 |             <NRadioGroup
182 |               {...(item.props as RadioGroupProps)}
183 |               value={modalData.value[item.key]}
184 |               onUpdateValue={(value) => {
185 |                 handleInputUpdateValue(value, item.key)
186 |               }}
187 |             >
188 |               {item.valueEnum.map(valueItem => (
189 |                 <NRadio {...valueItem} key={valueItem.value} />
190 |               ))}
191 |             </NRadioGroup>
192 |               )
193 |             : (
194 |                 item.valueEnum.map(valueItem => (
195 |               <NRadio
196 |                 {...item.props}
197 |                 {...valueItem}
198 |                 key={valueItem.value}
199 |                 checked={valueItem.value === modalData.value[item.key]}
200 |                 onUpdateChecked={(value) => {
201 |                   handleRadioUpdateChecked(value, item.key, valueItem.value)
202 |                 }}
203 |               />
204 |                 ))
205 |               )
206 | 
207 |         case 'select':
208 |           return (
209 |             <NSelect
210 |               {...item.props}
211 |               options={item.valueEnum}
212 |               value={modalData.value[item.key]}
213 |               onUpdateValue={(value) => {
214 |                 handleInputUpdateValue(value, item.key)
215 |               }}
216 |             />
217 |           )
218 | 
219 |         case 'rate':
220 |           return (
221 |             <NRate
222 |               {...item.props}
223 |               value={modalData.value[item.key]}
224 |               onUpdateValue={(value) => {
225 |                 handleInputUpdateValue(value, item.key)
226 |               }}
227 |             />
228 |           )
229 | 
230 |         case 'switch':
231 |           return (
232 |             <NSwitch
233 |               {...item.props}
234 |               value={modalData.value[item.key]}
235 |               onUpdateValue={(value) => {
236 |                 handleInputUpdateValue(value, item.key)
237 |               }}
238 |             />
239 |           )
240 | 
241 |         case 'timePicker':
242 |           return (
243 |             <NTimePicker
244 |               {...item.props}
245 |               value={modalData.value[item.key]}
246 |               onUpdateValue={(value) => {
247 |                 handleInputUpdateValue(value, item.key)
248 |               }}
249 |             />
250 |           )
251 | 
252 |         case 'datePicker':
253 |           return (
254 |             <NDatePicker
255 |               {...item.props}
256 |               onUpdateValue={(value) => {
257 |                 handleInputUpdateValue(value, item.key)
258 |               }}
259 |               value={modalData.value[item.key]}
260 |             />
261 |           )
262 | 
263 |         case 'colorPicker':
264 |           return (
265 |             <NColorPicker
266 |               {...item.props}
267 |               onUpdateValue={(value) => {
268 |                 handleInputUpdateValue(value, item.key)
269 |               }}
270 |               value={modalData.value[item.key]}
271 |             />
272 |           )
273 | 
274 |         case 'checkbox':
275 |           return item.valueEnum.length > 1
276 |             ? (
277 |             <NCheckboxGroup
278 |               {...(item.props as Omit<
279 |                 CheckboxGroupProps,
280 |                 'onUpdateValue' | 'value'
281 |               >)}
282 |               onUpdateValue={(value) => {
283 |                 handleInputUpdateValue(value, item.key)
284 |               }}
285 |               value={modalData.value[item.key]}
286 |             >
287 |               {item.valueEnum.map(valueItem => (
288 |                 <NCheckbox key={valueItem.value} {...valueItem} />
289 |               ))}
290 |             </NCheckboxGroup>
291 |               )
292 |             : (
293 |                 item.valueEnum.map(valueItem => (
294 |               <NCheckbox
295 |                 {...item.props}
296 |                 key={valueItem.value}
297 |                 {...valueItem}
298 |                 onUpdateChecked={(value) => {
299 |                   handleInputUpdateValue(value, item.key)
300 |                 }}
301 |                 value={modalData.value[item.key]}
302 |               />
303 |                 ))
304 |               )
305 | 
306 |         case 'upload':
307 |           return (
308 |             <NUpload
309 |               {...item.props}
310 |               fileList={modalData.value[item.key] ?? []}
311 |               onUpdateFileList={(value) => {
312 |                 handleInputUpdateValue(value, item.key)
313 |               }}
314 |             >
315 |               <NButton>{item.buttonText}</NButton>
316 |             </NUpload>
317 |           )
318 | 
319 |         case 'slider':
320 |           return (
321 |             <NSlider
322 |               onUpdateValue={(value) => {
323 |                 handleInputUpdateValue(value, item.key)
324 |               }}
325 |               value={modalData.value[item.key]}
326 |             />
327 |           )
328 | 
329 |         default:
330 |           return undefined
331 |       }
332 |     }
333 | 
334 |     const Vnode: ComputedRef<JSX.Element[] | undefined> = computed(() => {
335 |       const { formItems } = props
336 |       return formItems?.map((item) => {
337 |         if (item.type === 'divider') {
338 |           return (
339 |             <NDivider
340 |               dashed={item.dashed}
341 |               titlePlacement={item.titlePlacement}
342 |               vertical={item.vertical}
343 |             >
344 |               {item.text}
345 |             </NDivider>
346 |           )
347 |         }
348 |         else {
349 |           return (
350 |             <NFormItem
351 |               {...item.formItemProps}
352 |               key={item.key}
353 |               label={item.label}
354 |               path={item.key}
355 |             >
356 |               {getNFormItemVnode(item)}
357 |               {getNTooltipVnode(item)}
358 |             </NFormItem>
359 |           )
360 |         }
361 |       })
362 |     })
363 | 
364 |     return {
365 |       modalData,
366 |       formRef,
367 |       handleValidateClick,
368 |       handleInputUpdateValue,
369 |       handleRadioUpdateChecked,
370 |       handleResetClick,
371 |       handleSubmitClick,
372 |       Vnode,
373 |     }
374 |   },
375 |   render() {
376 |     const {
377 |       formProps,
378 |       modalData,
379 |       handleValidateClick,
380 |       handleResetClick,
381 |       handleSubmitClick,
382 |       resetButton,
383 |       validateButton,
384 |       submitButton,
385 |       title,
386 |       Vnode,
387 |     } = this
388 | 
389 |     return (
390 |       <Fragment>
391 |         {title ? <NDivider>{title}</NDivider> : null}
392 |         <NForm {...formProps} model={modalData} ref="formRef">
393 |           {Vnode}
394 |         </NForm>
395 |         <NSpace justify="center">
396 |           {validateButton === true
397 |             ? (
398 |             <NButton onClick={handleValidateClick} type="warning">
399 |               验证
400 |             </NButton>
401 |               )
402 |             : null}
403 |           {resetButton === true
404 |             ? (
405 |             <NButton onClick={handleResetClick} type="error">
406 |               重置
407 |             </NButton>
408 |               )
409 |             : null}
410 |           {submitButton === true
411 |             ? (
412 |             <NButton onClick={handleSubmitClick} type="primary">
413 |               提交
414 |             </NButton>
415 |               )
416 |             : null}
417 |         </NSpace>
418 |       </Fragment>
419 |     )
420 |   },
421 | })
422 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
  1 | import { PREFIX, UI_NAME } from '../const/const'
  2 | import type { formItemType } from '../store'
  3 | import { store } from '../store'
  4 | 
  5 | interface bindConfig {
  6 |   name: string
  7 |   val: any
  8 | }
  9 | 
 10 | const typeToImport: Record<string, string[]> = {
 11 |   0: ['Input'],
 12 |   1: ['InputNumber'],
 13 |   2: ['Radio', 'RadioGroup', 'Space'],
 14 |   3: ['Rate'],
 15 |   4: ['Select'],
 16 |   5: ['Slider'],
 17 |   6: ['Switch'],
 18 |   7: ['TimePicker'],
 19 |   8: ['TreeSelect'],
 20 |   9: ['Upload'],
 21 |   10: ['ColorPicker'],
 22 |   11: ['Checkbox', 'CheckboxGroup', 'Space'],
 23 |   12: ['DatePicker'],
 24 |   13: ['Divider'],
 25 | }
 26 | 
 27 | // bind
 28 | 
 29 | const combineNameAndValue = (
 30 |   name: string,
 31 |   val: any,
 32 | ): {
 33 |   name: string
 34 |   val: any
 35 | } => {
 36 |   return {
 37 |     name,
 38 |     val,
 39 |   }
 40 | }
 41 | 
 42 | const bindBooleanAndNumberConfig = (config: bindConfig): string => {
 43 |   return `${
 44 |     config.val !== undefined
 45 |       ? `:${String(config.name)}="${String(config.val)}"`
 46 |       : ''
 47 |   }`
 48 | }
 49 | 
 50 | const bindStringConfig = (config: bindConfig): string => {
 51 |   return `${
 52 |     config.val !== undefined
 53 |       ? `${String(config.name)}="${String(config.val)}"`
 54 |       : ''
 55 |   }`
 56 | }
 57 | 
 58 | const bindValueConfig = (config: bindConfig): string => {
 59 |   return `${
 60 |     config.val !== undefined
 61 |       ? `v-model="${
 62 |           store.state.formConfig.model !== undefined
 63 |             ? `${store.state.formConfig.model}.`
 64 |             : ''
 65 |         }${String(config.val)}"`
 66 |       : ''
 67 |   }`
 68 | }
 69 | 
 70 | const bindFileListConfig = (config: bindConfig): string => {
 71 |   return `${
 72 |     config.val !== undefined ? `v-model:file-list="${String(config.val)}"` : ''
 73 |   }`
 74 | }
 75 | 
 76 | const replaceOptions = (str: string): string => {
 77 |   return str.replace(/"label"/g, 'label').replace(/"value"/g, 'value')
 78 | }
 79 | 
 80 | // formItemConfig
 81 | 
 82 | const getInputFormItemContentConfig = (item: {
 83 |   [key: string]: any
 84 | }): string => {
 85 |   const { name, clearable, maxlength, minlength, type, size } = item
 86 |   return `${bindValueConfig(
 87 |     combineNameAndValue('name', name),
 88 |   )} ${bindBooleanAndNumberConfig(
 89 |     combineNameAndValue('clearable', clearable),
 90 |   )} ${bindBooleanAndNumberConfig(
 91 |     combineNameAndValue('maxlength', maxlength),
 92 |   )} ${bindBooleanAndNumberConfig(
 93 |     combineNameAndValue('minlength', minlength),
 94 |   )} ${bindStringConfig(combineNameAndValue('type', type))} ${bindStringConfig(
 95 |     combineNameAndValue('size', size),
 96 |   )}`
 97 | }
 98 | 
 99 | const getInputNumberFormItemContentConfig = (item: {
100 |   [key: string]: any
101 | }): string => {
102 |   const { name, clearable, max, min, size, step, showButton } = item
103 |   return `${bindValueConfig(
104 |     combineNameAndValue('name', name),
105 |   )} ${bindBooleanAndNumberConfig(
106 |     combineNameAndValue('clearable', clearable),
107 |   )} ${bindBooleanAndNumberConfig(
108 |     combineNameAndValue('max', max),
109 |   )} ${bindBooleanAndNumberConfig(
110 |     combineNameAndValue('min', min),
111 |   )} ${bindBooleanAndNumberConfig(
112 |     combineNameAndValue('step', step),
113 |   )} ${bindStringConfig(
114 |     combineNameAndValue('size', size),
115 |   )} ${bindBooleanAndNumberConfig(
116 |     combineNameAndValue('show-button', showButton),
117 |   )}`
118 | }
119 | 
120 | const getRadioFormItemContentConfig = (item: {
121 |   [key: string]: any
122 | }): string => {
123 |   const { name, size } = item
124 |   return `${bindValueConfig(
125 |     combineNameAndValue('name', name),
126 |   )} ${bindStringConfig(combineNameAndValue('size', size))}`
127 | }
128 | 
129 | const getRateFormItemContentConfig = (item: { [key: string]: any }): string => {
130 |   const { name, size, count, allowHalf } = item
131 |   return `${bindValueConfig(
132 |     combineNameAndValue('name', name),
133 |   )} ${bindStringConfig(
134 |     combineNameAndValue('size', size),
135 |   )} ${bindBooleanAndNumberConfig(
136 |     combineNameAndValue('count', count),
137 |   )} ${bindBooleanAndNumberConfig(
138 |     combineNameAndValue('allow-half', allowHalf),
139 |   )}`
140 | }
141 | 
142 | const getSelectFormItemContentConfig = (item: {
143 |   [key: string]: any
144 | }): string => {
145 |   const { name, size, multiple, placeholder, clearable, options } = item
146 |   return `${bindValueConfig(
147 |     combineNameAndValue('name', name),
148 |   )} ${bindStringConfig(combineNameAndValue('size', size))} ${bindStringConfig(
149 |     combineNameAndValue('placeholder', placeholder),
150 |   )} ${bindBooleanAndNumberConfig(
151 |     combineNameAndValue('multiple', multiple),
152 |   )} ${bindBooleanAndNumberConfig(
153 |     combineNameAndValue('clearable', clearable),
154 |   )} ${bindBooleanAndNumberConfig(
155 |     combineNameAndValue('options', replaceOptions(JSON.stringify(options))),
156 |   )}`
157 | }
158 | 
159 | const getSliderFormItemContentConfig = (item: {
160 |   [key: string]: any
161 | }): string => {
162 |   const { name, max, min, step, range, reverse, vertical, tooltip } = item
163 |   return `${bindValueConfig(
164 |     combineNameAndValue('name', name),
165 |   )} ${bindBooleanAndNumberConfig(
166 |     combineNameAndValue('max', max),
167 |   )} ${bindBooleanAndNumberConfig(
168 |     combineNameAndValue('min', min),
169 |   )} ${bindBooleanAndNumberConfig(
170 |     combineNameAndValue('step', step),
171 |   )} ${bindBooleanAndNumberConfig(
172 |     combineNameAndValue('range', range),
173 |   )} ${bindBooleanAndNumberConfig(
174 |     combineNameAndValue('reverse', reverse),
175 |   )} ${bindBooleanAndNumberConfig(
176 |     combineNameAndValue('vertical', vertical),
177 |   )} ${bindBooleanAndNumberConfig(combineNameAndValue('tooltip', tooltip))}`
178 | }
179 | 
180 | const getSwitchFormItemContentConfig = (item: {
181 |   [key: string]: any
182 | }): string => {
183 |   const { name, round, size } = item
184 |   return `${bindValueConfig(
185 |     combineNameAndValue('name', name),
186 |   )} ${bindBooleanAndNumberConfig(
187 |     combineNameAndValue('round', round),
188 |   )} ${bindStringConfig(combineNameAndValue('size', size))}`
189 | }
190 | 
191 | const getTimePickerFormItemContentConfig = (item: {
192 |   [key: string]: any
193 | }): string => {
194 |   const { name, size, actions, clearable, format, placeholder, use12Hours }
195 |     = item
196 |   return `${bindValueConfig(
197 |     combineNameAndValue('name', name),
198 |   )} ${bindBooleanAndNumberConfig(
199 |     combineNameAndValue('clearable', clearable),
200 |   )} ${bindBooleanAndNumberConfig(
201 |     combineNameAndValue('use-12-hours', use12Hours),
202 |   )} ${bindBooleanAndNumberConfig(
203 |     combineNameAndValue('actions', JSON.stringify(actions)),
204 |   )} ${bindStringConfig(
205 |     combineNameAndValue('format', format),
206 |   )} ${bindStringConfig(
207 |     combineNameAndValue('placeholder', placeholder),
208 |   )} ${bindStringConfig(combineNameAndValue('size', size))}`
209 | }
210 | 
211 | const getTreeSelectFormItemContentConfig = (item: {
212 |   [key: string]: any
213 | }): string => {
214 |   const { name, size, clearable } = item
215 |   return `${bindValueConfig(
216 |     combineNameAndValue('name', name),
217 |   )} ${bindBooleanAndNumberConfig(
218 |     combineNameAndValue('clearable', clearable),
219 |   )} ${bindStringConfig(combineNameAndValue('size', size))}`
220 | }
221 | 
222 | const getUploadFormItemContentConfig = (item: {
223 |   [key: string]: any
224 | }): string => {
225 |   const {
226 |     name,
227 |     accept,
228 |     action,
229 |     defaultUpload,
230 |     data,
231 |     headers,
232 |     listType,
233 |     max,
234 |     method,
235 |     multiple,
236 |     fileName,
237 |     withCredentials,
238 |     showCancelButton,
239 |     showDownloadButton,
240 |     showRemoveButton,
241 |     showRetryButton,
242 |     showFileList,
243 |   } = item
244 |   const handledDate: Record<string, string> = {}
245 |   const handledHeaders: Record<string, string> = {};
246 |   (
247 |     data as Array<{
248 |       key: string
249 |       value: string
250 |     }>
251 |   ).map((item) => {
252 |     return (handledDate[item.key] = item.value)
253 |   });
254 |   (
255 |     headers as Array<{
256 |       key: string
257 |       value: string
258 |     }>
259 |   ).map((item) => {
260 |     return (handledHeaders[item.key] = item.value)
261 |   })
262 |   return `${bindFileListConfig(
263 |     combineNameAndValue('name', name),
264 |   )} ${bindBooleanAndNumberConfig(
265 |     combineNameAndValue('default-upload', defaultUpload),
266 |   )} ${bindBooleanAndNumberConfig(
267 |     combineNameAndValue('data', JSON.stringify(handledDate)),
268 |   )} ${bindBooleanAndNumberConfig(
269 |     combineNameAndValue('headers', JSON.stringify(handledHeaders)),
270 |   )} ${bindBooleanAndNumberConfig(
271 |     combineNameAndValue('show-cancel-button', showCancelButton),
272 |   )} ${bindBooleanAndNumberConfig(
273 |     combineNameAndValue('show-download-button', showDownloadButton),
274 |   )} ${bindBooleanAndNumberConfig(
275 |     combineNameAndValue('show-remove-button', showRemoveButton),
276 |   )} ${bindBooleanAndNumberConfig(
277 |     combineNameAndValue('show-retry-button', showRetryButton),
278 |   )} ${bindBooleanAndNumberConfig(
279 |     combineNameAndValue('show-file-list', showFileList),
280 |   )} ${bindStringConfig(
281 |     combineNameAndValue('accept', accept),
282 |   )} ${bindStringConfig(
283 |     combineNameAndValue('action', action),
284 |   )} ${bindStringConfig(
285 |     combineNameAndValue('list-type', listType),
286 |   )} ${bindBooleanAndNumberConfig(
287 |     combineNameAndValue('max', max),
288 |   )} ${bindStringConfig(
289 |     combineNameAndValue('method', method),
290 |   )} ${bindBooleanAndNumberConfig(
291 |     combineNameAndValue('multiple', multiple),
292 |   )} ${bindStringConfig(
293 |     combineNameAndValue('name', fileName),
294 |   )} ${bindBooleanAndNumberConfig(
295 |     combineNameAndValue('with-credentials', withCredentials),
296 |   )}`
297 | }
298 | 
299 | const getCheckBoxFormItemContentConfig = (item: {
300 |   [key: string]: any
301 | }): string => {
302 |   const { name, max, min } = item
303 |   return `${bindValueConfig(
304 |     combineNameAndValue('name', name),
305 |   )} ${bindBooleanAndNumberConfig(
306 |     combineNameAndValue('max', max),
307 |   )} ${bindBooleanAndNumberConfig(combineNameAndValue('min', min))}`
308 | }
309 | 
310 | const getColorPickerFormItemContentConfig = (item: {
311 |   [key: string]: any
312 | }): string => {
313 |   const { name, size, modes, showAlpha, actions } = item
314 |   return `${bindValueConfig(
315 |     combineNameAndValue('name', name),
316 |   )} ${bindBooleanAndNumberConfig(
317 |     combineNameAndValue('modes', JSON.stringify(modes)),
318 |   )} ${bindBooleanAndNumberConfig(
319 |     combineNameAndValue('showAlpha', showAlpha),
320 |   )} ${bindBooleanAndNumberConfig(
321 |     combineNameAndValue('actions', JSON.stringify(actions)),
322 |   )} ${bindStringConfig(combineNameAndValue('size', size))}`
323 | }
324 | 
325 | const getDividerContentConfig = (item: { [key: string]: any }): string => {
326 |   const { dashed, vertical, titlePlacement } = item
327 |   return `${bindBooleanAndNumberConfig(
328 |     combineNameAndValue('dashed', dashed),
329 |   )} ${bindBooleanAndNumberConfig(
330 |     combineNameAndValue('vertical', vertical),
331 |   )} ${bindStringConfig(
332 |     combineNameAndValue('title-placement', titlePlacement),
333 |   )}`
334 | }
335 | 
336 | const getDatePickerFormItemContentConfig = (item: {
337 |   [key: string]: any
338 | }): string => {
339 |   const {
340 |     name,
341 |     clearable,
342 |     format,
343 |     size,
344 |     actions,
345 |     placeholder,
346 |     type,
347 |     startPlaceholder,
348 |     endPlaceholder,
349 |     separator,
350 |   } = item
351 |   return `${bindValueConfig(
352 |     combineNameAndValue('name', name),
353 |   )} ${bindBooleanAndNumberConfig(
354 |     combineNameAndValue('actions', JSON.stringify(actions)),
355 |   )} ${bindBooleanAndNumberConfig(
356 |     combineNameAndValue('clearable', clearable),
357 |   )} ${bindStringConfig(
358 |     combineNameAndValue('format', format),
359 |   )} ${bindStringConfig(combineNameAndValue('size', size))} ${bindStringConfig(
360 |     combineNameAndValue('placeholder', placeholder),
361 |   )} ${bindStringConfig(combineNameAndValue('type', type))} ${bindStringConfig(
362 |     combineNameAndValue('start-placeholder', startPlaceholder),
363 |   )} ${bindStringConfig(
364 |     combineNameAndValue('end-placeholder', endPlaceholder),
365 |   )} ${bindStringConfig(combineNameAndValue('separator', separator))}`
366 | }
367 | 
368 | const getFormItemConfig = (item: formItemType): string => {
369 |   return `label="${item.formItemConfig.label as string}" path="${
370 |     item.formItemConfig.name as string
371 |   }"`
372 | }
373 | 
374 | const getFormItemContentConfig = (
375 |   item: { [key: string]: any },
376 |   type: string,
377 | ): string => {
378 |   if (Object.keys(item).length === 0)
379 |     return ''
380 | 
381 |   switch (type) {
382 |     case '0':
383 |       return getInputFormItemContentConfig(item)
384 |     case '1':
385 |       return getInputNumberFormItemContentConfig(item)
386 |     case '2':
387 |       return getRadioFormItemContentConfig(item)
388 |     case '3':
389 |       return getRateFormItemContentConfig(item)
390 |     case '4':
391 |       return getSelectFormItemContentConfig(item)
392 |     case '5':
393 |       return getSliderFormItemContentConfig(item)
394 |     case '6':
395 |       return getSwitchFormItemContentConfig(item)
396 |     case '7':
397 |       return getTimePickerFormItemContentConfig(item)
398 |     case '8':
399 |       return getTreeSelectFormItemContentConfig(item)
400 |     case '9':
401 |       return getUploadFormItemContentConfig(item)
402 |     case '10':
403 |       return getColorPickerFormItemContentConfig(item)
404 |     case '11':
405 |       return getCheckBoxFormItemContentConfig(item)
406 |     case '12':
407 |       return getDatePickerFormItemContentConfig(item)
408 |     case '13':
409 |       return getDividerContentConfig(item)
410 |     default:
411 |       return ''
412 |   }
413 | }
414 | 
415 | const getTypeToFormItem = (item: formItemType): string => {
416 |   const type = item.value
417 |   const formItemConfig = getFormItemConfig(item)
418 |   const formItemContentConfig = getFormItemContentConfig(
419 |     item.formItemConfig,
420 |     type,
421 |   )
422 |   switch (type) {
423 |     case '0':
424 |       return `
425 |       <${PREFIX}-form-item ${formItemConfig}>
426 |         <${PREFIX}-input ${formItemContentConfig}/>
427 |       </${PREFIX}-form-item>`
428 |     case '1':
429 |       return `
430 |       <${PREFIX}-form-item ${formItemConfig}>
431 |         <${PREFIX}-input-number ${formItemContentConfig}/>
432 |       </${PREFIX}-form-item>`
433 |     case '2':
434 |       return `
435 |       <${PREFIX}-form-item ${formItemConfig}>
436 |         <${PREFIX}-radio-group ${formItemContentConfig}>
437 |           <${PREFIX}-space>
438 |             ${
439 |               item.formItemConfig.options !== undefined
440 |                 ? (
441 |                     item.formItemConfig.options as Array<{
442 |                       label: string
443 |                       value: string
444 |                     }>
445 |                   )
446 |                     .map(
447 |                       (option: { value: string; label: string }) =>
448 |                         `<${PREFIX}-radio value="${option.value}">${option.label}</${PREFIX}-radio>`,
449 |                     )
450 |                     .join('')
451 |                 : ''
452 |             }
453 |           </${PREFIX}-space>
454 |         </${PREFIX}-radio-group>
455 |       </${PREFIX}-form-item>`
456 |     case '3':
457 |       return `
458 |       <${PREFIX}-form-item ${formItemConfig}>
459 |         <${PREFIX}-rate ${formItemContentConfig}/>
460 |       </${PREFIX}-form-item>`
461 |     case '4':
462 |       return `
463 |       <${PREFIX}-form-item ${formItemConfig}>
464 |         <${PREFIX}-select ${formItemContentConfig} />
465 |       </${PREFIX}-form-item>`
466 |     case '5':
467 |       return `
468 |       <${PREFIX}-form-item ${formItemConfig}>
469 |         <${PREFIX}-slider ${formItemContentConfig}/>
470 |       </${PREFIX}-form-item>`
471 |     case '6':
472 |       return `
473 |       <${PREFIX}-form-item ${formItemConfig}>
474 |         <${PREFIX}-switch ${formItemContentConfig}/>
475 |       </${PREFIX}-form-item>`
476 |     case '7':
477 |       return `
478 |       <${PREFIX}-form-item ${formItemConfig}>
479 |         <${PREFIX}-time-picker ${formItemContentConfig}/>
480 |       </${PREFIX}-form-item>`
481 |     case '8':
482 |       return `
483 |       <${PREFIX}-form-item ${formItemConfig}>
484 |           <${PREFIX}-tree-select ${formItemContentConfig}/>
485 |       </${PREFIX}-form-item>`
486 |     case '9':
487 |       return `
488 |       <${PREFIX}-form-item ${formItemConfig}>
489 |         <${PREFIX}-upload ${formItemContentConfig}>
490 |           <${PREFIX}-button>上传文件</${PREFIX}-button>
491 |         </${PREFIX}-upload>
492 |       </${PREFIX}-form-item>`
493 |     case '10':
494 |       return `
495 |       <${PREFIX}-form-item ${formItemConfig}>
496 |         <${PREFIX}-color-picker ${formItemContentConfig}/>
497 |       </${PREFIX}-form-item>`
498 |     case '11':
499 |       return `
500 |       <${PREFIX}-form-item ${formItemConfig}>
501 |         <${PREFIX}-checkbox-group ${formItemContentConfig}>
502 |           <${PREFIX}-space item-style="display: flex;">
503 |             ${
504 |               item.formItemConfig.options !== undefined
505 |                 ? (
506 |                     item.formItemConfig.options as Array<{
507 |                       label: string
508 |                       value: string
509 |                     }>
510 |                   )
511 |                     .map(
512 |                       (option: { value: string; label: string }) =>
513 |                         `<${PREFIX}-checkbox value="${option.value}" label="${option.label}"/>`,
514 |                     )
515 |                     .join('')
516 |                 : ''
517 |             }
518 |           </${PREFIX}-space>
519 |         </${PREFIX}-checkbox-group>
520 |       </${PREFIX}-form-item>`
521 |     case '13':
522 |       return `
523 |         <${PREFIX}-divider ${formItemContentConfig}>${
524 |         (item.formItemConfig.name as string) ?? ''
525 |       }</${PREFIX}-divider>`
526 |     case '12':
527 |       return `
528 |       <${PREFIX}-form-item ${formItemConfig}>
529 |         <${PREFIX}-date-picker ${formItemContentConfig}/>
530 |       </${PREFIX}-form-item>`
531 |     default:
532 |       return ''
533 |   }
534 | }
535 | 
536 | const getFormItemImport = (data: formItemType[]): string => {
537 |   const prefix = PREFIX.toUpperCase()
538 |   const { confirmAndCancelBtn } = store.state
539 |   const array: string[] = []
540 |   data.forEach((item) => {
541 |     return typeToImport[item.value].forEach((importItem) => {
542 |       array.push(`${prefix}${importItem} ,`)
543 |     })
544 |   })
545 |   // button
546 |   if (confirmAndCancelBtn) {
547 |     ['Button', 'Space'].forEach((item) => {
548 |       array.push(`${prefix}${item} ,`)
549 |     })
550 |   }
551 |   return `${Array.from(new Set(array)).join('')}`
552 | }
553 | 
554 | // formConfig
555 | 
556 | const getFormConfig = (): string => {
557 |   const {
558 |     size,
559 |     inline,
560 |     labelWidth,
561 |     labelAlign,
562 |     labelPlacement,
563 |     showFeedback,
564 |     showLabel,
565 |     showRequireMark,
566 |     requireMarkPlacement,
567 |     model,
568 |   } = store.state.formConfig
569 | 
570 |   return `${bindBooleanAndNumberConfig(
571 |     combineNameAndValue('model', model),
572 |   )} ${bindStringConfig(
573 |     combineNameAndValue('size', size),
574 |   )} ${bindBooleanAndNumberConfig(
575 |     combineNameAndValue('inline', inline),
576 |   )} ${bindBooleanAndNumberConfig(
577 |     combineNameAndValue('label-width', labelWidth),
578 |   )} ${bindStringConfig(
579 |     combineNameAndValue('label-align', labelAlign),
580 |   )} ${bindStringConfig(
581 |     combineNameAndValue('label-placement', labelPlacement),
582 |   )} ${bindBooleanAndNumberConfig(
583 |     combineNameAndValue('show-feedback', showFeedback),
584 |   )} ${bindBooleanAndNumberConfig(
585 |     combineNameAndValue('show-label', showLabel),
586 |   )} ${bindBooleanAndNumberConfig(
587 |     combineNameAndValue('show-require-mark', showRequireMark),
588 |   )} ${bindBooleanAndNumberConfig(
589 |     combineNameAndValue('rules', 'rules'),
590 |   )} ${bindStringConfig(
591 |     combineNameAndValue('require-mark-placement', requireMarkPlacement),
592 |   )}`
593 | }
594 | 
595 | // import
596 | 
597 | const getImport = (data: formItemType[]): string => {
598 |   const prefix = PREFIX.toUpperCase()
599 |   if (store.state.autoAddImport) {
600 |     const importStr = `
601 | <script setup type="ts">
602 |   import { ${getFormItemImport(
603 |     data,
604 |   )} ${prefix}Form, ${prefix}FormItem } from '${UI_NAME}';
605 | </script>
606 |     `
607 |     return importStr
608 |   }
609 | 
610 |   return ''
611 | }
612 | 
613 | // confirmAndCancelButton
614 | 
615 | const getConfirmAndCancelButton = (): string => {
616 |   const { confirmAndCancelBtn } = store.state
617 |   if (confirmAndCancelBtn) {
618 |     return `
619 |       <${PREFIX}-form-item>
620 |         <${PREFIX}-space justify="center">
621 |           <${PREFIX}-button @click="handleValidateClick">确认</${PREFIX}-button>
622 |           <${PREFIX}-button>取消</${PREFIX}-button>
623 |         </${PREFIX}-space>
624 |       </${PREFIX}-form-item>`
625 |   }
626 |   return ''
627 | }
628 | 
629 | // rules
630 | 
631 | const getRulesObject = (data: formItemType[]): string => {
632 |   const rulesArray: string[] = []
633 | 
634 |   for (let i = 0; i < data.length; i++) {
635 |     const item = data[i]
636 |     if (item.formItemConfig.name === undefined)
637 |       continue
638 |     const rules = data[i].formItemConfig.rules as string[]
639 |     const itemRulesArray: string[] = []
640 | 
641 |     for (let i = 0; i < rules.length; i++) {
642 |       const element = rules[i]
643 |       switch (element) {
644 |         case '0':
645 |           itemRulesArray.push(
646 |             `{ required: true, message: '请输入${
647 |               item.formItemConfig.label as string
648 |             }', trigger: 'blur' },`,
649 |           )
650 |           break
651 |         case '1':
652 |           itemRulesArray.push(
653 |             `{ validator: (rule,value)=>{
654 |               let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
655 |               if(!reg.test(value)){
656 |                 return new Error('请输入正确的${
657 |                   item.formItemConfig.label as string
658 |                 }');
659 |               }
660 |               return true;
661 |             }, message: '请输入正确的${
662 |               item.formItemConfig.label as string
663 |             }', trigger: 'blur' },`,
664 |           )
665 |           break
666 |         case '2':
667 |           itemRulesArray.push(
668 |             `{ validator: (rule,value)=>{
669 |               let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
670 |               if(!reg.test(value)){
671 |                 return new Error('请输入正确的${
672 |                   item.formItemConfig.label as string
673 |                 }');
674 |               }
675 |               return true;
676 |             }, message: '请输入正确的${
677 |               item.formItemConfig.label as string
678 |             }', trigger: 'blur' },`,
679 |           )
680 |           break
681 |         default:
682 |           break
683 |       }
684 |     }
685 | 
686 |     rulesArray.push(`${item.formItemConfig.name as string}: [
687 |       ${itemRulesArray.join('')}
688 |     ],`)
689 |   }
690 | 
691 |   if (rulesArray.length === 0)
692 |     return ''
693 | 
694 |   return `
695 |   const rules = {
696 |     ${rulesArray.join('')}
697 |   }
698 | `
699 | }
700 | 
701 | // entry
702 | 
703 | export const generateCode = (data: formItemType[]): string => {
704 |   const Code = `
705 |   <template>
706 |     <${PREFIX}-form ${getFormConfig()}>
707 |     ${data.map(item => getTypeToFormItem(item)).join('')}
708 |     ${getConfirmAndCancelButton()}
709 |     </${PREFIX}-form>
710 |   </template>
711 |   <script setup type="ts">
712 |   ${getImport(data)}
713 |   ${getRulesObject(data)}
714 |   </script>
715 |   `
716 | 
717 |   return Code
718 | }
719 | 
720 | // normal
721 | 
722 | export const copy = (value: string): void => {
723 |   const textarea = document.createElement('textarea')
724 |   textarea.value = value
725 |   document.body.appendChild(textarea)
726 |   textarea.select()
727 |   // 暂时没有可用的替代方法。
728 |   // 确切的说这个 API 本来也不是标准 API，而是一个 IE 的私有 API，在 IE9 时被引入，后续的若干年里陆续被 Chrome / Firefix / Opera 等浏览器也做了兼容支持，但始终没有形成标准。
729 |   // 这个 API 被废弃的主要原因第一个就是安全问题，在用户未经授权的情况下就可以执行一些敏感操作，这就很恐怖了；第二个问题是因为这是一个同步方法，而且操作了 DOM 对象，会阻塞页面渲染和脚本执行，因当初还没 Promise，所以没设计成异步，挖坑了。新设计的 API 肯定是要解决这两个问题。
730 |   // 不过 W3C 也正在拟草案，大概率以后会引入一个叫 Clipboard 的类型（Chrome 66.0 开始已经有这个类型了，不过还不能用，相关 API 仅存在于文档中），用来处理跟剪贴版相关的操作，不过之后肯定会是像现在获取地理位置啊、麦克风啊什么的，浏览器先会弹出一个对话框让用户授权，你才能读写剪贴板了。
731 |   document.execCommand('copy')
732 |   document.body.removeChild(textarea)
733 | }
734 | 
735 | export function copyPropertyValue<T, K extends keyof T>(
736 |   obj: T,
737 |   target: T,
738 |   key: K,
739 | ): void {
740 |   obj[key] = target[key]
741 | }
742 | 
743 | export function getParentElement(
744 |   element: HTMLElement | null,
745 | ): HTMLElement | null {
746 |   if (element === null)
747 |     return null
748 | 
749 |   let currElement: HTMLElement | null = element
750 |   while (currElement != null) {
751 |     if (currElement.dataset.drag === 'doom')
752 |       return currElement
753 | 
754 |     currElement = currElement.parentElement
755 |   }
756 |   return null
757 | }
758 | 


--------------------------------------------------------------------------------