@xmszm/core 0.0.1

package/docs/index.md

@@ -0,0 +1,25 @@
+---
+layout: home
+title: Nex Core
+hero:
+  name: Nex Core
+  text: Vue 3 + Naive UI 的表单、表格、弹窗与工具集合
+  tagline: 开箱即用的配置式表单与表格方案，内置弹窗、上传、权限、路由工具。
+  actions:
+    - theme: brand
+      text: 快速开始
+      link: /guide/quickstart
+    - theme: alt
+      text: 查看组件
+      link: /components/dataform
+features:
+  - title: 配置化表单
+    details: 通过 Options 定义字段，自动生成 rules，轻松构建复杂表单。
+  - title: 表格增强
+    details: 内置操作列创建器、排序、筛选、虚拟滚动与省略 tooltip。
+  - title: 弹窗集成
+    details: commonDialogMethod 将表单与弹窗能力合并，减少样板代码。
+  - title: 实用工具
+    details: 上传、权限、路由 meta 初始化、数组对象转换等常用方法。
+---
+

package/docs/usage.md

@@ -0,0 +1,61 @@
+# 使用指南（核心要点）
+
+## 安装
+```bash
+npm install core
+```
+
+需要同时安装的 peer 依赖（版本可按项目统一）：`vue`、`naive-ui`、`vue-router`、`dayjs`、`lodash-es`、`@vicons/ionicons5`。  
+如项目使用 `@` 别名，请确保存在对应的打包/运行时配置。
+
+## 快速开始
+```vue
+<script setup>
+import { ref } from 'vue'
+import { DataForm, DataTable, commonDialogMethod } from 'core'
+import 'core/dist/style.css' // 如需默认样式
+
+const formValue = ref({})
+const formOptions = [
+  { key: 'name', label: '名称', way: 'input', required: true },
+  { key: 'type', label: '类型', way: 'select', options: [{ label: 'A', value: 'a' }] },
+]
+
+const tableColumns = [
+  { title: '名称', key: 'name', width: 160 },
+  { title: '类型', key: 'type', width: 100 },
+]
+const tableData = ref([{ name: '示例', type: 'a' }])
+
+function openDialog() {
+  commonDialogMethod({
+    title: '示例弹窗',
+    options: formOptions,
+    valueData: { name: '张三' },
+    interfaceFn: async () => {
+      // 在此提交数据
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="p-16">
+    <DataForm v-model:value="formValue" :options="formOptions" />
+    <DataTable :data="tableData" :columns="tableColumns" style="margin-top: 12px" />
+    <button @click="openDialog">打开弹窗</button>
+  </div>
+</template>
+```
+
+## 主要导出清单
+- 组件：`DataForm`、`Options`、`CommonQuery`、`DataTable`、`OprButton`、`Pop`
+- 方法：`commonDialogMethod`、`createActionColumnJsx`、`initRules`
+- 工具：`toArray`、`ArrayToObject`、`ObjectToArray`、`customUpload`、`registryUpload`、`getFileUrl`
+- 常量：`orderEnum`、`globalLabelField`、`globalValueField`
+- 路由辅助：`initRouteMeta`、`useApiConfig`、`useAuthPermission`、`cellectChildenPermission`
+
+## 常见提示
+- 若打包时报 `@/utils/...` 未找到，请在宿主项目配置 `@` 路径或提供对应实现。
+- Vue TS 项目可直接使用内置 `types/index.d.ts` 获取基础类型提示。
+

package/examples/demo.vue

