From 2d2057d8f750d920b4cbf7eb01edf8fa15ba8f13 Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Tue, 29 Jul 2025 09:54:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/renderer/src/style.css           |   1 -
 frontend/src/renderer/src/views/Dashboard.vue | 345 +++++++++++-------
 2 files changed, 223 insertions(+), 123 deletions(-)

diff --git a/frontend/src/renderer/src/style.css b/frontend/src/renderer/src/style.css
index 0f2cc7c5..e7d3dfd9 100644
--- a/frontend/src/renderer/src/style.css
+++ b/frontend/src/renderer/src/style.css
@@ -60,7 +60,6 @@ body {
 
 .header {
   height: 60px;
-  background: white;
   border-bottom: 1px solid #e4e7ed;
   display: flex;
   align-items: center;
diff --git a/frontend/src/renderer/src/views/Dashboard.vue b/frontend/src/renderer/src/views/Dashboard.vue
index 08f98389..3fa0f899 100644
--- a/frontend/src/renderer/src/views/Dashboard.vue
+++ b/frontend/src/renderer/src/views/Dashboard.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="dashboard-container">
+  <div class="dashboard-container dashboard-container-home">
     <!-- 顶部导航栏 -->
     <div class="header">
       <div class="header-left">
-        <img src="/logo.png" alt="Logo" class="logo" />
+        <!-- <img src="/logo.png" alt="Logo" class="logo" /> -->
         <h1 class="system-title">平衡体态检测系统</h1>
       </div>
       <div class="header-right">
@@ -27,32 +27,20 @@
         </div>
       </div>
     </div>
-
-    <div class="main-content">
-      <!-- 左侧功能导航 -->
-      <div class="sidebar">
-        <div class="nav-menu">
-          <div class="nav-item" :class="{ active: activeNav === 'detection' }" @click="activeNav = 'detection'">
-            <el-icon class="nav-icon"><Monitor /></el-icon>
-            <span>检测</span>
-          </div>
-          <div class="nav-item" :class="{ active: activeNav === 'patient' }" @click="activeNav = 'patient'">
-            <el-icon class="nav-icon"><User /></el-icon>
-            <span>人员</span>
-          </div>
-          <div class="nav-item" :class="{ active: activeNav === 'system' }" @click="activeNav = 'system'">
-            <el-icon class="nav-icon"><Setting /></el-icon>
-            <span>系统</span>
-          </div>
-        </div>
+  <!-- 左侧功能导航 -->
+     <div class="main-dashboard-content">
+      <aside class="sidebar">
+      <div class="sidebar-item active">
+        <el-icon class="sidebar-icon"><UserFilled /></el-icon>
+        <span class="sidebar-text">检测</span>
       </div>
-
+    </aside>
       <!-- 右侧内容区域 -->
       <div class="content-area">
         <!-- 患者列表区域 -->
         <div class="patient-section">
           <div class="section-header">
-            <h2>患者列表</h2>
+            <div class="module-title">身体姿态</div>
             <div class="search-box">
               <el-input
                 v-model="searchKeyword"
@@ -63,89 +51,90 @@
               />
             </div>
           </div>
-
-          <div class="patient-list">
-            <div
-              v-for="patient in filteredPatients"
-              :key="patient.id"
-              class="patient-item"
-              :class="{ selected: selectedPatient?.id === patient.id }"
-              @click="selectPatient(patient)"
-            >
-              <el-avatar :size="50" :src="patient.avatar">
-                {{ patient.name.charAt(0) }}
-              </el-avatar>
-              <div class="patient-info">
-                <div class="patient-name">{{ patient.name }}</div>
-                <div class="patient-details">
-                  <span>{{ patient.gender }} | {{ patient.age }}岁</span>
-                  <span class="patient-id">ID: {{ patient.id }}</span>
-                </div>
-              </div>
-              <div class="patient-status">
-                <el-tag :type="getStatusType(patient.lastDetection)">{{ getStatusText(patient.lastDetection) }}</el-tag>
-              </div>
-            </div>
-          </div>
+          <el-table :data="filteredPatients" style="width: 100%" border @cell-click="selectPatient" highlight-current-row>
+            <el-table-column prop="name" label="姓名" min-width="60" />
+            <el-table-column prop="id" label="测试者ID" min-width="60" />
+            <el-table-column prop="datetime" label="最后一次检查时间" min-width="60" />
+            <el-table-column prop="gender" label="性别" min-width="60" />
+            <el-table-column prop="num" label="测试次数" min-width="60" />
+          </el-table>
         </div>
 
         <!-- 患者详情区域 -->
         <div class="patient-detail" v-if="selectedPatient">
-          <div class="detail-header">
-            <h3>患者信息</h3>
+          <div class="patient-detail-box" >
+            <div class="detail-header">
+            <div class="module-title">身体姿态</div>
             <el-button type="text" @click="editPatient">
               <el-icon><Edit /></el-icon>
             </el-button>
           </div>
 
-          <div class="detail-content">
-            <div class="info-grid">
-              <div class="info-item">
-                <label>姓名：</label>
-                <span>{{ selectedPatient.name }}</span>
+          <div class="basic-info-box">
+              <div class="basic-info-content">
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">测试者ID</div>
+                  <div>2101</div>
+                </div>
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">姓名</div>
+                  <div>张三</div>
+                </div>
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">性别</div>
+                  <div>男</div>
+                </div>
               </div>
-              <div class="info-item">
-                <label>性别：</label>
-                <span>{{ selectedPatient.gender }}</span>
+              <div class="basic-info-content">
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">出生日期</div>
+                  <div>2011/03/07</div>
+                </div>
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">年龄</div>
+                  <div>14</div>
+                </div>
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">民族</div>
+                  <div>-</div>
+                </div>
               </div>
-              <div class="info-item">
-                <label>年龄：</label>
-                <span>{{ selectedPatient.age }}岁</span>
+              <div class="basic-info-content">
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">身高cm</div>
+                  <div>167</div>
+                </div>
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">体重kg</div>
+                  <div>51</div>
+                </div>
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">鞋码</div>
+                  <div>38</div>
+                </div>
               </div>
-              <div class="info-item">
-                <label>身高：</label>
-                <span>{{ selectedPatient.height }}cm</span>
-              </div>
-              <div class="info-item">
-                <label>体重：</label>
-                <span>{{ selectedPatient.weight }}kg</span>
-              </div>
-              <div class="info-item">
-                <label>联系电话：</label>
-                <span>{{ selectedPatient.phone }}</span>
-              </div>
-              <div class="info-item">
-                <label>创建时间：</label>
-                <span>{{ formatDate(selectedPatient.createdAt) }}</span>
-              </div>
-              <div class="info-item">
-                <label>最后检测：</label>
-                <span>{{ selectedPatient.lastDetection ? formatDate(selectedPatient.lastDetection) : '暂无' }}</span>
+              <div class="basic-info-content">
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">电话号码</div>
+                  <div>18011110000</div>
+                </div>
+                <div class="basic-info-text">
+                  <div class="basic-info-textcolor">建档时间</div>
+                  <div>2024/12/13</div>
+                </div>
+                <div class="basic-info-text">
+                  
+                </div>
               </div>
+
             </div>
           </div>
-
+         
           <!-- 操作按钮 -->
           <div class="action-buttons">
-            <el-button type="primary" size="large" class="action-btn view-btn" @click="viewPatientProfile">
-              查看档案
-            </el-button>
-            <el-button type="success" size="large" class="action-btn detect-btn" @click="startDetection">
-              开始检测
-            </el-button>
-            <el-button type="warning" size="large" class="action-btn new-btn" @click="createNewPatient">
-              新患者建档
-            </el-button>
+            <div class="action-view-buttons" @click="viewPatientProfile">查看档案</div>
+            <div class="action-view-buttons" @click="startDetection">检查</div>
+            <div class="action-view-buttons" @click="createNewPatient">+新患者建档</div>
           </div>
         </div>
 
@@ -193,10 +182,15 @@ const handleSearch = () => {
   // 搜索逻辑已在计算属性中处理
 }
 
+// const selectPatient = (patient) => {
+//   selectedPatient.value = patient
+// }
+
 const selectPatient = (patient) => {
   selectedPatient.value = patient
 }
 
+
 const editPatient = () => {
   router.push(`/patient/edit/${selectedPatient.value.id}`)
 }
@@ -284,33 +278,24 @@ const loadPatients = async () => {
         name: '张三',
         gender: '男',
         age: 45,
-        height: 175,
-        weight: 70,
-        phone: '13800138001',
-        createdAt: '2024-01-15T10:30:00Z',
-        lastDetection: '2024-01-20T14:20:00Z'
+        datetime: '2023-05-01 14:00:00',
+        num:4
       },
       {
         id: 2,
         name: '李四',
         gender: '女',
-        age: 38,
-        height: 165,
-        weight: 55,
-        phone: '13800138002',
-        createdAt: '2024-01-10T09:15:00Z',
-        lastDetection: null
+        datetime: '2023-05-01 14:00:00',
+        num:4
       },
       {
         id: 3,
         name: '王五',
         gender: '男',
         age: 52,
-        height: 180,
-        weight: 75,
-        phone: '13800138003',
-        createdAt: '2024-01-05T16:45:00Z',
-        lastDetection: '2024-01-18T11:30:00Z'
+        datetime: '2023-05-01 14:00:00',
+        num:4
+      
       }
     ]
   }
