chore: eslint

This commit is contained in:
pk5ls20
2024-11-17 03:35:20 +08:00
parent 3c10b82bab
commit cc73104d62
10 changed files with 215 additions and 191 deletions

View File

@@ -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"

View File

@@ -23,9 +23,7 @@
</div>
</template>
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<style scoped>
.about-us {

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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;
}