Scc-packages-ui NPM

scc-packages-ui 组件库

v3.0.0

1、结构调整，每个组件可单独开发、维护和发布

2、添加邮件中心组件：模板配置、收件人配置、发送记录、配置邮件组

3、优化文件中心

v2.0.1

一、examples：

1、移除typescript，不再使用typescript

2、添加获取用户token流程

二、packages:

1、升级 ant-design-vue -> v4

2、移除moment相关，使用dayjs

v1.3.6

1、优化包体积

2、添加表头自定义配置

3、优化国际化配置

v1.2.21

1、优化i18n组件

2、优化上传中心、下载中心

v1.2.10

添加i18n组件

1、提供 Web UI 平台统一管理、配置国际化消息。 2、自定义配置国际化文本，字段，缩写等。

3、提供限定页面区域翻译功能，更精准控制国际化范围。

4、可在已经使用了i18n配置的基础上使用，互不影响。

v1.2.6

一、整体：

1、添加VueUse库

二、examples：

三、packages：

v1.2.5

添加docs目录，用于发布文档

一、examples

1、首页优化

2、添加展示demo

3、添加VuePress文档

4、添加antd动态图标组件

5、添加图标按钮组件

二、packages

v1.2.4

1、基础结构调整

2、Examples API工具封装

3、添加表格组件库vxe-table

4、封装LeFilter组件

5、封装LeGrid组件

v1.2.3

1、Packages添加Vitest测试：单元测试、组件测试

添加@types/node，支持使用es方式引入node.js模块

package.json添加测试脚本 test:

{
  // ...
  "scripts": {
    "test": "vitest"
  }
}

组件的单元测试 #

一个组件可以通过两种方式测试：

白盒：单元测试白盒测试知晓一个组件的实现细节和依赖关系。它们更专注于将组件进行更独立的测试。这些测试通常会涉及到模拟一些组件的部分子组件，以及设置插件的状态和依赖性。
黑盒：组件测试黑盒测试不知晓一个组件的实现细节。这些测试尽可能少地模拟，以测试组件在整个系统中的集成情况。它们通常会渲染所有子组件，因而会被认为更像一种“集成测试”。

2、添加postCss配置，更好的发挥css能力

3、Examples添加布局，菜单和组件展示，方便调试

4、添加antD UI组件库

5、添加表格组件库Surely Vue

v1.2.1

1、添加 . npmrc 配置文件，并配置shamefully-hoist：

shamefully-hoist = true

如果某些工具仅在根目录的node_modules时才有效，可将shamefully-hoist设置为true来提升那些不在根目录的 node_modules 。

2、添加 .pnpm-workspace.yaml 配置文件，将包关联起来

packages:
    - 'packages/**'
    - 'examples'

3、添加tsconfig.json配置文件，用于配置typescript

4、添加examples目录，并在该目录下创建vite+vue3项目，用于调试组件

在examples下添加vite.config.ts配置文件

在examples下添加 typings/vue-shim.d.ts 文件，用于配置解析.vue文件

declare module '*.vue' {
    import type { DefineComponent } from "vue";
    const component:DefineComponent<{},{},any>
}

5、调整packages目录下的 utils目录

6、调整packages目录下的 components目录

添加vite.config.ts配置文件, 添加打包配置

7、调整 components 下package.json ，配置打包发布相关

LenFilterPanelUpload、LenUploadCenter

Example

main.js

import sccPackages from 'scc-packages'
Vue.use(sccPackages)

参数

data() {
    return {
      filterButton: [
        { index: '1', title: 'Search', icon: 'search', callback: 'search' },
        { index: '2', title: 'Clear', icon: 'undo', callback: 'clear' },
      ],
      dropDownListApi: this.$Axios.confForm.dropDownList,
      uiFilterApi: this.$Axios.confForm.filters,
      tableHeaderApi: this.$Axios.table.headers,
      tableDataApi: this.$Axios.table.data,
      uploadProgressApi: this.$Axios.uploadCenter.uploadProgress,
      exportProgressApi: this.$Axios.table.exportProgress
    }
  },

组件

<len-filter-panel-upload
    :uiKey="$attrs.uiKey"
    :filterButton="filterButton"
    :dropDownListApi="dropDownListApi"
    :uiFilterApi="uiFilterApi"
>
</len-filter-panel-upload>

<len-upload-center
      uiKey="uploadCenter/uploadCenter_list"
      :filterButton="filterButton"
      :dropDownListApi="dropDownListApi"
      :uiFilterApi="uiFilterApi"
      :tableHeaderApi="tableHeaderApi"
      :tableDataApi="tableDataApi"
      :uploadProgressApi="uploadProgressApi"
      :exportProgressApi="exportProgressApi"
    >
</len-upload-center>