feat: 首页消息的界面搭建

src/renderer/views/home/HomeTab.vue

@@ -1,8 +1,37 @@
 <template>
   <div class="bg-white h-full w-full p-[20px]">
-    <h1>首页 Dashboard</h1>
+    <div class="home-tab">
+      <message-list />
+      <div class="main-area">
+        <chat-guide />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-</script>
+import MessageList from './MessageList.vue'
+import ChatGuide from './ChatGuide.vue'
+</script>
+
+<style scoped>
+.home-tab {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+.home-tab > :first-child { flex: 0 0 260px }
+.main-area { flex: 1 1 auto; overflow: auto; padding: 20px }
+
+/* match MessageList scrollbar: 8px, subtle thumb */
+.main-area { scrollbar-width: auto }
+.main-area::-webkit-scrollbar { width: 8px }
+.main-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
+.main-area::-webkit-scrollbar-track { background: transparent }
+
+@media (max-width: 900px) {
+  .home-tab { flex-direction: column }
+  .home-tab > :first-child { flex: none; width: 100% }
+  .main-area { padding: 12px }
+}
+</style>