From 1f655125118f97cde8467f625263270129c64036 Mon Sep 17 00:00:00 2001 From: zjy <3161362058@qq.com> Date: Tue, 12 Nov 2024 17:32:23 +0800 Subject: [PATCH] feat:support template i18n --- .../providers/applaunchpad/src/pages/_app.tsx | 5 ++-- .../providers/template/src/api/platform.ts | 6 ++-- .../providers/template/src/pages/_app.tsx | 2 +- .../template/src/pages/api/listTemplate.ts | 19 ++++++++++-- .../src/pages/deploy/components/Header.tsx | 30 +++++++++++++++---- .../providers/template/src/pages/index.tsx | 22 ++++++++++---- .../providers/template/src/store/config.ts | 6 ++-- frontend/providers/template/src/types/app.ts | 2 ++ 8 files changed, 70 insertions(+), 22 deletions(-) diff --git a/frontend/providers/applaunchpad/src/pages/_app.tsx b/frontend/providers/applaunchpad/src/pages/_app.tsx index d8a4479dfa8..d1ef6c7b0be 100644 --- a/frontend/providers/applaunchpad/src/pages/_app.tsx +++ b/frontend/providers/applaunchpad/src/pages/_app.tsx @@ -20,6 +20,7 @@ import '@/styles/reset.scss'; import 'nprogress/nprogress.css'; import '@sealos/driver/src/driver.css'; import { AppEditSyncedFields } from '@/types/app'; +import Script from 'next/script'; //Binding events. Router.events.on('routeChangeStart', () => NProgress.start()); @@ -184,7 +185,7 @@ const App = ({ Component, pageProps }: AppProps) => { - + */} diff --git a/frontend/providers/template/src/api/platform.ts b/frontend/providers/template/src/api/platform.ts index 68ca7ff8e26..45c319cc69a 100644 --- a/frontend/providers/template/src/api/platform.ts +++ b/frontend/providers/template/src/api/platform.ts @@ -7,8 +7,10 @@ import useSessionStore from '@/store/session'; export const updateRepo = () => GET('/api/updateRepo'); -export const getTemplates = () => - GET<{ templates: TemplateType[]; menuKeys: string }>('/api/listTemplate'); +export const getTemplates = (language?: string) => + GET<{ templates: TemplateType[]; menuKeys: string }>('/api/listTemplate', { + language + }); export const getPlatformEnv = () => GET('/api/platform/getEnv'); diff --git a/frontend/providers/template/src/pages/_app.tsx b/frontend/providers/template/src/pages/_app.tsx index 0290b83e6f2..0434014537e 100644 --- a/frontend/providers/template/src/pages/_app.tsx +++ b/frontend/providers/template/src/pages/_app.tsx @@ -47,7 +47,7 @@ const App = ({ Component, pageProps }: AppProps) => { const { loadUserSourcePrice } = useUserStore(); useEffect(() => { - initSystemConfig(); + initSystemConfig(i18n.language); loadUserSourcePrice(); }, []); diff --git a/frontend/providers/template/src/pages/api/listTemplate.ts b/frontend/providers/template/src/pages/api/listTemplate.ts index 1dc294d4a7f..95fb6695336 100644 --- a/frontend/providers/template/src/pages/api/listTemplate.ts +++ b/frontend/providers/template/src/pages/api/listTemplate.ts @@ -21,7 +21,8 @@ export function replaceRawWithCDN(url: string, cdnUrl: string) { export const readTemplates = ( jsonPath: string, cdnUrl?: string, - blacklistedCategories?: string[] + blacklistedCategories?: string[], + language?: string ): TemplateType[] => { const jsonData = fs.readFileSync(jsonPath, 'utf8'); const _templates: TemplateType[] = JSON.parse(jsonData); @@ -41,12 +42,24 @@ export const readTemplates = ( item.spec.icon = replaceRawWithCDN(item.spec.icon, cdnUrl); } return item; + }) + .filter((item) => { + if (!language) return true; + + if (!item.spec.locale) return true; + console.log(item.spec.locale === language || (item.spec.i18n && item.spec.i18n[language])); + if (item.spec.locale === language || (item.spec.i18n && item.spec.i18n[language])) + return true; + + return false; }); return templates; }; export default async function handler(req: NextApiRequest, res: NextApiResponse) { + const language = req.query.language as string; + const originalPath = process.cwd(); const jsonPath = path.resolve(originalPath, 'templates.json'); const cdnUrl = process.env.CDN_URL; @@ -76,7 +89,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< await fetch(`${baseurl}/api/updateRepo`); } - const templates = readTemplates(jsonPath, cdnUrl, blacklistedCategories); + const templates = readTemplates(jsonPath, cdnUrl, blacklistedCategories, language); + console.log(language, templates.length); + const categories = templates.map((item) => (item.spec?.categories ? item.spec.categories : [])); const topKeys = findTopKeyWords(categories, menuCount); diff --git a/frontend/providers/template/src/pages/deploy/components/Header.tsx b/frontend/providers/template/src/pages/deploy/components/Header.tsx index 196c2ac5e7f..51972fc7dc4 100644 --- a/frontend/providers/template/src/pages/deploy/components/Header.tsx +++ b/frontend/providers/template/src/pages/deploy/components/Header.tsx @@ -43,7 +43,7 @@ const Header = ({ templateDetail: TemplateType; cloudDomain: string; }) => { - const { t } = useTranslation(); + const { t, i18n } = useTranslation(); const { copyData } = useCopyData(); const handleExportYaml = useCallback(async () => { const exportYamlString = yamlList?.map((i) => i.value).join('---\n'); @@ -127,7 +127,7 @@ const Header = ({ - {templateDetail?.spec?.title} + {templateDetail?.spec?.i18n?.[i18n.language]?.title ?? templateDetail?.spec?.title} {DeployCountComponent} goGithub(e, templateDetail?.spec?.gitRepo)} + onClick={(e) => + goGithub( + e, + templateDetail?.spec?.i18n?.[i18n.language]?.gitRepo ?? + templateDetail?.spec?.gitRepo + ) + } > @@ -224,7 +230,13 @@ const Header = ({ - + copyData(templateDetail?.spec?.description)} + onClick={() => + copyData( + templateDetail?.spec?.i18n?.[i18n.language]?.description ?? + templateDetail?.spec?.description + ) + } > - {templateDetail?.spec?.description} + {templateDetail?.spec?.i18n?.[i18n.language]?.description ?? + templateDetail?.spec?.description} diff --git a/frontend/providers/template/src/pages/index.tsx b/frontend/providers/template/src/pages/index.tsx index ee8dab5af52..161be39795c 100644 --- a/frontend/providers/template/src/pages/index.tsx +++ b/frontend/providers/template/src/pages/index.tsx @@ -38,7 +38,7 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) { const { setInsideCloud } = useCachedStore(); const { envs } = useSystemConfigStore(); - const { data } = useQuery(['listTemplate'], getTemplates, { + const { data } = useQuery(['listTemplate', i18n.language], () => getTemplates(i18n.language), { refetchInterval: 5 * 60 * 1000, staleTime: 5 * 60 * 1000, retry: 3 @@ -52,7 +52,9 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) { }); const searchResults = typeFilteredResults?.filter((item: TemplateType) => { - return item?.metadata?.name?.toLowerCase().includes(searchValue.toLowerCase()); + const nameMatches = item?.metadata?.name?.toLowerCase().includes(searchValue.toLowerCase()); + const titleMatches = item?.spec?.title?.toLowerCase().includes(searchValue.toLowerCase()); + return nameMatches || titleMatches; }); return searchResults; @@ -170,11 +172,11 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) { - {item?.spec?.title} + {item.spec.i18n?.[i18n.language]?.title ?? item.spec.title} {envs?.SHOW_AUTHOR === 'true' && ( - By {item?.spec?.author} + By {item.spec.i18n?.[i18n.language]?.author ?? item.spec.author} )} @@ -209,7 +211,7 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) { color={'5A646E'} fontWeight={400} > - {item?.spec?.description} + {item.spec.i18n?.[i18n.language]?.description ?? item.spec.description} ))} -
goGithub(e, item?.spec?.gitRepo)}> +
+ goGithub( + e, + item.spec?.i18n?.[i18n.language]?.gitRepo ?? item?.spec?.gitRepo + ) + } + >
diff --git a/frontend/providers/template/src/store/config.ts b/frontend/providers/template/src/store/config.ts index 6e4e26fcf0b..b9915692def 100644 --- a/frontend/providers/template/src/store/config.ts +++ b/frontend/providers/template/src/store/config.ts @@ -10,7 +10,7 @@ type State = { systemConfig: SystemConfigType | undefined; menuKeys: string; sideBarMenu: SideBarMenuType[]; - initSystemConfig: () => Promise; + initSystemConfig: (language?: string) => Promise; initSystemEnvs: () => Promise; setSideBarMenu: (data: SideBarMenuType[]) => void; }; @@ -27,9 +27,9 @@ export const useSystemConfigStore = create()( value: 'SideBar.Applications' } ], - async initSystemConfig() { + async initSystemConfig(language?: string) { const data = await getSystemConfig(); - const { menuKeys } = await getTemplates(); + const { menuKeys } = await getTemplates(language); if (get().menuKeys !== menuKeys) { const menus = menuKeys.split(',').map((i) => ({ diff --git a/frontend/providers/template/src/types/app.ts b/frontend/providers/template/src/types/app.ts index 0df552e2887..85ab1c4288e 100644 --- a/frontend/providers/template/src/types/app.ts +++ b/frontend/providers/template/src/types/app.ts @@ -37,6 +37,8 @@ export type TemplateType = { required: boolean; } >; + locale?: string; + i18n?: Record; }; };