@phelan/design 0.0.1 → 0.0.2

package/packages/components/src/table/src/table.vue

@@ -1,47 +0,0 @@
-<template>
-  <el-table
-    :class="`m-table ${$attrs.height ? 'table-border-bottom' : ''} ${outline ? 'm-table-outline' : ''}`"
-    v-bind="$attrs"
-    :stripe="stripe"
-    :size="size"
-    ref="elTableRef"
-  >
-    <template
-      v-for="(_, slot) in $slots"
-      #[slot]="scope"
-    >
-      <slot
-        :name="slot"
-        v-bind="scope"
-      />
-    </template>
-  </el-table>
-</template>
-
-<script lang="ts" setup>
-import { tableProps } from './table';
-import { ref } from 'vue';
-
-const props = defineProps(tableProps);
-
-const { stripe = true, size = 'default', outline = true } = props;
-const elTableRef = ref();
-
-defineExpose({
-  getSelectionRows: () => elTableRef.value?.getSelectionRows(),
-  clearSelection: () => elTableRef.value?.clearSelection(),
-  toggleRowSelection: (row: any, selected?: boolean, ignoreSelectable = true) =>
-    elTableRef.value?.toggleRowSelection(row, selected, ignoreSelectable),
-  toggleAllSelection: () => elTableRef.value?.toggleAllSelection(),
-  toggleRowExpansion: (row: any, expanded?: boolean) =>
-    elTableRef.value?.toggleRowExpansion(row, expanded),
-  setCurrentRow: (row: any) => elTableRef.value?.setCurrentRow(row),
-  clearSort: () => elTableRef.value?.clearSort(),
-  clearFilter: (columnKeys?: string[]) => elTableRef.value?.clearFilter(columnKeys),
-  doLayout: () => elTableRef.value?.doLayout(),
-  sort: (prop: string, order: string) => elTableRef.value?.sort(prop, order),
-  scrollTo: (options: number | any, yCoord?: number) => elTableRef.value?.scrollTo(options, yCoord),
-  setScrollTop: (value: number) => elTableRef.value?.setScrollTop(value),
-  setScrollLeft: (value: number) => elTableRef.value?.setScrollLeft(value),
-});
-</script>

package/packages/components/src/table-grid/index.ts

@@ -1,7 +0,0 @@
-import TableGrid from './src/table-grid.vue';
-import type { TableGridColumn, ActionColumn, PaginationConfig } from './src/table-grid';
-
-export const MTableGrid = TableGrid;
-
-// 导出类型
-export type { TableGridColumn, ActionColumn, PaginationConfig };

package/packages/components/src/table-grid/src/render-cell.vue

@@ -1,44 +0,0 @@
-<template>
-  <span v-if="formattedValue !== undefined">{{ formattedValue }}</span>
-  <component
-    v-else-if="renderedValue"
-    :is="renderedValue"
-  />
-</template>
-
-<script lang="ts" setup>
-import { computed, h } from 'vue';
-import type { TableGridColumn } from './table-grid';
-
-interface Props {
-  row: any;
-  column: any;
-  index: number;
-  col: TableGridColumn;
-}
-
-const props = defineProps<Props>();
-
-// 处理 formatter
-const formattedValue = computed(() => {
-  if (props.col.formatter) {
-    const cellValue = props.row[props.col.prop || ''];
-    return props.col.formatter(props.row, props.column, cellValue, props.index);
-  }
-  return undefined;
-});
-
-// 处理 render 函数
-const renderedValue = computed(() => {
-  if (props.col.render) {
-    const result = props.col.render(props.row, props.column, props.index);
-    // 如果返回的是字符串或数字，使用 h 函数包装
-    if (typeof result === 'string' || typeof result === 'number') {
-      return h('span', String(result));
-    }
-    // 如果返回的是 VNode，直接返回
-    return result;
-  }
-  return null;
-});
-</script>

package/packages/components/src/table-grid/src/table-grid.ts

