style: 样式优化

package.json

@@ -35,7 +35,7 @@
     "@logicflow/core": "^1.1.30",
     "@logicflow/extension": "^1.1.30",
     "@pureadmin/descriptions": "^1.1.0",
-    "@pureadmin/table": "^1.8.1",
+    "@pureadmin/table": "^1.8.2",
     "@pureadmin/utils": "^1.7.1",
     "@vueuse/core": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
@@ -56,27 +56,27 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.2",
-    "md-editor-v3": "^2.4.2",
+    "md-editor-v3": "^2.5.0",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.26",
+    "pinia": "^2.0.27",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "responsive-storage": "^2.1.0",
     "sortablejs": "^1.15.0",
-    "swiper": "^8.4.4",
+    "swiper": "^8.4.5",
     "typeit": "^8.7.0",
     "v-contextmenu": "3.0.0",
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
-    "vue-json-pretty": "^2.2.2",
-    "vue-pdf-embed": "^1.1.4",
+    "vue-json-pretty": "^2.2.3",
+    "vue-pdf-embed": "^1.1.5",
     "vue-router": "^4.1.6",
     "vue-types": "^4.2.1",
     "vue-virtual-scroller": "^2.0.0-alpha.1",
-    "vue3-danmaku": "^1.0.0",
+    "vue3-danmaku": "^1.1.0",
     "vuedraggable": "^4.1.0",
     "vxe-table": "^4.3.6",
     "xe-utils": "^3.5.7",

pnpm-lock.yaml

@@ -14,7 +14,7 @@ specifiers:
   "@logicflow/core": ^1.1.30
   "@logicflow/extension": ^1.1.30
   "@pureadmin/descriptions": ^1.1.0
-  "@pureadmin/table": ^1.8.1
+  "@pureadmin/table": ^1.8.2
   "@pureadmin/theme": ^2.4.0
   "@pureadmin/utils": ^1.7.1
   "@types/element-resize-detector": 1.1.3
@@ -62,13 +62,13 @@ specifiers:
   lodash: ^4.17.21
   lodash-es: ^4.17.21
   lodash-unified: ^1.0.2
-  md-editor-v3: ^2.4.2
+  md-editor-v3: ^2.5.0
   mitt: ^3.0.0
   mockjs: ^1.1.0
   nprogress: ^0.2.0
   path: ^0.12.7
   picocolors: ^1.0.0
-  pinia: ^2.0.26
+  pinia: ^2.0.27
   postcss: ^8.4.18
   postcss-html: ^1.5.0
   postcss-import: ^15.0.0
@@ -90,7 +90,7 @@ specifiers:
   stylelint-config-standard: ^29.0.0
   stylelint-order: ^5.0.0
   svgo: ^3.0.2
-  swiper: ^8.4.4
+  swiper: ^8.4.5
   tailwindcss: ^3.2.4
   terser: ^5.15.1
   typeit: ^8.7.0
@@ -106,13 +106,13 @@ specifiers:
   vue: ^3.2.45
   vue-eslint-parser: ^9.1.0
   vue-i18n: ^9.2.2
-  vue-json-pretty: ^2.2.2
-  vue-pdf-embed: ^1.1.4
+  vue-json-pretty: ^2.2.3
+  vue-pdf-embed: ^1.1.5
   vue-router: ^4.1.6
   vue-tsc: ^1.0.9
   vue-types: ^4.2.1
   vue-virtual-scroller: ^2.0.0-alpha.1
-  vue3-danmaku: ^1.0.0
+  vue3-danmaku: ^1.1.0
   vuedraggable: ^4.1.0
   vxe-table: ^4.3.6
   xe-utils: ^3.5.7
@@ -126,7 +126,7 @@ dependencies:
   "@logicflow/core": 1.1.31
   "@logicflow/extension": 1.1.31
   "@pureadmin/descriptions": 1.1.1_element-plus@2.2.26
-  "@pureadmin/table": 1.8.1_element-plus@2.2.26
+  "@pureadmin/table": 1.8.2_element-plus@2.2.26
   "@pureadmin/utils": 1.7.1_aotapuqn7htzdjltsyimavekky
   "@vueuse/core": 9.6.0_vue@3.2.45
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
@@ -147,7 +147,7 @@ dependencies:
   lodash: 4.17.21
   lodash-es: 4.17.21
   lodash-unified: 1.0.3_3ib2ivapxullxkx3xftsimdk7u
-  md-editor-v3: 2.4.2
+  md-editor-v3: 2.5.0
   mitt: 3.0.0
   mockjs: 1.1.0
   nprogress: 0.2.0
@@ -167,7 +167,7 @@ dependencies:
   vue-router: 4.1.6_vue@3.2.45
   vue-types: 4.2.1_vue@3.2.45
   vue-virtual-scroller: 2.0.0-beta.3_vue@3.2.45
-  vue3-danmaku: 1.0.0_vue@3.2.45
+  vue3-danmaku: 1.1.0_vue@3.2.45
   vuedraggable: 4.1.0_vue@3.2.45
   vxe-table: 4.3.6_vue@3.2.45+xe-utils@3.5.7
   xe-utils: 3.5.7
