feat(portal-web): 门户系统文件管理新增文件编辑功能 (#942)

# 文件编辑功能
## 1. 查看页面采取预览模态框，取消现有的网页形式，同时还能解决现在文件较大时查看可能会崩溃的情况；

![image](https://github.com/PKUHPC/SCOW/assets/140392039/30bb6918-d125-4523-aa80-a01d2fb0191c)

![image](https://github.com/PKUHPC/SCOW/assets/140392039/ff18fdd0-0f07-496e-b5b9-09bfbb5819e8)

## 2. 点击文件为查看操作，此时需判断该文件是否支持在线查看，判断标准：文件格式，ppt、doc、exe等确定无法查看的文件
不允许查看，文件大小超标的（管理员配置，默认50M）的不允许查看。点击后弹出提示“文件过大或者格式不支持，请下载后查看”，不再自动下载文件。其余文件允许查看（仍然可能是乱码，但是没关系，除了明确无法查看的应该尽量允许用户查看）。

![image](https://github.com/PKUHPC/SCOW/assets/140392039/469507b3-7b99-488c-a6b2-12b4f074e1ca)

![image](https://github.com/PKUHPC/SCOW/assets/140392039/113ba9bd-9ec8-47e8-a879-06873ae09977)

## 3. 在查看文件页面，右下角增加编辑按钮，右上角增加全屏/取消全屏和关闭按钮，点击编辑后进入编辑模式，右下角变为退出编辑和保存按钮；

![image](https://github.com/PKUHPC/SCOW/assets/140392039/752919f3-9848-4c0b-a1e1-afab6a96bf2d)

![image](https://github.com/PKUHPC/SCOW/assets/140392039/689d9732-6a28-4e6b-9184-c67cb1b12cbc)

## 4.
点击编辑时判断该文件是否支持在线编辑，判断标准：文件大小，文件大小超标的（管理员配置，默认10M）不允许编辑，点击后弹出提示“文件过大，请下载后编辑”。

![image](https://github.com/PKUHPC/SCOW/assets/140392039/69ab36f0-6e1c-4ea7-8b49-eb3843bbe1ce)

## 5.
编辑页面，关闭按钮关闭页面，取消按钮退出编辑模式返回查看页面，点击关闭或取消时如果有编辑过内容，则弹出提示“文件未保存，是否保存该文件”;

![image](https://github.com/PKUHPC/SCOW/assets/140392039/31cf6866-f088-4d5a-8cde-cc079f4d7fcb)

## 6. 可编辑文件大小可配置
在 `portal.yaml` 中新增配置项：
```yaml
# 文件管理
file:
  # 文件预览功能
  preview:
    # 大小限制
    # 可接受的格式为nginx的client_max_body_size可接受的值，默认为 50m
    limitSize: "40m"
  # 文件编辑功能
  edit:
    # 文件编辑大小限制
    # 可接受的格式为nginx的client_max_body_size可接受的值，默认为 1m
    limitSize: "2m"
```
默认可预览文件大小为 50m
默认可编辑文件大小为 1m

目前只有 js、ts、json 等有代码提示，其余语言暂时只有语法高亮

### 文件修改后显示已编辑状态

![image](https://github.com/PKUHPC/SCOW/assets/140392039/962fc661-1d01-40fe-beed-7cc1492b9c21)

.changeset/small-cars-approve.md

@@ -0,0 +1,7 @@
+---
+"@scow/portal-web": minor
+"@scow/config": minor
+"@scow/cli": minor
+---
+
+门户系统文件管理新增文件编辑功能

apps/cli/assets/config/portal.yaml

@@ -43,6 +43,19 @@ homeText:
 # 是否启用终端功能
 shell: true
 
+# # 文件管理
+# file:
+#   # 文件预览功能
+#   preview:
+#     # 大小限制
+#     # 可接受的格式为nginx的client_max_body_size可接受的值，默认为 50m
+#     limitSize: "50m"
+#   # 文件编辑功能
+#   edit:
+#     # 文件编辑大小限制
+#     # 可接受的格式为nginx的client_max_body_size可接受的值，默认为 1m
+#     limitSize: "1m"
+
 # 提交作业的默认工作目录。使用{{ name }}代替作业名称。相对于用户的家目录
 # submitJobDefaultPwd: scow/jobs/{{ name }}
 

apps/portal-web/.eslintrc.json

@@ -2,5 +2,6 @@
   "extends": [
     "@ddadaal/eslint-config/react",
     "../../.eslintrc.js"
-  ]
+  ],
+  "ignorePatterns": ["public/monaco-assets/**"]
 }

apps/portal-web/.gitignore

@@ -25,5 +25,6 @@ yarn-error.log*
 .next/
 
 public/novnc
+public/monaco-assets
 
 api-routes-schemas.json

apps/portal-web/config.js

@@ -194,6 +194,10 @@ const buildRuntimeConfig = async (phase, basePath) => {
 
     CLIENT_MAX_BODY_SIZE: config.CLIENT_MAX_BODY_SIZE,
 
+    FILE_EDIT_SIZE: portalConfig.file?.edit.limitSize,
+
+    FILE_PREVIEW_SIZE: portalConfig.file?.preview.limitSize,
+
     CROSS_CLUSTER_FILE_TRANSFER_ENABLED:
       Object.values(clusters).filter(
         (cluster) => cluster.crossClusterFileTransfer?.enabled).length > 1,

apps/portal-web/package.json

@@ -6,11 +6,12 @@
     "dev": "cross-env NEXT_PUBLIC_USE_MOCK=1 TS_NODE_PROJECT=tsconfig.server.json node --watch -r ts-node/register -r tsconfig-paths/register server/index.ts",
     "dev:server": "cross-env NEXT_PUBLIC_USE_MOCK=0 TS_NODE_PROJECT=tsconfig.server.json node --watch -r ts-node/register -r tsconfig-paths/register server/index.ts",
     "serve": "node build/server/index.js",
-    "build": "npm run build:next && npm run build:ts",
+    "build": "node scripts/copyMonacoToPublic.js && npm run build:next && npm run build:ts",
     "build:next": "next build",
     "build:ts": "rimraf build && tsc -p tsconfig.server.json && tsc-alias -p tsconfig.server.json",
     "test": "jest --passWithNoTests",
-    "client": "ntar client"
+    "client": "ntar client",
+    "prepareDev": "node scripts/copyMonacoToPublic.js"
   },
   "files": [
     ".next",
@@ -26,6 +27,7 @@
   "license": "Mulan PSL v2",
   "repository": "https://glithub.com/PKUHPC/SCOW",
   "dependencies": {
+    "@ant-design/cssinjs": "1.16.2",
     "@ant-design/icons": "5.2.5",
     "@codemirror/language": "6.9.0",
     "@codemirror/legacy-modes": "6.3.3",
@@ -34,18 +36,18 @@
     "@ddadaal/tsgrpc-client": "0.17.6",
     "@ddadaal/tsgrpc-common": "0.2.4",
     "@grpc/grpc-js": "1.9.5",
+    "@monaco-editor/react": "^4.6.0",
     "@scow/config": "workspace:*",
     "@scow/lib-auth": "workspace:*",
     "@scow/lib-config": "workspace:*",
     "@scow/lib-decimal": "workspace:*",
+    "@scow/lib-operation-log": "workspace:*",
     "@scow/lib-ssh": "workspace:*",
     "@scow/lib-web": "workspace:*",
     "@scow/protos": "workspace:*",
-    "@scow/utils": "workspace:*",
-    "@scow/lib-operation-log": "workspace:*",
     "@scow/rich-error-model": "workspace:*",
+    "@scow/utils": "workspace:*",
     "@sinclair/typebox": "0.31.1",
-    "@ant-design/cssinjs": "1.16.2",
     "@uiw/codemirror-theme-github": "4.21.9",
     "@uiw/react-codemirror": "4.21.9",
     "antd": "5.8.4",
@@ -64,14 +66,14 @@
     "react-async": "10.0.1",
     "react-dom": "18.2.0",
     "react-is": "18.2.0",
+    "react-typed-i18n": "2.3.0",
     "simstate": "3.0.1",
     "styled-components": "6.0.7",
     "tslib": "2.6.2",
     "typescript": "5.1.6",
     "ws": "8.13.0",
     "xterm": "5.2.1",
-    "xterm-addon-fit": "0.7.0",
-    "react-typed-i18n": "2.3.0"
+    "xterm-addon-fit": "0.7.0"
   },
   "devDependencies": {
     "@ddadaal/next-typed-api-routes-cli": "0.9.1",
@@ -94,6 +96,9 @@
     "ts-log": "2.2.5",
     "webpack": "5.88.2"
   },
+  "peerDependencies": {
+    "monaco-editor": "0.44.0"
+  },
   "browserslist": {
     "production": [
       ">0.2%",

apps/portal-web/scripts/copyMonacoToPublic.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2022 Peking University and Peking University Institute for Computing and Digital Economy
+ * SCOW is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *          http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+const fs = require("fs-extra");
+const path = require("path");
+
+const sourcePath = path.join(__dirname, "../node_modules/monaco-editor/min/vs");
+const targetPath = path.join(__dirname, "../public/monaco-assets/vs");
+
+// Check if the source directory exists
+if (!fs.existsSync(sourcePath)) {
+  console.error(
+    `Error: Source directory ${sourcePath} does not exist. Ensure the target package is correctly installed.`);
+  process.exit(1);
+}
+
+// Ensure the target path exists, if not, create it
+fs.ensureDirSync(targetPath);
+
+// Attempt to copy
+try {
+  fs.copySync(sourcePath, targetPath, {
+    overwrite: true,
+    errorOnExist: false,
+  });
+  console.log(`Success: Copied from ${sourcePath} to ${targetPath}.`);
+} catch (error) {
+  console.error(`Error: An issue occurred during the copy process. Details: ${error.message}`);
+  process.exit(1);
+}
+
+console.log(`Copied files from ${sourcePath} to ${targetPath}`);

apps/portal-web/src/i18n/en.ts

@@ -186,6 +186,23 @@ export default {
       },
     },
     fileManagerComp: {
+      fileEditModal: {
+        edit: "Edit",
+        prompt: "Prompt",
+        save: "Save",
+        doNotSave: "Do Not Save",
+        notSaved: "Not Saved",
+        notSavePrompt: "The file has not been saved, do you want to save this file?",
+        fileEdit: "File Edit",
+        filePreview: "File Preview",
+        fileLoading: "File is loading...",
+        exitEdit: "Exit Edit Mode",
+        failedGetFile: "Failed to get file: {}",
+        cantReadFile: "Cannot read file: {}",
+        saveFileFail: "File save failed: {}",
+        saveFileSuccess: "File saved successfully",
+        fileSizeExceeded: "File too large (maximum {}), please download and edit",
+      },
       createFileModal: {
         createErrorMessage: "File or directory with the same name already exists!",
         createSuccessMessage: "Created successfully",
@@ -194,6 +211,9 @@ export default {
         fileName: "File Name",
       },
       fileManager: {
+        preview: {
+          cantPreview: "File too large (maximum {}) or format not supported, please download to view",
+        },
         moveCopy: {
           copy: "Copy",
           move: "Move",

apps/portal-web/src/i18n/zh_cn.ts

@@ -186,6 +186,23 @@ export default {
       },
     },
     fileManagerComp: {
+      fileEditModal: {
+        edit: "编辑",
+        prompt: "提示",
+        save: "保存",
+        doNotSave: "不保存",
+        notSaved: "未保存",
+        notSavePrompt: "文件未保存，是否保存该文件？",
+        fileEdit: "文件编辑",
+        filePreview: "文件预览",
+        fileLoading: "文件正在加载...",
+        exitEdit: "退出编辑",
+        failedGetFile: "获取文件: {} 失败",
+        cantReadFile: "无法读取文件: {}",
+        saveFileFail: "文件保存失败: {}",
+        saveFileSuccess: "文件保存成功",
+        fileSizeExceeded: "文件过大（最大{}），请下载后编辑",
+      },
       createFileModal: {
         createErrorMessage: "同名文件或者目录已经存在！",
         createSuccessMessage: "创建成功",
@@ -194,6 +211,9 @@ export default {
         fileName: "文件名",
       },
       fileManager: {
+        preview: {
+          cantPreview: "文件过大（最大{}）或者格式不支持，请下载后查看",
+        },
         moveCopy: {
           copy: "复制",
           move: "移动",