From e00c1e8116c0a32e15657b2a60b7346571aefb37 Mon Sep 17 00:00:00 2001
From: liberty <zhuizhuidea@gmail.com>
Date: Thu, 23 Mar 2023 07:50:46 +0800
Subject: [PATCH] feat: add i18n

---
 .eslintrc.cjs                                 |   3 +-
 examples/main.js                              |   4 +-
 examples/router.js                            |   6 +
 examples/uri.js                               |   5 +-
 examples/views/formEditor/objAction.vue       |  61 +++++
 examples/views/formEditor/objEdit.vue         |   4 +
 .../components/FormTypes/Date/mobile.vue      |   7 +-
 .../components/FormTypes/Html/mobile.vue      |  11 +-
 .../components/FormTypes/Number/pc.vue        |   2 +
 .../components/FormTypes/Signature/mobile.vue |  11 +-
 .../components/FormTypes/Signature/pc.vue     |  11 +-
 .../FormTypes/Uploadfile/mobile.vue           |   7 +-
 .../components/FormTypes/Uploadfile/pc.vue    |   6 +-
 .../components/Layout/CollapseLayout.jsx      |   1 +
 .../components/Layout/GridLayout.jsx          |   1 +
 .../components/Layout/TableLayout.jsx         |   5 +-
 .../components/Layout/TabsLayout.jsx          |   3 +-
 .../components/Panels/Blocks/index.jsx        |   8 +-
 .../Config/components/AllsidesComponent.vue   |   7 +-
 .../Config/components/BackgroundComponent.vue |  13 +-
 .../Config/components/BorderComponent.vue     |  16 +-
 .../Config/components/DataComponent1.jsx      |  19 +-
 .../Config/components/DataComponent2.jsx      |   8 +-
 .../Config/components/DataComponent3.vue      |   7 +-
 .../Config/components/GlobalConfigPanel.vue   |  35 +--
 .../Config/components/GridLayoutComponent.vue |  52 ++--
 .../Config/components/LimitComponent.vue      |   7 +-
 .../Panels/Config/components/PropsPanel.vue   | 136 +++++-----
 .../Panels/Config/components/TabsLayout.vue   |  83 +++---
 .../{TableLayout.vue => __TableLayout.vue}    |  10 +-
 .../components/Panels/Config/index.vue        |  44 ++--
 .../components/Sector/selectElement.jsx       |  41 +--
 packages/formEditor/componentsConfig.js       |   8 +-
 packages/formEditor/defaultProps.js           |   7 +-
 packages/formEditor/index.vue                 |  17 +-
 packages/formEditor/locale/en.js              | 241 ++++++++++++++++++
 packages/formEditor/locale/index.js           |   9 +
 packages/formEditor/locale/zh-cn.js           | 241 ++++++++++++++++++
 packages/formEditor/preview.vue               |   5 +-
 packages/hooks/use-i18n/index.js              |  24 +-
 packages/hooks/use-props/index.js             |  27 +-
 packages/region/index.vue                     |   5 +-
 packages/theme/formEditor/Blocks.scss         |   3 +
 packages/theme/formEditor/CollapseLayout.scss |   5 +
 packages/theme/formEditor/Config.scss         |   9 +
 packages/theme/formEditor/DeviceSwitch.scss   |   1 -
 .../theme/formEditor/DragGableLayout.scss     |   6 +-
 .../theme/formEditor/FormTypes/Number.scss    |   3 +
 packages/theme/formEditor/GridLayout.scss     |   3 +
 packages/theme/formEditor/SelectElement.scss  |   7 +-
 packages/theme/formEditor/TableLayout.scss    |  12 +-
 packages/theme/formEditor/TabsLayout.scss     |   8 +
 packages/theme/formEditor/index.scss          |   3 +
 packages/utils/field.js                       |  20 +-
 server/index.js                               |   2 +-
 55 files changed, 1019 insertions(+), 281 deletions(-)
 create mode 100644 examples/views/formEditor/objAction.vue
 rename packages/formEditor/components/Panels/Config/components/{TableLayout.vue => __TableLayout.vue} (81%)
 create mode 100644 packages/formEditor/locale/en.js
 create mode 100644 packages/formEditor/locale/index.js
 create mode 100644 packages/formEditor/locale/zh-cn.js
 create mode 100644 packages/theme/formEditor/CollapseLayout.scss
 create mode 100644 packages/theme/formEditor/FormTypes/Number.scss
 create mode 100644 packages/theme/formEditor/TabsLayout.scss

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index ad72f12..75dd609 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -29,7 +29,8 @@ module.exports = {
     'no-case-declarations': 'off',
     'no-useless-escape': 'off',
     'no-mixed-operators': 'off',
-    'no-async-promise-executor': 'off'
+    'no-async-promise-executor': 'off',
+    'quotes': 'off'
   },
   overrides: [
     // {
diff --git a/examples/main.js b/examples/main.js
index 943c7a1..88079c9 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -1,13 +1,15 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import Vant from 'vant'
+import Vant, { Locale } from 'vant'
+import enUS from 'vant/es/locale/lang/en-US'
 // import '@vant/touch-emulator'
 import 'element-plus/dist/index.css'
 import 'vant/lib/index.css'
 import router from './router'
 import App from './App.vue'
 const app = createApp(App)
+Locale.use('en-US', enUS)
 app.use(router)
 app.use(ElementPlus)
 app.use(Vant)
diff --git a/examples/router.js b/examples/router.js
index 33e6622..862bf85 100644
--- a/examples/router.js
+++ b/examples/router.js
@@ -2,6 +2,7 @@ import * as VueRouter from 'vue-router'
 import FormEditorView from './views/formEditor.vue'
 import FormEditorObjListView from './views/formEditor/objList.vue'
 import FormEditorObjEditView from './views/formEditor/objEdit.vue'
+import FormEditorObjActionView from './views/formEditor/objAction.vue'
 const routes = [
   {
     path: '/',
@@ -26,6 +27,11 @@ const routes = [
         name: 'objEdit',
         path: 'objEdit/:objid?',
         component: FormEditorObjEditView
+      },
+      {
+        name: 'objAction',
+        path: 'objAction/:objid?',
+        component: FormEditorObjActionView
       }
     ]
   }
diff --git a/examples/uri.js b/examples/uri.js
index 85c1619..d0e7985 100644
--- a/examples/uri.js
+++ b/examples/uri.js
@@ -1,4 +1,5 @@
-const host = 'http://192.168.31.181:8000'
+const host = 'http://192.168.31.181:8001'
 export default {
-  obj: `${host}/Everright-api/lowCode/obj`
+  obj: `${host}/Everright-api/lowCode/obj`,
+  uploadFile: `${host}/Everright-api/lowCode/uploads`
 }
diff --git a/examples/views/formEditor/objAction.vue b/examples/views/formEditor/objAction.vue
new file mode 100644
index 0000000..4bcdb85
--- /dev/null
+++ b/examples/views/formEditor/objAction.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import hooks from '@ER/hooks'
+import { EverrightPreview } from '@ER/formEditor'
+import uri from '@ER-examples/uri.js'
+const route = useRoute()
+const loading = ref(true)
+const lang = ref('en')
+const EReditorRef = ref(null)
+const state = reactive({
+  name: ''
+})
+window.lang = lang
+const getObjData = async () => {
+  try {
+    const {
+      data: {
+        content,
+        name
+      }
+    } = await hooks.useFetch(`${uri.obj}/${route.params.objid}`, {
+      method: 'get'
+    })
+    state.name = name
+    EReditorRef.value.setData(content)
+  } finally {
+    loading.value = false
+  }
+}
+const handleListener = async ({ type, data }) => {
+  console.log(type)
+  if (type === 'getJson') {
+    // console.log(data)
+    // return false
+    loading.value = true
+    try {
+      const postData = {
+        name: state.name,
+        content: data
+      }
+      await hooks.useFetch(`${uri.obj}/${route.params.objid}`, {
+        method: 'put',
+        data: postData
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+}
+onMounted(() => {
+  getObjData()
+})
+</script>
+<template>
+  <EverrightPreview
+    :lang="lang"
+    @listener="handleListener"
+    v-loading="loading"
+    ref="EReditorRef"/>
+</template>
diff --git a/examples/views/formEditor/objEdit.vue b/examples/views/formEditor/objEdit.vue
index 8d144ac..792601a 100644
--- a/examples/views/formEditor/objEdit.vue
+++ b/examples/views/formEditor/objEdit.vue
@@ -6,10 +6,12 @@ import { EverrightEditor } from '@ER/formEditor'
 import uri from '@ER-examples/uri.js'
 const route = useRoute()
 const loading = ref(true)
+const lang = ref('zh-cn')
 const EReditorRef = ref(null)
 const state = reactive({
   name: ''
 })
+window.lang = lang
 const getObjData = async () => {
   try {
     const {
@@ -51,7 +53,9 @@ onMounted(() => {
 </script>
 <template>
   <EverrightEditor
+    :lang="lang"
     @listener="handleListener"
     v-loading="loading"
+    :fileUploadURI="uri.uploadFile"
     ref="EReditorRef"/>
 </template>
diff --git a/packages/formEditor/components/FormTypes/Date/mobile.vue b/packages/formEditor/components/FormTypes/Date/mobile.vue
index 67a6c45..a313cee 100644
--- a/packages/formEditor/components/FormTypes/Date/mobile.vue
+++ b/packages/formEditor/components/FormTypes/Date/mobile.vue
@@ -11,6 +11,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const props = defineProps(['data', 'params'])
 const showPicker = ref(false)
 const currentDate = ref('')
@@ -75,7 +78,7 @@ const onConfirm = (value) => {
     currentValue.value = [value[0].selectedValues, value[1].selectedValues]
   }
 }
-const onCancel = ({ selectedOptions }) => {
+const onCancel = () => {
   showPicker.value = false
 }
 const onClear = () => {
@@ -120,7 +123,7 @@ const onClear = () => {
   <van-popup v-if="params.type === 'datetime'" v-model:show="showPicker" round position="bottom">
     <van-picker-group
       v-if="params.type === 'datetime'"
-      :tabs="['选择日期', '选择时间']"
+      :tabs="[t('er.form.selectDate'), t('er.form.selectTime')]"
       @confirm="onConfirm"
       @cancel="onCancel"
     >
diff --git a/packages/formEditor/components/FormTypes/Html/mobile.vue b/packages/formEditor/components/FormTypes/Html/mobile.vue
index 76a980c..7e89caa 100644
--- a/packages/formEditor/components/FormTypes/Html/mobile.vue
+++ b/packages/formEditor/components/FormTypes/Html/mobile.vue
@@ -10,6 +10,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const props = defineProps(['data', 'params'])
 const dialogVisible = ref(false)
 const popup = ref()
@@ -18,9 +21,9 @@ const currentValue = computed({
   get () {
     let result = ''
     if (props.data.options.defaultValue) {
-      result = '已填写'
+      result = t('er.form.filled')
     } else {
-      result = '未填写'
+      result = t('er.form.notFilled')
     }
     return result
   }
@@ -47,11 +50,11 @@ const handleAction = async (type) => {
     :safe-area-inset-bottom="true"
   >
     <van-nav-bar
-      left-text="返回"
+      :left-text="t('er.public.back')"
       left-arrow
       @click-left="handleAction(1)">
       <template #right>
-        <span @click="handleAction(2)" class="van-nav-bar__text">保存</span>
+        <span @click="handleAction(2)" class="van-nav-bar__text">{{ t('er.public.save') }}</span>
       </template>
     </van-nav-bar>
     <CKEditor
diff --git a/packages/formEditor/components/FormTypes/Number/pc.vue b/packages/formEditor/components/FormTypes/Number/pc.vue
index 0ac46c7..d75afc1 100644
--- a/packages/formEditor/components/FormTypes/Number/pc.vue
+++ b/packages/formEditor/components/FormTypes/Number/pc.vue
@@ -8,9 +8,11 @@ export default {
 </script>
 <script setup>
 const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesNumber_pc')
 </script>
 <template>
   <el-input-number
+    :class="[ns.b()]"
     v-model="data.options.defaultValue"
     v-bind="params"
   />
diff --git a/packages/formEditor/components/FormTypes/Signature/mobile.vue b/packages/formEditor/components/FormTypes/Signature/mobile.vue
index ce2d520..b5a8b70 100644
--- a/packages/formEditor/components/FormTypes/Signature/mobile.vue
+++ b/packages/formEditor/components/FormTypes/Signature/mobile.vue
@@ -12,6 +12,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const props = defineProps(['data', 'params'])
 const ns = hooks.useNamespace('FormTypesSignature_mobile')
 const element = ref()
@@ -121,7 +124,7 @@ const handleAction = async (type) => {
         :class="[ns.e('noData')]"
       >
         <el-button text type="primary" icon="Edit" circle>
-          添加签名
+          {{t('er.form.addSignature')}}
         </el-button>
       </div>
     </template>
@@ -135,12 +138,12 @@ const handleAction = async (type) => {
     :style="{ width: '100%', height: '100%' }"
   >
     <van-nav-bar
-      title="添加签名"
-      left-text="返回"
+      :title="t('er.form.addSignature')"
+      :left-text="t('er.public.back')"
       left-arrow
       @click-left="handleAction(1)">
       <template v-if="showClear" #right>
-        <span @click="handleAction(2)" class="van-nav-bar__text">使用签名</span>
+        <span @click="handleAction(2)" class="van-nav-bar__text">{{ t('er.form.useSignature') }}</span>
       </template>
     </van-nav-bar>
     <div
diff --git a/packages/formEditor/components/FormTypes/Signature/pc.vue b/packages/formEditor/components/FormTypes/Signature/pc.vue
index 6d1a98e..d0b9eed 100644
--- a/packages/formEditor/components/FormTypes/Signature/pc.vue
+++ b/packages/formEditor/components/FormTypes/Signature/pc.vue
@@ -11,6 +11,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const props = defineProps(['data', 'params'])
 const ns = hooks.useNamespace('FormTypesSignature_pc')
 const element = ref()
@@ -109,13 +112,13 @@ const handleCommit = async () => {
       :class="[ns.e('noData')]"
     >
       <el-button @click="handleOpen" text type="primary" icon="Edit" circle>
-        添加签名
+        {{ t('er.form.addSignature') }}
       </el-button>
     </div>
   </div>
   <el-dialog
     v-model="dialogVisible"
-    title="添加签名"
+    :title="t('er.form.addSignature')"
     width="900px"
     destroy-on-close
     :close-on-press-escape="false"
@@ -129,9 +132,9 @@ const handleCommit = async () => {
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <el-button :disabled="showClear" @click="handleClear">重置</el-button>
+        <el-button :disabled="showClear" @click="handleClear">{{ t('er.public.reset') }}</el-button>
         <el-button :disabled="showClear" type="primary" @click="handleCommit">
-          使用签名
+          {{ t('er.form.useSignature') }}
         </el-button>
       </span>
     </template>
diff --git a/packages/formEditor/components/FormTypes/Uploadfile/mobile.vue b/packages/formEditor/components/FormTypes/Uploadfile/mobile.vue
index 6bdfa65..6253d84 100644
--- a/packages/formEditor/components/FormTypes/Uploadfile/mobile.vue
+++ b/packages/formEditor/components/FormTypes/Uploadfile/mobile.vue
@@ -11,6 +11,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const props = defineProps(['data', 'params'])
 const fileList = ref(_.cloneDeep(props.data.options.defaultValue))
 const afterRead = async (file) => {
@@ -19,7 +22,7 @@ const afterRead = async (file) => {
   const form = new FormData()
   files.forEach((e) => {
     e.status = 'uploading'
-    e.message = '上传中...'
+    e.message = t('er.form.uploading')
     // e.status = 'uploading'
     form.append('file', e.file)
   })
@@ -38,7 +41,7 @@ const afterRead = async (file) => {
   } catch (e) {
     files.forEach((e) => {
       e.status = 'failed'
-      e.message = '上传失败'
+      e.message = t('er.form.uploadFailed')
       // form.append('file', e.file)
     })
     showToast(e.message)
diff --git a/packages/formEditor/components/FormTypes/Uploadfile/pc.vue b/packages/formEditor/components/FormTypes/Uploadfile/pc.vue
index f924cc2..fa261c8 100644
--- a/packages/formEditor/components/FormTypes/Uploadfile/pc.vue
+++ b/packages/formEditor/components/FormTypes/Uploadfile/pc.vue
@@ -1,6 +1,7 @@
 <script>
 import { ref, nextTick, watch, unref } from 'vue'
 import { ElMessage } from 'element-plus'
+import hooks from '@ER/hooks'
 import _ from 'lodash-es'
 export default {
   name: 'er-uploadfile',
@@ -9,6 +10,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const props = defineProps(['data', 'params'])
 const fileList = ref(_.cloneDeep(props.data.options.defaultValue))
 const dialogImageUrl = ref(0)
@@ -51,7 +55,7 @@ const handlePictureCardPreview = (uploadFile) => {
 const beforeAvatarUpload = (rawFile) => {
   if (rawFile.size > props.params.maxSize) {
     ElMessage({
-      message: `文件大小不能超过 ${props.data.size} MB`,
+      message: t('er.validateMsg.fileSize', { size: props.data.size }),
       type: 'warning'
     })
     return false
diff --git a/packages/formEditor/components/Layout/CollapseLayout.jsx b/packages/formEditor/components/Layout/CollapseLayout.jsx
index 38b1ff4..82578b1 100644
--- a/packages/formEditor/components/Layout/CollapseLayout.jsx
+++ b/packages/formEditor/components/Layout/CollapseLayout.jsx
@@ -24,6 +24,7 @@ export default defineComponent({
                 return (
                   <el-collapse-item title={element.label} name={element.id}>
                     <SectorSelectElement
+                      class={[ns.e('area')]}
                       data={element} parent={props.data}
                     >
                       <LayoutDragGable
diff --git a/packages/formEditor/components/Layout/GridLayout.jsx b/packages/formEditor/components/Layout/GridLayout.jsx
index c1c762c..ababd30 100644
--- a/packages/formEditor/components/Layout/GridLayout.jsx
+++ b/packages/formEditor/components/Layout/GridLayout.jsx
@@ -51,6 +51,7 @@ export default defineComponent({
                     // hasAddContainer
                     data-layout-type={'grid-col'}
                     tag={'el-col'}
+                    class={[ns.e('area')]}
                     span={element.options.span[state.platform]}
                     offset={element.options.offset}
                     pull={element.options.pull}
diff --git a/packages/formEditor/components/Layout/TableLayout.jsx b/packages/formEditor/components/Layout/TableLayout.jsx
index b6ead24..cbf13e7 100644
--- a/packages/formEditor/components/Layout/TableLayout.jsx
+++ b/packages/formEditor/components/Layout/TableLayout.jsx
@@ -44,8 +44,8 @@ export default defineComponent({
         }
       }
       return (
-        <SectorSelectElement {...useAttrs()} hasWidthScale hasCopy hasDel hasDrag hasDiscolor hasInserColumn hasInserRow data={props.data} parent={props.parent}>
-          <table class={ns.b()}>
+        <SectorSelectElement class={ns.b()} {...useAttrs()} hasWidthScale hasCopy hasDel hasDrag hasDiscolor hasInserColumn hasInserRow data={props.data} parent={props.parent}>
+          <table>
             <tbody>
             {
               props.data.rows.map((element, index0) => {
@@ -56,6 +56,7 @@ export default defineComponent({
                         const node = !element1.options.isMerged && (
                           <SectorSelectElement
                             tag="td"
+                            class={[ns.e('area')]}
                             key={element1.id}
                             data={element1}
                             parent={element}
diff --git a/packages/formEditor/components/Layout/TabsLayout.jsx b/packages/formEditor/components/Layout/TabsLayout.jsx
index d5782aa..2a7968d 100644
--- a/packages/formEditor/components/Layout/TabsLayout.jsx
+++ b/packages/formEditor/components/Layout/TabsLayout.jsx
@@ -15,11 +15,12 @@ export default defineComponent({
     return () => {
       return (
         <SectorSelectElement {...useAttrs()} data={props.data} parent={props.parent} hasCopy hasDel hasDrag hasWidthScale>
-          <el-tabs vModel={props.data.options.defaultValue} type={props.data.options.type} tabPosition={props.data.options.tabPosition}>
+          <el-tabs class={[ns.b()]} vModel={props.data.options.defaultValue} type={props.data.options.type} tabPosition={props.data.options.tabPosition}>
             {
               props.data.columns.map((element, index0) => {
                 return (
                   <SectorSelectElement
+                    class={[ns.e('area')]}
                     tag='el-tab-pane' label={element.label} name={element.value} data={element} parent={props.data}
                   >
                     <LayoutDragGable
diff --git a/packages/formEditor/components/Panels/Blocks/index.jsx b/packages/formEditor/components/Panels/Blocks/index.jsx
index c609289..755a0a7 100644
--- a/packages/formEditor/components/Panels/Blocks/index.jsx
+++ b/packages/formEditor/components/Panels/Blocks/index.jsx
@@ -22,6 +22,10 @@ export default {
   setup (props) {
     const ER = inject('Everright')
     const ns = hooks.useNamespace('Blocks')
+    const {
+      t
+    } = hooks.useI18n()
+    // console.log(t('lhf'))
     const {
       state,
       setSector
@@ -75,7 +79,7 @@ export default {
         return (
           <li onClick={() => addStore(element)}>
             <Icon class={[ns.e('icon')]} icon={element.icon}></Icon>
-            {element.label}
+            {utils.fieldLabel(t, element)}
           </li>
         )
       }
@@ -106,7 +110,7 @@ export default {
                     index={String(index)}
                     v-slots={{
                       title () {
-                        return element.name
+                        return t(`er.blocks.${element.id}`)
                       },
                       default () {
                         return (
diff --git a/packages/formEditor/components/Panels/Config/components/AllsidesComponent.vue b/packages/formEditor/components/Panels/Config/components/AllsidesComponent.vue
index 6300a21..11bcf9a 100644
--- a/packages/formEditor/components/Panels/Config/components/AllsidesComponent.vue
+++ b/packages/formEditor/components/Panels/Config/components/AllsidesComponent.vue
@@ -8,6 +8,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const {
   target
 } = hooks.useTarget()
@@ -24,8 +27,8 @@ const props = defineProps({
 })
 </script>
 <template>
-  <el-form-item size="default" :label="props.field">
-    <span class="subhead">单位：px</span>
+  <el-form-item size="default" :label="t(`er.public.${props.field}`)">
+    <span class="subhead">{{t('er.public.unit')}}：px</span>
     <div :class="[ns.b()]">
       <el-row :gutter="14" justify="center">
         <el-col :span="12">
diff --git a/packages/formEditor/components/Panels/Config/components/BackgroundComponent.vue b/packages/formEditor/components/Panels/Config/components/BackgroundComponent.vue
index 9e3d3a4..44bb73d 100644
--- a/packages/formEditor/components/Panels/Config/components/BackgroundComponent.vue
+++ b/packages/formEditor/components/Panels/Config/components/BackgroundComponent.vue
@@ -10,6 +10,9 @@ export default {
 
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const {
   target
 } = hooks.useTarget()
@@ -252,13 +255,13 @@ const handleClick = (type) => {
 }
 </script>
 <template>
-  <el-form-item size="default" label="背景">
+  <el-form-item size="default" :label="t('er.public.background')">
     <template v-slot:label>
       <div :class="[ns.e('backgroundTitle')]">
-        <span class="el-form-item__label">背景</span>
+        <span class="el-form-item__label">{{t('er.public.background')}}</span>
         <el-radio-group v-model="state.value0" size="large">
-          <el-radio-button :label="false">颜色</el-radio-button>
-          <el-radio-button :label="true">图片</el-radio-button>
+          <el-radio-button :label="false">{{t('er.public.color')}}</el-radio-button>
+          <el-radio-button :label="true">{{t('er.public.image')}}</el-radio-button>
         </el-radio-group>
       </div>
     </template>
@@ -337,7 +340,7 @@ const handleClick = (type) => {
       </div>
       <el-row :class="ns.e('clear')">
         <el-col :span="24">
-          <el-button style="width: 100%;" v-if="state.defaultBackground.backgroundColor || state.defaultBackground.backgroundImage" @click="() => handleClick(1)">移除</el-button>
+          <el-button style="width: 100%;" v-if="state.defaultBackground.backgroundColor || state.defaultBackground.backgroundImage" @click="() => handleClick(1)">{{t('er.public.remove')}}</el-button>
         </el-col>
 <!--        <el-col>-->
 <!--          <el-button style="width: 100%;" type="primary" @click="() => handleClick(2)">保存</el-button>-->
diff --git a/packages/formEditor/components/Panels/Config/components/BorderComponent.vue b/packages/formEditor/components/Panels/Config/components/BorderComponent.vue
index 9a4f828..3b761ce 100644
--- a/packages/formEditor/components/Panels/Config/components/BorderComponent.vue
+++ b/packages/formEditor/components/Panels/Config/components/BorderComponent.vue
@@ -14,6 +14,9 @@ const {
   target,
   checkTypeBySelected
 } = hooks.useTarget()
+const {
+  t
+} = hooks.useI18n()
 const ns = hooks.useNamespace('ConfigBorder')
 const options0 = [
   'none',
@@ -53,7 +56,6 @@ const bindingEvent = () => {
       target.value.style.borderType = state.default = borderActions.indexOf(value)
     })
     e.addEventListener('mouseenter', (e) => {
-      console.log(borderActions.indexOf(e.target.dataset.value))
       target.value.style.borderType = borderActions.indexOf(e.target.dataset.value)
     })
     e.addEventListener('mouseleave', (e) => {
@@ -66,7 +68,7 @@ onMounted(bindingEvent)
 </script>
 <template>
   <div v-if="checkTypeBySelected(['table'])">
-    <el-form-item size="default" label="边框线">
+    <el-form-item size="default" :label="t('er.config.borderComponent.borderLine')">
       <div style="width: 100%">
         <ul :class="ns.e('borderStyle')">
           <li :class="index === state.default && 'active'" :data-value="item" ref="elements" v-for="(item, index) in borderActions" :key="item">
@@ -80,7 +82,7 @@ onMounted(bindingEvent)
         </ul>
       </div>
     </el-form-item>
-    <el-form-item size="default" label="边框线宽度">
+    <el-form-item size="default" :label="t('er.config.borderComponent.borderWidth')">
       <el-input-number
         :min="0"
         v-model="target.style.borderWidth"
@@ -93,7 +95,7 @@ onMounted(bindingEvent)
       <div>
         <el-row :gutter="14">
           <el-col :span="12">
-            <div>Width</div>
+            <div>{{t('er.public.width')}}</div>
             <el-input-number
               :step="10"
               v-model="target.style.border.width"
@@ -101,7 +103,7 @@ onMounted(bindingEvent)
             />
           </el-col>
           <el-col :span="12">
-            <div>Radius</div>
+            <div>{{t('er.public.radius')}}</div>
             <el-input-number
               :step="10"
               v-model="target.style.borderRadius"
@@ -111,7 +113,7 @@ onMounted(bindingEvent)
         </el-row>
         <el-row :gutter="14">
           <el-col :span="12">
-            <div>Style</div>
+            <div>{{t('er.public.style')}}</div>
             <el-select v-model="target.style.border.style" placeholder="Select" size="large">
               <el-option
                 v-for="item in options0"
@@ -122,7 +124,7 @@ onMounted(bindingEvent)
             </el-select>
           </el-col>
           <el-col :span="12">
-            <div>Color</div>
+            <div>{{t('er.public.color')}}</div>
             <el-color-picker
               v-model="target.style.border.color"
             />
diff --git a/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx b/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx
index 8b53670..942f386 100644
--- a/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx
+++ b/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx
@@ -75,16 +75,19 @@ export default defineComponent({
     }
   },
   render (props) {
+    const {
+      t
+    } = hooks.useI18n()
     const ns = hooks.useNamespace('ConfigData1')
     const validator = ({ field }, value, callback) => {
       const newValue = value.trim()
       if (newValue === '' || newValue === null || newValue === undefined) {
-        callback(new Error('必填'))
+        callback(new Error(t('er.validateMsg.required')))
         return false
       }
       if (field.includes('value')) {
         if (this.data.filter((e) => e.value === newValue).length > 1) {
-          callback(new Error('唯一标识重复'))
+          callback(new Error(t('er.validateMsg.idUnique')))
           return false
         } else {
           callback()
@@ -145,13 +148,13 @@ export default defineComponent({
     }
     return (
       <div>
-        <table className={[ns.e('tableThead')]}>
+        <table class={[ns.e('tableThead')]}>
           <thead>
           <tr>
-            <th width="42">默认</th>
-            <th>选项唯一标识</th>
-            <th>选项名称</th>
-            <th width="80">操作</th>
+            <th width="42">{t('er.config.dataComponent1.defaultLabel')}</th>
+            <th>{t('er.config.dataComponent1.unique')}</th>
+            <th>{t('er.config.dataComponent1.name')}</th>
+            <th width="80">{t('er.config.dataComponent1.operate')}</th>
           </tr>
           </thead>
         </table>
@@ -182,7 +185,7 @@ export default defineComponent({
           </el-form>
         </el-scrollbar>
         <div class={ns.e('button')}>
-          <el-button onClick={() => handleAction(1)}>添加选项</el-button>
+          <el-button onClick={() => handleAction(1)}>{t('er.config.dataComponent1.add')}</el-button>
         </div>
       </div>
     )
diff --git a/packages/formEditor/components/Panels/Config/components/DataComponent2.jsx b/packages/formEditor/components/Panels/Config/components/DataComponent2.jsx
index 951fcf8..fb01b95 100644
--- a/packages/formEditor/components/Panels/Config/components/DataComponent2.jsx
+++ b/packages/formEditor/components/Panels/Config/components/DataComponent2.jsx
@@ -76,6 +76,10 @@ export default defineComponent({
     }
   },
   render (props) {
+    const {
+      t,
+      lang
+    } = hooks.useI18n()
     const ns = hooks.useNamespace('ConfigData2')
     const handleAction = (type, x, data) => {
       switch (type) {
@@ -118,7 +122,7 @@ export default defineComponent({
     const listComponent = ({ items, index }) => {
       return (
         <div class={[ns.e('item')]}>
-          <div class={ns.e('title')}>{nzhcn.encodeS(index + 1)}级选项</div>
+          <div class={ns.e('title')}>{lang.value === 'zh-cn' ? `${nzhcn.encodeS(index + 1)}${t('er.config.dataComponent2.level')}` : `${t('er.config.dataComponent2.level')} ${index + 1}`}</div>
           <div>
             <el-scrollbar ref={(el) => this.scrollbars.push(el)} tag="ul" max-height="320px">
               {
@@ -153,7 +157,7 @@ export default defineComponent({
                 icon={'CirclePlus'}
                 onClick={() => handleAction(1, index, items)}
                 text>
-                添加选项
+                {t('er.config.dataComponent2.add')}
               </el-button>
             </div>
           )}
diff --git a/packages/formEditor/components/Panels/Config/components/DataComponent3.vue b/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
index 72b0cc1..2f8a3ef 100644
--- a/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
+++ b/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
@@ -13,6 +13,9 @@ const {
   checkTypeBySelected,
   target
 } = hooks.useTarget()
+const {
+  t
+} = hooks.useI18n()
 const ns = hooks.useNamespace('ConfigData3')
 const handleAction = (type) => {
   switch (type) {
@@ -31,8 +34,8 @@ const handleAction = (type) => {
   <el-form-item>
     <template v-slot:label>
       <div :class="[ns.e('title')]">
-        <span class="el-form-item__label">面板</span>
-        <el-button text @click="handleAction(1)">添加面板</el-button>
+        <span class="el-form-item__label">{{t('er.config.dataComponent3.panel')}}</span>
+        <el-button text @click="handleAction(1)">{{t('er.config.dataComponent3.add')}}</el-button>
       </div>
     </template>
     <div style="width: 100%;">
diff --git a/packages/formEditor/components/Panels/Config/components/GlobalConfigPanel.vue b/packages/formEditor/components/Panels/Config/components/GlobalConfigPanel.vue
index 7b1c544..5ff1c8f 100644
--- a/packages/formEditor/components/Panels/Config/components/GlobalConfigPanel.vue
+++ b/packages/formEditor/components/Panels/Config/components/GlobalConfigPanel.vue
@@ -18,6 +18,9 @@ const {
   state,
   isPc
 } = hooks.useTarget()
+const {
+  t
+} = hooks.useI18n()
 const ns = hooks.useNamespace('GlobalConfigPanel')
 const compareKeys = ['labelPosition', 'completeButton']
 const visible = ref(false)
@@ -75,7 +78,7 @@ const handleClick = (type) => {
           <el-icon color="#f90">
             <QuestionFilled />
           </el-icon>
-          数据存在不一致，根据你的选择进行同步
+          {{ t('er.config.globalConfig.sync.warning') }}
         </div>
         <el-radio-group :class="[ns.e('syncType')]" v-model="radio1" class="ml-4">
           <el-radio label="pc">pc</el-radio>
@@ -87,40 +90,40 @@ const handleClick = (type) => {
           size="small"
           :text="true"
           @click="handleClick(1)"
-        >取消</el-button>
+        >{{t('er.public.cancel')}}</el-button>
         <el-button
           size="small"
           type="primary"
           @click="handleClick(2)"
         >
-          确定
+          {{ t('er.public.confirm') }}
         </el-button>
       </div>
     </el-popover>
     <DeviceSwitch justify-content="center"></DeviceSwitch>
-    <el-form-item label="同步设置电脑和移动端" label-position="left">
+    <el-form-item :label="t('er.config.globalConfig.sync.label')" label-position="left">
       <el-switch
         ref="buttonRef"
         v-click-outside:[popperPaneRef]="onClickOutside"
         :before-change="handleBeforeChange"
         v-model="target.isSync"/>
     </el-form-item>
-    <el-form-item label="组件尺寸" v-if="isPc">
+    <el-form-item :label="t('er.config.globalConfig.componentSize.label')" v-if="isPc">
       <el-radio-group v-model="target[state.platform].size" size="large">
-        <el-radio-button label="large">大</el-radio-button>
-        <el-radio-button label="default" >中</el-radio-button>
-        <el-radio-button label="small" >小</el-radio-button>
+        <el-radio-button label="large">{{t('er.config.globalConfig.componentSize.large')}}</el-radio-button>
+        <el-radio-button label="default" >{{t('er.config.globalConfig.componentSize.default')}}</el-radio-button>
+        <el-radio-button label="small" >{{t('er.config.globalConfig.componentSize.small')}}</el-radio-button>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="标签对齐方式">
+    <el-form-item :label="t('er.config.globalConfig.labelPosition.label')">
 <!--      <el-radio-group v-model="target[state.platform].labelPosition" size="large">-->
       <el-radio-group :model-value="target[state.platform].labelPosition" @update:modelValue="(e) => handleModelValue('labelPosition', e)" size="large">
-        <el-radio-button name="left" label="left" />
-        <el-radio-button name="top" label="top" />
-        <el-radio-button name="right" label="right" />
+        <el-radio-button name="left" label="left">{{t('er.config.globalConfig.labelPosition.left')}}</el-radio-button>
+        <el-radio-button name="top" label="top">{{t('er.config.globalConfig.labelPosition.top')}}</el-radio-button>
+        <el-radio-button name="right" label="right">{{t('er.config.globalConfig.labelPosition.right')}}</el-radio-button>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="按钮">
+    <el-form-item :label="t('er.public.button')">
       <div>
         <div>
           <CompleteButton mode="preview"/>
@@ -128,7 +131,7 @@ const handleClick = (type) => {
         <div>
           <el-row :gutter="8">
             <el-col>
-              <el-form-item label="文字">
+              <el-form-item :label="t('er.public.text')">
                 <el-input
                   :model-value="target[state.platform].completeButton.text"
                   show-word-limit
@@ -140,7 +143,7 @@ const handleClick = (type) => {
           </el-row>
           <el-row :gutter="8">
             <el-col :span="12">
-              <el-form-item label="颜色">
+              <el-form-item :label="t('er.public.color')">
                 <el-color-picker
                   :popper-class="ns.e('completeButtonColor')"
                   :model-value="target[state.platform].completeButton.color"
@@ -150,7 +153,7 @@ const handleClick = (type) => {
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="背景">
+              <el-form-item :label="t('er.public.backgroundColor')">
                 <el-color-picker
                   :popper-class="ns.e('completeButtonColor')"
                   :model-value="target[state.platform].completeButton.backgroundColor"
diff --git a/packages/formEditor/components/Panels/Config/components/GridLayoutComponent.vue b/packages/formEditor/components/Panels/Config/components/GridLayoutComponent.vue
index 4997a68..00a93ff 100644
--- a/packages/formEditor/components/Panels/Config/components/GridLayoutComponent.vue
+++ b/packages/formEditor/components/Panels/Config/components/GridLayoutComponent.vue
@@ -1,4 +1,5 @@
 <script>
+import { computed } from 'vue'
 import utils from '@ER/utils'
 import hooks from '@ER/hooks'
 export default {
@@ -11,28 +12,33 @@ const {
   checkTypeBySelected,
   target
 } = hooks.useTarget()
-const options0 = [
-  {
-    label: '左对齐',
-    value: 'start'
-  },
-  {
-    label: '右对齐',
-    value: 'end'
-  },
-  {
-    label: '居中',
-    value: 'center'
-  },
-  {
-    label: '两侧间隔相等',
-    value: 'space-around'
-  },
-  {
-    label: '两侧间隔相等',
-    value: 'space-between'
-  }
-]
+const {
+  t
+} = hooks.useI18n()
+const options0 = computed(() => {
+  return [
+    {
+      label: t('er.config.gridLayout.justify.options[0]'),
+      value: 'start'
+    },
+    {
+      label: t('er.config.gridLayout.justify.options[1]'),
+      value: 'end'
+    },
+    {
+      label: t('er.config.gridLayout.justify.options[2]'),
+      value: 'center'
+    },
+    {
+      label: t('er.config.gridLayout.justify.options[3]'),
+      value: 'space-around'
+    },
+    {
+      label: t('er.config.gridLayout.justify.options[4]'),
+      value: 'space-between'
+    }
+  ]
+})
 // const options1 = [
 //   {
 //     label: '顶对齐',
@@ -51,7 +57,7 @@ const options0 = [
 <template>
   <div>
     <template v-if="checkTypeBySelected(['grid'])">
-      <el-form-item label="水平排列方式">
+      <el-form-item :label="t('er.config.gridLayout.justify.label')">
         <el-select style="width: 100%;" v-model="target.options.justify" class="m-2" placeholder="Select" size="large">
           <el-option
             v-for="item in options0"
diff --git a/packages/formEditor/components/Panels/Config/components/LimitComponent.vue b/packages/formEditor/components/Panels/Config/components/LimitComponent.vue
index 3d631e2..dd608de 100644
--- a/packages/formEditor/components/Panels/Config/components/LimitComponent.vue
+++ b/packages/formEditor/components/Panels/Config/components/LimitComponent.vue
@@ -9,6 +9,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const {
   target
 } = hooks.useTarget()
@@ -26,7 +29,7 @@ const ns = hooks.useNamespace('ConfigLimitComponent')
 <template>
   <el-row align="middle" :gutter="8">
     <el-col :span="11">
-      <el-form-item label="最小">
+      <el-form-item :label="t('er.public.min')">
         <el-date-picker
           v-model="target.options.startTime"
           value-format="X"
@@ -38,7 +41,7 @@ const ns = hooks.useNamespace('ConfigLimitComponent')
     </el-col>
     <el-col :span="2">~</el-col>
     <el-col :span="11">
-      <el-form-item label="最大">
+      <el-form-item :label="t('er.public.max')">
         <el-date-picker
           value-format="X"
           v-model="target.options.endTime"
diff --git a/packages/formEditor/components/Panels/Config/components/PropsPanel.vue b/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
index 6c262a4..6c00d02 100644
--- a/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
+++ b/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
@@ -7,7 +7,6 @@ import PanelsConfigComponentsBorderComponent from './BorderComponent.vue'
 import PanelsConfigComponentsLimitComponent from './LimitComponent.vue'
 import PanelsConfigComponentsGridLayoutComponent from './GridLayoutComponent.vue'
 import PanelsConfigComponentsTabsLayout from './TabsLayout.vue'
-import PanelsConfigComponentsTableLayout from './TableLayout.vue'
 import PanelsConfigComponentsAllsidesComponent from './AllsidesComponent.vue'
 import PanelsConfigComponentsBackgroundComponent from './BackgroundComponent.vue'
 import PanelsConfigComponentsDataComponent1 from './DataComponent1.jsx'
@@ -20,6 +19,9 @@ export default {
 }
 </script>
 <script setup>
+const {
+  t
+} = hooks.useI18n()
 const {
   type,
   state,
@@ -193,14 +195,14 @@ const handleAction = (type, value) => {
 <template>
 <!--  <template v-if="isSelectField">-->
 <!--  </template>-->
-  <el-form-item label="唯一标识" prop="id">
-    <el-tag type="warning">
-      {{target.id}}
-    </el-tag>
-  </el-form-item>
-  <PanelsConfigComponentsCheckboxComponent v-if="isSelectField" label="标题" field="isShowLabel">
+<!--  <el-form-item label="唯一标识" prop="id">-->
+<!--    <el-tag type="warning">-->
+<!--      {{target.id}}-->
+<!--    </el-tag>-->
+<!--  </el-form-item>-->
+  <PanelsConfigComponentsCheckboxComponent v-if="isSelectField" :label="t('er.config.propsPanel.title')" field="isShowLabel">
     <el-row style="margin-bottom: 16px;" align="middle">
-      <el-col :span="10">标题</el-col>
+      <el-col :span="10">{{ t('er.config.propsPanel.title') }}</el-col>
       <el-col :span="14">
         <el-input
           v-model="target.label"
@@ -208,7 +210,7 @@ const handleAction = (type, value) => {
       </el-col>
     </el-row>
     <el-row align="middle" v-if="isPc">
-      <el-col :span="10">宽度</el-col>
+      <el-col :span="10">{{ t('er.config.propsPanel.titleWidth') }}</el-col>
       <el-col :span="14">
         <el-input-number
           style="width: 100%;"
@@ -218,12 +220,12 @@ const handleAction = (type, value) => {
       </el-col>
     </el-row>
   </PanelsConfigComponentsCheckboxComponent>
-  <el-form-item v-if="isSelectField" label="字段唯一标识" prop="key">
+  <el-form-item v-if="isSelectField" :label="t('er.config.propsPanel.id')" prop="key">
     <el-input
       v-model="target.key"
     />
   </el-form-item>
-  <el-form-item label="默认内容" v-if="checkTypeBySelected([
+  <el-form-item :label="t('er.config.propsPanel.defaultContent')" v-if="checkTypeBySelected([
       'input',
       'textarea',
       'time',
@@ -242,6 +244,7 @@ const handleAction = (type, value) => {
       <el-cascader
         v-model="target.options.defaultValue"
         v-bind="typeProps"
+        clearable
         style="width: 100%;"
       />
     </template>
@@ -281,7 +284,7 @@ const handleAction = (type, value) => {
         v-bind="typeProps"
         v-model="target.options.defaultValue"
       />
-      <el-button link @click="target.options.defaultValue = 0">清空</el-button>
+      <el-button link @click="target.options.defaultValue = 0">{{t('er.public.clear')}}</el-button>
     </template>
     <template v-else-if="checkTypeBySelected(['switch'])">
       <el-switch
@@ -297,11 +300,11 @@ const handleAction = (type, value) => {
       />
     </template>
   </el-form-item>
-  <el-form-item label="数据" v-if="checkTypeBySelected(['select', 'radio', 'checkbox', 'cascader', 'rate'])">
-    <el-button style="width: 100%;" type="primary" @click="dialogVisible = true">录入数据</el-button>
+  <el-form-item :label="t('er.public.Data')" v-if="checkTypeBySelected(['select', 'radio', 'checkbox', 'cascader', 'rate'])">
+    <el-button style="width: 100%;" type="primary" @click="dialogVisible = true">{{t('er.public.dataEntry')}}</el-button>
   </el-form-item>
 <!-- placeholder -->
-  <el-form-item label="提示文字" v-if="checkTypeBySelected([
+  <el-form-item :label="t('er.config.propsPanel.placeholder')" v-if="checkTypeBySelected([
       'input',
       'textarea',
       'select',
@@ -314,22 +317,24 @@ const handleAction = (type, value) => {
     <el-input
       v-if="checkTypeBySelected(['input', 'select', 'cascader', 'time', 'date', 'html', 'region'])"
       v-model="target.options.placeholder"
+      clearable
     />
     <el-input
       v-else-if="checkTypeBySelected(['textarea'])"
       type="textarea"
       v-model="target.options.placeholder"
+      clearable
     />
   </el-form-item>
   <div v-if="checkTypeBySelected(['signature'])">
-    <el-form-item label="画笔颜色">
+    <el-form-item :label="t('er.config.propsPanel.brushColor')">
       <el-color-picker
         color-format="rgb"
         v-model="target.options.penColor"
       />
     </el-form-item>
   </div>
-  <el-form-item v-if="checkTypeBySelected(['time', 'date'])" label="显示格式">
+  <el-form-item v-if="checkTypeBySelected(['time', 'date'])" :label="t('er.config.propsPanel.format')">
     <el-select v-model="target.options.format" placeholder="Select" style="width: 100%">
       <el-option
         v-for="item in options0"
@@ -339,7 +344,7 @@ const handleAction = (type, value) => {
       />
     </el-select>
   </el-form-item>
-  <el-form-item v-if="checkTypeBySelected(['date'])" label="显示类型">
+  <el-form-item v-if="checkTypeBySelected(['date'])" :label="t('er.config.propsPanel.dateType')">
     <el-select v-model="target.options.type" placeholder="Select" size="large" @change="handleChange0">
       <el-option
         v-for="item in options"
@@ -349,31 +354,31 @@ const handleAction = (type, value) => {
       />
     </el-select>
   </el-form-item>
-  <el-form-item v-if="checkTypeBySelected(['radio', 'checkbox'])" label="布局方式">
+  <el-form-item v-if="checkTypeBySelected(['radio', 'checkbox'])" :label="t('er.config.propsPanel.layout.label')">
     <el-radio-group v-model="target.options.displayStyle" size="large">
-      <el-radio-button name="块级" label="block" />
-      <el-radio-button name="行级" label="inline" />
+      <el-radio-button label="block">{{t('er.config.propsPanel.layout.options[0]')}}</el-radio-button>
+      <el-radio-button label="inline">{{t('er.config.propsPanel.layout.options[1]')}}</el-radio-button>
     </el-radio-group>
   </el-form-item>
-  <el-form-item v-if="checkTypeBySelected(['divider'])" label="文案位置">
+  <el-form-item v-if="checkTypeBySelected(['divider'])" :label="t('er.config.propsPanel.contentPosition.label')">
     <el-radio-group v-model="target.options.contentPosition" size="large">
-      <el-radio-button name="left" label="left" />
-      <el-radio-button name="center" label="center" />
-      <el-radio-button name="right" label="right" />
+      <el-radio-button name="left" label="left">{{t('er.config.propsPanel.contentPosition.options[0]')}}</el-radio-button>
+      <el-radio-button name="center" label="center">{{t('er.config.propsPanel.contentPosition.options[1]')}}</el-radio-button>
+      <el-radio-button name="right" label="right">{{t('er.config.propsPanel.contentPosition.options[2]')}}</el-radio-button>
     </el-radio-group>
   </el-form-item>
-  <el-form-item v-if="checkTypeBySelected(['textarea'])" label="文本域高度">
+  <el-form-item v-if="checkTypeBySelected(['textarea'])" :label="t('er.config.propsPanel.textareaHeight')">
     <el-slider v-model="target.options.rows" :max="10" show-input />
   </el-form-item>
   <div v-if="checkTypeBySelected(['uploadfile'])">
-    <el-form-item label="文件类型">
+    <el-form-item :label="t('er.config.propsPanel.uploadfile.fileType')">
       <el-input
         v-model="target.options.accept"
         placeholder="输入只接受的文件类型后缀。例如 .png,.jpg" />
     </el-form-item>
     <el-row :gutter="8">
       <el-col :span="12">
-        <el-form-item label="上传个数限制">
+        <el-form-item :label="t('er.config.propsPanel.uploadfile.uploadLimit')">
           <el-input-number
             style="width: 100%;"
             :min="1"
@@ -382,7 +387,7 @@ const handleAction = (type, value) => {
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="文件大小(MB)">
+        <el-form-item :label="`${t('er.config.propsPanel.uploadfile.fileSize')}(MB)`">
           <el-input-number
             style="width: 100%;"
             v-model="target.options.size"
@@ -393,16 +398,16 @@ const handleAction = (type, value) => {
       </el-col>
     </el-row>
   </div>
-  <el-row v-if="checkTypeBySelected(['input']) && target.options.renderType === 1 && state.isPc" :gutter="8">
+  <el-row v-if="checkTypeBySelected(['input']) && target.options.renderType === 1 && isPc" :gutter="8">
     <el-col :span="12">
-      <el-form-item label="前缀">
+      <el-form-item :label="t('er.config.propsPanel.prepend')">
         <el-input
           style="width: 100%;"
           v-model="target.options.prepend" />
       </el-form-item>
     </el-col>
     <el-col :span="12">
-      <el-form-item label="后缀">
+      <el-form-item :label="t('er.config.propsPanel.append')">
         <el-input
           style="width: 100%;"
           v-model="target.options.append"
@@ -412,13 +417,13 @@ const handleAction = (type, value) => {
   </el-row>
   <el-row :gutter="8" v-if="checkTypeBySelected(['number', 'slider'])">
     <el-col :span="12">
-      <el-form-item label="步长">
+      <el-form-item :label="t('er.config.propsPanel.step')">
         <el-input-number
           controls-position="right" v-model="target.options.step" />
       </el-form-item>
     </el-col>
     <el-col :span="12">
-      <el-form-item v-if="type !== 'slider'" label="精度">
+      <el-form-item v-if="type !== 'slider'" :label="t('er.config.propsPanel.precision')">
         <el-input-number
           controls-position="right" v-model="target.options.precision" />
       </el-form-item>
@@ -426,45 +431,45 @@ const handleAction = (type, value) => {
   </el-row>
   <el-row :gutter="8" v-if="checkTypeBySelected(['slider'])">
     <el-col :span="12">
-      <el-form-item label="最大">
+      <el-form-item :label="t('er.public.max')">
         <el-input-number
           controls-position="right"
           v-model="target.options.max" />
       </el-form-item>
     </el-col>
     <el-col :span="12">
-      <el-form-item label="最小">
+      <el-form-item :label="t('er.public.min')">
         <el-input-number
           controls-position="right" v-model="target.options.min" />
       </el-form-item>
     </el-col>
   </el-row>
-  <el-form-item v-if="checkTypeBySelected(['region'])" label="选择范围">
+  <el-form-item v-if="checkTypeBySelected(['region'])" :label="t('er.config.propsPanel.region.label')">
     <el-radio-group v-model="target.options.selectType" @change="target.options.defaultValue = ''" size="large">
-      <el-radio-button :label="1">省</el-radio-button>
-      <el-radio-button :label="2">省/市</el-radio-button>
-      <el-radio-button :label="3">省/市/县</el-radio-button>
+      <el-radio-button :label="1">{{ t('er.config.propsPanel.region.options[0]') }}</el-radio-button>
+      <el-radio-button :label="2">{{ t('er.config.propsPanel.region.options[1]') }}</el-radio-button>
+      <el-radio-button :label="3">{{ t('er.config.propsPanel.region.options[2]') }}</el-radio-button>
     </el-radio-group>
   </el-form-item>
-  <el-form-item v-if="utils.checkIslineChildren(target) && target.context.parent.columns.length !== 4" label="宽度">
+  <el-form-item v-if="utils.checkIslineChildren(target) && target.context.parent.columns.length !== 4" :label="t('er.public.width')">
     <el-button-group>
       <el-button @click="() => handleAction(3, item.value)" v-for="item in options1" :disabled="item.disabled" :key="item.value">{{ item.value }}</el-button>
     </el-button-group>
   </el-form-item>
-  <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['input', 'textarea'])" label="去除首尾空格" field="isShowTrim"/>
-  <PanelsConfigComponentsCheckboxComponent v-if="(checkTypeBySelected(['input']) && target.options.renderType === 1) || checkTypeBySelected(['textarea', 'number'])" label="限定字符" field="isShowWordLimit">
+  <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['input', 'textarea'])" :label="t('er.config.propsPanel.trim')" field="isShowTrim"/>
+  <PanelsConfigComponentsCheckboxComponent v-if="(checkTypeBySelected(['input']) && target.options.renderType === 1) || checkTypeBySelected(['textarea', 'number'])" :label="t('er.config.propsPanel.wordLimit')" field="isShowWordLimit">
     <el-row align="middle" :gutter="8">
       <el-col :span="11">
-        <el-form-item label="最少">
+        <el-form-item :label="t('er.public.min')">
           <el-input-number
             controls-position="right"
-            :max="target.options.max - 1"
+            :max="(target.options.max === null || target.options.max === undefined) ? undefined : target.options.max - 1"
             v-model="target.options.min" />
         </el-form-item>
       </el-col>
       <el-col :span="2">~</el-col>
       <el-col :span="11">
-        <el-form-item label="最多">
+        <el-form-item :label="t('er.public.max')">
           <el-input-number
             :min="target.options.min + 1"
             controls-position="right"
@@ -473,10 +478,10 @@ const handleAction = (type, value) => {
       </el-col>
     </el-row>
   </PanelsConfigComponentsCheckboxComponent>
-  <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['date'])" label="限定日期范围" field="isShowWordLimit">
+  <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['date'])" :label="t('er.config.propsPanel.dateRange')" field="isShowWordLimit">
     <PanelsConfigComponentsLimitComponent/>
   </PanelsConfigComponentsCheckboxComponent>
-  <PanelsConfigComponentsCheckboxComponent v-if="isSelectField && !checkTypeBySelected(['rate', 'switch', 'slider', 'divider'])" label="必填" field="required"/>
+  <PanelsConfigComponentsCheckboxComponent v-if="isSelectField && !checkTypeBySelected(['rate', 'switch', 'slider', 'divider'])" :label="t('er.validateMsg.required')" field="required"/>
   <PanelsConfigComponentsGridLayoutComponent
     v-if="isSelectGrid"
   />
@@ -486,9 +491,6 @@ const handleAction = (type, value) => {
   <PanelsConfigComponentsTabsLayout
     v-if="isSelectTabs"
   />
-  <PanelsConfigComponentsTableLayout
-    v-if="isSelectTable"
-  />
   <PanelsConfigComponentsAllsidesComponent
     field="margin"
     v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol'])"
@@ -503,40 +505,40 @@ const handleAction = (type, value) => {
   <PanelsConfigComponentsBorderComponent
     v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'table'])"
   />
-  <PanelsConfigComponentsCheckboxComponent v-if="isSelectCollapse" label="手风琴模式" field="accordion">
+  <PanelsConfigComponentsCheckboxComponent v-if="isSelectCollapse" :label="t('er.config.propsPanel.accordion')" field="accordion">
   </PanelsConfigComponentsCheckboxComponent>
   <template v-if="isSelectField && !checkTypeBySelected(['divider'])">
-    <PanelsConfigComponentsCheckboxComponent label="禁用" field="disabled">
+    <PanelsConfigComponentsCheckboxComponent :label="t('er.public.disabled')" field="disabled">
     </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['input']) && target.options.renderType === 1" label="作为密码" field="showPassword">
+    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['input']) && target.options.renderType === 1" :label="t('er.config.propsPanel.showPassword')" field="showPassword">
     </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['select', 'cascader', 'uploadfile'])" label="多选" @change="handleMultipleChange" field="multiple">
+    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['select', 'cascader', 'uploadfile'])" :label="t('er.config.propsPanel.multiple')" @change="handleMultipleChange" field="multiple">
     </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['select', 'cascader', 'transfer', 'region'])" label="搜索" field="filterable">
+    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['select', 'cascader', 'transfer', 'region'])" :label="t('er.config.propsPanel.filterable')" field="filterable">
     </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent v-if="isPc && checkTypeBySelected(['number'])" label="控制按钮" field="controls">
+    <PanelsConfigComponentsCheckboxComponent v-if="isPc && checkTypeBySelected(['number'])" :label="t('er.config.propsPanel.numberControls.label')" field="controls">
       <el-row align="middle">
-        <el-col :span="10">按钮位置</el-col>
+        <el-col :span="10">{{ t('er.config.propsPanel.numberControls.position') }}</el-col>
         <el-col :span="14">
           <el-radio-group v-model="target.options.controlsPosition" size="large">
-            <el-radio-button :label="false">左右</el-radio-button>
-            <el-radio-button :label="true">上下</el-radio-button>
+            <el-radio-button :label="false">{{ t('er.config.propsPanel.numberControls.options[0]') }}</el-radio-button>
+            <el-radio-button :label="true">{{ t('er.config.propsPanel.numberControls.options[1]') }}</el-radio-button>
           </el-radio-group>
         </el-col>
       </el-row>
     </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['rate'])" label="半选" field="allowHalf">
+    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['rate'])" :label="t('er.config.propsPanel.allowHalf')" field="allowHalf">
     </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['color'])" label="透明度" field="showAlpha">
+    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['color'])" :label="t('er.config.propsPanel.alpha')" field="showAlpha">
     </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['cascader'])" label="选择任意节点" field="checkStrictly">
+    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['cascader'])" :label="t('er.config.propsPanel.anyNode')" field="checkStrictly">
     </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['input', 'select', 'time', 'date', 'cascader', 'region'])" label="一键清除按钮" field="clearable">
+    <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['input', 'select', 'time', 'date', 'cascader', 'region'])" :label="t('er.config.propsPanel.clearable')" field="clearable">
     </PanelsConfigComponentsCheckboxComponent>
   </template>
   <el-dialog
     v-model="dialogVisible"
-    title="录入数据"
+    :title="t('er.public.dataEntry')"
     :destroy-on-close="true"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
@@ -548,10 +550,10 @@ const handleAction = (type, value) => {
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="handleAction(2)">
-          取消
+          {{t('er.public.cancel')}}
         </el-button>
         <el-button type="primary" @click="handleAction(1)">
-          确认
+          {{t('er.public.confirm')}}
         </el-button>
       </span>
     </template>
diff --git a/packages/formEditor/components/Panels/Config/components/TabsLayout.vue b/packages/formEditor/components/Panels/Config/components/TabsLayout.vue
index 84f961a..7390e58 100644
--- a/packages/formEditor/components/Panels/Config/components/TabsLayout.vue
+++ b/packages/formEditor/components/Panels/Config/components/TabsLayout.vue
@@ -1,64 +1,71 @@
 <script>
+import { computed } from 'vue'
 import utils from '@ER/utils'
 import hooks from '@ER/hooks'
 export default {
-  name: 'ConfigGridLayout'
+  name: 'ConfigTabsLayout'
 }
 </script>
 <script setup>
-defineEmits(['changePanel'])
+const {
+  t
+} = hooks.useI18n()
 const {
   checkTypeBySelected,
   target
 } = hooks.useTarget()
-const options0 = [
-  {
-    label: '默认',
-    value: ''
-  },
-  {
-    label: '选项卡',
-    value: 'card'
-  },
-  {
-    label: '卡片化',
-    value: 'border-card'
-  }
-]
-const options1 = [
-  {
-    label: '顶部',
-    value: 'top'
-  },
-  {
-    label: '底部',
-    value: 'bottom'
-  },
-  {
-    label: '左侧',
-    value: 'left'
-  },
-  {
-    label: '右侧',
-    value: 'right'
-  }
-]
+const options = computed(() => {
+  return [
+    [
+      {
+        label: t('er.config.tabsLayout.style.options[0]'),
+        value: ''
+      },
+      {
+        label: t('er.config.tabsLayout.style.options[1]'),
+        value: 'card'
+      },
+      {
+        label: t('er.config.tabsLayout.style.options[2]'),
+        value: 'border-card'
+      }
+    ],
+    [
+      {
+        label: t('er.config.tabsLayout.tabPosition.options[0]'),
+        value: 'top'
+      },
+      {
+        label: t('er.config.tabsLayout.tabPosition.options[1]'),
+        value: 'bottom'
+      },
+      {
+        label: t('er.config.tabsLayout.tabPosition.options[2]'),
+        value: 'left'
+      },
+      {
+        label: t('er.config.tabsLayout.tabPosition.options[3]'),
+        value: 'right'
+      }
+    ]
+  ]
+})
 </script>
 <template>
-  <el-form-item label="风格类型">
+  <el-form-item :label="t('er.config.tabsLayout.style.label')">
     <el-radio-group v-model="target.options.type">
       <el-radio-button
-        v-for="item in options0"
+        v-for="item in options[0]"
         :key="item.value"
         :label="item.value">
         {{item.label}}
       </el-radio-button>
     </el-radio-group>
   </el-form-item>
-  <el-form-item label="选项卡位置">
+  <el-form-item :label="t('er.config.tabsLayout.tabPosition.label')">
     <el-radio-group v-model="target.options.tabPosition">
       <el-radio-button
-        v-for="item in options1"
+        v-for="item in options[1]"
         :key="item.value"
         :label="item.value">
         {{item.label}}
diff --git a/packages/formEditor/components/Panels/Config/components/TableLayout.vue b/packages/formEditor/components/Panels/Config/components/__TableLayout.vue
similarity index 81%
rename from packages/formEditor/components/Panels/Config/components/TableLayout.vue
rename to packages/formEditor/components/Panels/Config/components/__TableLayout.vue
index a95be43..9d8d39e 100644
--- a/packages/formEditor/components/Panels/Config/components/TableLayout.vue
+++ b/packages/formEditor/components/Panels/Config/components/__TableLayout.vue
@@ -5,14 +5,16 @@ export default {
 }
 </script>
 <script setup>
-defineEmits(['changePanel'])
+const {
+  t
+} = hooks.useI18n()
 const {
   checkTypeBySelected,
   target
 } = hooks.useTarget()
 </script>
 <template>
-  <el-form-item label="宽度">
+  <el-form-item :label="t('er.public.width')">
     <el-input
       v-model="target.options.width"
     >
@@ -24,14 +26,14 @@ const {
       </template>
     </el-input>
   </el-form-item>
-  <el-form-item label="边框宽度">
+  <el-form-item :label="t('er.public.borderWidth')">
     <el-input-number
       style="width: 100%;"
       :min="0"
       controls-position="right"
       v-model="target.options.borderWidth" />
   </el-form-item>
-  <el-form-item label="边框颜色">
+  <el-form-item :label="t('er.public.borderColor')">
     <el-color-picker
       color-format="rgb"
       v-model="target.options.borderColor"
diff --git a/packages/formEditor/components/Panels/Config/index.vue b/packages/formEditor/components/Panels/Config/index.vue
index 416d604..4555c68 100644
--- a/packages/formEditor/components/Panels/Config/index.vue
+++ b/packages/formEditor/components/Panels/Config/index.vue
@@ -1,5 +1,6 @@
 <script>
 import NAME from '@ER/formEditor/name.js'
+import utils from '@ER/utils'
 import hooks from '@ER/hooks'
 import { ref, computed, reactive, watch, onMounted } from 'vue'
 import _ from 'lodash-es'
@@ -28,6 +29,9 @@ const {
   isSelectCollapse,
   isSelectTable
 } = hooks.useTarget()
+const {
+  t
+} = hooks.useI18n()
 const activeName0 = ref('props')
 const isShow = computed(() => {
   return !_.isEmpty(state.sector) && state.sector.type !== 'grid'
@@ -42,13 +46,13 @@ const validator = (rule, value, callback) => {
   state.validator(target.value, (type) => {
     switch (type) {
       case 0:
-        callback(new Error('必填'))
+        callback(new Error(t('er.validateMsg.required')))
         break
       case 1:
         callback()
         break
       case 2:
-        callback(new Error('重复'))
+        callback(new Error(t('er.validateMsg.idUnique')))
         break
     }
   })
@@ -84,9 +88,27 @@ const bars = computed(() => {
   //   result = result.concat(target.value.context.parents)
   // }
   if (!isSelectRoot.value) {
-    result = result.concat(target.value.context.parents.filter(e => e.type !== 'inline'))
+    result = result.concat(target.value.context.parents.filter(e => !/^(inline|tr)$/.test(e.type)))
   }
-  return result
+  // console.log(result)
+  return result.map(node => {
+    const result = {
+      // eslint-disable-next-line
+      node: node,
+      label: ''
+    }
+    if (node === 'root') {
+      result.label = t('er.panels.config')
+    } else {
+      if (/^(col|collapseCol|tabsCol|td)$/.test(node.type)) {
+        result.label = t(`er.layout.${node.type}`)
+      } else {
+        // result.label = t(`er.fields.${node.type === 'input' ? `${node.type}.${node.options.renderType - 1}` : `${node.type}`}`)
+        result.label = utils.fieldLabel(t, node)
+      }
+    }
+    return result
+  })
 })
 const handleBreadcrumbClick = (item) => {
   if (item !== 'root') {
@@ -111,8 +133,8 @@ watch(target, () => {
 <!--      <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>-->
 <!--      <el-breadcrumb-item>promotion list</el-breadcrumb-item>-->
 <!--      <el-breadcrumb-item>promotion detail</el-breadcrumb-item>-->
-      <el-breadcrumb-item @click="index !== bars.length - 1 && handleBreadcrumbClick(item)" v-for="(item, index) in bars" :key="index">
-        {{index ? item.type : item}}
+      <el-breadcrumb-item @click="index !== bars.length - 1 && handleBreadcrumbClick(item.node)" v-for="(item, index) in bars" :key="index">
+        {{item.label}}
       </el-breadcrumb-item>
     </el-breadcrumb>
     <el-form
@@ -129,11 +151,6 @@ watch(target, () => {
         <el-tab-pane
           v-if="isSelectAnyElement"
           name="props">
-          <template #label>
-            <span class="custom-tabs-label">
-              <span>属性</span>
-            </span>
-          </template>
           <el-scrollbar>
             <PanelsConfigComponentsPropsPanel
               :key="target.id"
@@ -144,11 +161,6 @@ watch(target, () => {
         <el-tab-pane
           v-if="isSelectRoot"
           name="root">
-          <template #label>
-            <span class="custom-tabs-label">
-              <span>全局配置</span>
-            </span>
-          </template>
           <el-scrollbar>
             <GlobalConfigPanel></GlobalConfigPanel>
           </el-scrollbar>
diff --git a/packages/formEditor/components/Sector/selectElement.jsx b/packages/formEditor/components/Sector/selectElement.jsx
index c902a8b..f6bae92 100644
--- a/packages/formEditor/components/Sector/selectElement.jsx
+++ b/packages/formEditor/components/Sector/selectElement.jsx
@@ -75,6 +75,9 @@ export default {
   },
   setup (props) {
     const ER = inject('Everright')
+    const {
+      t
+    } = hooks.useI18n()
     const ns = hooks.useNamespace('selectElement')
     const isHover = ref(false)
     const isInlineChildren = utils.checkIslineChildren(props.data)
@@ -114,20 +117,20 @@ export default {
         dropdown: () => {
           let node = (
             <el-dropdown-menu>
-              <el-dropdown-item command="insert left">左插入列</el-dropdown-item>
-              <el-dropdown-item command="insert right">右插入列</el-dropdown-item>
-              <el-dropdown-item command="insert top">上插入行</el-dropdown-item>
-              <el-dropdown-item command="insert bottom">下插入行</el-dropdown-item>
-              <el-dropdown-item command="merge left" disabled={props.data.context.isDisableMargeLeft} divided>向左合并</el-dropdown-item>
-              <el-dropdown-item command="merge right" disabled={props.data.context.isDisableMargeRight}>向右合并</el-dropdown-item>
-              <el-dropdown-item command="merge row" disabled={props.data.context.isDisableMargeRow}>合并整行</el-dropdown-item>
-              <el-dropdown-item command="merge top" disabled={props.data.context.isDisableMargeTop} divided>向上合并</el-dropdown-item>
-              <el-dropdown-item command="merge bottom" disabled={props.data.context.isDisableMargeBottom}>向下合并</el-dropdown-item>
-              <el-dropdown-item command="merge column" disabled={props.data.context.isDisableMargeColumn}>合并整列</el-dropdown-item>
-              <el-dropdown-item command="del row" divided disabled={props.data.context.isDisableDelRow}>删除整行</el-dropdown-item>
-              <el-dropdown-item command="del column" disabled={props.data.context.isDisableDelColumn}>删除整列</el-dropdown-item>
-              <el-dropdown-item command="split column" disabled={props.data.context.isDisableSplitColumn} divided>拆分成列</el-dropdown-item>
-              <el-dropdown-item command="split row" disabled={props.data.context.isDisableSplitRow}>拆分成行</el-dropdown-item>
+              <el-dropdown-item command="insert left">{t('er.sector.insertLeft')}</el-dropdown-item>
+              <el-dropdown-item command="insert right">{t('er.sector.insertRight')}</el-dropdown-item>
+              <el-dropdown-item command="insert top">{t('er.sector.insertTop')}</el-dropdown-item>
+              <el-dropdown-item command="insert bottom">{t('er.sector.insertBottom')}</el-dropdown-item>
+              <el-dropdown-item command="merge left" disabled={props.data.context.isDisableMargeLeft} divided>{t('er.sector.mergeLeft')}</el-dropdown-item>
+              <el-dropdown-item command="merge right" disabled={props.data.context.isDisableMargeRight}>{t('er.sector.mergeRight')}</el-dropdown-item>
+              <el-dropdown-item command="merge row" disabled={props.data.context.isDisableMargeRow}>{t('er.sector.mergeRow')}</el-dropdown-item>
+              <el-dropdown-item command="merge top" disabled={props.data.context.isDisableMargeTop} divided>{t('er.sector.mergeTop')}</el-dropdown-item>
+              <el-dropdown-item command="merge bottom" disabled={props.data.context.isDisableMargeBottom}>{t('er.sector.mergeBottom')}</el-dropdown-item>
+              <el-dropdown-item command="merge column" disabled={props.data.context.isDisableMargeColumn}>{t('er.sector.mergeColumn')}</el-dropdown-item>
+              <el-dropdown-item command="del row" divided disabled={props.data.context.isDisableDelRow}>{t('er.sector.delRow')}</el-dropdown-item>
+              <el-dropdown-item command="del column" disabled={props.data.context.isDisableDelColumn}>{t('er.sector.delColumn')}</el-dropdown-item>
+              <el-dropdown-item command="split column" disabled={props.data.context.isDisableSplitColumn} divided>{t('er.sector.splitColumn')}</el-dropdown-item>
+              <el-dropdown-item command="split row" disabled={props.data.context.isDisableSplitRow}>{t('er.sector.splitRow')}</el-dropdown-item>
             </el-dropdown-menu>
           )
           if (!isShowCell.value) {
@@ -307,6 +310,11 @@ export default {
           {
             unref(isEditModel) && (
               <div class={[ns.e('bottomRight')]}>
+                {props.hasDel && (
+                  <Icon class={[ns.e('copyDelete')]} onClick={withModifiers((e) => {
+                    handleAction(1)
+                  }, ['stop'])} icon="delete"></Icon>
+                )}
                 {
                   props.hasInserColumn && (<Icon class={[ns.e('charulieIcon')]} onClick={withModifiers((e) => {
                     handleAction(4)
@@ -322,11 +330,6 @@ export default {
                     handleAction(2)
                   }, ['stop'])} icon="copy"></Icon>)
                 }
-                {props.hasDel && (
-                  <Icon class={[ns.e('copyDelete')]} onClick={withModifiers((e) => {
-                    handleAction(1)
-                  }, ['stop'])} icon="delete"></Icon>
-                )}
                 {props.hasWidthScale && (
                   <div ref={widthScaleElement}><Icon class={[ns.e('widthScale')]} icon="zuoyouyidong"></Icon></div>)}
                 {props.hasTableCellOperator && renderTableCellOperator()}
diff --git a/packages/formEditor/componentsConfig.js b/packages/formEditor/componentsConfig.js
index dcddaa8..133618a 100644
--- a/packages/formEditor/componentsConfig.js
+++ b/packages/formEditor/componentsConfig.js
@@ -9,7 +9,6 @@ export const fieldConfig = [
         icon: 'input',
         key: '',
         id: '',
-        fieldType: 2,
         options: {
           clearable: true,
           isShowWordLimit: false,
@@ -182,7 +181,7 @@ export const fieldConfig = [
           filterable: true,
           multiple: false,
           defaultValue: '',
-          placeholder: '',
+          placeholder: ' ',
           labelWidth: 100,
           isShowLabel: true,
           disabled: false,
@@ -302,7 +301,7 @@ export const fieldConfig = [
         id: '',
         options: {
           defaultValue: '',
-          placeholder: '',
+          placeholder: ' ',
           action: '/dev-api/uploads',
           size: 1,
           labelWidth: 100,
@@ -322,7 +321,7 @@ export const fieldConfig = [
           multiple: false,
           checkStrictly: false,
           defaultValue: '',
-          placeholder: '',
+          placeholder: ' ',
           labelWidth: 100,
           isShowLabel: true,
           required: false,
@@ -372,6 +371,7 @@ export const fieldConfig = [
         key: '',
         id: '',
         options: {
+          placeholder: ' ',
           required: false,
           isShowLabel: true,
           labelWidth: 100,
diff --git a/packages/formEditor/defaultProps.js b/packages/formEditor/defaultProps.js
index 43ee7b6..3659a4c 100644
--- a/packages/formEditor/defaultProps.js
+++ b/packages/formEditor/defaultProps.js
@@ -1,10 +1,13 @@
 export default {
+  lang: {
+    type: String,
+    default: 'zh-cn'
+  },
   layoutType: {
     type: Number,
     default: 2
   },
   fileUploadURI: {
-    type: String,
-    default: 'http://localhost:8000/Everright-api/lowCode/uploads'
+    type: String
   }
 }
diff --git a/packages/formEditor/index.vue b/packages/formEditor/index.vue
index 3ac0879..61a5bf7 100644
--- a/packages/formEditor/index.vue
+++ b/packages/formEditor/index.vue
@@ -1,10 +1,10 @@
 <script>
+import { ClickOutside as vClickOutside } from 'element-plus'
 import { defineProps, ref, reactive, computed, provide, getCurrentInstance, nextTick, onMounted } from 'vue'
 import PanelsBlocks from '@ER/formEditor/components/Panels/Blocks'
 import PanelsCanves from '@ER/formEditor/components/Panels/Canves'
 import PanelsConfig from '@ER/formEditor/components/Panels/Config/index.vue'
 import Icon from '@ER/icon'
-import { ElMessage } from 'element-plus'
 import NAME from '@ER/formEditor/name.js'
 import ClipboardJS from 'clipboard'
 import hooks from '@ER/hooks'
@@ -92,6 +92,9 @@ const {
   // stop,
   // restart
 } = hooks.useHistory(state)
+const {
+  t
+} = hooks.useI18n(props)
 const element = ref('')
 const copyElement = ref(null)
 const isShow = ref(true)
@@ -152,7 +155,7 @@ const addFieldData = (node) => {
     node.options.action = props.fileUploadURI
   }
 }
-const wrapElement = (el, isWrap = true, isSetSector = true, isRegen = true) => {
+const wrapElement = (el, isWrap = true, isSetSector = true, sourceBlock = true) => {
   const newEl = isWrap
     ? {
         type: 'inline',
@@ -161,7 +164,10 @@ const wrapElement = (el, isWrap = true, isSetSector = true, isRegen = true) => {
         ]
       }
     : el
-  const node = isRegen
+  if (sourceBlock) {
+    el.label = utils.fieldLabel(t, el)
+  }
+  const node = sourceBlock
     ? utils.wrapElement(newEl, (node) => {
       addFieldData(node)
       addField(node)
@@ -355,6 +361,9 @@ const handleOperation = (type) => {
       break
   }
 }
+const onClickOutside = () => {
+  // setSector('root')
+}
 </script>
 <template>
 <!--  <el-dialog destroy-on-close :class="[ns.e('previewDialog')]" fullscreen v-model="state.previewVisible">-->
@@ -391,7 +400,7 @@ const handleOperation = (type) => {
     </el-container>
     <el-container :class="[ns.e('container')]">
       <PanelsBlocks></PanelsBlocks>
-      <PanelsCanves v-if="isShow" :data="state.store"></PanelsCanves>
+      <PanelsCanves v-click-outside="onClickOutside" v-if="isShow" :data="state.store"></PanelsCanves>
       <PanelsConfig v-if="isShow && isShowConfig"></PanelsConfig>
     </el-container>
   </el-container>
diff --git a/packages/formEditor/locale/en.js b/packages/formEditor/locale/en.js
new file mode 100644
index 0000000..b1a93f9
--- /dev/null
+++ b/packages/formEditor/locale/en.js
@@ -0,0 +1,241 @@
+export default {
+  er: {
+    panels: {
+      config: 'Global'
+    },
+    fields: {
+      input: [
+        'Input',
+        'Email',
+        'ID number',
+        'Phone',
+        'URL'
+      ],
+      textarea: 'Textarea',
+      number: 'Number',
+      radio: 'Radio',
+      checkbox: 'Checkbox',
+      select: 'Select',
+      time: 'Time',
+      date: 'Date',
+      rate: 'Rate',
+      switch: 'Switch',
+      slider: 'Slider',
+      html: 'Html',
+      cascader: 'Cascader',
+      uploadfile: 'File',
+      signature: 'Signature',
+      region: 'Region',
+      grid: 'Grid',
+      table: 'Table',
+      tabs: 'Tabs',
+      collapse: 'Collapse',
+      divider: 'Divider'
+    },
+    blocks: {
+      container: 'Container',
+      field: 'Basic field'
+    },
+    layout: {
+      tabsCol: 'Tab panel',
+      col: 'Col',
+      collapseCol: 'Collapse panel',
+      td: 'td'
+    },
+    config: {
+      globalConfig: {
+        labelPosition: {
+          label: 'Label Position',
+          left: 'Left',
+          right: 'Right',
+          top: 'Top'
+        },
+        sync: {
+          label: 'Synchronize computer and mobile configurations',
+          warning: 'Data inconsistency, according to your choice of configuration'
+        },
+        componentSize: {
+          label: 'Size of components',
+          large: 'Large',
+          default: 'Default',
+          small: 'Small'
+        }
+      },
+      tabsLayout: {
+        style: {
+          label: 'Type',
+          options: [
+            'Default',
+            'Tabs',
+            'Border-Card'
+          ]
+        },
+        tabPosition: {
+          label: 'Tab position',
+          options: [
+            'Top',
+            'Bottom',
+            'Left',
+            'Right'
+          ]
+        }
+      },
+      borderComponent: {
+        borderLine: 'Border line',
+        borderWidth: 'Border width'
+      },
+      gridLayout: {
+        justify: {
+          label: 'Horizontal arrangement',
+          options: [
+            'Start',
+            'End',
+            'Center',
+            'Space around',
+            'Space between'
+          ]
+        }
+      },
+      dataComponent1: {
+        defaultLabel: 'Default value',
+        unique: 'Unique id',
+        name: 'Name',
+        operate: 'Operate',
+        add: 'Add'
+      },
+      dataComponent2: {
+        level: 'Level',
+        add: 'Add'
+      },
+      dataComponent3: {
+        panel: 'Panel',
+        add: 'Add'
+      },
+      propsPanel: {
+        title: 'Title',
+        titleWidth: 'Title width',
+        id: 'Id',
+        defaultContent: 'Default content',
+        placeholder: 'Placeholder',
+        brushColor: 'Brush color',
+        format: 'Format',
+        dateType: 'Date type',
+        layout: {
+          label: 'Layout',
+          options: [
+            'Block',
+            'Inline'
+          ]
+        },
+        contentPosition: {
+          label: 'Text position',
+          options: [
+            'Left',
+            'Center',
+            'Right'
+          ]
+        },
+        textareaHeight: 'Textarea height',
+        uploadfile: {
+          fileType: 'File type',
+          accept: '',
+          uploadLimit: 'Upload limit',
+          fileSize: 'File size'
+        },
+        prepend: 'Prepend',
+        append: 'Append',
+        step: 'Step',
+        precision: 'Precision',
+        region: {
+          label: 'select range',
+          options: [
+            'Province',
+            'Province/City',
+            'Province/City/County'
+          ]
+        },
+        trim: 'Trim',
+        wordLimit: 'Word limit',
+        dateRange: 'Date range',
+        accordion: 'Accordion',
+        showPassword: 'Password',
+        multiple: 'Multiple',
+        filterable: 'Search',
+        numberControls: {
+          label: 'Control button',
+          position: 'Button position',
+          options: [
+            'Horizontal',
+            'Vertical'
+          ]
+        },
+        allowHalf: 'Allow half',
+        alpha: 'Alpha',
+        anyNode: 'Select any node',
+        clearable: 'clearable'
+      }
+    },
+    public: {
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      button: 'Button',
+      text: 'Cext',
+      color: 'Color',
+      backgroundColor: 'Background-color',
+      width: 'Width',
+      radius: 'Radius',
+      style: 'Style',
+      background: 'Background',
+      image: 'Image',
+      remove: 'Remove',
+      margin: 'Margin',
+      padding: 'Padding',
+      unit: 'Unit',
+      min: 'Min',
+      max: 'Max',
+      clear: 'Clear',
+      dataEntry: 'Data entry',
+      data: 'Data',
+      disabled: 'disabled',
+      back: 'Back',
+      save: 'Save',
+      reset: 'Reset'
+    },
+    validateMsg: {
+      required: 'Required',
+      limitWord: `At least <%= min %> character`,
+      email: 'Please enter the valid email address',
+      IdNumber: 'Please enter the valid ID number',
+      phone: 'Please enter the valid Phone number',
+      http: 'Please enter the valid Url',
+      fileSize: 'File size cannot exceed <%= size %> MB',
+      idUnique: 'ID must be unique'
+    },
+    form: {
+      selectDate: 'Select date',
+      selectTime: 'Select time',
+      notFilled: 'Not filled',
+      filled: 'Filled',
+      addSignature: 'Add signature',
+      useSignature: 'Use signature',
+      uploading: 'uploading...',
+      uploadFailed: 'Fail to upload'
+    },
+    sector: {
+      insertLeft: 'Insert column left',
+      insertRight: 'Insert column right',
+      insertTop: 'Insert row before',
+      insertBottom: 'Insert row after',
+      mergeLeft: 'Merge left',
+      mergeRight: 'Merge right',
+      mergeRow: 'Merge row',
+      mergeTop: 'Merge on',
+      mergeBottom: 'Merge down',
+      mergeColumn: 'Merge column',
+      delRow: 'Delete row',
+      delColumn: 'Delete column',
+      splitColumn: 'Split column',
+      splitRow: 'Split row'
+    }
+  }
+}
diff --git a/packages/formEditor/locale/index.js b/packages/formEditor/locale/index.js
new file mode 100644
index 0000000..257631d
--- /dev/null
+++ b/packages/formEditor/locale/index.js
@@ -0,0 +1,9 @@
+import _ from 'lodash-es'
+// const importModules = import.meta.glob('./*.js', { import: 'setup' })
+const importModules = import.meta.glob('./*.js', { import: 'default', eager: true })
+const modules = {}
+_.forIn(importModules, (func, path) => {
+  const re = /[a-zA-Z0-9_-]*(?=\.js)/g
+  modules[path.match(re)[0]] = func
+})
+export default modules
diff --git a/packages/formEditor/locale/zh-cn.js b/packages/formEditor/locale/zh-cn.js
new file mode 100644
index 0000000..fa30d89
--- /dev/null
+++ b/packages/formEditor/locale/zh-cn.js
@@ -0,0 +1,241 @@
+export default {
+  er: {
+    panels: {
+      config: '全局配置'
+    },
+    fields: {
+      input: [
+        '单行文本',
+        '邮箱',
+        '身份证号',
+        '手机号',
+        '网址'
+      ],
+      textarea: '多行文本',
+      number: '数字',
+      radio: '单选框',
+      checkbox: '复选框',
+      select: '下拉框',
+      time: '时间',
+      date: '日期',
+      rate: '评分',
+      switch: '开关',
+      slider: '滑块',
+      html: '富文本编辑器',
+      cascader: '级联框',
+      uploadfile: '上传文件',
+      signature: '签名',
+      region: '省市区',
+      grid: '栅格布局',
+      table: '表格布局',
+      tabs: '标签页',
+      collapse: '折叠面板',
+      divider: '分割线'
+    },
+    blocks: {
+      container: '容器',
+      field: '基础字段'
+    },
+    layout: {
+      tabsCol: '标签面板',
+      col: '栅格列',
+      collapseCol: '折叠子面板',
+      td: '单元格'
+    },
+    config: {
+      globalConfig: {
+        labelPosition: {
+          label: '标签对齐方式',
+          left: '左对齐',
+          right: '右对齐',
+          top: '顶部对齐'
+        },
+        sync: {
+          label: '同步设置电脑和移动端',
+          warning: '数据存在不一致，根据你的选择进行同步'
+        },
+        componentSize: {
+          label: '组件尺寸',
+          large: '大',
+          default: '中',
+          small: '小'
+        }
+      },
+      tabsLayout: {
+        style: {
+          label: '风格类型',
+          options: [
+            '默认',
+            '选项卡',
+            '卡片化'
+          ]
+        },
+        tabPosition: {
+          label: '选项卡位置',
+          options: [
+            '顶部',
+            '底部',
+            '左侧',
+            '右侧'
+          ]
+        }
+      },
+      borderComponent: {
+        borderLine: '边框线',
+        borderWidth: '边框宽度'
+      },
+      gridLayout: {
+        justify: {
+          label: '水平排列方式',
+          options: [
+            '左对齐',
+            '右对齐',
+            '居中',
+            '两侧间隔相等',
+            '两端对齐'
+          ]
+        }
+      },
+      dataComponent1: {
+        defaultLabel: '默认',
+        unique: '选项唯一标识',
+        name: '选项名称',
+        operate: '操作',
+        add: '添加选项'
+      },
+      dataComponent2: {
+        level: '级选项',
+        add: '添加选项'
+      },
+      dataComponent3: {
+        panel: '面板',
+        add: '添加面板'
+      },
+      propsPanel: {
+        title: '标题',
+        titleWidth: '标题宽度',
+        id: '字段标识',
+        defaultContent: '默认内容',
+        placeholder: '提示文字',
+        brushColor: '画笔颜色',
+        format: '显示格式',
+        dateType: '日期类型',
+        layout: {
+          label: '布局方式',
+          options: [
+            '块级',
+            '行级'
+          ]
+        },
+        contentPosition: {
+          label: '文案位置',
+          options: [
+            '左侧',
+            '居中',
+            '右侧'
+          ]
+        },
+        textareaHeight: '文本域高度',
+        uploadfile: {
+          fileType: '文件类型',
+          accept: '',
+          uploadLimit: '上传个数限制',
+          fileSize: '文件大小'
+        },
+        prepend: '前缀',
+        append: '后缀',
+        step: '步长',
+        precision: '精度',
+        region: {
+          label: '选择范围',
+          options: [
+            '省',
+            '省/市',
+            '省/市/县'
+          ]
+        },
+        trim: '去除首尾空格',
+        wordLimit: '限定字符',
+        dateRange: '限定日期范围',
+        accordion: '手风琴',
+        showPassword: '作为密码',
+        multiple: '多选',
+        filterable: '搜索',
+        numberControls: {
+          label: '控制按钮',
+          position: '按钮位置',
+          options: [
+            '左右',
+            '上下'
+          ]
+        },
+        allowHalf: '半选',
+        alpha: '透明度',
+        anyNode: '选择任意节点',
+        clearable: '一键清除按钮'
+      }
+    },
+    public: {
+      confirm: '确定',
+      cancel: '取消',
+      button: '按钮',
+      text: '文字',
+      color: '颜色',
+      backgroundColor: '背景颜色',
+      width: '宽度',
+      radius: '圆角',
+      style: '风格',
+      background: '背景',
+      image: '图片',
+      remove: '移除',
+      margin: '外边距',
+      padding: '内边距',
+      unit: '单位',
+      min: '最小',
+      max: '最大',
+      clear: '清空',
+      dataEntry: '录入数据',
+      data: '数据',
+      disabled: '禁用',
+      back: '返回',
+      save: '保存',
+      reset: '重置'
+    },
+    validateMsg: {
+      required: '必填',
+      limitWord: `最少<%= min %>字符`,
+      email: '请输入正确的邮箱地址',
+      IdNumber: '请输入正确的身份证号',
+      phone: '请输入正确的手机号',
+      http: '请输入正确的网址',
+      fileSize: '文件大小不能超过 <%= size %> MB',
+      idUnique: '字段标识重复'
+    },
+    form: {
+      selectDate: '选择日期',
+      selectTime: '选择时间',
+      notFilled: '未填写',
+      filled: '已填写',
+      addSignature: '添加签名',
+      useSignature: '使用签名',
+      uploading: '上传中...',
+      uploadFailed: '上传失败'
+    },
+    sector: {
+      insertLeft: '左插入列',
+      insertRight: '右插入列',
+      insertTop: '上插入行',
+      insertBottom: '下插入行',
+      mergeLeft: '向左合并',
+      mergeRight: '向右合并',
+      mergeRow: '合并整行',
+      mergeTop: '向上合并',
+      mergeBottom: '向下合并',
+      mergeColumn: '合并整列',
+      delRow: '删除整行',
+      delColumn: '删除整列',
+      splitColumn: '拆分成列',
+      splitRow: '拆分成行'
+    }
+  }
+}
diff --git a/packages/formEditor/preview.vue b/packages/formEditor/preview.vue
index 514de8f..0bffa5e 100644
--- a/packages/formEditor/preview.vue
+++ b/packages/formEditor/preview.vue
@@ -23,7 +23,7 @@ const state = reactive({
   platform: utils.isPc() ? 'pc' : 'mobile',
   mode: 'preview',
   config: {},
-  Namespace: 'editor',
+  Namespace: 'formEditor',
   validateStates: [],
   data: {},
   fields: []
@@ -41,7 +41,8 @@ const getData = () => {
 provide('Everright', {
   state,
   emit,
-  getData
+  getData,
+  props
 })
 hooks.useTarget()
 const setData = (data, value) => {
diff --git a/packages/hooks/use-i18n/index.js b/packages/hooks/use-i18n/index.js
index 34b2b2c..20b192a 100644
--- a/packages/hooks/use-i18n/index.js
+++ b/packages/hooks/use-i18n/index.js
@@ -1,2 +1,24 @@
-export const useI18n = (source) => {
+import { computed, inject } from 'vue'
+import locale from '@ER/formEditor/locale'
+import { get, template, isEmpty } from 'lodash-es'
+const transferData = (lang, path, options = {}) => {
+  let result = ''
+  if (isEmpty(options)) {
+    result = get(locale[lang.value], path, '')
+  } else {
+    result = template(get(locale[lang.value], path, ''))(options)
+  }
+  return result
+}
+export const useI18n = (props) => {
+  const ER = inject('Everright', { props })
+  const lang = computed(() => {
+    return ER.props.lang
+  })
+  return {
+    lang,
+    t (path, options) {
+      return transferData(lang, path, options)
+    }
+  }
 }
diff --git a/packages/hooks/use-props/index.js b/packages/hooks/use-props/index.js
index 126daf3..baf877b 100644
--- a/packages/hooks/use-props/index.js
+++ b/packages/hooks/use-props/index.js
@@ -4,8 +4,8 @@ import dayjs from 'dayjs'
 import _ from 'lodash-es'
 import Region from '@ER/region/Region'
 import { areaList } from '@vant/area-data'
-
-const addValidate = (result, node, isPc) => {
+import { useI18n } from '../use-i18n'
+const addValidate = (result, node, isPc, t) => {
   const {
     options
   } = node
@@ -58,7 +58,7 @@ const addValidate = (result, node, isPc) => {
     const newValue = options.isShowTrim ? value.trim() : value
     // if (options.required && (!newValue || newValue === null || newValue === undefined || (Array.isArray(newValue) && !newValue.length))) {
     if (options.required && (newValue === '' || newValue === null || newValue === undefined || (Array.isArray(newValue) && !newValue.length))) {
-      reject('必填')
+      reject(t('er.validateMsg.required'))
       return
     }
     switch (node.type) {
@@ -66,35 +66,35 @@ const addValidate = (result, node, isPc) => {
         switch (options.renderType) {
           case 1:
             if (!!newValue && options.isShowWordLimit && newValue.length < options.min) {
-              reject(`最少 ${options.min}字符`)
+              reject(t('er.validateMsg.limitWord', { min: options.min }))
             } else {
               resolve()
             }
             break
           case 2:
             if (!!newValue && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(newValue)) {
-              reject('输入邮箱地址不符合规则')
+              reject(t('er.validateMsg.email'))
             } else {
               resolve()
             }
             break
           case 3:
             if (!!newValue && !/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(newValue)) {
-              reject('输入身份证不符合规则')
+              reject(t('er.validateMsg.IdNumber'))
             } else {
               resolve()
             }
             break
           case 4:
             if (!!newValue && !/^(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(newValue)) {
-              reject('输入手机号不符合规则')
+              reject(t('er.validateMsg.phone'))
             } else {
               resolve()
             }
             break
           case 5:
             if (!!newValue && !/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i.test(newValue)) {
-              reject('输入网址不符合规则')
+              reject(t('er.validateMsg.http'))
             } else {
               resolve()
             }
@@ -103,7 +103,7 @@ const addValidate = (result, node, isPc) => {
         break
       case 'textarea':
         if (!!newValue && options.isShowWordLimit && newValue.length < options.min) {
-          reject(`最少 ${options.min}字符`)
+          reject(t('er.validateMsg.limitWord', { min: options.min }))
         } else {
           resolve()
         }
@@ -122,6 +122,9 @@ const addValidate = (result, node, isPc) => {
   result.rules = [obj]
 }
 export const useProps = (state, data, isPc = true, isRoot = false, specialHandling) => {
+  const {
+    t
+  } = useI18n()
   return computed(() => {
     let node = isRoot ? data.config : data
     let result = {}
@@ -150,7 +153,7 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
       required: options.required
     }
     if (isPc) {
-      addValidate(result, node, isPc)
+      addValidate(result, node, isPc, t)
       // result.style = {
       //   width: options.width + options.widthType
       // }
@@ -158,7 +161,7 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
       // result.labelWidth = !options.isShowLabel && 'auto'
     } else {
       // result.labelWidth = options.isShowLabel ? options.labelWidth + 'px' : 'auto'
-      addValidate(result, node, isPc)
+      addValidate(result, node, isPc, t)
       // result.label = node.label
     }
     switch (node.type) {
@@ -381,7 +384,7 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
         } else {
           result.maxCount = options.limit
           result.onOversize = (file) => {
-            showToast(`文件大小不能超过 ${options.size} MB`)
+            showToast(t('er.validateMsg.fileSize', { size: options.size }))
           }
         }
         break
diff --git a/packages/region/index.vue b/packages/region/index.vue
index 71f66ed..b7bc1ac 100644
--- a/packages/region/index.vue
+++ b/packages/region/index.vue
@@ -19,6 +19,9 @@ const props = defineProps({
   },
   modelValue: {
     type: Array
+  },
+  placeholder: {
+    type: String
   }
 })
 const emit = defineEmits(['update:modelValue', 'change'])
@@ -288,7 +291,7 @@ onMounted(() => {
         <el-input
           :readonly="multiple"
           ref="input"
-          :placeholder="searchInputValue ? '' : '请输入'"
+          :placeholder="searchInputValue ? '' : placeholder"
           v-model="state.value0"
           @input="handleInput"
         >
diff --git a/packages/theme/formEditor/Blocks.scss b/packages/theme/formEditor/Blocks.scss
index 3143af8..063f8c4 100644
--- a/packages/theme/formEditor/Blocks.scss
+++ b/packages/theme/formEditor/Blocks.scss
@@ -44,6 +44,9 @@
   //    color: #000;
   //  }
   //}
+  .#{$namespace}-DeviceSwitch {
+    border-top: 1px solid #DDDDDD;
+  }
   @include e(dragContent) {
     display: flex;
     justify-content: space-between;
diff --git a/packages/theme/formEditor/CollapseLayout.scss b/packages/theme/formEditor/CollapseLayout.scss
new file mode 100644
index 0000000..02047e7
--- /dev/null
+++ b/packages/theme/formEditor/CollapseLayout.scss
@@ -0,0 +1,5 @@
+@include b(CollapseLayout) {
+  @include e(area) {
+    outline: 1px dashed #ddd;
+  }
+}
diff --git a/packages/theme/formEditor/Config.scss b/packages/theme/formEditor/Config.scss
index 533e99f..5a07b30 100644
--- a/packages/theme/formEditor/Config.scss
+++ b/packages/theme/formEditor/Config.scss
@@ -53,6 +53,12 @@
     padding: 0;
   }
   @include e(breadcrumb) {
+    .el-breadcrumb__item {
+      padding-bottom: 10px;
+    }
+    .el-breadcrumb__inner {
+      cursor: pointer !important;
+    }
     &>span:not(:last-child) {
       span {
         color: #909399;
@@ -65,6 +71,9 @@
     }
   }
   @include e(wrap) {
+    &>.el-tabs__header {
+      display: none;
+    }
     //height: 100%;
     //li{
     //  padding: 10px 0;
diff --git a/packages/theme/formEditor/DeviceSwitch.scss b/packages/theme/formEditor/DeviceSwitch.scss
index 0c0d2ff..10d5cdd 100644
--- a/packages/theme/formEditor/DeviceSwitch.scss
+++ b/packages/theme/formEditor/DeviceSwitch.scss
@@ -3,7 +3,6 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  border-top: 1px solid #DDDDDD;
   &>div{
     width: 78px;
     height: 36px;
diff --git a/packages/theme/formEditor/DragGableLayout.scss b/packages/theme/formEditor/DragGableLayout.scss
index fe6686f..e9ca348 100644
--- a/packages/theme/formEditor/DragGableLayout.scss
+++ b/packages/theme/formEditor/DragGableLayout.scss
@@ -1,15 +1,15 @@
 @include b(DragGableLayout) {
   //background: #F2F8FF !important;
   @include e(edit) {
-    padding: 10px;
-    outline: 1px dashed #ddd;
+    //padding: 10px;
+    //outline: 1px dashed #ddd;
     .el-row {
       padding: 10px;
     }
   }
   @include e(dropHere) {
     display: flex;
-    background: #F2F8FF !important;
+    //background: #F2F8FF !important;
     justify-content: center;
     align-items: center;
     height: 60px;
diff --git a/packages/theme/formEditor/FormTypes/Number.scss b/packages/theme/formEditor/FormTypes/Number.scss
new file mode 100644
index 0000000..4302eb5
--- /dev/null
+++ b/packages/theme/formEditor/FormTypes/Number.scss
@@ -0,0 +1,3 @@
+@include b(FormTypesNumber_pc) {
+  width: 100%;
+}
diff --git a/packages/theme/formEditor/GridLayout.scss b/packages/theme/formEditor/GridLayout.scss
index 6d226ca..c99dbdc 100644
--- a/packages/theme/formEditor/GridLayout.scss
+++ b/packages/theme/formEditor/GridLayout.scss
@@ -1,2 +1,5 @@
 @include b(GridLayout) {
+  @include e(area) {
+    outline: 1px dashed #ddd;
+  }
 }
diff --git a/packages/theme/formEditor/SelectElement.scss b/packages/theme/formEditor/SelectElement.scss
index 9254513..2c4ddd4 100644
--- a/packages/theme/formEditor/SelectElement.scss
+++ b/packages/theme/formEditor/SelectElement.scss
@@ -1,5 +1,5 @@
 @include b(selectElement) {
-  padding: 16px;
+  padding: 8px;
   position: relative;
   outline-offset: -1px;
   box-sizing: border-box;
@@ -24,6 +24,8 @@
     }
   }
   @include when(Selected) {
+    outline: 1px solid #ffbd00;
+    //background: none !important;
     &>.#{$namespace}-selectElement__topLeft,&>.#{$namespace}-selectElement__topRight,&>.#{$namespace}-selectElement__bottomRight {
       opacity: 1;
     }
@@ -47,6 +49,9 @@
     line-height: 24px;
     margin: 0 4px;
   }
+  @include e(widthScale) {
+    cursor: col-resize;
+  }
   @include e((topLeft,topRight,bottomRight)) {
     position: absolute;
     bottom: 0;
diff --git a/packages/theme/formEditor/TableLayout.scss b/packages/theme/formEditor/TableLayout.scss
index c2c48ad..ea989f2 100644
--- a/packages/theme/formEditor/TableLayout.scss
+++ b/packages/theme/formEditor/TableLayout.scss
@@ -1,5 +1,11 @@
 @include b(TableLayout) {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
+  padding: 20px !important;
+  table {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+  @include e(area) {
+    outline: 1px dashed #ddd;
+  }
 }
diff --git a/packages/theme/formEditor/TabsLayout.scss b/packages/theme/formEditor/TabsLayout.scss
new file mode 100644
index 0000000..ba7b2ef
--- /dev/null
+++ b/packages/theme/formEditor/TabsLayout.scss
@@ -0,0 +1,8 @@
+@include b(TabsLayout) {
+  //width: 100%;
+  //table-layout: fixed;
+  //border-collapse: collapse;
+  @include e(area) {
+    outline: 1px dashed #ddd;
+  }
+}
diff --git a/packages/theme/formEditor/index.scss b/packages/theme/formEditor/index.scss
index a3c2959..c0ccbd8 100644
--- a/packages/theme/formEditor/index.scss
+++ b/packages/theme/formEditor/index.scss
@@ -11,6 +11,8 @@ $namespace: 'Everright-formEditor';
 @import './GlobalConfigPanel';
 @import './GridLayout';
 @import './TableLayout';
+@import './TabsLayout';
+@import './CollapseLayout';
 @import './InlineLayout';
 @import './DragGableLayout';
 @import './SelectElement';
@@ -24,6 +26,7 @@ $namespace: 'Everright-formEditor';
 @import './FormTypes/Time';
 @import './FormTypes/Date';
 @import './FormTypes/Region';
+@import './FormTypes/Number';
 @import './ConfigBackground';
 @import './ConfigBorder';
 @import './ConfigAllsides';
diff --git a/packages/utils/field.js b/packages/utils/field.js
index 83a3b3d..64e4759 100644
--- a/packages/utils/field.js
+++ b/packages/utils/field.js
@@ -48,10 +48,10 @@ const wrapElement = (element, fn) => {
           left: 0
         },
         padding: {
-          top: 16,
-          right: 16,
-          bottom: 16,
-          left: 16
+          top: 8,
+          right: 8,
+          bottom: 8,
+          left: 8
         },
         background: {
           color: '',
@@ -103,10 +103,10 @@ const wrapElement = (element, fn) => {
     if (/^(td)$/.test(node.type)) {
       node.style = {
         padding: {
-          top: 16,
-          right: 16,
-          bottom: 16,
-          left: 16
+          top: 8,
+          right: 8,
+          bottom: 8,
+          left: 8
         },
         background: {
           color: '',
@@ -293,6 +293,7 @@ const syncWidthByPlatform = (node, platform, value) => {
     }
   })
 }
+const fieldLabel = (t, node) => t(`er.fields.${node.type === 'input' ? `${node.type}.${node.options.renderType - 1}` : `${node.type}`}`)
 export {
   syncWidthByPlatform,
   wrapElement,
@@ -305,5 +306,6 @@ export {
   combinationData2,
   checkIslineChildren,
   checkIsField,
-  pickfields
+  pickfields,
+  fieldLabel
 }
diff --git a/server/index.js b/server/index.js
index 335e77b..7e1cec9 100644
--- a/server/index.js
+++ b/server/index.js
@@ -16,7 +16,7 @@ app.use((req, res, next) => {
   next()
 })
 routes(app)
-const { PORT = 8000 } = process.env
+const { PORT = 8001 } = process.env
 app.listen(PORT, () => {
   console.log()
   console.log(` Server app running in port ${PORT}`)