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

chore: eslint

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
napcat.webui/package.json
View File

@@ -4,7 +4,7 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"webui:lint": "eslint . --fix", "webui:lint": "eslint --fix src/**/*.{js,ts,vue}",
"webui:dev": "vite", "webui:dev": "vite",
"webui:build": "vue-tsc -b && vite build", "webui:build": "vue-tsc -b && vite build",
"webui:preview": "vite preview" "webui:preview": "vite preview"

4
napcat.webui/src/pages/AboutUs.vue
View File

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

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

@@ -1,7 +1,14 @@
<template> <template>
<t-space class="full-space"> <t-space class="full-space">
<template v-if="clientPanelData.length > 0"> <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 <t-tab-panel
v-for="(config, idx) in clientPanelData" v-for="(config, idx) in clientPanelData"
:key="idx" :key="idx"
@@ -12,7 +19,7 @@
> >
<component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" /> <component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
<div class="button-container"> <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> </div>
</t-tab-panel> </t-tab-panel>
</t-tabs> </t-tabs>
@@ -41,12 +48,12 @@
</t-form> </t-form>
</t-dialog> </t-dialog>
</t-space> </t-space>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, resolveDynamicComponent, nextTick, Ref, onMounted, reactive, Reactive } from 'vue'; import { ref, resolveDynamicComponent, nextTick, Ref, onMounted, reactive, Reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import { import {
httpServerDefaultConfigs, httpServerDefaultConfigs,
httpClientDefaultConfigs, httpClientDefaultConfigs,
websocketServerDefaultConfigs, websocketServerDefaultConfigs,
@@ -58,57 +65,57 @@
NetworkConfig, NetworkConfig,
OneBotConfig, OneBotConfig,
mergeOneBotConfigs, mergeOneBotConfigs,
} from '../../../src/onebot/config/config'; } from '../../../src/onebot/config/config';
import { QQLoginManager } from '@/backend/shell'; import { QQLoginManager } from '@/backend/shell';
import HttpServerComponent from '@/pages/network/HttpServerComponent.vue'; import HttpServerComponent from '@/pages/network/HttpServerComponent.vue';
import HttpClientComponent from '@/pages/network/HttpClientComponent.vue'; import HttpClientComponent from '@/pages/network/HttpClientComponent.vue';
import WebsocketServerComponent from '@/pages/network/WebsocketServerComponent.vue'; import WebsocketServerComponent from '@/pages/network/WebsocketServerComponent.vue';
import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.vue'; import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.vue';
import EmptyStateComponent from '@/pages/network/EmptyStateComponent.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, httpServers: httpServerDefaultConfigs,
httpClients: httpClientDefaultConfigs, httpClients: httpClientDefaultConfigs,
websocketServers: websocketServerDefaultConfigs, websocketServers: websocketServerDefaultConfigs,
websocketClients: websocketClientDefaultConfigs, websocketClients: websocketClientDefaultConfigs,
}; };
const componentMap: Record< const componentMap: Record<
ConfigKey, ConfigKey,
| typeof HttpServerComponent | typeof HttpServerComponent
| typeof HttpClientComponent | typeof HttpClientComponent
| typeof WebsocketServerComponent | typeof WebsocketServerComponent
| typeof WebsocketClientComponent | typeof WebsocketClientComponent
> = { > = {
httpServers: HttpServerComponent, httpServers: HttpServerComponent,
httpClients: HttpClientComponent, httpClients: HttpClientComponent,
websocketServers: WebsocketServerComponent, websocketServers: WebsocketServerComponent,
websocketClients: WebsocketClientComponent, websocketClients: WebsocketClientComponent,
}; };
interface ClientPanel { interface ClientPanel {
name: string; name: string;
key: ConfigKey; key: ConfigKey;
data: Ref<ConfigUnion>; data: Ref<ConfigUnion>;
} }
type ComponentKey = keyof typeof componentMap; type ComponentKey = keyof typeof componentMap;
// TODO: store these state in global store (aka pinia) // TODO: store these state in global store (aka pinia)
const activeTab = ref<number>(0); const activeTab = ref<number>(0);
const isDialogVisible = ref(false); const isDialogVisible = ref(false);
const newTab = ref<{ name: string; type: ComponentKey }>({ name: '', type: 'httpServers' }); const newTab = ref<{ name: string; type: ComponentKey }>({ name: '', type: 'httpServers' });
const clientPanelData: Reactive<Array<ClientPanel>> = reactive([]); const clientPanelData: Reactive<Array<ClientPanel>> = reactive([]);
const getComponent = (type: ComponentKey) => { const getComponent = (type: ComponentKey) => {
return componentMap[type]; return componentMap[type];
}; };
const getOB11Config = async (): Promise<OneBotConfig | undefined> => { const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
const storedCredential = localStorage.getItem('auth'); const storedCredential = localStorage.getItem('auth');
if (!storedCredential) { if (!storedCredential) {
console.error('No stored credential found'); console.error('No stored credential found');
@@ -116,9 +123,9 @@
} }
const loginManager = new QQLoginManager(storedCredential); const loginManager = new QQLoginManager(storedCredential);
return await loginManager.GetOB11Config(); return await loginManager.GetOB11Config();
}; };
const setOB11Config = async (config: OneBotConfig): Promise<boolean> => { const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
const storedCredential = localStorage.getItem('auth'); const storedCredential = localStorage.getItem('auth');
if (!storedCredential) { if (!storedCredential) {
console.error('No stored credential found'); console.error('No stored credential found');
@@ -126,21 +133,21 @@
} }
const loginManager = new QQLoginManager(storedCredential); const loginManager = new QQLoginManager(storedCredential);
return await loginManager.SetOB11Config(config); 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 })); 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]) => { Object.entries(data).forEach(([key, configs]) => {
if (key in defaultConfigs) { if (key in defaultConfigs) {
addToPanel(configs as ConfigUnion[], key as ConfigKey); addToPanel(configs as ConfigUnion[], key as ConfigKey);
} }
}); });
}; };
const parsePanelData = (): NetworkConfig => { const parsePanelData = (): NetworkConfig => {
return { return {
websocketClients: clientPanelData websocketClients: clientPanelData
.filter((panel) => panel.key === 'websocketClients') .filter((panel) => panel.key === 'websocketClients')
@@ -155,9 +162,9 @@
.filter((panel) => panel.key === 'httpServers') .filter((panel) => panel.key === 'httpServers')
.map((panel) => panel.data as HttpServerConfig), .map((panel) => panel.data as HttpServerConfig),
}; };
}; };
const loadConfig = async () => { const loadConfig = async () => {
try { try {
const userConfig = await getOB11Config(); const userConfig = await getOB11Config();
if (!userConfig) return; if (!userConfig) return;
@@ -166,31 +173,31 @@
} catch (error) { } catch (error) {
console.error('Error loading config:', error); console.error('Error loading config:', error);
} }
}; };
// It's better to "saveConfig" instead of using deep watch // It's better to "saveConfig" instead of using deep watch
const saveConfig = async () => { const saveConfig = async () => {
const config = parsePanelData(); const config = parsePanelData();
const userConfig = await getOB11Config(); const userConfig = await getOB11Config();
if (!userConfig) return; if (!userConfig) return;
userConfig.network = config; userConfig.network = config;
const success = await setOB11Config(userConfig); const success = await setOB11Config(userConfig);
if (success) { if (success) {
MessagePlugin.success('配置保存成功'); await MessagePlugin.success('配置保存成功');
} else { } else {
MessagePlugin.error('配置保存失败'); await MessagePlugin.error('配置保存失败');
} }
}; };
const showAddTabDialog = () => { const showAddTabDialog = () => {
newTab.value = { name: '', type: 'httpServers' }; newTab.value = { name: '', type: 'httpServers' };
isDialogVisible.value = true; isDialogVisible.value = true;
}; };
const addTab = async () => { const addTab = async () => {
const { name, type } = newTab.value; const { name, type } = newTab.value;
if (clientPanelData.some(panel => panel.name === name)) { if (clientPanelData.some((panel) => panel.name === name)) {
MessagePlugin.error('选项卡名称已存在'); await MessagePlugin.error('选项卡名称已存在');
return; return;
} }
const defaultConfig = structuredClone(defaultConfigs[type]); const defaultConfig = structuredClone(defaultConfigs[type]);
@@ -199,46 +206,46 @@
isDialogVisible.value = false; isDialogVisible.value = false;
await nextTick(); await nextTick();
activeTab.value = clientPanelData.length - 1; 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); clientPanelData.splice(payload.index, 1);
activeTab.value = Math.max(0, activeTab.value - 1); activeTab.value = Math.max(0, activeTab.value - 1);
await saveConfig(); await saveConfig();
}; };
onMounted(() => { onMounted(() => {
loadConfig(); loadConfig();
}); });
</script> </script>
<style scoped> <style scoped>
.full-space { .full-space {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.full-tabs { .full-tabs {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.full-tab-panel { .full-tab-panel {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.button-container { .button-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 20px; margin-top: 20px;
} }
</style> </style>

9
napcat.webui/src/pages/network/HttpClientComponent.vue
View File

@@ -36,14 +36,17 @@ const props = defineProps<{
const messageFormatOptions = ref([ const messageFormatOptions = ref([
{ label: 'Array', value: 'array' }, { 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') { if (newValue !== 'array' && newValue !== 'string') {
props.config.messagePostFormat = 'array'; props.config.messagePostFormat = 'array';
} }
}); }
);
</script> </script>
<style scoped> <style scoped>

9
napcat.webui/src/pages/network/HttpServerComponent.vue
View File

@@ -42,14 +42,17 @@ const props = defineProps<{
const messageFormatOptions = ref([ const messageFormatOptions = ref([
{ label: 'Array', value: 'array' }, { 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') { if (newValue !== 'array' && newValue !== 'string') {
props.config.messagePostFormat = 'array'; props.config.messagePostFormat = 'array';
} }
}); }
);
</script> </script>
<style scoped> <style scoped>

9
napcat.webui/src/pages/network/WebsocketClientComponent.vue
View File

@@ -39,14 +39,17 @@ const props = defineProps<{
const messageFormatOptions = ref([ const messageFormatOptions = ref([
{ label: 'Array', value: 'array' }, { 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') { if (newValue !== 'array' && newValue !== 'string') {
props.config.messagePostFormat = 'array'; props.config.messagePostFormat = 'array';
} }
}); }
);
</script> </script>
<style scoped> <style scoped>

9
napcat.webui/src/pages/network/WebsocketServerComponent.vue
View File

@@ -45,14 +45,17 @@ const props = defineProps<{
const messageFormatOptions = ref([ const messageFormatOptions = ref([
{ label: 'Array', value: 'array' }, { 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') { if (newValue !== 'array' && newValue !== 'string') {
props.config.messagePostFormat = 'array'; props.config.messagePostFormat = 'array';
} }
}); }
);
</script> </script>
<style scoped> <style scoped>

13
napcat.webui/src/pages/new/NetWork.old.vue
View File

@@ -1,6 +1,13 @@
<template> <template>
<t-space class="full-space"> <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 <t-tab-panel
v-for="(config, idx) in clientPanelData" v-for="(config, idx) in clientPanelData"
:key="idx" :key="idx"
@@ -11,7 +18,7 @@
> >
<component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" /> <component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
<div class="button-container"> <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> </div>
</t-tab-panel> </t-tab-panel>
</t-tabs> </t-tabs>
@@ -183,7 +190,7 @@ const showAddTabDialog = () => {
const addTab = async () => { const addTab = async () => {
const { name, type } = newTab.value; const { name, type } = newTab.value;
if (clientPanelData.some(panel => panel.name === name)) { if (clientPanelData.some((panel) => panel.name === name)) {
MessagePlugin.error('选项卡名称已存在'); MessagePlugin.error('选项卡名称已存在');
return; return;
} }