@phelan/design 0.0.1

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

@@ -0,0 +1,251 @@
+<template>
+  <div class="m-search-panel">
+    <div class="m-search-form-area">
+      <component
+        :is="wrappedForm"
+        ref="formRef"
+      />
+    </div>
+    <div
+      class="m-search-fold"
+      :class="`m-search-fold--${lang}`"
+      v-if="props.expandable"
+    >
+      <template v-if="showFoldButtons">
+        <div
+          class="fold-btn"
+          v-show="foldStatus"
+          @click="foldStatus = !foldStatus"
+        >
+          {{ t('收起') }}
+          <m-icon
+            :size="14"
+            icon="ArrowUp"
+          />
+        </div>
+        <div
+          class="fold-btn"
+          v-show="!foldStatus"
+          @click="foldStatus = !foldStatus"
+        >
+          <span>
+            {{ t('展开') }}
+          </span>
+          <m-icon
+            :size="14"
+            icon="ArrowDown"
+          />
+        </div>
+      </template>
+    </div>
+    <div
+      class="m-search-operations"
+      :class="`${props.expandable ? '' : 'm-search-operations--nowrap'}`"
+    >
+      <m-button
+        type="primary"
+        icon="Search"
+        @click="handleSearch"
+        >{{ t('查询') }}</m-button
+      >
+      <m-button
+        type="primary"
+        plain
+        icon="Reset"
+        @click="handleReset"
+        >{{ t('重置') }}</m-button
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, h, ref, useSlots, type VNode, type Component, isVNode, Comment } from 'vue';
+import { searchPanelProps } from './search-panel';
+import { FormInstance, useLocale } from 'element-plus';
+import { ElRow, ElCol } from 'element-plus';
+const { t: oriT, lang } = useLocale();
+const t = (key: string) => oriT(`m.searchPanel.${key}`);
+const props = defineProps(searchPanelProps);
+const emit = defineEmits(['reset', 'search']);
+
+const slots = useSlots();
+const foldStatus = ref(false);
+const formRef = ref<FormInstance>();
+
+// 递归查找 el-form 或 m-form 组件，处理 Fragment 和深层嵌套
+const findFormNode = (nodes: any[]): VNode | null => {
+  if (!nodes || !Array.isArray(nodes)) return null;
+
+  for (const node of nodes) {
+    if (!isVNode(node) || node.type === Comment) continue;
+
+    // 检查组件名称（优先检查，因为可能是直接的 form 组件）
+    const componentName = (node.type as Component)?.name || '';
+    if (['ElForm', 'MForm'].includes(componentName)) {
+      return node;
+    }
+
+    // 检查是否是 Fragment 节点（Vue 3 中多个根节点会被包装成 Fragment）
+    // Fragment 的 type 通常是 Symbol
+    const isFragment = typeof node.type === 'symbol';
+
+    // 处理子节点
+    let children: any[] = [];
+    if (isFragment) {
+      // Fragment 节点的 children 通常是数组
+      if (Array.isArray(node.children)) {
+        children = node.children;
+      } else if (node.children && typeof node.children === 'object') {
+        const defaultChildren = (node.children as any)?.default?.();
+        if (Array.isArray(defaultChildren)) {
+          children = defaultChildren;
+        }
+      }
+    } else if (node.children) {
+      // 普通节点的 children 处理
+      if (Array.isArray(node.children)) {
+        children = node.children;
+      } else if (typeof node.children === 'object') {
+        const defaultChildren = (node.children as any)?.default?.();
+        if (Array.isArray(defaultChildren)) {
+          children = defaultChildren;
+        }
+      }
+    }
+
+    // 递归查找子节点
+    if (children.length > 0) {
+      const found = findFormNode(children);
+      if (found) return found;
+    }
+  }
+
+  return null;
+};
+
+const formNode = computed(() => {
+  const slotNodes = slots.default?.();
+  if (!slotNodes || slotNodes.length === 0) return null;
+
+  // 使用递归函数查找 form 节点
+  const found = findFormNode(slotNodes);
+  if (found) return found;
+
+  // 如果没有找到 form，返回第一个有效节点（向后兼容）
+  const validNodes = slotNodes.filter((node) => isVNode(node) && node.type !== Comment);
+  return validNodes[0] || null;
+});
+
+const allFormItems = computed<VNode[]>(() => {
+  if (
+    !formNode.value ||
+    !['ElForm', 'MForm'].includes((formNode.value.type as Component)?.name || '')
+  ) {
+    return [];
+  }
+
+  // 提取所有el-form-item，支持深层嵌套和 Fragment
+  const extractFormItems = (node: VNode): VNode[] => {
+    if (!isVNode(node) || node.type === Comment) return [];
+
+    // 检查是否是 form-item
+    const componentName = (node.type as Component)?.name || '';
+    if (['ElFormItem', 'MFormItem'].includes(componentName)) {
+      return [node];
+    }
+
+    // 处理子节点
+    if (node.children) {
+      let children: any[] = [];
+
+      // 处理数组形式的 children
+      if (Array.isArray(node.children)) {
+        children = node.children;
+      }
+      // 处理对象形式的 children（slot 函数）
+      else if (typeof node.children === 'object') {
+        const defaultChildren = (node.children as any)?.default?.();
+        if (Array.isArray(defaultChildren)) {
+          children = defaultChildren;
+        }
+      }
+
+      // 递归提取所有 form-item
+      return children.flatMap((child) => {
+        if (isVNode(child)) {
+          return extractFormItems(child);
+        }
+        return [];
+      });
+    }
+
+    return [];
+  };
+
+  return extractFormItems(formNode.value);
+});
+
+// 解析传入的el-form并重组
+const wrappedForm = computed(() => {
+  if (
+    !formNode.value ||
+    !['ElForm', 'MForm'].includes((formNode.value.type as Component)?.name || '')
+  ) {
+    return formNode.value;
+  }
+  // 重建带有布局的Form
+  return h(formNode.value.type as Component, formNode.value.props, {
+    default: () => [
+      h(
+        ElRow,
+        { gutter: props.gutter },
+        {
+          default: () => {
+            if (props.expandable === false && allFormItems.value.length < 3) {
+              const items = allFormItems.value?.map((item) => {
+                return h(ElCol, { span: 9 }, { default: () => [item] });
+              });
+              if (items.length === 2) {
+                return items.concat(h(ElCol, { span: 6 }, { default: () => [h('div')] }));
+              } else {
+                return items.concat([
+                  h(ElCol, { span: 9 }, { default: () => [h('div')] }),
+                  h(ElCol, { span: 6 }, { default: () => [h('div')] }),
+                ]);
+              }
+            }
+            return allFormItems.value?.map((item, index) => {
+              if (foldStatus.value || index < props.visibleCount) {
+                return h(ElCol, { span: props.defaultSpan }, { default: () => [item] });
+              }
+              return h(
+                ElCol,
+                { span: props.defaultSpan, style: { display: 'none' } },
+                { default: () => [item] },
+              );
+            });
+          },
+        },
+      ),
+    ],
+  });
+});
+
+const showFoldButtons = computed(() => {
+  return allFormItems.value?.length > props.visibleCount;
+});
+
+const handleSearch = () => {
+  emit('search', formRef.value?.fields, formRef.value);
+};
+
+const handleReset = () => {
+  formRef.value?.resetFields();
+  emit('reset', formRef.value);
+};
+
+defineExpose({
+  getForm: () => formRef.value, // 暴露获取方法
+});
+</script>

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

