Hugging Face's logo

Spaces:
duqing26
/
gamification-design-studio
No application file

App Files Community
Trae Assistant commited on
Commit
3551341
·
1 Parent(s): a74d2b5

Initial commit

Browse files
Files changed (6) hide show
  1. .gitignore +5 -0
  2. Dockerfile +16 -0
  3. README.md +71 -4
  4. app.py +16 -0
  5. requirements.txt +1 -0
  6. templates/index.html +589 -0
.gitignore ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ __pycache__/
2
+ *.pyc
3
+ .DS_Store
4
+ .venv
5
+ env/
Dockerfile ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ FROM python:3.9-slim
2
+
3
+ WORKDIR /app
4
+
5
+ COPY requirements.txt .
6
+ RUN pip install --no-cache-dir -r requirements.txt
7
+
8
+ COPY . .
9
+
10
+ # Create a user to run the application
11
+ RUN useradd -m -u 1000 user
12
+ USER user
13
+ ENV HOME=/home/user \
14
+ PATH=/home/user/.local/bin:$PATH
15
+
16
+ CMD ["python", "app.py"]
README.md CHANGED
@@ -1,10 +1,77 @@
1
  ---
2
  title: Gamification Design Studio
3
- emoji: 🚀
4
- colorFrom: blue
5
- colorTo: red
6
  sdk: docker
 
 
7
  pinned: false
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  ---
2
  title: Gamification Design Studio
3
+ emoji: 🎮
4
+ colorFrom: indigo
5
+ colorTo: pink
6
  sdk: docker
7
+ app_port: 7860
8
+ short_description: 一个可视化的游戏化机制设计与经济系统模拟工具。
9
  pinned: false
10
  ---
11
 
