@phelan/design 0.0.1

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

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

@@ -0,0 +1,8 @@
+import Description from './src/description.vue';
+import DescriptionItem from './src/description-item.vue';
+
+export const MDescription = Description;
+export const MDescriptionItem = DescriptionItem;
+
+export * from './src/description';
+export * from './src/description-item';

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

@@ -0,0 +1,12 @@
+export const descriptionItemProps = {
+  span: {
+    type: Number,
+    default: 1,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+};
+
+export type DescriptionItemProps = typeof descriptionItemProps;

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

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="m-descriptions-item"
+    :style="itemStyle"
+  >
+    <div
+      v-if="label"
+      class="m-descriptions-item-label"
+      >{{ label }}</div
+    >
+    <m-tooltip
+      ref="tooltipRef"
+      :content="contentText"
+      placement="top"
+      :disabled="!isOverflow"
+      :teleported="true"
+    >
+      <div
+        ref="contentRef"
+        class="m-descriptions-item-content"
+        @mouseenter="handleTooltipShow"
+        ><slot></slot
+      ></div>
+    </m-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, computed, ref, nextTick, onMounted, onUnmounted } from 'vue';
+import { descriptionItemProps } from './description-item';
+
+const props = defineProps(descriptionItemProps);
+
+const totalColumns = inject('totalColumns', 3);
+const gutter = inject('gutter', 12);
+const rowGap = inject('rowGap', 10);
+const labelJustify = inject('labelJustify', 'center');
+
+const itemWidth = computed(() => {
+  const safeSpan = Math.min(props.span, totalColumns);
+  return `${(safeSpan / totalColumns) * 100}%`;
+});
+
+const itemStyle = computed(() => ({
+  width: itemWidth.value,
+  paddingLeft: gutter > 0 ? `${gutter / 2}px` : '0',
+  paddingRight: gutter > 0 ? `${gutter / 2}px` : '0',
+  marginBottom: rowGap > 0 ? `${rowGap}px` : '0',
+  alignItems: labelJustify,
+}));
+const debounce = (fn: Function, delay = 50) => {
+  let timer: any = null;
+  const debounced = (...args: any[]) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  };
+  debounced.flush = (...args: any[]) => {
+    if (timer) clearTimeout(timer);
+    fn.apply(this, args);
+  };
+  debounced.cancel = () => {
+    if (timer) clearTimeout(timer);
+    timer = null;
+  };
+  return debounced;
+};
+
+const contentRef = ref<HTMLElement | null>(null);
+const tooltipRef = ref<any>(null);
+// 是否超出容器
+const isOverflow = ref<boolean | null>(null);
+// 缓存文本内容
+const contentText = ref<string>('');
+
+const checkTextOverflow = debounce(() => {
+  if (!contentRef.value) return;
+  const el = contentRef.value as HTMLElement;
+  const { scrollWidth, clientWidth, textContent } = el;
+  isOverflow.value = scrollWidth > clientWidth;
+  contentText.value = textContent ? textContent?.trim() : '';
+}, 50);
+
+const handleTooltipShow = () => {
+  if (isOverflow.value !== null) return;
+  nextTick(() => {
+    // 立即执行（跳过防抖），保证Tooltip显示时机
+    checkTextOverflow.flush();
+  });
+};
+
+onMounted(() => {
+  // 监听窗口resize（带防抖），适配响应式布局
+  window.addEventListener('resize', checkTextOverflow);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkTextOverflow);
+  checkTextOverflow.cancel();
+  if (tooltipRef.value) {
+    tooltipRef.value?.doClose();
+  }
+});
+</script>

package/packages/components/src/description/src/description.ts

@@ -0,0 +1,20 @@
+export const descriptionProps = {
+  columns: {
+    type: Number,
+    default: 3,
+  },
+  gutter: {
+    type: Number,
+    default: 12,
+  },
+  rowGap: {
+    type: Number,
+    default: 10,
+  },
+  labelJustify: {
+    type: String,
+    default: 'center',
+  },
+};
+
+export type DescriptionProps = typeof descriptionProps;

