This commit is contained in:
2025-03-18 16:14:40 +08:00
parent 25def8c245
commit aa1cee7c9f
50 changed files with 916 additions and 502 deletions

View File

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

View File

@@ -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>
);
};

View File

@@ -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>;
};

View File

@@ -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);
}

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>

View File

@@ -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;
}
};

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,5 +1,5 @@
import { create } from 'zustand';
import { query } from '@/modules/query';
import { query } from '@kevisual/resources/modules/query';
type Statistic = {
list: any[];

View File

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

View File

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

View File

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

View File

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

27
packages/webshell/.gitignore vendored Normal file
View File

@@ -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

View File

@@ -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>

View File

@@ -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"
}

View File

View File

@@ -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",
]
}

View File

@@ -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,
},
},
});

View File

@@ -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"
}
}

View File

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