openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

(improve)适配深色模式，多色图标自适应深色模式；

This commit is contained in:
wangchangqi 2022-11-30 10:36:04 +08:00
parent 9b82a9cd3b
commit 4a588281fc
19 changed files with 195 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/base/global-style.ts
View File

@ -37,6 +37,7 @@ const baseStyle = css`
--devicePixelRatio: 2;
--text-font-family: 'OPPPSans';
--icon-font-family: 'star-icons';
--colorful-data-icon: attr(data-icon);
/*****************************线性渐变*************************************/
--gradient-black: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
@ -222,7 +223,7 @@ const baseStyle = css`
--opacity-white-55: rgba(255, 255, 255, 0.55);
--opacity-white-68: rgba(255, 255, 255, 0.68);
--opacity-white-75: rgba(255, 255, 255, 0.75);
--opacity-white-1: rgba(255, 255, 255, 1);
--opacity-white-80: rgba(255, 255, 255, 0.8);
/*******************************纯色***************************************/
--pure-white: rgba(255, 255, 255);
--pure-black: rgba(0, 0, 0);
@ -469,10 +470,18 @@ const baseComponentStyle = css`
--card-label: var(--font-main-black);
--card-link: var(--linear-icon32-black);
/* Checkbox */
--checkbox-bc: rgba(38, 38, 38, 0.2);
/* Selector */
--selector-icon-color: var(--linear-icon32-black);
/* Switch */
--switch-bgc: var(--opacity-black-12);
/* Radio */
--radio-checkmark-bc: rgba(38, 38, 38, 0.2);
--bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
--bor-radio-off: var(--auto-3px) solid var(--opacity-white-25);
/* border/未选中 */
@ -797,6 +806,9 @@ const darkStyle = css`
/* 商务/组件深/黑透渐变-竖（高斯） */
--bgc-black-vertical-gradient: var(--gradient-blackout-vertical);
--colorful-data-icon: attr(data-icon) '-dm';
--split-line-color: var(--opacity-white-12);
/* 按钮button */
--bgc-btn-noraml: var(--bgc-btn-noraml-dm);
--bgc-btn-noraml-pressed: var(--bgc-btn-noraml-pressed-dm);
@ -818,6 +830,32 @@ const darkStyle = css`
--dialog-content: var(--font-secondary-white);
--dialog-checkbox: var(--font-sec-auxiliary-white);
--li-label: var(--font-secondary-white);
--li-square: var(--font-auxiliary-white);
--li-bg-pressed: var(--opacity-white-12);
--li-info: var(--linear-icon-white);
--li-link: var(--linear-icon-white);
--li-value-default: var(--font-auxiliary-white);
--li-description: var(--font-sec-auxiliary-white);
--li-icon: var(--linear-icon-white);
/* Card */
--card-label: var(--font-secondary-white);
--card-link: var(--linear-icon-white);
/* Checkbox */
--checkbox-bc: var(--opacity-white-15);
/* Radio */
--radio-checkmark-bc: var(--opacity-white-15);
/* Selector */
--selector-icon-color: var(--linear-icon-white);
/* Switch */
--ball-bgc: var(--opacity-white-80);
--switch-bgc: var(--opacity-white-15);
/* 全/ click_dm */
--bgc-btn-click: var(--opacity-white-10);

8
src/components/button/button.css.ts
View File

@ -164,6 +164,12 @@ export default [
content: attr(data-icon);
text-align: center;
}
:host([type='pure'].colorful-icon) button::before,
:host([type='icon'].colorful-icon) button::before,
:host([type='ghost'].colorful-icon) button[data-icon]::before,
:host([type='special'].colorful-icon) button[data-icon]::before {
content: var(--colorful-data-icon);
}
:host([type='pure'][label]) button,
:host([type='icon']) button,
:host([type='ghost']) button,
@ -283,8 +289,6 @@ export default [
:host([type='pure']:not([label])[size='extralarge']) {
width: var(--auto-152px);
height: var(--auto-152px);
color: var(--color-btn-pure-default);
background-color: var(--bgc-btn-pure-default);
}
/* 图标与文字之间的间隙 */
:host([type='pure'][label]) button::before {

2
src/components/card/card.css.ts
View File

@ -143,7 +143,7 @@ export default css`
height: var(--auto-30px);
margin: auto var(--auto-12px) auto auto;
box-sizing: border-box;
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
border: var(--auto-3px) solid var(--checkbox-bc);
font-family: var(--icon-font-family);
color: #fff;
line-height: var(--auto-30px);

