temp

.dev.env

@@ -0,0 +1,5 @@
+## 开发环境
+BACKEND_URL=https://kevisual.silkyai.cn
+#BACKEND_URL=https://localhost:4005
+
+## 生产环境

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kevisual/center",
   "private": true,
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,39 +10,42 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "prepub": "envision switch root",
-    "pub": "envision deploy ./dist -k center -v 0.0.8 -u -o root"
+    "pub": "envision deploy ./dist -k center -v 0.0.9 -u -o root"
   },
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@icon-park/react": "^1.4.2",
+    "@kevisual/center-components": "workspace:*",
     "@kevisual/codemirror": "^0.0.2",
     "@kevisual/container": "1.0.0",
     "@kevisual/query": "^0.0.8",
     "@kevisual/system-ui": "^0.0.3",
     "@kevisual/ui": "^0.0.2",
     "@monaco-editor/react": "^4.7.0",
-    "@mui/material": "^6.4.7",
+    "@mui/material": "^6.4.8",
-    "@tailwindcss/vite": "^4.0.12",
+    "@tailwindcss/vite": "^4.0.14",
     "@uiw/react-textarea-code-editor": "^3.1.0",
     "@xyflow/react": "^12.4.4",
-    "antd": "^5.24.3",
+    "antd": "^5.24.4",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "d3": "^7.9.0",
+    "dayjs": "^1.11.13",
     "eventemitter3": "^5.0.1",
     "immer": "^10.1.1",
     "lodash-es": "^4.17.21",
     "marked": "^15.0.7",
-    "nanoid": "^5.1.3",
+    "nanoid": "^5.1.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-resizable-panels": "^2.1.7",
     "react-router": "^7.3.0",
     "react-router-dom": "^7.3.0",
     "react-toastify": "^11.0.5",
+    "@kevisual/resources": "workspace:*",
     "vite-plugin-tsconfig-paths": "^1.4.1",
     "zustand": "^5.0.3"
   },
@@ -54,8 +57,9 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.13.10",
     "@types/path-browserify": "^1.0.3",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.0.11",
     "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.21",
     "cross-env": "^7.0.3",
@@ -68,10 +72,10 @@
     "pretty-bytes": "^6.1.1",
     "react-is": "19.0.0",
     "tailwind-merge": "^3.0.2",
-    "tailwindcss": "^4.0.12",
+    "tailwindcss": "^4.0.14",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",
-    "vite": "^6.2.1"
+    "vite": "^6.2.2"
   }
 }

packages/components/package.json

