lt-business-component 1.0.1

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "lt-business-component",
+  "version": "1.0.1",
+  "private": false,
+  "description": "a lib base on longtec",
+  "main": "lib/lt-business-component.umd.min.js",
+  "keyword": "vue3 antd",
+  "author": "longtec",
+  "license": "MIT",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name lt-business-component  --dest lib packages/index.ts"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
+    "@vueuse/core": "^9.13.0",
+    "ant-design-vue": "^4.2.3",
+    "axios": "^1.3.5",
+    "browserslist": "^4.23.0",
+    "caniuse-lite": "^1.0.30001620",
+    "colorpicker-v3": "^2.10.2",
+    "core-js": "^3.8.3",
+    "dayjs": "^1.11.12",
+    "jquery": "^3.6.4",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "lodash-es": "^4.17.21",
+    "lt-a-baseui": "^1.0.60",
+    "lt-request": "^1.0.4",
+    "node-polyfill-webpack-plugin": "^4.0.0",
+    "pinia": "^2.1.7",
+    "register-service-worker": "^1.7.2",
+    "sortablejs": "^1.15.0",
+    "unplugin-vue-define-options": "0.7.3",
+    "vue": "^3.4.29",
+    "vue-class-component": "^8.0.0-0",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0",
+    "webpack": "^5.93.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-pwa": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "typescript": "~4.5.5"
+  },
+  "files": [
+    "lib",
+    "packages/locales"
+  ]
+}

package/packages/locales/config.ts

@@ -0,0 +1,21 @@
+export type LocaleType = keyof typeof localeMap;
+
+export const localeMap = {
+  zh_CN: 'zh_CN',
+  en_US: 'en_US',
+} as const;
+
+export const localeList = [
+  {
+    lang: localeMap.en_US,
+    label: 'English',
+    icon: '🇺🇸',
+    title: 'Language',
+  },
+  {
+    lang: localeMap.zh_CN,
+    label: '简体中文',
+    icon: '🇨🇳',
+    title: '语言',
+  },
+] as const;

package/packages/locales/helper.ts

@@ -0,0 +1,36 @@
+import { set } from 'lodash-es';
+import type { LocaleType } from './config';
+
+export const loadLocalePool: LocaleType[] = [];
+
+export function setHtmlPageLang(locale: LocaleType) {
+  document.querySelector('html')?.setAttribute('lang', locale);
+}
+
+export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) {
+  cb(loadLocalePool);
+}
+
+export function genMessage(langs: __WebpackModuleApi.RequireContext, prefix = 'lang') {
+  const obj: Recordable = {};
+
+  langs.keys().forEach((key) => {
+    const langFileModule = langs(key).default;
+    let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '');
+    const lastIndex = fileName.lastIndexOf('.');
+    fileName = fileName.substring(0, lastIndex);
+    const keyList = fileName.split('/');
+    const moduleName = keyList.shift();
+    const objKey = keyList.join('.');
+
+    if (moduleName) {
+      if (objKey) {
+        set(obj, moduleName, obj[moduleName] || {});
+        set(obj[moduleName], objKey, langFileModule);
+      } else {
+        set(obj, moduleName, langFileModule || {});
+      }
+    }
+  });
+  return obj;
+}

package/packages/locales/index.ts

