升级优化

Dockerfile

@@ -12,9 +12,6 @@ COPY . .
 # 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"]

app.py

@@ -5,20 +5,69 @@ from datetime import datetime
 from flask import Flask, render_template, request, jsonify
 
 app = Flask(__name__)
-DATA_FILE = "requests.json"
+DATA_FILE = os.environ.get("DATA_FILE", "requests.json")
+
+DEFAULT_REQUESTS = [
+    {
+        "id": "1",
+        "title": "增加暗色模式",
+        "description": "建议增加暗色模式支持，方便夜间使用。",
+        "category": "界面设计 (UI/UX)",
+        "votes": 15,
+        "status": "planned",
+        "created_at": datetime.now().isoformat(),
+        "comments": []
+    },
+    {
+        "id": "2",
+        "title": "支持图片上传",
+        "description": "在提交反馈时，希望可以上传截图，这样能更直观地说明问题。",
+        "category": "功能建议 (Feature)",
+        "votes": 8,
+        "status": "pending",
+        "created_at": datetime.now().isoformat(),
+        "comments": []
+    },
+    {
+        "id": "3",
+        "title": "移动端适配优化",
+        "description": "目前在手机上查看列表时，排版有些拥挤，建议优化移动端显示。",
+        "category": "界面设计 (UI/UX)",
+        "votes": 12,
+        "status": "in_progress",
+        "created_at": datetime.now().isoformat(),
+        "comments": []
+    }
+]
 
 def load_data():
     if not os.path.exists(DATA_FILE):
-        return []
+        save_data(DEFAULT_REQUESTS)
+        return DEFAULT_REQUESTS
     try:
         with open(DATA_FILE, "r", encoding="utf-8") as f:
-            return json.load(f)
-    except Exception:
-        return []
+            data = json.load(f)
+            if not isinstance(data, list):
+                # If data is corrupted (not a list), backup and reset
+                print(f"Warning: {DATA_FILE} contains invalid data (not a list). Resetting.")
+                os.rename(DATA_FILE, DATA_FILE + ".bak")
+                save_data(DEFAULT_REQUESTS)
+                return DEFAULT_REQUESTS
+            return data
+    except Exception as e:
+        print(f"Error loading data: {e}. Resetting.")
+        # If file is corrupted, reset
+        if os.path.exists(DATA_FILE):
+             os.rename(DATA_FILE, DATA_FILE + ".bak")
+        save_data(DEFAULT_REQUESTS)
+        return DEFAULT_REQUESTS
 
 def save_data(data):
-    with open(DATA_FILE, "w", encoding="utf-8") as f:
-        json.dump(data, f, ensure_ascii=False, indent=2)
+    try:
+        with open(DATA_FILE, "w", encoding="utf-8") as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+    except Exception as e:
+        print(f"Error saving data: {e}")
 
 @app.route("/")
 def index():

requests.json.bak

@@ -0,0 +1 @@
+{"some": "object"}

templates/index.html

@@ -82,13 +82,24 @@
 
                 <!-- Feed -->
                 <div class="md:col-span-3 space-y-4">
+                    <!-- Error State -->
+                    <div v-if="error" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl flex items-center justify-between shadow-sm">
+                        <div class="flex items-center gap-2">
+                            <i class="fa-solid fa-triangle-exclamation"></i>
+                            <span>[[ error ]]</span>
+                        </div>
+                        <button @click="fetchRequests" class="text-sm bg-white border border-red-200 hover:bg-red-50 px-3 py-1 rounded-lg transition-colors">
+                            重试
+                        </button>
+                    </div>
+
                     <!-- 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 v-else-if="!error && 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>
@@ -98,19 +109,19 @@
                     </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">
+                    <div v-else-if="!error" v-for="req in filteredRequests" :key="req.id" class="bg-white rounded-xl p-4 sm:p-5 shadow-sm border border-slate-100 hover:shadow-md transition-shadow group">
+                        <div class="flex gap-3 sm: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)}">
+                            <button @click="vote(req.id)" class="vote-btn flex flex-col items-center justify-center w-10 h-12 sm:w-12 sm: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>
+                                <span class="font-bold text-xs sm: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)]">
+                                    <h3 class="font-bold text-slate-900 text-base sm:text-lg leading-snug">[[ req.title ]]</h3>
+                                    <span :class="['px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-[10px] sm:text-xs font-semibold capitalize whitespace-nowrap ml-2', statusClass(req.status)]">
                                         [[ statusLabel(req.status) ]]
                                     </span>
                                 </div>
@@ -137,6 +148,12 @@
             </div>
         </main>
 
+        <footer class="bg-white border-t border-slate-200 py-6 mt-auto">
+            <div class="max-w-5xl mx-auto px-4 text-center text-slate-400 text-sm">
+                <p>&copy; 2026 Feature Request Hub. All rights reserved.</p>
+            </div>
+        </footer>
+
         <!-- 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">
@@ -185,6 +202,7 @@
             setup() {
                 const requests = ref([]);
                 const loading = ref(true);
+                const error = ref(null);
                 const showModal = ref(false);
                 const submitting = ref(false);
                 const isAdmin = ref(false);
@@ -208,11 +226,14 @@
 
                 const fetchRequests = async () => {
                     loading.value = true;
+                    error.value = null;
                     try {
                         const res = await fetch('/api/requests');
+                        if (!res.ok) throw new Error('Failed to load requests');
                         requests.value = await res.json();
                     } catch (e) {
                         console.error(e);
+                        error.value = '加载数据失败，请稍后重试。';
                     } finally {
                         loading.value = false;
                     }
@@ -334,7 +355,7 @@
                 });
 
                 return {
-                    requests, loading, showModal, submitting, newRequest,
+                    requests, loading, error, showModal, submitting, newRequest,
                     submitRequest, vote, hasVoted, openModal, isValid,
                     statusLabel, statusClass, statusColor, formatDate,
                     isAdmin, adminStatuses, updateStatus,