@phelan/design 0.0.1

package/packages/components/src/independent-nav/src/independent-nav.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="independent-nav">
+    <dev class="independent-nav__logo-outer">
+      <slot name="logo">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="92"
+          height="30"
+          viewBox="0 0 92 30"
+          fill="none"
+        >
+          <path
+            d="M60.7488 10H55.8115V24.9978H60.7488V10Z"
+            fill="#101316"
+          />
+          <path
+            d="M55.7092 24.9985H36.2568L38.7361 21.9681C39.1671 21.4413 39.8119 21.1357 40.4926 21.1357H46.14L42.7797 17.0268L42.2741 16.4102L41.8567 15.8982L37.5734 21.1335L35.092 24.1644C34.6609 24.691 34.0164 24.9963 33.3359 24.9963H28L30.7774 21.6041L31.1603 21.1335L38.6491 11.9788L39.2515 11.2446C39.9159 10.4429 40.8574 10.0348 41.8037 10.0203C42.7848 10.0053 43.7713 10.4134 44.4598 11.2446L45.0622 11.9788L45.4796 12.4908L45.9851 13.1096C48.5493 16.244 49.9869 18.0013 52.551 21.1357L55.7107 24.9951C55.7118 24.9965 55.7109 24.9985 55.7092 24.9985Z"
+            fill="#101316"
+          />
+          <path
+            d="M91.9958 25C91.9969 24.9995 91.9965 24.9978 91.9953 24.9978H86.7939L84.2058 17.1678L79.8709 23.8279L79.1093 24.9978H74.7206L73.959 23.8279L69.6241 17.1678L67.0361 24.9978H61.8298L66.1712 11.8627C66.5391 10.7495 67.5674 10 68.727 10H69.5187C70.362 10 71.1494 10.4292 71.6141 11.1438L76.9128 19.2854L82.2116 11.1438C82.6763 10.4292 83.4636 10 84.307 10H85.0986C85.6774 10 86.2259 10.1874 86.6734 10.5142C87.1231 10.841 87.4694 11.3072 87.6544 11.8649L91.9958 25Z"
+            fill="#101316"
+          />
+          <path
+            d="M10.323 24.1017L15.6733 17.4138L20.3548 20.9807L18.7943 22.9871L16.0077 20.8693L12.3294 25.6623L10.323 24.1017Z"
+            fill="#18489B"
+          />
+          <path
+            d="M6.75609 13.8465L8.3166 11.8401L14.6701 16.6331L5.19558 28.8942L3.18921 27.3337L11.1032 17.1904L6.75609 13.8465Z"
+            fill="#F6AD00"
+          />
+          <path
+            d="M20.5779 9.05362L18.683 7.49311L15.0046 12.0632L2.74351 2.36572L1.07153 4.48356L15.4505 15.5186L20.5779 9.05362Z"
+            fill="#E8420A"
+          />
+          <path
+            d="M16.342 16.4104L27.4885 2.14285L29.3834 3.5919L19.9089 15.853L24.5904 19.5314L23.0299 21.5377L16.342 16.4104Z"
+            fill="#00005F"
+          />
+        </svg>
+      </slot>
+    </dev>
+
+    <div class="independent-nav__main">
+      <slot></slot>
+    </div>
+
+    <div class="independent-nav__right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { independentNavProps } from './independent-nav';
+
+defineProps(independentNavProps);
+
+onMounted(() => {});
+</script>

package/packages/components/src/index.ts

