c
复制代码
import React, { useState, useMemo } from 'react';
import {
useReactTable,
getCoreRowModel,
getFilteredRowModel,
getSortedRowModel,
flexRender,
} from '@tanstack/react-table';
import { Search, Download, ChevronUp, ChevronDown } from 'lucide-react';
const layerData = [
{ code: "0", element: "Default Layer", colour: "7", lineWeight: "0.25", lineType: "Continuous", category: "Default" },
{ code: "ADS010__", element: "Drawing sheet outline", colour: "135 (122)", lineWeight: "0.25 (0.35)", lineType: "Continuous", category: "010-019 Title and Frame" },
{ code: "ADS011__", element: "Logo inside frame", colour: "135 (253)", lineWeight: "0.25", lineType: "Continuous", category: "010-019 Title and Frame" },
{ code: "ADS0102T", element: "Text (2.00mm/2.50mm high) inside frame", colour: "41 (141)", lineWeight: "0.25", lineType: "Continuous", category: "010-019 Title and Frame" },
{ code: "ADS0103T", element: "Text (3.50mm high) inside frame", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "010-019 Title and Frame" },
{ code: "ADS0105T", element: "Text (5.00mm high) inside frame", colour: "50 (102)", lineWeight: "0.50", lineType: "Continuous", category: "010-019 Title and Frame" },
{ code: "ADS020__", element: "Grid line", colour: "251 (143)", lineWeight: "0.13 (0.18)", lineType: "Center", category: "020-029 Grid" },
{ code: "ADS020__", element: "Grid circle", colour: "8 (43)", lineWeight: "0.13 (0.18)", lineType: "Continuous", category: "020-029 Grid" },
{ code: "ADS020__", element: "Text (2.00mm/2.50mm high) inside grid circle", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "020-029 Grid" },
{ code: "ADS020__", element: "Text (3.50mm high) inside grid circle", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "020-029 Grid" },
{ code: "ADS020__", element: "Text (5.00mm high) inside grid circle", colour: "2 (61)", lineWeight: "0.50", lineType: "Continuous", category: "020-029 Grid" },
{ code: "ADS021__", element: "Grid line for steelwork details", colour: "123", lineWeight: "0.13", lineType: "Center", category: "020-029 Grid" },
{ code: "ADS022__", element: "Grid line for bolt hole", colour: "103", lineWeight: "0.13", lineType: "Center", category: "020-029 Grid" },
{ code: "ADS023__", element: "Longitude and latitude", colour: "153", lineWeight: "0.13", lineType: "Continuous", category: "020-029 Grid" },
{ code: "ADS030__", element: "Dimension and leader", colour: "83", lineWeight: "0.18", lineType: "Continuous", category: "030-039 Dimension" },
{ code: "ADS04011", element: "English text (2.00mm high)", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04012", element: "English text (2.50mm high)", colour: "61", lineWeight: "0.25", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04013", element: "English text (3.50mm high)", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04014", element: "English text (5.00mm high)", colour: "50", lineWeight: "0.50", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04015", element: "English text (7.00mm high)", colour: "32 (61)", lineWeight: "0.70", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04016", element: "English text (10.00mm high)", colour: "21", lineWeight: "1.00", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04017", element: "English text (20.00mm high)", colour: "62", lineWeight: "2.00", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04021", element: "Chinese text (3.00mm high)", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04022", element: "Chinese text (3.75mm high)", colour: "61", lineWeight: "0.25", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04023", element: "Chinese text (5.25mm high)", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04024", element: "Chinese text (7.50mm high)", colour: "50", lineWeight: "0.50", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04025", element: "Chinese text (10.00mm high)", colour: "32", lineWeight: "0.70", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04026", element: "Chinese text (15.00mm high)", colour: "21", lineWeight: "1.00", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS04027", element: "Chinese text (30.00mm high)", colour: "62", lineWeight: "2.00", lineType: "Continuous", category: "040-049 Text" },
{ code: "ADS050__", element: "Block and symbol insertion", colour: "15", lineWeight: "0.25", lineType: "Continuous", category: "050-059 General Symbol" },
{ code: "ADS0501_", element: "Drawing symbols in varies size (thin)", colour: "43", lineWeight: "0.18", lineType: "Continuous", category: "050-059 General Symbol" },
{ code: "ADS0502_", element: "Drawing symbols in varies size (medium)", colour: "243", lineWeight: "0.35", lineType: "Continuous", category: "050-059 General Symbol" },
{ code: "ADS0503_", element: "Drawing symbols in varies size (thick)", colour: "63", lineWeight: "0.50", lineType: "Continuous", category: "050-059 General Symbol" },
{ code: "ADS050_L", element: "Level mark", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "050-059 General Symbol" },
{ code: "ADS050_M", element: "Section, details, elevation marks", colour: "241 (243)", lineWeight: "0.35", lineType: "Continuous", category: "050-059 General Symbol" },
{ code: "ADS050_S", element: "Slab mark", colour: "41 (253)", lineWeight: "0.25", lineType: "Continuous", category: "050-059 General Symbol" },
{ code: "ADS060__", element: "Hatch", colour: "252", lineWeight: "0.18", lineType: "Continuous", category: "060-069 Hatching" },
{ code: "ADS070__", element: "Revision cloud", colour: "41 (43)", lineWeight: "0.25 (0.18)", lineType: "Continuous", category: "070-079 Revision" },
{ code: "ADS071__", element: "Revision mark", colour: "41 (253)", lineWeight: "0.25", lineType: "Continuous", category: "070-079 Revision" },
{ code: "ADS080__", element: "Construction line and red-lining (do not print)", colour: "10", lineWeight: "0.25", lineType: "Continuous", category: "080-089 Construction line" },
{ code: "ADS090_B", element: "Bold", colour: "63", lineWeight: "0.50", lineType: "Continuous", category: "090-099 Presentation" },
{ code: "ADS090_M", element: "Medium", colour: "243", lineWeight: "0.35", lineType: "Continuous", category: "090-099 Presentation" },
{ code: "ADS090_F", element: "Fine", colour: "41 (253)", lineWeight: "0.25", lineType: "Continuous", category: "090-099 Presentation" },
{ code: "ADS090_X", element: "Extra fine 1", colour: "43", lineWeight: "0.18", lineType: "Continuous", category: "090-099 Presentation" },
{ code: "ADS090_Y", element: "Extra fine 2", colour: "8", lineWeight: "0.13", lineType: "Continuous", category: "090-099 Presentation" },
{ code: "ADS090_U", element: "Extra bold 1", colour: "70", lineWeight: "0.70", lineType: "Continuous", category: "090-099 Presentation" },
{ code: "ADS090_V", element: "Extra bold 2", colour: "100", lineWeight: "1.00", lineType: "Continuous", category: "090-099 Presentation" },
{ code: "ADS090_W", element: "Extra bold 3", colour: "62 (200)", lineWeight: "2.00", lineType: "Continuous", category: "090-099 Presentation" },
{ code: "ADS110__", element: "Ground relief (Topography)", colour: "253", lineWeight: "0.13", lineType: "Continuous", category: "110-119 Site data" },
{ code: "ADS111__", element: "Instrumentation (e.g. Piezometer, settlement marker)", colour: "213", lineWeight: "0.25", lineType: "Continuous", category: "110-119 Site data" },
{ code: "ADS112__", element: "Ground sample (e.g. Borehole/trialpit)", colour: "191", lineWeight: "0.25", lineType: "Continuous", category: "110-119 Site data" },
{ code: "ADS113__", element: "Geological contour/isopach", colour: "94", lineWeight: "0.18", lineType: "Continuous", category: "110-119 Site data" },
{ code: "ADS120__", element: "Ground profiling (Longitudinal section/cross section)", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "120-129 Earthwork" },
{ code: "ADS160__", element: "Retaining wall", colour: "135", lineWeight: "0.25", lineType: "Continuous", category: "160-169 Retaining wall" },
{ code: "ADS161__", element: "Sheet pile wall", colour: "33", lineWeight: "0.25", lineType: "Continuous", category: "160-169 Retaining wall" },
{ code: "ADS162__", element: "Pipe pile wall", colour: "55", lineWeight: "0.25", lineType: "Continuous", category: "160-169 Retaining wall" },
{ code: "ADS163__", element: "Diaphragm wall", colour: "101", lineWeight: "0.25", lineType: "Continuous", category: "160-169 Retaining wall" },
{ code: "ADS170_C", element: "Pile Cap", colour: "142", lineWeight: "0.25", lineType: "Continuous", category: "170-179 Foundation" },
{ code: "ADS170_F", element: "Footing", colour: "142", lineWeight: "0.25", lineType: "Continuous", category: "170-179 Foundation" },
{ code: "ADS170_P", element: "Bored pile/mini-pile", colour: "20 (9)", lineWeight: "0.25", lineType: "Hidden", category: "170-179 Foundation" },
{ code: "ADS190__", element: "Soil back fill", colour: "140", lineWeight: "0.18", lineType: "Continuous", category: "190-199 Ground work" },
{ code: "ADS240__", element: "Staircase / ramp (Grouped)", colour: "120", lineWeight: "0.25", lineType: "Continuous", category: "240-249 Stair and Ramp" },
{ code: "ADS240_M", element: "Staircase / ramp direction", colour: "252", lineWeight: "0.18", lineType: "Continuous", category: "240-249 Stair and Ramp" },
{ code: "ADS280__", element: "Concrete outline", colour: "91 (9)", lineWeight: "0.25", lineType: "Continuous", category: "280-289 Building Frame" },
{ code: "ADS280_B", element: "Concrete horizontal member shown on plan", colour: "120", lineWeight: "0.25", lineType: "Hidden", category: "280-289 Building Frame" },
{ code: "ADS280_C", element: "Concrete vertical member shown on plan", colour: "42", lineWeight: "0.35", lineType: "Continuous", category: "280-289 Building Frame" },
{ code: "ADS280_H", element: "Concrete hidden outline", colour: "142", lineWeight: "0.25", lineType: "Hidden", category: "280-289 Building Frame" },
{ code: "ADS280_S", element: "Concrete sectional outline", colour: "221", lineWeight: "0.35", lineType: "Continuous", category: "280-289 Building Frame" },
{ code: "ADS291__", element: "Reinforcement", colour: "60", lineWeight: "0.50", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS291_T", element: "Reinforcement leader in 2mm high", colour: "161", lineWeight: "0.25 (0.18)", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS292__", element: "Steelwork outline", colour: "81", lineWeight: "0.35", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS292_B", element: "Steelwork horizontal member", colour: "133 (84)", lineWeight: "0.35", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS292_C", element: "Steelwork vertical member", colour: "51 (104)", lineWeight: "0.35", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS294__", element: "Steelwork details outline", colour: "101 (203)", lineWeight: "0.25", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS294_H", element: "Steelwork details hidden outline", colour: "151", lineWeight: "0.25", lineType: "Hidden", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS294_S", element: "Steelwork details sectional outline", colour: "210 (160)", lineWeight: "0.35", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS294_T", element: "Steelwork details leader in 2mm high", colour: "41 (44)", lineWeight: "0.25 (0.18)", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS2941_", element: "Steelwork details welding elevation", colour: "181", lineWeight: "0.35", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS2941S", element: "Steelwork details welding section", colour: "231 (240)", lineWeight: "0.35 (0.25)", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS2942_", element: "Steelwork details bolt", colour: "71 (163)", lineWeight: "0.25", lineType: "Continuous", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS2943_", element: "Steelwork details hole", colour: "80", lineWeight: "0.25", lineType: "Hidden", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS295__", element: "H-pile", colour: "142 (151)", lineWeight: "0.25", lineType: "Hidden", category: "290-299 Reinforcement and steelwork" },
{ code: "ADS520__", element: "Surface Channel", colour: "30", lineWeight: "0.25", lineType: "Continuous", category: "520-529 Waste Disposal, Drainage" },
{ code: "ADS530__", element: "Water supply pipe", colour: "42", lineWeight: "0.35", lineType: "Continuous", category: "530-539 Liquid Supply" },
{ code: "ADS531__", element: "Cold water supply pipe", colour: "90 (253)", lineWeight: "0.25", lineType: "ISO08W100", category: "530-539 Liquid Supply" },
{ code: "ADS532__", element: "Flushing water supply pipe", colour: "212", lineWeight: "0.25", lineType: "ISO09W100", category: "530-539 Liquid Supply" },
{ code: "ADS540__", element: "L.P./Town Gas supply", colour: "160 (243)", lineWeight: "0.35", lineType: "Dashdot2", category: "540-549 Gas Supply" },
{ code: "ADS610__", element: "Public main supply", colour: "181 (243)", lineWeight: "0.35", lineType: "Divide2", category: "610-619 Electricity Supply" },
{ code: "ADS6102T", element: "Voltage (2mm/2.5mm high)", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "610-619 Electricity Supply" },
{ code: "ADS6103T", element: "Voltage (3.5mm high)", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "610-619 Electricity Supply" },
{ code: "ADS630__", element: "Lighting", colour: "84 (243)", lineWeight: "0.35", lineType: "Center2", category: "630-639 Lighting" },
{ code: "ADS640__", element: "Telephone & intercom", colour: "122 (243)", lineWeight: "0.35", lineType: "Center2", category: "640-649 Communication" },
{ code: "ADS914__", element: "Site boundary", colour: "63", lineWeight: "0.50", lineType: "Center", category: "910-919 Boundary & Enclosure" },
{ code: "ADS916_F", element: "Fences/gate", colour: "243", lineWeight: "0.35", lineType: "Fenceline", category: "910-919 Boundary & Enclosure" },
{ code: "ADS916_H", element: "Hoarding", colour: "243 (253)", lineWeight: "0.35", lineType: "Phantom", category: "910-919 Boundary & Enclosure" },
{ code: "ADS910_T", element: "Turning point of site boundary", colour: "43", lineWeight: "0.18", lineType: "Continuous", category: "910-919 Boundary & Enclosure" },
{ code: "ADS920__", element: "Surface water drain", colour: "63", lineWeight: "0.50", lineType: "Phantom", category: "920-929 Surface Water Drainage" },
{ code: "ADS9202T", element: "Surface water drain size (2mm/2.5mm high)", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "920-929 Surface Water Drainage" },
{ code: "ADS9203T", element: "Surface water drain size (3.5mm high)", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "920-929 Surface Water Drainage" },
{ code: "ADS922__", element: "Surface channel", colour: "11 (253)", lineWeight: "0.25", lineType: "Continuous", category: "920-929 Surface Water Drainage" },
{ code: "ADS926__", element: "Surface water manhole, rain water gully", colour: "11 (253)", lineWeight: "0.25", lineType: "Continuous", category: "920-929 Surface Water Drainage" },
{ code: "ADS9222T", element: "Surface water manhole mark (2mm/2.5mm high)", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "920-929 Surface Water Drainage" },
{ code: "ADS9223T", element: "Surface water manhole mark (3.5mm high)", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "920-929 Surface Water Drainage" },
{ code: "ADS930__", element: "Sewage", colour: "63", lineWeight: "0.50", lineType: "Center", category: "930-939 Sewage" },
{ code: "ADS9302T", element: "Sewage size (2mm/2.5mm high)", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "930-939 Sewage" },
{ code: "ADS9303T", element: "Sewage size (3.5mm high)", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "930-939 Sewage" },
{ code: "ADS932__", element: "Foul water manhole, waste water gully", colour: "11 (253)", lineWeight: "0.25", lineType: "Continuous", category: "930-939 Sewage" },
{ code: "ADS9322T", element: "Foul water manhole mark (2mm/2.5mm high)", colour: "41", lineWeight: "0.25", lineType: "Continuous", category: "930-939 Sewage" },
{ code: "ADS9323T", element: "Foul water manhole mark (3.5mm high)", colour: "241", lineWeight: "0.35", lineType: "Continuous", category: "930-939 Sewage" },
{ code: "ADS970__", element: "Building outline", colour: "15", lineWeight: "0.25", lineType: "Continuous", category: "970-979 Structures in External Work" },
{ code: "ADS970_O", element: "Existing building", colour: "15 (43)", lineWeight: "0.25 (0.18)", lineType: "Continuous", category: "970-979 Structures in External Work" },
];
export default function LayerTable() {
const [globalFilter, setGlobalFilter] = useState('');
const [sorting, setSorting] = useState([]);
const [categoryFilter, setCategoryFilter] = useState('all');
const categories = useMemo(() => {
const cats = [...new Set(layerData.map(d => d.category))];
return ['all', ...cats.sort()];
}, []);
const filteredData = useMemo(() => {
if (categoryFilter === 'all') return layerData;
return layerData.filter(d => d.category === categoryFilter);
}, [categoryFilter]);
const columns = useMemo(() => [
{ accessorKey: 'code', header: '图层编号 (Code)', size: 120 },
{ accessorKey: 'element', header: '图层元素 (Element)', size: 280 },
{ accessorKey: 'colour', header: '颜色 (Colour)', size: 100 },
{ accessorKey: 'lineWeight', header: '线宽 (Line Weight)', size: 120 },
{ accessorKey: 'lineType', header: '线型 (Line Type)', size: 120 },
{ accessorKey: 'category', header: '分类 (Category)', size: 180 },
], []);
const table = useReactTable({
data: filteredData,
columns,
state: { globalFilter, sorting },
onGlobalFilterChange: setGlobalFilter,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
});
const downloadCSV = () => {
const headers = ['Code', 'Element', 'Colour', 'Line Weight', 'Line Type', 'Category'];
const csvContent = [
headers.join(','),
...layerData.map(row =>
[row.code, `"${row.element}"`, row.colour, row.lineWeight, row.lineType, `"${row.category}"`].join(',')
)
].join('\n');
const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'ASD_CAD_Layer_Coding_System.csv';
link.click();
};
return (
<div className="min-h-screen bg-gray-50 p-4">
<div className="max-w-7xl mx-auto">
<div className="bg-white rounded-lg shadow-lg p-6">
<h1 className="text-2xl font-bold text-gray-800 mb-2">
ASD CAD 图层编码系统表
</h1>
<p className="text-gray-600 mb-6">Structure Drawing Layer Coding System (2007)</p>
<div className="flex flex-col md:flex-row gap-4 mb-6">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
type="text"
placeholder="搜索图层编号或元素名称..."
value={globalFilter}
onChange={(e) => setGlobalFilter(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<select
value={categoryFilter}
onChange={(e) => setCategoryFilter(e.target.value)}
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
>
{categories.map(cat => (
<option key={cat} value={cat}>
{cat === 'all' ? '所有分类' : cat}
</option>
))}
</select>
<button
onClick={downloadCSV}
className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
>
<Download className="w-5 h-5" />
下载 CSV
</button>
</div>
<div className="text-sm text-gray-600 mb-4">
共 {table.getFilteredRowModel().rows.length} 条记录
</div>
<div className="overflow-x-auto border border-gray-200 rounded-lg">
<table className="w-full">
<thead className="bg-gray-100">
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th
key={header.id}
onClick={header.column.getToggleSortingHandler()}
className="px-4 py-3 text-left text-sm font-semibold text-gray-700 cursor-pointer hover:bg-gray-200 select-none"
>
<div className="flex items-center gap-2">
{flexRender(header.column.columnDef.header, header.getContext())}
{header.column.getIsSorted() === 'asc' && <ChevronUp className="w-4 h-4" />}
{header.column.getIsSorted() === 'desc' && <ChevronDown className="w-4 h-4" />}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row, idx) => (
<tr
key={row.id}
className={idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
>
{row.getVisibleCells().map(cell => (
<td key={cell.id} className="px-4 py-3 text-sm text-gray-700 border-t border-gray-100">
{cell.column.id === 'code' ? (
<code className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-mono">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</code>
) : (
flexRender(cell.column.columnDef.cell, cell.getContext())
)}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}
