weifuwu 0.38.2 → 0.40.0

package/dist/components/style.css

@@ -795,15 +795,11 @@
 /* weifuwu/components — Dropdown */
 
 .wf-dropdown {
-  position: relative;
   display: inline-block;
 }
 
 .wf-dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: var(--wf-gap-xs);
+  position: fixed;
   min-width: 140px;
   background: var(--wf-color-bg);
   border: var(--wf-border-width) solid var(--wf-color-border);
@@ -816,7 +812,6 @@
 .wf-dropdown--open {
   z-index: var(--wf-cover-z);
 }
-}
 
 .wf-dropdown-item {
   display: block;
@@ -1598,99 +1593,84 @@
 /* weifuwu/components — Tooltip */
 
 .wf-tooltip-wrap {
-  position: relative;
   display: inline-flex;
 }
 
 .wf-tooltip {
-  position: absolute;
+  position: fixed;
   z-index: var(--wf-cover-z, 1000);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  pointer-events: none;
-  animation: wf-tooltip-fadein 0.15s ease-out;
-}
-
-@keyframes wf-tooltip-fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-.wf-tooltip-content {
+  background: var(--wf-color-text);
+  color: var(--wf-color-bg);
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-xs);
-  color: var(--wf-color-bg);
-  background: var(--wf-color-text);
   padding: var(--wf-space-xs) var(--wf-space-sm);
   border-radius: var(--wf-radius-sm);
   white-space: nowrap;
+  pointer-events: none;
   max-width: 240px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: var(--wf-line-height-tight);
 }
 
