fix: dark mode selected row background and batch toolbar layout

- Override Ant Design default selected row background in dark mode with theme color
- Restructure batch action toolbar with nested flex containers for better spacing and wrapping
- Bump version to v1.7.3.2
This commit is contained in:
root 2026-04-26 17:40:08 +08:00
parent 8566ccf752
commit 47b734ef2d
8 changed files with 52 additions and 14 deletions

2
.gitignore vendored
View file

@ -49,6 +49,8 @@ docker-compose.override.yml
# Ignore AI agent instructions # Ignore AI agent instructions
AGENTS.md AGENTS.md
.codex
.github/copilot-instructions.md
# Ignore backup files # Ignore backup files
*.bak *.bak

View file

@ -1 +1 @@
v1.7.3.1 v1.7.3.2

View file

@ -0,0 +1,34 @@
# Task Record
Date: 2026-04-26
Related Module: web (CSS + HTML template)
Change Type: Fix
## Background
The multi-select feature (added in `2026-04-26-batch-edit-clients.md`) had two visual issues:
1. In dark mode, selected table rows showed the Ant Design default light background (`#e6f7ff`), making text unreadable against the dark theme.
2. The batch operation toolbar was too crowded with all 7 elements (selected count + 6 buttons) packed in one row without wrapping.
## Changes
1. **CSS** (`web/assets/css/custom.min.css`): Added dark mode override `.dark .ant-table-row-selected>td{background-color:rgba(0,135,113,.15)!important}` using the primary theme color at low opacity for selected rows in dark mode. Also applied to the public fingerprinted copy.
2. **HTML** (`web/html/inbounds.html`:587-600): Restructured the batch toolbar layout:
- Changed to a two-group flexbox with `justify-content: space-between`
- Left group: selected count (`<strong>`) + action buttons (Batch Edit, Enable, Disabled, Reset Traffic, Delete) with `flexWrap: wrap`
- Right group: Deselect All button
- Added `flexWrap: wrap` on both containers for responsive wrapping
- Reduced gap from 8px to 6px
## Impact
- CSS: Only affects dark mode table row selection styling; no impact on light mode
- HTML: Batch toolbar DIV now uses nested flex containers; functionality unchanged
- No API/DB/config changes
- Public assets regenerated via `go run ./cmd/genassets`
## Verification
- `go run ./cmd/genassets` — regenerated public assets successfully
- `CGO_ENABLED=1 go build ./...` — build succeeded
- `gofmt -l -w . && go vet ./...` — no issues
## Risks And Follow-Up
- Dark mode selected row background may need further tuning based on user feedback
- On very narrow screens the batch toolbar may still wrap to multiple lines, which is expected and handled by flex-wrap

File diff suppressed because one or more lines are too long

View file

@ -584,8 +584,9 @@
</a-popover> </a-popover>
</template> </template>
<template slot="expandedRowRender" slot-scope="record"> <template slot="expandedRowRender" slot-scope="record">
<div v-if="clientSelection[record.id] && clientSelection[record.id].length > 0 && record.isMultiUser()" :style="{ marginBottom: '8px', display: 'flex', gap: '8px', alignItems: 'center' }"> <div v-if="clientSelection[record.id] && clientSelection[record.id].length > 0 && record.isMultiUser()" :style="{ marginBottom: '8px', display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center', justifyContent: 'space-between' }">
<span :style="{ marginInlineEnd: '8px' }">[[ clientSelection[record.id].length ]] {{ i18n "selected" }}</span> <div :style="{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }">
<strong>[[ clientSelection[record.id].length ]] {{ i18n "selected" }}</strong>
<a-button size="small" type="primary" @click="openBatchEditClient(record.id)">{{ i18n "pages.client.batchEdit" }}</a-button> <a-button size="small" type="primary" @click="openBatchEditClient(record.id)">{{ i18n "pages.client.batchEdit" }}</a-button>
<a-button size="small" @click="batchEnableClient(record.id, true)">{{ i18n "enable" }}</a-button> <a-button size="small" @click="batchEnableClient(record.id, true)">{{ i18n "enable" }}</a-button>
<a-button size="small" @click="batchEnableClient(record.id, false)">{{ i18n "disabled" }}</a-button> <a-button size="small" @click="batchEnableClient(record.id, false)">{{ i18n "disabled" }}</a-button>
@ -594,6 +595,7 @@
<a-icon slot="icon" type="question-circle-o" :style="{ color: '#e04141' }"></a-icon> <a-icon slot="icon" type="question-circle-o" :style="{ color: '#e04141' }"></a-icon>
<a-button size="small" type="danger">{{ i18n "delete" }}</a-button> <a-button size="small" type="danger">{{ i18n "delete" }}</a-button>
</a-popconfirm> </a-popconfirm>
</div>
<a-button size="small" @click="clearClientSelection(record.id)">{{ i18n "pages.client.batchDeselect" }}</a-button> <a-button size="small" @click="clearClientSelection(record.id)">{{ i18n "pages.client.batchDeselect" }}</a-button>
</div> </div>
<a-table :row-key="client => getClientRowKey(record.protocol, client)" :columns="isMobile ? innerMobileColumns : innerColumns" <a-table :row-key="client => getClientRowKey(record.protocol, client)" :columns="isMobile ? innerMobileColumns : innerColumns"

View file

@ -20,7 +20,7 @@
"codemirror/lint/lint.js": "codemirror/lint/lint.8d16a6b4.js", "codemirror/lint/lint.js": "codemirror/lint/lint.8d16a6b4.js",
"codemirror/xq.min.css": "codemirror/xq.min.18b37ea8.css", "codemirror/xq.min.css": "codemirror/xq.min.18b37ea8.css",
"codemirror/yaml.js": "codemirror/yaml.7f87153b.js", "codemirror/yaml.js": "codemirror/yaml.7f87153b.js",
"css/custom.min.css": "css/custom.min.7a7540cc.css", "css/custom.min.css": "css/custom.min.64138d46.css",
"js/axios-init.js": "js/axios-init.5d82a152.js", "js/axios-init.js": "js/axios-init.5d82a152.js",
"js/model/dbinbound.js": "js/model/dbinbound.2232a7d6.js", "js/model/dbinbound.js": "js/model/dbinbound.2232a7d6.js",
"js/model/inbound.js": "js/model/inbound.afa36664.js", "js/model/inbound.js": "js/model/inbound.afa36664.js",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long