@phelan/design 0.0.1

package/packages/components/src/message/src/message.ts

@@ -0,0 +1,161 @@
+import { ElMessage } from 'element-plus';
+import type { MessageOptions } from 'element-plus';
+import { h } from 'vue';
+import { MIcon } from '../../icon';
+
+export interface MMessageOptions extends Omit<MessageOptions, 'type' | 'customClass'> {
+  type?: 'success' | 'warning' | 'info' | 'error' | 'primary';
+  customClass?: string;
+}
+
+// 合并自定义类名，确保 m-message 类名始终存在
+const mergeCustomClass = (customClass?: string): string => {
+  const baseClass = 'm-message';
+  if (customClass) {
+    return `${baseClass} ${customClass}`;
+  }
+  return baseClass;
+};
+
+// 根据 type 获取对应的图标名称
+const getIconByType = (type?: 'success' | 'warning' | 'info' | 'error' | 'primary'): string => {
+  const iconMap: Record<string, string> = {
+    success: 'Success',
+    warning: 'Warning',
+    info: 'Info',
+    error: 'Error',
+    primary: 'Info', // primary 使用 Info 图标
+  };
+  return iconMap[type || 'info'] || 'Info';
+};
+
+// 创建图标组件
+const createIcon = (type?: 'success' | 'warning' | 'info' | 'error' | 'primary') => {
+  return () =>
+    h(MIcon, {
+      icon: getIconByType(type),
+      size: '22',
+    });
+};
+
+// 封装 ElMessage，支持命令式调用
+const MMessage = (options: string | MMessageOptions) => {
+  if (typeof options === 'string') {
+    return ElMessage({
+      message: options,
+      customClass: 'm-message',
+      icon: createIcon('info'),
+    });
+  }
+  const adOptions = options as MMessageOptions;
+  const { type, customClass, icon, ...restOptions } = adOptions;
+
+  // 如果用户传入了自定义 icon，则使用用户的 icon，否则根据 type 自动匹配
+  const finalIcon = icon || createIcon(type);
+
+  // 如果 type 是 primary，需要特殊处理，因为 MessageOptions 类型不支持
+  if (type === 'primary') {
+    return ElMessage({
+      ...restOptions,
+      type: 'primary',
+      customClass: mergeCustomClass(customClass),
+      icon: finalIcon,
+    } as unknown as MessageOptions);
+  }
+
+  const opts: MessageOptions = {
+    ...restOptions,
+    customClass: mergeCustomClass(customClass),
+    icon: finalIcon,
+    ...(type && { type }),
+  };
+  return ElMessage(opts);
+};
+
+// 为不同类型的消息提供便捷方法
+MMessage.success = (message: string | MMessageOptions) => {
+  if (typeof message === 'string') {
+    return ElMessage.success({
+      message,
+      customClass: 'm-message',
+      icon: createIcon('success'),
+    });
+  }
+  const { icon, ...restMessage } = message;
+  return ElMessage.success({
+    ...restMessage,
+    customClass: mergeCustomClass(message.customClass),
+    icon: icon || createIcon('success'),
+  });
+};
+
+MMessage.warning = (message: string | MMessageOptions) => {
+  if (typeof message === 'string') {
+    return ElMessage.warning({
+      message,
+      customClass: 'm-message',
+      icon: createIcon('warning'),
+    });
+  }
+  const { icon, ...restMessage } = message;
+  return ElMessage.warning({
+    ...restMessage,
+    customClass: mergeCustomClass(message.customClass),
+    icon: icon || createIcon('warning'),
+  });
+};
+
+MMessage.info = (message: string | MMessageOptions) => {
+  if (typeof message === 'string') {
+    return ElMessage.info({
+      message,
+      customClass: 'm-message',
+      icon: createIcon('info'),
+    });
+  }
+  const { icon, ...restMessage } = message;
+  return ElMessage.info({
+    ...restMessage,
+    customClass: mergeCustomClass(message.customClass),
+    icon: icon || createIcon('info'),
+  });
+};
+
+MMessage.error = (message: string | MMessageOptions) => {
+  if (typeof message === 'string') {
+    return ElMessage.error({
+      message,
+      customClass: 'm-message',
+      icon: createIcon('error'),
+    });
+  }
+  const { icon, ...restMessage } = message;
+  return ElMessage.error({
+    ...restMessage,
+    customClass: mergeCustomClass(message.customClass),
+    icon: icon || createIcon('error'),
+  });
+};
+
+// 暂不支持 2.9.11
+// MMessage.primary = (message: string | MMessageOptions) => {
+//   if (typeof message === 'string') {
+//     // @ts-expect-error - primary method exists in runtime but not in types
+//     return ElMessage.primary({
+//       message,
+//       customClass: 'm-message',
+//     });
+//   }
+//   // @ts-expect-error - primary method exists in runtime but not in types
+//   return ElMessage.primary({
+//     ...message,
+//     customClass: mergeCustomClass(message.customClass),
+//   });
+// };
+
+// 关闭所有消息
+MMessage.closeAll = () => {
+  ElMessage.closeAll();
+};
+
+export { MMessage };

