mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-02 03:22:48 +08:00
dc116a1c77
- Articles API: list/detail/create/update/delete with source-based permission control - Attachments API: upload/list/delete with source-based permission control - ApiKeyInfo API: query current key permissions - Admin ApiKey management: generate/regenerate/toggle/permission settings with layui UI - Frontend API documentation page with complete interface reference
284 lines
11 KiB
HTML
284 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>API Key 管理</title>
|
||
{include file="common/_require"}
|
||
|
||
<script>
|
||
var currentHeaderNavItem = 'Admin';
|
||
var currentLeftNavItem = 'apikey';
|
||
</script>
|
||
</head>
|
||
|
||
<body class="layui-layout-body">
|
||
|
||
<div class="layui-layout layui-layout-admin">
|
||
{include file="common/_header"}
|
||
|
||
{include file="common/left_admin"}
|
||
|
||
<div class="layui-body">
|
||
|
||
<div style="padding:15px">
|
||
<div class="main-header">
|
||
<span class="layui-breadcrumb">
|
||
<a>首页</a>
|
||
<a><cite>API Key 管理</cite></a>
|
||
</span>
|
||
</div>
|
||
<div class="main-container">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">API Key 管理</div>
|
||
<div class="layui-card-body">
|
||
|
||
{empty name="api_key"}
|
||
<!-- 没有 Key 时显示生成按钮 -->
|
||
<div style="padding: 20px 0;">
|
||
<p style="margin-bottom: 15px;">您还没有 API Key，点击下方按钮生成一个。</p>
|
||
<div class="layui-form">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">名称</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" id="key-name" placeholder="可选，给 Key 起个名字" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn" id="btn-generate">生成 API Key</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{else /}
|
||
<!-- 有 Key 时显示信息和操作 -->
|
||
<div style="padding: 10px 0;">
|
||
<table class="layui-table" lay-skin="line">
|
||
<colgroup>
|
||
<col width="150">
|
||
<col>
|
||
</colgroup>
|
||
<tr>
|
||
<td>名称</td>
|
||
<td>{$api_key.name|default='-'}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Key</td>
|
||
<td style="font-family: monospace; letter-spacing: 1px;">{$api_key.api_key_preview}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>状态</td>
|
||
<td>
|
||
{if condition="$api_key.status == 1"}
|
||
<span class="layui-badge layui-bg-green">启用</span>
|
||
{else /}
|
||
<span class="layui-badge">禁用</span>
|
||
{/if}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>创建时间</td>
|
||
<td>{$api_key.create_time_text}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 权限设置区 -->
|
||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||
<legend>权限设置</legend>
|
||
</fieldset>
|
||
<div class="layui-form" lay-filter="permissionForm">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">管理自己的数据</label>
|
||
<div class="layui-input-block" style="padding-top: 8px;">
|
||
<span style="margin-right: 10px; color: #666;">创建/编辑 API 数据</span>
|
||
<input type="checkbox" name="can_write_own" lay-skin="switch" lay-text="开启|关闭"
|
||
lay-filter="can_write_own"
|
||
data-id="{$api_key.id}"
|
||
{if condition="$api_key.can_write_own == 1"}checked{/if}>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">管理后台数据</label>
|
||
<div class="layui-input-block" style="padding-top: 8px;">
|
||
<span style="margin-right: 10px; color: #666;">编辑后台创建的数据</span>
|
||
<input type="checkbox" name="can_write_other" lay-skin="switch" lay-text="开启|关闭"
|
||
lay-filter="can_write_other"
|
||
data-id="{$api_key.id}"
|
||
{if condition="$api_key.can_write_other == 1"}checked{/if}>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">删除权限</label>
|
||
<div class="layui-input-block" style="padding-top: 8px;">
|
||
<input type="radio" name="can_delete" value="0" title="不能删除"
|
||
lay-filter="can_delete"
|
||
data-id="{$api_key.id}"
|
||
{if condition="$api_key.can_delete == 0"}checked{/if}>
|
||
<input type="radio" name="can_delete" value="1" title="仅删除API数据"
|
||
lay-filter="can_delete"
|
||
data-id="{$api_key.id}"
|
||
{if condition="$api_key.can_delete == 1"}checked{/if}>
|
||
<input type="radio" name="can_delete" value="2" title="可删除所有"
|
||
lay-filter="can_delete"
|
||
data-id="{$api_key.id}"
|
||
{if condition="$api_key.can_delete == 2"}checked{/if}>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #e6e6e6;">
|
||
<button class="layui-btn layui-btn-warm" id="btn-regenerate" data-id="{$api_key.id}">重新生成 Key</button>
|
||
<button class="layui-btn layui-btn-danger" id="btn-toggle-status" data-id="{$api_key.id}">
|
||
{if condition="$api_key.status == 1"}禁用 Key{else /}启用 Key{/if}
|
||
</button>
|
||
</div>
|
||
{/empty}
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{include file="common/_footer"}
|
||
</div>
|
||
|
||
<script>
|
||
layui.use(['form', 'layer'], function () {
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
var $ = layui.$;
|
||
|
||
form.render();
|
||
|
||
// 生成新 Key
|
||
$('#btn-generate').click(function () {
|
||
var name = $('#key-name').val();
|
||
$.post('{:url("admin/ApiKey/generate")}', { name: name }, function (result) {
|
||
if (result.code === 0) {
|
||
layer.alert(
|
||
'<div style="padding: 15px;">' +
|
||
'<p style="color: #FF5722; font-weight: bold; margin-bottom: 10px;">请立即复制并妥善保管，此后无法再查看完整 Key！</p>' +
|
||
'<div style="background: #f2f2f2; padding: 10px; word-break: break-all; font-family: monospace; font-size: 14px; user-select: all;">' + result.data.api_key + '</div>' +
|
||
'</div>',
|
||
{
|
||
title: 'API Key 生成成功',
|
||
area: ['500px', 'auto'],
|
||
btn: ['我已复制']
|
||
},
|
||
function (index) {
|
||
layer.close(index);
|
||
location.reload();
|
||
}
|
||
);
|
||
} else {
|
||
layer.msg(result.msg || '操作失败');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 重新生成 Key
|
||
$('#btn-regenerate').click(function () {
|
||
var id = $(this).data('id');
|
||
layer.confirm('重新生成后旧 Key 将立即失效，确定继续？', function (confirmIndex) {
|
||
layer.close(confirmIndex);
|
||
$.post('{:url("admin/ApiKey/regenerate")}', { id: id }, function (result) {
|
||
if (result.code === 0) {
|
||
layer.alert(
|
||
'<div style="padding: 15px;">' +
|
||
'<p style="color: #FF5722; font-weight: bold; margin-bottom: 10px;">请立即复制并妥善保管，此后无法再查看完整 Key！</p>' +
|
||
'<div style="background: #f2f2f2; padding: 10px; word-break: break-all; font-family: monospace; font-size: 14px; user-select: all;">' + result.data.api_key + '</div>' +
|
||
'</div>',
|
||
{
|
||
title: 'API Key 已重新生成',
|
||
area: ['500px', 'auto'],
|
||
btn: ['我已复制']
|
||
},
|
||
function (index) {
|
||
layer.close(index);
|
||
location.reload();
|
||
}
|
||
);
|
||
} else {
|
||
layer.msg(result.msg || '操作失败');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// 启用/禁用
|
||
$('#btn-toggle-status').click(function () {
|
||
var id = $(this).data('id');
|
||
$.post('{:url("admin/ApiKey/toggle")}', { id: id }, function (result) {
|
||
if (result.code === 0) {
|
||
layer.msg(result.msg, { icon: 1 });
|
||
setTimeout(function () {
|
||
location.reload();
|
||
}, 800);
|
||
} else {
|
||
layer.msg(result.msg || '操作失败');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 写权限开关
|
||
form.on('switch(can_write_own)', function (data) {
|
||
var id = $(data.elem).data('id');
|
||
var value = data.elem.checked ? 1 : 0;
|
||
$.post('{:url("admin/ApiKey/toggleWrite")}', {
|
||
id: id,
|
||
field: 'can_write_own',
|
||
value: value
|
||
}, function (result) {
|
||
if (result.code === 0) {
|
||
layer.msg(result.msg, { icon: 1 });
|
||
} else {
|
||
layer.msg(result.msg || '操作失败');
|
||
location.reload();
|
||
}
|
||
});
|
||
});
|
||
|
||
form.on('switch(can_write_other)', function (data) {
|
||
var id = $(data.elem).data('id');
|
||
var value = data.elem.checked ? 1 : 0;
|
||
$.post('{:url("admin/ApiKey/toggleWrite")}', {
|
||
id: id,
|
||
field: 'can_write_other',
|
||
value: value
|
||
}, function (result) {
|
||
if (result.code === 0) {
|
||
layer.msg(result.msg, { icon: 1 });
|
||
} else {
|
||
layer.msg(result.msg || '操作失败');
|
||
location.reload();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 删除权限单选
|
||
form.on('radio(can_delete)', function (data) {
|
||
var id = $(data.elem).data('id');
|
||
$.post('{:url("admin/ApiKey/updateDelete")}', {
|
||
id: id,
|
||
value: data.value
|
||
}, function (result) {
|
||
if (result.code === 0) {
|
||
layer.msg(result.msg, { icon: 1 });
|
||
} else {
|
||
layer.msg(result.msg || '操作失败');
|
||
location.reload();
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|