feat: 首页素材展示响应式优化

- 使用 aspect-[3/4] 固定卡片比例，解决浏览器调整大小时比例变宽问题
- 添加容器边距（px-4 sm:px-6 lg:px-8）避免卡片贴到浏览器边界
- 使用三层架构样式系统（useThemeStyles 和 cardStyles.base）
- 优化图片 sizes 属性，提升响应式性能
- 统一使用 slate 系列颜色，确保深浅色模式适配

app/page.tsx

@@ -10,6 +10,7 @@ import Header from '@/components/Header'
 import RankingPanel from '@/components/RankingPanel'
 import AIChatWidget from '@/components/AIChatWidget'
 import ChangePasswordModal from '@/components/ChangePasswordModal'
+import { useThemeStyles } from '@/lib/ui-styles'
 
 interface Material {
   id: string
@@ -42,6 +43,7 @@ interface Material {
 export default function Home() {
   const { data: session, status } = useSession()
   const router = useRouter()
+  const styles = useThemeStyles()
   const [materials, setMaterials] = useState<Material[]>([])
   const [loading, setLoading] = useState(true)
   const [showUploadModal, setShowUploadModal] = useState(false)
@@ -983,12 +985,13 @@ export default function Home() {
           </div>
         ) : (
           <>
+            <div className="px-4 sm:px-6 lg:px-8">
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                 {materials.map((material) => (
-              <div key={material.id} className="card-apple overflow-hidden dark:bg-gray-800 dark:border-gray-700">
+                  <div key={material.id} className={`${styles.cardStyles.base} overflow-hidden`}>
                     {/* Preview Image */}
                       <div
-                  className="relative w-full h-[400px] bg-gray-200 dark:bg-gray-700 cursor-pointer group overflow-hidden"
+                      className="relative w-full aspect-[3/4] bg-slate-200 dark:bg-slate-700 cursor-pointer group overflow-hidden rounded-t-2xl"
                       onClick={() => {
                         // PSD、模特和视频类型直接跳转到详情页，其他类型打开预览弹窗
                         if (material.materialType === 'PSD' || material.materialType === '模特' || material.materialType === '视频') {
@@ -1003,8 +1006,8 @@ export default function Home() {
                         alt={material.sceneName}
                         fill
                         unoptimized
-                    className="object-cover transition-transform group-hover:scale-105"
-                    sizes="(max-width: 768px) 100vw, 300px"
+                        className="object-cover transition-transform duration-300 group-hover:scale-105"
+                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, (max-width: 1280px) 33vw, 25vw"
                       />
                       {/* SPU标签 */}
                       <div className="absolute top-2 left-2 bg-black/70 text-white px-2 py-1 rounded text-xs font-medium">
@@ -1134,6 +1137,7 @@ export default function Home() {
                 </div>
               ))}
             </div>
+          </div>
 
           {/* 分页组件 */}
           {totalPages > 1 && (

优化计划与优先级.md

@@ -63,17 +63,18 @@
 #### 1.3 首页素材展示响应式优化 ⭐⭐⭐⭐
 **需求编号**：8  
 **优先级**：高  
+**状态**：✅ 已完成  
 **原因**：
 - 修复已知UI问题（卡片比例、边界间距）
 - 必须遵循统一UI原则
 - 影响用户体验
 
 **实施要点**：
-- 修复卡片比例固定问题（使用 `aspect-ratio`）
-- 添加合适的边距和间距（使用 `spacingStyles`）
-- 使用三层架构样式系统
-- 响应式断点优化
-- 确保深浅色模式适配
+- ✅ 修复卡片比例固定问题（使用 `aspect-[3/4]` 替代固定高度）
+- ✅ 添加容器边距（`px-4 sm:px-6 lg:px-8`）避免卡片贴边界
+- ✅ 使用三层架构样式系统（`useThemeStyles()` 和 `cardStyles.base`）
+- ✅ 优化响应式断点和图片 sizes 属性
+- ✅ 确保深浅色模式适配（使用 `slate` 系列颜色）
 
 **依赖关系**：无  
 **影响范围**：首页素材展示
@@ -449,7 +450,7 @@
 ### 第一阶段：基础组件与UI统一（2-3周）
 1. ✅ 创建统一弹窗组件（1.1）- 已完成基础组件，待替换原生弹窗
 2. ⏳ 素材预览面板统一（1.2）
-3. ⏳ 首页素材展示响应式优化（1.3）
+3. ✅ 首页素材展示响应式优化（1.3）- 已完成
 4. ⏳ 首页UI统一到三层架构（1.4）
 5. ⏳ 统一UI三层架构通用组件库（1.5）
 6. ⏳ 深浅色主题适配优化（1.6）

优化记录.md

@@ -299,9 +299,12 @@ export default function MyComponent() {
 2. ⏳ 素材预览面板统一
    - 使用统一弹窗组件
    - 统一退出逻辑
-3. ⏳ 首页素材展示响应式优化
-   - 修复卡片比例问题
-   - 优化边界间距
+3. ✅ 首页素材展示响应式优化
+   - ✅ 修复卡片比例固定问题（使用 `aspect-[3/4]` 替代固定高度 `h-[400px]`）
+   - ✅ 添加容器边距（`px-4 sm:px-6 lg:px-8`）避免卡片贴到浏览器边界
+   - ✅ 使用三层架构样式系统（`useThemeStyles()` 和 `cardStyles.base`）
+   - ✅ 优化图片 sizes 属性，提升响应式性能
+   - ✅ 统一使用 `slate` 系列颜色，确保深浅色模式适配
 
 **优先级 2：数据一致性与核心功能**
 4. ⏳ 用户信息修改后同步素材信息

后续修改.txt

@@ -7,6 +7,7 @@
 6.用户管理增加用户头像的设置，用户可以自己设置自己的头像。对于钉钉登陆的用户，可以直接用钉钉头像，抓不到钉钉头像的话，就不抓取。对于没有头像的用户，策略和LOGO的策略一样
 7.首页上的排行榜关掉后的那个缩略按钮，也设置为可以拖动，且出现的位置是根据排行榜悬浮窗关闭前的位置
 8.首页的素材展示要改一下，现在是有个问题，就是当我拖动浏览器侧边调整浏览器大小的时候，调整浏览器界面大小，小到一个阈值时，展示素材的卡片会从4个变成3个，这个时候素材卡片的比例就会变宽，这是不对的。要保持素材卡片比例是固定的。还有就是当浏览器变窄之后素材卡片会贴到浏览器的边界，很不美观，根据统一UI原则视觉改一下
+    ✅ 已完成：使用 aspect-[3/4] 固定卡片比例，添加容器边距，使用三层架构样式系统
 9.首页的素材展示可以设置素材展示卡片的大小，可以设置一个横向的滑块。素材卡片的展示形式可以设置为瀑布流，为低性能nas机器考虑，可以动态加载卡片数量，具体加载多少可以根据你的经验判断。或者你有更好的方式也可以提出建议
 10.首页素材卡片中预览图下方的素材资料有点多，占用空间太大。可以优化一下，其中作者中的“作者：”可以不显示，直接显示作者的名字。可以在前面显示头像。文件名和文件大小也可以不显示。上传时间可以叠在预览图的右上角，默认隐藏，鼠标移动到卡片上亮起，要确保亮起状态的上传时间可以看清
 11.素材卡片可以在左上角的素材名称前面加几个标签，如点赞榜，精品榜，下载榜，收藏榜等，你可以自由发挥，样式可以参考最高权限的显示ui，更主要的是视觉要好看，偏向苹果UI设计风格，但是要注意大方向一定是统一视觉的方案。