components

路径：packages/shared/components
包名：@xichen-full-stack/components

基于 Element Plus 的通用 无业务 Vue 组件库，Vite library 模式打包。

依赖

使用方需安装 peer 依赖：

• vue
• element-plus（及样式 element-plus/dist/index.css）

构建

pnpm --filter @xichen-full-stack/components build
# 或 watch
pnpm --filter @xichen-full-stack/components dev

使用

import {
  XcPage,
  XcListPage,
  XcTableToolbar,
  XcDataTable,
  XcPagination,
  XcFormDialog,
  XcStatusTag,
} from '@xichen-full-stack/components'

列表示例

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  XcDataTable,
  XcListPage,
  XcPage,
  XcPagination,
  XcSearchInput,
  XcStatusTag,
  XcTableToolbar,
} from '@xichen-full-stack/components'

const loading = ref(false)
const tableData = ref<{ id: number; name: string; status: number }[]>([])
const total = ref(0)
const query = reactive({ page: 1, pageSize: 10, keyword: '' })

async function loadData() {
  loading.value = true
  try {
    // await getApi()...
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <XcPage>
    <XcListPage>
      <template #toolbar>
        <XcTableToolbar>
          <template #left>
            <XcSearchInput v-model="query.keyword" @search="loadData" />
            <el-button type="primary" @click="loadData">查询</el-button>
          </template>
          <el-button type="success">新建</el-button>
        </XcTableToolbar>
      </template>

      <XcDataTable fill-height :loading="loading" :data="tableData">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="status" label="状态" width="90">
          <template #default="{ row }">
            <XcStatusTag :value="row.status" />
          </template>
        </el-table-column>
      </XcDataTable>

      <template #footer>
        <XcPagination v-model="query" :total="total" @change="loadData" />
      </template>
    </XcListPage>
  </XcPage>
</template>

组件一览

分类	组件	说明
layout	XcPage	页面内容容器（白工作区，无卡片外框）
layout	XcListPage	列表页三层骨架（外框 + 操作区 / 内容区 / 底部区）
layout	XcPageHeader	标题 + 右侧操作区
table	XcTableToolbar	列表页工具栏
table	XcDataTable	表格 + loading + 分页插槽
table	XcPagination	统一分页
form	XcFormDialog	表单弹窗（校验 + 确定/取消）
form	XcSearchInput	搜索输入（回车触发 search）
form	XcEnumSelect	枚举下拉
form	XcSwitchStatus	启用/禁用开关
display	XcStatusTag	状态标签（可自定义 map）
display	XcDescriptionBlock	描述列表
display	XcLogPanel	等宽日志面板
display	XcOnlineTag	在线/离线等轻量标签
feedback	XcEmpty	空状态

与 admin 的区别

	components	admin
定位	dumb UI 组件	完整管理后台
依赖	vue + element-plus	router、pinia、api-client 等
使用方	任意 Vue 项目	web、desktop

管理后台业务页面请使用 @xichen-full-stack/admin；可逐步用本包组件替换重复布局。

Mobile

uni-app 暂未引用 components（小程序 DOM 限制），需单独适配。