前台添加分享功能

main.py

@@ -199,10 +199,10 @@ async def file_batch_share(
 
 
 @api_router.post(
-    "/file_batch_delete", summary="取消分享", description="取消分享", tags=["分享"]
+    "/share_batch_delete", summary="取消分享", description="取消分享", tags=["分享"]
 )
-async def file_batch_delete(ids: List[str]):
-    return await THUNDERX_CLIENT.file_batch_delete(ids)
+async def share_batch_delete(ids: List[str]):
+    return await THUNDERX_CLIENT.share_batch_delete(ids)
 
 
 @api_router.post(

pikpakapi/__init__.py

@@ -998,7 +998,7 @@ class PikPakApi:
         )
         return result
 
-    async def file_batch_delete(
+    async def share_batch_delete(
         self,
         ids: List[str],
     ) -> Dict[str, Any]:

templates/index.html

@@ -217,7 +217,7 @@
             const randomString = Math.random()
                 .toString(36)
                 .substring(2, 10); // 生成一个随机字符串确保event每次的值不一样，如果一样会不触发事件
-            const identity = `${Date.now()}-${randomString}`;
+            const identity = `${ Date.now() }-${ randomString }`;
             // 存储到 localStorage，以便其他页面能够接收到
             localStorage.setItem(
                 "event",
@@ -402,24 +402,24 @@
                 <Table responsive bordered>
                     <thead>
                         <tr className="text-center">
-                            {columns.map((column, index) => (
-                                <th key={index}>{column.title}</th>
-                            ))}
+                            { columns.map((column, index) => (
+                                <th key={ index }>{ column.title }</th>
+                            )) }
                         </tr>
                     </thead>
                     <tbody>
-                        {data.map((row, rowIndex) => (
-                            <tr key={rowIndex} className="text-center">
-                                {columns.map((column, colIndex) => (
-                                    <td key={colIndex}>
-                                        {/* 调用渲染方法，如果没有定义，则直接显示数据 */}
-                                        {column.render
+                        { data.map((row, rowIndex) => (
+                            <tr key={ rowIndex } className="text-center">
+                                { columns.map((column, colIndex) => (
+                                    <td key={ colIndex }>
+                                        {/* 调用渲染方法，如果没有定义，则直接显示数据 */ }
+                                        { column.render
                                             ? column.render(row)
-                                            : row[column.dataIndex]}
+                                            : row[column.dataIndex] }
                                     </td>
-                                ))}
+                                )) }
                             </tr>
-                        ))}
+                        )) }
                     </tbody>
                 </Table>
             );
@@ -439,23 +439,23 @@
                 return (
                     <select
                         className="page-link border-0 h-100 py-0"
-                        style={{ width: "auto" }}
-                        onChange={(e) => {
+                        style={ { width: "auto" } }
+                        onChange={ (e) => {
                             props.onClick(parseInt(e.target.value));
-                        }}
+                        } }
                     >
-                        {pageNumbers.map((number) => {
+                        { pageNumbers.map((number) => {
                             const selected = number === page ? true : false;
                             return (
                                 <option
-                                    key={number}
-                                    value={number}
-                                    selected={selected}
+                                    key={ number }
+                                    value={ number }
+                                    selected={ selected }
                                 >
-                                    {number}
+                                    { number }
                                 </option>
                             );
-                        })}
+                        }) }
                     </select>
                 );
             };
@@ -463,42 +463,42 @@
                 <div className="d-flex justify-content-center align-items-baseline">
 
                     <Pagination>
-                        {pageCount > 1 && page > 1 && (
+                        { pageCount > 1 && page > 1 && (
                             <Pagination.First
-                                onClick={() => {
+                                onClick={ () => {
                                     props.onClick(1);
-                                }}
+                                } }
                             />
-                        )}
-                        {pageCount > 1 && page > 1 && (
+                        ) }
+                        { pageCount > 1 && page > 1 && (
                             <Pagination.Prev
-                                onClick={() => {
+                                onClick={ () => {
                                     props.onClick(page - 1);
-                                }}
+                                } }
                             />
-                        )}
+                        ) }
                         <Pagination.Item linkClassName="p-0 h-100 d-inline-block">
                             <SelectItems />
                         </Pagination.Item>
                         <Pagination.Item>
                             <span className="text-info">
-                                {page}/{pageCount}
+                                { page }/{ pageCount }
                             </span>
                         </Pagination.Item>
-                        {pageCount > 1 && page < pageCount && (
+                        { pageCount > 1 && page < pageCount && (
                             <Pagination.Next
-                                onClick={() => {
+                                onClick={ () => {
                                     props.onClick(page + 1);
-                                }}
+                                } }
                             />
-                        )}
-                        {pageCount > 1 && page < pageCount && (
+                        ) }
+                        { pageCount > 1 && page < pageCount && (
                             <Pagination.Last
-                                onClick={() => {
+                                onClick={ () => {
                                     props.onClick(pageCount);
-                                }}
+                                } }
                             />
-                        )}
+                        ) }
                     </Pagination>
                 </div>
             );
