version: 4.6.2-beta1.1

CHANGELOG.md

@@ -1,6 +1,37 @@
 # CHANGE LOG
 
-## 4.6.2-beta
+## 4.6.2-beta1.1
+
+## Feats
+
+- `cache` 工具包相关
+  - 优化 `removeStorage` 方法类型推导，当 `key` 为预留字关键字时，强制绑定 `storageType` 为对应的类型值
+
+```ts
+import { removeStorage } from '@/utils'
+
+// 正确
+removeStorage('__all__', 'all')
+removeStorage('__all_sessionStorage__', 'sessionStorage')
+removeStorage('__all_localStorage__', 'localStorage')
+remove('your key', 'sessionStorage' || 'localStorage')
+
+// 错误
+removeStorage('__all__', 'sessionStorage')
+removeStorage('__all_sessionStorage__', 'localStorage')
+removeStorage('__all_localStorage__', 'all')
+removeStorage('__all_localStorage__', 'sessionStorage')
+remove('your key', 'all')
+```
+
+- 优化 `Layout` 布局样式，移除 `border` 边框，添加 `box-shadow` 阴影
+
+## Fixes
+
+- 修复 `copy` 指令复制的时候不能正确的提示的问题
+- 修复 `AppVersionProvider` 组件不能正确的注入 `appVersion` 的问题
+
+## 4.6.2-beta1.0
 
 为了支持同域名下同时部署多套系统，重构了 `cache` 工具包支持前缀配置。并且暴露重构所有的缓存 `key` 配置项，为了便捷的进行私有数据缓存。
 

README-ZH.md

@@ -4,7 +4,7 @@
       alt="Ray Template"
       width="200"
       height="200"
-      src="https://r2chevereto.yka.moe/longmao.navigator.th.png"
+      src="https://avatars.githubusercontent.com/u/51957438?v=4"
     />
   </a>
   <br />

README.md

@@ -4,7 +4,7 @@
       alt="Ray Template"
       width="200"
       height="200"
-      src="https://r2chevereto.yka.moe/longmao.navigator.th.png"
+      src="https://avatars.githubusercontent.com/u/51957438?v=4"
     />
   </a>
   <br />

package.json

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

src/app-components/app/AppAvatar/index.tsx

@@ -63,22 +63,24 @@ const AppAvatar = defineComponent({
     }
   },
   render() {
+    const { signing, cssVars, spaceSize, avatarSize, $props } = this
+
     return (
       <NFlex
         class="app-avatar"
         {...this.$props}
-        style={this.cssVars}
+        style={cssVars}
-        size={this.spaceSize}
+        size={spaceSize}
       >
         <NAvatar
           // eslint-disable-next-line prettier/prettier, @typescript-eslint/no-explicit-any
-          {...(this.$props as any)}
+          {...($props as any)}
-          src={this.signing?.avatar}
+          src={signing?.avatar}
           objectFit="cover"
           round
-          size={this.avatarSize}
+          size={avatarSize}
         />
-        <div class="app-avatar__name">{this.signing?.name}</div>
+        <div class="app-avatar__name">{signing?.name}</div>
       </NFlex>
     )
   },

src/app-components/app/RayLink/index.tsx

