advance-semi-theme 1.0.0

package/dist/element/styles/components/switch.css

@@ -0,0 +1,32 @@
+/**
+ * Element Plus Switch - Semi Design 风格
+ */
+
+body.semi .el-switch {
+  --el-switch-on-color: var(--semi-color-primary);
+  --el-switch-off-color: var(--semi-color-fill-2);
+}
+
+body.semi .el-switch.is-checked {
+  --el-switch-on-color: var(--semi-color-primary);
+}
+
+body.semi .el-switch__core {
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .el-switch__action {
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .el-switch.is-disabled {
+  opacity: 0.4;
+}
+
+body.semi .el-switch__label {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-switch__label.is-active {
+  color: var(--semi-color-primary);
+}

package/dist/element/styles/components/table.css

@@ -0,0 +1,144 @@
+/**
+ * Element Plus Table - Semi Design 风格
+ * 覆盖原有 .el-table 样式
+ */
+
+/* CSS 变量覆盖 */
+.semi .el-table {
+  --el-table-border-color: var(--semi-color-border);
+  --el-table-border: 1px solid var(--semi-color-border);
+  --el-table-text-color: var(--semi-color-text-0);
+  --el-table-header-text-color: var(--semi-color-text-0);
+  --el-table-row-hover-bg-color: var(--semi-color-fill-0);
+  --el-table-current-row-bg-color: var(--semi-color-primary-light-default);
+  --el-table-header-bg-color: var(--semi-color-fill-0);
+  --el-table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
+  --el-table-bg-color: #fff;
+  --el-table-tr-bg-color: #fff;
+  --el-table-expanded-cell-bg-color: #fff;
+  
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 表头 */
+.semi .el-table thead {
+  color: var(--semi-color-text-0);
+}
+
+.semi .el-table th.el-table__cell {
+  background-color: var(--semi-color-fill-0);
+  font-weight: 600;
+  font-size: var(--semi-font-size-regular);
+  padding: 12px 0;
+}
+
+/* 表格单元格 */
+.semi .el-table .el-table__cell {
+  padding: 12px 0;
+}
+
+.semi .el-table .cell {
+  padding: 0 16px;
+  color: var(--semi-color-text-0);
+  line-height: 22px;
+}
+
+/* 表格行 */
+.semi .el-table tr {
+  background-color: #fff;
+  transition: background-color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+/* 悬浮行 */
+.semi .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: var(--semi-color-fill-0);
+}
+
+.semi .el-table__body tr.hover-row > td.el-table__cell,
+.semi .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* 当前行 */
+.semi .el-table__body tr.current-row > td.el-table__cell {
+  background-color: var(--semi-color-primary-light-default);
+}
+
+/* 斑马纹 */
+.semi .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* 边框表格 */
+.semi .el-table--border {
+  border-color: var(--semi-color-border);
+}
+
+.semi .el-table--border .el-table__cell {
+  border-right-color: var(--semi-color-border);
+}
+
+.semi .el-table--border th.el-table__cell,
+.semi .el-table td.el-table__cell {
+  border-bottom-color: var(--semi-color-border);
+}
+
+/* 空数据 */
+.semi .el-table__empty-text {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 排序图标 */
+.semi .el-table .sort-caret.ascending {
+  border-bottom-color: var(--semi-color-text-3);
+}
+
+.semi .el-table .sort-caret.descending {
+  border-top-color: var(--semi-color-text-3);
+}
+
+.semi .el-table .ascending .sort-caret.ascending {
+  border-bottom-color: var(--semi-color-primary);
+}
+
+.semi .el-table .descending .sort-caret.descending {
+  border-top-color: var(--semi-color-primary);
+}
+
+/* 展开行图标 */
+.semi .el-table__expand-icon {
+  color: var(--semi-color-text-2);
+}
+
+.semi .el-table__expand-icon:hover {
+  color: var(--semi-color-primary);
+}
+
+/* 固定列阴影 */
+.semi .el-table.is-scrolling-left .el-table-fixed-column--right.is-first-column::before,
+.semi .el-table.is-scrolling-middle .el-table-fixed-column--right.is-first-column::before {
+  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06);
+}
+
+.semi .el-table.is-scrolling-right .el-table-fixed-column--left.is-last-column::before,
+.semi .el-table.is-scrolling-middle .el-table-fixed-column--left.is-last-column::before {
+  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.06);
+}
+
+/* 尺寸变体 */
+.semi .el-table--large .el-table__cell {
+  padding: 14px 0;
+}
+
+.semi .el-table--large .cell {
+  padding: 0 20px;
+}
+
+.semi .el-table--small .el-table__cell {
+  padding: 8px 0;
+}
+
+.semi .el-table--small .cell {
+  padding: 0 12px;
+}

package/dist/element/styles/components/tabs.css

@@ -0,0 +1,125 @@
+/**
+ * Element Plus Tabs - Semi Design 风格
+ * 覆盖原有 .el-tabs 样式
+ */
+
+/* CSS 变量覆盖 */
+.semi .el-tabs {
+  --el-tabs-header-height: 40px;
+}
+
+/* 标签页头部 */
+.semi .el-tabs__header {
+  margin-bottom: 16px;
+}
+
+/* 导航条底部线 */
+.semi .el-tabs__nav-wrap::after {
+  background-color: var(--semi-color-border);
+  height: 1px;
+}
+
+/* 活动指示条 */
+.semi .el-tabs__active-bar {
+  background-color: var(--semi-color-primary);
+  height: 2px;
+}
+
+/* 标签项 */
+.semi .el-tabs__item {
+  color: var(--semi-color-text-1);
+  font-size: 14px;
+  font-weight: 500;
+  height: 40px;
+  padding: 0 16px;
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-tabs__item:hover {
+  color: var(--semi-color-primary);
+}
+
+.semi .el-tabs__item.is-active {
+  color: var(--semi-color-primary);
+  font-weight: 600;
+}
+
+.semi .el-tabs__item.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 关闭图标 */
+.semi .el-tabs__item .is-icon-close:hover {
+  background-color: var(--semi-color-fill-2);
+  color: var(--semi-color-text-0);
+}
+
+/* 卡片式标签页 */
+.semi .el-tabs--card > .el-tabs__header {
+  border-bottom-color: var(--semi-color-border);
+}
+
+.semi .el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border-color: var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
+}
+
+.semi .el-tabs--card > .el-tabs__header .el-tabs__item {
+  border-left-color: var(--semi-color-border);
+}
+
+.semi .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+  background-color: #fff;
+  border-bottom-color: #fff;
+}
+
+/* 边框卡片式 */
+.semi .el-tabs--border-card {
+  background-color: #fff;
+  border-color: var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi .el-tabs--border-card > .el-tabs__header {
+  background-color: var(--semi-color-fill-0);
+  border-bottom-color: var(--semi-color-border);
+}
+
+.semi .el-tabs--border-card > .el-tabs__header .el-tabs__item {
+  color: var(--semi-color-text-1);
+  border-color: transparent;
+}
+
+.semi .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  background-color: #fff;
+  border-left-color: var(--semi-color-border);
+  border-right-color: var(--semi-color-border);
+  color: var(--semi-color-primary);
+}
+
+.semi .el-tabs--border-card > .el-tabs__content {
+  padding: 16px;
+}
+
+/* 新增标签按钮 */
+.semi .el-tabs__new-tab {
+  border-color: var(--semi-color-border);
+  color: var(--semi-color-text-2);
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi .el-tabs__new-tab:hover {
+  color: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+}
+
+/* 导航箭头 */
+.semi .el-tabs__nav-prev,
+.semi .el-tabs__nav-next {
+  color: var(--semi-color-text-2);
+}
+
+.semi .el-tabs__nav-prev:hover,
+.semi .el-tabs__nav-next:hover {
+  color: var(--semi-color-text-0);
+}

package/dist/element/styles/components/tag.css

@@ -0,0 +1,150 @@
+/**
+ * Element Plus Tag - Semi Design 风格
+ * 覆盖原有 .el-tag 样式
+ */
+
+/* 基础样式 */
+.semi .el-tag {
+  --el-tag-font-size: 12px;
+  --el-tag-border-radius: 3px;
+  --el-tag-border-radius-rounded: 100px;
+  
+  height: 24px;
+  padding: 0 8px;
+  border-width: 1px;
+  font-weight: 500;
+}
+
+/* Primary 类型 - 对应 type="primary" */
+.semi .el-tag--primary {
+  --el-tag-bg-color: var(--semi-color-primary-light-default);
+  --el-tag-border-color: transparent;
+  --el-tag-text-color: var(--semi-color-primary);
+  --el-tag-hover-color: var(--semi-color-primary);
+}
+
+/* Success 类型 - 对应 type="success" */
+.semi .el-tag--success {
+  --el-tag-bg-color: var(--semi-color-success-light-default);
+  --el-tag-border-color: transparent;
+  --el-tag-text-color: var(--semi-color-success);
+  --el-tag-hover-color: var(--semi-color-success);
+}
+
+/* Warning 类型 - 对应 type="warning" */
+.semi .el-tag--warning {
+  --el-tag-bg-color: var(--semi-color-warning-light-default);
+  --el-tag-border-color: transparent;
+  --el-tag-text-color: var(--semi-color-warning);
+  --el-tag-hover-color: var(--semi-color-warning);
+}
+
+/* Danger 类型 - 对应 type="danger" */
+.semi .el-tag--danger {
+  --el-tag-bg-color: var(--semi-color-danger-light-default);
+  --el-tag-border-color: transparent;
+  --el-tag-text-color: var(--semi-color-danger);
+  --el-tag-hover-color: var(--semi-color-danger);
+}
+
+/* Info 类型 - 对应 type="info" */
+.semi .el-tag--info {
+  --el-tag-bg-color: var(--semi-color-fill-0);
+  --el-tag-border-color: transparent;
+  --el-tag-text-color: var(--semi-color-text-1);
+  --el-tag-hover-color: var(--semi-color-text-0);
+}
+
+/* Default 类型 (无 type 属性) */
+.semi .el-tag:not([class*="el-tag--"]),
+.semi .el-tag.el-tag--default {
+  --el-tag-bg-color: var(--semi-color-fill-0);
+  --el-tag-border-color: transparent;
+  --el-tag-text-color: var(--semi-color-text-1);
+  --el-tag-hover-color: var(--semi-color-text-0);
+}
+
+/* Dark 效果 - 对应 effect="dark" */
+.semi .el-tag--dark {
+  --el-tag-text-color: #fff;
+}
+
+.semi .el-tag--dark.el-tag--primary {
+  --el-tag-bg-color: var(--semi-color-primary);
+  --el-tag-border-color: var(--semi-color-primary);
+}
+
+.semi .el-tag--dark.el-tag--success {
+  --el-tag-bg-color: var(--semi-color-success);
+  --el-tag-border-color: var(--semi-color-success);
+}
+
+.semi .el-tag--dark.el-tag--warning {
+  --el-tag-bg-color: var(--semi-color-warning);
+  --el-tag-border-color: var(--semi-color-warning);
+}
+
+.semi .el-tag--dark.el-tag--danger {
+  --el-tag-bg-color: var(--semi-color-danger);
+  --el-tag-border-color: var(--semi-color-danger);
+}
+
+.semi .el-tag--dark.el-tag--info {
+  --el-tag-bg-color: var(--semi-color-text-2);
+  --el-tag-border-color: var(--semi-color-text-2);
+}
+
+/* Plain 效果 - 对应 effect="plain" */
+.semi .el-tag--plain {
+  --el-tag-bg-color: transparent;
+}
+
+.semi .el-tag--plain.el-tag--primary {
+  --el-tag-border-color: var(--semi-color-primary-light-active);
+  --el-tag-text-color: var(--semi-color-primary);
+}
+
+.semi .el-tag--plain.el-tag--success {
+  --el-tag-border-color: var(--semi-color-success-light-active);
+  --el-tag-text-color: var(--semi-color-success);
+}
+
+.semi .el-tag--plain.el-tag--warning {
+  --el-tag-border-color: var(--semi-color-warning-light-active);
+  --el-tag-text-color: var(--semi-color-warning);
+}
+
+.semi .el-tag--plain.el-tag--danger {
+  --el-tag-border-color: var(--semi-color-danger-light-active);
+  --el-tag-text-color: var(--semi-color-danger);
+}
+
+/* 尺寸 */
+.semi .el-tag--large {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 14px;
+}
+
+.semi .el-tag--small {
+  height: 20px;
+  padding: 0 6px;
+  font-size: 12px;
+}
+
+/* 关闭按钮 */
+.semi .el-tag .el-tag__close {
+  color: currentColor;
+  opacity: 0.6;
+}
+
+.semi .el-tag .el-tag__close:hover {
+  opacity: 1;
+  background-color: currentColor;
+  color: #fff;
+}
+
+/* 圆角 */
+.semi .el-tag.is-round {
+  border-radius: 100px;
+}

package/dist/element/styles/components/text.css

@@ -0,0 +1,50 @@
+/**
+ * Element Plus Text - Semi Design 风格
+ */
+
+body.semi .el-text {
+  font-size: var(--semi-font-size-regular);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-text--small {
+  font-size: var(--semi-font-size-small);
+}
+
+body.semi .el-text--large {
+  font-size: 16px;
+}
+
+body.semi .el-text--primary {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-text--success {
+  color: var(--semi-color-success);
+}
+
+body.semi .el-text--warning {
+  color: var(--semi-color-warning);
+}
+
+body.semi .el-text--danger {
+  color: var(--semi-color-danger);
+}
+
+body.semi .el-text--info {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-text.is-truncated {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body.semi .el-text.is-line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

package/dist/element/styles/components/time-picker.css

@@ -0,0 +1,106 @@
+/**
+ * Element Plus TimePicker - Semi Design 风格
+ */
+
+/* 输入框 */
+body.semi .el-time-picker .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+
+body.semi .el-time-picker .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-time-picker .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+}
+
+/* 面板 */
+body.semi .el-time-panel {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-time-panel__content {
+  padding: 8px 0;
+}
+
+body.semi .el-time-panel__content::after,
+body.semi .el-time-panel__content::before {
+  border-color: var(--semi-color-border);
+}
+
+body.semi .el-time-spinner__wrapper {
+  max-height: 190px;
+}
+
+body.semi .el-time-spinner__item {
+  height: 32px;
+  line-height: 32px;
+  font-size: var(--semi-font-size-regular);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-time-spinner__item.is-active:not(.is-disabled) {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+body.semi .el-time-spinner__item.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 底部操作 */
+body.semi .el-time-panel__footer {
+  border-top: 1px solid var(--semi-color-border);
+  padding: 8px 12px;
+}
+
+body.semi .el-time-panel__btn {
+  color: var(--semi-color-primary);
+  font-size: var(--semi-font-size-small);
+}
+
+body.semi .el-time-panel__btn:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+body.semi .el-time-panel__btn.confirm {
+  color: var(--semi-color-primary);
+  font-weight: 600;
+}
+
+/* 范围选择 */
+body.semi .el-time-range-picker .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+
+body.semi .el-time-range-picker .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-time-range-picker .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+}
+
+body.semi .el-time-range-picker__content {
+  border: none;
+}
+
+body.semi .el-time-range-picker__cell {
+  padding: 8px;
+}

package/dist/element/styles/components/timeline.css

@@ -0,0 +1,58 @@
+/**
+ * Element Plus Timeline - Semi Design 风格
+ */
+
+body.semi .el-timeline {
+  padding-left: 0;
+}
+
+body.semi .el-timeline-item__node {
+  background-color: var(--semi-color-primary);
+  border: none;
+}
+
+body.semi .el-timeline-item__node--normal {
+  width: 12px;
+  height: 12px;
+  left: -1px;
+}
+
+body.semi .el-timeline-item__node--large {
+  width: 16px;
+  height: 16px;
+  left: -3px;
+}
+
+body.semi .el-timeline-item__node--success {
+  background-color: var(--semi-color-success);
+}
+
+body.semi .el-timeline-item__node--warning {
+  background-color: var(--semi-color-warning);
+}
+
+body.semi .el-timeline-item__node--danger {
+  background-color: var(--semi-color-danger);
+}
+
+body.semi .el-timeline-item__node--info {
+  background-color: var(--semi-color-text-2);
+}
+
+body.semi .el-timeline-item__tail {
+  border-left: 2px solid var(--semi-color-border);
+  left: 4px;
+}
+
+body.semi .el-timeline-item__wrapper {
+  padding-left: 24px;
+}
+
+body.semi .el-timeline-item__timestamp {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+}
+
+body.semi .el-timeline-item__content {
+  color: var(--semi-color-text-0);
+}

package/dist/element/styles/components/tooltip.css

@@ -0,0 +1,22 @@
+/**
+ * Element Plus Tooltip - Semi Design 风格
+ */
+
+body.semi .el-tooltip__popper {
+  background-color: var(--semi-color-bg-3);
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-small);
+  padding: 8px 12px;
+}
+
+body.semi .el-tooltip__popper.is-dark {
+  background-color: rgba(28, 31, 35, 0.85);
+  color: #fff;
+}
+
+body.semi .el-tooltip__popper .el-popper__arrow::before {
+  background-color: inherit;
+}