@@ -1277,10 +1277,10 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /@pureadmin/table/1.8.1_element-plus@2.2.26:
+  /@pureadmin/table/1.8.2_element-plus@2.2.26:
     resolution:
       {
-        integrity: sha512-oZ5GYmLTDgQ64U6+yKFjvpZG2Seuudk3hOWnUogMvKxhIvaRQsGBHbvyg47asMmXxUyeilq+nRumyuiuV7WJTg==
+        integrity: sha512-FGh1aOfgQtX16pCnP+bxg49TetcZDhdykIue0m5d8NIj6zkvJP53JU+DkUpvqvKmUiMsvIwme6e17BLZMmMiOw==
       }
     peerDependencies:
       element-plus: ^2.0.0
@@ -5895,10 +5895,10 @@ packages:
       }
     dev: true
 
-  /md-editor-v3/2.4.2:
+  /md-editor-v3/2.5.0:
     resolution:
       {
-        integrity: sha512-qVbvfIifrXwfi9In8l14nW+A5MXaE9UxN7d+Iw2QtXFV0kaDfS5H2Z5kMeVP61GaLLkdbOi4GCt0X2izZ0rdJw==
+        integrity: sha512-qB6w4jQU7uItAcJYuG/JaFVLDWZ2NgegLsCHNeQV5R1CgMC8MKJYcFxMpCDf8YNRMrN9zK0Kd+grYp1rq4KhNw==
       }
     engines: { node: ">=12.0.0" }
     dev: false
@@ -8862,10 +8862,10 @@ packages:
       "@vue/server-renderer": 3.2.45_vue@3.2.45
       "@vue/shared": 3.2.45
 
-  /vue3-danmaku/1.0.0_vue@3.2.45:
+  /vue3-danmaku/1.1.0_vue@3.2.45:
     resolution:
       {
-        integrity: sha512-1DVPQeQBdv/iGyuumebZLKPHcfvSgPwxe/ExKF1jc/dJ3MINbXkw23iIajE8JKNvttagOX7eZnuwWnQ4ug8pqg==
+        integrity: sha512-8I+WOC8/79I2/8PRZ2fPIPd45pM4G3l7SkS9l8IvdpFjf2CzZgAp5rF+5BMcURDQu0ckVVYSmUb6TU0r0YJ3LQ==
       }
     peerDependencies:
       vue: ^3.0.0

src/layout/components/panel/index.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { onClickOutside } from "@vueuse/core";
+import { ref, computed } from "vue";
 import { emitter } from "@/utils/mitt";
+import { onClickOutside } from "@vueuse/core";
 import Close from "@iconify-icons/ep/close";
 
-const show = ref<Boolean>(false);
 const target = ref(null);
+const show = ref<Boolean>(false);
+
+const iconClass = computed(() => {
+  return [
+    "mr-[20px]",
+    "outline-none",
+    "width-[20px]",
+    "height-[20px]",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
 onClickOutside(target, (event: any) => {
   if (event.clientX > target.value.offsetLeft) return;
   show.value = false;
@@ -23,9 +39,11 @@ emitter.on("openPanel", () => {
       <div class="right-panel-items">
         <div class="project-configuration">
           <h4 class="dark:text-white">项目配置</h4>
-          <span title="关闭配置">
+          <span title="关闭配置" :class="iconClass">
             <IconifyIconOffline
               class="dark:text-white"
+              width="20px"
+              height="20px"
               :icon="Close"
               @click="show = !show"
             />
@@ -69,7 +87,6 @@ emitter.on("openPanel", () => {
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  // background: #fff;
   z-index: 40000;
 }
 
@@ -125,16 +142,6 @@ emitter.on("openPanel", () => {
   align-items: center;
   top: 15px;
   margin-left: 10px;
-
-  svg {
-    font-size: 20px;
-    margin-right: 20px;
-
-    &:hover {
-      cursor: pointer;
-      color: var(--el-color-primary);
-    }
-  }
 }
 
 :deep(.el-divider--horizontal) {

src/layout/components/sidebar/leftCollapse.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useNav } from "@/layout/hooks/useNav";
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
-import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
 
 interface Props {
   isActive: boolean;
@@ -15,6 +14,22 @@ const props = withDefaults(defineProps<Props>(), {
 const visible = ref(false);
 const { tooltipEffect } = useNav();
 
+const iconClass = computed(() => {
+  return [
+    "ml-4",
+    "mb-1",
+    "w-[16px]",
+    "h-[16px]",
+    "inline-block",
+    "align-middle",
+    "text-primary",
+    "cursor-pointer",
+    "duration-[360ms]",
+    "hover:text-primary",
+    "dark:hover:!text-white"
+  ];
+});
+
 const emit = defineEmits<{
   (e: "toggleClick"): void;
 }>();
@@ -33,8 +48,9 @@ const toggleClick = () => {
       :content="props.isActive ? '点击折叠' : '点击展开'"
     >
       <IconifyIconOffline
-        :icon="props.isActive ? MenuFold : MenuUnfold"
-        class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
+        :icon="MenuFold"
+        :class="iconClass"
+        :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
         @click="toggleClick"
         @mouseenter="visible = true"
         @mouseleave="visible = false"