diff --git a/src/views/products/Detail/ContractRemarksModal.jsx b/src/views/products/Detail/ContractRemarksModal.jsx
new file mode 100644
index 0000000..a9037cc
--- /dev/null
+++ b/src/views/products/Detail/ContractRemarksModal.jsx
@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { Form, Modal, Input, Button, Flex, App } from 'antd'
+import { useTranslation } from 'react-i18next'
+import useProductsStore from '@/stores/Products/Index'
+import { useProductsTypesMapVal } from '@/hooks/useProductsSets'
+import RequireAuth from '@/components/RequireAuth'
+import { PERM_PRODUCTS_OFFER_PUT } from '@/config'
+
+export const ContractRemarksModal = () => {
+  const { t } = useTranslation()
+
+  const { notification } = App.useApp()
+  const productsTypesMapVal = useProductsTypesMapVal()
+  const [getRemarkList, saveOrUpdateRemark] = useProductsStore((state) => [
+    state.getRemarkList, state.saveOrUpdateRemark
+  ])
+
+  const [isRemarksModalOpen, setRemarksModalOpen] = useState(false)
+  const [remarksForm] = Form.useForm()
+
+  const onRemarksFinish = () => {
+    const remarkList = remarksForm.getFieldsValue().remarkList
+    saveOrUpdateRemark(remarkList)
+      .then(() => {
+        notification.info({
+          message: 'Notification',
+          description: '合同备注保存成功',
+          placement: 'top',
+        })
+      })
+      .catch(ex => {
+        notification.error({
+          message: 'Notification',
+          description: ex.message,
+          placement: 'top',
+        })
+      })
+  }
+
+  const handleContractRemarks = () => {
+    getRemarkList()
+      .then(list => {
+        remarksForm.setFieldsValue({remarkList:list})
+      })
+
+    setRemarksModalOpen(true)
+  }
+
+  const getFieldLabel = (field) => {
+    const remarkList = remarksForm.getFieldsValue([['remarkList']]).remarkList
+    return productsTypesMapVal[remarkList[field.key].product_type_id]?.label
+  }
+
+  return (
+    <>
+      <RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
+        <Button size='small' onClick={handleContractRemarks}>{t('products:ContractRemarks')}</Button>
+      </RequireAuth>
+
+      <Modal
+        centered
+        title={t('products:ContractRemarks')}
+        width={'640px'}
+        open={isRemarksModalOpen}
+        onOk={() => onRemarksFinish()}
+        onCancel={() => setRemarksModalOpen(false)}
+        destroyOnClose
+        forceRender
+      >
+        <Form
+          labelCol={{ span: 3 }}
+          wrapperCol={{ span: 20 }}
+          form={remarksForm}
+          name='remarksForm'
+          autoComplete='off'
+        >
+          <Form.List name='remarkList'>
+            {(fields) => (
+              <Flex gap='middle' vertical>
+                {fields.map((field) => (
+                  <Form.Item label={getFieldLabel(field)} name={[field.name, 'Memo']} key={field.key}>
+                    <Input.TextArea rows={2}></Input.TextArea>
+                  </Form.Item>
+                ))}
+              </Flex>
+            )}
+          </Form.List>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+export default ContractRemarksModal