@phelan/design 0.0.1

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

@@ -0,0 +1,214 @@
+<template>
+  <m-dialog
+    v-model="props.modelValue"
+    :title="props.title"
+    :width="props.width"
+    @Submit="handleConfirm"
+    @Cancel="handleCancel"
+    @close="handleCancel"
+    class="batch-copy-dialog"
+  >
+    <template #scroll>
+      <div class="m-batch-copy">
+        <div class="description">
+          {{ props.description }}
+        </div>
+        <div class="input-section">
+          <m-input
+            v-model="rawInput"
+            type="textarea"
+            :rows="2"
+            :placeholder="placeholder"
+            @focus="handleInputFocus"
+            @blur="handleInputBlur"
+            :maxlength="maxLength"
+            :show-word-limit="true"
+          />
+        </div>
+        <div class="data-section">
+          <m-table
+            :data="validDataObj"
+            stripe
+            empty-text="暂无数据"
+            max-height="450"
+          >
+            <el-table-column
+              prop="id"
+              :label="`${t('数据编码')}(${validDataObj.length})`"
+            />
+          </m-table>
+        </div>
+        <div
+          class="invalid-section"
+          v-if="invalidData.length > 0"
+        >
+          {{ `${t('识别到无效数据')}(${invalidData.length}):${invalidDataStr}` }}
+        </div>
+      </div>
+    </template>
+  </m-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import type { BatchCopyProps, BatchCopyEmits } from './batch-copy';
+import { useLocale } from 'element-plus';
+
+const { t: oriT } = useLocale();
+const t = (key: string) => oriT(`m.batchCopy.${key}`);
+
+// Emits
+const emit = defineEmits<BatchCopyEmits>();
+
+// Props
+const props = withDefaults(defineProps<BatchCopyProps>(), {
+  modelValue: false,
+  title: '复制',
+  description: '从EXCEL复制数据后，按下Ctrl+V或点击右键粘贴。支持使用换行、空格、逗号或分号分隔',
+  separator: () => [' ', '\n', ',', ';', '，', '；'],
+  width: 568,
+});
+
+// 输入框的值
+const rawInput = ref('');
+
+// placeholder
+const placeholder = ref(t('请粘贴'));
+
+// 输入框的值缓存,获取焦点时记录,失去焦点时校验数据是否有改动,有改动则重新校验数据
+const cacheRawInput = ref('');
+
+// 合法数据
+const validData = ref<string[]>([]);
+
+// 非法数据
+const invalidData = ref<string[]>([]);
+
+const blurProcessing = ref(false);
+
+// 合法数据转为对象数组
+const validDataObj = computed(() => {
+  return validData.value.map((item) => ({ id: item }));
+});
+
+// 不合法数据转为字符串,使用'、'连接
+const invalidDataStr = computed(() => {
+  return invalidData.value.join('、');
+});
+
+// 分隔符正则表达式
+const separatorRegex = computed(() => {
+  if (!props.separator || props.separator.length === 0) {
+    return /[\n,;，； ]+/;
+  }
+
+  // 对特殊字符进行转义
+  const escapedSeparators = props.separator.map((sep) => {
+    // 处理特殊字符：\n, \t 等
+    if (sep === '\\n') return '\n';
+    if (sep === '\\t') return '\t';
+    if (sep === '\\r') return '\r';
+
+    // 转义正则特殊字符
+    return sep.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  });
+
+  return new RegExp(`[${escapedSeparators.join('')}]+`);
+});
+
+// 解析输入数据
+const parseInput = (input: string): string[] => {
+  if (!input.trim()) return [];
+
+  // 使用分隔符分割
+  const parts = input.split(separatorRegex.value);
+
+  // 清理数据：去除空格、空项
+  return parts.map((item) => item.trim()).filter((item) => item.length > 0);
+};
+
+// 校验数据
+const validateData = async (
+  data: string[],
+): Promise<{
+  validData: string[];
+  invalidData: string[];
+}> => {
+  if (!data || data.length === 0) {
+    return { validData: [], invalidData: [] };
+  }
+
+  if (props.validator && typeof props.validator === 'function') {
+    try {
+      const result = await props.validator(data);
+      return {
+        validData: result?.validData || [],
+        invalidData: result?.invalidData || [],
+      };
+    } catch (_error) {
+      // 校验失败时，视为所有数据都有效
+      return { validData: data, invalidData: [] };
+    }
+  } else {
+    // 没有校验函数，所有数据都视为合法
+    return { validData: data, invalidData: [] };
+  }
+};
+
+// 处理输入框获取焦点事件
+const handleInputFocus = () => {
+  cacheRawInput.value = rawInput.value;
+};
+
+// 处理输入框失去焦点事件
+const handleInputBlur = async () => {
+  if (rawInput.value === cacheRawInput.value || blurProcessing.value) return;
+  blurProcessing.value = true;
+  const parsed = parseInput(rawInput.value);
+  const result = await validateData(parsed);
+  // 复制数量限制-目前只考虑有效数据
+  if (props.copyLimit && result.validData.length > props.copyLimit) {
+    validData.value = result.validData.slice(0, props.copyLimit);
+  } else {
+    validData.value = result.validData;
+  }
+  invalidData.value = result.invalidData;
+  blurProcessing.value = false;
+};
+
+// 清空数据
+const clearData = () => {
+  rawInput.value = '';
+  cacheRawInput.value = '';
+  validData.value = [];
+  invalidData.value = [];
+};
+
+// 确认提交
+const handleConfirm = async () => {
+  // 考虑到输入后直接点击确定按钮,等待 blur 事件处理完成
+  if (blurProcessing.value) {
+    await new Promise<void>((resolve) => {
+      const checkInterval = setInterval(() => {
+        if (!blurProcessing.value) {
+          clearInterval(checkInterval);
+          resolve();
+        }
+      }, 50);
+    });
+  }
+  emit('confirm', {
+    validData: validData.value,
+    invalidData: invalidData.value,
+  });
+  emit('update:modelValue', false);
+  clearData();
+};
+
+// 取消
+const handleCancel = () => {
+  emit('cancel');
+  emit('update:modelValue', false);
+  clearData();
+};
+</script>

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

