@difizen/libro-jupyter 0.1.0 → 0.1.2

package/src/file/file-command.tsx

@@ -11,7 +11,6 @@ import { ViewManager } from '@difizen/mana-app';
 import {
   CommandContribution,
   FileStatNode,
-  FileTreeCommand,
   inject,
   MenuContribution,
   ModalService,
@@ -28,6 +27,7 @@ import { FileRenameModal } from './file-rename-modal.js';
 import { JupyterFileService } from './file-service.js';
 import { FileView } from './file-view/index.js';
 import { copy2clipboard } from './utils.js';
+import './index.less';
 
 const FileCommands = {
   OPEN_FILE: {
@@ -70,6 +70,10 @@ const FileCommands = {
     id: 'fileTree.command.refresh',
     label: '刷新',
   },
+  REMOVE: {
+    id: 'fileTree.command.remove',
+    label: '删除',
+  },
 };
 export const FileTreeContextMenuPath: MenuPath = ['file-tree-context-menu'];
 
@@ -176,13 +180,17 @@ export class FileCommandContribution
         return FileStatNode.is(node) && node.fileStat.isFile;
       },
     });
-    command.registerHandler(FileTreeCommand.REMOVE.id, {
+    command.registerHandler(FileCommands.REMOVE.id, {
       execute: (node) => {
         if (FileStatNode.is(node)) {
           const filePath = node.uri.path.toString();
           Modal.confirm({
-            title: '确认删除一下文件或文件夹？',
-            content: filePath,
+            width: 424,
+            title: '确认要删除这个文件/文件夹吗？',
+            content: `请确认是否删除文件 ${filePath} ，删除后将不可恢复，请谨慎操作。`,
+            wrapClassName: 'libro-remove-file-modal',
+            cancelText: '取消',
+            okText: '确定',
             onOk: async () => {
               try {
                 await this.fileService.delete(node.uri);
@@ -252,7 +260,7 @@ export class FileCommandContribution
     });
     command.registerCommand(FileCommands.CREATE_FILE, {
       execute: async (data) => {
-        let path = '/workspace';
+        let path = this.fileView.model.location?.path.toString() || '/';
         if (FileStatNode.is(data)) {
           path = data.fileStat.isDirectory
             ? data.uri.path.toString()
@@ -265,7 +273,7 @@ export class FileCommandContribution
     });
     command.registerCommand(FileCommands.CREATE_DIR, {
       execute: async (data) => {
-        let path = '/workspace';
+        let path = this.fileView.model.location?.path.toString() || '/';
         if (FileStatNode.is(data)) {
           path = data.fileStat.isDirectory
             ? data.uri.path.toString()
@@ -279,7 +287,7 @@ export class FileCommandContribution
 
     command.registerCommand(FileCommands.COPY_PATH, {
       execute: async (data) => {
-        let path = '/workspace';
+        let path = this.fileView.model.location?.path.toString() || '/';
         if (FileStatNode.is(data)) {
           path = data.uri.path.toString();
         }
@@ -291,7 +299,7 @@ export class FileCommandContribution
       execute: async (data) => {
         let relative = '';
         if (FileStatNode.is(data)) {
-          relative = pathUtil.relative('/workspace', data.uri.path.toString());
+          relative = pathUtil.relative('/', data.uri.path.toString());
         }
         copy2clipboard(relative);
       },

package/src/file/file-create-modal.tsx

@@ -1,15 +1,26 @@
-import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
+import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
 import { URI, useInject, ViewManager } from '@difizen/mana-app';
+import { Col, Form, message, Row, Input, Modal } from 'antd';
 import type { InputRef } from 'antd';
-import { Input, Modal } from 'antd';
 import { useEffect, useRef, useState } from 'react';
+import './index.less';
 
-import { FileView, JupyterFileService } from './index.js';
+import {
+  FileView,
+  JSONIcon,
+  JupyterFileService,
+  MoreIcon,
+  NotebookIcon,
+  PythonIcon,
+} from './index.js';
 
 export interface ModalItemType {
   path: string;
+  fileType?: FileType;
 }
 
+type FileType = '.ipynb' | '.py' | '.json' | '.sql' | undefined;
+
 export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> = ({
   visible,
   close,
@@ -17,9 +28,35 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
 }: ModalItemProps<ModalItemType>) => {
   const fileService = useInject(JupyterFileService);
   const viewManager = useInject(ViewManager);
-  const [newFileName, setNewFileName] = useState('');
+  const [fileType, setFileType] = useState<FileType>(data.fileType);
   const [fileView, setFileView] = useState<FileView>();
   const inputRef = useRef<InputRef>(null);
+  const [form] = Form.useForm();
+
+  const onFinish = async (values: { fileName: string }) => {
+    await form.validateFields();
+    close();
+    try {
+      await fileService.newFile(values.fileName + fileType || '', new URI(data.path));
+      if (fileView) {
+        fileView.model.refresh();
+      }
+    } catch {
+      message.error('新建文件失败');
+    }
+  };
+
+  const validateFileName = async (rule: any, value: string, callback: any) => {
+    if (!value || !value.length) {
+      throw new Error('请输入文件名');
+    } else {
+      const targetURI = new URI(data.path + value + (fileType || ''));
+      const fileRes = await fileService.resolve(targetURI);
+      if (fileRes.isFile) {
+        throw new Error('文件名称已存在，请重新输入');
+      }
+    }
+  };
 
   useEffect(() => {
     viewManager
@@ -38,31 +75,97 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
       title="新建文件"
       open={visible}
       onCancel={close}
-      onOk={async () => {
-        await fileService.newFile(newFileName, new URI(data.path));
-        if (fileView) {
-          fileView.model.refresh();
-        }
-        close();
+      width={788}
+      cancelText="取消"
+      okText="确定"
+      onOk={() => {
+        form.submit();
       }}
       keyboard={true}
+      wrapClassName="libro-create-file-modal"
     >
-      <Input
-        value={newFileName}
-        onChange={(e) => {
-          setNewFileName(e.target.value);
-        }}
-        ref={inputRef}
-        onKeyDown={async (e) => {
-          if (e.keyCode === 13) {
-            await fileService.newFile(newFileName, new URI(data.path));
-            if (fileView) {
-              fileView.model.refresh();
-            }
-            close();
-          }
-        }}
-      />
+      <div className="libro-create-file-path-container">
+        <div className="libro-create-file-des">创建位置：</div>
+        <span className="libro-create-file-path">{data.path}</span>
+      </div>
+      <div className="libro-create-file-des">文件类型：</div>
+      <Row>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
+        >
+          <div
+            className={`libro-create-file-type ${
+              fileType === '.ipynb' ? 'active' : ''
+            }`}
+            onClick={() => {
+              setFileType('.ipynb');
+            }}
+          >
+            <NotebookIcon />
+            <span className="libro-create-file-type-text">Notebook</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
+        >
+          <div
+            className={`libro-create-file-type ${fileType === '.py' ? 'active' : ''}`}
+            onClick={() => {
+              setFileType('.py');
+            }}
+          >
+            <PythonIcon />
+            <span className="libro-create-file-type-text">Python</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
+        >
+          <div
+            className={`libro-create-file-type ${fileType === '.json' ? 'active' : ''}`}
+            onClick={() => {
+              setFileType('.json');
+            }}
+          >
+            <JSONIcon />
+            <span className="libro-create-file-type-text">JSON</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
+        >
+          <div
+            className={`libro-create-file-type ${
+              fileType === undefined ? 'active' : ''
+            }`}
+            onClick={() => {
+              setFileType(undefined);
+            }}
+          >
+            <MoreIcon />
+            <span className="libro-create-file-type-text">其他</span>
+          </div>
+        </Col>
+      </Row>
+      <Form
+        layout="vertical"
+        autoComplete="off"
+        form={form}
+        onFinish={onFinish}
+        className="libro-create-file-form"
+      >
+        <Form.Item
+          name="fileName"
+          label="文件名称"
+          rules={[{ required: true, validator: validateFileName }]}
+        >
+          <Input addonAfter={fileType || ''} />
+        </Form.Item>
+      </Form>
     </Modal>
   );
 };

package/src/file/file-createdir-modal.tsx

@@ -2,28 +2,52 @@ import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
 import { URI } from '@difizen/mana-app';
 import { ViewManager } from '@difizen/mana-app';
 import { useInject } from '@difizen/mana-app';
+import { Form, message, Input, Modal } from 'antd';
 import type { InputRef } from 'antd';
-import { Input } from 'antd';
-import { Modal } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 
 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);
-  const [dirName, setDirName] = useState('');
   const [fileView, setFileView] = useState<FileView>();
+  const [form] = Form.useForm();
+
+  const onFinish = async (values: { dirName: string }) => {
+    await form.validateFields();
+    close();
+    try {
+      await fileService.newFileDir(values.dirName, new URI(data.path));
+      if (fileView) {
+        fileView.model.refresh();
+      }
+    } catch {
+      message.error('新建文件夹失败');
+    }
+  };
+
+  const validateDirName = async (rule: any, value: string, callback: any) => {
+    if (!value || !value.length) {
+      throw new Error('请输入文件夹名');
+    } else {
+      const targetURI = new URI(data.path + value);
+      const fileRes = await fileService.resolve(targetURI);
+      if (fileRes.isDirectory) {
+        throw new Error('文件夹名称已存在，请重新输入');
+      }
+    }
+  };
+
   useEffect(() => {
     viewManager
       .getOrCreateView(FileView)
@@ -41,36 +65,44 @@ export const FileCreateDirModalComponent: React.FC<ModalItemProps<ModalItemType>
       title="新建文件夹"
       open={visible}
       onCancel={close}
-      onOk={async () => {
-        await fileService.newFileDir(dirName, new URI(data.path));
-        if (fileView) {
-          fileView.model.refresh();
-        }
-        close();
+      cancelText="取消"
+      okText="确定"
+      onOk={() => {
+        form.submit();
       }}
       keyboard={true}
+      wrapClassName="libro-create-dir-modal"
+      width={524}
     >
-      <Input
-        value={dirName}
-        onChange={(e) => {
-          setDirName(e.target.value);
-        }}
-        ref={inputRef}
-        onKeyDown={async (e) => {
-          if (e.keyCode === 13) {
-            await fileService.newFileDir(dirName, new URI(data.path));
-            if (fileView) {
-              fileView.model.refresh();
-            }
-            close();
-          }
-        }}
-      />
+      <div className="libro-create-file-des">创建位置：</div>
+      <span className="libro-create-file-path">{data.path}</span>
+      <Form
+        layout="vertical"
+        autoComplete="off"
+        form={form}
+        onFinish={onFinish}
+        className="libro-create-dir-file-form"
+      >
+        <Form.Item
+          name="dirName"
+          label="文件夹名称"
+          rules={[{ required: true, validator: validateDirName }]}
+        >
+          <Input
+            ref={inputRef}
+            onKeyDown={async (e) => {
+              if (e.keyCode === 13) {
+                form.submit();
+              }
+            }}
+          />
+        </Form.Item>
+      </Form>
     </Modal>
   );
 };
 
-export const FileDirCreateModal: ModalItem<ModalItemType> = {
+export const FileDirCreateModal: ModalItem<FileDirCreateModalItemType> = {
   id: 'file.createdir.modal',
   component: FileCreateDirModalComponent,
 };