diff --git a/src/stores/OrderStore.js b/src/stores/OrderStore.js
index 69d52d9..ea104ef 100644
--- a/src/stores/OrderStore.js
+++ b/src/stores/OrderStore.js
@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { fetchJSON } from '@/utils/request'
+import { fetchJSON, postForm } from '@/utils/request'
 import { API_HOST } from '@/config'
 import { isNotEmpty, prepareUrl } from '@/utils/commons'
 
@@ -76,11 +76,29 @@ export const useOrderStore = create((set, get) => ({
           throw new Error(json?.errmsg + ': ' + json.errcode)
         }
       })
-    
+
+  },
+
+
+  appendOrderComment: async (opi_sn, coli_sn, comment) => {
+    const { fetchOrderDetail } = get()
+    const formData = new FormData()
+    formData.append('opi_sn', opi_sn)
+    formData.append('coli_sn', coli_sn)
+    formData.append('remark', comment)
+
+    return postForm(`${API_HOST}/remark_order`, formData)
+      .then(json => {
+        if (json.errcode === 0) {
+          return fetchOrderDetail(coli_sn)
+        } else {
+          throw new Error(json?.errmsg + ': ' + json.errcode)
+        }
+      })
   },
 
   setOrderPropValue: async (colisn, propName, value) => {
-    
+
     if (propName === 'orderlabel') {
       set((state) => ({
         orderDetail: {
diff --git a/src/utils/request.js b/src/utils/request.js
index 1075ea4..f536a02 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -32,10 +32,12 @@ function checkStatus(response) {
 }
 
 export function fetchText(url) {
+  const headerObj = getRequestHeader()
   return fetch(url, {
     method: 'GET',
     headers: {
-      'X-Web-Version': BUILD_VERSION
+      'X-Web-Version': BUILD_VERSION,
+      ...headerObj
     }
   }).then(checkStatus)
     .then(response => response.text())
@@ -62,11 +64,13 @@ export function fetchJSON(url, data) {
 }
 
 export function postForm(url, data) {
+  const headerObj = getRequestHeader()
   return fetch(url, {
     method: 'POST',
     body: data,
     headers: {
-      'X-Web-Version': BUILD_VERSION
+      'X-Web-Version': BUILD_VERSION,
+      ...headerObj
     }
   }).then(checkStatus)
     .then(response => response.json())
@@ -76,12 +80,14 @@ export function postForm(url, data) {
 }
 
 export function postJSON(url, obj) {
+  const headerObj = getRequestHeader()
   return fetch(url, {
     method: 'POST',
     body: JSON.stringify(obj),
     headers: {
       'Content-type': 'application/json; charset=UTF-8',
-      'X-Web-Version': BUILD_VERSION
+      'X-Web-Version': BUILD_VERSION,
+      ...headerObj
     }
   }).then(checkStatus)
     .then(response => response.json())
@@ -91,12 +97,14 @@ export function postJSON(url, obj) {
 }
 
 export function postStream(url, obj) {
+  const headerObj = getRequestHeader()
   return fetch(url, {
     method: 'POST',
     body: JSON.stringify(obj),
     headers: {
       'Content-type': 'application/octet-stream',
-      'X-Web-Version': BUILD_VERSION
+      'X-Web-Version': BUILD_VERSION,
+      ...headerObj
     }
   }).then(checkStatus)
     .then(response => response.json())
diff --git a/src/views/Conversations/Online/order/CustomerProfile.jsx b/src/views/Conversations/Online/order/CustomerProfile.jsx
index c8b3838..85107be 100644
--- a/src/views/Conversations/Online/order/CustomerProfile.jsx
+++ b/src/views/Conversations/Online/order/CustomerProfile.jsx
@@ -1,19 +1,23 @@
 import { LinkOutlined, MailOutlined, PhoneOutlined, UserOutlined, WhatsAppOutlined } from '@ant-design/icons'
-import { App, Button, Card, Empty, Flex, Select, Spin, Typography } from 'antd'
-import { useEffect, useState } from 'react'
+import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal } from 'antd'
+import { useEffect, useState, useRef } from 'react'
 
-import { copy, isNotEmpty } from '@/utils/commons'
+import { copy, isEmpty } from '@/utils/commons'
 import { Conditional } from '@/components/Conditional'
 import useConversationStore from '@/stores/ConversationStore'
 import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions } from '@/stores/OrderStore'
+import useAuthStore from '@/stores/AuthStore'
 import QuotesHistory from './QuotesHistory'
 
 const CustomerProfile = (() => {
   const { notification, message } = App.useApp()
   const [loading, setLoading] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const orderCommentRef = useRef(null)
   const currentOrder = useConversationStore((state) => state.currentConversation?.coli_sn || '')
+  const loginUser = useAuthStore((state) => state.loginUser)
   const { orderDetail, customerDetail, lastQuotation, quotationList,
-    fetchOrderDetail, setOrderPropValue
+    fetchOrderDetail, setOrderPropValue, appendOrderComment
   } = useOrderStore()
 
   const orderLabelOptions = copy(OrderLabelDefaultOptions)
@@ -103,8 +107,8 @@ const CustomerProfile = (() => {
             </Flex>
           </Flex>
         </Card>
+        <Divider orientation='left'><Typography.Text strong>最新报价</Typography.Text></Divider>
         <Flex vertical={true} className='p-2 '>
-          <Typography.Text strong>最新报价</Typography.Text>
           <Conditional
             condition={quotationList.length > 0}
             whenFalse={<Empty description={<span>暂无报价</span>}></Empty>}
@@ -117,7 +121,38 @@ const CustomerProfile = (() => {
             </>
           }/>
         </Flex>
-        <p className='p-2 shadow-inner overflow-auto m-0 break-words whitespace-pre-wrap' dangerouslySetInnerHTML={{__html: orderDetail.order_detail}}></p>
+
+        <Divider orientation='left'><Typography.Text strong>表单信息</Typography.Text></Divider>
+        <p className='p-2 overflow-auto m-0 break-words whitespace-pre-wrap' dangerouslySetInnerHTML={{__html: orderDetail.order_detail}}></p>
+        <Modal title='添加备注' open={isModalOpen}
+          onOk={() => {
+            const orderCommnet = orderCommentRef.current.value
+            if (isEmpty(orderCommnet)) {
+              message.warning('请输入备注后再提交。')
+            } else {
+              appendOrderComment(loginUser.userId, currentOrder, orderCommnet)
+                .then(() => {
+                  message.success('添加成功')
+                  setIsModalOpen(false)
+                })
+                .catch(reason => {
+                  notification.error({
+                    message: '添加出错',
+                    description: reason.message,
+                    placement: 'top',
+                    duration: 60,
+                  })
+                })
+            }
+            orderCommentRef.current.value = ''
+          }}
+          onCancel={() => {setIsModalOpen(false)}}>
+          <textarea ref={orderCommentRef} className='w-full' rows={4}></textarea>
+        </Modal>
+        <Button size={'small'} onClick={() => {
+          console.info('order: ' + loginUser.userId + '; order: ' + currentOrder)
+          setIsModalOpen(true)
+        }}>添加备注</Button>
         </Spin>
       </div>
     )