temp

2025-03-18 16:14:40 +08:00
parent 25def8c245
commit aa1cee7c9f
50 changed files with 916 additions and 502 deletions
--- a/packages/resources/package.json
+++ b/packages/resources/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "resources",
+  "name": "@kevisual/resources",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
@@ -42,5 +42,9 @@
  },
  "devDependencies": {
    "@kevisual/types": "^0.0.6"
+  },
+  "exports": {
+    ".": "./src/index.tsx",
+    "./*": "./src/*"
  }
 }
--- a/packages/resources/src/main.ts
+++ b/packages/resources/src/main.ts
@@ -1,4 +1,4 @@
-import { bootstrap } from './pages/Bootstrap';
+import { render } from './pages/Bootstrap';

-bootstrap('#ai-root');
+render('#ai-root');

--- a/packages/resources/src/modules/query.ts
+++ b/packages/resources/src/modules/query.ts
@@ -1,4 +1,4 @@
-import { toastLogin } from '@/pages/message/ToastLogin';
+import { toastLogin } from '@kevisual/resources/pages/message/ToastLogin';
 import { QueryClient } from '@kevisual/query';

 export const query = new QueryClient();
--- a/packages/resources/src/pages/App.tsx
+++ b/packages/resources/src/pages/App.tsx
@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { theme } from '@kevisual/center-components/theme';
+import { useEffect, useMemo } from 'react';
+import { theme } from '@kevisual/center-components/theme/index.tsx';
 import { ThemeProvider } from '@mui/material/styles';
 import { Left } from './layout/Left';
 import { Main } from './main/index';
