+
+
+
+
+
+# Overview ([ZH](README_zh.md), EN)
+
+This project is a front-end web UI of Oxygen Toolbox and needs to be used with the back-end API.
+
+# Requires
+
+- Web Server (e.g. Nginx, Apache httpd)
+
+# Related projects
+
+[API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api)
+
+[Desktop Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-desktop)
+
+[Android Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-android)
+
+# Quick Start
+
+**1. Download the latest packaged production version from [Releases](https://github.com/FatttSnake/oxygen-ui/releases/latest) page**
+
+**2. Upload the file `oxygen-ui-*.tar.gz` or `oxygen-ui-*.zip` to the web server and unzip it**
+
+**3. Configure pseudo-static**
+
+Nginx:
+
+```nginx
+server {
+ ...
+
+ index index.html
+
+ location / {
+ try_files $uri $uri/ /index.html;
+ }
+
+ ...
+}
+```
+
+Apache httpd (.htaccess):
+
+```apache
+
+ 
+
+ Web UI of Oxygen Toolbox
+
+
+ 
+
+
+
+
+
+
+# 概述 (ZH, [EN](README.md))
+
+本项目为 Oxygen Toolbox 的网页 UI，需配合后端 API 使用。
+
+# 环境要求
+
+- Web 服务器（如 Nginx, Apache httpd）
+
+# 关联项目
+
+[API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api)
+
+[Desktop Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-desktop)
+
+[Android Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-android)
+
+# 快速开始
+
+**1. 从 [Releases](https://github.com/FatttSnake/oxygen-ui/releases/latest) 页面下载最后打包的生产版本**
+
+**2. 将文件 `oxygen-ui-*.tar.gz` 或 `oxygen-ui-*.zip` 上传到 Web 服务器并解压**
+
+**3. 配置伪静态**
+
+Nginx:
+
+```nginx
+server {
+ ...
+
+ index index.html
+
+ location / {
+ try_files $uri $uri/ /index.html;
+ }
+
+ ...
+}
+```
+
+Apache httpd (.htaccess):
+
+```apache
+
+
+
+ Web UI of Oxygen Toolbox
+
+
+
+
+ )
+}
+
+export default Editor
diff --git a/src/components/Playground/CodeEditor/Editor/loader.ts b/src/components/Playground/CodeEditor/Editor/loader.ts
new file mode 100644
index 0000000..f1eb028
--- /dev/null
+++ b/src/components/Playground/CodeEditor/Editor/loader.ts
@@ -0,0 +1,7 @@
+import { loader } from '@monaco-editor/react'
+
+loader.config({
+ paths: {
+ vs: 'https://unpkg.com/monaco-editor@0.49.0/min/vs'
+ }
+})
diff --git a/src/components/Playground/CodeEditor/Editor/monacoConfig.ts b/src/components/Playground/CodeEditor/Editor/monacoConfig.ts
new file mode 100644
index 0000000..7411eb7
--- /dev/null
+++ b/src/components/Playground/CodeEditor/Editor/monacoConfig.ts
@@ -0,0 +1,34 @@
+import { editor } from 'monaco-editor'
+
+export const MonacoEditorConfig: editor.IStandaloneEditorConstructionOptions = {
+ automaticLayout: true,
+ cursorBlinking: 'smooth',
+ fontLigatures: true,
+ formatOnPaste: true,
+ formatOnType: true,
+ fontSize: 14,
+ showDeprecated: true,
+ showUnused: true,
+ showFoldingControls: 'mouseover',
+ scrollBeyondLastLine: false,
+ minimap: {
+ enabled: false
+ },
+ inlineSuggest: {
+ enabled: false
+ },
+ fixedOverflowWidgets: true,
+ smoothScrolling: true,
+ smartSelect: {
+ selectSubwords: true,
+ selectLeadingAndTrailingWhitespace: true
+ },
+ tabSize: 2,
+ overviewRulerBorder: false, // 不要滚动条的边框
+ // 滚动条设置
+ scrollbar: {
+ verticalScrollbarSize: 6, // 竖滚动条
+ horizontalScrollbarSize: 6 // 横滚动条
+ }
+ // lineNumbers: 'off', // 隐藏控制行号
+}
diff --git a/src/components/Playground/CodeEditor/FileSelector/Item.tsx b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
new file mode 100644
index 0000000..31ea29b
--- /dev/null
+++ b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
@@ -0,0 +1,141 @@
+import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
+
+interface ItemProps {
+ className?: string
+ readonly?: boolean
+ creating?: boolean
+ value: string
+ active?: boolean
+ hasEditing?: boolean
+ setHasEditing?: Dispatch
+ {isCreating ? (
+
+ )
+}
+
+export default Item
diff --git a/src/components/Playground/CodeEditor/FileSelector/file-selector.scss b/src/components/Playground/CodeEditor/FileSelector/file-selector.scss
new file mode 100644
index 0000000..a1a0ecd
--- /dev/null
+++ b/src/components/Playground/CodeEditor/FileSelector/file-selector.scss
@@ -0,0 +1,86 @@
+[data-component=playground-file-selector].tab{
+ display: flex;
+ flex: 0 0 auto;
+ height: 40px;
+
+ .multiple {
+ flex: 1;
+ width: 0;
+
+ .tab-content {
+ height: 40px;
+ align-items: flex-end;
+ gap: 2px;
+ margin-left: 10px;
+
+ .tab-item-add {
+ padding: 0 12px;
+ }
+
+ .tabs-margin-right {
+ height: 100%;
+
+ > * {
+ height: 100%;
+ width: 10px;
+ }
+ }
+ }
+ }
+
+ .sticky {
+ display: flex;
+ flex: 0 0 auto;
+ align-items: flex-end;
+ margin-right: 10px;
+ }
+
+ .tab-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+ height: 30px;
+ padding: 0 20px;
+ border: 1px solid #f0f0f0;
+ background-color: rgba(0, 0, 0, 0.04);
+ border-radius: 6px 6px 0 0;
+ cursor: pointer;
+
+ .tab-item-input {
+ position: relative;
+ min-width: 40px;
+ transform: translateY(1px);
+
+ .tab-item-input-mask {
+ display: inline-block;
+ color: transparent;
+ }
+ input {
+ position: absolute;
+ background-color: transparent;
+ width: 100%;
+ font-size: 1em;
+ }
+ }
+
+ .tab-item-close {
+ transform: translateX(10px);
+
+ :hover {
+ fill: #888;
+ }
+
+ svg {
+ height: 8px;
+ fill: #666;
+ }
+ }
+
+ &.active {
+ background-color: white;
+ border-bottom: none;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
new file mode 100644
index 0000000..ffe35b0
--- /dev/null
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -0,0 +1,234 @@
+import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
+import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
+import { IFiles } from '@/components/Playground/shared'
+import {
+ getFileNameList,
+ IMPORT_MAP_FILE_NAME,
+ TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files'
+import Item from '@/components/Playground/CodeEditor/FileSelector/Item'
+
+interface FileSelectorProps {
+ files?: IFiles
+ onChange?: (fileName: string) => void
+ onError?: (msg: string) => void
+ readonly?: boolean
+ notRemovableFiles?: string[]
+ onRemoveFile?: (fileName: string) => void
+ onAddFile?: (fileName: string) => void
+ onUpdateFileName?: (newFileName: string, oldFileName: string) => void
+ selectedFileName?: string
+}
+
+const FileSelector = ({
+ files = {},
+ onChange,
+ onError,
+ readonly = false,
+ notRemovableFiles = [],
+ onRemoveFile,
+ onAddFile,
+ onUpdateFileName,
+ selectedFileName = ''
+}: FileSelectorProps) => {
+ const hideScrollbarRef = useRef
+
+ {fileName}
+
+ ) : (
+ <>
+ {value}
+ {!readonly && (
+
+
+ )}
+
+ )}
+
+
+
+ )
+}
+
+FileSelector.Item = Item
+
+export default FileSelector
diff --git a/src/components/Playground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.scss
new file mode 100644
index 0000000..3887677
--- /dev/null
+++ b/src/components/Playground/CodeEditor/code-editor.scss
@@ -0,0 +1,5 @@
+[data-component=playground-code-editor] {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
new file mode 100644
index 0000000..b2d70d6
--- /dev/null
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -0,0 +1,166 @@
+import _ from 'lodash'
+import '@/components/Playground/CodeEditor/code-editor.scss'
+import FlexBox from '@/components/common/FlexBox'
+import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
+import {
+ fileNameToLanguage,
+ getFileNameList,
+ IMPORT_MAP_FILE_NAME,
+ TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files'
+import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
+import Editor from '@/components/Playground/CodeEditor/Editor'
+
+interface CodeEditorProps {
+ theme?: ITheme
+ showFileSelector?: boolean
+ tsconfig?: ITsconfig
+ files: IFiles
+ readonly?: boolean
+ readonlyFiles?: string[]
+ notRemovable?: string[]
+ selectedFileName?: string
+ options?: IEditorOptions
+ onSelectedFileChange?: (fileName: string) => void
+ onAddFile?: (fileName: string, files: IFiles) => void
+ onRemoveFile?: (fileName: string, files: IFiles) => void
+ onRenameFile?: (newFileName: string, oldFileName: string, files: IFiles) => void
+ onChangeFileContent?: (content: string, fileName: string, files: IFiles) => void
+ onError?: (msg: string) => void
+}
+
+const CodeEditor = ({
+ theme,
+ showFileSelector = true,
+ tsconfig,
+ files,
+ readonly,
+ readonlyFiles,
+ notRemovable,
+ options,
+ onSelectedFileChange,
+ onAddFile,
+ onRemoveFile,
+ onRenameFile,
+ onChangeFileContent,
+ onError,
+ ...props
+}: CodeEditorProps) => {
+ const filteredFilesName = getFileNameList(files).filter(
+ (item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
+ )
+ const propsSelectedFileName =
+ props.selectedFileName || (filteredFilesName.length ? filteredFilesName[0] : '')
+ const [selectedFileName, setSelectedFileName] = useState(propsSelectedFileName)
+ const [errorMsg, setErrorMsg] = useState('')
+
+ const handleOnChangeSelectedFile = (fileName: string) => {
+ if (onSelectedFileChange) {
+ onSelectedFileChange(fileName)
+ } else {
+ setSelectedFileName(fileName)
+ }
+ }
+
+ const handleOnRemoveFile = (fileName: string) => {
+ const clone = _.cloneDeep(files)
+ delete clone[fileName]
+ onRemoveFile?.(fileName, clone)
+ }
+
+ const handleOnAddFile = (fileName: string) => {
+ const clone = _.cloneDeep(files)
+ clone[fileName] = {
+ name: fileName,
+ language: fileNameToLanguage(fileName),
+ value: ''
+ }
+ onAddFile?.(fileName, clone)
+ handleOnChangeSelectedFile(fileName)
+ }
+
+ const handleOnUpdateFileName = (newFileName: string, oldFileName: string) => {
+ if (!files[oldFileName] || !newFileName) {
+ return
+ }
+
+ const { [oldFileName]: value, ...rest } = files
+ const newFile: IFiles = {
+ [newFileName]: {
+ ...value,
+ language: fileNameToLanguage(newFileName),
+ name: newFileName
+ }
+ }
+ const newFiles: IFiles = { ...rest, ...newFile }
+
+ onRenameFile?.(newFileName, oldFileName, newFiles)
+ }
+
+ const handleOnError = (msg: string) => {
+ if (onError) {
+ onError(msg)
+ } else {
+ setErrorMsg(msg)
+ }
+ }
+
+ const handleOnChangeFileContent = (code: string = '') => {
+ if (!files[onSelectedFileChange ? propsSelectedFileName : selectedFileName]) {
+ return
+ }
+ const clone = _.cloneDeep(files)
+ clone[onSelectedFileChange ? propsSelectedFileName : selectedFileName].value = code ?? ''
+ onChangeFileContent?.(
+ code,
+ onSelectedFileChange ? propsSelectedFileName : selectedFileName,
+ clone
+ )
+ }
+
+ return (
+ <>
+
+
+
+ {tabs.map((item, index) => (
+ - handleOnSaveTab(name, item)}
+ onCancel={handleOnCancel}
+ onRemove={handleOnRemove}
+ onClick={() => handleOnClickTab(item)}
+ />
+ ))}
+ {!readonly && (
+
+
+
+ {(files[IMPORT_MAP_FILE_NAME] || files[TS_CONFIG_FILE_NAME]) && (
+
+
+
+
+ {files[TS_CONFIG_FILE_NAME] && (
+
+ )}
+ {errorMsg}
}
+
+
+
+
value.name === selectedDevice)
+ ?.height ?? 915
+ : devices.find((value) => value.name === selectedDevice)
+ ?.width ?? 412,
+ height: isRotate
+ ? devices.find((value) => value.name === selectedDevice)
+ ?.width ?? 412
+ : devices.find((value) => value.name === selectedDevice)
+ ?.height ?? 915
+ }}
+ >
+