weifuwu 0.61.2 → 0.62.0

package/dist/components/style.css

@@ -1014,7 +1014,11 @@ code {
 .wf-app-shell {
   display: grid;
   grid-template-columns: var(--wf-sidebar-width, 240px) minmax(0, 1fr);
-  min-height: 100vh;
+  /* 固定视口高度（非 min-height）：内部页面（聊天等）依赖 height: 100% 链实现
+     容器内滚动——min-height 会让壳随内容长高，聊天消息区永远无法内部滚动
+     （scrollTop 赋值无效果，页面滚动条不跟随消息到底） */
+  height: 100vh;
+  overflow: hidden;
 }
 
 /* ── 侧边栏 ── */
@@ -1115,6 +1119,9 @@ code {
 .wf-main {
   padding: var(--wf-space-lg);
   min-width: 0;
+  min-height: 0;
+  /* 内容高于视口时在主区内滚动（壳固定视口高度后的唯一滚动出口） */
+  overflow-y: auto;
   background: var(--wf-color-bg);
 }
 
@@ -1129,6 +1136,8 @@ code {
 @media (max-width: 767.98px) {
   .wf-app-shell {
     grid-template-columns: 1fr;
+    height: auto;          /* 恢复文档流滚动（侧边栏堆叠在顶部） */
+    overflow: visible;
   }
   .wf-sidebar {
     position: static;
@@ -1138,6 +1147,7 @@ code {
   }
   .wf-main {
     padding: var(--wf-space-md);
+    overflow: visible;
   }
 }
 }
@@ -2991,6 +3001,8 @@ code {
   display: flex;
   align-items: center;
   gap: var(--wf-gap-sm);
+  width: 100%;
+  min-width: 0; /* flex 子项可收缩（防 bar 塌缩为 0） */
 }
 
 .wf-progress-label {
@@ -4704,4 +4716,668 @@ code {
   border-color: var(--wf-color-primary);
 }
 
+/* weifuwu/components — Markdown 排版 */
+
+.wf-md {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  line-height: var(--wf-line-height);
+  color: var(--wf-color-text);
+  word-break: break-word;
+}
+
+.wf-md > :first-child { margin-top: 0; }
+.wf-md > :last-child { margin-bottom: 0; }
+
+.wf-md-h { margin: var(--wf-space-md) 0 var(--wf-space-sm); font-weight: var(--wf-font-weight-bold); line-height: 1.25; }
+.wf-md-h1 { font-size: var(--wf-font-size-xl); }
+.wf-md-h2 { font-size: var(--wf-font-size-lg); }
+.wf-md-h3 { font-size: var(--wf-font-size-base); }
+.wf-md-h4 { font-size: var(--wf-font-size-sm); color: var(--wf-color-text-secondary); }
+
+.wf-md-p { margin: 0 0 var(--wf-space-sm); }
+
+.wf-md-ul, .wf-md-ol { margin: 0 0 var(--wf-space-sm); padding-left: var(--wf-space-lg); }
+.wf-md-li { margin: 2px 0; }
+
+.wf-md-code {
+  font-family: var(--wf-font-mono);
+  font-size: 0.875em; /* 行内代码相对字号（继承父级，随上下文缩放） */
+  background: var(--wf-color-bg-secondary);
+  border-radius: var(--wf-radius-xs);
+  padding: 1px var(--wf-space-xs);
+}
+
+.wf-md-strong { font-weight: var(--wf-font-weight-bold); }
+.wf-md-em { font-style: italic; }
+
+.wf-md-link {
+  color: var(--wf-color-primary-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.wf-md-link:hover { opacity: 0.85; }
+
+.wf-md-quote {
+  margin: 0 0 var(--wf-space-sm);
+  padding: var(--wf-space-xs) var(--wf-space-md);
+  border-left: 3px solid var(--wf-color-border);
+  color: var(--wf-color-text-secondary);
+}
+
+.wf-md-hr {
+  border: none;
+  border-top: 1px solid var(--wf-color-border);
+  margin: var(--wf-space-md) 0;
+}
+
+/* weifuwu/components — CodeBlock */
+
+.wf-codeblock {
+  margin: 0 0 var(--wf-space-sm);
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  overflow: hidden;
+  background: var(--wf-color-bg-secondary);
+  font-family: var(--wf-font-mono);
+}
+
+.wf-codeblock-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  background: var(--wf-color-bg-tertiary);
+  border-bottom: 1px solid var(--wf-color-border);
+}
+
+.wf-codeblock-title {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+}
+
+.wf-codeblock-lang {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wf-codeblock-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--wf-color-primary);
+}
+
+.wf-codeblock-copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--wf-color-text-secondary);
+  padding: 4px;
+  border-radius: var(--wf-radius-xs);
+}
+.wf-codeblock-copy:hover {
+  color: var(--wf-color-text);
+  background: var(--wf-color-bg);
+}
+.wf-codeblock-copy:focus-visible {
+  outline: 2px solid var(--wf-color-primary);
+  outline-offset: 1px;
+}
+
+.wf-codeblock-pre {
+  margin: 0;
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  overflow-x: auto;
+  font-size: var(--wf-font-size-xs);
+  line-height: 1.6;
+}
+
+.wf-codeblock-code {
+  font-family: inherit;
+  white-space: pre;
+}
+
+/* weifuwu/components — Timeline */
+
+.wf-timeline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wf-timeline-item {
+  position: relative;
+  display: flex;
+  gap: var(--wf-gap-md);
+  padding-bottom: var(--wf-space-md);
+}
+
+/* 连接线（除最后一项） */
+.wf-timeline-item:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: 20px;
+  bottom: 0;
+  left: 8px;
+  width: 2px;
+  background: var(--wf-color-border);
+}
+
+.wf-timeline-node {
+  position: relative;
+  z-index: 1;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  margin-top: 2px;
+}
+
+/* 节点状态色（-text 语义色变体，对比度达标） */
+.wf-timeline-node--default { background: var(--wf-color-border); color: var(--wf-color-text-secondary); }
+.wf-timeline-node--info { background: var(--wf-color-info-text); color: var(--wf-color-on-brand); }
+.wf-timeline-node--success { background: var(--wf-color-success-text); color: var(--wf-color-on-brand); }
+.wf-timeline-node--warning { background: var(--wf-color-warning-text); color: var(--wf-color-on-brand); }
+.wf-timeline-node--error { background: var(--wf-color-error-text); color: var(--wf-color-on-brand); }
+
+.wf-timeline-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.wf-timeline-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--wf-gap-sm);
+  flex-wrap: wrap;
+}
+
+.wf-timeline-title {
+  font-weight: var(--wf-font-weight-semibold);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+}
+
+.wf-timeline-time {
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+}
+
+.wf-timeline-content {
+  margin-top: 2px;
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+}
+
+.wf-timeline-item--clickable {
+  cursor: pointer;
+  border-radius: var(--wf-radius-sm);
+  padding: 2px 4px;
+  margin: -2px -4px;
+}
+.wf-timeline-item--clickable:hover { background: var(--wf-color-bg-secondary); }
+.wf-timeline-item--clickable:focus-visible {
+  outline: 2px solid var(--wf-color-primary);
+  outline-offset: 1px;
+}
+
+/* alternate：内容左右交替（节点居中分隔） */
+.wf-timeline-item--alt-left, .wf-timeline-item--alt-right {
+  width: 50%;
+}
+.wf-timeline-item--alt-left { align-self: flex-start; text-align: right; }
+.wf-timeline-item--alt-right { align-self: flex-end; margin-left: 50%; }
+
+/* weifuwu/components — InputNumber */
+
+.wf-inputnumber-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-xs);
+  width: 100%;
+}
+
+.wf-inputnumber {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg);
+  min-height: 36px; /* 与 Button md 对齐 */
+  transition: border-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-inputnumber:focus-within {
+  border-color: var(--wf-color-primary);
+  box-shadow: 0 0 0 2px var(--wf-color-primary-bg);
+}
+
+.wf-inputnumber--err { border-color: var(--wf-color-error-text); }
+.wf-inputnumber--disabled { opacity: 0.6; }
+
+.wf-inputnumber-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0 var(--wf-space-sm);
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  width: 100%;
+}
+
+.wf-inputnumber-btns {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--wf-color-border);
+}
+
+.wf-inputnumber-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--wf-color-text-secondary);
+  padding: 2px 6px;
+  min-height: 18px;
+}
+.wf-inputnumber-btn:hover { background: var(--wf-color-bg-secondary); color: var(--wf-color-text); }
+.wf-inputnumber-btn:first-child { border-bottom: 1px solid var(--wf-color-border); }
+.wf-inputnumber-btn:focus-visible { outline: 2px solid var(--wf-color-primary); outline-offset: -2px; }
+.wf-inputnumber-btn:disabled { cursor: not-allowed; }
+
+.wf-inputnumber-label {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+}
+
+.wf-inputnumber-req { color: var(--wf-color-error-text); margin-left: 2px; }
+
+.wf-inputnumber-err { font-size: var(--wf-font-size-xs); color: var(--wf-color-error-text); }
+.wf-inputnumber-hint { font-size: var(--wf-font-size-xs); color: var(--wf-color-text-tertiary); }
+
+/* weifuwu/components — Descriptions */
+
+.wf-descriptions {
+  display: grid;
+  gap: var(--wf-space-sm) var(--wf-space-md);
+  margin: 0;
+  font-family: var(--wf-font-sans);
+}
+
+.wf-descriptions--1 { grid-template-columns: repeat(1, 1fr); }
+.wf-descriptions--2 { grid-template-columns: repeat(2, 1fr); }
+.wf-descriptions--3 { grid-template-columns: repeat(3, 1fr); }
+.wf-descriptions--4 { grid-template-columns: repeat(4, 1fr); }
+
+.wf-descriptions-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.wf-descriptions-label {
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  font-weight: var(--wf-font-weight-medium);
+}
+
+.wf-descriptions-value {
+  margin: 0;
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  word-break: break-word;
+}
+
+/* bordered：单元格描边 */
+.wf-descriptions--bordered {
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  gap: 0;
+  overflow: hidden;
+}
+.wf-descriptions--bordered .wf-descriptions-item {
+  border-bottom: 1px solid var(--wf-color-border);
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  border-right: 1px solid var(--wf-color-border);
+}
+.wf-descriptions--bordered .wf-descriptions-item:nth-child(n):last-child {
+  border-bottom: none;
+}
+
+/* size */
+.wf-descriptions--sm .wf-descriptions-value { font-size: var(--wf-font-size-xs); }
+.wf-descriptions--lg .wf-descriptions-value { font-size: var(--wf-font-size-base); }
+
+/* weifuwu/components — AvatarGroup */
+
+.wf-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+.wf-avatar-group-item {
+  margin-left: -6px;
+}
+.wf-avatar-group-item:first-child {
+  margin-left: 0;
+}
+
+.wf-avatar-group-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-left: -6px;
+  background: var(--wf-color-bg-tertiary);
+  border: 2px solid var(--wf-color-bg);
+  font-size: var(--wf-font-size-xs);
+  font-weight: var(--wf-font-weight-semibold);
+  color: var(--wf-color-text-secondary);
+  font-family: var(--wf-font-sans);
+}
+
+/* weifuwu/components — MessageBubble（依赖 layout wf-bubble 原语） */
+
+.wf-bubble--error {
+  border: 1px solid var(--wf-color-error-text);
+  background: var(--wf-color-error-bg);
+  color: var(--wf-color-error-text);
+}
+
+.wf-bubble--streaming {
+  border-right: 3px solid var(--wf-color-primary);
+  border-right-color: var(--wf-color-primary);
+  animation: wf-bubble-blink var(--wf-dur-fast) var(--wf-ease-in-out) infinite;
+}
+
+@keyframes wf-bubble-blink {
+  0%, 100% { border-right-color: var(--wf-color-primary); }
+  50% { border-right-color: transparent; }
+}
+
+.wf-bubble-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-xs);
+}
+
+.wf-bubble-actions {
+  display: flex;
+  gap: var(--wf-gap-xs);
+  align-items: center;
+}
+
+/* weifuwu/components — Menu（侧栏导航） */
+
+.wf-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-family: var(--wf-font-sans);
+}
+
+.wf-menu-group {
+  padding: var(--wf-space-sm) var(--wf-space-sm) 2px;
+  font-size: var(--wf-font-size-xs);
+  font-weight: var(--wf-font-weight-semibold);
+  color: var(--wf-color-text-tertiary);
+  letter-spacing: 0.02em;
+}
+
+.wf-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--wf-dur-fast) var(--wf-ease-out), color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-menu-item:hover {
+  background: var(--wf-color-bg-secondary);
+  color: var(--wf-color-text);
+}
+
+.wf-menu-item--active {
+  background: var(--wf-color-primary-bg);
+  color: var(--wf-color-primary-text);
+  font-weight: var(--wf-font-weight-semibold);
+}
+
+.wf-menu-item--danger { color: var(--wf-color-error-text); }
+.wf-menu-item--danger:hover { background: var(--wf-color-error-bg); color: var(--wf-color-error-text); }
+
+.wf-menu-item:focus-visible {
+  outline: 2px solid var(--wf-color-primary);
+  outline-offset: -2px;
+}
+
+.wf-menu-icon {
+  display: inline-flex;
+  font-size: var(--wf-font-size-base);
+  width: 18px;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* weifuwu/components — PasswordInput（复用 Input 基础类） */
+
+.wf-password {
+  position: relative;
+}
+
+.wf-password .wf-input {
+  padding-right: 38px;
+}
+
+.wf-password-eye {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--wf-color-text-tertiary);
+  padding: 6px;
+  border-radius: var(--wf-radius-xs);
+}
+.wf-password-eye:hover { color: var(--wf-color-text-secondary); }
+
+/* weifuwu/components — TagsInput */
+
+.wf-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+  padding: 4px var(--wf-space-sm);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg);
+  min-height: 36px; /* 与 Input 对齐 */
+  cursor: text;
+  transition: border-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-tags:focus-within {
+  border-color: var(--wf-color-primary);
+  box-shadow: 0 0 0 2px var(--wf-color-primary-bg);
+}
+
+.wf-tags--err { border-color: var(--wf-color-error-text); }
+.wf-tags--disabled { opacity: 0.6; cursor: not-allowed; }
+
+.wf-tags-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px var(--wf-space-xs);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg-secondary);
+  border: 1px solid var(--wf-color-border);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text);
+  font-family: var(--wf-font-sans);
+}
+
+.wf-tags-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--wf-color-text-tertiary);
+  padding: 0;
+  border-radius: 2px;
+}
+.wf-tags-remove:hover { color: var(--wf-color-error-text); }
+.wf-tags-remove:focus-visible { outline: 2px solid var(--wf-color-primary); }
+
+.wf-tags-input {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  padding: 4px 0;
+}
+.wf-tags-input::placeholder { color: var(--wf-color-text-tertiary); }
+
+/* weifuwu/components — Highlight */
+
+.wf-highlight-mark {
+  background: var(--wf-color-warning-bg);
+  color: var(--wf-color-warning-text);
+  border-radius: 2px;
+  padding: 0 1px;
+  font-weight: var(--wf-font-weight-semibold);
+}
+
+/* weifuwu/components — List */
+
+.wf-list {
+  font-family: var(--wf-font-sans);
+}
+
+.wf-list-header {
+  font-weight: var(--wf-font-weight-semibold);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  padding: var(--wf-space-sm) 0;
+}
+
+.wf-list-body {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wf-list-item {
+  padding: var(--wf-space-sm) 0;
+}
+
+.wf-list--divided .wf-list-item {
+  border-bottom: 1px solid var(--wf-color-border);
+}
+.wf-list--divided .wf-list-item:last-child {
+  border-bottom: none;
+}
+
+.wf-list-footer {
+  padding: var(--wf-space-sm) 0;
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-tertiary);
+}
+
+.wf-list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-lg) 0;
+  color: var(--wf-color-text-tertiary);
+  font-size: var(--wf-font-size-sm);
+}
+
+/* weifuwu/components — Result */
+
+.wf-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-xl) var(--wf-space-md);
+  text-align: center;
+  font-family: var(--wf-font-sans);
+}
+
+.wf-result-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+}
+
+.wf-result--success .wf-result-icon { background: var(--wf-color-success-bg); color: var(--wf-color-success-text); }
+.wf-result--error .wf-result-icon { background: var(--wf-color-error-bg); color: var(--wf-color-error-text); }
+.wf-result--warning .wf-result-icon { background: var(--wf-color-warning-bg); color: var(--wf-color-warning-text); }
+.wf-result--info .wf-result-icon { background: var(--wf-color-info-bg); color: var(--wf-color-info-text); }
+
+.wf-result-title {
+  font-size: var(--wf-font-size-lg);
+  font-weight: var(--wf-font-weight-bold);
+  color: var(--wf-color-text);
+}
+
+.wf-result-desc {
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+  max-width: 420px;
+}
+
+.wf-result-extra {
+  margin-top: var(--wf-space-md);
+  display: flex;
+  gap: var(--wf-gap-sm);
+  justify-content: center;
+}
+
 }