@phelan/design 0.0.1

package/docs/.vitepress/config.ts

@@ -0,0 +1,298 @@
+import { defineConfig } from "vitepress";
+import { resolve } from "path";
+import {
+    containerPreview,
+    componentPreview,
+} from "@vitepress-demo-preview/plugin";
+
+export default defineConfig({
+    title: "M-Design",
+    description: "后台管理系统前端组件库",
+    base: "/",
+    head: [["link", { rel: "icon", href: "/favicon.ico" }]],
+    markdown: {
+        lineNumbers: false,
+        config(md) {
+            md.use(containerPreview);
+            md.use(componentPreview);
+        },
+    },
+    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: "Color 色彩",
+                            link: "/components/design/color",
+                        },
+                        // { text: '字体', link: '/design/font' },
+                    ],
+                },
+                {
+                    text: "基础组件",
+                    items: [
+                        { text: "Icon 图标", link: "/components/basic/icon" },
+                        {
+                            text: "Button 按钮",
+                            link: "/components/basic/button",
+                        },
+                        // { text: 'Border 边框', link: '/components/basic/border' },
+                        {
+                            text: "Layout 布局",
+                            link: "/components/basic/layout",
+                        },
+                        { text: "Link 链接", link: "/components/basic/link" },
+                        // { text: 'Text 文字', link: '/components/basic/text' },
+                        {
+                            text: "Scrollbar 滚动条",
+                            link: "/components/basic/scrollbar",
+                        },
+                        { text: "Space 间距", link: "/components/basic/space" },
+                        { text: "Tag 标签", link: "/components/basic/tag" },
+                    ],
+                },
+                {
+                    text: "展示组件",
+                    items: [
+                        // { text: 'Badge 徽标', link: '/components/basic/badge' },
+                        { text: "Card 卡片", link: "/components/basic/card" },
+                        // { text: 'Carousel 走马灯', link: '/components/basic/carousel' },
+                        // { text: 'Collapse 折叠面板', link: '/components/basic/collapse' },
+                        {
+                            text: "Description 描述字段",
+                            link: "/components/basic/description",
+                        },
+                        {
+                            text: "Empty 空状态",
+                            link: "/components/basic/empty",
+                        },
+                        { text: "Image 图片", link: "/components/basic/image" },
+                        {
+                            text: "Pagination 分页",
+                            link: "/components/basic/pagination",
+                        },
+                        // { text: 'Progress 进度条', link: '/components/basic/progress' },
+                        // { text: 'Result 结果', link: '/components/basic/result' },
+                        { text: "Table 表格", link: "/components/basic/table" },
+                        {
+                            text: "ColumnTable 列标题表格",
+                            link: "/components/basic/column-table",
+                        },
+                        {
+                            text: "Tree 树形控件",
+                            link: "/components/basic/tree",
+                        },
+                        {
+                            text: "Calendar 日历",
+                            link: "/components/basic/calendar",
+                        },
+                    ],
+                },
+                {
+                    text: "导航组件",
+                    items: [
+                        {
+                            text: "Breadcrumb 面包屑",
+                            link: "/components/basic/breadcrumb",
+                        },
+                        // { text: 'Tour 漫游导航', link: '/components/basic/tour' },
+                        {
+                            text: "Steps 步骤条",
+                            link: "/components/basic/steps",
+                        },
+                        {
+                            text: "ArrowSteps 箭头步骤条",
+                            link: "/components/basic/arrow-steps",
+                        },
+                        { text: "Tabs 标签页", link: "/components/basic/tabs" },
+                    ],
+                },
+                {
+                    text: "表单组件",
+                    items: [
+                        { text: "Form 表单", link: "/components/basic/form" },
+                        {
+                            text: "Radio 单选框",
+                            link: "/components/basic/radio",
+                        },
+                        {
+                            text: "Checkbox 多选框",
+                            link: "/components/basic/checkbox",
+                        },
+                        {
+                            text: "Cascader 级联选择器",
+                            link: "/components/basic/cascader",
+                        },
+                        {
+                            text: "DatePicker 日期选择器",
+                            link: "/components/basic/date-picker",
+                        },
+                        {
+                            text: "DateTimePicker 日期时间选择器",
+                            link: "/components/basic/date-time-picker",
+                        },
+                        {
+                            text: "Input 输入框",
+                            link: "/components/basic/input",
+                        },
+                        // { text: 'Mention 提及', link: '/components/basic/mention' },
+                        {
+                            text: "InputNumber 数字输入框",
+                            link: "/components/basic/input-number",
+                        },
+                        {
+                            text: "Select 选择器",
+                            link: "/components/basic/select",
+                        },
+                        {
+                            text: "Switch 开关",
+                            link: "/components/basic/switch",
+                        },
+                        // { text: 'Slider 滑块', link: '/components/basic/slider' },
+                        {
+                            text: "TimePicker 时间选择器",
+                            link: "/components/basic/time-picker",
+                        },
+                        {
+                            text: "TimeSelect 时间选择",
+                            link: "/components/basic/time-select",
+                        },
+                        {
+                            text: "TreeSelect 树形选择",
+                            link: "/components/basic/tree-select",
+                        },
+                    ],
+                },
+                {
+                    text: "反馈组件",
+                    items: [
+                        {
+                            text: "Drawer 抽屉",
+                            link: "/components/basic/drawer",
+                        },
+                        {
+                            text: "Dialog 对话框",
+                            link: "/components/basic/dialog",
+                        },
+                        {
+                            text: "Popover 弹出框",
+                            link: "/components/basic/popover",
+                        },
+                        {
+                            text: "Tooltip 文字提示",
+                            link: "/components/basic/tooltip",
+                        },
+                        {
+                            text: "Message 消息提示",
+                            link: "/components/basic/message",
+                        },
+                    ],
+                },
+                {
+                    text: "AIM复合组件",
+                    items: [
+                        {
+                            text: "Nav 子应用面包屑",
+                            link: "/components/basic/nav",
+                        },
+                        {
+                            text: "IndependentNav 独立页面导航",
+                            link: "/components/basic/independent-nav",
+                        },
+                        {
+                            text: "SearchPanel 查询面板",
+                            link: "/components/basic/search-panel",
+                        },
+                        {
+                            text: "BatchCopy 批量复制ID",
+                            link: "/components/basic/batch-copy",
+                        },
+                        {
+                            text: "ActionMenu 菜单列容器",
+                            link: "/components/basic/action-menu",
+                        },
+                        {
+                            text: "Editor 单行编辑",
+                            link: "/components/basic/editor",
+                        },
+                        {
+                            text: "BatchEditor 批量编辑",
+                            link: "/components/basic/batch-editor",
+                        },
+                        {
+                            text: "ImportDialog 导入",
+                            link: "/components/basic/import-dialog",
+                        },
+                        {
+                            text: "FileTaskDialog 查看任务",
+                            link: "/components/basic/file-task-dialog",
+                        },
+                        {
+                            text: "TableGrid 表格栅格",
+                            link: "/components/basic/table-grid",
+                        },
+                        {
+                            text: "TableHeadEditor 表头编辑器",
+                            link: "/components/basic/table-head-editor",
+                        },
+                    ],
+                },
+            ],
+        },
+        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/index.ts"
+                ),
+                "@m-design/icons": resolve(
+                    __dirname,
+                    "../../packages/icons/src/index.ts"
+                ),
+                "@m-design/styles": resolve(
+                    __dirname,
+                    "../../packages/styles/src/index.scss"
+                ),
+            },
+        },
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: `@use "${resolve(
+                        __dirname,
+                        "../../packages/styles/src/variables.scss"
+                    ).replace(/\\/g, "/")}" as *;`,
+                },
+            },
+        },
+        optimizeDeps: {
+            include: ["element-plus"],
+        },
+    },
+});

