djm-ui 0.0.0-stage → 0.67.2

package/src/styles/components/demo.css

@@ -0,0 +1,432 @@
+/* DJM UI · 示例页通用样式 */
+
+/* ---------------- 组件示例通用 ---------------- */
+
+.djm-demo-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.djm-demo-panel {
+  background: var(--djm-surface);
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius-lg);
+  box-shadow: var(--djm-shadow-sm);
+  /* 不能裁剪：卡片里常有下拉、日期等浮层，overflow: hidden 会把面板切掉 */
+  overflow: visible;
+}
+
+/* 头部背景靠自身圆角贴合卡片，替代原来的 overflow 裁剪 */
+.djm-demo-panel > .djm-demo-head:first-child {
+  border-radius: calc(var(--djm-radius-lg) - 1px) calc(var(--djm-radius-lg) - 1px) 0 0;
+}
+
+.djm-demo-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 11px 14px;
+  border-bottom: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+}
+
+.djm-demo-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.djm-demo-desc {
+  margin-top: 3px;
+  font-size: 11.5px;
+  color: var(--djm-text-3);
+}
+
+.djm-demo-tag {
+  flex: none;
+  padding: 1px 6px;
+  border: 1px solid var(--djm-border);
+  border-radius: 3px;
+  background: var(--djm-surface);
+  color: var(--djm-text-3);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10.5px;
+}
+
+.djm-demo-pill {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--djm-brand-200);
+  border-radius: 3px;
+  background: var(--djm-surface-3);
+  color: var(--djm-brand-700);
+  font-size: 10.5px;
+  letter-spacing: 0.2px;
+}
+
+.djm-demo-body {
+  padding: 14px 16px;
+}
+
+.djm-demo-body.djm-is-tight {
+  padding: 0;
+}
+
+.djm-demo-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.djm-demo-row + .djm-demo-row {
+  margin-top: 14px;
+}
+
+/* 面包屑示例：点击反馈纵向排列 */
+.djm-crumb-demo {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+/* 面包屑示例：窄容器，用来看超长路径的换行与省略效果 */
+.djm-crumb-narrow {
+  width: 300px;
+  max-width: 100%;
+  padding: 8px 10px;
+  border: 1px dashed var(--djm-border-strong);
+  border-radius: var(--djm-radius);
+}
+
+/* 示例内联分隔线 */
+.djm-demo-split {
+  width: 1px;
+  height: 22px;
+  background: var(--djm-border);
+}
+
+/* 锚点示例：左侧内容右锚点，锚点跟随滚动固定 */
+.djm-anchor-demo {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 170px;
+  gap: 24px;
+}
+
+.djm-anchor-demo-aside {
+  position: sticky;
+  top: 4px;
+  align-self: start;
+}
+
+.djm-anchor-section + .djm-anchor-section {
+  margin-top: 22px;
+  padding-top: 18px;
+  border-top: 1px dashed var(--djm-border);
+}
+
+.djm-anchor-section h2 {
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.djm-anchor-section p {
+  margin: 0 0 6px;
+  font-size: 12.5px;
+  line-height: 1.8;
+  color: var(--djm-text-2);
+}
+
+@media (max-width: 720px) {
+  .djm-anchor-demo {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 固钉示例：吸顶工具条与下方列表 */
+.djm-affix-demo-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--djm-border);
+}
+
+.djm-affix-demo-list {
+  padding: 4px 14px 8px;
+}
+
+.djm-affix-demo-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--djm-border);
+  font-size: 12.5px;
+}
+
+.djm-affix-demo-row:last-child {
+  border-bottom: 0;
+}
+
+/* 水印示例：被覆盖的内容块 */
+.djm-watermark-demo {
+  width: 100%;
+  min-height: 120px;
+  padding: 14px 16px;
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius-lg);
+  background: var(--djm-surface-2);
+  font-size: 12.5px;
+  line-height: 1.9;
+  color: var(--djm-text-2);
+}
+
+.djm-watermark-demo strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 13px;
+  color: var(--djm-text);
+}
+
+/* 分隔面板示例：两栏内容 */
+.djm-splitter-demo-pane {
+  padding: 12px 14px;
+  font-size: 12.5px;
+  line-height: 1.8;
+  color: var(--djm-text-2);
+}
+
+.djm-splitter-demo-pane strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 13px;
+  color: var(--djm-text);
+}
+
+.djm-splitter-demo-pane p {
+  margin: 0 0 4px;
+}
+
+/* 布局容器示例：固定高度画个页面骨架 */
+.djm-layout-demo {
+  height: 260px;
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius-lg);
+  overflow: hidden;
+}
+
+.djm-layout-demo-nav {
+  padding: 7px 8px;
+  border-radius: 3px;
+  font-size: 12.5px;
+  color: var(--djm-text-2);
+}
+
+.djm-layout-demo-nav.djm-is-active {
+  background: var(--djm-brand-50);
+  color: var(--djm-brand-700);
+  font-weight: 600;
+}
+
+/* 二维码示例：图与说明纵向排列 */
+.djm-qrcode-demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 加载遮罩示例：被包裹的内容块 */
+.djm-spin-demo {
+  width: 340px;
+  max-width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius-lg);
+  background: var(--djm-surface-2);
+}
+
+/* 示例网格：并排演示三块内容 */
+.djm-demo-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+/* 菜单示例：侧边布局 */
+.djm-menu-demo {
+  display: flex;
+  align-items: stretch;
+  min-height: 260px;
+}
+
+.djm-menu-demo-side {
+  flex: none;
+  width: 200px;
+  padding: 8px;
+  border-right: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+  transition: width 0.18s;
+}
+
+.djm-menu-demo-side.djm-is-collapsed {
+  width: 56px;
+}
+
+.djm-menu-demo-main {
+  flex: 1;
+  min-width: 0;
+  padding: 12px 14px;
+}
+
+/* 菜单示例：顶部导航条 */
+.djm-menu-demo-top {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 6px 10px;
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius-lg);
+  background: var(--djm-surface-2);
+}
+
+.djm-menu-demo-brand {
+  flex: none;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--djm-text);
+}
+
+.djm-demo-label {
+  width: 56px;
+  flex: none;
+  font-size: 11.5px;
+  color: var(--djm-text-3);
+}
+
+.djm-demo-note {
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--djm-text-2);
+}
+
+.djm-demo-note strong {
+  display: block;
+  margin-bottom: 3px;
+  font-size: 13px;
+  color: var(--djm-text);
+}
+
+.djm-demo-note p {
+  margin: 0;
+}
+
+.djm-demo-note code {
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--djm-surface-3);
+  color: var(--djm-brand-700);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11.5px;
+}
+
+.djm-demo-grid-2 {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 16px;
+  /* 两列等高，卡片、结果页并排时底边才对得齐 */
+  align-items: stretch;
+}
+
+.djm-demo-kv {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.djm-demo-kv > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border: 1px solid var(--djm-border);
+  border-radius: 4px;
+  background: var(--djm-surface-2);
+  font-size: 11.5px;
+  color: var(--djm-text-3);
+}
+
+.djm-demo-kv b {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--djm-text);
+}
+
+.djm-demo-kv.djm-is-wide {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.djm-demo-log {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11.5px;
+  color: var(--djm-text-2);
+}
+
+.djm-demo-log span {
+  margin-right: 8px;
+  color: var(--djm-text-3);
+}
+
+.djm-demo-request {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+  font-size: 11.5px;
+  color: var(--djm-text-3);
+}
+
+.djm-demo-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px dashed var(--djm-border);
+}
+
+.djm-demo-alerts {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.djm-text-warn {
+  color: var(--djm-amber) !important;
+}
+
+.djm-text-danger {
+  color: var(--djm-red) !important;
+}
+
+.djm-tab-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 42px 16px;
+  font-size: 12px;
+  color: var(--djm-text-3);
+}

