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 filteredMaterials = materials.filter(material => {
|
||||||
const matchesSearch = material.name.toLowerCase().includes(searchQuery.toLowerCase());
|
const matchesSearch = material.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
|
||||||
switch (filterType) {
|
switch (filterType) {
|
||||||
case 'bound':
|
case 'bound':
|
||||||
return matchesSearch && material.model_id;
|
return matchesSearch && material.model_id;
|
||||||
|
|
@ -233,7 +233,7 @@ export const MaterialModelBinding: React.FC = () => {
|
||||||
<h1 className="text-xl font-semibold text-gray-900">素材-模特绑定管理</h1>
|
<h1 className="text-xl font-semibold text-gray-900">素材-模特绑定管理</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center space-x-3">
|
<div className="flex items-center space-x-3">
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowStats(!showStats)}
|
onClick={() => setShowStats(!showStats)}
|
||||||
|
|
@ -261,7 +261,7 @@ export const MaterialModelBinding: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-green-50 rounded-lg p-4">
|
<div className="bg-green-50 rounded-lg p-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<Link className="w-8 h-8 text-green-600" />
|
<Link className="w-8 h-8 text-green-600" />
|
||||||
|
|
@ -271,7 +271,7 @@ export const MaterialModelBinding: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-yellow-50 rounded-lg p-4">
|
<div className="bg-yellow-50 rounded-lg p-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<Unlink className="w-8 h-8 text-yellow-600" />
|
<Unlink className="w-8 h-8 text-yellow-600" />
|
||||||
|
|
@ -281,7 +281,7 @@ export const MaterialModelBinding: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-purple-50 rounded-lg p-4">
|
<div className="bg-purple-50 rounded-lg p-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<BarChart3 className="w-8 h-8 text-purple-600" />
|
<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"
|
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>
|
||||||
|
|
||||||
<div className="flex gap-2 items-center">
|
<div className="flex gap-2 items-center">
|
||||||
<Filter className="w-4 h-4 text-gray-500" />
|
<Filter className="w-4 h-4 text-gray-500" />
|
||||||
<CustomSelect
|
<CustomSelect
|
||||||
|
|
@ -328,18 +328,17 @@ export const MaterialModelBinding: React.FC = () => {
|
||||||
options={getFilterOptions()}
|
options={getFilterOptions()}
|
||||||
className="min-w-[120px]"
|
className="min-w-[120px]"
|
||||||
/>
|
/>
|
||||||
|
<CustomSelect
|
||||||
|
value={selectedModel}
|
||||||
|
onChange={setSelectedModel}
|
||||||
|
options={getModelOptions()}
|
||||||
|
className="min-w-[150px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 批量操作 */}
|
{/* 批量操作 */}
|
||||||
<div className="flex gap-2 items-center">
|
<div className="flex gap-2 items-center">
|
||||||
<CustomSelect
|
|
||||||
value={selectedModel}
|
|
||||||
onChange={setSelectedModel}
|
|
||||||
options={getModelOptions()}
|
|
||||||
className="min-w-[150px]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{selectedMaterials.length > 0 && (
|
{selectedMaterials.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
|
|
@ -350,7 +349,7 @@ export const MaterialModelBinding: React.FC = () => {
|
||||||
<Link className="w-4 h-4" />
|
<Link className="w-4 h-4" />
|
||||||
<span>批量绑定 ({selectedMaterials.length})</span>
|
<span>批量绑定 ({selectedMaterials.length})</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={handleBatchUnbind}
|
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"
|
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