@phelan/design 0.0.1

package/docs/guide/import-on-demand.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

package/docs/guide/index.md

@@ -0,0 +1,55 @@
+---
+outline: deep
+---
+
+# 简介
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+
+<pre>{{ theme }}</pre>
+
+### Page Data
+
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+
+<pre>{{ theme }}</pre>
+
+### Page Data
+
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

package/docs/guide/introduction.md

@@ -0,0 +1,21 @@
+# 介绍
+
+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

package/docs/guide/quickstart.md

@@ -0,0 +1,35 @@
+# 快速开始
+
+## 安装
+
+使用 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'
+\`\`\`

package/docs/guide/start.md

@@ -0,0 +1,113 @@
+---
+outline: deep
+---
+
+# 快速接入
+
+`@m-design/m-design` 是基于 Element Plus 封装的，专门为 M Design 系统设计的通用组件库。
+
+## 环境要求
+
+- Vue >= 3.5.17
+- Element Plus >= 2.7.6 < 2.10.4
+- Node.js >= 18
+
+## 安装
+
+### 安装组件库
+
+```bash
+npm install @m-design/m-design@latest --save
+```
+
+### 安装依赖
+
+组件库依赖以下包，请确保已安装：
+
+```bash
+npm install vue@^3.5.17 element-plus@^2.7.6 --save
+npm install @m-design/icons@latest --save
+```
+
+## 引入样式
+
+在项目入口文件中引入组件库样式：
+
+```typescript
+import 'element-plus/dist/index.css';
+import '@m-design/m-design/styles/css/index.css';
+```
+
+## 注册图标
+
+组件库使用独立的图标库 `@m-design/icons`，需要全局注册图标组件：
+
+```typescript
+import * as MDesignIcons from '@m-design/icons';
+import { createApp } from 'vue';
+
+const app = createApp(App);
+
+// 注册所有图标组件
+for (const [key, component] of Object.entries(MDesignIcons)) {
+  app.component(key, component);
+}
+```
+
+## 安装组件库
+
+在 Vue 应用中安装组件库：
+
+```typescript
+import MDesign from '@m-design/m-design';
+import cn from '@m-design/m-design-locale/lang/zh-cn';
+
+const app = createApp(App);
+
+// 安装组件库，可传入国际化配置
+app.use(MDesign, {
+  locale: cn, // 中文语言包
+});
+```
+
+## 使用组件
+
+安装完成后，即可在模板中使用组件：
+
+```vue
+<template>
+  <div>
+    <m-button type="primary">主要按钮</m-button>
+    <m-button type="success">成功按钮</m-button>
+    <m-icon icon="Search" />
+  </div>
+</template>
+```
+
+## 按需引入（可选）
+
+如果项目使用按需引入，可以只引入需要的组件：
+
+```typescript
+import { MButton, MIcon } from '@m-design/m-design';
+import '@m-design/m-design/styles/css/index.css';
+
+const app = createApp(App);
+app.component('MButton', MButton);
+app.component('MIcon', MIcon);
+```
+
+## 国际化
+
+组件库支持国际化，可以切换语言：
+
+```typescript
+import cn from '@m-design/m-design-locale/lang/zh-cn';
+import en from '@m-design/m-design-locale/lang/en';
+
+// 使用中文
+app.use(MDesign, { locale: cn });
+
+// 使用英文
+app.use(MDesign, { locale: en });
+```

package/docs/index.md

@@ -0,0 +1,27 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: 'M Design 前端通用工具'
+  text: '专门为 M Design 设计的前端通用组件库和工具套件'
+  tagline: 简单、强大、快速。
+  actions:
+    - theme: brand
+      text: 组件库指南
+      link: /guide
+    - theme: brand
+      text: 组件总览
+      link: /components
+    - theme: alt
+      text: 工具类库
+      link: /toolkit/start
+
+features:
+  - title: 通用组件库
+    details: 基于element-plus封装的，符合 M Design设计规范的通用组件库
+  - title: 通用工具类库
+    details: 抽象了通用的基础库、网络库、监控库等，方便子应用快速调用
+  # - title: Feature C
+  #   details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---

package/docs/markdown-examples.md

@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

package/docs/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@m-design/docs",
+    "version": "0.0.0",
+    "description": "M-Design 文档站点",
+    "type": "module",
+    "scripts": {
+        "dev": "vitepress dev",
+        "build": "vitepress build",
+        "preview": "vitepress preview",
+        "docs:dev": "vitepress dev docs",
+        "docs:build": "vitepress build docs",
+        "docs:preview": "vitepress preview docs"
+    },
+    "devDependencies": {
+        "@m-design/components": "workspace:*",
+        "@m-design/icons": "workspace:*",
+        "@m-design/styles": "workspace:*",
+        "@vitejs/plugin-vue": "^5.2.4",
+        "@vitepress-demo-preview/component": "^2.6.1",
+        "@vitepress-demo-preview/plugin": "^1.4.1",
+        "element-plus": "^2.4.0",
+        "postcss": "^8.5.6",
+        "vitepress": "^1.6.4",
+        "vue": "^3.5.25"
+    }
+}

package/docs/postcss.config.mjs

@@ -0,0 +1,9 @@
+import { postcssIsolateStyles } from 'vitepress';
+
+export default {
+    plugins: [
+        postcssIsolateStyles({
+            includeFiles: [/vp-doc\.css/, /base\.css/],
+        }),
+    ],
+};

package/docs/toolkit/domain.md

@@ -0,0 +1,55 @@
+---
+outline: deep
+---
+
+# 域名配置 (domain)
+
+域名配置模块提供了 AIM 项目相关的域名常量，包括 AIM 主域名和供应商独立域名。
+
+## 常量
+
+### aimDomain
+
+AIM 域名常量对象。
+
+**类型：** `{ dev: string, test: string, pre: string, prod: string }`
+
+| 环境 | 域名 |
+| --- | --- |
+| `dev` | `dev.aim.aldi.com.cn` |
+| `test` | `aim.test.aldicn.local` |
+| `pre` | `aim.pre.aldicn.local` |
+| `prod` | `aim.aldi.com.cn` |
+
+```typescript
+import { aimDomain } from '@aldi/aim-toolkit/domain';
+
+console.log(aimDomain.dev); // 'dev.aim.aldi.com.cn'
+console.log(aimDomain.prod); // 'aim.aldi.com.cn'
+```
+
+### aimSupplierDomain
+
+供应商独立域名常量对象。
+
+**类型：** `{ test: string, pre: string, prod: string }`
+
+| 环境 | 域名 |
+| --- | --- |
+| `test` | `aim.supplier.test.aldicn.local` |
+| `pre` | `aceta022ni22.aldi.com.cn` |
+| `prod` | `supplier.aim.aldi.com.cn` |
+
+```typescript
+import { aimSupplierDomain } from '@aldi/aim-toolkit/domain';
+
+console.log(aimSupplierDomain.test); // 'aim.supplier.test.aldicn.local'
+console.log(aimSupplierDomain.prod); // 'supplier.aim.aldi.com.cn'
+```
+
+## 类型
+
+```typescript
+type AimDomain = 'dev.aim.aldi.com.cn' | 'aim.test.aldicn.local' | 'aim.pre.aldicn.local' | 'aim.aldi.com.cn';
+type AimSupplierDomain = 'aim.supplier.test.aldicn.local' | 'aceta022ni22.aldi.com.cn' | 'supplier.aim.aldi.com.cn';
+```

package/docs/toolkit/env.md

@@ -0,0 +1,73 @@
+---
+outline: deep
+---
+
+# 环境工具 (env)
+
+环境工具模块提供了获取当前运行环境和构建模式的功能。
+
+## 常量
+
+### env 环境字符
+
+| 键 | 值 | 说明 |
+| --- | --- | --- |
+| `dev` | `'dev'` | 开发环境 |
+| `test` | `'test'` | 测试环境 |
+| `pre` | `'pre'` | 预发布环境 |
+| `prod` | `'prod'` | 生产环境 |
+
+```typescript
+import { env } from '@aldi/aim-toolkit/env';
+
+console.log(env.dev); // 'dev'
+console.log(env.prod); // 'prod'
+```
+
+### nodeEnv Node 环境
+
+| 键 | 值 | 说明 |
+| --- | --- | --- |
+| `dev` | `'development'` | 开发模式 |
+| `test` | `'staging'` | 预发布模式 |
+| `prod` | `'production'` | 生产模式 |
+
+```typescript
+import { nodeEnv } from '@aldi/aim-toolkit/env';
+
+console.log(nodeEnv.dev); // 'development'
+console.log(nodeEnv.prod); // 'production'
+```
+
+## 函数/API
+
+### getEnv()
+
+获取项目当前所取环境的环境字符。
+
+**返回值：** `Env` - 环境字符 (`'dev' | 'test' | 'pre' | 'prod'`)
+
+```typescript
+import { getEnv } from '@aldi/aim-toolkit/env';
+
+const currentEnv = getEnv();
+```
+
+### getNodeEnv()
+
+获取 Node 构建/运行模式。
+
+**返回值：** `NodeEnv | undefined` - Node 环境 (`'development' | 'staging' | 'production' | undefined`)
+
+```typescript
+import { getNodeEnv } from '@aldi/aim-toolkit/env';
+
+const nodeEnv = getNodeEnv();
+```
+
+## 类型
+
+```typescript
+type Env = 'dev' | 'test' | 'pre' | 'prod';
+type NodeEnv = 'development' | 'staging' | 'production';
+```

package/docs/toolkit/examples/domain-aim.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h3>AIM 域名配置</h3>
+    <el-table
+      :data="domainList"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="env"
+        label="环境"
+        width="100"
+      />
+      <el-table-column
+        prop="domain"
+        label="域名"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { aimDomain } from '@aldi/aim-toolkit/domain';
+
+const domainList = ref<Array<{ env: string; domain: string }>>([]);
+
+onMounted(() => {
+  domainList.value = [
+    { env: 'dev', domain: aimDomain.dev },
+    { env: 'test', domain: aimDomain.test },
+    { env: 'pre', domain: aimDomain.pre },
+    { env: 'prod', domain: aimDomain.prod },
+  ];
+});
+</script>

package/docs/toolkit/examples/domain-supplier.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h3>供应商域名配置</h3>
+    <el-table
+      :data="domainList"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="env"
+        label="环境"
+        width="100"
+      />
+      <el-table-column
+        prop="domain"
+        label="域名"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { aimSupplierDomain } from '@aldi/aim-toolkit/domain';
+
+const domainList = ref<Array<{ env: string; domain: string }>>([]);
+
+onMounted(() => {
+  domainList.value = [
+    { env: 'test', domain: aimSupplierDomain.test },
+    { env: 'pre', domain: aimSupplierDomain.pre },
+    { env: 'prod', domain: aimSupplierDomain.prod },
+  ];
+});
+</script>

package/docs/toolkit/examples/env-basic.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h3>当前环境：{{ currentEnv }}</h3>
+    <p>环境判断基于当前访问的域名</p>
+    <el-tag :type="getEnvTagType(currentEnv)">{{ currentEnv }}</el-tag>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { getEnv } from '@aldi/aim-toolkit/env';
+
+const currentEnv = ref<string>('');
+
+onMounted(() => {
+  currentEnv.value = getEnv();
+});
+
+const getEnvTagType = (env: string) => {
+  const typeMap: Record<string, string> = {
+    dev: 'info',
+    test: 'warning',
+    pre: '',
+    prod: 'success',
+  };
+  return typeMap[env] || '';
+};
+</script>

package/docs/toolkit/examples/env-constants.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h3>环境字符常量</h3>
+    <el-table
+      :data="envList"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="key"
+        label="键"
+        width="100"
+      />
+      <el-table-column
+        prop="value"
+        label="值"
+      />
+      <el-table-column
+        prop="description"
+        label="说明"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { env } from '@aldi/aim-toolkit/env';
+
+const envList = ref<Array<{ key: string; value: string; description: string }>>([]);
+
+onMounted(() => {
+  envList.value = [
+    { key: 'dev', value: env.dev, description: '开发环境' },
+    { key: 'test', value: env.test, description: '测试环境' },
+    { key: 'pre', value: env.pre, description: '预发布环境' },
+    { key: 'prod', value: env.prod, description: '生产环境' },
+  ];
+});
+</script>