# AI 展示平台 (AI Showcase Platform) 一個現代化的 AI 應用展示和管理平台,支持競賽管理、評分系統和用戶互動功能。 ## 🚀 功能特色 ### 📱 應用管理 - **應用展示**: 展示所有 AI 應用,支持分類和搜索 - **分頁功能**: 每頁顯示5個應用,支持翻頁瀏覽 - **統計數據**: 實時顯示總應用數、已發布數、已下架數 - **應用詳情**: 查看應用的詳細信息、統計數據和用戶評價 ### 🏆 競賽系統 - **競賽管理**: 創建和管理不同類型的競賽(個人、團隊、混合) - **評審系統**: 支持多評審評分,包含創新性、技術性、實用性等維度 - **評分管理**: 實時追蹤評分進度和統計數據 - **排名系統**: 自動計算和顯示競賽排名 ### 👥 用戶管理 - **用戶註冊**: 支持用戶註冊和登錄 - **權限管理**: 區分普通用戶、開發者和管理員權限 - **個人資料**: 用戶可以管理個人信息和偏好設置 ### 📊 數據分析 - **統計儀表板**: 實時顯示平台使用統計 - **應用分析**: 查看應用的瀏覽量、點讚數、評分等數據 - **競賽分析**: 競賽參與度和評分統計 ## 🛠️ 技術棧 ### 前端 - **框架**: Next.js 14 (React 18) - **樣式**: Tailwind CSS - **UI 組件**: shadcn/ui - **狀態管理**: React Context API - **圖標**: Lucide React ### 後端 - **API**: Next.js API Routes - **數據庫**: MySQL 8.0 - **ORM**: 自定義數據庫服務層 - **認證**: 自定義 JWT 認證系統 ### 開發工具 - **包管理**: pnpm - **代碼格式化**: Prettier - **類型檢查**: TypeScript - **數據庫遷移**: 自定義遷移腳本 ## 📦 安裝與設置 ### 環境要求 - Node.js 18.0.0 或更高版本 - pnpm (推薦) 或 npm - MySQL 8.0 或更高版本 ### 1. 克隆項目 ```bash git clone cd ai-showcase-platform ``` ### 2. 安裝依賴 ```bash pnpm install ``` ### 3. 環境配置 複製環境變數範例文件: ```bash cp env.example .env.local ``` 編輯 `.env.local` 文件,填入您的配置: ```env # 數據庫配置 DB_HOST=your-database-host DB_PORT=3306 DB_USER=your-username DB_PASSWORD=your-password DB_NAME=your-database-name # 應用配置 NEXT_PUBLIC_APP_URL=https://your-domain.com NEXT_PUBLIC_APP_NAME=強茂集團 AI 展示平台 NEXT_PUBLIC_APP_DESCRIPTION=企業內部 AI 應用展示與競賽管理系統 # JWT 配置 JWT_SECRET=your-jwt-secret JWT_EXPIRES_IN=7d ``` ### 4. 數據庫設置 運行數據庫遷移: ```bash # 創建數據庫結構 node scripts/migrate-no-triggers.js # 填充示例數據 node scripts/populate-sample-data.js ``` ### 5. 啟動開發服務器 ```bash pnpm dev ``` 訪問 http://localhost:3000 查看應用。 ## 📁 項目結構 ``` ai-showcase-platform/ ├── app/ # Next.js App Router │ ├── admin/ # 管理員頁面 │ ├── api/ # API 路由 │ │ ├── admin/ # 管理員 API │ │ ├── auth/ # 認證 API │ │ ├── competitions/ # 競賽 API │ │ └── user/ # 用戶 API │ ├── competition/ # 競賽頁面 │ └── page.tsx # 首頁 ├── components/ # React 組件 │ ├── admin/ # 管理員組件 │ ├── auth/ # 認證組件 │ ├── competition/ # 競賽組件 │ └── ui/ # UI 組件庫 ├── contexts/ # React Context ├── hooks/ # 自定義 Hooks ├── lib/ # 工具庫 │ ├── services/ # 數據庫服務 │ └── utils.ts # 工具函數 ├── scripts/ # 腳本文件 │ ├── migrate-no-triggers.js # 數據庫遷移 │ ├── populate-sample-data.js # 示例數據 │ └── check-*.js # 檢查腳本 ├── types/ # TypeScript 類型定義 └── public/ # 靜態資源 ``` ## 🔧 開發指南 ### 數據庫管理 ```bash # 檢查數據庫連接 node scripts/check-server.js # 檢查應用數據 node scripts/check-apps-count.js # 清空數據庫 node scripts/clear-database.js # 重新填充數據 node scripts/populate-sample-data.js ``` ### API 測試 ```bash # 測試應用 API node scripts/test-pagination-api.js # 測試分頁功能 node scripts/test-pagination.js ``` ### 代碼規範 - 使用 TypeScript 進行類型檢查 - 遵循 ESLint 規則 - 使用 Prettier 格式化代碼 - 組件使用函數式組件和 Hooks ## 📊 數據庫設計 ### 主要表結構 - **users**: 用戶信息 - **apps**: 應用信息 - **competitions**: 競賽信息 - **judges**: 評審信息 - **app_judge_scores**: 應用評分 - **competition_apps**: 競賽應用關聯 - **competition_judges**: 競賽評審關聯 ### 關係設計 - 用戶與應用:一對多 - 競賽與應用:多對多 - 競賽與評審:多對多 - 評審與評分:一對多 ## 🚀 部署 ### 生產環境設置 1. 設置生產環境變數 2. 配置數據庫連接 3. 運行數據庫遷移 4. 構建應用:`pnpm build` 5. 啟動應用:`pnpm start` ### Docker 部署(可選) ```dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "start"] ``` ## 🤝 貢獻指南 1. Fork 項目 2. 創建功能分支:`git checkout -b feature/AmazingFeature` 3. 提交更改:`git commit -m 'Add some AmazingFeature'` 4. 推送到分支:`git push origin feature/AmazingFeature` 5. 開啟 Pull Request ## 📝 更新日誌 ### v1.0.0 (2024-09-19) - ✨ 初始版本發布 - 🎯 應用管理功能 - 🏆 競賽系統 - 👥 用戶管理 - 📊 統計儀表板 - 🔧 分頁功能優化 ## 📄 許可證 此項目採用 MIT 許可證 - 查看 [LICENSE](LICENSE) 文件了解詳情。 ## 📞 聯繫方式 如有問題或建議,請聯繫: - 項目維護者:[您的姓名] - 郵箱:[your-email@example.com] - 項目地址:[repository-url] --- **注意**: 這是一個內部使用的 AI 展示平台,請確保在生產環境中進行適當的安全配置。