From 1e4ea2f8c3fd8268b3956d764b180cc0697c720a Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <31820853+zhengkunwang223@users.noreply.github.com>
Date: Wed, 10 May 2023 15:02:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=90=8D=E7=A7=B0=E6=98=BE=E7=A4=BA=20(#985)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

resolve  https://github.com/1Panel-dev/1Panel/issues/975
---
 frontend/src/api/interface/file.ts            |  1 +
 .../file-management/change-role/index.vue     | 12 ++++++-----
 .../host/file-management/chown/index.vue      |  5 ++++-
 .../file-management/code-editor/index.vue     |  4 +++-
 .../host/file-management/compress/index.vue   | 12 +++++------
 .../host/file-management/decompress/index.vue |  2 +-
 .../host/file-management/detail/index.vue     |  6 +++---
 .../src/views/host/file-management/index.vue  | 20 +++++++++----------
 .../host/file-management/rename/index.vue     |  4 ++--
 9 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/frontend/src/api/interface/file.ts b/frontend/src/api/interface/file.ts
index 2d15d6201..0fd2fed37 100644
--- a/frontend/src/api/interface/file.ts
+++ b/frontend/src/api/interface/file.ts
@@ -55,6 +55,7 @@ export namespace File {
         isSymlink?: boolean;
         linkPath?: boolean;
         sub?: boolean;
+        name?: string;
     }
 
     export interface FileDelete {
diff --git a/frontend/src/views/host/file-management/change-role/index.vue b/frontend/src/views/host/file-management/change-role/index.vue
index 2174b6be7..46e6c8e38 100644
--- a/frontend/src/views/host/file-management/change-role/index.vue
+++ b/frontend/src/views/host/file-management/change-role/index.vue
@@ -1,7 +1,7 @@
 <template>
     <el-drawer v-model="open" :before-close="handleClose" :close-on-click-modal="false" width="50%">
         <template #header>
-            <DrawerHeader :header="$t('file.setRole')" :back="handleClose" />
+            <DrawerHeader :header="$t('file.setRole')" :resource="name" :back="handleClose" />
         </template>
 
         <el-row>
@@ -30,10 +30,11 @@ import i18n from '@/lang';
 import FileRole from '@/components/file-role/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
-let open = ref(false);
-let form = ref<File.FileCreate>({ path: '', isDir: false, mode: 0o755 });
-let loading = ref<Boolean>(false);
-let mode = ref('0755');
+const open = ref(false);
+const form = ref<File.FileCreate>({ path: '', isDir: false, mode: 0o755 });
+const loading = ref<Boolean>(false);
+const mode = ref('0755');
+const name = ref('');
 
 const em = defineEmits(['close']);
 const handleClose = () => {
@@ -47,6 +48,7 @@ const acceptParams = (create: File.FileCreate) => {
     form.value.path = create.path;
     form.value.isLink = false;
     form.value.sub = false;
+    name.value = create.name;
 
     mode.value = String(create.mode);
 };
diff --git a/frontend/src/views/host/file-management/chown/index.vue b/frontend/src/views/host/file-management/chown/index.vue
index 3b50103cf..bd4936c21 100644
--- a/frontend/src/views/host/file-management/chown/index.vue
+++ b/frontend/src/views/host/file-management/chown/index.vue
@@ -1,7 +1,7 @@
 <template>
     <el-drawer v-model="open" size="40%">
         <template #header>
-            <DrawerHeader :header="$t('file.changeOwner')" :back="handleClose" />
+            <DrawerHeader :header="$t('file.changeOwner')" :resource="name" :back="handleClose" />
         </template>
         <el-row>
             <el-col :span="22" :offset="1">
@@ -50,12 +50,14 @@ interface OwnerProps {
     user: string;
     group: string;
     isDir: boolean;
+    name: string;
 }
 
 const fileForm = ref<FormInstance>();
 const loading = ref(false);
 const open = ref(false);
 const isDir = ref(false);
+const name = ref('');
 
 const addForm = reactive({
     path: '',
@@ -101,6 +103,7 @@ const acceptParams = (props: OwnerProps) => {
     addForm.path = props.path;
     addForm.group = props.group;
     isDir.value = props.isDir;
+    name.value = props.name;
     open.value = true;
 };
 
diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue
index df79abf8d..b80555488 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -1,7 +1,7 @@
 <template>
     <el-dialog
         v-model="open"
-        :title="$t('commons.button.edit')"
+        :title="$t('commons.button.edit') + ' - ' + fileName"
         :before-close="handleClose"
         destroy-on-close
         width="70%"
@@ -84,6 +84,7 @@ interface EditorConfig {
 
 const open = ref(false);
 const loading = ref(false);
+const fileName = ref('');
 
 const config = reactive<EditorConfig>({
     theme: 'vs-dark',
@@ -193,6 +194,7 @@ const acceptParams = (props: EditProps) => {
     form.value.content = props.content;
     form.value.path = props.path;
     config.language = props.language;
+    fileName.value = props.name;
     // TODO Now,1panel only support liunux,so we can use LF.
     // better,We should rely on the actual line feed character of the file returned from the background
     config.eol = monaco.editor.EndOfLineSequence.LF;
diff --git a/frontend/src/views/host/file-management/compress/index.vue b/frontend/src/views/host/file-management/compress/index.vue
index d6baa19cd..41daecaa1 100644
--- a/frontend/src/views/host/file-management/compress/index.vue
+++ b/frontend/src/views/host/file-management/compress/index.vue
@@ -75,12 +75,12 @@ const rules = reactive<FormRules>({
 });
 
 const fileForm = ref<FormInstance>();
-let loading = ref(false);
-let form = ref<File.FileCompress>({ files: [], type: 'zip', dst: '', name: '', replace: false });
-let options = ref<string[]>([]);
-let open = ref(false);
-let title = ref('');
-let operate = ref('compress');
+const loading = ref(false);
+const form = ref<File.FileCompress>({ files: [], type: 'zip', dst: '', name: '', replace: false });
+const options = ref<string[]>([]);
+const open = ref(false);
+const title = ref('');
+const operate = ref('compress');
 
 const em = defineEmits(['close']);
 
diff --git a/frontend/src/views/host/file-management/decompress/index.vue b/frontend/src/views/host/file-management/decompress/index.vue
index 282757c2a..30230fa30 100644
--- a/frontend/src/views/host/file-management/decompress/index.vue
+++ b/frontend/src/views/host/file-management/decompress/index.vue
@@ -7,7 +7,7 @@
         size="40%"
     >
         <template #header>
-            <DrawerHeader :header="$t('file.deCompress')" :back="handleClose" />
+            <DrawerHeader :header="$t('file.deCompress')" :resource="name" :back="handleClose" />
         </template>
         <el-row>
             <el-col :span="22" :offset="1">
diff --git a/frontend/src/views/host/file-management/detail/index.vue b/frontend/src/views/host/file-management/detail/index.vue
index 9fe2f8e12..ba41ade40 100644
--- a/frontend/src/views/host/file-management/detail/index.vue
+++ b/frontend/src/views/host/file-management/detail/index.vue
@@ -7,14 +7,14 @@
             <el-col>
                 <el-descriptions :column="1" border>
                     <el-descriptions-item :label="$t('file.fileName')">{{ data.name }}</el-descriptions-item>
-                    <!-- <el-descriptions-item :label="$t('file.type')">{{ data.type }}</el-descriptions-item> -->
+                    <el-descriptions-item :label="$t('file.type')">{{ data.type }}</el-descriptions-item>
                     <el-descriptions-item :label="$t('file.path')">{{ data.path }}</el-descriptions-item>
                     <el-descriptions-item :label="$t('file.size')">
                         {{ computeSize(data.size) }}
                     </el-descriptions-item>
                     <el-descriptions-item :label="$t('file.role')">{{ data.mode }}</el-descriptions-item>
-                    <!-- <el-descriptions-item :label="$t('file.user')">{{ data.user }}</el-descriptions-item>
-                    <el-descriptions-item :label="$t('file.group')">{{ data.group }}</el-descriptions-item> -->
+                    <el-descriptions-item :label="$t('file.user')">{{ data.user }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('file.group')">{{ data.group }}</el-descriptions-item>
                     <el-descriptions-item :label="$t('commons.table.updatedAt')">
                         {{ dateFormatSimple(data.modTime) }}
                     </el-descriptions-item>
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index f50e6bdb9..8c1a438d1 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -178,7 +178,7 @@
             <Download ref="downloadRef" @close="search" />
             <Process :open="processPage.open" @close="closeProcess" />
             <Owner ref="chownRef" @close="search"></Owner>
-            <!-- <Detail ref="detailRef" /> -->
+            <Detail ref="detailRef" />
         </LayoutContent>
     </div>
 </template>
@@ -205,7 +205,7 @@ import Download from './download/index.vue';
 import Owner from './chown/index.vue';
 import { Mimetypes, Languages } from '@/global/mimetype';
 import Process from './process/index.vue';
-// import Detail from './detail/index.vue';
+import Detail from './detail/index.vue';
 import { useRouter } from 'vue-router';
 import { Back, Refresh } from '@element-plus/icons-vue';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
@@ -252,7 +252,7 @@ const processPage = reactive({ open: false });
 
 const createRef = ref();
 const roleRef = ref();
-// const detailRef = ref();
+const detailRef = ref();
 const compressRef = ref();
 const deCompressRef = ref();
 const codeEditorRef = ref();
@@ -603,9 +603,9 @@ const openDownload = () => {
     }
 };
 
-// const openDetail = (row: File.File) => {
-//     detailRef.value.acceptParams({ path: row.path });
-// };
+const openDetail = (row: File.File) => {
+    detailRef.value.acceptParams({ path: row.path });
+};
 
 const buttons = [
     {
@@ -641,10 +641,10 @@ const buttons = [
         label: i18n.global.t('commons.button.delete'),
         click: delFile,
     },
-    // {
-    //     label: i18n.global.t('file.info'),
-    //     click: openDetail,
-    // },
+    {
+        label: i18n.global.t('file.info'),
+        click: openDetail,
+    },
 ];
 
 onMounted(() => {
diff --git a/frontend/src/views/host/file-management/rename/index.vue b/frontend/src/views/host/file-management/rename/index.vue
index 2cbeb69d9..3c22aea94 100644
--- a/frontend/src/views/host/file-management/rename/index.vue
+++ b/frontend/src/views/host/file-management/rename/index.vue
@@ -1,7 +1,7 @@
 <template>
     <el-drawer v-model="open" size="40%">
         <template #header>
-            <DrawerHeader :header="$t('file.rename')" :back="handleClose" />
+            <DrawerHeader :header="$t('file.rename')" :resource="oldName" :back="handleClose" />
         </template>
         <el-row>
             <el-col :span="22" :offset="1">
@@ -47,7 +47,7 @@ interface RenameProps {
 
 const fileForm = ref<FormInstance>();
 const loading = ref(false);
-let open = ref(false);
+const open = ref(false);
 const oldName = ref('');
 
 const addForm = reactive({