From d0847ee6f9d66bd0a8b39c2ead6002a239a4ad74 Mon Sep 17 00:00:00 2001
From: ray_wuhao <443547225@qq.com>
Date: Wed, 31 May 2023 17:15:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=B7=AF=E7=94=B1=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=88=9D=E5=A7=8B=E5=8C=96=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=EF=BC=8C=E8=AE=A9=E4=BB=96=E6=98=BE=E5=BE=97?=
 =?UTF-8?q?=E6=B2=A1=E9=82=A3=E4=B9=88=E8=A0=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/appConfig/routerConfig.ts          |  9 +++++++++
 src/icons/{AA_READMEmd => A_README.md} |  0
 src/layout/index.tsx                   |  7 ++++++-
 src/router/{remark.md => README.md}    |  4 +++-
 src/router/type.ts                     |  4 ++--
 src/router/utils/viewScrollTop.ts      | 27 ++++++++------------------
 6 files changed, 28 insertions(+), 23 deletions(-)
 rename src/icons/{AA_READMEmd => A_README.md} (100%)
 rename src/router/{remark.md => README.md} (71%)

diff --git a/src/appConfig/routerConfig.ts b/src/appConfig/routerConfig.ts
index 085dbef4..237d3189 100644
--- a/src/appConfig/routerConfig.ts
+++ b/src/appConfig/routerConfig.ts
@@ -11,5 +11,14 @@
 
 /** vue-router 相关配置入口 */
 
+import type { LayoutInst } from 'naive-ui'
+
 /** 路由切换容器区域 id 配置 */
 export const viewScrollContainerId = 'rayLayoutContentWrapperScopeSelector'
+
+/**
+ *
+ * 内容区域 ref 注册
+ * 可以控制内容区域当前滚动位置
+ */
+export const LAYOUT_CONTENT_REF = ref<LayoutInst>()
diff --git a/src/icons/AA_READMEmd b/src/icons/A_README.md
similarity index 100%
rename from src/icons/AA_READMEmd
rename to src/icons/A_README.md
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 9baee90d..63f7d8ae 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -16,7 +16,10 @@ import ContentWrapper from '@/layout/default/ContentWrapper'
 import FooterWrapper from '@/layout/default/FooterWrapper'
 
 import { useSetting, useMenu } from '@/store'
-import { viewScrollContainerId } from '@/appConfig/routerConfig'
+import {
+  viewScrollContainerId,
+  LAYOUT_CONTENT_REF,
+} from '@/appConfig/routerConfig'
 
 const Layout = defineComponent({
   name: 'Layout',
@@ -53,6 +56,7 @@ const Layout = defineComponent({
       modelMenuTagSwitch,
       cssVarsRef,
       isLock,
+      LAYOUT_CONTENT_REF,
     }
   },
   render() {
@@ -68,6 +72,7 @@ const Layout = defineComponent({
               <SiderBar />
               {this.modelMenuTagSwitch ? <MenuTag /> : ''}
               <NLayoutContent
+                ref="LAYOUT_CONTENT_REF"
                 class="layout-content__router-view"
                 nativeScrollbar={false}
                 {...{ id: viewScrollContainerId }}
diff --git a/src/router/remark.md b/src/router/README.md
similarity index 71%
rename from src/router/remark.md
rename to src/router/README.md
index 9c0996f0..a007e853 100644
--- a/src/router/remark.md
+++ b/src/router/README.md
@@ -8,6 +8,7 @@ interface RouteMeta {
   role?: string[]
   hidden?: boolean
   noLocalTitle?: string | number
+  ignoreAutoResetScroll?: boolean
 }
 ```
 
@@ -16,8 +17,9 @@ interface RouteMeta {
 ```
 i18nKey: i18n 国际化 key, 会优先使用该字段
 icon: icon 图标, 用于 Menu 菜单(依赖 RayIcon 组件实现)
-windowOpen: 超链接打开
+windowOpen: 超链接打开（新开窗口打开）
 role: 权限表
 hidden: 是否显示
 noLocalTitle: 不使用国际化渲染 Menu Titile
+ignoreAutoResetScroll: 该页面内容区域自动初始化滚动条位置
 ```
diff --git a/src/router/type.ts b/src/router/type.ts
index 7007f4d5..b4ee936a 100644
--- a/src/router/type.ts
+++ b/src/router/type.ts
@@ -9,14 +9,14 @@ export type Component<T = any> =
   | (() => Promise<typeof import('*.vue')>)
   | (() => Promise<T>)
 
-export interface AppRouteMeta extends IUnknownObjectKey {
+export interface AppRouteMeta {
   i18nKey?: string
   icon?: string
   windowOpen?: string
   role?: string[]
   hidden?: boolean
   noLocalTitle?: string | number
-  ignoreResetScroll?: boolean
+  ignoreAutoResetScroll?: boolean
 }
 
 // @ts-ignore
diff --git a/src/router/utils/viewScrollTop.ts b/src/router/utils/viewScrollTop.ts
index 8b837cde..901ed8c6 100644
--- a/src/router/utils/viewScrollTop.ts
+++ b/src/router/utils/viewScrollTop.ts
@@ -1,5 +1,4 @@
-import { getElement } from '@/utils/element'
-import { viewScrollContainerId } from '@/appConfig/routerConfig'
+import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
 
 import type { RouteLocationNormalized } from 'vue-router'
 
@@ -8,28 +7,18 @@ import type { RouteLocationNormalized } from 'vue-router'
  * 切换路由时, 手动将容器区域回归默认值
  *
  * 由于官方不支持这个方法了, 所以自己手写了一个
- * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreResetScroll 属性即可
- *
- * 找到滚动元素容器的写法有点丑陋, 暂时也想不到啥好方法解决, 就凑合一下吧
+ * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreAutoResetScroll 属性即可
  */
 const scrollViewToTop = (route: RouteLocationNormalized) => {
   const { meta } = route
 
   /** 这个 id 是注入在 layout 中 */
-  if (!meta?.ignoreResetScroll) {
-    const scrollViewRoot = getElement(`#${viewScrollContainerId}`)?.[0]
-
-    if (scrollViewRoot && typeof scrollViewRoot.scroll) {
-      /** 找到 NLayoutContent 组件滚动元素 */
-      const scrollView = scrollViewRoot?.firstElementChild
-        ?.firstChild as HTMLElement
-
-      scrollView?.scroll({
-        top: 0,
-        left: 0,
-        behavior: 'smooth',
-      })
-    }
+  if (!meta?.ignoreAutoResetScroll) {
+    LAYOUT_CONTENT_REF.value?.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    })
   }
 }