temp

2025-03-18 16:14:40 +08:00
parent 25def8c245
commit aa1cee7c9f
50 changed files with 916 additions and 502 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { ConfigProvider } from 'antd';
 import { App as ContainerApp } from './pages/container';
 import { App as MapApp } from './pages/map';
 import { App as UserApp } from './pages/user';
@@ -8,30 +7,72 @@ import { App as FileApp } from './pages/file';
 import { App as OrgApp } from './pages/org';
 import { basename } from './modules/basename';
 import { Redirect } from './modules/Redirect';
+import { CustomThemeProvider } from '@kevisual/center-components/theme/index.tsx';
+import { useTheme } from '@mui/material/styles';
+import { ToastContainer } from 'react-toastify';
+// import 'react-toastify/dist/ReactToastify.css';

+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import zhCN from 'antd/locale/zh_CN';
+import ConfigProvider from 'antd/es/config-provider';
+
+const AntProvider = ({ children }: { children: React.ReactNode }) => {
+  const theme = useTheme();
+  const primaryColor = theme.palette.primary.main;
+  const secondaryColor = theme.palette.secondary.main;
+  return (
+    <ConfigProvider
+      locale={zhCN}
+      theme={{
+        token: {
+          colorPrimary: primaryColor,
+          colorPrimaryHover: secondaryColor,
+          colorPrimaryActive: primaryColor,
+          borderRadius: 4,
+          colorBorder: primaryColor,
+          // colorText: primaryColor,
+          colorIcon: primaryColor,
+          colorIconHover: secondaryColor,
+          colorInfoHover: secondaryColor,
+        },
+        components: {
+          DatePicker: {
+            colorPrimary: primaryColor,
+            colorPrimaryHover: secondaryColor,
+            colorPrimaryActive: primaryColor,
+          },
+        },
+      }}>
+      {children}
+    </ConfigProvider>
+  );
+};
 export const App = () => {
  return (
-    <div className='w-full h-full'>
-      <ConfigProvider
-        theme={{
-          token: {},
-        }}>
-        <Router basename={basename}>
-          <Routes>
-            <Route path='/' element={<Redirect to='/container/' />} />
-            <Route path='/container/*' element={<ContainerApp />} />
-            <Route path='/map/*' element={<MapApp />} />
-            <Route path='/user/*' element={<UserApp />} />
-            <Route path='/org/*' element={<OrgApp />} />
-            <Route path='/app/*' element={<UserAppApp />} />
-            <Route path='/file/*' element={<FileApp />} />
+    <div>
+      <CustomThemeProvider >
+        <AntProvider> 
+          <div className='w-full h-full'>
+            <Router basename={basename}>
+              <Routes>
+                <Route path='/' element={<Redirect to='/container/' />} />
+                <Route path='/container/*' element={<ContainerApp />} />
+                <Route path='/map/*' element={<MapApp />} />
+                <Route path='/user/*' element={<UserApp />} />
+                <Route path='/org/*' element={<OrgApp />} />
+                <Route path='/app/*' element={<UserAppApp />} />
+                <Route path='/file/*' element={<FileApp />} />

-            <Route path='/404' element={<div>404</div>} />
-            <Route path='*' element={<div>404</div>} />
-          </Routes>
-        </Router>
-      </ConfigProvider>
-      <div id='for-modal'></div>
+                <Route path='/404' element={<div>404</div>} />
+                <Route path='*' element={<div>404</div>} />
+              </Routes>
+            </Router>
+          </div>
+        </AntProvider>
+        <div id='for-modal'></div>
+        <ToastContainer />
+      </CustomThemeProvider>
    </div>
  );
 };
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -1,33 +1 @@
@import './fonts/font.css';
-
-.scrollbar {
-  overflow: auto;
-  /* 整个滚动条 */
-  &::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-
-  /* 滚动条有滑块的轨道部分 */
-  &::-webkit-scrollbar-track-piece {
-    background-color: transparent;
-    border-radius: 1px;
-  }
-
-  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
-  &::-webkit-scrollbar-thumb {
-    cursor: pointer;
-    background-color: #c1c1c1;
-    border-radius: 5px;
-  }
-
-  /* 滚动条滑块hover */
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: #999999;
-  }
-
-  /* 同时有垂直和水平滚动条时交汇的部分 */
-  &::-webkit-scrollbar-corner {
-    display: block; /* 修复交汇时出现的白块 */
-  }
-}
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,64 +1,124 @@
-@config "../tailwind.config.js";
-@import "tailwindcss";
+@import 'tailwindcss';
+@import './assets/styles.css';
+@import './index.css';

