@wlydfe/pro-ui 0.2.19 → 0.2.21

package/docs/examples/table/title-bar.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <PlusTable
+      :columns="tableConfig"
+      :table-data="tableData"
+      :title-bar="{ title: '表格标题' }"
+      :has-toolbar="true"
+    >
+      <template #toolbar>
+        <el-button plain size="small">查看日志</el-button>
+        <el-button plain size="small">导出数据</el-button>
+        <el-button type="primary" size="small">创建应用</el-button>
+      </template>
+    </PlusTable>
+
+    <br />
+
+    <PlusTable
+      :columns="tableConfig"
+      :table-data="tableData"
+      :title-bar="{ title: '表格标题' }"
+      :has-toolbar="true"
+    >
+      <template #title>
+        <el-button type="primary" size="small">新增</el-button>
+        <el-button type="danger" size="small">批量删除</el-button>
+      </template>
+
+      <template #toolbar>
+        <el-button plain size="small">查看日志</el-button>
+        <el-button plain size="small">导出数据</el-button>
+        <el-button type="primary" size="small">创建应用</el-button>
+      </template>
+    </PlusTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTable } from 'plus-pro-components'
+import type { PlusColumn } from 'plus-pro-components'
+
+interface TableRow {
+  id: number
+  name: string
+  status: string
+  tag: string
+  time: Date
+}
+
+const TestServe = {
+  getList: async () => {
+    const data = Array.from({ length: 3 }).map((item, index) => {
+      return {
+        id: index,
+        name: index + 'name',
+        status: String(index % 3),
+        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
+        time: new Date()
+      }
+    })
+    return {
+      data: data as TableRow[]
+    }
+  }
+}
+
+const { tableData } = useTable<TableRow[]>()
+
+const tableConfig: PlusColumn[] = [
+  {
+    label: '名称',
+    prop: 'name'
+  },
+  {
+    label: '状态',
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  },
+  {
+    label: '标签',
+    prop: 'tag',
+    valueType: 'tag',
+    fieldProps: (value: string) => {
+      return { type: value }
+    }
+  },
+  {
+    label: '时间',
+    prop: 'time',
+    valueType: 'date-picker'
+  }
+]
+
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    tableData.value = data
+  } catch (error) {}
+}
+getList()
+</script>

package/docs/examples/table/tree.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <PlusTable
+      :columns="tableConfig"
+      :table-data="tableData"
+      title="树形表格"
+      :tree-props="{ children: 'children' }"
+    />
+    <PlusTable
+      :columns="tableConfig"
+      :table-data="tableDataLazy"
+      title="树形懒加载表格"
+      lazy
+      :load="load"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTable } from 'plus-pro-components'
+import type { PlusColumn } from 'plus-pro-components'
+
+interface TableRow {
+  id: number | string
+  name: string
+  status: string
+  tag: string
+  time: Date
+  hasChildren?: boolean
+  children?: TableRow[]
+}
+
+const TestServe = {
+  getList: async () => {
+    const dataLazy = Array.from({ length: 3 }).map((item, index) => {
+      return {
+        id: index,
+        name: index + 'name',
+        status: String(index % 3),
+        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
+        time: new Date(),
+        hasChildren: true,
+        children: []
+      }
+    })
+    const data = Array.from({ length: 3 }).map((item, index) => {
+      return {
+        id: index,
+        name: index + 'name',
+        status: String(index % 3),
+        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
+        time: new Date(),
+        children: Array.from({ length: 10 }).map((item, i) => ({
+          id: index + '' + i,
+          name: '小明' + i + '-' + i,
+          status: String(i % 3),
+          tag: i === 1 ? 'success' : i === 2 ? 'warning' : i === 3 ? 'info' : 'danger',
+          time: new Date()
+        }))
+      }
+    })
+    return {
+      data: data as TableRow[],
+      dataLazy: dataLazy as TableRow[]
+    }
+  }
+}
+
+const load = (row: TableRow, treeNode: unknown, resolve: (date: TableRow[]) => void) => {
+  setTimeout(() => {
+    resolve(
+      Array.from({ length: 10 }).map((item, i) => ({
+        id: 10 + i,
+        name: '小明' + i + '-' + i,
+        status: String(i % 3),
+        tag: i === 1 ? 'success' : i === 2 ? 'warning' : i === 3 ? 'info' : 'danger',
+        time: new Date()
+      }))
+    )
+  }, 1000)
+}
+
+const { tableData } = useTable<TableRow[]>()
+const { tableData: tableDataLazy } = useTable<TableRow[]>()
+
+const tableConfig: PlusColumn[] = [
+  {
+    label: '名称',
+    prop: 'name'
+  },
+  {
+    label: '状态',
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  },
+  {
+    label: '标签',
+    prop: 'tag',
+    valueType: 'tag',
+    fieldProps: (value: string) => {
+      return { type: value }
+    }
+  },
+  {
+    label: '时间',
+    prop: 'time',
+    valueType: 'date-picker'
+  }
+]
+
+const getList = async () => {
+  try {
+    const { data, dataLazy } = await TestServe.getList()
+    tableData.value = data
+    tableDataLazy.value = dataLazy
+  } catch (error) {}
+}
+getList()
+</script>

