Update from GitHub Actions

components.d.ts

@@ -40,5 +40,6 @@ declare module 'vue' {
     TSelect: typeof import('tdesign-vue-next')['Select']
     TTable: typeof import('tdesign-vue-next')['Table']
     TTextarea: typeof import('tdesign-vue-next')['Textarea']
+    TUpload: typeof import('tdesign-vue-next')['Upload']
   }
 }

functions/api/github/[[path]].ts

@@ -78,7 +78,9 @@ export const onRequest = async (context: RouteContext): Promise<Response> => {
                 encodedContent = content;
             } catch (e) {
                 // 如果不是，则编码它
-                encodedContent = btoa(unescape(encodeURIComponent(content)));
+                const encoder = new TextEncoder();
+                const bytes = encoder.encode(content);
+                encodedContent = btoa(String.fromCharCode.apply(null, [...new Uint8Array(bytes)]));
             }
 
             const githubUrl = `${githubApiBase}/repos/${owner}/${repo}/contents/${path}`;

src/components/RepoHeader.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   currentPath: string;
   accounts: Account[];
   isNewFile?: boolean;
+  isUploadFile?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -49,7 +50,7 @@ const pathBreadcrumbs = computed(() => {
           <t-option v-for="acc in accounts" :key="acc.id" :value="acc.id" :label="`${acc.owner}/${acc.repo}`" />
         </t-select>
 
-        <t-breadcrumb v-if="currentPath && pathBreadcrumbs.length > 0 || isNewFile" class="mt-3">
+        <t-breadcrumb v-if="currentPath && pathBreadcrumbs.length > 0 || isNewFile || isUploadFile" class="mt-3">
           <t-breadcrumb-item @click="emit('rootClick')" class="cursor-pointer hover:text-blue-500">
             <span class="flex items-center gap-1">
               <FolderIcon /> 根目录

src/router/index.ts

@@ -27,6 +27,12 @@ const router = createRouter({
             component: () => import('../views/ContentView.vue'),
             meta: { requiresAuth: true }
         },
+        {
+            path: '/upload',
+            name: 'Upload',
+            component: () => import('../views/UploadView.vue'),
+            meta: { requiresAuth: true }
+        },
         {
             path: '/setting',
             name: 'Setting',

src/services/repoApi.ts

@@ -95,9 +95,19 @@ class GitHubRepoApi implements IRepoApi {
   }
 
   async createFile(account: Account, path: string, content: string, message?: string) {
-    const encoder = new TextEncoder();
-    const bytes = encoder.encode(content);
-    const base64Content = btoa(String.fromCharCode.apply(null, [...new Uint8Array(bytes)]));
+
+    let encodedContent;
+    try {
+        // 检查内容是否已经是 Base64 编码
+        atob(content);
+        encodedContent = content;
+    } catch (e) {
+        // 如果不是，则编码它
+        const encoder = new TextEncoder();
+        const bytes = encoder.encode(content);
+        encodedContent = btoa(String.fromCharCode.apply(null, [...new Uint8Array(bytes)]));
+    }
+    
     const response = await fetch(
       `${API_BASE_URL}/api/github/${account.owner}/${account.repo}/${path}`,
       {
@@ -106,7 +116,7 @@ class GitHubRepoApi implements IRepoApi {
           'Content-Type': 'application/json',
           Authorization: `Bearer ${account.token}`
         },
-        body: JSON.stringify({ branch: account.ref, content: base64Content, message })
+        body: JSON.stringify({ branch: account.ref, content: encodedContent, message })
       }
     );
     return handleResponse(response);

src/views/ContentView.vue

@@ -73,21 +73,26 @@ const fetchContent = async () => {
         imageUrl.value = "";
 
         const result = await repoApi.getFileContent(account, currentPath.value);
-        if (result.content) {
+        if (result) {
             if (isImageFile.value) {
-                // 如果是图片，将base64转换为Blob URL
-                const base64Data = result.encoding === 'base64' ?
-                    result.content :
-                    btoa(result.content);
-                const byteCharacters = atob(base64Data);
-                const byteNumbers = new Array(byteCharacters.length);
-                for (let i = 0; i < byteCharacters.length; i++) {
-                    byteNumbers[i] = byteCharacters.charCodeAt(i);
+                if (result.content) {
+                    // 如果有 content，将 base64 转换为 Blob URL
+                    const base64Data = result.encoding === 'base64' ?
+                        result.content :
+                        btoa(result.content);
+                    const byteCharacters = atob(base64Data);
+                    const byteNumbers = new Array(byteCharacters.length);
+                    for (let i = 0; i < byteCharacters.length; i++) {
+                        byteNumbers[i] = byteCharacters.charCodeAt(i);
+                    }
+                    const byteArray = new Uint8Array(byteNumbers);
+                    const blob = new Blob([byteArray]);
+                    imageUrl.value = URL.createObjectURL(blob);
+                } else if (result.download_url) {
+                    // 如果没有 content 但有 download_url，直接使用
+                    imageUrl.value = result.download_url;
                 }
-                const byteArray = new Uint8Array(byteNumbers);
-                const blob = new Blob([byteArray]);
-                imageUrl.value = URL.createObjectURL(blob);
-            } else {
+            } else if (result.content) {
                 // 文本文件处理
                 contentText.value = result.encoding === 'base64' ?
                     decodeContent(result.content) as string :
@@ -381,7 +386,7 @@ onUnmounted(() => {
 
 // 组件销毁时清理 ObjectURL
 onBeforeUnmount(() => {
-    if (imageUrl.value) {
+    if (imageUrl.value && imageUrl.value.startsWith('blob:')) {
         URL.revokeObjectURL(imageUrl.value);
     }
 });

src/views/RepoView.vue

@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useAccountStore } from '../stores/accountStorage';
 import { repoApi, type RepoContent, type Account } from '../services/repoApi';
-import { FolderIcon, FileIcon, CodeIcon, ImageIcon } from 'tdesign-icons-vue-next';
+import { FolderIcon, FileIcon, CodeIcon, ImageIcon, UploadIcon } from 'tdesign-icons-vue-next';
 import RepoHeader from '../components/RepoHeader.vue';
 
 const router = useRouter();
@@ -184,6 +184,20 @@ const handleNewFile = () => {
         }
     });
 };
+
+const handleUpload = () => {
+    if (!selectedAccount.value) {
+        MessagePlugin.error('请先选择仓库');
+        return;
+    }
+    router.push({
+        path: '/upload',
+        query: {
+            id: selectedAccount.value,
+            path: currentPath.value,
+        }
+    });
+};
 </script>
 
 <template>
@@ -198,6 +212,12 @@ const handleNewFile = () => {
                     </template>
                     新建文件
                 </t-button>
+                <t-button theme="primary" @click="handleUpload" class="flex items-center gap-1">
+                    <template #icon>
+                        <UploadIcon />
+                    </template>
+                    上传文件
+                </t-button>
             </div>
         </RepoHeader>
 

src/views/UploadView.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { MessagePlugin, type UploadFile, type UploadInstanceFunctions, type UploadProps } from 'tdesign-vue-next';
+import { UploadIcon } from 'tdesign-icons-vue-next';
+import { useAccountStore } from '../stores/accountStorage';
+import { repoApi } from '../services/repoApi';
+import RepoHeader from '../components/RepoHeader.vue';
+
+const route = useRoute();
+const router = useRouter();
+const store = useAccountStore();
+
+const selectedAccount = ref<number | ''>('');
+const currentPath = ref('');
+const loading = ref(false);
+const uploadRef =  ref<UploadInstanceFunctions>();
+const uploadFiles = ref<UploadProps['value']>([]);
+const commitMessage = ref('');
+const commitDescription = ref('');
+const selectedFile = ref<File | null>(null);
+
+// Watch route query params and sync with local state
+watch(() => route.query, async (query) => {
+    if (route.path !== '/upload') return;
+    const { id, path } = query;
+    if (id) {
+        await store.fetchAccounts();
+        const account = store.accounts.find(acc => acc.id === Number(id));
+        if (account) {
+            selectedAccount.value = account.id;
+        }
+        currentPath.value = path ? path as string : '';
+    }
+    uploadFiles.value = [];
+}, { immediate: true });
+
+const handlePathClick = (path: string) => {
+    router.push({
+        path: '/repo',
+        query: {
+            id: selectedAccount.value,
+            path
+        }
+    });
+};
+
+const handleRootClick = () => {
+    router.push({
+        path: '/repo',
+        query: {
+            id: selectedAccount.value,
+        }
+    });
+};
+
+const handleAccountChange = (val: number) => {
+    selectedAccount.value = val;
+    currentPath.value = '';
+    router.push({
+        path: '/repo',
+        query: {
+            id: selectedAccount.value,
+        }
+    });
+};
+
+const handleUpload = async (files: UploadFile[]) => {
+    if (!selectedAccount.value) {
+        MessagePlugin.error('请先选择仓库');
+        return;
+    }
+
+    if (!files || files.length === 0) {
+        MessagePlugin.error('请选择要上传的文件');
+        return;
+    }
+    selectedFile.value = files[0].raw as File;
+};
+
+const handleConfirmUpload = async () => {
+    if (!selectedFile.value || !selectedAccount.value) return;
+
+    const account = store.accounts.find(acc => acc.id === selectedAccount.value);
+    if (!account) {
+        MessagePlugin.error('未找到账户信息');
+        return;
+    }
+
+    loading.value = true;
+    try {
+        // Verify that selectedFile.value is actually a File object
+        if (!(selectedFile.value instanceof File)) {
+            throw new Error('Invalid file object');
+        }
+
+        const content = await new Promise<string>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                if (e.target?.result) {
+                    // 获取 base64 字符串，移除 "data:*/*;base64," 前缀
+                    const dataUrl = e.target.result.toString();
+
+                    const base64 = dataUrl.split(',')[1];
+
+                    resolve(base64);
+                } else {
+                    reject(new Error('Failed to read file content'));
+                }
+            };
+            reader.onerror = () => reject(reader.error);
+            // 使用 readAsDataURL 来处理所有类型的文件
+            reader.readAsDataURL(selectedFile.value as File);
+        });
+
+        const filePath = currentPath.value
+            ? `${currentPath.value}/${selectedFile.value.name}`
+            : selectedFile.value.name;
+
+        const finalCommitMessage = commitMessage.value.trim() +
+            (commitDescription.value ? '\n\n' + commitDescription.value.trim() : '') ||
+            `上传文件: ${selectedFile.value.name}`;
+
+        // GitHub API 要求 base64 编码的内容
+        const response = await repoApi.createFile(
+            account,
+            filePath,
+            content,
+            finalCommitMessage
+        );
+
+        MessagePlugin.success('上传成功');
+
+        commitMessage.value = '';
+        commitDescription.value = '';
+        selectedFile.value = null;
+
+        router.push({
+            path: '/repo',
+            query: {
+                id: selectedAccount.value,
+                path: currentPath.value
+            }
+        });
+    } catch (error) {
+        console.error(error);
+        MessagePlugin.error('上传失败');
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleCancelUpload = () => {
+    commitMessage.value = '';
+    commitDescription.value = '';
+    selectedFile.value = null;
+};
+</script>
+
+<template>
+    <div class="upload-container w-full flex flex-col p-3 md:p-5 gap-3 md:gap-5 bg-gray-50">
+        <RepoHeader :selected-account="selectedAccount" :current-path="currentPath" :accounts="store.accounts"
+            :is-upload-file="true" @path-click="handlePathClick" @root-click="handleRootClick"
+            @update:selected-account="handleAccountChange" />
+
+        <div class="content-section flex-1 bg-white rounded-lg shadow-sm p-6">
+            <t-upload ref="uploadRef" v-model="uploadFiles" class="w-full flex items-center justify-center" theme="image" :auto-upload="false"
+                :multiple="false" :draggable="true" :allow-upload-duplicate-file="true" @change="handleUpload">
+            </t-upload>
+
+            <!-- 提交表单 -->
+            <div class="mt-6 pt-4">
+                <div class="flex flex-col gap-4">
+                    <t-input v-model:value="commitMessage" placeholder="请输入提交标题" :autofocus="true" />
+                    <t-textarea v-model:value="commitDescription" placeholder="请输入详细的提交说明（可选）"
+                        class="commit-description-textarea" />
+                    <div class="flex gap-2 justify-end">
+                        <t-button theme="default" @click="handleCancelUpload">
+                            取消
+                        </t-button>
+                        <t-button theme="primary" @click="handleConfirmUpload" :loading="loading">
+                            确认上传
+                        </t-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.upload-container {
+    min-height: 600px;
+}
+:deep(.t-upload__dragger){
+    @apply w-full;
+}
+</style>