medical-mall/pages/mall/admin/maintain/sys/info/index.uvue

<template>
  <view class="admin-page">
      <view class="admin-sections">
        <!-- 商业授权 -->
        <view class="admin-card info-section">
          <view class="section-header">
            <text class="section-title">商业授权</text>
          </view>
        <view class="table-container header-table">
          <view class="table-header">
            <view class="col col-title"><text>产品证书编号</text></view>
            <view class="col col-action"><text>操作</text></view>
          </view>
          <view class="table-body">
            <view class="table-row">
              <view class="col col-title"><text>{{ info?.auth_id || '检测中...' }}</text></view>
              <view class="col col-action">
                <text class="action-btn" @click="gotoOfficial">进入官网</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务器信息 -->
      <view class="admin-card info-section mt-24">
        <view class="section-header">
          <text class="section-title">服务器信息</text>
        </view>
        <view class="table-container header-table">
          <view class="table-header">
            <view class="col col-env"><text>环境</text></view>
            <view class="col col-req"><text>要求</text></view>
            <view class="col col-status"><text>状态</text></view>
          </view>
          <view class="table-body">
            <view class="table-row">
              <view class="col col-env"><text>服务器系统</text></view>
              <view class="col col-req"><text>类UNIX</text></view>
              <view class="col col-status"><text>{{ info?.server_os || 'Loading...' }}</text></view>
            </view>
            <view class="table-row">
              <view class="col col-env"><text>WEB环境</text></view>
              <view class="col col-req"><text>Apache/Nginx/IIS</text></view>
              <view class="col col-status"><text>{{ info?.web_server || 'Loading...' }}</text></view>
            </view>
            <view class="table-row">
              <view class="col col-env"><text>数据库引擎</text></view>
              <view class="col col-req"><text>PostgreSQL</text></view>
              <view class="col col-status"><text>{{ info?.db_engine || 'Loading...' }}</text></view>
            </view>
            <view class="table-row">
              <view class="col col-env"><text>数据库版本</text></view>
              <view class="col col-req"><text>15.0+</text></view>
              <view class="col col-status"><text>{{ info?.db_version || 'Loading...' }}</text></view>
            </view>
            <view class="table-row">
              <view class="col col-env"><text>运行环境</text></view>
              <view class="col col-req"><text>UTS Runtime</text></view>
              <view class="col col-status"><text>{{ info?.uts_runtime || 'Loading...' }}</text></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view v-if="isLoading" class="loading-overlay">
      <text>系统环境加载中...</text>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import { fetchSystemInfo, SystemInfo } from '@/services/admin/maintainService.uts'

const info = ref<SystemInfo | null>(null)
const isLoading = ref(false)

onMounted(() => {
  loadData()
})

async function loadData() {
  isLoading.value = true
  try {
    const res = await fetchSystemInfo()
    if (res != null) {
      info.value = res
    }
  } catch (e) {
    uni.showToast({ title: '获取系统信息失败', icon: 'none' })
  } finally {
    isLoading.value = false
  }
}

function gotoOfficial() {
  // #ifdef H5
  window.open('https://www.crmeb.com', '_blank')
  // #endif
  // #ifndef H5
  uni.showToast({ title: '请在浏览器中访问官网', icon: 'none' })
  // #endif
}
</script>

<style scoped lang="scss">
.admin-page {
  /* 使用 Layout 的背景和内边距 */
  min-height: auto;
}

.admin-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 24px;
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.table-container {
  width: 100%;
}

.table-header {
  display: flex;
  flex-direction: row;
  background-color: #e6f7ff;
  border-bottom: 1px solid #f0f0f0;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
}

.col {
  padding: 16px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.col-title { flex: 1; }
.col-env { flex: 1; }
.col-req { flex: 1; }
.col-status { flex: 1; font-family: monospace; }
.col-action { width: 150px; justify-content: flex-end; }

.action-btn {
  color: #1890ff;
  cursor: pointer;
}

.mt-24 {
  margin-top: 24px;
}

.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255,255,255,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
</style>