@@ -0,0 +1,41 @@
+import { type App } from "vue";
+import { createI18n } from "vue-i18n";
+import { localeMap } from "./config";
+import { setHtmlPageLang, setLoadLocalePool } from "./helper";
+import { useLocaleStoreWithOut } from "../store/modules/locale";
+const enUS = require("./lang/en_US");
+const zhCN = require("./lang/zh_CN");
+
+function createI18nOptions() {
+  const localeStore = useLocaleStoreWithOut();
+  const locale = localeStore.getLocale;
+  const defaultLocal = locale == "zh_CN" ? zhCN : enUS;
+  //  await import(`./lang/${locale}.ts`);
+  const message = defaultLocal.default?.message ?? {};
+
+  setHtmlPageLang(locale);
+  setLoadLocalePool((loadLocalePool) => {
+    loadLocalePool.push(locale);
+  });
+
+  return {
+    locale,
+    legacy: false,
+    fallbackLocale: localeMap.zh_CN, // set fallback locale
+    messages: {
+      [locale]: message as { [key: string]: string },
+    },
+    globalInjection: true,
+    silentTranslationWarn: true, // true - warning off
+    missingWarn: false,
+    silentFallbackWarn: true,
+  };
+}
+
+const options =  createI18nOptions();
+export const i18n = createI18n(options);
+
+// setup i18n instance with global
+export function setupI18n(app: App) {
+  app.use(i18n);
+}

package/packages/locales/lang/en-US/common.js

@@ -0,0 +1,23 @@
+export default {
+  okText: 'OK',
+  closeText: 'Close',
+  cancelText: 'Cancel',
+  loadingText: 'Loading...',
+  saveText: 'Save',
+  delText: 'Delete',
+  resetText: 'Reset',
+  searchText: 'Search',
+  queryText: 'Search',
+  inputText: 'Please enter',
+  chooseText: 'Please choose',
+  redo: 'Refresh',
+  back: 'Back',
+  light: 'Light',
+  dark: 'Dark',
+  edit:"Edit",
+  fullScreen:"fullScreen",
+  exitfullScreen:"exitfullScreen",
+  LockScreen:"LockScreen",
+  ExitSystem:"ExitSystem",
+  changeLuaguage:"changeLuaguage"
+};

package/packages/locales/lang/en-US/component.js

@@ -0,0 +1,15 @@
+export default {
+  commonList: {
+    New: "New",
+    Edit: "Edit",
+    Delete: "Delete",
+    warning: "warning",
+    Cancel: "Cancel",
+    confirm: "confirm",
+    Operate: "Operate",
+    DelWarning: "he current operation will delete the selected data?",
+    save: "save",
+    SaveSuccess: "Save Success",
+    DelSuccess: "Delete Success"
+  },
+};

package/packages/locales/lang/en_US.js

@@ -0,0 +1,35 @@
+import antdLocale from 'ant-design-vue/es/locale/en_US';
+// import { genMessage } from '../helper';
+import { set } from 'lodash-es';
+function genMessage(langs, prefix = 'lang') {
+  const obj = {};
+  langs.keys().forEach((key) => {
+    const langFileModule = langs(key).default;
+    let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '');
+    const lastIndex = fileName.lastIndexOf('.');
+    fileName = fileName.substring(0, lastIndex);
+    const keyList = fileName.split('/');
+    const moduleName = keyList.shift();
+    const objKey = keyList.join('.');
+
+    if (moduleName) {
+      if (objKey) {
+        set(obj, moduleName, obj[moduleName] || {});
+        set(obj[moduleName], objKey, langFileModule);
+      } else {
+        set(obj, moduleName, langFileModule || {});
+      }
+    }
+  });
+  return obj;
+}
+const modulesFiles = require.context('./en-US', true, /\.js$/);
+
+export default {
+  message: {
+    ...genMessage(modulesFiles, 'en-US'),
+    antdLocale,
+  },
+  dateLocale: null,
+  dateLocaleName: 'en-US',
+};

package/packages/locales/lang/zh-CN/common.js

@@ -0,0 +1,23 @@
+export default {
+  okText: '确认',
+  closeText: '关闭',
+  cancelText: '取消',
+  loadingText: '加载中...',
+  saveText: '保存',
+  delText: '删除',
+  resetText: '重置',
+  searchText: '搜索',
+  queryText: '查询',
+  inputText: '请输入',
+  chooseText: '请选择',
+  redo: '刷新',
+  back: '返回',
+  light: '亮色主题',
+  dark: '黑暗主题',
+  edit:"编辑",
+  fullScreen:"全屏",
+  exitfullScreen:"退出全屏",
+  LockScreen:"锁屏",
+  ExitSystem:"退出系统",
+  changeLuaguage:"切换语言"
+};

