Skip to content

Commit d8a745d

Browse files
NeserCodeNeserCode
committed
rebuild framework style and layout
1 parent caeb01d commit d8a745d

File tree

10 files changed

+1178
-1329
lines changed

10 files changed

+1178
-1329
lines changed

‎src/App.vue‎

Lines changed: 135 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,169 @@
11
<template>
2-
<div id="AppView">
3-
<Controller />
4-
<appViewHead
5-
:isSettingCloseDirect="needs.isSettingCloseDirect"
6-
:title="appTitle"
7-
></appViewHead>
8-
<Navigation />
9-
<AppMainContainer />
10-
<appViewFoot
11-
:status="statusReal.status"
12-
:statusText="statusReal.text"
13-
></appViewFoot>
14-
</div>
2+
<div id="AppView">
3+
<Controller />
4+
<appViewHead
5+
:isSettingCloseDirect="needs.isSettingCloseDirect"
6+
:title="appTitle"
7+
></appViewHead>
8+
<Navigation />
9+
<AppMainContainer />
10+
<appViewFoot
11+
:status="statusReal.status"
12+
:statusText="statusReal.text"
13+
></appViewFoot>
14+
</div>
1515
</template>
1616

1717
<script>
18-
import appViewHead from "@/components/Frameworks/Header/index.vue";
19-
import appViewFoot from "@/components/Frameworks/Footer/index.vue";
20-
import AppMainContainer from "@/components/Frameworks/Container/index.vue";
21-
import Navigation from "@/components/Frameworks/Navigation/index.vue";
22-
import Controller from "@/views/Controller.vue";
23-
const { ipcRenderer } = window.require("electron");
18+
import appViewHead from "@/components/Frameworks/Header/index.vue"
19+
import appViewFoot from "@/components/Frameworks/Footer/index.vue"
20+
import AppMainContainer from "@/components/Frameworks/Container/index.vue"
21+
import Navigation from "@/components/Frameworks/Navigation/index.vue"
22+
import Controller from "@/views/Controller.vue"
23+
const { ipcRenderer } = window.require("electron")
2424
2525
export default {
26-
name: "App",
27-
components: {
28-
appViewHead,
29-
appViewFoot,
30-
AppMainContainer,
31-
Navigation,
32-
Controller,
33-
},
34-
beforeMount() {
35-
// document.onmousedown = (e) => {
36-
// if (e.button == 2) console.log("你按下了右键");
37-
// };
38-
// document.onmouseup = (e) => {
39-
// if (e.button == 2) console.log("你松开了右键");
40-
// };
41-
},
42-
mounted() {
43-
//listen public response this.$public.on('',()=>{})
44-
this.$public.on("update-footer-status-upto-app", (status) => {
45-
this.statusReal.status = status.status;
46-
this.statusReal.text = status.text;
47-
});
48-
this.$public.on("update-app-title", (title) => {
49-
this.appTitle = `${title} - Team Application`;
50-
});
51-
this.$public.on("update-header-need-close-direct", (symbol) => {
52-
this.needs.isSettingCloseDirect = symbol;
53-
});
26+
name: "App",
27+
components: {
28+
appViewHead,
29+
appViewFoot,
30+
AppMainContainer,
31+
Navigation,
32+
Controller,
33+
},
34+
beforeMount() {
35+
// document.onmousedown = (e) => {
36+
// if (e.button == 2) console.log("你按下了右键");
37+
// };
38+
// document.onmouseup = (e) => {
39+
// if (e.button == 2) console.log("你松开了右键");
40+
// };
41+
},
42+
mounted() {
43+
//listen public response this.$public.on('',()=>{})
44+
this.$public.on("update-footer-status-upto-app", (status) => {
45+
this.statusReal.status = status.status
46+
this.statusReal.text = status.text
47+
})
48+
this.$public.on("update-app-title", (title) => {
49+
this.appTitle = `${title} - Team Application`
50+
})
51+
this.$public.on("update-header-need-close-direct", (symbol) => {
52+
this.needs.isSettingCloseDirect = symbol
53+
})
5454
55-
this.$conf.getConfPromise().then((data) => {
56-
this.needs.setting = data.data;
57-
setTimeout(() => {
58-
this.initApp();
59-
this.$public.emit("app-mounted", data.data);
60-
}, 50);
61-
});
62-
},
63-
data() {
64-
return {
65-
appTitle: "Team Application",
66-
statusReal: {
67-
status: "success",
68-
text: "😀 Thank your usage for Team Application",
69-
},
70-
needs: {
71-
isSettingCloseDirect: false,
72-
setting: null,
73-
},
74-
};
75-
},
76-
methods: {
77-
initSettings: function () {
78-
this.needs.isSettingCloseDirect =
79-
this.needs.setting.userSetting.alwaysCloseDirect;
80-
//判定并实际操作主进程
81-
if (this.needs.setting.userSetting.alwaysOnTop)
82-
ipcRenderer.send("setting-always-on-top");
83-
else ipcRenderer.send("setting-always-not-top");
55+
this.$conf.getConfPromise().then((data) => {
56+
this.needs.setting = data.data
57+
setTimeout(() => {
58+
this.initApp()
59+
this.$public.emit("app-mounted", data.data)
60+
}, 50)
61+
})
62+
},
63+
data() {
64+
return {
65+
appTitle: "Team Application",
66+
statusReal: {
67+
status: "success",
68+
text: "😀 Thank your usage for Team Application",
69+
},
70+
needs: {
71+
isSettingCloseDirect: false,
72+
setting: null,
73+
},
74+
}
75+
},
76+
methods: {
77+
initSettings: function () {
78+
this.needs.isSettingCloseDirect =
79+
this.needs.setting.userSetting.alwaysCloseDirect
80+
//判定并实际操作主进程
81+
if (this.needs.setting.userSetting.alwaysOnTop)
82+
ipcRenderer.send("setting-always-on-top")
83+
else ipcRenderer.send("setting-always-not-top")
8484
85-
if (this.needs.setting.userSetting.colorSchemeMode == "light")
86-
ipcRenderer.send("color-schemeMode-light");
87-
else if (this.needs.setting.userSetting.colorSchemeMode == "dark")
88-
ipcRenderer.send("color-schemeMode-dark");
89-
else ipcRenderer.send("color-schemeMode-system");
90-
},
85+
if (this.needs.setting.userSetting.colorSchemeMode == "light") {
86+
ipcRenderer.send("color-schemeMode-light")
87+
document.querySelector("html").classList.remove("dark")
88+
} else if (this.needs.setting.userSetting.colorSchemeMode == "dark") {
89+
ipcRenderer.send("color-schemeMode-dark")
90+
document.querySelector("html").classList.add("dark")
91+
} else ipcRenderer.send("color-schemeMode-system")
9192
92-
initApp: function () {
93-
this.initSettings();
94-
// console.log("Flush => Ctrl + M\nTools => Ctrl + Q");
95-
},
96-
},
97-
};
93+
const themeMedia = window.matchMedia("(prefers-color-scheme: light)")
94+
if (themeMedia.matches)
95+
document.querySelector("html").classList.remove("dark")
96+
else document.querySelector("html").classList.add("dark")
97+
},
98+
99+
initApp: function () {
100+
this.initSettings()
101+
// console.log("Flush => Ctrl + M\nTools => Ctrl + Q");
102+
},
103+
},
104+
}
98105
</script>
99106

