@phelan/design 0.0.1

package/packages/components/src/table-head-editor/src/utils.ts

@@ -0,0 +1,192 @@
+import type { TreeItem } from './table-head-editor';
+
+// Tree 组件需要的数据格式
+export interface TreeNode {
+  id: string;
+  label: string;
+  visible: boolean;
+  fixed?: boolean;
+  fixedPosition?: 'left' | 'right' | undefined;
+  editable?: boolean;
+  disabled?: boolean; // 用于 tree 组件的 disabled 属性
+  children?: TreeNode[];
+}
+
+// 重置 ID 计数器（保留函数以保持兼容性，但不再需要计数器）
+export const resetIdCounter = () => {
+  // 不再需要计数器，因为使用 key 或 label 作为 id
+};
+
+// 将 TreeItem 转换为 TreeNode，并生成唯一 ID
+export const convertToTreeNode = (item: TreeItem, parentId = ''): TreeNode => {
+  // 如果 key 为空，使用 label 作为 key；否则使用 key
+  // 为了保持唯一性，结合 parentId 和计数器
+  const baseKey = item.key || item.label;
+  const id = parentId ? `${parentId}-${baseKey}` : baseKey;
+
+  // 先转换子节点
+  let children: TreeNode[] | undefined;
+  if (item.children && item.children.length > 0) {
+    children = item.children.map((child) => convertToTreeNode(child, id));
+  }
+
+  // 检查是否是半选状态：如果 item.visible=true 但子节点不是全部选中
+  // 在组件内部，半选状态通过 visible=false + hasIndeterminateState 来表示
+  let { visible } = item;
+  if (item.visible && children && children.length > 0) {
+    // 递归检查所有子节点是否全部被选中（包括子节点的子节点）
+    // 一个节点被认为是"完全选中"，需要满足：
+    // 1. 节点本身 visible=true
+    // 2. 如果有子节点，所有子节点也必须"完全选中"
+    const isFullyChecked = (node: TreeNode): boolean => {
+      if (!node.visible) {
+        return false;
+      }
+      if (node.children && node.children.length > 0) {
+        return node.children.every((child) => isFullyChecked(child));
+      }
+      return true;
+    };
+
+    const allChildrenVisible = children.every((child) => isFullyChecked(child));
+    // 如果节点 visible=true 但子节点不是全部选中，则设置为 false（半选状态）
+    if (!allChildrenVisible) {
+      visible = false;
+    }
+  }
+
+  const node: TreeNode = {
+    id,
+    label: item.label,
+    visible,
+    fixed: item.fixed,
+    fixedPosition: item.fixedPosition,
+    editable: item.editable,
+    disabled: item.editable === false, // 如果 editable 为 false，则禁用 checkbox
+    children,
+  };
+
+  return node;
+};
+
+// 将 TreeNode 转换回 TreeItem（用于确认时输出，半选状态转换为 visible=true）
+export const convertToTreeItem = (node: TreeNode): TreeItem => {
+  // 如果 node.id 等于 node.label，说明原本的 key 是空的，转换回去时也保持 key 为空
+  // 否则使用 node.id 作为 key
+  const key = node.id === node.label ? '' : node.id;
+
+  // 先转换子节点
+  let children: TreeItem[] | undefined;
+  if (node.children && node.children.length > 0) {
+    children = node.children.map((child) => convertToTreeItem(child));
+  }
+
+  // 确定 visible 值：
+  // - 如果节点 visible=true，直接使用 true
+  // - 如果节点 visible=false 但子节点有部分被选中（半选状态），转换为 visible=true（外部不需要理解半选的含义）
+  // - 如果节点 visible=false 且子节点全部未选中，保持 false
+  let { visible } = node;
+  if (!node.visible && children && children.length > 0) {
+    // 检查是否是半选状态
+    const isIndeterminate = hasIndeterminateState(node);
+    if (isIndeterminate) {
+      // 半选状态：转换为 visible=true，因为外部不需要理解半选的含义，半选就等同于可见
+      visible = true;
+    }
+    // 如果不是半选状态，保持 node.visible 的值（false）
+  }
+
+  const item: TreeItem = {
+    key,
+    label: node.label,
+    visible,
+    fixed: node.fixed,
+    fixedPosition: node.fixedPosition,
+    editable: node.editable,
+    children,
+  };
+
+  return item;
+};
+
+// 批量转换 TreeItem[] 到 TreeNode[]
+export const convertToTreeNodes = (items: TreeItem[]): TreeNode[] => {
+  resetIdCounter();
+  return items.map((item) => convertToTreeNode(item));
+};
+
+// 批量转换 TreeNode[] 到 TreeItem[]
+export const convertToTreeItems = (nodes: TreeNode[]): TreeItem[] => {
+  return nodes.map((node) => convertToTreeItem(node));
+};
+
+// 检查节点是否有半选状态（节点本身 visible=false，但子节点中有部分被选中）
+export const hasIndeterminateState = (node: TreeNode): boolean => {
+  if (!node.children || node.children.length === 0) {
+    return false;
+  }
+  // 如果节点本身是 visible=true，不算半选
+  if (node.visible) {
+    return false;
+  }
+  // 检查子节点中是否有被选中的
+  const hasCheckedChild = node.children.some((child) => {
+    if (child.visible) {
+      return true;
+    }
+    // 递归检查子节点的子节点
+    return hasIndeterminateState(child);
+  });
+  return hasCheckedChild;
+};
+
+// 获取节点的排序优先级
+// 1. 勾选 + fixed为true + fixedPosition为left|undefined|null -> 优先级 1
+// 2. 勾选 + fixed为false|undefined -> 优先级 2
+// 3. 勾选 + fixed为true + fixedPosition为right -> 优先级 3
+// 4. 未勾选的 -> 优先级 4
+const getNodeSortPriority = (node: TreeNode): number => {
+  const isChecked = node.visible || hasIndeterminateState(node);
+
+  if (!isChecked) {
+    return 4; // 未勾选的
+  }
+
+  if (node.fixed === true) {
+    if (
+      node.fixedPosition === 'left' ||
+      node.fixedPosition === undefined ||
+      node.fixedPosition === null
+    ) {
+      return 1; // 勾选 + fixed为true + fixedPosition为left|undefined|null
+    }
+    if (node.fixedPosition === 'right') {
+      return 3; // 勾选 + fixed为true + fixedPosition为right
+    }
+  }
+
+  // 勾选 + fixed为false|undefined
+  return 2;
+};
+
+// 对同层级的节点进行排序：按照新的排序规则
+export const sortNodesByVisible = (nodes: TreeNode[]): TreeNode[] => {
+  return [...nodes]
+    .map((node) => {
+      // 递归处理子节点
+      if (node.children && node.children.length > 0) {
+        return {
+          ...node,
+          children: sortNodesByVisible(node.children),
+        };
+      }
+      return node;
+    })
+    .sort((a, b) => {
+      const priorityA = getNodeSortPriority(a);
+      const priorityB = getNodeSortPriority(b);
+
+      // 优先级小的排在前面
+      return priorityA - priorityB;
+    });
+};

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

@@ -0,0 +1,7 @@
+import Tabs from './src/tabs.vue';
+import { ElTabPane } from 'element-plus';
+
+export const MTabs = Tabs;
+export const MTabPane = ElTabPane;
+
+export * from './src/tabs';

package/packages/components/src/tabs/src/tabs.ts

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

package/packages/components/src/tabs/src/tabs.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-tabs
+    class="m-tabs"
+    v-bind="filteredAttrs"
+  >
+    <slot></slot>
+  </el-tabs>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
+import { ElTabs } from 'element-plus';
+import { tabsProps } from './tabs';
+
+defineProps(tabsProps);
+
+const attrs = useAttrs();
+
+const filteredAttrs = computed(() => {
+  const { ...rest } = attrs;
+  return rest;
+});
+</script>

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

@@ -0,0 +1,5 @@
+import Tag from './src/tag.vue';
+
+export const MTag = Tag;
+
+export * from './src/tag';

package/packages/components/src/tag/src/tag.ts

@@ -0,0 +1,47 @@
+export const tagProps = {
+  /**
+   * @type 类型
+   */
+  type: {
+    type: String,
+    values: ['primary', 'success', 'info', 'warning', 'danger'],
+    default: 'primary',
+  },
+  /**
+   * @closable 是否可以关闭
+   */
+  closable: Boolean,
+  /**
+   * @dot 是否有圆点
+   */
+  dot: Boolean,
+  /**
+   * @icon 是否有icon图标
+   */
+  icon: Boolean,
+  /**
+   * @bgColor 背景颜色
+   */
+  bgColor: String,
+
+  /**
+   * @dotColor 标点颜色
+   */
+  dotColor: String,
+  /**
+   * @description 主题类型
+   */
+  effect: {
+    type: String,
+    values: ['plain', 'light'],
+    default: 'light',
+  },
+};
+
+export const tagEmits = {
+  close: () => true,
+  click: () => true,
+};
+
+export type TagEmits = typeof tagEmits;
+export type TagProps = typeof tagProps;

