fix: 优化素材绑定页面UI布局和代码格式

- 清理多余的空行,优化代码格式
- 调整模特选择下拉框位置,移到批量操作区域
- 改善筛选区域的布局结构
- 保持UI组件的逻辑分组和视觉一致性
This commit is contained in:
imeepos 2025-07-15 14:24:28 +08:00
parent 37cf8bb75a
commit 96b420e149
1 changed files with 13 additions and 14 deletions

View File

@ -172,7 +172,7 @@ export const MaterialModelBinding: React.FC = () => {
// 过滤素材
const filteredMaterials = materials.filter(material => {
const matchesSearch = material.name.toLowerCase().includes(searchQuery.toLowerCase());
switch (filterType) {
case 'bound':
return matchesSearch && material.model_id;
@ -233,7 +233,7 @@ export const MaterialModelBinding: React.FC = () => {
<h1 className="text-xl font-semibold text-gray-900">-</h1>
</div>
</div>
<div className="flex items-center space-x-3">
<button
onClick={() => setShowStats(!showStats)}
@ -261,7 +261,7 @@ export const MaterialModelBinding: React.FC = () => {
</div>
</div>
</div>
<div className="bg-green-50 rounded-lg p-4">
<div className="flex items-center">
<Link className="w-8 h-8 text-green-600" />
@ -271,7 +271,7 @@ export const MaterialModelBinding: React.FC = () => {
</div>
</div>
</div>
<div className="bg-yellow-50 rounded-lg p-4">
<div className="flex items-center">
<Unlink className="w-8 h-8 text-yellow-600" />
@ -281,7 +281,7 @@ export const MaterialModelBinding: React.FC = () => {
</div>
</div>
</div>
<div className="bg-purple-50 rounded-lg p-4">
<div className="flex items-center">
<BarChart3 className="w-8 h-8 text-purple-600" />
@ -313,7 +313,7 @@ export const MaterialModelBinding: React.FC = () => {
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div className="flex gap-2 items-center">
<Filter className="w-4 h-4 text-gray-500" />
<CustomSelect
@ -328,18 +328,17 @@ export const MaterialModelBinding: React.FC = () => {
options={getFilterOptions()}
className="min-w-[120px]"
/>
<CustomSelect
value={selectedModel}
onChange={setSelectedModel}
options={getModelOptions()}
className="min-w-[150px]"
/>
</div>
</div>
{/* 批量操作 */}
<div className="flex gap-2 items-center">
<CustomSelect
value={selectedModel}
onChange={setSelectedModel}
options={getModelOptions()}
className="min-w-[150px]"
/>
{selectedMaterials.length > 0 && (
<>
<button
@ -350,7 +349,7 @@ export const MaterialModelBinding: React.FC = () => {
<Link className="w-4 h-4" />
<span> ({selectedMaterials.length})</span>
</button>
<button
onClick={handleBatchUnbind}
className="px-3 py-2 text-sm font-medium text-red-700 bg-red-50 border border-red-200 rounded-md hover:bg-red-100 transition-colors flex items-center space-x-1"