gc_i18n 1.2.0 → 1.2.2

package/packages/components/config.vue

@@ -1,11 +1,18 @@
 <script lang="jsx">
 import _ from "lodash-es";
-import { getAllTranslate, getLanguages, saveTranslate } from "../libs/service";
-import { Message } from "view-ui-plus";
+import {
+  getAllTranslate,
+  getLanguages,
+  saveTranslate,
+  userDicts
+} from "../libs/service";
+import { Message, Tooltip } from "view-ui-plus";
+import store2 from "store2";
 
 export default {
   data() {
     return {
+      LanguageSettingVisible: false,
       isModalVisible: false,
       loading: false,
       searchText: "",
@@ -28,93 +35,113 @@ export default {
     },
 
     columns() {
-      let arr =
-        this.type === "pageData"
-          ? [
-              {
-                title: "状态",
-                width: 90,
-                key: "icon",
-                fixed: "left",
-                render: (h, { row }) => {
-                  return row.localhost ? (
-                    <span style={{ color: "red" }}>
-                      <span style={{ marginRight: "2px" }}>本地</span>
-                      <Tooltip
-                        content="该字段未在翻译数据库中"
-                        placement="top"
-                        transfer
-                      >
-                        <Icon type="ios-alert-outline" />
-                      </Tooltip>
-                    </span>
-                  ) : (
-                    <span style={{ color: "green" }}>
-                      {row.common ? "全局" : "当前页"}
-                    </span>
-                  );
-                }
-              },
-              {
-                title: "关键词",
-                fixed: "left",
-                width: 80,
-                key: "dictKey"
-              }
-            ]
-          : [
-              {
-                title: "状态",
-                fixed: "left",
-                width: 90,
-                key: "page",
-                render: (h, { row }) => {
-                  return h(
-                    "span",
-                    {},
-                    row.page === "common" ? "全局" : row.page
-                  );
-                }
-              },
-              {
-                title: "关键词",
-                fixed: "left",
-                width: 80,
-                key: "dictKey"
-              }
-            ];
+      let arr = [
+        // this.type === "pageData"
+        //   ? [
+        //       {
+        //         title: "状态",
+        //         width: 100,
+        //         key: "icon",
+        //         fixed: "left",
+        //         render: (h, { row }) => {
+        //           return row.localhost ? (
+        //             <span style={{ color: "red" }}>
+        //               <span style={{ marginRight: "2px" }}>本地</span>
+        //               <Tooltip
+        //                 content="该字段未在翻译数据库中"
+        //                 placement="top"
+        //                 transfer
+        //               >
+        //                 <Icon type="ios-alert-outline" />
+        //               </Tooltip>
+        //             </span>
+        //           ) : row.page === this.name ? (
+        //             <span style={{ color: "green" }}>当前页</span>
+        //           ) : (
+        //             <span>
+        //               全局{" "}
+        //               <Tooltip
+        //                 maxWidth={150}
+        //                 content="编辑该字段转化为当前页,不会覆盖全局"
+        //                 placement="top"
+        //                 transfer
+        //               >
+        //                 <Icon type="ios-alert-outline" />
+        //               </Tooltip>
+        //             </span>
+        //           );
+        //         }
+        //       },
+        //       {
+        //         title: "关键词",
+        //         fixed: "left",
+        //         width: 90,
+        //         key: "dictKey"
+        //       }
+        //     ]
+        //   : [
+        {
+          title: "状态",
+          fixed: "left",
+          width: 90,
+          key: "page",
+          render: (h, { row }) => {
+            return h(
+              "span",
+              {},
+              row.page === "common"
+                ? "全局"
+                : row.page === this.name
+                ? "当前页"
+                : "登录页"
+            );
+          }
+        },
+        {
+          title: "关键词",
+          fixed: "left",
+          width: 90,
+          key: "dictKey"
+        }
+      ];
       _.map(this.languages, (lang) => {
         const key = lang.code;
+        if (!lang.unChecked) {
+          return arr.push({
+            title: lang.name,
+            key,
+            render: (h, { row, index }) => {
+              const data = row[key];
+              const { localhost } = row;
+              return localhost ? null : (
+                <Input
+                  modelValue={data}
+                  onOnChange={(e) => {
+                    const value = e.target.value;
+                    const { dictKey } = row;
+                    console.log("dictKey", dictKey);
+                    const findIndex = _.findIndex(this.mySaveData, { dictKey });
 
-        return arr.push({
-          title: lang.name,
-          key,
-          render: (h, { row, index }) => {
-            const data = row[key];
-            const { localhost } = row;
-            return localhost ? null : (
-              <Input
-                modelValue={data}
-                onOnChange={(e) => {
-                  const value = e.target.value;
-                  const { dictKey } = row;
-                  console.log("dictKey", dictKey);
-                  const findIndex = _.findIndex(this.mySaveData, { dictKey });
-
-                  if (findIndex > -1) {
-                    this.mySaveData[findIndex][key] = value;
-                  } else {
-                    this.mySaveData.push({
-                      ...row,
-                      [key]: value,
-                      page: this.type === "pageData" ? this.name : "common"
-                    });
-                  }
-                }}
-              ></Input>
-            );
-          }
-        });
+                    if (findIndex > -1) {
+                      this.mySaveData[findIndex][key] = value;
+                    } else {
+                      this.mySaveData.push({
+                        ...row,
+                        [key]: value,
+                        page:
+                          this.type === "loginData"
+                            ? this.loginRouteName
+                            : this.type === "pageData"
+                            ? this.name
+                            : "common"
+                      });
+                    }
+                  }}
+                ></Input>
+              );
+            }
+          });
+        }
       });
       return arr;
     }
@@ -124,9 +151,28 @@ export default {
     setLanguage: Function,
     token: String,
     translationKeys: Array,
+    loginRouteName: String, // 登录页路由名称
+    loginTranslationKeys: Array, // 登录页翻译键
     emitter: Object // 接收事件总线
   },
   methods: {
+    saveLanguageSetting(val) {
+      const settings = _.map(
+        _.filter(this.languages, (val) => {
+          return val.unChecked;
+        }),
+        "code"
+      );
+      console.log("settings", settings);
+
+      store2.set("I18N_LANGUAGE_SETTING", settings);
+    },
+    handleLanguageSettingOpen() {
+      this.LanguageSettingVisible = !this.LanguageSettingVisible;
+    },
+    onClickOutside() {
+      this.LanguageSettingVisible = false;
+    },
     inputSearch() {
       if (this.type === "pageData") {
         this.getPageData();
@@ -211,15 +257,29 @@ export default {
         "pageData"
       );
     },
+    async getLoginData(data) {
+      this.search(
+        {
+          ...data,
+          page: this.loginRouteName,
+          commaSeparatedKeys: this.loginTranslationKeys.toString()
+        },
+        "pageData"
+      );
+    },
     async search(data, type) {
       this.loading = true;
-      const res = await getAllTranslate(
+      const res = await userDicts(
         {
           appCode: this.appCode,
-          page: "common",
           searchBlur: this.searchText,
           commaSeparatedLangs: _.map(this.languages, "code").toString(),
-          firstResult: 0,
+          page:
+            type === "loginData"
+              ? this.loginRouteName
+              : type === "pageData"
+              ? this.name
+              : "common",
           pageSize: 10,
           ...data
         },
@@ -228,18 +288,6 @@ export default {
       if (res) {
         this.initialData = _.cloneDeep(res.data.retVal.datas);
         let data = res.data.retVal.datas;
-        // if (type === "pageData") {
-        //   _.forEach(this.translationKeys, (key) => {
-        //     if (!_.find(data, { dictKey: key })) {
-        //       data.push({
-        //         dictKey: key,
-        //         page: this.name,
-        //         "zh-CN": key,
-        //         localhost: true
-        //       });
-        //     }
-        //   });
-        // }
         this.data = _.cloneDeep(data);
         this.page = {
           firstResult: res.data.retVal.firstResult,
@@ -253,14 +301,22 @@ export default {
       this.type = name;
       if (name === "data") {
         this.search();
-      } else {
+      } else if (name === "pageData") {
         this.getPageData();
+      } else if (name === "loginData") {
+        this.getLoginData(); // 假设登录页面的标识为 "login"
       }
     },
     async init() {
       const res = await getLanguages(this.token);
       if (res && res.data.result == 0) {
-        this.languages = res.data.retVal;
+        let arr = res.data.retVal;
+        _.map(arr, (val) => {
+          if (_.includes(store2.get("I18N_LANGUAGE_SETTING"), val.code)) {
+            val.unChecked = true;
+          }
+        });
+        this.languages = arr;
         this.getPageData();
       } else {
         Message.error("获取语言失败,出错了");
@@ -319,9 +375,60 @@ export default {
               :data="data"
             ></Table
           ></TabPane>
+          <TabPane
+            name="loginData"
+            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">
+              <Dropdown
+                style="width: 80px"
+                transfer
+                trigger="custom"
+                placement="bottom-start"
+                v-click-away="onClickOutside"
+                :visible="LanguageSettingVisible"
+              >
+                <a
+                  href="javascript:void(0)"
+                  @click="handleLanguageSettingOpen"
+                >
+                  语言
+                  <Icon type="ios-arrow-down"></Icon>
+                </a>
+                <template #list>
+                  <!-- {{ languages }} -->
+                  <DropdownMenu>
+                    <DropdownItem
+                      v-for="lang in languages"
+                      :key="lang.code"
+                    >
+                      <Checkbox
+                        v-model="lang.unChecked"
+                        @on-change="saveLanguageSetting"
+                        :true-value="false"
+                        :false-value="true"
+                      >
+                        <span>{{ lang.name }}</span>
+                      </Checkbox>
+                    </DropdownItem>
+                  </DropdownMenu>
+                </template>
+              </Dropdown>
               <Input
+                class="gc_i18n_search"
                 prefix="ios-search"
                 placeholder="请输入搜索内容"
                 v-model="searchText"
@@ -344,9 +451,11 @@ export default {
               @on-change="changePage"
             />
             <div>
-              共
-              {{ page.totalRows }}
-              项数据
+              <span>
+                共
+                {{ page.totalRows }}
+                项当前页数据
+              </span>
             </div>
           </div>
           <div>
@@ -385,6 +494,8 @@ export default {
   .extra {
     position: relative;
     top: -3px;
+    display: flex;
+    align-items: center;
   }
 }
 

package/packages/index.js

@@ -7,11 +7,11 @@ import configVue from "./components/config.vue";
 import { getLanguages, getTranslate } from "./libs/service";
 import { convertArrayToObject } from "./libs/utils";
 import { extractTranslationKeys } from "./libs/i18nUtils";
-import "./libs/http";
 import _ from "lodash-es";
 import store2 from "store2";
 import mitt from "mitt";
 import { jws } from "jsrsasign";
+import VueClickAway from "vue3-click-away";
 
 // 生成 JWT 的函数
 function generateJWT(orgCode) {
@@ -29,7 +29,15 @@ function generateJWT(orgCode) {
 }
 export default class I18n {
   constructor(options = {}) {
-    const { router, appCode, messages, token, orgCode } = options;
+    const {
+      router,
+      appCode,
+      messages,
+      token,
+      orgCode,
+      loginRouteName,
+      keyboard
+    } = options;
     this.token = token || generateJWT(orgCode);
     this.loadI18n = true;
     this.appCode = appCode;
@@ -38,25 +46,17 @@ export default class I18n {
     this.name = "";
     this.messages = messages || {};
     this.translationKeys = [];
-
+    this.loginRouteName = loginRouteName || "login";
+    this.loginTranslationKeys = [];
+    this.keyboard = keyboard || "shift>t";
     // 初始化路由守卫
     this.initRouterGuards();
 
     // 初始化 i18n 实例
     this.initI18n(options);
 
-    // // 路由首次加载完成后设置语言
-    // this.router
-    //   .isReady()
-    //   .then(async () => {
-    //     // await this.setLanguage(this.locale);
-    //     this.createModal();
-    //   })
-    //   .catch((error) => {
-    //     console.error("路由首次加载出错:", error);
-    //   });
-
-    keyboardJS.bind("shift > t", (e) => {
+    keyboardJS.bind(this.keyboard, (e) => {
+      // && _.toLower(this.name) != this.loginRouteName
       if (!this.configInstance) {
         this.configInstance = this.createModal(this.name);
         // 打开弹窗
@@ -93,6 +93,33 @@ export default class I18n {
         // this.createModal(to.name);
       }
       this.loadI18n = false;
+      const loginRoute = this.router.getRoutes().find((route) => {
+        return (
+          route.name === this.loginRouteName ||
+          route.path === `/${this.loginRouteName}`
+        );
+      });
+
+      if (loginRoute) {
+        let loginComponent = loginRoute.components.default;
+        if (
+          typeof loginComponent === "function" &&
+          loginComponent.toString().includes("import(")
+        ) {
+          try {
+            // 加载异步组件
+            loginComponent = await loginComponent();
+            loginComponent = loginComponent.default;
+          } catch (error) {
+            console.error("加载异步组件时出错:", error);
+            next();
+            return;
+          }
+        }
+        const loginRouteKeys = extractTranslationKeys(loginComponent);
+        // 如果当前路由是登录路由，则提取翻译键
+        this.loginTranslationKeys = loginRouteKeys;
+      }
       if (to.matched.length > 0) {
         // 存储所有组件的翻译键
         const allTranslationKeys = [];
@@ -254,9 +281,12 @@ export default class I18n {
       setLanguage: this.setLanguage.bind(this, this.locale),
       name: name || this.name,
       translationKeys: this.translationKeys,
+      loginRouteName: this.loginRouteName, // 登录页路由名称
+      loginTranslationKeys: this.loginTranslationKeys,
       emitter // 将事件总线作为 prop 传递
     })
       .use(iview)
+      .use(VueClickAway)
       .mount(document.createElement("div")); // 挂载到一个临时的 div
   }
   install(app, opts = {}) {

package/packages/libs/service.js

@@ -3,6 +3,7 @@ import store2 from "store2";
 import _ from "lodash-es";
 import { mergeArraysByKey } from "./utils";
 export const service = "https://test.ihotel.cn";
+// export const service = "http://192.168.1.170:2018";
 
 export const getLanguages = async (token) => {
   return axios.get(service + "/i18n-web/sysoption/getsupportedlangs", {
@@ -11,6 +12,7 @@ export const getLanguages = async (token) => {
     }
   });
 };
+
 export const fetchTranslate = async ({
   appCode,
   language = "zh-CN",
@@ -49,6 +51,18 @@ export const getAllTranslate = async (data, token) => {
     headers: { Authorization: token }
   });
 };
+
+export const userDicts = async (data, token) => {
+  return axios({
+    url: service + "/i18n-web/kv_translate/userDicts",
+    method: "POST",
+    headers: {
+      Authorization: token
+    },
+    data
+  });
+};
+
 export const saveTranslate = async (data, token) => {
   return axios({
     url: service + "/i18n-web/kv_translate/batch",

package/src/router/index.js

@@ -7,9 +7,9 @@ const routes = [
     component: () => import("../view/Home.vue")
   },
   {
-    path: "/test",
-    name: "test",
-    component: () => import("../view/test.vue")
+    path: "/login",
+    name: "Login",
+    component: () => import("../view/login.vue")
   }
 ];
 const router = createRouter({

package/src/view/login.vue

@@ -0,0 +1,14 @@
+<script setup>
+const change = async (lang) => {
+  await $changeLocale(lang);
+  location.reload();
+};
+</script>
+
+<template>
+  <h1>十多个十多个</h1>
+  <h1>蓝色灯光</h1>
+  <h1>{{ $t("xxx") }}</h1>
+  <button @click="change('en-US')">en</button>
+  <button @click="change('zh-CN')">zh</button>
+</template>

package/vite.config.js

@@ -48,8 +48,12 @@ export default defineConfig({
     outDir: "lib"
     // outDir:
     //   "/Users/huqiliang/Documents/github/auto-i18n-translation-plugins/example/vue3/node_modules/gc_i18n/lib"
-    // outDir:
-    //   "/Users/huqiliang/Documents/lvyun/dpms-front/node_modules/gc_i18n/lib"
+    //   outDir:
+    //     "/Users/huqiliang/Documents/lvyun/dpms-front/node_modules/gc_i18n/lib"
+    //
+  },
+  server: {
+    host: "0.0.0.0"
   },
   plugins: [
     vue(),

package/packages/libs/http.js

@@ -1,64 +0,0 @@
-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) => {
-    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;
-  },
-  (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/src/view/test.vue

@@ -1,7 +0,0 @@
-<script setup></script>
-
-<template>
-  <h1>首页</h1>
-  <h1>测试</h1>
-  <h1>页面独有</h1>
-</template>