# sspai-ui

## 🔧引入依赖包
```
npm install
```

## 🔧开发
```
npm run dev
```

### 🔧本地开发使用 yalc 调试
```
// 安装 yalc
npm i yalc -g
// 打包
npm run lib
// 发布依赖
yalc publish
// 更新
yalc push
// 其他项目下引用依赖
yalc add sspai-ui
```

## 📦打包 lib
```
npm run lib
```

## ⏫发布
确定可以上线的包
```
npm run release
npm publish
```

不确定是否可以上线的包需要打tag
```
npm run release -- --prerelease beta
npm publish --tag beta
```

## 📦打包 Web Component
由于经常有创建独立页的需求，且独立页开发不限框架，为了 UI 上的统一，避免重复开发通用组件，使用 [vue-custom-element](https://github.com/karol-f/vue-custom-element) 生成 wc 库，并在其他项目中无缝引用
### 使用
1. ``npm run wc``将组件打包导出至 sspai-ui-wc 目录中
2. 将 sspai-ui-wc 目录复制到对应项目中
3. 直接引用
```html
<script src="https://cdn-static.sspai.com/libs/vue@2.7.16/vue.runtime.min.js"></script>
<script src="../sspai-ui-wc/sspai-ui-wc.umd.js"></script>
<link rel="stylesheet" href="../sspai-ui-wc/sspai-ui-wc.css">
```
### 使用顶部导航栏
设置样式
```css
<style>
  body {
    --h-ssCustomHeader: 56px;
  }
  ss-custom-header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 99;
  }
  ss-custom-header button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: .2s;
  }
  ss-custom-header a {
    text-decoration: none;
  }
  ss-custom-header input {
    outline: none;
  }
</style>
```
```html
<ss-custom-header></ss-custom-header>
```
配置数据和监听事件
```javascript
const ssCustomHeader = document.querySelector('ss-custom-header')
ssCustomHeader.isLogin = false
ssCustomHeader.userInfo = null
ssCustomHeader.addEventListener('login', () => {
  window.sessionStorage.setItem('referer', window.location.pathname + window.location.search)
  openLink('/login', '_self')
})
ssCustomHeader.addEventListener('logout', () => {
  window.localStorage.setItem('ssToken', '')
  // 清除 cookies，视项目情况而定
  // Cookies.remove('sspai_jwt_token')
  // Cookies.remove('sspai_cross_token')
  window.location.reload()
})
// 图片处理依赖这两个参数，必须
window.isSupportWebp = (function () {
  const elem = document.createElement('canvas')
  if (elem.getContext && elem.getContext('2d')) {
    return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0
  }
  return false
})()
window.__CDN_HOST_ = 'https://test-images.sspai.com/'
```
参考：[会员介绍独立页](https://github.com/sspai/com_sspai_prime_s03/blob/main/public/index.html)

### 开发
入口在 packages/webComponents/index.js
直接将需要的组件引入，需要注意的是不能使用任何全局的内容包括组件、指令、方法等，需要另外设置