@@ -16,41 +16,41 @@ export default defineComponent({
   name: 'RayLink',
   setup() {
     const avatarOptions: AvatarOptions[] = [
-      {
+      // {
-        key: 'yunhome',
+      //   key: 'yunhome',
-        src: 'https://yunkuangao.me/',
+      //   src: 'https://yunkuangao.me/',
-        tooltip: '云之家',
+      //   tooltip: '云之家',
-        icon: 'https://r2chevereto.yka.moe/avatar.jpeg',
+      //   icon: 'https://r2chevereto.yka.moe/avatar.jpeg',
-      },
+      // },
-      {
+      // {
-        key: 'yun-cloud-images',
+      //   key: 'yun-cloud-images',
-        src: 'https://yunkuangao.com/',
+      //   src: 'https://yunkuangao.com/',
-        tooltip: '云图床',
+      //   tooltip: '云图床',
-        icon: 'https://r2chevereto.yka.moe/avatar.jpeg',
+      //   icon: 'https://r2chevereto.yka.moe/avatar.jpeg',
-      },
+      // },
       {
         key: 'ray-js-note',
         src: 'https://note.youdao.com/s/ObWEe2BB',
         tooltip: 'Ray的前端学习笔记',
-        icon: 'https://r2chevereto.yka.moe/longmao.navigator.png',
+        icon: 'https://avatars.githubusercontent.com/u/51957438?v=4',
       },
       {
         key: 'ray-js-cover',
         src: 'https://note.youdao.com/s/IC8xKPdB',
         tooltip: 'Ray的面试题总结',
-        icon: 'https://r2chevereto.yka.moe/longmao.navigator.png',
+        icon: 'https://avatars.githubusercontent.com/u/51957438?v=4',
       },
       {
         key: 'ray-template-doc',
         src: 'https://xiaodaigua-ray.github.io/ray-template-doc/',
         tooltip: 'Ray Template Doc',
-        icon: 'https://r2chevereto.yka.moe/longmao.navigator.png',
+        icon: 'https://avatars.githubusercontent.com/u/51957438?v=4',
       },
       {
         key: 'ray-template-doc-out',
         src: 'https://ray-template.yunkuangao.com/',
         tooltip: 'Ray Template Doc (国内地址)',
-        icon: 'https://r2chevereto.yka.moe/longmao.navigator.png',
+        icon: 'https://avatars.githubusercontent.com/u/51957438?v=4',
       },
     ]
 

src/app-components/provider/AppVersionProvider/index.tsx

@@ -45,6 +45,12 @@ export default defineComponent({
           'localStorage',
         )
       }
+    } else {
+      setStorage<string>(
+        APP_CATCH_KEY.appVersionProvider,
+        version,
+        'localStorage',
+      )
     }
 
     return {

src/directives/modules/copy/index.ts

@@ -19,29 +19,31 @@ import ClipboardJS from 'clipboard'
 import type { CopyElement } from './type'
 import type { CustomDirectiveFC } from '@/directives/type'
 
-const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
+const createClipboard = (el: CopyElement, value: string) => {
-  return {
-    mounted: (el, { value }) => {
   const clipboard = new ClipboardJS(el, {
-        text: () => String(value),
+    text: () => value,
-      })
-
-      clipboard.on('success', () => {
-        window.$message.success('复制成功')
-      })
-      clipboard.on('error', () => {
-        window.$message.error('复制失败')
   })
 
   el.$$clipboard = clipboard
+
+  el.$$clipboard.on('success', () => {
+    window.$message.success('复制成功')
+  })
+  el.$$clipboard.on('error', () => {
+    window.$message.error('复制失败')
+  })
+}
+
+const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
+  return {
+    mounted: (el, { value }) => {
+      createClipboard(el, value)
     },
     updated: (el, { value, oldValue }) => {
       if (value !== oldValue) {
         el.$$clipboard?.destroy()
 
-        el.$$clipboard = new ClipboardJS(el, {
+        createClipboard(el, value)
-          text: () => String(value),
-        })
       }
     },
     beforeUnmount: (el: CopyElement) => {

src/layout/components/Menu/components/SiderBarLogo/index.scss

@@ -19,7 +19,6 @@
   gap: 8px 12px;
   font-weight: 600;
   overflow: hidden;
-  border-right: solid 1px var(--n-border-color);
 
   &.ray-menu__logo-url {
     position: sticky;

src/layout/components/Menu/index.scss

@@ -5,3 +5,11 @@
     height: 100%;
   }
 }
+
+.ray-template--light .app-menu__sider {
+  box-shadow: 2px 0 8px $layoutShadowColorLight;
+}
+
+.ray-template--dark .app-menu__sider {
+  box-shadow: 2px 0 8px $layoutShadowColorDark;
+}

src/layout/components/Menu/index.tsx

@@ -67,7 +67,7 @@ export default defineComponent({
 
     const BasicMenu = () => (
       <NLayoutSider
-        bordered
+        class="app-menu__sider"
         showTrigger={!isTabletOrSmaller.value}
         collapseMode={APP_MENU_CONFIG.menuCollapsedMode}
         collapsedWidth={APP_MENU_CONFIG.menuCollapsedWidth}
@@ -95,7 +95,7 @@ export default defineComponent({
 
     return {
       isTabletOrSmaller,
-      BasicMenu: BasicMenu,
+      BasicMenu,
       modelGlobalDrawerValue,
     }
   },

src/layout/components/MenuTag/index.scss

@@ -3,7 +3,6 @@ $menuTagWrapperWidth: 76px;
 
 .menu-tag {
   height: $layoutMenuHeight;
-  border-bottom: solid 1px var(--n-border-color);
   display: flex;
   align-items: center;
   padding: 6px 0;
@@ -87,3 +86,11 @@ $menuTagWrapperWidth: 76px;
 .menu-tag__right-setting--spinning {
   animation: elementRotate 0.8s linear infinite;
 }
+
+.ray-template--light .menu-tag {
+  box-shadow: 0 2px 2px $layoutShadowColorLight;
+}
+
+.ray-template--dark .menu-tag {
+  box-shadow: 0 2px 2px $layoutShadowColorDark;
+}

src/layout/components/SiderBar/index.scss

@@ -8,3 +8,11 @@
     width: 100%;
   }
 }
+
+.ray-template--light .layout-header {
+  box-shadow: 0 1px 2px $layoutShadowColorLight;
+}
+
+.ray-template--dark .layout-header {
+  box-shadow: 0 1px 2px $layoutShadowColorDark;
+}

src/layout/components/SiderBar/index.tsx

@@ -140,7 +140,7 @@ export default defineComponent({
     const { toolIconClick, updateLocale, isRenderVNode } = this
 
     return (
-      <NLayoutHeader class="layout-header" bordered>
+      <NLayoutHeader class="layout-header">
         <GlobalSearch v-model:show={this.globalSearchShown} />
         <NFlex
           class="layout-header__method"

src/layout/index.scss

@@ -21,3 +21,11 @@
     }
   }
 }
+
+.ray-template--light .r-layout-full__viewer-content {
+  box-shadow: 0 -1px 2px $layoutShadowColorLight;
+}
+
+.ray-template--dark .r-layout-full__viewer-content {
+  box-shadow: 0 -1px 2px $layoutShadowColorDark;
+}

src/store/modules/signing/index.ts

@@ -54,7 +54,7 @@ export const piniaSigningStore = defineStore(
           state.signingCallback = {
             role: 'admin',
             name: SigningForm.name,
-            avatar: 'https://r2chevereto.yka.moe/longmao.navigator.png',
+            avatar: 'https://avatars.githubusercontent.com/u/51957438?v=4',
           }
 
           resolve({
@@ -79,7 +79,7 @@ export const piniaSigningStore = defineStore(
      */
     const logout = () => {
       window.$message.info('账号退出中...')
-      removeStorage('__all_sessionStorage__')
+      removeStorage('__all_sessionStorage__', 'sessionStorage')
 
       setTimeout(() => window.location.reload())
     }

src/styles/setting.scss

@@ -9,3 +9,6 @@ $layoutContentBackgroundColorLight: #f7f9f8;
 $layoutFooterBackgroundColorDark: rgba(24, 24, 28, 1);
 // 底部区域背景色（light）
 $layoutFooterBackgroundColorLight: rgba(255, 255, 255, 1);
+// 区域阴影
+$layoutShadowColorLight: #0000001f;
+$layoutShadowColorDark: #000000b8;

src/types/modules/utils.ts

@@ -9,7 +9,17 @@ export type RemoveStorageKey =
   | '__all_sessionStorage__'
   | '__all_localStorage__'
 
-export type RemoveStorageType = StorageLike
+export type RemoveStorageFC = <T extends RemoveStorageKey>(
+  key: T,
+  storageType: T extends '__all__'
+    ? 'all'
+    : T extends '__all_sessionStorage__'
+    ? 'sessionStorage'
+    : T extends '__all_localStorage__'
+    ? 'localStorage'
+    : StorageLike,
+  options?: StorageOptions,
+) => void
 
 export type ValidateValueType =
   | 'BigUint64Array'

src/utils/cache.ts

@@ -11,12 +11,7 @@
 
 import { APP_CATCH_KEY_PREFIX } from '@/app-config'
 
-import type {
+import type { StorageLike, StorageOptions, RemoveStorageFC } from '@/types'
-  StorageLike,
-  RemoveStorageKey,
-  StorageOptions,
-  RemoveStorageType,
-} from '@/types'
 
 /**
  *
@@ -24,6 +19,7 @@ import type {
  * @param storageType 需要删除的缓存类型
  * @param options 配置项
  *
+ * @description
  * 查找当前缓存中是否含有某个 key
  * 默认查找 sessionStorage
  */
@@ -46,6 +42,7 @@ function hasStorage(
  * @param type 需要删除的缓存类型
  * @param options 配置项
  *
+ * @description
  * 设置缓存值，默认设置 sessionStorage
  */
 function setStorage<T = unknown>(
@@ -97,6 +94,7 @@ function getStorage<T = unknown>(
  * @param type 需要删除的缓存类型
  * @param options 配置项
  *
+ * @description
  * 获取缓存值，默认获取 sessionStorage
  */
 function getStorage<T = unknown>(
@@ -134,27 +132,23 @@ function getStorage<T = unknown>(
  * @param type 需要删除的缓存类型
  * @param options 配置项
  *
+ * @description
  * 删除缓存值，默认删除 sessionStorage
  *
  * 预保留了 __all__、__all_sessionStorage__、__all_localStorage__ 三个 key
  * 分别代表清空所有缓存、清空 sessionStorage 缓存、清空 localStorage 缓存
  *
  * @example
- * removeStorage('__all__') // 清空所有缓存
+ * removeStorage('__all__', 'all') // 清空所有缓存
- * removeStorage('__all_sessionStorage__') // 清空 sessionStorage 缓存
+ * removeStorage('__all_sessionStorage__', 'sessionStorage') // 清空 sessionStorage 缓存
- * removeStorage('__all_localStorage__') // 清空 localStorage 缓存
+ * removeStorage('__all_localStorage__', 'localStorage') // 清空 localStorage 缓存
- * removeStorage('signing') // 清空 session 中 signing 缓存字段
+ * removeStorage('signing', 'sessionStorage' || 'localStorage') // 清空 session 中 signing 缓存字段
  */
-function removeStorage(
+const removeStorage: RemoveStorageFC = (key, storageType, options) => {
-  key: RemoveStorageKey,
-  storageType: RemoveStorageType = 'sessionStorage',
-  options?: StorageOptions,
-) {
   if (!key) {
     console.error(
       `[removeStorage]: Failed to remove stored data: key ${key} is empty or undefined`,
     )
-
     return
   }
 
@@ -169,7 +163,6 @@ function removeStorage(
       : removeType === 'localStorage'
       ? localStorageKeys
       : sessionStorageKeys
-
     keys.forEach((curr) => {
       if (key === '__all__') {
         window.sessionStorage.removeItem(_prefix + curr)