secagentx 3.0.0__py3-none-any.whl

backend/_assets/frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "secagentx-frontend",
+  "version": "2.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "@vicons/ionicons5": "^0.13.0",
+    "echarts": "^6.1.0",
+    "marked": "^12.0.0",
+    "naive-ui": "^2.38.0",
+    "pinia": "^2.1.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.62.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^29.1.1",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.10"
+  },
+  "overrides": {
+    "nanoid": "^3.3.18",
+    "postcss": "^8.5.23"
+  }
+}

backend/_assets/frontend/src/App.vue

@@ -0,0 +1,231 @@
+<template>
+  <n-config-provider :theme="customTheme" :locale="zhCN" :date-locale="dateZhCN">
+    <n-message-provider>
+      <n-notification-provider>
+        <n-dialog-provider>
+          <n-layout position="absolute" style="height: 100vh; background: var(--bg-primary);">
+            <!-- 顶部导航栏 -->
+            <n-layout-header bordered style="height: var(--header-height); display: flex; align-items: center; padding: 0 20px; background: var(--bg-card); border-bottom: 1px solid var(--border-primary);">
+              <!-- Logo 区域 -->
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <div style="width: 28px; height: 28px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: white; letter-spacing: 1px;">
+                  SX
+                </div>
+                <span style="color: var(--accent); font-size: 16px; font-weight: 700; letter-spacing: 1.5px;">SecAgentX</span>
+                <span style="color: var(--text-muted); font-size: 11px; font-weight: 400; padding-left: 10px; border-left: 1px solid var(--border-primary);">AI 安全智能体</span>
+              </div>
+              <div style="flex:1" />
+              <!-- 右侧状态区 -->
+              <template v-if="!isLoginPage">
+                <!-- 连接状态指示灯 - 使用 store 的统一状态 -->
+                <div style="display: flex; align-items: center; gap: 6px; margin-right: 16px;">
+                  <div :style="{
+                    width: '7px', height: '7px', borderRadius: '50%',
+                    background: chatStore.wsConnected ? 'var(--success)' : 'var(--error)',
+                    boxShadow: chatStore.wsConnected ? '0 0 8px rgba(34,197,94,0.5)' : 'none',
+                    animation: chatStore.wsConnected ? 'pulse-dot 2s infinite' : 'none',
+                  }"></div>
+                  <span style="color: var(--text-muted); font-size: 11px; font-weight: 500;">
+                    {{ chatStore.wsConnected ? '已连接' : '未连接' }}
+                  </span>
+                </div>
+                <!-- 用户信息 -->
+                <div v-if="currentUser" style="display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--radius-full); background: var(--bg-elevated); border: 1px solid var(--border-primary);">
+                  <div style="width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 700;">
+                    {{ (currentUser.display_name || currentUser.username).charAt(0).toUpperCase() }}
+                  </div>
+                  <span style="color: var(--text-secondary); font-size: 12px; font-weight: 500; line-height: 1;">
+                    {{ currentUser.display_name || currentUser.username }}
+                    <span style="color: var(--text-muted); font-weight: 400; font-size: 10px; margin-left: 4px;">{{ currentUser.role }}</span>
+                  </span>
+                </div>
+                <n-button text size="small" @click="handleLogout" style="color: var(--text-muted); font-size: 11px; margin-left: 4px;">
+                  退出
+                </n-button>
+              </template>
+            </n-layout-header>
+
+            <!-- 主体区域（登录页不渲染侧边栏菜单，避免"点了跳不走"的困惑） -->
+            <n-layout v-if="!isLoginPage" position="absolute" style="top: var(--header-height); bottom: 0; background: var(--bg-primary);" has-sider>
+              <n-layout-sider bordered :width="220" :collapsed-width="64" show-trigger="bar" style="background: var(--bg-card); border-right: 1px solid var(--border-primary);">
+                <n-menu :value="currentRoute" :options="menuOptions" @update:value="onMenuChange" style="background: var(--bg-card); padding-top: 4px;" />
+              </n-layout-sider>
+              <n-layout style="background: var(--bg-primary);">
+                <!-- 页面过渡动画 - 只用透明度，杜绝 out-in 白帧 -->
+                <router-view v-slot="{ Component, route: r }">
+                  <transition name="fade" mode="default">
+                    <component :is="Component" :key="r.path" />
+                  </transition>
+                </router-view>
+              </n-layout>
+            </n-layout>
+            <!-- 登录页：主体直接渲染登录视图 -->
+            <n-layout v-else position="absolute" style="top: 0; bottom: 0; background: var(--bg-primary);">
+              <router-view />
+            </n-layout>
+          </n-layout>
+        </n-dialog-provider>
+      </n-notification-provider>
+    </n-message-provider>
+  </n-config-provider>
+</template>
+
+<script setup>
+import { ref, computed, h, onMounted, onUnmounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { darkTheme, zhCN, dateZhCN, NConfigProvider, useMessage } from 'naive-ui'
+import { useChatStore } from './stores/chat.js'
+import { buildApiUrl } from './utils/http.js'
+import {
+  GridOutline,
+  ChatbubblesOutline,
+  CubeOutline,
+  WarningOutline,
+  GitNetworkOutline,
+  ShieldCheckmarkOutline,
+  BugOutline,
+  DocumentTextOutline,
+  SettingsOutline,
+  PeopleOutline,
+} from '@vicons/ionicons5'
+
+const router = useRouter()
+const route = useRoute()
+const chatStore = useChatStore()
+
+// useMessage 降级（provider 在子组件中）
+let message
+try {
+  message = useMessage()
+} catch (e) {
+  message = { error: console.warn, success: console.log, warning: console.warn, info: console.log }
+}
+
+const isLoginPage = computed(() => route.path === '/login')
+const currentUser = ref(null)
+const userPermissions = ref([])
+
+const currentRoute = computed(() => route.path)
+
+function loadUser() {
+  try {
+    const u = localStorage.getItem('secagentx_user')
+    if (u) currentUser.value = JSON.parse(u)
+    const p = localStorage.getItem('secagentx_permissions')
+    if (p) userPermissions.value = JSON.parse(p)
+  } catch (e) {
+    currentUser.value = null
+  }
+}
+
+async function fetchPermissions() {
+  try {
+    const token = localStorage.getItem('secagentx_token')
+    if (!token) return
+    const resp = await fetch(buildApiUrl('/api/users/me'), {
+      headers: { 'Authorization': `Bearer ${token}` }
+    })
+    if (resp.ok) {
+      const data = await resp.json()
+      if (data.permissions) {
+        userPermissions.value = data.permissions
+        localStorage.setItem('secagentx_permissions', JSON.stringify(data.permissions))
+      }
+    }
+  } catch (e) { /* ignore */ }
+}
+
+function hasPermission(perm) {
+  return userPermissions.value.includes(perm)
+}
+
+loadUser()
+
+// 设计系统主题 — 复用 tokens.css 变量
+const customTheme = {
+  ...darkTheme,
+  common: {
+    ...darkTheme.common,
+    primaryColor: '#dc2626',
+    primaryColorHover: '#ef4444',
+    primaryColorPressed: '#b91c1c',
+    primaryColorSuppl: '#dc2626',
+    bodyColor: '#0f1117',
+    cardColor: '#171923',
+    modalColor: '#171923',
+    popoverColor: '#171923',
+    tableColor: '#171923',
+    borderColor: '#2a2d38',
+    dividerColor: '#2a2d38',
+    actionColor: '#171923',
+    tabColor: '#171923',
+    inputColor: '#171923',
+    inputColorDisabled: '#171923',
+    hoverColor: '#1f2230',
+    closeColor: '#64748b',
+    closeColorHover: '#e2e8f0',
+    textColor1: '#f1f5f9',
+    textColor2: '#cbd5e1',
+    textColor3: '#94a3b8',
+    textColorDisabled: '#64748b',
+    placeholderColor: '#475569',
+    invertedColor: '#0f1117',
+    progressRailColor: '#2a2d38',
+    railColor: '#2a2d38',
+    fontWeightStrong: '600',
+  },
+}
+
+// 带 SVG 图标的菜单 — 使用 ionicons5 渲染
+function renderIcon(icon) {
+  return () => h(icon, { style: 'width:18px;height:18px;' })
+}
+
+const menuOptions = computed(() => {
+  const items = [
+    { label: '总览', key: '/dashboard', icon: renderIcon(GridOutline) },
+    { label: '对话', key: '/', icon: renderIcon(ChatbubblesOutline) },
+    { label: 'Agent 状态', key: '/agents', icon: renderIcon(CubeOutline) },
+    { label: '事件', key: '/events', icon: renderIcon(WarningOutline) },
+    { label: 'ATT&CK 知识库', key: '/knowledge/mitre', icon: renderIcon(GitNetworkOutline) },
+    { label: 'OWASP 知识库', key: '/knowledge/owasp', icon: renderIcon(ShieldCheckmarkOutline) },
+    { label: 'CVE 漏洞库', key: '/knowledge/cve', icon: renderIcon(BugOutline) },
+    { label: '检测规则', key: '/knowledge/rules', icon: renderIcon(DocumentTextOutline) },
+  ]
+  if (hasPermission('admin:users')) {
+    items.push({ label: '系统设置', key: '/settings', icon: renderIcon(SettingsOutline) })
+    items.push({ label: '用户管理', key: '/users', icon: renderIcon(PeopleOutline) })
+  }
+  return items
+})
+
+function onMenuChange(key) {
+  router.push(key)
+}
+
+function handleLogout() {
+  chatStore.disconnectWebSocket()
+  localStorage.removeItem('secagentx_token')
+  localStorage.removeItem('secagentx_user')
+  localStorage.removeItem('secagentx_permissions')
+  router.push('/login')
+}
+
+// 路由变化时管理 WebSocket 生命周期（登录页断连，其他页连接）
+watch(() => route.path, (newPath) => {
+  if (newPath === '/login') {
+    chatStore.disconnectWebSocket()
+  } else {
+    chatStore.connectWebSocket()
+  }
+})
+
+onMounted(() => {
+  const token = localStorage.getItem('secagentx_token')
+  if (token) { chatStore.connectWebSocket(); fetchPermissions() }
+})
+
+onUnmounted(() => {
+  chatStore.disconnectWebSocket()
+})
+</script>

backend/_assets/frontend/src/main.js

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import naive from 'naive-ui'
+import router from './router/index.js'
+import App from './App.vue'
+import './styles/tokens.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.use(naive)
+app.mount('#app')

backend/_assets/frontend/src/router/index.js

@@ -0,0 +1,117 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+/**
+ * 路由 base — 运行时自适应（与 http.js 前缀逻辑一致）
+ *
+ *  - OpenIM 集成环境：页面挂在 /secagentx/ 下，路由 base 须为 /secagentx/
+ *    否则 SPA 跳转会丢失前缀（如变成 /agents），刷新即被 nginx 拦回 OpenIM 首页
+ *  - FastAPI 直连：base 为 /
+ */
+function resolveRouterBase() {
+  const injected = import.meta.env && import.meta.env.VITE_BASE_PATH
+  if (injected) return injected
+  if (typeof window !== 'undefined' && window.location.pathname.startsWith('/secagentx/')) {
+    return '/secagentx/'
+  }
+  return '/'
+}
+
+/**
+ * 路由守卫：检查是否已登录
+ * 未登录时跳转到 /login，并携带目标路径
+ */
+function requireAuth(to, from, next) {
+  const token = localStorage.getItem('secagentx_token')
+  if (to.meta.requiresAuth !== false && !token) {
+    next({ path: '/login', query: { redirect: to.fullPath } })
+  } else {
+    next()
+  }
+}
+
+const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('../views/LoginView.vue'),
+    meta: { requiresAuth: false },
+  },
+  {
+    path: '/',
+    name: 'chat',
+    component: () => import('../views/ChatView.vue'),
+  },
+  {
+    path: '/agents',
+    name: 'agents',
+    component: () => import('../views/AgentsView.vue'),
+  },
+  {
+    path: '/events',
+    name: 'events',
+    component: () => import('../views/EventsView.vue'),
+  },
+  {
+    path: '/knowledge',
+    name: 'knowledge',
+    component: () => import('../views/KnowledgeView.vue'),
+  },
+  {
+    path: '/knowledge/mitre',
+    name: 'knowledge-mitre',
+    component: () => import('../views/KnowledgeView.vue'),
+  },
+  {
+    path: '/knowledge/owasp',
+    name: 'knowledge-owasp',
+    component: () => import('../views/KnowledgeView.vue'),
+  },
+  {
+    path: '/knowledge/cve',
+    name: 'knowledge-cve',
+    component: () => import('../views/KnowledgeView.vue'),
+  },
+  {
+    path: '/knowledge/rules',
+    name: 'knowledge-rules',
+    component: () => import('../views/KnowledgeView.vue'),
+  },
+  {
+    path: '/attack-chain',
+    name: 'attack-chain',
+    component: () => import('../views/AttackChainView.vue'),
+  },
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    component: () => import('../views/DashboardView.vue'),
+  },
+  {
+    path: '/events/:id',
+    name: 'event-detail',
+    component: () => import('../views/EventDetailView.vue'),
+    props: true,
+  },
+  {
+    path: '/users',
+    name: 'users',
+    component: () => import('../views/UsersView.vue'),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/settings',
+    name: 'settings',
+    component: () => import('../views/SettingsView.vue'),
+    meta: { requiresAuth: true },
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(resolveRouterBase()),
+  routes,
+})
+
+// 注册全局路由守卫
+router.beforeEach(requireAuth)
+
+export default router