美化zip viewer

cweijan · Jun 4, 2024 · a585c86 · a585c86
1 parent bc22d65
commit a585c86
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 17 deletions.
diff --git a/src/provider/handlers/zipHandler.ts b/src/provider/handlers/zipHandler.ts
@@ -1,6 +1,7 @@
 import { Output } from "@/common/Output";
 import { FileUtil } from "@/common/fileUtil";
 import { Handler } from "@/common/handler";
+import prettyBytes from "@/service/zip/pretty-bytes";
 import { parseZipAsTree } from "@/service/zip/zipUtils";
 import { existsSync, mkdirSync, rm, writeFileSync } from "fs";
 import { tmpdir } from "os";
@@ -13,6 +14,7 @@ export async function handleZip(uri: Uri, handler: Handler) {
         const data = (await workspace.fs.readFile(uri)) as Buffer
         const basePath = `${tmpdir()}/officeZip.${new Date().getTime()}`;
         let { zip, files, folderMap, fileMap } = parseZipAsTree(data)
+        handler.emit('size', prettyBytes(data.length))
         handler.emit('data', {
             files, folderMap,
             fileName: basename(uri.fsPath)

diff --git a/src/react/view/compress/Zip.tsx b/src/react/view/compress/Zip.tsx
@@ -9,6 +9,7 @@ import { CompressInfo, FileInfo } from './zipTypes';
 const { Sider, Content } = Layout;
 export default function Zip() {
     const [currentDir, setCurrentDir] = useState('')
+    const [size, setSize] = useState('')
     const [tableItems, setTableItems] = useState([] as FileInfo[])
     const [info, setInfo] = useState({ files: [] } as CompressInfo)
     const changeFiles = (dirPath: string) => {
@@ -23,6 +24,9 @@ export default function Zip() {
         ] : info.files)
     }
     handler
+        .on('size', (size: string) => {
+            setSize(size)
+        })
         .on('data', (info: CompressInfo) => {
             setInfo(info)
             setTableItems(info.files)
@@ -37,8 +41,8 @@ export default function Zip() {
     return (
         <Flex gap="middle" wrap="wrap">
             <Layout >
-                <Toolbar currentDir={currentDir} />
-                <Layout style={{backgroundColor:'white'}}>
+                <Toolbar currentDir={currentDir} size={size} />
+                <Layout style={{ backgroundColor: 'white' }}>
                     <Sider width="25%" style={{ backgroundColor: 'transparent' }}>
                         <Sidebar name={info.fileName} items={info.files} currentDir={currentDir} OnClickFolder={changeFiles} />
                     </Sider>

diff --git a/src/react/view/compress/components/FileItems.tsx b/src/react/view/compress/components/FileItems.tsx
@@ -55,8 +55,8 @@ const columns: TableProps<FileInfo>['columns'] = [
 
 export default function FileItems({ items }) {
     const [_, height] = useWindowSize();
-    const loading = useRef(null)
-    loading.current = loading.current == null
+    const loading = useRef(true)
+    if (items.length) loading.current = false
     return (
         <Spin spinning={loading.current}>
             <Table columns={columns} rowKey="entryName" dataSource={items}

diff --git a/src/react/view/compress/components/Sidebar.tsx b/src/react/view/compress/components/Sidebar.tsx
@@ -22,7 +22,7 @@ export default function Sidebar({ name = '', items, currentDir, OnClickFolder })
     const loop = (data: FileInfo[]): TreeDataNode[] =>
       data.filter(row => row.isDirectory).map((item) => {
         const strTitle = item.name as string;
-        const title = <div style={{ backgroundColor: currentDir == item.entryName ? '#f1f1f1' : null }}
+        const title = <div style={{ whiteSpace: 'nowrap', backgroundColor: currentDir == item.entryName ? '#f1f1f1' : null }}
           onClick={() => { OnClickFolder?.(item.entryName) }}
         >
           <FolderOutlined /> {strTitle}
@@ -33,7 +33,7 @@ export default function Sidebar({ name = '', items, currentDir, OnClickFolder })
         return { title, key: item.entryName, };
       });
     return [{
-      title: <div onClick={() => { OnClickFolder?.(null) }}> <FileTextOutlined /> {name} </div>,
+      title: <div style={{ whiteSpace: 'nowrap' }} onClick={() => { OnClickFolder?.(null) }}> <FileTextOutlined /> {name} </div>,
       key: rootKey.current,
       children: loop(items)
     }]

diff --git a/src/react/view/compress/components/Toolbar.tsx b/src/react/view/compress/components/Toolbar.tsx
@@ -2,19 +2,23 @@ import { FileAddOutlined, FileDoneOutlined } from '@ant-design/icons';
 import { Button, Flex, Select } from "antd";
 import { handler } from "../../../util/vscode";
 
-export default function Toolbar({ currentDir }) {
+export default function Toolbar({ size, currentDir }) {
     return (
-        <Flex justify='space-between' style={{ padding: '5px', backgroundColor: 'white' }}>
-            <div>
-                <Button type="primary" size='middle' style={{ marginRight: '10px' }} icon={<FileDoneOutlined />} onClick={() => handler.emit('autoExtract')}>
-                    Extract
-                </Button>
-                <Button size='middle' icon={<FileAddOutlined />} onClick={() => { handler.emit('addFile', currentDir) }} >
-                    Add
-                </Button>
+        <Flex style={{ padding: '5px', paddingLeft: '10px', backgroundColor: 'white', alignItems: 'center', columnGap: '15px' }}>
+            <Button size='middle' icon={<FileAddOutlined />} onClick={() => { handler.emit('addFile', currentDir) }} >
+                Add
+            </Button>
+            <Button type="primary" size='middle' icon={<FileDoneOutlined />} onClick={() => handler.emit('autoExtract')}>
+                Extract
+            </Button>
+            <div >
+                <span style={{ fontWeight: 'bold' }}>Size:</span>
+                <span style={{ fontWeight: 'bold', marginLeft: '10px', color: 'green' }}>
+                    {size}
+                </span>
             </div>
-            <div>
-                Encoding:
+            <div >
+                <span style={{ fontWeight: 'bold' }}>Encoding:</span>
                 <Select
                     defaultValue="utf8"
                     size='middle'