收敛模板管理入口样式
This commit is contained in:
WuYongJie
parent
3fabd02ef3
commit
4a2e979c8d
@ -68,7 +68,7 @@ export default function BuiltInTemplateGrid({
|
||||
<p className="text-sm font-semibold text-slate-900 dark:text-white">{preset.name}</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 leading-snug">{preset.description}</p>
|
||||
</div>
|
||||
<span className="px-2.5 py-0.5 rounded-full text-[11px] font-medium text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
|
||||
<span className="px-2.5 py-0.5 rounded-md text-[11px] font-medium text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
|
||||
预制
|
||||
</span>
|
||||
</div>
|
||||
@ -92,7 +92,6 @@ export default function BuiltInTemplateGrid({
|
||||
? styles.buttonStyles.secondary
|
||||
: styles.buttonStyles.secondary,
|
||||
styles.buttonModifiers.compactXs,
|
||||
styles.buttonModifiers.pill,
|
||||
'text-xs'
|
||||
)}
|
||||
title={enabledTemplates.has(preset.key) ? '禁用此模板' : '启用此模板'}
|
||||
@ -113,7 +112,6 @@ export default function BuiltInTemplateGrid({
|
||||
className={cn(
|
||||
styles.buttonStyles.primary,
|
||||
styles.buttonModifiers.compactXs,
|
||||
styles.buttonModifiers.pill,
|
||||
'inline-flex items-center gap-1.5 shadow-none',
|
||||
!canQuickCreate && 'opacity-75'
|
||||
)}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
||||
import ProBadge from '@/components/ui/ProBadge'
|
||||
import type { DisplayTemplate } from './types'
|
||||
|
||||
interface CustomTemplateSectionProps {
|
||||
@ -53,7 +52,11 @@ export default function CustomTemplateSection({
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-white">自定义模板</h3>
|
||||
{!canManageCustomTemplates && <ProBadge size="small" />}
|
||||
{!canManageCustomTemplates && (
|
||||
<span className="inline-flex items-center rounded-md border border-slate-200 bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
|
||||
授权受限
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
|
||||
{canManageCustomTemplates
|
||||
@ -83,8 +86,8 @@ export default function CustomTemplateSection({
|
||||
'border-dashed border-2 border-slate-300 dark:border-slate-600 flex items-center justify-center gap-3'
|
||||
)}
|
||||
>
|
||||
<div className="w-14 h-14 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center flex-shrink-0 transition-colors">
|
||||
<svg className="w-8 h-8 text-slate-400 dark:text-slate-300 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div className="w-9 h-9 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center flex-shrink-0 transition-colors">
|
||||
<svg className="w-5 h-5 text-slate-400 dark:text-slate-300 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</div>
|
||||
@ -120,7 +123,7 @@ export default function CustomTemplateSection({
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-1 text-right">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs font-medium rounded-full transition-all duration-200 ${
|
||||
className={`px-2 py-0.5 text-xs font-medium rounded-md transition-colors ${
|
||||
tpl.status === 'active'
|
||||
? 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300'
|
||||
: tpl.status === 'draft'
|
||||
@ -143,7 +146,6 @@ export default function CustomTemplateSection({
|
||||
className={cn(
|
||||
styles.buttonStyles.secondary,
|
||||
styles.buttonModifiers.compactXs,
|
||||
styles.buttonModifiers.pill,
|
||||
!canManageCustomTemplates && 'opacity-70'
|
||||
)}
|
||||
>
|
||||
@ -159,7 +161,6 @@ export default function CustomTemplateSection({
|
||||
className={cn(
|
||||
styles.buttonStyles.success,
|
||||
styles.buttonModifiers.compactXs,
|
||||
styles.buttonModifiers.pill,
|
||||
!canManageCustomTemplates && 'opacity-70'
|
||||
)}
|
||||
>
|
||||
@ -175,7 +176,6 @@ export default function CustomTemplateSection({
|
||||
className={cn(
|
||||
styles.buttonStyles.secondary,
|
||||
styles.buttonModifiers.compactXs,
|
||||
styles.buttonModifiers.pill,
|
||||
!canManageCustomTemplates && 'opacity-70'
|
||||
)}
|
||||
>
|
||||
@ -190,7 +190,6 @@ export default function CustomTemplateSection({
|
||||
className={cn(
|
||||
styles.buttonStyles.secondary,
|
||||
styles.buttonModifiers.compactXs,
|
||||
styles.buttonModifiers.pill,
|
||||
'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200',
|
||||
!canManageCustomTemplates && 'opacity-70'
|
||||
)}
|
||||
@ -207,7 +206,6 @@ export default function CustomTemplateSection({
|
||||
className={cn(
|
||||
styles.buttonStyles.danger,
|
||||
styles.buttonModifiers.compactXs,
|
||||
styles.buttonModifiers.pill,
|
||||
'bg-red-500 hover:bg-red-600 text-white',
|
||||
!canManageCustomTemplates && 'opacity-70',
|
||||
deletingId === tpl.id && 'opacity-70 cursor-wait',
|
||||
@ -216,7 +214,7 @@ export default function CustomTemplateSection({
|
||||
{deletingId === tpl.id ? '删除中...' : '删除'}
|
||||
</button>
|
||||
<span className="ml-auto text-[11px] text-slate-400 dark:text-slate-500">
|
||||
{tpl.updatedLabel} · v{tpl.version}
|
||||
{tpl.updatedLabel} · 版本 {tpl.version}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@ export default function TemplateManagerHeader({
|
||||
return (
|
||||
<section
|
||||
className={cn(
|
||||
'mb-4 rounded-2xl border px-4 py-4',
|
||||
'mb-4 rounded-lg border px-4 py-4',
|
||||
theme === 'dark'
|
||||
? 'border-slate-700 bg-slate-900/85 text-white'
|
||||
: 'border-slate-200 bg-white text-slate-900'
|
||||
|
||||
@ -992,9 +992,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
||||
|
||||
证据：
|
||||
|
||||
- `app/admin/_components/template-manager/TemplateManagerHeader.tsx:22`：模板页头部使用 `rounded-3xl`、大阴影、hover 大阴影。
|
||||
- `app/admin/_components/template-manager/TemplateManagerHeader.tsx:31`：显示英文小标题 `Template Management`。
|
||||
- `app/admin/_components/template-manager/TemplateManagerHeader.tsx:35`：头部带解释性长句。
|
||||
- `app/admin/_components/template-manager/TemplateManagerHeader.tsx`：模板页头部已从旧记录中的大圆角/英文展示感收为普通 `rounded-lg` 后台工具区，标题使用中文“模板管理”。
|
||||
- `app/admin/_components/UsersTab.tsx:464`：用户页同样使用大 Hero 卡片。
|
||||
- `app/admin/_components/UsersTab.tsx:473`：用户页显示英文小标题 `User Management`。
|
||||
- `app/admin/_components/MonitorTab.tsx`：监控页头部已从大 Hero 卡片收敛为普通后台工具区，英文眉标已删除。
|
||||
@ -1099,6 +1097,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
||||
- `app/admin/_components/TemplateManager.tsx`：内部布局已完成第一轮响应式收口，小屏改为上下排列，宽屏仍保持左右编辑/预览。
|
||||
- `app/admin/_components/template-manager/editor/TemplatePreviewPanel.tsx`：预览区已完成第一轮收口，固定右栏改为响应式宽度，预览外框、上传占位、字段卡片、拖拽悬浮层和拖拽占位统一从大圆角收为普通 `rounded-lg`，拖拽回弹从弹性曲线改为普通 `ease-out`。
|
||||
- `app/admin/_components/template-manager/editor/TemplateFieldsEditor.tsx`：字段删除确认弹窗已去掉毛玻璃、强阴影和缩放进入动画，改为普通遮罩、普通边框和轻阴影；拖拽态也去掉蓝色发光阴影和缩放。
|
||||
- `app/admin/_components/template-manager/BuiltInTemplateGrid.tsx`、`app/admin/_components/template-manager/CustomTemplateSection.tsx`：预制模板和自定义模板入口已去掉胶囊按钮、大圆形新建图标、`PRO` 英文授权标识和技术化 `v{version}` 展示，改为普通按钮、中性标签和“版本 N”。
|
||||
- 代码复扫：`app/activate/page.tsx`、`app/admin/_components/template-manager/editor/TemplatePreviewPanel.tsx`、`app/admin/_components/template-manager/editor/TemplateFieldsEditor.tsx` 已无 `rounded-2xl`、`shadow-xl`、`shadow-2xl`、`backdrop-blur`、`zoom-in`、`cubic-bezier`、`duration-500`、`tracking-wider`、`shadow-blue`、`bg-gradient` 命中。
|
||||
- 仍需继续：`app/admin/_components/TemplateManager.tsx` 的编辑器弹窗尺寸和交互复杂度还没有彻底重构，当前只是先收掉最显眼的舞台化视觉，并解决窄屏左右挤压。
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user