package/docs/.vitepress/theme/index.ts

@@ -0,0 +1,30 @@
+import { h } from "vue";
+import DefaultTheme from "vitepress/theme";
+import type { Theme } from "vitepress";
+
+import * as MDesignIcons from '@m-design/icons';
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import MDesign from "@m-design/components";
+import "@m-design/styles";
+import { ElementPlusContainer } from '@vitepress-demo-preview/component';
+import "@vitepress-demo-preview/component/dist/style.css";
+import "./style.css";
+
+export default {
+    extends: DefaultTheme,
+    Layout: () => {
+        return h(DefaultTheme.Layout, null, {
+            // https://vitepress.dev/guide/extending-default-theme#layout-slots
+        });
+    },
+    enhanceApp({ app }) {
+        for (const [key, component] of Object.entries(MDesignIcons)) {
+          app.component(key, component);
+        }
+        app.use(ElementPlus);
+        app.use(MDesign);
+        app.component("demo-preview", ElementPlusContainer);
+        // app.component("ComponentOverview", ComponentOverview);
+    },
+} satisfies Theme;

package/docs/.vitepress/theme/style.css

@@ -0,0 +1,150 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-c-default-1: var(--vp-c-gray-1);
+    --vp-c-default-2: var(--vp-c-gray-2);
+    --vp-c-default-3: var(--vp-c-gray-3);
+    --vp-c-default-soft: var(--vp-c-gray-soft);
+
+    --vp-c-brand-1: var(--vp-c-indigo-1);
+    --vp-c-brand-2: var(--vp-c-indigo-2);
+    --vp-c-brand-3: var(--vp-c-indigo-3);
+    --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+    --vp-c-tip-1: var(--vp-c-brand-1);
+    --vp-c-tip-2: var(--vp-c-brand-2);
+    --vp-c-tip-3: var(--vp-c-brand-3);
+    --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+    --vp-c-warning-1: var(--vp-c-yellow-1);
+    --vp-c-warning-2: var(--vp-c-yellow-2);
+    --vp-c-warning-3: var(--vp-c-yellow-3);
+    --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+    --vp-c-danger-1: var(--vp-c-red-1);
+    --vp-c-danger-2: var(--vp-c-red-2);
+    --vp-c-danger-3: var(--vp-c-red-3);
+    --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-button-brand-border: transparent;
+    --vp-button-brand-text: var(--vp-c-white);
+    --vp-button-brand-bg: var(--vp-c-brand-3);
+    --vp-button-brand-hover-border: transparent;
+    --vp-button-brand-hover-text: var(--vp-c-white);
+    --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+    --vp-button-brand-active-border: transparent;
+    --vp-button-brand-active-text: var(--vp-c-white);
+    --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: -webkit-linear-gradient(
+        120deg,
+        #bd34fe 30%,
+        #41d1ff
+    );
+
+    --vp-home-hero-image-background-image: linear-gradient(
+        -45deg,
+        #bd34fe 50%,
+        #47caff 50%
+    );
+    --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+    :root {
+        --vp-home-hero-image-filter: blur(56px);
+    }
+}
+
+@media (min-width: 960px) {
+    :root {
+        --vp-home-hero-image-filter: blur(68px);
+    }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-custom-block-tip-border: transparent;
+    --vp-custom-block-tip-text: var(--vp-c-text-1);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+    --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+    --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+: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;
+}
+
+.mb-4 {
+    margin-bottom: 16px;
+}

package/docs/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @m-design/docs
+
+## 2.0.0
+
+### Major Changes
+
+- init

package/docs/DEPLOY.md

@@ -0,0 +1,183 @@
+# VitePress 文档部署指南
+
+## 📦 打包文档
+
+### 方式一：使用根目录命令（推荐）
+
+```bash
+# 在项目根目录执行
+pnpm build:docs
+```
+
+### 方式二：进入 docs 目录执行
+
+```bash
+cd docs
+pnpm build
+```
+
+**打包输出位置**：`docs/.vitepress/dist`
+
+## 🔍 本地预览
+
+打包后可以本地预览：
+
+```bash
+# 方式一
+pnpm preview:docs
+
+# 方式二
+cd docs
+pnpm preview
+```
+
+访问 `http://localhost:4173` 查看预览效果。
+
+## 🚀 部署方式
+
+### 方式一：GitHub Pages 部署
+
+#### 1. 修改 base 路径
+
+如果部署到 GitHub Pages 的子路径（如 `https://username.github.io/m-design/`），需要修改 `docs/.vitepress/config.ts`：
+
+```typescript
+export default defineConfig({
+    base: "/m-design/",  // 改为你的仓库名
+    // ... 其他配置
+});
+```
+
+如果部署到根路径（如 `https://username.github.io/`），保持：
+
+```typescript
+export default defineConfig({
+    base: "/",
+    // ... 其他配置
+});
+```
+
+#### 2. 创建 GitHub Actions 工作流
+
+创建 `.github/workflows/deploy-docs.yml`：
+
+```yaml
+name: Deploy Docs
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'docs/**'
+      - 'packages/**'
+      - '.github/workflows/deploy-docs.yml'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'pnpm'
+      
+      - name: Install dependencies
+        run: pnpm install
+      
+      - name: Build packages
+        run: pnpm build
+      
+      - name: Build docs
+        run: pnpm build:docs
+      
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./docs/.vitepress/dist
+```
+
+### 方式二：Vercel 部署
+
+1. 将项目推送到 GitHub
+2. 在 [Vercel](https://vercel.com) 导入项目
+3. 配置：
+   - **Framework Preset**: Other
+   - **Root Directory**: `docs`
+   - **Build Command**: `pnpm build`
+   - **Output Directory**: `.vitepress/dist`
+   - **Install Command**: `pnpm install`
+
+### 方式三：Netlify 部署
+
+1. 将项目推送到 GitHub
+2. 在 [Netlify](https://www.netlify.com) 导入项目
+3. 配置：
+   - **Base directory**: `docs`
+   - **Build command**: `pnpm build`
+   - **Publish directory**: `docs/.vitepress/dist`
+
+### 方式四：Nginx 部署
+
+#### 1. 打包文档
+
+```bash
+pnpm build:docs
+```
+
+#### 2. 上传到服务器
+
+```bash
+# 使用 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/
+```
+
+#### 3. 配置 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";
+    }
+}
+```
+
+启用配置：
+
+```bash
+sudo ln -s /etc/nginx/sites-available/m-design /etc/nginx/sites-enabled/
+sudo nginx -t
+sudo systemctl restart nginx
+```
+
+## 📝 注意事项
+
+1. **base 路径配置**：根据部署位置调整 `base` 配置
+2. **构建依赖**：确保先构建 packages，再构建 docs
+3. **静态资源**：确保所有静态资源路径正确