@quiteer/naive-extra 0.0.1

package/src/components/table/TableSetting.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import type { ExportType, Settings, TableSize } from './props'
+import { VueDraggable } from 'vue-draggable-plus'
+import { useColumn } from './useColumn'
+
+const emit = defineEmits<{
+  realod: []
+  export: [type: ExportType]
+}>()
+const settings = defineModel<Settings>({ required: true })
+const sizeOptions = [
+  {
+    type: 'menu',
+    label: '紧凑',
+    key: 'small'
+  },
+  {
+    type: 'menu',
+    label: '默认',
+    key: 'medium'
+  },
+  {
+    type: 'menu',
+    label: '宽松',
+    key: 'large'
+  }
+]
+
+// 密度切换
+function selectSize(e: TableSize) {
+  settings.value.size = e
+}
+
+const exportOptions = [
+  {
+    label: '导出原始数据',
+    key: 'all'
+  }
+]
+
+function selectExport(e: ExportType) {
+  emit('export', e)
+}
+
+const data = computed({
+  get() {
+    return settings.value.columns
+  },
+  set(columns) {
+    settings.value.columns = columns
+  }
+})
+
+const {
+  selection,
+  checkAll,
+  checkList,
+  columnsList,
+  handleCheckAll,
+  handleSelection,
+  resetColumns,
+  handleChange,
+  fixedColumn,
+  draggableEnd
+} = useColumn(data)
+
+function onMove(e: any) {
+  if (e.draggedContext.element.draggable === false)
+    return false
+  return true
+}
+</script>
+
+<template>
+  <NFlex :size="0" align="center">
+    <NTooltip trigger="hover">
+      <template #trigger>
+        <NSwitch v-model:value="settings.striped" size="small" />
+      </template>
+      斑马纹
+    </NTooltip>
+    <NDivider vertical />
+    <NTooltip trigger="hover">
+      <template #trigger>
+        <NButton text type="primary">
+          <template #icon>
+            <i class="i-ant-design-reload-outlined text-5" @click="emit('realod')" />
+          </template>
+        </NButton>
+      </template>
+      刷新
+    </NTooltip>
+    <NDivider vertical />
+    <!-- 密度 -->
+    <NTooltip trigger="hover">
+      <template #trigger>
+        <NFlex align="center">
+          <NDropdown v-model:value="settings.size" trigger="click" :options="sizeOptions" @select="selectSize">
+            <NButton text type="primary">
+              <template #icon>
+                <i class="i-mdi-arrow-expand-vertical text-5" />
+              </template>
+            </NButton>
+          </NDropdown>
+        </NFlex>
+      </template>
+      <span>密度</span>
+    </NTooltip>
+    <NDivider vertical />
+    <!-- 导出 -->
+    <NTooltip trigger="hover">
+      <template #trigger>
+        <NFlex align="center">
+          <NDropdown trigger="click" :options="exportOptions" @select="selectExport">
+            <NButton text type="primary">
+              <template #icon>
+                <i class="i-mdi-file-excel text-5" />
+              </template>
+            </NButton>
+          </NDropdown>
+        </NFlex>
+      </template>
+      <span>导出表格</span>
+    </NTooltip>
+    <NDivider vertical />
+    <!-- 列设置 -->
+    <NTooltip trigger="hover">
+      <template #trigger>
+        <NFlex align="center">
+          <NPopover trigger="click" :width="240" placement="bottom-end">
+            <template #trigger>
+              <NButton text type="primary">
+                <template #icon>
+                  <i class="i-ic-outline-settings text-5" />
+                </template>
+              </NButton>
+            </template>
+            <template #header>
+              <NSpace>
+                <NCheckbox v-model:checked="checkAll" @update:checked="handleCheckAll">
+                  列展示
+                </NCheckbox>
+                <NCheckbox v-model:checked="selection" @update:checked="handleSelection">
+                  勾选列
+                </NCheckbox>
+                <NButton text type="info" size="small" class="mt-1" @click="resetColumns">
+                  重置
+                </NButton>
+              </NSpace>
+            </template>
+            <div class="table-toolbar-inner">
+              <NCheckboxGroup v-model:value="checkList" @update:value="handleChange">
+                <VueDraggable
+                  v-model="columnsList"
+                  :animation="300"
+                  item-key="key"
+                  filter=".no-draggable"
+                  :move="onMove"
+                  @end="draggableEnd"
+                >
+                  <div
+                    v-for="element in columnsList"
+                    :key="element.key"
+                    class="table-toolbar-inner-checkbox"
+                  >
+                    <span class="drag-icon" :class="{ 'drag-icon-hidden': element.draggable === false }">
+                      <i class="i-nimbus-drag text-4" />
+                    </span>
+                    <NCheckbox :value="element.key" :label="element.title" />
+                    <div class="fixed-item">
+                      <NTooltip trigger="hover" placement="bottom">
+                        <template #trigger>
+                          <NButton text>
+                            <template #icon>
+                              <i
+                                class="i-ph-caret-line-left-bold text-4"
+                                :class="{ 'text-cyan-400 ': element.fixed === 'left' }"
+                                @click="fixedColumn(element, 'left')"
+                              />
+                            </template>
+                          </NButton>
+                        </template>
+                        <span>固定到左侧</span>
+                      </NTooltip>
+                      <NDivider vertical />
+                      <NTooltip trigger="hover" placement="bottom">
+                        <template #trigger>
+                          <NButton text>
+                            <template #icon>
+                              <i
+                                class="i-ph-caret-line-right-bold text-4"
+                                :class="{ 'text-cyan-400': element.fixed === 'right' }"
+                                @click="fixedColumn(element, 'right')"
+                              />
+                            </template>
+                          </NButton>
+                        </template>
+                        <span>固定到右侧</span>
+                      </NTooltip>
+                    </div>
+                  </div>
+                </VueDraggable>
+              </NCheckboxGroup>
+            </div>
+          </NPopover>
+        </NFlex>
+      </template>
+      <span>列设置</span>
+    </NTooltip>
+  </NFlex>
+</template>
+
+<style lang="scss" scoped>
+.table-toolbar-right-icon {
+  margin-left: 12px;
+  font-size: 16px;
+  color: var(--text-color);
+  cursor: pointer;
+
+  :hover {
+    color: #1890ff;
+  }
+}
+
+.table-toolbar-inner {
+  .table-toolbar-inner-checkbox {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+
+    &:hover {
+      background: var(--n-merged-td-color-hover);
+    }
+
+    .drag-icon {
+      display: inline-flex;
+      margin-right: 8px;
+      cursor: move;
+      &-hidden {
+        visibility: hidden;
+        cursor: default;
+      }
+    }
+
+    .fixed-item {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-left: auto;
+    }
+  }
+}
+</style>

