@wdyy/skills 0.1.19 → 0.1.20

package/.well-known/skills/wdyy-ui/assets/template/styles.css

@@ -0,0 +1,603 @@
+:root {
+  color-scheme: light;
+  --bg: #f6f9f6;
+  --surface: #ffffff;
+  --surface-soft: #ebf7ee;
+  --text: #202d23;
+  --muted: #6a766d;
+  --line: #dce5de;
+  --primary: #2b8a3e;
+  --primary-strong: #237032;
+  --primary-soft: #ebf7ee;
+  --secondary: #087f5b;
+  --accent: #66a80f;
+  --success: #2b8a3e;
+  --danger: #c92a2a;
+  --warning: #e67700;
+  --info: #1971c2;
+  --focus: #b2f2bb;
+  --shadow: 0 2px 10px color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.app-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  min-height: 58px;
+  padding: 0 24px;
+  background: var(--surface);
+  color: var(--text);
+  border-bottom: 1px solid var(--line);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 220px;
+}
+
+.brand-logo {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 42px;
+  object-fit: contain;
+}
+
+.brand-copy {
+  min-width: 0;
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.brand span {
+  display: block;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.nav-actions a,
+.nav-actions button,
+.nav-actions select {
+  min-height: 34px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--text);
+  padding: 0 12px;
+  text-decoration: none;
+}
+
+.nav-actions a {
+  display: inline-flex;
+  align-items: center;
+}
+
+.nav-actions a:hover,
+.nav-actions button:hover,
+.nav-actions select:hover {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+  color: var(--primary);
+}
+
+.nav-actions select option {
+  color: var(--text);
+}
+
+.page {
+  flex: 1;
+  padding: 18px 24px 24px;
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 16px;
+}
+
+.tab-button {
+  min-height: 40px;
+  border: 0;
+  border-bottom: 3px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  padding: 0 16px;
+}
+
+.tab-button.active {
+  color: var(--primary);
+  border-color: var(--primary);
+  font-weight: 700;
+}
+
+.layout-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+.section,
+.panel {
+  min-width: 0;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+
+.section {
+  padding: 18px;
+}
+
+.panel-header,
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.section-header.actions-only {
+  justify-content: flex-end;
+}
+
+.panel-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 0;
+}
+
+.panel-body {
+  padding: 16px;
+}
+
+h2,
+h3 {
+  margin: 0;
+  letter-spacing: 0;
+}
+
+h2 {
+  font-size: 18px;
+}
+
+h3 {
+  font-size: 15px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 12px 14px;
+}
+
+.form-grid.two {
+  grid-template-columns: repeat(2, minmax(180px, 1fr));
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field label {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.field input,
+.field select,
+.field textarea,
+.search-row input,
+.search-row select {
+  width: 100%;
+  min-height: 38px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text);
+  padding: 7px 10px;
+}
+
+.field input:focus,
+.field select:focus,
+.field textarea:focus,
+.search-row input:focus,
+.search-row select:focus,
+.nav-actions a:focus-visible,
+.nav-actions button:focus-visible,
+.nav-actions select:focus-visible,
+.tab-button:focus-visible,
+.btn:focus-visible,
+.list-button:focus-visible,
+.record-template-button:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.field textarea {
+  min-height: 78px;
+  resize: vertical;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+
+.btn {
+  min-height: 38px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--text);
+  padding: 0 14px;
+  font-weight: 600;
+}
+
+.btn.primary {
+  border-color: var(--primary);
+  background: var(--primary);
+  color: var(--surface);
+}
+
+.btn.primary:hover {
+  background: var(--primary-strong);
+}
+
+.btn.danger {
+  border-color: #ffd5d5;
+  color: var(--danger);
+}
+
+.btn.ghost {
+  background: transparent;
+}
+
+.search-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: end;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--surface);
+}
+
+.data-table th,
+.data-table td {
+  border-bottom: 1px solid var(--line);
+  padding: 10px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.data-table th {
+  color: var(--muted);
+  background: var(--surface-soft);
+  font-weight: 700;
+}
+
+.data-table tr:hover td {
+  background: var(--primary-soft);
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  border-radius: 999px;
+  padding: 0 9px;
+  font-size: 12px;
+  font-weight: 700;
+  border: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.status.success {
+  color: var(--success);
+  background: #e9f7ed;
+}
+
+.status.warning {
+  color: var(--warning);
+  background: #fff4e6;
+}
+
+.status.danger {
+  color: var(--danger);
+  background: #fff0f0;
+}
+
+.message {
+  min-height: 38px;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--muted);
+  padding: 8px 10px;
+}
+
+.message.success {
+  color: var(--success);
+  background: #e9f7ed;
+}
+
+.message.error {
+  color: var(--danger);
+  background: #fff0f0;
+}
+
+.summary-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.metric {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 14px;
+}
+
+.metric strong {
+  display: block;
+  font-size: 22px;
+  line-height: 1.1;
+}
+
+.metric span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.patient-header {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(100px, 1fr));
+  gap: 10px;
+  margin-bottom: 16px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.info-item span {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.info-item strong {
+  display: block;
+  margin-top: 2px;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.list-button {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  padding: 10px;
+  text-align: left;
+}
+
+.list-button.active {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+}
+
+.list-button strong,
+.list-button span {
+  display: block;
+}
+
+.list-button span {
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.patient-queue-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty {
+  border: 1px dashed var(--line);
+  border-radius: 8px;
+  background: var(--surface-soft);
+  color: var(--muted);
+  padding: 20px;
+  text-align: center;
+}
+
+.record-layout {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.record-sidebar,
+.record-editor-panel {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  padding: 16px;
+}
+
+.record-template-list {
+  display: grid;
+  gap: 10px;
+}
+
+.record-template-button {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--text);
+  padding: 12px 14px;
+  text-align: left;
+  font-size: 15px;
+}
+
+.record-template-button.active {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.record-editor {
+  width: 100%;
+  min-height: 320px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--text);
+  padding: 14px 16px;
+  resize: vertical;
+  font: inherit;
+  line-height: 1.7;
+}
+
+@media (max-width: 900px) {
+  .record-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--text) 42%, transparent);
+  padding: 20px;
+  z-index: 10;
+}
+
+.modal-backdrop.open {
+  display: flex;
+}
+
+.modal {
+  width: min(520px, 100%);
+  background: var(--surface);
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  box-shadow: 0 16px 40px color-mix(in srgb, var(--text) 20%, transparent);
+  padding: 18px;
+}
+
+.modal h2 {
+  margin-bottom: 8px;
+}
+
+.modal p {
+  margin: 0;
+  color: var(--muted);
+}
+
+@media (max-width: 980px) {
+  .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 12px 16px;
+  }
+
+  .page {
+    padding: 14px 16px 20px;
+  }
+
+  .brand {
+    min-width: 0;
+  }
+
+  .layout-grid,
+  .form-grid,
+  .form-grid.two,
+  .summary-strip,
+  .patient-header {
+    grid-template-columns: 1fr;
+  }
+
+  .tabs {
+    overflow-x: auto;
+  }
+
+  .tab-button {
+    flex: 0 0 auto;
+  }
+}

package/.well-known/skills/wdyy-ui/references/ui-standard.md

@@ -0,0 +1,100 @@
+# wdyy-ui 设计规范
+
+## 1. 设计定位
+
+面向医院工作人员的高频生产系统。视觉关键词是清新、生命、专业、可信、低疲劳和高可读性。品牌色只用于关键操作、当前状态和必要强调，页面主体保持白色与浅绿色背景。
+
+## 2. 唯一资源
+
+- 共享样式：`../assets/template/styles.css`
+- 医院 Logo：`../assets/template/logo.png`
+- Logo 不得重新绘制、变色、拉伸或替换为文字占位符。
+- 页面与浏览器页签统一使用同一个 Logo 文件。
+
+## 3. 颜色 token
+
+| 角色 | CSS 变量 | 色值 | 用途 |
+|---|---|---|---|
+| 页面背景 | `--bg` | `#F6F9F6` | 页面底色 |
+| 表面 | `--surface` | `#FFFFFF` | 顶栏、卡片、输入框、按钮 |
+| 主色 | `--primary` | `#2B8A3E` | 主按钮、当前标签、关键强调 |
+| 深主色 | `--primary-strong` | `#237032` | 主按钮悬停 |
+| 浅主色 | `--primary-soft` | `#EBF7EE` | 选中、悬停、表头和空状态 |
+| 辅助青绿 | `--secondary` | `#087F5B` | 必要的次级品牌强调 |
+| 生命绿 | `--accent` | `#66A80F` | 少量辅助强调 |
+| 正文 | `--text` | `#202D23` | 标题和正文 |
+| 次要文字 | `--muted` | `#6A766D` | 提示、说明和元数据 |
+| 边框 | `--line` | `#DCE5DE` | 控件、卡片和分隔线 |
+| 焦点 | `--focus` | `#B2F2BB` | 键盘焦点环 |
+
+固定状态色：
+
+| 状态 | 前景 | 浅背景 |
+|---|---|---|
+| 成功 | `#2B8A3E` | `#E9F7ED` |
+| 警告 | `#E67700` | `#FFF4E6` |
+| 危险 | `#C92A2A` | `#FFF0F0` |
+| 信息 | `#1971C2` | 使用白色或按需求提供的浅信息背景 |
+
+当前设计没有侧边栏，不使用 `#214F2C`。新增颜色前必须说明角色和使用范围并取得确认，不能用近似颜色替换既有 token。
+
+## 4. 顶栏与品牌
+
+```text
+┌──────────────────────────────────────────────────────────────┐
+│ [42px Logo] 数智医院 HIS  [系统选择] [主页] [菜单] [菜单]  │
+│             当前系统名称                                     │
+└──────────────────────────────────────────────────────────────┘
+```
+
+- 顶栏最小高度 58px，左右内边距 24px，背景为 `--surface`，底部使用 `--line` 边框。
+- 品牌区域最小宽度 220px；Logo 与文字间距 10px。
+- 导航组紧跟品牌区域，使用 `justify-content:flex-start`，组间距 16px，按钮间距 10px。
+- 导航控件最小高度 34px，圆角 6px，水平内边距 12px。
+- `<a>` 必须使用 `inline-flex` 和 `align-items:center`，确保文字垂直居中。
+- 悬停时使用 `--primary-soft` 背景、`--primary` 边框和文字。
+
+## 5. 页面布局模式
+
+### 患者管理
+
+- 顶部使用 4 列摘要指标。
+- 操作入口采用横向标签页。
+- 建档表单桌面端使用 3 列网格；挂号和结算可使用左右双面板。
+- 结算明细使用整宽表格。
+
+参考：`../assets/template/common-business.html`
+
+### 药事管理
+
+- 主流程第一层为“科室列表 + 患者检索”的左右布局。
+- 左侧宽度使用 `minmax(280px,360px)`；右侧承载检索和患者列表。
+- 第二层使用整宽药品明细表，主操作位于标题区域右侧。
+
+参考：`../assets/template/pharmacy-management.html`
+
+### 医生工作站
+
+- 顶部先展示患者摘要信息条。
+- 主体使用“患者队列 + 临床工作区”的左右布局。
+- 临床工作区使用横向标签页承载医嘱、病历、诊断、检验、检查和费用等模块。
+
+参考：`../assets/template/clinical-workstation.html`
+
+## 6. 组件规则
+
+- 卡片与面板：白色背景、`--line` 边框、8px 圆角、轻量阴影。
+- 主按钮：主色背景、白色文字；悬停使用深主色。
+- 普通按钮：白色背景、标准边框；幽灵按钮使用透明背景。
+- 表格：表头使用浅主色背景，单元格用标准边框分隔，行悬停使用浅主色。
+- 输入控件：最小高度 38px，6px 圆角，必须有可见标签或可访问名称。
+- 消息和状态：同时显示文字；成功、警告、危险使用固定语义色。
+- 空状态：虚线边框、浅色背景、明确的下一步提示。
+
+## 7. 响应式与可访问性
+
+- 980px 以下：顶栏纵向排列，品牌和导航左边缘均为 16px；网格改为单列。
+- 900px 以下：病历侧栏和编辑区改为单列。
+- 标签页可横向滚动，但页面本身不得横向滚动。
+- 所有可操作控件必须显示键盘焦点环；颜色不能成为唯一状态信号。
+- 页面语言使用 `zh-CN`，标题、标签和按钮名称应与业务动作一致。