first-update

easy-dataset-main/app/projects/[projectId]/settings/components/PromptList.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, Tabs, Tab, Typography, Chip } from '@mui/material';
+import { shouldShowPrompt } from './promptUtils';
+
+/**
+ * 左侧提示词列表组件
+ */
+const PromptList = ({
+  currentCategory,
+  currentCategoryConfig,
+  selectedPrompt,
+  currentLanguage,
+  isCustomized,
+  onPromptSelect
+}) => {
+  const { t } = useTranslation();
+
+  if (!currentCategoryConfig?.prompts) {
+    return (
+      <Typography variant="body2" color="text.secondary" align="center">
+        {t('settings.prompts.noPromptsAvailable')}
+      </Typography>
+    );
+  }
+
+  return (
+    <Tabs
+      orientation="vertical"
+      value={selectedPrompt || ''}
+      onChange={(e, newValue) => onPromptSelect(newValue)}
+      variant="scrollable"
+      scrollButtons="auto"
+      sx={{
+        borderRight: 1,
+        borderColor: 'divider',
+        '& .MuiTabs-indicator': {
+          left: 0,
+          right: 'auto'
+        },
+        '& .MuiTab-root': {
+          alignItems: 'flex-start',
+          textAlign: 'left'
+        }
+      }}
+    >
+      {currentCategoryConfig &&
+        Object.entries(currentCategoryConfig.prompts).map(([promptKey, promptConfig]) => {
+          if (!shouldShowPrompt(promptKey, currentLanguage)) return null;
+
+          const customized = isCustomized(promptKey);
+
+          return (
+            <Tab
+              key={promptKey}
+              value={promptKey}
+              label={
+                <Box sx={{ textAlign: 'left', width: '100%' }}>
+                  <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                    {promptConfig.name}
+                  </Typography>
+                  {customized && (
+                    <Chip label={t('settings.prompts.customized')} color="primary" size="small" sx={{ mt: 0.5 }} />
+                  )}
+                </Box>
+              }
+              sx={{
+                alignItems: 'flex-start',
+                minHeight: 60,
+                px: 2,
+                justifyContent: 'flex-start',
+                width: '100%'
+              }}
+            />
+          );
+        })}
+    </Tabs>
+  );
+};
+
+export default PromptList;