mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-07-15 08:56:07 +00:00
Add i18n support with language selector on login page (#1410)
* feat: add i18n support with language selector on login page Co-Authored-By: Junyan Qin <Chin> <rockchinq@gmail.com> * feat: complete i18n implementation for all webui components Co-Authored-By: Junyan Qin <Chin> <rockchinq@gmail.com> * feat: complete all hardcoded text * feat: dynamic label i18n * fix: lint errors * fix: lint errors * delete sh fils * fix: edit model dialog title --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Junyan Qin <Chin> <rockchinq@gmail.com>
This commit is contained in:
devin-ai-integration[bot]
committed by
GitHub
GitHub
parent
91cd8cf380
commit
2bf94539bd
@@ -1,7 +1,9 @@
|
||||
import styles from './pipelineCard.module.css';
|
||||
import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className={`${styles.cardContainer}`}>
|
||||
<div className={`${styles.basicInfoContainer}`}>
|
||||
@@ -24,7 +26,8 @@ export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
|
||||
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path>
|
||||
</svg>
|
||||
<div className={`${styles.basicInfoUpdateTimeText}`}>
|
||||
更新于{cardVO.lastUpdatedTimeAgo}
|
||||
{t('pipelines.updateTime')}
|
||||
{cardVO.lastUpdatedTimeAgo}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,7 +43,9 @@ export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
|
||||
>
|
||||
<path d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"></path>
|
||||
</svg>
|
||||
<div className={styles.operationDefaultBadgeText}>默认</div>
|
||||
<div className={styles.operationDefaultBadgeText}>
|
||||
{t('pipelines.defaultBadge')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -30,6 +30,8 @@ import {
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { i18nObj } from '@/i18n/I18nProvider';
|
||||
|
||||
export default function PipelineFormComponent({
|
||||
initValues,
|
||||
@@ -48,11 +50,14 @@ export default function PipelineFormComponent({
|
||||
onFinish: () => void;
|
||||
onNewPipelineCreated: (pipelineId: string) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const formSchema = isEditMode
|
||||
? z.object({
|
||||
basic: z.object({
|
||||
name: z.string().min(1, { message: '名称不能为空' }),
|
||||
description: z.string().min(1, { message: '描述不能为空' }),
|
||||
name: z.string().min(1, { message: t('pipelines.nameRequired') }),
|
||||
description: z
|
||||
.string()
|
||||
.min(1, { message: t('pipelines.descriptionRequired') }),
|
||||
}),
|
||||
ai: z.record(z.string(), z.any()),
|
||||
trigger: z.record(z.string(), z.any()),
|
||||
@@ -61,8 +66,10 @@ export default function PipelineFormComponent({
|
||||
})
|
||||
: z.object({
|
||||
basic: z.object({
|
||||
name: z.string().min(1, { message: '名称不能为空' }),
|
||||
description: z.string().min(1, { message: '描述不能为空' }),
|
||||
name: z.string().min(1, { message: t('pipelines.nameRequired') }),
|
||||
description: z
|
||||
.string()
|
||||
.min(1, { message: t('pipelines.descriptionRequired') }),
|
||||
}),
|
||||
ai: z.record(z.string(), z.any()).optional(),
|
||||
trigger: z.record(z.string(), z.any()).optional(),
|
||||
@@ -74,13 +81,13 @@ export default function PipelineFormComponent({
|
||||
// 这里不好，可以改成enum等
|
||||
const formLabelList: FormLabel[] = isEditMode
|
||||
? [
|
||||
{ label: '基础信息', name: 'basic' },
|
||||
{ label: 'AI 能力', name: 'ai' },
|
||||
{ label: '触发条件', name: 'trigger' },
|
||||
{ label: '安全控制', name: 'safety' },
|
||||
{ label: '输出处理', name: 'output' },
|
||||
{ label: t('pipelines.basicInfo'), name: 'basic' },
|
||||
{ label: t('pipelines.aiCapabilities'), name: 'ai' },
|
||||
{ label: t('pipelines.triggerConditions'), name: 'trigger' },
|
||||
{ label: t('pipelines.safetyControls'), name: 'safety' },
|
||||
{ label: t('pipelines.outputProcessing'), name: 'output' },
|
||||
]
|
||||
: [{ label: '基础信息', name: 'basic' }];
|
||||
: [{ label: t('pipelines.basicInfo'), name: 'basic' }];
|
||||
|
||||
const [aiConfigTabSchema, setAIConfigTabSchema] =
|
||||
useState<PipelineConfigTab>();
|
||||
@@ -156,10 +163,10 @@ export default function PipelineFormComponent({
|
||||
.then((resp) => {
|
||||
onFinish();
|
||||
onNewPipelineCreated(resp.uuid);
|
||||
toast.success('创建成功 请编辑流水线详细参数');
|
||||
toast.success(t('pipelines.createSuccess'));
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error('创建失败：' + err.message);
|
||||
toast.error(t('pipelines.createError') + err.message);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -186,10 +193,10 @@ export default function PipelineFormComponent({
|
||||
.updatePipeline(pipelineId || '', pipeline)
|
||||
.then(() => {
|
||||
onFinish();
|
||||
toast.success('保存成功');
|
||||
toast.success(t('pipelines.saveSuccess'));
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error('保存失败：' + err.message);
|
||||
toast.error(t('pipelines.saveError') + err.message);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -206,10 +213,10 @@ export default function PipelineFormComponent({
|
||||
if (stage.name === 'runner') {
|
||||
return (
|
||||
<div key={stage.name} className="space-y-4 mb-6">
|
||||
<div className="text-lg font-medium">{stage.label.zh_CN}</div>
|
||||
<div className="text-lg font-medium">{i18nObj(stage.label)}</div>
|
||||
{stage.description && (
|
||||
<div className="text-sm text-gray-500">
|
||||
{stage.description.zh_CN}
|
||||
{i18nObj(stage.description)}
|
||||
</div>
|
||||
)}
|
||||
<DynamicFormComponent
|
||||
@@ -241,9 +248,11 @@ export default function PipelineFormComponent({
|
||||
|
||||
return (
|
||||
<div key={stage.name} className="space-y-4 mb-6">
|
||||
<div className="text-lg font-medium">{stage.label.zh_CN}</div>
|
||||
<div className="text-lg font-medium">{i18nObj(stage.label)}</div>
|
||||
{stage.description && (
|
||||
<div className="text-sm text-gray-500">{stage.description.zh_CN}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{i18nObj(stage.description)}
|
||||
</div>
|
||||
)}
|
||||
<DynamicFormComponent
|
||||
itemConfigList={stage.config}
|
||||
@@ -270,10 +279,10 @@ export default function PipelineFormComponent({
|
||||
.deletePipeline(pipelineId || '')
|
||||
.then(() => {
|
||||
onFinish();
|
||||
toast.success('删除成功');
|
||||
toast.success(t('common.deleteSuccess'));
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error('删除失败：' + err.message);
|
||||
toast.error(t('common.deleteError') + err.message);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -285,17 +294,17 @@ export default function PipelineFormComponent({
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>删除确认</DialogTitle>
|
||||
<DialogTitle>{t('common.confirmDelete')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogDescription>
|
||||
你确定要删除这个流水线吗？已绑定此流水线的机器人将无法使用。
|
||||
{t('pipelines.deleteConfirmation')}
|
||||
</DialogDescription>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowDeleteConfirmModal(false)}
|
||||
>
|
||||
取消
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
@@ -304,7 +313,7 @@ export default function PipelineFormComponent({
|
||||
setShowDeleteConfirmModal(false);
|
||||
}}
|
||||
>
|
||||
确认删除
|
||||
{t('common.confirmDelete')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
@@ -337,7 +346,8 @@ export default function PipelineFormComponent({
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
名称<span className="text-red-500">*</span>
|
||||
{t('common.name')}
|
||||
<span className="text-red-500">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
@@ -353,7 +363,8 @@ export default function PipelineFormComponent({
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
描述<span className="text-red-500">*</span>
|
||||
{t('common.description')}
|
||||
<span className="text-red-500">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
@@ -408,7 +419,7 @@ export default function PipelineFormComponent({
|
||||
<div className="flex justify-end items-center gap-2">
|
||||
{isEditMode && isDefaultPipeline && (
|
||||
<span className="text-gray-500 text-[0.7rem]">
|
||||
默认流水线不可删除
|
||||
{t('pipelines.defaultPipelineCannotDelete')}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -421,12 +432,12 @@ export default function PipelineFormComponent({
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
删除
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="cursor-pointer">
|
||||
{isEditMode ? '保存' : '提交'}
|
||||
{isEditMode ? t('common.save') : t('common.submit')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
@@ -434,7 +445,7 @@ export default function PipelineFormComponent({
|
||||
onClick={onFinish}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
取消
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user