Spaces:

duqing26
/

smart-decision-matrix

Sleeping

App Files Files Community

duqing2026 commited on Jan 29

Commit

1d666c5

1 Parent(s): cd70bf3

升级优化

Browse files

Files changed (8) hide show

README.md +19 -1
app.py +22 -2
static/.gitkeep +0 -0
static/js/chart.js +0 -0
static/js/html2canvas.min.js +0 -0
static/js/tailwindcss.js +0 -0
static/js/vue.global.js +0 -0
templates/index.html +55 -53

README.md CHANGED Viewed

@@ -30,6 +30,16 @@ short_description: 智能决策矩阵
 ## 🚀 快速开始
 ### Docker 部署
 ```bash
@@ -40,13 +50,21 @@ docker run -p 7860:7860 smart-decision-matrix
 ### 本地运行
 ```bash
 pip install -r requirements.txt
 python app.py
 ```
 打开浏览器访问 `http://localhost:7860` 即可。
-## 💡 使用场景
 *   **产品规划**：在多个功能需求中决定优先级。
 *   **技术选型**：在 React、Vue、Angular 中选择最适合团队的框架。

 ## 🚀 快速开始
+### Hugging Face Spaces 部署
+1.  在 Hugging Face 创建一个新的 Space (SDK 选择 **Docker**)。
+2.  将本项目代码上传/推送到 Space 的仓库。
+    ```bash
+    git remote add space https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+    git push space main
+    ```
+3.  等待构建完成即可访问。
 ### Docker 部署
 ```bash
 ### 本地运行
 ```bash
+# 1. 安装依赖
 pip install -r requirements.txt
+# 2. 运行应用
 python app.py
 ```
 打开浏览器访问 `http://localhost:7860` 即可。
+## �️ 技术栈优化
+*   **Local-First**: 核心依赖 (Vue, Tailwind, Chart.js, html2canvas) 已本地化，无需 CDN，支持离线运行。
+*   **Zero External CSS**: 移除 FontAwesome，改用内联 SVG 图标，提升加载速度。
+*   **Backend**: Flask (Python) with Gunicorn ready.
+*   **Deployment**: Docker optimized for Hugging Face Spaces.
 *   **产品规划**：在多个功能需求中决定优先级。
 *   **技术选型**：在 React、Vue、Angular 中选择最适合团队的框架。

app.py CHANGED Viewed

@@ -1,15 +1,35 @@
-from flask import Flask, render_template, send_from_directory
 import os
 app = Flask(__name__)
 @app.route('/')
 def index():
-    return render_template('index.html')
 @app.route('/static/<path:path>')
 def send_static(path):
     return send_from_directory('static', path)
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

+from flask import Flask, render_template, send_from_directory, jsonify
 import os
 app = Flask(__name__)
+# Ensure static folder exists to prevent errors
+if not os.path.exists('static'):
+    os.makedirs('static')
 @app.route('/')
 def index():
+    try:
+        return render_template('index.html')
+    except Exception as e:
+        return f"Error rendering template: {str(e)}", 500
+@app.route('/health')
+def health():
+    return jsonify({"status": "healthy"}), 200
 @app.route('/static/<path:path>')
 def send_static(path):
     return send_from_directory('static', path)
+# Error handlers
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('index.html'), 404
+@app.errorhandler(500)
+def internal_server_error(e):
+    return jsonify({"error": "Internal Server Error", "details": str(e)}), 500
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

static/.gitkeep ADDED Viewed

File without changes

static/js/chart.js ADDED Viewed

The diff for this file is too large to render. See raw diff

static/js/html2canvas.min.js ADDED Viewed

The diff for this file is too large to render. See raw diff

static/js/tailwindcss.js ADDED Viewed

The diff for this file is too large to render. See raw diff

static/js/vue.global.js ADDED Viewed

The diff for this file is too large to render. See raw diff

templates/index.html CHANGED Viewed

@@ -4,11 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>智能决策矩阵 - Smart Decision Matrix</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         body { font-family: 'Inter', sans-serif; }
@@ -25,21 +25,22 @@
     </style>
 </head>
 <body class="bg-gray-50 text-gray-800 min-h-screen">
     <div id="app" v-cloak class="min-h-screen flex flex-col">
         <!-- Navbar -->
         <nav class="bg-white shadow-sm border-b border-gray-200">
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div class="flex justify-between h-16">
                     <div class="flex items-center">
-                        <i class="fas fa-balance-scale text-indigo-600 text-2xl mr-3"></i>
                         <h1 class="text-xl font-bold text-gray-900">智能决策矩阵</h1>
                     </div>
                     <div class="flex items-center space-x-4">
