wonder
3144a50ef5
Closes #61 ## 变更内容 ### CSS 变量扩展 - 新增 --radius-sm / --radius-lg / --radius-xl 圆角变量 - 新增 --accent-end 渐变终点色（浅色/深色模式） ### 公共样式提取到 global.css - 提取 15+ 组重复样式：.page-head / .panel / .stat-row / table / .tag / .status-text / .bar-wrap / .cols-2 / .pagination / .log-stream 等 - 所有 border-radius 硬编码值改用 CSS 变量 - 新增工具类：.text-xs / .text-dim / .cols-2-equal / .panel-body.padded / .search-input / .accent-pill ### 响应式设计 - @media (max-width: 1024px)：stat-row 3 列，双栏布局单列化 - @media (max-width: 768px)：page-head 纵向排列，stat-row 2 列， 表格横向滚动，卡片网格单列化 ### 内联 style 清理 - 非动态绑定的 style="color: ..." / style="font-size: ..." / style="flex: 1" / style="padding: ..." 改为 CSS 类 ### 硬编码颜色修复 - ConfigCenter.vue: #1C2A3A/#8EC8FF 改用 CSS 变量 - Login.vue: #1C8F69 改用 --accent-end 变量 ### 页面组件 scoped 样式精简 - 13 个页面组件删除已提取的重复样式，净减少 1070 行
39 lines
883 B
Vue
39 lines
883 B
Vue
<template>
|
||
<div>
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>子系统导航</h1>
|
||
<p>统一 LDAP 账号，点击即用免二次登录（同账号同密码）</p>
|
||
</div>
|
||
</div>
|
||
<div class="ext-grid">
|
||
<SubsystemCard
|
||
v-for="system in subsystems"
|
||
:key="system.id"
|
||
:system="system"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { subsystemApi, type Subsystem } from '@/api/subsystem'
|
||
import SubsystemCard from '@/components/SubsystemCard.vue'
|
||
|
||
const subsystems = ref<Subsystem[]>([])
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const { data } = await subsystemApi.getSubsystems()
|
||
subsystems.value = data
|
||
} catch {
|
||
// 错误已由 request 拦截器统一处理
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* .page-head, .ext-grid 已在 global.css 中定义 */
|
||
</style>
|