@phelan/design 0.0.1

package/packages/components/src/action-menu/src/action-menu.vue

@@ -0,0 +1,364 @@
+<template>
+  <div
+    class="m-action-menu"
+    :style="style"
+  >
+    <div class="m-action-menu-title">{{ props.title }}</div>
+    <m-button
+      class="m-action-menu-button"
+      type="primary"
+      icon="Plus"
+      @click="handleAdd"
+      >{{ t('新增') }}</m-button
+    >
+    <div
+      v-if="menuItems.length"
+      class="m-action-menu-list"
+    >
+      <div
+        v-for="item in menuItems"
+        :key="item.id"
+        :class="[
+          'menu-item',
+          {
+            selected: selectedId === item.id,
+            editing: editingId === item.id,
+          },
+        ]"
+        @click="handleItemClick(item)"
+      >
+        <!-- 编辑状态 -->
+        <div
+          v-if="editingId === item.id && item.editable !== false"
+          class="title-edit-mode"
+        >
+          <m-input
+            :ref="(el) => el && (inputRefs[item.id] = el)"
+            v-model="editingTitle"
+            size="small"
+            :maxlength="maxLength"
+            @blur="handleEditBlur(item)"
+            @keyup.enter="handleEditConfirm(item)"
+            @keyup.esc="handleEditCancel"
+          />
+        </div>
+        <div
+          v-else
+          class="menu-item-title"
+          >{{ item.title }}</div
+        >
+        <div
+          class="menu-item-operations"
+          @click.stop
+        >
+          <m-icon
+            v-if="item.operations?.includes('delete')"
+            icon="Delete"
+            color="#0D3A93"
+            size="20"
+            @click="handleDelete(item)"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="m-action-menu-empty"
+    >
+      <m-empty :description="t('暂无数据')" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, ref, watch, computed } from 'vue';
+import type { ActionMenuProps, ActionMenuEmits, MenuItem } from './action-menu';
+import { ElMessageBox, useLocale } from 'element-plus';
+
+const { t: oriT } = useLocale();
+const t = (key: string) => oriT(`m.actionMenu.${key}`);
+
+// Emits
+const emit = defineEmits<ActionMenuEmits>();
+
+// Props
+const props = withDefaults(defineProps<ActionMenuProps>(), {
+  data: () => [],
+  width: 256,
+  title: 'Action Menu',
+  maxLength: 5000,
+});
+
+// input 引用集合
+const inputRefs = ref<Record<string | number, any>>({});
+
+// 菜单数据（使用响应式引用）
+const menuItems = ref<MenuItem[]>([]);
+
+// 选中的菜单项ID
+const selectedId = ref<string | number | null>(null);
+
+// 正在编辑的菜单项ID
+const editingId = ref<string | number | null>(null);
+
+// 编辑中的标题
+const editingTitle = ref('');
+
+// 单击/双击管理
+const clickTimer = ref();
+const clickCount = ref(0);
+const CLICK_DELAY = 250;
+
+// 监听props.data变化
+watch(
+  () => props.data,
+  (newData) => {
+    menuItems.value = [...newData];
+  },
+  { deep: true },
+);
+
+// 监听 editingId 变化，自动聚焦输入框
+watch(editingId, async (newId, _oldId) => {
+  if (newId) {
+    nextTick(() => {
+      const targetInput = inputRefs.value[newId];
+      targetInput?.$el?.querySelector('input')?.focus?.();
+    });
+  }
+});
+
+// 处理props.width,支持px和百分比
+const style = computed(() => {
+  if (
+    typeof props.width === 'number' ||
+    (typeof props.width === 'string' && !isNaN(Number(props.width)))
+  ) {
+    // 如果是数字或者数字字符串,则认为是px值
+    return `width: ${props.width}px`;
+  } else if (
+    // 如果是百分比字符串或者px字符串，则直接使用
+    typeof props.width === 'string' &&
+    (/%$/.test(props.width) || /px$/.test(props.width))
+  ) {
+    return `width: ${props.width}`;
+  } else {
+    // 其他情况，默认为256px
+    return `width: 256px`;
+  }
+});
+
+// 初始化菜单数据
+const initMenuItems = () => {
+  if (props.data && props.data.length > 0) {
+    menuItems.value = [...props.data];
+  }
+};
+
+// 处理菜单项点击（区分单击和双击）
+const handleItemClick = (item: MenuItem) => {
+  // 如果当前菜单项正在编辑，则不处理
+  if (editingId.value === item.id) {
+    return;
+  }
+  // 如果有其他菜单项正在编辑，则失焦处理
+  if (editingId.value) {
+    const editingItem = menuItems.value.find((i) => i.id === editingId.value);
+    editingItem && handleEditBlur(editingItem);
+  }
+  clickCount.value++;
+  if (clickCount.value === 1) {
+    clickTimer.value = setTimeout(() => {
+      // 单击选中
+      handleSingleClickAction(item);
+      resetClickState();
+    }, CLICK_DELAY);
+  } else if (clickCount.value === 2) {
+    if (clickTimer.value) {
+      clearTimeout(clickTimer.value);
+      clickTimer.value = null;
+    }
+    // 双击编辑
+    handleDoubleClickAction(item);
+    resetClickState();
+  }
+};
+
+// 单击选中
+const handleSingleClickAction = (item: MenuItem) => {
+  selectedId.value = item.id;
+  emit('select', item);
+};
+
+// 双击编辑
+const handleDoubleClickAction = (item: MenuItem) => {
+  if (item.editable === false) {
+    return;
+  }
+  editingId.value = item.id;
+  editingTitle.value = item.title;
+};
+
+// 重置点击状态
+const resetClickState = () => {
+  clickCount.value = 0;
+  if (clickTimer.value) {
+    clearTimeout(clickTimer.value);
+    clickTimer.value = null;
+  }
+};
+
+// 处理失焦
+const handleEditBlur = (item: MenuItem) => {
+  if (editingId.value === item.id && editingTitle.value.trim() !== '') {
+    if (editingId.value === -1) {
+      // 新增
+      saveAdd(item);
+    } else {
+      // 修改
+      saveEdit(item);
+    }
+  } else {
+    // 如果标题为空，取消编辑
+    handleEditCancel();
+  }
+};
+
+// Enter保存
+const handleEditConfirm = (item: MenuItem) => {
+  if (editingId.value === item.id && editingTitle.value.trim() !== '') {
+    if (editingId.value === -1) {
+      // 新增
+      saveAdd(item);
+    } else {
+      // 修改
+      saveEdit(item);
+    }
+  }
+};
+
+// 删除菜单项
+const handleDelete = (item: MenuItem) => {
+  // 确认删除
+  ElMessageBox.confirm(`${t('确定要删除')} "${item.title}" ?`, t('删除确认'), {
+    confirmButtonText: t('确定'),
+    cancelButtonText: t('取消'),
+    type: 'warning',
+  })
+    .then(() => {
+      // 从缓存列表中移除
+      const index = menuItems.value.findIndex((m) => m.id === item.id);
+      if (index !== -1) {
+        menuItems.value.splice(index, 1);
+      }
+
+      // 如果删除的是当前选中的项，清空选中状态
+      if (selectedId.value === item.id) {
+        selectedId.value = null;
+      }
+
+      // 如果删除的是正在编辑的项，退出编辑模式
+      if (editingId.value === item.id) {
+        editingId.value = null;
+      }
+      // 若新增时还未保存新增，删除不需要促发回调
+      if (item.id !== -1) {
+        emit('delete', item);
+      }
+    })
+    .catch(() => {
+      // 用户取消删除
+    });
+};
+
+// 保存编辑
+const saveEdit = (item: MenuItem) => {
+  const newTitle = editingTitle.value.trim();
+
+  // 如果标题没有变化，直接退出编辑模式
+  if (newTitle === item.title) {
+    editingId.value = null;
+    return;
+  }
+
+  // 更新本地数据
+  const updatedItem = {
+    ...item,
+    title: newTitle,
+  };
+
+  const index = menuItems.value.findIndex((m) => m.id === item.id);
+  if (index !== -1) {
+    menuItems.value[index] = updatedItem;
+  }
+  emit('change', updatedItem);
+  // 退出编辑模式
+  editingId.value = null;
+};
+
+// 保存新增
+const saveAdd = (item: MenuItem) => {
+  const newTitle = editingTitle.value.trim();
+  const index = menuItems.value.findIndex((m) => m.id === item.id);
+  if (index !== -1) {
+    menuItems.value[index].title = newTitle;
+  }
+  emit('add', newTitle);
+  // 退出编辑模式
+  editingId.value = null;
+};
+
+// 处理添加按钮点击
+const handleAdd = async () => {
+  // 如果有新增的菜单项还未保存,则进入编辑模式
+  const addItem = menuItems.value.find((item) => item.id === -1);
+  if (addItem) {
+    handleDoubleClickAction(addItem);
+    return;
+  }
+  // 创建新菜单项
+  const newItem: MenuItem = {
+    id: -1,
+    title: '',
+    editable: true,
+    operations: ['delete'],
+  };
+
+  // 添加到列表
+  menuItems.value.push(newItem);
+
+  // 进入编辑模式
+  editingId.value = newItem.id;
+  editingTitle.value = newItem.title;
+};
+
+// 处理编辑取消
+const handleEditCancel = () => {
+  // 如果是新增时取消，直接删除新增项
+  if (editingId.value === -1) {
+    const index = menuItems.value.findIndex((m) => m.id === -1);
+    if (index !== -1) {
+      menuItems.value.splice(index, 1);
+    }
+  }
+  editingId.value = null;
+  editingTitle.value = '';
+};
+
+// 初始化
+onMounted(() => {
+  initMenuItems();
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  resetClickState();
+});
+
+// 对外暴露选中接口
+defineExpose({
+  handleSelectMenu(item: MenuItem) {
+    handleSingleClickAction(item);
+  },
+});
+</script>

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

