feat: 上传日志前可输入描述文字

src/components/LogUploader.jsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { Popover, message, FloatButton, Button, Form, Input } from "antd";
+import { BugOutlined } from "@ant-design/icons";
+import useAuthStore from '@/stores/AuthStore'
+import { uploadPageSpyLog, sendNotify } from "@/utils/pagespy";
+
+function LogUploader() {
+  const [open, setOpen] = useState(false);
+  const hide = () => {
+    setOpen(false);
+  };
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+  };
+
+  const [loginUser] = useAuthStore((s) => [s.loginUser]);
+
+  const [messageApi, contextHolder] = message.useMessage();
+  const [formBug] = Form.useForm();
+
+  const popoverContent = (
+    <Form
+      layout={"vertical"}
+      form={formBug}
+      initialValues={{ problem: '' }}
+      scrollToFirstError
+      onFinish={async (values) => {
+        const success = await uploadPageSpyLog();
+        messageApi.success("Thanks for the feedback😊");
+        if (success) {
+          sendNotify(`${loginUser?.username}(${loginUser?.userIdStr})说：${values.problem}`);
+        } else {
+          sendNotify(`${loginUser?.username}(${loginUser?.userIdStr})上传日志失败`);
+        }
+        hide();
+        formBug.setFieldsValue({problem: ''});
+      }}
+    >
+      <Form.Item
+        name="problem"
+        label="Need help?"
+        rules={[{ required: true, message: "Specify issue needing support." }]}
+      >
+        <Input.TextArea rows={3} />
+      </Form.Item>
+      <Button
+        type="primary"
+        htmlType="submit"
+        color="cyan"
+        variant="solid"
+        block
+      >
+        Submit
+      </Button>
+    </Form>
+  );
+
+  return (
+    <>
+      {contextHolder}
+      <Popover
+        content={popoverContent}
+        trigger={["click"]}
+        placement="topRight"
+        open={open}
+        onOpenChange={handleOpenChange}
+        fresh
+        destroyOnHidden
+      >
+        <FloatButton icon={<BugOutlined />} tooltip={<div>上传日志给研发部</div>} />
+      </Popover>
+    </>
+  );
+}
+
+export default LogUploader;

src/utils/pagespy.js

@@ -1,9 +1,10 @@
 import { loadScript } from '@/utils/commons'
+import { fetchJSON } from '@/utils/request'
 import { readWebsocketLog } from '@/utils/indexedDB'
 import { BUILD_VERSION, BUILD_DATE } from '@/config'
 
 export const loadPageSpy = (title) => {
-  if (import.meta.env.DEV || window.$pageSpy) return
+  // if (import.meta.env.DEV || window.$pageSpy) return
 
   const PageSpyConfig = { api: 'page-spy.mycht.cn', project: 'Sales CRM', title: title + '(v' + BUILD_VERSION + ')', autoRender: false, offline: true }
 
@@ -46,9 +47,70 @@ export const loadPageSpy = (title) => {
 }
 
 export const uploadPageSpyLog = async () => {
-  await readWebsocketLog()
   // window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
+  // if (window.$pageSpy) {
+  //   await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
+  // }
+
+  // if (import.meta.env.DEV) return true;
+
   if (window.$pageSpy) {
-    await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
+    try {
+      await readWebsocketLog()
+      // await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
+      // 上传最近 1 小时的日志, 直接upload 所有日志: 413 Payload Too Large
+      const now = Date.now();
+      await window.$harbor.uploadPeriods({
+        startTime: now - 60 * 60000,
+        endTime: now,
+      });
+      return true;
+    } catch (error) {
+      return false;
+    }
+  } else {
+    return false;
   }
 }
+
+export const sendNotify = async (message) => {
+
+  const notifyUrl = 'https://p9axztuwd7x8a7.mycht.cn/dingtalk/dingtalkwork/SendMDMsgByDingRobotToGroup';
+
+  const params = {
+    groupid: 'cidFtzcIzNwNoiaGU9Q795CIg==',
+    msgTitle: '有人求助',
+    msgText: `${message}\\n\\nSales CRM (${BUILD_VERSION})`,
+  };
+
+  return fetchJSON(notifyUrl, params).then((json) => {
+    if (json.errcode === 0) {
+      console.info('发送通知成功');
+    } else {
+      throw new Error(json?.errmsg + ': ' + json.errcode);
+    }
+  });
+};
+
+  const uploadLog = async () => {
+    await readWebsocketLog()
+    if (window.$pageSpy) {
+      // window.$pageSpy.triggerPlugins('onOfflineLog', 'upload')
+      try {
+        // await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
+        // 上传最近 1 小时的日志, 直接upload 所有日志: 413 Payload Too Large
+        const now = Date.now()
+        await window.$harbor.uploadPeriods({
+          startTime: now - 60 * 60000,
+          endTime: now,
+        })
+        messageApi.info('Success')
+        // clearWebsocketLog()
+        sendNotify()
+      } catch (error) {
+        messageApi.error('Failure')
+      }
+    } else {
+      messageApi.error('Failure')
+    }
+  }

src/views/AuthApp.jsx

@@ -24,12 +24,11 @@ import '@/assets/App.css'
 import 'react-chat-elements/dist/main.css'
 import EmailFetch from './Conversations/Online/Components/EmailFetch'
 import FetchEmailWorker from './../workers/fetchEmailWorker?worker&url'
-import { readWebsocketLog } from '@/utils/indexedDB'
 import { useGlobalNotify } from '@/hooks/useGlobalNotify'
 import GeneratePaymentDrawer from './Conversations/Online/Components/GeneratePaymentDrawer'
 import GenerateAutoDocDrawer from './Conversations/Online/Components/GenerateAutoDocDrawer'
+import LogUploader from '@/components/LogUploader'
 
-// const fetchEmailWorkerURL = new URL('/src/workers/fetchEmailWorker.js', import.meta.url);
 const fetchEmailWorker = new Worker(FetchEmailWorker, { type: 'module' });
 
 
@@ -90,29 +89,6 @@ function AuthApp() {
     return fetchEmailWorker;
   }
 
-  const uploadLog = async () => {
-    await readWebsocketLog()
-    if (window.$pageSpy) {
-      // window.$pageSpy.triggerPlugins('onOfflineLog', 'upload')
-      try {
-        // await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
-        // 上传最近 1 小时的日志, 直接upload 所有日志: 413 Payload Too Large
-        const now = Date.now()
-        await window.$harbor.uploadPeriods({
-          startTime: now - 60 * 60000,
-          endTime: now,
-        })
-        messageApi.info('Success')
-        // clearWebsocketLog()
-        sendNotify()
-      } catch (error) {
-        messageApi.error('Failure')
-      }
-    } else {
-      messageApi.error('Failure')
-    }
-  }
-
   // 除了路由 /p...以外都需要登陆系统
   const needToLogin = loginUser.userId === -1 && href.indexOf('/p/') === -1
 
@@ -161,7 +137,7 @@ function AuthApp() {
             icon={<CustomerServiceOutlined />}
           >
             <EmailFetch />
-            <FloatButton icon={<BugOutlined />} tooltip={<div>上传日志给研发部</div>} onClick={() => uploadLog()} />
+            <LogUploader />
             <FloatButton.BackTop />
           </FloatButton.Group>
           {contextHolder}