package/packages/components/src/nav/index.ts

@@ -0,0 +1,7 @@
+import Nav from './src/nav.vue';
+
+export const MNav = Nav;
+
+export * from './src/nav';
+
+export * from './src/types';

package/packages/components/src/nav/src/nav.ts

@@ -0,0 +1,19 @@
+import { MoreLevel } from './types';
+export const navProps = {
+  /**
+   * @host 更多自定义层级
+   */
+  moreLevel: {
+    type: Array<MoreLevel>,
+    default: () => [],
+  },
+  /**
+   * @bgColor 背景颜色
+   */
+  bgColor: {
+    type: String,
+    default: 'var(--m-nav-bg-white)',
+  },
+};
+
+export type NavProps = typeof navProps;

package/packages/components/src/nav/src/nav.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="m-nav" :style="{ backgroundColor: bgColor }">
+        <m-breadcrumb class="nav" separator="/">
+            <transition-group name="breadcrumb">
+                <m-breadcrumb-item :to="levelList.length === index + 1 ? undefined : toPath(item)"
+                    v-for="(item, index) in levelList" :key="index">
+                    <span :class="toPath(item)?.path ? '' : 'no-path'">{{ item?.title }}</span>
+                </m-breadcrumb-item>
+            </transition-group>
+        </m-breadcrumb>
+        <div class="slot-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MBreadcrumb, MBreadcrumbItem } from '../../breadcrumb';
+import { navProps } from './nav';
+import { Level } from './types';
+const props = defineProps(navProps);
+const { bgColor, moreLevel } = props;
+const levelList = ref<Level[]>([]);
+init();
+function toPath(item: Level) {
+    // 准对默认和传入的层级，不同的处理
+    if (item?.type === 1) {
+        const rootPath = window.location.pathname.split('/')?.[1];
+        if (item.name?.toLowerCase()?.includes('http')) {
+            const path = item.name.substring(item.name.indexOf(rootPath) + rootPath.length);
+            if (path) {
+                return { path };
+            } else {
+                return undefined;
+            }
+        } else {
+            return undefined;
+        }
+    } else if (item?.type === 2) {
+        if (item?.path) {
+            return { path: item.path };
+        } else {
+            return undefined;
+        }
+    }
+}
+function init() {
+    const wujieLevelList = window?.$wujie?.props?.data?.levelList || [];
+    // 合并默认和传入的层级
+    levelList.value = [
+        ...wujieLevelList.map((item) => {
+            return {
+                ...item,
+                title: item?.meta?.title,
+                type: 1,
+            };
+        }),
+        ...moreLevel.map((item) => {
+            return {
+                ...item,
+                type: 2,
+            };
+        }),
+    ];
+}
+</script>

package/packages/components/src/nav/src/types.ts

@@ -0,0 +1,11 @@
+export interface MoreLevel {
+  title?: string;
+  path?: string;
+}
+
+export interface Level {
+  title?: string;
+  path?: string;
+  name?: string;
+  type?: number;
+}

package/packages/components/src/pagination/index.ts

@@ -0,0 +1,5 @@
+import Pagination from './src/pagination.vue';
+
+export const MPagination = Pagination;
+
+export * from './src/pagination';

package/packages/components/src/pagination/src/pagination.ts

@@ -0,0 +1,60 @@
+import { ArrowLeft, ArrowRight } from '@m-design/icons';
+export const paginationProps = {
+  /**
+   * @description 总条目数
+   */
+  total: {
+    type: Number,
+    default: 0,
+  },
+
+  /**
+   * @description 每页显示条目个数
+   */
+  pageSize: {
+    type: Number,
+    default: 20,
+  },
+
+  /**
+   * @description 每页显示个数选择器的选项设置
+   */
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 30, 50],
+  },
+
+  /**
+   * @description 组件布局，子组件名用逗号分隔
+   */
+  layout: {
+    type: String,
+    default: 'total, sizes, prev, pager, next, jumper',
+  },
+
+  /**
+   * @description 是否为分页按钮添加背景色
+   */
+  background: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * @description 上一页图标
+   */
+  prevIcon: {
+    type: Object,
+    default: () => ArrowLeft,
+  },
+
+  /**
+   * @description 下一页图标
+   */
+  nextIcon: {
+    type: Object,
+    default: () => ArrowRight,
+  },
+} as const;
+
+export type PaginationProps = typeof paginationProps;

