Initial commit of Feature Request Hub

.gitignore

@@ -0,0 +1,6 @@
+__pycache__/
+*.pyc
+requests.json
+.DS_Store
+.venv/
+env/

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a writable directory for data persistence (if mounted)
+# In HF Spaces, we can write to /app, but for persistence usually a dataset is better.
+# For this demo, local file is fine (it resets on restart unless persistent storage is configured in HF).
+RUN chmod -R 777 /app
+
+# Create an empty data file if it doesn't exist and make it writable
+RUN echo "[]" > requests.json && chmod 666 requests.json
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,71 @@
+---
+title: Feature Request Hub
+emoji: 💡
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+---
+
+# 产品需求反馈中心 (Feature Request Hub)
+
+一个简洁、现代化的产品需求收集与反馈平台。帮助独立开发者、创业团队收集用户建议，展示开发路线图。
+
+## ✨ 特性
+
+- **💡 需求提交**：用户可以提交功能建议、Bug 反馈等。
+- **👍 投票机制**：用户可以对感兴趣的功能进行投票（Upvote），帮助你排定优先级。
+- **📊 状态追踪**：清晰展示需求状态（待审核、计划中、开发中、已完成）。
+- **🛡️ 管理员模式**：内置简单的管理员开关，用于更新需求状态。
+- **🎨 现代化 UI**：基于 Vue 3 + Tailwind CSS 构建，简洁美观。
+- **🚀 零配置部署**：基于 Docker，一键部署到 Hugging Face Spaces。
+
+## 🛠️ 技术栈
+
+- **后端**：Python / Flask
+- **前端**：Vue 3 (CDN) + Tailwind CSS
+- **存储**：本地 JSON 文件 (轻量级)
+
+## 🚀 快速开始
+
+### 本地运行
+
+1. 克隆项目：
+   ```bash
+   git clone https://github.com/yourusername/feature-request-hub.git
+   cd feature-request-hub
+   ```
+
+2. 安装依赖：
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. 运行：
+   ```bash
+   python app.py
+   ```
+
+4. 打开浏览器访问 `http://localhost:7860`
+
+### 部署到 Hugging Face Spaces
+
+本项目已配置 Dockerfile，可直接部署。
+
+1. 在 Hugging Face 创建一个新的 Space。
+2. 选择 Docker SDK。
+3. 上传本项目所有文件。
+
+## 📝 使用说明
+
+- **提交需求**：点击右上角 "提交新需求"。
+- **投票**：点击列表左侧的箭头图标。
+- **管理员模式**：在左侧边栏打开 "管理员模式" 开关，即可看到每个卡片下方的状态切换按钮。
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 PR！
+
+## 📄 许可证
+
+MIT License

app.py

@@ -0,0 +1,86 @@
+import os
+import json
+import uuid
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify
+
+app = Flask(__name__)
+DATA_FILE = "requests.json"
+
+def load_data():
+    if not os.path.exists(DATA_FILE):
+        return []
+    try:
+        with open(DATA_FILE, "r", encoding="utf-8") as f:
+            return json.load(f)
+    except Exception:
+        return []
+
+def save_data(data):
+    with open(DATA_FILE, "w", encoding="utf-8") as f:
+        json.dump(data, f, ensure_ascii=False, indent=2)
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/api/requests", methods=["GET"])
+def get_requests():
+    data = load_data()
+    # Sort by votes (desc) then date (desc)
+    data.sort(key=lambda x: (x.get("votes", 0), x.get("created_at", "")), reverse=True)
+    return jsonify(data)
+
+@app.route("/api/requests", methods=["POST"])
+def add_request():
+    data = load_data()
+    payload = request.json
+    
+    if not payload.get("title") or not payload.get("description"):
+        return jsonify({"error": "Title and description are required"}), 400
+        
+    new_request = {
+        "id": str(uuid.uuid4()),
+        "title": payload["title"],
+        "description": payload["description"],
+        "category": payload.get("category", "General"),
+        "votes": 1,
+        "status": "pending",  # pending, planned, in_progress, completed, rejected
+        "created_at": datetime.now().isoformat(),
+        "comments": []
+    }
+    
+    data.append(new_request)
+    save_data(data)
+    return jsonify(new_request)
+
+@app.route("/api/requests/<req_id>/vote", methods=["POST"])
+def vote_request(req_id):
+    data = load_data()
+    for req in data:
+        if req["id"] == req_id:
+            req["votes"] = req.get("votes", 0) + 1
+            save_data(data)
+            return jsonify({"success": True, "votes": req["votes"]})
+    return jsonify({"error": "Request not found"}), 404
+
+@app.route("/api/requests/<req_id>/status", methods=["POST"])
+def update_status(req_id):
+    # Simple admin check (in a real app, use auth)
+    # Here we just trust the client for the demo/MVP purpose
+    payload = request.json
+    new_status = payload.get("status")
+    
+    if new_status not in ["pending", "planned", "in_progress", "completed", "rejected"]:
+        return jsonify({"error": "Invalid status"}), 400
+
+    data = load_data()
+    for req in data:
+        if req["id"] == req_id:
+            req["status"] = new_status
+            save_data(data)
+            return jsonify({"success": True, "status": new_status})
+    return jsonify({"error": "Request not found"}), 404
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,2 @@
+flask==3.0.0
+gunicorn==21.2.0

