登录；进程交互
This commit is contained in:
parent
d51aae8b50
commit
874ea59d3f
4 changed files with 87 additions and 57 deletions
93
src/App.vue
93
src/App.vue
|
|
@ -1,28 +1,83 @@
|
|||
<template>
|
||||
<div class="d-flex align-items-center vh-100">
|
||||
<b-container fluid>
|
||||
<b-row class="justify-content-center">
|
||||
<b-col class="col-8 col-sm-6 col-md-4 text-center">
|
||||
<b-avatar
|
||||
button
|
||||
variant="primary"
|
||||
text=""
|
||||
size="4em"
|
||||
class="my-3"
|
||||
></b-avatar>
|
||||
<b-form>
|
||||
<b-form-input class="my-3"> </b-form-input>
|
||||
<b-button class="my-3" variant="success">Button</b-button>
|
||||
</b-form>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<div>
|
||||
<div class="d-flex align-items-center vh-100" v-if="!loggedIn">
|
||||
<b-container fluid>
|
||||
<b-row class="justify-content-center">
|
||||
<b-col class="col-8 col-sm-6 col-md-4 text-center">
|
||||
<b-avatar
|
||||
button
|
||||
variant="primary"
|
||||
:text="avatarAbbr"
|
||||
size="4em"
|
||||
class="my-3"
|
||||
></b-avatar>
|
||||
<b-form @submit.prevent="login">
|
||||
<b-form-input class="my-3" v-model="nickname"> </b-form-input>
|
||||
<b-button type="submit" class="my-3" variant="success"
|
||||
>Login</b-button
|
||||
>
|
||||
</b-form>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="d-flex flex-row-reverse my-2">
|
||||
<b-avatar variant="success" text="ZZ" class="my-2 ml-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
|
||||
>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import { ipcRenderer } from "electron";
|
||||
|
||||
@Component
|
||||
export default class App extends Vue {}
|
||||
export default class App extends Vue {
|
||||
private nickname = "";
|
||||
private loggedIn = false;
|
||||
private error = true;
|
||||
get avatarAbbr(): string {
|
||||
const chineseChar = new RegExp("[\u4E00-\u9FA5]");
|
||||
let firstChar = this.nickname.charAt(0);
|
||||
if (chineseChar.test(firstChar)) {
|
||||
return firstChar;
|
||||
} else {
|
||||
return this.nickname.substring(0, 2);
|
||||
}
|
||||
}
|
||||
public login(): void {
|
||||
console.log(this.nickname);
|
||||
ipcRenderer.send("login", this.nickname);
|
||||
ipcRenderer.on("loginStatus", (_, success) => {
|
||||
if (success) {
|
||||
this.loggedIn = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use strict";
|
||||
|
||||
import { app, protocol, BrowserWindow } from "electron";
|
||||
import { app, protocol, BrowserWindow, ipcMain } from "electron";
|
||||
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
|
||||
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
|
||||
const isDevelopment = process.env.NODE_ENV !== "production";
|
||||
|
|
@ -78,3 +78,8 @@ if (isDevelopment) {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
ipcMain.on("login", (event, nickname) => {
|
||||
event.reply("loginStatus", true);
|
||||
console.log(nickname);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<div class="vh-100 d-flex flex-column">
|
||||
<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>
|
||||
</div>
|
||||
<div class="d-flex flex-row-reverse my-2">
|
||||
<b-avatar variant="success" text="ZZ" class="my-2 ml-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
|
||||
>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class Chat extends Vue {}
|
||||
</script>
|
||||
7
vue.config.js
Normal file
7
vue.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
pluginOptions: {
|
||||
electronBuilder: {
|
||||
nodeIntegration: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Reference in a new issue