gc_i18n 1.0.0

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gc_i18n",
+  "version": "1.0.0",
+  "gc_i18n": {
+    "appCode": "TEST"
+  },
+  "type": "module",
+  "main": "./lib/gc_i18n.umd.cjs",
+  "module": "./lib/gc_i18n.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "keyboardjs": "^2.7.0",
+    "lodash-es": "^4.17.21",
+    "store2": "^2.14.4",
+    "view-ui-plus": "^1.3.19",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.1",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "less": "^4.2.2",
+    "vite": "^6.1.0",
+    "vite-plugin-libcss": "^1.1.1"
+  }
+}

package/packages/components/LangChange.vue

@@ -0,0 +1,39 @@
+<script>
+import { getLanguages } from "../libs/service";
+export default {
+  name: "LangChange",
+  data() {
+    return {
+      languages: [],
+      language: ""
+    };
+  },
+  props: {
+    more: {
+      type: Boolean,
+      default: false
+    }
+  },
+  async mounted() {
+    this.language = navigator.language || "zh-CN";
+    console.log("language", this.language);
+    const res = await getLanguages();
+    if (res && res.result === 0) {
+      this.languages = res.retVal;
+    }
+  }
+};
+</script>
+<template>
+  <div>
+    <div v-if="more">
+      <span>切换语种</span>
+    </div>
+    <Select
+      v-model="language"
+      v-else
+    >
+      <Option value="zh-CN">中文</Option>
+    </Select>
+  </div>
+</template>

package/packages/components/config.vue

