github-actions[bot] commited on
Commit
f660330
·
1 Parent(s): 5c6d52e

Update from GitHub Actions

Browse files
Files changed (1) hide show
  1. src/views/ContentView.vue +55 -15
src/views/ContentView.vue CHANGED
@@ -1,5 +1,5 @@
1
  <script setup lang="ts">
2
- import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
3
  import { useRoute, useRouter } from 'vue-router';
4
  import { MessagePlugin } from 'tdesign-vue-next';
5
  import { repoApi, type Account } from '../services/repoApi';
@@ -20,6 +20,7 @@ const currentPath = ref('');
20
  const newFileName = ref('');
21
  const store = useAccountStore();
22
  const isNewFile = ref(false);
 
23
 
24
  // Compute full path by combining directory path with new file name
25
  const fullPath = computed(() => {
@@ -69,11 +70,30 @@ const fetchContent = async () => {
69
  loading.value = true;
70
  contentText.value = "";
71
  originalText.value = "";
 
 
72
  const result = await repoApi.getFileContent(account, currentPath.value);
73
  if (result.content) {
74
- // 不移除换行符,保持原始格式
75
- contentText.value = result.encoding && result.encoding == "base64" ? decodeContent(result.content) as string : result.content;
76
- originalText.value = contentText.value;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  fileSha.value = result.sha;
78
  }
79
  } catch (error) {
@@ -124,7 +144,7 @@ const handleConfirmSave = async () => {
124
  MessagePlugin.error(`未找到账户信息${selectedAccount.value}`);
125
  return;
126
  }
127
-
128
  let response;
129
  if (isNewFile.value) {
130
  // Create new file
@@ -314,6 +334,16 @@ const getLanguageFromPath = computed(() => {
314
  return languageMap[ext] || 'plaintext';
315
  });
316
 
 
 
 
 
 
 
 
 
 
 
317
  // 监听路由变化同步本地状态
318
  watch(() => route.query, async (query) => {
319
  // Only respond to query changes when on the repo route
@@ -342,15 +372,19 @@ watch(() => route.query, async (query) => {
342
 
343
  onMounted(() => {
344
  window.addEventListener('keydown', handleKeyDown);
345
-
346
-
347
-
348
  });
349
 
350
  onUnmounted(() => {
351
  // 注销全局按键监听
352
  window.removeEventListener('keydown', handleKeyDown);
353
  });
 
 
 
 
 
 
 
354
  </script>
355
 
356
  <template>
@@ -364,12 +398,15 @@ onUnmounted(() => {
364
  <t-input v-if="isNewFile" v-model="newFileName" placeholder="请输入文件名" class="w-20" />
365
  </div>
366
  <div class="flex gap-2">
367
- <t-button variant="outline" @click="toggleDiff">
368
- {{ showDiff ? '隐藏对比' : '显示对比' }}
369
- </t-button>
370
- <t-button theme="primary" @click="handleSave" :loading="loading">
371
- 保存
372
- </t-button>
 
 
 
373
  <t-button v-if="!isNewFile" theme="danger" @click="handleDelete" :loading="loading">
374
  删除
375
  </t-button>
@@ -380,7 +417,10 @@ onUnmounted(() => {
380
  <template #content>
381
  <div class="flex flex-col h-full">
382
  <div class="editor-container flex-1">
383
- <MonacoEditor v-model:value="contentText"
 
 
 
384
  :original-value="showDiff ? originalText : undefined" :language="getLanguageFromPath"
385
  :options="{ tabSize: 2 }" />
386
  </div>
 
1
  <script setup lang="ts">
2
+ import { ref, onMounted, onUnmounted, watch, computed, onBeforeUnmount } from 'vue';
3
  import { useRoute, useRouter } from 'vue-router';
4
  import { MessagePlugin } from 'tdesign-vue-next';
5
  import { repoApi, type Account } from '../services/repoApi';
 
20
  const newFileName = ref('');
21
  const store = useAccountStore();
22
  const isNewFile = ref(false);
23
+ const imageUrl = ref<string>('');
24
 
25
  // Compute full path by combining directory path with new file name
26
  const fullPath = computed(() => {
 
70
  loading.value = true;
71
  contentText.value = "";
72
  originalText.value = "";
73
+ imageUrl.value = "";
74
+
75
  const result = await repoApi.getFileContent(account, currentPath.value);
76
  if (result.content) {
77
+ if (isImageFile.value) {
78
+ // 如果是图片,将base64转换为Blob URL
79
+ const base64Data = result.encoding === 'base64' ?
80
+ result.content :
81
+ btoa(result.content);
82
+ const byteCharacters = atob(base64Data);
83
+ const byteNumbers = new Array(byteCharacters.length);
84
+ for (let i = 0; i < byteCharacters.length; i++) {
85
+ byteNumbers[i] = byteCharacters.charCodeAt(i);
86
+ }
87
+ const byteArray = new Uint8Array(byteNumbers);
88
+ const blob = new Blob([byteArray]);
89
+ imageUrl.value = URL.createObjectURL(blob);
90
+ } else {
91
+ // 文本文件处理
92
+ contentText.value = result.encoding === 'base64' ?
93
+ decodeContent(result.content) as string :
94
+ result.content;
95
+ originalText.value = contentText.value;
96
+ }
97
  fileSha.value = result.sha;
98
  }
99
  } catch (error) {
 
144
  MessagePlugin.error(`未找到账户信息${selectedAccount.value}`);
145
  return;
146
  }
147
+
148
  let response;
149
  if (isNewFile.value) {
150
  // Create new file
 
334
  return languageMap[ext] || 'plaintext';
335
  });
336
 
337
+ const isImageFile = computed(() => {
338
+ const path = route.query.path as string;
339
+ if (!path) return false;
340
+
341
+ const ext = path.split('.').pop()?.toLowerCase() || '';
342
+ const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'ico'];
343
+
344
+ return imageExtensions.includes(ext);
345
+ });
346
+
347
  // 监听路由变化同步本地状态
348
  watch(() => route.query, async (query) => {
349
  // Only respond to query changes when on the repo route
 
372
 
373
  onMounted(() => {
374
  window.addEventListener('keydown', handleKeyDown);
 
 
 
375
  });
376
 
377
  onUnmounted(() => {
378
  // 注销全局按键监听
379
  window.removeEventListener('keydown', handleKeyDown);
380
  });
381
+
382
+ // 组件销毁时清理 ObjectURL
383
+ onBeforeUnmount(() => {
384
+ if (imageUrl.value) {
385
+ URL.revokeObjectURL(imageUrl.value);
386
+ }
387
+ });
388
  </script>
389
 
390
  <template>
 
398
  <t-input v-if="isNewFile" v-model="newFileName" placeholder="请输入文件名" class="w-20" />
399
  </div>
400
  <div class="flex gap-2">
401
+ <!-- 只在非图片文件时显示对比和保存按钮 -->
402
+ <template v-if="!isImageFile">
403
+ <t-button variant="outline" @click="toggleDiff">
404
+ {{ showDiff ? '隐藏对比' : '显示对比' }}
405
+ </t-button>
406
+ <t-button theme="primary" @click="handleSave" :loading="loading">
407
+ 保存
408
+ </t-button>
409
+ </template>
410
  <t-button v-if="!isNewFile" theme="danger" @click="handleDelete" :loading="loading">
411
  删除
412
  </t-button>
 
417
  <template #content>
418
  <div class="flex flex-col h-full">
419
  <div class="editor-container flex-1">
420
+ <div v-if="isImageFile" class="w-full h-full flex items-center justify-center">
421
+ <img :src="imageUrl" />
422
+ </div>
423
+ <MonacoEditor v-else v-model:value="contentText"
424
  :original-value="showDiff ? originalText : undefined" :language="getLanguageFromPath"
425
  :options="{ tabSize: 2 }" />
426
  </div>