package/packages/components/src/pagination/src/pagination.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="m-pagination">
+    <el-pagination
+      v-bind="filteredAttrs"
+      :background="background"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      :popper-class="popperClass"
+      :prev-icon="prevIcon"
+      :next-icon="nextIcon"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { paginationProps } from './pagination';
+defineProps(paginationProps);
+const attrs = useAttrs();
+const filteredAttrs = computed(() => {
+  const { ...rest } = attrs;
+  return rest;
+});
+
+// 如果用户传入了popper-class，则合并
+const popperClass = computed(() => {
+  const internalClass = 'm-pagination-popper';
+  const userPopperClass = attrs.popperClass as string | undefined;
+
+  if (userPopperClass && typeof userPopperClass === 'string') {
+    return `${userPopperClass} ${internalClass}`;
+  }
+
+  return internalClass;
+});
+</script>

package/packages/components/src/popover/index.ts

@@ -0,0 +1,5 @@
+import Popover from './src/popover.vue';
+
+export const MPopover = Popover;
+
+export * from './src/popover';

package/packages/components/src/popover/src/popover.ts

@@ -0,0 +1,14 @@
+import type { PopoverProps as ElPopoverProps } from 'element-plus';
+import { ExtractPropTypes } from 'vue';
+
+export const popoverProps = {
+  /**
+   * @description 是否显示 Tooltip 箭头
+   */
+  showArrow: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type PopoverProps = ExtractPropTypes<typeof popoverProps> & ElPopoverProps;

package/packages/components/src/popover/src/popover.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-popover
+    ref="elPopoverRef"
+    :class="popoverClass"
+    :show-arrow="showArrow"
+    v-bind="popoverAttrs"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </el-popover>
+</template>
+
+<script lang="ts" setup>
+import { ElPopover } from 'element-plus';
+import { computed, useAttrs, ref } from 'vue';
+import { popoverProps } from './popover';
+
+const props = defineProps(popoverProps);
+const attrs = useAttrs();
+const elPopoverRef = ref();
+
+const { showArrow } = props;
+
+// 合并内部 class 和用户传入的 class
+const popoverClass = computed(() => {
+  const internalClass = ['m-popover'];
+  const userClass = attrs.class;
+
+  if (userClass) {
+    if (typeof userClass === 'string') {
+      return [...internalClass, userClass];
+    }
+    if (Array.isArray(userClass)) {
+      return [...internalClass, ...userClass];
+    }
+    if (typeof userClass === 'object') {
+      return [...internalClass, userClass];
+    }
+  }
+
+  return internalClass;
+});
+
+// 提取公共的 attrs（排除 class 和 show-arrow，因为已经单独处理）
+const popoverAttrs = computed(() => {
+  const { class: _, 'show-arrow': __, ...rest } = attrs;
+  return rest;
+});
+
+defineExpose({
+  hide: () => elPopoverRef.value?.hide(),
+});
+</script>

package/packages/components/src/progress/index.ts

@@ -0,0 +1,5 @@
+import Progress from './src/progress.vue';
+
+export const MProgress = Progress;
+
+export * from './src/progress';

package/packages/components/src/progress/src/progress.ts

@@ -0,0 +1,8 @@
+export const progressProps = {
+  /**
+   * @description 名字
+   */
+  name: String,
+};
+
+export type ProgressProps = typeof progressProps;

package/packages/components/src/progress/src/progress.vue

@@ -0,0 +1,20 @@
+<template>
+  <button @click="increment">{{ name }}'s happiness index is {{ count }}</button>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { progressProps } from './progress';
+
+defineProps(progressProps);
+
+const count = ref(100);
+
+function increment() {
+  count.value++;
+}
+
+onMounted(() => {
+  console.log(`The initial count is ${count.value}.`);
+});
+</script>

package/packages/components/src/radio/index.ts

@@ -0,0 +1,11 @@
+import {
+  //   ElRadio as Radio,
+  ElRadioGroup as RadioGroup,
+  ElRadioButton as RadioButton,
+} from 'element-plus';
+
+import Radio from './src/radio.vue';
+
+export const MRadio = Radio;
+export const MRadioGroup = RadioGroup;
+export const MRadioButton = RadioButton;

package/packages/components/src/radio/src/radio.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-radio
+    class="m-radio"
+    v-bind="{ ...props, ...$attrs }"
+  >
+    <slot />
+  </el-radio>
+</template>
+
+<script lang="ts" setup>
+import { RadioProps } from 'element-plus';
+const props = defineProps<RadioProps>();
+</script>

package/packages/components/src/result/index.ts

@@ -0,0 +1,5 @@
+import Result from './src/result.vue';
+
+export const MResult = Result;
+
+export * from './src/result';

package/packages/components/src/result/src/result.ts

@@ -0,0 +1,8 @@
+export const resultProps = {
+  /**
+   * @description 名字
+   */
+  name: String,
+};
+
+export type ResultProps = typeof resultProps;

package/packages/components/src/result/src/result.vue

@@ -0,0 +1,20 @@
+<template>
+  <button @click="increment">{{ name }}'s happiness index is {{ count }}</button>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { resultProps } from './result';
+
+defineProps(resultProps);
+
+const count = ref(100);
+
+function increment() {
+  count.value++;
+}
+
+onMounted(() => {
+  console.log(`The initial count is ${count.value}.`);
+});
+</script>

package/packages/components/src/scrollbar/index.ts

@@ -0,0 +1,5 @@
+import Scrollbar from './src/scrollbar.vue';
+
+export const MScrollbar = Scrollbar;
+
+export * from './src/scrollbar';

package/packages/components/src/scrollbar/src/scrollbar.ts

@@ -0,0 +1,8 @@
+import type { ScrollbarProps as ElScrollbarProps } from 'element-plus';
+import { ExtractPropTypes } from 'vue';
+
+export const scrollbarProps = {
+  // 可以在这里添加自定义的 props，或者直接使用 Element Plus 的 props
+};
+
+export type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps> & ElScrollbarProps;

package/packages/components/src/scrollbar/src/scrollbar.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-scrollbar
+    ref="elScrollbarRef"
+    :class="scrollbarClass"
+    v-bind="scrollbarAttrs"
+  >
+    <slot></slot>
+  </el-scrollbar>
+</template>
+
+<script lang="ts" setup>
+import { ElScrollbar } from 'element-plus';
+import { computed, useAttrs, ref } from 'vue';
+import { scrollbarProps } from './scrollbar';
+
+defineProps(scrollbarProps);
+const attrs = useAttrs();
+const elScrollbarRef = ref();
+
+// 合并内部 class 和用户传入的 class
+const scrollbarClass = computed(() => {
+  const internalClass = ['m-scrollbar'];
+  const userClass = attrs.class;
+
+  if (userClass) {
+    if (typeof userClass === 'string') {
+      return [...internalClass, userClass];
+    }
+    if (Array.isArray(userClass)) {
+      return [...internalClass, ...userClass];
+    }
+    if (typeof userClass === 'object') {
+      return [...internalClass, userClass];
+    }
+  }
+
+  return internalClass;
+});
+
+// 提取公共的 attrs（排除 class，因为已经单独处理）
+const scrollbarAttrs = computed(() => {
+  const { class: _, ...rest } = attrs;
+  return rest;
+});
+
+defineExpose({
+  handleScroll: () => elScrollbarRef.value?.handleScroll(),
+  scrollTo: (options: any, yCoord?: number) => elScrollbarRef.value?.scrollTo(options, yCoord),
+  setScrollTop: (scrollTop: number) => elScrollbarRef.value?.setScrollTop(scrollTop),
+  setScrollLeft: (scrollLeft: number) => elScrollbarRef.value?.setScrollLeft(scrollLeft),
+  update: () => elScrollbarRef.value?.update(),
+  wrapRef: elScrollbarRef.value?.wrapRef,
+});
+</script>

package/packages/components/src/search-panel/index.ts

@@ -0,0 +1,5 @@
+import SearchPanel from './src/search-panel.vue';
+
+export const MSearchPanel = SearchPanel;
+
+export * from './src/search-panel';

package/packages/components/src/search-panel/src/search-panel.ts

@@ -0,0 +1,8 @@
+export const searchPanelProps = {
+  defaultSpan: { type: Number, default: 8 }, // 默认列宽
+  gutter: { type: Number, default: 16 }, // 栅格间距
+  visibleCount: { type: Number, default: 6 }, // 折叠时显示的项目数
+  expandable: { type: Boolean, default: true }, // 是否可展开收起
+};
+
+export type SearchPanelProps = typeof searchPanelProps;