@@ -21,8 +21,7 @@
   },
   "exports": {
     ".": "./src/index.tsx",
-    "./theme": "./src/theme/index.tsx",
+    "./*": "./src/*"
-    "./button": "./src/button/index.tsx"
   },
   "devDependencies": {
     "clsx": "^2.1.1",

packages/components/src/button/index.tsx

@@ -3,3 +3,12 @@ import MuiButton, { ButtonProps } from '@mui/material/Button';
 export const Button = (props: ButtonProps) => {
   return <MuiButton {...props} />;
 };
+
+export const IconButton = (props: ButtonProps) => {
+  const { variant = 'contained', color = 'primary', sx, children, ...rest } = props;
+  return (
+    <MuiButton variant={variant} color={color} {...rest} sx={{ color: 'white', minWidth: '32px', padding: '4px', ...sx }}>
+      {children}
+    </MuiButton>
+  );
+};

packages/components/src/theme/index.tsx

@@ -1,6 +1,7 @@
 import { createTheme, Shadows, ThemeOptions } from '@mui/material/styles';
 import { useTheme as useMuiTheme, Theme } from '@mui/material/styles';
 import { amber, red } from '@mui/material/colors';
+import { ThemeProvider } from '@mui/material/styles';
 const generateShadows = (color: string): Shadows => {
   return [
     'none',
@@ -139,6 +140,20 @@ export const themeOptions: ThemeOptions = {
  */
 export const theme = createTheme(themeOptions);
 
+/**
+ *
+ * @returns
+ */
 export const useTheme = () => {
   return useMuiTheme<Theme>();
 };
+
+/**
+ * 自定义主题设置。
+ * @param param0 
+ * @returns 
+ */
+export const CustomThemeProvider = ({ children, themeOptions: customThemeOptions }: { children: React.ReactNode; themeOptions?: ThemeOptions }) => {
+  const theme = createTheme(customThemeOptions || themeOptions);
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};

packages/components/src/theme/wind-theme.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+
+@theme {
+  --light-color-primary: oklch(0.72 0.11 178);
+  --light-color-secondary: oklch(0.72 0.11 178);
+}

packages/components/tsconfig.json

@@ -21,7 +21,11 @@
       "node_modules/@types",
       "node_modules/@kevisual/types",
     ],
-    "paths": {},
+    "paths": {
+      "@kevisual/center-components/*": [
+        "src/*"
+      ]
+    },
     /* Linting */
     "strict": true,
     "noImplicitAny": false,

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/*"
   }
 }

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');
 

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();

packages/resources/src/pages/App.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
-import { theme } from '@kevisual/center-components/theme';
+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 (
-    <ThemeProvider theme={theme}>
-      <AntdConfigProvider>
       <InitProvider>
         <Left>
           <Main />
         </Left>
       </InitProvider>
+    );
+  }, []);
+  if (noProvider) {
+    return <>{children}</>;
+  }
+  return (
+    <ThemeProvider theme={theme}>
+      <AntdConfigProvider>
+        {children}
         <ToastContainer />
       </AntdConfigProvider>
     </ThemeProvider>

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 randomId = () => {
-export const bootstrap = (el: HTMLElement | string) => {
+  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;
+  }
+};

packages/resources/src/pages/file/draw/FileDrawer.tsx

@@ -1,5 +1,5 @@
-import { useResourceStore } from '@/pages/store/resource';
+import { useResourceStore } from '@kevisual/resources/pages/store/resource';
-import { useResourceFileStore } from '@/pages/store/resource-file';
+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';

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';

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';

packages/resources/src/pages/file/draw/quick/QuickPreview.tsx

@@ -1,5 +1,5 @@
-import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
-import { useSettingsStore } from '@/pages/store/settings';
+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';

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';

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();

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();

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';

packages/resources/src/pages/main.tsx

@@ -1,3 +1,3 @@
-import { bootstrap } from './Bootstrap';
+import { render } from './Bootstrap';
 
-bootstrap('#ai-root');
+render('#ai-root');

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';

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 {

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';

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 = {

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[];

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;

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;

packages/resources/tsconfig.json

@@ -22,7 +22,7 @@
       "node_modules/@kevisual/types",
     ],
     "paths": {
-      "@/*": [
+      "@kevisual/resources/*": [
         "src/*"
       ]
     },

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'),

packages/webshell/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+tsconfig.app.tsbuildinfo
+tsconfig.node.tsbuildinfo

packages/webshell/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AI Apps</title>
+<link rel="stylesheet" href="./src/assets/index.css">
+<style>
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-size: 16px;
+  }
+
+  #ai-root {
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<!-- <script src="/system/lib/app.js"></script> -->
+<script src="https://kevisual.xiongxiao.me/system/lib/app.js"></script>
+</head>
+
+<body>
+  <div id="ai-root"></div>
+  <!-- <div id="ai-bot-root"></div> -->
+</body>
+<script src="./src/main.ts" type="module"></script>
+
+</html>

packages/webshell/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "webshell",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me>",
+  "license": "MIT",
+  "type": "module"
+}

packages/webshell/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "baseUrl": "./",
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@kevisual/types",
+    ],
+    "paths": {
+      "@kevisual/resources/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+  ]
+}

packages/webshell/vite.config.mjs

@@ -0,0 +1,92 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import tailwindcss from '@tailwindcss/vite';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+
+const isDev = process.env.NODE_ENV === 'development';
+const plugins = [basicSsl()];
+// const plugins = [];
+plugins.push(tailwindcss());
+let proxy = {};
+if (true) {
+  proxy = {
+    '/api': {
+      target: 'https://kevisual.silkyai.cn',
+      changeOrigin: true,
+      ws: true,
+      cookieDomainRewrite: 'localhost',
+      rewrite: (path) => path.replace(/^\/api/, '/api'),
+    },
+    '/api/router': {
+      target: 'wss://kevisual.silkyai.cn',
+      changeOrigin: true,
+      ws: true,
+      rewriteWsOrigin: true,
+      rewrite: (path) => path.replace(/^\/api/, '/api'),
+    },
+    '/user/login': {
+      target: 'https://kevisual.silkyai.cn',
+      changeOrigin: true,
+      cookieDomainRewrite: 'localhost',
+      rewrite: (path) => path.replace(/^\/user/, '/user'),
+    },
+  };
+}
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), ...plugins],
+
+  css: {
+    postcss: {},
+  },
+  resolve: {
+    alias: {
+      '@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'),
+      // 'react/jsx-dev-runtime': path.resolve(__dirname, './node_modules/react/jsx-dev-runtime'),
+      // 'react-dom/client': 'https://cdn.jsdelivr.net/npm/react-dom/client/+esm',
+      // react: 'https://cdn.jsdelivr.net/npm/react@19.0.0/+esm',
+      // 'react-dom': 'https://cdn.jsdelivr.net/npm/react-dom@19.0.0/+esm',
+      
+    },
+  },
+  define: {
+    DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
+    BASE_NAME: JSON.stringify('/root/resources/'),
+  },
+  base: './',
+  // base: isDev ? '/' : '/root/resources/',
+  build: {
+    rollupOptions: {
+      // external: ['react', 'react-dom'],
+    },
+  },
+  server: {
+    port: 6022,
+    host: '0.0.0.0',
+    proxy: {
+      '/system/lib': {
+        target: 'https://kevisual.xiongxiao.me',
+        changeOrigin: true,
+      },
+      '/api': {
+        target: 'http://localhost:4005',
+        changeOrigin: true,
+        ws: true,
+        cookieDomainRewrite: 'localhost',
+        rewrite: (path) => path.replace(/^\/api/, '/api'),
+      },
+      '/api/router': {
+        target: 'ws://localhost:4005',
+        changeOrigin: true,
+        ws: true,
+        rewriteWsOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '/api'),
+      },
+      ...proxy,
+    },
+  },
+});

packages/webshell/webshell-node/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "webshell-node",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me>",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "node-pty": "^1.0.0"
+  },
+  "devDependencies": {
+    "@kevisual/types": "^0.0.6"
+  }
+}

packages/webshell/webshell-node/src/index.ts

@@ -0,0 +1,20 @@
+import os from 'node:os';
+import pty, { IPty } from 'node-pty';
+
+const shell: string = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
+console.log(shell);
+const ptyProcess: IPty = pty.spawn(shell, [], {
+  name: 'xterm-color',
+  cols: 80,
+  rows: 30,
+  cwd: process.env.HOME || '',
+  env: process.env as NodeJS.ProcessEnv,
+});
+
+ptyProcess.onData((data: string) => {
+  process.stdout.write(data);
+});
+
+ptyProcess.write('ls\r');
+ptyProcess.resize(100, 40);
+ptyProcess.write('ls\r');

plugins/flex.js

@@ -1,26 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-
-const flexCenterBaseStyles = {
-  display: 'flex',
-  'justify-content': 'center',
-  'align-items': 'center',
-};
-
-/** flex 居中 */
-const flexCenter = plugin(function ({ addUtilities }) {
-  addUtilities({
-    /** flex 居中 */
-    '.flex-row-center': flexCenterBaseStyles,
-    '.flex-col-center': { ...flexCenterBaseStyles, 'flex-direction': 'column' },
-    '.layout-menu': {},
-    '.scrollbar': {},
-    '.card': {},
-    '.card-title': {},
-    '.card-subtitle': {},
-    '.card-body': {},
-    '.card-footer': {},
-    '.card-key': {},
-  });
-});
-
-module.exports = flexCenter;

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,14 +7,53 @@ 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>
+      <CustomThemeProvider >
+        <AntProvider> 
           <div className='w-full h-full'>
-      <ConfigProvider
-        theme={{
-          token: {},
-        }}>
             <Router basename={basename}>
               <Routes>
                 <Route path='/' element={<Redirect to='/container/' />} />
@@ -30,8 +68,11 @@ export const App = () => {
                 <Route path='*' element={<div>404</div>} />
               </Routes>
             </Router>
-      </ConfigProvider>
+          </div>
+        </AntProvider>
         <div id='for-modal'></div>
+        <ToastContainer />
+      </CustomThemeProvider>
     </div>
   );
 };

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; /* 修复交汇时出现的白块 */
-  }
-}

