opimize code and func

.husky/pre-commit

@@ -3,6 +3,6 @@
 
 #推送之前运行eslint检查
 npm  run lint
-##推送之前运行单元测试检查
+#推送之前运行单元测试检查
 #npm run test:unit
 

README-zh_CN.md

@@ -1,4 +1,4 @@
-# vue3-admin-template
+# vue3-admin-ts
 
 **中文** | [English](./README.md)
 
@@ -20,13 +20,13 @@
 
 ## 线上体验
 
-[github address](https://github.com/jzfai/vue3-admin-template.git)
+[github address](https://github.com/jzfai/vue3-admin-ts.git)
 
-[Access address](https://github.jzfai.top/vue3-admin-template)
+[Access address](https://github.jzfai.top/vue3-admin-ts)
 
-github 地址：  https://github.com/jzfai/vue3-admin-template.git
+github 地址：  https://github.com/jzfai/vue3-admin-ts.git
 
-国内体验地址：https://github.jzfai.top/vue3-admin-template
+国内体验地址：https://github.jzfai.top/vue3-admin-ts
 
 
 
@@ -35,7 +35,7 @@ github 地址：  https://github.com/jzfai/vue3-admin-template.git
 
 框架有js，ts，plus和electron版本
 
-- js版本：[vue3-element-admin](https://github.com/jzfai/vue3-admin-template.git)
+- js版本：[vue3-admin-template](https://github.com/jzfai/vue3-admin-template.git)
 - ts版本：[vue3-element-ts](https://github.com/jzfai/vue3-admin-ts.git)
 - js实例参考plus版本：[vue3-element-plus](https://github.com/jzfai/vue3-admin-plus.git)
 - electron版本：[vue3-element-electron](https://github.com/jzfai/vue3-admin-electron.git)
@@ -50,10 +50,10 @@ github 地址：  https://github.com/jzfai/vue3-admin-template.git
 
 ```bash
 # 克隆项目
-git clone https://github.com/jzfai/vue3-admin-template.git
+git clone https://github.com/jzfai/vue3-admin-ts.git
 
 # 进入项目目录
-cd  vue3-admin-template
+cd  vue3-admin-ts
 
 # pnpm address https://pnpm.io/zh/motivation
 # 安装依赖(建议用pnpm)

README.md

@@ -1,4 +1,4 @@
-# vue3-admin-template
+# vue3-admin-ts
 
 **English** | [中文](./README-zh_CN.md)
 
@@ -19,36 +19,34 @@ suggestion the Node.js >= 16.0.0。
 
 ## Online experience
 
-[github address](https://github.com/jzfai/vue3-admin-template.git)
+[github address](https://github.com/jzfai/vue3-admin-ts.git)
 
-[Access address](https://github.jzfai.top/vue3-admin-template)
+[Access address](https://github.jzfai.top/vue3-admin-ts)
 
 
-国内体验地址：https://github.jzfai.top/vue3-admin-template
+国内体验地址：https://github.jzfai.top/vue3-admin-ts
 
-github 地址：https://github.com/jzfai/vue3-admin-template.git
+github 地址：https://github.com/jzfai/vue3-admin-ts.git
 
 
 
 ## Related items
 
 The framework is available in js, ts , plus and electron versions
-- js version：[vue3-element-admin](https://github.com/jzfai/vue3-admin-template.git)
+- js version：[vue3-admin-template](https://github.com/jzfai/vue3-admin-template.git) -- basic version
 - ts version：[vue3-element-ts](https://github.com/jzfai/vue3-admin-ts.git)
 - js version for plus：[vue3-element-plus](https://github.com/jzfai/vue3-admin-plus.git)
-- js version for electron：[vue3-element-electron](https://github.com/jzfai/vue3-admin-electron.git)
-- react version： [react-admin-template](https://github.com/jzfai/react-admin-template.git)
 - java Micro-service background data：[micro-service-plus](https://github.com/jzfai/micro-service-plus)
 > development and  experience：two words  Really fragrant！！！！！
 
 ## Build Setup
 
 ```bash
 # clone the project
-git clone https://github.com/jzfai/vue3-admin-template.git
+git clone https://github.com/jzfai/vue3-admin-ts.git
 
 # enter the project directory
-cd vue3-admin-template
+cd vue3-admin-ts
 
 # pnpm address https://pnpm.io/zh/motivation
 # install dependency(Recommend use pnpm)

eslintrc/eslint-config.js

@@ -6,6 +6,10 @@ module.exports = defineConfig({
     browser: true,
     node: true
   },
+  globals: {
+    defineOptions: true,
+    $ref: true
+  },
   plugins: ['@typescript-eslint', 'prettier', 'unicorn'],
   extends: [
     'eslint:recommended',

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "vue3-admin-template",
-  "version": "2.0.0-rc1",
+  "name": "vue3-admin-ts",
+  "version": "2.0.0-rc2",
   "license": "MIT",
   "author": "kuanghua",
   "packageManager": "[email protected]",
@@ -18,6 +18,7 @@
     "test:cov": "vue-cli-service test:unit --coverage",
     "test:majestic": "majestic",
     "vitest": "vitest --ui",
+    "tsc-check": "tsc",
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
@@ -35,13 +36,15 @@
     "pinia-plugin-persistedstate": "2.3.0",
     "vue": "^3.2.37",
     "vue-clipboard3": "^2.0.0",
+    "vue-i18n": "9.1.10",
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.16.3",
     "@types/echarts": "4.9.7",
     "@types/mockjs": "1.0.6",
     "@types/node": "^17.0.35",
+    "@types/path-browserify": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "5.30.0",
     "@typescript-eslint/parser": "5.30.0",
     "@vitejs/plugin-legacy": "^2.2.0",

src/App.vue

@@ -1,18 +1,20 @@
 <template>
-  <el-config-provider :locale="locale" namespace="el" size="small">
+  <el-config-provider :locale="locale" namespace="el" :size="size">
     <router-view />
   </el-config-provider>
 </template>
-<script setup>
+<script setup lang="ts">
 import { onBeforeMount, onMounted } from 'vue'
 import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { useBasicStore } from '@/store/basic'
+import { useConfigStore } from '@/store/config'
 import { useErrorLog } from '@/hooks/use-error-log'
-const locale = $ref(zhCn) //中文
+const locale = ref(zhCn) //中文
 // import en from 'element-plus/lib/locale/lang/en'
-// let locale = $ref(en) //english
+// let locale = ref(en) //english
 const { settings } = storeToRefs(useBasicStore())
+const { size } = storeToRefs(useConfigStore())
 onBeforeMount(() => {
   //set tmp token when setting isNeedLogin false
   if (!settings.value.isNeedLogin) useBasicStore().setToken(settings.value.tmpToken)

src/components/ElSvgIcon.vue

@@ -4,7 +4,7 @@
   </el-icon>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import * as ElSvg from '@element-plus/icons-vue'
 const props = defineProps({
   name: {

src/components/TestUnit.vue

@@ -2,7 +2,7 @@
   <div>TestUnit.vue</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const props = defineProps({
   msg: {
     require: true,

src/directives/index.js

@@ -1,4 +1,4 @@
-import buttonCodes from './button-codes.js'
+import buttonCodes from './button-codes'
 import codesPermission from './codes-permission'
 import rolesPermission from './roles-permission'
 export default function (app) {

src/hooks/use-common.js

@@ -1,5 +1,3 @@
-import { reactive, toRefs } from 'vue'
-
 //复制文本
 import useClipboard from 'vue-clipboard3'
 import { ElMessage } from 'element-plus'
@@ -13,41 +11,26 @@ export const sleepTimeout = (time) => {
   })
 }
 
-export const useCommon = () => {
-  const state = reactive({
-    totalPage: 0,
-    startEndArr: [],
-    searchForm: {},
-    dialogTitle: '',
-    detailDialog: false
-  })
-  return {
-    ...toRefs(state)
-  }
-}
-
 //深拷贝
-export function cloneDeep(source, hash = new WeakMap()) {
-  if (typeof source !== 'object' || source === null) {
-    return source
-  }
-  if (hash.has(source)) {
-    return hash.get(source)
-  }
-  const target = Array.isArray(source) ? [] : {}
-  Reflect.ownKeys(source).forEach((key) => {
-    const val = source[key]
-    if (typeof val === 'object' && val != null) {
-      target[key] = cloneDeep(val, hash)
-    } else {
-      target[key] = val
-    }
-  })
-  return target
+export function cloneDeep(value) {
+  return JSON.parse(JSON.stringify(value))
 }
 
 const { toClipboard } = useClipboard()
 export const copyValueToClipboard = (value) => {
   toClipboard(JSON.stringify(value))
   ElMessage.success('复制成功')
 }
+
+// i18n language  match title
+import { i18n } from '@/lang'
+const { t, te } = i18n.global
+import langEn from '@/lang/en'
+export const langTitle = (title) => {
+  for (const key of Object.keys(langEn)) {
+    if (te(`${key}.${title}`)) {
+      return t(`${key}.${title}`)
+    }
+  }
+  return title
+}

src/hooks/use-element.js

@@ -140,15 +140,15 @@ export const elMessage = (message, type) => {
  * 调用后通过 loadingId.close() 进行关闭
  * */
 let loadingId = null
-export const elLoading = () => {
+export const elLoading = (msg) => {
   loadingId = ElLoading.service({
     lock: true,
-    text: '数据载入中',
-    spinner: 'el-icon-loading',
+    text: msg || '数据载入中',
+    // spinner: 'el-icon-loading',
     background: 'rgba(0, 0, 0, 0.1)'
   })
 }
-export const closeLoading = () => {
+export const closeElLoading = () => {
   loadingId.close()
 }
 /*
@@ -201,7 +201,7 @@ export const elConfirm = (title, message) => {
 }
 
 /* 级联*/
-const cascaderKey = ref(null)
+const cascaderKey = ref()
 export const casHandleChange = () => {
   // 解决目前级联选择器搜索输入报错问题
   cascaderKey.value += cascaderKey.value

src/hooks/use-permission.js

@@ -3,18 +3,19 @@
  * @param:menuList 异步路由数组
  * return 过滤后的异步路由
  */
+// @ts-ignore
 import NProgress from 'nprogress'
 import Layout from '@/layout/index.vue'
 /*
  * 路由操作
  * */
 import router, { asyncRoutes, constantRoutes, roleCodeRoutes } from '@/router'
-
 //进度条
 import 'nprogress/nprogress.css'
 import { useBasicStore } from '@/store/basic'
-import { cloneDeep } from '@/hooks/use-common'
+
 const buttonCodes = [] //按钮权限
+
 export const filterAsyncRoutesByMenuList = (menuList) => {
   const filterRouter = []
   menuList.forEach((route) => {
@@ -34,9 +35,10 @@ export const filterAsyncRoutesByMenuList = (menuList) => {
   return filterRouter
 }
 const getRouteItemFromReqRouter = (route) => {
-  const tmp = { meta: {} }
+  const tmp = { meta: { title: '' } }
   const routeKeyArr = ['path', 'component', 'redirect', 'alwaysShow', 'name', 'hidden']
   const metaKeyArr = ['title', 'activeMenu', 'elSvgIcon', 'icon']
+  // @ts-ignore
   const modules = import.meta.glob('../views/**/**.vue')
   //generator routeKey
   routeKeyArr.forEach((fItem) => {
@@ -60,12 +62,12 @@ const getRouteItemFromReqRouter = (route) => {
   })
   //generator metaKey
   metaKeyArr.forEach((fItem) => {
-    if (route[fItem]) tmp.meta[fItem] = route[fItem]
+    if (route[fItem] && tmp.meta) tmp.meta[fItem] = route[fItem]
   })
   //route extra insert
   if (route.extra) {
     Object.entries(route.extra.parse(route.extra)).forEach(([key, value]) => {
-      if (key === 'meta') {
+      if (key === 'meta' && tmp.meta) {
         tmp.meta[key] = value
       } else {
         tmp[key] = value
@@ -127,16 +129,15 @@ function hasCodePermission(codes, routeItem) {
 }
 //过滤异步路由
 export function filterAsyncRouter({ menuList, roles, codes }) {
-  const routerParams = cloneDeep(roleCodeRoutes)
   const basicStore = useBasicStore()
   let accessRoutes = []
   const permissionMode = basicStore.settings?.permissionMode
   if (permissionMode === 'rbac') {
     accessRoutes = filterAsyncRoutesByMenuList(menuList) //by menuList
   } else if (permissionMode === 'roles') {
-    accessRoutes = filterAsyncRoutesByRoles(routerParams, roles) //by roles
+    accessRoutes = filterAsyncRoutesByRoles(roleCodeRoutes, roles) //by roles
   } else {
-    accessRoutes = filterAsyncRouterByCodes(routerParams, codes) //by codes
+    accessRoutes = filterAsyncRouterByCodes(roleCodeRoutes, codes) //by codes
   }
   accessRoutes.forEach((route) => router.addRoute(route))
   asyncRoutes.forEach((item) => router.addRoute(item))