@@ -0,0 +1,235 @@
+import type { App } from "vue";
+import { MActionMenu } from './action-menu';
+import { MArrowSteps, MArrowStep } from './arrow-steps';
+import { MBadge } from './badge';
+import { MBatchCopy } from './batch-copy';
+import { MBatchEditor } from './batch-editor';
+import { MBorder } from './border';
+import { MBreadcrumb, MBreadcrumbItem } from './breadcrumb';
+import { MButton } from './button';
+import { MCalendar } from './calendar';
+import { MCard, MTitle } from './card';
+import { MCarousel } from './carousel';
+import { MCascader } from './cascader';
+import { MCheckbox, MCheckboxGroup, MCheckboxButton } from './checkbox';
+import { MCollapse } from './collapse';
+import { MColumnTable, MColumnTableRow } from './column-table';
+import { MDatePicker } from './date-picker';
+import { MDemo } from './demo';
+import { MDescription, MDescriptionItem } from './description';
+import { MDialog, MMessageDialog } from './dialog';
+import { MDrawer } from './drawer';
+import { MEditor } from './editor';
+import { MEmpty } from './empty';
+import { MFileTaskDialog } from './file-task-dialog';
+import { MForm, MFormItem } from './form';
+import { MIcon } from './icon';
+import { MImage } from './image';
+import { MImportDialog } from './import-dialog';
+import { MIndependentNav } from './independent-nav';
+import { MInput } from './input';
+import { MInputNumber } from './input-number';
+import { MRow, MCol } from './layout';
+import { MLink } from './link';
+import { MMention } from './mention';
+import { MMessage } from './message';
+import { MNav } from './nav';
+import { MPagination } from './pagination';
+import { MPopover } from './popover';
+import { MProgress } from './progress';
+import { MRadio, MRadioGroup, MRadioButton } from './radio';
+import { MResult } from './result';
+import { MScrollbar } from './scrollbar';
+import { MSearchPanel } from './search-panel';
+import { MSelect, MOption, MOptionGroup } from './select';
+import { MSlider } from './slider';
+import { MSpace } from './space';
+import { MSteps, MStep } from './steps';
+import { MSwitch } from './switch';
+import { MTable, MTableColumn } from './table';
+import { MTableGrid } from './table-grid';
+import { MTableHeadEditor } from './table-head-editor';
+import { MTabs, MTabPane } from './tabs';
+import { MTag } from './tag';
+import { MText } from './text';
+import { MTimePicker } from './time-picker';
+import { MTimeSelect } from './time-select';
+import { MTooltip } from './tooltip';
+import { MTour } from './tour';
+import { MTree } from './tree';
+import { MTreeSelect } from './tree-select';
+
+// 所有组件
+const components = [
+    { name: "MActionMenu", component: MActionMenu },
+    { name: "MArrowSteps", component: MArrowSteps },
+    { name: "MArrowStep", component: MArrowStep },
+    { name: "MBadge", component: MBadge },
+    { name: "MBatchCopy", component: MBatchCopy },
+    { name: "MBatchEditor", component: MBatchEditor },
+    { name: "MBorder", component: MBorder },
+    { name: "MBreadcrumb", component: MBreadcrumb },
+    { name: "MBreadcrumbItem", component: MBreadcrumbItem },
+    { name: "MButton", component: MButton },
+    { name: "MCalendar", component: MCalendar },
+    { name: "MCard", component: MCard },
+    { name: "MTitle", component: MTitle },
+    { name: "MCarousel", component: MCarousel },
+    { name: "MCascader", component: MCascader },
+    { name: "MCheckbox", component: MCheckbox },
+    { name: "MCheckboxGroup", component: MCheckboxGroup },
+    { name: "MCheckboxButton", component: MCheckboxButton },
+    { name: "MCollapse", component: MCollapse },
+    { name: "MColumnTable", component: MColumnTable },
+    { name: "MColumnTableRow", component: MColumnTableRow },
+    { name: "MDatePicker", component: MDatePicker },
+    { name: "MDemo", component: MDemo },
+    { name: "MDescription", component: MDescription },
+    { name: "MDescriptionItem", component: MDescriptionItem },
+    { name: "MDialog", component: MDialog },
+    { name: "MMessageDialog", component: MMessageDialog },
+    { name: "MDrawer", component: MDrawer },
+    { name: "MEditor", component: MEditor },
+    { name: "MEmpty", component: MEmpty },
+    { name: "MFileTaskDialog", component: MFileTaskDialog },
+    { name: "MForm", component: MForm },
+    { name: "MFormItem", component: MFormItem },
+    { name: "MIcon", component: MIcon },
+    { name: "MImage", component: MImage },
+    { name: "MImportDialog", component: MImportDialog },
+    { name: "MIndependentNav", component: MIndependentNav },
+    { name: "MInput", component: MInput },
+    { name: "MInputNumber", component: MInputNumber },
+    { name: "MRow", component: MRow },
+    { name: "MCol", component: MCol },
+    { name: "MLink", component: MLink },
+    { name: "MMention", component: MMention },
+    { name: "MNav", component: MNav },
+    { name: "MPagination", component: MPagination },
+    { name: "MPopover", component: MPopover },
+    { name: "MProgress", component: MProgress },
+    { name: "MRadio", component: MRadio },
+    { name: "MRadioGroup", component: MRadioGroup },
+    { name: "MRadioButton", component: MRadioButton },
+    { name: "MResult", component: MResult },
+    { name: "MScrollbar", component: MScrollbar },
+    { name: "MSearchPanel", component: MSearchPanel },
+    { name: "MSelect", component: MSelect },
+    { name: "MOption", component: MOption },
+    { name: "MOptionGroup", component: MOptionGroup },
+    { name: "MSlider", component: MSlider },
+    { name: "MSpace", component: MSpace },
+    { name: "MSteps", component: MSteps },
+    { name: "MStep", component: MStep },
+    { name: "MSwitch", component: MSwitch },
+    { name: "MTable", component: MTable },
+    { name: "MTableColumn", component: MTableColumn },
+    { name: "MTableGrid", component: MTableGrid },
+    { name: "MTableHeadEditor", component: MTableHeadEditor },
+    { name: "MTabs", component: MTabs },
+    { name: "MTabPane", component: MTabPane },
+    { name: "MTag", component: MTag },
+    { name: "MText", component: MText },
+    { name: "MTimePicker", component: MTimePicker },
+    { name: "MTimeSelect", component: MTimeSelect },
+    { name: "MTooltip", component: MTooltip },
+    { name: "MTour", component: MTour },
+    { name: "MTree", component: MTree },
+    { name: "MTreeSelect", component: MTreeSelect },
+];
+
+// 全量引入
+const install = (app: App) => {
+    components.forEach(({ name, component }) => {
+        app.component(name, component);
+    });
+};
+
+// 按需引入
+export {
+    MActionMenu,
+    MArrowSteps,
+    MArrowStep,
+    MBadge,
+    MBatchCopy,
+    MBatchEditor,
+    MBorder,
+    MBreadcrumb,
+    MBreadcrumbItem,
+    MButton,
+    MCalendar,
+    MCard,
+    MTitle,
+    MCarousel,
+    MCascader,
+    MCheckbox,
+    MCheckboxGroup,
+    MCheckboxButton,
+    MCollapse,
+    MColumnTable,
+    MColumnTableRow,
+    MDatePicker,
+    MDemo,
+    MDescription,
+    MDescriptionItem,
+    MDialog,
+    MMessageDialog,
+    MDrawer,
+    MEditor,
+    MEmpty,
+    MFileTaskDialog,
+    MForm,
+    MFormItem,
+    MIcon,
+    MImage,
+    MImportDialog,
+    MIndependentNav,
+    MInput,
+    MInputNumber,
+    MRow,
+    MCol,
+    MLink,
+    MMention,
+    MMessage,
+    MNav,
+    MPagination,
+    MPopover,
+    MProgress,
+    MRadio,
+    MRadioGroup,
+    MRadioButton,
+    MResult,
+    MScrollbar,
+    MSearchPanel,
+    MSelect,
+    MOption,
+    MOptionGroup,
+    MSlider,
+    MSpace,
+    MSteps,
+    MStep,
+    MSwitch,
+    MTable,
+    MTableColumn,
+    MTableGrid,
+    MTableHeadEditor,
+    MTabs,
+    MTabPane,
+    MTag,
+    MText,
+    MTimePicker,
+    MTimeSelect,
+    MTooltip,
+    MTour,
+    MTree,
+    MTreeSelect,
+    install
+};
+
+// 默认导出
+export default {
+    install,
+};
+
+// 类型导出（需要根据实际组件补充）
+// export type { ButtonProps } from "./button/src/button";

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

