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-06 16:54:05 +08:00
parent 47b5064e57
commit 85553f4bef
10 changed files with 186 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env
View File

@ -4,4 +4,3 @@ VITE_PORT = 8848
# 是否隐藏首页 隐藏 true 不隐藏 false （勿删除，VITE_HIDE_HOME只需在.env文件配置）
VITE_HIDE_HOME = false
VITE_PUBLIC_PATH = //

2
.env.development
View File

@ -2,7 +2,7 @@
VITE_PORT = 8848
# 开发环境读取配置文件路径
VITE_PUBLIC_PATH = //
VITE_PUBLIC_PATH = /
# 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
VITE_ROUTER_HISTORY = "hash"

6
app/static.go
View File

@ -1,6 +0,0 @@
package web
import "embed"
//go:embed index.html logo.svg favicon.ico platform-config.json public/platform-config.json static assets
var Static embed.FS

15
src/api/clients.ts
View File

@ -13,6 +13,16 @@ export const downloadClient = (id: string) => {
});
};
// 客户端IP生成
export const generateClientIP = (data?: object) => {
return http.request<any>("post", baseUri("/client/assignIP"), { data });
};
// 生成客户端密钥对
export const generateClientKeys = () => {
return http.request<any>("post", baseUri("/client/generate-keys"));
};
// 获取客户端配置二维码
export const clientQrCode = (id: string) => {
return http.request<any>("post", baseUri("/client/generate-qrcode/" + id));
@ -32,3 +42,8 @@ export const deleteClient = (id: string) => {
export const getClientConnects = () => {
return http.request<any>("get", baseUri("/client/status"));
};
// 强制下线客户端
export const offlineClient = (id: string) => {
return http.request<any>("post", baseUri("/client/offline/" + id));
};

12
src/api/server.ts
View File

@ -25,3 +25,15 @@ export const updateGlobalSetting = (data?: object) => {
export const getPublicIP = () => {
return http.request<any>("get", baseUri("/setting/public-ip"));
};
// 获取服务端重启规则
export const getServerRestartRule = () => {
return http.request<any>("get", baseUri("/setting/restart-rule"));
};
// 重启服务端
export const restartServer = (data?: object) => {
return http.request<any>("post", baseUri("/server/control-server"), {
data
});
};

42
src/layout/components/lay-navbar/index.vue
View File

@ -24,6 +24,9 @@ import changePwdForms, {
} from "./component/change-password.vue";
import { useRouter } from "vue-router";
import useGetGlobalProperties from "@/hooks/useGetGlobalProperties";
import { Refresh } from "@element-plus/icons-vue";
import { getServerRestartRule, restartServer } from "@/api/server";
import { message } from "@/utils/message";
const {
layout,
@ -121,6 +124,29 @@ const openChangePasswordDialog = () => {
}
});
};
let rule = ref(false);
// 判断是否展示重载配置按钮
const getRule = () => {
getServerRestartRule().then(res => {
if (res.code === 200) {
rule.value = res.data.rule === "hand";
}
});
return rule;
};
// 重启服务端
const restartServerCommand = () => {
restartServer({
status: "RESTART"
}).then(res => {
if (res.code === 200) {
message("应用配置成功", { type: "success" });
}
});
};
getRule();
</script>
<template>
@ -140,13 +166,21 @@ const openChangePasswordDialog = () => {
<LayNavMix v-if="layout === 'mix'" />
<div v-if="layout === 'vertical'" class="vertical-header-right">
<!-- 菜单搜索 -->
<el-button
v-if="rule"
type="danger"
:icon="Refresh"
style="margin-right: 150px"
@click="restartServerCommand()"
>重载配置</el-button
>
<!-- 菜单搜索-->
<!-- <LaySearch id="header-search" />-->
<!-- 全屏 -->
<!-- 全屏-->
<!-- <LaySidebarFullScreen id="full-screen" />-->
<!-- 消息通知 -->
<!-- 消息通知-->
<!-- <LayNotice id="header-notice" />-->
<!-- 退出登录 -->
<!-- 退出登录-->
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover select-none">
<img :src="userAvatar" :style="avatarsStyle" />

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

@ -2,7 +2,9 @@
import { useServerStoreHook } from "@/store/modules/server";
import { getSystemLog } from "@/api/dashboard";
import { reactive } from "vue";
import { getClientConnects } from "@/api/clients";
import {getClientConnects, offlineClient} from "@/api/clients";
import {Refresh} from "@element-plus/icons-vue";
import {message} from "@/utils/message";
defineOptions({
name: "Dashboard"
@ -39,6 +41,7 @@ const pageChange = (page: number, size: number) => {
getSystemLogHandler();
};
// 获取客户端链接状态列表
const getClientsStatus = () => {
getClientConnects().then(res => {
if (res.code === 200) {
@ -47,10 +50,31 @@ const getClientsStatus = () => {
});
};
// 刷新列表
const refreshClick = (eventStr: string) => {
switch (eventStr) {
case "systemLog":
getSystemLogHandler();
break;
case "clientStatus":
getClientsStatus();
break;
}
};
const initServerInfo = () => {
useServerStoreHook().getServerApi();
};
// 强制下线客户端
const offlineClientHandler = (clientID: string) => {
offlineClient().then(res => {
if (res.code === 200) {
message("下线客户端成功", { type: "success" });
}
});
};
initServerInfo();
getSystemLogHandler();
getClientsStatus();
@ -62,6 +86,7 @@ getClientsStatus();
<template #header>
<div class="card-header">
<span>操作日志</span>
<el-button style="float: right" type="primary" :icon="Refresh" @click="refreshClick('systemLog')">刷新</el-button>
</div>
</template>
<el-table
@ -168,6 +193,7 @@ getClientsStatus();
<template #header>
<div class="card-header">
<span>客户端链接状态</span>
<el-button style="float: right" type="primary" :icon="Refresh" @click="refreshClick('clientStatus')">刷新</el-button>
</div>
</template>
<el-table
@ -217,13 +243,32 @@ getClientsStatus();
label="是否在线"
min-width="80"
align="center"
/>
>
<template #default="scope">
<el-tag v-if="scope.row.isOnline" type="success">在线</el-tag>
<el-tag v-else type="warning">离线</el-tag>
</template>
</el-table-column>
<el-table-column
prop="lastHandShake"
label="最后握手时间"
min-width="80"
align="center"
/>
<el-table-column
label="操作"
min-width="80"
align="center"
>
<template #default="scope">
<el-button
v-if="scope.row.isOnline"
type="primary"
@click="offlineClientHandler(scope.row.id)"
>下线</el-button
>
</template>
</el-table-column>
</el-table>
</el-card>
</div>

23
src/views/server/clients.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import {
deleteClient,
downloadClient,
downloadClient, generateClientIP,
getClients,
saveClient
} from "@/api/clients";
@ -139,6 +139,17 @@ const openQrCodeDialog = (clientName: string, id: string) => {
// 打开新增客户端弹窗
const openAddClientDialog = () => {
let clientIP = ref([]);
let serverIP = ref([]);
// 先 生成客户端IP
generateClientIP({
rule: "AUTO"
}).then(res => {
if (res.code === 200) {
clientIP.value = res.data.clientIP;
serverIP.value = res.data.serverIP;
}
});
const serverInfo = storageLocal().getItem("server-info");
addDialog({
width: "40%",
@ -151,13 +162,17 @@ const openAddClientDialog = () => {
name: "",
email: "",
subnetRange: "",
ipAllocation: "",
allowedIPS: "",
ipAllocation: clientIP,
allowedIPS: serverIP,
extraAllowedIPS: "",
endpoint: "",
useServerDNS: 0,
enableAfterCreation: 0,
keys: null,
keys: {
privateKey: "",
publicKey: "",
presharedKey: ""
},
enabled: 1
}
},

37
src/views/server/component/detail.vue
View File

@ -3,7 +3,8 @@ import { ref } from "vue";
import { FormInstance } from "element-plus";
import { storageLocal } from "@pureadmin/utils";
import { userKey } from "@/utils/auth";
import {clientFormRules} from "@/views/server/component/rules";
import { clientFormRules } from "@/views/server/component/rules";
import {generateClientKeys} from "@/api/clients";
// 声明 props 类型
export interface DetailFormProps {
@ -64,6 +65,14 @@ function getDetailFormRef() {
return detailFormRef.value;
}
function generateClientKeysApi() {
generateClientKeys().then(res => {
if (res.code === 200) {
detailForm.value.keys = res.data;
}
});
}
defineExpose({ getDetailFormRef });
</script>
@ -132,6 +141,32 @@ defineExpose({ getDetailFormRef });
<el-form-item prop="endpoint" label="链接端点">
<el-input v-model="detailForm.endpoint" />
</el-form-item>
<el-form-item prop="privateKey" label="私钥">
<el-input
v-if="detailForm.id === ''"
v-model="detailForm.keys.privateKey"
/>
<el-input v-else disabled v-model="detailForm.keys.privateKey" />
</el-form-item>
<el-form-item prop="publicKey" label="公钥">
<el-input
v-if="detailForm.id === ''"
v-model="detailForm.keys.publicKey"
/>
<el-input v-else disabled v-model="detailForm.keys.publicKey" />
</el-form-item>
<el-form-item prop="presharedKey" label="共享密钥">
<el-input
v-if="detailForm.id === ''"
v-model="detailForm.keys.presharedKey"
/>
<el-input v-else disabled v-model="detailForm.keys.presharedKey" />
</el-form-item>
<el-form-item v-if="detailForm.id === ''">
<el-button type="primary" size="small" @click="generateClientKeysApi()"
>生成密钥对</el-button
>
</el-form-item>
<el-form-item prop="useServerDNS" label="是否使用服务端DNS">
<el-radio-group v-model="detailForm.useServerDNS">
<el-radio :value="1">是</el-radio>

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

@ -5,6 +5,7 @@ import { useServerStoreHook } from "@/store/modules/server";
import { serverFormRules } from "@/views/server/utils/rules";
import { useGlobalSettingStoreHook } from "@/store/modules/globalSetting";
import { getPublicIP } from "@/api/server";
import { useUserStoreHook } from "@/store/modules/user";
defineOptions({
// name 作为一种规范最好必须写上并且和路由的name保持一致
@ -113,6 +114,10 @@ const getPublicIPApi = () => {
});
};
const isEditServerKeys = () => {
return useUserStoreHook().isAdmin && useUserStoreHook().account === "admin";
};
getServerApi();
getGlobalSettingApi();
</script>
@ -144,10 +149,18 @@ getGlobalSettingApi();
/>
</el-form-item>
<el-form-item prop="privateKey" label="私钥">
<el-input v-model="serverForm.privateKey" />
<el-input
v-if="isEditServerKeys()"
v-model="serverForm.privateKey"
/>
<el-input v-else v-model="serverForm.privateKey" disabled />
</el-form-item>
<el-form-item prop="publicKey" label="公钥">
<el-input v-model="serverForm.publicKey" />
<el-input
v-if="isEditServerKeys()"
v-model="serverForm.publicKey"
/>
<el-input v-else v-model="serverForm.publicKey" disabled />
</el-form-item>
<el-form-item prop="postUpScript" label="postUpScript">
<el-input v-model="serverForm.postUpScript" />