Merge branch 'master' into star-animation

2022-11-03 15:42:03 +08:00 · 2022-11-03 15:42:03 +08:00 · 71237c1bbf
parent 55fe9599e5 8860833c0d
commit 71237c1bbf
22 changed files with 1182 additions and 300 deletions
--- a/src/components/clock/clock-style.ts
+++ b/src/components/clock/clock-style.ts
@ -1,5 +1,56 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
+   @media (prefers-color-scheme: light) {
+    :host{
+       /* 商务/组件浅/ 表盘渐变-毛玻璃 */
+       --back-clock-border: radial-gradient(
+        rgba(230, 225, 225, 0.85),
+        rgba(232, 246, 255, 1),
+        rgba(204, 211, 219, 0.85)
+      );
+      --back-clock-case: linear-gradient(
+        145.7deg,
+        rgba(179, 193, 242, 0.8) 16.24%,
+        rgba(122, 130, 161, 0.8) 94.91%
+      );
+     --back-clock-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
+     --back-clock-backdrop-filter:blur(20px);
+    }
+    .star-clock-hour-hand {
+      background: url('./src/components/clock/svg/light_hour.svg') no-repeat;
+    }
+    .star-clock-minute-hand {
+      background: url('./src/components/clock/svg/light_minute.svg') no-repeat;
+    }
+    .star-clock-second-hand {
+      background: url('./src/components/clock/svg/second.svg') no-repeat;
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    :host{
+      /* 商务/组件深/ 表盘渐变-毛玻璃 */
+      --back-clock-border: linear-gradient(
+        rgba(217, 195, 147, 1),
+        rgba(217, 201, 165, 0.45)
+      );
+      --back-clock-case: radial-gradient(
+        46.11% 46.11% at 29.45% 23.09%,
+        rgba(64, 70, 89, 0.8) 0%,
+        rgba(36, 40, 56, 0.8) 100%
+      );
+      --back-clock-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
+      --back-clock-backdrop-filter:blur(20.3871px);
+    }
+    .star-clock-hour-hand {
+      background: url('./src/components/clock/svg/dark_hour.svg') no-repeat;
+    }
+    .star-clock-minute-hand {
+      background: url('./src/components/clock/svg/dark_minute.svg') no-repeat;
+    }
+    .star-clock-second-hand {
+      background: url('./src/components/clock/svg/second.svg') no-repeat;
+    }
+  }
  * {
    margin: 0;
    padding: 0;
@ -24,10 +75,7 @@ export const sharedStyles: CSSResult = css`
    align-items: center;
    border-radius: 50%;
    flex-direction: column;
-    background: linear-gradient(
-      rgba(217, 195, 147, 1),
-      rgba(217, 201, 165, 0.45)
-    );
+    background: var(--back-clock-border);
  }
  .star-clock-case {
    position: relative;
@ -38,13 +86,9 @@ export const sharedStyles: CSSResult = css`
    display: flex;
    justify-content: center;
    align-items: center;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(20.3871px);
-    background: radial-gradient(
-      46.11% 46.11% at 29.45% 23.09%,
-      rgba(64, 70, 89, 0.8) 0%,
-      rgba(36, 40, 56, 0.8) 100%
-    );
+    box-shadow: var(--back-clock-box-shadow);
+    backdrop-filter: var(--back-clock-backdrop-filter);
+    background: var(--back-clock-case);
  }
  .star-clock-shaft {
    position: absolute;
@ -87,7 +131,8 @@ export const sharedStyles: CSSResult = css`
    position: absolute;
    bottom: 50%;
    left: 50%;
-    height: 25%;
+    width: 12px;
+    height: 90px;
    transform-origin: 0 100%;
    display: inline-block;
    transform: rotate(var(--rotateHour)) translate(-50%, 0);
@ -96,7 +141,8 @@ export const sharedStyles: CSSResult = css`
    position: absolute;
    bottom: 50%;
    left: 50%;
-    height: 35%;
+    width: 12px;
+    height: 132px;
    transform-origin: 0 100%;
    display: inline-block;
    transform: rotate(var(--rotateMinute)) translate(-50%, 0);
@ -106,39 +152,14 @@ export const sharedStyles: CSSResult = css`
    bottom: calc(50% - 17px);
    left: 50%;
    display: inline-block;
-    height: 43%;
+    width: 4px;
+    height: 160px;
    transform-origin: 0 calc(100% - 17px);
    transform: rotate(var(--rotateSecond)) translate(-50%, 0);
  }
-  /*有表盘浅色模式*/
-  .star-clock-main.light {
-    background: radial-gradient(
-      rgba(230, 225, 225, 0.85),
-      rgba(232, 246, 255, 1),
-      rgba(204, 211, 219, 0.85)
-    );
-  }
-  .light .star-clock-case {
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
-    backdrop-filter: blur(20px);
-    background: linear-gradient(
-      145.7deg,
-      rgba(179, 193, 242, 0.8) 16.24%,
-      rgba(122, 130, 161, 0.8) 94.91%
-    );
-  }
-  .light .star-clock-case .star-clock-point {
-    background: linear-gradient(
-      90deg,
-      rgba(245, 245, 245, 0.95) 0%,
-      rgba(245, 245, 245, 0.01) 100%
-    );
-  }
  /*无表盘深色模式*/
  .star-clock-case-transparent {
    display: inline-block;
-    /* width: var(--autoHeight);
-    height: var(--autoHeight); */
    width: var(--autoWidth);
    min-width: var(--autoWidth);
    height: var(--autoWidth);
@ -210,7 +231,4 @@ export const sharedStyles: CSSResult = css`
  .star-clock-case-transparent.light .star-clock-minute-hand-transparent {
    background: #ffffff;
  }
-  .star-clock-case-transparent.light .star-clock-second-hand-transparent {
-    background: #f43737;
-  }
 `
--- a/src/components/clock/clock.ts
+++ b/src/components/clock/clock.ts
@ -1,11 +1,6 @@
 import {html, LitElement, CSSResultArray, nothing} from 'lit'
 import {customElement, property, query, state} from 'lit/decorators.js'
 import {sharedStyles} from './clock-style'
-import darkHour from './svg/dark_hour.svg'
-import darkMinute from './svg/dark_minute.svg'
-import lightHour from './svg/light_hour.svg'
-import lightMinute from './svg/light_minute.svg'
-import second from './svg/second.svg'

 export enum ClockType {
  Transparent = 'transparent',
@ -17,7 +12,7 @@ export class StarClock extends LitElement {
    return [sharedStyles]
  }
  @property({type: String}) type = '' //时钟样式类型
-  @property({type: String}) mode = 'dark' //支持深色模式和浅色模式,默认背景是深色模式
+  @property({type: String}) mode = '' //支持深色模式和浅色模式,默认背景是深色模式
  @state() rotateHour = 0
  @state() rotateMinute = 0
  @state() rotateSecond = 0
@ -57,7 +52,7 @@ export class StarClock extends LitElement {
  getDialeClock() {
    return html`
      <div class="star-clock">
-        <div class="star-clock-main  ${this.mode}">
+        <div class="star-clock-main">
          <div class="star-clock-case">
            <div class="star-clock-shaft"></div>
            ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
@ -74,15 +69,9 @@ export class StarClock extends LitElement {
                </span>
              `
            )}
-            <img
-              class="star-clock-hour-hand"
-              src=${this.modeChange(this.mode).hour}
-            />
-            <img
-              class="star-clock-minute-hand"
-              src=${this.modeChange(this.mode).minute}
-            />
-            <img class="star-clock-second-hand" src=${second} />
+            <span class="star-clock-hour-hand"></span>
+            <span class="star-clock-minute-hand"></span>
+            <span class="star-clock-second-hand"></span>
          </div>
        </div>
      </div>
@ -100,19 +89,6 @@ export class StarClock extends LitElement {
        return nothing
    }
  }
-  modeChange(mode: any) {
-    if (mode === 'light') {
-      return {
-        hour: lightHour,
-        minute: lightMinute,
-      }
-    } else {
-      return {
-        hour: darkHour,
-        minute: darkMinute,
-      }
-    }
-  }
  dateUpdated(date: any) {
    let timeMy = new Date(date)
    let hour = timeMy.getHours()
@ -122,14 +98,15 @@ export class StarClock extends LitElement {
    let minuteTime = Number(minute || 0) + secondTime / 60 //获取分针时间
    let hourTime = Number(hour || 0) + minuteTime / 60 //获取时针时间
    hourTime >= 12 ? (hourTime -= 12) : '' //24小时转换为12小时
-    this.rotateSecond = (secondTime / 60) * 360
-    this.rotateMinute = (minuteTime / 60) * 360
-    this.rotateHour = (hourTime / 12) * 360
-    this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
-    this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
-    this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
+    let rotateSecond = ((secondTime / 60) * 360).toFixed(1)
+    let rotateMinute = ((minuteTime / 60) * 360).toFixed(1)
+    let rotateHour = ((hourTime / 12) * 360).toFixed(1)
+    this.style.setProperty('--rotateSecond', rotateSecond + 'deg')
+    this.style.setProperty('--rotateMinute', rotateMinute + 'deg')
+    this.style.setProperty('--rotateHour', rotateHour + 'deg')
  }
  protected firstUpdated() {
+    this.resize()
    this.dateUpdated('00:00:00')
    setInterval(() => {
      this.dateUpdated(new Date())
--- a/src/components/dock/dock.ts
+++ b/src/components/dock/dock.ts
@ -149,9 +149,6 @@ export default class StarDock extends StarBaseElement {
    target.master.remove()
    return target
  }
-  realRemoveChild = (element: HTMLElement) => {
-    element
-  }

  realInsertBefore = (element: HTMLElement, reference: HTMLElement) => {
    element.style.order = reference.style.order
@ -187,7 +184,7 @@ export default class StarDock extends StarBaseElement {

    this.recorderChild()
    if (this._children.length) {
-      this._gridSize = this._children[0].master.offsetWidth
+      this._gridSize = this._children[0].master.offsetWidth || this._gridSize
    }
  }

@ -220,6 +217,8 @@ export default class StarDock extends StarBaseElement {
    for (const child of children) {
      if (
        child.master === element ||
+        child.container === element ||
+        child.element === element ||
        child.master.compareDocumentPosition(element) & 16
      ) {
        return child
@ -280,9 +279,7 @@ export default class StarDock extends StarBaseElement {
        break

      case 'holdstart':
-        if (this._dnd.delay > 0) {
        this.startDrag()
-        }
        break

      case 'holdmove':
@ -388,17 +385,21 @@ export default class StarDock extends StarBaseElement {

  set sortMode(value) {
    if (value) {
-      this._dnd.delay = 0
      this.gestureDetector.setOption('holdThreshold', 100)
      this.setAttribute('sort-mode', '')
    } else {
-      this._dnd.delay = DEFAULT_DND_TIMEOUT
      this.gestureDetector.setOption('holdThreshold', DEFAULT_DND_TIMEOUT)
      this.removeAttribute('sort-mode')
    }
    this._sortMode = value
  }

+  get elements() {
+    return this._children.map((child) => {
+      return child.element
+    })
+  }
+
  /**
   * 处理拖拽节点进入 dock 或者在 dock 上悬浮移动时的方法
   * @param info 拖拽节点和其中心点坐标
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@ -570,6 +570,7 @@ export class GaiaContainer extends StarBaseElement {
        column: child.column,
        anchorCoordinate: child.anchorCoordinate,
        folderName: child.folderName,
+        createTime: child.createTime,
      }
    } else {
      return null
--- a/src/components/grid-container/gaia-container-child.ts
+++ b/src/components/grid-container/gaia-container-child.ts
@ -55,6 +55,8 @@ export default class GaiaContainerChild {
  center: {x: number; y: number} = {x: 0, y: 0}
  // 影子容器，用于判断旋转屏幕后能否容纳该组件
  _shadowContainer!: HTMLElement
+  // 建立时间, 用于区分不同小组件
+  createTime: number = new Date().getTime()

  constructor(
    element: HTMLElement | undefined,
--- a/src/components/grid-container/gaia-container-folder.ts
+++ b/src/components/grid-container/gaia-container-folder.ts
@ -34,7 +34,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
  constructor(manager: GaiaContainer, name?: string) {
    super(undefined, 1, 1, undefined, manager)
    this.name = this.checkAndGetFolderName(name)
-    this._id = `folder-${new Date().getTime()}`
+    this._id = `folder-${this.createTime}`
    this.init()
  }

--- a/src/components/picker/datepicker.css.ts
+++ b/src/components/picker/datepicker.css.ts
@ -113,7 +113,7 @@ export default css`
  }
  .p-select-title {
    -webkit-flex: 1;
-    font-size: 18px;
+    font-size: 28px;
    color: #333;
    text-align: center;
  }
@ -168,7 +168,6 @@ export default css`
  }
  .p-select-body {
    position: relative;
-    margin: 20px auto;
    width: 100%;
    display: -webkit-flex;
    -webkit-align-items: center;
@ -463,6 +462,13 @@ export default css`
    line-height: 30px;
    letter-spacing: 1px;
    color: #262626;
+    /* 字符间距 */
+    letter-spacing: 1px;
+  }
+
+  /* 选项栏flex布局 */
+  .p-select-btn {
+    -webkit-flex: 1;
  }

  /**图标样式 */
@ -476,7 +482,13 @@ export default css`
    border-radius: 0px;
    position: absolute;
    top: 29px;
-    left: 532px;
+    right: 40px;
+  }
+  .p-select-back-btn {
+    border-radius: 0px;
+    position: absolute;
+    top: 29px;
+    left: 40px;
  }
  /* 滚轮不选项透明化 */
  .hasSelected {
@ -484,4 +496,14 @@ export default css`
    font-size: 36px !important;
    color: #1d98f0 !important;
  }