@@ -0,0 +1,9 @@
+import { ElOption as Option, ElOptionGroup as OptionGroup } from 'element-plus';
+
+import Select from './src/select.vue';
+
+export const MSelect = Select;
+export const MOption = Option;
+export const MOptionGroup = OptionGroup;
+
+export * from './src/select';

package/packages/components/src/select/src/select.ts

@@ -0,0 +1,3 @@
+import type { SelectProps as ElementSelectProps } from 'element-plus';
+
+export type SelectProps = ElementSelectProps & {};

package/packages/components/src/select/src/select.vue

@@ -0,0 +1,43 @@
+<template>
+  <ElSelect
+    :class="selectClass"
+    v-bind="selectAttrs"
+  >
+    <slot></slot>
+  </ElSelect>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
+import { ElSelect } from 'element-plus';
+import type { SelectProps } from './select';
+
+const props = defineProps<Partial<SelectProps>>();
+const attrs = useAttrs();
+
+// 合并内部 class 和用户传入的 class
+const selectClass = computed(() => {
+  const internalClass = ['m-select'];
+  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 selectAttrs = computed(() => {
+  const { class: _, ...rest } = attrs;
+  return { ...props, ...rest };
+});
+</script>

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

@@ -0,0 +1,5 @@
+import Slider from './src/slider.vue';
+
+export const MSlider = Slider;
+
+export * from './src/slider';

package/packages/components/src/slider/src/slider.ts

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

package/packages/components/src/slider/src/slider.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 { sliderProps } from './slider';
+
+defineProps(sliderProps);
+
+const count = ref(100);
+
+function increment() {
+  count.value++;
+}
+
+onMounted(() => {
+  console.log(`The initial count is ${count.value}.`);
+});
+</script>

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

@@ -0,0 +1,5 @@
+import Space from './src/space.vue';
+
+export const MSpace = Space;
+
+export * from './src/space';

package/packages/components/src/space/src/space.ts

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

package/packages/components/src/space/src/space.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-space
+    :class="spaceClass"
+    v-bind="spaceAttrs"
+  >
+    <slot></slot>
+  </el-space>
+</template>
+
+<script lang="ts" setup>
+import { ElSpace } from 'element-plus';
+import { computed, useAttrs } from 'vue';
+import { spaceProps } from './space';
+
+defineProps(spaceProps);
+const attrs = useAttrs();
+
+// 合并内部 class 和用户传入的 class
+const spaceClass = computed(() => {
+  const internalClass = ['m-space'];
+  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 spaceAttrs = computed(() => {
+  const { class: _, ...rest } = attrs;
+  return rest;
+});
+</script>

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

@@ -0,0 +1,8 @@
+import Steps from './src/steps.vue';
+import Step from './src/step.vue';
+
+export const MSteps = Steps;
+export const MStep = Step;
+
+export * from './src/steps';
+export * from './src/step';

package/packages/components/src/steps/src/step.ts

@@ -0,0 +1,15 @@
+export const stepProp = {
+  /**
+   * @description 标题
+   */
+  title: String,
+  /**
+   * @description 描述
+   */
+  description: {
+    type: String,
+    default: '',
+  },
+};
+
+export type StepProp = typeof stepProp;

package/packages/components/src/steps/src/step.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { inject, onMounted } from 'vue';
+import { type StepProp, stepProp } from './step';
+import { STEPS_INJECTION_KEY } from './tokens';
+
+const props = defineProps(stepProp);
+const rootSteps = inject(STEPS_INJECTION_KEY);
+
+const slots = defineSlots<{
+  title: (props: StepProp) => any;
+  description: (props: StepProp) => any;
+}>();
+
+onMounted(() => {
+  rootSteps?.addItem(props);
+  rootSteps?.addItemSlot(slots);
+});
+</script>

package/packages/components/src/steps/src/steps.ts

@@ -0,0 +1,20 @@
+export const stepsProps = {
+  /**
+   * @description 设置当前激活步骤	
+
+   */
+  active: {
+    type: [String, Number],
+    default: 0,
+  },
+  /**
+   * @description 步骤条风格
+   */
+  type: {
+    type: String,
+    default: 'default',
+    validator: (value: string) => ['default', 'arrow', 'navigation'].includes(value),
+  },
+};
+
+export type StepsProps = typeof stepsProps;

package/packages/components/src/steps/src/steps.vue

@@ -0,0 +1,95 @@
+<template>
+  <div :class="prefixCls">
+    <slot />
+    <div
+      :class="`${prefixCls}-inner ${withDescription ? `${prefixCls}-inner--with-description` : ''}`"
+    >
+      <div
+        v-for="(item, index) in stepItems"
+        :class="`${prefixCls}-item ${prefixCls}-item--${getItemStatus(index)}`"
+        @click="updateNavigateActiveIndex(index)"
+      >
+        <div :class="`${prefixCls}-item-icon`">
+          <div :class="`${prefixCls}-item-icon-inner`">
+            <div :class="`${prefixCls}-item-icon-inner-text`">{{ index + 1 }}</div>
+          </div>
+        </div>
+        <div :class="`${prefixCls}-item-content`">
+          <div :class="`${prefixCls}-item-content-title`">{{ item.title }}</div>
+          <div :class="`${prefixCls}-item-content-description`">{{ item.description }}</div>
+        </div>
+        <m-icon
+          v-if="['arrow', 'navigation'].includes(type) && index < stepItems.length - 1"
+          :class="`${prefixCls}-item-arrow`"
+          icon="ArrowRight"
+          size="24"
+        ></m-icon>
+        <div
+          v-if="isShowLine(index)"
+          :class="`${prefixCls}-line ${prefixCls}-line--${index < +active ? 'active' : ''}`"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, ref } from 'vue';
+import { stepsProps } from './steps';
+import { STEPS_INJECTION_KEY } from './tokens';
+import { StepProp } from './step';
+
+const props = defineProps(stepsProps);
+
+const stepItems = ref<StepProp[]>([]);
+const stepItemSlots = ref<any>([]);
+const navigateActiveIndex = defineModel<number>();
+function updateNavigateActiveIndex(index: number) {
+  if (index > +props.active) {
+    return;
+  }
+  navigateActiveIndex.value = index;
+}
+
+const prefixCls = computed(() => {
+  switch (props.type) {
+    case 'arrow':
+      return 'm-steps-arrow';
+    case 'navigation':
+      return 'm-steps-navigation';
+    default:
+      return 'm-steps';
+  }
+});
+const isShowLine = (index: number) => {
+  if (props.type === 'navigation') {
+    return navigateActiveIndex.value === index;
+  }
+  if (props.type === 'default') {
+    return index < stepItems.value.length - 1;
+  }
+  return false;
+};
+const getItemStatus = (index: number) => {
+  const { active } = props;
+  if (index < +active) {
+    return 'finish';
+  } else if (index === +active) {
+    return 'process';
+  }
+  return 'wait';
+};
+
+const withDescription = computed(() => {
+  return stepItems.value.some((item) => item.description);
+});
+
+provide(STEPS_INJECTION_KEY, {
+  addItem: (item: StepProp) => {
+    stepItems.value.push(item);
+  },
+  addItemSlot: (slot: any) => {
+    stepItemSlots.value.push(slot);
+  },
+});
+</script>

package/packages/components/src/steps/src/tokens.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey } from 'vue';
+
+export const STEPS_INJECTION_KEY: InjectionKey<{
+  addItem: (item: any) => void;
+  addItemSlot: (itemSlot: any) => void;
+}> = Symbol('Steps');

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

@@ -0,0 +1,5 @@
+import Switch from './src/switch.vue';
+
+export const MSwitch = Switch;
+
+export * from './src/switch';

package/packages/components/src/switch/src/switch.ts

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

package/packages/components/src/switch/src/switch.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-switch
+    :class="switchClass"
+    v-bind="switchAttrs"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </el-switch>
+</template>
+
+<script lang="ts" setup>
+import { ElSwitch } from 'element-plus';
+import { computed, useAttrs } from 'vue';
+import { switchProps } from './switch';
+
+defineProps(switchProps);
+const attrs = useAttrs();
+
+// 合并内部 class 和用户传入的 class
+const switchClass = computed(() => {
+  const internalClass = ['m-switch'];
+  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 switchAttrs = computed(() => {
+  const { class: _, ...rest } = attrs;
+  return rest;
+});
+</script>

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

@@ -0,0 +1,7 @@
+import { ElTableColumn } from 'element-plus';
+import Table from './src/table.vue';
+
+export const MTable = Table;
+export const MTableColumn = ElTableColumn;
+
+export * from './src/table';

package/packages/components/src/table/src/table.ts

@@ -0,0 +1,34 @@
+import { TableProps as ElTableProps } from 'element-plus';
+import { ExtractPropTypes } from 'vue';
+
+export enum SizeType {
+  '',
+  'default',
+  'small',
+}
+
+export const tableProps = {
+  /**
+   * @description 斑马纹样式
+   */
+  stripe: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description 表格尺寸
+   */
+  size: {
+    type: String,
+    default: SizeType.default,
+  },
+  /**
+   * @description 表格外边框
+   */
+  outline: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export type TableProps<T> = ExtractPropTypes<typeof tableProps> & ElTableProps<T>;