version: 4.6.2-beta1.2

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGE LOG
 
+## 4.6.2-beta1.2
+
+## Feats
+
+- 优化 `AppMenu Extra` 标记样式，现在不会因为菜单标题过长将标记挤出去
+- 优化 `RQRCode` 组件样式，在 `error` 状态下会模糊显示二维码
+
+## Fixes
+
+- 修复 `close` 方法会关闭最后一个标签的问题，现在如果当前的 `getMenuTagOptions` 长度为 `1`，则不会关闭标签页
+
 ## 4.6.2-beta1.1
 
 ## Feats

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.6.2-beta1.1",
+  "version": "4.6.2-beta1.2",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",

src/components/RQRCode/src/index.scss

@@ -15,6 +15,7 @@
     @include flexCenter;
     flex-direction: column;
     gap: 18px 0;
+    border-radius: 3px;
 
     & .ray-qrcode__error-content {
       text-align: center;
@@ -23,8 +24,14 @@
       color: #ffffff;
     }
   }
+}
 
-  & .n-spin-content--spinning img {
+.ray-qrcode {
-    filter: blur(6px);
+  &.ray-qrcode--loading img {
+    filter: blur(4px);
+  }
+
+  &.ray-qrcode--error img {
+    filter: blur(4px);
   }
 }

src/components/RQRCode/src/index.tsx

@@ -154,32 +154,39 @@ export default defineComponent({
     }
   },
   render() {
+    const {
+      qrcodeURL,
+      status,
+      loadingDescription,
+      errorDescription,
+      $slots,
+      errorActionDescription,
+    } = this
+    const { errorActionClick } = this
+
     return (
-      <div class="ray-qrcode">
+      <div class={['ray-qrcode', `ray-qrcode--${status}`]}>
-        <NSpin
+        <NSpin show={status === 'loading'} description={loadingDescription}>
-          show={this.status === 'loading'}
+          <img src={qrcodeURL as string | undefined} />
-          description={this.loadingDescription}
-        >
-          <img src={this.qrcodeURL as string | undefined} />
         </NSpin>
-        {this.status === 'error' ? (
+        {status === 'error' ? (
           <div class="ray-qrcode__error">
             <div class="ray-qrcode__error-content">
-              {isValueType<string>(this.errorDescription, 'String')
+              {isValueType<string>(errorDescription, 'String')
-                ? this.errorDescription
+                ? errorDescription
-                : () => this.errorDescription}
+                : () => errorDescription}
             </div>
             <div
               class="ray-qrcode__error-btn"
-              onClick={this.errorActionClick.bind(this)}
+              onClick={errorActionClick.bind(this)}
             >
-              {this.$slots.errorAction ? (
+              {$slots.errorAction ? (
-                this.$slots.errorAction()
+                $slots.errorAction()
               ) : (
                 <>
                   <NButton text type="primary" color="#ffffff">
                     {{
-                      default: () => this.errorActionDescription,
+                      default: () => errorActionDescription,
                       icon: () => (
                         <RIcon name="reload" size="16" color="#ffffff" />
                       ),

src/hooks/template/index.ts

@@ -5,3 +5,4 @@ export * from './useTheme'
 export * from './useSiderBar'
 export * from './useAppNavigation'
 export * from './useAppRoot'
+export * from './useBadge'

src/hooks/template/useAppNavigation.ts

@@ -76,7 +76,7 @@ export function useAppNavigation() {
     if (typeof target === 'number') {
       // 校验是否为 NaN
       if (isNaN(target)) {
-        console.warn(`navigationTo: The ${target} is NaN, expect number.`)
+        console.warn(`[navigationTo]: The ${target} is NaN, expect number.`)
 
         return
       }
@@ -86,7 +86,7 @@ export function useAppNavigation() {
       // 校验是否超出最大菜单长度
       if (target > getMenuOptions.value.length) {
         console.warn(
-          `navigationTo: The current ${target} exceeds the maximum number of menus.`,
+          `[navigationTo]: The current ${target} exceeds the maximum number of menus.`,
         )
 
         return
@@ -116,7 +116,7 @@ export function useAppNavigation() {
       if (fd) {
         isPushNavigation(fd.path)
       } else {
-        console.warn(`navigationTo: The path "${target}" is not found.`)
+        console.warn(`[navigationTo]: The path "${target}" is not found.`)
       }
     } else {
       isPushNavigation(target.fullPath)

src/hooks/template/useBadge.ts

@@ -0,0 +1,22 @@
+import { useMenuGetters } from '@/store'
+
+export function useBadge() {
+  const { getMenuOptions } = useMenuGetters()
+
+  const hidden = () => {}
+
+  const show = () => {}
+
+  const toggle = () => {}
+
+  const updateLabel = () => {}
+
+  return {
+    hidden,
+    show,
+    toggle,
+    updateLabel,
+  }
+}
+
+export type UseBadgeReturnType = ReturnType<typeof useBadge>

src/hooks/template/useSiderBar.ts

@@ -170,6 +170,10 @@ export function useSiderBar() {
   const close = (target: CloseMenuTag) => {
     const normal = normalMenuTagOption(target, 'close')
 
+    if (getMenuTagOptions.value.length === 1) {
+      return
+    }
+
     if (normal) {
       const { index, option } = normal
 

src/router/type.ts

@@ -11,7 +11,7 @@ export type Component<T = any> =
   | (() => Promise<T>)
 
 export interface AppMenuExtraOptions {
-  extraLabel?: string
+  extraLabel?: string | number
   extraIcon?: string | VNode
   extraType?: TagProps['type']
 }

src/styles/naive.scss

@@ -21,3 +21,14 @@
   display: flex;
   gap: 0 6px;
 }
+
+.r-menu--app {
+  // 手动设置 label 宽度，兼容 extra 的情况
+  .n-menu-item-content-header .n-ellipsis {
+    width: calc(100% - 41px);
+  }
+
+  .n-menu-item-content-header__extra {
+    margin-right: 8px;
+  }
+}

src/views/dashboard/index.tsx

@@ -66,16 +66,16 @@ const Dashboard = defineComponent({
         value: 'Vue3.x',
       },
       {
-        label: 'Vite4.0',
+        label: 'Vite5.x',
-        value: 'Vite4.0',
+        value: 'Vite5.x',
       },
       {
         label: 'Pinia',
         value: 'Pinia',
       },
       {
-        label: 'TSX',
+        label: 'TS(X)',
-        value: 'TSX',
+        value: 'TS(X)',
       },
     ]