@phelan/design 0.0.1

package/docs/components/ComponentOverview.vue

@@ -0,0 +1,613 @@
+<template>
+  <div class="component-overview">
+    <ComponentSearch @update:query="handleSearchUpdate" />
+    <div class="component-description"
+      >以下是 M Design 提供的所有组件。共 {{ totalCount }} 个组件。
+    </div>
+
+    <template
+      v-for="category in filteredComponents"
+      :key="category.category"
+    >
+      <h2>{{ category.category }}</h2>
+
+      <div class="component-grid">
+        <template
+          v-for="item in category.items"
+          :key="item.name"
+        >
+          <a
+            v-if="item.link"
+            :href="item.link"
+            class="component-item component-item-link"
+          >
+            <h3>{{ item.name }}</h3>
+            <div
+              v-if="item.example"
+              class="component-example"
+            >
+              <div class="component-example-wrapper">
+                <Suspense>
+                  <component :is="getExampleComponent(item.example)" />
+                  <template #fallback>
+                    <div class="loading">加载中...</div>
+                  </template>
+                </Suspense>
+              </div>
+            </div>
+          </a>
+          <div
+            v-else
+            class="component-item"
+          >
+            <h3>{{ item.name }}</h3>
+            <div
+              v-if="item.example"
+              class="component-example"
+            >
+              <div class="component-example-wrapper">
+                <Suspense>
+                  <component :is="getExampleComponent(item.example)" />
+                  <template #fallback>
+                    <div class="loading">加载中...</div>
+                  </template>
+                </Suspense>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineAsyncComponent } from 'vue';
+import ComponentSearch from './ComponentSearch.vue';
+
+// 静态导入所有示例组件
+const exampleComponents = {
+  'button/demo1.vue': () => import('../examples/button/demo1.vue'),
+  'icon/index.vue': () => import('../examples/icon/index.vue'),
+  'scrollbar/index.vue': () => import('../examples/scrollbar/index.vue'),
+  'space/index.vue': () => import('../examples/space/index.vue'),
+  'layout/index.vue': () => import('../examples/layout/index.vue'),
+  'form/basic-form.vue': () => import('../examples/form/basic-form.vue'),
+  'input/index.vue': () => import('../examples/input/index.vue'),
+  'input-number/index.vue': () => import('../examples/input-number/index.vue'),
+  'select/index.vue': () => import('../examples/select/index.vue'),
+  'cascader/index.vue': () => import('../examples/cascader/index.vue'),
+  'checkbox/basic.vue': () => import('../examples/checkbox/basic.vue'),
+  'radio/basic-usage.vue': () => import('../examples/radio/basic-usage.vue'),
+  'date-picker/index.vue': () => import('../examples/date-picker/index.vue'),
+  'date-time-picker/index.vue': () => import('../examples/date-time-picker/index.vue'),
+  'time-picker/index.vue': () => import('../examples/time-picker/index.vue'),
+  'time-select/index.vue': () => import('../examples/time-select/index.vue'),
+  'tree-select/index.vue': () => import('../examples/tree-select/index.vue'),
+  'switch/index.vue': () => import('../examples/switch/index.vue'),
+  'table/basic.vue': () => import('../examples/table/basic.vue'),
+  'column-table/basic.vue': () => import('../examples/column-table/basic.vue'),
+  'description/index.vue': () => import('../examples/description/index.vue'),
+  'card/basic-card.vue': () => import('../examples/card/basic-card.vue'),
+  'tag/basic.vue': () => import('../examples/tag/basic.vue'),
+  'empty/basic.vue': () => import('../examples/empty/basic.vue'),
+  'image/index.vue': () => import('../examples/image/index.vue'),
+  'tree/index.vue': () => import('../examples/tree/index.vue'),
+  'calendar/calendar01.vue': () => import('../examples/calendar/calendar01.vue'),
+  'arrow-steps/index.vue': () => import('../examples/arrow-steps/index.vue'),
+  'steps/index.vue': () => import('../examples/steps/index.vue'),
+  'search-panel/index.vue': () => import('../examples/search-panel/index.vue'),
+  'nav/index.vue': () => import('../examples/nav/index.vue'),
+  'independent-nav/index.vue': () => import('../examples/independent-nav/index.vue'),
+  'batch-copy/index.vue': () => import('../examples/batch-copy/index.vue'),
+  'breadcrumb/index.vue': () => import('../examples/breadcrumb/index.vue'),
+  'tabs/index.vue': () => import('../examples/tabs/index.vue'),
+  'pagination/basic.vue': () => import('../examples/pagination/basic.vue'),
+  'dialog/basic.vue': () => import('../examples/dialog/basic.vue'),
+  'drawer/index.vue': () => import('../examples/drawer/index.vue'),
+  'popover/index.vue': () => import('../examples/popover/index.vue'),
+  'tooltip/index.vue': () => import('../examples/tooltip/index.vue'),
+  'message/index.vue': () => import('../examples/message/index.vue'),
+  'link/index01.vue': () => import('../examples/link/index01.vue'),
+  'text/index.vue': () => import('../examples/text/index.vue'),
+  'border/index.vue': () => import('../examples/border/index.vue'),
+  'badge/index.vue': () => import('../examples/badge/index.vue'),
+  'slider/index.vue': () => import('../examples/slider/index.vue'),
+  'mention/index.vue': () => import('../examples/mention/index.vue'),
+  'progress/index.vue': () => import('../examples/progress/index.vue'),
+  'result/index.vue': () => import('../examples/result/index.vue'),
+  'carousel/index.vue': () => import('../examples/carousel/index.vue'),
+  'collapse/index.vue': () => import('../examples/collapse/index.vue'),
+  'tour/index.vue': () => import('../examples/tour/index.vue'),
+  'action-menu/index.vue': () => import('../examples/action-menu/index.vue'),
+  'editor/basic.vue': () => import('../examples/editor/basic.vue'),
+};
+
+const searchQuery = ref('');
+
+const components = [
+  {
+    category: '基础组件',
+    items: [
+      {
+        name: 'Button 按钮',
+        description: '常用的操作按钮。',
+        example: 'button/demo1.vue',
+        link: '/components/basic/button',
+      },
+      {
+        name: 'Icon 图标',
+        description: '专门为 M Design 系统设计的一套图标集合。',
+        example: 'icon/index.vue',
+        link: '/components/basic/icon',
+      },
+      {
+        name: 'Link 链接',
+        description: '文字超链接组件。',
+        example: 'link/index01.vue',
+        link: '/components/basic/link',
+      },
+      // {
+      //   name: 'Text 文本',
+      //   description: '文本样式和工具类。',
+      //   example: 'text/index.vue',
+      //   link: '/components/basic/text',
+      // },
+      // {
+      //   name: 'Border 边框',
+      //   description: '边框样式工具类。',
+      //   example: 'border/index.vue',
+      //   link: '/components/basic/border',
+      // },
+      {
+        name: 'Layout 布局',
+        description: '用于快速进行页面布局。',
+        example: 'layout/index.vue',
+        link: '/components/basic/layout',
+      },
+      {
+        name: 'Space 间距',
+        description: '设置组件之间的间距。',
+        example: 'space/index.vue',
+        link: '/components/basic/space',
+      },
+      {
+        name: 'Scrollbar 滚动条',
+        description: '用于替换浏览器原生滚动条。',
+        example: 'scrollbar/index.vue',
+        link: '/components/basic/scrollbar',
+      },
+    ],
+  },
+  {
+    category: '表单组件',
+    items: [
+      {
+        name: 'Form 表单',
+        description:
+          '表单包含输入框、单选框、下拉选择、多选框等用户输入的组件。使用表单，您可以收集、验证和提交数据。',
+        example: 'form/basic-form.vue',
+        link: '/components/basic/form',
+      },
+      {
+        name: 'Input 输入框',
+        description: '通过鼠标或键盘输入字符。',
+        example: 'input/index.vue',
+        link: '/components/basic/input',
+      },
+      {
+        name: 'Input Number 数字输入框',
+        description: '仅允许输入标准的数字值，可定义范围。',
+        example: 'input-number/index.vue',
+        link: '/components/basic/input-number',
+      },
+      {
+        name: 'Select 选择器',
+        description: '当选项过多时，使用下拉菜单展示并选择内容。',
+        example: 'select/index.vue',
+        link: '/components/basic/select',
+      },
+      {
+        name: 'Cascader 级联选择器',
+        description: '当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。',
+        example: 'cascader/index.vue',
+        link: '/components/basic/cascader',
+      },
+      {
+        name: 'Checkbox 多选框',
+        description: '一组备选项中进行多选。',
+        example: 'checkbox/basic.vue',
+        link: '/components/basic/checkbox',
+      },
+      {
+        name: 'Radio 单选框',
+        description: '在一组备选项中进行单选。',
+        example: 'radio/basic-usage.vue',
+        link: '/components/basic/radio',
+      },
+      {
+        name: 'Date Picker 日期选择器',
+        description: '用于选择或输入日期。',
+        example: 'date-picker/index.vue',
+        link: '/components/basic/date-picker',
+      },
+      {
+        name: 'Date Time Picker 日期时间选择器',
+        description: '用于选择或输入日期和时间。',
+        example: 'date-time-picker/index.vue',
+        link: '/components/basic/date-time-picker',
+      },
+      {
+        name: 'Time Picker 时间选择器',
+        description: '用于选择或输入时间。',
+        example: 'time-picker/index.vue',
+        link: '/components/basic/time-picker',
+      },
+      {
+        name: 'Time Select 时间选择',
+        description: '可选择的时间列表。',
+        example: 'time-select/index.vue',
+        link: '/components/basic/time-select',
+      },
+      {
+        name: 'TreeSelect 树形选择',
+        description: '含有下拉菜单的树形选择器，结合了 el-tree 和 el-select 两个组件的功能。',
+        example: 'tree-select/index.vue',
+        link: '/components/basic/tree-select',
+      },
+      {
+        name: 'Switch 开关',
+        description: '表示两种相互对立的状态间的切换，多用于触发「开/关」。',
+        example: 'switch/index.vue',
+        link: '/components/basic/switch',
+      },
+      // {
+      //   name: 'Slider 滑块',
+      //   description: '通过拖动滑块在一个固定区间内进行选择。',
+      //   example: 'slider/index.vue',
+      // },
+      // { name: 'Mention 提及', description: '用于提及某人或某物。', example: 'mention/index.vue' },
+    ],
+  },
+  {
+    category: '数据展示',
+    items: [
+      {
+        name: 'Table 表格',
+        description: '用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。',
+        example: 'table/basic.vue',
+        link: '/components/basic/table',
+      },
+      {
+        name: 'Column Table 列标题表格',
+        description:
+          '用于以多列结构展示数据的表格。Column Table 是基于 Table 组件封装的组件，适用于需要以列标题形式展示数据的场景。',
+        example: 'column-table/basic.vue',
+        link: '/components/basic/column-table',
+      },
+      {
+        name: 'Description 描述列表',
+        description: '列表形式展示多个字段。',
+        example: 'description/index.vue',
+        link: '/components/basic/description',
+      },
+      {
+        name: 'Card 卡片',
+        description: '将信息聚合在卡片容器中展示。',
+        example: 'card/basic-card.vue',
+        link: '/components/basic/card',
+      },
+      // {
+      //   name: 'Badge 标记',
+      //   description: '出现在按钮、图标旁的数字或状态标记。',
+      //   example: 'badge/index.vue',
+      // },
+      {
+        name: 'Tag 标签',
+        description: '用于标记和选择。',
+        example: 'tag/basic.vue',
+        link: '/components/basic/tag',
+      },
+      {
+        name: 'Empty 空状态',
+        description: '空状态时的展示占位图。',
+        example: 'empty/basic.vue',
+        link: '/components/basic/empty',
+      },
+      {
+        name: 'Image 图片',
+        description: '图片容器，在保留所有原生 img 的特性下，支持懒加载，自定义占位、加载失败等。',
+        example: 'image/index.vue',
+        link: '/components/basic/image',
+      },
+      {
+        name: 'Tree 树形控件',
+        description: '用清晰的层级结构展示信息，可展开或折叠。',
+        example: 'tree/index.vue',
+        link: '/components/basic/tree',
+      },
+      // {
+      //   name: 'Result 结果',
+      //   description: '用于反馈一系列操作任务的处理结果。',
+      //   example: 'result/index.vue',
+      // },
+      // {
+      //   name: 'Progress 进度条',
+      //   description: '用于展示操作进度，告知用户当前状态和预期。',
+      //   example: 'progress/index.vue',
+      // },
+      {
+        name: 'Calendar 日历',
+        description: '显示日期。',
+        example: 'calendar/calendar01.vue',
+        link: '/components/basic/calendar',
+      },
+      // {
+      //   name: 'Carousel 走马灯',
+      //   description: '在有限空间内，循环播放同一类型的图片、文字等内容。',
+      //   example: 'carousel/index.vue',
+      // },
+      // {
+      //   name: 'Collapse 折叠面板',
+      //   description: '通过折叠面板收纳内容区域。',
+      //   example: 'collapse/index.vue',
+      // },
+      // {
+      //   name: 'Tour 漫游式引导',
+      //   description: '用于分步介绍产品功能，引导用户按照流程完成任务。',
+      //   example: 'tour/index.vue',
+      // },
+      {
+        name: 'Arrow Steps 箭头步骤条',
+        description: '引导用户按照流程完成任务，可适用于较复杂的任务流。',
+        example: 'arrow-steps/index.vue',
+        link: '/components/basic/arrow-steps',
+      },
+      {
+        name: 'Steps 步骤条',
+        description: '引导用户按照流程完成任务，可适用于较复杂的任务流。',
+        example: 'steps/index.vue',
+        link: '/components/basic/steps',
+      },
+    ],
+  },
+  {
+    category: '导航',
+    items: [
+      {
+        name: 'Breadcrumb 面包屑',
+        description: '显示当前页面的路径，快速返回之前的任意页面。',
+        example: 'breadcrumb/index.vue',
+        link: '/components/basic/breadcrumb',
+      },
+      {
+        name: 'Tabs 标签页',
+        description: '分隔内容上有关联但属于不同类别的数据集合。',
+        example: 'tabs/index.vue',
+        link: '/components/basic/tabs',
+      },
+      {
+        name: 'Pagination 分页',
+        description: '当数据量过多时，使用分页分解数据。',
+        example: 'pagination/basic.vue',
+        link: '/components/basic/pagination',
+      },
+    ],
+  },
+  {
+    category: '反馈',
+    items: [
+      {
+        name: 'Dialog 对话框',
+        description: '在保留当前页面状态的情况下，告知用户并承载相关操作。',
+        example: 'dialog/basic.vue',
+        link: '/components/basic/dialog',
+      },
+      {
+        name: 'Drawer 抽屉',
+        description:
+          '有些时候，`Dialog` 组件并不满足我们的需求，比如你的表单很长，亦或是你需要临时展示一些文档，`Drawer` 拥有与 `Dialog` 几乎相同的 API，在 UI 上带来不一样的体验。',
+        example: 'drawer/index.vue',
+        link: '/components/basic/drawer',
+      },
+      {
+        name: 'Popover 弹出框',
+        description: 'Popover 弹出框，用于显示更多内容。',
+        example: 'popover/index.vue',
+        link: '/components/basic/popover',
+      },
+      {
+        name: 'Tooltip 文字提示',
+        description: '常用于展示鼠标 hover 时的提示信息。',
+        example: 'tooltip/index.vue',
+        link: '/components/basic/tooltip',
+      },
+      {
+        name: 'Message 消息提示',
+        description: '常用于主动操作后的反馈提示。',
+        example: 'message/index.vue',
+        link: '/components/basic/message',
+      },
+    ],
+  },
+  {
+    category: 'M Design 复合组件',
+    items: [
+      {
+        name: 'ActionMenu 菜单列容器',
+        description: '菜单列容器管理组件。',
+        example: 'action-menu/index.vue',
+        link: '/components/basic/action-menu',
+      },
+      {
+        name: 'Editor 单行编辑',
+        description: '单行编辑组件。',
+        example: 'editor/basic.vue',
+        link: '/components/basic/editor',
+      },
+      {
+        name: 'Nav 子应用面包屑',
+        description: '为网站提供导航功能的菜单。',
+        example: 'nav/index.vue',
+        link: '/components/basic/nav',
+      },
+      {
+        name: 'IndependentNav 独立页面导航',
+        description: '独立的导航菜单组件。',
+        example: 'independent-nav/index.vue',
+        link: '/components/basic/independent-nav',
+      },
+      {
+        name: 'SearchPanel 查询面板',
+        description: '用于展示查询条件和查询结果。',
+        example: 'search-panel/index.vue',
+        link: '/components/basic/search-panel',
+      },
+      {
+        name: 'BatchCopy 批量复制ID',
+        description: '批量复制ID的组件。',
+        example: 'batch-copy/index.vue',
+        link: '/components/basic/batch-copy',
+      },
+    ],
+  },
+];
+
+const filteredComponents = computed(() => {
+  if (!searchQuery.value.trim()) {
+    return components;
+  }
+
+  const query = searchQuery.value.toLowerCase();
+  return components
+    .map((category) => ({
+      ...category,
+      items: category.items.filter(
+        (item) =>
+          item.name.toLowerCase().includes(query) || item.description.toLowerCase().includes(query),
+      ),
+    }))
+    .filter((category) => category.items.length > 0);
+});
+
+const totalCount = computed(() => {
+  return filteredComponents.value.reduce((sum, category) => sum + category.items.length, 0);
+});
+
+const handleSearchUpdate = (query) => {
+  searchQuery.value = query;
+};
+
+const getExampleComponent = (examplePath) => {
+  if (!examplePath) return null;
+  // 从静态映射中获取导入函数
+  const importFn = exampleComponents[examplePath];
+  if (!importFn) {
+    console.warn(`Example component not found: ${examplePath}`);
+    return null;
+  }
+  return defineAsyncComponent(importFn);
+};
+</script>
+
+<style scoped>
+.component-overview {
+  margin-top: 24px;
+}
+
+.component-count {
+  margin-bottom: 24px;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.component-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+  margin-bottom: 40px;
+}
+
+.component-item {
+  margin-bottom: 0;
+}
+
+.component-item-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.component-item-link:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: var(--vp-c-bg-soft);
+}
+
+.component-item-link h3 {
+  margin-top: 0;
+  margin-bottom: 12px;
+  color: var(--vp-c-text-1);
+}
+
+.component-example {
+  width: 300px;
+  height: 100px;
+  margin-top: 16px;
+  border-radius: 4px;
+  border: 1px solid var(--vp-c-divider);
+  padding: 0;
+  background: var(--vp-c-bg);
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.component-example-wrapper {
+  width: 600px;
+  height: 200px;
+  transform-origin: top left;
+  transform: scale(0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  background: var(--vp-c-bg);
+}
+
+/* scale = 300 / 600 = 0.5 */
+/* 使用 600x200 的视口尺寸，然后缩小到 300x100 的容器 */
+
+.component-example .loading {
+  text-align: center;
+  color: var(--vp-c-text-2);
+  padding: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.5);
+  transform-origin: center;
+}
+
+@media (max-width: 768px) {
+  .component-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .component-example {
+    width: 100%;
+    max-width: 100%;
+    height: 100px;
+  }
+
+  .component-example-wrapper {
+    transform: scale(calc(100vw / 600));
+  }
+}
+</style>

package/docs/components/ComponentSearch.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="component-search">
+    <el-input
+      v-model="searchQuery"
+      placeholder="搜索组件..."
+      clearable
+      class="search-input"
+    >
+      <template #prefix>
+        <el-icon><Search /></el-icon>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+
+const searchQuery = ref('');
+
+const emit = defineEmits<{
+  (e: 'update:query', value: string): void;
+}>();
+
+watch(searchQuery, (newValue) => {
+  emit('update:query', newValue);
+});
+</script>
+
+<style scoped>
+.component-search {
+  margin-bottom: 24px;
+}
+
+.search-input {
+  max-width: 400px;
+}
+</style>