A:调整样式

src/NetVizor.Frontend/src/views/MonitorView/MonitorSidebar.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="sidebar scrollbar-primary scrollbar-thin" :style="{ width: width + 'px' }">
+  <div class="sidebar" :style="{ width: width + 'px' }">
     <div class="sidebar-content">
       <template v-if="false">
         <div class="sidebar-header">
           <h3 class="sidebar-title">系统概览</h3>
-          <div class="sidebar-badge">{{ data.processCount }}</div>
+          <div class="sidebar-badge">{{ appInfos.length }}</div>
         </div>
 
         <div class="sidebar-stats">
@@ -16,98 +16,95 @@
         <h3 class="sidebar-title">所有连接</h3>
       </div>
 
-      <!-- 应用列表 -->
-      <div class="app-list">
-        <div
-          v-for="app in useApplicationStore1.appInfos"
-          :key="app.Id"
-          class="app-item"
-          :class="{ 'app-item--selected': selectedApp?.Id === app.Id }"
-          @click="selectApp(app)"
-          @mouseenter="handleMouseEnter"
-          @mouseleave="handleMouseLeave"
-        >
-          <!-- 书角折叠效果 -->
-          <div v-if="selectedApp?.Id === app.Id" class="folded-corner"></div>
+      <!-- 应用列表容器 - 添加独立滚动 -->
+      <div class="app-list-container">
+        <div class="app-list scrollbar-primary scrollbar-thin">
+          <div
+            v-for="app in appInfos"
+            :key="app.Id"
+            class="app-item"
+            :class="{ 'app-item--selected': selectedApp?.Id === app.Id }"
+            @click="selectApp(app)"
+            @mouseenter="handleMouseEnter"
+            @mouseleave="handleMouseLeave"
+          >
+            <!-- 书角折叠效果 -->
+            <div v-if="selectedApp?.Id === app.Id" class="folded-corner"></div>
 
-          <!-- 应用图标 -->
-          <div class="app-icon">
-
-            <img v-if="!lodash.isEmpty(app.IconBase64)" :src="'data:image/jpeg;base64,' + app.IconBase64" :alt="app.ProductName" />
-            <div v-else>
-              <div class="app-icon-span">
-                <span>{{getFirstByte(app.ProductName)}}</span>
+            <!-- 应用图标 -->
+            <div class="app-icon">
+              <img v-if="!lodash.isEmpty(app.IconBase64)" :src="'data:image/jpeg;base64,' + app.IconBase64" :alt="app.ProductName" />
+              <div v-else>
+                <div class="app-icon-span">
+                  <span>{{ getFirstChar(app.ProductName) }}</span>
+                </div>
               </div>
             </div>
-          </div>
 
-          <!-- 应用信息 -->
-          <div class="app-info">
-            <div class="app-name">{{ app.ProductName }}</div>
-            <div class="app-details">
-              <span class="app-detail">线程数: {{ app.ProcessIds.length }}</span>
-              <span class="app-detail">内存: {{ formatSpeed(app.UseMemory) }}</span>
-              <span class="app-detail">{{ !!app.ExitCode ? '已退出' : '活动' }}</span>
+            <!-- 应用信息 -->
+            <div class="app-info">
+              <div class="app-name">{{ app.ProductName }}</div>
+              <div class="app-details">
+                <span class="app-detail">线程数: {{ app.ProcessIds.length }}</span>
+                <span class="app-detail">内存: {{ formatMemory(app.UseMemory) }}</span>
+                <span class="app-detail">{{ !!app.ExitCode ? '已退出' : '活动' }}</span>
+              </div>
+            </div>
+
+            <!-- 应用状态指示器 -->
+            <div class="app-status">
+              <div
+                class="status-indicator"
+                :class="`status-${!!app.ExitCode ? 'inactive' : 'active'}`"
+              ></div>
             </div>
           </div>
 
-          <!-- 应用状态指示器 -->
-          <div class="app-status">
-            <div
-              class="status-indicator"
-              :class="`status-${!!app.ExitCode ? 'active' : 'background'}`"
-            ></div>
+          <!-- 空状态 -->
+          <div v-if="appInfos.length === 0" class="empty-state">
+            <n-icon :component="DesktopOutline" size="48" class="empty-icon" />
+            <div class="empty-title">暂无运行的应用</div>
+            <div class="empty-subtitle">系统中没有检测到正在运行的应用程序</div>
           </div>
         </div>
       </div>
-
-      <!-- 空状态 -->
-      <div v-if="applications.length === 0" class="empty-state">
-        <n-icon :component="DesktopOutline" size="48" class="empty-icon" />
-        <div class="empty-title">暂无运行的应用</div>
-        <div class="empty-subtitle">系统中没有检测到正在运行的应用程序</div>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, defineEmits, defineProps, onMounted, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
 import { NIcon } from 'naive-ui'
 import { storeToRefs } from 'pinia'
