From b5259edd1c18d1d3a46bed747a7102f0a8f73645 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Tue, 4 Mar 2025 14:24:45 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E5=89=8D=E7=AB=AF):=20=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=94=AF=E4=BB=98=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/GeneratePaymentDrawer.jsx      | 14 ++++++++++
 .../Online/Input/EmailEditorPopup.jsx         |  5 ++--
 .../Online/Input/PaymentlinkBtn.jsx           | 23 ++++++++++++----
 src/views/accounts/GeneratePayment.jsx        | 27 ++++++++++++-------
 4 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 src/views/Conversations/Online/Components/GeneratePaymentDrawer.jsx

diff --git a/src/views/Conversations/Online/Components/GeneratePaymentDrawer.jsx b/src/views/Conversations/Online/Components/GeneratePaymentDrawer.jsx
new file mode 100644
index 0000000..af1cef3
--- /dev/null
+++ b/src/views/Conversations/Online/Components/GeneratePaymentDrawer.jsx
@@ -0,0 +1,14 @@
+import { createContext, useEffect, useState } from 'react'
+import { Drawer } from 'antd'
+import { useOrderStore } from '@/stores/OrderStore'
+import GeneratePayment from '@/views/accounts/GeneratePayment'
+
+const GeneratePaymentDrawer = ({ ...props }) => {
+  const [openPaymentDrawer, closePaymentDrawer, paymentDrawerOpen] = useOrderStore((state) => [state.openDrawer, state.closeDrawer, state.drawerOpen])
+  return (
+    <Drawer title='支付链接' placement={'top'} size={'large'} onClose={() => closePaymentDrawer()} open={paymentDrawerOpen}>
+      <GeneratePayment></GeneratePayment>
+    </Drawer>
+  )
+}
+export default GeneratePaymentDrawer
diff --git a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
index 40df542..2666f4e 100644
--- a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
+++ b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
@@ -17,6 +17,7 @@ import { sentMsgTypeMapped,   } from '@/channel/bubbleMsgUtils';
 import { EmailBuilder, useEmailDetail, useEmailSignature } from '@/hooks/useEmail';
 import useSnippetStore from '@/stores/SnippetStore'
 import { useOrderStore } from '@/stores/OrderStore'
+import PaymentlinkBtn from './PaymentlinkBtn';
 
 // 禁止上传的附件类型
 // .application, .exe, .app
@@ -551,9 +552,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
                   <Button type={'link'} onClick={() => openDrawerSnippet()}>
                     图文集
                   </Button>
-                  <Button type={'link'} onClick={() => openPaymentDrawer()}>
-                    支付链接
-                  </Button>
+                  <PaymentlinkBtn type={'link'} />
                   {/* 更多工具 */}
                   {/* <Popover
                     content={
diff --git a/src/views/Conversations/Online/Input/PaymentlinkBtn.jsx b/src/views/Conversations/Online/Input/PaymentlinkBtn.jsx
index 89e9a57..8649e2a 100644
--- a/src/views/Conversations/Online/Input/PaymentlinkBtn.jsx
+++ b/src/views/Conversations/Online/Input/PaymentlinkBtn.jsx
@@ -1,15 +1,28 @@
 import { createContext, useEffect, useState } from 'react'
 import { useOrderStore } from '@/stores/OrderStore'
 import { Tooltip, Button } from 'antd'
+import GeneratePaymentDrawer from '../Components/GeneratePaymentDrawer'
 
-const PaymentlinkBtn = ({ ...props }) => {
+const PaymentlinkBtn = ({ type, ...props }) => {
   const [openPaymentDrawer] = useOrderStore((state) => [state.openDrawer])
 
   return (
-    <Tooltip title='支付链接' >
-      {/* <Button type='text' onClick={() => openPaymentDrawer()} icon={<DollarOutlined className='text-orange-500' />} size={'middle'} /> */}
-      <Button type='text' onClick={() => openPaymentDrawer()}  size={'middle'} className='px-1' >💲</Button>
-    </Tooltip>
+    <>
+      <GeneratePaymentDrawer />
+      <Tooltip title='支付链接'>
+        {/* <Button type='text' onClick={() => openPaymentDrawer()} icon={<DollarOutlined className='text-orange-500' />} size={'middle'} /> */}
+
+        {type === 'link' ? (
+          <Button type={'link'} onClick={() => openPaymentDrawer()}>
+            支付链接
+          </Button>
+        ) : (
+          <Button type='text' onClick={() => openPaymentDrawer()} size={'middle'} className='px-1'>
+            💲
+          </Button>
+        )}
+      </Tooltip>
+    </>
   )
 }
 export default PaymentlinkBtn
diff --git a/src/views/accounts/GeneratePayment.jsx b/src/views/accounts/GeneratePayment.jsx
index 0cb5054..d8b6922 100644
--- a/src/views/accounts/GeneratePayment.jsx
+++ b/src/views/accounts/GeneratePayment.jsx
@@ -5,11 +5,13 @@ import useAuthStore from '@/stores/AuthStore'
 import useConversationStore from '@/stores/ConversationStore'
 import { useOrderStore } from '@/stores/OrderStore'
 import { InfoCircleOutlined } from '@ant-design/icons'
+import useStyleStore from '@/stores/StyleStore';
 
 function GeneratePayment() {
 
   const { notification } = App.useApp()
   const [messageApi, contextHolder] = message.useMessage()
+  const [mobile, setMobile] = useStyleStore((state) => [state.mobile, state.setMobile]);
 
   const [generateForm] = Form.useForm()
 
@@ -71,8 +73,8 @@ function GeneratePayment() {
 
   return (
     <>
-      <Row gutter={16}>
-        <Col span={6} offset={6}>
+      <Flex gap={16} justify={mobile ? 'normal' : 'center'} vertical={mobile ? true : false}>
+        <div className='basis-1/4'>
           <Form
             labelCol={{
               span: 4,
@@ -173,16 +175,13 @@ function GeneratePayment() {
             </Form.Item>
           </Form>
           <Flex gap='middle' justify='center'>
-            <Button
-              type='primary'
-              loading={isHtmlLoading}
-              onClick={handleGenerate}>
+            <Button type='primary' loading={isHtmlLoading} onClick={handleGenerate}>
               生成
             </Button>
           </Flex>
-        </Col>
+        </div>
 
-        <Col span={6}>
+        <div className='basis-1/4'>
           <Flex gap='small' vertical>
             <Flex gap='small'>
               <Tooltip placement='topLeft' title='发送邮件使用'>
@@ -196,12 +195,20 @@ function GeneratePayment() {
                 <InfoCircleOutlined />
               </Tooltip>
               <span>支付链接</span>
+            <Button
+              size='small'
+              onClick={() => {
+                navigator.clipboard.writeText(generatedObject.paylink)
+                messageApi.success('复制成功😀')
+              }}>
+              复制链接
+            </Button>
             </Flex>
             <Typography.Text>{generatedObject.paylink}</Typography.Text>
           </Flex>
-        </Col>
+        </div>
         {contextHolder}
-      </Row>
+      </Flex>
     </>
   )
 }