package/packages/components/src/tag/src/tag.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="m-tag" :style="{
+        backgroundColor: effect === 'plain' ? '' : bgColor || bgTypeColor[type],
+        color: bgColor || dotTypeColor[type],
+        borderColor: effect === 'plain' ? dotTypeColor[type] : bgTypeColor[type],
+    }" @click="handleClick">
+        <span v-if="dot" class="m-tag-dot" :style="{ backgroundColor: dotColor || dotTypeColor[type] }"></span>
+        <span class="m-tag-icon" v-else-if="icon">
+            <m-icon :icon="type" :color="dotTypeColor[type]" size="12">
+                <component :is="iconConfig[type]"></component>
+            </m-icon>
+        </span>
+        <slot></slot>
+        <m-icon v-if="closable" class="m-tag-close" @click.stop="handleClose" icon="Close" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Info, Success, Error } from '@m-design/icons';
+import { tagProps, tagEmits } from './tag';
+const { dot, icon, type, closable, bgColor, dotColor, effect } = defineProps(tagProps);
+const emit = defineEmits(tagEmits);
+import { TypeColor, IconConfig } from '../../tag/src/types';
+
+// 背景色配置
+const bgTypeColor: TypeColor = {
+    primary: '#EAF2FE',
+    success: '#DDFCEF',
+    info: '#E7E7E7',
+    warning: '#FFF1E5',
+    error: '#FFF0ED',
+};
+
+// 点状颜色配置
+const dotTypeColor: TypeColor = {
+    primary: '#0D3A93',
+    success: '#009258',
+    info: '#7B8187',
+    warning: '#FF6200',
+    error: '#D70000',
+};
+
+const iconConfig: IconConfig = {
+    primary: Info,
+    success: Success,
+    info: Info,
+    warning: Info,
+    error: Error,
+};
+
+// 关闭
+const handleClose = () => {
+    emit('close');
+};
+
+// 点击
+const handleClick = () => {
+    emit('click');
+};
+</script>

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

@@ -0,0 +1,8 @@
+import type { Component } from 'vue';
+export interface TypeColor {
+  [key: string]: string;
+}
+
+export interface IconConfig {
+  [key: string]: Component;
+}

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

@@ -0,0 +1,5 @@
+import Text from './src/text.vue';
+
+export const MText = Text;
+
+export * from './src/text';

package/packages/components/src/text/src/text.ts

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

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

package/packages/components/src/time-picker/index.ts

@@ -0,0 +1,5 @@
+import TimePicker from './src/time-picker.vue';
+
+export const MTimePicker = TimePicker;
+
+export * from './src/time-picker';

package/packages/components/src/time-picker/src/time-picker.ts

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

package/packages/components/src/time-picker/src/time-picker.vue

@@ -0,0 +1,14 @@
+<template>
+  <el-time-picker
+    v-bind="{ ...props, ...$attrs }"
+    class="m-time-picker"
+    :popper-class="`m-time-picker-popper ${props.popperClass || ''}`"
+  >
+  </el-time-picker>
+</template>
+<script lang="ts" setup>
+import { ElTimePicker } from 'element-plus';
+import { TimePickerProps } from './time-picker';
+
+const props = defineProps<Partial<TimePickerProps>>();
+</script>

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

@@ -0,0 +1,5 @@
+import TimeSelect from './src/time-select.vue';
+
+export const MTimeSelect = TimeSelect;
+
+export * from './src/time-select';

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

@@ -0,0 +1,5 @@
+export const timeSelectProps = {
+  popperClass: String,
+};
+
+export type TimeSelectProps = typeof timeSelectProps;

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

@@ -0,0 +1,14 @@
+<template>
+  <el-time-select
+    v-bind="{ ...props, ...$attrs }"
+    class="m-time-select"
+    :popper-class="`m-time-select-popper ${props.popperClass || ''}`"
+  >
+  </el-time-select>
+</template>
+<script lang="ts" setup>
+import { ElTimeSelect } from 'element-plus';
+import { timeSelectProps } from './time-select';
+
+const props = defineProps(timeSelectProps);
+</script>

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

@@ -0,0 +1,5 @@
+import Tooltip from './src/tooltip.vue';
+
+export const MTooltip = Tooltip;
+
+export * from './src/tooltip';

package/packages/components/src/tooltip/src/tooltip.ts

@@ -0,0 +1,6 @@
+import type { ElTooltipProps } from 'element-plus/lib/components/tooltip';
+import { ExtractPropTypes } from 'vue';
+
+export const tooltipProps = {};
+
+export type TooltipProps = ExtractPropTypes<typeof tooltipProps> & ElTooltipProps;

