perf: improve the shadow in the upper and lower areas when the scrolling area is scrolling,close #20, close #26

Author: anncwb

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -118,9 +118,10 @@ const hiddenSideStyle = computed((): CSSProperties => {
 });
 
 const style = computed((): CSSProperties => {
-  const { isSidebarMixed, paddingTop, zIndex } = props;
+  const { isSidebarMixed, paddingTop, theme, zIndex } = props;
 
   return {
+    '--scroll-shadow': theme === 'dark' ? 'var(--menu-dark)' : 'var(--menu)',
     ...calcMenuWidthStyle(false),
     paddingTop: `${paddingTop}px`,
     zIndex,

packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue

@@ -28,18 +28,40 @@ function handleScroll(event: Event) {
 
 <template>
   <ScrollArea
-    :class="[
-      cn(props.class),
-      {
-        // 'shadow-none': isAtTop && isAtBottom,
-        // shadow: !isAtTop || !isAtBottom,
-        // 'dark:shadow-white/20': !isAtTop || !isAtBottom,
-        // 'shadow-inner': !isAtBottom,
-        // 'dark:shadow-inner-white/20': !isAtBottom,
-      },
-    ]"
+    :class="[cn(props.class)]"
     :on-scroll="handleScroll"
+    class="relative"
   >
+    <div
+      :class="{
+        'opacity-100': !isAtTop,
+      }"
+      class="scrollbar-top-shadow pointer-events-none absolute top-0 z-10 h-16 w-full opacity-0 transition-opacity duration-1000 ease-in-out will-change-[opacity]"
+    ></div>
     <slot></slot>
+    <div
+      :class="{
+        'opacity-100': !isAtTop && !isAtBottom,
+      }"
+      class="scrollbar-bottom-shadow pointer-events-none absolute bottom-0 z-10 h-16 w-full opacity-0 transition-opacity duration-1000 ease-in-out will-change-[opacity]"
+    ></div>
   </ScrollArea>
 </template>
+
+<style scoped>
+.scrollbar-top-shadow {
+  background: linear-gradient(
+    to bottom,
+    hsl(var(--scroll-shadow, var(--background))),
+    transparent
+  );
+}
+
+.scrollbar-bottom-shadow {
+  background: linear-gradient(
+    to top,
+    hsl(var(--scroll-shadow, var(--background))),
+    transparent
+  );
+}
+</style>

packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue

@@ -17,7 +17,7 @@ defineOptions({
 });
 
 const modelValue = defineModel<string>({ default: 'auto' });
-const appSemiDarkMenu = defineModel<boolean>('appSemiDarkMenu', {
+const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu', {
   default: true,
 });
 
@@ -75,7 +75,7 @@ function nameView(name: string) {
     </template>
 
     <SwitchItem
-      v-model="appSemiDarkMenu"
+      v-model="themeSemiDarkMenu"
       :disabled="modelValue !== 'light'"
       class="mt-6"
     >

packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue

@@ -61,7 +61,6 @@ const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
 const appLayout = defineModel<LayoutType>('appLayout');
 const appColorGrayMode = defineModel<boolean>('appColorGrayMode');
 const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
-const appSemiDarkMenu = defineModel<boolean>('appSemiDarkMenu');
 const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
 
 const transitionProgress = defineModel<boolean>('transitionProgress');
@@ -73,6 +72,7 @@ const themeColorPrimary = defineModel<string>('themeColorPrimary');
 const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
 const themeMode = defineModel<ThemeModeType>('themeMode');
 const themeRadius = defineModel<string>('themeRadius');
+const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu');
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
 const sidebarWidth = defineModel<number>('sidebarWidth');
@@ -269,7 +269,7 @@ async function handleReset() {
             <Block :title="$t('preferences.theme.title')">
               <Theme
                 v-model="themeMode"
-                v-model:app-semi-dark-menu="appSemiDarkMenu"
+                v-model:theme-semi-dark-menu="themeSemiDarkMenu"
               />
             </Block>
             <!-- <Block :title="$t('preferences.theme-color')">