U:调用真实UI
This commit is contained in:
jimmy committed
1 parent
1f62e9cf51
commit
e5cf954798
3 files changed
+912
-379
No files matched your search
@@ -138,11 +138,7 @@
|
||||
<!-- 软件详情弹窗 -->
|
||||
<SoftwareDetailModal
|
||||
v-model:show="showDetailModal"
|
||||
:software="selectedSoftware"
|
||||
:software-info="selectedSoftwareInfo"
|
||||
:network-relation-data="networkRelationData"
|
||||
:port-stats-data="portStatsData"
|
||||
:protocol-data="protocolData"
|
||||
:app-id="selectedAppId"
|
||||
:time-range="selectedTimeRange"
|
||||
/>
|
||||
</div>
|
||||
@@ -204,6 +200,7 @@ interface TopApp {
|
||||
|
||||
interface TopTrafficApp {
|
||||
rank: number
|
||||
appId: string
|
||||
processName: string
|
||||
displayName: string
|
||||
processPath: string
|
||||
@@ -402,6 +399,7 @@ const getSoftwareRanking = async () => {
|
||||
// 转换数据格式适配组件
|
||||
softwareRankingData.value = res.data.items.map(app => ({
|
||||
rank: app.rank,
|
||||
appId: app.appId,
|
||||
processName: app.processName,
|
||||
displayName: app.displayName,
|
||||
processPath: app.processPath,
|
||||
@@ -419,56 +417,14 @@ const getSoftwareRanking = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 选中软件的详细信息
|
||||
const selectedSoftwareInfo = computed(() => {
|
||||
if (!selectedSoftware.value) return null
|
||||
return {
|
||||
processName: 'chrome.exe',
|
||||
displayName: 'Google Chrome',
|
||||
version: '119.0.6045.160',
|
||||
company: 'Google LLC',
|
||||
processPath: 'C:\\Program Files\\Google\\Chrome\\chrome.exe',
|
||||
fileSize: 2467840,
|
||||
}
|
||||
})
|
||||
|
||||
const networkRelationData = computed(() => {
|
||||
if (!selectedSoftware.value) return { nodes: [], links: [] }
|
||||
return {
|
||||
nodes: [
|
||||
{ id: 'app_chrome', name: 'Chrome', type: 'application', size: 45.2, category: 0 },
|
||||
{ id: 'port_443', name: '443/TCP', type: 'port', size: 30.5, category: 1 },
|
||||
{ id: 'host_google', name: 'google.com', type: 'remote_host', size: 25.8, category: 2 },
|
||||
],
|
||||
links: [
|
||||
{ source: 'app_chrome', target: 'port_443', value: 30.5, label: '30.5MB' },
|
||||
{ source: 'port_443', target: 'host_google', value: 25.8, label: '25.8MB' },
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const portStatsData = computed(() => {
|
||||
if (!selectedSoftware.value) return []
|
||||
return [
|
||||
{ port: 443, protocol: 'TCP', connectionCount: 15, totalBytes: 52428800, remoteHosts: ['142.251.42.227', '172.217.164.46'] },
|
||||
{ port: 80, protocol: 'TCP', connectionCount: 5, totalBytes: 10485760, remoteHosts: ['93.184.216.34'] },
|
||||
]
|
||||
})
|
||||
|
||||
// 协议分布数据（移到弹窗中使用）
|
||||
const protocolData = computed(() => {
|
||||
if (!selectedSoftware.value) return []
|
||||
return [
|
||||
{ protocol: 'HTTPS', bytes: 1610612736, percentage: 37.5, color: '#3b82f6' },
|
||||
{ protocol: 'HTTP', bytes: 1073741824, percentage: 25.0, color: '#10b981' },
|
||||
{ protocol: 'DNS', bytes: 751619276, percentage: 17.5, color: '#f59e0b' },
|
||||
{ protocol: '其他', bytes: 858993459, percentage: 20.0, color: '#ef4444' }
|
||||
]
|
||||
})
|
||||
// 选中的AppId
|
||||
const selectedAppId = ref<string | null>(null)
|
||||
|
||||
// 事件处理
|
||||
const showSoftwareDetail = (software: any) => {
|
||||
selectedSoftware.value = software
|
||||
selectedAppId.value = software.appId
|
||||
selectedSoftware.value = software // 保留用于兼容性
|
||||
showDetailModal.value = true
|
||||
}
|
||||
|
||||
|
||||
@@ -3,145 +3,159 @@
|
||||
v-model:show="visible"
|
||||
:mask-closable="false"
|
||||
preset="card"
|
||||
style="width: 90%; max-width: 1000px;"
|
||||
:title="software?.displayName || '软件详情'"
|
||||
style="width: 90%; max-width: 1000px"
|
||||
:title="softwareDetail?.displayName || '软件详情'"
|
||||
size="huge"
|
||||
:bordered="false"
|
||||
:segmented="false"
|
||||
>
|
||||
<div v-if="software" class="software-detail-content">
|
||||
<!-- 基本信息和统计 -->
|
||||
<div class="detail-header">
|
||||
<div class="software-icon">
|
||||
<div class="icon-placeholder">
|
||||
{{ software.displayName.charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="software-summary">
|
||||
<h2 class="software-name">{{ software.displayName }}</h2>
|
||||
<div class="software-meta">
|
||||
<span class="process-name">{{ software.processName }}</span>
|
||||
<span class="traffic-info">{{ formatBytes(software.totalBytes) }} ({{ software.percentage.toFixed(1) }}%)</span>
|
||||
<span class="connection-info">{{ software.connectionCount }} 个连接</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">流量占比</span>
|
||||
<span class="stat-value">{{ software.percentage.toFixed(1) }}%</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">连接数</span>
|
||||
<span class="stat-value">{{ software.connectionCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选项卡内容 -->
|
||||
<div class="detail-tabs">
|
||||
<n-tabs default-value="overview" type="line">
|
||||
<!-- 概览 -->
|
||||
<n-tab-pane name="overview" tab="概览">
|
||||
<div class="tab-content">
|
||||
<div class="overview-grid">
|
||||
<!-- 软件信息卡片 -->
|
||||
<div class="info-section">
|
||||
<h4 class="section-title">软件信息</h4>
|
||||
<SoftwareInfoCard :software-info="softwareInfo" />
|
||||
</div>
|
||||
|
||||
<!-- 协议分布图 -->
|
||||
<div class="protocol-section">
|
||||
<h4 class="section-title">协议分布</h4>
|
||||
<ProtocolChart :data="protocolData" />
|
||||
</div>
|
||||
</div>
|
||||
<n-spin :show="loading" style="min-height: 400px">
|
||||
<div v-if="softwareDetail" class="software-detail-content">
|
||||
<!-- 基本信息和统计 -->
|
||||
<div class="detail-header">
|
||||
<div class="software-icon">
|
||||
<img
|
||||
v-if="softwareDetail.icon"
|
||||
:src="`data:image/png;base64,${softwareDetail.icon}`"
|
||||
class="app-icon"
|
||||
:alt="softwareDetail.displayName"
|
||||
/>
|
||||
<div v-else class="icon-placeholder">
|
||||
{{ softwareDetail.displayName.charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
|
||||
<!-- 网络连接 -->
|
||||
<n-tab-pane name="network" tab="网络连接">
|
||||
<div class="tab-content">
|
||||
<div class="network-grid">
|
||||
<!-- 连接关系图 -->
|
||||
<div class="relation-section">
|
||||
<h4 class="section-title">连接关系</h4>
|
||||
<NetworkRelationChart
|
||||
:data="networkRelationData"
|
||||
:software="software"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 端口统计表 -->
|
||||
<div class="ports-section">
|
||||
<h4 class="section-title">端口统计</h4>
|
||||
<PortStatsTable :data="portStatsData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="software-summary">
|
||||
<h2 class="software-name">{{ softwareDetail.displayName }}</h2>
|
||||
<div class="software-meta">
|
||||
<span class="process-name">{{ softwareDetail.processName }}</span>
|
||||
<span class="traffic-info"
|
||||
>{{ formatBytes(softwareDetail.totalBytes) }} ({{
|
||||
softwareDetail.percentage.toFixed(1)
|
||||
}}%)</span
|
||||
>
|
||||
<span class="connection-info">{{ softwareDetail.connectionCount }} 个连接</span>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
</div>
|
||||
<div class="detail-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">流量占比</span>
|
||||
<span class="stat-value">{{ softwareDetail.percentage.toFixed(1) }}%</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">连接数</span>
|
||||
<span class="stat-value">{{ softwareDetail.connectionCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流量详情 -->
|
||||
<n-tab-pane name="traffic" tab="流量详情">
|
||||
<div class="tab-content">
|
||||
<div class="traffic-details">
|
||||
<div class="traffic-chart-section">
|
||||
<h4 class="section-title">流量趋势 ({{ timeRange }})</h4>
|
||||
<div class="traffic-chart-placeholder">
|
||||
<div class="placeholder-content">
|
||||
<n-icon :component="TrendingUpOutline" size="48" />
|
||||
<p>流量趋势图</p>
|
||||
<p class="placeholder-desc">展示该软件的上传/下载流量变化</p>
|
||||
</div>
|
||||
<!-- 选项卡内容 -->
|
||||
<div class="detail-tabs">
|
||||
<n-tabs default-value="overview" type="line">
|
||||
<!-- 概览 -->
|
||||
<n-tab-pane name="overview" tab="概览">
|
||||
<div class="tab-content">
|
||||
<div class="overview-grid">
|
||||
<!-- 软件信息卡片 -->
|
||||
<div class="info-section">
|
||||
<h4 class="section-title">软件信息</h4>
|
||||
<SoftwareInfoCard :software-info="softwareInfo" />
|
||||
</div>
|
||||
|
||||
<!-- 协议分布图 -->
|
||||
<div class="protocol-section">
|
||||
<h4 class="section-title">协议分布</h4>
|
||||
<ProtocolChart :data="protocolData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
|
||||
<div class="traffic-stats-section">
|
||||
<h4 class="section-title">流量统计</h4>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总流量</div>
|
||||
<div class="stat-value">{{ formatBytes(software.totalBytes || 0) }}</div>
|
||||
<!-- 网络连接 -->
|
||||
<n-tab-pane name="network" tab="网络连接">
|
||||
<div class="tab-content">
|
||||
<div class="network-grid">
|
||||
<!-- 连接关系图 -->
|
||||
<div class="relation-section">
|
||||
<h4 class="section-title">连接关系</h4>
|
||||
<NetworkRelationChart :data="networkRelationData" :software="softwareDetail" />
|
||||
</div>
|
||||
|
||||
<!-- 端口统计表 -->
|
||||
<div class="ports-section">
|
||||
<h4 class="section-title">端口统计</h4>
|
||||
<PortStatsTable :data="portStatsData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
|
||||
<!-- 流量详情 -->
|
||||
<n-tab-pane name="traffic" tab="流量详情">
|
||||
<div class="tab-content">
|
||||
<div class="traffic-details">
|
||||
<div class="traffic-chart-section">
|
||||
<h4 class="section-title">流量趋势 ({{ timeRange }})</h4>
|
||||
<div class="traffic-chart-placeholder">
|
||||
<div class="placeholder-content">
|
||||
<n-icon :component="TrendingUpOutline" size="48" />
|
||||
<p>流量趋势图</p>
|
||||
<p class="placeholder-desc">展示该软件的上传/下载流量变化</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">上传</div>
|
||||
<div class="stat-value">{{ formatBytes(software.uploadBytes || 0) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">下载</div>
|
||||
<div class="stat-value">{{ formatBytes(software.downloadBytes || 0) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">平均速度</div>
|
||||
<div class="stat-value">{{ formatSpeed(averageSpeed) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="traffic-stats-section">
|
||||
<h4 class="section-title">流量统计</h4>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总流量</div>
|
||||
<div class="stat-value">{{ formatBytes(software.totalBytes || 0) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">上传</div>
|
||||
<div class="stat-value">{{ formatBytes(software.uploadBytes || 0) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">下载</div>
|
||||
<div class="stat-value">{{ formatBytes(software.downloadBytes || 0) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">平均速度</div>
|
||||
<div class="stat-value">{{ formatSpeed(averageSpeed) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!loading && !softwareDetail" class="no-data">
|
||||
<div class="no-data-icon">📊</div>
|
||||
<div class="no-data-text">暂无软件详情数据</div>
|
||||
</div>
|
||||
</n-spin>
|
||||
|
||||
<template #action>
|
||||
<div class="modal-actions">
|
||||
<n-button @click="visible = false">关闭</n-button>
|
||||
<n-button type="primary" @click="exportData">
|
||||
<template #icon>
|
||||
<n-icon :component="DownloadOutline" />
|
||||
</template>
|
||||
导出数据
|
||||
</n-button>
|
||||
</div>
|
||||
<n-button @click="visible = false">关闭</n-button>
|
||||
<n-button type="primary" @click="fetchAllData" :loading="loading">
|
||||
<template #icon>
|
||||
<n-icon :component="RefreshOutline" />
|
||||
</template>
|
||||
刷新数据
|
||||
</n-button>
|
||||
</template>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { NModal, NTabs, NTabPane, NButton, NIcon } from 'naive-ui'
|
||||
import { TrendingUpOutline, DownloadOutline } from '@vicons/ionicons5'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { NModal, NTabs, NTabPane, NButton, NIcon, NSpin } from 'naive-ui'
|
||||
import { TrendingUpOutline, DownloadOutline, RefreshOutline } from '@vicons/ionicons5'
|
||||
import { httpClient } from '@/utils/http'
|
||||
import type { ApiResponse } from '@/types/http'
|
||||
|
||||
// 导入子组件
|
||||
import SoftwareInfoCard from './SoftwareInfoCard.vue'
|
||||
@@ -149,14 +163,66 @@ import NetworkRelationChart from './NetworkRelationChart.vue'
|
||||
import PortStatsTable from './PortStatsTable.vue'
|
||||
import ProtocolChart from './ProtocolChart.vue'
|
||||
|
||||
// 数据接口定义
|
||||
interface SoftwareDetail {
|
||||
appId: string
|
||||
processName: string
|
||||
displayName: string
|
||||
processPath: string
|
||||
icon: string
|
||||
version: string
|
||||
company: string
|
||||
totalBytes: number
|
||||
uploadBytes: number
|
||||
downloadBytes: number
|
||||
connectionCount: number
|
||||
percentage: number
|
||||
}
|
||||
|
||||
interface SoftwareInfo {
|
||||
processName: string
|
||||
displayName: string
|
||||
version: string
|
||||
company: string
|
||||
processPath: string
|
||||
fileSize: number
|
||||
}
|
||||
|
||||
interface NetworkRelationData {
|
||||
nodes: Array<{
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
size: number
|
||||
category: number
|
||||
}>
|
||||
links: Array<{
|
||||
source: string
|
||||
target: string
|
||||
value: number
|
||||
label: string
|
||||
}>
|
||||
}
|
||||
|
||||
interface PortStats {
|
||||
port: number
|
||||
protocol: string
|
||||
connectionCount: number
|
||||
totalBytes: number
|
||||
remoteHosts: string[]
|
||||
}
|
||||
|
||||
interface ProtocolData {
|
||||
protocol: string
|
||||
bytes: number
|
||||
percentage: number
|
||||
color: string
|
||||
}
|
||||
|
||||
// Props定义
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
software?: any
|
||||
softwareInfo?: any
|
||||
networkRelationData?: any
|
||||
portStatsData?: any[]
|
||||
protocolData?: any[]
|
||||
appId?: string | null
|
||||
timeRange?: string
|
||||
}>()
|
||||
|
||||
@@ -165,19 +231,165 @@ const emit = defineEmits<{
|
||||
'update:show': [value: boolean]
|
||||
}>()
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const softwareDetail = ref<SoftwareDetail | null>(null)
|
||||
const softwareInfo = ref<SoftwareInfo | null>(null)
|
||||
const networkRelationData = ref<NetworkRelationData>({ nodes: [], links: [] })
|
||||
const portStatsData = ref<PortStats[]>([])
|
||||
const protocolData = ref<ProtocolData[]>([])
|
||||
|
||||
// 计算属性
|
||||
const visible = computed({
|
||||
get: () => props.show,
|
||||
set: (value) => emit('update:show', value)
|
||||
set: (value) => emit('update:show', value),
|
||||
})
|
||||
|
||||
// 计算平均速度
|
||||
const averageSpeed = computed(() => {
|
||||
if (!props.software?.totalBytes) return 0
|
||||
if (!softwareDetail.value?.totalBytes) return 0
|
||||
// 模拟计算，实际应根据时间范围计算
|
||||
return props.software.totalBytes / 3600 // 假设1小时的数据
|
||||
return softwareDetail.value.totalBytes / 3600 // 假设1小时的数据
|
||||
})
|
||||
|
||||
// API调用函数
|
||||
const getSoftwareDetail = async () => {
|
||||
if (!props.appId) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
timeRange: props.timeRange || '1hour',
|
||||
}
|
||||
|
||||
const res: ApiResponse<SoftwareDetail> = await httpClient.get(
|
||||
`/apps/${props.appId}/detail`,
|
||||
params,
|
||||
)
|
||||
if (res.success && res.data) {
|
||||
softwareDetail.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取软件详情失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getSoftwareInfo = async () => {
|
||||
if (!props.appId) return
|
||||
|
||||
try {
|
||||
const res: ApiResponse<SoftwareInfo> = await httpClient.get(`/apps/${props.appId}/info`)
|
||||
if (res.success && res.data) {
|
||||
softwareInfo.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取软件信息失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const getNetworkRelation = async () => {
|
||||
if (!props.appId) return
|
||||
|
||||
try {
|
||||
const params = {
|
||||
timeRange: props.timeRange || '1hour',
|
||||
}
|
||||
|
||||
const res: ApiResponse<NetworkRelationData> = await httpClient.get(
|
||||
`/apps/${props.appId}/network-relation`,
|
||||
params,
|
||||
)
|
||||
if (res.success && res.data) {
|
||||
networkRelationData.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取网络关系数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const getPortStats = async () => {
|
||||
if (!props.appId) return
|
||||
|
||||
try {
|
||||
const params = {
|
||||
timeRange: props.timeRange || '1hour',
|
||||
}
|
||||
|
||||
const res: ApiResponse<PortStats[]> = await httpClient.get(
|
||||
`/apps/${props.appId}/port-stats`,
|
||||
params,
|
||||
)
|
||||
if (res.success && res.data) {
|
||||
portStatsData.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取端口统计失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const getProtocolData = async () => {
|
||||
if (!props.appId) return
|
||||
|
||||
try {
|
||||
const params = {
|
||||
timeRange: props.timeRange || '1hour',
|
||||
}
|
||||
|
||||
const res: ApiResponse<ProtocolData[]> = await httpClient.get(
|
||||
`/apps/${props.appId}/protocols`,
|
||||
params,
|
||||
)
|
||||
if (res.success && res.data) {
|
||||
protocolData.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取协议数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取所有数据
|
||||
const fetchAllData = async () => {
|
||||
if (!props.appId) return
|
||||
|
||||
await Promise.all([
|
||||
getSoftwareDetail(),
|
||||
getSoftwareInfo(),
|
||||
getNetworkRelation(),
|
||||
getPortStats(),
|
||||
getProtocolData(),
|
||||
])
|
||||
}
|
||||
|
||||
// 监听AppId和时间范围变化
|
||||
watch(
|
||||
[() => props.appId, () => props.timeRange],
|
||||
() => {
|
||||
if (props.show && props.appId) {
|
||||
fetchAllData()
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
if (newVal && props.appId) {
|
||||
fetchAllData()
|
||||
} else if (!newVal) {
|
||||
// 关闭弹窗时清理数据
|
||||
softwareDetail.value = null
|
||||
softwareInfo.value = null
|
||||
networkRelationData.value = { nodes: [], links: [] }
|
||||
portStatsData.value = []
|
||||
protocolData.value = []
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// 格式化字节数
|
||||
const formatBytes = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 B'
|
||||
@@ -402,6 +614,36 @@ const exportData = () => {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 无数据状态 */
|
||||
.no-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 20px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.no-data-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.no-data-text {
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 应用图标 */
|
||||
.app-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.detail-header {
|
||||
|
||||
@@ -1,52 +1,166 @@
|
||||
<template>
|
||||
<div class="software-ranking-list">
|
||||
<div class="ranking-header">
|
||||
<div class="search-box">
|
||||
<n-input
|
||||
v-model:value="searchQuery"
|
||||
placeholder="搜索软件..."
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon :component="SearchOutline" />
|
||||
</template>
|
||||
</n-input>
|
||||
<div class="header-top">
|
||||
<div class="search-box">
|
||||
<n-input
|
||||
v-model:value="searchQuery"
|
||||
placeholder="搜索软件..."
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon :component="SearchOutline" />
|
||||
</template>
|
||||
</n-input>
|
||||
</div>
|
||||
<div class="sort-controls">
|
||||
<n-select
|
||||
v-model:value="sortBy"
|
||||
size="small"
|
||||
:options="sortOptions"
|
||||
placeholder="排序方式"
|
||||
style="width: 120px"
|
||||
/>
|
||||
<n-button
|
||||
size="small"
|
||||
:type="sortOrder === 'desc' ? 'primary' : 'default'"
|
||||
@click="toggleSortOrder"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon :component="sortOrder === 'desc' ? ArrowDownOutline : ArrowUpOutline" />
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表头部标题 -->
|
||||
<div class="list-headers">
|
||||
<!-- 左侧排名和图标区域 -->
|
||||
<div class="header-left">
|
||||
<div class="rank-header-cell">#</div>
|
||||
<div class="icon-header-cell"></div>
|
||||
</div>
|
||||
|
||||
<!-- 中间软件信息区域 -->
|
||||
<div class="header-middle">
|
||||
<div class="app-header-cell">软件信息</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧统计数据区域 -->
|
||||
<div class="header-right">
|
||||
<div class="stats-headers">
|
||||
<div class="stat-header-cell">总流量</div>
|
||||
<div class="stat-header-cell">上传</div>
|
||||
<div class="stat-header-cell">连接数</div>
|
||||
<div class="stat-header-cell">占比</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container" ref="listContainer">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="filteredData"
|
||||
:row-key="(row: SoftwareRankingItem) => `${row.processName}_${row.rank}_${row.totalBytes}`"
|
||||
:row-class-name="(row: SoftwareRankingItem) => selectedSoftware?.processName === row.processName ? 'selected-row' : ''"
|
||||
:on-update:checked-row-keys="() => {}"
|
||||
@row-click="selectSoftware"
|
||||
striped
|
||||
size="small"
|
||||
:scroll-x="800"
|
||||
:max-height="containerHeight"
|
||||
/>
|
||||
<div class="list-container" ref="listContainer" :style="{ height: containerHeight }">
|
||||
<div class="software-list">
|
||||
<div
|
||||
v-for="item in filteredAndSortedData"
|
||||
:key="item.appId"
|
||||
class="software-item"
|
||||
@click="selectSoftware(item)"
|
||||
>
|
||||
<!-- 左侧排名和图标 -->
|
||||
<div class="item-left">
|
||||
<div class="rank-badge" :class="getRankClass(item.rank)">
|
||||
{{ item.rank }}
|
||||
</div>
|
||||
<div class="app-icon-container">
|
||||
<img
|
||||
v-if="item.icon"
|
||||
:src="`data:image/png;base64,${item.icon}`"
|
||||
class="app-icon"
|
||||
:alt="item.displayName"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="app-icon-placeholder"
|
||||
:style="getGradientColor(item.displayName.charAt(0).toUpperCase())"
|
||||
>
|
||||
{{ item.displayName.charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间软件信息 -->
|
||||
<div class="item-middle">
|
||||
<div class="app-main-info">
|
||||
<div class="app-name-line">
|
||||
<span class="app-name">{{ item.displayName }}</span>
|
||||
<span v-if="item.version" class="version">v{{ item.version }}</span>
|
||||
</div>
|
||||
<div class="app-meta-line">
|
||||
<span class="process-name">{{ item.processName }}</span>
|
||||
<span v-if="item.company" class="company">{{ item.company }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-path-line" v-if="item.processPath">
|
||||
<span class="path-label">路径:</span>
|
||||
<span class="path-value">{{ item.processPath }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧统计数据 -->
|
||||
<div class="item-right">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value primary">{{ formatBytes(item.totalBytes) }}</div>
|
||||
<div class="stat-label">总流量</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ formatBytes(item.uploadBytes || 0) }}</div>
|
||||
<div class="stat-label">上传</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ item.connectionCount }}</div>
|
||||
<div class="stat-label">连接数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value percent">{{ item.percentage.toFixed(1) }}%</div>
|
||||
<div class="stat-label">占比</div>
|
||||
<div class="percentage-bar">
|
||||
<div
|
||||
class="percentage-fill"
|
||||
:style="{ width: `${Math.min(item.percentage, 100)}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="filteredAndSortedData.length === 0" class="empty-state">
|
||||
<div class="empty-icon">📊</div>
|
||||
<div class="empty-text">{{ searchQuery ? '未找到匹配的软件' : '暂无数据' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据统计信息 -->
|
||||
<div class="data-info">
|
||||
<span>共 {{ filteredData.length }} 条数据</span>
|
||||
<span>共 {{ filteredAndSortedData.length }} 条数据</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick, h } from 'vue'
|
||||
import { NInput, NIcon, NButton, NDataTable, NAvatar, NTag, NTooltip } from 'naive-ui'
|
||||
import { SearchOutline } from '@vicons/ionicons5'
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
import { NInput, NIcon, NButton, NSelect } from 'naive-ui'
|
||||
import { SearchOutline, ArrowUpOutline, ArrowDownOutline } from '@vicons/ionicons5'
|
||||
import { getGradientColor } from '@/utils/colorUtils'
|
||||
|
||||
// 接口定义
|
||||
interface SoftwareRankingItem {
|
||||
rank: number
|
||||
appId: string
|
||||
processName: string
|
||||
displayName: string
|
||||
processPath?: string
|
||||
@@ -64,7 +178,6 @@ interface SoftwareRankingItem {
|
||||
const props = defineProps<{
|
||||
data: SoftwareRankingItem[]
|
||||
timeRange: string
|
||||
selectedSoftware?: SoftwareRankingItem | null
|
||||
}>()
|
||||
|
||||
// Emits
|
||||
@@ -75,6 +188,17 @@ const emit = defineEmits<{
|
||||
// 响应式数据
|
||||
const searchQuery = ref('')
|
||||
const listContainer = ref<HTMLElement>()
|
||||
const sortBy = ref('totalBytes')
|
||||
const sortOrder = ref<'asc' | 'desc'>('desc')
|
||||
|
||||
// 排序选项
|
||||
const sortOptions = [
|
||||
{ label: '总流量', value: 'totalBytes' },
|
||||
{ label: '上传流量', value: 'uploadBytes' },
|
||||
{ label: '连接数', value: 'connectionCount' },
|
||||
{ label: '占比', value: 'percentage' },
|
||||
{ label: '排名', value: 'rank' }
|
||||
]
|
||||
|
||||
// 计算表格容器高度
|
||||
const containerHeight = computed(() => {
|
||||
@@ -87,123 +211,16 @@ const containerHeight = computed(() => {
|
||||
return '400px'
|
||||
})
|
||||
|
||||
// 表格列定义
|
||||
const columns: DataTableColumns<SoftwareRankingItem> = [
|
||||
{
|
||||
title: '排名',
|
||||
key: 'rank',
|
||||
width: 60,
|
||||
render: (row) => {
|
||||
const rankClass = row.rank <= 3 ? 'top-three' : row.rank <= 10 ? 'top-ten' : 'normal'
|
||||
return h('div', { class: `rank-badge ${rankClass}` }, row.rank.toString())
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
key: 'icon',
|
||||
width: 60,
|
||||
render: (row) => {
|
||||
return h('div', { class: 'icon-column' }, [
|
||||
row.icon
|
||||
? h('img', {
|
||||
src: `data:image/png;base64,${row.icon}`,
|
||||
class: 'app-icon',
|
||||
alt: row.displayName
|
||||
})
|
||||
: h('div', {
|
||||
class: 'app-icon-span',
|
||||
style: getGradientColor(row.displayName.charAt(0).toUpperCase())
|
||||
}, [
|
||||
h('span', row.displayName.charAt(0).toUpperCase())
|
||||
])
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '软件名称',
|
||||
key: 'displayName',
|
||||
width: 150,
|
||||
render: (row) => {
|
||||
return h('div', { class: 'software-name-cell' }, row.displayName)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '公司',
|
||||
key: 'company',
|
||||
width: 120,
|
||||
render: (row) => row.company || '-'
|
||||
},
|
||||
{
|
||||
title: '版本',
|
||||
key: 'version',
|
||||
width: 100,
|
||||
render: (row) => row.version || '-'
|
||||
},
|
||||
{
|
||||
title: '路径',
|
||||
key: 'processPath',
|
||||
width: 200,
|
||||
ellipsis: {
|
||||
tooltip: true
|
||||
},
|
||||
render: (row) => row.processPath || '-'
|
||||
},
|
||||
{
|
||||
title: '总流量',
|
||||
key: 'totalBytes',
|
||||
width: 100,
|
||||
render: (row) => formatBytes(row.totalBytes),
|
||||
sorter: {
|
||||
compare: (a, b) => Number(a.totalBytes) - Number(b.totalBytes),
|
||||
multiple: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '上传',
|
||||
key: 'uploadBytes',
|
||||
width: 100,
|
||||
render: (row) => formatBytes(row.uploadBytes || 0),
|
||||
sorter: {
|
||||
compare: (a, b) => Number(a.uploadBytes || 0) - Number(b.uploadBytes || 0),
|
||||
multiple: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '连接数',
|
||||
key: 'connectionCount',
|
||||
width: 80,
|
||||
render: (row) => row.connectionCount.toString(),
|
||||
sorter: {
|
||||
compare: (a, b) => Number(a.connectionCount) - Number(b.connectionCount),
|
||||
multiple: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '占比',
|
||||
key: 'percentage',
|
||||
width: 80,
|
||||
render: (row) => {
|
||||
return h('div', { class: 'percentage-cell' }, [
|
||||
h('div', { class: 'percentage-text' }, `${row.percentage.toFixed(1)}%`),
|
||||
h('div', { class: 'percentage-bar' }, [
|
||||
h('div', {
|
||||
class: 'percentage-fill',
|
||||
style: { width: `${Math.min(row.percentage, 100)}%` }
|
||||
})
|
||||
])
|
||||
])
|
||||
},
|
||||
sorter: {
|
||||
compare: (a, b) => Number(a.percentage) - Number(b.percentage),
|
||||
multiple: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
// 切换排序顺序
|
||||
const toggleSortOrder = () => {
|
||||
sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc'
|
||||
}
|
||||
|
||||
// 搜索过滤
|
||||
const filteredData = computed(() => {
|
||||
// 搜索和排序
|
||||
const filteredAndSortedData = computed(() => {
|
||||
let filtered = props.data
|
||||
|
||||
// 搜索过滤
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
filtered = filtered.filter(item =>
|
||||
@@ -213,8 +230,25 @@ const filteredData = computed(() => {
|
||||
)
|
||||
}
|
||||
|
||||
// 不再限制显示数量，显示所有数据
|
||||
return filtered
|
||||
// 排序
|
||||
const sorted = [...filtered].sort((a, b) => {
|
||||
let aValue = a[sortBy.value as keyof SoftwareRankingItem] as number
|
||||
let bValue = b[sortBy.value as keyof SoftwareRankingItem] as number
|
||||
|
||||
// 处理可能为 undefined 的值
|
||||
if (sortBy.value === 'uploadBytes') {
|
||||
aValue = a.uploadBytes || 0
|
||||
bValue = b.uploadBytes || 0
|
||||
}
|
||||
|
||||
if (sortOrder.value === 'desc') {
|
||||
return bValue - aValue
|
||||
} else {
|
||||
return aValue - bValue
|
||||
}
|
||||
})
|
||||
|
||||
return sorted
|
||||
})
|
||||
|
||||
// 选择软件
|
||||
@@ -255,50 +289,146 @@ watch(() => props.timeRange, () => {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.ranking-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.data-info {
|
||||
.sort-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
border-top: 1px solid var(--border-secondary);
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-headers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 表格内容样式 */
|
||||
:deep(.n-data-table-td) {
|
||||
padding: 8px 12px !important;
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.selected-row) {
|
||||
background-color: var(--bg-selected) !important;
|
||||
.rank-header-cell {
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-header-cell {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.app-header-cell {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.stats-headers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-header-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 55px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.software-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.software-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.software-item:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -306,107 +436,312 @@ watch(() => props.timeRange, () => {
|
||||
.rank-badge.top-three {
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4e);
|
||||
color: #92400e;
|
||||
box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
|
||||
box-shadow: 0 2px 12px rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
|
||||
.rank-badge.top-ten {
|
||||
background: linear-gradient(135deg, #c0c0c0, #e5e7eb);
|
||||
color: #374151;
|
||||
box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
|
||||
}
|
||||
|
||||
.rank-badge.normal {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-secondary);
|
||||
}
|
||||
|
||||
.icon-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.app-icon-container {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.app-icon-span {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, #1d4ed8 100%);
|
||||
.app-icon-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.app-icon-span span {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.software-name-cell {
|
||||
font-size: 13px;
|
||||
.item-middle {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
margin-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.app-main-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.app-name-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.percentage-cell {
|
||||
.version {
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-quaternary);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-meta-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.process-name {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-family: 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.company {
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.app-path-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.path-label {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.path-value {
|
||||
color: var(--text-muted);
|
||||
font-family: 'Consolas', monospace;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.percentage-text {
|
||||
font-size: 11px;
|
||||
.stat-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stat-value.primary {
|
||||
color: var(--accent-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stat-value.percent {
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.percentage-bar {
|
||||
width: 40px;
|
||||
width: 36px;
|
||||
height: 3px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.percentage-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: linear-gradient(90deg, var(--accent-success), #10b981);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
/* 表格样式覆盖 */
|
||||
:deep(.n-data-table) {
|
||||
--n-border-color: var(--border-secondary);
|
||||
--n-th-color: var(--bg-tertiary);
|
||||
--n-td-color: var(--bg-card);
|
||||
--n-td-color-hover: var(--bg-hover);
|
||||
--n-text-color: var(--text-primary);
|
||||
--n-th-text-color: var(--text-secondary);
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
:deep(.n-data-table-thead) {
|
||||
background: var(--bg-secondary);
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-tr:hover) {
|
||||
cursor: pointer;
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:deep(.n-data-table-td) {
|
||||
border-bottom: 1px solid var(--border-tertiary) !important;
|
||||
.data-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
border-top: 1px solid var(--border-secondary);
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stats-headers {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item-middle {
|
||||
margin-left: 10px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
margin-left: 10px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
min-width: 45px;
|
||||
}
|
||||
|
||||
.stat-header-cell {
|
||||
min-width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-top {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.list-headers {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.software-item {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.item-middle {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.app-path-line {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user