refactor: replace ContentWrapper with ScrollContainer across multiple views and remove ContentWrapper component

src/components/index.ts

@@ -3,11 +3,11 @@ export * from './button-animation'
 export { default as CollapseTransition } from './collapse-transition/CollapseTransition.vue'
 export * from './collapse-transition/CollapseTransition.vue'
 
-export { default as ContentWrapper } from './content-wrapper/ContentWrapper.vue'
-export * from './content-wrapper/ContentWrapper.vue'
-
 export { default as EmptyPlaceholder } from './empty-placeholder/EmptyPlaceholder.vue'
 export * from './empty-placeholder/EmptyPlaceholder.vue'
 
 export { default as HintHelp } from './hint-help/HintHelp.vue'
 export * from './hint-help/HintHelp.vue'
+
+export { default as ScrollContainer } from './scroll-container/ScrollContainer.vue'
+export * from './scroll-container/ScrollContainer.vue'

src/components/content-wrapper/ContentWrapper.test.ts → src/components/scroll-container/ScrollContainer.test.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 
-import { ContentWrapper } from '../index'
+import { ScrollContainer } from '../index'
 ;(window as any).matchMedia ||= (q: string) => ({
   matches: false,
   media: q,
@@ -15,9 +15,9 @@ import { ContentWrapper } from '../index'
   },
 })
 