-                        <button @click="resetData" class="text-gray-500 hover:text-red-600 transition-colors text-sm">
-                            <i class="fas fa-trash-alt mr-1"></i> 重置
                         </button>
-                        <button @click="exportImage" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors shadow-sm">
-                            <i class="fas fa-download mr-2"></i> 导出图片
                         </button>
                     </div>
                 </div>
@@ -71,8 +72,8 @@
                                     <span class="bg-indigo-100 text-indigo-600 w-6 h-6 rounded-full flex items-center justify-center text-xs mr-2">1</span>
                                     评价标准 (Criteria)
                                 </h2>
-                                <button @click="addCriteria" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
-                                    <i class="fas fa-plus mr-1"></i> 添加标准
                                 </button>
                             </div>
                             <div class="bg-gray-50 rounded-lg p-4 space-y-3">
@@ -85,7 +86,7 @@
                                         <input type="range" v-model.number="crit.weight" min="1" max="10" class="w-24 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
                                     </div>
                                     <button @click="removeCriteria(index)" class="text-gray-300 hover:text-red-500 transition-colors" v-if="criteria.length > 1">
-                                        <i class="fas fa-times"></i>
                                     </button>
                                 </div>
                             </div>
@@ -98,8 +99,8 @@
                                     <span class="bg-indigo-100 text-indigo-600 w-6 h-6 rounded-full flex items-center justify-center text-xs mr-2">2</span>
                                     选项评分 (Options & Scoring)
                                 </h2>
-                                <button @click="addOption" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
-                                    <i class="fas fa-plus mr-1"></i> 添加选项
                                 </button>
                             </div>
@@ -133,7 +134,7 @@
                                             </td>
                                             <td class="px-2 py-4 whitespace-nowrap text-center">
                                                 <button @click="removeOption(optIndex)" class="text-gray-300 hover:text-red-500 transition-colors" v-if="options.length > 1">
-                                                    <i class="fas fa-times"></i>
                                                 </button>
                                             </td>
                                         </tr>
@@ -199,18 +200,19 @@
             setup() {
                 // Initial Data
                 const defaultCriteria = [
-                    { id: 'c1', name: '影响力 (Impact)', weight: 5 },
-                    { id: 'c2', name: '成本 (Cost)', weight: 3 }, // Lower cost is usually better, but here we assume score 10 = best (low cost)
-                    { id: 'c3', name: '执行难度 (Ease)', weight: 4 }
                 ];
                 const defaultOptions = [
-                    { id: 'o1', name: '方案 A', scores: { 'c1': 8, 'c2': 6, 'c3': 7 } },
-                    { id: 'o2', name: '方案 B', scores: { 'c1': 9, 'c2': 4, 'c3': 5 } },
-                    { id: 'o3', name: '方案 C', scores: { 'c1': 6, 'c2': 9, 'c3': 9 } }
                 ];
-                const projectTitle = ref('我的决策矩阵');
                 const criteria = ref([...defaultCriteria]);
                 const options = ref([...defaultOptions]);
                 const chartInstance = ref(null);
@@ -247,20 +249,11 @@
                 };
                 const resetData = () => {
-                    if(confirm('确定要重置所有数据吗？')) {
-                        projectTitle.value = '新决策项目';
-                        criteria.value = [
-                            { id: Date.now() + 'c1', name: '标准 1', weight: 5 },
-                            { id: Date.now() + 'c2', name: '标准 2', weight: 5 }
-                        ];
-                        options.value = [
-                            { id: Date.now() + 'o1', name: '选项 1', scores: {} },
-                            { id: Date.now() + 'o2', name: '选项 2', scores: {} }
-                        ];
-                        // Initialize scores
-                        options.value.forEach(o => {
-                            criteria.value.forEach(c => o.scores[c.id] = 5);
-                        });
                     }
                 };
@@ -319,27 +312,35 @@
                 // Chart
                 const renderChart = () => {
                     const ctx = document.getElementById('scoreChart');
                     if (!ctx) return;
-                    if (chartInstance.value) {
-                        chartInstance.value.destroy();
-                    }
-                    chartInstance.value = new Chart(ctx, {
-                        type: 'bar',
-                        data: getChartData(),
-                        options: {
-                            responsive: true,
-                            maintainAspectRatio: false,
-                            plugins: {
-                                legend: { display: false }
-                            },
-                            scales: {
-                                y: { beginAtZero: true }
                             }
-                        }
-                    });
                 };
                 const updateChart = () => {
@@ -410,5 +411,6 @@
             }
         }).mount('#app');
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>智能决策矩阵 - Smart Decision Matrix</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚖️</text></svg>">
+    <script src="/static/js/tailwindcss.js"></script>
+    <script src="/static/js/vue.global.js"></script>
+    <script src="/static/js/chart.js"></script>
+    <script src="/static/js/html2canvas.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         body { font-family: 'Inter', sans-serif; }
     </style>
 </head>
 <body class="bg-gray-50 text-gray-800 min-h-screen">
