From ecea9d3215b2c9d23378bb17a8efaa8ccc358a40 Mon Sep 17 00:00:00 2001 From: Emil Zhai Date: Wed, 7 Dec 2022 14:17:49 +0000 Subject: [PATCH] feat: independent logs page css for better compatible for 3rd party admin --- page/routes/logs/index.css | 150 +++++++++++++++++++++++++++++++++++-- page/routes/logs/index.js | 52 +++++++++---- page/routes/logs/index.php | 56 +++++++------- 3 files changed, 209 insertions(+), 49 deletions(-) diff --git a/page/routes/logs/index.css b/page/routes/logs/index.css index f7d76a4..be5696b 100644 --- a/page/routes/logs/index.css +++ b/page/routes/logs/index.css @@ -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; diff --git a/page/routes/logs/index.js b/page/routes/logs/index.js index e413981..0e2d8ff 100644 --- a/page/routes/logs/index.js +++ b/page/routes/logs/index.js @@ -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 = $('', { id: item.id, 'data-id': item.id }); // id - $td = $(''); + $td = $('', { style: 'text-align: center' }); $td.append($('', { 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.append($('', { + 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.append($('', { 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.append($('', { + 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.append($('', { + 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('
暂无数据
'); + $tbody.html('
暂无数据
'); } + $('.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")); } diff --git a/page/routes/logs/index.php b/page/routes/logs/index.php index 434214b..935dc9b 100644 --- a/page/routes/logs/index.php +++ b/page/routes/logs/index.php @@ -6,24 +6,23 @@ -
+
-
- -
- -
    -
    • +
      +
- -
- +
+
@@ -84,7 +83,12 @@ - + @@ -95,36 +99,32 @@ - +
+ +
loading
loading
-
- -
- -
    -
    • +
      +
-
+
+
    / loading
    -