feat: add edit rule in editor

Author: magicdawn

notes.md

@@ -4,6 +4,6 @@
 
 - [x] 快速添加规则, mc clash add-rule GUI version
 - [x] 记住窗口位置
-- [ ] 导入导出(store 加密有必要, 防止扫描)
-- [ ] 备份不处理详情
+- [x] 导入导出(store 加密有必要, 防止扫描)
+- [ ] 备份不处理详情. (no need)
 - [ ] 在 vscode/Atom 中编辑规则

package.json

@@ -46,6 +46,7 @@
     "electron-updater": "^4.0.6",
     "electron-util": "^0.13.0",
     "env-paths": "^2.2.0",
+    "execa": "^4.0.3",
     "fs-extra": "^9.0.1",
     "js-yaml": "^3.14.0",
     "launch-editor": "^2.2.1",

readme.md

@@ -1,48 +1,9 @@
 # clash-config-manager
 
-> a clash config manager
-
-## Todo
-
-- [ ] 配置, 在 vscode 中打开
-- [ ] 添加配置
-- [ ] mc socks clash
+> a clashX config manager for macOS
 
 ## Install
 
 _macOS 10.10+, Linux, and Windows 7+ are supported (64-bit only)._
 
-**macOS**
-
-[**Download**](https://github.com/user/repo/releases/latest) the `.dmg` file.
-
-**Linux**
-
-[**Download**](https://github.com/user/repo/releases/latest) the `.AppImage` or `.deb` file.
-
-_The AppImage needs to be [made executable](http://discourse.appimage.org/t/how-to-make-an-appimage-executable/80) after download._
-
-**Windows**
-
-[**Download**](https://github.com/user/repo/releases/latest) the `.exe` file.
-
----
-
-## Dev
-
-Built with [Electron](https://electronjs.org).
-
-### Run
-
-```
-$ npm install
-$ npm start
-```
-
-### Publish
-
-```
-$ npm run release
-```
-
-After Travis finishes building your app, open the release draft it created and click "Publish".
+[**Download**](https://github.com/magicdawn/clash-config-manager/releases/latest) the `.dmg` file.

src/page/library-rule-list/ConfigEditor.js

@@ -8,13 +8,12 @@ import React, {
   forwardRef,
 } from 'react'
 import {usePersistFn, useUpdateEffect} from 'ahooks'
-
+import {Spin} from 'antd'
 import style from './ConfigEditor.module.less'
 
 export default forwardRef(ConfigEditor)
-
 function ConfigEditor(props, ref) {
-  const {value, onChange, readonly} = props
+  const {value, onChange, readonly, spinProps} = props
 
   const editorWillMount = usePersistFn((editor, monaco) => {})
 
@@ -59,16 +58,18 @@ function ConfigEditor(props, ref) {
   }, [readonly, ref])
 
   return (
-    <div style={{width: '100%', height: '50vh'}} className={style.editor}>
-      <MonacoEditor
-        language='yaml'
-        theme='quite-light'
-        value={value}
-        options={options}
-        onChange={editorOnChange}
-        editorWillMount={editorWillMount}
-        editorDidMount={editorDidMount}
-      />
-    </div>
+    <Spin {...spinProps}>
+      <div style={{width: '100%', height: '50vh'}} className={style.editor}>
+        <MonacoEditor
+          language='yaml'
+          theme='quite-light'
+          value={value}
+          options={options}
+          onChange={editorOnChange}
+          editorWillMount={editorWillMount}
+          editorDidMount={editorDidMount}
+        />
+      </div>
+    </Spin>
   )
 }

src/page/library-rule-list/index.js

@@ -1,3 +1,8 @@
+import {remote} from 'electron'
+import path from 'path'
+import fse from 'fs-extra'
+import execa from 'execa'
+import debugFactory from 'debug'
 import React, {useState, useCallback, useRef} from 'react'
 import {Button, Modal, Input, message, Tooltip} from 'antd'
 import {useMount, usePersistFn, useUpdateEffect} from 'ahooks'
@@ -10,8 +15,10 @@ import Yaml from 'js-yaml'
 import styles from './index.module.less'
 import {List, Space, Form, Select} from 'antd'
 const {Option} = Select
+const debug = debugFactory('app:libraryRuleList')
 
 const namespace = 'libraryRuleList'
+const TEMP_EDITING_FILE = path.join(remote.app.getPath('userData'), 'temp', '临时文件-关闭生效.yml')
 
 export default function LibraryRuleList() {
   const {effects, state} = usePlug({
@@ -214,6 +221,7 @@ function ModalAdd({visible, setVisible, editItem, editItemIndex, editMode}) {
   }
 
   const handleCancel = useCallback(() => {
+    if (editInEditorMaskVisible) return
     setVisible(false)
     clean()
   }, [])
@@ -296,6 +304,39 @@ function ModalAdd({visible, setVisible, editItem, editItemIndex, editMode}) {
     [form]
   )
 
+  const [editInEditorMaskVisible, setEditInEditorMaskVisible] = useState(false)
+  const editInEditor = usePersistFn(async (editor = 'code') => {
+    const content = form.getFieldValue('content')
+    await fse.outputFile(TEMP_EDITING_FILE, content, 'utf8')
+
+    // wait edit
+    setEditInEditorMaskVisible(true)
+    let execResults
+    const cmd = `${editor} --wait '${TEMP_EDITING_FILE}'`
+    try {
+      execResults = await execa.command(cmd, {shell: true})
+    } catch (e) {
+      message.error('执行命令出错: ' + e.message)
+      return
+    } finally {
+      setEditInEditorMaskVisible(false)
+    }
+
+    debug('exec: %o', {cmd, execResults})
+    const {exitCode} = execResults || {}
+    if (exitCode !== 0) {
+      message.error(`执行命令出错: exitCode = ${exitCode}`)
+      return
+    }
+
+    // read & set
+    const newContent = await fse.readFile(TEMP_EDITING_FILE, 'utf8')
+    if (newContent !== content) {
+      form.setFieldsValue({content: newContent})
+      message.success('文件内容已更新')
+    }
+  })
+
   return (
     <Modal
       className={styles.modal}
@@ -317,11 +358,23 @@ function ModalAdd({visible, setVisible, editItem, editItemIndex, editMode}) {
             />
           )}
 
-          <Button onClick={handleAddRuleChrome}>从 Chrome 添加规则</Button>
+          <Space direction='horizontal'>
+            <Button disabled={editInEditorMaskVisible} onClick={handleAddRuleChrome}>
+              从 Chrome 添加规则
+            </Button>
+            <Button disabled={editInEditorMaskVisible} onClick={() => editInEditor('code')}>
+              使用 vscode 编辑
+            </Button>
+            <Button disabled={editInEditorMaskVisible} onClick={() => editInEditor('atom')}>
+              使用 Atom 编辑
+            </Button>
+          </Space>
 
           <div className='btn-wrapper'>
-            <Button onClick={handleCancel}>取消</Button>
-            <Button type='primary' onClick={handleOk}>
+            <Button disabled={editInEditorMaskVisible} onClick={handleCancel}>
+              取消
+            </Button>
+            <Button disabled={editInEditorMaskVisible} type='primary' onClick={handleOk}>
               确定
             </Button>
           </div>
@@ -362,7 +415,21 @@ function ModalAdd({visible, setVisible, editItem, editItemIndex, editMode}) {
                 name='content'
                 rules={[{required: true, message: '内容不能为空'}]}
               >
-                <ConfigEditor ref={configEditorRef} readonly={readonly} />
+                <ConfigEditor
+                  ref={configEditorRef}
+                  readonly={readonly}
+                  spinProps={{
+                    size: 'large',
+                    spinning: editInEditorMaskVisible,
+                    tip: (
+                      <>
+                        文件已经在编辑器中打开
+                        <br />
+                        在编辑器中关闭文件生效
+                      </>
+                    ),
+                  }}
+                />
               </Form.Item>
             ) : (
               <Form.Item label='URL' name='url' rules={[{required: true, message: 'url不能为空'}]}>

src/util/sync/webdav/customMerge.js

@@ -24,13 +24,6 @@ import produce from 'immer'
 export default function mergeStore(a, b) {
   let ret = {...a}
 
-  const objectPath = [
-    //
-    'subscribe_detail',
-    'current_config_v2.name',
-    'preference',
-  ]
-
   ret = produce(ret, (draft) => {
     // 'subscribe_detail',
     Object.assign(draft.subscribe_detail, b.subscribe_detail)