条件样式

src/App.vue

@@ -7,7 +7,7 @@
             <b-avatar
               button
               variant="primary"
-              :text="avatarAbbr"
+              :text="avatarAbbr(nickname)"
               size="4em"
               class="my-3"
             ></b-avatar>
@@ -21,32 +21,45 @@
         </b-row>
       </b-container>
     </div>
+    <b-alert
+      v-model="error"
+      class="position-fixed fixed-top m-3"
+      variant="danger"
+      dismissible
+    >
+      Error: {{ loginInfo }}
+    </b-alert>
     <div class="vh-100 d-flex flex-column" v-if="loggedIn">
       <div class="flex-fill overflow-auto pt-3 px-3">
-        <div class="d-flex my-2">
-          <b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
-          <div class="d-flex flex-column">
-            <p class="my-1">Zhao Zuohong</p>
-            <b-button variant="primary" class="mb-2 mr-5 text-left"
-              >Earth is the third planet from the Sun and the only astronomical
-              object known to harbor life.</b-button
+        <div
+          v-for="(msg, index) in messages"
+          :key="index"
+          class="d-flex my-2"
+          :class="{ 'flex-row-reverse': nickname == msg.nickname }"
         >
-          </div>
-        </div>
-        <div class="d-flex flex-row-reverse my-2">
-          <b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
+          <b-avatar
+            :variant="nickname == msg.nickname ? 'success' : 'primary'"
+            :text="msg.avatar"
+            class="my-2 mr-2"
+            :class="nickname == msg.nickname ? 'ml-2' : 'mr-2'"
+          >
+          </b-avatar>
           <div class="d-flex flex-column">
-            <p class="my-1 text-right">Zhao Zuohong</p>
-            <b-button variant="success" class="mb-2 ml-5 text-left"
-              >It is the densest planet in the Solar System and the largest and
-              most massive of the four rocky planets.</b-button
+            <p class="my-1" :class="{ 'text-right': nickname == msg.nickname }">
+              {{ msg.nickname }}
+            </p>
+            <b-button
+              :variant="nickname == msg.nickname ? 'success' : 'primary'"
+              class="mb-2 text-left"
+              :class="nickname == msg.nickname ? 'ml-5' : 'mr-5'"
+              >{{ msg.message }}</b-button
             >
           </div>
         </div>
       </div>
-      <b-form class="d-flex m-3">
-        <b-form-input class="flex-fill mr-2"> </b-form-input>
-        <b-button pill variant="success">Button</b-button>
+      <b-form class="d-flex m-3" @submit.prevent="sendMessage">
+        <b-form-input class="flex-fill mr-2" v-model="message"> </b-form-input>
+        <b-button pill variant="success" type="submit">Button</b-button>
       </b-form>
     </div>
   </div>
@@ -56,14 +69,23 @@
 import { Component, Vue } from "vue-property-decorator";
 import { ipcRenderer } from "electron";
 
+interface Message {
+  avatar: string;
+  nickname: string;
+  message: string;
+}
+
 @Component
 export default class App extends Vue {
-  private nickname = "";
-  private loggedIn = false;
-  private error = true;
-  get avatarAbbr(): string {
+  private nickname = "Zhao Zuohong";
+  private loggedIn = true;
+  private error = false;
+  private loginInfo = "";
+  private message = "";
+  private messages: Array<Message> = [];
+  public avatarAbbr(nickname: string): string {
     const chineseChar = new RegExp("[\u4E00-\u9FA5]");
-    let firstChar = this.nickname.charAt(0);
+    let firstChar = nickname[0];
     if (chineseChar.test(firstChar)) {
       return firstChar;
     } else {
@@ -71,13 +93,38 @@ export default class App extends Vue {
     }
   }
   public login(): void {
-    console.log(this.nickname);
     ipcRenderer.send("login", this.nickname);
-    ipcRenderer.on("loginStatus", (_, success) => {
+    ipcRenderer.once("loginStatus", (_, success, message) => {
       if (success) {
         this.loggedIn = true;
+      } else {
+        this.error = true;
+        this.loginInfo = message;
       }
     });
   }
+  public sendMessage(): void {
+    ipcRenderer.send("message", this.message);
+  }
+  mounted(): void {
+    this.messages.push({
+      avatar: "EE",
+      nickname: "EE0000",
+      message:
+        "The Old Spanish Trail half dollar was a commemorative coin struck by the United States Bureau of the Mint in 1935.",
+    });
+    this.messages.push({
+      avatar: "66",
+      nickname: "66CCFF",
+      message:
+        "It was designed by L. W. Hoffecker, a coin dealer who had been the moving force behind the effort for a Gadsden Purchase half dollar, vetoed by President Herbert Hoover in 1930, and he sought another commemorative coin that he could control if authorizing legislation was passed.",
+    });
+    this.messages.push({
+      avatar: "ZH",
+      nickname: "Zhao Zuohong",
+      message:
+        "He chose the travels of Spanish officer Álvar Núñez Cabeza de Vaca in the early 16th century.",
+    });
+  }
 }
 </script>

src/background.ts

@@ -3,6 +3,9 @@
 import { app, protocol, BrowserWindow, ipcMain } from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
+
+import net from "net";
+
 const isDevelopment = process.env.NODE_ENV !== "production";
 
 // Scheme must be registered before the app is ready
@@ -79,7 +82,24 @@ if (isDevelopment) {
   }
 }
 
+let client: net.Socket;
+
 ipcMain.on("login", (event, nickname) => {
-  event.reply("loginStatus", true);
-  console.log(nickname);
+  if (nickname.length <= 3) {
+    event.reply("loginStatus", false, "Nickname too short!");
+  } else {
+    event.reply("loginStatus", true, "");
+    client = net.createConnection({ port: 8000 }, () => {
+      console.log("connected to server.");
+      client.write(`login: ${nickname}\n`);
+    });
+
+    client.on("data", (data) => {
+      console.log(data.toString());
+    });
+  }
+});
+
+ipcMain.on("message", (_, message) => {
+  client.write(message);
 });