feature: Improve the internationalization of dataset pages

Author: hefanli

frontend/src/components/AddTagPopover.tsx

@@ -1,6 +1,7 @@
 import { Button, Input, Popover, theme, Tag, Empty } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
 import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 interface Tag {
   id: number;
@@ -22,6 +23,7 @@ export default function AddTagPopover({
   onCreateAndTag,
 }: AddTagPopoverProps) {
   const { token } = theme.useToken();
+  const { t } = useTranslation();
   const [showPopover, setShowPopover] = useState(false);
 
   const [newTag, setNewTag] = useState("");
@@ -68,12 +70,12 @@ export default function AddTagPopover({
         content={
           <div className="space-y-4 w-[300px]">
             <h4 className="font-medium border-b pb-2 border-gray-100">
-              添加标签
+              {t("tagManagement.addTag")}
             </h4>
             {/* Available Tags */}
             {availableTags?.length ? (
               <div className="space-y-2">
-                <h5 className="text-sm">选择现有标签</h5>
+                <h5 className="text-sm">{t("tagManagement.selectExistingTags")}</h5>
                 <div className="max-h-32 overflow-y-auto space-y-1">
                   {availableTags.map((tag) => (
                     <span
@@ -91,15 +93,15 @@ export default function AddTagPopover({
                 </div>
               </div>
             ) : (
-              <Empty description="没有可用标签，请先创建标签。" />
+              <Empty description={t("tagManagement.noAvailableTags")} />
             )}
 
             {/* Create New Tag */}
             <div className="space-y-2 border-t border-gray-100 pt-3">
-              <h5 className="text-sm">创建新标签</h5>
+              <h5 className="text-sm">{t("tagManagement.createNewTag")}</h5>
               <div className="flex gap-2">
                 <Input
-                  placeholder="输入新标签名称..."
+                  placeholder={t("tagManagement.newTagNamePlaceholder")}
                   value={newTag}
                   onChange={(e) => setNewTag(e.target.value)}
                   className="h-8 text-sm"
@@ -109,13 +111,13 @@ export default function AddTagPopover({
                   disabled={!newTag.trim()}
                   type="primary"
                 >
-                  添加
+                  {t("tagManagement.createTag")}
                 </Button>
               </div>
             </div>
 
             <Button block onClick={() => setShowPopover(false)}>
-              取消
+              {t("tagManagement.cancel")}
             </Button>
           </div>
         }
@@ -126,7 +128,7 @@ export default function AddTagPopover({
           className="cursor-pointer"
           onClick={() => setShowPopover(true)}
         >
-          添加标签
+          {t("tagManagement.addTag")}
         </Tag>
       </Popover>
     </>

frontend/src/components/business/TagManagement.tsx

@@ -3,6 +3,7 @@ import { Drawer, Input, Button, App } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
 import { Edit, Save, TagIcon, X, Trash } from "lucide-react";
 import { TagItem } from "@/pages/DataManagement/dataset.model";
+import { useTranslation } from "react-i18next";
 
 interface CustomTagProps {
   isEditable?: boolean;
@@ -105,6 +106,7 @@ const TagManager: React.FC = ({
 }) => {
   const [showTagManager, setShowTagManager] = useState(false);
   const { message } = App.useApp();
+  const { t } = useTranslation();
   const [tags, setTags] = useState<{ id: number; name: string }[]>([]);
   const [newTag, setNewTag] = useState("");
   const [editingTag, setEditingTag] = useState<string | null>(null);
@@ -117,7 +119,7 @@ const TagManager: React.FC = ({
       const { data } = await onFetch?.();
       setTags(data || []);
     } catch (e) {
-      message.error("获取标签失败");
+      message.error(t("tagManagement.messages.fetchFailed"));
     }
   };
 
@@ -129,9 +131,9 @@ const TagManager: React.FC = ({
       });
       fetchTags();
       setNewTag("");
-      message.success("标签添加成功");
+      message.success(t("tagManagement.messages.addSuccess"));
     } catch (error) {
-      message.error("添加标签失败");
+      message.error(t("tagManagement.messages.addFailed"));
     }
   };
 
@@ -140,19 +142,19 @@ const TagManager: React.FC = ({
     try {
       await onDelete?.(tag.id);
       fetchTags();
-      message.success("标签删除成功");
+      message.success(t("tagManagement.messages.deleteSuccess"));
     } catch (error) {
-      message.error("删除标签失败");
+      message.error(t("tagManagement.messages.deleteFailed"));
     }
   };
 
   const updateTag = async (oldTag: TagItem, newTag: string) => {
     try {
       await onUpdate?.({ ...oldTag, name: newTag });
       fetchTags();
-      message.success("标签更新成功");
+      message.success(t("tagManagement.messages.updateSuccess"));
     } catch (error) {
-      message.error("更新标签失败");
+      message.error(t("tagManagement.messages.updateFailed"));
     }
   };
 
@@ -192,19 +194,19 @@ const TagManager: React.FC = ({
         icon={<TagIcon className="w-4 h-4 mr-2" />}
         onClick={() => setShowTagManager(true)}
       >
-        标签管理
+        {t("tagManagement.manageTags")}
       </Button>
       <Drawer
         open={showTagManager}
         onClose={() => setShowTagManager(false)}
-        title="标签管理"
+        title={t("tagManagement.manageTags")}
         width={500}
       >
         <div className="space-y-4 flex-overflow">
           {/* Add New Tag */}
           <div className="flex gap-2">
             <Input
-              placeholder="输入标签名称..."
+              placeholder={t("tagManagement.tagNamePlaceholder")}
               value={newTag}
               allowClear
               onChange={(e) => setNewTag(e.target.value)}
@@ -220,7 +222,7 @@ const TagManager: React.FC = ({
               disabled={!newTag.trim()}
               icon={<PlusOutlined />}
             >
-              添加
+              {t("tagManagement.createTag")}
             </Button>
           </div>
 

frontend/src/i18n/locales/en/common.json

@@ -206,17 +206,17 @@
       "messages": {
         "loadTemplatesFailed": "Failed to load collection templates",
         "createSuccess": "Task created successfully",
-        "errorWithDetail": "{message}: {detail}",
+        "errorWithDetail": "{{message}}: {{detail}}",
         "jsonObjectRequired": "Must be a JSON object",
         "jsonObjectInvalid": "Please enter a valid JSON object",
         "jsonFormatError": "Invalid JSON format",
-        "jsonFormatErrorWithMessage": "Invalid JSON format: {message}"
+        "jsonFormatErrorWithMessage": "Invalid JSON format: {{message}}"
       },
       "placeholders": {
         "enter": "Please enter",
         "select": "Please select",
-        "enterWithLabel": "Please enter {label}",
-        "selectWithLabel": "Please select {label}"
+        "enterWithLabel": "Please enter {{label}}",
+        "selectWithLabel": "Please select {{label}}"
       }
     },
     "scheduler": {
@@ -356,7 +356,7 @@
       "deleteDatasetTitle": "Confirm delete this dataset?",
       "deleteDatasetDesc": "This dataset cannot be recovered after deletion. Proceed with caution.",
       "deleteFolderTitle": "Confirm delete folder?",
-      "deleteFolderDesc": "Deleting folder \"{name}\" will remove all files and subfolders. This action cannot be undone.",
+      "deleteFolderDesc": "Deleting folder \"{{name}}\" will remove all files and subfolders. This action cannot be undone.",
       "deleteConfirm": "Delete",
       "deleteCancel": "Cancel"
     },
@@ -368,14 +368,14 @@
       "tabQuality": "Data Quality",
       "sectionBasicInfo": "Basic Information",
       "sectionFileList": "File List",
-      "selectedFiles": "Selected {count} files",
+      "selectedFiles": "Selected {{count}} files",
       "goUp": "Go up",
-      "currentPath": "Current path: {path}",
-      "totalItems": "Total {total} items",
-      "previewTitle": "File Preview: {name}",
+      "currentPath": "Current path: {{path}}",
+      "totalItems": "Total {{total}} items",
+      "previewTitle": "File Preview: {{name}}",
       "previewEmpty": "No preview available or unsupported file type.",
       "previewInfoTitle": "File Info",
-      "editTitle": "Edit Dataset - {name}"
+      "editTitle": "Edit Dataset - {{name}}"
     },
     "labels": {
       "id": "ID",
@@ -409,7 +409,7 @@
     },
     "lineage": {
       "title": "Data Lineage",
-      "stats": "{nodes} nodes · {edges} edges",
+      "stats": "{{nodes}} nodes · {{edges}} edges",
       "legendDatasource": "Data Source",
       "legendDataset": "Dataset",
       "legendModel": "Model",
@@ -422,6 +422,7 @@
       "edgeTypeSynthesis": "Data Synthesis",
       "edgeTypeRatio": "Data Ratio",
       "edgeTypeDefault": "Processing Flow",
+      "edgeTypeDefaultLabel": "Processing Flow",
       "detailBasicInfo": "Basic Information",
       "detailId": "ID:",
       "detailName": "Name:",
@@ -436,13 +437,21 @@
       "detailNoDownstream": "No downstream impacts",
       "processDetail": "Process Detail",
       "processId": "Process ID:",
+      "relationships": "Upstream and Downstream",
       "processUpstream": "Upstream:",
       "processDownstream": "Downstream:",
+      "processDescription": "Description",
+      "processEmpty": "No process description",
       "nodeTypeDatasource": "Data Source",
       "nodeTypeDataset": "Dataset",
       "nodeTypeModel": "Model",
       "nodeTypeKnowledge": "Knowledge Base",
-      "filesCount": "{count} files"
+      "filesCount": "{{count}} files · {{size}}",
+      "statusRunning": "Running",
+      "statusStopped": "Stopped",
+      "statusActive": "Active",
+      "statusInactive": "Inactive",
+      "statusDraft": "Draft"
     },
     "quality": {
       "titleDistribution": "Quality Distribution",
@@ -461,8 +470,8 @@
       "metricColumnIntegrity": "Column Integrity",
       "metricDuplicateRate": "Duplicate Rate",
       "recommendationTitle": "Quality Improvement Suggestions",
-      "recommendationReviewLowQuality": "Review or recollect {count} low-quality samples",
-      "recommendationSupplementMetadata": "Check and supplement missing metadata fields (missing: {missing})",
+      "recommendationReviewLowQuality": "Review or recollect {{count}} low-quality samples",
+      "recommendationSupplementMetadata": "Check and supplement missing metadata fields (missing: {{missing}})",
       "recommendationBalanceDistribution": "Consider adding more underrepresented samples to balance distribution",
       "imageClarity": "Image Clarity",
       "colorConsistency": "Color Consistency",
@@ -476,7 +485,21 @@
       "fileIntegrity": "File Integrity",
       "fieldIntegrity": "Field Integrity",
       "columnIntegrity": "Column Integrity",
-      "duplicateRate": "Duplicate Rate"
+      "duplicateRate": "Duplicate Rate",
+      "labelDistribution": {
+        "title": "Label Distribution Details",
+        "category": "Category",
+        "labelName": "Label Name",
+        "count": "Count",
+        "percentage": "Percentage",
+        "noData": "No label distribution data",
+        "noDataSubtitle": "No label distribution data available",
+        "statisticsTitle": "Dataset Label Statistics",
+        "statisticsSummary": "{{categoryCount}} categories, {{totalLabels}} label samples",
+        "detailsCardTitle": "Label Distribution Details",
+        "totalLabels": "Total: {{count}} labels",
+        "moreLabels": "And {{count}} more labels..."
+      }
     },
     "import": {
       "title": "Import Data",
@@ -486,7 +509,7 @@
       "uploadFolderHint": "Drag folder here or click to select folder",
       "fileLabel": "File:",
       "folderLabel": "Folder:",
-      "warningTypeMismatch": "Dataset type is {type}. Some selected files may not match; please confirm.",
+      "warningTypeMismatch": "Dataset type is {{type}}. Some selected files may not match; please confirm.",
       "warningUseFolderUpload": "To upload a folder, use the \"Local Folder Upload\" area on the right.",
       "warningUseFileUpload": "To upload a single file, use the \"Local File Upload\" area on the left.",
       "obsEndpoint": "Endpoint",
@@ -553,7 +576,7 @@
       "collection": "Collection Task Import"
     }
   },
-  "common": {
+    "common": {
     "actions": {
       "createTask": "Create Task"
     },
@@ -570,5 +593,27 @@
         "pending": "Ready"
       }
     }
+  },
+  "tagManagement": {
+    "manageTags": "Manage Tags",
+    "addTag": "Add Tag",
+    "tagName": "Tag Name",
+    "tagNamePlaceholder": "Enter tag name...",
+    "createTag": "Create",
+    "selectExistingTags": "Select existing tags",
+    "createNewTag": "Create new tag",
+    "newTagNamePlaceholder": "Enter new tag name...",
+    "noAvailableTags": "No available tags. Please create a tag first.",
+    "cancel": "Cancel",
+    "messages": {
+      "fetchFailed": "Failed to fetch tags",
+      "addSuccess": "Tag added successfully",
+      "addFailed": "Failed to add tag",
+      "deleteSuccess": "Tag deleted successfully",
+      "deleteFailed": "Failed to delete tag",
+      "updateSuccess": "Tag updated successfully",
+      "updateFailed": "Failed to update tag"
+    },
+    "uncategorized": "Uncategorized"
   }
 }