@phelan/design 0.0.1

package/SETUP_GUIDE.md

@@ -0,0 +1,2530 @@
+# M-Design 组件库初始化完整指南
+
+本指南将详细教你如何从零开始创建一个基于 Monorepo 架构的 Vue 3 组件库项目。
+
+## 📋 目录
+
+1. [项目概述](#项目概述)
+2. [环境准备](#环境准备)
+3. [项目初始化](#项目初始化)
+4. [创建 Monorepo 基础结构](#创建-monorepo-基础结构)
+5. [创建组件包 (components)](#创建组件包-components)
+6. [创建图标包 (icons)](#创建图标包-icons)
+7. [创建样式包 (styles)](#创建样式包-styles)
+8. [创建工具包 (utils)](#创建工具包-utils)
+9. [创建文档站点 (docs)](#创建文档站点-docs)
+10. [测试和验证](#测试和验证)
+11. [打包和发布](#打包和发布)
+    - [一、文档站点打包和部署](#一文档站点打包和部署)
+    - [二、Packages 打包](#二packages-打包)
+    - [三、发布到 npm](#三发布到-npm)
+    - [四、CI/CD 自动化发布](#四cicd-自动化发布)
+    - [五、发布命令速查表](#五发布命令速查表)
+12. [常见问题](#常见问题)
+
+---
+
+## 项目概述
+
+### 项目结构
+
+```
+m-design/
+├── packages/              # 所有包的目录
+│   ├── components/        # 组件包
+│   ├── icons/            # 图标包
+│   ├── styles/           # 样式包
+│   └── utils/            # 工具包
+├── docs/                 # 文档站点
+├── package.json          # 根 package.json
+├── pnpm-workspace.yaml   # pnpm workspace 配置
+└── tsconfig.json         # TypeScript 配置
+```
+
+### 技术栈
+
+- **Vue 3**: 使用 Composition API
+- **TypeScript**: 完整的类型支持
+- **Element Plus**: 基础 UI 组件库
+- **Vite**: 构建工具
+- **SCSS**: 样式预处理器
+- **VitePress**: 文档站点
+- **pnpm**: 包管理器，支持 workspace
+
+---
+
+## 环境准备
+
+### 1. 安装 Node.js
+
+确保已安装 Node.js >= 18.0.0
+
+```bash
+node -v
+# 应该显示 v18.x.x 或更高版本
+```
+
+### 2. 安装 pnpm
+
+```bash
+npm install -g pnpm
+# 或
+npm install -g pnpm@latest
+```
+
+验证安装：
+
+```bash
+pnpm -v
+# 应该显示 8.x.x 或更高版本
+```
+
+### 3. 创建项目目录
+
+```bash
+mkdir m-design
+cd m-design
+```
+
+---
+
+## 项目初始化
+
+### 步骤 1: 初始化根 package.json
+
+创建根目录的 `package.json`：
+
+```json
+{
+  "name": "m-design",
+  "version": "1.0.0",
+  "description": "后台管理系统前端组件库",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm --filter docs dev",
+    "build": "pnpm -r --filter './packages/*' build",
+    "build:docs": "pnpm --filter docs build",
+    "preview:docs": "pnpm --filter docs preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "type-check": "pnpm -r --filter './packages/*' type-check"
+  },
+  "keywords": [
+    "vue3",
+    "component-library",
+    "element-plus",
+    "monorepo"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8",
+    "vitepress": "^1.0.0-rc.31",
+    "vue-tsc": "^1.8.27"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.0.0"
+  }
+}
+```
+
+### 步骤 2: 创建 pnpm workspace 配置
+
+创建 `pnpm-workspace.yaml`：
+
+```yaml
+packages:
+  - 'packages/*'
+  - 'docs'
+```
+
+### 步骤 3: 创建 .npmrc 配置
+
+创建 `.npmrc`：
+
+```
+shamefully-hoist=true
+strict-peer-dependencies=false
+```
+
+### 步骤 4: 创建 TypeScript 配置
+
+创建根目录 `tsconfig.json`：
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@m-design/components": ["./packages/components/src"],
+      "@m-design/icons": ["./packages/icons/src"],
+      "@m-design/styles": ["./packages/styles/src"],
+      "@m-design/utils": ["./packages/utils/src"]
+    }
+  },
+  "include": ["packages/**/*.ts", "packages/**/*.tsx", "packages/**/*.vue", "docs/**/*.ts", "docs/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+### 步骤 5: 创建 .gitignore
+
+创建 `.gitignore`：
+
+```
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Testing
+coverage
+
+# Production
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Build
+*.tsbuildinfo
+
+# VitePress
+docs/.vitepress/dist
+docs/.vitepress/cache
+```
+
+### 步骤 6: 创建目录结构
+
+```bash
+mkdir -p packages/components/src
+mkdir -p packages/icons/src
+mkdir -p packages/styles/src
+mkdir -p packages/utils/src
+mkdir -p docs
+```
+
+### 步骤 7: 安装依赖
+
+```bash
+pnpm install
+```
+
+---
+
+## 创建组件包 (components)
+
+### 步骤 1: 创建 package.json
+
+在 `packages/components/` 目录下创建 `package.json`：
+
+```json
+{
+  "name": "@m-design/components",
+  "version": "1.0.0",
+  "description": "M-Design 组件库",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly --outDir dist",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "element-plus": "^2.4.0"
+  },
+  "devDependencies": {
+    "@m-design/icons": "workspace:*",
+    "@m-design/utils": "workspace:*",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "element-plus": "^2.4.0",
+    "typescript": "^5.3.3",
+    "vue": "^3.3.0",
+    "vue-tsc": "^1.8.27",
+    "vite": "^5.0.8"
+  }
+}
+```
+
+### 步骤 2: 创建 Vite 配置
+
+创建 `packages/components/vite.config.ts`：
+
+```typescript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'MDesign',
+      fileName: 'index',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['vue', 'element-plus'],
+      output: {
+        globals: {
+          vue: 'Vue',
+          'element-plus': 'ElementPlus'
+        }
+      }
+    },
+    cssCodeSplit: false,
+    sourcemap: true,
+    outDir: 'dist'
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  }
+})
+```
+
+### 步骤 3: 创建 TypeScript 配置
+
+创建 `packages/components/tsconfig.json`：
+
+```json
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+### 步骤 4: 创建 Button 组件
+
+#### 4.1 创建类型定义
+
+创建 `packages/components/src/button/types.ts`：
+
+```typescript
+import type { ComponentSize } from 'element-plus'
+
+export interface ButtonProps {
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+  size?: ComponentSize
+  plain?: boolean
+  round?: boolean
+  circle?: boolean
+  loading?: boolean
+  disabled?: boolean
+  icon?: string
+  autofocus?: boolean
+  nativeType?: 'button' | 'submit' | 'reset'
+}
+```
+
+#### 4.2 创建组件文件
+
+创建 `packages/components/src/button/button.vue`：
+
+```vue
+<template>
+  <el-button
+    :type="type"
+    :size="size"
+    :plain="plain"
+    :round="round"
+    :circle="circle"
+    :loading="loading"
+    :disabled="disabled"
+    :icon="icon"
+    :autofocus="autofocus"
+    :native-type="nativeType"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </el-button>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import type { ButtonProps } from './types'
+
+defineOptions({
+  name: 'MButton'
+})
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  type: 'default',
+  size: 'default',
+  plain: false,
+  round: false,
+  circle: false,
+  loading: false,
+  disabled: false,
+  autofocus: false,
+  nativeType: 'button'
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const handleClick = (event: MouseEvent) => {
+  emit('click', event)
+}
+</script>
+
+<style scoped lang="scss">
+.m-button {
+  // 自定义样式
+}
+</style>
+```
+
+#### 4.3 创建导出文件
+
+创建 `packages/components/src/button/index.ts`：
+
+```typescript
+import MButton from './button.vue'
+import type { App } from 'vue'
+
+MButton.install = (app: App) => {
+  app.component('MButton', MButton)
+}
+
+export { MButton }
+export default MButton
+```
+
+### 步骤 5: 创建 Table 组件
+
+#### 5.1 创建类型定义
+
+创建 `packages/components/src/table/types.ts`：
+
+```typescript
+import type { ComponentSize } from 'element-plus'
+
+export interface TableColumn {
+  prop?: string
+  label?: string
+  width?: string | number
+  minWidth?: string | number
+  fixed?: boolean | 'left' | 'right'
+  sortable?: boolean | 'custom'
+  align?: 'left' | 'center' | 'right'
+  headerAlign?: 'left' | 'center' | 'right'
+  slot?: string
+  // 可以添加更多属性
+}
+
+export interface TableProps {
+  data?: any[]
+  columns?: TableColumn[]
+  height?: string | number
+  maxHeight?: string | number
+  stripe?: boolean
+  border?: boolean
+  size?: ComponentSize
+  fit?: boolean
+  showHeader?: boolean
+  highlightCurrentRow?: boolean
+  emptyText?: string
+  // 可以添加更多属性
+}
+```
+
+#### 5.2 创建组件文件
+
+创建 `packages/components/src/table/table.vue`：
+
+```vue
+<template>
+  <el-table
+    :data="data"
+    :height="height"
+    :max-height="maxHeight"
+    :stripe="stripe"
+    :border="border"
+    :size="size"
+    :fit="fit"
+    :show-header="showHeader"
+    :highlight-current-row="highlightCurrentRow"
+    :empty-text="emptyText"
+  >
+    <template v-for="column in columns" :key="column.prop">
+      <el-table-column
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width"
+        :min-width="column.minWidth"
+        :fixed="column.fixed"
+        :sortable="column.sortable"
+        :align="column.align"
+        :header-align="column.headerAlign"
+      >
+        <template v-if="column.slot" #default="scope">
+          <slot :name="column.slot" :row="scope.row" :column="scope.column" :$index="scope.$index"></slot>
+        </template>
+      </el-table-column>
+    </template>
+    <slot></slot>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import type { TableProps } from './types'
+
+defineOptions({
+  name: 'MTable'
+})
+
+withDefaults(defineProps<TableProps>(), {
+  stripe: false,
+  border: false,
+  size: 'default',
+  fit: true,
+  showHeader: true,
+  highlightCurrentRow: false,
+  emptyText: '暂无数据'
+})
+</script>
+
+<style scoped lang="scss">
+.m-table {
+  // 自定义样式
+}
+</style>
+```
+
+#### 5.3 创建导出文件
+
+创建 `packages/components/src/table/index.ts`：
+
+```typescript
+import MTable from './table.vue'
+import type { App } from 'vue'
+
+MTable.install = (app: App) => {
+  app.component('MTable', MTable)
+}
+
+export { MTable }
+export default MTable
+```
+
+### 步骤 6: 创建主入口文件
+
+创建 `packages/components/src/index.ts`：
+
+```typescript
+import type { App } from 'vue'
+import { MButton } from './button'
+import { MTable } from './table'
+
+// 所有组件
+const components = [
+  { name: 'MButton', component: MButton },
+  { name: 'MTable', component: MTable }
+]
+
+// 全量引入
+const install = (app: App) => {
+  components.forEach(({ name, component }) => {
+    app.component(name, component)
+  })
+}
+
+// 按需引入
+export { MButton, MTable, install }
+
+// 默认导出
+export default {
+  install
+}
+
+// 类型导出
+export type { ButtonProps } from './button/types'
+export type { TableProps, TableColumn } from './table/types'
+```
+
+---
+
+## 创建图标包 (icons)
+
+### 步骤 1: 创建 package.json
+
+在 `packages/icons/` 目录下创建 `package.json`：
+
+```json
+{
+  "name": "@m-design/icons",
+  "version": "1.0.0",
+  "description": "M-Design 图标库",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --outDir dist",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.3.3",
+    "vue": "^3.3.0",
+    "vite": "^5.0.8"
+  }
+}
+```
+
+### 步骤 2: 创建 Vite 配置
+
+创建 `packages/icons/vite.config.ts`：
+
+```typescript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'MDesignIcons',
+      fileName: 'index',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    },
+    sourcemap: true
+  }
+})
+```
+
+### 步骤 3: 创建 TypeScript 配置
+
+创建 `packages/icons/tsconfig.json`：
+
+```json
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+### 步骤 4: 创建图标组件
+
+创建 `packages/icons/src/user.vue`：
+
+```vue
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+    <circle cx="12" cy="7" r="4"></circle>
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: string | number
+  }>(),
+  {
+    size: 16
+  }
+)
+</script>
+```
+
+创建 `packages/icons/src/setting.vue`：
+
+```vue
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="3"></circle>
+    <path
+      d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24"
+    ></path>
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: string | number
+  }>(),
+  {
+    size: 16
+  }
+)
+</script>
+```
+
+### 步骤 5: 创建入口文件
+
+创建 `packages/icons/src/index.ts`：
+
+```typescript
+// 图标组件示例
+export { default as MIconUser } from './user.vue'
+export { default as MIconSetting } from './setting.vue'
+
+// 图标名称列表
+export const iconNames = ['user', 'setting'] as const
+
+export type IconName = typeof iconNames[number]
+```
+
+---
+
+## 创建样式包 (styles)
+
+### 步骤 1: 创建 package.json
+
+在 `packages/styles/` 目录下创建 `package.json`：
+
+```json
+{
+  "name": "@m-design/styles",
+  "version": "1.0.0",
+  "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.4.0"
+  }
+}
+```
+
+### 步骤 2: 创建 Vite 配置
+
+创建 `packages/styles/vite.config.ts`：
+
+```typescript
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "${resolve(__dirname, 'src/variables.scss').replace(/\\/g, '/')}" as *;`
+      }
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.scss'),
+      formats: ['es'],
+      fileName: 'index'
+    },
+    rollupOptions: {
+      output: {
+        assetFileNames: 'index.css'
+      }
+    },
+    cssCodeSplit: false
+  }
+})
+```
+
+### 步骤 3: 创建样式变量
+
+创建 `packages/styles/src/variables.scss`：
+
+```scss
+// 主题色
+$primary-color: #409eff;
+$success-color: #67c23a;
+$warning-color: #e6a23c;
+$danger-color: #f56c6c;
+$info-color: #909399;
+
+// 文字颜色
+$text-color-primary: #303133;
+$text-color-regular: #606266;
+$text-color-secondary: #909399;
+$text-color-placeholder: #c0c4cc;
+
+// 边框颜色
+$border-color-base: #dcdfe6;
+$border-color-light: #e4e7ed;
+$border-color-lighter: #ebeef5;
+$border-color-extra-light: #f2f6fc;
+
+// 背景色
+$bg-color: #ffffff;
+$bg-color-page: #f2f3f5;
+$bg-color-overlay: #ffffff;
+
+// 字体大小
+$font-size-extra-large: 20px;
+$font-size-large: 18px;
+$font-size-medium: 16px;
+$font-size-base: 14px;
+$font-size-small: 13px;
+$font-size-extra-small: 12px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+// 圆角
+$border-radius-base: 4px;
+$border-radius-small: 2px;
+$border-radius-round: 20px;
+$border-radius-circle: 100%;
+
+// 阴影
+$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
+$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+```
+
+### 步骤 4: 创建样式混入
+
+创建 `packages/styles/src/mixins.scss`：
+
+```scss
+// 清除浮动
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+// 文本省略
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 多行文本省略
+@mixin text-ellipsis-multiline($lines: 2) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 居中
+@mixin center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 垂直居中
+@mixin vertical-center {
+  display: flex;
+  align-items: center;
+}
+
+// 水平居中
+@mixin horizontal-center {
+  display: flex;
+  justify-content: center;
+}
+
+// 滚动条样式
+@mixin scrollbar($width: 8px, $thumb-color: #c1c1c1, $track-color: #f1f1f1) {
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $width;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $thumb-color;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $track-color;
+  }
+}
+```
+
+### 步骤 5: 创建样式覆写
+
+创建 `packages/styles/src/overrides.scss`：
+
+```scss
+// Element Plus 样式覆写
+@use './variables.scss' as *;
+
+// 按钮样式覆写
+.el-button {
+  // 自定义按钮样式
+  &.m-button-custom {
+    border-radius: 6px;
+    font-weight: 500;
+  }
+}
+
+// 表格样式覆写
+.el-table {
+  // 自定义表格样式
+  &.m-table-custom {
+    .el-table__header {
+      th {
+        background-color: #f5f7fa;
+        color: $text-color-primary;
+        font-weight: 600;
+      }
+    }
+  }
+}
+```
+
+### 步骤 6: 创建工具类
+
+创建 `packages/styles/src/utilities.scss`：
+
+```scss
+// 工具类
+@use './variables.scss' as *;
+
+// 间距工具类
+@for $i from 0 through 10 {
+  .m-mt-#{$i} {
+    margin-top: #{$i * 4}px !important;
+  }
+  .m-mb-#{$i} {
+    margin-bottom: #{$i * 4}px !important;
+  }
+  .m-ml-#{$i} {
+    margin-left: #{$i * 4}px !important;
+  }
+  .m-mr-#{$i} {
+    margin-right: #{$i * 4}px !important;
+  }
+  .m-mx-#{$i} {
+    margin-left: #{$i * 4}px !important;
+    margin-right: #{$i * 4}px !important;
+  }
+  .m-my-#{$i} {
+    margin-top: #{$i * 4}px !important;
+    margin-bottom: #{$i * 4}px !important;
+  }
+  .m-pt-#{$i} {
+    padding-top: #{$i * 4}px !important;
+  }
+  .m-pb-#{$i} {
+    padding-bottom: #{$i * 4}px !important;
+  }
+  .m-pl-#{$i} {
+    padding-left: #{$i * 4}px !important;
+  }
+  .m-pr-#{$i} {
+    padding-right: #{$i * 4}px !important;
+  }
+  .m-px-#{$i} {
+    padding-left: #{$i * 4}px !important;
+    padding-right: #{$i * 4}px !important;
+  }
+  .m-py-#{$i} {
+    padding-top: #{$i * 4}px !important;
+    padding-bottom: #{$i * 4}px !important;
+  }
+}
+
+// 文本工具类
+.m-text-center {
+  text-align: center !important;
+}
+
+.m-text-left {
+  text-align: left !important;
+}
+
+.m-text-right {
+  text-align: right !important;
+}
+
+.m-text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Flex 工具类
+.m-flex {
+  display: flex !important;
+}
+
+.m-flex-center {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.m-flex-between {
+  display: flex !important;
+  justify-content: space-between !important;
+}
+```
+
+### 步骤 7: 创建主入口文件
+
+创建 `packages/styles/src/index.scss`：
+
+```scss
+// @use 规则必须写在所有其他规则之前
+// 引入变量（使用 @use 替代 @import）
+@use './variables.scss' as *;
+
+// 引入混入（使用 @use 替代 @import）
+@use './mixins.scss' as *;
+
+// 引入样式覆写（使用 @use 替代 @import）
+@use './overrides.scss' as *;
+
+// 引入工具类（使用 @use 替代 @import）
+@use './utilities.scss' as *;
+
+// 注意：Element Plus 的 CSS 需要在单独的地方导入
+// 因为 Sass 不允许在 @use 之后使用 @import
+// 请在使用组件库的地方单独导入：@import 'element-plus/dist/index.css';
+```
+
+---
+
+## 创建工具包 (utils)
+
+### 步骤 1: 创建 package.json
+
+在 `packages/utils/` 目录下创建 `package.json`：
+
+```json
+{
+  "name": "@m-design/utils",
+  "version": "1.0.0",
+  "description": "M-Design 工具方法库",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --outDir dist",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8"
+  }
+}
+```
+
+### 步骤 2: 创建 Vite 配置
+
+创建 `packages/utils/vite.config.ts`：
+
+```typescript
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'MDesignUtils',
+      fileName: 'index',
+      formats: ['es']
+    },
+    sourcemap: true
+  }
+})
+```
+
+### 步骤 3: 创建 TypeScript 配置
+
+创建 `packages/utils/tsconfig.json`：
+
+```json
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+### 步骤 4: 创建工具方法
+
+创建 `packages/utils/src/date.ts`：
+
+```typescript
+/**
+ * 日期格式化
+ */
+export function formatDate(
+  date: Date | number | string,
+  format: string = 'YYYY-MM-DD HH:mm:ss'
+): string {
+  const d = typeof date === 'number' || typeof date === 'string' ? new Date(date) : date
+
+  if (isNaN(d.getTime())) {
+    return ''
+  }
+
+  const year = d.getFullYear()
+  const month = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  const hours = String(d.getHours()).padStart(2, '0')
+  const minutes = String(d.getMinutes()).padStart(2, '0')
+  const seconds = String(d.getSeconds()).padStart(2, '0')
+
+  return format
+    .replace('YYYY', String(year))
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds)
+}
+```
+
+创建 `packages/utils/src/format.ts`：
+
+```typescript
+/**
+ * 格式化文件大小
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${Number((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
+}
+
+/**
+ * 格式化数字（添加千分位）
+ */
+export function formatNumber(num: number | string, decimals: number = 0): string {
+  const n = typeof num === 'string' ? parseFloat(num) : num
+  if (isNaN(n)) return '0'
+  return n.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+```
+
+创建 `packages/utils/src/validate.ts`：
+
+```typescript
+/**
+ * 验证手机号
+ */
+export function validatePhone(phone: string): boolean {
+  const reg = /^1[3-9]\d{9}$/
+  return reg.test(phone)
+}
+
+/**
+ * 验证邮箱
+ */
+export function validateEmail(email: string): boolean {
+  const reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+  return reg.test(email)
+}
+```
+
+创建 `packages/utils/src/storage.ts`：
+
+```typescript
+/**
+ * LocalStorage 操作
+ */
+export const localStorage = {
+  set(key: string, value: any): void {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value))
+    } catch (error) {
+      console.error('LocalStorage set error:', error)
+    }
+  },
+
+  get<T = any>(key: string, defaultValue?: T): T | null {
+    try {
+      const value = window.localStorage.getItem(key)
+      return value ? JSON.parse(value) : defaultValue ?? null
+    } catch (error) {
+      console.error('LocalStorage get error:', error)
+      return defaultValue ?? null
+    }
+  },
+
+  remove(key: string): void {
+    try {
+      window.localStorage.removeItem(key)
+    } catch (error) {
+      console.error('LocalStorage remove error:', error)
+    }
+  },
+
+  clear(): void {
+    try {
+      window.localStorage.clear()
+    } catch (error) {
+      console.error('LocalStorage clear error:', error)
+    }
+  }
+}
+```
+
+创建 `packages/utils/src/common.ts`：
+
+```typescript
+/**
+ * 深拷贝
+ */
+export function deepClone<T>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') return obj
+  if (obj instanceof Date) return new Date(obj.getTime()) as any
+  if (obj instanceof Array) return obj.map((item) => deepClone(item)) as any
+  if (typeof obj === 'object') {
+    const copy: any = {}
+    Object.keys(obj).forEach((key) => {
+      copy[key] = deepClone((obj as any)[key])
+    })
+    return copy
+  }
+  return obj
+}
+
+/**
+ * 防抖
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number = 300
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null
+
+  return function (this: any, ...args: Parameters<T>) {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      func.apply(this, args)
+    }, wait)
+  }
+}
+```
+
+### 步骤 5: 创建入口文件
+
+创建 `packages/utils/src/index.ts`：
+
+```typescript
+// 日期工具
+export * from './date'
+
+// 格式化工具
+export * from './format'
+
+// 验证工具
+export * from './validate'
+
+// 存储工具
+export * from './storage'
+
+// 其他工具
+export * from './common'
+```
+
+---
+
+## 创建文档站点 (docs)
+
+### 步骤 1: 创建 package.json
+
+在 `docs/` 目录下创建 `package.json`：
+
+```json
+{
+  "name": "@m-design/docs",
+  "version": "1.0.0",
+  "description": "M-Design 文档站点",
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "vitepress preview"
+  },
+  "devDependencies": {
+    "@m-design/components": "workspace:*",
+    "@m-design/icons": "workspace:*",
+    "@m-design/styles": "workspace:*",
+    "@m-design/utils": "workspace:*",
+    "element-plus": "^2.4.0",
+    "vue": "^3.3.0",
+    "vitepress": "^1.0.0-rc.31"
+  }
+}
+```
+
+```
+安装 VitePress 与依赖
+pnpm add -D vitepress vue @vitejs/plugin-vue
+ 一键生成 VitePress 骨架（官方脚手架）
+pnpm dlx vitepress init docs
+    ┌ Where to put docs? → docs
+    ┌ Site title → My UI
+    ┌ Site description → Vue3 组件库
+    ┌ Theme → Default Theme
+    ┌ Use TypeScript → Yes
+    ┌ Add VitePress npm scripts → Yes
+```
+### 步骤 2: 创建 VitePress 配置
+
+创建 `docs/.vitepress/config.ts`：
+
+```typescript
+import { defineConfig } from 'vitepress'
+import { resolve } from 'path'
+
+export default defineConfig({
+  title: 'M-Design',
+  description: '后台管理系统前端组件库',
+  base: '/',
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.ico' }]
+  ],
+  markdown: {
+    lineNumbers: false
+  },
+  themeConfig: {
+    nav: [
+      { text: '指南', link: '/guide/introduction' },
+      { text: '组件', link: '/components/button' },
+      { text: '图标', link: '/icons/' },
+      { text: '工具', link: '/utils/' },
+      { text: '样式', link: '/styles/' }
+    ],
+    sidebar: {
+      '/guide/': [
+        {
+          text: '开始',
+          items: [
+            { text: '介绍', link: '/guide/introduction' },
+            { text: '快速开始', link: '/guide/quickstart' },
+            { text: '按需引入', link: '/guide/import-on-demand' }
+          ]
+        }
+      ],
+      '/components/': [
+        {
+          text: '基础组件',
+          items: [
+            { text: 'Button 按钮', link: '/components/button' },
+            { text: 'Table 表格', link: '/components/table' }
+          ]
+        }
+      ]
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com' }
+    ],
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2024 M-Design'
+    }
+  },
+  vite: {
+    resolve: {
+      alias: {
+        '@m-design/components': resolve(__dirname, '../../packages/components/src'),
+        '@m-design/icons': resolve(__dirname, '../../packages/icons/src'),
+        '@m-design/styles': resolve(__dirname, '../../packages/styles/src'),
+        '@m-design/utils': resolve(__dirname, '../../packages/utils/src')
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@use "${resolve(__dirname, '../../packages/styles/src/variables.scss').replace(/\\/g, '/')}" as *;`
+        }
+      }
+    },
+    optimizeDeps: {
+      include: ['element-plus']
+    }
+  }
+})
+```
+
+### 步骤 3: 创建主题配置
+
+创建 `docs/.vitepress/theme/index.ts`：
+
+```typescript
+import DefaultTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import MDesign from '@m-design/components'
+import '@m-design/styles/index.scss'
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.use(ElementPlus)
+    app.use(MDesign)
+  }
+} satisfies Theme
+```
+
+创建 `docs/.vitepress/theme/style.css`：
+
+```css
+:root {
+  --vp-c-brand: #409eff;
+  --vp-c-brand-light: #66b1ff;
+  --vp-c-brand-lighter: #85c1ff;
+  --vp-c-brand-dark: #337ecc;
+  --vp-c-brand-darker: #2b6cb0;
+}
+```
+
+### 步骤 4: 创建 TypeScript 配置
+
+创建 `docs/tsconfig.json`：
+
+```json
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "..",
+    "paths": {
+      "@m-design/components": ["./packages/components/src"],
+      "@m-design/icons": ["./packages/icons/src"],
+      "@m-design/styles": ["./packages/styles/src"],
+      "@m-design/utils": ["./packages/utils/src"]
+    },
+    "types": ["vitepress/client"]
+  },
+  "include": [
+    ".vitepress/**/*.ts",
+    ".vitepress/**/*.vue",
+    "**/*.md"
+  ],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+### 步骤 5: 创建文档页面
+
+创建 `docs/index.md`：
+
+```markdown
+---
+layout: home
+
+hero:
+  name: M-Design
+  text: 后台管理系统组件库
+  tagline: 基于 Vue 3 + TypeScript + Element Plus 构建
+  actions:
+    - theme: brand
+      text: 快速开始
+      link: /guide/quickstart
+    - theme: alt
+      text: 查看组件
+      link: /components/button
+
+features:
+  - icon: ⚡️
+    title: 快速开发
+    details: 基于 Vue 3 Composition API，提供完整的 TypeScript 类型支持
+  - icon: 🎨
+    title: 主题定制
+    details: 支持样式变量定制和 Element Plus 样式覆写
+  - icon: 📦
+    title: 按需引入
+    details: 支持全量引入和按需引入，减少打包体积
+  - icon: 🔧
+    title: 工具丰富
+    details: 提供丰富的工具方法库，包括日期、格式化、验证等
+---
+```
+
+创建 `docs/guide/introduction.md`：
+
+```markdown
+# 介绍
+
+M-Design 是一个基于 Vue 3 + TypeScript + Element Plus 构建的后台管理系统前端组件库。
+
+## 特性
+
+- 🎯 **基于 Vue 3**：使用 Composition API，提供更好的 TypeScript 支持
+- 📦 **Monorepo 架构**：使用 pnpm workspace 管理多包项目
+- 🎨 **主题定制**：支持样式变量定制和 Element Plus 样式覆写
+- 📱 **按需引入**：支持全量引入和按需引入，减少打包体积
+- 🔧 **工具丰富**：提供日期、格式化、验证、存储等工具方法
+- 📚 **文档完善**：使用 VitePress 构建完整的文档站点
+
+## 技术栈
+
+- Vue 3
+- TypeScript
+- Element Plus
+- Vite
+- SCSS
+- VitePress
+```
+
+创建 `docs/guide/quickstart.md`：
+
+```markdown
+# 快速开始
+
+## 安装
+
+使用 pnpm 安装：
+
+\`\`\`bash
+pnpm add @m-design/components @m-design/styles element-plus
+\`\`\`
+
+## 全量引入
+
+在 \`main.ts\` 中引入：
+
+\`\`\`typescript
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import MDesign from '@m-design/components'
+import '@m-design/styles'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(MDesign)
+app.mount('#app')
+\`\`\`
+
+## 按需引入
+
+\`\`\`typescript
+import 'element-plus/dist/index.css'
+import { MButton, MTable } from '@m-design/components'
+import '@m-design/styles'
+\`\`\`
+```
+
+创建 `docs/components/button.md`：
+
+```markdown
+# Button 按钮
+
+按钮用于触发一个操作。
+
+## 基础用法
+
+基础的按钮用法。
+
+\`\`\`vue
+<template>
+  <MButton>默认按钮</MButton>
+  <MButton type="primary">主要按钮</MButton>
+  <MButton type="success">成功按钮</MButton>
+</template>
+\`\`\`
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 类型 | \`'default' \| 'primary' \| 'success'\` | \`'default'\` |
+| size | 尺寸 | \`'large' \| 'default' \| 'small'\` | \`'default'\` |
+```
+
+---
+
+## 测试和验证
+
+### 步骤 1: 安装所有依赖
+
+```bash
+pnpm install
+```
+
+### 步骤 2: 启动文档站点
+
+```bash
+pnpm dev
+```
+
+访问 `http://localhost:5173` 查看文档站点。
+
+### 步骤 3: 构建所有包
+
+```bash
+pnpm build
+```
+
+### 步骤 4: 构建文档站点
+
+```bash
+pnpm build:docs
+```
+
+构建完成后，文档站点会生成在 `docs/.vitepress/dist` 目录下。
+
+---
+
+## 打包和发布
+
+### 一、文档站点打包和部署
+
+#### 1.1 打包文档站点
+
+文档站点使用 VitePress 构建，打包命令：
+
+```bash
+# 在项目根目录执行
+pnpm build:docs
+```
+
+或者进入 docs 目录执行：
+
+```bash
+cd docs
+pnpm build
+```
+
+**打包输出位置**：`docs/.vitepress/dist`
+
+**打包内容**：
+- 所有 Markdown 文件编译后的 HTML
+- 静态资源（图片、字体等）
+- JavaScript 和 CSS 文件
+
+#### 1.2 本地预览打包结果
+
+在发布前，可以先本地预览打包后的结果：
+
+```bash
+# 在项目根目录执行
+pnpm preview:docs
+```
+
+或者：
+
+```bash
+cd docs
+pnpm preview
+```
+
+访问 `http://localhost:4173` 查看预览效果。
+
+#### 1.3 部署到服务器
+
+##### 方式一：使用 Nginx 部署
+
+**步骤 1：将打包文件上传到服务器**
+
+```bash
+# 在本地打包
+pnpm build:docs
+
+# 使用 scp 上传到服务器（替换为你的服务器信息）
+scp -r docs/.vitepress/dist/* user@your-server:/var/www/m-design/
+
+# 或使用 rsync
+rsync -avz docs/.vitepress/dist/ user@your-server:/var/www/m-design/
+```
+
+**步骤 2：配置 Nginx**
+
+在服务器上创建 Nginx 配置文件 `/etc/nginx/sites-available/m-design`：
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;  # 替换为你的域名
+    
+    root /var/www/m-design;
+    index index.html;
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    # 静态资源缓存
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}
+```
+
+**步骤 3：启用配置并重启 Nginx**
+
+```bash
+# 创建软链接
+sudo ln -s /etc/nginx/sites-available/m-design /etc/nginx/sites-enabled/
+
+# 测试配置
+sudo nginx -t
+
+# 重启 Nginx
+sudo systemctl restart nginx
+```
+
+
+### 二、Packages 打包
+
+#### 2.1 打包所有包
+
+在项目根目录执行：
+
+```bash
+pnpm build
+```
+
+这个命令会依次构建 `packages` 目录下的所有包。
+
+**打包输出位置**：
+- `packages/components/dist/` - 组件包
+- `packages/icons/dist/` - 图标包
+- `packages/styles/dist/` - 样式包
+- `packages/utils/dist/` - 工具包
+
+#### 2.2 单独打包某个包
+
+```bash
+# 只打包组件包
+pnpm --filter @m-design/components build
+
+# 只打包图标包
+pnpm --filter @m-design/icons build
+
+# 只打包样式包
+pnpm --filter @m-design/styles build
+
+# 只打包工具包
+pnpm --filter @m-design/utils build
+```
+
+#### 2.3 打包产物说明
+
+**组件包 (`@m-design/components`)**：
+- `dist/index.js` - ES 模块入口
+- `dist/index.d.ts` - TypeScript 类型定义
+- `dist/style.css` - 样式文件（如果有）
+
+**图标包 (`@m-design/icons`)**：
+- `dist/index.js` - ES 模块入口
+- `dist/index.d.ts` - TypeScript 类型定义
+
+**样式包 (`@m-design/styles`)**：
+- `dist/index.css` - 编译后的 CSS 文件
+
+**工具包 (`@m-design/utils`)**：
+- `dist/index.js` - ES 模块入口
+- `dist/index.d.ts` - TypeScript 类型定义
+
+---
+
+### 三、发布到 npm
+
+#### 3.1 准备工作
+
+##### 步骤 1：注册 npm 账号
+
+如果还没有 npm 账号，访问 [npmjs.com](https://www.npmjs.com/) 注册。
+
+##### 步骤 2：登录 npm
+
+```bash
+npm login
+```
+
+输入你的用户名、密码和邮箱。
+
+##### 步骤 3：检查登录状态
+
+```bash
+npm whoami
+```
+
+##### 步骤 4：检查包名是否可用
+
+在发布前，检查包名是否已被占用：
+
+```bash
+# 检查组件包
+npm view @m-design/components
+
+# 检查图标包
+npm view @m-design/icons
+
+# 检查样式包
+npm view @m-design/styles
+
+# 检查工具包
+npm view @m-design/utils
+```
+
+如果包名已被占用，需要修改 `package.json` 中的 `name` 字段。
+
+#### 3.2 配置发布信息
+
+##### 创建 .npmignore 文件（可选）
+
+如果不想使用 `package.json` 中的 `files` 字段，可以创建 `.npmignore` 文件来控制发布内容。
+
+**组件包 (`packages/components/.npmignore`)**：
+
+```
+# 源代码（不发布）
+src/
+*.vue
+*.ts
+!*.d.ts
+
+# 配置文件
+tsconfig.json
+vite.config.ts
+*.config.*
+
+# 开发文件
+README.md
+.eslintrc.*
+.prettierrc.*
+
+# 测试文件
+test/
+tests/
+*.test.*
+*.spec.*
+
+# 其他
+node_modules/
+.git/
+.DS_Store
+```
+
+**注意**：如果使用了 `package.json` 中的 `files` 字段，`.npmignore` 会被忽略。
+
+##### 为每个包添加发布配置
+
+**组件包 (`packages/components/package.json`)**：
+
+```json
+{
+  "name": "@your-org/components",  // 替换为你的组织名或用户名
+  "version": "1.0.0",
+  "description": "M-Design 组件库",
+  "author": "Your Name <your-email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/m-design.git",
+    "directory": "packages/components"
+  },
+  "keywords": [
+    "vue3",
+    "component-library",
+    "element-plus"
+  ],
+  "publishConfig": {
+    "access": "public"  // 如果是 scoped package，需要设置为 public
+  },
+  // ... 其他配置
+}
+```
+
+**图标包 (`packages/icons/package.json`)**：
+
+```json
+{
+  "name": "@your-org/icons",
+  "version": "1.0.0",
+  "description": "M-Design 图标库",
+  "author": "Your Name <your-email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/m-design.git",
+    "directory": "packages/icons"
+  },
+  "keywords": [
+    "vue3",
+    "icons",
+    "svg"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  // ... 其他配置
+}
+```
+
+**样式包 (`packages/styles/package.json`)**：
+
+```json
+{
+  "name": "@your-org/styles",
+  "version": "1.0.0",
+  "description": "M-Design 样式库",
+  "author": "Your Name <your-email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/m-design.git",
+    "directory": "packages/styles"
+  },
+  "keywords": [
+    "vue3",
+    "styles",
+    "scss",
+    "css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  // ... 其他配置
+}
+```
+
+**工具包 (`packages/utils/package.json`)**：
+
+```json
+{
+  "name": "@your-org/utils",
+  "version": "1.0.0",
+  "description": "M-Design 工具方法库",
+  "author": "Your Name <your-email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/m-design.git",
+    "directory": "packages/utils"
+  },
+  "keywords": [
+    "vue3",
+    "utils",
+    "utilities"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  // ... 其他配置
+}
+```
+
+#### 3.3 发布流程
+
+##### 方式一：手动发布（推荐首次发布）
+
+**步骤 1：构建所有包**
+
+```bash
+pnpm build
+```
+
+**步骤 2：进入要发布的包目录并发布**
+
+```bash
+# 发布组件包
+cd packages/components
+npm publish
+
+# 发布图标包
+cd ../icons
+npm publish
+
+# 发布样式包
+cd ../styles
+npm publish
+
+# 发布工具包
+cd ../utils
+npm publish
+```
+
+##### 方式二：使用 pnpm 批量发布
+
+**步骤 1：安装发布工具**
+
+```bash
+pnpm add -D -w changeset @changesets/cli
+```
+
+**步骤 2：初始化 changeset**
+
+```bash
+pnpm changeset init
+```
+
+这会在项目根目录创建 `.changeset` 目录。
+
+**步骤 3：添加变更说明**
+
+```bash
+pnpm changeset
+```
+
+按照提示选择要发布的包和版本类型（patch/minor/major）。
+
+**步骤 4：更新版本并发布**
+
+```bash
+# 更新版本号
+pnpm changeset version
+
+# 发布
+pnpm changeset publish
+```
+
+##### 方式三：使用脚本批量发布
+
+在根目录 `package.json` 中添加发布脚本：
+
+```json
+{
+  "scripts": {
+    "publish:components": "cd packages/components && npm publish",
+    "publish:icons": "cd packages/icons && npm publish",
+    "publish:styles": "cd packages/styles && npm publish",
+    "publish:utils": "cd packages/utils && npm publish",
+    "publish:all": "pnpm build && pnpm publish:components && pnpm publish:icons && pnpm publish:styles && pnpm publish:utils"
+  }
+}
+```
+
+然后执行：
+
+```bash
+pnpm publish:all
+```
+
+#### 3.4 版本管理
+
+##### 语义化版本（Semantic Versioning）
+
+版本号格式：`主版本号.次版本号.修订号`（如 `1.0.0`）
+
+- **主版本号（Major）**：不兼容的 API 修改
+- **次版本号（Minor）**：向下兼容的功能性新增
+- **修订号（Patch）**：向下兼容的问题修正
+
+##### 更新版本号
+
+**手动更新**：
+
+编辑对应包的 `package.json`，修改 `version` 字段。
+
+**使用 npm version 命令**：
+
+```bash
+cd packages/components
+
+# 修订号 +1
+npm version patch
+
+# 次版本号 +1
+npm version minor
+
+# 主版本号 +1
+npm version major
+```
+
+这会自动更新 `package.json` 的版本号，并创建一个 git tag。
+
+#### 3.5 发布检查清单
+
+发布前请确认：
+
+- [ ] 所有包都已正确构建（`pnpm build`）
+- [ ] 版本号已更新
+- [ ] `package.json` 中的信息完整（name, description, author, repository 等）
+- [ ] `README.md` 文件存在且内容完整
+- [ ] `LICENSE` 文件存在
+- [ ] `.npmignore` 或 `files` 字段配置正确，只发布必要文件
+- [ ] 已登录 npm（`npm whoami`）
+- [ ] 包名未被占用
+
+#### 3.6 发布后验证
+
+**步骤 1：检查包是否发布成功**
+
+```bash
+npm view @your-org/components
+npm view @your-org/icons
+npm view @your-org/styles
+npm view @your-org/utils
+```
+
+**步骤 2：测试安装**
+
+创建一个测试项目：
+
+```bash
+mkdir test-install
+cd test-install
+pnpm init
+pnpm add @your-org/components @your-org/styles element-plus
+```
+
+**步骤 3：测试使用**
+
+创建 `test.js`：
+
+```javascript
+import { MButton } from '@your-org/components'
+import '@your-org/styles'
+console.log('安装成功！', MButton)
+```
+
+#### 3.7 更新已发布的包
+
+**步骤 1：修改代码并构建**
+
+```bash
+# 修改代码后
+pnpm build
+```
+
+**步骤 2：更新版本号**
+
+```bash
+cd packages/components
+npm version patch  # 或 minor, major
+```
+
+**步骤 3：发布新版本**
+
+```bash
+npm publish
+```
+
+**步骤 4：推送 git tag（如果使用了 npm version）**
+
+```bash
+git push
+git push --tags
+```
+
+#### 3.8 撤销发布（不推荐）
+
+如果发布了错误版本，可以在 72 小时内撤销：
+
+```bash
+# 撤销指定版本
+npm unpublish @your-org/components@1.0.1
+
+# 撤销整个包（24小时内）
+npm unpublish @your-org/components --force
+```
+
+**注意**：撤销发布会影响使用该版本的用户，请谨慎操作。
+
+---
+
+### 四、CI/CD 自动化发布
+
+#### 4.1 使用 GitHub Actions 自动发布
+
+创建 `.github/workflows/publish.yml`：
+
+```yaml
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - 'v*'  # 当推送以 v 开头的 tag 时触发
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+      
+      - name: Install dependencies
+        run: pnpm install
+      
+      - name: Build packages
+        run: pnpm build
+      
+      - name: Publish components
+        working-directory: ./packages/components
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      
+      - name: Publish icons
+        working-directory: ./packages/icons
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      
+      - name: Publish styles
+        working-directory: ./packages/styles
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      
+      - name: Publish utils
+        working-directory: ./packages/utils
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+```
+
+**配置 NPM_TOKEN**：
+
+1. 在 npm 上创建 Access Token：
+   - 访问 https://www.npmjs.com/settings/your-username/tokens
+   - 点击 "Generate New Token"
+   - 选择 "Automation" 类型
+   - 复制生成的 token
+
+2. 在 GitHub 仓库添加 Secret：
+   - 进入仓库 Settings > Secrets and variables > Actions
+   - 点击 "New repository secret"
+   - Name: `NPM_TOKEN`
+   - Value: 粘贴刚才复制的 token
+
+**发布流程**：
+
+```bash
+# 1. 更新版本号
+cd packages/components
+npm version patch  # 或 minor, major
+
+# 2. 提交并推送 tag
+git push
+git push --tags
+
+# 3. GitHub Actions 会自动发布到 npm
+```
+
+#### 4.2 使用 changesets 自动化发布
+
+**安装 changesets**：
+
+```bash
+pnpm add -D -w @changesets/cli
+```
+
+**初始化**：
+
+```bash
+pnpm changeset init
+```
+
+**添加变更**：
+
+```bash
+pnpm changeset
+```
+
+**发布流程**：
+
+创建 `.github/workflows/release.yml`：
+
+```yaml
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+      
+      - name: Install dependencies
+        run: pnpm install
+      
+      - name: Build packages
+        run: pnpm build
+      
+      - name: Create Release Pull Request or Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm changeset publish
+          version: pnpm changeset version
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+```
+
+---
+
+### 五、发布命令速查表
+
+```bash
+# ========== 文档站点 ==========
+
+# 构建文档
+pnpm build:docs
+
+# 预览文档
+pnpm preview:docs
+
+# ========== Packages 打包 ==========
+
+# 构建所有包
+pnpm build
+
+# 构建单个包
+pnpm --filter @m-design/components build
+pnpm --filter @m-design/icons build
+pnpm --filter @m-design/styles build
+pnpm --filter @m-design/utils build
+
+# ========== npm 发布 ==========
+
+# 登录 npm
+npm login
+
+# 检查登录状态
+npm whoami
+
+# 检查包名
+npm view @your-org/components
+
+# 发布单个包
+cd packages/components && npm publish
+
+# 更新版本号
+npm version patch  # 修订号
+npm version minor  # 次版本号
+npm version major  # 主版本号
+
+# 查看已发布的包
+npm view @your-org/components versions
+```
+
+---
+
+## 常见问题
+
+### 1. Sass @import 弃用警告
+
+**问题**：出现 `@import rules are deprecated` 警告
+
+**解决**：使用 `@use` 替代 `@import`，但注意 `@use` 必须在所有其他规则之前。
+
+### 2. TypeScript 找不到模块
+
+**问题**：`找不到模块"@m-design/components"`
+
+**解决**：确保在 `docs/tsconfig.json` 中配置了正确的路径别名。
+
+### 3. VitePress 无法解析样式
+
+**问题**：样式文件无法加载
+
+**解决**：确保在 `docs/.vitepress/config.ts` 中配置了正确的 alias 和 CSS 预处理器选项。
+
+### 4. Element Plus 样式未加载
+
+**问题**：Element Plus 组件没有样式
+
+**解决**：确保在使用的地方导入了 `element-plus/dist/index.css`，并且要在 `@m-design/styles` 之前导入。
+
+---
+
+## 下一步
+
+1. 添加更多组件
+2. 完善文档
+3. 添加单元测试
+4. 配置 CI/CD
+5. 发布到 npm
+
+---
+
+## 总结
+
+通过本指南，你已经成功创建了一个完整的 Monorepo 组件库项目，包括：
+
+- ✅ Monorepo 架构配置
+- ✅ 组件包（Button、Table）
+- ✅ 图标包
+- ✅ 样式包（变量、混入、覆写、工具类）
+- ✅ 工具包（日期、格式化、验证、存储等）
+- ✅ VitePress 文档站点
+
+现在你可以开始开发自己的组件库了！
+