feat: add i18n

.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: [
     // {

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)

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
       }
     ]
   }

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`
 }

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>

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>

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"
     >

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

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"
   />

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

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>

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)

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

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

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}

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}

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