feat: 添加卡片布局控制功能，支持动态调整每行卡片数量
This commit is contained in:
@@ -332,6 +332,18 @@
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 100px;
|
||||
height: 32px;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.per-page-select:hover {
|
||||
border-color: var(--border-dark);
|
||||
}
|
||||
|
||||
.per-page-select:focus {
|
||||
@@ -340,6 +352,60 @@
|
||||
box-shadow: 0 0 0 2px var(--accent-100);
|
||||
}
|
||||
|
||||
/* 卡片布局控制 */
|
||||
.cards-layout-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cards-per-row-select {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-medium);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 14px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 80px;
|
||||
height: 32px;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.cards-per-row-select:hover {
|
||||
border-color: var(--border-dark);
|
||||
}
|
||||
|
||||
.cards-per-row-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-500);
|
||||
box-shadow: 0 0 0 2px var(--accent-100);
|
||||
}
|
||||
|
||||
/* 黑暗模式下的select样式 */
|
||||
[data-theme="dark"] .cards-per-row-select,
|
||||
[data-theme="dark"] .per-page-select {
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-dark);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cards-per-row-select:hover,
|
||||
[data-theme="dark"] .per-page-select:hover {
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cards-per-row-select:focus,
|
||||
[data-theme="dark"] .per-page-select:focus {
|
||||
border-color: var(--accent-500);
|
||||
box-shadow: 0 0 0 2px var(--accent-900);
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.content-main {
|
||||
flex: 1;
|
||||
@@ -430,9 +496,30 @@
|
||||
/* 卡片视图 */
|
||||
.data-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 动态列数样式 */
|
||||
.data-cards[data-columns="1"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.data-cards[data-columns="2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.data-cards[data-columns="3"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.data-cards[data-columns="4"] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.data-cards[data-columns="6"] {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
.data-card {
|
||||
@@ -519,8 +606,15 @@
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.data-cards {
|
||||
.data-cards[data-columns="1"],
|
||||
.data-cards[data-columns="2"],
|
||||
.data-cards[data-columns="3"],
|
||||
.data-cards[data-columns="4"],
|
||||
.data-cards[data-columns="6"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.data-cards {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -531,6 +625,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-tools {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.view-controls,
|
||||
.export-dropdown,
|
||||
.cards-layout-controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.export-button,
|
||||
.cards-per-row-select {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-tools {
|
||||
flex-direction: column;
|
||||
|
||||
@@ -295,6 +295,12 @@ class AppState {
|
||||
|
||||
// 切换数据展示方式
|
||||
this.switchDataDisplay(mode);
|
||||
|
||||
// 显示/隐藏卡片布局控制
|
||||
const cardsLayoutControls = document.getElementById('cardsLayoutControls');
|
||||
if (cardsLayoutControls) {
|
||||
cardsLayoutControls.style.display = mode === 'cards' ? 'flex' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
switchDataDisplay(mode) {
|
||||
@@ -404,6 +410,15 @@ class AppState {
|
||||
window.location.href = `/?${params.toString()}`;
|
||||
}
|
||||
|
||||
// 卡片布局控制
|
||||
changeCardsPerRow(columns) {
|
||||
const cardsContainer = document.querySelector('.data-cards');
|
||||
if (cardsContainer) {
|
||||
cardsContainer.setAttribute('data-columns', columns);
|
||||
localStorage.setItem('cardsPerRow', columns);
|
||||
}
|
||||
}
|
||||
|
||||
// 键盘快捷键
|
||||
setupKeyboardShortcuts() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
@@ -613,6 +628,15 @@ class AppState {
|
||||
perPageSelect.value = savedPerPage;
|
||||
}
|
||||
}
|
||||
|
||||
// 恢复卡片布局设置
|
||||
const savedCardsPerRow = localStorage.getItem('cardsPerRow') || '2';
|
||||
this.changeCardsPerRow(savedCardsPerRow);
|
||||
|
||||
const cardsPerRowSelect = document.querySelector('.cards-per-row-select');
|
||||
if (cardsPerRowSelect) {
|
||||
cardsPerRowSelect.value = savedCardsPerRow;
|
||||
}
|
||||
}
|
||||
|
||||
openSettings() {
|
||||
@@ -647,6 +671,7 @@ window.setViewMode = (mode) => app.setViewMode(mode);
|
||||
window.toggleExportMenu = () => app.toggleExportMenu();
|
||||
window.exportData = (format) => app.exportData(format);
|
||||
window.changePerPage = (perPage) => app.changePerPage(perPage);
|
||||
window.changeCardsPerRow = (columns) => app.changeCardsPerRow(columns);
|
||||
window.showDetail = (id) => app.showDetail(id);
|
||||
window.closeModal = () => app.closeModal();
|
||||
window.openSettings = () => app.openSettings();
|
||||
|
||||
@@ -169,6 +169,19 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 卡片布局控制 -->
|
||||
<div class="cards-layout-controls" id="cardsLayoutControls" style="display: none;">
|
||||
<select class="cards-per-row-select"
|
||||
onchange="changeCardsPerRow(this.value)"
|
||||
aria-label="每行卡片数量">
|
||||
<option value="1">1 列</option>
|
||||
<option value="2" selected>2 列</option>
|
||||
<option value="3">3 列</option>
|
||||
<option value="4">4 列</option>
|
||||
<option value="6">6 列</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 导出功能 -->
|
||||
<div class="export-dropdown">
|
||||
<button class="export-button"
|
||||
@@ -267,7 +280,7 @@
|
||||
|
||||
<!-- 卡片视图 -->
|
||||
<div class="data-cards-container" style="display: none;">
|
||||
<div class="data-cards">
|
||||
<div class="data-cards" data-columns="2">
|
||||
{{range $row := .Data}}
|
||||
<div class="data-card">
|
||||
<div class="data-card-title">
|
||||
|
||||
Reference in New Issue
Block a user