Skip to content

Commit

Permalink
t
Browse files Browse the repository at this point in the history
  • Loading branch information
@lazyxu
lazyxu committed Nov 30, 2023
1 parent 321c7d8 commit 40cbec3
Show file tree
Hide file tree
Showing 9 changed files with 290 additions and 140 deletions.
8 changes: 4 additions & 4 deletions cmd/kfs-server/task/list/event.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ import (
)

type Response struct {
File dao.DriverFile `json:"file"`
ErrMsg string `json:"errMsg"`
N int `json:"n"`
File *dao.DriverFile `json:"file"`
ErrMsg string `json:"errMsg"`
N int `json:"n"`
}

func send(c echo.Context, msg Response) {
Expand Down Expand Up @@ -69,7 +69,7 @@ func Handle(c echo.Context, kfsCore *core.KFS) error {
if err != nil {
send(c, Response{ErrMsg: err.Error()})
} else {
send(c, Response{File: file})
send(c, Response{File: &file})
}
}
return nil
Expand Down
1 change: 1 addition & 0 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"protobufjs": "^7.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.0",
"react-use-websocket": "^4.3.1",
"reconnecting-websocket": "^4.4.0",
"ua-parser-js": "^1.0.37",
Expand Down
235 changes: 125 additions & 110 deletions ui/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Dcim from 'pages/Dcim';
import DedicatedSpace from 'pages/DedicatedSpace/DedicatedSpace';
import SystemConfig from 'pages/Setting/SystemConfig';
import React, { useEffect } from "react";
import { HashRouter, Link, Route, Routes } from 'react-router-dom';
import UAParser from "ua-parser-js";
import useMenu from "./hox/menu";
import useSysConfig from "./hox/sysConfig";
Expand Down Expand Up @@ -63,119 +64,133 @@ function App() {
justifyContent: 'flex-end',
}));
console.log(process.env);
console.log(location);
return (
<SnackbarProvider action={SnackbarAction} >
<Box sx={{
position: 'fixed', width: "100%", height: "100%",
display: 'flex', flexDirection: 'column',
backgroundColor: theme => theme.background.primary,
color: theme => theme.context.primary
}}>
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={() => setOpen(true)}
edge="start"
sx={{
marginRight: 2,
...(open && { display: 'none' }),
}}
<HashRouter>
<SnackbarProvider action={SnackbarAction} >
<Box sx={{
position: 'fixed', width: "100%", height: "100%",
display: 'flex', flexDirection: 'column',
backgroundColor: theme => theme.background.primary,
color: theme => theme.context.primary
}}>
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={() => setOpen(true)}
edge="start"
sx={{
marginRight: 2,
...(open && { display: 'none' }),
}}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap Component="div" sx={{ flex: 1 }}>
{menu}
</Typography>
<Box>
<MetadataAnalysis />
</Box>
</Toolbar>
</AppBar>
<Drawer
anchor="left"
open={open}
onClose={toggleDrawer(false)}
>
<Box
sx={{ width: 250 }}
role="presentation"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div" sx={{ flex: 1 }}>
{menu}
</Typography>
<Box>
<MetadataAnalysis />
<List>
{(process.env.REACT_APP_PLATFORM === 'web' ? [
{ icon: 'wangpan', name: '我的云盘', to: '/files' },
{ icon: 'DCIM', name: '我的相册', to: '/dicm' },
{ icon: 'devices', name: '设备列表', to: '/devices' },
{ icon: 'peizhi', name: '设置', to: '/systemConfig' },
{ icon: 'equipment_data-02_fn', name: '存储空间', to: '/dedicatedSpace' },
] : [
{ icon: 'wangpan', name: '我的云盘', to: '/files' },
{ icon: 'DCIM', name: '我的相册', to: '/dicm' },
{ icon: 'yuntongbu', name: '备份任务', to: '/backupTask' },
{ icon: 'devices', name: '设备列表', to: '/devices' },
{ icon: 'peizhi', name: '设置', to: '/systemConfig' },
{ icon: 'equipment_data-02_fn', name: '存储空间', to: '/dedicatedSpace' },
]).map((item, index) => (
// <ListItem key={item.name} disablePadding onClick={() => setMenu(item.name)}>
<ListItem key={item.name} disablePadding>
<Link to={item.to}>
<ListItemButton>
<ListItemIcon>
<SvgIcon icon={item.icon} style={{ height: "24px", width: "24px" }} />
</ListItemIcon>
<ListItemText primary={item.name} />
</ListItemButton>
</Link>
</ListItem>
))}
</List>
<Divider />
<List>
{[
{ icon: '', name: '文件类型' },
{ icon: '', name: '文件大小' },
{ icon: 'swapVertical', name: '传输列表' },
{ icon: 'system', name: '资源监控' },
{ icon: '', name: '我的书签' },
{ icon: '', name: '分享历史' },
{ icon: '', name: '操作历史' },
{ icon: '', name: '搜索' },
].map((item, index) => (
<ListItem key={item.name} disablePadding onClick={() => setMenu(item.name)}>
<ListItemButton>
<ListItemIcon>
<SvgIcon icon={item.icon} />
</ListItemIcon>
<ListItemText primary={item.name} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <Inbox /> : <Mail />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
</Toolbar>
</AppBar>
<Drawer
anchor="left"
open={open}
onClose={toggleDrawer(false)}
>
<Box
sx={{ width: 250 }}
role="presentation"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
>
<List>
{(process.env.REACT_APP_PLATFORM === 'web' ? [
{ icon: 'wangpan', name: '我的云盘' },
{ icon: 'DCIM', name: '我的相册' },
{ icon: 'devices', name: '设备列表' },
{ icon: 'peizhi', name: '设置' },
{ icon: 'equipment_data-02_fn', name: '存储空间' },
] : [
{ icon: 'wangpan', name: '我的云盘' },
{ icon: 'DCIM', name: '我的相册' },
{ icon: 'yuntongbu', name: '备份任务' },
{ icon: 'devices', name: '设备列表' },
{ icon: 'peizhi', name: '设置' },
{ icon: 'equipment_data-02_fn', name: '存储空间' },
]).map((item, index) => (
<ListItem key={item.name} disablePadding onClick={() => setMenu(item.name)}>
<ListItemButton>
<ListItemIcon>
<SvgIcon icon={item.icon} style={{ height: "24px", width: "24px" }} />
</ListItemIcon>
<ListItemText primary={item.name} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
<List>
{[
{ icon: '', name: '文件类型' },
{ icon: '', name: '文件大小' },
{ icon: 'swapVertical', name: '传输列表' },
{ icon: 'system', name: '资源监控' },
{ icon: '', name: '我的书签' },
{ icon: '', name: '分享历史' },
{ icon: '', name: '操作历史' },
{ icon: '', name: '搜索' },
].map((item, index) => (
<ListItem key={item.name} disablePadding onClick={() => setMenu(item.name)}>
<ListItemButton>
<ListItemIcon>
<SvgIcon icon={item.icon} />
</ListItemIcon>
<ListItemText primary={item.name} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <Inbox /> : <Mail />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
<Version />
</Drawer>
<DrawerHeader />
{menu === '我的云盘' && <Files />}
{menu === '我的相册' && <Dcim />}
{menu === '备份任务' && <BackupTask />}
{menu === '设备列表' && <Devices />}
{menu === '设置' && <SystemConfig />}
{menu === '存储空间' && <DedicatedSpace />}
</Box>
</SnackbarProvider>
<Version />
</Drawer>
<DrawerHeader />
<Routes>
<Route path="/files" Component={Files} />
<Route path="/dicm" Component={Dcim} />
<Route path="/backupTask" Component={BackupTask} />
<Route path="/devices" Component={Devices} />
<Route path="/systemConfig" Component={SystemConfig} />
<Route path="/dedicatedSpace" Component={DedicatedSpace} />
</Routes>
{/* {menu === '我的云盘' && <Files />}
{menu === '我的相册' && <Dcim />}
{menu === '备份任务' && <BackupTask />}
{menu === '设备列表' && <Devices />}
{menu === '设置' && <SystemConfig />}
{menu === '存储空间' && <DedicatedSpace />} */}
</Box>
</SnackbarProvider>
</HashRouter>
);
}

Expand Down
20 changes: 6 additions & 14 deletions ui/src/components/AbsolutePath/PathElement/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,15 @@
import { Link, Stack } from "@mui/material";
import { listDriver } from "api/driver";
import { list, openFile } from "api/fs";
import { Stack } from "@mui/material";
import useResourceManager from 'hox/resourceManager';
import { Link, useSearchParams } from "react-router-dom";
import SvgIcon from "../../Icon/SvgIcon";

export default ({type, name, icon, filePath}) => {
const [resourceManager, setResourceManager] = useResourceManager();
let [searchParams, setSearchParams] = useSearchParams();
let driverId = searchParams.get("driverId");
console.log(driverId, filePath)
return (
<Link color="inherit" underline="hover" onClick={(() => {
if (filePath) {
if (type === "file") {
openFile(setResourceManager, resourceManager.driverId, filePath, resourceManager.file);
} else {
list(setResourceManager, resourceManager.driverId, resourceManager.driverName, filePath);
}
} else {
listDriver(setResourceManager);
}
})}>
<Link color="inherit" underline="hover" to={filePath?`/files?driverId=${driverId}&filePath=${filePath}`:`/files`}>
<Stack direction="row"
justifyContent="flex-start"
alignItems="center"
Expand Down
24 changes: 15 additions & 9 deletions ui/src/components/AbsolutePath/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
import { Breadcrumbs, Stack } from "@mui/material";
import useResourceManager from 'hox/resourceManager';
import { useSearchParams } from "react-router-dom";
import PathElement from "./PathElement";
import './index.scss';

export default () => {
let [searchParams, setSearchParams] = useSearchParams();
const [resourceManager, setResourceManager] = useResourceManager();
let driverId = parseInt(searchParams.get("driverId"), 10);
let filePath = searchParams.get("filePath");
let driver = resourceManager.drivers.find(d => d.id === driverId);
console.log("searchParams", resourceManager.drivers, driverId, driver)
return (
<Stack className='filePath'
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={1}
>
<Breadcrumbs separator=">" maxItems={5}>
<PathElement type="driver" name="我的云盘"/>
<PathElement name={resourceManager.driverName} filePath={[]}/>
{resourceManager.filePath.map((elemName, i) =>
<PathElement type="driver" name="我的云盘" />
<PathElement name={driver?.name} filePath={[]} />
{(filePath || []).map((elemName, i) =>
<PathElement
type={i === resourceManager.filePath.length-1 && !resourceManager.dirItems ? "file" : "dir"}
type={i === filePath.length - 1 && !resourceManager?.dirItems ? "file" : "dir"}
key={i} name={elemName}
filePath={resourceManager.filePath.slice(0, i + 1)}/>
filePath={filePath.slice(0, i + 1)} />
)}
</Breadcrumbs>
</Stack>
Expand Down
9 changes: 7 additions & 2 deletions ui/src/pages/Files/Driver.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import SvgIcon from "components/Icon/SvgIcon";
import useContextMenu from "hox/contextMenu";
import useResourceManager from 'hox/resourceManager';
import { useState } from 'react';
import { useSearchParams } from 'react-router-dom';

const StyledMenu = styled((props) => (
<Menu
Expand Down Expand Up @@ -47,11 +48,15 @@ const StyledMenu = styled((props) => (
},
},
}));

// <Route></Route>
//
// this.props.history.push({pathname:"path?id=2"})
// this.props.location.query.name
export default ({ driver, setDriverAttribute }) => {
const [anchorEl, setAnchorEl] = useState(null);
const [resourceManager, setResourceManager] = useResourceManager();
const [contextMenu, setContextMenu] = useContextMenu();
let [searchParams, setSearchParams] = useSearchParams();
return (
<Card sx={{ minWidth: 275 }} variant="outlined">
<CardContent>
Expand All @@ -60,7 +65,7 @@ export default ({ driver, setDriverAttribute }) => {
alignItems="center"
spacing={2}
>
<Link onClick={() => list(setResourceManager, driver.id, driver.name, [])}>
<Link onClick={() => setSearchParams(prev => {return {...prev, driverId: driver.id, filePath: []}})}>
<Box sx={{ height: "64px", width: "64px" }} >
{driver.type === 'baiduPhoto' ?
<img src='baiduPhoto.png' style={{ maxWidth: "100%", maxHeight: "100%" }} />
Expand Down
Loading

0 comments on commit 40cbec3

Please sign in to comment.