@phelan/design 0.0.1 → 0.0.2

package/SETUP_GUIDE.md

@@ -1,2530 +0,0 @@
-# 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 文档站点
-
-现在你可以开始开发自己的组件库了！
-