src/globals.css

@@ -1,64 +1,124 @@
-@config "../tailwind.config.js";
+@import 'tailwindcss';
-@import "tailwindcss";
+@import './assets/styles.css';
+@import './index.css';
 
-@layer base {
+@theme {
-  html,
+  --color-primary: white;
-  body {
+  --color-secondary: #14171a;
+}
+html,
+body {
   width: 100%;
   height: 100%;
   font-size: 16px;
   font-family: 'Montserrat', sans-serif;
-  }
+}
-  h1 {
+h1 {
   @apply text-2xl font-bold;
-  }
+}
-  h2 {
+h2 {
   @apply text-xl font-bold;
-  }
-  h3 {
-    @apply text-lg font-bold;
-  }
 }
-
+h3 {
-@layer components {
+  @apply text-lg font-bold;
-  .btn {
+}
-    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded-sm;
+@utility card {
-  }
-  .card {
   @apply bg-white shadow-md rounded-lg p-4;
-    .card-title {
+}
+@utility card-title {
   @apply text-lg font-bold;
-    }
+}
-    .card-subtitle {
+@utility card-subtitle {
   @apply text-sm text-gray-500;
-    }
+}
-    .card-description {
+@utility card-description {
   @apply text-gray-700 break-words;
-    }
+}
-    .card-code {
+@utility card-code {
   @apply bg-gray-100 p-2;
-    }
+}
-    .card-body {
+@utility card-body {
   @apply text-gray-700;
-    }
+}
-    .card-key {
+@utility card-key {
   @apply text-xs text-gray-400;
-    }
+}
-    .card-footer {
+@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;
 }
 
-@layer utilities {
+@utility layout-menu {
-  .layout-menu {
   @apply bg-gray-900 p-2 text-white flex justify-between h-12;
   -webkit-app-region: drag;
-  }
+}
-  .no-drag {
+@utility no-drag {
   -webkit-app-region: no-drag;
-  }
+}
-  .bg-custom-blue {
+@utility bg-custom-blue {
   background-color: #3490dc;
+}
+
+@utility scrollbar-hidden {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* 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;
+}
+
+@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;
+  }
+
+  /* 滚动条有滑块的轨道部分 */
+  &::-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; /* 修复交汇时出现的白块 */
   }
 }

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 />);

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;

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;

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();
   };
