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

src/layout/theme/index.ts

@@ -10,7 +10,7 @@ const themeColors = {
   light: {
     subMenuActiveText: "#000000d9",
     menuBg: "#fff",
-    menuHover: "#e0ebf6",
+    menuHover: "#f6f6f6",
     subMenuBg: "#fff",
     subMenuActiveBg: "#e0ebf6",
     menuText: "rgb(0 0 0 / 60%)",
@@ -22,7 +22,7 @@ const themeColors = {
   default: {
     subMenuActiveText: "#fff",
     menuBg: "#001529",
-    menuHover: "#4091f7",
+    menuHover: "rgb(64 145 247 / 15%)",
     subMenuBg: "#0f0303",
     subMenuActiveBg: "#4091f7",
     menuText: "rgb(254 254 254 / 65%)",
@@ -34,7 +34,7 @@ const themeColors = {
   saucePurple: {
     subMenuActiveText: "#fff",
     menuBg: "#130824",
-    menuHover: "#693ac9",
+    menuHover: "rgb(105 58 201 / 15%)",
     subMenuBg: "#000",
     subMenuActiveBg: "#693ac9",
     menuText: "#7a80b4",
@@ -46,7 +46,7 @@ const themeColors = {
   pink: {
     subMenuActiveText: "#fff",
     menuBg: "#28081a",
-    menuHover: "#d84493",
+    menuHover: "rgb(216 68 147 / 15%)",
     subMenuBg: "#000",
     subMenuActiveBg: "#d84493",
     menuText: "#7a80b4",
@@ -58,7 +58,7 @@ const themeColors = {
   dusk: {
     subMenuActiveText: "#fff",
     menuBg: "#2a0608",
-    menuHover: "#e13c39",
+    menuHover: "rgb(225 60 57 / 15%)",
     subMenuBg: "#000",
     subMenuActiveBg: "#e13c39",
     menuText: "rgb(254 254 254 / 65.1%)",
@@ -70,7 +70,7 @@ const themeColors = {
   volcano: {
     subMenuActiveText: "#fff",
     menuBg: "#2b0e05",
-    menuHover: "#e85f33",
+    menuHover: "rgb(232 95 51 / 15%)",
     subMenuBg: "#0f0603",
     subMenuActiveBg: "#e85f33",
     menuText: "rgb(254 254 254 / 65%)",
@@ -82,7 +82,7 @@ const themeColors = {
   mingQing: {
     subMenuActiveText: "#fff",
     menuBg: "#032121",
-    menuHover: "#59bfc1",
+    menuHover: "rgb(89 191 193 / 15%)",
     subMenuBg: "#000",
     subMenuActiveBg: "#59bfc1",
     menuText: "#7a80b4",
@@ -94,7 +94,7 @@ const themeColors = {
   auroraGreen: {
     subMenuActiveText: "#fff",
     menuBg: "#0b1e15",
-    menuHover: "#60ac80",
+    menuHover: "rgb(96 172 128 / 15%)",
     subMenuBg: "#000",
     subMenuActiveBg: "#60ac80",
     menuText: "#7a80b4",

src/views/system/user/upload.vue

@@ -10,6 +10,7 @@ const props = defineProps({
 const emit = defineEmits(["cropper"]);
 
 const infos = ref();
+const popoverRef = ref();
 const refCropper = ref();
 const showPopover = ref(false);
 const cropperImg = ref<string>("");
@@ -19,11 +20,22 @@ function onCropper({ base64, blob, info }) {
   cropperImg.value = base64;
   emit("cropper", { base64, blob, info });
 }
+
+function hidePopover() {
+  popoverRef.value.hide();
+}
+
+defineExpose({ hidePopover });
 </script>
 
 <template>
   <div v-loading="!showPopover" element-loading-background="transparent">
-    <el-popover :visible="showPopover" placement="right" width="18vw">
+    <el-popover
+      ref="popoverRef"
+      :visible="showPopover"
+      placement="right"
+      width="18vw"
+    >
       <template #reference>
         <div class="w-[18vw]">
           <ReCropper

src/views/system/user/utils/hook.tsx

@@ -351,6 +351,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     });
   }
 
+  const cropRef = ref();
   /** 上传头像 */
   function handleUpload(row) {
     addDialog({
@@ -360,6 +361,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       closeOnClickModal: false,
       contentRenderer: () =>
         h(croppingUpload, {
+          ref: cropRef,
           imgSrc: row.avatar,
           onCropper: info => (avatarInfo.value = info)
         }),
@@ -368,7 +370,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
         // 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
         done(); // 关闭弹框
         onSearch(); // 刷新表格数据
-      }
+      },
+      closeCallBack: () => cropRef.value.hidePopover()
     });
   }