package/packages/components/src/description/src/description.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="m-descriptions">
+    <div
+      class="m-descriptions-container"
+      :style="containerStyle"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { provide, computed } from 'vue';
+import { descriptionProps } from './description';
+
+const props = defineProps(descriptionProps);
+
+provide('totalColumns', props.columns);
+provide('gutter', props.gutter);
+provide('rowGap', props.rowGap);
+provide('labelJustify', props.labelJustify);
+
+const containerStyle = computed(() => ({
+  marginLeft: props.gutter > 0 ? `-${props.gutter / 2}px` : '0',
+  marginRight: props.gutter > 0 ? `-${props.gutter / 2}px` : '0',
+  marginBottom: props.rowGap > 0 ? `-${props.rowGap}px` : '0',
+}));
+</script>

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

@@ -0,0 +1,6 @@
+import Dialog from './src/dialog.vue';
+export const MDialog = Dialog;
+export * from './src/dialog';
+
+import { msgDialog } from './src/msg-dialog';
+export const MMessageDialog = msgDialog;

package/packages/components/src/dialog/src/dialog.ts

@@ -0,0 +1,62 @@
+import { Error } from '@m-design/icons';
+
+export const dialogProps = {
+  /**
+   * @size 对话框大小
+   */
+  size: String,
+  /**
+   * @showDefaultFooter 是否显示底部按钮
+   */
+  showDefaultFooter: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @iconType
+   */
+  iconType: {
+    type: String,
+    default: '',
+  },
+  /**
+   * @type 标题图标（info ｜ warning ｜ success ｜ error）
+   */
+  type: {
+    type: String,
+    default: '',
+  },
+  /**
+   * @pop 是否是消息弹出框
+   */
+  pop: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @cancelButtonText 确认按钮文本
+   */
+  confirmButtonText: {
+    type: String,
+  },
+  /**
+   * @cancelButtonText 取消按钮文本
+   */
+  cancelButtonText: {
+    type: String,
+  },
+  /**
+   * @closeIcon 自定义关闭图标，默认 Close
+   */
+  closeIcon: {
+    type: Object,
+    default: () => Error,
+  },
+};
+
+export const dialogEmits = {
+  submit: () => true,
+  cancel: () => true,
+};
+export type DialogEmits = typeof dialogEmits;
+export type DialogProps = typeof dialogProps;

