diff --git a/frontend/index.html b/frontend/index.html index 60b92e5..0d4f9b8 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,7 +6,7 @@ nf-disk -
+
diff --git a/frontend/src/component/connection/connection.css b/frontend/src/component/connection/connection.css deleted file mode 100644 index 51dca90..0000000 --- a/frontend/src/component/connection/connection.css +++ /dev/null @@ -1,28 +0,0 @@ -div.connection-container { - display: flex; - height: 100vh; - width: 100%; - justify-content: center; - align-items: center; -} - -div.connection-form { - max-width: 700px; - min-width: 500px; - height: 100%; - display: flex; - flex: 1; - flex-direction: column; - justify-content: center; - align-items: center; -} - -div.connection-form-field { - width: 100%; - margin-top: 20px; -} - -div.connection-form-field-actions { - display: flex; - margin-top: 50px; -} diff --git a/frontend/src/component/connection/list.tsx b/frontend/src/component/connection/list.tsx new file mode 100644 index 0000000..bed53f2 --- /dev/null +++ b/frontend/src/component/connection/list.tsx @@ -0,0 +1,150 @@ +import {Button, Input, makeStyles, MenuItem, MenuList, mergeClasses, tokens, Tooltip} from "@fluentui/react-components" +import {DatabaseLinkRegular, DismissRegular} from "@fluentui/react-icons"; +import {useState} from "react"; +import {Connection} from "../../interfaces/connection"; +import {useToast} from "../../message"; +import {Dial} from "../../api"; +import {useStoreConnection} from "../../store/connection"; +import {useStoreBucket} from "../../store/bucket"; + +const useStyles = makeStyles({ + list: { + display: "flex", + flexDirection: "row", + height: "100%", + }, + content: { + height: "100%", + minWidth: "22rem", + width: "25rem", + display: "flex", + flexDirection: "column", + }, + filter: { + height: "4rem", + width: "100%", + display: "flex", + alignItems: "center", + }, + filter_input: { + width: "100%", + marginLeft: "0.5rem", + marginRight: "0.5rem", + }, + items: { + height: "100%", + width: "100%", + }, + items_one: { + marginLeft: "0.5rem", + marginRight: "0.5rem", + "&:hover":{ + color: tokens.colorNeutralForeground2BrandPressed, + }, + "&.active": { + color: tokens.colorNeutralForeground2BrandPressed, + fontWeight: "bold", + }, + "& > span": { + display: "flex", + }, + }, + items_disconn: { + marginLeft: "auto", + }, + slider: { + height: '100%', width: '1px', + // todo: resize + // cursor: 'ew-resize', + '& > div': { + height: '100%', width: '1px', + backgroundColor: 'lightgray', + }, + }, +}) + +export function ConnectionList() { + const styles = useStyles() + const {dispatchMessage} = useToast(); + const {conn_list, conn_update} = useStoreConnection(); + const [conn_filter, set_conn_filter] = useState(''); + const {bucket_get} = useStoreBucket() + + async function handleSelect(item: Connection) { + + } + + async function handleConnect(item: Connection) { + let res = await Dial('/api/connection/connect', {id: item.id}); + if (res.status !== 200) { + dispatchMessage(res.msg, "error") + return + } + + conn_update({...item, active: true}) + bucket_get(item, true) + } + + async function handleDisconnect(item: Connection) { + let res = await Dial('/api/connection/disconnect', {id: item.id}) + if (res.status !== 200) { + dispatchMessage(res.msg, "error") + return + } + conn_update({...item, active: false}) + } + + + return ( +
+
+
+ { + set_conn_filter('') + }} size="small" icon={}/> + } + placeholder="搜索连接" + onChange={(e) => set_conn_filter(e.target.value)} + /> +
+
+ + {conn_list.filter(item => item.name.includes(conn_filter)).map(item => { + return { + await handleSelect(item) + }} + onDoubleClick={async () => { + await handleConnect(item) + }} + icon={} + key={item.id}> + {item.name} + +
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/frontend/src/component/file/bucket.tsx b/frontend/src/component/file/bucket.tsx new file mode 100644 index 0000000..abc3380 --- /dev/null +++ b/frontend/src/component/file/bucket.tsx @@ -0,0 +1,40 @@ +import {makeStyles, MenuItem, MenuList, tokens} from "@fluentui/react-components"; +import {useStoreBucket} from "../../store/bucket"; +import {ArchiveRegular} from "@fluentui/react-icons"; + +const useStyles = makeStyles({ + buckets: { + height: "100%", + width: "100%", + }, + bucket_items: { + width: "100%", + }, + bucket_item: { + width: "100%", + "&:first-child": { + marginTop: "0.5rem", + }, + "&:hover": { + color: tokens.colorNeutralForeground2BrandPressed, + }, + "& > span:nth-child(2)": { + maxWidth: '100% !important', + }, + }, +}) + +export function Bucket() { + + const styles = useStyles(); + const {bucket_list} = useStoreBucket() + + return
+ + {bucket_list.map(((item, idx) => { + return } style={{width: '100%'}} + key={idx}>{item.name} + }))} + +
+} \ No newline at end of file diff --git a/frontend/src/component/file/content.tsx b/frontend/src/component/file/content.tsx new file mode 100644 index 0000000..d95edf3 --- /dev/null +++ b/frontend/src/component/file/content.tsx @@ -0,0 +1,21 @@ +import {Path} from "./path"; +import {Bucket} from "./bucket"; +import {makeStyles} from "@fluentui/react-components"; + +const useStyles = makeStyles({ + content: { + flex: '1', + display: "flex", + flexDirection: 'column', + height: "100%", + width: "100%", + }, +}) + +export function Content() { + const styles = useStyles() + return
+ + +
+} \ No newline at end of file diff --git a/frontend/src/component/file/path.tsx b/frontend/src/component/file/path.tsx new file mode 100644 index 0000000..d627188 --- /dev/null +++ b/frontend/src/component/file/path.tsx @@ -0,0 +1,14 @@ +import {makeStyles} from "@fluentui/react-components"; + +const useStyles = makeStyles({ + path: { + height: '4rem', + width: '100%', + borderBottom: '1px solid lightgray', + }, +}) + +export function Path() { + const styles = useStyles() + return
+} \ No newline at end of file diff --git a/frontend/src/component/home/body.tsx b/frontend/src/component/home/body.tsx new file mode 100644 index 0000000..c253692 --- /dev/null +++ b/frontend/src/component/home/body.tsx @@ -0,0 +1,34 @@ +import {Button, Input, makeStyles, MenuItem, MenuList, mergeClasses, tokens, Tooltip} from "@fluentui/react-components"; +import {DismissRegular} from "@fluentui/react-icons"; +import {useEffect, useState} from "react"; +import {Connection} from "../../interfaces/connection"; +import {useStoreBucket} from "../../store/bucket"; +import {useStoreConnection} from "../../store/connection"; +import {Dial} from "../../api"; +import {useToast} from "../../message"; +import {ConnectionList} from "../connection/list"; +import {Content} from "../file/content"; + +const useStyles = makeStyles({ + body: { + display: "flex", + flexDirection: 'row', + width: "100%", + flex: '1', + }, +}) + +export function Body() { + const styles = useStyles(); + const {conn_get} = useStoreConnection(); + + useEffect(() => { + conn_get() + }, []); + + + return
+ + +
+} \ No newline at end of file diff --git a/frontend/src/component/home/footer.tsx b/frontend/src/component/home/footer.tsx new file mode 100644 index 0000000..38618f3 --- /dev/null +++ b/frontend/src/component/home/footer.tsx @@ -0,0 +1,3 @@ +export function Footer() { + return
+} \ No newline at end of file diff --git a/frontend/src/component/home/header.tsx b/frontend/src/component/home/header.tsx new file mode 100644 index 0000000..fb41af7 --- /dev/null +++ b/frontend/src/component/home/header.tsx @@ -0,0 +1,37 @@ +import {Button, Dialog, DialogTrigger, makeStyles} from "@fluentui/react-components"; +import {ConnectionCreate} from "../connection/new"; +import {CloudAddFilled} from "@fluentui/react-icons"; +import {useState} from "react"; + +const useStyles = makeStyles({ + header: { + height: "5rem", + width: "100%", + display: 'flex', + alignItems: "center", + borderBottom: "1px solid lightgray", + }, + button_new_connection: { + margin: '0.5rem', + }, +}) + +export function Header() { + const styles = useStyles(); + const [openCreate, setOpenCreate] = useState(false); + + return
+
+ setOpenCreate(data.open)}> + + + + + +
+
+} \ No newline at end of file diff --git a/frontend/src/component/home/home.css b/frontend/src/component/home/home.css deleted file mode 100644 index d8e14be..0000000 --- a/frontend/src/component/home/home.css +++ /dev/null @@ -1,60 +0,0 @@ -div.container { - height: 100vh; - width: 100vw; - display: flex; - flex-direction: column; -} - -div.header { - height: 50px; - border-bottom: 1px solid lightgray; - display: flex; - align-items: center; - padding: 0 8px; -} - -div.body { - display: flex; - flex: 1; - width: 100%; - height: 100%; -} - -div.body div.body-connections { - width: 200px; - border-right: 1px solid lightgray; - height: 100%; -} - -div.body-connections-search { - display: flex; - height: 30px; -} - -input.body-connections-search-input { - border: none; - border-bottom: 1px solid lightgray; - width: calc(100% - 4px); - height: 30px; - outline: none; - text-indent: 5px; -} - -div.body-connections-search-dismiss { - border: none; - background: none; - outline: none; - border-bottom: 1px solid lightgray; - height: 32px; - width: 32px; - display: flex; - justify-content: center; - align-items: center; -} - -div.body-connections-list { - height: 100%; -} -div.body-connections-list-item.active { - color: var(--colorNeutralForeground2BrandSelected); -} diff --git a/frontend/src/component/home/home.tsx b/frontend/src/component/home/home.tsx index 68a35b0..87d1d64 100644 --- a/frontend/src/component/home/home.tsx +++ b/frontend/src/component/home/home.tsx @@ -1,148 +1,26 @@ -import {useEffect, useState} from 'react'; -import './home.css'; -import { - Button, Dialog, DialogTrigger, makeStyles, mergeClasses, MenuItem, MenuList, tokens, Tooltip, -} from "@fluentui/react-components"; -import { - CloudAddFilled, DismissRegular -} from "@fluentui/react-icons"; -import {Dial} from "../../api"; -import {useToast} from "../../message"; -import {Connection} from "../../interfaces/connection"; -import {ConnectionCreate} from "../connection/new"; -import {useStoreConnection} from "../../store/connection"; -import {useStoreBucket} from "../../store/bucket"; +import {Header} from "./header"; +import {Body} from "./body"; +import {makeStyles} from "@fluentui/react-components"; +import {Footer} from "./footer"; -const useMenuListContainerStyles = makeStyles({ +const useStyles = makeStyles({ container: { - backgroundColor: tokens.colorNeutralBackground1, - flex: 1, - width: "100%", - paddingTop: "4px", - paddingBottom: "4px", - }, - item: { - display: 'flex', - height: '100%', - alignItems: 'center', - flexDirection: 'row', - fontSize: '15px', - '& span': { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - '&.active': { - color: tokens.colorNeutralForeground2BrandHover, - } - }, - item_icon: { height: '100%', + width: '100%', display: 'flex', - justifyContent: 'center', - alignItems: 'center', - marginLeft: 'auto', - border: 'none', - background: 'transparent', - "&:hover": { - color: tokens.colorNeutralForeground2BrandHover, - } - } -}); - + flexDirection: 'column', + }, +}) export function Home() { - const styles = useMenuListContainerStyles(); - const {dispatchMessage} = useToast(); - const [openCreate, setOpenCreate] = useState(false); - const [conn_filter, set_conn_filter] = useState(''); - const {conn_list, conn_get, conn_update} = useStoreConnection(); - const {bucket_list, bucket_get} = useStoreBucket() - useEffect(() => { - conn_get() - }, []); - - async function handleConnect(item: Connection) { - let res = await Dial('/api/connection/connect', {id: item.id}); - if (res.status !== 200) { - dispatchMessage(res.msg, "error") - return - } - - conn_update({...item, active: true}) - bucket_get(item, true) - } - - async function handleDisconnect(item: Connection) { - let res = await Dial('/api/connection/disconnect', {id: item.id}) - if (res.status !== 200) { - dispatchMessage(res.msg, "error") - return - } - conn_update({...item, active: false}) - } + const styles = useStyles() return ( -
-
- setOpenCreate(data.open)}> - - - - - -
-
-
-
- set_conn_filter(e.target.value)}/> -
{ - set_conn_filter('') - }}> - -
-
-
-
- - {conn_list.filter(item => item.name.includes(conn_filter)).map(item => { - return { - await handleConnect(item) - }} - className={item.active ? mergeClasses(styles.item, 'active') : styles.item} - key={item.id}> - {item.name} - -
-
-
-
-
-
- - {bucket_list.map(((item, idx) => { - return {item.name} - }))} - -
-
-
-
+
+
+ +
) } \ No newline at end of file diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index ddf05b5..ccdbcc9 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -15,7 +15,7 @@ const router = createBrowserRouter([ ]) root.render( - + diff --git a/frontend/src/style.css b/frontend/src/style.css index 304a1b4..31338ed 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1,3 +1,6 @@ +:root { + font-size: 10px; +} body { margin: 0; color: white;