Spaces:

duqing026
/

okr-map-studio

Sleeping

App Files Files Community

Trae Assistant commited on Feb 1

Commit

5b437e6

0 Parent(s):

Enhance robustness and functionality

Browse files

Files changed (5) hide show

Dockerfile +13 -0
README.md +42 -0
app.py +16 -0
requirements.txt +2 -0
templates/index.html +602 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,13 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+# Hugging Face Spaces 默认端口 7860
+EXPOSE 7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md ADDED Viewed

	@@ -0,0 +1,42 @@

+---
+title: OKR Map Studio
+emoji: 🎯
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+pinned: false
+short_description: 可视化 OKR 目标地图生成器
+---
+# OKR 目标地图工作室 (OKR Map Studio)
+一个用于可视化管理 OKR (Objectives and Key Results) 的工具。
+## 功能特点
+- 🌲 **可视化树状图**: 清晰展示公司、部门、个人的目标层级关系。
+- 📊 **进度追踪**: 实时调整和查看每个节点的进度百分比。
+- 🎨 **导出图片**: 一键生成高质量 PNG 图片，方便分享和汇报。
+- 💾 **本地存储**: 数据保存在浏览器本地，隐私安全，随时继续工作。
+- 🔄 **JSON 导入导出**: 方便备份和迁移数据。
+## 使用方法
+1. **编辑节点**: 点击任意卡片，修改标题、负责人、类型和进度。
+2. **添加子节点**: 鼠标悬停在卡片上，点击右上角的 "+" 按钮。
+3. **删除节点**: 鼠标悬停在卡片上，点击右上角的垃圾桶按钮（根节点不可删除）。
+4. **缩放移动**: 按住鼠标左键拖拽画布，使用右下角按钮缩放。
+## 技术栈
+- Python / Flask
+- Vue.js 3
+- Tailwind CSS
+- html2canvas
+## 运行
+```bash
+pip install -r requirements.txt
+python app.py
+```

app.py ADDED Viewed

	@@ -0,0 +1,16 @@

