'admin-21.03.07:新增图片裁剪、富文本、城市多级联动，修复错误界面图片404问题等'

README.md

@@ -113,6 +113,8 @@ cnpm run build
 - <a href="https://github.com/sass/sass" target="_blank">sass</a>
 - <a href="https://github.com/microsoft/TypeScript" target="_blank">typescript</a>
 - <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
+- <a href="https://github.com/wangeditor-team/wangEditor" target="_blank">wangeditor</a>
+- <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">cropperjs</a>
 
 #### 特别感谢
 

package.json

@@ -9,6 +9,7 @@
     "axios": "^0.21.1",
     "clipboard": "^2.0.6",
     "countup.js": "^2.0.7",
+    "cropperjs": "^1.5.11",
     "echarts": "^5.0.2",
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "^1.0.2-beta.33",
@@ -18,7 +19,8 @@
     "sortablejs": "^1.13.0",
     "vue": "^3.0.5",
     "vue-router": "^4.0.2",
-    "vuex": "^4.0.0-rc.2"
+    "vuex": "^4.0.0-rc.2",
+    "wangeditor": "^4.6.8"
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
@@ -34,4 +36,4 @@
     "typescript": "^4.2.3",
     "vite": "^2.0.5"
   }
-}
+}

src/components/cropper/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <el-dialog title="更换头像" v-model="isShowDialog" width="769px">
+      <div class="cropper-warp">
+        <div class="cropper-warp-left">
+          <img :src="cropperImg" class="cropper-warp-left-img" />
+        </div>
+        <div class="cropper-warp-right">
+          <div class="cropper-warp-right-title">预览</div>
+          <div class="cropper-warp-right-item">
+            <div class="cropper-warp-right-value">
+              <img :src="cropperImgBase64" class="cropper-warp-right-value-img" />
+            </div>
+            <div class="cropper-warp-right-label">100 x 100</div>
+          </div>
+          <div class="cropper-warp-right-item">
+            <div class="cropper-warp-right-value">
+              <img :src="cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
+            </div>
+            <div class="cropper-warp-right-label">50 x 50</div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel" size="small">取 消</el-button>
+          <el-button type="primary" @click="onSubmit" size="small">更 换</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, nextTick } from "vue";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+export default {
+  name: "cropperIndex",
+  setup() {
+    const state = reactive({
+      isShowDialog: false,
+      cropperImg: "",
+      cropperImgBase64: "",
+    });
+    // 打开弹窗
+    const openDialog = (imgs) => {
+      state.cropperImg = imgs;
+      state.isShowDialog = true;
+      nextTick(() => {
+        initCropper();
+      });
+    };
+    // 关闭弹窗
+    const closeDialog = (row) => {
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    // 新增
+    const onSubmit = () => {};
+    // 初始化cropperjs图片裁剪
+    const initCropper = () => {
+      const cropper = new Cropper(
+        document.querySelector(".cropper-warp-left-img"),
+        {
+          viewMode: 1,
+          dragMode: "none",
+          initialAspectRatio: 1,
+          aspectRatio: 1,
+          preview: ".before",
+          background: false,
+          autoCropArea: 0.6,
+          zoomOnWheel: false,
+          crop: (e) => {
+            state.cropperImgBase64 = cropper
+              .getCroppedCanvas()
+              .toDataURL("image/jpeg");
+          },
+        }
+      );
+    };
+    return {
+      openDialog,
+      closeDialog,
+      onCancel,
+      onSubmit,
+      initCropper,
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.cropper-warp {
+  display: flex;
+  .cropper-warp-left {
+    position: relative;
+    display: inline-block;
+    height: 350px;
+    flex: 1;
+    border: 1px solid #ebeef5;
+    background: #fff;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    cursor: move;
+    border-radius: 3px;
+    .cropper-warp-left-img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .cropper-warp-right {
+    width: 150px;
+    height: 350px;
+    .cropper-warp-right-title {
+      text-align: center;
+      height: 20px;
+      line-height: 20px;
+    }
+    .cropper-warp-right-item {
+      margin: 15px 0;
+      .cropper-warp-right-value {
+        .cropper-warp-right-value-img {
+          width: 100px;
+          height: 100px;
+          border-radius: 100%;
+          margin: auto;
+        }
+        .cropper-size {
+          width: 50px;
+          height: 50px;
+        }
+      }
+      .cropper-warp-right-label {
+        text-align: center;
+        font-size: 12px;
+        color: #666666;
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+  }
+}
+</style>

src/router/index.ts

@@ -376,6 +376,36 @@ export const dynamicRoutes = [
                         auth: ['admin', 'test'],
                         icon: 'iconfont icon-xuanzeqi'
                     }
+                },
+                {
+                    path: '/fun/wangEditor',
+                    name: 'wangEditor',
+                    component: () => import('/@/views/fun/wangEditor/index.vue'),
+                    meta: {
+                        title: 'wangEditor 编辑器',
+                        isLink: '',
+                        isHide: false,
+                        isKeepAlive: true,
+                        isAffix: false,
+                        isIframe: false,
+                        auth: ['admin', 'test'],
+                        icon: 'iconfont icon-fuwenbenkuang'
+                    }
+                },
+                {
+                    path: '/fun/cropper',
+                    name: 'cropper',
+                    component: () => import('/@/views/fun/cropper/index.vue'),
+                    meta: {
+                        title: 'cropper 图片裁剪',
+                        isLink: '',
+                        isHide: false,
+                        isKeepAlive: true,
+                        isAffix: false,
+                        isIframe: false,
+                        auth: ['admin', 'test'],
+                        icon: 'iconfont icon-caijian'
+                    }
                 }
             ]
         },
@@ -455,6 +485,21 @@ export const dynamicRoutes = [
                         icon: 'el-icon-set-up'
                     }
                 },
+                {
+                    path: '/pages/cityLinkage',
+                    name: 'cityLinkage',
+                    component: () => import('/@/views/pages/cityLinkage/index.vue'),
+                    meta: {
+                        title: '城市多级联动',
+                        isLink: '',
+                        isHide: false,
+                        isKeepAlive: true,
+                        isAffix: false,
+                        isIframe: false,
+                        auth: ['admin', 'test'],
+                        icon: 'iconfont icon-jiliandongxuanzeqi'
+                    }
+                },
             ]
         },
         {

src/theme/app.scss

@@ -22,6 +22,7 @@ body,
   background-color: #f8f8f8;
   font-size: 14px;
   overflow: hidden;
+  position: relative;
 }
 
 /* 主布局样式
@@ -43,13 +44,14 @@ body,
     }
   }
   .layout-header {
-    box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
     padding: 0 !important;
   }
   .layout-main {
     padding: 0 !important;
     overflow: hidden;
     width: 100%;
+    background-color: #f8f8f8;
+    border-top: 1px solid #f1f2f3;
   }
   .el-scrollbar {
     width: 100%;

src/theme/element.scss

@@ -949,6 +949,9 @@
 .el-select-dropdown .el-scrollbar__wrap {
   overflow-x: scroll !important;
 }
+.el-select-dropdown__wrap {
+  max-height: 274px !important; /*修复Select 选择器高度问题*/
+}
 
 /* Drawer 抽屉
 ------------------------------- */
