ui-ms v0.0.20

更新内容

1. socket连接: MsSocket
2. 查找上级所有父节点（树）: MsTreeFindParent
3. 数据扁平（树tree）: MsTreeToFlat
4. 扁平数据转树形数据: MsToTree
5. 内容搜索关键词高亮: MsSearchLight
6. json格式化: MsJson
7. 增加: Recorder

引入组件

1. 按需引入

import {
	MsTable, // el-table封装
	MsSearchLight, // 页面内容关键词搜索高亮
	MsJson, // json解析

	MsDB, // 浏览器indexedDB
	MsXlsx, // xlsx解析数据json
	MsAt, // ；浏览器支持at
	MsLetters, // 首字母大写
	MsWatermark, // 水印
	MsSocket, // websocket接口
	MsTreeFindParent, // 查找上级所有父节点（树）
	MsTreeToFlat, // 数据扁平（tree）
	MsToTree,  // 扁平数据转树形
	MsDebounce,  // 防抖
	MsRecorder,  // 录音
	MsStorage,  // 动态缓存
} from 'ui-ms'

2. 全量引入

main.ts
import UIMS from 'ui-ms'
app.use(UIMS)

js部分

IndexedDB: MsDB

<script setup>
const { 
  createStore, // 开启DB-> params:('myDB:库', 'test1:表')
  set, // 添加-> params:('key', val, customStore)
  get, // 获取-> params:('key', customStore)
  update,  // 更新-> params:('key', val, customStore)
  del, // 删除-> params:('key', customStore) 
  clear,  // 删除该表-> params:(customStore) 
  keys, // 获取该表所有key-> params:(customStore) 
  values, // 获取该表所有值-> params:(customStore) 
  entries, // 获取该表所有数据-> params:(customStore) 
  setMany, // 批量设置-> params:([['key', val], ['key2', val2]], customStore)
  getMany, // 批量获取-> params:(['key', 'key2'], customStore) 
  delMany, // 批量删除-> params:(['key', 'key2'], customStore) 
} = MsDB;

const customStore = createStore('myDB', 'test1'); // 打开DB 没有则使用默认 function DBSet(){ set('info', { token:'xxxxxxxxxx' }, customStore); set('username', 'test', customStore); } async function DBGet(){ const val = await get('info',customStore) console.error("🚀 ~ file: add.vue:21 ~ console.error ~ val:", val) } function DBUpdate(){ set('info', { token:'xxxxxxxxxx', name:'test' }, customStore); }

> socket连接: MsSocket
```bash
<script setup>
import { MsSocket } from "ui-ms"; 
let param =  {
    url: '/socket/lhzh/websocket',
    callback: (data)=>{},
}
let Socket = new MsSocket(param)
Socket.send(param.data) // 发送消息
Socket.close() // 关闭
</script>

Storage响应式缓存: MsStorage

<script setup>
import { MsStorage } from "ui-ms"; 
setInterval(() => {
  Storage.setItem('test', Math.random().toFixed(2) * 100)
}, 1000)

const s1 = ref(Storage.getItem('test')) || computed(() => Storage.getItem('test'))

> 查找上级所有父节点（树）: MsTreeFindParent
```bash
<script setup>
import { MsTreeFindParent } from "ui-ms"; 
let treeData = [
  {
    "id": 1,
    "label": "猫爷",
    "children": [
      {
        "id": 2,
        "label": "猫爸1",
        "children": [
          {
            "id": 3,
            "label": "猫崽1-1",
          },
        ],
      },
    ]
  },
]
let target = { "id": 3, "label": "猫崽1-1" } // 当前数据
let result = [] // 用来存储返回结果
let isValues = false  // isValues: 默认false（只返回label）, 为true时返回完整数据
MsTreeFindParent(treeData, target, result, isValues) 
</script>

数据扁平（树tree）: MsTreeToFlat

<script setup>
import { MsTreeToFlat } from "ui-ms"; 
let treeData = [
  {
    "id": 1,
    "label": "猫爷",
    "children": [
      {
        "id": 2,
        "label": "猫爸1",
        "children": [
          {
            "id": 3,
            "label": "猫崽1-1",
          },
        ],
      },
    ]
  },
]

let childkey = 'children' // childkey: 子节点key,默认children console.log(MsTreeToFlat(data, childkey))

