@phelan/design 0.0.1

package/docs/examples/table-head-editor/grouping-header.vue

@@ -0,0 +1,409 @@
+<template>
+  <div class="vp-raw">
+    <div style="margin-bottom: 16px">
+      <m-button
+        type="primary"
+        @click="visible = true"
+      >
+        自定义列表
+      </m-button>
+    </div>
+
+    <!-- 表格组件 - 多级表头 -->
+    <m-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <!-- 根据 visibleColumns 的顺序动态渲染列 -->
+      <template
+        v-for="column in visibleColumns"
+        :key="column.label"
+      >
+        <m-table-column
+          v-if="!column.children || column.children.length === 0"
+          :prop="getColumnProp(column.label)"
+          :label="column.label"
+          :width="getColumnWidth(column.label)"
+          :fixed="getFixedValue(column)"
+        />
+        <m-table-column
+          v-else
+          :label="column.label"
+          :fixed="getFixedValue(column)"
+        >
+          <template
+            v-for="child in column.children.filter((c) => c.visible)"
+            :key="child.label"
+          >
+            <m-table-column
+              v-if="!child.children || child.children.length === 0"
+              :prop="getColumnProp(child.label)"
+              :label="child.label"
+              :width="getColumnWidth(child.label)"
+            />
+            <m-table-column
+              v-else
+              :label="child.label"
+            >
+              <m-table-column
+                v-for="grandchild in child.children.filter((c) => c.visible)"
+                :key="grandchild.label"
+                :prop="getColumnProp(grandchild.label)"
+                :label="grandchild.label"
+                :width="getColumnWidth(grandchild.label)"
+              />
+            </m-table-column>
+          </template>
+        </m-table-column>
+      </template>
+    </m-table>
+
+    <!-- 表头编辑器 -->
+    <m-table-head-editor
+      v-model="visible"
+      :data="columnConfig"
+      title="自定义列表"
+      :size="600"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+
+interface TreeItem {
+  label: string;
+  visible: boolean;
+  fixed?: boolean;
+  fixedPosition?: 'left' | 'right' | undefined;
+  editable?: boolean;
+  children?: TreeItem[];
+}
+
+const visible = ref(true);
+
+// 表格数据
+const tableData = ref([
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    phone: '138-0013-8000',
+    email: 'tom@example.com',
+    status: 'Active',
+    createTime: '2016-01-15',
+    updateTime: '2016-05-01',
+    sales: 125000,
+    rating: 4.5,
+    department: 'Sales',
+    manager: 'John Smith',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Jerry',
+    state: 'New York',
+    city: 'New York',
+    address: 'No. 123, Broadway, New York',
+    zip: 'NY 10001',
+    phone: '138-0013-8001',
+    email: 'jerry@example.com',
+    status: 'Active',
+    createTime: '2016-02-20',
+    updateTime: '2016-04-28',
+    sales: 98000,
+    rating: 4.2,
+    department: 'Marketing',
+    manager: 'Jane Doe',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Alice',
+    state: 'Texas',
+    city: 'Houston',
+    address: 'No. 456, Main St, Houston',
+    zip: 'TX 77001',
+    phone: '138-0013-8002',
+    email: 'alice@example.com',
+    status: 'Inactive',
+    createTime: '2016-03-10',
+    updateTime: '2016-05-02',
+    sales: 156000,
+    rating: 4.8,
+    department: 'Sales',
+    manager: 'John Smith',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Bob',
+    state: 'Florida',
+    city: 'Miami',
+    address: 'No. 789, Ocean Dr, Miami',
+    zip: 'FL 33101',
+    phone: '138-0013-8003',
+    email: 'bob@example.com',
+    status: 'Active',
+    createTime: '2016-01-25',
+    updateTime: '2016-04-30',
+    sales: 89000,
+    rating: 4.0,
+    department: 'Support',
+    manager: 'Mike Johnson',
+  },
+  {
+    date: '2016-05-05',
+    name: 'Charlie',
+    state: 'Illinois',
+    city: 'Chicago',
+    address: 'No. 321, Michigan Ave, Chicago',
+    zip: 'IL 60601',
+    phone: '138-0013-8004',
+    email: 'charlie@example.com',
+    status: 'Active',
+    createTime: '2016-02-15',
+    updateTime: '2016-05-03',
+    sales: 142000,
+    rating: 4.6,
+    department: 'Sales',
+    manager: 'John Smith',
+  },
+  {
+    date: '2016-05-06',
+    name: 'David',
+    state: 'Washington',
+    city: 'Seattle',
+    address: 'No. 654, Pike St, Seattle',
+    zip: 'WA 98101',
+    phone: '138-0013-8005',
+    email: 'david@example.com',
+    status: 'Pending',
+    createTime: '2016-03-20',
+    updateTime: '2016-05-04',
+    sales: 110000,
+    rating: 4.3,
+    department: 'Marketing',
+    manager: 'Jane Doe',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Eva',
+    state: 'Massachusetts',
+    city: 'Boston',
+    address: 'No. 987, Beacon St, Boston',
+    zip: 'MA 02101',
+    phone: '138-0013-8006',
+    email: 'eva@example.com',
+    status: 'Active',
+    createTime: '2016-01-10',
+    updateTime: '2016-05-05',
+    sales: 135000,
+    rating: 4.7,
+    department: 'Sales',
+    manager: 'John Smith',
+  },
+  {
+    date: '2016-05-08',
+    name: 'Frank',
+    state: 'Arizona',
+    city: 'Phoenix',
+    address: 'No. 147, Central Ave, Phoenix',
+    zip: 'AZ 85001',
+    phone: '138-0013-8007',
+    email: 'frank@example.com',
+    status: 'Active',
+    createTime: '2016-02-05',
+    updateTime: '2016-05-06',
+    sales: 102000,
+    rating: 4.1,
+    department: 'Support',
+    manager: 'Mike Johnson',
+  },
+]);
+
+// 列配置数据（包含多级表头）
+const columnConfig = ref<TreeItem[]>([
+  {
+    label: 'Date',
+    visible: true,
+    fixed: false,
+    editable: false,
+    fixedPosition: 'right',
+  },
+  {
+    label: 'Delivery Info',
+    visible: true,
+    fixed: false,
+    children: [
+      {
+        label: 'Name',
+        visible: true,
+        fixed: false,
+      },
+      {
+        label: 'Address Info',
+        visible: true,
+        fixed: false,
+        children: [
+          {
+            label: 'State',
+            visible: true,
+            fixed: false,
+          },
+          {
+            label: 'City',
+            visible: true,
+            fixed: false,
+          },
+          {
+            label: 'Address',
+            visible: true,
+            fixed: false,
+          },
+          {
+            label: 'Zip',
+            visible: true,
+            fixed: false,
+          },
+        ],
+      },
+      {
+        label: 'Contact Info',
+        visible: true,
+        fixed: false,
+        children: [
+          {
+            label: 'Phone',
+            visible: true,
+            fixed: false,
+          },
+          {
+            label: 'Email',
+            visible: true,
+            fixed: false,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Status',
+    visible: true,
+    fixed: false,
+  },
+  {
+    label: 'Time Info',
+    visible: true,
+    fixed: false,
+    children: [
+      {
+        label: 'Create Time',
+        visible: true,
+        fixed: false,
+      },
+      {
+        label: 'Update Time',
+        visible: true,
+        fixed: false,
+      },
+    ],
+  },
+  {
+    label: 'Business Info',
+    visible: true,
+    fixed: false,
+    editable: false,
+    children: [
+      {
+        label: 'Sales',
+        visible: true,
+        fixed: false,
+      },
+      {
+        label: 'Rating',
+        visible: true,
+        fixed: false,
+        editable: false,
+      },
+    ],
+  },
+  {
+    label: 'Organization',
+    visible: true,
+    fixed: false,
+    editable: false,
+    children: [
+      {
+        label: 'Department',
+        visible: true,
+        fixed: false,
+      },
+      {
+        label: 'Manager',
+        visible: true,
+        fixed: false,
+        editable: false,
+      },
+    ],
+  },
+]);
+
+// 根据列配置计算可见的列（保持顺序）
+const visibleColumns = computed(() => {
+  return columnConfig.value.filter((col) => col.visible);
+});
+
+// 获取 fixed 值的辅助函数
+const getFixedValue = (col: TreeItem | undefined): boolean | 'left' | 'right' | undefined => {
+  if (!col || !col.fixed) {
+    return false;
+  }
+  return col.fixedPosition === 'right' ? 'right' : 'left';
+};
+
+// 列属性映射表（用于获取 prop 和 width）
+const columnProps: Record<string, { prop?: string; width?: number }> = {
+  Date: { prop: 'date', width: 150 },
+  Status: { prop: 'status', width: 100 },
+  Name: { prop: 'name', width: 120 },
+  State: { prop: 'state', width: 120 },
+  City: { prop: 'city', width: 120 },
+  Address: { prop: 'address' },
+  Zip: { prop: 'zip', width: 120 },
+  Phone: { prop: 'phone', width: 150 },
+  Email: { prop: 'email', width: 200 },
+  'Create Time': { prop: 'createTime', width: 150 },
+  'Update Time': { prop: 'updateTime', width: 150 },
+  Sales: { prop: 'sales', width: 120 },
+  Rating: { prop: 'rating', width: 100 },
+  Department: { prop: 'department', width: 120 },
+  Manager: { prop: 'manager', width: 150 },
+};
+
+// 获取列的 prop
+const getColumnProp = (label: string): string | undefined => {
+  return columnProps[label]?.prop;
+};
+
+// 获取列的 width
+const getColumnWidth = (label: string): number | undefined => {
+  return columnProps[label]?.width;
+};
+
+const handleConfirm = (newData: TreeItem[]) => {
+  ElMessage.success('表头配置已更新');
+  console.log('确认提交', newData);
+  // 更新列配置
+  columnConfig.value = newData as TreeItem[];
+  visible.value = false;
+};
+
+const handleCancel = () => {
+  ElMessage.info('已取消');
+  console.log('取消');
+};
+</script>

package/docs/examples/table-head-editor/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="vp-raw">
+    <div style="margin-bottom: 16px">
+      <m-button
+        type="primary"
+        @click="visible = true"
+      >
+        自定义列表
+      </m-button>
+    </div>
+
+    <!-- 表格组件 -->
+    <m-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <m-table-column
+        v-for="column in visibleColumns"
+        :key="column.label"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width || undefined"
+        :fixed="column.fixed === false ? false : column.fixed"
+      />
+    </m-table>
+
+    <!-- 表头编辑器 -->
+    <m-table-head-editor
+      v-model="visible"
+      :data="columnConfig"
+      title="自定义列表"
+      :size="600"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+
+interface TreeItem {
+  label: string;
+  visible: boolean;
+  fixed?: boolean;
+  fixedPosition?: 'left' | 'right' | undefined;
+  editable: boolean;
+  children?: TreeItem[];
+}
+
+const visible = ref(false);
+
+// 表格数据
+const tableData = ref([
+  {
+    articleCode: 'A001',
+    articleName: 'Product A',
+    price: 100,
+    stock: 50,
+    category: 'Category 1',
+    supplier: 'Supplier A',
+    status: 'Active',
+    createTime: '2024-01-01',
+    updateTime: '2024-01-15',
+    sales: 1200,
+    rating: 4.5,
+  },
+  {
+    articleCode: 'A002',
+    articleName: 'Product B',
+    price: 200,
+    stock: 30,
+    category: 'Category 2',
+    supplier: 'Supplier B',
+    status: 'Active',
+    createTime: '2024-01-02',
+    updateTime: '2024-01-16',
+    sales: 800,
+    rating: 4.2,
+  },
+  {
+    articleCode: 'A003',
+    articleName: 'Product C',
+    price: 150,
+    stock: 80,
+    category: 'Category 1',
+    supplier: 'Supplier A',
+    status: 'Inactive',
+    createTime: '2024-01-03',
+    updateTime: '2024-01-17',
+    sales: 1500,
+    rating: 4.8,
+  },
+  {
+    articleCode: 'A004',
+    articleName: 'Product D',
+    price: 300,
+    stock: 20,
+    category: 'Category 3',
+    supplier: 'Supplier C',
+    status: 'Active',
+    createTime: '2024-01-04',
+    updateTime: '2024-01-18',
+    sales: 600,
+    rating: 3.9,
+  },
+  {
+    articleCode: 'A005',
+    articleName: 'Product E',
+    price: 250,
+    stock: 45,
+    category: 'Category 2',
+    supplier: 'Supplier B',
+    status: 'Active',
+    createTime: '2024-01-05',
+    updateTime: '2024-01-19',
+    sales: 900,
+    rating: 4.3,
+  },
+  {
+    articleCode: 'A006',
+    articleName: 'Product F',
+    price: 180,
+    stock: 60,
+    category: 'Category 1',
+    supplier: 'Supplier A',
+    status: 'Active',
+    createTime: '2024-01-06',
+    updateTime: '2024-01-20',
+    sales: 1100,
+    rating: 4.6,
+  },
+  {
+    articleCode: 'A007',
+    articleName: 'Product G',
+    price: 220,
+    stock: 35,
+    category: 'Category 3',
+    supplier: 'Supplier C',
+    status: 'Inactive',
+    createTime: '2024-01-07',
+    updateTime: '2024-01-21',
+    sales: 700,
+    rating: 4.1,
+  },
+  {
+    articleCode: 'A008',
+    articleName: 'Product H',
+    price: 280,
+    stock: 25,
+    category: 'Category 2',
+    supplier: 'Supplier B',
+    status: 'Active',
+    createTime: '2024-01-08',
+    updateTime: '2024-01-22',
+    sales: 950,
+    rating: 4.4,
+  },
+]);
+
+// 列配置数据（所有可用的列）
+const columnConfig = ref<TreeItem[]>([
+  { label: 'Article Code', visible: true, fixed: true, fixedPosition: 'left', editable: true },
+  { label: 'Article Name', visible: true, fixed: false, editable: true },
+  { label: 'Price', visible: true, fixed: false, editable: true },
+  { label: 'Stock', visible: true, fixed: false, editable: false },
+  { label: 'Category', visible: true, fixed: false, editable: false },
+  { label: 'Status', visible: true, fixed: false, editable: false },
+  { label: 'Create Time', visible: true, fixed: false, editable: false },
+  { label: 'Update Time', visible: true, fixed: false, editable: false },
+  { label: 'Sales', visible: true, fixed: false, editable: false },
+  { label: 'Rating', visible: true, fixed: false, editable: false },
+  { label: 'Supplier', visible: true, fixed: true, fixedPosition: 'right', editable: false },
+]);
+
+// 列标签到数据字段的映射
+const labelToPropMap: Record<string, string> = {
+  'Article Code': 'articleCode',
+  'Article Name': 'articleName',
+  Price: 'price',
+  Stock: 'stock',
+  Category: 'category',
+  Status: 'status',
+  'Create Time': 'createTime',
+  'Update Time': 'updateTime',
+  Sales: 'sales',
+  Rating: 'rating',
+  Supplier: 'supplier',
+};
+
+// 根据列配置计算可见的列（保持顺序）
+const visibleColumns = computed(() => {
+  return columnConfig.value
+    .filter((col: TreeItem) => col.visible)
+    .map((col: TreeItem) => {
+      // 根据 fixed 和 fixedPosition 确定 fixed 值
+      let fixedValue: boolean | 'left' | 'right' | undefined = false;
+      if (col.fixed) {
+        fixedValue = col.fixedPosition === 'right' ? 'right' : 'left';
+      }
+      return {
+        label: col.label,
+        prop: labelToPropMap[col.label],
+        fixed: fixedValue,
+        width:
+          col.label === 'Article Code'
+            ? 150
+            : col.label === 'Article Name'
+              ? 200
+              : col.label === 'Price'
+                ? 120
+                : col.label === 'Stock'
+                  ? 120
+                  : col.label === 'Category'
+                    ? 150
+                    : col.label === 'Status'
+                      ? 120
+                      : col.label === 'Create Time'
+                        ? 150
+                        : col.label === 'Update Time'
+                          ? 150
+                          : col.label === 'Sales'
+                            ? 120
+                            : col.label === 'Rating'
+                              ? 120
+                              : col.label === 'Supplier'
+                                ? 150
+                                : undefined,
+      };
+    });
+});
+
+const handleConfirm = (newData: TreeItem[]) => {
+  ElMessage.success('表头配置已更新');
+  console.log('确认提交', newData);
+  // 更新列配置
+  columnConfig.value = newData as TreeItem[];
+  visible.value = false;
+};
+
+const handleCancel = () => {
+  ElMessage.info('已取消');
+  console.log('取消');
+};
+</script>

package/docs/examples/tabs/default.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="vp-raw">
+    <m-tabs
+      v-model="activeName"
+      class="demo-tabs"
+      @tab-click="handleClick"
+    >
+      <m-tab-pane
+        label="全部"
+        name=""
+        >全部</m-tab-pane
+      >
+      <m-tab-pane
+        label="禁用选项"
+        name="third"
+        disabled
+        >禁用选项</m-tab-pane
+      >
+      <m-tab-pane
+        label="很长很长很长很长很长"
+        name="fourth"
+        >很长很长很长很长很长</m-tab-pane
+      >
+    </m-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import type { TabsPaneContext } from 'element-plus';
+
+const activeName = ref('');
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+</script>
+
+<style>
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>