feat: 增加文件类型

frontend/src/lang/modules/zh.ts

@@ -629,6 +629,8 @@ export default {
         uploadSuccess: '上传成功!',
         downloadProcess: '下载进度',
         downloading: '正在下载...',
+        infoDetail: '文件属性',
+        type: '类型',
     },
     setting: {
         all: '全部',

frontend/src/views/host/file-management/detail/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <el-dialog v-model="open" :title="$t('file.info')" :column="1" width="30%">
+        <el-row>
+            <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.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('commons.table.updatedAt')">
+                        {{ dateFromat(0, 0, data.modTime) }}
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-col>
+        </el-row>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { GetFileContent } from '@/api/modules/files';
+import { computeSize } from '@/utils/util';
+import { ref } from 'vue';
+import { dateFromat } from '@/utils/util';
+
+interface InfoProps {
+    path: string;
+}
+const props = ref<InfoProps>({
+    path: '',
+});
+
+let open = ref(false);
+let data = ref();
+
+const acceptParams = async (params: InfoProps): Promise<void> => {
+    props.value = params;
+    GetFileContent({ path: params.path, expand: false, page: 1, pageSize: 1 }).then((res) => {
+        data.value = res.data;
+        console.log(data.value);
+        open.value = true;
+    });
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>

frontend/src/views/host/file-management/index.vue

@@ -170,6 +170,7 @@
                 @close="closeDownload"
             ></Download>
             <Process :open="processPage.open" @close="closeProcess"></Process>
+            <Detail ref="detailRef"></Detail>
         </el-row>
     </LayoutContent>
 </template>
@@ -205,6 +206,7 @@ import Move from './move/index.vue';
 import Download from './download/index.vue';
 import { Mimetypes } from '@/global/mimetype';
 import Process from './process/index.vue';
+import Detail from './detail/index.vue';
 
 const data = ref();
 let selects = ref<any>([]);
@@ -227,6 +229,7 @@ const wgetPage = reactive({ open: false, path: '' });
 const movePage = reactive({ open: false, oldPaths: [''], type: '' });
 const downloadPage = reactive({ open: false, paths: [''], name: '' });
 const processPage = reactive({ open: false });
+const detailRef = ref();
 
 const defaultProps = {
     children: 'children',
@@ -522,12 +525,10 @@ const quickSave = (content: string) => {
     });
 };
 
-onMounted(() => {
+const openDetail = (row: File.File) => {
-    search();
+    detailRef.value.acceptParams({ path: row.path });
-});
+};
 
-//TODO button增加v-if判断
-//openDeCompress 增加是否可以解压判断
 const buttons = [
     {
         label: i18n.global.t('file.open'),
@@ -560,8 +561,13 @@ const buttons = [
     },
     {
         label: i18n.global.t('file.info'),
+        click: openDetail,
     },
 ];
+
+onMounted(() => {
+    search();
+});
 </script>
 
 <style>