Northern_Lights/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2026-01-18 06:20:29 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix:修复webui已知bug

Browse Source
This commit is contained in:
纸凤孤凰 2024-11-27 18:16:16 +08:00
parent 6a3713e86c
commit 1ea80f4447
3 changed files with 57 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
napcat.webui/src/App.vue
View File

@ -35,9 +35,9 @@ enum ThemeMode {
Auto = 'auto', Auto = 'auto',
} }
const themeLabelMap: Record<string, ThemeMode> = { const themeLabelMap: Record<string, ThemeMode> = {
浅色: ThemeMode.Light, "浅色": ThemeMode.Light,
深色: ThemeMode.Dark, "深色": ThemeMode.Dark,
自动: ThemeMode.Auto, "自动": ThemeMode.Auto,
}; };
const show = ref<boolean>(true); const show = ref<boolean>(true);
const createSetThemeAttributeFunction = () => { const createSetThemeAttributeFunction = () => {

2
napcat.webui/src/main.ts
View File

@ -39,6 +39,7 @@ import {
Footer as TFooter, Footer as TFooter,
Aside as TAside, Aside as TAside,
Popconfirm as Tpopconfirm, Popconfirm as Tpopconfirm,
Empty as TEmpty,
} from 'tdesign-vue-next'; } from 'tdesign-vue-next';
import { router } from './router'; import { router } from './router';
import 'tdesign-vue-next/es/style/index.css'; import 'tdesign-vue-next/es/style/index.css';
@ -82,4 +83,5 @@ app.use(TContent);
app.use(TFooter); app.use(TFooter);
app.use(TAside); app.use(TAside);
app.use(Tpopconfirm); app.use(Tpopconfirm);
app.use(TEmpty);
app.mount('#app'); app.mount('#app');

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

@ -35,25 +35,37 @@
'var(--td-success-color)' : 'var(--td-success-color)' :
'var(--td-error-color)') 'var(--td-error-color)')
}"> }">
<server-filled-icon size="20px"></server-filled-icon> <div class="local-box" v-if="item.host&&item.port">
<strong v-if="item.host">{{ item.host }}</strong> <server-filled-icon class="local-icon" size="20px"></server-filled-icon>
<strong v-if="item.url">{{ item.url }}</strong> <strong class="local">{{ item.host }}:{{ item.port }}</strong>
<strong v-if="item.port">:{{ item.port }}</strong> <copy-icon class="copy-icon" size="20px" @click="copyText(item.host + ':' + item.port)"></copy-icon>
<div style="flex: 1"></div> </div>
<copy-icon size="20px" @click="copyText(item.host + ':' + item.port)"></copy-icon> <div class="local-box" v-if="item.url">
<server-filled-icon class="local-icon" size="20px"></server-filled-icon>
<strong class="local" >{{ item.url }}</strong>
<copy-icon class="copy-icon" size="20px" @click="copyText(item.url)"></copy-icon>
</div>
</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 size="small" :layout="infoOneCol ? 'vertical' : 'horizontal'" <t-descriptions size="small" :layout="infoOneCol ? 'vertical' : 'horizontal'"
class="setting-base-info"> 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 v-if="mediumScreen.matches||largeScreen.matches" class="token-view">
<span>{{ showToken ? item.token : '*******' }}</span> <span>{{ showToken ? item.token : '******' }}</span>
<browse-icon v-if="showToken" size="15px" <browse-icon class="browse-icon" v-if="showToken" size="18px"
@click="showToken = false"></browse-icon> @click="showToken = false"></browse-icon>
<browse-off-icon v-else size="17px" <browse-off-icon class="browse-icon" v-else size="18px"
@click="showToken = true"></browse-off-icon> @click="showToken = true"></browse-off-icon>
</div> </div>
<div v-else>
<t-popup :showArrow="true" trigger="click">
<t-tag theme="primary">点击查看</t-tag>
<template #content>
<div @click="copyText(item.token)">{{item.token}}</div>
</template>
</t-popup>
</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>
@ -61,7 +73,7 @@
<t-collapse-panel header="状态信息"> <t-collapse-panel header="状态信息">
<t-descriptions size="small" :layout="infoOneCol ? 'vertical' : 'horizontal'" <t-descriptions size="small" :layout="infoOneCol ? 'vertical' : 'horizontal'"
class="setting-base-info"> class="setting-base-info">
<t-descriptions-item v-if="item.token" label="调试日志"> <t-descriptions-item v-if="item.hasOwnProperty('debug')" 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>
@ -93,13 +105,13 @@
</div> </div>
<div style="height: 20vh"></div> <div style="height: 20vh"></div>
</div> </div>
<t-card class="card-none" v-else> <t-card v-else>
<div class="card-noneText">暂无网络配置</div> <t-empty class="card-none" title="暂无网络配置"> </t-empty>
</t-card> </t-card>
</div> </div>
<t-dialog v-model:visible="visibleBody" :header="dialogTitle" :destroy-on-close="true" <t-dialog v-model:visible="visibleBody" :header="dialogTitle" :destroy-on-close="true"
:show-in-attached-element="true" placement="center" :on-confirm="saveConfig"> :show-in-attached-element="true" placement="center" :on-confirm="saveConfig" class=".t-dialog__ctx .t-dialog--defaul">
<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 style="text-align: left" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]" <t-form-item style="text-align: left" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
label="名称" name="name"> label="名称" name="name">
@ -354,7 +366,7 @@ const handleResize = () => {
// } else { // } else {
// infoOneCol.value= false // infoOneCol.value= false
// } // }
tabsWidth.value = window.innerWidth - 40 - menuWidth.value; tabsWidth.value = window.innerWidth - 41 - menuWidth.value;
if (mediumScreen.matches) { if (mediumScreen.matches) {
cardWidth.value = (tabsWidth.value - 20) / 2; cardWidth.value = (tabsWidth.value - 20) / 2;
} else if (largeScreen.matches) { } else if (largeScreen.matches) {
@ -364,7 +376,7 @@ const handleResize = () => {
} }
loadPage.value = true; loadPage.value = true;
setTimeout(() => { setTimeout(() => {
cardHeight.value = window.innerHeight - (headerBox.value?.offsetHeight ?? 0) - (setting.value?.offsetHeight ?? 0) - 20; cardHeight.value = window.innerHeight - (headerBox.value?.offsetHeight ?? 0) - (setting.value?.offsetHeight ?? 0) - 21;
}, 300); }, 300);
}; };
emitter.on('sendWidth', (width) => { emitter.on('sendWidth', (width) => {
@ -409,70 +421,58 @@ onUnmounted(() => {
.setting-card { .setting-card {
width: 100%; width: 100%;
text-align: left;
} }
.setting-content { .setting-content {
width: 100%; width: 100%;
text-align: left;
} }
.card-address svg { .card-address svg {
fill: var(--td-brand-color); fill: var(--td-brand-color);
margin-right: 10px;
cursor: pointer; cursor: pointer;
} }
.setting-address { .local-box {
display: flex; display: flex;
margin-top: 2px; margin-top: 2px;
} }
.local-icon{
flex: 1;
}
.local { .local {
flex: 5.5; flex: 6;
margin-bottom: 1px; margin: 0 10px 0 10px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.none-box {
flex: 0.5; .copy-icon {
flex: 1;
cursor: pointer;
flex-direction: row;
} }
.port {
flex: 4;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.setting-status {
display: flex;
margin-top: 2px;
}
.status-deBug {
display: flex;
flex: 4;
}
.status-tag {
display: flex;
flex: 5.5;
}
.token-view { .token-view {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
} }
.token-view span { .token-view span {
flex: 1; flex: 5;
margin-right: 20%; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.browse-icon{
flex: 2;
}
:global(.t-dialog__ctx .t-dialog--defaul) {
margin: 0 20px;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.setting-box { .setting-box {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -484,9 +484,6 @@ onUnmounted(() => {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.setting-address {
display: block;
}
} }
.card-box { .card-box {
@ -494,12 +491,9 @@ onUnmounted(() => {
} }
.card-none { .card-none {
line-height: 200px; line-height: 400px !important;
} }
.card-noneText {
font-size: 16px;
}
.dialog-body { .dialog-body {
max-height: 60vh; max-height: 60vh;