Merge branch 'main' into feat_element_icon

2025-04-22 03:49:19 +08:00 · 2022-09-30 17:32:38 +08:00 · 2022-09-30 17:32:38 +08:00 · f272a713f4
commit f272a713f4
parent 66cbf30d2b 80fc1c21e8
15 changed files with 609 additions and 464 deletions
--- a/README.md
+++ b/README.md
@ -1,5 +1,9 @@
 ## ⚡️ 简介

+<p align="center">
+  <span>中文 | <a href="./README_en.md">English</a></span>
+</p>
+
 一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术.

 模板代码是从 [v3-admin](https://github.com/un-pany/v3-admin) 迁移而来，脚手架从 Vue-Cli 5.x 切换到了 Vite 3.x，并作了一些繁琐的适配.
--- a/README_en.md
+++ b/README_en.md
@ -0,0 +1,132 @@
+## ⚡ Introduction
+
+<p align="center">
+  <span><a href="./README.md">中文</a> | English</span>
+</p>
+v3-admin-vite is a free and open source middle and background management system basic solution, based on mainstream framework such as Vue3, TypeScript, Element-Plus, Pinia and Vite.
+
+The template code was migrated from [v3-admin ](https://github.com/un-pany/v3-admin), the scaffolding was switched from Vue-Cli 5.x to Vite 3.x, and some tedious adaptations were made.
+
+We recommend everyone to use this Vite version! The focus of the future will be shifted from [v3-admin ](https://github.com/un-pany/v3-admin) to this repository.
+
+- Electron desktop edition: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
+
+## 🚀 Characteristics
+
+- **Vue3**：The latest Vue3 composition API using Vue3 + script setup
+- **Element Plus**：Vue3 version of Element UI
+- **Pinia**: An alternative to Vuex in Vue3
+- **Vite**：Really fast
+- **Vue Router**：router
+- **TypeScript**：JavaScript With Syntax For Types
+- **PNPM**：Faster, disk space saving package management tool
+- **Scss**：Consistent with Element Plus
+- **CSS variable**：Mainly controls the layout and color of the item
+- **ESlint**：Code verification
+- **Prettier**： Code formatting
+- **Axios**: Promise based HTTP client（encapsulated）
+- **UnoCSS**: Real-time atomized CSS engine with high performance and flexibility
+- **Annotation**：Each configuration item is written with as detailed comments as possible
+
+## 🔧 Functions
+
+- **User management**: log in, log out of the demo
+- **Authority management**: Built-in page permissions (dynamic routing), instruction permissions, permission functions
+- **Multiple Environments**: Development、staging、production
+- **Multiple themes**: normal and dark theme modes
+- **Error page**: 403、404
+- **Dashboard**: Display different Dashboard pages according to different users
+- **Other functions**：SVG、Dynamic Sidebar、Dynamic Breadcrumb Navigation、Tabbed Navigation、Screenfull、Adaptive Shrink Sidebar (Mobile Compatible)
+
+## 📚 Document
+
+[掘金 Juijin](https://juejin.cn/post/7089377403717287972)
+
+## Gitee repository
+
+[Gitee](https://gitee.com/un-pany/v3-admin-vite)
+
+## preview
+
+| Location     | account             | Link                                            |
+| ------------ | ------------------- | ----------------------------------------------- |
+| github-pages | `admin` or `editor` | [Link](https://un-pany.github.io/v3-admin-vite) |
+
+## 🚀 Development
+
+```bash
+# configure
+1. installation of the recommended plugins in the .vscode directory
+3. node version 16+
+4. pnpm version 7.x
+
+# clone
+git clone https://github.com/un-pany/v3-admin-vite.git
+
+# enter the project directory
+cd v3-admin-vite
+
+# install dependencies
+pnpm i
+
+# initialize husky
+pnpm prepare
+
+# start the service
+pnpm dev
+```
+
+## ✔️ Preview
+
+```bash
+# stage environment
+pnpm preview:stage
+
+# prod environment
+pnpm preview:prod
+```
+
+## 📦️ Multi-environment packaging
+
+```bash
+# build the stage environment
+pnpm build:stage
+
+# build the prod environment
+pnpm build:prod
+```
+
+## 🔧 Code formatting check
+
+```bash
+pnpm lint
+```
+
+## Git commit specification reference
+
+- `feat` add new functions
+- `fix` Fix issues/bugs
+- `perf` Optimize performance
+- `style` Change the code style without affecting the running result
+- `refactor` Re-factor code
+- `revert` Undo changes
+- `test` Test related, does not involve changes to business code
+- `docs` Documentation and Annotation
+- `chore` Updating dependencies/modifying scaffolding configuration, etc.
+- `workflow` Work flow Improvements
+- `ci` CICD
+- `types` Type definition
+- `wip` In development
+
+## group
+
+QQ group：1014374415（left）&& add me on WeChat，Invite you to join WeChat group（right）
+
+![qq.png](https://github.com/un-pany/v3-admin-vite/blob/main/src/assets/docs/qq.png)
+![wechat.png](https://github.com/un-pany/v3-admin-vite/blob/main/src/assets/docs/wechat.png)
+
+## 📄 License
+
+[MIT](https://github.com/un-pany/v3-admin-vite/blob/main/LICENSE)
+
+Copyright (c) 2022 pany
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "v3-admin-vite",
-  "version": "3.2.1",
+  "version": "3.2.2",
  "description": "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术.",
  "author": {
    "name": "pany",
@ -35,21 +35,21 @@
    "path-to-regexp": "^6.2.1",
    "pinia": "^2.0.22",
    "screenfull": "^6.0.2",
-    "vue": "^3.2.39",
+    "vue": "^3.2.40",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@types/js-cookie": "^3.0.2",
    "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.7.18",
+    "@types/node": "^18.7.23",
    "@types/nprogress": "^0.2.0",
    "@types/path-browserify": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
    "@vitejs/plugin-vue": "^3.1.0",
    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.1",
-    "eslint": "^8.23.1",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "eslint": "^8.24.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.5.1",
    "husky": "^8.0.1",
@ -57,10 +57,11 @@
    "prettier": "^2.7.1",
    "sass": "^1.55.0",
    "terser": "^5.15.0",
-    "typescript": "^4.8.3",
-    "unocss": "^0.45.22",
-    "vite": "^3.1.3",
+    "typescript": "^4.8.4",
+    "unocss": "^0.45.26",
+    "vite": "^3.1.4",
    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-svg-loader": "^3.6.0",
    "vue-eslint-parser": "^9.1.0",
    "vue-tsc": "^0.40.13"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/assets/error-page/403.svg
+++ b/src/assets/error-page/403.svg
--- a/src/assets/error-page/404.svg
+++ b/src/assets/error-page/404.svg
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@ -112,7 +112,7 @@ const resolvePath = (routePath: string) => {
 }
 .simple-mode {
  &.first-level {
-    ::v-deep(.el-sub-menu) {
+    :deep(.el-sub-menu) {
      .el-sub-menu__icon-arrow {
        display: none;
      }
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@ -66,7 +66,7 @@ const isCollapse = computed(() => {
    position: absolute;
    top: 0;
    left: 0;
-    width: 4px;
+    width: 2px;
    height: 100%;
    background-color: var(--v3-sidebar-menu-tip-line-bg-color);
  }
@ -80,7 +80,7 @@ const isCollapse = computed(() => {

 .el-scrollbar {
  height: 100%;
-  ::v-deep(.scrollbar-wrapper) {
+  :deep(.scrollbar-wrapper) {
    // 限制水平宽度
    overflow-x: hidden !important;
    .el-scrollbar__view {
@ -88,7 +88,7 @@ const isCollapse = computed(() => {
    }
  }
  // 滚动条
-  ::v-deep(.el-scrollbar__bar) {
+  :deep(.el-scrollbar__bar) {
    &.is-horizontal {
      // 隐藏水平滚动条
      display: none;
@ -102,11 +102,12 @@ const isCollapse = computed(() => {
  width: 100% !important;
 }

-::v-deep(.el-menu-item),
-::v-deep(.el-sub-menu__title),
-::v-deep(.el-sub-menu .el-menu-item) {
+:deep(.el-menu-item),
+:deep(.el-sub-menu__title),
+:deep(.el-sub-menu .el-menu-item) {
  height: var(--v3-sidebar-menu-item-height);
  line-height: var(--v3-sidebar-menu-item-height);
+  &.is-active,
  &:hover {
    background-color: var(--v3-sidebar-menu-hover-bg-color);
  }
@ -116,14 +117,14 @@ const isCollapse = computed(() => {
  }
 }

-::v-deep(.el-menu-item) {
+:deep(.el-menu-item) {
  &.is-active {
    @include tip-line;
  }
 }

 .el-menu--collapse {
-  ::v-deep(.el-sub-menu) {
+  :deep(.el-sub-menu) {
    &.is-active {
      .el-sub-menu__title {
        color: var(--v3-sidebar-menu-active-text-color) !important;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -17,6 +17,21 @@ export const constantRoutes: RouteRecordRaw[] = [
      }
    ]
  },
+  {
+    path: "/403",
+    component: () => import("@/views/error-page/403.vue"),
+    meta: {
+      hidden: true
+    }
+  },
+  {
+    path: "/404",
+    component: () => import("@/views/error-page/404.vue"),
+    meta: {
+      hidden: true
+    },
+    alias: "/:pathMatch(.*)*"
+  },
  {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
@ -182,33 +197,12 @@ export const asyncRoutes: RouteRecordRaw[] = [
    ]
  },
  {
-    path: "/:pathMatch(.*)*", // 必须将 'ErrorPage' 路由放在最后, Must put the 'ErrorPage' route at the end
-    component: Layout,
+    path: "/:pathMatch(.*)*", // Must put the 'ErrorPage' route at the end, 必须将 'ErrorPage' 路由放在最后
    redirect: "/404",
    name: "ErrorPage",
    meta: {
-      title: "错误页面",
-      svgIcon: "404",
      hidden: true
-    },
-    children: [
-      {
-        path: "403",
-        component: () => import("@/views/error-page/403.vue"),
-        name: "403",
-        meta: {
-          title: "403"
-        }
-      },
-      {
-        path: "404",
-        component: () => import("@/views/error-page/404.vue"),
-        name: "404",
-        meta: {
-          title: "404"
-        }
-      }
-    ]
+    }
  }
 ]

--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@ -50,8 +50,8 @@
          border-color: $border-color !important;
        }
      }
+      // 右键菜单
      .contextmenu {
-        // 右键菜单
        background-color: lighten($theme-bg-color, 8%);
        color: $font-color;
        li:hover {
@ -86,6 +86,12 @@
    }
  }

+  /** Error-Page 页面 */
+
+  .error-page {
+    background-color: $theme-bg-color;
+  }
+
  /** Element-Plus */

  // 侧边栏的 item 的 popper
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@ -12,12 +12,12 @@
  --v3-sidebar-hide-width: 54px;
  --v3-sidebar-menu-item-height: 60px;
  --v3-sidebar-menu-tip-line-bg-color: #66b1ff;
-  --v3-sidebar-menu-bg-color: #152d3d;
+  --v3-sidebar-menu-bg-color: #001428;
  --v3-sidebar-menu-hover-bg-color: #ffffff10;
  --v3-sidebar-menu-text-color: #c0c4cc;
  --v3-sidebar-menu-active-text-color: #ffffff;
  /** SidebarLogo 组件 */
-  --v3-sidebarlogo-bg-color: #0c202b;
+  --v3-sidebarlogo-bg-color: #001428;
  /** TagsView 组件 */
  --v3-tagsview-height: 34px;
  --v3-tagsview-tag-text-color: #495060;
@ -30,5 +30,5 @@
  --v3-tagsview-tag-icon-hover-bg-color: #00000030;
  --v3-tagsview-tag-icon-hover-color: #ffffff;
  /** RightPanel 组件  */
-  --v3-rightpanel-button-bg-color: #152d3d;
+  --v3-rightpanel-button-bg-color: #001428;
 }
--- a/src/views/error-page/403.vue
+++ b/src/views/error-page/403.vue
@ -1,19 +1,16 @@
+<script lang="ts" setup>
+import Svg403 from "@/assets/error-page/403.svg?component" // vite-svg-loader 插件的功能
+</script>
+
 <template>
-  <div>
-    <p class="code">403</p>
-    <p class="describe">你没有权限去该页面</p>
+  <div class="error-page">
+    <Svg403 class="error-page-svg" />
+    <router-link to="/">
+      <el-button type="primary">回到首页</el-button>
+    </router-link>
  </div>
 </template>

 <style lang="scss" scoped>
-.code {
-  text-align: center;
-  font-size: 140px;
-  margin-bottom: 50px;
-}
-
-.describe {
-  text-align: center;
-  font-size: 40px;
-}
+@import "./index.scss";
 </style>
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@ -1,19 +1,16 @@
+<script lang="ts" setup>
+import Svg404 from "@/assets/error-page/404.svg?component" // vite-svg-loader 插件的功能
+</script>
+
 <template>
-  <div>
-    <p class="code">404</p>
-    <p class="describe">未找到你想要的页面</p>
+  <div class="error-page">
+    <Svg404 class="error-page-svg" />
+    <router-link to="/">
+      <el-button type="primary">回到首页</el-button>
+    </router-link>
  </div>
 </template>

 <style lang="scss" scoped>
-.code {
-  text-align: center;
-  font-size: 140px;
-  margin-bottom: 50px;
-}
-
-.describe {
-  text-align: center;
-  font-size: 40px;
-}
+@import "./index.scss";
 </style>
--- a/src/views/error-page/index.scss
+++ b/src/views/error-page/index.scss
@ -0,0 +1,11 @@
+.error-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &-svg {
+    width: 400px;
+    margin-bottom: 50px;
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -3,6 +3,7 @@ import type { ConfigEnv, UserConfigExport } from "vite"
 import path, { resolve } from "path"
 import vue from "@vitejs/plugin-vue"
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
+import svgLoader from "vite-svg-loader"
 import UnoCSS from "unocss/vite"

 /** 配置项文档：https://cn.vitejs.dev/config */
@ -65,6 +66,8 @@ export default (configEnv: ConfigEnv): UserConfigExport => {
    /** Vite 插件 */
    plugins: [
      vue(),
+      /** 将 SVG 静态图转化为 Vue 组件 */
+      svgLoader(),
      /** SVG */
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],