advance-semi-theme 1.0.0

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

@@ -0,0 +1,35 @@
+/**
+ * Element Plus CheckTag - Semi Design 风格
+ */
+
+body.semi .el-check-tag {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-1);
+  padding: 4px 12px;
+  font-size: var(--semi-font-size-small);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-check-tag:hover {
+  background-color: var(--semi-color-fill-1);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-check-tag.is-checked {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-check-tag.is-checked:hover {
+  background-color: var(--semi-color-primary-light-hover);
+}
+
+/* 尺寸 */
+body.semi .el-check-tag--small {
+  padding: 2px 8px;
+}
+
+body.semi .el-check-tag--large {
+  padding: 6px 16px;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Element Plus Checkbox - Semi Design 风格
+ */
+
+body.semi .el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-checkbox__inner {
+  border-radius: var(--semi-border-radius-extra-small);
+  border-color: var(--semi-color-border);
+}
+
+body.semi .el-checkbox__inner:hover {
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-checkbox__label {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-checkbox.is-disabled .el-checkbox__inner {
+  background-color: var(--semi-color-disabled-bg);
+  border-color: var(--semi-color-border);
+}
+
+body.semi .el-checkbox.is-disabled .el-checkbox__label {
+  color: var(--semi-color-disabled-text);
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Element Plus Collapse - Semi Design 风格
+ */
+
+body.semi .el-collapse {
+  border: none;
+}
+
+body.semi .el-collapse-item__header {
+  background-color: transparent;
+  border-bottom: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+  padding: 12px 0;
+  height: auto;
+  line-height: 1.5;
+}
+
+body.semi .el-collapse-item__header:hover {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-collapse-item__header.is-active {
+  border-bottom-color: var(--semi-color-border);
+}
+
+body.semi .el-collapse-item__arrow {
+  color: var(--semi-color-text-2);
+  margin-right: 8px;
+}
+
+body.semi .el-collapse-item__wrap {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-collapse-item__content {
+  color: var(--semi-color-text-1);
+  padding: 16px 0;
+}
+
+body.semi .el-collapse-item:last-child .el-collapse-item__header {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+/* 带边框的折叠面板 */
+body.semi .el-collapse.el-collapse--borderless {
+  border: none;
+}
+
+body.semi .el-collapse.el-collapse--borderless .el-collapse-item__header {
+  border-bottom: none;
+  border-radius: var(--semi-border-radius-small);
+  padding: 12px 16px;
+}
+
+body.semi .el-collapse.el-collapse--borderless .el-collapse-item__header:hover {
+  background-color: var(--semi-color-fill-0);
+}

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

@@ -0,0 +1,82 @@
+/**
+ * Element Plus ColorPicker - Semi Design 风格
+ */
+
+body.semi .el-color-picker__trigger {
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  padding: 4px;
+}
+
+body.semi .el-color-picker__trigger:hover {
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-color-picker__color {
+  border: none;
+  border-radius: 2px;
+}
+
+body.semi .el-color-picker__color-inner {
+  border-radius: 2px;
+}
+
+body.semi .el-color-picker__icon {
+  color: var(--semi-color-text-2);
+}
+
+/* 面板 */
+body.semi .el-color-picker__panel {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-color-svpanel {
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-color-hue-slider {
+  border-radius: 100px;
+}
+
+body.semi .el-color-hue-slider__thumb {
+  border-radius: 100px;
+  border: 2px solid #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+body.semi .el-color-alpha-slider {
+  border-radius: 100px;
+}
+
+body.semi .el-color-alpha-slider__thumb {
+  border-radius: 100px;
+  border: 2px solid #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+body.semi .el-color-dropdown__btns {
+  border-top: 1px solid var(--semi-color-border);
+  padding: 8px 12px;
+}
+
+body.semi .el-color-dropdown__value {
+  font-size: var(--semi-font-size-small);
+}
+
+body.semi .el-color-predefine__color-selector {
+  border-radius: 2px;
+}
+
+body.semi .el-color-predefine__color-selector > div {
+  border-radius: 2px;
+}
+
+/* 禁用状态 */
+body.semi .el-color-picker.is-disabled .el-color-picker__trigger {
+  cursor: not-allowed;
+  background-color: var(--semi-color-disabled-fill);
+  border-color: transparent;
+}

package/dist/element/styles/components/config-provider.css

@@ -0,0 +1,6 @@
+/**
+ * Element Plus ConfigProvider - Semi Design 风格
+ * ConfigProvider 主要用于全局配置，无需特殊样式
+ */
+
+/* 无需样式 */

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

@@ -0,0 +1,26 @@
+/**
+ * Element Plus Container 布局容器 - Semi Design 风格
+ */
+
+body.semi .el-container {
+  min-height: 100%;
+}
+
+body.semi .el-header {
+  background-color: var(--semi-color-bg-0);
+  padding: 0 24px;
+}
+
+body.semi .el-aside {
+  background-color: var(--semi-color-bg-1);
+}
+
+body.semi .el-main {
+  background-color: var(--semi-color-bg-2);
+  padding: 24px;
+}
+
+body.semi .el-footer {
+  background-color: var(--semi-color-bg-0);
+  padding: 0 24px;
+}

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

@@ -0,0 +1,165 @@
+/**
+ * Element Plus DatePicker - Semi Design 风格
+ */
+
+/* 输入框 */
+body.semi .el-date-editor.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-date-editor.el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-date-editor.el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+}
+
+/* 面板容器 */
+body.semi .el-picker__popper {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-picker-panel {
+  background: #fff;
+  border: none;
+}
+
+/* 头部 */
+body.semi .el-date-picker__header {
+  padding: 12px;
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-date-picker__header-label {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+body.semi .el-picker-panel__icon-btn {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-picker-panel__icon-btn:hover {
+  color: var(--semi-color-primary);
+}
+
+/* 日期内容 */
+body.semi .el-date-table th {
+  color: var(--semi-color-text-2);
+  font-weight: 400;
+  border-bottom: none;
+  padding: 8px 0;
+}
+
+body.semi .el-date-table td {
+  padding: 4px 0;
+}
+
+body.semi .el-date-table td .el-date-table-cell {
+  padding: 0;
+}
+
+body.semi .el-date-table td .el-date-table-cell__text {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-date-table td.today .el-date-table-cell__text {
+  color: var(--semi-color-primary);
+  font-weight: 600;
+}
+
+body.semi .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
+  background-color: var(--semi-color-primary);
+  color: #fff;
+}
+
+body.semi .el-date-table td.available:hover .el-date-table-cell__text {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-date-table td.disabled .el-date-table-cell__text {
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+}
+
+body.semi .el-date-table td.prev-month .el-date-table-cell__text,
+body.semi .el-date-table td.next-month .el-date-table-cell__text {
+  color: var(--semi-color-text-3);
+}
+
+/* 范围选择 */
+body.semi .el-date-table td.in-range .el-date-table-cell {
+  background-color: var(--semi-color-primary-light-default);
+}
+
+body.semi .el-date-table td.start-date .el-date-table-cell,
+body.semi .el-date-table td.end-date .el-date-table-cell {
+  background-color: var(--semi-color-primary-light-default);
+}
+
+/* 月份/年份选择 */
+body.semi .el-month-table td .cell,
+body.semi .el-year-table td .cell {
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-month-table td.current:not(.disabled) .cell,
+body.semi .el-year-table td.current:not(.disabled) .cell {
+  background-color: var(--semi-color-primary);
+  color: #fff;
+}
+
+body.semi .el-month-table td .cell:hover,
+body.semi .el-year-table td .cell:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* 时间选择 */
+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-spinner__item {
+  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-picker-panel__footer {
+  background: #fff;
+  border-top: 1px solid var(--semi-color-border);
+  padding: 8px 12px;
+}
+
+body.semi .el-picker-panel__link-btn {
+  color: var(--semi-color-primary);
+}

package/dist/element/styles/components/descriptions-item.css

@@ -0,0 +1,6 @@
+/**
+ * Element Plus DescriptionsItem - Semi Design 风格
+ * 样式已在 descriptions.css 中定义
+ */
+
+/* 见 descriptions.css */

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

@@ -0,0 +1,51 @@
+/**
+ * Element Plus Descriptions - Semi Design 风格
+ */
+
+body.semi .el-descriptions {
+  --el-descriptions-item-bordered-label-background: var(--semi-color-fill-0);
+}
+
+body.semi .el-descriptions__title {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+  font-size: 16px;
+}
+
+body.semi .el-descriptions__body {
+  background-color: transparent;
+}
+
+body.semi .el-descriptions__label {
+  color: var(--semi-color-text-2);
+  font-weight: 400;
+}
+
+body.semi .el-descriptions__content {
+  color: var(--semi-color-text-0);
+}
+
+/* 带边框 */
+body.semi .el-descriptions--bordered .el-descriptions__body {
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-descriptions--bordered .el-descriptions__cell {
+  border: 1px solid var(--semi-color-border);
+  padding: 12px 16px;
+}
+
+body.semi .el-descriptions--bordered .el-descriptions__label {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* 不带边框 */
+body.semi .el-descriptions:not(.el-descriptions--bordered) .el-descriptions__cell {
+  padding: 8px 0;
+}
+
+/* 额外信息 */
+body.semi .el-descriptions__extra {
+  color: var(--semi-color-text-1);
+}

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

@@ -0,0 +1,91 @@
+/**
+ * Element Plus Dialog - Semi Design 风格
+ * 覆盖原有 .el-dialog 样式
+ */
+
+/* CSS 变量覆盖 */
+body.semi .el-dialog {
+  --el-dialog-bg-color: #fff;
+  --el-dialog-box-shadow: var(--semi-shadow-elevated);
+  --el-dialog-title-font-size: 16px;
+  --el-dialog-content-font-size: 14px;
+  --el-dialog-font-line-height: 24px;
+  --el-dialog-padding-primary: 24px;
+  --el-dialog-border-radius: var(--semi-border-radius-large);
+  
+  border-radius: var(--semi-border-radius-large);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+/* 对话框标题 */
+body.semi .el-dialog__title {
+  color: var(--semi-color-text-0);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+/* 对话框头部 */
+body.semi .el-dialog__header {
+  padding: 20px 24px 16px;
+}
+
+/* 关闭按钮 */
+body.semi .el-dialog__headerbtn {
+  width: 40px;
+  height: 40px;
+  top: 10px;
+  right: 10px;
+  border-radius: var(--semi-border-radius-small);
+  transition: background-color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-dialog__headerbtn:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-dialog__headerbtn .el-dialog__close {
+  color: var(--semi-color-text-2);
+  font-size: 16px;
+}
+
+body.semi .el-dialog__headerbtn:hover .el-dialog__close {
+  color: var(--semi-color-text-0);
+}
+
+/* 对话框内容 */
+body.semi .el-dialog__body {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  line-height: 20px;
+  padding: 0 24px;
+}
+
+/* 对话框底部 */
+body.semi .el-dialog__footer {
+  padding: 16px 24px 20px;
+}
+
+/* 遮罩层 */
+body.semi .el-overlay {
+  background-color: rgba(22, 22, 26, 0.6);
+}
+
+/* 全屏对话框 */
+body.semi .el-dialog.is-fullscreen {
+  border-radius: 0;
+}
+
+/* 居中对话框 */
+body.semi .el-dialog--center .el-dialog__header {
+  text-align: center;
+}
+
+body.semi .el-dialog--center .el-dialog__footer {
+  text-align: center;
+}
+
+/* 可拖拽对话框 */
+body.semi .el-dialog.is-draggable .el-dialog__header {
+  cursor: move;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Element Plus Divider - Semi Design 风格
+ */
+
+body.semi .el-divider {
+  --el-border-color: var(--semi-color-border);
+}
+
+body.semi .el-divider--horizontal {
+  margin: 24px 0;
+  border-top: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-divider--vertical {
+  margin: 0 8px;
+  border-left: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-divider__text {
+  background-color: var(--semi-color-bg-0);
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+  padding: 0 16px;
+}
+
+body.semi .el-divider__text.is-left {
+  left: 20px;
+}
+
+body.semi .el-divider__text.is-right {
+  right: 20px;
+}
+
+/* 虚线 */
+body.semi .el-divider--dashed {
+  border-style: dashed;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Element Plus Drawer - Semi Design 风格
+ */
+
+body.semi .el-drawer {
+  box-shadow: var(--semi-shadow-floating);
+}
+
+body.semi .el-drawer__header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--semi-color-border);
+  margin-bottom: 0;
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+body.semi .el-drawer__body {
+  padding: 20px;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-drawer__footer {
+  padding: 12px 20px;
+  border-top: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-drawer__close-btn {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-drawer__close-btn:hover {
+  color: var(--semi-color-text-0);
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Element Plus Dropdown - Semi Design 风格
+ */
+
+body.semi .el-dropdown-menu {
+  background-color: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 4px;
+}
+
+body.semi .el-dropdown-menu__item {
+  color: var(--semi-color-text-0);
+  border-radius: 0;
+  padding: 8px 12px;
+}
+
+body.semi .el-dropdown-menu__item:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-dropdown-menu__item--divided {
+  border-top-color: var(--semi-color-border);
+}
+
+body.semi .el-dropdown-menu__item.is-disabled {
+  color: var(--semi-color-disabled-text);
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Element Plus Empty - Semi Design 风格
+ */
+
+body.semi .el-empty {
+  padding: 40px 0;
+}
+
+body.semi .el-empty__image {
+  width: 160px;
+}
+
+body.semi .el-empty__image svg {
+  fill: var(--semi-color-fill-1);
+}
+
+body.semi .el-empty__description {
+  margin-top: 16px;
+}
+
+body.semi .el-empty__description p {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .el-empty__bottom {
+  margin-top: 20px;
+}