-@layer base {
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-    font-size: 16px;
-    font-family: 'Montserrat', sans-serif;
-  }
-  h1 {
-    @apply text-2xl font-bold;
-  }
-  h2 {
-    @apply text-xl font-bold;
-  }
-  h3 {
-    @apply text-lg font-bold;
+@theme {
+  --color-primary: white;
+  --color-secondary: #14171a;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+h1 {
+  @apply text-2xl font-bold;
+}
+h2 {
+  @apply text-xl font-bold;
+}
+h3 {
+  @apply text-lg font-bold;
+}
+@utility card {
+  @apply bg-white shadow-md rounded-lg p-4;
+}
+@utility card-title {
+  @apply text-lg font-bold;
+}
+@utility card-subtitle {
+  @apply text-sm text-gray-500;
+}
+@utility card-description {
+  @apply text-gray-700 break-words;
+}
+@utility card-code {
+  @apply bg-gray-100 p-2;
+}
+@utility card-body {
+  @apply text-gray-700;
+}
+@utility card-key {
+  @apply text-xs text-gray-400;
+}
+@utility card-footer {
+  @apply text-sm text-gray-500;
+}
+@utility btn {
+  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded-sm;
+}
+
+@utility layout-menu {
+  @apply bg-gray-900 p-2 text-white flex justify-between h-12;
+  -webkit-app-region: drag;
+}
+@utility no-drag {
+  -webkit-app-region: no-drag;
+}
+@utility bg-custom-blue {
+  background-color: #3490dc;
+}
+
+@utility scrollbar-hidden {
+  &::-webkit-scrollbar {
+    display: none;
  }
 }

-@layer components {
-  .btn {
-    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded-sm;
-  }
-  .card {
-    @apply bg-white shadow-md rounded-lg p-4;
-    .card-title {
-      @apply text-lg font-bold;
-    }
-    .card-subtitle {
-      @apply text-sm text-gray-500;
-    }
-    .card-description {
-      @apply text-gray-700 break-words;
-    }
-    .card-code {
-      @apply bg-gray-100 p-2;
-    }
-    .card-body {
-      @apply text-gray-700;
-    }
-    .card-key {
-      @apply text-xs text-gray-400;
-    }
-    .card-footer {
-      @apply text-sm text-gray-500;
-    }
-  }
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
 }

-@layer utilities {
-  .layout-menu {
-    @apply bg-gray-900 p-2 text-white flex justify-between h-12;
-    -webkit-app-region: drag;
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
  }
-  .no-drag {
-    -webkit-app-region: no-drag; 
+
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
  }
-  .bg-custom-blue {
-    background-color: #3490dc;
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: #c1c1c1;
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #999999;
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block; /* 修复交汇时出现的白块 */
  }
 }
--- a/src/index.css
+++ b/src/index.css
@@ -44,4 +44,4 @@ body {
 }
 .kv-container.active {
  background: #ebe9e987 !important;
-}
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,5 @@
 import { createRoot } from 'react-dom/client';
 import { App } from './App.tsx';
 import './globals.css';
-import './index.css';
-import './assets/styles.css';

 createRoot(document.getElementById('root')!).render(<App />);
--- a/src/modules/query.ts
+++ b/src/modules/query.ts
@@ -25,7 +25,7 @@ query.afterResponse = async (res) => {
 };
 export const request = query.post;

-export const ws = query.qws.ws;
+export const ws = query.qws?.ws || new WebSocket(query.qws?.url);
 type Store = {
  connected: boolean;
  setConnected: (connected: boolean) => void;
--- a/src/pages/container/store/index.ts
+++ b/src/pages/container/store/index.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { query } from '@/modules';
-import { message } from 'antd';
+import { message } from '@/modules/message';
 type ContainerStore = {
  showEdit: boolean;
  setShowEdit: (showEdit: boolean) => void;
--- a/src/pages/file/edit/List.tsx
+++ b/src/pages/file/edit/List.tsx
@@ -1,11 +1,16 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useFileStore } from '../store';
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import path from 'path-browserify';
 import prettyBytes from 'pretty-bytes';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
-import { FileOutlined, FolderOutlined } from '@ant-design/icons';
+import FileOutlined from '@ant-design/icons/FileOutlined';
+import FolderOutlined from '@ant-design/icons/FolderOutlined';
+import { IconButton } from '@kevisual/center-components/button/index.tsx';
+import { render, unmount } from '@kevisual/resources/pages/Bootstrap.tsx';
+import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
+import { Tooltip } from '@mui/material';
 export const CardPath = ({ children }: any) => {
  const userAppStore = useFileStore(
    useShallow((state) => {
@@ -58,6 +63,8 @@ export const CardPath = ({ children }: any) => {
  );
 };
 export const List = () => {
+  const [tab, setTab] = useState<'folder' | 'upload'>('folder');
+  const uploadRef = useRef<HTMLDivElement>(null);
  const userAppStore = useFileStore(
    useShallow((state) => {
      return {
@@ -77,9 +84,9 @@ export const List = () => {
    userAppStore.setPath(prefix);
    userAppStore.getList();
  };
-  return (
-    <div>
-      <div className='p-4'>
+  const allFolderApp = useMemo(() => {
+    return (
+      <>
        <CardPath>
          <div className='flex flex-col'>
            {userAppStore.list.map((item, index) => {
@@ -122,6 +129,37 @@ export const List = () => {
        <div>
          <pre>{!isObjectNull(userAppStore.file) && JSON.stringify(userAppStore.file, null, 2)}</pre>
        </div>
+      </>
+    );
+  }, [userAppStore.list, userAppStore.path]);
+
+  useEffect(() => {
+    if (tab === 'upload') {
+      render(uploadRef.current!);
+    } else {
+      uploadRef.current && unmount(uploadRef.current!);
+    }
+    console.log('unmount', tab, uploadRef.current);
+  }, [tab]);
+  return (
+    <div className='flex w-full h-full'>
+      <div className='flex gap-2 border border-gray-200 shadow-md p-2'>
+        <div className='flex flex-col gap-2'>
+          <Tooltip title='所有的资源文件' placement='right'>
+            <IconButton sx={{ py: 1 }} color={tab !== 'folder' ? 'primary' : 'secondary'} onClick={() => setTab('folder')}>
+              <FolderOutlined />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title='上传资源文件管理' placement='right'>
+            <IconButton sx={{ py: 1 }} color={tab !== 'upload' ? 'primary' : 'secondary'} onClick={() => setTab('upload')}>
+              <UploadOutlined />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </div>
+      <div className='grow' style={{ height: 'calc(100% - 0px)', overflow: 'hidden' }}>
+        {tab === 'folder' && <div className='p-4 w-full h-full'>{allFolderApp}</div>}
+        {tab === 'upload' && <div className='w-full h-full' ref={uploadRef}></div>}
      </div>
    </div>
  );