2
src/components/checkbox/checkbox.ts
View File

@ -47,7 +47,7 @@ export class StarCheckbox extends StarBaseElement {
width: var(--auto-30px);
height: var(--auto-30px);
box-sizing: border-box;
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
border: var(--auto-3px) solid var(--radio-checkmark-bc);
border-radius: var(--auto-5px);
}
:host([checked]) a::before {

1
src/components/dialog/select-dialog.ts
View File

@ -209,6 +209,7 @@ export class StarSelectDialog extends StarBaseDialog {
<star-button
type="text"
label=${this.cancel}
variant="default"
@click=${this.handleCancel}
></star-button>
<star-button

BIN
src/components/fonts/star-icons.ttf
View File

Binary file not shown.

7
src/components/li/li.css.ts
View File

@ -79,6 +79,9 @@ export default css`
padding-inline-end: var(--auto-18px);
margin: auto 0px;
}
:host(.colorful-icon) a[data-icon]::before {
content: var(--colorful-data-icon);
}
a[href]::after {
color: var(--li-link);
content: 'right-light';
@ -208,7 +211,7 @@ export default css`
min-width: var(--auto-32px);
margin: auto 0px auto auto;
box-sizing: border-box;
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
border: var(--auto-3px) solid var(--radio-checkmark-bc);
border-radius: 50%;
}
:host([type='radio'][checked]) a::after {
@ -237,7 +240,7 @@ export default css`
height: var(--auto-32px);
margin: auto 0px auto auto;
box-sizing: border-box;
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
border: var(--auto-3px) solid var(--radio-checkmark-bc);
border-radius: var(--auto-5px);
}
:host([type='checkbox'][pos='left']) a::before {

2
src/components/li/li.ts
View File

@ -381,7 +381,7 @@ export class StarLi extends StarBaseElement {
id="li-text-button"
type="text"
label=${this.label}
variant=${ifDefined(this.variant)}
variant=${this.variant || 'default'}
></star-button>
</li>
`

11
src/components/section/section.ts
View File

@ -31,10 +31,7 @@ export class StarAnimateSection extends LitElement {
static styles = css`
:host {
position: absolute;
width: 100%; /* 100vw会有x轴溢出 */
height: 100vh;
/* overflow: hidden; */
/* height: calc(100vh + 1px); */ /* 手动制造溢出 */
width: 100%;
animation-duration: 0.3s;
background-color: #f0f0f0;
}
@ -42,6 +39,12 @@ export class StarAnimateSection extends LitElement {
section {
overflow: auto;
}
@media (prefers-color-scheme: dark) {
:host {
background-color: #2e2e2e;
}
}
`
}

3
src/components/switch/switch.css.ts
View File

@ -27,7 +27,7 @@ export default css`
width: inherit;
height: inherit;
border-radius: inherit;
background-color: rgba(0, 0, 0, 0.12);
background-color: var(--switch-bgc);
}
/*选中表单后的样式，:checked表示checkbox被选中后的状态*/
.base:checked + label {
@ -50,6 +50,7 @@ export default css`
}
.base:checked + label::before {
/*checkbox选中时按钮的样式*/
background-color: var(--pure-white);
transition: 0.25s cubic-bezier(0.16, 0.67, 0.18, 1.1);
left: calc(
var(--switch-width) - var(--ball-diameter) - var(--ball-padding)

9
src/components/ul/ul.css.ts
View File

@ -41,7 +41,7 @@ export default css`
padding: 0;
margin: 10px auto;
max-width: 88vw;
background: var(--bg-ul, var(--pure-white));
background: inherit;
box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
border-radius: inherit;
}
@ -83,11 +83,4 @@ export default css`
footer a:visited {
color: blue;
}
/* Just for test */
@media (prefers-color-scheme: dark) {
ul {
background-color: var(--base-black);
}
}
`

79
src/test/panels/button/button.ts
View File

@ -64,11 +64,6 @@ export class PanelButton extends LitElement {
<star-button type="normal" variant="default" size="small" label="普通按钮"></star-button>
<star-button type="normal" variant="warn" size="small" label="警告按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" theme="dark" variant="primary" size="small" label="强调按钮"></star-button>
<star-button type="normal" theme="dark" variant="default" size="small" label="普通按钮"></star-button>
<star-button type="normal" theme="dark" variant="warn" size="small" label="警告按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" variant="primary" size="middle" label="强调按钮"></star-button>
<star-button type="normal" variant="default" size="middle" label="普通按钮"></star-button>
@ -123,21 +118,11 @@ export class PanelButton extends LitElement {
<star-button type="pure" variant="primary" size="large" icon="delete"></star-button>
<star-button type="pure" variant="primary" size="large" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="delete"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="default" size="extralarge" icon="bug"></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="delete"></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="bug"></star-button>
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete"></star-button>
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="primary" size="small" icon="bug" label="添"></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添" disabled></star-button>
@ -174,10 +159,6 @@ export class PanelButton extends LitElement {
<star-button type="pure" variant="establish" size="large" icon="add" label="添加组件"></star-button>
<star-button type="pure" variant="establish" size="large" icon="add" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="primary" size="large" icon="add" label="添加组件"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="add" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" icon="bug" size="small" label="最短"></star-button>
<star-button type="pure" icon="bug" size="middle" label="最短"></star-button>
@ -226,18 +207,6 @@ export class PanelButton extends LitElement {
<star-button type="text" variant="warn" label="警告按钮"></star-button>
<star-button type="text" variant="warn" label="警告按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="primary" label="强调按钮"></star-button>
<star-button type="text" theme="dark" variant="primary" label="强调按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="default" label="普通按钮"></star-button>
<star-button type="text" theme="dark" variant="default" label="普通按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="warn" label="警告按钮"></star-button>
<star-button type="text" theme="dark" variant="warn" label="警告按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" variant="primary" label="最长最长最长最长最长最长最长"></star-button>
<star-button type="text" variant="primary" style="width:100px" label="自定义长度100px"></star-button>
@ -256,29 +225,21 @@ export class PanelButton extends LitElement {
<star-button type="icon" icon="minus" size="middle"></star-button>
<star-button type="icon" icon="minus" size="middle" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="icon" theme="dark" icon="bug" size="middle"></star-button>
<star-button type="icon" theme="dark" icon="bug" size="middle" disabled></star-button>
</star-li>
</star-ul>
<h3>Ghost类型按钮使用场景:拍照、摄像应用，多端协同拍照控制界面</h3>
<star-ul type="onlyheader" title="Ghost类型提供3种大小的按钮">
<star-li type="base">
<star-button type="ghost" icon="switch-camera" size="small"></star-button>
<star-button type="ghost" icon="switch-camera" size="small" disabled></star-button>
<star-button type="ghost" class="colorful-icon" icon="switch-camera" size="small"></star-button>
<star-button type="ghost" class="colorful-icon" icon="switch-camera" size="small" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="ghost" icon="switch-camera" size="middle"></star-button>
<star-button type="ghost" icon="switch-camera" size="middle" disabled></star-button>
<star-button type="ghost" class="colorful-icon" icon="switch-camera" size="middle"></star-button>
<star-button type="ghost" class="colorful-icon" icon="switch-camera" size="middle" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="ghost" icon="switch-camera" size="large"></star-button>
<star-button type="ghost" icon="switch-camera" size="large" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="ghost" theme="dark" icon="switch-camera" size="large"></star-button>
<star-button type="ghost" theme="dark" icon="switch-camera" size="large" disabled></star-button>
<star-button type="ghost" class="colorful-icon" icon="switch-camera" size="large"></star-button>
<star-button type="ghost" class="colorful-icon" icon="switch-camera" size="large" disabled></star-button>
</star-li>
</star-ul>
@ -287,10 +248,6 @@ export class PanelButton extends LitElement {
<star-button type="special" special="corner-marker"></star-button>
<star-button type="special" special="corner-marker" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" theme="dark" special="corner-marker"></star-button>
<star-button type="special" theme="dark" special="corner-marker" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" special="hang-up" size="middle"></star-button>
<star-button type="special" special="hang-up" size="middle" disabled></star-button>
@ -307,10 +264,6 @@ export class PanelButton extends LitElement {
<star-button type="special" special="go-back"></star-button>
<star-button type="special" special="go-back" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" theme="dark" special="go-back"></star-button>
<star-button type="special" theme="dark" special="go-back" disabled></star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">
@ -366,26 +319,6 @@ export class PanelButton extends LitElement {
</star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" title="菜单" id="iconmenu" background="var(--bg-dialog)">
<star-button type="iconlabel" icon="info" label="应用详情"></star-button>
<star-button type="iconlabel" icon="delete" label="卸载"></star-button>
<star-button type="iconlabel" icon="download-circle" label="固定至Dock"></star-button>
</star-ul>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
<star-button type="iconlabel" icon="keyboard-circle" label="编辑屏幕"></star-button>
</star-ul>
<star-ul type="onlyheader" title="一对内联按钮" id="dialog" background="var(--bg-dialog)">
<star-li type="base">
<star-button type="normal" variant="default" size="middle" label="取消"></star-button>
<star-button type="normal" variant="primary" size="middle" label="连接"></star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" id="dialog" title="独占一行" type="base">
<star-button type="normal" variant="primary" size="large" label="应用"></star-button>
</star-ul>
`
}

2
src/test/panels/fonts/gaia-icons.ts
View File

@ -278,7 +278,7 @@ export class PanelFontsGaiaIcons extends LitElement {
}
[data-icon]:before {
font-family: 'star-icons';
font-family: 'gaia-icons';
content: attr(data-icon);
display: inline-block;
font-weight: 400;

50
src/test/panels/fonts/star-icons.ts
View File

@ -394,6 +394,7 @@ export class PanelFontsStarIcons extends LitElement {
'stop',
'storage-circle',
'storage',
'switch-camera-dm',
'switch-camera',
'switch',
'sync',
@ -427,21 +428,36 @@ export class PanelFontsStarIcons extends LitElement {
'voicemail',
'wallpaper',
'wechat',
'wifi-0-dm',
'wifi-0',
'wifi-1-dm',
'wifi-1',
'wifi-2-dm',
'wifi-2',
'wifi-3-dm',
'wifi-3',
'wifi-4-dm',
'wifi-4',
'wifi-lock-0-dm',
'wifi-lock-0',
'wifi-lock-1-dm',
'wifi-lock-1',
'wifi-lock-2-dm',
'wifi-lock-2',
'wifi-lock-3-dm',
'wifi-lock-3',
'wifi-lock-4-dm',
'wifi-lock-4',
'wifi-nonet-0-dm',
'wifi-nonet-0',
'wifi-nonet-1-dm',
'wifi-nonet-1',
'wifi-nonet-2-dm',
'wifi-nonet-2',
'wifi-nonet-3-dm',
'wifi-nonet-3',
'wifi-permissions',
'wifi-nonet-4-dm',
'wifi-nonet-4',
]
render() {
@ -473,6 +489,38 @@ export class PanelFontsStarIcons extends LitElement {
`
)}
</star-li>
<h1><center>跟随黑暗模式的多色图标(需添加colorful-icon类名)</center></h1>
<star-li type="base">
${map(
[
'switch-camera',
'wifi-0',
'wifi-1',
'wifi-2',
'wifi-3',
'wifi-4',
'wifi-lock-0',
'wifi-lock-1',
'wifi-lock-2',
'wifi-lock-3',
'wifi-lock-4',
'wifi-nonet-0',
'wifi-nonet-1',
'wifi-nonet-2',
'wifi-nonet-3',
'wifi-nonet-4',
],
(iconname, _) => html`
<star-button
type="icon"
class="colorful-icon"
icon=${iconname}
size="small"
style="color: red;"
></star-button>
`
)}
</star-li>
`
}
}

12
src/test/panels/gesture/examples/test-multitouches.ts
View File

@ -79,25 +79,36 @@ export class PanelTestMultiTouches extends StarBaseElement {
return html`
<star-ul type=${UlType.BASE}>
<star-button
type="text"
variant="default"
id="holdtap"
label="第一指长按(hold),第二指点击(tap)"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="holdpan"
label="第一指长按(hold),第二指左右滑动(panleft/panright)"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="holdswipe"
label="第一指长按(hold),第二指左右滑动(swipeleft/swiperight)"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="holdall"
label="第一指长按(hold),第二指左右滑动(panleft/panright/swipeleft/swiperight)"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="holdandpan"
label="第一指长按(hold),第二指滑动生命周期(panstart/panmove/panend)"
></star-button>
@ -110,6 +121,7 @@ export class PanelTestMultiTouches extends StarBaseElement {
sharedStyles,
css`
star-button {
width: 100%;
height: 15vh;
}
`,

7
src/test/panels/gesture/examples/test-pan.ts
View File

@ -40,16 +40,22 @@ export class PanelTestPan extends StarBaseElement {
return html`
<star-ul type=${UlType.BASE}>
<star-button
type="text"
variant="default"
id="panlifecycle"
label="pan生命周期(panstart-panmove-panend)"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="panalldirection"
label="pan监听方向(pan)"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="pansingledirection"
label="pan监听单个方向(panleft-panright-pandown-panup)"
></star-button>
@ -62,6 +68,7 @@ export class PanelTestPan extends StarBaseElement {
sharedStyles,
css`
star-button {
width: 100%;
height: 20vh;
}
`,

30
src/test/panels/gesture/examples/test-swipe.ts
View File

@ -47,15 +47,32 @@ export class PanelTestSwipe extends StarBaseElement {
render() {
return html`
<star-ul type=${UlType.BASE}>
<star-button id="swipeLeftRight" label="左右轻扫"></star-button>
<hr />
<star-button id="swipeUpDown" label="上下轻扫"></star-button>
<hr />
<star-button id="swipeAll" label="上下左右轻扫"></star-button>
<star-button
type="text"
variant="default"
id="swipeLeftRight"
label="左右轻扫"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="swipeUpDown"
label="上下轻扫"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="swipeAll"
label="上下左右轻扫"
></star-button>
<hr />
<star-button
type="text"
variant="default"
id="swipeTest"
label="向右轻扫再折返一小段/一大段, 观察this)"
label="向右轻扫再分别折返一小段和一大段, 观察打印的方向"
></star-button>
</star-ul>
`
@ -66,6 +83,7 @@ export class PanelTestSwipe extends StarBaseElement {
sharedStyles,
css`
star-button {
width: 100%;
height: 20vh;
}
`,

21
src/test/panels/gesture/examples/test-tap.ts
View File

@ -34,11 +34,26 @@ export class PanelTestTap extends StarBaseElement {
render() {
return html`
<star-ul type=${UlType.BASE}>
<star-button id="tap" label="单指轻触(tap)"></star-button>
<star-button
type="text"
variant="default"
id="tap"
label="单指轻触(tap)"
></star-button>
<hr />
<star-button id="doubletap" label="双击轻触(doubletap)"></star-button>
<star-button
type="text"
variant="default"
id="doubletap"
label="双击轻触(doubletap)"
></star-button>
<hr />
<star-button id="tripletap" label="三击轻触(tripletap)"></star-button>
<star-button
type="text"
variant="default"
id="tripletap"
label="三击轻触(tripletap)"
></star-button>
</star-ul>
`
}

17
src/test/panels/li/li.ts
View File

@ -162,11 +162,17 @@ export class PanelLi extends LitElement {
<star-li
label="已连接Wifi项"
variant="primary"
class="colorful-icon"
icon="wifi-lock-4"
value="已连接"
></star-li>
<hr />
<star-li type="embed-info" label="Kylin" icon="wifi-lock-4">
<star-li
type="embed-info"
label="Kylin"
class="colorful-icon"
icon="wifi-nonet-2"
>
<star-button
slot="info"
type="icon"
@ -180,6 +186,7 @@ export class PanelLi extends LitElement {
label="Kylin"
variant="primary"
square="2.4G/5G"
class="colorful-icon"
icon="wifi-lock-3"
value="已连接"
></star-li>
@ -534,7 +541,8 @@ export class PanelLi extends LitElement {
<star-li
type="embed-info"
label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
icon="wifi-lock-4"
class="colorful-icon"
icon="wifi-nonet-2"
>
<star-button
slot="info"
@ -548,6 +556,7 @@ export class PanelLi extends LitElement {
label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
variant="primary"
square="2.4G/5G"
class="colorful-icon"
icon="wifi-lock-4"
value="已连接"
></star-li>
@ -590,7 +599,7 @@ export class PanelLi extends LitElement {
type="button"
variant="primary"
></star-li>
<!-- <star-li
<star-li
label="微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博"
type="embed-switch"
description="已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知"
@ -598,7 +607,7 @@ 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> -->
</star-li>
`
}