(feature)(improve)添加hover样式类全局代理;移动基础样式到head标签中,且只加载一次.

src/components/base/base-style.ts

@@ -1,7 +1,7 @@
 import {css, CSSResult} from 'lit'
 
 export const baseStyles: CSSResult = css`
-  :host {
+  :root {
     /* 文字/正文黑 */
     --font-main-black: #292929;
     /* 文字/辅助字-黑 */
@@ -62,13 +62,14 @@ export const baseStyles: CSSResult = css`
     /* 全/ hover_lm */
     --bg-hover: rgba(0, 0, 0, 0.06);
     --bg-gray-button: rgba(51, 51, 51, 0.06);
+    --bg-gray-button-hover: rgba(51, 51, 51, 0.15);
     --bg-icon-button: rgba(255, 255, 255, 0.68);
 
     --bg-button: rgba(247, 247, 247, 0.75);
   }
 
   @media (prefers-color-scheme: light) {
-    :host {
+    :root {
       /* 底色/弹窗浅 */
       --bg-dialog: linear-gradient(
         134.78deg,
@@ -93,7 +94,7 @@ export const baseStyles: CSSResult = css`
   }
 
   @media (prefers-color-scheme: dark) {
-    :host {
+    :root {
       /* 底色/弹窗深 */
       --bg-dialog: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
 

src/components/base/star-base-element.ts

@@ -5,8 +5,17 @@ import GestureDetector, {
 } from '../../lib/gesture/gesture-detector'
 import {baseStyles} from './base-style'
 
+declare global {
+  var loadStarMixin: boolean
+  interface Event {
+    path: EventTarget[]
+  }
+}
+
 export interface StarInterface {
   hello(): void
+  onhover(): void
+  onhoverend(): void
 }
 
 type Constructor<T = Record<string, unknown>> = {
@@ -15,11 +24,74 @@ type Constructor<T = Record<string, unknown>> = {
   prototype: T
 }
 
+let currentHoverTarger!: StarBaseElement
+
+function handleHover(e: Event) {
+  // Firefox 仅支持 e.composedPath()
+  const path = (e.path || e.composedPath()) as EventTarget[]
+  if (!path) return
+
+  let i = 0
+  while (path[i++] !== undefined) {
+    const target = path[i]
+    switch (target?.constructor.name) {
+      case 'StarButton':
+        currentHoverTarger = target as StarBaseElement
+        currentHoverTarger?.onhover()
+        break
+    }
+  }
+}
+
+function handleHoverEnd() {
+  currentHoverTarger?.onhoverend()
+}
+
+function handleContextMenu(e: Event) {
+  const path = (e.path || e.composedPath()) as EventTarget[]
+  if (!path) return
+
+  let i = 0
+  while (path[i++] !== undefined) {
+    if (path[i] instanceof StarBaseElement) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+    }
+  }
+}
+
 export function StarMixin<T extends Constructor<ReactiveElement>>(
   constructor: T
 ): T & Constructor<StarInterface> {
+  // 在本文件被重复加载时, 确保不会重复添加以下内容(监听和样式)
+  const loadStarMixin = (window.loadStarMixin = window.loadStarMixin || false)
+
+  if (loadStarMixin === false) {
+    // 添加按压事件监听
+    document.addEventListener('touchstart', handleHover)
+    document.addEventListener('touchend', handleHoverEnd)
+    // 禁用右键
+    document.addEventListener('contextmenu', handleContextMenu)
+
+    // 填充全局所需基础样式变量, 只添加一次
+    const style = document.createElement('style')
+    style.innerHTML = baseStyles.toString()
+    document.head.appendChild(style)
+
+    window.loadStarMixin = true
+  }
+
+  /**
+   * 以下方法均可被子类重写
+   */
   return class SlotTextObservingElement extends constructor {
     hello() {}
+    onhover() {
+      this.classList.add('pressed')
+    }
+    onhoverend() {
+      this.classList.remove('pressed')
+    }
   }
 }
 
@@ -41,10 +113,7 @@ export class StarBaseElement extends StarMixin(LitElement) {
     GestureDetector.disembedded(this)
   }
 
-  /**
-   * 填充全局所需基础样式变量
-   */
   public static get styles(): CSSResultArray {
-    return [baseStyles]
+    return []
   }
 }

src/components/li/li.ts

@@ -19,7 +19,7 @@ export enum LiType {
 @customElement('star-li')
 export class StarLi extends StarBaseElement {
   public static override get styles(): CSSResultArray {
-    return [...super.styles, liStyles]
+    return [liStyles]
   }
 
   @property({type: String}) type = ''

src/components/ul/ul.ts

@@ -14,7 +14,7 @@ export enum UlType {
 @customElement('star-ul')
 export class StarUl extends StarBaseElement {
   public static override get styles(): CSSResultArray {
-    return [...super.styles, ulStyles]
+    return [ulStyles]
   }
 
   @property({type: String}) type = ''