@@ -0,0 +1,5 @@
+import BatchEditor from './src/batch-editor.vue';
+
+export const MBatchEditor = BatchEditor;
+
+export * from './src/batch-editor';

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

@@ -0,0 +1,21 @@
+export interface TableColumnItem {
+  label?: string;
+  prop?: string;
+  width?: string | number;
+  minWidth?: string | number;
+  showOverflowTooltip?: boolean;
+}
+
+export interface TableDataItem {
+  [key: string]: string | number;
+}
+
+export interface BatchEditorProps {
+  modelValue?: boolean;
+  title?: string;
+  width?: string | number;
+  tableColumn?: TableColumnItem[];
+  tableData?: TableDataItem[];
+  desc?: string;
+  confirmButtonText?: string;
+}

package/packages/components/src/batch-editor/src/batch-editor.vue

@@ -0,0 +1,73 @@
+<template>
+  <m-drawer
+    v-model="visible"
+    class="m-batch-editor"
+    :title="title || t('批量编辑')"
+    :size="width"
+    @close="handleCancel"
+  >
+    <div
+      v-if="desc"
+      class="desc"
+      >{{ desc }}</div
+    >
+    <slot name="form"></slot>
+    <slot name="table">
+      <m-table :data="tableData">
+        <m-table-column
+          v-for="item in tableColumn"
+          :key="item.prop"
+          :property="item.prop"
+          :label="item.label"
+          :min-width="item.minWidth"
+          :width="item.width"
+          :show-overflow-tooltip="item.showOverflowTooltip"
+        />
+      </m-table>
+    </slot>
+    <div class="footer">
+      <slot name="footer">
+        <m-button
+          type="primary"
+          @click="handleSubmit"
+          >{{ t('保存') || confirmButtonText }}</m-button
+        >
+      </slot>
+    </div>
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { BatchEditorProps } from './batch-editor';
+import { useLocale } from 'element-plus';
+const { t: oriT } = useLocale();
+const t = (key: string) => oriT(`m.batchEditor.${key}`);
+const props = withDefaults(defineProps<BatchEditorProps>(), {
+  modelValue: false,
+  width: '50%',
+  tableColumn: () => [],
+  tableData: () => [],
+});
+const emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);
+// 控制对话框显示隐藏
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+// 确定事件
+const handleSubmit = () => {
+  emit('confirm');
+};
+
+// 关闭事件
+
+const handleCancel = () => {
+  emit('cancel');
+};
+</script>

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

@@ -0,0 +1,5 @@
+import Border from './src/border.vue';
+
+export const MBorder = Border;
+
+export * from './src/border';

package/packages/components/src/border/src/border.ts

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

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

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

@@ -0,0 +1,8 @@
+import Breadcrumb from './src/breadcrumb.vue';
+import BreadcrumbItem from './src/breadcrumb-item.vue';
+
+export const MBreadcrumb = Breadcrumb;
+export const MBreadcrumbItem = BreadcrumbItem;
+
+export * from './src/breadcrumb';
+export * from './src/breadcrumb-item';

package/packages/components/src/breadcrumb/src/breadcrumb-item.ts

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

package/packages/components/src/breadcrumb/src/breadcrumb-item.vue

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

package/packages/components/src/breadcrumb/src/breadcrumb.ts

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

package/packages/components/src/breadcrumb/src/breadcrumb.vue

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

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

@@ -0,0 +1,5 @@
+import Button from './src/button.vue';
+
+export const MButton = Button;
+
+export * from './src/button';

package/packages/components/src/button/src/button.ts

@@ -0,0 +1,12 @@
+import { ButtonProps as ElButtonProps } from 'element-plus';
+import { iconPropType } from 'element-plus/es/utils/vue/icon';
+import { ExtractPropTypes } from 'vue';
+
+export const buttonProps = {
+  /**
+   * @description 默认图标组件
+   */
+  icon: iconPropType,
+} as const;
+
+export type ButtonProps = ExtractPropTypes<typeof buttonProps> & ElButtonProps;