-import { CheckmarkOutline, DesktopOutline } from '@vicons/ionicons5'
+import { DesktopOutline } from '@vicons/ionicons5'
 import { httpClient } from '@/utils/http.ts'
 import { ResponseModel, SubscriptionInfo } from '@/types/response'
-import { useWebSocketStore, getIsConnected } from '@/stores/websocketStore'
+import { useWebSocketStore } from '@/stores/websocketStore'
 import { useApplicationStore } from '@/stores/application'
 import { ApplicationType } from '@/types/infoModel'
 import { convertFileSize } from '@/utils/fileUtil'
 import { FILE_SIZE_UNIT_ENUM } from '@/constants/enums'
 import lodash from 'lodash'
-// 定义应用数据类型
-interface Application {
-  id: string
-  name: string
-  icon: string
-  pid: number
-  memory: string
-  status: string
-  statusType: 'active' | 'idle' | 'background'
-  path?: string
-  windowTitle?: string
-  cpuUsage?: number
-}
 
-// 事件定义
-const emit = defineEmits<{
-  'app-selected': [app: Application | null]
+// Props
+const props = defineProps<{
+  width: number
 }>()
+
+// Store
 const webSocketStore = useWebSocketStore()
+const applicationStore = useApplicationStore()
 const { isOpen } = storeToRefs(webSocketStore)
+const { appInfos } = storeToRefs(applicationStore)
+
+// 选中的应用
+const selectedApp = ref<ApplicationType | null>(null)
+
+// 监听 WebSocket 连接状态
 watch(
   isOpen,
-  (oldValue, newValue) => {
-    if (oldValue || newValue) {
+  (newValue) => {
+    if (newValue) {
       // 发送请求【请求订阅软件列表】
       const subAppInfo: SubscriptionInfo = {
         subscriptionType: 'ApplicationInfo',
@@ -115,106 +112,35 @@ watch(
       }
 
       httpClient.post(`/subscribe`, JSON.stringify(subAppInfo)).then((res: ResponseModel) => {
-        console.log(res)
+        console.log('订阅应用信息成功:', res)
+      }).catch(err => {
+        console.error('订阅应用信息失败:', err)
       })
     }
   },
   { immediate: true },
 )
 
-// 绑定软件信息
-const useApplicationStore1 = useApplicationStore()
-const { appInfos } = storeToRefs(useApplicationStore1)
-watch(appInfos, (oldValue, newValue) => {})
-
-// 选中的应用
-const selectedApp = ref<ApplicationType | null>(null)
-
-// 计算人体工学单位
-const formatSpeed = (useMemory: number) => {
-  const fmt = convertFileSize(useMemory, FILE_SIZE_UNIT_ENUM.B)
-  return fmt.size + fmt.unit
+// 格式化内存显示
+const formatMemory = (memoryInBytes: number): string => {
+  const result = convertFileSize(memoryInBytes, FILE_SIZE_UNIT_ENUM.B)
+  return result.size + result.unit
 }
-// 获取软件名称的第一个字
-const getFirstByte = (name:string) => {
+
+// 获取软件名称的第一个字符
+const getFirstChar = (name: string): string => {
   if (lodash.isEmpty(name)) {
-    return ""
+    return "?"
   }
-  const firstChar = name.charAt(0);
-  return firstChar
+  return name.charAt(0).toUpperCase()
 }
 
-// 模拟应用数据
-const applications = ref<Application[]>([
-  {
-    id: '1',
-    name: 'Visual Studio Code',
-    icon: 'https://code.visualstudio.com/assets/images/code-stable.png',
-    pid: 12456,
-    memory: '245.6 MB',
-    status: '活跃',
-    statupe: 'active',
-    path: '/Applications/Visual Studio Code.app',
-    windowTitle: 'main.js - myproject',
-    cpuUsage: 5.2,
-  },
-  {
-    id: '2',
-    name: 'Google Chrome',
-    icon: 'https://upload.wikimedia.org/wikipedia/commons/e/e1/Google_Chrome_icon_%28February_2022%29.svg',
-    pid: 8923,
-    memory: '512.3 MB',
-    status: '活跃',
-    statusType: 'active',
-    path: '/Applications/Google Chrome.app',
-    windowTitle: 'GitHub - Dashboard',
-    cpuUsage: 12.8,
-  },
-  {
-    id: '3',
-    name: 'Spotify',
-    icon: 'https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg',
-    pid: 5647,
-    memory: '156.7 MB',
-    status: '后台运行',
-    statusType: 'background',
-    path: '/Applications/Spotify.app',
-    windowTitle: 'Spotify Premium',
-    cpuUsage: 2.1,
-  },
-  {
-    id: '4',
-    name: 'Finder',
-    icon: 'https://upload.wikimedia.org/wikipedia/en/f/f4/MacOS_Finder_Icon.png',
-    pid: 1234,
-    memory: '89.2 MB',
-    status: '空闲',
-    statusType: 'idle',
-    path: '/System/Library/CoreServices/Finder.app',
-    windowTitle: 'Documents',
-    cpuUsage: 0.8,
-  },
-  {
-    id: '5',
-    name: 'Slack',
-    icon: 'https://a.slack-edge.com/80588/marketing/img/icons/icon_slack_hash_colored.svg',
-    pid: 9876,
-    memory: '198.4 MB',
-    status: '活跃',
-    statusType: 'active',
-    path: '/Applications/Slack.app',
-    windowTitle: 'Slack - workspace',
-    cpuUsage: 3.7,
-  },
-])
-
 // 选择应用
-const selectApp = (app: Application) => {
+const selectApp = (app: ApplicationType) => {
   selectedApp.value = app
-  emit('app-selected', app)
 }
 
-// 鼠标悬停事件
+// 鼠标悬停事件（预留扩展）
 const handleMouseEnter = () => {
   // 可以在这里添加额外的悬停逻辑
 }
@@ -227,39 +153,175 @@ const handleMouseLeave = () => {
 defineExpose({
   clearSelection: () => {
     selectedApp.value = null
-    emit('app-selected', null)
   },
   selectById: (id: string) => {
-    const app = applications.value.find((a) => a.id === id)
+    const app = appInfos.value.find((a) => a.Id === id)
     if (app) {
       selectApp(app)
     }
   },
+  // 新增获取当前选中应用的方法
+  getSelectedApp: () => selectedApp.value
 })
-
-// Props
-const props = defineProps<{
-  width: number
-}>()
-
-// 模拟数据
-const data = {
-  activeConnections: 247,
-  processCount: 43,
-  networkSpeed: '5.2 MB/s',
-  ruleCount: 156,
-}
-
-// 处理快速操作
-const handleAction = (type: string) => {
-  emit('action', type)
-  console.log(`执行操作: ${type}`)
-}
 </script>
 
 <style scoped>
+/* 样式部分保持不变 */
+/* 侧边栏容器 */
+.sidebar {
+  background: var(--bg-glass, var(--bg-card));
+  backdrop-filter: var(--backdrop-blur, blur(10px));
+  border-right: 1px solid var(--border-primary);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
 
-/*字体图标*/
+.sidebar-content {
+  padding: 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* 防止整体滚动 */
+}
+
+/* 头部 */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  flex-shrink: 0; /* 防止压缩 */
+}
+
+.sidebar-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 0;
+  z-index: 90;
+}
+
+.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;
+  flex-shrink: 0; /* 防止压缩 */
+}
+
+/* 应用列表容器 - 关键改动 */
+.app-list-container {
+  flex: 1;
+  min-height: 0; /* 重要：允许收缩 */
+  display: flex;
+  flex-direction: column;
+}
+
+/* 应用列表 - 独立滚动 */
+.app-list {
+  flex: 1;
+  overflow-y: auto; /* 启用垂直滚动 */
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 5px;
+  padding-left: 4px;
+  padding-right: 8px; /* 为滚动条留出空间 */
+  margin-right: -8px; /* 抵消padding */
+}
+
+/* 自定义滚动条样式 */
+.app-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.app-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.app-list::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.app-list::-webkit-scrollbar-thumb:hover {
+  background: var(--text-quaternary);
+}
+
+/* Firefox 滚动条 */
+.app-list {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-primary) transparent;
+}
+
+/* 应用项目 */
+.app-item {
+  background: var(--bg-card);
+  backdrop-filter: var(--backdrop-blur);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0; /* 防止压缩 */
+}
+
+.app-item:hover {
+  transform: translateY(-1px);
+  border-color: var(--border-hover);
+  background: var(--bg-hover, var(--bg-card));
+  box-shadow: var(--shadow-md);
+}
+
+.app-item--selected {
+  border: 1px solid var(--accent-primary);
+  background: var(--monitor-bg-card-selected);
+  box-shadow:
+    0 0 0 4px var(--monitor-accent-primary-alpha),
+    0 8px 25px -5px rgba(59, 130, 246, 0.3);
+  transform: translateY(-1px) scale(1.01);
+  position: relative;
+  z-index: 5;
+}
+
+/* 选中元素的左侧强调边框 */
+.app-item--selected::before {
+  content: '';
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  bottom: -2px;
+  width: 6px;
+  background: linear-gradient(
+    to bottom,
+    var(--accent-primary) 0%,
+    #1d4ed8 50%,
+    var(--accent-primary) 100%
+  );
+  border-radius: 6px 0 0 6px;
+  z-index: 1;
+}
+
+/* 字体图标 */
 .app-icon-span {
   width: 32px;
   height: 32px;
@@ -277,7 +339,7 @@ const handleAction = (type: string) => {
   color: white;
 }
 
-/* 书角折叠效果 - 平衡版 */
+/* 书角折叠效果 */
 .folded-corner {
   position: absolute;
   top: 0;
@@ -325,117 +387,6 @@ const handleAction = (type: string) => {
     cornerGlow 4s ease-in-out infinite alternate;
 }
 
-@keyframes foldIn {
-  0% {
-    transform: scale(0.7) rotate(-15deg);
-    opacity: 0;
-  }
-  60% {
-    transform: scale(1.05) rotate(-3deg);
-    opacity: 0.9;
-  }
-  100% {
-    transform: scale(1) rotate(0deg);
-    opacity: 1;
-  }
-}
-
-@keyframes cornerGlow {
-  0% {
-    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.15));
-  }
-  100% {
-    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.15))
-      drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
-  }
-}
-
-.app-list-view {
-  height: 100%;
-  background: var(--bg-secondary);
-}
-
-.app-list-container {
-  padding: 20px;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-/* 头部 */
-.list-header {
-  margin-bottom: 20px;
-}
-
-.list-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 4px 0;
-}
-
-.list-subtitle {
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
-/* 应用列表 */
-.app-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.app-item {
-  background: var(--bg-card);
-  backdrop-filter: var(--backdrop-blur);
-  border: 1px solid var(--border-primary);
-  border-radius: 12px;
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.app-item:hover {
-  transform: translateY(-1px);
-  border-color: var(--border-hover);
-  background: var(--bg-hover, var(--bg-card));
-  box-shadow: var(--shadow-md);
-}
-
-.app-item--selected {
-  border: 1px solid var(--accent-primary);
-  background: var(--monitor-bg-card-selected);
-  box-shadow:
-    0 0 0 4px var(--monitor-accent-primary-alpha),
-    0 8px 25px -5px rgba(59, 130, 246, 0.3);
-  transform: translateY(-1px) scale(1.02);
-  position: relative;
-  z-index: 5;
-}
-
-/* 选中元素的左侧强调边框 */
-.app-item--selected::before {
-  content: '';
-  position: absolute;
-  left: -2px;
-  top: -2px;
-  bottom: -2px;
-  width: 6px;
-  background: linear-gradient(
-    to bottom,
-    var(--accent-primary) 0%,
-    #1d4ed8 50%,
-    var(--accent-primary) 100%
-  );
-  border-radius: 6px 0 0 6px;
-  z-index: 1;
-}
-
 /* 应用图标 */
 .app-icon {
   width: 48px;
@@ -519,19 +470,11 @@ const handleAction = (type: string) => {
   background: var(--accent-success);
 }
 
-.status-background {
-  background: var(--accent-warning);
-}
-
-.status-background::before {
-  background: var(--accent-warning);
-}
-
-.status-idle {
+.status-inactive {
   background: var(--text-quaternary);
 }
 
-.status-idle::before {
+.status-inactive::before {
   background: var(--text-quaternary);
 }
 
@@ -539,6 +482,7 @@ const handleAction = (type: string) => {
 .empty-state {
   text-align: center;
   padding: 60px 20px;
+  margin: auto; /* 居中显示 */
 }
 
 .empty-icon {
@@ -559,6 +503,31 @@ const handleAction = (type: string) => {
 }
 
 /* 动画 */
+@keyframes foldIn {
+  0% {
+    transform: scale(0.7) rotate(-15deg);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.05) rotate(-3deg);
+    opacity: 0.9;
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes cornerGlow {
+  0% {
+    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.15));
+  }
+  100% {
+    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.15))
+    drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
+  }
+}
+
 @keyframes pulse {
   0%,
   100% {
@@ -571,22 +540,12 @@ const handleAction = (type: string) => {
   }
 }
 
-@keyframes bounceIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.3);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 /* 响应式 */
 @media (max-width: 768px) {
+  .sidebar-content {
+    padding: 16px;
+  }
+
   .app-item {
     padding: 12px;
   }
@@ -666,56 +625,13 @@ const handleAction = (type: string) => {
   .folded-corner::after {
     border-left-color: rgba(255, 255, 255, 0.08);
   }
-}
 
-/* 侧边栏容器 */
-.sidebar {
-  background: var(--bg-glass, var(--bg-card));
-  backdrop-filter: var(--backdrop-blur, blur(10px));
-  border-right: 1px solid var(--border-primary);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
+  .app-list::-webkit-scrollbar-thumb {
+    background: var(--border-primary);
+  }
 
-.sidebar-content {
-  padding: 24px;
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-}
-
-/* 头部 */
-.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;
-  z-index: 90;
-}
-
-.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;
+  .app-list::-webkit-scrollbar-thumb:hover {
+    background: var(--text-quaternary);
+  }
 }
 </style>