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

View File

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