+{% raw %}
     <div id="app" v-cloak class="min-h-screen flex flex-col">
         <!-- Navbar -->
         <nav class="bg-white shadow-sm border-b border-gray-200">
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div class="flex justify-between h-16">
                     <div class="flex items-center">
+                        <svg class="w-8 h-8 text-indigo-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path></svg>
                         <h1 class="text-xl font-bold text-gray-900">智能决策矩阵</h1>
                     </div>
                     <div class="flex items-center space-x-4">
+                        <button @click="resetData" class="text-gray-500 hover:text-red-600 transition-colors text-sm flex items-center">
+                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg> 重置
                         </button>
+                        <button @click="exportImage" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors shadow-sm flex items-center">
+                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg> 导出图片
                         </button>
                     </div>
                 </div>
                                     <span class="bg-indigo-100 text-indigo-600 w-6 h-6 rounded-full flex items-center justify-center text-xs mr-2">1</span>
                                     评价标准 (Criteria)
                                 </h2>
+                                <button @click="addCriteria" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
+                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg> 添加标准
                                 </button>
                             </div>
                             <div class="bg-gray-50 rounded-lg p-4 space-y-3">
                                         <input type="range" v-model.number="crit.weight" min="1" max="10" class="w-24 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
                                     </div>
                                     <button @click="removeCriteria(index)" class="text-gray-300 hover:text-red-500 transition-colors" v-if="criteria.length > 1">
+                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                     </button>
                                 </div>
                             </div>
                                     <span class="bg-indigo-100 text-indigo-600 w-6 h-6 rounded-full flex items-center justify-center text-xs mr-2">2</span>
                                     选项评分 (Options & Scoring)
                                 </h2>
+                                <button @click="addOption" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
+                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg> 添加选项
                                 </button>
                             </div>
                                             </td>
                                             <td class="px-2 py-4 whitespace-nowrap text-center">
                                                 <button @click="removeOption(optIndex)" class="text-gray-300 hover:text-red-500 transition-colors" v-if="options.length > 1">
+                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                                 </button>
                                             </td>
                                         </tr>
             setup() {
                 // Initial Data
                 const defaultCriteria = [
+                    { id: 'c1', name: '功能完备性 (Features)', weight: 5 },
+                    { id: 'c2', name: '易用性 (Usability)', weight: 4 },
+                    { id: 'c3', name: '成本 (Cost)', weight: 3 },
+                    { id: 'c4', name: '社区支持 (Community)', weight: 2 }
                 ];
                 const defaultOptions = [
+                    { id: 'o1', name: '方案 A (React)', scores: { 'c1': 9, 'c2': 7, 'c3': 6, 'c4': 10 } },
+                    { id: 'o2', name: '方案 B (Vue)', scores: { 'c1': 8, 'c2': 9, 'c3': 7, 'c4': 9 } },
+                    { id: 'o3', name: '方案 C (Angular)', scores: { 'c1': 9, 'c2': 6, 'c3': 5, 'c4': 8 } }
                 ];
+                const projectTitle = ref('技术选型决策矩阵 (示例)');
                 const criteria = ref([...defaultCriteria]);
                 const options = ref([...defaultOptions]);
                 const chartInstance = ref(null);
                 };
                 const resetData = () => {
+                    if(confirm('确定要重置所有数据吗？这将恢复到默认示例。')) {
+                        projectTitle.value = '技术选型决策矩阵 (示例)';
+                        // Clone defaults to avoid reference issues
+                        criteria.value = JSON.parse(JSON.stringify(defaultCriteria));
+                        options.value = JSON.parse(JSON.stringify(defaultOptions));
                     }
                 };
                 // Chart
                 const renderChart = () => {
+                    if (typeof Chart === 'undefined') {
+                        console.error('Chart.js not loaded');
+                        return;
+                    }
                     const ctx = document.getElementById('scoreChart');
                     if (!ctx) return;
+                    try {
+                        if (chartInstance.value) {
+                            chartInstance.value.destroy();
+                        }
+                        chartInstance.value = new Chart(ctx, {
+                            type: 'bar',
+                            data: getChartData(),
+                            options: {
+                                responsive: true,
+                                maintainAspectRatio: false,
+                                plugins: {
+                                    legend: { display: false }
+                                },
+                                scales: {
+                                    y: { beginAtZero: true }
+                                }
                             }
+                        });
+                    } catch (e) {
+                        console.error('Error rendering chart:', e);
+                    }
                 };
                 const updateChart = () => {
             }
         }).mount('#app');
     </script>
+{% endraw %}
 </body>
 </html>