Просмотр исходного кода

style: redesign performance review workspace

wangkangyjy 1 месяц назад
Родитель
Сommit
237de9fa1b

+ 6 - 0
frontend/scripts/verify-medtech-theme.mjs

@@ -81,6 +81,8 @@ const periodList = readFileSync(join(root, 'src/views/period/PeriodListView.vue'
 const periodBanner = readFileSync(join(root, 'src/components/PeriodBanner.vue'), 'utf8')
 const myOkr = readFileSync(join(root, 'src/views/okr/MyOkrView.vue'), 'utf8')
 const teamOkr = readFileSync(join(root, 'src/views/okr/TeamOkrView.vue'), 'utf8')
+const scoringEdit = readFileSync(join(root, 'src/views/scoring/ScoringEditView.vue'), 'utf8')
+const scoringList = readFileSync(join(root, 'src/views/scoring/ScoringListView.vue'), 'utf8')
 
 if (!layout.includes('clinical-shell')) failures.push('MainLayout must use clinical-shell')
 if (!layout.includes('clinical-sidebar')) failures.push('MainLayout must use clinical-sidebar')
@@ -92,6 +94,10 @@ if (!periodBanner.includes('period-status-strip')) failures.push('PeriodBanner m
 if (!myOkr.includes('okr-workbench')) failures.push('MyOkrView must use okr-workbench')
 if (!myOkr.includes('okr-standard-panel')) failures.push('MyOkrView must use okr-standard-panel')
 if (!teamOkr.includes('team-okr-workbench')) failures.push('TeamOkrView must use team-okr-workbench')
+if (!scoringEdit.includes('review-workbench')) failures.push('ScoringEditView must use review-workbench')
+if (!scoringEdit.includes('evidence-panel')) failures.push('ScoringEditView must use evidence-panel')
+if (!scoringEdit.includes('decision-panel')) failures.push('ScoringEditView must use decision-panel')
+if (!scoringList.includes('scoring-worklist')) failures.push('ScoringListView must use scoring-worklist')
 
 const vueAndCssFiles = walk(src).filter((file) => /\.(vue|css)$/.test(file))
 for (const file of vueAndCssFiles) {

+ 12 - 12
frontend/src/views/scoring/ScoringEditView.vue

@@ -8,9 +8,9 @@
       <el-tag size="large" effect="dark" round>{{ data.period?.startDate }} ~ {{ data.period?.endDate }}</el-tag>
     </div>
 
-    <div class="same-screen" v-if="data.targetUser">
+    <div class="review-workbench" v-if="data.targetUser">
       <!-- Left: OKR Records + Self Assessment -->
-      <div class="left-panel">
+      <div class="evidence-panel med-panel">
         <!-- OKR execution records -->
         <div class="panel-head">当期 OKR 完整记录</div>
         <div v-if="!okrRecords.length" class="panel-empty">暂无 OKR 记录</div>
@@ -105,7 +105,7 @@
 
           <!-- 3. Bonus/Penalty -->
           <div class="self-block">
-            <div class="self-block-title">加减分</div>
+            <div class="self-block-title">加减分</div>
             <div class="self-bp">
               <span>加分 <strong>+{{ data.selfScore.bonus }}</strong></span>
               <span>扣分 <strong>-{{ data.selfScore.penalty }}</strong></span>
@@ -122,7 +122,7 @@
       </div>
 
       <!-- Right: Superior Scoring -->
-      <div class="score-panel">
+      <div class="decision-panel">
         <div class="panel-head">考评打分</div>
 
         <!-- KR Scores -->
@@ -173,7 +173,7 @@
 
         <!-- Bonus/Penalty -->
         <div class="score-card">
-          <div class="sc-header">专项加减分</div>
+          <div class="sc-header">专项加减分</div>
           <div class="sc-body">
             <div class="sc-inline">
               <span class="sc-label">加分(上限5)</span>
@@ -352,13 +352,13 @@ function fmtTime(t) { if (!t) return ''; return t.slice(0, 16).replace('T', ' ')
 .hero-info h2 { font-size: 28px; font-weight: 700; color: #1a1a2e; margin: 0; }
 .hero-info p { font-size: 14px; color: #888; margin: 4px 0 0; }
 
-.same-screen { display: flex; gap: 20px; align-items: flex-start; }
-.left-panel {
-  flex: 1; background: #fff; border-radius: 12px; padding: 20px 24px;
+.review-workbench { display: flex; gap: 20px; align-items: flex-start; }
+.evidence-panel {
+  flex: 1; background: #fff; border-radius: 8px; padding: 20px 24px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.04); border: 1px solid #f0f0f0;
   max-height: calc(100vh - 160px); overflow-y: auto;
 }
-.score-panel { width: 480px; flex-shrink: 0; max-height: calc(100vh - 160px); overflow-y: auto; }
+.decision-panel { width: 480px; flex-shrink: 0; max-height: calc(100vh - 160px); overflow-y: auto; }
 .panel-head { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 16px; }
 .panel-empty { color: #ccc; text-align: center; padding: 20px; font-size: 13px; }
 
@@ -453,7 +453,7 @@ function fmtTime(t) { if (!t) return ''; return t.slice(0, 16).replace('T', ' ')
 .dim-score-unit { font-size: 13px; color: #999; margin-left: 6px; }
 
 .result-preview {
-  background: #f4f2f9; border-radius: 12px;
+  background: #f4f2f9; border-radius: 8px;
   padding: 20px; text-align: center; border: 1px solid #dcd4f0; margin-bottom: 16px;
 }
 .rp-formula { font-size: 12px; color: #888; }
@@ -463,7 +463,7 @@ function fmtTime(t) { if (!t) return ''; return t.slice(0, 16).replace('T', ' ')
 .submit-btn { width: 100%; background: #2b1f99; border: none; height: 48px; font-size: 15px; }
 
 @media (max-width: 1100px) {
-  .same-screen { flex-direction: column; }
-  .left-panel, .score-panel { width: 100%; max-height: none; }
+  .review-workbench { flex-direction: column; }
+  .evidence-panel, .decision-panel { width: 100%; max-height: none; }
 }
 </style>

+ 3 - 3
frontend/src/views/scoring/ScoringListView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="app-page scoring-worklist">
     <div class="page-hero">
       <div class="hero-info">
         <h2>绩效打分</h2>
@@ -86,10 +86,10 @@ function gradeType(g) { return { S: '', A: 'success', B: 'primary', C: 'danger'
 .page-hero { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
 .hero-info h2 { font-size: 28px; font-weight: 700; color: #1a1a2e; margin: 0; }
 .hero-info p { font-size: 14px; color: #888; margin: 4px 0 0; }
-.empty-state { display: flex; align-items: center; justify-content: center; height: 300px; color: #bbb; font-size: 15px; background: #fff; border-radius: 12px; }
+.empty-state { display: flex; align-items: center; justify-content: center; height: 300px; color: #bbb; font-size: 15px; background: #fff; border-radius: 8px; }
 .text-muted { color: #ccc; font-size: 13px; }
 
-.data-table { border-radius: 12px; overflow: hidden; }
+.data-table { border-radius: 8px; overflow: hidden; }
 .data-table :deep(th) { white-space: nowrap; font-weight: 600; color: #555; background: #fafbfc; }
 .data-table :deep(td) { cursor: pointer; }
 .final-grade { display: inline-block; width: 28px; height: 28px; line-height: 28px; border-radius: 8px; font-weight: 700; font-size: 14px; color: #fff; margin-right: 6px; text-align: center; }