+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__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=True)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,602 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OKR 目标地图工作室</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        /* Custom Tree CSS */
+        .tree ul {
+            padding-top: 20px;
+            position: relative;
+            transition: all 0.5s;
+            -webkit-transition: all 0.5s;
+            -moz-transition: all 0.5s;
+            display: flex;
+            justify-content: center;
+        }
+        .tree li {
+            text-align: center;
+            list-style-type: none;
+            position: relative;
+            padding: 20px 10px 0 10px;
+            transition: all 0.5s;
+            -webkit-transition: all 0.5s;
+            -moz-transition: all 0.5s;
+        }
+        /* We will use ::before and ::after to draw the connectors */
+        .tree li::before, .tree li::after{
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 50%;
+            border-top: 2px solid #ccc;
+            width: 50%;
+            height: 20px;
+        }
+        .tree li::after{
+            right: auto;
+            left: 50%;
+            border-left: 2px solid #ccc;
+        }
+        /* We need to remove left-right connectors from elements without
+           any siblings */
+        .tree li:only-child::after, .tree li:only-child::before {
+            display: none;
+        }
+        /* Remove space from the top of single children */
+        .tree li:only-child{
+            padding-top: 0;
+        }
+        /* Remove left connector from first child and
+           right connector from last child */
+        .tree li:first-child::before, .tree li:last-child::after{
+            border: 0 none;
+        }
+        /* Adding back the vertical connector to the last nodes */
+        .tree li:last-child::before{
+            border-right: 2px solid #ccc;
+            border-radius: 0 5px 0 0;
+            -webkit-border-radius: 0 5px 0 0;
+            -moz-border-radius: 0 5px 0 0;
+        }
+        .tree li:first-child::after{
+            border-radius: 5px 0 0 0;
+            -webkit-border-radius: 5px 0 0 0;
+            -moz-border-radius: 5px 0 0 0;
+        }
+        /* Time to add downward connectors from parents */
+        .tree ul ul::before{
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            border-left: 2px solid #ccc;
+            width: 0;
+            height: 20px;
+        }
+        .node-card {
+            display: inline-block;
+            padding: 10px;
+            text-decoration: none;
+            color: #666;
+            font-family: arial, verdana, tahoma;
+            font-size: 14px;
+            border-radius: 5px;
+            transition: all 0.5s;
+            -webkit-transition: all 0.5s;
+            -moz-transition: all 0.5s;
+            background: white;
+            min-width: 200px;
+            max-width: 260px;
+            position: relative;
+            z-index: 10;
+        }
+        /* Hover effects */
+        .node-card:hover, .node-card:hover+ul li .node-card {
+            /* background: #c8e4f8; color: #000; border: 1px solid #94a0b4; */
+            transform: scale(1.02);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        /* Connector styles on hover */
+        /* .tree li a:hover+ul li::after,
+        .tree li a:hover+ul li::before,
+        .tree li a:hover+ul::before,
+        .tree li a:hover+ul ul::before{
+            border-color:  #94a0b4;
+        } */
+        [v-cloak] { display: none; }
+        .bg-pattern {
+            background-color: #f3f4f6;
+            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+    </style>
+</head>
+<body class="bg-pattern h-screen flex flex-col overflow-hidden text-gray-800">
+    <div id="app" v-cloak class="flex flex-col h-full">
+        <!-- Navbar -->
+        <header class="bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center shadow-sm z-20">
+            <div class="flex items-center space-x-3">
+                <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center text-white text-xl font-bold shadow-lg">
+                    <i class="fas fa-sitemap"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-900">OKR 目标地图工作室</h1>
+                    <p class="text-xs text-gray-500">可视化战略与关键结果管���</p>
+                </div>
+            </div>
+            <div class="flex space-x-3">
+                <button @click="resetData" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 rounded-md transition">
+                    <i class="fas fa-undo mr-2"></i>重置
+                </button>
+                <button @click="importData" class="px-4 py-2 text-sm text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 rounded-md transition">
+                    <i class="fas fa-file-import mr-2"></i>导入 JSON
+                </button>
+                <button @click="exportJSON" class="px-4 py-2 text-sm text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 rounded-md transition">
+                    <i class="fas fa-file-code mr-2"></i>导出 JSON
+                </button>
+                <button @click="exportImage" class="px-4 py-2 text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-md shadow-md transition flex items-center">
+                    <i class="fas fa-camera mr-2"></i>导出图片
+                </button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="flex-1 overflow-auto relative cursor-grab active:cursor-grabbing p-10" id="canvas-container" @mousedown="startDrag" @mousemove="onDrag" @mouseup="stopDrag" @mouseleave="stopDrag" ref="container">
+            <div class="tree transform origin-top-center transition-transform duration-200" :style="{ transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)` }" id="okr-tree">
+                <ul>
+                    <tree-item :model="treeData" @add-child="addChild" @delete-node="deleteNode" @update-node="updateNode"></tree-item>
+                </ul>
+            </div>
+            <!-- Zoom Controls -->
+            <div class="absolute bottom-6 right-6 bg-white rounded-lg shadow-lg flex flex-col overflow-hidden border border-gray-200">
+                <button @click="zoomIn" class="p-2 hover:bg-gray-100 text-gray-600 border-b border-gray-100"><i class="fas fa-plus"></i></button>
+                <button @click="resetZoom" class="p-2 hover:bg-gray-100 text-gray-600 text-xs font-mono">{{ Math.round(scale * 100) }}%</button>
+                <button @click="zoomOut" class="p-2 hover:bg-gray-100 text-gray-600 border-t border-gray-100"><i class="fas fa-minus"></i></button>
+            </div>
+        </main>
+        <!-- Edit Modal -->
+        <div v-if="editingNode" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div class="bg-white rounded-xl shadow-2xl w-96 p-6 animate-fade-in-up">
+                <h3 class="text-lg font-bold mb-4 text-gray-900 border-b pb-2">编辑节点</h3>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">标题 / 目标</label>
+                        <input v-model="editingNode.title" type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="例如：Q1 业绩翻倍">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
+                        <input v-model="editingNode.owner" type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="例如：产品部">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">类型</label>
+                        <select v-model="editingNode.type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
+                            <option value="company">公司级目标 (O)</option>
+                            <option value="objective">部门级目标 (O)</option>
+                            <option value="key_result">关键结果 (KR)</option>
+                            <option value="task">具体任务 (Task)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">进度: {{ editingNode.progress }}%</label>
+                        <input v-model.number="editingNode.progress" type="range" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600">
+                    </div>
+                </div>
+                <div class="mt-6 flex justify-end space-x-3">
+                    <button @click="closeEdit" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition">取消</button>
+                    <button @click="saveEdit" class="px-4 py-2 bg-indigo-600 text-white hover:bg-indigo-700 rounded-md shadow-md transition">保存</button>
+                </div>
+            </div>
+        </div>
+        <!-- Hidden File Input for Import -->
+        <input type="file" ref="fileInput" @change="handleFileChange" class="hidden" accept=".json">
+    </div>
+    <!-- Recursive Component Template -->
+    <script type="text/x-template" id="item-template">
+        <li>
+            <div class="node-card border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300"
+                 :class="{
+                    'border-l-4 border-l-indigo-500': model.type === 'company',
+                    'border-l-4 border-l-blue-500': model.type === 'objective',
+                    'border-l-4 border-l-green-500': model.type === 'key_result',
+                    'border-l-4 border-l-gray-400': model.type === 'task'
+                 }"
+                 @click="$emit('update-node', model)">
+                 <!-- Header -->
+                 <div class="flex justify-between items-start mb-2">
+                    <span class="text-xs font-bold uppercase tracking-wider px-2 py-0.5 rounded-full"
+                          :class="{
+                              'bg-indigo-100 text-indigo-800': model.type === 'company',
+                              'bg-blue-100 text-blue-800': model.type === 'objective',
+                              'bg-green-100 text-green-800': model.type === 'key_result',
+                              'bg-gray-100 text-gray-800': model.type === 'task'
+                          }">
+                        {{ getTypeLabel(model.type) }}
+                    </span>
+                    <div class="flex space-x-1 opacity-0 hover:opacity-100 transition-opacity absolute top-2 right-2 group-hover:opacity-100">
+                        <button @click.stop="$emit('add-child', model)" class="w-6 h-6 rounded-full bg-indigo-50 text-indigo-600 hover:bg-indigo-100 flex items-center justify-center" title="添加子节点">
+                            <i class="fas fa-plus text-xs"></i>
+                        </button>
+                        <button v-if="!isRoot" @click.stop="$emit('delete-node', model.id)" class="w-6 h-6 rounded-full bg-red-50 text-red-600 hover:bg-red-100 flex items-center justify-center" title="删除节点">
+                            <i class="fas fa-trash text-xs"></i>
+                        </button>
+                    </div>
+                 </div>
+                 <!-- Content -->
+                 <h3 class="font-bold text-gray-800 mb-1 leading-tight text-left">{{ model.title }}</h3>
+                 <div class="flex items-center text-xs text-gray-500 mb-2">
+                    <i class="fas fa-user-circle mr-1"></i>
+                    <span>{{ model.owner || '未分配' }}</span>
+                 </div>
+                 <!-- Progress -->
+                 <div class="w-full bg-gray-100 rounded-full h-1.5 mb-1 overflow-hidden">
+                    <div class="bg-indigo-600 h-1.5 rounded-full" :style="{ width: model.progress + '%' }"></div>
+                 </div>
+                 <div class="text-right text-xs font-mono text-gray-400">{{ model.progress }}%</div>
+            </div>
+            <ul v-if="model.children && model.children.length">
+                <tree-item
+                    v-for="child in model.children"
+                    :key="child.id"
+                    :model="child"
+                    :is-root="false"
+                    @add-child="$emit('add-child', $event)"
+                    @delete-node="$emit('delete-node', $event)"
+                    @update-node="$emit('update-node', $event)">
+                </tree-item>
+            </ul>
+        </li>
+    </script>
+    <script>
+        const { createApp, ref, reactive, onMounted, computed } = Vue;
+        // Component definition
+        const TreeItem = {
+            name: 'TreeItem',
+            template: '#item-template',
+            props: {
+                model: Object,
+                isRoot: {
+                    type: Boolean,
+                    default: false
+                }
+            },
+            emits: ['add-child', 'delete-node', 'update-node'],
+            setup(props) {
+                const getTypeLabel = (type) => {
+                    const map = {
+                        'company': '公司',
+                        'objective': '目标',
+                        'key_result': '关键结果',
+                        'task': '任务'
+                    };
+                    return map[type] || '节点';
+                };
+                return { getTypeLabel };
+            }
+        };
+        createApp({
+            components: {
+                TreeItem
+            },
+            delimiters: ['${', '}'],
+            setup() {
+                const defaultData = {
+                    id: Date.now(),
+                    title: '2026年度战略目标',
+                    type: 'company',
+                    progress: 30,
+                    owner: 'CEO',
+                    children: [
+                        {
+                            id: Date.now() + 1,
+                            title: '市场占有率达到 25%',
+                            type: 'objective',
+                            progress: 45,
+                            owner: '市场部',
+                            children: [
+                                {
+                                    id: Date.now() + 2,
+                                    title: 'Q1 新增用户 10万',
+                                    type: 'key_result',
+                                    progress: 80,
+                                    owner: '增长组',
+                                    children: []
+                                },
+                                {
+                                    id: Date.now() + 3,
+                                    title: '品牌曝光量提升 50%',
+                                    type: 'key_result',
+                                    progress: 20,
+                                    owner: '品牌组',
+                                    children: []
+                                }
+                            ]
+                        },
+                        {
+                            id: Date.now() + 4,
+                            title: '产品研发效率提升',
+                            type: 'objective',
+                            progress: 15,
+                            owner: '产研中心',
+                            children: [
+                                {
+                                    id: Date.now() + 5,
+                                    title: '上线自动化测试平台',
+                                    type: 'key_result',
+                                    progress: 10,
+                                    owner: '测试组',
+                                    children: []
+                                }
+                            ]
+                        }
+                    ]
+                };
+                const treeData = ref(JSON.parse(JSON.stringify(defaultData)));
+                // Load from localStorage
+                onMounted(() => {
+                    const saved = localStorage.getItem('okr-map-data');
+                    if (saved) {
+                        try {
+                            treeData.value = JSON.parse(saved);
+                        } catch(e) {
+                            console.error('Failed to load data', e);
+                        }
+                    }
+                });
+                // Auto save
+                const saveData = () => {
+                    localStorage.setItem('okr-map-data', JSON.stringify(treeData.value));
+                };
+                // Editing Logic
+                const editingNode = ref(null);
+                const updateNode = (node) => {
+                    // Create a copy to edit
+                    editingNode.value = { ...node, _original: node };
+                };
+                const saveEdit = () => {
+                    if (!editingNode.value) return;
+                    const original = editingNode.value._original;
+                    original.title = editingNode.value.title;
+                    original.owner = editingNode.value.owner;
+                    original.progress = editingNode.value.progress;
+                    original.type = editingNode.value.type;
+                    editingNode.value = null;
+                    saveData();
+                };
+                const closeEdit = () => {
+                    editingNode.value = null;
+                };
+                // Tree Manipulation
+                const addChild = (parentNode) => {
+                    if (!parentNode.children) parentNode.children = [];
+                    parentNode.children.push({
+                        id: Date.now(),
+                        title: '新节点',
+                        type: 'key_result',
+                        progress: 0,
+                        owner: '未分配',
+                        children: []
+                    });
+                    saveData();
+                };
+                const deleteNode = (nodeId) => {
+                    if (confirm('确定要删除这个节点及其子节点吗？')) {
+                        const remove = (nodes, id) => {
+                            // Cannot remove root directly this way, but UI hides delete button for root
+                            if (!nodes) return false;
+                            const idx = nodes.findIndex(n => n.id === id);
+                            if (idx !== -1) {
+                                nodes.splice(idx, 1);
+                                return true;
+                            }
+                            for (const node of nodes) {
+                                if (node.children && remove(node.children, id)) return true;
+                            }
+                            return false;
+                        };
+                        // Handle root children check
+                        if (treeData.value.children) {
+                            remove(treeData.value.children, nodeId);
+                        }
+                        saveData();
+                    }
+                };
+                const resetData = () => {
+                    if (confirm('确定重置所有数据到默认状态吗？')) {
+                        treeData.value = JSON.parse(JSON.stringify(defaultData));
+                        saveData();
+                    }
+                };
+                // Zoom & Pan
+                const scale = ref(1);
+                const translateX = ref(0);
+                const translateY = ref(0);
+                const container = ref(null);
+                let isDragging = false;
+                let startX = 0;
+                let startY = 0;
+                const zoomIn = () => scale.value = Math.min(scale.value + 0.1, 2);
+                const zoomOut = () => scale.value = Math.max(scale.value - 0.1, 0.5);
+                const resetZoom = () => { scale.value = 1; translateX.value = 0; translateY.value = 0; };
+                const startDrag = (e) => {
+                    if (e.target.closest('.node-card')) return; // Don't drag if clicking card
+                    isDragging = true;
+                    startX = e.clientX - translateX.value;
+                    startY = e.clientY - translateY.value;
+                    container.value.style.cursor = 'grabbing';
+                };
+                const onDrag = (e) => {
+                    if (!isDragging) return;
+                    e.preventDefault();
+                    translateX.value = e.clientX - startX;
+                    translateY.value = e.clientY - startY;
+                };
+                const stopDrag = () => {
+                    isDragging = false;
+                    if(container.value) container.value.style.cursor = 'grab';
+                };
+                // Export/Import
+                const exportJSON = () => {
+                    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(treeData.value, null, 2));
+                    const downloadAnchorNode = document.createElement('a');
+                    downloadAnchorNode.setAttribute("href", dataStr);
+                    downloadAnchorNode.setAttribute("download", "okr_map.json");
+                    document.body.appendChild(downloadAnchorNode);
+                    downloadAnchorNode.click();
+                    downloadAnchorNode.remove();
+                };
+                const fileInput = ref(null);
+                const importData = () => {
+                    fileInput.value.click();
+                };
+                const handleFileChange = (e) => {
+                    const file = e.target.files[0];
+                    if (!file) return;
+                    // 1. File Size Check (5MB limit)
+                    const maxSize = 5 * 1024 * 1024;
+                    if (file.size > maxSize) {
+                        alert('文件过大，请上传小于 5MB 的文件');
+                        e.target.value = '';
+                        return;
+                    }
+                    const reader = new FileReader();
+                    reader.onload = (event) => {
+                        const content = event.target.result;
+                        // 2. Binary Check (Null byte check)
+                        if (content.indexOf('\0') !== -1) {
+                            alert('检测到二进制内容，请上传有效的 JSON 文本文件');
+                            e.target.value = '';
+                            return;
+                        }
+                        try {
+                            const json = JSON.parse(content);
+                            // Relaxed check: id OR children (in case root doesn't have ID for some reason, though it should)
+                            if (json && (json.id || json.children)) {
+                                treeData.value = json;
+                                saveData();
+                                alert('导入成功');
+                            } else {
+                                alert('文件格式不正确：缺少必要的节点数据');
+                            }
+                        } catch (err) {
+                            console.error(err);
+                            alert('JSON 解析失败，请检查文件内容是否正确');
+                        }
+                    };
+                    reader.onerror = () => {
+                        alert('读取文件出错');
+                    };
+                    reader.readAsText(file);
+                    e.target.value = ''; // Reset input
+                };
+                const exportImage = () => {
+                    const element = document.getElementById('okr-tree');
+                    // Save current transform
+                    const originalTransform = element.style.transform;
+                    // Reset transform for clean capture
+                    element.style.transform = 'scale(1) translate(0,0)';
+                    // element.style.width = 'fit-content';
+                    html2canvas(element, {
+                        backgroundColor: null, // Transparent or white
+                        scale: 2 // High res
+                    }).then(canvas => {
+                        const link = document.createElement('a');
+                        link.download = 'okr-map.png';
+                        link.href = canvas.toDataURL();
+                        link.click();
+                        // Restore
+                        element.style.transform = originalTransform;
+                    });
+                };
+                return {
+                    treeData,
+                    editingNode,
+                    updateNode,
+                    saveEdit,
+                    closeEdit,
+                    addChild,
+                    deleteNode,
+                    resetData,
+                    scale,
+                    translateX,
+                    translateY,
+                    container,
+                    zoomIn,
+                    zoomOut,
+                    resetZoom,
+                    startDrag,
+                    onDrag,
+                    stopDrag,
+                    exportJSON,
+                    importData,
+                    fileInput,
+                    handleFileChange,
+                    exportImage
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>