-.wf-tooltip-arrow {
-  width: 6px;
-  height: 6px;
-  background: var(--wf-color-text);
-  transform: rotate(45deg);
-  border-radius: 1px;
+.wf-tooltip--hidden {
+  visibility: hidden;
 }
 
-/* 位置: top (默认) */
-.wf-tooltip--top {
-  bottom: 100%;
-  left: 50%;
+.wf-tooltip--bottom {
   transform: translateX(-50%);
-  padding-bottom: 4px;
 }
 
-.wf-tooltip--top .wf-tooltip-arrow {
-  order: 1;
-  margin-top: -3px;
+.wf-tooltip--top {
+  transform: translateX(-50%) translateY(-100%);
 }
 
-/* 位置: bottom */
-.wf-tooltip--bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding-top: 4px;
+.wf-tooltip--left {
+  transform: translateY(-50%) translateX(-100%);
 }
 
-.wf-tooltip--bottom .wf-tooltip-arrow {
-  order: -1;
-  margin-bottom: -3px;
+.wf-tooltip--right {
+  transform: translateY(-50%);
 }
 
-/* 位置: left */
-.wf-tooltip--left {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  padding-right: 4px;
-  flex-direction: row;
+.wf-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
 }
 
-.wf-tooltip--left .wf-tooltip-arrow {
-  order: 1;
-  margin-left: -3px;
+.wf-tooltip--bottom .wf-tooltip-arrow {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--wf-color-text);
+  border-top: none;
 }
 
-/* 位置: right */
-.wf-tooltip--right {
+.wf-tooltip--top .wf-tooltip-arrow {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--wf-color-text);
+  border-bottom: none;
+}
+
+.wf-tooltip--left .wf-tooltip-arrow {
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
-  padding-left: 4px;
-  flex-direction: row;
+  border-left-color: var(--wf-color-text);
+  border-right: none;
 }
 
 .wf-tooltip--right .wf-tooltip-arrow {
-  order: -1;
-  margin-right: -3px;
+  left: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--wf-color-text);
+  border-left: none;
+}
+
+.wf-tooltip-content {
+  line-height: 1.4;
 }
 
 /* weifuwu/components — Drawer */
@@ -1837,8 +1817,7 @@
 /* weifuwu/components — Popover */
 
 .wf-popover-wrap {
-  position: relative;
-  display: inline-flex;
+  display: inline-block;
 }
 
 .wf-popover-overlay {
@@ -1848,111 +1827,46 @@
 }
 
 .wf-popover {
-  position: absolute;
+  position: fixed;
   z-index: 999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  animation: wf-popover-fadein 0.15s ease-out;
-}
-
-@keyframes wf-popover-fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-.wf-popover-content {
-  font-family: var(--wf-font-sans);
-  font-size: var(--wf-font-size-sm);
-  color: var(--wf-color-text);
   background: var(--wf-color-bg);
-  border: 1px solid var(--wf-color-border);
-  border-radius: var(--wf-radius);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  padding: var(--wf-space-sm);
-  min-width: 120px;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-md);
+  padding: var(--wf-space);
+  min-width: 160px;
   max-width: 320px;
-  line-height: var(--wf-line-height-normal);
-}
-
-.wf-popover-arrow {
-  width: 8px;
-  height: 8px;
-  background: var(--wf-color-bg);
-  border: 1px solid var(--wf-color-border);
-  transform: rotate(45deg);
-  border-radius: 1px;
-}
-
-.wf-popover-arrow {
-  border-bottom: none;
-  border-right: none;
-}
-
-/* 位置: top */
-.wf-popover--top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding-bottom: 6px;
-}
-
-.wf-popover--top .wf-popover-arrow {
-  order: 1;
-  margin-top: -4px;
-  border: none;
-  border-top: 1px solid var(--wf-color-border);
-  border-left: 1px solid var(--wf-color-border);
 }
 
-/* 位置: bottom */
 .wf-popover--bottom {
-  top: 100%;
-  left: 50%;
   transform: translateX(-50%);
-  padding-top: 6px;
 }
 
-.wf-popover--bottom .wf-popover-arrow {
-  order: -1;
-  margin-bottom: -4px;
-  border: none;
-  border-bottom: 1px solid var(--wf-color-border);
-  border-right: 1px solid var(--wf-color-border);
+.wf-popover--top {
+  transform: translateX(-50%) translateY(-100%);
 }
 
-/* 位置: left */
 .wf-popover--left {
-  right: 100%;
-  top: 50%;
+  transform: translateY(-50%) translateX(-100%);
+}
+
+.wf-popover--right {
   transform: translateY(-50%);
-  padding-right: 6px;
-  flex-direction: row;
 }
 
-.wf-popover--left .wf-popover-arrow {
-  order: 1;
-  margin-left: -4px;
-  border: none;
-  border-left: 1px solid var(--wf-color-border);
-  border-bottom: 1px solid var(--wf-color-border);
+.wf-popover-arrow {
+  display: none;
 }
 
-/* 位置: right */
-.wf-popover--right {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  padding-left: 6px;
-  flex-direction: row;
+.wf-popover-content {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  line-height: var(--wf-line-height);
 }
 
-.wf-popover--right .wf-popover-arrow {
-  order: -1;
-  margin-right: -4px;
-  border: none;
-  border-right: 1px solid var(--wf-color-border);
-  border-top: 1px solid var(--wf-color-border);
+.wf-popover-trigger {
+  display: inline-flex;
 }
 
 /* weifuwu/components — Skeleton */
@@ -2003,6 +1917,14 @@
   width: 60%;
 }
 
+/* weifuwu/components — Image */
+
+.wf-image {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
 /* weifuwu/components — InView */
 
 .wf-inview {
@@ -2029,3 +1951,662 @@
   content: '滚动到此处加载内容';
 }
 
+/* weifuwu/components — DatePicker */
+
+.wf-datepicker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.wf-datepicker-input {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  padding: var(--wf-space-sm) var(--wf-space);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  outline: none;
+  width: 100%;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.wf-datepicker-input:focus {
+  border-color: var(--wf-color-primary);
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-datepicker--disabled .wf-datepicker-input {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ── 遮罩 ── */
+
+.wf-datepicker-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--wf-pop-z) - 1);
+}
+
+/* ── 日历面板 ── */
+
+.wf-datepicker-dropdown {
+  position: fixed;
+  z-index: var(--wf-pop-z);
+  background: var(--wf-color-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-md);
+  padding: var(--wf-space);
+  min-width: 260px;
+  user-select: none;
+}
+
+.wf-datepicker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--wf-space);
+}
+
+.wf-datepicker-header-title {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-semibold);
+  color: var(--wf-color-text);
+}
+
+.wf-datepicker-header-btn {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  border: none;
+  border-radius: var(--wf-radius-sm);
+  background: transparent;
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+}
+
+.wf-datepicker-header-btn:hover {
+  background: var(--wf-color-bg-tertiary);
+  color: var(--wf-color-text);
+}
+
+.wf-datepicker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 4px;
+}
+
+.wf-datepicker-weekday {
+  text-align: center;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  padding: 4px 0;
+}
+
+.wf-datepicker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.wf-datepicker-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  border-radius: var(--wf-radius-sm);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+.wf-datepicker-cell:hover {
+  background: var(--wf-color-bg-tertiary);
+}
+
+.wf-datepicker-cell--other-month {
+  color: var(--wf-color-text-disabled);
+}
+
+.wf-datepicker-cell--today {
+  font-weight: var(--wf-font-weight-bold);
+}
+
+.wf-datepicker-cell--selected {
+  background: var(--wf-color-primary);
+  color: #fff;
+}
+
+.wf-datepicker-cell--in-range {
+  background: var(--wf-color-primary-bg);
+  border-radius: 0;
+}
+
+.wf-datepicker-cell--range-edge {
+  background: var(--wf-color-primary);
+  color: #fff;
+}
+
+/* ── 区间模式 ── */
+
+.wf-datepicker-range-wrap {
+  position: fixed;
+  z-index: var(--wf-pop-z);
+  display: flex;
+  gap: var(--wf-space);
+  background: var(--wf-color-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-md);
+  padding: var(--wf-space);
+  user-select: none;
+}
+
+.wf-datepicker-range-panel {
+  min-width: 240px;
+}
+
+/* ── 时间选择 ── */
+
+.wf-time-picker {
+  position: fixed;
+  z-index: var(--wf-pop-z);
+  background: var(--wf-color-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-md);
+  padding: var(--wf-space);
+  min-width: 200px;
+  user-select: none;
+}
+
+.wf-time-body {
+  display: flex;
+  gap: var(--wf-space-lg);
+  justify-content: center;
+  padding: var(--wf-space) 0;
+}
+
+.wf-time-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.wf-time-col-label {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+}
+
+.wf-time-opt-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.wf-time-opt {
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+  padding: 2px 12px;
+  border: none;
+  border-radius: var(--wf-radius-sm);
+  background: transparent;
+  color: var(--wf-color-text);
+  cursor: pointer;
+  text-align: center;
+}
+
+.wf-time-opt:hover {
+  background: var(--wf-color-bg-tertiary);
+}
+
+.wf-time-opt--selected {
+  background: var(--wf-color-primary);
+  color: #fff;
+}
+
+.wf-time-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wf-gap-sm);
+  padding-top: var(--wf-space-sm);
+  border-top: var(--wf-border-width) solid var(--wf-color-border-light);
+}
+
+/* ── datetime 模式 ── */
+
+.wf-datetime-time {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  margin-top: var(--wf-space);
+  padding-top: var(--wf-space-sm);
+  border-top: var(--wf-border-width) solid var(--wf-color-border-light);
+}
+
+.wf-datetime-time-label {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-secondary);
+}
+
+.wf-datetime-time-select {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.wf-datetime-select {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  padding: 2px 4px;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  outline: none;
+  cursor: pointer;
+}
+
+.wf-datetime-sep {
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-tertiary);
+  padding: 0 2px;
+}
+
+/* weifuwu/components — Chart */
+
+.wf-chart {
+  position: relative;
+  display: inline-block;
+  font-family: var(--wf-font-sans);
+}
+
+.wf-chart-title {
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-semibold);
+  color: var(--wf-color-text);
+  margin-bottom: var(--wf-space-sm);
+  text-align: center;
+}
+
+.wf-chart svg {
+  display: block;
+}
+
+/* ── 图例 ── */
+
+.wf-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wf-gap-sm);
+  justify-content: center;
+  margin-top: var(--wf-space-sm);
+}
+
+.wf-chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-secondary);
+}
+
+.wf-chart-legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* ── Tooltip ── */
+
+.wf-chart-tooltip {
+  position: fixed;
+  z-index: var(--wf-cover-z, 1000);
+  background: var(--wf-color-text);
+  color: var(--wf-color-bg);
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-xs);
+  pointer-events: none;
+  transform: translate(-50%, -100%);
+  white-space: nowrap;
+}
+
+.wf-chart-tooltip-label {
+  font-weight: var(--wf-font-weight-semibold);
+}
+
+.wf-chart-tooltip-value {
+  opacity: 0.8;
+}
+
+/* weifuwu/components — Editor */
+
+.wf-editor { position: relative; 
+  display: flex;
+  flex-direction: column;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  background: var(--wf-color-bg);
+  overflow: hidden;
+  transition: border-color var(--wf-transition), box-shadow var(--wf-transition);
+}
+
+.wf-editor:focus-within {
+  border-color: var(--wf-color-primary);
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-editor--disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+  background: var(--wf-color-bg-secondary, #f9fafb);
+}
+
+/* ── 工具栏 ────────────────────────────────────────── */
+
+.wf-editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  background: var(--wf-color-bg-secondary, #f9fafb);
+  flex-wrap: wrap;
+  user-select: none;
+}
+
+.wf-editor-tb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 var(--wf-space-xs);
+  border: none;
+  border-radius: var(--wf-radius-sm, 4px);
+  background: transparent;
+  color: var(--wf-color-text);
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-semibold, 600);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.wf-editor-tb-btn:hover {
+  background: var(--wf-color-bg-tertiary, #e5e7eb);
+}
+
+.wf-editor-tb-btn--active {
+  background: var(--wf-color-primary-light, #e0f2fe);
+  color: var(--wf-color-primary);
+}
+
+.wf-editor-tb-btn--active:hover {
+  background: var(--wf-color-primary-lighter, #bae6fd);
+}
+
+.wf-editor-tb-btn--link {
+  font-size: 14px;
+}
+
+.wf-editor-tb-sep {
+  display: inline-block;
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: var(--wf-color-border);
+}
+
+/* ── 编辑区 ────────────────────────────────────────── */
+
+.wf-editor-content {
+  padding: var(--wf-space-sm) var(--wf-space);
+  min-height: 200px;
+  outline: none;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  line-height: var(--wf-line-height);
+  color: var(--wf-color-text);
+  overflow-y: auto;
+}
+
+.wf-editor-content--disabled {
+  pointer-events: none;
+}
+
+.wf-editor-content--has-placeholder:empty::before {
+  content: attr(data-placeholder);
+  color: var(--wf-color-text-tertiary);
+  pointer-events: none;
+}
+
+/* 编辑区内部元素样式 */
+.wf-editor-content h1 {
+  font-size: var(--wf-font-size-2xl, 1.5rem);
+  font-weight: var(--wf-font-weight-bold, 700);
+  margin: 0.5em 0 0.25em;
+  line-height: 1.3;
+}
+
+.wf-editor-content h2 {
+  font-size: var(--wf-font-size-xl, 1.25rem);
+  font-weight: var(--wf-font-weight-bold, 700);
+  margin: 0.5em 0 0.25em;
+  line-height: 1.3;
+}
+
+.wf-editor-content h3 {
+  font-size: var(--wf-font-size-lg, 1.125rem);
+  font-weight: var(--wf-font-weight-semibold, 600);
+  margin: 0.4em 0 0.2em;
+  line-height: 1.3;
+}
+
+.wf-editor-content ul,
+.wf-editor-content ol {
+  padding-left: 1.5em;
+  margin: 0.25em 0;
+}
+
+.wf-editor-content li {
+  margin: 0.15em 0;
+}
+
+.wf-editor-content a {
+  color: var(--wf-color-primary);
+  text-decoration: underline;
+}
+
+.wf-editor-content blockquote {
+  margin: 0.5em 0;
+  padding: var(--wf-space-xs) var(--wf-space);
+  border-left: 3px solid var(--wf-color-primary);
+  background: var(--wf-color-bg-secondary, #f9fafb);
+  color: var(--wf-color-text-secondary);
+  font-style: italic;
+}
+
+.wf-editor-content hr {
+  border: none;
+  border-top: 1px solid var(--wf-color-border);
+  margin: 0.75em 0;
+}
+
+.wf-editor-content[style*="text-align: center"] {
+  text-align: center;
+}
+
+.wf-editor-content[style*="text-align: right"] {
+  text-align: right;
+}
+
+/* ── 源码模式 ──────────────────────────────────────── */
+
+.wf-editor-source {
+  display: block;
+  width: 100%;
+  min-height: 200px;
+  padding: var(--wf-space-sm) var(--wf-space);
+  border: none;
+  outline: none;
+  font-family: var(--wf-font-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);
+  font-size: var(--wf-font-size-sm);
+  line-height: 1.6;
+  color: var(--wf-color-text);
+  background: var(--wf-color-bg-secondary, #f9fafb);
+  resize: vertical;
+  tab-size: 2;
+}
+
+.wf-editor-source:focus {
+  background: var(--wf-color-bg);
+}
+
+/* ── 弹窗内输入框 ──────────────────────────────────── */
+
+.wf-editor-link-input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  padding: var(--wf-space-sm) var(--wf-space);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  outline: none;
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+}
+
+.wf-editor-link-input:focus {
+  border-color: var(--wf-color-primary);
+  box-shadow: var(--wf-focus-ring);
+}
+
+/* ── 图片上传区域 ──────────────────────────────────── */
+
+.wf-editor-img-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: var(--wf-space-lg) var(--wf-space);
+  cursor: pointer;
+  text-align: center;
+}
+
+.wf-editor-img-zone-icon {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.wf-editor-img-zone-text {
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+}
+
+.wf-editor-img-or {
+  display: block;
+  text-align: center;
+  color: var(--wf-color-text-tertiary);
+  font-size: var(--wf-font-size-sm);
+}
+
+/* 编辑区内图片 */
+.wf-editor-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--wf-radius-sm, 4px);
+  margin: 0.5em 0;
+}
+
+/* ── 编辑区内表格 ──────────────────────────────────── */
+
+.wf-editor-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.5em 0;
+  font-size: var(--wf-font-size-sm);
+}
+
+.wf-editor-table th,
+.wf-editor-table td {
+  border: 1px solid var(--wf-color-border);
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  vertical-align: top;
+  min-width: 40px;
+}
+
+.wf-editor-table tbody tr:nth-child(even) {
+  background: var(--wf-color-bg-secondary, #f9fafb);
+}
+
+/* ── 表格选择网格 ──────────────────────────────────── */
+
+.wf-editor-table-picker {
+  
+  z-index: 100;
+  background: var(--wf-color-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-space-sm);
+  box-shadow: var(--wf-shadow-lg, 0 4px 12px rgba(0,0,0,0.12));
+  /* 定位在工具栏下方 */
+}
+
+.wf-editor-table-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wf-editor-table-grid-row {
+  display: flex;
+  gap: 2px;
+}
+
+.wf-editor-table-grid-cell {
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--wf-color-border);
+  border-radius: 2px;
+  cursor: pointer;
+  background: var(--wf-color-bg);
+  transition: background 0.1s, border-color 0.1s;
+}
+
+.wf-editor-table-grid-cell:hover,
+.wf-editor-table-grid-cell--active {
+  background: var(--wf-color-primary-light, #e0f2fe);
+  border-color: var(--wf-color-primary);
+}
+
+.wf-editor-table-picker-label {
+  text-align: center;
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-secondary);
+  margin-top: var(--wf-space-xs);
+  padding-top: var(--wf-space-xs);
+  border-top: 1px solid var(--wf-color-border);
+}
+