feat: optimize scrollbars resolve #9 (#10)

Synaptrix · Mar 19, 2023 · 3806a6e · 3806a6e
1 parent 8357910
commit 3806a6e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
@@ -1,4 +1,20 @@
 @import './reset.scss';
+@import './theme.scss';
+
+* {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: var(--scroll-thumb-color);
+
+    &:hover {
+      background-color: var(--scroll-thumb-color-hover);
+    }
+  }
+}
 
 html {
   background-color: transparent !important;
@@ -65,3 +81,4 @@ body {
   color: rgb(var(--primary-6));
   background-color: transparent;
 }
+
diff --git a/src/assets/css/theme.scss b/src/assets/css/theme.scss
@@ -0,0 +1,11 @@
+body {
+  --scroll-thumb-color: #c0c0c0;
+  --scroll-thumb-color-hover: #a7a7a7;
+  --scroll-track-color: #f1f1f1;
+}
+
+body[theme-mode="dark"] {
+  --scroll-thumb-color: #686868;
+  --scroll-thumb-color-hover: #7a7a7a;
+  --scroll-track-color: #444;
+}
diff --git a/src/components/Session/index.vue b/src/components/Session/index.vue
@@ -11,11 +11,23 @@ const marked = new MarkdownIt().use(MarkdownItHighlight).use(MarkdownItCodeCopy)
 const { uuid } = storeToRefs(useSettingsStore())
 const { sessionDataList } = storeToRefs(useSessionStore())
 const { currentRole } = storeToRefs(useRoleStore())
+
+const sessionElement = ref<HTMLDivElement | null>(null)
+
+watchEffect(() => {
+  if (!sessionElement.value) return
+
+  if (sessionDataList.value.at(-1)?.message?.content) {
+    sessionElement.value.scrollTo({
+      top: sessionElement.value.offsetHeight
+    })
+  }
+})
 </script>
 
 <template>
   <!-- TODO: 复制，一键发送，导出图片-->
-  <div class="session flex-1 cursor-default overflow-auto">
+  <div ref="sessionElement" class="session flex-1 cursor-default overflow-auto">
     <template v-if="sessionDataList.length">
       <div
         :id="`session-${item.id}`"