@difizen/libro-lab 0.2.35 → 0.2.36

package/src/kernel-and-terminal-panel/collapse/index.tsx

@@ -1,12 +1,12 @@
 import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons';
 import { ViewContext } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { Empty, message, Popconfirm } from 'antd';
 import React, { useState } from 'react';
 
 import type { SaveableTabView } from '../../index.js';
 
 import { LibroCollapseContent } from './collapse-content.js';
-
 import './index.less';
 import { LibroKernelCollapseContent } from './kernel-collapse-content.js';
 import { OpenedTabs } from './page-collapse-content.js';
@@ -45,7 +45,7 @@ const getCollapseContentView = (
     return (
       <Empty
         image={Empty.PRESENTED_IMAGE_SIMPLE}
-        description="暂无内容"
+        description={l10n.t('暂无内容')}
         className="kernel-and-terminal-panel-empty"
       />
     );
@@ -66,6 +66,7 @@ const getCollapseContentView = (
           items={items as LibroPanelCollapseKernelItem[]}
         />
       );
+
     case LibroPanelCollapseItemType.TERMINAL:
     case LibroPanelCollapseItemType.LSP:
       return <LibroCollapseContent type={type} items={items!} />;
@@ -75,13 +76,13 @@ const getCollapseContentView = (
 const getCollapseHeaderLabel = (type: LibroPanelCollapseItemType) => {
   switch (type) {
     case LibroPanelCollapseItemType.PAGE:
-      return '已开启的标签页';
+      return l10n.t('已开启的标签页');
     case LibroPanelCollapseItemType.KERNEL:
-      return '运行的内核';
+      return l10n.t('运行的内核');
     case LibroPanelCollapseItemType.TERMINAL:
-      return '运行的终端';
+      return l10n.t('运行的终端');
     case LibroPanelCollapseItemType.LSP:
-      return '语言服务';
+      return l10n.t('语言服务');
   }
 };
 
@@ -105,9 +106,9 @@ export const LibroCollapse: React.FC<Props> = (props: Props) => {
         </div>
         <div className="libro-panel-collapse-header-closeAll">
           <Popconfirm
-            title="你确定要关闭全部吗？"
-            okText="确定"
-            cancelText="取消"
+            title={l10n.t('你确定要关闭全部吗？')}
+            okText={l10n.t('确定')}
+            cancelText={l10n.t('取消')}
             onConfirm={() => {
               if (props.shutdownAll) {
                 props.shutdownAll().catch((e) => {
@@ -117,7 +118,7 @@ export const LibroCollapse: React.FC<Props> = (props: Props) => {
               }
             }}
           >
-            关闭全部
+            {l10n.t('关闭全部')}
           </Popconfirm>
         </div>
       </div>

package/src/kernel-and-terminal-panel/kernel-and-terminal-panel-view.tsx

@@ -12,6 +12,7 @@ import {
   ViewInstance,
   ViewManager,
 } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { ConfigProvider, theme } from 'antd';
 import { useEffect, useState } from 'react';
 
@@ -161,6 +162,7 @@ const PanelRender: React.FC = () => {
             }
           }}
         />
+
         <LibroCollapse
           type={LibroPanelCollapseItemType.KERNEL}
           items={kernelItems}
@@ -169,11 +171,13 @@ const PanelRender: React.FC = () => {
             await libroSessionManager.refreshRunning();
           }}
         />
+
         <LibroCollapse
           type={LibroPanelCollapseItemType.TERMINAL}
           items={terminalItems}
           shutdownAll={async () => await terminalManager.shutdownAll()}
         />
+
         <LibroCollapse
           type={LibroPanelCollapseItemType.LSP}
           items={lspItems}
@@ -211,7 +215,7 @@ export class KernelAndTerminalPanelView extends BaseView {
   ) {
     super();
     this.title.icon = <KernelAndTerminal />;
-    this.title.label = '运行的终端和内核';
+    this.title.label = () => <div>{l10n.t('运行的终端和内核')}</div>;
 
     this.libroKernelManager = libroKernelManager;
     this.libroSessionManager = libroSessionManager;

package/src/kernel-and-terminal-panel/panel-command.tsx

@@ -7,13 +7,14 @@ import {
   singleton,
   ToolbarContribution,
 } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 
 import { KernelAndTerminalPanelView } from './kernel-and-terminal-panel-view.js';
 
 export const PanelCommand = {
   REFRESH: {
     id: 'panel.command.refresh',
-    label: '刷新',
+    label: l10n.t('刷新'),
   },
 };
 
@@ -50,7 +51,7 @@ export class PanelCommandContribution
       id: PanelCommand.REFRESH.id,
       command: PanelCommand.REFRESH.id,
       icon: <ReloadOutlined />,
-      tooltip: '刷新',
+      tooltip: l10n.t('刷新'),
     });
   }
 }

