Syringe featuers & localization

.changeset/orange-hats-sneeze.md

@@ -0,0 +1,16 @@
+---
+'@difizen/babel-preset-mana': patch
+'@difizen/mana-observable': patch
+'@difizen/umi-plugin-mana': patch
+'@difizen/mana-syringe': patch
+'@difizen/mana-common': patch
+'@difizen/mana-react': patch
+'@difizen/mana-react-example': patch
+'@difizen/mana-core': patch
+'@difizen/mana-l10n': patch
+'@difizen/mana-app': patch
+'@difizen/mana-ui': patch
+'@difizen/mana-docs': patch
+---
+
+[syringe] Developing multi-instance data structures becomes easier with auto factory.

README.md

@@ -2,36 +2,46 @@
 
 [![codecov](https://codecov.io/gh/difizen/mana/graph/badge.svg?token=VGJDF8511R)](https://codecov.io/gh/difizen/mana)
 
-模块化可扩展前端框架
+A modular and extensible front-end framework designed for workbench products.
 
-- 如果你打算开发 IDE 型的生产力工具
-- 如果你的项目需要丰富的场景定制能力
-- 如果你正在寻找彻底模块化的前端工程方案
+**English** · [简体中文](./README.zh-CN.md)
 
-请尝试 mana 🌟🌟🌟
+## Features
 
-### 官网
+- Complete module isolation, state management, and dependency inversion solutions, making it a truly suitable framework for large-scale engineering
+- Integration with the react ecosystem, with innovative page view management and state tracking capabilities, perfectly combining frontend projects with a modular structure
+- Built-in modules such as themes, commands, shortcuts, toolbars, configurations, internationalization, etc., to help you quickly start your project
 
-💡 请访问 https://mana.difizen.net/
+## Applicable Scenarios
 
-### 提交issue
+- If you intend to develop IDE-style productivity tool products
+- If you are looking for a thoroughly modular, architecturally advanced frontend engineering solution to solve team collaboration and long-term maintenance issues
+- If your project requires rich scene customization capabilities, allowing downstream producers to do kernel-level customization and develop a module ecosystem
 
-😊 我们建议您使用[github issue](https://github.com/difizen/mana/issues) 提交您的疑问, 我们通常会在2日内回复。
+Please try mana 🌟🌟🌟
 
-### 贡献代码
+### Official Website
 
-🤝 请查阅 [CONTRIBUTING.md](./CONTRIBUTING.md)
+💡 Please visit https://mana.difizen.net/
 
-### 贡献者
+### Submit Issues
 
-💪 感谢所有的贡献者
+😊 We recommend using [github issue](https://github.com/difizen/mana/issues) to submit your questions, and we usually respond within two days.
+
+### Contribute Code
+
+🤝 Please refer to [CONTRIBUTING.md](./CONTRIBUTING.md)
+
+### Contributors
+
+💪 Thanks to all the contributors
 
 <a href="https://github.com/difizen/mana/graphs/contributors">
   <img src="https://contributors-img.web.app/image?repo=difizen/mana" alt="List of Contributors"/>
 </a>
 
-### 联系我们
+### Contact Us
 
-🤗 加入我们的钉钉答疑群与我们联系。
+🤗 Join our DingTalk Q&A group to contact us.
 
 <img src="./apps/docs/public/ding-qrcode.png" width="30%">

README.zh-CN.md

@@ -0,0 +1,47 @@
+# mana
+
+[![codecov](https://codecov.io/gh/difizen/mana/graph/badge.svg?token=VGJDF8511R)](https://codecov.io/gh/difizen/mana)
+
+一个模块化可扩展前端框架，为工作台产品设计。
+
+[English](./README.md) · **简体中文**
+
+## 特性
+
+- 完整的模块隔离、状态管理、依赖倒置方案，是真正适合大型工程的框架
+- 集成 react 生态，创造性的页面视图管理、状态追踪能力，让前端项目与模块化结构完美结合
+- 内置主题、命令、快捷键、工具栏、配置、国际化...等模块，帮助您快速启动项目
+
+## 适用场景
+
+- 如果您打算开发 IDE 型的生产力工具产品
+- 如果您正在寻找彻底模块化、架构先进的前端工程方案，解决团队的协作和长期维护问题
+- 如果您的项目需要丰富的场景定制能力，允许下游生产者做内核级的定制，发展模块生态
+
+请尝试 mana 🌟🌟🌟
+
+### 官网
+
+💡 请访问 https://mana.difizen.net/
+
+### 提交issue
+
+😊 我们建议您使用[github issue](https://github.com/difizen/mana/issues) 提交您的疑问, 我们通常会在2日内回复。
+
+### 贡献代码
+
+🤝 请查阅 [CONTRIBUTING.md](./CONTRIBUTING.md)
+
+### 贡献者
+
+💪 感谢所有的贡献者
+
+<a href="https://github.com/difizen/mana/graphs/contributors">
+  <img src="https://contributors-img.web.app/image?repo=difizen/mana" alt="List of Contributors"/>
+</a>
+
+### 联系我们
+
+🤗 加入我们的钉钉答疑群与我们联系。
+
+<img src="./apps/docs/public/ding-qrcode.png" width="30%">

apps/docs/.dumi/theme/componets/banner/index.tsx

@@ -1,3 +1,4 @@
+import { l10n } from '@difizen/mana-l10n';
 import { Button, message } from 'antd';
 import { Link, useSiteData } from 'dumi';
 import React, { useEffect, useState } from 'react';
@@ -19,12 +20,6 @@ const Banner: React.FC = () => {
     });
   }, []);
 
-  if (!themeConfig.banner) {
-    return null;
-  }
-
-  const bottons = themeConfig.banner.botton || [];
-
   return (
     <div className="difizen-dumi-banner">
       <div className="difizen-dumi-banner-main">
@@ -44,7 +39,7 @@ const Banner: React.FC = () => {
                 mana
               </h1>
               <p className="text-xl sm:text-2xl text-muted-foreground mb-8">
-                一个模块化的可扩展前端应用框架，为工作台产品设计
+                {l10n.t('A modular and extensible front-end framework')}
               </p>
               <Link to={'/introduction'}>
                 <Button type="primary" size="large" className="start-btn">
@@ -54,7 +49,7 @@ const Banner: React.FC = () => {
               <CopyToClipboard
                 text="npm install @difizen/mana-app"
                 onCopy={() => {
-                  message.success('已复制');
+                  message.success(l10n.t('Copied'));
                 }}
               >
                 <Button size="large" className="install-btn">

apps/docs/.dumi/theme/lang/bundle.l10n.en-US.json

@@ -0,0 +1,10 @@
+{
+  "Contact Us": "Contact Us",
+  "Copied": "Copied",
+  "Related": "Related",
+  "Community": "Community",
+  "feedback issues": "feedback issues",
+  "release notes": "release notes",
+  "A modular and extensible front-end framework": "A modular and extensible front-end framework",
+  "Designed for workbench products": "Designed for workbench products"
+}

apps/docs/.dumi/theme/lang/bundle.l10n.zh-CN.json

@@ -0,0 +1,10 @@
+{
+  "Contact Us": "联系我们",
+  "Copied": "已复制",
+  "Related": "相关资源",
+  "Community": "社区",
+  "feedback issues": "反馈问题",
+  "release notes": "发布日志",
+  "A modular and extensible front-end framework": "一个模块化的可扩展前端应用框架",
+  "Designed for workbench products": "为工作台产品设计"
+}

apps/docs/.dumi/theme/lang/index.ts

@@ -0,0 +1,9 @@
+import type { LanguageBundles } from '@difizen/mana-l10n';
+
+import langENUS from './bundle.l10n.en-US';
+import langZHCN from './bundle.l10n.zh-CN';
+
+export const langBundles: LanguageBundles = {
+  'zh-CN': langZHCN,
+  'en-US': langENUS,
+};

apps/docs/.dumi/theme/layouts/DocLayout.tsx

@@ -29,7 +29,7 @@ const DocLayout = () => {
 
   return (
     <ManaComponents.Application modules={[DumiPreset]} renderChildren>
-      {pathname === '/' ? (
+      {pathname === '/' || pathname === '/zh-CN' || pathname === '/zh-CN/' ? (
         <HomeLayout />
       ) : (
         <div className="difizen-dumi-layout">

apps/docs/.dumi/theme/modules/module.ts

@@ -1,5 +1,14 @@
 import { ManaAppPreset, ManaModule } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+import { langBundles } from '../lang/index.js';
 
 import { Github } from './github.js';
 
-export const DumiPreset = ManaModule.create().register(Github).dependOn(ManaAppPreset);
+export const DumiPreset = ManaModule.create()
+  .preload(() => {
+    l10n.loadLangBundles(langBundles);
+    return Promise.resolve();
+  })
+  .register(Github)
+  .dependOn(ManaAppPreset);

apps/docs/.dumi/theme/slots/Footer/index.tsx

@@ -1,3 +1,4 @@
+import { l10n } from '@difizen/mana-l10n';
 import { useSiteData, Link } from 'dumi';
 import React from 'react';
 import './index.less';
@@ -27,11 +28,11 @@ const Footer: React.FC = () => {
         </div>
         {(themeConfig['links'] || []).map((datum: DatumType) => (
           <div className="difizen-dumi-footer-text-group" key={datum.title}>
-            <div className="difizen-dumi-footer-title">{datum.title}</div>
+            <div className="difizen-dumi-footer-title">{l10n.t(datum.title)}</div>
             {datum.itemList.map((item) => (
               <div className="difizen-dumi-footer-item" key={item.name}>
                 <a href={item.link} target="_blank" rel="noreferrer">
-                  {item.name}
+                  {l10n.t(item.name)}
                 </a>
               </div>
             ))}
@@ -40,7 +41,7 @@ const Footer: React.FC = () => {
 
         <div className="difizen-dumi-footer-text-group"></div>
         <div className="difizen-dumi-footer-text-group">
-          <div className="difizen-dumi-footer-title">联系我们</div>
+          <div className="difizen-dumi-footer-title">{l10n.t('Contact Us')}</div>
           {qrcodes.map((item: { name: string; qrcode: string }) => (
             <div className="difizen-dumi-footer-image-group" key={item.name}>
               <img className="difizen-dumi-footer-img" src={item.qrcode} />

apps/docs/.dumi/theme/slots/Header/index.tsx

@@ -1,8 +1,9 @@
 import { GithubOutlined, MoonOutlined, SunOutlined } from '@ant-design/icons';
 import { CloseOutlined, MenuOutlined } from '@ant-design/icons';
 import { ThemeService, useInject } from '@difizen/mana-app';
+import { l10n, L10nLang } from '@difizen/mana-l10n';
 import { Button } from 'antd';
-import { useRouteMeta, Link, usePrefersColor, useSiteData } from 'dumi';
+import { useRouteMeta, Link, usePrefersColor, useSiteData, history } from 'dumi';
 import type { SocialTypes } from 'dumi/dist/client/theme-api/types.js';
 import HeaderExtra from 'dumi/theme/slots/HeaderExtra';
 import Navbar from 'dumi/theme/slots/Navbar';
@@ -30,6 +31,23 @@ const Header: React.FC = () => {
   } = themeConfig;
   const [, prefersColor = defaultColor, setPrefersColor] = usePrefersColor();
 
+  useEffect(() => {
+    const currentLang = l10n.getLang();
+    const urlPath = window.location.pathname;
+    const urlLang = urlPath.startsWith(`/${L10nLang.zhCN}`)
+      ? L10nLang.zhCN
+      : L10nLang.enUS;
+    if (currentLang !== urlLang) {
+      const newUrl =
+        currentLang === L10nLang.enUS
+          ? urlPath.replace(`/${urlLang}`, '')
+          : `/${currentLang}${urlPath}`;
+      history.push({
+        pathname: newUrl ? newUrl : '/',
+      });
+    }
+  }, []);
+
   useEffect(() => {
     if (prefersColor !== currentTheme.type) {
       setPrefersColor(currentTheme.type);
@@ -80,6 +98,30 @@ const Header: React.FC = () => {
           <Navbar />
           <div className="dumi-default-header-right-aside">
             <SearchBar />
+            <Button
+              type="text"
+              onClick={() => {
+                const urlPath = window.location.pathname;
+                const currentLang = l10n.getLang();
+                let baseUrlPath = urlPath.startsWith(`/${currentLang}`)
+                  ? urlPath.replace(`/${currentLang}`, '')
+                  : urlPath;
+                baseUrlPath = baseUrlPath ? baseUrlPath : '/';
+                const targetLang =
+                  currentLang === L10nLang.zhCN ? L10nLang.enUS : L10nLang.zhCN;
+
+                l10n.changeLang(targetLang);
+
+                history.push({
+                  pathname:
+                    targetLang === L10nLang.enUS
+                      ? baseUrlPath
+                      : `/${targetLang}${baseUrlPath}`,
+                });
+              }}
+            >
+              {l10n.getLang() === L10nLang.zhCN ? 'EN' : '中文'}
+            </Button>
             {themeConfig.prefersColor.switch && (
               <Button
                 type="text"