GuanM/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2025-07-19 12:03:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 优化类型

Browse Source
This commit is contained in:
手瓜一十雪
2024-11-27 11:29:03 +08:00
parent d4fb09fa80
commit 0fe4911d01
1 changed files with 76 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,17 +4,11 @@
<t-divider align="right"> <t-divider align="right">
<t-button @click="addConfig()"> <t-button @click="addConfig()">
<template #icon><add-icon /></template> <template #icon><add-icon /></template>
添加配置</t-button 添加配置</t-button>
>
</t-divider> </t-divider>
</div> </div>
<div v-if="loadPage" ref="setting" class="setting"> <div v-if="loadPage" ref="setting" class="setting">
<t-tabs <t-tabs ref="tabsRef" :style="{ width: tabsWidth + 'px' }" default-value="all" @change="selectType">
ref="tabsRef"
:style="{ width: tabsWidth + 'px' }"
default-value="all"
@change="selectType"
>
<t-tab-panel value="all" label="全部"></t-tab-panel> <t-tab-panel value="all" label="全部"></t-tab-panel>
<t-tab-panel value="httpServers" label="HTTP 服务器"></t-tab-panel> <t-tab-panel value="httpServers" label="HTTP 服务器"></t-tab-panel>
<t-tab-panel value="httpClients" label="HTTP 客户端"></t-tab-panel> <t-tab-panel value="httpClients" label="HTTP 客户端"></t-tab-panel>
@@ -25,13 +19,8 @@
<div v-if="loadPage" class="card-box" :style="{ width: tabsWidth + 'px' }"> <div v-if="loadPage" class="card-box" :style="{ width: tabsWidth + 'px' }">
<div class="setting-box" :style="{ maxHeight: cardHeight + 'px' }" v-if="cardConfig.length > 0"> <div class="setting-box" :style="{ maxHeight: cardHeight + 'px' }" v-if="cardConfig.length > 0">
<div v-for="(item, index) in cardConfig" :key="index"> <div v-for="(item, index) in cardConfig" :key="index">
<t-card <t-card :title="item.name" :description="item.type" :style="{ width: cardWidth + 'px' }"
:title="item.name" :header-bordered="true" class="setting-card">
:description="item.type"
:style="{ width: cardWidth + 'px' }"
:header-bordered="true"
class="setting-card"
>
<template #actions> <template #actions>
<t-space> <t-space>
<edit2-icon size="20px" @click="editConfig(item)"></edit2-icon> <edit2-icon size="20px" @click="editConfig(item)"></edit2-icon>
@@ -41,12 +30,11 @@
</t-space> </t-space>
</template> </template>
<div class="setting-content"> <div class="setting-content">
<t-card <t-card class="card-address" :style="{
class="card-address" borderLeft: '7px solid ' + (item.enable ?
:style="{ borderLeft: '7px solid ' + (item.enable ?
'var(--td-success-color)' : 'var(--td-success-color)' :
'var(--td-error-color)') }" 'var(--td-error-color)')
> }">
<server-filled-icon size="20px"></server-filled-icon> <server-filled-icon size="20px"></server-filled-icon>
<strong v-if="item.host">{{ item.host }}</strong> <strong v-if="item.host">{{ item.host }}</strong>
<strong v-if="item.url">{{ item.url }}</strong> <strong v-if="item.url">{{ item.url }}</strong>
@@ -56,51 +44,46 @@
</t-card> </t-card>
<t-collapse :default-value="[0]" expand-mutex style="margin-top:10px;" class="info-coll"> <t-collapse :default-value="[0]" expand-mutex style="margin-top:10px;" class="info-coll">
<t-collapse-panel header="基础信息"> <t-collapse-panel header="基础信息">
<t-descriptions <t-descriptions size="small" :layout="infoOneCol ? 'vertical' : 'horizontal'"
size="small" class="setting-base-info">
:layout="infoOneCol ? 'vertical' : 'horizontal'"
class="setting-base-info"
>
<t-descriptions-item v-if="item.token" label="连接密钥"> <t-descriptions-item v-if="item.token" label="连接密钥">
<div class="token-view"> <div class="token-view">
<span>{{ showToken ? item.token : '*******' }}</span> <span>{{ showToken ? item.token : '*******' }}</span>
<browse-icon v-if="showToken" size="15px" @click="showToken = false"></browse-icon> <browse-icon v-if="showToken" size="15px"
<browse-off-icon v-else size="17px" @click="showToken = true"></browse-off-icon> @click="showToken = false"></browse-icon>
<browse-off-icon v-else size="17px"
@click="showToken = true"></browse-off-icon>
</div> </div>
</t-descriptions-item> </t-descriptions-item>
<t-descriptions-item label="消息格式">{{ item.messagePostFormat }}</t-descriptions-item> <t-descriptions-item label="消息格式">{{ item.messagePostFormat }}</t-descriptions-item>
</t-descriptions> </t-descriptions>
</t-collapse-panel> </t-collapse-panel>
<t-collapse-panel header="状态信息"> <t-collapse-panel header="状态信息">
<t-descriptions <t-descriptions size="small" :layout="infoOneCol ? 'vertical' : 'horizontal'"
size="small" class="setting-base-info">
:layout="infoOneCol ? 'vertical' : 'horizontal'"
class="setting-base-info"
>
<t-descriptions-item v-if="item.token" label="调试日志"> <t-descriptions-item v-if="item.token" label="调试日志">
<t-tag class="tag-item" :theme="item.debug ? 'success' : 'danger'"> <t-tag class="tag-item" :theme="item.debug ? 'success' : 'danger'">
{{ item.debug ? '开启' : '关闭' }}</t-tag {{ item.debug ? '开启' : '关闭' }}</t-tag>
>
</t-descriptions-item> </t-descriptions-item>
<t-descriptions-item v-if="item.hasOwnProperty('enableWebsocket')" label="Websocket 功能"> <t-descriptions-item v-if="item.hasOwnProperty('enableWebsocket')"
label="Websocket 功能">
<t-tag class="tag-item" :theme="item.enableWebsocket ? 'success' : 'danger'"> <t-tag class="tag-item" :theme="item.enableWebsocket ? 'success' : 'danger'">
{{ item.enableWebsocket ? '启用' : '禁用' }}</t-tag {{ item.enableWebsocket ? '启用' : '禁用' }}</t-tag>
>
</t-descriptions-item> </t-descriptions-item>
<t-descriptions-item v-if="item.hasOwnProperty('enableCors')" label="跨域放行"> <t-descriptions-item v-if="item.hasOwnProperty('enableCors')" label="跨域放行">
<t-tag class="tag-item" :theme="item.enableCors ? 'success' : 'danger'"> <t-tag class="tag-item" :theme="item.enableCors ? 'success' : 'danger'">
{{ item.enableCors ? '开启' : '关闭' }}</t-tag {{ item.enableCors ? '开启' : '关闭' }}</t-tag>
>
</t-descriptions-item> </t-descriptions-item>
<t-descriptions-item v-if="item.hasOwnProperty('enableForcePushEvent')" label="上报自身消息"> <t-descriptions-item v-if="item.hasOwnProperty('enableForcePushEvent')"
label="上报自身消息">
<t-tag class="tag-item" :theme="item.reportSelfMessage ? 'success' : 'danger'"> <t-tag class="tag-item" :theme="item.reportSelfMessage ? 'success' : 'danger'">
{{ item.reportSelfMessage ? '开启' : '关闭' }}</t-tag {{ item.reportSelfMessage ? '开启' : '关闭' }}</t-tag>
>
</t-descriptions-item> </t-descriptions-item>
<t-descriptions-item v-if="item.hasOwnProperty('enableForcePushEvent')" label="强制推送事件"> <t-descriptions-item v-if="item.hasOwnProperty('enableForcePushEvent')"
<t-tag class="tag-item" :theme="item.enableForcePushEvent ? 'success' : 'danger'"> label="强制推送事件">
{{ item.enableForcePushEvent ? '开启' : '关闭' }}</t-tag <t-tag class="tag-item"
> :theme="item.enableForcePushEvent ? 'success' : 'danger'">
{{ item.enableForcePushEvent ? '开启' : '关闭' }}</t-tag>
</t-descriptions-item> </t-descriptions-item>
</t-descriptions> </t-descriptions>
</t-collapse-panel> </t-collapse-panel>
@@ -114,30 +97,16 @@
<div class="card-noneText">暂无网络配置</div> <div class="card-noneText">暂无网络配置</div>
</t-card> </t-card>
</div> </div>
<t-dialog <t-dialog v-model:visible="visibleBody" :header="dialogTitle" :destroy-on-close="true"
v-model:visible="visibleBody" :show-in-attached-element="true" placement="center" :on-confirm="saveConfig">
:header="dialogTitle"
:destroy-on-close="true"
:show-in-attached-element="true"
placement="center"
:on-confirm="saveConfig"
>
<div slot="body" class="dialog-body"> <div slot="body" class="dialog-body">
<t-form ref="form" :data="newTab" labelAlign="left" :model="newTab"> <t-form ref="form" :data="newTab" labelAlign="left" :model="newTab">
<t-form-item <t-form-item style="text-align: left" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
style="text-align: left" label="名称" name="name">
:rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
label="名称"
name="name"
>
<t-input v-model="newTab.name" /> <t-input v-model="newTab.name" />
</t-form-item> </t-form-item>
<t-form-item <t-form-item style="text-align: left" :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]"
style="text-align: left" label="类型" name="type">
:rules="[{ required: true, message: '请选择类型', trigger: 'change' }]"
label="类型"
name="type"
>
<t-select v-model="newTab.type" @change="onloadDefault"> <t-select v-model="newTab.type" @change="onloadDefault">
<t-option value="httpServers">HTTP 服务器</t-option> <t-option value="httpServers">HTTP 服务器</t-option>
<t-option value="httpClients">HTTP 客户端</t-option> <t-option value="httpClients">HTTP 客户端</t-option>
@@ -146,10 +115,8 @@
</t-select> </t-select>
</t-form-item> </t-form-item>
<div> <div>
<component <component :is="resolveDynamicComponent(getComponent(newTab.type as ComponentKey))"
:is="resolveDynamicComponent(getComponent(newTab.type as ComponentKey))" :config="newTab.data" />
:config="newTab.data"
/>
</div> </div>
</t-form> </t-form>
</div> </div>
@@ -239,7 +206,7 @@ interface TypeChType {
websocketServers: string; websocketServers: string;
websocketClients: string; websocketClients: string;
} }
const typeCh: TypeChType = { const typeCh: Record<ComponentKey, string> = {
httpServers: 'HTTP 服务器', httpServers: 'HTTP 服务器',
httpClients: 'HTTP 客户端', httpClients: 'HTTP 客户端',
websocketServers: 'WebSocket 服务器', websocketServers: 'WebSocket 服务器',
@@ -281,9 +248,11 @@ const delConfig = (item: any) => {
operateType.value = 'delete'; operateType.value = 'delete';
saveConfig(); saveConfig();
}; };
const selectType = (key: string) => {
const selectType = (key: ComponentKey) => {
cardConfig.value = WebConfg.value.get(key); cardConfig.value = WebConfg.value.get(key);
}; };
const onloadDefault = (key: ComponentKey) => { const onloadDefault = (key: ComponentKey) => {
console.log(key); console.log(key);
newTab.value.data = structuredClone(mergeNetworkDefaultConfig[key]); newTab.value.data = structuredClone(mergeNetworkDefaultConfig[key]);
@@ -347,16 +316,18 @@ const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
const loginManager = new QQLoginManager(storedCredential); const loginManager = new QQLoginManager(storedCredential);
return await loginManager.SetOB11Config(config); return await loginManager.SetOB11Config(config);
}; };
//获取卡片数据 //获取卡片数据
const getAllData = (data: NetworkConfig) => { const getAllData = (data: NetworkConfig) => {
cardConfig.value = []; cardConfig.value = [];
WebConfg.value.set('all', []); WebConfg.value.set('all', []);
Object.entries(data).forEach(([key, configs]) => { for (const key in data) {
const configs = data[key as keyof NetworkConfig];
if (key in mergeNetworkDefaultConfig) { if (key in mergeNetworkDefaultConfig) {
networkConfig[key] = [...configs]; networkConfig[key] = [...configs];
const newConfigsArray = configs.map((config: any) => ({ const newConfigsArray = configs.map((config: any) => ({
...config, ...config,
type: typeCh[key], type: typeCh[key as ComponentKey],
})); }));
WebConfg.value.set(key, newConfigsArray); WebConfg.value.set(key, newConfigsArray);
const allConfigs = WebConfg.value.get('all'); const allConfigs = WebConfg.value.get('all');
@@ -366,8 +337,9 @@ const getAllData = (data: NetworkConfig) => {
} }
cardConfig.value = WebConfg.value.get('all'); cardConfig.value = WebConfg.value.get('all');
} }
}); }
}; };
const loadConfig = async () => { const loadConfig = async () => {
try { try {
const userConfig = await getOB11Config(); const userConfig = await getOB11Config();
@@ -378,12 +350,13 @@ const loadConfig = async () => {
console.error('Error loading config:', error); console.error('Error loading config:', error);
} }
}; };
const copyText = (text: string) => {
const copyText = async (text: string) => {
const input = document.createElement('input'); const input = document.createElement('input');
input.value = text; input.value = text;
document.body.appendChild(input); document.body.appendChild(input);
input.select(); input.select();
document.execCommand('copy'); await navigator.clipboard.writeText(text);
document.body.removeChild(input); document.body.removeChild(input);
MessagePlugin.success('复制成功'); MessagePlugin.success('复制成功');
}; };
@@ -440,6 +413,7 @@ onUnmounted(() => {
.setting { .setting {
margin: 0 20px; margin: 0 20px;
} }
.setting-box { .setting-box {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
@@ -450,19 +424,23 @@ onUnmounted(() => {
.setting-card { .setting-card {
width: 100%; width: 100%;
} }
.setting-content { .setting-content {
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
.card-address svg { .card-address svg {
fill: var(--td-brand-color); fill: var(--td-brand-color);
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
} }
.setting-address { .setting-address {
display: flex; display: flex;
margin-top: 2px; margin-top: 2px;
} }
.local { .local {
flex: 5.5; flex: 5.5;
margin-bottom: 1px; margin-bottom: 1px;
@@ -470,9 +448,11 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.none-box { .none-box {
flex: 0.5; flex: 0.5;
} }
.port { .port {
flex: 4; flex: 4;
margin-top: 1px; margin-top: 1px;
@@ -480,23 +460,28 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.setting-status { .setting-status {
display: flex; display: flex;
margin-top: 2px; margin-top: 2px;
} }
.status-deBug { .status-deBug {
display: flex; display: flex;
flex: 4; flex: 4;
} }
.status-tag { .status-tag {
display: flex; display: flex;
flex: 5.5; flex: 5.5;
} }
.token-view { .token-view {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.token-view span { .token-view span {
flex: 1; flex: 1;
margin-right: 20%; margin-right: 20%;
@@ -512,6 +497,7 @@ onUnmounted(() => {
.setting-box { .setting-box {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.setting-address { .setting-address {
display: block; display: block;
} }
@@ -520,6 +506,7 @@ onUnmounted(() => {
.card-box { .card-box {
margin: 10px 20px 0 20px; margin: 10px 20px 0 20px;
} }
.card-none { .card-none {
line-height: 200px; line-height: 200px;
} }
@@ -527,10 +514,12 @@ onUnmounted(() => {
.card-noneText { .card-noneText {
font-size: 16px; font-size: 16px;
} }
.dialog-body { .dialog-body {
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0; width: 0;
background: transparent; background: transparent;
@@ -540,25 +529,31 @@ onUnmounted(() => {
.setting-card .t-card__title { .setting-card .t-card__title {
text-align: left !important; text-align: left !important;
} }
.setting-card .t-card__description { .setting-card .t-card__description {
margin-bottom: 0; margin-bottom: 0;
font-size: 12px; font-size: 12px;
} }
.card-address .t-card__body { .card-address .t-card__body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.setting-base-info .t-descriptions__header { .setting-base-info .t-descriptions__header {
font-size: 15px; font-size: 15px;
margin-bottom: 0; margin-bottom: 0;
} }
.setting-base-info .t-descriptions__label { .setting-base-info .t-descriptions__label {
padding: 0 var(--td-comp-paddingLR-l) !important; padding: 0 var(--td-comp-paddingLR-l) !important;
} }
.setting-base-info tr>td:last-child { .setting-base-info tr>td:last-child {
text-align: right; text-align: right;
} }
.info-coll .t-collapse-panel__wrapper .t-collapse-panel__content { .info-coll .t-collapse-panel__wrapper .t-collapse-panel__content {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
} }