diff --git a/README.md b/README.md
index eb802ba4..e700c46d 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# 3D 家具开品平台工作区
+# 由壹点「产品开发平台」工作区
 
 > 最后更新：2026-04-07  
 > 当前主线：`资产中心 -> 自动组合 -> 草稿组 -> 包装方案 -> 正式入库 -> 轻仓库`
diff --git a/docs/Precision-Atelier设计系统改造记录.md b/docs/Precision-Atelier设计系统改造记录.md
index 13874f62..2dae1627 100644
--- a/docs/Precision-Atelier设计系统改造记录.md
+++ b/docs/Precision-Atelier设计系统改造记录.md
@@ -212,3 +212,43 @@
 | `src/app/warehouse/WarehouseClient.tsx` | 移除 headerTools/eyebrow |
 | `src/app/HomeClient.workspace.tsx` | 移除 topTools 传参 |
 | ~20 个业务文件 | 硬编码颜色替换 |
+
+---
+
+## 第三阶段：管理基础设施视觉升级 (2026-04-16)
+
+### 10. 管理端专属视觉模式 (Management UI Patterns)
+
+在重构 `/admin` 和 `/users` 页面时，引入了针对“高密度控制类页面”的增强视觉模式，以平衡“工业精密感”与“视觉通透度”。
+
+**1. 沉浸式页头 (Immersive Page Header)**
+- **视觉特征**：
+  - 采用 `bg-white/60` + `backdrop-blur-2xl`。
+  - 强化左侧 Icon 视觉，使用 `rounded-[2rem] bg-black` 黑色底座，并叠加状态徽章（如 `ShieldCheck`）。
+  - **排版建议**：Manrope 3XL 标题 + 紧跟其后的 `text-apple-blue` 高亮关键词。
+  - **副标题**：使用 `text-[10px] tracking-[0.4em] uppercase` 的精密说明文字。
+
+**2. 精密控制条 (Precision Control Bar)**
+- **定义**：将原本分散的“搜索框”与“筛选器”整合进一个逻辑整体。
+- **视觉实现**：
+  - 容器：`rounded-[2rem]` 极圆圆角，`border-white/80` 微光边框，`bg-white/40` 背景。
+  - 搜索框：沉浸式设计，背景为 `bg-white/80`，聚焦时通过 `ring-apple-blue/5` 产生柔和晕染。
+  - 筛选器：图标 (Lucide Icon) + Select 组件的紧凑组合，图标作为装饰前缀。
+
+**3. 玻璃态卡片增强 (Enhanced Glass Cards)**
+- **改动**：在 `rounded-[2rem]` 的基础上，引入了“装饰线”动效。
+- **动效逻辑**：`group-hover:w-full` 的底部 1.5px 强调线，颜色与模块 Icon 色调一致。
+- **背景文字装饰**：绝对定位的 `text-[80px]` 背景大字（如模块 path），设置 `opacity-[0.03]` 极低透明度，增加“空间感”。
+
+**4. 状态指标看板 (System Health Dashboard)**
+- **应用场景**：`/admin` 首页。
+- **组成**：Icon 容器 + 上下两行文本（上行为微缩标签，下行为状态值）。
+- **配色**：动态使用 `emerald-500` (正常), `blue-500` (活动), `amber-500` (注意)。
+
+### 11. 改动文件清单
+
+| 文件 | 改动类型 | 备注 |
+|------|----------|------|
+| `src/app/admin/page.tsx` | 重构 | 系统总控制台首页视觉重写 |
+| `src/app/users/page.tsx` | 重构 | 身份控制中心 (用户管理) 视觉重写 |
+
diff --git a/docs/前端UI改动清单.md b/docs/前端UI改动清单.md
index 4309f430..3263b66a 100644
--- a/docs/前端UI改动清单.md
+++ b/docs/前端UI改动清单.md
@@ -1,4 +1,21 @@
 # 协作任务板
 
+## 已完成任务 (Completed)
+
+- **管理基础设施视觉升级 (Management Infrastructure UI Refactor)**
+  - **重构页面**：
+    - `系统总控制台 (/admin)`：引入“中枢枢纽”布局，增加系统状态看板 (Mock)，优化卡片视觉张力。
+    - `身份控制中心 (/users)`：引入“沉浸式页头”与“精密控制条”，整合搜索与筛选器。
+  - **核心特性**：
+    - **Frosted Glass (磨砂玻璃)**：全局背景与卡片采用 70% 透明度 + 30px 模糊。
+    - **Visual Hierarchy (视觉层级)**：通过大面积阴影与精致边框区分功能模块。
+    - **Typography (排版)**：强化了 Manrope 标题与 Inter 技术标签的对比。
+  - **负责人**：Gemini UI Engineer
+  - **完成日期**：2026-04-16
+
+---
+
+## 进行中任务 (In Progress)
+
 - assisted-assembly（辅助装配）：真实样本联调与验收
   - 负责人：Codex
diff --git a/furniture-3d-system/README.md b/furniture-3d-system/README.md
index 7f4aef79..805f4af2 100644
--- a/furniture-3d-system/README.md
+++ b/furniture-3d-system/README.md
@@ -1,4 +1,4 @@
-# 家具开品平台
+# 由壹点「产品开发平台」
 
 > 最后更新：2026-04-15  
 > 当前默认主线：`资产中心 -> 辅助装配 -> 草稿组 -> 正式入库 -> 轻仓库`
diff --git a/furniture-3d-system/docs/README.md b/furniture-3d-system/docs/README.md
index 43243904..4664ad4f 100644
--- a/furniture-3d-system/docs/README.md
+++ b/furniture-3d-system/docs/README.md
@@ -1,4 +1,4 @@
-# 家具开品平台文档导航
+# 由壹点「产品开发平台」文档导航
 
 > 最后更新：2026-04-15  
 > 当前主线入口：`/asset-center -> /assisted-assembly -> /draft-groups -> /intake -> /warehouse`
diff --git a/furniture-3d-system/docs/项目总览.md b/furniture-3d-system/docs/项目总览.md
index 75d93ea2..5e7381e5 100644
--- a/furniture-3d-system/docs/项目总览.md
+++ b/furniture-3d-system/docs/项目总览.md
@@ -1,4 +1,4 @@
-# 家具开品平台项目总览
+# 由壹点「产品开发平台」项目总览
 
 > 最后更新：2026-04-15  
 > 当前状态：新平台主线已进入真实业务测试与收口阶段
diff --git a/furniture-3d-system/public/custom-logo.png b/furniture-3d-system/public/custom-logo.png
new file mode 100644
index 00000000..b7baa95d
Binary files /dev/null and b/furniture-3d-system/public/custom-logo.png differ
diff --git a/furniture-3d-system/src/app/asset-center/material-library/MaterialLibraryClient.test.tsx b/furniture-3d-system/src/app/asset-center/material-library/MaterialLibraryClient.test.tsx
index 40e3c08f..a789ed95 100644
--- a/furniture-3d-system/src/app/asset-center/material-library/MaterialLibraryClient.test.tsx
+++ b/furniture-3d-system/src/app/asset-center/material-library/MaterialLibraryClient.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { ReactNode } from 'react'
 import MaterialLibraryClient from './MaterialLibraryClient'