@@ -0,0 +1,5 @@
+import Input from './src/input.vue';
+
+export const MInput = Input;
+
+export * from './src/input';

package/packages/components/src/input/src/input.ts

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

package/packages/components/src/input/src/input.vue

@@ -0,0 +1,53 @@
+<template>
+  <ElInput
+    class="m-input"
+    v-bind="{ ...filteredProps, ...$attrs }"
+  >
+    <template
+      v-if="props.prefixIcon && !$slots.prefix"
+      #prefix="scope"
+    >
+      <MIcon
+        :icon="props.prefixIcon"
+        v-bind="scope"
+      ></MIcon>
+    </template>
+
+    <template
+      v-if="props.suffixIcon && !$slots.suffix"
+      #suffix="scope"
+    >
+      <MIcon
+        :icon="props.suffixIcon"
+        v-bind="scope"
+      ></MIcon>
+    </template>
+
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </ElInput>
+</template>
+
+<script lang="ts" setup>
+import { ElInput } from 'element-plus';
+import { InputProps } from './input';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<Partial<InputProps>>(), {
+  placeholder: '请输入',
+});
+const filteredProps = computed(() => {
+  const propsCopy = { ...props };
+  Reflect.deleteProperty(propsCopy, 'prefixIcon');
+  Reflect.deleteProperty(propsCopy, 'suffixIcon');
+
+  return propsCopy;
+});
+</script>

