手机端使用codemirror

src/pages/script/editModal.tsx

@@ -0,0 +1,209 @@
+import React, { useEffect, useState } from 'react';
+import { Drawer, Button, Tabs, Badge, Select, TreeSelect } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import SplitPane from 'react-split-pane';
+import Editor from '@monaco-editor/react';
+import SaveModal from './saveModal';
+import SettingModal from './setting';
+
+const { Option } = Select;
+const LangMap: any = {
+  '.py': 'python',
+  '.js': 'javascript',
+  '.sh': 'shell',
+  '.ts': 'typescript',
+};
+const prefixMap: any = {
+  python: '.py',
+  javascript: '.js',
+  shell: '.sh',
+  typescript: '.ts',
+};
+
+const EditModal = ({
+  treeData,
+  currentFile,
+  content,
+  handleCancel,
+  visible,
+}: {
+  treeData?: any;
+  currentFile?: string;
+  content?: string;
+  visible: boolean;
+  handleCancel: () => void;
+}) => {
+  const [value, setValue] = useState('');
+  const [theme, setTheme] = useState<string>('');
+  const [language, setLanguage] = useState<string>('javascript');
+  const [fileName, setFileName] = useState<string>('');
+  const [saveModalVisible, setSaveModalVisible] = useState<boolean>(false);
+  const [settingModalVisible, setSettingModalVisible] =
+    useState<boolean>(false);
+  const [isNewFile, setIsNewFile] = useState<boolean>(false);
+  const [log, setLog] = useState<string>('');
+
+  const cancel = () => {
+    handleCancel();
+  };
+
+  const onSelect = (value: any, node: any) => {
+    const newMode = LangMap[value.slice(-3)] || '';
+    setFileName(value);
+    setLanguage(newMode);
+    setIsNewFile(false);
+    getDetail(node);
+  };
+
+  const getDetail = (node: any) => {
+    request.get(`${config.apiPrefix}scripts/${node.value}`).then((data) => {
+      setValue(data.data);
+    });
+  };
+
+  const createFile = () => {
+    setFileName(`未命名${prefixMap[language]}`);
+    setIsNewFile(true);
+    setValue('');
+  };
+
+  const run = () => {};
+
+  useEffect(() => {
+    if (!currentFile) {
+      createFile();
+    } else {
+      setFileName(currentFile);
+      setValue(content as string);
+    }
+    setIsNewFile(!currentFile);
+  }, []);
+
+  useEffect(() => {
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const storageTheme = localStorage.getItem('qinglong_dark_theme');
+    const isDark =
+      (media.matches && storageTheme !== 'light') || storageTheme === 'dark';
+    setTheme(isDark ? 'vs-dark' : 'vs');
+    media.addEventListener('change', (e) => {
+      if (storageTheme === 'auto' || !storageTheme) {
+        if (e.matches) {
+          setTheme('vs-dark');
+        } else {
+          setTheme('vs');
+        }
+      }
+    });
+  }, []);
+
+  return (
+    <Drawer
+      className="edit-modal"
+      title={
+        <>
+          <span style={{ marginRight: 8 }}>{fileName}</span>
+          <TreeSelect
+            style={{ marginRight: 8, width: 120 }}
+            value={currentFile}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            treeData={treeData}
+            placeholder="请选择脚本文件"
+            showSearch
+            key="value"
+            onSelect={onSelect}
+          />
+          <Select
+            value={language}
+            style={{ width: 120, marginRight: 8 }}
+            onChange={(e) => {
+              setLanguage(e);
+            }}
+          >
+            <Option value="javascript">javascript</Option>
+            <Option value="typescript">typescript</Option>
+            <Option value="shell">shell</Option>
+            <Option value="python">python</Option>
+          </Select>
+          <Button type="primary" style={{ marginRight: 8 }} onClick={run}>
+            运行
+          </Button>
+          <Button
+            type="primary"
+            style={{ marginRight: 8 }}
+            onClick={() => {
+              setLog('');
+            }}
+          >
+            清空日志
+          </Button>
+          <Button
+            type="primary"
+            style={{ marginRight: 8 }}
+            onClick={() => {
+              setSettingModalVisible(true);
+            }}
+          >
+            设置
+          </Button>
+          <Button
+            type="primary"
+            style={{ marginRight: 8 }}
+            onClick={createFile}
+          >
+            新建文件
+          </Button>
+          <Button
+            type="primary"
+            style={{ marginRight: 8 }}
+            onClick={() => {
+              setSaveModalVisible(true);
+            }}
+          >
+            保存
+          </Button>
+        </>
+      }
+      width={'100%'}
+      headerStyle={{ padding: '11px 24px' }}
+      onClose={cancel}
+      visible={visible}
+    >
+      <SplitPane split="vertical" minSize={200} defaultSize="50%">
+        <Editor
+          language={language}
+          value={value}
+          theme={theme}
+          options={{
+            fontSize: 12,
+            minimap: { enabled: false },
+            lineNumbersMinChars: 3,
+            glyphMargin: false,
+          }}
+          onChange={(val) => {
+            setValue((val as string).replace(/\r\n/g, '\n'));
+          }}
+        />
+        <div>
+          <pre>{log}</pre>
+        </div>
+      </SplitPane>
+      <SaveModal
+        visible={saveModalVisible}
+        handleCancel={() => {
+          setSaveModalVisible(false);
+        }}
+        isNewFile={isNewFile}
+        file={{ content: value, filename: fileName }}
+      />
+      <SettingModal
+        visible={settingModalVisible}
+        handleCancel={() => {
+          setSettingModalVisible(false);
+        }}
+      />
+    </Drawer>
+  );
+};
+
+export default EditModal;

