LIlGG · LIlGG · Feb 6, 2025 · Feb 6, 2025 · Feb 6, 2025 · Feb 6, 2025
diff --git a/.gitignore b/.gitignore
@@ -72,3 +72,5 @@ application-local.properties
 
 /admin-frontend/node_modules/
 /workplace/
+
+/node_modules/
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+	"name": "plugin-live2d",
+	"private": true,
+	"author": {
+		"name": "LIlGG",
+		"url": "https://github.com/LIlGG"
+	},
+	"contributors": [
+		{
+			"name": "LIlGG",
+			"email": "mail@e.lixingyong.com",
+			"url": "https://github.com/LIlGG"
+		}
+	],
+	"license": "MIT",
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.3",
+		"typescript": "^5.7.2"
+	},
+	"packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
+}
diff --git a/packages/live2d/.editorconfig b/packages/live2d/.editorconfig
@@ -0,0 +1,11 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
diff --git a/packages/live2d/.gitignore b/packages/live2d/.gitignore
@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
diff --git a/packages/live2d/README.md b/packages/live2d/README.md
@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```
diff --git a/packages/live2d/biome.json b/packages/live2d/biome.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "indentStyle": "space"
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "css": {
+    "parser": {
+      "cssModules": true
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}
diff --git a/packages/live2d/index.html b/packages/live2d/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Live2d Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/Demo.tsx"></script>
+  </body>
+</html>
diff --git a/packages/live2d/package.json b/packages/live2d/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "live2d",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/live2d.umd.cjs",
+  "module": "./dist/live2d.js",
+  "exports": {
+    ".": {
+      "import": "./dist/live2d.js",
+      "require": "./dist/live2d.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite --open",
+    "build": "tsc -b && vite build",
+    "check": "biome check --write"
+  },
+  "dependencies": {
+    "@lit/context": "^1.1.3",
+    "@lit/react": "^1.0.7",
+    "iconify-icon": "^2.3.0",
+    "lit": "^3.2.1",
+    "pixi-live2d-display": "^0.4.0",
+    "pixi.js": "^6.5.2",
+    "query-string": "^9.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@unocss/postcss": "^65.4.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "ts-lit-plugin": "^2.0.2",
+    "unocss": "^65.4.3",
+    "vite": "^6.1.0"
+  }
+}
diff --git a/packages/live2d/postcss.config.mjs b/packages/live2d/postcss.config.mjs
@@ -0,0 +1,5 @@
+import UnoCSS from '@unocss/postcss';
+
+export default {
+  plugins: [UnoCSS()],
+};
diff --git a/packages/live2d/src/Demo.tsx b/packages/live2d/src/Demo.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Live2dContextComponent } from './components/Live2dContext';
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <Live2dContextComponent />
+    </React.StrictMode>,
+  );
+}
diff --git a/packages/live2d/src/common/UnoLitElement.ts b/packages/live2d/src/common/UnoLitElement.ts
@@ -0,0 +1,4 @@
+import { LitElement } from 'lit';
+import { UNO } from '../utils/unoMixin';
+
+export const UnoLitElement = UNO(LitElement);
diff --git a/packages/live2d/src/components/Live2dCanvas.tsx b/packages/live2d/src/components/Live2dCanvas.tsx
@@ -0,0 +1,46 @@
+import { consume } from "@lit/context";
+import { createComponent } from "@lit/react";
+import { type PropertyValues, type TemplateResult, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import React from "react";
+import { UnoLitElement } from "../common/UnoLitElement";
+import { type Live2dConfig, configContext } from "../context/config-context";
+import { BeforeInitEvent } from "../events/before-init.js";
+import Model from "../live2d/model";
+
+export class Live2dCanvas extends UnoLitElement {
+  @consume({ context: configContext })
+  @property({ attribute: false })
+  public config?: Live2dConfig;
+
+  @state()
+  private _model: unknown;
+
+  @query("#live2d")
+  private _live2d: HTMLCanvasElement;
+
+  render(): TemplateResult {
+    return html` <canvas id="live2d" class="cursor-grab"> </canvas> `;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    // 发出 Live2d beforeInit 事件
+    window.dispatchEvent(new BeforeInitEvent({ config: this.config }));
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    if (this.config && this._live2d) {
+      this._model = new Model(this._live2d, this.config);
+    }
+  }
+}
+
+customElements.define("live2d-canvas", Live2dCanvas);
+
+export const Live2dCanvasComponent = createComponent({
+  tagName: "live2d-canvas",
+  elementClass: Live2dCanvas,
+  react: React,
+});
diff --git a/packages/live2d/src/components/Live2dContext.tsx b/packages/live2d/src/components/Live2dContext.tsx
@@ -0,0 +1,30 @@
+import { createComponent } from '@lit/react';
+import { type TemplateResult, html } from 'lit';
+import React from 'react';
+import { UnoLitElement } from '../common/UnoLitElement';
+import './Live2dWidget';
+import { provide } from '@lit/context';
+import { type Live2dConfig, configContext } from '../context/config-context';
+import '../events';
+
+export class Live2dContext extends UnoLitElement {
+  @provide({ context: configContext })
+  config = {
+    apiPath: 'https://live2d.fghrsh.net/api',
+    live2dLocation: 'right',
+    consoleShowStatus: false,
+    isTools: true,
+  } as Live2dConfig;
+
+  render(): TemplateResult {
+    return html` <live2d-widget></live2d-widget> `;
+  }
+}
+
+customElements.define('live2d-context', Live2dContext);
+
+export const Live2dContextComponent = createComponent({
+  tagName: 'live2d-context',
+  elementClass: Live2dContext,
+  react: React,
+});
diff --git a/packages/live2d/src/components/Live2dTips.tsx b/packages/live2d/src/components/Live2dTips.tsx
@@ -0,0 +1,94 @@
+import { consume } from '@lit/context';
+import { createComponent } from '@lit/react';
+import { type TemplateResult, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import React from 'react';
+import { UnoLitElement } from '../common/UnoLitElement';
+import { type Live2dConfig, configContext } from '../context/config-context';
+import type { SendMessageEvent } from '../events/send-message';
+import { isNotEmpty } from '../utils/isNotEmpty';
+import { randomSelection } from '../utils/randomSelection';
+
+export class Live2dTips extends UnoLitElement {
+  @consume({ context: configContext })
+  @property({ attribute: false })
+  public config?: Live2dConfig;
+
+  @state()
+  private _isShow = false;
+  @state()
+  private _message = '';
+  private priority = -1;
+  private messageTimer: number | null = null;
+
+  constructor() {
+    super();
+    this._isShow = false;
+    this._message = '';
+  }
+
+  render(): TemplateResult {
+    const classes = {
+      'opacity-100': this._isShow,
+      'opacity-0': !this._isShow,
+    };
+    return html`
+    <div id="live2d-tips" class="animate-shake animate-delay-5s min-h-18 w-63 bg-tips border border-tips border-solid rounded-xl shadow-tips
+    text-size-sm overflow-hidden px-2.5 py-1.5 text-ellipsis transition-opacity-1000 break-all ${classMap(classes)}">
+      ${unsafeHTML(this._message)}
+    </div>
+    `;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    // 为 tips 注册 tips 相关事件
+    window.addEventListener(
+      'live2d:send-message',
+      this.handleMessage.bind(this),
+    );
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener(
+      'live2d:send-message',
+      this.handleMessage.bind(this),
+    );
+  }
+
+  handleMessage(e: SendMessageEvent): void {
+    const { text, timeout, priority } = e.detail;
+    if (!isNotEmpty(text)) {
+      return;
+    }
+    if (priority < this.priority) {
+      return;
+    }
+    if (this.messageTimer) {
+      clearTimeout(this.messageTimer);
+      this.messageTimer = null;
+    }
+    const message = randomSelection(text);
+    if (!isNotEmpty(message)) {
+      return;
+    }
+    this.priority = priority;
+    this._message = message;
+    this._isShow = true;
+    this.messageTimer = setTimeout(() => {
+      this._isShow = false;
+      this.priority = -1;
+    }, timeout);
+  }
+}
+
+customElements.define('live2d-tips', Live2dTips);
+
+export const Live2dTipsComponent = createComponent({
+  tagName: 'live2d-tips',
+  elementClass: Live2dTips,
+  react: React,
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -72,3 +72,5 @@ application-local.properties

		/admin-frontend/node_modules/
		/workplace/

		/node_modules/