kevisual/kevisual-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加i18n，美化界面

Browse Source
This commit is contained in:
xion 2025-03-20 02:29:01 +08:00
parent 27d9bdf54e
commit c206add7eb
56 changed files with 2743 additions and 928 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="zh">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

6
package.json
View File

@ -18,7 +18,7 @@
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@icon-park/react": "^1.4.2", "@icon-park/react": "^1.4.2",
"@kevisual/center-components": "workspace:*", "@kevisual/center-components": "workspace:*",
"@kevisual/codemirror": "^0.0.2", "@kevisual/codemirror": "workspace:*",
"@kevisual/container": "1.0.0", "@kevisual/container": "1.0.0",
"@kevisual/query": "^0.0.8", "@kevisual/query": "^0.0.8",
"@kevisual/resources": "workspace:*", "@kevisual/resources": "workspace:*",
@ -36,12 +36,16 @@
"d3": "^7.9.0", "d3": "^7.9.0",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"eventemitter3": "^5.0.1", "eventemitter3": "^5.0.1",
"i18next": "^24.2.3",
"i18next-http-backend": "^3.0.2",
"immer": "^10.1.1", "immer": "^10.1.1",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"marked": "^15.0.7", "marked": "^15.0.7",
"nanoid": "^5.1.4", "nanoid": "^5.1.4",
"react": "19.0.0", "react": "19.0.0",
"react-dom": "19.0.0", "react-dom": "19.0.0",
"react-hook-form": "^7.54.2",
"react-i18next": "^15.4.1",
"react-resizable-panels": "^2.1.7", "react-resizable-panels": "^2.1.7",
"react-router": "^7.3.0", "react-router": "^7.3.0",
"react-router-dom": "^7.3.0", "react-router-dom": "^7.3.0",

27
packages/codemirror/.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

33
packages/codemirror/index.html Normal file
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/global.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>

70
packages/codemirror/package.json Normal file
View File

@ -0,0 +1,70 @@
{
"name": "@kevisual/codemirror",
"version": "0.0.1",
"description": "",
"main": "index.js",
"basename": "/root/codemirror",
"scripts": {
"dev": "vite",
"build": "vite build",
"pub": "envision deploy ./dist -k codemirror -v 0.0.1 -u -o root"
},
"files": [
"src"
],
"keywords": [],
"author": "abearxiong <xiongxiao@xiongxiao.me>",
"license": "MIT",
"type": "module",
"dependencies": {
"@codemirror/autocomplete": "^6.18.6",
"@codemirror/basic-setup": "^0.20.0",
"@codemirror/commands": "^6.8.0",
"@codemirror/history": "^0.19.2",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.9",
"@codemirror/lang-javascript": "^6.2.3",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-markdown": "^6.3.2",
"@codemirror/lang-yaml": "^6.1.2",
"@codemirror/language": "^6.11.0",
"@codemirror/state": "^6.5.2",
"@codemirror/view": "^6.36.4",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@kevisual/center-components": "workspace:*",
"@kevisual/router": "^0.0.9",
"@kevisual/store": "^0.0.2",
"@mui/material": "^6.4.8",
"@types/lodash-es": "^4.17.12",
"@types/nprogress": "^0.2.3",
"@uiw/codemirror-theme-duotone": "^4.23.10",
"@uiw/codemirror-theme-vscode": "^4.23.10",
"@vitejs/plugin-basic-ssl": "^2.0.0",
"codemirror": "^6.0.1",
"dayjs": "^1.11.13",
"highlight.js": "^11.11.1",
"immer": "^10.1.1",
"lodash-es": "^4.17.21",
"lucide-react": "^0.483.0",
"marked": "^15.0.7",
"marked-highlight": "^2.2.1",
"nanoid": "^5.1.5",
"nprogress": "^0.2.0",
"prettier": "^3.5.3",
"pretty-bytes": "^6.1.1",
"react": "19.0.0",
"react-datepicker": "^8.2.1",
"react-dom": "19.0.0",
"react-dropzone": "^14.3.8",
"react-toastify": "^11.0.5",
"zustand": "^5.0.3"
},
"devDependencies": {
"@kevisual/types": "^0.0.6"
},
"exports": {
".": "./src/index.tsx",
"./*": "./src/*"
}
}

3
packages/codemirror/src/assets/style.css Normal file
View File

@ -0,0 +1,3 @@
.cm-editor {
height: 100%;
}

120
packages/codemirror/src/editor/editor.ts Normal file
View File

@ -0,0 +1,120 @@
import { EditorView, keymap } from '@codemirror/view';
import { javascript } from '@codemirror/lang-javascript';
import { markdown } from '@codemirror/lang-markdown';
import { html } from '@codemirror/lang-html';
import { css } from '@codemirror/lang-css';
import { json } from '@codemirror/lang-json';
import { yaml } from '@codemirror/lang-yaml';
import { history } from '@codemirror/history';
import { vscodeLight } from '@uiw/codemirror-theme-vscode';
import { formatKeymap } from './modules/keymap';
import { Compartment, EditorState, Extension } from '@codemirror/state';
import { defaultKeymap } from '@codemirror/commands';
import { autocompletion, Completion } from '@codemirror/autocomplete';
import { getFileType } from './utils/get-file-type';
type BaseEditorOpts = {
language?: string;
filename: string;
autoComplete?: {
props?: any;
open?: boolean;
overrideList?: Completion[];
};
};
export class BaseEditor {
editor?: EditorView;
onChangeCompartment?: Compartment;
language: string;
filename: string;
el?: HTMLElement;
autoComplete?: {
props?: any;
open?: boolean;
overrideList?: Completion[];
};
constructor(opts?: BaseEditorOpts) {
this.filename = opts?.filename || '';
this.language = opts?.language || 'typescript';
if (this.filename && !opts?.language) {
// 根据文件名自动判断语言
const fileType = getFileType(this.filename);
this.language = fileType || 'typescript';
}
this.autoComplete = opts?.autoComplete || { open: true, overrideList: [] };
this.onChangeCompartment = new Compartment(); // 创建一个用于 onChange 的独立扩展
}
onEditorChange(view: EditorView) {
console.log('onChange', view);
}
getFileType(filename: string) {
return getFileType(filename);
}
createEditor(el: HTMLElement) {
this.el = el;
const onChangeCompartment = this.onChangeCompartment!;
const language = this.language;
const extensions: Extension[] = [
vscodeLight,
formatKeymap,
keymap.of(defaultKeymap), //
// history(),
];
if (this.autoComplete?.open) {
extensions.push(
autocompletion({
activateOnTyping: true, // 输入时触发补全
closeOnBlur: true, // 失去焦点时关闭补全
activateOnTypingDelay: 2000, // 输入时触发补全
override: this.autoComplete?.overrideList || [],
...this.autoComplete?.props,
}),
);
}
if (language === 'typescript') {
extensions.push(javascript({ typescript: true }));
} else if (language === 'javascript') {
extensions.push(javascript());
} else if (language === 'markdown') {
extensions.push(markdown());
} else if (language === 'html') {
extensions.push(html());
} else if (language === 'css') {
extensions.push(css());
} else if (language === 'json') {
extensions.push(json());
} else if (language === 'yaml') {
extensions.push(yaml());
}
this.editor = new EditorView({
parent: el,
extensions: [
...extensions, //
onChangeCompartment.of([]),
],
});
}
resetEditor(el?: HTMLElement) {
this.editor?.destroy?.();
this.createEditor(el || (this.el as HTMLElement));
}
setLanguage(language: string, el?: HTMLElement) {
this.language = language;
this.editor?.destroy?.();
this.createEditor(el || (this.el as HTMLElement));
}
setContent(content: string) {
this.editor?.dispatch({
changes: { from: 0, to: this.editor?.state.doc.length, insert: content },
});
}
getContent() {
return this.editor?.state.doc.toString();
}
destroyEditor() {
this.editor?.destroy();
}
}
export default BaseEditor;

94
packages/codemirror/src/editor/modules/ai-completions.ts Normal file
View File

@ -0,0 +1,94 @@
import { CompletionResult, CompletionSource } from '@codemirror/autocomplete';
import { Transaction } from '@codemirror/state';
export async function fetchAICompletions(context) {
const userInput = context.matchBefore(/\w*/);
if (!userInput) return null;
const docText = context.state.doc.toString(); // 获取完整文档内容
const cursorPos = context.pos; // 获取光标位置
// 添加提示词
const promptText = `请根据以下代码和光标位置提供代码补全建议：
代码：
${docText}
光标位置：${cursorPos}
请提供适当的代码补全。`;
const aiResponse = await fetch('http://192.168.31.220:11434/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
prompt: promptText,
// 如果 Ollama 支持，可以传递其他参数，如模型名称
// model: 'your-model-name',
model: 'qwen2.5-coder:14b',
// model: 'qwen2.5:14b',
stream: false,
}),
});
const result = await aiResponse.json();
const data = result;
// 提取字段
const createdAt = new Date(data.created_at); // 转换为日期对象
const isDone = data.done;
const doneReason = data.done_reason;
const modelName = data.model;
const responseText = data.response;
const matchCodeBlock = responseText.match(/```javascript\n([\s\S]*?)\n```/);
let codeBlock = '';
if (matchCodeBlock) {
const codeBlock = matchCodeBlock[1]; // 提取代码块
console.log('补全代码:', codeBlock);
}
const suggestions = [
{
label: codeBlock,
type: 'text',
},
];
return {
from: userInput.from,
options: suggestions,
validFor: /^\w*$/,
};
}
// type AiCompletion = Readonly<CompletionSource>;
export const testAiCompletion = async (context: any): Promise<CompletionResult | null> => {
const userInput = context.matchBefore(/\w*/);
if (!userInput) return null;
const docText = context.state.doc.toString(); // 获取完整文档内容
const cursorPos = context.pos; // 获取光标位置
console.log('testAiCompletion', userInput, docText, cursorPos);
return {
from: userInput.from,
options: [
{
label: '123 测试 skflskdf ',
type: 'text',
apply: (state, completion, from, to) => {
console.log('apply', state, completion, from, to);
const newText = '123 测试 skflskdf ';
state.dispatch({
changes: { from, to, insert: newText },
});
},
info: '这是一个长文本上的反馈是冷酷的父母离开时的父母 这是一个长文本上的反馈是冷酷的父母离开时的父母 这是一个长文本上的反馈是冷酷的父母离开时的父母这是一个长文本上的反馈是冷酷的父母离开时的父母 这是一个长文本上的反馈是冷酷的父母离开时的父母这是一个长文本上的反馈是冷酷的父母离开时的父母 这是一个长文本上的反馈是冷酷的父母离开时的父母',
},
{
label: '456',
type: 'text',
},
],
validFor: /^\w*$/,
};
};

92
packages/codemirror/src/editor/modules/keymap.ts Normal file
View File

@ -0,0 +1,92 @@
import { EditorView, keymap } from '@codemirror/view';
import { defaultKeymap, indentSelection, indentWithTab, undo, history } from '@codemirror/commands';
import { indentUnit } from '@codemirror/language';
import prettier from 'prettier';
// import parserBabel from 'prettier/plugins/babel';
import parserEstree from 'prettier/plugins/estree';
// import parserHtml from 'prettier/plugins/html';
import parserTypescript from 'prettier/plugins/typescript';
import { autocompletion, CompletionContext } from '@codemirror/autocomplete';
// 格式化函数
// Function to format the code using Prettier
async function formatCode(view: EditorView) {
const editor = view;
const code = editor.state.doc.toString();
try {
const formattedCode = await prettier.format(code, {
parser: 'typescript',
plugins: [parserEstree, parserTypescript],
});
editor.dispatch({
changes: {
from: 0,
to: editor.state.doc.length,
insert: formattedCode.trim(),
},
});
} catch (error) {
console.error('Error formatting code:', error);
}
}
// export const TabFn = (view: EditorView) => {
// const { state } = view;
// const selection = state.selection.main;
// // 判断是否存在补全上下文
// if (state.field(autocompletion).active?.length) {
// // 插入当前选中的补全内容
// const active = state.field(autocompletion).active[0];
// const selected = active?.options[active.selected]?.label;
// if (selected) {
// view.dispatch({
// changes: { from: selection.from, to: selection.to, insert: selected },
// });
// return true;
// }
// }
// return false;
// };
// 自定义 Tab 键行为
function customIndentWithTab(view: EditorView) {
const { state, dispatch } = view;
const { from, to } = state.selection.main;
const _indentUnit = state.facet(indentUnit) as string;
// 计算插入的缩进
const indent = _indentUnit.repeat(1);
dispatch({
changes: { from, to, insert: indent },
selection: { anchor: from + indent.length },
});
return true; // 表示按键事件被处理
}
export const formatKeymap = keymap.of([
{
// bug, 必须小写
key: 'alt-shift-f', // 快捷键绑定
// mac: 'cmd-shift-f',
run: (view) => {
formatCode(view);
return true; // 表示按键事件被处理
},
},
{
key: 'Tab',
run: customIndentWithTab, // 使用自定义的缩进函数
},
{
key: 'Ctrl-z', // Windows 撤销快捷键
// key: 'Alt-z',
mac: 'Cmd-z', // Mac 撤销快捷键
run: (view) => {
console.log('undo', view);
return undo(view); // 表示按键事件被处理
},
},
...defaultKeymap, // 默认快捷键
]);
// console.log('formatKeymap', defaultKeymap);

31
packages/codemirror/src/editor/utils/get-file-type.ts Normal file
View File

@ -0,0 +1,31 @@
export const getExtension = (filename: string) => {
const extension = filename.split('.').pop();
if (!extension) return '';
return extension;
};
export const supportedExtensions = ['ts', 'js', 'md', 'json', 'yaml', 'yml', 'css', 'html'];
export function getFileType(filename: string) {
const extension = getExtension(filename);
if (!supportedExtensions.includes(extension)) return '';
switch (extension) {
case 'ts':
return 'typescript';
case 'js':
return 'javascript';
case 'md':
return 'markdown';
case 'json':
return 'json';
case 'yaml':
return 'yaml';
case 'yml':
return 'yaml';
case 'css':
return 'css';
case 'html':
return 'html';
default:
return '';
}
}

3
packages/codemirror/src/global.css Normal file
View File

@ -0,0 +1,3 @@
@import 'tailwindcss';
@import '@kevisual/center-components/theme/wind-theme.css';
@import './style.css';

4
packages/codemirror/src/main.ts Normal file
View File

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

40
packages/codemirror/src/pages/App.tsx Normal file
View File

@ -0,0 +1,40 @@
import { useMemo } from 'react';
import { CustomThemeProvider } from '@kevisual/center-components/theme/index.tsx';
import { ToastContainer } from 'react-toastify';
import { FileEditor } from './file-editor/FileEditor';
export const InitProvider = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
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>
<FileEditor />
</InitProvider>
);
}, []);
if (noProvider) {
return <>{children}</>;
}
return (
<CustomThemeProvider>
{children}
<ToastContainer />
</CustomThemeProvider>
);
};

88
packages/codemirror/src/pages/Bootstrap.tsx Normal file
View File

@ -0,0 +1,88 @@
import { createRoot } from 'react-dom/client';
import { App, AppProps } from './App';
import React from 'react';
export class ReactRenderer {
component: any;
element: HTMLElement;
ref: React.RefObject<any>;
props: any;
root: any;
constructor(component: any, { props, className }: any) {
this.component = component;
const el = document.createElement('div');
this.element = el;
this.ref = React.createRef();
this.props = {
...props,
ref: this.ref,
};
el.className = className;
this.root = createRoot(this.element);
this.render();
}
updateProps(props: any) {
this.props = {
...this.props,
...props,
};
this.render();
}
render() {
this.root.render(React.createElement(this.component, this.props));
}
destroy() {
this.root.unmount();
}
}
export default ReactRenderer;
export const randomId = () => {
return Math.random().toString(36).substring(2, 15);
};
export const render = (el: HTMLElement | string, props?: AppProps) => {
const root = typeof el === 'string' ? document.querySelector(el) : el;
if (!root) {
console.error('root not found');
return;
}
const hasResourceApp = window.context?.codemirrorApp;
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 },
className: 'codemirror-root w-full h-full',
});
if (window.context) {
window.context.codemirrorApp = renderer;
} else {
window.context = {
codemirrorApp: renderer,
};
}
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?.codemirrorApp;
if (hasResourceApp) {
const render = hasResourceApp as ReactRenderer;
render.destroy();
window.context.codemirrorApp = null;
}
};

17
packages/codemirror/src/pages/file-editor/FileEditor.tsx Normal file
View File

@ -0,0 +1,17 @@
import { useEffect, useRef } from 'react';
import { BaseEditor } from '../../editor/editor';
export const FileEditor = () => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const editor = new BaseEditor();
if (containerRef.current) {
editor.createEditor(containerRef.current);
}
return () => {
editor.destroyEditor();
};
}, []);
return <div ref={containerRef} className='w-full h-full'></div>;
};

3
packages/codemirror/src/style.css Normal file
View File

@ -0,0 +1,3 @@
.cm-editor {
height: 100%;
}

39
packages/codemirror/tsconfig.json Normal 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/codemirror/*": [
"src/*"
]
},
/* Linting */
"strict": true,
"noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": [
"src",
]
}

83
packages/codemirror/vite.config.mjs Normal file
View File

@ -0,0 +1,83 @@
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 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/codemirror': path.resolve(__dirname, './src'),
},
},
define: {
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
BASE_NAME: JSON.stringify('/root/codemirror/'),
},
base: './',
// base: isDev ? '/' : '/root/codemirror/',
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,
},
},
});

3
packages/components/package.json
View File

