aibox-css-legacy 0.0.3

package/README.md

@@ -0,0 +1,42 @@
+# aibox-css-legacy
+
+Legacy styles for Aibox Icons collection.
+
+## Installation
+
+```bash
+npm install aibox-css-legacy
+```
+
+## Usage
+
+### Import main styles
+
+```scss
+@use '@color-message/aibox-legacy' as *;
+```
+
+### Import specific styles
+
+```scss
+// Import reset styles
+@use '@color-message/aibox-legacy/reset' as *;
+
+// Import custom styles
+@use '@color-message/aibox-legacy/custom' as *;
+
+// Import root variables
+@use '@color-message/aibox-legacy/root' as *;
+```
+
+## Files
+
+- `index.scss` - Main entry point, imports all styles
+- `reset.scss` - CSS reset styles
+- `custom.scss` - Custom component styles
+- `root.scss` - Root variables and configuration
+- `fonts/` - Font files
+
+## License
+
+MIT

package/custom.scss

@@ -0,0 +1,386 @@
+.no-select {
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE/Edge */
+  user-select: none; /* 标准语法 */
+}
+.max-w-120 {
+  max-width: 120px;
+}
+.max-w-200 {
+  max-width: 200px;
+}
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.custom-message-box {
+  &__title {
+    font-size: var(--font-size-m);
+    color: var(--color-text-base);
+    line-height: 20px;
+  }
+  &__tip {
+    font-size: var(--font-size-s);
+    color: var(--color-text-light1);
+    line-height: 17px;
+  }
+}
+.el-tag {
+  border: 0;
+  border-radius: 8px;
+  font-size: 12px;
+
+  &.el-tag--primary {
+    --el-tag-bg-color: var(--primary-color-5);
+    --el-tag-hover-color: var(--primary-color-1);
+    --el-tag-text-color: var(--primary-color-1);
+  }
+
+  &.el-tag--success {
+    --el-tag-bg-color: var(--success-color-2);
+    --el-tag-hover-color: var(--success-color-1);
+    --el-tag-text-color: var(--success-color-1);
+  }
+
+  &.el-tag--info {
+    --el-tag-bg-color: var(--background-color-8);
+    --el-tag-hover-color: var(--text-color-4);
+    --el-tag-text-color: var(--text-color-4);
+  }
+
+  &.el-tag--warning {
+    --el-tag-bg-color: var(--warning-color-2);
+  }
+
+  &.el-tag--danger {
+    --el-tag-bg-color: var(--error-color-5);
+    --el-tag-hover-color: var(--error-color-1);
+    --el-tag-text-color: var(--error-color-1);
+  }
+}
+.el-message {
+  padding: 14px;
+  .el-message__icon {
+    width: 22px;
+    height: 22px;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.el-message--success {
+    --el-message-border-color: var(--success-color-1);
+    --el-message-text-color: var(--text-color-2);
+    background: linear-gradient(180deg, var(--success-color-2) 0%, var(--background-color-2) 100%);
+
+    .el-message-icon--success {
+      color: var(--success-color-1);
+    }
+  }
+
+  &.el-message--warning {
+    --el-message-border-color: var(--warning-color-1);
+    --el-message-text-color: var(--text-color-2);
+    background: linear-gradient(180deg, var(--warning-color-2) 0%, var(--background-color-2) 100%);
+
+    .el-message-icon--warning {
+      color: var(--warning-color-1);
+    }
+  }
+
+  &.el-message--error {
+    --el-message-border-color: var(--error-color-7);
+    --el-message-text-color: var(--text-color-2);
+    background: linear-gradient(180deg, var(--error-color-5) 0%, var(--background-color-2) 100%);
+
+    .el-message-icon--error {
+      color: var(--error-color-7);
+    }
+  }
+}
+.success-status,
+.fail-status,
+.pending-status,
+.waiting-status {
+  font-size: var(--font-size-s);
+  padding: 2px 8px;
+  border-radius: 4px 4px 4px 4px;
+}
+.success-status {
+  color: var(--el-color-success);
+  border: 1px solid var(--el-color-success-light-5);
+  background: var(--el-color-success-light-9);
+}
+.fail-status {
+  color: var(--el-color-danger);
+  background: var(--el-color-danger-light-9);
+  border: 1px solid var(--el-color-danger-light-5);
+}
+.pending-status {
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border: 1px solid var(--el-color-primary-light-5);
+}
+.waiting-status {
+  color: var(--el-color-warning);
+  background: var(--el-color-warning-light-9);
+  border: 1px solid var(--el-color-warning-light-5);
+}
+.question-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  color: var(--color-text-light1);
+  font-size: var(--font-size-s);
+  border: 1px solid var(--color-text-light1);
+  border-radius: 50%;
+  margin-left: 8px;
+}
+.text-linear-gradient {
+  background: linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-dark-1));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+.el-input {
+  .el-input__wrapper {
+    box-shadow: 0 0 0 1px var(--color-wrapper-shadow) inset;
+  }
+}
+.el-select {
+  .el-select__wrapper {
+    box-shadow: 0 0 0 1px var(--color-wrapper-shadow) inset;
+  }
+}
+.el-message-box {
+  padding: 20px 24px !important;
+  .el-message-box__headerbtn {
+    top: 10px;
+    right: 9px;
+  }
+  .el-message-box__container {
+    align-items: flex-start;
+  }
+}
+.el-overlay-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-dialog {
+    margin: 0;
+  }
+}
+.custom-input {
+  .el-input__wrapper {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .el-input__inner {
+    height: 26px;
+    line-height: 26px;
+  }
+}
+.custom-select {
+  .el-select__wrapper {
+    min-height: 26px;
+  }
+  .el-select__input {
+    height: 26px;
+    line-height: 26px;
+  }
+}
+.custom-cascader {
+  .el-input__wrapper {
+    padding: 0 5px;
+    font-size: var(--font-size-s);
+  }
+  .el-input__inner {
+    height: 26px;
+    line-height: 26px;
+  }
+}
+.label-with-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px; // 使用gap替代margin-left，更灵活地控制间距
+  .el-icon {
+    font-size: var(--font-size-m);
+  }
+}
+.el-message-box {
+  border-radius: 8px !important;
+}
+.el-form {
+  .el-form-item {
+    .el-form-item__label,
+    .el-radio__label {
+      color: var(--color-text-base);
+    }
+  }
+}
+.custom-search-input {
+  .el-input__wrapper {
+    box-shadow: none;
+  }
+}
+// 开发中的模块，先用这个属性来禁用
+.module-disabled {
+  -webkit-filter: grayscale(1);
+  filter: grayscale(1);
+  pointer-events: none; /* 禁止鼠标事件 */
+  color: var(--color-text-light1) !important;
+}
+.module-disabled-input {
+  pointer-events: none; /* 禁止鼠标事件 */
+  cursor: not-allowed;
+}
+.el-input__inner {
+  color: var(--color-text-base);
+}
+.el-button {
+  &:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(
+      .el-button--danger
+    ):not(.el-button--info) {
+    --el-button-bg-color: var(--el-button-common-bgc);
+    --el-button-border-color: var(--el-button-common-bgc);
+    --el-button-hover-bg-color: var(--background-color-7);
+    --el-button-hover-border-color: var(--background-color-7);
+    --el-button-active-bg-color: var(--background-color-6);
+    --el-button-active-border-color: var(--background-color-6);
+    --el-button-text-color: var(--color-text-base);
+  }
+  font-family:
+    'Alibaba PuHuiTi 3-55', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+}
+
+// ==================== Markdown Table 样式 ====================
+/**
+ * @description 全局 Markdown 表格样式类
+ * @usage 在需要渲染 Markdown 表格的元素上添加 .markdown-table 类
+ * @example 
+ *   <div class="markdown-table" v-html="markdownToHtml(content)"></div>
+ */
+.markdown-table {
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 10px 0;
+    display: block;
+    overflow-x: auto;
+    border-radius: 4px;
+
+    // 滚动条样式
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+    }
+
+    th,
+    td {
+      border: 1px solid var(--table-td-border);
+      padding: 8px 12px;
+      text-align: left;
+      min-width: 100px;
+      word-break: break-all;
+      white-space: nowrap; /* 允许换行 */
+      word-break: break-word; /* 单词过长时断行 */
+      overflow-wrap: anywhere; /* 任意点换行，避免溢出 */
+      max-width: none !important;
+    }
+
+    th {
+      background-color: var(--table-td-background);
+      font-weight: 500;
+    }
+
+    tbody tr:hover {
+      background-color: var(--table-td-background);
+    }
+  }
+}
+// 通用滚动条样式
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+// 滚动条样式
+::-webkit-scrollbar-thumb {
+  border-radius: 12px;
+  background-color: var(--scrollbar-thumb-color);
+}
+//自定义滚动条
+.custom-scrollbar {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+  }
+}
+.style-box-border {
+  box-shadow:
+    0px 6px 40px 16px rgba(0, 0, 0, 0.02),
+    0px 4px 28px 0px rgba(0, 0, 0, 0.02),
+    0px 3px 16px -8px rgba(0, 0, 0, 0.04);
+  background:
+    linear-gradient(
+        120deg,
+        rgba(98.16371977329254, 173.92362892627716, 255, 1),
+        rgba(40.61947077512741, 119.22565519809723, 255, 1),
+        rgba(158.52878540754318, 102.67698839306831, 255, 1)
+      )
+      border-box,
+    linear-gradient(#edf1fc, #edf1fc) content-box;
+  padding: 0px;
+}
+.debug-detail__select-popper {
+  .el-select-dropdown__item {
+    padding: 0 30px 0 10px;
+  }
+  .el-select-dropdown__item.is-selected {
+    background-color: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
+    .history-option__text,
+    .history-option__time {
+      color: var(--el-color-primary);
+    }
+  }
+}
+.debug-detail-high {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 13px;
+  color: var(--el-color-primary);
+  background: linear-gradient(
+    120deg,
+    rgba(98, 174, 255, 0.2) 0%,
+    rgba(41, 119, 255, 0.2) 49%,
+    rgba(159, 103, 255, 0.2) 100%
+  );
+  border-radius: 8px;
+  cursor: pointer;
+}
+.debug-detail-full {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.el-icon {
+  vertical-align: -0.15em;
+  fill: currentColor;
+}

package/index.scss

@@ -0,0 +1,3 @@
+@use './reset.scss' as *;
+@use './custom.scss' as *;
+@use './root.scss' as *;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "aibox-css-legacy",
+  "version": "0.0.3",
+  "description": "Legacy styles for Aibox Icons collection.",
+  "type": "module",
+  "keywords": [
+    "styles",
+    "legacy",
+    "scss",
+    "aibox"
+  ],
+  "license": "MIT",
+  "author": "AI Custom Icon Team",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/color-message",
+    "directory": "packages/aibox/legacy"
+  },
+  "bugs": {
+    "url": "https://github.com/your-org/color-message/issues"
+  },
+  "homepage": "https://github.com/your-org/color-message#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "*.scss",
+    "fonts/"
+  ],
+  "exports": {
+    ".": "./index.scss",
+    "./custom": "./custom.scss",
+    "./reset": "./reset.scss",
+    "./root": "./root.scss"
+  },
+  "sideEffects": true,
+  "scripts": {
+    "build": "echo \"aibox-css-legacy: no build step needed\"",
+    "pub": "pnpm publish --no-git-checks"
+  }
+}

