mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-04-27 21:44:25 +08:00
stylus 语法换成 saas 语法
This commit is contained in:
GeekMaster
@@ -39,8 +39,14 @@
|
||||
<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>
|
||||
@@ -57,7 +63,12 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="应用分类：" prop="tid">
|
||||
<el-select v-model="role.tid" filterable placeholder="请选择分类" clearable>
|
||||
<el-option v-for="item in appTypes" :key="item.id" :label="item.name" :value="item.id" />
|
||||
<el-option
|
||||
v-for="item in appTypes"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -68,7 +79,9 @@
|
||||
<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"> 上传 </el-upload>
|
||||
<el-upload :auto-upload="true" :show-file-list="false" :http-request="uploadImg">
|
||||
上传
|
||||
</el-upload>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@@ -89,7 +102,12 @@
|
||||
<el-table-column label="对话应用" width="120">
|
||||
<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" />
|
||||
<el-option
|
||||
v-for="value in messageRoles"
|
||||
:key="value"
|
||||
:label="value"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -110,7 +128,13 @@
|
||||
|
||||
<template #default="scope">
|
||||
<div class="context-msg-content">
|
||||
<el-input type="textarea" :rows="3" v-model="scope.row.content" autocomplete="off" v-loading="isGenerating" />
|
||||
<el-input
|
||||
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-button circle type="danger" size="small">
|
||||
@@ -133,7 +157,13 @@
|
||||
/>
|
||||
<el-row class="text-line">
|
||||
<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">
|
||||
<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>
|
||||
@@ -163,64 +193,64 @@
|
||||
</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 Compressor from "compressorjs";
|
||||
import { showMessageError } from "@/utils/dialog";
|
||||
import { showMessageError } from '@/utils/dialog'
|
||||
import { httpGet, httpPost } from '@/utils/http'
|
||||
import { copyObj, removeArrayItem } from '@/utils/libs'
|
||||
import { Delete, Plus } from '@element-plus/icons-vue'
|
||||
import Compressor from 'compressorjs'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Sortable } from 'sortablejs'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
|
||||
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")
|
||||
httpGet('/api/admin/model/list?enable=1')
|
||||
.then((res) => {
|
||||
models.value = res.data;
|
||||
models.value = res.data
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("获取AI模型数据失败");
|
||||
});
|
||||
ElMessage.error('获取AI模型数据失败')
|
||||
})
|
||||
|
||||
// get app type
|
||||
httpGet("/api/admin/app/type/list?enable=1")
|
||||
httpGet('/api/admin/app/type/list?enable=1')
|
||||
.then((res) => {
|
||||
appTypes.value = res.data;
|
||||
appTypes.value = res.data
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("获取应用分类数据失败");
|
||||
});
|
||||
});
|
||||
ElMessage.error('获取应用分类数据失败')
|
||||
})
|
||||
})
|
||||
|
||||
const fetchData = () => {
|
||||
// 获取应用列表
|
||||
httpGet("/api/admin/role/list")
|
||||
httpGet('/api/admin/role/list')
|
||||
.then((res) => {
|
||||
// 初始化数据
|
||||
// const arr = res.data;
|
||||
@@ -229,108 +259,110 @@ const fetchData = () => {
|
||||
// arr[i].model_id = ''
|
||||
// }
|
||||
// }
|
||||
tableData.value = res.data;
|
||||
sortedTableData.value = copyObj(tableData.value);
|
||||
loading.value = false;
|
||||
tableData.value = res.data
|
||||
sortedTableData.value = copyObj(tableData.value)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("获取聊天应用失败");
|
||||
});
|
||||
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 }) {
|
||||
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", {
|
||||
httpPost('/api/admin/role/set', {
|
||||
id: row.id,
|
||||
filed: filed,
|
||||
value: row[filed],
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage.success("操作成功！");
|
||||
ElMessage.success('操作成功！')
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("操作失败：" + e.message);
|
||||
});
|
||||
};
|
||||
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)
|
||||
showDialog.value = false
|
||||
httpPost('/api/admin/role/save', role.value)
|
||||
.then(() => {
|
||||
ElMessage.success("操作成功");
|
||||
fetchData();
|
||||
ElMessage.success('操作成功')
|
||||
fetchData()
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("操作失败，" + e.message);
|
||||
});
|
||||
ElMessage.error('操作失败，' + e.message)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const removeRole = function (row) {
|
||||
httpGet("/api/admin/role/remove?id=" + row.id)
|
||||
httpGet('/api/admin/role/remove?id=' + row.id)
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功！");
|
||||
ElMessage.success('删除成功！')
|
||||
tableData.value = removeArrayItem(tableData.value, row, (v1, v2) => {
|
||||
return v1.id === v2.id;
|
||||
});
|
||||
return v1.id === v2.id
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("删除失败！");
|
||||
});
|
||||
};
|
||||
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);
|
||||
};
|
||||
role.value.context.splice(index, 1)
|
||||
}
|
||||
|
||||
// 图片上传
|
||||
const uploadImg = (file) => {
|
||||
@@ -338,121 +370,120 @@ const uploadImg = (file) => {
|
||||
new Compressor(file.file, {
|
||||
quality: 0.6,
|
||||
success(result) {
|
||||
const formData = new FormData();
|
||||
formData.append("file", result, result.name);
|
||||
const formData = new FormData()
|
||||
formData.append('file', result, result.name)
|
||||
// 执行上传操作
|
||||
httpPost("/api/admin/upload", formData)
|
||||
httpPost('/api/admin/upload', formData)
|
||||
.then((res) => {
|
||||
role.value.icon = res.data.url;
|
||||
ElMessage.success("上传成功");
|
||||
role.value.icon = res.data.url
|
||||
ElMessage.success('上传成功')
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("上传失败:" + e.message);
|
||||
});
|
||||
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("请输入元提示词");
|
||||
if (metaPrompt.value === '') {
|
||||
return showMessageError('请输入元提示词')
|
||||
}
|
||||
isGenerating.value = true;
|
||||
httpPost("/api/prompt/meta", { prompt: metaPrompt.value })
|
||||
isGenerating.value = true
|
||||
httpPost('/api/prompt/meta', { prompt: metaPrompt.value })
|
||||
.then((res) => {
|
||||
row.content = res.data;
|
||||
isGenerating.value = false;
|
||||
row.content = res.data
|
||||
isGenerating.value = false
|
||||
})
|
||||
.catch((e) => {
|
||||
showMessageError("生成失败：" + e.message);
|
||||
isGenerating.value = false;
|
||||
});
|
||||
};
|
||||
showMessageError('生成失败：' + e.message)
|
||||
isGenerating.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.role-list {
|
||||
.handle-box {
|
||||
margin-bottom 20px
|
||||
margin-bottom: 20px;
|
||||
|
||||
.handle-input {
|
||||
max-width 150px;
|
||||
margin-right 10px;
|
||||
max-width: 150px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.opt-box {
|
||||
padding-bottom: 10px;
|
||||
display flex;
|
||||
justify-content flex-end
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.el-icon {
|
||||
margin-right 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.context-msg-key {
|
||||
.fr {
|
||||
float right
|
||||
float: right;
|
||||
|
||||
.el-icon {
|
||||
margin-right 5px
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-msg-content {
|
||||
display flex
|
||||
display: flex;
|
||||
|
||||
.remove-item {
|
||||
display flex
|
||||
padding 10px
|
||||
flex-flow column
|
||||
align-items center
|
||||
justify-content center
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon-btn {
|
||||
margin 10px 0 0 0
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-input--small {
|
||||
width 30px;
|
||||
width: 30px;
|
||||
|
||||
.el-input__inner {
|
||||
text-align center
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sort {
|
||||
cursor move
|
||||
cursor: move;
|
||||
.iconfont {
|
||||
position relative
|
||||
top 1px
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 20px 0
|
||||
display flex
|
||||
justify-content right
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
|
||||
.text-line {
|
||||
display flex
|
||||
justify-content space-between
|
||||
padding-top 10px
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 10px;
|
||||
.iconfont {
|
||||
margin-right 5px
|
||||
font-size 14px
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -393,7 +393,7 @@ const remove = function (row) {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import "../../assets/css/admin/form.styl";
|
||||
@use "../../assets/css/admin/form.scss" as *;
|
||||
.model-list {
|
||||
|
||||
.handle-box {
|
||||
|
||||
@@ -53,5 +53,5 @@ watch(
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import "../../assets/css/main.styl";
|
||||
@use "../../assets/css/main.scss" as *;
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<el-table-column label="登录地址" prop="login_address" />
|
||||
<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>
|
||||
@@ -19,9 +19,9 @@
|
||||
background
|
||||
layout="total,prev, pager, next"
|
||||
:hide-on-single-page="true"
|
||||
v-model:current-page="page"
|
||||
v-model:page-size="pageSize"
|
||||
@current-change="fetchList(page, pageSize)"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
@current-change="fetchList"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
@@ -29,38 +29,38 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import { httpGet } from "@/utils/http";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { dateFormat } from "@/utils/libs";
|
||||
import { httpGet } from '@/utils/http'
|
||||
import { dateFormat } from '@/utils/libs'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
// 用户登录日志
|
||||
const items = ref([]);
|
||||
const loading = ref(true);
|
||||
const total = ref(0);
|
||||
const page = ref(0);
|
||||
const pageSize = ref(0);
|
||||
const items = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
const page = ref(0)
|
||||
const pageSize = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
fetchList(1, 15);
|
||||
});
|
||||
fetchList(1, 15)
|
||||
})
|
||||
|
||||
// 获取数据
|
||||
const fetchList = function (_page, _pageSize) {
|
||||
httpGet(`/api/admin/user/loginLog?page=${_page}&page_size=${_pageSize}`)
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
items.value = res.data.items;
|
||||
total.value = res.data.total;
|
||||
page.value = res.data.page;
|
||||
pageSize.value = res.data.page_size;
|
||||
items.value = res.data.items
|
||||
total.value = res.data.total
|
||||
page.value = res.data.page
|
||||
pageSize.value = res.data.page_size
|
||||
}
|
||||
loading.value = false;
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error("获取数据失败");
|
||||
});
|
||||
};
|
||||
ElMessage.error('获取数据失败')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
@@ -253,8 +253,8 @@ const uploadImg = (file) => {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import "../../assets/css/admin/form.styl"
|
||||
@import "../../assets/css/main.styl"
|
||||
@use "../../assets/css/admin/form.scss" as *;
|
||||
@use "../../assets/css/main.scss" as *;
|
||||
.menu {
|
||||
|
||||
.handle-box {
|
||||
|
||||
@@ -843,8 +843,8 @@ const onUploadImg = (files, callback) => {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '../../assets/css/admin/form.styl'
|
||||
@import '../../assets/css/main.styl'
|
||||
@use '../../assets/css/admin/form.scss' as *;
|
||||
@use '../../assets/css/main.scss' as *;
|
||||
.system-config {
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
@@ -438,89 +438,114 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.app-container
|
||||
padding 20px
|
||||
<style lang="scss">
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
|
||||
.el-form-item
|
||||
margin-bottom 0
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header
|
||||
margin-bottom 20px
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2
|
||||
margin 0 0 8px 0
|
||||
color #303133
|
||||
h2 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
p
|
||||
margin 0
|
||||
color #606266
|
||||
font-size 14px
|
||||
p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-card
|
||||
margin-bottom 20px
|
||||
.filter-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stats-row
|
||||
margin-bottom 20px
|
||||
.stats-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card
|
||||
.stat-item
|
||||
text-align center
|
||||
padding 20px
|
||||
.stat-card {
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
|
||||
.stat-number
|
||||
font-size 28px
|
||||
font-weight bold
|
||||
color #303133
|
||||
margin-bottom 8px
|
||||
.stat-number {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.success
|
||||
color #67c23a
|
||||
&.success {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
&.warning
|
||||
color #e6a23c
|
||||
&.warning {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
&.danger
|
||||
color #f56c6c
|
||||
&.danger {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label
|
||||
font-size 14px
|
||||
color #909399
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-card
|
||||
.pagination-container
|
||||
margin-top 20px
|
||||
display flex
|
||||
justify-content center
|
||||
.table-card {
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content
|
||||
.detail-section
|
||||
margin-bottom 20px
|
||||
.detail-content {
|
||||
.detail-section {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4
|
||||
margin 0 0 10px 0
|
||||
color #303133
|
||||
font-size 16px
|
||||
h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.prompt-content
|
||||
background #f5f7fa
|
||||
padding 12px
|
||||
border-radius 4px
|
||||
color #606266
|
||||
line-height 1.6
|
||||
.prompt-content {
|
||||
background: #f5f7fa;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.params-content, .raw-data-content
|
||||
font-family monospace
|
||||
.params-content,
|
||||
.raw-data-content {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.result-content
|
||||
.result-item
|
||||
margin-bottom 10px
|
||||
display flex
|
||||
align-items center
|
||||
gap 10px
|
||||
.result-content {
|
||||
.result-item {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
label
|
||||
font-weight bold
|
||||
color #303133
|
||||
min-width 50px
|
||||
label {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -284,27 +284,27 @@ const resetConfig = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '../../../assets/css/admin/form.styl'
|
||||
@import '../../../assets/css/main.styl'
|
||||
<style lang="scss" scoped>
|
||||
@use '../../../assets/css/admin/form.scss' as *;
|
||||
@use '../../../assets/css/main.scss' as *;
|
||||
|
||||
.system-config {
|
||||
display flex
|
||||
justify-content center
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.container {
|
||||
width 100%
|
||||
max-width 800px
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.label-title {
|
||||
display flex
|
||||
align-items center
|
||||
gap 5px
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.el-input-number {
|
||||
width 100%
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -365,20 +365,20 @@ const showMessages = (row) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.chat-page {
|
||||
.handle-box {
|
||||
margin-bottom 20px
|
||||
margin-bottom: 20px;
|
||||
.handle-input {
|
||||
max-width 150px;
|
||||
margin-right 10px;
|
||||
max-width: 150px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.opt-box {
|
||||
padding-bottom: 10px;
|
||||
display flex;
|
||||
justify-content flex-end
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 5px;
|
||||
@@ -386,28 +386,29 @@ const showMessages = (row) => {
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top 20px
|
||||
display flex
|
||||
justify-content right
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.chat-detail {
|
||||
max-height 90vh
|
||||
overflow auto
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
overflow auto
|
||||
overflow: auto;
|
||||
|
||||
// 变量定义
|
||||
--content-font-size: 16px;
|
||||
--content-color: #c1c1c1;
|
||||
|
||||
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
max-height 90vh
|
||||
max-height: 90vh;
|
||||
|
||||
.chat-line {
|
||||
// 隐藏滚动条
|
||||
@@ -421,9 +422,7 @@ const showMessages = (row) => {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -370,11 +370,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { httpGet, httpPost } from '@/utils/http'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { dateFormat, substr } from '@/utils/libs'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
// 变量定义
|
||||
const data = ref({
|
||||
@@ -514,20 +514,20 @@ const showImage = (url) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.image-page {
|
||||
.handle-box {
|
||||
margin-bottom 20px
|
||||
margin-bottom: 20px;
|
||||
.handle-input {
|
||||
max-width 150px;
|
||||
margin-right 10px;
|
||||
max-width: 150px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.opt-box {
|
||||
padding-bottom: 10px;
|
||||
display flex;
|
||||
justify-content flex-end
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 5px;
|
||||
@@ -535,13 +535,13 @@ const showImage = (url) => {
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top 20px
|
||||
display flex
|
||||
justify-content center
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -391,20 +391,20 @@ const showLyric = (item) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.media-page {
|
||||
.handle-box {
|
||||
margin-bottom 20px
|
||||
margin-bottom: 20px;
|
||||
.handle-input {
|
||||
max-width 150px;
|
||||
margin-right 10px;
|
||||
max-width: 150px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.opt-box {
|
||||
padding-bottom: 10px;
|
||||
display flex;
|
||||
justify-content flex-end
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 5px;
|
||||
@@ -412,72 +412,71 @@ const showLyric = (item) => {
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top 20px
|
||||
display flex
|
||||
justify-content center
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
width 160px
|
||||
position relative
|
||||
width: 160px;
|
||||
position: relative;
|
||||
|
||||
.video{
|
||||
width 160px
|
||||
border-radius 5px
|
||||
.video {
|
||||
width: 160px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
width 160px
|
||||
height 90px
|
||||
border-radius 5px
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.duration {
|
||||
position absolute
|
||||
bottom 6px
|
||||
right 0
|
||||
background-color rgba(255, 255, 255,.7)
|
||||
padding 0 3px
|
||||
font-family 'Input Sans'
|
||||
font-size 14px
|
||||
font-weight 700
|
||||
border-radius .125rem
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
padding: 0 3px;
|
||||
font-family: 'Input Sans';
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
.play {
|
||||
position absolute
|
||||
width: 100%
|
||||
height 100%
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
border none
|
||||
border-radius 5px
|
||||
background rgba(100, 100, 100, 0.3)
|
||||
cursor pointer
|
||||
color #ffffff
|
||||
opacity 0
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: rgba(100, 100, 100, 0.3);
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0px);
|
||||
transition opacity 0.3s ease 0s
|
||||
transition: opacity 0.3s ease 0s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.play {
|
||||
opacity 1
|
||||
opacity: 1;
|
||||
//display block
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.music-player {
|
||||
position absolute
|
||||
bottom 20px
|
||||
z-index 99999
|
||||
width 100%
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
z-index: 99999;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user