package/src/styles/components/descriptions.css

@@ -0,0 +1,45 @@
+/* DJM UI · 描述列表 */
+
+/* ---------------- 描述列表 ---------------- */
+
+.djm-descriptions {
+  display: grid;
+  grid-template-columns: repeat(var(--djm-desc-columns, 2), minmax(0, 1fr));
+  gap: 10px 24px;
+  margin: 0;
+  padding: 0;
+}
+
+.djm-desc-item {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+
+.djm-desc-label {
+  flex: none;
+  width: var(--djm-desc-label-w, 72px);
+  color: var(--djm-text-3);
+}
+
+.djm-desc-value {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  color: var(--djm-text);
+  word-break: break-word;
+}
+
+/* 超长内容（如导出参数）保持换行，不撑破抽屉 */
+.djm-desc-value .djm-mono {
+  font-size: 12px;
+}
+
+@media (max-width: 900px) {
+  .djm-descriptions {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/src/styles/components/diff.css

@@ -0,0 +1,178 @@
+/* 差异对比：统一视图与并排视图共用配色 */
+
+.djm-diff {
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius-lg);
+  background: var(--djm-surface);
+  overflow: hidden;
+  font-size: 12.5px;
+}
+
+.djm-diff-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+}
+
+.djm-diff-stat {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.djm-diff-stat.djm-is-add {
+  color: var(--djm-green);
+}
+
+.djm-diff-stat.djm-is-remove {
+  color: var(--djm-red);
+}
+
+.djm-diff-same {
+  color: var(--djm-text-3);
+}
+
+/* ---------------- 统一视图 ---------------- */
+
+.djm-diff-body {
+  max-height: 520px;
+  overflow: auto;
+  font-family: var(--djm-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+}
+
+.djm-diff-line {
+  display: flex;
+  align-items: flex-start;
+  min-height: 22px;
+  line-height: 22px;
+  white-space: pre;
+}
+
+.djm-diff-line.djm-is-add {
+  background: var(--djm-green-bg);
+}
+
+.djm-diff-line.djm-is-remove {
+  background: var(--djm-red-bg);
+}
+
+/* 行号列固定宽度，避免行数变化时抖动 */
+.djm-diff-no {
+  flex: none;
+  width: 44px;
+  padding-right: 8px;
+  text-align: right;
+  color: var(--djm-text-3);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.djm-diff-sign {
+  flex: none;
+  width: 18px;
+  text-align: center;
+  color: var(--djm-text-3);
+  user-select: none;
+}
+
+.djm-diff-line.djm-is-add .djm-diff-sign {
+  color: var(--djm-green);
+}
+
+.djm-diff-line.djm-is-remove .djm-diff-sign {
+  color: var(--djm-red);
+}
+
+.djm-diff-text {
+  flex: 1;
+  min-width: 0;
+  padding-right: 12px;
+  font-family: inherit;
+  color: var(--djm-text);
+}
+
+/* 折叠行 */
+.djm-diff-skip {
+  display: block;
+  width: 100%;
+  height: 24px;
+  border: 0;
+  border-top: 1px solid var(--djm-border);
+  border-bottom: 1px solid var(--djm-border);
+  background: var(--djm-surface-3);
+  color: var(--djm-brand-600);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.djm-diff-skip:hover {
+  background: var(--djm-brand-soft);
+}
+
+/* ---------------- 并排视图 ---------------- */
+
+.djm-diff-split {
+  max-height: 520px;
+  overflow: auto;
+  font-family: var(--djm-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+}
+
+.djm-diff-split-head {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+  font-family: var(--djm-font-sans, inherit);
+  font-size: 12px;
+  color: var(--djm-text-3);
+}
+
+.djm-diff-split-head > span {
+  padding: 5px 12px;
+}
+
+.djm-diff-split-head > span + span {
+  border-left: 1px solid var(--djm-border);
+}
+
+.djm-diff-split-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.djm-diff-side {
+  display: flex;
+  align-items: flex-start;
+  min-height: 22px;
+  line-height: 22px;
+  white-space: pre;
+  border-left: 1px solid var(--djm-border);
+  overflow: hidden;
+}
+
+.djm-diff-side:first-child {
+  border-left: 0;
+}
+
+.djm-diff-side.djm-is-add {
+  background: var(--djm-green-bg);
+}
+
+.djm-diff-side.djm-is-remove {
+  background: var(--djm-red-bg);
+}
+
+/* 配对时一侧没有内容，留空占位 */
+.djm-diff-side.djm-is-empty {
+  background: var(--djm-surface-3);
+}
+
+.djm-diff-split-skip {
+  grid-column: 1 / -1;
+}
+
+.djm-diff-side .djm-diff-no {
+  width: 36px;
+}

package/src/styles/components/divider.css

@@ -0,0 +1,32 @@
+/* DJM UI · 分割线 */
+
+/* 横向：默认一条线，带文字时中间留空 */
+.djm-divider.djm-is-horizontal {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: auto;
+  margin: 14px 0;
+  background: none;
+  font-size: 12px;
+  color: var(--djm-text-3);
+}
+
+.djm-divider.djm-is-horizontal::before,
+.djm-divider.djm-is-horizontal.djm-is-text::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--djm-border);
+}
+
+/* 竖向：跟文字行高对齐，用于行内分隔 */
+.djm-divider.djm-is-vertical {
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  margin: 0 8px;
+  vertical-align: -0.15em;
+  background: var(--djm-border);
+}