Spaces:

duqing26
/

stakeholder-map-studio

Sleeping

App Files Files Community

Trae Assistant commited on Jan 31

Commit

e62ad0b

1 Parent(s): d80bcd3

Fix: Revert Jinja2 to default, use Vue custom delimiters, add Dark Mode

Browse files

Files changed (2) hide show

app.py +3 -6
templates/index.html +97 -64

app.py CHANGED Viewed

@@ -8,12 +8,9 @@ app = Flask(__name__, static_folder='static', template_folder='templates')
 app.config['MAX_CONTENT_LENGTH'] = 2 * 1024 * 1024  # Limit upload to 2MB (JSON files shouldn't be large)
 # Jinja2 configuration to avoid conflict with Vue.js
-app.jinja_env.variable_start_string = '(('
-app.jinja_env.variable_end_string = '))'
-app.jinja_env.block_start_string = '((%'
-app.jinja_env.block_end_string = '%))'
-app.jinja_env.comment_start_string = '((#'
-app.jinja_env.comment_end_string = '#))'
 # Project Metadata
 PROJECT_INFO = {

 app.config['MAX_CONTENT_LENGTH'] = 2 * 1024 * 1024  # Limit upload to 2MB (JSON files shouldn't be large)
 # Jinja2 configuration to avoid conflict with Vue.js
+# Using default Jinja2 delimiters {{ }}. Vue.js will be configured to use ['${', '}']
 # Project Metadata
 PROJECT_INFO = {

templates/index.html CHANGED Viewed

@@ -3,12 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>(( project.title_cn )) - (( project.name ))</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="/static/js/vue.global.js"></script>
     <script src="/static/js/html2canvas.min.js"></script>
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     colors: {
@@ -38,39 +39,46 @@
         .quadrant:hover {
             background-color: rgba(243, 244, 246, 0.5);
         }
         [v-cloak] { display: none; }
     </style>
 </head>
-<body class="bg-gray-50 h-screen flex flex-col font-sans text-gray-800">
     <div id="app" v-cloak class="flex-1 flex flex-col h-full">
         <!-- Header -->
-        <header class="bg-white shadow-sm z-10 px-6 py-3 flex justify-between items-center">
             <div class="flex items-center gap-3">
                 <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
                     S
                 </div>
                 <div>
-                    <h1 class="text-xl font-bold text-gray-900">(( project.title_cn ))</h1>
-                    <p class="text-xs text-gray-500">(( project.name )) v(( project.version ))</p>
                 </div>
             </div>
-            <div class="flex gap-3">
-                <button @click="clearAll" class="px-4 py-2 text-sm text-red-600 hover:text-red-800 transition-colors flex items-center gap-2">
                     <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="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="resetData" class="px-4 py-2 text-sm text-gray-600 hover:text-indigo-600 transition-colors">
                     重置演示
                 </button>
                 <div class="relative">
-                    <button @click="triggerImport" class="px-4 py-2 text-sm text-gray-600 hover:text-indigo-600 transition-colors flex items-center gap-2">
                         <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                         导入
                     </button>
                     <input type="file" ref="fileInput" @change="handleImport" class="hidden" accept=".json">
                 </div>
-                <button @click="exportJSON" class="px-4 py-2 text-sm text-gray-600 hover:text-indigo-600 transition-colors flex items-center gap-2">
                      <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                     导出JSON
                 </button>
@@ -84,39 +92,39 @@
         <!-- Main Content -->
         <div class="flex-1 flex overflow-hidden">
             <!-- Sidebar: Controls & List -->
-            <div class="w-80 bg-white border-r border-gray-200 flex flex-col z-10 shadow-lg">
-                <div class="p-5 border-b border-gray-100">
-                    <h2 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                         <span class="w-1 h-5 bg-indigo-500 rounded-full"></span>
                         添加相关方
                     </h2>
                     <div class="space-y-3">
                         <div>
-                            <label class="block text-xs font-medium text-gray-500 mb-1">名称</label>
-                            <input v-model="newStakeholder.name" @keyup.enter="addStakeholder" type="text" placeholder="例如：CEO, 核心用户..." class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                         </div>
                         <div>
-                            <label class="block text-xs font-medium text-gray-500 mb-1">角色类型</label>
                             <div class="grid grid-cols-2 gap-2">
                                 <button v-for="cat in categories" :key="cat.id"
                                     @click="newStakeholder.category = cat.id"
                                     :class="{'ring-2 ring-offset-1': newStakeholder.category === cat.id}"
                                     class="px-2 py-1.5 rounded text-xs font-medium text-white transition-all text-center truncate"
                                     :style="{backgroundColor: cat.color}">
-                                    {{ cat.name }}
                                 </button>
                             </div>
                         </div>
-                        <button @click="addStakeholder" :disabled="!newStakeholder.name" class="w-full py-2 bg-gray-900 text-white rounded-md text-sm font-medium hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                             添加至待定区
                         </button>
                     </div>
                 </div>
-                <div class="flex-1 overflow-y-auto p-4 bg-gray-50">
                     <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">待定区 (拖拽至右侧)</h3>
                     <div
-                        class="min-h-[100px] border-2 border-dashed border-gray-300 rounded-lg p-2 flex flex-col gap-2 transition-colors"
                         @dragover.prevent
                         @drop="onDrop($event, 'sidebar')"
                     >
@@ -128,12 +136,12 @@
                             :key="s.id"
                             draggable="true"
                             @dragstart="onDragStart($event, s)"
-                            class="stakeholder-card bg-white p-3 rounded shadow-sm border-l-4 flex justify-between items-center group"
                             :style="{borderLeftColor: getCategoryColor(s.category)}"
                         >
                             <div>
-                                <div class="font-bold text-gray-800 text-sm">{{ s.name }}</div>
-                                <div class="text-[10px] text-gray-500">{{ getCategoryName(s.category) }}</div>
                             </div>
                             <button @click="deleteStakeholder(s.id)" class="text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
                                 <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="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>
@@ -141,9 +149,9 @@
                         </div>
                     </div>
-                    <div class="mt-6 bg-blue-50 p-3 rounded-lg border border-blue-100">
-                        <h4 class="text-xs font-bold text-blue-800 mb-1">使用说明</h4>
-                        <ul class="text-xs text-blue-700 list-disc list-inside space-y-1">
                             <li>输入名称并选择类型，添加相关方</li>
                             <li>将卡片拖拽至右侧矩阵的相应位置</li>
                             <li><b>Power (权力)</b>: 影响项目的能力</li>
@@ -155,67 +163,67 @@
             </div>
             <!-- Canvas Area -->
-            <div class="flex-1 bg-gray-100 p-8 overflow-auto flex items-center justify-center relative">
-                <div id="capture-area" class="bg-white shadow-2xl rounded-xl w-[900px] min-h-[800px] flex flex-col p-6 relative select-none">
                     <!-- Title for Export -->
                     <div class="text-center mb-4">
-                        <h2 class="text-2xl font-bold text-gray-800">利益相关者分析矩阵 (Stakeholder Matrix)</h2>
-                        <p class="text-sm text-gray-500">Power-Interest Grid</p>
                     </div>
                     <!-- Matrix Container -->
-                    <div class="flex-1 relative border-l-2 border-b-2 border-gray-800 ml-8 mb-8">
                         <!-- Axis Labels -->
-                        <div class="absolute -left-10 top-1/2 -translate-y-1/2 -rotate-90 text-sm font-bold tracking-widest text-gray-600">
                             权力 (POWER)
-                            <span class="text-xs font-normal block text-center text-gray-400">Low → High</span>
                         </div>
-                        <div class="absolute bottom-[-40px] left-1/2 -translate-x-1/2 text-sm font-bold tracking-widest text-gray-600">
                             利益 (INTEREST)
-                            <span class="text-xs font-normal block text-center text-gray-400">Low → High</span>
                         </div>
                         <!-- Grid Background -->
                         <div class="absolute inset-0 grid grid-cols-2 grid-rows-2">
                             <!-- Top Left: High Power, Low Interest -->
-                            <div class="quadrant border-r border-b border-gray-200 bg-gray-50/30 p-4 relative"
                                  @dragover.prevent @drop="onDrop($event, 'matrix', {p:'high', i:'low'})">
-                                <div class="absolute top-2 left-2 text-indigo-900 font-bold opacity-20 text-4xl">A</div>
                                 <div class="absolute top-4 left-4">
-                                    <h3 class="font-bold text-gray-700">令其满意 (Keep Satisfied)</h3>
-                                    <p class="text-xs text-gray-500">High Power, Low Interest</p>
                                 </div>
                             </div>
                             <!-- Top Right: High Power, High Interest -->
-                            <div class="quadrant border-b border-gray-200 bg-indigo-50/30 p-4 relative"
                                  @dragover.prevent @drop="onDrop($event, 'matrix', {p:'high', i:'high'})">
-                                <div class="absolute top-2 right-2 text-indigo-900 font-bold opacity-20 text-4xl">B</div>
                                 <div class="absolute top-4 right-4 text-right">
-                                    <h3 class="font-bold text-indigo-700">重点管理 (Manage Closely)</h3>
-                                    <p class="text-xs text-indigo-500">High Power, High Interest</p>
                                 </div>
                             </div>
                             <!-- Bottom Left: Low Power, Low Interest -->
-                            <div class="quadrant border-r border-gray-200 bg-white p-4 relative"
                                  @dragover.prevent @drop="onDrop($event, 'matrix', {p:'low', i:'low'})">
-                                <div class="absolute bottom-2 left-2 text-indigo-900 font-bold opacity-20 text-4xl">C</div>
                                 <div class="absolute bottom-4 left-4">
-                                    <h3 class="font-bold text-gray-500">最小关注 (Monitor)</h3>
-                                    <p class="text-xs text-gray-400">Low Power, Low Interest</p>
                                 </div>
                             </div>
                             <!-- Bottom Right: Low Power, High Interest -->
-                            <div class="quadrant bg-gray-50/30 p-4 relative"
                                  @dragover.prevent @drop="onDrop($event, 'matrix', {p:'low', i:'high'})">
-                                <div class="absolute bottom-2 right-2 text-indigo-900 font-bold opacity-20 text-4xl">D</div>
                                 <div class="absolute bottom-4 right-4 text-right">
-                                    <h3 class="font-bold text-gray-700">随时告知 (Keep Informed)</h3>
-                                    <p class="text-xs text-gray-500">Low Power, High Interest</p>
                                 </div>
                             </div>
                         </div>
@@ -232,15 +240,15 @@
                                 @dblclick="moveToSidebar(s)"
                             >
                                 <div
-                                    class="w-12 h-12 rounded-full shadow-lg border-2 border-white flex items-center justify-center text-white font-bold text-xs relative transition-transform hover:scale-110"
                                     :style="{backgroundColor: getCategoryColor(s.category)}"
                                     :title="s.name + ' (' + getCategoryName(s.category) + ')'"
                                 >
-                                    {{ s.name.substring(0, 2) }}
                                     <!-- Tooltip -->
                                     <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none">
-                                        {{ s.name }}
                                     </div>
                                 </div>
                             </div>
@@ -248,28 +256,28 @@
                     </div>
                     <!-- Legend & Report -->
-                    <div class="mt-2 border-t pt-4 border-gray-100">
                         <div class="flex justify-center gap-6 mb-4">
                             <div v-for="cat in categories" :key="cat.id" class="flex items-center gap-2">
                                 <div class="w-3 h-3 rounded-full" :style="{backgroundColor: cat.color}"></div>
-                                <span class="text-xs text-gray-600">{{ cat.name }}</span>
                             </div>
                         </div>
                         <!-- Analysis Report -->
-                        <div v-if="matrixStakeholders.length > 0" class="bg-indigo-50 rounded-lg p-4 text-sm text-gray-700">
-                            <h3 class="font-bold text-indigo-900 mb-2 flex items-center gap-2">
                                 <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                                 智能分析报告
                             </h3>
                             <div class="grid grid-cols-4 gap-4">
-                                <div v-for="(count, key) in quadrantCounts" :key="key" class="flex flex-col items-center border-r last:border-0 border-indigo-200">
-                                    <span class="text-xs text-gray-500">{{ getQuadrantLabel(key) }}</span>
-                                    <span class="font-bold text-lg text-indigo-700">{{ count }}</span>
                                 </div>
                             </div>
-                            <p class="mt-3 text-xs text-indigo-600 text-center">
-                                💡 建议：重点关注 <b>{{ quadrantCounts['high-high'] || 0 }}</b> 位“重点管理”对象，需建立紧密沟通机制。
                             </p>
                         </div>
                     </div>
@@ -283,6 +291,7 @@
         const { createApp, ref, computed, onMounted, watch } = Vue;
         createApp({
             setup() {
                 const categories = [
                     { id: 'internal', name: '内部人员', color: '#4f46e5' }, // Indigo
@@ -296,8 +305,30 @@
                 const draggedItem = ref(null);
                 const fileInput = ref(null);
                 // Initialize with some data if empty
                 onMounted(() => {
                     const saved = localStorage.getItem('stakeholder-map-data');
                     if (saved) {
                         stakeholders.value = JSON.parse(saved);
@@ -520,7 +551,9 @@
                     exportJSON,
                     quadrantCounts,
                     getQuadrantLabel,
-                    clearAll
                 };
             }
         }).mount('#app');

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ project.title_cn }} - {{ project.name }}</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="/static/js/vue.global.js"></script>
     <script src="/static/js/html2canvas.min.js"></script>
     <script>
         tailwind.config = {
+            darkMode: 'class',
             theme: {
                 extend: {
                     colors: {
         .quadrant:hover {
             background-color: rgba(243, 244, 246, 0.5);
         }
+        .dark .quadrant:hover {
+            background-color: rgba(55, 65, 81, 0.5);
+        }
         [v-cloak] { display: none; }
     </style>
 </head>
+<body class="bg-gray-50 dark:bg-gray-900 h-screen flex flex-col font-sans text-gray-800 dark:text-gray-100 transition-colors duration-200">
     <div id="app" v-cloak class="flex-1 flex flex-col h-full">
         <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm z-10 px-6 py-3 flex justify-between items-center transition-colors">
             <div class="flex items-center gap-3">
                 <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
                     S
                 </div>
                 <div>
+                    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{{ project.title_cn }}</h1>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ project.name }} v{{ project.version }}</p>
                 </div>
             </div>
+            <div class="flex gap-3 items-center">
+                <button @click="toggleDark" class="p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
+                     <span v-if="!isDark">🌙</span>
+                     <span v-else>☀️</span>
+                </button>
+                <button @click="clearAll" class="px-4 py-2 text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors flex items-center gap-2">
                     <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="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="resetData" class="px-4 py-2 text-sm text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors">
                     重置演示
                 </button>
                 <div class="relative">
+                    <button @click="triggerImport" class="px-4 py-2 text-sm text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors flex items-center gap-2">
                         <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                         导入
                     </button>
                     <input type="file" ref="fileInput" @change="handleImport" class="hidden" accept=".json">
                 </div>
+                <button @click="exportJSON" class="px-4 py-2 text-sm text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors flex items-center gap-2">
                      <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                     导出JSON
                 </button>
         <!-- Main Content -->
         <div class="flex-1 flex overflow-hidden">
             <!-- Sidebar: Controls & List -->
+            <div class="w-80 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col z-10 shadow-lg transition-colors">
+                <div class="p-5 border-b border-gray-100 dark:border-gray-700">
+                    <h2 class="font-bold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
                         <span class="w-1 h-5 bg-indigo-500 rounded-full"></span>
                         添加相关方
                     </h2>
                     <div class="space-y-3">
                         <div>
+                            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">名称</label>
+                            <input v-model="newStakeholder.name" @keyup.enter="addStakeholder" type="text" placeholder="例如：CEO, 核心用户..." class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all bg-white dark:bg-gray-700 dark:text-white">
                         </div>
                         <div>
+                            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">角色类型</label>
                             <div class="grid grid-cols-2 gap-2">
                                 <button v-for="cat in categories" :key="cat.id"
                                     @click="newStakeholder.category = cat.id"
                                     :class="{'ring-2 ring-offset-1': newStakeholder.category === cat.id}"
                                     class="px-2 py-1.5 rounded text-xs font-medium text-white transition-all text-center truncate"
                                     :style="{backgroundColor: cat.color}">
+                                    ${ cat.name }
                                 </button>
                             </div>
                         </div>
+                        <button @click="addStakeholder" :disabled="!newStakeholder.name" class="w-full py-2 bg-gray-900 dark:bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-gray-800 dark:hover:bg-indigo-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                             添加至待定区
                         </button>
                     </div>
                 </div>
+                <div class="flex-1 overflow-y-auto p-4 bg-gray-50 dark:bg-gray-900 transition-colors">
                     <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">待定区 (拖拽至右侧)</h3>
                     <div
+                        class="min-h-[100px] border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 flex flex-col gap-2 transition-colors"
                         @dragover.prevent
                         @drop="onDrop($event, 'sidebar')"
                     >
                             :key="s.id"
                             draggable="true"
                             @dragstart="onDragStart($event, s)"
+                            class="stakeholder-card bg-white dark:bg-gray-800 p-3 rounded shadow-sm border-l-4 flex justify-between items-center group transition-colors"
                             :style="{borderLeftColor: getCategoryColor(s.category)}"
                         >
                             <div>
+                                <div class="font-bold text-gray-800 dark:text-gray-200 text-sm">${ s.name }</div>
+                                <div class="text-[10px] text-gray-500 dark:text-gray-400">${ getCategoryName(s.category) }</div>
                             </div>
                             <button @click="deleteStakeholder(s.id)" class="text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
                                 <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="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>
                         </div>
                     </div>
+                    <div class="mt-6 bg-blue-50 dark:bg-blue-900/30 p-3 rounded-lg border border-blue-100 dark:border-blue-900/50">
+                        <h4 class="text-xs font-bold text-blue-800 dark:text-blue-300 mb-1">使用说明</h4>
+                        <ul class="text-xs text-blue-700 dark:text-blue-400 list-disc list-inside space-y-1">
                             <li>输入名称并选择类型，添加相关方</li>
                             <li>将卡片拖拽至右侧矩阵的相应位置</li>
                             <li><b>Power (权力)</b>: 影响项目的能力</li>
             </div>
             <!-- Canvas Area -->
+            <div class="flex-1 bg-gray-100 dark:bg-gray-900 p-8 overflow-auto flex items-center justify-center relative transition-colors">
+                <div id="capture-area" class="bg-white dark:bg-gray-800 shadow-2xl rounded-xl w-[900px] min-h-[800px] flex flex-col p-6 relative select-none transition-colors">
                     <!-- Title for Export -->
                     <div class="text-center mb-4">
+                        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">利益相关者分析矩阵 (Stakeholder Matrix)</h2>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Power-Interest Grid</p>
                     </div>
                     <!-- Matrix Container -->
+                    <div class="flex-1 relative border-l-2 border-b-2 border-gray-800 dark:border-gray-400 ml-8 mb-8">
                         <!-- Axis Labels -->
+                        <div class="absolute -left-10 top-1/2 -translate-y-1/2 -rotate-90 text-sm font-bold tracking-widest text-gray-600 dark:text-gray-400">
                             权力 (POWER)
+                            <span class="text-xs font-normal block text-center text-gray-400 dark:text-gray-500">Low → High</span>
                         </div>
+                        <div class="absolute bottom-[-40px] left-1/2 -translate-x-1/2 text-sm font-bold tracking-widest text-gray-600 dark:text-gray-400">
                             利益 (INTEREST)
+                            <span class="text-xs font-normal block text-center text-gray-400 dark:text-gray-500">Low → High</span>
                         </div>
                         <!-- Grid Background -->
                         <div class="absolute inset-0 grid grid-cols-2 grid-rows-2">
                             <!-- Top Left: High Power, Low Interest -->
+                            <div class="quadrant border-r border-b border-gray-200 dark:border-gray-600 bg-gray-50/30 dark:bg-gray-700/30 p-4 relative"
                                  @dragover.prevent @drop="onDrop($event, 'matrix', {p:'high', i:'low'})">
+                                <div class="absolute top-2 left-2 text-indigo-900 dark:text-indigo-400 font-bold opacity-20 text-4xl">A</div>
                                 <div class="absolute top-4 left-4">
+                                    <h3 class="font-bold text-gray-700 dark:text-gray-300">令其满意 (Keep Satisfied)</h3>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">High Power, Low Interest</p>
                                 </div>
                             </div>
                             <!-- Top Right: High Power, High Interest -->
+                            <div class="quadrant border-b border-gray-200 dark:border-gray-600 bg-indigo-50/30 dark:bg-indigo-900/20 p-4 relative"
                                  @dragover.prevent @drop="onDrop($event, 'matrix', {p:'high', i:'high'})">
+                                <div class="absolute top-2 right-2 text-indigo-900 dark:text-indigo-400 font-bold opacity-20 text-4xl">B</div>
                                 <div class="absolute top-4 right-4 text-right">
+                                    <h3 class="font-bold text-indigo-700 dark:text-indigo-400">重点管理 (Manage Closely)</h3>
+                                    <p class="text-xs text-indigo-500 dark:text-indigo-300">High Power, High Interest</p>
                                 </div>
                             </div>
                             <!-- Bottom Left: Low Power, Low Interest -->
+                            <div class="quadrant border-r border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 p-4 relative"
                                  @dragover.prevent @drop="onDrop($event, 'matrix', {p:'low', i:'low'})">
+                                <div class="absolute bottom-2 left-2 text-indigo-900 dark:text-indigo-400 font-bold opacity-20 text-4xl">C</div>
                                 <div class="absolute bottom-4 left-4">
+                                    <h3 class="font-bold text-gray-500 dark:text-gray-400">最小关注 (Monitor)</h3>
+                                    <p class="text-xs text-gray-400 dark:text-gray-500">Low Power, Low Interest</p>
                                 </div>
                             </div>
                             <!-- Bottom Right: Low Power, High Interest -->
+                            <div class="quadrant bg-gray-50/30 dark:bg-gray-700/30 p-4 relative"
                                  @dragover.prevent @drop="onDrop($event, 'matrix', {p:'low', i:'high'})">
+                                <div class="absolute bottom-2 right-2 text-indigo-900 dark:text-indigo-400 font-bold opacity-20 text-4xl">D</div>
                                 <div class="absolute bottom-4 right-4 text-right">
+                                    <h3 class="font-bold text-gray-700 dark:text-gray-300">随时告知 (Keep Informed)</h3>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">Low Power, High Interest</p>
                                 </div>
                             </div>
                         </div>
                                 @dblclick="moveToSidebar(s)"
                             >
                                 <div
+                                    class="w-12 h-12 rounded-full shadow-lg border-2 border-white dark:border-gray-600 flex items-center justify-center text-white font-bold text-xs relative transition-transform hover:scale-110"
                                     :style="{backgroundColor: getCategoryColor(s.category)}"
                                     :title="s.name + ' (' + getCategoryName(s.category) + ')'"
                                 >
+                                    ${ s.name.substring(0, 2) }
                                     <!-- Tooltip -->
                                     <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none">
+                                        ${ s.name }
                                     </div>
                                 </div>
                             </div>
                     </div>
                     <!-- Legend & Report -->
+                    <div class="mt-2 border-t pt-4 border-gray-100 dark:border-gray-700">
                         <div class="flex justify-center gap-6 mb-4">
                             <div v-for="cat in categories" :key="cat.id" class="flex items-center gap-2">
                                 <div class="w-3 h-3 rounded-full" :style="{backgroundColor: cat.color}"></div>
+                                <span class="text-xs text-gray-600 dark:text-gray-400">${ cat.name }</span>
                             </div>
                         </div>
                         <!-- Analysis Report -->
+                        <div v-if="matrixStakeholders.length > 0" class="bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-4 text-sm text-gray-700 dark:text-gray-300">
+                            <h3 class="font-bold text-indigo-900 dark:text-indigo-300 mb-2 flex items-center gap-2">
                                 <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                                 智能分析报告
                             </h3>
                             <div class="grid grid-cols-4 gap-4">
+                                <div v-for="(count, key) in quadrantCounts" :key="key" class="flex flex-col items-center border-r last:border-0 border-indigo-200 dark:border-indigo-800">
+                                    <span class="text-xs text-gray-500 dark:text-gray-400">${ getQuadrantLabel(key) }</span>
+                                    <span class="font-bold text-lg text-indigo-700 dark:text-indigo-400">${ count }</span>
                                 </div>
                             </div>
+                            <p class="mt-3 text-xs text-indigo-600 dark:text-indigo-300 text-center">
+                                💡 建议：重点关注 <b>${ quadrantCounts['high-high'] || 0 }</b> 位“重点管理”对象，需建立紧密沟通机制。
                             </p>
                         </div>
                     </div>
         const { createApp, ref, computed, onMounted, watch } = Vue;
         createApp({
+            delimiters: ['${', '}'],
             setup() {
                 const categories = [
                     { id: 'internal', name: '内部人员', color: '#4f46e5' }, // Indigo
                 const draggedItem = ref(null);
                 const fileInput = ref(null);
+                // Dark Mode Logic
+                const isDark = ref(false);
+                const toggleDark = () => {
+                    isDark.value = !isDark.value;
+                    if (isDark.value) {
+                        document.documentElement.classList.add('dark');
+                        localStorage.setItem('theme', 'dark');
+                    } else {
+                        document.documentElement.classList.remove('dark');
+                        localStorage.setItem('theme', 'light');
+                    }
+                };
                 // Initialize with some data if empty
                 onMounted(() => {
+                    // Check Theme
+                    if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                        isDark.value = true;
+                        document.documentElement.classList.add('dark');
+                    } else {
+                        isDark.value = false;
+                        document.documentElement.classList.remove('dark');
+                    }
                     const saved = localStorage.getItem('stakeholder-map-data');
                     if (saved) {
                         stakeholders.value = JSON.parse(saved);
                     exportJSON,
                     quadrantCounts,
                     getQuadrantLabel,
+                    clearAll,
+                    isDark,
+                    toggleDark
                 };
             }
         }).mount('#app');