mirror of
https://github.com/kokororin/typecho-plugin-Access.git
synced 2025-03-28 13:00:10 +08:00
feat: independent logs page css for better compatible for 3rd party admin
This commit is contained in:
Emil Zhai
parent
6f38b45178
commit
ecea9d3215
@ -2,16 +2,71 @@ a[data-action="search-anchor"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.typecho-access-logs-btn { border: none; background-color: #E9E9E6; cursor: pointer; border-radius: 2px; display: inline-block; padding: 0 12px; height: 32px; color: #666; vertical-align: middle; zoom: 1; }
|
||||
.typecho-access-logs-btn:focus { outline:0; }
|
||||
.typecho-access-logs-btn:hover { transition-duration: .4s; background-color: #dbdbd6; }
|
||||
.typecho-access-logs-btn:active { background-color: #d6d6d0; }
|
||||
.typecho-access-logs-btn:disabled { background-color: #f7f7f6; cursor: default; }
|
||||
.typecho-access-logs-btn:disabled { color: #999; }
|
||||
.typecho-access-logs-btn--xs { padding: 0 10px; height: 25px; font-size: 13px; }
|
||||
.typecho-access-logs-btn--s { height: 28px; font-size: 14px; }
|
||||
.typecho-access-logs-btn--l { height: 40px; font-size: 1.14286em; font-weight: bold; }
|
||||
.typecho-access-logs-btn--primary { border: none; background-color: #467B96; cursor: pointer; border-radius: 2px; color: #FFF; }
|
||||
.typecho-access-logs-btn--primary:hover { transition-duration: .4s; background-color: #3c6a81; }
|
||||
.typecho-access-logs-btn--primary:active, .typecho-access-logs-btn--primary.typecho-access-logs-btn--active { background-color: #39647a; }
|
||||
.typecho-access-logs-btn--primary:disabled { background-color: #508cab; cursor: default; }
|
||||
.typecho-access-logs-btn--warn { border: none; background-color: #B94A48; cursor: pointer; border-radius: 2px; color: #FFF; }
|
||||
.typecho-access-logs-btn--warn:hover { transition-duration: .4s; background-color: #a4403f; }
|
||||
.typecho-access-logs-btn--warn:active, .typecho-access-logs-btn--warn.typecho-access-logs-btn--active { background-color: #9c3e3c; }
|
||||
.typecho-access-logs-btn--warn:disabled { background-color: #c1605e; cursor: default; }
|
||||
|
||||
.typecho-access-logs-main {
|
||||
margin: 10px 0;
|
||||
padding: 20px 0;
|
||||
color: #000000;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.typecho-access-logs-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
padding: 5px 28px;
|
||||
}
|
||||
|
||||
.typecho-access-logs-controls__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typecho-access-logs-controls__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typecho-access-logs-select-all {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.typecho-access-logs-search {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.typecho-access-logs-search > *:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.typecho-access-logs-dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.typecho-access-logs-dropdown-toggle {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.typecho-access-logs-dropdown-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -19,7 +74,7 @@ a[data-action="search-anchor"] {
|
||||
|
||||
.typecho-access-logs-dropdown-btn__icon {
|
||||
transition: all ease-in-out .3s;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
@ -31,33 +86,34 @@ a[data-action="search-anchor"] {
|
||||
transform: translateY(20%);
|
||||
}
|
||||
|
||||
.active > .dropdown-toggle + .typecho-access-logs-dropdown-btn__icon {
|
||||
.typecho-access-logs-dropdown--active > .typecho-access-logs-dropdown-toggle > .typecho-access-logs-dropdown-btn__icon {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
.typecho-access-logs-dropdown {
|
||||
.typecho-access-logs-dropdown-content {
|
||||
position: absolute;
|
||||
margin-top: 1px;
|
||||
min-width: 73px;
|
||||
border: none;
|
||||
padding: 0 !important;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
list-style-type: none;
|
||||
pointer-events: none;
|
||||
transition: opacity ease-out .3s !important;
|
||||
}
|
||||
|
||||
.typecho-access-logs-dropdown > li {
|
||||
.typecho-access-logs-dropdown-content > li {
|
||||
background: #e9e9e6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.typecho-access-logs-dropdown > li > button {
|
||||
padding: 5px 10px;
|
||||
.typecho-access-logs-dropdown-content > li > button {
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.active > .dropdown-toggle + .typecho-access-logs-dropdown {
|
||||
.typecho-access-logs-dropdown--active > .typecho-access-logs-dropdown-toggle + .typecho-access-logs-dropdown-content {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
@ -86,6 +142,7 @@ a[data-action="search-anchor"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.typecho-access-logs-filter-item > :first-child,
|
||||
.typecho-access-logs-filter-item__label {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
@ -94,6 +151,7 @@ a[data-action="search-anchor"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typecho-access-logs-filter-item > :last-child,
|
||||
.typecho-access-logs-filter-item__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -124,6 +182,48 @@ select.typecho-access-logs-filter-item__content {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.typecho-access-logs-table-wrap {
|
||||
padding: 20px 30px;
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.typecho-access-logs-list-table-title {
|
||||
margin: 20px 0;
|
||||
opacity: .7;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.typecho-access-logs-list-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.typecho-access-logs-list-table th {
|
||||
padding: 10px;
|
||||
border-bottom: 2px solid #f0f0ec;
|
||||
text-align: left;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.typecho-access-logs-list-table td {
|
||||
padding: 10px;
|
||||
border-top: 1px solid #efefeb;
|
||||
word-break: break-all;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.typecho-access-logs-list-table-select-all {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.typecho-access-logs-table-placeholder {
|
||||
font-size: 18px;
|
||||
color: #cccccc;
|
||||
@ -131,6 +231,40 @@ select.typecho-access-logs-filter-item__content {
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.typecho-access-logs-list-checkbox {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.typecho-access-logs-pagination {
|
||||
list-style: none;
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.typecho-access-logs-pagination li {
|
||||
display: inline-block;
|
||||
margin: 0 3px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.typecho-access-logs-pagination li.current a {
|
||||
background: #E9E9E6;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.typecho-access-logs-pagination a {
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.typecho-access-logs-pagination-jump {
|
||||
float: right;
|
||||
display: flex;
|
||||
|
||||
@ -40,7 +40,7 @@ $(document).ready(function () {
|
||||
function fetchLogs(silent) {
|
||||
var startTime = new Date().valueOf();
|
||||
if (!silent) {
|
||||
$('.typecho-list')
|
||||
$('.typecho-access-logs-main')
|
||||
.loadingModal({ text: '正在获取数据...', backgroundColor: '#292d33' })
|
||||
.loadingModal(
|
||||
'animation',
|
||||
@ -70,31 +70,32 @@ $(document).ready(function () {
|
||||
var minDuring = 300;
|
||||
var during = new Date().valueOf() - startTime;
|
||||
if (during < minDuring) {
|
||||
setTimeout(function() { $('.typecho-list').loadingModal('hide'); }, minDuring - during);
|
||||
setTimeout(function() { $('.typecho-access-logs-main').loadingModal('hide'); }, minDuring - during);
|
||||
} else {
|
||||
$('.typecho-list').loadingModal('hide');
|
||||
$('.typecho-access-logs-main').loadingModal('hide');
|
||||
}
|
||||
}
|
||||
if (res.code === 0) {
|
||||
// logs list
|
||||
var $tbody, $tr, $td;
|
||||
$tbody = $('.typecho-list-table tbody');
|
||||
$tbody = $('.typecho-access-logs-list-table tbody');
|
||||
$tbody.html('');
|
||||
$.each(res.data.logs, function(index, item) {
|
||||
$tr = $('<tr />', { id: item.id, 'data-id': item.id });
|
||||
// id
|
||||
$td = $('<td />');
|
||||
$td = $('<td />', { style: 'text-align: center' });
|
||||
$td.append($('<input />', {
|
||||
type: 'checkbox',
|
||||
value: item.id,
|
||||
name: 'id[]',
|
||||
class: 'form-check-input',
|
||||
class: 'typecho-access-logs-list-checkbox form-check-input',
|
||||
'data-id': item.id,
|
||||
}));
|
||||
$tr.append($td);
|
||||
// url
|
||||
$td = $('<td />');
|
||||
$td.append($('<a />', {
|
||||
class: '',
|
||||
'data-action': 'search-anchor',
|
||||
'data-filter': JSON.stringify({ path: item.path }),
|
||||
}).text(item.url.replace(/%23/u, '#')));
|
||||
@ -103,6 +104,7 @@ $(document).ready(function () {
|
||||
$td = $('<td />');
|
||||
$td.append($('<a />', {
|
||||
title: item.ua,
|
||||
class: '',
|
||||
'data-action': 'search-anchor',
|
||||
'data-filter': JSON.stringify({ ua: item.ua }),
|
||||
}).text(item.display_name));
|
||||
@ -110,6 +112,7 @@ $(document).ready(function () {
|
||||
// ip
|
||||
$td = $('<td />');
|
||||
$td.append($('<a />', {
|
||||
class: '',
|
||||
'data-action': 'search-anchor',
|
||||
'data-filter': JSON.stringify({ ip: item.ip }),
|
||||
}).text(item.ip));
|
||||
@ -121,6 +124,7 @@ $(document).ready(function () {
|
||||
// referer
|
||||
$td = $('<td />');
|
||||
$td.append($('<a />', {
|
||||
class: '',
|
||||
'data-action': 'search-anchor',
|
||||
'data-filter': JSON.stringify({ referer: item.referer }),
|
||||
}).text(item.referer));
|
||||
@ -133,14 +137,16 @@ $(document).ready(function () {
|
||||
$tbody.append($tr);
|
||||
});
|
||||
if ($tbody.html() === '') {
|
||||
$tbody.html('<tr><td colspan="7"><h6 class="typecho-list-table-title typecho-access-logs-table-placeholder">暂无数据</h6></td></tr>');
|
||||
$tbody.html('<tr><td colspan="7"><h6 class="typecho-access-logs-list-table-title typecho-access-logs-table-placeholder">暂无数据</h6></td></tr>');
|
||||
}
|
||||
$('.typecho-access-logs-list-checkbox').change(updateSelectAll);
|
||||
$('a[data-action="search-anchor"]').click(onSearchAnchorClick);
|
||||
updateSelectAll();
|
||||
|
||||
// logs pagination
|
||||
setPageNum(res.data.pagination.current);
|
||||
var $pagination;
|
||||
$pagination = $('.typecho-pager');
|
||||
$pagination = $('.typecho-access-logs-pagination');
|
||||
$pagination.html('');
|
||||
|
||||
var startPage, stopPage;
|
||||
@ -199,7 +205,7 @@ $(document).ready(function () {
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
if (!silent) {
|
||||
$('.typecho-list').loadingModal('hide');
|
||||
$('.typecho-access-logs-main').loadingModal('hide');
|
||||
}
|
||||
swal({
|
||||
icon: "error",
|
||||
@ -210,6 +216,17 @@ $(document).ready(function () {
|
||||
});
|
||||
}
|
||||
|
||||
function updateSelectAll() {
|
||||
var checked = true;
|
||||
$('.typecho-access-logs-list-checkbox').each(function(_, el) {
|
||||
checked = checked && $(el).prop('checked');
|
||||
});
|
||||
if ($('.typecho-access-logs-list-table-select-all').prop('checked') == checked) {
|
||||
return;
|
||||
}
|
||||
$('.typecho-access-logs-list-table-select-all').prop('checked', checked);
|
||||
}
|
||||
|
||||
function onSearchAnchorClick(e) {
|
||||
setPageNum(1);
|
||||
setFilters(JSON.parse(e.target.getAttribute('data-filter')));
|
||||
@ -273,6 +290,12 @@ $(document).ready(function () {
|
||||
setFilters(filters);
|
||||
});
|
||||
|
||||
$('.typecho-access-logs-list-table-select-all').click(function() {
|
||||
$(this).parent().parent().parent().parent().parent()
|
||||
.find('input[name="id[]"]')
|
||||
.prop('checked', $(this).prop('checked'));
|
||||
});
|
||||
|
||||
$('input[name="page-jump"]').on('keypress', function(e) {
|
||||
if (e.which == 13) {
|
||||
setPageNum(e.target.value);
|
||||
@ -326,7 +349,7 @@ $(document).ready(function () {
|
||||
});
|
||||
if (filters.ids) {
|
||||
$.each(JSON.parse(filters.ids), function (index, elem) {
|
||||
$('.typecho-list-table tbody tr[data-id="' + elem + '"]')
|
||||
$('.typecho-access-logs-list-table tbody tr[data-id="' + elem + '"]')
|
||||
.fadeOut(500)
|
||||
.remove();
|
||||
});
|
||||
@ -356,13 +379,16 @@ $(document).ready(function () {
|
||||
action(false);
|
||||
}
|
||||
|
||||
$('.typecho-access-logs-dropdown-btn').click(function() {
|
||||
$(this).next().css({ display: '', 'min-width': $(this).parent().width() + 'px' });
|
||||
$('.typecho-access-logs-dropdown-toggle').click(function() {
|
||||
$(this).parent().toggleClass('typecho-access-logs-dropdown--active');
|
||||
$(this).next().css({ 'min-width': $(this).parent().width() + 'px' });
|
||||
})
|
||||
|
||||
$('[data-action="select-delete"]').click(function () {
|
||||
$('.typecho-access-logs-dropdown')
|
||||
.removeClass('typecho-access-logs-dropdown--active');
|
||||
var ids = [];
|
||||
$('.typecho-list-table input[type="checkbox"]').each(function (index, elem) {
|
||||
$('.typecho-access-logs-list-checkbox').each(function (index, elem) {
|
||||
if (elem.checked) {
|
||||
ids.push($(elem).data("id"));
|
||||
}
|
||||
|
||||
@ -6,24 +6,23 @@
|
||||
<link rel="stylesheet" href="<?php $options->pluginUrl('Access/page/routes/logs/index.css')?>">
|
||||
<script defer src="<?php $options->pluginUrl('Access/page/routes/logs/index.js')?>"></script>
|
||||
|
||||
<div class="col-mb-12 typecho-list">
|
||||
<div class="bento-col-mb-12 typecho-access-logs-main">
|
||||
<div class="typecho-access-logs-controls">
|
||||
<div class="operate">
|
||||
<label><i class="sr-only"><?php _e('全选'); ?></i><input type="checkbox" class="typecho-table-select-all" /></label>
|
||||
<div class="btn-group btn-drop">
|
||||
<button class="btn dropdown-toggle btn-s typecho-access-logs-dropdown-btn" type="button">
|
||||
<div class="typecho-access-logs-controls__left">
|
||||
<div class="typecho-access-logs-dropdown">
|
||||
<button class="typecho-access-logs-btn typecho-access-logs-btn-s typecho-access-logs-dropdown-toggle" type="button">
|
||||
<span><?php _e('选中项'); ?></span>
|
||||
<div class="typecho-access-logs-dropdown-btn__icon"><i class="i-caret-down"></i></div>
|
||||
</button>
|
||||
<ul class="dropdown-menu typecho-access-logs-dropdown">
|
||||
<li><button class="btn-warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
|
||||
<ul class="typecho-access-logs-dropdown-content">
|
||||
<li><button class="typecho-access-logs-btn typecho-access-logs-btn--s typecho-access-logs-btn--warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search typecho-access-logs-search" role="search">
|
||||
<button data-action="filter-apply" type="button" class="btn btn-s"><?php _e('刷 新'); ?></button>
|
||||
<button data-action="switch-filter" type="button" class="btn btn-s"><?php _e('筛 选'); ?></button>
|
||||
<div class="typecho-access-logs-controls__right typecho-access-logs-search" role="search">
|
||||
<button data-action="filter-apply" type="button" class="typecho-access-logs-btn typecho-access-logs-btn--s"><?php _e('刷 新'); ?></button>
|
||||
<button data-action="switch-filter" type="button" class="typecho-access-logs-btn typecho-access-logs-btn--s"><?php _e('筛 选'); ?></button>
|
||||
<div class="typecho-access-logs-filter">
|
||||
<div class="typecho-access-logs-filter-item">
|
||||
<label class="typecho-access-logs-filter-item__label">匹配方式</label>
|
||||
@ -60,19 +59,19 @@
|
||||
</div>
|
||||
<div class="typecho-access-logs-filter-apply">
|
||||
<div>
|
||||
<button class="btn btn-m btn-warn typecho-access-logs-filter-apply__btn" data-action="filter-delete" type="button"><?php _e('批量删除'); ?></button>
|
||||
<button class="typecho-access-logs-btn typecho-access-logs-btn--m typecho-access-logs-btn--warn typecho-access-logs-filter-apply__btn" data-action="filter-delete" type="button"><?php _e('批量删除'); ?></button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-m typecho-access-logs-filter-apply__btn" data-action="filter-reset" type="button"><?php _e('重 置'); ?></button>
|
||||
<button class="btn btn-m primary typecho-access-logs-filter-apply__btn" data-action="filter-apply" type="button"><?php _e('应 用'); ?></button>
|
||||
<button class="typecho-access-logs-btn typecho-access-logs-btn--m typecho-access-logs-filter-apply__btn" data-action="filter-reset" type="button"><?php _e('重 置'); ?></button>
|
||||
<button class="typecho-access-logs-btn typecho-access-logs-btn--m typecho-access-logs-btn--primary typecho-access-logs-filter-apply__btn" data-action="filter-apply" type="button"><?php _e('应 用'); ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="typecho-table-wrap">
|
||||
<table class="typecho-list-table">
|
||||
<div class="typecho-access-logs-table-wrap">
|
||||
<table class="typecho-access-logs-list-table">
|
||||
<colgroup>
|
||||
<col width="5%"/>
|
||||
<col width="28%"/>
|
||||
@ -84,7 +83,12 @@
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th style="text-align: center">
|
||||
<label class="typecho-access-logs-select-all">
|
||||
<i class="sr-only"><?php _e('全选'); ?></i>
|
||||
<input type="checkbox" class="typecho-access-logs-list-table-select-all form-check-input" />
|
||||
</label>
|
||||
</th>
|
||||
<th><?php _e('受访地址'); ?></th>
|
||||
<th><?php _e('UA'); ?></th>
|
||||
<th><?php _e('IP地址'); ?></th>
|
||||
@ -95,36 +99,32 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="7"><h6 class="typecho-list-table-title">loading</h6></td>
|
||||
<td colspan="7"><h6 class="typecho-access-logs-list-table-title">loading</h6></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="typecho-access-logs-controls">
|
||||
<div class="operate">
|
||||
<label>
|
||||
<i class="sr-only"><?php _e('全选'); ?></i>
|
||||
<input type="checkbox" class="typecho-table-select-all" />
|
||||
</label>
|
||||
<div class="btn-group btn-drop">
|
||||
<button class="btn dropdown-toggle btn-s typecho-access-logs-dropdown-btn" type="button">
|
||||
<div class="typecho-access-logs-controls__left">
|
||||
<div class="typecho-access-logs-dropdown">
|
||||
<button class="typecho-access-logs-btn typecho-access-logs-btn-s typecho-access-logs-dropdown-toggle" type="button">
|
||||
<span><?php _e('选中项'); ?></span>
|
||||
<div class="typecho-access-logs-dropdown-btn__icon"><i class="i-caret-down"></i></div>
|
||||
</button>
|
||||
<ul class="dropdown-menu typecho-access-logs-dropdown">
|
||||
<li><button class="btn-warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
|
||||
<ul class="typecho-access-logs-dropdown-content">
|
||||
<li><button class="typecho-access-logs-btn typecho-access-logs-btn--s typecho-access-logs-btn--warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="typecho-access-logs-controls__right">
|
||||
<ul class="typecho-access-logs-pagination"></ul>
|
||||
<div class="typecho-access-logs-pagination-jump">
|
||||
<input class="text-s typecho-access-logs-pagination-jump__number" type="text" name="page-jump" autocomplete="off" />
|
||||
<span class="typecho-access-logs-pagination-jump__text">/</span>
|
||||
<span class="typecho-access-logs-pagination-jump__total">loading</span>
|
||||
</div>
|
||||
<ul class="typecho-pager"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user