@@ -956,4 +959,4 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-}
+}

src/theme/index.scss

@@ -1,5 +1,6 @@
 @import './app.scss';
 @import './base.scss';
+@import './other.scss';
 @import './element.scss';
 @import './iconSelector.scss';
 @import './media/media.scss';

src/theme/media/cityLinkage.scss

@@ -0,0 +1,10 @@
+@import './index.scss';
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+  .el-cascader__dropdown.el-popper {
+    overflow: auto;
+    max-width: 100%;
+  }
+}

src/theme/media/media.scss

@@ -9,3 +9,4 @@
 @import './scrollbar.scss';
 @import './pagination.scss';
 @import './dialog.scss';
+@import './cityLinkage.scss';

src/theme/other.scss

@@ -0,0 +1,16 @@
+/* wangeditor富文本编辑器
+------------------------------- */
+.w-e-toolbar {
+  border: 1px solid #ebeef5 !important;
+  border-bottom: 1px solid #ebeef5 !important;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  z-index: 2 !important;
+}
+.w-e-text-container {
+  border: 1px solid #ebeef5 !important;
+  border-top: none !important;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  z-index: 1 !important;
+}

src/utils/setIconfont.ts

@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-    '//at.alicdn.com/t/font_2298093_xviws8fx96h.css',
+    '//at.alicdn.com/t/font_2298093_sctkh48ml1.css',
     '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
 ]
 // 第三方 js url

src/views/error/401.vue

@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="right">
-        <img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/images/error/401.png" />
+        <img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/error/401.png" />
       </div>
     </div>
   </div>

src/views/error/404.vue