@ -17,7 +17,8 @@
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/material": "^6.4.7", "@mui/material": "^6.4.7",
"react": "19.0.0", "react": "19.0.0",
"react-dom": "19.0.0" "react-dom": "19.0.0",
"react-hook-form": "^7.54.2"
}, },
"exports": { "exports": {
".": "./src/index.tsx", ".": "./src/index.tsx",

47
packages/components/src/input/index.tsx Normal file
View File

@ -0,0 +1,47 @@
import { FormControlLabel, TextField } from '@mui/material';
import { useForm, Controller } from 'react-hook-form';
export const InputControl = ({ name, value, onChange }: { name: string; value: string; onChange?: (value: string) => void }) => {
return (
<TextField
variant='outlined'
size='small'
name={name}
value={value || ''}
onChange={(e) => onChange?.(e.target.value)}
sx={{
width: '100%',
marginBottom: '16px',
}}
/>
);
};
type FormProps = {
onSubmit?: (data: any) => void;
children?: React.ReactNode;
};
export const FormDemo = (props: FormProps) => {
const { control, handleSubmit } = useForm();
const { onSubmit = () => {}, children } = props;
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name='name'
control={control}
defaultValue=''
rules={{ required: 'Name is required' }}
render={({ field, fieldState: { error } }) => (
<TextField
{...field}
label='Name'
variant='outlined'
margin='normal'
fullWidth //
error={!!error}
helperText={<>{error?.message}</>}
/>
)}
/>
</form>
);
};

91
packages/components/src/modal/Confirm.tsx Normal file
View File

@ -0,0 +1,91 @@
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
import { useRef, useState } from 'react';
export const Confirm = ({
open,
onClose,
title,
content,
onConfirm,
confirmText = '确认',
cancelText = '取消',
}: {
open: boolean;
onClose: () => void;
title: string;
content: string;
onConfirm?: () => void;
confirmText?: string;
cancelText?: string;
}) => {
return (
<Dialog open={open} onClose={onClose} aria-labelledby='alert-dialog-title' aria-describedby='alert-dialog-description'>
<DialogTitle id='alert-dialog-title' className='text-secondary min-w-[300px]'>
{title}
</DialogTitle>
<DialogContent>
<DialogContentText id='alert-dialog-description'>{content}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onClose} color='primary'>
{cancelText || '取消'}
</Button>
<Button onClick={onConfirm} variant='contained' color='primary' autoFocus>
{confirmText || '确认'}
</Button>
</DialogActions>
</Dialog>
);
};
type Fn = () => void;
export const useConfirm = () => {
const [open, setOpen] = useState(false);
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const fns = useRef<{
onConfirm: Fn;
onCancel: Fn;
confirmText: string;
cancelText: string;
}>({
onConfirm: () => {},
onCancel: () => {},
confirmText: '确认',
cancelText: '取消',
});
return {
contextHolder: (
<Confirm
open={open}
confirmText={fns.current.confirmText}
cancelText={fns.current.cancelText}
onClose={() => {
setOpen(false);
fns.current.onCancel();
}}
title={title}
content={content}
onConfirm={fns.current.onConfirm}
/>
),
confirm: (
title: string,
content: string,
opts?: {
onConfirm: () => void;
confirmText?: string;
cancelText?: string;
onCancel?: () => void;
},
) => {
setOpen(true);
setTitle(title);
setContent(content);
fns.current.onConfirm = opts?.onConfirm || (() => {});
fns.current.onCancel = opts?.onCancel || (() => {});
fns.current.confirmText = opts?.confirmText || '确认';
fns.current.cancelText = opts?.cancelText || '取消';
},
};
};

65
packages/components/src/theme/wind-theme.css
View File

@ -5,4 +5,67 @@
--color-secondary: #ffa000; --color-secondary: #ffa000;
--color-success: #28a745; --color-success: #28a745;
--scrollbar-color: #ffc107; /* 滚动条颜色 */ --scrollbar-color: #ffc107; /* 滚动条颜色 */
} }
html,
body {
width: 100%;
height: 100%;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
}
/* 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; /* 修复交汇时出现的白块 */
}
}

2
packages/resources/index.html
View File

@ -3,7 +3,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Apps</title> <title>AI Apps</title>
<link rel="stylesheet" href="./src/assets/index.css"> <link rel="stylesheet" href="./src/global.css">
<style> <style>
html, html,
body { body {

67
packages/resources/src/assets/index.css
View File

@ -1,67 +0,0 @@
@import 'tailwindcss';
@import '@kevisual/center-components/theme/wind-theme.css';
@layer components {
.test-loading {
@apply w-20 h-20 bg-gray-300 rounded-full animate-spin;
}
}
:root {
--scrollbar-color: #ffbf00;
--primary-color: #ffc107;
--secondary-color: #ffa000;
}
#root {
width: 100%;
height: 100%;
}
#ai-bot-root {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: -100px;
z-index: 9999;
pointer-events: none;
}
.scrollbar {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color) #fff;
}
.scrollbar::-webkit-scrollbar {
height: 4px;
width: 4px;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-color);
border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.ant-select-outlined.ant-select-multiple .ant-select-selection-item {
background: var(--secondary-color);
color: white;
svg {
color: white;
}
}
.ant-select-selection-item {
color: var(--primary-color);
}
.ant-select {
.ant-select-arrow {
display: none !important;
}
}
.ant-picker-input {
.ant-picker-suffix,
.ant-picker-clear {
color: var(--primary-color);
}
}

4
packages/resources/src/global.css Normal file
View File

@ -0,0 +1,4 @@
@import 'tailwindcss';
@import '@kevisual/center-components/theme/wind-theme.css';
@import './style.css';

7
packages/resources/src/pages/App.tsx
View File

@ -1,6 +1,5 @@
import { useEffect, useMemo } from 'react'; import { useEffect, useMemo } from 'react';
import { theme } from '@kevisual/center-components/theme/index.tsx'; import { CustomThemeProvider } from '@kevisual/center-components/theme/index.tsx';
import { ThemeProvider } from '@mui/material/styles';
import { Left } from './layout/Left'; import { Left } from './layout/Left';
import { Main } from './main/index'; import { Main } from './main/index';
import { ToastContainer } from 'react-toastify'; import { ToastContainer } from 'react-toastify';
@ -120,11 +119,11 @@ export const App = ({ providers, noProvider, isSingleApp = true }: AppProps) =>
return <>{children}</>; return <>{children}</>;
} }
return ( return (
<ThemeProvider theme={theme}> <CustomThemeProvider>
<AntdConfigProvider> <AntdConfigProvider>
{children} {children}
<ToastContainer /> <ToastContainer />
</AntdConfigProvider> </AntdConfigProvider>
</ThemeProvider> </CustomThemeProvider>
); );
}; };

193
packages/resources/src/pages/file/list/FileTable.tsx
View File

