yh-i18n 1.0.2

package/list.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="yh-i18n-list-container">
+    <div class="yh-i18n-list-actions">
+      <el-button type="primary" @click="addOne">
+        <i class="iconfont icon-add"></i>
+        {{ ct("新增") }}
+      </el-button>
+      <div class="yh-i18n-list-conditions">
+        <el-form inline>
+          <el-form-item :label="ct('翻译键名')">
+            <el-input
+              v-model="listForm.key"
+              :placeholder="ct('键入以筛选键名')"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-button type="primary" @click="getDataList">{{
+        ct("搜索")
+      }}</el-button>
+      <el-button @click="resetList">{{ ct("重置") }}</el-button>
+    </div>
+    <el-table :data="dataList" row-key="adTranslateId">
+      <el-table-column
+        type="index"
+        label="#"
+        width="60"
+        align="center"
+        fixed="left"
+      ></el-table-column>
+      <el-table-column
+        :label="ct('操作')"
+        width="140"
+        align="center"
+        fixed="left"
+      >
+        <template #default="{ row, $index }">
+          <el-button link type="primary" @click="editOne(row, $index)">{{
+            ct("编辑")
+          }}</el-button>
+          <el-button link type="danger" @click="delOne(row.adTranslateId)">{{
+            ct("删除")
+          }}</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="key" :label="ct('翻译键名')"></el-table-column>
+      <el-table-column
+        v-for="column in listColumns"
+        :prop="column.field"
+        :label="ct(column.title)"
+        :minWidth="column.minWidth"
+        show-overflow-tooltip
+      ></el-table-column>
+    </el-table>
+    <el-pagination
+      small
+      background
+      :page-size="listForm.pageSize"
+      :total="listForm.total"
+      v-model:current-page="listForm.pageNum"
+      layout="prev,pager,next,total"
+    ></el-pagination>
+  </div>
+  <el-dialog
+    class="form-drawer"
+    v-model="formShow"
+    @close="cancelForm"
+    draggable
+    :title="formData.adTranslateId ? ct('编辑翻译') : ct('新增翻译')"
+  >
+    <vxe-form
+      title-align="right"
+      title-width="100px"
+      ref="vxeFormRef"
+      title-colon
+      :data="formData"
+      :items="formItems"
+      :rules="fromRules"
+    ></vxe-form>
+    <template #footer>
+      <div class="yh-i18n-form-actions">
+        <el-button
+          @click="prevOne"
+          text
+          :disabled="!isNaN(formDataIndex) && formDataIndex <= 0"
+          >{{ ct("上一个") }}（←）</el-button
+        >
+        <el-button type="primary" plain @click="cancelForm">
+          {{ ct("取消") }}
+        </el-button>
+        <el-button type="primary" @click="saveOne">
+          {{ ct("保存") }}
+        </el-button>
+        <el-button
+          @click="nextOne"
+          text
+          :disabled="
+            !isNaN(formDataIndex) && formDataIndex >= dataList.leng - 1
+          "
+          >{{ ct("下一个") }}（→）</el-button
+        >
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useI18nStore, ct } from "yh-i18n";
+import http from "@/libs/api.request";
+import { VxeFormInstance, VxeFormPropTypes } from "vxe-table";
+import { nextTick } from "vue";
+
+const i18nStore = useI18nStore();
+const vxeFormRef = ref<VxeFormInstance>();
+
+const insertUrl = "/translate/insert";
+const updateUrl = "/translate/edit";
+const deleteUrl = "/translate/deleteTranslate";
+
+const listForm = reactive({
+  key: "",
+  pageNum: 1,
+  pageSize: 100,
+  total: 0,
+});
+const listColumns = reactive<any>([]);
+const dataList = ref<any>([]);
+function getDataList() {
+  let { key, pageNum, pageSize } = listForm;
+  http
+    .request({
+      url: "/translate/select",
+      method: "post",
+      data: {
+        key,
+        pageNum,
+        pageSize,
+      },
+    })
+    .then((res) => {
+      let localKeys = i18nStore.localList.map((item) => item.value);
+      let { records, total } = res.data.data;
+      records = records.map((item) => {
+        try {
+          let content = JSON.parse(item.content);
+          let keys = Object.keys(content);
+
+          keys.forEach((key) => {
+            let val = content[key];
+            item[key] = val;
+          });
+          localKeys.forEach((k) => {
+            if (!keys.includes(k)) {
+              item[k] = "";
+            }
+          });
+        } catch (error) {}
+        return item;
+      });
+      dataList.value = records;
+      listForm.total = total;
+    });
+}
+function resetList() {
+  listForm.key = "";
+  listForm.pageNum = 1;
+  listForm.total = 0;
+  getDataList();
+}
+
+const langList = Object.keys(i18nStore.langList);
+const formDataIndex = ref();
+const formData = reactive<any>({});
+const formShow = ref(false);
+let inputs: HTMLInputElement[] = [];
+function cancelForm() {
+  vxeFormRef?.value?.reset();
+  vxeFormRef?.value?.clearValidate();
+  formDataIndex.value = void 0;
+  formData.id = null;
+  formShow.value = false;
+}
+function addOne() {
+  formShow.value = true;
+}
+function prevOne() {
+  if (formDataIndex.value > 0) {
+    let index = formDataIndex.value - 1;
+    let item = dataList.value[index];
+    editOne(item, index);
+  }
+}
+function editOne(item, index) {
+  formDataIndex.value = index;
+  for (const key in item) {
+    if (Object.prototype.hasOwnProperty.call(item, key)) {
+      const val = item[key];
+      formData[key] = val;
+    }
+  }
+  formShow.value = true;
+  setTimeout(() => {
+    (
+      document.querySelector("#i18nFormItem1 input") as HTMLInputElement
+    )?.focus();
+    inputs = Array.from(document.querySelectorAll(".i18n-form-item input"));
+  }, 500);
+}
+function nextOne() {
+  if (formDataIndex.value < dataList.value.length - 1) {
+    let index = formDataIndex.value + 1;
+    let item = dataList.value[index];
+    editOne(item, index);
+  }
+}
+function saveOne() {
+  let url = updateUrl;
+  vxeFormRef?.value?.validate().then((errMap) => {
+    if (!errMap) {
+      let data = {
+        id: formData.adTranslateId,
+        key: formData.key,
+        content: {},
+      };
+      for (const key in formData) {
+        if (key !== "key" && langList.includes(key)) {
+          const val = formData[key];
+          data.content[key] = val;
+        }
+      }
+      data.content = JSON.stringify(data.content);
+      http
+        .request({
+          url,
+          method: "POST",
+          data,
+        })
+        .then((res) => {
+          if (res?.data?.status === 200) {
+            ElMessage.success(res.data.msg);
+            dataList.value[formDataIndex.value] = {
+              ...formData,
+            };
+            nextOne();
+          } else {
+            ElMessage.error(res.data.msg);
+          }
+        });
+    }
+  });
+}
+function delOne(id) {
+  ElMessageBox.confirm("确认删除这条翻译记录吗？").then(() => {
+    http
+      .request({
+        url: deleteUrl,
+        method: "POST",
+        data: {
+          id,
+        },
+      })
+      .then((res) => {
+        if (res?.data?.status === 200) {
+          ElMessage.success(res.data.msg);
+          resetList();
+        } else {
+          ElMessage.error(res.data.msg);
+        }
+      });
+  });
+}
+
+const formItems = reactive<VxeFormPropTypes.Items>([
+  {
+    field: "key",
+    span: 24,
+    title: "翻译键值",
+    itemRender: {
+      name: "$input",
+      props: { class: "i18n-form-item", id: `i18nFormItem${1}` },
+    },
+  },
+]);
+const fromRules = reactive<VxeFormPropTypes.Rules>({
+  key: [{ required: true, type: "string", message: "请输入翻译键值" }],
+});
+
+let needInit = true;
+watch(
+  () => i18nStore.localList,
+  (val) => {
+    if (val && val.length && needInit) {
+      needInit = false;
+      val.forEach((item, index) => {
+        listColumns.push({
+          field: item.value,
+          title: item.label,
+          minWidth: "200",
+        });
+        formItems.push({
+          field: item.value,
+          span: 24,
+          title: item.label,
+          itemRender: {
+            name: "$input",
+            props: { class: "i18n-form-item", id: `i18nFormItem${index + 2}` },
+          },
+        });
+        fromRules[item.value] = [
+          { required: true, type: "string", message: `请输入${item.label}` },
+        ];
+      });
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+onMounted(() => {
+  getDataList();
+  window.addEventListener("keydown", (e) => {
+    let { key, ctrlKey, altKey } = e;
+    if (key === "s" && ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      saveOne();
+    }
+    if (key === "ArrowRight" && (ctrlKey || altKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      nextOne();
+    }
+    if (key === "ArrowLeft" && (ctrlKey || altKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      prevOne();
+    }
+    if (key === "Tab") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (
+        document.activeElement ||
+        // @ts-ignore
+        inputs.includes(document.activeElement)
+      ) {
+        // @ts-ignore
+        let index = inputs.indexOf(document.activeElement);
+
+        if (index === inputs.length) {
+          index = 0;
+        } else {
+          index++;
+        }
+        inputs[index].focus();
+      } else {
+        setTimeout(() => {
+          if (
+            !document.activeElement ||
+            !inputs.includes(document.activeElement as HTMLInputElement)
+          ) {
+            (
+              document.querySelector("#i18nFormItem1 input") as HTMLInputElement
+            )?.focus();
+          }
+        }, 100);
+      }
+    }
+  });
+});
+</script>
+<style lang="scss">
+.yh-i18n-list-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .yh-i18n-list-actions {
+    padding: 16px;
+    box-sizing: border-box;
+    display: flex;
+    .yh-i18n-list-conditions {
+      padding: 0 8px;
+      flex: 1;
+    }
+  }
+  .el-table {
+    flex: 1;
+  }
+  .el-pagination {
+    padding: 16px 16px 0 16px;
+  }
+}
+.yh-i18n-form-actions {
+  display: flex;
+  .el-button {
+    flex: 1;
+  }
+}
+</style>

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "yh-i18n",
+  "version": "1.0.2",
+  "description": "对于国际化的封装",
+  "main": "index.js",
+  "scripts": {
+    "pub:npm": "npm publish --registry https://registry.npmjs.org/ --no-git-checks",
+    "pub:aliyun": "npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/ --no-git-checks"
+  },
+  "dependencies": {
+    "vue-i18n": "9.8.0"
+  },
+  "peerDependencies": {
+    "vue": "3.2.47",
+    "pinia": "2.0.35",
+    "vxe-table": "4.3.10",
+    "element-plus": "2.4.4"
+  },
+  "author": "Liubin"
+}

package/readme.md

@@ -0,0 +1,73 @@
+# 国际化多语言切换
+
+**此包依赖最新的 后端基础Jar包**
+
+**此包依赖最新，前端包**
+- vue 3.2.47
+- pinia 2.0.35
+- vxe-table 4.3.10
+- element-plus 2.4.4
+
+## 基础配置
+
+- **config 增加语言配置属性**，这里支持五中语言的配置：简体中文（zh_CN）,英语（en_US）,泰语（th）,越南语（vi）,土耳其语（tr），填入其中任意两种或者多种就可以了   
+`src/config/index`
+```js
+export default {
+  ...
++  i18nList: ["zh_CN", "en_US", "th","vi","tr"],
+  ...
+};
+```
+
+- **main 文件中添加国际化初始内容**，因为要同步加载翻译数据所以要先将main文件里面的逻辑放到 一个 async 函数中  
+`src/main`
+```js
+...
++import { i18n, initI18n, useI18nStore, ct, addI18nPage } from "yh-i18n";
++import Config from "@/config";
+...
+async functino main(){
++  addI18nPage(router);
++  await initI18n(Config.i18nList);
+  const app = createApp(App);
++  app.use(i18n);
+  app.use(createPinia());
+  app.use(router);
+  app.use(vant);
+  app.use(plugin);
++  const i18nStore = useI18nStore();
++  i18nStore.setLocalList(Config.i18nList);
++  VXETable.setup({
++    i18n: (key, args) => ct(key, args),
++    translate: (key, args) => ct(key, args),
++  });
+  router.isReady().then(() => {
+    app.mount("#app");
+  });
+}
+main()
+```
+
+## 业务使用
+
+业务中入股有字段是编码需要翻译的，举例如下:   
+原代码
+```html
+<template>
+  <div>中国</div>
+</template>
+```
+组合式接口组件的代码，选项式组件请自行研究或咨询前端
+```html
+<template>
+  <div>{{ ct("中国") }}</div>
+</template>
+<script setup>
+import { ct } from "yh-i18n-m";
+</script>
+```
+
+## 翻译管理
+在开发环境中，可以自动收集要翻译的字段，
+并且可以通过页面（`http://{host}:{port}/#/translate` 这个路径）对翻译内容进行管理