next-ui3 1.5.5 → 1.5.7

package/theme-chalk/src/preview/audio.scss

@@ -1,63 +1,273 @@
+/** 默认浅色主题；`.nt-preview-audio--theme-dark` 内覆盖同色名变量为深色。 */
 .nt-preview-audio {
+  /* 水平内边距：外层 frame 与卡片与内容区左右对齐 */
+  --nt-audio-inset-x: 24px;
+  /* 垂直内边距：外层与卡片上下留白 */
+  --nt-audio-inset-y: 16px;
+  /* 主色：时间、播放/静音图标与按钮默认色 */
+  --nt-audio-color-text: #303133;
+  /* 轨道底色：进度未播段、音量滑条跑道 */
+  --nt-audio-color-rail: rgba(0, 0, 0, 0.18);
+  /* 已播进度、音量已选段 */
+  --nt-audio-color-played: #303133;
+  /* 进度与音量滑块的拖钮填充色 */
+  --nt-audio-color-thumb: #303133;
+  /* 加载失败等错误态图标 */
+  --nt-audio-color-error: #dc2626;
+  /* 可交互图标悬停时的前景色 */
+  --nt-audio-color-icon-hover: #000000;
+  /* 卡片背景（含渐变） */
+  --nt-audio-card-bg: #fff;
+  /* 卡片投影（双层叠加） */
+  --nt-audio-card-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.1),
+    0 1px 4px rgba(0, 0, 0, 0.06);
+
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  &__player {
+  &--theme-dark {
+    --nt-audio-color-text: #ffffff;
+    --nt-audio-color-rail: rgba(255, 255, 255, 0.32);
+    --nt-audio-color-played: #ffffff;
+    --nt-audio-color-thumb: #ffffff;
+    --nt-audio-color-error: #fca5a5;
+    --nt-audio-color-icon-hover: rgba(255, 255, 255, 0.92);
+    --nt-audio-card-bg: #606266;
+    --nt-audio-card-shadow:
+      0 10px 40px rgba(0, 0, 0, 0.35),
+      0 2px 10px rgba(0, 0, 0, 0.22);
+  }
+
+  &__frame {
+    width: 100%;
+    max-width: 720px;
+    padding: var(--nt-audio-inset-y) var(--nt-audio-inset-x);
+  }
+
+  &__card {
+    position: relative;
     width: 100%;
-    max-width: 600px;
-    padding: 20px;
+    border-radius: 10px;
+    overflow: hidden;
+    padding: var(--nt-audio-inset-y) var(--nt-audio-inset-x);
+    box-sizing: border-box;
+    background: var(--nt-audio-card-bg);
+    backdrop-filter: blur(10px);
+    box-shadow: var(--nt-audio-card-shadow);
+    transition: box-shadow 0.2s ease;
+  }
+
+  .nt-slider {
+    --nt-slider-color-rail: var(--nt-audio-color-rail);
+    --nt-slider-color-played: var(--nt-audio-color-played);
+    --nt-slider-color-thumb: var(--nt-audio-color-thumb);
   }
 
-  &__controls {
+  &__toolbar {
+    position: relative;
+    z-index: 0;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 12px;
+    padding: 10px 0 0;
+    // min-height: 44px;
+    overflow: visible;
   }
 
-  &__play-btn,
-  &__mute-btn {
-    display: inline-flex;
+  &__toolbar-leading {
+    display: flex;
     align-items: center;
-    justify-content: center;
+    gap: 10px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__toolbar-trailing {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    overflow: visible;
+  }
+
+  &__transport {
     flex-shrink: 0;
+    // width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__status-icon {
+    color: var(--nt-audio-color-text);
+
+    &--error {
+      color: var(--nt-audio-color-error);
+      cursor: pointer;
+    }
+  }
+
+  &__play {
+    // width: 36px;
+    height: 36px;
     padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border: none;
-    background: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--nt-audio-color-text);
     cursor: pointer;
-    color: var(--el-text-color-primary);
-    transition: color 0.2s ease;
+    transition:
+      color 0.2s ease,
+      opacity 0.2s ease,
+      transform 0.15s ease;
     outline: none;
 
-    &:hover {
-      color: var(--el-color-primary);
+    &:hover:not(:disabled) {
+      color: var(--nt-audio-color-icon-hover);
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.94);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.45;
+    }
+
+    .nt-icon {
+      font-size: 22px;
+      margin-left: -4px;
     }
   }
 
-  &__progress {
-    flex: 1;
+  &__clock {
+    font-size: 13px;
+    line-height: 1;
+    color: var(--nt-audio-color-text);
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      'SF Mono',
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      monospace;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: 'tnum' 1;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  &__sound {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    overflow: visible;
+
+    &:not(.nt-preview-audio__sound--disabled):hover,
+    &:not(.nt-preview-audio__sound--disabled):focus-within {
+      .nt-preview-audio__sound-expand {
+        max-width: 104px;
+        opacity: 1;
+        margin-right: 6px;
+        overflow: visible;
+        padding: 0 8px;
+        box-sizing: border-box;
+      }
+    }
 
-    .el-slider {
-      width: 100%;
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.45;
     }
   }
 
-  &__volume {
-    width: 80px;
+  &__sound-expand {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: none;
+    margin-right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  &__sound-slider.el-slider {
+    --el-slider-height: 4px;
+    --el-slider-button-wrapper-offset: -16px;
+
+    display: flex;
+    align-items: center;
+    flex: 0 0 88px;
+    width: 88px;
+    max-width: 88px;
+    margin: 0;
+    overflow: visible;
+
+    .el-slider__runway {
+      height: var(--el-slider-height);
+      margin: 0;
+      overflow: visible;
+      background-color: var(--nt-audio-color-rail);
+    }
 
-    .el-slider {
-      width: 100%;
+    .el-slider__bar {
+      height: var(--el-slider-height);
+      background-color: var(--nt-audio-color-played);
+    }
+
+    .el-slider__button {
+      width: 10px;
+      height: 10px;
+      border-width: 2px;
+      border-color: var(--nt-audio-color-thumb);
+      background-color: var(--nt-audio-color-thumb);
     }
   }
 
-  &__time {
-    font-size: 12px;
-    color: var(--el-text-color-secondary);
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
+  &__sound-mute {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     flex-shrink: 0;
+    // width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    color: var(--nt-audio-color-text);
+    transition: color 0.2s ease;
+    outline: none;
+
+    .nt-icon {
+      font-size: 22px;
+      margin-right: -2px;
+    }
+
+    &:hover:not(:disabled) {
+      color: var(--nt-audio-color-icon-hover);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.45;
+    }
   }
 }

package/theme-chalk/src/preview/index.scss

@@ -3,4 +3,5 @@
 @import './audio.scss';
 @import './video.scss';
 @import './text.scss';
+@import './markdown.scss';
 @import './document.scss';

package/theme-chalk/src/preview/markdown.scss

@@ -0,0 +1,153 @@
+/* 结构与 nt-preview-text 一致，独立 BEM 块供 Markdown 源码预览使用 */
+
+.nt-preview-markdown {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &--light {
+    background: #fff;
+
+    pre,
+    code {
+      background: #fff;
+      color: #24292e;
+    }
+  }
+
+  &--dark {
+    background: #1e1e1e;
+
+    pre,
+    code {
+      background: #1e1e1e;
+      color: #d4d4d4;
+    }
+
+    .nt-preview-markdown__toolbar {
+      border-bottom-color: #333;
+    }
+  }
+
+  &--wrap {
+    pre {
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    flex-shrink: 0;
+    padding-left: 10px;
+    min-height: 40px;
+    box-sizing: border-box;
+  }
+
+  &__language {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    text-transform: uppercase;
+  }
+
+  &__mode {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    text-transform: uppercase;
+
+    &-item {
+      cursor: pointer;
+      padding: 3px 6px;
+      border-radius: 3px;
+
+      &:hover {
+        background: var(--el-color-info-light-7);
+      }
+
+      &.is-active {
+        color: #fff;
+        background: var(--el-color-info-light-5);
+      }
+    }
+
+    &-item + &-item {
+      margin-left: 8px;
+    }
+  }
+
+  &__toolbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  &__switch-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
+  &__copy-button {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    font-weight: normal;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+  }
+
+  &__source {
+    pre {
+      margin: 0;
+      padding: 16px;
+      font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      tab-size: 2;
+    }
+
+    code {
+      font-family: inherit;
+    }
+  }
+  &__preview {
+    padding: 16px;
+  }
+
+  &__line-numbers {
+    counter-reset: line;
+
+    .line {
+      display: block;
+      width: 100%;
+      position: relative;
+      padding-left: 4em;
+      box-sizing: border-box;
+
+      &::before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        counter-increment: line;
+        content: counter(line);
+        display: inline-block;
+        width: 3em;
+        margin-right: 1em;
+        text-align: right;
+        color: var(--el-text-color-placeholder);
+        user-select: none;
+      }
+    }
+  }
+}

package/theme-chalk/src/preview/text.scss

@@ -66,6 +66,12 @@
     color: var(--el-text-color-secondary);
   }
 
+  &__copy-button {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    font-weight: normal;
+  }
+
   &__content {
     flex: 1;
     overflow: auto;