mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2025-07-19 12:03:37 +00:00
chore: eslint
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"webui:lint": "eslint . --fix",
|
||||
"webui:lint": "eslint --fix src/**/*.{js,ts,vue}",
|
||||
"webui:dev": "vite",
|
||||
"webui:build": "vue-tsc -b && vite build",
|
||||
"webui:preview": "vite preview"
|
||||
|
@@ -23,9 +23,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.about-us {
|
||||
|
@@ -1,7 +1,14 @@
|
||||
<template>
|
||||
<t-space class="full-space">
|
||||
<template v-if="clientPanelData.length > 0">
|
||||
<t-tabs v-model="activeTab" :addable="true" theme="card" @add="showAddTabDialog" @remove="removeTab" class="full-tabs">
|
||||
<t-tabs
|
||||
v-model="activeTab"
|
||||
:addable="true"
|
||||
theme="card"
|
||||
@add="showAddTabDialog"
|
||||
@remove="removeTab"
|
||||
class="full-tabs"
|
||||
>
|
||||
<t-tab-panel
|
||||
v-for="(config, idx) in clientPanelData"
|
||||
:key="idx"
|
||||
@@ -12,7 +19,7 @@
|
||||
>
|
||||
<component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
|
||||
<div class="button-container">
|
||||
<t-button @click="saveConfig" style="width: 100px; height: 40px;">保存</t-button>
|
||||
<t-button @click="saveConfig" style="width: 100px; height: 40px">保存</t-button>
|
||||
</div>
|
||||
</t-tab-panel>
|
||||
</t-tabs>
|
||||
@@ -41,12 +48,12 @@
|
||||
</t-form>
|
||||
</t-dialog>
|
||||
</t-space>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, resolveDynamicComponent, nextTick, Ref, onMounted, reactive, Reactive } from 'vue';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import {
|
||||
<script setup lang="ts">
|
||||
import { ref, resolveDynamicComponent, nextTick, Ref, onMounted, reactive, Reactive } from 'vue';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import {
|
||||
httpServerDefaultConfigs,
|
||||
httpClientDefaultConfigs,
|
||||
websocketServerDefaultConfigs,
|
||||
@@ -58,57 +65,57 @@
|
||||
NetworkConfig,
|
||||
OneBotConfig,
|
||||
mergeOneBotConfigs,
|
||||
} from '../../../src/onebot/config/config';
|
||||
import { QQLoginManager } from '@/backend/shell';
|
||||
import HttpServerComponent from '@/pages/network/HttpServerComponent.vue';
|
||||
import HttpClientComponent from '@/pages/network/HttpClientComponent.vue';
|
||||
import WebsocketServerComponent from '@/pages/network/WebsocketServerComponent.vue';
|
||||
import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.vue';
|
||||
import EmptyStateComponent from '@/pages/network/EmptyStateComponent.vue';
|
||||
} from '../../../src/onebot/config/config';
|
||||
import { QQLoginManager } from '@/backend/shell';
|
||||
import HttpServerComponent from '@/pages/network/HttpServerComponent.vue';
|
||||
import HttpClientComponent from '@/pages/network/HttpClientComponent.vue';
|
||||
import WebsocketServerComponent from '@/pages/network/WebsocketServerComponent.vue';
|
||||
import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.vue';
|
||||
import EmptyStateComponent from '@/pages/network/EmptyStateComponent.vue';
|
||||
|
||||
type ConfigKey = 'httpServers' | 'httpClients' | 'websocketServers' | 'websocketClients';
|
||||
type ConfigKey = 'httpServers' | 'httpClients' | 'websocketServers' | 'websocketClients';
|
||||
|
||||
type ConfigUnion = HttpClientConfig | HttpServerConfig | WebsocketServerConfig | WebsocketClientConfig;
|
||||
type ConfigUnion = HttpClientConfig | HttpServerConfig | WebsocketServerConfig | WebsocketClientConfig;
|
||||
|
||||
const defaultConfigs: Record<ConfigKey, ConfigUnion> = {
|
||||
const defaultConfigs: Record<ConfigKey, ConfigUnion> = {
|
||||
httpServers: httpServerDefaultConfigs,
|
||||
httpClients: httpClientDefaultConfigs,
|
||||
websocketServers: websocketServerDefaultConfigs,
|
||||
websocketClients: websocketClientDefaultConfigs,
|
||||
};
|
||||
};
|
||||
|
||||
const componentMap: Record<
|
||||
const componentMap: Record<
|
||||
ConfigKey,
|
||||
| typeof HttpServerComponent
|
||||
| typeof HttpClientComponent
|
||||
| typeof WebsocketServerComponent
|
||||
| typeof WebsocketClientComponent
|
||||
> = {
|
||||
> = {
|
||||
httpServers: HttpServerComponent,
|
||||
httpClients: HttpClientComponent,
|
||||
websocketServers: WebsocketServerComponent,
|
||||
websocketClients: WebsocketClientComponent,
|
||||
};
|
||||
};
|
||||
|
||||
interface ClientPanel {
|
||||
interface ClientPanel {
|
||||
name: string;
|
||||
key: ConfigKey;
|
||||
data: Ref<ConfigUnion>;
|
||||
}
|
||||
}
|
||||
|
||||
type ComponentKey = keyof typeof componentMap;
|
||||
type ComponentKey = keyof typeof componentMap;
|
||||
|
||||
// TODO: store these state in global store (aka pinia)
|
||||
const activeTab = ref<number>(0);
|
||||
const isDialogVisible = ref(false);
|
||||
const newTab = ref<{ name: string; type: ComponentKey }>({ name: '', type: 'httpServers' });
|
||||
const clientPanelData: Reactive<Array<ClientPanel>> = reactive([]);
|
||||
// TODO: store these state in global store (aka pinia)
|
||||
const activeTab = ref<number>(0);
|
||||
const isDialogVisible = ref(false);
|
||||
const newTab = ref<{ name: string; type: ComponentKey }>({ name: '', type: 'httpServers' });
|
||||
const clientPanelData: Reactive<Array<ClientPanel>> = reactive([]);
|
||||
|
||||
const getComponent = (type: ComponentKey) => {
|
||||
const getComponent = (type: ComponentKey) => {
|
||||
return componentMap[type];
|
||||
};
|
||||
};
|
||||
|
||||
const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
|
||||
const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
|
||||
const storedCredential = localStorage.getItem('auth');
|
||||
if (!storedCredential) {
|
||||
console.error('No stored credential found');
|
||||
@@ -116,9 +123,9 @@
|
||||
}
|
||||
const loginManager = new QQLoginManager(storedCredential);
|
||||
return await loginManager.GetOB11Config();
|
||||
};
|
||||
};
|
||||
|
||||
const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
|
||||
const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
|
||||
const storedCredential = localStorage.getItem('auth');
|
||||
if (!storedCredential) {
|
||||
console.error('No stored credential found');
|
||||
@@ -126,21 +133,21 @@
|
||||
}
|
||||
const loginManager = new QQLoginManager(storedCredential);
|
||||
return await loginManager.SetOB11Config(config);
|
||||
};
|
||||
};
|
||||
|
||||
const addToPanel = <T extends ConfigUnion>(configs: T[], key: ConfigKey) => {
|
||||
const addToPanel = <T extends ConfigUnion>(configs: T[], key: ConfigKey) => {
|
||||
configs.forEach((config) => clientPanelData.push({ name: config.name, data: config, key: key }));
|
||||
};
|
||||
};
|
||||
|
||||
const addConfigDataToPanel = (data: NetworkConfig) => {
|
||||
const addConfigDataToPanel = (data: NetworkConfig) => {
|
||||
Object.entries(data).forEach(([key, configs]) => {
|
||||
if (key in defaultConfigs) {
|
||||
addToPanel(configs as ConfigUnion[], key as ConfigKey);
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const parsePanelData = (): NetworkConfig => {
|
||||
const parsePanelData = (): NetworkConfig => {
|
||||
return {
|
||||
websocketClients: clientPanelData
|
||||
.filter((panel) => panel.key === 'websocketClients')
|
||||
@@ -155,9 +162,9 @@
|
||||
.filter((panel) => panel.key === 'httpServers')
|
||||
.map((panel) => panel.data as HttpServerConfig),
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
const loadConfig = async () => {
|
||||
const loadConfig = async () => {
|
||||
try {
|
||||
const userConfig = await getOB11Config();
|
||||
if (!userConfig) return;
|
||||
@@ -166,31 +173,31 @@
|
||||
} catch (error) {
|
||||
console.error('Error loading config:', error);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// It's better to "saveConfig" instead of using deep watch
|
||||
const saveConfig = async () => {
|
||||
// It's better to "saveConfig" instead of using deep watch
|
||||
const saveConfig = async () => {
|
||||
const config = parsePanelData();
|
||||
const userConfig = await getOB11Config();
|
||||
if (!userConfig) return;
|
||||
userConfig.network = config;
|
||||
const success = await setOB11Config(userConfig);
|
||||
if (success) {
|
||||
MessagePlugin.success('配置保存成功');
|
||||
await MessagePlugin.success('配置保存成功');
|
||||
} else {
|
||||
MessagePlugin.error('配置保存失败');
|
||||
await MessagePlugin.error('配置保存失败');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const showAddTabDialog = () => {
|
||||
const showAddTabDialog = () => {
|
||||
newTab.value = { name: '', type: 'httpServers' };
|
||||
isDialogVisible.value = true;
|
||||
};
|
||||
};
|
||||
|
||||
const addTab = async () => {
|
||||
const addTab = async () => {
|
||||
const { name, type } = newTab.value;
|
||||
if (clientPanelData.some(panel => panel.name === name)) {
|
||||
MessagePlugin.error('选项卡名称已存在');
|
||||
if (clientPanelData.some((panel) => panel.name === name)) {
|
||||
await MessagePlugin.error('选项卡名称已存在');
|
||||
return;
|
||||
}
|
||||
const defaultConfig = structuredClone(defaultConfigs[type]);
|
||||
@@ -199,46 +206,46 @@
|
||||
isDialogVisible.value = false;
|
||||
await nextTick();
|
||||
activeTab.value = clientPanelData.length - 1;
|
||||
MessagePlugin.success('选项卡添加成功');
|
||||
};
|
||||
await MessagePlugin.success('选项卡添加成功');
|
||||
};
|
||||
|
||||
const removeTab = async (payload: { value: string; index: number; e: PointerEvent }) => {
|
||||
const removeTab = async (payload: { value: string; index: number; e: PointerEvent }) => {
|
||||
clientPanelData.splice(payload.index, 1);
|
||||
activeTab.value = Math.max(0, activeTab.value - 1);
|
||||
await saveConfig();
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
loadConfig();
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.full-space {
|
||||
<style scoped>
|
||||
.full-space {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.full-tabs {
|
||||
.full-tabs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.full-tab-panel {
|
||||
.full-tab-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
@@ -36,14 +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>
|
||||
|
@@ -42,14 +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>
|
||||
|
@@ -39,14 +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>
|
||||
|
@@ -45,14 +45,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>
|
||||
|
@@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<t-space class="full-space">
|
||||
<t-tabs v-model="activeTab" :addable="true" theme="card" @add="showAddTabDialog" @remove="removeTab" class="full-tabs">
|
||||
<t-tabs
|
||||
v-model="activeTab"
|
||||
:addable="true"
|
||||
theme="card"
|
||||
@add="showAddTabDialog"
|
||||
@remove="removeTab"
|
||||
class="full-tabs"
|
||||
>
|
||||
<t-tab-panel
|
||||
v-for="(config, idx) in clientPanelData"
|
||||
:key="idx"
|
||||
@@ -11,7 +18,7 @@
|
||||
>
|
||||
<component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
|
||||
<div class="button-container">
|
||||
<t-button @click="saveConfig" style="width: 100px; height: 40px;">保存</t-button>
|
||||
<t-button @click="saveConfig" style="width: 100px; height: 40px">保存</t-button>
|
||||
</div>
|
||||
</t-tab-panel>
|
||||
</t-tabs>
|
||||
@@ -183,7 +190,7 @@ const showAddTabDialog = () => {
|
||||
|
||||
const addTab = async () => {
|
||||
const { name, type } = newTab.value;
|
||||
if (clientPanelData.some(panel => panel.name === name)) {
|
||||
if (clientPanelData.some((panel) => panel.name === name)) {
|
||||
MessagePlugin.error('选项卡名称已存在');
|
||||
return;
|
||||
}
|
||||
|
Reference in New Issue
Block a user