@@ -1,159 +0,0 @@
-import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
-import type { Component } from 'vue';
-
-/**
- * 表格列配置
- */
-export interface TableGridColumn extends Partial<TableColumnCtx<any>> {
-  /** 列字段名 */
-  prop?: string;
-  /** 列标题 */
-  label?: string;
-  /** 列类型：selection(多选)、index(序号)、expand(展开) */
-  type?: 'selection' | 'index' | 'expand';
-  /** 自定义渲染函数 */
-  render?: (row: any, column: any, index: number) => any;
-  /** 格式化函数 */
-  formatter?: (row: any, column: any, cellValue: any, index: number) => string;
-}
-
-/**
- * 操作列按钮配置
- */
-export interface ActionColumn {
-  /** 按钮文本 */
-  text: string;
-  /** 按钮类型 */
-  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'default';
-  /** 文本类型：text(文本按钮) 或 icon(图标按钮) */
-  textType?: 'text' | 'icon';
-  /** 图标组件 */
-  icon?: Component | string;
-  /** 是否禁用 */
-  disabled?: boolean | ((row: any) => boolean);
-  /** 是否显示 */
-  show?: (row: any) => boolean;
-  /** 点击事件 */
-  onClick: (row: any) => void;
-}
-
-/**
- * 分页配置
- */
-export interface PaginationConfig {
-  /** 当前页码 */
-  currentPage?: number;
-  /** 每页条数 */
-  pageSize?: number;
-  /** 总条数 */
-  total?: number;
-  /** 每页条数选项 */
-  pageSizes?: number[];
-  /** 分页布局 */
-  layout?: string;
-}
-
-/**
- * 导入配置
- */
-export interface ImportConfig {
-  /** 是否显示导入按钮 */
-  show?: boolean;
-  /** 是否支持多文件上传 */
-  multiple?: boolean;
-  /** 导入模板标识 */
-  importTemplate?: string;
-  /** 导入接口地址 */
-  importUrl?: string;
-  /** 接受类型 */
-  accept?: string;
-  /** 导入成功回调 */
-  onSuccess?: (res: any) => void;
-  /** 导入失败回调 */
-  onError?: (err: any) => void;
-  /** 导入确认回调 */
-  onConfirm?: (fileList: any[]) => void;
-  /** 导入取消回调 */
-  onCancel?: () => void;
-}
-
-export const tableGridProps = {
-  /** 表格数据 */
-  data: {
-    type: Array,
-    default: () => [],
-  },
-  /** 列配置 */
-  columns: {
-    type: Array as () => TableGridColumn[],
-    required: true,
-  },
-  /** 操作列配置 */
-  actionColumns: {
-    type: Array as () => ActionColumn[],
-    default: () => [],
-  },
-  /** 操作列宽度 */
-  actionColumnWidth: {
-    type: Number,
-    default: 130,
-  },
-  /** 表格行 key */
-  rowKey: {
-    type: String,
-    default: 'id',
-  },
-  /** 是否显示加载状态 */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  /** 分页配置 */
-  pagination: {
-    type: Object as () => PaginationConfig | false,
-    default: () => ({
-      currentPage: 1,
-      pageSize: 10,
-      total: 0,
-      pageSizes: [10, 20, 50, 100],
-      layout: 'total, sizes, prev, pager, next, jumper',
-    }),
-  },
-  /** 是否显示表格卡片 */
-  showCard: {
-    type: Boolean,
-    default: true,
-  },
-  /** 卡片阴影效果 */
-  cardShadow: {
-    type: String,
-    default: 'hover',
-  },
-  /** 查询面板默认列宽（基于 24 栅格系统） */
-  defaultSpan: {
-    type: Number,
-    default: 8,
-  },
-  /** 查询面板栅格间距（单位：px） */
-  gutter: {
-    type: Number,
-    default: 16,
-  },
-  /** 查询面板折叠时显示的表单项数量 */
-  visibleCount: {
-    type: Number,
-    default: 6,
-  },
-  /** 查询面板是否可展开收起 */
-  expandable: {
-    type: Boolean,
-    default: true,
-  },
-  /** 导入配置 */
-  importConfig: {
-    type: Object as () => ImportConfig | false,
-    default: () => ({}),
-  },
-};
-
-export type TableGridProps = typeof tableGridProps;