@@ -507,8 +507,8 @@
         const Icon = (props) => {
             return (
                 <span
-                    onClick={props.onClick}
-                    className={`mdi mdi-${props.icon} fs-${props.size} ${props.className}`}
+                    onClick={ props.onClick }
+                    className={ `mdi mdi-${ props.icon } fs-${ props.size } ${ props.className }` }
                 ></span>
             );
         };
@@ -517,13 +517,13 @@
             return (
                 <Button
                     variant="success"
-                    onClick={props.onClick}
-                    className={props.className}
+                    onClick={ props.onClick }
+                    className={ props.className }
                 >
                     <span
-                        className={`mdi mdi-${props.icon} fs-${props.iconSize} ${props.iconClassName}`}
+                        className={ `mdi mdi-${ props.icon } fs-${ props.iconSize } ${ props.iconClassName }` }
                     ></span>
-                    {props.text}
+                    { props.text }
                 </Button>
             );
         };
@@ -556,16 +556,16 @@
             }, [props.src]);
             if (loadedSrc === props.src) {
                 return (
-                    <img {...props} />
+                    <img { ...props } />
                 );
             }
-            return <img {...props} src="https://placehold.co/600x400?text=Loading" />;
+            return <img { ...props } src="https://placehold.co/600x400?text=Loading" />;
         };
 
         //设置框
         const SettingModal = (props) => {
             const settings = [
-                { "thunderx": [{ "label": "登陆令牌", "key": "secret_token", "show": false },{ "label": "代理地址", "key": "cf_proxy", "show": true }] },
+                { "thunderx": [{ "label": "登陆令牌", "key": "secret_token", "show": false }, { "label": "代理地址", "key": "cf_proxy", "show": true }] },
                 { "github": [{ "label": "Actions地址", "key": "github_host", "show": true }, { "label": "Github令牌", "key": "github_token", "show": false }] },
                 { "directus": [{ "label": "Directus地址", "key": "directus_host", "show": true }, { "label": "Directus令牌", "key": "directus_token", "show": false }] }
             ]
@@ -590,50 +590,50 @@
                 //localStorage.setItem('settings', JSON.stringify(setting));
             }
             return (
-                <Modal show={props.show} onHide={props.onHide} onShow={loadSetting}>
-                    <Modal.Header closeButton onHide={props.onHide}>
+                <Modal show={ props.show } onHide={ props.onHide } onShow={ loadSetting }>
+                    <Modal.Header closeButton onHide={ props.onHide }>
                         <Modal.Title>设置</Modal.Title>
                     </Modal.Header>
                     <Modal.Body>
                         <Form>
                             <ListGroup>
-                                {settings.map((value, index) => {
+                                { settings.map((value, index) => {
                                     const key = Object.keys(value)[0];
                                     const items = value[key];
                                     return (<ListGroup.Item>
-                                        {items.map((setting_item) => {
+                                        { items.map((setting_item) => {
                                             return (
-                                                <Form.Group as={Row} className="mb-3">
+                                                <Form.Group as={ Row } className="mb-3">
                                                     <Form.Label column sm="3">
-                                                        {setting_item.label}
+                                                        { setting_item.label }
                                                     </Form.Label>
                                                     <Col sm="9">
-                                                        <Form.Control type={setting_item.show ? "input" : "password"} value={setting[setting_item.key]} name={setting_item.key} placeholder={setting_item.label} onChange={(e) => { setSetting({ ...setting, [setting_item.key]: e.target.value }) }} />
+                                                        <Form.Control type={ setting_item.show ? "input" : "password" } value={ setting[setting_item.key] } name={ setting_item.key } placeholder={ setting_item.label } onChange={ (e) => { setSetting({ ...setting, [setting_item.key]: e.target.value }) } } />
                                                     </Col>
                                                 </Form.Group>
                                             )
-                                        })}
+                                        }) }
                                     </ListGroup.Item>)
-                                })}
+                                }) }
                             </ListGroup>
                         </Form>
                     </Modal.Body>
                     <Modal.Footer className="justify-content-between">
                         <Button
                             variant="secondary"
-                            onClick={() => {
+                            onClick={ () => {
                                 props.onHide();
-                            }}
+                            } }
                         >
                             关闭
                         </Button>
                         <Button
                             variant="primary"
-                            onClick={() => {
+                            onClick={ () => {
                                 saveSetting();
                                 props.onHide();
                                 //props.onSave();
-                            }}
+                            } }
                         >
                             保存
                         </Button>
@@ -766,7 +766,7 @@
             const url = `/files`;
 
             const { data } = await axios.post(url,
-                 {
+                {
                     "size": 100,
                     "parent_id": "",
                     "next_page_token": page_token,
@@ -774,30 +774,30 @@
                     "additionalProp1": {}
                 },
                 {
-                headers: {
-                    'Authorization': setting.secret_token,
-                    'Content-Type': 'application/json'
-                },
-            })
+                    headers: {
+                        'Authorization': setting.secret_token,
+                        'Content-Type': 'application/json'
+                    },
+                })
             return data
         }
 
         const paginateFavoritesGet = async (limit, page, keyword) => {
-            const url = `/favorites?size=${limit}&page=${page}&kw=${keyword}`;
+            const url = `/favorites?size=${ limit }&page=${ page }&kw=${ keyword }`;
             const { data } = await axios.get(url)
             return data
         }
 
 
         const paginateTagLinksGet = async (limit, page, tag) => {
-            const url = `/tags?size=${limit}&page=${page}&tag=${tag}`;
+            const url = `/tags?size=${ limit }&page=${ page }&tag=${ tag }`;
             const { data } = await axios.get(url)
             return data
         }
 
         const paginateTasksGet = async (limit, skip) => {
             const setting = STORE.getState().settings;
-            const url = setting.directus_host + `items/task?limit=${limit}&offset=${skip}&meta[]=filter_count&sort[]=-id`;
+            const url = setting.directus_host + `items/task?limit=${ limit }&offset=${ skip }&meta[]=filter_count&sort[]=-id`;
             const { data } = await axios.get(url, { headers: { Authorization: "Bearer " + setting.directus_token } })
             return data
         }
