@xmszm/core 0.0.1 → 0.0.3

package/examples/src/App.vue

@@ -0,0 +1,330 @@
+<script setup lang="jsx">
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { NButton, NCard, NSpace, NLayout, NLayoutHeader, NLayoutContent } from 'naive-ui'
+import {
+  commonDialogMethod,
+  CommonQuery,
+  createActionColumnJsx,
+  DataTable,
+} from '@xmszm/core'
+import '@xmszm/core/dist/style.css'
+import Introduction from './Introduction.vue'
+import AdminSystem from './AdminSystem.vue'
+
+// 从 localStorage 读取保存的视图，如果没有则默认为 'introduction'
+const getInitialView = () => {
+  const saved = localStorage.getItem('core-app-view')
+  return saved || 'introduction'
+}
+
+const currentView = ref(getInitialView())
+
+// 切换视图时保存到 localStorage
+const switchView = (view) => {
+  currentView.value = view
+  localStorage.setItem('core-app-view', view)
+  // 如果切换到 demo 视图且数据为空，则加载数据
+  if (view === 'demo' && pageState.data.length === 0) {
+    pageState.fetchData()
+  }
+}
+
+// 查询与分页状态（可替换为业务方的 useNaivePage）
+const listQuery = reactive({
+  page: 1,
+  pageSize: 10,
+  desc: true,
+  likeQuery: {
+    name1: '',
+    name2: '',
+    name3: '',
+  },
+})
+
+const pageState = reactive({
+  data: [],
+  itemCount: 0,
+  loading: false,
+  page: computed(() => listQuery.page),
+  pageSize: computed(() => listQuery.pageSize),
+  showSizePicker: true,
+  pageSizes: [10, 20, 50],
+  onUpdatePage: (p) => {
+    listQuery.page = p
+    pageState.fetchData()
+  },
+  onUpdatePageSize: (ps) => {
+    listQuery.pageSize = ps
+    listQuery.page = 1
+    pageState.fetchData()
+  },
+  fetchData: async () => {
+    pageState.loading = true
+    try {
+      // 模拟请求
+      const mock = Array.from({ length: 25 }).map((_, i) => ({
+        id: i + 1,
+        name: `名称-${i + 1}`,
+        type: i % 2 ? 'B' : 'A',
+      }))
+      pageState.itemCount = mock.length
+      const start = (listQuery.page - 1) * listQuery.pageSize
+      const end = start + listQuery.pageSize
+      pageState.data = mock.slice(start, end)
+    }
+    finally {
+      pageState.loading = false
+    }
+  },
+  search: () => {
+    listQuery.page = 1
+    pageState.fetchData()
+  },
+  reset: () => {
+    listQuery.likeQuery = { name1: '', name2: '', name3: '' }
+    listQuery.page = 1
+    pageState.fetchData()
+  },
+})
+
+// 查询项
+const keyQuery = [
+  { label: '名称1', key: 'name1', queryType: 'likeQuery' },
+  { label: '名称2', key: 'name2', queryType: 'likeQuery' },
+  { label: '名称3', key: 'name3', queryType: 'likeQuery' },
+]
+
+// 表格列与操作列
+const columns = [
+  { title: '名称', key: 'name', width: 160 },
+  { title: '类型', key: 'type', width: 120 },
+]
+const defaultColumns = []
+const selectColumns = { type: 'selection', width: '40px' }
+const opr = createActionColumnJsx([
+  {
+    label: '编辑',
+    type: 'primary',
+    onClick: row => onAdd(row, 'edit'),
+  },
+  {
+    label: '删除',
+    type: 'error',
+    mode: 'pop',
+    onClick: (row) => {
+      console.log('删除', row)
+    },
+  },
+])
+
+// 弹窗新增/编辑
+function onAdd(row = null, mode = 'add') {
+  commonDialogMethod({
+    title: '示例弹窗',
+    mode,
+    options: [
+      { key: 'name', label: '名称', way: 'input', required: true },
+      {
+        key: 'type',
+        label: '类型',
+        way: 'select',
+        options: [
+          { name: '类型A', id: 'A' },
+          { name: '类型B', id: 'B' },
+        ],
+      },
+    ],
+    valueData: { ...row },
+    interfaceFn: async (data, { close }) => {
+      console.log('提交数据', data)
+      pageState.fetchData()
+      close()
+    },
+  })
+}
+
+// 导出示例
+const exportLoading = reactive({ value: false })
+function onExport() {
+  exportLoading.value = true
+  setTimeout(() => (exportLoading.value = false), 800)
+}
+
+// 监听自定义事件，实现跨组件通信
+const handleViewChange = (e) => {
+  if (e.detail && e.detail.view) {
+    switchView(e.detail.view)
+  }
+}
+
+onMounted(() => {
+  // 如果当前视图是 demo，则加载数据
+  if (currentView.value === 'demo') {
+    pageState.fetchData()
+  }
+  // 监听自定义视图切换事件
+  window.addEventListener('view-change', handleViewChange)
+})
+
+// 清理事件监听
+onUnmounted(() => {
+  window.removeEventListener('view-change', handleViewChange)
+})
+</script>
+
+<template>
+  <AdminSystem v-if="currentView === 'admin'" />
+  <n-layout v-else class="app-layout">
+    <n-layout-header class="app-header" bordered>
+      <div class="header-content">
+        <h2 class="app-title">@xmszm/core 组件库</h2>
+        <n-space>
+          <n-button
+            type="default"
+            tag="a"
+            href="/core/"
+            target="_self"
+          >
+            返回文档
+          </n-button>
+          <n-button
+            :type="currentView === 'introduction' ? 'primary' : 'default'"
+            @click="switchView('introduction')"
+          >
+            项目介绍
+          </n-button>
+          <n-button
+            :type="currentView === 'demo' ? 'primary' : 'default'"
+            @click="switchView('demo')"
+          >
+            组件示例
+          </n-button>
+          <n-button
+            :type="currentView === 'admin' ? 'primary' : 'default'"
+            @click="switchView('admin')"
+          >
+            管理后台
+          </n-button>
+        </n-space>
+      </div>
+    </n-layout-header>
+    <n-layout-content class="app-content">
+      <Introduction v-if="currentView === 'introduction'" />
+      <div v-else class="page-box">
+        <!-- 头部筛选 -->
+        <NCard class="page-head">
+          <CommonQuery
+            :query="listQuery"
+            :options="keyQuery"
+            @submit="pageState.search()"
+            @reset="pageState.reset()"
+          />
+        </NCard>
+
+        <!-- 操作区 -->
+        <NSpace justify="space-between">
+          <NSpace>
+            <NButton type="primary" @click="onAdd()">新增</NButton>
+            <NButton type="primary" :loading="exportLoading.value" @click="onExport">
+              导出
+            </NButton>
+          </NSpace>
+        </NSpace>
+
+        <!-- 内容表格区 -->
+        <div class="page-main">
+          <DataTable
+            :data="pageState.data"
+            :pagination="pageState"
+            :columns="columns"
+            :opr-columns="opr"
+            :default-columns="defaultColumns"
+            :row-key="row => row?.id"
+            :select-columns="selectColumns"
+            :loading="pageState.loading"
+            :flex-height="false"
+          />
+        </div>
+      </div>
+    </n-layout-content>
+  </n-layout>
+</template>
+
+<style scoped lang="less">
+.app-layout {
+  height: 100vh;
+}
+
+.app-header {
+  padding: 0 24px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  background: #fff;
+}
+
+.header-content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.app-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #18a058;
+}
+
+.app-content {
+  padding: 0;
+  overflow: auto;
+}
+
+.page-head {
+  border-radius: 8px;
+  background-color: #fff;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+}
+
+.page-main {
+  flex: 0 1 auto;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  row-gap: 10px;
+
+  .n-data-table {
+    .n-data-table-th {
+      background-color: #f7f8fa;
+      border-right: 1px solid var(--n-merged-border-color);
+      white-space: break-spaces;
+    }
+    .n-data-table-th--last {
+      border-right: 1px solid transparent;
+    }
+    .n-data-table-td--last-row {
+      border-bottom: 1px solid var(--n-merged-border-color);
+    }
+  }
+}
+
+.page-box {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 64px);
+  padding: 24px;
+  box-sizing: border-box;
+  background: #f5f5f5;
+  row-gap: 20px;
+}
+</style>
+

