advance-semi-theme 1.0.0

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

@@ -0,0 +1,61 @@
+/**
+ * Element Plus Autocomplete - Semi Design 风格
+ */
+
+body.semi .el-autocomplete .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-autocomplete .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-autocomplete .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+}
+
+/* 下拉面板 */
+body.semi .el-autocomplete-suggestion {
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-autocomplete-suggestion__wrap {
+  max-height: 280px;
+  padding: 4px 0;
+}
+
+body.semi .el-autocomplete-suggestion li {
+  padding: 8px 16px;
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .el-autocomplete-suggestion li:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-autocomplete-suggestion li.highlighted {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-autocomplete-suggestion li.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 加载状态 */
+body.semi .el-autocomplete-suggestion__loading {
+  color: var(--semi-color-primary);
+}
+
+/* 空状态 */
+body.semi .el-autocomplete-suggestion__empty {
+  color: var(--semi-color-text-3);
+  padding: 16px;
+  text-align: center;
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Element Plus Avatar - Semi Design 风格
+ */
+
+body.semi .el-avatar {
+  background: var(--semi-color-fill-1);
+  color: var(--semi-color-text-1);
+  font-weight: 500;
+  border-radius: 3px;
+}
+
+body.semi .el-avatar--large {
+  border-radius: 6px;
+}
+
+body.semi .el-avatar--circle {
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .el-avatar--icon {
+  font-size: 18px;
+}
+
+/* 头像组 */
+body.semi .el-avatar-group .el-avatar {
+  border: 2px solid var(--semi-color-bg-0);
+}
+
+body.semi .el-avatar--small {
+  font-size: 12px;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Element Plus Backtop - Semi Design 风格
+ */
+
+body.semi .el-backtop {
+  background-color: #fff;
+  border-radius: var(--semi-border-radius-full);
+  box-shadow: var(--semi-shadow-elevated);
+  color: var(--semi-color-text-1);
+  width: 40px;
+  height: 40px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-backtop:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-backtop .el-icon {
+  font-size: 20px;
+}

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

@@ -0,0 +1,48 @@
+/**
+ * Element Plus Badge - Semi Design 风格
+ */
+
+body.semi .el-badge__content {
+  background-color: var(--semi-color-danger);
+  border-radius: 9px;
+  border: 1px solid var(--semi-color-bg-0);
+  box-shadow: none;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  height: 18px;
+  min-width: 18px;
+  line-height: 16px;
+  padding: 0 6px;
+}
+
+body.semi .el-badge__content.is-fixed {
+  top: 0;
+  right: 10px;
+  transform: translateY(-50%) translateX(100%);
+}
+
+body.semi .el-badge__content.is-dot {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
+  border-radius: var(--semi-border-radius-full);
+  right: 5px;
+}
+
+body.semi .el-badge__content--primary {
+  background-color: var(--semi-color-primary);
+}
+
+body.semi .el-badge__content--success {
+  background-color: var(--semi-color-success);
+}
+
+body.semi .el-badge__content--warning {
+  background-color: var(--semi-color-warning);
+}
+
+body.semi .el-badge__content--info {
+  background-color: var(--semi-color-text-2);
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Element Plus Breadcrumb - Semi Design 风格
+ */
+
+body.semi .el-breadcrumb {
+  font-size: var(--semi-font-size-regular);
+  line-height: 22px;
+}
+
+body.semi .el-breadcrumb__inner {
+  color: var(--semi-color-text-2);
+  font-weight: 400;
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-breadcrumb__inner a {
+  color: var(--semi-color-text-2);
+  font-weight: 400;
+}
+
+body.semi .el-breadcrumb__inner a:hover {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-breadcrumb__item:last-child .el-breadcrumb__inner {
+  color: var(--semi-color-text-0);
+  font-weight: 500;
+}
+
+body.semi .el-breadcrumb__separator {
+  color: var(--semi-color-text-3);
+  font-weight: 400;
+  margin: 0 8px;
+}
+
+body.semi .el-breadcrumb__separator.el-icon {
+  font-size: 12px;
+}

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

@@ -0,0 +1,193 @@
+/**
+ * Element Plus Button - Semi Design 风格
+ * 覆盖原有 .el-button 样式
+ */
+
+/* 基础按钮 CSS 变量覆盖 */
+.semi .el-button {
+  --el-button-font-weight: 600;
+  --el-button-border-color: var(--semi-color-border);
+  --el-button-bg-color: #fff;
+  --el-button-text-color: var(--semi-color-text-0);
+  --el-button-disabled-text-color: var(--semi-color-disabled-text);
+  --el-button-disabled-bg-color: var(--semi-color-disabled-fill);
+  --el-button-disabled-border-color: var(--semi-color-disabled-border);
+  --el-button-hover-text-color: var(--semi-color-primary);
+  --el-button-hover-bg-color: #fff;
+  --el-button-hover-border-color: var(--semi-color-primary);
+  --el-button-active-text-color: var(--semi-color-primary-active);
+  --el-button-active-border-color: var(--semi-color-primary-active);
+  --el-button-outline-color: var(--semi-color-primary-light-default);
+  
+  border-radius: var(--semi-border-radius-small);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+/* Primary 按钮 - type="primary" */
+.semi .el-button--primary {
+  --el-button-text-color: #fff;
+  --el-button-bg-color: var(--semi-color-primary);
+  --el-button-border-color: var(--semi-color-primary);
+  --el-button-hover-text-color: #fff;
+  --el-button-hover-bg-color: var(--semi-color-primary-hover);
+  --el-button-hover-border-color: var(--semi-color-primary-hover);
+  --el-button-active-text-color: #fff;
+  --el-button-active-bg-color: var(--semi-color-primary-active);
+  --el-button-active-border-color: var(--semi-color-primary-active);
+  --el-button-disabled-text-color: #fff;
+  --el-button-disabled-bg-color: var(--semi-color-primary-disabled);
+  --el-button-disabled-border-color: var(--semi-color-primary-disabled);
+}
+
+/* Success 按钮 - type="success" */
+.semi .el-button--success {
+  --el-button-text-color: #fff;
+  --el-button-bg-color: var(--semi-color-success);
+  --el-button-border-color: var(--semi-color-success);
+  --el-button-hover-text-color: #fff;
+  --el-button-hover-bg-color: var(--semi-color-success-hover);
+  --el-button-hover-border-color: var(--semi-color-success-hover);
+  --el-button-active-text-color: #fff;
+  --el-button-active-bg-color: var(--semi-color-success-active);
+  --el-button-active-border-color: var(--semi-color-success-active);
+}
+
+/* Warning 按钮 - type="warning" */
+.semi .el-button--warning {
+  --el-button-text-color: #fff;
+  --el-button-bg-color: var(--semi-color-warning);
+  --el-button-border-color: var(--semi-color-warning);
+  --el-button-hover-text-color: #fff;
+  --el-button-hover-bg-color: var(--semi-color-warning-hover);
+  --el-button-hover-border-color: var(--semi-color-warning-hover);
+  --el-button-active-text-color: #fff;
+  --el-button-active-bg-color: var(--semi-color-warning-active);
+  --el-button-active-border-color: var(--semi-color-warning-active);
+}
+
+/* Danger 按钮 - type="danger" */
+.semi .el-button--danger {
+  --el-button-text-color: #fff;
+  --el-button-bg-color: var(--semi-color-danger);
+  --el-button-border-color: var(--semi-color-danger);
+  --el-button-hover-text-color: #fff;
+  --el-button-hover-bg-color: var(--semi-color-danger-hover);
+  --el-button-hover-border-color: var(--semi-color-danger-hover);
+  --el-button-active-text-color: #fff;
+  --el-button-active-bg-color: var(--semi-color-danger-active);
+  --el-button-active-border-color: var(--semi-color-danger-active);
+}
+
+/* Info 按钮 - type="info" */
+.semi .el-button--info {
+  --el-button-text-color: #fff;
+  --el-button-bg-color: var(--semi-color-text-2);
+  --el-button-border-color: var(--semi-color-text-2);
+  --el-button-hover-text-color: #fff;
+  --el-button-hover-bg-color: var(--semi-color-text-1);
+  --el-button-hover-border-color: var(--semi-color-text-1);
+}
+
+/* Plain 朴素按钮 */
+.semi .el-button.is-plain {
+  --el-button-bg-color: transparent;
+}
+
+.semi .el-button--primary.is-plain {
+  --el-button-text-color: var(--semi-color-primary);
+  --el-button-bg-color: var(--semi-color-primary-light-default);
+  --el-button-border-color: transparent;
+  --el-button-hover-text-color: var(--semi-color-primary);
+  --el-button-hover-bg-color: var(--semi-color-primary-light-hover);
+  --el-button-hover-border-color: transparent;
+}
+
+.semi .el-button--success.is-plain {
+  --el-button-text-color: var(--semi-color-success);
+  --el-button-bg-color: var(--semi-color-success-light-default);
+  --el-button-border-color: transparent;
+  --el-button-hover-text-color: var(--semi-color-success);
+  --el-button-hover-bg-color: var(--semi-color-success-light-hover);
+  --el-button-hover-border-color: transparent;
+}
+
+.semi .el-button--warning.is-plain {
+  --el-button-text-color: var(--semi-color-warning);
+  --el-button-bg-color: var(--semi-color-warning-light-default);
+  --el-button-border-color: transparent;
+  --el-button-hover-text-color: var(--semi-color-warning);
+  --el-button-hover-bg-color: var(--semi-color-warning-light-hover);
+  --el-button-hover-border-color: transparent;
+}
+
+.semi .el-button--danger.is-plain {
+  --el-button-text-color: var(--semi-color-danger);
+  --el-button-bg-color: var(--semi-color-danger-light-default);
+  --el-button-border-color: transparent;
+  --el-button-hover-text-color: var(--semi-color-danger);
+  --el-button-hover-bg-color: var(--semi-color-danger-light-hover);
+  --el-button-hover-border-color: transparent;
+}
+
+/* Text 文字按钮 */
+.semi .el-button.is-text {
+  --el-button-text-color: var(--semi-color-text-0);
+  --el-button-bg-color: transparent;
+  --el-button-border-color: transparent;
+  --el-button-hover-bg-color: var(--semi-color-fill-0);
+}
+
+.semi .el-button--primary.is-text {
+  --el-button-text-color: var(--semi-color-primary);
+  --el-button-hover-text-color: var(--semi-color-primary-hover);
+}
+
+/* Link 链接按钮 */
+.semi .el-button.is-link {
+  --el-button-text-color: var(--semi-color-primary);
+  --el-button-hover-text-color: var(--semi-color-primary-hover);
+  padding: 2px 0;
+}
+
+/* 尺寸 */
+.semi .el-button--large {
+  --el-button-size: 40px;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi .el-button--small {
+  --el-button-size: 24px;
+  padding: 5px 12px;
+  font-size: 12px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+/* 圆角按钮 */
+.semi .el-button.is-round {
+  border-radius: var(--semi-border-radius-full);
+}
+
+/* 圆形按钮 */
+.semi .el-button.is-circle {
+  border-radius: 50%;
+  padding: 8px;
+}
+
+/* 禁用状态 */
+.semi .el-button.is-disabled,
+.semi .el-button.is-disabled:hover {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* 加载状态 */
+.semi .el-button.is-loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.semi .el-button.is-loading::before {
+  background-color: rgba(255, 255, 255, 0.35);
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Element Plus Calendar - Semi Design 风格
+ */
+
+body.semi .el-calendar {
+  background-color: transparent;
+}
+
+body.semi .el-calendar__header {
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 12px 20px;
+}
+
+body.semi .el-calendar__title {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+body.semi .el-calendar__body {
+  padding: 12px 20px;
+}
+
+body.semi .el-calendar-table {
+  border: none;
+}
+
+body.semi .el-calendar-table thead th {
+  color: var(--semi-color-text-2);
+  font-weight: 400;
+  padding: 8px 0;
+}
+
+body.semi .el-calendar-table td {
+  border: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-calendar-table td.is-selected {
+  background-color: var(--semi-color-primary-light-default);
+}
+
+body.semi .el-calendar-table td.is-today {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-calendar-table .el-calendar-day {
+  padding: 8px;
+  height: auto;
+  min-height: 85px;
+}
+
+body.semi .el-calendar-table .el-calendar-day:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-calendar-table .prev,
+body.semi .el-calendar-table .next {
+  color: var(--semi-color-text-3);
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Element Plus Card - Semi Design 风格
+ */
+
+body.semi .el-card {
+  border-radius: var(--semi-border-radius-medium);
+  border: 1px solid var(--semi-color-border);
+  box-shadow: none;
+}
+
+body.semi .el-card__header {
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 16px 20px;
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+body.semi .el-card__body {
+  padding: 20px;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-card.is-hover-shadow:hover {
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-card.is-always-shadow {
+  box-shadow: var(--semi-shadow-elevated);
+}

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

@@ -0,0 +1,78 @@
+/**
+ * Element Plus Carousel - Semi Design 风格
+ */
+
+body.semi .el-carousel {
+  --el-carousel-indicator-width: 30px;
+  --el-carousel-indicator-height: 4px;
+  --el-carousel-indicator-padding-horizontal: 4px;
+  --el-carousel-indicator-padding-vertical: 12px;
+}
+
+body.semi .el-carousel__container {
+  border-radius: var(--semi-border-radius-small);
+  overflow: hidden;
+}
+
+body.semi .el-carousel__arrow {
+  background-color: rgba(255, 255, 255, 0.8);
+  border: none;
+  color: var(--semi-color-text-0);
+  width: 36px;
+  height: 36px;
+  border-radius: var(--semi-border-radius-full);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-carousel__arrow:hover {
+  background-color: #fff;
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-carousel__arrow--left {
+  left: 16px;
+}
+
+body.semi .el-carousel__arrow--right {
+  right: 16px;
+}
+
+/* 指示器 */
+body.semi .el-carousel__indicator {
+  padding: 4px;
+}
+
+body.semi .el-carousel__button {
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
+  opacity: 1;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-carousel__indicator:hover .el-carousel__button {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+body.semi .el-carousel__indicator.is-active .el-carousel__button {
+  background-color: #fff;
+  width: 24px;
+}
+
+/* 外部指示器 */
+body.semi .el-carousel__indicators--outside {
+  position: relative;
+  transform: none;
+}
+
+body.semi .el-carousel__indicators--outside .el-carousel__button {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-carousel__indicators--outside .el-carousel__indicator:hover .el-carousel__button {
+  background-color: var(--semi-color-fill-2);
+}
+
+body.semi .el-carousel__indicators--outside .el-carousel__indicator.is-active .el-carousel__button {
+  background-color: var(--semi-color-primary);
+}

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

@@ -0,0 +1,120 @@
+/**
+ * Element Plus Cascader - Semi Design 风格
+ */
+
+/* 输入框 */
+body.semi .el-cascader .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-cascader .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-cascader .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+}
+
+body.semi .el-cascader .el-input__inner {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-cascader .el-input__inner::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 标签 */
+body.semi .el-cascader__tags .el-tag {
+  background-color: var(--semi-color-fill-0);
+  border: none;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+}
+
+/* 面板 */
+body.semi .el-cascader__dropdown {
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-cascader-panel {
+  border: none;
+}
+
+body.semi .el-cascader-menu {
+  border-right: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-cascader-menu:last-child {
+  border-right: none;
+}
+
+body.semi .el-cascader-menu__wrap {
+  height: auto;
+  max-height: 280px;
+}
+
+body.semi .el-cascader-node {
+  padding: 8px 30px 8px 16px;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-cascader-node:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-cascader-node.is-active {
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+body.semi .el-cascader-node.is-active:hover {
+  background-color: var(--semi-color-primary-light-default);
+}
+
+body.semi .el-cascader-node.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+body.semi .el-cascader-node__postfix {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-cascader-node.in-active-path {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+/* 搜索建议 */
+body.semi .el-cascader__suggestion-panel {
+  border: none;
+}
+
+body.semi .el-cascader__suggestion-list {
+  padding: 4px 0;
+}
+
+body.semi .el-cascader__suggestion-item {
+  padding: 8px 16px;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-cascader__suggestion-item:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-cascader__suggestion-item.is-checked {
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+/* 空状态 */
+body.semi .el-cascader__empty-text {
+  color: var(--semi-color-text-3);
+  padding: 16px;
+}