Csghub file too large can not preview

frontend/src/components/shared/Blob.vue

@@ -95,7 +95,7 @@
       </div>
     </div>
     <div
-      v-if="!lfs"
+      v-if="!lfs && previewCode !== 1"
       class="border border-t-0 border-gray-200 rounded-b"
     >
       <div
@@ -132,6 +132,26 @@
         />
       </div>
     </div>
+    <div v-else-if="!lfs && previewCode === 1 ">
+      <div
+        class="text-xs text-gray-700 px-4 py-2 flex items-center justify-end border-b border-gray-200"
+      >
+        <div>{{ formatBytes(size) }}</div>
+      </div>
+      <div
+        class="flex items-center justify-center px-4 py-10 border-b border-gray-200 font-medium text-gray-500 text-sm whitespace-pre-wrap"
+      >
+        <p>
+          {{ $t('shared.tooLargeFile') }}
+          <span
+            class="underline cursor-pointer"
+            @click="normalFileDownload"
+            >{{ $t('shared.tooLargeFile2') }}
+          </span>
+          {{ $t('shared.tooLargeFile3') }}
+        </p>
+      </div>
+    </div>
     <div
       v-else
       class="border border-t-0 border-gray-200 rounded-b"
@@ -233,7 +253,9 @@
   const sha = ref('')
   const lfsPointerSize = ref(0)
   const lfsRelativePath = ref('')
+  const path = ref('')
   const lfs = ref(false)
+  const previewCode =ref(0)
   const size = ref(0)
   const content = ref('')
   const lastCommit = ref({})
@@ -302,6 +324,8 @@
     lastCommit.value = data.commit
     size.value = data.size
     lfs.value = data.lfs
+    path.value = data.path
+    previewCode.value = data.preview_code ?? ''
     lfsRelativePath.value = data.lfs_relative_path
     lfsPointerSize.value = data.lfs_pointer_size
   }
@@ -347,6 +371,26 @@
     }
   }
 
+  const normalFileDownload = async () => {
+    const url = `/${prefixPath}/${props.namespacePath}/download/${path.value}?ref=${props.currentBranch}`
+
+    try {
+      const { data, error } = await useFetchApi(url).blob()
+
+      if (error.value) {
+        ElMessage({
+          message: error.value.msg,
+          type: 'warning'
+        })
+      } else {
+        const downloadUrl = window.URL.createObjectURL(data.value)
+        createAndClickAnchor(downloadUrl, path.value)
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   onMounted(() => {
     fetchFileContent()
   })

frontend/src/components/user_settings/AccessTokenSettings.vue

@@ -6,7 +6,7 @@
       class="max-w-[411px] md:mb-[24px]"
       :name="profileName"
     ></Menu>
-    <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l md:border-l-0 min-h-[calc(100vh-153px)] min-h-auto">
+    <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l md:border-l-0 min-h-[calc(100vh-153px)] md:min-h-0">
       <div class="max-w-[512px]">
         <div class="mb-[16px]">
           <h3 class="mb-[4px] text-gray-700 text-xl font-semibold">

frontend/src/components/user_settings/SshKeySettings.vue

@@ -7,7 +7,7 @@
       :name="name"
     >
     </Menu>
-    <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l md:border-l-0 min-h-[calc(100vh-153px)] min-h-auto">
+    <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l md:border-l-0 min-h-[calc(100vh-153px)] md:min-h-0">
       <h3 class="text-gray-700 text-xl font-[600]">SSH Keys</h3>
       <button
         @click="centerDialogVisible = true"

frontend/src/components/user_settings/StarshipAccessTokenSettings.vue

@@ -9,7 +9,7 @@
     </Menu>
 
     <!-- API Key list -->
-    <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l md:border-l-0 min-h-[calc(100vh-153px)] min-h-auto">
+    <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l md:border-l-0 min-h-[calc(100vh-153px)] md:min-h-0">
       <div class="max-w-[512px]">
         <div class="mb-[16px]">
           <h3 class="mb-[4px] text-gray-700 text-xl font-semibold">

frontend/src/components/user_settings/SyncAccessTokenSettings.vue

@@ -7,7 +7,7 @@
       :name="name"
     >
     </Menu>
-    <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l border-l-0 min-h-[calc(100vh-153px)] min-h-auto">
+    <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l border-l-0 min-h-[calc(100vh-153px)] md:min-h-0">
       <div class="max-w-[512px]">
         <div class="mb-[16px]">
           <h3 class="mb-[4px] text-gray-700 text-xl font-semibold">

frontend/src/locales/en_js/shared.js

@@ -17,5 +17,8 @@ export const shared = {
   preview: "Preview",
   edit: "Edit",
   likes: "Likes",
-  hasLikes: "Liked"
+  hasLikes: "Liked",
+  tooLargeFile:"File too large to display,you can check the",
+  tooLargeFile2:"raw version",
+  tooLargeFile3:"instead"
 }

frontend/src/locales/zh_js/shared.js

@@ -17,5 +17,9 @@ export const shared = {
   preview: "预览",
   edit: "编辑",
   likes: "收藏",
-  hasLikes: "已收藏"
+  hasLikes: "已收藏",
+  tooLargeFile: "文件过大无法显示，您可以查看",
+  tooLargeFile2: "原始版本",
+  tooLargeFile3:""
+
 }