[duoyun-ui] Add <dy-pat-console>

packages/duoyun-ui/.gitignore

@@ -3,6 +3,8 @@
 # Compiler output
 /lib/
 /elements/
+/patterns/
+/helper/
 /react/
 /vue/
 /svelte/

packages/duoyun-ui/docs/zh/01-guide/35-pattern.md

@@ -0,0 +1,67 @@
+# 使用 DuoyunUI 模式
+
+DuoyunUI 提供一些比较复杂的元素，通常由多个 DuoyunUI 元素组成，使用它们可以快速完成一些通用需求，比如创建一个落地页、控制后台，它们有一些独特的特点：
+
+- 内容渲染成 Light DOM
+- 元素名称为 `<dy-pat-*>`
+- 元素类名为 `DyPat*Element`
+
+## 使用方式
+
+```js
+import 'duoyun-ui/patterns/console';
+
+render(
+  html`
+    <dy-pat-console
+      name="DuoyunUI"
+      logo="https://duoyun-ui.gemjs.org/logo.png"
+      .routes=${routes}
+      .navItems=${navItems}
+      .menus=${menus}
+      .userInfo=${userInfo}
+      .keyboardAccess=${true}
+    ></dy-pat-console>
+  `,
+  document.body,
+);
+```
+
+> [!NOTE]
+>
+> - 不要尝试在模式元素中添加子元素
+> - 避免使用通用 CSS 选择器以防止意外的样式化模式元素内容
+> - [使用 React 组件](./60-integrate.md)时无需指定 `pattern` 路径，模式元素和其他 DuoyunUI 输出在同一个目录中：
+>   ```js
+>   import 'duoyun-ui/react/DyPatConsole';
+>   ```
+> - 在 Svelte 中使用时导入路径需要添加 `pat` 前缀，例如：
+>   ```js
+>   import 'duoyun-ui/svelte/pat-console';
+>   ```
+
+## 自定义模式元素
+
+要对模式元素的内容进行一些样式定制，可以通过外部 `<style>` 来进行，这得益于模式元素使用 Light DOM，例如：
+
+```js
+import 'duoyun-ui/patterns/console';
+
+render(
+  html`
+    <style>
+      dy-pat-console .sidebar {
+        width: 21em;
+      }
+    </style>
+    <dy-pat-console></dy-pat-console>
+  `,
+  document.body,
+);
+```
+
+当然，更强大的方式是复制粘贴。
+
+## 例子
+
+<iframe src="https://examples.gemjs.org/console" loading="lazy"></iframe>

packages/duoyun-ui/docs/zh/01-guide/README.md

@@ -38,15 +38,21 @@ Toast.open('error', '发生了一个错误');
 DuoyunUI 支持以 ESM 的方法独立使用某一个元素，例如为你的网站添加键盘访问（按下 <kbd>f</kbd> 列出所有可聚焦元素）：
 
 ```ts
-import('https://esm.sh/duoyun-ui/elements/keyboard-access').then(({ DuoyunKeyboardAccessElement }) =>
-  document.body.append(new DuoyunKeyboardAccessElement()),
+import('https://esm.sh/duoyun-ui/elements/keyboard-access').then(
+  ({ DuoyunKeyboardAccessElement }) =>
+    document.body.append(new DuoyunKeyboardAccessElement()),
 );
 ```
 
 例如启用录屏模式：
 
 ```ts
-import('https://esm.sh/duoyun-ui/elements/input-capture').then(({ DuoyunInputCaptureElement }) =>
-  document.body.append(new DuoyunInputCaptureElement()),
+import('https://esm.sh/duoyun-ui/elements/input-capture').then(
+  ({ DuoyunInputCaptureElement }) =>
+    document.body.append(new DuoyunInputCaptureElement()),
 );
 ```
+
+## 改进 DuoyunUI
+
+请访问 [GitHub](https://github.com/mantou132/gem)

packages/duoyun-ui/package.json

@@ -16,6 +16,8 @@
   },
   "exports": {
     "./elements/*": "./elements/*.js",
+    "./patterns/*": "./patterns/*.js",
+    "./helper/*": "./helper/*.js",
     "./react/*": "./react/*.js",
     "./vue/*": "./vue/*",
     "./svelte/*": "./svelte/*.js",
@@ -24,6 +26,8 @@
   },
   "files": [
     "/elements/",
+    "/patterns/",
+    "/helper/",
     "/react/",
     "/vue/",
     "/svelte/",
@@ -34,7 +38,7 @@
     "docs": "node scripts/hack-gbp-example && gem-book docs --plugin node_modules/gbp-example-hack",
     "docs:remote": "gem-book docs --plugin example",
     "build:docs": "gem-book docs --build --plugin example",
-    "build:components": "gem-port src/elements",
+    "build:components": "gem-port src/elements && gem-port src/patterns --svelte-ns=pat",
     "build:dev": "MODE=dev nodemon -w ../gem-port/bin --exec gem-port src/elements",
     "clean": "node -e \"fs.readdirSync('src').map(dir => require('rimraf').sync(dir))\"",
     "build": "yarn clean && tsc -p tsconfig.build.json",

packages/duoyun-ui/src/helper/error.ts

@@ -0,0 +1,35 @@
+import { Toast } from '../elements/toast';
+
+let unloading = false;
+addEventListener('beforeunload', () => {
+  unloading = true;
+  // prevented
+  setTimeout(() => (unloading = false), 1000);
+});
+
+function printError(err: Error | ErrorEvent | DOMException) {
+  if (err instanceof DOMException && err.name === 'AbortError') {
+    return;
+  }
+  const ignoreError = [
+    // chrome
+    'ResizeObserver',
+    'Script error.',
+  ];
+  if (unloading || ignoreError.some((msg) => err.message?.startsWith(msg))) return;
+  Toast.open('error', err.message || String(err));
+}
+
+function handleRejection({ reason }: PromiseRejectionEvent) {
+  if (reason) {
+    const errors = reason.errors || reason;
+    if (Array.isArray(errors)) {
+      errors.forEach((err) => printError(err));
+    } else {
+      printError(reason.reason || reason);
+    }
+  }
+}
+
+addEventListener('error', printError);
+addEventListener('unhandledrejection', handleRejection);

packages/duoyun-ui/src/helper/webapp.ts

@@ -0,0 +1,34 @@
+import { mediaQuery } from '@mantou/gem/helper/mediaquery';
+
+import { utf8ToB64 } from '../lib/encode';
+
+export function getWebManifestURL(manifest: Record<string, unknown>) {
+  return `data:application/json;base64,${utf8ToB64(
+    JSON.stringify(manifest, (_, value) =>
+      typeof value === 'string' && value.startsWith('/') ? new URL(value, location.origin).href : value,
+    ),
+  )}`;
+}
+
+export function initApp({
+  serviceWorkerScript,
+  initWindowSize,
+}: { serviceWorkerScript?: string; initWindowSize?: [number, number] } = {}) {
+  if (serviceWorkerScript) {
+    navigator.serviceWorker?.register(serviceWorkerScript, { type: 'module' });
+  } else {
+    navigator.serviceWorker?.getRegistration().then((reg) => reg?.unregister());
+  }
+
+  // Installed
+  if (initWindowSize) {
+    matchMedia(mediaQuery.PWA).addEventListener('change', ({ matches }) => {
+      if (matches) {
+        const w = initWindowSize[0];
+        const h = initWindowSize[1];
+        resizeTo(w, h);
+        moveTo((screen.width - w) / 2, (screen.height - h) / 2);
+      }
+    });
+  }
+}