fix: improve details

packages/libro-jupyter/src/file/file-command.tsx

@@ -257,7 +257,7 @@ export class FileCommandContribution
     });
     command.registerCommand(FileCommands.CREATE_FILE, {
       execute: async (data) => {
-        let path = '/';
+        let path = this.fileView.model.location?.path.toString() || '/';
         if (FileStatNode.is(data)) {
           path = data.fileStat.isDirectory
             ? data.uri.path.toString()
@@ -270,7 +270,7 @@ export class FileCommandContribution
     });
     command.registerCommand(FileCommands.CREATE_DIR, {
       execute: async (data) => {
-        let path = '/';
+        let path = this.fileView.model.location?.path.toString() || '/';
         if (FileStatNode.is(data)) {
           path = data.fileStat.isDirectory
             ? data.uri.path.toString()
@@ -284,7 +284,7 @@ export class FileCommandContribution
 
     command.registerCommand(FileCommands.COPY_PATH, {
       execute: async (data) => {
-        let path = '/';
+        let path = this.fileView.model.location?.path.toString() || '/';
         if (FileStatNode.is(data)) {
           path = data.uri.path.toString();
         }

packages/libro-jupyter/src/file/file-create-modal.tsx

@@ -16,6 +16,7 @@ import {
 
 export interface ModalItemType {
   path: string;
+  fileType?: FileType;
 }
 
 type FileType = '.ipynb' | '.py' | '.json' | '.sql' | undefined;
@@ -27,7 +28,7 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
 }: ModalItemProps<ModalItemType>) => {
   const fileService = useInject(JupyterFileService);
   const viewManager = useInject(ViewManager);
-  const [fileType, setFileType] = useState<FileType>(undefined);
+  const [fileType, setFileType] = useState<FileType>(data.fileType);
   const [fileView, setFileView] = useState<FileView>();
   const inputRef = useRef<InputRef>(null);
   const [form] = Form.useForm();

packages/libro-jupyter/src/file/file-createdir-modal.tsx

@@ -10,15 +10,13 @@ import { JupyterFileService } from './file-service.js';
 import { FileView } from './file-view/index.js';
 import './index.less';
 
-export interface ModalItemType {
+export interface FileDirCreateModalItemType {
   path: string;
 }
 
-export const FileCreateDirModalComponent: React.FC<ModalItemProps<ModalItemType>> = ({
-  visible,
-  close,
-  data,
-}: ModalItemProps<ModalItemType>) => {
+export const FileCreateDirModalComponent: React.FC<
+  ModalItemProps<FileDirCreateModalItemType>
+> = ({ visible, close, data }: ModalItemProps<FileDirCreateModalItemType>) => {
   const fileService = useInject(JupyterFileService);
   const viewManager = useInject(ViewManager);
   const inputRef = useRef<InputRef>(null);
@@ -104,7 +102,7 @@ export const FileCreateDirModalComponent: React.FC<ModalItemProps<ModalItemType>
   );
 };
 
-export const FileDirCreateModal: ModalItem<ModalItemType> = {
+export const FileDirCreateModal: ModalItem<FileDirCreateModalItemType> = {
   id: 'file.createdir.modal',
   component: FileCreateDirModalComponent,
 };

packages/libro-jupyter/src/file/index.ts

@@ -5,3 +5,5 @@ export * from './open-handler-contribution.js';
 export * from './file-service.js';
 export * from './file-protocol.js';
 export * from './file-icon.js';
+export * from './file-create-modal.js';
+export * from './file-createdir-modal.js';

packages/libro-lab/src/common/icon.tsx

@@ -1,4 +1,5 @@
 import './index.less';
+
 export interface IProps {
   className?: string;
   width?: string;
@@ -70,68 +71,6 @@ export function TocIcon(props: IProps) {
   );
 }
 
-export function WelcomeIcon(props: IProps) {
-  return (
-    <svg
-      width="12px"
-      height="12px"
-      viewBox="0 0 12 12"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      className={props.className}
-    >
-      <g id="整体框架部分" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-        <g
-          id="1.2容器加载完成"
-          transform="translate(-270.000000, -66.000000)"
-          fillRule="nonzero"
-        >
-          <g id="编组-17" transform="translate(262.000000, 56.000000)">
-            <g id="setting-fill" transform="translate(8.000000, 10.000000)">
-              <rect
-                id="矩形"
-                fill="#000000"
-                opacity="0"
-                x="0"
-                y="0"
-                width="12"
-                height="11.7"
-              ></rect>
-              <g id="sql" transform="translate(1.000000, 1.000000)">
-                <rect
-                  id="矩形"
-                  fill="#000000"
-                  opacity="0"
-                  x="0"
-                  y="0"
-                  width="10"
-                  height="10"
-                ></rect>
-                <path
-                  d="M0.33,6.17 C0.33,7 2.42,7.67 5,7.67 C7.57,7.67 9.66,7 9.67,6.17 L9.67,4.98 C8.71,5.67 6.85,6 5,6 C3.15,6 1.29,5.67 0.33,4.97 L0.33,6.17 Z"
-                  id="路径"
-                  fill="#FAAD14"
-                ></path>
-                <path
-                  d="M9.67,7.3 C8.71,8 6.85,8.33 5,8.33 C3.15,8.33 1.29,8 0.33,7.3 L0.33,8.66 C0.59,9.42 2.6,10 5,10 C7.4,10 9.41,9.42 9.67,8.67 L9.67,7.3 L9.67,7.3 Z M0.33,3.83 C0.33,4.66 2.42,5.33 5,5.33 C7.57,5.33 9.66,4.66 9.67,3.83 L9.67,2.64 C8.71,3.34 6.85,3.67 5,3.67 C3.15,3.67 1.29,3.34 0.33,2.64 L0.33,3.83 Z"
-                  id="形状"
-                  fill="#FAAD14"
-                ></path>
-                <path
-                  d="M0.33,1.5 C0.33,2.32842712 2.42083022,3 5,3 C7.57916978,3 9.67,2.32842712 9.67,1.5 C9.67,0.671572875 7.57916978,0 5,0 C2.42083022,0 0.33,0.671572875 0.33,1.5 Z"
-                  id="路径"
-                  fill="#FAAD14"
-                ></path>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-}
-
 export function Loadding(props: IProps) {
   return (
     <svg

packages/libro-lab/src/index.less

@@ -67,3 +67,12 @@
 #libro-lab-content-layout-main-container {
   overflow: auto;
 }
+
+.default-folder-icon,
+.default-file-icon {
+  color: rgba(0, 0, 0, 45%);
+}
+
+.mana-tree-node-segment-grow {
+  color: rgba(0, 0, 0, 65%);
+}

packages/libro-lab/src/layout/layout-service.ts

@@ -2,7 +2,6 @@ import type { SlotView, View, ViewOpenHandlerOptions } from '@difizen/mana-app';
 import {
   DefaultSlotView,
   inject,
-  Notifier,
   prop,
   singleton,
   SlotViewManager,
@@ -59,7 +58,7 @@ export class LayoutService {
     if (this.isAreaVisible(slot)) {
       const slotView = this.slotViewManager.getSlotView(slot);
       if (slotView instanceof DefaultSlotView) {
-        return Notifier.find(slotView, 'active')?.onChange(() => handler());
+        return slotView.onActiveChange(handler);
       }
     }
     return undefined;

packages/libro-lab/src/layout/module.ts

@@ -8,14 +8,14 @@ import {
 
 import { BrandView } from './brand/index.js';
 import { LibroLabLayoutContainerView } from './container.js';
-import { SaveableTabView } from './editor-tab-view.js';
 import { LibroLabCurrentFileFooterView } from './footer/current-file-footer-view.js';
 import { FooterArea, LibroLabLayoutFooterView } from './footer/footer-view.js';
 import { LibroLabStatusFooterView } from './footer/status-footer-view.js';
 import { LayoutService } from './layout-service.js';
 import { LibroLabLayoutView } from './layout.js';
 import { LibroLabLayoutMainView } from './main.js';
 import { LibroLabLayoutSlots } from './protocol.js';
+import { SaveableTabView } from './saveable-tab-view.js';
 
 export const LibroLabLayoutModule = ManaModule.create('LibroLabLayoutModule').register(
   LibroLabLayoutView,

packages/libro-lab/src/layout/editor-tab-view.tsx → packages/libro-lab/src/layout/saveable-tab-view.tsx

@@ -1,12 +1,12 @@
 import { CloseOutlined } from '@ant-design/icons';
 import type { View } from '@difizen/mana-app';
-import { Saveable } from '@difizen/mana-app';
 import {
   CardTabView,
   MenuRender,
   transient,
   view,
   ViewContext,
+  Saveable,
 } from '@difizen/mana-app';
 import { Dropdown } from '@difizen/mana-react';
 import { Badge } from 'antd';

packages/libro-lab/src/module.tsx

@@ -12,12 +12,12 @@ import {
 import { GithubLinkView } from './github-link/index.js';
 import { KernelManagerView } from './kernel-manager/index.js';
 import { LibroLabApp } from './lab-app.js';
-import { SaveableTabView } from './layout/editor-tab-view.js';
 import {
   LibroLabLayoutModule,
   LibroLabLayoutSlots,
   LibroLabLayoutView,
 } from './layout/index.js';
+import { SaveableTabView } from './layout/saveable-tab-view.js';
 import './index.less';
 import { LibroLabHeaderMenuModule } from './menu/module.js';
 import { LibroLabTocModule } from './toc/module.js';

packages/libro-lab/src/toc/libro-toc-panel-view.tsx

@@ -12,8 +12,8 @@ import {
   ViewRender,
 } from '@difizen/mana-app';
 import { Empty } from 'antd';
-import { TocIcon } from '../common/index.js';
 
+import { TocIcon } from '../common/index.js';
 import { LayoutService } from '../layout/layout-service.js';
 import { LibroLabLayoutSlots } from '../layout/protocol.js';
 
@@ -69,6 +69,7 @@ export class TocPanelView extends BaseView {
 
   handleEditTabChange = () => {
     if (!this.libroNavigatableView) {
+      this.libroTocView = undefined;
       return;
     }
     this.viewManager

packages/libro-lab/src/welcome/entry-point-view.tsx

@@ -1,19 +1,43 @@
-import { singleton, view } from '@difizen/mana-app';
-import { BaseView } from '@difizen/mana-app';
 import {
   NotebookIcon,
   PythonIcon,
   JSONIcon,
-  SQLIcon,
   MoreIcon,
+  FileCreateModal,
+  FileView,
 } from '@difizen/libro-jupyter';
+import {
+  ModalService,
+  singleton,
+  useInject,
+  view,
+  ViewManager,
+} from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
 import { Col, Row } from 'antd';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
+
 import { KeybindIcon, PreferenceIcon, TerminalIcon } from '../common/icon.js';
 
 import './index.less';
 
 export const EntryPointComponent = forwardRef(function EntryPointComponent() {
+  const modalService = useInject(ModalService);
+  const viewManager = useInject(ViewManager);
+  const [fileView, setFileView] = useState<FileView>();
+
+  useEffect(() => {
+    viewManager
+      .getOrCreateView(FileView)
+      .then((curfileView) => {
+        setFileView(curfileView);
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }, [viewManager]);
+
   return (
     <div className="libro-lab-entry-point">
       <div className="libro-lab-entry-point-title">请选择你要创建的文件类型：</div>
@@ -23,7 +47,15 @@ export const EntryPointComponent = forwardRef(function EntryPointComponent() {
           className="gutter-row"
           style={{ paddingLeft: 'unset', paddingRight: '32px' }}
         >
-          <div className="libro-lab-entry-point-item">
+          <div
+            className="libro-lab-entry-point-item"
+            onClick={() => {
+              modalService.openModal(FileCreateModal, {
+                path: fileView?.model.location?.path.toString() || '/',
+                fileType: '.ipynb',
+              });
+            }}
+          >
             <NotebookIcon />
             <span className="libro-lab-entry-point-item-text">Notebook</span>
           </div>
@@ -32,7 +64,15 @@ export const EntryPointComponent = forwardRef(function EntryPointComponent() {
           className="gutter-row"
           style={{ paddingLeft: 'unset', paddingRight: '32px' }}
         >
-          <div className="libro-lab-entry-point-item">
+          <div
+            className="libro-lab-entry-point-item"
+            onClick={() => {
+              modalService.openModal(FileCreateModal, {
+                path: fileView?.model.location?.path.toString() || '/',
+                fileType: '.py',
+              });
+            }}
+          >
             <PythonIcon />
             <span className="libro-lab-entry-point-item-text">Python</span>
           </div>
@@ -41,7 +81,15 @@ export const EntryPointComponent = forwardRef(function EntryPointComponent() {
           className="gutter-row"
           style={{ paddingLeft: 'unset', paddingRight: '32px' }}
         >
-          <div className="libro-lab-entry-point-item">
+          <div
+            className="libro-lab-entry-point-item"
+            onClick={() => {
+              modalService.openModal(FileCreateModal, {
+                path: fileView?.model.location?.path.toString() || '/',
+                fileType: '.json',
+              });
+            }}
+          >
             <JSONIcon />
             <span className="libro-lab-entry-point-item-text">JSON</span>
           </div>
@@ -50,16 +98,14 @@ export const EntryPointComponent = forwardRef(function EntryPointComponent() {
           className="gutter-row"
           style={{ paddingLeft: 'unset', paddingRight: '32px' }}
         >
-          <div className="libro-lab-entry-point-item">
-            <SQLIcon />
-            <span className="libro-lab-entry-point-item-text">SQL</span>
-          </div>
-        </Col>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '32px' }}
-        >
-          <div className="libro-lab-entry-point-item">
+          <div
+            className="libro-lab-entry-point-item"
+            onClick={() => {
+              modalService.openModal(FileCreateModal, {
+                path: fileView?.model.location?.path.toString() || '/',
+              });
+            }}
+          >
             <MoreIcon />
             <span className="libro-lab-entry-point-item-text">其他</span>
           </div>