Home Explore Help
Sign In
WangKang
/
okr-performance
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
okr-performance
/
frontend
/
public
/
prototype.html

prototype.html 82 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942 
  1. <!doctype html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4.   <meta charset="utf-8" />
    5. 

  5.   <meta name="viewport" content="width=device-width, initial-scale=1" />
    6. 

  6.   <title>医梦AI · OKR绩效 — 完整设计原型</title>
    7. 

  7.   <style>
    8. 

  8.     /* ═══════════════════════════════════════════════════════════════════
    9. 

  9.        Cohere-inspired tokens · 医梦AI (智慧医疗 OKR)
    10. 

  10.        Brand: 深靛蓝 #2b1f99 · 青 #3ad4d8
    11. 

  11.        ═══════════════════════════════════════════════════════════════ */
    12. 

  12.     :root {
    13. 

  13.       --bg:      #ffffff;
    14. 

  14.       --surface: #ffffff;
    15. 

  15.       --surface-alt: #f7f7f8;
    16. 

  16.       --dark:         #2b1f99;
    17. 

  17.       --dark-surface: #1d166b;
    18. 

  18.       --dark-deeper:  #120d4a;
    19. 

  19.       --fg:      #17171c;
    20. 

  20.       --fg-2:    #616161;
    21. 

  21.       --muted:   #93939f;
    22. 

  22.       --meta:    #b0b0b8;
    23. 

  23.       --on-dark: #ffffff;
    24. 

  24.       --accent:        #3ad4d8;
    25. 

  25.       --accent-hover:  #17a9ad;
    26. 

  26.       --accent-soft:   rgba(58,212,216,0.10);
    27. 

  27.       --accent-glow:   rgba(58,212,216,0.18);
    28. 

  28.       --accent-hover-bg: rgba(58,212,216,0.06);
    29. 

  29.       --accent-micro:    rgba(58,212,216,0.035);
    30. 

  30.       --success: #2e9d65;
    31. 

  31.       --warn:    #c98219;
    32. 

  32.       --danger:  #c94a4a;
    33. 

  33.       --info:    #4c6f91;
    34. 

  34.       --orange:       #f59e0b;
    35. 

  35.       --orange-bg:    rgba(245,158,11,0.10);
    36. 

  36.       --orange-text:  #b45309;
    37. 

  37.       --orange-border: rgba(245,158,11,0.25);
    38. 

  38.       --red:          #dc2626;
    39. 

  39.       --red-bg:       rgba(220,38,38,0.08);
    40. 

  40.       --red-text:     #b91c1c;
    41. 

  41.       --red-border:   rgba(220,38,38,0.20);
    42. 

  42.       --green-bg:     rgba(46,157,101,0.08);
    43. 

  43.       --green-text:   #1e6b3e;
    44. 

  44.       --indigo-soft:  rgba(43,31,153,0.07);
    45. 

  45.       --indigo-border: rgba(43,31,153,0.18);
    46. 

  46.       --indigo-text:  #1d166b;
    47. 

  47.       --border:       #e5e5e9;
    48. 

  48.       --border-light: #f0f0f3;
    49. 

  49.       --border-soft:  rgba(0,0,0,0.05);
    50. 

  50.       --font-display: 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
    51. 

  51.       --font-body:    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;
    52. 

  52.       --font-mono:    'SF Mono', 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
    53. 

  53.       --fs-hero:   clamp(48px,6vw,72px);
    54. 

  54.       --fs-h1:     clamp(32px,3.8vw,48px);
    55. 

  55.       --fs-h2:     28px;
    56. 

  56.       --fs-h3:     20px;
    57. 

  57.       --fs-lead:   17px;
    58. 

  58.       --fs-body:   15px;
    59. 

  59.       --fs-sm:     13px;
    60. 

  60.       --fs-xs:     11px;
    61. 

  61.       --fs-num:    clamp(40px,5vw,56px);
    62. 

  62.       --gap-xs:  6px;
    63. 

  63.       --gap-sm:  12px;
    64. 

  64.       --gap-md:  20px;
    65. 

  65.       --gap-lg:  32px;
    66. 

  66.       --gap-xl:  56px;
    67. 

  67.       --gap-2xl: 96px;
    68. 

  68.       --radius-xs:  4px;
    69. 

  69.       --radius-sm:  8px;
    70. 

  70.       --radius-md:  16px;
    71. 

  71.       --radius-lg:  22px;
    72. 

  72.       --radius-pill: 9999px;
    73. 

  73.       --container: 1120px;
    74. 

  74.       --gutter:    28px;
    75. 

  75.       --sidebar-w: 240px;
    76. 

  76.     }
    77. 

  77. 

  78.     *, *::before, *::after { box-sizing: border-box; margin: 0; }
    79. 

  79.     html { font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
    80. 

  80.     body { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
    81. 

  81. 

  82.     /* ─── App shell ──────────────────────────────────────────────── */
    83. 

  83.     .app { display: flex; height: 100vh; overflow: hidden; }
    84. 

  84.     .sidebar {
    85. 

  85.       width: var(--sidebar-w); min-width: var(--sidebar-w);
    86. 

  86.       background: var(--surface); border-right: 1px solid var(--border);
    87. 

  87.       display: flex; flex-direction: column; overflow-y: auto;
    88. 

  88.     }
    89. 

  89.     .sidebar-brand {
    90. 

  90.       padding: 20px 20px 16px; font-family: var(--font-display);
    91. 

  91.       font-size: 18px; font-weight: 600; color: var(--dark);
    92. 

  92.       border-bottom: 1px solid var(--border-light); letter-spacing: -0.3px;
    93. 

  93.     }
    94. 

  94.     .sidebar-brand span { color: var(--accent); }
    95. 

  95.     .nav-module { border-bottom: 1px solid var(--border-light); padding: 8px 0; }
    96. 

  96.     .nav-module__header {
    97. 

  97.       display: flex; align-items: center; gap: 8px; padding: 10px 20px;
    98. 

  98.       font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
    99. 

  99.       cursor: pointer; user-select: none; letter-spacing: 0.5px; text-transform: uppercase;
    100. 

  100.       transition: color .15s;
    101. 

  101.     }
    102. 

  102.     .nav-module__header:hover { color: var(--fg-2); }
    103. 

  103.     .nav-module__arrow { font-size: 10px; transition: transform .2s; margin-left: auto; }
    104. 

  104.     .nav-module--collapsed .nav-module__arrow { transform: rotate(-90deg); }
    105. 

  105.     .nav-module--collapsed .nav-item { display: none; }
    106. 

  106.     .nav-item {
    107. 

  107.       display: flex; align-items: center; gap: 10px; padding: 9px 20px 9px 32px;
    108. 

  108.       font-size: 14px; color: var(--fg-2); cursor: pointer;
    109. 

  109.       border-radius: 0; transition: background .12s, color .12s;
    110. 

  110.     }
    111. 

  111.     .nav-item:hover { background: var(--accent-hover-bg); color: var(--fg); }
    112. 

  112.     .nav-item--active { background: var(--accent-soft); color: var(--dark); font-weight: 600;
    113. 

  113.       box-shadow: inset 3px 0 0 var(--accent); }
    114. 

  114.     .nav-item__icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
    115. 

  115.       font-size: 13px; flex-shrink: 0; }
    116. 

  116.     .nav-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    117. 

  117.       margin-left: auto; }
    118. 

  118.     .main {
    119. 

  119.       flex: 1; overflow-y: auto; background: var(--surface-alt);
    120. 

  120.       display: flex; flex-direction: column;
    121. 

  121.     }
    122. 

  122.     .page-panel { display: none; padding: var(--gap-lg); flex: 1; }
    123. 

  123.     .page-panel--active { display: block; }
    124. 

  124. 

  125.     /* ─── Top bar ────────────────────────────────────────────────── */
    126. 

  126.     .topbar {
    127. 

  127.       display: flex; align-items: center; justify-content: space-between;
    128. 

  128.       padding: 0 var(--gap-lg); height: 56px; background: var(--surface);
    129. 

  129.       border-bottom: 1px solid var(--border-light); flex-shrink: 0;
    130. 

  130.     }
    131. 

  131.     .topbar__left { display: flex; align-items: center; gap: var(--gap-sm); }
    132. 

  132.     .topbar__title { font-size: var(--fs-h3); font-weight: 600; color: var(--fg); letter-spacing: -0.3px; }
    133. 

  133.     .topbar__actions { display: flex; align-items: center; gap: var(--gap-sm); }
    134. 

  134.     .topbar__avatar {
    135. 

  135.       width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
    136. 

  136.       color: var(--dark); display: flex; align-items: center; justify-content: center;
    137. 

  137.       font-size: 13px; font-weight: 700; cursor: pointer;
    138. 

  138.     }
    139. 

  139. 

  140.     /* ─── Common components ──────────────────────────────────────── */
    141. 

  141.     .s-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-md); }
    142. 

  142.     .s-head__left h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.5px; color: var(--fg); }
    143. 

  143.     .s-head__left p { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
    144. 

  144.     .card {
    145. 

  145.       background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    146. 

  146.       padding: var(--gap-md); transition: box-shadow .15s, border-color .15s;
    147. 

  147.     }
    148. 

  148.     .card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
    149. 

  149.     .card--flat { border-radius: var(--radius-sm); }
    150. 

  150.     .card--lg { border-radius: var(--radius-lg); }
    151. 

  151. 

  152.     /* Buttons */
    153. 

  153.     .btn {
    154. 

  154.       display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
    155. 

  155.       font-family: var(--font-body); font-size: 14px; font-weight: 500;
    156. 

  156.       padding: 10px 20px; border-radius: var(--radius-pill); transition: all .15s;
    157. 

  157.     }
    158. 

  158.     .btn-primary { background: var(--accent); color: var(--dark); }
    159. 

  159.     .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 0 3px var(--accent-glow); }
    160. 

  160.     .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--fg-2); }
    161. 

  161.     .btn-outline:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-hover-bg); }
    162. 

  162.     .btn-sm { padding: 6px 14px; font-size: var(--fs-sm); }
    163. 

  163.     .btn-dark { background: var(--dark); color: var(--on-dark); }
    164. 

  164.     .btn-dark:hover { background: var(--dark-surface); }
    165. 

  165.     .btn-ghost { background: transparent; color: var(--fg-2); padding: 8px 12px; }
    166. 

  166.     .btn-ghost:hover { background: var(--accent-hover-bg); color: var(--fg); }
    167. 

  167.     .btn-danger { background: var(--red-bg); color: var(--red-text); }
    168. 

  168.     .btn-danger:hover { background: var(--red); color: #fff; }
    169. 

  169. 

  170.     /* Tags / Badges */
    171. 

  171.     .tag {
    172. 

  172.       display: inline-flex; align-items: center; gap: 4px;
    173. 

  173.       font-size: var(--fs-xs); font-weight: 500; padding: 3px 10px;
    174. 

  174.       border-radius: var(--radius-pill); white-space: nowrap;
    175. 

  175.     }
    176. 

  176.     .tag-accent { background: var(--accent-soft); color: var(--accent-hover); }
    177. 

  177.     .tag-warn { background: var(--orange-bg); color: var(--orange-text); }
    178. 

  178.     .tag-danger { background: var(--red-bg); color: var(--red-text); }
    179. 

  179.     .tag-success { background: var(--green-bg); color: var(--green-text); }
    180. 

  180.     .tag-indigo { background: var(--indigo-soft); color: var(--indigo-text); }
    181. 

  181.     .tag-muted { background: var(--surface-alt); color: var(--muted); }
    182. 

  182. 

  183.     /* Progress bar */
    184. 

  184.     .prog { height: 8px; background: var(--border-light); border-radius: var(--radius-pill); overflow: hidden; }
    185. 

  185.     .prog__fill { height: 100%; border-radius: var(--radius-pill); transition: width .4s; }
    186. 

  186.     .prog__fill--accent { background: var(--accent); }
    187. 

  187.     .prog__fill--indigo { background: var(--dark); }
    188. 

  188.     .prog__fill--orange { background: var(--orange); }
    189. 

  189.     .prog__fill--red { background: var(--red); }
    190. 

  190.     .prog__fill--green { background: var(--success); }
    191. 

  191. 

  192.     /* Stat card */
    193. 

  193.     .stat-card {
    194. 

  194.       background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    195. 

  195.       padding: var(--gap-md); transition: border-color .15s, box-shadow .15s;
    196. 

  196.     }
    197. 

  197.     .stat-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
    198. 

  198.     .stat-card__top { height: 4px; margin: calc(-1 * var(--gap-md)) calc(-1 * var(--gap-md)) var(--gap-sm); border-radius: var(--radius-md) var(--radius-md) 0 0; }
    199. 

  199.     .stat-card__top--accent { background: var(--accent); }
    200. 

  200.     .stat-card__top--indigo { background: var(--dark); }
    201. 

  201.     .stat-card__top--orange { background: var(--orange); }
    202. 

  202.     .stat-card__top--red { background: var(--red); }
    203. 

  203.     .stat-card__top--green { background: var(--success); }
    204. 

  204.     .stat-card__num { font-family: var(--font-display); font-size: var(--fs-num); font-weight: 700; line-height: 1; color: var(--fg); }
    205. 

  205.     .stat-card__label { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
    206. 

  206. 

  207.     /* Metric bar */
    208. 

  208.     .m-bar { display: flex; align-items: center; gap: var(--gap-sm); }
    209. 

  209.     .m-bar__label { font-size: var(--fs-sm); color: var(--fg-2); min-width: 80px; }
    210. 

  210.     .m-bar__val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg); font-weight: 600; min-width: 44px; text-align: right; }
    211. 

  211.     .m-bar__prog { flex: 1; }
    212. 

  212. 

  213.     /* Table */
    214. 

  214.     .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
    215. 

  215.     .tbl th { text-align: left; font-weight: 600; color: var(--muted); padding: 10px var(--gap-sm); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.5px; }
    216. 

  216.     .tbl td { padding: 10px var(--gap-sm); border-bottom: 1px solid var(--border-light); color: var(--fg-2); }
    217. 

  217.     .tbl tr:nth-child(even) td { background: var(--accent-micro); }
    218. 

  218.     .tbl tr:hover td { background: var(--accent-hover-bg); }
    219. 

  219.     .tbl__link { color: var(--dark); font-weight: 500; cursor: pointer; }
    220. 

  220.     .tbl__link:hover { color: var(--accent-hover); }
    221. 

  221. 

  222.     /* Grid helpers */
    223. 

  223.     .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
    224. 

  224.     .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
    225. 

  225.     .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
    226. 

  226.     .flex-between { display: flex; align-items: center; justify-content: space-between; }
    227. 

  227.     .flex-wrap { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
    228. 

  228.     .gap-md { gap: var(--gap-md); }
    229. 

  229.     .gap-sm { gap: var(--gap-sm); }
    230. 

  230.     .mt-xs { margin-top: var(--gap-xs); }
    231. 

  231.     .mt-sm { margin-top: var(--gap-sm); }
    232. 

  232.     .mt-md { margin-top: var(--gap-md); }
    233. 

  233.     .mt-lg { margin-top: var(--gap-lg); }
    234. 

  234.     .mb-sm { margin-bottom: var(--gap-sm); }
    235. 

  235.     .mb-md { margin-bottom: var(--gap-md); }
    236. 

  236.     .mb-lg { margin-bottom: var(--gap-lg); }
    237. 

  237.     .text-muted { color: var(--muted); }
    238. 

  238.     .text-accent { color: var(--accent); }
    239. 

  239.     .text-danger { color: var(--red-text); }
    240. 

  240.     .text-sm { font-size: var(--fs-sm); }
    241. 

  241.     .text-xs { font-size: var(--fs-xs); }
    242. 

  242.     .mono { font-family: var(--font-mono); }
    243. 

  243. 

  244.     /* Form */
    245. 

  245.     .fld { margin-bottom: var(--gap-md); }
    246. 

  246.     .fld label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2); margin-bottom: 4px; }
    247. 

  247.     .fld input, .fld select, .fld textarea {
    248. 

  248.       width: 100%; padding: 10px 14px; font-size: var(--fs-body); font-family: var(--font-body);
    249. 

  249.       border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
    250. 

  250.       color: var(--fg); outline: none; transition: border-color .15s;
    251. 

  251.     }
    252. 

  252.     .fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
    253. 

  253. 

  254.     /* Timeline */
    255. 

  255.     .tl { position: relative; padding-left: 28px; }
    256. 

  256.     .tl::before { content:''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
    257. 

  257.     .tl__item { position: relative; padding-bottom: var(--gap-lg); }
    258. 

  258.     .tl__item:last-child { padding-bottom: 0; }
    259. 

  259.     .tl__dot { position: absolute; left: -23px; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); }
    260. 

  260.     .tl__dot--done { background: var(--accent); }
    261. 

  261.     .tl__dot--warn { border-color: var(--orange); background: var(--orange); }
    262. 

  262.     .tl__dot--active { background: var(--surface); box-shadow: 0 0 0 3px var(--accent-glow); }
    263. 

  263.     .tl__title { font-weight: 600; font-size: var(--fs-body); color: var(--fg); }
    264. 

  264.     .tl__desc { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
    265. 

  265. 

  266.     /* Tree */
    267. 

  267.     .tree { list-style: none; padding: 0; }
    268. 

  268.     .tree li { position: relative; padding: 6px 0 6px 24px; font-size: var(--fs-sm); }
    269. 

  269.     .tree li::before { content:''; position: absolute; left: 8px; top: 0; bottom: 50%; width: 1px; background: var(--border); }
    270. 

  270.     .tree li::after { content:''; position: absolute; left: 8px; top: 50%; width: 12px; height: 1px; background: var(--border); }
    271. 

  271.     .tree li:last-child::before { height: 50%; }
    272. 

  272.     .tree__node { font-weight: 600; color: var(--fg); }
    273. 

  273.     .tree__leaf { color: var(--fg-2); }
    274. 

  274. 

  275.     /* Notification */
    276. 

  276.     .notif { display: flex; gap: var(--gap-sm); padding: var(--gap-sm) 0; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background .12s; }
    277. 

  277.     .notif:hover { background: var(--accent-micro); }
    278. 

  278.     .notif--unread { background: var(--accent-soft); }
    279. 

  279.     .notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 6px; }
    280. 

  280.     .notif__body { flex: 1; }
    281. 

  281.     .notif__title { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
    282. 

  282.     .notif__desc { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
    283. 

  283.     .notif__time { font-size: var(--fs-xs); color: var(--meta); white-space: nowrap; }
    284. 

  284. 

  285.     /* Chat / feedback */
    286. 

  286.     .chat { display: flex; flex-direction: column; gap: var(--gap-sm); }
    287. 

  287.     .chat__msg { max-width: 75%; padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: 1.5; }
    288. 

  288.     .chat__msg--in { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
    289. 

  289.     .chat__msg--out { align-self: flex-end; background: var(--accent-soft); border: 1px solid var(--accent-glow); }
    290. 

  290.     .chat__msg--ai { align-self: flex-start; background: var(--indigo-soft); border: 1px solid var(--indigo-border); }
    291. 

  291.     .chat__meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
    292. 

  292. 

  293.     /* Alignment tree */
    294. 

  294.     .align-tree { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); }
    295. 

  295.     .align-node {
    296. 

  296.       background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    297. 

  297.       padding: 10px 18px; font-size: var(--fs-sm); text-align: center; min-width: 160px;
    298. 

  298.     }
    299. 

  299.     .align-node--root { border-color: var(--dark); background: var(--indigo-soft); font-weight: 700; color: var(--dark); }
    300. 

  300.     .align-node--warn { border-color: var(--orange); background: var(--orange-bg); }
    301. 

  301.     .align-connector { width: 2px; height: 20px; background: var(--border); }
    302. 

  302.     .align-row { display: flex; gap: var(--gap-lg); justify-content: center; }
    303. 

  303.     .align-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    304. 

  304. 

  305.     /* Gantt */
    306. 

  306.     .gantt { display: flex; flex-direction: column; gap: 1px; background: var(--border-light); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
    307. 

  307.     .gantt__row { display: flex; align-items: center; background: var(--surface); padding: 0; }
    308. 

  308.     .gantt__label { width: 160px; padding: 10px 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--fg); flex-shrink: 0; }
    309. 

  309.     .gantt__track { flex: 1; height: 40px; position: relative; }
    310. 

  310.     .gantt__bar { position: absolute; top: 8px; height: 24px; border-radius: var(--radius-xs); display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; color: #fff; }
    311. 

  311.     .gantt__bar--accent { background: var(--accent); color: var(--dark); }
    312. 

  312.     .gantt__bar--indigo { background: var(--dark); }
    313. 

  313.     .gantt__bar--orange { background: var(--orange); }
    314. 

  314.     .gantt__bar--red { background: var(--red); }
    315. 

  315.     .gantt__bar--green { background: var(--success); }
    316. 

  316.     .gantt__marker { position: absolute; top: 4px; width: 2px; height: 32px; background: var(--red); }
    317. 

  317. 

  318.     /* Org chart */
    319. 

  319.     .org-node {
    320. 

  320.       display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    321. 

  321.       border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
    322. 

  322.       cursor: pointer; transition: border-color .15s;
    323. 

  323.     }
    324. 

  324.     .org-node:hover { border-color: var(--accent); }
    325. 

  325.     .org-node__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
    326. 

  326.     .org-node__name { font-weight: 600; font-size: var(--fs-sm); }
    327. 

  327.     .org-node__role { font-size: var(--fs-xs); color: var(--muted); }
    328. 

  328. 

  329.     /* Appeal status flow */
    330. 

  330.     .flow { display: flex; align-items: center; gap: 0; }
    331. 

  331.     .flow__step { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-alt); }
    332. 

  332.     .flow__step--done { color: var(--green-text); background: var(--green-bg); }
    333. 

  333.     .flow__step--active { color: var(--accent-hover); background: var(--accent-soft); font-weight: 600; }
    334. 

  334.     .flow__step--reject { color: var(--red-text); background: var(--red-bg); }
    335. 

  335.     .flow__arrow { color: var(--meta); margin: 0 2px; font-size: 10px; }
    336. 

  336. 

  337.     /* Slider */
    338. 

  338.     input[type=range] { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--border-light); outline: none; }
    339. 

  339.     input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }
    340. 

  340. 

  341.     /* Login page special */
    342. 

  342.     .login-page { display: flex; height: 100vh; }
    343. 

  343.     .login-brand {
    344. 

  344.       flex: 1; background: var(--dark); display: flex; flex-direction: column;
    345. 

  345.       align-items: center; justify-content: center; padding: var(--gap-xl); color: var(--on-dark);
    346. 

  346.     }
    347. 

  347.     .login-brand h1 { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.5px; }
    348. 

  348.     .login-brand h1 span { color: var(--accent); }
    349. 

  349.     .login-brand p { font-size: var(--fs-lead); color: rgba(255,255,255,0.7); margin-top: var(--gap-sm); max-width: 360px; text-align: center; }
    350. 

  350.     .login-brand__stats { display: flex; gap: var(--gap-xl); margin-top: var(--gap-xl); }
    351. 

  351.     .login-brand__stat { text-align: center; }
    352. 

  352.     .login-brand__stat b { display: block; font-family: var(--font-display); font-size: 32px; color: var(--accent); }
    353. 

  353.     .login-brand__stat span { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); }
    354. 

  354.     .login-form {
    355. 

  355.       width: 440px; display: flex; flex-direction: column; justify-content: center; padding: var(--gap-xl);
    356. 

  356.     }
    357. 

  357.     .login-form h2 { font-size: var(--fs-h2); font-weight: 600; margin-bottom: var(--gap-xs); }
    358. 

  358.     .login-form .sub { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--gap-lg); }
    359. 

  359. 

  360.     /* Scrollbar */
    361. 

  361.     ::-webkit-scrollbar { width: 6px; }
    362. 

  362.     ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    363. 

  363. 

  364.     /* Responsive */
    365. 

  365.     @media (max-width: 860px) {
    366. 

  366.       .sidebar { display: none; }
    367. 

  367.       .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    368. 

  368.       .login-form { width: 100%; }
    369. 

  369.       .login-brand { display: none; }
    370. 

  370.     }
    371. 

  371.     @media (max-width: 1100px) {
    372. 

  372.       .grid-4 { grid-template-columns: 1fr 1fr; }
    373. 

  373.     }
    374. 

  374.   </style>
    375. 

  375. </head>
    376. 

  376. <body>
    377. 

  377. 

  378. <div class="app" id="app">
    379. 

  379.   <!-- ═══ Sidebar ═══ -->
    380. 

  380.   <nav class="sidebar" id="sidebar">
    381. 

  381.     <div class="sidebar-brand">医梦<span>AI</span> · OKR</div>
    382. 

  382. 

  383.     <div class="nav-module" id="mod-workspace">
    384. 

  384.       <div class="nav-module__header" onclick="toggleMod('mod-workspace')">🏠 工作台 <span class="nav-module__arrow">▾</span></div>
    385. 

  385.       <div class="nav-item nav-item--active" data-page="login" onclick="navTo('login',this)"><span class="nav-item__icon">🔑</span> 登录</div>
    386. 

  386.       <div class="nav-item" data-page="workspace" onclick="navTo('workspace',this)"><span class="nav-item__icon">🏠</span> 工作台</div>
    387. 

  387.     </div>
    388. 

  388. 

  389.     <div class="nav-module" id="mod-okr">
    390. 

  390.       <div class="nav-module__header" onclick="toggleMod('mod-okr')">📋 OKR <span class="nav-module__arrow">▾</span></div>
    391. 

  391.       <div class="nav-item" data-page="my-okr" onclick="navTo('my-okr',this)"><span class="nav-item__icon">🎯</span> 我的 OKR</div>
    392. 

  392.       <div class="nav-item" data-page="team-okr" onclick="navTo('team-okr',this)"><span class="nav-item__icon">👥</span> 团队 OKR</div>
    393. 

  393.       <div class="nav-item" data-page="okr-align" onclick="navTo('okr-align',this)"><span class="nav-item__icon">🔗</span> OKR 对齐</div>
    394. 

  394.       <div class="nav-item" data-page="okr-exec" onclick="navTo('okr-exec',this)"><span class="nav-item__icon">📈</span> 执行进度</div>
    395. 

  395.     </div>
    396. 

  396. 

  397.     <div class="nav-module" id="mod-score">
    398. 

  398.       <div class="nav-module__header" onclick="toggleMod('mod-score')">📊 绩效 <span class="nav-module__arrow">▾</span></div>
    399. 

  399.       <div class="nav-item" data-page="my-result" onclick="navTo('my-result',this)"><span class="nav-item__icon">⭐</span> 我的绩效</div>
    400. 

  400.       <div class="nav-item" data-page="score-history" onclick="navTo('score-history',this)"><span class="nav-item__icon">📅</span> 历史绩效</div>
    401. 

  401.       <div class="nav-item" data-page="scoring-list" onclick="navTo('scoring-list',this)"><span class="nav-item__icon">✏️</span> 绩效打分</div>
    402. 

  402.       <div class="nav-item" data-page="scoring-detail" onclick="navTo('scoring-detail',this)"><span class="nav-item__icon">📝</span> 绩效考评</div>
    403. 

  403.       <div class="nav-item" data-page="appeal" onclick="navTo('appeal',this)"><span class="nav-item__icon">⚖️</span> 绩效申诉</div>
    404. 

  404.       <div class="nav-item" data-page="feedback" onclick="navTo('feedback',this)"><span class="nav-item__icon">💬</span> 绩效沟通</div>
    405. 

  405.     </div>
    406. 

  406. 

  407.     <div class="nav-module" id="mod-admin">
    408. 

  408.       <div class="nav-module__header" onclick="toggleMod('mod-admin')">⚙️ 管理 <span class="nav-module__arrow">▾</span></div>
    409. 

  409.       <div class="nav-item" data-page="periods" onclick="navTo('periods',this)"><span class="nav-item__icon">🔄</span> 考核周期</div>
    410. 

  410.       <div class="nav-item" data-page="templates" onclick="navTo('templates',this)"><span class="nav-item__icon">📐</span> 绩效模板</div>
    411. 

  411.       <div class="nav-item" data-page="dimensions" onclick="navTo('dimensions',this)"><span class="nav-item__icon">📏</span> 考核维度</div>
    412. 

  412.       <div class="nav-item" data-page="org" onclick="navTo('org',this)"><span class="nav-item__icon">🏛️</span> 组织架构</div>
    413. 

  413.     </div>
    414. 

  414. 

  415.     <div class="nav-module" id="mod-sys">
    416. 

  416.       <div class="nav-module__header" onclick="toggleMod('mod-sys')">🔔 系统 <span class="nav-module__arrow">▾</span></div>
    417. 

  417.       <div class="nav-item" data-page="notifications" onclick="navTo('notifications',this)"><span class="nav-item__icon">🔔</span> 消息通知<span class="nav-item__dot"></span></div>
    418. 

  418.       <div class="nav-item" data-page="logs" onclick="navTo('logs',this)"><span class="nav-item__icon">📋</span> 操作日志</div>
    419. 

  419.     </div>
    420. 

  420.   </nav>
    421. 

  421. 

  422.   <!-- ═══ Main ═══ -->
    423. 

  423.   <div class="main">
    424. 

  424.     <div class="topbar">
    425. 

  425.       <div class="topbar__left"><span class="topbar__title" id="topbarTitle">登录</span></div>
    426. 

  426.       <div class="topbar__actions">
    427. 

  427.         <span style="font-size:var(--fs-sm);color:var(--muted);">2025 Q4 · 年度考核</span>
    428. 

  428.         <div class="topbar__avatar">李</div>
    429. 

  429.       </div>
    430. 

  430.     </div>
    431. 

  431. 

  432.     <!-- ═══════════════════════════════════════════════════════════════
    433. 

  433.       PAGE PANELS — 18 pages
    434. 

  434.       ═══════════════════════════════════════════════════════════════ -->
    435. 

  435. 

  436.     <!-- ── LOGIN ──────────────────────────────────────────────── -->
    437. 

  437.     <div class="login-page page-panel page-panel--active" id="pg-login" style="padding:0;">
    438. 

  438.       <div class="login-brand">
    439. 

  439.         <h1>医梦<span>AI</span></h1>
    440. 

  440.         <p>AI 驱动的智慧医疗绩效管理平台 — 让每一份付出都被看见</p>
    441. 

  441.         <div class="login-brand__stats">
    442. 

  442.           <div class="login-brand__stat"><b>1,280</b><span>活跃用户</span></div>
    443. 

  443.           <div class="login-brand__stat"><b>98.6%</b><span>评分完成率</span></div>
    444. 

  444.           <div class="login-brand__stat"><b>42</b><span>医院科室</span></div>
    445. 

  445.         </div>
    446. 

  446.       </div>
    447. 

  447.       <div class="login-form">
    448. 

  448.         <h2>欢迎回来</h2>
    449. 

  449.         <p class="sub">登录你的 OKR 绩效账户</p>
    450. 

  450.         <div class="fld"><label>邮箱 / 工号</label><input type="text" placeholder="liming@emoon-med.com" value="liming@emoon-med.com"></div>
    451. 

  451.         <div class="fld"><label>密码</label><input type="password" placeholder="······" value="123456"></div>
    452. 

  452.         <button class="btn btn-primary" style="width:100%;justify-content:center;margin-top:var(--gap-sm);" onclick="navTo('workspace')">登录</button>
    453. 

  453.         <p style="text-align:center;margin-top:var(--gap-md);font-size:var(--fs-sm);color:var(--muted);">演示模式 — 点击登录查看完整原型</p>
    454. 

  454.       </div>
    455. 

  455.     </div>
    456. 

  456. 

  457.     <!-- ── WORKSPACE ───────────────────────────────────────────── -->
    458. 

  458.     <div class="page-panel" id="pg-workspace">
    459. 

  459.       <div class="s-head"><div class="s-head__left"><h2>工作台</h2><p>下午好，李明医生 — 2025 Q4 考核周期还有 18 天结束</p></div><button class="btn btn-outline btn-sm">📅 切换周期</button></div>
    460. 

  460. 

  461.       <div class="grid-4 mb-md">
    462. 

  462.         <div class="stat-card"><div class="stat-card__top stat-card__top--accent"></div><div class="stat-card__num">8</div><div class="stat-card__label">我的 OKR 目标</div><div class="text-xs text-muted mt-xs">4 个进行中 · 3 个已完成</div></div>
    463. 

  463.         <div class="stat-card"><div class="stat-card__top stat-card__top--indigo"></div><div class="stat-card__num">76%</div><div class="stat-card__label">总体完成进度</div><div class="text-xs text-muted mt-xs">较上月 +5%</div></div>
    464. 

  464.         <div class="stat-card"><div class="stat-card__top stat-card__top--orange"></div><div class="stat-card__num">86</div><div class="stat-card__label">当前绩效评分</div><div class="text-xs text-muted mt-xs">评级 A · 待上级确认</div></div>
    465. 

  465.         <div class="stat-card"><div class="stat-card__top stat-card__top--red"></div><div class="stat-card__num">2</div><div class="stat-card__label">待处理预警</div><div class="text-xs text-danger mt-xs">1 项超时 · 1 项评分异常</div></div>
    466. 

  466.       </div>
    467. 

  467. 

  468.       <div class="grid-2 mb-md">
    469. 

  469.         <div class="card card--lg" style="background:var(--dark);color:var(--on-dark);">
    470. 

  470.           <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;"><span class="tag tag-accent">AI 洞察</span><span style="font-size:var(--fs-xs);color:rgba(255,255,255,0.5);">基于历史数据生成</span></div>
    471. 

  471.           <p style="font-size:var(--fs-body);opacity:0.9;line-height:1.6;">当前周期你的「患者满意度」KR 滞后同期 14%，建议本周增加门诊随访频次至每日 ≥ 5 例。<b style="color:var(--accent);">转化率 18%</b> 超出预期 3 个百分点，继续保持。</p>
    472. 

  472.           <div class="flex-between mt-md">
    473. 

  473.             <span class="tag tag-warn">⚠ 延迟 14%</span><button class="btn btn-sm" style="background:rgba(255,255,255,0.15);color:#fff;">查看详情 →</button>
    474. 

  474.           </div>
    475. 

  475.         </div>
    476. 

  476.         <div class="card" style="display:flex;flex-direction:column;">
    477. 

  477.           <div class="flex-between mb-sm"><strong style="font-size:var(--fs-body);">待办事项</strong><span class="tag tag-accent">3 项</span></div>
    478. 

  478.           <div style="font-size:var(--fs-sm);color:var(--fg-2);padding:8px 0;border-bottom:1px solid var(--border-light);">📌 完成 Q4 自评报告 <span class="tag tag-warn" style="float:right;">明天截止</span></div>
    479. 

  479.           <div style="font-size:var(--fs-sm);color:var(--fg-2);padding:8px 0;border-bottom:1px solid var(--border-light);">📌 审核张护士的 OKR 对齐申请 <span class="tag tag-muted" style="float:right;">3天后</span></div>
    480. 

  480.           <div style="font-size:var(--fs-sm);color:var(--fg-2);padding:8px 0;">📌 提交科室设备采购绩效指标 <span style="float:right;color:var(--red-text);font-size:var(--fs-xs);">⏰ 已超时 2 天</span></div>
    481. 

  481.         </div>
    482. 

  482.       </div>
    483. 

  483. 

  484.       <div class="card mb-md">
    485. 

  485.         <div class="flex-between mb-sm"><strong style="font-size:var(--fs-body);">团队绩效概览</strong><span class="text-sm text-muted">神经内科 · 12 人</span></div>
    486. 

  486.         <table class="tbl"><thead><tr><th>成员</th><th>OKR 进度</th><th>评分</th><th>状态</th><th>预警</th></tr></thead><tbody>
    487. 

  487.           <tr><td><span class="tbl__link">李明</span></td><td><div class="m-bar"><div class="m-bar__prog"><div class="prog"><div class="prog__fill prog__fill--accent" style="width:76%"></div></div></div><span class="mono text-sm">76%</span></div></td><td class="mono">86</td><td><span class="tag tag-success">正常</span></td><td>—</td></tr>
    488. 

  488.           <tr><td><span class="tbl__link">张伟</span></td><td><div class="m-bar"><div class="m-bar__prog"><div class="prog"><div class="prog__fill prog__fill--indigo" style="width:92%"></div></div></div><span class="mono text-sm">92%</span></div></td><td class="mono">93</td><td><span class="tag tag-success">正常</span></td><td>—</td></tr>
    489. 

  489.           <tr><td><span class="tbl__link">王芳</span></td><td><div class="m-bar"><div class="m-bar__prog"><div class="prog"><div class="prog__fill prog__fill--orange" style="width:45%"></div></div></div><span class="mono text-sm">45%</span></div></td><td class="mono">62</td><td><span class="tag tag-warn">延迟</span></td><td><span class="tag tag-warn">超时</span></td></tr>
    490. 

  490.           <tr><td><span class="tbl__link">赵丽</span></td><td><div class="m-bar"><div class="m-bar__prog"><div class="prog"><div class="prog__fill prog__fill--red" style="width:28%"></div></div></div><span class="mono text-sm">28%</span></div></td><td class="mono">—</td><td><span class="tag tag-danger">严重</span></td><td><span class="tag tag-danger">落后</span></td></tr>
    491. 

  491.         </tbody></table>
    492. 

  492.       </div>
    493. 

  493.     </div>
    494. 

  494. 

  495.     <!-- ── MY OKR ──────────────────────────────────────────────── -->
    496. 

  496.     <div class="page-panel" id="pg-my-okr">
    497. 

  497.       <div class="s-head"><div class="s-head__left"><h2>我的 OKR</h2><p>2025 Q4 · 神经内科主治医师</p></div><div class="flex-wrap"><button class="btn btn-outline btn-sm">📥 导入</button><button class="btn btn-primary btn-sm">+ 新建 KR</button></div></div>
    498. 

  498. 

  499.       <div class="card mb-md" style="border-left:4px solid var(--dark);">
    500. 

  500.         <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><span class="tag tag-indigo">O1</span><span style="font-weight:700;font-size:var(--fs-h3);color:var(--fg);">提升门诊诊疗效率与患者满意度</span><span class="tag tag-accent">权重 40%</span></div>
    501. 

  501.         <p style="font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--gap-md);">通过 AI 辅助问诊和流程优化，将平均就诊等待时间从 18 分钟降至 10 分钟以内，患者满意度评分达到 4.5/5。</p>
    502. 

  502.         <div style="display:flex;flex-direction:column;gap:10px;">
    503. 

  503.           <div class="card card--flat" style="border-left:4px solid var(--accent);">
    504. 

  504.             <div class="flex-between"><div><span class="tag tag-accent">KR1.1</span> <strong>AI 预问诊覆盖率 ≥ 60%</strong><span class="mono text-sm" style="margin-left:8px;">当前 52%</span></div><span class="tag tag-success">进行中</span></div>
    505. 

  505.             <div class="prog mt-sm"><div class="prog__fill prog__fill--accent" style="width:52%"></div></div>
    506. 

  506.           </div>
    507. 

  507.           <div class="card card--flat" style="border-left:4px solid var(--dark);">
    508. 

  508.             <div class="flex-between"><div><span class="tag tag-indigo">KR1.2</span> <strong>平均候诊时间 ≤ 10 分钟</strong><span class="mono text-sm" style="margin-left:8px;">当前 14 分钟</span></div><span class="tag tag-success">进行中</span></div>
    509. 

  509.             <div class="prog mt-sm"><div class="prog__fill prog__fill--indigo" style="width:60%"></div></div>
    510. 

  510.           </div>
    511. 

  511.           <div class="card card--flat" style="border-left:4px solid var(--dark);">
    512. 

  512.             <div class="flex-between"><div><span class="tag tag-indigo">KR1.3</span> <strong>患者满意度 ≥ 4.5/5</strong><span class="mono text-sm" style="margin-left:8px;">当前 4.2</span></div><span class="tag tag-success">进行中</span></div>
    513. 

  513.             <div class="prog mt-sm"><div class="prog__fill prog__fill--indigo" style="width:70%"></div></div>
    514. 

  514.           </div>
    515. 

  515.           <div class="card card--flat" style="border-left:4px solid var(--red);">
    516. 

  516.             <div class="flex-between"><div><span class="tag tag-danger">KR1.4</span> <strong>门诊电子病历完整率 ≥ 95%</strong><span class="mono text-sm text-danger" style="margin-left:8px;">当前 33%</span></div><span class="tag tag-warn">延迟</span></div>
    517. 

  517.             <div class="prog mt-sm"><div class="prog__fill prog__fill--red" style="width:33%"></div></div>
    518. 

  518.           </div>
    519. 

  519.         </div>
    520. 

  520.       </div>
    521. 

  521. 

  522.       <div class="card mb-md" style="border-left:4px solid var(--accent);">
    523. 

  523.         <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><span class="tag tag-indigo">O2</span><span style="font-weight:700;font-size:var(--fs-h3);color:var(--fg);">推动科室 AI 质控体系建设</span><span class="tag tag-accent">权重 30%</span></div>
    524. 

  524.         <p style="font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--gap-md);">建立基于 AI 的病历质控闭环，实现病历缺陷自动检测与实时提醒。</p>
    525. 

  525.         <div style="display:flex;flex-direction:column;gap:10px;">
    526. 

  526.           <div class="card card--flat" style="border-left:4px solid var(--accent);"><div class="flex-between"><div><span class="tag tag-accent">KR2.1</span> <strong>病历 AI 质控覆盖 100% 出院病历</strong></div><span class="tag tag-success">已完成</span></div><div class="prog mt-sm"><div class="prog__fill prog__fill--green" style="width:100%"></div></div></div>
    527. 

  527.           <div class="card card--flat" style="border-left:4px solid var(--accent);"><div class="flex-between"><div><span class="tag tag-accent">KR2.2</span> <strong>病历缺陷率降至 5% 以下</strong></div><span class="tag tag-success">已完成</span></div><div class="prog mt-sm"><div class="prog__fill prog__fill--green" style="width:100%"></div></div></div>
    528. 

  528.         </div>
    529. 

  529.       </div>
    530. 

  530. 

  531.       <div class="card">
    532. 

  532.         <strong style="font-size:var(--fs-body);">承接上级目标</strong>
    533. 

  533.         <table class="tbl mt-sm"><thead><tr><th>上级目标</th><th>负责人</th><th>对齐关系</th><th>进度</th></tr></thead><tbody>
    534. 

  534.           <tr><td>神经内科综合服务能力提升 20%</td><td>王主任</td><td>→ O1 提升门诊诊疗效率</td><td><div class="prog" style="width:120px;"><div class="prog__fill prog__fill--accent" style="width:65%"></div></div></td></tr>
    535. 

  535.           <tr><td>全院 AI 质控平台上线</td><td>陈院长</td><td>→ O2 科室 AI 质控体系</td><td><div class="prog" style="width:120px;"><div class="prog__fill prog__fill--green" style="width:100%"></div></div></td></tr>
    536. 

  536.         </tbody></table>
    537. 

  537.       </div>
    538. 

  538.     </div>
    539. 

  539. 

  540.     <!-- ── TEAM OKR ────────────────────────────────────────────── -->
    541. 

  541.     <div class="page-panel" id="pg-team-okr">
    542. 

  542.       <div class="s-head"><div class="s-head__left"><h2>团队 OKR</h2><p>神经内科 · 12 名成员 · 2025 Q4</p></div><div class="flex-wrap"><button class="btn btn-outline btn-sm">📥 导出</button><button class="btn btn-primary btn-sm">+ 新建团队目标</button></div></div>
    543. 

  543. 

  544.       <div class="card mb-md" style="border-left:4px solid var(--dark);">
    545. 

  545.         <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><span class="tag tag-indigo">部门 O</span><span style="font-weight:700;font-size:var(--fs-h3);">神经内科综合服务能力提升 20%</span><span class="tag tag-accent">权重 50%</span></div>
    546. 

  546.         <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:var(--gap-md);">
    547. 

  547.           <div class="card card--flat" style="border-left:4px solid var(--accent);"><div class="flex-between"><span><span class="tag tag-accent">KR-A</span> 门诊量同比 +15%</span><span class="mono text-sm">82%</span></div><div class="prog mt-xs"><div class="prog__fill prog__fill--accent" style="width:82%"></div></div></div>
    548. 

  548.           <div class="card card--flat" style="border-left:4px solid var(--accent);"><div class="flex-between"><span><span class="tag tag-accent">KR-B</span> 患者满意度 ≥ 4.3</span><span class="mono text-sm">70%</span></div><div class="prog mt-xs"><div class="prog__fill prog__fill--indigo" style="width:70%"></div></div></div>
    549. 

  549.         </div>
    550. 

  550.       </div>
    551. 

  551. 

  552.       <div class="flex-between mb-md"><strong style="font-size:var(--fs-body);">成员 OKR 概览</strong><span class="text-sm text-muted">按进度排序</span></div>
    553. 

  553.       <div class="grid-2">
    554. 

  554.         <div class="card"><div class="flex-between mb-sm"><span class="tbl__link">张伟 · 副主任医师</span><span class="tag tag-success">92%</span></div><div class="prog mb-xs"><div class="prog__fill prog__fill--green" style="width:92%"></div></div><span class="text-xs text-muted">4 KR · 3 完成 · 1 进行中</span></div>
    555. 

  555.         <div class="card"><div class="flex-between mb-sm"><span class="tbl__link">刘洋 · 主治医师</span><span class="tag tag-accent">84%</span></div><div class="prog mb-xs"><div class="prog__fill prog__fill--accent" style="width:84%"></div></div><span class="text-xs text-muted">5 KR · 3 完成 · 2 进行中</span></div>
    556. 

  556.         <div class="card"><div class="flex-between mb-sm"><span class="tbl__link">李明 · 主治医师</span><span class="tag tag-accent">76%</span></div><div class="prog mb-xs"><div class="prog__fill prog__fill--accent" style="width:76%"></div></div><span class="text-xs text-muted">6 KR · 2 完成 · 3 进行中 · 1 延迟</span></div>
    557. 

  557.         <div class="card"><div class="flex-between mb-sm"><span class="tbl__link">王芳 · 住院医师</span><span class="tag tag-warn">45%</span></div><div class="prog mb-xs"><div class="prog__fill prog__fill--orange" style="width:45%"></div></div><span class="text-xs text-danger">3 KR · 0 完成 · 2 进行中 · 1 超时</span></div>
    558. 

  558.         <div class="card"><div class="flex-between mb-sm"><span class="tbl__link">赵丽 · 住院医师</span><span class="tag tag-danger">28%</span></div><div class="prog mb-xs"><div class="prog__fill prog__fill--red" style="width:28%"></div></div><span class="text-xs text-danger">2 KR · 0 完成 · 1 进行中 · 1 严重落后</span></div>
    559. 

  559.         <div class="card"><div class="flex-between mb-sm"><span class="tbl__link">陈静 · 护士长</span><span class="tag tag-success">95%</span></div><div class="prog mb-xs"><div class="prog__fill prog__fill--green" style="width:95%"></div></div><span class="text-xs text-muted">3 KR · 3 完成</span></div>
    560. 

  560.       </div>
    561. 

  561.     </div>
    562. 

  562. 

  563.     <!-- ── OKR ALIGNMENT ───────────────────────────────────────── -->
    564. 

  564.     <div class="page-panel" id="pg-okr-align">
    565. 

  565.       <div class="s-head"><div class="s-head__left"><h2>OKR 对齐</h2><p>可视化目标层级关系 · 检测未对齐节点</p></div><button class="btn btn-outline btn-sm">🔍 检测未对齐</button></div>
    566. 

  566. 

  567.       <div class="card mb-md" style="overflow-x:auto;padding:var(--gap-lg);">
    568. 

  568.         <div class="align-tree">
    569. 

  569.           <div class="align-node align-node--root">🏥 全院 AI 质控平台上线<br><span class="text-xs" style="color:var(--muted);">陈院长 · 权重 40%</span></div>
    570. 

  570.           <div class="align-connector"></div>
    571. 

  571.           <div class="align-row">
    572. 

  572.             <div class="align-col"><div class="align-connector"></div><div class="align-node">神经内科综合服务能力<br><span class="text-xs text-muted">王主任</span></div><div class="align-connector"></div><div class="align-node" style="border-color:var(--accent);">提升门诊诊疗效率<br><span class="text-xs text-muted">李明</span></div></div>
    573. 

  573.             <div class="align-col"><div class="align-connector"></div><div class="align-node">心内科质控达标<br><span class="text-xs text-muted">赵主任</span></div></div>
    574. 

  574.             <div class="align-col"><div class="align-connector"></div><div class="align-node align-node--warn">⚠ 骨科科室 OKR<br><span class="text-xs" style="color:var(--orange-text);">未对齐全院目标</span></div></div>
    575. 

  575.           </div>
    576. 

  576.         </div>
    577. 

  577.       </div>
    578. 

  578. 

  579.       <div class="card">
    580. 

  580.         <div class="flex-between mb-sm"><strong style="font-size:var(--fs-body);">对齐异常</strong><span class="tag tag-danger">2 项</span></div>
    581. 

  581.         <table class="tbl"><thead><tr><th>部门/个人</th><th>问题</th><th>影响</th><th>建议</th><th>操作</th></tr></thead><tbody>
    582. 

  582.           <tr><td>骨科</td><td><span class="tag tag-danger">未对齐</span></td><td>科室 OKR 与全院目标无连接</td><td class="text-sm">建议关联「全院质控平台」目标</td><td><button class="btn btn-outline btn-sm">发起对齐</button></td></tr>
    583. 

  583.           <tr><td>赵丽</td><td><span class="tag tag-warn">未对齐</span></td><td>个人 OKR 未承接上级目标</td><td class="text-sm">建议对齐王主任「综合服务能力」KR</td><td><button class="btn btn-outline btn-sm">发起对齐</button></td></tr>
    584. 

  584.         </tbody></table>
    585. 

  585.       </div>
    586. 

  586.     </div>
    587. 

  587. 

  588.     <!-- ── OKR EXECUTION ───────────────────────────────────────── -->
    589. 

  589.     <div class="page-panel" id="pg-okr-exec">
    590. 

  590.       <div class="s-head"><div class="s-head__left"><h2>执行进度</h2><p>Q4 关键结果时间线 · 10 月 — 12 月</p></div><button class="btn btn-outline btn-sm">📥 导出报告</button></div>
    591. 

  591. 

  592.       <div class="card mb-md">
    593. 

  593.         <div class="gantt">
    594. 

  594.           <div class="gantt__row"><div class="gantt__label">AI 预问诊覆盖</div><div class="gantt__track"><div class="gantt__bar gantt__bar--accent" style="left:0;width:58%;">52%</div></div></div>
    595. 

  595.           <div class="gantt__row"><div class="gantt__label">候诊时间优化</div><div class="gantt__track"><div class="gantt__bar gantt__bar--accent" style="left:0;width:66%;">60%</div></div></div>
    596. 

  596.           <div class="gantt__row"><div class="gantt__label">患者满意度</div><div class="gantt__track"><div class="gantt__bar gantt__bar--indigo" style="left:0;width:72%;">70%</div></div></div>
    597. 

  597.           <div class="gantt__row"><div class="gantt__label">病历完整率</div><div class="gantt__track"><div class="gantt__bar gantt__bar--red" style="left:0;width:33%;">33%</div><div class="gantt__marker" style="left:66%;"></div></div></div>
    598. 

  598.         </div>
    599. 

  599.         <div class="text-xs text-muted mt-sm">红色标记 = 预期进度线（当前应达 66%）· 滑块位置 = 实际进度</div>
    600. 

  600.       </div>
    601. 

  601. 

  602.       <div class="grid-2 mb-md">
    603. 

  603.         <div class="card"><strong style="font-size:var(--fs-body);">里程碑</strong>
    604. 

  604.           <div class="tl mt-sm">
    605. 

  605.             <div class="tl__item"><div class="tl__dot tl__dot--done"></div><div class="tl__title">Q4 目标制定</div><div class="tl__desc">2025-10-01 · 已完成</div></div>
    606. 

  606.             <div class="tl__item"><div class="tl__dot tl__dot--done"></div><div class="tl__title">中期回顾</div><div class="tl__desc">2025-11-15 · 已完成</div></div>
    607. 

  607.             <div class="tl__item"><div class="tl__dot tl__dot--active"></div><div class="tl__title">自评提交截止</div><div class="tl__desc">2025-12-20 · 进行中</div></div>
    608. 

  608.             <div class="tl__item"><div class="tl__dot"></div><div class="tl__title">上级评审</div><div class="tl__desc">2025-12-31 · 待开始</div></div>
    609. 

  609.           </div>
    610. 

  610.         </div>
    611. 

  611.         <div class="card"><strong style="font-size:var(--fs-body);">风险预警</strong>
    612. 

  612.           <div style="padding:10px 0;border-bottom:1px solid var(--border-light);"><span class="tag tag-danger mb-sm">🔴 严重</span><p class="text-sm mt-xs">赵丽 — 2 项 KR 均严重落后，无提交记录</p></div>
    613. 

  613.           <div style="padding:10px 0;border-bottom:1px solid var(--border-light);"><span class="tag tag-warn mb-sm">🟠 超时</span><p class="text-sm mt-xs">王芳 — 「病历规范率」KR 超时未更新</p></div>
    614. 

  614.           <div style="padding:10px 0;"><span class="tag tag-muted mb-sm">🟡 待处理</span><p class="text-sm mt-xs">3 名成员尚未提交中期自评</p></div>
    615. 

  615.         </div>
    616. 

  616.       </div>
    617. 

  617.     </div>
    618. 

  618. 

  619.     <!-- ── MY RESULT ───────────────────────────────────────────── -->
    620. 

  620.     <div class="page-panel" id="pg-my-result">
    621. 

  621.       <div class="s-head"><div class="s-head__left"><h2>我的绩效</h2><p>2025 Q4 · 李明 · 神经内科主治医师</p></div><button class="btn btn-outline btn-sm">📄 查看详情</button></div>
    622. 

  622. 

  623.       <div class="grid-3 mb-md">
    624. 

  624.         <div class="stat-card" style="text-align:center;"><div class="stat-card__num text-accent" style="font-size:64px;">86</div><div class="stat-card__label">综合得分</div><span class="tag tag-success mt-xs">A 级</span></div>
    625. 

  625.         <div class="card" style="display:flex;flex-direction:column;justify-content:center;">
    626. 

  626.           <div class="m-bar mb-sm"><span class="m-bar__label">OKR 达成</span><span class="m-bar__val mono">85</span><div class="m-bar__prog"><div class="prog"><div class="prog__fill prog__fill--accent" style="width:85%"></div></div></div></div>
    627. 

  627.           <div class="m-bar mb-sm"><span class="m-bar__label">KPI 指标</span><span class="m-bar__val mono">82</span><div class="m-bar__prog"><div class="prog"><div class="prog__fill prog__fill--indigo" style="width:82%"></div></div></div></div>
    628. 

  628.           <div class="m-bar mb-sm"><span class="m-bar__label">能力评估</span><span class="m-bar__val mono">90</span><div class="m-bar__prog"><div class="prog"><div class="prog__fill prog__fill--green" style="width:90%"></div></div></div></div>
    629. 

  629.           <div class="m-bar"><span class="m-bar__label">价值观</span><span class="m-bar__val mono">88</span><div class="m-bar__prog"><div class="prog"><div class="prog__fill prog__fill--accent" style="width:88%"></div></div></div></div>
    630. 

  630.         </div>
    631. 

  631.         <div class="card" style="display:flex;flex-direction:column;justify-content:center;">
    632. 

  632.           <div class="flex-between mb-sm"><span class="text-sm">自评分</span><span class="mono" style="font-size:24px;font-weight:700;color:var(--dark);">88</span></div>
    633. 

  633.           <div class="flex-between mb-sm"><span class="text-sm">上级终审</span><span class="mono" style="font-size:24px;font-weight:700;color:var(--accent);">86</span></div>
    634. 

  634.           <div class="flex-between mb-sm"><span class="text-sm">差距</span><span class="mono" style="font-size:24px;font-weight:700;color:var(--red-text);">-2</span></div>
    635. 

  635.           <div class="text-xs text-muted mt-sm">上级评语：整体表现优秀，AI 质控项目成果显著。建议下季度将门诊随访纳入 OKR。</div>
    636. 

  636.         </div>
    637. 

  637.       </div>
    638. 

  638. 

  639.       <div class="card">
    640. 

  640.         <strong style="font-size:var(--fs-body);">扣分明细</strong>
    641. 

  641.         <table class="tbl mt-sm"><thead><tr><th>KR</th><th>目标值</th><th>实际值</th><th>得分率</th><th>扣分</th><th>说明</th></tr></thead><tbody>
    642. 

  642.           <tr><td>KR1.4 病历完整率</td><td class="mono">≥ 95%</td><td class="mono text-danger">33%</td><td><div class="prog" style="width:80px;"><div class="prog__fill prog__fill--red" style="width:34%"></div></div></td><td class="mono text-danger">-2</td><td class="text-sm">未达预期目标</td></tr>
    643. 

  643.           <tr><td>KR1.2 候诊时间</td><td class="mono">≤ 10min</td><td class="mono">14min</td><td><div class="prog" style="width:80px;"><div class="prog__fill prog__fill--orange" style="width:60%"></div></div></td><td class="mono" style="color:var(--orange-text);">-1</td><td class="text-sm">部分达成</td></tr>
    644. 

  644.         </tbody></table>
    645. 

  645.       </div>
    646. 

  646.     </div>
    647. 

  647. 

  648.     <!-- ── SCORE HISTORY ───────────────────────────────────────── -->
    649. 

  649.     <div class="page-panel" id="pg-score-history">
    650. 

  650.       <div class="s-head"><div class="s-head__left"><h2>历史绩效</h2><p>李明 · 近 4 个季度趋势</p></div><button class="btn btn-outline btn-sm">📥 导出</button></div>
    651. 

  651. 

  652.       <div class="card mb-md" style="padding:var(--gap-lg);">
    653. 

  653.         <div style="display:flex;align-items:flex-end;gap:40px;height:200px;padding:0 20px;">
    654. 

  654.           <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;">
    655. 

  655.             <span class="mono" style="font-weight:700;color:var(--fg);">79</span>
    656. 

  656.             <div style="width:48px;background:rgba(43,31,153,0.25);border-radius:4px 4px 0 0;height:110px;"></div>
    657. 

  657.             <span class="text-xs text-muted">2025 Q1</span><span class="tag tag-muted">B+</span>
    658. 

  658.           </div>
    659. 

  659.           <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;">
    660. 

  660.             <span class="mono" style="font-weight:700;color:var(--fg);">82</span>
    661. 

  661.             <div style="width:48px;background:rgba(43,31,153,0.45);border-radius:4px 4px 0 0;height:125px;"></div>
    662. 

  662.             <span class="text-xs text-muted">2025 Q2</span><span class="tag tag-muted">A-</span>
    663. 

  663.           </div>
    664. 

  664.           <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;">
    665. 

  665.             <span class="mono" style="font-weight:700;color:var(--fg);">84</span>
    666. 

  666.             <div style="width:48px;background:rgba(43,31,153,0.65);border-radius:4px 4px 0 0;height:140px;"></div>
    667. 

  667.             <span class="text-xs text-muted">2025 Q3</span><span class="tag tag-muted">A-</span>
    668. 

  668.           </div>
    669. 

  669.           <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;">
    670. 

  670.             <span class="mono" style="font-weight:700;color:var(--accent);">86</span>
    671. 

  671.             <div style="width:48px;background:var(--accent);border-radius:4px 4px 0 0;height:155px;box-shadow:0 0 12px var(--accent-glow);"></div>
    672. 

  672.             <span class="text-xs text-muted">2025 Q4</span><span class="tag tag-success">A</span>
    673. 

  673.           </div>
    674. 

  674.         </div>
    675. 

  675.       </div>
    676. 

  676. 

  677.       <div class="card">
    678. 

  678.         <strong style="font-size:var(--fs-body);">周期对比</strong>
    679. 

  679.         <table class="tbl mt-sm"><thead><tr><th>周期</th><th>OKR</th><th>KPI</th><th>能力</th><th>总分</th><th>评级</th><th>排名</th></tr></thead><tbody>
    680. 

  680.           <tr><td class="tbl__link">2025 Q4</td><td class="mono">85</td><td class="mono">82</td><td class="mono">90</td><td class="mono" style="color:var(--accent);font-weight:700;">86</td><td><span class="tag tag-success">A</span></td><td>3/12</td></tr>
    681. 

  681.           <tr><td class="tbl__link">2025 Q3</td><td class="mono">82</td><td class="mono">80</td><td class="mono">88</td><td class="mono">84</td><td><span class="tag tag-muted">A-</span></td><td>5/12</td></tr>
    682. 

  682.           <tr><td class="tbl__link">2025 Q2</td><td class="mono">80</td><td class="mono">78</td><td class="mono">86</td><td class="mono">82</td><td><span class="tag tag-muted">A-</span></td><td>6/12</td></tr>
    683. 

  683.           <tr><td class="tbl__link">2025 Q1</td><td class="mono">78</td><td class="mono">75</td><td class="mono">84</td><td class="mono">79</td><td><span class="tag tag-muted">B+</span></td><td>8/12</td></tr>
    684. 

  684.         </tbody></table>
    685. 

  685.       </div>
    686. 

  686.     </div>
    687. 

  687. 

  688.     <!-- ── SCORING LIST ────────────────────────────────────────── -->
    689. 

  689.     <div class="page-panel" id="pg-scoring-list">
    690. 

  690.       <div class="s-head"><div class="s-head__left"><h2>绩效打分</h2><p>待评分人员 · 神经内科 · 2025 Q4</p></div><div class="flex-wrap"><button class="btn btn-outline btn-sm">📥 导出</button><button class="btn btn-primary btn-sm">批量评分</button></div></div>
    691. 

  691. 

  692.       <div class="card">
    693. 

  693.         <div class="flex-between mb-sm"><div class="flex-wrap"><button class="btn btn-sm" style="background:var(--accent-soft);color:var(--accent-hover);border-radius:var(--radius-pill);">全部 (12)</button><button class="btn btn-ghost btn-sm">待评分 (4)</button><button class="btn btn-ghost btn-sm">已完成 (6)</button><button class="btn btn-ghost btn-sm">申诉中 (2)</button></div><span class="text-sm text-muted">已评 6/12</span></div>
    694. 

  694.         <table class="tbl"><thead><tr><th>成员</th><th>OKR 进度</th><th>自评分</th><th>状态</th><th>操作</th></tr></thead><tbody>
    695. 

  695.           <tr><td><span class="tbl__link">张伟</span></td><td><div class="prog" style="width:120px;"><div class="prog__fill prog__fill--green" style="width:92%"></div></div><span class="text-sm" style="margin-left:8px;">92%</span></td><td class="mono">91</td><td><span class="tag tag-warn">待评分</span></td><td><button class="btn btn-primary btn-sm">去评分</button></td></tr>
    696. 

  696.           <tr><td><span class="tbl__link">刘洋</span></td><td><div class="prog" style="width:120px;"><div class="prog__fill prog__fill--accent" style="width:84%"></div></div><span class="text-sm" style="margin-left:8px;">84%</span></td><td class="mono">85</td><td><span class="tag tag-warn">待评分</span></td><td><button class="btn btn-primary btn-sm">去评分</button></td></tr>
    697. 

  697.           <tr><td><span class="tbl__link">王芳</span></td><td><div class="prog" style="width:120px;"><div class="prog__fill prog__fill--orange" style="width:45%"></div></div><span class="text-sm" style="margin-left:8px;">45%</span></td><td class="mono">60</td><td><span class="tag tag-warn">待评分</span></td><td><button class="btn btn-primary btn-sm">去评分</button></td></tr>
    698. 

  698.           <tr><td><span class="tbl__link">赵丽</span></td><td><div class="prog" style="width:120px;"><div class="prog__fill prog__fill--red" style="width:28%"></div></div><span class="text-sm" style="margin-left:8px;">28%</span></td><td class="mono">55</td><td><span class="tag tag-warn">待评分</span></td><td><button class="btn btn-primary btn-sm">去评分</button></td></tr>
    699. 

  699.           <tr><td><span class="tbl__link">陈静</span></td><td><div class="prog" style="width:120px;"><div class="prog__fill prog__fill--green" style="width:95%"></div></div><span class="text-sm" style="margin-left:8px;">95%</span></td><td class="mono">94</td><td><span class="tag tag-success">已完成</span></td><td><button class="btn btn-outline btn-sm">查看</button></td></tr>
    700. 

  700.           <tr><td><span class="tbl__link">周涛</span></td><td><div class="prog" style="width:120px;"><div class="prog__fill prog__fill--green" style="width:88%"></div></div><span class="text-sm" style="margin-left:8px;">88%</span></td><td class="mono">87</td><td><span class="tag tag-danger">申诉中</span></td><td><button class="btn btn-outline btn-sm">处理</button></td></tr>
    701. 

  701.         </tbody></table>
    702. 

  702.       </div>
    703. 

  703.     </div>
    704. 

  704. 

  705.     <!-- ── SCORING DETAIL ──────────────────────────────────────── -->
    706. 

  706.     <div class="page-panel" id="pg-scoring-detail">
    707. 

  707.       <div class="s-head"><div class="s-head__left"><h2>绩效考评</h2><p>被评人：张伟 · 神经内科副主任医师</p></div><div class="flex-wrap"><button class="btn btn-outline btn-sm">💾 暂存</button><button class="btn btn-primary btn-sm">提交评审</button></div></div>
    708. 

  708. 

  709.       <div class="grid-2 mb-md">
    710. 

  710.         <div class="card"><strong style="font-size:var(--fs-body);">自评</strong><span class="text-xs text-muted" style="margin-left:8px;">张伟 提交于 12-15</span>
    711. 

  711.           <div style="margin-top:var(--gap-sm);display:flex;flex-direction:column;gap:12px;">
    712. 

  712.             <div><div class="flex-between text-sm"><span>OKR 达成</span><span class="mono">90</span></div><div class="prog mt-xs"><div class="prog__fill prog__fill--accent" style="width:90%"></div></div></div>
    713. 

  713.             <div><div class="flex-between text-sm"><span>KPI 指标</span><span class="mono">92</span></div><div class="prog mt-xs"><div class="prog__fill prog__fill--indigo" style="width:92%"></div></div></div>
    714. 

  714.             <div><div class="flex-between text-sm"><span>能力评估</span><span class="mono">88</span></div><div class="prog mt-xs"><div class="prog__fill prog__fill--green" style="width:88%"></div></div></div>
    715. 

  715.             <div style="background:var(--surface-alt);padding:10px;border-radius:var(--radius-sm);font-size:var(--fs-sm);">"本季度完成了神经介入手术质控标准制定，手术并发症率下降至 1.2%。"</div>
    716. 

  716.           </div>
    717. 

  717.         </div>
    718. 

  718.         <div class="card"><strong style="font-size:var(--fs-body);">上级评审</strong><span class="text-xs text-muted" style="margin-left:8px;">李明 · 当前评分人</span>
    719. 

  719.           <div style="margin-top:var(--gap-sm);display:flex;flex-direction:column;gap:12px;">
    720. 

  720.             <div><div class="flex-between text-sm"><span>OKR 达成</span><span class="mono" style="color:var(--accent);">88</span></div><input type="range" value="88" min="0" max="100" class="mt-xs"></div>
    721. 

  721.             <div><div class="flex-between text-sm"><span>KPI 指标</span><span class="mono" style="color:var(--accent);">90</span></div><input type="range" value="90" min="0" max="100" class="mt-xs"></div>
    722. 

  722.             <div><div class="flex-between text-sm"><span>能力评估</span><span class="mono" style="color:var(--accent);">92</span></div><input type="range" value="92" min="0" max="100" class="mt-xs"></div>
    723. 

  723.             <textarea placeholder="输入评语..." style="width:100%;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);resize:vertical;min-height:60px;">手术质控成果显著，建议将论文发表纳入下季度 OKR。</textarea>
    724. 

  724.           </div>
    725. 

  725.         </div>
    726. 

  726.       </div>
    727. 

  727.       <div class="card"><div class="flex-between"><strong style="font-size:var(--fs-body);">终审得分</strong><span class="mono" style="font-size:28px;font-weight:700;color:var(--accent);">90</span></div></div>
    728. 

  728.     </div>
    729. 

  729. 

  730.     <!-- ── APPEAL ──────────────────────────────────────────────── -->
    731. 

  731.     <div class="page-panel" id="pg-appeal">
    732. 

  732.       <div class="s-head"><div class="s-head__left"><h2>绩效申诉</h2><p>申诉工单管理 · 2025 Q4</p></div><button class="btn btn-primary btn-sm">+ 发起申诉</button></div>
    733. 

  733. 

  734.       <div class="card">
    735. 

  735.         <div class="flex-wrap mb-sm"><button class="btn btn-sm" style="background:var(--accent-soft);color:var(--accent-hover);border-radius:var(--radius-pill);">全部 (5)</button><button class="btn btn-ghost btn-sm">待处理 (2)</button><button class="btn btn-ghost btn-sm">处理中 (2)</button><button class="btn btn-ghost btn-sm">已解决 (1)</button></div>
    736. 

  736.         <table class="tbl"><thead><tr><th>申诉人</th><th>KR</th><th>原评分</th><th>申诉理由</th><th>状态</th><th>处理人</th><th>操作</th></tr></thead><tbody>
    737. 

  737.           <tr><td>周涛</td><td class="text-sm">KR2.1 手术质控标准</td><td class="mono">78</td><td class="text-sm">扣分依据不充分，手术并发症率已下降</td><td><span class="tag tag-warn">待处理</span></td><td>李明</td><td><button class="btn btn-primary btn-sm">处理</button></td></tr>
    738. 

  738.           <tr><td>王芳</td><td class="text-sm">KR1.2 病历规范率</td><td class="mono">60</td><td class="text-sm">系统统计口径有误，未计入12月补录</td><td><span class="tag tag-warn">待处理</span></td><td>李明</td><td><button class="btn btn-primary btn-sm">处理</button></td></tr>
    739. 

  739.           <tr><td>刘洋</td><td class="text-sm">KR3.1 门诊随访率</td><td class="mono">82</td><td class="text-sm">评分标准与Q3不一致</td><td><span class="tag tag-accent">处理中</span></td><td>王主任</td><td><span class="flow"><span class="flow__step flow__step--active">审核中</span></span></td></tr>
    740. 

  740.           <tr><td>陈静</td><td class="text-sm">KR1.3 护理满意度</td><td class="mono">85</td><td class="text-sm">参考数据有误</td><td><span class="tag tag-success">已解决</span></td><td>李明</td><td><button class="btn btn-outline btn-sm">查看</button></td></tr>
    741. 

  741.         </tbody></table>
    742. 

  742.       </div>
    743. 

  743.     </div>
    744. 

  744. 

  745.     <!-- ── FEEDBACK ────────────────────────────────────────────── -->
    746. 

  746.     <div class="page-panel" id="pg-feedback">
    747. 

  747.       <div class="s-head"><div class="s-head__left"><h2>绩效沟通</h2><p>与上级的反馈对话 · 2025 Q4</p></div><button class="btn btn-outline btn-sm">📅 预约面谈</button></div>
    748. 

  748. 

  749.       <div class="grid-2" style="grid-template-columns:2fr 1fr;">
    750. 

  750.         <div class="card">
    751. 

  751.           <div class="chat">
    752. 

  752.             <div class="chat__msg chat__msg--out">王主任好，我想约个时间讨论一下 Q4 绩效评分中 KR1.4 的扣分项。<div class="chat__meta">李明 · 12-18 14:30</div></div>
    753. 

  753.             <div class="chat__msg chat__msg--in">好的，明天下午 3 点方便吗？我看了你的申诉材料，病历完整率数据确实有讨论空间。<div class="chat__meta">王主任 · 12-18 15:10</div></div>
    754. 

  754.             <div class="chat__msg chat__msg--out">可以，明天下午 3 点。我会带上 12 月补录记录和系统日志。<div class="chat__meta">李明 · 12-18 15:22</div></div>
    755. 

  755.             <div class="chat__msg chat__msg--ai"><b>🤖 AI 辅助建议</b><br>检测到你在讨论「KR1.4 病历完整率」的评分争议。建议：<br>1. 准备 12 月 EHR 系统操作日志<br>2. 对照同期科室平均值（87%）作为参考<br>3. 引用评分规则 §3.2「数据核实流程」<div class="chat__meta">AI 助手 · 自动生成</div></div>
    756. 

  756.           </div>
    757. 

  757.           <div style="display:flex;gap:8px;margin-top:var(--gap-md);">
    758. 

  758.             <input type="text" placeholder="输入消息..." style="flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--fs-sm);">
    759. 

  759.             <button class="btn btn-primary btn-sm">发送</button>
    760. 

  760.           </div>
    761. 

  761.         </div>
    762. 

  762.         <div class="card">
    763. 

  763.           <strong style="font-size:var(--fs-body);">沟通历史</strong>
    764. 

  764.           <div class="mt-sm" style="display:flex;flex-direction:column;gap:10px;">
    765. 

  765.             <div style="padding:8px 0;border-bottom:1px solid var(--border-light);"><div class="text-sm" style="font-weight:600;">Q4 中期回顾面谈</div><div class="text-xs text-muted">2025-11-20 · 30 分钟 · 已完成</div></div>
    766. 

  766.             <div style="padding:8px 0;border-bottom:1px solid var(--border-light);"><div class="text-sm" style="font-weight:600;">Q3 绩效结果沟通</div><div class="text-xs text-muted">2025-09-28 · 45 分钟 · 已完成</div></div>
    767. 

  767.             <div style="padding:8px 0;"><div class="text-sm" style="font-weight:600;">Q2 目标对齐讨论</div><div class="text-xs text-muted">2025-06-15 · 20 分钟 · 已完成</div></div>
    768. 

  768.           </div>
    769. 

  769.         </div>
    770. 

  770.       </div>
    771. 

  771.     </div>
    772. 

  772. 

  773.     <!-- ── PERIODS ─────────────────────────────────────────────── -->
    774. 

  774.     <div class="page-panel" id="pg-periods">
    775. 

  775.       <div class="s-head"><div class="s-head__left"><h2>考核周期</h2><p>管理考核周期与阶段切换</p></div><button class="btn btn-primary btn-sm">+ 新建周期</button></div>
    776. 

  776. 

  777.       <div class="card mb-md">
    778. 

  778.         <div class="tl">
    779. 

  779.           <div class="tl__item">
    780. 

  780.             <div class="tl__dot tl__dot--done"></div>
    781. 

  781.             <div class="flex-between"><div><div class="tl__title">2025 Q3 · 季度考核</div><div class="tl__desc">2025-07-01 — 2025-09-30</div></div><span class="tag tag-success">已归档</span></div>
    782. 

  782.             <div class="flex-wrap mt-xs"><span class="tag tag-muted">制定</span><span class="tag tag-muted">执行</span><span class="tag tag-muted">评分</span><span class="tag tag-muted">归档</span></div>
    783. 

  783.           </div>
    784. 

  784.           <div class="tl__item">
    785. 

  785.             <div class="tl__dot tl__dot--active"></div>
    786. 

  786.             <div class="flex-between"><div><div class="tl__title">2025 Q4 · 季度考核</div><div class="tl__desc">2025-10-01 — 2025-12-31 · <span class="text-accent">当前周期</span></div></div><span class="tag tag-accent">评分阶段</span></div>
    787. 

  787.             <div class="flex-wrap mt-xs"><span class="tag tag-success">✅ 制定</span><span class="tag tag-success">✅ 执行</span><span class="tag tag-accent">● 评分</span><span class="tag tag-muted">归档</span></div>
    788. 

  788.           </div>
    789. 

  789.           <div class="tl__item">
    790. 

  790.             <div class="tl__dot"></div>
    791. 

  791.             <div class="flex-between"><div><div class="tl__title">2026 Q1 · 季度考核</div><div class="tl__desc">2026-01-01 — 2026-03-31</div></div><span class="tag tag-muted">待开始</span></div>
    792. 

  792.             <div class="flex-wrap mt-xs"><span class="tag tag-muted">制定</span><span class="tag tag-muted">执行</span><span class="tag tag-muted">评分</span><span class="tag tag-muted">归档</span></div>
    793. 

  793.           </div>
    794. 

  794.         </div>
    795. 

  795.       </div>
    796. 

  796.     </div>
    797. 

  797. 

  798.     <!-- ── TEMPLATES ───────────────────────────────────────────── -->
    799. 

  799.     <div class="page-panel" id="pg-templates">
    800. 

  800.       <div class="s-head"><div class="s-head__left"><h2>绩效模板</h2><p>管理考核模板与评分规则</p></div><button class="btn btn-primary btn-sm">+ 新建模板</button></div>
    801. 

  801. 

  802.       <div class="grid-2">
    803. 

  803.         <div class="card"><div class="flex-between mb-sm"><span style="font-weight:700;font-size:var(--fs-body);">标准医师 OKR 模板</span><span class="tag tag-accent">默认</span></div><p class="text-sm text-muted">OKR 权重 60% · KPI 权重 40% · 4 维度评分</p><div class="mt-sm"><span class="tag tag-muted">OKR达成</span><span class="tag tag-muted" style="margin-left:4px;">KPI指标</span><span class="tag tag-muted" style="margin-left:4px;">能力评估</span><span class="tag tag-muted" style="margin-left:4px;">价值观</span></div><div class="mt-sm text-xs text-muted">已关联 8 个科室 · 评分公式：加权平均</div></div>
    804. 

  804.         <div class="card"><div class="flex-between mb-sm"><span style="font-weight:700;font-size:var(--fs-body);">护理人员 KPI 模板</span><span class="tag tag-indigo">护理部</span></div><p class="text-sm text-muted">KPI 权重 80% · 能力评估 20% · 3 维度评分</p><div class="mt-sm"><span class="tag tag-muted">护理质量</span><span class="tag tag-muted" style="margin-left:4px;">操作规范</span><span class="tag tag-muted" style="margin-left:4px;">患者反馈</span></div><div class="mt-sm text-xs text-muted">已关联 12 个护理单元 · 评分公式：加权平均</div></div>
    805. 

  805.         <div class="card"><div class="flex-between mb-sm"><span style="font-weight:700;font-size:var(--fs-body);">行政人员 KPI 模板</span></div><p class="text-sm text-muted">KPI 权重 70% · 360° 评估 30%</p><div class="mt-sm"><span class="tag tag-muted">任务完成</span><span class="tag tag-muted" style="margin-left:4px;">协作评价</span><span class="tag tag-muted" style="margin-left:4px;">创新贡献</span></div><div class="mt-sm text-xs text-muted">已关联 5 个部门</div></div>
    806. 

  806.         <div class="card" style="border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;min-height:120px;cursor:pointer;"><span style="color:var(--muted);">+ 新建模板</span></div>
    807. 

  807.       </div>
    808. 

  808.     </div>
    809. 

  809. 

  810.     <!-- ── DIMENSIONS ──────────────────────────────────────────── -->
    811. 

  811.     <div class="page-panel" id="pg-dimensions">
    812. 

  812.       <div class="s-head"><div class="s-head__left"><h2>考核维度</h2><p>配置评分维度与权重</p></div><button class="btn btn-primary btn-sm">+ 新建维度</button></div>
    813. 

  813. 

  814.       <div class="grid-2">
    815. 

  815.         <div class="card">
    816. 

  816.           <strong style="font-size:var(--fs-body);">维度列表</strong>
    817. 

  817.           <div style="display:flex;flex-direction:column;gap:8px;margin-top:var(--gap-sm);">
    818. 

  818.             <div class="card card--flat" style="border-left:4px solid var(--accent);display:flex;align-items:center;justify-content:space-between;padding:12px 16px;"><span style="font-weight:600;">OKR 达成</span><span class="tag tag-accent">权重 40%</span></div>
    819. 

  819.             <div class="card card--flat" style="border-left:4px solid var(--dark);display:flex;align-items:center;justify-content:space-between;padding:12px 16px;"><span style="font-weight:600;">KPI 指标</span><span class="tag tag-indigo">权重 30%</span></div>
    820. 

  820.             <div class="card card--flat" style="border-left:4px solid var(--success);display:flex;align-items:center;justify-content:space-between;padding:12px 16px;"><span style="font-weight:600;">能力评估</span><span class="tag tag-success">权重 20%</span></div>
    821. 

  821.             <div class="card card--flat" style="border-left:4px solid var(--orange);display:flex;align-items:center;justify-content:space-between;padding:12px 16px;"><span style="font-weight:600;">价值观</span><span class="tag tag-warn">权重 10%</span></div>
    822. 

  822.           </div>
    823. 

  823.         </div>
    824. 

  824.         <div class="card" style="text-align:center;">
    825. 

  825.           <strong style="font-size:var(--fs-body);">权重分布</strong>
    826. 

  826.           <div style="margin:var(--gap-md) auto;width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--accent) 0% 40%, var(--dark) 40% 70%, var(--success) 70% 90%, var(--orange) 90% 100%);"></div>
    827. 

  827.           <div class="flex-wrap" style="justify-content:center;">
    828. 

  828.             <span style="display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);"><span style="width:10px;height:10px;border-radius:2px;background:var(--accent);display:inline-block;"></span> OKR 40%</span>
    829. 

  829.             <span style="display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);"><span style="width:10px;height:10px;border-radius:2px;background:var(--dark);display:inline-block;"></span> KPI 30%</span>
    830. 

  830.             <span style="display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);"><span style="width:10px;height:10px;border-radius:2px;background:var(--success);display:inline-block;"></span> 能力 20%</span>
    831. 

  831.             <span style="display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);"><span style="width:10px;height:10px;border-radius:2px;background:var(--orange);display:inline-block;"></span> 价值观 10%</span>
    832. 

  832.           </div>
    833. 

  833.         </div>
    834. 

  834.       </div>
    835. 

  835.     </div>
    836. 

  836. 

  837.     <!-- ── ORG ─────────────────────────────────────────────────── -->
    838. 

  838.     <div class="page-panel" id="pg-org">
    839. 

  839.       <div class="s-head"><div class="s-head__left"><h2>组织架构</h2><p>医院部门与人员结构</p></div><div class="flex-wrap"><input type="text" placeholder="搜索人员..." style="padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--fs-sm);width:200px;"></div></div>
    840. 

  840. 

  841.       <div class="grid-2" style="grid-template-columns:1fr 1fr;">
    842. 

  842.         <div class="card">
    843. 

  843.           <strong style="font-size:var(--fs-body);">部门树</strong>
    844. 

  844.           <ul class="tree mt-sm">
    845. 

  845.             <li><span class="tree__node">🏥 医梦总院</span>
    846. 

  846.               <ul class="tree">
    847. 

  847.                 <li><span class="tree__node">🧠 神经内科</span> <span class="text-xs text-muted">12 人</span>
    848. 

  848.                   <ul class="tree"><li><span class="tree__leaf">李明 · 主治医师</span></li><li><span class="tree__leaf">张伟 · 副主任医师</span></li><li><span class="tree__leaf">王芳 · 住院医师</span></li></ul>
    849. 

  849.                 </li>
    850. 

  850.                 <li><span class="tree__node">❤️ 心内科</span> <span class="text-xs text-muted">8 人</span></li>
    851. 

  851.                 <li><span class="tree__node">🦴 骨科</span> <span class="text-xs text-muted">6 人</span></li>
    852. 

  852.                 <li><span class="tree__node">💊 药剂科</span> <span class="text-xs text-muted">5 人</span></li>
    853. 

  853.               </ul>
    854. 

  854.             </li>
    855. 

  855.           </ul>
    856. 

  856.         </div>
    857. 

  857.         <div class="card">
    858. 

  858.           <strong style="font-size:var(--fs-body);">神经内科成员</strong>
    859. 

  859.           <div class="mt-sm" style="display:flex;flex-direction:column;gap:8px;">
    860. 

  860.             <div class="org-node"><div class="org-node__avatar" style="background:var(--dark);">王</div><div><div class="org-node__name">王建国</div><div class="org-node__role">主任医师 · 科室主任</div></div><span class="tag tag-indigo" style="margin-left:auto;">管理者</span></div>
    861. 

  861.             <div class="org-node"><div class="org-node__avatar" style="background:var(--accent);color:var(--dark);">李</div><div><div class="org-node__name">李明</div><div class="org-node__role">主治医师</div></div></div>
    862. 

  862.             <div class="org-node"><div class="org-node__avatar" style="background:var(--success);">张</div><div><div class="org-node__name">张伟</div><div class="org-node__role">副主任医师</div></div></div>
    863. 

  863.             <div class="org-node"><div class="org-node__avatar" style="background:var(--orange);">王</div><div><div class="org-node__name">王芳</div><div class="org-node__role">住院医师</div></div></div>
    864. 

  864.             <div class="org-node"><div class="org-node__avatar" style="background:var(--red);">赵</div><div><div class="org-node__name">赵丽</div><div class="org-node__role">住院医师</div></div></div>
    865. 

  865.           </div>
    866. 

  866.         </div>
    867. 

  867.       </div>
    868. 

  868.     </div>
    869. 

  869. 

  870.     <!-- ── NOTIFICATIONS ───────────────────────────────────────── -->
    871. 

  871.     <div class="page-panel" id="pg-notifications">
    872. 

  872.       <div class="s-head"><div class="s-head__left"><h2>消息通知</h2><p>系统通知 · 绩效提醒 · 审批请求</p></div><div class="flex-wrap"><button class="btn btn-outline btn-sm">全部标为已读</button></div></div>
    873. 

  873. 

  874.       <div class="card">
    875. 

  875.         <div class="flex-wrap mb-sm"><button class="btn btn-sm" style="background:var(--accent-soft);color:var(--accent-hover);border-radius:var(--radius-pill);">全部</button><button class="btn btn-ghost btn-sm">未读 (4)</button><button class="btn btn-ghost btn-sm">系统 (3)</button><button class="btn btn-ghost btn-sm">绩效 (5)</button></div>
    876. 

  876.         <div class="notif notif--unread"><div class="notif__dot"></div><div class="notif__body"><div class="notif__title">绩效评分结果已发布</div><div class="notif__desc">2025 Q4 绩效评分已完成，你的最终得分 86 分（A 级）。点击查看详情。</div></div><span class="notif__time">10 分钟前</span></div>
    877. 

  877.         <div class="notif notif--unread"><div class="notif__dot"></div><div class="notif__body"><div class="notif__title">王芳提交了申诉</div><div class="notif__desc">关于 KR1.2「病历规范率」评分，申诉理由：系统统计口径有误。</div></div><span class="notif__time">1 小时前</span></div>
    878. 

  878.         <div class="notif notif--unread"><div class="notif__dot"></div><div class="notif__body"><div class="notif__title">周期提醒：自评截止还有 2 天</div><div class="notif__desc">2025 Q4 自评提交截止日期为 12 月 20 日，请尽快完成。</div></div><span class="notif__time">3 小时前</span></div>
    879. 

  879.         <div class="notif"><div class="notif__body" style="margin-left:16px;"><div class="notif__title">系统升级通知</div><div class="notif__desc">OKR 系统将于 12 月 25 日凌晨 2:00-4:00 进行维护升级。</div></div><span class="notif__time">昨天</span></div>
    880. 

  880.         <div class="notif"><div class="notif__body" style="margin-left:16px;"><div class="notif__title">张伟提交了 OKR 对齐申请</div><div class="notif__desc">张伟请求将其「手术质控标准」KR 对齐到你的 O2 目标。</div></div><span class="notif__time">昨天</span></div>
    881. 

  881.         <div class="notif"><div class="notif__body" style="margin-left:16px;"><div class="notif__title">绩效沟通预约确认</div><div class="notif__desc">与王主任的面谈已确认：12 月 19 日下午 3:00。</div></div><span class="notif__time">2 天前</span></div>
    882. 

  882.       </div>
    883. 

  883.     </div>
    884. 

  884. 

  885.     <!-- ── LOGS ────────────────────────────────────────────────── -->
    886. 

  886.     <div class="page-panel" id="pg-logs">
    887. 

  887.       <div class="s-head"><div class="s-head__left"><h2>操作日志</h2><p>系统操作记录 · 最近 30 天</p></div><div class="flex-wrap"><button class="btn btn-outline btn-sm">📥 导出日志</button></div></div>
    888. 

  888. 

  889.       <div class="card">
    890. 

  890.         <div class="flex-between mb-sm"><div class="flex-wrap"><input type="date" style="padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);"> <span class="text-sm text-muted" style="align-self:center;">—</span> <input type="date" style="padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);"></div><div class="flex-wrap"><button class="btn btn-sm" style="background:var(--accent-soft);color:var(--accent-hover);border-radius:var(--radius-pill);">全部</button><button class="btn btn-ghost btn-sm">评分</button><button class="btn btn-ghost btn-sm">编辑</button><button class="btn btn-ghost btn-sm">登录</button></div></div>
    891. 

  891.         <table class="tbl"><thead><tr><th>时间</th><th>操作人</th><th>操作类型</th><th>描述</th><th>IP</th></tr></thead><tbody>
    892. 

  892.           <tr><td class="mono text-sm">2025-12-18 15:22</td><td>李明</td><td><span class="tag tag-accent">评分</span></td><td>提交了对张伟的绩效评审</td><td class="mono text-xs">192.168.1.42</td></tr>
    893. 

  893.           <tr><td class="mono text-sm">2025-12-18 14:30</td><td>李明</td><td><span class="tag tag-indigo">编辑</span></td><td>更新了 KR1.4 的进度数据</td><td class="mono text-xs">192.168.1.42</td></tr>
    894. 

  894.           <tr><td class="mono text-sm">2025-12-18 10:15</td><td>王芳</td><td><span class="tag tag-warn">申诉</span></td><td>提交了 KR1.2 评分申诉</td><td class="mono text-xs">192.168.1.88</td></tr>
    895. 

  895.           <tr><td class="mono text-sm">2025-12-18 09:00</td><td>张伟</td><td><span class="tag tag-success">登录</span></td><td>用户登录系统</td><td class="mono text-xs">192.168.1.56</td></tr>
    896. 

  896.           <tr><td class="mono text-sm">2025-12-17 16:40</td><td>王主任</td><td><span class="tag tag-indigo">编辑</span></td><td>修改了 Q4 考核周期截止日期</td><td class="mono text-xs">192.168.1.10</td></tr>
    897. 

  897.           <tr><td class="mono text-sm">2025-12-17 14:20</td><td>李明</td><td><span class="tag tag-accent">评分</span></td><td>完成了对陈静的绩效评审</td><td class="mono text-xs">192.168.1.42</td></tr>
    898. 

  898.         </tbody></table>
    899. 

  899.         <div class="flex-between mt-sm"><span class="text-xs text-muted">共 128 条记录</span><div class="flex-wrap"><button class="btn btn-outline btn-sm" disabled>上一页</button><span class="btn btn-sm" style="background:var(--accent-soft);color:var(--accent-hover);border-radius:var(--radius-sm);">1</span><button class="btn btn-ghost btn-sm">2</button><button class="btn btn-ghost btn-sm">3</button><button class="btn btn-ghost btn-sm">...</button><button class="btn btn-outline btn-sm">下一页</button></div></div>
    900. 

  900.       </div>
    901. 

  901.     </div>
    902. 

  902. 

  903.   </div><!-- /main -->
    904. 

  904. </div><!-- /app -->
    905. 

  905. 

  906. <script>
    907. 

  907.   const pages = {
    908. 

  908.     login:'登录', workspace:'工作台', 'my-okr':'我的 OKR', 'team-okr':'团队 OKR',
    909. 

  909.     'okr-align':'OKR 对齐', 'okr-exec':'执行进度', 'my-result':'我的绩效',
    910. 

  910.     'score-history':'历史绩效', 'scoring-list':'绩效打分', 'scoring-detail':'绩效考评',
    911. 

  911.     appeal:'绩效申诉', feedback:'绩效沟通', periods:'考核周期',
    912. 

  912.     templates:'绩效模板', dimensions:'考核维度', org:'组织架构',
    913. 

  913.     notifications:'消息通知', logs:'操作日志'
    914. 

  914.   };
    915. 

  915.   let cur = 'login';
    916. 

  916.   function navTo(id, el) {
    917. 

  917.     document.getElementById('pg-'+cur).classList.remove('page-panel--active');
    918. 

  918.     document.querySelector('.nav-item--active')?.classList.remove('nav-item--active');
    919. 

  919.     cur = id;
    920. 

  920.     document.getElementById('pg-'+id).classList.add('page-panel--active');
    921. 

  921.     if (el) el.classList.add('nav-item--active');
    922. 

  922.     else document.querySelector('[data-page="'+id+'"]')?.classList.add('nav-item--active');
    923. 

  923.     document.getElementById('topbarTitle').textContent = pages[id] || id;
    924. 

  924.     // Switch login to full-height mode
    925. 

  925.     if (id==='login') {
    926. 

  926.       document.getElementById('pg-login').style.display='flex';
    927. 

  927.       document.querySelector('.topbar').style.display='none';
    928. 

  928.       document.querySelector('.main').style.background='#ffffff';
    929. 

  929.     } else {
    930. 

  930.       document.getElementById('pg-login').style.display='';
    931. 

  931.       document.querySelector('.topbar').style.display='';
    932. 

  932.       document.querySelector('.main').style.background='';
    933. 

  933.     }
    934. 

  934.   }
    935. 

  935.   function toggleMod(id) { document.getElementById(id).classList.toggle('nav-module--collapsed'); }
    936. 

  936.   // Init: login mode hides topbar
    937. 

  937.   document.querySelector('.topbar').style.display='none';
    938. 

  938.   document.querySelector('.main').style.background='#ffffff';
    939. 

  939. </script>
    940. 

  940. 

  941. </body>
    942. 

  942. </html>
    943.