修改对比工具数据源，修复编辑器语言

README-en.md

@@ -98,7 +98,7 @@ ql resetlet
 ql resettfa                                                  
 ```
 
-| Parameter | Description |
+| **Parameter** | **Description** |
 |---|---|
 | file_url | Script address |
 | repo_url | Repository address |

README.md

@@ -99,7 +99,7 @@ ql resettfa
 ```
 
 | **参数**   | **说明**                                                                                    |
-|------------|---------------------------------------------------|
+|------------|---------------------------------------------------------------------------------------------|
 | file_url   | 脚本地址                                                                                    |
 | repo_url   | 仓库地址                                                                                    |
 | whitelist  | 拉取仓库时的白名单，即就是需要拉取的脚本的路径包含的字符串，多个竖线分割                    |

back/api/config.ts

@@ -6,11 +6,27 @@ import config from '../config';
 import * as fs from 'fs/promises';
 import { celebrate, Joi } from 'celebrate';
 import { join } from 'path';
+import { SAMPLE_FILES } from '../config/const';
+import got from 'got';
 const route = Router();
 
 export default (app: Router) => {
   app.use('/configs', route);
 
+  route.get(
+    '/sample',
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        res.send({
+          code: 200,
+          data: SAMPLE_FILES,
+        });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
   route.get(
     '/files',
     async (req: Request, res: Response, next: NextFunction) => {
@@ -40,9 +56,14 @@ export default (app: Router) => {
         if (config.blackFileList.includes(req.params.file)) {
           res.send({ code: 403, message: '文件无法访问' });
         }
-        if (req.params.file.includes('sample')) {
+        if (req.params.file.startsWith('sample/')) {
+          const res = await got.get(
+            `https://gitlab.com/whyour/qinglong/-/raw/master/${req.params.file}`,
+          );
+          content = res.body;
+        } else if (req.params.file.startsWith('data/scripts/')) {
           content = await getFileContentByName(
-            join(config.samplePath, req.params.file),
+            join(config.rootPath, req.params.file),
           );
         } else {
           content = await getFileContentByName(

back/config/const.ts

@@ -5,3 +5,21 @@ export const QL_COMMAND = 'ql';
 
 export const TASK_PREFIX = `${TASK_COMMAND} `;
 export const QL_PREFIX = `${QL_COMMAND} `;
+
+export const SAMPLE_FILES = [
+  {
+    title: 'config.sample.sh',
+    value: 'sample/config.sample.sh',
+    target: 'config.sh',
+  },
+  {
+    title: 'notify.js',
+    value: 'sample/notify.js',
+    target: 'data/scripts/sendNotify.js',
+  },
+  {
+    title: 'notify.py',
+    value: 'sample/notify.py',
+    target: 'data/scripts/notify.py',
+  },
+];

src/pages/config/index.tsx

@@ -1,4 +1,4 @@
-import intl from 'react-intl-universal'
+import intl from 'react-intl-universal';
 import React, {
   PureComponent,
   Fragment,
@@ -16,6 +16,7 @@ import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { getEditorMode } from '@/utils';
 
 const Config = () => {
   const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
@@ -26,6 +27,7 @@ const Config = () => {
   const [data, setData] = useState<any[]>([]);
   const editorRef = useRef<any>(null);
   const [confirmLoading, setConfirmLoading] = useState(false);
+  const [language, setLanguage] = useState<string>('shell');
 
   const getConfig = (name: string) => {
     request.get(`${config.apiPrefix}configs/${name}`).then(({ code, data }) => {
@@ -67,6 +69,8 @@ const Config = () => {
     setSelect(value);
     setTitle(node.value);
     getConfig(node.value);
+    const newMode = getEditorMode(value);
+    setLanguage(newMode);
   };
 
   useHotkeys(
@@ -122,7 +126,7 @@ const Config = () => {
         />
       ) : (
         <Editor
-          defaultLanguage="shell"
+          language={language}
           value={value}
           theme={theme}
           options={{

src/pages/diff/index.tsx

@@ -9,22 +9,24 @@ import { DiffEditor } from '@monaco-editor/react';
 import ReactDiffViewer from 'react-diff-viewer';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
+import { getEditorMode } from '@/utils';
 
 const { Option } = Select;
 
 const Diff = () => {
   const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
-  const [origin, setOrigin] = useState('config.sample.sh');
+  const [origin, setOrigin] = useState('sample/config.sample.sh');
   const [current, setCurrent] = useState('config.sh');
   const [originValue, setOriginValue] = useState('');
   const [currentValue, setCurrentValue] = useState('');
   const [loading, setLoading] = useState(true);
   const [files, setFiles] = useState<any[]>([]);
   const editorRef = useRef<any>(null);
+  const [language, setLanguage] = useState<string>('shell');
 
   const getConfig = () => {
     request
-      .get(`${config.apiPrefix}configs/${current}`)
+      .get(`${config.apiPrefix}configs/${encodeURIComponent(current)}`)
       .then(({ code, data }) => {
         if (code === 200) {
           setCurrentValue(data);
@@ -34,7 +36,7 @@ const Diff = () => {
 
   const getSample = () => {
     request
-      .get(`${config.apiPrefix}configs/${origin}`)
+      .get(`${config.apiPrefix}configs/${encodeURIComponent(origin)}`)
       .then(({ code, data }) => {
         if (code === 200) {
           setOriginValue(data);
@@ -62,7 +64,7 @@ const Diff = () => {
   const getFiles = () => {
     setLoading(true);
     request
-      .get(`${config.apiPrefix}configs/files`)
+      .get(`${config.apiPrefix}configs/sample`)
       .then(({ code, data }) => {
         if (code === 200) {
           setFiles(data);
@@ -71,12 +73,11 @@ const Diff = () => {
       .finally(() => setLoading(false));
   };
 
-  const originFileChange = (value: string) => {
+  const originFileChange = (value: string, op) => {
+    setCurrent(op.extra.target);
     setOrigin(value);
-  };
-
-  const currentFileChange = (value: string) => {
-    setCurrent(value);
+    const newMode = getEditorMode(value);
+    setLanguage(newMode);
   };
 
   useEffect(() => {
@@ -112,7 +113,7 @@ const Diff = () => {
           <Form.Item label={intl.get('源文件')}>
             <Select value={origin} onChange={originFileChange}>
               {files.map((x) => (
-                <Option key={x.value} value={x.value}>
+                <Option key={x.value} value={x.value} extra={x}>
                   {x.title}
                 </Option>
               ))}
@@ -121,13 +122,7 @@ const Diff = () => {
         </Col>
         <Col span={12}>
           <Form.Item label={intl.get('当前文件')}>
-            <Select value={current} onChange={currentFileChange}>
-              {files.map((x) => (
-                <Option key={x.value} value={x.value}>
-                  {x.title}
-                </Option>
-              ))}
-            </Select>
+            <span className="ant-form-text">{current}</span>
           </Form.Item>
         </Col>
       </Row>
@@ -159,7 +154,7 @@ const Diff = () => {
         />
       ) : (
         <DiffEditor
-          language={'shell'}
+          language={language}
           original={originValue}
           modified={currentValue}
           options={{