package/src/kernel-manager/index.tsx

@@ -1,12 +1,13 @@
 import { CodeFilled } from '@ant-design/icons';
 import { singleton, view } from '@difizen/mana-app';
 import { BaseView } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { forwardRef } from 'react';
 
 // import './index.less';
 
 export const KernelManagerComponent = forwardRef(function KernelManagerComponent() {
-  return <span>暂无文件</span>;
+  return <span>{l10n.t('暂无文件')}</span>;
 });
 
 @singleton()
@@ -17,6 +18,6 @@ export class KernelManagerView extends BaseView {
   constructor() {
     super();
     this.title.icon = <CodeFilled />;
-    this.title.label = 'Kernel 管理';
+    this.title.label = () => <div>{l10n.t('Kernel 管理')}</div>;
   }
 }

package/src/lang-switcher/index.tsx

@@ -0,0 +1,36 @@
+import { singleton, useInject, view } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { l10n, L10nLang } from '@difizen/mana-l10n';
+import { Select } from 'antd';
+import { forwardRef } from 'react';
+
+import { LayoutService } from '../layout/layout-service.js';
+
+const langList = [
+  { value: L10nLang.zhCN, label: l10n.t('中文') },
+  { value: L10nLang.enUS, label: 'En' },
+];
+
+export const LangSwitcherComponent = forwardRef(function GithubLinkComponent() {
+  const layoutService = useInject(LayoutService);
+
+  const handleChange = (value: string) => {
+    l10n.changeLang(value as L10nLang);
+    layoutService.refresh();
+  };
+
+  return (
+    <Select
+      defaultValue={l10n.getLang()}
+      style={{ width: 120 }}
+      options={langList}
+      onChange={handleChange}
+    />
+  );
+});
+
+@singleton()
+@view('lang-switcher')
+export class LangSwitcherView extends BaseView {
+  override view = LangSwitcherComponent;
+}

package/src/layout/footer/current-file-footer-view.tsx

@@ -6,6 +6,7 @@ import {
   view,
   ViewInstance,
 } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import * as React from 'react';
 
 import { LayoutService } from '../layout-service.js';