@@ -827,7 +827,7 @@
                                 <div>
                                     <Navbar.Toggle
                                         className="shadow-none border-0"
-                                        onClick={handleSidebarShow}
+                                        onClick={ handleSidebarShow }
                                         children={
                                             <Icon
                                                 icon="menu"
@@ -837,7 +837,7 @@
                                         }
                                     />
                                     <Navbar.Brand
-                                        as={Link}
+                                        as={ Link }
                                         to="/"
                                         className="text-white"
                                     >
@@ -848,13 +848,13 @@
                                     <Tasks />
                                     <LocalTasks />
                                     <Button
-                                        style={{
+                                        style={ {
                                             backgroundColor: "transparent",
-                                        }}
+                                        } }
                                         className="nav-link btn"
-                                        onClick={() => {
+                                        onClick={ () => {
                                             setSetting(true)
-                                        }}
+                                        } }
                                         children={
                                             <Icon
                                                 icon="dots-vertical"
@@ -864,17 +864,17 @@
                                         }
                                     ></Button>
                                     <SettingModal
-                                        show={setting}
-                                        onHide={() => {
+                                        show={ setting }
+                                        onHide={ () => {
                                             setSetting(false);
-                                        }}
+                                        } }
                                     />
                                 </div>
                             </Container>
                         </Navbar>
                     </header>
                     <Container fluid>
-                        <Row style={{ minHeight: "100vh" }}>
+                        <Row style={ { minHeight: "100vh" } }>
                             <Col
                                 md="2"
                                 lg="2"
@@ -883,8 +883,8 @@
                             >
                                 <Offcanvas
                                     className="leftsidebar h-100 bg-light"
-                                    show={showSideBar}
-                                    onHide={handleSidebarClose}
+                                    show={ showSideBar }
+                                    onHide={ handleSidebarClose }
                                     placement="start"
                                     responsive="md"
                                 >
@@ -903,7 +903,7 @@
                                                 className="flex-column"
                                             >
                                                 <Nav.Link
