feat: add quick edit

FirefoxBar · Jul 3, 2024 · d55decc · d55decc
1 parent 431b297
commit d55decc
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 4 deletions.
diff --git a/src/pages/background/core/rules.ts b/src/pages/background/core/rules.ts
@@ -128,7 +128,7 @@ async function save(o: Rule) {
               !o.isFunction &&
               [RULE_TYPE.MODIFY_RECV_HEADER, RULE_TYPE.MODIFY_SEND_HEADER, RULE_TYPE.REDIRECT].includes(o.ruleType)
             ) {
-              const writeValue = o.ruleType === RULE_TYPE.REDIRECT ? o.action : (o.action as RULE_ACTION_OBJ).value;
+              const writeValue = o.ruleType === RULE_TYPE.REDIRECT ? o.to : (o.action as RULE_ACTION_OBJ).value;
               const key = `rule_switch_${getVirtualKey(o)}`;
               const engine = getLocal();
               engine.get(key).then((result) => {

diff --git a/src/pages/options/sections/options/index.tsx b/src/pages/options/sections/options/index.tsx
@@ -24,6 +24,7 @@ const checkPrefs: { [key: string]: string } = {
   'is-debug': t('debug_mode_enable'),
   'rule-switch': t('rule-switch'),
   'rule-history': t('rule-history'),
+  'quick-edit': t('quick-edit'),
 };
 
 interface SelectItem {

diff --git a/src/pages/popup/rule/quick-edit.tsx b/src/pages/popup/rule/quick-edit.tsx
@@ -0,0 +1,115 @@
+import { IconEdit } from '@douyinfe/semi-icons';
+import { Button, Form, Input, Modal } from '@douyinfe/semi-ui';
+import { css } from '@emotion/css';
+import { useLatest } from 'ahooks';
+import React, { ReactNode, useCallback } from 'react';
+import { RULE_TYPE } from '@/share/core/constant';
+import { RULE_ACTION_OBJ, Rule } from '@/share/core/types';
+import { t } from '@/share/core/utils';
+import useOption from '@/share/hooks/use-option';
+import Api from '@/share/pages/api';
+import { Toast } from '@/share/pages/toast';
+
+interface QuickEditProps {
+  rule: Rule;
+}
+
+const QuickEdit = ({ rule }: QuickEditProps) => {
+  const { isFunction, ruleType } = rule;
+  const ruleRef = useLatest(rule);
+
+  const isEnable = useOption('quick-edit', false);
+
+  const handleEdit = useCallback(() => {
+    const newRule = { ...ruleRef.current };
+
+    let content: ReactNode = null;
+    if (newRule.ruleType === RULE_TYPE.REDIRECT) {
+      content = (
+        <Form.Slot label={t('redirectTo')}>
+          <Input defaultValue={newRule.to} onChange={(v) => (newRule.to = v)} />
+        </Form.Slot>
+      );
+    }
+
+    if ([RULE_TYPE.MODIFY_RECV_HEADER, RULE_TYPE.MODIFY_SEND_HEADER].includes(newRule.ruleType)) {
+      newRule.action = { ...(newRule.action as RULE_ACTION_OBJ) };
+      content = (
+        <>
+          <Form.Slot label={t('headerName')}>
+            <Input
+              defaultValue={(newRule.action as RULE_ACTION_OBJ).name}
+              onChange={(v) => ((newRule.action as RULE_ACTION_OBJ).name = v)}
+            />
+          </Form.Slot>
+          <Form.Slot label={t('headerValue')}>
+            <Input
+              defaultValue={(newRule.action as RULE_ACTION_OBJ).value}
+              onChange={(v) => ((newRule.action as RULE_ACTION_OBJ).value = v)}
+            />
+          </Form.Slot>
+        </>
+      );
+    }
+
+    Modal.confirm({
+      icon: null,
+      closable: false,
+      className: css`
+        .semi-modal {
+          margin: 0;
+          position: fixed;
+          bottom: 0;
+          width: 100%;
+          > .semi-modal-content {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            border-bottom: 0;
+            border-left: 0;
+            border-right: 0;
+
+            > .semi-modal-footer {
+              margin-top: 0;
+              margin-bottom: 12px;
+            }
+          }
+        }
+      `,
+      content,
+      onOk: async () => {
+        if (newRule.ruleType === 'redirect' && (!newRule.to || newRule.to === '')) {
+          Toast().error(t('redirect_empty'));
+          return;
+        }
+        if (
+          (newRule.ruleType === 'modifySendHeader' || newRule.ruleType === 'modifyReceiveHeader') &&
+          (typeof newRule.action !== 'object' || newRule.action.name === '')
+        ) {
+          Toast().error(t('header_empty'));
+          return;
+        }
+        try {
+          await Api.saveRule(newRule);
+          Toast().success(t('saved'));
+        } catch (e) {
+          Toast().error(e.message);
+        }
+      },
+    });
+  }, []);
+
+  if (!isEnable) {
+    return null;
+  }
+
+  if (
+    isFunction ||
+    ![RULE_TYPE.MODIFY_RECV_HEADER, RULE_TYPE.MODIFY_SEND_HEADER, RULE_TYPE.REDIRECT].includes(ruleType)
+  ) {
+    return null;
+  }
+
+  return <Button theme="borderless" type="tertiary" size="small" icon={<IconEdit />} onClick={handleEdit} />;
+};
+
+export default QuickEdit;
diff --git a/src/pages/popup/rule/rules.tsx b/src/pages/popup/rule/rules.tsx
@@ -12,6 +12,7 @@ import RuleDetail from '@/share/components/rule-detail';
 import notify from '@/share/core/notify';
 import RuleContentSwitcher from '@/share/components/rule-content-switcher';
 import { textEllipsis } from '@/share/pages/styles';
+import QuickEdit from './quick-edit';
 
 const Rules = () => {
   const { keys } = useMarkCommon('rule');
@@ -112,9 +113,12 @@ const Rules = () => {
             <Popover showArrow position="top" content={<RuleDetail rule={item} />} style={{ maxWidth: '300px' }}>
               <div className={cx(textEllipsis, 'name')}>{item.name}</div>
             </Popover>
-            <RuleContentSwitcher rule={item} type={item.ruleType} size="small" add={false}>
-              <Button theme="borderless" type="tertiary" size="small" icon={<IconBranch />} />
-            </RuleContentSwitcher>
+            <div className="actions">
+              <QuickEdit rule={item} />
+              <RuleContentSwitcher rule={item} type={item.ruleType} size="small" add={false}>
+                <Button theme="borderless" type="tertiary" size="small" icon={<IconBranch />} />
+              </RuleContentSwitcher>
+            </div>
           </div>
         ))}
       </div>

diff --git a/src/share/core/constant.ts b/src/share/core/constant.ts
@@ -38,6 +38,7 @@ export const defaultPrefValue: PrefValue = {
   'dark-mode': 'auto',
   'rule-switch': true,
   'rule-history': true,
+  'quick-edit': true,
 };
 
 export enum APIs {

diff --git a/src/share/core/types.ts b/src/share/core/types.ts
@@ -59,4 +59,7 @@ export interface PrefValue {
   'modify-body': boolean; // Enable modify received body feature
   'is-debug': boolean;
   'dark-mode': 'auto' | 'on' | 'off';
+  'rule-switch': boolean; // Enable rule quick switch
+  'rule-history': boolean; // Auto save rule history into quick switch
+  'quick-edit': boolean; // Quick edit rule in popup panel
 }