@@ -194,10 +194,8 @@ describe('MaterialLibraryClient', () => {
     await actor.click(screen.getByRole('button', { name: /饰面花色/ }))
     await actor.click(screen.getByRole('button', { name: /新建/ }))
     await actor.type(screen.getByLabelText('花色名称'), '北美橡木')
-    await actor.clear(screen.getByLabelText('金属度'))
-    await actor.type(screen.getByLabelText('金属度'), '0.2')
-    await actor.clear(screen.getByLabelText('粗糙度'))
-    await actor.type(screen.getByLabelText('粗糙度'), '0.6')
+    fireEvent.change(screen.getByLabelText('金属度'), { target: { value: '0.2' } })
+    fireEvent.change(screen.getByLabelText('粗糙度'), { target: { value: '0.6' } })
     await actor.clear(screen.getByLabelText('纹理实物宽度（mm）'))
     await actor.type(screen.getByLabelText('纹理实物宽度（mm）'), '800')
     await actor.click(screen.getByRole('button', { name: '创建' }))
diff --git a/furniture-3d-system/src/app/asset-center/material-library/MaterialLibraryClient.tsx b/furniture-3d-system/src/app/asset-center/material-library/MaterialLibraryClient.tsx
index b3368e11..cb8e9541 100644
--- a/furniture-3d-system/src/app/asset-center/material-library/MaterialLibraryClient.tsx
+++ b/furniture-3d-system/src/app/asset-center/material-library/MaterialLibraryClient.tsx
@@ -21,6 +21,7 @@ import { DeleteConfirmDialog } from '@/components/ui/DeleteConfirmDialog'
 import Modal from '@/components/ui/Modal'
 import Input from '@/components/ui/Input'
 import Select from '@/components/ui/Select'
+import Slider from '@/components/ui/Slider'
 import { ToastContainer, useToast } from '@/components/ui/Toast'
 import { PlatformSplitLayout } from '@/components/platform/PlatformSplitLayout'
 import type { PlatformMetricItem } from '@/components/platform/types'
@@ -158,6 +159,26 @@ function toOptionalNumber(value: string): number | null {
   return Number.isFinite(next) ? next : null
 }
 
+function normalizeSliderValue(value: number): string {
+  return value.toFixed(2).replace(/\.?0+$/, '')
+}
+
+function toClampedUnitValue(value: string, fallback: number): number {
+  const numericValue = Number(value)
+  if (!Number.isFinite(numericValue)) {
+    return fallback
+  }
+  return Math.min(1, Math.max(0, numericValue))
+}
+
+function formatDecimalValue(value: string | number, digits = 2): string {
+  const numericValue = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(numericValue)) {
+    return '--'
+  }
+  return numericValue.toFixed(digits).replace(/\.?0+$/, '')
+}
+
 function emptySubstrateForm(dict: SubstrateDictionaryBundleDTO): SubstrateFormState {
   return {
     categoryId: dict.categories[0]?.id ?? '',
@@ -269,6 +290,157 @@ function materialPreviewUrl(material: MaterialDTO): string | null {
   return material.thumbnailUrl ?? material.textureUrl ?? material.previewUrl ?? null
 }
 
+function materialToFinishForm(item: MaterialDTO): FinishFormState {
+  return {
+    name: item.name,
+    categoryId: item.categoryId,
+    thumbnailUrl: item.thumbnailUrl ?? '',
+    thumbnailPreview: item.thumbnailUrl ?? '',
+    textureUrl: item.textureUrl ?? '',
+    texturePreview: item.textureUrl ?? item.previewUrl ?? '',
+    normalMapUrl: item.normalMapUrl ?? '',
+    normalMapPreview: item.normalMapUrl ?? '',
+    color: item.color ?? '#cccccc',
+    metalness: String(item.metalness ?? 0),
+    roughness: String(item.roughness ?? 0.5),
+    opacity: String(item.opacity ?? 1),
+    textureRepeat: String(item.textureRepeat ?? 1),
+    textureRotation: String(item.textureRotation ?? 0),
+    textureSizeMm: String(item.textureSizeMm ?? 600),
+  }
+}
+
+function FinishParameterSliderField({
+  id,
+  label,
+  value,
+  helper,
+  disabled = false,
+  onChange,
+}: {
+  id: string
+  label: string
+  value: string
+  helper: string
+  disabled?: boolean
+  onChange: (nextValue: string) => void
+}) {
+  const fallback = label === '粗糙度' ? 0.5 : label === '透明度' ? 1 : 0
+  const currentValue = toClampedUnitValue(value, fallback)
+
+  return (
+    <div className="rounded-[22px] border border-apple-separator/15 bg-white/72 p-4 shadow-[0_12px_28px_rgba(15,23,42,0.05)]">
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div>
+          <label
+            htmlFor={id}
+            className="text-sm font-apple-bold tracking-tight text-apple-label-primary"
+          >
+            {label}
+          </label>
+          <p className="mt-1 text-[11px] leading-relaxed text-apple-label-tertiary">{helper}</p>
+        </div>
+        <span className="rounded-full border border-apple-blue/10 bg-apple-blue/6 px-2.5 py-1 text-[11px] font-apple-black text-apple-blue">
+          {formatDecimalValue(currentValue)}
+        </span>
+      </div>
+
+      <Slider
+        id={id}
+        aria-label={label}
+        min={0}
+        max={1}
+        step={0.01}
+        value={currentValue}
+        disabled={disabled}
+        onValueChange={(nextValue) => onChange(normalizeSliderValue(nextValue))}
+      />
+
+      <div className="mt-2 flex items-center justify-between text-[10px] font-apple-bold uppercase tracking-widest text-apple-label-tertiary/70">
+        <span>0</span>
+        <span>1</span>
+      </div>
+    </div>
+  )
+}
+
+function FinishWorkbenchPreviewCard({
+  form,
+  categoryName,
+  code,
+  statusLabel,
+}: {
+  form: FinishFormState
+  categoryName: string
+  code: string
+  statusLabel: string
+}) {
+  const displayColor = form.color || '#cccccc'
+
+  const sphereSurfaceStyle = useMemo<CSSProperties>(() => ({
+    backgroundColor: displayColor,
+    backgroundImage: form.texturePreview
+      ? `url(${form.texturePreview})`
+      : form.textureUrl
+        ? `url(${form.textureUrl})`
+        : form.thumbnailPreview
+          ? `url(${form.thumbnailPreview})`
+          : 'none',
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+  }), [displayColor, form.texturePreview, form.textureUrl, form.thumbnailPreview])
+
+  return (
+    <div className="relative flex h-full flex-col overflow-hidden bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.9),rgba(244,247,250,0.68)_48%,rgba(236,241,246,0.92)_100%)] p-6">
+      <div className="pointer-events-none absolute inset-0 opacity-80 [background-image:linear-gradient(120deg,rgba(255,255,255,0.55),transparent_28%,transparent_72%,rgba(255,255,255,0.48))]" />
+      <div className="relative z-10 flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <span className="inline-flex rounded-full border border-apple-blue/10 bg-apple-blue/6 px-2.5 py-1 text-[10px] font-apple-black uppercase tracking-[0.24em] text-apple-blue">
+            {statusLabel}
+          </span>
+          <h3 className="mt-3 truncate text-[28px] font-apple-bold leading-none tracking-[-0.04em] text-apple-label-primary">
+            {form.name.trim() || '未命名材质'}
+          </h3>
+          <p className="mt-2 text-xs font-apple-medium uppercase tracking-[0.18em] text-apple-label-tertiary">
+            {categoryName} · {code}
+          </p>
+        </div>
+        <div className="rounded-full border border-white/70 bg-white/75 px-3 py-1 text-[10px] font-apple-black uppercase tracking-[0.24em] text-apple-label-secondary shadow-apple-sm">
+          实时预览
+        </div>
+      </div>
+
+      <div className="relative z-10 flex flex-1 items-center justify-center py-6">
+        <div className="relative h-52 w-52 overflow-hidden rounded-full border border-white/80 bg-white/65 shadow-[0_32px_60px_rgba(15,23,42,0.16)]">
+          <div className="pointer-events-none absolute inset-0 z-20 rounded-full shadow-[inset_0_10px_22px_rgba(255,255,255,0.35),inset_0_-14px_30px_rgba(15,23,42,0.18)]" />
+          <div className="absolute inset-[-8%] transition-transform duration-700 hover:scale-110" style={sphereSurfaceStyle} />
+          <div className="absolute inset-0 z-10 bg-[radial-gradient(circle_at_30%_28%,rgba(255,255,255,0.52),rgba(255,255,255,0.18)_26%,transparent_58%)]" />
+        </div>
+      </div>
+
+      <div className="relative z-10 grid grid-cols-3 gap-2">
+        {[
+          { label: '金属度', value: form.metalness },
+          { label: '粗糙度', value: form.roughness },
+          { label: '透明度', value: form.opacity },
+        ].map((item) => (
+          <div
+            key={item.label}
+            className="rounded-2xl border border-white/70 bg-white/72 px-3 py-2 shadow-[0_10px_24px_rgba(15,23,42,0.05)]"
+          >
+            <p className="text-[10px] font-apple-black uppercase tracking-[0.2em] text-apple-label-tertiary">
+              {item.label}
+            </p>
+            <p className="mt-1 text-sm font-apple-bold tracking-tight text-apple-label-primary">
+              {formatDecimalValue(item.value)}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function FinishPreviewHeader({
   form,
   categoryName,
@@ -600,6 +772,32 @@ export default function MaterialLibraryClient({
     return null
   }, [panel, substrates])
 
+  const finishWorkspaceForm =
+    panel.mode === 'create-finish' || panel.mode === 'edit-finish'
+      ? finishForm
+      : panel.mode === 'view-finish' && selectedFinish
+        ? materialToFinishForm(selectedFinish)
+        : null
+
+  const finishWorkspaceCategoryName = finishWorkspaceForm
+    ? categories.find((item) => item.id === finishWorkspaceForm.categoryId)?.name
+      ?? selectedFinish?.categoryName
+      ?? '未分类'
+    : '未分类'
+
+  const finishWorkspaceCode =
+    panel.mode === 'create-finish'
+      ? '保存后生成'
+      : selectedFinish?.code ?? '系统生成'
+
+  const finishSpotlightPreviewUrl = finishWorkspaceForm
+    ? finishWorkspaceForm.texturePreview
+      || finishWorkspaceForm.textureUrl
+      || finishWorkspaceForm.thumbnailPreview
+      || finishWorkspaceForm.thumbnailUrl
+      || null
+    : null
+
   const liveMetrics = useMemo(
     () =>
       buildLiveMetrics(metrics, {
@@ -637,23 +835,7 @@ export default function MaterialLibraryClient({
   }
 
   function startEditFinish(item: MaterialDTO) {
-    setFinishForm({
-      name: item.name,
-      categoryId: item.categoryId,
-      thumbnailUrl: item.thumbnailUrl ?? '',
-      thumbnailPreview: item.thumbnailUrl ?? '',
-      textureUrl: item.textureUrl ?? '',
-      texturePreview: item.textureUrl ?? '',
-      normalMapUrl: item.normalMapUrl ?? '',
-      normalMapPreview: item.normalMapUrl ?? '',
-      color: item.color ?? '#cccccc',
-      metalness: String(item.metalness ?? 0),
-      roughness: String(item.roughness ?? 0.5),
-      opacity: String(item.opacity ?? 1),
-      textureRepeat: String(item.textureRepeat ?? 1),
-      textureRotation: String(item.textureRotation ?? 0),
-      textureSizeMm: String(item.textureSizeMm ?? 600),
-    })
+    setFinishForm(materialToFinishForm(item))
     setPanel({ mode: 'edit-finish', id: item.id })
   }
 
@@ -1179,428 +1361,421 @@ export default function MaterialLibraryClient({
   let inspectorHeader: ReactNode = null
 
   if (panel.mode === 'empty') {
-    rightContent = (
-      <div className="flex h-full items-center justify-center p-12">
-        <div className="animate-in zoom-in-95 text-center duration-500">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border border-apple-separator/10 bg-apple-bg-secondary">
-            <SwatchBook className="h-8 w-8 text-apple-label-tertiary opacity-50" />
-          </div>
-          <p className="text-apple-sm font-apple-bold uppercase tracking-widest text-apple-label-secondary">
-            选择资料
-          </p>
-          <p className="mt-2 max-w-[240px] text-apple-xs leading-relaxed text-apple-label-tertiary">
-            从左侧选择一个基材或饰面查看详情，也可以直接点击「新建」开始维护。
-          </p>
-        </div>
-      </div>
-    )
-  } else if (panel.mode === 'view-finish' && selectedFinish) {
-    const finishPreview = materialPreviewUrl(selectedFinish)
-    inspectorHeader = (
-      <FinishPreviewHeader
-        form={{
-          ...finishForm,
-          name: selectedFinish.name,
-          categoryId: selectedFinish.categoryId ?? '',
-          thumbnailUrl: selectedFinish.thumbnailUrl ?? '',
-          thumbnailPreview: selectedFinish.thumbnailUrl ?? '',
-          textureUrl: selectedFinish.textureUrl ?? '',
-          texturePreview: selectedFinish.textureUrl ?? selectedFinish.previewUrl ?? '',
-          normalMapUrl: selectedFinish.normalMapUrl ?? '',
-          normalMapPreview: selectedFinish.normalMapUrl ?? '',
-          color: selectedFinish.color || '#cccccc',
-          metalness: String(selectedFinish.metalness),
-          roughness: String(selectedFinish.roughness),
-          opacity: String(selectedFinish.opacity),
-          textureRepeat: String(selectedFinish.textureRepeat ?? 1),
-          textureRotation: String(selectedFinish.textureRotation ?? 0),
-          textureSizeMm: String(selectedFinish.textureSizeMm ?? 600),
-        }}
-        categoryName={selectedFinish.categoryName ?? '未分类'}
-      />
-    )
-
-    rightContent = (
-      <div className="flex h-full flex-col gap-5 overflow-y-auto rounded-apple-lg border border-apple-separator bg-apple-bg-primary p-5">
-        <div className="flex items-center justify-between">
-          <h3 className="text-base font-apple-semibold text-apple-label-primary">花色详情</h3>
-          <div className="flex gap-2">
-            <Button variant="plain" size="small" onClick={() => startEditFinish(selectedFinish)}>
-              <Pencil className="h-3.5 w-3.5" /> 编辑
-            </Button>
-            <Button
-              variant="plain"
-              size="small"
-              className="text-apple-red"
-              onClick={() => setDeleteTarget({ type: 'finish', id: selectedFinish.id, name: selectedFinish.name })}
-            >
-              <Trash2 className="h-3.5 w-3.5" /> 删除
-            </Button>
-          </div>
-        </div>
-
-        {finishPreview ? (
-          <img
-            src={finishPreview}
-            alt={selectedFinish.name}
-            className="h-52 w-full cursor-pointer rounded-apple-lg border border-apple-separator object-cover"
-            onClick={() => setPreviewUrl(finishPreview)}
-          />
-        ) : (
-          <div
-            className="h-52 rounded-apple-lg border border-dashed border-apple-separator"
-            style={{ backgroundColor: selectedFinish.color }}
-          />
-        )}
-
-        <div className="grid grid-cols-2 gap-3">
-          <div>
-            <p className="text-xs text-apple-label-tertiary">编码</p>
-            <p className="text-sm font-apple-medium text-apple-label-primary">{selectedFinish.code}</p>
-          </div>
-          <div>
-            <p className="text-xs text-apple-label-tertiary">分类</p>
-            <p className="text-sm text-apple-label-primary">{selectedFinish.categoryName ?? '-'}</p>
-          </div>
-          <div>
-            <p className="text-xs text-apple-label-tertiary">基础颜色</p>
-            <div className="flex items-center gap-2">
-              <span
-                className="h-4 w-4 rounded-full border border-apple-separator"
-                style={{ backgroundColor: selectedFinish.color }}
-              />
-              <p className="text-sm text-apple-label-primary">{selectedFinish.color}</p>
+    if (activeTab === 'finish') {
+      rightContent = (
+        <div className="grid h-full min-h-[720px] grid-rows-[320px_minmax(0,1fr)]">
+          <div className="border-b border-apple-separator/10 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.96),rgba(241,245,249,0.84)_48%,rgba(235,240,245,0.92)_100%)]">
+            <div className="flex h-full flex-col items-center justify-center px-8 text-center">
+              <div className="mb-5 flex h-20 w-20 items-center justify-center rounded-full border border-white/80 bg-white/78 shadow-[0_22px_44px_rgba(15,23,42,0.1)]">
+                <SwatchBook className="h-9 w-9 text-apple-label-tertiary opacity-55" />
+              </div>
+              <p className="text-sm font-apple-black uppercase tracking-[0.22em] text-apple-label-secondary">
+                实时预览区
+              </p>
+              <p className="mt-3 max-w-[280px] text-sm leading-relaxed text-apple-label-tertiary">
+                先从左侧选一个花色，右侧上半区会立即显示材质预览，下半区进入参数维护。
+              </p>
             </div>
           </div>
-          <div>
-            <p className="text-xs text-apple-label-tertiary">透明度</p>
-            <p className="text-sm text-apple-label-primary">{selectedFinish.opacity}</p>
-          </div>
-          <div>
-            <p className="text-xs text-apple-label-tertiary">金属度</p>
-            <p className="text-sm text-apple-label-primary">{selectedFinish.metalness}</p>
-          </div>
-          <div>
-            <p className="text-xs text-apple-label-tertiary">粗糙度</p>
-            <p className="text-sm text-apple-label-primary">{selectedFinish.roughness}</p>
-          </div>
-          <div>
-            <p className="text-xs text-apple-label-tertiary">纹理重复</p>
-            <p className="text-sm text-apple-label-primary">{selectedFinish.textureRepeat}</p>
-          </div>
-          <div>
-            <p className="text-xs text-apple-label-tertiary">纹理旋转</p>
-            <p className="text-sm text-apple-label-primary">{selectedFinish.textureRotation}</p>
-          </div>
-          <div>
-            <p className="text-xs text-apple-label-tertiary">纹理实物宽度</p>
-            <p className="text-sm text-apple-label-primary">{selectedFinish.textureSizeMm} mm</p>
+
+          <div className="flex flex-col justify-center px-7 py-8">
+            <div className="rounded-[24px] border border-dashed border-apple-separator/30 bg-white/50 p-6 text-center">
+              <p className="text-[10px] font-apple-black uppercase tracking-[0.2em] text-apple-label-tertiary">
+                Material Controls
+              </p>
+              <p className="mt-3 text-sm font-apple-bold text-apple-label-primary">参数工作区待激活</p>
+              <p className="mt-2 text-sm leading-relaxed text-apple-label-tertiary">
+                这里会显示金属度、粗糙度、透明度滑块，以及贴图、颜色和纹理参数。
+              </p>
+            </div>
           </div>
         </div>
+      )
+    } else {
+      rightContent = (
+        <div className="flex h-full items-center justify-center p-12">
+          <div className="animate-in zoom-in-95 text-center duration-500">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border border-apple-separator/10 bg-apple-bg-secondary">
+              <SwatchBook className="h-8 w-8 text-apple-label-tertiary opacity-50" />
+            </div>
+            <p className="text-apple-sm font-apple-bold uppercase tracking-widest text-apple-label-secondary">
+              选择资料
+            </p>
+            <p className="mt-2 max-w-[240px] text-apple-xs leading-relaxed text-apple-label-tertiary">
+              从左侧选择一个基材或饰面查看详情，也可以直接点击「新建」开始维护。
+            </p>
+          </div>
+        </div>
+      )
+    }
+  } else if (panel.mode === 'view-finish' && selectedFinish) {
+    const viewForm = materialToFinishForm(selectedFinish)
+    rightContent = (
+      <div className="grid h-full min-h-[760px] grid-rows-[340px_minmax(0,1fr)]">
+        <FinishWorkbenchPreviewCard
+          form={viewForm}
+          categoryName={selectedFinish.categoryName ?? '未分类'}
+          code={selectedFinish.code}
+          statusLabel="Selected Finish"
+        />
 
-        <div className="grid grid-cols-2 gap-3">
-          <button
-            type="button"
-            className="rounded-apple-lg border border-apple-separator bg-apple-bg-secondary/40 p-3 text-left"
-            onClick={() => selectedFinish.textureUrl && setPreviewUrl(selectedFinish.textureUrl)}
-          >
-            <p className="text-xs text-apple-label-tertiary">颜色纹理</p>
-            {selectedFinish.textureUrl ? (
-              <img
-                src={selectedFinish.textureUrl}
-                alt=""
-                className="mt-2 h-24 w-full rounded-apple-md object-cover"
+        <div className="min-h-0 overflow-y-auto bg-white/72 px-6 py-6">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <p className="text-[10px] font-apple-black uppercase tracking-[0.2em] text-apple-label-tertiary">
+                Material Controls
+              </p>
+              <h3 className="mt-2 text-lg font-apple-bold tracking-tight text-apple-label-primary">
+                花色参数概览
+              </h3>
+              <p className="mt-1 text-sm text-apple-label-tertiary">
+                右上是实时预览，右下固定展示材质参数；如需调整，可直接进入编辑。
+              </p>
+            </div>
+
+            <div className="flex gap-2">
+              <Button variant="plain" size="small" onClick={() => startEditFinish(selectedFinish)}>
+                <Pencil className="h-3.5 w-3.5" /> 编辑
+              </Button>
+              <Button
+                variant="plain"
+                size="small"
+                className="text-apple-red"
+                onClick={() =>
+                  setDeleteTarget({ type: 'finish', id: selectedFinish.id, name: selectedFinish.name })
+                }
+              >
+                <Trash2 className="h-3.5 w-3.5" /> 删除
+              </Button>
+            </div>
+          </div>
+
+          <div className="mt-5 space-y-5">
+            <div className="grid gap-4 xl:grid-cols-2">
+              <Input label="花色名称" value={selectedFinish.name} readOnly />
+              <Input label="花色分类" value={selectedFinish.categoryName ?? '未分类'} readOnly />
+            </div>
+
+            <div className="grid gap-4 xl:grid-cols-2">
+              <div className="rounded-[22px] border border-apple-separator/15 bg-white/72 p-4 shadow-[0_12px_28px_rgba(15,23,42,0.05)]">
+                <p className="text-xs font-apple-bold uppercase tracking-[0.18em] text-apple-label-tertiary">
+                  基础颜色
+                </p>
+                <div className="mt-3 flex items-center gap-3">
+                  <div
+                    className="h-11 w-11 rounded-2xl border border-white/80 shadow-[inset_0_2px_8px_rgba(15,23,42,0.08)]"
+                    style={{ backgroundColor: selectedFinish.color }}
+                  />
+                  <div className="rounded-2xl border border-apple-separator/20 bg-white/75 px-3 py-2 text-sm font-apple-bold tracking-tight text-apple-label-primary">
+                    {selectedFinish.color}
+                  </div>
+                </div>
+              </div>
+
+              <Input label="纹理实物宽度（mm）" value={String(selectedFinish.textureSizeMm)} readOnly />
+            </div>
+
+            <div className="grid gap-4">
+              <FinishParameterSliderField
+                id="finish-metalness"
+                label="金属度"
+                value={viewForm.metalness}
+                helper="当前花色的金属反射强度。"
+                disabled
+                onChange={() => {}}
               />
-            ) : (
-              <p className="mt-2 text-sm text-apple-label-tertiary">未上传</p>
-            )}
-          </button>
-          <button
-            type="button"
-            className="rounded-apple-lg border border-apple-separator bg-apple-bg-secondary/40 p-3 text-left"
-            onClick={() => selectedFinish.normalMapUrl && setPreviewUrl(selectedFinish.normalMapUrl)}
-          >
-            <p className="text-xs text-apple-label-tertiary">法线贴图</p>
-            {selectedFinish.normalMapUrl ? (
-              <img
-                src={selectedFinish.normalMapUrl}
-                alt=""
-                className="mt-2 h-24 w-full rounded-apple-md object-cover"
+              <FinishParameterSliderField
+                id="finish-roughness"
+                label="粗糙度"
+                value={viewForm.roughness}
+                helper="当前花色的表面漫反射程度。"
+                disabled
+                onChange={() => {}}
               />
-            ) : (
-              <p className="mt-2 text-sm text-apple-label-tertiary">未上传</p>
-            )}
-          </button>
+              <FinishParameterSliderField
+                id="finish-opacity"
+                label="透明度"
+                value={viewForm.opacity}
+                helper="当前花色的透光程度。"
+                disabled
+                onChange={() => {}}
+              />
+            </div>
+
+            <div className="grid gap-4 xl:grid-cols-2">
+              <Input label="纹理重复" value={String(selectedFinish.textureRepeat)} readOnly />
+              <Input label="纹理旋转" value={String(selectedFinish.textureRotation)} readOnly />
+            </div>
+
+            <div className="grid gap-3 xl:grid-cols-3">
+              {[
+                { title: '缩略图', preview: viewForm.thumbnailPreview },
+                { title: '颜色纹理', preview: viewForm.texturePreview },
+                { title: '法线贴图', preview: viewForm.normalMapPreview },
+              ].map((asset) => (
+                <div
+                  key={asset.title}
+                  className="space-y-3 rounded-[22px] border border-apple-separator/15 bg-white/72 p-4 shadow-[0_12px_28px_rgba(15,23,42,0.05)]"
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="text-sm font-apple-bold tracking-tight text-apple-label-primary">
+                      {asset.title}
+                    </p>
+                    {asset.preview && (
+                      <button
+                        type="button"
+                        className="text-[11px] font-apple-bold text-apple-blue"
+                        onClick={() => setPreviewUrl(asset.preview ?? null)}
+                      >
+                        放大
+                      </button>
+                    )}
+                  </div>
+
+                  {asset.preview ? (
+                    <img src={asset.preview} alt="" className="h-28 w-full rounded-[18px] object-cover" />
+                  ) : (
+                    <div className="flex h-28 items-center justify-center rounded-[18px] border border-dashed border-apple-separator/35 text-apple-label-tertiary">
+                      <ImagePlus className="h-6 w-6" />
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     )
   } else if (panel.mode === 'create-finish' || panel.mode === 'edit-finish') {
     const isCreate = panel.mode === 'create-finish'
-    const categoryName = categories.find((item) => item.id === finishForm.categoryId)?.name ?? '未分类'
-    inspectorHeader = <FinishPreviewHeader form={finishForm} categoryName={categoryName} isEdit />
-
     rightContent = (
-      <div className="flex h-full flex-col gap-5 overflow-y-auto rounded-apple-lg border border-apple-separator bg-apple-bg-primary p-5">
-        <div className="flex items-center justify-between">
-          <h3 className="text-base font-apple-semibold text-apple-label-primary">
-            {isCreate ? '新建花色' : '编辑花色'}
-          </h3>
-          <Button
-            variant="plain"
-            size="small"
-            onClick={() => {
-              if (isCreate) setPanel({ mode: 'empty' })
-              else setPanel({ mode: 'view-finish', id: panel.id })
-            }}
-          >
-            取消
-          </Button>
-        </div>
+      <div className="grid h-full min-h-[760px] grid-rows-[340px_minmax(0,1fr)]">
+        <FinishWorkbenchPreviewCard
+          form={finishForm}
+          categoryName={finishWorkspaceCategoryName}
+          code={finishWorkspaceCode}
+          statusLabel="Material Editing"
+        />
 
-        <div className="space-y-4">
-          <Input
-            label="花色名称"
-            value={finishForm.name}
-            onChange={(event) => setFinishForm((current) => ({ ...current, name: event.target.value }))}
-            placeholder="例如 北美橡木"
-          />
-          <Select
-            label="花色分类"
-            value={finishForm.categoryId}
-            onChange={(event) => setFinishForm((current) => ({ ...current, categoryId: event.target.value }))}
-            options={categories.map((item) => ({ value: item.id, label: item.name }))}
-          />
-
-          <div className="grid grid-cols-2 gap-3">
+        <div className="min-h-0 overflow-y-auto bg-white/72 px-6 py-6">
+          <div className="flex items-start justify-between gap-3">
             <div>
-              <label className="mb-1.5 block text-xs font-apple-medium text-apple-label-secondary">
-                基础颜色
-              </label>
-              <div className="flex items-center gap-3 rounded-apple-lg border border-apple-separator bg-apple-bg-secondary/40 px-3 py-2">
-                <input
-                  type="color"
-                  value={finishForm.color}
-                  onChange={(event) =>
-                    setFinishForm((current) => ({ ...current, color: event.target.value }))
-                  }
-                  className="h-10 w-12 rounded border border-apple-separator bg-transparent"
-                />
-                <Input
-                  value={finishForm.color}
-                  onChange={(event) =>
-                    setFinishForm((current) => ({ ...current, color: event.target.value }))
-                  }
-                />
-              </div>
-            </div>
-            <Input
-              label="纹理实物宽度（mm）"
-              value={finishForm.textureSizeMm}
-              onChange={(event) =>
-                setFinishForm((current) => ({ ...current, textureSizeMm: event.target.value }))
-              }
-            />
-            <Input
-              label="金属度"
-              value={finishForm.metalness}
-              onChange={(event) =>
-                setFinishForm((current) => ({ ...current, metalness: event.target.value }))
-              }
-            />
-            <Input
-              label="粗糙度"
-              value={finishForm.roughness}
-              onChange={(event) =>
-                setFinishForm((current) => ({ ...current, roughness: event.target.value }))
-              }
-            />
-            <Input
-              label="透明度"
-              value={finishForm.opacity}
-              onChange={(event) =>
-                setFinishForm((current) => ({ ...current, opacity: event.target.value }))
-              }
-            />
-            <Input
-              label="纹理重复"
-              value={finishForm.textureRepeat}
-              onChange={(event) =>
-                setFinishForm((current) => ({ ...current, textureRepeat: event.target.value }))
-              }
-            />
-            <Input
-              label="纹理旋转"
-              value={finishForm.textureRotation}
-              onChange={(event) =>
-                setFinishForm((current) => ({ ...current, textureRotation: event.target.value }))
-              }
-            />
-          </div>
-
-          <div className="grid grid-cols-3 gap-3">
-            <div className="space-y-2 rounded-apple-lg border border-apple-separator bg-apple-bg-secondary/30 p-3">
-              <p className="text-sm font-apple-medium text-apple-label-primary">缩略图</p>
-              {finishForm.thumbnailPreview ? (
-                <img
-                  src={finishForm.thumbnailPreview}
-                  alt=""
-                  className="h-28 w-full rounded-apple-md object-cover"
-                />
-              ) : (
-                <div className="flex h-28 items-center justify-center rounded-apple-md border border-dashed border-apple-separator text-apple-label-tertiary">
-                  <ImagePlus className="h-6 w-6" />
-                </div>
-              )}
-              <input
-                ref={thumbnailInputRef}
-                type="file"
-                accept="image/jpeg,image/png,image/webp"
-                className="hidden"
-                onChange={(event) => {
-                  const file = event.target.files?.[0]
-                  if (file) {
-                    void handleMaterialAssetUpload('thumbnail', file)
-                  }
-                  event.target.value = ''
-                }}
-              />
-              <div className="flex gap-2">
-                <Button
-                  variant="plain"
-                  size="small"
-                  onClick={() => thumbnailInputRef.current?.click()}
-                  loading={uploadingAsset === 'thumbnail'}
-                >
-                  <ImagePlus className="h-3.5 w-3.5" />
-                  上传
-                </Button>
-                {finishForm.thumbnailPreview && (
-                  <Button
-                    variant="plain"
-                    size="small"
-                    className="text-apple-red"
-                    onClick={() =>
-                      setFinishForm((current) => ({
-                        ...current,
-                        thumbnailUrl: '',
-                        thumbnailPreview: '',
-                      }))
-                    }
-                  >
-                    清除
-                  </Button>
-                )}
-              </div>
+              <p className="text-[10px] font-apple-black uppercase tracking-[0.2em] text-apple-label-tertiary">
+                Material Controls
+              </p>
+              <h3 className="mt-2 text-lg font-apple-bold tracking-tight text-apple-label-primary">
+                {isCreate ? '新建花色工作台' : '编辑材质参数'}
+              </h3>
+              <p className="mt-1 text-sm text-apple-label-tertiary">
+                预览始终在上面，参数始终在下面，调整时不会再被旧布局打散。
+              </p>
             </div>
 
-            <div className="space-y-2 rounded-apple-lg border border-apple-separator bg-apple-bg-secondary/30 p-3">
-              <p className="text-sm font-apple-medium text-apple-label-primary">颜色纹理</p>
-              {finishForm.texturePreview ? (
-                <img src={finishForm.texturePreview} alt="" className="h-28 w-full rounded-apple-md object-cover" />
-              ) : (
-                <div className="flex h-28 items-center justify-center rounded-apple-md border border-dashed border-apple-separator text-apple-label-tertiary">
-                  <ImagePlus className="h-6 w-6" />
-                </div>
-              )}
-              <input
-                ref={textureInputRef}
-                type="file"
-                accept="image/jpeg,image/png,image/webp"
-                className="hidden"
-                onChange={(event) => {
-                  const file = event.target.files?.[0]
-                  if (file) {
-                    void handleMaterialAssetUpload('texture', file)
-                  }
-                  event.target.value = ''
-                }}
-              />
-              <div className="flex gap-2">
-                <Button
-                  variant="plain"
-                  size="small"
-                  onClick={() => textureInputRef.current?.click()}
-                  loading={uploadingAsset === 'texture'}
-                >
-                  <ImagePlus className="h-3.5 w-3.5" />
-                  上传
-                </Button>
-                {finishForm.texturePreview && (
-                  <Button
-                    variant="plain"
-                    size="small"
-                    className="text-apple-red"
-                    onClick={() =>
-                      setFinishForm((current) => ({
-                        ...current,
-                        textureUrl: '',
-                        texturePreview: '',
-                      }))
-                    }
-                  >
-                    清除
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            <div className="space-y-2 rounded-apple-lg border border-apple-separator bg-apple-bg-secondary/30 p-3">
-              <p className="text-sm font-apple-medium text-apple-label-primary">法线贴图</p>
-              {finishForm.normalMapPreview ? (
-                <img src={finishForm.normalMapPreview} alt="" className="h-28 w-full rounded-apple-md object-cover" />
-              ) : (
-                <div className="flex h-28 items-center justify-center rounded-apple-md border border-dashed border-apple-separator text-apple-label-tertiary">
-                  <ImagePlus className="h-6 w-6" />
-                </div>
-              )}
-              <input
-                ref={normalMapInputRef}
-                type="file"
-                accept="image/jpeg,image/png,image/webp"
-                className="hidden"
-                onChange={(event) => {
-                  const file = event.target.files?.[0]
-                  if (file) {
-                    void handleMaterialAssetUpload('normal', file)
-                  }
-                  event.target.value = ''
-                }}
-              />
-              <div className="flex gap-2">
-                <Button
-                  variant="plain"
-                  size="small"
-                  onClick={() => normalMapInputRef.current?.click()}
-                  loading={uploadingAsset === 'normal'}
-                >
-                  <ImagePlus className="h-3.5 w-3.5" />
-                  上传
-                </Button>
-                {finishForm.normalMapPreview && (
-                  <Button
-                    variant="plain"
-                    size="small"
-                    className="text-apple-red"
-                    onClick={() =>
-                      setFinishForm((current) => ({
-                        ...current,
-                        normalMapUrl: '',
-                        normalMapPreview: '',
-                      }))
-                    }
-                  >
-                    清除
-                  </Button>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className="flex justify-end gap-2 pt-2">
-            <Button size="small" onClick={handleSaveFinish} loading={submitting}>
-              {isCreate ? '创建' : '保存'}
+            <Button
+              variant="plain"
+              size="small"
+              onClick={() => {
+                if (isCreate) setPanel({ mode: 'empty' })
+                else setPanel({ mode: 'view-finish', id: panel.id })
+              }}
+            >
+              取消
             </Button>
           </div>
+
+          <div className="mt-5 space-y-5">
+            <div className="grid gap-4 xl:grid-cols-2">
+              <Input
+                label="花色名称"
+                value={finishForm.name}
+                onChange={(event) => setFinishForm((current) => ({ ...current, name: event.target.value }))}
+                placeholder="例如 北美橡木"
+              />
+
+              <Select
+                label="花色分类"
+                value={finishForm.categoryId}
+                onChange={(event) => setFinishForm((current) => ({ ...current, categoryId: event.target.value }))}
+                options={categories.map((item) => ({ value: item.id, label: item.name }))}
+              />
+            </div>
+
+            <div className="grid gap-4 xl:grid-cols-2">
+              <div className="rounded-[22px] border border-apple-separator/15 bg-white/72 p-4 shadow-[0_12px_28px_rgba(15,23,42,0.05)]">
+                <p className="text-xs font-apple-bold uppercase tracking-[0.18em] text-apple-label-tertiary">
+                  基础颜色
+                </p>
+                <div className="mt-3 flex items-center gap-3">
+                  <input
+                    type="color"
+                    value={finishForm.color}
+                    onChange={(event) =>
+                      setFinishForm((current) => ({ ...current, color: event.target.value }))
+                    }
+                    className="h-11 w-12 rounded-xl border border-apple-separator bg-transparent"
+                  />
+                  <div
+                    className="h-11 w-11 rounded-2xl border border-white/80 shadow-[inset_0_2px_8px_rgba(15,23,42,0.08)]"
+                    style={{ backgroundColor: finishForm.color }}
+                  />
+                  <div className="rounded-2xl border border-apple-separator/20 bg-white/75 px-3 py-2 text-sm font-apple-bold tracking-tight text-apple-label-primary">
+                    {finishForm.color}
+                  </div>
+                </div>
+              </div>
+
+              <Input
+                label="纹理实物宽度（mm）"
+                value={finishForm.textureSizeMm}
+                onChange={(event) =>
+                  setFinishForm((current) => ({ ...current, textureSizeMm: event.target.value }))
+                }
+              />
+            </div>
+
+            <div className="grid gap-4">
+              <FinishParameterSliderField
+                id="finish-metalness"
+                label="金属度"
+                value={finishForm.metalness}
+                helper="控制材质的金属反射强度，越高越接近金属质感。"
+                onChange={(nextValue) =>
+                  setFinishForm((current) => ({ ...current, metalness: nextValue }))
+                }
+              />
+              <FinishParameterSliderField
+                id="finish-roughness"
+                label="粗糙度"
+                value={finishForm.roughness}
+                helper="控制表面漫反射程度，越低越光滑，越高越哑光。"
+                onChange={(nextValue) =>
+                  setFinishForm((current) => ({ ...current, roughness: nextValue }))
+                }
+              />
+              <FinishParameterSliderField
+                id="finish-opacity"
+                label="透明度"
+                value={finishForm.opacity}
+                helper="控制材质透光程度，1 为完全不透明，越低越透明。"
+                onChange={(nextValue) =>
+                  setFinishForm((current) => ({ ...current, opacity: nextValue }))
+                }
+              />
+            </div>
+
+            <div className="grid gap-4 xl:grid-cols-2">
+              <Input
+                label="纹理重复"
+                value={finishForm.textureRepeat}
+                onChange={(event) =>
+                  setFinishForm((current) => ({ ...current, textureRepeat: event.target.value }))
+                }
+              />
+              <Input
+                label="纹理旋转"
+                value={finishForm.textureRotation}
+                onChange={(event) =>
+                  setFinishForm((current) => ({ ...current, textureRotation: event.target.value }))
+                }
+              />
+            </div>
+
+            <div className="grid gap-3 xl:grid-cols-3">
+              {[
+                {
+                  key: 'thumbnail' as const,
+                  title: '缩略图',
+                  preview: finishForm.thumbnailPreview,
+                  inputRef: thumbnailInputRef,
+                  onClear: () =>
+                    setFinishForm((current) => ({
+                      ...current,
+                      thumbnailUrl: '',
+                      thumbnailPreview: '',
+                    })),
+                },
+                {
+                  key: 'texture' as const,
+                  title: '颜色纹理',
+                  preview: finishForm.texturePreview,
+                  inputRef: textureInputRef,
+                  onClear: () =>
+                    setFinishForm((current) => ({
+                      ...current,
+                      textureUrl: '',
+                      texturePreview: '',
+                    })),
+                },
+                {
+                  key: 'normal' as const,
+                  title: '法线贴图',
+                  preview: finishForm.normalMapPreview,
+                  inputRef: normalMapInputRef,
+                  onClear: () =>
+                    setFinishForm((current) => ({
+                      ...current,
+                      normalMapUrl: '',
+                      normalMapPreview: '',
+                    })),
+                },
+              ].map((asset) => (
+                <div
+                  key={asset.key}
+                  className="space-y-3 rounded-[22px] border border-apple-separator/15 bg-white/72 p-4 shadow-[0_12px_28px_rgba(15,23,42,0.05)]"
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="text-sm font-apple-bold tracking-tight text-apple-label-primary">
+                      {asset.title}
+                    </p>
+                    {asset.preview && (
+                      <button
+                        type="button"
+                        className="text-[11px] font-apple-bold text-apple-blue"
+                        onClick={() => setPreviewUrl(asset.preview ?? null)}
+                      >
+                        放大
+                      </button>
+                    )}
+                  </div>
+
+                  {asset.preview ? (
+                    <img src={asset.preview} alt="" className="h-28 w-full rounded-[18px] object-cover" />
+                  ) : (
+                    <div className="flex h-28 items-center justify-center rounded-[18px] border border-dashed border-apple-separator/35 text-apple-label-tertiary">
+                      <ImagePlus className="h-6 w-6" />
+                    </div>
+                  )}
+
+                  <div className="flex gap-2">
+                    <Button
+                      variant="plain"
+                      size="small"
+                      onClick={() => asset.inputRef.current?.click()}
+                      loading={uploadingAsset === asset.key}
+                    >
+                      <ImagePlus className="h-3.5 w-3.5" /> 上传
+                    </Button>
+                    {asset.preview && (
+                      <Button
+                        variant="plain"
+                        size="small"
+                        className="text-apple-red"
+                        onClick={asset.onClear}
+                      >
+                        清除
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex justify-end gap-2 pt-1">
+              <Button size="small" onClick={handleSaveFinish} loading={submitting}>
+                {isCreate ? '创建' : '保存'}
+              </Button>
+            </div>
+          </div>
         </div>
       </div>
     )
@@ -2036,7 +2211,7 @@ export default function MaterialLibraryClient({
           </Button>
         }
         metrics={liveMetrics}
-        rightPanelClassName="w-[760px] max-w-[65vw]"
+        rightPanelClassName={activeTab === 'finish' ? 'w-[520px] max-w-[42vw]' : 'w-[760px] max-w-[65vw]'}
         leftContent={
           <div className="flex h-full flex-col gap-6">
             <div className="space-y-1.5">
@@ -2158,7 +2333,105 @@ export default function MaterialLibraryClient({
               </div>
             )}
 
-            <div className="space-y-4">
+            <div className="rounded-[24px] border border-white/50 bg-white/60 p-5 shadow-[0_16px_32px_rgba(15,23,42,0.05)] backdrop-blur-xl">
+              {activeTab === 'finish' ? (
+                <div className="flex h-full flex-col gap-4">
+                  <div>
+                    <p className="text-[10px] font-apple-black uppercase tracking-[0.2em] text-apple-label-tertiary">
+                      Precision Material Definition Workspace
+                    </p>
+                    <h3 className="mt-2 text-xl font-apple-bold tracking-tight text-apple-label-primary">
+                      物料定义
+                    </h3>
+                    <p className="mt-2 text-sm leading-relaxed text-apple-label-tertiary">
+                      左侧挑选花色，右侧上半区实时预览，下半区集中调金属度、粗糙度、透明度和纹理参数。
+                    </p>
+                  </div>
+
+                  <div className="flex items-center gap-4 rounded-[20px] border border-apple-separator/15 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.92),rgba(244,247,250,0.82)_55%,rgba(235,240,245,0.88)_100%)] p-4">
+                    <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-[22px] border border-white/70 bg-white shadow-[0_18px_36px_rgba(15,23,42,0.08)]">
+                      {finishSpotlightPreviewUrl ? (
+                        <img
+                          src={finishSpotlightPreviewUrl}
+                          alt=""
+                          className="h-full w-full object-cover"
+                        />
+                      ) : (
+                        <div
+                          className="h-full w-full"
+                          style={{ backgroundColor: finishWorkspaceForm?.color ?? '#d9dee5' }}
+                        />
+                      )}
+                    </div>
+
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-base font-apple-bold tracking-tight text-apple-label-primary">
+                        {finishWorkspaceForm?.name || '等待选择花色'}
+                      </p>
+                      <p className="mt-1 text-[11px] font-apple-bold uppercase tracking-[0.18em] text-apple-label-tertiary">
+                        {finishWorkspaceCategoryName} · {finishWorkspaceCode}
+                      </p>
+                      <div className="mt-3 grid grid-cols-3 gap-2">
+                        {[
+                          { label: '金属度', value: finishWorkspaceForm?.metalness ?? '0' },
+                          { label: '粗糙度', value: finishWorkspaceForm?.roughness ?? '0.5' },
+                          { label: '透明度', value: finishWorkspaceForm?.opacity ?? '1' },
+                        ].map((item) => (
+                          <div
+                            key={item.label}
+                            className="rounded-2xl border border-white/70 bg-white/75 px-2.5 py-2"
+                          >
+                            <p className="text-[10px] font-apple-black uppercase tracking-[0.16em] text-apple-label-tertiary">
+                              {item.label}
+                            </p>
+                            <p className="mt-1 text-sm font-apple-bold tracking-tight text-apple-label-primary">
+                              {formatDecimalValue(item.value)}
+                            </p>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex h-full flex-col gap-4">
+                  <div>
+                    <p className="text-[10px] font-apple-black uppercase tracking-[0.2em] text-apple-label-tertiary">
+                      Technical Dictionary Workspace
+                    </p>
+                    <h3 className="mt-2 text-xl font-apple-bold tracking-tight text-apple-label-primary">
+                      基材定义
+                    </h3>
+                    <p className="mt-2 text-sm leading-relaxed text-apple-label-tertiary">
+                      这里维护基材主类、环保等级、厚度规格和系统名称，下面的卡片区继续负责资料查找与新增。
+                    </p>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    {[
+                      { label: '基材总数', value: substrates.length },
+                      { label: '花色总数', value: finishes.length },
+                      { label: '字典项', value: dictionaries.categories.length + dictionaries.environmentGrades.length + dictionaries.thicknessSpecs.length + dictionaries.surfaceOptions.length + dictionaries.systemNameOptions.length },
+                      { label: '当前系统名', value: previewSystemName || '未设置' },
+                    ].map((item) => (
+                      <div
+                        key={item.label}
+                        className="rounded-[20px] border border-apple-separator/15 bg-white/75 px-4 py-3"
+                      >
+                        <p className="text-[10px] font-apple-black uppercase tracking-[0.18em] text-apple-label-tertiary">
+                          {item.label}
+                        </p>
+                        <p className="mt-2 truncate text-base font-apple-bold tracking-tight text-apple-label-primary">
+                          {item.value}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-4 rounded-[24px] border border-white/50 bg-white/55 p-5 shadow-[0_16px_32px_rgba(15,23,42,0.05)] backdrop-blur-xl">
               <div className="group relative px-1">
                 <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-apple-label-tertiary transition-colors group-focus-within:text-apple-blue" />
                 <input
@@ -2201,31 +2474,31 @@ export default function MaterialLibraryClient({
                 filteredFinishes.length === 0 ? (
                   <p className="py-6 text-center text-sm text-apple-label-tertiary">未找到花色</p>
                 ) : (
-                  <div className="grid grid-cols-1 gap-2">
+                  <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
                     {filteredFinishes.map((item) => (
                       <button
                         key={item.id}
                         type="button"
                         onClick={() => selectFinish(item)}
                         className={cn(
-                          'group flex items-center gap-4 rounded-apple-lg p-3 text-left transition-all duration-300',
+                          'group flex flex-col gap-3 rounded-[24px] border p-3 text-left transition-all duration-300',
                           isFinishSelected(item.id)
-                            ? 'translate-x-1 bg-white shadow-apple-md ring-1 ring-apple-blue/10'
-                            : 'bg-transparent hover:bg-white/40',
+                            ? 'translate-y-[-2px] border-apple-blue/20 bg-white shadow-[0_18px_36px_rgba(15,23,42,0.1)] ring-1 ring-apple-blue/10'
+                            : 'border-white/30 bg-white/42 hover:-translate-y-[2px] hover:bg-white/70',
                         )}
                       >
-                        <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-apple-md shadow-apple-xs transition-transform duration-300 group-hover:scale-105">
+                        <div className="relative aspect-[4/3] w-full overflow-hidden rounded-[20px] shadow-[0_12px_24px_rgba(15,23,42,0.08)] transition-transform duration-300 group-hover:scale-[1.02]">
                           {materialPreviewUrl(item) ? (
                             <img src={materialPreviewUrl(item)!} alt={item.name} className="h-full w-full object-cover" />
                           ) : (
                             <div className="h-full w-full" style={{ backgroundColor: item.color }} />
                           )}
                         </div>
-                        <div className="min-w-0 flex-1">
-                          <p className={cn('truncate text-sm font-apple-bold tracking-tight', isFinishSelected(item.id) ? 'text-apple-blue' : 'text-apple-label-primary')}>
+                        <div className="min-w-0 flex-1 px-1 pb-1">
+                          <p className={cn('truncate text-base font-apple-bold tracking-tight', isFinishSelected(item.id) ? 'text-apple-blue' : 'text-apple-label-primary')}>
                             {item.name}
                           </p>
-                          <p className="text-[10px] font-apple-medium uppercase tracking-tighter text-apple-label-tertiary">
+                          <p className="mt-1 text-[10px] font-apple-medium uppercase tracking-[0.16em] text-apple-label-tertiary">
                             {item.code || '无编码'} · {item.categoryName ?? '未分类'}
                           </p>
                         </div>
@@ -2236,7 +2509,7 @@ export default function MaterialLibraryClient({
               ) : filteredSubstrates.length === 0 ? (
                 <p className="py-6 text-center text-sm text-apple-label-tertiary">未找到基材</p>
               ) : (
-                <div className="grid grid-cols-1 gap-2">
+                <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
                   {filteredSubstrates.map((item) => (
                     <button
                       key={item.id}
diff --git a/furniture-3d-system/src/app/layout.tsx b/furniture-3d-system/src/app/layout.tsx
index b4f7371f..b898b54d 100644
--- a/furniture-3d-system/src/app/layout.tsx
+++ b/furniture-3d-system/src/app/layout.tsx
@@ -60,7 +60,7 @@ export default function RootLayout({
         </Script>
         
         {/* 网站图标 */}
-        <link rel="icon" href={APP_BRAND_LOGO_SRC} type="image/svg+xml" />
+        <link rel="icon" href={APP_BRAND_LOGO_SRC} type="image/png" />
         <link rel="apple-touch-icon" href={APP_BRAND_LOGO_SRC} />
         
         {/* 移动端优化 */}
diff --git a/furniture-3d-system/src/lib/branding.ts b/furniture-3d-system/src/lib/branding.ts
index b40eb4e1..3d7be360 100644
--- a/furniture-3d-system/src/lib/branding.ts
+++ b/furniture-3d-system/src/lib/branding.ts
@@ -1,2 +1,2 @@
 export const APP_BRAND_NAME = '由壹点「产品开发平台」'
-export const APP_BRAND_LOGO_SRC = '/yidian-brand-logo.svg'
+export const APP_BRAND_LOGO_SRC = '/custom-logo.png'