100107
<style scoped lang="postcss">
101108
#AppView {
102-
@apply relative w-full h-full min-w-full min-h-full overflow-hidden select-none border box-border;
109+
@apply relative w-full h-full min-w-full min-h-full overflow-hidden select-none border box-border;
103110
}
104111
</style>
105112

106113
<style lang="postcss">
107114
.appViewHead,
108115
.appViewFoot,
109116
.navigation {
110-
z-index: 2009;
117+
z-index: 2009;
111118
}
112119
.appViewHead {
113120
}
114121
115122
:deep().el-message {
116-
z-index: 10000;
123+
z-index: 10000;
117124
}
118125
119126
a {
120-
-webkit-user-drag: none;
127+
-webkit-user-drag: none;
121128
}
122129
123130
pre {
124-
@apply whitespace-pre-wrap;
131+
@apply whitespace-pre-wrap;
125132
}
126133
127134
@media (prefers-color-scheme: dark) {
128-
#AppView {
129-
@apply text-gray-100 bg-gray-800 border-gray-400;
130-
}
131-
.appViewHead {
132-
@apply bg-gray-800 text-gray-200;
133-
}
134-
.navigation {
135-
@apply bg-gray-700 text-gray-200 border-gray-300;
136-
}
137-
.AppMainContainer,
138-
.UserArea {
139-
@apply bg-gray-800;
140-
}
141-
:deep(.el-divider__text) {
142-
@apply bg-gray-800 text-gray-200;
143-
}
135+
#AppView {
136+
@apply text-gray-100 bg-gray-800 border-gray-400;
137+
}
138+
.appViewHead {
139+
@apply bg-gray-800 text-gray-200;
140+
}
141+
.navigation {
142+
@apply bg-gray-700 text-gray-200;
143+
}
144+
.AppMainContainer,
145+
.UserArea {
146+
@apply bg-gray-800;
147+
}
148+
:deep(.el-divider__text) {
149+
@apply bg-gray-800 text-gray-200;
150+
}
144151
}
145152
146153
@media (prefers-color-scheme: light) {
147-
#AppView {
148-
@apply text-gray-800 bg-gray-100 border-gray-400;
149-
}
150-
.appViewHead {
151-
@apply bg-green-600 text-gray-800;
152-
}
153-
.navigation {
154-
@apply bg-white text-gray-800 border-gray-200;
155-
}
156-
.AppMainContainer,
157-
.UserArea {
158-
@apply bg-gray-100;
159-
}
154+
#AppView {
155+
@apply text-gray-800 bg-gray-100 border-gray-400;
156+
}
157+
.appViewHead {
158+
@apply bg-transparent text-gray-800;
159+
}
160+
.navigation {
161+
@apply bg-white text-gray-800;
162+
}
163+
.AppMainContainer,
164+
.UserArea {
165+
@apply bg-gray-100;
166+
}
160167
}
161168
162169
/* 需要补充 滚动条多余边距的填充 */
@@ -174,16 +181,15 @@ pre {
174181
/* 已经废弃，需要重新制作拟态滚动条 */
175182
176183
@font-face {
177-
font-family: Canger_xwz;
178-
src: url("../src/assets/fonts/Canger_xwz.ttf");
184+
font-family: Canger_xwz;
185+
src: url("../src/assets/fonts/Canger_xwz.ttf");
179186
}
180187
@font-face {
181-
font-family: Canger_zkzdbs;
182-
src: url("../src/assets/fonts/Canger_zkzdbs.ttf");
188+
font-family: Canger_zkzdbs;
189+
src: url("../src/assets/fonts/Canger_zkzdbs.ttf");
183190
}
184191
@font-face {
185-
font-family: Helvetica_otf;
186-
src: url("../src/assets/fonts/Helvetica.otf");
192+
font-family: Helvetica_otf;
193+
src: url("../src/assets/fonts/Helvetica.otf");
187194
}
188195
</style>
189-

0 commit comments

Comments
 (0)