package/packages/components/src/tooltip/src/tooltip.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-tooltip
+    ref="elTooltipRef"
+    :class="tooltipClass"
+    :popper-class="popperClass"
+    v-bind="tooltipAttrs"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </el-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { ElTooltip } from 'element-plus';
+import { computed, useAttrs, ref } from 'vue';
+import { tooltipProps } from './tooltip';
+
+defineProps(tooltipProps);
+const attrs = useAttrs();
+const elTooltipRef = ref();
+
+// 合并内部 class 和用户传入的 class
+const tooltipClass = computed(() => {
+  const internalClass = ['m-tooltip'];
+  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;
+});
+
+// popper-class 添加 m-tooltip-popper 如果用户传入了popper-class，则合并
+const popperClass = computed(() => {
+  const internalClass = 'm-tooltip-popper';
+  const userPopperClass = attrs.popperClass as string | undefined;
+
+  if (userPopperClass && typeof userPopperClass === 'string') {
+    return `${userPopperClass} ${internalClass}`;
+  }
+
+  return internalClass;
+});
+
+// 提取公共的 attrs（排除 class 和 popper-class，因为已经单独处理）
+const tooltipAttrs = computed(() => {
+  const { class: _, 'popper-class': __, ...rest } = attrs;
+  return rest;
+});
+
+defineExpose({
+  hide: () => elTooltipRef.value?.hide(),
+  show: () => elTooltipRef.value?.show(),
+});
+</script>

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

@@ -0,0 +1,5 @@
+import Tour from './src/tour.vue';
+
+export const MTour = Tour;
+
+export * from './src/tour';

package/packages/components/src/tour/src/tour.ts

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

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

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

@@ -0,0 +1,5 @@
+import Tree from './src/tree.vue';
+
+export const MTree = Tree;
+
+export * from './src/tree';

package/packages/components/src/tree/src/tree.ts

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

package/packages/components/src/tree/src/tree.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-tree
+    ref="elTreeRef"
+    class="m-tree"
+    :icon="treeIcon"
+    v-bind="filteredAttrs"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </el-tree>
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus';
+import { ref, computed, useAttrs, h, type Component } from 'vue';
+import { treeProps } from './tree';
+import { MIcon } from '../../icon';
+
+defineProps(treeProps);
+const attrs = useAttrs();
+const elTreeRef = ref();
+
+// 使用 m-icon 包装 TreeTriangle 作为默认图标组件
+const DefaultTreeIcon: Component = () => {
+  return h(MIcon, { icon: 'TreeTriangle', size: '10', style: { paddingLeft: '2px' } });
+};
+
+// 如果没有传入 icon，则使用默认的 TreeTriangle（通过 m-icon）
+const treeIcon = computed(() => {
+  const { icon } = attrs;
+  if (icon === null || icon === undefined) {
+    return DefaultTreeIcon;
+  }
+  return icon as string | Component;
+});
+
+// 过滤掉 icon，避免重复传递
+const filteredAttrs = computed(() => {
+  const { icon: _icon, ...rest } = attrs;
+  return rest;
+});
+
+defineExpose({
+  filter: (value: string) => elTreeRef.value?.filter(value),
+  updateKeyChildren: (key: string | number, data: any[]) =>
+    elTreeRef.value?.updateKeyChildren(key, data),
+  getCheckedNodes: (leafOnly?: boolean, includeHalfChecked?: boolean) =>
+    elTreeRef.value?.getCheckedNodes(leafOnly, includeHalfChecked),
+  setCheckedNodes: (nodes: any[], leafOnly?: boolean) =>
+    elTreeRef.value?.setCheckedNodes(nodes, leafOnly),
+  getCheckedKeys: (leafOnly?: boolean) => elTreeRef.value?.getCheckedKeys(leafOnly),
+  setCheckedKeys: (keys: (string | number)[], leafOnly?: boolean) =>
+    elTreeRef.value?.setCheckedKeys(keys, leafOnly),
+  setChecked: (key: string | number, checked: boolean, deep?: boolean) =>
+    elTreeRef.value?.setChecked(key, checked, deep),
+  getHalfCheckedNodes: () => elTreeRef.value?.getHalfCheckedNodes(),
+  getHalfCheckedKeys: () => elTreeRef.value?.getHalfCheckedKeys(),
+  getCurrentKey: () => elTreeRef.value?.getCurrentKey(),
+  getCurrentNode: () => elTreeRef.value?.getCurrentNode(),
+  setCurrentKey: (key: string | number, shouldAutoExpandParent?: boolean) =>
+    elTreeRef.value?.setCurrentKey(key, shouldAutoExpandParent),
+  setCurrentNode: (node: any, shouldAutoExpandParent?: boolean) =>
+    elTreeRef.value?.setCurrentNode(node, shouldAutoExpandParent),
+  getNode: (data: any) => elTreeRef.value?.getNode(data),
+  remove: (data: any) => elTreeRef.value?.remove(data),
+  append: (data: any, parentNode: any) => elTreeRef.value?.append(data, parentNode),
+  insertBefore: (data: any, refNode: any) => elTreeRef.value?.insertBefore(data, refNode),
+  insertAfter: (data: any, refNode: any) => elTreeRef.value?.insertAfter(data, refNode),
+});
+</script>

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

@@ -0,0 +1,3 @@
+import TreeSelect from './src/tree-select.vue';
+
+export const MTreeSelect = TreeSelect;