phpinfo/frontend/admin/views/PhpInfo.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

import { phpInfoApi } from '../api/index.js'

const htmlContent = ref('')
const loading = ref(false)

const fetchPhpinfo = async () => {
  loading.value = true
  try {
    // 直接用axios请求，避免全局拦截器对html格式的响应处理
    const res = await phpInfoApi.getPhpInfo()
    htmlContent.value = res.data
  } catch (error) {
    ElMessage.error('获取phpinfo失败')
    htmlContent.value = '<div style="color:red;">获取phpinfo失败</div>'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchPhpinfo()
})
</script>

<template>
  <div class="phpinfo-container">
    <el-card shadow="never">
      <template #header>
        <span>PHPInfo 信息</span>
      </template>
      <div v-loading="loading" style="min-height: 300px;">
        <div v-if="htmlContent" v-html="htmlContent"></div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.phpinfo-container {
  padding: 20px;
  // 优化phpinfo表格样式
  :deep(table) {
    width: 100% !important;
    font-size: 14px;
    background: #fff;
    border-collapse: collapse;
    margin-bottom: 20px;
    color: #222;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  }
  :deep(th), :deep(td) {
    border: 1px solid #d3d4d6 !important;
    padding: 8px 12px !important;
    color: #222 !important;
    background: #fff !important;
    font-size: 14px !important;
  }
  :deep(th) {
    background: #409EFF !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
  }
  // 斑马纹
  :deep(tr:nth-child(even) td) {
    background: #f6f8fa !important;
  }
  :deep(tr:hover td) {
    background: #e6f7ff !important;
  }
  // 标题
  :deep(h1), :deep(h2) {
    font-size: 18px;
    color: #409EFF;
    margin: 10px 0 5px 0;
    font-weight: 700;
  }
  // 兼容phpinfo部分特殊样式
  :deep(.e) {
    background: #f0f4fa !important;
    color: #222 !important;
    font-weight: 500 !important;
  }
  :deep(.v) {
    background: #fff !important;
    color: #409EFF !important;
  }
  :deep(pre) {
    background: #f8f8f8 !important;
    color: #222 !important;
    border-radius: 2px;
    padding: 8px 12px;
    font-size: 13px;
  }
}
</style>