前端UI界面美化--初版

frontend/src/views/Login.vue

@@ -1,19 +1,58 @@
 <template>
-  <div class="login-page">
-    <el-card class="login-card">
-      <h2 class="title">CTMS 登录</h2>
-      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" @keyup.enter.native="onSubmit">
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="form.username" autocomplete="username" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="form.password" type="password" autocomplete="current-password" show-password />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :loading="loading" @click="onSubmit">登录</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+  <div class="login-container">
+    <div class="login-content">
+      <div class="login-brand">
+        <h1 class="brand-title">CTMS</h1>
+        <p class="brand-subtitle">临床试验管理系统</p>
+      </div>
+      
+      <el-card class="login-card">
+        <div class="login-header">
+          <h2 class="form-title">用户登录</h2>
+          <p class="form-desc">请输入您的账号与密码以访问系统</p>
+        </div>
+
+        <el-form 
+          :model="form" 
+          ref="formRef" 
+          :rules="rules" 
+          label-position="top"
+          @keyup.enter.native="onSubmit"
+        >
+          <el-form-item label="用户名" prop="username">
+            <el-input 
+              v-model="form.username" 
+              placeholder="请输入用户名"
+              autocomplete="username"
+            />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input 
+              v-model="form.password" 
+              type="password" 
+              placeholder="请输入密码"
+              autocomplete="current-password" 
+              show-password 
+            />
+          </el-form-item>
+          
+          <div class="form-footer">
+            <el-button 
+              type="primary" 
+              :loading="loading" 
+              class="submit-btn"
+              @click="onSubmit"
+            >
+              登 录
+            </el-button>
+          </div>
+        </el-form>
+      </el-card>
+
+      <div class="login-footer">
+        <p>© 2025 Clinical Trial Management System. All Rights Reserved.</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -56,18 +95,100 @@ const onSubmit = async () => {
 </script>
 
 <style scoped>
-.login-page {
+.login-container {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: #f5f7fa;
+  background: radial-gradient(circle at 50% 50%, #f0f2f5 0%, #e6e9f0 100%);
+  position: relative;
+  overflow: hidden;
 }
-.login-card {
-  width: 360px;
+
+/* 装饰性背景元素，不使用外部资源 */
+.login-container::before {
+  content: "";
+  position: absolute;
+  width: 600px;
+  height: 600px;
+  background: var(--ctms-primary);
+  opacity: 0.03;
+  border-radius: 50%;
+  top: -200px;
+  right: -200px;
 }
-.title {
+
+.login-content {
+  width: 400px;
+  z-index: 1;
+}
+
+.login-brand {
   text-align: center;
-  margin-bottom: 16px;
+  margin-bottom: 40px;
+}
+
+.brand-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--ctms-primary);
+  letter-spacing: 2px;
+  margin: 0;
+}
+
+.brand-subtitle {
+  font-size: 16px;
+  color: var(--ctms-text-secondary);
+  margin-top: 8px;
+}
+
+.login-card {
+  padding: 8px;
+}
+
+.login-header {
+  margin-bottom: 32px;
+}
+
+.form-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  margin: 0;
+}
+
+.form-desc {
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+  margin-top: 8px;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 44px;
+  font-size: 16px;
+  margin-top: 16px;
+}
+
+.login-footer {
+  text-align: center;
+  margin-top: 48px;
+}
+
+.login-footer p {
+  font-size: 12px;
+  color: var(--ctms-text-disabled);
+}
+
+:deep(.el-form-item__label) {
+  padding-bottom: 4px;
+}
+
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #d9d9d9 inset;
+}
+
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px var(--ctms-primary) inset !important;
 }
 </style>

frontend/src/views/SubjectDetail.vue

@@ -1,18 +1,31 @@
 <template>