@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="right">
-        <img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/images/error/404.png" />
+        <img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/error/404.png" />
       </div>
     </div>
   </div>

src/views/fun/cropper/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="croppers-container">
+    <el-card shadow="hover" header="cropper 图片裁剪">
+      <el-alert title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs" type="success"
+        :closable="false" class="mb15"></el-alert>
+      <div class="cropper-img-warp">
+        <div class="mb15 mt15">
+          <img class="cropper-img" :src="cropperImg">
+        </div>
+        <el-button type="primary" icon="el-icon-crop" size="small" @click="onCropperDialogOpen">更换头像</el-button>
+      </div>
+    </el-card>
+    <CropperDialog ref="cropperDialogRef" />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, toRefs, reactive } from "vue";
+import CropperDialog from "/@/components/cropper/index.vue";
+export default {
+  name: "cropper",
+  components: { CropperDialog },
+  setup() {
+    const cropperDialogRef = ref();
+    const state = reactive({
+      cropperImg:
+        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg",
+    });
+    // 打开裁剪弹窗
+    const onCropperDialogOpen = () => {
+      cropperDialogRef.value.openDialog(state.cropperImg);
+    };
+    return {
+      cropperDialogRef,
+      onCropperDialogOpen,
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.croppers-container {
+  .cropper-img-warp {
+    text-align: center;
+    .cropper-img {
+      margin: auto;
+      width: 150px;
+      height: 150px;
+      border-radius: 100%;
+    }
+  }
+}
+</style>

src/views/fun/tagsView/index.vue

@@ -49,6 +49,12 @@
             </el-button>
           </div>
         </div>
+        <div class="flex-warp-item">
+          <div class="flex-warp-item-box">
+            <el-button type="success" size="small" icon="el-icon-full-screen" @click="openCurrenFullscreen">当前页全屏
+            </el-button>
+          </div>
+        </div>
       </div>
     </el-card>
   </div>
@@ -115,6 +121,13 @@ export default {
         path: route.path,
       });
     };
+    // 5、开启当前页面全屏
+    const openCurrenFullscreen = () => {
+      proxy.mittBus.emit("onCurrentContextmenuClick", {
+        id: 4,
+        path: route.path,
+      });
+    };
     // 执行点击
     const onImplementClick = () => {
       proxy.mittBus.emit("onCurrentContextmenuClick", {
@@ -127,6 +140,7 @@ export default {
       closeCurrentTagsView,
       closeOtherTagsView,
       closeAllTagsView,
+      openCurrenFullscreen,
       onImplementClick,
       ...toRefs(state),
     };

src/views/fun/wangEditor/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="editor-container">
+    <el-card shadow="hover" header="wangeditor富文本编辑器">
+      <el-alert title="感谢优秀的 `wangeditor`，项目地址：https://github.com/wangeditor-team/wangEditor" type="success"
+        :closable="false" class="mb15"></el-alert>
+      <div id="wangeditor"></div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted } from "vue";
+import wangeditor from "wangeditor";
+export default {
+  name: "wangeditor",
+  components: {},
+  setup() {
+    const state = reactive({});
+    // 初始化富文本
+    // https://doc.wangeditor.com/
+    const initWangeditor = () => {
+      const editor = new wangeditor("#wangeditor");
+      editor.config.placeholder = "请输入内容";
+      editor.config.onchange = (html) => {
+        console.log(html);
+        // console.log(editor.txt.html());
+        // console.log(editor.txt.text());
+      };
+      editor.create();
+    };
+    // 页面加载时
+    onMounted(() => {
+      initWangeditor();
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

src/views/layout/navBars/breadcrumb/index.vue

@@ -130,6 +130,5 @@ export default {
   padding-right: 15px;
   background: var(--bg-topBar);
   overflow: hidden;
-  border-bottom: 1px solid rgb(238, 238, 238);
 }
 </style>

src/views/layout/navBars/tagsView/contextmenu.vue

@@ -41,6 +41,12 @@ export default defineComponent({
         { id: 1, txt: "关闭", affix: false, icon: "el-icon-close" },
         { id: 2, txt: "关闭其它", affix: false, icon: "el-icon-circle-close" },
         { id: 3, txt: "全部关闭", affix: false, icon: "el-icon-folder-delete" },
+        {
+          id: 4,
+          txt: "当前全屏",
+          affix: false,
+          icon: "iconfont icon-fullscreen",
+        },
       ],
       path: {},
     });
@@ -93,6 +99,9 @@ export default defineComponent({
   position: fixed;
   .el-dropdown-menu__item {
     font-size: 12px !important;
+    i {
+      font-size: 12px !important;
+    }
   }
 }
 </style>

src/views/layout/navBars/tagsView/tagsView.vue

@@ -38,6 +38,7 @@ import {
   watch,
 } from "vue";
 import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
+import screenfull from "screenfull";
 import { useStore } from "/@/store/index.ts";
 import { setSession, getSession, removeSession } from "/@/utils/storage.ts";
 import Sortable from "sortablejs";
@@ -153,6 +154,14 @@ export default {
       });
       addBrowserSetSession(state.tagsViewList);
     };
+    // 6、开启当前页面全屏
+    const openCurrenFullscreen = (path: string) => {
+      nextTick(() => {
+        router.push(path);
+        const element = document.querySelector(".layout-main");
+        screenfull.request(element);
+      });
+    };
     // 当前项右键菜单点击
     const onCurrentContextmenuClick = (data: object) => {
       let { id, path } = data;
@@ -171,6 +180,9 @@ export default {
         case 3:
           closeAllTagsView(path);
           break;
+        case 4:
+          openCurrenFullscreen(path);
+          break;
       }
     };
     // 判断页面高亮
@@ -293,6 +305,7 @@ export default {
 .layout-navbars-tagsview {
   flex: 1;
   background-color: #ffffff;
+  border-top: 1px solid #ebeef5;
   ::v-deep(.el-scrollbar__wrap) {
     overflow-x: auto !important;
   }

src/views/pages/cityLinkage/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="city-linkage-container">
+    <el-alert title="温馨提示：箭头问题为 `element plus，Cascader 级联选择器` 宽度设为 100%后自带bug" type="warning" :closable="false">
+    </el-alert>
+    <el-card shadow="hover" header="1、三级联动（省市区）" class="mt15">
+      <el-cascader v-model="threeLevelLinkage" :options="threeLevelLinkageList" :props="{ expandTrigger: 'hover',
+        value: 'code' , label: 'name' }" size="small" clearable class="w100">
+      </el-cascader>
+    </el-card>
+    <el-card shadow="hover" header="2、分开联动" class="mt15">
+      <el-form size="small" label-width="40px">
+        <el-row :gutter="15">
+          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb15">
+            <el-form-item label="省级">
+              <el-select v-model="linkage.province" placeholder="请选择" size="small" clearable @change="onProvinceChange"
+                class="w100">
+                <el-option v-for="(v,k) in linkage.provinceList" :key="k" :label="v.name" :value="v.name"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb15">
+            <el-form-item label="市级">
+              <el-select v-model="linkage.city" placeholder="请选择" size="small" clearable @change="onCityChange"
+                class="w100">
+                <el-option v-for="(v,k) in linkage.cityList" :key="k" :label="v.name" :value="v.name"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
+            <el-form-item label="区级">
+              <el-select v-model="linkage.area" placeholder="请选择" size="small" clearable class="w100">
+                <el-option v-for="(v,k) in linkage.areaList" :key="k" :label="v.name" :value="v.name"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted } from "vue";
+import threeLevelLinkageJson from "/@/mock/threeLevelLinkage.json";
+export default {
+  name: "cityLinkage",
+  setup() {
+    const state = reactive({
+      threeLevelLinkage: "",
+      threeLevelLinkageList: [],
+      linkage: {
+        province: "",
+        city: "",
+        area: "",
+        provinceList: [], // 省
+        cityList: [], // 市
+        areaList: [], // 区
+      },
+    });
+    // 初始化城市数据
+    const initCityData = () => {
+      state.threeLevelLinkageList = threeLevelLinkageJson;
+      state.linkage.provinceList = threeLevelLinkageJson;
+    };
+    // 省下拉改变时
+    const onProvinceChange = (name) => {
+      state.linkage.city = "";
+      state.linkage.cityList = [];
+      state.linkage.provinceList.map((v) => {
+        if (v.name === name) state.linkage.cityList = v.children;
+      });
+    };
+    // 市下拉改变时
+    const onCityChange = (name) => {
+      state.linkage.area = "";
+      state.linkage.areaList = [];
+      state.linkage.cityList.map((v) => {
+        if (v.name === name) state.linkage.areaList = v.children;
+      });
+    };
+    // 页面加载时
+    onMounted(() => {
+      initCityData();
+    });
+    return {
+      onProvinceChange,
+      onCityChange,
+      ...toRefs(state),
+    };
+  },
+};
+</script>