templates/index.html

@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>产品需求反馈中心 | Feature Request Hub</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        .vote-btn:hover { transform: translateY(-2px); }
+        .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
+        .fade-enter-from, .fade-leave-to { opacity: 0; }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800">
+    <div id="app" class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="bg-white border-b border-slate-200 sticky top-0 z-10">
+            <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <div class="bg-indigo-600 text-white p-2 rounded-lg">
+                        <i class="fa-solid fa-lightbulb"></i>
+                    </div>
+                    <h1 class="font-bold text-xl tracking-tight text-slate-900">需求反馈中心</h1>
+                </div>
+                <div class="flex items-center gap-4">
+                    <button @click="openModal" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center gap-2">
+                        <i class="fa-solid fa-plus"></i> 提交新需求
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 max-w-5xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <!-- Sidebar -->
+                <div class="md:col-span-1 space-y-6">
+                    <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-4">
+                        <h3 class="font-semibold text-slate-900 mb-3 text-sm uppercase tracking-wider">状态概览</h3>
+                        <div class="space-y-2">
+                            <div v-for="(count, status) in statusCounts" :key="status" 
+                                 class="flex items-center justify-between text-sm p-2 rounded hover:bg-slate-50 cursor-pointer"
+                                 @click="filterStatus = status"
+                                 :class="{'bg-indigo-50 text-indigo-700': filterStatus === status}">
+                                <div class="flex items-center gap-2">
+                                    <span class="w-2 h-2 rounded-full" :class="statusColor(status)"></span>
+                                    <span class="capitalize">[[ statusLabel(status) ]]</span>
+                                </div>
+                                <span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full text-xs font-medium">[[ count ]]</span>
+                            </div>
+                            <div class="flex items-center justify-between text-sm p-2 rounded hover:bg-slate-50 cursor-pointer"
+                                 @click="filterStatus = 'all'"
+                                 :class="{'bg-indigo-50 text-indigo-700': filterStatus === 'all'}">
+                                <div class="flex items-center gap-2">
+                                    <span class="w-2 h-2 rounded-full bg-slate-400"></span>
+                                    <span>全部</span>
+                                </div>
+                                <span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full text-xs font-medium">[[ requests.length ]]</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-lg p-5 text-white">
+                        <h3 class="font-bold text-lg mb-1">管理员模式</h3>
+                        <p class="text-indigo-100 text-xs mb-3">切换以管理需求状态</p>
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" v-model="isAdmin" class="sr-only peer">
+                            <div class="w-11 h-6 bg-indigo-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-white/30"></div>
+                            <span class="ml-3 text-sm font-medium">[[ isAdmin ? '已开启' : '已关闭' ]]</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Feed -->
+                <div class="md:col-span-3 space-y-4">
+                    <!-- Loading -->
+                    <div v-if="loading" class="flex justify-center py-12">
+                        <i class="fa-solid fa-circle-notch fa-spin text-indigo-500 text-2xl"></i>
+                    </div>
+
+                    <!-- Empty State -->
+                    <div v-else-if="filteredRequests.length === 0" class="text-center py-12 bg-white rounded-xl border border-dashed border-slate-300">
+                        <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fa-regular fa-folder-open text-slate-400 text-2xl"></i>
+                        </div>
+                        <h3 class="text-lg font-medium text-slate-900">暂无相关需求</h3>
+                        <p class="text-slate-500 mt-1">成为第一个提出建议的人吧！</p>
+                        <button @click="openModal" class="mt-4 text-indigo-600 hover:text-indigo-700 font-medium text-sm">提交需求 &rarr;</button>
+                    </div>
+
+                    <!-- List -->
+                    <div v-else v-for="req in filteredRequests" :key="req.id" class="bg-white rounded-xl p-5 shadow-sm border border-slate-100 hover:shadow-md transition-shadow group">
+                        <div class="flex gap-5">
+                            <!-- Vote Button -->
+                            <button @click="vote(req.id)" class="vote-btn flex flex-col items-center justify-center w-12 h-14 rounded-lg border border-slate-200 bg-slate-50 hover:border-indigo-300 hover:bg-indigo-50 transition-all group/vote flex-shrink-0" :class="{'border-indigo-500 bg-indigo-50 text-indigo-600': hasVoted(req.id)}">
+                                <i class="fa-solid fa-caret-up text-slate-400 group-hover/vote:text-indigo-500" :class="{'text-indigo-600': hasVoted(req.id)}"></i>
+                                <span class="font-bold text-sm" :class="{'text-indigo-700': hasVoted(req.id), 'text-slate-600': !hasVoted(req.id)}">[[ req.votes ]]</span>
+                            </button>
+
+                            <!-- Content -->
+                            <div class="flex-1">
+                                <div class="flex items-start justify-between mb-1">
+                                    <h3 class="font-bold text-slate-900 text-lg leading-snug">[[ req.title ]]</h3>
+                                    <span :class="['px-2.5 py-1 rounded-full text-xs font-semibold capitalize whitespace-nowrap ml-2', statusClass(req.status)]">
+                                        [[ statusLabel(req.status) ]]
+                                    </span>
+                                </div>
+                                <p class="text-slate-600 text-sm leading-relaxed mb-3">[[ req.description ]]</p>
+                                <div class="flex items-center gap-4 text-xs text-slate-400">
+                                    <span class="flex items-center gap-1">
+                                        <i class="fa-regular fa-clock"></i> [[ formatDate(req.created_at) ]]
+                                    </span>
+                                    <span class="bg-slate-100 px-2 py-0.5 rounded text-slate-500">[[ req.category ]]</span>
+                                </div>
+
+                                <!-- Admin Controls -->
+                                <div v-if="isAdmin" class="mt-4 pt-3 border-t border-slate-100 flex gap-2 overflow-x-auto pb-1">
+                                    <button v-for="s in adminStatuses" @click="updateStatus(req.id, s.key)" 
+                                            class="px-2 py-1 rounded text-xs border transition-colors whitespace-nowrap"
+                                            :class="req.status === s.key ? 'bg-slate-800 text-white border-slate-800' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'">
+                                        设为: [[ s.label ]]
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Modal -->
+        <div v-if="showModal" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 fade-enter-active">
+            <div class="bg-white rounded-2xl shadow-xl max-w-lg w-full overflow-hidden transform transition-all">
+                <div class="bg-slate-50 px-6 py-4 border-b border-slate-100 flex justify-between items-center">
+                    <h3 class="font-bold text-lg text-slate-900">提交新需求</h3>
+                    <button @click="showModal = false" class="text-slate-400 hover:text-slate-600">
+                        <i class="fa-solid fa-times"></i>
+                    </button>
+                </div>
+                <div class="p-6 space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">标题</label>
+                        <input v-model="newRequest.title" type="text" placeholder="简短描述你的建议..." class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-shadow">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">类别</label>
+                        <select v-model="newRequest.category" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-shadow bg-white">
+                            <option>功能建议 (Feature)</option>
+                            <option>Bug 修复 (Bug)</option>
+                            <option>性能优化 (Performance)</option>
+                            <option>界面设计 (UI/UX)</option>
+                            <option>其他 (Other)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">详细描述</label>
+                        <textarea v-model="newRequest.description" rows="4" placeholder="请详细描述该功能如何运作，以及它解决的问题..." class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-shadow resize-none"></textarea>
+                    </div>
+                </div>
+                <div class="bg-slate-50 px-6 py-4 flex justify-end gap-3">
+                    <button @click="showModal = false" class="px-4 py-2 text-slate-600 hover:text-slate-800 font-medium text-sm">取消</button>
+                    <button @click="submitRequest" :disabled="!isValid" class="bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white px-5 py-2 rounded-lg font-medium text-sm shadow-sm transition-colors flex items-center gap-2">
+                        <span v-if="submitting"><i class="fa-solid fa-spinner fa-spin"></i> 提交中...</span>
+                        <span v-else>提交反馈</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, computed, onMounted } = Vue;
+
+        createApp({
+            delimiters: ['[[', ']]'],
+            setup() {
+                const requests = ref([]);
+                const loading = ref(true);
+                const showModal = ref(false);
+                const submitting = ref(false);
+                const isAdmin = ref(false);
+                const filterStatus = ref('all');
+                
+                const newRequest = ref({
+                    title: '',
+                    category: '功能建议 (Feature)',
+                    description: ''
+                });
+
+                const adminStatuses = [
+                    { key: 'pending', label: '待审核' },
+                    { key: 'planned', label: '计划中' },
+                    { key: 'in_progress', label: '开发中' },
+                    { key: 'completed', label: '已完成' },
+                    { key: 'rejected', label: '已拒绝' }
+                ];
+
+                const votedIds = ref(new Set());
+
+                const fetchRequests = async () => {
+                    loading.value = true;
+                    try {
+                        const res = await fetch('/api/requests');
+                        requests.value = await res.json();
+                    } catch (e) {
+                        console.error(e);
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const isValid = computed(() => {
+                    return newRequest.value.title.trim() && newRequest.value.description.trim();
+                });
+
+                const submitRequest = async () => {
+                    if (!isValid.value) return;
+                    submitting.value = true;
+                    try {
+                        const res = await fetch('/api/requests', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(newRequest.value)
+                        });
+                        if (res.ok) {
+                            showModal.value = false;
+                            newRequest.value = { title: '', category: '功能建议 (Feature)', description: '' };
+                            await fetchRequests();
+                        }
+                    } finally {
+                        submitting.value = false;
+                    }
+                };
+
+                const vote = async (id) => {
+                    if (hasVoted(id)) return;
+                    
+                    // Optimistic update
+                    const req = requests.value.find(r => r.id === id);
+                    if (req) req.votes++;
+                    
+                    votedIds.value.add(id);
+                    localStorage.setItem('voted_ids', JSON.stringify([...votedIds.value]));
+
+                    try {
+                        await fetch(`/api/requests/${id}/vote`, { method: 'POST' });
+                    } catch (e) {
+                        // Revert if failed (simplified)
+                    }
+                };
+
+                const updateStatus = async (id, status) => {
+                    const req = requests.value.find(r => r.id === id);
+                    if (req) req.status = status;
+                    
+                    await fetch(`/api/requests/${id}/status`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ status })
+                    });
+                };
+
+                const hasVoted = (id) => votedIds.value.has(id);
+
+                const openModal = () => showModal.value = true;
+
+                const statusLabel = (status) => {
+                    const map = {
+                        'pending': '待审核',
+                        'planned': '计划中',
+                        'in_progress': '开发中',
+                        'completed': '已完成',
+                        'rejected': '已拒绝'
+                    };
+                    return map[status] || status;
+                };
+
+                const statusColor = (status) => {
+                    const map = {
+                        'pending': 'bg-slate-400',
+                        'planned': 'bg-blue-500',
+                        'in_progress': 'bg-amber-500',
+                        'completed': 'bg-emerald-500',
+                        'rejected': 'bg-red-500'
+                    };
+                    return map[status] || 'bg-slate-400';
+                };
+
+                const statusClass = (status) => {
+                    const map = {
+                        'pending': 'bg-slate-100 text-slate-600',
+                        'planned': 'bg-blue-100 text-blue-700',
+                        'in_progress': 'bg-amber-100 text-amber-700',
+                        'completed': 'bg-emerald-100 text-emerald-700',
+                        'rejected': 'bg-red-100 text-red-700'
+                    };
+                    return map[status] || 'bg-slate-100';
+                };
+
+                const formatDate = (isoString) => {
+                    return new Date(isoString).toLocaleDateString('zh-CN');
+                };
+
+                const filteredRequests = computed(() => {
+                    if (filterStatus.value === 'all') return requests.value;
+                    return requests.value.filter(r => r.status === filterStatus.value);
+                });
+
+                const statusCounts = computed(() => {
+                    const counts = {
+                        'pending': 0, 'planned': 0, 'in_progress': 0, 'completed': 0, 'rejected': 0
+                    };
+                    requests.value.forEach(r => {
+                        if (counts[r.status] !== undefined) counts[r.status]++;
+                    });
+                    return counts;
+                });
+
+                onMounted(() => {
+                    fetchRequests();
+                    const storedVotes = localStorage.getItem('voted_ids');
+                    if (storedVotes) {
+                        votedIds.value = new Set(JSON.parse(storedVotes));
+                    }
+                });
+
+                return {
+                    requests, loading, showModal, submitting, newRequest,
+                    submitRequest, vote, hasVoted, openModal, isValid,
+                    statusLabel, statusClass, statusColor, formatDate,
+                    isAdmin, adminStatuses, updateStatus,
+                    filterStatus, filteredRequests, statusCounts
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>