package/packages/components/src/button/src/button.vue

@@ -0,0 +1,132 @@
+<template>
+  <!-- 有文本内容的按钮 -->
+  <el-button
+    v-if="$slots.default"
+    :class="buttonClass"
+    v-bind="buttonAttrs"
+  >
+    <slot></slot>
+    <template
+      v-if="hasIconSlot"
+      #icon
+    >
+      <slot
+        v-if="$slots.icon"
+        name="icon"
+      />
+      <component
+        v-else-if="iconComponent"
+        :is="iconComponent"
+      />
+      <m-icon
+        v-else-if="iconName"
+        :icon="iconName"
+      />
+    </template>
+  </el-button>
+
+  <!-- 纯图标按钮 -->
+  <el-button
+    v-else
+    :class="buttonClass"
+    v-bind="buttonAttrs"
+  >
+    <template
+      v-if="hasIconSlot"
+      #icon
+    >
+      <slot
+        v-if="$slots.icon"
+        name="icon"
+      />
+      <component
+        v-else-if="iconComponent"
+        :is="iconComponent"
+      />
+      <m-icon
+        v-else-if="iconName"
+        :icon="iconName"
+      />
+    </template>
+  </el-button>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs, useSlots } from 'vue';
+import { ElButton } from 'element-plus';
+import { buttonProps } from './button';
+import { MIcon } from '../../icon';
+
+const props = defineProps(buttonProps);
+const attrs = useAttrs();
+const slots = useSlots();
+
+// 提取公共的 class 逻辑（合并内部 class 和用户传入的 class）
+const buttonClass = computed(() => {
+  const internalClass = ['m-button', slots.default && 'm-button-min-width'].filter(Boolean);
+  const userClass = attrs.class;
+
+  // 合并内部 class 和用户传入的 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
+const buttonAttrs = computed(() => {
+  const { class: _, ...rest } = attrs;
+  return rest;
+});
+
+// 判断是否是组件（Vue 组件可以是函数或对象）
+const isComponent = (val: any): boolean => {
+  if (!val) return false;
+  // 函数通常是组件
+  if (typeof val === 'function') return true;
+  // 字符串是图标名称，不是组件
+  if (typeof val === 'string') return false;
+  // 对象：检查是否是组件还是图标名称对象
+  if (typeof val === 'object' && val !== null) {
+    // 如果有 render、setup 或 __name，明确是组件
+    if ('render' in val || 'setup' in val || '__name' in val) return true;
+    // 如果对象只有 name 属性且 name 是字符串，是图标名称对象
+    const keys = Object.keys(val);
+    if (keys.length === 1 && keys[0] === 'name' && typeof val.name === 'string') {
+      return false;
+    }
+    // 其他对象可能是组件（让 Vue 的 component :is 自己判断）
+    return true;
+  }
+  return false;
+};
+
+// 提取图标名称计算逻辑（仅当 icon 是字符串或对象时使用）
+const iconName = computed(() => {
+  if (!props.icon) return '';
+  if (isComponent(props.icon)) return '';
+  return typeof props.icon === 'object' ? props.icon.name : (props.icon as string);
+});
+
+// 提取 icon 组件（仅当 icon 是组件时使用）
+const iconComponent = computed(() => {
+  if (props.icon && isComponent(props.icon)) {
+    return props.icon;
+  }
+  return null;
+});
+
+// 判断是否有图标需要渲染
+const hasIconSlot = computed(() => {
+  return !!(slots.icon || iconComponent.value || iconName.value);
+});
+</script>

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

@@ -0,0 +1,5 @@
+import Calendar from './src/calendar.vue';
+
+export const MCalendar = Calendar;
+
+export * from './src/calendar';

package/packages/components/src/calendar/src/calendar.ts

@@ -0,0 +1,36 @@
+export type MaybeDate = Date | string | number;
+
+export type TaskNodeFlag = 'head' | 'middle' | 'end' | 'single' | null;
+
+export interface Task {
+  id: string | number;
+  name: string;
+  startTime: string;
+  endTime: string;
+  bgColor?: string;
+  brandColor?: string;
+}
+
+export interface GanttTask extends Task {
+  taskNodeFlag?: TaskNodeFlag;
+  laneIndex?: number;
+  type?: string;
+  weekDuration?: number;
+  weekStart?: string;
+  weekEnd?: string;
+  weekDailyDates?: string[];
+  isExtra?: boolean;
+  extraCount?: number;
+  isEnded?: boolean;
+  isClicked?: boolean;
+  weekSegmentIndex?: number;
+}
+
+export interface CalendarProps {
+  modelValue?: MaybeDate;
+  range?: [Date, Date];
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  tasks?: Task[];
+  // 允许透传 Element Plus Calendar 的所有其他属性
+  [key: string]: any;
+}