@@ -334,12 +319,12 @@ onMounted(() => {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #f5f7fa;
+  background: #000;
 }
 
 .header {
   height: 60px;
-  background: #fff;
+  /* background: #fff; */
   border-bottom: 1px solid #e4e7ed;
   display: flex;
   justify-content: space-between;
@@ -363,7 +348,7 @@ onMounted(() => {
 .system-title {
   font-size: 20px;
   font-weight: 600;
-  color: #2c3e50;
+  color: #fff;
   margin: 0;
 }
 
@@ -380,24 +365,49 @@ onMounted(() => {
 
 .username {
   font-size: 14px;
-  color: #606266;
+  color: #fff;
 }
 
 .user-dropdown {
   padding: 0;
-  color: #909399;
+  color: #fff;
 }
 
-.main-content {
+.main-dashboard-content {
   flex: 1;
   display: flex;
   overflow: hidden;
 }
 
+/* 左侧导航栏 */
 .sidebar {
-  width: 200px;
-  background: #2c3e50;
-  padding: 20px 0;
+  width: 60px;
+  background-color: #2C2C2C;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+}
+
+.sidebar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 10px 0;
+}
+
+.sidebar-item.active {
+  color: #C22ED0;
+}
+
+.sidebar-icon {
+  font-size: 24px;
+  margin-bottom: 4px;
+}
+
+.sidebar-text {
+  font-size: 12px;
 }
 
 .nav-menu {
@@ -440,13 +450,11 @@ onMounted(() => {
 }
 
 .patient-section {
-  flex: 1;
-  background: #fff;
+  width: calc(100% - 420px);
+  background: rgb(51,51,51);
   border-radius: 8px;
   padding: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
 }
 
 .section-header {
@@ -523,14 +531,18 @@ onMounted(() => {
 
 .patient-detail {
   width: 400px;
-  background: #fff;
+  /* background: #fff; */
+ 
+}
+.patient-detail-box{
+  background: rgb(51,51,51);
   border-radius: 8px;
   padding: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
+  color:#fff;
 }
-
 .detail-header {
   display: flex;
   justify-content: space-between;
@@ -575,9 +587,9 @@ onMounted(() => {
 }
 
 .action-buttons {
-  display: flex;
+  /* display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 12px; */
 }
 
 .action-btn {
@@ -607,7 +619,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #fff;
+  background: rgb(51, 51, 51);
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
@@ -615,4 +627,93 @@ onMounted(() => {
 :deep(.el-empty__description) {
   color: #909399;
 }
+
+
+.module-title {
+
+
+width: 120px;
+display: flex;
+align-items: center;
+justify-content: center;
+border: 2px solid #ffffff;
+border-image: linear-gradient(to right, rgb(245, 173, 7), rgb(160, 5, 216)) 1;
+border-radius: 20px;
+padding: 1px 10px ;
+
+font-size: 16px;
+font-weight: bold;
+color: #ffffff;
+}
+:deep(.el-input__wrapper) {
+  background: transparent;
+}
+.basic-info-box{
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  height: 100%;
+}
+.basic-info-content{
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-top: 10px;
+  width: 100%;
+}
+.basic-info-text{
+  width: 33%;
+  text-align: center;
+  font-size: 13px;
+}
+.basic-info-textcolor{
+  color: rgb(48,205,223);
+  padding-bottom: 8px;
+}
+.action-view-buttons{
+  height: 100px;
+  line-height:100px ;
+  text-align: center;
+  background: linear-gradient(to right, #e930aa, rgb(160, 5, 216));
+  font-size: 40px;
+  color: #FFFFFF;
+  border-radius:50px ;
+  margin-top: 20px;
+  cursor: pointer;
+}
+
+
+</style>
+
+
+<style>
+
+.dashboard-container.dashboard-container-home .el-table{
+  background: transparent !important;
+}
+.dashboard-container.dashboard-container-home .el-table tr{
+  background-color: transparent !important;
+}
+.dashboard-container.dashboard-container-home .el-table thead.is-group th.el-table__cell{
+  background-color: transparent !important;
+}
+.dashboard-container.dashboard-container-home .cell{
+  color: #fff;
+}
+.dashboard-container.dashboard-container-home .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+  background-color: transparent !important;
+}
+.dashboard-container.dashboard-container-home .el-table th.el-table__cell.is-leaf{
+  background-color: rgb(70, 70,70 ) !important;
+}
+.dashboard-container.dashboard-container-home .el-table td.el-table__cell{
+  background-color: rgb(0, 0,0 ) !important;
+
+}
+.el-table--border .el-table__cell{
+  border-right: transparent !important;
+}
+.dashboard-container.dashboard-container-home .el-table__body tr.current-row>td.el-table__cell{
+  background-color: rgb(121, 121, 121) !important;
+}
 </style>
\ No newline at end of file