diff --git a/src/views/products/Audit.jsx b/src/views/products/Audit.jsx
index f426b6a..8026a9c 100644
--- a/src/views/products/Audit.jsx
+++ b/src/views/products/Audit.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useParams, Link, Navigate, useNavigate } from 'react-router-dom';
-import { App, Empty, Button, Collapse, Table, Space, Divider, Select } from 'antd';
+import { useParams, Link } from 'react-router-dom';
+import { App, Empty, Button, Collapse, Table, Space } from 'antd';
 import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
 import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
 import { useTranslation } from 'react-i18next';
@@ -8,135 +8,8 @@ import useProductsStore, { postProductsQuoteAuditAction, } from '@/stores/Produc
 import { cloneDeep, isEmpty } from '@/utils/commons';
 import useAuthStore from '@/stores/Auth';
 import RequireAuth from '@/components/RequireAuth';
-// import PrintContractPDF from './PrintContractPDF';
 import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
-import dayjs from 'dayjs';
-import VendorSelector from '@/components/VendorSelector';
-import AuditStateSelector from '@/components/AuditStateSelector';
-const Header = ({ refresh, ...props }) => {
-  const { travel_agency_id, use_year, audit_state  } = useParams();
-  const { t } = useTranslation();
-  const isPermitted = useAuthStore(state => state.isPermitted);
-  const [activeAgency, setActiveAgency] = useProductsStore((state) => [state.activeAgency, state.setActiveAgency]);
-  const stateMapVal = useProductsAuditStatesMapVal();
-  const { message, notification } = App.useApp();
-  const navigate = useNavigate();
-
-  const yearOptions = [];
-  const currentYear = dayjs().year();
-  const baseYear = Number(use_year === 'all' ? currentYear : use_year);
-  for (let i = baseYear - 3; i <= baseYear + 3; i++) {
-    yearOptions.push({ label: i, value: i, });
-  }
-
-  const [param, setParam] = useState({ pick_year: baseYear, pick_agency: travel_agency_id, });
-  const [pickYear, setPickYear] = useState(baseYear);
-  const [pickAgency, setPickAgency] = useState({value: activeAgency.travel_agency_id, label: activeAgency.travel_agency_name });
-  const [pickAuditState, setPickAuditState] = useState();
-  useEffect(() => {
-    refresh(param);
-    navigate(`/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/audit`);
-
-    return () => {};
-  }, [param]);
-
-  const emptyPickState = { value: '', label: t('products:State') };
-  useEffect(() => {
-    const baseState = audit_state === 'all' ? emptyPickState : stateMapVal[`${audit_state}`];
-    if (isEmpty(pickAuditState)) {
-      setPickAuditState(baseState);
-    }
-    return () => {};
-  }, [audit_state, stateMapVal])
-
-
-  const handleYearChange = (value) => {
-    setPickYear(value);
-    setParam((pre) => ({ ...pre, ...{ pick_year: value } }));
-  };
-  const handleAuditStateChange = (labelValue) => {
-    const { value } = labelValue || emptyPickState;
-    setPickAuditState(labelValue || emptyPickState);
-    setParam((pre) => ({ ...pre, ...{ pick_state: value } }));
-  };
-
-  const handleAgencyChange = ({ label, value }) => {
-    setPickAgency({ label, value });
-    setActiveAgency({ travel_agency_id: value, travel_agency_name: label });
-    setParam((pre) => ({ ...pre, ...{ pick_agency: value } }));
-  };
-
-  const handleAuditItem = (state, row) => {
-    postProductsQuoteAuditAction(state, { id: row.id, travel_agency_id: activeAgency.travel_agency_id })
-      .then((json) => {
-        if (json.errcode === 0) {
-          message.success(json.errmsg);
-          if (typeof refresh === 'function') {
-            refresh(param);
-          }
-        }
-      })
-      .catch((ex) => {
-        notification.error({
-          message: 'Notification',
-          description: ex.message,
-          placement: 'top',
-          duration: 4,
-        });
-      });
-  };
-  return (
-    <div className='flex justify-end items-center gap-4 h-full'>
-      <div className='grow'>
-        <h2 className='m-0 leading-tight'>
-          {isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? (
-            <VendorSelector
-              value={{label: activeAgency.travel_agency_name, value: activeAgency.travel_agency_id}}
-              onChange={handleAgencyChange}
-              allowClear={false}
-              mode={null}
-              className='w-72'
-              size='large'
-              variant={'borderless'}
-            />
-          ) : (
-            activeAgency.travel_agency_name
-          )}
-          <Divider type={'vertical'} />
-          <Select options={yearOptions} variant={'borderless'} className='w-24' size='large' value={pickYear} onChange={handleYearChange} />
-          <Divider type={'vertical'} />
-          <AuditStateSelector variant={'borderless'} className='w-32' size='large' value={pickAuditState} onChange={handleAuditStateChange} />
-          {/* <Divider type={'vertical'} />
-           {(use_year || '').replace('all', '')} */}
-        </h2>
-      </div>
-      {/* <Button size='small'>{t('Copy')}</Button> */}
-      {/* <Button size='small'>{t('Import')}</Button> */}
-      <RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
-        <Link className='px-2' to={`/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/edit`}>
-          {t('Edit')}
-        </Link>
-      </RequireAuth>
-      <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
-        <Button size='small' type={'primary'} onClick={() => handleAuditItem('2', activeAgency)}>
-          {t('products:auditStateAction.Published')}
-        </Button>
-      </RequireAuth>
-      {/* <Button size='small' type={'primary'} ghost onClick={() => handleAuditItem('2', agency)}>
-        {t('products:auditStateAction.Approved')}
-      </Button> */}
-      <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
-        <Button size='small' type={'primary'} danger ghost onClick={() => handleAuditItem('3', activeAgency)}>
-          {t('products:auditStateAction.Rejected')}
-        </Button>
-      </RequireAuth>
-      {/* todo: export, 审核完成之后才能导出 */}
-      <Button size='small'>{t('Print')} PDF</Button>
-      {/* <PrintContractPDF /> */}
-    </div>
-  );
-};
-
+import Header from './Detail/Header';
 const PriceTable = ({ productType, dataSource, refresh }) => {
   const { t } = useTranslation('products');
   const { travel_agency_id, use_year, audit_state } = useParams();
diff --git a/src/views/products/Detail/Header.jsx b/src/views/products/Detail/Header.jsx
new file mode 100644
index 0000000..1e30c52
--- /dev/null
+++ b/src/views/products/Detail/Header.jsx
@@ -0,0 +1,137 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { App, Button, Divider, Select } from 'antd';
+import { useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
+import { useTranslation } from 'react-i18next';
+import useProductsStore, { postProductsQuoteAuditAction, } from '@/stores/Products/Index';
+import { isEmpty } from '@/utils/commons';
+import useAuthStore from '@/stores/Auth';
+import RequireAuth from '@/components/RequireAuth';
+// import PrintContractPDF from './PrintContractPDF';
+import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
+import dayjs from 'dayjs';
+import VendorSelector from '@/components/VendorSelector';
+import AuditStateSelector from '@/components/AuditStateSelector';
+const Header = ({ refresh, ...props }) => {
+  const { travel_agency_id, use_year, audit_state  } = useParams();
+  const { t } = useTranslation();
+  const isPermitted = useAuthStore(state => state.isPermitted);
+  const [activeAgency, setActiveAgency] = useProductsStore((state) => [state.activeAgency, state.setActiveAgency]);
+  const stateMapVal = useProductsAuditStatesMapVal();
+  const { message, notification } = App.useApp();
+  const navigate = useNavigate();
+
+  const yearOptions = [];
+  const currentYear = dayjs().year();
+  const baseYear = Number(use_year === 'all' ? currentYear : use_year);
+  for (let i = baseYear - 3; i <= baseYear + 3; i++) {
+    yearOptions.push({ label: i, value: i, });
+  }
+
+  const [param, setParam] = useState({ pick_year: baseYear, pick_agency: travel_agency_id, });
+  const [pickYear, setPickYear] = useState(baseYear);
+  const [pickAgency, setPickAgency] = useState({value: activeAgency.travel_agency_id, label: activeAgency.travel_agency_name });
+  const [pickAuditState, setPickAuditState] = useState();
+  useEffect(() => {
+    refresh(param);
+
+    return () => {};
+  }, [param]);
+
+  const emptyPickState = { value: '', label: t('products:State') };
+  useEffect(() => {
+    const baseState = audit_state === 'all' ? emptyPickState : stateMapVal[`${audit_state}`];
+    if (isEmpty(pickAuditState)) {
+      setPickAuditState(baseState);
+    }
+    return () => {};
+  }, [audit_state, stateMapVal])
+
+
+  const handleYearChange = (value) => {
+    setPickYear(value);
+    setParam((pre) => ({ ...pre, ...{ pick_year: value } }));
+  };
+  const handleAuditStateChange = (labelValue) => {
+    const { value } = labelValue || emptyPickState;
+    setPickAuditState(labelValue || emptyPickState);
+    setParam((pre) => ({ ...pre, ...{ pick_state: value } }));
+  };
+
+  const handleAgencyChange = ({ label, value }) => {
+    setPickAgency({ label, value });
+    setActiveAgency({ travel_agency_id: value, travel_agency_name: label });
+    setParam((pre) => ({ ...pre, ...{ pick_agency: value } }));
+  };
+
+  const handleAuditItem = (state, row) => {
+    postProductsQuoteAuditAction(state, { id: row.id, travel_agency_id: activeAgency.travel_agency_id })
+      .then((json) => {
+        if (json.errcode === 0) {
+          message.success(json.errmsg);
+          if (typeof refresh === 'function') {
+            refresh(param);
+          }
+        }
+      })
+      .catch((ex) => {
+        notification.error({
+          message: 'Notification',
+          description: ex.message,
+          placement: 'top',
+          duration: 4,
+        });
+      });
+  };
+  return (
+    <div className='flex justify-end items-center gap-4 h-full'>
+      <div className='grow'>
+        <h2 className='m-0 leading-tight'>
+          {isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? (
+            <VendorSelector
+              value={{label: activeAgency.travel_agency_name, value: activeAgency.travel_agency_id}}
+              onChange={handleAgencyChange}
+              allowClear={false}
+              mode={null}
+              className='w-72'
+              size='large'
+              variant={'borderless'}
+            />
+          ) : (
+            activeAgency.travel_agency_name
+          )}
+          <Divider type={'vertical'} />
+          <Select options={yearOptions} variant={'borderless'} className='w-24' size='large' value={pickYear} onChange={handleYearChange} />
+          <Divider type={'vertical'} />
+          <AuditStateSelector variant={'borderless'} className='w-32' size='large' value={pickAuditState} onChange={handleAuditStateChange} />
+          {/* <Divider type={'vertical'} />
+           {(use_year || '').replace('all', '')} */}
+        </h2>
+      </div>
+      {/* <Button size='small'>{t('Copy')}</Button> */}
+      {/* <Button size='small'>{t('Import')}</Button> */}
+      <RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
+        <Link className='px-2' to={`/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/edit`}>
+          {t('Edit')}
+        </Link>
+      </RequireAuth>
+      <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
+        <Button size='small' type={'primary'} onClick={() => handleAuditItem('2', activeAgency)}>
+          {t('products:auditStateAction.Published')}
+        </Button>
+      </RequireAuth>
+      {/* <Button size='small' type={'primary'} ghost onClick={() => handleAuditItem('2', agency)}>
+        {t('products:auditStateAction.Approved')}
+      </Button> */}
+      <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
+        <Button size='small' type={'primary'} danger ghost onClick={() => handleAuditItem('3', activeAgency)}>
+          {t('products:auditStateAction.Rejected')}
+        </Button>
+      </RequireAuth>
+      {/* todo: export, 审核完成之后才能导出 */}
+      <Button size='small'>{t('Print')} PDF</Button>
+      {/* <PrintContractPDF /> */}
+    </div>
+  );
+};
+export default Header;