@blueking/ai-ui-sdk 0.3.0-beta.2 → 0.3.0-beta.4

package/dist/css/g-utilities.css

@@ -0,0 +1,920 @@
+.\!g-bg-white {
+  background-color: #fff !important;
+}
+
+.\!g-block {
+  display: block !important;
+}
+
+.\!g-cursor-pointer {
+  cursor: pointer !important;
+}
+
+.\!g-disabled {
+  cursor: not-allowed !important;
+  color: #dcdee5 !important;
+
+  &.bk-button-primary:not(.is-text) {
+    background-color: #dcdee5 !important;
+    color: #fff !important;
+    border-color: #dcdee5 !important;
+  }
+
+  &.bk-button:not(.is-text) {
+    color: var(--disable-color) !important;
+    border-color: var(--disable-color) !important;
+    background-color: var(--disable-bg-color) !important;
+  }
+
+  .bkaidev-icon {
+    color: #c4c6cc !important;
+  }
+
+  .g-disabled-text {
+    color: #dcdee5 !important;
+  }
+}
+
+.\!g-h-32 {
+  height: 32px !important;
+}
+
+.\!g-h-full {
+  height: 100% !important;
+}
+
+.\!g-hidden {
+  display: none !important;
+}
+
+.\!g-inline-block {
+  display: inline-block !important;
+}
+
+.\!g-items-center {
+  align-items: center !important;
+}
+
+.\!g-items-start {
+  align-items: flex-start !important;
+}
+
+.\!g-justify-between {
+  justify-content: space-between !important;
+}
+
+.\!g-mb-10 {
+  margin-bottom: 10px !important;
+}
+
+.\!g-mb-16 {
+  margin-bottom: 16px !important;
+}
+
+.\!g-mr-12 {
+  margin-right: 12px !important;
+}
+
+.\!g-mt-16 {
+  margin-top: 16px !important;
+}
+
+.\!g-no-validate-form-item {
+  > .bk-form-label::after {
+    content: '' !important;
+  }
+}
+
+.\!g-pl-24 {
+  padding-left: 24px !important;
+}
+
+.\!g-pl-5 {
+  padding-left: 5px !important;
+}
+
+.\!g-pl-6 {
+  padding-left: 6px !important;
+}
+
+.\!g-pr-5 {
+  padding-right: 5px !important;
+}
+
+.\!g-pr-6 {
+  padding-right: 6px !important;
+}
+
+.\!g-self-center {
+  align-self: center !important;
+}
+
+.\!g-self-start {
+  align-self: flex-start !important;
+}
+
+.\!g-text-12 {
+  font-size: 12px !important;
+}
+
+.\!g-text-18 {
+  font-size: 18px !important;
+}
+
+.\!g-text-white {
+  color: #fff !important;
+}
+
+.\!g-w-220 {
+  width: 220px !important;
+}
+
+.\!g-w-full {
+  width: 100% !important;
+}
+
+.g-absolute {
+  position: absolute;
+}
+
+.g-border-radio-100 {
+  border-radius: 100%;
+}
+
+.g-confirm {
+  .bk-pop-confirm-title {
+    padding-bottom: 6px;
+    line-height: 24px;
+    font-size: 16px;
+    color: #313238;
+  }
+
+  .bk-pop-confirm-content {
+    color: #4d4f56;
+    line-height: 20px;
+    padding-bottom: 8px;
+  }
+}
+
+.g-confirm-delete {
+  .bk-button-primary {
+    background-color: #ea3636;
+    border-color: #ea3636;
+  }
+
+  &.bk-popover.bk-pop2-content {
+    padding: 13px;
+
+    .bk-pop-confirm-title {
+      text-align: left;
+    }
+  }
+}
+
+.g-cursor-grab {
+  cursor: grab;
+}
+
+.g-deleted-resource {
+  .g-resource-main, .g-resource-description {
+    opacity: .45;
+  }
+
+  .g-resource-name {
+    text-decoration: line-through;
+  }
+}
+
+.g-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.g-exception {
+  &.bk-exception-part .bk-exception-description {
+    margin-top: 0;
+  }
+
+  &.bk-exception-page .bk-exception-description {
+    margin-top: -36px;
+  }
+
+  .bk-exception-title {
+    margin-top: -10px;
+    margin-bottom: 20px;
+  }
+
+  .bk-exception-description {
+    margin-bottom: 8px;
+    white-space: pre-wrap;
+  }
+
+  .bk-exception-footer {
+    margin-top: 0;
+
+    &:has(.bk-exception-description) {
+      text-align: left;
+    }
+  }
+
+  .exception-image {
+    width: 300%;
+  }
+}
+
+.g-flex {
+  display: flex;
+}
+
+.g-flex-1 {
+  flex: 1;
+}
+
+.g-flex-col {
+  flex-direction: column;
+}
+
+.g-flex-main-text {
+  flex: 1;
+  width: 0;
+}
+
+.g-flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.g-flex-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  width: 0;
+}
+
+.g-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.g-float-left {
+  float: left;
+}
+
+.g-font-bold {
+  font-weight: bold;
+}
+
+.g-font-normal {
+  font-weight: normal;
+}
+
+.g-gap {
+  display: inline-block;
+  width: 1px;
+  height: 14px;
+  background-color: #c4c6cc;
+}
+
+.g-gap-4 {
+  gap: 4px;
+}
+
+.g-gray-header-table {
+  .bk-table-head {
+    th {
+      background-color: #f0f1f5;
+      border-color: #f0f1f5;
+    }
+  }
+}
+
+.g-h-16 {
+  height: 16px;
+}
+
+.g-h-56 {
+  height: 56px;
+}
+
+.g-h-70 {
+  height: 70px;
+}
+
+.g-hidden {
+  display: none;
+}
+
+.g-inline-flex-row {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.g-items-center {
+  align-items: center;
+}
+
+.g-justify-center {
+  justify-content: center;
+}
+
+.g-justify-end {
+  justify-content: end;
+}
+
+.g-last-form-item {
+  margin: 0;
+}
+
+.g-leading-16 {
+  line-height: 16px;
+}
+
+.g-leading-20 {
+  line-height: 20px;
+}
+
+.g-leading-22 {
+  line-height: 22px;
+}
+
+.g-leading-24 {
+  line-height: 24px;
+}
+
+.g-leading-28 {
+  line-height: 28px;
+}
+
+.g-leading-32 {
+  line-height: 32px;
+}
+
+.g-max-h-80vh {
+  max-height: 80vh;
+}
+
+.g-max-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.g-max-w-400 {
+  max-width: 400px;
+}
+
+.g-mb-1 {
+  margin-bottom: 1px;
+}
+
+.g-mb-12 {
+  margin-bottom: 12px;
+}
+
+.g-mb-14 {
+  margin-bottom: 14px;
+}
+
+.g-mb-2 {
+  margin-bottom: 2px;
+}
+
+.g-mb-20 {
+  margin-bottom: 20px;
+}
+
+.g-mb-24 {
+  margin-bottom: 24px;
+}
+
+.g-mb-4 {
+  margin-bottom: 4px;
+}
+
+.g-mb-40 {
+  margin-bottom: 40px;
+}
+
+.g-mb-6 {
+  margin-bottom: 6px;
+}
+
+.g-mb-8 {
+  margin-bottom: 8px;
+}
+
+.g-min-w-16 {
+  min-width: 16px;
+}
+
+.g-ml-10 {
+  margin-left: 10px;
+}
+
+.g-ml-12 {
+  margin-left: 12px;
+}
+
+.g-ml-14 {
+  margin-left: 14px;
+}
+
+.g-ml-16 {
+  margin-left: 16px;
+}
+
+.g-ml-2 {
+  margin-left: 2px;
+}
+
+.g-ml-24 {
+  margin-left: 24px;
+}
+
+.g-ml-4 {
+  margin-left: 4px;
+}
+
+.g-ml-6 {
+  margin-left: 6px;
+}
+
+.g-ml-8 {
+  margin-left: 8px;
+}
+
+.g-more-menu {
+  padding: 4px 0;
+  border: 1px solid #dcdee5;
+  box-shadow: 0 2px 6px 0 #0000001a;
+  border-radius: 2px;
+
+  li {
+    font-size: 12px;
+    color: #4d4f56;
+    line-height: 32px;
+    cursor: pointer;
+    padding: 0 12px;
+
+    &:has(:nth-child(1)) {
+      padding: 0;
+    }
+
+    >:nth-child(1) {
+      width: 100%;
+      height: 32px;
+      padding: 0 12px;
+      line-height: 32px;
+      text-align: left;
+      justify-content: flex-start;
+    }
+
+    &:hover {
+      background: #f5f7fa;
+    }
+  }
+}
+
+.g-mr-10 {
+  margin-right: 10px;
+}
+
+.g-mr-14 {
+  margin-right: 14px;
+}
+
+.g-mr-16 {
+  margin-right: 16px;
+}
+
+.g-mr-2 {
+  margin-right: 2px;
+}
+
+.g-mr-24 {
+  margin-right: 24px;
+}
+
+.g-mr-4 {
+  margin-right: 4px;
+}
+
+.g-mr-6 {
+  margin-right: 6px;
+}
+
+.g-mr-8 {
+  margin-right: 8px;
+}
+
+.g-mt-100 {
+  margin-top: 100px;
+}
+
+.g-mt-12 {
+  margin-top: 12px;
+}
+
+.g-mt-14 {
+  margin-top: 14px;
+}
+
+.g-mt-24 {
+  margin-top: 24px;
+}
+
+.g-mt-30 {
+  margin-top: 30px;
+}
+
+.g-mt-4 {
+  margin-top: 4px;
+}
+
+.g-mt-6 {
+  margin-top: 6px;
+}
+
+.g-mt-8 {
+  margin-top: 8px;
+}
+
+.g-no-permission-resource {
+  .g-resource-main {
+    opacity: .45;
+  }
+
+  &:hover {
+    border: 1px solid #dcdee5;
+  }
+}
+
+.g-number-font {
+  font-family: Arial, 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.g-p-12 {
+  padding: 12px;
+}
+
+.g-p-2 {
+  padding: 2px;
+}
+
+.g-pb-14 {
+  padding-bottom: 14px;
+}
+
+.g-pb-20 {
+  padding-bottom: 20px;
+}
+
+.g-pb-8 {
+  padding-bottom: 8px;
+}
+
+.g-permission-cursor-element {
+  mask-image: url('../assets/svg/lock.svg?inline');
+  height: 16px;
+  width: 12px;
+}
+
+.g-pl-8 {
+  padding-left: 8px;
+}
+
+.g-pr-24 {
+  padding-right: 24px;
+}
+
+.g-pr-8 {
+  padding-right: 8px;
+}
+
+.g-pt-12 {
+  padding-top: 12px;
+}
+
+.g-pt-14 {
+  padding-top: 14px;
+}
+
+.g-radio-group {
+  width: 100%;
+
+  .bk-radio-button {
+    width: 100%;
+
+    .bkaidev-icon {
+      font-size: 14px;
+      margin-right: 2px;
+      color: #979ba5;
+    }
+
+    .g-radio-tips {
+      border-bottom: 1px dashed #979ba5;
+    }
+
+    &.is-checked {
+      .bk-radio-button-label {
+        background: #e1ecff;
+        border-color: #3a84ff;
+        color: #3a84ff;
+      }
+
+      .g-radio-tips {
+        border-bottom: 1px dashed #3a84ff;
+      }
+
+      .bkaidev-icon,
+      .ai-ui-sdk-icon {
+        color: #3a84ff;
+      }
+    }
+  }
+}
+
+.g-relative {
+  position: relative;
+}
+
+.g-rotate-infinite {
+  animation: rotate 2s linear infinite;
+}
+
+.g-rounded-2 {
+  border-radius: 2px;
+}
+
+.g-scrollbar {
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
+    background-color: #dcdee5;
+
+    &:hover {
+      background-color: #979ba5;
+    }
+  }
+}
+
+.g-scrollbar-page {
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    width: 8px;
+    height: 8px;
+    border-radius: 3px;
+    background-color: #dcdee5;
+
+    &:hover {
+      background-color: #979ba5;
+    }
+  }
+}
+
+.g-short-form {
+  .form-item {
+    margin-bottom: 16px;
+  }
+}
+
+.g-show-dialog {
+  min-width: 1304px;
+
+  .bk-dialog-header {
+    height: 0;
+    padding: 0;
+    visibility: hidden;
+  }
+
+  .bk-modal-content {
+    padding: 0;
+    max-height: initial;
+    height: 100%;
+    scrollbar-gutter: inherit;
+  }
+
+  .bk-dialog-content {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.g-small-form {
+  .bk-form-label,
+  .bk-radio-label,
+  .bk-checkbox-label {
+    font-size: 12px;
+  }
+
+  .g-bold-label .bk-form-label {
+    font-weight: 700;
+  }
+
+  .g-auto-height-form-item {
+    height: auto;
+    line-height: 1;
+  }
+
+  .g-last-form-item {
+    margin: 0;
+  }
+
+  input {
+    font-size: 12px;
+
+    &::placeholder {
+      font-size: 12px;
+    }
+  }
+
+  &.g-small-gap-form {
+    .bk-form-item {
+      margin-bottom: 16px;
+    }
+
+    .g-last-form-item {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.g-small-gap-form {
+  .bk-form-item {
+    margin-bottom: 16px;
+  }
+
+  .g-last-form-item {
+    margin-bottom: 0;
+  }
+}
+
+.g-t-table-filter {
+  .t-radio.t-is-checked .t-radio__input::after {
+    background-color: #3a84ff;
+  }
+  .t-radio__label {
+    font-size: 12px;
+    color: #63656e;
+    font-size: 12px;;
+  }
+  .t-table__filter--bottom-buttons {
+    .t-button--theme-primary {
+      background-color: #3a84ff;
+      color: #fff;
+      border-color: #3a84ff;
+      border-radius: 2px;
+      padding: 0 12px;
+    }
+    .t-button--theme-default {
+      background-color: #fff;
+      border: 1px solid #c4c6cc;
+      border-radius: 2px;
+      color: #63656e;
+      padding: 0 12px;
+    }
+  }
+}
+
+.g-text-10 {
+  font-size: 10px;
+}
+
+.g-text-14 {
+  font-size: 14px;
+}
+
+.g-text-16 {
+  font-size: 16px;
+}
+
+.g-text-20 {
+  font-size: 20px;
+}
+
+.g-text-22 {
+  font-size: 22px;
+}
+
+.g-text-32 {
+  font-size: 32px;
+}
+
+.g-text-40 {
+  font-size: 40px;
+}
+
+.g-text-8 {
+  font-size: 8px;
+}
+
+.g-text-black {
+  color: #313238;
+}
+
+.g-text-blue {
+  color: #3a84ff;
+}
+
+.g-text-center {
+  text-align: center;
+}
+
+.g-text-gray {
+  color: #979ba5;
+}
+
+.g-text-green {
+  color: #2caf5e;
+}
+
+.g-text-left {
+  text-align: left;
+}
+
+.g-text-light {
+  color: #9b9da1;
+}
+
+.g-text-light-gray {
+  color: #c4c6cc;
+}
+
+.g-text-normal {
+  color: #4d4f56;
+}
+
+.g-text-red {
+  color: #ea3636;
+}
+
+.g-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.g-w-16 {
+  width: 16px;
+}
+
+.g-w-200 {
+  width: 200px;
+}
+
+.g-w-64 {
+  width: 64px;
+}
+
+.g-w-88 {
+  width: 88px;
+}
+
+.g-white-footer-table {
+  .bk-table-footer {
+    background-color: #fff;
+  }
+}
+
+.g-whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.g-group:hover .group-hover\:g-inline {
+  display: inline;
+}
+
+.hover\:\!g-border-blue:hover {
+  border: 1px solid #3a84ff !important;
+}
+
+.hover\:\!g-text-blue:hover {
+  color: #3a84ff !important;
+}
+
+.hover\:g-text-danger-red:hover {
+  color: #ff4d4f;
+}
+
+.hover\:g-text-normal:hover {
+  color: #4d4f56;
+}