update: 增加选中菜单动画

packages/app/src/hooks/use-query-data-info/index.ts

@@ -17,22 +17,25 @@ export function useQueryDataInfo<R, P extends unknown[]>({
   label = '',
 }: UseQueryDataInfoOptions<R, P>): R | undefined {
   const {data} = useQuery(
-    [queryFn.name, ...params, ...extraKeys],
-    async function() {
-      // 获取详情不加signal 不然可能导致取消后重新进入报错
-      const data = await queryFn(...params);
+    {
+      queryKey: [queryFn.name, ...params, ...extraKeys],
+      async queryFn() {
+        // 获取详情不加signal 不然可能导致取消后重新进入报错
+        const data = await queryFn(...params);
 
-      if (data.msg === '200') {
-        const {data: {list}} = data;
+        if (data.msg === '200') {
+          const {data: {list}} = data;
 
-        if (list.length > 0) return list[0];
+          if (list.length > 0) return list[0];
 
-        throw new Error(`未获取到${label}信息`);
-      }
+          throw new Error(`未获取到${label}信息`);
+        }
 
-      throw new Error(data.errMsg);
+        throw new Error(data.errMsg);
+      },
+      suspense: true,
+      enabled,
     },
-    {suspense: true, enabled},
   );
 
   return data;

packages/app/src/styles/antd.css

@@ -25,17 +25,25 @@
   border-radius: unset !important;
 }
 
-.ant-menu-item-selected {
+.ant-menu-item {
   position: relative;
 
   &::before {
     position: absolute;
-    top: 0;
+    top: 50%;
     right: 0;
-    bottom: 0;
+    bottom: 50%;
     width: 4px;
     content: '';
     background: var(--primary-color);
+    transition: top 150ms ease-in-out, bottom 150ms ease-in-out;
+  }
+}
+
+.ant-menu-item-selected {
+  &::before {
+    top: 0;
+    bottom: 0;
   }
 }