feat: enhance group switch

FirefoxBar · Jul 4, 2024 · d890ddf · d890ddf
1 parent d2fa3c6
commit d890ddf
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 97 deletions.
diff --git a/locale/original/messages.json b/locale/original/messages.json
@@ -84,7 +84,7 @@
     "message": "Enable debug mode",
     "description": "Enable debug mode"
   },
-  "debug_mode_help": {
+  "debug_mode_enable_help": {
     "message": "When debug mode is turned on, some logs will be printed in the background page",
     "description": "Debug mode description"
   },
@@ -108,6 +108,10 @@
     "message": "Display common header",
     "description": "An option to enable header auto-complete when editing rules"
   },
+  "display_common_header_help": {
+    "message": "When editing rules, display common request & response header names",
+    "description": "Help text for display_common_header_help option"
+  },
   "download": {
     "message": "Download",
     "description": "Download button"

diff --git a/src/pages/options/sections/options/index.tsx b/src/pages/options/sections/options/index.tsx
@@ -17,56 +17,46 @@ interface OptionsState {
 }
 
 const prefItems: {
-  [key: string]: { label: string; help: string; type: 'switch' | 'select'; optionList?: Array<{ label: string; value: string }> };
+  [key: string]: { langKey: string; type: 'switch' | 'select'; optionList?: Array<{ label: string; value: string }> };
 } = {
   'manage-collapse-group': {
-    label: t('manage_collapse_group'),
-    help: '',
+    langKey: 'manage_collapse_group',
     type: 'switch',
   },
   'exclude-he': {
-    label: t('rules_no_effect_for_he'),
-    help: '',
+    langKey: 'rules_no_effect_for_he',
     type: 'switch',
   },
   'show-common-header': {
-    label: t('display_common_header'),
-    help: '',
+    langKey: 'display_common_header',
     type: 'switch',
   },
   'include-headers': {
-    label: t('include_header_in_custom_function'),
-    help: t('include_header_in_custom_function_help'),
+    langKey: 'include_header_in_custom_function',
     type: 'switch',
   },
   'modify-body': {
-    label: t('modify_body'),
-    help: t('modify_body_help'),
+    langKey: 'modify_body',
     type: 'switch',
   },
   'is-debug': {
-    label: t('debug_mode_enable'),
-    help: t('debug_mode_enable_help'),
+    langKey: 'debug_mode_enable',
     type: 'switch',
   },
   'rule-switch': {
-    label: t('rule_switch'),
-    help: t('rule_switch_help'),
+    langKey: 'rule_switch',
     type: 'switch',
   },
   'rule-history': {
-    label: t('rule_history'),
-    help: t('rule_history_help'),
+    langKey: 'rule_history',
     type: 'switch',
   },
   'quick-edit': {
-    label: t('quick_edit'),
-    help: t('quick_edit_help'),
+    langKey: 'quick_edit',
     type: 'switch',
   },
   'dark-mode': {
-    label: t('dark_mode'),
-    help: t('dark_mode_help'),
+    langKey: 'dark_mode',
     type: 'select',
     optionList: [
       {
@@ -154,13 +144,15 @@ export default class Options extends React.Component<OptionsProps, OptionsState>
             dataSource={allPrefs}
             renderItem={(key) => {
               const item = prefItems[key];
+              const label = t(item.langKey);
+              const help = t(`${item.langKey}_help`, undefined, '');
               return (
                 <List.Item
                   key={key}
                   main={
                     <div>
-                      <Typography.Text strong style={{ display: 'block' }}>{item.label}</Typography.Text>
-                      {item.help && <Typography.Text type="quaternary">{item.help}</Typography.Text>}
+                      <Typography.Text strong style={{ display: 'block' }}>{label}</Typography.Text>
+                      {help && <Typography.Text type="quaternary">{help}</Typography.Text>}
                     </div>
                   }
                   extra={

diff --git a/src/pages/popup/index.tsx b/src/pages/popup/index.tsx
@@ -34,17 +34,33 @@ const basicStyle = css`
     display: flex;
     flex-direction: column;
 
-    .cell-enable {
-      padding-right: 0;
-      .switch-container {
+    .item-block {
+      display: flex;
+      flex-direction: column;
+
+      > .item {
         display: flex;
+        flex-direction: row;
+        gap: 8px;
         align-items: center;
-      }
-    }
+        background-color: #fff;
+        border-top: 1px solid var(--semi-color-border);
+        padding-left: 8px;
+        padding-right: 8px;
 
-    .cell-action {
-      padding-top: 2px !important;
-      padding-bottom: 2px !important;
+        > * {
+          flex-grow: 0;
+          flex-shrink: 0;
+        }
+
+        > .name {
+          flex-grow: 1;
+          flex-shrink: 1;
+          font-size: 14px;
+          padding-top: 8px;
+          padding-bottom: 8px;
+        }
+      }
     }
   }
 `;

diff --git a/src/pages/popup/rule/group.tsx b/src/pages/popup/rule/group.tsx
@@ -1,7 +1,7 @@
 import { IconLock, IconUnlock } from '@douyinfe/semi-icons';
-import { Button, ButtonGroup, Table, Tooltip } from '@douyinfe/semi-ui';
+import { Button, ButtonGroup, Tooltip } from '@douyinfe/semi-ui';
 import { flatten } from 'lodash-es';
-import React, { useMemo } from 'react';
+import React from 'react';
 import Api from '@/share/pages/api';
 import useMarkCommon from '@/share/hooks/use-mark-common';
 import { t } from '@/share/core/utils';
@@ -20,44 +20,26 @@ const toggleGroup = async (name: string, target: boolean) => {
 const Group = () => {
   const { keys } = useMarkCommon('group');
 
-  const tableData = useMemo(() => keys.map((x) => ({
-    name: x,
-  })), [keys]);
-
   if (!keys || keys.length === 0) {
     return null;
   }
 
   return (
-    <Table
-      rowKey="name"
-      dataSource={tableData}
-      showHeader={false}
-      size="small"
-      columns={[
-        {
-          title: 'name',
-          dataIndex: 'name',
-        },
-        {
-          title: 'action',
-          dataIndex: 'name',
-          className: 'cell-action',
-          width: 96,
-          render: (value: string) => (
-            <ButtonGroup>
-              <Tooltip content={t('enable')}>
-                <Button theme="borderless" type="tertiary" onClick={() => toggleGroup(value, true)} icon={<IconUnlock />} />
-              </Tooltip>
-              <Tooltip content={t('disable')}>
-                <Button theme="borderless" type="tertiary" onClick={() => toggleGroup(value, false)} icon={<IconLock />} />
-              </Tooltip>
-            </ButtonGroup>
-          ),
-        },
-      ]}
-      pagination={false}
-    />
+    <div className="item-block">
+      {keys.map((key) => (
+        <div className="item" key={key}>
+          <div className="name">{key}</div>
+          <ButtonGroup>
+            <Tooltip content={t('enable')}>
+              <Button theme="borderless" type="tertiary" onClick={() => toggleGroup(key, true)} size="small" icon={<IconUnlock />} />
+            </Tooltip>
+            <Tooltip content={t('disable')}>
+              <Button theme="borderless" type="tertiary" onClick={() => toggleGroup(key, false)} size="small" icon={<IconLock />} />
+            </Tooltip>
+          </ButtonGroup>
+        </div>
+      ))}
+    </div>
   );
 };
 

diff --git a/src/pages/popup/rule/rules.tsx b/src/pages/popup/rule/rules.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useLatest, useRequest } from 'ahooks';
 import { Button, Popover, Spin, Switch } from '@douyinfe/semi-ui';
 import { IconBranch } from '@douyinfe/semi-icons';
-import { css, cx } from '@emotion/css';
+import { cx } from '@emotion/css';
 import Api from '@/share/pages/api';
 import { getVirtualKey, parseVirtualKey } from '@/share/core/utils';
 import type { Rule } from '@/share/core/types';
@@ -71,35 +71,7 @@ const Rules = () => {
 
   return (
     <Spin spinning={loading}>
-      <div className={css`
-        display: flex;
-        flex-direction: column;
-
-        > .item {
-          display: flex;
-          flex-direction: row;
-          gap: 8px;
-          align-items: center;
-          background-color: #fff;
-          border-top: 1px solid var(--semi-color-border);
-          padding-left: 8px;
-          padding-right: 8px;
-
-          > * {
-            flex-grow: 0;
-            flex-shrink: 0;
-          }
-
-          > .name {
-            flex-grow: 1;
-            flex-shrink: 1;
-            font-size: 14px;
-            padding-top: 8px;
-            padding-bottom: 8px;
-          }
-        }
-      `}
-      >
+      <div className="item-block">
         {data.map((item) => (
           <div className="item" key={item[VIRTUAL_KEY]}>
             <Switch