package/reset.scss

@@ -0,0 +1,31 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+body {
+  background-color: var(--color-deep-background);
+  font-family:
+    'Alibaba PuHuiTi 3-55', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  font-size: var(--font-size-m);
+  color: var(--color-text-base);
+}
+#app {
+  width: 100%;
+  height: 100vh;
+}
+ul,
+ol {
+  padding: 0;
+  margin: 0;
+}
+li {
+  list-style: none;
+}

package/root.scss

@@ -0,0 +1,151 @@
+@font-face {
+  font-family: 'Alibaba PuHuiTi 3-55';
+  src:
+    url('./fonts/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'),
+    url('./fonts/AlibabaPuHuiTi-3-55-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+:root {
+  //系统主题色
+  --el-color-primary: #3965ff;
+  --el-color-success: #27c637;
+  --el-color-warning: #faad14;
+  --el-color-error: #ec0e13ff;
+  --el-color-danger: #ec0e13ff;
+
+  // 字体类型
+  --el-font-family:
+    'Alibaba PuHuiTi 3-55', 'Helvetica Neue', Helvetica, 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  --el-text-color-regular: #262626;
+  --el-border-radius-base: 6px;
+  --el-tag-border-radius: 6px;
+  // 主题色变亮
+  --el-color-primary-light-1: #4f7dff;
+  --el-color-primary-light-2: #5a85ff;
+  --el-color-primary-light-3: #6a8fff;
+  --el-color-primary-light-4: #8599ff;
+  --el-color-primary-light-5: #91b3ff;
+  --el-color-primary-light-6: #9ccdff;
+  --el-color-primary-light-7: #b8d7ff;
+  --el-color-primary-light-8: #d3e1ff;
+  --el-color-primary-light-9: #e0f0ff;
+
+  // 主题色变暗
+  --el-color-primary-dark-1: #3059e6;
+  --el-color-primary-dark-2: #2d50d1;
+  --el-color-primary-dark-3: #3359e6;
+  --el-color-primary-dark-4: #3059e6;
+  --el-color-primary-dark-5: #2e50d1;
+  --el-color-primary-dark-6: #2d50d1;
+  --el-color-primary-dark-7: #2a47bc;
+  --el-color-primary-dark-8: #2a47bc;
+  --el-color-primary-dark-9: #253ea7;
+
+  /* 主色 */
+  --primary-color-1: #3b64ff;
+  --primary-color-2: #1f4eff;
+  --primary-color-3: #0f42fa;
+  --primary-color-4: #b4baf6;
+  --primary-color-5: #e5ebff;
+  --primary-color-6: #99aeff;
+  --primary-color-7: #edf0f7;
+  --primary-color-8: #e6e9f2;
+  --primary-color-9: #dbdee9;
+  --primary-color-10: #2744ff;
+
+  /* 成功色 */
+  --success-color-1: #22753a;
+  --success-color-2: #eefff3;
+  --success-color-3: #96edaf;
+
+  /* 警告色 */
+  --warning-color-1: #faa600;
+  --warning-color-2: #fffbe6;
+  --warning-color-3: #ffdd99;
+
+  /* 错误色 */
+  --error-color-1: #ec0e13;
+  --error-color-2: #db0d12;
+  --error-color-3: #c90c10;
+  --error-color-4: #f5b3b4;
+  --error-color-5: #ffedeb;
+  --error-color-6: #ffa39e;
+  --error-color-7: #ff5054;
+
+  /* 文字色 */
+  --text-color-1: #1f2434;
+  --text-color-2: #202434;
+  --text-color-3: #373a43;
+  --text-color-4: #74798c;
+  --text-color-5: #b3b7c6;
+  --text-color-6: #ff441e;
+  --text-color-7: #909399;
+
+  /* 背景色 */
+  --background-color-1: #fcfdff;
+  --background-color-2: #ffffff;
+  --background-color-3: #d9e5fe;
+  --background-color-4: #fafdff;
+  --background-color-5: #f6f9ff;
+  --background-color-6: #f0f1f5;
+  --background-color-7: #f7f9fc;
+  --background-color-8: #eff0f2;
+  --background-color-9: #e8ebf1;
+  --background-color-10: #f6f6fa;
+  --background-color-11: #f5f7ff;
+  --background-color-12: #e8ecf3;
+
+  // 字体基础颜色
+  --color-text-base: #262626;
+
+  //辅助颜色1
+  --color-text-light1: #999;
+
+  // 辅助颜色2
+  --color-text-light2: #666;
+
+  // 背景颜色
+  --color-deep-background: #f2f4fa;
+
+  // 分割线颜色
+  --color-parting-line: #f0f0f0;
+  // 边框颜色
+  --color-border: #eaedf1;
+  // 阴影颜色
+  --color-wrapper-shadow: #d9d9d9;
+
+  // 表格单元格边框颜色
+  --table-td-border: #e6e6e6;
+  // 表格单元格背景颜色
+  --table-td-background: #f5f7fa;
+  //滚动条有颜色
+  --scrollbar-thumb-color: #d7d8dc;
+  // 通用按钮背景色
+  --el-button-common-bgc: #edf0f7;
+
+  // 字体定义规范
+  --font-size-xs: 12px;
+  --font-size-s: 13px;
+  --font-size-m: 14px;
+  --font-size-l: 15px;
+  --font-size-xl: 16px;
+  --font-size-xxl: 17px;
+  --font-size-xxxl: 18px;
+  --font-size-xxxxl: 19px;
+  --font-size-xxxxxl: 20px;
+  --font-size-xxxxxxl: 21px;
+  --font-size-xxxxxxxl: 22px;
+
+  // 边距
+  --padding-l-8: 8px;
+  --padding-l-6: 6px;
+
+  // 边框boder-radius
+  --el-border-radius-base: 8px;
+  --el-tag-border-radius: 8px;
+  // element-plus字体大小
+  --el-font-size-large: 16px;
+}