advance-semi-theme 1.0.0

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

@@ -0,0 +1,58 @@
+/**
+ * Element Plus Tour 漫游式引导 - Semi Design 风格
+ */
+
+body.semi .el-tour {
+  --el-tour-title-font-size: 16px;
+  --el-tour-title-font-weight: 600;
+  --el-tour-padding-primary: 16px;
+}
+
+body.semi .el-tour__content {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 16px;
+}
+
+body.semi .el-tour__header {
+  padding-bottom: 8px;
+}
+
+body.semi .el-tour__title {
+  color: var(--semi-color-text-0);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+body.semi .el-tour__close {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-tour__close:hover {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-tour__body {
+  color: var(--semi-color-text-1);
+  font-size: var(--semi-font-size-regular);
+  padding: 8px 0;
+}
+
+body.semi .el-tour__footer {
+  padding-top: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+body.semi .el-tour__indicators {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+}
+
+/* 箭头 */
+body.semi .el-tour__arrow {
+  background: #fff;
+}

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

@@ -0,0 +1,181 @@
+/**
+ * Element Plus Transfer - Semi Design 风格
+ * 参考 semi-foundation/transfer/variables.scss
+ */
+
+/* 穿梭框整体 */
+body.semi .el-transfer {
+  --el-transfer-border-color: var(--semi-color-border);
+  --el-transfer-border-radius: var(--semi-border-radius-medium);
+  --el-transfer-panel-header-bg-color: var(--semi-color-bg-1);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 面板 */
+body.semi .el-transfer-panel {
+  background: var(--semi-color-bg-1);
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  overflow: hidden;
+}
+
+/* 面板主体 - 包含边框 */
+body.semi .el-transfer-panel__body {
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+  padding: 0;
+}
+
+body.semi .el-transfer-panel__body.is-with-footer {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* 头部 - 白色背景 */
+body.semi .el-transfer-panel__header {
+  background-color: var(--semi-color-bg-1);
+  border: 1px solid var(--semi-color-border);
+  border-bottom: none;
+  border-radius: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0;
+  padding: 12px 12px 8px;
+  height: auto;
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-transfer-panel__header .el-checkbox {
+  width: 100%;
+}
+
+body.semi .el-transfer-panel__header .el-checkbox__label {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  font-weight: 600;
+}
+
+body.semi .el-transfer-panel__header .el-checkbox__label span {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  font-weight: normal;
+}
+
+/* 搜索框 - 灰色填充背景 */
+body.semi .el-transfer-panel__filter {
+  padding: 12px 12px 0;
+  margin: 0;
+}
+
+body.semi .el-transfer-panel__filter .el-input__wrapper {
+  background-color: var(--semi-color-fill-0) !important;
+  border: 1px solid transparent;
+  box-shadow: none !important;
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-transfer-panel__filter .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1) !important;
+}
+
+body.semi .el-transfer-panel__filter .el-input__wrapper.is-focus,
+body.semi .el-transfer-panel__filter .el-input.is-focus .el-input__wrapper {
+  background-color: var(--semi-color-fill-0) !important;
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none !important;
+}
+
+body.semi .el-transfer-panel__filter .el-input__inner::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 列表 */
+body.semi .el-transfer-panel__list {
+  padding: 4px 0;
+}
+
+/* 列表项 */
+body.semi .el-transfer-panel__item {
+  height: 36px;
+  line-height: 36px;
+  padding-left: 12px;
+  padding-right: 12px;
+  color: var(--semi-color-text-1);
+  transition: background-color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-transfer-panel__item:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-transfer-panel__item:active {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-transfer-panel__item.el-checkbox .el-checkbox__label {
+  color: inherit;
+}
+
+body.semi .el-transfer-panel__item.is-disabled {
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+}
+
+body.semi .el-transfer-panel__item.is-disabled:hover {
+  background-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+
+/* 空状态 */
+body.semi .el-transfer-panel__empty {
+  color: var(--semi-color-text-2);
+  height: 36px;
+  line-height: 36px;
+}
+
+/* 底部 */
+body.semi .el-transfer-panel__footer {
+  border: 1px solid var(--semi-color-border);
+  border-top: none;
+  border-radius: 0 0 var(--semi-border-radius-medium) var(--semi-border-radius-medium);
+  background: var(--semi-color-bg-1);
+  padding: 8px 12px;
+}
+
+/* 操作按钮 */
+body.semi .el-transfer__buttons {
+  padding: 0 8px;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+  vertical-align: middle;
+}
+
+body.semi .el-transfer__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  margin: 0;
+  background-color: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-transfer__button:nth-child(2) {
+  margin-left: 0;
+}
+
+body.semi .el-transfer__button:hover {
+  background-color: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
+}
+
+body.semi .el-transfer__button.is-disabled {
+  background-color: var(--semi-color-fill-0);
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+
+body.semi .el-transfer__button.is-disabled:hover {
+  background-color: var(--semi-color-fill-0);
+  border-color: transparent;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Element Plus TreeSelect - Semi Design 风格
+ */
+
+body.semi .el-tree-select .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-tree-select .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-tree-select .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+}
+
+/* 下拉面板 */
+body.semi .el-tree-select__popper {
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+/* 树组件样式继承 tree.css */

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

@@ -0,0 +1,66 @@
+/**
+ * Element Plus Tree - Semi Design 风格
+ */
+
+body.semi .el-tree {
+  background-color: transparent;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-tree-node__content {
+  height: 32px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-tree-node__content:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-tree-node.is-current > .el-tree-node__content {
+  background-color: var(--semi-color-primary-light-default);
+}
+
+body.semi .el-tree-node__expand-icon {
+  color: var(--semi-color-text-2);
+  font-size: 14px;
+}
+
+body.semi .el-tree-node__expand-icon.is-leaf {
+  color: transparent;
+}
+
+body.semi .el-tree-node__label {
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .el-tree-node.is-disabled > .el-tree-node__content {
+  color: var(--semi-color-disabled-text);
+}
+
+body.semi .el-tree-node.is-disabled > .el-tree-node__content:hover {
+  background-color: transparent;
+}
+
+/* 复选框 */
+body.semi .el-tree-node__content .el-checkbox {
+  margin-right: 8px;
+}
+
+/* 可拖拽 */
+body.semi .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: var(--semi-color-primary-light-default);
+}
+
+/* 过滤为空 */
+body.semi .el-tree__empty-block {
+  color: var(--semi-color-text-3);
+}
+
+body.semi .el-tree__empty-text {
+  color: var(--semi-color-text-3);
+}
+
+/* 加载中 */
+body.semi .el-tree-node__loading-icon {
+  color: var(--semi-color-primary);
+}

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

@@ -0,0 +1,96 @@
+/**
+ * Element Plus Upload - Semi Design 风格
+ */
+
+/* 上传按钮 */
+body.semi .el-upload--picture-card {
+  background-color: var(--semi-color-fill-0);
+  border: 1px dashed var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-upload--picture-card:hover {
+  border-color: var(--semi-color-primary);
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-upload-dragger {
+  background-color: var(--semi-color-fill-0);
+  border: 1px dashed var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  padding: 40px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-upload-dragger:hover {
+  border-color: var(--semi-color-primary);
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-upload-dragger.is-dragover {
+  border-color: var(--semi-color-primary);
+  background-color: var(--semi-color-primary-light-default);
+}
+
+body.semi .el-upload-dragger .el-icon--upload {
+  color: var(--semi-color-text-2);
+  font-size: 48px;
+}
+
+body.semi .el-upload-dragger .el-upload__text {
+  color: var(--semi-color-text-1);
+}
+
+body.semi .el-upload-dragger .el-upload__text em {
+  color: var(--semi-color-primary);
+}
+
+/* 文件列表 */
+body.semi .el-upload-list__item {
+  border-radius: var(--semi-border-radius-small);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-upload-list__item:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-upload-list__item-name {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-upload-list__item-status-label {
+  color: var(--semi-color-success);
+}
+
+body.semi .el-upload-list__item .el-icon--close {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-upload-list__item .el-icon--close:hover {
+  color: var(--semi-color-danger);
+}
+
+/* 图片卡片 */
+body.semi .el-upload-list--picture-card .el-upload-list__item {
+  border-radius: var(--semi-border-radius-small);
+  border: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-upload-list--picture-card .el-upload-list__item:hover {
+  border-color: var(--semi-color-primary);
+}
+
+body.semi .el-upload-list__item-actions {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* 进度条 */
+body.semi .el-upload-list__item .el-progress {
+  --el-color-primary: var(--semi-color-primary);
+}
+
+body.semi .el-upload-list__item .el-progress__text {
+  color: var(--semi-color-text-1);
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Element Plus Virtualized 虚拟化组件 - Semi Design 风格
+ * 包括 TableV2, SelectV2 等
+ */
+
+/* SelectV2 */
+body.semi .el-select-v2 .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-select-v2 .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-select-v2 .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+}
+
+body.semi .el-select-v2__popper {
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-select-v2-dropdown__option-item {
+  padding: 8px 16px;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-select-v2-dropdown__option-item:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-select-v2-dropdown__option-item.is-selected {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+body.semi .el-select-v2-dropdown__option-item.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* TableV2 */
+body.semi .el-table-v2 {
+  --el-table-border-color: var(--semi-color-border);
+  --el-table-header-bg-color: var(--semi-color-fill-0);
+  --el-table-row-hover-bg-color: var(--semi-color-fill-0);
+  --el-table-text-color: var(--semi-color-text-0);
+}
+
+body.semi .el-table-v2__header-cell {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-text-2);
+  font-weight: 600;
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+body.semi .el-table-v2__row-cell {
+  border-bottom: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-table-v2__row:hover .el-table-v2__row-cell {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* 空状态 */
+body.semi .el-table-v2__empty {
+  color: var(--semi-color-text-3);
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Element Plus Watermark - Semi Design 风格
+ * 注：Element Plus 无官方 Watermark 组件，此为预留
+ */
+
+body.semi .el-watermark {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+body.semi .el-watermark__content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-repeat: repeat;
+}

package/dist/element/styles/dark.css

@@ -0,0 +1,82 @@
+/**
+ * Semi Theme for Element Plus - 深色模式样式
+ * 
+ * 使用方式：
+ * import 'semi-theme/element/styles/dark'
+ * 
+ * 或者通过插件启用：
+ * app.use(createSemiTheme({ dark: true }))
+ */
+
+/* 深色模式额外样式调整 */
+.semi-dark,
+.semi.dark,
+[data-theme="dark"] .semi,
+html.dark .semi {
+  color-scheme: dark;
+}
+
+/* Element Plus 深色模式组件调整 */
+html.dark .el-button--default,
+.semi-dark .el-button--default {
+  --el-button-bg-color: var(--semi-color-fill-0);
+  --el-button-border-color: transparent;
+  --el-button-hover-bg-color: var(--semi-color-fill-1);
+  --el-button-hover-border-color: transparent;
+}
+
+html.dark .el-input__wrapper,
+.semi-dark .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+  box-shadow: none;
+}
+
+html.dark .el-select .el-input__wrapper,
+.semi-dark .el-select .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+}
+
+html.dark .el-card,
+.semi-dark .el-card {
+  background-color: var(--semi-color-bg-1);
+  border-color: var(--semi-color-border);
+}
+
+html.dark .el-dialog,
+.semi-dark .el-dialog {
+  background-color: var(--semi-color-bg-1);
+}
+
+html.dark .el-drawer,
+.semi-dark .el-drawer {
+  background-color: var(--semi-color-bg-1);
+}
+
+html.dark .el-table,
+.semi-dark .el-table {
+  --el-table-bg-color: var(--semi-color-bg-0);
+  --el-table-tr-bg-color: var(--semi-color-bg-0);
+  --el-table-header-bg-color: var(--semi-color-bg-1);
+  --el-table-row-hover-bg-color: var(--semi-color-fill-0);
+}
+
+html.dark .el-menu,
+.semi-dark .el-menu {
+  background-color: var(--semi-color-bg-0);
+  border-color: var(--semi-color-border);
+}
+
+html.dark .el-dropdown-menu,
+.semi-dark .el-dropdown-menu {
+  background-color: var(--semi-color-bg-1);
+}
+
+html.dark .el-popover,
+.semi-dark .el-popover {
+  background-color: var(--semi-color-bg-1);
+}
+
+html.dark .el-tooltip__popper,
+.semi-dark .el-tooltip__popper {
+  background-color: var(--semi-color-bg-3);
+}