(feature&update&improve)在star-li中增加type='embed-checkbox'支持, 添加checkbox组件, 优化star-li生成结构

2022-11-21 18:55:23 +08:00 · 2022-11-21 18:55:23 +08:00 · e5ca6208de
parent 6b69bb6b5a
commit e5ca6208de
13 changed files with 395 additions and 218 deletions
--- a/src/components/base/auto-px-style.ts
+++ b/src/components/base/auto-px-style.ts
@ -34,6 +34,7 @@ export const autoPxStyle: CSSResult = css`
    --auto-37_33px: calc(37.33px / var(--hostDevicePixelRatio));
    --auto-38px: calc(38px / var(--hostDevicePixelRatio));
    --auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
+    --auto-38_5px: calc(38.5px / var(--hostDevicePixelRatio));
    --auto-40px: calc(40px / var(--hostDevicePixelRatio));
    --auto-42px: calc(42px / var(--hostDevicePixelRatio));
    --auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));
--- a/src/components/base/star-base-element.ts
+++ b/src/components/base/star-base-element.ts
@ -1,4 +1,4 @@
-import {CSSResultArray, LitElement, ReactiveElement} from 'lit'
+import {CSSResult, CSSResultArray, LitElement, ReactiveElement} from 'lit'
 import GestureDetector, {
  GestureEvents,
  GestureOptions,
@ -47,6 +47,7 @@ function handleHover(e: Event) {
       * }
       */
      case 'STAR-BUTTON':
+      case 'STAR-CHECKBOX':
      case 'STAR-SWITCH':
        e.stopImmediatePropagation()
        currentHoverTarget = target as StarBaseElement
@ -176,6 +177,15 @@ export class StarBaseElement extends StarMixin(LitElement) {
    this._l10n && l10nHelper.unobserve(this)
  }

+  emit(customEventName: string) {
+    this.dispatchEvent(
+      new Event(customEventName, {
+        bubbles: true,
+        composed: false,
+      })
+    )
+  }
+
  /**
   * 启动手势监听框架
   */
@ -218,7 +228,7 @@ export class StarBaseElement extends StarMixin(LitElement) {
    return l10nHelper.get(id, ctxdata)
  }

-  public static get styles(): CSSResultArray {
+  public static get styles(): CSSResult | CSSResultArray {
    return []
  }
 }
--- a/src/components/checkbox/README.md
+++ b/src/components/checkbox/README.md
@ -1 +1,30 @@
-Checkbox 复选框
+# Checkbox 复选框
+
+## 使用形式
+
+作为 slot 在<star-li>和<star-card>中使用
+
+```
+┌────────────────────────┐
+│ <star-li>              │
+│  ┌────────┐┌────────┐  │
+│  │        ││        │  │
+│  │Checkbox││Checkbox│  │
+│  │        ││        │  │
+│  └────────┘└────────┘  │
+└────────────────────────┘
+
+┌──────────────────────┐
+│ <star-card>          │
+│  ┌────────┬───────┐  │
+│  │        │       │  │
+│  │Checkbox│ label │  │
+│  │        │       │  │
+│  └────────┴───────┘  │
+└──────────────────────┘
+```
+
+```html
+<star-checkbox value="WLAN" checked label="wlan"></star-checkbox>
+<star-checkbox value="WLAN" checked label="移动数据"></star-checkbox>
+```
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@ -0,0 +1,72 @@
+import {
+  css,
+  customElement,
+  html,
+  ifDefined,
+  property,
+  eventOptions,
+  CSSResult,
+  StarBaseElement,
+} from '@star-web-components/base'
+
+@customElement('star-checkbox')
+export class StarCheckbox extends StarBaseElement {
+  @property({type: Boolean, reflect: true}) checked!: boolean
+
+  @property({type: String}) label!: string
+
+  @eventOptions({capture: true}) _onClick(e: Event) {
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    this.checked = !this.checked
+    this.emit('change')
+    this.emit(this.checked === true ? 'enabled' : 'disabled')
+  }
+
+  constructor() {
+    super()
+    this.addEventListener('click', this._onClick)
+  }
+
+  render() {
+    return html`
+      <a>${ifDefined(this.label)}</a>
+    `
+  }
+
+  static override get styles(): CSSResult {
+    return css`
+      a {
+        display: flex;
+        text-decoration: none;
+        width: 100%;
+        -webkit-tap-highlight-color: transparent;
+      }
+      a::before {
+        content: ' ';
+        width: var(--auto-30px);
+        height: var(--auto-30px);
+        box-sizing: border-box;
+        border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
+        border-radius: var(--auto-5px);
+      }
+      :host([checked]) a::before {
+        content: 'tick';
+        color: #fff;
+        border: unset;
+        text-align: center;
+        font-weight: bold;
+        font-family: 'star-icons';
+        font-size: var(--auto-22px);
+        line-height: var(--auto-30px);
+        background: var(--theme-blue);
+      }
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-checkbox': StarCheckbox
+  }
+}
--- a/src/components/checkbox/index.ts
+++ b/src/components/checkbox/index.ts
@ -0,0 +1 @@
+export * from './checkbox.js'
--- a/src/components/checkbox/package.json
+++ b/src/components/checkbox/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/checkbox",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./checkbox.js": {
+      "default": "./checkbox.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/checkbox/tsconfig.json
+++ b/src/components/checkbox/tsconfig.json
@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts", "../base/*.ts"]
+}
--- a/src/components/li/README-settings.md
+++ b/src/components/li/README-settings.md
@ -12,7 +12,7 @@
 │      │                                   │ / ┌──────────────────────────┐│    │
 │      │                                   │/  │  Other StarWebComponents ││    │
 │      │                                  /│\  ├──────────────────────────┤│    │
-│      │ ┌─────────┐ ┌───────┬────────┐  / │ \ │ Switch,Raido,Button(text)││    │
+│      │ ┌─────────┐ ┌───────┬────────┐  / │ \ │ Button(text), Switch     ││    │
 │      │ │         │ │ Label │ Square │ /  │  \│ Selector(Value/Date/Time)││    │
 │      │ │(App)Icon│ ├───────┴────────┤/   │   │ ...                      ││    │
 │ STAR │ │         │ │   Description  |\   │   └──────────────────────────┘│    │
@ -22,8 +22,8 @@
 │      │                                   │                 │      SLOT     ││ │
 │      │                                   │                 ├───────────────┤│ │
 │      │                                   │┌─────────┐      │ Button(info)  ││ │
-│      │                                   ││         │      │ Input         |│ │
-│      │                                   ││SplitLine│------| CheckboxGroup ││ │
+│      │                                   ││         │      │ Checkbox      |│ │
+│      │                                   ││SplitLine│------| Input         ││ │
 │      │                                   ││         │      | RadioGroup    ││ │
 │      │                                   │└─────────┘      | Switch        ││ │
 │      │                                   │                 └───────────────┘│ │
@ -44,7 +44,7 @@
 <star-li type="embed-switch" appicon="gallery" label="微博" description="已开启所有通知" split>
  <star-switch></star-switch>
 </star-li>
-<star-li type="embed-checkbox-group" appicon="appstore" label="微博" split>
+<star-li type="embed-checkbox" appicon="appstore" label="微博" split>
  <star-checkbox-group></star-checkbox-group>
 </star-li>
 <star-li type="input" label="主机名" value="proxy.example.com"></star-li>
@ -79,7 +79,7 @@
 <star-li type="embed-switch" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" split value="普通灰色VALUE" href="#xxxx" info>
  <star-button label="info" @click="显示xxxx"></star-button>
 </star-li>
-<star-li type="embed-checkbox-group" appicon="appstore" label="微博" split>
+<star-li type="embed-checkbox" appicon="appstore" label="微博" split>
  <star-checkbox-group></star-checkbox-group>
 </star-li>
 <star-li type="embed-card">
@ -102,10 +102,6 @@
 |    主Label    |                     Slot-选择器Selector(值选择器, 时间选择器, 日期选择器)
 ----------------

-------- ----------------
-| Icon | |    主Label    |     分隔线   Slot-复选框组 CheckBoxGroup
-------- ----------------
-
 ```

 ## type="checkbox"
@ -134,23 +130,31 @@ left  │ Checkbox(mock) │ │(App)Icon│ ├───────┴──
 <star-li type="checkbox" label="+86 180 4766 4766" pos="left" checked></star-li>
 ```

-## type="embed-checkbox-group"
+## type="embed-checkbox"

-特征: 在单行中包含不少于两个的 Checkbox
+特征: checkbox 彼此之间并无关联关系, 可独立选中,关闭, 因此不再单独设立 Group.
+
+何时使用: <star-li>左右需分区控制

 插入方式: 采用外嵌入式插入

-CheckboxGroup 的作用: 在有限空间内提供横向或纵向的组织功能, 包裹 Checkbox 并提供一层抽象(类似一层专属的自动布局 div).
+```
+type="embed-checkbox"
+┌────────────┬─────────────────────────────────────────────────────────────────────┐
+│            │ ┌─────────┐ ┌───────┬────────┐ ┌─────────┐ ┌────────┐┌────────┐     │
+│            │ │         │ │ Label │ Square │ │         │ │        ││        │     │
+│  <star-li> │ │(App)Icon│ ├───────┴────────┤ │SplitLine│ │Checkbox││Checkbox│     │
+│            │ │         │ │   Description  | │         │ │        ││        │ ... │
+│            │ └─────────┘ └────────────────┘ └─────────┘ └────────┘└────────┘     │
+└────────────┴─────────────────────────────────────────────────────────────────────┘
+```

 基本示例:

 ```html
-<star-li type="embed-checkbox-group" label="微博">
-  <!-- 内包含 -->
-  <star-checkbox-group>
-    <star-checkbox value="WLAN"></star-checkbox>
-    <star-checkbox value="MOBILE_NETWORK"></star-checkbox>
-  </star-checkbox-group>
+<star-li type="embed-checkbox" label="微博">
+  <star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
+  <star-checkbox slot="checkbox" value="MOBILE_NETWORK"></star-checkbox>
 </star-li>
 ```

@ -218,14 +222,8 @@ Radio 在纵向或横向上的叠加
  checkedLocation="right"
  checkedType="symbol"
 >
-  <star-li type='radio' checked label='日出到日落' description='根据所在地的日出和日落时间，自动切换浅色和深色模式'>
-    <!-- 内包含 -->
-    <star-radio label="15秒" value="15秒" checked></star-radio>
-  </star-li>
-  <star-li type='radio' label='自定义时间' description='根据设置的时间段，自动切换浅色和深色模式'>
-    <!-- 内包含 -->
-    <star-radio label="30秒" value="30秒"></star-radio>
-  </star-li>
+  <star-li type='radio' checked label='日出到日落' description='根据所在地的日出和日落时间，自动切换浅色和深色模式'></star-li>
+  <star-li type='radio' label='自定义时间' description='根据设置的时间段，自动切换浅色和深色模式'></star-li>
 </star-radio-group>
 ```

--- a/src/components/li/li.css.ts
+++ b/src/components/li/li.css.ts
@ -278,7 +278,8 @@ export default css`
    font-size: var(--auto-32px);
    min-width: var(--auto-64px);
  }
-  :host(:is([type='embed-info'], [type='embed-switch'])) li {
+  :host(:is([type='embed-info'], [type='embed-switch'], [type='embed-checkbox']))
+    li {
    padding-inline-end: 0;
  }

@ -302,12 +303,32 @@ export default css`
    min-width: var(--auto-64px);
    margin: auto var(--oc-icon-margin-right, var(--auto-16px)) auto 0;
  }
+  ::slotted(star-checkbox[slot='checkbox']) {
+    position: relative;
+    margin: auto var(--auto-48px);
+  }
+  :host([type='embed-checkbox']) div#checkbox-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin-left: var(--auto-12px);
+    margin-right: var(--auto-38_5px);
+  }
+  :host([type='embed-checkbox']) div#checkbox-container::before {
+    content: '';
+    position: relative;
+    margin: auto;
+    display: block;
+    border-left: var(--auto-1px) solid var(--split-line-color);
+    height: var(--auto-40px);
+    left: calc(0px - var(--auto-12px));
+  }

  /* 条目按压和释放时的变化 */
-  :host(.starpress:not([type='embed-switch'])) {
+  :host(.starpress:not([type='embed-switch'], [type='embed-checkbox'])) {
    background-color: var(--li-bg-pressed);
  }
-  :host(.starpress[type='embed-switch']) li {
+  :host(.starpress:is([type='embed-switch'], [type='embed-checkbox'])) li {
    background-color: var(--li-bg-pressed);
  }
 `
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@ -4,10 +4,8 @@ import {
  ifDefined,
  nothing,
  property,
-  CSSResultArray,
-  HTMLTemplateResult,
+  CSSResult,
  StarBaseElement,
-  TemplateResult,
 } from '@star-web-components/base'
 import liStyles from './li.css.js'
 import {StarSwitch} from '@star-web-components/switch'
@ -39,21 +37,24 @@ export enum LiType {
  /* 嵌入式 */
  EMBED_INFO = 'embed-info',
  EMBED_SWITCH = 'embed-switch',
-  EMBED_CHECKBOX_GROUP = 'embed-checkbox-group',
+  EMBED_CHECKBOX = 'embed-checkbox',
  EMBED_CARD = 'embed-card',
 }

@customElement('star-li')
 export class StarLi extends StarBaseElement {
-  public static override get styles(): CSSResultArray {
-    return [liStyles]
+  public static override get styles(): CSSResult {
+    return liStyles
  }

  @property({type: String}) type!: LiType

+  /**
+   * Star-Li的核心和标志属性
+   */
  @property({type: String}) label = ''

-  @property({type: String}) description = ''
+  @property({type: String}) description!: string

  /**
   * LiButton 内的多样性控制，
@ -61,12 +62,12 @@ export class StarLi extends StarBaseElement {
   * 对于button类型: 有 default(默认), primary, warn
   * 对于radio类型: 有 circle(默认), checkmark, 可被 radio-group 覆写
   */
-  @property({type: String, reflect: true}) variant = 'default'
+  @property({type: String, reflect: true}) variant!: string

  /**
   * label之后的方块信息
   */
-  @property({type: String}) square = ''
+  @property({type: String}) square!: string

  /**
   * 该属性被 type='switch', type='radio' 和 type='checkbox' 共用
@ -75,23 +76,26 @@ export class StarLi extends StarBaseElement {
  @property({type: Boolean, reflect: true}) checked!: boolean

  @property({type: String, reflect: true}) value!: string
-  @property({type: String}) default = ''
-  @property({type: String}) href!: string
-  @property({type: String}) icon!: string
-  @property({type: String}) iconcolor = ''
-  @property({type: Number}) bubble = 0
-  @property({type: String}) switchcolor = ''
-  @property({type: Boolean}) disabled = false
-  @property({type: Boolean}) switchicon = false
-  @property({type: String}) size = ''

-  getbase(): HTMLTemplateResult {
+  @property({type: String}) href!: string
+
+  @property({type: String}) icon!: string
+
+  /* deprecated */ @property({type: String}) default = ''
+  /* deprecated */ @property({type: String}) iconcolor = ''
+  /* deprecated */ @property({type: Number}) bubble = 0
+  /* deprecated */ @property({type: String}) switchcolor = ''
+  /* deprecated */ @property({type: Boolean}) disabled = false
+  /* deprecated */ @property({type: Boolean}) switchicon = false
+  /* deprecated */ @property({type: String}) size = ''
+
+  private getbase() {
    return html`
      <li><slot></slot></li>
    `
  }

-  getbubblelabel(): HTMLTemplateResult | typeof nothing {
+  private getbubblelabel() {
    if (!this.label) {
      console.error('【star-ul】【bubblelabel】缺少 label 参数')
      return nothing
@ -135,7 +139,7 @@ export class StarLi extends StarBaseElement {
    `
  }

-  geticonlabel(): HTMLTemplateResult | typeof nothing {
+  private geticonlabel() {
    if (!this.label) {
      console.error('【star-ul】【iconlabel】缺少 label 参数')
      return nothing
@ -175,7 +179,7 @@ export class StarLi extends StarBaseElement {
    `
  }

-  getinfolabel(): HTMLTemplateResult | typeof nothing {
+  private getinfolabel() {
    if (!this.label) {
      console.error('【star-ul】【info】缺少 label 参数')
      return nothing
@ -204,7 +208,7 @@ export class StarLi extends StarBaseElement {
    }
  }

-  getonlylabel(): HTMLTemplateResult | typeof nothing {
+  private getonlylabel() {
    if (!this.label) {
      console.error('【star-ul】【labeliconhref】缺少 label 参数')
      return nothing
@ -227,7 +231,7 @@ export class StarLi extends StarBaseElement {
    `
  }

-  getonlyread(): HTMLTemplateResult | typeof nothing {
+  private getonlyread() {
    if (!this.label) {
      console.error('【star-ul】【onlyread】缺少 label 参数')
      return nothing
@ -240,7 +244,7 @@ export class StarLi extends StarBaseElement {
    `
  }

-  getonlyedit(): HTMLTemplateResult | typeof nothing {
+  private getonlyedit() {
    if (!this.label) {
      console.error('【star-ul】【onlyedit】缺少 label 参数')
      return nothing
@ -257,7 +261,7 @@ export class StarLi extends StarBaseElement {
    `
  }

-  getswitchlabel(): HTMLTemplateResult | typeof nothing {
+  private getswitchlabel() {
    if (!this.label) {
      console.error('【star-ul】【switchlabel】缺少 label 参数')
      return nothing
@ -309,63 +313,47 @@ export class StarLi extends StarBaseElement {
    `
  }

-  dynamicSlot: TemplateResult | typeof nothing = nothing
-
-  /**
-   * <star-li
-   *   type="default"
-   *   appicon="settings"
-   *   label="这是Label"
-   *   description="这是Description"
-   *   square="可选的方块标签"
-   *   value="普通灰色VALUE"
-   *   href="#xxxx"
-   * ></star-li>
-   */
-  renderGeneral() {
-    return html`
-      <li>
-        <a data-icon=${ifDefined(this.icon)} href=${ifDefined(this.href)}>
-          ${this.icon
-            ? nothing
-            : html`
-                <slot name="icon"></slot>
-              `}
-          <div id="content">
-            <div id="main-label">
-              <span id="label">${this.label}</span>
-              ${this.square
-                ? html`
-                    <div id="square">${this.square}</div>
-                  `
-                : nothing}
-            </div>
-            ${this.description
-              ? html`
-                  <span id="description">${this.description}</span>
-                `
-              : nothing}
-          </div>
-          ${this.value
-            ? html`
-                <span id="value">${this.value}</span>
-              `
-            : nothing}
-        </a>
-      </li>
-      ${this.dynamicSlot}
-    `
+  private generateWidgetIcon() {
+    if (!this.icon) {
+      return html`
+        <slot name="icon"></slot>
+      `
+    }
+    return nothing
  }

-  renderInput() {
-    return html`
-      <li>
-        <a>
-          <div id="content">
-            <div id="main-label">
-              <span id="label">${this.label}</span>
-            </div>
-          </div>
+  private generateWidgetSquare() {
+    if (this.square) {
+      return html`
+        <div id="square">${this.square}</div>
+      `
+    }
+    return nothing
+  }
+
+  private generateWidgetDescription() {
+    if (this.description) {
+      return html`
+        <span id="description">${this.description}</span>
+      `
+    }
+    return nothing
+  }
+
+  private generateWidgetValue() {
+    if (this.type === LiType.INPUT) return nothing
+    if (this.value) {
+      return html`
+        <span id="value">${this.value}</span>
+      `
+    }
+    return nothing
+  }
+
+  private generateStaticSlot() {
+    switch (this.type) {
+      case LiType.INPUT:
+        return html`
          <input
            placeholder=${this.value}
            @focus=${(evt: Event) => {
@ -379,47 +367,9 @@ export class StarLi extends StarBaseElement {
              this.value = target.placeholder = target.value
            }}
          />
-        </a>
-      </li>
-    `
-  }
-
-  renderButton() {
-    return html`
-      <li>
-        <star-button
-          id="li-text-button"
-          type="text"
-          variant=${this.variant}
-          label=${this.label}
-        ></star-button>
-      </li>
-    `
-  }
-
-  renderSwitch() {
-    return html`
-      <li
-        @click=${() => {
-          this.checked = !this.checked
-        }}
-      >
-        <a>
-          ${this.icon
-            ? nothing
-            : html`
-                <slot name="icon"></slot>
-              `}
-          <div id="content">
-            <div id="main-label">
-              <span id="label">${this.label}</span>
-            </div>
-            ${this.description
-              ? html`
-                  <span id="description">${this.description}</span>
-                `
-              : nothing}
-          </div>
+        `
+      case LiType.SWITCH:
+        return html`
          <star-switch
            id="li-switch"
            ?checked=${this.checked}
@ -428,47 +378,63 @@ export class StarLi extends StarBaseElement {
              this.checked = target.checked
            }}
          ></star-switch>
-        </a>
-      </li>
-    `
+        `
+      default:
+        return nothing
+    }
  }

-  renderCheckbox() {
-    return html`
-      <li
-        .aaaa=${{hello: 1, bad: '2'}}
-        @click=${() => {
-          this.checked = !this.checked
-        }}
-      >
-        <a>
-          ${this.icon
-            ? nothing
-            : html`
-                <slot name="icon"></slot>
-              `}
-          <div id="content">
-            <div id="main-label">
-              <span id="label">${this.label}</span>
-            </div>
-            ${this.description
-              ? html`
-                  <span id="description">${this.description}</span>
-                `
-              : nothing}
+  private generateDynamicSlot() {
+    switch (this.type) {
+      case LiType.EMBED_INFO:
+        return html`
+          <slot name="info"></slot>
+        `
+      case LiType.EMBED_SWITCH:
+        return html`
+          <slot name="switch"></slot>
+        `
+      case LiType.EMBED_CHECKBOX:
+        return html`
+          <div id="checkbox-container">
+            <slot name="checkbox"></slot>
          </div>
-          ${this.value
-            ? html`
-                <span id="value">${this.value}</span>
-              `
-            : nothing}
-        </a>
+        `
+      default:
+        return nothing
+    }
+  }
+
+  private renderButton() {
+    return html`
+      <li>
+        <star-button
+          id="li-text-button"
+          type="text"
+          label=${this.label}
+          variant=${ifDefined(this.variant)}
+        ></star-button>
      </li>
    `
  }
-  renderCheckboxGroup() {}

-  render() {
+  private generateGeneral(renderStatic?: Function) {
+    return html`
+      <a data-icon=${ifDefined(this.icon)} href=${ifDefined(this.href)}>
+        ${this.generateWidgetIcon()}
+        <div id="content">
+          <div id="main-label">
+            <span id="label">${this.label}</span>
+            ${this.generateWidgetSquare()}
+          </div>
+          ${this.generateWidgetDescription()}
+        </div>
+        ${this.generateWidgetValue()} ${renderStatic?.()}
+      </a>
+    `
+  }
+
+  override render() {
    switch (this.type) {
      /* deprecated */ case LiType.BASE:
        return this.getbase()
@ -487,42 +453,38 @@ export class StarLi extends StarBaseElement {
      /* deprecated */ case LiType.SWITCH_LABEL:
        return this.getswitchlabel()

-      case LiType.EMBED_INFO:
-        this.dynamicSlot = html`
-          <slot name="info"></slot>
-        `
-        return this.renderGeneral()
-
-      case LiType.EMBED_SWITCH:
-        this.dynamicSlot = html`
-          <slot name="switch"></slot>
-        `
-        return this.renderGeneral()
-
      case LiType.SELECTOR:
      case LiType.EMBED_CARD:
      // TBD

-      case LiType.INPUT:
-        return this.renderInput()
+      case LiType.EMBED_INFO:
+      case LiType.EMBED_SWITCH:
+      case LiType.EMBED_CHECKBOX:
+        return html`
+          <li>${this.generateGeneral()}</li>
+          ${this.generateDynamicSlot()}
+        `

      case LiType.BUTTON:
        return this.renderButton()

+      case LiType.CHECKBOX:
      case LiType.SWITCH:
-        return this.renderSwitch()
-
-      case LiType.CHECKBOX: // 不含<star-radio>但是有同样的基本行为表现
-        return this.renderCheckbox()
-
-      case LiType.EMBED_CHECKBOX_GROUP:
-        return this.renderCheckboxGroup()
-
-      case LiType.DEFAULT:
-      case LiType.PRIMARY:
-      case LiType.RADIO: // 不含<star-radio>但是有同样的基本行为表现
+        return html`
+          <li
+            @click=${() => {
+              this.checked = !this.checked
+              this.emit('change')
+              this.emit(this.checked === true ? 'enabled' : 'disabled')
+            }}
+          >
+            ${this.generateGeneral(this.generateStaticSlot.bind(this))}
+          </li>
+        `
      default:
-        return this.renderGeneral()
+        return html`
+          <li>${this.generateGeneral()}</li>
+        `
    }
  }
 }
--- a/src/components/radio/radio-group.ts
+++ b/src/components/radio/radio-group.ts
@ -52,7 +52,7 @@ export class StarRadioGroup extends LitElement {
      }
      this.selected = target.value
      this.dispatchEvent(
-        new Event('star-radio-change', {
+        new Event('change', {
          bubbles: true,
          composed: false,
        })
--- a/src/test/panels/li/li.ts
+++ b/src/test/panels/li/li.ts
@ -24,8 +24,10 @@ import {
  privacy,
  zip,
 } from './static/icons'
+import '@star-web-components/checkbox'
 import '@star-web-components/li'
 import '@star-web-components/switch'
+import {StarRadioGroup} from '@star-web-components/radio'

@customElement('panel-li')
 export class PanelLi extends LitElement {
@ -138,6 +140,19 @@ export class PanelLi extends LitElement {

      <h1>两态交互</h1>
      <star-li type="switch" label="控件项" checked></star-li>
+      <div
+        @disabled=${() => {
+          alert('冒泡:子节点取消选中, 来自<star-li>的父节点')
+        }}
+      >
+        <star-li
+          type="switch"
+          label="控件项(事件测试)"
+          @enabled=${() => {
+            alert('捕获:目标被选中, 来自<star-li>')
+          }}
+        ></star-li>
+      </div>
      <hr />
      <star-li type="default" label="跳转项" href="#xxxx"></star-li>
      <hr />
@ -201,7 +216,10 @@ export class PanelLi extends LitElement {
      <star-li type="button" variant="warn" label="添加其他网络"></star-li>
      <hr />

-      <star-radio-group selected="customize">
+      <star-radio-group
+        selected="customize"
+        @change=${(e: Event) => alert((e.target as StarRadioGroup).selected)}
+      >
        <star-li
          type="radio"
          label="日出到日落"
@ -233,7 +251,27 @@ export class PanelLi extends LitElement {
      </star-radio-group>
      <hr />
      <star-li type="checkbox" label="滚屏越界" checked></star-li>
-      <star-li type="checkbox" label="低精度绘制"></star-li>
+      <div
+        @disabled=${(e: Event) => {
+          alert(
+            '事件类型: ' +
+              e.type +
+              ' 冒泡:子节点取消选中, 来自<star-li>的父节点'
+          )
+        }}
+      >
+        <star-li
+          type="checkbox"
+          label="低精度绘制(事件测试)"
+          @change=${(e: Event) => {
+            alert('事件类型: ' + e.type)
+          }}
+          @enabled=${(e: Event) => {
+            alert('事件类型: ' + e.type + ' 捕获:目标被选中, 来自<star-li>')
+          }}
+        ></star-li>
+      </div>
+
      <hr />
      <star-li type="checkbox" label="+86 180 4766 4766" pos="left"></star-li>
      <star-li
@ -292,6 +330,21 @@ export class PanelLi extends LitElement {
        <star-svg-icon slot="icon">${weibo}</star-svg-icon>
        <star-switch slot="switch" id="li-switch"></star-switch>
      </star-li>
+      <hr />
+      <star-li type="embed-checkbox" label="微博">
+        <star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
+      </star-li>
+      <star-li type="embed-checkbox" label="微博">
+        <star-svg-icon slot="icon">${weibo}</star-svg-icon>
+        <star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
+        <star-checkbox slot="checkbox" value="MOBILE_NETWORK"></star-checkbox>
+      </star-li>
+      <star-li type="embed-checkbox" label="微博">
+        <star-svg-icon slot="icon">${weibo}</star-svg-icon>
+        <star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
+        <star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
+        <star-checkbox slot="checkbox" value="MOBILE_NETWORK"></star-checkbox>
+      </star-li>

      <h1>外嵌图标</h1>
      <star-li
--- a/src/test/panels/radio/radio.ts
+++ b/src/test/panels/radio/radio.ts
@ -11,7 +11,7 @@ export class PanelRadio extends LitElement {
  constructor() {
    super()
    const shadowRoot = this.attachShadow({mode: 'open'})
-    shadowRoot.addEventListener('star-radio-change', (event: Event) => {
+    shadowRoot.addEventListener('change', (event: Event) => {
      event.stopPropagation()
      // @ts-ignore
      console.log('选择的单选框value : ' + event.target.__selected)