From 31027439a41d0ea7d6a90e75a20755fe07833d20 Mon Sep 17 00:00:00 2001
From: lixiaolong <702156524@qq.com>
Date: Thu, 30 Jul 2026 10:26:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E9=87=8D=E6=9E=84=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E4=B8=BA=E7=8E=B0=E4=BB=A3=E5=8C=96=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E6=9D=BF=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 替换原有简单标题页面为功能丰富的仪表板界面
- 添加系统概览统计卡片展示设备、流程、任务和实例数量
- 集成实时任务运行状态面板显示当前执行的巡检任务
- 实现能力中心功能网格提供快速导航入口
- 添加最近测试实例列表展示近期执行记录
- 集成权限控制支持不同角色的功能访问限制
- 实现响应式设计适配桌面到移动端各种屏幕尺寸
- 添加动态时间显示个性化问候语和当前时间日期
- 配置深色模式支持提升用户体验
---
 src/views/index.vue | 1080 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 1049 insertions(+), 31 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index 1b0880e..a6444eb 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,47 +1,1065 @@
 <template>
-  <div class="app-container home">
-    <div class="title">
-      <p>招商车研物联网平台</p>
-      <p>机器人智能测试管理系统</p>
-    </div>
+  <div class="home-dashboard">
+    <section class="hero-panel">
+      <div class="hero-content">
+        <div class="platform-state">
+          <span class="state-dot"></span>
+          CMVR 智能测试平台
+        </div>
+        <h1>机器人智能测试管理系统</h1>
+        <p class="hero-description">
+          连接设备、编排流程、执行测试与巡检任务，集中管理机器人全生命周期测试业务。
+        </p>
+        <div class="hero-actions">
+          <el-button type="primary" size="large" @click="router.push('/flow')">
+            <el-icon><Connection /></el-icon>
+            流程编排
+          </el-button>
+          <el-button size="large" class="cockpit-button" @click="router.push('/inspection/cockpit')">
+            <el-icon><Monitor /></el-icon>
+            巡检驾驶舱
+          </el-button>
+        </div>
+      </div>
+
+      <div class="hero-time" aria-label="当前时间">
+        <span class="time-label">{{ greeting }}，{{ displayName }}</span>
+        <strong>{{ currentTime }}</strong>
+        <span>{{ currentDate }}</span>
+      </div>
+    </section>
+
+    <section class="overview-section" aria-labelledby="overview-title">
+      <div class="section-heading">
+        <div>
+          <span class="section-kicker">SYSTEM OVERVIEW</span>
+          <h2 id="overview-title">系统概览</h2>
+        </div>
+        <el-tooltip content="刷新首页数据" placement="top">
+          <el-button class="refresh-button" circle :loading="loading" @click="loadDashboardData">
+            <el-icon v-if="!loading"><Refresh /></el-icon>
+          </el-button>
+        </el-tooltip>
+      </div>
+
+      <div class="metric-grid">
+        <article v-for="item in metrics" :key="item.key" class="metric-card">
+          <div class="metric-icon" :class="`metric-icon--${item.tone}`">
+            <el-icon><component :is="item.icon" /></el-icon>
+          </div>
+          <div class="metric-content">
+            <span>{{ item.label }}</span>
+            <strong>{{ displayMetric(item.key) }}</strong>
+            <small>{{ item.description }}</small>
+          </div>
+          <span v-if="stats[item.key].restricted" class="metric-state">无权限</span>
+        </article>
+      </div>
+    </section>
+
+    <section class="workspace-grid">
+      <div class="dashboard-panel task-panel">
+        <div class="panel-heading">
+          <div>
+            <span class="section-kicker">LIVE OPERATIONS</span>
+            <h2>任务运行态</h2>
+          </div>
+          <button class="text-action" type="button" @click="navigateToFeature(features[2])">
+            查看全部
+            <el-icon><ArrowRight /></el-icon>
+          </button>
+        </div>
+
+        <div v-if="activeTasks.length" class="task-list">
+          <button
+            v-for="task in activeTasks"
+            :key="task.id"
+            class="task-row"
+            type="button"
+            @click="navigateToFeature(features[2])"
+          >
+            <span class="task-status-dot" :class="`status-${task.status}`"></span>
+            <span class="task-main">
+              <strong>{{ task.taskName || '未命名任务' }}</strong>
+              <small>{{ task.robotName || '暂未分配机器人' }}</small>
+            </span>
+            <span class="task-meta">
+              <el-tag :type="inspectionStatus(task.status).type" effect="light" size="small">
+                {{ inspectionStatus(task.status).label }}
+              </el-tag>
+              <small>{{ formatTime(task.startTime || task.createTime) }}</small>
+            </span>
+            <el-icon class="row-arrow"><ArrowRight /></el-icon>
+          </button>
+        </div>
+
+        <div v-else class="empty-state">
+          <div class="empty-icon"><el-icon><CircleCheck /></el-icon></div>
+          <strong>{{ activeTasksRestricted ? '暂无任务查看权限' : '当前没有运行中的任务' }}</strong>
+          <span>{{ activeTasksRestricted ? '请联系管理员分配巡检任务权限' : '新的巡检任务启动后会显示在这里' }}</span>
+        </div>
+      </div>
+
+      <div class="dashboard-panel capability-panel">
+        <div class="panel-heading">
+          <div>
+            <span class="section-kicker">CAPABILITIES</span>
+            <h2>能力中心</h2>
+          </div>
+        </div>
+
+        <div class="feature-grid">
+          <button
+            v-for="feature in features"
+            :key="feature.title"
+            class="feature-item"
+            type="button"
+            @click="navigateToFeature(feature)"
+          >
+            <span class="feature-icon" :style="{ color: feature.color, backgroundColor: feature.background }">
+              <el-icon><component :is="feature.icon" /></el-icon>
+            </span>
+            <span class="feature-copy">
+              <strong>{{ feature.title }}</strong>
+              <small>{{ feature.description }}</small>
+            </span>
+            <el-icon class="feature-arrow"><ArrowRight /></el-icon>
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <section class="dashboard-panel recent-panel">
+      <div class="panel-heading">
+        <div>
+          <span class="section-kicker">RECENT EXECUTIONS</span>
+          <h2>最近测试实例</h2>
+        </div>
+        <button class="text-action" type="button" @click="navigateToFeature(features[4])">
+          执行记录
+          <el-icon><ArrowRight /></el-icon>
+        </button>
+      </div>
+
+      <div v-if="recentInstances.length" class="recent-list">
+        <div v-for="instance in recentInstances" :key="instance.id" class="recent-item">
+          <div class="recent-order">{{ String(instance.order).padStart(2, '0') }}</div>
+          <div class="recent-info">
+            <strong>{{ instance.taskName || '未命名测试实例' }}</strong>
+            <span>{{ instance.remark || '机器人测试任务' }}</span>
+          </div>
+          <span class="recent-time">{{ formatTime(instance.createTime) }}</span>
+          <el-tag :type="testStatus(instance.status).type" effect="plain" size="small">
+            {{ testStatus(instance.status).label }}
+          </el-tag>
+        </div>
+      </div>
+
+      <div v-else class="recent-empty">
+        <el-icon><DocumentChecked /></el-icon>
+        <span>{{ recentInstancesRestricted ? '暂无测试实例查看权限' : '暂无测试执行记录' }}</span>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup name="Index">
+import {
+  ArrowRight,
+  CircleCheck,
+  Connection,
+  Cpu,
+  DataAnalysis,
+  DocumentChecked,
+  Grid,
+  Headset,
+  Monitor,
+  Odometer,
+  Operation,
+  Refresh,
+  SetUp,
+} from '@element-plus/icons-vue'
+import { listRegister } from '@/api/device/register'
+import { getTaskList } from '@/api/inspection/task'
+import { getRunTaskList } from '@/api/inspection/runTask'
+import { listConfig } from '@/api/test/config'
+import { listInst } from '@/api/test/log'
+import auth from '@/plugins/auth'
+import usePermissionStore from '@/store/modules/permission'
+import useUserStore from '@/store/modules/user'
 
+const router = useRouter()
+const userStore = useUserStore()
+const permissionStore = usePermissionStore()
+
+const loading = ref(false)
+const now = ref(new Date())
+const activeTasks = ref([])
+const recentInstances = ref([])
+const activeTasksRestricted = ref(false)
+const recentInstancesRestricted = ref(false)
+let clockTimer
+
+const stats = reactive({
+  devices: { value: null, restricted: false },
+  workflows: { value: null, restricted: false },
+  inspections: { value: null, restricted: false },
+  instances: { value: null, restricted: false },
+})
+
+const metrics = [
+  { key: 'devices', label: '接入设备', description: '已注册设备总数', icon: Cpu, tone: 'blue' },
+  { key: 'workflows', label: '测试流程', description: '可用测试编排', icon: Connection, tone: 'green' },
+  { key: 'inspections', label: '巡检任务', description: '已配置巡检任务', icon: Odometer, tone: 'orange' },
+  { key: 'instances', label: '测试实例', description: '累计执行实例', icon: DataAnalysis, tone: 'red' },
+]
+
+const features = [
+  {
+    title: '设备接入',
+    description: '配置机器人与终端设备',
+    icon: SetUp,
+    color: '#2563eb',
+    background: '#eaf2ff',
+    menuTitles: ['设备注册', '设备配置管理', '设备管理'],
+    fallback: '/device/register',
+  },
+  {
+    title: '流程编排',
+    description: '构建可视化测试工作流',
+    icon: Operation,
+    color: '#0f8a73',
+    background: '#e7f6f2',
+    menuTitles: ['任务流程编排', '流程编排'],
+    fallback: '/flow',
+  },
+  {
+    title: '巡检执行',
+    description: '调度机器人巡检任务',
+    icon: Monitor,
+    color: '#c56a16',
+    background: '#fff3e5',
+    menuTitles: ['执行任务', '运行任务', '巡检任务执行'],
+    fallback: '/inspection/runTask',
+  },
+  {
+    title: '巡检配置',
+    description: '管理地图、点位与任务',
+    icon: Grid,
+    color: '#6b57c7',
+    background: '#f0edff',
+    menuTitles: ['巡检任务', '巡检地图', '地图管理'],
+    fallback: '/inspection/task',
+  },
+  {
+    title: '测试记录',
+    description: '追踪执行结果与日志',
+    icon: DocumentChecked,
+    color: '#d14343',
+    background: '#ffeded',
+    menuTitles: ['任务历史', '测试记录', '任务实例', '执行记录'],
+    fallback: '/test/history',
+  },
+  {
+    title: '语料中心',
+    description: '管理语音与合成资源',
+    icon: Headset,
+    color: '#087f9c',
+    background: '#e8f7fa',
+    menuTitles: ['语料库', '语料管理', '车载语料'],
+    fallback: '/corpusManger/corpus',
+  },
+]
+
+const displayName = computed(() => userStore.nickName || userStore.name || '用户')
+const currentTime = computed(() => new Intl.DateTimeFormat('zh-CN', {
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+}).format(now.value))
+const currentDate = computed(() => new Intl.DateTimeFormat('zh-CN', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  weekday: 'long',
+}).format(now.value))
+const greeting = computed(() => {
+  const hour = now.value.getHours()
+  if (hour < 6) return '夜深了'
+  if (hour < 12) return '上午好'
+  if (hour < 18) return '下午好'
+  return '晚上好'
+})
+
+function displayMetric(key) {
+  const metric = stats[key]
+  if (metric.restricted) return '--'
+  return metric.value === null ? '--' : metric.value.toLocaleString('zh-CN')
+}
+
+function hasPermission(permission) {
+  return auth.hasPermi(permission)
+}
+
+function createMetricRequest(key, permission, request) {
+  if (!hasPermission(permission)) {
+    stats[key].restricted = true
+    return null
+  }
+  stats[key].restricted = false
+  return request()
+    .then((response) => {
+      stats[key].value = Number(response.total ?? response.rows?.length ?? 0)
+    })
+    .catch(() => {
+      stats[key].value = null
+    })
+}
+
+async function loadDashboardData() {
+  if (loading.value) return
+  loading.value = true
+
+  const requests = [
+    createMetricRequest('devices', 'device:register:list', () => listRegister({ pageNum: 1, pageSize: 1 })),
+    createMetricRequest('workflows', 'test:config:list', () => listConfig({ pageNum: 1, pageSize: 1 })),
+    createMetricRequest('inspections', 'inspection:task:list', () => getTaskList({ pageNum: 1, pageSize: 1 })),
+    createMetricRequest('instances', 'test:inst:list', () => listInst({ pageNum: 1, pageSize: 5 })),
+  ].filter(Boolean)
+
+  if (hasPermission('inspection:taskInstance:list')) {
+    activeTasksRestricted.value = false
+    requests.push(
+      getRunTaskList({ pageNum: 1, pageSize: 5, statusList: ['1', '3', '5'] })
+        .then((response) => {
+          activeTasks.value = (response.rows || []).slice(0, 4)
+        })
+        .catch(() => {
+          activeTasks.value = []
+        }),
+    )
+  } else {
+    activeTasksRestricted.value = true
+    activeTasks.value = []
+  }
+
+  if (hasPermission('test:inst:list')) {
+    recentInstancesRestricted.value = false
+    requests.push(
+      listInst({ pageNum: 1, pageSize: 4 })
+        .then((response) => {
+          recentInstances.value = (response.rows || []).slice(0, 4).map((item, index) => ({
+            ...item,
+            order: index + 1,
+          }))
+        })
+        .catch(() => {
+          recentInstances.value = []
+        }),
+    )
+  } else {
+    recentInstancesRestricted.value = true
+    recentInstances.value = []
+  }
+
+  await Promise.allSettled(requests)
+  loading.value = false
+}
+
+function inspectionStatus(status) {
+  return {
+    '0': { label: '已完成', type: 'success' },
+    '1': { label: '执行中', type: 'warning' },
+    '2': { label: '失败', type: 'danger' },
+    '3': { label: '已暂停', type: 'primary' },
+    '4': { label: '已终止', type: 'info' },
+    '5': { label: '等待执行', type: 'info' },
+  }[String(status)] || { label: '未知', type: 'info' }
+}
+
+function testStatus(status) {
+  return {
+    '0': { label: '已完成', type: 'success' },
+    '1': { label: '执行中', type: 'warning' },
+    '2': { label: '失败', type: 'danger' },
+  }[String(status)] || { label: '未知', type: 'info' }
+}
+
+function formatTime(value) {
+  if (!value) return '尚未开始'
+  const date = new Date(String(value).replace(/-/g, '/'))
+  if (Number.isNaN(date.getTime())) return String(value)
+  return new Intl.DateTimeFormat('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }).format(date)
+}
+
+function joinPath(parentPath, routePath) {
+  if (!routePath) return parentPath || '/'
+  if (routePath.startsWith('/')) return routePath
+  const parent = parentPath && parentPath !== '/' ? parentPath.replace(/\/$/, '') : ''
+  return `${parent}/${routePath}`.replace(/\/+/g, '/')
+}
+
+function flattenMenus(routes, parentPath = '', result = []) {
+  for (const route of routes || []) {
+    const path = joinPath(parentPath, route.path)
+    if (!route.hidden && route.meta?.title) {
+      result.push({ title: route.meta.title, path })
+    }
+    if (route.children?.length) flattenMenus(route.children, path, result)
+  }
+  return result
+}
+
+function resolveFeaturePath(feature) {
+  const menus = flattenMenus(permissionStore.sidebarRouters)
+  const exact = menus.find((menu) => feature.menuTitles.includes(menu.title))
+  if (exact) return exact.path
+  const partial = menus.find((menu) => feature.menuTitles.some((title) => menu.title.includes(title)))
+  return partial?.path || feature.fallback
+}
+
+function navigateToFeature(feature) {
+  router.push(resolveFeaturePath(feature))
+}
+
+onMounted(() => {
+  loadDashboardData()
+  clockTimer = window.setInterval(() => {
+    now.value = new Date()
+  }, 1000)
+})
+
+onBeforeUnmount(() => {
+  window.clearInterval(clockTimer)
+})
 </script>
 
 <style scoped lang="scss">
-p {
-  margin: 0;
-}
-.title {
-    display: flex;
-    flex-direction: column;
-    font-weight: bold;
-    gap: 5px;
-    justify-content: center;
-    font-size: 60px;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-}
-.title::before {
-  content: "";
-  position: absolute;
-  inset: 0;  
+.home-dashboard {
   width: 100%;
-  background-image: url("../assets/images/index-background.jpg");
   height: 100%;
-  background-size: cover;
-  opacity: 0.3;                /* 只在这层做透明 */
+  overflow-y: auto;
+  padding: 0 2px 24px;
+  color: var(--el-text-color-primary);
 }
+
+.hero-panel {
+  position: relative;
+  min-height: 236px;
+  padding: 36px 42px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px;
+  border-radius: 6px;
+  background-image: url('../assets/images/index-background.jpg');
+  background-position: center 48%;
+  background-size: cover;
+  color: #fff;
+}
+
+.hero-panel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(8, 24, 37, 0.72);
+}
+
+.hero-content,
+.hero-time {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-content {
+  max-width: 760px;
+}
+
+.platform-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  margin-bottom: 13px;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.state-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #35d2a0;
+  box-shadow: 0 0 0 5px rgba(53, 210, 160, 0.16);
+  animation: status-pulse 2.2s ease-in-out infinite;
+}
+
+.hero-content h1 {
+  margin: 0;
+  font-size: 32px;
+  line-height: 1.28;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.hero-description {
+  max-width: 670px;
+  margin: 12px 0 22px;
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.hero-actions :deep(.el-button) {
+  min-width: 126px;
+  margin: 0;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.hero-actions :deep(.el-button--primary) {
+  border-color: #1688e7;
+  background: #1688e7;
+}
+
+.cockpit-button {
+  border-color: rgba(255, 255, 255, 0.42) !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: #fff !important;
+}
+
+.cockpit-button:hover {
+  border-color: #fff !important;
+  background: rgba(255, 255, 255, 0.18) !important;
+}
+
+.hero-time {
+  min-width: 190px;
+  padding-left: 26px;
+  border-left: 1px solid rgba(255, 255, 255, 0.24);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.hero-time strong {
+  margin: 6px 0 2px;
+  font-size: 42px;
+  line-height: 1;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.hero-time > span:last-child,
+.time-label {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 13px;
+}
+
+.overview-section {
+  padding: 24px 0 20px;
+}
+
+.section-heading,
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.section-heading {
+  margin-bottom: 14px;
+}
+
+.section-kicker {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--el-color-primary);
+  font-size: 10px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.section-heading h2,
+.panel-heading h2 {
+  margin: 0;
+  color: var(--el-text-color-primary);
+  font-size: 18px;
+  line-height: 1.35;
+  letter-spacing: 0;
+}
+
+.refresh-button {
+  flex: 0 0 auto;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.metric-card {
+  position: relative;
+  min-height: 116px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  background: var(--el-bg-color);
+  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--el-border-color);
+  box-shadow: 0 10px 24px rgba(28, 44, 64, 0.08);
+}
+
+.metric-icon {
+  width: 48px;
+  height: 48px;
+  flex: 0 0 48px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  font-size: 24px;
+}
+
+.metric-icon--blue { color: #2563eb; background: #eaf2ff; }
+.metric-icon--green { color: #0f8a73; background: #e7f6f2; }
+.metric-icon--orange { color: #c56a16; background: #fff3e5; }
+.metric-icon--red { color: #d14343; background: #ffeded; }
+
+.metric-content {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: baseline;
+  column-gap: 10px;
+}
+
+.metric-content > span {
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+}
+
+.metric-content strong {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  color: var(--el-text-color-primary);
+  font-size: 28px;
+  line-height: 1;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+
+.metric-content small {
+  margin-top: 7px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.metric-state {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  color: var(--el-text-color-placeholder);
+  font-size: 10px;
+}
+
+.workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.dashboard-panel {
+  min-width: 0;
+  padding: 20px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  background: var(--el-bg-color);
+}
+
+.panel-heading {
+  min-height: 40px;
+  margin-bottom: 14px;
+}
+
+.text-action {
+  border: 0;
+  padding: 5px 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  color: var(--el-color-primary);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.text-action:hover {
+  color: var(--el-color-primary-light-3);
+}
+
+.task-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.task-row {
+  width: 100%;
+  min-height: 63px;
+  padding: 11px 6px;
+  border: 0;
+  border-top: 1px solid var(--el-border-color-extra-light);
+  display: grid;
+  grid-template-columns: 10px minmax(130px, 1fr) auto 18px;
+  align-items: center;
+  gap: 12px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.task-row:first-child {
+  border-top: 0;
+}
+
+.task-row:hover {
+  background: var(--el-fill-color-light);
+}
+
+.task-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--el-color-info);
+}
+
+.task-status-dot.status-1 { background: var(--el-color-warning); }
+.task-status-dot.status-3 { background: var(--el-color-primary); }
+.task-status-dot.status-5 { background: var(--el-color-info); }
+
+.task-main,
+.task-meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.task-main strong {
+  overflow: hidden;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-main small,
+.task-meta small {
+  color: var(--el-text-color-secondary);
+  font-size: 11px;
+}
+
+.task-meta {
+  align-items: flex-end;
+}
+
+.row-arrow,
+.feature-arrow {
+  color: var(--el-text-color-placeholder);
+}
+
+.empty-state {
+  min-height: 184px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-regular);
+  text-align: center;
+}
+
+.empty-icon {
+  width: 44px;
+  height: 44px;
+  margin-bottom: 10px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--el-color-success-light-9);
+  color: var(--el-color-success);
+  font-size: 22px;
+}
+
+.empty-state strong {
+  font-size: 14px;
+}
+
+.empty-state > span {
+  margin-top: 6px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.feature-item {
+  min-width: 0;
+  min-height: 76px;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr) 14px;
+  align-items: center;
+  gap: 9px;
+  background: var(--el-fill-color-extra-light);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 160ms ease, background-color 160ms ease;
+}
+
+.feature-item:hover {
+  border-color: var(--el-border-color);
+  background: var(--el-fill-color-light);
+}
+
+.feature-icon {
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  font-size: 20px;
+}
+
+.feature-copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.feature-copy strong {
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.feature-copy small {
+  overflow: hidden;
+  color: var(--el-text-color-secondary);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recent-panel {
+  margin-bottom: 2px;
+}
+
+.recent-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 26px;
+}
+
+.recent-item {
+  min-width: 0;
+  min-height: 62px;
+  border-top: 1px solid var(--el-border-color-extra-light);
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 11px;
+}
+
+.recent-item:nth-child(-n + 2) {
+  border-top: 0;
+}
+
+.recent-order {
+  color: var(--el-text-color-placeholder);
+  font-size: 17px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.recent-info {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.recent-info strong,
+.recent-info span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recent-info strong {
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.recent-info span,
+.recent-time {
+  color: var(--el-text-color-secondary);
+  font-size: 11px;
+}
+
+.recent-empty {
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.recent-empty .el-icon {
+  font-size: 19px;
+}
+
+:global(html.dark) .hero-panel::before {
+  background: rgba(4, 13, 22, 0.82);
+}
+
+:global(html.dark) .metric-card:hover {
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
+}
+
+:global(html.dark) .metric-icon,
+:global(html.dark) .feature-icon {
+  background: var(--el-fill-color) !important;
+}
+
+@keyframes status-pulse {
+  0%, 100% { box-shadow: 0 0 0 4px rgba(53, 210, 160, 0.12); }
+  50% { box-shadow: 0 0 0 7px rgba(53, 210, 160, 0.04); }
+}
+
+@media (max-width: 1200px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .workspace-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 768px) {
-  .title {
-    padding: 0 16px;
-    font-size: 32px;
-    line-height: 1.35;
+  .home-dashboard {
+    padding-bottom: 16px;
+  }
+
+  .hero-panel {
+    min-height: 0;
+    padding: 28px 22px;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .hero-content h1 {
+    font-size: 26px;
+  }
+
+  .hero-description {
+    font-size: 14px;
+  }
+
+  .hero-time {
+    width: 100%;
+    padding: 18px 0 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.24);
+    border-left: 0;
+    align-items: flex-start;
+  }
+
+  .hero-time strong {
+    font-size: 34px;
+  }
+
+  .metric-grid,
+  .feature-grid,
+  .recent-list {
+    grid-template-columns: 1fr;
+  }
+
+  .recent-item:nth-child(2) {
+    border-top: 1px solid var(--el-border-color-extra-light);
+  }
+}
+
+@media (max-width: 520px) {
+  .metric-grid {
+    gap: 10px;
+  }
+
+  .metric-card {
+    min-height: 104px;
+    padding: 16px;
+  }
+
+  .metric-content {
+    grid-template-columns: 1fr;
+  }
+
+  .metric-content strong {
+    grid-column: 1;
+    grid-row: auto;
+    margin-top: 5px;
+    font-size: 24px;
+  }
+
+  .task-row {
+    grid-template-columns: 10px minmax(0, 1fr) 16px;
+  }
+
+  .task-meta {
+    display: none;
+  }
+
+  .recent-item {
+    grid-template-columns: 28px minmax(0, 1fr) auto;
+  }
+
+  .recent-time {
+    display: none;
   }
 }
 </style>
-