@@ -20,7 +21,7 @@ const CurrentFileFooterComponent = React.forwardRef(function CurrentFileFooterCo
 
   return (
     <div className="libro-lab-current-file-footer" ref={ref}>
-      <span>{`当前文件：${
+      <span>{`${l10n.t('当前文件：')}${
         currentFileFooterView.navigatableView?.title.label || ''
       }`}</span>
     </div>

package/src/layout/footer/status-footer-view.tsx

@@ -1,31 +1,31 @@
 import { BaseView, inject, singleton, useInject, view } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import * as React from 'react';
-import { Loadding, SuccIcon } from '../../common/icon.js';
 
+import { Loadding, SuccIcon } from '../../common/icon.js';
 import { LayoutService } from '../layout-service.js';
 import { LibroLabLayoutSlots } from '../protocol.js';
 import type { StatusItem, StatusType } from '../protocol.js';
 import './index.less';
 
-const Status: Record<StatusType, StatusItem> = {
-  loading: {
-    label: '启动中',
-    icon: <Loadding />,
-  },
-  success: {
-    label: '启动成功',
-    icon: <SuccIcon />,
-  },
-};
-
 const StatusFooterComponent = React.forwardRef(function CurrentFileFooterComponent(
   _props,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const layoutService = useInject(LayoutService);
+  const Status: Record<StatusType, StatusItem> = {
+    loading: {
+      label: l10n.t('启动中'),
+      icon: <Loadding />,
+    },
+    success: {
+      label: l10n.t('启动成功'),
+      icon: <SuccIcon />,
+    },
+  };
   return (
     <div className="libro-lab-status-footer" ref={ref}>
-      <span>服务状态：</span>
+      <span>{l10n.t('服务状态：')}</span>
       {Status[layoutService.serverSatus].icon}
       {Status[layoutService.serverSatus].label}
     </div>

package/src/layout/layout-service.ts

@@ -35,6 +35,9 @@ export class LayoutService {
   @prop()
   serverSatus: StatusType = 'loading';
 
+  @prop()
+  refreshKey: string;
+
   @prop()
   visibilityMap: VisibilityMap = {
     [LibroLabLayoutSlots.header]: true,
@@ -47,6 +50,10 @@ export class LayoutService {
     [LibroLabLayoutSlots.alert]: true,
   };
 
+  refresh() {
+    this.refreshKey = new Date().getTime().toString();
+  }
+
   isAreaVisible(slot: LibroLabLayoutSlotsType): boolean {
     return this.visibilityMap[slot];
   }

package/src/layout/layout.tsx

@@ -1,5 +1,6 @@
 import { inject, singleton, Slot, useInject, view } from '@difizen/mana-app';
 import { BaseView } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { BoxPanel } from '@difizen/mana-react';
 import { Alert } from 'antd';
 import { forwardRef } from 'react';
@@ -15,7 +16,7 @@ export const LibroLabLayoutComponent = forwardRef(function LibroLabLayoutCompone
   const layoutService = useInject(LayoutService);
 
   return (
-    <div className="libro-lab-layout">
+    <div className="libro-lab-layout" key={layoutService.refreshKey}>
       <BoxPanel direction="top-to-bottom">
         {layoutService.isAreaVisible(LibroLabLayoutSlots.header) && (
           <BoxPanel.Pane className="libro-lab-layout-header">
@@ -24,7 +25,7 @@ export const LibroLabLayoutComponent = forwardRef(function LibroLabLayoutCompone
         )}
         {layoutService.isAreaVisible(LibroLabLayoutSlots.alert) && (
           <Alert
-            message="服务启动中，请稍后，待服务启动完成后即可编辑文件。"
+            message={l10n.t('服务启动中，请稍后，待服务启动完成后即可编辑文件。')}
             type="info"
             banner
             closable

package/src/module.tsx

@@ -1,4 +1,5 @@
 import { FileView, LibroJupyterModule } from '@difizen/libro-jupyter';
+import { langBundles } from '@difizen/libro-l10n';
 import { LibroPromptCellModule } from '@difizen/libro-prompt-cell';
 import { LibroSqlCellModule } from '@difizen/libro-sql-cell';
 import { TerminalModule } from '@difizen/libro-terminal';
@@ -10,6 +11,7 @@ import {
   createViewPreference,
   HeaderArea,
 } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 
 import { LibroLabHeaderMenuModule } from './command/module.js';
 import { LabConfigAppContribution } from './config/config-contribution.js';
@@ -20,6 +22,7 @@ import { ImageViewerModule } from './image-viewer/index.js';
 import { LibroKernelAndTerminalPanelModule } from './kernel-and-terminal-panel/module.js';
 import { LibroLabApp } from './lab-app.js';
 import { LabColorContribution } from './lab-color-registry.js';
+import { LangSwitcherView } from './lang-switcher/index.js';
 import { ContentBottomTabView } from './layout/content-bottom-tab-view.js';
 import {
   LibroLabLayoutModule,
@@ -34,6 +37,11 @@ import { EntryPointView } from './welcome/entry-point-view.js';
 import { WelcomeView } from './welcome/index.js';
 
 export const LibroLabModule = ManaModule.create()
+  .preload(() => {
+    l10n.loadLangBundles(langBundles);
+
+    return Promise.resolve();
+  })
   .register(
     LibroLabApp,
     LibroLabLayoutView,
@@ -41,6 +49,7 @@ export const LibroLabModule = ManaModule.create()
     LabConfigAppContribution,
     LibroLabSideTabView,
     LabColorContribution,
+    LangSwitcherView,
     createViewPreference({
       view: GithubLinkView,
       slot: HeaderArea.right,
@@ -49,6 +58,14 @@ export const LibroLabModule = ManaModule.create()
       },
       autoCreate: true,
     }),
+    createViewPreference({
+      view: LangSwitcherView,
+      slot: HeaderArea.right,
+      openOptions: {
+        order: 'lang',
+      },
+      autoCreate: true,
+    }),
     // KernelManagerView,
     // createViewPreference({
     //   view: KernelManagerView,

package/src/toc/libro-toc-panel-view.tsx

@@ -12,6 +12,7 @@ import {
   ViewManager,
   ViewRender,
 } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { ConfigProvider, Empty, theme } from 'antd';
 
 import { TocIcon } from '../common/index.js';
@@ -38,7 +39,7 @@ const TocViewRender: React.FC = () => {
         ) : (
           <Empty
             image={Empty.PRESENTED_IMAGE_SIMPLE}
-            description="该文件格式暂不支持大纲"
+            description={l10n.t('该文件格式暂不支持大纲')}
             className="libro-lab-toc-empty"
           />
         )}
@@ -59,7 +60,7 @@ export class TocPanelView extends BaseView {
   constructor() {
     super();
     this.title.icon = <TocIcon />;
-    this.title.label = '大纲';
+    this.title.label = () => <div>{l10n.t('大纲')}</div>;
   }
 
   override onViewMount(): void {

package/src/welcome/entry-point-view.tsx

@@ -16,6 +16,7 @@ import {
   ViewManager,
 } from '@difizen/mana-app';
 import { BaseView } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { Col, Row } from 'antd';
 import { forwardRef, useEffect, useState } from 'react';
 
@@ -43,8 +44,10 @@ export const EntryPointComponent = forwardRef(function EntryPointComponent() {
 
   return (
     <div className="libro-lab-entry-point">
-      <div className="libro-lab-entry-point-title">请选择你要创建的文件类型：</div>
-      <div className="libro-lab-entry-point-item-title">文件</div>
+      <div className="libro-lab-entry-point-title">
+        {l10n.t('请选择你要创建的文件类型：')}
+      </div>
+      <div className="libro-lab-entry-point-item-title">{l10n.t('文件')}</div>
       <Row>
         <Col
           className="gutter-row"
@@ -110,11 +113,11 @@ export const EntryPointComponent = forwardRef(function EntryPointComponent() {
             }}
           >
             <MoreIcon />
-            <span className="libro-lab-entry-point-item-text">其他</span>
+            <span className="libro-lab-entry-point-item-text">{l10n.t('其他')}</span>
           </div>
         </Col>
       </Row>
-      <div className="libro-lab-entry-point-item-title">其他</div>
+      <div className="libro-lab-entry-point-item-title">{l10n.t('其他')}</div>
       <Row>
         <Col
           className="gutter-row"
@@ -132,40 +135,40 @@ export const EntryPointComponent = forwardRef(function EntryPointComponent() {
         </Col>
       </Row>
       {/* <div className="libro-lab-entry-point-item-title">最近使用</div>
-      <Row>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '24px' }}
-        >
-          <div className="libro-lab-entry-point-item-recent">
-            <span className="libro-lab-entry-point-item-recent-icon">📋 </span>
-            <span className="libro-lab-entry-point-item-recent-text">
-              这是一个文件名
-            </span>
-          </div>
-        </Col>
-      </Row> */}
+        <Row>
+         <Col
+           className="gutter-row"
+           style={{ paddingLeft: 'unset', paddingRight: '24px' }}
+         >
+           <div className="libro-lab-entry-point-item-recent">
+             <span className="libro-lab-entry-point-item-recent-icon">📋 </span>
+             <span className="libro-lab-entry-point-item-recent-text">
+               这是一个文件名
+             </span>
+           </div>
+         </Col>
+        </Row> */}
       {/* <div className="libro-lab-entry-point-item-title">系统设置</div>
-      <Row>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '24px' }}
-        >
-          <div className="libro-lab-entry-point-item-config">
-            <PreferenceIcon></PreferenceIcon>
-            <span className="libro-lab-entry-point-item-config-text">偏好设置</span>
-          </div>
-        </Col>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '24px' }}
-        >
-          <div className="libro-lab-entry-point-item-config">
-            <KeybindIcon></KeybindIcon>
-            <span className="libro-lab-entry-point-item-config-text">快捷键设置</span>
-          </div>
-        </Col>
-      </Row> */}
+        <Row>
+         <Col
+           className="gutter-row"
+           style={{ paddingLeft: 'unset', paddingRight: '24px' }}
+         >
+           <div className="libro-lab-entry-point-item-config">
+             <PreferenceIcon></PreferenceIcon>
+             <span className="libro-lab-entry-point-item-config-text">偏好设置</span>
+           </div>
+         </Col>
+         <Col
+           className="gutter-row"
+           style={{ paddingLeft: 'unset', paddingRight: '24px' }}
+         >
+           <div className="libro-lab-entry-point-item-config">
+             <KeybindIcon></KeybindIcon>
+             <span className="libro-lab-entry-point-item-config-text">快捷键设置</span>
+           </div>
+         </Col>
+        </Row> */}
     </div>
   );
 });

package/src/welcome/welcome-view.tsx

@@ -9,6 +9,7 @@ import {
   ViewRender,
 } from '@difizen/mana-app';
 import { BaseView } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { forwardRef } from 'react';
 
 import { LayoutService } from '../layout/layout-service.js';
@@ -23,9 +24,13 @@ export const WelcomeComponent = forwardRef(function WelcomeComponent() {
   const serverConnection = useInject(ServerConnection);
   return (
     <div className="libro-lab-welcome-page">
-      <div className="libro-lab-welcome-page-title">欢迎使用 Notebook 工作台 🎉🎉</div>
+      <div className="libro-lab-welcome-page-title">
+        {l10n.t('欢迎使用 Libro Lab🎉🎉')}
+      </div>
       <div className="libro-lab-welcome-page-server-info">
-        <div className="libro-lab-welcome-page-server-info-title">服务连接信息</div>
+        <div className="libro-lab-welcome-page-server-info-title">
+          {l10n.t('服务连接信息')}
+        </div>
         <div className="libro-lab-welcome-page-server-info-item">
           BaseURL: {`${serverConnection.settings.baseUrl}`}
         </div>
@@ -49,7 +54,7 @@ export class WelcomeView extends BaseView {
   constructor(@inject(ViewManager) viewManager: ViewManager) {
     super();
     this.title.icon = '🙌 ';
-    this.title.label = '欢迎使用';
+    this.title.label = () => <div>{l10n.t('欢迎使用')}</div>;
     this.title.closable = false;
     this.viewManager = viewManager;
     this.viewManager