feat: add sakana widget

2 years ago · d5db57dfdc
parent 439011940d
commit d5db57dfdc
11 changed files with 178 additions and 7 deletions
--- a/client/web/plugins/com.msgbyte.widget.sakana/assets/icon.png
+++ b/client/web/plugins/com.msgbyte.widget.sakana/assets/icon.png
--- a/client/web/plugins/com.msgbyte.widget.sakana/manifest.json
+++ b/client/web/plugins/com.msgbyte.widget.sakana/manifest.json
@ -0,0 +1,9 @@
+{
+  "label": "sakana-widget",
+  "name": "com.msgbyte.widget.sakana",
+  "url": "/plugins/com.msgbyte.widget.sakana/index.js",
+  "icon": "/plugins/com.msgbyte.widget.sakana/assets/icon.png",
+  "version": "0.0.0",
+  "author": "moonrailgun",
+  "description": "Add sakana widget in tailchat"
+}
--- a/client/web/plugins/com.msgbyte.widget.sakana/package.json
+++ b/client/web/plugins/com.msgbyte.widget.sakana/package.json
@ -0,0 +1,18 @@
+{
+  "name": "@plugins/com.msgbyte.widget.sakana",
+  "main": "src/index.tsx",
+  "version": "0.0.0",
+  "description": "Add sakana widget in tailchat",
+  "private": true,
+  "scripts": {
+    "sync:declaration": "tailchat declaration github"
+  },
+  "dependencies": {
+    "sakana-widget": "^2.6.0"
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26",
+    "react": "18.2.0",
+    "styled-components": "^5.3.6"
+  }
+}
--- a/client/web/plugins/com.msgbyte.widget.sakana/src/index.tsx
+++ b/client/web/plugins/com.msgbyte.widget.sakana/src/index.tsx
@ -0,0 +1,6 @@
+const PLUGIN_ID = 'com.msgbyte.sakana-widget';
+const PLUGIN_NAME = 'sakana-widget';
+
+console.log(`Plugin ${PLUGIN_NAME}(${PLUGIN_ID}) is loaded`);
+
+import('./main');
--- a/client/web/plugins/com.msgbyte.widget.sakana/src/main.css
+++ b/client/web/plugins/com.msgbyte.widget.sakana/src/main.css
@ -0,0 +1,78 @@
+.sakana-widget *,
+.sakana-widget *::before,
+.sakana-widget *::after {
+  box-sizing: border-box;
+}
+.sakana-widget-wrapper {
+  pointer-events: none;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.sakana-widget-app {
+  pointer-events: none;
+  position: relative;
+}
+.sakana-widget-canvas {
+  z-index: 10;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.sakana-widget-main {
+  z-index: 20;
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+.sakana-widget-img {
+  z-index: 40;
+  cursor: move;
+  pointer-events: auto;
+  position: relative;
+  background: no-repeat 50% 50%;
+  background-size: cover;
+}
+.sakana-widget-ctrl {
+  z-index: 30;
+  cursor: pointer;
+  pointer-events: auto;
+  position: relative;
+  height: 24px;
+  width: 112px;
+  display: flex;
+  border-radius: 6px;
+  background-color: #ddd;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+.sakana-widget-ctrl-item {
+  height: 24px;
+  width: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #555;
+  background-color: transparent;
+}
+.sakana-widget-ctrl-item:hover {
+  color: #555;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+.sakana-widget-icon {
+  height: 18px;
+  width: 18px;
+}
+.sakana-widget-icon--rotate {
+  animation: sakana-widget-spin 2s linear infinite;
+}
+
+@keyframes sakana-widget-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/client/web/plugins/com.msgbyte.widget.sakana/src/main.ts
+++ b/client/web/plugins/com.msgbyte.widget.sakana/src/main.ts
@ -0,0 +1,10 @@
+import SakanaWidget from 'sakana-widget';
+import './main.css'; // copy from sakana-widget/dist/index.css
+
+const container = document.createElement('div');
+container.style.position = 'fixed';
+container.style.left = '60px';
+container.style.bottom = '80px';
+
+document.body.appendChild(container);
+new SakanaWidget().setState({ r: 1, y: 1, t: 0, w: 0 }).mount(container);
--- a/client/web/plugins/com.msgbyte.widget.sakana/src/translate.ts
+++ b/client/web/plugins/com.msgbyte.widget.sakana/src/translate.ts
@ -0,0 +1,8 @@
+import { localTrans } from '@capital/common';
+
+export const Translate = {
+  name: localTrans({
+    'zh-CN': 'sakana-widget',
+    'en-US': 'sakana-widget',
+  }),
+};
--- a/client/web/plugins/com.msgbyte.widget.sakana/tsconfig.json
+++ b/client/web/plugins/com.msgbyte.widget.sakana/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "importsNotUsedAsValues": "error"
+  }
+}
--- a/client/web/plugins/com.msgbyte.widget.sakana/types/tailchat.d.ts
+++ b/client/web/plugins/com.msgbyte.widget.sakana/types/tailchat.d.ts
@ -0,0 +1,2 @@
+declare module '@capital/common';
+declare module '@capital/component';
--- a/client/web/registry.json
+++ b/client/web/registry.json
@ -195,5 +195,14 @@
    "description": "Used to integrate third-party applications in groups",
    "description.zh-CN": "用于在群组中集成第三方应用",
    "requireRestart": true
+  },
+  {
+    "label": "sakana-widget",
+    "name": "com.msgbyte.widget.sakana",
+    "url": "/plugins/com.msgbyte.widget.sakana/index.js",
+    "icon": "/plugins/com.msgbyte.widget.sakana/assets/icon.png",
+    "version": "0.0.0",
+    "author": "moonrailgun",
+    "description": "Add sakana widget in tailchat"
  }
 ]
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -528,7 +528,7 @@ importers:
        version: 0.32.11
      zustand:
        specifier: ^4.3.6
-        version: 4.3.6(immer@9.0.15)(react@18.2.0)
+        version: 4.3.6(immer@9.0.21)(react@18.2.0)
    devDependencies:
      '@types/crc':
        specifier: ^3.4.0
@ -1170,6 +1170,22 @@ importers:
        specifier: 18.2.0
        version: 18.2.0

+  client/web/plugins/com.msgbyte.widget.sakana:
+    dependencies:
+      sakana-widget:
+        specifier: ^2.6.0
+        version: 2.6.0
+    devDependencies:
+      '@types/styled-components':
+        specifier: ^5.1.26
+        version: 5.1.26
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      styled-components:
+        specifier: ^5.3.6
+        version: 5.3.10(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
+
  client/web/plugins/com.msgbyte.wormhole:
    devDependencies:
      react:
@ -1768,7 +1784,7 @@ importers:
        version: 5.3.6(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
      zustand:
        specifier: ^4.3.6
-        version: 4.3.6(immer@9.0.15)(react@18.2.0)
+        version: 4.3.6(immer@9.0.21)(react@18.2.0)

  server/plugins/com.msgbyte.getui:
    dependencies:
@ -1946,7 +1962,7 @@ importers:
        version: 5.3.6(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
      zustand:
        specifier: ^4.3.6
-        version: 4.3.6(immer@9.0.15)(react@18.2.0)
+        version: 4.3.6(immer@9.0.21)(react@18.2.0)

  server/plugins/com.msgbyte.wxpusher:
    dependencies:
@ -7372,6 +7388,10 @@ packages:
    resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
    dev: true

+  /@juggle/resize-observer@3.4.0:
+    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+    dev: false
+
  /@koa/cors@3.4.1:
    resolution: {integrity: sha512-/sG9NlpGZ/aBpnRamIlGs+wX+C/IJ5DodNK7iPQIVCG4eUQdGeshGhWQ6JCi7tpnD9sCtFXcS04iTimuaJfh4Q==}
    engines: {node: '>= 8.0.0'}
@ -14754,7 +14774,6 @@ packages:
      lodash: 4.17.21
      picomatch: 2.3.1
      styled-components: 5.3.10(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
-    dev: false

  /babel-plugin-styled-components@2.0.7(styled-components@5.3.6):
    resolution: {integrity: sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==}
@ -21727,10 +21746,10 @@ packages:

  /immer@9.0.15:
    resolution: {integrity: sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==}
+    dev: false

  /immer@9.0.21:
    resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==}
-    dev: false

  /import-fresh@2.0.0:
    resolution: {integrity: sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==}
@ -31684,6 +31703,12 @@ packages:
  /safer-buffer@2.1.2:
    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}

+  /sakana-widget@2.6.0:
+    resolution: {integrity: sha512-uYG7loibwAB6bwNUy4VvYt0jREy4cUIEA/vdQJa27HgySHtN1bmEjHfQu3CVeohinxsSTRcuqJvPew+SaG2p6w==}
+    dependencies:
+      '@juggle/resize-observer': 3.4.0
+    dev: false
+
  /sane@4.1.0:
    resolution: {integrity: sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==}
    engines: {node: 6.* || 8.* || >= 10.*}
@ -33038,7 +33063,6 @@ packages:
      react-is: 18.2.0
      shallowequal: 1.1.0
      supports-color: 5.5.0
-    dev: false

  /styled-components@5.3.6(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==}
@ -36509,6 +36533,7 @@ packages:
      immer: 9.0.15
      react: 18.2.0
      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false

  /zustand@4.3.6(immer@9.0.21)(react@18.2.0):
    resolution: {integrity: sha512-6J5zDxjxLE+yukC2XZWf/IyWVKnXT9b9HUv09VJ/bwGCpKNcaTqp7Ws28Xr8jnbvnZcdRaidztAPsXFBIqufiw==}
@ -36525,7 +36550,6 @@ packages:
      immer: 9.0.21
      react: 18.2.0
      use-sync-external-store: 1.2.0(react@18.2.0)
-    dev: false

  /zwitch@1.0.5:
    resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}