add prettier tool
This commit is contained in:
wangchangqi
parent
ed98ecd409
commit
e234064b3c
|
|
@ -22,3 +22,4 @@ dist-ssr
|
||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
temp/
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
.DS_Store
|
||||||
|
/temp
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
printWidth: 80
|
||||||
|
tabWidth: 2
|
||||||
|
useTabs: false
|
||||||
|
semi: false
|
||||||
|
singleQuote: true
|
||||||
|
quoteProps: 'as-needed'
|
||||||
|
bracketSpacing: false
|
||||||
|
# 多属性html标签的‘>’折行放置
|
||||||
|
jsxBracketSameLine: false
|
||||||
|
arrowParens: 'always'
|
||||||
|
requirePragma: false
|
||||||
|
insertPragma: false
|
||||||
|
# //对HTML全局空白不敏感
|
||||||
|
htmlWhitespaceSensitivity: 'ignore'
|
||||||
|
# 结束行形式
|
||||||
|
endOfLine: 'lf'
|
||||||
|
# 对引用代码进行格式化
|
||||||
|
embeddedLanguageFormatting: 'auto'
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"Star Element Template": {
|
||||||
|
"scope": "javascript,typescript,css",
|
||||||
|
"prefix": [
|
||||||
|
"staret",
|
||||||
|
],
|
||||||
|
"body": [
|
||||||
|
"import { html, css, LitElement } from 'lit'",
|
||||||
|
"import { customElement, property, state } from 'lit/decorators.js'",
|
||||||
|
"",
|
||||||
|
"@customElement('$1')",
|
||||||
|
"export class $0 extends LitElement {",
|
||||||
|
" @property()",
|
||||||
|
" foo = ''",
|
||||||
|
"",
|
||||||
|
" @state()",
|
||||||
|
" bar = ''",
|
||||||
|
"",
|
||||||
|
" render() {",
|
||||||
|
" return html`",
|
||||||
|
" ",
|
||||||
|
" `",
|
||||||
|
" }",
|
||||||
|
"",
|
||||||
|
" static styles = css`",
|
||||||
|
" ",
|
||||||
|
" `",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"declare global {",
|
||||||
|
" interface HTMLElementTagNameMap {",
|
||||||
|
" '$1': $0",
|
||||||
|
" }",
|
||||||
|
"}",
|
||||||
|
],
|
||||||
|
"description": "Insert Star Web Component Template"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Star-Web-Components
|
# Star-Web-Components
|
||||||
|
|
||||||
星光Web组件
|
星光 Web 组件
|
||||||
|
|
||||||
## 拉取
|
## 拉取
|
||||||
|
|
||||||
|
|
@ -18,9 +18,9 @@ git checkout -b feature-component-button master
|
||||||
|
|
||||||
## 示例运行
|
## 示例运行
|
||||||
|
|
||||||
pnpm 是npm包管理领域一个新的、领先的包管理器。
|
pnpm 是 npm 包管理领域一个新的、领先的包管理器。
|
||||||
|
|
||||||
若无 pnpm，请先进行全局安装及切换npm源至[国内镜像源](https://www.npmmirror.com/)。
|
若无 pnpm，请先进行全局安装及切换 npm 源至[国内镜像源](https://www.npmmirror.com/)。
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
pnpm install # 安装开发调试依赖包
|
pnpm install # 安装开发调试依赖包
|
||||||
|
|
|
||||||
|
|
@ -26,8 +26,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "gaia-icons";
|
font-family: 'gaia-icons';
|
||||||
src: url("fonts/gaia-icons.ttf") format("truetype");
|
src: url('fonts/gaia-icons.ttf') format('truetype');
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,12 +14,15 @@
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build"
|
"build": "tsc && vite build",
|
||||||
|
"format": "npm run format:prettier",
|
||||||
|
"format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lit": "^2.2.7"
|
"lit": "^2.2.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"prettier": "^2.7.1",
|
||||||
"typescript": "^4.6.4",
|
"typescript": "^4.6.4",
|
||||||
"vite": "^3.0.0"
|
"vite": "^3.0.0"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ lockfileVersion: 5.4
|
||||||
|
|
||||||
specifiers:
|
specifiers:
|
||||||
lit: ^2.2.7
|
lit: ^2.2.7
|
||||||
|
prettier: ^2.7.1
|
||||||
typescript: ^4.6.4
|
typescript: ^4.6.4
|
||||||
vite: ^3.0.0
|
vite: ^3.0.0
|
||||||
|
|
||||||
|
|
@ -9,6 +10,7 @@ dependencies:
|
||||||
lit: registry.npmmirror.com/lit/2.2.8
|
lit: registry.npmmirror.com/lit/2.2.8
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
|
prettier: registry.npmmirror.com/prettier/2.7.1
|
||||||
typescript: registry.npmmirror.com/typescript/4.7.4
|
typescript: registry.npmmirror.com/typescript/4.7.4
|
||||||
vite: registry.npmmirror.com/vite/3.0.4
|
vite: registry.npmmirror.com/vite/3.0.4
|
||||||
|
|
||||||
|
|
@ -379,6 +381,14 @@ packages:
|
||||||
source-map-js: registry.npmmirror.com/source-map-js/1.0.2
|
source-map-js: registry.npmmirror.com/source-map-js/1.0.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
registry.npmmirror.com/prettier/2.7.1:
|
||||||
|
resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/prettier/-/prettier-2.7.1.tgz}
|
||||||
|
name: prettier
|
||||||
|
version: 2.7.1
|
||||||
|
engines: {node: '>=10.13.0'}
|
||||||
|
hasBin: true
|
||||||
|
dev: true
|
||||||
|
|
||||||
registry.npmmirror.com/resolve/1.22.1:
|
registry.npmmirror.com/resolve/1.22.1:
|
||||||
resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz}
|
resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz}
|
||||||
name: resolve
|
name: resolve
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import { html, css, LitElement, nothing } from 'lit'
|
import {html, css, LitElement, nothing} from 'lit'
|
||||||
import { customElement, property } from 'lit/decorators.js'
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
|
|
||||||
@customElement('star-bubble')
|
@customElement('star-bubble')
|
||||||
export class StarBubble extends LitElement {
|
export class StarBubble extends LitElement {
|
||||||
@property({ type: Number }) number = 0
|
@property({type: Number}) number = 0
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
/**
|
/**
|
||||||
|
|
@ -11,22 +11,27 @@ export class StarBubble extends LitElement {
|
||||||
* 数字可弹性伸缩。
|
* 数字可弹性伸缩。
|
||||||
*/
|
*/
|
||||||
if (this.number <= 0) return nothing
|
if (this.number <= 0) return nothing
|
||||||
else if (this.number > 99) return html`
|
else if (this.number > 99)
|
||||||
<div>
|
return html`
|
||||||
<span class='small'>99<sup>+</sup></span>
|
<div>
|
||||||
</div>
|
<span class="small">
|
||||||
`
|
99
|
||||||
else return html`
|
<sup>+</sup>
|
||||||
<div>
|
</span>
|
||||||
<span>${this.number}</span>
|
</div>
|
||||||
</div>
|
`
|
||||||
`
|
else
|
||||||
|
return html`
|
||||||
|
<div>
|
||||||
|
<span>${this.number}</span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
:host {
|
:host {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: calc(var(--li-base-height) - 16px); /* 尽量节省宽度 */
|
width: calc(var(--li-base-height) - 16px); /* 尽量节省宽度 */
|
||||||
height: var(--li-base-height);
|
height: var(--li-base-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,25 @@
|
||||||
import { html, LitElement, CSSResultArray, HTMLTemplateResult, nothing } from 'lit'
|
import {
|
||||||
import { customElement, property } from 'lit/decorators.js'
|
html,
|
||||||
import { sharedStyles } from './button-styles';
|
LitElement,
|
||||||
|
CSSResultArray,
|
||||||
|
HTMLTemplateResult,
|
||||||
|
nothing,
|
||||||
|
} from 'lit'
|
||||||
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
|
import {sharedStyles} from './button-styles'
|
||||||
|
|
||||||
export enum ButtonType {
|
export enum ButtonType {
|
||||||
BASE = 'base'
|
BASE = 'base',
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement('star-button')
|
@customElement('star-button')
|
||||||
export class StarButton extends LitElement {
|
export class StarButton extends LitElement {
|
||||||
public static override get styles(): CSSResultArray {
|
public static override get styles(): CSSResultArray {
|
||||||
return [
|
return [sharedStyles]
|
||||||
sharedStyles
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@property({ type: ButtonType }) type = ''
|
@property({type: ButtonType}) type = ''
|
||||||
@property({ type: String }) label = ''
|
@property({type: String}) label = ''
|
||||||
|
|
||||||
getBaseButton(): HTMLTemplateResult {
|
getBaseButton(): HTMLTemplateResult {
|
||||||
return html`
|
return html`
|
||||||
|
|
@ -24,8 +28,9 @@ export class StarButton extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
switch(this.type) {
|
switch (this.type) {
|
||||||
case ButtonType.BASE: return this.getBaseButton()
|
case ButtonType.BASE:
|
||||||
|
return this.getBaseButton()
|
||||||
default:
|
default:
|
||||||
console.error('unhanled 【star-button】 type')
|
console.error('unhanled 【star-button】 type')
|
||||||
return nothing
|
return nothing
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,33 @@
|
||||||
import { html, css, LitElement, HTMLTemplateResult, nothing } from 'lit'
|
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
|
||||||
import { customElement, property } from 'lit/decorators.js'
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
import { classMap } from 'lit/directives/class-map.js';
|
import {classMap} from 'lit/directives/class-map.js'
|
||||||
import '../bubble/bubble'
|
import '../bubble/bubble'
|
||||||
|
|
||||||
export enum LiType {
|
export enum LiType {
|
||||||
BASE = 'base',
|
BASE = 'base',
|
||||||
BUBBLE_LABEL = 'bubble-label',
|
BUBBLE_LABEL = 'bubble-label',
|
||||||
ICON_LABEL = 'icon-label',
|
ICON_LABEL = 'icon-label',
|
||||||
INFO_LABEL = 'info-label',
|
INFO_LABEL = 'info-label',
|
||||||
ONLY_EDIT = 'only-edit',
|
ONLY_EDIT = 'only-edit',
|
||||||
ONLY_LABEL = 'only-label',
|
ONLY_LABEL = 'only-label',
|
||||||
ONLY_READ = 'only-read',
|
ONLY_READ = 'only-read',
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement('star-li')
|
@customElement('star-li')
|
||||||
export class StarLi extends LitElement {
|
export class StarLi extends LitElement {
|
||||||
@property({ type: LiType }) type = ''
|
@property({type: LiType}) type = ''
|
||||||
@property({ type: String }) label = ''
|
@property({type: String}) label = ''
|
||||||
@property({ type: String }) value = ''
|
@property({type: String}) value = ''
|
||||||
@property({ type: String }) default = ''
|
@property({type: String}) default = ''
|
||||||
@property({ type: String }) href = ''
|
@property({type: String}) href = ''
|
||||||
@property({ type: String }) icon = ''
|
@property({type: String}) icon = ''
|
||||||
@property({ type: String }) iconcolor = ''
|
@property({type: String}) iconcolor = ''
|
||||||
@property({ type: Number }) bubble = 0
|
@property({type: Number}) bubble = 0
|
||||||
|
|
||||||
getbase(): HTMLTemplateResult {
|
getbase(): HTMLTemplateResult {
|
||||||
return html`<li><slot></slot></li>`
|
return html`
|
||||||
|
<li><slot></slot></li>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
getbubblelabel(): HTMLTemplateResult | typeof nothing {
|
getbubblelabel(): HTMLTemplateResult | typeof nothing {
|
||||||
|
|
@ -38,30 +40,36 @@ export class StarLi extends LitElement {
|
||||||
return nothing
|
return nothing
|
||||||
}
|
}
|
||||||
|
|
||||||
const classes = `${this.href ? 'hashref' : ''} ${this.icon ? 'hasicon' : ''}`
|
const classes = `${this.href ? 'hashref' : ''} ${
|
||||||
|
this.icon ? 'hasicon' : ''
|
||||||
|
}`
|
||||||
const colorstyle = this.iconcolor
|
const colorstyle = this.iconcolor
|
||||||
? html`<style>
|
? html`
|
||||||
a::before {
|
<style>
|
||||||
color: ${this.iconcolor} !important
|
a::before {
|
||||||
}
|
color: ${this.iconcolor} !important;
|
||||||
</style>`
|
}
|
||||||
|
</style>
|
||||||
|
`
|
||||||
: nothing
|
: nothing
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<li>
|
<li>
|
||||||
${this.href ? html`
|
${this.href
|
||||||
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
? html`
|
||||||
${colorstyle}
|
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
||||||
<span class="label">${this.label}</span>
|
${colorstyle}
|
||||||
<star-bubble number=${this.bubble}></star-bubble>
|
<span class="label">${this.label}</span>
|
||||||
</a>
|
<star-bubble number=${this.bubble}></star-bubble>
|
||||||
` : html`
|
</a>
|
||||||
<a data-icon=${this.icon} class=${classes}>
|
`
|
||||||
${colorstyle}
|
: html`
|
||||||
<span class="label">${this.label}</span>
|
<a data-icon=${this.icon} class=${classes}>
|
||||||
<star-bubble number=${this.bubble}></star-bubble>
|
${colorstyle}
|
||||||
</a>
|
<span class="label">${this.label}</span>
|
||||||
`}
|
<star-bubble number=${this.bubble}></star-bubble>
|
||||||
|
</a>
|
||||||
|
`}
|
||||||
</li>
|
</li>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
@ -78,26 +86,30 @@ export class StarLi extends LitElement {
|
||||||
|
|
||||||
const classes = this.href ? 'hasicon hashref' : 'hasicon'
|
const classes = this.href ? 'hasicon hashref' : 'hasicon'
|
||||||
const colorstyle = this.iconcolor
|
const colorstyle = this.iconcolor
|
||||||
? html`<style>
|
? html`
|
||||||
a::before {
|
<style>
|
||||||
color: ${this.iconcolor} !important
|
a::before {
|
||||||
}
|
color: ${this.iconcolor} !important;
|
||||||
</style>`
|
}
|
||||||
|
</style>
|
||||||
|
`
|
||||||
: nothing
|
: nothing
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<li>
|
<li>
|
||||||
${this.href ? html`
|
${this.href
|
||||||
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
? html`
|
||||||
${colorstyle}
|
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
||||||
<span class="label">${this.label}</span>
|
${colorstyle}
|
||||||
</a>
|
<span class="label">${this.label}</span>
|
||||||
` : html`
|
</a>
|
||||||
<a data-icon=${this.icon} class=${classes}>
|
`
|
||||||
${colorstyle}
|
: html`
|
||||||
<span class="label">${this.label}</span>
|
<a data-icon=${this.icon} class=${classes}>
|
||||||
</a>
|
${colorstyle}
|
||||||
`}
|
<span class="label">${this.label}</span>
|
||||||
|
</a>
|
||||||
|
`}
|
||||||
</li>
|
</li>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
@ -119,11 +131,10 @@ export class StarLi extends LitElement {
|
||||||
<span class="infovalue">${this.value}</span>
|
<span class="infovalue">${this.value}</span>
|
||||||
</li>
|
</li>
|
||||||
`
|
`
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
return html`
|
return html`
|
||||||
<li class='hashref'>
|
<li class="hashref">
|
||||||
<a href=${this.href} class='hashref'>
|
<a href=${this.href} class="hashref">
|
||||||
<span class="infokey">${this.label}</span>
|
<span class="infokey">${this.label}</span>
|
||||||
<span class="infovalue">${this.value}</span>
|
<span class="infovalue">${this.value}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -140,15 +151,17 @@ export class StarLi extends LitElement {
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<li>
|
<li>
|
||||||
${this.href ? html`
|
${this.href
|
||||||
<a href=${this.href} class='hashref'>
|
? html`
|
||||||
<span class="label">${this.label}</span>
|
<a href=${this.href} class="hashref">
|
||||||
</a>
|
<span class="label">${this.label}</span>
|
||||||
` : html`
|
</a>
|
||||||
<a>
|
`
|
||||||
<span class="label">${this.label}</span>
|
: html`
|
||||||
</a>
|
<a>
|
||||||
`}
|
<span class="label">${this.label}</span>
|
||||||
|
</a>
|
||||||
|
`}
|
||||||
</li>
|
</li>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
@ -161,7 +174,7 @@ export class StarLi extends LitElement {
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<li>
|
<li>
|
||||||
<span class='onlyread'>${this.label}</span>
|
<span class="onlyread">${this.label}</span>
|
||||||
</li>
|
</li>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
@ -178,20 +191,27 @@ export class StarLi extends LitElement {
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<li>
|
<li>
|
||||||
<input value="${this.label}" placeholder="${this.default}">
|
<input value="${this.label}" placeholder="${this.default}" />
|
||||||
</li>
|
</li>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
switch (this.type) {
|
switch (this.type) {
|
||||||
case LiType.BASE: return this.getbase()
|
case LiType.BASE:
|
||||||
case LiType.BUBBLE_LABEL: return this.getbubblelabel()
|
return this.getbase()
|
||||||
case LiType.ICON_LABEL: return this.geticonlabel()
|
case LiType.BUBBLE_LABEL:
|
||||||
case LiType.INFO_LABEL: return this.getinfolabel()
|
return this.getbubblelabel()
|
||||||
case LiType.ONLY_EDIT: return this.getonlyedit()
|
case LiType.ICON_LABEL:
|
||||||
case LiType.ONLY_LABEL: return this.getonlylabel()
|
return this.geticonlabel()
|
||||||
case LiType.ONLY_READ: return this.getonlyread()
|
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:
|
default:
|
||||||
console.error('unhanled 【star-li】 type')
|
console.error('unhanled 【star-li】 type')
|
||||||
return nothing
|
return nothing
|
||||||
|
|
@ -208,7 +228,9 @@ export class StarLi extends LitElement {
|
||||||
min-height: var(--li-base-height);
|
min-height: var(--li-base-height);
|
||||||
line-height: var(--li-base-height);
|
line-height: var(--li-base-height);
|
||||||
padding-inline-start: var(--li-left-padding);
|
padding-inline-start: var(--li-left-padding);
|
||||||
padding-inline-end: var(--li-right-padding); /* right-arrow须与最右侧文字对齐 */
|
padding-inline-end: var(
|
||||||
|
--li-right-padding
|
||||||
|
); /* right-arrow须与最右侧文字对齐 */
|
||||||
}
|
}
|
||||||
li.hashref {
|
li.hashref {
|
||||||
/* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */
|
/* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */
|
||||||
|
|
@ -219,12 +241,13 @@ export class StarLi extends LitElement {
|
||||||
color: #000;
|
color: #000;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
a.hasicon::before, a.hashref::after {
|
a.hasicon::before,
|
||||||
|
a.hashref::after {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
min-width: 25px;
|
min-width: 25px;
|
||||||
max-width: 25px;
|
max-width: 25px;
|
||||||
font-family: "gaia-icons";
|
font-family: 'gaia-icons';
|
||||||
}
|
}
|
||||||
a.hasicon::before {
|
a.hasicon::before {
|
||||||
color: #657073;
|
color: #657073;
|
||||||
|
|
@ -235,7 +258,7 @@ export class StarLi extends LitElement {
|
||||||
a.hashref::after {
|
a.hashref::after {
|
||||||
color: #a5acae;
|
color: #a5acae;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
content: "right-light";
|
content: 'right-light';
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
@ -250,7 +273,8 @@ export class StarLi extends LitElement {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
span.infokey, span.label {
|
span.infokey,
|
||||||
|
span.label {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { html, css, LitElement, nothing } from 'lit'
|
import {html, css, LitElement, nothing} from 'lit'
|
||||||
import { customElement, property, state } from 'lit/decorators.js'
|
import {customElement, property, state} from 'lit/decorators.js'
|
||||||
|
|
||||||
@customElement('star-animate-section')
|
@customElement('star-animate-section')
|
||||||
export class StarAnimateSection extends LitElement {
|
export class StarAnimateSection extends LitElement {
|
||||||
|
|
@ -10,13 +10,15 @@ export class StarAnimateSection extends LitElement {
|
||||||
bar = ''
|
bar = ''
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const withTransform = this.transform ? html`
|
const withTransform = this.transform
|
||||||
<style>
|
? html`
|
||||||
:host {
|
<style>
|
||||||
transform: ${this.transform};
|
:host {
|
||||||
}
|
transform: ${this.transform};
|
||||||
</style>
|
}
|
||||||
` : nothing
|
</style>
|
||||||
|
`
|
||||||
|
: nothing
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
${withTransform}
|
${withTransform}
|
||||||
|
|
@ -33,7 +35,7 @@ export class StarAnimateSection extends LitElement {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
/* height: calc(100vh + 1px); */ /* 手动制造溢出 */
|
/* height: calc(100vh + 1px); */ /* 手动制造溢出 */
|
||||||
animation-duration: .3s;
|
animation-duration: 0.3s;
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
import { html, css, LitElement, HTMLTemplateResult, nothing } from 'lit'
|
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
|
||||||
import { customElement, property } from 'lit/decorators.js'
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
import {unsafeHTML} from 'lit/directives/unsafe-html.js'
|
||||||
|
|
||||||
export enum UlType {
|
export enum UlType {
|
||||||
BASE = 'base',
|
BASE = 'base',
|
||||||
ONLY_HEADER = 'onlyheader',
|
ONLY_HEADER = 'onlyheader',
|
||||||
ONLY_FOOTER = 'onlyfooter',
|
ONLY_FOOTER = 'onlyfooter',
|
||||||
HEADER_FOOTER = 'headerfooter',
|
HEADER_FOOTER = 'headerfooter',
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement('star-ul')
|
@customElement('star-ul')
|
||||||
export class StarUl extends LitElement {
|
export class StarUl extends LitElement {
|
||||||
@property({ type: UlType }) type = ''
|
@property({type: UlType}) type = ''
|
||||||
@property({ type: String }) title = ''
|
@property({type: String}) title = ''
|
||||||
@property({ type: String }) text = ''
|
@property({type: String}) text = ''
|
||||||
|
|
||||||
getbase(): HTMLTemplateResult {
|
getbase(): HTMLTemplateResult {
|
||||||
return html`
|
return html`
|
||||||
|
|
@ -78,10 +78,14 @@ export class StarUl extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (this.type) {
|
switch (this.type) {
|
||||||
case UlType.BASE: return this.getbase()
|
case UlType.BASE:
|
||||||
case UlType.HEADER_FOOTER: return this.getheaderfooter()
|
return this.getbase()
|
||||||
case UlType.ONLY_HEADER: return this.getonlyheader()
|
case UlType.HEADER_FOOTER:
|
||||||
case UlType.ONLY_FOOTER: return this.getonlyfooter()
|
return this.getheaderfooter()
|
||||||
|
case UlType.ONLY_HEADER:
|
||||||
|
return this.getonlyheader()
|
||||||
|
case UlType.ONLY_FOOTER:
|
||||||
|
return this.getonlyfooter()
|
||||||
default:
|
default:
|
||||||
console.error('unhanled 【star-ul】 type')
|
console.error('unhanled 【star-ul】 type')
|
||||||
return nothing
|
return nothing
|
||||||
|
|
@ -109,7 +113,8 @@ export class StarUl extends LitElement {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header, footer {
|
header,
|
||||||
|
footer {
|
||||||
color: #888;
|
color: #888;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
||||||
52
src/index.ts
52
src/index.ts
|
|
@ -1,34 +1,32 @@
|
||||||
import { html, css, LitElement } from 'lit'
|
import {html, css, LitElement} from 'lit'
|
||||||
import { customElement, query, state } from 'lit/decorators.js'
|
import {customElement, query, state} from 'lit/decorators.js'
|
||||||
import './components/ul/ul'
|
import './components/ul/ul'
|
||||||
import './components/li/li'
|
import './components/li/li'
|
||||||
import './components/section/section'
|
import './components/section/section'
|
||||||
import { StarAnimateSection } from './components/section/section'
|
import {StarAnimateSection} from './components/section/section'
|
||||||
|
|
||||||
import './test/panels/root'
|
import './test/panels/root'
|
||||||
|
|
||||||
@customElement('settings-app')
|
@customElement('settings-app')
|
||||||
export class SettingsApp extends LitElement {
|
export class SettingsApp extends LitElement {
|
||||||
|
@query('star-animate-section#root') private rootSection!: StarAnimateSection
|
||||||
@query('star-animate-section#root') private rootSection!: StarAnimateSection;
|
|
||||||
|
|
||||||
@state() sectionsMap = new Map()
|
@state() sectionsMap = new Map()
|
||||||
|
|
||||||
@state() prevSection: StarAnimateSection | null = null;
|
@state() prevSection: StarAnimateSection | null = null
|
||||||
@state() nextSection: StarAnimateSection | null = null;
|
@state() nextSection: StarAnimateSection | null = null
|
||||||
@state() currentSection: StarAnimateSection | null = null;
|
@state() currentSection: StarAnimateSection | null = null
|
||||||
|
|
||||||
|
|
||||||
handleEvent(evt: Event) {
|
handleEvent(evt: Event) {
|
||||||
switch(evt.type) {
|
switch (evt.type) {
|
||||||
case 'hashchange':
|
case 'hashchange':
|
||||||
// console.log(evt)
|
// console.log(evt)
|
||||||
const newURL = (evt as HashChangeEvent).newURL;
|
const newURL = (evt as HashChangeEvent).newURL
|
||||||
// const oldURL = (evt as HashChangeEvent).oldURL;
|
// const oldURL = (evt as HashChangeEvent).oldURL;
|
||||||
const goPanelHash = new URL(newURL).hash;
|
const goPanelHash = new URL(newURL).hash
|
||||||
this.navigate(goPanelHash)
|
this.navigate(goPanelHash)
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -62,12 +60,14 @@ export class SettingsApp extends LitElement {
|
||||||
panelhash = 'root'
|
panelhash = 'root'
|
||||||
this.nextSection = this.rootSection
|
this.nextSection = this.rootSection
|
||||||
} else {
|
} else {
|
||||||
const wantSection: StarAnimateSection | null =
|
const wantSection: StarAnimateSection | null = document.querySelector(
|
||||||
document.querySelector('star-animate-section' + panelhash);
|
'star-animate-section' + panelhash
|
||||||
|
)
|
||||||
if (wantSection === null) {
|
if (wantSection === null) {
|
||||||
const loadsection = this.dynamicLoadSection(panelhash)
|
const loadsection = this.dynamicLoadSection(panelhash)
|
||||||
if (loadsection === null) return console.error('该panel不存在', panelhash)
|
if (loadsection === null)
|
||||||
else this.nextSection = loadsection
|
return console.error('该panel不存在', panelhash)
|
||||||
|
else this.nextSection = loadsection
|
||||||
} else {
|
} else {
|
||||||
this.nextSection = wantSection
|
this.nextSection = wantSection
|
||||||
}
|
}
|
||||||
|
|
@ -77,12 +77,16 @@ export class SettingsApp extends LitElement {
|
||||||
|
|
||||||
this.nextSection.className = 'active r2m'
|
this.nextSection.className = 'active r2m'
|
||||||
this.prevSection.className = 'm2l'
|
this.prevSection.className = 'm2l'
|
||||||
this.prevSection.addEventListener('animationend', (e) => {
|
this.prevSection.addEventListener(
|
||||||
console.log(e)
|
'animationend',
|
||||||
this.nextSection?.classList.remove('r2m')
|
(e) => {
|
||||||
this.prevSection?.classList.remove('m2l')
|
console.log(e)
|
||||||
this.prevSection?.classList.add('inactive', 'l')
|
this.nextSection?.classList.remove('r2m')
|
||||||
}, { once: true })
|
this.prevSection?.classList.remove('m2l')
|
||||||
|
this.prevSection?.classList.add('inactive', 'l')
|
||||||
|
},
|
||||||
|
{once: true}
|
||||||
|
)
|
||||||
return
|
return
|
||||||
|
|
||||||
// switch (panelhash) {
|
// switch (panelhash) {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import { html, LitElement, CSSResultArray } from 'lit'
|
import {html, LitElement, CSSResultArray} from 'lit'
|
||||||
import { customElement, property, state } from 'lit/decorators.js'
|
import {customElement, property, state} from 'lit/decorators.js'
|
||||||
import { LiType } from '../../../components/li/li'
|
import {LiType} from '../../../components/li/li'
|
||||||
import { UlType } from '../../../components/ul/ul'
|
import {UlType} from '../../../components/ul/ul'
|
||||||
import { sharedStyles } from '../shared-styles';
|
import {sharedStyles} from '../shared-styles'
|
||||||
|
|
||||||
@customElement('panel-about')
|
@customElement('panel-about')
|
||||||
export class PanelAbout extends LitElement {
|
export class PanelAbout extends LitElement {
|
||||||
|
|
@ -14,26 +14,32 @@ export class PanelAbout extends LitElement {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<star-ul @click='' type=${UlType.ONLY_HEADER} title="我的网络">
|
<star-ul @click="" type=${UlType.ONLY_HEADER} title="我的网络">
|
||||||
<star-li type=${LiType.BASE}>FXJT</star-li>
|
<star-li type=${LiType.BASE}>FXJT</star-li>
|
||||||
<hr/>
|
<hr />
|
||||||
<star-li type=${LiType.BASE}>ZXXZ</star-li>
|
<star-li type=${LiType.BASE}>ZXXZ</star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.ONLY_FOOTER} text="无可用无线局域网时，允许此设备自动查找附近的个人热点。">
|
<star-ul
|
||||||
|
type=${UlType.ONLY_FOOTER}
|
||||||
|
text="无可用无线局域网时，允许此设备自动查找附近的个人热点。"
|
||||||
|
>
|
||||||
<star-li type=${LiType.BASE}>自动加入热点</star-li>
|
<star-li type=${LiType.BASE}>自动加入热点</star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
<star-li
|
||||||
|
type=${LiType.ICON_LABEL}
|
||||||
|
label="查看所有图标"
|
||||||
|
icon="all-day"
|
||||||
|
href="#icon"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
public static override get styles(): CSSResultArray {
|
public static override get styles(): CSSResultArray {
|
||||||
return [
|
return [sharedStyles]
|
||||||
sharedStyles
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
import { html, LitElement, CSSResultArray } from 'lit'
|
import {html, LitElement, CSSResultArray} from 'lit'
|
||||||
import { customElement, property, state } from 'lit/decorators.js'
|
import {customElement, property, state} from 'lit/decorators.js'
|
||||||
import { repeat } from 'lit/directives/repeat.js'
|
import {repeat} from 'lit/directives/repeat.js'
|
||||||
import { UlType } from '../../../../components/ul/ul'
|
import {UlType} from '../../../../components/ul/ul'
|
||||||
import { LiType } from '../../../../components/li/li'
|
import {LiType} from '../../../../components/li/li'
|
||||||
import { sharedStyles } from '../../shared-styles';
|
import {sharedStyles} from '../../shared-styles'
|
||||||
import { nothing } from 'lit'
|
import {nothing} from 'lit'
|
||||||
|
|
||||||
type LINENODE = {
|
type LINENODE = {
|
||||||
node: String,
|
node: String
|
||||||
nodetype: LiType,
|
nodetype: LiType
|
||||||
label: String,
|
label: String
|
||||||
value?: String,
|
value?: String
|
||||||
href?: String,
|
href?: String
|
||||||
}
|
}
|
||||||
|
|
||||||
type BLOCKNODE = {
|
type BLOCKNODE = {
|
||||||
node: String,
|
node: String
|
||||||
nodetype: UlType,
|
nodetype: UlType
|
||||||
nodes: Array<LINENODE>,
|
nodes: Array<LINENODE>
|
||||||
nodetitle?: String,
|
nodetitle?: String
|
||||||
nodevalue?: String,
|
nodevalue?: String
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement('panel-about-machine')
|
@customElement('panel-about-machine')
|
||||||
|
|
@ -37,33 +37,33 @@ export class PanelAboutMachine extends LitElement {
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '名称',
|
label: '名称',
|
||||||
value: 'StarElement',
|
value: 'StarElement',
|
||||||
href: '#icon'
|
href: '#icon',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '软件版本',
|
label: '软件版本',
|
||||||
value: '15.5'
|
value: '15.5',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '型号名称',
|
label: '型号名称',
|
||||||
value: 'iPhone 13 Pro'
|
value: 'iPhone 13 Pro',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '型号号码',
|
label: '型号号码',
|
||||||
value: 'MDNFAF3H/A'
|
value: 'MDNFAF3H/A',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '序列号',
|
label: '序列号',
|
||||||
value: 'RFAFAFF12432GM'
|
value: 'RFAFAFF12432GM',
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-ul',
|
node: 'star-ul',
|
||||||
|
|
@ -74,9 +74,9 @@ export class PanelAboutMachine extends LitElement {
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '有限保修',
|
label: '有限保修',
|
||||||
value: '到期日期: 2025/5/25',
|
value: '到期日期: 2025/5/25',
|
||||||
href: '#icon'
|
href: '#icon',
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: '<star-ul>',
|
node: '<star-ul>',
|
||||||
|
|
@ -86,39 +86,39 @@ export class PanelAboutMachine extends LitElement {
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '歌曲',
|
label: '歌曲',
|
||||||
value: '0'
|
value: '0',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '视频',
|
label: '视频',
|
||||||
value: '430'
|
value: '430',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '照片',
|
label: '照片',
|
||||||
value: '6050'
|
value: '6050',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '应用程序',
|
label: '应用程序',
|
||||||
value: '154'
|
value: '154',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '总容量',
|
label: '总容量',
|
||||||
value: '256 GB'
|
value: '256 GB',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '可用容量',
|
label: '可用容量',
|
||||||
value: '56.42 GB'
|
value: '56.42 GB',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: '<star-ul>',
|
node: '<star-ul>',
|
||||||
|
|
@ -128,33 +128,33 @@ export class PanelAboutMachine extends LitElement {
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '无线局域网地址',
|
label: '无线局域网地址',
|
||||||
value: '30:E2:D3:4A:C3:5D'
|
value: '30:E2:D3:4A:C3:5D',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '蓝牙',
|
label: '蓝牙',
|
||||||
value: '30:E2:D3:4A:C3:5D'
|
value: '30:E2:D3:4A:C3:5D',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '调制解调器固件',
|
label: '调制解调器固件',
|
||||||
value: '1.61.00'
|
value: '1.61.00',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.ONLY_LABEL,
|
nodetype: LiType.ONLY_LABEL,
|
||||||
label: 'SEID',
|
label: 'SEID',
|
||||||
href: '#icon'
|
href: '#icon',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '运营商锁',
|
label: '运营商锁',
|
||||||
value: '无 SIM 卡限制'
|
value: '无 SIM 卡限制',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: '<star-ul>',
|
node: '<star-ul>',
|
||||||
|
|
@ -165,33 +165,33 @@ export class PanelAboutMachine extends LitElement {
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '网络',
|
label: '网络',
|
||||||
value: '中国联通'
|
value: '中国联通',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '运营商',
|
label: '运营商',
|
||||||
value: '中国联通 50.0'
|
value: '中国联通 50.0',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: 'IMEI',
|
label: 'IMEI',
|
||||||
value: '35 717429 442903 2'
|
value: '35 717429 442903 2',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: 'ICCID',
|
label: 'ICCID',
|
||||||
value: '89860118802136995387'
|
value: '89860118802136995387',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: 'MEID',
|
label: 'MEID',
|
||||||
value: '35717429442903'
|
value: '35717429442903',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: '<star-ul>',
|
node: '<star-ul>',
|
||||||
|
|
@ -202,33 +202,33 @@ export class PanelAboutMachine extends LitElement {
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '网络',
|
label: '网络',
|
||||||
value: '中国移动'
|
value: '中国移动',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: '运营商',
|
label: '运营商',
|
||||||
value: '中国移动 50.0'
|
value: '中国移动 50.0',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: 'IMEI',
|
label: 'IMEI',
|
||||||
value: '35 717429 442903 2'
|
value: '35 717429 442903 2',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: 'ICCID',
|
label: 'ICCID',
|
||||||
value: '89860118802136995387'
|
value: '89860118802136995387',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.INFO_LABEL,
|
nodetype: LiType.INFO_LABEL,
|
||||||
label: 'MEID',
|
label: 'MEID',
|
||||||
value: '35717429442903'
|
value: '35717429442903',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: 'star-ul',
|
node: 'star-ul',
|
||||||
|
|
@ -238,48 +238,52 @@ export class PanelAboutMachine extends LitElement {
|
||||||
node: 'star-li',
|
node: 'star-li',
|
||||||
nodetype: LiType.ONLY_LABEL,
|
nodetype: LiType.ONLY_LABEL,
|
||||||
label: '证书信任设置',
|
label: '证书信任设置',
|
||||||
href: '#icon'
|
href: '#icon',
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
${repeat(this.paneljson, (block: BLOCKNODE) => html`
|
${repeat(
|
||||||
<star-ul type=${block.nodetype} title=${block.nodetitle}>
|
this.paneljson,
|
||||||
${repeat(block.nodes, (node: LINENODE, index) => html`
|
(block: BLOCKNODE) => html`
|
||||||
${node.href
|
<star-ul type=${block.nodetype} title=${block.nodetitle}>
|
||||||
? html`
|
${repeat(
|
||||||
<star-li
|
block.nodes,
|
||||||
type=${node.nodetype}
|
(node: LINENODE, index) => html`
|
||||||
label=${node.label}
|
${node.href
|
||||||
value=${node.value}
|
? html`
|
||||||
href=${node.href}
|
<star-li
|
||||||
></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}
|
||||||
`
|
`
|
||||||
: html`
|
)}
|
||||||
<star-li
|
</star-ul>
|
||||||
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 {
|
public static override get styles(): CSSResultArray {
|
||||||
return [
|
return [sharedStyles]
|
||||||
sharedStyles
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import { html, LitElement, CSSResultArray } from 'lit'
|
import {html, LitElement, CSSResultArray} from 'lit'
|
||||||
import { customElement } from 'lit/decorators.js'
|
import {customElement} from 'lit/decorators.js'
|
||||||
import { eventOptions } from 'lit/decorators.js';
|
import {eventOptions} from 'lit/decorators.js'
|
||||||
import { UlType } from '../../../components/ul/ul'
|
import {UlType} from '../../../components/ul/ul'
|
||||||
import { LiType } from '../../../components/li/li'
|
import {LiType} from '../../../components/li/li'
|
||||||
import { ButtonType, StarButton } from '../../../components/button/button'
|
import {ButtonType, StarButton} from '../../../components/button/button'
|
||||||
import { sharedStyles } from '../shared-styles';
|
import {sharedStyles} from '../shared-styles'
|
||||||
import './about_machine/about_machine'
|
import './about_machine/about_machine'
|
||||||
import './update/auto_update'
|
import './update/auto_update'
|
||||||
import './update/update_system'
|
import './update/update_system'
|
||||||
|
|
@ -18,68 +18,122 @@ export class PanelGeneral extends LitElement {
|
||||||
if ((evt.target as StarButton).label === '关机') {
|
if ((evt.target as StarButton).label === '关机') {
|
||||||
alert('关机')
|
alert('关机')
|
||||||
}
|
}
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='关于本机' href='#about-machine'></star-li>
|
<star-li
|
||||||
<hr>
|
type=${LiType.ONLY_LABEL}
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='软件更新' href='#update-system'></star-li>
|
label="关于本机"
|
||||||
|
href="#about-machine"
|
||||||
|
></star-li>
|
||||||
|
<hr />
|
||||||
|
<star-li
|
||||||
|
type=${LiType.ONLY_LABEL}
|
||||||
|
label="软件更新"
|
||||||
|
href="#update-system"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='隔空投送' href='#icon'></star-li>
|
<star-li
|
||||||
<hr>
|
type=${LiType.ONLY_LABEL}
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='隔空播放与接力' href='#icon'></star-li>
|
label="隔空投送"
|
||||||
<hr>
|
href="#icon"
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='画中画' href='#icon'></star-li>
|
></star-li>
|
||||||
<hr>
|
<hr />
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='CarPlay车载' href='#icon'></star-li>
|
<star-li
|
||||||
<hr>
|
type=${LiType.ONLY_LABEL}
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='NFC' href='#icon'></star-li>
|
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>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='iPhone存储空间' href='#icon'></star-li>
|
<star-li
|
||||||
<hr>
|
type=${LiType.ONLY_LABEL}
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='后台App刷新' href='#icon'></star-li>
|
label="iPhone存储空间"
|
||||||
|
href="#icon"
|
||||||
|
></star-li>
|
||||||
|
<hr />
|
||||||
|
<star-li
|
||||||
|
type=${LiType.ONLY_LABEL}
|
||||||
|
label="后台App刷新"
|
||||||
|
href="#icon"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='日期与时间' href='#icon'></star-li>
|
<star-li
|
||||||
<hr>
|
type=${LiType.ONLY_LABEL}
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='键盘' href='#icon'></star-li>
|
label="日期与时间"
|
||||||
<hr>
|
href="#icon"
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='字体' href='#icon'></star-li>
|
></star-li>
|
||||||
<hr>
|
<hr />
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='语言与地区' href='#icon'></star-li>
|
<star-li type=${LiType.ONLY_LABEL} label="键盘" href="#icon"></star-li>
|
||||||
<hr>
|
<hr />
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='词典' href='#icon'></star-li>
|
<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>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='VPN与设备管理' href='#icon'></star-li>
|
<star-li
|
||||||
|
type=${LiType.ONLY_LABEL}
|
||||||
|
label="VPN与设备管理"
|
||||||
|
href="#icon"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='法律与监管' href='#icon'></star-li>
|
<star-li
|
||||||
|
type=${LiType.ONLY_LABEL}
|
||||||
|
label="法律与监管"
|
||||||
|
href="#icon"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ONLY_LABEL} label='传输或还原iPhone' href='#icon'></star-li>
|
<star-li
|
||||||
<hr>
|
type=${LiType.ONLY_LABEL}
|
||||||
<star-button type=${ButtonType.BASE} label='关机' @click=${this}></star-button>
|
label="传输或还原iPhone"
|
||||||
|
href="#icon"
|
||||||
|
></star-li>
|
||||||
|
<hr />
|
||||||
|
<star-button
|
||||||
|
type=${ButtonType.BASE}
|
||||||
|
label="关机"
|
||||||
|
@click=${this}
|
||||||
|
></star-button>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
public static override get styles(): CSSResultArray {
|
public static override get styles(): CSSResultArray {
|
||||||
return [
|
return [sharedStyles]
|
||||||
sharedStyles
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { html, css, LitElement } from 'lit'
|
import {html, css, LitElement} from 'lit'
|
||||||
import { customElement, property, state } from 'lit/decorators.js'
|
import {customElement, property, state} from 'lit/decorators.js'
|
||||||
import { LiType } from '../../../../components/li/li'
|
import {LiType} from '../../../../components/li/li'
|
||||||
import { UlType } from '../../../../components/ul/ul'
|
import {UlType} from '../../../../components/ul/ul'
|
||||||
|
|
||||||
@customElement('panel-auto-update')
|
@customElement('panel-auto-update')
|
||||||
export class PanelAutoUpdate extends LitElement {
|
export class PanelAutoUpdate extends LitElement {
|
||||||
|
|
@ -14,14 +14,17 @@ export class PanelAutoUpdate extends LitElement {
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
<star-li
|
||||||
|
type=${LiType.ICON_LABEL}
|
||||||
|
label="查看所有图标"
|
||||||
|
icon="all-day"
|
||||||
|
href="#icon"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
static styles = css`
|
static styles = css``
|
||||||
|
|
||||||
`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { html, LitElement, CSSResultArray } from 'lit'
|
import {html, LitElement, CSSResultArray} from 'lit'
|
||||||
import { customElement, property, state } from 'lit/decorators.js'
|
import {customElement, property, state} from 'lit/decorators.js'
|
||||||
import { LiType } from '../../../../components/li/li'
|
import {LiType} from '../../../../components/li/li'
|
||||||
import { UlType } from '../../../../components/ul/ul'
|
import {UlType} from '../../../../components/ul/ul'
|
||||||
|
|
||||||
@customElement('panel-update-system')
|
@customElement('panel-update-system')
|
||||||
export class PanelUpdateSystem extends LitElement {
|
export class PanelUpdateSystem extends LitElement {
|
||||||
|
|
@ -14,17 +14,27 @@ export class PanelUpdateSystem extends LitElement {
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.INFO_LABEL} label='自动更新' value='打开' href='#auto-update'></star-li>
|
<star-li
|
||||||
|
type=${LiType.INFO_LABEL}
|
||||||
|
label="自动更新"
|
||||||
|
value="打开"
|
||||||
|
href="#auto-update"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ICON_LABEL} label='查看所有图标' icon='all-day' href='#auto-update'></star-li>
|
<star-li
|
||||||
|
type=${LiType.ICON_LABEL}
|
||||||
|
label="查看所有图标"
|
||||||
|
icon="all-day"
|
||||||
|
href="#auto-update"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
public static override get styles(): CSSResultArray {
|
public static override get styles(): CSSResultArray {
|
||||||
return [];
|
return []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,281 +1,291 @@
|
||||||
import { html, LitElement, CSSResultArray } from 'lit'
|
import {html, LitElement, CSSResultArray} from 'lit'
|
||||||
import { customElement, property, state } from 'lit/decorators.js'
|
import {customElement, property, state} from 'lit/decorators.js'
|
||||||
import { repeat } from 'lit/directives/repeat.js';
|
import {repeat} from 'lit/directives/repeat.js'
|
||||||
import { UlType } from '../../../components/ul/ul'
|
import {UlType} from '../../../components/ul/ul'
|
||||||
import { LiType } from '../../../components/li/li';
|
import {LiType} from '../../../components/li/li'
|
||||||
import { sharedStyles } from '../shared-styles';
|
import {sharedStyles} from '../shared-styles'
|
||||||
|
|
||||||
@customElement('panel-icon')
|
@customElement('panel-icon')
|
||||||
export class PanelIcon extends LitElement {
|
export class PanelIcon extends LitElement {
|
||||||
@property() foo = ''
|
@property() foo = ''
|
||||||
|
|
||||||
@state() icons = [
|
@state() icons = [
|
||||||
"2g",
|
'2g',
|
||||||
"3g",
|
'3g',
|
||||||
"4g",
|
'4g',
|
||||||
|
|
||||||
"accessibility",
|
'accessibility',
|
||||||
"achievement",
|
'achievement',
|
||||||
"add-contact",
|
'add-contact',
|
||||||
"add",
|
'add',
|
||||||
"addons",
|
'addons',
|
||||||
|
|
||||||
"airplane",
|
'airplane',
|
||||||
"alarm-clock",
|
'alarm-clock',
|
||||||
"alarm-stop",
|
'alarm-stop',
|
||||||
"alarm",
|
'alarm',
|
||||||
|
|
||||||
"album",
|
'album',
|
||||||
"all-day",
|
'all-day',
|
||||||
"arrow-left",
|
'arrow-left',
|
||||||
"arrow-right",
|
'arrow-right',
|
||||||
"artist",
|
'artist',
|
||||||
"attachment",
|
'attachment',
|
||||||
"battery-0",
|
'battery-0',
|
||||||
"battery-1",
|
'battery-1',
|
||||||
"battery-2",
|
'battery-2',
|
||||||
"battery-3",
|
'battery-3',
|
||||||
"battery-4",
|
'battery-4',
|
||||||
"battery-5",
|
'battery-5',
|
||||||
"battery-6",
|
'battery-6',
|
||||||
"battery-7",
|
'battery-7',
|
||||||
"battery-8",
|
'battery-8',
|
||||||
"battery-9",
|
'battery-9',
|
||||||
"battery-10",
|
'battery-10',
|
||||||
"battery-charging",
|
'battery-charging',
|
||||||
"battery-unknown",
|
'battery-unknown',
|
||||||
|
|
||||||
"bluetooth-a2dp",
|
'bluetooth-a2dp',
|
||||||
"bluetooth-circle",
|
'bluetooth-circle',
|
||||||
"bluetooth-transfer-circle",
|
'bluetooth-transfer-circle',
|
||||||
"bluetooth-transfer",
|
'bluetooth-transfer',
|
||||||
"bluetooth",
|
'bluetooth',
|
||||||
|
|
||||||
"brightness",
|
'brightness',
|
||||||
"browsing",
|
'browsing',
|
||||||
"bug",
|
'bug',
|
||||||
|
|
||||||
"calendar",
|
'calendar',
|
||||||
"call-bluetooth",
|
'call-bluetooth',
|
||||||
"call-emergency",
|
'call-emergency',
|
||||||
"call-forwarding",
|
'call-forwarding',
|
||||||
"call-hang-up",
|
'call-hang-up',
|
||||||
"call-hold",
|
'call-hold',
|
||||||
"call-incoming",
|
'call-incoming',
|
||||||
"call-merge",
|
'call-merge',
|
||||||
"call-missed",
|
'call-missed',
|
||||||
"call-outgoing",
|
'call-outgoing',
|
||||||
"call-reversed",
|
'call-reversed',
|
||||||
"call-ringing",
|
'call-ringing',
|
||||||
"call",
|
'call',
|
||||||
"callback-emergency",
|
'callback-emergency',
|
||||||
|
|
||||||
"camera",
|
'camera',
|
||||||
"change-wallpaper",
|
'change-wallpaper',
|
||||||
"clear-input-left",
|
'clear-input-left',
|
||||||
"clear-input-right",
|
'clear-input-right',
|
||||||
|
|
||||||
"close",
|
'close',
|
||||||
"compose",
|
'compose',
|
||||||
"contact-find",
|
'contact-find',
|
||||||
"contacts",
|
'contacts',
|
||||||
"crashed",
|
'crashed',
|
||||||
"crop",
|
'crop',
|
||||||
|
|
||||||
"data",
|
'data',
|
||||||
"delete",
|
'delete',
|
||||||
"developer",
|
'developer',
|
||||||
"device-info",
|
'device-info',
|
||||||
"dismiss-keyboard",
|
'dismiss-keyboard',
|
||||||
"do-not-track",
|
'do-not-track',
|
||||||
"download-circle",
|
'download-circle',
|
||||||
"download",
|
'download',
|
||||||
|
|
||||||
"edge",
|
'edge',
|
||||||
"edit-contact",
|
'edit-contact',
|
||||||
"edit-image",
|
'edit-image',
|
||||||
"edit",
|
'edit',
|
||||||
"effects",
|
'effects',
|
||||||
"email-forward",
|
'email-forward',
|
||||||
"email-mark-read",
|
'email-mark-read',
|
||||||
"email-mark-unread",
|
'email-mark-unread',
|
||||||
"email-move",
|
'email-move',
|
||||||
"email-reply",
|
'email-reply',
|
||||||
"email",
|
'email',
|
||||||
|
|
||||||
"exclamation",
|
'exclamation',
|
||||||
"expand-left",
|
'expand-left',
|
||||||
"expand-right",
|
'expand-right',
|
||||||
"facebook",
|
'facebook',
|
||||||
"feedback",
|
'feedback',
|
||||||
"find",
|
'find',
|
||||||
"firefox",
|
'firefox',
|
||||||
"flag",
|
'flag',
|
||||||
"flash-auto",
|
'flash-auto',
|
||||||
"flash-off",
|
'flash-off',
|
||||||
"flash-on",
|
'flash-on',
|
||||||
"focus-locked",
|
'focus-locked',
|
||||||
"focus-locking",
|
'focus-locking',
|
||||||
|
|
||||||
"gesture",
|
'gesture',
|
||||||
"gmail",
|
'gmail',
|
||||||
"grid-circular",
|
'grid-circular',
|
||||||
"grid",
|
'grid',
|
||||||
"gsm",
|
'gsm',
|
||||||
|
|
||||||
"hdr-boxed",
|
'hdr-boxed',
|
||||||
"hdr",
|
'hdr',
|
||||||
"headphones",
|
'headphones',
|
||||||
"help",
|
'help',
|
||||||
"homescreen",
|
'homescreen',
|
||||||
"hspa-plus",
|
'hspa-plus',
|
||||||
"hspa",
|
'hspa',
|
||||||
|
|
||||||
"import-memorycard-circle",
|
'import-memorycard-circle',
|
||||||
"incoming-sms",
|
'incoming-sms',
|
||||||
"info",
|
'info',
|
||||||
|
|
||||||
"keyboard-circle",
|
'keyboard-circle',
|
||||||
"keyboard",
|
'keyboard',
|
||||||
|
|
||||||
"languages",
|
'languages',
|
||||||
"left-light",
|
'left-light',
|
||||||
"left",
|
'left',
|
||||||
"link",
|
'link',
|
||||||
"location",
|
'location',
|
||||||
"lock",
|
'lock',
|
||||||
|
|
||||||
"media-storage",
|
'media-storage',
|
||||||
"menu",
|
'menu',
|
||||||
"messages",
|
'messages',
|
||||||
"mic",
|
'mic',
|
||||||
"minus",
|
'minus',
|
||||||
"moon",
|
'moon',
|
||||||
"more",
|
'more',
|
||||||
"mute",
|
'mute',
|
||||||
|
|
||||||
"nfc",
|
'nfc',
|
||||||
"no-sim",
|
'no-sim',
|
||||||
"notifications",
|
'notifications',
|
||||||
|
|
||||||
"o",
|
'o',
|
||||||
"outgoing-sms",
|
'outgoing-sms',
|
||||||
"outlook",
|
'outlook',
|
||||||
|
|
||||||
"pause",
|
'pause',
|
||||||
"picture-size",
|
'picture-size',
|
||||||
"play",
|
'play',
|
||||||
"play-circle",
|
'play-circle',
|
||||||
"playlist",
|
'playlist',
|
||||||
"privacy",
|
'privacy',
|
||||||
|
|
||||||
"recent-calls",
|
'recent-calls',
|
||||||
"reload",
|
'reload',
|
||||||
"repeat-once",
|
'repeat-once',
|
||||||
"repeat",
|
'repeat',
|
||||||
"reply-all",
|
'reply-all',
|
||||||
"right-light",
|
'right-light',
|
||||||
"right",
|
'right',
|
||||||
"rocket",
|
'rocket',
|
||||||
"rotate",
|
'rotate',
|
||||||
|
|
||||||
"scene",
|
'scene',
|
||||||
"sd-card",
|
'sd-card',
|
||||||
"search",
|
'search',
|
||||||
"seek-back",
|
'seek-back',
|
||||||
"seek-forward",
|
'seek-forward',
|
||||||
"select",
|
'select',
|
||||||
"self-timer",
|
'self-timer',
|
||||||
"send-left",
|
'send-left',
|
||||||
"send-right",
|
'send-right',
|
||||||
"settings",
|
'settings',
|
||||||
"share",
|
'share',
|
||||||
"shuffle",
|
'shuffle',
|
||||||
|
|
||||||
"signal-0",
|
'signal-0',
|
||||||
"signal-1",
|
'signal-1',
|
||||||
"signal-2",
|
'signal-2',
|
||||||
"signal-3",
|
'signal-3',
|
||||||
"signal-4",
|
'signal-4',
|
||||||
"signal-5",
|
'signal-5',
|
||||||
"signal-roaming",
|
'signal-roaming',
|
||||||
|
|
||||||
"sim-toolkit",
|
'sim-toolkit',
|
||||||
"sim",
|
'sim',
|
||||||
|
|
||||||
"skip-back",
|
'skip-back',
|
||||||
"skip-forward",
|
'skip-forward',
|
||||||
|
|
||||||
"songs",
|
'songs',
|
||||||
"sound-max",
|
'sound-max',
|
||||||
"sound-min",
|
'sound-min',
|
||||||
"star-empty",
|
'star-empty',
|
||||||
"star-full",
|
'star-full',
|
||||||
|
|
||||||
"stop",
|
'stop',
|
||||||
"storage-circle",
|
'storage-circle',
|
||||||
"storage",
|
'storage',
|
||||||
"switch",
|
'switch',
|
||||||
"sync",
|
'sync',
|
||||||
|
|
||||||
"tethering",
|
'tethering',
|
||||||
"themes",
|
'themes',
|
||||||
"tick-circle",
|
'tick-circle',
|
||||||
"tick",
|
'tick',
|
||||||
"time",
|
'time',
|
||||||
"toggle-camera-front",
|
'toggle-camera-front',
|
||||||
"toggle-camera-rear",
|
'toggle-camera-rear',
|
||||||
"topup-with-code",
|
'topup-with-code',
|
||||||
"topup",
|
'topup',
|
||||||
"twitter",
|
'twitter',
|
||||||
|
|
||||||
"undo-circular",
|
'undo-circular',
|
||||||
"undo",
|
'undo',
|
||||||
"unlock",
|
'unlock',
|
||||||
"update-balance",
|
'update-balance',
|
||||||
"usb",
|
'usb',
|
||||||
"user",
|
'user',
|
||||||
|
|
||||||
"vibrate",
|
'vibrate',
|
||||||
"video-mic",
|
'video-mic',
|
||||||
"video-size",
|
'video-size',
|
||||||
"video",
|
'video',
|
||||||
"voicemail",
|
'voicemail',
|
||||||
|
|
||||||
"wallpaper",
|
'wallpaper',
|
||||||
"wifi-1",
|
'wifi-1',
|
||||||
"wifi-2",
|
'wifi-2',
|
||||||
"wifi-3",
|
'wifi-3',
|
||||||
"wifi-4",
|
'wifi-4',
|
||||||
"wifi-permissions"
|
'wifi-permissions',
|
||||||
]
|
]
|
||||||
|
|
||||||
getRangeColor() {
|
getRangeColor() {
|
||||||
const r = ((255 * Math.random())>>0).toString(16).padStart(2, '0');
|
const r = ((255 * Math.random()) >> 0).toString(16).padStart(2, '0')
|
||||||
const g = ((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');
|
const b = ((255 * Math.random()) >> 0).toString(16).padStart(2, '0')
|
||||||
return "#"+r+g+b;
|
return '#' + r + g + b
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<star-ul type=${UlType.HEADER_FOOTER} title="GaiaIcon图标" text='以上GaiaIcon图标为YROS V4内容'>
|
<star-ul
|
||||||
${repeat(this.icons, (iconname, index) => html`
|
type=${UlType.HEADER_FOOTER}
|
||||||
<star-li type=${LiType.ICON_LABEL}
|
title="GaiaIcon图标"
|
||||||
label=${iconname}
|
text="以上GaiaIcon图标为YROS V4内容"
|
||||||
icon=${iconname}
|
>
|
||||||
iconcolor=${this.getRangeColor()}
|
${repeat(
|
||||||
></star-li>
|
this.icons,
|
||||||
${index < this.icons.length - 1 ? html`<hr>` : null}
|
(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>
|
</star-ul>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
public static override get styles(): CSSResultArray {
|
public static override get styles(): CSSResultArray {
|
||||||
return [
|
return [sharedStyles]
|
||||||
sharedStyles
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import { html, LitElement, CSSResultArray } from 'lit'
|
import {html, LitElement, CSSResultArray} from 'lit'
|
||||||
import { customElement, state } from 'lit/decorators.js'
|
import {customElement, state} from 'lit/decorators.js'
|
||||||
import { LiType } from '../../components/li/li'
|
import {LiType} from '../../components/li/li'
|
||||||
import { UlType } from '../../components/ul/ul'
|
import {UlType} from '../../components/ul/ul'
|
||||||
import { sharedStyles } from './shared-styles';
|
import {sharedStyles} from './shared-styles'
|
||||||
import './about/about'
|
import './about/about'
|
||||||
import './icon/icon'
|
import './icon/icon'
|
||||||
import './general/general'
|
import './general/general'
|
||||||
|
|
@ -11,77 +11,178 @@ type SEID = String
|
||||||
|
|
||||||
@customElement('panel-root')
|
@customElement('panel-root')
|
||||||
export class PanelRoot extends LitElement {
|
export class PanelRoot extends LitElement {
|
||||||
@state() wlanMacAddress = "31:D2:3F:4E:D2:5B"
|
@state() wlanMacAddress = '31:D2:3F:4E:D2:5B'
|
||||||
@state() availableCapability = "50.26GB"
|
@state() availableCapability = '50.26GB'
|
||||||
@state() seid = this.genMockSeid()
|
@state() seid = this.genMockSeid()
|
||||||
@state() otherdevice = '若要将手表与手机配对，请前往 <a href="https://www.kylinos.cn/about/contact.html">https://help.kylin.cn</a>'
|
@state() otherdevice =
|
||||||
|
'若要将手表与手机配对，请前往 <a href="https://www.kylinos.cn/about/contact.html">https://help.kylin.cn</a>'
|
||||||
|
|
||||||
genMockSeid(): SEID {
|
genMockSeid(): SEID {
|
||||||
return Array(48)
|
return Array(48)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(() => "0123456789ABCDEF"[Math.floor(Math.random()*16)])
|
.map(() => '0123456789ABCDEF'[Math.floor(Math.random() * 16)])
|
||||||
.join('')
|
.join('')
|
||||||
}
|
}
|
||||||
|
|
||||||
rootPanel = html`
|
rootPanel = html`
|
||||||
<star-ul type=${UlType.HEADER_FOOTER} title="完整栏" text='可在上栏中填充任意类型的条目'>
|
<star-ul
|
||||||
|
type=${UlType.HEADER_FOOTER}
|
||||||
|
title="完整栏"
|
||||||
|
text="可在上栏中填充任意类型的条目"
|
||||||
|
>
|
||||||
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
||||||
<hr/>
|
<hr />
|
||||||
<star-li type=${LiType.ONLY_LABEL} label="带跳转的条目" href="#about"></star-li>
|
<star-li
|
||||||
<hr/>
|
type=${LiType.ONLY_LABEL}
|
||||||
<star-li type=${LiType.ICON_LABEL} label="带图标的条目" icon="privacy"></star-li>
|
label="带跳转的条目"
|
||||||
<hr/>
|
href="#about"
|
||||||
<star-li type=${LiType.ICON_LABEL} label="带颜色图标的条目" icon="privacy" iconcolor="green"></star-li>
|
></star-li>
|
||||||
<hr/>
|
<hr />
|
||||||
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=1></star-li>
|
<star-li
|
||||||
<hr/>
|
type=${LiType.ICON_LABEL}
|
||||||
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=99></star-li>
|
label="带图标的条目"
|
||||||
<hr/>
|
icon="privacy"
|
||||||
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=999></star-li>
|
></star-li>
|
||||||
<hr/>
|
<hr />
|
||||||
<star-li type=${LiType.BUBBLE_LABEL} label="有软件更新可用" href="#about" bubble=1></star-li>
|
<star-li
|
||||||
<hr/>
|
type=${LiType.ICON_LABEL}
|
||||||
<star-li type=${LiType.BUBBLE_LABEL} label="包含以上的条目" icon="privacy" iconcolor="orange" href="#about" bubble=8></star-li>
|
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>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ICON_LABEL} label="通用" icon="play-circle" iconcolor="red" href="#general"></star-li>
|
<star-li
|
||||||
<hr/>
|
type=${LiType.ICON_LABEL}
|
||||||
<star-li type=${LiType.ICON_LABEL} label="关于" icon="privacy" iconcolor="purple" href="#about"></star-li>
|
label="通用"
|
||||||
<hr/>
|
icon="play-circle"
|
||||||
<star-li type=${LiType.ICON_LABEL} label="辅助" icon="accessibility" iconcolor="blue" href="#about"></star-li>
|
iconcolor="red"
|
||||||
<hr/>
|
href="#general"
|
||||||
<star-li type=${LiType.ICON_LABEL} label="成就" icon="achievement" iconcolor="gold" href="#about"></star-li>
|
></star-li>
|
||||||
<hr/>
|
<hr />
|
||||||
<star-li type=${LiType.ICON_LABEL} label="插件" icon="addons" iconcolor="green" href="#about"></star-li>
|
<star-li
|
||||||
<hr/>
|
type=${LiType.ICON_LABEL}
|
||||||
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
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>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.ONLY_EDIT} label='星光麒麟' default='星光麒麟'></star-li>
|
<star-li
|
||||||
|
type=${LiType.ONLY_EDIT}
|
||||||
|
label="星光麒麟"
|
||||||
|
default="星光麒麟"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.ONLY_HEADER} title="头部有文字" text="尾部有文字">
|
<star-ul type=${UlType.ONLY_HEADER} title="头部有文字" text="尾部有文字">
|
||||||
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
||||||
<hr/>
|
<hr />
|
||||||
<star-li type=${LiType.ONLY_READ} label=${this.seid}></star-li>
|
<star-li type=${LiType.ONLY_READ} label=${this.seid}></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li type=${LiType.INFO_LABEL} label='无线局域网地址' value=${this.wlanMacAddress}></star-li>
|
<star-li
|
||||||
<hr/>
|
type=${LiType.INFO_LABEL}
|
||||||
<star-li type=${LiType.INFO_LABEL} label='可用容量' value=${this.availableCapability}></star-li>
|
label="无线局域网地址"
|
||||||
|
value=${this.wlanMacAddress}
|
||||||
|
></star-li>
|
||||||
|
<hr />
|
||||||
|
<star-li
|
||||||
|
type=${LiType.INFO_LABEL}
|
||||||
|
label="可用容量"
|
||||||
|
value=${this.availableCapability}
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.HEADER_FOOTER} title="其他设备" text=${this.otherdevice}>
|
<star-ul
|
||||||
|
type=${UlType.HEADER_FOOTER}
|
||||||
|
title="其他设备"
|
||||||
|
text=${this.otherdevice}
|
||||||
|
>
|
||||||
<star-li type=${LiType.BASE}>自动加入热点</star-li>
|
<star-li type=${LiType.BASE}>自动加入热点</star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.ONLY_HEADER} title="保障详情">
|
<star-ul type=${UlType.ONLY_HEADER} title="保障详情">
|
||||||
<star-li type=${LiType.INFO_LABEL} label='硬件保障' value='在保障范围内'></star-li>
|
<star-li
|
||||||
<hr/>
|
type=${LiType.INFO_LABEL}
|
||||||
<star-li type=${LiType.INFO_LABEL} label='技术支持' value='在保障范围内'></star-li>
|
label="硬件保障"
|
||||||
|
value="在保障范围内"
|
||||||
|
></star-li>
|
||||||
|
<hr />
|
||||||
|
<star-li
|
||||||
|
type=${LiType.INFO_LABEL}
|
||||||
|
label="技术支持"
|
||||||
|
value="在保障范围内"
|
||||||
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
@ -92,9 +193,7 @@ export class PanelRoot extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
public static override get styles(): CSSResultArray {
|
public static override get styles(): CSSResultArray {
|
||||||
return [
|
return [sharedStyles]
|
||||||
sharedStyles
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { css, CSSResult } from 'lit'
|
import {css, CSSResult} from 'lit'
|
||||||
|
|
||||||
export const sharedStyles: CSSResult = css`
|
export const sharedStyles: CSSResult = css`
|
||||||
hr {
|
hr {
|
||||||
|
|
|
||||||
|
|
@ -20,5 +20,5 @@
|
||||||
"skipLibCheck": true
|
"skipLibCheck": true
|
||||||
},
|
},
|
||||||
"include": ["src/**/*.ts"],
|
"include": ["src/**/*.ts"],
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
"references": [{"path": "./tsconfig.node.json"}]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
import { defineConfig } from 'vite'
|
import {defineConfig} from 'vite'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
build: {
|
build: {
|
||||||
lib: {
|
lib: {
|
||||||
entry: 'src/my-element.ts',
|
entry: 'src/my-element.ts',
|
||||||
formats: ['es']
|
formats: ['es'],
|
||||||
},
|
},
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
external: /^lit/
|
external: /^lit/,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue