@phelan/design 0.0.1

package/packages/styles/README.md

@@ -0,0 +1,107 @@
+# @m-design/styles
+
+M-Design 样式库，提供变量、混入、样式覆写和工具类。
+
+## 安装
+
+```bash
+npm install @m-design/styles
+# 或
+pnpm add @m-design/styles
+# 或
+yarn add @m-design/styles
+```
+
+## 依赖
+
+- Element Plus 2.4.0+
+- Sass
+
+## 使用方式
+
+### 完整引入
+
+```typescript
+// main.ts
+import 'element-plus/dist/index.css'
+import '@m-design/styles'
+```
+
+### 按需引入
+
+```scss
+// 在你的 SCSS 文件中
+@use '@m-design/styles' as *;
+
+// 或单独引入
+@use '@m-design/styles/variables' as *;
+@use '@m-design/styles/mixins' as *;
+@use '@m-design/styles/utilities' as *;
+@use '@m-design/styles/overrides' as *;
+```
+
+## 样式模块
+
+### 变量 (variables.scss)
+
+提供全局 CSS 变量和 SCSS 变量。
+
+```scss
+@use '@m-design/styles/variables' as *;
+
+.custom-element {
+  color: $text-color-primary;
+  background: var(--m-bg-color);
+}
+```
+
+### 混入 (mixins.scss)
+
+提供可复用的 SCSS 混入函数。
+
+```scss
+@use '@m-design/styles/mixins' as *;
+
+.card {
+  @include flex-center;
+  @include ellipsis;
+}
+```
+
+### 工具类 (utilities.scss)
+
+提供常用的工具类，如间距、文本对齐、Flex 布局等。
+
+```html
+<div class="m-flex-center m-mt-2 m-text-center">
+  内容
+</div>
+```
+
+可用工具类：
+- **间距**: `m-mt-{0-10}`, `m-mb-{0-10}`, `m-ml-{0-10}`, `m-mr-{0-10}`, `m-mx-{0-10}`, `m-my-{0-10}`, `m-pt-{0-10}`, `m-pb-{0-10}`, `m-pl-{0-10}`, `m-pr-{0-10}`, `m-px-{0-10}`, `m-py-{0-10}`
+- **文本**: `m-text-center`, `m-text-left`, `m-text-right`, `m-text-ellipsis`
+- **Flex**: `m-flex`, `m-flex-center`, `m-flex-between`
+
+### 样式覆写 (overrides.scss)
+
+提供对 Element Plus 组件的样式覆写。
+
+```scss
+// 自动应用 Element Plus 样式覆写
+@use '@m-design/styles/overrides' as *;
+```
+
+## 开发
+
+```bash
+# 构建
+pnpm build
+```
+
+## 注意事项
+
+1. 使用 `@use` 替代 `@import`（Sass 推荐方式）
+2. Element Plus 的 CSS 需要单独引入：`@import 'element-plus/dist/index.css'`
+3. `@use` 规则必须写在所有其他规则之前
+

package/packages/styles/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "@m-design/styles",
+    "version": "0.0.6",
+    "description": "M-Design 样式库",
+    "type": "module",
+    "main": "./dist/index.css",
+    "exports": {
+        ".": "./dist/index.css"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "vite build"
+    },
+    "devDependencies": {
+        "sass": "^1.69.5",
+        "vite": "^5.0.8"
+    },
+    "peerDependencies": {
+        "element-plus": "^2.13.0"
+    }
+}

package/packages/styles/src/action-menu.scss

@@ -0,0 +1,103 @@
+@use './theme.scss';
+
+.m-action-menu {
+  height: 100%;
+  padding: 20px;
+  border-radius: 4px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+
+  .m-action-menu-title {
+    color: var(--el-text-color-primary, #101316);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .m-action-menu-button {
+    margin-top: 16px;
+    width: fit-content;
+    flex-shrink: 0;
+  }
+
+  .m-action-menu-empty {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .m-action-menu-list {
+    flex: 1;
+    overflow-y: auto;
+    margin-top: 16px;
+
+    .menu-item {
+      height: 38px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 0 12px;
+      box-sizing: border-box;
+
+      &:hover {
+        border-radius: 3px;
+        background: var(--Gray-blue-Gray-blue-1, #f3f5f9);
+      }
+
+      &.selected {
+        border-radius: 3px;
+        background: var(--el-color-primary-light-9, #f2f7ff);
+
+        .menu-item-title {
+          color: var(--el-color-primary, #0d3a93);
+          font-weight: 700;
+        }
+      }
+
+      &.editing {
+        background: var(--el-color-white, #fff);
+      }
+
+      .menu-item-title {
+        overflow: hidden;
+        color: var(--el-text-color-primary, #101316);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: default;
+      }
+
+      .menu-item-operations {
+        flex-shrink: 0;
+        height: 20px;
+        cursor: pointer;
+      }
+
+      .title-edit-mode {
+        .el-input__wrapper {
+          height: 32px;
+          border-radius: 2px;
+          border: 1px solid var(--el-color-primary, #0d3a93);
+          box-shadow: 0 0 0 2px var(--Projection, #e3ecf9);
+          box-sizing: border-box;
+          padding: 7px 12px;
+          .el-input__inner {
+            height: 18px;
+            font-size: 14px;
+            color: var(--el-text-color-primary);
+          }
+        }
+      }
+    }
+  }
+}

package/packages/styles/src/arrow-step.scss

@@ -0,0 +1,138 @@
+@use './theme.scss';
+
+.m-arrow-step {
+  --m-arrow-step-completed-bg-color: var(--el-color-primary-light-3);
+  --m-arrow-step-in-process-bg-color: var(--el-color-primary);
+  --m-arrow-step-pending-bg-color: #f5f5f6;
+  --m-arrow-step-bg-color: var(--m-arrow-step-pending-bg-color);
+  --m-arrow-step-completed-color: var(--el-color-white);
+  --m-arrow-step-in-process-color: var(--el-color-white);
+  --m-arrow-step-pending-color: var(--el-text-color-secondary);
+  --m-arrow-step-color: var(--m-arrow-step-pending-color);
+
+  flex: 1 1 0;
+  display: flex;
+  color: var(--m-arrow-step-color);
+  overflow: hidden;
+
+  &:not(:first-of-type) {
+    margin-left: -12px;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    flex: none;
+    border: 24px solid transparent;
+    border-right-width: 0;
+  }
+
+  &::before {
+    border-top-color: var(--m-arrow-step-bg-color);
+    border-bottom-color: var(--m-arrow-step-bg-color);
+  }
+
+  &:first-of-type::before {
+    border-left-color: var(--m-arrow-step-bg-color);
+  }
+
+  &::after {
+    border-left-color: var(--m-arrow-step-bg-color);
+  }
+
+  &:last-of-type::after {
+    border-top-color: var(--m-arrow-step-bg-color);
+    border-bottom-color: var(--m-arrow-step-bg-color);
+  }
+
+  .m-arrow-step__main {
+    flex: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    padding: 0 6px;
+    background-color: var(--m-arrow-step-bg-color);
+    overflow: hidden;
+
+    .m-arrow-step__icon-outer {
+      flex: none;
+      margin-right: 8px;
+
+      .m-arrow-step__icon {
+        width: 22px;
+        height: 22px;
+
+        .m-arrow-step__icon-inner {
+          position: relative;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          overflow: hidden;
+
+          .m-arrow-step__icon-inner-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: currentColor;
+            border-radius: 50%;
+          }
+
+          .m-arrow-step__icon-inner-text {
+            position: relative;
+            z-index: 1;
+            font-family: 'ALDI SUED Office';
+            font-weight: 700;
+            font-size: 14px;
+            color: var(--m-arrow-step-bg-color);
+          }
+        }
+      }
+    }
+
+    .m-arrow-step__title {
+      flex: 0 1 auto;
+      display: -webkit-box;
+      line-clamp: 2;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      white-space: normal;
+      line-height: 24px;
+      font-size: 16px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  &.m-arrow-step--completed {
+    --m-arrow-step-bg-color: var(--m-arrow-step-completed-bg-color);
+    --m-arrow-step-color: var(--m-arrow-step-completed-color);
+  }
+
+  &.m-arrow-step--in-process {
+    --m-arrow-step-bg-color: var(--m-arrow-step-in-process-bg-color);
+    --m-arrow-step-color: var(--m-arrow-step-in-process-color);
+  }
+
+  &.m-arrow-step--pending {
+    --m-arrow-step-bg-color: var(--m-arrow-step-pending-bg-color);
+    --m-arrow-step-color: var(--m-arrow-step-pending-color);
+
+    .m-arrow-step__main {
+      .m-arrow-step__icon-outer {
+        .m-arrow-step__icon {
+          .m-arrow-step__icon-inner {
+            .m-arrow-step__icon-inner-bg {
+              opacity: 0.5;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/packages/styles/src/arrow-steps.scss

@@ -0,0 +1,8 @@
+@use './theme.scss';
+
+.m-arrow-steps {
+  width: 100%;
+  background: transparent;
+  display: flex;
+  align-items: center;
+}

package/packages/styles/src/batch-copy.scss

@@ -0,0 +1,40 @@
+@use './theme.scss';
+
+.batch-copy-dialog.m-dialog {
+  .el-dialog__body {
+    padding-bottom: 0;
+  }
+  .el-dialog__footer {
+    padding-top: 16px;
+
+    .default-btn {
+      height: 42px;
+    }
+  }
+}
+.m-batch-copy {
+  .description {
+    color: var(--el-text-color-regular, #343d46);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+  .input-section {
+    margin-top: 16px;
+  }
+
+  .data-section {
+    margin-top: 16px;
+  }
+
+  .invalid-section {
+    margin-top: 8px;
+    color: var(--el-color-error, #d70000);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}

package/packages/styles/src/batch-editor.scss

@@ -0,0 +1,36 @@
+@use './theme.scss';
+.m-batch-editor {
+	// 底部遮罩层
+	padding-bottom: 80px;
+	.el-drawer__body {
+		padding: 16px 32px;
+	}
+	.el-form-item {
+		margin-bottom: 16px;
+	}
+	.desc {
+		color: var(--m-color-warning);
+		margin-bottom: 10px;
+	}
+	.footer {
+		position: absolute;
+		z-index: 10;
+		background-color: var(--m-color-white);
+		height: 80px;
+		box-sizing: border-box;
+		padding: 16px 32px;
+		width: 100%;
+		justify-content: flex-end;
+		display: flex;
+		bottom: 0;
+		right: 0;
+		box-shadow: 0 -6px 10px 0 rgba(13, 58, 147, 0.08); 
+	}
+
+	.el-form-item {
+		margin-bottom: 15px
+	}
+	.el-form-item .el-form-item__label {
+		margin-bottom: 7px;
+	}
+}

package/packages/styles/src/breadcrumb.scss

@@ -0,0 +1,29 @@
+@use './theme.scss';
+
+.m-breadcrumb-item {
+  --m-breadcurmb-color-hover: var(--el-color-primary);
+
+  &.el-breadcrumb__item {
+    color: var(--el-text-color-secondary);
+    .el-breadcrumb__inner {
+      color: var(--el-text-color-secondary);
+    }
+    .el-breadcrumb__inner a,
+    .el-breadcrumb__inner.is-link {
+      font-weight: 400;
+      color: var(--el-text-color-secondary);
+      &:hover {
+        color: var(--m-breadcurmb-color-hover);
+      }
+    }
+    &:last-child {
+      .el-breadcrumb__inner {
+        color: var(--el-color-black);
+        font-weight: 500;
+      }
+    }
+    .el-breadcrumb__separator {
+      font-weight: 400;
+    }
+  }
+}

package/packages/styles/src/button.scss

@@ -0,0 +1,127 @@
+@use './theme.scss';
+
+.m-button {
+  --m-button-min-width: 84px;
+  --m-button-border-radius: var(--el-border-radius-small);
+
+  padding: 8px 16px;
+  border-radius: var(--m-button-border-radius);
+
+  &.m-button-min-width {
+    min-width: var(--m-button-min-width);
+  }
+
+  &.el-button--primary.is-plain {
+    --el-button-hover-border-color: var(--el-color-primary-light-3);
+    --el-button-hover-text-color: var(--el-color-primary-light-3);
+    --el-button-border-color: var(--el-color-primary);
+    --el-button-bg-color: #fff;
+    --el-button-hover-bg-color: #fff;
+    --el-button-active-text-color: var(--el-color-primary);
+    --el-button-active-bg-color: #fff;
+  }
+  &.el-button--primary {
+    --el-button-active-bg-color: var(--el-color-primary);
+    --el-button-active-border-color: var(--el-color-primary);
+  }
+
+  &.el-button--success.is-plain {
+    --el-button-hover-border-color: var(--el-color-success-light-3);
+    --el-button-hover-text-color: var(--el-color-success-light-3);
+    --el-button-border-color: var(--el-color-success);
+    --el-button-bg-color: #fff;
+    --el-button-hover-bg-color: #fff;
+    --el-button-active-text-color: var(--el-color-success);
+    --el-button-active-bg-color: #fff;
+  }
+  &.el-button--success {
+    --el-button-active-color: var(--el-color-success);
+    --el-button-active-bg-color: var(--el-color-success);
+    --el-button-active-border-color: var(--el-color-success);
+  }
+  &.el-button--info.is-plain {
+    --el-button-hover-text-color: var(--el-color-info-light-3);
+    --el-button-hover-border-color: var(--el-color-info-light-3);
+    --el-button-border-color: var(--el-color-info);
+    --el-button-bg-color: #fff;
+    --el-button-hover-bg-color: #fff;
+    --el-button-active-text-color: var(--el-color-info);
+    --el-button-active-bg-color: #fff;
+  }
+  &.el-button--info {
+    --el-button-active-color: var(--el-color-info);
+    --el-button-active-bg-color: var(--el-color-info);
+    --el-button-active-border-color: var(--el-color-info);
+  }
+  &.el-button--danger.is-plain {
+    --el-button-hover-border-color: var(--el-color-danger-light-3);
+    --el-button-hover-text-color: var(--el-color-danger-light-3);
+    --el-button-border-color: var(--el-color-danger);
+    --el-button-bg-color: #fff;
+    --el-button-hover-bg-color: #fff;
+    --el-button-active-text-color: var(--el-color-danger);
+    --el-button-active-bg-color: #fff;
+  }
+  &.el-button--danger {
+    --el-button-active-color: var(--el-color-danger);
+    --el-button-active-bg-color: var(--el-color-danger);
+    --el-button-active-border-color: var(--el-color-danger);
+  }
+
+  &.el-button--warning.is-plain {
+    --el-button-hover-border-color: var(--el-color-warning-light-3);
+    --el-button-hover-text-color: var(--el-color-warning-light-3);
+    --el-button-border-color: var(--el-color-warning);
+    --el-button-bg-color: #fff;
+    --el-button-hover-bg-color: #fff;
+    --el-button-active-text-color: var(--el-color-warning);
+    --el-button-active-bg-color: #fff;
+  }
+  &.el-button--warning {
+    --el-button-active-color: var(--el-color-warning);
+    --el-button-active-bg-color: var(--el-color-warning);
+    --el-button-active-border-color: var(--el-color-warning);
+  }
+
+  &.el-button--primary.is-plain.is-disabled,
+  &.el-button--primary.is-plain.is-disabled:active,
+  &.el-button--primary.is-plain.is-disabled:focus,
+  &.el-button--primary.is-plain.is-disabled:hover {
+    border-color: var(--el-color-primary-light-7);
+    background-color: #fff;
+  }
+
+  &.el-button--success.is-plain.is-disabled,
+  &.el-button--success.is-plain.is-disabled:active,
+  &.el-button--success.is-plain.is-disabled:focus,
+  &.el-button--success.is-plain.is-disabled:hover {
+    border-color: var(--el-color-success-light-7);
+    background-color: #fff;
+  }
+
+  &.el-button--info.is-plain.is-disabled,
+  &.el-button--info.is-plain.is-disabled:active,
+  &.el-button--info.is-plain.is-disabled:focus,
+  &.el-button--info.is-plain.is-disabled:hover {
+    border-color: var(--el-color-info-light-7);
+    background-color: #fff;
+  }
+  &.el-button--danger.is-plain.is-disabled,
+  &.el-button--danger.is-plain.is-disabled:active,
+  &.el-button--danger.is-plain.is-disabled:focus,
+  &.el-button--danger.is-plain.is-disabled:hover {
+    border-color: var(--el-color-danger-light-7);
+    background-color: #fff;
+  }
+  &.el-button--warning.is-plain.is-disabled,
+  &.el-button--warning.is-plain.is-disabled:active,
+  &.el-button--warning.is-plain.is-disabled:focus,
+  &.el-button--warning.is-plain.is-disabled:hover {
+    border-color: var(--el-color-warning-light-7);
+    background-color: #fff;
+  }
+
+  &.el-button--large {
+    --el-button-size: 48px;
+  }
+}