12
+ # Gamification Design Studio (游戏化机制设计工坊)
13
+
14
+ **Gamification Design Studio** 是一个专为产品经理、游戏设计师和创业者设计的可视化工具，用于快速构建和模拟产品的游戏化机制（Gamification Mechanics）及经济系统。
15
+
16
+ 通过此工具，你可以设计用户行为（Actions）、奖励（Rewards）、等级曲线（Level Curve）和消耗机制（Sinks），并实时模拟用户在不同活跃度下的成长路径和资源积累情况。
17
+
18
+ ## ✨ 核心功能 (Features)
19
+
20
+ 1. **机制配置 (Mechanics Design)**:
21
+ * **行为定义**: 添加用户行为（如登录、点赞、分享），设置对应的 XP 和金币奖励。
22
+ * **等级系统**: 自定义升级曲线系数、最大等级和基础 XP，实时预览升级难度。
23
+ * **经济消耗**: 设计商店物品或资源消耗点，平衡经济系统。
24
+
25
+ 2. **实时模拟 (Real-time Simulation)**:
26
+ * **用户画像**: 调整每种行为的每日发生频率，模拟不同类型的用户（如活跃用户、潜水用户）。
27
+ * **成长预测**: 自动计算达到满级所需天数、30天金币积累量。
28
+
29
+ 3. **可视化图表 (Visualization)**:
30
+ * **等级进度曲线**: 直观展示 XP 积累与等级提升的关系。
31
+ * **经济积累预测**: 预测未来的金币存量趋势，防止经济通胀或紧缩。
32
+
33
+ 4. **配置导出 (Export)**:
34
+ * 一键导出 JSON 配置文件，方便保存设计草稿或交付给开发团队。
35
+
36
+ ## 🛠️ 技术栈 (Tech Stack)
37
+
38
+ * **Backend**: Flask (Python) - 轻量级 Web 服务
39
+ * **Frontend**: Vue 3 (CDN) - 响应式交互界面
40
+ * **Styling**: Tailwind CSS (CDN) - 现代化 UI 设计
41
+ * **Charts**: Chart.js - 数据可视化
42
+ * **Deployment**: Docker - 容器化部署 (Hugging Face Spaces 兼容)
43
+
44
+ ## 🚀 如何运行 (How to Run)
45
+
46
+ ### 本地运行 (Local)
47
+
48
+ 1. 克隆仓库或下载代码。
49
+ 2. 安装依赖:
50
+ ```bash
51
+ pip install -r requirements.txt
52
+ ```
53
+ 3. 启动应用:
54
+ ```bash
55
+ python app.py
56
+ ```
57
+ 4. 访问浏览器: `http://localhost:7860`
58
+
59
+ ### Docker 运行
60
+
61
+ 1. 构建镜像:
62
+ ```bash
63
+ docker build -t gamification-studio .
64
+ ```
65
+ 2. 运行容器:
66
+ ```bash
67
+ docker run -p 7860:7860 gamification-studio
68
+ ```
69
+
70
+ ## 📝 适用场景
71
+
72
+ * **MVP 孵化**: 在编写代码前，先验证产品的激励体系是否合理。
73
+ * **社区运营**: 设计社区积分和等级规则。
74
+ * **教育应用**: 设计学生的奖励反馈机制。
75
+
76
+ ---
77
+ *Created with ❤️ for Startup Incubation*
app.py ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from flask import Flask, render_template, send_from_directory
2
+ import os
3
+
4
+ app = Flask(__name__)
5
+
6
+ @app.route('/')
7
+ def index():
8
+ return render_template('index.html')
9
+
10
+ @app.route('/static/<path:path>')
11
+ def send_static(path):
12
+ return send_from_directory('static', path)
13
+
14
+ if __name__ == '__main__':
15
+ port = int(os.environ.get('PORT', 7860))
16
+ app.run(host='0.0.0.0', port=port)
requirements.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ flask
templates/index.html ADDED
@@ -0,0 +1,589 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gamification Design Studio - 游戏化机制设计工坊</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ body { font-family: 'Inter', sans-serif; }
13
+ /* Custom scrollbar for dark mode feeling */
14
+ ::-webkit-scrollbar { width: 8px; }
15
+ ::-webkit-scrollbar-track { background: #1f2937; }
16
+ ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
17
+ ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
18
+ </style>
19
+ <script>
20
+ tailwind.config = {
21
+ darkMode: 'class',
22
+ theme: {
23
+ extend: {
24
+ colors: {
25
+ primary: '#6366f1',
26
+ secondary: '#ec4899',
27
+ dark: '#111827',
28
+ darker: '#0b0f19',
29
+ surface: '#1f2937'
30
+ }
31
+ }
32
+ }
33
+ }
34
+ </script>
35
+ </head>
36
+ <body class="bg-gray-100 dark:bg-darker text-gray-900 dark:text-gray-100 transition-colors duration-200 h-screen overflow-hidden flex flex-col">
37
+ <div id="app" class="flex flex-col h-full" v-cloak>
38
+ <!-- Header -->
39
+ <header class="bg-white dark:bg-surface border-b dark:border-gray-700 p-4 flex justify-between items-center shadow-sm z-10">
40
+ <div class="flex items-center space-x-3">
41
+ <div class="bg-gradient-to-r from-primary to-secondary p-2 rounded-lg text-white font-bold text-xl">
42
+ GDS
43
+ </div>
44
+ <div>
45
+ <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
46
+ 游戏化机制设计工坊
47
+ </h1>
48
+ <p class="text-xs text-gray-500 dark:text-gray-400">Gamification Design Studio</p>
49
+ </div>
50
+ </div>
51
+ <div class="flex items-center space-x-4">
52
+ <button @click="toggleTheme" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition" title="切换主题">
53
+ <span v-if="isDark">🌞</span>
54
+ <span v-else>🌙</span>
55
+ </button>
56
+ <div class="relative group">
57
+ <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded-md text-sm font-medium transition">
58
+ 预设模版
59
+ </button>
60
+ <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-surface border dark:border-gray-700 rounded-md shadow-lg hidden group-hover:block z-50">
61
+ <a href="#" @click.prevent="loadPreset('community')" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">社区运营 (Community)</a>
62
+ <a href="#" @click.prevent="loadPreset('rpg')" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">RPG 游戏 (Game)</a>
63
+ <a href="#" @click.prevent="loadPreset('education')" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">教育学习 (Edu)</a>
64
+ </div>
65
+ </div>
66
+ <button @click="resetConfig" class="text-red-500 hover:text-red-600 px-3 py-2 text-sm font-medium transition" title="重置">
67
+ <svg class="w-5 h-5" 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>
68
+ </button>
69
+ <div class="flex space-x-2">
70
+ <label class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition cursor-pointer flex items-center">
71
+ <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-8l-4-4m0 0L8 8m4-4v12"></path></svg>
72
+ 导入
73
+ <input type="file" @change="importConfig" class="hidden" accept=".json">
74
+ </label>
75
+ <button @click="exportConfig" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition flex items-center">
76
+ <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>
77
+ 导出
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Main Content -->
84
+ <main class="flex-1 flex overflow-hidden">
85
+ <!-- Left Panel: Configuration -->
86
+ <div class="w-1/3 min-w-[350px] bg-gray-50 dark:bg-dark border-r dark:border-gray-700 flex flex-col overflow-hidden">
87
+ <div class="p-4 border-b dark:border-gray-700 bg-white dark:bg-surface">
88
+ <h2 class="font-semibold text-lg flex items-center">
89
+ <span class="mr-2">🛠️</span> 机制配置
90
+ </h2>
91
+ </div>
92
+
93
+ <div class="flex-1 overflow-y-auto p-4 space-y-6">
94
+ <!-- Actions Section -->
95
+ <div class="bg-white dark:bg-surface rounded-xl p-4 shadow-sm border dark:border-gray-700">
96
+ <div class="flex justify-between items-center mb-4">
97
+ <h3 class="font-medium text-primary">用户行为 (Actions)</h3>
98
+ <button @click="addAction" class="text-xs bg-primary hover:bg-indigo-700 text-white px-2 py-1 rounded">+ 添加</button>
99
+ </div>
100
+ <div class="space-y-3">
101
+ <div v-for="(action, index) in actions" :key="index" class="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg border dark:border-gray-700 group relative">
102
+ <div class="flex justify-between items-start mb-2">
103
+ <input v-model="action.name" class="bg-transparent font-medium text-sm w-full focus:outline-none border-b border-transparent focus:border-primary" placeholder="行为名称">
104
+ <button @click="removeAction(index)" class="text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition">×</button>
105
+ </div>
106
+ <div class="grid grid-cols-3 gap-2 text-xs">
107
+ <div>
108
+ <label class="text-gray-500">XP 奖励</label>
109
+ <input type="number" v-model.number="action.xp" class="w-full bg-white dark:bg-gray-700 rounded px-2 py-1 mt-1 border dark:border-gray-600">
110
+ </div>
111
+ <div>
112
+ <label class="text-gray-500">金币奖励</label>
113
+ <input type="number" v-model.number="action.gold" class="w-full bg-white dark:bg-gray-700 rounded px-2 py-1 mt-1 border dark:border-gray-600">
114
+ </div>
115
+ <div>
116
+ <label class="text-gray-500">每日频率</label>
117
+ <input type="number" v-model.number="action.dailyFreq" step="0.1" class="w-full bg-white dark:bg-gray-700 rounded px-2 py-1 mt-1 border dark:border-gray-600">
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Levels Section -->
125
+ <div class="bg-white dark:bg-surface rounded-xl p-4 shadow-sm border dark:border-gray-700">
126
+ <div class="flex justify-between items-center mb-4">
127
+ <h3 class="font-medium text-secondary">等级系统 (Levels)</h3>
128
+ </div>
129
+ <div class="space-y-4">
130
+ <div>
131
+ <label class="text-xs text-gray-500 block mb-1">最大等级</label>
132
+ <input type="range" v-model.number="levelConfig.maxLevel" min="5" max="100" class="w-full accent-secondary">
133
+ <div class="text-right text-xs text-gray-400">[[ levelConfig.maxLevel ]] 级</div>
134
+ </div>
135
+ <div>
136
+ <label class="text-xs text-gray-500 block mb-1">升级曲线系数 (Exp Factor)</label>
137
+ <div class="flex items-center space-x-2">
138
+ <input type="range" v-model.number="levelConfig.factor" min="1.0" max="3.0" step="0.1" class="w-full accent-secondary">
139
+ <span class="text-xs w-8">[[ levelConfig.factor ]]</span>
140
+ </div>
141
+ <p class="text-[10px] text-gray-400 mt-1">XP = 基础值 * (等级 ^ 系数)</p>
142
+ </div>
143
+ <div>
144
+ <label class="text-xs text-gray-500 block mb-1">1级基础XP</label>
145
+ <input type="number" v-model.number="levelConfig.baseXp" class="w-full bg-gray-50 dark:bg-gray-800 rounded px-2 py-1 border dark:border-gray-600 text-sm">
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Sinks Section -->
151
+ <div class="bg-white dark:bg-surface rounded-xl p-4 shadow-sm border dark:border-gray-700">
152
+ <div class="flex justify-between items-center mb-4">
153
+ <h3 class="font-medium text-yellow-500">金币消耗 (Sinks)</h3>
154
+ <button @click="addSink" class="text-xs bg-yellow-600 hover:bg-yellow-700 text-white px-2 py-1 rounded">+ 添加</button>
155
+ </div>
156
+ <div class="space-y-3">
157
+ <div v-for="(sink, index) in sinks" :key="index" class="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg border dark:border-gray-700 group relative">
158
+ <div class="flex justify-between items-start mb-2">
159
+ <input v-model="sink.name" class="bg-transparent font-medium text-sm w-full focus:outline-none border-b border-transparent focus:border-yellow-500" placeholder="物品名称">
160
+ <button @click="removeSink(index)" class="text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition">×</button>
161
+ </div>
162
+ <div class="text-xs">
163
+ <label class="text-gray-500">金币价格</label>
164
+ <input type="number" v-model.number="sink.cost" class="w-full bg-white dark:bg-gray-700 rounded px-2 py-1 mt-1 border dark:border-gray-600">
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Right Panel: Simulation & Visualization -->
173
+ <div class="flex-1 bg-gray-100 dark:bg-darker flex flex-col overflow-hidden">
174
+ <div class="p-4 border-b dark:border-gray-700 bg-white dark:bg-surface flex justify-between items-center">
175
+ <h2 class="font-semibold text-lg flex items-center">
176
+ <span class="mr-2">📊</span> 模拟推演 (Simulation)
177
+ </h2>
178
+ <div class="flex items-center space-x-2 text-sm">
179
+ <span class="text-gray-500">模拟天数:</span>
180
+ <input type="number" v-model.number="simulationDays" class="w-16 bg-gray-50 dark:bg-gray-700 border dark:border-gray-600 rounded px-2 py-1 text-center">
181
+ </div>
182
+ </div>
183
+
184
+ <div class="flex-1 overflow-y-auto p-6">
185
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
186
+ <!-- User Behavior Setting -->
187
+ <div class="bg-white dark:bg-surface rounded-xl p-5 shadow-sm border dark:border-gray-700">
188
+ <h3 class="font-medium mb-4 text-sm text-gray-500 uppercase tracking-wider">用户行为假设 (每日频率)</h3>
189
+ <div class="space-y-4">
190
+ <div v-for="(action, index) in actions" :key="index" class="flex items-center space-x-4">
191
+ <div class="w-1/3 text-sm truncate" :title="action.name">[[ action.name ]]</div>
192
+ <div class="flex-1 flex items-center space-x-2">
193
+ <input type="range" v-model.number="action.dailyFreq" min="0" max="20" step="0.5" class="flex-1 accent-primary">
194
+ <span class="text-xs w-8 text-right">[[ action.dailyFreq ]]次</span>
195
+ </div>
196
+ </div>
197
+ <div class="mt-4 pt-4 border-t dark:border-gray-700">
198
+ <p class="text-xs text-gray-400 mb-2">预估每日产出:</p>
199
+ <div class="flex space-x-4 text-sm font-bold">
200
+ <div class="text-primary">+[[ dailyXp ]] XP/天</div>
201
+ <div class="text-yellow-500">+[[ dailyGold ]] 金币/天</div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Quick Stats -->
208
+ <div class="bg-white dark:bg-surface rounded-xl p-5 shadow-sm border dark:border-gray-700 flex flex-col justify-center">
209
+ <div class="grid grid-cols-2 gap-4 text-center">
210
+ <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
211
+ <div class="text-xs text-gray-500 mb-1">达到满级所需</div>
212
+ <div class="text-2xl font-bold text-secondary">[[ daysToMaxLevel ]] <span class="text-sm font-normal text-gray-400">天</span></div>
213
+ <div class="text-xs text-gray-400 mt-1">约 [[ (daysToMaxLevel / 30).toFixed(1) ]] 个月</div>
214
+ </div>
215
+ <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
216
+ <div class="text-xs text-gray-500 mb-1">30天金币积累</div>
217
+ <div class="text-2xl font-bold text-yellow-500">[[ totalGold30Days ]]</div>
218
+ <div class="text-xs text-gray-400 mt-1">可购买 [[ affordableItems ]] 个不同商品</div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Charts -->
225
+ <div class="grid grid-cols-1 gap-6">
226
+ <!-- Level Curve -->
227
+ <div class="bg-white dark:bg-surface rounded-xl p-5 shadow-sm border dark:border-gray-700 h-80">
228
+ <h3 class="font-medium mb-4 text-sm text-gray-500 uppercase tracking-wider">等级进度曲线 (Level Progression)</h3>
229
+ <canvas id="levelChart"></canvas>
230
+ </div>
231
+
232
+ <!-- Economy Balance -->
233
+ <div class="bg-white dark:bg-surface rounded-xl p-5 shadow-sm border dark:border-gray-700 h-80">
234
+ <h3 class="font-medium mb-4 text-sm text-gray-500 uppercase tracking-wider">经济积累预测 (Economy Forecast)</h3>
235
+ <canvas id="economyChart"></canvas>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </main>
241
+ </div>
242
+
243
+ <script>
244
+ const { createApp, ref, computed, onMounted, watch } = Vue;
245
+
246
+ createApp({
247
+ delimiters: ['[[', ']]'],
248
+ setup() {
249
+ const isDark = ref(true);
250
+ const simulationDays = ref(90);
251
+
252
+ // Config Data
253
+ const actions = ref([
254
+ { name: '每日登录', xp: 10, gold: 5, dailyFreq: 1 },
255
+ { name: '发布内容', xp: 50, gold: 2, dailyFreq: 0.5 },
256
+ { name: '点赞/互动', xp: 5, gold: 1, dailyFreq: 5 },
257
+ { name: '完成新手任务', xp: 200, gold: 50, dailyFreq: 0 }, // one-time simulated as 0 daily but initial
258
+ { name: '邀请好友', xp: 100, gold: 20, dailyFreq: 0.1 }
259
+ ]);
260
+
261
+ const sinks = ref([
262
+ { name: '头像框', cost: 100 },
263
+ { name: '高级皮肤', cost: 500 },
264
+ { name: '免广告月卡', cost: 1000 }
265
+ ]);
266
+
267
+ const levelConfig = ref({
268
+ maxLevel: 20,
269
+ baseXp: 100,
270
+ factor: 1.5
271
+ });
272
+
273
+ // Computed
274
+ const dailyXp = computed(() => {
275
+ return actions.value.reduce((acc, act) => acc + (act.xp * act.dailyFreq), 0);
276
+ });
277
+
278
+ const dailyGold = computed(() => {
279
+ return actions.value.reduce((acc, act) => acc + (act.gold * act.dailyFreq), 0);
280
+ });
281
+
282
+ const levelTable = computed(() => {
283
+ const levels = [];
284
+ let totalXp = 0;
285
+ for(let i=1; i<=levelConfig.value.maxLevel; i++) {
286
+ // Formula: XP needed for level i = base * (i-1)^factor
287
+ // Cumulative XP to reach level i
288
+ let xpForNext = Math.floor(levelConfig.value.baseXp * Math.pow(i, levelConfig.value.factor));
289
+ if (i === 1) xpForNext = 0;
290
+ totalXp += xpForNext;
291
+ levels.push({ level: i, xpRequired: xpForNext, totalXp: totalXp });
292
+ }
293
+ return levels;
294
+ });
295
+
296
+ const daysToMaxLevel = computed(() => {
297
+ if (dailyXp.value <= 0) return '∞';
298
+ const maxXp = levelTable.value[levelTable.value.length - 1].totalXp;
299
+ return Math.ceil(maxXp / dailyXp.value);
300
+ });
301
+
302
+ const totalGold30Days = computed(() => {
303
+ return Math.floor(dailyGold.value * 30);
304
+ });
305
+
306
+ const affordableItems = computed(() => {
307
+ let gold = totalGold30Days.value;
308
+ let count = 0;
309
+ // Simple check: how many unique items could I buy one of?
310
+ // Sort cheap to expensive
311
+ const sortedSinks = [...sinks.value].sort((a,b) => a.cost - b.cost);
312
+ for(let item of sortedSinks) {
313
+ if(gold >= item.cost) {
314
+ gold -= item.cost;
315
+ count++;
316
+ }
317
+ }
318
+ return count;
319
+ });
320
+
321
+ // Chart instances
322
+ let levelChartInstance = null;
323
+ let economyChartInstance = null;
324
+
325
+ const defaultPresets = {
326
+ community: {
327
+ actions: [
328
+ { name: '每日登录', xp: 10, gold: 5, dailyFreq: 1 },
329
+ { name: '发布帖子', xp: 50, gold: 10, dailyFreq: 0.2 },
330
+ { name: '点赞互动', xp: 5, gold: 2, dailyFreq: 5 },
331
+ { name: '被精选', xp: 200, gold: 50, dailyFreq: 0.05 },
332
+ { name: '邀请好友', xp: 100, gold: 30, dailyFreq: 0.1 }
333
+ ],
334
+ sinks: [
335
+ { name: '社区勋章', cost: 200 },
336
+ { name: '置顶卡', cost: 500 },
337
+ { name: '周边T恤', cost: 2000 }
338
+ ],
339
+ levelConfig: { maxLevel: 10, baseXp: 100, factor: 1.8 }
340
+ },
341
+ rpg: {
342
+ actions: [
343
+ { name: '击杀小怪', xp: 20, gold: 15, dailyFreq: 20 },
344
+ { name: '完成副本', xp: 500, gold: 300, dailyFreq: 1 },
345
+ { name: 'PVP胜利', xp: 100, gold: 50, dailyFreq: 3 },
346
+ { name: '出售装备', xp: 0, gold: 100, dailyFreq: 2 }
347
+ ],
348
+ sinks: [
349
+ { name: '生命药水', cost: 50 },
350
+ { name: '强化石', cost: 500 },
351
+ { name: '稀有坐骑', cost: 10000 }
352
+ ],
353
+ levelConfig: { maxLevel: 60, baseXp: 200, factor: 2.2 }
354
+ },
355
+ education: {
356
+ actions: [
357
+ { name: '完成作业', xp: 50, gold: 10, dailyFreq: 1 },
358
+ { name: '课堂发言', xp: 20, gold: 5, dailyFreq: 2 },
359
+ { name: '满分测验', xp: 100, gold: 50, dailyFreq: 0.2 },
360
+ { name: '阅读打卡', xp: 30, gold: 10, dailyFreq: 1 }
361
+ ],
362
+ sinks: [
363
+ { name: '免做卡', cost: 500 },
364
+ { name: '额外加分', cost: 1000 },
365
+ { name: '文具盲盒', cost: 300 }
366
+ ],
367
+ levelConfig: { maxLevel: 12, baseXp: 100, factor: 1.5 }
368
+ }
369
+ };
370
+
371
+ // Methods
372
+ const toggleTheme = () => {
373
+ isDark.value = !isDark.value;
374
+ if (isDark.value) {
375
+ document.documentElement.classList.add('dark');
376
+ } else {
377
+ document.documentElement.classList.remove('dark');
378
+ }
379
+ updateCharts();
380
+ };
381
+
382
+ const resetConfig = () => {
383
+ if(confirm('确定要重置所有配置吗？')) {
384
+ loadPreset('community');
385
+ }
386
+ };
387
+
388
+ const loadPreset = (type) => {
389
+ if (defaultPresets[type]) {
390
+ const p = defaultPresets[type];
391
+ actions.value = JSON.parse(JSON.stringify(p.actions));
392
+ sinks.value = JSON.parse(JSON.stringify(p.sinks));
393
+ levelConfig.value = JSON.parse(JSON.stringify(p.levelConfig));
394
+ }
395
+ };
396
+
397
+ const importConfig = (event) => {
398
+ const file = event.target.files[0];
399
+ if (!file) return;
400
+
401
+ const reader = new FileReader();
402
+ reader.onload = (e) => {
403
+ try {
404
+ const config = JSON.parse(e.target.result);
405
+ if (config.actions) actions.value = config.actions;
406
+ if (config.sinks) sinks.value = config.sinks;
407
+ if (config.levelConfig) levelConfig.value = config.levelConfig;
408
+ // Optionally simulation result, but that's computed
409
+ alert('导入成功！');
410
+ } catch (err) {
411
+ alert('文件格式错误，请上传有效的 JSON 配置文件。');
412
+ }
413
+ };
414
+ reader.readAsText(file);
415
+ // Reset input
416
+ event.target.value = '';
417
+ };
418
+
419
+ const addAction = () => {
420
+ actions.value.push({ name: '新行为', xp: 10, gold: 0, dailyFreq: 1 });
421
+ };
422
+
423
+ const removeAction = (index) => {
424
+ actions.value.splice(index, 1);
425
+ };
426
+
427
+ const addSink = () => {
428
+ sinks.value.push({ name: '新商品', cost: 100 });
429
+ };
430
+
431
+ const removeSink = (index) => {
432
+ sinks.value.splice(index, 1);
433
+ };
434
+
435
+ const exportConfig = () => {
436
+ const config = {
437
+ actions: actions.value,
438
+ sinks: sinks.value,
439
+ levelConfig: levelConfig.value,
440
+ simulationResult: {
441
+ dailyXp: dailyXp.value,
442
+ daysToMaxLevel: daysToMaxLevel.value
443
+ }
444
+ };
445
+ const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(config, null, 2));
446
+ const downloadAnchorNode = document.createElement('a');
447
+ downloadAnchorNode.setAttribute("href", dataStr);
448
+ downloadAnchorNode.setAttribute("download", "gamification_design.json");
449
+ document.body.appendChild(downloadAnchorNode);
450
+ downloadAnchorNode.click();
451
+ downloadAnchorNode.remove();
452
+ };
453
+
454
+ const updateCharts = () => {
455
+ const ctxLevel = document.getElementById('levelChart');
456
+ const ctxEco = document.getElementById('economyChart');
457
+
458
+ if(!ctxLevel || !ctxEco) return;
459
+
460
+ const textColor = isDark.value ? '#9ca3af' : '#4b5563';
461
+ const gridColor = isDark.value ? '#374151' : '#e5e7eb';
462
+
463
+ // Prepare Level Data
464
+ const days = [];
465
+ const xpProgress = [];
466
+ const currentLevel = [];
467
+
468
+ let accumulatedXp = 0;
469
+ // Simulate day by day
470
+ const simLimit = Math.min(simulationDays.value, 365); // Limit points to render
471
+ const step = Math.max(1, Math.floor(simLimit / 50)); // Downsample for performance
472
+
473
+ for(let d=0; d<=simLimit; d+=step) {
474
+ days.push(`Day ${d}`);
475
+ let xp = d * dailyXp.value;
476
+ xpProgress.push(xp);
477
+
478
+ // Find level
479
+ let lvl = 1;
480
+ for(let l of levelTable.value) {
481
+ if(xp >= l.totalXp) {
482
+ lvl = l.level;
483
+ } else {
484
+ break;
485
+ }
486
+ }
487
+ currentLevel.push(lvl);
488
+ }
489
+
490
+ // Level Chart
491
+ if(levelChartInstance) levelChartInstance.destroy();
492
+ levelChartInstance = new Chart(ctxLevel, {
493
+ type: 'line',
494
+ data: {
495
+ labels: days,
496
+ datasets: [
497
+ {
498
+ label: '累计 XP',
499
+ data: xpProgress,
500
+ borderColor: '#6366f1',
501
+ yAxisID: 'y',
502
+ tension: 0.1
503
+ },
504
+ {
505
+ label: '当前等级',
506
+ data: currentLevel,
507
+ borderColor: '#ec4899',
508
+ yAxisID: 'y1',
509
+ stepped: true,
510
+ borderDash: [5, 5]
511
+ }
512
+ ]
513
+ },
514
+ options: {
515
+ responsive: true,
516
+ maintainAspectRatio: false,
517
+ interaction: { mode: 'index', intersect: false },
518
+ scales: {
519
+ x: { grid: { color: gridColor }, ticks: { color: textColor } },
520
+ y: {
521
+ type: 'linear', display: true, position: 'left',
522
+ title: { display: true, text: 'XP' },
523
+ grid: { color: gridColor }, ticks: { color: textColor }
524
+ },
525
+ y1: {
526
+ type: 'linear', display: true, position: 'right',
527
+ title: { display: true, text: 'Level' },
528
+ grid: { drawOnChartArea: false }, ticks: { color: textColor }
529
+ }
530
+ }
531
+ }
532
+ });
533
+
534
+ // Economy Chart
535
+ const goldProgress = days.map((_, idx) => idx * step * dailyGold.value);
536
+
537
+ if(economyChartInstance) economyChartInstance.destroy();
538
+ economyChartInstance = new Chart(ctxEco, {
539
+ type: 'bar',
540
+ data: {
541
+ labels: days,
542
+ datasets: [{
543
+ label: '累计金币 (Cumulative Gold)',
544
+ data: goldProgress,
545
+ backgroundColor: '#eab308',
546
+ borderRadius: 4
547
+ }]
548
+ },
549
+ options: {
550
+ responsive: true,
551
+ maintainAspectRatio: false,
552
+ scales: {
553
+ x: { grid: { color: gridColor }, ticks: { color: textColor } },
554
+ y: { grid: { color: gridColor }, ticks: { color: textColor } }
555
+ }
556
+ }
557
+ });
558
+ };
559
+
560
+ onMounted(() => {
561
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
562
+ isDark.value = true;
563
+ document.documentElement.classList.add('dark');
564
+ } else {
565
+ isDark.value = false; // Default to light if system is light, but my CSS defaults to dark class manually added? No, let's sync.
566
+ document.documentElement.classList.remove('dark');
567
+ }
568
+ // Force dark mode default as per design pref
569
+ isDark.value = true;
570
+ document.documentElement.classList.add('dark');
571
+
572
+ updateCharts();
573
+ });
574
+
575
+ watch([actions, levelConfig, simulationDays, isDark], () => {
576
+ updateCharts();
577
+ }, { deep: true });
578
+
579
+ return {
580
+ isDark, toggleTheme,
581
+ actions, sinks, levelConfig, simulationDays,
582
+ addAction, removeAction, addSink, removeSink, exportConfig,
583
+ dailyXp, dailyGold, daysToMaxLevel, totalGold30Days, affordableItems
584
+ };
585
+ }
586
+ }).mount('#app');
587
+ </script>
588
+ </body>
589
+ </html>