feat: 新增国际化

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

package.json

@@ -16,6 +16,8 @@
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "prepare": "husky install",
+    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
+    "postversion": "git push && git push origin --tags",
     "test prod cors": "npx http-server dist --cors --gzip -P http://29135jo738.zicp.vip",
     "test prod gzip": "npx http-server dist --cors --gzip -c-1"
   },
@@ -34,13 +36,16 @@
     "socket.io-client": "4.4.0",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.26",
-    "vue-router": "^4.0.12"
+    "vue-i18n": "^9.2.0-beta.26",
+    "vue-router": "^4.0.12",
+    "xlsx": "^0.17.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.0.1",
     "@commitlint/config-conventional": "^16.0.0",
+    "@intlify/vue-i18n-loader": "^4.1.0",
     "@types/lodash": "^4.14.178",
-    "@types/node": "^17.0.6",
+    "@types/node": "^17.0.7",
     "@types/webpack-env": "^1.16.3",
     "@typescript-eslint/eslint-plugin": "^5.8.1",
     "@typescript-eslint/parser": "^5.8.1",
@@ -56,14 +61,15 @@
     "babel-plugin-lodash": "^3.3.4",
     "commitizen": "^4.2.4",
     "compression-webpack-plugin": "^9.2.0",
+    "conventional-changelog-cli": "^2.2.2",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.2.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.1.4",
+    "lint-staged": "^12.1.5",
     "lodash-webpack-plugin": "^0.11.6",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",

src/App.vue

@@ -1,19 +1,29 @@
 <template>
-  <ConfigProvider :locale="zhCN">
+  <ConfigProvider :locale="getAntdLocale">
     <router-view v-slot="{ Component }">
-      <Suspense>
-        <component :is="Component" />
-      </Suspense>
+      <component :is="Component" />
     </router-view>
     <LockScreen />
   </ConfigProvider>
 </template>
 
 <script setup lang="ts">
-  import zhCN from 'ant-design-vue/es/locale/zh_CN';
+  import { watchEffect } from 'vue';
   import { ConfigProvider } from 'ant-design-vue';
-  // import SuspenseWithError from '@/components/SuspenseWithError.vue'
-  import { LockScreen } from '@/components/lockscreen';
+  import { LockScreen } from '@/components/basic/lockscreen';
+  import { useRoute } from 'vue-router';
+  import { useLocale } from '@/locales/useLocale';
+  import { transformI18n } from './hooks/useI18n';
+
+  const route = useRoute();
+  const { getAntdLocale } = useLocale();
+
+  watchEffect(() => {
+    if (route.meta?.title) {
+      // 翻译网页标题
+      document.title = transformI18n(route.meta.title);
+    }
+  });
 </script>
 
 <style lang="less"></style>

src/components/basic/README.md

@@ -0,0 +1,6 @@
+### 基础组件（目录说明）
+
+| 组件名称 | 描述 | 是否全局组件 | 使用建议 |
+| --- | --- | --- | --- |
+| button | `按钮组件`基于 a-button 二次封装，主要扩展了按钮的颜色，基本使用方式与 antdv 的 a-button 保持一致 | 是 | -- |
+| check-box | `复选框`基于 a-checkbox 二次封装，基本使用方式与 antdv 的 a-checkbox 保持一致 | 否 | -- |

src/components/button/button.vue → src/components/basic/button/button.vue

@@ -35,9 +35,9 @@
 </script>
 
 <style lang="less" scoped>
-  @import './styles/success';
+  @import 'styles/success';
 </style>
 
 <style lang="less" scoped>
-  @import './styles/warning';
+  @import 'styles/warning';
 </style>

src/components/button/styles/setButtonColor.less → src/components/basic/button/styles/setButtonColor.less

