feat: enhance option page

locale/original/messages.json

@@ -210,7 +210,11 @@
   },
   "include_header_in_custom_function": {
     "message": "Include request headers in custom function",
-    "description": "An option to enable this feature, for more info, see wiki in GitHub"
+    "description": "An option to enable this feature"
+  },
+  "include_header_in_custom_function_help": {
+    "message": "Pass the request header into the custom function that processes the response header, it may reduce some performance",
+    "description": "Help text for include_header_in_custom_function option"
   },
   "manage": {
     "message": "Manage",
@@ -256,6 +260,10 @@
     "message": "Modify response body (only supports Firefox)",
     "description": "Option to enable/disable modify body"
   },
+  "modify_body_help": {
+    "message": "Allow custom function modify response body, it may reduce some performance",
+    "description": "Help text for modify_body option"
+  },
   "name": {
     "message": "Name",
     "description": "Label for name in modal"
@@ -320,19 +328,35 @@
     "message": "Rules take no effect on Header Editor",
     "description": "If checked, all rules will take no effect on pages in Header Editor"
   },
-  "rule-switch": {
+  "rules_no_effect_for_he_help": {
+    "message": "If checked, all rules will take no effect on pages in Header Editor",
+    "description": "Help text for rules_no_effect_for_he option"
+  },
+  "rule_switch": {
     "message": "Enable rule quick switching",
-    "description": "Switch rule content with a menu"
+    "description": "Use the menu to switch rule content"
   },
-  "rule-history": {
+  "rule_switch_help": {
+    "message": "Use the menu to switch rule content",
+    "description": "Help text for rule_switch option"
+  },
+  "rule_history": {
     "message": "Automatically record rule history",
     "description": "If checked, rule history will automatically record to the switch list"
   },
-  "quick-edit": {
-    "message": "Quick edit (on popup panel)",
+  "rule_history_help": {
+    "message": "If checked, rule history will automatically record to the switch list",
+    "description": "Help text for rule_history option"
+  },
+  "quick_edit": {
+    "message": "Quick edit",
     "description": "Display edit button on the popup panel"
   },
-  "auto-enable-modify-body": {
+  "quick_edit_help": {
+    "message": "Display edit button on the popup panel",
+    "description": "Help text for quick_edit option"
+  },
+  "auto_enable_modify_body": {
     "message": "Modify body has been automatically turned on, please turn it off manually if you don't need it",
     "description": "A message"
   },

src/pages/options/sections/options/index.tsx

@@ -1,11 +1,12 @@
-import { Card, Checkbox, Col, Form, Row, Select, Typography } from '@douyinfe/semi-ui';
-import * as React from 'react';
-import Api from '@/share/pages/api';
+import { Card, List, Select, Switch, Typography } from '@douyinfe/semi-ui';
+import { css } from '@emotion/css';
+import React from 'react';
+import { defaultPrefValue } from '@/share/core/constant';
 import emitter from '@/share/core/emitter';
 import { prefs } from '@/share/core/prefs';
-import { t } from '@/share/core/utils';
 import type { PrefValue } from '@/share/core/types';
-import { defaultPrefValue } from '@/share/core/constant';
+import { t } from '@/share/core/utils';
+import Api from '@/share/pages/api';
 
 interface OptionsProps {
   visible: boolean;
@@ -15,29 +16,59 @@ interface OptionsState {
   prefs: PrefValue;
 }
 
-const checkPrefs: { [key: string]: string } = {
-  'manage-collapse-group': t('manage_collapse_group'),
-  'exclude-he': t('rules_no_effect_for_he'),
-  'show-common-header': t('display_common_header'),
-  'include-headers': t('include_header_in_custom_function'),
-  'modify-body': t('modify_body'),
-  'is-debug': t('debug_mode_enable'),
-  'rule-switch': t('rule-switch'),
-  'rule-history': t('rule-history'),
-  'quick-edit': t('quick-edit'),
-};
-
-interface SelectItem {
-  title: string;
-  options: Array<{
-    label: string;
-    value: string;
-  }>;
-}
-const selectPrefs: { [key: string]: SelectItem } = {
+const prefItems: {
+  [key: string]: { label: string; help: string; type: 'switch' | 'select'; optionList?: Array<{ label: string; value: string }> };
+} = {
+  'manage-collapse-group': {
+    label: t('manage_collapse_group'),
+    help: '',
+    type: 'switch',
+  },
+  'exclude-he': {
+    label: t('rules_no_effect_for_he'),
+    help: '',
+    type: 'switch',
+  },
+  'show-common-header': {
+    label: t('display_common_header'),
+    help: '',
+    type: 'switch',
+  },
+  'include-headers': {
+    label: t('include_header_in_custom_function'),
+    help: t('include_header_in_custom_function_help'),
+    type: 'switch',
+  },
+  'modify-body': {
+    label: t('modify_body'),
+    help: t('modify_body_help'),
+    type: 'switch',
+  },
+  'is-debug': {
+    label: t('debug_mode_enable'),
+    help: t('debug_mode_enable_help'),
+    type: 'switch',
+  },
+  'rule-switch': {
+    label: t('rule_switch'),
+    help: t('rule_switch_help'),
+    type: 'switch',
+  },
+  'rule-history': {
+    label: t('rule_history'),
+    help: t('rule_history_help'),
+    type: 'switch',
+  },
+  'quick-edit': {
+    label: t('quick_edit'),
+    help: t('quick_edit_help'),
+    type: 'switch',
+  },
   'dark-mode': {
-    title: t('dark_mode'),
-    options: [
+    label: t('dark_mode'),
+    help: t('dark_mode_help'),
+    type: 'select',
+    optionList: [
       {
         label: t('auto'),
         value: 'auto',
@@ -54,6 +85,17 @@ const selectPrefs: { [key: string]: SelectItem } = {
   },
 };
 
+const allPrefs = Object.keys(prefItems);
+
+const style = css`
+  width: 800px;
+  max-width: 100%;
+  margin: 0 auto;
+  .semi-card-body {
+    padding: 0;
+  }
+`;
+
 export default class Options extends React.Component<OptionsProps, OptionsState> {
   constructor(props: any) {
     super(props);
@@ -107,43 +149,35 @@ export default class Options extends React.Component<OptionsProps, OptionsState>
   render() {
     return (
       <section className={`section-options ${this.props.visible ? 'visible' : 'in-visible'}`}>
-        <Card
-          title={t('options')}
-          footerLine
-          footer={
-            <div>
-              <div><Typography.Text type="tertiary">* {t('dark_mode_help')}</Typography.Text></div>
-              <div><Typography.Text type="tertiary">* {t('debug_mode_help')}</Typography.Text></div>
-            </div>
-          }
-        >
-          <Row gutter={8}>
-            {Object.entries(checkPrefs).map((it) => {
-              return (
-                <Col xl={12} span={24} key={it[0]} style={{ marginBottom: '8px' }}>
-                  <Checkbox
-                    onChange={(e) => this.handleChange(it[0], Boolean(e.target.checked))}
-                    checked={this.state.prefs[it[0]]}
-                  >
-                    {it[1]}
-                  </Checkbox>
-                </Col>
-              );
-            })}
-            {Object.entries(selectPrefs).map((it) => {
+        <Card title={t('options')} className={style}>
+          <List
+            dataSource={allPrefs}
+            renderItem={(key) => {
+              const item = prefItems[key];
               return (
-                <Col xl={12} span={24} key={it[0]} style={{ marginBottom: '8px' }}>
-                  <Form.Slot label={it[1].title} labelPosition="left">
-                    <Select
-                      optionList={it[1].options}
-                      onChange={(v) => this.handleChange(it[0], v)}
-                      value={this.state.prefs[it[0]]}
-                    />
-                  </Form.Slot>
-                </Col>
+                <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>}
+                    </div>
+                  }
+                  extra={
+                    item.type === 'select' ? (
+                      <Select
+                        optionList={item.optionList}
+                        onChange={(v) => this.handleChange(key, v)}
+                        value={this.state.prefs[key]}
+                      />
+                    ) : (
+                      <Switch checked={this.state.prefs[key]} onChange={(v) => this.handleChange(key, Boolean(v))} />
+                    )
+                  }
+                />
               );
-            })}
-          </Row>
+            }}
+          />
         </Card>
       </section>
     );

src/pages/options/sections/rules/rule-group-card.tsx

@@ -76,7 +76,7 @@ const RuleGroupCard = (props: RuleCardProps) => {
       className: 'cell-enable',
       dataIndex: 'enable',
       align: 'center',
-      width: 60,
+      width: 80,
       render: (value: boolean, item: InitdRule) => (
         <div className="switch-container">
           <Switch size="small" checked={value} onChange={(checked) => toggleRule(item, checked)} />

src/share/core/utils.ts

@@ -129,9 +129,15 @@ export function canAccess(url?: string) {
   return true;
 }
 
-export function t(key: string, params?: any) {
+export function t(key: string, params?: any, defaultValue?: string) {
   const s = browser.i18n.getMessage(key, params);
-  return s || key;
+  if (s) {
+    return s;
+  }
+  if (typeof defaultValue !== 'undefined') {
+    return defaultValue;
+  }
+  return key;
 }
 
 export function getDomain(url: string) {