From feb2905c1c8ddafe0cad4078b623743b84842278 Mon Sep 17 00:00:00 2001
From: v_huyilin <v_huyilin@baidu.com>
Date: Tue, 3 Dec 2024 17:40:40 +0800
Subject: [PATCH] feat style config

---
 packages/form-design/Left/index.vue           |   6 +-
 .../Right/AttrEdit/StyleConfig.vue            | 224 --------
 .../Right/AttrEdit/StyleConfig/basicSchema.ts |  82 +++
 .../Right/AttrEdit/StyleConfig/index.vue      |  27 +
 .../Right/AttrEdit/StyleConfig/schema.ts      | 479 ++++++++++++++++++
 packages/form-design/Right/AttrEdit/index.vue |   2 +-
 packages/styles/form-design/_right.scss       |   5 +-
 packages/utils/designUtils.ts                 |   2 +-
 8 files changed, 597 insertions(+), 230 deletions(-)
 delete mode 100644 packages/form-design/Right/AttrEdit/StyleConfig.vue
 create mode 100644 packages/form-design/Right/AttrEdit/StyleConfig/basicSchema.ts
 create mode 100644 packages/form-design/Right/AttrEdit/StyleConfig/index.vue
 create mode 100644 packages/form-design/Right/AttrEdit/StyleConfig/schema.ts

diff --git a/packages/form-design/Left/index.vue b/packages/form-design/Left/index.vue
index 28569629..6bcec7da 100644
--- a/packages/form-design/Left/index.vue
+++ b/packages/form-design/Left/index.vue
@@ -88,9 +88,9 @@ const onClone = (source: FormElement) => {
     name: `form-${getRandomId(4)}`
   }
 
-  if (source.type === 'layout' || source.attrSchema.initialValues?.children) {
-    parse.children = []
-  }
+  // if (source.type === 'layout' || source.attrSchema.initialValues?.children) {
+  //   parse.children = []
+  // }
 
   return parse
 }
