完成机器人页面及相关功能
This commit is contained in:
parent
3624842e22
commit
1084399033
49
src/api/robot.ts
Normal file
49
src/api/robot.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { http } from "@/utils/http";
|
||||
import { BaseResponse } from "@/api/base";
|
||||
|
||||
/** 机器人信息 */
|
||||
export type RobotInfo = {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
wxid: string;
|
||||
account: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
mobile: string;
|
||||
currentDataPath: string;
|
||||
dataSavePath: string;
|
||||
dbKey: string;
|
||||
hookApi: string;
|
||||
remark: string;
|
||||
version: number;
|
||||
vncUrl: string;
|
||||
tag: string;
|
||||
/* 页面使用参数，后端不返回 */
|
||||
saveLoading: boolean;
|
||||
edit: boolean;
|
||||
};
|
||||
|
||||
/** 获取所有机器人 */
|
||||
export const getAllRobot = (data: any) => {
|
||||
return http.request<BaseResponse<Array<RobotInfo>>>(
|
||||
"get",
|
||||
"/admin/v1/robot",
|
||||
{ data }
|
||||
);
|
||||
};
|
||||
|
||||
/* 保存机器人 */
|
||||
export const saveRobot = (data: any) => {
|
||||
return http.request<BaseResponse<RobotInfo>>("post", "/admin/v1/robot", {
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除机器人信息 */
|
||||
export const deleteRobot = (id: string) => {
|
||||
return http.request<BaseResponse<RobotInfo>>(
|
||||
"delete",
|
||||
`/admin/v1/robot/${id}`
|
||||
);
|
||||
};
|
||||
BIN
src/assets/defaultWeChatAvatar.gif
Normal file
BIN
src/assets/defaultWeChatAvatar.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
@ -1,12 +1,368 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { getAllRobot, RobotInfo, saveRobot, deleteRobot } from "@/api/robot";
|
||||
import { message } from "@/utils/message";
|
||||
import defaultWeChatAvatar from "@/assets/defaultWeChatAvatar.gif";
|
||||
|
||||
defineOptions({
|
||||
name: "RobotList"
|
||||
});
|
||||
|
||||
// 是否在新增
|
||||
const showCreateDialog = ref(false);
|
||||
// 是否在展示远程桌面
|
||||
const showVncDialog = ref(false);
|
||||
// 页面是否加载中
|
||||
const dataLoading = ref(false);
|
||||
// 定义可使用的微信版本
|
||||
const versionList = ref([
|
||||
{ name: "v3.9.2.23", value: 39223 },
|
||||
{ name: "v3.9.5.81", value: 39581 },
|
||||
{ name: "v3.9.8.25", value: 39825 }
|
||||
]);
|
||||
// 列表数据
|
||||
const robotList = ref([] as RobotInfo[]);
|
||||
// 当前展示的远程桌面地址
|
||||
const vncUrl = ref("");
|
||||
|
||||
// 翻译微信版本
|
||||
const translateVersion = (value: number) => {
|
||||
return versionList.value.find(item => item.value === value)?.name;
|
||||
};
|
||||
|
||||
// 新增机器人参数
|
||||
const createRobotParam = reactive({
|
||||
id: "",
|
||||
hookApi: "",
|
||||
version: 39581,
|
||||
vncUrl: "",
|
||||
remark: "",
|
||||
tag: "",
|
||||
saveLoading: false
|
||||
});
|
||||
|
||||
// 重置新增参数
|
||||
const clearCreateParam = (done: () => void) => {
|
||||
createRobotParam.hookApi = "";
|
||||
createRobotParam.version = 39581;
|
||||
createRobotParam.vncUrl = "";
|
||||
createRobotParam.remark = "";
|
||||
createRobotParam.tag = "";
|
||||
done();
|
||||
};
|
||||
// 关闭远程桌面
|
||||
const closeVncIframe = (done: () => void) => {
|
||||
showVncDialog.value = false;
|
||||
vncUrl.value = "";
|
||||
done();
|
||||
};
|
||||
|
||||
// 打开远程桌面
|
||||
const showVncDialogHandle = (url: string) => {
|
||||
vncUrl.value = url;
|
||||
showVncDialog.value = true;
|
||||
};
|
||||
|
||||
// 获取机器人列表
|
||||
const getAllRobotHandle = async () => {
|
||||
// 设置为加载中
|
||||
dataLoading.value = true;
|
||||
// 调用接口，获取数据
|
||||
getAllRobot({ keyword: "", tag: "" })
|
||||
.then(res => {
|
||||
// 获取成功，设置数据
|
||||
robotList.value = res.data;
|
||||
})
|
||||
.catch(() => {
|
||||
message("获取机器人列表失败", { type: "error" });
|
||||
})
|
||||
.finally(() => {
|
||||
// 关闭加载动画
|
||||
dataLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 新增机器人
|
||||
const saveRobotHandle = async (item: any, isCreate?: boolean) => {
|
||||
// 设置为加载中
|
||||
item.saveLoading = true;
|
||||
// 拷贝
|
||||
const param = JSON.parse(JSON.stringify(item));
|
||||
// 处理hookApi和vnc地址
|
||||
if (param.hookApi !== "" && !param.hookApi.startsWith("http://")) {
|
||||
param.hookApi = `http://${item.hookApi}`;
|
||||
}
|
||||
if (param.vncUrl !== "" && !param.vncUrl.startsWith("http://")) {
|
||||
param.vncUrl = `http://${param.vncUrl}/vnc_lite.html`;
|
||||
}
|
||||
|
||||
// 调用接口，保存数据
|
||||
saveRobot(param)
|
||||
.then(() => {
|
||||
message("保存成功", { type: "success" });
|
||||
if (isCreate) {
|
||||
showCreateDialog.value = false;
|
||||
}
|
||||
// 保存成功，重新加载数据
|
||||
getAllRobotHandle();
|
||||
})
|
||||
.catch(e => {
|
||||
const response = e.response.data;
|
||||
message(
|
||||
response.message + (response.errMsg ? ": " + response.errMsg : ""),
|
||||
{ type: "error" }
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
// 关闭加载动画
|
||||
item.saveLoading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 删除机器人
|
||||
const deleteRobotHandle = (id: string) => {
|
||||
deleteRobot(id)
|
||||
.then(() => {
|
||||
message("删除成功", { type: "success" });
|
||||
getAllRobotHandle();
|
||||
})
|
||||
.catch(e => {
|
||||
const response = e.response.data;
|
||||
message(
|
||||
response.message + (response.errMsg ? ": " + response.errMsg : ""),
|
||||
{ type: "error" }
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取机器人信息
|
||||
getAllRobotHandle();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center items-center h-[640px]">
|
||||
<h1>机器人列表</h1>
|
||||
<div>
|
||||
<div style="margin: 20px">
|
||||
<el-button type="primary" @click="showCreateDialog = true"
|
||||
>新增机器人</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="flex h-[640px]">
|
||||
<div class="card-container">
|
||||
<el-card
|
||||
class="robot-card"
|
||||
shadow="hover"
|
||||
v-for="item in robotList"
|
||||
:key="item.id"
|
||||
v-loading="item.saveLoading"
|
||||
>
|
||||
<template #header>
|
||||
<div class="robot-header">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-avatar
|
||||
:size="50"
|
||||
:src="item.avatar ? item.avatar : defaultWeChatAvatar"
|
||||
/>
|
||||
<span style="margin-left: 10px">
|
||||
<p class="robot-name">{{ item.name }}</p>
|
||||
<p v-if="!item.edit" class="robot-remark">
|
||||
{{ item.remark }}
|
||||
</p>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="item.remark"
|
||||
style="width: 80%"
|
||||
size="small"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<el-button-group>
|
||||
<el-button
|
||||
link
|
||||
:type="item.edit ? 'primary' : 'warning'"
|
||||
@click="item.edit = !item.edit"
|
||||
>
|
||||
{{ item.edit ? "取消" : "编辑" }}
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
v-if="!item.edit"
|
||||
title="是否删除当前机器人？"
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
@confirm="deleteRobotHandle(item.id)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button link type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-button
|
||||
v-else
|
||||
link
|
||||
type="success"
|
||||
@click="saveRobotHandle(item)"
|
||||
>保存</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-descriptions :column="1" size="default">
|
||||
<el-descriptions-item label="微信Id">
|
||||
{{ item.wxid }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">
|
||||
{{ item.mobile }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="HOOK地址">
|
||||
{{ item.hookApi }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="VNC地址">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="showVncDialogHandle(item.vncUrl)"
|
||||
>
|
||||
{{ item.vncUrl }}
|
||||
</el-button>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="微信版本">
|
||||
{{ translateVersion(item.version) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="标签">
|
||||
<el-tag
|
||||
:key="t"
|
||||
v-show="item.tag != ''"
|
||||
v-for="t in item.tag.split(',')"
|
||||
type="success"
|
||||
>
|
||||
{{ t }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="showCreateDialog"
|
||||
title="新增机器人"
|
||||
width="40%"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="clearCreateParam"
|
||||
>
|
||||
<el-form :model="createRobotParam" label-width="100px">
|
||||
<el-form-item
|
||||
label="HOOK地址"
|
||||
prop="hookApi"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入HOOK地址', trigger: 'blur' }
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model="createRobotParam.hookApi"
|
||||
placeholder="请输入Hook接口地址，格式: 10.0.0.71:19088"
|
||||
>
|
||||
<template #prepend>http://</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="微信版本" prop="version">
|
||||
<el-select
|
||||
v-model="createRobotParam.version"
|
||||
placeholder="请选择微信版本"
|
||||
:rules="[
|
||||
{ required: true, message: '请选择微信版本', trigger: 'blur' }
|
||||
]"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in versionList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="VNC地址">
|
||||
<el-input
|
||||
v-model="createRobotParam.vncUrl"
|
||||
placeholder="请输入VNC页面地址，格式: 10.0.0.71:19087"
|
||||
>
|
||||
<template #prepend>http://</template>
|
||||
<template #append>/vnc_lite.html</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="createRobotParam.remark"
|
||||
placeholder="请输入备注"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
v-loading="createRobotParam.saveLoading"
|
||||
@click="saveRobotHandle(createRobotParam, true)"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="showVncDialog"
|
||||
width="1280px"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="closeVncIframe"
|
||||
center
|
||||
>
|
||||
<div style="margin: 0 auto">
|
||||
<iframe :src="vncUrl" class="vncIframe" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-container {
|
||||
margin: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
justify-content: flex-start; /* 改为 flex-start 以优先横向排列 */
|
||||
}
|
||||
|
||||
.robot-card {
|
||||
width: 24%;
|
||||
min-width: 380px;
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
.robot-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.robot-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.robot-remark {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.vncIframe {
|
||||
width: 1280px;
|
||||
height: 747px;
|
||||
transform-origin: left top;
|
||||
transform: scale(0.95, 0.95);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user