From 36f629287361a5000e966e1f127adf8a5b8aae65 Mon Sep 17 00:00:00 2001
From: wangchangqi <wangchangqi@kylinos.cn>
Date: Tue, 23 Aug 2022 14:30:12 +0800
Subject: [PATCH] (chore)fix index navigate, replace repeat, use pseudo
 content.

---
 src/components/bubble/bubble.ts                | 15 ++++++++-------
 .../indicator/indicator-page-point.ts          |  2 +-
 src/components/li/li.ts                        |  1 -
 src/index.ts                                   | 18 ++++++++++++------
 .../general/about-machine/about-machine.ts     |  6 +++---
 src/test/panels/icon/icon.ts                   |  4 ++--
 src/test/panels/root.ts                        |  3 +++
 7 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/bubble/bubble.ts b/src/components/bubble/bubble.ts
index 81832f4..4f9c055 100644
--- a/src/components/bubble/bubble.ts
+++ b/src/components/bubble/bubble.ts
@@ -14,16 +14,13 @@ export class StarBubble extends LitElement {
     else if (this.number > 99)
       return html`
         <div>
-          <span class="small">
-            99
-            <sup>+</sup>
-          </span>
+          <a class="small" data-num="99"><sup>+</sup></a>
         </div>
       `
     else
       return html`
         <div>
-          <span>${this.number}</span>
+          <a data-num=${this.number}></a>
         </div>
       `
   }
@@ -45,7 +42,7 @@ export class StarBubble extends LitElement {
       background-color: red;
     }
 
-    span {
+    a {
       width: 100%;
       height: 100%;
       color: #fff;
@@ -55,11 +52,15 @@ export class StarBubble extends LitElement {
       font-size: 14px;
     }
 
-    span.small {
+    a.small {
       font-size: 12px;
       line-height: 170%;
     }
 
+    a::before {
+      content: attr(data-num);
+    }
+
     sup {
       font-size: 10px;
       max-width: 6px;
diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts
index d1ba3d5..be31e1d 100644
--- a/src/components/indicator/indicator-page-point.ts
+++ b/src/components/indicator/indicator-page-point.ts
@@ -12,7 +12,7 @@ export class IndicatorPagePoint extends LitElement {
   #firstRender = true
 
   protected shouldUpdate(
-    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+    _changedProperties: PropertyValueMap<this>
   ): boolean {
     let isShouldUpdate = true
 
diff --git a/src/components/li/li.ts b/src/components/li/li.ts
index 966e7cc..7c69b08 100644
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@@ -1,6 +1,5 @@
 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 {
diff --git a/src/index.ts b/src/index.ts
index fa6ee2d..980540f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,10 +1,7 @@
 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 './components/section/section'
 import './test/panels/root'
 
 @customElement('settings-app')
@@ -17,6 +14,17 @@ export class SettingsApp extends LitElement {
   @state() nextSection: StarAnimateSection | null = null
   @state() currentSection: StarAnimateSection | null = null
 
+  constructor() {
+    super()
+    window.addEventListener('hashchange', this)
+    this.updateComplete.then(() => {
+      // 在页面内刷新时
+      if (location.hash !== '') {
+        this.navigate(location.hash)
+      }
+    })
+  }
+
   handleEvent(evt: Event) {
     switch (evt.type) {
       case 'hashchange':
@@ -115,8 +123,6 @@ export class SettingsApp extends LitElement {
   }
 
   render() {
-    window.addEventListener('hashchange', this)
-
     return html`
       <star-animate-section id="root" class="active">
         <panel-root></panel-root>
diff --git a/src/test/panels/general/about-machine/about-machine.ts b/src/test/panels/general/about-machine/about-machine.ts
index 5c80149..20cf2e8 100644
--- a/src/test/panels/general/about-machine/about-machine.ts
+++ b/src/test/panels/general/about-machine/about-machine.ts
@@ -1,6 +1,6 @@
 import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
-import {repeat} from 'lit/directives/repeat.js'
+import {map} from 'lit/directives/map.js'
 import {UlType} from '../../../../components/ul/ul'
 import {LiType} from '../../../../components/li/li'
 import {sharedStyles} from '../../shared-styles'
@@ -246,11 +246,11 @@ export class PanelAboutMachine extends LitElement {
 
   render() {
     return html`
-      ${repeat(
+      ${map(
         this.paneljson,
         (block: BLOCKNODE) => html`
           <star-ul type=${block.nodetype} title=${block.nodetitle}>
-            ${repeat(
+            ${map(
               block.nodes,
               (node: LINENODE, index) => html`
                 ${node.href
diff --git a/src/test/panels/icon/icon.ts b/src/test/panels/icon/icon.ts
index 7a529c7..55b7396 100644
--- a/src/test/panels/icon/icon.ts
+++ b/src/test/panels/icon/icon.ts
@@ -1,6 +1,6 @@
 import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
-import {repeat} from 'lit/directives/repeat.js'
+import {map} from 'lit/directives/map.js'
 import {UlType} from '../../../components/ul/ul'
 import {LiType} from '../../../components/li/li'
 import {sharedStyles} from '../shared-styles'
@@ -264,7 +264,7 @@ export class PanelIcon extends LitElement {
         title="GaiaIcon图标"
         text="以上GaiaIcon图标为YROS V4内容"
       >
-        ${repeat(
+        ${map(
           this.icons,
           (iconname, index) => html`
             <star-li
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index 3d99106..af7abee 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -3,6 +3,9 @@ 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 '../../components/ul/ul'
+import '../../components/li/li'
+
 import './about/about'
 import './icon/icon'
 import './general/general'