wip(app): qrcode

package.json

@@ -13,7 +13,6 @@
     "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/AppSubPanel.tsx

@@ -0,0 +1,26 @@
+import { LeftOutlined } from '@ant-design/icons';
+import { Card, Flex } from 'antd';
+
+export default function AppSubPanel (props) {
+  const { title, children, back } = props;
+
+  const back2AppList = () => {
+    back && back();
+  }
+
+  return (
+    <Card
+      bordered={false}
+      style={{ marginLeft: -24, boxShadow: 'none' }}
+      bodyStyle={{ padding: 12 }}
+      title={
+        <Flex justify="space-between">
+          <LeftOutlined onClick={back2AppList} />
+          <p>{title}</p>
+        </Flex>
+      }
+    >
+      {children}
+    </Card>
+  )
+}

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

@@ -0,0 +1,105 @@
+import { Button, Form, Input, InputNumber, QRCode, Radio, Switch, Collapse, Flex } from 'antd';
+import AppSubPanel from './AppSubPanel';
+import ColorSetter from '@/fabritor/components/ColorSetter';
+import { useEffect, useRef, useState } from 'react';
+import { createFImage } from '@/editor/image';
+
+const { Item: FormItem } = Form;
+
+export default function QRCodePanel (props) {
+  const { back } = props;
+  const [form] = Form.useForm();
+  const [form2] = Form.useForm();
+  const [QRCodeConfig, setQRCodeConfig] = useState({ value: 'fabritor' });
+  const qrRef = useRef<HTMLDivElement>(null);
+
+  const handleValuesChange = (values) => {
+    setQRCodeConfig({
+      ...QRCodeConfig,
+      ...values
+    });
+  }
+
+  const add2Canvas = () => {
+    if (!QRCodeConfig.value || !qrRef.current) return;
+    const canvas = qrRef.current.querySelector('canvas');
+    if (!canvas) return;
+    const img = new Image();
+    img.onload = () => {
+      createFImage({
+        imageSource: img
+      });
+    }
+    img.src = canvas.toDataURL();
+  }
+
+  useEffect(() => {
+    form.setFieldsValue({
+      value: 'fabritor',
+      size: 160
+    });
+    form2.setFieldsValue({
+      color: '#000000',
+      bgColor: '#00000000',
+      iconSize: 40,
+      errorLevel: 'M'
+    });
+  }, []);
+
+  return (
+    <AppSubPanel title="二维码" back={back}>
+      <Form
+        form={form}
+        onValuesChange={handleValuesChange}
+      >
+        <FormItem name="value" label="文本">
+          <Input />
+        </FormItem>
+        <FormItem name="size" label="大小">
+          <InputNumber />
+        </FormItem>
+      </Form>
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: '其他设置',
+            children: (
+              <Form
+                form={form2}
+                onValuesChange={handleValuesChange}
+              >
+                <FormItem name="color" label="颜色">
+                  <ColorSetter />
+                </FormItem>
+                <FormItem name="bgColor" label="背景色">
+                  <ColorSetter />
+                </FormItem>
+                <FormItem name="errorLevel" label="纠错等级">
+                  <Radio.Group options={['L', 'M', 'Q', 'H']} />
+                </FormItem>
+                <FormItem name="icon" label="内置图片">
+                  <Input placeholder="仅支持图片链接" />
+                </FormItem>
+                <FormItem name="iconSize" label="内置图片大小">
+                  <InputNumber />
+                </FormItem>
+              </Form>
+            )
+          }
+        ]}
+      />
+      {
+        QRCodeConfig.value ?
+        <Flex vertical align="center" gap={10} style={{ marginTop: 16 }} ref={qrRef}> 
+          <QRCode
+            type="canvas"
+            {...QRCodeConfig}
+            style={{ maxWidth: 200 }}
+          />
+          <Button type="primary" onClick={add2Canvas}>添加至画布</Button>
+        </Flex> : null
+      }
+    </AppSubPanel>
+  )
+}

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

@@ -1,5 +1,7 @@
 import { Flex, Card } from 'antd';
 import { QrcodeOutlined, SmileOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+import QRCodePanel from './QRCode';
 
 const APP_LIST = [
   {
@@ -15,12 +17,21 @@ const APP_LIST = [
 ];
 
 export default function AppPanel () {
-  return (
-    <div className="fabritor-panel-text-wrapper">
+  const [app, setApp] = useState('');
+
+  const handleAppClick = (item) => {
+    setApp(item.key);
+  }
+
+  const back2List = () => { setApp(''); }
+
+  const renderAppList = () => {
+    return (
       <Flex
         wrap="wrap"
         gap={12}
         justify="space-around"
+        style={{ padding: '16px 16px 16px 0', marginLeft: -8 }}
       >
         {
           APP_LIST.map(item => (
@@ -30,12 +41,28 @@ export default function AppPanel () {
               key={item.key}
               cover={item.icon}
               bodyStyle={{ padding: 12 }}
+              onClick={() => { handleAppClick(item) }}
             >
               <Card.Meta description={item.title} style={{ textAlign: 'center' }} />
             </Card>
           ))
         }
       </Flex>
+    )
+  }
+
+  const renderApp = () => {
+    if (app === 'qrcode') {
+      return <QRCodePanel back={back2List} />;
+    }
+    return null;
+  }
+
+  return (
+    <div>
+      {
+        app ? renderApp() : renderAppList()
+      }
     </div>
   )
 }