GuanM/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2024-11-21 09:36:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 样式

Browse Source
This commit is contained in:
手瓜一十雪 2024-11-16 11:08:45 +08:00
parent b525fa81bb
commit 41db435ef5
5 changed files with 186 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
napcat.webui/src/pages/NetWork.vue
View File

@ -10,7 +10,9 @@
class="full-tab-panel" class="full-tab-panel"
> >
<component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" /> <component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
<t-button @click="saveConfig" style="width: 100px; height: 40px;">保存</t-button> <div class="button-container">
<t-button @click="saveConfig" style="width: 100px; height: 40px;">保存</t-button>
</div>
</t-tab-panel> </t-tab-panel>
</t-tabs> </t-tabs>
<t-dialog <t-dialog
@ -222,4 +224,10 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style> </style>

58
napcat.webui/src/pages/network/HttpClientComponent.vue
View File

@ -1,23 +1,25 @@
<template> <template>
<div> <div class="container">
<h3>HTTP Client 配置</h3> <div class="form-container">
<t-form> <h3>HTTP Client 配置</h3>
<t-form-item label="URL"> <t-form>
<t-input v-model="config.url" /> <t-form-item label="URL">
</t-form-item> <t-input v-model="config.url" />
<t-form-item label="消息格式"> </t-form-item>
<t-input v-model="config.messagePostFormat" /> <t-form-item label="消息格式">
</t-form-item> <t-input v-model="config.messagePostFormat" />
<t-form-item label="报告自身消息"> </t-form-item>
<t-checkbox v-model="config.reportSelfMessage" /> <t-form-item label="报告自身消息">
</t-form-item> <t-checkbox v-model="config.reportSelfMessage" />
<t-form-item label="Token"> </t-form-item>
<t-input v-model="config.token" /> <t-form-item label="Token">
</t-form-item> <t-input v-model="config.token" />
<t-form-item label="调试模式"> </t-form-item>
<t-checkbox v-model="config.debug" /> <t-form-item label="调试模式">
</t-form-item> <t-checkbox v-model="config.debug" />
</t-form> </t-form-item>
</t-form>
</div>
</div> </div>
</template> </template>
@ -28,3 +30,21 @@ defineProps<{
config: HttpClientConfig; config: HttpClientConfig;
}>(); }>();
</script> </script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
box-sizing: border-box;
}
.form-container {
width: 100%;
max-width: 600px;
background: #fff;
padding: 20px;
border-radius: 8px;
}
</style>

76
napcat.webui/src/pages/network/HttpServerComponent.vue
View File

@ -1,32 +1,34 @@
<template> <template>
<div> <div class="container">
<h3>HTTP Server 配置</h3> <div class="form-container">
<t-form> <h3>HTTP Server 配置</h3>
<t-form-item label="端口"> <t-form>
<t-input v-model.number="config.port" type="number" /> <t-form-item label="端口">
</t-form-item> <t-input v-model.number="config.port" type="number" />
<t-form-item label="主机"> </t-form-item>
<t-input v-model="config.host" type="text" /> <t-form-item label="主机">
</t-form-item> <t-input v-model="config.host" type="text" />
<t-form-item label="启用 CORS"> </t-form-item>
<t-checkbox v-model="config.enableCors" /> <t-form-item label="启用 CORS">
</t-form-item> <t-checkbox v-model="config.enableCors" />
<t-form-item label="启用 WebSocket"> </t-form-item>
<t-checkbox v-model="config.enableWebsocket" /> <t-form-item label="启用 WS">
</t-form-item> <t-checkbox v-model="config.enableWebsocket" />
<t-form-item label="消息格式"> </t-form-item>
<t-input v-model="config.messagePostFormat" type="text" /> <t-form-item label="消息格式">
</t-form-item> <t-input v-model="config.messagePostFormat" type="text" />
<t-form-item label="报告自身消息"> </t-form-item>
<t-checkbox v-model="config.reportSelfMessage" /> <t-form-item label="报告自身消息">
</t-form-item> <t-checkbox v-model="config.reportSelfMessage" />
<t-form-item label="Token"> </t-form-item>
<t-input v-model="config.token" type="text" /> <t-form-item label="Token">
</t-form-item> <t-input v-model="config.token" type="text" />
<t-form-item label="调试模式"> </t-form-item>
<t-checkbox v-model="config.debug" /> <t-form-item label="调试模式">
</t-form-item> <t-checkbox v-model="config.debug" />
</t-form> </t-form-item>
</t-form>
</div>
</div> </div>
</template> </template>
@ -37,3 +39,21 @@ defineProps<{
config: HttpServerConfig; config: HttpServerConfig;
}>(); }>();
</script> </script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
box-sizing: border-box;
}
.form-container {
width: 100%;
max-width: 600px;
background: #fff;
padding: 20px;
border-radius: 8px;
}
</style>