@@ -0,0 +1,236 @@
+<script lang="jsx">
+import _ from "lodash-es";
+import { getAllTranslate, getLanguages, saveTranslate } from "../libs/service";
+import { Message, Modal } from "view-ui-plus";
+
+export default {
+  data() {
+    return {
+      isModalVisible: false,
+      searchText: "",
+      languages: [],
+      data: []
+    };
+  },
+  computed: {
+    firstResult() {
+      return this.data.firstResult / this.data.pageSize + 1;
+    },
+    columns() {
+      let arr = [
+        {
+          title: "关键字",
+          fixed: "left",
+          width: 200,
+          key: "dictKey"
+        }
+      ];
+      _.map(this.languages, (lang) => {
+        const key = lang.code;
+        return arr.push({
+          title: lang.name,
+          key,
+          width: 200,
+          render: (h, { row, index }) => {
+            const data = row[key];
+            return (
+              <Input
+                modelValue={data}
+                onOnChange={(e) => {
+                  this.data.datas[index][key] = e.target.value;
+                }}
+              ></Input>
+            );
+          }
+        });
+      });
+      return arr;
+    }
+  },
+  props: { appCode: String, name: String, setLanguage: Function },
+  methods: {
+    closeModal() {
+      this.searchText = "";
+      this.isModalVisible = false;
+    },
+    openModal() {
+      if (!this.isModalVisible) {
+        this.isModalVisible = true; // 打开弹窗
+        this.init();
+      }
+    },
+    findShallowStringDiff(obj1, obj2) {
+      const { appCode, dictKey, page, unitCode } = obj1;
+      const diff = [];
+      _.forIn(obj1, (value, key) => {
+        if (!_.isEqual(value, obj2[key])) {
+          diff.push({
+            appCode,
+            key: dictKey,
+            page,
+            unitCode,
+            lang: key,
+            value
+          });
+        }
+      });
+      return diff;
+    },
+
+    async saveData({ msg = "" }) {
+      const data = _.differenceWith(
+        this.data.datas,
+        this.initialData.datas,
+        _.isEqual
+      );
+      let arr = [];
+      for (let index = 0; index < data.length; index++) {
+        const value = data[index];
+        const original = _.find(this.initialData.datas, {
+          dictKey: value.dictKey
+        });
+        const diff = this.findShallowStringDiff(value, original);
+        arr = _.concat(arr, diff);
+      }
+      const res = await saveTranslate({
+        appCode: this.appCode,
+        language: this.language,
+        data: arr
+      });
+      if (res && res.result === 0) {
+        Message.success(msg ? msg : res.msg);
+        // 更新到本地缓存
+        this.setLanguage();
+        this.initialData.datas = _.cloneDeep(this.data.datas);
+      }
+    },
+    async saveNoEqual() {
+      if (!_.isEqual(this.initialData, this.data)) {
+        this.saveData({ msg: "已为您自动保存" });
+      }
+    },
+    changePage(value) {
+      this.saveNoEqual();
+      this.search({ firstResult: (value - 1) * this.data.pageSize });
+    },
+    async search(data) {
+      const options = {
+        appCode: this.appCode,
+        searchBlur: this.searchText,
+        page: this.name ? _.toUpper(this.name) : "HOME",
+        commaSeparatedLangs: _.map(this.languages, "code").toString(),
+        firstResult: 0,
+        pageSize: 10,
+        ...data
+      };
+      const res = await getAllTranslate(options);
+      if (res) {
+        this.initialData = _.cloneDeep(res.retVal);
+        this.data = res.retVal;
+      }
+    },
+    async init() {
+      const res = await getLanguages();
+      if (res && res.result == 0) {
+        this.languages = res.retVal;
+        this.search();
+      } else {
+        Message.error("获取语言失败,出错了");
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Modal
+    v-model="isModalVisible"
+    :mask-closable="false"
+    :width="70"
+    title="多语言管理中心"
+    footer-hide
+  >
+    <Tabs
+      type="card"
+      class="gc_i18n_tabs"
+    >
+      <TabPane label="当前页面">
+        <Table
+          border
+          :height="550"
+          :columns="columns"
+          :data="data.datas"
+        ></Table
+      ></TabPane>
+      <!-- <TabPane label="当前应用">
+        <Table
+          border
+          :height="550"
+          :columns="columns"
+          :data="data.currentPageItems"
+        ></Table
+      ></TabPane> -->
+      <template #extra>
+        <div class="extra">
+          <Input
+            prefix="ios-search"
+            placeholder="请输入搜索内容"
+            v-model="searchText"
+            clearable
+            @on-enter="search"
+            @on-clear="search"
+          />
+        </div>
+      </template>
+    </Tabs>
+
+    <div class="gc_i18n_page">
+      <div style="display: flex">
+        <Page
+          v-model="firstResult"
+          :total="data.totalRows"
+          :page-size="10"
+          simple
+          show-total
+          @on-change="changePage"
+        />
+        <div>共 {{ data.totalRows }} 项数据</div>
+      </div>
+      <div>
+        <Button
+          style="margin-right: 10px"
+          @click="closeModal"
+          >关闭</Button
+        >
+        <Button
+          type="primary"
+          @click="saveData"
+          >保存</Button
+        >
+      </div>
+    </div>
+  </Modal>
+</template>
+<style lang="less">
+.gc_i18n_tabs {
+  padding-top: 5px;
+  .ivu-tabs-bar {
+    margin-bottom: 1px !important;
+  }
+  .ivu-tabs-content {
+    position: relative;
+    top: -1px;
+  }
+  .extra {
+    position: relative;
+    top: -3px;
+  }
+}
+
+.gc_i18n_page {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+</style>

package/packages/index.js

@@ -0,0 +1,100 @@
+import keyboardJS from "keyboardjs";
+import iview from "view-ui-plus";
+import { createApp, nextTick } from "vue";
+import { createI18n } from "vue-i18n";
+import configVue from "./components/config.vue";
+import LangChange from "./components/LangChange.vue";
+//
+import { getTranslate } from "./libs/service";
+import { convertArrayToObject } from "./libs/utils";
+import "./libs/http";
+import _ from "lodash-es";
+export default class I18n {
+  constructor(options = {}) {
+    const { router } = options;
+    this.appCode = options.appCode;
+    this.router = router;
+    this.locale = navigator.language || "zh-CN";
+    this.modalLoad = false;
+    this.messages = options.messages || {};
+    this.i18n = createI18n({
+      locale: "zh-CN",
+      allowComposition: true,
+      globalInjection: true,
+      legacy: false,
+      silentTranslationWarn: true, // 屏蔽翻译未找到的警告
+      silentFallbackWarn: true, // 屏蔽回退语言的警告
+      missingWarn: false, // 屏蔽缺失翻译的警告
+      fallbackWarn: false, // 屏蔽回退过程中的警告
+      ...options
+    });
+
+    // 保存原始的 t 方法
+    const originalT = this.i18n.global.t;
+    // 自定义 t 方法
+    this.i18n.global.t = (key) => {
+      const routeName = router?.currentRoute?.value?.name;
+      // 使用原始的 t 方法进行翻译
+      const originalTranslation = originalT(key);
+      // 如果没有找到翻译值，尝试使用路由名.key
+      if (originalTranslation === key && routeName) {
+        const prefixedKey = `${routeName}.${key}`;
+        // 同样使用原始的 t 方法进行翻译
+        return originalT(prefixedKey);
+      }
+      return originalTranslation;
+    };
+    this.i18n.global.changeLocal = (newLocale) => {
+      this.setLanguage(newLocale || this.locale);
+    };
+
+    router.afterEach((to, from) => {
+      const { language } = to.query;
+      this.setLanguage(language);
+
+      nextTick(() => {
+        if (!this.configInstance) {
+          this.createModal(to.name);
+        } else {
+          this.configInstance.closeModal();
+        }
+      });
+    });
+  }
+  async setLanguage(language = "zh-CN") {
+    this.locale = language;
+    const res = await getTranslate({
+      appCode: this.appCode,
+      language
+    });
+
+    if (res) {
+      const messages = convertArrayToObject(res);
+      this.i18n.global.setLocaleMessage(
+        language,
+        _.assign({}, _.get(this.messages, language), messages)
+      );
+    }
+    this.i18n.global.locale.value = language;
+  }
+  createModal(name) {
+    this.modalLoad = true;
+    // 创建 config 组件的实例
+    this.configInstance = createApp(configVue, {
+      appCode: this.appCode,
+      setLanguage: this.setLanguage.bind(this),
+      name
+    })
+      .use(iview)
+      .mount(document.createElement("div")); // 挂载到一个临时的 div
+    keyboardJS.bind("shift > t", (e) => {
+      // 打开弹窗
+      this.configInstance.openModal(); // 调用 openModal 方法
+    });
+  }
+  install(app, { router }) {
+    app.use(this.i18n);
+    app.use(iview);
+    app.component("LangChange", LangChange);
+  }
+}

package/packages/libs/http.js

@@ -0,0 +1,69 @@
+import * as Vue from "vue";
+import axios from "axios";
+import { Message } from "view-ui-plus";
+import * as _ from "lodash-es";
+// Vue.prototype.$http = axios;
+
+Message.config({
+  duration: 3
+});
+axios.defaults.timeout = 60000;
+
+axios.interceptors.request.use(
+  (config) => {
+    //这边可根据自己的需求设置headers，我司采用basic基本认证
+    const authToken = localStorage.getItem("token");
+    if (!_.isEmpty(authToken)) {
+      config.headers["Authorization"] = authToken;
+    }
+    config.headers["Content-Type"] = "application/json";
+    return config;
+  },
+  (err) => {
+    Message.error({
+      content: "请求超时!"
+    });
+    return Promise.resolve(err);
+  }
+);
+axios.interceptors.response.use(
+  (res) => {
+    const { nomsg } = res.config.headers;
+    if (res.status && res.status != 200) {
+      if (!nomsg) {
+        Message.error({
+          content: res.data.message || "未知错误"
+        });
+      }
+    } else {
+      res.data.success = true;
+    }
+    return res.data;
+  },
+  (err) => {
+    if (err.response) {
+      if (err.response.status == 504 || err.response.status == 404) {
+        Message.error({ content: "服务器被吃了⊙﹏⊙∥" });
+      } else if (err.response.status == 403) {
+        Message.error({ content: "权限不足,请联系管理员!" });
+      } else
+        Message.error({
+          content: `${err.response.status}：${
+            err.response.statusText || err.response.error
+          }`
+        });
+    } else if (
+      err.code === "ECONNABORTED" &&
+      err.message.indexOf("timeout") !== -1
+    ) {
+      Message.error({
+        content: "请求超时!"
+      });
+    } else {
+      Message.error({ content: err.message || "未知错误!" });
+    }
+    return Promise.resolve(err);
+  }
+);
+
+export default { axios };

package/packages/libs/service.js

@@ -0,0 +1,99 @@
+import axios from "axios";
+import store2 from "store2";
+import _ from "lodash-es";
+import { mergeArraysByKey } from "./utils";
+export const service = "https://test.ihotel.cn";
+const i18nStore = store2.namespace("i18n");
+const Authorization =
+  "eyJhbGciOiJIUzUxMiJ9.eyJkZXZpY2VUeXBlIjoiQ09NUFVURVIiLCJtYWluQXBwQ29kZSI6IlNTTyIsIm9yZ0NvZGUiOiJHQ0JaRyIsInVjU2VydmVyVXJsIjoiaHR0cHM6Ly90ZXN0Lmlob3RlbC5jbi91Yy13ZWIvIiwiYXBwQ29kZSI6IlNTTyIsInVzZXJUeXBlIjoiTk9STUFMIiwibG9naW5BdCI6MTczODczNTczOTAwMCwicHJpbmNpcGFsVXNlckNvZGUiOiJHQ0JaR19BRE1JTiIsImV4cCI6MzI1MDM2NTEyMDAsInVzZXJDb2RlIjoiR0NCWkdfQURNSU4iLCJzc28iOiJTU09fU0VSVkVSIn0.KQt1YbUdJ7DfqrfXEVYT0Ux-7Zlo2GQBiIoq0rxK0cv1LHqOOMtBkv8kmChM6VavtdnlyXM2GkW6YMvIIHvu0Q";
+export const getLanguages = async () => {
+  return axios.get(service + "/i18n-web/sysoption/getsupportedlangs", {
+    headers: {
+      Authorization
+    }
+  });
+};
+export const fetchTranslate = async ({
+  appCode,
+  language = "zh-CN",
+  page,
+  lastPullDate
+}) => {
+  return new Promise(async (resolve, reject) => {
+    const serverURI = service + "/i18n-web/kv_translate/kv_translates";
+    const url = lastPullDate
+      ? serverURI + "?lastPullDate=" + lastPullDate
+      : serverURI;
+    const res = await axios({
+      url,
+      method: "GET",
+      headers: {
+        appCode,
+        page,
+        language
+      }
+    });
+    if (res && res.result == 0) {
+      resolve(res.retVal);
+    } else {
+      reject(res);
+    }
+  });
+};
+
+export const getAllTranslate = async (data) => {
+  console.log("data", data);
+
+  return axios({
+    url: service + "/i18n-web/kv_translate/kv_translates",
+    method: "POST",
+    data,
+    headers: { token: Authorization }
+  });
+};
+export const saveTranslate = async (data) => {
+  return axios({
+    url: service + "/i18n-web/kv_translate/batch",
+    method: "POST",
+    data,
+    headers: { token: Authorization }
+  });
+};
+export const getTranslate = async ({ appCode, language = "zh-CN" }) => {
+  return new Promise(async (resolve, reject) => {
+    // const appCodeStore = i18nStore.get(appCode);
+    const languageStore = i18nStore.namespace(appCode);
+    const options = {
+      appCode,
+      language
+    };
+    const lastData = languageStore.get(language);
+
+    if (!lastData || !lastData.lastPullDate) {
+      // 如果是第一次获取
+      const res = await fetchTranslate(options);
+      if (res) {
+        languageStore.set(language, res);
+        resolve(res.translatesDTOs);
+      }
+    } else {
+      const { lastPullDate } = lastData;
+      const res = await fetchTranslate({
+        ...options,
+        lastPullDate
+      });
+      if (res) {
+        // 合并增量数据
+        const langData = _.get(lastData, "translatesDTOs");
+        if (!_.isEmpty(res.translatesDTOs)) {
+          const data = mergeArraysByKey(langData, res.translatesDTOs);
+          const saveData = { lastPullDate, translatesDTOs: data };
+          i18nStore[appCode].set(language, saveData, ":"); // Only update the specific key
+          resolve(data);
+        } else {
+          resolve(langData);
+        }
+      }
+    }
+  });
+};

package/packages/libs/utils.js

@@ -0,0 +1,20 @@
+import _ from "lodash-es";
+export const convertArrayToObject = (arr) => {
+  const result = {};
+  for (const item of arr) {
+    result[item.key] = item.value;
+  }
+  return result;
+};
+
+export const mergeArraysByKey = (arr1, arr2) => {
+  arr2.forEach((obj2) => {
+    const foundObj = _.find(arr1, { key: obj2.key });
+    if (foundObj) {
+      _.merge(foundObj, obj2);
+    } else {
+      arr1.push(obj2);
+    }
+  });
+  return arr1;
+};

package/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <RouterView></RouterView>
+</template>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/main.js

@@ -0,0 +1,21 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import gc_i18n from "../packages/index.js";
+import router from "./router/index";
+import "view-ui-plus/dist/styles/viewuiplus.css";
+
+import zh from "view-ui-plus/dist/locale/zh-CN";
+import en from "view-ui-plus/dist/locale/en-US";
+
+const i18n = new gc_i18n({
+  appCode: "TEST",
+  router,
+  messages: {
+    "zh-CN": zh,
+    "en-US": en
+  }
+});
+
+const app = createApp(App).use(router).use(i18n, { router });
+
+app.mount("#app");

package/src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+
+const routes = [
+  {
+    path: "/BOOK",
+    name: "BOOK",
+    component: () => import("../view/Home.vue")
+  }
+];
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+});
+router.beforeEach((to, from, next) => {
+  next();
+});
+export default router;

package/src/view/Home.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { useI18n } from "vue-i18n";
+const { locale, changeLocal } = useI18n();
+
+defineProps({
+  msg: String
+});
+const langs = [
+  {
+    label: "中文",
+    code: "zh-CN"
+  },
+  {
+    label: "English",
+    code: "en-US"
+  },
+  {
+    label: "繁体",
+    code: "zh-TW"
+  }
+];
+const change = (lang) => {
+  changeLocal(lang);
+};
+</script>
+
+<template>
+  <div>
+    <Button
+      v-for="item in langs"
+      :type="item.code === locale ? 'primary' : 'default'"
+      @click="change(item.code)"
+      >{{ item.label }}</Button
+    >
+    <div>
+      <div>带路由前缀:</div>
+      <div>{{ $t("BOOK.ZHENGJIANLEIXING", { comment: "姓名" }) }}</div>
+    </div>
+    <div>
+      <div>不带前缀:</div>
+      <div>{{ $t("ZHENGJIANLEIXING") }}</div>
+    </div>
+    <Page
+      :total="40"
+      size="small"
+      show-total
+    />
+
+    <!-- <LangChange></LangChange> -->
+  </div>
+</template>