@@ -74,7 +74,17 @@ export const InitProvider = ({ children }: { children: React.ReactNode }) => {
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100vh', color: 'red' }}>
        <h2>出现问题</h2>
        <p>加载设置时遇到错误。请重试。</p>
-        <button onClick={handleRetry} style={{ marginTop: '20px', padding: '10px 20px', backgroundColor: '#f44336', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
+        <button
+          onClick={handleRetry}
+          style={{
+            marginTop: '20px',
+            padding: '10px 20px',
+            backgroundColor: '#f44336',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}>
          重试
        </button>
      </div>
@@ -82,15 +92,37 @@ export const InitProvider = ({ children }: { children: React.ReactNode }) => {
  }
  return <>{children}</>;
 };
-export const App = () => {
+
+type AppProvider = {
+  key: string;
+  use: boolean;
+};
+export type AppProps = {
+  providers?: AppProvider[];
+  noProvider?: boolean;
+  /**
+   * 是否是单个应用
+   * 默认是单个应用模块。
+   */
+  isSingleApp?: boolean;
+};
+export const App = ({ providers, noProvider, isSingleApp = true }: AppProps) => {
+  const children = useMemo(() => {
+    return (
+      <InitProvider>
+        <Left>
+          <Main />
+        </Left>
+      </InitProvider>
+    );
+  }, []);
+  if (noProvider) {
+    return <>{children}</>;
+  }
  return (
    <ThemeProvider theme={theme}>
      <AntdConfigProvider>
-        <InitProvider>
-          <Left>
-            <Main />
-          </Left>
-        </InitProvider>
+        {children}
        <ToastContainer />
      </AntdConfigProvider>
    </ThemeProvider>
--- a/packages/resources/src/pages/Bootstrap.tsx
+++ b/packages/resources/src/pages/Bootstrap.tsx
@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import { App, AppProps } from './App';
 import React from 'react';

 export class ReactRenderer {
@@ -40,13 +40,27 @@ export class ReactRenderer {
 }

 export default ReactRenderer;
-
-export const bootstrap = (el: HTMLElement | string) => {
+export const randomId = () => {
+  return Math.random().toString(36).substring(2, 15);
+};
+export const render = (el: HTMLElement | string, props?: AppProps) => {
  // createRoot(document.getElementById('ai-root')!).render(<App />);
  const root = typeof el === 'string' ? document.querySelector(el) : el;
-  if (root) {
+  if (!root) {
+    console.error('root not found');
+    return;
+  }
+  const hasResourceApp = window.context?.resourcesApp;
+  if (hasResourceApp) {
+    const render = hasResourceApp as ReactRenderer;
+    render.updateProps({
+      props: { t: randomId(), ...props },
+    });
+    root.innerHTML = '';
+    root.appendChild(render.element);
+  } else {
    const renderer = new ReactRenderer(App, {
-      props: {},
+      props: { ...props },
      className: 'resources-root w-full h-full',
    });
    if (window.context) {
@@ -59,3 +73,17 @@ export const bootstrap = (el: HTMLElement | string) => {
    root.appendChild(renderer.element);
  }
 };
+
+export const unmount = (el: HTMLElement | string) => {
+  const root = typeof el === 'string' ? document.querySelector(el) : el;
+  if (!root) {
+    console.error('root not found');
+    return;
+  }
+  const hasResourceApp = window.context?.resourcesApp;
+  if (hasResourceApp) {
+    const render = hasResourceApp as ReactRenderer;
+    render.destroy();
+    window.context.resourcesApp = null;
+  }
+};
--- a/packages/resources/src/pages/file/draw/FileDrawer.tsx
+++ b/packages/resources/src/pages/file/draw/FileDrawer.tsx
@@ -1,5 +1,5 @@
-import { useResourceStore } from '@/pages/store/resource';
-import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useResourceStore } from '@kevisual/resources/pages/store/resource';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
 import { Box, Divider, Drawer, Tab, Tabs } from '@mui/material';
 import { useMemo, useState } from 'react';
 import { QuickValues, QuickTabs } from './QuickTabs';
--- a/packages/resources/src/pages/file/draw/modules/ContextForm.tsx
+++ b/packages/resources/src/pages/file/draw/modules/ContextForm.tsx
@@ -1,4 +1,4 @@
-import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
 import { Box, Typography } from '@mui/material';
 import prettyBytes from 'pretty-bytes';
 import dayjs from 'dayjs';
--- a/packages/resources/src/pages/file/draw/modules/MetaForm.tsx
+++ b/packages/resources/src/pages/file/draw/modules/MetaForm.tsx
@@ -1,4 +1,4 @@
-import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
 import { FormControlLabel, Box, TextField, Button, IconButton, ButtonGroup, Tooltip, Select, MenuItem, Typography, FormGroup } from '@mui/material';
 import { Info, Plus, Save, Share, Shuffle, Trash } from 'lucide-react';
 import { useState, useEffect, useMemo } from 'react';
--- a/packages/resources/src/pages/file/draw/quick/QuickPreview.tsx
+++ b/packages/resources/src/pages/file/draw/quick/QuickPreview.tsx
@@ -1,5 +1,5 @@
-import { useResourceFileStore } from '@/pages/store/resource-file';
-import { useSettingsStore } from '@/pages/store/settings';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
+import { useSettingsStore } from '@kevisual/resources/pages/store/settings';
 import { Button, Tooltip, useTheme } from '@mui/material';
 import { useShallow } from 'zustand/shallow';
 import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
--- a/packages/resources/src/pages/file/draw/quick/index.tsx
+++ b/packages/resources/src/pages/file/draw/quick/index.tsx
@@ -1,4 +1,4 @@
-import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
 import { useShallow } from 'zustand/shallow';
 import { QuickPreview } from './QuickPreview';
 import { useMemo } from 'react';
--- a/packages/resources/src/pages/file/list/FileCard.tsx
+++ b/packages/resources/src/pages/file/list/FileCard.tsx
@@ -1,9 +1,9 @@
-import { useResourceStore } from '@/pages/store/resource';
+import { useResourceStore } from '@kevisual/resources/pages/store/resource';
 import { Card, CardContent, Typography } from '@mui/material';
 import { getIcon } from '../FileIcon';
 import { amber } from '@mui/material/colors';
 import clsx from 'clsx';
-import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
 export const FileCard = () => {
  const { list, prefix, onOpenPrefix } = useResourceStore();
  const { setPrefix, setOpenDrawer } = useResourceFileStore();
--- a/packages/resources/src/pages/file/list/FileTable.tsx
+++ b/packages/resources/src/pages/file/list/FileTable.tsx
@@ -1,11 +1,11 @@
-import { useResourceStore } from '@/pages/store/resource';
+import { useResourceStore } from '@kevisual/resources/pages/store/resource';
 import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import prettyBytes from 'pretty-bytes';
 import dayjs from 'dayjs';
 import { getIcon } from '../FileIcon';
 import { Download, Trash } from 'lucide-react';
 import clsx from 'clsx';
-import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';

 export const FileTable = () => {
  const { list, prefix, download, onOpenPrefix, deleteFile } = useResourceStore();
--- a/packages/resources/src/pages/file/modules/PrefixRedirect.tsx
+++ b/packages/resources/src/pages/file/modules/PrefixRedirect.tsx
@@ -1,4 +1,4 @@
-import { useResourceStore } from '@/pages/store/resource';
+import { useResourceStore } from '@kevisual/resources/pages/store/resource';
 import { Breadcrumbs, Typography } from '@mui/material';
 import clsx from 'clsx';
 import { useMemo } from 'react';
--- a/packages/resources/src/pages/main.tsx
+++ b/packages/resources/src/pages/main.tsx
@@ -1,3 +1,3 @@
-import { bootstrap } from './Bootstrap';
+import { render } from './Bootstrap';

-bootstrap('#ai-root');
+render('#ai-root');
--- a/packages/resources/src/pages/settings/index.tsx
+++ b/packages/resources/src/pages/settings/index.tsx
@@ -1,4 +1,4 @@
-import { useSettingsStore, Settings as SettingsType } from '@/pages/store/settings';
+import { useSettingsStore, Settings as SettingsType } from '@kevisual/resources/pages/store/settings';
 import { Box, Typography, TextField, useTheme, Button } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { Settings as SettingsIcon } from 'lucide-react';
--- a/packages/resources/src/pages/store/resource-file.ts
+++ b/packages/resources/src/pages/store/resource-file.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { Resource } from './resource';
-import { query } from '@/modules/query';
+import { query } from '@kevisual/resources/modules/query';
 import { toast } from 'react-toastify';

 interface ResourceFileStore {
--- a/packages/resources/src/pages/store/resource.ts
+++ b/packages/resources/src/pages/store/resource.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { query } from '@/modules/query';
+import { query } from '@kevisual/resources/modules/query';
 import { sortBy } from 'lodash-es';
 import { toast } from 'react-toastify';
 import { useSettingsStore } from './settings';
--- a/packages/resources/src/pages/store/settings.ts
+++ b/packages/resources/src/pages/store/settings.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { query } from '@/modules/query';
+import { query } from '@kevisual/resources/modules/query';
 import { toast } from 'react-toastify';

 export type Settings = {
--- a/packages/resources/src/pages/store/statistic.ts
+++ b/packages/resources/src/pages/store/statistic.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { query } from '@/modules/query';
+import { query } from '@kevisual/resources/modules/query';

 type Statistic = {
  list: any[];
--- a/packages/resources/src/pages/upload/utils/upload-chunk.ts
+++ b/packages/resources/src/pages/upload/utils/upload-chunk.ts
@@ -2,7 +2,7 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import { toast } from 'react-toastify';
 import { nanoid } from 'nanoid';
-import { toastLogin } from '@/pages/message/ToastLogin';
+import { toastLogin } from '@kevisual/resources/pages/message/ToastLogin';

 type ConvertOpts = {
  appKey?: string;
--- a/packages/resources/src/pages/upload/utils/upload.ts
+++ b/packages/resources/src/pages/upload/utils/upload.ts
@@ -2,7 +2,7 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import { toast } from 'react-toastify';
 import { nanoid } from 'nanoid';
-import { toastLogin } from '@/pages/message/ToastLogin';
+import { toastLogin } from '@kevisual/resources/pages/message/ToastLogin';

 type ConvertOpts = {
  appKey?: string;
--- a/packages/resources/tsconfig.json
+++ b/packages/resources/tsconfig.json
@@ -22,7 +22,7 @@
      "node_modules/@kevisual/types",
    ],
    "paths": {
-      "@/*": [
+      "@kevisual/resources/*": [
        "src/*"
      ]
    },
--- a/packages/resources/vite.config.mjs
+++ b/packages/resources/vite.config.mjs
@@ -42,7 +42,7 @@ export default defineConfig({
  },
  resolve: {
    alias: {
-      '@': path.resolve(__dirname, './src'),
+      '@kevisual/resources': path.resolve(__dirname, './src'),
      // 'react/jsx-dev-runtime': 'https://cdn.jsdelivr.net/npm/react/jsx-dev-runtime/+esm',
      // 'react/jsx-runtime': 'https://cdn.jsdelivr.net/npm/react/jsx-runtime/+esm',
      // 'react/jsx-runtime': path.resolve(__dirname, './node_modules/react/jsx-runtime'),