feat: refresh branding and material library workspace

This commit is contained in:
WuYongJie 2026-04-17 11:07:18 +08:00
parent d7737909bb
commit 87bb0e126d
11 changed files with 770 additions and 442 deletions

View File

@ -1,4 +1,4 @@
# 3D 家具开品平台工作区 # 由壹点「产品开发平台」工作区
> 最后更新:2026-04-07 > 最后更新:2026-04-07
> 当前主线:`资产中心 -> 自动组合 -> 草稿组 -> 包装方案 -> 正式入库 -> 轻仓库` > 当前主线:`资产中心 -> 自动组合 -> 草稿组 -> 包装方案 -> 正式入库 -> 轻仓库`

View File

@ -212,3 +212,43 @@
| `src/app/warehouse/WarehouseClient.tsx` | 移除 headerTools/eyebrow | | `src/app/warehouse/WarehouseClient.tsx` | 移除 headerTools/eyebrow |
| `src/app/HomeClient.workspace.tsx` | 移除 topTools 传参 | | `src/app/HomeClient.workspace.tsx` | 移除 topTools 传参 |
| ~20 个业务文件 | 硬编码颜色替换 | | ~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` | 重构 | 身份控制中心 (用户管理) 视觉重写 |

View File

@ -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(辅助装配):真实样本联调与验收 - assisted-assembly(辅助装配):真实样本联调与验收
- 负责人:Codex - 负责人:Codex

View File

@ -1,4 +1,4 @@
# 家具开品平台 # 由壹点「产品开发平台」
> 最后更新:2026-04-15 > 最后更新:2026-04-15
> 当前默认主线:`资产中心 -> 辅助装配 -> 草稿组 -> 正式入库 -> 轻仓库` > 当前默认主线:`资产中心 -> 辅助装配 -> 草稿组 -> 正式入库 -> 轻仓库`

View File

@ -1,4 +1,4 @@
# 家具开品平台文档导航 # 由壹点「产品开发平台」文档导航
> 最后更新:2026-04-15 > 最后更新:2026-04-15
> 当前主线入口:`/asset-center -> /assisted-assembly -> /draft-groups -> /intake -> /warehouse` > 当前主线入口:`/asset-center -> /assisted-assembly -> /draft-groups -> /intake -> /warehouse`

View File

@ -1,4 +1,4 @@
# 家具开品平台项目总览 # 由壹点「产品开发平台」项目总览
> 最后更新:2026-04-15 > 最后更新:2026-04-15
> 当前状态:新平台主线已进入真实业务测试与收口阶段 > 当前状态:新平台主线已进入真实业务测试与收口阶段

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

@ -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 userEvent from '@testing-library/user-event'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import MaterialLibraryClient from './MaterialLibraryClient' 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.click(screen.getByRole('button', { name: /新建/ })) await actor.click(screen.getByRole('button', { name: /新建/ }))
await actor.type(screen.getByLabelText('花色名称'), '北美橡木') await actor.type(screen.getByLabelText('花色名称'), '北美橡木')
await actor.clear(screen.getByLabelText('金属度')) fireEvent.change(screen.getByLabelText('金属度'), { target: { value: '0.2' } })
await actor.type(screen.getByLabelText('金属度'), '0.2') fireEvent.change(screen.getByLabelText('粗糙度'), { target: { value: '0.6' } })
await actor.clear(screen.getByLabelText('粗糙度'))
await actor.type(screen.getByLabelText('粗糙度'), '0.6')
await actor.clear(screen.getByLabelText('纹理实物宽度(mm)')) await actor.clear(screen.getByLabelText('纹理实物宽度(mm)'))
await actor.type(screen.getByLabelText('纹理实物宽度(mm)'), '800') await actor.type(screen.getByLabelText('纹理实物宽度(mm)'), '800')
await actor.click(screen.getByRole('button', { name: '创建' })) await actor.click(screen.getByRole('button', { name: '创建' }))

View File

@ -60,7 +60,7 @@ export default function RootLayout({
</Script> </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} /> <link rel="apple-touch-icon" href={APP_BRAND_LOGO_SRC} />
{/* 移动端优化 */} {/* 移动端优化 */}

View File

@ -1,2 +1,2 @@
export const APP_BRAND_NAME = '由壹点「产品开发平台」' export const APP_BRAND_NAME = '由壹点「产品开发平台」'
export const APP_BRAND_LOGO_SRC = '/yidian-brand-logo.svg' export const APP_BRAND_LOGO_SRC = '/custom-logo.png'