package/packages/components/src/dialog/src/dialog.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-dialog
+    :class="['m-dialog', size == 'big' ? 'big-dialog' : '']"
+    v-bind="filteredAttrs"
+    ref="adDialog"
+    align-center
+    :close-icon="closeIcon"
+  >
+    <template #header="scopeProps">
+      <slot
+        v-if="$slots.header"
+        v-bind="scopeProps"
+        name="header"
+      />
+      <template v-else>
+        <template v-if="type">
+          <m-icon
+            class="header-icon"
+            :icon="type"
+            :color="iconTypeColor[type]"
+            size="24"
+          >
+            <component :is="iconConfig[type]"></component>
+          </m-icon>
+        </template>
+        <span>{{ filteredAttrs.title }}</span>
+      </template>
+    </template>
+    <slot />
+    <slot name="top" />
+    <div
+      v-if="$slots.scroll"
+      class="m-dialog-scroll"
+    >
+      <!-- 可滚动区域 -->
+      <slot name="scroll" />
+    </div>
+    <slot name="bottom" />
+    <template #footer="scopeProps">
+      <slot
+        name="footer"
+        v-if="$slots.footer"
+        v-bind="scopeProps"
+      />
+      <div v-else-if="showDefaultFooter">
+        <m-button
+          class="default-btn"
+          type="primary"
+          plain
+          @click="handleCancel"
+          >{{ finalCancelButtonText }}</m-button
+        >
+        <m-button
+          class="default-btn"
+          type="primary"
+          @click="handleSubmit"
+          >{{ finalConfirmButtonText }}</m-button
+        >
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs, ref } from 'vue';
+import { dialogEmits, dialogProps } from './dialog';
+import { ElDialog, useLocale } from 'element-plus';
+import { MButton } from '../../button';
+import { MIcon } from '../../icon';
+import { Info, Warning, Success, Error } from '@m-design/icons';
+import { IconTypeColor, IconConfig } from './types';
+const { t: oriT } = useLocale();
+const t = (key: string) => oriT(`m.dialog.${key}`);
+
+const iconConfig = ref<IconConfig>({
+  info: Info,
+  warning: Warning,
+  success: Success,
+  error: Error,
+});
+const iconTypeColor = ref<IconTypeColor>({
+  info: '#0D3A93',
+  success: '#009258',
+  warning: '#FF6200',
+  error: '#D70000',
+});
+const { size, showDefaultFooter, pop, type, confirmButtonText, cancelButtonText } =
+  defineProps(dialogProps);
+
+const adDialog = ref();
+const emit = defineEmits(dialogEmits);
+const attrs = useAttrs();
+const filteredAttrs = computed(() => {
+  const { ...rest } = attrs;
+  return rest;
+});
+
+const finalConfirmButtonText = computed(() => {
+  return confirmButtonText || t('确认');
+});
+
+const finalCancelButtonText = computed(() => {
+  return cancelButtonText || t('取消');
+});
+
+const handleCancel = () => {
+  emit('cancel');
+  if (!pop) {
+    if (adDialog.value.handleClose) {
+      adDialog.value.handleClose();
+    } else {
+      // 兼容老版本
+      adDialog.value.visible = false;
+    }
+  }
+};
+
+const handleSubmit = () => {
+  emit('submit');
+};
+</script>

package/packages/components/src/dialog/src/msg-dialog.ts

@@ -0,0 +1,84 @@
+import { h, render } from 'vue';
+import type { AppContext } from 'vue';
+import { getCurrentInstance } from 'vue';
+import Dialog from './dialog.vue';
+
+export interface PayLoadType {
+  type?: 'info' | 'success' | 'warning' | 'error';
+  content?: string;
+  width?: string;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+let dialogAppContext: AppContext | null = null;
+
+export const setDialogAppContext = (context: AppContext) => {
+  dialogAppContext = context;
+};
+
+const ensureAppContext = () => {
+  if (!dialogAppContext) {
+    const instance = getCurrentInstance();
+    if (instance) {
+      dialogAppContext = instance.appContext;
+    }
+  }
+  return dialogAppContext;
+};
+
+const msgDialogFn = (content: string, title: string, payLoad: PayLoadType = {}) => {
+  return new Promise((resolve, reject) => {
+    // 取消按钮事件
+    const onCancel = () => {
+      closeBox();
+      reject(new Error('cancel'));
+    };
+    // 确定按钮事件
+    const onSubmit = () => {
+      closeBox();
+      resolve('success');
+    };
+
+    // 关闭弹层事件
+    const closeBox = () => {
+      render(null, document.body);
+    };
+    // 1. 生成 vnode
+    const vnode = h(
+      Dialog,
+      {
+        title,
+        modelValue: true,
+        showClose: false,
+        confirmButtonText: payLoad.confirmButtonText,
+        cancelButtonText: payLoad.cancelButtonText,
+        'close-on-click-modal': false,
+        'close-on-press-escape': false,
+        pop: true,
+        type: payLoad.type || undefined,
+        width: payLoad.width || '420',
+        onCancel,
+        onSubmit,
+      },
+      [content],
+    );
+
+    const appContext = ensureAppContext();
+    if (appContext) {
+      vnode.appContext = appContext;
+    }
+
+    // 2. render 渲染
+    render(vnode, document.body);
+  });
+};
+
+export const msgDialog = Object.assign(msgDialogFn, {
+  confirm: (content: string, title: string, payLoad: PayLoadType = {}) => {
+    return msgDialogFn(content, title, {
+      ...payLoad,
+      type: payLoad.type,
+    });
+  },
+});

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

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

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

@@ -0,0 +1,5 @@
+import Drawer from './src/drawer.vue';
+
+export const MDrawer = Drawer;
+
+export * from './src/drawer';

package/packages/components/src/drawer/src/drawer.ts

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

package/packages/components/src/drawer/src/drawer.vue

@@ -0,0 +1,24 @@
+<template>
+  <el-drawer class="m-drawer" v-bind="filteredAttrs">
+    <template v-for="(_, slotName) in $slots" #[slotName]="props">
+      <slot :name="slotName" v-bind="props" />
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useAttrs, computed } from 'vue';
+import { drawerProps } from './drawer';
+import { ElDrawer } from 'element-plus';
+
+type ElDrawerSlots = InstanceType<typeof ElDrawer>['$slots'];
+defineSlots<ElDrawerSlots>();
+defineProps(drawerProps);
+
+const attrs = useAttrs();
+
+const filteredAttrs = computed(() => {
+  const { ...rest } = attrs;
+  return rest;
+});
+</script>

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

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

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

