feat: 完成镜像构建功能

frontend/src/api/interface/container.ts

@@ -30,7 +30,9 @@ export namespace Container {
     }
     export interface ImageBuild {
         from: string;
+        name: string;
         dockerfile: string;
+        tags: Array<string>;
     }
     export interface ImagePull {
         repoID: number;

frontend/src/api/interface/file.ts

@@ -108,4 +108,8 @@ export namespace File {
     export interface DirSizeRes {
         size: number;
     }
+
+    export interface FilePath {
+        path: string;
+    }
 }

frontend/src/api/modules/container.ts

@@ -23,7 +23,7 @@ export const getImagePage = (params: ReqPage) => {
     return http.post<ResPage<Container.ImageInfo>>(`/containers/image/search`, params);
 };
 export const imageBuild = (params: Container.ImageBuild) => {
-    return http.post(`/containers/image/build`, params);
+    return http.post<string>(`/containers/image/build`, params);
 };
 export const imagePull = (params: Container.ImagePull) => {
     return http.post(`/containers/image/pull`, params);

frontend/src/api/modules/files.ts

@@ -22,6 +22,10 @@ export const ChangeFileMode = (form: File.FileCreate) => {
     return http.post<File.File>('files/mode', form);
 };
 
+export const LoadFile = (form: File.FilePath) => {
+    return http.post<string>('files/loadfile', form);
+};
+
 export const CompressFile = (form: File.FileCompress) => {
     return http.post<File.File>('files/compress', form);
 };

frontend/src/views/container/image/build/index.vue

@@ -1,21 +1,30 @@
 <template>
-    <el-dialog v-model="buildVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="50%">
+    <el-dialog
+        v-model="buildVisiable"
+        :destroy-on-close="true"
+        @close="onCloseLog"
+        :close-on-click-modal="false"
+        width="50%"
+    >
         <template #header>
             <div class="card-header">
                 <span>{{ $t('container.importImage') }}</span>
             </div>
         </template>
         <el-form ref="formRef" :model="form" label-width="80px">
+            <el-form-item :label="$t('container.name')" :rules="Rules.requiredInput" prop="name">
+                <el-input v-model="form.name" clearable />
+            </el-form-item>
             <el-form-item label="Dockerfile" :rules="Rules.requiredSelect" prop="from">
                 <el-radio-group v-model="form.from">
                     <el-radio label="edit">{{ $t('container.edit') }}</el-radio>
                     <el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
                 </el-radio-group>
             </el-form-item>
-            <el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
+            <el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput" prop="dockerfile">
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="form.dockerfile" />
             </el-form-item>
-            <el-form-item v-else :rules="Rules.requiredInput">
+            <el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
                 <el-input clearable v-model="form.dockerfile">
                     <template #append>
                         <FileList @choose="loadBuildDir" :dir="true"></FileList>
@@ -23,9 +32,27 @@
                 </el-input>
             </el-form-item>
             <el-form-item :label="$t('container.tag')">
-                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.tag" />
+                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.tagStr" />
             </el-form-item>
         </el-form>
+
+        <codemirror
+            v-if="logVisiable"
+            :autofocus="true"
+            placeholder="Wait for build output..."
+            :indent-with-tab="true"
+            :tabSize="4"
+            style="max-height: 500px"
+            :lineWrapping="true"
+            :matchBrackets="true"
+            theme="cobalt"
+            :styleActiveLine="true"
+            :extensions="extensions"
+            v-model="logInfo"
+            :readOnly="true"
+            ref="buildLogRef"
+        />
+
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="onSubmit(formRef)">{{ $t('container.import') }}</el-button>
@@ -37,23 +64,36 @@
 
 <script lang="ts" setup>
 import FileList from '@/components/file-list/index.vue';
+import { Codemirror } from 'vue-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
 import { reactive, ref } from 'vue';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { imageBuild } from '@/api/modules/container';
+import { LoadFile } from '@/api/modules/files';
+
+const logVisiable = ref<boolean>(false);
+const logInfo = ref();
+const buildLogRef = ref();
+const extensions = [javascript(), oneDark];
+let timer: NodeJS.Timer | null = null;
 
 const buildVisiable = ref(false);
 const form = reactive({
     from: 'path',
     dockerfile: '',
-    tag: '',
+    name: '',
+    tagStr: '',
+    tags: [] as Array<string>,
 });
 const acceptParams = async () => {
     buildVisiable.value = true;
     form.from = 'path';
     form.dockerfile = '';
-    form.tag = '';
+    form.tagStr = '';
+    form.name = '';
 };
 
 const emit = defineEmits<{ (e: 'search'): void }>();
@@ -65,17 +105,29 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        try {
-            buildVisiable.value = false;
-            await imageBuild(form);
-            emit('search');
-            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        } catch {
-            emit('search');
+        if (form.tagStr !== '') {
+            form.tags = form.tagStr.split('\n');
         }
+        const res = await imageBuild(form);
+        logVisiable.value = true;
+        loadLogs(res.data);
+        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
     });
 };
 
+const loadLogs = async (path: string) => {
+    timer = setInterval(async () => {
+        if (logVisiable.value) {
+            const res = await LoadFile({ path: path });
+            logInfo.value = res.data;
+        }
+    }, 1000 * 3);
+};
+const onCloseLog = async () => {
+    emit('search');
+    clearInterval(Number(timer));
+};
+
 const loadBuildDir = async (path: string) => {
     form.dockerfile = path;
 };

frontend/src/views/cronjob/record/index.vue

@@ -240,10 +240,11 @@ import { reactive, ref } from 'vue';
 import { Cronjob } from '@/api/interface/cronjob';
 import { loadZero } from '@/utils/util';
 import { loadBackupName } from '@/views/setting/helper';
-import { searchRecords, getRecordDetail, download } from '@/api/modules/cronjob';
+import { searchRecords, download } from '@/api/modules/cronjob';
 import { dateFromat, dateFromatForName } from '@/utils/util';
 import i18n from '@/lang';
 import { ElMessage } from 'element-plus';
+import { LoadFile } from '@/api/modules/files';
 
 interface DialogProps {
     rowData?: Cronjob.CronjobInfo;
@@ -389,7 +390,7 @@ const forDetail = async (row: Cronjob.Record) => {
     currentRecord.value = row;
 };
 const loadRecord = async (path: string) => {
-    const res = await getRecordDetail(path);
+    const res = await LoadFile({ path: path });
     currentRecordDetail.value = res.data;
 };
 function isBackup() {