1. 替换vue-i18n多语言实现；

2. 修复一丢丢小问题。

README.md

@@ -5,7 +5,7 @@
 
 <br/>
 
-#### 立即体验VForm 3
+### 立即体验VForm 3
 [在线Demo](http://120.92.142.115:81/vform3/)
  
 ### 友情链接

package.json

@@ -19,7 +19,6 @@
     "mitt": "^3.0.0",
     "sortablejs": "1.14.0",
     "vue": "^3.0.0",
-    "vue-i18n": "^9.2.0-beta.23",
     "vue3-quill": "^0.2.6"
   },
   "devDependencies": {

src/App.vue

@@ -1,12 +1,17 @@
 <template>
+  <el-config-provider :locale="elLocale">
   <div id="app">
     <VFormDesigner />
   </div>
+  </el-config-provider>
 </template>
 
 <script>
 import VFormDesigner from './components/form-designer/index.vue'
 
+import zhCNLang from 'element-plus/lib/locale/lang/zh-cn'
+import enUSLang from 'element-plus/lib/locale/lang/en'
+
 export default {
   name: 'App',
   components: {
@@ -16,9 +21,21 @@ export default {
     return {
       formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
       formData: {},
-      optionData: {}
+      optionData: {},
+
+      elLocaleMap: {
+        'zh-CN': zhCNLang,
+        'en-US': enUSLang,
+      },
     }
   },
+  computed: {
+    elLocale() {
+      let curLocale = localStorage.getItem('v_form_locale') || 'zh-CN'
+      return this.elLocaleMap[curLocale]
+    },
+
+  },
   methods: {
     submitForm() {
       this.$refs.vFormRef.getFormData().then(formData => {

src/components/form-designer/form-widget/container-widget/table-cell-widget.vue

@@ -287,14 +287,7 @@
       border: 1px dashed #336699;
       margin: 3px;
 
-      //min-height: 36px;
       height: 100%;
-
-      /*position: absolute;*/
-      /*top: 0;*/
-      /*right: 0;*/
-      /*bottom: 0;*/
-      /*left: 0;*/
     }
 
     .table-cell-action{
@@ -307,6 +300,9 @@
       background: $--color-primary;
       z-index: 999;
 
+      display: flex;
+      align-items: center;
+
       i {
         font-size: 14px;
         color: #fff;

src/components/form-designer/index.vue

@@ -72,7 +72,7 @@
   import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
   import i18n, { changeLocale } from "@/utils/i18n"
   import axios from 'axios'
-  import SvgIcon from "@/components/svg-icon/index";
+  import SvgIcon from "@/components/svg-icon/index"
 
   export default {
     name: "VFormDesigner",
@@ -123,12 +123,13 @@
       return {
         vFormVersion: VARIANT_FORM_VERSION,
         curLangName: '',
+        curLocale: '',
 
         vsCodeFlag: false,
         caseName: '',
 
-        docUrl: 'https://www.vform666.com/document.html',
+        docUrl: 'https://www.vform666.com/document3.html',
-        gitUrl: 'https://github.com/vform666/variant-form',
+        gitUrl: 'https://github.com/vform666/variant-form3-vite',
         chatUrl: 'https://www.vform666.com/chat-group.html',
         subScribeUrl: 'https://www.vform666.com/subscribe.html',
 
@@ -225,14 +226,14 @@
       },
 
       initLocale() {
-        let curLocale = localStorage.getItem('v_form_locale')
+        this.curLocale = localStorage.getItem('v_form_locale')
         if (!!this.vsCodeFlag) {
-          curLocale = curLocale || 'en-US'
+          this.curLocale = this.curLocale || 'en-US'
         } else {
-          curLocale = curLocale || 'zh-CN'
+          this.curLocale = this.curLocale || 'zh-CN'
         }
-        this.curLangName = this.i18nt('application.' + curLocale)
+        this.curLangName = this.i18nt('application.' + this.curLocale)
-        this.changeLanguage(curLocale)
+        this.changeLanguage(this.curLocale)
       },
 
       loadFieldListFromServer() {

src/utils/i18n.js

@@ -1,4 +1,4 @@
-import { createI18n } from 'vue-i18n'		//引入vue-i18n组件
+import { createI18n } from './smart-vue-i18n/index'
 
 import enLocaleElement from "element-plus/lib/locale/lang/en";
 import zhLocaleElement from "element-plus/lib/locale/lang/zh-cn";
@@ -33,36 +33,33 @@ const langResources = {
   }
 }
 
-//locale.i18n((key, value) => i18n.t(key, value))
-
-export const changeLocale = function(langName) {
-  //i18n.locale = langName  //此行切换语言无效！！
-  i18n.global.locale = langName
-  localStorage.setItem('v_form_locale', langName)
-}
-
-export const translate = function(key) {
-  return i18n.global.t(key, i18n.locale)
-}
-
 const i18n = createI18n({
   locale: localStorage.getItem('v_form_locale') || 'zh-CN',
   messages: langResources
 })
 
+export const changeLocale = function(langName) {
+  i18n.setLang(langName)
+  localStorage.setItem('v_form_locale', langName)
+}
+
+export const translate = function(key) {
+  return i18n.$st(key)
+}
+
 export const installI18n = (app) => {
-  app.use(i18n)
+  //
 }
 
 export default {
   methods: {
     i18nt(key) {
-      return i18n.global.t(key, i18n.locale)
+      return i18n.$st(key)
     },
 
     /* 如果key1不存在，则查找key2 */
     i18n2t(key1, key2) {
-      return i18n.global.te(key1, i18n.locale) ? i18n.global.t(key1, i18n.locale) : i18n.global.t(key2, i18n.locale)
+      return i18n.$st2(key1, key2)
     },
 
   }

src/utils/smart-vue-i18n/index.js

@@ -0,0 +1,30 @@
+import { reactive } from 'vue'
+import { get } from './utils'
+
+let locale = reactive({
+    lang: localStorage.getItem('v_form_locale') || 'zh-CN',
+})
+
+export function createI18n(options) {
+    return {
+        messages: options.messages,
+
+        $st(path, ...args) {
+            const message = get(this.messages[locale.lang], path)
+            return typeof message === 'function'
+                ? message(...args)
+                : (message !== null ? message : path)
+        },
+
+        $st2(path, path2) {
+            let messages = this.messages[locale.lang]
+            const message = get(messages, path)
+            return (message !== null) ? message : get(messages, path2)
+        },
+
+        setLang(lang) {
+            locale.lang = lang
+        }
+    }
+}
+

src/utils/smart-vue-i18n/utils.js

@@ -0,0 +1,47 @@
+// 值存在
+export function isDef(value) {
+  return value !== undefined && value !== null
+}
+
+// 对象映射 'a.b' {a: {b: 'val'}}
+export function get(object, path) {
+  const keys = path.split('.')
+  let result = object
+
+  keys.forEach(key => {
+      result = isDef(result) && isDef(result[key]) ? result[key] : null
+  })
+
+  return result
+}
+
+// 是否是对象
+export function isObj(x) {
+  const type = typeof x
+  return x !== null && (type === 'object' || type === 'function')
+}
+
+// 深拷贝
+const { hasOwnProperty } = Object.prototype
+
+function assignKey(to, from, key) {
+  const val = from[key]
+
+  if (!isDef(val)) {
+      return
+  }
+
+  if (!hasOwnProperty.call(to, key) || !isObj(val)) {
+      to[key] = val
+  } else {
+      to[key] = deepAssign(Object(to[key]), from[key])
+  }
+}
+
+export function deepAssign(to, from) {
+  Object.keys(from).forEach(key => {
+      assignKey(to, from, key)
+  })
+
+  return to
+}