@ -6,107 +6,116 @@ import { getIcon } from '../FileIcon';
import { Download, Trash } from 'lucide-react'; import { Download, Trash } from 'lucide-react';
import clsx from 'clsx'; import clsx from 'clsx';
import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file'; import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
import { useConfirm } from '@kevisual/center-components/modal/Confirm.tsx';
export const FileTable = () => { export const FileTable = () => {
const { list, prefix, download, onOpenPrefix, deleteFile } = useResourceStore(); const { list, prefix, download, onOpenPrefix, deleteFile } = useResourceStore();
const { setOpenDrawer, setPrefix } = useResourceFileStore(); const { setOpenDrawer, setPrefix } = useResourceFileStore();
const { confirm, contextHolder } = useConfirm();
return ( return (
<TableContainer <>
className='scrollbar' {contextHolder}
sx={{ <TableContainer
'&': { className='scrollbar'
// scrollbarWidth: 'none',
// scrollbarColor: '#888 #fff',
},
'&::-webkit-scrollbar': {
width: '4px !important',
height: '4px !important',
background: '#fff',
},
'&::-webkit-scrollbar-thumb': {
background: '#888',
borderRadius: '2px',
},
}}
component={Paper}>
<Table
sx={{ sx={{
minWidth: 650, '&': {
// scrollbarWidth: 'none',
// scrollbarColor: '#888 #fff',
},
'&::-webkit-scrollbar': {
width: '4px !important',
height: '4px !important',
background: '#fff',
},
'&::-webkit-scrollbar-thumb': {
background: '#888',
borderRadius: '2px',
},
}} }}
aria-label='simple table'> component={Paper}>
<TableHead> <Table
<TableRow> sx={{
<TableCell>Name</TableCell> minWidth: 650,
<TableCell sx={{ minWidth: 100 }}>Size</TableCell> }}
<TableCell sx={{ minWidth: 180 }}>Last Modified</TableCell> aria-label='simple table'>
<TableCell sx={{ minWidth: 110 }}>Actions</TableCell> <TableHead>
</TableRow> <TableRow>
</TableHead> <TableCell>Name</TableCell>
<TableBody> <TableCell sx={{ minWidth: 100 }}>Size</TableCell>
{list.map((row) => { <TableCell sx={{ minWidth: 180 }}>Last Modified</TableCell>
const isFile = !!row.name; <TableCell sx={{ minWidth: 110 }}>Actions</TableCell>
return ( </TableRow>
<TableRow key={row.etag || row.name || row.prefix}> </TableHead>
<TableCell> <TableBody>
<div {list.map((row) => {
className={clsx('flex items-center gap-2 max-w-[300px] line-clamp-2 text-ellipsis', { const isFile = !!row.name;
'cursor-pointer': true, return (
})} <TableRow key={row.etag || row.name || row.prefix}>
onClick={(e) => { <TableCell>
if (!row.name) { <div
onOpenPrefix(row.prefix || ''); className={clsx('flex items-center gap-2 max-w-[300px] line-clamp-2 text-ellipsis', {
} else { 'cursor-pointer': true,
setPrefix(row.name || ''); })}
setOpenDrawer(true);
}
e.stopPropagation();
}}>
<div className='shrink-0'>{getIcon(row.name)}</div>
{row.name ? row.name.replace(prefix, '') : row.prefix?.replace?.(prefix, '')}
</div>
</TableCell>
<TableCell>{row.size ? prettyBytes(row.size) : ''}</TableCell>
<TableCell>{row.lastModified ? dayjs(row.lastModified).format('YYYY-MM-DD HH:mm:ss') : ''}</TableCell>
<TableCell>
{isFile && (
<Button
variant='contained'
color='primary'
onClick={(e) => { onClick={(e) => {
if (!row.name) {
onOpenPrefix(row.prefix || '');
} else {
setPrefix(row.name || '');
setOpenDrawer(true);
}
e.stopPropagation(); e.stopPropagation();
download(row);
}}
sx={{
color: 'white',
minWidth: '32px',
padding: '4px',
}}> }}>
<Download /> <div className='shrink-0'>{getIcon(row.name)}</div>
</Button> {row.name ? row.name.replace(prefix, '') : row.prefix?.replace?.(prefix, '')}
)} </div>
{isFile && ( </TableCell>
<Button <TableCell>{row.size ? prettyBytes(row.size) : ''}</TableCell>
variant='contained' <TableCell>{row.lastModified ? dayjs(row.lastModified).format('YYYY-MM-DD HH:mm:ss') : ''}</TableCell>
color='error' <TableCell>
className='ml-2!' {isFile && (
onClick={(e) => { <Button
e.stopPropagation(); variant='contained'
deleteFile(row); color='primary'
}} onClick={(e) => {
sx={{ e.stopPropagation();
color: 'white', download(row);
minWidth: '32px', }}
padding: '4px', sx={{
}}> color: 'white',
<Trash /> minWidth: '32px',
</Button> padding: '4px',
)} }}>
</TableCell> <Download />
</TableRow> </Button>
); )}
})} {isFile && (
</TableBody> <Button
</Table> variant='contained'
</TableContainer> color='error'
className='ml-2!'
onClick={(e) => {
e.stopPropagation();
confirm('删除文件', '确定删除该文件吗？', {
onConfirm: () => {
deleteFile(row);
},
});
}}
sx={{
color: 'white',
minWidth: '32px',
padding: '4px',
}}>
<Trash />
</Button>
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</>
); );
}; };

32
packages/resources/src/pages/layout/Left.tsx
View File

@ -1,37 +1,16 @@
import React, { Fragment, useEffect, useMemo } from 'react'; import React, { Fragment, useEffect, useMemo } from 'react';
import { import { Box, Divider, List, ListItem, ListItemButton, ListItemText, useTheme, ListItemIcon, Tooltip, Container } from '@mui/material';
AppBar,
Box,
CssBaseline,
Divider,
List,
ListItem,
ListItemButton,
ListItemText,
Toolbar,
Typography,
Button,
useTheme,
ListItemIcon,
Tooltip,
Container,
} from '@mui/material';
import { ActiveMenu, useLayoutStore } from '../store/layout'; import { ActiveMenu, useLayoutStore } from '../store/layout';
import { activeMenuList } from '../modules/MenuList'; import { activeMenuList } from '../modules/MenuList';
import { amber } from '@mui/material/colors'; import { amber } from '@mui/material/colors';
import { lighten, rgbToHex } from '@mui/material/styles';
import { SquareMenu } from 'lucide-react'; import { SquareMenu } from 'lucide-react';
const drawerWidth = 240;
export type LeftProps = { export type LeftProps = {
children?: React.ReactNode; children?: React.ReactNode;
}; };
export const Left = ({ children }: LeftProps) => { export const Left = ({ children }: LeftProps) => {
const { setActiveMenu, init, showLabel, setShowLabel } = useLayoutStore(); const { setActiveMenu, init, showLabel, setShowLabel } = useLayoutStore();
const theme = useTheme(); const theme = useTheme();
// console.log(theme.palette.primary.main, rgbToHex(lighten(theme.palette.primary.main, 0.4)));
// console.log(theme.palette.divider);
useEffect(() => { useEffect(() => {
init(); init();
}, []); }, []);
@ -49,23 +28,24 @@ export const Left = ({ children }: LeftProps) => {
}, [activeMenuList]); }, [activeMenuList]);
return ( return (
<Box sx={{ display: 'flex', backgroundColor: amber[50] }}> <Box sx={{ height: '100%', display: 'flex', backgroundColor: amber[50] }}>
<Box component='nav' sx={{ flexShrink: { sm: 0 } }}> <Box component='nav' sx={{ flexShrink: { sm: 0 } }}>
<Box <Box
sx={{ sx={{
flexShrink: 0, flexShrink: 0,
'& .MuiDrawer-paper': { boxSizing: 'border-box' }, '& .MuiDrawer-paper': { boxSizing: 'border-box' },
height: '100%',
}}> }}>
<Box <Box
sx={{ sx={{
textAlign: 'center', textAlign: 'center',
height: '100vh',
borderRight: 1, borderRight: 1,
borderColor: theme.palette.divider, borderColor: theme.palette.divider,
display: 'flex', display: 'flex',
height: '100%',
flexDirection: 'column', flexDirection: 'column',
}}> }}>
<List sx={{ flexGrow: 1 }} key={list.length}> <List sx={{ flexGrow: 1, height: '100%' }} key={list.length}>
{list.map((item) => ( {list.map((item) => (
<Fragment key={item.value}> <Fragment key={item.value}>
<ListItem disablePadding> <ListItem disablePadding>
@ -106,7 +86,7 @@ export const Left = ({ children }: LeftProps) => {
</Box> </Box>
</Box> </Box>
</Box> </Box>
<Box sx={{ flexGrow: 1, height: '100vh', overflow: 'hidden' }}> <Box sx={{ flexGrow: 1, height: '100%', overflow: 'hidden' }}>
<Container sx={{ width: '100%', height: '100%' }}>{children}</Container> <Container sx={{ width: '100%', height: '100%' }}>{children}</Container>
</Box> </Box>
</Box> </Box>

2
packages/resources/src/pages/main/index.tsx
View File

@ -18,5 +18,5 @@ export const Main = () => {
if (activeMenu === ActiveMenu.Statistic) { if (activeMenu === ActiveMenu.Statistic) {
return <Statistic />; return <Statistic />;
} }
return <div className='h-full'>{activeMenu}</div>; return <div className='h-full overflow-hidden'>{activeMenu}</div>;
}; };

26
packages/resources/src/pages/upload/utils/upload-chunk.ts
View File

@ -9,10 +9,12 @@ type ConvertOpts = {
version?: string; version?: string;
username?: string; username?: string;
directory?: string; directory?: string;
isPublic?: boolean;
filename?: string;
}; };
export const uploadFileChunked = async (file: File, opts: ConvertOpts) => { export const uploadFileChunked = async (file: File, opts: ConvertOpts) => {
const { directory, appKey, version, username } = opts; const { directory, appKey, version, username, isPublic } = opts;
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
if (!token) { if (!token) {
@ -21,11 +23,16 @@ export const uploadFileChunked = async (file: File, opts: ConvertOpts) => {
} }
const taskId = nanoid(); const taskId = nanoid();
const filename = file.name; const filename = opts.filename || file.name;
const load = toast.loading(`${filename} 上传中...`); const load = toast.loading(`${filename} 上传中...`);
NProgress.start(); 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); const searchParams = new URLSearchParams();
searchParams.set('taskId', taskId);
if (isPublic) {
searchParams.set('public', 'true');
}
const eventSource = new EventSource('/api/s1/events?' + searchParams.toString());
// 监听服务器推送的进度更新 // 监听服务器推送的进度更新
eventSource.onmessage = function (event) { eventSource.onmessage = function (event) {
console.log('Progress update:', event.data); console.log('Progress update:', event.data);
@ -60,9 +67,10 @@ export const uploadFileChunked = async (file: File, opts: ConvertOpts) => {
const chunk = file.slice(start, end); const chunk = file.slice(start, end);
const formData = new FormData(); const formData = new FormData();
formData.append('file', chunk, file.name); formData.append('file', chunk, filename);
formData.append('chunkIndex', currentChunk.toString()); formData.append('chunkIndex', currentChunk.toString());
formData.append('totalChunks', totalChunks.toString()); formData.append('totalChunks', totalChunks.toString());
const isLast = currentChunk === totalChunks - 1;
if (directory) { if (directory) {
formData.append('directory', directory); formData.append('directory', directory);
} }
@ -83,10 +91,12 @@ export const uploadFileChunked = async (file: File, opts: ConvertOpts) => {
}, },
}).then((response) => response.json()); }).then((response) => response.json());
fetch('/api/s1/events/close?taskId=' + taskId); fetch('/api/s1/events/close?taskId=' + taskId);
eventSource.close(); if (isLast) {
NProgress.done(); NProgress.done();
toast.dismiss(load); eventSource.close();
resolve(res); toast.dismiss(load);
resolve(res);
}
// console.log(`Chunk ${currentChunk + 1}/${totalChunks} uploaded`, res); // console.log(`Chunk ${currentChunk + 1}/${totalChunks} uploaded`, res);
} catch (error) { } catch (error) {
console.log('Error uploading chunk', error); console.log('Error uploading chunk', error);

22
packages/resources/src/style.css
View File

@ -1,3 +1,22 @@
:root {
--scrollbar-color: #ffbf00;
--primary-color: #ffc107;
--secondary-color: #ffa000;
}
#root {
width: 100%;
height: 100%;
}
#ai-bot-root {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: -100px;
z-index: 9999;
pointer-events: none;
}
.scrollbar { .scrollbar {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color) #fff; scrollbar-color: var(--scrollbar-color) #fff;
@ -15,5 +34,4 @@
.scrollbar::-webkit-scrollbar-track { .scrollbar::-webkit-scrollbar-track {
background: #fff; background: #fff;
} }

736
pnpm-lock.yaml generated
View File

@ -24,8 +24,8 @@ importers:
specifier: workspace:* specifier: workspace:*
version: link:packages/components version: link:packages/components
'@kevisual/codemirror': '@kevisual/codemirror':
specifier: ^0.0.2 specifier: workspace:*
version: 0.0.2 version: link:packages/codemirror
'@kevisual/container': '@kevisual/container':
specifier: 1.0.0 specifier: 1.0.0
version: 1.0.0(@emotion/css@11.13.4)(@types/react@19.0.11)(crypto-js@4.2.0)(eventemitter3@5.0.1)(immer@10.1.1)(react@19.0.0)(rollup@4.34.7)(typescript@5.8.2) version: 1.0.0(@emotion/css@11.13.4)(@types/react@19.0.11)(crypto-js@4.2.0)(eventemitter3@5.0.1)(immer@10.1.1)(react@19.0.0)(rollup@4.34.7)(typescript@5.8.2)
@ -52,7 +52,7 @@ importers:
version: 4.0.14(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.5.1)) version: 4.0.14(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.5.1))
'@uiw/react-textarea-code-editor': '@uiw/react-textarea-code-editor':
specifier: ^3.1.0 specifier: ^3.1.0
version: 3.1.0(@babel/runtime@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 3.1.0(@babel/runtime@7.26.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@xyflow/react': '@xyflow/react':
specifier: ^12.4.4 specifier: ^12.4.4
version: 12.4.4(@types/react@19.0.11)(immer@10.1.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 12.4.4(@types/react@19.0.11)(immer@10.1.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -77,6 +77,12 @@ importers:
eventemitter3: eventemitter3:
specifier: ^5.0.1 specifier: ^5.0.1
version: 5.0.1 version: 5.0.1
i18next:
specifier: ^24.2.3
version: 24.2.3(typescript@5.8.2)
i18next-http-backend:
specifier: ^3.0.2
version: 3.0.2
immer: immer:
specifier: ^10.1.1 specifier: ^10.1.1
version: 10.1.1 version: 10.1.1
@ -95,6 +101,12 @@ importers:
react-dom: react-dom:
specifier: 19.0.0 specifier: 19.0.0
version: 19.0.0(react@19.0.0) version: 19.0.0(react@19.0.0)
react-hook-form:
specifier: ^7.54.2
version: 7.54.2(react@19.0.0)
react-i18next:
specifier: ^15.4.1
version: 15.4.1(i18next@24.2.3(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react-resizable-panels: react-resizable-panels:
specifier: ^2.1.7 specifier: ^2.1.7
version: 2.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 2.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -199,6 +211,139 @@ importers:
specifier: ^6.2.2 specifier: ^6.2.2
version: 6.2.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.5.1) version: 6.2.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.5.1)
packages/codemirror:
dependencies:
'@codemirror/autocomplete':
specifier: ^6.18.6
version: 6.18.6
'@codemirror/basic-setup':
specifier: ^0.20.0
version: 0.20.0
'@codemirror/commands':
specifier: ^6.8.0
version: 6.8.0
'@codemirror/history':
specifier: ^0.19.2
version: 0.19.2
'@codemirror/lang-css':
specifier: ^6.3.1
version: 6.3.1
'@codemirror/lang-html':
specifier: ^6.4.9
version: 6.4.9
'@codemirror/lang-javascript':
specifier: ^6.2.3
version: 6.2.3
'@codemirror/lang-json':
specifier: ^6.0.1
version: 6.0.1
'@codemirror/lang-markdown':
specifier: ^6.3.2
version: 6.3.2
'@codemirror/lang-yaml':
specifier: ^6.1.2
version: 6.1.2
'@codemirror/language':
specifier: ^6.11.0
version: 6.11.0
'@codemirror/state':
specifier: ^6.5.2
version: 6.5.2
'@codemirror/view':
specifier: ^6.36.4
version: 6.36.4
'@emotion/react':
specifier: ^11.14.0
version: 11.14.0(@types/react@19.0.11)(react@19.0.0)
'@emotion/styled':
specifier: ^11.14.0
version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.11)(react@19.0.0))(@types/react@19.0.11)(react@19.0.0)
'@kevisual/center-components':
specifier: workspace:*
version: link:../components
'@kevisual/router':
specifier: ^0.0.9
version: 0.0.9
'@kevisual/store':
specifier: ^0.0.2
version: 0.0.2(rollup@4.34.7)
'@mui/material':
specifier: ^6.4.8
version: 6.4.8(@emotion/react@11.14.0(@types/react@19.0.11)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.11)(react@19.0.0))(@types/react@19.0.11)(react@19.0.0))(@types/react@19.0.11)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@types/lodash-es':
specifier: ^4.17.12
version: 4.17.12
'@types/nprogress':
specifier: ^0.2.3
version: 0.2.3
'@uiw/codemirror-theme-duotone':
specifier: ^4.23.10
version: 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.4)
'@uiw/codemirror-theme-vscode':
specifier: ^4.23.10
version: 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.4)
'@vitejs/plugin-basic-ssl':
specifier: ^2.0.0
version: 2.0.0(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.5.1))
codemirror:
specifier: ^6.0.1
version: 6.0.1
dayjs:
specifier: ^1.11.13
version: 1.11.13
highlight.js:
specifier: ^11.11.1
version: 11.11.1
immer:
specifier: ^10.1.1
version: 10.1.1
lodash-es:
specifier: ^4.17.21
version: 4.17.21
lucide-react:
specifier: ^0.483.0
version: 0.483.0(react@19.0.0)
marked:
specifier: ^15.0.7
version: 15.0.7
marked-highlight:
specifier: ^2.2.1
version: 2.2.1(marked@15.0.7)
nanoid:
specifier: ^5.1.5
version: 5.1.5
nprogress:
specifier: ^0.2.0
version: 0.2.0
prettier:
specifier: ^3.5.3
version: 3.5.3
pretty-bytes:
specifier: ^6.1.1
version: 6.1.1
react:
specifier: 19.0.0
version: 19.0.0
react-datepicker:
specifier: ^8.2.1
version: 8.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react-dom:
specifier: 19.0.0
version: 19.0.0(react@19.0.0)
react-dropzone:
specifier: ^14.3.8
version: 14.3.8(react@19.0.0)
react-toastify:
specifier: ^11.0.5
version: 11.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
zustand:
specifier: ^5.0.3
version: 5.0.3(@types/react@19.0.11)(immer@10.1.1)(react@19.0.0)(use-sync-external-store@1.2.2(react@19.0.0))
devDependencies:
'@kevisual/types':
specifier: ^0.0.6
version: 0.0.6
packages/components: packages/components:
dependencies: dependencies:
'@emotion/react': '@emotion/react':
@ -216,6 +361,9 @@ importers:
react-dom: react-dom:
specifier: 19.0.0 specifier: 19.0.0
version: 19.0.0(react@19.0.0) version: 19.0.0(react@19.0.0)
react-hook-form:
specifier: ^7.54.2
version: 7.54.2(react@19.0.0)
devDependencies: devDependencies:
clsx: clsx:
specifier: ^2.1.1 specifier: ^2.1.1
@ -441,6 +589,10 @@ packages:
resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==} resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
'@babel/runtime@7.26.10':
resolution: {integrity: sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==}
engines: {node: '>=6.9.0'}
'@babel/template@7.25.9': '@babel/template@7.25.9':
resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==} resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
@ -457,6 +609,88 @@ packages:
resolution: {integrity: sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==} resolution: {integrity: sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
'@codemirror/autocomplete@0.20.3':
resolution: {integrity: sha512-lYB+NPGP+LEzAudkWhLfMxhTrxtLILGl938w+RcFrGdrIc54A+UgmCoz+McE3IYRFp4xyQcL4uFJwo+93YdgHw==}
'@codemirror/autocomplete@6.18.6':
resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
'@codemirror/basic-setup@0.20.0':
resolution: {integrity: sha512-W/ERKMLErWkrVLyP5I8Yh8PXl4r+WFNkdYVSzkXYPQv2RMPSkWpr2BgggiSJ8AHF/q3GuApncDD8I4BZz65fyg==}
deprecated: In version 6.0, this package has been renamed to just 'codemirror'
'@codemirror/commands@0.20.0':
resolution: {integrity: sha512-v9L5NNVA+A9R6zaFvaTbxs30kc69F6BkOoiEbeFw4m4I0exmDEKBILN6mK+GksJtvTzGBxvhAPlVFTdQW8GB7Q==}
'@codemirror/commands@6.8.0':
resolution: {integrity: sha512-q8VPEFaEP4ikSlt6ZxjB3zW72+7osfAYW9i8Zu943uqbKuz6utc1+F170hyLUCUltXORjQXRyYQNfkckzA/bPQ==}
'@codemirror/history@0.19.2':
resolution: {integrity: sha512-unhP4t3N2smzmHoo/Yio6ueWi+il8gm9VKrvi6wlcdGH5fOfVDNkmjHQ495SiR+EdOG35+3iNebSPYww0vN7ow==}
deprecated: As of 0.20.0, this package has been merged into @codemirror/commands
'@codemirror/lang-css@6.3.1':
resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
'@codemirror/lang-html@6.4.9':
resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
'@codemirror/lang-javascript@6.2.3':
resolution: {integrity: sha512-8PR3vIWg7pSu7ur8A07pGiYHgy3hHj+mRYRCSG8q+mPIrl0F02rgpGv+DsQTHRTc30rydOsf5PZ7yjKFg2Ackw==}
'@codemirror/lang-json@6.0.1':
resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
'@codemirror/lang-markdown@6.3.2':
resolution: {integrity: sha512-c/5MYinGbFxYl4itE9q/rgN/sMTjOr8XL5OWnC+EaRMLfCbVUmmubTJfdgpfcSS2SCaT7b+Q+xi3l6CgoE+BsA==}
'@codemirror/lang-yaml@6.1.2':
resolution: {integrity: sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==}
'@codemirror/language@0.20.2':
resolution: {integrity: sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==}
'@codemirror/language@6.11.0':
resolution: {integrity: sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==}
'@codemirror/lint@0.20.3':
resolution: {integrity: sha512-06xUScbbspZ8mKoODQCEx6hz1bjaq9m8W8DxdycWARMiiX1wMtfCh/MoHpaL7ws/KUMwlsFFfp2qhm32oaCvVA==}
'@codemirror/lint@6.8.4':
resolution: {integrity: sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==}
'@codemirror/rangeset@0.19.9':
resolution: {integrity: sha512-V8YUuOvK+ew87Xem+71nKcqu1SXd5QROMRLMS/ljT5/3MCxtgrRie1Cvild0G/Z2f1fpWxzX78V0U4jjXBorBQ==}
deprecated: As of 0.20.0, this package has been merged into @codemirror/state
'@codemirror/search@0.20.1':
resolution: {integrity: sha512-ROe6gRboQU5E4z6GAkNa2kxhXqsGNbeLEisbvzbOeB7nuDYXUZ70vGIgmqPu0tB+1M3F9yWk6W8k2vrFpJaD4Q==}
'@codemirror/search@6.5.10':
resolution: {integrity: sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==}
'@codemirror/state@0.19.9':
resolution: {integrity: sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==}
'@codemirror/state@0.20.1':
resolution: {integrity: sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==}
'@codemirror/state@6.5.2':
resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
'@codemirror/text@0.19.6':
resolution: {integrity: sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==}
deprecated: As of 0.20.0, this package has been merged into @codemirror/state
'@codemirror/view@0.19.48':
resolution: {integrity: sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==}
'@codemirror/view@0.20.7':
resolution: {integrity: sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==}
'@codemirror/view@6.36.4':
resolution: {integrity: sha512-ZQ0V5ovw/miKEXTvjgzRyjnrk9TwriUB1k4R5p7uNnHR9Hus+D1SXHGdJshijEzPFjU25xea/7nhIeSqYFKdbA==}
'@ctrl/tinycolor@3.6.1': '@ctrl/tinycolor@3.6.1':
resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
engines: {node: '>=10'} engines: {node: '>=10'}
@ -781,9 +1015,6 @@ packages:
'@jridgewell/trace-mapping@0.3.25': '@jridgewell/trace-mapping@0.3.25':
resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
'@kevisual/codemirror@0.0.2':
resolution: {integrity: sha512-z+hINypSarYBj+13en8+Hj/CqTAMVIYN3Rs0ICHRzbikvrDnsnT4ohpnFgcbFPQ/zX3E1mS9ANbx4jGSJEHaPQ==}
'@kevisual/container@1.0.0': '@kevisual/container@1.0.0':
resolution: {integrity: sha512-zt9ldlyxkIuMcuU1YcvO/dDhbG7p6X4uVKlVzr5UzORIlC/ILdKxq9JN8/6oQ/Mwwja/LXFL33jH2xVqgBxjGQ==} resolution: {integrity: sha512-zt9ldlyxkIuMcuU1YcvO/dDhbG7p6X4uVKlVzr5UzORIlC/ILdKxq9JN8/6oQ/Mwwja/LXFL33jH2xVqgBxjGQ==}
peerDependencies: peerDependencies:
@ -812,6 +1043,45 @@ packages:
'@kevisual/ui@0.0.2': '@kevisual/ui@0.0.2':
resolution: {integrity: sha512-MDZDQTrYToLyj3WhiVJQLJ0PUHiN4D0Z5yJIyGzzPewPGpP2xwNgKO1BFX37J95cGZckzCdZwTKP0XKAOq0QtA==} resolution: {integrity: sha512-MDZDQTrYToLyj3WhiVJQLJ0PUHiN4D0Z5yJIyGzzPewPGpP2xwNgKO1BFX37J95cGZckzCdZwTKP0XKAOq0QtA==}
'@lezer/common@0.16.1':
resolution: {integrity: sha512-qPmG7YTZ6lATyTOAWf8vXE+iRrt1NJd4cm2nJHK+v7X9TsOF6+HtuU/ctaZy2RCrluxDb89hI6KWQ5LfQGQWuA==}
'@lezer/common@1.2.3':
resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
'@lezer/css@1.1.10':
resolution: {integrity: sha512-V5/89eDapjeAkWPBpWEfQjZ1Hag3aYUUJOL8213X0dFRuXJ4BXa5NKl9USzOnaLod4AOpmVCkduir2oKwZYZtg==}
'@lezer/highlight@0.16.0':
resolution: {integrity: sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==}
'@lezer/highlight@1.2.1':
resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
'@lezer/html@1.3.10':
resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
'@lezer/javascript@1.4.21':
resolution: {integrity: sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==}
'@lezer/json@1.0.3':
resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
'@lezer/lr@0.16.3':
resolution: {integrity: sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==}
'@lezer/lr@1.4.2':
resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
'@lezer/markdown@1.4.2':
resolution: {integrity: sha512-iYewCigG/517D0xJPQd7RGaCjZAFwROiH8T9h7OTtz0bRVtkxzFhGBFJ9JGKgBBs4uuo1cvxzyQ5iKhDLMcLUQ==}
'@lezer/yaml@1.0.3':
resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
'@marijn/find-cluster-break@1.0.2':
resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
'@monaco-editor/loader@1.5.0': '@monaco-editor/loader@1.5.0':
resolution: {integrity: sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==} resolution: {integrity: sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==}
@ -1466,6 +1736,19 @@ packages:
resolution: {integrity: sha512-AjOC3zfnxd6S4Eiy3jwktJPclqhFHNyd8L6Gycf9WUPoKZpgM5PjkxY1X7uSy61xVpiJDhhk7XT2NVsN3ALTWg==} resolution: {integrity: sha512-AjOC3zfnxd6S4Eiy3jwktJPclqhFHNyd8L6Gycf9WUPoKZpgM5PjkxY1X7uSy61xVpiJDhhk7XT2NVsN3ALTWg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@uiw/codemirror-theme-duotone@4.23.10':
resolution: {integrity: sha512-h2lIubEMNBZNEvYVMjt08QUt0DhFKXIl44hTU+a60AoL+YLlDJw26KlNbUvHxyqTDZwaX2TZKR5APF14lU+sYA==}
'@uiw/codemirror-theme-vscode@4.23.10':
resolution: {integrity: sha512-d9qGC6/yq6d+REMZUs7jrs2kGZoAAyNu0USOxsDa3Mqhh/dSUfC+ErDqwF02OfylsdcuPSzelu99EAvkjorpmQ==}
'@uiw/codemirror-themes@4.23.10':
resolution: {integrity: sha512-dU0UgEEgEXCAYpxuVDQ6fovE82XsqgHZckTJOH6Bs8xCi3Z7dwBKO4pXuiA8qGDwTOXOMjSzfi+pRViDm7OfWw==}
peerDependencies:
'@codemirror/language': '>=6.0.0'
'@codemirror/state': '>=6.0.0'
'@codemirror/view': '>=6.0.0'
'@uiw/react-textarea-code-editor@3.1.0': '@uiw/react-textarea-code-editor@3.1.0':
resolution: {integrity: sha512-lcAb5foG8K32ntg8dzY0A8vFyQP33SxuN8oatVYxJaxf2WDeiV0Jzk8/8lsOzthafEpgxc/X3RS2elYmvHn8TQ==} resolution: {integrity: sha512-lcAb5foG8K32ntg8dzY0A8vFyQP33SxuN8oatVYxJaxf2WDeiV0Jzk8/8lsOzthafEpgxc/X3RS2elYmvHn8TQ==}
peerDependencies: peerDependencies:
@ -1617,6 +1900,9 @@ packages:
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
engines: {node: '>=6'} engines: {node: '>=6'}
codemirror@6.0.1:
resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
color-convert@1.9.3: color-convert@1.9.3:
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
@ -1663,11 +1949,17 @@ packages:
resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==} resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
engines: {node: '>=10'} engines: {node: '>=10'}
crelt@1.0.6:
resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
cross-env@7.0.3: cross-env@7.0.3:
resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==} resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'} engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
hasBin: true hasBin: true
cross-fetch@4.0.0:
resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==}
cross-spawn@7.0.6: cross-spawn@7.0.6:
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
@ -2067,12 +2359,30 @@ packages:
hastscript@8.0.0: hastscript@8.0.0:
resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
highlight.js@11.11.1:
resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
engines: {node: '>=12.0.0'}
hoist-non-react-statics@3.3.2: hoist-non-react-statics@3.3.2:
resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
html-parse-stringify@3.0.1:
resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
html-void-elements@3.0.0: html-void-elements@3.0.0:
resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
i18next-http-backend@3.0.2:
resolution: {integrity: sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==}
i18next@24.2.3:
resolution: {integrity: sha512-lfbf80OzkocvX7nmZtu7nSTNbrTYR52sLWxPtlXX1zAhVw8WEnFk4puUkCR4B1dNQwbSpEHHHemcZu//7EcB7A==}
peerDependencies:
typescript: ^5
peerDependenciesMeta:
typescript:
optional: true
iconv-lite@0.6.3: iconv-lite@0.6.3:
resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
@ -2275,9 +2585,19 @@ packages:
peerDependencies: peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
lucide-react@0.483.0:
resolution: {integrity: sha512-WldsY17Qb/T3VZdMnVQ9C3DDIP7h1ViDTHVdVGnLZcvHNg30zH/MTQ04RTORjexoGmpsXroiQXZ4QyR0kBy0FA==}
peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
magic-string@0.30.17: magic-string@0.30.17:
resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==} resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
marked-highlight@2.2.1:
resolution: {integrity: sha512-SiCIeEiQbs9TxGwle9/OwbOejHCZsohQRaNTY2u8euEXYt2rYUFoiImUirThU3Gd/o6Q1gHGtH9qloHlbJpNIA==}
peerDependencies:
marked: '>=4 <16'
marked@15.0.7: marked@15.0.7:
resolution: {integrity: sha512-dgLIeKGLx5FwziAnsk4ONoGwHwGPJzselimvlVskE9XLN4Orv9u2VA3GWw/lYUqjfA0rUT/6fqKwfZJapP9BEg==} resolution: {integrity: sha512-dgLIeKGLx5FwziAnsk4ONoGwHwGPJzselimvlVskE9XLN4Orv9u2VA3GWw/lYUqjfA0rUT/6fqKwfZJapP9BEg==}
engines: {node: '>= 18'} engines: {node: '>= 18'}
@ -2332,9 +2652,23 @@ packages:
engines: {node: ^18 || >=20} engines: {node: ^18 || >=20}
hasBin: true hasBin: true
nanoid@5.1.5:
resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
engines: {node: ^18 || >=20}
hasBin: true
natural-compare@1.4.0: natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
node-fetch@2.7.0:
resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
engines: {node: 4.x || >=6.0.0}
peerDependencies:
encoding: ^0.1.0
peerDependenciesMeta:
encoding:
optional: true
node-forge@1.3.1: node-forge@1.3.1:
resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==} resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
engines: {node: '>= 6.13.0'} engines: {node: '>= 6.13.0'}
@ -2439,6 +2773,11 @@ packages:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
engines: {node: '>= 0.8.0'} engines: {node: '>= 0.8.0'}
prettier@3.5.3:
resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
engines: {node: '>=14'}
hasBin: true
pretty-bytes@6.1.1: pretty-bytes@6.1.1:
resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==} resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
engines: {node: ^14.13.1 || >=16.0.0} engines: {node: ^14.13.1 || >=16.0.0}
@ -2710,6 +3049,25 @@ packages:
peerDependencies: peerDependencies:
react: '>= 16.8 || 18.0.0' react: '>= 16.8 || 18.0.0'
react-hook-form@7.54.2:
resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^16.8.0 || ^17 || ^18 || ^19
react-i18next@15.4.1:
resolution: {integrity: sha512-ahGab+IaSgZmNPYXdV1n+OYky95TGpFwnKRflX/16dY04DsYYKHtVLjeny7sBSCREEcoMbAgSkFiGLF5g5Oofw==}
peerDependencies:
i18next: '>= 23.2.3'
react: '>= 16.8.0'
react-dom: '*'
react-native: '*'
peerDependenciesMeta:
react-dom:
optional: true
react-native:
optional: true
react-is@16.13.1: react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@ -2903,6 +3261,9 @@ packages:
resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
engines: {node: '>=8'} engines: {node: '>=8'}
style-mod@4.1.2:
resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
style-to-object@1.0.8: style-to-object@1.0.8:
resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==} resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
@ -2962,6 +3323,9 @@ packages:
toggle-selection@1.0.6: toggle-selection@1.0.6:
resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==} resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
tr46@0.0.3:
resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
trim-lines@3.0.1: trim-lines@3.0.1:
resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
@ -3096,9 +3460,22 @@ packages:
yaml: yaml:
optional: true optional: true
void-elements@3.1.0:
resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
engines: {node: '>=0.10.0'}
w3c-keyname@2.2.8:
resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
web-namespaces@2.0.1: web-namespaces@2.0.1:
resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
webidl-conversions@3.0.1:
resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
whatwg-url@5.0.0:
resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
which@2.0.2: which@2.0.2:
resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
@ -3361,6 +3738,10 @@ snapshots:
dependencies: dependencies:
regenerator-runtime: 0.14.1 regenerator-runtime: 0.14.1
'@babel/runtime@7.26.10':
dependencies:
regenerator-runtime: 0.14.1
'@babel/template@7.25.9': '@babel/template@7.25.9':
dependencies: dependencies:
'@babel/code-frame': 7.26.2 '@babel/code-frame': 7.26.2
@ -3390,6 +3771,182 @@ snapshots:
'@babel/helper-string-parser': 7.25.9 '@babel/helper-string-parser': 7.25.9
'@babel/helper-validator-identifier': 7.25.9 '@babel/helper-validator-identifier': 7.25.9
'@codemirror/autocomplete@0.20.3':
dependencies:
'@codemirror/language': 0.20.2
'@codemirror/state': 0.20.1
'@codemirror/view': 0.20.7
'@lezer/common': 0.16.1
'@codemirror/autocomplete@6.18.6':
dependencies:
'@codemirror/language': 6.11.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
'@lezer/common': 1.2.3
'@codemirror/basic-setup@0.20.0':
dependencies:
'@codemirror/autocomplete': 0.20.3
'@codemirror/commands': 0.20.0
'@codemirror/language': 0.20.2
'@codemirror/lint': 0.20.3
'@codemirror/search': 0.20.1
'@codemirror/state': 0.20.1
'@codemirror/view': 0.20.7
'@codemirror/commands@0.20.0':
dependencies:
'@codemirror/language': 0.20.2
'@codemirror/state': 0.20.1
'@codemirror/view': 0.20.7
'@lezer/common': 0.16.1
'@codemirror/commands@6.8.0':
dependencies:
'@codemirror/language': 6.11.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
'@lezer/common': 1.2.3
'@codemirror/history@0.19.2':
dependencies:
'@codemirror/state': 0.19.9
'@codemirror/view': 0.19.48
'@codemirror/lang-css@6.3.1':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/language': 6.11.0
'@codemirror/state': 6.5.2
'@lezer/common': 1.2.3
'@lezer/css': 1.1.10
'@codemirror/lang-html@6.4.9':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/lang-css': 6.3.1
'@codemirror/lang-javascript': 6.2.3
'@codemirror/language': 6.11.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
'@lezer/common': 1.2.3
'@lezer/css': 1.1.10
'@lezer/html': 1.3.10
'@codemirror/lang-javascript@6.2.3':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/language': 6.11.0
'@codemirror/lint': 6.8.4
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
'@lezer/common': 1.2.3
'@lezer/javascript': 1.4.21
'@codemirror/lang-json@6.0.1':
dependencies:
'@codemirror/language': 6.11.0
'@lezer/json': 1.0.3
'@codemirror/lang-markdown@6.3.2':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/lang-html': 6.4.9
'@codemirror/language': 6.11.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
'@lezer/common': 1.2.3
'@lezer/markdown': 1.4.2
'@codemirror/lang-yaml@6.1.2':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/language': 6.11.0
'@codemirror/state': 6.5.2
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@lezer/yaml': 1.0.3
'@codemirror/language@0.20.2':
dependencies:
'@codemirror/state': 0.20.1
'@codemirror/view': 0.20.7
'@lezer/common': 0.16.1
'@lezer/highlight': 0.16.0
'@lezer/lr': 0.16.3
style-mod: 4.1.2
'@codemirror/language@6.11.0':
dependencies:
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
style-mod: 4.1.2
'@codemirror/lint@0.20.3':
dependencies:
'@codemirror/state': 0.20.1
'@codemirror/view': 0.20.7
crelt: 1.0.6
'@codemirror/lint@6.8.4':
dependencies:
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
crelt: 1.0.6
'@codemirror/rangeset@0.19.9':
dependencies:
'@codemirror/state': 0.19.9
'@codemirror/search@0.20.1':
dependencies:
'@codemirror/state': 0.20.1
'@codemirror/view': 0.20.7
crelt: 1.0.6
'@codemirror/search@6.5.10':
dependencies:
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
crelt: 1.0.6
'@codemirror/state@0.19.9':
dependencies:
'@codemirror/text': 0.19.6
'@codemirror/state@0.20.1': {}
'@codemirror/state@6.5.2':
dependencies:
'@marijn/find-cluster-break': 1.0.2
'@codemirror/text@0.19.6': {}
'@codemirror/view@0.19.48':
dependencies:
'@codemirror/rangeset': 0.19.9
'@codemirror/state': 0.19.9
'@codemirror/text': 0.19.6
style-mod: 4.1.2
w3c-keyname: 2.2.8
'@codemirror/view@0.20.7':
dependencies:
'@codemirror/state': 0.20.1
style-mod: 4.1.2
w3c-keyname: 2.2.8
'@codemirror/view@6.36.4':
dependencies:
'@codemirror/state': 6.5.2
style-mod: 4.1.2
w3c-keyname: 2.2.8
'@ctrl/tinycolor@3.6.1': {} '@ctrl/tinycolor@3.6.1': {}
'@emotion/babel-plugin@11.13.5': '@emotion/babel-plugin@11.13.5':
@ -3673,14 +4230,12 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2 '@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.0 '@jridgewell/sourcemap-codec': 1.5.0
'@kevisual/codemirror@0.0.2': {}
'@kevisual/container@1.0.0(@emotion/css@11.13.4)(@types/react@19.0.11)(crypto-js@4.2.0)(eventemitter3@5.0.1)(immer@10.1.1)(react@19.0.0)(rollup@4.34.7)(typescript@5.8.2)': '@kevisual/container@1.0.0(@emotion/css@11.13.4)(@types/react@19.0.11)(crypto-js@4.2.0)(eventemitter3@5.0.1)(immer@10.1.1)(react@19.0.0)(rollup@4.34.7)(typescript@5.8.2)':
dependencies: dependencies:
'@emotion/css': 11.13.4 '@emotion/css': 11.13.4
crypto-js: 4.2.0 crypto-js: 4.2.0
eventemitter3: 5.0.1 eventemitter3: 5.0.1
nanoid: 5.1.4 nanoid: 5.1.5
rollup-plugin-dts: 6.1.1(rollup@4.34.7)(typescript@5.8.2) rollup-plugin-dts: 6.1.1(rollup@4.34.7)(typescript@5.8.2)
scheduler: 0.23.2 scheduler: 0.23.2
zustand: 4.5.5(@types/react@19.0.11)(immer@10.1.1)(react@19.0.0) zustand: 4.5.5(@types/react@19.0.11)(immer@10.1.1)(react@19.0.0)
@ -3736,6 +4291,63 @@ snapshots:
lodash-es: 4.17.21 lodash-es: 4.17.21
style-to-object: 1.0.8 style-to-object: 1.0.8
'@lezer/common@0.16.1': {}
'@lezer/common@1.2.3': {}
'@lezer/css@1.1.10':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@lezer/highlight@0.16.0':
dependencies:
'@lezer/common': 0.16.1
'@lezer/highlight@1.2.1':
dependencies:
'@lezer/common': 1.2.3
'@lezer/html@1.3.10':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@lezer/javascript@1.4.21':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@lezer/json@1.0.3':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@lezer/lr@0.16.3':
dependencies:
'@lezer/common': 0.16.1
'@lezer/lr@1.4.2':
dependencies:
'@lezer/common': 1.2.3
'@lezer/markdown@1.4.2':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/yaml@1.0.3':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@marijn/find-cluster-break@1.0.2': {}
'@monaco-editor/loader@1.5.0': '@monaco-editor/loader@1.5.0':
dependencies: dependencies:
state-local: 1.0.7 state-local: 1.0.7
@ -4399,9 +5011,31 @@ snapshots:
'@typescript-eslint/types': 8.26.1 '@typescript-eslint/types': 8.26.1
eslint-visitor-keys: 4.2.0 eslint-visitor-keys: 4.2.0
'@uiw/react-textarea-code-editor@3.1.0(@babel/runtime@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': '@uiw/codemirror-theme-duotone@4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.4)':
dependencies: dependencies:
'@babel/runtime': 7.26.0 '@uiw/codemirror-themes': 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.4)
transitivePeerDependencies:
- '@codemirror/language'
- '@codemirror/state'
- '@codemirror/view'
'@uiw/codemirror-theme-vscode@4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.4)':
dependencies:
'@uiw/codemirror-themes': 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.4)
transitivePeerDependencies:
- '@codemirror/language'
- '@codemirror/state'
- '@codemirror/view'
'@uiw/codemirror-themes@4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.4)':
dependencies:
'@codemirror/language': 6.11.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
'@uiw/react-textarea-code-editor@3.1.0(@babel/runtime@7.26.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@babel/runtime': 7.26.10
react: 19.0.0 react: 19.0.0
react-dom: 19.0.0(react@19.0.0) react-dom: 19.0.0(react@19.0.0)
rehype: 13.0.1 rehype: 13.0.1
@ -4614,6 +5248,16 @@ snapshots:
clsx@2.1.1: {} clsx@2.1.1: {}
codemirror@6.0.1:
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/commands': 6.8.0
'@codemirror/language': 6.11.0
'@codemirror/lint': 6.8.4
'@codemirror/search': 6.5.10
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.4
color-convert@1.9.3: color-convert@1.9.3:
dependencies: dependencies:
color-name: 1.1.3 color-name: 1.1.3
@ -4656,10 +5300,18 @@ snapshots:
path-type: 4.0.0 path-type: 4.0.0
yaml: 1.10.2 yaml: 1.10.2
crelt@1.0.6: {}
cross-env@7.0.3: cross-env@7.0.3:
dependencies: dependencies:
cross-spawn: 7.0.6 cross-spawn: 7.0.6
cross-fetch@4.0.0:
dependencies:
node-fetch: 2.7.0
transitivePeerDependencies:
- encoding
cross-spawn@7.0.6: cross-spawn@7.0.6:
dependencies: dependencies:
path-key: 3.1.1 path-key: 3.1.1
@ -5144,12 +5796,30 @@ snapshots:
property-information: 6.5.0 property-information: 6.5.0
space-separated-tokens: 2.0.2 space-separated-tokens: 2.0.2
highlight.js@11.11.1: {}
hoist-non-react-statics@3.3.2: hoist-non-react-statics@3.3.2:
dependencies: dependencies:
react-is: 16.13.1 react-is: 16.13.1
html-parse-stringify@3.0.1:
dependencies:
void-elements: 3.1.0
html-void-elements@3.0.0: {} html-void-elements@3.0.0: {}
i18next-http-backend@3.0.2:
dependencies:
cross-fetch: 4.0.0
transitivePeerDependencies:
- encoding
i18next@24.2.3(typescript@5.8.2):
dependencies:
'@babel/runtime': 7.26.10
optionalDependencies:
typescript: 5.8.2
iconv-lite@0.6.3: iconv-lite@0.6.3:
dependencies: dependencies:
safer-buffer: 2.1.2 safer-buffer: 2.1.2
@ -5302,10 +5972,18 @@ snapshots:
dependencies: dependencies:
react: 19.0.0 react: 19.0.0
lucide-react@0.483.0(react@19.0.0):
dependencies:
react: 19.0.0
magic-string@0.30.17: magic-string@0.30.17:
dependencies: dependencies:
'@jridgewell/sourcemap-codec': 1.5.0 '@jridgewell/sourcemap-codec': 1.5.0
marked-highlight@2.2.1(marked@15.0.7):
dependencies:
marked: 15.0.7
marked@15.0.7: {} marked@15.0.7: {}
mdast-util-to-hast@13.2.0: mdast-util-to-hast@13.2.0:
@ -5360,8 +6038,14 @@ snapshots:
nanoid@5.1.4: {} nanoid@5.1.4: {}
nanoid@5.1.5: {}
natural-compare@1.4.0: {} natural-compare@1.4.0: {}
node-fetch@2.7.0:
dependencies:
whatwg-url: 5.0.0
node-forge@1.3.1: {} node-forge@1.3.1: {}
node-releases@2.0.19: {} node-releases@2.0.19: {}
@ -5459,6 +6143,8 @@ snapshots:
prelude-ls@1.2.1: {} prelude-ls@1.2.1: {}
prettier@3.5.3: {}
pretty-bytes@6.1.1: {} pretty-bytes@6.1.1: {}
prop-types@15.8.1: prop-types@15.8.1:
@ -5824,6 +6510,19 @@ snapshots:
prop-types: 15.8.1 prop-types: 15.8.1
react: 19.0.0 react: 19.0.0
react-hook-form@7.54.2(react@19.0.0):
dependencies:
react: 19.0.0
react-i18next@15.4.1(i18next@24.2.3(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
'@babel/runtime': 7.26.0
html-parse-stringify: 3.0.1
i18next: 24.2.3(typescript@5.8.2)
react: 19.0.0
optionalDependencies:
react-dom: 19.0.0(react@19.0.0)
react-is@16.13.1: {} react-is@16.13.1: {}
react-is@18.3.1: {} react-is@18.3.1: {}
@ -6043,6 +6742,8 @@ snapshots:
strip-json-comments@3.1.1: {} strip-json-comments@3.1.1: {}
style-mod@4.1.2: {}
style-to-object@1.0.8: style-to-object@1.0.8:
dependencies: dependencies:
inline-style-parser: 0.2.4 inline-style-parser: 0.2.4
@ -6091,6 +6792,8 @@ snapshots:
toggle-selection@1.0.6: {} toggle-selection@1.0.6: {}
tr46@0.0.3: {}
trim-lines@3.0.1: {} trim-lines@3.0.1: {}
trough@2.2.0: {} trough@2.2.0: {}
@ -6221,8 +6924,19 @@ snapshots:
terser: 5.39.0 terser: 5.39.0
yaml: 2.5.1 yaml: 2.5.1
void-elements@3.1.0: {}
w3c-keyname@2.2.8: {}
web-namespaces@2.0.1: {} web-namespaces@2.0.1: {}
webidl-conversions@3.0.1: {}
whatwg-url@5.0.0:
dependencies:
tr46: 0.0.3
webidl-conversions: 3.0.1
which@2.0.2: which@2.0.2:
dependencies: dependencies:
isexe: 2.0.0 isexe: 2.0.0

45
public/locales/en/translation.json Normal file
View File

@ -0,0 +1,45 @@
{
"container": "Container",
"currentTime": "Current time: {{time, YYYY-MM-DD}}",
"Your profile": "Your profile",
"Your orgs": "Your orgs",
"Site Map": "Site Map",
"User": "User",
"Login Out": "Login Out",
"Switch Org": "Switch Org",
"Save": "Save",
"Profile": "Profile",
"Edit your profile": "Edit your profile",
"Name": "Name",
"Email": "Email",
"Phone": "Phone",
"Description": "Description",
"Avatar": "Avatar",
"Avatar Upload": "Avatar Upload",
"Edit": "Edit",
"Add": "Add",
"Delete": "Delete",
"Cancel": "Cancel",
"Confirm": "Confirm",
"Add Org": "Add Org",
"Home": "Home",
"User App": "User App",
"File App": "File App",
"Org": "Org",
"About": "About",
"Contact": "Contact",
"Terms": "Terms",
"Privacy": "Privacy",
"Language": "Language",
"Theme": "Theme",
"Dark": "Dark",
"Light": "Light",
"Container": "Container",
"Submit": "Submit",
"Username": "Username",
"Back": "Back",
"User List": "User List",
"Switch to Org": "Switch to Org",
"Login": "Login",
"uploadDirectory": "Upload Directory"
}

45
public/locales/zh/translation.json Normal file
View File

@ -0,0 +1,45 @@
{
"container": "容器",
"currentTime": "当前时间: {{time, YYYY-MM-DD}}",
"Your profile": "你的个人资料",
"Your orgs": "你的组织",
"Site Map": "站点地图",
"User": "用户",
"Login Out": "退出登录",
"Switch Org": "切换组织",
"Save": "保存",
"Profile": "个人资料",
"Edit your profile": "编辑你的个人资料",
"Name": "姓名",
"Email": "邮箱",
"Phone": "电话",
"Description": "描述",
"Avatar": "头像",
"Avatar Upload": "头像上传",
"Edit": "编辑",
"Add": "添加",
"Delete": "删除",
"Cancel": "取消",
"Confirm": "确认",
"Add Org": "添加组织",
"Home": "首页",
"User App": "用户应用",
"File App": "文件应用",
"Org": "组织",
"About": "关于",
"Contact": "联系",
"Terms": "条款",
"Privacy": "隐私",
"Language": "语言",
"Theme": "主题",
"Dark": "暗黑",
"Light": "明亮",
"Container": "容器",
"Submit": "提交",
"Username": "用户名",
"Back": "返回",
"User List": "用户列表",
"Switch to Org": "切换组织",
"Login": "登录",
"uploadDirectory": "上传文件夹"
}

2
src/App.tsx
View File

@ -10,7 +10,6 @@ import { Redirect } from './modules/Redirect';
import { CustomThemeProvider } from '@kevisual/center-components/theme/index.tsx'; import { CustomThemeProvider } from '@kevisual/center-components/theme/index.tsx';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { ToastContainer } from 'react-toastify'; import { ToastContainer } from 'react-toastify';
// import 'react-toastify/dist/ReactToastify.css';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
@ -62,6 +61,7 @@ export const App = () => {
<Route path='/container/*' element={<ContainerApp />} /> <Route path='/container/*' element={<ContainerApp />} />
<Route path='/map/*' element={<MapApp />} /> <Route path='/map/*' element={<MapApp />} />
<Route path='/user/*' element={<UserApp />} /> <Route path='/user/*' element={<UserApp />} />
<Route path='/user1/*' element={<UserApp />} />
<Route path='/org/*' element={<OrgApp />} /> <Route path='/org/*' element={<OrgApp />} />
<Route path='/app/*' element={<UserAppApp />} /> <Route path='/app/*' element={<UserAppApp />} />
<Route path='/file/*' element={<FileApp />} /> <Route path='/file/*' element={<FileApp />} />

34
src/I18Next.tsx Normal file
View File

@ -0,0 +1,34 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend'; // 引入 Backend 插件
type I18NextProviderProps = {
children: React.ReactNode;
};
export const initI18n = (basename: string) => {
// 初始化 i18n
i18n
.use(Backend) // 使用 Backend 插件
.use(initReactI18next)
.init({
backend: {
loadPath: `${basename}/locales/{{lng}}/{{ns}}.json`, // 指定 JSON 文件的路径
},
lng: 'zh', // 默认语言
fallbackLng: 'en', // 备用语言
interpolation: {
escapeValue: false, // react 已经安全地处理了转义
},
});
};
/**
* 国际化组件,初始化
* @param props
* @returns
*/
export const I18NextProvider = (props: I18NextProviderProps) => {
const { children } = props;
return <>{children}</>;
};

67
src/globals.css
View File

@ -3,13 +3,6 @@
@import './index.css'; @import './index.css';
@import '@kevisual/center-components/theme/wind-theme.css'; @import '@kevisual/center-components/theme/wind-theme.css';
html,
body {
width: 100%;
height: 100%;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
}
h1 { h1 {
@apply text-2xl font-bold; @apply text-2xl font-bold;
} }
@ -38,7 +31,7 @@ h3 {
@apply text-gray-700; @apply text-gray-700;
} }
@utility card-key { @utility card-key {
@apply text-xs text-gray-400; @apply text-xs;
} }
@utility card-footer { @utility card-footer {
@apply text-sm text-gray-500; @apply text-sm text-gray-500;
@ -48,7 +41,7 @@ h3 {
} }
@utility layout-menu { @utility layout-menu {
@apply bg-secondary p-2 text-white flex justify-between h-12 ; @apply bg-secondary p-2 text-white flex justify-between h-12;
-webkit-app-region: drag; -webkit-app-region: drag;
} }
@utility no-drag { @utility no-drag {
@ -64,58 +57,8 @@ h3 {
} }
} }
/* 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; .cm-editor {
} @apply h-full;
@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; /* 修复交汇时出现的白块 */
}
} }