+
+  /* 日期选择器相关 */
+  .p-select-date {
+    display: none;
+    -webkit-flex: 1;
+  }
+  .p-select-time {
+    display: flex;
+    -webkit-flex: 1;
+  }
 `
--- a/src/components/picker/datepicker.ts
+++ b/src/components/picker/datepicker.ts
@ -10,6 +10,9 @@ import datepickerCss from './datepicker.css.js'
 import check from './svg/check.svg'
 import close_lm from './svg/close_lm.svg'

+/**
+ * 属性复制函数，将除参数一外的参数值赋值给参数一对应的项
+ */
 function extend(..._args: any[]) {
  let name, options, /* src, */ copy
  let length = arguments.length
@ -29,27 +32,33 @@ function extend(..._args: any[]) {
  return target
 }

-function isPC() {
-  let userAgentInfo = navigator.userAgent
-  let Agents = [
-    'Android',
-    'iPhone',
-    'SymbianOS',
-    'Windows Phone',
-    'iPad',
-    'iPod',
-  ]
-  let flag = true
-  for (let i = 0; i < Agents.length; i++) {
-    if (userAgentInfo.indexOf(Agents[i]) > 0) {
-      flag = false
-      break
-    }
-  }
-  return flag
-}
+/**
+ * 判断设备类型：PC为true，移动设备为false
+ * 用于后续响应事件类型选择：click或touch
+ */
+// function isPC() {
+//   let userAgentInfo = navigator.userAgent
+//   let Agents = [
+//     'Android',
+//     'iPhone',
+//     'SymbianOS',
+//     'Windows Phone',
+//     'iPad',
+//     'iPod',
+//   ]
+//   let flag = true
+//   for (let i = 0; i < Agents.length; i++) {
+//     if (userAgentInfo.indexOf(Agents[i]) > 0) {
+//       flag = false
+//       break
+//     }
+//   }
+//   return flag
+// }

-// picker初始选项
+/**
+ * 定义Picker参数类型
+ */
 export interface options {
  wheels: pickerwheel[]
  container: string
@ -71,7 +80,10 @@ export interface options {
  startDate?: ''
 }

-// 时间选择器选项——此处为后续优化部分
+/**
+ * TimerPicker参数类型
+ * 后续与Picker选项结合优化为基础参数类型
+ */
 export interface opt {
  container: string
  scrollType: string
@ -89,28 +101,47 @@ export interface opt {
  cancel: Function
 }

+/**
+ * 定义选择项类型
+ * json数据对，其中value为数据值，display为显示内容
+ */
 export type itemdate = {
  value: number
  display: string
 }

-// 定义滚轮内容类型
+/**
+ * 定义滚轮内容类型
+ * infinite：是否为无限滚动
+ * selected：初始选项
+ * data：选择器选项数组
+ * label：滚轮之间间隔标志，如‘-’
+ */
 export type pickerwheel = {
-  // 无限滚动
  infinite: boolean
-  // 被选项
  selected: number
-  // 滚轮数据
  data: Array<itemdate>
  label?: string
 }

+/**
+ * 定义返回值类型
+ * value：返回值
+ * display：显示内容
+ * dataIndex：数据索引
+ */
 export type Result = {
  value: number
  display: string
  dataIndex?: number
 }

+/**
+ * 定义返回内容类型
+ * result：返回值数组
+ * scrollIdx：滚轮索引
+ * scrollEvt：滚轮事件
+ */
 export type rs = {
  result: Result[]
  scrollIdx?: number
@ -123,17 +154,22 @@ export class PickerBase extends LitElement {
    return [datepickerCss]
  }

-  // 主题样式、小时制、滚动显示模式
+  // 主题样式、小时制、滚动显示模式——后续优化
  // @property({type: String}) thememodel = ''
  // @property({type: String}) timepickertype = ''
  // @property({type: String}) scolltype = ''
+
+  // 选择器类型
  @property({type: String}) type = 'base'

+  // 目标class类名，用于初始化时锚定dom显示位置
  public target: any
-  public self = this
+
+  // item选项栏
  public clickTarget!: NodeListOf<any>
+
+  // 初始化参数
  public option: options = {
-    // 滚轮数组
    wheels: [],
    container: 'body',
    scrollType: '3d',
@ -145,31 +181,31 @@ export class PickerBase extends LitElement {
    save: function () {},
    cancel: function () {},
  }
-  // 行数、选项栏高度、选项大小？
+  // 行数、选项栏高度、预加载选项数目、3d样式下选项的倾斜角度、返回结果
  public rows = 5
  public itemHeight: number = 124
  public itemSize2d: number = 9
  public itemSize3d: number = 9
-  public scrolltest: any
-  // 3d样式下滚动时的倾斜角度
  public scroll3dAngle = 360 / (this.itemSize3d * 2)
  public rs: rs = {
    result: [],
    scrollEvt: [],
  }

-  getselectedIdx!: Function
-  generateItems!: Function
-  createEL!: Function
-  snap!: Function
-  getVal!: Function
-  destroy!: Function
-  init!: Function
+  public getselectedIdx!: Function
+  public generateItems!: Function
+  public createEL!: Function
+  public snap!: Function
+  public getVal!: Function
+  public destroy!: Function
+  public init!: Function
+
+  public weekArrayList = ['周日','周一','周二','周三','周四','周五','周六']

  constructor() {
    super()
    const _this = this
-    // 遍历获取滚轮上被选项的index值
+    // 遍历获取滚轮上初始被选项的index值
    this.getselectedIdx = function getselectedIdx(wheel: pickerwheel) {
      let index = 0
      for (let i = 0; i < wheel.data.length; i++) {
@ -182,7 +218,7 @@ export class PickerBase extends LitElement {
      }
      return index
    }
-    // 选项生成
+    // 生成选择项
    function generateItems(
      wheel: pickerwheel,
      start: number,
@ -199,7 +235,6 @@ export class PickerBase extends LitElement {
      //选中的位置
      start += selectedIdx
      end += selectedIdx
-
      for (let i = start; i <= end; i++) {
        let idx = (i < 0 ? len + (i % len) : i) % len
        value = data[idx].value
@ -208,7 +243,6 @@ export class PickerBase extends LitElement {
          let deg = 0
          let show = 'list-item'
          deg = (-(i - selectedIdx) * _this.scroll3dAngle) % 360
-
          if (!infinite) {
            if (i < 0 || i > len - 1) {
              show = 'none'
@ -218,22 +252,6 @@ export class PickerBase extends LitElement {
          }
          // 通过translateZ控制显示层级
          // 对被选中项添加类名hasSelected用于控制透明度
-          if (i == selectedIdx) {
-            html +=
-              '<li data-index="' +
-              i +
-              '" data-val="' +
-              value +
-              '" style="transform:rotateX(' +
-              deg +
-              'deg) translateZ(' +
-              (_this.itemHeight * _this.rows) / 2 +
-              'px); display: ' +
-              show +
-              '" class="hasSelected">' +
-              display +
-              '</li>'
-          } else {
          html +=
            '<li data-index="' +
            i +
@ -245,10 +263,10 @@ export class PickerBase extends LitElement {
            (_this.itemHeight * _this.rows) / 2 +
            'px); display: ' +
            show +
+            (i == selectedIdx ? '" class="hasSelected' : '') +
            '">' +
            display +
            '</li>'
-          }
        } else {
          let opacity = 1
          if (!infinite) {
@ -272,6 +290,86 @@ export class PickerBase extends LitElement {
      }
      return html
    }
+    // 更新Item对应星期数——调试阶段
+    /* function updateItems(
+      wheel: pickerwheel,
+      start: number,
+      end: number,
+      is3d: boolean
+    ) {
+      let data = wheel.data
+      let html = '',
+        value,
+        display,
+        len = data.length,
+        infinite = wheel.infinite,
+        selectedIdx = _this.getselectedIdx(wheel)
+      //选中的位置
+      start += selectedIdx
+      end += selectedIdx
+      let weekNumber = new Date(_this.year,_this.month-1,selectedIdx).getDay()
+      for (let i = start; i <= end; i++) {
+        let idx = (i < 0 ? len + (i % len) : i) % len
+        value = data[idx].value
+        display = data[idx].display
+        if (is3d) {
+          let deg = 0
+          let show = 'list-item'
+          deg = (-(i - selectedIdx) * _this.scroll3dAngle) % 360
+          if (!infinite) {
+            if (i < 0 || i > len - 1) {
+              show = 'none'
+            } else {
+              show = 'list-item'
+            }
+          }
+          // 通过translateZ控制显示层级
+          // 对被选中项添加类名hasSelected用于控制透明度
+          html +=
+            '<li data-index="' +
+            i +
+            '" data-val="' +
+            value +
+            '" style="transform:rotateX(' +
+            deg +
+            'deg) translateZ(' +
+            (_this.itemHeight * _this.rows) / 2 +
+            'px); display: ' +
+            show +
+            (i == selectedIdx ? '" class="hasSelected' : '') +
+            '">' +
+            display +
+            _this.weekArrayList[weekNumber] +
+            '</li>'
+          weekNumber = (weekNumber+1)%6
+          console.log(weekNumber)
+        } else {
+          let opacity = 1
+          if (!infinite) {
+            if (i < 0 || i > len - 1) {
+              opacity = 0
+            } else {
+              opacity = 1
+            }
+          }
+          html +=
+            '<li data-index="' +
+            i +
+            '" data-val="' +
+            value +
+            '" style="opacity: ' +
+            opacity +
+            '">' +
+            display +
+            '</li>'
+        }
+      }
+      return html
+    } */
+
+    /**
+     * 创建picker
+     */
    function createEL(wheels: pickerwheel[]) {
      let html = ''
      html +=
@ -282,23 +380,32 @@ export class PickerBase extends LitElement {
        '">'
      html += '<div class="p-select-main">'
      html += '<div class="p-select-head">'
+      html += '<div class="p-select-btn">'
      html += '<img src="' + close_lm + '" class="p-select-cancel-btn"></img>'
+      html += '<img src="' + check + '" class="p-select-back-btn" style="display: none"></img>'
+      html += '</div>'
+      
      if (_this.option.headTitle != '') {
        html +=
          '<div class="p-select-title">' + _this.option.headTitle + '</div>'
      }
+      html += '<div class="p-select-btn">'
      html += '<img src="' + check + '" class="p-select-submit-btn"></img>'
+      html += '</div>'
+      
      html += '</div>'
      html += '<div class="p-select-body">'
-      html +=
-        '<div class="p-select-line" ' +
-        (_this.option.scrollType == '3d'
-          ? 'style="transform: translateZ(' +
-            ((_this.itemHeight * _this.rows) / 2 + 2) +
-            'px)"'
-          : '') +
-        '></div>'
-      for (let i = 0; i < wheels.length; i++) {
+      // html +=
+      //   '<div class="p-select-line" ' +
+      //   (_this.option.scrollType == '3d'
+      //     ? 'style="transform: translateZ(' +
+      //       ((_this.itemHeight * _this.rows) / 2 + 2) +
+      //       'px)"'
+      //     : '') +
+      //   '></div>'
+      if(wheels.length == 5){
+        html += '<div class="p-select-date">'
+        for (let i = 0; i < 2; i++) {
          let label = wheels[i].label
          html += '<div class="p-select-item">'
          html += '<div class="p-select-col">'
@ -345,6 +452,103 @@ export class PickerBase extends LitElement {
          html += '</div>'
        }
        html += '</div>'
+        html += '<div class="p-select-time">'
+        for (let i = 2; i < 5; i++) {
+          let label = wheels[i].label
+          html += '<div class="p-select-item">'
+          html += '<div class="p-select-col">'
+          html +=
+            '<div class="p-select-list" ' +
+            (_this.option.scrollType == '3d'
+              ? 'style="transform: translateZ(' +
+                ((_this.itemHeight * _this.rows) / 2 + 3) +
+                'px)"'
+              : '') +
+            '>'
+          html += '<ul class="p-select-ul'+(i == 2 ? " p-dayitem":"") + '">'
+          html += generateItems(
+            wheels[i],
+            -_this.itemSize2d,
+            _this.itemSize2d,
+            false
+          )
+          html += '</ul>'
+          html += '</div>'
+          if (_this.option.scrollType == '3d') {
+            html += '<ul class="p-select-wheel'+(i == 2 ? " p-dayitem-wheel":"") + '">'
+            html += generateItems(
+              wheels[i],
+              -_this.itemSize3d,
+              _this.itemSize3d,
+              true
+            )
+            html += '</ul>'
+          }
+          html += '</div>'
+          if (label) {
+            html +=
+              '<div class="p-select-col p-select-label" ' +
+              (_this.option.scrollType == '3d'
+                ? 'style="transform: translateZ(' +
+                  ((_this.itemHeight * _this.rows) / 2 + 4) +
+                  'px)"'
+                : '') +
+              '>' +
+              label +
+              '</div>'
+          }
+          html += '</div>'
+        }
+        html += '</div>'
+      }else{
+        for (let i = 0; i < wheels.length; i++) {
+          let label = wheels[i].label
+          html += '<div class="p-select-item">'
+          html += '<div class="p-select-col">'
+          html +=
+            '<div class="p-select-list" ' +
+            (_this.option.scrollType == '3d'
+              ? 'style="transform: translateZ(' +
+                ((_this.itemHeight * _this.rows) / 2 + 3) +
+                'px)"'
+              : '') +
+            '>'
+          html += '<ul class="p-select-ul">'
+          html += generateItems(
+            wheels[i],
+            -_this.itemSize2d,
+            _this.itemSize2d,
+            false
+          )
+          html += '</ul>'
+          html += '</div>'
+          if (_this.option.scrollType == '3d') {
+            html += '<ul class="p-select-wheel">'
+            html += generateItems(
+              wheels[i],
+              -_this.itemSize3d,
+              _this.itemSize3d,
+              true
+            )
+            html += '</ul>'
+          }
+          html += '</div>'
+          if (label) {
+            html +=
+              '<div class="p-select-col p-select-label" ' +
+              (_this.option.scrollType == '3d'
+                ? 'style="transform: translateZ(' +
+                  ((_this.itemHeight * _this.rows) / 2 + 4) +
+                  'px)"'
+                : '') +
+              '>' +
+              label +
+              '</div>'
+          }
+          html += '</div>'
+        }
+      }
+      html += '</div>'
      html += '</div>'
      html += '<div class="p-select-mask"></div>'
      html += '</div>'
@ -354,6 +558,10 @@ export class PickerBase extends LitElement {
      node.innerHTML = html
      _this.shadowRoot!.querySelector(_this.option.container)!.appendChild(node)
    }
+
+    /**
+     * 选项边界判断，用于判断是否滑动一个选项的高度
+     */
    function snap(pos: number) {
      let pos1 = Math.round(pos),
        n1 = Math.round(pos1 % _this.itemHeight),
@ -365,6 +573,10 @@ export class PickerBase extends LitElement {
        return pos - n1 + (pos1 > 0 ? _this.itemHeight : -_this.itemHeight)
      }
    }
+
+    /**
+     * 获取处在显示位置的选项值
+     */
    function getVal(
      pos: number,
      data: itemdate[],
@ -387,7 +599,10 @@ export class PickerBase extends LitElement {
        }
      return result
    }
-    // item定位
+
+    /**
+     * 定位选项位置
+     */
    function getPosition(el: any) {
      let style = getComputedStyle(el),
        matrix = style.transform,
@ -396,6 +611,10 @@ export class PickerBase extends LitElement {
      px = Number(matrixlist[13] || matrixlist[5])
      return px
    }
+
+    /**
+     * 移除滚轮
+     */
    function destroy() {
      _this.rs = {
        result: [],
@ -408,6 +627,10 @@ export class PickerBase extends LitElement {
        box!.remove()
      }, 300)
    }
+
+    /**
+     * 滚轮类
+     */
    class Scroll {
      el: any
      wheel: any
@ -449,19 +672,19 @@ export class PickerBase extends LitElement {

      init() {
        this.Run(0, this.opt.scrollY)
-        if (isPC()) {
-          this.el.addEventListener(
-            'mousedown',
-            this.touchStart.bind(this),
-            false
-          )
-          this.el.addEventListener(
-            'mousemove',
-            this.touchMove.bind(this),
-            false
-          )
-          this.el.addEventListener('mouseup', this.touchEnd.bind(this), false)
-        } else {
+        // if (isPC()) {
+        //   this.el.addEventListener(
+        //     'mousedown',
+        //     this.touchStart.bind(this),
+        //     false
+        //   )
+        //   this.el.addEventListener(
+        //     'mousemove',
+        //     this.touchMove.bind(this),
+        //     false
+        //   )
+        //   this.el.addEventListener('mouseup', this.touchEnd.bind(this), false)
+        // } else {
          this.el.addEventListener(
            'touchstart',
            this.touchStart.bind(this),
@ -478,9 +701,8 @@ export class PickerBase extends LitElement {
            this.touchEnd.bind(this),
            false
          )
-        }
+        // }

-        // let self = this
        if (_this.option.scrollType == '3d') {
          //3d点击事件
          this.itemClick(this.opt.item3d)
@ -791,15 +1013,18 @@ export class PickerBase extends LitElement {
        this.scrollTo(_this.rs.result[this.index].value, 0)
      }
    }
+
+    /**
+     * 初始化函数
+     */
    this.init = function init(wheels: any, target: any, _isInput: any) {
      //创建DOM
      createEL(wheels)
      let el = _this.shadowRoot!.querySelectorAll('.p-select-item')
      for (let i = 0; i < el.length; i++) {
-        //滚动栏
+        // 创建滚动栏
        let scroll = new Scroll(el[i], wheels[i], i)
-
-        //初始结果
+        // 初始结果
        let res = getVal(
          scroll.opt.scrollY,
          scroll.opt.data,
@ -813,10 +1038,52 @@ export class PickerBase extends LitElement {
      //传出初始结果
      _this.option.init(_this.rs)

-      let submitBtn = _this.shadowRoot!.querySelector('.p-select-submit-btn'),
-        cancelBtn = _this.shadowRoot!.querySelector('.p-select-cancel-btn')
+      let submitBtn = _this.shadowRoot!.querySelector('.p-select-submit-btn') as HTMLElement
+      let cancelBtn = _this.shadowRoot!.querySelector('.p-select-cancel-btn') as HTMLElement
+      // 日期选择器点击标题事件
+      if(this.opt.headResult) {
+        let title = this.shadowRoot!.querySelector(
+          '.p-select-title'
+        ) as HTMLElement
+        let datepart = _this.shadowRoot!.querySelector('.p-select-date') as HTMLElement
+        let timepart = _this.shadowRoot!.querySelector('.p-select-time') as HTMLElement
+        let backbtn = _this.shadowRoot!.querySelector('.p-select-back-btn') as HTMLElement
+        // let dayitem = _this.shadowRoot!.querySelector('.p-dayitem') as HTMLElement
+        // let dayitemwheel = _this.shadowRoot!.querySelector('.p-dayitem-wheel') as HTMLElement
+        title.addEventListener(
+          'click',
+          function () {
+            datepart.style.display = 'flex'
+            backbtn.style.display = 'flex'
+            timepart.style.display = 'none'
+            cancelBtn.style.display = 'none'
+            submitBtn.style.display = 'none'
+          },
+          false
+        )
+        backbtn.addEventListener('click',function(){
+          datepart.style.display = 'none'
+          backbtn.style.display = 'none'
+          timepart.style.display = 'flex'
+          cancelBtn.style.display = 'flex'
+          submitBtn.style.display = 'flex'
+          // dayitem.innerHTML = updateItems(
+          //   wheels[2],
+          //   -_this.itemSize2d,
+          //   _this.itemSize2d,
+          //   false
+          // )
+          // dayitemwheel.innerHTML = updateItems(
+          //   wheels[2],
+          //   -_this.itemSize3d,
+          //   _this.itemSize3d,
+          //   true
+          // )
+        })
+      }
+      
      // mask = _this.shadowRoot!.querySelector('.p-select-mask')
-      submitBtn!.addEventListener(
+      submitBtn.addEventListener(
        'click',
        function () {
          let attr_rs = [],
@ -840,7 +1107,7 @@ export class PickerBase extends LitElement {
        },
        false
      )
-      cancelBtn!.addEventListener(
+      cancelBtn.addEventListener(
        'click',
        function () {
          _this.option.cancel()
@ -866,6 +1133,9 @@ export class PickerBase extends LitElement {
    }
  }

+  /**
+   * Picker初始化函数
+   */
  public initPicker(el: string, opt: any) {
    const _this = this
    this.clickTarget = _this.shadowRoot!.querySelectorAll(
@ -929,10 +1199,10 @@ export class PickerBase extends LitElement {
    scrollType: '3d',
    background: 'light',
    showLabel: true, //是否显示label
-    labelType: 'symbol', //label样式：symbol符号 text文字 split分割(需date和time同时存在)
+    labelType: 'text', //label样式：symbol符号 text文字 split分割(需date和time同时存在)
    display: 'center', //显示位置
    headResult: false, //头部显示结果信息
-    date: false,
+    date: true,
    time: true,
    beginYear: new Date().getFullYear() - 100,
    endYear: new Date().getFullYear() + 100,
@ -990,34 +1260,21 @@ export class PickerBase extends LitElement {
  ]
  // 年、月、日、时、分，数据初始化初始化
  public initDateInfo() {
-    // 年
    for (let i = this.beginYear; i <= this.endYear; i++) {
      this.yearData.push({value: i, display: this.addZero(i)})
    }
-    // 月
    for (let i = 1; i <= 12; i++) {
      this.monthData.push({value: i, display: this.addZero(i)})
    }
-    // 日
    for (let i = 1; i <= 31; i++) {
      this.dayData.push({value: i, display: this.addZero(i)})
    }
-    // 时
    for (let i = 0; i <= 23; i++) {
      this.hourData.push({value: i, display: this.addZero(i)})
    }
-    // 分
    for (let i = 0; i <= 59; i++) {
      this.minuteData.push({value: i, display: this.addZero(i)})
    }
-    // 判断显示日期/时间
-    if (!this.opt.date) {
-      this.wheels.splice(0, 3)
-    }
-    if (!this.opt.time) {
-      this.wheels.splice(3, 5)
-      this.wheels[2].label = ' '
-    }
    // Label控制
    if (!this.opt.showLabel) {
      for (let i = 0; i < this.wheels!.length; i++) {
@ -1025,22 +1282,10 @@ export class PickerBase extends LitElement {
      }
    } else {
      if (this.opt.labelType == 'text') {
-        if (this.wheels.length == 5) {
        var text = ['年', '月', '日', '时', '分', '秒']
        for (var i = 0; i < this.wheels.length; i++) {
          this.wheels[i].label = text[i]
        }
-        } else if (this.wheels.length == 3) {
-          var text = ['年', '月', '日']
-          for (var i = 0; i < this.wheels.length; i++) {
-            this.wheels[i].label = text[i]
-          }
-        } else {
-          var text = ['时', '分']
-          for (var i = 0; i < this.wheels.length; i++) {
-            this.wheels[i].label = text[i]
-          }
-        }
      }
      if (this.opt.labelType == 'split' && this.opt.date && this.opt.time) {
        for (let i = 0; i < this.wheels.length; i++) {
@ -1049,6 +1294,14 @@ export class PickerBase extends LitElement {
        this.wheels[2].label = '<div class="p-select-time-split-1"></div>'
      }
    }
+    // 判断是否显示日期/时间
+    if (!this.opt.date) {
+      this.wheels.splice(0, 3)
+    }
+    if (!this.opt.time) {
+      this.wheels.splice(3, 5)
+      // this.wheels[2].label = ' '
+    }
  }

  // 判断闰年
@ -1084,11 +1337,11 @@ export class PickerBase extends LitElement {
    if (result.length == 5) {
      this.lastValue =
        result[0].display +
-        '-' +
+        '年' +
        result[1].display +
-        '-' +
+        '月' +
        result[2].display +
-        ' ' +
+        '日' +
        result[3].display +
        ':' +
        result[4].display
@ -1102,10 +1355,18 @@ export class PickerBase extends LitElement {
      let title = this.shadowRoot!.querySelector(
        '.p-select-title'
      ) as HTMLElement
+      if(this.opt.date){
+        title.innerText = result[0].display +'年' + result[1].display + '月'
+      }else {
        title.innerText = this.lastValue
      }
+      
+    }
  }

+  /**
+   * TimePicker初始化函数
+   */
  public initTimePicker(el: string, opt: any) {
    this.initDateInfo()
    const _this = this
@ -1159,9 +1420,66 @@ export class PickerBase extends LitElement {
        false
      )
    }
-    console.log(this.wheels)
+  }
+  /**
+   * TimePicker初始化函数
+   */
+  public initDatePicker(el: string, opt: any) {
+    this.initDateInfo()
+    const _this = this
+    this.clickTarget = _this.shadowRoot!.querySelectorAll(
+      el
+    ) as NodeListOf<Element>
+    this.option = extend(this.option, opt)
+    for (let i = 0; i < this.clickTarget.length; i++) {
+      let item = this.clickTarget[i],
+        wheels = this.option.wheels,
+        isInput = item.localName == 'input' || item.localName == 'textarea',
+        attr_rs = item.getAttribute('data-value')
+      if (attr_rs) {
+        attr_rs = attr_rs.split(',')
+        let display = []
+        for (let j = 0; j < attr_rs.length; j++) {
+          wheels[j].selected = attr_rs[j]
+          let idx = this.getselectedIdx(wheels[j])
+          display.push(wheels[j].data[idx].display)
+        }
+        if (isInput) {
+          item.value = display
+        } else {
+          item.innerText = display
+        }
+      }
+      if (isInput) {
+        item.setAttribute('readonly', 'readonly')
+        item.setAttribute('unselectable', 'on')
+      }
+      item.addEventListener(
+        'click',
+        () => {
+          let target = item,
+            wheelsCopy = JSON.parse(JSON.stringify(wheels)),
+            attr_rs = target.getAttribute('data-value')
+          target.isInput = isInput
+          if (isInput) {
+            target.blur()
+          }
+          if (attr_rs) {
+            let attr_rs1 = attr_rs.split(',')
+            for (let j = 0; j < attr_rs1.length; j++) {
+              wheelsCopy[j].selected = attr_rs1[j]
+            }
+            this.init(wheelsCopy, target, isInput)
+          } else {
+            this.init(wheels, target, isInput)
+          }
+        },
+        false
+      )
+    }
  }

+  // 获取对应位置
  @query('.inp') _input: any

  firstUpdated() {
@ -1186,16 +1504,17 @@ export class PickerBase extends LitElement {
            },
          ],
        })
-      case '.js-time': {
+      case '.js-time':
+        this.opt.date = false
        return this.initTimePicker(test, {
          wheels: this.wheels,
          scrollType: this.opt.scrollType,
          background: this.opt.background,
          display: this.opt.display,
-          // headTitle: this.opt.headResult ? 1 : '',
          headTitle: '<span>新建闹钟</span>',
+          date: false,
          container: '.screen',
-          init: (rs: any) => {
+          init: (rs:any) => {
            if (this.opt.date) {
              var year = rs.result[0].value
              var month = rs.result[1].value
@ -1203,7 +1522,7 @@ export class PickerBase extends LitElement {
            }
            this.getLastVal(rs.result)
          },
-          getResult: (rs: any) => {
+          getResult: (rs:any) => {
            var n1 = this.opt.date && (rs.scrollIdx == 0 || rs.scrollIdx == 1)
            ;(this.year = rs.result[0].value), (this.month = rs.result[1].value)
            if (n1) {
@ -1224,7 +1543,45 @@ export class PickerBase extends LitElement {
            this.opt.cancel()
          },
        })
+      case '.js-date':
+        this.opt.headResult = true
+        return this.initDatePicker(test, {
+          wheels: this.wheels,
+          scrollType: this.opt.scrollType,
+          background: this.opt.background,
+          display: this.opt.display,
+          headTitle: this.opt.headResult ? 1 : '',
+          headResult: true,
+          container: '.screen',
+          init: (rs:any) => {
+            if (this.opt.date) {
+              var year = rs.result[0].value
+              var month = rs.result[1].value
+              this.bigSmallMonth(rs.scrollEvt[2], year, month)
            }
+            this.getLastVal(rs.result)
+          },
+          getResult: (rs:any) => {
+            var n1 = this.opt.date && (rs.scrollIdx == 0 || rs.scrollIdx == 1)
+            ;(this.year = rs.result[0].value), (this.month = rs.result[1].value)
+            if (n1) {
+              this.bigSmallMonth(rs.scrollEvt[2], this.year, this.month)
+            }
+            this.getLastVal(rs.result)
+          },
+          save: (_rs:any, target:any) => {
+            if (target.isInput) {
+              target.value = this.lastValue
+            } else {
+              target.innerText = this.lastValue
+            }
+
+            this.opt.save(this.lastValue, target)
+          },
+          cancel: () => {
+            this.opt.cancel()
+          },
+        })
    }
  }

@ -1237,11 +1594,20 @@ export class PickerBase extends LitElement {
    `
  }

