feat: Add file preview functionality and interface (#11200)

* feat: Add file content preview functionality

- Implemented a new API endpoint for previewing file content.
- Added PreviewContent method in BaseApi to handle requests.
- Introduced GetPreviewContent method in FileService to retrieve file previews.
- Updated frontend to include a TextPreview component for displaying file previews.
- Added localization support for preview-related messages in multiple languages.
- Enhanced file management view to support previewing large files.

* feat: Update file preview functionality and interface

- Added PreviewContentReq interface to define request parameters for file preview.
- Updated getPreviewContent function to use the new PreviewContentReq type.
- Modified text-preview component to align with updated API, removing unnecessary parameters.

Author: HynoR

agent/app/api/v2/file.go

@@ -272,6 +272,29 @@ func (b *BaseApi) GetContent(c *gin.Context) {
 	}
 }
 
+// @Tags File
+// @Summary Preview file content
+// @Accept json
+// @Param request body request.FileContentReq true "request"
+// @Success 200 {object} response.FileInfo
+// @Security ApiKeyAuth
+// @Security Timestamp
+// @Router /files/preview [post]
+// @x-panel-log {"bodyKeys":["path"],"paramKeys":[],"BeforeFunctions":[],"formatZH":"预览文件内容 [path]","formatEN":"Preview file content [path]"}
+func (b *BaseApi) PreviewContent(c *gin.Context) {
+	var req request.FileContentReq
+	if err := helper.CheckBindAndValidate(&req, c); err != nil {
+		return
+	}
+	info, err := fileService.GetPreviewContent(req)
+	if err != nil {
+		helper.InternalServer(c, err)
+		return
+	}
+
+	helper.SuccessWithData(c, info)
+}
+
 // @Tags File
 // @Summary Update file content
 // @Accept json

agent/app/dto/request/file.go

@@ -13,7 +13,6 @@ type FileContentReq struct {
 	Path     string `json:"path" validate:"required"`
 	IsDetail bool   `json:"isDetail"`
 }