package/packages/components/src/input-number/index.ts

@@ -0,0 +1,5 @@
+import InputNumber from './src/input-number.vue';
+
+export const MInputNumber = InputNumber;
+
+export * from './src/input-number';

package/packages/components/src/input-number/src/input-number.ts

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

package/packages/components/src/input-number/src/input-number.vue

@@ -0,0 +1,25 @@
+<template>
+  <ElInputNumber
+    class="m-input-number"
+    v-bind="{ ...props, ...$attrs }"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </ElInputNumber>
+</template>
+
+<script lang="ts" setup>
+import { ElInputNumber } from 'element-plus';
+import { InputNumberProps } from './input-number';
+
+const props = withDefaults(defineProps<Partial<InputNumberProps>>(), {
+  placeholder: '请输入',
+});
+</script>

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

@@ -0,0 +1,7 @@
+import Row from './src/row.vue';
+import Col from './src/col.vue';
+
+export const MRow = Row;
+export const MCol = Col;
+
+export * from './src/layout';

package/packages/components/src/layout/src/col.vue

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

package/packages/components/src/layout/src/layout.ts

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

package/packages/components/src/layout/src/row.vue

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

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

@@ -0,0 +1,5 @@
+import Link from './src/link.vue';
+
+export const MLink = Link;
+
+export * from './src/link';

package/packages/components/src/link/src/link.ts

@@ -0,0 +1,13 @@
+import type { LinkProps as ElementLinkProps } from 'element-plus';
+
+/**
+ * Link 组件属性类型
+ * 扩展 underline 属性以支持字符串值，默认值为 'never'
+ */
+export type LinkProps = Omit<ElementLinkProps, 'underline'> & {
+  /**
+   * 是否显示下划线
+   * @default 'never'
+   */
+  underline?: 'always' | 'hover' | 'never' | boolean;
+};

package/packages/components/src/link/src/link.vue

@@ -0,0 +1,74 @@
+<template>
+  <ElLink
+    :class="linkClass"
+    v-bind="linkAttrs as any"
+  >
+    <template
+      v-if="$slots.icon"
+      #icon
+    >
+      <slot name="icon"></slot>
+    </template>
+    <slot></slot>
+  </ElLink>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
+import { ElLink } from 'element-plus';
+import type { LinkProps } from './link';
+
+const props = withDefaults(defineProps<Partial<LinkProps>>(), {
+  underline: 'never',
+});
+
+const attrs = useAttrs();
+
+// 根据 underline 值计算下划线类名
+const underlineClass = computed(() => {
+  const underline = props.underline ?? 'never';
+
+  // 处理布尔值
+  if (underline === true) return 'is-underline-always';
+  if (underline === false) return '';
+
+  // 处理字符串值
+  if (underline === 'always') return 'is-underline-always';
+  if (underline === 'hover') return 'is-underline';
+  if (underline === 'never') return '';
+
+  return '';
+});
+
+// 合并类名
+const linkClass = computed(() => {
+  const internalClass = ['m-link', underlineClass.value].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（排除 class，因为已经单独处理）
+const linkAttrs = computed(() => {
+  const { class: _, ...rest } = attrs;
+  return {
+    ...props,
+    ...rest,
+    // 禁用 Element Plus 的默认下划线处理，因为我们自己实现
+    underline: false,
+  };
+});
+</script>

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

@@ -0,0 +1,5 @@
+import Mention from './src/mention.vue';
+
+export const MMention = Mention;
+
+export * from './src/mention';

package/packages/components/src/mention/src/mention.ts

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

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

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

@@ -0,0 +1 @@
+export { MMessage } from './src/message';