优化显示界面，多语种逻辑

src/views/products/Detail.jsx

@@ -3,40 +3,51 @@ import { Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, Inp
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import DateComponent from '@/components/date';
-import { fetchJSON } from "@/utils/request";
-import { type } from 'windicss/utils';
 import { searchAgencyAction, getAgencyProductsAction } from '@/stores/Products/Index';
 import { useProductsTypes } from '@/hooks/useProductsSets';
 import Extras from './Detail/Extras';
 import { groupBy } from '@/utils/commons';
 import { useParams } from 'react-router-dom';
 import { useHTLanguageSets } from '@/hooks/useHTLanguageSets';
-// import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
+import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
 function Index() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [editingid, setEditingid] = useState('');
-  const [tags, setTags] = useState(['中文', 'English']);
+  const [tags, setTags] = useState([]);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [selectedTag, setSelectedTag] = useState(2);
+  const [selectedTag, setSelectedTag] = useState(null);
   const [saveData, setSaveData] = useState(null);
   const [datePickerVisible, setDatePickerVisible] = useState(false);
   const [currentid, setCurrentid] = useState(null);
-  const [languageStatus, setLanguageStatus] = useState([{ "中文": { title: "", description: "" } }, { "English": { title: "", description: "" } }]);
+  const [languageStatus, setLanguageStatus] = useState(null);
   const [selectedNodeid, setSelectedNodeid] = useState(null);
+  const [remainderLanguage, setRemainderLanguage] = useState([])
   const [selectedDateData, setSelectedDateData] = useState({ dateRange: null, selectedDays: [] });
   const [treeData1, setTreeData1] = useState([]);
   const productsTypes = useProductsTypes();
   const [productsData, setProductsData] = useState(null);
   const [quotation, setQuotation] = useState(null);
   const [lgc_details,setLgc_details] = useState(null);
+  const [languageLabel,setLanguageLabel] = useState(null);
   const { travel_agency_id } = useParams();
+  const {language} = useDefaultLgc();
+  const HTLanguageSets = useHTLanguageSets();
 
+  useEffect(() => {
+    setLanguageStatus(language);
+    const matchedLanguage = HTLanguageSets.find(HTLanguage => HTLanguage.key === language.toString());
+    const languageLabel = matchedLanguage.label
+    // setTags([languageLabel])
+    setLanguageLabel(languageLabel)
+    setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString()))
+  }, []);
+
+  
 
   const fetchData = async () => {
     const a = { travel_agency_id };
     const res = await getAgencyProductsAction(a);
-    
     const groupedProducts = groupBy(res.products, (row) => row.info.product_type_id);
     
     const generateTreeData = (productsTypes, productsData) => {
@@ -54,8 +65,6 @@ function Index() {
     const treeData = generateTreeData(productsTypes, groupedProducts);
     setProductsData(groupedProducts);
     setTreeData1(treeData);
-
-    console.log("setTreeData1", treeData);
   };
   
 
@@ -317,48 +326,68 @@ function Index() {
 
   const handleTagClick = (tag) => {
     setSelectedTag(tag);
-    console.log("handleTagClick",tag)
+    const matchedLanguage = HTLanguageSets.find(language => language.label === tag);
-    // form.setFieldsValue({
+    const key = matchedLanguage ? matchedLanguage.key : null;
-
+    form.setFieldsValue({
-    // })
+      lgc_details: {
+      title: lgc_details[key] ? lgc_details[key].title : '',
+      descriptions: lgc_details[key] ? lgc_details[key].descriptions : ''
+      }
+    });
+    setLanguageStatus(key)
 
   };
 
   const showModal = () => setIsModalVisible(true);
 
-  const handleOk = () => setIsModalVisible(false);
+  const handleOk = () => {
+
+    setTags([...tags,selectedTag])
+
+    console.log("handleOkvalue")
+    setIsModalVisible(false);
+  }
 
   const handleCancel = () => setIsModalVisible(false);
 
 
   const handleTagChange = (value) => {
-    if (!tags.includes(value)) {
+    console.log("handleTagChange",value)
-      setTags([...tags, value]);
-      setLanguageStatus([...languageStatus, { [value]: { title: "", description: "" } }]);
-    }
     setSelectedTag(value);
-    setIsModalVisible(false);
+    console.log("setSelectedTag",selectedTag)
+    // setLanguageStatus()
+
+
+    // if (!tags.includes(value)) {
+    //   setTags([...tags, value]);
+    //   setLanguageStatus([...languageStatus, { [value]: { title: "", descriptions: "" } }]);
+    // }
+    // setSelectedTag(value);
+    // setIsModalVisible(false);
   };
 
   const handleChange = (field, value) => {
-    const updatedLanguageStatus = languageStatus.map(lang => {
+    console.log("languageStatus",languageStatus)
-      if (lang[selectedTag]) {
+    console.log("...lgc_details[languageStatus]",{...lgc_details[languageStatus]})
-        return { ...lang, [selectedTag]: { ...lang[selectedTag], [field]: value } };
+  // 更新整个 lgc_details 对象
-      }
+  const updatedLgcDetails = {
-      return lang;
+    ...lgc_details,
-    });
+    [languageStatus]:{...lgc_details[languageStatus],[field]: value,lgc:languageStatus}
-    setLanguageStatus(updatedLanguageStatus);
+  };
+  setLgc_details(updatedLgcDetails)
+  console.log("AAAAAAAAAAAAAA", lgc_details);
+
   };
 
   const findLanguageDetails = (tag) => {
     const lang = languageStatus.find(lang => lang[tag]);
-    return lang ? lang[tag] : { title: "", description: "" };
+    return lang ? lang[tag] : { title: "", descriptions: "" };
   };
 
 
   //树组件方法
   const handleNodeSelect = (_, { node }) => {
-  
+    setTags([languageLabel])
     // 如果点击的是同一个节点，不做任何操作
     if (selectedNodeid === node.key) return;
   
@@ -374,8 +403,6 @@ function Index() {
         return true;
       }
     });
-
-    console.log("info",infoData)
   
     // 累积 lgc_details 数据
     let newLgcDetails = {};
@@ -388,8 +415,8 @@ function Index() {
   
     setQuotation(initialQuotationData);
   
+    console.log("descriptions",lgc_details)
     // 使用 setTimeout 确保 lgc_details 已经更新
-    // setTimeout(() => {
       form.setFieldsValue({
         info: {
           title: infoData.title,
@@ -402,11 +429,10 @@ function Index() {
           unit_name: infoData.unit_name
         },
         lgc_details: {
-          title: newLgcDetails[selectedTag]?.title || '',
+          title: newLgcDetails[language]?.title || '',
-          descriptions: newLgcDetails[selectedTag]?.descriptions || ''
+          descriptions: newLgcDetails[language]?.descriptions || ''
         }
       });
-    // }, 0);
   };
   
 
@@ -649,28 +675,28 @@ function Index() {
                     placeholder="选择语言"
                     optionFilterProp="children"
                     onChange={handleTagChange}
-                    filterOption={(input, option) =>
-                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                    }
                   >
-                    <Select.Option value="Français">Français</Select.Option>
+                 
-                    <Select.Option value="Español">Español</Select.Option>
+                    {
-                    <Select.Option value="Deutsch">Deutsch</Select.Option>
+                    remainderLanguage.map((value, label) => (
+                      <Select.Option key={value.label} value={value.label}>
+                        {value.label}
+                      </Select.Option>
+                    ))
+                    }
                   </Select>
                 </Modal>
 
                 <Form.Item label={t('products:Name')} name={['lgc_details', 'title']}>
                   <Input
                     style={{ width: "30%" }}
-                  // value={findLanguageDetails(selectedTag).title}
+                  onChange={(e) => handleChange('title', e.target.value)}
-                  // onChange={(e) => handleChange('title', e.target.value)}
                   />
                 </Form.Item>
                 <Form.Item label={t('products:Description')} name={['lgc_details', 'descriptions']}>
                   <Input.TextArea
                     rows={4}
-                  // value={findLanguageDetails(selectedTag).description}
+                  onChange={(e) => handleChange('descriptions', e.target.value)}
-                  // onChange={(e) => handleChange('description', e.target.value)}
                   />
                 </Form.Item>
               </Card>