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

CHANGELOG.md

@@ -0,0 +1,36 @@
+## 0.1.1 (2022-01-03)
+
+### Bug Fixes
+
+- :art: fix some css style ([7b7f17a](https://github.com/buqiyuan/vue3-antd-admin/commit/7b7f17a0b1b7dd8ce0bc8c5022d2328d7544f5da))
+- :bug: router navigation bug ([15aec11](https://github.com/buqiyuan/vue3-antd-admin/commit/15aec11c78aedf482473a17867aaf261905afdf6))
+- :bug:角色管理权限勾选问题 ([760f21a](https://github.com/buqiyuan/vue3-antd-admin/commit/760f21a5e7cb989e456c294d80b80b4a27bec758))
+- :bug:生成路由出错问题 ([e164bf1](https://github.com/buqiyuan/vue3-antd-admin/commit/e164bf17b6a9f905c5c78b51b2a46b54ff554077))
+- :bug:修复某些权限码传参错误 ([e3a5893](https://github.com/buqiyuan/vue3-antd-admin/commit/e3a5893411ee31f8bd34b337055b09cdd656d8f4))
+- 面包屑导航和弹窗拖拽后宽度问题 ([f4a24ef](https://github.com/buqiyuan/vue3-antd-admin/commit/f4a24ef4171f1d477a50c723aeaadf66823fe686))
+- 删除一些多余的旧代码 ([16042d2](https://github.com/buqiyuan/vue3-antd-admin/commit/16042d2897acb84cf58cdb955fc16b20d4c23735))
+- 删除一些冗余的旧代码 ([ddedca2](https://github.com/buqiyuan/vue3-antd-admin/commit/ddedca2179f2740affbbd1414bd67fb290784d9a))
+- 修复菜单为目录类型时路由报错 ([7dcec87](https://github.com/buqiyuan/vue3-antd-admin/commit/7dcec87be9460c73b5651384083702257a4c9291))
+- 一些依赖版本问题 ([9494edf](https://github.com/buqiyuan/vue3-antd-admin/commit/9494edf997df84d86d2b49bacc6a3ccdbebac491))
+- **component:** :bug:修复 dynamicTable ts 类型错误 ([00fa173](https://github.com/buqiyuan/vue3-antd-admin/commit/00fa1732904c2accfc8b1917b7a428a630b8cee5))
+- mock 数据在生产环境无法使用 ([c154d1e](https://github.com/buqiyuan/vue3-antd-admin/commit/c154d1e67afa088360e5f62d2c78626c8a3c38a9))
+- **projects:** 修复搜索菜单时 title 可能为空的情况 ([377a416](https://github.com/buqiyuan/vue3-antd-admin/commit/377a41646ee5361e9e378e3f6361e1f43afa8f4f))
+- remove useModal.tsx ([24dff4e](https://github.com/buqiyuan/vue3-antd-admin/commit/24dff4e0d9654926c987c8e85ca8cb6338e1f610))
+- **request.ts:** baseUrl 错误 ([3818cb2](https://github.com/buqiyuan/vue3-antd-admin/commit/3818cb2753249aef220e21139ea32083ba4aa71e))
+- **request.ts:** baseUrl 错误 ([36a1346](https://github.com/buqiyuan/vue3-antd-admin/commit/36a1346b57f5f477ab3c68f4753117f5e833f317))
+- **request.ts:** baseUrl 路径替换正则错误 ([39c61e3](https://github.com/buqiyuan/vue3-antd-admin/commit/39c61e3fba2fe2611410f5b2072663d0ce299407))
+- rootadmin 假退出登录,避免其他人被迫下线 ([4fc62a9](https://github.com/buqiyuan/vue3-antd-admin/commit/4fc62a940dffa05511b524865bf50e9cab2eaaf6))
+
+### Features
+
+- 表格列设置工具栏 ([061c6ed](https://github.com/buqiyuan/vue3-antd-admin/commit/061c6edff076c36f3cc074eba96c5ba89d106a8f))
+- 定时任务 ([ae2615d](https://github.com/buqiyuan/vue3-antd-admin/commit/ae2615df1758e181c1a264af81a6b4d8bd804ea1))
+- 服务监控页面 ([b2bbfad](https://github.com/buqiyuan/vue3-antd-admin/commit/b2bbfadc690873cafb7ab242b32614fea1710737))
+- 全局挂载 Reflect 反射对象 ([e5ba20a](https://github.com/buqiyuan/vue3-antd-admin/commit/e5ba20ac57131e070074154fbb874e3d97720888))
+- 新增按钮权限 ([f65c95c](https://github.com/buqiyuan/vue3-antd-admin/commit/f65c95cb5282a2c64154d8cdc276bf4868e1ba38))
+- 新增国际化 ([216b32c](https://github.com/buqiyuan/vue3-antd-admin/commit/216b32ccbeb911105db86924be91ad8641cc6c7b))
+- 新增在线用户管理 ([cff7647](https://github.com/buqiyuan/vue3-antd-admin/commit/cff76475708c290086e2f25cf58c39549f8b32a8))
+- **env.d.ts:** 增加环境变量类型声明文件 ([96489b1](https://github.com/buqiyuan/vue3-antd-admin/commit/96489b15ebe82a2af3071ff7a5c4ab5425fba0b0))
+- **projects:** 全局搜索菜单功能 ([b4c9ba9](https://github.com/buqiyuan/vue3-antd-admin/commit/b4c9ba941110b1358bd16dd128208243588317ab))
+- **projects:** 搜索菜单增加大小写转换 ([7ec9777](https://github.com/buqiyuan/vue3-antd-admin/commit/7ec977795de144fbd208540d3ee14fa8868ddd9b))
+- **projects:** 图片预览，SuspenseWithError，operate-row 组件重构为 setup 语法以及引入 dayjs 中文包 ([f7aceff](https://github.com/buqiyuan/vue3-antd-admin/commit/f7aceffa9f4eaf5159f4c3d24589bdfc610613eb))

README.md

@@ -39,6 +39,10 @@ yarn install
 yarn --frozen-lockfile
 ```
 
+## 更新日志
+
+[CHANGELOG](./CHANGELOG.md)
+
 ### 赞赏
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!

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',