feat(chat): add timestamp

koishijs · Apr 4, 2021 · d6509c3 · d6509c3
1 parent eb1ed85
commit d6509c3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/packages/plugin-chat/client/chat.vue b/packages/plugin-chat/client/chat.vue
@@ -1,8 +1,12 @@
 <template>
-  <k-chat-panel class="sandbox" :messages="messages" pinned>
-    <template #default="{ channelName, username, content }">
+  <k-chat-panel class="page-chat" :messages="messages" pinned>
+    <template #default="{ channelName, username, timestamp, content }">
       <p>
-        [{{ channelName || '私聊' }}] {{ username }}:
+        <div class="header">
+          <span class="channel">{{ channelName || '私聊' }}</span>
+          <span class="username">{{ username }}</span>
+          <span class="timestamp">{{ formatDateTime(timestamp) }}</span>
+        </div>
         <k-message :content="content"/>
       </p>
     </template>
@@ -24,4 +28,35 @@ receive('chat', (body) => {
   messages.value.push(body)
 })
 
+function formatDateTime(timestamp: number) {
+  const date = new Date(timestamp)
+  const now = new Date()
+  let output = `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
+  if (date.toLocaleDateString() === now.toLocaleDateString()) return output
+  output = `${date.getMonth() + 1} 月 ${date.getDate()} 日 ${output}`
+  if (date.getFullYear() === now.getFullYear()) return output
+  return `${date.getFullYear()} 年 ${output}`
+}
+
 </script>
+
+<style lang="scss">
+
+.page-chat {
+  .header {
+    span {
+      margin-right: 0.5rem;
+    }
+  }
+
+  .username {
+    font-weight: bold;
+    line-height: 1.375rem;
+  }
+
+  .timestamp {
+    color: #72767d;
+  }
+}
+
+</style>
diff --git a/packages/plugin-chat/src/debug.ts b/packages/plugin-chat/src/debug.ts
@@ -39,6 +39,7 @@ interface Message {
   selfId?: string
   channelName?: string
   groupName?: string
+  timestamp?: number
 }
 
 async function getUserName(bot: Bot, groupId: string, userId: string) {
@@ -149,7 +150,7 @@ export default function apply(ctx: Context, config: DebugConfig = {}) {
   }
 
   function handleMessage(session: Session) {
-    const params: Message = pick(session, ['content', 'platform', 'channelId', 'channelName', 'groupId', 'groupName', 'userId', 'selfId'])
+    const params: Message = pick(session, ['content', 'timestamp', 'platform', 'channelId', 'channelName', 'groupId', 'groupName', 'userId', 'selfId'])
     Object.assign(params, pick(session.author, ['username', 'nickname']))
     if (session.type === 'message') {
       userMap[session.uid] = [Promise.resolve(session.author.username), Date.now()]
@@ -166,8 +167,6 @@ export default function apply(ctx: Context, config: DebugConfig = {}) {
   async function dispatchMessage(session: Session, params: Message, timestamp: number) {
     await Promise.all([prepareChannelName, prepareGroupName, prepareAbstract].map(cb => cb(session, params, timestamp)))
 
-    console.log(params)
-
     // webui
     ctx?.webui?.adapter.broadcast('chat', params)