@@ -0,0 +1,224 @@
+<script setup lang="jsx">
+import { computed, onMounted, reactive } from 'vue'
+import { NButton, NCard, NSpace } from 'naive-ui'
+import {
+  commonDialogMethod,
+  CommonQuery,
+  createActionColumnJsx,
+  DataTable,
+} from 'core'
+import 'core/dist/style.css'
+
+// 查询与分页状态（可替换为业务方的 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) => {
+      // del(row.id).then(() => pageState.fetchData())
+      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: [
+          { label: '类型A', value: 'A' },
+          { label: '类型B', value: 'B' },
+        ],
+      },
+    ],
+    valueData: { ...row },
+    interfaceFn: async (data, { close }) => {
+      console.log('提交数据', data)
+      // await save(data)
+      pageState.fetchData()
+      close()
+    },
+  })
+}
+
+// 导出示例
+const exportLoading = reactive({ value: false })
+function onExport() {
+  exportLoading.value = true
+  // exportApi(listQuery).finally(() => (exportLoading.value = false))
+  setTimeout(() => (exportLoading.value = false), 800)
+}
+
+onMounted(() => pageState.fetchData())
+</script>
+
+<template>
+  <div 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"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.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;
+  height: calc(100vh - 120px); // 可按实际头/标签高度调整
+  margin: -16px;
+  padding: 24px;
+  box-sizing: border-box;
+  overflow: hidden;
+  row-gap: 20px;
+}
+</style>
+

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@xmszm/core",
+  "version": "0.0.1",
+  "description": "naiveui core 组件与工具库",
+  "license": "UNLICENSED",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:xmszm/core.git"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./types/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "types",
+    "docs",
+    "examples"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "clean": "rimraf dist",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "peerDependencies": {
+    "@vicons/ionicons5": "^0.13.0",
+    "dayjs": "^1.11.0",
+    "lodash-es": "^4.17.21",
+    "naive-ui": "^2.38.0",
+    "vue": "^3.3.0",
+    "vue-router": "^4.2.0"
+  },
+  "devDependencies": {
+    "@vicons/ionicons5": "^0.13.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "dayjs": "^1.11.0",
+    "less": "^4.2.0",
+    "lodash-es": "^4.17.21",
+    "naive-ui": "^2.38.0",
+    "rimraf": "^6.0.1",
+    "vite": "^5.4.0",
+    "vitepress": "^1.2.3",
+    "vue": "^3.3.0",
+    "vue-router": "^4.2.0"
+  },
+  "dependencies": {
+    "npm": "^11.7.0"
+  }
+}

package/src/dialog/commonDialog.jsx

