收敛公开分享页预留入口
This commit is contained in:
parent
5ac2e11c3e
commit
e25d1aaad9
@ -62,9 +62,6 @@ export default function SharePage() {
|
|||||||
const [material, setMaterial] = useState<Material | null>(null)
|
const [material, setMaterial] = useState<Material | null>(null)
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [showBackToTop, setShowBackToTop] = useState(false)
|
const [showBackToTop, setShowBackToTop] = useState(false)
|
||||||
const [aiEditEnabled, setAiEditEnabled] = useState(
|
|
||||||
(process.env.NEXT_PUBLIC_AI_EDIT_ENABLED || '').toLowerCase() === 'true'
|
|
||||||
)
|
|
||||||
|
|
||||||
const fetchMaterial = useCallback(async () => {
|
const fetchMaterial = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
@ -111,24 +108,6 @@ export default function SharePage() {
|
|||||||
}
|
}
|
||||||
}, [status, fetchMaterial])
|
}, [status, fetchMaterial])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const ensureFeatureFlags = async () => {
|
|
||||||
if (aiEditEnabled) return
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/system-settings')
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json()
|
|
||||||
if (data?.enableAiImageEdit) {
|
|
||||||
setAiEditEnabled(true)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.warn('加载系统设置失败(AI改图判断):', err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ensureFeatureFlags()
|
|
||||||
}, [aiEditEnabled])
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 监听滚动,控制返回顶部按钮显示
|
// 监听滚动,控制返回顶部按钮显示
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
@ -222,7 +201,7 @@ export default function SharePage() {
|
|||||||
<div className="flex gap-8 max-w-7xl mx-auto">
|
<div className="flex gap-8 max-w-7xl mx-auto">
|
||||||
{/* 左侧:展示图片(固定790px宽度) */}
|
{/* 左侧:展示图片(固定790px宽度) */}
|
||||||
<div className="flex-shrink-0" style={{ width: '790px' }}>
|
<div className="flex-shrink-0" style={{ width: '790px' }}>
|
||||||
<div className={cn('rounded-2xl shadow-lg overflow-hidden', styles.cardStyles.base)}>
|
<div className={cn('rounded-lg shadow-sm overflow-hidden', styles.cardStyles.base)}>
|
||||||
<div className="w-full bg-slate-200 dark:bg-slate-700 flex flex-col items-center">
|
<div className="w-full bg-slate-200 dark:bg-slate-700 flex flex-col items-center">
|
||||||
{material.displayImages.map((imageUrl, index) => (
|
{material.displayImages.map((imageUrl, index) => (
|
||||||
<div key={index} className="relative" style={{ maxWidth: '790px', width: '100%' }}>
|
<div key={index} className="relative" style={{ maxWidth: '790px', width: '100%' }}>
|
||||||
@ -243,19 +222,19 @@ export default function SharePage() {
|
|||||||
|
|
||||||
{/* 右侧:素材信息(固定) */}
|
{/* 右侧:素材信息(固定) */}
|
||||||
<div className="w-80 flex-shrink-0">
|
<div className="w-80 flex-shrink-0">
|
||||||
<div className={cn('sticky top-24 rounded-2xl shadow-lg p-6 space-y-6', styles.cardStyles.base)}>
|
<div className={cn('sticky top-24 rounded-lg shadow-sm p-6 space-y-6', styles.cardStyles.base)}>
|
||||||
<div>
|
<div>
|
||||||
<h1 className={cn('text-2xl font-bold mb-3', theme === 'dark' ? 'text-white' : 'text-slate-900')}>
|
<h1 className={cn('text-2xl font-bold mb-3', theme === 'dark' ? 'text-white' : 'text-slate-900')}>
|
||||||
{material.productModel}
|
{material.productModel}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
<span className="inline-flex items-center px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium">
|
<span className="inline-flex items-center px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-md text-xs font-medium">
|
||||||
{material.categoryName}
|
{material.categoryName}
|
||||||
</span>
|
</span>
|
||||||
<span className="inline-flex items-center px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-medium">
|
<span className="inline-flex items-center px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-md text-xs font-medium">
|
||||||
{material.sceneName}
|
{material.sceneName}
|
||||||
</span>
|
</span>
|
||||||
<span className="inline-flex items-center px-3 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium">
|
<span className="inline-flex items-center px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-md text-xs font-medium">
|
||||||
{material.materialType}
|
{material.materialType}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -268,7 +247,7 @@ export default function SharePage() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className={cn('text-xs mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>文件大小</p>
|
<p className={cn('text-xs mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>文件大小</p>
|
||||||
<p className="text-sm font-medium text-blue-600 dark:text-blue-400">{formatFileSize(material.zipFileSize)}</p>
|
<p className={cn('text-sm font-medium', theme === 'dark' ? 'text-white' : 'text-slate-900')}>{formatFileSize(material.zipFileSize)}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
@ -293,24 +272,10 @@ export default function SharePage() {
|
|||||||
{renderAdditionalInfo('compact')}
|
{renderAdditionalInfo('compact')}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* AI改图(占位,默认隐藏。后续由开关控制显示) */}
|
|
||||||
{aiEditEnabled && (
|
|
||||||
<button
|
|
||||||
onClick={() => alert({
|
|
||||||
title: '提示',
|
|
||||||
message: 'AI改图功能待开放',
|
|
||||||
variant: 'warning',
|
|
||||||
})}
|
|
||||||
className="w-full mt-3 py-2.5 bg-purple-600 text-white rounded-xl text-sm font-medium hover:bg-purple-700 transition-colors"
|
|
||||||
>
|
|
||||||
AI改图(预留)
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => router.back()}
|
onClick={() => router.back()}
|
||||||
className={cn(
|
className={cn(
|
||||||
'w-full py-2.5 rounded-xl text-sm font-medium transition-colors',
|
'w-full py-2.5 rounded-lg text-sm font-medium transition-colors',
|
||||||
styles.buttonStyles.secondary
|
styles.buttonStyles.secondary
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@ -322,7 +287,7 @@ export default function SharePage() {
|
|||||||
) : material.materialType === '视频' ? (
|
) : material.materialType === '视频' ? (
|
||||||
/* 视频类型:视频播放布局 */
|
/* 视频类型:视频播放布局 */
|
||||||
<div className="max-w-6xl mx-auto">
|
<div className="max-w-6xl mx-auto">
|
||||||
<div className={cn('rounded-2xl shadow-lg overflow-hidden', styles.cardStyles.base)}>
|
<div className={cn('rounded-lg shadow-sm overflow-hidden', styles.cardStyles.base)}>
|
||||||
{/* 视频播放器 */}
|
{/* 视频播放器 */}
|
||||||
<div className="relative w-full bg-black">
|
<div className="relative w-full bg-black">
|
||||||
<video
|
<video
|
||||||
@ -346,13 +311,13 @@ export default function SharePage() {
|
|||||||
{material.productModel}
|
{material.productModel}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex items-center gap-3 mb-4">
|
<div className="flex items-center gap-3 mb-4">
|
||||||
<span className="inline-flex items-center px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-sm font-medium">
|
<span className="inline-flex items-center px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-md text-sm font-medium">
|
||||||
{material.categoryName}
|
{material.categoryName}
|
||||||
</span>
|
</span>
|
||||||
<span className="inline-flex items-center px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-sm font-medium">
|
<span className="inline-flex items-center px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-md text-sm font-medium">
|
||||||
{material.sceneName}
|
{material.sceneName}
|
||||||
</span>
|
</span>
|
||||||
<span className="inline-flex items-center px-3 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded-full text-sm font-medium">
|
<span className="inline-flex items-center px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-md text-sm font-medium">
|
||||||
视频
|
视频
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -365,7 +330,7 @@ export default function SharePage() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className={cn('text-sm mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>文件大小</p>
|
<p className={cn('text-sm mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>文件大小</p>
|
||||||
<p className="text-lg font-medium text-blue-600 dark:text-blue-400">{formatFileSize(material.zipFileSize)}</p>
|
<p className={cn('text-lg font-medium', theme === 'dark' ? 'text-white' : 'text-slate-900')}>{formatFileSize(material.zipFileSize)}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className={cn('text-sm mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>下载次数</p>
|
<p className={cn('text-sm mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>下载次数</p>
|
||||||
@ -392,7 +357,7 @@ export default function SharePage() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => router.push('/')}
|
onClick={() => router.push('/')}
|
||||||
className={cn(
|
className={cn(
|
||||||
'w-full mt-4 py-3 rounded-xl font-medium transition-colors',
|
'w-full mt-4 py-3 rounded-lg font-medium transition-colors',
|
||||||
styles.buttonStyles.secondary
|
styles.buttonStyles.secondary
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@ -404,7 +369,7 @@ export default function SharePage() {
|
|||||||
) : (
|
) : (
|
||||||
/* 非PSD/非视频类型:统一布局 */
|
/* 非PSD/非视频类型:统一布局 */
|
||||||
<div className="max-w-4xl mx-auto">
|
<div className="max-w-4xl mx-auto">
|
||||||
<div className={cn('rounded-2xl shadow-lg overflow-hidden', styles.cardStyles.base)}>
|
<div className={cn('rounded-lg shadow-sm overflow-hidden', styles.cardStyles.base)}>
|
||||||
{/* 普通预览图 */}
|
{/* 普通预览图 */}
|
||||||
<div className={cn('relative w-full h-96', theme === 'dark' ? 'bg-slate-800' : 'bg-slate-200')}>
|
<div className={cn('relative w-full h-96', theme === 'dark' ? 'bg-slate-800' : 'bg-slate-200')}>
|
||||||
<Image
|
<Image
|
||||||
@ -424,10 +389,10 @@ export default function SharePage() {
|
|||||||
{material.productModel}
|
{material.productModel}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex items-center gap-3 mb-4">
|
<div className="flex items-center gap-3 mb-4">
|
||||||
<span className="inline-flex items-center px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-sm font-medium">
|
<span className="inline-flex items-center px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-md text-sm font-medium">
|
||||||
{material.categoryName}
|
{material.categoryName}
|
||||||
</span>
|
</span>
|
||||||
<span className="inline-flex items-center px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-sm font-medium">
|
<span className="inline-flex items-center px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-md text-sm font-medium">
|
||||||
{material.sceneName}
|
{material.sceneName}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -440,7 +405,7 @@ export default function SharePage() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className={cn('text-sm mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>文件大小</p>
|
<p className={cn('text-sm mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>文件大小</p>
|
||||||
<p className="text-lg font-medium text-blue-600 dark:text-blue-400">{formatFileSize(material.zipFileSize)}</p>
|
<p className={cn('text-lg font-medium', theme === 'dark' ? 'text-white' : 'text-slate-900')}>{formatFileSize(material.zipFileSize)}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className={cn('text-sm mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>下载次数</p>
|
<p className={cn('text-sm mb-1', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>下载次数</p>
|
||||||
@ -469,7 +434,7 @@ export default function SharePage() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => router.push('/')}
|
onClick={() => router.push('/')}
|
||||||
className={cn(
|
className={cn(
|
||||||
'w-full mt-4 py-3 rounded-xl font-medium transition-colors',
|
'w-full mt-4 py-3 rounded-lg font-medium transition-colors',
|
||||||
styles.buttonStyles.secondary
|
styles.buttonStyles.secondary
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@ -485,7 +450,7 @@ export default function SharePage() {
|
|||||||
{showBackToTop && (
|
{showBackToTop && (
|
||||||
<button
|
<button
|
||||||
onClick={scrollToTop}
|
onClick={scrollToTop}
|
||||||
className="fixed bottom-8 right-8 w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all z-50"
|
className="fixed bottom-8 right-8 w-12 h-12 bg-slate-800 hover:bg-slate-700 text-white rounded-full shadow-sm flex items-center justify-center transition-colors z-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
|
||||||
title="返回顶部"
|
title="返回顶部"
|
||||||
>
|
>
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
|||||||
@ -963,6 +963,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
|||||||
- `components/ui/Tag.tsx`:已把标签从彩色胶囊和放大动效改为中性后台标签。
|
- `components/ui/Tag.tsx`:已把标签从彩色胶囊和放大动效改为中性后台标签。
|
||||||
- `app/admin/_components/MonitorTab.tsx`:系统监控页已完成第一轮收口,移除大圆角重阴影页头、英文 `System Monitor` 眉标、emoji 标题、彩色发光指标和 hover 放大。
|
- `app/admin/_components/MonitorTab.tsx`:系统监控页已完成第一轮收口,移除大圆角重阴影页头、英文 `System Monitor` 眉标、emoji 标题、彩色发光指标和 hover 放大。
|
||||||
- `app/admin/_components/CategoriesTab.tsx`:分类管理页已完成第一轮收口,页头改为普通 `rounded-lg border` 工具区,英文 `Category Management` 眉标已删除,左侧列表和字段编辑区不再使用大圆角、重阴影和玻璃效果。
|
- `app/admin/_components/CategoriesTab.tsx`:分类管理页已完成第一轮收口,页头改为普通 `rounded-lg border` 工具区,英文 `Category Management` 眉标已删除,左侧列表和字段编辑区不再使用大圆角、重阴影和玻璃效果。
|
||||||
|
- `app/share/[id]/page.tsx`:公开分享页已移除 `AI改图(预留)` 未完成功能入口,卡片和标签从大圆角、重阴影、彩色胶囊收敛为普通圆角、轻阴影和中性标签。
|
||||||
- `app/globals.css:37`:已完成第一轮收口,旧按钮、输入框、卡片工具类现在改为中性后台控件,不再 hover 放大或使用 Apple 式重阴影。
|
- `app/globals.css:37`:已完成第一轮收口,旧按钮、输入框、卡片工具类现在改为中性后台控件,不再 hover 放大或使用 Apple 式重阴影。
|
||||||
- `app/globals.css:138`:已完成第一轮收口,旧弹窗动画已改为轻量淡入,不再使用模糊、缩放和反弹动效。
|
- `app/globals.css:138`:已完成第一轮收口,旧弹窗动画已改为轻量淡入,不再使用模糊、缩放和反弹动效。
|
||||||
- 浏览器验证:已在 `http://localhost:3004/admin` 验证用户管理、模板管理、架构管理三个后台页面,接口正常、控制台无新增错误,未观察到明显重叠。
|
- 浏览器验证:已在 `http://localhost:3004/admin` 验证用户管理、模板管理、架构管理三个后台页面,接口正常、控制台无新增错误,未观察到明显重叠。
|
||||||
@ -972,7 +973,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
|||||||
|
|
||||||
建议动作:
|
建议动作:
|
||||||
|
|
||||||
- 继续检查直接写在组件里的渐变、大圆角和悬浮动画,下一批优先处理钉钉回调、激活页、模板编辑器预览区、AI 聊天和弹幕控件。
|
- 继续检查直接写在组件里的渐变、大圆角和悬浮动画,下一批优先处理钉钉回调、激活页、模板编辑器预览区、AI 聊天、弹幕控件和 Header 收缩态。
|
||||||
- 管理后台单独建立更克制的 admin 样式:纯色背景、弱边框、少阴影,主色只用于选中态和主按钮。
|
- 管理后台单独建立更克制的 admin 样式:纯色背景、弱边框、少阴影,主色只用于选中态和主按钮。
|
||||||
- 后续前端修复应保持当前项目自己的风格,不复制旧参考源码,也不继续堆“模板化 SaaS 展示页”视觉。
|
- 后续前端修复应保持当前项目自己的风格,不复制旧参考源码,也不继续堆“模板化 SaaS 展示页”视觉。
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user