feat: 前端样式修改
This commit is contained in:
tbphp
@@ -1,58 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import BaseInfoCard from "@/components/BaseInfoCard.vue";
|
||||
import LineChart from "@/components/LineChart.vue";
|
||||
import { NSpace } from "naive-ui";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- <div class="dashboard-header">
|
||||
<h2 class="dashboard-title">仪表盘</h2>
|
||||
<p class="dashboard-subtitle">系统概览与实时监控</p>
|
||||
</div> -->
|
||||
|
||||
<div class="dashboard-content">
|
||||
<base-info-card />
|
||||
<line-chart class="dashboard-chart" />
|
||||
</div>
|
||||
<n-space vertical size="large">
|
||||
<n-space vertical size="large">
|
||||
<base-info-card />
|
||||
<line-chart class="dashboard-chart" />
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
.dashboard-header-card {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
animation: fadeInUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
background: var(--primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dashboard-chart {
|
||||
animation: fadeInUp 0.2s ease-out 0.2s both;
|
||||
}
|
||||
@@ -76,9 +58,5 @@ import LineChart from "@/components/LineChart.vue";
|
||||
.dashboard-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,8 +22,8 @@ async function loadGroups() {
|
||||
if (groups.value.length > 0 && !selectedGroup.value) {
|
||||
selectedGroup.value = groups.value[0];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载分组失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
window.$message.error("加载分组失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
|
||||
@@ -1,58 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import { NCard, NH3, NSpace, NTag, NText } from "naive-ui";
|
||||
// 这里可以添加日志管理相关的逻辑
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="logs-container">
|
||||
<div class="page-header">
|
||||
<h2 class="page-title">系统日志</h2>
|
||||
<p class="page-subtitle">查看系统运行日志和操作记录</p>
|
||||
</div>
|
||||
<n-space vertical size="large">
|
||||
<!-- 占位符内容 -->
|
||||
<div class="content-placeholder">
|
||||
<n-card :bordered="false" class="placeholder-card">
|
||||
<n-space vertical align="center" size="large">
|
||||
<div class="placeholder-icon">📋</div>
|
||||
<n-h3 class="placeholder-title">日志管理功能</n-h3>
|
||||
<n-text depth="2" class="placeholder-description">
|
||||
此功能正在开发中，将提供完整的系统日志查看和管理功能，包括实时日志、历史记录和日志分析。
|
||||
</n-text>
|
||||
|
||||
<div class="content-placeholder">
|
||||
<div class="placeholder-card modern-card">
|
||||
<div class="placeholder-icon">📋</div>
|
||||
<h3 class="placeholder-title">日志管理功能</h3>
|
||||
<p class="placeholder-description">
|
||||
此功能正在开发中，将提供完整的系统日志查看和管理功能，包括实时日志、历史记录和日志分析。
|
||||
</p>
|
||||
<div class="placeholder-features">
|
||||
<div class="feature-item">📝 实时日志流</div>
|
||||
<div class="feature-item">🔍 日志搜索过滤</div>
|
||||
<div class="feature-item">📈 错误统计分析</div>
|
||||
<div class="feature-item">💾 日志导出功能</div>
|
||||
</div>
|
||||
<n-space wrap size="medium" class="placeholder-features">
|
||||
<n-tag type="info" size="medium">📝 实时日志流</n-tag>
|
||||
<n-tag type="info" size="medium">🔍 日志搜索过滤</n-tag>
|
||||
<n-tag type="info" size="medium">📈 错误统计分析</n-tag>
|
||||
<n-tag type="info" size="medium">💾 日志导出功能</n-tag>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</div>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logs-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
.page-header-card {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
animation: fadeInUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
background: var(--primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -61,6 +54,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
animation: fadeInUp 0.2s ease-out 0.1s both;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
@@ -68,41 +62,42 @@
|
||||
max-width: 500px;
|
||||
padding: 48px 32px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin: 0 0 16px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.placeholder-description {
|
||||
font-size: 1rem;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 32px 0;
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.placeholder-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 12px 16px;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: var(--border-radius-md);
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -111,8 +106,12 @@
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.placeholder-features {
|
||||
grid-template-columns: 1fr;
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { settingsApi, type SettingCategory } from "@/api/settings";
|
||||
import { NTooltip } from "naive-ui";
|
||||
import { NButton, NCard, NForm, NFormItem, NInput, NInputNumber, NTooltip } from "naive-ui";
|
||||
import { ref } from "vue";
|
||||
|
||||
const settingList = ref<SettingCategory[]>([]);
|
||||
@@ -90,7 +90,7 @@ async function handleSubmit() {
|
||||
|
||||
<n-input-number
|
||||
v-if="item.type === 'int'"
|
||||
v-model:value="form[item.key]"
|
||||
v-model:value="form[item.key] as number"
|
||||
:min="item.min_value! >= 0 ? item.min_value : undefined"
|
||||
class="modern-input setting-input"
|
||||
placeholder="请输入数值"
|
||||
@@ -98,7 +98,7 @@ async function handleSubmit() {
|
||||
/>
|
||||
<n-input
|
||||
v-else
|
||||
v-model:value="form[item.key]"
|
||||
v-model:value="form[item.key] as string"
|
||||
class="modern-input setting-input"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
|
||||
Reference in New Issue
Block a user