@@ -1,5 +1,5 @@
-@import '~ant-design-vue/lib/style/themes/default';
-@import '~ant-design-vue/es/button/style/mixin';
+@import '../../../../../node_modules/ant-design-vue/lib/style/themes/default';
+@import '../../../../../node_modules/ant-design-vue/es/button/style/mixin';
 
 .button-variant(@color; @background) {
   .button-color(@color; @background; @background);

src/components/icons-select/index.vue → src/components/basic/icons-select/index.vue

@@ -24,7 +24,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { Popover } from 'ant-design-vue';
-  import { IconFont } from '@/components/iconfont';
+  import { IconFont } from '@/components/basic/iconfont';
   import icons from './icons.json';
   import { useVModel } from '@vueuse/core';
 

src/components/basic/locale-picker/index.ts

@@ -0,0 +1 @@
+export { default as LocalePicker } from './index.vue';

src/components/basic/locale-picker/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <Dropdown placement="bottomRight">
+    <SvgIcon name="locale" />
+    <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
+    <template #overlay>
+      <Menu v-model:selectedKeys="selectedKeys" @click="handleMenuClick">
+        <Menu.Item v-for="item in localeList" :key="item.lang">
+          <a href="javascript:;">{{ item.icon }} {{ item.label }}</a>
+        </Menu.Item>
+      </Menu>
+    </template>
+  </Dropdown>
+</template>
+<script lang="ts" setup>
+  import { ref, watchEffect, unref, computed } from 'vue';
+  import { Dropdown, Menu } from 'ant-design-vue';
+  import { useLocale } from '@/locales/useLocale';
+  import { type LocaleType, localeList } from '@/locales/config';
+  import { SvgIcon } from '@/components/basic/svg-icon';
+
+  const props = defineProps({
+    /**
+     * Whether to display text
+     */
+    showText: { type: Boolean, default: true },
+    /**
+     * Whether to refresh the interface when changing
+     */
+    reload: { type: Boolean },
+  });
+
+  const selectedKeys = ref<string[]>([]);
+
+  const { changeLocale, getLocale } = useLocale();
+
+  const getLocaleText = computed(() => {
+    const key = selectedKeys.value[0];
+    if (!key) {
+      return '';
+    }
+    return localeList.find((item) => item.lang === key)?.label;
+  });
+
+  watchEffect(() => {
+    selectedKeys.value = [unref(getLocale)];
+  });
+
+  async function toggleLocale(lang: LocaleType | string) {
+    await changeLocale(lang as LocaleType);
+    selectedKeys.value = [lang as string];
+    props.reload && location.reload();
+  }
+
+  function handleMenuClick({ key }) {
+    if (unref(getLocale) === key) {
+      return;
+    }
+    toggleLocale(key as string);
+  }
+</script>

src/components/basic/svg-icon/svg-icon.vue

@@ -0,0 +1,51 @@
+<template>
+  <svg v-bind="$attrs" class="svg-icon" :style="getStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  import { computed, type CSSProperties } from 'vue';
+
+  const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
+    requireContext.keys().forEach(requireContext);
+  try {
+    importAll(require.context('@/assets/icons', true, /\.svg$/));
+  } catch (error) {
+    console.log(error);
+  }
+
+  const props = defineProps({
+    prefix: {
+      type: String,
+      default: 'icon',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: [Number, String],
+      default: 16,
+    },
+  });
+
+  const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+
+  const getStyle = computed((): CSSProperties => {
+    const { size } = props;
+    const s = `${size}`.replace('px', '').concat('px');
+    return {
+      width: s,
+      height: s,
+    };
+  });
+</script>
+
+<style lang="less">
+  .svg-icon {
+    overflow: hidden;
+    vertical-align: -0.15em;
+    fill: currentColor;
+  }
+</style>

src/components/basic/title-i18n/index.ts

@@ -0,0 +1 @@
+export { default as TitleI18n } from './index.vue';

src/components/basic/title-i18n/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <i18n-t tag="span" :keypath="getTitle" scope="global" />
+</template>
+
+<script setup lang="ts">
+  import { Title18n } from 'types/vue-router';
+  import { type PropType, computed } from 'vue';
+  import { useLocaleStore } from '@/store/modules/locale';
+
+  const props = defineProps({
+    title: {
+      type: [String, Object] as PropType<string | Title18n>,
+      required: true,
+      default: '',
+    },
+  });
+
+  const localeStore = useLocaleStore();
+
+  const getTitle = computed(() => {
+    const { title = '' } = props;
+    if (typeof title === 'object') {
+      return title?.[localeStore.locale] ?? title;
+    }
+    return title;
+  });
+</script>

src/components/business/README.md

@@ -0,0 +1,3 @@
+### 业务组件（目录说明）
+
+#### 与业务强耦合的组件可以放这里

src/components/core/README.md

@@ -0,0 +1,7 @@
+### 核心组件（目录说明）
+
+| 组件名称 | 描述 | 是否全局组件 | 使用建议 |
+| --- | --- | --- | --- |
+| draggable-modal | `可拖拽弹窗`基于 a-modal 二次封装的可拖拽模态框，基本使用方式与 antdv 的 a-modal 保持一致 | 否 | 有弹窗拖拽需求的可以使用此组件 |
+| dynamic-table | `动态表格`基于 a-table 二次封装的表格，基本使用方式与 antdv 的 a-table 保持一致 | 否 | 根据自己需求调整，建议全局使用统一的表格封装组件 |
+| schema-form | `动态表单`基于 a-form 二次封装。通过 JSON schema 的方式配置使用 | 否 | 定制性不高的表单都可以考虑使用 |

src/components/core/draggable-modal/index.ts

@@ -0,0 +1 @@
+export { default as DraggableModal } from './index.vue';

src/components/dynamic-table/components/query-form/index.vue → src/components/core/dynamic-table/components/query-form/index.vue

@@ -23,8 +23,8 @@
   import { defineComponent, reactive, toRefs, computed, ref } from 'vue';
   import { DownOutlined } from '@ant-design/icons-vue';
   import type { TableColumn } from '../../typing';
-  import SchemaForm from '@/components/JSON-schema-form/schema-form.vue';
-  import type { FormItemSchema, FormProps } from '@/components/JSON-schema-form/types/form';
+  import SchemaForm from '@/components/core/schema-form/schema-form.vue';
+  import type { FormItemSchema, FormProps } from '@/components/core/schema-form/types/form';
 
   export default defineComponent({
     name: 'QueryForm',

src/components/dynamic-table/components/table-settings/column-setting.vue → src/components/core/dynamic-table/components/table-settings/column-setting.vue

@@ -74,7 +74,7 @@
   } from '@ant-design/icons-vue';
   import { useTableContext } from '../../hooks/useTableContext';
   import { cloneDeep } from 'lodash';
-  import Checkbox from '@/components/check-box/index.vue';
+  import Checkbox from '@/components/basic/check-box/index.vue';
   import type { TableColumn } from '../../typing';
   import { useSortable } from '@/hooks/useSortable';
   import { isNullAndUnDef } from '@/utils/is';

src/components/dynamic-table/components/tool-bar/index.vue → src/components/core/dynamic-table/components/tool-bar/index.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
   import { Divider } from 'ant-design-vue';
-  import BasicHelp from '@/components/basic/BasicHelp.vue';
+  import BasicHelp from '@/components/basic/basic-help/index.vue';
   import TableSetting from '../table-settings/index.vue';
 
   defineProps({

src/components/dynamic-table/typing.ts → src/components/core/dynamic-table/typing.ts

@@ -1,6 +1,6 @@
 import type { TableColumnType, TableProps } from 'ant-design-vue';
 import type { VNode } from 'vue';
-import type { FormItemSchema } from '../JSON-schema-form/types/form';
+import type { FormItemSchema } from '../schema-form/types/form';
 import type { ActionItem } from './types/tableAction';
 
 /**

src/components/JSON-schema-form/helper.ts → src/components/core/schema-form/helper.ts

@@ -1,5 +1,5 @@
 import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
-import type { ComponentMapType } from './types/index';
+import type { ComponentMapType } from './types';
 import { isNumber } from '@/utils/is';
 import dayjs from 'dayjs';
 

src/components/JSON-schema-form/schema-form-item.vue → src/components/core/schema-form/schema-form-item.vue

@@ -34,7 +34,7 @@
   import { useItemLabelWidth } from './hooks/useLabelWidth';
   import cloneDeep from 'lodash/cloneDeep';
   import { createPlaceholderMessage } from './helper';
-  import BasicHelp from '@/components/basic/BasicHelp.vue';
+  import BasicHelp from '@/components/basic/basic-help/index.vue';
   import { AllComponentProps } from './types';
 
   const props = defineProps({