Initial commit: Lightweight CRM

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.9-slim
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the port that the application listens on
+EXPOSE 7860
+
+# Run the application
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,72 @@
+---
+title: Lightweight CRM
+emoji: 💼
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+---
+
+# 轻量级客户管理系统 (Lightweight CRM)
+
+这是一个简单、高效的客户关系管理系统，专为自由职业者、个人创作者和小微团队设计。它可以帮助你轻松追踪客户线索、管理销售流程，并统计预期收入。
+
+## ✨ 功能特点
+
+- **📊 实时仪表盘**：直观展示总客户数、潜在总价值、跟进中和已成交的订单。
+- **📋 看板式管理**：通过“线索”、“跟进中”、“已成交”、“已流失”四个阶段管理客户生命周期。
+- **📱 响应式设计**：基于 Tailwind CSS，完美适配桌面和移动端。
+- **⚡ 极速体验**：基于 Flask + SQLite + Alpine.js，轻量级，无复杂依赖。
+- **🔒 数据安全**：数据存储在本地 SQLite 数据库中（Docker 部署时为容器内存储）。
+
+## 🛠️ 技术栈
+
+- **后端**: Python Flask
+- **数据库**: SQLite
+- **前端**: HTML5, Tailwind CSS (CDN), Alpine.js (CDN)
+- **部署**: Docker
+
+## 🚀 快速开始
+
+### 本地运行
+
+1. 克隆代码：
+   ```bash
+   git clone https://github.com/yourusername/lightweight-crm.git
+   cd lightweight-crm
+   ```
+
+2. 安装依赖：
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. 运行应用：
+   ```bash
+   python app.py
+   ```
+
+4. 打开浏览器访问 `http://localhost:7860`
+
+### Docker 部署
+
+```bash
+docker build -t lightweight-crm .
+docker run -p 7860:7860 lightweight-crm
+```
+
+## ☁️ Hugging Face Spaces 部署
+
+本项目已配置为可以直接部署到 Hugging Face Spaces (Docker SDK)。
+
+1. 创建一个新的 Space，SDK 选择 **Docker**。
+2. 将代码推送到 Space 的仓库。
+3. 等待构建完成即可使用。
+
+## 📝 备注
+
+- 默认端口为 `7860`。
+- 数据库文件名为 `clients.db`。
+
+---
+Made with ❤️ by duqing26

app.py

