add li,ul,section,button,bubble and test pages
This commit is contained in:
wangchangqi
parent
ed6e6caa76
commit
ed98ecd409
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"bashmish.es6-string-css",
|
||||||
|
"ecmel.vscode-html-css",
|
||||||
|
"bierner.lit-html"
|
||||||
|
]
|
||||||
|
}
|
||||||
29
README.md
29
README.md
|
|
@ -1,3 +1,28 @@
|
||||||
# StarElement
|
# Star-Web-Components
|
||||||
|
|
||||||
星光WebUI组件
|
星光Web组件
|
||||||
|
|
||||||
|
## 拉取
|
||||||
|
|
||||||
|
```sh
|
||||||
|
git clone ssh://git@172.20.184.160:7999/yr/star-web-components.git
|
||||||
|
```
|
||||||
|
|
||||||
|
## 提交
|
||||||
|
|
||||||
|
从主线分支切出对应的 feature|bugfix|optimize 等关键词的分支。
|
||||||
|
|
||||||
|
```sh
|
||||||
|
git checkout -b feature-component-button master
|
||||||
|
```
|
||||||
|
|
||||||
|
## 示例运行
|
||||||
|
|
||||||
|
pnpm 是npm包管理领域一个新的、领先的包管理器。
|
||||||
|
|
||||||
|
若无 pnpm，请先进行全局安装及切换npm源至[国内镜像源](https://www.npmmirror.com/)。
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm install # 安装开发调试依赖包
|
||||||
|
pnpm vite # 使用vite运行示例
|
||||||
|
```
|
||||||
|
|
|
||||||
Binary file not shown.
38
index.html
38
index.html
|
|
@ -5,12 +5,40 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Lit + TS</title>
|
<title>Vite + Lit + TS</title>
|
||||||
<link rel="stylesheet" href="./src/index.css" />
|
<script type="module" src="/src/index.ts"></script>
|
||||||
<script type="module" src="/src/my-element.ts"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<my-element>
|
<!-- main -->
|
||||||
<h1>Vite + Lit</h1>
|
<settings-app></settings-app>
|
||||||
</my-element>
|
<style>
|
||||||
|
* {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "gaia-icons";
|
||||||
|
src: url("fonts/gaia-icons.ttf") format("truetype");
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--left-transform: -100vw;
|
||||||
|
--right-transform: +100vw;
|
||||||
|
--li-base-height: 43px;
|
||||||
|
--li-left-padding: 10px;
|
||||||
|
--li-right-padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
import { html, css, LitElement, nothing } from 'lit'
|
||||||
|
import { customElement, property } from 'lit/decorators.js'
|
||||||
|
|
||||||
|
@customElement('star-bubble')
|
||||||
|
export class StarBubble extends LitElement {
|
||||||
|
@property({ type: Number }) number = 0
|
||||||
|
|
||||||
|
render() {
|
||||||
|
/**
|
||||||
|
* 窄方盒子里放圆球，圆球数字区间 [1, 99], 超过99显示99+。
|
||||||
|
* 数字可弹性伸缩。
|
||||||
|
*/
|
||||||
|
if (this.number <= 0) return nothing
|
||||||
|
else if (this.number > 99) return html`
|
||||||
|
<div>
|
||||||
|
<span class='small'>99<sup>+</sup></span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
else return html`
|
||||||
|
<div>
|
||||||
|
<span>${this.number}</span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(var(--li-base-height) - 16px); /* 尽量节省宽度 */
|
||||||
|
height: var(--li-base-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 16px);
|
||||||
|
top: 8px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 190%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.small {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 170%;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
font-size: 10px;
|
||||||
|
max-width: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'star-bubble': StarBubble
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import {css, CSSResult} from 'lit'
|
||||||
|
|
||||||
|
export const sharedStyles: CSSResult = css`
|
||||||
|
.test {
|
||||||
|
color: darkred;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: blue;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
border: unset;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: left;
|
||||||
|
background: unset;
|
||||||
|
padding-inline-start: var(--li-left-padding);
|
||||||
|
min-height: var(--li-base-height);
|
||||||
|
line-height: var(--li-base-height);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { html, LitElement, CSSResultArray, HTMLTemplateResult, nothing } from 'lit'
|
||||||
|
import { customElement, property } from 'lit/decorators.js'
|
||||||
|
import { sharedStyles } from './button-styles';
|
||||||
|
|
||||||
|
export enum ButtonType {
|
||||||
|
BASE = 'base'
|
||||||
|
}
|
||||||
|
|
||||||
|
@customElement('star-button')
|
||||||
|
export class StarButton extends LitElement {
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [
|
||||||
|
sharedStyles
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
@property({ type: ButtonType }) type = ''
|
||||||
|
@property({ type: String }) label = ''
|
||||||
|
|
||||||
|
getBaseButton(): HTMLTemplateResult {
|
||||||
|
return html`
|
||||||
|
<button>${this.label}</button>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
switch(this.type) {
|
||||||
|
case ButtonType.BASE: return this.getBaseButton()
|
||||||
|
default:
|
||||||
|
console.error('unhanled 【star-button】 type')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'star-button': StarButton
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,287 @@
|
||||||
|
import { html, css, LitElement, HTMLTemplateResult, nothing } from 'lit'
|
||||||
|
import { customElement, property } from 'lit/decorators.js'
|
||||||
|
import { classMap } from 'lit/directives/class-map.js';
|
||||||
|
import '../bubble/bubble'
|
||||||
|
|
||||||
|
export enum LiType {
|
||||||
|
BASE = 'base',
|
||||||
|
BUBBLE_LABEL = 'bubble-label',
|
||||||
|
ICON_LABEL = 'icon-label',
|
||||||
|
INFO_LABEL = 'info-label',
|
||||||
|
ONLY_EDIT = 'only-edit',
|
||||||
|
ONLY_LABEL = 'only-label',
|
||||||
|
ONLY_READ = 'only-read',
|
||||||
|
}
|
||||||
|
|
||||||
|
@customElement('star-li')
|
||||||
|
export class StarLi extends LitElement {
|
||||||
|
@property({ type: LiType }) type = ''
|
||||||
|
@property({ type: String }) label = ''
|
||||||
|
@property({ type: String }) value = ''
|
||||||
|
@property({ type: String }) default = ''
|
||||||
|
@property({ type: String }) href = ''
|
||||||
|
@property({ type: String }) icon = ''
|
||||||
|
@property({ type: String }) iconcolor = ''
|
||||||
|
@property({ type: Number }) bubble = 0
|
||||||
|
|
||||||
|
getbase(): HTMLTemplateResult {
|
||||||
|
return html`<li><slot></slot></li>`
|
||||||
|
}
|
||||||
|
|
||||||
|
getbubblelabel(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.label) {
|
||||||
|
console.error('【star-ul】【bubblelabel】缺少 label 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
if (!this.bubble) {
|
||||||
|
console.error('【star-ul】【bubblelabel】缺少 bubble 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
const classes = `${this.href ? 'hashref' : ''} ${this.icon ? 'hasicon' : ''}`
|
||||||
|
const colorstyle = this.iconcolor
|
||||||
|
? html`<style>
|
||||||
|
a::before {
|
||||||
|
color: ${this.iconcolor} !important
|
||||||
|
}
|
||||||
|
</style>`
|
||||||
|
: nothing
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<li>
|
||||||
|
${this.href ? html`
|
||||||
|
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
||||||
|
${colorstyle}
|
||||||
|
<span class="label">${this.label}</span>
|
||||||
|
<star-bubble number=${this.bubble}></star-bubble>
|
||||||
|
</a>
|
||||||
|
` : html`
|
||||||
|
<a data-icon=${this.icon} class=${classes}>
|
||||||
|
${colorstyle}
|
||||||
|
<span class="label">${this.label}</span>
|
||||||
|
<star-bubble number=${this.bubble}></star-bubble>
|
||||||
|
</a>
|
||||||
|
`}
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
geticonlabel(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.label) {
|
||||||
|
console.error('【star-ul】【iconlabel】缺少 label 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
if (!this.icon) {
|
||||||
|
console.error('【star-ul】【iconlabel】缺少 icon 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
const classes = this.href ? 'hasicon hashref' : 'hasicon'
|
||||||
|
const colorstyle = this.iconcolor
|
||||||
|
? html`<style>
|
||||||
|
a::before {
|
||||||
|
color: ${this.iconcolor} !important
|
||||||
|
}
|
||||||
|
</style>`
|
||||||
|
: nothing
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<li>
|
||||||
|
${this.href ? html`
|
||||||
|
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
||||||
|
${colorstyle}
|
||||||
|
<span class="label">${this.label}</span>
|
||||||
|
</a>
|
||||||
|
` : html`
|
||||||
|
<a data-icon=${this.icon} class=${classes}>
|
||||||
|
${colorstyle}
|
||||||
|
<span class="label">${this.label}</span>
|
||||||
|
</a>
|
||||||
|
`}
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
getinfolabel(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.label) {
|
||||||
|
console.error('【star-ul】【info】缺少 label 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
if (!this.value) {
|
||||||
|
console.error('【star-li】【info】缺少 value 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.href) {
|
||||||
|
return html`
|
||||||
|
<li>
|
||||||
|
<span class="infokey">${this.label}</span>
|
||||||
|
<span class="infovalue">${this.value}</span>
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return html`
|
||||||
|
<li class='hashref'>
|
||||||
|
<a href=${this.href} class='hashref'>
|
||||||
|
<span class="infokey">${this.label}</span>
|
||||||
|
<span class="infovalue">${this.value}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getonlylabel(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.label) {
|
||||||
|
console.error('【star-ul】【labeliconhref】缺少 label 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<li>
|
||||||
|
${this.href ? html`
|
||||||
|
<a href=${this.href} class='hashref'>
|
||||||
|
<span class="label">${this.label}</span>
|
||||||
|
</a>
|
||||||
|
` : html`
|
||||||
|
<a>
|
||||||
|
<span class="label">${this.label}</span>
|
||||||
|
</a>
|
||||||
|
`}
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
getonlyread(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.label) {
|
||||||
|
console.error('【star-ul】【onlyread】缺少 label 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<li>
|
||||||
|
<span class='onlyread'>${this.label}</span>
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
getonlyedit(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.label) {
|
||||||
|
console.error('【star-ul】【onlyedit】缺少 label 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
if (!this.default) {
|
||||||
|
console.error('【star-ul】【onlyedit】缺少 default 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<li>
|
||||||
|
<input value="${this.label}" placeholder="${this.default}">
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
switch (this.type) {
|
||||||
|
case LiType.BASE: return this.getbase()
|
||||||
|
case LiType.BUBBLE_LABEL: return this.getbubblelabel()
|
||||||
|
case LiType.ICON_LABEL: return this.geticonlabel()
|
||||||
|
case LiType.INFO_LABEL: return this.getinfolabel()
|
||||||
|
case LiType.ONLY_EDIT: return this.getonlyedit()
|
||||||
|
case LiType.ONLY_LABEL: return this.getonlylabel()
|
||||||
|
case LiType.ONLY_READ: return this.getonlyread()
|
||||||
|
default:
|
||||||
|
console.error('unhanled 【star-li】 type')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host {
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
width: inherit;
|
||||||
|
display: flex;
|
||||||
|
min-height: var(--li-base-height);
|
||||||
|
line-height: var(--li-base-height);
|
||||||
|
padding-inline-start: var(--li-left-padding);
|
||||||
|
padding-inline-end: var(--li-right-padding); /* right-arrow须与最右侧文字对齐 */
|
||||||
|
}
|
||||||
|
li.hashref {
|
||||||
|
/* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
a.hasicon::before, a.hashref::after {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 25px;
|
||||||
|
min-width: 25px;
|
||||||
|
max-width: 25px;
|
||||||
|
font-family: "gaia-icons";
|
||||||
|
}
|
||||||
|
a.hasicon::before {
|
||||||
|
color: #657073;
|
||||||
|
text-align: left;
|
||||||
|
content: attr(data-icon);
|
||||||
|
padding-inline-end: var(--li-right-padding);
|
||||||
|
}
|
||||||
|
a.hashref::after {
|
||||||
|
color: #a5acae;
|
||||||
|
text-align: right;
|
||||||
|
content: "right-light";
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: 500px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
height: inherit;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
vertical-align: top;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: transparent;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
span.infokey, span.label {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
span.infovalue {
|
||||||
|
/* flex: 1; */ /* 利用自动挤压 */
|
||||||
|
text-align: right;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
span.onlyread {
|
||||||
|
color: #aaa;
|
||||||
|
font-size: clamp(0.55rem, 2.3vw, 1.2rem);
|
||||||
|
}
|
||||||
|
span.text {
|
||||||
|
flex: 8;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
span.bubble {
|
||||||
|
flex: 1;
|
||||||
|
height: inherit;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
span.next {
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'star-li': StarLi
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { html, css, LitElement, nothing } from 'lit'
|
||||||
|
import { customElement, property, state } from 'lit/decorators.js'
|
||||||
|
|
||||||
|
@customElement('star-animate-section')
|
||||||
|
export class StarAnimateSection extends LitElement {
|
||||||
|
@property()
|
||||||
|
transform = ''
|
||||||
|
|
||||||
|
@state()
|
||||||
|
bar = ''
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const withTransform = this.transform ? html`
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
transform: ${this.transform};
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
` : nothing
|
||||||
|
|
||||||
|
return html`
|
||||||
|
${withTransform}
|
||||||
|
<section>
|
||||||
|
<slot></slot>
|
||||||
|
</section>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%; /* 100vw会有x轴溢出 */
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
/* height: calc(100vh + 1px); */ /* 手动制造溢出 */
|
||||||
|
animation-duration: .3s;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
/* overflow: auto; */
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'star-animate-section': StarAnimateSection
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
import { html, css, LitElement, HTMLTemplateResult, nothing } from 'lit'
|
||||||
|
import { customElement, property } from 'lit/decorators.js'
|
||||||
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
||||||
|
|
||||||
|
export enum UlType {
|
||||||
|
BASE = 'base',
|
||||||
|
ONLY_HEADER = 'onlyheader',
|
||||||
|
ONLY_FOOTER = 'onlyfooter',
|
||||||
|
HEADER_FOOTER = 'headerfooter',
|
||||||
|
}
|
||||||
|
|
||||||
|
@customElement('star-ul')
|
||||||
|
export class StarUl extends LitElement {
|
||||||
|
@property({ type: UlType }) type = ''
|
||||||
|
@property({ type: String }) title = ''
|
||||||
|
@property({ type: String }) text = ''
|
||||||
|
|
||||||
|
getbase(): HTMLTemplateResult {
|
||||||
|
return html`
|
||||||
|
<ul>
|
||||||
|
<slot></slot>
|
||||||
|
</ul>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
getonlyheader(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.title) {
|
||||||
|
console.error('【star-ul】【onlyheader】缺少 title 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<header>${this.title}</header>
|
||||||
|
<ul>
|
||||||
|
<slot></slot>
|
||||||
|
</ul>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
getonlyfooter(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.text) {
|
||||||
|
console.error('【star-ul】【onlyfooter】缺少 text 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<ul>
|
||||||
|
<slot></slot>
|
||||||
|
</ul>
|
||||||
|
<footer>${unsafeHTML(this.text)}</footer>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
getheaderfooter(): HTMLTemplateResult | typeof nothing {
|
||||||
|
if (!this.title) {
|
||||||
|
console.error('【star-ul】【headerfooter】缺少 title 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.text) {
|
||||||
|
console.error('【star-ul】【headerfooter】缺少 text 参数')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<header>${this.title}</header>
|
||||||
|
<ul>
|
||||||
|
<slot></slot>
|
||||||
|
</ul>
|
||||||
|
<footer>${unsafeHTML(this.text)}</footer>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (!this.type) {
|
||||||
|
console.error('使用【star-ul】前请先写明使用的类型(type)')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (this.type) {
|
||||||
|
case UlType.BASE: return this.getbase()
|
||||||
|
case UlType.HEADER_FOOTER: return this.getheaderfooter()
|
||||||
|
case UlType.ONLY_HEADER: return this.getonlyheader()
|
||||||
|
case UlType.ONLY_FOOTER: return this.getonlyfooter()
|
||||||
|
default:
|
||||||
|
console.error('unhanled 【star-ul】 type')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host {
|
||||||
|
width: inherit;
|
||||||
|
display: block;
|
||||||
|
margin: 20px auto;
|
||||||
|
max-width: 88vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
flex-direction: column;
|
||||||
|
display: flex;
|
||||||
|
width: 88vw;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px auto;
|
||||||
|
max-width: 88vw;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header, footer {
|
||||||
|
color: #888;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
star-ul-base {
|
||||||
|
margin: 8px 0 12px 0; /* override child(star-ul-base) */
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
text-decoration: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:visited {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'star-ul': StarUl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
import { html, css, LitElement } from 'lit'
|
||||||
|
import { customElement, query, state } from 'lit/decorators.js'
|
||||||
|
import './components/ul/ul'
|
||||||
|
import './components/li/li'
|
||||||
|
import './components/section/section'
|
||||||
|
import { StarAnimateSection } from './components/section/section'
|
||||||
|
|
||||||
|
import './test/panels/root'
|
||||||
|
|
||||||
|
@customElement('settings-app')
|
||||||
|
export class SettingsApp extends LitElement {
|
||||||
|
|
||||||
|
@query('star-animate-section#root') private rootSection!: StarAnimateSection;
|
||||||
|
|
||||||
|
@state() sectionsMap = new Map()
|
||||||
|
|
||||||
|
@state() prevSection: StarAnimateSection | null = null;
|
||||||
|
@state() nextSection: StarAnimateSection | null = null;
|
||||||
|
@state() currentSection: StarAnimateSection | null = null;
|
||||||
|
|
||||||
|
|
||||||
|
handleEvent(evt: Event) {
|
||||||
|
switch(evt.type) {
|
||||||
|
case 'hashchange':
|
||||||
|
// console.log(evt)
|
||||||
|
const newURL = (evt as HashChangeEvent).newURL;
|
||||||
|
// const oldURL = (evt as HashChangeEvent).oldURL;
|
||||||
|
const goPanelHash = new URL(newURL).hash;
|
||||||
|
this.navigate(goPanelHash)
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param panelhash
|
||||||
|
*/
|
||||||
|
dynamicLoadSection(panelhash: String): StarAnimateSection | null {
|
||||||
|
if (this.sectionsMap.has(panelhash)) return this.sectionsMap.get(panelhash)
|
||||||
|
|
||||||
|
const panelname = panelhash.slice(1)
|
||||||
|
const section = document.createElement('star-animate-section')
|
||||||
|
section.setAttribute('id', panelname)
|
||||||
|
section.setAttribute('class', 'inactive r')
|
||||||
|
|
||||||
|
const panel = document.createElement('panel-' + panelname)
|
||||||
|
if (!panel) return null
|
||||||
|
|
||||||
|
section.appendChild(panel)
|
||||||
|
this.shadowRoot?.appendChild(section)
|
||||||
|
this.sectionsMap.set(panelhash, section)
|
||||||
|
|
||||||
|
return section
|
||||||
|
}
|
||||||
|
|
||||||
|
navigate(panelhash: String) {
|
||||||
|
console.log('goto', panelhash)
|
||||||
|
if (this.currentSection === null) this.currentSection = this.rootSection
|
||||||
|
this.prevSection = this.currentSection
|
||||||
|
|
||||||
|
if (panelhash === '') {
|
||||||
|
panelhash = 'root'
|
||||||
|
this.nextSection = this.rootSection
|
||||||
|
} else {
|
||||||
|
const wantSection: StarAnimateSection | null =
|
||||||
|
document.querySelector('star-animate-section' + panelhash);
|
||||||
|
if (wantSection === null) {
|
||||||
|
const loadsection = this.dynamicLoadSection(panelhash)
|
||||||
|
if (loadsection === null) return console.error('该panel不存在', panelhash)
|
||||||
|
else this.nextSection = loadsection
|
||||||
|
} else {
|
||||||
|
this.nextSection = wantSection
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.currentSection = this.nextSection
|
||||||
|
console.log(this.prevSection, this.currentSection)
|
||||||
|
|
||||||
|
this.nextSection.className = 'active r2m'
|
||||||
|
this.prevSection.className = 'm2l'
|
||||||
|
this.prevSection.addEventListener('animationend', (e) => {
|
||||||
|
console.log(e)
|
||||||
|
this.nextSection?.classList.remove('r2m')
|
||||||
|
this.prevSection?.classList.remove('m2l')
|
||||||
|
this.prevSection?.classList.add('inactive', 'l')
|
||||||
|
}, { once: true })
|
||||||
|
return
|
||||||
|
|
||||||
|
// switch (panelhash) {
|
||||||
|
// case '#icon':
|
||||||
|
// this.nextSection.className = 'active r2m'
|
||||||
|
// this.prevSection.className = 'm2l'
|
||||||
|
// this.prevSection.addEventListener('animationend', (e) => {
|
||||||
|
// console.log(e)
|
||||||
|
// this.nextSection?.classList.remove('r2m')
|
||||||
|
// this.prevSection?.classList.remove('m2l')
|
||||||
|
// this.prevSection?.classList.add('inactive', 'l')
|
||||||
|
// }, { once: true })
|
||||||
|
// break
|
||||||
|
// case '#root':
|
||||||
|
// default:
|
||||||
|
// this.nextSection.className = 'active l2m'
|
||||||
|
// this.prevSection.className = 'm2r'
|
||||||
|
// this.prevSection.addEventListener('animationend', (e) => {
|
||||||
|
// console.log(e)
|
||||||
|
// this.nextSection?.classList.remove('l2m');
|
||||||
|
// this.prevSection?.classList.remove('m2r');
|
||||||
|
// this.prevSection?.classList.add('inactive', 'r')
|
||||||
|
// }, { once: true })
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
window.addEventListener('hashchange', this)
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<star-animate-section id="root" class="active">
|
||||||
|
<panel-root></panel-root>
|
||||||
|
</star-animate-section>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host {
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.inactive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.r2m {
|
||||||
|
animation-name: right2middle;
|
||||||
|
}
|
||||||
|
.m2l {
|
||||||
|
animation-name: middle2left;
|
||||||
|
}
|
||||||
|
.l2m {
|
||||||
|
animation-name: left2middle;
|
||||||
|
}
|
||||||
|
.m2r {
|
||||||
|
animation-name: middle2right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r {
|
||||||
|
transform: translateX(var(--right-transform));
|
||||||
|
}
|
||||||
|
.l {
|
||||||
|
transform: translateX(var(--left-transform));
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes right2middle {
|
||||||
|
from {
|
||||||
|
transform: translateX(var(--right-transform));
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes middle2left {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
background-iconcolor: #f0f0f0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(var(--left-transform));
|
||||||
|
background-iconcolor: #e0e0e0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes left2middle {
|
||||||
|
from {
|
||||||
|
transform: translateX(var(--left-transform));
|
||||||
|
background-iconcolor: #e0e0e0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(0);
|
||||||
|
background-iconcolor: #f0f0f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes middle2right {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(var(--right-transform));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'settings-app': SettingsApp
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
import { html, css, LitElement } from 'lit'
|
|
||||||
import { customElement, property } from 'lit/decorators.js'
|
|
||||||
import litLogo from './assets/lit.svg'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An example element.
|
|
||||||
*
|
|
||||||
* @slot - This element has a slot
|
|
||||||
* @csspart button - The button
|
|
||||||
*/
|
|
||||||
@customElement('my-element')
|
|
||||||
export class MyElement extends LitElement {
|
|
||||||
/**
|
|
||||||
* Copy for the read the docs hint.
|
|
||||||
*/
|
|
||||||
@property()
|
|
||||||
docsHint = 'Click on the Vite and Lit logos to learn more'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The number of times the button has been clicked.
|
|
||||||
*/
|
|
||||||
@property({ type: Number })
|
|
||||||
count = 0
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div>
|
|
||||||
<a href="https://vitejs.dev" target="_blank">
|
|
||||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://lit.dev" target="_blank">
|
|
||||||
<img src=${litLogo} class="logo lit" alt="Lit logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<slot></slot>
|
|
||||||
<div class="card">
|
|
||||||
<button @click=${this._onClick} part="button">
|
|
||||||
count is ${this.count}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p class="read-the-docs">${this.docsHint}</p>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
private _onClick() {
|
|
||||||
this.count++
|
|
||||||
}
|
|
||||||
|
|
||||||
static styles = css`
|
|
||||||
:host {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
}
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.lit:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #325cffaa);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
'my-element': MyElement
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { html, LitElement, CSSResultArray } from 'lit'
|
||||||
|
import { customElement, property, state } from 'lit/decorators.js'
|
||||||
|
import { LiType } from '../../../components/li/li'
|
||||||
|
import { UlType } from '../../../components/ul/ul'
|
||||||
|
import { sharedStyles } from '../shared-styles';
|
||||||
|
|
||||||
|
@customElement('panel-about')
|
||||||
|
export class PanelAbout extends LitElement {
|
||||||
|
@property()
|
||||||
|
foo = ''
|
||||||
|
|
||||||
|
@state()
|
||||||
|
bar = ''
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<star-ul @click='' type=${UlType.ONLY_HEADER} title="我的网络">
|
||||||
|
<star-li type=${LiType.BASE}>FXJT</star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.BASE}>ZXXZ</star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.ONLY_FOOTER} text="无可用无线局域网时，允许此设备自动查找附近的个人热点。">
|
||||||
|
<star-li type=${LiType.BASE}>自动加入热点</star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
||||||
|
</star-ul>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [
|
||||||
|
sharedStyles
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-about': PanelAbout
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,290 @@
|
||||||
|
import { html, LitElement, CSSResultArray } from 'lit'
|
||||||
|
import { customElement, property, state } from 'lit/decorators.js'
|
||||||
|
import { repeat } from 'lit/directives/repeat.js'
|
||||||
|
import { UlType } from '../../../../components/ul/ul'
|
||||||
|
import { LiType } from '../../../../components/li/li'
|
||||||
|
import { sharedStyles } from '../../shared-styles';
|
||||||
|
import { nothing } from 'lit'
|
||||||
|
|
||||||
|
type LINENODE = {
|
||||||
|
node: String,
|
||||||
|
nodetype: LiType,
|
||||||
|
label: String,
|
||||||
|
value?: String,
|
||||||
|
href?: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
type BLOCKNODE = {
|
||||||
|
node: String,
|
||||||
|
nodetype: UlType,
|
||||||
|
nodes: Array<LINENODE>,
|
||||||
|
nodetitle?: String,
|
||||||
|
nodevalue?: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
@customElement('panel-about-machine')
|
||||||
|
export class PanelAboutMachine extends LitElement {
|
||||||
|
@property()
|
||||||
|
foo = ''
|
||||||
|
|
||||||
|
@state() paneljson = [
|
||||||
|
{
|
||||||
|
node: '<star-ul>',
|
||||||
|
nodetype: UlType.BASE,
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '名称',
|
||||||
|
value: 'StarElement',
|
||||||
|
href: '#icon'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '软件版本',
|
||||||
|
value: '15.5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '型号名称',
|
||||||
|
value: 'iPhone 13 Pro'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '型号号码',
|
||||||
|
value: 'MDNFAF3H/A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '序列号',
|
||||||
|
value: 'RFAFAFF12432GM'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-ul',
|
||||||
|
nodetype: UlType.BASE,
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '有限保修',
|
||||||
|
value: '到期日期: 2025/5/25',
|
||||||
|
href: '#icon'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: '<star-ul>',
|
||||||
|
nodetype: UlType.BASE,
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '歌曲',
|
||||||
|
value: '0'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '视频',
|
||||||
|
value: '430'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '照片',
|
||||||
|
value: '6050'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '应用程序',
|
||||||
|
value: '154'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '总容量',
|
||||||
|
value: '256 GB'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '可用容量',
|
||||||
|
value: '56.42 GB'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: '<star-ul>',
|
||||||
|
nodetype: UlType.BASE,
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '无线局域网地址',
|
||||||
|
value: '30:E2:D3:4A:C3:5D'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '蓝牙',
|
||||||
|
value: '30:E2:D3:4A:C3:5D'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '调制解调器固件',
|
||||||
|
value: '1.61.00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.ONLY_LABEL,
|
||||||
|
label: 'SEID',
|
||||||
|
href: '#icon'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '运营商锁',
|
||||||
|
value: '无 SIM 卡限制'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: '<star-ul>',
|
||||||
|
nodetype: UlType.ONLY_HEADER,
|
||||||
|
nodetitle: '主号',
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '网络',
|
||||||
|
value: '中国联通'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '运营商',
|
||||||
|
value: '中国联通 50.0'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: 'IMEI',
|
||||||
|
value: '35 717429 442903 2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: 'ICCID',
|
||||||
|
value: '89860118802136995387'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: 'MEID',
|
||||||
|
value: '35717429442903'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: '<star-ul>',
|
||||||
|
nodetype: UlType.ONLY_HEADER,
|
||||||
|
nodetitle: '副号',
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '网络',
|
||||||
|
value: '中国移动'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: '运营商',
|
||||||
|
value: '中国移动 50.0'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: 'IMEI',
|
||||||
|
value: '35 717429 442903 2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: 'ICCID',
|
||||||
|
value: '89860118802136995387'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.INFO_LABEL,
|
||||||
|
label: 'MEID',
|
||||||
|
value: '35717429442903'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: 'star-ul',
|
||||||
|
nodetype: UlType.BASE,
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
node: 'star-li',
|
||||||
|
nodetype: LiType.ONLY_LABEL,
|
||||||
|
label: '证书信任设置',
|
||||||
|
href: '#icon'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
${repeat(this.paneljson, (block: BLOCKNODE) => html`
|
||||||
|
<star-ul type=${block.nodetype} title=${block.nodetitle}>
|
||||||
|
${repeat(block.nodes, (node: LINENODE, index) => html`
|
||||||
|
${node.href
|
||||||
|
? html`
|
||||||
|
<star-li
|
||||||
|
type=${node.nodetype}
|
||||||
|
label=${node.label}
|
||||||
|
value=${node.value}
|
||||||
|
href=${node.href}
|
||||||
|
></star-li>
|
||||||
|
`
|
||||||
|
: html`
|
||||||
|
<star-li
|
||||||
|
type=${node.nodetype}
|
||||||
|
label=${node.label}
|
||||||
|
value=${node.value}
|
||||||
|
></star-li>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
${index < block.nodes.length - 1
|
||||||
|
? html`<hr>` // 分隔线
|
||||||
|
: nothing
|
||||||
|
}
|
||||||
|
`)}
|
||||||
|
</star-ul>
|
||||||
|
`)}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [
|
||||||
|
sharedStyles
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-about-machine': PanelAboutMachine
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
import { html, LitElement, CSSResultArray } from 'lit'
|
||||||
|
import { customElement } from 'lit/decorators.js'
|
||||||
|
import { eventOptions } from 'lit/decorators.js';
|
||||||
|
import { UlType } from '../../../components/ul/ul'
|
||||||
|
import { LiType } from '../../../components/li/li'
|
||||||
|
import { ButtonType, StarButton } from '../../../components/button/button'
|
||||||
|
import { sharedStyles } from '../shared-styles';
|
||||||
|
import './about_machine/about_machine'
|
||||||
|
import './update/auto_update'
|
||||||
|
import './update/update_system'
|
||||||
|
|
||||||
|
@customElement('panel-general')
|
||||||
|
export class PanelGeneral extends LitElement {
|
||||||
|
@eventOptions({passive: false})
|
||||||
|
handleEvent(evt: Event) {
|
||||||
|
switch (evt.type) {
|
||||||
|
case 'click':
|
||||||
|
if ((evt.target as StarButton).label === '关机') {
|
||||||
|
alert('关机')
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='关于本机' href='#about-machine'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='软件更新' href='#update-system'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='隔空投送' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='隔空播放与接力' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='画中画' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='CarPlay车载' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='NFC' href='#icon'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='iPhone存储空间' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='后台App刷新' href='#icon'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='日期与时间' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='键盘' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='字体' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='语言与地区' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='词典' href='#icon'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='VPN与设备管理' href='#icon'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='法律与监管' href='#icon'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label='传输或还原iPhone' href='#icon'></star-li>
|
||||||
|
<hr>
|
||||||
|
<star-button type=${ButtonType.BASE} label='关机' @click=${this}></star-button>
|
||||||
|
</star-ul>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [
|
||||||
|
sharedStyles
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-general': PanelGeneral
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { html, css, LitElement } from 'lit'
|
||||||
|
import { customElement, property, state } from 'lit/decorators.js'
|
||||||
|
import { LiType } from '../../../../components/li/li'
|
||||||
|
import { UlType } from '../../../../components/ul/ul'
|
||||||
|
|
||||||
|
@customElement('panel-auto-update')
|
||||||
|
export class PanelAutoUpdate extends LitElement {
|
||||||
|
@property()
|
||||||
|
foo = ''
|
||||||
|
|
||||||
|
@state()
|
||||||
|
bar = ''
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
||||||
|
</star-ul>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-auto-update': PanelAutoUpdate
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { html, LitElement, CSSResultArray } from 'lit'
|
||||||
|
import { customElement, property, state } from 'lit/decorators.js'
|
||||||
|
import { LiType } from '../../../../components/li/li'
|
||||||
|
import { UlType } from '../../../../components/ul/ul'
|
||||||
|
|
||||||
|
@customElement('panel-update-system')
|
||||||
|
export class PanelUpdateSystem extends LitElement {
|
||||||
|
@property()
|
||||||
|
foo = ''
|
||||||
|
|
||||||
|
@state()
|
||||||
|
bar = ''
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.INFO_LABEL} label='自动更新' value='打开' href='#auto-update'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label='查看所有图标' icon='all-day' href='#auto-update'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-update-system': PanelUpdateSystem
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,286 @@
|
||||||
|
import { html, LitElement, CSSResultArray } from 'lit'
|
||||||
|
import { customElement, property, state } from 'lit/decorators.js'
|
||||||
|
import { repeat } from 'lit/directives/repeat.js';
|
||||||
|
import { UlType } from '../../../components/ul/ul'
|
||||||
|
import { LiType } from '../../../components/li/li';
|
||||||
|
import { sharedStyles } from '../shared-styles';
|
||||||
|
|
||||||
|
@customElement('panel-icon')
|
||||||
|
export class PanelIcon extends LitElement {
|
||||||
|
@property() foo = ''
|
||||||
|
|
||||||
|
@state() icons = [
|
||||||
|
"2g",
|
||||||
|
"3g",
|
||||||
|
"4g",
|
||||||
|
|
||||||
|
"accessibility",
|
||||||
|
"achievement",
|
||||||
|
"add-contact",
|
||||||
|
"add",
|
||||||
|
"addons",
|
||||||
|
|
||||||
|
"airplane",
|
||||||
|
"alarm-clock",
|
||||||
|
"alarm-stop",
|
||||||
|
"alarm",
|
||||||
|
|
||||||
|
"album",
|
||||||
|
"all-day",
|
||||||
|
"arrow-left",
|
||||||
|
"arrow-right",
|
||||||
|
"artist",
|
||||||
|
"attachment",
|
||||||
|
"battery-0",
|
||||||
|
"battery-1",
|
||||||
|
"battery-2",
|
||||||
|
"battery-3",
|
||||||
|
"battery-4",
|
||||||
|
"battery-5",
|
||||||
|
"battery-6",
|
||||||
|
"battery-7",
|
||||||
|
"battery-8",
|
||||||
|
"battery-9",
|
||||||
|
"battery-10",
|
||||||
|
"battery-charging",
|
||||||
|
"battery-unknown",
|
||||||
|
|
||||||
|
"bluetooth-a2dp",
|
||||||
|
"bluetooth-circle",
|
||||||
|
"bluetooth-transfer-circle",
|
||||||
|
"bluetooth-transfer",
|
||||||
|
"bluetooth",
|
||||||
|
|
||||||
|
"brightness",
|
||||||
|
"browsing",
|
||||||
|
"bug",
|
||||||
|
|
||||||
|
"calendar",
|
||||||
|
"call-bluetooth",
|
||||||
|
"call-emergency",
|
||||||
|
"call-forwarding",
|
||||||
|
"call-hang-up",
|
||||||
|
"call-hold",
|
||||||
|
"call-incoming",
|
||||||
|
"call-merge",
|
||||||
|
"call-missed",
|
||||||
|
"call-outgoing",
|
||||||
|
"call-reversed",
|
||||||
|
"call-ringing",
|
||||||
|
"call",
|
||||||
|
"callback-emergency",
|
||||||
|
|
||||||
|
"camera",
|
||||||
|
"change-wallpaper",
|
||||||
|
"clear-input-left",
|
||||||
|
"clear-input-right",
|
||||||
|
|
||||||
|
"close",
|
||||||
|
"compose",
|
||||||
|
"contact-find",
|
||||||
|
"contacts",
|
||||||
|
"crashed",
|
||||||
|
"crop",
|
||||||
|
|
||||||
|
"data",
|
||||||
|
"delete",
|
||||||
|
"developer",
|
||||||
|
"device-info",
|
||||||
|
"dismiss-keyboard",
|
||||||
|
"do-not-track",
|
||||||
|
"download-circle",
|
||||||
|
"download",
|
||||||
|
|
||||||
|
"edge",
|
||||||
|
"edit-contact",
|
||||||
|
"edit-image",
|
||||||
|
"edit",
|
||||||
|
"effects",
|
||||||
|
"email-forward",
|
||||||
|
"email-mark-read",
|
||||||
|
"email-mark-unread",
|
||||||
|
"email-move",
|
||||||
|
"email-reply",
|
||||||
|
"email",
|
||||||
|
|
||||||
|
"exclamation",
|
||||||
|
"expand-left",
|
||||||
|
"expand-right",
|
||||||
|
"facebook",
|
||||||
|
"feedback",
|
||||||
|
"find",
|
||||||
|
"firefox",
|
||||||
|
"flag",
|
||||||
|
"flash-auto",
|
||||||
|
"flash-off",
|
||||||
|
"flash-on",
|
||||||
|
"focus-locked",
|
||||||
|
"focus-locking",
|
||||||
|
|
||||||
|
"gesture",
|
||||||
|
"gmail",
|
||||||
|
"grid-circular",
|
||||||
|
"grid",
|
||||||
|
"gsm",
|
||||||
|
|
||||||
|
"hdr-boxed",
|
||||||
|
"hdr",
|
||||||
|
"headphones",
|
||||||
|
"help",
|
||||||
|
"homescreen",
|
||||||
|
"hspa-plus",
|
||||||
|
"hspa",
|
||||||
|
|
||||||
|
"import-memorycard-circle",
|
||||||
|
"incoming-sms",
|
||||||
|
"info",
|
||||||
|
|
||||||
|
"keyboard-circle",
|
||||||
|
"keyboard",
|
||||||
|
|
||||||
|
"languages",
|
||||||
|
"left-light",
|
||||||
|
"left",
|
||||||
|
"link",
|
||||||
|
"location",
|
||||||
|
"lock",
|
||||||
|
|
||||||
|
"media-storage",
|
||||||
|
"menu",
|
||||||
|
"messages",
|
||||||
|
"mic",
|
||||||
|
"minus",
|
||||||
|
"moon",
|
||||||
|
"more",
|
||||||
|
"mute",
|
||||||
|
|
||||||
|
"nfc",
|
||||||
|
"no-sim",
|
||||||
|
"notifications",
|
||||||
|
|
||||||
|
"o",
|
||||||
|
"outgoing-sms",
|
||||||
|
"outlook",
|
||||||
|
|
||||||
|
"pause",
|
||||||
|
"picture-size",
|
||||||
|
"play",
|
||||||
|
"play-circle",
|
||||||
|
"playlist",
|
||||||
|
"privacy",
|
||||||
|
|
||||||
|
"recent-calls",
|
||||||
|
"reload",
|
||||||
|
"repeat-once",
|
||||||
|
"repeat",
|
||||||
|
"reply-all",
|
||||||
|
"right-light",
|
||||||
|
"right",
|
||||||
|
"rocket",
|
||||||
|
"rotate",
|
||||||
|
|
||||||
|
"scene",
|
||||||
|
"sd-card",
|
||||||
|
"search",
|
||||||
|
"seek-back",
|
||||||
|
"seek-forward",
|
||||||
|
"select",
|
||||||
|
"self-timer",
|
||||||
|
"send-left",
|
||||||
|
"send-right",
|
||||||
|
"settings",
|
||||||
|
"share",
|
||||||
|
"shuffle",
|
||||||
|
|
||||||
|
"signal-0",
|
||||||
|
"signal-1",
|
||||||
|
"signal-2",
|
||||||
|
"signal-3",
|
||||||
|
"signal-4",
|
||||||
|
"signal-5",
|
||||||
|
"signal-roaming",
|
||||||
|
|
||||||
|
"sim-toolkit",
|
||||||
|
"sim",
|
||||||
|
|
||||||
|
"skip-back",
|
||||||
|
"skip-forward",
|
||||||
|
|
||||||
|
"songs",
|
||||||
|
"sound-max",
|
||||||
|
"sound-min",
|
||||||
|
"star-empty",
|
||||||
|
"star-full",
|
||||||
|
|
||||||
|
"stop",
|
||||||
|
"storage-circle",
|
||||||
|
"storage",
|
||||||
|
"switch",
|
||||||
|
"sync",
|
||||||
|
|
||||||
|
"tethering",
|
||||||
|
"themes",
|
||||||
|
"tick-circle",
|
||||||
|
"tick",
|
||||||
|
"time",
|
||||||
|
"toggle-camera-front",
|
||||||
|
"toggle-camera-rear",
|
||||||
|
"topup-with-code",
|
||||||
|
"topup",
|
||||||
|
"twitter",
|
||||||
|
|
||||||
|
"undo-circular",
|
||||||
|
"undo",
|
||||||
|
"unlock",
|
||||||
|
"update-balance",
|
||||||
|
"usb",
|
||||||
|
"user",
|
||||||
|
|
||||||
|
"vibrate",
|
||||||
|
"video-mic",
|
||||||
|
"video-size",
|
||||||
|
"video",
|
||||||
|
"voicemail",
|
||||||
|
|
||||||
|
"wallpaper",
|
||||||
|
"wifi-1",
|
||||||
|
"wifi-2",
|
||||||
|
"wifi-3",
|
||||||
|
"wifi-4",
|
||||||
|
"wifi-permissions"
|
||||||
|
]
|
||||||
|
|
||||||
|
getRangeColor() {
|
||||||
|
const r = ((255 * Math.random())>>0).toString(16).padStart(2, '0');
|
||||||
|
const g = ((255 * Math.random())>>0).toString(16).padStart(2, '0');
|
||||||
|
const b = ((255 * Math.random())>>0).toString(16).padStart(2, '0');
|
||||||
|
return "#"+r+g+b;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<star-ul type=${UlType.HEADER_FOOTER} title="GaiaIcon图标" text='以上GaiaIcon图标为YROS V4内容'>
|
||||||
|
${repeat(this.icons, (iconname, index) => html`
|
||||||
|
<star-li type=${LiType.ICON_LABEL}
|
||||||
|
label=${iconname}
|
||||||
|
icon=${iconname}
|
||||||
|
iconcolor=${this.getRangeColor()}
|
||||||
|
></star-li>
|
||||||
|
${index < this.icons.length - 1 ? html`<hr>` : null}
|
||||||
|
`)}
|
||||||
|
</star-ul>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [
|
||||||
|
sharedStyles
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-icon': PanelIcon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
import { html, LitElement, CSSResultArray } from 'lit'
|
||||||
|
import { customElement, state } from 'lit/decorators.js'
|
||||||
|
import { LiType } from '../../components/li/li'
|
||||||
|
import { UlType } from '../../components/ul/ul'
|
||||||
|
import { sharedStyles } from './shared-styles';
|
||||||
|
import './about/about'
|
||||||
|
import './icon/icon'
|
||||||
|
import './general/general'
|
||||||
|
|
||||||
|
type SEID = String
|
||||||
|
|
||||||
|
@customElement('panel-root')
|
||||||
|
export class PanelRoot extends LitElement {
|
||||||
|
@state() wlanMacAddress = "31:D2:3F:4E:D2:5B"
|
||||||
|
@state() availableCapability = "50.26GB"
|
||||||
|
@state() seid = this.genMockSeid()
|
||||||
|
@state() otherdevice = '若要将手表与手机配对，请前往 <a href="https://www.kylinos.cn/about/contact.html">https://help.kylin.cn</a>'
|
||||||
|
|
||||||
|
genMockSeid(): SEID {
|
||||||
|
return Array(48)
|
||||||
|
.fill(0)
|
||||||
|
.map(() => "0123456789ABCDEF"[Math.floor(Math.random()*16)])
|
||||||
|
.join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
rootPanel = html`
|
||||||
|
<star-ul type=${UlType.HEADER_FOOTER} title="完整栏" text='可在上栏中填充任意类型的条目'>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label="带跳转的条目" href="#about"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="带图标的条目" icon="privacy"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="带颜色图标的条目" icon="privacy" iconcolor="green"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=1></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=99></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=999></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.BUBBLE_LABEL} label="有软件更新可用" href="#about" bubble=1></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.BUBBLE_LABEL} label="包含以上的条目" icon="privacy" iconcolor="orange" href="#about" bubble=8></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="通用" icon="play-circle" iconcolor="red" href="#general"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="关于" icon="privacy" iconcolor="purple" href="#about"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="辅助" icon="accessibility" iconcolor="blue" href="#about"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="成就" icon="achievement" iconcolor="gold" href="#about"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="插件" icon="addons" iconcolor="green" href="#about"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.ONLY_EDIT} label='星光麒麟' default='星光麒麟'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.ONLY_HEADER} title="头部有文字" text="尾部有文字">
|
||||||
|
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.ONLY_READ} label=${this.seid}></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.BASE}>
|
||||||
|
<star-li type=${LiType.INFO_LABEL} label='无线局域网地址' value=${this.wlanMacAddress}></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.INFO_LABEL} label='可用容量' value=${this.availableCapability}></star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.HEADER_FOOTER} title="其他设备" text=${this.otherdevice}>
|
||||||
|
<star-li type=${LiType.BASE}>自动加入热点</star-li>
|
||||||
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.ONLY_HEADER} title="保障详情">
|
||||||
|
<star-li type=${LiType.INFO_LABEL} label='硬件保障' value='在保障范围内'></star-li>
|
||||||
|
<hr/>
|
||||||
|
<star-li type=${LiType.INFO_LABEL} label='技术支持' value='在保障范围内'></star-li>
|
||||||
|
</star-ul>
|
||||||
|
`
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
${this.rootPanel}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [
|
||||||
|
sharedStyles
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-root': PanelRoot
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { css, CSSResult } from 'lit'
|
||||||
|
|
||||||
|
export const sharedStyles: CSSResult = css`
|
||||||
|
hr {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0 0 1px 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #ccc;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/// <reference types="vite/client" />
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
|
"target": "ES2022",
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
"declaration": true,
|
"declaration": true,
|
||||||
"emitDeclarationOnly": true,
|
"emitDeclarationOnly": true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue