Add click-to-lock row highlighting

Clicking a row locks an orange highlight (#fff7e6) across the whole row
including fixed columns; clicking the same row unlocks, clicking another
switches. Lock resets on search/clear. Highlight survives horizontal scroll
since rowClassName applies to all row fragments.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Misaka_Company
2026-06-18 09:46:25 +08:00
parent b893fd558a
commit f78918c3b0
2 changed files with 16 additions and 4 deletions

View File

@@ -6,3 +6,8 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
/* 行高亮:点击锁定的整行(覆盖 antd 单元格背景,含固定列) */
.ant-table-tbody > tr.row-locked > td {
background: #fff7e6 !important;
}

View File

@@ -31,13 +31,10 @@ import {
arrayMove,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { nextLockedRow, type DataRow } from "./table-filters";
const { Title, Text } = Typography;
interface DataRow {
[key: string]: string | number | null;
}
interface ColumnConfig {
key: string;
visible: boolean;
@@ -450,6 +447,7 @@ export default function Home() {
const [columnConfig, setColumnConfig] = useState<ColumnConfig[]>(loadConfig);
const [modalOpen, setModalOpen] = useState(false);
const [exporting, setExporting] = useState(false);
const [lockedRowKey, setLockedRowKey] = useState<string | null>(null);
// Persist config
useEffect(() => {
@@ -471,6 +469,7 @@ export default function Home() {
setColumns(json.columns);
setData(json.data);
setSearched(true);
setLockedRowKey(null);
} catch {
setError("网络请求失败");
} finally {
@@ -483,6 +482,7 @@ export default function Home() {
setColumns([]);
setSearched(false);
setError(null);
setLockedRowKey(null);
}, []);
const handleExport = useCallback(async () => {
@@ -582,6 +582,13 @@ export default function Home() {
columns={tableColumns}
dataSource={data}
rowKey="ID"
onRow={(record) => ({
onClick: () =>
setLockedRowKey((prev) => nextLockedRow(prev, String(record.ID))),
})}
rowClassName={(record) =>
String(record.ID) === lockedRowKey ? "row-locked" : ""
}
bordered
size="small"
pagination={false}