-describe('ContentWrapper Component', () => {
+describe('ScrollContainer Component', () => {
   it('render component', () => {
-    const wrapper = mount(ContentWrapper, {
+    const wrapper = mount(ScrollContainer, {
       slots: {
         default: '<div class="context">context</div>',
       },

src/components/content-wrapper/ContentWrapper.vue → src/components/scroll-container/ScrollContainer.vue

@@ -9,15 +9,15 @@ import type { CSSProperties, ComponentPublicInstance } from 'vue'
 
 export interface ContentWrapperProps extends /* @vue-ignore */ ScrollbarProps {
   scrollable?: boolean
-  contentClass?: string
-  contentStyle?: CSSProperties
+  wrapperClass?: string
+  wrapperStyle?: CSSProperties
 }
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const { scrollable = true, contentClass, contentStyle } = defineProps<ContentWrapperProps>()
+const { scrollable = true, wrapperClass, wrapperStyle } = defineProps<ContentWrapperProps>()
 
 const { scrollbarInMainLayout } = useComponentThemeOverrides()
 
@@ -40,8 +40,8 @@ function forwardRef(ref: Element | ComponentPublicInstance | null) {
     >
       <div
         class="p-4 max-sm:p-2"
-        :class="contentClass"
-        :style="contentStyle"
+        :class="wrapperClass"
+        :style="wrapperStyle"
       >
         <slot />
       </div>
@@ -49,8 +49,8 @@ function forwardRef(ref: Element | ComponentPublicInstance | null) {
     <div
       v-else
       class="h-full p-4 max-sm:p-2"
-      :class="contentClass"
-      :style="contentStyle"
+      :class="wrapperClass"
+      :style="wrapperStyle"
     >
       <slot />
     </div>

src/views/about/index.vue

@@ -3,7 +3,7 @@ import { NCard, NSplit, NButton, NScrollbar, NTag } from 'naive-ui'
 import { onMounted, ref } from 'vue'
 
 import packageJson from '@/../package.json'
-import { ContentWrapper } from '@/components'
+import { ScrollContainer } from '@/components'
 import { useInjection } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
 
@@ -57,9 +57,6 @@ const dir = ` 📂 lithe-admin
 │    └── 📂 collapse-transition/
 │      ├── 📄 CollapseTransition.test.ts
 │      ├── 📄 CollapseTransition.vue
-│    └── 📂 content-wrapper/
-│      ├── 📄 ContentWrapper.test.ts
-│      ├── 📄 ContentWrapper.vue
 │    └── 📂 empty-placeholder/
 │      ├── 📄 EmptyPlaceholder.test.ts
 │      ├── 📄 EmptyPlaceholder.vue
@@ -67,6 +64,9 @@ const dir = ` 📂 lithe-admin
 │      ├── 📄 HintHelp.test.ts
 │      ├── 📄 HintHelp.vue
 │    ├── 📄 index.ts
+│    └── 📂 scroll-container/
+│      ├── 📄 ScrollContainer.test.ts
+│      ├── 📄 ScrollContainer.vue
 │  └── 📂 composables/
 │    ├── 📄 index.ts
 │    ├── 📄 useComponentModifier.ts
@@ -215,7 +215,7 @@ onMounted(async () => {
 })
 </script>
 <template>
-  <ContentWrapper content-class="flex flex-col gap-y-2">
+  <ScrollContainer wrapper-class="flex flex-col gap-y-2">
     <NCard
       :title="`关于 ${APP_NAME}`"
       :size="isMaxMd ? 'small' : undefined"
@@ -340,5 +340,5 @@ onMounted(async () => {
         </NSplit>
       </NCard>
     </div>
-  </ContentWrapper>
+  </ScrollContainer>
 </template>

src/views/dashboard/index.vue

@@ -5,7 +5,7 @@ import * as echarts from 'echarts'
 import { NNumberAnimation } from 'naive-ui'
 import { onMounted, watch, ref, computed, onUnmounted } from 'vue'
 
-import { ContentWrapper } from '@/components'
+import { ScrollContainer } from '@/components'
 import { toRefsPreferencesStore } from '@/stores'
 import twc from '@/utils/tailwindColor'
 
@@ -1108,7 +1108,7 @@ watch([isDark, themeColor], () => {
 })
 </script>
 <template>
-  <ContentWrapper content-class="flex flex-col gap-y-4 max-sm:gap-y-2">
+  <ScrollContainer wrapper-class="flex flex-col gap-y-4 max-sm:gap-y-2">
     <div class="grid grid-cols-1 gap-4 max-sm:gap-2 md:grid-cols-2 lg:grid-cols-4">
       <div
         v-for="{
@@ -1215,5 +1215,5 @@ watch([isDark, themeColor], () => {
         </div>
       </div>
     </div>
-  </ContentWrapper>
+  </ScrollContainer>
 </template>

src/views/data-show/data-form/index.vue

@@ -22,7 +22,7 @@ import {
 } from 'naive-ui'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
-import { ContentWrapper } from '@/components'
+import { ScrollContainer } from '@/components'
 import { useInjection, useResettableReactive } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
 
@@ -221,7 +221,7 @@ watch(
 )
 </script>
 <template>
-  <ContentWrapper content-class="flex flex-col gap-y-2">
+  <ScrollContainer wrapper-class="flex flex-col gap-y-2">
     <NAlert
       type="info"
       closable
@@ -543,5 +543,5 @@ watch(
         </template>
       </NSplit>
     </NCard>
-  </ContentWrapper>
+  </ScrollContainer>
 </template>

src/views/data-show/data-table/index.vue

@@ -19,7 +19,7 @@ import {
 } from 'naive-ui'
 import { defineComponent, reactive, ref, useTemplateRef, nextTick } from 'vue'
 
-import { ContentWrapper } from '@/components'
+import { ScrollContainer } from '@/components'
 import { useInjection, useComponentModifier, useResettableReactive } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
 
@@ -438,8 +438,8 @@ async function getDataList() {
 getDataList()
 </script>
 <template>
-  <ContentWrapper
-    content-class="flex flex-col gap-y-2"
+  <ScrollContainer
+    wrapper-class="flex flex-col gap-y-2"
     :scrollable="isMaxLg"
   >
     <NAlert
@@ -615,5 +615,5 @@ getDataList()
       v-bind="dropdownOptions"
       :show="enableContextmenu && showDropdown"
     />
-  </ContentWrapper>
+  </ScrollContainer>
 </template>

src/views/drag-drop/index.vue

@@ -3,7 +3,7 @@ import { NAlert, NCard, NSplit, NScrollbar, NButton } from 'naive-ui'
 import { ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
-import { ContentWrapper, EmptyPlaceholder } from '@/components'
+import { ScrollContainer, EmptyPlaceholder } from '@/components'
 import { useInjection } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
 
@@ -115,7 +115,7 @@ watch(
 )
 </script>
 <template>
-  <ContentWrapper content-class="flex flex-col gap-y-2">
+  <ScrollContainer wrapper-class="flex flex-col gap-y-2">
     <NAlert
       type="info"
       closable
@@ -301,5 +301,5 @@ watch(
         </template>
       </NSplit>
     </NCard>
-  </ContentWrapper>
+  </ScrollContainer>
 </template>

src/views/dynamic-route/index.vue

@@ -2,7 +2,7 @@
 import { NCard, NAlert, NButton } from 'naive-ui'
 import { RouterLink, useRouter } from 'vue-router'
 
-import { ContentWrapper } from '@/components'
+import { ScrollContainer } from '@/components'
 import { useInjection } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
 
@@ -15,7 +15,7 @@ defineOptions({
 const router = useRouter()
 </script>
 <template>
-  <ContentWrapper content-class="flex flex-col gap-y-2">
+  <ScrollContainer wrapper-class="flex flex-col gap-y-2">
     <NAlert
       type="info"
       closable
@@ -47,5 +47,5 @@ const router = useRouter()
         </RouterLink>
       </div>
     </NCard>
-  </ContentWrapper>
+  </ScrollContainer>
 </template>

src/views/error-page/404.vue

@@ -2,7 +2,7 @@
 import { NButton, NAlert } from 'naive-ui'
 import { reactive } from 'vue'
 
-import { ContentWrapper } from '@/components'
+import { ScrollContainer } from '@/components'
 import router from '@/router'
 
 import ErrorPage from './index.vue'
@@ -23,7 +23,7 @@ const changeStateCode200 = () => {
 }
 </script>
 <template>
-  <ContentWrapper>
+  <ScrollContainer>
     <NAlert
       type="info"
       closable
@@ -64,5 +64,5 @@ const changeStateCode200 = () => {
         >
       </ErrorPage>
     </div>
-  </ContentWrapper>
+  </ScrollContainer>
 </template>

src/views/feedback/index.vue

@@ -2,7 +2,7 @@
 import { NAlert, NCard, useMessage, NButton, useModal, NModal, useNotification } from 'naive-ui'
 import { reactive } from 'vue'
 
-import { ContentWrapper } from '@/components'
+import { ScrollContainer } from '@/components'
 
 import type { ModalProps } from 'naive-ui'
 
@@ -77,7 +77,7 @@ const createDialogApi = (type: ModalProps['type'] = 'success') => {
 }
 </script>
 <template>
-  <ContentWrapper content-class="flex flex-col gap-y-2">
+  <ScrollContainer wrapper-class="flex flex-col gap-y-2">
     <NAlert
       type="info"
       closable
@@ -460,5 +460,5 @@ const createDialogApi = (type: ModalProps['type'] = 'success') => {
       negative-text="算了"
     >
     </NModal>
-  </ContentWrapper>
+  </ScrollContainer>
 </template>

src/views/multi-level-menu/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 
-import { ContentWrapper } from '@/components'
+import { ScrollContainer } from '@/components'
 
 const route = useRoute()
 </script>
 <template>
-  <ContentWrapper>
+  <ScrollContainer>
     <div class="flex h-96 items-center justify-center text-3xl">
       {{ route.meta.title }}
     </div>
-  </ContentWrapper>
+  </ScrollContainer>
 </template>