feat: add media page

Author: dajiangjunok

src/pages/api/cloudinary/images.ts

@@ -0,0 +1,84 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import cloudinary from './cloudinaryConfig';
+
+export interface CloudinaryImage {
+  public_id: string;
+  secure_url: string;
+  format: string;
+  bytes: number;
+  width: number;
+  height: number;
+  created_at: string;
+  folder?: string;
+  tags?: string[];
+  context?: Record<string, string>;
+}
+
+export interface ImageListResponse {
+  images: CloudinaryImage[];
+  next_cursor?: string;
+  total_count: number;
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ImageListResponse | { error: string }>
+) {
+  if (req.method !== 'GET') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const {
+      folder,
+      max_results = '20',
+      next_cursor,
+      search,
+    } = req.query;
+
+    let expression = 'resource_type:image';
+    
+    // 如果指定了文件夹
+    if (folder && typeof folder === 'string') {
+      expression += ` AND folder:${folder}`;
+    }
+    
+    // 如果有搜索关键词
+    if (search && typeof search === 'string') {
+      expression += ` AND filename:*${search}*`;
+    }
+
+    const options: any = {
+      expression,
+      max_results: parseInt(max_results as string, 10),
+      sort_by: [['created_at', 'desc']],
+      with_field: ['context', 'tags'],
+    };
+
+    if (next_cursor && typeof next_cursor === 'string') {
+      options.next_cursor = next_cursor;
+    }
+
+    const result = await cloudinary.search.expression(expression)
+      .sort_by('created_at', 'desc')
+      .max_results(parseInt(max_results as string, 10))
+      .with_field('context')
+      .with_field('tags')
+      .next_cursor(next_cursor as string)
+      .execute();
+
+    const response: ImageListResponse = {
+      images: result.resources || [],
+      total_count: result.total_count || 0,
+    };
+
+    if (result.next_cursor) {
+      response.next_cursor = result.next_cursor;
+    }
+
+    res.status(200).json(response);
+  } catch (error) {
+    console.error('获取图片列表失败:', error);
+    res.status(500).json({ error: '获取图片列表失败' });
+  }
+}

src/pages/api/cloudinary/update-image.ts

@@ -0,0 +1,50 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import cloudinary from './cloudinaryConfig';
+
+interface UpdateImageRequest {
+  public_id: string;
+  tags?: string[];
+  context?: Record<string, string>;
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const { public_id, tags, context }: UpdateImageRequest = req.body;
+
+    if (!public_id) {
+      return res.status(400).json({ error: 'public_id is required' });
+    }
+
+    const updateOptions: any = {};
+
+    if (tags) {
+      updateOptions.tags = tags;
+    }
+
+    if (context) {
+      updateOptions.context = context;
+    }
+
+    const result = await cloudinary.uploader.explicit(public_id, {
+      type: 'upload',
+      ...updateOptions,
+    });
+
+    res.status(200).json({ 
+      success: true, 
+      public_id: result.public_id,
+      tags: result.tags,
+      context: result.context 
+    });
+  } catch (error) {
+    console.error('更新图片元数据失败:', error);
+    res.status(500).json({ error: '更新图片元数据失败' });
+  }
+}

src/pages/dashboard/index.tsx

@@ -14,7 +14,7 @@ import {
   Pagination,
   App as AntdApp
 } from 'antd'
-import { FileText, Eye, Clock } from 'lucide-react'
+import { FileText, Eye, Clock, ImageIcon } from 'lucide-react'
 import Link from 'next/link'
 import dayjs from 'dayjs'
 import styles from './index.module.css'
@@ -26,7 +26,7 @@ import { useSession } from 'next-auth/react'
 import { parseMd } from '@/utils/posts'
 
 const { Title, Text } = Typography
-type ActiveTab = 'events' | 'articles'
+type ActiveTab = 'events' | 'articles' | 'media'
 
 export default function DashboardPage() {
   const { message } = AntdApp.useApp()
@@ -118,6 +118,11 @@ export default function DashboardPage() {
       key: 'articles',
       icon: <FileText className={styles.menuIcon} />,
       label: '我的文章'
+    },
+    {
+      key: 'media',
+      icon: <ImageIcon className={styles.menuIcon} />,
+      label: '媒体管理'
     }
   ]
 
@@ -351,6 +356,41 @@ export default function DashboardPage() {
         </Card>
       )
     }
+
+    if (activeTab === 'media') {
+      return (
+        <Card className={styles.contentCard}>
+          <div className={styles.cardHeader}>
+            <Title level={3} className={styles.cardTitle}>
+              <ImageIcon className={styles.cardIcon} />
+              媒体管理
+            </Title>
+          </div>
+          <Divider />
+          <div style={{ padding: '20px 0', textAlign: 'center' }}>
+            <ImageIcon size={48} style={{ color: '#1890ff', marginBottom: 16 }} />
+            <Title level={4} style={{ marginBottom: 8 }}>Cloudinary 图片管理</Title>
+            <Text type="secondary" style={{ display: 'block', marginBottom: 24 }}>
+              管理您上传的所有图片，支持查看、编辑、删除和复制链接
+            </Text>
+            <Link href="/media">
+              <button style={{
+                background: '#1890ff',
+                color: 'white',
+                border: 'none',
+                borderRadius: '6px',
+                padding: '12px 24px',
+                fontSize: '16px',
+                cursor: 'pointer',
+                transition: 'background-color 0.3s'
+              }}>
+                进入媒体库
+              </button>
+            </Link>
+          </div>
+        </Card>
+      )
+    }
   }
 
   return (

src/pages/media/index.module.css

@@ -0,0 +1,99 @@
+.mediaManager {
+  padding: 24px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.title {
+  margin: 0;
+  color: #1f2937;
+}
+
+.filterSection {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.tableContainer {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.imagePreview {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.imagePreview:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.actionButton {
+  transition: all 0.3s ease;
+}
+
+.actionButton:hover {
+  transform: translateY(-1px);
+}
+
+.uploadArea {
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.uploadArea:hover {
+  border-color: #1890ff;
+  background: #f0f8ff;
+}
+
+.previewModal .imageContainer {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.previewModal .imageDetails {
+  background: #fafafa;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.editModal .imageThumb {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.editModal .formItem {
+  margin-bottom: 16px;
+}
+
+.statsCard {
+  text-align: center;
+  padding: 16px;
+}
+
+.statsNumber {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.statsLabel {
+  color: #8c8c8c;
+  margin-top: 8px;
+}