package/src/components/table/index.ts

@@ -0,0 +1,14 @@
+import QuiTable from './index.vue'
+import { useColumn } from './useColumn'
+
+export { QuiTable, useColumn }
+
+export type {
+  Column as TableColumn,
+  Columns as TableColumns,
+  ExportType as TableExportType,
+  FetchFn as TableFetchFn,
+  Props as TableProps,
+  Settings as TableSettings,
+  TableSize
+} from './props'

package/src/components/table/index.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import type { DataTableColumn, DataTableProps, NDataTable, PaginationProps } from 'naive-ui'
+import type { Props, Settings } from './props'
+import { useProviderContext } from '../../hooks'
+import TableSetting from './TableSetting.vue'
+
+const props = defineProps<Props>()
+
+const { mergedConfig } = useProviderContext()
+
+const isHideBar = computed(() => props.hidebar ?? false)
+
+const attrs = useAttrs() as Omit<DataTableProps, 'size' | 'striped'>
+
+const settings = ref<Settings>({
+  size: props.size ?? mergedConfig.value.common?.heightMedium === '34px' ? 'medium' : 'medium', // 这里暂时用 medium，因为 common 中没有直接的 size 映射
+  striped: props.striped ?? mergedConfig.value.table.striped ?? true,
+  columns: attrs.columns!.map(item => ({
+    fixed: false,
+    ellipsis: { tooltip: true },
+    resizable: true,
+    align: 'center',
+    ...item
+  }))
+})
+
+const loading = ref(true)
+
+const list = ref<any[]>([])
+
+const pagination = reactive<PaginationProps>({
+  page: 1,
+  pageSize: 10,
+  prefix({ itemCount }) {
+    return `共 ${itemCount} 条`
+  },
+  showSizePicker: true,
+  showQuickJumper: true,
+  pageSizes: [10, 20, 50, 100],
+  onChange: (page: number) => {
+    pagination.page = page
+    fetchData()
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    pagination.pageSize = pageSize
+    pagination.page = 1
+    fetchData()
+  }
+})
+
+const tableRef = ref<InstanceType<typeof NDataTable>>()
+
+const tableProps = computed<DataTableProps>(() => {
+  return {
+    remote: true,
+    renderCell(v: any) {
+      return v ?? h(NText, { depth: 3 }, { default: () => '信息缺失' })
+    },
+    ...attrs
+  }
+})
+
+const fetchFn = ref(props.fetch)
+
+async function fetchData() {
+  loading.value = true
+  const res = await fetchFn.value({
+    pageNum: pagination.page!,
+    pageSize: pagination.pageSize!
+  })
+
+  loading.value = false
+  list.value = res.list
+  pagination.itemCount = res.total
+}
+
+onActivated(() => {
+  fetchData()
+})
+
+onMounted(async () => {
+  fetchData()
+
+  // console.log({
+  //   tableProps: tableProps.value,
+  //   tableRef: tableRef.value,
+  //   props,
+  //   attrs
+  // });
+})
+
+function handleExport() {
+  tableRef.value?.downloadCsv({ fileName: 'data-table' })
+}
+
+// 移除显式接口，避免 dts 类型过深
+
+defineExpose({
+  // 获取表格实例
+  getTableRef: () => tableRef.value,
+  // 刷新
+  updateTableData: (isReset = false) => {
+    if (isReset) {
+      pagination.page = 1
+    }
+    fetchData()
+  },
+  setActions<T = Record<string, any>>(columnOption: Partial<DataTableColumn<T>>) {
+    settings.value.columns.push({
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      key: 'action',
+      ...columnOption
+    })
+  },
+  // 导出表格
+  downloadCsv: (fileName = 'data-table') => tableRef.value?.downloadCsv({ fileName }),
+  // 设置列
+  setColumns(columns: DataTableColumn[]) {
+    settings.value.columns = columns.map((item: any) => ({
+      fixed: false,
+      ellipsis: { tooltip: true },
+      resizable: true,
+      align: 'center',
+      ...item
+    }))
+  },
+  // 获取列
+  getColumns: () => settings.value.columns,
+  // 设置尺寸
+  setSize: (size: Settings['size']) => { settings.value.size = size },
+  // 设置斑马纹
+  setStriped: (striped: boolean) => { settings.value.striped = striped },
+  // 获取分页
+  getPagination: () => ({ ...pagination }),
+  // 设置分页（部分）
+  setPagination: (patch: Partial<PaginationProps>) => { Object.assign(pagination, patch) },
+  // 获取数据
+  getData: () => list.value,
+  // 设置数据
+  setData: (rows: any[]) => { list.value = rows },
+  // 设置 fetch 函数
+  setFetch: (fn: (pageInfo: { pageNum: number, pageSize: number }) => Promise<{ list: any[], total: number }>) => {
+    fetchFn.value = fn
+  },
+  // 获取与设置设置项
+  getSettings: () => settings.value,
+  setSettings: (patch: Partial<Settings>) => { settings.value = { ...settings.value, ...patch } }
+} as any)
+</script>
+
+<template>
+  <NFlex vertical class="h-full flex-col-stretch">
+    <NFlex v-if="!isHideBar" align="center" justify="space-between">
+      <div>
+        <slot name="left" />
+      </div>
+      <NFlex align="center">
+        <slot name="right" />
+        <TableSetting v-if="!isHideBar" v-model="settings" @realod="fetchData" @export="handleExport" />
+      </NFlex>
+    </NFlex>
+    <NDataTable
+      ref="tableRef"
+      v-bind="tableProps"
+      flex-height
+      :size="settings.size"
+      :striped="settings.striped"
+      :columns="settings.columns"
+      :pagination="pagination"
+      :loading="loading"
+      :data="list"
+      class="flex-1-hidden"
+    />
+  </NFlex>
+</template>
+
+<style lang="scss" scoped></style>