-  <div class="page" v-if="subject">
-    <el-card class="mb-12">
-      <h3>受试者 {{ subject.subject_no }}</h3>
-      <p>中心：{{ siteName(subject.site_id) }}</p>
-      <p>
-        状态：
-        <el-tag :type="stateColor(subject.status)">{{ stateLabel(subject.status) }}</el-tag>
-      </p>
-      <div class="actions">
+  <div class="page-container" v-if="subject">
+    <!-- 头部信息卡片 -->
+    <div class="subject-header-card">
+      <div class="header-main">
+        <div class="subject-brand">
+          <div class="brand-avatar">{{ subject.subject_no?.charAt(0) }}</div>
+          <div class="brand-info">
+            <h1 class="subject-no">{{ subject.subject_no }}</h1>
+            <p class="site-info">{{ siteName(subject.site_id) }}</p>
+          </div>
+        </div>
+        <div class="subject-status">
+          <span class="status-label">当前状态</span>
+          <el-tag :type="stateColor(subject.status)" effect="dark" class="status-tag">
+            {{ stateLabel(subject.status) }}
+          </el-tag>
+        </div>
+      </div>
+      
+      <div class="header-actions">
         <template v-for="action in availableActions" :key="action.key">
           <PermissionAction :action="permissionMap[action.key]">
             <el-button
-              size="small"
               :type="action.danger ? 'danger' : 'primary'"
+              :plain="!action.primary"
+              size="default"
+              class="action-btn"
               @click="onAction(action)"
             >
               {{ action.label }}
@@ -20,12 +33,24 @@
           </PermissionAction>
         </template>
       </div>
-    </el-card>
+    </div>
 
-    <VisitTable :visits="visits" :subject-id="subject.id" :can-edit="canVisitEdit" :on-refresh="loadVisits" />
+    <!-- 访视记录区块 -->
+    <div class="info-section">
+      <div class="section-header">
+        <div class="section-title">
+          <el-icon><Calendar /></el-icon>
+          <span>访视记录</span>
+        </div>
+      </div>
+      <div class="section-body">
+        <VisitTable :visits="visits" :subject-id="subject.id" :can-edit="canVisitEdit" :on-refresh="loadVisits" />
+      </div>
+    </div>
   </div>
-  <div v-else class="page">
-    <el-skeleton rows="3" animated />
+  
+  <div v-else class="loading-state">
+    <el-skeleton :rows="5" animated />
   </div>
 </template>
 
@@ -33,6 +58,7 @@
 import { onMounted, ref, computed } from "vue";
 import { useRoute } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
 import { fetchSubjects, updateSubject } from "../api/subjects";
 import { fetchVisits } from "../api/visits";
 import { fetchSites } from "../api/sites";
@@ -41,7 +67,7 @@ import { useAuthStore } from "../store/auth";
 import PermissionAction from "../components/PermissionAction.vue";
 import { usePermission } from "../utils/permission";
 import VisitTable from "../components/VisitTable.vue";
-import { getAvailableActions, getStateColor, getStateLabel, subjectMachine } from "../state-machine";
+import { getAvailableActions, subjectMachine } from "../state-machine";
 import type { ActionConfig } from "../state-machine";
 import { statusDict, getDictLabel, getDictColor } from "../dictionaries";
 import { evaluateAction } from "../guards/actionGuard";
@@ -62,7 +88,16 @@ const permissionMap: Record<string, string> = {
   complete: "subject.complete",
   drop: "subject.drop",
 };
-const availableActions = computed(() => getAvailableActions(subjectMachine, subject.value?.status));
+
+// 增加 primary 属性判断以便视觉区分
+const availableActions = computed(() => {
+  const actions = getAvailableActions(subjectMachine, subject.value?.status);
+  return actions.map((a: any) => ({
+    ...a,
+    primary: a.key === 'enroll' || a.key === 'complete'
+  }));
+});
+
 const stateLabel = (v?: string | null) => getDictLabel(statusDict, v || "");
 const stateColor = (v?: string | null) => getDictColor(statusDict, v || "") || "info";
 
