advance-semi-theme 1.0.0

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

@@ -0,0 +1,140 @@
+/**
+ * Element Plus Menu - Semi Design 风格
+ * 覆盖原有 .el-menu 样式
+ */
+
+/* 基础样式 - 覆盖 CSS 变量 */
+.semi .el-menu {
+  --el-menu-active-color: var(--semi-color-primary);
+  --el-menu-text-color: var(--semi-color-text-0);
+  --el-menu-hover-text-color: var(--semi-color-primary);
+  --el-menu-bg-color: transparent;
+  --el-menu-hover-bg-color: var(--semi-color-fill-0);
+  --el-menu-item-height: 40px;
+  --el-menu-sub-item-height: 40px;
+  --el-menu-horizontal-height: 56px;
+  --el-menu-item-font-size: 14px;
+  --el-menu-border-color: var(--semi-color-border);
+  --el-menu-base-level-padding: 16px;
+  --el-menu-level-padding: 16px;
+  --el-menu-icon-width: 20px;
+  
+  border-right-color: var(--semi-color-border);
+}
+
+/* 水平菜单 */
+.semi .el-menu--horizontal {
+  border-bottom-color: var(--semi-color-border);
+}
+
+.semi .el-menu--horizontal > .el-menu-item {
+  border-bottom: 2px solid transparent;
+  height: 100%;
+}
+
+.semi .el-menu--horizontal > .el-menu-item.is-active {
+  border-bottom-color: var(--semi-color-primary);
+  color: var(--semi-color-primary);
+}
+
+.semi .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover {
+  background-color: transparent;
+  color: var(--semi-color-primary);
+}
+
+.semi .el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
+  border-bottom: 2px solid transparent;
+  height: 100%;
+}
+
+.semi .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
+  border-bottom-color: var(--semi-color-primary);
+  color: var(--semi-color-primary);
+}
+
+/* 菜单项 */
+.semi .el-menu-item {
+  color: var(--semi-color-text-0);
+  border-radius: 0;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-menu-item:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+.semi .el-menu-item.is-active {
+  color: var(--semi-color-primary);
+  background-color: var(--semi-color-primary-light-default);
+}
+
+.semi .el-menu-item.is-active:hover {
+  background-color: var(--semi-color-primary-light-hover);
+}
+
+.semi .el-menu-item.is-disabled {
+  opacity: 0.5;
+}
+
+/* 子菜单 */
+.semi .el-sub-menu__title {
+  color: var(--semi-color-text-0);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-sub-menu__title:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+.semi .el-sub-menu.is-active > .el-sub-menu__title {
+  color: var(--semi-color-primary);
+}
+
+.semi .el-sub-menu__icon-arrow {
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+}
+
+/* 菜单项分组 */
+.semi .el-menu-item-group__title {
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+  padding: 8px 16px;
+}
+
+/* 弹出菜单 - teleport 到 body */
+body.semi .el-menu--popup {
+  background-color: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 4px 0;
+  min-width: 160px;
+}
+
+body.semi .el-menu--popup .el-menu-item {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 16px;
+}
+
+body.semi .el-menu--popup .el-menu-item.is-active {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+/* 折叠菜单 */
+.semi .el-menu--collapse {
+  width: 64px;
+}
+
+.semi .el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
+  color: var(--semi-color-primary);
+}
+
+/* 垂直菜单 */
+.semi .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
+.semi .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
+  padding-left: 20px;
+}

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

@@ -0,0 +1,88 @@
+/**
+ * Element Plus Message - Semi Design 风格
+ * 覆盖原有 .el-message 样式
+ */
+
+/* 基础样式 */
+body.semi .el-message {
+  --el-message-padding: 12px 16px;
+  
+  background-color: #fff;
+  border-radius: var(--semi-border-radius-small);
+  border: none;
+  box-shadow: var(--semi-shadow-elevated);
+  min-width: 300px;
+}
+
+/* Success 类型 - 对应 type="success" */
+body.semi .el-message--success {
+  --el-message-bg-color: #fff;
+  --el-message-border-color: transparent;
+  --el-message-text-color: var(--semi-color-text-0);
+}
+
+body.semi .el-message--success .el-message__icon {
+  color: var(--semi-color-success);
+}
+
+/* Warning 类型 - 对应 type="warning" */
+body.semi .el-message--warning {
+  --el-message-bg-color: #fff;
+  --el-message-border-color: transparent;
+  --el-message-text-color: var(--semi-color-text-0);
+}
+
+body.semi .el-message--warning .el-message__icon {
+  color: var(--semi-color-warning);
+}
+
+/* Error 类型 - 对应 type="error" */
+body.semi .el-message--error {
+  --el-message-bg-color: #fff;
+  --el-message-border-color: transparent;
+  --el-message-text-color: var(--semi-color-text-0);
+}
+
+body.semi .el-message--error .el-message__icon {
+  color: var(--semi-color-danger);
+}
+
+/* Info 类型 - 对应 type="info" */
+body.semi .el-message--info {
+  --el-message-bg-color: #fff;
+  --el-message-border-color: transparent;
+  --el-message-text-color: var(--semi-color-text-0);
+}
+
+body.semi .el-message--info .el-message__icon {
+  color: var(--semi-color-primary);
+}
+
+/* 图标 */
+body.semi .el-message .el-message__icon {
+  font-size: 18px;
+  margin-right: 10px;
+}
+
+/* 内容 */
+body.semi .el-message .el-message__content {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  line-height: 20px;
+}
+
+/* 关闭按钮 */
+body.semi .el-message .el-message__closeBtn {
+  color: var(--semi-color-text-2);
+  font-size: 14px;
+}
+
+body.semi .el-message .el-message__closeBtn:hover {
+  color: var(--semi-color-text-0);
+}
+
+/* Plain 模式 */
+body.semi .el-message.is-plain {
+  background-color: #fff;
+  box-shadow: var(--semi-shadow-elevated);
+}

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

@@ -0,0 +1,81 @@
+/**
+ * Element Plus Notification - Semi Design 风格
+ * 覆盖原有 .el-notification 样式
+ */
+
+/* CSS 变量覆盖 */
+body.semi .el-notification {
+  --el-notification-width: 320px;
+  --el-notification-padding: 16px 20px;
+  --el-notification-radius: var(--semi-border-radius-medium);
+  --el-notification-shadow: var(--semi-shadow-elevated);
+  --el-notification-border-color: transparent;
+  --el-notification-icon-size: 24px;
+  --el-notification-group-margin-left: 12px;
+  --el-notification-group-margin-right: 8px;
+  --el-notification-title-font-size: 16px;
+  --el-notification-title-color: var(--semi-color-text-0);
+  --el-notification-content-font-size: 14px;
+  --el-notification-content-color: var(--semi-color-text-1);
+  --el-notification-close-color: var(--semi-color-text-2);
+  --el-notification-close-hover-color: var(--semi-color-text-0);
+  --el-notification-close-font-size: 16px;
+  
+  background-color: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+/* 标题 */
+body.semi .el-notification__title {
+  color: var(--semi-color-text-0);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+/* 内容 */
+body.semi .el-notification__content {
+  color: var(--semi-color-text-1);
+  font-size: var(--semi-font-size-regular);
+  line-height: 20px;
+  margin-top: 8px;
+}
+
+/* 图标 */
+body.semi .el-notification__icon {
+  font-size: 24px;
+}
+
+/* Success 图标 */
+body.semi .el-notification .el-notification--success {
+  color: var(--semi-color-success);
+}
+
+/* Warning 图标 */
+body.semi .el-notification .el-notification--warning {
+  color: var(--semi-color-warning);
+}
+
+/* Info 图标 */
+body.semi .el-notification .el-notification--info {
+  color: var(--semi-color-primary);
+}
+
+/* Error 图标 */
+body.semi .el-notification .el-notification--error {
+  color: var(--semi-color-danger);
+}
+
+/* 关闭按钮 */
+body.semi .el-notification__closeBtn {
+  top: 16px;
+  right: 16px;
+  color: var(--semi-color-text-2);
+  font-size: 14px;
+}
+
+body.semi .el-notification__closeBtn:hover {
+  color: var(--semi-color-text-0);
+}

package/dist/element/styles/components/page-header.css

@@ -0,0 +1,41 @@
+/**
+ * Element Plus PageHeader - Semi Design 风格
+ */
+
+body.semi .el-page-header {
+  --el-page-header-padding: 12px 0;
+}
+
+body.semi .el-page-header__left {
+  margin-right: 32px;
+}
+
+body.semi .el-page-header__back {
+  color: var(--semi-color-text-2);
+  font-size: 14px;
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-page-header__back:hover {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-page-header__icon {
+  color: var(--semi-color-text-2);
+  margin-right: 8px;
+}
+
+body.semi .el-page-header__title {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+  font-size: 16px;
+}
+
+body.semi .el-page-header__content {
+  color: var(--semi-color-text-1);
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .el-page-header__breadcrumb {
+  margin-bottom: 12px;
+}

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

@@ -0,0 +1,135 @@
+/**
+ * Element Plus Pagination - Semi Design 风格
+ * 覆盖原有 .el-pagination 样式
+ */
+
+/* CSS 变量覆盖 */
+.semi .el-pagination {
+  --el-pagination-font-size: 14px;
+  --el-pagination-bg-color: transparent;
+  --el-pagination-text-color: var(--semi-color-text-0);
+  --el-pagination-border-radius: var(--semi-border-radius-small);
+  --el-pagination-button-color: var(--semi-color-text-0);
+  --el-pagination-button-width: 32px;
+  --el-pagination-button-height: 32px;
+  --el-pagination-button-disabled-color: var(--semi-color-disabled-text);
+  --el-pagination-button-disabled-bg-color: transparent;
+  --el-pagination-button-bg-color: transparent;
+  --el-pagination-hover-color: var(--semi-color-primary);
+  --el-pagination-item-gap: 8px;
+  
+  color: var(--semi-color-text-0);
+  font-size: 14px;
+}
+
+/* 分页按钮 */
+.semi .el-pagination .btn-prev,
+.semi .el-pagination .btn-next {
+  background-color: transparent;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-pagination .btn-prev:hover,
+.semi .el-pagination .btn-next:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-primary);
+}
+
+.semi .el-pagination .btn-prev:disabled,
+.semi .el-pagination .btn-next:disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 分页数字 */
+.semi .el-pager li {
+  background-color: transparent;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+  font-weight: 400;
+  min-width: 32px;
+  height: 32px;
+  line-height: 32px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-pager li:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-primary);
+}
+
+.semi .el-pager li.is-active {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 600;
+}
+
+.semi .el-pager li.is-active:hover {
+  background-color: var(--semi-color-primary-light-hover);
+}
+
+.semi .el-pager li.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 带背景的分页 */
+.semi .el-pagination.is-background .btn-prev,
+.semi .el-pagination.is-background .btn-next,
+.semi .el-pagination.is-background .el-pager li {
+  background-color: var(--semi-color-fill-0);
+}
+
+.semi .el-pagination.is-background .btn-prev:hover,
+.semi .el-pagination.is-background .btn-next:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi .el-pagination.is-background .el-pager li:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi .el-pagination.is-background .el-pager li.is-active {
+  background-color: var(--semi-color-primary);
+  color: #fff;
+}
+
+.semi .el-pagination.is-background .el-pager li.is-active:hover {
+  background-color: var(--semi-color-primary-hover);
+}
+
+/* 总数、跳转等文字 */
+.semi .el-pagination__total,
+.semi .el-pagination__jump {
+  color: var(--semi-color-text-1);
+  font-size: 14px;
+}
+
+/* 尺寸选择器 */
+.semi .el-pagination__sizes .el-select .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* 跳转输入框 */
+.semi .el-pagination__editor.el-input .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* 小尺寸 */
+.semi .el-pagination--small .btn-prev,
+.semi .el-pagination--small .btn-next,
+.semi .el-pagination--small .el-pager li {
+  height: 24px;
+  line-height: 24px;
+  min-width: 24px;
+  font-size: 12px;
+}
+
+/* 大尺寸 */
+.semi .el-pagination--large .btn-prev,
+.semi .el-pagination--large .btn-next,
+.semi .el-pagination--large .el-pager li {
+  height: 40px;
+  line-height: 40px;
+  min-width: 40px;
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Element Plus Popconfirm - Semi Design 风格
+ */
+
+body.semi .el-popconfirm {
+  padding: 12px 16px;
+}
+
+body.semi .el-popconfirm__main {
+  display: flex;
+  align-items: flex-start;
+}
+
+body.semi .el-popconfirm__icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+body.semi .el-popconfirm__title {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .el-popconfirm__action {
+  margin-top: 12px;
+  text-align: right;
+}
+
+body.semi .el-popconfirm__action .el-button {
+  margin-left: 8px;
+}
+
+body.semi .el-popconfirm__action .el-button:first-child {
+  margin-left: 0;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Element Plus Popover - Semi Design 风格
+ */
+
+body.semi .el-popover {
+  background-color: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 12px 16px;
+}
+
+body.semi .el-popover__title {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+body.semi .el-popover .el-popper__arrow::before {
+  background-color: #fff;
+  border: none;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Element Plus Progress - Semi Design 风格
+ */
+
+body.semi .el-progress-bar__outer {
+  background-color: var(--semi-color-fill-1);
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .el-progress-bar__inner {
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .el-progress--success .el-progress-bar__inner {
+  background-color: var(--semi-color-success);
+}
+
+body.semi .el-progress--warning .el-progress-bar__inner {
+  background-color: var(--semi-color-warning);
+}
+
+body.semi .el-progress--exception .el-progress-bar__inner {
+  background-color: var(--semi-color-danger);
+}
+
+body.semi .el-progress__text {
+  color: var(--semi-color-text-1);
+}

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

@@ -0,0 +1,64 @@
+/**
+ * Element Plus Radio - Semi Design 风格
+ */
+
+body.semi .el-radio__input.is-checked .el-radio__inner {
+  background-color: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-radio__input.is-checked + .el-radio__label {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-radio__inner {
+  border-color: var(--semi-color-border);
+}
+
+body.semi .el-radio__inner:hover {
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-radio__label {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-radio.is-disabled .el-radio__inner {
+  background-color: var(--semi-color-disabled-bg);
+  border-color: var(--semi-color-border);
+}
+
+body.semi .el-radio.is-disabled .el-radio__label {
+  color: var(--semi-color-disabled-text);
+}
+
+/* Radio Button */
+body.semi .el-radio-button__inner {
+  background-color: var(--semi-color-fill-0);
+  border-color: transparent;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-radio-button__inner:hover {
+  background-color: var(--semi-color-fill-1);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-radio-button__original-radio:checked + .el-radio-button__inner {
+  background-color: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+  color: #fff;
+  box-shadow: none;
+}
+
+body.semi .el-radio-group {
+  gap: 0;
+}
+
+body.semi .el-radio-button:first-child .el-radio-button__inner {
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+
+body.semi .el-radio-button:last-child .el-radio-button__inner {
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Element Plus Rate - Semi Design 风格
+ */
+
+body.semi .el-rate {
+  --el-rate-fill-color: #FC8800;
+  --el-rate-void-color: var(--semi-color-fill-1);
+  --el-rate-disabled-void-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-rate__icon {
+  font-size: 20px;
+  margin-right: 4px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-rate__icon:hover {
+  transform: scale(1.1);
+}
+
+body.semi .el-rate__text {
+  color: var(--semi-color-text-1);
+  font-size: var(--semi-font-size-regular);
+  margin-left: 8px;
+}
+
+body.semi .el-rate.is-disabled .el-rate__icon {
+  cursor: not-allowed;
+}
+
+body.semi .el-rate.is-disabled .el-rate__icon:hover {
+  transform: none;
+}