feat(chat): add avatar

koishijs · Apr 6, 2021 · 9ced6c1 · 9ced6c1
1 parent 6a48912
commit 9ced6c1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/packages/plugin-chat/client/chat.vue b/packages/plugin-chat/client/chat.vue
@@ -1,6 +1,7 @@
 <template>
   <k-chat-panel class="page-chat" :messages="messages" pinned @click="handleClick" @send="handleSend">
-    <template #default="{ channelName, username, timestamp, content }">
+    <template #default="{ avatar, channelName, username, timestamp, content }">
+      <img class="avatar" :src="avatar"/>
       <div class="header">
         <span class="channel">{{ channelName || '私聊' }}</span>
         <span class="username">{{ username }}</span>
@@ -54,8 +55,19 @@ function formatDateTime(timestamp: number) {
 
 <style lang="scss">
 
+$avatarSize: 2.5rem;
+
 .page-chat {
+  .avatar {
+    position: absolute;
+    margin-top: 4px;
+    width: $avatarSize;
+    height: $avatarSize;
+    border-radius: $avatarSize;
+  }
+
   .header {
+    padding-left: $avatarSize + 1rem;
     color: #72767d;
     span {
       margin-right: 0.5rem;
@@ -71,6 +83,10 @@ function formatDateTime(timestamp: number) {
   .timestamp {
     color: #72767d;
   }
+
+  .k-message {
+    padding-left: $avatarSize + 1rem;
+  }
 }
 
 </style>
diff --git a/packages/plugin-webui/client/components/card.vue b/packages/plugin-webui/client/components/card.vue
@@ -22,8 +22,8 @@ defineProps<{
 
 <style lang="scss" scoped>
 
-$paddingX: 1.2rem;
-$paddingY: 1.6rem;
+$paddingX: 1.25rem;
+$paddingY: 1.5rem;
 
 .k-card {
   margin: 0 auto 2rem;

diff --git a/packages/plugin-webui/client/components/chat-panel.vue b/packages/plugin-webui/client/components/chat-panel.vue
@@ -61,10 +61,11 @@ async function onPaste(event: ClipboardEvent) {
 
 $padding: 1.5rem;
 
-.k-chat-panel {
+.k-card.k-chat-panel {
   height: 100%;
 
   .k-card-body {
+    padding: 1rem 0.5rem;
     display: flex;
     flex-direction: column;
     height: -webkit-fill-available;
@@ -75,7 +76,15 @@ $padding: 1.5rem;
     overflow-y: auto;
   }
 
+  .k-chat-footer {
+    padding: 0 0.5rem;
+  }
+
   .k-chat-message {
+    position: relative;
+    line-height: 1.5rem;
+    padding: 0 0.5rem;
+
     &:hover {
       background-color: rgba(4, 4, 5, 0.2);
     }