diff --git a/packages/form-design/Right/AttrEdit/StyleConfig.vue b/packages/form-design/Right/AttrEdit/StyleConfig.vue
deleted file mode 100644
index 1e697ddf..00000000
--- a/packages/form-design/Right/AttrEdit/StyleConfig.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-  <div :class="ns('style-config')">
-    <el-divider>组件样式</el-divider>
-    <FormRender v-model="currentProps" :schema="schemaMini" ref="formRef" />
-    <el-button type="primary" plain size="small" @click="visible = true">自定义更多样式</el-button>
-
-    <el-drawer v-model="visible" title="组件样式">
-      <FormRender v-model="currentProps" :schema="schema" ref="formRef" />
-    </el-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { FormSchema } from '@vue-form-craft/types'
-import FormRender from '../../../form-render'
-import { ns } from '@vue-form-craft/utils'
-
-const currentProps = defineModel<Record<string, any>>()
-
-const visible = ref(false)
-
-const schemaMini: FormSchema = {
-  labelWidth: 60,
-  labelAlign: 'right',
-  size: 'small',
-  items: [
-    {
-      label: 'class',
-      component: 'Input',
-      props: {
-        placeholder: ''
-      },
-      designKey: 'design-KUlI',
-      name: 'class'
-    },
-    {
-      label: '宽度',
-      component: 'SelectInput',
-      props: {
-        selectPosition: 'append',
-        selectWidth: 50,
-        selectInitialValue: '%',
-        placeholder: '100',
-        options: [
-          {
-            label: '%',
-            value: '%'
-          },
-          {
-            label: 'px',
-            value: 'px'
-          },
-          {
-            label: 'vw',
-            value: 'vw'
-          },
-          {
-            label: 'rem',
-            value: 'rem'
-          }
-        ],
-        clearable: true
-      },
-      designKey: 'design-Bvi4',
-      name: 'style.width'
-    },
-    {
-      label: '高度',
-      component: 'SelectInput',
-      props: {
-        selectPosition: 'append',
-        selectWidth: 50,
-        selectInitialValue: 'px',
-        placeholder: 'auto',
-        options: [
-          {
-            label: '%',
-            value: '%'
-          },
-          {
-            label: 'px',
-            value: 'px'
-          },
-          {
-            label: 'vh',
-            value: 'vh'
-          },
-          {
-            label: 'rem',
-            value: 'rem'
-          }
-        ],
-        clearable: true
-      },
-      designKey: 'design-Bvi44',
-      name: 'style.height'
-    }
-  ]
-}
-
-const schema: FormSchema = {
-  labelWidth: 60,
-  labelAlign: 'right',
-  size: 'small',
-  items: [
-    {
-      label: 'ID',
-      component: 'Input',
-      props: {
-        placeholder: ''
-      },
-      designKey: 'form-0vQJ',
-      name: 'id'
-    },
-    {
-      label: 'class',
-      component: 'Input',
-      props: {
-        placeholder: ''
-      },
-      designKey: 'design-KUlI',
-      name: 'class'
-    },
-    {
-      label: '宽度',
-      component: 'SelectInput',
-      props: {
-        selectPosition: 'append',
-        selectWidth: 50,
-        selectInitialValue: '%',
-        placeholder: '100',
-        options: [
-          {
-            label: '%',
-            value: '%'
-          },
-          {
-            label: 'px',
-            value: 'px'
-          },
-          {
-            label: 'vw',
-            value: 'vw'
-          },
-          {
-            label: 'rem',
-            value: 'rem'
-          }
-        ],
-        clearable: true
-      },
-      designKey: 'design-Bvi4',
-      name: 'style.width'
-    },
-    {
-      label: '高度',
-      component: 'SelectInput',
-      props: {
-        selectPosition: 'append',
-        selectWidth: 50,
-        selectInitialValue: 'px',
-        placeholder: 'auto',
-        options: [
-          {
-            label: '%',
-            value: '%'
-          },
-          {
-            label: 'px',
-            value: 'px'
-          },
-          {
-            label: 'vh',
-            value: 'vh'
-          },
-          {
-            label: 'rem',
-            value: 'rem'
-          }
-        ],
-        clearable: true
-      },
-      designKey: 'design-Bvi44',
-      name: 'style.height'
-    },
-    {
-      label: '背景色',
-      component: 'ColorInput',
-      designKey: 'form-YicU',
-      name: 'style.backgroundColor'
-    },
-    {
-      label: '文字颜色',
-      component: 'ColorInput',
-      designKey: 'design-A2bj',
-      name: 'style.color'
-    },
-    {
-      label: '缩放',
-      component: 'Slider',
-      designKey: 'design-A2sf',
-      name: 'style.transform',
-      props: {
-        min: 50,
-        max: 150
-      },
-      initialValue:100,
-      change: [
-        {
-          target: 'style.transform',
-          value: '{{ `scale(${$values.style.transform / 100 })`  }}'
-        }
-      ]
-    },
-    {
-      label: '自定义',
-      component: 'JsonEdit',
-      designKey: 'design-A2bj',
-      name: 'style'
-    }
-  ]
-}
-</script>
diff --git a/packages/form-design/Right/AttrEdit/StyleConfig/basicSchema.ts b/packages/form-design/Right/AttrEdit/StyleConfig/basicSchema.ts
new file mode 100644
index 00000000..63852bf3
--- /dev/null
+++ b/packages/form-design/Right/AttrEdit/StyleConfig/basicSchema.ts
@@ -0,0 +1,82 @@
+import type { FormSchema } from "@vue-form-craft/types"
+
+const schema: FormSchema = {
+    labelWidth: 60,
+    labelAlign: 'right',
+    size: 'small',
+    items: [
+      {
+        label: 'class',
+        component: 'Input',
+        props: {
+          placeholder: ''
+        },
+        designKey: 'design-KUlI',
+        name: 'class'
+      },
+      {
+        label: '宽度',
+        component: 'SelectInput',
+        props: {
+          selectPosition: 'append',
+          selectWidth: 50,
+          selectInitialValue: '%',
+          placeholder: '100',
+          options: [
+            {
+              label: '%',
+              value: '%'
+            },
+            {
+              label: 'px',
+              value: 'px'
+            },
+            {
+              label: 'vw',
+              value: 'vw'
+            },
+            {
+              label: 'rem',
+              value: 'rem'
+            }
+          ],
+          clearable: true
+        },
+        designKey: 'design-Bvi4',
+        name: 'style.width'
+      },
+      {
+        label: '高度',
+        component: 'SelectInput',
+        props: {
+          selectPosition: 'append',
+          selectWidth: 50,
+          selectInitialValue: 'px',
+          placeholder: 'auto',
+          options: [
+            {
+              label: '%',
+              value: '%'
+            },
+            {
+              label: 'px',
+              value: 'px'
+            },
+            {
+              label: 'vh',
+              value: 'vh'
+            },
+            {
+              label: 'rem',
+              value: 'rem'
+            }
+          ],
+          clearable: true
+        },
+        designKey: 'design-Bvi44',
+        name: 'style.height'
+      }
+    ]
+  }
+
+export default schema
\ No newline at end of file
diff --git a/packages/form-design/Right/AttrEdit/StyleConfig/index.vue b/packages/form-design/Right/AttrEdit/StyleConfig/index.vue
new file mode 100644
index 00000000..e8f9d3a2
--- /dev/null
+++ b/packages/form-design/Right/AttrEdit/StyleConfig/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div :class="ns('style-config')">
+    <el-divider>组件样式</el-divider>
+    <FormRender v-model="currentProps" :schema="basicSchema" ref="formRef" />
+    <div class="more">
+      <el-button type="primary" plain size="small" @click="visible = true"
+        >自定义更多样式</el-button
+      >
+    </div>
+
+    <el-drawer v-model="visible" title="组件样式">
+      <FormRender v-model="currentProps" :schema="schema" ref="formRef" />
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import FormRender from '@vue-form-craft/form-render'
+import { ns } from '@vue-form-craft/utils'
+import basicSchema from './basicSchema'
+import schema from './schema'
+
+const currentProps = defineModel<Record<string, any>>()
+
+const visible = ref(false)
+</script>
diff --git a/packages/form-design/Right/AttrEdit/StyleConfig/schema.ts b/packages/form-design/Right/AttrEdit/StyleConfig/schema.ts
new file mode 100644
index 00000000..9737df77
--- /dev/null
+++ b/packages/form-design/Right/AttrEdit/StyleConfig/schema.ts
@@ -0,0 +1,479 @@
+import type { FormSchema } from '@vue-form-craft/types'
+
+const schema: FormSchema = {
+  labelWidth: 60,
+  labelAlign: 'top',
+  size: 'small',
+  items: [
+    {
+      label: 'ID',
+      component: 'Input',
+      props: {
+        placeholder: ''
+      },
+      designKey: 'form-0vQJ',
+      name: 'id'
+    },
+    {
+      label: 'class',
+      component: 'Input',
+      props: {
+        placeholder: ''
+      },
+      designKey: 'design-KUlI',
+      name: 'class'
+    },
+    {
+      label: '宽度',
+      component: 'SelectInput',
+      props: {
+        selectPosition: 'append',
+        selectWidth: 50,
+        selectInitialValue: '%',
+        placeholder: '100',
+        options: [
+          {
+            label: '%',
+            value: '%'
+          },
+          {
+            label: 'px',
+            value: 'px'
+          },
+          {
+            label: 'vw',
+            value: 'vw'
+          },
+          {
+            label: 'rem',
+            value: 'rem'
+          }
+        ],
+        clearable: true
+      },
+      designKey: 'design-Bvi4',
+      name: 'style.width'
+    },
+    {
+      label: '高度',
+      component: 'SelectInput',
+      props: {
+        selectPosition: 'append',
+        selectWidth: 50,
+        selectInitialValue: 'px',
+        placeholder: 'auto',
+        options: [
+          {
+            label: '%',
+            value: '%'
+          },
+          {
+            label: 'px',
+            value: 'px'
+          },
+          {
+            label: 'vh',
+            value: 'vh'
+          },
+          {
+            label: 'rem',
+            value: 'rem'
+          }
+        ],
+        clearable: true
+      },
+      designKey: 'design-Bvi44',
+      name: 'style.height'
+    },
+    {
+      label: '背景色',
+      component: 'ColorInput',
+      designKey: 'form-YicU',
+      name: 'style.backgroundColor'
+    },
+    {
+      label: '文字颜色',
+      component: 'ColorInput',
+      designKey: 'design-A2bj',
+      name: 'style.color'
+    },
+    {
+      label: '缩放',
+      component: 'Slider',
+      designKey: 'design-A2sf',
+      name: 'style.transform',
+      props: {
+        min: 50,
+        max: 150
+      },
+      initialValue: 100,
+      change: [
+        {
+          target: 'style.transform',
+          value: '{{ `scale(${$values.style.transform / 100 })`  }}'
+        }
+      ]
+    },
+    {
+      children: [
+        {
+          label: '外间距',
+          name: 'margin',
+          component: 'TabsItem',
+          children: [
+            {
+              props: {
+                columns: 2,
+                columnGap: 20,
+                rowGap: 20
+              },
+              component: 'Grid',
+              designKey: 'design-QqeY',
+              name: 'form-3eBs',
+              children: [
+                {
+                  label: '上',
+                  props: {
+                    placeholder: '0',
+                    selectPosition: 'append',
+                    selectWidth: 60,
+                    selectInitialValue: 'px',
+                    options: [
+                      {
+                        label: 'px',
+                        value: 'px'
+                      },
+                      {
+                        label: '%',
+                        value: '%'
+                      },
+                      {
+                        label: 'em',
+                        value: 'em'
+                      },
+                      {
+                        label: 'rem',
+                        value: 'rem'
+                      },
+                      {
+                        label: 'vw',
+                        value: 'vw'
+                      },
+                      {
+                        label: 'vh',
+                        value: 'vh'
+                      }
+                    ]
+                  },
+                  component: 'SelectInput',
+                  designKey: 'design-F9CI',
+                  name: 'style.marginTop'
+                },
+                {
+                  label: '下',
+                  props: {
+                    placeholder: '0',
+                    selectPosition: 'append',
+                    selectWidth: 60,
+                    selectInitialValue: 'px',
+                    options: [
+                      {
+                        label: 'px',
+                        value: 'px'
+                      },
+                      {
+                        label: '%',
+                        value: '%'
+                      },
+                      {
+                        label: 'em',
+                        value: 'em'
+                      },
+                      {
+                        label: 'rem',
+                        value: 'rem'
+                      },
+                      {
+                        label: 'vw',
+                        value: 'vw'
+                      },
+                      {
+                        label: 'vh',
+                        value: 'vh'
+                      }
+                    ]
+                  },
+                  component: 'SelectInput',
+                  designKey: 'form-XHJ7',
+                  name: 'style.marginBottom'
+                },
+                {
+                  label: '左',
+                  props: {
+                    placeholder: '0',
+                    selectPosition: 'append',
+                    selectWidth: 60,
+                    selectInitialValue: 'px',
+                    options: [
+                      {
+                        label: 'px',
+                        value: 'px'
+                      },
+                      {
+                        label: '%',
+                        value: '%'
+                      },
+                      {
+                        label: 'em',
+                        value: 'em'
+                      },
+                      {
+                        label: 'rem',
+                        value: 'rem'
+                      },
+                      {
+                        label: 'vw',
+                        value: 'vw'
+                      },
+                      {
+                        label: 'vh',
+                        value: 'vh'
+                      }
+                    ]
+                  },
+                  component: 'SelectInput',
+                  designKey: 'form-Aeb5',
+                  name: 'style.marginLeft'
+                },
+                {
+                  label: '右',
+                  props: {
+                    placeholder: '0',
+                    selectPosition: 'append',
+                    selectWidth: 60,
+                    selectInitialValue: 'px',
+                    options: [
+                      {
+                        label: 'px',
+                        value: 'px'
+                      },
+                      {
+                        label: '%',
+                        value: '%'
+                      },
+                      {
+                        label: 'em',
+                        value: 'em'
+                      },
+                      {
+                        label: 'rem',
+                        value: 'rem'
+                      },
+                      {
+                        label: 'vw',
+                        value: 'vw'
+                      },
+                      {
+                        label: 'vh',
+                        value: 'vh'
+                      }
+                    ]
+                  },
+                  component: 'SelectInput',
+                  designKey: 'form-g0Ss',
+                  name: 'style.marginRight'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: '内间距',
+          name: 'padding',
+          component: 'TabsItem',
+          children: [
+            {
+              props: {
+                columns: 2,
+                columnGap: 20,
+                rowGap: 20
+              },
+              component: 'Grid',
+              designKey: 'design-QqeY',
+              name: 'form-3eBs',
+              children: [
+                {
+                  label: '上',
+                  props: {
+                    placeholder: '0',
+                    selectPosition: 'append',
+                    selectWidth: 60,
+                    selectInitialValue: 'px',
+                    options: [
+                      {
+                        label: 'px',
+                        value: 'px'
+                      },
+                      {
+                        label: '%',
+                        value: '%'
+                      },
+                      {
+                        label: 'em',
+                        value: 'em'
+                      },
+                      {
+                        label: 'rem',
+                        value: 'rem'
+                      },
+                      {
+                        label: 'vw',
+                        value: 'vw'
+                      },
+                      {
+                        label: 'vh',
+                        value: 'vh'
+                      }
+                    ]
+                  },
+                  component: 'SelectInput',
+                  designKey: 'design-F9CI',
+                  name: 'style.paddingTop'
+                },
+                {
+                  label: '下',
+                  props: {
+                    placeholder: '0',
+                    selectPosition: 'append',
+                    selectWidth: 60,
+                    selectInitialValue: 'px',
+                    options: [
+                      {
+                        label: 'px',
+                        value: 'px'
+                      },
+                      {
+                        label: '%',
+                        value: '%'
+                      },
+                      {
+                        label: 'em',
+                        value: 'em'
+                      },
+                      {
+                        label: 'rem',
+                        value: 'rem'
+                      },
+                      {
+                        label: 'vw',
+                        value: 'vw'
+                      },
+                      {
+                        label: 'vh',
+                        value: 'vh'
+                      }
+                    ]
+                  },
+                  component: 'SelectInput',
+                  designKey: 'form-XHJ7',
+                  name: 'style.paddingBottom'
+                },
+                {
+                  label: '左',
+                  props: {
+                    placeholder: '0',
+                    selectPosition: 'append',
+                    selectWidth: 60,
+                    selectInitialValue: 'px',
+                    options: [
+                      {
+                        label: 'px',
+                        value: 'px'
+                      },
+                      {
+                        label: '%',
+                        value: '%'
+                      },
+                      {
+                        label: 'em',
+                        value: 'em'
+                      },
+                      {
+                        label: 'rem',
+                        value: 'rem'
+                      },
+                      {
+                        label: 'vw',
+                        value: 'vw'
+                      },
+                      {
+                        label: 'vh',
+                        value: 'vh'
+                      }
+                    ]
+                  },
+                  component: 'SelectInput',
+                  designKey: 'form-Aeb5',
+                  name: 'style.paddingLeft'
+                },
+                {
+                  label: '右',
+                  props: {
+                    placeholder: '0',
+                    selectPosition: 'append',
+                    selectWidth: 60,
+                    selectInitialValue: 'px',
+                    options: [
+                      {
+                        label: 'px',
+                        value: 'px'
+                      },
+                      {
+                        label: '%',
+                        value: '%'
+                      },
+                      {
+                        label: 'em',
+                        value: 'em'
+                      },
+                      {
+                        label: 'rem',
+                        value: 'rem'
+                      },
+                      {
+                        label: 'vw',
+                        value: 'vw'
+                      },
+                      {
+                        label: 'vh',
+                        value: 'vh'
+                      }
+                    ]
+                  },
+                  component: 'SelectInput',
+                  designKey: 'form-g0Ss',
+                  name: 'style.paddingRight'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      props: {
+        defaultKey: 'margin',
+        tabPosition: 'top'
+      },
+      component: 'Tabs',
+      designKey: 'design-WK8O',
+      name: 'form-e9YD'
+    },
+    {
+      label: '自定义',
+      component: 'JsonEdit',
+      designKey: 'design-A2bj',
+      name: 'style'
+    }
+  ]
+}
+
+export default schema
diff --git a/packages/form-design/Right/AttrEdit/index.vue b/packages/form-design/Right/AttrEdit/index.vue
index 2b349b6c..a3ffe43c 100644
--- a/packages/form-design/Right/AttrEdit/index.vue
+++ b/packages/form-design/Right/AttrEdit/index.vue
@@ -15,7 +15,7 @@ import { getDataByPath, ns, setDataByPath } from '@vue-form-craft/utils'
 import { isString } from 'lodash'
 import type { FormItemType, FormSchema } from '@vue-form-craft/types'
 import LinkageConfig from './LinkageConfig.vue'
-import StyleConfig from './StyleConfig.vue'
+import StyleConfig from './StyleConfig/index.vue'
 import { useElements, useLang } from '@vue-form-craft/hooks'
 
 const elements = useElements()
diff --git a/packages/styles/form-design/_right.scss b/packages/styles/form-design/_right.scss
index 8b1c0ce2..aeeb2a2d 100644
--- a/packages/styles/form-design/_right.scss
+++ b/packages/styles/form-design/_right.scss
@@ -16,8 +16,11 @@
       }
 
       @include ns('style-config') {
-        text-align: center;
         padding-top: 20px;
+
+        .more {
+          text-align: center;
+        }
       }
     }
   }
diff --git a/packages/utils/designUtils.ts b/packages/utils/designUtils.ts
index 946acd7c..4eeaaa51 100644
--- a/packages/utils/designUtils.ts
+++ b/packages/utils/designUtils.ts
@@ -52,7 +52,7 @@ export const copyItems = (list: FormItemType[], id: string): FormItemType[] => {
       const newItem = {
         ...cloneDeep(current),
         designKey: `form-${getRandomId(4)}`,
-        name: getRandomId(8)
+        name: `${current.name}-${getRandomId(2)}`
       }
       if (current.children) {
         newItem.children = copyChildren(current.children)