diff --git a/packages/components/src/theme/index.tsx b/packages/components/src/theme/index.tsx index 810d48a..b4c6dda 100644 --- a/packages/components/src/theme/index.tsx +++ b/packages/components/src/theme/index.tsx @@ -1,7 +1,42 @@ -import { createTheme, ThemeOptions } from '@mui/material/styles'; +import { createTheme, Shadows, ThemeOptions } from '@mui/material/styles'; import { useTheme as useMuiTheme, Theme } from '@mui/material/styles'; import { amber } from '@mui/material/colors'; +const generateShadows = (color: string): Shadows => { + return [ + 'none', + `0px 2px 1px -1px ${color}`, + `0px 1px 1px 0px ${color}`, + `0px 1px 3px 0px ${color}`, + `0px 2px 4px -1px ${color}`, + + `0px 3px 5px -1px ${color}`, + `0px 3px 5px -1px ${color}`, + `0px 4px 5px -2px ${color}`, + `0px 5px 5px -3px ${color}`, + `0px 5px 6px -3px ${color}`, + + `0px 6px 6px -3px ${color}`, + `0px 6px 7px -4px ${color}`, + `0px 7px 8px -4px ${color}`, + `0px 7px 8px -4px ${color}`, + `0px 8px 9px -5px ${color}`, + + `0px 8px 9px -5px ${color}`, + `0px 9px 10px -5px ${color}`, + `0px 9px 11px -6px ${color}`, + `0px 10px 12px -6px ${color}`, + `0px 10px 13px -6px ${color}`, + + `0px 11px 13px -7px ${color}`, + `0px 11px 14px -7px ${color}`, + `0px 12px 15px -7px ${color}`, + `0px 12px 16px -8px ${color}`, + `0px 13px 17px -8px ${color}`, + ]; +}; export const themeOptions: ThemeOptions = { + // @ts-ignore + // cssVariables: true, palette: { primary: { main: '#ffc107', // amber[300] @@ -22,6 +57,7 @@ export const themeOptions: ThemeOptions = { // paper: '#f5f5f5', // 设置纸张背景颜色 }, }, + shadows: generateShadows('rgba(255, 193, 7, 0.2)'), typography: { // fontFamily: 'Roboto, sans-serif', }, @@ -30,6 +66,22 @@ export const themeOptions: ThemeOptions = { defaultProps: { disableRipple: true, }, + styleOverrides: { + root: { + '&:hover': { + backgroundColor: amber[100], + }, + }, + }, + }, + MuiButtonGroup: { + styleOverrides: { + root: { + '& .MuiButton-root': { + borderColor: amber[600], + }, + }, + }, }, MuiTextField: { styleOverrides: { @@ -51,6 +103,13 @@ export const themeOptions: ThemeOptions = { }, }, }, + MuiCard: { + styleOverrides: { + root: { + // border: `1px solid ${amber[300]}`, + }, + }, + }, }, }; diff --git a/packages/resources/src/assets/index.css b/packages/resources/src/assets/index.css index 237fe8c..f7676de 100644 --- a/packages/resources/src/assets/index.css +++ b/packages/resources/src/assets/index.css @@ -5,6 +5,9 @@ @apply w-20 h-20 bg-gray-300 rounded-full animate-spin; } } +:root { + --scrollbar-color: #ffbf00; +} #root { width: 100%; height: 100%; @@ -18,3 +21,8 @@ z-index: 9999; pointer-events: none; } + +.scrollbar { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-color) #fff; +} diff --git a/packages/resources/src/pages/file/draw/FileDrawer.tsx b/packages/resources/src/pages/file/draw/FileDrawer.tsx new file mode 100644 index 0000000..53365f1 --- /dev/null +++ b/packages/resources/src/pages/file/draw/FileDrawer.tsx @@ -0,0 +1,16 @@ +import { useResourceStore } from '@/pages/store/resource'; +import { useResourceFileStore } from '@/pages/store/resource-file'; +import { Drawer } from '@mui/material'; + +export const FileDrawer = () => { + const { prefix } = useResourceStore(); + const { resource, openDrawer, setOpenDrawer } = useResourceFileStore(); + return ( + setOpenDrawer(false)} anchor='right' {...(!openDrawer && { inert: true })}> +
+

{resource?.name ? resource.name.replace(prefix, '') : resource?.prefix?.replace(prefix, '')}

+ 
{JSON.stringify(resource, null, 2)}
+
+ + ); +}; diff --git a/packages/resources/src/pages/file/index.tsx b/packages/resources/src/pages/file/index.tsx index 10a324e..efbf0a1 100644 --- a/packages/resources/src/pages/file/index.tsx +++ b/packages/resources/src/pages/file/index.tsx @@ -1,50 +1,93 @@ -import { useEffect } from 'react'; +import { useEffect, useMemo } from 'react'; import { useResourceStore } from '../store/resource'; -import { useSettingsStore } from '../store/settings'; -import { Box, Button, Card, CardContent, Typography, ButtonGroup, useTheme } from '@mui/material'; -import { FileText, Image, File, Table, Grid } from 'lucide-react'; -import { getIcon } from './FileIcon'; +import { Box, Button, Typography, ButtonGroup } from '@mui/material'; +import { FileText, Table, Grid } from 'lucide-react'; import { FileTable } from './list/FileTable'; import { FileCard } from './list/FileCard'; +import { PrefixRedirect } from './modules/PrefixRedirect'; +import { UploadButton } from '../upload'; +import { FileDrawer } from './draw/FileDrawer'; +import { useResourceFileStore } from '../store/resource-file'; export const FileApp = () => { - const { list, getList, prefix, setListType, listType } = useResourceStore(); - const { settings } = useSettingsStore(); - + const { getList, prefix, setListType, listType } = useResourceStore(); + const { getStatFile, prefix: statPrefix, openDrawer } = useResourceFileStore(); useEffect(() => { getList(); }, []); - const theme = useTheme(); + const directory = useMemo(() => { + const _prefix = prefix.split('/'); + let dir = _prefix.slice(2).join('/'); + if (dir.endsWith('/')) { + dir = dir.slice(0, -1); + } + return dir; + }, [prefix]); + useEffect(() => { + if (statPrefix && openDrawer) { + getStatFile(); + } + }, [statPrefix, openDrawer]); + const handleUpload = (res: any) => { + getList(); + }; return ( - -
- - + +
+ + + Resources + +
+ + + + + + + + ); +}; export const Upload = () => { const onDrop = async (acceptedFiles) => { console.log(acceptedFiles); - // Handle the files here - // const res = await uploadFiles(acceptedFiles, {}); if (acceptedFiles.length > 1) { const res = await uploadFiles(acceptedFiles, {}); console.log('uploadFiles res', res); diff --git a/packages/resources/src/pages/upload/utils/upload-chunk.ts b/packages/resources/src/pages/upload/utils/upload-chunk.ts index 2ea182e..78da689 100644 --- a/packages/resources/src/pages/upload/utils/upload-chunk.ts +++ b/packages/resources/src/pages/upload/utils/upload-chunk.ts @@ -8,9 +8,11 @@ type ConvertOpts = { appKey?: string; version?: string; username?: string; + directory?: string; }; export const uploadFileChunked = async (file: File, opts: ConvertOpts) => { + const { directory } = opts; return new Promise(async (resolve, reject) => { const token = localStorage.getItem('token'); if (!token) { @@ -22,7 +24,8 @@ export const uploadFileChunked = async (file: File, opts: ConvertOpts) => { const filename = file.name; const load = toast.loading(`${filename} 上传中...`); NProgress.start(); - const eventSource = new EventSource('http://49.232.155.236:11015/api/s1/events?taskId=' + taskId); + // const eventSource = new EventSource('http://49.232.155.236:11015/api/s1/events?taskId=' + taskId); + const eventSource = new EventSource('/api/s1/events?taskId=' + taskId); // 监听服务器推送的进度更新 eventSource.onmessage = function (event) { console.log('Progress update:', event.data); @@ -60,7 +63,9 @@ export const uploadFileChunked = async (file: File, opts: ConvertOpts) => { formData.append('file', chunk, file.name); formData.append('chunkIndex', currentChunk.toString()); formData.append('totalChunks', totalChunks.toString()); - + if (directory) { + formData.append('directory', directory); + } try { const res = await fetch('/api/s1/resources/upload/chunk?taskId=' + taskId, { method: 'POST', @@ -70,19 +75,17 @@ export const uploadFileChunked = async (file: File, opts: ConvertOpts) => { Authorization: `Bearer ${token}`, }, }).then((response) => response.json()); - - console.log(`Chunk ${currentChunk + 1}/${totalChunks} uploaded`, res); + fetch('/api/s1/events/close?taskId=' + taskId); + eventSource.close(); + NProgress.done(); + toast.dismiss(load); + resolve(res); + // console.log(`Chunk ${currentChunk + 1}/${totalChunks} uploaded`, res); } catch (error) { console.log('Error uploading chunk', error); reject(error); return; } } - - fetch('/api/s1/events/close?taskId=' + taskId); - eventSource.close(); - NProgress.done(); - toast.dismiss(load); - resolve({ message: 'All chunks uploaded successfully' }); }); }; diff --git a/packages/resources/src/pages/upload/utils/upload.ts b/packages/resources/src/pages/upload/utils/upload.ts index 89595ae..595d7fb 100644 --- a/packages/resources/src/pages/upload/utils/upload.ts +++ b/packages/resources/src/pages/upload/utils/upload.ts @@ -8,13 +8,18 @@ type ConvertOpts = { appKey?: string; version?: string; username?: string; + directory?: string; }; export const uploadFiles = async (files: File[], opts: ConvertOpts) => { + const { directory } = opts; return new Promise((resolve, reject) => { const formData = new FormData(); for (let i = 0; i < files.length; i++) { formData.append('file', files[i], files[i].name); } + if (directory) { + formData.append('directory', directory); + } const token = localStorage.getItem('token'); if (!token) { toastLogin(); @@ -23,8 +28,8 @@ export const uploadFiles = async (files: File[], opts: ConvertOpts) => { const taskId = nanoid(); // 49.232.155.236:11015 // const eventSource = new EventSource('https://kevisual.silkyai.cn/api/s1/events?taskId=' + taskId); - // const eventSource = new EventSource('/api/s1/events?taskId=' + taskId); - const eventSource = new EventSource('http://49.232.155.236:11015/api/s1/events?taskId=' + taskId); + const eventSource = new EventSource('/api/s1/events?taskId=' + taskId); + // const eventSource = new EventSource('http://49.232.155.236:11015/api/s1/events?taskId=' + taskId); const load = toast.loading('上传中...'); NProgress.start(); eventSource.onopen = async function (event) { @@ -63,7 +68,6 @@ export const uploadFiles = async (files: File[], opts: ConvertOpts) => { if (progress) { NProgress.set(progress); } - }; eventSource.onerror = function (event) { console.log('eventSource.onerror', event);