Merge remote-tracking branch 'origin/main' into gitee

package.json

@@ -61,13 +61,13 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
-    "axios": "^1.6.5",
+    "axios": "^1.6.7",
     "china-area-data": "^5.0.1",
     "cropperjs": "^1.6.1",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "el-table-infinite-scroll": "^3.0.3",
-    "element-plus": "^2.5.1",
+    "element-plus": "^2.5.3",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.6",
@@ -98,16 +98,16 @@
     "vue-waterfall-plugin-next": "^2.3.1",
     "vue3-danmaku": "^1.6.0",
     "vuedraggable": "^4.1.0",
-    "wavesurfer.js": "^7.6.4",
+    "wavesurfer.js": "^7.7.1",
     "xgplayer": "^3.0.11",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.4",
+    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.4.4",
+    "@commitlint/config-conventional": "^18.6.0",
-    "@commitlint/types": "^18.4.4",
+    "@commitlint/types": "^18.6.0",
     "@eslint/js": "^8.56.0",
-    "@faker-js/faker": "^8.3.1",
+    "@faker-js/faker": "^8.4.0",
     "@iconify-icons/ep": "^1.2.12",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
@@ -116,16 +116,16 @@
     "@types/gradient-string": "^1.1.5",
     "@types/intro.js": "^5.1.5",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.11.0",
+    "@types/node": "^20.11.7",
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.9.11",
     "@types/sortablejs": "^1.15.7",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "boxen": "^7.1.1",
     "cloc": "^2.11.0",
     "cssnano": "^6.0.3",
@@ -133,7 +133,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.20.0",
+    "eslint-plugin-vue": "^9.20.1",
     "gradient-string": "^2.0.2",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
@@ -141,11 +141,11 @@
     "postcss-html": "^1.6.0",
     "postcss-import": "^15.1.0",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
     "rimraf": "^5.0.5",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
-    "stylelint": "^16.1.0",
+    "stylelint": "^16.2.0",
     "stylelint-config-recess-order": "^4.4.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^12.0.0",
@@ -160,7 +160,7 @@
     "vite-plugin-remove-console": "^2.2.0",
     "vite-plugin-router-warn": "^1.0.0",
     "vite-svg-loader": "^5.1.0",
-    "vue-eslint-parser": "^9.4.0",
+    "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^1.8.27"
   },
   "engines": {

src/components/ReCropper/src/index.tsx

@@ -2,6 +2,7 @@ import "./circled.css";
 import Cropper from "cropperjs";
 import { ElUpload } from "element-plus";
 import type { CSSProperties } from "vue";
+import { useEventListener } from "@vueuse/core";
 import { longpress } from "@/directives/longpress";
 import { useTippy, directive as tippy } from "vue-tippy";
 import {
@@ -66,6 +67,8 @@ const props = {
   src: { type: String, required: true },
   alt: { type: String },
   circled: { type: Boolean, default: false },
+  /** 是否可以通过点击裁剪区域关闭右键弹出的功能菜单，默认 `true` */
+  isClose: { type: Boolean, default: true },
   realTimePreview: { type: Boolean, default: true },
   height: { type: [String, Number], default: "360px" },
   crossorigin: {
@@ -83,10 +86,12 @@ export default defineComponent({
     const tippyElRef = ref<ElRef<HTMLImageElement>>();
     const imgElRef = ref<ElRef<HTMLImageElement>>();
     const cropper = ref<Nullable<Cropper>>();
+    const inCircled = ref(props.circled);
+    const isInClose = ref(props.isClose);
+    const inSrc = ref(props.src);
     const isReady = ref(false);
     const imgBase64 = ref();
-    const inCircled = ref(props.circled);
+
-    const inSrc = ref(props.src);
     let scaleX = 1;
     let scaleY = 1;
 
@@ -218,6 +223,7 @@ export default defineComponent({
       if (event === "scaleX") {
         scaleX = arg = scaleX === -1 ? 1 : -1;
       }
+
       if (event === "scaleY") {
         scaleY = arg = scaleY === -1 ? 1 : -1;
       }
@@ -375,7 +381,7 @@ export default defineComponent({
     function onContextmenu(event) {
       event.preventDefault();
 
-      const { show, setProps } = useTippy(tippyElRef, {
+      const { show, setProps, destroy, state } = useTippy(tippyElRef, {
         content: menuContent,
         arrow: false,
         theme: "light",
@@ -399,6 +405,11 @@ export default defineComponent({
       });
 
       show();
+
+      if (isInClose.value) {
+        if (!state.value.isShown && !state.value.isVisible) return;
+        useEventListener(tippyElRef, "click", destroy);
+      }
     }
 
     return {

src/layout/components/panel/index.vue

@@ -10,9 +10,12 @@ const show = ref<Boolean>(false);
 
 const iconClass = computed(() => {
   return [
+    "w-[22px]",
+    "h-[22px]",
+    "flex",
+    "justify-center",
+    "items-center",
     "outline-none",
-    "width-[20px]",
-    "height-[20px]",
     "rounded-[4px]",
     "cursor-pointer",
     "transition-colors",
@@ -42,7 +45,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :class="{ show: show }" class="right-panel-container">
+  <div :class="{ show }">
     <div class="right-panel-background" />
     <div ref="target" class="right-panel bg-bg_color">
       <div
@@ -59,8 +62,8 @@ onBeforeUnmount(() => {
         >
           <IconifyIconOffline
             class="dark:text-white"
-            width="20px"
+            width="18px"
-            height="20px"
+            height="18px"
             :icon="Close"
             @click="show = !show"
           />
@@ -91,14 +94,6 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style>
-.showright-panel {
-  position: relative;
-  width: calc(100% - 15px);
-  overflow: hidden;
-}
-</style>
-
 <style lang="scss" scoped>
 :deep(.el-scrollbar) {
   height: calc(100vh - 110px);
@@ -121,7 +116,6 @@ onBeforeUnmount(() => {
   z-index: 40000;
   width: 100%;
   max-width: 280px;
-  height: 100vh;
   box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);

src/style/element-plus.scss

@@ -56,7 +56,7 @@
   }
 }
 
-/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
 .el-dialog__headerbtn,
 .el-message-box__headerbtn {
   &:hover {
@@ -70,7 +70,8 @@
   &.el-dialog__close,
   &.el-drawer__close,
   &.el-message-box__close,
-  &.el-notification__closeBtn {
+  &.el-notification__closeBtn,
+  .el-upload-list__item.is-ready &.el-icon--close {
     width: 24px;
     height: 24px;
     border-radius: 4px;