Hugging Face's logo

Spaces:
duqing26
/
code-snapshot-studio
Sleeping

App Files Community
duqing2026 commited on
Commit
8661be0
·
1 Parent(s): 96b445e

升级优化

Browse files
Files changed (2) hide show
  1. static/script.js +42 -0
  2. templates/index.html +13 -1
static/script.js CHANGED
@@ -149,6 +149,46 @@ createApp({
149
  }
150
  });
151
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
  const exportImage = async () => {
153
  if (!snapshotCard.value || isExporting.value) return;
154
 
@@ -194,6 +234,8 @@ createApp({
194
  currentBg,
195
  snapshotCard,
196
  codeBlock,
 
 
197
  exportImage,
198
  changeTheme,
199
  refreshHighlight,
 
149
  }
150
  });
151
 
152
+ const clearCode = () => {
153
+ code.value = '';
154
+ };
155
+
156
+ const copyImage = async () => {
157
+ if (!snapshotCard.value || isExporting.value) return;
158
+
159
+ isExporting.value = true;
160
+ try {
161
+ await nextTick();
162
+
163
+ const canvas = await html2canvas(snapshotCard.value, {
164
+ scale: 2,
165
+ useCORS: true,
166
+ backgroundColor: null,
167
+ logging: false,
168
+ allowTaint: true
169
+ });
170
+
171
+ canvas.toBlob(async (blob) => {
172
+ try {
173
+ await navigator.clipboard.write([
174
+ new ClipboardItem({
175
+ [blob.type]: blob
176
+ })
177
+ ]);
178
+ alert('图片已复制到剪贴板');
179
+ } catch (err) {
180
+ console.error('Copy failed:', err);
181
+ alert('复制失败，浏览器可能不支持此功能');
182
+ }
183
+ });
184
+ } catch (err) {
185
+ console.error('Render failed:', err);
186
+ alert('生成图片失败，请重试');
187
+ } finally {
188
+ isExporting.value = false;
189
+ }
190
+ };
191
+
192
  const exportImage = async () => {
193
  if (!snapshotCard.value || isExporting.value) return;
194
 
 
234
  currentBg,
235
  snapshotCard,
236
  codeBlock,
237
+ copyImage,
238
+ clearCode,
239
  exportImage,
240
  changeTheme,
241
  refreshHighlight,
templates/index.html CHANGED
@@ -17,6 +17,7 @@
17
  <link rel="stylesheet" href="/static/style.css">
18
  </head>
19
  <body class="h-screen flex flex-col overflow-hidden">
 
20
  <div id="app" class="flex-1 flex flex-col h-full">
21
  <!-- Header -->
22
  <header class="bg-white border-b border-gray-200 px-4 lg:px-6 py-3 flex items-center justify-between shadow-sm z-30">
@@ -30,6 +31,11 @@
30
  <h1 class="text-lg lg:text-xl font-bold text-gray-800 tracking-tight truncate">Code Snapshot Studio</h1>
31
  </div>
32
  <div class="flex items-center gap-4">
 
 
 
 
 
33
  <button @click="exportImage" :disabled="isExporting"
34
  class="bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 shadow-sm whitespace-nowrap">
35
  <i v-if="!isExporting" class="fa-solid fa-download"></i>
@@ -49,7 +55,12 @@
49
 
50
  <!-- Code Input -->
51
  <div class="flex flex-col gap-2">
52
- <label class="text-sm font-semibold text-gray-700">代码内容</label>
 
 
 
 
 
53
  <textarea v-model="code" class="w-full h-48 p-3 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none resize-none bg-gray-50" placeholder="在此粘贴你的代码..."></textarea>
54
  </div>
55
 
@@ -169,6 +180,7 @@
169
  </section>
170
  </main>
171
  </div>
 
172
 
173
  <!-- App Logic -->
174
  <script src="/static/script.js"></script>
 
17
  <link rel="stylesheet" href="/static/style.css">
18
  </head>
19
  <body class="h-screen flex flex-col overflow-hidden">
20
+ {% raw %}
21
  <div id="app" class="flex-1 flex flex-col h-full">
22
  <!-- Header -->
23
  <header class="bg-white border-b border-gray-200 px-4 lg:px-6 py-3 flex items-center justify-between shadow-sm z-30">
 
31
  <h1 class="text-lg lg:text-xl font-bold text-gray-800 tracking-tight truncate">Code Snapshot Studio</h1>
32
  </div>
33
  <div class="flex items-center gap-4">
34
+ <button @click="copyImage" :disabled="isExporting"
35
+ class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 shadow-sm whitespace-nowrap hidden sm:flex">
36
+ <i class="fa-regular fa-copy"></i>
37
+ <span>复制图片</span>
38
+ </button>
39
  <button @click="exportImage" :disabled="isExporting"
40
  class="bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 shadow-sm whitespace-nowrap">
41
  <i v-if="!isExporting" class="fa-solid fa-download"></i>
 
55
 
56
  <!-- Code Input -->
57
  <div class="flex flex-col gap-2">
58
+ <label class="text-sm font-semibold text-gray-700 flex justify-between items-center">
59
+ 代码内容
60
+ <button @click="clearCode" class="text-xs text-red-500 hover:text-red-700 font-normal hover:underline" title="清空代码">
61
+ 清空
62
+ </button>
63
+ </label>
64
  <textarea v-model="code" class="w-full h-48 p-3 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none resize-none bg-gray-50" placeholder="在此粘贴你的代码..."></textarea>
65
  </div>
66
 
 
180
  </section>
181
  </main>
182
  </div>
183
+ {% endraw %}
184
 
185
  <!-- App Logic -->
186
  <script src="/static/script.js"></script>