+  const allFolderApp = useMemo(() => {
     return (
-    <div>
+      <>
-      <div className='p-4'>
         <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>
   );

tailwind.config.js

@@ -1,43 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ['class'],
-  mod: 'jit',
-  content: ['./src/**/*.{ts,tsx}', './node_modules/@abearxiong/flows/**/*.{ts,tsx}', './src/**/*.css'],
-  plugins: [
-    require('@tailwindcss/aspect-ratio'), //
-    require('@tailwindcss/typography'),
-    require('tailwindcss-animate'),
-    require('./plugins/flex'),
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
-        rob: ['Roboto', 'sans-serif'],
-        int: ['Inter', 'sans-serif'],
-        orb: ['Orbitron', 'sans-serif'],
-        din: ['DIN', 'sans-serif'],
-      },
-    },
-    screen: {
-      sm: '640px',
-      // => @media (min-width: 640px) { ... }
-
-      md: '768px',
-      // => @media (min-width: 768px) { ... }
-
-      lg: '1024px',
-      // => @media (min-width: 1024px) { ... }
-
-      xl: '1280px',
-      // => @media (min-width: 1280px) { ... }
-
-      '2xl': '1536px',
-      // => @media (min-width: 1536px) { ... }
-      '3xl': '1920px',
-      // => @media (min-width: 1920) { ... }
-      '4xl': '2560px',
-      // => @media (min-width: 2560) { ... }
-    },
-  },
-};

vite.config.ts

@@ -2,9 +2,9 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import tailwindcss from '@tailwindcss/vite';
+import basicSsl from '@vitejs/plugin-basic-ssl';
 
 const isDev = process.env.NODE_ENV === 'development';
-const isKV = process.env.VITE_USE_KV === 'true'; // use kevisual service as backend
 const unamiPlugin = {
   name: 'html-transform',
   transformIndexHtml(html: string) {
@@ -14,30 +14,38 @@ const unamiPlugin = {
     );
   },
 };
-const plugins = [];
+const plugins: any[] = [basicSsl()];
 if (!isDev) {
   plugins.push(unamiPlugin);
 }
+
 plugins.push(tailwindcss());
+const devBackend = 'https://kevisual.silkyai.cn';
+const meBackend = 'https://kevisual.xiongxiao.me';
+// const backend = isDev ? devBackend : meBackend;
+const backendWss =  devBackend.replace(/^https:/, 'wss:');
+const backend = devBackend;
 let proxy = {};
-if (isKV) {
+if (true) {
   proxy = {
     '/api': {
-      target: 'https://kevisual.xiongxiao.me',
+      target: backend,
       changeOrigin: true,
+      ws: true,
       rewrite: (path: any) => path.replace(/^\/api/, '/api'),
     },
     '/api/router': {
-      target: 'wss://kevisual.xiongxiao.me',
+      target: backendWss,
       changeOrigin: true,
       ws: true,
       rewriteWsOrigin: true,
       rewrite: (path: any) => path.replace(/^\/api/, '/api'),
     },
-    '/resources': {
+    '/user/login': {
-      target: 'https://kevisual.xiongxiao.me',
+      target: backend,
       changeOrigin: true,
-      rewrite: (path: any) => path.replace(/^\/resources/, '/resources'),
+      cookieDomainRewrite: 'localhost',
+      rewrite: (path: any) => path.replace(/^\/user/, '/user'),
     },
   };
 }
@@ -66,22 +74,17 @@ export default defineConfig({
         changeOrigin: true,
       },
       '/api': {
-        target: 'http://localhost:4005',
+        target: 'https://localhost:4005',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '/api'),
       },
       '/api/router': {
-        target: 'ws://localhost:4005',
+        target: 'wss://localhost:4005',
         changeOrigin: true,
         ws: true,
         rewriteWsOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '/api'),
       },
-      '/resources': {
-        target: 'https://kevisual.xiongxiao.me',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/resources/, '/resources'),
-      },
       ...proxy,
     },
   },