advance-semi-theme 1.0.0

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

@@ -0,0 +1,51 @@
+/**
+ * Element Plus Result - Semi Design 风格
+ */
+
+body.semi .el-result {
+  padding: 40px 32px;
+}
+
+body.semi .el-result__icon svg {
+  width: 64px;
+  height: 64px;
+}
+
+body.semi .el-result__icon--success {
+  color: var(--semi-color-success);
+}
+
+body.semi .el-result__icon--warning {
+  color: var(--semi-color-warning);
+}
+
+body.semi .el-result__icon--error {
+  color: var(--semi-color-danger);
+}
+
+body.semi .el-result__icon--info {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-result__title {
+  margin-top: 20px;
+}
+
+body.semi .el-result__title p {
+  color: var(--semi-color-text-0);
+  font-size: 20px;
+  font-weight: 600;
+}
+
+body.semi .el-result__subtitle {
+  margin-top: 8px;
+}
+
+body.semi .el-result__subtitle p {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .el-result__extra {
+  margin-top: 24px;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Element Plus Row/Col 栅格 - Semi Design 风格
+ */
+
+body.semi .el-row {
+  margin-bottom: 16px;
+}
+
+body.semi .el-row:last-child {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Element Plus Scrollbar - Semi Design 风格
+ */
+
+body.semi .el-scrollbar__bar {
+  background-color: transparent;
+}
+
+body.semi .el-scrollbar__thumb {
+  background-color: var(--semi-color-fill-2);
+  border-radius: 100px;
+  transition: background-color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-scrollbar__thumb:hover {
+  background-color: var(--semi-color-fill-3);
+}
+
+body.semi .el-scrollbar__bar.is-horizontal {
+  height: 8px;
+}
+
+body.semi .el-scrollbar__bar.is-vertical {
+  width: 8px;
+}
+
+body.semi .el-scrollbar__bar.is-horizontal > .el-scrollbar__thumb {
+  height: 100%;
+}
+
+body.semi .el-scrollbar__bar.is-vertical > .el-scrollbar__thumb {
+  width: 100%;
+}

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

@@ -0,0 +1,59 @@
+/**
+ * Element Plus Segmented 分段控制器 - Semi Design 风格
+ */
+
+body.semi .el-segmented {
+  --el-segmented-item-selected-color: var(--semi-color-text-0);
+  --el-segmented-item-selected-bg-color: #fff;
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  padding: 2px;
+}
+
+body.semi .el-segmented__group {
+  gap: 2px;
+}
+
+body.semi .el-segmented__item {
+  border-radius: calc(var(--semi-border-radius-small) - 2px);
+  color: var(--semi-color-text-1);
+  padding: 0 12px;
+  height: 28px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-segmented__item:hover:not(.is-selected):not(.is-disabled) {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-segmented__item.is-selected {
+  background-color: #fff;
+  color: var(--semi-color-text-0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+body.semi .el-segmented__item.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 大尺寸 */
+body.semi .el-segmented--large .el-segmented__item {
+  padding: 0 16px;
+  height: 36px;
+}
+
+/* 小尺寸 */
+body.semi .el-segmented--small .el-segmented__item {
+  padding: 0 8px;
+  height: 24px;
+  font-size: var(--semi-font-size-small);
+}
+
+/* Block 模式 */
+body.semi .el-segmented.is-block {
+  width: 100%;
+}
+
+body.semi .el-segmented.is-block .el-segmented__item {
+  flex: 1;
+}

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

@@ -0,0 +1,226 @@
+/**
+ * Element Plus Select - Semi Design 风格
+ * 覆盖原有 .el-select 样式
+ */
+
+/* 选择器输入框 - 覆盖 CSS 变量 */
+.semi .el-select {
+  --el-fill-color-blank: var(--semi-color-fill-0);
+  --el-border-color: transparent;
+  --el-border-color-hover: transparent;
+  --el-color-primary: var(--semi-color-focus-border);
+}
+
+/* .el-select__wrapper 是新版 Element Plus Select 的包裹元素 */
+.semi .el-select__wrapper {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none !important;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-select__wrapper.is-hovering:not(.is-focused) {
+  background-color: var(--semi-color-fill-1);
+  box-shadow: none !important;
+}
+
+.semi .el-select__wrapper.is-focused {
+  background-color: var(--semi-color-fill-0);
+  box-shadow: 0 0 0 1px var(--semi-color-focus-border) inset !important;
+}
+
+/* 兼容老版本 Element Plus 使用 el-input__wrapper */
+.semi .el-select .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none !important;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-select .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+  box-shadow: none !important;
+}
+
+.semi .el-select .el-input.is-focus .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+  box-shadow: 0 0 0 1px var(--semi-color-focus-border) inset !important;
+}
+
+/* 选中值 */
+.semi .el-select .el-select__input {
+  color: var(--semi-color-text-0);
+}
+
+.semi .el-select .el-select__placeholder {
+  color: var(--semi-color-text-2);
+}
+
+.semi .el-select .el-select__selected-item {
+  color: var(--semi-color-text-0);
+}
+
+/* 多选标签 */
+.semi .el-select .el-select__tags .el-tag {
+  background-color: var(--semi-color-fill-1);
+  border: none;
+  border-radius: 3px;
+  color: var(--semi-color-text-0);
+  margin: 2px 4px 2px 0;
+}
+
+.semi .el-select .el-select__tags .el-tag .el-tag__close {
+  color: var(--semi-color-text-2);
+}
+
+.semi .el-select .el-select__tags .el-tag .el-tag__close:hover {
+  background-color: var(--semi-color-fill-2);
+  color: var(--semi-color-text-0);
+}
+
+/* 箭头图标 */
+.semi .el-select .el-select__caret {
+  color: var(--semi-color-text-2);
+  transition: transform var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+/* 下拉面板 - teleport 到 body，需要用 body.semi 匹配 */
+body.semi .el-select__popper.el-popper {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-select__popper .el-popper__arrow::before {
+  background: #fff;
+  border: none;
+}
+
+/* 下拉菜单 */
+body.semi .el-select-dropdown {
+  background-color: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  padding: 4px 0;
+}
+
+/* 选项列表容器 */
+body.semi .el-select-dropdown__list {
+  padding: 4px 0;
+}
+
+/* 确保选项支持伪元素定位 */
+body.semi .el-select-dropdown__wrap {
+  max-height: 270px;
+}
+
+/* 选项 - Semi 风格：无圆角，选中透明背景+字体加粗 */
+body.semi .el-select-dropdown__item {
+  position: relative;
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  height: 36px;
+  line-height: 36px;
+  padding: 0 12px;
+  padding-right: 36px; /* 为对勾图标留出空间 */
+  border-radius: 0;
+  transition: background-color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-select-dropdown__item:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-select-dropdown__item:active {
+  background-color: var(--semi-color-fill-1);
+}
+
+/* Semi 选中样式：透明背景 + 字体加粗 + 显示对勾 */
+body.semi .el-select-dropdown__item.is-selected {
+  background-color: transparent;
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+body.semi .el-select-dropdown__item.is-selected:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-select-dropdown__item.is-selected:active {
+  background-color: var(--semi-color-fill-1);
+}
+
+/* 选中项显示对勾图标 */
+body.semi .el-select-dropdown__item.is-selected::after {
+  content: '';
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  width: 6px;
+  height: 10px;
+  border-right: 2px solid var(--semi-color-text-2);
+  border-bottom: 2px solid var(--semi-color-text-2);
+}
+
+body.semi .el-select-dropdown__item.is-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+  background-color: transparent;
+}
+
+body.semi .el-select-dropdown__item.is-disabled:hover {
+  background-color: transparent;
+}
+
+/* 选项组 */
+body.semi .el-select-group__title {
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+  padding: 8px 16px 4px;
+}
+
+body.semi .el-select-group__wrap:not(:last-of-type)::after {
+  background-color: var(--semi-color-border);
+}
+
+/* 空状态 */
+body.semi .el-select-dropdown__empty {
+  color: var(--semi-color-text-3);
+  font-size: var(--semi-font-size-regular);
+  padding: 16px 0;
+  text-align: center;
+}
+
+/* 加载状态 */
+body.semi .el-select-dropdown__loading {
+  color: var(--semi-color-primary);
+}
+
+/* 禁用状态 */
+.semi .el-select__wrapper.is-disabled {
+  background-color: var(--semi-color-disabled-fill);
+  cursor: not-allowed;
+  box-shadow: none !important;
+}
+
+.semi .el-select__wrapper.is-disabled:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
+
+.semi .el-select.is-disabled .el-input__wrapper {
+  background-color: var(--semi-color-disabled-fill);
+  cursor: not-allowed;
+}
+
+.semi .el-select.is-disabled .el-select__input,
+.semi .el-select.is-disabled .el-select__placeholder,
+.semi .el-select__wrapper.is-disabled .el-select__placeholder {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 可过滤 */
+.semi .el-select.is-filterable .el-select__input {
+  color: var(--semi-color-text-0);
+}

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

@@ -0,0 +1,65 @@
+/**
+ * Element Plus Skeleton - Semi Design 风格
+ */
+
+body.semi .el-skeleton {
+  --el-skeleton-color: var(--semi-color-fill-0);
+  --el-skeleton-to-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-skeleton__item {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-skeleton.is-animated .el-skeleton__item {
+  background: linear-gradient(
+    90deg,
+    var(--semi-color-fill-0) 25%,
+    var(--semi-color-fill-1) 37%,
+    var(--semi-color-fill-0) 63%
+  );
+  background-size: 400% 100%;
+  animation: el-skeleton-loading 1.4s ease infinite;
+}
+
+body.semi .el-skeleton__text {
+  height: 16px;
+}
+
+body.semi .el-skeleton__circle {
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .el-skeleton__rect {
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-skeleton__button {
+  height: 32px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-skeleton__caption {
+  height: 14px;
+}
+
+body.semi .el-skeleton__h1 {
+  height: 20px;
+}
+
+body.semi .el-skeleton__h3 {
+  height: 18px;
+}
+
+body.semi .el-skeleton__h5 {
+  height: 16px;
+}
+
+body.semi .el-skeleton__image {
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-skeleton__image svg {
+  fill: var(--semi-color-fill-1);
+}

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

@@ -0,0 +1,93 @@
+/**
+ * Element Plus Slider - Semi Design 风格
+ */
+
+body.semi .el-slider {
+  --el-slider-main-bg-color: var(--semi-color-primary);
+  --el-slider-runway-bg-color: var(--semi-color-fill-0);
+  --el-slider-stop-bg-color: #fff;
+  --el-slider-disabled-color: var(--semi-color-fill-1);
+  --el-slider-border-radius: 100px;
+  --el-slider-height: 4px;
+  --el-slider-button-size: 14px;
+  --el-slider-button-wrapper-size: 24px;
+}
+
+body.semi .el-slider__runway {
+  background-color: var(--semi-color-fill-0);
+  border-radius: 100px;
+  height: 4px;
+}
+
+body.semi .el-slider__bar {
+  background-color: var(--semi-color-primary);
+  border-radius: 100px;
+  height: 4px;
+}
+
+body.semi .el-slider__button-wrapper {
+  width: 24px;
+  height: 24px;
+}
+
+body.semi .el-slider__button {
+  width: 24px;
+  height: 24px;
+  background-color: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-full);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+  position: relative;
+}
+
+/* Semi 风格：白色圆圈内有蓝色小圆点 */
+body.semi .el-slider__button::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 4px;
+  background-color: var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .el-slider__button:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+body.semi .el-slider__stop {
+  background-color: #fff;
+  border: 2px solid var(--semi-color-fill-1);
+  border-radius: var(--semi-border-radius-full);
+  width: 8px;
+  height: 8px;
+}
+
+body.semi .el-slider__marks-text {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+}
+
+body.semi .el-slider.is-disabled .el-slider__runway {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-slider.is-disabled .el-slider__bar {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-slider.is-disabled .el-slider__button {
+  border-color: var(--semi-color-fill-1);
+}
+
+/* 垂直滑块 */
+body.semi .el-slider.is-vertical .el-slider__runway {
+  width: 4px;
+}
+
+body.semi .el-slider.is-vertical .el-slider__bar {
+  width: 4px;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Element Plus Space - Semi Design 风格
+ */
+
+body.semi .el-space {
+  --el-space-gap: 8px;
+}
+
+body.semi .el-space--small {
+  --el-space-gap: 8px;
+}
+
+body.semi .el-space--default {
+  --el-space-gap: 12px;
+}
+
+body.semi .el-space--large {
+  --el-space-gap: 16px;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Element Plus Statistic - Semi Design 风格
+ */
+
+body.semi .el-statistic__head {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+body.semi .el-statistic__content {
+  color: var(--semi-color-text-0);
+  font-size: 28px;
+  font-weight: 600;
+}
+
+body.semi .el-statistic__prefix,
+body.semi .el-statistic__suffix {
+  font-size: 16px;
+}
+
+/* 倒计时 */
+body.semi .el-countdown__content {
+  color: var(--semi-color-text-0);
+  font-size: 28px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+body.semi .el-countdown--danger .el-countdown__content {
+  color: var(--semi-color-danger);
+}

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

@@ -0,0 +1,122 @@
+/**
+ * Element Plus Steps - Semi Design 风格
+ */
+
+body.semi .el-steps {
+  --el-steps-padding: 20px;
+}
+
+body.semi .el-step__head {
+  width: 28px;
+}
+
+body.semi .el-step__head.is-wait {
+  color: var(--semi-color-text-2);
+  border-color: var(--semi-color-border);
+}
+
+body.semi .el-step__head.is-process {
+  color: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-step__head.is-finish {
+  color: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-step__head.is-error {
+  color: var(--semi-color-danger);
+  border-color: var(--semi-color-danger);
+}
+
+body.semi .el-step__head.is-success {
+  color: var(--semi-color-success);
+  border-color: var(--semi-color-success);
+}
+
+body.semi .el-step__icon {
+  width: 28px;
+  height: 28px;
+  font-size: 14px;
+  border-radius: var(--semi-border-radius-full);
+  border-width: 2px;
+}
+
+body.semi .el-step__icon.is-text {
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .el-step__icon-inner {
+  font-weight: 600;
+}
+
+body.semi .el-step__line {
+  background-color: var(--semi-color-border);
+}
+
+body.semi .el-step__line-inner {
+  background-color: var(--semi-color-primary);
+}
+
+body.semi .el-step__title {
+  font-size: var(--semi-font-size-regular);
+  font-weight: 600;
+  line-height: 28px;
+}
+
+body.semi .el-step__title.is-wait {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-step__title.is-process {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-step__title.is-finish {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-step__title.is-error {
+  color: var(--semi-color-danger);
+}
+
+body.semi .el-step__title.is-success {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-step__description {
+  font-size: var(--semi-font-size-small);
+  margin-top: 4px;
+}
+
+body.semi .el-step__description.is-wait {
+  color: var(--semi-color-text-3);
+}
+
+body.semi .el-step__description.is-process {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-step__description.is-finish {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-step__description.is-error {
+  color: var(--semi-color-danger);
+}
+
+body.semi .el-step__description.is-success {
+  color: var(--semi-color-text-2);
+}
+
+/* 简洁风格 */
+body.semi .el-steps--simple {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  padding: 12px 20px;
+}
+
+body.semi .el-steps--simple .el-step__arrow {
+  color: var(--semi-color-text-3);
+}