@@ -0,0 +1,230 @@
+import { NButton, NSpace } from 'naive-ui'
+import { computed, reactive, ref, unref, watch } from 'vue'
+import DataForm from '../form/DataForm.vue'
+import { dialogDefaultOption } from './utils/dialog'
+import './style/commonDialog.less'
+
+/**
+ *
+ * @param {*} param
+ * @param {object} dialogProps
+ * @returns {object {cancel,model}}
+ * 集成填写表单功能的弹窗
+ */
+export function commonDialogMethod(
+  {
+    title = '',
+    noTitle = false,
+    titleFull = null,
+    options = [],
+    mode = 'add',
+    modeEnum = {},
+    labelField = 'label',
+    isNo = true,
+    formProps = {},
+    interfaceFn = null,
+    interfaceFnCancel = null,
+    valueData,
+    read,
+    isRead,
+    action = null,
+    contentStyle = {},
+    actionProps = {},
+  } = {
+    title: '自定义弹窗',
+    noTitle: false,
+    action: [],
+    options: [],
+    read: false,
+    isRead: false,
+    valueData: {},
+  },
+  dialogProps = null,
+) {
+  const defaultModeEnum = {
+    none: { sub: '', read: false },
+    create: { sub: '创建', read: false },
+    add: { sub: '添加', read: false },
+    edit: { sub: '编辑', read: false },
+    view: { sub: '查看', read: true },
+    export: { sub: '导出', read: false },
+    import: { sub: '导入', read: false },
+    delete: { sub: '删除', read: false },
+    copy: { sub: '复制', read: false },
+    ...modeEnum,
+  }
+  const formRef = ref()
+  const actionLoading = reactive([])
+  const model = ref({ ...valueData })
+  const defaultActionProps = {
+    justify: 'end',
+    wrapItem: false,
+    style: {
+      width: '100%',
+    },
+  }
+
+  const defaultButtonStyle = {
+    width: '120px',
+  }
+  const defaultAction = [
+    {
+      label: '取消',
+      props: {
+        type: 'primary',
+        ghost: true,
+      },
+      onClick: ({ cancel }) => {
+        if (interfaceFnCancel) {
+          interfaceFnCancel(unref(model), {
+            close: cancel,
+          })
+        }else {
+          cancel()
+        }
+      },
+    },
+    {
+      label: '确定',
+      valid: true,
+      onClick: async ({ cancel, hideLoading }) =>
+        interfaceFn
+          ? await interfaceFn(unref(model), {
+            close: cancel,
+            hideLoading,
+          })
+          : cancel(),
+    },
+  ]
+
+  action
+  || defaultAction.forEach((v, i) => {
+    actionLoading[i] = false
+  })
+  const titleRender
+    = typeof titleFull === 'function'
+      ? () => titleFull(defaultModeEnum[mode]?.sub)
+      : titleFull
+
+  const d = $dialog.create({
+    type: 'info',
+    ...dialogDefaultOption,
+    ...(!noTitle
+      ? { title: titleRender || (defaultModeEnum[mode]?.sub ?? '') + title }
+      : {}),
+    style: {
+      width: '500px',
+    },
+    content: () => (
+      <DataForm
+        ref={v => {
+          formRef.value = v
+        }}
+        options={options}
+        v-model:value={model.value}
+        isNo={isNo}
+        read={read ?? isRead}
+        labelField={labelField}
+        formProps={formProps}
+        contentStyle={contentStyle}
+        dialog
+      />
+    ),
+    action: !(read ?? isRead)
+      ? typeof action === 'function'
+        ? () => action({ formRef, data: unref(model), d, close: cancel })
+        : () => (
+            <NSpace
+              {...defaultActionProps}
+              {...actionProps}
+              style={{
+                ...defaultActionProps?.style,
+                ...(actionProps?.style || {}),
+              }}
+            >
+              {(action || defaultAction).map((v, i) =>
+                v?.render
+                  ? (
+                      v?.render?.()
+                    )
+                  : (
+                      <NButton
+                        type="primary" ghost={v.mode === 'cancel'} {...({ ...v?.props, ...actionProps?.buttonProps } || {})}
+                        style={{ ...defaultButtonStyle, ...(v?.style || {}) }}
+                        loading={actionLoading[i]}
+                        onClick={async () => {
+                          if (v.mode === 'cancel') {
+                            d.destroy()
+                          }
+                          else {
+                            const showLoading = () => (actionLoading[i] = true)
+                            const hideLoading = () => (actionLoading[i] = false)
+                            if (v?.loading)
+                              showLoading()
+                            try {
+                              console.log('model', unref(model));
+                              
+                              if (v?.valid)
+                                await validate()
+                              console.log(v?.valid)
+                              if (v?.valid || v?.loading)
+                                showLoading()
+                              await v?.onClick({
+                                model: unref(model),
+                                comfirm,
+                                cancel,
+                                validate,
+                                showLoading,
+                                hideLoading,
+                              })
+                            }
+                            catch (e) {
+                              console.log(e)
+                            }
+                            finally {
+                              if (v?.valid || v?.loading)
+                                hideLoading()
+                            }
+                          }
+                        }}
+                      >
+                        {v.label || ''}
+                      </NButton>
+                    ),
+              )}
+            </NSpace>
+          )
+      : null,
+    // ...readButton.value,
+    ...dialogProps,
+    class: `core-dialog ${ unref(read) ? 'core-dialog-read' : ''} ${dialogProps?.class || ''}`,
+  })
+
+  function cancel() {
+    console.log('取消', model.value)
+
+    d?.destroy()
+  }
+
+ async function validate(arr = []) {
+    console.log('开启验证')
+     await formRef.value?.valid()
+  }
+
+  async function comfirm(fn) {
+    return fn && fn()
+  }
+
+  // onBeforeUnmount(() => {
+  //   console.log('commomDialog end')
+  //   cancel()
+  // })
+
+  return {
+    cancel,
+    setValue: (v, str) =>
+      str ? (model.value[str] = v) : (model.value = { ...model.value, ...v }),
+    model: unref(model),
+    modeEnum: defaultModeEnum,
+  }
+}

package/src/dialog/style/commonDialog.less

@@ -0,0 +1,40 @@
+.core-dialog-main,
+.core-dialog-content {
+  box-sizing: border-box;
+
+  // max-height: 600px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.core-dialog-main {
+  min-height: 300px;
+}
+.core-dialog-content {
+  // border-top: 1px solid #91919147;
+}
+
+.core-dialog {
+  .n-dialog__content {
+    overflow-y: auto;
+    margin: 10px -28px 0;
+    box-sizing: border-box;
+    flex: 1;
+    border-top: 1px solid #91919147;
+    border-bottom: 1px solid #91919147;
+    padding: 28px;
+    // max-height: 500px;
+  }
+
+  .n-dialog__action {
+    padding: 20px 0 0 0;
+    box-sizing: border-box;
+  }
+}
+
+
+.core-dialog-read{
+  .n-dialog__content {
+    border-bottom: unset;
+  }
+}