package/examples/src/Introduction.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="introduction-page">
+    <n-card class="intro-card">
+      <template #header>
+        <div class="header-content">
+          <h1 class="title">@xmszm/core</h1>
+          <n-tag type="info" size="small">v0.0.1</n-tag>
+        </div>
+      </template>
+
+      <div class="content">
+        <n-space vertical :size="24">
+          <!-- 项目简介 -->
+          <section>
+            <h2 class="section-title">
+              <n-icon :component="BookOutline" />
+              项目简介
+            </h2>
+            <p class="description">
+              <strong>@xmszm/core</strong> 是一个基于 Vue 3 + Naive UI 的组件与工具库，提供开箱即用的配置式表单、表格、弹窗等常用组件，以及丰富的工具函数集合。
+            </p>
+          </section>
+
+          <!-- 核心特性 -->
+          <section>
+            <h2 class="section-title">
+              <n-icon :component="SparklesOutline" />
+              核心特性
+            </h2>
+            <n-grid :cols="2" :x-gap="16" :y-gap="16">
+              <n-gi>
+                <n-card class="feature-card">
+                  <n-space vertical :size="8">
+                    <div class="feature-icon">
+                      <n-icon :component="DocumentTextOutline" size="24" />
+                    </div>
+                    <h3 class="feature-title">配置化表单</h3>
+                    <p class="feature-desc">
+                      通过 Options 定义字段，自动生成 rules，轻松构建复杂表单
+                    </p>
+                  </n-space>
+                </n-card>
+              </n-gi>
+              <n-gi>
+                <n-card class="feature-card">
+                  <n-space vertical :size="8">
+                    <div class="feature-icon">
+                      <n-icon :component="GridOutline" size="24" />
+                    </div>
+                    <h3 class="feature-title">表格增强</h3>
+                    <p class="feature-desc">
+                      内置操作列创建器、排序、筛选、虚拟滚动与省略 tooltip
+                    </p>
+                  </n-space>
+                </n-card>
+              </n-gi>
+              <n-gi>
+                <n-card class="feature-card">
+                  <n-space vertical :size="8">
+                    <div class="feature-icon">
+                      <n-icon :component="SquareOutline" size="24" />
+                    </div>
+                    <h3 class="feature-title">弹窗集成</h3>
+                    <p class="feature-desc">
+                      commonDialogMethod 将表单与弹窗能力合并，减少样板代码
+                    </p>
+                  </n-space>
+                </n-card>
+              </n-gi>
+              <n-gi>
+                <n-card class="feature-card">
+                  <n-space vertical :size="8">
+                    <div class="feature-icon">
+                      <n-icon :component="ConstructOutline" size="24" />
+                    </div>
+                    <h3 class="feature-title">实用工具</h3>
+                    <p class="feature-desc">
+                      上传、权限、路由 meta 初始化、数组对象转换等常用方法
+                    </p>
+                  </n-space>
+                </n-card>
+              </n-gi>
+            </n-grid>
+          </section>
+
+          <!-- 主要组件 -->
+          <section>
+            <h2 class="section-title">
+              <n-icon :component="CubeOutline" />
+              主要组件
+            </h2>
+            <n-list>
+              <n-list-item>
+                <n-thing title="DataForm" description="配置式表单组件，支持多种输入方式">
+                  <template #avatar>
+                    <n-icon :component="DocumentTextOutline" />
+                  </template>
+                </n-thing>
+              </n-list-item>
+              <n-list-item>
+                <n-thing title="DataTable" description="增强型表格组件，支持排序、筛选、操作列">
+                  <template #avatar>
+                    <n-icon :component="GridOutline" />
+                  </template>
+                </n-thing>
+              </n-list-item>
+              <n-list-item>
+                <n-thing title="CommonQuery" description="通用查询组件，快速构建查询表单">
+                  <template #avatar>
+                    <n-icon :component="SearchOutline" />
+                  </template>
+                </n-thing>
+              </n-list-item>
+              <n-list-item>
+                <n-thing title="commonDialogMethod" description="弹窗方法，集成表单与弹窗功能">
+                  <template #avatar>
+                    <n-icon :component="SquareOutline" />
+                  </template>
+                </n-thing>
+              </n-list-item>
+              <n-list-item>
+                <n-thing title="Options" description="选项配置组件，统一管理表单字段">
+                  <template #avatar>
+                    <n-icon :component="OptionsOutline" />
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </section>
+
+          <!-- 工具函数 -->
+          <section>
+            <h2 class="section-title">
+              <n-icon :component="HammerOutline" />
+              工具函数
+            </h2>
+            <n-space :size="8" wrap>
+              <n-tag>upload</n-tag>
+              <n-tag>auth</n-tag>
+              <n-tag>config</n-tag>
+              <n-tag>array</n-tag>
+              <n-tag>object</n-tag>
+              <n-tag>time</n-tag>
+              <n-tag>ellipsis</n-tag>
+              <n-tag>initRouteMeta</n-tag>
+            </n-space>
+          </section>
+
+          <!-- 技术栈 -->
+          <section>
+            <h2 class="section-title">
+              <n-icon :component="CodeWorkingOutline" />
+              技术栈
+            </h2>
+            <n-space :size="8" wrap>
+              <n-tag type="success">Vue 3</n-tag>
+              <n-tag type="success">Naive UI</n-tag>
+              <n-tag type="info">Vite</n-tag>
+              <n-tag type="info">VitePress</n-tag>
+              <n-tag type="warning">Day.js</n-tag>
+              <n-tag type="warning">Lodash</n-tag>
+            </n-space>
+          </section>
+
+          <!-- 快速开始 -->
+          <section>
+            <h2 class="section-title">
+              <n-icon :component="RocketOutline" />
+              快速开始
+            </h2>
+            <n-card class="code-card">
+              <n-code :code="installCode" language="bash" />
+            </n-card>
+            <n-card class="code-card">
+              <n-code :code="usageCode" language="javascript" />
+            </n-card>
+          </section>
+        </n-space>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script setup>
+import {
+  BookOutline,
+  CodeWorkingOutline,
+  ConstructOutline,
+  CubeOutline,
+  DocumentTextOutline,
+  GridOutline,
+  HammerOutline,
+  OptionsOutline,
+  RocketOutline,
+  SearchOutline,
+  SparklesOutline,
+  SquareOutline,
+} from '@vicons/ionicons5'
+import {
+  NCard,
+  NCode,
+  NGrid,
+  NGi,
+  NIcon,
+  NList,
+  NListItem,
+  NSpace,
+  NTag,
+  NThing,
+} from 'naive-ui'
+
+const installCode = `npm install @xmszm/core
+
+# 或
+pnpm add @xmszm/core
+yarn add @xmszm/core`
+
+const usageCode = `import { DataForm, DataTable, CommonQuery } from '@xmszm/core'
+import '@xmszm/core/dist/style.css'
+
+// 使用组件
+<DataForm :options="formOptions" />
+<DataTable :data="tableData" :columns="columns" />
+<CommonQuery :query="query" :options="queryOptions" />`
+</script>
+
+<style scoped lang="less">
+.introduction-page {
+  padding: 24px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.intro-card {
+  max-width: 1200px;
+  margin: 0 auto;
+  border-radius: 8px;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 600;
+  color: #18a058;
+}
+
+.content {
+  padding: 8px 0;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 16px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+}
+
+.description {
+  margin: 0;
+  line-height: 1.8;
+  color: #666;
+  font-size: 15px;
+}
+
+.feature-card {
+  height: 100%;
+  transition: all 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.feature-icon {
+  color: #18a058;
+}
+
+.feature-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.feature-desc {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+}
+
+.code-card {
+  margin-top: 12px;
+}
+</style>
+

package/examples/src/main.js

@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+import naive from 'naive-ui'
+
+// 创建简单的路由配置（用于测试）
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      component: App,
+    },
+  ],
+})
+
+const app = createApp(App)
+app.use(naive)
+app.use(router)
+// 注意：permission 指令会在使用 Options 组件时自动注册，无需手动安装
+app.mount('#app')
+

package/examples/src/utils/permission.js

@@ -0,0 +1,16 @@
+/**
+ * 权限检查函数
+ * 使用方需要根据实际项目实现权限检查逻辑
+ */
+export function hasPermission(permission) {
+  // 测试用简单实现 - 实际项目中应该从 store 或 context 获取权限列表
+  console.log('检查权限:', permission)
+  
+  // 示例：从 localStorage 或 store 获取权限
+  // const permissions = JSON.parse(localStorage.getItem('permissions') || '[]')
+  // return permissions.includes(permission)
+  
+  // 测试环境：默认返回 true
+  return true
+}
+

package/examples/src/utils/request.js

@@ -0,0 +1,10 @@
+/**
+ * 请求配置
+ * 使用方需要根据实际项目配置 API 基础地址
+ */
+export const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'
+
+// 如果需要，也可以导出其他请求相关的配置
+// export const API_TIMEOUT = 10000
+// export const API_HEADERS = { 'Content-Type': 'application/json' }
+