A:提交基础的页面布局；划分顶部标题栏组件
U:修复主题修改样式部分样式无法调整的BUG
This commit is contained in:
jimmy committed
1 parent
e55843eae2
commit
329e4f066a
16 files changed
+1993
-1560
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -4,7 +4,7 @@ import PathUtils from '@/utils/pathUtils'
|
||||
import StringUtils from '@/utils/stringUtils'
|
||||
import type { subRoute, subRouteList } from '@/types/devIndex'
|
||||
import app from '@/constants/app'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { NButton } from 'naive-ui'
|
||||
import { NConfigProvider, NGlobalStyle } from 'naive-ui'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
@@ -13,12 +13,10 @@ const router = useRouter()
|
||||
// 是否展示生成路由
|
||||
const isShowGenerateRouter = ref(false)
|
||||
|
||||
// 添加拖拽相关状态
|
||||
const isDragging = ref(false)
|
||||
const navPosition = ref({ x: 10, y: 10 }) // 默认位置
|
||||
const dragOffset = ref({ x: 0, y: 0 })
|
||||
const navRef = ref(null) // 用于获取导航栏元素
|
||||
|
||||
console.log('App.Vue')
|
||||
|
||||
// region 获取路由列表
|
||||
// 自动获取路由列表
|
||||
const routes = {
|
||||
@@ -73,7 +71,19 @@ if (nodeEnv !== undefined && !StringUtils.isBlank(nodeEnv) && nodeEnv === app.DE
|
||||
|
||||
// 主题样式
|
||||
const themeStore = useThemeStore()
|
||||
const theme = themeStore.theme
|
||||
// 提供主题给子组件
|
||||
provide('theme', themeStore.theme)
|
||||
// 初始化主题
|
||||
onMounted(() => {
|
||||
themeStore.initTheme()
|
||||
// 标记页面已准备好，启用过渡动画
|
||||
document.body.classList.add('theme-ready')
|
||||
})
|
||||
// region 拖拽 tab
|
||||
// 添加拖拽相关状态
|
||||
const isDragging = ref(false)
|
||||
const navPosition = ref({ x: 10, y: 10 }) // 默认位置
|
||||
const dragOffset = ref({ x: 0, y: 0 })
|
||||
|
||||
// 拖拽相关函数
|
||||
function startDrag(event) {
|
||||
@@ -108,6 +118,8 @@ function endDrag() {
|
||||
isDragging.value = false
|
||||
}
|
||||
|
||||
// endregion
|
||||
|
||||
// 添加全局事件监听
|
||||
onMounted(() => {
|
||||
window.addEventListener('mousemove', onDrag)
|
||||
@@ -122,7 +134,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider class="app-wrapper" :theme="theme">
|
||||
<n-config-provider
|
||||
class="app-wrapper"
|
||||
:theme-overrides="themeStore.themeOverrides"
|
||||
:theme="themeStore.theme"
|
||||
>
|
||||
<n-global-style />
|
||||
|
||||
<!-- 可拖动的导航栏 -->
|
||||
|
||||
@@ -1,5 +1,29 @@
|
||||
@import './base.css';
|
||||
|
||||
/* 在你的全局 CSS 文件中 */
|
||||
:root {
|
||||
--bg-primary: #ffffff;
|
||||
--text-primary: #000000;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--bg-primary: #0c0c0c;
|
||||
--text-primary: #ffffff;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
|
||||
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-left">
|
||||
<div class="app-title">
|
||||
<div class="app-icon">
|
||||
<span>N</span>
|
||||
</div>
|
||||
<span class="app-name">NetVisor</span>
|
||||
</div>
|
||||
|
||||
<div class="view-switcher">
|
||||
<n-tabs
|
||||
type="segment"
|
||||
class="n-tab-group-set"
|
||||
animated
|
||||
:value="activeTab"
|
||||
@update:value="handleTabChange"
|
||||
>
|
||||
<n-tab
|
||||
class="n-tab-item-set"
|
||||
v-for="tab in tabConfig"
|
||||
:key="tab.name"
|
||||
:name="tab.name"
|
||||
:tab="tab.label"
|
||||
/>
|
||||
</n-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-bar-right">
|
||||
<div class="status-indicator">
|
||||
<div class="status-dot active"></div>
|
||||
<span>实时监控中</span>
|
||||
</div>
|
||||
|
||||
<n-button circle size="small" quaternary @click="openSettings">
|
||||
<template #icon>
|
||||
<n-icon :component="SettingsOutline" />
|
||||
</template>
|
||||
</n-button>
|
||||
|
||||
<n-button circle size="small" quaternary @click="toggleDarkMode">
|
||||
<template #icon>
|
||||
<n-icon :component="isDark ? SunnyOutline : MoonOutline" />
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NButton, NIcon, NTabs, NTab } from 'naive-ui'
|
||||
import { SettingsOutline, MoonOutline, SunnyOutline } from '@vicons/ionicons5'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
|
||||
// region 路由的激活和绑定
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// Tab配置
|
||||
const tabConfig = [
|
||||
{ name: 'monitor', label: '实时监控', path: '/monitor' },
|
||||
{ name: 'firewall', label: '防火墙', path: '/firewall' },
|
||||
{ name: 'analyse', label: '分析', path: '/analyse' },
|
||||
]
|
||||
|
||||
// 根据当前路由设置激活的Tab
|
||||
const activeTab = ref(route.name || 'monitor')
|
||||
|
||||
// 监听路由变化，同步Tab状态
|
||||
watch(
|
||||
() => route.name,
|
||||
(newRouteName) => {
|
||||
if (newRouteName) {
|
||||
activeTab.value = newRouteName
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// 处理Tab切换
|
||||
const handleTabChange = (tabName: string) => {
|
||||
activeTab.value = tabName
|
||||
router.push({ name: tabName })
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region 黑暗模式
|
||||
const themeStore = useThemeStore()
|
||||
|
||||
const isDark = computed(() => themeStore.isDark)
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
themeStore.toggleTheme()
|
||||
console.log('切换暗色模式:', isDark.value)
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region 打开设置
|
||||
const openSettings = () => {
|
||||
console.log('打开设置')
|
||||
}
|
||||
// endregion
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义 Naive UI Tabs 组件的主题样式 */
|
||||
.view-switcher {
|
||||
--n-tab-text-color: var(--text-quaternary);
|
||||
--n-tab-text-color-active: var(--text-primary);
|
||||
--n-tab-text-color-hover: var(--text-secondary);
|
||||
--n-tab-color-segment: var(--bg-card);
|
||||
--n-tab-border-color: var(--border-tertiary);
|
||||
--n-bar-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* 强制覆盖 n-tabs 的样式 */
|
||||
.n-tab-group-set {
|
||||
/* 段落式 tabs 的背景色 */
|
||||
|
||||
:deep(.n-tabs-tab-wrapper) {
|
||||
background-color: var(--bg-card) !important;
|
||||
border-color: var(--border-tertiary) !important;
|
||||
}
|
||||
|
||||
/* tab 项的文字颜色 */
|
||||
|
||||
:deep(.n-tabs-tab) {
|
||||
color: var(--text-quaternary) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
&.n-tabs-tab--active {
|
||||
color: var(--text-primary) !important;
|
||||
background-color: var(--bg-overlay) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 段落式 tabs 的活动指示器 */
|
||||
|
||||
:deep(.n-tabs-tab-pad) {
|
||||
background-color: var(--bg-overlay) !important;
|
||||
border-color: var(--border-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保主题切换时的过渡效果 */
|
||||
.view-switcher * {
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.title-bar {
|
||||
height: 60px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
background: var(--bg-overlay);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.title-bar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* tab 栏样式微调 */
|
||||
.n-tab-group-set {
|
||||
width: 30vw;
|
||||
min-width: 270px;
|
||||
}
|
||||
|
||||
/* 添加过渡动画，减少闪烁 */
|
||||
.view-switcher {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, #1d4ed8 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.app-icon span {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.title-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-quaternary);
|
||||
padding: 6px 12px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-success);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.title-bar {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.title-bar-left {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-indicator span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -27,7 +27,7 @@ const app = {
|
||||
/**
|
||||
* 是否展示生成路由
|
||||
*/
|
||||
IS_SHOW_GENERATE_ROUTER: true
|
||||
IS_SHOW_GENERATE_ROUTER: false
|
||||
}
|
||||
|
||||
export default app
|
||||
@@ -9,18 +9,25 @@ import CSharpBridgeV2 from '@/correspond/CSharpBridgeV2'
|
||||
import websocketPlugin from '@/plugins/websocketPlugin'
|
||||
import { useWebSocketStore } from '@/stores/websocketStore'
|
||||
import { createNaiveUI } from './naive'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
app.use(websocketPlugin)
|
||||
|
||||
|
||||
// 使用 主题 支持
|
||||
app.use(createNaiveUI())
|
||||
|
||||
// 这行代码会触发 store 的初始化，从而立即应用主题
|
||||
useThemeStore()
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
// 注册 C# 函数
|
||||
window.externalFunctions = {}
|
||||
|
||||
|
||||
@@ -10,6 +10,9 @@ import StringUtils from '@/utils/stringUtils'
|
||||
import PathUtils from '@/utils/pathUtils'
|
||||
import NotFound from '@/views/NotFoundView.vue'
|
||||
import AboutView from '@/views/AboutView.vue'
|
||||
import FirewallView from '@/views/FirewallView.vue'
|
||||
import AnalyseView from '@/views/AnalyseView.vue'
|
||||
import MonitorView from '@/views/MonitorView.vue'
|
||||
|
||||
// 导入所有 .vue 文件
|
||||
const routes = import.meta.glob('@/views/dev/**/*.vue')
|
||||
@@ -43,7 +46,7 @@ const router = createRouter({
|
||||
// component: HomeView,
|
||||
// children: children,
|
||||
// 重定向到主页
|
||||
redirect: '/home',
|
||||
redirect: '/monitor',
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
@@ -56,6 +59,24 @@ const router = createRouter({
|
||||
},
|
||||
],
|
||||
},
|
||||
// 实时监控
|
||||
{
|
||||
path: '/monitor',
|
||||
name: 'monitor',
|
||||
component: MonitorView,
|
||||
},
|
||||
// 防火墙
|
||||
{
|
||||
path: '/firewall',
|
||||
name: 'firewall',
|
||||
component: FirewallView,
|
||||
},
|
||||
// 网络分析
|
||||
{
|
||||
path: '/analyse',
|
||||
name: 'analyse',
|
||||
component: AnalyseView,
|
||||
},
|
||||
|
||||
{
|
||||
path: '/dev',
|
||||
|
||||
@@ -1,30 +1,194 @@
|
||||
// stores/theme.ts
|
||||
// stores/theme.ts - 完善的主题存储
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { darkTheme, lightTheme } from 'naive-ui'
|
||||
import type { GlobalTheme, GlobalThemeOverrides } from 'naive-ui'
|
||||
|
||||
export const useThemeStore = defineStore('theme', () => {
|
||||
// 初始读取系统设置或本地缓存
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
const saved = localStorage.getItem('theme')
|
||||
const isDark = ref(saved ? saved === 'dark' : prefersDark.matches)
|
||||
// 主题状态
|
||||
const isDark = ref(false)
|
||||
|
||||
// 当前 Naive UI 的主题对象
|
||||
const theme = computed(() => (isDark.value ? darkTheme : lightTheme))
|
||||
// 初始化主题（从本地存储读取）
|
||||
const initTheme = () => {
|
||||
const savedTheme = localStorage.getItem('theme')
|
||||
isDark.value = savedTheme === 'dark'
|
||||
|
||||
// 切换主题
|
||||
function toggleTheme() {
|
||||
isDark.value = !isDark.value
|
||||
// 同步到 HTML 元素
|
||||
if (isDark.value) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
|
||||
// 自动保存主题状态
|
||||
watch(isDark, (val) => {
|
||||
localStorage.setItem('theme', val ? 'dark' : 'light')
|
||||
// 切换主题
|
||||
const toggleTheme = () => {
|
||||
isDark.value = !isDark.value
|
||||
localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
|
||||
|
||||
// 同步到 HTML 元素
|
||||
if (isDark.value) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
|
||||
// Naive UI 主题
|
||||
const theme = computed<GlobalTheme | null>(() => {
|
||||
return isDark.value ? darkTheme : null
|
||||
})
|
||||
|
||||
// 主题覆盖配置
|
||||
const themeOverrides = computed<GlobalThemeOverrides>(() => {
|
||||
if (isDark.value) {
|
||||
// 暗色主题配置
|
||||
return {
|
||||
common: {
|
||||
primaryColor: '#3b82f6',
|
||||
primaryColorHover: '#60a5fa',
|
||||
primaryColorPressed: '#2563eb',
|
||||
primaryColorSuppl: '#1d4ed8',
|
||||
|
||||
infoColor: '#06b6d4',
|
||||
infoColorHover: '#22d3ee',
|
||||
infoColorPressed: '#0891b2',
|
||||
|
||||
successColor: '#22c55e',
|
||||
successColorHover: '#4ade80',
|
||||
successColorPressed: '#16a34a',
|
||||
|
||||
warningColor: '#f59e0b',
|
||||
warningColorHover: '#fbbf24',
|
||||
warningColorPressed: '#d97706',
|
||||
|
||||
errorColor: '#ef4444',
|
||||
errorColorHover: '#f87171',
|
||||
errorColorPressed: '#dc2626',
|
||||
|
||||
textColorBase: '#f8fafc',
|
||||
textColor1: '#f1f5f9',
|
||||
textColor2: '#e2e8f0',
|
||||
textColor3: '#cbd5e1',
|
||||
|
||||
dividerColor: '#334155',
|
||||
borderColor: '#334155',
|
||||
|
||||
popoverColor: '#1e293b',
|
||||
cardColor: '#1e293b',
|
||||
modalColor: '#1e293b',
|
||||
bodyColor: '#0f172a',
|
||||
|
||||
tableColor: '#1e293b',
|
||||
tableColorHover: 'rgba(59, 130, 246, 0.1)',
|
||||
tableColorStriped: '#334155',
|
||||
},
|
||||
|
||||
Tabs: {
|
||||
colorSegment: 'rgba(51, 65, 85, 0.5)',
|
||||
tabTextColorSegment: '#cbd5e1',
|
||||
tabTextColorActiveSegment: '#f8fafc',
|
||||
tabTextColorHoverSegment: '#f1f5f9',
|
||||
tabColorSegment: 'rgba(15, 23, 42, 0.95)',
|
||||
tabBorderColor: '#334155',
|
||||
barColor: '#3b82f6',
|
||||
},
|
||||
|
||||
Button: {
|
||||
textColorGhost: '#cbd5e1',
|
||||
textColorGhostHover: '#f1f5f9',
|
||||
textColorGhostPressed: '#e2e8f0',
|
||||
},
|
||||
|
||||
Input: {
|
||||
color: 'rgba(51, 65, 85, 0.5)',
|
||||
colorFocus: 'rgba(51, 65, 85, 0.8)',
|
||||
textColor: '#f1f5f9',
|
||||
caretColor: '#3b82f6',
|
||||
border: '1px solid #334155',
|
||||
borderHover: '1px solid #475569',
|
||||
borderFocus: '1px solid #3b82f6',
|
||||
placeholderColor: '#64748b',
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 亮色主题配置
|
||||
return {
|
||||
common: {
|
||||
primaryColor: '#3b82f6',
|
||||
primaryColorHover: '#2563eb',
|
||||
primaryColorPressed: '#1d4ed8',
|
||||
primaryColorSuppl: '#60a5fa',
|
||||
|
||||
infoColor: '#06b6d4',
|
||||
infoColorHover: '#0891b2',
|
||||
infoColorPressed: '#0e7490',
|
||||
|
||||
successColor: '#22c55e',
|
||||
successColorHover: '#16a34a',
|
||||
successColorPressed: '#15803d',
|
||||
|
||||
warningColor: '#f59e0b',
|
||||
warningColorHover: '#d97706',
|
||||
warningColorPressed: '#b45309',
|
||||
|
||||
errorColor: '#ef4444',
|
||||
errorColorHover: '#dc2626',
|
||||
errorColorPressed: '#b91c1c',
|
||||
|
||||
textColorBase: '#0f172a',
|
||||
textColor1: '#1e293b',
|
||||
textColor2: '#334155',
|
||||
textColor3: '#475569',
|
||||
|
||||
dividerColor: '#e2e8f0',
|
||||
borderColor: '#e2e8f0',
|
||||
|
||||
popoverColor: '#ffffff',
|
||||
cardColor: '#ffffff',
|
||||
modalColor: '#ffffff',
|
||||
bodyColor: '#f8fafc',
|
||||
|
||||
tableColor: '#ffffff',
|
||||
tableColorHover: 'rgba(59, 130, 246, 0.08)',
|
||||
tableColorStriped: '#f8fafc',
|
||||
},
|
||||
|
||||
Tabs: {
|
||||
colorSegment: 'rgba(241, 245, 249, 0.8)',
|
||||
tabTextColorSegment: '#475569',
|
||||
tabTextColorActiveSegment: '#0f172a',
|
||||
tabTextColorHoverSegment: '#1e293b',
|
||||
tabColorSegment: '#ffffff',
|
||||
tabBorderColor: '#e2e8f0',
|
||||
barColor: '#3b82f6',
|
||||
},
|
||||
|
||||
Button: {
|
||||
textColorGhost: '#475569',
|
||||
textColorGhostHover: '#1e293b',
|
||||
textColorGhostPressed: '#334155',
|
||||
},
|
||||
|
||||
Input: {
|
||||
color: 'rgba(241, 245, 249, 0.8)',
|
||||
colorFocus: '#ffffff',
|
||||
textColor: '#1e293b',
|
||||
caretColor: '#3b82f6',
|
||||
border: '1px solid #e2e8f0',
|
||||
borderHover: '1px solid #cbd5e1',
|
||||
borderFocus: '1px solid #3b82f6',
|
||||
placeholderColor: '#94a3b8',
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
isDark,
|
||||
theme,
|
||||
toggleTheme,
|
||||
themeOverrides,
|
||||
initTheme,
|
||||
toggleTheme
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>网络分析</h1>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>防火墙</h1>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,1536 +1,3 @@
|
||||
<template>
|
||||
<div ref="appContainer" class="app-container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-left">
|
||||
<div class="app-title">
|
||||
<div class="app-icon">
|
||||
<span>N</span>
|
||||
</div>
|
||||
<span class="app-name">NetGuard</span>
|
||||
</div>
|
||||
|
||||
<div class="view-switcher">
|
||||
<n-radio-group v-model:value="currentView" size="small">
|
||||
<n-radio-button v-for="option in viewOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-bar-right">
|
||||
<div class="status-indicator">
|
||||
<div class="status-dot active"></div>
|
||||
<span>实时监控中</span>
|
||||
</div>
|
||||
|
||||
<n-button circle size="small" quaternary @click="openSettings">
|
||||
<template #icon>
|
||||
<n-icon :component="SettingsOutline" />
|
||||
<h1>HomeView</h1>
|
||||
</template>
|
||||
</n-button>
|
||||
|
||||
<n-button circle size="small" quaternary @click="toggleDarkMode">
|
||||
<template #icon>
|
||||
<n-icon :component="isDark ? SunnyOutline : MoonOutline" />
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 - 可拖拽布局 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧边栏 -->
|
||||
<div class="sidebar" :style="{ width: sidebarWidth + 'px' }">
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-header">
|
||||
<h3 class="sidebar-title">系统概览</h3>
|
||||
<div class="sidebar-badge">{{ mockData.processCount }}</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🔗</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ mockData.activeConnections }}</div>
|
||||
<div class="stat-label">活跃连接</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">⚡</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ mockData.networkSpeed }}</div>
|
||||
<div class="stat-label">网络速度</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🛡️</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ mockData.ruleCount }}</div>
|
||||
<div class="stat-label">防护规则</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h4 class="section-title">快速操作</h4>
|
||||
<div class="quick-actions">
|
||||
<div class="action-item">扫描威胁</div>
|
||||
<div class="action-item">更新规则</div>
|
||||
<div class="action-item">导出日志</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧分割线 -->
|
||||
<div class="resize-handle-vertical" @mousedown="startResize('sidebar', $event)">
|
||||
<div class="resize-handle-hover"></div>
|
||||
</div>
|
||||
|
||||
<!-- 中间主视图区域 -->
|
||||
<div class="main-view">
|
||||
<!-- 中间顶部 - 搜索和标题 -->
|
||||
<div class="main-header" :style="{ height: mainHeaderHeight + 'px' }">
|
||||
<div class="header-content">
|
||||
<div class="header-info">
|
||||
<h2 class="main-header-title">网络连接监控</h2>
|
||||
<p class="main-header-subtitle">实时监控系统网络活动</p>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="search-area">
|
||||
<n-input
|
||||
v-model:value="searchQuery"
|
||||
placeholder="搜索连接、域名或IP..."
|
||||
size="medium"
|
||||
round
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon :component="SearchOutline" />
|
||||
</template>
|
||||
</n-input>
|
||||
</div>
|
||||
|
||||
<div class="filter-buttons">
|
||||
<n-button size="small" type="primary" ghost>过滤</n-button>
|
||||
<n-button size="small" ghost>刷新</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间主体 - 连接列表表格 -->
|
||||
<div class="connections-area">
|
||||
<div class="connections-header">
|
||||
<h3 class="connections-title">
|
||||
<span class="title-icon">📊</span>
|
||||
连接列表
|
||||
<span class="connection-count">{{ mockData.activeConnections }} 个活跃连接</span>
|
||||
</h3>
|
||||
<div class="connections-controls">
|
||||
<n-button size="small" type="info" ghost>暂停监控</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connections-content">
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
<div class="table-column">进程</div>
|
||||
<div class="table-column">本地地址</div>
|
||||
<div class="table-column">远程地址</div>
|
||||
<div class="table-column">状态</div>
|
||||
<div class="table-column">流量</div>
|
||||
</div>
|
||||
|
||||
<div class="table-body">
|
||||
<div
|
||||
v-for="i in 15"
|
||||
:key="i"
|
||||
class="table-row"
|
||||
:class="{ 'row-selected': i === 3 }"
|
||||
>
|
||||
<div class="table-cell">
|
||||
<div class="process-info">
|
||||
<div class="process-icon">🌐</div>
|
||||
<span>chrome.exe</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cell">192.168.1.{{ 100 + i }}</div>
|
||||
<div class="table-cell">
|
||||
{{ ['google.com', 'github.com', 'cloudflare.com'][i % 3] }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
<span class="status-badge established">已建立</span>
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
<span class="traffic-info">{{ (Math.random() * 1000).toFixed(0) }} KB/s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间轴分割线 -->
|
||||
<div class="resize-handle-horizontal" @mousedown="startResize('timeline', $event)">
|
||||
<div class="resize-handle-hover-h"></div>
|
||||
</div>
|
||||
|
||||
<!-- 中间底部 - 时间轴事件流 -->
|
||||
<div class="timeline-area" :style="{ height: timelineHeight + 'px' }">
|
||||
<div class="timeline-header">
|
||||
<h3 class="timeline-title">
|
||||
<span class="title-icon">📈</span>
|
||||
实时事件流
|
||||
</h3>
|
||||
<div class="timeline-controls">
|
||||
<n-button size="small" type="warning" ghost>暂停</n-button>
|
||||
<n-button size="small" ghost>清空</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-content">
|
||||
<div class="events-container">
|
||||
<div
|
||||
v-for="i in 12"
|
||||
:key="i"
|
||||
class="event-item"
|
||||
:class="['event-' + ['info', 'warning', 'success'][i % 3]]"
|
||||
>
|
||||
<div class="event-time">{{ new Date().toLocaleTimeString() }}</div>
|
||||
<div class="event-content">
|
||||
<div class="event-type">{{ ['连接建立', '数据传输', '连接关闭'][i % 3] }}</div>
|
||||
<div class="event-desc">chrome.exe → google.com:443</div>
|
||||
</div>
|
||||
<div class="event-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧分割线 -->
|
||||
<div class="resize-handle-vertical" @mousedown="startResize('inspector', $event)">
|
||||
<div class="resize-handle-hover"></div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧检查器面板 -->
|
||||
<div class="inspector" :style="{ width: inspectorWidth + 'px' }">
|
||||
<div class="inspector-content">
|
||||
<div class="inspector-header">
|
||||
<h3 class="inspector-title">
|
||||
<span class="title-icon">🔍</span>
|
||||
连接详情
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="inspector-body">
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">基本信息</h4>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">进程</span>
|
||||
<span class="detail-value">chrome.exe</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">PID</span>
|
||||
<span class="detail-value">12345</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">协议</span>
|
||||
<span class="detail-value">TCP</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">状态</span>
|
||||
<span class="detail-value status-established">已建立</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">网络信息</h4>
|
||||
<div class="network-info">
|
||||
<div class="network-item">
|
||||
<div class="network-label">本地地址</div>
|
||||
<div class="network-value">192.168.1.100:54321</div>
|
||||
</div>
|
||||
<div class="network-item">
|
||||
<div class="network-label">远程地址</div>
|
||||
<div class="network-value">142.250.191.14:443</div>
|
||||
</div>
|
||||
<div class="network-item">
|
||||
<div class="network-label">域名</div>
|
||||
<div class="network-value">google.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">流量统计</h4>
|
||||
<div class="traffic-stats">
|
||||
<div class="traffic-item">
|
||||
<span class="traffic-label">上传</span>
|
||||
<span class="traffic-value upload">1.2 MB</span>
|
||||
</div>
|
||||
<div class="traffic-item">
|
||||
<span class="traffic-label">下载</span>
|
||||
<span class="traffic-value download">5.8 MB</span>
|
||||
</div>
|
||||
<div class="traffic-item">
|
||||
<span class="traffic-label">总计</span>
|
||||
<span class="traffic-value total">7.0 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="traffic-chart">
|
||||
<div class="chart-bars">
|
||||
<div
|
||||
v-for="i in 20"
|
||||
:key="i"
|
||||
class="chart-bar"
|
||||
:style="{ height: Math.random() * 100 + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">安全信息</h4>
|
||||
<div class="security-info">
|
||||
<div class="security-item safe">
|
||||
<div class="security-icon">✅</div>
|
||||
<div class="security-text">
|
||||
<div class="security-title">连接安全</div>
|
||||
<div class="security-desc">HTTPS 加密连接</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="security-item safe">
|
||||
<div class="security-icon">🛡️</div>
|
||||
<div class="security-text">
|
||||
<div class="security-title">证书有效</div>
|
||||
<div class="security-desc">由 Google Trust Services 签发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
|
||||
import { NButton, NInput, NIcon, NRadioGroup, NRadioButton } from 'naive-ui'
|
||||
import { SettingsOutline, MoonOutline, SearchOutline, SunnyOutline } from '@vicons/ionicons5'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
const isDark = computed({
|
||||
get: () => themeStore.isDark,
|
||||
set: (val) => (themeStore.isDark = val),
|
||||
})
|
||||
|
||||
// 引用app容器元素
|
||||
const appContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
// 响应式数据
|
||||
const currentView = ref('monitor')
|
||||
const searchQuery = ref('')
|
||||
|
||||
// 布局尺寸控制
|
||||
const sidebarWidth = ref(300)
|
||||
const inspectorWidth = ref(350)
|
||||
const timelineHeight = ref(200)
|
||||
const mainHeaderHeight = ref(80)
|
||||
|
||||
// 最小尺寸限制
|
||||
const MIN_SIDEBAR_WIDTH = 250
|
||||
const MAX_SIDEBAR_WIDTH = 450
|
||||
const MIN_INSPECTOR_WIDTH = 300
|
||||
const MAX_INSPECTOR_WIDTH = 500
|
||||
const MIN_TIMELINE_HEIGHT = 150
|
||||
const MAX_TIMELINE_HEIGHT = 350
|
||||
|
||||
// 视图选项
|
||||
const viewOptions = [
|
||||
{ label: '实时监控', value: 'monitor' },
|
||||
{ label: '防火墙', value: 'firewall' },
|
||||
{ label: '分析', value: 'analysis' },
|
||||
]
|
||||
|
||||
// 模拟数据
|
||||
const mockData = ref({
|
||||
activeConnections: 247,
|
||||
processCount: 43,
|
||||
networkSpeed: '5.2 MB/s',
|
||||
ruleCount: 156,
|
||||
selectedConnection: 'chrome.exe → google.com',
|
||||
connectionStatus: '已建立',
|
||||
localIP: '192.168.1.100',
|
||||
})
|
||||
|
||||
// 拖拽状态
|
||||
const resizing = ref<{
|
||||
type: 'sidebar' | 'inspector' | 'timeline' | null
|
||||
startX: number
|
||||
startY: number
|
||||
startWidth: number
|
||||
startHeight: number
|
||||
}>({
|
||||
type: null,
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
startWidth: 0,
|
||||
startHeight: 0,
|
||||
})
|
||||
|
||||
// 开始拖拽
|
||||
const startResize = (type: 'sidebar' | 'inspector' | 'timeline', event: MouseEvent) => {
|
||||
event.preventDefault()
|
||||
|
||||
resizing.value = {
|
||||
type,
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
startWidth:
|
||||
type === 'sidebar' ? sidebarWidth.value : type === 'inspector' ? inspectorWidth.value : 0,
|
||||
startHeight: type === 'timeline' ? timelineHeight.value : 0,
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', handleResize)
|
||||
document.addEventListener('mouseup', stopResize)
|
||||
document.body.style.cursor = type === 'timeline' ? 'row-resize' : 'col-resize'
|
||||
document.body.style.userSelect = 'none'
|
||||
}
|
||||
|
||||
// 处理拖拽
|
||||
const handleResize = (event: MouseEvent) => {
|
||||
if (!resizing.value.type) return
|
||||
|
||||
const { type, startX, startY, startWidth, startHeight } = resizing.value
|
||||
|
||||
if (type === 'sidebar') {
|
||||
const deltaX = event.clientX - startX
|
||||
const newWidth = Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, startWidth + deltaX))
|
||||
sidebarWidth.value = newWidth
|
||||
} else if (type === 'inspector') {
|
||||
const deltaX = startX - event.clientX
|
||||
const newWidth = Math.min(
|
||||
MAX_INSPECTOR_WIDTH,
|
||||
Math.max(MIN_INSPECTOR_WIDTH, startWidth + deltaX),
|
||||
)
|
||||
inspectorWidth.value = newWidth
|
||||
} else if (type === 'timeline') {
|
||||
const deltaY = startY - event.clientY
|
||||
const newHeight = Math.min(
|
||||
MAX_TIMELINE_HEIGHT,
|
||||
Math.max(MIN_TIMELINE_HEIGHT, startHeight + deltaY),
|
||||
)
|
||||
timelineHeight.value = newHeight
|
||||
}
|
||||
}
|
||||
|
||||
// 停止拖拽
|
||||
const stopResize = () => {
|
||||
resizing.value.type = null
|
||||
document.removeEventListener('mousemove', handleResize)
|
||||
document.removeEventListener('mouseup', stopResize)
|
||||
document.body.style.cursor = ''
|
||||
document.body.style.userSelect = ''
|
||||
}
|
||||
|
||||
// 方法
|
||||
const openSettings = () => {
|
||||
console.log('打开设置')
|
||||
}
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
isDark.value = !isDark.value
|
||||
console.log('切换暗色模式:', isDark.value)
|
||||
}
|
||||
|
||||
// 键盘快捷键 - 重置布局
|
||||
const resetLayout = () => {
|
||||
sidebarWidth.value = 300
|
||||
inspectorWidth.value = 350
|
||||
timelineHeight.value = 200
|
||||
}
|
||||
|
||||
// 监听键盘事件和主题切换
|
||||
onMounted(() => {
|
||||
// 获取app容器元素引用
|
||||
appContainer.value = document.querySelector('.app-container')
|
||||
|
||||
// 初始化主题类
|
||||
updateThemeClass()
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (event.ctrlKey && event.key === 'r') {
|
||||
event.preventDefault()
|
||||
resetLayout()
|
||||
}
|
||||
// 添加快捷键切换主题 Ctrl+T
|
||||
if (event.ctrlKey && event.key === 't') {
|
||||
event.preventDefault()
|
||||
toggleDarkMode()
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleKeydown)
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
document.removeEventListener('mousemove', handleResize)
|
||||
document.removeEventListener('mouseup', stopResize)
|
||||
})
|
||||
})
|
||||
|
||||
// 监听主题变化并更新CSS类
|
||||
watch(isDark, () => {
|
||||
nextTick(() => {
|
||||
updateThemeClass()
|
||||
})
|
||||
}, { immediate: true })
|
||||
|
||||
// 更新主题CSS类
|
||||
const updateThemeClass = () => {
|
||||
if (appContainer.value) {
|
||||
if (isDark.value) {
|
||||
appContainer.value.classList.add('dark-theme')
|
||||
} else {
|
||||
appContainer.value.classList.remove('dark-theme')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 主题色彩变量 */
|
||||
.app-container {
|
||||
/* 暗色主题 */
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--bg-quaternary: #475569;
|
||||
--bg-overlay: rgba(15, 23, 42, 0.95);
|
||||
--bg-glass: rgba(30, 41, 59, 0.8);
|
||||
--bg-card: rgba(51, 65, 85, 0.5);
|
||||
--bg-hover: rgba(59, 130, 246, 0.1);
|
||||
--bg-selected: rgba(59, 130, 246, 0.2);
|
||||
|
||||
--text-primary: #f8fafc;
|
||||
--text-secondary: #f1f5f9;
|
||||
--text-tertiary: #e2e8f0;
|
||||
--text-quaternary: #cbd5e1;
|
||||
--text-muted: #94a3b8;
|
||||
--text-disabled: #64748b;
|
||||
|
||||
--border-primary: #334155;
|
||||
--border-secondary: rgba(51, 65, 85, 0.3);
|
||||
--border-tertiary: rgba(71, 85, 105, 0.3);
|
||||
--border-hover: rgba(59, 130, 246, 0.5);
|
||||
--border-focus: #3b82f6;
|
||||
|
||||
--accent-primary: #3b82f6;
|
||||
--accent-secondary: #06b6d4;
|
||||
--accent-success: #22c55e;
|
||||
--accent-warning: #f59e0b;
|
||||
--accent-error: #ef4444;
|
||||
--accent-purple: #8b5cf6;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--backdrop-blur: blur(20px);
|
||||
--transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 亮色主题变量 */
|
||||
.app-container:not(.dark-theme) {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
--bg-quaternary: #e2e8f0;
|
||||
--bg-overlay: rgba(255, 255, 255, 0.95);
|
||||
--bg-glass: rgba(248, 250, 252, 0.8);
|
||||
--bg-card: rgba(241, 245, 249, 0.8);
|
||||
--bg-hover: rgba(59, 130, 246, 0.08);
|
||||
--bg-selected: rgba(59, 130, 246, 0.15);
|
||||
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #1e293b;
|
||||
--text-tertiary: #334155;
|
||||
--text-quaternary: #475569;
|
||||
--text-muted: #64748b;
|
||||
--text-disabled: #94a3b8;
|
||||
|
||||
--border-primary: #e2e8f0;
|
||||
--border-secondary: rgba(226, 232, 240, 0.8);
|
||||
--border-tertiary: rgba(203, 213, 225, 0.6);
|
||||
--border-hover: rgba(59, 130, 246, 0.3);
|
||||
--border-focus: #3b82f6;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 根据主题状态添加类 */
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
color: var(--text-primary);
|
||||
user-select: none;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* 当暗色主题时添加 dark-theme 类 */
|
||||
.app-container:global(.dark-theme) {
|
||||
/* 暗色主题的额外样式 */
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.title-bar {
|
||||
height: 60px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
background: var(--bg-overlay);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.title-bar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, #1d4ed8 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.app-icon span {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.title-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-quaternary);
|
||||
padding: 6px 12px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-success);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
height: calc(100vh - 60px);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
border-right: 1px solid var(--border-primary);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar-badge {
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-tertiary);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 20px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-quaternary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-quaternary);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.action-item:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 拖拽分割线 */
|
||||
.resize-handle-vertical {
|
||||
width: 4px;
|
||||
background: var(--border-tertiary);
|
||||
cursor: col-resize;
|
||||
transition: background-color 0.2s;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.resize-handle-vertical:hover {
|
||||
background: var(--border-hover);
|
||||
}
|
||||
|
||||
.resize-handle-hover {
|
||||
position: absolute;
|
||||
inset: 0 -4px;
|
||||
}
|
||||
|
||||
.resize-handle-horizontal {
|
||||
height: 4px;
|
||||
background: var(--border-tertiary);
|
||||
cursor: row-resize;
|
||||
transition: background-color 0.2s;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.resize-handle-horizontal:hover {
|
||||
background: rgba(168, 85, 247, 0.5);
|
||||
}
|
||||
|
||||
.resize-handle-hover-h {
|
||||
position: absolute;
|
||||
inset: -4px 0;
|
||||
}
|
||||
|
||||
/* 主视图 */
|
||||
.main-view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.main-header {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main-header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.main-header-subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 连接区域 */
|
||||
.connections-area {
|
||||
flex: 1;
|
||||
background: var(--bg-glass);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.connections-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.connections-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.connection-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.connections-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
padding: 12px 24px;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-tertiary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-quaternary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.table-column {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.table-column:first-child {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.table-row.row-selected {
|
||||
background: var(--bg-selected);
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.table-cell:first-child {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.process-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.process-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-badge.established {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: var(--accent-success);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.traffic-info {
|
||||
color: var(--accent-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 时间轴区域 */
|
||||
.timeline-area {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
border-top: 1px solid var(--border-primary);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.timeline-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.events-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid transparent;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.event-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.event-item.event-info {
|
||||
border-left-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.event-item.event-warning {
|
||||
border-left-color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.event-item.event-success {
|
||||
border-left-color: var(--accent-success);
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
min-width: 70px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.event-type {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.event-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.event-indicator {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-disabled);
|
||||
}
|
||||
|
||||
.event-item.event-info .event-indicator {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
.event-item.event-warning .event-indicator {
|
||||
background: var(--accent-warning);
|
||||
}
|
||||
|
||||
.event-item.event-success .event-indicator {
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
/* 检查器面板 */
|
||||
.inspector {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
border-left: 1px solid var(--border-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.inspector-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.inspector-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.inspector-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inspector-body {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.detail-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-quaternary);
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value.status-established {
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.network-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.network-item {
|
||||
padding: 12px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.network-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.network-value {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.traffic-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.traffic-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.traffic-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.traffic-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.traffic-value.upload {
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.traffic-value.download {
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.traffic-value.total {
|
||||
color: var(--accent-purple);
|
||||
}
|
||||
|
||||
.traffic-chart {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 2px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
flex: 1;
|
||||
background: linear-gradient(to top, var(--accent-primary), var(--accent-secondary));
|
||||
border-radius: 2px;
|
||||
min-height: 4px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.chart-bar:hover {
|
||||
background: linear-gradient(to top, #1d4ed8, #0891b2);
|
||||
}
|
||||
|
||||
.security-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.security-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.security-item.safe {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
font-size: 16px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.security-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-tertiary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-hover);
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 拖拽时的视觉反馈 */
|
||||
.resize-handle-vertical:active,
|
||||
.resize-handle-horizontal:active {
|
||||
background-color: var(--accent-primary) !important;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1200px) {
|
||||
.search-area {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保内容不会溢出 */
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 自定义Naive UI组件样式 */
|
||||
:deep(.n-radio-group .n-radio-button) {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--border-tertiary);
|
||||
color: var(--text-quaternary);
|
||||
}
|
||||
|
||||
:deep(.n-radio-group .n-radio-button:hover) {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
:deep(.n-radio-group .n-radio-button--checked) {
|
||||
background: var(--bg-selected);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:deep(.n-input .n-input__input-el) {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--border-tertiary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:deep(.n-input:hover .n-input__input-el) {
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
:deep(.n-input.n-input--focus .n-input__input-el) {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
:deep(.n-button) {
|
||||
border-color: var(--border-tertiary);
|
||||
color: var(--text-quaternary);
|
||||
}
|
||||
|
||||
:deep(.n-button:hover) {
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:deep(.n-button--primary-type) {
|
||||
background: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.n-button--primary-type:hover) {
|
||||
background: #1d4ed8;
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
|
||||
:deep(.n-button--info-type) {
|
||||
background: var(--accent-secondary);
|
||||
border-color: var(--accent-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.n-button--info-type:hover) {
|
||||
background: #0891b2;
|
||||
border-color: #0891b2;
|
||||
}
|
||||
|
||||
:deep(.n-button--warning-type) {
|
||||
background: var(--accent-warning);
|
||||
border-color: var(--accent-warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.n-button--warning-type:hover) {
|
||||
background: #d97706;
|
||||
border-color: #d97706;
|
||||
}
|
||||
|
||||
/* 主题切换过渡效果 */
|
||||
* {
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
border-color 0.3s ease,
|
||||
color 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* 动态主题类切换 */
|
||||
.app-container {
|
||||
&.dark-theme {
|
||||
/* 暗色主题时的额外样式 */
|
||||
}
|
||||
|
||||
&:not(.dark-theme) {
|
||||
/* 亮色主题时的额外样式 */
|
||||
.chart-bar {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,1404 @@
|
||||
<template>
|
||||
<div ref="appContainer" class="app-container">
|
||||
<!-- 顶部标题栏组件 -->
|
||||
<TitleBar />
|
||||
|
||||
<!-- 主内容区域 - 可拖拽布局 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧边栏 -->
|
||||
<div class="sidebar" :style="{ width: sidebarWidth + 'px' }">
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-header">
|
||||
<h3 class="sidebar-title">系统概览</h3>
|
||||
<div class="sidebar-badge">{{ mockData.processCount }}</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🔗</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ mockData.activeConnections }}</div>
|
||||
<div class="stat-label">活跃连接</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">⚡</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ mockData.networkSpeed }}</div>
|
||||
<div class="stat-label">网络速度</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🛡️</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ mockData.ruleCount }}</div>
|
||||
<div class="stat-label">防护规则</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h4 class="section-title">快速操作</h4>
|
||||
<div class="quick-actions">
|
||||
<div class="action-item">扫描威胁</div>
|
||||
<div class="action-item">更新规则</div>
|
||||
<div class="action-item">导出日志</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧分割线 -->
|
||||
<div class="resize-handle-vertical" @mousedown="startResize('sidebar', $event)">
|
||||
<div class="resize-handle-hover"></div>
|
||||
</div>
|
||||
|
||||
<!-- 中间主视图区域 -->
|
||||
<div class="main-view">
|
||||
<!-- 中间顶部 - 搜索和标题 -->
|
||||
<div class="main-header" :style="{ height: mainHeaderHeight + 'px' }">
|
||||
<div class="header-content">
|
||||
<div class="header-info">
|
||||
<h2 class="main-header-title">网络连接监控</h2>
|
||||
<p class="main-header-subtitle">实时监控系统网络活动</p>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="search-area">
|
||||
<n-input
|
||||
v-model:value="searchQuery"
|
||||
placeholder="搜索连接、域名或IP..."
|
||||
size="medium"
|
||||
round
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon :component="SearchOutline" />
|
||||
</template>
|
||||
</n-input>
|
||||
</div>
|
||||
|
||||
<div class="filter-buttons">
|
||||
<n-button size="small" type="primary" ghost>过滤</n-button>
|
||||
<n-button size="small" ghost>刷新</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间主体 - 连接列表表格 -->
|
||||
<div class="connections-area">
|
||||
<div class="connections-header">
|
||||
<h3 class="connections-title">
|
||||
<span class="title-icon">📊</span>
|
||||
连接列表
|
||||
<span class="connection-count">{{ mockData.activeConnections }} 个活跃连接</span>
|
||||
</h3>
|
||||
<div class="connections-controls">
|
||||
<n-button size="small" type="info" ghost>暂停监控</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connections-content">
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
<div class="table-column">进程</div>
|
||||
<div class="table-column">本地地址</div>
|
||||
<div class="table-column">远程地址</div>
|
||||
<div class="table-column">状态</div>
|
||||
<div class="table-column">流量</div>
|
||||
</div>
|
||||
|
||||
<div class="table-body">
|
||||
<div
|
||||
v-for="i in 15"
|
||||
:key="i"
|
||||
class="table-row"
|
||||
:class="{ 'row-selected': i === 3 }"
|
||||
>
|
||||
<div class="table-cell">
|
||||
<div class="process-info">
|
||||
<div class="process-icon">🌐</div>
|
||||
<span>chrome.exe</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cell">192.168.1.{{ 100 + i }}</div>
|
||||
<div class="table-cell">
|
||||
{{ ['google.com', 'github.com', 'cloudflare.com'][i % 3] }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
<span class="status-badge established">已建立</span>
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
<span class="traffic-info">{{ (Math.random() * 1000).toFixed(0) }} KB/s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间轴分割线 -->
|
||||
<div class="resize-handle-horizontal" @mousedown="startResize('timeline', $event)">
|
||||
<div class="resize-handle-hover-h"></div>
|
||||
</div>
|
||||
|
||||
<!-- 中间底部 - 时间轴事件流 -->
|
||||
<div class="timeline-area" :style="{ height: timelineHeight + 'px' }">
|
||||
<div class="timeline-header">
|
||||
<h3 class="timeline-title">
|
||||
<span class="title-icon">📈</span>
|
||||
实时事件流
|
||||
</h3>
|
||||
<div class="timeline-controls">
|
||||
<n-button size="small" type="warning" ghost>暂停</n-button>
|
||||
<n-button size="small" ghost>清空</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-content">
|
||||
<div class="events-container">
|
||||
<div
|
||||
v-for="i in 12"
|
||||
:key="i"
|
||||
class="event-item"
|
||||
:class="['event-' + ['info', 'warning', 'success'][i % 3]]"
|
||||
>
|
||||
<div class="event-time">{{ new Date().toLocaleTimeString() }}</div>
|
||||
<div class="event-content">
|
||||
<div class="event-type">{{ ['连接建立', '数据传输', '连接关闭'][i % 3] }}</div>
|
||||
<div class="event-desc">chrome.exe → google.com:443</div>
|
||||
</div>
|
||||
<div class="event-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧分割线 -->
|
||||
<div class="resize-handle-vertical" @mousedown="startResize('inspector', $event)">
|
||||
<div class="resize-handle-hover"></div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧检查器面板 -->
|
||||
<div class="inspector" :style="{ width: inspectorWidth + 'px' }">
|
||||
<div class="inspector-content">
|
||||
<div class="inspector-header">
|
||||
<h3 class="inspector-title">
|
||||
<span class="title-icon">🔍</span>
|
||||
连接详情
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="inspector-body">
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">基本信息</h4>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">进程</span>
|
||||
<span class="detail-value">chrome.exe</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">PID</span>
|
||||
<span class="detail-value">12345</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">协议</span>
|
||||
<span class="detail-value">TCP</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">状态</span>
|
||||
<span class="detail-value status-established">已建立</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">网络信息</h4>
|
||||
<div class="network-info">
|
||||
<div class="network-item">
|
||||
<div class="network-label">本地地址</div>
|
||||
<div class="network-value">192.168.1.100:54321</div>
|
||||
</div>
|
||||
<div class="network-item">
|
||||
<div class="network-label">远程地址</div>
|
||||
<div class="network-value">142.250.191.14:443</div>
|
||||
</div>
|
||||
<div class="network-item">
|
||||
<div class="network-label">域名</div>
|
||||
<div class="network-value">google.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">流量统计</h4>
|
||||
<div class="traffic-stats">
|
||||
<div class="traffic-item">
|
||||
<span class="traffic-label">上传</span>
|
||||
<span class="traffic-value upload">1.2 MB</span>
|
||||
</div>
|
||||
<div class="traffic-item">
|
||||
<span class="traffic-label">下载</span>
|
||||
<span class="traffic-value download">5.8 MB</span>
|
||||
</div>
|
||||
<div class="traffic-item">
|
||||
<span class="traffic-label">总计</span>
|
||||
<span class="traffic-value total">7.0 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="traffic-chart">
|
||||
<div class="chart-bars">
|
||||
<div
|
||||
v-for="i in 20"
|
||||
:key="i"
|
||||
class="chart-bar"
|
||||
:style="{ height: Math.random() * 100 + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">安全信息</h4>
|
||||
<div class="security-info">
|
||||
<div class="security-item safe">
|
||||
<div class="security-icon">✅</div>
|
||||
<div class="security-text">
|
||||
<div class="security-title">连接安全</div>
|
||||
<div class="security-desc">HTTPS 加密连接</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="security-item safe">
|
||||
<div class="security-icon">🛡️</div>
|
||||
<div class="security-text">
|
||||
<div class="security-title">证书有效</div>
|
||||
<div class="security-desc">由 Google Trust Services 签发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
|
||||
import { NButton, NInput, NIcon } from 'naive-ui'
|
||||
import { SearchOutline } from '@vicons/ionicons5'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
import TitleBar from '@/components/TitleBar.vue'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
const isDark = computed({
|
||||
get: () => themeStore.isDark,
|
||||
set: (val) => (themeStore.isDark = val),
|
||||
})
|
||||
|
||||
// 引用app容器元素
|
||||
const appContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
// 响应式数据
|
||||
const currentView = ref('monitor')
|
||||
const searchQuery = ref('')
|
||||
|
||||
// 布局尺寸控制
|
||||
const sidebarWidth = ref(300)
|
||||
const inspectorWidth = ref(350)
|
||||
const timelineHeight = ref(200)
|
||||
const mainHeaderHeight = ref(80)
|
||||
|
||||
// 最小尺寸限制
|
||||
const MIN_SIDEBAR_WIDTH = 250
|
||||
const MAX_SIDEBAR_WIDTH = 450
|
||||
const MIN_INSPECTOR_WIDTH = 300
|
||||
const MAX_INSPECTOR_WIDTH = 500
|
||||
const MIN_TIMELINE_HEIGHT = 150
|
||||
const MAX_TIMELINE_HEIGHT = 350
|
||||
|
||||
// 模拟数据
|
||||
const mockData = ref({
|
||||
activeConnections: 247,
|
||||
processCount: 43,
|
||||
networkSpeed: '5.2 MB/s',
|
||||
ruleCount: 156,
|
||||
selectedConnection: 'chrome.exe → google.com',
|
||||
connectionStatus: '已建立',
|
||||
localIP: '192.168.1.100',
|
||||
})
|
||||
|
||||
// 拖拽状态
|
||||
const resizing = ref<{
|
||||
type: 'sidebar' | 'inspector' | 'timeline' | null
|
||||
startX: number
|
||||
startY: number
|
||||
startWidth: number
|
||||
startHeight: number
|
||||
}>({
|
||||
type: null,
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
startWidth: 0,
|
||||
startHeight: 0,
|
||||
})
|
||||
|
||||
// 开始拖拽
|
||||
const startResize = (type: 'sidebar' | 'inspector' | 'timeline', event: MouseEvent) => {
|
||||
event.preventDefault()
|
||||
|
||||
resizing.value = {
|
||||
type,
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
startWidth:
|
||||
type === 'sidebar' ? sidebarWidth.value : type === 'inspector' ? inspectorWidth.value : 0,
|
||||
startHeight: type === 'timeline' ? timelineHeight.value : 0,
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', handleResize)
|
||||
document.addEventListener('mouseup', stopResize)
|
||||
document.body.style.cursor = type === 'timeline' ? 'row-resize' : 'col-resize'
|
||||
document.body.style.userSelect = 'none'
|
||||
}
|
||||
|
||||
// 处理拖拽
|
||||
const handleResize = (event: MouseEvent) => {
|
||||
if (!resizing.value.type) return
|
||||
|
||||
const { type, startX, startY, startWidth, startHeight } = resizing.value
|
||||
|
||||
if (type === 'sidebar') {
|
||||
const deltaX = event.clientX - startX
|
||||
const newWidth = Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, startWidth + deltaX))
|
||||
sidebarWidth.value = newWidth
|
||||
} else if (type === 'inspector') {
|
||||
const deltaX = startX - event.clientX
|
||||
const newWidth = Math.min(
|
||||
MAX_INSPECTOR_WIDTH,
|
||||
Math.max(MIN_INSPECTOR_WIDTH, startWidth + deltaX),
|
||||
)
|
||||
inspectorWidth.value = newWidth
|
||||
} else if (type === 'timeline') {
|
||||
const deltaY = startY - event.clientY
|
||||
const newHeight = Math.min(
|
||||
MAX_TIMELINE_HEIGHT,
|
||||
Math.max(MIN_TIMELINE_HEIGHT, startHeight + deltaY),
|
||||
)
|
||||
timelineHeight.value = newHeight
|
||||
}
|
||||
}
|
||||
|
||||
// 停止拖拽
|
||||
const stopResize = () => {
|
||||
resizing.value.type = null
|
||||
document.removeEventListener('mousemove', handleResize)
|
||||
document.removeEventListener('mouseup', stopResize)
|
||||
document.body.style.cursor = ''
|
||||
document.body.style.userSelect = ''
|
||||
}
|
||||
|
||||
// 方法
|
||||
const openSettings = () => {
|
||||
console.log('打开设置')
|
||||
}
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
isDark.value = !isDark.value
|
||||
console.log('切换暗色模式:', isDark.value)
|
||||
}
|
||||
|
||||
// 键盘快捷键 - 重置布局
|
||||
const resetLayout = () => {
|
||||
sidebarWidth.value = 300
|
||||
inspectorWidth.value = 350
|
||||
timelineHeight.value = 200
|
||||
}
|
||||
|
||||
// 监听键盘事件和主题切换
|
||||
onMounted(() => {
|
||||
// 获取app容器元素引用
|
||||
appContainer.value = document.querySelector('.app-container')
|
||||
|
||||
// 初始化主题类
|
||||
updateThemeClass()
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (event.ctrlKey && event.key === 'r') {
|
||||
event.preventDefault()
|
||||
resetLayout()
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleKeydown)
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
document.removeEventListener('mousemove', handleResize)
|
||||
document.removeEventListener('mouseup', stopResize)
|
||||
})
|
||||
})
|
||||
|
||||
// 监听主题变化并更新CSS类
|
||||
watch(isDark, () => {
|
||||
nextTick(() => {
|
||||
updateThemeClass()
|
||||
})
|
||||
}, { immediate: true })
|
||||
|
||||
// 更新主题CSS类
|
||||
const updateThemeClass = () => {
|
||||
if (appContainer.value) {
|
||||
if (isDark.value) {
|
||||
appContainer.value.classList.add('dark-theme')
|
||||
} else {
|
||||
appContainer.value.classList.remove('dark-theme')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 主题色彩变量 */
|
||||
.app-container {
|
||||
/* 暗色主题 */
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--bg-quaternary: #475569;
|
||||
--bg-overlay: rgba(15, 23, 42, 0.95);
|
||||
--bg-glass: rgba(30, 41, 59, 0.8);
|
||||
--bg-card: rgba(51, 65, 85, 0.5);
|
||||
--bg-hover: rgba(59, 130, 246, 0.1);
|
||||
--bg-selected: rgba(59, 130, 246, 0.2);
|
||||
|
||||
--text-primary: #f8fafc;
|
||||
--text-secondary: #f1f5f9;
|
||||
--text-tertiary: #e2e8f0;
|
||||
--text-quaternary: #cbd5e1;
|
||||
--text-muted: #94a3b8;
|
||||
--text-disabled: #64748b;
|
||||
|
||||
--border-primary: #334155;
|
||||
--border-secondary: rgba(51, 65, 85, 0.3);
|
||||
--border-tertiary: rgba(71, 85, 105, 0.3);
|
||||
--border-hover: rgba(59, 130, 246, 0.5);
|
||||
--border-focus: #3b82f6;
|
||||
|
||||
--accent-primary: #3b82f6;
|
||||
--accent-secondary: #06b6d4;
|
||||
--accent-success: #22c55e;
|
||||
--accent-warning: #f59e0b;
|
||||
--accent-error: #ef4444;
|
||||
--accent-purple: #8b5cf6;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--backdrop-blur: blur(20px);
|
||||
--transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 亮色主题变量 */
|
||||
.app-container:not(.dark-theme) {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
--bg-quaternary: #e2e8f0;
|
||||
--bg-overlay: rgba(255, 255, 255, 0.95);
|
||||
--bg-glass: rgba(248, 250, 252, 0.8);
|
||||
--bg-card: rgba(241, 245, 249, 0.8);
|
||||
--bg-hover: rgba(59, 130, 246, 0.08);
|
||||
--bg-selected: rgba(59, 130, 246, 0.15);
|
||||
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #1e293b;
|
||||
--text-tertiary: #334155;
|
||||
--text-quaternary: #475569;
|
||||
--text-muted: #64748b;
|
||||
--text-disabled: #94a3b8;
|
||||
|
||||
--border-primary: #e2e8f0;
|
||||
--border-secondary: rgba(226, 232, 240, 0.8);
|
||||
--border-tertiary: rgba(203, 213, 225, 0.6);
|
||||
--border-hover: rgba(59, 130, 246, 0.3);
|
||||
--border-focus: #3b82f6;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 根据主题状态添加类 */
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
color: var(--text-primary);
|
||||
user-select: none;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* 当暗色主题时添加 dark-theme 类 */
|
||||
.app-container:global(.dark-theme) {
|
||||
/* 暗色主题的额外样式 */
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
height: calc(100vh - 60px);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
border-right: 1px solid var(--border-primary);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar-badge {
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-tertiary);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 20px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-quaternary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-quaternary);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.action-item:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 拖拽分割线 */
|
||||
.resize-handle-vertical {
|
||||
width: 4px;
|
||||
background: var(--border-tertiary);
|
||||
cursor: col-resize;
|
||||
transition: background-color 0.2s;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.resize-handle-vertical:hover {
|
||||
background: var(--border-hover);
|
||||
}
|
||||
|
||||
.resize-handle-hover {
|
||||
position: absolute;
|
||||
inset: 0 -4px;
|
||||
}
|
||||
|
||||
.resize-handle-horizontal {
|
||||
height: 4px;
|
||||
background: var(--border-tertiary);
|
||||
cursor: row-resize;
|
||||
transition: background-color 0.2s;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.resize-handle-horizontal:hover {
|
||||
background: rgba(168, 85, 247, 0.5);
|
||||
}
|
||||
|
||||
.resize-handle-hover-h {
|
||||
position: absolute;
|
||||
inset: -4px 0;
|
||||
}
|
||||
|
||||
/* 主视图 */
|
||||
.main-view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.main-header {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main-header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.main-header-subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 连接区域 */
|
||||
.connections-area {
|
||||
flex: 1;
|
||||
background: var(--bg-glass);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.connections-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.connections-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.connection-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.connections-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
padding: 12px 24px;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-tertiary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-quaternary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.table-column {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.table-column:first-child {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.table-row.row-selected {
|
||||
background: var(--bg-selected);
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.table-cell:first-child {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.process-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.process-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-badge.established {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: var(--accent-success);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.traffic-info {
|
||||
color: var(--accent-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 时间轴区域 */
|
||||
.timeline-area {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
border-top: 1px solid var(--border-primary);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.timeline-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.events-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid transparent;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.event-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.event-item.event-info {
|
||||
border-left-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.event-item.event-warning {
|
||||
border-left-color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.event-item.event-success {
|
||||
border-left-color: var(--accent-success);
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
min-width: 70px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.event-type {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.event-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.event-indicator {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-disabled);
|
||||
}
|
||||
|
||||
.event-item.event-info .event-indicator {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
.event-item.event-warning .event-indicator {
|
||||
background: var(--accent-warning);
|
||||
}
|
||||
|
||||
.event-item.event-success .event-indicator {
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
/* 检查器面板 */
|
||||
.inspector {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--backdrop-blur);
|
||||
border-left: 1px solid var(--border-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.inspector-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.inspector-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.inspector-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inspector-body {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.detail-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-quaternary);
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value.status-established {
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.network-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.network-item {
|
||||
padding: 12px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.network-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.network-value {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.traffic-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.traffic-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.traffic-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.traffic-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.traffic-value.upload {
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.traffic-value.download {
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.traffic-value.total {
|
||||
color: var(--accent-purple);
|
||||
}
|
||||
|
||||
.traffic-chart {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 2px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
flex: 1;
|
||||
background: linear-gradient(to top, var(--accent-primary), var(--accent-secondary));
|
||||
border-radius: 2px;
|
||||
min-height: 4px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.chart-bar:hover {
|
||||
background: linear-gradient(to top, #1d4ed8, #0891b2);
|
||||
}
|
||||
|
||||
.security-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.security-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.security-item.safe {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
font-size: 16px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.security-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-tertiary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-hover);
|
||||
}
|
||||
|
||||
/* 拖拽时的视觉反馈 */
|
||||
.resize-handle-vertical:active,
|
||||
.resize-handle-horizontal:active {
|
||||
background-color: var(--accent-primary) !important;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1200px) {
|
||||
.search-area {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保内容不会溢出 */
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 自定义Naive UI组件样式 */
|
||||
:deep(.n-input .n-input__input-el) {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--border-tertiary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:deep(.n-input:hover .n-input__input-el) {
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
:deep(.n-input.n-input--focus .n-input__input-el) {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
:deep(.n-button) {
|
||||
border-color: var(--border-tertiary);
|
||||
color: var(--text-quaternary);
|
||||
}
|
||||
|
||||
:deep(.n-button:hover) {
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:deep(.n-button--primary-type) {
|
||||
background: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.n-button--primary-type:hover) {
|
||||
background: #1d4ed8;
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
|
||||
:deep(.n-button--info-type) {
|
||||
background: var(--accent-secondary);
|
||||
border-color: var(--accent-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.n-button--info-type:hover) {
|
||||
background: #0891b2;
|
||||
border-color: #0891b2;
|
||||
}
|
||||
|
||||
:deep(.n-button--warning-type) {
|
||||
background: var(--accent-warning);
|
||||
border-color: var(--accent-warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.n-button--warning-type:hover) {
|
||||
background: #d97706;
|
||||
border-color: #d97706;
|
||||
}
|
||||
|
||||
/* 主题切换过渡效果 */
|
||||
* {
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
border-color 0.3s ease,
|
||||
color 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* 动态主题类切换 */
|
||||
.app-container {
|
||||
&.dark-theme {
|
||||
/* 暗色主题时的额外样式 */
|
||||
}
|
||||
|
||||
&:not(.dark-theme) {
|
||||
/* 亮色主题时的额外样式 */
|
||||
.chart-bar {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 主题切换过渡效果 - 只在页面加载完成后启用 */
|
||||
body.theme-ready * {
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
border-color 0.3s ease,
|
||||
color 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* 初始加载时禁用所有过渡 */
|
||||
body:not(.theme-ready) * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* 针对拖拽操作的过渡保持独立 */
|
||||
.resize-handle-vertical,
|
||||
.resize-handle-horizontal,
|
||||
.table-row,
|
||||
.stat-card,
|
||||
.action-item,
|
||||
.event-item {
|
||||
transition: var(--transition) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
// vite-plugins/theme-inject.ts
|
||||
import type { Plugin } from 'vite'
|
||||
|
||||
export function themeInjectPlugin(): Plugin {
|
||||
return {
|
||||
name: 'theme-inject',
|
||||
transformIndexHtml(html) {
|
||||
const themeScript = `
|
||||
<script>
|
||||
(function() {
|
||||
const saved = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isDark = saved ? saved === 'dark' : prefersDark;
|
||||
|
||||
if (isDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.style.setProperty('--bg-primary', '#0c0c0c');
|
||||
document.body.style.backgroundColor = '#0c0c0c';
|
||||
document.body.style.color = '#ffffff';
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.documentElement.style.setProperty('--bg-primary', '#ffffff');
|
||||
document.body.style.backgroundColor = '#ffffff';
|
||||
document.body.style.color = '#000000';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
`
|
||||
return html.replace('<head>', `<head>${themeScript}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user