@kayak-sj/design 1.0.0

package/src/styles/components/_k-dialog.scss

@@ -0,0 +1,441 @@
+/// KDialog / ElDialog — 全局样式（消费 CSS 变量）
+.el-dialog {
+  max-height: 95vh;
+  overflow: auto;
+}
+
+// KDialog 固定头尾，仅内容区滚动，避免长内容把底部操作按钮推到视口外。
+// 视觉与 hero 变体同源（品牌细线 / 圆角壳 / 渐变主按钮），但消费主题令牌，跟随 data-theme 变化。
+.k-dialog.el-dialog {
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  overflow: hidden;
+  border-radius: var(--k-dialog-radius);
+  box-shadow: 0 12px 32px rgba(15, 42, 84, 0.14);
+
+  // 顶部品牌细线：主色 → 透明，与登录弹窗（hero）呼应
+  &::before {
+    content: '';
+    display: block;
+    flex: none;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      var(--k-color-primary) 0%,
+      color-mix(in srgb, var(--k-color-primary) 45%, var(--k-color-bg-surface)) 55%,
+      transparent 100%
+    );
+  }
+
+  .el-dialog__header,
+  .el-dialog__footer {
+    flex: none;
+  }
+
+  .el-dialog__header {
+    padding: 18px 52px 14px 24px;
+    background: linear-gradient(180deg, var(--k-color-primary-alpha-04) 0%, transparent 100%);
+  }
+
+  .el-dialog__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--k-color-text);
+    letter-spacing: 0.02em;
+
+    // 标题前的小竖条：呼应 hero 图标徽章的品牌落点
+    &::before {
+      content: '';
+      flex: none;
+      width: 4px;
+      height: 16px;
+      border-radius: 4px;
+      background: linear-gradient(180deg, var(--k-color-primary-hover) 0%, var(--k-color-primary) 100%);
+    }
+  }
+
+  .el-dialog__headerbtn {
+    top: 15px;
+    right: 15px;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    z-index: 2;
+    transition: background-color 0.2s ease-out;
+
+    &:hover {
+      background: var(--k-color-bg-hover);
+    }
+
+    .el-dialog__close {
+      color: var(--k-color-text-secondary);
+      font-size: 16px;
+    }
+
+    &:hover .el-dialog__close {
+      color: var(--k-color-text);
+    }
+  }
+
+  .el-dialog__body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    padding-right: 0;
+    overflow: hidden;
+  }
+
+  .k-dialog__body {
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .el-dialog__footer {
+    padding: 12px 24px 18px;
+    border-top: 1px solid color-mix(in srgb, var(--k-color-border-light) 65%, transparent);
+
+    .el-button {
+      height: 34px;
+      min-width: 80px;
+      padding: 0 20px;
+      border-radius: 9px;
+      font-weight: 500;
+    }
+
+    .el-button--primary {
+      border: none;
+      background: linear-gradient(135deg, var(--k-color-primary-hover) 0%, var(--k-color-primary) 100%);
+      box-shadow: 0 4px 10px var(--k-color-primary-alpha-30-shadow);
+      transition:
+        transform 0.2s ease-out,
+        box-shadow 0.2s ease-out;
+
+      &:hover:not(.is-disabled):not(.is-loading) {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 14px var(--k-color-primary-alpha-30-shadow);
+      }
+
+      &:active:not(.is-disabled):not(.is-loading) {
+        transform: translateY(0);
+      }
+    }
+  }
+}
+
+// —— ElMessageBox：与 KDialog 同一设计语言（品牌细线 / 圆角壳 / 标题竖条 / 渐变主按钮）——
+.el-message-box {
+  padding: 0;
+  overflow: hidden;
+  border: none;
+  border-radius: var(--k-dialog-radius);
+  box-shadow:
+    0 20px 48px rgba(15, 42, 84, 0.16),
+    0 3px 12px rgba(15, 42, 84, 0.08);
+
+  &::before {
+    content: '';
+    display: block;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      var(--k-color-primary) 0%,
+      color-mix(in srgb, var(--k-color-primary) 45%, var(--k-color-bg-surface)) 55%,
+      transparent 100%
+    );
+  }
+
+  .el-message-box__header {
+    padding: 16px 52px 10px 24px;
+    background: linear-gradient(180deg, var(--k-color-primary-alpha-04) 0%, transparent 100%);
+  }
+
+  .el-message-box__title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--k-color-text);
+    letter-spacing: 0.02em;
+
+    &::before {
+      content: '';
+      flex: none;
+      width: 4px;
+      height: 16px;
+      border-radius: 4px;
+      background: linear-gradient(180deg, var(--k-color-primary-hover) 0%, var(--k-color-primary) 100%);
+    }
+  }
+
+  &.el-message-box--center .el-message-box__title::before {
+    display: none;
+  }
+
+  .el-message-box__headerbtn {
+    top: 13px;
+    right: 15px;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    transition: background-color 0.2s ease-out;
+
+    &:hover {
+      background: var(--k-color-bg-hover);
+    }
+
+    .el-message-box__close {
+      color: var(--k-color-text-secondary);
+      font-size: 16px;
+    }
+
+    &:hover .el-message-box__close {
+      color: var(--k-color-text);
+    }
+  }
+
+  .el-message-box__content {
+    padding: 12px 24px 8px;
+    color: var(--k-color-text-regular);
+  }
+
+  .el-message-box__container {
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .el-message-box__status {
+    font-size: 20px;
+  }
+
+  .el-message-box__message {
+    line-height: 1.6;
+  }
+
+  .el-message-box__input {
+    padding-top: 12px;
+  }
+
+  .el-message-box__btns {
+    padding: 14px 24px 20px;
+    border-top: 1px solid color-mix(in srgb, var(--k-color-border-light) 65%, transparent);
+    margin-top: 10px;
+
+    .el-button {
+      height: 34px;
+      min-width: 80px;
+      padding: 0 20px;
+      border-radius: 9px;
+      font-weight: 500;
+    }
+
+    .el-button--primary {
+      border: none;
+      background: linear-gradient(135deg, var(--k-color-primary-hover) 0%, var(--k-color-primary) 100%);
+      box-shadow: 0 4px 10px var(--k-color-primary-alpha-30-shadow);
+      transition:
+        transform 0.2s ease-out,
+        box-shadow 0.2s ease-out;
+
+      &:hover:not(.is-disabled):not(.is-loading) {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 14px var(--k-color-primary-alpha-30-shadow);
+      }
+
+      &:active:not(.is-disabled):not(.is-loading) {
+        transform: translateY(0);
+      }
+    }
+  }
+}
+
+// —— hero 变体：圆角壳 + 品牌细线 + 图标头部 + 强化主按钮（消费主题令牌） ——
+.k-dialog--hero.el-dialog {
+  --k-dialog-hero-accent: var(--k-color-primary);
+  --k-dialog-hero-accent-deep: var(--k-color-primary-active);
+  --k-dialog-hero-ink: var(--k-color-text);
+
+  padding: 0;
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--k-color-bg-surface);
+  box-shadow: var(--k-shadow-lg);
+
+  &::before {
+    content: '';
+    display: block;
+    flex: none;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      var(--k-dialog-hero-accent) 0%,
+      color-mix(in srgb, var(--k-dialog-hero-accent) 55%, var(--k-color-bg-surface)) 52%,
+      transparent 100%
+    );
+  }
+
+  .el-dialog__header {
+    padding: 0;
+    margin: 0;
+    position: relative;
+  }
+
+  .el-dialog__headerbtn {
+    top: 15px;
+    right: 15px;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    z-index: 2;
+    transition: background-color 0.2s ease-out;
+
+    &:hover {
+      background: var(--k-color-bg-hover);
+    }
+
+    .el-dialog__close {
+      color: var(--k-color-text-secondary);
+      font-size: 16px;
+    }
+
+    &:hover .el-dialog__close {
+      color: var(--k-dialog-hero-ink);
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  .k-dialog__body {
+    padding: 16px 28px 4px;
+  }
+
+  .el-dialog__footer {
+    padding: 12px 28px 22px;
+    border-top: none;
+
+    .el-button {
+      height: 38px;
+      min-width: 92px;
+      padding: 0 24px;
+      border-radius: 10px;
+      font-weight: 500;
+    }
+
+    .el-button--primary {
+      border: none;
+      background: linear-gradient(135deg, var(--k-color-primary-hover) 0%, var(--k-dialog-hero-accent-deep) 100%);
+      box-shadow: 0 6px 14px var(--k-color-primary-alpha-30-shadow);
+      transition:
+        transform 0.2s ease-out,
+        box-shadow 0.2s ease-out;
+
+      &:hover:not(.is-disabled):not(.is-loading) {
+        transform: translateY(-1px);
+        box-shadow: 0 8px 18px var(--k-color-primary-alpha-30-shadow);
+      }
+
+      &:active:not(.is-disabled):not(.is-loading) {
+        transform: translateY(0);
+      }
+    }
+  }
+}
+
+// —— KDialogHeader：图标徽章 + 标题 + 副标题 ——
+.k-dialog-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 26px 52px 20px 28px;
+  background:
+    radial-gradient(120% 140% at 12% 0%, var(--k-color-primary-alpha-10) 0%, transparent 58%),
+    linear-gradient(180deg, var(--k-color-primary-alpha-04) 0%, var(--k-color-bg-surface) 100%);
+  animation: k-dialog-header-rise 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+
+  &__badge {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    border-radius: 12px;
+    color: #fff;
+    background: linear-gradient(140deg, var(--k-color-primary-hover) 0%, var(--k-color-primary) 100%);
+    box-shadow:
+      0 6px 14px var(--k-color-primary-alpha-30-shadow),
+      inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
+  }
+
+  &__icon {
+    width: 22px;
+    height: 22px;
+    display: block;
+  }
+
+  &__text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--k-color-text);
+    letter-spacing: 0.02em;
+  }
+
+  &__desc {
+    margin: 4px 0 0;
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--k-color-text-secondary);
+  }
+
+  &__extra {
+    flex: none;
+    margin-left: auto;
+  }
+}
+
+@keyframes k-dialog-header-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .k-dialog-header {
+    animation: none;
+  }
+
+  .k-dialog.el-dialog .el-dialog__footer .el-button--primary,
+  .el-message-box .el-message-box__btns .el-button--primary {
+    transition: none;
+
+    &:hover:not(.is-disabled):not(.is-loading) {
+      transform: none;
+    }
+  }
+}

package/src/styles/components/_k-echarts.scss

@@ -0,0 +1,3 @@
+.k-echarts {
+  width: 100%;
+}

package/src/styles/components/_k-editor.scss

@@ -0,0 +1,6 @@
+/// KEditor — 主题色等全局补充（结构/全屏样式在组件 scoped 内）
+.k-editor {
+  &__shell {
+    border-color: var(--el-border-color);
+  }
+}