64
napcat.webui/src/pages/network/WebsocketClientComponent.vue
View File

@ -1,26 +1,28 @@
<template> <template>
<div> <div class="container">
<h3>WebSocket Client 配置</h3> <div class="form-container">
<t-form> <h3>WebSocket Client 配置</h3>
<t-form-item label="URL"> <t-form>
<t-input v-model="config.url" /> <t-form-item label="URL">
</t-form-item> <t-input v-model="config.url" />
<t-form-item label="消息格式"> </t-form-item>
<t-input v-model="config.messagePostFormat" /> <t-form-item label="消息格式">
</t-form-item> <t-input v-model="config.messagePostFormat" />
<t-form-item label="报告自身消息"> </t-form-item>
<t-checkbox v-model="config.reportSelfMessage" /> <t-form-item label="报告自身消息">
</t-form-item> <t-checkbox v-model="config.reportSelfMessage" />
<t-form-item label="Token"> </t-form-item>
<t-input v-model="config.token" /> <t-form-item label="Token">
</t-form-item> <t-input v-model="config.token" />
<t-form-item label="调试模式"> </t-form-item>
<t-checkbox v-model="config.debug" /> <t-form-item label="调试模式">
</t-form-item> <t-checkbox v-model="config.debug" />
<t-form-item label="心跳间隔"> </t-form-item>
<t-input v-model.number="config.heartInterval" type="number" /> <t-form-item label="心跳间隔">
</t-form-item> <t-input v-model.number="config.heartInterval" type="number" />
</t-form> </t-form-item>
</t-form>
</div>
</div> </div>
</template> </template>
@ -31,3 +33,21 @@ defineProps<{
config: WebsocketClientConfig; config: WebsocketClientConfig;
}>(); }>();
</script> </script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
box-sizing: border-box;
}
.form-container {
width: 100%;
max-width: 600px;
background: #fff;
padding: 20px;
border-radius: 8px;
}
</style>

76
napcat.webui/src/pages/network/WebsocketServerComponent.vue
View File

@ -1,32 +1,34 @@
<template> <template>
<div> <div class="container">
<h3>WebSocket Server 配置</h3> <div class="form-container">
<t-form> <h3>WebSocket Server 配置</h3>
<t-form-item label="主机"> <t-form>
<t-input v-model="config.host" /> <t-form-item label="主机">
</t-form-item> <t-input v-model="config.host" />
<t-form-item label="端口"> </t-form-item>
<t-input v-model.number="config.port" type="number" /> <t-form-item label="端口">
</t-form-item> <t-input v-model.number="config.port" type="number" />
<t-form-item label="消息格式"> </t-form-item>
<t-input v-model="config.messagePostFormat" /> <t-form-item label="消息格式">
</t-form-item> <t-input v-model="config.messagePostFormat" />
<t-form-item label="报告自身消息"> </t-form-item>
<t-checkbox v-model="config.reportSelfMessage" /> <t-form-item label="报告自身消息">
</t-form-item> <t-checkbox v-model="config.reportSelfMessage" />
<t-form-item label="Token"> </t-form-item>
<t-input v-model="config.token" /> <t-form-item label="Token">
</t-form-item> <t-input v-model="config.token" />
<t-form-item label="启用推送事件"> </t-form-item>
<t-checkbox v-model="config.enablePushEvent" /> <t-form-item label="启用推送事件">
</t-form-item> <t-checkbox v-model="config.enablePushEvent" />
<t-form-item label="调试模式"> </t-form-item>
<t-checkbox v-model="config.debug" /> <t-form-item label="调试模式">
</t-form-item> <t-checkbox v-model="config.debug" />
<t-form-item label="心跳间隔"> </t-form-item>
<t-input v-model.number="config.heartInterval" type="number" /> <t-form-item label="心跳间隔">
</t-form-item> <t-input v-model.number="config.heartInterval" type="number" />
</t-form> </t-form-item>
</t-form>
</div>
</div> </div>
</template> </template>
@ -37,3 +39,21 @@ defineProps<{
config: WebsocketServerConfig; config: WebsocketServerConfig;
}>(); }>();
</script> </script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
box-sizing: border-box;
}
.form-container {
width: 100%;
max-width: 600px;
background: #fff;
padding: 20px;
border-radius: 8px;
}
</style>