应用管理平台 - 创建、管理和监控您的应用
<template>
<!-- 左边的部分 -->
<el-space wrap class='left'>
<el-aside width='200px'>
<el-affix :offset='1'>
<Left></Left>
</el-affix>
</el-aside>
</el-space>
<!-- 右边的盒子 -->
<div class='common-layout'>
<el-container>
<el-header class='head'>
<div class='icon'></div>
<div style='margin-top: 10px; margin-left: 15px;width: 400px;'>操作说明</div>
<div class='waring-icon'>
<i class='fas fa-exclamation-triangle'></i>
<span style='font-size: 15px;'>您可通过应用的 API Key和 Secret Key获取Access_token来调用服务;为了您的服务安全,请妥善保存和定期更新Secret
Key。</span>
</div>
<div>
<el-link type='primary'>查看鉴权认证机制</el-link>
</div>
</el-header>
<!-- 右边下边的部分 -->
<el-main class='foot'>
<div class='icon'></div>
<div style='margin-top: 10px; margin-left: 15px;width: 400px;'>应用信息</div>
<pre><code> <!-- 创建应用 -->
<el-button type='primary' @click='createDialogVisible = true'
style='margin-top: 20px; margin-left: 10px; width: 120px;'>创建应用</el-button>
<el-dialog v-model='createDialogVisible' title='创建应用' style='font-weight: bold; width: 650px;'>
<el-form :model='form'>
<el-form-item label='应用名称' :label-width='formLabelWidth'>
<el-input v-model='form.name' autocomplete='off' placeholder='请输入应用名称' />
</el-form-item>
<el-form-item label='应用log' :label-width='formLabelWidth' style='margin-top:20px'>
<el-upload class='upload-demo' action='/your-upload-url' :auto-upload='false' multiple :limit='1'
accept='.png'>
<el-button slot='trigger' type='primary'>点击上传</el-button>
</el-upload>
</el-form-item>
<div class='logfoot'> 支持文件格式: png,单个文件不能超过500KB推荐分辨率为200px*60px </div>
</el-form>
<template #footer>
<span class='dialog-footer'>
<el-button type='primary' @click='createDialogVisible = false'>
创建
</el-button>
</span>
</template>
</el-dialog>
<!-- 修改密码 -->
<el-button type='primary' @click='changePasswordDialogVisible = true'
style='margin-top: 20px; margin-left: 40px; width: 120px;'>修改密码</el-button>
<el-dialog v-model='changePasswordDialogVisible' title='修改密码'
style='font-weight: bold; width: 550px; height: 300px;'>
<el-form :model='form'>
<el-form-item label='输入新密码' :label-width='formLabelWidth'>
<el-input v-model='form.name' autocomplete='off' placeholder='请输入新密码' />
</el-form-item>
<el-form-item label='重复输入密码' :label-width='formLabelWidth' style='margin-top:20px'>
<el-input v-model='form.name' autocomplete='off' placeholder='请确认密码' />
</el-form-item>
<div class='passfoot'> 由于您的密码被重置，请修改密码后重新登录！ </div> <br> <br><el-divider />
</el-form>
<template #footer>
<span class='dialog-footer'>
<el-button type='primary' @click='changePasswordDialogVisible = false' style='margin-top: -80px;'>
确定
</el-button>
</span>
</template>
</el-dialog>
<!-- 日志查询 -->
<el-dialog v-model='getdDialogVisible' title='日志查询' style='font-weight: bold; width: 1050px;'>
<hr style='margin-top: -15px;'>
<div style='float: left;'>
<el-input v-model='form.name' autocomplete='off' placeholder='请选择接口'
style='margin-left: 20px; width: 180px; height: 30px; margin-top:25px;' />
<el-input v-model='form.name' autocomplete='off' placeholder='请选择状态'
style='margin-left: 20px; width: 180px; height: 30px; margin-top: 25px;' />
</div>
<div class='block'>
<span class='demonstration'></span>
<el-date-picker v-model='value1' type='datetimerange' range-separator='To' start-placeholder='请输入起始日期和时间'
end-placeholder='请输入结束日期和时间' />
<el-button type='primary' style='width: 100px; margin-top: -50px; margin-left: 450px;'>查询</el-button>
</div>
<div class='interface_document' v-for='i in LoginterfaceDocument'>
<div class='item' v-for='detail in i.interfaces'>
<div v-for='tableData in detail.contains'>
<div class='item_table'>
<el-table :data='tableData.Header' border style='width: 860px; margin-left: 20px;margin-top: 30px;'>
<el-table-column prop='number' label='编号' width='90' />
<el-table-column prop='infernce' label='接口' width='170' />
<el-table-column prop='update' label='调用是否成功' width='190' />
<el-table-column prop='date' label='调用时间' width='200' />
<el-table-column prop='upaction' label='操作'>
<a href='' class='custom-link'> 查看详情</a>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<el-pagination background :total='50' :show-total='false' class='page' />
</el-dialog>
<!-- 查看应用详情页面-->
<el-dialog v-model='ViewDetailsdDialogVisible' title='应用信息'
style='font-weight: bold; width: 550px; height: 580px;'>
<el-form :model='form' label-position='left' style='margin-left: 20px;'>
<el-form-item label='应用名称' :label-width='formLabelWidth'>
<el-input v-model='input' disabled placeholder='123' />
</el-form-item>
<el-form-item label='APPID' :label-width='formLabelWidth' style='margin-top:20px'>
<el-input v-model='input' disabled placeholder='a123' />
</el-form-item>
<el-form-item label='APPKEY' :label-width='formLabelWidth'>
<el-input v-model='input' disabled placeholder='sddd' />
</el-form-item>
<el-form-item label='SECRETKEY' :label-width='formLabelWidth'>
<el-input v-model='input' disabled placeholder='asd*****' style='width: 130px;' />
<el-button type='primary' style='margin-left: 20px;'> 重新生成 </el-button>
<span class='Tkey'>SECRETKEY生成一次后则无法查看,请重新生成!</span>
</el-form-item>
<el-form-item label='LOG' :label-width='formLabelWidth'>
<div class='demo-image__preview'>
<el-image style='width: 180px; height: 100px' :src='url' :zoom-rate='1.2' :initial-index='4'
fit='cover' />
</div>
<el-upload class='upload-demo' action='/your-upload-url' :auto-upload='false' multiple :limit='1'
accept='.png'>
<el-button slot='trigger' text style='font-size: 16px;'>
<div class='log'></div> 点击上传
</el-button>
</el-upload>
</el-form-item>
<span class='Viewfoot'>支持文件格式:png,单个文件不能超过500kb,推荐分辨率为200px*60px</span>
</el-form>
<el-divider />
<template #footer>
<span class='dialog-footer'>
<el-button type='primary' @click='ViewDetailsdDialogVisible = false'>
确定
</el-button>
</span>
</template>
</el-dialog>
<div class='interface_document' v-for='i in interfaceDocument'>
<div class='item' v-for='detail in i.interfaces'>
<div v-for='tableData in detail.contains'>
<div class='item_table'>
<el-table :data='tableData.Header' border style='width: 980px; margin-left: 20px;margin-top: 30px;'>
<el-table-column prop='id' label='序号' width='60' />
<el-table-column prop='name' label='应用名称' width='100' />
<el-table-column prop='appID' label='APPID' width='100' />
<el-table-column prop='appkey' label='APPKEY' width='100' />
<el-table-column prop='secretkey' label='Secret Key' width='100' />
<el-table-column prop='date' label='创建时间' width='200' />
<el-table-column prop='state' label='状态' width='150' />
<template v-slot:item='{ row }'>
<p v-if='row.state === '已发布''></p>
<p v-else-if='row.state === '未发布''></p>
</template>
<el-table-column prop='action' label='操作'>
<a href='#' class='transparent-link' >取消发布</a>
<div class='flex justify-space-between mb-4 flex-wrap gap-4'>
<el-button @click='open' class='transparent-delete' v-for='button in buttons' :key='button.text'
:type='button.type' link>{{ button.text
}}</el-button>
</div>
<a href='#' class='transparent-link' @click='getdDialogVisible = true'>查看日志</a>
<a href='#' class='transparent-link'>查看主页</a>
<a href='#' class='transparent-link' @click='ViewDetailsdDialogVisible = true'>查看详情</a>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</el-main>
</el-container>
</code></pre>
</div>
</template>
<script lang='ts' setup>
// 引入侧边栏
// eslint-disable-next-line @typescript-eslint/quotes
import Left from '../console/Left.vue'
// 引入弹出框的页面
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const url =
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const open = () => {
ElMessageBox.confirm(
'此操作将永久删除该项目, 是否继续?',
'信息提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(() => {
ElMessage({
type: 'success',
message: '删除成功'
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消成功'
})
})
}
const buttons = [
{ type: 'primary', text: '删除应用' }
] as const
const input = ref('')
const createDialogVisible = ref(false)
const changePasswordDialogVisible = ref(false)
const getdDialogVisible = ref(false)
const ViewDetailsdDialogVisible = ref(false)
const formLabelWidth = '120px'
const form = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
})
const value1 = ref<[Date, Date]>([
new Date(2000, 10, 10, 10, 10),
new Date(2000, 10, 11, 10, 10)
])
// 接口文档数据
const interfaceDocument = [
{
interfaces: [
{
contains: [
{
Header: [
{
id: '1',
name: 'testapp',
appID: '1254256',
appkey: 'VBCfs..',
secretkey: 'asdvdfdfg',
date: '2023年9月13日 14:33:16',
state: '已发布'
},
{
id: '2',
name: 'testapp2',
appID: '1254256',
appkey: 'VBCfs..',
secretkey: 'asdvdfdfg',
date: '2023年9月13日 14:33:16',
state: '未发布'
},
{
id: '3',
name: 'testapp3',
appID: '1254256',
appkey: 'VBCfs..',
secretkey: 'asdvdfdfg',
date: '2023年9月13日 14:33:16',
state: '未发布'
}]
}
]
}
]
}
]
// 日志查询数据
const LoginterfaceDocument = [
{
interfaces: [
{
contains: [
{
Header: [
{
number: '1',
infernce: '/addInformation',
update: '成功',
date: '2023年9月20日 13:59:08..'
},
{
number: '2',
infernce: '/addInformation',
update: '失败',
date: '2023年9月20日 13:59:08..'
}
]
}
]
}
]
}
]
</script>
<style >
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
.el-button--text {
margin-right: 15px;
margin-top: 15px
}
.el-input {
width: 240px;
height: 30px
}
.dialog-footer button:first-child {
margin-right: 10px;
margin-top: -50px;
}
.logfoot {
margin-left: 120px;
margin-top: -15px
}
.passfoot {
float: right;
margin-top: 20px;
color: #b88230;
font-size: 14px;
}
.waring-icon {
display: flex;
align-items: center;
margin-top: 30px;
margin-left: 5px;
}
.block {
margin-left: 420px;
height: 50px;
margin-top: 25px;
width: 450px;
}
.custom-link {
text-decoration: underline;
color: #60a5fa;
margin-left: 5px;
}
i {
color: red;
margin-right: 5px;
}
.head {
background-color: white;
margin-top: 15px;
margin-left: 10px;
height: 180px;
}
.foot {
background-color: white;
margin-top: 15px;
margin-left: 10px;
height: 600px;
}
.icon {
height: 20px;
width: 5px;
margin-top: 12px;
background-color: #60a5fa;
float: left;
}
.el-link {
text-decoration: underline !important;
margin-left: 30px;
margin-top: 20px;
}
.common-layout {
/* margin-left: 260px; */
/* float: left; */
display: flex;
width: 100%;
}
.item_table .el-table__header th {
color: black;
}
.page {
margin-top: 40px;
/* margin-left: 260px; */
}
.Tkey {
color: #b88230;
margin-top: 12px;
font-size: small;
margin-left: -80px;
}
.Viewfoot {
font-size: smaller;
}
.transparent-link {
margin-left: 15px;
text-decoration: underline;
color: #60a5fa;
}
a:hover {
color: #60a5fa;
font-weight: bold;
/* 字体加粗 */
}
.transparent-delete {
float: left;
margin-top: -20px;
margin-left: 80px;
text-decoration: underline;
}
.log {
height: 8px;
width: 7px;
border: 1px solid;
margin-right: 6px;
}
.demo-image__error .image-slot {
font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
font-size: 30px;
}
.demo-image__error .el-image {
width: 100%;
height: 200px;
}
/* 流动布局 */
.left {
width: 200px;
float: left;
}
.common-layout {
margin-left: 220px;
width: calc(100% - 220px);
}
/* 同比例放大 */
.common-layout, .left, .head, .foot, .interface_document, .item, .item_table, .el-table, .el-table-column, .el-button, .el-input, .el-form-item, .el-link, .el-dialog, .el-pagination {
box-sizing: border-box;
width: auto;
height: auto;
font-size: 1rem;
}
.common-layout * {
font-size: inherit;
}
.common-layout, .left, .head, .foot {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.item_table, .el-table {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.el-table-column {
width: auto;
}
.el-table-column:last-child {
width: auto;
flex: 1;
}
.el-button, .el-input, .el-form-item, .el-link {
width: auto;
height: auto;
}
.el-dialog {
width: auto;
height: auto;
}
.el-pagination {
width: auto;
}
@media (min-width: 768px) {
.common-layout {
margin-left: 260px;
width: calc(100% - 260px);
}
.left {
width: 260px;
}
}
</styl
原文地址: https://www.cveoy.top/t/topic/pbIV 著作权归作者所有。请勿转载和采集!