> 扁平数据转树形数据: MsToTree
```bash
<script setup>
import { MsToTree } from "ui-ms"; 
const data=[
	{"id":"a","value":"陕西","pid":0},
	{"id":1,"value":"西安","pid":"a"},
	{"id":9,"value":"太原","pid":1},
	{"id":"b","value":"广东","pid":0},
	{"id":11,"value":"广州","pid":"b"}
]
let pidkey = 'pid' // pidkey: 父节点key,默认为pid
console.log(MsToTree(data, 0 , pidkey)); // 0: 为根节点id; 
</script>

xls/xlsx 解析: MsXlsx

<div class="m-[30px] border border-[#fff] max-w-[500px]">
  <input type="file" ref="upload" accept=".xls,.xlsx" @change="val=>onChange(val,null)" />
</div>
<script setup>
import { MsXlsx } from "ui-ms"; 
async function onChange(file,files){
    const list = await MsXlsx(file,files)
    console.error("🚀 ~ file: home.vue:22 ~ onChange ~ list:", list)
}
</script>

浏览器兼容AT: MsAt

// main.ts (全局)
import UiMs from "ui-ms"; 
UiMs.MsAt()
// 或者 (按需)
import { MsAt } from "ui-ms"; //导入
MsAt()

字母大写: MsLetters

import { MsLetters } from "ui-ms"; //导入
MsLetters()
('abcd').upperCase(num=0) // num 不传默认首字母大写,  结果为('Abcd')
('abcd efg').upperCaseAll() // 所有首字母大写,  结果为('Abcd Efg')

水印: MsWatermark

<div id="watermark">
<script setup>
import { MsWatermark } from "ui-ms"; //导入
MsWatermark({
  id:"watermark",
  html:"测试水印", // 水印html
  start_x:10,//水印起始位置x轴坐标
  start_y:10,//水印起始位置Y轴坐标
  rows:2000,//水印行数
  cols:2000,//水印列数
  space_x:50,//水印x轴间隔
  space_y:50,//水印y轴间隔
  color:'#d7d7d7',//水印字体颜色
  alpha:0.5,//水印透明度
  fontsize:'15px',//水印字体大小
  font:'微软雅黑',//水印字体
  width:500,//水印宽度
  height:50,//水印长度
  angle:15//水印倾斜度数
})
</script>

组件

内容搜索关键词高亮: MsSearchLight

<MsSearchLight :parent='contentRef' />
<div ref='contentRef'>
    测试内容。测试内容
</div>

json格式化: MsJson

<MsJson class="flex-1"
  :value="formatData"
  :expand-depth=5
  copyable
  boxed
  sort></MsJson>
<script setup>
const formatData = {
    "isRelationEvent":0,
    "a":["bb",{"cc":11}],
    "eventId":undefined,
    "eventName":true,
}
</script>

按钮: MsButton

<MsButton :size="item" type="primary" 
  v-for="item in (['large','middle','small'])"
  style="margin-right:10px" 
  :key="item">
  {{item}}
</MsButton>

表格: MsTable

<MsTable :config="table"></MsTable>
<script setup>
const table = reactive({
  header: [
    { type: 'index', label: '序号', width: 120 },
    { prop: 'name', label: '事件名称', width: 'auto' },
    // {
    //   prop: 'state',
    //   label: '事件状态',
    //   width: 300,
    //   render(row) {
    //     const status = ['待处置', '处置中', '已结束'];
    //     return h('span', {}, status[row.eventStatus]);
    //   },
    // },
    // { prop: 'operate', slot: 'operate', label: '操作', width: 300 },
  ],
  data: [],
  api: ()=>Promise.resolve({code:200,data:[{name:'1112'},{name:'22222'}]}),
  params: {},
  pagination: {
    pageSize: 10,
    currentPage: 1,
    total: 0,
  },
  dataAfter: (res, tableData) => {
    tableData.value = res.data;
    table.pageChange(1, tableData);
    table.pagination.total = res.data.length;
  },
  pageChange(index, tableData) { // 前端分页
    let { pageSize, currentPage } = table.pagination;
    table.data = tableData.value.slice(pageSize * (index - 1), pageSize * (index - 1) + pageSize);
  },
});
</script>

打包

npm run build   // 打包项目
npm run build:lib   // 打包库UI

npm切换镜像源

npm config set registry=https://registry.npmjs.org
npm config set registry=https://registry.npmmirror.com

https 启用

npm install -g mkcert

1.生成一个ca证书，mkcert create-ca，生成之后会看到一个ca.crt和ca.key文件;
2.再生成cert证书，mkcert create-cert，会在刚刚的路径下生成cert.crt和cert.key文件
3.安装：双击刚刚生成的ca.crt文件（受信任的根证书颁发机构）
4.将 cert.crt和cert.key两个拷贝到项目的src/ssl文件夹中
5.vite.config.js 配置
const fs = require('fs')
const path = require('path')
server: {
  https: {
    // 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
    cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
    key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
  }
}