gc_i18n 1.1.0 → 1.1.2

package/packages/components/config.vue

@@ -2,11 +2,13 @@
 import _ from "lodash-es";
 import { getAllTranslate, getLanguages, saveTranslate } from "../libs/service";
 import { Message, Modal } from "view-ui-plus";
+import { convertArrayToObject } from "../libs/utils";
 
 export default {
   data() {
     return {
       isModalVisible: false,
+      loading: false,
       searchText: "",
       name: "",
       type: "pageData",
@@ -52,7 +54,9 @@ export default {
                       </Tooltip>
                     </span>
                   ) : (
-                    <span style={{ color: "green" }}>正常</span>
+                    <span style={{ color: "green" }}>
+                      {row.common ? "全局" : "当前页"}
+                    </span>
                   );
                 }
               }
@@ -86,49 +90,18 @@ export default {
                 modelValue={data}
                 onOnChange={(e) => {
                   const value = e.target.value;
-                  if (this.type === "pageData") {
-                    this.pageData[index][key] = value;
-                  } else {
-                    this.data[index] = {
-                      ...this.data[index],
-                      [key]: value
-                    };
-                  }
-                  const { dictKey, page } = row;
-                  const findIndex = _.findIndex(this.mySaveData, {
-                    key: dictKey,
-                    lang: lang.code
-                  });
-                  console.log("page", page);
-                  if (dictKey && findIndex === -1) {
-                    this.mySaveData.push({
-                      page: page || this.name,
-                      key: dictKey,
-                      lang: lang.code,
-                      value
-                    });
-                  } else {
-                    this.mySaveData[findIndex]["value"] = value;
-                  }
+                  const { dictKey } = row;
+                  const findIndex = _.findIndex(this.mySaveData, { dictKey });
 
-                  const findZhIndex = _.findIndex(this.mySaveData, {
-                    key: dictKey,
-                    page: this.name,
-                    lang: "zh-CN"
-                  });
-                  if (findZhIndex == -1 && row["zh-CN"] === dictKey) {
+                  if (findIndex > -1) {
+                    this.mySaveData[findIndex][key] = value;
+                  } else {
                     this.mySaveData.push({
-                      page: this.name,
-                      key: dictKey,
-                      lang: "zh-CN",
-                      value: _.get(
-                        _.find(this.initialData, { dictKey }),
-                        "zh-CN",
-                        dictKey
-                      )
+                      ...row,
+                      [key]: value,
+                      page: this.type === "pageData" ? this.name : "common"
                     });
                   }
-                  console.log(" this.mySaveData", this.mySaveData);
                 }}
               ></Input>
             );
@@ -147,6 +120,7 @@ export default {
   methods: {
     closeModal() {
       this.searchText = "";
+      this.type = "pageData";
       this.isModalVisible = false;
     },
     openModal({ name }) {
@@ -161,11 +135,31 @@ export default {
     },
 
     async saveData({ msg = "保存成功" }, close = true) {
-      console.log("this.mySaveData", this.mySaveData);
+      // 提取翻译值的逻辑
+      const extractedData = this.mySaveData.map((item) => {
+        return _.map(this.languages, (lang) => {
+          if (!_.isEmpty(item[lang.code])) {
+            return {
+              key: item.dictKey,
+              page: item.page,
+              lang: lang.code,
+              value: item[lang.code]
+            };
+          }
+          return undefined;
+        });
+      });
+      const data = _.compact(extractedData[0]);
+
+      // 保存翻译值
+      if (_.isEmpty(data)) {
+        Message.error({ content: "没有需要保存的数据" });
+        return;
+      }
       const res = await saveTranslate(
         {
           appCode: this.appCode,
-          data: this.mySaveData
+          data
         },
         this.token
       );
@@ -194,6 +188,7 @@ export default {
       }
     },
     async getPageData(firstResult = 1) {
+      this.loading = true;
       const res = await getAllTranslate(
         {
           appCode: this.appCode,
@@ -220,7 +215,7 @@ export default {
               page: "common"
             });
             if (commonData) {
-              arr.push(commonData);
+              arr.push({ ...commonData, page: this.name, common: true });
             } else {
               arr.push({
                 dictKey: key,
@@ -232,10 +227,12 @@ export default {
           }
         });
         this.pageData = _.cloneDeep(arr);
+        this.initialData = _.cloneDeep(this.pageData);
         this.pageDataShow = arr.slice(
           (firstResult - 1) * this.page.pageSize,
           firstResult * this.page.pageSize
         );
+        this.loading = false;
         // this.page = {
         //   firstResult: res.data.retVal.firstResult,
         //   pageSize: res.data.retVal.pageSize,
@@ -244,6 +241,7 @@ export default {
       }
     },
     async search(data, type) {
+      this.loading = true;
       const res = await getAllTranslate(
         {
           appCode: this.appCode,
@@ -264,6 +262,7 @@ export default {
           totalRows: res.data.retVal.totalRows
         };
       }
+      this.loading = false;
     },
     changeTab(name) {
       this.type = name;
@@ -293,96 +292,120 @@ export default {
     :width="70"
     title="多语言管理中心"
     footer-hide
+    @on-cancel="closeModal"
   >
-    <Tabs
-      v-model="type"
-      type="card"
-      class="gc_i18n_tabs"
-      @on-click="changeTab"
-    >
-      <TabPane
-        name="pageData"
-        label="当前页面"
-      >
-        <Table
-          border
-          :height="380"
-          :columns="columns"
-          :data="pageDataShow"
-        ></Table
-      ></TabPane>
-      <TabPane
-        name="data"
-        label="当前应用"
-      >
-        <Table
-          border
-          :height="380"
-          :columns="columns"
-          :data="data"
-        ></Table
-      ></TabPane>
-      <template #extra>
-        <div
-          class="extra"
-          v-if="type === 'data'"
+    <template v-if="isModalVisible">
+      <div>
+        <Tabs
+          v-model="type"
+          type="card"
+          class="gc_i18n_tabs"
+          @on-click="changeTab"
         >
-          <Input
-            prefix="ios-search"
-            placeholder="请输入搜索内容"
-            v-model="searchText"
-            clearable
-            @on-enter="search"
-            @on-clear="search"
-          />
-        </div>
-      </template>
-    </Tabs>
+          <TabPane
+            name="pageData"
+            label="当前页面"
+          >
+            <Spin
+              class="gc_i18n_spin"
+              v-if="loading"
+            ></Spin>
+            <Table
+              v-else
+              border
+              :height="380"
+              :columns="columns"
+              :data="pageDataShow"
+            ></Table
+          ></TabPane>
+          <TabPane
+            name="data"
+            label="当前应用"
+          >
+            <Spin
+              class="gc_i18n_spin"
+              v-if="loading"
+            ></Spin>
+            <Table
+              v-else
+              border
+              :height="380"
+              :columns="columns"
+              :data="data"
+            ></Table
+          ></TabPane>
+          <template #extra>
+            <div
+              class="extra"
+              v-if="type === 'data'"
+            >
+              <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-if="type === 'pageData'"
-          v-model="firstResult"
-          :total="translationKeys.length"
-          :page-size="10"
-          simple
-          show-total
-          @on-change="changePage"
-        />
-        <Page
-          v-else
-          v-model="firstResult"
-          :total="page.totalRows"
-          :page-size="10"
-          simple
-          show-total
-          @on-change="changePage"
-        />
-        <div>
-          共
-          {{ type === "pageData" ? translationKeys.length : page.totalRows }}
-          项数据
+        <div class="gc_i18n_page">
+          <div style="display: flex">
+            <Page
+              v-if="type === 'pageData'"
+              v-model="firstResult"
+              :total="translationKeys.length"
+              :page-size="10"
+              simple
+              show-total
+              @on-change="changePage"
+            />
+            <Page
+              v-else
+              v-model="firstResult"
+              :total="page.totalRows"
+              :page-size="10"
+              simple
+              show-total
+              @on-change="changePage"
+            />
+            <div>
+              共
+              {{
+                type === "pageData" ? translationKeys.length : page.totalRows
+              }}
+              项数据
+            </div>
+          </div>
+          <div>
+            <Button
+              style="margin-right: 10px"
+              @click="closeModal"
+              >关闭</Button
+            >
+            <Button
+              type="primary"
+              @click="saveData"
+              >保存</Button
+            >
+          </div>
         </div>
       </div>
-      <div>
-        <Button
-          style="margin-right: 10px"
-          @click="closeModal"
-          >关闭</Button
-        >
-        <Button
-          type="primary"
-          @click="saveData"
-          >保存</Button
-        >
-      </div>
-    </div>
+    </template>
   </Modal>
 </template>
-<style lang="less">
+<style lang="less" scoped>
+.gc_i18n_spin {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  padding-top: 50px;
+}
 .gc_i18n_tabs {
   padding-top: 5px;
+
   .ivu-tabs-bar {
     margin-bottom: 1px !important;
   }

package/packages/index.js

@@ -11,10 +11,26 @@ import "./libs/http";
 import _ from "lodash-es";
 import store2 from "store2";
 
+import { jws } from "jsrsasign";
+
+// 生成 JWT 的函数
+function generateJWT(orgCode) {
+  const header = {
+    alg: "HS512" // 算法
+  };
+  const payload = {
+    orgCode
+  };
+  const sHeader = JSON.stringify(header);
+  const sPayload = JSON.stringify(payload);
+  const secret = "";
+  // 同步生成 JWT
+  return jws.JWS.sign("HS512", sHeader, sPayload, secret);
+}
 export default class I18n {
   constructor(options = {}) {
-    const { router, appCode, messages, token, locale } = options;
-    this.token = token || store2.get("token");
+    const { router, appCode, messages, token, orgCode } = options;
+    this.token = token || generateJWT(orgCode);
     this.appCode = appCode;
     this.router = router;
     this.locale = store2.get("I18N_LANGUAGE") || navigator.language || "zh-CN";
@@ -105,9 +121,6 @@ export default class I18n {
     });
 
     const originalT = this.i18n.global.t;
-    globalThis.$deepScan = function (val) {
-      return val;
-    };
 
     globalThis.$t = this.i18n.global.t = (key, args, comment) => {
       const routeName = _.toUpper(this.router?.currentRoute?.value?.name);
@@ -138,7 +151,11 @@ export default class I18n {
       return originalTranslation;
     };
 
-    globalThis.$$t = (key, val, nameSpace) => {
+    globalThis.$deepScan = function (val) {
+      return val;
+    };
+
+    globalThis.$t = (key, val, nameSpace) => {
       const languageStore = store2.namespace(`I18N_${_.toUpper(this.appCode)}`);
       const message = _.get(languageStore.get(this.locale), "translatesDTOs");
       // 获取i18n语言数据
@@ -160,6 +177,22 @@ export default class I18n {
   getLanguage(language) {
     return store2.get("I18N_TEST.zh-TW");
   }
+  async getLanguages(isRemote = false) {
+    const langs = store2.get("I18N_LANGUAGES");
+    if (langs && !isRemote) {
+      return langs;
+    } else {
+      const res = await getLanguages({
+        appCode: this.appCode,
+        token: this.token
+      });
+      if (res.data) {
+        const languages = _.get(res.data, "retVal");
+        store2.set("I18N_LANGUAGES", languages);
+        return languages;
+      }
+    }
+  }
   async setLanguage(language) {
     return new Promise(async (resolve, reject) => {
       const res = await getTranslate({

package/src/main.js

@@ -7,13 +7,12 @@ import zh from "view-ui-plus/dist/locale/zh-CN";
 const i18n = new gc_i18n({
   appCode: "TEST",
   router,
-  token:
-    "eyJhbGciOiJIUzUxMiJ9.eyJkZXZpY2VUeXBlIjoiQ09NUFVURVIiLCJtYWluQXBwQ29kZSI6IlNTTyIsIm9yZ0NvZGUiOiJHUkVFTkNMT1VEIiwidWNTZXJ2ZXJVcmwiOiJodHRwczovL3Rlc3QuaWhvdGVsLmNuL3VjLXdlYi8iLCJhcHBDb2RlIjoiU1NPIiwidXNlclR5cGUiOiJOT1JNQUwiLCJsb2dpbkF0IjoxNzQ0MTA0OTQ5MDAwLCJwcmluY2lwYWxVc2VyQ29kZSI6IkhRTCIsImV4cCI6MzI1MDM2NTEyMDAsInVzZXJDb2RlIjoiSFFMIiwic3NvIjoiU1NPX1NFUlZFUiJ9.ra6-Yz0FEZdLObSuR1UsP8v2f3TXUWw0NDBKYUSrR4gbFtlrtgQcyp78LF3rLJMIaGn7A_YmqrzxP1pW4-ZGyA",
+  orgCode: "GREENCLOUD",
   messages: {
     "zh-CN": { ...zh, test: "合计{0}条" }
   }
 });
-
+window.i18n = i18n;
 const app = createApp(App).use(router).use(i18n);
 
 app.mount("#app");

package/src/view/BOATNOTICE.vue

@@ -51,7 +51,7 @@ const change = (lang) => {
     </div>
     <div>
       <div>测试:</div>
-      <div>{{ $t("4j3dy86", "找不到") }}</div>
+      <div>{{ $t("ewzh2", "找不到") }}</div>
     </div>
     <div>
       <div>测试:</div>

package/src/view/Home.vue

@@ -2,8 +2,10 @@
 import { useI18n } from "vue-i18n";
 const { locale, changeLocal } = useI18n();
 
-const change = (lang) => {
-  locale.value = lang;
+const change = async (lang) => {
+  const res = await i18n.getLanguages();
+  console.log("res", res);
+  // locale.value = lang;
 };
 </script>
 

package/vite.config.js

@@ -19,7 +19,15 @@ export default defineConfig({
     rollupOptions: {
       terserOptions: false,
       // 确保外部化处理那些你不想打包进库的依赖
-      external: ["vue", "axios", "lodash-es", "view-ui-plus"],
+      external: [
+        "vue",
+        "axios",
+        "lodash-es",
+        "view-ui-plus",
+        "store2",
+        "jsrsasign",
+        "keyboardjs"
+      ],
       output: {
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
@@ -40,7 +48,7 @@ export default defineConfig({
     // outDir:
     //   "/Users/huqiliang/Documents/github/auto-i18n-translation-plugins/example/vue3/node_modules/gc_i18n/lib"
     // outDir:
-    //   "/Users/huqiliang/Documents/lvyun/travel-ship-standard-front/node_modules/gc_i18n/lib"
+    //   "/Users/huqiliang/Documents/lvyun/dpms-front/node_modules/gc_i18n/lib"
   },
   plugins: [vue(), vueJsx(), libCss()]
 });