13
src/main.tsx
View File

@ -1,5 +1,16 @@
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { App } from './App.tsx'; import { App } from './App.tsx';
import './globals.css'; import './globals.css';
import { initI18n, I18NextProvider } from './I18Next.tsx';
import { basename } from './modules/basename.ts';
import { Suspense } from 'react';
createRoot(document.getElementById('root')!).render(<App />); initI18n(basename);
createRoot(document.getElementById('root')!).render(
<I18NextProvider>
<Suspense fallback={<div>Loading...</div>}>
<App />
</Suspense>
</I18NextProvider>,
);

120
src/modules/layout/LayoutUser.tsx
View File

@ -1,42 +1,18 @@
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { useLayoutStore } from './store'; import { useLayoutStore } from './store';
import clsx from 'clsx'; import clsx from 'clsx';
import { Button, Dropdown } from 'antd'; import { Menu, MenuItem, Tooltip } from '@mui/material';
import { Button } from '@mui/material';
import { IconButton } from '@kevisual/center-components/button/index.tsx';
import { message } from '@/modules/message'; import { message } from '@/modules/message';
import { import { DashboardOutlined, HomeOutlined, LogoutOutlined, SmileOutlined } from '@ant-design/icons';
CloseOutlined,
CodeOutlined,
DashboardOutlined,
HomeOutlined,
LogoutOutlined,
MessageOutlined,
ReadOutlined,
RocketOutlined,
SmileOutlined,
SwapOutlined,
SwitcherOutlined,
UserOutlined,
} from '@ant-design/icons';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { query } from '../query'; import { query } from '../query';
import { useNewNavigate } from '../navicate'; import { useNewNavigate } from '../navicate';
const meun = [ import { Users, X } from 'lucide-react';
{ import { useTranslation } from 'react-i18next';
title: 'Your profile', import React from 'react';
icon: <HomeOutlined />,
link: '/user/profile',
},
{
title: 'Your orgs',
icon: <DashboardOutlined />,
link: '/org/edit/list',
},
{
title: 'Site Map',
icon: <HomeOutlined />,
link: '/map',
},
];
export const LayoutUser = () => { export const LayoutUser = () => {
const { open, setOpen, ...store } = useLayoutStore( const { open, setOpen, ...store } = useLayoutStore(
useShallow((state) => ({ useShallow((state) => ({
@ -47,6 +23,24 @@ export const LayoutUser = () => {
})), })),
); );
const navigate = useNewNavigate(); const navigate = useNewNavigate();
const { t } = useTranslation();
const meun = [
{
title: t('Your profile'),
icon: <HomeOutlined />,
link: '/user/profile',
},
{
title: t('Your orgs'),
icon: <DashboardOutlined />,
link: '/org/edit/list',
},
{
title: t('Site Map'),
icon: <HomeOutlined />,
link: '/map',
},
];
const items = useMemo(() => { const items = useMemo(() => {
const orgs = store.me?.orgs || []; const orgs = store.me?.orgs || [];
return orgs.map((item) => { return orgs.map((item) => {
@ -57,30 +51,41 @@ export const LayoutUser = () => {
}; };
}); });
}, [store.me]); }, [store.me]);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return ( return (
<div className={clsx('w-full h-full absolute z-20 no-drag', !open && 'hidden')}> <div className={clsx('w-full h-full absolute z-20 no-drag ', !open && 'hidden')}>
<div <div
className='bg-white w-full absolute h-full opacity-60 z-0' className='w-full absolute h-full opacity-60 z-0'
onClick={() => { onClick={() => {
setOpen(false); setOpen(false);
}}></div> }}></div>
<div className='w-[400px] h-full absolute top-0 right-0 bg-white rounded-l-lg'> <div className='w-[400px] bg-amber-900 text-primary transition-all duration-300 h-full absolute top-0 right-0 rounded-l-lg'>
<div className='flex justify-between p-6 mt-4 font-bold items-center border-b'> <div className='flex justify-between p-6 mt-4 font-bold items-center border-b'>
User: {store.me?.username} <div className='flex items-center gap-2'>
{t('User')}: <span className='text-primary'>{store.me?.username}</span>
</div>
<div className='flex gap-4'> <div className='flex gap-4'>
{items.length > 0 && ( {items.length > 0 && (
<Dropdown <Tooltip title={t('Switch Org')}>
placement='bottomRight' <Button aria-controls='switch-org-menu' aria-haspopup='true' onClick={handleClick}>
menu={{ <Users />
items: items, </Button>
onClick: (item) => { </Tooltip>
store.switchOrg(item.key, 'org');
},
}}>
<Button icon={<SwapOutlined />} onClick={() => {}}></Button>
</Dropdown>
)} )}
<Button icon={<CloseOutlined />} onClick={() => setOpen(false)}></Button>
<Button onClick={() => setOpen(false)}>
<X />
</Button>
</div> </div>
</div> </div>
<div className='mt-3 font-medium'> <div className='mt-3 font-medium'>
@ -88,7 +93,7 @@ export const LayoutUser = () => {
return ( return (
<div <div
key={index} key={index}
className='flex items-center p-4 hover:bg-gray-100 cursor-pointer' className='flex items-center p-4 hover:bg-secondary hover:text-white cursor-pointer'
onClick={() => { onClick={() => {
if (item.link) { if (item.link) {
navigate(item.link); navigate(item.link);
@ -104,7 +109,7 @@ export const LayoutUser = () => {
})} })}
</div> </div>
<div <div
className='flex items-center p-4 hover:bg-gray-100 cursor-pointer' className='flex items-center p-4 hover:bg-secondary hover:text-white cursor-pointer'
onClick={() => { onClick={() => {
query.removeToken(); query.removeToken();
window.open('/user/login', '_self'); window.open('/user/login', '_self');
@ -112,9 +117,24 @@ export const LayoutUser = () => {
<div className='mr-4'> <div className='mr-4'>
<LogoutOutlined /> <LogoutOutlined />
</div> </div>
<div>Login Out</div> <div>{t('Login Out')}</div>
</div> </div>
</div> </div>
<Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
{items.map((item, index) => {
return (
<MenuItem
key={index}
onClick={() => {
store.switchOrg(item.key, 'org');
handleClose();
}}>
<div className='mr-4'>{item.icon}</div>
<div>{item.label}</div>
</MenuItem>
);
})}
</Menu>
</div> </div>
); );
}; };

79
src/modules/layout/Menu.tsx
View File

@ -3,53 +3,44 @@ import { useLayoutStore } from './store';
import clsx from 'clsx'; import clsx from 'clsx';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
import { message } from '@/modules/message'; import { message } from '@/modules/message';
import { import { AppstoreOutlined, CodeOutlined, FolderOutlined, HomeOutlined, SmileOutlined, SwitcherOutlined } from '@ant-design/icons';
AppstoreOutlined,
CloseOutlined,
CodeOutlined,
DashboardOutlined,
FolderOutlined,
HomeOutlined,
MessageOutlined,
ReadOutlined,
RocketOutlined,
SmileOutlined,
SwitcherOutlined,
} from '@ant-design/icons';
import { X } from 'lucide-react'; import { X } from 'lucide-react';
import { useNewNavigate } from '../navicate'; import { useNewNavigate } from '../navicate';
const meun = [ import { useTranslation } from 'react-i18next';
{
title: 'Home',
icon: <HomeOutlined />,
link: '/map',
},
{
title: 'User App',
icon: <AppstoreOutlined />,
link: '/app/edit/list',
},
{
title: 'File App',
icon: <FolderOutlined />,
link: '/file/edit/list',
},
{
title: 'Container',
icon: <CodeOutlined />,
link: '/container/edit/list',
},
{
title: 'Org',
icon: <SwitcherOutlined />,
link: '/org/edit/list',
},
{
title: 'About',
icon: <SmileOutlined />,
},
];
export const LayoutMenu = () => { export const LayoutMenu = () => {
const { t } = useTranslation();
const meun = [
{
title: t('Home'),
icon: <HomeOutlined />,
link: '/map',
},
{
title: t('User App'),
icon: <AppstoreOutlined />,
link: '/app/edit/list',
},
{
title: t('File App'),
icon: <FolderOutlined />,
link: '/file/edit/list',
},
{
title: t('Container'),
icon: <CodeOutlined />,
link: '/container/edit/list',
},
{
title: t('Org'),
icon: <SwitcherOutlined />,
link: '/org/edit/list',
},
{
title: t('About'),
icon: <SmileOutlined />,
},
];
const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen }))); const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
const navigate = useNewNavigate(); const navigate = useNewNavigate();
return ( return (

54
src/modules/layout/index.tsx
View File

@ -1,5 +1,5 @@
import { MenuOutlined, SwapOutlined } from '@ant-design/icons'; import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd'; import { Tooltip } from '@mui/material';
import { Outlet } from 'react-router-dom'; import { Outlet } from 'react-router-dom';
import { LayoutMenu } from './Menu'; import { LayoutMenu } from './Menu';
import { useLayoutStore, usePlatformStore } from './store'; import { useLayoutStore, usePlatformStore } from './store';
@ -7,9 +7,14 @@ import { useShallow } from 'zustand/react/shallow';
import { useEffect, useLayoutEffect, useState } from 'react'; import { useEffect, useLayoutEffect, useState } from 'react';
import { LayoutUser } from './LayoutUser'; import { LayoutUser } from './LayoutUser';
import PandaPNG from '@/assets/panda.png'; import PandaPNG from '@/assets/panda.png';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'; import { Panel, PanelGroup } from 'react-resizable-panels';
import clsx from 'clsx'; import clsx from 'clsx';
import { IconButton as Button } from '@mui/material'; import { Button, Menu, MenuItem } from '@mui/material';
import i18n from 'i18next';
import { IconButton } from '@kevisual/center-components/button/index.tsx';
import { Languages } from 'lucide-react';
type LayoutMainProps = { type LayoutMainProps = {
title?: React.ReactNode; title?: React.ReactNode;
children?: React.ReactNode; children?: React.ReactNode;
@ -46,6 +51,23 @@ export const LayoutMain = (props: LayoutMainProps) => {
useEffect(() => { useEffect(() => {
menuStore.getMe(); menuStore.getMe();
}, []); }, []);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const changeLanguage = (lng: string) => {
i18n.changeLanguage(lng);
handleClose();
};
const currentLanguage = i18n.language;
return ( return (
<div className='flex w-full h-full flex-col relative'> <div className='flex w-full h-full flex-col relative'>
<LayoutMenu /> <LayoutMenu />
@ -54,16 +76,31 @@ export const LayoutMain = (props: LayoutMainProps) => {
style={{ style={{
cursor: isElectron ? 'move' : 'default', cursor: isElectron ? 'move' : 'default',
}}> }}>
<Button <IconButton
className={clsx('mr-4 cursor-pointer no-drag', isMac && 'ml-16')} className={clsx('mr-4 cursor-pointer no-drag', isMac && 'ml-16')}
onClick={() => { onClick={() => {
menuStore.setOpen(true); menuStore.setOpen(true);
}}> }}>
<MenuOutlined /> <MenuOutlined />
</Button> </IconButton>
<div className='flex grow justify-between pl-4 items-center'> <div className='flex grow justify-between pl-4 items-center'>
{props.title} {props.title}
<div className='mr-4 flex gap-4 items-center no-drag'> <div className='mr-4 flex gap-4 items-center no-drag'>
<div>
<Tooltip title={currentLanguage === 'en' ? 'English' : 'Chinese'}>
<IconButton onClick={handleClick} variant='contained'>
<Languages />
</IconButton>
</Tooltip>
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem selected={currentLanguage === 'en'} onClick={() => changeLanguage('en')}>
English
</MenuItem>
<MenuItem selected={currentLanguage === 'zh'} onClick={() => changeLanguage('zh')}>
中文
</MenuItem>
</Menu>
</div>
{menuStore.me?.type === 'org' && ( {menuStore.me?.type === 'org' && (
<div> <div>
<Tooltip title='Switch To User'> <Tooltip title='Switch To User'>
@ -97,16 +134,11 @@ export const LayoutMain = (props: LayoutMainProps) => {
<PanelGroup className='w-full h-full panel-layout' autoSaveId='editor-layout-main' direction='horizontal'> <PanelGroup className='w-full h-full panel-layout' autoSaveId='editor-layout-main' direction='horizontal'>
<Panel style={{ height: '100%' }}> <Panel style={{ height: '100%' }}>
<div className='h-full overflow-hidden'> <div className='h-full overflow-hidden'>
<div className='w-full h-full rounded-lg'> <div className='w-full h-full rounded-lg text-primary'>
<Outlet /> <Outlet />
</div> </div>
</div> </div>
</Panel> </Panel>
{/* <PanelResizeHandle />
<Panel style={{ height: '100%' }} defaultSize={25} className={clsx('bg-gray-100')}>
侧边栏
</Panel> */}
</PanelGroup> </PanelGroup>
</div> </div>
<LayoutUser /> <LayoutUser />

72
src/pages/app/edit/AppVersionList.tsx
View File

@ -2,14 +2,19 @@ import { useNavigation, useParams } from 'react-router';
import { useAppVersionStore } from '../store'; import { useAppVersionStore } from '../store';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { Button, Form, Input, Modal, Space, Tooltip } from 'antd'; import { Form, Input, Modal, Tooltip } from 'antd';
import { CloudUploadOutlined, DeleteOutlined, EditOutlined, FileOutlined, LeftOutlined, LinkOutlined, PlusOutlined } from '@ant-design/icons'; import { CloudUploadOutlined, DeleteOutlined, EditOutlined, FileOutlined, LeftOutlined, LinkOutlined, PlusOutlined } from '@ant-design/icons';
import { isObjectNull } from '@/utils/is-null'; import { isObjectNull } from '@/utils/is-null';
import { FileUpload } from '../modules/FileUpload'; import { FileUpload } from '../modules/FileUpload';
import clsx from 'clsx'; import clsx from 'clsx';
import { message } from '@/modules/message'; import { message } from '@/modules/message';
import { useNewNavigate } from '@/modules'; import { useNewNavigate } from '@/modules';
import { Button } from '@mui/material';
import { Dialog, DialogContent, DialogTitle, ButtonGroup } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { IconButton } from '@kevisual/center-components/button/index.tsx';
const FormModal = () => { const FormModal = () => {
const { t } = useTranslation();
const [form] = Form.useForm(); const [form] = Form.useForm();
const containerStore = useAppVersionStore( const containerStore = useAppVersionStore(
useShallow((state) => { useShallow((state) => {
@ -68,11 +73,11 @@ const FormModal = () => {
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item label=' ' colon={false}> <Form.Item label=' ' colon={false}>
<Button type='primary' htmlType='submit'> <Button type='submit' variant='contained' color='primary'>
Submit {t('submit')}
</Button> </Button>
<Button className='ml-2' htmlType='reset' onClick={onClose}> <Button className='ml-2' onClick={onClose}>
Cancel {t('cancel')}
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
@ -115,24 +120,25 @@ export const AppVersionList = () => {
return ( return (
<div className='w-full h-full flex bg-slate-100'> <div className='w-full h-full flex bg-slate-100'>
<div className='p-2 bg-white'> <div className='p-2 bg-white'>
<Button <IconButton
onClick={() => { onClick={() => {
versionStore.setFormData({ key: appKey }); versionStore.setFormData({ key: appKey });
versionStore.setShowEdit(true); versionStore.setShowEdit(true);
}} }}>
icon={<PlusOutlined />} <PlusOutlined />
/> </IconButton>
</div> </div>
<div className='grow h-full relative'> <div className='grow h-full relative'>
<div className='absolute top-2 left-4'> <div className='absolute top-2 left-4'>
<Tooltip title='返回' placement='bottom'> <Tooltip title='返回' placement='bottom'>
<Button <IconButton
variant='contained'
onClick={() => { onClick={() => {
navigate('/app/edit/list'); navigate('/app/edit/list');
}} }}>
icon={<LeftOutlined />} <LeftOutlined />
/> </IconButton>
</Tooltip> </Tooltip>
</div> </div>
@ -144,7 +150,7 @@ export const AppVersionList = () => {
const color = isPublish ? 'bg-green-500' : ''; const color = isPublish ? 'bg-green-500' : '';
const isRunning = item.status === 'running'; const isRunning = item.status === 'running';
return ( return (
<div className='card border-t w-[300px]' key={index}> <div className='card w-[300px]' key={index}>
<div className={'flex items-center justify-between'}> <div className={'flex items-center justify-between'}>
{item.version} {item.version}
@ -153,7 +159,10 @@ export const AppVersionList = () => {
</Tooltip> </Tooltip>
</div> </div>
<div className='mt-4'> <div className='mt-4'>
<Space.Compact> <ButtonGroup
variant='contained'
color='primary'
sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
{/* <Button {/* <Button
onClick={() => { onClick={() => {
versionStore.setFormData(item); versionStore.setFormData(item);
@ -172,21 +181,20 @@ export const AppVersionList = () => {
}, },
}); });
e.stopPropagation(); e.stopPropagation();
}} }}>
icon={<DeleteOutlined />} <DeleteOutlined />
/> </Button>
</Tooltip> </Tooltip>
<Tooltip title='使用当前版本，发布为此版本'> <Tooltip title='使用当前版本，发布为此版本'>
<Button <Button
icon={<CloudUploadOutlined />}
onClick={() => { onClick={() => {
versionStore.publishVersion({ id: item.id }); versionStore.publishVersion({ id: item.id });
}} }}>
/> <CloudUploadOutlined />
</Button>
</Tooltip> </Tooltip>
<Tooltip title={'To Test App'}> <Tooltip title={'To Test App'}>
<Button <Button
icon={<LinkOutlined />}
onClick={() => { onClick={() => {
if (isRunning) { if (isRunning) {
const link = new URL(`/test/${item.id}`, location.origin); const link = new URL(`/test/${item.id}`, location.origin);
@ -194,18 +202,20 @@ export const AppVersionList = () => {
} else { } else {
message.error('The app is not running'); message.error('The app is not running');
} }
}}></Button> }}>
<LinkOutlined />
</Button>
</Tooltip> </Tooltip>
<Tooltip title='文件管理'> <Tooltip title='文件管理'>
<Button <Button
icon={<FileOutlined />}
onClick={() => { onClick={() => {
versionStore.setFormData(item); versionStore.setFormData(item);
setIsUpload(true); setIsUpload(true);
}} }}>
/> <FileOutlined />
</Button>
</Tooltip> </Tooltip>
</Space.Compact> </ButtonGroup>
</div> </div>
</div> </div>
); );
@ -220,12 +230,12 @@ export const AppVersionList = () => {
<div className='bg-white p-2 w-[600px] h-full flex flex-col'> <div className='bg-white p-2 w-[600px] h-full flex flex-col'>
<div className='header flex items-center gap-2'> <div className='header flex items-center gap-2'>
<Tooltip title='返回'> <Tooltip title='返回'>
<Button <IconButton
onClick={() => { onClick={() => {
setIsUpload(false); setIsUpload(false);
}} }}>
icon={<LeftOutlined />} <LeftOutlined />
/> </IconButton>
</Tooltip> </Tooltip>
<div className='font-bold'>{versionStore.key}</div> <div className='font-bold'>{versionStore.key}</div>
</div> </div>

16
src/pages/app/modules/FileUpload.tsx
View File

@ -1,8 +1,9 @@
import { Button } from 'antd'; import { Button } from '@mui/material';
import { useCallback, useRef } from 'react'; import { useCallback, useRef } from 'react';
import { useAppVersionStore } from '../store'; import { useAppVersionStore } from '../store';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { message } from '@/modules/message'; import { message } from '@/modules/message';
import { useTranslation } from 'react-i18next';
export type FileType = { export type FileType = {
name: string; name: string;
size: number; size: number;
@ -12,6 +13,7 @@ export type FileType = {
export const FileUpload = () => { export const FileUpload = () => {
const ref = useRef<HTMLInputElement | null>(null); const ref = useRef<HTMLInputElement | null>(null);
const { t } = useTranslation();
const appVersionStore = useAppVersionStore( const appVersionStore = useAppVersionStore(
useShallow((state) => { useShallow((state) => {
return { return {
@ -27,11 +29,21 @@ export const FileUpload = () => {
// webkitRelativePath // webkitRelativePath
let files = Array.from(e.target.files) as any[]; let files = Array.from(e.target.files) as any[];
console.log(files); console.log(files);
if (files.length === 0) {
message.error('请选择文件');
return;
}
// 过滤 文件 .DS_Store // 过滤 文件 .DS_Store
files = files.filter((file) => { files = files.filter((file) => {
if (file.webkitRelativePath.startsWith('__MACOSX')) { if (file.webkitRelativePath.startsWith('__MACOSX')) {
return false; return false;
} }
// 过滤node_modules
if (file.webkitRelativePath.includes('node_modules')) {
return false;
}
// 过滤以.开头的文件
return !file.name.startsWith('.'); return !file.name.startsWith('.');
}); });
if (files.length === 0) { if (files.length === 0) {
@ -89,7 +101,7 @@ export const FileUpload = () => {
} }
ref.current!.click(); ref.current!.click();
}}> }}>
上传文件夹 {t('uploadDirectory')}
</Button> </Button>
</div> </div>
); );

143
src/pages/container/edit/List.tsx
View File

@ -1,30 +1,26 @@
import { Input, Modal, Select, Space, Switch } from 'antd'; import { Input, Modal, Select } from 'antd';
import { Fragment, useEffect, useState } from 'react'; import { Fragment, Suspense, useEffect, useState } from 'react';
import { TextArea } from '../components/TextArea'; import { TextArea } from '../components/TextArea';
import { useContainerStore } from '../store'; import { useContainerStore } from '../store';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { Form } from 'antd'; import { Form } from 'antd';
import copy from 'copy-to-clipboard'; // import copy from 'copy-to-clipboard';
import { useNewNavigate } from '@/modules'; import { useNewNavigate } from '@/modules';
import { message } from '@/modules/message'; import { message } from '@/modules/message';
import { Dialog, DialogTitle, DialogContent, Tooltip, Button, ButtonGroup } from '@mui/material'; import { Dialog, DialogTitle, DialogContent, Tooltip, Button, ButtonGroup } from '@mui/material';
import { IconButton } from '@kevisual/center-components/button/index.tsx'; import { IconButton } from '@kevisual/center-components/button/index.tsx';
import { getDirectoryAndName, toFile, uploadFileChunked } from '@kevisual/resources/index.ts'; import { getDirectoryAndName, toFile, uploadFileChunked } from '@kevisual/resources/index.ts';
import { import EditOutlined from '@ant-design/icons/EditOutlined';
EditOutlined, import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
SettingOutlined, import PlusOutlined from '@ant-design/icons/PlusOutlined';
LinkOutlined, import CloudUploadOutlined from '@ant-design/icons/CloudUploadOutlined';
SaveOutlined,
DeleteOutlined,
LeftOutlined,
MessageOutlined,
PlusOutlined,
DashboardOutlined,
CloudUploadOutlined,
} from '@ant-design/icons';
import clsx from 'clsx';
import { isObjectNull } from '@/utils/is-null'; import { isObjectNull } from '@/utils/is-null';
import { CardBlank } from '@/components/card/CardBlank'; import { CardBlank } from '@/components/card/CardBlank';
import { Settings } from 'lucide-react';
import React from 'react';
const DrawEdit = React.lazy(() => import('../module/DrawEdit'));
const FormModal = () => { const FormModal = () => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const containerStore = useContainerStore( const containerStore = useContainerStore(
@ -81,9 +77,11 @@ const FormModal = () => {
<Form.Item name='tags' label='tags'> <Form.Item name='tags' label='tags'>
<Select mode='tags' /> <Select mode='tags' />
</Form.Item> </Form.Item>
<Form.Item name='code' label='code'> {!isEdit && (
<TextArea /> <Form.Item name='code' label='code'>
</Form.Item> <TextArea />
</Form.Item>
)}
<Form.Item label=' ' colon={false}> <Form.Item label=' ' colon={false}>
<Button variant='contained' type='submit'> <Button variant='contained' type='submit'>
提交 提交
@ -122,10 +120,9 @@ const PublishFormModal = () => {
}, [containerStore.showEdit]); }, [containerStore.showEdit]);
const onFinish = async () => { const onFinish = async () => {
const values = form.getFieldsValue(); const values = form.getFieldsValue();
const success = await containerStore.updateData(values, { closePublish: false }); const containerRes = await containerStore.updateData(values, { closePublish: false });
if (success) { if (containerRes.code === 200) {
const formData = containerStore.formData; const code = containerRes.data?.code || '-';
const code = formData.code;
const fileName = values['publish']?.['fileName']; const fileName = values['publish']?.['fileName'];
let directoryAndName: ReturnType<typeof getDirectoryAndName> | null = null; let directoryAndName: ReturnType<typeof getDirectoryAndName> | null = null;
try { try {
@ -142,7 +139,6 @@ const PublishFormModal = () => {
const key = values['publish']['key']; const key = values['publish']['key'];
const version = values['publish']['version']; const version = values['publish']['version'];
const file = toFile(code, directoryAndName.name); const file = toFile(code, directoryAndName.name);
console.log('key', key, version, directoryAndName.directory, directoryAndName.name);
const res = await uploadFileChunked(file, { const res = await uploadFileChunked(file, {
appKey: key, appKey: key,
version, version,
@ -167,15 +163,15 @@ const PublishFormModal = () => {
return ( return (
<Dialog open={containerStore.showEdit} onClose={() => containerStore.setShowEdit(false)}> <Dialog open={containerStore.showEdit} onClose={() => containerStore.setShowEdit(false)}>
<DialogTitle>Publish</DialogTitle> <DialogTitle>Publish</DialogTitle>
<DialogContent sx={{ padding: '20px', minWidth: '600px' }}> <DialogContent sx={{ padding: '10px', minWidth: '600px' }}>
<Form <Form
form={form} form={form}
onFinish={onFinish} onFinish={onFinish}
labelCol={{ labelCol={{
span: 4, span: 6,
}} }}
wrapperCol={{ wrapperCol={{
span: 20, span: 18,
}}> }}>
<Form.Item name='id' hidden> <Form.Item name='id' hidden>
<Input /> <Input />
@ -229,12 +225,14 @@ export const ContainerList = () => {
setShowPublish: state.setShowPublish, setShowPublish: state.setShowPublish,
updateData: state.updateData, updateData: state.updateData,
formData: state.formData, formData: state.formData,
getOne: state.getOne,
setOpenDrawEdit: state.setOpenDrawEdit,
openDrawEdit: state.openDrawEdit,
}; };
}), }),
); );
const [codeEdit, setCodeEdit] = useState(false); // const [codeEdit, setCodeEdit] = useState(false);
const [code, setCode] = useState('');
useEffect(() => { useEffect(() => {
containerStore.getList(); containerStore.getList();
}, []); }, []);
@ -248,7 +246,7 @@ export const ContainerList = () => {
<div className='w-full h-full flex '> <div className='w-full h-full flex '>
<div className='p-2 flex flex-col gap-2'> <div className='p-2 flex flex-col gap-2'>
<Tooltip title='添加'> <Tooltip title='添加'>
<IconButton variant='contained' onClick={onAdd} sx={{ padding: '8px' }}> <IconButton variant='contained' onClick={onAdd}>
<PlusOutlined /> <PlusOutlined />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -264,56 +262,47 @@ export const ContainerList = () => {
className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg' className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg'
key={item.id} key={item.id}
onClick={() => { onClick={() => {
setCode(item.code); // containerStore.setFormData(item);
containerStore.setFormData(item);
setCodeEdit(true);
}}> }}>
<div className='px-4 cursor-pointer'> <div className='px-4 cursor-pointer'>
<div <div
className='font-bold flex items-center' className='font-bold flex items-center'
onClick={(e) => { onClick={(e) => {
copy(item.code);
e.stopPropagation(); e.stopPropagation();
message.success('copy code success');
}}> }}>
{item.title || '-'} {item.title || '-'}
<div className='font-thin card-key ml-3 text-xs'>{item.tags ? item.tags.join(', ') : ''}</div> <div className='font-thin card-key ml-3'>{item.tags ? item.tags.join(', ') : ''}</div>
</div> </div>
<div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div> <div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
</div> </div>
<div className='w-full text-xs'>
<TextArea className='max-h-[240px] scrollbar' value={item.code} readonly />
</div>
<div className='flex mt-2 '> <div className='flex mt-2 '>
<ButtonGroup variant='contained' color='primary'> <ButtonGroup
<Button variant='contained'
onClick={() => { color='primary'
// containerStore.publishData(item); sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
}}> <Tooltip title='编辑代码'>
<SettingOutlined /> <Button
</Button> onClick={(e) => {
containerStore.getOne(item.id);
containerStore.setFormData(item);
containerStore.setOpenDrawEdit(true);
e.stopPropagation();
}}>
<Settings size={16} />
</Button>
</Tooltip>
<Tooltip title='编辑'> <Tooltip title='编辑'>
<Button <Button
onClick={(e) => { onClick={(e) => {
containerStore.setFormData(item); containerStore.setFormData(item);
containerStore.setShowEdit(true); containerStore.setShowEdit(true);
setCodeEdit(false);
e.stopPropagation(); e.stopPropagation();
}}> }}>
<EditOutlined /> <EditOutlined />
</Button> </Button>
</Tooltip> </Tooltip>
{/* <Tooltip title='预览'> <Tooltip title='添加到 user app当中'>
<Button
onClick={(e) => {
// navicate('/container/preview/' + item.id);
window.open('/container/preview/' + item.id);
e.stopPropagation();
}}>
<LinkOutlined />
</Button>
</Tooltip> */}
<Tooltip title='发布到 user app当中'>
<Button <Button
onClick={(e) => { onClick={(e) => {
// containerStore.publishData(item); // containerStore.publishData(item);
@ -355,42 +344,12 @@ export const ContainerList = () => {
<CardBlank className='w-[400px]' /> <CardBlank className='w-[400px]' />
</div> </div>
</div> </div>
<div className={clsx('bg-gray-100 border-l-gray-200 border-bg-slate-300 w-[600px] shark-0', !codeEdit && 'hidden')}>
<div className='bg-white p-2'>
<div className='mt-2 ml-2 flex gap-2'>
<Tooltip title='返回'>
<Button
onClick={() => {
setCodeEdit(false);
containerStore.setFormData({});
}}>
<LeftOutlined />
</Button>
</Tooltip>
<Tooltip title='保存'>
<Button
onClick={() => {
containerStore.updateData({ ...containerStore.formData, code });
}}>
<SaveOutlined />
</Button>
</Tooltip>
</div>
</div>
<div className='h-[94%] p-2 rounded-2 shadow-xs'>
<TextArea
value={code}
onChange={(value) => {
setCode(value);
}}
className='h-full max-h-full scrollbar'
style={{ overflow: 'auto' }}
/>
</div>
</div>
</div> </div>
<FormModal /> <Suspense fallback={<div>Loading...</div>}>
<DrawEdit />
</Suspense>
<PublishFormModal /> <PublishFormModal />
<FormModal />
{contextHolder} {contextHolder}
</div> </div>
); );

103
src/pages/container/module/DrawEdit.tsx Normal file
View File

@ -0,0 +1,103 @@
import { useEffect, useRef, useState } from 'react';
import { BaseEditor } from '@kevisual/codemirror/editor/editor.ts';
import { Drawer } from '@mui/material';
import { useShallow } from 'zustand/shallow';
import { useContainerStore } from '../store';
import { Tooltip } from '@mui/material';
import { IconButton } from '@kevisual/center-components/button/index.tsx';
import { LeftOutlined, SaveOutlined } from '@ant-design/icons';
export const DrawEdit = () => {
const editorElRef = useRef<HTMLDivElement>(null);
const editorRef = useRef<BaseEditor>(null);
const containerStore = useContainerStore(
useShallow((state) => {
return {
openDrawEdit: state.openDrawEdit,
setOpenDrawEdit: state.setOpenDrawEdit,
data: state.data,
updateData: state.updateData,
};
}),
);
const { openDrawEdit, setOpenDrawEdit } = containerStore;
const [mount, setMount] = useState(false);
useEffect(() => {
if (openDrawEdit && editorElRef.current && !mount) {
editorRef.current = new BaseEditor();
editorRef.current.createEditor(editorElRef.current);
setMount(true);
}
return () => {
if (editorRef.current) {
editorRef.current.destroyEditor();
}
};
}, [openDrawEdit]);
useEffect(() => {
if (openDrawEdit && containerStore.data?.id && mount) {
const editor = editorRef.current;
const formData = containerStore.data;
const fileType = editor?.getFileType(formData.title);
const language = editor?.language;
if (fileType && fileType !== language) {
editor?.setLanguage(fileType, editorElRef.current!);
} else {
editor?.resetEditor(editorElRef.current!);
}
editor?.setContent(formData.code || '');
}
}, [openDrawEdit, containerStore.data?.id, mount]);
return (
<Drawer
open={openDrawEdit}
ModalProps={{
keepMounted: true, // 保持挂载
hideBackdrop: true, // 移除mask
disableEnforceFocus: true, // 允许操作背景内容
disableAutoFocus: true, // 防止自动聚焦
}}
anchor='right'>
<div className='bg-secondary w-[600px] h-[48px]'>
<div className='text-white flex p-2'>
<div className='ml-2 flex gap-2'>
<Tooltip title='返回'>
<IconButton
sx={{
'&:hover': {
color: 'primary.main',
},
}}
onClick={() => {
setOpenDrawEdit(false);
}}>
<LeftOutlined />
</IconButton>
</Tooltip>
<Tooltip title='保存'>
<IconButton
sx={{
'&:hover': {
color: 'primary.main',
},
}}
onClick={() => {
const code = editorRef.current?.getContent();
containerStore.updateData({ id: containerStore.data.id, code }, { refresh: false });
}}>
<SaveOutlined />
</IconButton>
</Tooltip>
</div>
<div className='flex-1 ml-2 flex items-center'>{containerStore.data?.title}</div>
</div>
</div>
<div className='border-primary' style={{ height: 'calc(100% - 50px)' }} ref={editorElRef}></div>
</Drawer>
);
};
export default DrawEdit;

32
src/pages/container/store/index.ts
View File

@ -12,8 +12,13 @@ type ContainerStore = {
setLoading: (loading: boolean) => void; setLoading: (loading: boolean) => void;
list: any[]; list: any[];
getList: () => Promise<void>; getList: () => Promise<void>;
updateData: (data: any, opts?: { closePublish?: boolean; closeEdit?: boolean }) => Promise<Boolean>; updateData: (data: any, opts?: { closePublish?: boolean; closeEdit?: boolean, refresh?: boolean }) => Promise<any>;
deleteData: (id: string) => Promise<void>; deleteData: (id: string) => Promise<void>;
openDrawEdit: boolean;
setOpenDrawEdit: (openDrawEdit: boolean) => void;
getOne: (id: string) => Promise<void>;
data: any;
setData: (data: any) => void;
}; };
export const useContainerStore = create<ContainerStore>((set, get) => { export const useContainerStore = create<ContainerStore>((set, get) => {
return { return {
@ -43,6 +48,7 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
const { getList } = get(); const { getList } = get();
const closePublish = opts?.closePublish ?? true; const closePublish = opts?.closePublish ?? true;
const closeEdit = opts?.closeEdit ?? true; const closeEdit = opts?.closeEdit ?? true;
const refresh = opts?.refresh ?? true;
const res = await query.post({ const res = await query.post({
path: 'container', path: 'container',
key: 'update', key: 'update',
@ -51,7 +57,9 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
if (res.code === 200) { if (res.code === 200) {
message.success('Success'); message.success('Success');
set({ formData: res.data }); set({ formData: res.data });
getList(); if (refresh) {
getList();
}
if (closePublish) { if (closePublish) {
set({ showPublish: false }); set({ showPublish: false });
} }
@ -61,7 +69,7 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
} else { } else {
message.error(res.message || 'Request failed'); message.error(res.message || 'Request failed');
} }
return res.code === 200; return res;
}, },
deleteData: async (id) => { deleteData: async (id) => {
const { getList } = get(); const { getList } = get();
@ -77,5 +85,23 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
message.error(res.message || 'Request failed'); message.error(res.message || 'Request failed');
} }
}, },
openDrawEdit: false,
setOpenDrawEdit: (openDrawEdit) => set({ openDrawEdit }),
getOne: async (id) => {
set({ loading: true, data: {} });
const res = await query.post({
path: 'container',
key: 'get',
id,
});
set({ loading: false });
if (res.code === 200) {
set({ data: res.data });
} else {
message.error(res.message || 'Request failed');
}
},
data: {},
setData: (data) => set({ data }),
}; };
}); });

68
src/pages/map/index.tsx
View File

@ -1,33 +1,35 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { useNewNavigate } from '@/modules'; import { useNewNavigate } from '@/modules';
const serverList = ['container', 'map']; import { useTranslation } from 'react-i18next';
const serverPath = [
{
path: 'container',
links: ['edit/list', 'preview/:id', 'edit/:id'],
},
{
path: 'app',
links: ['edit/list', ':app/version/list'],
},
{
path: 'file',
links: ['edit/list'],
},
{
path: 'map',
links: ['/'],
},
{
path: 'org',
links: ['edit/list'],
},
];
const ServerPath = () => { const ServerPath = () => {
const navigate = useNewNavigate(); const navigate = useNewNavigate();
const { t } = useTranslation();
const serverPath = [
{
path: 'container',
links: ['edit/list', 'preview/:id', 'edit/:id'],
},
{
path: 'app',
links: ['edit/list', ':app/version/list'],
},
{
path: 'file',
links: ['edit/list'],
},
{
path: 'map',
links: ['/'],
},
{
path: 'org',
links: ['edit/list'],
},
];
return ( return (
<div className='p-2 w-full h-full bg-gray-200'> <div className='p-2 w-full h-full bg-gray-200 text-primary'>
<h1 className='p-4 w-1/2 m-auto h1'>Site Map</h1> <h1 className='p-4 w-1/2 m-auto h1'>{t('Site Map')}</h1>
<div className='w-1/2 m-auto bg-white p-4 border rounded-md shadow-md min-w-[700px] max-h-[80vh] overflow-auto scrollbar'> <div className='w-1/2 m-auto bg-white p-4 border rounded-md shadow-md min-w-[700px] max-h-[80vh] overflow-auto scrollbar'>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
{serverPath.map((item) => { {serverPath.map((item) => {
@ -42,7 +44,6 @@ const ServerPath = () => {
if (hasId) { if (hasId) {
return; return;
} }
console.log('link', link);
if (link === '/') { if (link === '/') {
navigate(`/${item.path}`); navigate(`/${item.path}`);
return; return;
@ -69,18 +70,3 @@ const ServerPath = () => {
); );
}; };
export const App = ServerPath; export const App = ServerPath;
export const ServerList = () => {
return (
<div className='p-2 w-full h-full bg-gray-200'>
<div className='flex flex-col w-1/2 m-auto bg-white p-4 border rounded-md shadow-md'>
{serverList.map((item) => {
return (
<div key={item} className='flex flex-col'>
<div>{item}</div>
</div>
);
})}
</div>
</div>
);
};

148
src/pages/org/edit/List.tsx
View File

@ -1,21 +1,19 @@
import { Button, Input, Modal, Table, Tooltip } from 'antd'; import { Input, Modal } from 'antd';
import { Fragment, useEffect, useMemo, useState } from 'react'; import { Fragment, useEffect, useState } from 'react';
import { message } from '@/modules/message';
import { useOrgStore } from '../store'; import { useOrgStore } from '../store';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { Form } from 'antd'; import { Form } from 'antd';
import { useNewNavigate } from '@/modules'; import { useNewNavigate } from '@/modules';
import { import { useTranslation } from 'react-i18next';
EditOutlined, import { Tooltip, Button, ButtonGroup, Dialog, DialogTitle, DialogContent } from '@mui/material';
SettingOutlined, import { IconButton } from '@kevisual/center-components/button/index.tsx';
LinkOutlined, import EditOutlined from '@ant-design/icons/EditOutlined';
SaveOutlined, import SaveOutlined from '@ant-design/icons/SaveOutlined';
DeleteOutlined, import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
LeftOutlined, import LeftOutlined from '@ant-design/icons/LeftOutlined';
PlusOutlined, import PlusOutlined from '@ant-design/icons/PlusOutlined';
SwapOutlined, import SwapOutlined from '@ant-design/icons/SwapOutlined';
UnorderedListOutlined, import UnorderedListOutlined from '@ant-design/icons/UnorderedListOutlined';
} from '@ant-design/icons';
import clsx from 'clsx'; import clsx from 'clsx';
import { isObjectNull } from '@/utils/is-null'; import { isObjectNull } from '@/utils/is-null';
import { CardBlank } from '@/components/card/CardBlank'; import { CardBlank } from '@/components/card/CardBlank';
@ -23,6 +21,7 @@ import { useLayoutStore } from '@/modules/layout/store';
const FormModal = () => { const FormModal = () => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { t } = useTranslation();
const userStore = useOrgStore( const userStore = useOrgStore(
useShallow((state) => { useShallow((state) => {
return { return {
@ -53,42 +52,40 @@ const FormModal = () => {
}; };
const isEdit = userStore.formData.id; const isEdit = userStore.formData.id;
return ( return (
<Modal <Dialog open={userStore.showEdit} onClose={() => userStore.setShowEdit(false)}>
title={isEdit ? 'Edit' : 'Add'} <DialogTitle>{isEdit ? 'Edit' : 'Add'}</DialogTitle>
open={userStore.showEdit} <DialogContent sx={{ padding: '20px', minWidth: '600px' }}>
onClose={() => userStore.setShowEdit(false)} <Form
destroyOnClose form={form}
footer={false} onFinish={onFinish}
width={800} labelCol={{
onCancel={onClose}> span: 4,
<Form }}
form={form} wrapperCol={{
onFinish={onFinish} span: 20,
labelCol={{ }}>
span: 4, <Form.Item name='id' hidden>
}} <Input />
wrapperCol={{ </Form.Item>
span: 20, <Form.Item name='username' label='username'>
}}> <Input disabled={isEdit} />
<Form.Item name='id' hidden> </Form.Item>
<Input /> <Form.Item name='description' label='description'>
</Form.Item> <Input.TextArea rows={4} />
<Form.Item name='username' label='username'> </Form.Item>
<Input disabled={isEdit} /> <Form.Item label=' ' colon={false}>
</Form.Item> <div className='flex gap-2'>
<Form.Item name='description' label='description'> <Button variant='contained' type='submit'>
<Input.TextArea rows={4} /> {t('Submit')}
</Form.Item> </Button>
<Form.Item label=' ' colon={false}> <Button className='ml-2' onClick={onClose}>
<Button type='primary' htmlType='submit'> {t('Cancel')}
Submit </Button>
</Button> </div>
<Button className='ml-2' htmlType='reset' onClick={onClose}> </Form.Item>
Cancel </Form>
</Button> </DialogContent>
</Form.Item> </Dialog>
</Form>
</Modal>
); );
}; };
export const List = () => { export const List = () => {
@ -125,10 +122,15 @@ export const List = () => {
userStore.setFormData({}); userStore.setFormData({});
userStore.setShowEdit(true); userStore.setShowEdit(true);
}; };
const { t } = useTranslation();
return ( return (
<div className='w-full h-full flex'> <div className='w-full h-full flex'>
<div className='p-2'> <div className='p-2'>
<Button onClick={onAdd} icon={<PlusOutlined />}></Button> <Tooltip title={t('Add Org')}>
<IconButton onClick={onAdd} variant='contained'>
<PlusOutlined />
</IconButton>
</Tooltip>
</div> </div>
<div className='flex grow overflow-hidden h-full'> <div className='flex grow overflow-hidden h-full'>
<div className='grow overflow-auto scrollbar bg-gray-100'> <div className='grow overflow-auto scrollbar bg-gray-100'>
@ -157,24 +159,29 @@ export const List = () => {
<div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div> <div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
</div> </div>
<div className='flex mt-2 '> <div className='flex mt-2 '>
<Button.Group> <ButtonGroup
<Tooltip title='Edit'> variant='contained'
color='primary'
sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
<Tooltip title={t('Edit')}>
<Button <Button
onClick={(e) => { onClick={(e) => {
userStore.setFormData(item); userStore.setFormData(item);
userStore.setShowEdit(true); userStore.setShowEdit(true);
setCodeEdit(false); setCodeEdit(false);
e.stopPropagation(); e.stopPropagation();
}} }}>
icon={<EditOutlined />}></Button> <EditOutlined />
</Button>
</Tooltip> </Tooltip>
<Tooltip title='User List'> <Tooltip title={t('User List')}>
<Button <Button
onClick={(e) => { onClick={(e) => {
navicate(`/org/edit/user/${item.id}`); navicate(`/org/edit/user/${item.id}`);
e.stopPropagation(); e.stopPropagation();
}} }}>
icon={<UnorderedListOutlined />}></Button> <UnorderedListOutlined />
</Button>
</Tooltip> </Tooltip>
<Button <Button
onClick={(e) => { onClick={(e) => {
@ -186,16 +193,18 @@ export const List = () => {
}, },
}); });
e.stopPropagation(); e.stopPropagation();
}} }}>
icon={<DeleteOutlined />}></Button> <DeleteOutlined />
<Tooltip title='Switch to Org'> </Button>
<Tooltip title={t('Switch to Org')}>
<Button <Button
icon={<SwapOutlined />}
onClick={() => { onClick={() => {
layoutStore.switchOrg(item.username); layoutStore.switchOrg(item.username);
}}></Button> }}>
<SwapOutlined />
</Button>
</Tooltip> </Tooltip>
</Button.Group> </ButtonGroup>
</div> </div>
</div> </div>
</Fragment> </Fragment>
@ -212,14 +221,15 @@ export const List = () => {
onClick={() => { onClick={() => {
setCodeEdit(false); setCodeEdit(false);
userStore.setFormData({}); userStore.setFormData({});
}} }}>
icon={<LeftOutlined />}></Button> <LeftOutlined />
</Button>
<Button <Button
onClick={() => { onClick={() => {
console.log('save', userStore.formData);
userStore.updateData({ ...userStore.formData, code }); userStore.updateData({ ...userStore.formData, code });
}} }}>
icon={<SaveOutlined />}></Button> <SaveOutlined />
</Button>
</div> </div>
</div> </div>
<div className='h-[94%] p-2 rounded-2 shadow-xs'> <div className='h-[94%] p-2 rounded-2 shadow-xs'>

153
src/pages/org/edit/UserList.tsx
View File

@ -1,14 +1,20 @@
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { useOrgStore } from '../store'; import { useOrgStore } from '../store';
import { useNavigation, useParams } from 'react-router'; import { useParams } from 'react-router';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Button, Input, Modal, Select, Space, Tooltip } from 'antd'; import { Input, Modal, Select } from 'antd';
import { message } from '@/modules/message'; import { message } from '@/modules/message';
import { DeleteOutlined, EditOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons'; import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
import LeftOutlined from '@ant-design/icons/LeftOutlined';
import PlusOutlined from '@ant-design/icons/PlusOutlined';
import { Tooltip, Button, ButtonGroup, Dialog, DialogTitle, DialogContent } from '@mui/material';
import { IconButton } from '@kevisual/center-components/button/index.tsx';
import { Form } from 'antd'; import { Form } from 'antd';
import { useNewNavigate } from '@/modules'; import { useNewNavigate } from '@/modules';
import { isObjectNull } from '@/utils/is-null'; import { isObjectNull } from '@/utils/is-null';
import copy from 'copy-to-clipboard'; import copy from 'copy-to-clipboard';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
const FormModal = () => { const FormModal = () => {
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -48,53 +54,52 @@ const FormModal = () => {
userStore.setFormData({}); userStore.setFormData({});
}; };
const isEdit = userStore.formData.id; const isEdit = userStore.formData.id;
const { t } = useTranslation();
return ( return (
<Modal <Dialog open={userStore.showEdit} onClose={() => userStore.setShowEdit(false)}>
title={isEdit ? 'Edit' : 'Add'} <DialogTitle>{isEdit ? 'Edit' : 'Add'}</DialogTitle>
open={userStore.showEdit} <DialogContent sx={{ padding: '20px', minWidth: '600px' }}>
onClose={() => userStore.setShowEdit(false)} <Form
destroyOnClose form={form}
footer={false} onFinish={onFinish}
width={800} labelCol={{
onCancel={onClose}> span: 4,
<Form }}
form={form} wrapperCol={{
onFinish={onFinish} span: 20,
labelCol={{ }}>
span: 4, <Form.Item name='id' hidden>
}} <Input />
wrapperCol={{ </Form.Item>
span: 20, <Form.Item name='username' label='username'>
}}> <Input disabled={isEdit} />
<Form.Item name='id' hidden> </Form.Item>
<Input /> <Form.Item name='role' label='role'>
</Form.Item> <Select
<Form.Item name='username' label='username'> options={[
<Input disabled={isEdit} /> {
</Form.Item> label: 'admin',
<Form.Item name='role' label='role'> value: 'admin',
<Select },
options={[ {
{ label: 'member',
label: 'admin', value: 'member',
value: 'admin', },
}, ]}></Select>
{ </Form.Item>
label: 'member', <Form.Item label=' ' colon={false}>
value: 'member', <div className='flex gap-2'>
}, <Button variant='contained' type='submit'>
]}></Select> {t('Submit')}
</Form.Item> </Button>
<Form.Item label=' ' colon={false}> <Button className='ml-2' onClick={onClose}>
<Button type='primary' htmlType='submit'> {t('Cancel')}
Submit </Button>
</Button> </div>
<Button className='ml-2' htmlType='reset' onClick={onClose}> </Form.Item>
Cancel </Form>
</Button> </DialogContent>
</Form.Item> </Dialog>
</Form>
</Modal>
); );
}; };
@ -102,7 +107,7 @@ export const UserList = () => {
const param = useParams(); const param = useParams();
const navicate = useNewNavigate(); const navicate = useNewNavigate();
const [modal, contextHolder] = Modal.useModal(); const [modal, contextHolder] = Modal.useModal();
const { t } = useTranslation();
const orgStore = useOrgStore( const orgStore = useOrgStore(
useShallow((state) => { useShallow((state) => {
return { return {
@ -128,56 +133,50 @@ export const UserList = () => {
}; };
}, []); }, []);
return ( return (
<div className='w-full h-full bg-gray-200 flex'> <div className='w-full h-full bg-gray-100 flex text-primary'>
<div className='p-2 bg-white mr-2'> <div className='p-2 bg-white mr-2'>
<Button <IconButton
icon={<PlusOutlined />}
onClick={() => { onClick={() => {
orgStore.setUserFormData({}); orgStore.setUserFormData({});
orgStore.setShowUserEdit(true); orgStore.setShowUserEdit(true);
}}></Button> }}>
<PlusOutlined />
</IconButton>
</div> </div>
<div className='p-4 pt-12 grow relative'> <div className='p-4 pt-12 grow relative'>
<div className='absolute top-2'> <div className='absolute top-2'>
<Tooltip title='返回'> <Tooltip title={t('Back')}>
<Button <IconButton
onClick={() => { onClick={() => {
navicate(-1); navicate(-1);
}} }}>
icon={<LeftOutlined />}></Button> <LeftOutlined />
</IconButton>
</Tooltip> </Tooltip>
</div> </div>
<div className='p-4 bg-white rounded-lg border border-gray-200 shadow-md h-full'> <div className='p-4 bg-white rounded-lg border shadow-md h-full'>
<div className='flex gap-4'> <div className='flex gap-4'>
{orgStore.users.map((item) => { {orgStore.users.map((item) => {
const isOwner = item.role === 'owner'; const isOwner = item.role === 'owner';
return ( return (
<div key={item.id} className='card w-[300px] border-t border-gray-200 justify-between p-2 border-b'> <div key={item.id} className='card w-[300px] justify-between p-2 '>
<div <div
className='card-title capitalize truncate cursor-pointer' className='card-title capitalize truncate cursor-pointer'
onClick={() => { onClick={() => {
copy(item.username); copy(item.username);
}}> }}>
username: {item.username} {t('Username')}: {item.username}
</div> </div>
<div className='flex gap-2 capitalize'>{item.role || '-'}</div> <div className='flex gap-2 capitalize'>{item.role || '-'}</div>
<div className='mt-2'> <div className='mt-2'>
<Space.Compact> <ButtonGroup
{/* <Tooltip title='Edit'> variant='contained'
<Button color='primary'
icon={<EditOutlined />} sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
disabled={isOwner}
onClick={() => {
orgStore.setShowEdit(true);
orgStore.setUserFormData(item);
}}></Button>
</Tooltip> */}
<Tooltip title='delete'> <Tooltip title='delete'>
<Button <IconButton
icon={<DeleteOutlined />}
disabled={isOwner} disabled={isOwner}
onClick={() => { onClick={() => {
// o-NDO62XGeyEQoz_Sytz-1UUB7kw
modal.confirm({ modal.confirm({
title: 'Delete', title: 'Delete',
content: 'Are you sure?', content: 'Are you sure?',
@ -185,9 +184,11 @@ export const UserList = () => {
orgStore.removeUser(item.id); orgStore.removeUser(item.id);
}, },
}); });
}}></Button> }}>
<DeleteOutlined />
</IconButton>
</Tooltip> </Tooltip>
</Space.Compact> </ButtonGroup>
</div> </div>
</div> </div>
); );

1
src/pages/org/store/index.ts
View File

@ -96,7 +96,6 @@ export const useOrgStore = create<OrgStore>((set, get) => {
if (res.code === 200) { if (res.code === 200) {
const { org, users } = res.data || {}; const { org, users } = res.data || {};
set({ org, users }); set({ org, users });
message.success('load success');
} else { } else {
message.error(res.message || 'Request failed'); message.error(res.message || 'Request failed');
} }

102
src/pages/user/edit/List.tsx
View File

@ -1,12 +1,9 @@
import { Button, Input, Modal, Space } from 'antd'; import { Input, Modal } from 'antd';
import { Fragment, useEffect, useMemo, useState } from 'react'; import { Fragment, useEffect, useState } from 'react';
import { useUserStore } from '../store'; import { useUserStore } from '../store';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { Form } from 'antd'; import { Form } from 'antd';
import { useNewNavigate } from '@/modules';
import EditOutlined from '@ant-design/icons/EditOutlined'; import EditOutlined from '@ant-design/icons/EditOutlined';
import SettingOutlined from '@ant-design/icons/SettingOutlined';
import LinkOutlined from '@ant-design/icons/LinkOutlined';
import SaveOutlined from '@ant-design/icons/SaveOutlined'; import SaveOutlined from '@ant-design/icons/SaveOutlined';
import DeleteOutlined from '@ant-design/icons/DeleteOutlined'; import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
import LeftOutlined from '@ant-design/icons/LeftOutlined'; import LeftOutlined from '@ant-design/icons/LeftOutlined';
@ -14,8 +11,9 @@ import PlusOutlined from '@ant-design/icons/PlusOutlined';
import clsx from 'clsx'; import clsx from 'clsx';
import { isObjectNull } from '@/utils/is-null'; import { isObjectNull } from '@/utils/is-null';
import { CardBlank } from '@kevisual/center-components/card/CardBlank.tsx'; import { CardBlank } from '@kevisual/center-components/card/CardBlank.tsx';
import { message } from '@/modules/message'; import { Dialog, ButtonGroup, Button, DialogContent, DialogTitle } from '@mui/material';
import { Dialog } from '@mui/material'; import { IconButton } from '@kevisual/center-components/button/index.tsx';
import { useTranslation } from 'react-i18next';
const FormModal = () => { const FormModal = () => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const userStore = useUserStore( const userStore = useUserStore(
@ -47,9 +45,9 @@ const FormModal = () => {
userStore.setFormData({}); userStore.setFormData({});
}; };
const isEdit = userStore.formData.id; const isEdit = userStore.formData.id;
const { t } = useTranslation();
return ( return (
<Dialog <Dialog
title={isEdit ? 'Edit' : 'Add'}
open={userStore.showEdit} open={userStore.showEdit}
onClose={() => userStore.setShowEdit(false)} onClose={() => userStore.setShowEdit(false)}
sx={{ sx={{
@ -57,33 +55,36 @@ const FormModal = () => {
width: '800px', width: '800px',
}, },
}}> }}>
<Form <DialogTitle>{isEdit ? t('Edit') : t('Add')}</DialogTitle>
form={form} <DialogContent>
onFinish={onFinish} <Form
labelCol={{ form={form}
span: 4, onFinish={onFinish}
}} labelCol={{
wrapperCol={{ span: 4,
span: 20, }}
}}> wrapperCol={{
<Form.Item name='id' hidden> span: 20,
<Input /> }}>
</Form.Item> <Form.Item name='id' hidden>
<Form.Item name='username' label='username'> <Input />
<Input /> </Form.Item>
</Form.Item> <Form.Item name='username' label='username'>
<Form.Item name='description' label='description'> <Input />
<Input.TextArea rows={4} /> </Form.Item>
</Form.Item> <Form.Item name='description' label='description'>
<Form.Item label=' ' colon={false}> <Input.TextArea rows={4} />
<Button type='primary' htmlType='submit'> </Form.Item>
Submit <Form.Item label=' ' colon={false}>
</Button> <Button type='submit' variant='contained'>
<Button className='ml-2' htmlType='reset' onClick={onClose}> {t('Submit')}
Cancel </Button>
</Button> <Button className='ml-2' type='reset' onClick={onClose}>
</Form.Item> {t('Cancel')}
</Form> </Button>
</Form.Item>
</Form>
</DialogContent>
</Dialog> </Dialog>
); );
}; };
@ -116,7 +117,9 @@ export const List = () => {
return ( return (
<div className='w-full h-full flex'> <div className='w-full h-full flex'>
<div className='p-2'> <div className='p-2'>
<Button onClick={onAdd} icon={<PlusOutlined />}></Button> <IconButton onClick={onAdd} variant='contained'>
<PlusOutlined />
</IconButton>
</div> </div>
<div className='flex grow overflow-hidden h-full'> <div className='flex grow overflow-hidden h-full'>
<div className='grow overflow-auto scrollbar bg-gray-100'> <div className='grow overflow-auto scrollbar bg-gray-100'>
@ -145,15 +148,19 @@ export const List = () => {
<div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div> <div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
</div> </div>
<div className='flex mt-2 '> <div className='flex mt-2 '>
<Space.Compact> <ButtonGroup
variant='contained'
color='primary'
sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
<Button <Button
onClick={(e) => { onClick={(e) => {
userStore.setFormData(item); userStore.setFormData(item);
userStore.setShowEdit(true); userStore.setShowEdit(true);
setCodeEdit(false); setCodeEdit(false);
e.stopPropagation(); e.stopPropagation();
}} }}>
icon={<EditOutlined />}></Button> <EditOutlined />
</Button>
<Button <Button
onClick={(e) => { onClick={(e) => {
modal.confirm({ modal.confirm({
@ -164,9 +171,10 @@ export const List = () => {
}, },
}); });
e.stopPropagation(); e.stopPropagation();
}} }}>
icon={<DeleteOutlined />}></Button> <DeleteOutlined />
</Space.Compact> </Button>
</ButtonGroup>
</div> </div>
</div> </div>
</Fragment> </Fragment>
@ -187,14 +195,16 @@ export const List = () => {
onClick={() => { onClick={() => {
setCodeEdit(false); setCodeEdit(false);
userStore.setFormData({}); userStore.setFormData({});
}} }}>
icon={<LeftOutlined />}></Button> <LeftOutlined />
</Button>
<Button <Button
onClick={() => { onClick={() => {
console.log('save', userStore.formData); console.log('save', userStore.formData);
userStore.updateData({ ...userStore.formData, code }); userStore.updateData({ ...userStore.formData, code });
}} }}>
icon={<SaveOutlined />}></Button> <SaveOutlined />
</Button>
</div> </div>
</div> </div>
<div className='h-[94%] p-2 rounded-2 shadow-xs'> <div className='h-[94%] p-2 rounded-2 shadow-xs'>

115
src/pages/user/edit/Profile.tsx
View File

@ -1,15 +1,25 @@
import { Button, Form, Input } from 'antd'; import { TextField } from '@mui/material';
import { useForm, Controller } from 'react-hook-form';
import { Button } from '@mui/material';
import { useUserStore } from '../store'; import { useUserStore } from '../store';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { isObjectNull } from '@/utils/is-null'; import { isObjectNull } from '@/utils/is-null';
import { useLayoutStore } from '@/modules/layout/store'; import { useLayoutStore } from '@/modules/layout/store';
import { AvatarUpload } from '../module/AvatarUpload';
import UploadOutlined from '@ant-design/icons/UploadOutlined'; import UploadOutlined from '@ant-design/icons/UploadOutlined';
import PandaPNG from '@/assets/panda.png'; import PandaPNG from '@/assets/panda.png';
import { FileUpload } from '../module/FileUpload'; import { FileUpload } from '../module/FileUpload';
import { useTranslation } from 'react-i18next';
export const Profile = () => { export const Profile = () => {
const [form] = Form.useForm(); const { t } = useTranslation();
const { control, handleSubmit, setValue, reset, formState, getValues } = useForm({
defaultValues: {
username: '',
avatar: '',
description: '',
},
});
const ref = useRef<any>(null); const ref = useRef<any>(null);
const userStore = useUserStore( const userStore = useUserStore(
useShallow((state) => { useShallow((state) => {
@ -32,21 +42,29 @@ export const Profile = () => {
}; };
}), }),
); );
// const avatar = layoutStore.me?.avatar;
useEffect(() => { useEffect(() => {
const fromData = layoutStore.me; const fromData = layoutStore.me;
if (isObjectNull(fromData)) { if (isObjectNull(fromData)) {
form.setFieldsValue({}); reset({
username: '',
avatar: '',
description: '',
});
} else { } else {
form.setFieldsValue(fromData); reset({
username: fromData.username,
avatar: fromData.avatar || '',
description: fromData.description || '',
});
} }
setAvatar(fromData.avatar || ''); setAvatar(fromData.avatar || '');
}, [layoutStore.me]); }, [layoutStore.me, setValue]);
const onChange = (path: string) => { const onChange = (path: string) => {
let url = '/resources/' + path; const url = path + '?t=' + new Date().getTime();
console.log('path', url); setAvatar(url);
form.setFieldsValue({ avatar: url }); setValue('avatar', url);
setAvatar(url + '?t=' + new Date().getTime()); const values = getValues();
onFinish(values);
}; };
const onFinish = async (values) => { const onFinish = async (values) => {
const newMe = await userStore.updateSelf(values); const newMe = await userStore.updateSelf(values);
@ -55,48 +73,51 @@ export const Profile = () => {
} }
}; };
return ( return (
<div className='w-full h-full bg-gray-200 p-4'> <div className='w-full h-full bg-amber-50 p-4 text-primary'>
<div className='border shadow-lg p-4 bg-white rounded-lg'> <div className=' shadow-lg p-4 bg-white rounded-lg'>
<div className='text-2xl'>Profile</div> <div className='text-2xl'>{t('Profile')}</div>
<div className='text-sm text-gray-500'>Edit your profile</div> <div className='text-sm text-secondary'>{t('Edit your profile')}</div>
<div className='flex gap-4'> <div className='flex gap-4'>
<div className='w-[600px] p-4 border mt-2 '> <div className='w-[600px] p-4 border mt-2 '>
<div className='w-full my-4'> <div className='w-full my-4'>
{avatar && <img className='w-20 h-20 mx-auto rounded-full' src={avatar} alt='avatar' />} {avatar && <img className='w-20 h-20 mx-auto rounded-full' src={avatar} alt='avatar' />}
{!avatar && <img className='w-20 h-20 mx-auto rounded-full' src={PandaPNG} alt='avatar' />} {!avatar && <img className='w-20 h-20 mx-auto rounded-full' src={PandaPNG} alt='avatar' />}
</div> </div>
<Form <form onSubmit={handleSubmit(onFinish)} className='flex flex-col gap-4'>
form={form} <Controller
onFinish={onFinish} name='username'
labelCol={{ control={control}
span: 4, render={({ field }) => <TextField {...field} label={t('Name')} className='w-full border rounded-lg p-2' disabled />}
}}> />
<Form.Item label='Name' name='username'> <Controller
<Input className='w-full border rounded-lg p-2' disabled /> name='avatar'
</Form.Item> control={control}
<Form.Item label='Avatar' name='avatar'> render={({ field }) => (
<Input <TextField
addonAfter={ {...field}
<div> label={t('Avatar')}
<UploadOutlined slotProps={{
onClick={() => { input: {
ref.current?.open?.(); endAdornment: (
}} <div>
/> <UploadOutlined
<FileUpload ref={ref} onChange={onChange} /> onClick={() => {
</div> ref.current?.open?.();
} }}
/> />
</Form.Item> <FileUpload ref={ref} onChange={onChange} />
<Form.Item label='Description' name='description'> </div>
<Input.TextArea rows={4} /> ),
</Form.Item> },
<Form.Item label=' ' colon={false}> }}
<Button className='' htmlType='submit'> />
保存 )}
</Button> />
</Form.Item> <Controller name='description' control={control} render={({ field }) => <TextField {...field} label={t('Description')} multiline rows={4} />} />
</Form> <Button className='' type='submit' variant='contained'>
{t('Save')}
</Button>
</form>
</div> </div>
</div> </div>
</div> </div>

103
src/pages/user/login/Login.tsx
View File

@ -1,11 +1,14 @@
import { Button, Form, Input } from 'antd';
import { useLoginStore } from '../store/login'; import { useLoginStore } from '../store/login';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { useEffect } from 'react'; import LockOutlined from '@ant-design/icons/LockOutlined';
import { isObjectNull } from '@/utils/is-null'; import UserOutlined from '@ant-design/icons/UserOutlined';
import { LockOutlined, UserOutlined } from '@ant-design/icons'; import { Button } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { TextField, InputAdornment } from '@mui/material';
import { useForm, Controller } from 'react-hook-form';
export const Login = () => { export const Login = () => {
const [form] = Form.useForm(); const { t } = useTranslation();
const { control, handleSubmit } = useForm();
const loginStore = useLoginStore( const loginStore = useLoginStore(
useShallow((state) => { useShallow((state) => {
return { return {
@ -15,50 +18,68 @@ export const Login = () => {
}; };
}), }),
); );
useEffect(() => {
const isNull = isObjectNull(loginStore.formData);
if (isNull) {
form.setFieldsValue({});
} else {
form.setFieldsValue(loginStore.formData);
}
}, [loginStore.formData]);
const onFinish = (values: any) => { const onFinish = (values: any) => {
loginStore.setFormData(values); loginStore.setFormData(values);
loginStore.login(); loginStore.login();
}; };
return ( return (
<div className='bg-slate-200 text-slate-900 w-full h-full overflow-hidden'> <div className='bg-gray-100 text-primary w-full h-full overflow-hidden'>
<div className='w-full h-full absolute top-[10%] xl:top-[15%] 2xl:top-[18%] 3xl:top-[20%] '> <div className='w-full h-full absolute top-[10%] xl:top-[15%] 2xl:top-[18%] 3xl:top-[20%] '>
<div className='w-[400px] mx-auto'> <div className='w-[400px] mx-auto'>
<h1 className='mb-4 tracking-widest text-center'>Login</h1> <h1 className='mb-4 tracking-widest text-center'>{t('Login')}</h1>
<div className='card border-t-2 border-gray-200 pt-8 px-8'> <div className='card border-t-2 border-gray-200 pt-8 px-8'>
<Form <form className='mt-2 flex flex-col gap-8' onSubmit={handleSubmit(onFinish)}>
className='mt-2' <Controller
form={form} name='username'
onFinish={onFinish} control={control}
labelCol={{ render={({ field }) => (
span: 6, <TextField
}}> {...field}
<Form.Item label='' name='username'> label={t('Username')}
<Input addonBefore={<UserOutlined />} placeholder='Username' /> variant='outlined'
</Form.Item> fullWidth
<Form.Item label='' name='password'> slotProps={{
<Input type='password' addonBefore={<LockOutlined />} placeholder='Password' /> input: {
</Form.Item> startAdornment: (
<Form.Item label='' colon={false}> <InputAdornment position='start'>
<div className='flex gap-2'> <UserOutlined className='text-primary!' />
<Button </InputAdornment>
type='primary' ),
htmlType='submit' },
style={{ }}
background: '#84d5e8', />
}}> )}
Login />
</Button> <Controller
</div> name='password'
</Form.Item> control={control}
</Form> render={({ field }) => (
<TextField
{...field}
type='password'
label={t('Password')}
variant='outlined'
fullWidth
slotProps={{
input: {
startAdornment: (
<InputAdornment position='start'>
<LockOutlined className='text-primary!' />
</InputAdornment>
),
},
}}
/>
)}
/>
<div className='flex gap-2'>
<Button type='submit' variant='contained'>
{t('Login')}
</Button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>

74
src/pages/user/module/AvatarUpload.tsx
View File

@ -1,74 +0,0 @@
import { useState } from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Flex, Upload } from 'antd';
import { message } from '@/modules/message';
import type { GetProp, UploadProps } from 'antd';
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
const getBase64 = (img: FileType, callback: (url: string) => void) => {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result as string));
reader.readAsDataURL(img);
};
const beforeUpload = (file: FileType) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
};
export const AvatarUpload = () => {
const [loading, setLoading] = useState(false);
const [imageUrl, setImageUrl] = useState<string>();
const handleChange: UploadProps['onChange'] = (info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj as FileType, (url) => {
setLoading(false);
setImageUrl(url);
});
}
};
const uploadButton = (
<button style={{ border: 0, background: 'none' }} type='button'>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Upload</div>
</button>
);
const onAciton = async (file) => {
console.log('file', file);
return '';
};
const customAction = (file) => {
console.log('file', file);
};
return (
<Flex gap='middle' wrap>
<Upload
name='avatar'
listType='picture-circle'
className='avatar-uploader'
multiple={false}
showUploadList={false}
action={onAciton}
customRequest={customAction}
beforeUpload={beforeUpload}
onChange={handleChange}>
{imageUrl ? <img src={imageUrl} alt='avatar' style={{ width: '100%' }} /> : uploadButton}
</Upload>
</Flex>
);
};

28
src/pages/user/module/FileUpload.tsx
View File

@ -1,7 +1,6 @@
import { message } from '@/modules/message'; import { message } from '@/modules/message';
import { useImperativeHandle, useRef, forwardRef } from 'react'; import { useImperativeHandle, useRef, forwardRef } from 'react';
import type { GetProp, UploadProps } from 'antd'; import { uploadFileChunked } from '@kevisual/resources/index.ts';
type FileTypeOrg = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
export type FileType = { export type FileType = {
name: string; name: string;
@ -10,7 +9,7 @@ export type FileType = {
webkitRelativePath: string; // 包含name webkitRelativePath: string; // 包含name
}; };
const beforeUpload = (file: FileTypeOrg) => { const beforeUpload = (file: any) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) { if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!'); message.error('You can only upload JPG/PNG file!');
@ -33,22 +32,15 @@ export const FileUpload = forwardRef<any, Props>((props, ref) => {
console.log(e.target.files); console.log(e.target.files);
const file = e.target.files[0]; const file = e.target.files[0];
const endType = file.name.split('.').pop(); const endType = file.name.split('.').pop();
const formData = new FormData(); const filename = `avatar.${endType}`;
formData.append('file', file, `avatar.${endType}`); // 保留文件夹路径 const res = (await uploadFileChunked(file, {
const res = await fetch('/api/upload', { isPublic: true,
method: 'POST', filename,
body: formData, // })) as any;
headers: { console.log('res', res);
Authorization: 'Bearer ' + localStorage.getItem('token'),
},
}).then((res) => res.json());
if (res?.code === 200) { if (res?.code === 200) {
console.log('res', res); const resource = res.data?.resource;
// props?.onChange?.(resource);
const [file] = res.data;
const { path } = file || {};
props?.onChange?.(path);
//
} else { } else {
message.error(res.message || 'Request failed'); message.error(res.message || 'Request failed');
} }

2
src/pages/user/store/index.ts
View File

@ -53,13 +53,11 @@ export const useUserStore = create<UserStore>((set, get) => {
} }
}, },
updateSelf: async (data) => { updateSelf: async (data) => {
const loaded = message.loading('Action in progress..', 0);
const res = await query.post({ const res = await query.post({
path: 'user', path: 'user',
key: 'updateSelf', key: 'updateSelf',
data, data,
}); });
loaded();
if (res.code === 200) { if (res.code === 200) {
message.success('Success'); message.success('Success');
set({ formData: res.data }); set({ formData: res.data });