@@ -0,0 +1,11 @@
+import ArrowSteps from './src/arrow-steps.vue';
+
+export const MArrowSteps = ArrowSteps;
+
+export * from './src/arrow-steps';
+
+import ArrowStep from './src/arrow-step.vue';
+
+export const MArrowStep = ArrowStep;
+
+export * from './src/arrow-step';

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

@@ -0,0 +1,8 @@
+export interface ArrowStepProp {
+  title: string;
+}
+
+export interface ArrowStepState {
+  uid: number;
+  setIndex: (val: number) => void;
+}

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

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="m-arrow-step"
+    :class="adArrowStepClass"
+  >
+    <div class="m-arrow-step__main">
+      <div class="m-arrow-step__icon-outer">
+        <slot name="icon">
+          <div class="m-arrow-step__icon">
+            <div class="m-arrow-step__icon-inner">
+              <div class="m-arrow-step__icon-inner-bg"></div>
+              <div class="m-arrow-step__icon-inner-text">{{ index + 1 }}</div>
+            </div>
+          </div>
+        </slot>
+      </div>
+      <div class="m-arrow-step__title">
+        <slot name="title">{{ props.title }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  getCurrentInstance,
+  inject,
+  reactive,
+  ref,
+  watch,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue';
+import { type ArrowStepProp } from './arrow-step';
+
+defineOptions({
+  name: 'MArrowStep',
+});
+const props = defineProps<Partial<ArrowStepProp>>();
+
+const index = ref(-1);
+const active = ref(0);
+const parent = inject<any>('MArrowSteps');
+const currentInstance = getCurrentInstance();
+
+const setIndex = (val: number) => {
+  index.value = val;
+};
+const updateStatus = (activeIndex: number) => {
+  active.value = activeIndex;
+};
+
+const progressStatus = computed(() => {
+  if (index.value > active.value) {
+    return 'pending';
+  } else if (index.value === active.value) {
+    return 'in-process';
+  } else if (index.value < active.value) {
+    return 'completed';
+  } else {
+    return '';
+  }
+});
+const adArrowStepClass = computed(() => {
+  return {
+    [`m-arrow-step--${progressStatus.value}`]: true,
+  };
+});
+
+onMounted(() => {
+  watch(
+    () => parent.props.active,
+    (newActive) => {
+      updateStatus(newActive);
+    },
+    { immediate: true },
+  );
+});
+onBeforeUnmount(() => {
+  parent.removeStep(stepItemState);
+});
+
+const stepItemState = reactive({
+  uid: currentInstance?.uid ?? '',
+  setIndex,
+  getVnode: () => currentInstance?.vnode,
+});
+parent.addStep(stepItemState);
+</script>

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

@@ -0,0 +1,16 @@
+export const arrowStepsProps = {
+  /**
+   * @description 当前激活的步骤索引
+   * @default 0
+   */
+  active: Number,
+};
+
+// export type ArrowStepsProps = typeof arrowStepsProps;
+export interface ArrowStepsProps {
+  active?: number;
+}
+
+export interface ArrowStepsEmits {
+  change: [newVal: number, oldVal: number];
+}

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="m-arrow-steps">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useOrderedChildren } from 'element-plus/es/hooks/index';
+import { getCurrentInstance, onMounted, provide, watch } from 'vue';
+import { ArrowStepsProps, type ArrowStepsEmits } from './arrow-steps';
+import { ArrowStepState } from './arrow-step';
+
+const props = withDefaults(defineProps<Partial<ArrowStepsProps>>(), { active: 0 });
+const emit = defineEmits<ArrowStepsEmits>();
+const currentInstance = getCurrentInstance()!;
+const {
+  children: steps,
+  addChild: addStep,
+  removeChild: removeStep,
+} = useOrderedChildren<ArrowStepState>(currentInstance, 'MArrowStep');
+
+watch(steps, () => {
+  steps.value.forEach((instance, index) => {
+    instance.setIndex!(index);
+  });
+});
+watch(
+  () => props.active,
+  (newVal, oldVal) => {
+    emit('change', newVal!, oldVal!);
+  },
+);
+
+provide('MArrowSteps', {
+  props,
+  steps,
+  addStep,
+  removeStep,
+});
+
+onMounted(() => {});
+</script>

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

