go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

🎨基本功能完结

Browse Source
This commit is contained in:
coward 2024-06-04 09:15:34 +08:00
parent d03ed3a584
commit 47b5064e57
3 changed files with 136 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/clients.ts
View File

@ -27,3 +27,8 @@ export const saveClient = (data?: object) => {
export const deleteClient = (id: string) => {
return http.request<any>("delete", baseUri("/client/" + id));
};
// 获取客户端链接状态列表
export const getClientConnects = () => {
return http.request<any>("get", baseUri("/client/status"));
};

121
src/views/dashboard/index.vue
View File

@ -2,6 +2,7 @@
import { useServerStoreHook } from "@/store/modules/server";
import { getSystemLog } from "@/api/dashboard";
import { reactive } from "vue";
import { getClientConnects } from "@/api/clients";
defineOptions({
name: "Dashboard"
@ -9,7 +10,7 @@ defineOptions({
const systemLogForm = reactive({
current: 1,
size: 10
size: 5
});
const systemLogTableData = reactive({
@ -17,6 +18,10 @@ const systemLogTableData = reactive({
data: []
});
const clientConnectsData = reactive({
data: []
});
// 请求操作日志记录
const getSystemLogHandler = () => {
getSystemLog(systemLogForm).then(res => {
@ -34,12 +39,21 @@ const pageChange = (page: number, size: number) => {
getSystemLogHandler();
};
const getClientsStatus = () => {
getClientConnects().then(res => {
if (res.code === 200) {
clientConnectsData.data = res.data;
}
});
};
const initServerInfo = () => {
useServerStoreHook().getServerApi();
};
initServerInfo();
getSystemLogHandler();
getClientsStatus();
</script>
<template>
@ -50,7 +64,12 @@ getSystemLogHandler();
<span>操作日志</span>
</div>
</template>
<el-table :data="systemLogTableData.data" align="center" :border="true" style="width: 100%">
<el-table
:data="systemLogTableData.data"
align="center"
:border="true"
style="width: 100%"
>
<el-table-column
prop="username"
label="用户名称"
@ -74,10 +93,27 @@ getSystemLogHandler();
align="center"
>
<template #default="scope">
<el-tag v-if="scope.row.method === 'POST'" effect="dark">{{ scope.row.method }}</el-tag>
<el-tag v-if="scope.row.method === 'PUT'" type="warning" effect="dark">{{ scope.row.method }}</el-tag>
<el-tag v-if="scope.row.method === 'DELETE'" type="danger" effect="dark">{{ scope.row.method }}</el-tag>
<el-tag v-if="scope.row.method === 'GET'" type="info" effect="dark">{{ scope.row.method }}</el-tag>
<el-tag v-if="scope.row.method === 'POST'" effect="dark">{{
scope.row.method
}}</el-tag>
<el-tag
v-if="scope.row.method === 'PUT'"
type="warning"
effect="dark"
>{{ scope.row.method }}</el-tag
>
<el-tag
v-if="scope.row.method === 'DELETE'"
type="danger"
effect="dark"
>{{ scope.row.method }}</el-tag
>
<el-tag
v-if="scope.row.method === 'GET'"
type="info"
effect="dark"
>{{ scope.row.method }}</el-tag
>
</template>
</el-table-column>
<el-table-column
@ -99,8 +135,15 @@ getSystemLogHandler();
align="center"
>
<template #default="scope">
<el-tag v-if="scope.row.statusCode === 200" type="success" effect="dark">{{ scope.row.statusCode }}</el-tag>
<el-tag v-else type="danger" effect="dark">{{ scope.row.statusCode }}</el-tag>
<el-tag
v-if="scope.row.statusCode === 200"
type="success"
effect="dark"
>{{ scope.row.statusCode }}</el-tag
>
<el-tag v-else type="danger" effect="dark">{{
scope.row.statusCode
}}</el-tag>
</template>
</el-table-column>
<el-table-column
@ -121,5 +164,67 @@ getSystemLogHandler();
/>
</template>
</el-card>
<el-card style="max-width: 100%; margin-top: 10px">
<template #header>
<div class="card-header">
<span>客户端链接状态</span>
</div>
</template>
<el-table
:data="clientConnectsData.data"
align="center"
:border="true"
style="width: 100%"
>
<el-table-column
prop="name"
label="客户端名称"
min-width="80"
align="center"
/>
<el-table-column
prop="email"
label="联系邮箱"
min-width="80"
align="center"
/>
<el-table-column
prop="ipAllocation"
label="客户端IP"
min-width="80"
align="center"
/>
<el-table-column
prop="endpoint"
label="端点"
min-width="80"
align="center"
/>
<el-table-column
prop="received"
label="接受流量"
min-width="80"
align="center"
/>
<el-table-column
prop="transmitted"
label="传输流量"
min-width="80"
align="center"
/>
<el-table-column
prop="isOnline"
label="是否在线"
min-width="80"
align="center"
/>
<el-table-column
prop="lastHandShake"
label="最后握手时间"
min-width="80"
align="center"
/>
</el-table>
</el-card>
</div>
</template>

18
src/views/server/server.vue
View File

@ -144,10 +144,10 @@ getGlobalSettingApi();
/>
</el-form-item>
<el-form-item prop="privateKey" label="私钥">
<el-input v-model="serverForm.privateKey" disabled />
<el-input v-model="serverForm.privateKey" />
</el-form-item>
<el-form-item prop="publicKey" label="公钥">
<el-input v-model="serverForm.publicKey" disabled />
<el-input v-model="serverForm.publicKey" />
</el-form-item>
<el-form-item prop="postUpScript" label="postUpScript">
<el-input v-model="serverForm.postUpScript" />
@ -177,7 +177,13 @@ getGlobalSettingApi();
<el-form ref="configFormRef" :model="configForm" label-position="top">
<el-form-item prop="endpointAddress" label="endpointAddress">
<el-input v-model="configForm.endpointAddress" />
<el-button size="small" type="warning" class="getIp" @click="getPublicIPApi">获取IP</el-button>
<el-button
size="small"
type="warning"
class="getIp"
@click="getPublicIPApi"
>获取IP</el-button
>
</el-form-item>
<el-form-item prop="dnsServer" label="dnsServer">
<el-select
@ -231,20 +237,24 @@ getGlobalSettingApi();
margin-bottom: 30px;
margin-left: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
border-radius: 4px;
}
.options-class {
display: none;
}
.getIp {
margin-top: 5px;
}