mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-02-26 08:14:27 +08:00
style:样式切换
This commit is contained in:
lqins
@@ -9,8 +9,8 @@
|
||||
<template #default="props">
|
||||
<div>
|
||||
<el-table :data="props.row.context" :border="childBorder">
|
||||
<el-table-column label="对话应用" prop="role" width="120"/>
|
||||
<el-table-column label="对话内容" prop="content"/>
|
||||
<el-table-column label="对话应用" prop="role" width="120" />
|
||||
<el-table-column label="对话内容" prop="content" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -23,24 +23,39 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="应用类型" prop="type_name"/>
|
||||
<el-table-column label="应用标识" prop="key"/>
|
||||
<el-table-column label="绑定模型" prop="model_name"/>
|
||||
<el-table-column label="应用类型" prop="type_name" />
|
||||
<el-table-column label="应用标识" prop="key" />
|
||||
<el-table-column label="绑定模型" prop="model_name" />
|
||||
<el-table-column label="启用状态">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row['enable']" @change="roleSet('enable',scope.row)"/>
|
||||
<el-switch
|
||||
v-model="scope.row['enable']"
|
||||
@change="roleSet('enable', scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="应用图标" prop="icon">
|
||||
<template #default="scope">
|
||||
<el-image :src="scope.row.icon" style="width: 45px; height: 45px; border-radius: 50%"/>
|
||||
<el-image
|
||||
:src="scope.row.icon"
|
||||
style="width: 45px; height: 45px; border-radius: 50%"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="打招呼信息" prop="hello_msg"/>
|
||||
<el-table-column label="打招呼信息" prop="hello_msg" />
|
||||
<el-table-column label="操作" width="150">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" @click="rowEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定要删除当前应用吗?" @confirm="removeRole(scope.row)" :width="200">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="rowEdit(scope.$index, scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
title="确定要删除当前应用吗?"
|
||||
@confirm="removeRole(scope.row)"
|
||||
:width="200"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button size="small" type="danger">删除</el-button>
|
||||
</template>
|
||||
@@ -51,48 +66,48 @@
|
||||
</el-row>
|
||||
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:title="optTitle"
|
||||
:close-on-click-modal="false"
|
||||
width="50%"
|
||||
v-model="showDialog"
|
||||
:title="optTitle"
|
||||
:close-on-click-modal="false"
|
||||
width="50%"
|
||||
>
|
||||
<el-form :model="role" label-width="120px" ref="formRef" label-position="left" :rules="rules">
|
||||
<el-form
|
||||
:model="role"
|
||||
label-width="120px"
|
||||
ref="formRef"
|
||||
label-position="left"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item label="应用名称：" prop="name">
|
||||
<el-input
|
||||
v-model="role.name"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<el-input v-model="role.name" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="应用分类：" prop="tid">
|
||||
<el-select
|
||||
v-model="role.tid"
|
||||
filterable
|
||||
placeholder="请选择分类"
|
||||
clearable
|
||||
v-model="role.tid"
|
||||
filterable
|
||||
placeholder="请选择分类"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in appTypes"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in appTypes"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="应用标志：" prop="key">
|
||||
<el-input
|
||||
v-model="role.key"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<el-input v-model="role.key" autocomplete="off" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="应用图标：" prop="icon">
|
||||
<el-input v-model="role.icon">
|
||||
<template #append>
|
||||
<el-upload
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="uploadImg"
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
上传
|
||||
</el-upload>
|
||||
@@ -102,25 +117,22 @@
|
||||
|
||||
<el-form-item label="绑定模型：" prop="model_id">
|
||||
<el-select
|
||||
v-model="role.model_id"
|
||||
filterable
|
||||
placeholder="请选择模型"
|
||||
clearable
|
||||
v-model="role.model_id"
|
||||
filterable
|
||||
placeholder="请选择模型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in models"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in models"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="打招呼信息：" prop="hello_msg">
|
||||
<el-input
|
||||
v-model="role.hello_msg"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<el-input v-model="role.hello_msg" autocomplete="off" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上下文信息：" prop="context">
|
||||
@@ -130,10 +142,10 @@
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.role" placeholder="Role">
|
||||
<el-option
|
||||
v-for="value in messageRoles"
|
||||
:key="value"
|
||||
:label="value"
|
||||
:value="value"
|
||||
v-for="value in messageRoles"
|
||||
:key="value"
|
||||
:label="value"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
@@ -143,12 +155,16 @@
|
||||
<div class="context-msg-key">
|
||||
<span>对话内容</span>
|
||||
<span class="fr">
|
||||
<el-button type="primary" @click="addContext" size="small">
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
增加一行
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="addContext"
|
||||
size="small"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
增加一行
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -156,35 +172,58 @@
|
||||
<template #default="scope">
|
||||
<div class="context-msg-content">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="scope.row.content"
|
||||
autocomplete="off"
|
||||
v-loading="isGenerating"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="scope.row.content"
|
||||
autocomplete="off"
|
||||
v-loading="isGenerating"
|
||||
/>
|
||||
<span class="remove-item">
|
||||
<el-tooltip effect="dark" content="删除当前行" placement="right">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
content="删除当前行"
|
||||
placement="right"
|
||||
>
|
||||
<el-button circle type="danger" size="small">
|
||||
<el-icon @click="removeContext(scope.$index)"><Delete /></el-icon>
|
||||
<el-icon @click="removeContext(scope.$index)"
|
||||
><Delete
|
||||
/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-popover placement="right" :width="400" trigger="click">
|
||||
<el-popover
|
||||
placement="right"
|
||||
:width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="primary" circle size="small" class="icon-btn">
|
||||
<el-button
|
||||
type="primary"
|
||||
circle
|
||||
size="small"
|
||||
class="icon-btn"
|
||||
>
|
||||
<i class="iconfont icon-linggan"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="metaPrompt"
|
||||
autocomplete="off"
|
||||
placeholder="请您输入要 AI实现的目标，任务或者需要AI扮演的角色？"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="metaPrompt"
|
||||
autocomplete="off"
|
||||
placeholder="请您输入要 AI实现的目标，任务或者需要AI扮演的角色？"
|
||||
/>
|
||||
<el-row class="text-line">
|
||||
<el-text class="mx-1" type="info" size="small">使用 AI 生成 System 预设指令</el-text>
|
||||
<el-button class="generate-btn" size="small" @click="generatePrompt(scope.row)" color="#5865f2" :disabled="isGenerating">
|
||||
<el-text type="info" size="small"
|
||||
>使用 AI 生成 System 预设指令</el-text
|
||||
>
|
||||
<el-button
|
||||
class="generate-btn"
|
||||
size="small"
|
||||
@click="generatePrompt(scope.row)"
|
||||
color="#5865f2"
|
||||
:disabled="isGenerating"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo"></i>
|
||||
<span>立即生成</span>
|
||||
</el-button>
|
||||
@@ -199,175 +238,195 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用状态">
|
||||
<el-switch v-model="role.enable"/>
|
||||
<el-switch v-model="role.enable" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
</span>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {Delete, Plus} from "@element-plus/icons-vue";
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {copyObj, removeArrayItem} from "@/utils/libs";
|
||||
import {Sortable} from "sortablejs"
|
||||
import { Delete, Plus } from "@element-plus/icons-vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { copyObj, removeArrayItem } from "@/utils/libs";
|
||||
import { Sortable } from "sortablejs";
|
||||
import Compressor from "compressorjs";
|
||||
import {showMessageError} from "@/utils/dialog";
|
||||
import { showMessageError } from "@/utils/dialog";
|
||||
|
||||
const showDialog = ref(false)
|
||||
const parentBorder = ref(true)
|
||||
const childBorder = ref(true)
|
||||
const tableData = ref([])
|
||||
const sortedTableData = ref([])
|
||||
const role = ref({context: []})
|
||||
const formRef = ref(null)
|
||||
const optTitle = ref("")
|
||||
const loading = ref(true)
|
||||
const showDialog = ref(false);
|
||||
const parentBorder = ref(true);
|
||||
const childBorder = ref(true);
|
||||
const tableData = ref([]);
|
||||
const sortedTableData = ref([]);
|
||||
const role = ref({ context: [] });
|
||||
const formRef = ref(null);
|
||||
const optTitle = ref("");
|
||||
const loading = ref(true);
|
||||
|
||||
const rules = reactive({
|
||||
name: [{required: true, message: '请输入用户名', trigger: 'blur',}],
|
||||
key: [{required: true, message: '请输入应用标识', trigger: 'blur',}],
|
||||
icon: [{required: true, message: '请输入应用图标', trigger: 'blur',}],
|
||||
name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
||||
key: [{ required: true, message: "请输入应用标识", trigger: "blur" }],
|
||||
icon: [{ required: true, message: "请输入应用图标", trigger: "blur" }],
|
||||
sort: [
|
||||
{required: true, message: '请输入排序数字', trigger: 'blur'},
|
||||
{type: 'number', message: '请输入有效数字'},
|
||||
{ required: true, message: "请输入排序数字", trigger: "blur" },
|
||||
{ type: "number", message: "请输入有效数字" }
|
||||
],
|
||||
hello_msg: [{required: true, message: '请输入打招呼信息', trigger: 'change',}]
|
||||
})
|
||||
hello_msg: [
|
||||
{ required: true, message: "请输入打招呼信息", trigger: "change" }
|
||||
]
|
||||
});
|
||||
|
||||
const appTypes = ref([])
|
||||
const models = ref([])
|
||||
const messageRoles = ref(["system", "user", "assistant"])
|
||||
const appTypes = ref([]);
|
||||
const models = ref([]);
|
||||
const messageRoles = ref(["system", "user", "assistant"]);
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchData();
|
||||
|
||||
// get chat models
|
||||
httpGet('/api/admin/model/list?enable=1').then((res) => {
|
||||
models.value = res.data
|
||||
}).catch(() => {
|
||||
ElMessage.error("获取AI模型数据失败");
|
||||
})
|
||||
httpGet("/api/admin/model/list?enable=1")
|
||||
.then((res) => {
|
||||
models.value = res.data;
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("获取AI模型数据失败");
|
||||
});
|
||||
|
||||
// get app type
|
||||
httpGet('/api/admin/app/type/list?enable=1').then((res) => {
|
||||
appTypes.value = res.data
|
||||
}).catch(() => {
|
||||
ElMessage.error("获取应用分类数据失败");
|
||||
})
|
||||
|
||||
})
|
||||
httpGet("/api/admin/app/type/list?enable=1")
|
||||
.then((res) => {
|
||||
appTypes.value = res.data;
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("获取应用分类数据失败");
|
||||
});
|
||||
});
|
||||
|
||||
const fetchData = () => {
|
||||
// 获取应用列表
|
||||
httpGet('/api/admin/role/list').then((res) => {
|
||||
// 初始化数据
|
||||
// const arr = res.data;
|
||||
// for (let i = 0; i < arr.length; i++) {
|
||||
// if(arr[i].model_id == 0){
|
||||
// arr[i].model_id = ''
|
||||
// }
|
||||
// }
|
||||
tableData.value = res.data
|
||||
sortedTableData.value = copyObj(tableData.value)
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
ElMessage.error("获取聊天应用失败");
|
||||
})
|
||||
httpGet("/api/admin/role/list")
|
||||
.then((res) => {
|
||||
// 初始化数据
|
||||
// const arr = res.data;
|
||||
// for (let i = 0; i < arr.length; i++) {
|
||||
// if(arr[i].model_id == 0){
|
||||
// arr[i].model_id = ''
|
||||
// }
|
||||
// }
|
||||
tableData.value = res.data;
|
||||
sortedTableData.value = copyObj(tableData.value);
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("获取聊天应用失败");
|
||||
});
|
||||
|
||||
const drawBodyWrapper = document.querySelector('.el-table__body tbody')
|
||||
const drawBodyWrapper = document.querySelector(".el-table__body tbody");
|
||||
// 初始化拖动排序插件
|
||||
Sortable.create(drawBodyWrapper, {
|
||||
sort: true,
|
||||
animation: 500,
|
||||
onEnd({newIndex, oldIndex, from}) {
|
||||
onEnd({ newIndex, oldIndex, from }) {
|
||||
if (oldIndex === newIndex) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
const sortedData = Array.from(from.children).map(row => row.querySelector('.sort').getAttribute('data-id'));
|
||||
const ids = []
|
||||
const sorts = []
|
||||
const sortedData = Array.from(from.children).map((row) =>
|
||||
row.querySelector(".sort").getAttribute("data-id")
|
||||
);
|
||||
const ids = [];
|
||||
const sorts = [];
|
||||
sortedData.forEach((id, index) => {
|
||||
ids.push(parseInt(id))
|
||||
sorts.push(index+1)
|
||||
tableData.value[index].sort_num = index + 1
|
||||
})
|
||||
ids.push(parseInt(id));
|
||||
sorts.push(index + 1);
|
||||
tableData.value[index].sort_num = index + 1;
|
||||
});
|
||||
|
||||
httpPost("/api/admin/role/sort", {ids: ids, sorts: sorts}).catch(e => {
|
||||
ElMessage.error("排序失败：" + e.message)
|
||||
})
|
||||
httpPost("/api/admin/role/sort", { ids: ids, sorts: sorts }).catch(
|
||||
(e) => {
|
||||
ElMessage.error("排序失败：" + e.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const roleSet = (filed, row) => {
|
||||
httpPost('/api/admin/role/set', {id: row.id, filed: filed, value: row[filed]}).then(() => {
|
||||
ElMessage.success("操作成功！")
|
||||
}).catch(e => {
|
||||
ElMessage.error("操作失败：" + e.message)
|
||||
httpPost("/api/admin/role/set", {
|
||||
id: row.id,
|
||||
filed: filed,
|
||||
value: row[filed]
|
||||
})
|
||||
}
|
||||
.then(() => {
|
||||
ElMessage.success("操作成功！");
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("操作失败：" + e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const curIndex = ref(0)
|
||||
const curIndex = ref(0);
|
||||
const rowEdit = function (index, row) {
|
||||
optTitle.value = "修改应用"
|
||||
curIndex.value = index
|
||||
role.value = copyObj(row)
|
||||
showDialog.value = true
|
||||
}
|
||||
optTitle.value = "修改应用";
|
||||
curIndex.value = index;
|
||||
role.value = copyObj(row);
|
||||
showDialog.value = true;
|
||||
};
|
||||
|
||||
const addRole = function () {
|
||||
optTitle.value = "添加新应用"
|
||||
role.value = {context: []}
|
||||
showDialog.value = true
|
||||
}
|
||||
optTitle.value = "添加新应用";
|
||||
role.value = { context: [] };
|
||||
showDialog.value = true;
|
||||
};
|
||||
|
||||
const save = function () {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
showDialog.value = false
|
||||
httpPost('/api/admin/role/save', role.value).then(() => {
|
||||
ElMessage.success('操作成功')
|
||||
fetchData()
|
||||
}).catch((e) => {
|
||||
ElMessage.error('操作失败，' + e.message)
|
||||
})
|
||||
showDialog.value = false;
|
||||
httpPost("/api/admin/role/save", role.value)
|
||||
.then(() => {
|
||||
ElMessage.success("操作成功");
|
||||
fetchData();
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("操作失败，" + e.message);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const removeRole = function (row) {
|
||||
httpGet('/api/admin/role/remove?id=' + row.id).then(() => {
|
||||
ElMessage.success("删除成功！")
|
||||
tableData.value = removeArrayItem(tableData.value, row, (v1, v2) => {
|
||||
return v1.id === v2.id
|
||||
httpGet("/api/admin/role/remove?id=" + row.id)
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功！");
|
||||
tableData.value = removeArrayItem(tableData.value, row, (v1, v2) => {
|
||||
return v1.id === v2.id;
|
||||
});
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage.error("删除失败！")
|
||||
})
|
||||
}
|
||||
.catch(() => {
|
||||
ElMessage.error("删除失败！");
|
||||
});
|
||||
};
|
||||
|
||||
const addContext = function () {
|
||||
if (!role.value.context) {
|
||||
role.value.context = []
|
||||
role.value.context = [];
|
||||
}
|
||||
role.value.context.push({role: '', content: ''})
|
||||
}
|
||||
role.value.context.push({ role: "", content: "" });
|
||||
};
|
||||
|
||||
const removeContext = function (index) {
|
||||
role.value.context.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 图片上传
|
||||
const uploadImg = (file) => {
|
||||
@@ -376,36 +435,40 @@ const uploadImg = (file) => {
|
||||
quality: 0.6,
|
||||
success(result) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', result, result.name);
|
||||
formData.append("file", result, result.name);
|
||||
// 执行上传操作
|
||||
httpPost('/api/admin/upload', formData).then((res) => {
|
||||
role.value.icon = res.data.url
|
||||
ElMessage.success('上传成功')
|
||||
}).catch((e) => {
|
||||
ElMessage.error('上传失败:' + e.message)
|
||||
})
|
||||
httpPost("/api/admin/upload", formData)
|
||||
.then((res) => {
|
||||
role.value.icon = res.data.url;
|
||||
ElMessage.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("上传失败:" + e.message);
|
||||
});
|
||||
},
|
||||
error(e) {
|
||||
ElMessage.error('上传失败:' + e.message)
|
||||
},
|
||||
ElMessage.error("上传失败:" + e.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isGenerating = ref(false)
|
||||
const metaPrompt = ref("")
|
||||
const isGenerating = ref(false);
|
||||
const metaPrompt = ref("");
|
||||
const generatePrompt = (row) => {
|
||||
if (metaPrompt.value === "") {
|
||||
return showMessageError("请输入元提示词")
|
||||
return showMessageError("请输入元提示词");
|
||||
}
|
||||
isGenerating.value = true
|
||||
httpPost("/api/prompt/meta", {prompt: metaPrompt.value}).then(res => {
|
||||
row.content = res.data
|
||||
isGenerating.value = false
|
||||
}).catch(e => {
|
||||
showMessageError("生成失败："+e.message)
|
||||
isGenerating.value = false
|
||||
})
|
||||
}
|
||||
isGenerating.value = true;
|
||||
httpPost("/api/prompt/meta", { prompt: metaPrompt.value })
|
||||
.then((res) => {
|
||||
row.content = res.data;
|
||||
isGenerating.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
showMessageError("生成失败：" + e.message);
|
||||
isGenerating.value = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@@ -488,4 +551,4 @@ const generatePrompt = (row) => {
|
||||
font-size 14px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,29 +3,48 @@
|
||||
<el-tabs v-model="activeName" @tab-change="handleChange">
|
||||
<el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
|
||||
<div class="handle-box">
|
||||
<el-input v-model.number="data.chat.query.user_id" placeholder="账户ID" class="handle-input mr10"
|
||||
@keyup="searchChat($event)"></el-input>
|
||||
<el-input v-model="data.chat.query.title" placeholder="对话标题" class="handle-input mr10"
|
||||
@keyup="searchChat($event)"></el-input>
|
||||
<el-input
|
||||
v-model.number="data.chat.query.user_id"
|
||||
placeholder="账户ID"
|
||||
class="handle-input mr10"
|
||||
@keyup="searchChat($event)"
|
||||
></el-input>
|
||||
<el-input
|
||||
v-model="data.chat.query.title"
|
||||
placeholder="对话标题"
|
||||
class="handle-input mr10"
|
||||
@keyup="searchChat($event)"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="data.chat.query.created_at"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
|
||||
v-model="data.chat.query.created_at"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="
|
||||
margin-right: 10px;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
"
|
||||
/>
|
||||
<el-button type="primary" :icon="Search" @click="fetchChatData">搜索</el-button>
|
||||
<el-button type="primary" :icon="Search" @click="fetchChatData"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-table :data="data.chat.items" :row-key="row => row.id" table-layout="auto">
|
||||
<el-table-column prop="user_id" label="账户ID"/>
|
||||
<el-table-column prop="username" label="账户"/>
|
||||
<el-table
|
||||
:data="data.chat.items"
|
||||
:row-key="(row) => row.id"
|
||||
table-layout="auto"
|
||||
>
|
||||
<el-table-column prop="user_id" label="账户ID" />
|
||||
<el-table-column prop="username" label="账户" />
|
||||
<el-table-column label="图标">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="30" :src="scope.row.role.icon"/>
|
||||
<el-avatar :size="30" :src="scope.row.role.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色">
|
||||
@@ -33,21 +52,29 @@
|
||||
<span>{{ scope.row.role.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="model" label="模型"/>
|
||||
<el-table-column prop="title" label="标题"/>
|
||||
<el-table-column prop="msg_num" label="消息数量"/>
|
||||
<el-table-column prop="token" label="消耗算力"/>
|
||||
<el-table-column prop="model" label="模型" />
|
||||
<el-table-column prop="title" label="标题" />
|
||||
<el-table-column prop="msg_num" label="消息数量" />
|
||||
<el-table-column prop="token" label="消耗算力" />
|
||||
|
||||
<el-table-column label="创建时间">
|
||||
<template #default="scope">
|
||||
<span>{{ dateFormat(scope.row['created_at']) }}</span>
|
||||
<span>{{ dateFormat(scope.row["created_at"]) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" @click="showMessages(scope.row)">查看</el-button>
|
||||
<el-popconfirm title="确定要删除当前记录吗?" @confirm="removeChat(scope.row)">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="showMessages(scope.row)"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
title="确定要删除当前记录吗?"
|
||||
@confirm="removeChat(scope.row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button size="small" type="danger">删除</el-button>
|
||||
</template>
|
||||
@@ -58,67 +85,104 @@
|
||||
</el-row>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination v-if="data.chat.total > 0" background
|
||||
layout="total,prev, pager, next"
|
||||
:hide-on-single-page="true"
|
||||
v-model:current-page="data.chat.page"
|
||||
v-model:page-size="data.chat.pageSize"
|
||||
@current-change="fetchChatData()"
|
||||
:total="data.chat.total"/>
|
||||
|
||||
<el-pagination
|
||||
v-if="data.chat.total > 0"
|
||||
background
|
||||
layout="total,prev, pager, next"
|
||||
:hide-on-single-page="true"
|
||||
v-model:current-page="data.chat.page"
|
||||
v-model:page-size="data.chat.pageSize"
|
||||
@current-change="fetchChatData()"
|
||||
:total="data.chat.total"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="消息记录" name="message">
|
||||
<div class="handle-box">
|
||||
<el-input v-model.number="data.message.query.user_id" placeholder="账户ID" class="handle-input mr10"
|
||||
@keyup="searchMessage($event)"></el-input>
|
||||
<el-input v-model="data.message.query.content" placeholder="消息内容" class="handle-input mr10"
|
||||
@keyup="searchMessage($event)"></el-input>
|
||||
<el-input v-model="data.message.query.model" placeholder="模型" class="handle-input mr10"
|
||||
@keyup="searchMessage($event)"></el-input>
|
||||
<el-input
|
||||
v-model.number="data.message.query.user_id"
|
||||
placeholder="账户ID"
|
||||
class="handle-input mr10"
|
||||
@keyup="searchMessage($event)"
|
||||
></el-input>
|
||||
<el-input
|
||||
v-model="data.message.query.content"
|
||||
placeholder="消息内容"
|
||||
class="handle-input mr10"
|
||||
@keyup="searchMessage($event)"
|
||||
></el-input>
|
||||
<el-input
|
||||
v-model="data.message.query.model"
|
||||
placeholder="模型"
|
||||
class="handle-input mr10"
|
||||
@keyup="searchMessage($event)"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="data.message.query.created_at"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
|
||||
v-model="data.message.query.created_at"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="
|
||||
margin-right: 10px;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
"
|
||||
/>
|
||||
<el-button type="primary" :icon="Search" @click="fetchMessageData">搜索</el-button>
|
||||
<el-button type="primary" :icon="Search" @click="fetchMessageData"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-table :data="data.message.items" :row-key="row => row.id" table-layout="auto">
|
||||
<el-table-column prop="user_id" label="账户ID"/>
|
||||
<el-table-column prop="username" label="账户"/>
|
||||
<el-table
|
||||
:data="data.message.items"
|
||||
:row-key="(row) => row.id"
|
||||
table-layout="auto"
|
||||
>
|
||||
<el-table-column prop="user_id" label="账户ID" />
|
||||
<el-table-column prop="username" label="账户" />
|
||||
<el-table-column label="角色">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="30" :src="scope.row.icon"/>
|
||||
<el-avatar :size="30" :src="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="model" label="模型"/>
|
||||
<el-table-column prop="model" label="模型" />
|
||||
|
||||
<el-table-column label="消息内容">
|
||||
<template #default="scope">
|
||||
<el-text style="width: 200px" truncated @click="showContent(scope.row.content)">
|
||||
<el-text
|
||||
style="width: 200px"
|
||||
truncated
|
||||
@click="showContent(scope.row.content)"
|
||||
>
|
||||
{{ scope.row.content }}
|
||||
</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="token" label="算力"/>
|
||||
<el-table-column prop="token" label="算力" />
|
||||
|
||||
<el-table-column label="创建时间">
|
||||
<template #default="scope">
|
||||
<span>{{ dateFormat(scope.row['created_at']) }}</span>
|
||||
<span>{{ dateFormat(scope.row["created_at"]) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" @click="showContent(scope.row.content)">查看</el-button>
|
||||
<el-popconfirm title="确定要删除当前记录吗?" @confirm="removeMessage(scope.row)">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="showContent(scope.row.content)"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
title="确定要删除当前记录吗?"
|
||||
@confirm="removeMessage(scope.row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button size="small" type="danger">删除</el-button>
|
||||
</template>
|
||||
@@ -129,24 +193,25 @@
|
||||
</el-row>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination v-if="data.message.total > 0" background
|
||||
layout="total,prev, pager, next"
|
||||
:hide-on-single-page="true"
|
||||
v-model:current-page="data.message.page"
|
||||
v-model:page-size="data.message.pageSize"
|
||||
@current-change="fetchMessageData()"
|
||||
:total="data.message.total"/>
|
||||
|
||||
<el-pagination
|
||||
v-if="data.message.total > 0"
|
||||
background
|
||||
layout="total,prev, pager, next"
|
||||
:hide-on-single-page="true"
|
||||
v-model:current-page="data.message.page"
|
||||
v-model:page-size="data.message.pageSize"
|
||||
@current-change="fetchMessageData()"
|
||||
:total="data.message.total"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
|
||||
<el-dialog
|
||||
v-model="showContentDialog"
|
||||
title="消息详情"
|
||||
class="chat-dialog"
|
||||
style="--el-dialog-width:60%"
|
||||
v-model="showContentDialog"
|
||||
title="消息详情"
|
||||
class="chat-dialog"
|
||||
style="--el-dialog-width: 60%"
|
||||
>
|
||||
<div class="chat-detail">
|
||||
<div class="chat-line" v-html="dialogContent"></div>
|
||||
@@ -154,138 +219,147 @@
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="showChatItemDialog"
|
||||
title="对话详情"
|
||||
class="chat-dialog"
|
||||
style="--el-dialog-width:60%"
|
||||
v-model="showChatItemDialog"
|
||||
title="对话详情"
|
||||
class="chat-dialog"
|
||||
style="--el-dialog-width: 60%"
|
||||
>
|
||||
<div class="chat-box chat-page">
|
||||
<div v-for="item in messages" :key="item.id">
|
||||
<chat-prompt
|
||||
v-if="item.type==='prompt'"
|
||||
:data="item"/>
|
||||
<chat-reply v-else-if="item.type==='reply'"
|
||||
:read-only="true"
|
||||
:data="item"/>
|
||||
<chat-prompt v-if="item.type === 'prompt'" :data="item" />
|
||||
<chat-reply
|
||||
v-else-if="item.type === 'reply'"
|
||||
:read-only="true"
|
||||
:data="item"
|
||||
/>
|
||||
</div>
|
||||
</div><!-- end chat box -->
|
||||
</div>
|
||||
<!-- end chat box -->
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {dateFormat, processContent} from "@/utils/libs";
|
||||
import {Search} from "@element-plus/icons-vue";
|
||||
import 'highlight.js/styles/a11y-dark.css'
|
||||
import { onMounted, ref } from "vue";
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { dateFormat, processContent } from "@/utils/libs";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import "highlight.js/styles/a11y-dark.css";
|
||||
import hl from "highlight.js";
|
||||
import ChatPrompt from "@/components/ChatPrompt.vue";
|
||||
import ChatReply from "@/components/ChatReply.vue";
|
||||
|
||||
// 变量定义
|
||||
const data = ref({
|
||||
"chat": {
|
||||
chat: {
|
||||
items: [],
|
||||
query: {title: "", created_at: [], page: 1, page_size: 15},
|
||||
query: { title: "", created_at: [], page: 1, page_size: 15 },
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 15,
|
||||
loading: true
|
||||
},
|
||||
"message": {
|
||||
message: {
|
||||
items: [],
|
||||
query: {title: "", created_at: [], page: 1, page_size: 15},
|
||||
query: { title: "", created_at: [], page: 1, page_size: 15 },
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 15,
|
||||
loading: true
|
||||
}
|
||||
})
|
||||
const activeName = ref("chat")
|
||||
});
|
||||
const activeName = ref("chat");
|
||||
|
||||
onMounted(() => {
|
||||
fetchChatData()
|
||||
})
|
||||
fetchChatData();
|
||||
});
|
||||
|
||||
const handleChange = (tab) => {
|
||||
if (tab === "chat") {
|
||||
fetchChatData()
|
||||
fetchChatData();
|
||||
} else if (tab === "message") {
|
||||
fetchMessageData()
|
||||
fetchMessageData();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索对话
|
||||
const searchChat = (evt) => {
|
||||
if (evt.keyCode === 13) {
|
||||
fetchChatData()
|
||||
fetchChatData();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索消息
|
||||
const searchMessage = (evt) => {
|
||||
if (evt.keyCode === 13) {
|
||||
fetchMessageData()
|
||||
fetchMessageData();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const fetchChatData = () => {
|
||||
const d = data.value.chat
|
||||
d.query.page = d.page
|
||||
d.query.page_size = d.pageSize
|
||||
httpPost('/api/admin/chat/list', d.query).then((res) => {
|
||||
if (res.data) {
|
||||
d.items = res.data.items
|
||||
d.total = res.data.total
|
||||
d.page = res.data.page
|
||||
d.pageSize = res.data.page_size
|
||||
}
|
||||
d.loading = false
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取数据失败：" + e.message);
|
||||
})
|
||||
}
|
||||
const d = data.value.chat;
|
||||
d.query.page = d.page;
|
||||
d.query.page_size = d.pageSize;
|
||||
httpPost("/api/admin/chat/list", d.query)
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
d.items = res.data.items;
|
||||
d.total = res.data.total;
|
||||
d.page = res.data.page;
|
||||
d.pageSize = res.data.page_size;
|
||||
}
|
||||
d.loading = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取数据失败：" + e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const fetchMessageData = () => {
|
||||
const d = data.value.message
|
||||
d.query.page = d.page
|
||||
d.query.page_size = d.pageSize
|
||||
httpPost('/api/admin/chat/message', d.query).then((res) => {
|
||||
if (res.data) {
|
||||
d.items = res.data.items
|
||||
d.total = res.data.total
|
||||
d.page = res.data.page
|
||||
d.pageSize = res.data.page_size
|
||||
}
|
||||
d.loading = false
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取数据失败：" + e.message);
|
||||
})
|
||||
}
|
||||
const d = data.value.message;
|
||||
d.query.page = d.page;
|
||||
d.query.page_size = d.pageSize;
|
||||
httpPost("/api/admin/chat/message", d.query)
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
d.items = res.data.items;
|
||||
d.total = res.data.total;
|
||||
d.page = res.data.page;
|
||||
d.pageSize = res.data.page_size;
|
||||
}
|
||||
d.loading = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取数据失败：" + e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const removeChat = function (row) {
|
||||
httpGet('/api/admin/chat/remove?chat_id=' + row.chat_id).then(() => {
|
||||
ElMessage.success("删除成功！")
|
||||
fetchChatData()
|
||||
}).catch((e) => {
|
||||
ElMessage.error("删除失败：" + e.message)
|
||||
})
|
||||
}
|
||||
httpGet("/api/admin/chat/remove?chat_id=" + row.chat_id)
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功！");
|
||||
fetchChatData();
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("删除失败：" + e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const removeMessage = function (row) {
|
||||
httpGet('/api/admin/chat/message/remove?id=' + row.id).then(() => {
|
||||
ElMessage.success("删除成功！")
|
||||
fetchMessageData()
|
||||
}).catch((e) => {
|
||||
ElMessage.error("删除失败：" + e.message)
|
||||
})
|
||||
}
|
||||
httpGet("/api/admin/chat/message/remove?id=" + row.id)
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功！");
|
||||
fetchMessageData();
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("删除失败：" + e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const mathjaxPlugin = require('markdown-it-mathjax3')
|
||||
const md = require('markdown-it')({
|
||||
const mathjaxPlugin = require("markdown-it-mathjax3");
|
||||
const md = require("markdown-it")({
|
||||
breaks: true,
|
||||
html: true,
|
||||
linkify: true,
|
||||
@@ -293,41 +367,43 @@ const md = require('markdown-it')({
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hl.getLanguage(lang)) {
|
||||
// 处理代码高亮
|
||||
const preCode = hl.highlight(lang, str, true).value
|
||||
const preCode = hl.highlight(lang, str, true).value;
|
||||
// 将代码包裹在 pre 中
|
||||
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
|
||||
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`;
|
||||
}
|
||||
|
||||
// 处理代码高亮
|
||||
const preCode = md.utils.escapeHtml(str)
|
||||
const preCode = md.utils.escapeHtml(str);
|
||||
// 将代码包裹在 pre 中
|
||||
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
|
||||
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`;
|
||||
}
|
||||
});
|
||||
md.use(mathjaxPlugin)
|
||||
md.use(mathjaxPlugin);
|
||||
|
||||
const showContentDialog = ref(false)
|
||||
const dialogContent = ref("")
|
||||
const showContentDialog = ref(false);
|
||||
const dialogContent = ref("");
|
||||
const showContent = (content) => {
|
||||
showContentDialog.value = true
|
||||
dialogContent.value = md.render(processContent(content))
|
||||
}
|
||||
showContentDialog.value = true;
|
||||
dialogContent.value = md.render(processContent(content));
|
||||
};
|
||||
|
||||
const showChatItemDialog = ref(false)
|
||||
const messages = ref([])
|
||||
const showChatItemDialog = ref(false);
|
||||
const messages = ref([]);
|
||||
const showMessages = (row) => {
|
||||
showChatItemDialog.value = true
|
||||
messages.value = []
|
||||
httpGet('/api/admin/chat/history?chat_id=' + row.chat_id).then(res => {
|
||||
const data = res.data
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
messages.value.push(data[i]);
|
||||
}
|
||||
}).catch(e => {
|
||||
// TODO: 显示重新加载按钮
|
||||
ElMessage.error('加载聊天记录失败：' + e.message);
|
||||
})
|
||||
}
|
||||
showChatItemDialog.value = true;
|
||||
messages.value = [];
|
||||
httpGet("/api/admin/chat/history?chat_id=" + row.chat_id)
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
messages.value.push(data[i]);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
// TODO: 显示重新加载按钮
|
||||
ElMessage.error("加载聊天记录失败：" + e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
@@ -93,6 +93,7 @@
|
||||
<el-pagination v-if="data.mj.total > 0" background
|
||||
layout="total,prev, pager, next"
|
||||
:hide-on-single-page="true"
|
||||
|
||||
v-model:current-page="data.mj.page"
|
||||
v-model:page-size="data.mj.pageSize"
|
||||
@current-change="fetchMjData()"
|
||||
|
||||
@@ -1,27 +1,47 @@
|
||||
<template>
|
||||
<div class="container user-list" v-loading="loading">
|
||||
<div class="handle-box">
|
||||
<el-input v-model="query.username" placeholder="账号" class="handle-input mr10"></el-input>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||
<el-button type="success" :icon="Plus" @click="addUser">新增用户</el-button>
|
||||
<el-button type="danger" :icon="Delete" @click="multipleDelete">删除</el-button>
|
||||
<el-input
|
||||
v-model="query.username"
|
||||
placeholder="账号"
|
||||
class="handle-input mr10"
|
||||
></el-input>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="success" :icon="Plus" @click="addUser"
|
||||
>新增用户</el-button
|
||||
>
|
||||
<el-button type="danger" :icon="Delete" @click="multipleDelete"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-table :data="users.items" border class="table" :row-key="row => row.id"
|
||||
@selection-change="handleSelectionChange" table-layout="auto">
|
||||
<el-table
|
||||
:data="users.items"
|
||||
border
|
||||
class="table"
|
||||
:row-key="(row) => row.id"
|
||||
@selection-change="handleSelectionChange"
|
||||
table-layout="auto"
|
||||
>
|
||||
<el-table-column type="selection" width="38"></el-table-column>
|
||||
<el-table-column prop="id" label="ID"/>
|
||||
<el-table-column prop="id" label="ID" />
|
||||
<el-table-column label="账号">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.username }}</span>
|
||||
<el-image v-if="scope.row.vip" :src="vipImg" style="height: 20px;position: relative; top:5px; left: 5px"/>
|
||||
<el-image
|
||||
v-if="scope.row.vip"
|
||||
:src="vipImg"
|
||||
style="height: 20px; position: relative; top: 5px; left: 5px"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mobile" label="手机"/>
|
||||
<el-table-column prop="email" label="邮箱"/>
|
||||
<el-table-column prop="nickname" label="昵称"/>
|
||||
<el-table-column prop="power" label="剩余算力"/>
|
||||
<el-table-column prop="mobile" label="手机" />
|
||||
<el-table-column prop="email" label="邮箱" />
|
||||
<el-table-column prop="nickname" label="昵称" />
|
||||
<el-table-column prop="power" label="剩余算力" />
|
||||
<el-table-column label="状态" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.status" type="success">正常</el-tag>
|
||||
@@ -30,337 +50,384 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="过期时间">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row['expired_time']">{{ scope.row['expired_time'] }}</span>
|
||||
<span v-if="scope.row['expired_time']">{{
|
||||
scope.row["expired_time"]
|
||||
}}</span>
|
||||
<el-tag v-else>长期有效</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="注册时间">
|
||||
<template #default="scope">
|
||||
<span>{{ dateFormat(scope.row['created_at']) }}</span>
|
||||
<span>{{ dateFormat(scope.row["created_at"]) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column fixed="right" label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<el-button size="small" type="primary" @click="userEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="removeUser(scope.row)">删除</el-button>
|
||||
<el-button size="small" type="success" @click="resetPass(scope.row)">重置密码</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="userEdit(scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="removeUser(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
@click="resetPass(scope.row)"
|
||||
>重置密码</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination v-if="users.total > 0"
|
||||
background
|
||||
layout="total, prev, pager, next"
|
||||
v-model:current-page="users.page"
|
||||
v-model:page-size="users.page_size"
|
||||
:total="users.total"
|
||||
@current-change="fetchUserList(users.page, users.page_size)"
|
||||
<el-pagination
|
||||
v-if="users.total > 0"
|
||||
background
|
||||
layout="total, prev, pager, next"
|
||||
v-model:current-page="users.page"
|
||||
v-model:page-size="users.page_size"
|
||||
:total="users.total"
|
||||
@current-change="fetchUserList(users.page, users.page_size)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-dialog
|
||||
v-model="showUserEditDialog"
|
||||
:title="title"
|
||||
:close-on-click-modal="false"
|
||||
width="50%"
|
||||
v-model="showUserEditDialog"
|
||||
:title="title"
|
||||
:close-on-click-modal="false"
|
||||
width="50%"
|
||||
>
|
||||
<el-form :model="user" label-width="100px" ref="userEditFormRef" :rules="rules">
|
||||
<el-form
|
||||
:model="user"
|
||||
label-width="100px"
|
||||
ref="userEditFormRef"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item label="账号：" prop="username">
|
||||
<el-input v-model="user.username" autocomplete="off"/>
|
||||
<el-input v-model="user.username" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机：" prop="mobile">
|
||||
<el-input v-model="user.mobile" autocomplete="off"/>
|
||||
<el-input v-model="user.mobile" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱：" prop="email">
|
||||
<el-input v-model="user.email" autocomplete="off"/>
|
||||
<el-input v-model="user.email" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="add" label="密码：" prop="password">
|
||||
<el-input v-model="user.password" autocomplete="off" placeholder="8-16位"/>
|
||||
<el-input
|
||||
v-model="user.password"
|
||||
autocomplete="off"
|
||||
placeholder="8-16位"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="剩余算力：" prop="power">
|
||||
<el-input v-model.number="user.power" autocomplete="off" placeholder="0"/>
|
||||
<el-input
|
||||
v-model.number="user.power"
|
||||
autocomplete="off"
|
||||
placeholder="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="有效期：" prop="expired_time">
|
||||
<el-date-picker
|
||||
v-model="user.expired_time"
|
||||
type="datetime"
|
||||
placeholder="选择日期"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:disabled-date="disabledDate"
|
||||
v-model="user.expired_time"
|
||||
type="datetime"
|
||||
placeholder="选择日期"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:disabled-date="disabledDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="聊天角色" prop="chat_roles">
|
||||
<el-select
|
||||
v-model="user.chat_roles"
|
||||
multiple
|
||||
:filterable="true"
|
||||
placeholder="选择聊天角色，多选"
|
||||
v-model="user.chat_roles"
|
||||
multiple
|
||||
:filterable="true"
|
||||
placeholder="选择聊天角色，多选"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roles"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
v-for="item in roles"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="模型权限" prop="chat_models">
|
||||
<el-select
|
||||
v-model="user.chat_models"
|
||||
multiple
|
||||
:filterable="true"
|
||||
placeholder="选择AI模型，多选"
|
||||
v-model="user.chat_models"
|
||||
multiple
|
||||
:filterable="true"
|
||||
placeholder="选择AI模型，多选"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in models"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in models"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="启用状态">
|
||||
<el-switch v-model="user.status"/>
|
||||
<el-switch v-model="user.status" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开通VIP">
|
||||
<el-switch v-model="user.vip"/>
|
||||
<el-switch v-model="user.vip" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showUserEditDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveUser">提交</el-button>
|
||||
</span>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showUserEditDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveUser">提交</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="showResetPassDialog"
|
||||
title="重置密码"
|
||||
width="50%"
|
||||
>
|
||||
<el-dialog v-model="showResetPassDialog" title="重置密码" width="50%">
|
||||
<el-form label-width="100px" ref="userEditFormRef">
|
||||
<el-form-item label="账户：">
|
||||
<el-input v-model="pass.username" autocomplete="off" readonly disabled/>
|
||||
<el-input
|
||||
v-model="pass.username"
|
||||
autocomplete="off"
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="新密码：">
|
||||
<el-input v-model="pass.password" autocomplete="off"/>
|
||||
<el-input v-model="pass.password" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="doResetPass">提交</el-button>
|
||||
</span>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="doResetPass">提交</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {dateFormat, disabledDate} from "@/utils/libs";
|
||||
import {Delete, Plus, Search} from "@element-plus/icons-vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { dateFormat, disabledDate } from "@/utils/libs";
|
||||
import { Delete, Plus, Search } from "@element-plus/icons-vue";
|
||||
|
||||
// 变量定义
|
||||
const users = ref({page: 1, page_size: 15, items: []})
|
||||
const query = ref({username: '', page: 1, page_size: 15})
|
||||
const users = ref({ page: 1, page_size: 15, items: [] });
|
||||
const query = ref({ username: "", page: 1, page_size: 15 });
|
||||
|
||||
const title = ref('添加用户')
|
||||
const vipImg = ref("/images/vip.png")
|
||||
const add = ref(true)
|
||||
const user = ref({chat_roles: [], chat_models: []})
|
||||
const pass = ref({username: '', password: '', id: 0})
|
||||
const roles = ref([])
|
||||
const models = ref([])
|
||||
const showUserEditDialog = ref(false)
|
||||
const showResetPassDialog = ref(false)
|
||||
const title = ref("添加用户");
|
||||
const vipImg = ref("/images/menu/member.png");
|
||||
const add = ref(true);
|
||||
const user = ref({ chat_roles: [], chat_models: [] });
|
||||
const pass = ref({ username: "", password: "", id: 0 });
|
||||
const roles = ref([]);
|
||||
const models = ref([]);
|
||||
const showUserEditDialog = ref(false);
|
||||
const showResetPassDialog = ref(false);
|
||||
const rules = reactive({
|
||||
username: [{required: true, message: '请输入账号', trigger: 'blur',}],
|
||||
username: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value) => {
|
||||
return !(value.length > 16 || value.length < 8);
|
||||
|
||||
}, message: '密码必须为8-16',
|
||||
trigger: 'blur'
|
||||
},
|
||||
message: "密码必须为8-16",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
calls: [
|
||||
{required: true, message: '请输入提问次数'},
|
||||
{type: 'number', message: '请输入有效数字'},
|
||||
{ required: true, message: "请输入提问次数" },
|
||||
{ type: "number", message: "请输入有效数字" }
|
||||
],
|
||||
chat_roles: [{required: true, message: '请选择聊天角色', trigger: 'change'}],
|
||||
chat_models: [{required: true, message: '请选择AI模型', trigger: 'change'}],
|
||||
})
|
||||
const loading = ref(true)
|
||||
chat_roles: [
|
||||
{ required: true, message: "请选择聊天角色", trigger: "change" }
|
||||
],
|
||||
chat_models: [{ required: true, message: "请选择AI模型", trigger: "change" }]
|
||||
});
|
||||
const loading = ref(true);
|
||||
|
||||
const userEditFormRef = ref(null)
|
||||
const userEditFormRef = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
fetchUserList(users.value.page, users.value.page_size)
|
||||
fetchUserList(users.value.page, users.value.page_size);
|
||||
// 获取角色列表
|
||||
httpGet('/api/admin/role/list').then((res) => {
|
||||
roles.value = res.data;
|
||||
}).catch(() => {
|
||||
ElMessage.error("获取聊天角色失败");
|
||||
})
|
||||
httpGet("/api/admin/role/list")
|
||||
.then((res) => {
|
||||
roles.value = res.data;
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("获取聊天角色失败");
|
||||
});
|
||||
|
||||
httpGet('/api/admin/model/list').then(res => {
|
||||
models.value = res.data
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取模型失败：" + e.message)
|
||||
})
|
||||
})
|
||||
httpGet("/api/admin/model/list")
|
||||
.then((res) => {
|
||||
models.value = res.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取模型失败：" + e.message);
|
||||
});
|
||||
});
|
||||
|
||||
const fetchUserList = function (page, pageSize) {
|
||||
query.value.page = page
|
||||
query.value.page_size = pageSize
|
||||
httpGet('/api/admin/user/list', query.value).then((res) => {
|
||||
if (res.data) {
|
||||
// 初始化数据
|
||||
const arr = res.data.items;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
arr[i].expired_time = dateFormat(arr[i].expired_time)
|
||||
query.value.page = page;
|
||||
query.value.page_size = pageSize;
|
||||
httpGet("/api/admin/user/list", query.value)
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
// 初始化数据
|
||||
const arr = res.data.items;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
arr[i].expired_time = dateFormat(arr[i].expired_time);
|
||||
}
|
||||
users.value.items = arr;
|
||||
users.value.total = res.data.total;
|
||||
users.value.page = res.data.page;
|
||||
user.value.page_size = res.data.page_size;
|
||||
}
|
||||
users.value.items = arr
|
||||
users.value.total = res.data.total
|
||||
users.value.page = res.data.page
|
||||
user.value.page_size = res.data.page_size
|
||||
}
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
ElMessage.error('加载用户列表失败')
|
||||
})
|
||||
}
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("加载用户列表失败");
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
fetchUserList(users.value.page, users.value.page_size)
|
||||
}
|
||||
fetchUserList(users.value.page, users.value.page_size);
|
||||
};
|
||||
|
||||
// 删除用户
|
||||
const removeUser = function (user) {
|
||||
ElMessageBox.confirm(
|
||||
'此操作将会永久删除用户信息和聊天记录，确认操作吗?',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
httpGet('/api/admin/user/remove', {id: user.id}).then(() => {
|
||||
ElMessage.success('操作成功！')
|
||||
fetchUserList(users.value.page, users.value.page_size)
|
||||
}).catch((e) => {
|
||||
ElMessage.error('操作失败，' + e.message)
|
||||
"此操作将会永久删除用户信息和聊天记录，确认操作吗?",
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
httpGet("/api/admin/user/remove", { id: user.id })
|
||||
.then(() => {
|
||||
ElMessage.success("操作成功！");
|
||||
fetchUserList(users.value.page, users.value.page_size);
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("操作失败，" + e.message);
|
||||
});
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage.info('操作被取消')
|
||||
})
|
||||
|
||||
}
|
||||
.catch(() => {
|
||||
ElMessage.info("操作被取消");
|
||||
});
|
||||
};
|
||||
|
||||
const userEdit = function (row) {
|
||||
user.value = row
|
||||
title.value = '编辑用户'
|
||||
showUserEditDialog.value = true
|
||||
add.value = false
|
||||
}
|
||||
user.value = row;
|
||||
title.value = "编辑用户";
|
||||
showUserEditDialog.value = true;
|
||||
add.value = false;
|
||||
};
|
||||
|
||||
const addUser = () => {
|
||||
user.value = {chat_id: 0, chat_roles: [], chat_models: []}
|
||||
title.value = '添加用户'
|
||||
showUserEditDialog.value = true
|
||||
add.value = true
|
||||
}
|
||||
user.value = { chat_id: 0, chat_roles: [], chat_models: [] };
|
||||
title.value = "添加用户";
|
||||
showUserEditDialog.value = true;
|
||||
add.value = true;
|
||||
};
|
||||
|
||||
const saveUser = function () {
|
||||
userEditFormRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
showUserEditDialog.value = false
|
||||
console.log(user.value)
|
||||
httpPost('/api/admin/user/save', user.value).then((res) => {
|
||||
ElMessage.success('操作成功！')
|
||||
if (add.value) {
|
||||
users.value.items.push(res.data)
|
||||
}
|
||||
}).catch((e) => {
|
||||
ElMessage.error('操作失败，' + e.message)
|
||||
})
|
||||
showUserEditDialog.value = false;
|
||||
console.log(user.value);
|
||||
httpPost("/api/admin/user/save", user.value)
|
||||
.then((res) => {
|
||||
ElMessage.success("操作成功！");
|
||||
if (add.value) {
|
||||
users.value.items.push(res.data);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("操作失败，" + e.message);
|
||||
});
|
||||
} else {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const userIds = ref([])
|
||||
const userIds = ref([]);
|
||||
const handleSelectionChange = function (rows) {
|
||||
userIds.value = []
|
||||
userIds.value = [];
|
||||
rows.forEach((row) => {
|
||||
userIds.value.push(row.id)
|
||||
})
|
||||
}
|
||||
userIds.value.push(row.id);
|
||||
});
|
||||
};
|
||||
|
||||
const multipleDelete = function () {
|
||||
ElMessageBox.confirm(
|
||||
'此操作将会永久删除用户信息和聊天记录，确认操作吗?',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
loading.value = true
|
||||
httpGet('/api/admin/user/remove', {ids: userIds.value}).then(() => {
|
||||
ElMessage.success('操作成功！')
|
||||
fetchUserList(users.value.page, users.value.page_size)
|
||||
loading.value = false
|
||||
}).catch((e) => {
|
||||
ElMessage.error('操作失败，' + e.message)
|
||||
loading.value = false
|
||||
"此操作将会永久删除用户信息和聊天记录，确认操作吗?",
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
httpGet("/api/admin/user/remove", { ids: userIds.value })
|
||||
.then(() => {
|
||||
ElMessage.success("操作成功！");
|
||||
fetchUserList(users.value.page, users.value.page_size);
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("操作失败，" + e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage.info('操作被取消')
|
||||
})
|
||||
}
|
||||
.catch(() => {
|
||||
ElMessage.info("操作被取消");
|
||||
});
|
||||
};
|
||||
|
||||
const resetPass = (row) => {
|
||||
showResetPassDialog.value = true
|
||||
pass.value.id = row.id
|
||||
pass.value.username = row.username
|
||||
}
|
||||
showResetPassDialog.value = true;
|
||||
pass.value.id = row.id;
|
||||
pass.value.username = row.username;
|
||||
};
|
||||
|
||||
const doResetPass = () => {
|
||||
httpPost('/api/admin/user/resetPass', pass.value).then(() => {
|
||||
ElMessage.success('操作成功！')
|
||||
showResetPassDialog.value = false
|
||||
}).catch((e) => {
|
||||
ElMessage.error('操作失败，' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
httpPost("/api/admin/user/resetPass", pass.value)
|
||||
.then(() => {
|
||||
ElMessage.success("操作成功！");
|
||||
showResetPassDialog.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("操作失败，" + e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@@ -398,4 +465,4 @@ const doResetPass = () => {
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user