feat(标题栏): 添加返回按钮和标题显示功能

- 在TitleBarControls组件中新增返回按钮和标题显示功能
- 更新设置页面布局，使用新的标题栏组件
- 添加全局滚动条样式美化

src/renderer/src/assets/base.css

@@ -37,3 +37,28 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* 全局滚动条样式 */
+* {
+  &::-webkit-scrollbar {
+      width: 0.375rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 0.1875rem;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 0.1875rem;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background: #94a3b8;
+      }
+    }
+     /* Firefox 滚动条样式 */
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 #f1f5f9;
+}

src/renderer/src/components/TitleBarControls.vue

@@ -9,11 +9,15 @@ type ControlStyle = 'traffic-light' | 'windows'
 interface Props {
   controlStyle?: ControlStyle
   showSettings?: boolean
+  showBack?: boolean
+  title?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   controlStyle: 'windows',
-  showSettings: true
+  showSettings: true,
+  showBack: false,
+  title: ''
 })
 
 // Mini 模式现在是直接隐藏到系统托盘，不需要状态跟踪
@@ -49,10 +53,34 @@ const handleSettings = (): void => {
   // 跳转到设置页面
   router.push('/settings')
 }
+
+const handleBack = (): void => {
+  // 返回上一页
+  router.back()
+}
 </script>
 
 <template>
   <div :class="controlsClass">
+    <div class="left">
+      <div class="back-box">
+        <t-button
+          v-if="showBack"
+          shape="circle"
+          theme="default"
+          variant="text"
+          class="control-btn back-btn"
+          title="返回"
+          @click="handleBack"
+        >
+          <i class="iconfont icon-xiangzuo"></i>
+        </t-button>
+      </div>
+      <div class="title-box">
+        <p>{{ title }}</p>
+      </div>
+    </div>
+
     <!-- 设置按钮 -->
     <t-button
       v-if="showSettings"
@@ -126,6 +154,7 @@ const handleSettings = (): void => {
   -webkit-app-region: no-drag;
   display: flex;
   align-items: center;
+  width: 100%;
   gap: 0.25rem;
 
   .control-btn {
@@ -146,6 +175,27 @@ const handleSettings = (): void => {
     }
   }
 
+  .left {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 1;
+    .back-box {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      .back-btn {
+        margin-right: 0.5rem;
+        &:hover {
+          background-color: #f3f4f6;
+        }
+      }
+    }
+    .title-box {
+      flex: 1;
+    }
+  }
+
   .settings-btn {
     margin-right: 0.5rem;
 

src/renderer/src/views/settings/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import TitleBarControls from '@renderer/components/TitleBarControls.vue'
 import { ref } from 'vue'
-
+const osType = ref(1)
 // 当前选择的控制风格
 const currentStyle = ref<'windows' | 'traffic-light'>('windows')
 
@@ -12,7 +12,16 @@ const switchStyle = (style: 'windows' | 'traffic-light'): void => {
 </script>
 
 <template>
+  <div class="main-container">
+    <div class="header">
+      <TitleBarControls
+        title="设置"
+        :control-style="osType === 0 ? 'windows' : 'traffic-light'"
+        :show-back="true"
+      />
+    </div>
     <div class="settings-container">
+      <div class="settings-content">
         <div class="settings-header">
           <h2>标题栏控制组件演示</h2>
           <p>这里展示了两种不同风格的标题栏控制按钮</p>
@@ -112,15 +121,40 @@ const switchStyle = (style: 'windows' | 'traffic-light'): void => {
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
+.main-container {
+  height: 100vh;
+  overflow: hidden;
+}
+.header {
+  -webkit-app-region: drag;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  padding: 1.5rem;
+  position: sticky;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
 .settings-container {
+  width: 100%;
   padding: 2rem;
+  overflow-y: scroll;
+  max-height: 100vh;
+}
+
+.settings-content {
   max-width: 800px;
   margin: 0 auto;
   background: #fff;
-  min-height: 100vh;
+  padding: 2rem;
 }
 
 .settings-header {