feat: back top style #ASM-14132

.changeset/thirty-knives-refuse.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+feat: optimizing back-to-top style

src/back-top/back-top.component.html

@@ -1,10 +1,17 @@
 <div
   class="aui-back-top"
-  (click)="handleClick($event)"
   [class.show]="isDisplayed$ | async"
 >
-  <aui-icon
-    icon="arrow_up_to_line"
-    class="aui-back-top__icon"
-  ></aui-icon>
+  <button
+    aui-button="text"
+    [square]="true"
+    [plain]="true"
+    (click)="handleClick($event)"
+    size="small"
+  >
+    <aui-icon
+      icon="arrow_up_to_line"
+      class="aui-back-top__icon"
+    ></aui-icon>
+  </button>
 </div>

src/back-top/back-top.component.scss

@@ -11,31 +11,15 @@ $block: 'aui-back-top';
 
   height: use-var(inline-height-m);
   width: use-var(inline-height-m);
-  color: use-rgb(n-4);
-  font-size: use-var(font-size-l);
-  border: 1px solid transparent;
   border-radius: use-var(border-radius-m);
   overflow: hidden;
   visibility: hidden;
   cursor: pointer;
   @include popper-shadow;
-  @include transition;
 
-  @include theme-light {
-    background-color: use-rgb(n-10);
-  }
-  @include theme-dark {
-    background-color: use-rgb(n-8);
-  }
+  background-color: use-rgb(n-10);
 
   &.show {
     visibility: visible;
   }
-
-  &:hover {
-    color: use-rgb(primary);
-    border-color: use-rgb(primary);
-    background-color: use-rgb(p-6);
-    box-shadow: none;
-  }
 }

src/back-top/back-top.component.ts

@@ -88,7 +88,7 @@ export class BackTopComponent {
   }
 
   handleClick(event: Event) {
-    this.scrollToTop(300);
+    this.scrollToTop(200);
     this.click.emit(event);
   }
 

src/back-top/back-top.module.ts

@@ -4,9 +4,10 @@ import { NgModule } from '@angular/core';
 import { IconModule } from '../icon/icon.module';
 
 import { BackTopComponent } from './back-top.component';
+import { ButtonModule } from '../button/button.module';
 
 @NgModule({
-  imports: [CommonModule, IconModule],
+  imports: [CommonModule, IconModule, ButtonModule],
   declarations: [BackTopComponent],
   exports: [BackTopComponent],
 })

stories/back-top/inscroll.stories.ts

@@ -3,14 +3,15 @@ import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 import InscrollComponent from './inscroll.component';
 
 import { BackTopModule, ScrollingModule } from '@alauda/ui';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 
 const meta: Meta<InscrollComponent> = {
   title: 'Example/Back Top',
   component: InscrollComponent,
   decorators: [
     moduleMetadata({
       declarations: [InscrollComponent],
-      imports: [BackTopModule, ScrollingModule],
+      imports: [BackTopModule, ScrollingModule, CdkScrollableModule],
     }),
   ],
 };