package/packages/locales/lang/zh-CN/component.js

@@ -0,0 +1,15 @@
+export default {
+  commonList: {
+    New: "新建",
+    Edit: "编辑",
+    Delete: "删除",
+    warning: "警告",
+    Cancel: "取消",
+    confirm: "确定",
+    Operate:"操作",
+    DelWarning: "当前操作将删除选中数据，是否继续?",
+    save:"保存",
+    SaveSuccess:"保存成功",
+    DelSuccess:"删除成功"
+  },
+};

package/packages/locales/lang/zh_CN.js

@@ -0,0 +1,33 @@
+import antdLocale from 'ant-design-vue/es/locale/zh_CN';
+import { set } from 'lodash-es';
+
+function genMessage(langs, prefix = 'lang') {
+  const obj = {};
+  langs.keys().forEach((key) => {
+    const langFileModule = langs(key).default;
+    let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '');
+    const lastIndex = fileName.lastIndexOf('.');
+    fileName = fileName.substring(0, lastIndex);
+    const keyList = fileName.split('/');
+    const moduleName = keyList.shift();
+    const objKey = keyList.join('.');
+    if (moduleName) {
+      if (objKey) {
+        set(obj, moduleName, obj[moduleName] || {});
+        set(obj[moduleName], objKey, langFileModule);
+      } else {
+        set(obj, moduleName, langFileModule || {});
+      }
+    }
+  });
+  return obj;
+}
+
+const modulesFiles = require.context('./zh-CN', true, /\.js$/);
+ 
+export default {
+  message: {
+    ...genMessage(modulesFiles, 'zh-CN'),
+    antdLocale,
+  },
+};

package/packages/locales/useLocale.ts

@@ -0,0 +1,68 @@
+/**
+ * Multi-language related operations
+ */
+import { unref, computed } from 'vue';
+import { loadLocalePool, setHtmlPageLang } from './helper';
+import { i18n } from './';
+import type { LocaleType } from './config';
+import type { Locale } from 'ant-design-vue/es/locale-provider';
+
+import { useLocaleStoreWithOut } from '@/store/modules/locale';
+
+interface LangModule {
+  message: Recordable;
+  dateLocale: Recordable;
+  dateLocaleName: string;
+}
+
+function setI18nLanguage(locale: LocaleType) {
+  const localeStore = useLocaleStoreWithOut();
+
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale;
+  } else {
+    (i18n.global.locale as any).value = locale;
+  }
+  localeStore.setLocale(locale);
+  setHtmlPageLang(locale);
+}
+
+export function useLocale() {
+  const localeStore = useLocaleStoreWithOut();
+  const getLocale = computed(() => localeStore.getLocale);
+
+  const getAntdLocale = computed<Locale>((): any => {
+    return i18n.global.getLocaleMessage<{ antdLocale: Locale }>(unref(getLocale)).antdLocale;
+  });
+
+  // Switching the language will change the locale of useI18n
+  // And submit to configuration modification
+  async function changeLocale(locale: LocaleType) {
+    const globalI18n = i18n.global;
+    const currentLocale = unref(globalI18n.locale);
+    if (currentLocale === locale) {
+      return locale;
+    }
+
+    if (loadLocalePool.includes(locale)) {
+      setI18nLanguage(locale);
+      return locale;
+    }
+    const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule;
+    if (!langModule) return;
+
+    const { message } = langModule;
+
+    globalI18n.setLocaleMessage(locale, message);
+    loadLocalePool.push(locale);
+
+    setI18nLanguage(locale);
+    return locale;
+  }
+
+  return {
+    getLocale,
+    changeLocale,
+    getAntdLocale,
+  };
+}