-
 type SearchUploadWithPage struct {
 	dto.PageInfo
 	Path string `json:"path" validate:"required"`

agent/app/service/file.go

@@ -56,6 +56,7 @@ type IFileService interface {
 	Compress(c request.FileCompress) error
 	DeCompress(c request.FileDeCompress) error
 	GetContent(op request.FileContentReq) (response.FileInfo, error)
+	GetPreviewContent(op request.FileContentReq) (response.FileInfo, error)
 	SaveContent(edit request.FileEdit) error
 	FileDownload(d request.FileDownload) (string, error)
 	DirSize(req request.DirSizeReq) (response.DirSizeRes, error)
@@ -374,6 +375,82 @@ func (f *FileService) GetContent(op request.FileContentReq) (response.FileInfo,
 	return response.FileInfo{FileInfo: *info}, nil
 }
 
+func (f *FileService) GetPreviewContent(op request.FileContentReq) (response.FileInfo, error) {
+	info, err := files.NewFileInfo(files.FileOption{
+		Path:     op.Path,
+		Expand:   false,
+		IsDetail: op.IsDetail,
+	})
+	if err != nil {
+		return response.FileInfo{}, err
+	}
+
+	if files.IsBlockDevice(info.FileMode) {
+		return response.FileInfo{FileInfo: *info}, nil
+	}
+
+	file, err := os.Open(op.Path)
+	if err != nil {
+		return response.FileInfo{}, err
+	}
+	defer file.Close()
+
+	headBuf := make([]byte, 1024)
+	n, err := file.Read(headBuf)
+	if err != nil && err != io.EOF {
+		return response.FileInfo{}, err
+	}
+	headBuf = headBuf[:n]
+
+	if len(headBuf) > 0 && files.DetectBinary(headBuf) {
+		return response.FileInfo{FileInfo: *info}, nil
+	}
+
+	const maxSize = 10 * 1024 * 1024
+	if info.Size <= maxSize {
+		if _, err := file.Seek(0, 0); err != nil {
+			return response.FileInfo{}, err
+		}
+		content, err := io.ReadAll(file)
+		if err != nil {
+			return response.FileInfo{}, err
+		}
+		info.Content = string(content)
+	} else {
+		lines, err := files.TailFromEnd(op.Path, 300)
+		if err != nil {
+			return response.FileInfo{}, err
+		}
+		info.Content = strings.Join(lines, "\n")
+	}
+
+	content := []byte(info.Content)
+	if len(content) > 1024 {
+		content = content[:1024]
+	}
+	if !utf8.Valid(content) {
+		_, decodeName, _ := charset.DetermineEncoding(content, "")
+		decoder := files.GetDecoderByName(decodeName)
+		if decoder != nil {
+			reader := strings.NewReader(info.Content)
+			var dec *encoding.Decoder
+			if decodeName == "windows-1252" {
+				dec = simplifiedchinese.GBK.NewDecoder()
+			} else {
+				dec = decoder.NewDecoder()
+			}
+			decodedReader := transform.NewReader(reader, dec)
+			contents, err := io.ReadAll(decodedReader)
+			if err != nil {
+				return response.FileInfo{}, err
+			}
+			info.Content = string(contents)
+		}
+	}
+
+	return response.FileInfo{FileInfo: *info}, nil
+}
+
 func (f *FileService) SaveContent(edit request.FileEdit) error {
 	info, err := files.NewFileInfo(files.FileOption{
 		Path:   edit.Path,

agent/router/ro_file.go

@@ -23,6 +23,7 @@ func (f *FileRouter) InitRouter(Router *gin.RouterGroup) {
 		fileRouter.POST("/compress", baseApi.CompressFile)
 		fileRouter.POST("/decompress", baseApi.DeCompressFile)
 		fileRouter.POST("/content", baseApi.GetContent)
+		fileRouter.POST("/preview", baseApi.PreviewContent)
 		fileRouter.POST("/save", baseApi.SaveContent)
 		fileRouter.POST("/check", baseApi.CheckFile)
 		fileRouter.POST("/batch/check", baseApi.BatchCheckFiles)

frontend/src/api/interface/file.ts

@@ -41,6 +41,11 @@ export namespace File {
         node: string;
     }
 
+    export interface PreviewContentReq {
+        path: string;
+        isDetail?: boolean;
+    }
+
     export interface SearchUploadInfo extends ReqPage {
         path: string;
     }

frontend/src/api/modules/files.ts

@@ -54,6 +54,10 @@ export const getFileContent = (params: File.ReqFile) => {
     return http.post<File.File>('files/content', params);
 };
 
+export const getPreviewContent = (params: File.PreviewContentReq) => {
+    return http.post<File.File>('files/preview', params, TimeoutEnum.T_5M);
+};
+
 export const saveFileContent = (params: File.FileEdit) => {
     return http.post<File.File>('files/save', params);
 };

frontend/src/lang/modules/en.ts

@@ -1576,6 +1576,9 @@ const message = {
         noNameFile: 'Untitled file',
         minimap: 'Code mini map',
         fileCanNotRead: 'File can not read',
+        previewTruncated: 'File is too large, only showing the last part',
+        previewEmpty: 'File is empty or not a text file',
+        previewLargeFile: 'Preview',
         panelInstallDir: `1Panel installation directory can't be deleted`,
         wgetTask: 'Download Task',
         existFileTitle: 'Same name file prompt',

frontend/src/lang/modules/es-es.ts

@@ -1578,6 +1578,9 @@ const message = {
         noNameFile: 'Archivo sin nombre',
         minimap: 'Mapa de código',
         fileCanNotRead: 'No se puede leer el archivo',
+        previewTruncated: 'El archivo es demasiado grande, solo se muestra la última parte',
+        previewEmpty: 'El archivo está vacío o no es un archivo de texto',
+        previewLargeFile: 'Vista previa',
         panelInstallDir: 'El directorio de instalación de 1Panel no puede eliminarse',
         wgetTask: 'Tarea de descarga',
         existFileTitle: 'Archivo con el mismo nombre',

frontend/src/lang/modules/ja.ts

@@ -1527,6 +1527,9 @@ const message = {
         noNameFile: '無題のファイル',
         minimap: 'コードミニマップ',
         fileCanNotRead: 'ファイルは読み取れません',
+        previewTruncated: 'ファイルが大きすぎるため、末尾の内容のみ表示しています',
+        previewEmpty: 'ファイルが空であるか、テキストファイルではありません',
+        previewLargeFile: 'プレビュー',
         panelInstallDir: `1Panelインストールディレクトリは削除できません`,
         wgetTask: 'ダウンロードタスク',
         existFileTitle: '同名ファイルの警告',

frontend/src/lang/modules/ko.ts

@@ -1509,6 +1509,9 @@ const message = {
         noNameFile: '제목 없는 파일',
         minimap: '코드 미니맵',
         fileCanNotRead: '파일을 읽을 수 없습니다.',
+        previewTruncated: '파일이 너무 커서 마지막 부분만 표시됩니다',
+        previewEmpty: '파일이 비어 있거나 텍스트 파일이 아닙니다',
+        previewLargeFile: '미리보기',
         panelInstallDir: `1Panel 설치 디렉터리는 삭제할 수 없습니다.`,
         wgetTask: '다운로드 작업',
         existFileTitle: '동일한 이름의 파일 경고',