package/src/components/table/props.ts

@@ -0,0 +1,29 @@
+import type { DataTableColumn, DataTableProps } from 'naive-ui'
+import type { Recordable } from '../../const'
+
+export type TableSize = 'medium' | 'small' | 'large' | undefined
+
+export interface Props extends /* @vue-ignore */ DataTableProps {
+  size?: TableSize
+  striped?: boolean
+  fetch: FetchFn
+  hidebar?: boolean
+}
+
+export type Column = DataTableColumn<Recordable>
+export type Columns = Column[]
+
+export interface Settings {
+  size: TableSize
+  striped: boolean
+  columns: any[]
+}
+
+export interface FetchFn {
+  (pageInfo: { pageNum: number, pageSize: number }): Promise<{
+    list: any[]
+    total: number
+  }>
+}
+
+export type ExportType = 'all' | 'section'

package/src/components/table/useColumn.ts

@@ -0,0 +1,104 @@
+import type { WritableComputedRef } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { reactive, ref, toRaw, toRefs } from 'vue'
+
+export function useColumn(data: WritableComputedRef<any[]>) {
+  const metaColumns = ref<any[]>([])
+  const columnsList = ref<any[]>([])
+
+  const selectCloumn = {
+    type: 'selection',
+    key: 'selection',
+    fixed: 'left'
+  }
+
+  const state = reactive({
+    selection: false,
+    checkAll: true,
+    checkList: [] as any[],
+    defaultCheckList: [] as any[]
+  })
+
+  function init() {
+    const checkList: any = data.value.map(item => item.key)
+    state.checkList = checkList
+    state.defaultCheckList = checkList
+    state.selection = Boolean(data.value.find(item => item.type === 'selection'))
+
+    const newColumns = data.value.filter(
+      item => !['action', 'selection', 'expand'].includes(item.type) && item.title !== '操作'
+    )
+
+    if (!columnsList.value.length) {
+      columnsList.value = cloneDeep(newColumns)
+      metaColumns.value = cloneDeep(newColumns)
+    }
+  }
+
+  init()
+
+  function handleCheckAll(flag: boolean) {
+    if (flag) {
+      state.checkList = columnsList.value.map(item => item.key)
+      data.value = metaColumns.value
+    }
+    else {
+      state.checkList = []
+      data.value = []
+    }
+
+    handleSelection(state.selection)
+  }
+
+  function handleSelection(flag: boolean) {
+    data.value = data.value.filter(item => item.type !== 'selection')
+    if (flag) {
+      data.value.unshift(selectCloumn)
+    }
+  }
+
+  function resetColumns() {
+    columnsList.value = metaColumns.value
+    data.value = metaColumns.value
+    const checkList: any = data.value.map(item => item.key)
+    state.checkList = checkList
+    state.defaultCheckList = checkList
+
+    handleSelection(state.selection)
+  }
+
+  function handleChange() {
+    data.value = metaColumns.value.filter(item => state.checkList.includes(item.key))
+    handleSelection(state.selection)
+  }
+
+  // 拖拽排序
+  function draggableEnd() {
+    const newColumns = toRaw(columnsList.value)
+    columnsList.value = newColumns
+    data.value = newColumns
+    handleSelection(state.selection)
+  }
+
+  function fixedColumn(item: any, type: 'left' | 'right') {
+    const row = columnsList.value.find(i => item.key === i.key)
+    const finder = data.value.find(i => item.key === i.key)
+
+    const fixed = row.fixed === type ? false : type
+
+    row.fixed = fixed
+    finder.fixed = fixed
+  }
+
+  return {
+    ...toRefs(state),
+    init,
+    columnsList,
+    handleCheckAll,
+    handleSelection,
+    resetColumns,
+    handleChange,
+    fixedColumn,
+    draggableEnd
+  }
+}

package/src/components/upload/enum.ts

@@ -0,0 +1,21 @@
+export enum AcceptType {
+  /**
+   * 图片格式：常见光栅和矢量图像
+   */
+  Image = '.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg',
+
+  /**
+   * 视频格式：常见视频文件类型
+   */
+  Video = '.mp4,.webm,.ogg,.mov,.avi,.wmv,.flv,.mkv',
+
+  /**
+   * 音频格式：常见音频文件类型
+   */
+  Audio = '.mp3,.wav,.ogg,.aac,.flac,.m4a',
+
+  /**
+   * 文档和压缩文件：常用办公文档和压缩包
+   */
+  File = '.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.pdf,.zip,.rar,.7z,.tar,.gz'
+}

package/src/components/upload/index.ts

@@ -0,0 +1,9 @@
+import QuiUpload from './index.vue'
+
+export {
+  QuiUpload
+}
+
+export { AcceptType } from './enum'
+
+export type { Props as UploadProps } from './props'