package/packages/components/src/table-grid/src/table-grid.vue

@@ -1,334 +0,0 @@
-<template>
-  <div class="m-table-grid">
-    <!-- 查询面板 -->
-    <m-search-panel
-      v-if="$slots.queryParams"
-      class="m-table-grid-search-panel"
-      v-bind="searchPanelProps"
-      @search="handleSearch"
-      @reset="handleReset"
-    >
-      <slot name="queryParams" />
-    </m-search-panel>
-
-    <div class="m-table-grid-container">
-      <!-- 工具栏 -->
-      <el-row
-        v-if="$slots.toolbarLeft || $slots.toolbarRight || showImport"
-        class="m-table-grid-toolbar"
-        :gutter="10"
-      >
-        <el-col
-          v-if="$slots.toolbarLeft"
-          :span="$slots.toolbarRight || showImport ? 12 : 24"
-        >
-          <slot name="toolbarLeft" />
-        </el-col>
-        <el-col
-          v-if="$slots.toolbarRight || showImport"
-          :span="$slots.toolbarLeft ? 12 : 24"
-          style="text-align: right"
-        >
-          <!-- 用户自定义的工具栏按钮 -->
-          <slot name="toolbarRight" />
-
-          <!-- 默认导入按钮 -->
-          <slot name="toolbarImport">
-            <m-button
-              v-if="showImport"
-              icon="Download"
-              @click="handleImport"
-              >{{ t('导入') }}</m-button
-            >
-          </slot>
-        </el-col>
-      </el-row>
-
-      <!-- 表格 -->
-      <m-table
-        v-loading="loading"
-        :data="data"
-        :row-key="rowKey"
-        size="default"
-        @selection-change="handleSelectionChange"
-      >
-        <template
-          v-for="(col, i) in columns"
-          :key="i"
-        >
-          <m-table-column
-            v-if="col.type === 'selection' || col.type === 'index' || col.type === 'expand'"
-            v-bind="col"
-          />
-
-          <m-table-column
-            v-else
-            v-bind="col"
-            show-overflow-tooltip
-          >
-            <template
-              v-if="col.render || col.formatter"
-              #default="scope"
-            >
-              <render-cell
-                :row="scope.row"
-                :column="scope.column"
-                :index="scope.$index"
-                :col="col"
-              />
-            </template>
-
-            <template
-              v-if="$slots[`header-${col.prop}`]"
-              #header="scope"
-            >
-              <slot
-                :name="`header-${col.prop}`"
-                v-bind="scope"
-              />
-            </template>
-          </m-table-column>
-        </template>
-
-        <m-table-column
-          v-if="(actionColumns && actionColumns.length) || $slots.action"
-          label="操作"
-          fixed="right"
-          align="center"
-          :width="actionColumnWidth"
-        >
-          <template #default="{ row }">
-            <slot
-              name="action"
-              :row="row"
-            >
-              <template
-                v-for="(btn, _idx) in actionColumns"
-                :key="_idx"
-              >
-                <el-tooltip
-                  :content="btn.text"
-                  placement="top"
-                  show-after="500"
-                >
-                  <el-button
-                    v-if="btn.textType === 'text'"
-                    :disabled="getDisabled(btn, row)"
-                    :type="btn.type || 'default'"
-                    link
-                    @click="btn.onClick(row)"
-                  >
-                    {{ btn.text }}
-                  </el-button>
-                  <el-button
-                    v-else
-                    :disabled="getDisabled(btn, row)"
-                    :type="btn.type || 'default'"
-                    link
-                    @click="btn.onClick(row)"
-                  >
-                    <el-icon v-if="btn.icon">
-                      <component :is="btn.icon" />
-                    </el-icon>
-                  </el-button>
-                </el-tooltip>
-              </template>
-            </slot>
-          </template>
-        </m-table-column>
-      </m-table>
-
-      <!-- 分页 -->
-      <div
-        v-if="pagination !== false"
-        class="m-table-grid-pagination"
-      >
-        <m-pagination
-          v-model:current-page="paginationModel.currentPage"
-          v-model:page-size="paginationModel.pageSize"
-          :total="paginationModel.total"
-          :page-sizes="paginationModel.pageSizes"
-          :layout="paginationModel.layout"
-          @change="handlePageChange"
-        />
-      </div>
-    </div>
-  </div>
-
-  <!-- 导入弹窗 -->
-  <m-import-dialog
-    v-if="showImport && importConfig !== false"
-    v-model="importDialogVisible"
-    :importTemplate="(importConfig as ImportConfig).importTemplate || 'dict'"
-    :importUrl="(importConfig as ImportConfig).importUrl || ''"
-    :accept="(importConfig as ImportConfig).accept || '.xls,.xlsx'"
-    :multiple="(importConfig as ImportConfig).multiple || false"
-    @confirm="handleImportConfirm"
-    @download="handleDownload"
-    @cancel="handleImportCancel"
-    @success="handleImportSuccess"
-    @error="handleImportError"
-  />
-</template>
-
-<script lang="ts" setup>
-import { computed, reactive, watch, ref } from 'vue';
-import { MTable, MTableColumn } from '../../table';
-import { MPagination } from '../../pagination';
-import { MSearchPanel } from '../../search-panel';
-import { MImportDialog } from '../../import-dialog';
-import { MButton } from '../../button';
-import { useLocale } from 'element-plus';
-import RenderCell from './render-cell.vue';
-import {
-  tableGridProps,
-  type ActionColumn,
-  type PaginationConfig,
-  type ImportConfig,
-} from './table-grid';
-const { t: oriT } = useLocale();
-const t = (key: string) => oriT(`m.tableGrid.${key}`) || key;
-
-defineOptions({
-  name: 'MTableGrid',
-  inheritAttrs: false,
-});
-
-const props = defineProps(tableGridProps);
-
-const emit = defineEmits<{
-  search: [];
-  reset: [];
-  'update:selection': [val: any[]];
-  'page-change': [page: number, size: number];
-  'import-download': [template: string];
-}>();
-
-// SearchPanel 的 props
-const searchPanelProps = computed(() => ({
-  defaultSpan: props.defaultSpan,
-  gutter: props.gutter,
-  visibleCount: props.visibleCount,
-  expandable: props.expandable,
-}));
-
-// 分页模型
-const paginationModel = reactive<PaginationConfig>({
-  currentPage: 1,
-  pageSize: 10,
-  total: 0,
-  pageSizes: [10, 20, 50, 100],
-  layout: 'total, sizes, prev, pager, next, jumper',
-});
-
-// 初始化分页配置
-if (props.pagination !== false) {
-  Object.assign(paginationModel, {
-    currentPage: props.pagination?.currentPage ?? 1,
-    pageSize: props.pagination?.pageSize ?? 10,
-    total: props.pagination?.total ?? 0,
-    pageSizes: props.pagination?.pageSizes ?? [10, 20, 50, 100],
-    layout: props.pagination?.layout ?? 'total, sizes, prev, pager, next, jumper',
-  });
-}
-
-// 监听外部传入的分页配置变化
-watch(
-  () => props.pagination,
-  (newVal) => {
-    if (newVal !== false && newVal) {
-      if (newVal.currentPage !== undefined) {
-        paginationModel.currentPage = newVal.currentPage;
-      }
-      if (newVal.pageSize !== undefined) {
-        paginationModel.pageSize = newVal.pageSize;
-      }
-      if (newVal.total !== undefined) {
-        paginationModel.total = newVal.total;
-      }
-    }
-  },
-  { deep: true },
-);
-
-// 处理查询
-const handleSearch = () => {
-  emit('search');
-};
-
-// 处理重置
-const handleReset = () => {
-  emit('reset');
-};
-
-// 处理选择变化
-const handleSelectionChange = (selection: any[]) => {
-  emit('update:selection', selection);
-};
-
-// 处理页码变化
-const handlePageChange = (page: number, size: number) => {
-  paginationModel.currentPage = page;
-  paginationModel.pageSize = size;
-  emit('page-change', page, size);
-};
-
-// 获取按钮禁用状态
-const getDisabled = (btn: ActionColumn, row: any): boolean => {
-  if (typeof btn.disabled === 'function') {
-    return btn.disabled(row);
-  }
-  return btn.disabled ?? false;
-};
-
-// 导入相关
-const importConfig = computed<ImportConfig | false>(() => {
-  return props.importConfig !== false ? props.importConfig || {} : false;
-});
-
-const showImport = computed(() => {
-  return importConfig.value !== false && importConfig.value?.show === true;
-});
-
-// 导入相关
-const importDialogVisible = ref(false);
-
-const handleImport = () => {
-  importDialogVisible.value = true;
-};
-
-const handleImportConfirm = (fileList: any[]) => {
-  if (importConfig.value && importConfig.value.onConfirm) {
-    importConfig.value.onConfirm(fileList);
-  }
-};
-
-const handleDownload = (template: string) => {
-  emit('import-download', template);
-};
-
-const handleImportCancel = () => {
-  importDialogVisible.value = false;
-  if (importConfig.value && importConfig.value.onCancel) {
-    importConfig.value.onCancel();
-  }
-};
-
-const handleImportSuccess = (res: any) => {
-  importDialogVisible.value = false;
-  if (importConfig.value && importConfig.value.onSuccess) {
-    importConfig.value.onSuccess(res);
-  }
-};
-
-const handleImportError = (err: any) => {
-  if (importConfig.value && importConfig.value.onError) {
-    importConfig.value.onError(err);
-  }
-};
-
-// 暴露方法
-defineExpose({
-  getPagination: () => paginationModel,
-});
-</script>