src/pages/script/index.module.less

@@ -27,5 +27,9 @@
     .ant-pro-grid-content.wide .ant-pro-page-container-children-content {
       background-color: #f8f8f8;
     }
+
+    .CodeMirror {
+      width: calc(100% - 32px - @tree-width);
+    }
   }
 }

src/pages/script/index.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect, useCallback, Key, useRef } from 'react';
-import { TreeSelect, Tree, Input } from 'antd';
+import { TreeSelect, Tree, Input, Button } from 'antd';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import Editor from '@monaco-editor/react';
 import { request } from '@/utils/http';
 import styles from './index.module.less';
+import EditModal from './editModal';
+import { Controlled as CodeMirror } from 'react-codemirror2';
 
 function getFilterData(keyword: string, data: any) {
   if (keyword) {
@@ -41,6 +43,7 @@ const Script = () => {
   const [height, setHeight] = useState<number>();
   const treeDom = useRef<any>();
   const [theme, setTheme] = useState<string>('');
+  const [isLogModalVisible, setIsLogModalVisible] = useState(false);
 
   const getScripts = () => {
     setLoading(true);
@@ -119,18 +122,29 @@ const Script = () => {
       title={title}
       loading={loading}
       extra={
-        isPhone && [
-          <TreeSelect
-            className="log-select"
-            value={select}
-            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-            treeData={data}
-            placeholder="请选择脚本文件"
-            showSearch
-            key="value"
-            onSelect={onSelect}
-          />,
-        ]
+        isPhone
+          ? [
+              <TreeSelect
+                className="log-select"
+                value={select}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={data}
+                placeholder="请选择脚本文件"
+                showSearch
+                key="value"
+                onSelect={onSelect}
+              />,
+            ]
+          : [
+              <Button
+                type="primary"
+                onClick={() => {
+                  setIsLogModalVisible(true);
+                }}
+              >
+                调试
+              </Button>,
+            ]
       }
       header={{
         style: {
@@ -164,20 +178,47 @@ const Script = () => {
             </div>
           </div>
         )}
-        <Editor
-          language={mode}
-          value={value}
-          theme={theme}
-          options={{
-            readOnly: true,
-            fontSize: 12,
-            minimap: { enabled: width === '100%' },
-            lineNumbersMinChars: 3,
-            folding: false,
-            glyphMargin: false,
-          }}
-          onChange={(val) => {
-            setValue((val as string).replace(/\r\n/g, '\n'));
+        {isPhone ? (
+          <CodeMirror
+            value={value}
+            options={{
+              lineNumbers: true,
+              lineWrapping: true,
+              styleActiveLine: true,
+              matchBrackets: true,
+              mode,
+              readOnly: true,
+            }}
+            onBeforeChange={(editor, data, value) => {
+              setValue(value);
+            }}
+            onChange={(editor, data, value) => {}}
+          />
+        ) : (
+          <Editor
+            language={mode}
+            value={value}
+            theme={theme}
+            options={{
+              readOnly: true,
+              fontSize: 12,
+              minimap: { enabled: width === '100%' },
+              lineNumbersMinChars: 3,
+              folding: false,
+              glyphMargin: false,
+            }}
+            onChange={(val) => {
+              setValue((val as string).replace(/\r\n/g, '\n'));
+            }}
+          />
+        )}
+        <EditModal
+          visible={isLogModalVisible}
+          treeData={data}
+          currentFile={select}
+          content={value}
+          handleCancel={() => {
+            setIsLogModalVisible(false);
           }}
         />
       </div>

src/pages/script/saveModal.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, message, Input, Form } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+
+const SaveModal = ({
+  file,
+  handleCancel,
+  visible,
+  isNewFile,
+}: {
+  file?: any;
+  visible: boolean;
+  handleCancel: (cks?: any[]) => void;
+  isNewFile: boolean;
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const handleOk = async (values: any) => {
+    console.log(file.filename);
+    setLoading(true);
+    const payload = { ...file, ...values };
+    request
+      .post(`${config.apiPrefix}scripts`, {
+        data: payload,
+      })
+      .then(({ code, data }) => {
+        if (code === 200) {
+          message.success('保存文件成功');
+          handleCancel(data);
+        } else {
+          message.error(data);
+        }
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    form.resetFields();
+    setLoading(false);
+  }, [file, visible]);
+
+  return (
+    <Modal
+      title="保存文件"
+      visible={visible}
+      forceRender
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            handleOk(values);
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+      onCancel={() => handleCancel()}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        name="script_modal"
+        initialValues={file}
+      >
+        <Form.Item
+          name="filename"
+          label="文件名"
+          rules={[{ required: true, message: '请输入文件名' }]}
+        >
+          <Input placeholder="请输入文件名" />
+        </Form.Item>
+        <Form.Item
+          name="path"
+          label="保存目录"
+          rules={[{ required: true, message: '请输入保存目录' }]}
+        >
+          <Input placeholder="请输入保存目录" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default SaveModal;

src/pages/script/setting.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, message, Input, Form } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+
+const SettingModal = ({
+  file,
+  handleCancel,
+  visible,
+}: {
+  file?: any;
+  visible: boolean;
+  handleCancel: (cks?: any[]) => void;
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const handleOk = async (values: any) => {
+    console.log(file.filename);
+    setLoading(true);
+    const payload = { ...file, ...values };
+    request
+      .post(`${config.apiPrefix}scripts`, {
+        data: payload,
+      })
+      .then(({ code, data }) => {
+        if (code === 200) {
+          message.success('保存文件成功');
+          handleCancel(data);
+        } else {
+          message.error(data);
+        }
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    form.resetFields();
+    setLoading(false);
+  }, [file, visible]);
+
+  return (
+    <Modal
+      title="运行设置"
+      visible={visible}
+      forceRender
+      onCancel={() => handleCancel()}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        name="setting_modal"
+        initialValues={file}
+      >
+        <Form.Item
+          name="filename"
+          label="待开发"
+          rules={[{ required: true, message: '待开发' }]}
+        >
+          <Input placeholder="待开发" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default SettingModal;