@@ -0,0 +1,115 @@
+import os
+import sqlite3
+import datetime
+from flask import Flask, render_template, request, jsonify, send_file
+
+app = Flask(__name__)
+DB_FILE = "clients.db"
+
+def init_db():
+    conn = sqlite3.connect(DB_FILE)
+    c = conn.cursor()
+    c.execute('''CREATE TABLE IF NOT EXISTS clients (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    name TEXT NOT NULL,
+                    company TEXT,
+                    email TEXT,
+                    phone TEXT,
+                    status TEXT DEFAULT 'lead',
+                    value REAL DEFAULT 0,
+                    notes TEXT,
+                    created_at TEXT
+                )''')
+    conn.commit()
+    conn.close()
+
+def get_db_connection():
+    conn = sqlite3.connect(DB_FILE)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/clients', methods=['GET'])
+def get_clients():
+    conn = get_db_connection()
+    clients = conn.execute('SELECT * FROM clients ORDER BY created_at DESC').fetchall()
+    conn.close()
+    return jsonify([dict(ix) for ix in clients])
+
+@app.route('/api/clients', methods=['POST'])
+def add_client():
+    data = request.json
+    name = data.get('name')
+    if not name:
+        return jsonify({'error': 'Name is required'}), 400
+    
+    conn = get_db_connection()
+    c = conn.cursor()
+    c.execute('''INSERT INTO clients (name, company, email, phone, status, value, notes, created_at)
+                 VALUES (?, ?, ?, ?, ?, ?, ?, ?)''',
+              (name, data.get('company', ''), data.get('email', ''), data.get('phone', ''),
+               data.get('status', 'lead'), data.get('value', 0), data.get('notes', ''),
+               datetime.datetime.now().isoformat()))
+    conn.commit()
+    new_id = c.lastrowid
+    conn.close()
+    return jsonify({'id': new_id, 'message': 'Client added successfully'}), 201
+
+@app.route('/api/clients/<int:client_id>', methods=['PUT'])
+def update_client(client_id):
+    data = request.json
+    conn = get_db_connection()
+    c = conn.cursor()
+    
+    # Dynamic update
+    fields = []
+    values = []
+    for key in ['name', 'company', 'email', 'phone', 'status', 'value', 'notes']:
+        if key in data:
+            fields.append(f"{key} = ?")
+            values.append(data[key])
+    
+    if not fields:
+        return jsonify({'message': 'No fields to update'}), 200
+        
+    values.append(client_id)
+    query = f"UPDATE clients SET {', '.join(fields)} WHERE id = ?"
+    c.execute(query, values)
+    conn.commit()
+    conn.close()
+    return jsonify({'message': 'Client updated successfully'})
+
+@app.route('/api/clients/<int:client_id>', methods=['DELETE'])
+def delete_client(client_id):
+    conn = get_db_connection()
+    conn.execute('DELETE FROM clients WHERE id = ?', (client_id,))
+    conn.commit()
+    conn.close()
+    return jsonify({'message': 'Client deleted successfully'})
+
+@app.route('/api/stats', methods=['GET'])
+def get_stats():
+    conn = get_db_connection()
+    total_clients = conn.execute('SELECT COUNT(*) FROM clients').fetchone()[0]
+    total_value = conn.execute('SELECT SUM(value) FROM clients').fetchone()[0] or 0
+    
+    # Group by status
+    status_counts = conn.execute('SELECT status, COUNT(*) FROM clients GROUP BY status').fetchall()
+    status_data = {row['status']: row[1] for row in status_counts}
+    
+    conn.close()
+    return jsonify({
+        'total_clients': total_clients,
+        'total_value': total_value,
+        'status_counts': status_data
+    })
+
+if __name__ == '__main__':
+    init_db()
+    # Ensure database file has correct permissions if created by Docker root
+    if os.path.exists(DB_FILE):
+        os.chmod(DB_FILE, 0o666)
+    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,252 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>轻量级客户管理系统 (Lightweight CRM)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen text-gray-800" x-data="crmApp()">
+
+    <!-- Navbar -->
+    <nav class="bg-white shadow-md p-4">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-xl font-bold text-blue-600 flex items-center gap-2">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+                轻量级客户管理
+            </h1>
+            <button @click="openModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow transition">
+                + 新增客户
+            </button>
+        </div>
+    </nav>
+
+    <!-- Dashboard Stats -->
+    <div class="container mx-auto mt-6 px-4">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div class="bg-white p-4 rounded-lg shadow border-l-4 border-blue-500">
+                <div class="text-gray-500 text-sm">总客户数</div>
+                <div class="text-2xl font-bold" x-text="stats.total_clients || 0"></div>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow border-l-4 border-green-500">
+                <div class="text-gray-500 text-sm">潜在总价值 (元)</div>
+                <div class="text-2xl font-bold" x-text="(stats.total_value || 0).toLocaleString()"></div>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow border-l-4 border-yellow-500">
+                <div class="text-gray-500 text-sm">跟进中 (Negotiating)</div>
+                <div class="text-2xl font-bold" x-text="stats.status_counts?.negotiating || 0"></div>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow border-l-4 border-indigo-500">
+                <div class="text-gray-500 text-sm">已成交 (Won)</div>
+                <div class="text-2xl font-bold" x-text="stats.status_counts?.won || 0"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Kanban Board -->
+    <div class="container mx-auto mt-8 px-4 pb-12 overflow-x-auto">
+        <div class="flex gap-4 min-w-[1000px]">
+            <!-- Column: Lead -->
+            <template x-for="status in statusList" :key="status.key">
+                <div class="flex-1 min-w-[250px] bg-gray-200 rounded-lg p-3">
+                    <div class="flex justify-between items-center mb-3">
+                        <h3 class="font-bold text-gray-700" x-text="status.label"></h3>
+                        <span class="bg-gray-300 text-gray-600 text-xs px-2 py-1 rounded-full" x-text="clientsByStatus[status.key]?.length || 0"></span>
+                    </div>
+                    <div class="space-y-3">
+                        <template x-for="client in clientsByStatus[status.key]" :key="client.id">
+                            <div class="bg-white p-3 rounded shadow hover:shadow-md cursor-pointer transition border-t-2"
+                                 :class="status.colorClass"
+                                 @click="editClient(client)">
+                                <div class="flex justify-between items-start">
+                                    <div class="font-bold text-gray-800" x-text="client.name"></div>
+                                    <div class="text-xs font-semibold text-green-600" x-show="client.value > 0">
+                                        ¥<span x-text="client.value.toLocaleString()"></span>
+                                    </div>
+                                </div>
+                                <div class="text-sm text-gray-600 mt-1 truncate" x-text="client.company || '无公司信息'"></div>
+                                <div class="text-xs text-gray-400 mt-2 flex justify-between">
+                                    <span x-text="formatDate(client.created_at)"></span>
+                                </div>
+                            </div>
+                        </template>
+                        <div x-show="!clientsByStatus[status.key]?.length" class="text-center text-gray-400 text-sm py-4">
+                            暂无客户
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+
+    <!-- Modal -->
+    <div x-show="isModalOpen" class="fixed inset-0 z-50 overflow-y-auto" x-cloak>
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true" @click="closeModal()">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900" x-text="isEditMode ? '编辑客户' : '新增客户'"></h3>
+                            <div class="mt-4 space-y-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700">姓名 *</label>
+                                    <input type="text" x-model="form.name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700">公司</label>
+                                    <input type="text" x-model="form.company" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
+                                </div>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700">电话</label>
+                                        <input type="text" x-model="form.phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700">邮箱</label>
+                                        <input type="email" x-model="form.email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
+                                    </div>
+                                </div>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700">状态</label>
+                                        <select x-model="form.status" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 bg-white">
+                                            <template x-for="s in statusList" :key="s.key">
+                                                <option :value="s.key" x-text="s.label"></option>
+                                            </template>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700">预期价值 (元)</label>
+                                        <input type="number" x-model="form.value" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
+                                    </div>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700">备注</label>
+                                    <textarea x-model="form.notes" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"></textarea>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse justify-between">
+                    <div class="flex flex-row-reverse">
+                        <button type="button" @click="saveClient()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+                            保存
+                        </button>
+                        <button type="button" @click="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                            取消
+                        </button>
+                    </div>
+                    <button x-show="isEditMode" @click="deleteClient()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm">
+                        删除
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function crmApp() {
+            return {
+                clients: [],
+                stats: {},
+                isModalOpen: false,
+                isEditMode: false,
+                form: {
+                    id: null, name: '', company: '', phone: '', email: '', status: 'lead', value: 0, notes: ''
+                },
+                statusList: [
+                    { key: 'lead', label: '线索 (Lead)', colorClass: 'border-blue-500' },
+                    { key: 'negotiating', label: '跟进中 (Negotiating)', colorClass: 'border-yellow-500' },
+                    { key: 'won', label: '已成交 (Won)', colorClass: 'border-green-500' },
+                    { key: 'lost', label: '已流失 (Lost)', colorClass: 'border-gray-500' }
+                ],
+                get clientsByStatus() {
+                    const grouped = {};
+                    this.statusList.forEach(s => grouped[s.key] = []);
+                    this.clients.forEach(c => {
+                        if (grouped[c.status]) {
+                            grouped[c.status].push(c);
+                        }
+                    });
+                    return grouped;
+                },
+                init() {
+                    this.fetchClients();
+                    this.fetchStats();
+                },
+                async fetchClients() {
+                    const res = await fetch('/api/clients');
+                    this.clients = await res.json();
+                },
+                async fetchStats() {
+                    const res = await fetch('/api/stats');
+                    this.stats = await res.json();
+                },
+                openModal() {
+                    this.isEditMode = false;
+                    this.form = { id: null, name: '', company: '', phone: '', email: '', status: 'lead', value: 0, notes: '' };
+                    this.isModalOpen = true;
+                },
+                editClient(client) {
+                    this.isEditMode = true;
+                    this.form = { ...client };
+                    this.isModalOpen = true;
+                },
+                closeModal() {
+                    this.isModalOpen = false;
+                },
+                async saveClient() {
+                    if (!this.form.name) return alert('姓名不能为空');
+                    
+                    const url = this.isEditMode ? `/api/clients/${this.form.id}` : '/api/clients';
+                    const method = this.isEditMode ? 'PUT' : 'POST';
+                    
+                    const res = await fetch(url, {
+                        method: method,
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(this.form)
+                    });
+                    
+                    if (res.ok) {
+                        this.closeModal();
+                        this.fetchClients();
+                        this.fetchStats();
+                    } else {
+                        alert('保存失败');
+                    }
+                },
+                async deleteClient() {
+                    if (!confirm('确定要删除这个客户吗？')) return;
+                    
+                    const res = await fetch(`/api/clients/${this.form.id}`, {
+                        method: 'DELETE'
+                    });
+                    
+                    if (res.ok) {
+                        this.closeModal();
+                        this.fetchClients();
+                        this.fetchStats();
+                    } else {
+                        alert('删除失败');
+                    }
+                },
+                formatDate(dateStr) {
+                    if (!dateStr) return '';
+                    return new Date(dateStr).toLocaleDateString('zh-CN');
+                }
+            }
+        }
+    </script>
+</body>
+</html>