conf

demo/demo-online-front/src/comp/chat/system-msg.vue

+<template>
+    <div style="margin: 20px;">
+        <div style="text-align: center;" v-if="message.evt === 'join'">
+            <span class="system-tip"><span style="color: #00a3fb;">{{user.nickname}}</span> 加入了群聊</span>
+        </div>
+        <div style="text-align: center;" v-else-if="message.evt === 'leave'">
+            <span class="system-tip"><span style="color: #00a3fb;">{{user.nickname}}</span> 退出了群聊</span>
+        </div>
+        <div style="text-align: center;" v-else-if="message.evt === 'turn'">
+            <span class="system-tip">请 {{message.ticket.order}} 号 <span style="color: #00a3fb;">{{user.nickname}}</span> 操作 {{message.ticket.slave}}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['message'],
+        data() {
+            return {}
+        },
+        computed: {
+            user() {
+                if (!this.message.sessionId) return {}
+                return this.$state.userSessionInfo[this.message.sessionId]
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .system-tip {
+        padding: 5px;
+        border-radius: 3px;
+        background: rgba(255, 255, 255, .2);
+        font-size: small;
+        color: #aaa;
+    }
+</style>
+

demo/demo-online-front/src/comp/chat/user-msg.vue

+<template>
+    <div>
+        <div v-if="!isSelf" style="display: flex; margin-bottom: 20px">
+            <img :src="user.avatar" style="border-radius: 50%;" alt="avatar" width="50"
+                 height="50">
+            <div style="display: flex; flex-direction: column;margin-left: 10px;">
+                <span style="font-size: small; color: #aaa">{{user.nickname}}</span>
+                <span class="msg-content">{{message.msg}}</span>
+            </div>
+        </div>
+        <div v-else style="display: flex; margin-bottom: 20px; flex-direction: row-reverse;">
+            <img :src="user.avatar" style="border-radius: 50%;" alt="avatar" width="50"
+                 height="50">
+            <div style="display: flex; flex-direction: column;margin-right: 10px; align-items: flex-end">
+                <span style="font-size: small; color: #aaa">{{user.nickname}}</span>
+                <span class="msg-content" style="background: #00aa49;">{{message.msg}}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['message'],
+        data() {
+            return {}
+        },
+        computed: {
+            user() {
+                return this.$state.userSessionInfo[this.message.from]
+            },
+            isSelf() {
+                console.log({a:this.message.from, b:this.$state.userSessionInfo.self.sessionId})
+                return this.message.from === this.$state.userSessionInfo.self.sessionId
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .msg-content {
+        background: white;
+        border: 1px solid #ddd;
+        padding: 10px;
+        border-radius: 10px;
+        max-width: 260px;
+        display: inline-block;
+        word-break: break-word;
+        word-wrap: break-word;
+    }
+</style>
+

server/pan-light-server.yaml

 Other:
+  debug: true
+  app-secret: qwertyuiop
+  mongodb-uri: mongodb://super:super@127.0.0.1:27017/admin?maxPoolSize=100
+  database: pan-light
+  redis:
+    addr: 127.0.0.1:6379
+    pwd: ''
+    db: 2
   demo:
     hosts:
-      -
-        name: asus-test
-        password: asus-test
-      -
-        name: asus-home
-        password: PeterQ-is-doomed-to-SucceSS
\ No newline at end of file
+    - name: asus-test
+      password: asus-test
+    - name: asus-home
+      password: PeterQ-is-doomed-to-SucceSS