优化

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"
+}

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"
+  }
+}

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');

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);
+  }
+}

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 = '0px';
+
+document.body.appendChild(container);
+new SakanaWidget().setState({ r: 1, y: 1, t: 0, w: 0 }).mount(container);

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',
+  }),
+};

client/web/plugins/com.msgbyte.widget.sakana/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "importsNotUsedAsValues": "error"
+  }
+}

client/web/plugins/com.msgbyte.widget.sakana/types/tailchat.d.ts

@@ -0,0 +1,2 @@
+declare module '@capital/common';
+declare module '@capital/component';