package/docs/guide/SSR.md

@@ -0,0 +1 @@
+# SSR

package/docs/guide/changelog.md

@@ -0,0 +1,16 @@
+# 更新日志
+
+在这个页面上，你只能看到我们最近更新的 30 条 更新日志。
+
+<DocsChangelog />
+
+## 版本发布策略
+
+| 发布者                 | 阶段                                  | 发布策略 | 备注                                                           |
+| ---------------------- | ------------------------------------- | -------- | -------------------------------------------------------------- |
+| PlusProComponents 团队 | 快速开发迭代阶段                      | 每周     | 关键的 bug 修复将需要热修复，所以实际发布版本可能每周超过 1 次 |
+| PlusProComponents 团队 | 功能稳定阶段 <el-tag>current</el-tag> | 每月     | 关键的 bug 修复将需要热修复，所以实际发布版本可能每月超过 1 次 |
+
+## 推荐版本
+
+推荐选择[release](https://github.com/plus-pro-components/plus-pro-components/releases)版本，功能稳定。参考[release 版本列表](https://github.com/plus-pro-components/plus-pro-components/releases)。

package/docs/guide/contribution.md

@@ -0,0 +1,106 @@
+# 贡献指南
+
+### 介绍
+
+感谢您使用 PlusProComponents。
+
+以下是关于向 PlusProComponents 提交反馈或代码的指南。在向 PlusProComponents 提交 issue 或者 PR 之前，请先花几分钟时间阅读以下内容。
+
+### Issue 规范
+
+- 遇到问题时，请先确认这个问题是否已经在 issue 中有记录或者已被修复。
+- 提 issue 时，请用简短的语言描述遇到的问题，并添加出现问题时的**环境** 和复现步骤，必要时需提供可复现问题最小代码仓库。
+
+  #### 环境包含
+
+  - `浏览器` 版本
+  - `操作系统` 版本
+  - `node` 版本
+  - `vite`/ `webpack` / `Rollup` / `Vue CLI` 构建工具版本， 是否使用 `CDN`
+  - `vue` 版本
+  - `element-plus` 版本
+  - `plus-pro-components` 版本
+
+## 参与开发
+
+### [参考本地开发](/guide/dev.html)
+
+### 代码规范
+
+在编写代码时，请注意：
+
+- 确保代码可以通过仓库的 ESLint 校验。
+- 确保代码格式是规范的，使用 prettier 进行代码格式化。
+- 确保没有使用超出兼容性范围的 API.
+
+## 提交 Pull Request
+
+### 参考指南
+
+如果你是第一次在 GitHub 上提 Pull Request ，可以阅读下面这两篇文章来学习：
+
+- [第一次参与开源](https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md)
+- [如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629)
+
+### Pull Request 规范
+
+在提交 Pull Request 时，请注意：
+
+- 保持你的 PR 足够小，一个 PR 只解决单个问题或添加单个功能。
+- 当新增组件或者修改原有组件时，记得增加或者修改对应的单元测试，保证代码的稳定。
+- 在 PR 中请添加合适的描述，并关联相关的 Issue。
+
+### Pull Request 流程
+
+1. fork 主仓库，如果已经 fork 过，请同步主仓库的最新代码。
+2. 基于 fork 后仓库的 dev 分支新建一个分支，比如 `feature/docs`。
+3. 在新分支上进行开发，开发完成后，提 Pull Request 到主仓库的 dev 分支。
+4. Pull Request 会在 Review 通过后被合并到主仓库。
+5. 等待 PlusProComponents 发布新版本，一般是每周一次。
+
+### Pull Request 标题格式
+
+Pull Request 的标题应该遵循以下格式：
+
+```bash
+type(ComponentName?)：commit message
+```
+
+示例：
+
+- docs: fix typo in quickstart
+- build: optimize build speed
+- fix(component[form-item]): incorrect style
+- feat(component[table]): add color prop
+
+可选的类型：
+
+- feat
+- fix
+- build
+- docs
+- test
+- style
+- ci
+- refactor
+- perf
+- chore
+- revert
+
+### 同步最新代码
+
+提 Pull Request 前，请依照下面的流程同步主仓库的最新代码：
+
+```bash
+# 添加主仓库到 remote
+git remote add upstream https://github.com/plus-pro-components/plus-pro-components.git
+
+# 拉取主仓库最新代码
+git fetch upstream
+
+# 切换至 dev 分支
+git checkout dev
+
+# 合并主仓库代码
+git merge upstream/dev
+```

package/docs/guide/dark-mode.md

@@ -0,0 +1,4 @@
+# 暗黑模式
+
+支持 element-plus 的暗黑模式，点击本网站右上角 **切换暗黑模式** 按钮，去[组件](/components/layout.html)页面即可体验。
+[element-plus 暗黑模式文档](https://element-plus.org/zh-CN/guide/dark-mode.html)。

package/docs/guide/design.md

@@ -0,0 +1,3 @@
+# 组件设计
+
+<iframe src="/design.pdf"  class="design-iframe"   ></iframe>

package/docs/guide/dev.md

@@ -0,0 +1,217 @@
+# 本地开发指南
+
+## 开发环境
+
+| 类型          | 名称              | 版本           |
+| ------------- | ----------------- | -------------- |
+| 操作系统      | Windows 11 专业版 | 22000.1098     |
+| 开发工具      | Microsoft VS Code | 1.79.0         |
+| 调试工具      | Google Chrome     | 104.0.5112.102 |
+| 代码版本控制  | git               | 2.37.0         |
+| 语言环境      | node              | 18.19.0        |
+| 包管理器      | npm               | 8.19.2         |
+| 包管理器      | yarn              | 1.22.19        |
+| 包管理器      | pnpm              | 8.15.7         |
+| node 版本管理 | nvm               | 1.1.7          |
+| npm 源管理    | nrm               | 1.2.5          |
+
+## 项目结构
+
+```sh
+
+├── CHANGELOG.md            #changelog文件
+├── commitlint.config.js    #commitlint配置
+├── docs                    #文档所在目录
+|  ├── .vitepress           #vitepress配置
+|  ├── components           #组件文档
+|  ├── examples             #组件文档对应的vue示例
+|  ├── deploy.sh            #文档部署脚本
+|  ├── guide                #快速开始文档
+|  ├── index.md             #文档首页
+|  ├── package.json
+|  ├── public
+|  └── utils
+├── global.d.ts              #全局组件ts提示
+├── LICENSE                  #LICENSE 文件
+├── package.json
+├── packages                 #包文件夹
+|  ├── components            #主组件
+|  ├── constants             #固定变量
+|  ├── eslint-config         #eslint配置独立
+|  ├── hooks                 #hooks
+|  ├── locale                #国际化
+|  ├── play                  #组件实时预览
+|  ├── plus-pro-components   #主包入口
+|  ├── utils                 #工具
+|  ├── theme-chalk           #样式
+|  └── types                 #公共TS类型
+├── pnpm-lock.yaml
+├── pnpm-workspace.yaml      #工作空间配置
+├── README.md                #项目介绍
+├── scripts                  #脚本
+|  ├── build                 #主包打包
+|  ├── changelog             #changelog
+|  ├── create-component      #新增组件
+|  ├── release               #整包release
+|  ├── utils                 #公共打包工具
+|  ├── commit.sh             #代码提交
+|  └── publish.sh            #整包发布
+├── tsconfig.base.json       #tsconfig配置
+├── tsconfig.json
+├── tsconfig.node.json
+├── tsconfig.vitest.json
+├── tsconfig.web.json
+├── typings                   #全局d.ts
+|  └── env.d.ts
+└── vitest.config.ts          #vitest配置
+
+```
+
+## 克隆仓库
+
+```sh
+git clone https://github.com/plus-pro-components/plus-pro-components.git
+```
+
+如果 GitHub 克隆速度较慢，你也可以直接克隆 plus-pro-components 在 gitee 上的[镜像仓库](https://gitee.com/plus-pro-components/plus-pro-components.git)，同步可能会存在时差。
+
+```bash
+git clone https://gitee.com/plus-pro-components/plus-pro-components.git
+```
+
+## 启动项目
+
+```sh
+pnpm i
+```
+
+## 文档网站预览
+
+```sh
+pnpm docs:dev
+```
+
+## 本地开发
+
+```sh
+pnpm dev
+```
+
+## 添加新的组件步骤
+
+例如现在需要新增一个新的组件 组件名叫 `table` 对应的 vue 组件名称叫 `PlusTable`（所有组件名字以`Plus` 开头，组件的基本代码全部会自动生成。）
+
+### 1. 组件创建
+
+- 执行创建组件脚本
+
+  ```sh
+  pnpm run new table
+  ```
+
+- 确定
+
+  ```
+  Confirm create table component? yes
+  ```
+
+- 此时 packages/components/table 文件夹已经生成并且有了如下目录
+
+  ```sh
+
+  ├── index.ts          #主文件
+  ├── src
+  |  └── index.vue      #组件实际代码
+  ├── style
+  |  ├── index.ts       #组件按需加载 scss 样式，包含自身样式和外部样式
+  |  └── css.ts         #组件按需加载 css 样式，包含自身样式和外部样式
+  └── __tests__
+    └── table.test.tsx  #单元测试代码  主要测试组件中的 props、event、slots、样式、CSS class 名、生命周期钩子，和其他相关的问题。
+  ```
+
+  然后添加组件实际代码和对应的单元测试
+
+- 导出组件
+  packages/components/index.ts 新增
+
+  ```ts
+  export * from './table'
+  ```
+
+- 在 packages/plus-pro-components/component.ts 添加新增的组件 `PlusTable`
+
+  ```js
+  import { PlusTable } from '@wlydfe/pro-ui-components/table'
+
+  const plugins: Component[] = [PlusDialog, PlusPagination, PlusTable]
+  ```
+
+- 在 `global.d.ts` 添加类型
+
+  ```ts{3}
+  declare module '@vue/runtime-core' {
+    export interface GlobalComponents {
+      PlusTable: typeof import('plus-pro-components')['PlusTable']
+    }
+  }
+  ```
+
+### 2. 预览组件
+
+- 执行下面的命令
+
+  ```sh
+  pnpm run dev
+  ```
+
+- 打开 packages/play/src/views/table.vue(文件自动生成) 里面新增如下代码
+
+  ```html
+  <template>
+    <PlusTable />
+  </template>
+  ```
+
+- 打开终端地址即可预览组件
+
+### 3. 组件的测试 单元测试 写完之后 执行
+
+```sh
+pnpm run test
+```
+
+查看测试覆盖率
+
+```sh
+pnpm run test:coverage
+```
+
+### 4. 文档的添加
+
+- 执行打包命令
+
+```sh
+pnpm run build
+```
+
+- 在 docs/components 文件下， 新建文件 table.md 内容写法参考之前的
+
+- 在 docs/文件夹下执行 `pnpm run start` 后的地址即可预览已打包的本地组件
+
+- 在 docs/文件夹下执行 `pnpm run debug` 后的地址即可实时预览正在开发的本地组件
+
+## 代码提交
+
+```sh
+pnpm run commit  # 全部提交
+```
+
+::: tip 提示
+**如果需要分次提交** 可以先执行 `git add  ./x/x `，再执行`pnpm run gitcz`，最后执行 `git push origin dev`(或者其他分支)。
+:::
+
+## 打包组件
+
+```sh
+ pnpm run build
+```