-                                                    as={Link}
+                                                    as={ Link }
                                                     className="nav-link text-dark"
                                                     to="/"
                                                     onClick={
@@ -917,6 +917,21 @@
                                                     />
                                                     文件列表
                                                 </Nav.Link>
+                                                <Nav.Link
+                                                    as={ Link }
+                                                    className="nav-link text-dark"
+                                                    to="/shares"
+                                                    onClick={
+                                                        handleSidebarClose
+                                                    }
+                                                >
+                                                    <Icon
+                                                        icon="share-variant"
+                                                        size="6"
+                                                        className="me-2"
+                                                    />
+                                                    分享列表
+                                                </Nav.Link>
                                             </Nav>
                                         </Container>
                                     </Offcanvas.Body>
@@ -926,7 +941,7 @@
                             <Col xs="12" sm="12" md="10" lg="10" xl="10">
                                 <main>
                                     <Container fluid className="pt-2 px-0 pb-5">
-                                        {children}
+                                        { children }
                                     </Container>
                                 </main>
                             </Col>
@@ -948,9 +963,9 @@
                         >
                             <ButtonGroup className="bg-teal">
                                 <IconButton
-                                    onClick={() => {
+                                    onClick={ () => {
                                         alert("test")
-                                    }}
+                                    } }
                                     text="刷新"
                                     className="bg-teal border-0"
                                     icon="reload"
@@ -958,9 +973,9 @@
                                     iconSize="6"
                                 />
                                 <IconButton
-                                    onClick={() => {
+                                    onClick={ () => {
                                         alert("hello");
-                                    }}
+                                    } }
                                     text="删除"
                                     className="bg-teal border-0"
                                     icon="delete-outline"
@@ -977,66 +992,101 @@
 
         const Videos = () => {
             const [reload, setReload] = useState(false);
-            const [pageToken,setPageToken] = useState('');
+            const [pageToken, setPageToken] = useState('');
             const [keyword, setKeyword] = useState("")
             const [search, setSearch] = useState("")
             const [videos, setVideos] = useState([])
             const setting = STORE.getState().settings;
             const { id } = useParams();
             const columns = [
-				{ title: "文件名称", dataIndex: "name" },
-				{ title: "大小", dataIndex: "size", render: (row) => (bytesToSize(Number(row.size))) },
-				{ title: "日期", dataIndex: "created_time", render: (row) => (formatDate(row.created_time)) },
-				{
-					title: "操作",
-					dataIndex: "name",
-					render: (row) => (
-						row.kind=="drive#folder" ? <Nav.Link
-							as={Link}
-							className="nav-link text-dark"
-							to={`/videos/${row.id}`}
-							target="_blank"
-						>
-							<Icon
-								icon="open-in-new"
-								size="6"
-								className="me-2"
-							/>
-						</Nav.Link> :
-							<Icon
-								icon="download-outline"
-								size="6"
-								className="me-2"
-								onClick={async () => {
-									let data = { "id": row.id }
-									await downloadMutation(data);
-								}}
-							/>
-					),
-				},
-			];
-            const authorization = 'Bearer '+setting.secret_token;
+                { title: "文件名称", dataIndex: "name" },
+                { title: "大小", dataIndex: "size", render: (row) => (bytesToSize(Number(row.size))) },
+                { title: "日期", dataIndex: "created_time", render: (row) => (formatDate(row.created_time)) },
+                {
+                    title: "操作",
+                    dataIndex: "name",
+                    render: (row) => (
+                        <div className="d-flex justify-content-center">
+                            {
+                                row.kind == "drive#folder" ? (<Nav.Link
+                                    as={ Link }
+                                    className="nav-link text-dark"
+                                    to={ `/videos/${ row.id }` }
+                                    target="_blank"
+                                >
+                                    <Icon
+                                        icon="open-in-new"
+                                        size="6"
+                                        className="me-2"
+                                    />
+                                </Nav.Link>) :
+                                    (<Icon
+                                        icon="download-outline"
+                                        size="6"
+                                        className="me-2"
+                                        onClick={ async () => {
+                                            let data = { "id": row.id }
+                                            await downloadMutation(data);
+                                        } }
+                                    />)
+                            }
+
+
+                            <Icon
+                                icon="share-variant"
+                                size="6"
+                                className="me-2"
+                                onClick={ async () => {
+                                    let data = { "id": row.id }
+                                    await sharedMutation(data);
+                                } }
+                            />
+                        </div>
+                    ),
+                },
+            ];
+            const authorization = 'Bearer ' + setting.secret_token;
             const { data: fileData, mutateAsync: downloadMutation } = useMutation({
-				mutationKey: ["get-download"],
-				mutationFn: async (fileinfo) => {
-					showLoading();
-					var url = '/files/'+fileinfo.id;
-					return await axios.get(url, {
-						headers: {
-							'Authorization': authorization,
-							'Content-Type': 'application/json'
-						},
-					})
-				},
-				onSuccess: async (data, variables, context) => {
-					hideLoading();
-				},
-				onError: () => {
-					hideLoading();
-				}
-			})
-            const { data: linksData, mutateAsync: filesMutation,error:linksError,isPending:linksLoading } = useMutation({
-                mutationKey: ["get-files",pageToken],
+                mutationKey: ["get-download"],
+                mutationFn: async (fileinfo) => {
+                    showLoading();
+                    var url = '/files/' + fileinfo.id;
+                    return await axios.get(url, {
+                        headers: {
+                            'Authorization': authorization,
+                            'Content-Type': 'application/json'
+                        },
+                    })
+                },
+                onSuccess: async (data, variables, context) => {
+                    hideLoading();
+                },
+                onError: () => {
+                    hideLoading();
+                }
+            })
+            const { data: shareData, mutateAsync: sharedMutation } = useMutation({
+                mutationKey: ["create_share"],
+                mutationFn: async (fileinfo) => {
+                    showLoading();
+                    var url = 'file_batch_share?need_password=false&expiration_days=-1';
+                    return await axios.post(url, [fileinfo.id], {
+                        headers: {
+                            'Authorization': authorization,
+                            'Content-Type': 'application/json'
+                        },
+                    })
+                },
+                onSuccess: async (data, variables, context) => {
+                    hideLoading();
+                },
+                onError: () => {
+                    hideLoading();
+                }
+            })
+
+            const { data: linksData, mutateAsync: filesMutation, error: linksError, isPending: linksLoading } = useMutation({
+                mutationKey: ["get-files", pageToken],
                 mutationFn: async (query) => {
                     showLoading();
                     var url = '/files';
@@ -1059,9 +1109,9 @@
             }, [pageToken, reload, search]);
             useEffect(() => {
                 if (!setting.secret_token || setting.secret_token.length < 5) {
-					layer.alert("请先正确配置登陆令牌，最少5位", { icon: 5 });
-					return
-				}
+                    layer.alert("请先正确配置登陆令牌，最少5位", { icon: 5 });
+                    return
+                }
 
                 let data = {
                     "size": 100,
@@ -1070,7 +1120,7 @@
                     "additional_filters": {},
                     "additionalProp1": {}
                 }
-                
+
                 filesMutation(data);
             }, []);
             useEffect(() => {
@@ -1082,10 +1132,18 @@
 
 
             useEffect(() => {
-				if (fileData) {
-					emitEvent("addDownload", fileData)
-				}
-			}, [fileData]);
+                if (fileData) {
+                    emitEvent("addDownload", fileData)
+                }
+            }, [fileData]);
+
+            useEffect(() => {
+                if (shareData) {
+                    layer.alert(shareData.data.share_url);
+                }
+            }, [shareData]);
+
+
 
             const handleSearchClick = () => {
                 setSearch(keyword)
@@ -1106,9 +1164,9 @@
                         >
                             <ButtonGroup className="bg-teal">
                                 <IconButton
-                                    onClick={() => {
+                                    onClick={ () => {
                                         forceUpdate();
-                                    }}
+                                    } }
                                     text="刷新"
                                     className="bg-teal border-0"
                                     icon="reload"
@@ -1118,11 +1176,11 @@
                             </ButtonGroup>
                         </ButtonToolbar>
                     </div>
-                    {linksError && (
+                    { linksError && (
                         <div className="text-center text-danger">
                             发生错误，请稍后重试！！！
                         </div>
-                    )}
+                    ) }
 
                     <Container fluid className="p-2">
                         <InputGroup className="mb-3">
@@ -1130,27 +1188,178 @@
                                 placeholder="关键词"
                                 aria-label="关键词"
                                 aria-describedby="关键词"
-                                onChange={e => setKeyword(e.target.value)}
+                                onChange={ e => setKeyword(e.target.value) }
                             />
-                            <Button variant="outline-secondary" id="button-addon2" onClick={() => { handleSearchClick() }}>
+                            <Button variant="outline-secondary" id="button-addon2" onClick={ () => { handleSearchClick() } }>
                                 搜索
                             </Button>
                         </InputGroup>
 
-                        {(linksLoading) && (
+                        { (linksLoading) && (
+                            <Row>
+                                <Col xs={ 12 } className="py-2">
+                                    <div className="text-center text-success">
+                                        正在努力加载中......
+                                    </div>
+                                </Col>
+                            </Row>
+                        ) }
+                        { linksData && (
+                            <Row>
+                                <DataTable data={ videos ? videos : [] } columns={ columns } />
+                            </Row>
+                        ) }
+
+                    </Container>
+                </div>
+            );
+        };
+
+        const Shares = () => {
+            const [reload, setReload] = useState(false);
+            const [pageToken, setPageToken] = useState('');
+            const [keyword, setKeyword] = useState("")
+            const [search, setSearch] = useState("")
+            const [videos, setVideos] = useState([])
+            const setting = STORE.getState().settings;
+            const { id } = useParams();
+            const columns = [
+                { title: "文件名称", dataIndex: "title" },
+                { title: "分享ID", dataIndex: "share_id" },
+                { title: "日期", dataIndex: "create_time", render: (row) => (formatDate(row.create_time)) },
+                {
+                    title: "操作",
+                    dataIndex: "name",
+                    render: (row) => (
+                        <Icon
+                            icon="cancel"
+                            size="6"
+                            className="me-2"
+                            onClick={ async () => {
+                                let data = { "id": row.share_id }
+                                await deleteMutation(data);
+                            } }
+                        />
+                    ),
+                },
+            ];
+            const authorization = 'Bearer ' + setting.secret_token;
+            const { data: fileData, mutateAsync: deleteMutation } = useMutation({
+                mutationKey: ["share_batch_delete"],
+                mutationFn: async (fileinfo) => {
+                    showLoading();
+                    var url = '/share_batch_delete';
+                    return await axios.post(url, [fileinfo.id], {
+                        headers: {
+                            'Authorization': authorization,
+                            'Content-Type': 'application/json'
+                        },
+                    })
+                },
+                onSuccess: async (data, variables, context) => {
+                    hideLoading();
+                    forceUpdate();
+                },
+                onError: () => {
+                    hideLoading();
+                }
+            })
+            const { data: linksData, mutateAsync: filesMutation, error: linksError, isPending: linksLoading } = useMutation({
+                mutationKey: ["get_share_list", pageToken],
+                mutationFn: async (query) => {
+                    showLoading();
+                    var url = '/get_share_list';
+                    return await axios.post(url, query, {
+                        headers: {
+                            'Authorization': authorization,
+                            'Content-Type': 'application/json'
+                        },
+                    })
+                },
+                onSuccess: async (data, variables, context) => {
+                    hideLoading();
+                },
+                onError: () => {
+                    hideLoading();
+                }
+            })
+
+            // useEffect(() => {
+
+            // }, [pageToken, reload]);
+            useEffect(() => {
+                if (!setting.secret_token || setting.secret_token.length < 5) {
+                    layer.alert("请先正确配置登陆令牌，最少5位", { icon: 5 });
+                    return
+                }
+
+                let data = {
+                    "size": 100,
+                    "parent_id": id,
+                    "next_page_token": pageToken,
+                    "additional_filters": {},
+                    "additionalProp1": {}
+                }
+
+                filesMutation(data);
+            }, [pageToken, reload]);
+            useEffect(() => {
+                if (linksData) {
+                    setPageToken(linksData.data.next_page_token)
+                    setVideos([...linksData.data.data])
+                }
+            }, [linksData]);
+
+
+
+
+            const forceUpdate = () => {
+                setReload((pre) => !pre);
+            };
+
+            return (
+                <div>
+                    <div className="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
+                        <label className="fs-3">分享列表</label>
+                        <ButtonToolbar
+                            aria-label="分享列表"
+                            className="bg-teal rounded"
+                        >
+                            <ButtonGroup className="bg-teal">
+                                <IconButton
+                                    onClick={ () => {
+                                        forceUpdate();
+                                    } }
+                                    text="刷新"
+                                    className="bg-teal border-0"
+                                    icon="reload"
+                                    iconClassName="me-1 text-white"
+                                    iconSize="6"
+                                />
+                            </ButtonGroup>
+                        </ButtonToolbar>
+                    </div>
+                    { linksError && (
+                        <div className="text-center text-danger">
+                            发生错误，请稍后重试！！！
+                        </div>
+                    ) }
+
+                    <Container fluid className="p-2">
+                        { (linksLoading) && (
                             <Row>
-                                <Col xs={12} className="py-2">
+                                <Col xs={ 12 } className="py-2">
                                     <div className="text-center text-success">
                                         正在努力加载中......
                                     </div>
                                 </Col>
                             </Row>
-                        )}
-                        {linksData && (
+                        ) }
+                        { linksData && (
                             <Row>
-                                <DataTable data={videos ? videos : []} columns={columns} />
+                                <DataTable data={ videos ? videos : [] } columns={ columns } />
                             </Row>
-                        )}
+                        ) }
 
                     </Container>
                 </div>
@@ -1158,7 +1367,6 @@
         };
 
 
-       
         const Tasks = () => {
             const [show, setShow] = useState(false);
             const handleClose = () => setShow(false);
@@ -1192,11 +1400,11 @@
             return (
                 <div>
                     <Button
-                        style={{
+                        style={ {
                             backgroundColor: "transparent",
-                        }}
+                        } }
                         className="nav-link btn"
-                        onClick={handleShow}
+                        onClick={ handleShow }
                         children={
                             <span>
                                 <Icon
@@ -1209,30 +1417,30 @@
                     ></Button>
 
 
-                    <Modal show={show} onHide={handleClose}>
+                    <Modal show={ show } onHide={ handleClose }>
                         <Modal.Header closeButton>
                             <Modal.Title>远程下载任务</Modal.Title>
                         </Modal.Header>
                         <Modal.Body className="py-0">
-                            {tasksError && (
+                            { tasksError && (
                                 <div className="text-center text-danger">
                                     发生错误，请稍后重试！！！
                                 </div>
-                            )}
-                            {(tasksLoading) && (
+                            ) }
+                            { (tasksLoading) && (
                                 <div className="text-center text-success">
                                     正在努力加载中......
                                 </div>
-                            )}
+                            ) }
                             <Container fluid className="p-2">
                                 <Row>
-                                    <Col xs={12}>
-                                        <Paginate page={pagination.pageIndex} onClick={(i) => { onPaginationChange({ pageSize: 36, pageIndex: i }) }} itemsPerPage="36" totalCount={meta.filter_count} />
+                                    <Col xs={ 12 }>
+                                        <Paginate page={ pagination.pageIndex } onClick={ (i) => { onPaginationChange({ pageSize: 36, pageIndex: i }) } } itemsPerPage="36" totalCount={ meta.filter_count } />
                                     </Col>
                                 </Row>
 
                                 <Row>
-                                    <Col xs={12}>
+                                    <Col xs={ 12 }>
                                         <Table bordered hover>
                                             <thead>
                                                 <tr>
@@ -1241,17 +1449,17 @@
                                                     <th>状态</th>
                                                 </tr>
                                             </thead>
-                                            {tasksData && (
+                                            { tasksData && (
                                                 <tbody>
-                                                    {tasks.map((task, index) => (
+                                                    { tasks.map((task, index) => (
                                                         <tr>
-                                                            <td>{task.id}</td>
-                                                            <td>{task.url.substr(task.url.indexOf('##') + 2)}</td>
-                                                            <td>{task.status == 'draft' ? <span className="text-warning">待下载</span> : <span class="text-success">正在下载中</span>}</td>
+                                                            <td>{ task.id }</td>
+                                                            <td>{ task.url.substr(task.url.indexOf('##') + 2) }</td>
+                                                            <td>{ task.status == 'draft' ? <span className="text-warning">待下载</span> : <span class="text-success">正在下载中</span> }</td>
                                                         </tr>
-                                                    ))}
+                                                    )) }
                                                 </tbody>
-                                            )}
+                                            ) }
 
                                         </Table>
 
@@ -1259,17 +1467,17 @@
                                 </Row>
 
                                 <Row>
-                                    <Col xs={12} className="py-2">
-                                        <Paginate page={pagination.pageIndex} onClick={(i) => { onPaginationChange({ pageSize: 36, pageIndex: i }) }} itemsPerPage="36" totalCount={meta.filter_count} />
+                                    <Col xs={ 12 } className="py-2">
+                                        <Paginate page={ pagination.pageIndex } onClick={ (i) => { onPaginationChange({ pageSize: 36, pageIndex: i }) } } itemsPerPage="36" totalCount={ meta.filter_count } />
                                     </Col>
                                 </Row>
                             </Container>
                         </Modal.Body>
                         <Modal.Footer className="justify-content-between">
-                            <Button variant="primary" onClick={() => { forceUpdate(); }}>
+                            <Button variant="primary" onClick={ () => { forceUpdate(); } }>
                                 刷新
                             </Button>
-                            <Button variant="primary" onClick={() => {
+                            <Button variant="primary" onClick={ () => {
                                 const setting = STORE.getState().settings;
                                 showLoading();
                                 axios.post(setting.github_host, { "ref": "main", "inputs": {} }, {
@@ -1287,10 +1495,10 @@
                                     }).finally(() => {
                                         hideLoading();
                                     });
-                            }}>
+                            } }>
                                 开始下载
                             </Button>
-                            <Button variant="primary" onClick={handleClose}>
+                            <Button variant="primary" onClick={ handleClose }>
                                 关闭
                             </Button>
                         </Modal.Footer>
@@ -1326,7 +1534,7 @@
                                 icon="delete-outline"
                                 size="6"
                                 className="me-2"
-                                onClick={() => {
+                                onClick={ () => {
                                     layer.confirm('确定删除？该操作无法撤销!!!', { icon: 3 }, function (index) {
                                         setDownloads(
                                             downloads.filter(a =>
@@ -1337,13 +1545,13 @@
                                     }, function () {
 
                                     });
-                                }}
+                                } }
                             />
                             <Icon
                                 icon="pencil-outline"
                                 size="6"
                                 className="me-2"
-                                onClick={() => {
+                                onClick={ () => {
                                     layer.prompt({
                                         title: '输入文件名称，并确认',
                                         formType: 0,
@@ -1368,7 +1576,7 @@
                                         setDownloads(newDownloads);
                                         layer.close(index);
                                     });
-                                }}
+                                } }
                             />
                         </div>
                     ),
@@ -1408,12 +1616,12 @@
                 const file = fileinfo.data;
                 var url = file.web_content_link;
                 for (const obj of file.medias) {
-                    if (obj.link.url.trim().length>10) { 
+                    if (obj.link.url.trim().length > 10) {
                         url = obj.link.url;
-                        break;     
+                        break;
                     }
                 }
-                const download = { name: file.name, size: Number(file.size),url:url, created: file.created_time }
+                const download = { name: file.name, size: Number(file.size), url: url, created: file.created_time }
                 setAddDownloadObject(download)
             }
             useEffect(() => {
@@ -1441,11 +1649,11 @@
                 return (
                     <div>
                         <Button
-                            style={{
+                            style={ {
                                 backgroundColor: "transparent",
-                            }}
+                            } }
                             className="nav-link btn"
-                            onClick={handleShow}
+                            onClick={ handleShow }
                             children={
                                 <span>
                                     <Icon
@@ -1453,41 +1661,41 @@
                                         size="3"
                                         className="text-white"
                                     />
-                                    <Badge bg="danger" style={{ top: '-15px', left: '-10px' }}>{downloads.length}</Badge>
+                                    <Badge bg="danger" style={ { top: '-15px', left: '-10px' } }>{ downloads.length }</Badge>
                                 </span>
                             }
                         ></Button>
 
 
-                        <Modal show={show} onHide={handleClose}>
+                        <Modal show={ show } onHide={ handleClose }>
                             <Modal.Header closeButton>
                                 <Modal.Title>本地下载任务</Modal.Title>
                             </Modal.Header>
                             <Modal.Body>
-                                {downloads && (
-                                    <DataTable data={downloads ? downloads : []} columns={columns} />
-                                )}
+                                { downloads && (
+                                    <DataTable data={ downloads ? downloads : [] } columns={ columns } />
+                                ) }
                             </Modal.Body>
                             <Modal.Footer className="justify-content-between">
 
                                 <ButtonGroup>
-                                    <Button variant="primary" onClick={async () => { await localTaskdMutation() }}>
+                                    <Button variant="primary" onClick={ async () => { await localTaskdMutation() } }>
                                         添加转存
                                     </Button>
                                 </ButtonGroup>
 
                                 <ButtonGroup>
-                                    <Button variant="danger" onClick={() => {
+                                    <Button variant="danger" onClick={ () => {
                                         layer.confirm('确定删除？该操作无法撤销!!!', { icon: 3 }, function (index) {
                                             setDownloads([]);
                                             layer.close(index);
                                         }, function () {
 
                                         });
-                                    }}>
+                                    } }>
                                         清空
                                     </Button>
-                                    <Button variant="primary" onClick={handleClose}>
+                                    <Button variant="primary" onClick={ handleClose }>
                                         关闭
                                     </Button>
                                 </ButtonGroup>
@@ -1560,9 +1768,9 @@
                     dataIndex: "name",
                     render: (row) => (
                         row.is_dir ? <Nav.Link
-                            as={Link}
+                            as={ Link }
                             className="nav-link text-dark"
-                            to={decodeURI(path + row.name + '/')}
+                            to={ decodeURI(path + row.name + '/') }
                             target="_blank"
                         >
                             <Icon
@@ -1575,10 +1783,10 @@
                                 icon="download-outline"
                                 size="6"
                                 className="me-2"
-                                onClick={async () => {
+                                onClick={ async () => {
                                     let data = { "path": path + row.name, "password": "" }
                                     await downloadMutation(data);
-                                }}
+                                } }
                             />
                     ),
                 },
@@ -1607,9 +1815,9 @@
                         >
                             <ButtonGroup className="bg-teal">
                                 <IconButton
-                                    onClick={() => {
+                                    onClick={ () => {
                                         emitEvent("test", { a: 'b' })
-                                    }}
+                                    } }
                                     text="刷新"
                                     className="bg-teal border-0"
                                     icon="reload"
@@ -1620,19 +1828,19 @@
                         </ButtonToolbar>
                     </div>
                     <Container fluid className="p-2">
-                        {error && (
+                        { error && (
                             <div className="text-center text-danger">
-                                {error}
+                                { error }
                             </div>
-                        )}
-                        {(loading) && (
+                        ) }
+                        { (loading) && (
                             <div className="text-center text-success">
                                 正在努力加载中......
                             </div>
-                        )}
-                        {response && (
-                            <DataTable data={response.data.content ? response.data.content : []} columns={columns} />
-                        )}
+                        ) }
+                        { response && (
+                            <DataTable data={ response.data.content ? response.data.content : [] } columns={ columns } />
+                        ) }
                     </Container>
                 </div>
             );
@@ -1641,13 +1849,14 @@
         const container = document.getElementById("root");
         const root = ReactDOM.createRoot(container);
         root.render(
-            <QueryClientProvider client={queryClient}>
+            <QueryClientProvider client={ queryClient }>
                 <HashRouter>
                     <Route path="/:path?">
                         <Layout>
                             <Switch>
-                                <Route path="/" exact component={Videos} />
-                                <Route path="/videos/:id?" exact component={Videos} />
+                                <Route path="/" exact component={ Videos } />
+                                <Route path="/shares" exact component={ Shares } />
+                                <Route path="/videos/:id?" exact component={ Videos } />
                             </Switch>
                         </Layout>
                     </Route>