create-simpleadmin-ui 2.0.0

package/template/src/views/home/HomeView.vue

@@ -0,0 +1,1177 @@
+<script setup lang="ts">
+defineOptions({ name: 'Home' })
+
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore, type SidebarRouter } from '@/stores/user'
+import { getSilent } from '@/utils/request'
+import { formatDateTime } from '@/utils/datetime'
+import { resolveMenuIconName } from '@/constants/menuIcons'
+import {
+  UserFilled,
+  Avatar,
+  Connection,
+  Notification,
+  ArrowRight,
+  Key,
+  Document,
+  Menu,
+} from '@element-plus/icons-vue'
+
+interface Paged<T> {
+  total: number
+  items: T[]
+}
+
+interface NoticeItem {
+  id: number
+  noticeTitle: string
+  noticeType: number
+  status: number
+  createTime: string
+}
+
+interface LoginLogItem {
+  id: number
+  userName?: string
+  ipAddress?: string
+  status: number
+  msg?: string
+  loginTime?: string
+}
+
+interface OperLogItem {
+  id: number
+  title?: string
+  operName?: string
+  status: number
+  operTime?: string
+  costTime: number
+}
+
+interface ProfileBrief {
+  userName: string
+  nickName: string
+  realName?: string
+  email?: string
+  phone?: string
+}
+
+interface FeedPanel {
+  key: string
+  title: string
+  desc: string
+  moreLabel: string
+  path: string
+  kind: 'notice' | 'login' | 'oper'
+}
+
+interface ShortcutItem {
+  title: string
+  desc: string
+  path: string
+  icon: string
+  tone: string
+}
+
+const store = useUserStore()
+const router = useRouter()
+
+const now = ref(new Date())
+let timer: ReturnType<typeof setInterval> | undefined
+
+const loading = ref(true)
+const stats = ref({
+  users: null as number | null,
+  roles: null as number | null,
+  online: null as number | null,
+  notices: null as number | null,
+})
+const notices = ref<NoticeItem[]>([])
+const loginLogs = ref<LoginLogItem[]>([])
+const operLogs = ref<OperLogItem[]>([])
+const profile = ref<ProfileBrief | null>(null)
+
+/** 首页列表默认条数 */
+const HOME_FEED_SIZE = 5
+
+const canNotice = computed(() => store.hasPermission('system:notice:list'))
+const canLoginLog = computed(() => store.hasPermission('monitor:loginlog:list'))
+const canOperLog = computed(() => store.hasPermission('monitor:operlog:list'))
+const canUser = computed(() => store.hasPermission('system:user:list'))
+const canRole = computed(() => store.hasPermission('system:role:list'))
+const canOnline = computed(() => store.hasPermission('monitor:online:list'))
+
+const greeting = computed(() => {
+  const h = now.value.getHours()
+  if (h < 6) return '夜深了'
+  if (h < 11) return '早上好'
+  if (h < 14) return '中午好'
+  if (h < 18) return '下午好'
+  return '晚上好'
+})
+
+const clockLabel = computed(() => {
+  const d = now.value
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+})
+
+const displayName = computed(
+  () => store.userInfo?.nickName || store.userInfo?.userName || '管理员',
+)
+const roleText = computed(() => store.userInfo?.roles?.join(' · ') || '-')
+const permLabel = computed(() => {
+  const roles = store.userInfo?.roles || []
+  const perms = store.userInfo?.permissions || []
+  if (roles.includes('super_admin') || perms.includes('*')) return '全部'
+  return String(perms.length)
+})
+
+/** 上次登录展示文案。 */
+const lastLoginLabel = computed(() => {
+  const t = store.userInfo?.lastLoginTime
+  if (!t) return '首次登录'
+  const time = formatDateTime(t)
+  const ip = store.userInfo?.lastLoginIp
+  return ip ? `${time}（${ip}）` : time
+})
+
+const weekLabel = computed(() => {
+  const week = ['日', '一', '二', '三', '四', '五', '六'][now.value.getDay()]
+  return `星期${week}`
+})
+
+const dateShort = computed(() => {
+  const d = now.value
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+})
+
+const menuLeafCount = computed(() => flattenMenuLeaves(store.menus || []).length)
+
+/** 有权限的管理 KPI；不足时用个人指标填满，避免空白。 */
+const kpiCards = computed(() => {
+  const admin: Array<{
+    key: string
+    label: string
+    value: number | null
+    icon: unknown
+    tone: string
+    path: string
+    hint: string
+    clickable: boolean
+  }> = []
+
+  if (canUser.value) {
+    admin.push({
+      key: 'users',
+      label: '用户总数',
+      value: stats.value.users,
+      icon: UserFilled,
+      tone: 'teal',
+      path: '/system/user',
+      hint: '账号与权限主体',
+      clickable: true,
+    })
+  }
+  if (canRole.value) {
+    admin.push({
+      key: 'roles',
+      label: '角色数量',
+      value: stats.value.roles,
+      icon: Avatar,
+      tone: 'sky',
+      path: '/system/role',
+      hint: 'RBAC 角色集合',
+      clickable: true,
+    })
+  }
+  if (canOnline.value) {
+    admin.push({
+      key: 'online',
+      label: '在线会话',
+      value: stats.value.online,
+      icon: Connection,
+      tone: 'amber',
+      path: '/monitor/online',
+      hint: '当前有效登录',
+      clickable: true,
+    })
+  }
+  if (canNotice.value) {
+    admin.push({
+      key: 'notices',
+      label: '公告条数',
+      value: stats.value.notices,
+      icon: Notification,
+      tone: 'rose',
+      path: '/system/notice',
+      hint: '系统通知公告',
+      clickable: true,
+    })
+  }
+
+  if (admin.length >= 2) return admin
+
+  const personal = [
+    {
+      key: 'my-roles',
+      label: '我的角色',
+      value: store.userInfo?.roles?.length ?? 0,
+      icon: Key,
+      tone: 'teal',
+      path: '',
+      hint: roleText.value,
+      clickable: false,
+    },
+    {
+      key: 'my-perms',
+      label: '权限项',
+      value:
+        store.userInfo?.roles?.includes('super_admin') || store.userInfo?.permissions?.includes('*')
+          ? null
+          : store.userInfo?.permissions?.length ?? 0,
+      icon: Document,
+      tone: 'sky',
+      path: '',
+      hint: permLabel.value === '全部' ? '超级管理员权限' : '当前授权数量',
+      clickable: false,
+    },
+    {
+      key: 'my-menus',
+      label: '可访问菜单',
+      value: menuLeafCount.value,
+      icon: Menu,
+      tone: 'amber',
+      path: '',
+      hint: '侧栏可见功能入口',
+      clickable: false,
+    },
+  ]
+
+  // 合并：已有管理卡片优先，再用个人卡片补到最多 4 个
+  const merged = [...admin]
+  for (const p of personal) {
+    if (merged.length >= 4) break
+    if (!merged.some((x) => x.key === p.key)) merged.push(p)
+  }
+  return merged
+})
+
+const kpiColsClass = computed(() => {
+  const n = Math.min(4, Math.max(1, kpiCards.value.length))
+  return `kpi--cols-${n}`
+})
+
+const feedPanels = computed(() => {
+  const list: FeedPanel[] = []
+  if (canNotice.value) {
+    list.push({
+      key: 'notice',
+      title: '最新公告',
+      desc: '系统通知与公告动态',
+      moreLabel: '查看全部',
+      path: '/system/notice',
+      kind: 'notice',
+    })
+  }
+  if (canLoginLog.value) {
+    list.push({
+      key: 'login',
+      title: '最近登录',
+      desc: '账号登录审计摘要',
+      moreLabel: '查看全部',
+      path: '/monitor/loginlog',
+      kind: 'login',
+    })
+  }
+  if (canOperLog.value) {
+    list.push({
+      key: 'oper',
+      title: '近期操作',
+      desc: '审计操作摘要',
+      moreLabel: '明细',
+      path: '/monitor/operlog',
+      kind: 'oper',
+    })
+  }
+  return list
+})
+
+const feedColsClass = computed(() => {
+  const n = feedPanels.value.length
+  if (n <= 1) return 'split--cols-1'
+  if (n === 2) return 'split--cols-2'
+  return 'split--cols-3'
+})
+
+const tones = ['teal', 'sky', 'amber', 'rose', 'indigo', 'slate']
+
+/** 快捷入口：优先取当前账号真实可访问菜单，避免无权限入口占位。 */
+const shortcuts = computed((): ShortcutItem[] => {
+  const leaves = flattenMenuLeaves(store.menus || []).slice(0, 12)
+  if (leaves.length) {
+    return leaves.map((m, i) => ({
+      title: m.title,
+      desc: '已授权功能',
+      path: m.path,
+      icon: resolveMenuIconName(m.icon, 'Document'),
+      tone: tones[i % tones.length],
+    }))
+  }
+  return [
+    {
+      title: '首页',
+      desc: '返回工作台',
+      path: '/index',
+      icon: 'HomeFilled',
+      tone: 'teal',
+    },
+  ]
+})
+
+const showWorkspace = computed(() => feedPanels.value.length < 2)
+
+function joinPath(parent: string | undefined, path: string): string {
+  if (!path) return parent || '/'
+  if (path.startsWith('/')) return path
+  const base = (parent || '').replace(/\/$/, '')
+  if (!base || base === '/') return `/${path}`
+  return `${base}/${path}`.replace(/\/{2,}/g, '/')
+}
+
+function flattenMenuLeaves(
+  nodes: SidebarRouter[],
+  parentPath = '',
+): Array<{ title: string; path: string; icon?: string }> {
+  const out: Array<{ title: string; path: string; icon?: string }> = []
+  for (const n of nodes) {
+    if (n.meta?.hidden) continue
+    const full = joinPath(parentPath, n.path)
+    const kids = (n.children || []).filter((c) => !c.meta?.hidden)
+    const isDir = kids.length > 0 && !n.component
+    if (isDir) {
+      out.push(...flattenMenuLeaves(kids, full))
+    } else if (full && full !== '/index' && full !== '/') {
+      out.push({
+        title: n.meta?.title || n.name,
+        path: full,
+        icon: n.meta?.icon,
+      })
+    }
+  }
+  return out
+}
+
+function noticeTypeLabel(type: number) {
+  return type === 2 ? '公告' : '通知'
+}
+
+function formatStat(value: number | null, fallback = '—') {
+  if (value === null) return fallback
+  return value.toLocaleString()
+}
+
+function formatKpiValue(item: { key: string; value: number | null }) {
+  if (item.key === 'my-perms' && permLabel.value === '全部') return '全部'
+  return formatStat(item.value)
+}
+
+async function safePagedTotal(url: string): Promise<number | null> {
+  const data = await getSilent<Paged<unknown>>(url, { pageIndex: 1, pageSize: 1 })
+  return data?.total ?? null
+}
+
+async function loadDashboard() {
+  loading.value = true
+  try {
+    const tasks: Promise<void>[] = []
+
+    // 路由守卫已拉取过 userInfo 则跳过，避免重复 /auth/info
+    if (!store.userInfo) {
+      tasks.push(
+        (async () => {
+          try {
+            await store.fetchInfo()
+          } catch {
+            /* 会话信息失败不阻断首页 */
+          }
+        })(),
+      )
+    }
+
+    tasks.push(
+      (async () => {
+        const data = await getSilent<ProfileBrief>('/auth/profile')
+        if (data) profile.value = data
+      })(),
+    )
+
+    if (canUser.value) {
+      tasks.push(
+        (async () => {
+          stats.value.users = await safePagedTotal('/users')
+        })(),
+      )
+    }
+    if (canRole.value) {
+      tasks.push(
+        (async () => {
+          stats.value.roles = await safePagedTotal('/roles')
+        })(),
+      )
+    }
+    if (canNotice.value) {
+      tasks.push(
+        (async () => {
+          // 一次请求同时拿 total 与 feed，避免 /notices 打两次
+          const data = await getSilent<Paged<NoticeItem>>('/notices', {
+            pageIndex: 1,
+            pageSize: HOME_FEED_SIZE,
+          })
+          stats.value.notices = data?.total ?? null
+          notices.value = data?.items || []
+        })(),
+      )
+    }
+    if (canOnline.value) {
+      tasks.push(
+        (async () => {
+          const count = await getSilent<number>('/online-users/count')
+          stats.value.online = count ?? null
+        })(),
+      )
+    }
+    if (canLoginLog.value) {
+      tasks.push(
+        (async () => {
+          const data = await getSilent<Paged<LoginLogItem>>('/login-logs', {
+            pageIndex: 1,
+            pageSize: HOME_FEED_SIZE,
+          })
+          loginLogs.value = data?.items || []
+        })(),
+      )
+    }
+    if (canOperLog.value) {
+      tasks.push(
+        (async () => {
+          const data = await getSilent<Paged<OperLogItem>>('/oper-logs', {
+            pageIndex: 1,
+            pageSize: HOME_FEED_SIZE,
+          })
+          operLogs.value = data?.items || []
+        })(),
+      )
+    }
+
+    await Promise.all(tasks)
+  } finally {
+    loading.value = false
+  }
+}
+
+function onKpiClick(item: { clickable: boolean; path: string }) {
+  if (item.clickable && item.path) router.push(item.path)
+}
+
+onMounted(() => {
+  timer = setInterval(() => {
+    now.value = new Date()
+  }, 1000)
+  loadDashboard()
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="home sa-page" v-loading="loading">
+    <section class="hero">
+      <div class="hero__glow" aria-hidden="true" />
+      <div class="hero__main">
+        <div class="hero__text">
+          <p class="hero__eyebrow">SimpleAdmin</p>
+          <h1>{{ greeting }}，{{ displayName }}</h1>
+          <p class="hero__lead">
+            {{
+              feedPanels.length
+                ? '欢迎回到控制台，快速查看运行概况与常用入口。'
+                : '欢迎回来。下方为你的工作台与已授权功能入口。'
+            }}
+          </p>
+          <div class="hero__chips">
+            <span class="chip"><el-icon><Key /></el-icon> {{ roleText }}</span>
+            <span class="chip"><el-icon><Document /></el-icon> 权限 {{ permLabel }}</span>
+            <span class="chip chip--login" title="不含本次登录">上次登录 {{ lastLoginLabel }}</span>
+          </div>
+        </div>
+        <div class="hero__time" aria-label="当前时间">
+          <span class="hero__clock">{{ clockLabel }}</span>
+          <span class="hero__date">{{ dateShort }} · {{ weekLabel }}</span>
+        </div>
+      </div>
+    </section>
+
+    <section v-if="kpiCards.length" class="kpi" :class="kpiColsClass">
+      <button
+        v-for="(item, idx) in kpiCards"
+        :key="item.key"
+        type="button"
+        class="kpi__card"
+        :class="[`kpi__card--${item.tone}`, { 'is-static': !item.clickable }]"
+        :style="{ animationDelay: `${0.04 * idx}s` }"
+        @click="onKpiClick(item)"
+      >
+        <span class="kpi__icon">
+          <el-icon :size="22"><component :is="item.icon" /></el-icon>
+        </span>
+        <div class="kpi__meta">
+          <span class="kpi__label">{{ item.label }}</span>
+          <strong class="kpi__value">{{ formatKpiValue(item) }}</strong>
+          <small>{{ item.hint }}</small>
+        </div>
+        <el-icon v-if="item.clickable" class="kpi__arrow"><ArrowRight /></el-icon>
+      </button>
+    </section>
+
+    <section v-if="showWorkspace" class="panel workspace">
+      <header class="panel__head">
+        <div>
+          <h2>我的工作台</h2>
+          <p>账号资料与当前授权概览</p>
+        </div>
+      </header>
+      <div class="workspace__body">
+        <div class="workspace__avatar">
+          {{ (displayName || '?').slice(0, 1) }}
+        </div>
+        <div class="workspace__meta">
+          <strong>{{ displayName }}</strong>
+          <p>
+            账号 {{ profile?.userName || store.userInfo?.userName || '—' }}
+            <template v-if="profile?.phone"> · {{ profile.phone }}</template>
+            <template v-else-if="profile?.email"> · {{ profile.email }}</template>
+          </p>
+          <div class="workspace__tags">
+            <span class="tag">角色 {{ roleText }}</span>
+            <span class="tag">权限 {{ permLabel }}</span>
+            <span class="tag">菜单 {{ menuLeafCount }}</span>
+          </div>
+        </div>
+        <p class="workspace__tip">
+          {{
+            shortcuts.length
+              ? '请从下方快捷入口进入已授权功能；如需更多权限，请联系管理员。'
+              : '当前账号暂无业务菜单，请联系管理员分配角色权限。'
+          }}
+        </p>
+      </div>
+    </section>
+
+    <section v-if="feedPanels.length" class="split" :class="feedColsClass">
+      <div v-for="panel in feedPanels" :key="panel.key" class="panel">
+        <header class="panel__head">
+          <div>
+            <h2>{{ panel.title }}</h2>
+            <p>{{ panel.desc }}</p>
+          </div>
+          <el-button text type="primary" @click="router.push(panel.path)">
+            {{ panel.moreLabel }}
+          </el-button>
+        </header>
+
+        <template v-if="panel.kind === 'notice'">
+          <ul v-if="notices.length" class="feed">
+            <li v-for="n in notices" :key="n.id" class="feed__item">
+              <span class="feed__badge" :class="n.noticeType === 2 ? 'is-announce' : 'is-notice'">
+                {{ noticeTypeLabel(n.noticeType) }}
+              </span>
+              <div class="feed__body">
+                <strong>{{ n.noticeTitle }}</strong>
+                <small>{{ formatDateTime(n.createTime) }}</small>
+              </div>
+            </li>
+          </ul>
+          <el-empty v-else description="暂无公告" :image-size="64" />
+        </template>
+
+        <template v-else-if="panel.kind === 'login'">
+          <ul v-if="loginLogs.length" class="feed">
+            <li v-for="log in loginLogs" :key="log.id" class="feed__item">
+              <span class="feed__dot" :class="log.status === 0 ? 'ok' : 'fail'" />
+              <div class="feed__body">
+                <strong>{{ log.userName || '未知账号' }}</strong>
+                <small>
+                  {{ log.ipAddress || '-' }} ·
+                  {{ log.msg || (log.status === 0 ? '登录成功' : '登录失败') }} ·
+                  {{ formatDateTime(log.loginTime) }}
+                </small>
+              </div>
+            </li>
+          </ul>
+          <el-empty v-else description="暂无登录日志" :image-size="64" />
+        </template>
+
+        <template v-else>
+          <ul v-if="operLogs.length" class="ops">
+            <li v-for="op in operLogs" :key="op.id">
+              <div>
+                <strong>{{ op.title || '操作' }}</strong>
+                <small>{{ op.operName || '-' }} · {{ formatDateTime(op.operTime) }}</small>
+              </div>
+              <span class="ops__cost">{{ op.costTime }}ms</span>
+            </li>
+          </ul>
+          <el-empty v-else description="暂无操作日志" :image-size="64" />
+        </template>
+      </div>
+    </section>
+
+    <section class="panel">
+      <header class="panel__head">
+        <div>
+          <h2>快捷入口</h2>
+          <p>{{ feedPanels.length ? '常用系统与监控模块' : '你的已授权功能' }}</p>
+        </div>
+      </header>
+      <div v-if="shortcuts.length" class="grid" :class="{ 'grid--dense': shortcuts.length <= 4 }">
+        <button
+          v-for="(item, idx) in shortcuts"
+          :key="item.path + item.title"
+          type="button"
+          class="tile"
+          :class="`tile--${item.tone}`"
+          :style="{ animationDelay: `${0.03 * idx}s` }"
+          @click="router.push(item.path)"
+        >
+          <span class="tile__icon">
+            <el-icon :size="18"><component :is="item.icon" /></el-icon>
+          </span>
+          <div>
+            <strong>{{ item.title }}</strong>
+            <p>{{ item.desc }}</p>
+          </div>
+        </button>
+      </div>
+      <el-empty v-else description="暂无可用功能入口" :image-size="72" />
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home {
+  gap: 18px;
+}
+
+.hero {
+  position: relative;
+  overflow: hidden;
+  padding: 24px 28px;
+  border-radius: 22px;
+  color: #ecfeff;
+  background:
+    linear-gradient(125deg, #0f3d3a 0%, #0f766e 48%, #155e75 100%);
+  box-shadow: var(--sa-shadow);
+  animation: sa-fade-up 0.35s ease both;
+}
+
+.hero__glow {
+  position: absolute;
+  inset: auto -10% -40% 40%;
+  height: 180%;
+  background: radial-gradient(circle, rgba(45, 212, 191, 0.28), transparent 55%);
+  pointer-events: none;
+  animation: pulse-glow 6s ease-in-out infinite;
+}
+
+.hero__main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+  min-height: 112px;
+}
+
+.hero__text {
+  min-width: 0;
+  flex: 1;
+}
+
+.hero__eyebrow {
+  margin: 0 0 8px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  opacity: 0.78;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: clamp(24px, 2.6vw, 32px);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+}
+
+.hero__lead {
+  margin: 8px 0 0;
+  max-width: 42ch;
+  color: rgba(236, 254, 255, 0.84);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.hero__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 11px;
+  border-radius: 999px;
+  font-size: 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.chip--login {
+  max-width: min(100%, 360px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hero__time {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 6px;
+  padding: 14px 18px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  backdrop-filter: blur(8px);
+  min-width: 168px;
+}
+
+.hero__clock {
+  font-size: clamp(28px, 3vw, 36px);
+  font-weight: 780;
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.hero__date {
+  font-size: 12px;
+  color: rgba(236, 254, 255, 0.78);
+  letter-spacing: 0.02em;
+}
+
+.kpi {
+  display: grid;
+  gap: 14px;
+}
+.kpi--cols-1 { grid-template-columns: minmax(0, 1fr); }
+.kpi--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.kpi--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.kpi--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+.kpi__card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  text-align: left;
+  padding: 16px 16px 16px 14px;
+  border-radius: 16px;
+  border: 1px solid var(--sa-border);
+  background: #fff;
+  box-shadow: var(--sa-shadow);
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  animation: sa-fade-up 0.4s ease both;
+  &:hover {
+    transform: translateY(-3px);
+    border-color: rgba(15, 118, 110, 0.28);
+    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
+  }
+  &.is-static {
+    cursor: default;
+    &:hover {
+      transform: none;
+      border-color: var(--sa-border);
+      box-shadow: var(--sa-shadow);
+    }
+  }
+}
+
+.kpi__icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.kpi__meta {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.kpi__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+
+.kpi__value {
+  font-size: 24px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
+  color: var(--sa-ink);
+}
+
+.kpi__meta small {
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kpi__arrow {
+  color: var(--sa-ink-muted);
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.kpi__card:hover:not(.is-static) .kpi__arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.kpi__card--teal .kpi__icon { background: #ccfbf1; color: #0f766e; }
+.kpi__card--sky .kpi__icon { background: #e0f2fe; color: #0369a1; }
+.kpi__card--amber .kpi__icon { background: #fef3c7; color: #b45309; }
+.kpi__card--rose .kpi__icon { background: #ffe4e6; color: #be123c; }
+
+.workspace__body {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px 16px;
+  align-items: center;
+}
+
+.workspace__avatar {
+  grid-row: 1 / span 2;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  font-size: 22px;
+  font-weight: 800;
+  color: #fff;
+  background: linear-gradient(135deg, #0f766e, #0e7490);
+}
+
+.workspace__meta {
+  min-width: 0;
+  strong {
+    display: block;
+    font-size: 16px;
+    font-weight: 740;
+  }
+  p {
+    margin: 4px 0 0;
+    font-size: 13px;
+    color: var(--sa-ink-secondary);
+  }
+}
+
+.workspace__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.tag {
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  background: #f0fdfa;
+  color: #0f766e;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+}
+
+.workspace__tip {
+  grid-column: 1 / -1;
+  margin: 4px 0 0;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #f8fafc;
+  font-size: 13px;
+  color: var(--sa-ink-secondary);
+  line-height: 1.5;
+}
+
+.split {
+  display: grid;
+  gap: 14px;
+}
+.split--cols-1 { grid-template-columns: minmax(0, 1fr); }
+.split--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.split--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+.panel {
+  background: #fff;
+  border: 1px solid var(--sa-border);
+  border-radius: 18px;
+  box-shadow: var(--sa-shadow);
+  padding: 16px 18px 14px;
+  animation: sa-fade-up 0.45s ease both;
+}
+
+.panel__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 740;
+  }
+  p {
+    margin: 4px 0 0;
+    font-size: 12px;
+    color: var(--sa-ink-muted);
+  }
+}
+
+.feed {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.feed__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid transparent;
+  transition: border-color 0.2s ease, background 0.2s ease;
+  &:hover {
+    background: #f0fdfa;
+    border-color: rgba(15, 118, 110, 0.18);
+  }
+}
+
+.feed__badge {
+  flex-shrink: 0;
+  margin-top: 2px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.feed__badge.is-notice {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+.feed__badge.is-announce {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.feed__dot {
+  width: 8px;
+  height: 8px;
+  margin-top: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.feed__dot.ok { background: #0d9488; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18); }
+.feed__dot.fail { background: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15); }
+
+.feed__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  strong {
+    font-size: 13px;
+    font-weight: 650;
+    color: var(--sa-ink);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  small {
+    font-size: 12px;
+    color: var(--sa-ink-muted);
+    line-height: 1.4;
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+.grid--dense {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.tile {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  text-align: left;
+  border: 1px solid var(--sa-border);
+  background: #f8fafc;
+  border-radius: 14px;
+  padding: 12px;
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+  animation: sa-fade-up 0.4s ease both;
+  strong {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+  }
+  p {
+    margin: 3px 0 0;
+    font-size: 12px;
+    color: var(--sa-ink-secondary);
+    line-height: 1.4;
+  }
+  &:hover {
+    transform: translateY(-2px);
+    background: #fff;
+    border-color: rgba(15, 118, 110, 0.3);
+  }
+}
+
+.tile__icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.tile--teal .tile__icon { background: #ccfbf1; color: #0f766e; }
+.tile--sky .tile__icon { background: #e0f2fe; color: #0369a1; }
+.tile--amber .tile__icon { background: #fef3c7; color: #b45309; }
+.tile--rose .tile__icon { background: #ffe4e6; color: #be123c; }
+.tile--indigo .tile__icon { background: #e0e7ff; color: #4338ca; }
+.tile--slate .tile__icon { background: #e2e8f0; color: #334155; }
+
+.ops {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.ops li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 6px;
+  border-bottom: 1px dashed var(--sa-border);
+  &:last-child {
+    border-bottom: 0;
+  }
+  strong {
+    display: block;
+    font-size: 13px;
+  }
+  small {
+    font-size: 12px;
+    color: var(--sa-ink-muted);
+  }
+}
+
+.ops__cost {
+  font-size: 12px;
+  color: var(--sa-accent);
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+}
+
+@keyframes pulse-glow {
+  0%,
+  100% { opacity: 0.7; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.05); }
+}
+
+@media (max-width: 1200px) {
+  .kpi--cols-3,
+  .kpi--cols-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .split--cols-3 {
+    grid-template-columns: 1fr;
+  }
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 800px) {
+  .hero__main {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+  .hero__time {
+    align-items: flex-start;
+    min-width: 0;
+  }
+  .split--cols-2,
+  .split--cols-3 {
+    grid-template-columns: 1fr;
+  }
+  .kpi--cols-2,
+  .kpi--cols-3,
+  .kpi--cols-4 {
+    grid-template-columns: 1fr;
+  }
+  .grid {
+    grid-template-columns: 1fr;
+  }
+  .workspace__body {
+    grid-template-columns: auto 1fr;
+  }
+}
+</style>