+  public getTimePicker(): HTMLTemplateResult {
+    return html`
+      <div class="screen">
+        <div class="tit">TimePicker</div>
+        <input class="inp js-time" placeholder="请选择时间" />
+      </div>
+    `
+  }
+
  public getDatePicker(): HTMLTemplateResult {
    return html`
      <div class="screen">
        <div class="tit">DatePicker</div>
-        <input class="inp js-time" placeholder="请选择时间" />
+        <input class="inp js-date" placeholder="请选择日期" />
      </div>
    `
  }
@ -1250,6 +1616,8 @@ export class PickerBase extends LitElement {
    switch (this.type) {
      case 'base':
        return this.getBase()
+      case 'timepicker':
+        return this.getTimePicker()
      case 'datepicker':
        return this.getDatePicker()
      default:
--- a/src/components/slider/README.md
+++ b/src/components/slider/README.md
@ -4,6 +4,7 @@

 - 滑块空间
 - 滑块拖动后返回 value 值
+- `showZero()` 方法可以实现点击图标，进程条动效归零以及动效恢复点击前的状态

 ## 类型包括：

@ -24,7 +25,7 @@
 <star-slider cover="50"></star-slider>
 ```

-1. `disabled` --- 禁用滑块
+3. `disabled` --- 禁用滑块

 ```
 <star-slider disabled></star-slider>
@ -81,7 +82,7 @@
 </star-slider>
 ```

-1. 列滑块 - 下侧图标
+9. 列滑块 - 下侧图标
   - `slot="icon"` 表示图标在 slider 下部

 ```
@ -89,7 +90,3 @@
   <div slot="icon" data-icon="alarm"></div>
 </star-slider>
 ```
-
-## 后续需解决的问题：
-
- 后续用 flex 布局重新调整图标位置
--- a/src/components/slider/slider-styles.ts
+++ b/src/components/slider/slider-styles.ts
@ -75,6 +75,11 @@ export const sharedStyles: CSSResult = css`
    border-radius: 50%;
    z-index: 1;
  }
+  /*动效：进度条变为0 */
+  .showZero {
+    height: 0px;
+    transition: height 0.2s;
+  }
  p {
    position: absolute;
    right: 5px;
--- a/src/components/slider/slider.ts
+++ b/src/components/slider/slider.ts
@ -30,6 +30,7 @@ export class StarSlider extends LitElement {
  @property({type: Boolean}) disabled = false
  @property({type: Boolean}) tick = false
  @property({type: Boolean}) vertical = false
+  @property({type: Boolean}) mute = false
  @property({type: Number}) startX = 0
  @property({type: Number}) startY = 0
  @property({type: Number}) touchX = 0
@ -107,11 +108,6 @@ export class StarSlider extends LitElement {
  protected firstUpdated(
    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
  ): void {
-    // if (this.vertical) {
-    //   this.touchStart = this.touchStartVertical
-    //   this.touchEnd = this.touchEndVertical
-    //   this.touchMove = this.touchMoveVertical
-    // }
    if (this.tick) {
      var tickStep = 100 / parseInt(this.step)
      for (let i = 0; i <= tickStep; i++) {
@ -124,9 +120,12 @@ export class StarSlider extends LitElement {
  }

  private touchStart(evt: TouchEvent) {
-    if (!this.disabled) {
+    if (
+      !this.disabled &&
+      (evt.target as Element).slot !== 'l-icon' &&
+      (evt.target as Element).slot !== 'r-icon'
+    ) {
      this.touchX = evt.touches[0].clientX //手指触摸的 x 坐标
-
      // 黑色覆盖部分
      this.barX =
        this.touchX -
@ -170,7 +169,11 @@ export class StarSlider extends LitElement {
    }
  }
  private touchMove(evt: TouchEvent) {
-    if (!this.disabled) {
+    if (
+      !this.disabled &&
+      (evt.target as Element).slot !== 'l-icon' &&
+      (evt.target as Element).slot !== 'r-icon'
+    ) {
      //阻止默认行为
      evt.preventDefault()
      this.touchX = evt.touches[0].clientX //整个屏幕实时触摸的 X 坐标
@ -242,9 +245,13 @@ export class StarSlider extends LitElement {
  }

  private touchStartVertical(evt: TouchEvent) {
-    if (!this.disabled) {
+    // if ((evt.target as Element).slot === 'icon') {
+    //   this.showZero()
+    // }
+    if (!this.disabled && (evt.target as Element).slot !== 'icon') {
+      //去除点击静音键而添加的  .showZero
+      this.vProgress.classList.remove('showZero')
      this.startY = evt.touches[0].clientY //手指点下的初始 Y 坐标
-
      this.barWidth = this.vSliderBar.offsetHeight //总长度
      this.dotL = this.vSliderBar.getBoundingClientRect().bottom - this.startY //点击后的黑条长度

@ -261,7 +268,8 @@ export class StarSlider extends LitElement {
    }
  }
  private touchMoveVertical(evt: TouchEvent) {
-    if (!this.disabled) {
+    if (!this.disabled && (evt.target as Element).slot !== 'icon') {
+      this.vProgress.removeAttribute('style')
      //阻止默认行为
      evt.preventDefault()
      this.touchY = evt.touches[0].clientY //整个屏幕实时触摸的 Y 坐标
@ -283,8 +291,8 @@ export class StarSlider extends LitElement {
      this.style.setProperty('--cover-width', this.newY + 'px')
    }
  }
-  private touchEndVertical(_: TouchEvent): string | void {
-    if (!this.disabled) {
+  private touchEndVertical(evt: TouchEvent): string | void {
+    if (!this.disabled && (evt.target as Element).slot !== 'icon') {
      this.vProgress.style.setProperty('--vWidth', '8px')
      this.vSliderBar.style.setProperty('--vWidth', '8px')
      this.dispatchEvent(
@ -298,6 +306,10 @@ export class StarSlider extends LitElement {
      )
    }
  }
+  showZero() {
+    this.vProgress.classList.toggle('showZero')
+    this.vProgress.style.setProperty('transition', 'height .2s')
+  }
 }
 declare global {
  interface HTMLElementTagNameMap {
--- a/src/components/swiper/README.md
+++ b/src/components/swiper/README.md
@ -0,0 +1,6 @@
+## star-switch
+
+星光 Web 组件 --- Swiper 组件（10 月 17 日）
+
+
+
--- a/src/components/swiper/index.ts
+++ b/src/components/swiper/index.ts
@ -0,0 +1 @@
+export * from './swiper.js'
--- a/src/components/swiper/package.json
+++ b/src/components/swiper/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/swiper",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./switch.js": {
+      "default": "./switch.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/swiper/swiper-styles.ts
+++ b/src/components/swiper/swiper-styles.ts
@ -0,0 +1,128 @@
+import {css, CSSResult} from 'lit'
+export const sharedStyles: CSSResult = css`
+  .swiperfigure {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    margin: 0 auto;
+    /* background-color: gray; */
+    overflow: hidden;
+  }
+  .swiperborder {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -60%);
+    width: calc(100% * 13 / 30);
+    height: calc(100% * 13 / 30);
+    border-radius: 12px;
+    border: 3px solid #fafafa;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  ul {
+    position: absolute;
+    display: flex;
+    width: 100vw;
+    /* background-color: skyblue; */
+    padding: 0;
+    left: 0;
+    top: -8.8%;
+    right: 0;
+    bottom: 0;
+    scale: 1;
+    margin: auto;
+    list-style: none;
+    cursor: pointer;
+    overflow-x: auto;
+    overflow: hidden;
+    transform-origin: center;
+    height: 43.333333vh;
+    /* scroll-snap-type: x mandatory; */
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    // will-change: scale;
+  }
+  .previewTransition {
+    transition: scale 0.3s, transform 0.3s !important;
+  }
+  .previewEnlarge {
+    /*
+    height: 116vh;
+    transform: translateY(7%);
+    transition: height 0.3s;
+    */
+    transform: translateY(4.5%);
+    scale: 2.31;
+    z-index: 2;
+  }
+
+  /* 色块 */
+  #testimg {
+    background-color: pink;
+    height: 43.333333vh;
+    width: 43.333333vw;
+    border-radius: 10px;
+    /* */
+    font-size: 180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  li {
+    float: left;
+    width: 43.333333vw;
+    height: 100%;
+    margin-right: 10.3vw;
+    /* scroll-snap-align: center; */
+  }
+  img {
+    border-radius: 10px;
+    height: 100%;
+    transition: border-radius 0.3s;
+  }
+  .imgBorder {
+    border-radius: 0px;
+    transition: border-radius 0.3s;
+  }
+
+  .bottom {
+    width: 100%;
+    position: absolute;
+    bottom: 2.8%;
+    z-index: 100;
+  }
+
+  #submit {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    width: 43.333333vw;
+    height: 97%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+  }
+  p {
+    position: relative;
+    font-family: 'OPPOSans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    z-index: 3;
+  }
+
+  #button {
+    letter-spacing: 6px;
+    color: #f0f0f0;
+    font-size: 17px;
+    line-height: 17px;
+    top: -2px;
+  }
+  .flex {
+    display: flex;
+    justify-content: space-around;
+  }
+`
--- a/src/components/swiper/swiper.ts
+++ b/src/components/swiper/swiper.ts
@ -0,0 +1,270 @@
+import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
+import {customElement, property, query, queryAll} from 'lit/decorators.js'
+import {sharedStyles} from './swiper-styles.js'
+@customElement('star-swiper')
+export class StarLockNumber extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+  @query('#cancel') cancelButton!: HTMLParagraphElement
+  @query('#preview') previewButton!: HTMLParagraphElement
+  @query('#button') button!: HTMLParagraphElement
+  @query('.swiperfigure') swiperfigure!: HTMLDivElement
+  @query('ul')
+  cur_ul!: HTMLUListElement
+  @queryAll('li') cur_lis!: NodeListOf<HTMLLIElement>
+  @query('li') cur_li!: HTMLLIElement
+  // @queryAll('img') imgs!: NodeListOf<HTMLImageElement>
+  @queryAll('#testimg') testimgs!: NodeListOf<HTMLDivElement>
+  @query('#testimg') img!: HTMLDivElement
+  @query('.swiperborder') swiperborder!: HTMLDivElement
+  @property({type: Boolean}) enlarge = false
+  @property({type: Array}) figure_arr: any[] = []
+  @property({type: String}) cancelText = '取消'
+  @property({type: String}) previewText = '预览'
+  @property({type: String}) applicationText = '应用'
+  @property({type: Number}) index = 1 //初始化图片
+  @property({type: Number}) carouselX = 0 //轮播图到左边框的距离
+  @property({type: Number}) distanceX = 0 //轮播图移动的距离
+  @property({type: Number}) touchX = 0 //手指第一次按下的位置
+  @property({type: Number}) cur_li_margin_right =
+    0.103 * document.documentElement.offsetWidth
+  @property({type: Number}) cur_li_width =
+    0.43333333 * document.documentElement.offsetWidth
+  @property({type: Number}) initial_position = 28.4 - 53.6 * this.index //初始位置
+  @property({type: Number}) cur_ul_width = 0 //初始 ul 宽度
+
+  constructor() {
+    super()
+    console.log('constructor')
+  }
+
+  render() {
+    return html`
+      <div class="content">
+        <div class="swiperfigure">
+          <div class="swiperborder"></div>
+          <ul
+            class="list"
+            @touchstart=${this.touchStartImg}
+            @touchmove=${this.touchMoveImg}
+            @touchend=${this.touchEndImg}
+          ></ul>
+        </div>
+        <div class="bottom" @touchstart=${this.touchStartBottom}>
+          <star-button
+            class="chamfer confirm"
+            id="submit"
+            label=""
+          ></star-button>
+          <div class="flex">
+            <p id="cancel" style="left:-3.5%">${this.cancelText}</p>
+            <p id="button">${this.applicationText}</p>
+            <p id="preview" style="right:-3.5%">${this.previewText}</p>
+          </div>
+        </div>
+      </div>
+    `
+  }
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    //全面阻止移动端事件的默认行为
+    document.addEventListener('touchstart', function (ev: TouchEvent) {
+      ev.preventDefault()
+    })
+    console.log('firstUpdated')
+    //图片数组(模拟从后台获取到的图片路径)
+    var cur_img = [
+      'src/components/swiper/figure/1.png',
+      'src/components/swiper/figure/2.png',
+      'src/components/swiper/figure/3.png',
+      'src/components/swiper/figure/4.png',
+      'src/components/swiper/figure/5.png',
+    ]
+    //轮播图函数
+    this.carousel(cur_img)
+    this.figure_arr = cur_img
+    this.cur_ul.addEventListener('transitionend', () => {
+      this.enlarge
+        ? this.swiperborder.style.setProperty('visibility', 'hidden')
+        : this.swiperborder.style.setProperty('visibility', 'visible')
+    })
+    /* 确定刚开始的位置 */
+    this.cur_ul.style.setProperty('left', 28.4 - 53.6 * this.index + 'vw')
+    this.ulWidth(this.enlarge)
+  }
+  carousel(arr: any) {
+    if (this.swiperfigure) {
+      for (var i = 0; i < arr.length; i++) {
+        this.cur_ul.innerHTML += '<li><div id="testimg">' + i + '</div></li>'
+      }
+    }
+  }
+  ulWidth(enlarge: Boolean) {
+    if (enlarge) {
+      console.log('预览')
+      this.cur_ul_width =
+        (this.figure_arr.length + 1) *
+        (this.cur_li_width + this.cur_li_margin_right) *
+        2.31
+      this.cur_ul.style.setProperty('width', this.cur_ul_width + 'px')
+      this.cur_ul.style.setProperty('left', 487 - 124 * this.index + 'vw')
+    } else {
+      console.log('非预览')
+      this.cur_ul_width =
+        (this.figure_arr.length + 1) *
+        (this.cur_li_width + this.cur_li_margin_right)
+      this.cur_ul.style.setProperty('width', this.cur_ul_width + 'px')
+      this.cur_ul.style.setProperty('left', 28.4 - 53.6 * this.index + 'vw')
+      console.log('this.cur_li_width', this.cur_li_width)
+      console.log('this.cur_li_margin_right', this.cur_li_margin_right)
+      console.log('this.figure_arr.length + 1', this.figure_arr.length + 1)
+      console.log('this.cur_ul_width', this.cur_ul_width)
+    }
+  }
+
+  touchStartImg(e: TouchEvent) {
+    //去除对于left的transition效果
+    this.cur_ul.classList.remove('previewTransition')
+    this.cur_ul.style.removeProperty('transition')
+    this.touchX = e.changedTouches[0].clientX
+    this.carouselX = this.cur_ul.offsetLeft //ul到左边框的距离
+  }
+  touchMoveImg(e: TouchEvent) {
+    let nowX = e.changedTouches[0].clientX
+    this.distanceX = nowX - this.touchX //移动的距离
+    this.cur_ul.style.setProperty(
+      'left',
+      this.carouselX + this.distanceX + 'px'
+    )
+  }
+  touchEndImg(_e: TouchEvent) {
+    if (!this.enlarge) {
+      //滑动的阈值为Math.abs(25vw),小于阈值回到原位置
+      let x = 0.25 * document.documentElement.clientWidth
+      if (Math.abs(this.distanceX) > x) {
+        //index 为 0 | this.figure_arr.length-1 时的特殊处理
+        if (this.index == 0 && this.distanceX > x) {
+          this.index = 0
+        } else if (
+          this.index == this.figure_arr.length - 1 &&
+          this.distanceX < -x
+        ) {
+          this.index = this.figure_arr.length - 1
+        } else {
+          if (this.distanceX < -x) {
+            //往右滑一张图片
+            ++this.index
+          } else if (this.distanceX > x) {
+            //往左滑一张图片
+            --this.index
+          }
+        }
+      }
+      this.cur_ul.style.setProperty('left', 28.4 - 53.6 * this.index + 'vw')
+      this.cur_ul.style.setProperty(
+        'transition',
+        'left .3s cubic-bezier(.05,.62,.42,.9)'
+      )
+      console.log('index', this.index)
+      //清零移动距离
+      this.distanceX = 0
+    } else {
+      //滑动的阈值为Math.abs(25*2.31vw),小于阈值回到原位置
+      let x = 0.25 * 2.31 * document.documentElement.clientWidth
+      if (Math.abs(this.distanceX) > x) {
+        //index 为 0 | this.figure_arr.length-1 时的特殊处理
+        if (this.index == 0 && this.distanceX > x) {
+          this.index = 0
+        } else if (
+          this.index == this.figure_arr.length - 1 &&
+          this.distanceX < -x
+        ) {
+          this.index = this.figure_arr.length - 1
+        } else {
+          if (this.distanceX < -x) {
+            //往右滑一张图片
+            ++this.index
+          } else if (this.distanceX > x) {
+            //往左滑一张图片
+            --this.index
+          }
+        }
+      }
+      this.cur_ul.style.setProperty('left', 487 - 124 * this.index + 'vw')
+      this.cur_ul.style.setProperty(
+        'transition',
+        'left .3s cubic-bezier(.05,.62,.42,.9)'
+      )
+      console.log('index', this.index)
+      //清零移动距离
+      this.distanceX = 0
+    }
+  }
+
+  touchStartBottom(e: TouchEvent) {
+    if ((e.target as Element).id === 'cancel') {
+      //点击取消
+      console.log('cancel')
+      this.dispatchEvent(
+        new CustomEvent('star-swiper-cancel', {
+          detail: {
+            value: true,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      )
+    } else if ((e.target as Element).id === 'preview') {
+      //点击预览
+      this.dispatchEvent(
+        new CustomEvent('star-swiper-preview', {
+          detail: {
+            value: this.index,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      )
+      this.preview()
+    } else if (
+      (e.target as Element).id === 'button' ||
+      (e.target as Element).tagName === 'STAR-BUTTON'
+    ) {
+      //点击应用
+      console.log('submit')
+      this.dispatchEvent(
+        new CustomEvent('star-swiper-submit', {
+          detail: {
+            value: this.index,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      )
+      //预览时点击应用会保存预览变大的状态
+      this.enlarge ? this.preview() : ''
+    }
+  }
+  preview() {
+    this.enlarge = !this.enlarge
+    //隐藏取消按钮，更换预览为退出
+    if (this.enlarge) {
+      this.cancelButton.style.setProperty('visibility', 'hidden')
+      this.previewText = '退出'
+    } else {
+      this.cancelButton.style.setProperty('visibility', 'visible')
+      this.previewText = '预览'
+    }
+    this.ulWidth(this.enlarge)
+    for (let i = 0; i < this.cur_lis.length; i++) {
+      this.enlarge
+        ? this.testimgs[i].setAttribute('style', 'border-radius:0px')
+        : this.testimgs[i].setAttribute('style', 'border-radius:10px')
+    }
+    this.cur_ul.classList.add('previewTransition')
+    this.cur_ul.classList.toggle('previewEnlarge')
+    this.cur_ul.style.setProperty('transition', 'height .3s')
+  }
+}
--- a/src/components/swiper/tsconfig.json
+++ b/src/components/swiper/tsconfig.json
@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}
--- a/src/index.ts
+++ b/src/index.ts
@ -26,8 +26,8 @@ import './components/pattern-view/pattern-view'
 import './components/overlay/active-overlay'
 import './components/battery/battery'
 import './components/battery-square/battery-square'
-// import './components/picker/timepicker'
-import './components/animation/animaiton'
+import './components/picker/datepicker'
+import './components/swiper/swiper'
@customElement('settings-app')
 export class SettingsApp extends LitElement {
  @query('star-animate-section#root') private rootSection!: StarAnimateSection
--- a/src/test/panels/clock/clock.ts
+++ b/src/test/panels/clock/clock.ts
@ -25,7 +25,7 @@ export class PanelClock extends LitElement {
          <star-clock id="test1" type="diale"></star-clock>
        </div>
        <div style="width: 380px; height: 380px;overflow: hidden">
-          <star-clock id="test2" type="diale" mode="light"></star-clock>
+          <star-clock id="test2" type="diale"></star-clock>
        </div>
      </div>
      <h3
--- a/src/test/panels/picker/picker.ts
+++ b/src/test/panels/picker/picker.ts
@ -75,9 +75,15 @@ export class PanelPicker extends LitElement {
          <star-pickerbase></star-pickerbase>
        </label>

+        <label>
+          <star-pickerbase type="timepicker"></star-pickerbase>
+        </label>
+
        <label>
          <star-pickerbase type="datepicker"></star-pickerbase>
        </label>
+        
+        <div></div>
      </div>
    `
  }
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@ -37,6 +37,7 @@ import './slider/slider'
 import './switch/switch'
 import './toast/toast'
 import './weather/weather'
+import './swiper/swiper'

 import './animation/animation'
 type SEID = string
@ -145,7 +146,7 @@ export class PanelRoot extends LitElement {
      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
-        label="数字密码"
+        label="锁屏-数字密码"
        icon="lock"
        iconcolor="#EB7347"
        href="#digicipher"
@ -153,7 +154,15 @@ export class PanelRoot extends LitElement {
      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
-        label="已锁定"
+        label="锁屏-图案密码"
+        icon="lock"
+        iconcolor="#EB7347"
+        href="#pattern-view"
+      ></star-li>
+      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="锁屏-已锁定"
        icon="lock"
        iconcolor="#EB7347"
        href="#locked"
@ -161,10 +170,10 @@ export class PanelRoot extends LitElement {
      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
-        label="图案密码"
+        label="锁屏-轮播图"
        icon="lock"
        iconcolor="#EB7347"
-        href="#pattern-view"
+        href="#swiper"
      ></star-li>
      <hr />
      <star-li
--- a/src/test/panels/swiper/swiper.ts
+++ b/src/test/panels/swiper/swiper.ts
@ -0,0 +1,29 @@
+import {html, LitElement, css} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import '../icon/icon'
+
+@customElement('panel-swiper')
+export class PanelSwiper extends LitElement {
+  static styles = css`
+    .screen {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      background-color: rgb(183, 211, 227);
+      overflow: hidden;
+    }
+  `
+  render() {
+    return html`
+      <div class="screen">
+        <star-swiper></star-swiper>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-swiper': PanelSwiper
+  }
+}