package/packages/components/src/table-head-editor/index.ts

@@ -1,5 +0,0 @@
-import TableHeadEditor from './src/table-head-editor.vue';
-
-export const MTableHeadEditor = TableHeadEditor;
-
-export * from './src/table-head-editor';

package/packages/components/src/table-head-editor/src/table-head-editor.ts

@@ -1,59 +0,0 @@
-import { PropType } from 'vue';
-
-export interface TreeItem {
-  label: string;
-  visible: boolean;
-  fixed?: boolean;
-  fixedPosition?: 'left' | 'right' | undefined;
-  editable?: boolean;
-  children?: TreeItem[];
-  key: string; // 唯一键
-}
-
-export interface TableHeadEditorProps {
-  modelValue?: boolean;
-  title?: string;
-  size?: number | string;
-  data?: TreeItem[];
-}
-
-export const tableHeadEditorProps = {
-  /**
-   * @description 控制显隐
-   */
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description 标题
-   */
-  title: {
-    type: String,
-    default: '自定义列表',
-  },
-  /**
-   * @description 容器宽度
-   */
-  size: {
-    type: [Number, String],
-    default: '700px',
-  },
-  /**
-   * @description 列表项data
-   */
-  data: {
-    type: Array as PropType<TreeItem[]>,
-    default: () => [],
-  },
-};
-
-export const tableHeadEditorEmits = {
-  'update:modelValue': (_value: boolean) => true,
-  cancel: () => true,
-  confirm: (_newData: TreeItem[]) => true,
-  'reset-default': () => true,
-};
-
-export type TableHeadEditorEmits = typeof tableHeadEditorEmits;
-export type TableHeadEditorPropsType = typeof tableHeadEditorProps;