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" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Lit + TS</title>
|
||||
<link rel="stylesheet" href="./src/index.css" />
|
||||
<script type="module" src="/src/my-element.ts"></script>
|
||||
<script type="module" src="/src/index.ts"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-element>
|
||||
<h1>Vite + Lit</h1>
|
||||
</my-element>
|
||||
<!-- main -->
|
||||
<settings-app></settings-app>
|
||||
<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>
|
||||
</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": {
|
||||
"module": "ESNext",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue