feat: 聊天页面基本布局结构

Author: ProgramCX

components.d.ts

@@ -8,6 +8,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ChatContent: typeof import('./src/components/mainwindow/ChatView/ChatContent.vue')['default']
+    ChatInput: typeof import('./src/components/mainwindow/ChatView/ChatInput.vue')['default']
+    ChatTitle: typeof import('./src/components/mainwindow/ChatView/ChatTitle.vue')['default']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElLink: typeof import('element-plus/es')['ElLink']

public/assets/svg/more_16.svg

@@ -0,0 +1,29 @@
+<template>
+  <div class="chat-content">
+    <div class="chat-inner-content">
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.chat-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  border-bottom: 1px solid var(--border-bottom-color);
+  .chat-inner-content {
+    width: 100%;
+    height: calc(100vh - 220px);
+    overflow-y: auto;
+  }
+}
+
+</style>

public/assets/svg/more_24.svg

@@ -0,0 +1,18 @@
+<template>
+  <div class="chat-input">
+    22222222
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped lang="scss">
+  .chat-input{
+    min-height: 150px;
+    height: 100%;
+    background: var(--bar-gradient-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/components/mainwindow/ChatView/ChatContent.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="message-list-item-right flex-column-justify-center">
       <span id="date">{{ props.data.dateTime }}</span>
-      <el-badge :value="props.data.unreadCount??0" :is-dot="props.data.notDisturb" badge-style="height:15px;font-size:10px;display:flex;align-items:center"/>
+      <el-badge :value="props.data.unreadCount??0" :v-if="props.data.unreadCount??0!=0" :is-dot="props.data.notDisturb" :badge-style="props.data.notDisturb?'':'height:15px;font-size:10px;display:flex;align-items:center'"/>
     </div>
   </div>
 </template>
@@ -79,6 +79,7 @@ const props = defineProps<{
 
   .message-list-item-right{
     gap: 8px;
+    align-items: flex-end;
     #date{
       font-size: 10px;
       color: var(--tip-grey-fore-color);

src/components/mainwindow/ChatView/ChatInput.vue

@@ -6,9 +6,9 @@ date: 2025-04-07
 <template>
     <div class="sidebar" style="width: 60px;">
         <div class="sidebar-content flex-column-space-between">
-            <div class="left flex-column">
+            <div class="left flex-column-justify-center">
                 <h3 style="color: white;">FM</h3>
-                <img src="../../assets/png/avatar.png.jpg" alt="logo" class="logo" width="35" />
+                <img src="../../assets/png/avatar.png.jpg" alt="logo" class="logo" :width="35" />
                 <NavBar :items="navData" />
             </div>
             <div class="right flex-column">
@@ -107,6 +107,8 @@ onMounted(() => {
         };
    }
 });
+
+
 </script>
 <style lang="scss" scoped>
 .sidebar {
@@ -121,8 +123,8 @@ onMounted(() => {
 .sidebar-content {
     width: 100%;
     height: 100%;
-    padding: 0 10px;
-
+    padding: 0 15px;
+    align-items: center;
     .left,
     .right {
         gap: 10px;

src/components/mainwindow/MessageList/MessageListItem.vue

@@ -57,6 +57,11 @@ html.dark {
 
   --grey-button-background-color: #393939;
   --grey-button-background-color-hover: #222222;
+
+  --topbar-icon-color: var(--main-fore-color);
+  --topbar-icon-color-hover: #0066CC ;
+
+  --border-bottom-color: #393B40;
 }
 
 html {
@@ -108,6 +113,11 @@ html {
   color: var(--main-fore-color);
 
   --pop-menu-border-color:none;
+
+  --topbar-icon-color: var(--main-fore-color);
+  --topbar-icon-color-hover:var(--sidebar-background-color) ;
+
+  --border-bottom-color: #d9d9d9;
 }
 
 
@@ -208,8 +218,8 @@ body {
 
 /* 为滚动条整体设置样式 */
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 6px;
+  height: 6px;
 }
 
 /* 为滚动条的轨道设置样式 */
@@ -220,12 +230,12 @@ body {
 
 /* 为滚动条的滑块设置样式 */
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(144, 147, 153, .5);
+  background-color: rgba(144, 147, 153, .3);
   border-radius: 2em;
   transition: background-color .3s;
 }
 
 /* 当鼠标悬停在滑块上时改变滑块的颜色 */
 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(144, 147, 153, .3);
+  background-color: rgba(144, 147, 153, .1);
 }

src/components/mainwindow/SideBar.vue

@@ -24,6 +24,7 @@ import Max from '/assets/svg/max_24.svg';
 import Brush from '/assets/svg/brush_24.svg';
 import Search from '/assets/svg/search.svg';
 import Add from '/assets/svg/add_24.svg';
+import More from '/assets/svg/more_24.svg';
 // 图标 key 类型
 export type IconKey =
   | 'message'
@@ -45,7 +46,8 @@ export type IconKey =
   | 'max'
   | 'brush'
   | 'search'
-  | 'add';
+  | 'add'
+  | 'more';
 
 // 图标映射表
 export const iconMap: Record<IconKey, string> = {
@@ -69,5 +71,6 @@ export const iconMap: Record<IconKey, string> = {
   brush: Brush,
   search: Search,
   add: Add,
+  more: More,
 };
 

src/style.css

@@ -1,17 +1,26 @@
 <template>
-    <div class="chat-view">
-        
+    <div class="chat-view" v-if="!isBlank">
+      <ChatTitle title="Chat Title" type="personal"/>
+      <ChatContent/>
+      <ChatInput/>
     </div>
+    <div class="chat-body" v-else></div>
 </template>
 <script setup lang="ts">
+import { ref} from 'vue';
+import ChatTitle from "@/components/mainwindow/ChatView/ChatTitle.vue";
+import ChatContent from "@/components/mainwindow/ChatView/ChatContent.vue";
+import ChatInput from "@/components/mainwindow/ChatView/ChatInput.vue";
+const isBlank = ref<boolean>(false);
 </script>
 <style lang="scss" scoped>
 .chat-view{
     min-height: 100vh;
     width: 100%;
     height: 100%;
-    padding: 0;
     background: var(--bar-gradient-color); 
-    
+    display: flex;
+    flex-direction: column;
+
 }
 </style>