我现在提供给你数据集表格的内容 <div>
{JSON.stringify(datasetFiles)}
<div className={css.tableContainer}>
<table className={css.fileTable}>
<thead>
<tr>
<th>
<div className={css.tableHeader}>
<span>文件名</span>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="svg 14" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<g id="ic_sort_lined">
<g id="编组">
<rect id="矩形" width="16.000000" height="16.000000" x="0.000000" y="0.000000" opacity="0" fill="rgb(216,216,216)" />
<path id="形状结合" d="M10.1915 13.4739L10.1054 13.3942L7.98477 11.2728C7.78954 11.0776 7.78959 10.761 7.98488 10.5657C8.16242 10.3883 8.4402 10.3722 8.63592 10.5174L8.69199 10.5659L10.6661 12.5405L10.6662 2.66675C10.6662 2.39061 10.8901 2.16675 11.1662 2.16675C11.4194 2.16675 11.6286 2.35485 11.6617 2.5989L11.6662 2.66675L11.6661 12.5405L13.6415 10.5658C13.8368 10.3705 14.1533 10.3705 14.3486 10.5658C14.5261 10.7433 14.5422 11.0211 14.397 11.2168L14.3486 11.2729L12.2273 13.3942C11.9349 13.6866 11.552 13.8331 11.1688 13.8337L11.169 13.8334C10.8206 13.8342 10.4722 13.7143 10.1915 13.4739Z" fill="rgb(102,102,102)" fill-rule="evenodd" />
<path id="形状结合" d="M5.80838 2.52578L5.89449 2.60551L8.01516 4.72684C8.21039 4.92213 8.21034 5.23872 8.01505 5.43395C7.83751 5.61143 7.55973 5.62752 7.36401 5.48226L7.30794 5.43384L5.33288 3.45802L5.33302 13.3329C5.33302 13.6091 5.10916 13.8329 4.83302 13.8329C4.57989 13.8329 4.37069 13.6448 4.33758 13.4008L4.33302 13.3329L4.33288 3.45868L2.35844 5.43389C2.16317 5.62915 1.84659 5.62915 1.65133 5.43389C1.47382 5.25638 1.45768 4.9786 1.60292 4.78286L1.65133 4.72678L3.77266 2.60545C4.06466 2.31345 4.44706 2.16697 4.82977 2.16602L4.82963 2.16628C5.17843 2.16515 5.52734 2.28507 5.80838 2.52578Z" fill="rgb(102,102,102)" fill-rule="evenodd" />
</g>
</g>
</svg>
</div>
</th>
<th>
<div className={css.tableHeader}>
<span>大小</span>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="svg 14" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<g id="ic_sort_lined">
<g id="编组">
<rect id="矩形" width="16.000000" height="16.000000" x="0.000000" y="0.000000" opacity="0" fill="rgb(216,216,216)" />
<path id="形状结合" d="M10.1915 13.4739L10.1054 13.3942L7.98477 11.2728C7.78954 11.0776 7.78959 10.761 7.98488 10.5657C8.16242 10.3883 8.4402 10.3722 8.63592 10.5174L8.69199 10.5659L10.6661 12.5405L10.6662 2.66675C10.6662 2.39061 10.8901 2.16675 11.1662 2.16675C11.4194 2.16675 11.6286 2.35485 11.6617 2.5989L11.6662 2.66675L11.6661 12.5405L13.6415 10.5658C13.8368 10.3705 14.1533 10.3705 14.3486 10.5658C14.5261 10.7433 14.5422 11.0211 14.397 11.2168L14.3486 11.2729L12.2273 13.3942C11.9349 13.6866 11.552 13.8331 11.1688 13.8337L11.169 13.8334C10.8206 13.8342 10.4722 13.7143 10.1915 13.4739Z" fill="rgb(0,65,211)" fill-rule="evenodd" />
<path id="形状结合" d="M5.80838 2.52578L5.89449 2.60551L8.01516 4.72684C8.21039 4.92213 8.21034 5.23872 8.01505 5.43395C7.83751 5.61143 7.55973 5.62752 7.36401 5.48226L7.30794 5.43384L5.33288 3.45802L5.33302 13.3329C5.33302 13.6091 5.10916 13.8329 4.83302 13.8329C4.57989 13.8329 4.37069 13.6448 4.33758 13.4008L4.33302 13.3329L4.33288 3.45868L2.35844 5.43389C2.16317 5.62915 1.84659 5.62915 1.65133 5.43389C1.47382 5.25638 1.45768 4.9786 1.60292 4.78286L1.65133 4.72678L3.77266 2.60545C4.06466 2.31345 4.44706 2.16697 4.82977 2.16602L4.82963 2.16628C5.17843 2.16515 5.52734 2.28507 5.80838 2.52578Z" fill="rgb(102,102,102)" fill-rule="evenodd" />
</g>
</g>
</svg>
</div>
</th>
<th>
<div className={css.tableHeader}>
<span>
更新时间
</span>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="svg 14" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<g id="ic_sort_lined">
<g id="编组">
<rect id="矩形" width="16.000000" height="16.000000" x="0.000000" y="0.000000" opacity="0" fill="rgb(216,216,216)" />
<path id="形状结合" d="M10.1915 13.4739L10.1054 13.3942L7.98477 11.2728C7.78954 11.0776 7.78959 10.761 7.98488 10.5657C8.16242 10.3883 8.4402 10.3722 8.63592 10.5174L8.69199 10.5659L10.6661 12.5405L10.6662 2.66675C10.6662 2.39061 10.8901 2.16675 11.1662 2.16675C11.4194 2.16675 11.6286 2.35485 11.6617 2.5989L11.6662 2.66675L11.6661 12.5405L13.6415 10.5658C13.8368 10.3705 14.1533 10.3705 14.3486 10.5658C14.5261 10.7433 14.5422 11.0211 14.397 11.2168L14.3486 11.2729L12.2273 13.3942C11.9349 13.6866 11.552 13.8331 11.1688 13.8337L11.169 13.8334C10.8206 13.8342 10.4722 13.7143 10.1915 13.4739Z" fill="rgb(102,102,102)" fill-rule="evenodd" />
<path id="形状结合" d="M5.80838 2.52578L5.89449 2.60551L8.01516 4.72684C8.21039 4.92213 8.21034 5.23872 8.01505 5.43395C7.83751 5.61143 7.55973 5.62752 7.36401 5.48226L7.30794 5.43384L5.33288 3.45802L5.33302 13.3329C5.33302 13.6091 5.10916 13.8329 4.83302 13.8329C4.57989 13.8329 4.37069 13.6448 4.33758 13.4008L4.33302 13.3329L4.33288 3.45868L2.35844 5.43389C2.16317 5.62915 1.84659 5.62915 1.65133 5.43389C1.47382 5.25638 1.45768 4.9786 1.60292 4.78286L1.65133 4.72678L3.77266 2.60545C4.06466 2.31345 4.44706 2.16697 4.82977 2.16602L4.82963 2.16628C5.17843 2.16515 5.52734 2.28507 5.80838 2.52578Z" fill="rgb(0,65,211)" fill-rule="evenodd" />
</g>
</g>
</svg>
</div>
</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{/* 静态写入 10 条数据 */}
{[
{ name: 'WanJuan-Russuan-summary.文件夹', size: '245 KB', updated: '2025-03-20 14:23', children: [] },
{ name: 'md5sum.txt.data', size: '890 KB', updated: '2025-03-19 10:12' },
{ name: 'part-007119-4fcc55974848741777782747416465415698494119944116111111161111194cc5597484874cc5597484874cc5597484874cc5597484874cc5597484874.jso...', size: '1.2 MB', updated: '2025-03-18 16:45' },
{ name: 'example_train_11.jsonl', size: '15 KB', updated: '2025-03-18 09:30' },
{ name: 'WanJuan-Russian-summary.json', size: '4.7 MB', updated: '2025-03-17 17:00' },
{ name: 'example_train_11.jsonl', size: '3.1 MB', updated: '2025-03-12 20:08' },
{ name: 'part-000000-28feace1.jsonl.tar.gz', size: '320 KB', updated: '2025-03-16 11:05' },
{ name: 'md5sum.txt', size: '180 KB', updated: '2025-03-15 15:40' },
{ name: 'example_train_11.jsonl', size: '650 KB', updated: '2025-03-14 13:22' },
{ name: 'md5sum.txt', size: '8 KB', updated: '2025-03-13 09:15' },
].map((file, index) => (
<tr key={index}>
<td>
<div className={css.filenameContainer}>
<div className={css.fileNameIcon}>
{
file.children ? (<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<defs>
<filter id="pixso_custom_mask_type_alpha">
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0 " />
</filter>
</defs>
<mask id="mask_0" width="24.000000" height="24.000000" x="0.000000" y="0.000000" maskUnits="userSpaceOnUse">
<g filter="url(#pixso_custom_mask_type_alpha)">
<rect id="矩形 672619" width="24.000000" height="24.000000" x="0.000000" y="0.000000" fill="rgb(196,196,196)" />
</g>
</mask>
<g id="蒙版" mask="url(#mask_0)">
<g id="组合 3803">
<path id="矢量 3" d="M19.7143 5.28589C19.7987 5.28589 19.8823 5.29412 19.9651 5.31059C20.0479 5.32706 20.1283 5.35145 20.2063 5.38376C20.2843 5.41606 20.3584 5.45567 20.4286 5.50257C20.4988 5.54947 20.5637 5.60277 20.6234 5.66247C20.6831 5.72216 20.7364 5.7871 20.7833 5.8573C20.8302 5.92749 20.8698 6.00159 20.9021 6.07958C20.9344 6.15758 20.9588 6.23797 20.9753 6.32077C20.9918 6.40357 21 6.48718 21 6.5716L21 9.14303C21 9.22745 20.9918 9.31106 20.9753 9.39386C20.9588 9.47666 20.9344 9.55706 20.9021 9.63505C20.8698 9.71305 20.8302 9.78714 20.7833 9.85734C20.7364 9.92753 20.6831 9.99247 20.6234 10.0522C20.5637 10.1119 20.4988 10.1652 20.4286 10.2121C20.3584 10.259 20.2843 10.2986 20.2063 10.3309C20.1283 10.3632 20.0479 10.3876 19.9651 10.404C19.8823 10.4205 19.7987 10.4287 19.7143 10.4287L4.28571 10.4287C4.20129 10.4287 4.11768 10.4205 4.03488 10.404C3.95208 10.3876 3.87169 10.3632 3.79369 10.3309C3.7157 10.2986 3.6416 10.259 3.57141 10.2121C3.50122 10.1652 3.43627 10.1119 3.37658 10.0522C3.31688 9.99247 3.26358 9.92753 3.21668 9.85734C3.16978 9.78714 3.13018 9.71305 3.09787 9.63505C3.06556 9.55706 3.04117 9.47666 3.0247 9.39386C3.00823 9.31106 3 9.22745 3 9.14303L3 6.5716C3 6.48718 3.00823 6.40357 3.0247 6.32077C3.04117 6.23797 3.06556 6.15758 3.09787 6.07958C3.13018 6.00159 3.16978 5.92749 3.21668 5.8573C3.26358 5.7871 3.31688 5.72216 3.37658 5.66247C3.43627 5.60277 3.50122 5.54947 3.57141 5.50257C3.6416 5.45567 3.7157 5.41606 3.79369 5.38376C3.87169 5.35145 3.95208 5.32706 4.03488 5.31059C4.11768 5.29412 4.20129 5.28589 4.28571 5.28589L19.7143 5.28589Z" fill="rgb(219,152,0)" fill-rule="nonzero" />
<path id="矢量 4" d="M18.4286 6.5708C18.513 6.5708 18.5966 6.57904 18.6794 6.59551C18.7622 6.61198 18.8426 6.63636 18.9206 6.66867C18.9986 6.70098 19.0727 6.74058 19.1429 6.78748C19.2131 6.83438 19.278 6.88768 19.3377 6.94738C19.3974 7.00707 19.4507 7.07202 19.4976 7.14221C19.5445 7.2124 19.5841 7.2865 19.6164 7.36449C19.6487 7.44249 19.6731 7.52289 19.6896 7.60568C19.7061 7.68848 19.7143 7.77209 19.7143 7.85651L19.7143 10.4279C19.7143 10.5124 19.7061 10.596 19.6896 10.6788C19.6731 10.7616 19.6487 10.842 19.6164 10.92C19.5841 10.998 19.5445 11.0721 19.4976 11.1422C19.4507 11.2124 19.3974 11.2774 19.3377 11.3371C19.278 11.3968 19.2131 11.4501 19.1429 11.497C19.0727 11.5439 18.9986 11.5835 18.9206 11.6158C18.8426 11.6481 18.7622 11.6725 18.6794 11.689C18.5966 11.7054 18.513 11.7137 18.4286 11.7137L4.28571 11.7137C4.20129 11.7137 4.11768 11.7054 4.03488 11.689C3.95208 11.6725 3.87169 11.6481 3.79369 11.6158C3.7157 11.5835 3.6416 11.5439 3.57141 11.497C3.50122 11.4501 3.43627 11.3968 3.37658 11.3371C3.31688 11.2774 3.26358 11.2124 3.21668 11.1422C3.16978 11.0721 3.13018 10.998 3.09787 10.92C3.06556 10.842 3.04117 10.7616 3.0247 10.6788C3.00823 10.596 3 10.5124 3 10.4279L3 7.85651C3 7.77209 3.00823 7.68848 3.0247 7.60568C3.04117 7.52289 3.06556 7.44249 3.09787 7.36449C3.13018 7.2865 3.16978 7.2124 3.21668 7.14221C3.26358 7.07202 3.31688 7.00707 3.37658 6.94738C3.43627 6.88768 3.50122 6.83438 3.57141 6.78748C3.6416 6.74058 3.7157 6.70098 3.79369 6.66867C3.87169 6.63636 3.95208 6.61198 4.03488 6.59551C4.11768 6.57904 4.20129 6.5708 4.28571 6.5708L18.4286 6.5708Z" fill="rgb(245,245,245)" fill-rule="nonzero" />
<path id="矢量 5" d="M9.435 4L4.28571 4C4.20129 4 4.11768 4.00823 4.03488 4.0247C3.95208 4.04117 3.87169 4.06556 3.79369 4.09787C3.7157 4.13018 3.6416 4.16978 3.57141 4.21668C3.50122 4.26358 3.43627 4.31688 3.37658 4.37658C3.31688 4.43627 3.26358 4.50122 3.21668 4.57141C3.16978 4.6416 3.13018 4.7157 3.09787 4.79369C3.06556 4.87169 3.04117 4.95208 3.0247 5.03488C3.00823 5.11768 3 5.20129 3 5.28571L3 18.1429C3 18.2273 3.00823 18.3109 3.0247 18.3937C3.04117 18.4765 3.06556 18.5569 3.09787 18.6349C3.13018 18.7129 3.16978 18.787 3.21668 18.8572C3.26358 18.9274 3.31688 18.9923 3.37658 19.052C3.43627 19.1117 3.50122 19.165 3.57141 19.2119C3.6416 19.2588 3.7157 19.2984 3.79369 19.3307C3.87169 19.363 3.95208 19.3874 4.03488 19.4039C4.11768 19.4203 4.20129 19.4286 4.28571 19.4286L19.7143 19.4286C19.7987 19.4286 19.8823 19.4203 19.9651 19.4039C20.0479 19.3874 20.1283 19.363 20.2063 19.3307C20.2843 19.2984 20.3584 19.2588 20.4286 19.2119C20.4988 19.165 20.5637 19.1117 20.6234 19.052C20.6831 18.9923 20.7364 18.9274 20.7833 18.8572C20.8302 18.787 20.8698 18.7129 20.9021 18.6349C20.9344 18.5569 20.9588 18.4765 20.9753 18.3937C20.9918 18.3109 21 18.2273 21 18.1429L21 9.14286C21 9.05844 20.9918 8.97483 20.9753 8.89203C20.9588 8.80923 20.9344 8.72883 20.9021 8.65084C20.8698 8.57284 20.8302 8.49875 20.7833 8.42855C20.7364 8.35836 20.6831 8.29341 20.6234 8.23372C20.5637 8.17402 20.4988 8.12073 20.4286 8.07382C20.3584 8.02692 20.2843 7.98732 20.2063 7.95501C20.1283 7.92271 20.0479 7.89832 19.9651 7.88185C19.8823 7.86538 19.7987 7.85714 19.7143 7.85714L13.3834 7.85714C13.2776 7.85716 13.1734 7.84431 13.0708 7.81859C12.9681 7.79288 12.8702 7.75507 12.7769 7.70516C12.6835 7.65526 12.5977 7.59476 12.5193 7.52367C12.441 7.45257 12.3724 7.37302 12.3137 7.285L10.5047 4.57214C10.446 4.48413 10.3774 4.40457 10.2991 4.33347C10.2207 4.26238 10.1349 4.20188 10.0416 4.15198C9.94828 4.10207 9.85031 4.06427 9.74767 4.03855C9.64503 4.01283 9.54081 3.99998 9.435 4Z" fill="rgb(241,174,23)" fill-rule="nonzero" />
</g>
</g>
</svg>) : (<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<g id="20230926-SecoManager">
<g id="ic_service_filled">
<rect id="矩形" width="24.000000" height="24.000000" x="0.000000" y="0.000000" opacity="0" fill="rgb(216,216,216)" />
<path id="形状" d="M13.5841 2.01807C14.0461 2.01807 14.4981 2.20607 14.8251 2.53407L19.4521 7.17907C19.7801 7.50807 19.9611 7.94607 19.9611 8.41207L19.9611 18.9821C19.9611 20.6361 18.6151 21.9821 16.9611 21.9821L7.03906 21.9821C5.38506 21.9821 4.03906 20.6361 4.03906 18.9821L4.03906 5.01807C4.03906 3.36407 5.38506 2.01807 7.03906 2.01807L13.5841 2.01807ZM13.7591 3.58907L13.7598 6.75637C13.7598 7.53284 14.3577 8.17644 15.1158 8.24947L15.2598 8.25637L18.4059 8.25588L13.7591 3.58907Z" fill="rgb(170,188,214)" fill-rule="nonzero" />
<path id="矢量 1" d="M11.8869 8.99976C10.1575 9.19233 9.19665 9.94431 9.00444 11.255C8.96599 11.6792 9.17731 11.9105 9.63862 11.949C9.86902 11.9877 10.0612 11.8141 10.215 11.4285C10.4457 10.6189 11.0022 10.2141 11.8869 10.2141C12.9624 10.2911 13.5389 10.8309 13.6165 11.8333C13.6165 12.7587 12.9904 12.9095 12.6504 13.1885C12.2194 13.5422 11.9376 13.9009 11.5926 14.509C11.3027 15.0199 11.2527 16.1128 11.2527 16.1128C11.2527 16.5754 11.4635 16.8068 11.8869 16.8068C12.2706 16.8068 12.4826 16.5754 12.5212 16.1128C12.5212 16.1128 12.572 14.8863 13.0656 14.3439C13.6251 13.7293 14.9616 13.2983 15 11.7177C14.8462 10.0599 13.8085 9.15389 11.8869 8.99976ZM11.8869 17.39C11.4437 17.39 11.0846 17.7505 11.0846 18.1948C11.0846 18.6394 11.4437 18.9998 11.8869 18.9998C12.3301 18.9998 12.6893 18.6394 12.6893 18.1948C12.6893 17.7505 12.3301 17.39 11.8869 17.39L11.8869 17.39Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
</g>
</g>
</svg>
)
}
</div>
<a href="#" className={css.filenameLink}>{file.name}</a>
</div>
</td>
<td>{file.size}</td>
<td>{file.updated}</td>
<td className={css.actions}>
<a href="#" className={css.actionIcon} onClick={(e) => { e.preventDefault(); alert(`下载 ${file.name}`); }}>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="csw-icon/下载" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="path (边框)" d="M8.50057 2C8.50057 1.72 8.28057 1.5 8.00057 1.5C7.72057 1.5 7.50057 1.72 7.50057 2L7.50057 8.75497L5.30609 6.56593C5.10785 6.36819 4.79672 6.36857 4.59898 6.56681C4.40124 6.76504 4.40162 7.07617 4.59986 7.27391L7.64746 10.314C7.74504 10.4113 7.86274 10.46 8.00057 10.46C8.1384 10.46 8.2561 10.4113 8.35368 10.314L11.4013 7.27391C11.5995 7.07617 11.5999 6.76504 11.4022 6.56681C11.2044 6.36857 10.8933 6.36819 10.6951 6.56593L8.50057 8.75497L8.50057 2ZM3.1665 10.1333C3.1665 9.8533 2.9465 9.6333 2.6665 9.6333C2.3865 9.6333 2.1665 9.8533 2.1665 10.1333L2.1665 12.5933C2.1665 12.7312 2.1803 12.8663 2.20789 12.9984C2.23032 13.1059 2.26187 13.2114 2.30254 13.3151C2.36272 13.4685 2.43971 13.6096 2.5335 13.7386C2.58319 13.8069 2.63759 13.8718 2.69671 13.9332C2.77772 14.0197 2.86543 14.0968 2.95984 14.1645C3.06187 14.2378 3.17174 14.3001 3.28944 14.3515C3.40409 14.4016 3.52135 14.439 3.64123 14.4638C3.75828 14.4879 3.87781 14.5 3.99984 14.5L11.9998 14.5C12.1219 14.5 12.2414 14.4879 12.3584 14.4638C12.4783 14.439 12.5956 14.4016 12.7102 14.3515C12.8037 14.3107 12.8925 14.2627 12.9766 14.2076C13.0964 14.129 13.2067 14.036 13.3074 13.9285C13.3464 13.8881 13.3833 13.8459 13.4182 13.8022C13.5335 13.6576 13.6264 13.4952 13.6971 13.3151C13.7378 13.2115 13.7693 13.1059 13.7918 12.9985C13.8194 12.8663 13.8332 12.7312 13.8332 12.5933L13.8332 10.1333C13.8332 9.8533 13.6132 9.6333 13.3332 9.6333C13.0532 9.6333 12.8332 9.8533 12.8332 10.1333L12.8332 12.5933C12.8332 12.6682 12.825 12.7412 12.8087 12.8124C12.7981 12.859 12.7839 12.9048 12.7662 12.9498C12.7407 13.0149 12.7087 13.0754 12.6701 13.1315C12.6427 13.1715 12.6119 13.2092 12.5779 13.2446C12.5239 13.3022 12.4644 13.3503 12.3994 13.3892C12.3706 13.4063 12.3408 13.4216 12.3099 13.4351C12.259 13.4574 12.207 13.4739 12.1539 13.4847C12.1036 13.4949 12.0522 13.5 11.9998 13.5L3.99984 13.5C3.94745 13.5 3.89611 13.4949 3.8458 13.4847C3.79264 13.4739 3.74063 13.4574 3.68978 13.4351C3.59923 13.3916 3.49107 13.3185 3.41736 13.2399C3.35744 13.1681 3.26946 13.0416 3.23345 12.9498C3.21579 12.9048 3.20162 12.859 3.19095 12.8124C3.17465 12.7412 3.1665 12.6682 3.1665 12.5933L3.1665 10.1333Z" fill="rgb(102,102,102)" fill-rule="evenodd" />
</svg>
下载
</a>
<a href="#" className={css.actionIcon} onClick={(e) => { e.preventDefault(); alert(`预览 ${file.name}`); }}>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="csw-icon/可见&浏览" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 314" d="M12.5481 10.0908C12.1765 10.5073 11.7741 10.8585 11.3309 11.1491C11.0774 11.311 10.8144 11.451 10.5418 11.569L10.5416 11.5691Q9.38832 12.0685 8.0082 12.044C6.63727 12.0215 5.434 11.638 4.39842 10.8934C4.00594 10.6112 3.64357 10.281 3.31132 9.90259C3.04421 9.59839 2.80265 9.27043 2.58667 8.91862C2.43272 8.66789 2.29962 8.41862 2.18734 8.17074C2.16726 8.12638 2.14935 8.08577 2.13365 8.04895C2.15328 7.99858 2.17645 7.94198 2.20312 7.87915C2.32607 7.58976 2.47302 7.30168 2.64396 7.01489Q3.00288 6.41284 3.45195 5.90942C3.82347 5.49292 4.23086 5.13932 4.67413 4.84871C4.92763 4.68681 5.18565 4.54923 5.45817 4.43123L5.45844 4.43112Q6.61168 3.93172 7.9918 3.95626C9.36273 3.97872 10.566 4.36226 11.6016 5.10681C11.9941 5.38904 12.3564 5.71928 12.6887 6.09766C12.9558 6.40186 13.1973 6.72982 13.4133 7.08162C13.5673 7.33236 13.7004 7.58162 13.8127 7.82951C13.8327 7.87386 13.8506 7.91447 13.8664 7.95129C13.8467 8.00167 13.8235 8.05827 13.7969 8.12109C13.6739 8.41048 13.527 8.69857 13.356 8.98535C13.1168 9.38672 12.8474 9.75521 12.5481 10.0908ZM4.12585 4.01241C4.12194 4.01491 4.11807 4.01745 4.11425 4.02004C3.602 4.35739 3.13248 4.76529 2.70569 5.24377C2.36383 5.62699 2.05695 6.04667 1.78501 6.50285C1.59084 6.82857 1.4234 7.15702 1.28274 7.48816C1.21041 7.65841 1.1571 7.7983 1.12282 7.90784L1.07373 8.06466L1.12726 8.22005Q1.17609 8.36178 1.27643 8.58333C1.40597 8.8693 1.55863 9.15548 1.73448 9.44185C1.98018 9.84204 2.25533 10.2156 2.55992 10.5624C2.94189 10.9974 3.36104 11.379 3.81466 11.7054C4.12349 11.9274 4.44592 12.1221 4.782 12.2894C4.81602 12.3063 4.85016 12.323 4.88444 12.3393C5.12447 12.4539 5.37132 12.5548 5.625 12.6419C6.36509 12.8962 7.15401 13.0301 7.9918 13.0439C9.43342 13.0695 10.722 12.7213 11.8575 11.9993C11.8614 11.9969 11.8652 11.9945 11.8691 11.9919C11.873 11.9894 11.8769 11.9869 11.8807 11.9843C12.393 11.6469 12.8675 11.235 13.2943 10.7565C13.6362 10.3733 13.9431 9.95357 14.215 9.4974C14.4092 9.17167 14.5766 8.84322 14.7173 8.51208C14.7896 8.34184 14.8429 8.20195 14.8772 8.09241L14.9263 7.93559L14.8727 7.78019C14.8402 7.68571 14.7905 7.56462 14.7236 7.41691C14.594 7.13094 14.4414 6.84477 14.2655 6.55839C14.0198 6.1582 13.7447 5.78467 13.4401 5.43783C13.0581 5.00281 12.639 4.62122 12.1853 4.29488C11.8765 4.07288 11.5541 3.87817 11.218 3.71086C11.184 3.69393 11.1498 3.67729 11.1156 3.66093C10.8755 3.54631 10.6287 3.44543 10.375 3.35832C9.63491 3.10409 8.84599 2.97013 8.0082 2.95638C6.5666 2.93079 5.27304 3.28302 4.13752 4.00498C4.13361 4.0074 4.12972 4.00987 4.12585 4.01241ZM8.00022 10.0568C7.71743 10.0568 7.44659 10.0038 7.18772 9.89775C7.05349 9.84273 6.92743 9.77555 6.80957 9.69625C6.70705 9.6272 6.61072 9.54899 6.52059 9.46155C6.40908 9.35339 6.31191 9.23584 6.22911 9.10893C6.16722 9.01404 6.11332 8.91394 6.06746 8.80859C6.01469 8.68734 5.97441 8.56335 5.94659 8.4366C5.91569 8.29565 5.90023 8.15129 5.90023 8.00354C5.90023 7.85909 5.915 7.71781 5.94454 7.57967C5.97235 7.44963 6.01324 7.32239 6.06722 7.19796C6.11332 7.09167 6.16754 6.99068 6.22988 6.89498C6.31226 6.76847 6.40881 6.6512 6.51951 6.54317C6.61259 6.45231 6.71226 6.37138 6.81854 6.30025C6.93345 6.22335 7.05607 6.158 7.18642 6.10417C7.30062 6.05701 7.41709 6.02022 7.53591 5.99382C7.68695 5.96025 7.84172 5.94348 8.00022 5.94348C8.15784 5.94348 8.31177 5.96008 8.46204 5.99333C8.5816 6.01973 8.69885 6.05672 8.81378 6.10417C8.94391 6.15792 9.06635 6.22319 9.18111 6.29989C9.28756 6.37109 9.38741 6.45215 9.48063 6.54309C9.59163 6.65141 9.6884 6.76892 9.77092 6.89575C9.83305 6.99121 9.88711 7.09192 9.93309 7.19788C9.98726 7.32267 10.0283 7.45028 10.0561 7.58069C10.0855 7.71851 10.1002 7.85946 10.1002 8.00354C10.1002 8.15092 10.0848 8.29492 10.054 8.43555C10.0262 8.5627 9.98582 8.68709 9.93284 8.80872C9.8256 9.05493 9.6745 9.27254 9.47957 9.46159C9.38928 9.54915 9.29279 9.62748 9.19008 9.69657C9.07237 9.77576 8.94651 9.84281 8.81248 9.89775C8.70101 9.9434 8.58732 9.97925 8.47142 10.0053C8.31822 10.0397 8.16115 10.0568 8.00022 10.0568ZM8.00022 9.05684C8.09556 9.05684 8.18811 9.04569 8.27789 9.02336C8.33065 9.01021 8.38245 8.99325 8.43329 8.97241C8.56525 8.91833 8.68195 8.84212 8.78339 8.74373C8.88381 8.64636 8.96136 8.53487 9.01603 8.40934C9.0413 8.3514 9.06085 8.29211 9.07475 8.23153C9.09174 8.15747 9.10022 8.0815 9.10022 8.00354C9.10022 7.92867 9.09239 7.85555 9.07674 7.7841C9.06272 7.72005 9.0424 7.65735 9.01579 7.59607C8.99583 7.55009 8.97286 7.50598 8.94684 7.46375C8.90129 7.38973 8.84644 7.32145 8.78231 7.25891C8.73513 7.21285 8.68469 7.17163 8.63098 7.13525C8.56899 7.09322 8.50267 7.05762 8.43199 7.02844C8.37811 7.00619 8.3232 6.98828 8.26723 6.97477C8.18075 6.9539 8.09174 6.94348 8.00022 6.94348C7.9078 6.94348 7.81797 6.9541 7.73071 6.97534C7.6755 6.98877 7.62132 7.00647 7.56816 7.02844C7.49729 7.0577 7.43083 7.09342 7.36871 7.13554C7.31521 7.17188 7.26495 7.21297 7.21794 7.25883C7.15409 7.32117 7.09945 7.38916 7.05402 7.46281C7.02781 7.50529 7.00468 7.54968 6.98462 7.59595C6.95817 7.6569 6.93793 7.71924 6.92391 7.78296C6.90812 7.85474 6.90023 7.92826 6.90023 8.00354C6.90023 8.08191 6.90879 8.15828 6.92592 8.23271C6.9398 8.29289 6.95927 8.35185 6.98435 8.40946C7.039 8.53499 7.1165 8.64644 7.21688 8.74377C7.31826 8.84212 7.43492 8.91833 7.56685 8.97241C7.61698 8.99292 7.66805 9.00972 7.72003 9.02279C7.81059 9.04549 7.90397 9.05684 8.00022 9.05684Z" fill="rgb(102,102,102)" fill-rule="evenodd" />
</svg>
预览
</a>
</td>
</tr>
))}
</tbody>
</table>
<div className={css.paginationContainer}>
<div className={css.total}>共 <span >10</span> 个文件</div>
<div className={css.pagination}>
<div style={{ cursor: 'pointer' }}>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<defs>
<clipPath id="clipPath_1">
<rect width="10.000000" height="10.000000" x="7.000000" y="7.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id=".翻页器单项" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<g id="箭头" customFrame="url(#clipPath_1)">
<rect id="箭头" width="10.000000" height="10.000000" x="7.000000" y="7.000000" />
<path id="合并" d="M9.86304 0.847996L5.36304 5.54365C5.24271 5.65896 5.10859 5.73041 4.99076 5.72791C4.87294 5.7254 4.75637 5.66398 4.64105 5.54365L0.141049 0.847996C-0.0526843 0.645839 -0.0460661 0.334783 0.156091 0.141049C0.358247 -0.0526841 0.669304 -0.0460659 0.863037 0.156091L5.00204 4.47505L9.14105 0.156091C9.33478 -0.0460665 9.64584 -0.0526841 9.848 0.141049C10.0502 0.334782 10.0568 0.645839 9.86304 0.847996Z" fill="rgb(201,201,201)" fill-rule="evenodd" transform="matrix(0,1,-1,0,14.4976,6.99609)" />
</g>
</svg>
</div>
<div className={css.pageInfo}>第 <span >1</span> 页</div>
<div style={{ cursor: 'pointer' }}>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<defs>
<clipPath id="clipPath_2">
<rect width="10.000000" height="10.000000" x="7.000000" y="7.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="单个翻页器" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<g id="箭头" customFrame="url(#clipPath_2)">
<rect id="箭头" width="10.000000" height="10.000000" x="7.000000" y="7.000000" />
<path id="合并" d="M9.86304 0.847996L5.36304 5.54365C5.24271 5.65896 5.10859 5.73041 4.99076 5.72791C4.87294 5.7254 4.75637 5.66398 4.64105 5.54365L0.141049 0.847996C-0.0526843 0.645839 -0.0460661 0.334783 0.156091 0.141049C0.358247 -0.0526841 0.669304 -0.0460659 0.863037 0.156091L5.00204 4.47505L9.14105 0.156091C9.33478 -0.0460665 9.64584 -0.0526841 9.848 0.141049C10.0502 0.334782 10.0568 0.645839 9.86304 0.847996Z" fill="rgb(29,29,29)" fill-rule="evenodd" transform="matrix(0,1,1,0,9.49805,6.99609)" />
</g>
</svg>
</div>
</div>
</div>
</div>
</div> 以及对应的样式:
.tableContainer {
margin-top: 10px;
}
.tableContainer .fileTable {
width: 100%;
border-collapse: collapse;
background-color: white;
margin-bottom: 15px;
}
.fileTable th {
color: rgba(102, 102, 102, 1);
font-family: 'Microsoft YaHei';
font-weight: 600;
font-size: 14px;
line-height: 19px;
background-color: rgba(228, 237, 255, 1);
text-align: left;
padding: 12px 15px;
}
.fileTable .tableHeader {
display: flex;
align-items: center;
}
.fileTable .tableHeader span {
margin-right: 5px;
}
/* 控制文件名列宽度与换行 */
.fileTable th:first-child,
.fileTable td:first-child {
max-width: 300px;
min-width: 200px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
vertical-align: top !important;
}
.filenameContainer {
display: flex;
align-items: flex-start;
gap: 6px;
word-wrap: break-word;
overflow: hidden;
}
.filenameLink {
color: rgba(29, 29, 29, 1);
margin-left: 8px;
font-weight: 400;
font-family: 'Microsoft YaHei';
font-size: 14px;
line-height: 22px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-wrap: break-word;
max-width: 280px;
line-height: 22px;
}
.tableContainer .fileTable tr:hover {
background-color: rgba(242, 245, 253, 1);
}
.tableContainer .fileTable td {
padding: 12px 15px;
border-bottom: 1px solid rgba(223, 223, 223, 1);
color: rgba(29, 29, 29, 1);
}
.tableContainer .fileTable tr:hover .filenameLink {
color: rgba(0, 65, 211, 1);
}
.actions {
display: flex;
gap: 15px;
}
.actionIcon {
display: flex;
align-items: center;
color: rgba(102, 102, 102, 1);
text-decoration: none;
font-size: 14px;
gap: 4px;
}
.actionIcon:hover {
color: rgba(0, 65, 211, 1);
}
.paginationContainer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #555;
}
.pagination{
display: flex;
justify-content: flex-start;
align-items: center;
}
.total{
font-family: 'Microsoft YaHei';
font-weight: 400;
font-size: 12px;
line-height: 18px;
text-align: start;
color: rgba(102, 102, 102, 1);
margin-left: 24px;
}
.pageInfo{
margin-left: 5px;
margin-right: 5px;
margin-top: -5px;
}
现在渲染的表格出现一个问题就是操作所在列与其它列没有水平对其,请你修改这个问题,并把完整的样式文件发给我
最新发布