feat(admin): 添加 PHPInfo 系统信息查看功能

- 新增 phpInfoApi 接口用于获取服务器 PHP 配置信息
- 创建 PhpInfo.vue 组件展示 PHP 环境详细信息
- 添加路由配置和菜单项支持 PHPInfo 模块访问
- 优化 HTML 内容显示样式适配后台管理系统界面
- 实现加载状态和错误处理提升用户体验

frontend/admin/api/index.js

@@ -0,0 +1,16 @@
+import { VITE_API_BASE_URL } from '@/utils/request'
+import axios from 'axios'
+import {useUserStore} from "@/store/user.js";
+
+const userStore = useUserStore()
+export const phpInfoApi = {
+  getPhpInfo() {
+    return axios.get(VITE_API_BASE_URL+'/admin/phpinfo', {
+        headers: {
+            Accept: 'text/html',
+            Authorization: 'Bearer ' + userStore.token
+        },
+        responseType: 'text'
+    })
+  }
+}

frontend/admin/index.js

@@ -0,0 +1,39 @@
+export default {
+    routes: {
+        path: '/phpinfo',
+        name: 'PhpinfoModule',
+        component: () => import('@/layout/index.vue'),
+        meta: {
+            title: 'PHP信息',
+            icon: 'InfoFilled',
+            permission: 'phpinfo'
+        },
+        children: [
+            {
+                path: 'info',
+                name: 'PhpinfoInfo',
+                component: () => import('./views/PhpInfo.vue'),
+                meta: {
+                    title: '系统信息',
+                    icon: 'Monitor'
+                }
+            }
+        ]
+    },
+
+    menus: [
+        {
+            path: '/phpinfo',
+            title: 'PHP信息',
+            icon: 'InfoFilled',
+            permission: 'phpinfo',
+            children: [
+                {
+                    path: '/phpinfo/info',
+                    title: '系统信息',
+                    icon: 'Monitor'
+                }
+            ]
+        }
+    ]
+}

frontend/admin/views/PhpInfo.vue

@@ -0,0 +1,101 @@
+<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>