@@ -71,7 +106,8 @@ const loadSubject = async () => {
   try {
     const subjectId = route.params.subjectId as string;
     const { data } = await fetchSubjects(study.currentStudy.id, { skip: 0, limit: 1000 });
-    const list = data.items || data || [];
+    // 兼容處理 data 結構，解決類型檢查問題
+    const list = (data as any).items || (Array.isArray(data) ? data : []);
     subject.value = list.find((s: any) => s.id === subjectId) || null;
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || "受试者加载失败");
@@ -82,7 +118,7 @@ const loadSites = async () => {
   if (!study.currentStudy) return;
   try {
     const { data } = await fetchSites(study.currentStudy.id, { limit: 500 });
-    sites.value = (data as any).items || data || [];
+    sites.value = (data as any).items || (Array.isArray(data) ? data : []);
   } catch {
     sites.value = [];
   }
@@ -98,7 +134,7 @@ const loadVisits = async () => {
   if (!study.currentStudy || !route.params.subjectId) return;
   try {
     const { data } = await fetchVisits(study.currentStudy.id, route.params.subjectId as string);
-    visits.value = data.items || data;
+    visits.value = (data as any).items || (Array.isArray(data) ? data : []);
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || "访视加载失败");
   }
@@ -168,15 +204,115 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.page {
-  padding: 16px;
-}
-.actions {
+.page-container {
   display: flex;
-  gap: 8px;
-  margin-top: 8px;
+  flex-direction: column;
+  gap: var(--ctms-spacing-lg);
 }
-.mb-12 {
-  margin-bottom: 12px;
+
+.subject-header-card {
+  background-color: #fff;
+  border-radius: var(--ctms-radius);
+  padding: 24px;
+  box-shadow: var(--ctms-shadow-sm);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.header-main {
+  display: flex;
+  gap: 40px;
+}
+
+.subject-brand {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.brand-avatar {
+  width: 56px;
+  height: 56px;
+  background-color: var(--ctms-primary-light);
+  color: var(--ctms-primary);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.subject-no {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  margin: 0;
+}
+
+.site-info {
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+  margin-top: 4px;
+}
+
+.subject-status {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.status-label {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.status-tag {
+  font-weight: 600;
+  padding: 0 12px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.action-btn {
+  min-width: 88px;
+}
+
+.info-section {
+  background-color: #fff;
+  border-radius: var(--ctms-radius);
+  box-shadow: var(--ctms-shadow-sm);
+  overflow: hidden;
+}
+
+.section-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--ctms-border-color);
+  background-color: #fafafa;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  font-size: 16px;
+}
+
+.section-body {
+  padding: 24px;
+}
+
+.loading-state {
+  padding: 40px;
+  background-color: #fff;
+  border-radius: var(--ctms-radius);
 }
 </style>

frontend/src/views/Subjects.vue

@@ -1,49 +1,97 @@
 <template>
-  <div class="page">
-    <el-card class="mb-12">
-      <div class="filters">
-        <el-select
-          v-model="filters.site_id"
-          placeholder="中心"
-          clearable
-          filterable
-          style="width: 200px"
-          @change="loadSubjects"
-        >
-          <el-option v-for="s in sites" :key="s.id" :label="s.name || s.id" :value="s.id" />
-        </el-select>
-        <el-select v-model="filters.status" placeholder="状态" clearable @change="loadSubjects">
-          <el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
-        </el-select>
-        <div class="spacer" />
-        <el-button type="primary" v-if="canEdit" @click="showForm = true">新增受试者</el-button>
+  <div class="page-container">
+    <div class="page-header">
+      <div class="header-info">
+        <h1 class="page-title">受试者管理</h1>
+        <p class="page-subtitle">查看与维护当前项目的所有受试者信息</p>
+      </div>
+      <div class="header-actions">
+        <el-button type="primary" v-if="canEdit" @click="showForm = true">
+          <el-icon><Plus /></el-icon> 新增受试者
+        </el-button>
+      </div>
+    </div>
+
+    <el-card class="filter-card">
+      <div class="filter-layout">
+        <div class="filter-items">
+          <div class="filter-item">
+            <span class="filter-label">所属中心</span>
+            <el-select
+              v-model="filters.site_id"
+              placeholder="全部中心"
+              clearable
+              filterable
+              class="filter-select"
+              @change="loadSubjects"
+            >
+              <el-option v-for="s in sites" :key="s.id" :label="s.name || s.id" :value="s.id" />
+            </el-select>
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">当前状态</span>
+            <el-select 
+              v-model="filters.status" 
+              placeholder="全部状态" 
+              clearable 
+              class="filter-select"
+              @change="loadSubjects"
+            >
+              <el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
+            </el-select>
+          </div>
+        </div>
+        <div class="filter-reset">
+          <el-button link @click="resetFilters">重置筛选</el-button>
+        </div>
       </div>
     </el-card>
 
-    <el-card>
-      <el-table :data="subjects" v-loading="loading" style="width: 100%" @row-click="goDetail">
-        <el-table-column prop="subject_no" label="受试者编号" />
-        <el-table-column prop="site_id" label="中心">
+    <el-card class="table-card" v-loading="loading">
+      <el-table :data="subjects" style="width: 100%" @row-click="goDetail" class="ctms-table">
+        <el-table-column prop="subject_no" label="受试者编号" min-width="120">
+          <template #default="scope">
+            <span class="subject-no">{{ scope.row.subject_no }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="site_id" label="中心名称" min-width="180">
           <template #default="scope">
             {{ siteName(scope.row.site_id) }}
           </template>
         </el-table-column>
         <el-table-column prop="status" label="状态" width="120">
           <template #default="scope">
-            <el-tag>{{ statusLabel(scope.row.status) }}</el-tag>
+            <el-tag :type="statusTagType(scope.row.status)" size="small">
+              {{ statusLabel(scope.row.status) }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="screening_date" label="筛选日期" width="140" />
         <el-table-column prop="enrollment_date" label="入组日期" width="140" />
+        <el-table-column label="操作" width="100" fixed="right">
+          <template #default>
+            <el-button link type="primary">详细资料</el-button>
+          </template>
+        </el-table-column>
+        
+        <template #empty>
+          <div class="empty-state">
+            <el-icon class="empty-icon"><Document /></el-icon>
+            <p>暂无符合条件的受试者</p>
+          </div>
+        </template>
       </el-table>
-      <el-pagination
-        class="pagination"
-        layout="prev, pager, next"
-        :page-size="pageSize"
-        :current-page="page"
-        :total="total"
-        @current-change="onPageChange"
-      />
+      
+      <div class="pagination-container">
+        <el-pagination
+          background
+          layout="total, prev, pager, next, sizes"
+          :page-size="pageSize"
+          :current-page="page"
+          :total="total"
+          @current-change="onPageChange"
+        />
+      </div>
     </el-card>
 
     <SubjectForm v-model="showForm" :sites="sites" @success="loadSubjects" />
@@ -54,6 +102,7 @@
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
+import { Plus, Document } from "@element-plus/icons-vue";
 import { fetchSubjects } from "../api/subjects";
 import { fetchSites } from "../api/sites";
 import { useStudyStore } from "../store/study";
@@ -116,6 +165,11 @@ const loadSubjects = async () => {
   }
 };
 
+const resetFilters = () => {
+  filters.value = { site_id: "", status: "" };
+  loadSubjects();
+};
+
 const onPageChange = (p: number) => {
   page.value = p;
   loadSubjects();
@@ -151,26 +205,102 @@ const statusLabel = (v: string) =>
     DROPPED: "已脱落",
   }[v] || v);
 
+const statusTagType = (v: string) => {
+  const map: Record<string, string> = {
+    SCREENING: "info",
+    ENROLLED: "warning",
+    COMPLETED: "success",
+    DROPPED: "danger",
+  };
+  return map[v] || "info";
+};
+
 const siteName = (id: string) => siteMap.value[id] || id || "-";
 </script>
 
 <style scoped>
-.page {
-  padding: 16px;
-}
-.filters {
+.page-container {
   display: flex;
-  gap: 8px;
+  flex-direction: column;
+  gap: var(--ctms-spacing-lg);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
   align-items: center;
 }
-.spacer {
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  margin: 0;
+}
+
+.page-subtitle {
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+  margin-top: 4px;
+}
+
+.filter-card {
+  margin-bottom: 0;
+}
+
+.filter-layout {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.filter-items {
+  display: flex;
+  gap: 24px;
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.filter-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ctms-text-regular);
+}
+
+.filter-select {
+  width: 200px;
+}
+
+.table-card {
   flex: 1;
 }
-.pagination {
-  margin-top: 12px;
-  text-align: right;
+
+.subject-no {
+  font-weight: 600;
+  color: var(--ctms-primary);
 }
-.mb-12 {
+
+.pagination-container {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.empty-state {
+  padding: 40px 0;
+  color: var(--ctms-text-disabled);
+}
+
+.empty-icon {
+  font-size: 48px;
   margin-bottom: 12px;
 }
+
+:deep(.el-table__row) {
+  cursor: pointer;
+}
 </style>