@kayak-sj/design 1.0.0

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

@@ -0,0 +1,510 @@
+/// KForm — 全局样式（消费 CSS 变量，无硬编码色值）
+.k-form {
+  background: var(--k-form-bg);
+  padding: var(--k-form-padding-y) var(--k-form-padding-x);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+
+  /// 编辑/弹窗：Grid 多列 + 右对齐标签
+  &--grid-layout {
+    display: grid;
+    grid-template-columns: repeat(var(--k-form-cols, 2), minmax(0, 1fr));
+    column-gap: var(--k-form-grid-gap-x);
+    row-gap: 0;
+    padding: 4px var(--k-form-padding-x) 0;
+    align-items: start;
+
+    > .k-form__item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: var(--k-form-item-margin-bottom);
+      min-width: 0;
+      width: 100%;
+    }
+
+    .k-form__item--full-row {
+      grid-column: 1 / -1;
+    }
+
+    .el-form-item__label {
+      flex-shrink: 0;
+      height: auto;
+      min-height: var(--k-form-control-height);
+      line-height: var(--k-form-control-height);
+      padding-right: 8px;
+      text-align: right;
+      justify-content: flex-end;
+      color: var(--k-form-label-color);
+      white-space: nowrap;
+    }
+
+    .el-form-item__content {
+      flex: 1;
+      min-width: 0;
+      line-height: var(--k-form-control-height);
+    }
+
+    .k-form__item--choice {
+      .el-form-item__content {
+        min-height: var(--k-form-control-height);
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .k-form-radio .el-radio-group,
+    .k-form-checkbox .el-checkbox-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px 14px;
+      align-items: center;
+    }
+
+    /// RadioInput：选项与条件输入框须同一行（legacy 行为），禁止 radio 组换行
+    .k-form-radio-input .k-form-radio .el-radio-group {
+      flex-wrap: nowrap;
+    }
+
+    .k-form-input,
+    .k-form-select,
+    .k-form-date-picker,
+    .k-form-time-picker,
+    .k-select,
+    .k-input,
+    .k-tree-select,
+    .input-mix-select,
+    .el-select,
+    .el-tree-select,
+    .el-date-editor,
+    .el-cascader,
+    .k-datePicker {
+      max-width: var(--k-form-control-max-width);
+    }
+
+    .k-form-date-picker--datetimerange,
+    .k-form-date-picker:has(.el-date-editor--datetimerange) {
+      min-width: 0;
+      max-width: none;
+    }
+
+    .k-form-date-picker:has(.el-date-editor--datetimerange) .el-date-editor--datetimerange,
+    .k-form-date-picker--datetimerange .el-date-editor--datetimerange {
+      min-width: unset;
+      width: fit-content;
+    }
+
+    /// Upload / 卡片类不受表单控件最大宽度限制（旁挂提示、多图列表需要更宽）
+    .k-upload-wrap,
+    .k-upload {
+      max-width: none;
+    }
+
+    .el-form-item__content:has(.k-upload-wrap),
+    .el-form-item__content:has(.k-upload) {
+      max-width: none;
+      overflow: visible;
+    }
+
+    .el-form-item__content:has(.k-form-input-mix-select),
+    .el-form-item__content:has(.k-form-input-mix-input) {
+      flex: 0 1 auto;
+      min-width: 0;
+    }
+
+    .el-form-item__content:has(.el-date-editor--datetimerange),
+    .el-form-item__content:has(.k-form-date-picker--datetimerange) {
+      max-width: none;
+    }
+
+    .el-form-item__content:has(.k-editor) {
+      max-width: none;
+      line-height: normal;
+      overflow: visible;
+    }
+  }
+
+  /// 查询面板：按 colLength 分列，空间不足时自动换行
+  &--query-layout {
+    display: flex !important;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    gap: var(--k-form-query-row-gap) var(--k-form-query-gap);
+    background: transparent;
+    padding: var(--k-form-query-row-gap) var(--k-form-padding-x) 0;
+
+    > .k-form__item {
+      display: flex !important;
+      align-items: center;
+      flex-wrap: nowrap;
+      /// 固定列宽，保证 input / select 等控件宽度对齐
+      flex: 0 0 var(--k-form-query-col-width);
+      width: var(--k-form-query-col-width);
+      min-width: var(--k-form-query-col-width);
+      max-width: var(--k-form-query-col-width);
+      margin-bottom: 6px;
+      margin-right: 0;
+    }
+
+    /// Tag / Radio / Checkbox 按内容撑开；空间不足时整项换行，避免固定列宽溢出叠层
+    > .k-form__item--choice,
+    > .k-form__item:has(.k-form-tag) {
+      flex: 0 1 auto;
+      width: auto;
+      min-width: 0;
+      max-width: 100%;
+
+      .el-form-item__content {
+        flex: 0 1 auto;
+        min-width: 0;
+        max-width: 100%;
+      }
+    }
+
+    .k-form-tag {
+      flex-wrap: wrap;
+    }
+
+    /// 含时分秒的区间需要更宽
+    > .k-form__item:has(.el-date-editor--datetimerange) {
+      flex: 0 1 var(--k-form-query-range-col-width);
+      min-width: min(100%, var(--k-form-query-range-min-width));
+      max-width: var(--k-form-query-range-col-width);
+    }
+
+    /// 仅日期（无时分秒）的区间宽度可以稍窄
+    > .k-form__item:has(.el-date-editor--daterange),
+    > .k-form__item:has(.el-date-editor--monthrange) {
+      flex: 0 1 var(--k-form-query-daterange-col-width);
+      min-width: min(100%, var(--k-form-query-daterange-min-width));
+      max-width: var(--k-form-query-daterange-col-width);
+    }
+
+    .k-form__item--full-row {
+      flex: 1 1 100%;
+      max-width: none;
+    }
+
+    .el-form-item__label {
+      float: none;
+      flex-shrink: 0;
+      padding-right: 8px;
+      line-height: var(--k-form-control-height);
+      text-align: right;
+      justify-content: flex-end;
+      color: var(--k-form-label-color);
+    }
+
+    .el-form-item__content {
+      flex: 1;
+      min-width: 0;
+      line-height: var(--k-form-control-height);
+    }
+
+    .k-form-input,
+    .k-form-select,
+    .k-form-date-picker,
+    .k-form-time-picker,
+    .k-select,
+    .k-input,
+    .k-tree-select,
+    .input-mix-select,
+    .el-select,
+    .el-date-editor,
+    .el-cascader,
+    .k-datePicker {
+      width: 100%;
+      min-width: 0;
+      max-width: var(--k-form-control-max-width);
+    }
+
+    .k-form-date-picker--datetimerange,
+    .k-form-date-picker:has(.el-date-editor--datetimerange) {
+      min-width: 0;
+      max-width: none;
+    }
+
+    .k-form-date-picker:has(.el-date-editor--datetimerange) .el-date-editor--datetimerange,
+    .k-form-date-picker--datetimerange .el-date-editor--datetimerange {
+      min-width: unset;
+      width: fit-content;
+    }
+
+    .k-form-input,
+    .k-form-select,
+    .k-form-tree-select {
+      display: flex;
+      align-items: center;
+      height: var(--k-form-control-height);
+    }
+
+    .el-select {
+      flex: 1;
+      min-width: 0;
+      width: 100%;
+    }
+
+    .el-input__wrapper,
+    .el-select__wrapper {
+      min-height: var(--k-form-control-height);
+      height: var(--k-form-control-height);
+      box-sizing: border-box;
+    }
+  }
+
+  /// inline 横排（非 query-layout）
+  &--inline-layout:not(.k-form--query-layout) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px var(--k-form-query-gap);
+  }
+
+  &__item--readonly.el-form-item.el-form-item--small {
+    margin-bottom: 0;
+  }
+
+  .el-form-item {
+    &.el-form-item--small {
+      margin-bottom: var(--k-form-item-margin-bottom);
+    }
+
+    &__label {
+      font-size: var(--k-form-control-font-size);
+      font-weight: var(--k-font-weight-normal);
+      color: var(--k-form-label-color);
+    }
+
+    &__content {
+      .el-input-group {
+        vertical-align: middle;
+
+        &__append,
+        &__prepend {
+          padding: 0 10px;
+        }
+      }
+    }
+  }
+
+  &__readonly {
+    .el-form-item--small {
+      margin-bottom: 0;
+    }
+  }
+
+  /// 提示图标
+  &__tip-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    width: 12px;
+    height: 12px;
+    margin-right: 4px;
+    border: 1px solid currentColor;
+    border-radius: 50%;
+    font-size: 10px;
+    line-height: 1;
+    flex-shrink: 0;
+    cursor: help;
+    vertical-align: middle;
+    color: var(--k-color-text-secondary);
+    transition: color var(--k-transition-fast);
+
+    &:hover {
+      color: var(--k-color-primary);
+    }
+  }
+
+  .text__readonly,
+  .disabled-text {
+    color: var(--k-color-text-regular);
+    font-size: var(--k-font-size-base);
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+
+  .el-textarea__inner {
+    font-family: var(--k-font-family);
+    font-size: var(--k-form-control-font-size);
+    resize: none;
+    border-radius: var(--k-form-control-radius);
+  }
+
+  .el-textarea.is-disabled .el-textarea__inner {
+    background: var(--k-form-control-bg);
+    border: 0;
+    color: var(--k-color-text-regular);
+    padding-left: 0;
+  }
+
+  .el-date-editor {
+    min-width: 145px;
+
+    &.el-input,
+    &.el-input__inner {
+      width: 100%;
+    }
+  }
+
+  &:not(.k-form--grid-layout):not(.k-form--query-layout) {
+    .k-form-input,
+    .k-form-select,
+    .k-form-date-picker,
+    .k-form-time-picker,
+    .k-select,
+    .k-input,
+    .k-tree-select,
+    .input-mix-select,
+    .el-select,
+    .el-tree-select,
+    .el-date-editor,
+    .el-cascader,
+    .k-datePicker {
+      max-width: var(--k-form-control-max-width);
+    }
+
+    .k-form-date-picker--datetimerange,
+    .k-form-date-picker:has(.el-date-editor--datetimerange) {
+      min-width: 0;
+      max-width: none;
+    }
+
+    .k-form-date-picker:has(.el-date-editor--datetimerange) .el-date-editor--datetimerange,
+    .k-form-date-picker--datetimerange .el-date-editor--datetimerange {
+      min-width: unset;
+      width: fit-content;
+    }
+
+    .k-upload-wrap,
+    .k-upload {
+      max-width: none;
+    }
+
+    .el-form-item__content:has(.k-upload-wrap),
+    .el-form-item__content:has(.k-upload) {
+      max-width: none;
+      overflow: visible;
+    }
+
+    .el-form-item__content:has(.k-form-input-mix-select),
+    .el-form-item__content:has(.k-form-input-mix-input) {
+      flex: 0 1 auto;
+      min-width: 0;
+    }
+
+    .el-form-item__content:has(.el-date-editor--datetimerange),
+    .el-form-item__content:has(.k-form-date-picker--datetimerange) {
+      max-width: none;
+      align-items: flex-start;
+    }
+
+    .el-form-item__content:has(.k-editor) {
+      max-width: none;
+      line-height: normal;
+      overflow: visible;
+    }
+  }
+
+  .k-form-input[type='textarea'] {
+    max-width: var(--k-form-textarea-max-width);
+  }
+
+  .k-complex {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+
+    .k-input,
+    .k-select,
+    .k-select__readonly,
+    .disabled-text {
+      flex: 1 1 0;
+      min-width: 0;
+      max-width: none;
+    }
+  }
+
+  .el-cascader {
+    width: 100% !important;
+  }
+
+  .el-form-item.is-error {
+    .el-pagination,
+    .k-table-query {
+      .el-input__wrapper,
+      .el-textarea__inner {
+        box-shadow: 0 0 0 1px var(--el-border-color) inset;
+      }
+    }
+  }
+}
+
+.k-form-input,
+.k-form-select,
+.k-form-date-picker,
+.k-form-time-picker {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  &__side {
+    color: var(--k-color-text-regular);
+    // font-size: var(--k-font-size-base);
+    white-space: nowrap;
+  }
+
+  &__side--left {
+    margin-right: 10px;
+  }
+
+  &__side--right {
+    margin-left: 10px;
+  }
+
+  &__readonly {
+    color: var(--k-color-text-regular);
+    font-size: var(--k-form-control-font-size);
+  }
+
+  .el-input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .el-select {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+.k-form-tree-select {
+  width: 100%;
+
+  .el-tree-select {
+    width: 100%;
+  }
+}
+
+.k-datePicker {
+  &__hide__prefix {
+    .el-input__prefix {
+      pointer-events: none;
+      display: none;
+    }
+  }
+
+  .el-input__prefix {
+    right: 5px;
+    left: auto;
+  }
+
+  .el-input__wrapper {
+    padding-left: 15px;
+  }
+}

package/src/styles/components/_k-handle-page.scss

@@ -0,0 +1,108 @@
+.k-handle-page {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 100%;
+
+  /**
+   * 与 footer 对称：相对 AdminLayout el-scrollbar 吸顶。
+   * top 留出页边距；::before 遮住「页边距空隙」里往上钻的内容。
+   */
+  &__header {
+    position: sticky;
+    top: var(--k-handle-page-inset-y, var(--k-page-padding-y));
+    z-index: 11;
+    flex-shrink: 0;
+    background: var(--k-color-bg-surface);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: calc(-1 * var(--k-handle-page-inset-y, var(--k-page-padding-y)));
+      right: 0;
+      left: 0;
+      height: var(--k-handle-page-inset-y, var(--k-page-padding-y));
+      background: var(--k-color-bg-page);
+      pointer-events: none;
+    }
+  }
+
+  &__body {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    padding-bottom: var(--k-handle-page-footer-reserve, 32px);
+  }
+
+  /**
+   * loading 必须用绝对定位铺满 body，不能再用 sticky + 100svh + 负 margin：
+   * 后者会把 scrollHeight 多撑出约 padding-top，表现为「loading 时能滚一点、结束后假滚动条」。
+   */
+  &__loading {
+    position: absolute;
+    inset: 0;
+    z-index: 12;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--el-mask-color-extra-light);
+    pointer-events: all;
+  }
+
+  &__loading-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__loading-icon {
+    color: var(--el-color-primary);
+  }
+
+  &__loading-text {
+    font-size: 14px;
+    line-height: 1;
+    color: var(--el-color-primary);
+  }
+
+  &__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+
+    &--loading {
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
+  &-loading-enter-active,
+  &-loading-leave-active {
+    transition: opacity 0.2s ease;
+  }
+
+  &-loading-enter-from,
+  &-loading-leave-to {
+    opacity: 0;
+  }
+
+  &__footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    gap: var(--k-panel-query-footer-gap);
+    width: calc(100% + 2 * var(--k-handle-page-inset-x, var(--k-page-padding-x)));
+    margin-right: calc(-1 * var(--k-handle-page-inset-x, var(--k-page-padding-x)));
+    margin-left: calc(-1 * var(--k-handle-page-inset-x, var(--k-page-padding-x)));
+    padding: 12px var(--k-form-padding-x);
+    background: var(--k-color-bg-surface);
+    box-shadow: var(--k-shadow-md);
+  }
+}

package/src/styles/components/_k-link-button.scss

@@ -0,0 +1,70 @@
+/// KLinkButton — 全局样式（消费 CSS 变量）
+.k-link-button {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__btn {
+    color: var(--k-color-primary);
+    background: transparent;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    transition: color var(--k-transition-base);
+
+    &:hover {
+      color: var(--k-color-primary-hover);
+    }
+
+    &--success {
+      color: var(--el-color-success);
+
+      &:hover {
+        color: var(--k-color-success-hover);
+      }
+    }
+
+    &--warning {
+      color: var(--el-color-warning);
+
+      &:hover {
+        color: var(--k-color-warning-hover);
+      }
+    }
+
+    &--danger {
+      color: var(--el-color-danger);
+
+      &:hover {
+        color: var(--k-color-danger-hover);
+      }
+    }
+
+    &--info {
+      color: var(--el-color-info);
+
+      &:hover {
+        color: var(--k-color-info-hover);
+      }
+    }
+
+    &--readonly {
+      pointer-events: none;
+      color: var(--el-text-color-disabled);
+    }
+  }
+
+  &__divider {
+    display: inline-block;
+    width: 1px;
+    height: 8px;
+    margin: 0 4px 2px;
+    background: var(--k-color-border);
+  }
+}