fix: 优化素材绑定页面UI布局和代码格式
- 清理多余的空行,优化代码格式 - 调整模特选择下拉框位置,移到批量操作区域 - 改善筛选区域的布局结构 - 保持UI组件的逻辑分组和视觉一致性
This commit is contained in:
parent
37cf8bb75a
commit
96b420e149
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue