wip(app):

package.json

@@ -4,12 +4,16 @@
   "description": "fabritor-web",
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@ice/runtime": "^1.2.7",
     "antd": "^5.11.0",
+    "emoji-mart": "^5.5.2",
     "fabric": "^5.3.0",
     "fontfaceobserver": "^2.3.0",
     "hotkeys-js": "^3.12.0",
     "lodash-es": "^4.17.21",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "uuid": "^9.0.1"

src/fabritor/UI/panel/AppPanel/index.tsx

@@ -0,0 +1,41 @@
+import { Flex, Card } from 'antd';
+import { QrcodeOutlined, SmileOutlined } from '@ant-design/icons';
+
+const APP_LIST = [
+  {
+    title: '二维码',
+    key: 'qrcode',
+    icon: <QrcodeOutlined style={{ fontSize: 30 }} />
+  },
+  {
+    title: 'Emoji',
+    key: 'emoji',
+    icon: <SmileOutlined style={{ fontSize: 30 }} />
+  }
+];
+
+export default function AppPanel () {
+  return (
+    <div className="fabritor-panel-text-wrapper">
+      <Flex
+        wrap="wrap"
+        gap={12}
+        justify="space-around"
+      >
+        {
+          APP_LIST.map(item => (
+            <Card
+              hoverable
+              style={{ width: 150, paddingTop: 12 }}
+              key={item.key}
+              cover={item.icon}
+              bodyStyle={{ padding: 12 }}
+            >
+              <Card.Meta description={item.title} style={{ textAlign: 'center' }} />
+            </Card>
+          ))
+        }
+      </Flex>
+    </div>
+  )
+}

src/fabritor/UI/panel/index.tsx

@@ -9,6 +9,7 @@ import DesignPanel from './DesignPanel';
 import Header from '../header';
 import TextFx from './TextFx';
 import { GloablStateContext } from '@/context';
+import AppPanel from './AppPanel';
 
 import './index.scss';
 import { useState } from 'react';
@@ -76,6 +77,9 @@ export default function Panel () {
     if (value === 'paint') {
       return <PaintPanel />;
     }
+    if (value === 'app') {
+      return <AppPanel />;
+    }
     return null;
   }
 

yarn.lock

@@ -400,6 +400,16 @@
   resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
+"@emoji-mart/data@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.1.2.tgz#777c976f8f143df47cbb23a7077c9ca9fe5fc513"
+  integrity sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==
+
+"@emoji-mart/react@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a"
+  integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
@@ -2735,6 +2745,11 @@ electron-to-chromium@^1.4.535:
   resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.576.tgz#0c6940fdc0d60f7e34bd742b29d8fa847c9294d1"
   integrity sha512-yXsZyXJfAqzWk1WKryr0Wl0MN2D47xodPvEEwlVePBnhU5E7raevLQR+E6b9JAD3GfL/7MbAL9ZtWQQPcLx7wA==
 
+emoji-mart@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af"
+  integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -5208,7 +5223,7 @@ q@^1.5.1:
 
 qrcode.react@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmmirror.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
   integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
 
 [email protected]: