Hugging Face's logo

Spaces:
duqing26
/
saas-wireframe-studio
Sleeping

App Files Community
duqing2026 commited on
Commit
0077b3c
·
0 Parent(s):

Initial commit: SaaS Wireframe Studio MVP

Browse files
Files changed (5) hide show
  1. Dockerfile +19 -0
  2. README.md +53 -0
  3. app.py +24 -0
  4. requirements.txt +2 -0
  5. templates/index.html +482 -0
Dockerfile ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ # 创建非 root 用户
11
+ RUN useradd -m -u 1000 user
12
+ USER user
13
+
14
+ ENV HOME=/home/user \
15
+ PATH=/home/user/.local/bin:$PATH
16
+
17
+ EXPOSE 7860
18
+
19
+ CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]
README.md ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: SaaS Wireframe Studio
3
+ emoji: 📐
4
+ colorFrom: blue
5
+ colorTo: indigo
6
+ sdk: docker
7
+ app_port: 7860
8
+ ---
9
+
10
+ # SaaS Wireframe Studio (SaaS 线框图工作室)
11
+
12
+ 这是一个专为独立开发者和初创团队设计的 **SaaS 后台界面原型构建工具**。
13
+ 它可以帮助你快速生成逼真的 SaaS 产品内部界面（Dashboard），用于 Pitch Deck 演示、Landing Page 展示或产品概念验证，而无需编写任何代码。
14
+
15
+ ## 核心功能
16
+
17
+ - **所见即所得 (WYSIWYG)**：拖拽式操作，实时预览。
18
+ - **高度可定制**：支持深色模式 (Dark Mode)、主题色切换、手绘风格 (Sketchy) 与现代风格切换。
19
+ - **丰富的组件库**：
20
+ - **Sidebar**: 可编辑的侧边栏菜单。
21
+ - **Navbar**: 可配置的顶部导航栏。
22
+ - **Widgets**: 数据统计卡片 (Stats)、图表占位符 (Charts)、数据表格 (Tables)、文本块等。
23
+ - **一键导出**：基于 `html2canvas` 技术，支持将设计好的界面导出为高清 PNG 图片。
24
+ - **隐私安全**：所有操作均在浏览器本地完成，不上传任何数据。
25
+
26
+ ## 技术栈
27
+
28
+ - **Backend**: Flask (Python)
29
+ - **Frontend**: Vue 3 (Composition API), Tailwind CSS
30
+ - **Deployment**: Docker, Hugging Face Spaces
31
+
32
+ ## 本地运行
33
+
34
+ 1. 克隆仓库
35
+ ```bash
36
+ git clone https://huggingface.co/spaces/duqing26/saas-wireframe-studio
37
+ cd saas-wireframe-studio
38
+ ```
39
+
40
+ 2. 安装依赖
41
+ ```bash
42
+ pip install -r requirements.txt
43
+ ```
44
+
45
+ 3. 运行
46
+ ```bash
47
+ python app.py
48
+ ```
49
+ 访问 `http://localhost:7860`
50
+
51
+ ## 许可证
52
+
53
+ MIT License
app.py ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import os
2
+ from flask import Flask, render_template
3
+
4
+ app = Flask(__name__)
5
+
6
+ # 配置 Jinja2 分隔符，避免与 Vue 插值语法冲突
7
+ app.jinja_env.variable_start_string = '[['
8
+ app.jinja_env.variable_end_string = ']]'
9
+ app.jinja_env.block_start_string = '[%'
10
+ app.jinja_env.block_end_string = '%]'
11
+ app.jinja_env.comment_start_string = '[#'
12
+ app.jinja_env.comment_end_string = '#]'
13
+
14
+ @app.route('/')
15
+ def index():
16
+ return render_template('index.html')
17
+
18
+ @app.route('/healthz')
19
+ def healthz():
20
+ return "ok"
21
+
22
+ if __name__ == '__main__':
23
+ port = int(os.environ.get('PORT', 7860))
24
+ app.run(host='0.0.0.0', port=port)
requirements.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ flask
2
+ gunicorn
templates/index.html ADDED
@@ -0,0 +1,482 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>SaaS Wireframe 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://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11
+ <!-- 手绘字体 -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Virgil&display=swap" rel="stylesheet">
13
+ <script>
14
+ tailwind.config = {
15
+ darkMode: 'class',
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ primary: '#4f46e5', // default indigo-600
20
+ secondary: '#64748b',
21
+ },
22
+ fontFamily: {
23
+ sketchy: ['Virgil', 'sans-serif'],
24
+ }
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <style>
30
+ [v-cloak] { display: none; }
31
+ .sketchy-border {
32
+ border: 2px solid #000;
33
+ border-radius: 2px 255px 3px 25px / 255px 6px 5px 255px;
34
+ }
35
+ .sketchy-shadow {
36
+ box-shadow: 2px 3px 0px 0px #000;
37
+ }
38
+ /* Custom Scrollbar */
39
+ ::-webkit-scrollbar { width: 8px; height: 8px; }
40
+ ::-webkit-scrollbar-track { background: transparent; }
41
+ ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
42
+ ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-100 h-screen flex flex-col overflow-hidden text-gray-800">
46
+
47
+ <div id="app" v-cloak class="flex h-full">
48
+ <!-- Controls Sidebar -->
49
+ <aside class="w-80 bg-white border-r border-gray-200 flex flex-col h-full z-10 shadow-lg overflow-y-auto">
50
+ <div class="p-6 border-b border-gray-200">
51
+ <h1 class="text-xl font-bold flex items-center gap-2 text-indigo-600">
52
+ <i class="fa-solid fa-compass-drafting"></i>
53
+ SaaS Wireframe
54
+ </h1>
55
+ <p class="text-xs text-gray-500 mt-1">快速构建演示用后台原型</p>
56
+ </div>
57
+
58
+ <div class="p-6 space-y-8 flex-1">
59
+ <!-- Global Settings -->
60
+ <section>
61
+ <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">全局设置</h3>
62
+ <div class="space-y-4">
63
+ <!-- Theme Color -->
64
+ <div>
65
+ <label class="block text-sm font-medium text-gray-700 mb-2">主题色</label>
66
+ <div class="flex gap-2">
67
+ <button @click="setTheme('indigo')" class="w-6 h-6 rounded-full bg-indigo-600 ring-offset-2 hover:ring-2 ring-indigo-600 transition" :class="{'ring-2': theme === 'indigo'}"></button>
68
+ <button @click="setTheme('emerald')" class="w-6 h-6 rounded-full bg-emerald-600 ring-offset-2 hover:ring-2 ring-emerald-600 transition" :class="{'ring-2': theme === 'emerald'}"></button>
69
+ <button @click="setTheme('rose')" class="w-6 h-6 rounded-full bg-rose-600 ring-offset-2 hover:ring-2 ring-rose-600 transition" :class="{'ring-2': theme === 'rose'}"></button>
70
+ <button @click="setTheme('amber')" class="w-6 h-6 rounded-full bg-amber-600 ring-offset-2 hover:ring-2 ring-amber-600 transition" :class="{'ring-2': theme === 'amber'}"></button>
71
+ <button @click="setTheme('gray')" class="w-6 h-6 rounded-full bg-gray-800 ring-offset-2 hover:ring-2 ring-gray-800 transition" :class="{'ring-2': theme === 'gray'}"></button>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Toggles -->
76
+ <div class="flex items-center justify-between">
77
+ <span class="text-sm font-medium text-gray-700">深色模式 (Dark Mode)</span>
78
+ <button @click="darkMode = !darkMode" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none" :class="darkMode ? 'bg-indigo-600' : 'bg-gray-200'">
79
+ <span class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" :class="darkMode ? 'translate-x-5' : 'translate-x-0'"></span>
80
+ </button>
81
+ </div>
82
+
83
+ <div class="flex items-center justify-between">
84
+ <span class="text-sm font-medium text-gray-700">手绘风格 (Sketchy)</span>
85
+ <button @click="sketchyMode = !sketchyMode" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none" :class="sketchyMode ? 'bg-indigo-600' : 'bg-gray-200'">
86
+ <span class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" :class="sketchyMode ? 'translate-x-5' : 'translate-x-0'"></span>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Widgets -->
93
+ <section>
94
+ <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">添加组件</h3>
95
+ <div class="grid grid-cols-2 gap-3">
96
+ <button @click="addWidget('stat')" class="flex flex-col items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-indigo-300 transition group">
97
+ <i class="fa-solid fa-chart-simple text-gray-400 group-hover:text-indigo-600 text-xl mb-2"></i>
98
+ <span class="text-xs text-gray-600">统计卡片</span>
99
+ </button>
100
+ <button @click="addWidget('chart-line')" class="flex flex-col items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-indigo-300 transition group">
101
+ <i class="fa-solid fa-chart-line text-gray-400 group-hover:text-indigo-600 text-xl mb-2"></i>
102
+ <span class="text-xs text-gray-600">折线图</span>
103
+ </button>
104
+ <button @click="addWidget('chart-bar')" class="flex flex-col items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-indigo-300 transition group">
105
+ <i class="fa-solid fa-chart-column text-gray-400 group-hover:text-indigo-600 text-xl mb-2"></i>
106
+ <span class="text-xs text-gray-600">柱状图</span>
107
+ </button>
108
+ <button @click="addWidget('table')" class="flex flex-col items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-indigo-300 transition group">
109
+ <i class="fa-solid fa-table text-gray-400 group-hover:text-indigo-600 text-xl mb-2"></i>
110
+ <span class="text-xs text-gray-600">数据表格</span>
111
+ </button>
112
+ <button @click="addWidget('activity')" class="flex flex-col items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-indigo-300 transition group">
113
+ <i class="fa-solid fa-list-check text-gray-400 group-hover:text-indigo-600 text-xl mb-2"></i>
114
+ <span class="text-xs text-gray-600">活动列表</span>
115
+ </button>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Sidebar Config -->
120
+ <section>
121
+ <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">侧边栏菜单</h3>
122
+ <div class="space-y-2">
123
+ <div v-for="(item, index) in sidebarItems" :key="index" class="flex gap-2">
124
+ <input v-model="item.label" class="flex-1 text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 px-2 py-1 border" placeholder="菜单名称">
125
+ <input v-model="item.icon" class="w-16 text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 px-2 py-1 border" placeholder="Icon">
126
+ <button @click="removeSidebarItem(index)" class="text-red-400 hover:text-red-600"><i class="fa-solid fa-times"></i></button>
127
+ </div>
128
+ <button @click="addSidebarItem" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">+ 添加菜单项</button>
129
+ </div>
130
+ </section>
131
+
132
+ <!-- Actions -->
133
+ <section class="pt-4 border-t border-gray-200">
134
+ <button @click="exportImage" class="w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium shadow-sm transition flex items-center justify-center gap-2">
135
+ <i class="fa-solid fa-download"></i>
136
+ 导出 PNG 图片
137
+ </button>
138
+ <button @click="resetCanvas" class="w-full mt-2 py-2 text-sm text-red-500 hover:bg-red-50 rounded-lg transition">
139
+ 重置画布
140
+ </button>
141
+ </section>
142
+ </div>
143
+ </aside>
144
+
145
+ <!-- Main Canvas Area -->
146
+ <main class="flex-1 bg-gray-100 p-8 overflow-auto flex items-center justify-center relative">
147
+ <!-- The Mockup Wrapper -->
148
+ <div id="capture-area"
149
+ class="relative w-full max-w-5xl aspect-video bg-white shadow-2xl rounded-xl overflow-hidden flex transition-all duration-300"
150
+ :class="[
151
+ darkMode ? 'dark' : '',
152
+ sketchyMode ? 'font-sketchy' : 'font-sans'
153
+ ]"
154
+ :style="canvasStyle">
155
+
156
+ <!-- Mockup Sidebar -->
157
+ <div class="w-64 border-r flex flex-col transition-colors duration-300"
158
+ :class="[
159
+ darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-100',
160
+ sketchyMode ? 'border-r-2 border-black' : ''
161
+ ]">
162
+ <!-- Logo -->
163
+ <div class="h-16 flex items-center px-6 border-b transition-colors duration-300"
164
+ :class="[
165
+ darkMode ? 'border-gray-800' : 'border-gray-100',
166
+ sketchyMode ? 'border-b-2 border-black' : ''
167
+ ]">
168
+ <div class="w-8 h-8 rounded-lg mr-3 flex items-center justify-center text-white font-bold"
169
+ :class="themeBg">
170
+ <i class="fa-solid fa-bolt"></i>
171
+ </div>
172
+ <span class="font-bold text-lg" :class="darkMode ? 'text-white' : 'text-gray-900'" contenteditable="true">SaaS Name</span>
173
+ </div>
174
+
175
+ <!-- Menu -->
176
+ <nav class="flex-1 p-4 space-y-1">
177
+ <div v-for="(item, index) in sidebarItems" :key="index"
178
+ class="flex items-center px-3 py-2.5 rounded-lg cursor-pointer group transition-colors"
179
+ :class="[
180
+ index === 0 ? (darkMode ? 'bg-gray-800 text-white' : 'bg-gray-50 text-indigo-600') : (darkMode ? 'text-gray-400 hover:bg-gray-800 hover:text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'),
181
+ sketchyMode && index === 0 ? 'sketchy-border' : ''
182
+ ]">
183
+ <i :class="['fa-solid w-5 text-center mr-3', item.icon]"></i>
184
+ <span class="text-sm font-medium">{{ item.label }}</span>
185
+ </div>
186
+ </nav>
187
+
188
+ <!-- User Profile -->
189
+ <div class="p-4 border-t transition-colors duration-300"
190
+ :class="[
191
+ darkMode ? 'border-gray-800' : 'border-gray-100',
192
+ sketchyMode ? 'border-t-2 border-black' : ''
193
+ ]">
194
+ <div class="flex items-center">
195
+ <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" class="w-8 h-8 rounded-full bg-gray-200">
196
+ <div class="ml-3">
197
+ <p class="text-sm font-medium" :class="darkMode ? 'text-white' : 'text-gray-900'" contenteditable="true">John Founder</p>
198
+ <p class="text-xs" :class="darkMode ? 'text-gray-500' : 'text-gray-500'" contenteditable="true">Admin</p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Mockup Content -->
205
+ <div class="flex-1 flex flex-col transition-colors duration-300" :class="darkMode ? 'bg-gray-950' : 'bg-gray-50'">
206
+ <!-- Header -->
207
+ <header class="h-16 flex items-center justify-between px-8 border-b transition-colors duration-300"
208
+ :class="[
209
+ darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-100',
210
+ sketchyMode ? 'border-b-2 border-black' : ''
211
+ ]">
212
+ <h2 class="text-xl font-bold" :class="darkMode ? 'text-white' : 'text-gray-900'" contenteditable="true">{{ navbarTitle }}</h2>
213
+ <div class="flex items-center gap-4">
214
+ <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" :class="darkMode ? 'text-gray-400 hover:bg-gray-800' : 'text-gray-400'">
215
+ <i class="fa-solid fa-magnifying-glass"></i>
216
+ </button>
217
+ <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" :class="darkMode ? 'text-gray-400 hover:bg-gray-800' : 'text-gray-400'">
218
+ <i class="fa-regular fa-bell"></i>
219
+ </button>
220
+ <button class="px-4 py-1.5 text-sm font-medium text-white rounded-md transition hover:opacity-90 shadow-sm"
221
+ :class="[themeBg, sketchyMode ? 'sketchy-border sketchy-shadow' : '']" contenteditable="true">
222
+ + New Project
223
+ </button>
224
+ </div>
225
+ </header>
226
+
227
+ <!-- Dashboard Grid -->
228
+ <div class="flex-1 p-8 overflow-y-auto custom-scrollbar">
229
+ <div class="grid grid-cols-12 gap-6">
230
+ <!-- Render Widgets -->
231
+ <div v-for="(widget, index) in widgets" :key="widget.id"
232
+ class="relative group"
233
+ :class="widgetColClass(widget.width)">
234
+
235
+ <!-- Delete Button (Visible on Hover) -->
236
+ <button @click="removeWidget(index)" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition shadow-sm z-10 text-xs">
237
+ <i class="fa-solid fa-times"></i>
238
+ </button>
239
+
240
+ <!-- Widget Content -->
241
+ <div class="h-full rounded-xl p-6 transition-all duration-300 border"
242
+ :class="[
243
+ darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-100 shadow-sm',
244
+ sketchyMode ? 'sketchy-border sketchy-shadow border-black' : ''
245
+ ]">
246
+
247
+ <!-- Stat Widget -->
248
+ <div v-if="widget.type === 'stat'" class="h-full flex flex-col justify-between">
249
+ <div class="flex items-center justify-between mb-4">
250
+ <span class="text-sm font-medium" :class="darkMode ? 'text-gray-400' : 'text-gray-500'" contenteditable="true">{{ widget.title }}</span>
251
+ <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-700">+12.5%</span>
252
+ </div>
253
+ <div class="text-3xl font-bold" :class="darkMode ? 'text-white' : 'text-gray-900'" contenteditable="true">{{ widget.data.value }}</div>
254
+ </div>
255
+
256
+ <!-- Chart Widget (Placeholder) -->
257
+ <div v-if="widget.type.startsWith('chart')" class="h-full flex flex-col">
258
+ <div class="flex items-center justify-between mb-6">
259
+ <h3 class="text-sm font-semibold" :class="darkMode ? 'text-white' : 'text-gray-900'" contenteditable="true">{{ widget.title }}</h3>
260
+ <i class="fa-solid fa-ellipsis text-gray-400"></i>
261
+ </div>
262
+ <div class="flex-1 flex items-end justify-between gap-2 px-2 pb-2">
263
+ <!-- Fake Bar Chart -->
264
+ <template v-if="widget.type === 'chart-bar'">
265
+ <div v-for="h in [40, 70, 45, 90, 60, 75, 50]" class="w-full rounded-t-sm opacity-80" :style="{height: h + '%', backgroundColor: themeColorHex}"></div>
266
+ </template>
267
+ <!-- Fake Line Chart -->
268
+ <template v-if="widget.type === 'chart-line'">
269
+ <svg viewBox="0 0 100 40" class="w-full h-full overflow-visible" preserveAspectRatio="none">
270
+ <path d="M0,35 Q10,35 20,20 T40,25 T60,10 T80,30 T100,5" fill="none" :stroke="themeColorHex" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
271
+ <path d="M0,35 Q10,35 20,20 T40,25 T60,10 T80,30 T100,5 V40 H0 Z" :fill="themeColorHex" opacity="0.1"/>
272
+ </svg>
273
+ </template>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Table Widget -->
278
+ <div v-if="widget.type === 'table'" class="h-full">
279
+ <div class="flex items-center justify-between mb-4">
280
+ <h3 class="text-sm font-semibold" :class="darkMode ? 'text-white' : 'text-gray-900'" contenteditable="true">{{ widget.title }}</h3>
281
+ <button class="text-xs text-indigo-600 font-medium">View All</button>
282
+ </div>
283
+ <div class="overflow-hidden">
284
+ <table class="w-full text-sm text-left">
285
+ <thead class="text-xs uppercase" :class="darkMode ? 'text-gray-500 bg-gray-800' : 'text-gray-500 bg-gray-50'">
286
+ <tr>
287
+ <th class="px-3 py-2">User</th>
288
+ <th class="px-3 py-2">Status</th>
289
+ <th class="px-3 py-2 text-right">Amount</th>
290
+ </tr>
291
+ </thead>
292
+ <tbody :class="darkMode ? 'text-gray-300' : 'text-gray-700'">
293
+ <tr class="border-b" :class="darkMode ? 'border-gray-800' : 'border-gray-100'">
294
+ <td class="px-3 py-3 font-medium">Alice Smith</td>
295
+ <td class="px-3 py-3"><span class="w-2 h-2 rounded-full bg-green-500 inline-block mr-1"></span> Active</td>
296
+ <td class="px-3 py-3 text-right">$1,200</td>
297
+ </tr>
298
+ <tr class="border-b" :class="darkMode ? 'border-gray-800' : 'border-gray-100'">
299
+ <td class="px-3 py-3 font-medium">Bob Johnson</td>
300
+ <td class="px-3 py-3"><span class="w-2 h-2 rounded-full bg-yellow-500 inline-block mr-1"></span> Pending</td>
301
+ <td class="px-3 py-3 text-right">$850</td>
302
+ </tr>
303
+ <tr>
304
+ <td class="px-3 py-3 font-medium">Charlie Day</td>
305
+ <td class="px-3 py-3"><span class="w-2 h-2 rounded-full bg-red-500 inline-block mr-1"></span> Failed</td>
306
+ <td class="px-3 py-3 text-right">$0</td>
307
+ </tr>
308
+ </tbody>
309
+ </table>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Activity Widget -->
314
+ <div v-if="widget.type === 'activity'" class="h-full">
315
+ <div class="flex items-center justify-between mb-4">
316
+ <h3 class="text-sm font-semibold" :class="darkMode ? 'text-white' : 'text-gray-900'" contenteditable="true">{{ widget.title }}</h3>
317
+ </div>
318
+ <div class="space-y-4">
319
+ <div class="flex gap-3">
320
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs">
321
+ <i class="fa-solid fa-plus"></i>
322
+ </div>
323
+ <div>
324
+ <p class="text-sm font-medium" :class="darkMode ? 'text-white' : 'text-gray-900'">New user registered</p>
325
+ <p class="text-xs text-gray-500">2 minutes ago</p>
326
+ </div>
327
+ </div>
328
+ <div class="flex gap-3">
329
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center text-xs">
330
+ <i class="fa-solid fa-upload"></i>
331
+ </div>
332
+ <div>
333
+ <p class="text-sm font-medium" :class="darkMode ? 'text-white' : 'text-gray-900'">Deployment completed</p>
334
+ <p class="text-xs text-gray-500">1 hour ago</p>
335
+ </div>
336
+ </div>
337
+ <div class="flex gap-3">
338
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center text-xs">
339
+ <i class="fa-solid fa-triangle-exclamation"></i>
340
+ </div>
341
+ <div>
342
+ <p class="text-sm font-medium" :class="darkMode ? 'text-white' : 'text-gray-900'">Server alert</p>
343
+ <p class="text-xs text-gray-500">3 hours ago</p>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <p class="absolute bottom-4 text-xs text-gray-400">提示：点击画布上的文字可直接编辑</p>
357
+ </main>
358
+ </div>
359
+
360
+ <script>
361
+ const { createApp, ref, computed } = Vue
362
+
363
+ createApp({
364
+ setup() {
365
+ const theme = ref('indigo')
366
+ const darkMode = ref(false)
367
+ const sketchyMode = ref(false)
368
+ const navbarTitle = ref('Dashboard')
369
+
370
+ const sidebarItems = ref([
371
+ { label: 'Dashboard', icon: 'fa-gauge-high' },
372
+ { label: 'Analytics', icon: 'fa-chart-pie' },
373
+ { label: 'Customers', icon: 'fa-users' },
374
+ { label: 'Settings', icon: 'fa-gear' },
375
+ ])
376
+
377
+ const widgets = ref([
378
+ { id: 1, type: 'stat', title: 'Total Revenue', data: { value: '$48,295' }, width: 4 },
379
+ { id: 2, type: 'stat', title: 'Active Users', data: { value: '2,450' }, width: 4 },
380
+ { id: 3, type: 'stat', title: 'Conversion', data: { value: '3.2%' }, width: 4 },
381
+ { id: 4, type: 'chart-line', title: 'Revenue Overview', data: {}, width: 8 },
382
+ { id: 5, type: 'activity', title: 'Recent Activity', data: {}, width: 4 },
383
+ { id: 6, type: 'table', title: 'Latest Transactions', data: {}, width: 12 },
384
+ ])
385
+
386
+ const themeBg = computed(() => {
387
+ const map = {
388
+ indigo: 'bg-indigo-600',
389
+ emerald: 'bg-emerald-600',
390
+ rose: 'bg-rose-600',
391
+ amber: 'bg-amber-600',
392
+ gray: 'bg-gray-800'
393
+ }
394
+ return map[theme.value]
395
+ })
396
+
397
+ const themeColorHex = computed(() => {
398
+ const map = {
399
+ indigo: '#4f46e5',
400
+ emerald: '#059669',
401
+ rose: '#e11d48',
402
+ amber: '#d97706',
403
+ gray: '#1f2937'
404
+ }
405
+ return map[theme.value]
406
+ })
407
+
408
+ const canvasStyle = computed(() => {
409
+ return {}
410
+ })
411
+
412
+ const setTheme = (t) => {
413
+ theme.value = t
414
+ }
415
+
416
+ const widgetColClass = (width) => {
417
+ // map width 1-12 to col-span
418
+ return `col-span-12 md:col-span-${width}`
419
+ }
420
+
421
+ const addWidget = (type) => {
422
+ const newId = widgets.value.length ? Math.max(...widgets.value.map(w => w.id)) + 1 : 1
423
+ let newWidget = { id: newId, type, width: 4, title: 'New Widget', data: { value: '000' } }
424
+
425
+ if (type.startsWith('chart')) newWidget.width = 6
426
+ if (type === 'table') newWidget.width = 12
427
+
428
+ widgets.value.push(newWidget)
429
+ }
430
+
431
+ const removeWidget = (index) => {
432
+ widgets.value.splice(index, 1)
433
+ }
434
+
435
+ const addSidebarItem = () => {
436
+ sidebarItems.value.push({ label: 'New Item', icon: 'fa-circle' })
437
+ }
438
+
439
+ const removeSidebarItem = (index) => {
440
+ sidebarItems.value.splice(index, 1)
441
+ }
442
+
443
+ const resetCanvas = () => {
444
+ if(confirm('确定要重置画布吗？')) {
445
+ widgets.value = []
446
+ sidebarItems.value = [
447
+ { label: 'Dashboard', icon: 'fa-gauge-high' },
448
+ ]
449
+ }
450
+ }
451
+
452
+ const exportImage = () => {
453
+ const element = document.getElementById('capture-area')
454
+
455
+ // Temporarily remove shadow and rounded corners if needed for cleaner export,
456
+ // but keeping them usually looks better for "Mockup" style.
457
+ // However, we want to export the *Mockup Content*, not the browser window.
458
+
459
+ html2canvas(element, {
460
+ scale: 2, // Retina
461
+ backgroundColor: null,
462
+ useCORS: true,
463
+ logging: false
464
+ }).then(canvas => {
465
+ const link = document.createElement('a')
466
+ link.download = `saas-mockup-${Date.now()}.png`
467
+ link.href = canvas.toDataURL()
468
+ link.click()
469
+ })
470
+ }
471
+
472
+ return {
473
+ theme, darkMode, sketchyMode, navbarTitle, sidebarItems, widgets,
474
+ themeBg, themeColorHex, canvasStyle,
475
+ setTheme, widgetColClass, addWidget, removeWidget,
476
+ addSidebarItem, removeSidebarItem, resetCanvas, exportImage
477
+ }
478
+ }
479
+ }).mount('#app')
480
+ </script>
481
+ </body>
482
+ </html>