添加一个 AppConfigCard.vue 用于展示应用配置详情

src/components/card/AppConfigCard.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="config" class="app-config-container">
+    <el-card class="box-card" shadow="never">
+      <div slot="header" class="clearfix">
+        <span class="header-title">
+          <i class="el-icon-setting"></i> {{ config.appId }} 配置详情
+        </span>
+      </div>
+
+      <el-descriptions :column="2" border size="medium">
+        <el-descriptions-item label="应用环境">
+          <b class="text-highlight">{{ config.env }}</b>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="应用类型">
+          <b class="text-highlight">{{ config.appType }}</b>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="代码仓库" :span="2">
+          <el-link type="primary" :href="config.appRepo" target="_blank" icon="el-icon-link">
+            {{ config.appRepo }}
+          </el-link>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="代码分支">
+          <el-tag type="success" size="small">
+            <i class="el-icon-share"></i> {{ config.repoBranch }}
+          </el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="仓库认证">
+          <code class="auth-code">{{ config.repoAuthConfig }}</code>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="编译配置">
+          <el-tag type="warning" effect="plain">{{ config.compilerConfig }}</el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="打包配置">
+          <el-tag type="warning" effect="plain">{{ config.packerConfig }}</el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="Dockerfile" :span="2">
+          <div class="dockerfile-content">{{ formattedDockerfile }}</div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppConfigCard',
+  props: {
+    // 接收父组件传来的配置对象
+    config: {
+      type: Object,
+      default: () => null
+    }
+  },
+  computed: {
+    // 自动将 Dockerfile 的 FROM 关键词后增加换行，增强可读性
+    formattedDockerfile() {
+      if (!this.config || !this.config.dockerfile) return '';
+      const df = this.config.dockerfile;
+      // 如果发现 FROM 后面紧跟地址且没有换行，手动切分（可选）
+      return df.replace(/^(FROM)\s+/i, '$1 \n');
+    },
+    // 根据环境自动变换标签颜色
+    envTagType() {
+      const env = this.config.env?.toLowerCase();
+      if (env === 'prod' || env === 'production') return 'danger';
+      if (env === 'test') return 'warning';
+      return 'info';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-config-container {
+  margin-bottom: 20px;
+}
+.header-title {
+  font-weight: bold;
+  font-size: 16px;
+}
+.text-highlight {
+  color: #409EFF;
+}
+.auth-code {
+  color: #67C23A;
+  font-weight: bold;
+}
+
+/* Dockerfile 样式优化 */
+.dockerfile-content {
+  background-color: #282c34;
+  color: #abb2bf;
+  padding: 15px;
+  border-radius: 6px;
+  font-family: 'Fira Code', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.8;
+  word-break: break-all;
+  white-space: pre-wrap; /* 关键：保留 computed 里的 \n 换行 */
+  position: relative;
+  border: 1px solid #181a1f;
+}
+
+.dockerfile-content::before {
+  content: "DOCKERFILE";
+  display: block;
+  font-size: 10px;
+  color: #5c6370;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #3e4451;
+  letter-spacing: 1px;
+}
+</style>

src/views/devops/app/BuildDeploy.vue

@@ -461,10 +461,11 @@
       title="应用详情"
       append-to-body
       :visible.sync="showAppDialog"
-      width="100%"
+      width="70%"
       center
     >
       <template>
+        <app-config-card v-if="appConfigDetail !== null" :config="appConfigDetail" />
       </template>
     </el-dialog>
     <el-dialog
@@ -610,9 +611,10 @@
 </template>
 
 <script>
+import AppConfigCard from '@/components/card/AppConfigCard.vue';
 import {
   buildApp,
-  cancelBuildTask, deleteBuildLog, deployApp, getBuildConfigSnapshot, getBuildConsumed,
+  cancelBuildTask, deleteBuildLog, deployApp, getAppConfig, getBuildConfigSnapshot, getBuildConsumed,
   getBuildDeployList, getBuildLogFile,
   getBuildLogList, getBuildPackageUrl, getBuildResult,
   getBuildTaskList,
@@ -623,6 +625,9 @@ import {
 
 export default {
   name: 'BuildDeploy',
+  components: {
+    AppConfigCard
+  },
   data() {
     return {
       envList: [],
@@ -653,7 +658,10 @@ export default {
       pageSize1: 10,
       totalSize1: 0,
       dataList1: [],
+      // **********************************************************************
       showAppDialog: false,
+      appConfigDetail: null,
+      // **********************************************************************
       showResultDialog: false,
       buildResult: null,
       showSnapshotDialog: false,
@@ -783,10 +791,18 @@ export default {
       })
     },
     handleAppDetail(row) {
-      this.$message.info('get ' + row.appId + ' detail')
       const queryInfo = {}
       queryInfo.appId = row.appId
-      this.showAppDialog = true
+      getAppConfig(row.appId).then(resp => {
+        if (resp.code === 0) {
+          this.appConfigDetail = resp.data
+          this.showAppDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
     },
     handleBuildResult(row) {
       const queryInfo = {}