Merge branch 'main' into refactor/theme

.github/workflows/linter.yml

@@ -45,11 +45,21 @@ jobs:
           # Full git history is needed to get a proper list of changed files within `super-linter`
           fetch-depth: 0
 
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          registry-url: https://registry.npmjs.com/
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
       - name: Build
         run: |
-          yarn install
+          pnpm install
-          yarn lint
+          pnpm lint
-          yarn build
         env:
           VALIDATE_ALL_CODEBASE: false
           DEFAULT_BRANCH: main

.gitignore

@@ -7,8 +7,8 @@ dist-ssr
 
 yarn.lock
 npm-debug.log*
-yarn-debug.log*
+.pnpm-error.log*
-yarn-error.log*
+.pnpm-debug.log
 tests/**/coverage/
 
 # Editor directories and files
@@ -17,5 +17,3 @@ tests/**/coverage/
 *.ntvs*
 *.njsproj
 *.sln
-pnpm-lock.yaml
-yarn.lock

.husky/common.sh

@@ -3,7 +3,7 @@ command_exists () {
   command -v "$1" >/dev/null 2>&1
 }
 
-# Workaround for Windows 10, Git Bash and Yarn
+# Workaround for Windows 10, Git Bash and Pnpm
 if command_exists winpty && test -t 1; then
   exec < /dev/tty
 fi

.vscode/settings.json

@@ -9,7 +9,6 @@
   "terminal.integrated.rendererType": "dom",
   "editor.formatOnType": true,
   "editor.formatOnSave": true,
-  "window.zoomLevel": 1,
   "javascript.updateImportsOnFileMove.enabled": "always",
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

README.en-US.md

@@ -59,20 +59,20 @@ git clone https://github.com.cnpmjs.org/xiaoxian521/vue-pure-admin.git
 ```bash
 cd vue-pure-admin
 
-yarn install
+pnpm install
 
 ```
 
 - run
 
 ```bash
-yarn serve
+pnpm serve
 ```
 
 - build
 
 ```bash
-yarn build
+pnpm build
 ```
 
 ## Change Log

README.md

@@ -59,20 +59,20 @@ git clone https://github.com.cnpmjs.org/xiaoxian521/vue-pure-admin.git
 ```bash
 cd vue-pure-admin
 
-yarn install
+pnpm install
 
 ```
 
 - 运行
 
 ```bash
-yarn serve
+pnpm serve
 ```
 
 - 打包
 
 ```bash
-yarn build
+pnpm build
 ```
 
 ## 更新日志

package.json

@@ -2,26 +2,43 @@
   "name": "vue-pure-admin",
   "version": "2.1.0",
   "private": true,
+  "packageManager": "pnpm@6.20.1",
+  "workspaces": [
+    "build/**",
+    "mock/**",
+    "src/**",
+    "types/**"
+  ],
+  "engines": {
+    "node": ">= 16",
+    "pnpm": ">= 6"
+  },
   "scripts": {
     "dev": "cross-env --max_old_space_size=4096 vite",
-    "serve": "yarn dev",
+    "serve": "pnpm dev",
     "build": "rimraf dist && cross-env vite build",
     "preview": "vite preview",
-    "preview:build": "yarn build && vite preview",
+    "preview:build": "pnpm build && vite preview",
-    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && yarn cache clean && yarn",
+    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
     "lint:pretty": "pretty-quick --staged",
-    "lint": "yarn lint:eslint && yarn lint:prettier && yarn lint:stylelint && yarn lint:pretty",
+    "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint && pnpm lint:pretty",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "preinstall": "npx only-allow pnpm"
   },