@@ -0,0 +1,13 @@
+export interface ViewDataItem {
+  label?: string;
+  value?: string | number;
+}
+
+export interface EditorProps {
+  modelValue?: boolean;
+  title?: string;
+  width?: string | number;
+  viewData?: ViewDataItem[];
+  viewColumns?: number;
+  closeOnClickModal?: boolean;
+}

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

@@ -0,0 +1,70 @@
+<template>
+  <m-dialog
+    v-model="visible"
+    class="m-editor"
+    :title="title || t('编辑')"
+    :width="width"
+    :close-on-click-modal="closeOnClickModal"
+    @close="handleCancel"
+    @submit="handleConfirm"
+    @cancel="handleCancel"
+  >
+    <!-- 查看区域 -->
+    <slot name="description">
+      <m-description
+        :columns="viewColumns"
+        class="view-area"
+      >
+        <m-description-item
+          v-for="(item, index) in viewData"
+          :label="item.label"
+          :key="index"
+        >
+          {{ item.value }}
+        </m-description-item>
+      </m-description>
+    </slot>
+    <!-- 表单区域 -->
+    <template #scroll>
+      <slot name="form"></slot>
+    </template>
+  </m-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { EditorProps } from './editor';
+import { useLocale } from 'element-plus';
+const { t: oriT } = useLocale();
+const t = (key: string) => oriT(`m.editor.${key}`);
+const props = withDefaults(defineProps<EditorProps>(), {
+  modelValue: false,
+  width: '570',
+  viewData: () => [],
+  viewColumns: 2,
+  closeOnClickModal: false,
+});
+const emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);
+// 控制对话框显示隐藏
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+// 处理取消/关闭事件
+const handleCancel = () => {
+  emit('update:modelValue', false);
+  emit('cancel');
+};
+
+// 处理确认事件
+const handleConfirm = () => {
+  // 调用确认回调
+  emit('confirm');
+  // 需要用户自己操作动作 并且关闭对话框
+};
+</script>

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

@@ -0,0 +1,5 @@
+import Empty from './src/empty.vue';
+
+export const MEmpty = Empty;
+
+export * from './src/empty';

package/packages/components/src/empty/src/empty.ts

@@ -0,0 +1,3 @@
+export const emptyProps = {};
+
+export type EmptyProps = typeof emptyProps;

package/packages/components/src/empty/src/empty.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-empty
+    class="m-empty"
+    v-bind="filteredAttrs"
+  >
+    <template
+      #image
+      v-if="!$slots.image"
+    >
+      <img-empty />
+    </template>
+
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]
+    >
+      <slot :name="slotName">
+        <!-- 图片默认占位图 -->
+        <img-empty v-if="slotName === 'image'" />
+      </slot>
+    </template>
+  </el-empty>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
+import { emptyProps } from './empty';
+import ImgEmpty from './img-empty.vue';
+defineProps(emptyProps);
+
+const attrs = useAttrs();
+
+const filteredAttrs = computed(() => {
+  const { ...rest } = attrs;
+  return rest;
+});
+</script>