From 8d1dacfa2ea998e45a9fb0d9dd84d13c008f6ffe Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Thu, 23 Jul 2020 11:33:53 +0800 Subject: [PATCH 01/20] fix(getFiles): error prompt when SSL verification fails to read the file --- src/assets/scss/element/element-reset.scss | 3 +++ src/utils/getFiles.ts | 19 ++++++++++++++----- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/assets/scss/element/element-reset.scss b/src/assets/scss/element/element-reset.scss index 317518f9d..b93261dd0 100644 --- a/src/assets/scss/element/element-reset.scss +++ b/src/assets/scss/element/element-reset.scss @@ -160,6 +160,9 @@ .el-icon-success { color: var(--color-main-green); } + .el-notification__title { + word-break: break-word; + } } /* Dialog */ diff --git a/src/utils/getFiles.ts b/src/utils/getFiles.ts index 5533367c0..2e54927ab 100644 --- a/src/utils/getFiles.ts +++ b/src/utils/getFiles.ts @@ -1,14 +1,23 @@ import fs from 'fs' +import { Notification } from 'element-ui' import { SSLPath, SSLContent } from '@/views/connections/types' export const getSSLFile = (sslPath: SSLPath): SSLContent | undefined => { const { ca, cert, key } = sslPath - const res: SSLContent = { - ca: ca !== '' ? [fs.readFileSync(ca)] : undefined, - cert: cert !== '' ? fs.readFileSync(cert) : undefined, - key: key !== '' ? fs.readFileSync(key) : undefined, + try { + const res: SSLContent = { + ca: ca !== '' ? [fs.readFileSync(ca)] : undefined, + cert: cert !== '' ? fs.readFileSync(cert) : undefined, + key: key !== '' ? fs.readFileSync(key) : undefined, + } + return res + } catch (error) { + Notification({ + title: error.toString(), + message: '', + type: 'error', + }) } - return res } export default {} From 20dfd0ff867afab966ca609a329ea9ccf0d3ad50 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Thu, 23 Jul 2020 18:00:05 +0800 Subject: [PATCH 02/20] fix(connections): fixed messages duplicated --- src/store/modules/app.ts | 9 --- src/views/connections/ConnectionsDetail.vue | 70 +++++++++------------ 2 files changed, 30 insertions(+), 49 deletions(-) diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 6d854612b..a970f00ba 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -7,7 +7,6 @@ const TOGGLE_LANG = 'TOGGLE_LANG' const TOGGLE_AUTO_CHECK = 'TOGGLE_AUTO_CHECK' const SET_MAX_RECONNECT_TIMES = 'SET_MAX_RECONNECT_TIMES' const CHANGE_ACTIVE_CONNECTION = 'CHANGE_ACTIVE_CONNECTION' -const PUSH_MESSAGE = 'PUSH_MESSAGE' const REMOVE_ACTIVE_CONNECTION = 'REMOVE_ACTIVE_CONNECTION' const CHANGE_SUBSCRIPTIONS = 'CHANGE_SUBSCRIPTIONS' const SHOW_CLIENT_INFO = 'SHOW_CLIENT_INFO' @@ -67,11 +66,6 @@ const app = { } } }, - [PUSH_MESSAGE](state: App, payload: Message) { - if (state.activeConnection[payload.id]) { - state.activeConnection[payload.id].messages.push(payload.message) - } - }, [REMOVE_ACTIVE_CONNECTION](state: App, id: string) { delete state.activeConnection[id] delete state.unreadMessageCount[id] @@ -125,9 +119,6 @@ const app = { CHANGE_ACTIVE_CONNECTION({ commit }: any, payload: App) { commit(CHANGE_ACTIVE_CONNECTION, payload) }, - PUSH_MESSAGE({ commit }: any, payload: App) { - commit(PUSH_MESSAGE, payload) - }, REMOVE_ACTIVE_CONNECTION({ commit }: any, { id }: { id: string }) { commit(REMOVE_ACTIVE_CONNECTION, id) }, diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue index d6a796246..c340ce47c 100644 --- a/src/views/connections/ConnectionsDetail.vue +++ b/src/views/connections/ConnectionsDetail.vue @@ -151,10 +151,14 @@ diff --git a/src/views/connections/index.vue b/src/views/connections/index.vue index bc8cd850f..4c2923a69 100644 --- a/src/views/connections/index.vue +++ b/src/views/connections/index.vue @@ -18,7 +18,7 @@ :oper="oper" @connect="handleConnect"/> Date: Sat, 25 Jul 2020 10:04:49 +0800 Subject: [PATCH 05/20] fix(connections): warning prompt when json syntax error --- src/views/connections/ConnectionsDetail.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue index ca0fb06d5..237c625b5 100644 --- a/src/views/connections/ConnectionsDetail.vue +++ b/src/views/connections/ConnectionsDetail.vue @@ -652,6 +652,13 @@ export default class ConnectionsDetail extends Vue { const $type = type.toLowerCase() as PayloadConvertType return Buffer.from(value, $type) } + if (type === 'JSON') { + try { + JSON.parse(value) + } catch (error) { + this.$message.warning(error.toString()) + } + } return value } From 404b3e115f062570b75095291201656364075a1c Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Sun, 26 Jul 2020 23:31:17 +0800 Subject: [PATCH 06/20] feat(msg): add color makr to received message --- src/components/MsgLeftItem.vue | 41 +++++++++++++++++++-- src/components/MsgRightItem.vue | 2 +- src/views/connections/ConnectionsDetail.vue | 1 + 3 files changed, 40 insertions(+), 4 deletions(-) diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue index 0b0e5317f..11c76a1a8 100644 --- a/src/components/MsgLeftItem.vue +++ b/src/components/MsgLeftItem.vue @@ -1,6 +1,7 @@ @@ -43,10 +49,15 @@ @@ -78,6 +115,7 @@ export default class ConnectionsList extends Vue { cursor: pointer; position: relative; transition: background .3s ease; + user-select: none; &.active { background-color: var(--color-bg-item); } diff --git a/src/views/connections/types.ts b/src/views/connections/types.ts index 005f4418a..f88126ed0 100644 --- a/src/views/connections/types.ts +++ b/src/views/connections/types.ts @@ -89,3 +89,8 @@ export interface SSLContent { cert: string | string[] | Buffer | Buffer[] | undefined, key: string | string[] | Buffer | Buffer[] | undefined, } + +export interface ContextmenuModel { + top: number, + left: number, +} diff --git a/yarn.lock b/yarn.lock index 447aa9fe5..826c6cd1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10238,6 +10238,11 @@ vue-cli-plugin-electron-builder@^1.4.4: webpack-chain "^5.0.0" yargs "^14.0.0" +vue-click-outside@^1.1.0: + version "1.1.0" + resolved "https://registry.npm.taobao.org/vue-click-outside/download/vue-click-outside-1.1.0.tgz#48b7680b518923e701643cccb3e165854aad99eb" + integrity sha1-SLdoC1GJI+cBZDzMs+FlhUqtmes= + vue-clipboard2@^0.3.1: version "0.3.1" resolved "https://registry.npm.taobao.org/vue-clipboard2/download/vue-clipboard2-0.3.1.tgz#6e551fb7bd384889b28b0da3b12289ed6bca4894" From 09d29994f722a07501add9b892ce963dfdb61947 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Mon, 3 Aug 2020 16:05:52 +0800 Subject: [PATCH 12/20] feat(conection): add delete connection contextmenu --- src/components/Contextmenu.vue | 4 +-- src/views/connections/ConnectionsDetail.vue | 37 ++++++++++++--------- src/views/connections/ConnectionsList.vue | 6 +++- src/views/connections/index.vue | 14 ++++++-- 4 files changed, 39 insertions(+), 22 deletions(-) diff --git a/src/components/Contextmenu.vue b/src/components/Contextmenu.vue index 247e95806..6f7a1e498 100644 --- a/src/components/Contextmenu.vue +++ b/src/components/Contextmenu.vue @@ -3,8 +3,8 @@ + :style="{ top: `${top}px`, left: `${left}px` }" + v-click-outside="handleClickoutside"> diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue index 60b23a394..482f2c5c0 100644 --- a/src/views/connections/ConnectionsDetail.vue +++ b/src/views/connections/ConnectionsDetail.vue @@ -248,6 +248,27 @@ export default class ConnectionsDetail extends Vue { } } + public removeConnection(currentConnection?: ConnectionModel) { + let { id, name } = this.record + if (currentConnection) { + id = currentConnection.id + name = currentConnection.name + } + const confirmDelete: string = this.$t('common.confirmDelete', { name }) as string + this.$confirm(confirmDelete, this.$t('common.warning') as string, { + type: 'warning', + }).then(async () => { + const res: ConnectionModel | null = await deleteConnection(id as string) + if (res) { + this.$emit('delete') + this.$message.success(this.$t('common.deleteSuccess') as string) + this.removeActiveConnection({ id: res.id as string }) + } + }).catch((error) => { + // ignore(error) + }) + } + get bodyTop(): Top { return { open: '254px', @@ -433,22 +454,6 @@ export default class ConnectionsDetail extends Vue { this.getMessages() } - private removeConnection() { - const confirmDelete: string = this.$t('common.confirmDelete', { name: this.record.name }) as string - this.$confirm(confirmDelete, this.$t('common.warning') as string, { - type: 'warning', - }).then(async () => { - const res: ConnectionModel | null = await deleteConnection(this.record.id as string) - if (res) { - this.$emit('delete') - this.$message.success(this.$t('common.deleteSuccess') as string) - this.removeActiveConnection({ id: res.id as string }) - } - }).catch((error) => { - // ignore(error) - }) - } - private createClient(): MqttClient { const options: IClientOptions = getClientOptions(this.record) return mqtt.connect(this.connectUrl, options) diff --git a/src/views/connections/ConnectionsList.vue b/src/views/connections/ConnectionsList.vue index 390122f1c..7f8250d65 100644 --- a/src/views/connections/ConnectionsList.vue +++ b/src/views/connections/ConnectionsList.vue @@ -38,7 +38,7 @@ - + {{ $t('common.delete') }} @@ -98,6 +98,10 @@ export default class ConnectionsList extends Vue { this.showContextmenu = false } } + + private handleDelete() { + this.$emit('delete', this.selectedConnection) + } } diff --git a/src/views/connections/index.vue b/src/views/connections/index.vue index 4c2923a69..6a3dde618 100644 --- a/src/views/connections/index.vue +++ b/src/views/connections/index.vue @@ -2,7 +2,10 @@

{{ $t('connections.connections') }}

- +
@@ -16,7 +19,7 @@ v-if="oper" ref="connectionForm" :oper="oper" - @connect="handleConnect"/> + @connect="onConnect"/> { const connection: ConnectionsDetail = this.$refs.ConnectionsDetail as ConnectionsDetail @@ -135,6 +138,11 @@ export default class Connections extends Vue { }, 500) } + private onDelete(data: ConnectionModel) { + const connection: ConnectionsDetail = this.$refs.ConnectionsDetail as ConnectionsDetail + connection.removeConnection(data) + } + private created() { this.loadData() } From 6766b919a27610faa8059909602a258ab927253c Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Wed, 5 Aug 2020 23:35:21 +0800 Subject: [PATCH 13/20] feat(msg): add convert method when received message --- src/views/connections/ConnectionsDetail.vue | 45 +++++++++++++++------ 1 file changed, 33 insertions(+), 12 deletions(-) diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue index 482f2c5c0..117834216 100644 --- a/src/views/connections/ConnectionsDetail.vue +++ b/src/views/connections/ConnectionsDetail.vue @@ -216,6 +216,7 @@ export default class ConnectionsDetail extends Vue { private connectLoading = false private searchVisible = false private searchLoading = false + private receivedMsgType: PayloadType = 'Plaintext' private msgType: MessageType = 'all' private client: Partial = { connected: false, @@ -563,15 +564,16 @@ export default class ConnectionsDetail extends Vue { private onMessageArrived(id: string) { return ( topic: string, - payload: string, + payload: Buffer, packet: SubscriptionModel, ) => { + const $payload = this.convertPayloadByType(payload, this.receivedMsgType, 'receive') as string const receivedMessage: MessageModel = { mid: uuidv4(), out: false, createAt: time.getNowDate(), topic, - payload: payload.toString(), + payload: $payload, qos: packet.qos, retain: packet.retain as boolean, } @@ -612,7 +614,7 @@ export default class ConnectionsDetail extends Vue { this.$message.warning(this.$t('connections.topicReuired') as string) return false } - const $payload = this.convertPayloadByType(payload, type) + const $payload = this.convertPayloadByType(payload, type, 'publish') this.client.publish!( topic, $payload, @@ -657,17 +659,36 @@ export default class ConnectionsDetail extends Vue { }, 500) } - private convertPayloadByType(value: string, type: PayloadType): Buffer | string { - if (type === 'Base64' || type === 'Hex') { - const $type = type.toLowerCase() as PayloadConvertType - return Buffer.from(value, $type) + private convertPayloadByType( + value: Buffer | string, + type: PayloadType, + way: 'publish' | 'receive', + ): Buffer | string { + const genPublishPayload = (publishType: PayloadType, publishValue: string) => { + if (publishType === 'Base64' || publishType === 'Hex') { + const $type = publishType.toLowerCase() as PayloadConvertType + return Buffer.from(publishValue, $type) + } + if (publishType === 'JSON') { + try { + JSON.parse(publishValue) + } catch (error) { + this.$message.warning(error.toString()) + } + } + return publishValue } - if (type === 'JSON') { - try { - JSON.parse(value) - } catch (error) { - this.$message.warning(error.toString()) + const genReceivePayload = (receiveType: PayloadType, receiveValue: Buffer) => { + if (receiveType === 'Base64' || receiveType === 'Hex') { + const $type = receiveType.toLowerCase() as PayloadType + return receiveValue.toString($type) } + return receiveValue.toString() + } + if (way === 'publish' && typeof value === 'string') { + return genPublishPayload(type, value) + } else if (way === 'receive' && typeof value !== 'string') { + return genReceivePayload(type, value) } return value } From f91476aabd25728c4d3774ecaf4b6d165d7c59b5 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Thu, 6 Aug 2020 18:22:08 +0800 Subject: [PATCH 14/20] style(msg): fix the style problem of marker color --- src/components/MsgLeftItem.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue index 3f76e2817..37aa01c65 100644 --- a/src/components/MsgLeftItem.vue +++ b/src/components/MsgLeftItem.vue @@ -60,8 +60,9 @@ export default class MsgLeftItem extends Vue { .topic-color { display: inline-block; width: 3px; - position: relative; + position: absolute; top: 10px; + left: -3px; } .left-payload { background: var(--color-main-grey); From 6bb21c100acf0f4780175a48f9333f9897d0341d Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Sat, 8 Aug 2020 16:06:05 +0800 Subject: [PATCH 15/20] feat(msg): add decoded option to received message --- src/assets/scss/element/element-reset.scss | 1 - src/lang/connections.ts | 12 +++++ src/views/connections/ConnectionsDetail.vue | 56 +++++++++++++++++---- 3 files changed, 59 insertions(+), 10 deletions(-) diff --git a/src/assets/scss/element/element-reset.scss b/src/assets/scss/element/element-reset.scss index b93261dd0..7d5b9dee9 100644 --- a/src/assets/scss/element/element-reset.scss +++ b/src/assets/scss/element/element-reset.scss @@ -208,7 +208,6 @@ } .el-popper[x-placement^="top"] .popper__arrow { border-top-color: var(--color-border-default); - &:after { border-top-color: var(--color-bg-messagebox); } diff --git a/src/lang/connections.ts b/src/lang/connections.ts index a85edbfcd..aca3f240e 100644 --- a/src/lang/connections.ts +++ b/src/lang/connections.ts @@ -227,4 +227,16 @@ export default { zh: '可快速选择已创建过的连接配置', en: 'Quick selection of created connection configurations', }, + publishMsg: { + zh: '发送消息', + en: 'Publish message', + }, + receivedMsg: { + zh: '接收消息', + en: 'Received message', + }, + receivedPayloadDecodedBy: { + zh: '接收到的 Payload 解码', + en: 'Received payload decoded by', + }, } diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue index 117834216..9999c241a 100644 --- a/src/views/connections/ConnectionsDetail.vue +++ b/src/views/connections/ConnectionsDetail.vue @@ -110,8 +110,28 @@
+ + + + + + + + + {{ $t('connections.all') }} {{ $t('connections.received') }} @@ -153,9 +173,10 @@ - diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss index 1e2e33fa2..1e88e3c60 100644 --- a/src/assets/scss/base.scss +++ b/src/assets/scss/base.scss @@ -1,7 +1,9 @@ @import './variable.scss'; @import './mixins.scss'; -html, body, #app { +html, +body, +#app { height: 100%; margin: 0px; padding: 0px; @@ -9,10 +11,9 @@ html, body, #app { } body { - font-family: system, -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", - "Microsoft YaHei", "wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", - "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: system, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', 'Microsoft YaHei', + 'wenquanyi micro hei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', + 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: $font-size--body; font-weight: 400; line-height: 1.5; @@ -57,7 +58,7 @@ p { pre { font-size: $font-size--body; margin-bottom: 0px; - font-family: Menlo, Monaco, "Courier New", monospace; + font-family: Menlo, Monaco, 'Courier New', monospace; } a { diff --git a/src/assets/scss/element/element-reset.scss b/src/assets/scss/element/element-reset.scss index 7d5b9dee9..07f893336 100644 --- a/src/assets/scss/element/element-reset.scss +++ b/src/assets/scss/element/element-reset.scss @@ -18,7 +18,7 @@ width: 90px; color: var(--color-text-light); } -.el-radio-button__orig-radio:checked+.el-radio-button__inner { +.el-radio-button__orig-radio:checked + .el-radio-button__inner { background-color: var(--color-bg-item); color: var(--color-main-green); border: 2px solid var(--color-main-green) !important; @@ -65,8 +65,8 @@ } /* Icon */ -[class^="el-icon-"], -[class*=" el-icon-"] { +[class^='el-icon-'], +[class*=' el-icon-'] { font-weight: 600; } @@ -200,13 +200,13 @@ color: var(--color-text-default); } } -.el-popper[x-placement^="bottom"] .popper__arrow { +.el-popper[x-placement^='bottom'] .popper__arrow { border-bottom-color: var(--color-border-default); &::after { border-bottom-color: var(--color-bg-messagebox); } } -.el-popper[x-placement^="top"] .popper__arrow { +.el-popper[x-placement^='top'] .popper__arrow { border-top-color: var(--color-border-default); &:after { border-top-color: var(--color-bg-messagebox); diff --git a/src/assets/scss/element/element-variables.scss b/src/assets/scss/element/element-variables.scss index 25263f8ab..e5b833664 100644 --- a/src/assets/scss/element/element-variables.scss +++ b/src/assets/scss/element/element-variables.scss @@ -1,7 +1,7 @@ /* Change element-ui theme variable */ -$--color-primary: #22BB7A; +$--color-primary: #22bb7a; /* Change icon font path，required */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; -@import '~element-ui/packages/theme-chalk/src/index'; \ No newline at end of file +@import '~element-ui/packages/theme-chalk/src/index'; diff --git a/src/assets/scss/mixins.scss b/src/assets/scss/mixins.scss index f321482c2..f5802add0 100644 --- a/src/assets/scss/mixins.scss +++ b/src/assets/scss/mixins.scss @@ -45,7 +45,7 @@ @mixin collapse-btn-transform($top, $bottom) { a.collapse-btn { - transition: all .3s; + transition: all 0.3s; display: inline-block; &.top { transform: rotate($top); diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss index 286e29d8a..856a547ac 100644 --- a/src/assets/scss/theme/dark.scss +++ b/src/assets/scss/theme/dark.scss @@ -8,7 +8,7 @@ body.dark { --color-bg-leftbar: #282828; --color-bg-leftbar_item: #303030; --color-bg-item: #395449; - --color-bg-item_status: #9EA3B1; + --color-bg-item_status: #9ea3b1; --color-bg-input: #323232; --color-bg-messagebox: #303133; --color-bg-follows: #4a4a4a; @@ -20,17 +20,17 @@ body.dark { --color-text-title: #ffffff; --color-text-default: #d3d3d3; --color-text-light: #a3a3a3; - --color-text-tips: #B4B4B4; + --color-text-tips: #b4b4b4; --color-text-right_block: #484848; --color-text-right_info: #959599; --color-text-left_info: #959599; /* Accent color */ - --color-main-green: #34C388; - --color-second-green: #53DAA2; - --color-thrid-green: #EBF8F2; - --color-main-red: #E86AA6; - --color-second-red: #F56C6C; + --color-main-green: #34c388; + --color-second-green: #53daa2; + --color-thrid-green: #ebf8f2; + --color-main-red: #e86aa6; + --color-second-red: #f56c6c; --color-third-red: #fcdee4; --color-main-grey: #323232; --color-main-yellow: #e6a23cb3; diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss index 719d097cd..2235bad29 100644 --- a/src/assets/scss/theme/light.scss +++ b/src/assets/scss/theme/light.scss @@ -1,42 +1,42 @@ body.light { /* Backgroud color */ --color-bg-normal: #ffffff; - --color-bg-primary: #F9FAFD; - --color-bg-topics: #F8F8F8; + --color-bg-primary: #f9fafd; + --color-bg-topics: #f8f8f8; --color-bg-topics_active: #efefef; --color-bg-topics_shadow: #e2e2e2d1; --color-bg-leftbar: #333844; --color-bg-leftbar_item: #232731; - --color-bg-item: #EBF8F2; - --color-bg-item_status: #9EA3B1; + --color-bg-item: #ebf8f2; + --color-bg-item_status: #9ea3b1; --color-bg-input: #ffffff; --color-bg-messagebox: #ffffff; --color-bg-follows: #efefef; --color-bg-code: #e6eef7; - --color-bg-input_btn: #F5F7FA; + --color-bg-input_btn: #f5f7fa; --color-bg-radio: #f6f7fb; /* Font color */ --color-text-title: #262626; --color-text-default: #616161; - --color-text-light: #A2A9B0; - --color-text-tips: #B4B4B4; - --color-text-right_block: #34C388; - --color-text-right_info: #ADE7CF; + --color-text-light: #a2a9b0; + --color-text-tips: #b4b4b4; + --color-text-right_block: #34c388; + --color-text-right_info: #ade7cf; --color-text-left_info: #959599; /* Accent color */ - --color-main-green: #34C388; - --color-second-green: #53DAA2; - --color-thrid-green: #EBF8F2; - --color-main-red: #E86AA6; - --color-second-red: #F56C6C; + --color-main-green: #34c388; + --color-second-green: #53daa2; + --color-thrid-green: #ebf8f2; + --color-main-red: #e86aa6; + --color-second-red: #f56c6c; --color-third-red: #fcdee4; - --color-main-grey: #E9EAF0; + --color-main-grey: #e9eaf0; --color-main-yellow: #e6a23cb3; /* Border color */ - --color-border-default: #E6E8F1; + --color-border-default: #e6e8f1; --color-border-bold: #979797; --color-shadow-card: #0000001a; --color-shadow-message: #dcdcdc; diff --git a/src/assets/scss/theme/night.scss b/src/assets/scss/theme/night.scss index 99cf47563..c3d84bbaf 100644 --- a/src/assets/scss/theme/night.scss +++ b/src/assets/scss/theme/night.scss @@ -1,16 +1,16 @@ body.night { /* Backgroud color */ - --color-bg-normal: #292B33; + --color-bg-normal: #292b33; --color-bg-primary: #212328; --color-bg-topics: #414556; --color-bg-topics_active: #323544; --color-bg-topics_shadow: #231d1dd1; --color-bg-leftbar: #333844; - --color-bg-leftbar_item: #31333F; - --color-bg-item: #31333F; - --color-bg-item_status: #9EA3B1; - --color-bg-input: #31333F; - --color-bg-messagebox: #31333F; + --color-bg-leftbar_item: #31333f; + --color-bg-item: #31333f; + --color-bg-item_status: #9ea3b1; + --color-bg-input: #31333f; + --color-bg-messagebox: #31333f; --color-bg-follows: #393a42; --color-bg-code: #4f5965; --color-bg-input_btn: transparent; @@ -19,25 +19,25 @@ body.night { /* Font color */ --color-text-title: #ffffff; --color-text-default: #d3d3d3; - --color-text-light: #A2A9B0; - --color-text-tips: #B4B4B4; - --color-text-right_block: #1B1D20; - --color-text-right_info: #B4B4B4; + --color-text-light: #a2a9b0; + --color-text-tips: #b4b4b4; + --color-text-right_block: #1b1d20; + --color-text-right_info: #b4b4b4; --color-text-left_info: #959599; /* Accent color */ - --color-main-green: #34C388; - --color-second-green: #53DAA2; - --color-thrid-green: #EBF8F2; - --color-main-red: #E86AA6; - --color-second-red: #F56C6C; + --color-main-green: #34c388; + --color-second-green: #53daa2; + --color-thrid-green: #ebf8f2; + --color-main-red: #e86aa6; + --color-second-red: #f56c6c; --color-third-red: #fcdee4; - --color-main-grey: #292A33; + --color-main-grey: #292a33; --color-main-yellow: #e6a23cb3; /* Border color */ - --color-border-default: #40414E; - --color-border-bold: #4F5367; + --color-border-default: #40414e; + --color-border-bold: #4f5367; --color-shadow-card: #00000085; --color-shadow-message: #151515; } diff --git a/src/background.ts b/src/background.ts index 09b8da494..5db9e9040 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,19 +1,14 @@ 'use strict' -import { - app, protocol, BrowserWindow, ipcMain, shell, Menu, -} from 'electron' -import { - createProtocol, - installVueDevtools, -} from 'vue-cli-plugin-electron-builder/lib' +import { app, protocol, BrowserWindow, ipcMain, shell, Menu } from 'electron' +import { createProtocol, installVueDevtools } from 'vue-cli-plugin-electron-builder/lib' import db from './database/index' import updateChecker from './main/updateChecker' import getMenuTemplate from './main/getMenuTemplate' interface WindowSizeModel { - width: number, - height: number, + width: number + height: number } declare const __static: string @@ -28,7 +23,7 @@ let win: BrowserWindow | null let menu: Menu | null // Scheme must be registered before the app is ready -protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: { secure: true, standard: true } }]) +protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }]) function handleIpcMessages() { ipcMain.on('setting', (event: any, ...args: any[]) => { @@ -63,7 +58,9 @@ function createWindow() { if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string) - if (!process.env.IS_TEST) {win.webContents.openDevTools()} + if (!process.env.IS_TEST) { + win.webContents.openDevTools() + } } else { createProtocol('app') // Load the index.html when not in development diff --git a/src/components/Contextmenu.vue b/src/components/Contextmenu.vue index 6f7a1e498..9b5fe9627 100644 --- a/src/components/Contextmenu.vue +++ b/src/components/Contextmenu.vue @@ -4,13 +4,13 @@ v-if="visible" class="contextmenu" :style="{ top: `${top}px`, left: `${left}px` }" - v-click-outside="handleClickoutside"> + v-click-outside="handleClickoutside" + > - -