@@ -0,0 +1,5 @@
+import Badge from './src/badge.vue';
+
+export const MBadge = Badge;
+
+export * from './src/badge';

package/packages/components/src/badge/src/badge.ts

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

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

package/packages/components/src/batch-copy/index.ts

@@ -0,0 +1,5 @@
+import BatchCopy from './src/batch-copy.vue';
+
+export const MBatchCopy = BatchCopy;
+
+export * from './src/batch-copy';

package/packages/components/src/batch-copy/src/batch-copy.ts

@@ -0,0 +1,39 @@
+export interface BatchCopyProps {
+  /** 控制弹窗显示/隐藏 */
+  modelValue?: boolean;
+
+  /** 弹窗标题 */
+  title?: string;
+
+  /** 文本框最大长度 */
+  maxLength?: number;
+
+  /** 允许批量复制的数据的最大数量限制 */
+  copyLimit?: number;
+
+  /** 描述文本 */
+  description?: string;
+
+  /** 分隔符数组 */
+  separator?: string[];
+
+  /** 弹窗宽度 */
+  width?: number;
+
+  /** 校验函数 */
+  validator?: (values: string[]) => Promise<{
+    validData: string[];
+    invalidData: string[];
+  }>;
+}
+export interface BatchCopyEmits {
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'cancel'): void;
+  (
+    e: 'confirm',
+    data: {
+      validData: string[];
+      invalidData: string[];
+    },
+  ): void;
+}