+  "browserslist": [
+    "> 1%",
+    "not ie 11",
+    "not op_mini all"
+  ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons": "^0.0.11",
-    "@logicflow/core": "^0.7.1",
+    "@logicflow/core": "0.7.1",
-    "@logicflow/extension": "^0.7.1",
+    "@logicflow/extension": "0.7.1",
     "@vueuse/core": "^6.7.1",
     "@vueuse/motion": "^2.0.0-beta.4",
     "animate.css": "^4.1.1",
@@ -45,61 +62,61 @@
     "responsive-storage": "^1.0.11",
     "sortablejs": "1.13.0",
     "typescript-cookie": "^1.0.0",
-    "v-contextmenu": "^3.0.0",
+    "v-contextmenu": "3.0.0",
     "vue": "^3.2.20",
     "vue-i18n": "^9.2.0-beta.3",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.11",
     "vue-types": "^4.1.0",
-    "vuedraggable": "^4.1.0",
+    "vuedraggable": "4.1.0",
-    "vxe-table": "^4.0.30",
+    "vxe-table": "4.0.30",
-    "wangeditor": "^4.7.7",
+    "wangeditor": "4.7.7",
-    "xe-ajax": "^4.0.5",
+    "xe-ajax": "4.0.5",
-    "xe-utils": "^3.4.0",
+    "xe-utils": "3.4.0",
-    "xgplayer": "^2.31.1"
+    "xgplayer": "2.28.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.1.0",
+    "@commitlint/cli": "13.1.0",
-    "@commitlint/config-conventional": "^13.1.0",
+    "@commitlint/config-conventional": "13.1.0",
-    "@types/element-resize-detector": "^1.1.3",
+    "@types/element-resize-detector": "1.1.3",
-    "@types/mockjs": "^1.0.3",
+    "@types/mockjs": "1.0.3",
-    "@types/node": "^14.14.14",
+    "@types/node": "14.14.14",
-    "@types/nprogress": "^0.2.0",
+    "@types/nprogress": "0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/eslint-plugin": "4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
+    "@typescript-eslint/parser": "4.31.0",
-    "@vitejs/plugin-vue": "^1.6.0",
+    "@vitejs/plugin-vue": "1.6.0",
-    "@vitejs/plugin-vue-jsx": "^1.1.7",
+    "@vitejs/plugin-vue-jsx": "1.1.7",
-    "@vue/compiler-sfc": "^3.2.20",
+    "@vue/compiler-sfc": "3.2.20",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-prettier": "6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/eslint-config-typescript": "7.0.0",
     "@zougt/vite-plugin-theme-preprocessor": "^1.3.4",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "10.2.4",
-    "babel-plugin-transform-remove-console": "^6.9.4",
+    "babel-plugin-transform-remove-console": "6.9.4",
-    "chalk": "^2.4.2",
+    "chalk": "2.4.2",
-    "cross-env": "^7.0.3",
+    "cross-env": "7.0.3",
-    "eslint": "^7.30.0",
+    "eslint": "7.30.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-vue": "^7.17.0",
+    "eslint-plugin-vue": "7.17.0",
-    "husky": "^7.0.2",
+    "husky": "7.0.2",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "11.1.2",
-    "postcss": "^8.2.6",
+    "postcss": "8.2.6",
-    "postcss-import": "^14.0.0",
+    "postcss-import": "14.0.0",
-    "prettier": "^2.3.2",
+    "prettier": "2.3.2",
-    "pretty-quick": "^3.1.1",
+    "pretty-quick": "3.1.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "3.0.2",
-    "sass": "^1.38.0",
+    "sass": "1.38.0",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "12.1.0",
-    "stylelint": "^13.13.1",
+    "stylelint": "13.13.1",
-    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-prettier": "8.0.2",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard": "22.0.0",
-    "stylelint-order": "^4.1.0",
+    "stylelint-order": "4.1.0",
-    "typescript": "^4.4.2",
+    "typescript": "4.4.2",
     "unplugin-element-plus": "^0.1.0",
-    "vite": "^2.6.11",
+    "vite": "latest",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^1.2.1",
     "vite-svg-loader": "^2.2.0",
-    "vue-eslint-parser": "^7.10.0"
+    "vue-eslint-parser": "7.10.0"
   },
   "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
   "author": "xiaoxian521",

pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+#
+packages:
+  - "build/**"
+  - "mock/**"
+  - "src/**"
+  - "types/**"

src/layout/components/sidebar/sidebarItem.vue

@@ -3,11 +3,13 @@ import path from "path";
 import { storageLocal } from "/@/utils/storage";
 import { PropType, ref, nextTick } from "vue";
 import { childrenType } from "../../types";
+import { useAppStoreHook } from "/@/store/modules/app";
 import Icon from "/@/components/ReIcon/src/Icon.vue";
 const layout = ref(
   storageLocal.getItem("responsive-layout") || "vertical-dark"
 );
 const menuMode = layout.value.layout.split("-")[0] === "vertical";
+const pureApp = useAppStoreHook();
 
 const props = defineProps({
   item: {
@@ -92,7 +94,15 @@ function resolvePath(routePath) {
         ></component>
       </el-icon>
       <template #title>
-        <div style="display: flex; align-items: center; overflow: hidden">
+        <div
+          style="
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            overflow: hidden;
+          "
+        >
           <span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span>
           <el-tooltip
             v-else
@@ -103,7 +113,11 @@ function resolvePath(routePath) {
             <template #content> {{ $t(onlyOneChild.meta.title) }} </template>
             <span
               ref="menuTextRef"
-              style="overflow: hidden; text-overflow: ellipsis"
+              :style="{
+                width: pureApp.sidebar.opened ? '125px' : '',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+              }"
               @mouseover="hoverMenu(onlyOneChild)"
             >
               {{ $t(onlyOneChild.meta.title) }}
@@ -134,17 +148,17 @@ function resolvePath(routePath) {
         v-else
         placement="top"
         :offset="-10"
-        :disabled="!props.item.showTooltip"
+        :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
       >
         <template #content> {{ $t(props.item.meta.title) }} </template>
         <div
           ref="menuTextRef"
-          style="
+          :style="{
-            display: inline-block;
+            width: pureApp.sidebar.opened ? '125px' : '',
-            overflow: hidden;
+            display: 'inline-block',
-            text-overflow: ellipsis;
+            overflow: 'hidden',
-            width: 125px;
+            textOverflow: 'ellipsis'
-          "
+          }"
           @mouseover="hoverMenu(props.item)"
         >
           <span style="overflow: hidden; text-overflow: ellipsis">

src/style/sidebar.scss

@@ -123,6 +123,7 @@
     .el-menu-item,
     .el-sub-menu__title {
       color: $menuText;
+      padding: 0 16px 0 40px;
 
       &:hover {
         color: $menuTitleHover !important;

src/views/editor/index.vue

@@ -36,6 +36,10 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
+.main-content {
+  margin: 40px;
+}
+
 :deep(.w-e-text-container) {
   z-index: 99 !important;
 }