feat: initialize independent Sense product skeleton (#21)

2026-08-12 16:49:17 +08:00
parent be2c1e3c81
commit d2169990d3
33 changed files with 9140 additions and 0 deletions
@@ -0,0 +1,97 @@
+<template>
+  <el-container class="app-shell">
+    <el-aside :width="collapsed ? '64px' : '208px'" class="app-sidebar">
+      <div class="brand" :class="{ collapsed }">
+        <span class="brand-mark">S</span>
+        <span v-if="!collapsed" class="brand-name">Sense</span>
+      </div>
+      <el-menu
+        :default-active="$route.path"
+        router
+        background-color="#001529"
+        text-color="rgba(255,255,255,.72)"
+        active-text-color="#fff"
+        :collapse="collapsed"
+        :collapse-transition="false"
+      >
+        <el-menu-item v-for="item in navigation" :key="item.path" :index="item.path">
+          <el-icon><component :is="item.icon || 'Menu'" /></el-icon>
+          <template #title>{{ item.title }}</template>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <el-container>
+      <el-header class="app-header">
+        <el-button text class="collapse-button" :aria-label="collapsed ? '展开菜单' : '收起菜单'" @click="collapsed = !collapsed">
+          <el-icon size="20"><Expand v-if="collapsed" /><Fold v-else /></el-icon>
+        </el-button>
+        <div class="header-title">视频感知管理</div>
+        <div class="header-actions">
+          <el-tag type="success" effect="plain">服务正常</el-tag>
+          <el-dropdown>
+            <el-button text>
+              <el-icon><User /></el-icon>
+              <span class="user-name">当前用户</span>
+              <el-icon><ArrowDown /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item disabled>个人信息</el-dropdown-item>
+                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-header>
+
+      <div class="tab-bar">
+        <el-tag closable :disable-transitions="true" type="primary" effect="plain">{{ $route.meta.title || '工作台' }}</el-tag>
+      </div>
+      <el-main class="app-main"><router-view /></el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const collapsed = ref(false)
+const navigation = computed(() => {
+  const root = router.getRoutes().find((route) => route.path === '/')
+  return (root?.children || [])
+    .filter((route) => route.meta?.title && !route.meta?.hidden)
+    .map((route) => ({
+      path: route.path ? `/${route.path}`.replace('//', '/') : '/',
+      title: route.meta.title,
+      icon: route.meta.icon,
+      order: route.meta.order || 0
+    }))
+    .sort((left, right) => left.order - right.order)
+})
+
+function logout() {
+  window.sessionStorage.removeItem('sense_session')
+  if (router.hasRoute('sense-login')) router.push({ name: 'sense-login' })
+}
+</script>
+
+<style scoped>
+.app-shell { min-height: 100vh; }
+.app-sidebar { background: var(--sense-sidebar); transition: width .18s ease; }
+.brand { display: flex; height: 56px; align-items: center; gap: 10px; padding: 0 18px; color: #fff; }
+.brand.collapsed { justify-content: center; padding: 0; }
+.brand-mark { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 6px; background: var(--sense-primary); font-weight: 700; }
+.brand-name { font-size: 18px; font-weight: 600; letter-spacing: .4px; }
+.app-sidebar :deep(.el-menu) { border-right: 0; }
+.app-sidebar :deep(.el-menu-item.is-active) { background: var(--sense-primary); }
+.app-header { display: flex; height: 56px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--sense-border); background: #fff; }
+.collapse-button { margin-right: 8px; }
+.header-title { font-size: 16px; font-weight: 500; }
+.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
+.user-name { margin: 0 6px; }
+.tab-bar { display: flex; height: 40px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--sense-border); background: #fff; }
+.app-main { padding: 0; background: var(--sense-bg); }
+</style>