feat: eslint

This commit is contained in:
pk5ls20
2024-11-25 20:02:50 +08:00
parent 7fba9960bf
commit 4be821137d
13 changed files with 273 additions and 233 deletions

View File

@@ -3,12 +3,7 @@
<router-view />
</div>
<div v-if="show">
<t-sticky-tool
shape="round"
placement="right-bottom"
:offset="[-50, 10]"
@click="changeTheme"
>
<t-sticky-tool shape="round" placement="right-bottom" :offset="[-50, 10]" @click="changeTheme">
<t-sticky-item label="浅色" popup="切换浅色模式">
<template #icon><sunny-icon /></template>
</t-sticky-item>
@@ -40,11 +35,11 @@ enum ThemeMode {
Auto = 'auto',
}
const themeLabelMap: Record<string, ThemeMode> = {
'浅色': ThemeMode.Light,
'深色': ThemeMode.Dark,
'自动': ThemeMode.Auto,
浅色: ThemeMode.Light,
深色: ThemeMode.Dark,
自动: ThemeMode.Auto,
};
const show = ref<boolean>(true)
const show = ref<boolean>(true);
const createSetThemeAttributeFunction = () => {
let mediaQueryForAutoTheme: MediaQueryList | null = null;
return (mode: ThemeMode | null) => {
@@ -66,7 +61,7 @@ const createSetThemeAttributeFunction = () => {
const event = new Event('change');
Object.defineProperty(event, 'matches', {
value: mediaQueryForAutoTheme.matches,
writable: false
writable: false,
});
mediaQueryForAutoTheme.dispatchEvent(event);
onBeforeUnmount(() => {
@@ -107,13 +102,11 @@ const haddingFbars = () => {
};
onMounted(() => {
initTheme();
haddingFbars()
haddingFbars();
window.addEventListener('resize', haddingFbars);
});
onUnmounted(() => {
window.removeEventListener('resize', haddingFbars);
});
</script>
<style scoped>
</style>
<style scoped></style>

View File

@@ -74,7 +74,7 @@ export class QQLoginManager {
}
return false;
}
public async checkQQLoginStatusWithQrcode(): Promise<{ qrcodeurl: string, isLogin: string } | undefined> {
public async checkQQLoginStatusWithQrcode(): Promise<{ qrcodeurl: string; isLogin: string } | undefined> {
try {
const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/CheckLoginStatus`, {
method: 'POST',

View File

@@ -20,7 +20,6 @@ interface MenuItem {
route: string;
}
const menuItems = ref<MenuItem[]>([
{ value: 'item1', icon: 'dashboard', label: '基础信息', route: '/dashboard/basic-info' },
{ value: 'item3', icon: 'wifi-1', label: '网络配置', route: '/dashboard/network-config' },
@@ -28,7 +27,7 @@ const menuItems = ref<MenuItem[]>([
{ value: 'item5', icon: 'system-log', label: '日志查看', route: '/dashboard/log-view' },
{ value: 'item6', icon: 'info-circle', label: '关于我们', route: '/dashboard/about-us' },
]);
const menuRef=ref<any>(null)
const menuRef = ref<any>(null);
emitter.on('sendMenu', (event) => {
emitter.emit('sendWidth', menuRef.value.offsetWidth);
localStorage.setItem('menuWidth', menuRef.value.offsetWidth);
@@ -39,7 +38,6 @@ onMounted(() => {
</script>
<style scoped>
.dashboard-container {
display: flex;
flex-direction: row;
@@ -52,7 +50,6 @@ onMounted(() => {
z-index: 2;
}
@media (max-width: 768px) {
.content {
padding: 10px;

View File

@@ -19,7 +19,13 @@
</t-tooltip>
</router-link>
<template #operations>
<t-button :disabled="disBtn" class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
<t-button
:disabled="disBtn"
class="t-demo-collapse-btn"
variant="text"
shape="square"
@click="changeCollapsed"
>
<template #icon><t-icon :name="iconName" /></template>
</t-button>
</template>
@@ -53,7 +59,7 @@ const changeCollapsed = (): void => {
watch(collapsed, (newValue, oldValue) => {
setTimeout(() => {
emitter.emit('sendMenu', collapsed.value);
},300)
}, 300);
});
onMounted(() => {
const mediaQuery = window.matchMedia('(max-width: 800px)');
@@ -67,7 +73,7 @@ onMounted(() => {
const event = new Event('change');
Object.defineProperty(event, 'matches', {
value: mediaQuery.matches,
writable: false
writable: false,
});
mediaQuery.dispatchEvent(event);
return () => {

View File

@@ -4,7 +4,8 @@
<t-divider align="right">
<t-button @click="addConfig()">
<template #icon><add-icon /></template>
添加配置</t-button>
添加配置</t-button
>
</t-divider>
</div>
<div v-if="loadPage" ref="setting" class="setting">
@@ -19,7 +20,12 @@
<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 v-for="(item, index) in cardConfig" :key="index">
<t-card :title="item.name" :style="{width:cardWidth+'px'}" :header-bordered="true" class="setting-card">
<t-card
:title="item.name"
:style="{ width: cardWidth + 'px' }"
:header-bordered="true"
class="setting-card"
>
<template #actions>
<t-space>
<edit2-icon size="20px" @click="editConfig(item)"></edit2-icon>
@@ -35,9 +41,13 @@
<div v-if="item.url" class="local">地址{{ item.url }}</div>
<div class="none-box"></div>
<div v-if="item.port" class="port">端口{{ item.port }}</div>
<div v-if="item.heartInterval&&!item.port" class="port">心跳间隔{{ item.heartInterval }}</div>
<div v-if="item.heartInterval && !item.port" class="port">
心跳间隔{{ item.heartInterval }}
</div>
</div>
<div v-if="item.heartInterval && item.port" class="port">
心跳间隔{{ item.heartInterval }}
</div>
<div v-if="item.heartInterval&&item.port" class="port">心跳间隔{{ item.heartInterval }}</div>
<div class="setting-address">
<div class="local">Token{{ item.token }}</div>
<div class="none-box"></div>
@@ -46,32 +56,52 @@
<div class="setting-status">
<div class="status-tag">
<div>状态</div>
<t-tag class="tag-item" :theme="(item.enable ? 'success' : 'danger')"> {{item.enable ? "启用" : "禁用"}}</t-tag>
<t-tag class="tag-item" :theme="item.enable ? 'success' : 'danger'">
{{ item.enable ? '启用' : '禁用' }}</t-tag
>
</div>
<div class="none-box"></div>
<div class="status-deBug">
<div>调试</div>
<t-tag class="tag-item" :theme="(item.debug ? 'success' : 'danger')"> {{item.debug ? "开启" : "关闭"}}</t-tag>
<t-tag class="tag-item" :theme="item.debug ? 'success' : 'danger'">
{{ item.debug ? '开启' : '关闭' }}</t-tag
>
</div>
</div>
<div class="setting-status">
<div v-if="item.hasOwnProperty('enableWebsocket')" class="status-tag">
<div>WS </div>
<t-tag class="tag-item" :theme="(item.enableWebsocket ? 'success' : 'danger')"> {{item.enableWebsocket ? "启用" : "禁用"}}</t-tag>
<t-tag class="tag-item" :theme="item.enableWebsocket ? 'success' : 'danger'">
{{ item.enableWebsocket ? '启用' : '禁用' }}</t-tag
>
</div>
<div class="none-box"></div>
<div v-if="item.hasOwnProperty('enableCors')" class="status-deBug">
<div>跨域</div>
<t-tag class="tag-item" :theme="(item.enableCors ? 'success' : 'danger')"> {{item.enableCors ? "开启" : "关闭"}}</t-tag>
<t-tag class="tag-item" :theme="item.enableCors ? 'success' : 'danger'">
{{ item.enableCors ? '开启' : '关闭' }}</t-tag
>
</div>
</div>
<div v-if="item.hasOwnProperty('reportSelfMessage')" class="status-deBug" style="margin-top: 2px">
<div
v-if="item.hasOwnProperty('reportSelfMessage')"
class="status-deBug"
style="margin-top: 2px"
>
<div>上报自身消息</div>
<t-tag class="tag-item" :theme="(item.reportSelfMessage ? 'success' : 'danger')"> {{item.reportSelfMessage ? "开启" : "关闭"}}</t-tag>
<t-tag class="tag-item" :theme="item.reportSelfMessage ? 'success' : 'danger'">
{{ item.reportSelfMessage ? '开启' : '关闭' }}</t-tag
>
</div>
<div v-if="item.hasOwnProperty('enableForcePushEvent')" class="status-deBug" style="margin-top: 2px">
<div
v-if="item.hasOwnProperty('enableForcePushEvent')"
class="status-deBug"
style="margin-top: 2px"
>
<div>强制推送事件</div>
<t-tag class="tag-item" :theme="(item.enableForcePushEvent ? 'success' : 'danger')"> {{item.enableForcePushEvent ? "开启" : "关闭"}}</t-tag>
<t-tag class="tag-item" :theme="item.enableForcePushEvent ? 'success' : 'danger'">
{{ item.enableForcePushEvent ? '开启' : '关闭' }}</t-tag
>
</div>
</div>
</t-card>
@@ -92,10 +122,20 @@
>
<div slot="body" class="dialog-body">
<t-form ref="form" :data="newTab" labelAlign="left" :model="newTab">
<t-form-item style="text-align: left" :rules="[{ required: true, message: '请输入名称',trigger: 'blur' }]" label="名称" name="name">
<t-form-item
style="text-align: left"
:rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
label="名称"
name="name"
>
<t-input v-model="newTab.name" />
</t-form-item>
<t-form-item style="text-align: left" :rules="[{ required: true, message: '请选择类型',trigger: 'change'}]" label="类型" name="type">
<t-form-item
style="text-align: left"
:rules="[{ required: true, message: '请选择类型', trigger: 'change' }]"
label="类型"
name="type"
>
<t-select v-model="newTab.type" @change="onloadDefault">
<t-option value="httpServers">HTTP 服务器</t-option>
<t-option value="httpClients">HTTP 客户端</t-option>
@@ -104,7 +144,10 @@
</t-select>
</t-form-item>
<div>
<component :is="resolveDynamicComponent(getComponent(newTab.type as ConfigKey))" :config="newTab.data" />
<component
:is="resolveDynamicComponent(getComponent(newTab.type as ConfigKey))"
:config="newTab.data"
/>
</div>
</t-form>
</div>
@@ -135,14 +178,14 @@ import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.v
import { MessagePlugin } from 'tdesign-vue-next';
import { QQLoginManager } from '@/backend/shell';
const tabsWidth=ref<number>(0)
const menuWidth=ref<number>(0)
const cardWidth=ref<number>(0)
const cardHeight=ref<number>(0)
const tabsWidth = ref<number>(0);
const menuWidth = ref<number>(0);
const cardWidth = ref<number>(0);
const cardHeight = ref<number>(0);
const mediumScreen = window.matchMedia('(min-width: 768px) and (max-width: 1024px)');
const largeScreen = window.matchMedia('(min-width: 1025px)');
const headerBox=ref<any>(null)
const setting=ref<any>(null)
const headerBox = ref<any>(null);
const setting = ref<any>(null);
const loadPage = ref<boolean>(false);
const visibleBody = ref<boolean>(false);
const newTab = ref<{ name: string; data: any; type: string }>({ name: '', data: {}, type: '' });
@@ -184,20 +227,22 @@ interface NetworkConfigType {
httpServers: any[];
}
const networkConfig: NetworkConfigType = {
"websocketClients": [],
"websocketServers": [],
"httpClients": [],
"httpServers": []
websocketClients: [],
websocketServers: [],
httpClients: [],
httpServers: [],
};
//挂载的数据
const WebConfg = ref(new Map<string, Array<null>>([
["all", []],
["httpServers", []],
["httpClients", []],
["websocketServers", []],
["websocketClients", []]
]));
const WebConfg = ref(
new Map<string, Array<null>>([
['all', []],
['httpServers', []],
['httpClients', []],
['websocketServers', []],
['websocketClients', []],
])
);
interface TypeChType {
[key: string]: string;
httpServers: string;
@@ -206,81 +251,79 @@ interface TypeChType {
websocketClients: string;
}
const typeCh: TypeChType = {
"httpServers":"HTTP 服务器" ,
"httpClients":"HTTP 客户端",
"websocketServers":"WebSocket 服务器",
"websocketClients":"WebSocket 客户端"
httpServers: 'HTTP 服务器',
httpClients: 'HTTP 客户端',
websocketServers: 'WebSocket 服务器',
websocketClients: 'WebSocket 客户端',
};
const getKeyByValue = (obj: TypeChType, value: string): string | undefined => {
return Object.entries(obj).find(([_, v]) => v === value)?.[0];
}
const cardConfig = ref<any>([])
};
const cardConfig = ref<any>([]);
const getComponent = (type: ComponentKey) => {
return componentMap[type];
};
const addConfig = () => {
dialogTitle.value="添加配置"
dialogTitle.value = '添加配置';
newTab.value = { name: '', data: {}, type: '' };
operateType.value='add'
operateType.value = 'add';
visibleBody.value = true;
}
};
const editConfig = (item: any) => {
dialogTitle.value="修改配置"
const type = getKeyByValue(typeCh,item.type)
dialogTitle.value = '修改配置';
const type = getKeyByValue(typeCh, item.type);
if (type) {
newTab.value = { name: item.name, data: item, type: type };
}
operateType.value='edit'
operateType.value = 'edit';
configIndex.value = networkConfig[newTab.value.type].findIndex((obj: any) => obj.name === item.name);
visibleBody.value = true;
}
};
const delConfig = (item: any) => {
const type = getKeyByValue(typeCh,item.type)
const type = getKeyByValue(typeCh, item.type);
if (type) {
newTab.value = { name: item.name, data: item, type: type };
}
configIndex.value=configIndex.value=networkConfig[newTab.value.type].findIndex((obj:any) => obj.name === item.name);
operateType.value='delete'
saveConfig()
}
configIndex.value = configIndex.value = networkConfig[newTab.value.type].findIndex(
(obj: any) => obj.name === item.name
);
operateType.value = 'delete';
saveConfig();
};
const selectType = (key: string) => {
cardConfig.value = WebConfg.value.get(key)
}
cardConfig.value = WebConfg.value.get(key);
};
const onloadDefault = (key: ConfigKey) => {
console.log(key)
newTab.value.data=structuredClone(defaultConfigs[key])
}
console.log(key);
newTab.value.data = structuredClone(defaultConfigs[key]);
};
//检测重名
const checkName = (name: string) => {
const allConfigs = WebConfg.value.get('all')?.findIndex((obj: any) => obj.name === name);
if (newTab.value.name === '' || newTab.value.type === '') {
MessagePlugin.error('请填写完整信息');
return false;
}
else if(allConfigs===-1||newTab.value.data.name===name){
} else if (allConfigs === -1 || newTab.value.data.name === name) {
return true;
}
else {
} else {
MessagePlugin.error('名称已存在');
return false;
}
}
};
//保存
const saveConfig = async () => {
if (operateType.value == 'add') {
if (!checkName(newTab.value.name)) return;
newTab.value.data.name=newTab.value.name
newTab.value.data.name = newTab.value.name;
networkConfig[newTab.value.type].push(newTab.value.data);
}
else if(operateType.value=='edit'){
} else if (operateType.value == 'edit') {
if (!checkName(newTab.value.name)) return;
newTab.value.data.name=newTab.value.name
newTab.value.data.name = newTab.value.name;
networkConfig[newTab.value.type][configIndex.value] = newTab.value.data;
}
else if(operateType.value=='delete'){
networkConfig[newTab.value.type].splice(configIndex.value,1)
} else if (operateType.value == 'delete') {
networkConfig[newTab.value.type].splice(configIndex.value, 1);
}
const userConfig = await getOB11Config();
if (!userConfig) return;
@@ -288,9 +331,9 @@ const saveConfig = async () => {
const success = await setOB11Config(userConfig);
if (success) {
operateType.value = '';
configIndex.value=0
configIndex.value = 0;
MessagePlugin.success('配置保存成功');
await loadConfig()
await loadConfig();
visibleBody.value = false;
} else {
MessagePlugin.error('配置保存失败');
@@ -317,14 +360,14 @@ const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
};
//获取卡片数据
const getAllData = (data: NetworkConfig) => {
cardConfig.value=[]
WebConfg.value.set("all", [])
cardConfig.value = [];
WebConfg.value.set('all', []);
Object.entries(data).forEach(([key, configs]) => {
if (key in defaultConfigs) {
networkConfig[key]=[...configs]
networkConfig[key] = [...configs];
const newConfigsArray = configs.map((config: any) => ({
...config,
type:typeCh[key]
type: typeCh[key],
}));
WebConfg.value.set(key, newConfigsArray);
const allConfigs = WebConfg.value.get('all');
@@ -332,50 +375,49 @@ const getAllData = (data: NetworkConfig) => {
const newAllConfigs = [...allConfigs, ...newConfigsArray];
WebConfg.value.set('all', newAllConfigs);
}
cardConfig.value=WebConfg.value.get("all")
cardConfig.value = WebConfg.value.get('all');
}
});
}
};
const loadConfig = async () => {
try {
const userConfig = await getOB11Config();
if (!userConfig) return;
const mergedConfig = mergeOneBotConfigs(userConfig);
getAllData(mergedConfig.network)
getAllData(mergedConfig.network);
} catch (error) {
console.error('Error loading config:', error);
}
};
const handleResize = () => {
tabsWidth.value = window.innerWidth- 40 -menuWidth.value
tabsWidth.value = window.innerWidth - 40 - menuWidth.value;
if (mediumScreen.matches) {
cardWidth.value = (tabsWidth.value - 20) / 2;
}
else if(largeScreen.matches) {
} else if (largeScreen.matches) {
cardWidth.value = (tabsWidth.value - 40) / 3;
} else {
cardWidth.value = tabsWidth.value;
}
loadPage.value=true
loadPage.value = true;
setTimeout(() => {
cardHeight.value = window.innerHeight - headerBox.value.offsetHeight - setting.value.offsetHeight - 20;
},300)
}, 300);
};
emitter.on('sendWidth', (width) => {
if (typeof width === 'number' && !isNaN(width)) {
menuWidth.value = width;
handleResize()
handleResize();
}
});
onMounted(() => {
loadConfig()
loadConfig();
const cachedWidth = localStorage.getItem('menuWidth');
if (cachedWidth) {
menuWidth.value = parseInt(cachedWidth);
setTimeout(() => {
handleResize()
},300)
handleResize();
}, 300);
}
window.addEventListener('resize', handleResize);
});
@@ -384,7 +426,6 @@ onUnmounted(() => {
});
</script>
<style scoped>
.title {
padding: 20px 20px 0 20px;

View File

@@ -89,8 +89,7 @@ onMounted(() => {
const handleMediaChange = (e: MediaQueryListEvent) => {
if (e.matches) {
labelAlign.value = 'top';
}
else {
} else {
labelAlign.value = 'left';
}
};
@@ -98,7 +97,7 @@ onMounted(() => {
const event = new Event('change');
Object.defineProperty(event, 'matches', {
value: mediaQuery.matches,
writable: false
writable: false,
});
mediaQuery.dispatchEvent(event);
return () => {
@@ -140,5 +139,4 @@ onMounted(() => {
justify-content: center;
margin-top: 20px;
}
</style>

View File

@@ -33,16 +33,17 @@ const props = defineProps<{
const messageFormatOptions = ref([
{ label: 'Array', value: 'array' },
{ label: 'String', value: 'string' }
{ label: 'String', value: 'string' },
]);
watch(() => props.config.messagePostFormat, (newValue) => {
watch(
() => props.config.messagePostFormat,
(newValue) => {
if (newValue !== 'array' && newValue !== 'string') {
props.config.messagePostFormat = 'array';
}
});
}
);
</script>
<style scoped>
</style>
<style scoped></style>

View File

@@ -39,16 +39,17 @@ const props = defineProps<{
const messageFormatOptions = ref([
{ label: 'Array', value: 'array' },
{ label: 'String', value: 'string' }
{ label: 'String', value: 'string' },
]);
watch(() => props.config.messagePostFormat, (newValue) => {
watch(
() => props.config.messagePostFormat,
(newValue) => {
if (newValue !== 'array' && newValue !== 'string') {
props.config.messagePostFormat = 'array';
}
});
}
);
</script>
<style scoped>
</style>
<style scoped></style>

View File

@@ -36,16 +36,17 @@ const props = defineProps<{
const messageFormatOptions = ref([
{ label: 'Array', value: 'array' },
{ label: 'String', value: 'string' }
{ label: 'String', value: 'string' },
]);
watch(() => props.config.messagePostFormat, (newValue) => {
watch(
() => props.config.messagePostFormat,
(newValue) => {
if (newValue !== 'array' && newValue !== 'string') {
props.config.messagePostFormat = 'array';
}
});
}
);
</script>
<style scoped>
</style>
<style scoped></style>

View File

@@ -42,15 +42,17 @@ const props = defineProps<{
const messageFormatOptions = ref([
{ label: 'Array', value: 'array' },
{ label: 'String', value: 'string' }
{ label: 'String', value: 'string' },
]);
watch(() => props.config.messagePostFormat, (newValue) => {
watch(
() => props.config.messagePostFormat,
(newValue) => {
if (newValue !== 'array' && newValue !== 'string') {
props.config.messagePostFormat = 'array';
}
});
}
);
</script>
<style scoped>
</style>
<style scoped></style>

View File

@@ -1,3 +1,3 @@
import mitt from "mitt"
import mitt from 'mitt';
const emitter = mitt();
export default emitter;