From 75b43e1e846aa2bbeb1c19a0ca95dfa87ae1ff5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Sat, 17 May 2025 11:20:52 +0900
Subject: [PATCH] refactor: batch 2

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  21 ++
 src/components/AppRoot.tsx                    |  19 +-
 src/components/Dialog.tsx                     |   2 +-
 src/components/ExtLink.tsx                    |   4 +-
 src/components/InfoModal.tsx                  |  25 ++
 src/components/InstructionsTabs.tsx           |  33 +++
 src/components/KeyInput.tsx                   |  85 +++++++
 src/components/Ruby.tsx                       |  20 ++
 src/features/settings/Settings.tsx            | 216 +++++++-----------
 .../settings/panels/PanelQMCv2Key.tsx         |  85 +++----
 .../settings/panels/QMCv2/InstructionsPC.tsx  |  14 +-
 .../QMCv2/QMCv2DoubanAllInstructions.tsx      |  23 +-
 .../settings/panels/QMCv2/QMCv2EKeyItem.tsx   |  57 ++---
 .../QMCv2/QMCv2QQMusicAllInstructions.tsx     |  38 ++-
 src/features/settings/settingsTabs.tsx        |  13 ++
 16 files changed, 384 insertions(+), 272 deletions(-)
 create mode 100644 src/components/InfoModal.tsx
 create mode 100644 src/components/InstructionsTabs.tsx
 create mode 100644 src/components/KeyInput.tsx
 create mode 100644 src/components/Ruby.tsx
 create mode 100644 src/features/settings/settingsTabs.tsx

diff --git a/package.json b/package.json
index 7a11b27..8d00f68 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "react-redux": "^9.2.0",
     "react-router": "^7.6.0",
     "react-syntax-highlighter": "^15.6.1",
+    "react-toastify": "^11.0.5",
     "sass": "^1.89.0",
     "sql.js": "^1.13.0",
     "workbox-build": "^7.3.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e14dcd0..a61154b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       react-syntax-highlighter:
         specifier: ^15.6.1
         version: 15.6.1(react@19.1.0)
+      react-toastify:
+        specifier: ^11.0.5
+        version: 11.0.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       sass:
         specifier: ^1.89.0
         version: 1.89.0
@@ -1971,6 +1974,10 @@ packages:
     resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
     engines: {node: '>=18'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -3414,6 +3421,12 @@ packages:
     peerDependencies:
       react: '>= 0.14.0'
 
+  react-toastify@11.0.5:
+    resolution: {integrity: sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==}
+    peerDependencies:
+      react: ^18 || ^19
+      react-dom: ^18 || ^19
+
   react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
@@ -6102,6 +6115,8 @@ snapshots:
       slice-ansi: 5.0.0
       string-width: 7.2.0
 
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -7562,6 +7577,12 @@ snapshots:
       react: 19.1.0
       refractor: 3.6.0
 
+  react-toastify@11.0.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      clsx: 2.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   react@19.1.0: {}
 
   readdirp@4.1.2: {}
diff --git a/src/components/AppRoot.tsx b/src/components/AppRoot.tsx
index 2b571e1..7382a2f 100644
--- a/src/components/AppRoot.tsx
+++ b/src/components/AppRoot.tsx
@@ -10,6 +10,8 @@ import { persistSettings } from '~/features/settings/persistSettings';
 import { setupStore } from '~/store';
 import { Footer } from '~/components/Footer';
 import { FaqTab } from '~/tabs/FaqTab';
+import { SETTINGS_TABS } from '~/features/settings/settingsTabs';
+import { Bounce, ToastContainer } from 'react-toastify';
 
 // Private to this file only.
 const store = setupStore();
@@ -40,11 +42,26 @@ export function AppRoot() {
         <main className="flex-1 flex justify-center">
           <Routes>
             <Route path="/" Component={MainTab} />
-            <Route path="/settings" Component={SettingsTab} />
+            <Route path="/settings" Component={SettingsTab}>
+              {Object.entries(SETTINGS_TABS).map(([key, { Tab }]) => (
+                <Route key={key} path={key} Component={Tab} />
+              ))}
+            </Route>
             <Route path="/questions" Component={FaqTab} />
           </Routes>
         </main>
 
+        <ToastContainer
+          position="bottom-center"
+          autoClose={5000}
+          newestOnTop
+          closeOnClick={false}
+          pauseOnFocusLoss
+          draggable
+          theme="colored"
+          transition={Bounce}
+        />
+
         <Footer />
       </Provider>
     </BrowserRouter>
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 4bc1e25..3035259 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -27,7 +27,7 @@ export function Dialog({ closeButton, backdropClose, title, children, show, onCl
             <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
           </form>
         )}
-        <h3 className="font-bold text-lg">{title}</h3>
+        <h3 className="font-bold text-lg pb-3">{title}</h3>
         {children}
       </div>
       {backdropClose && (
diff --git a/src/components/ExtLink.tsx b/src/components/ExtLink.tsx
index edd9da1..83c78b5 100644
--- a/src/components/ExtLink.tsx
+++ b/src/components/ExtLink.tsx
@@ -7,9 +7,9 @@ export type ExtLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
 
 export function ExtLink({ className, icon = true, children, ...props }: ExtLinkProps) {
   return (
-    <a rel="noreferrer noopener nofollow" className={`link ${className}`} {...props}>
+    <a rel="noreferrer noopener nofollow" target="_blank" className={`link  ${className}`} {...props}>
       {children}
-      {icon && <FiExternalLink />}
+      {icon && <FiExternalLink className="inline size-sm ml-1" />}
     </a>
   );
 }
diff --git a/src/components/InfoModal.tsx b/src/components/InfoModal.tsx
new file mode 100644
index 0000000..78c2214
--- /dev/null
+++ b/src/components/InfoModal.tsx
@@ -0,0 +1,25 @@
+import { Dialog } from '~/components/Dialog.tsx';
+import React, { useState } from 'react';
+
+interface InfoModalProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export function InfoModal(props: InfoModalProps) {
+  const { title, description, children } = props;
+
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <div>
+      <button className="btn btn-info btn-sm" type="button" onClick={() => setShowModal(true)}>
+        {children || '这是什么?'}
+      </button>
+
+      <Dialog closeButton backdropClose show={showModal} onClose={() => setShowModal(false)} title={title}>
+        {description}
+      </Dialog>
+    </div>
+  );
+}
diff --git a/src/components/InstructionsTabs.tsx b/src/components/InstructionsTabs.tsx
new file mode 100644
index 0000000..f3860e2
--- /dev/null
+++ b/src/components/InstructionsTabs.tsx
@@ -0,0 +1,33 @@
+import React, { Fragment, useId } from 'react';
+
+export type InstructionTab = {
+  id: string | number;
+  label: React.ReactNode;
+  content: React.ReactNode;
+};
+
+export interface InstructionsTabsProps {
+  tabs: InstructionTab[];
+}
+
+export function InstructionsTabs({ tabs }: InstructionsTabsProps) {
+  const id = useId();
+  return (
+    <div className="tabs tabs-lift h-[20rem] pb-4">
+      {tabs.map(({ id: _tabId, label, content }, index) => (
+        <Fragment key={_tabId}>
+          <label className="tab">
+            <input type="radio" name={id} defaultChecked={index === 0} />
+            {label}
+          </label>
+          <div className="tab-content border-base-300 bg-base-100 px-4 py-2 overflow-y-auto">{content}</div>
+        </Fragment>
+      ))}
+      {/*<label className="tab">*/}
+      {/*  <input type="radio" name={id} />a*/}
+      {/*</label>*/}
+      {/*<div className="tab-content border-base-300 bg-base-100 px-4 py-2 overflow-y-auto"></div>*/}
+      {/*<input type="radio" name={id} className="tab" aria-label="安卓" defaultChecked />*/}
+    </div>
+  );
+}
diff --git a/src/components/KeyInput.tsx b/src/components/KeyInput.tsx
new file mode 100644
index 0000000..489b2c2
--- /dev/null
+++ b/src/components/KeyInput.tsx
@@ -0,0 +1,85 @@
+import { PiFileAudio } from 'react-icons/pi';
+import { MdDelete, MdVpnKey } from 'react-icons/md';
+import React from 'react';
+
+export interface KeyInputProps {
+  sequence: number;
+
+  name: string;
+  value: string;
+  isValidKey?: boolean;
+  onSetName: (name: string) => void;
+  onSetValue: (value: string) => void;
+  onDelete: () => void;
+
+  nameLabel?: React.ReactNode;
+  valueLabel?: React.ReactNode;
+  namePlaceholder?: string;
+  valuePlaceholder?: string;
+}
+
+export function KeyInput(props: KeyInputProps) {
+  const {
+    nameLabel,
+    valueLabel,
+    namePlaceholder,
+    valuePlaceholder,
+    sequence,
+    name,
+    value,
+    onSetName,
+    onSetValue,
+    onDelete,
+    isValidKey,
+  } = props;
+
+  return (
+    <li className="list-row items-center">
+      <div className="flex items-center justify-center w-8 h-8 text-sm font-bold text-gray-500 bg-gray-200 rounded-full">
+        {sequence}
+      </div>
+
+      <div className="join join-vertical flex-1">
+        <label className="input w-full rounded-tl-md rounded-tr-md">
+          <span className="cucursor-default inline-flex items-center gap-1 select-none">
+            {nameLabel || (
+              <>
+                文件 <PiFileAudio />
+              </>
+            )}
+          </span>
+          <input
+            type="text"
+            className="font-mono"
+            placeholder={namePlaceholder}
+            value={name}
+            onChange={(e) => onSetName(e.target.value)}
+          />
+        </label>
+        <label className="input w-full rounded-bl-md rounded-br-md mt-[-1px]">
+          <span className="cursor-default inline-flex items-center gap-1 select-none">
+            {valueLabel || (
+              <>
+                密钥 <MdVpnKey />
+              </>
+            )}
+          </span>
+          <input
+            type="text"
+            className="font-mono"
+            placeholder={valuePlaceholder}
+            value={value}
+            onChange={(e) => onSetValue(e.target.value)}
+          />
+          <span className={isValidKey ? 'text-green-600' : 'text-red-600'}>
+            <code>{value.length || '?'}</code>
+          </span>
+        </label>
+      </div>
+
+      <button type="button" className="btn btn-error btn-sm px-1 btn-outline" onClick={onDelete}>
+        <MdDelete className="size-6" />
+      </button>
+    </li>
+  );
+}
diff --git a/src/components/Ruby.tsx b/src/components/Ruby.tsx
new file mode 100644
index 0000000..3ad33b9
--- /dev/null
+++ b/src/components/Ruby.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export interface RubyProps {
+  caption: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Ruby(props: RubyProps) {
+  const { caption, children, ...rest } = props;
+
+  return (
+    <ruby {...rest}>
+      {children}
+      <rp>(</rp>
+      <rt>{caption}</rt>
+      <rp>)</rp>
+    </ruby>
+  );
+}
diff --git a/src/features/settings/Settings.tsx b/src/features/settings/Settings.tsx
index b30c254..ef19496 100644
--- a/src/features/settings/Settings.tsx
+++ b/src/features/settings/Settings.tsx
@@ -1,158 +1,102 @@
-import {
-  Box,
-  Button,
-  Center,
-  chakra,
-  Flex,
-  HStack,
-  Icon,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Portal,
-  Spacer,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  Text,
-  useToast,
-  VStack,
-} from '@chakra-ui/react';
-import { PanelQMCv2Key } from './panels/PanelQMCv2Key';
-import { useState, type FC } from 'react';
-import { MdExpandMore, MdMenu, MdOutlineSettingsBackupRestore } from 'react-icons/md';
 import { useAppDispatch, useAppSelector } from '~/hooks';
 import { commitStagingChange, discardStagingChanges } from './settingsSlice';
-import { PanelKWMv2Key } from './panels/PanelKWMv2Key';
 import { selectIsSettingsNotSaved } from './settingsSelector';
-import { PanelQingTing } from './panels/PanelQingTing';
-import { PanelKGGKey } from '~/features/settings/panels/PanelKGGKey.tsx';
-
-const TABS: { name: string; Tab: FC }[] = [
-  { name: 'QMCv2 密钥', Tab: PanelQMCv2Key },
-  { name: 'KWMv2 密钥', Tab: PanelKWMv2Key },
-  { name: 'KGG 密钥', Tab: PanelKGGKey },
-  { name: '蜻蜓 FM', Tab: PanelQingTing },
-  {
-    name: '其它／待定',
-    Tab: () => <Text>这里空空如也～</Text>,
-  },
-];
+import { NavLink, Outlet } from 'react-router';
+import { SETTINGS_TABS } from '~/features/settings/settingsTabs.tsx';
+import { MdOutlineSettingsBackupRestore } from 'react-icons/md';
+import { toast } from 'react-toastify';
 
 export function Settings() {
-  const toast = useToast();
   const dispatch = useAppDispatch();
-  const isLargeWidthDevice = false;
 
-  const [tabIndex, setTabIndex] = useState(0);
-  const handleTabChange = (idx: number) => {
-    setTabIndex(idx);
-  };
   const handleResetSettings = () => {
     dispatch(discardStagingChanges());
 
-    toast({
-      status: 'info',
-      title: '未储存的设定已舍弃',
-      description: '已还原到更改前的状态。',
-      isClosable: true,
-    });
+    toast.info(() => (
+      <div>
+        <h3 className="text-lg font-bold">未储存的设定已舍弃</h3>
+        <p className="text-sm">已还原到更改前的状态。</p>
+      </div>
+    ));
   };
   const handleApplySettings = () => {
     dispatch(commitStagingChange());
-    toast({
-      status: 'success',
-      title: '设定已应用',
-      isClosable: true,
-    });
+    toast.success('设定已应用');
   };
   const isSettingsNotSaved = useAppSelector(selectIsSettingsNotSaved);
 
   return (
-    <Flex flexDir="column" flex={1}>
-      <Menu>
-        <MenuButton
-          as={Button}
-          leftIcon={<MdMenu />}
-          rightIcon={<MdExpandMore />}
-          colorScheme="gray"
-          variant="outline"
-          w="full"
-          flexShrink={0}
-          hidden={isLargeWidthDevice}
-          mb="4"
-        >
-          {TABS[tabIndex].name}
-        </MenuButton>
-        <Portal>
-          <MenuList w="100px">
-            {TABS.map(({ name }, i) => (
-              <MenuItem key={name} onClick={() => setTabIndex(i)}>
-                {name}
-              </MenuItem>
-            ))}
-          </MenuList>
-        </Portal>
-      </Menu>
+    <div className="flex flex-col flex-1 container w-full">
+      <div role="tablist" className="tabs tabs-border w-full justify-center gap-2">
+        {Object.entries(SETTINGS_TABS).map(([id, { name }]) => (
+          <NavLink className="link link-neutral" key={id} to={`/settings/${id}`} role="tab">
+            {name}
+          </NavLink>
+        ))}
+      </div>
 
-      <Tabs
-        orientation={isLargeWidthDevice ? 'vertical' : 'horizontal'}
-        align="start"
-        variant="line-i"
-        display="flex"
-        flex={1}
-        index={tabIndex}
-        onChange={handleTabChange}
-      >
-        <TabList hidden={!isLargeWidthDevice} minW="8em" width="8em" textAlign="right" justifyContent="center">
-          {TABS.map(({ name }) => (
-            <Tab key={name}>{name}</Tab>
-          ))}
-        </TabList>
+      {/* TODO: ensure this flex div does not overflow */}
+      <div className="flex flex-1 flex-col h-full overflow-auto">
+        <Outlet />
+      </div>
 
-        <TabPanels>
-          {TABS.map(({ name, Tab }) => (
-            <Flex as={TabPanel} flex={1} flexDir="column" h="100%" key={name}>
-              <Flex h="100%" flex={1} minH={0}>
-                <Tab />
-              </Flex>
+      <footer className="flex flex-row gap-2 w-full py-3">
+        <div className="grow">
+          {isSettingsNotSaved ? (
+            <span>
+              有未储存的更改，<span className="text-red-600">设定将在保存后生效</span>
+            </span>
+          ) : (
+            <span className="text-base-700">设定将在保存后生效</span>
+          )}
+        </div>
 
-              <VStack mt="4" alignItems="flex-start" w="full">
-                <Flex flexDir="row" gap="2" w="full">
-                  <Center>
-                    {isSettingsNotSaved ? (
-                      <Box color="gray">
-                        有未储存的更改{' '}
-                        <chakra.span color="red" wordBreak="keep-all">
-                          设定将在保存后生效
-                        </chakra.span>
-                      </Box>
-                    ) : (
-                      <Box color="gray">设定将在保存后生效</Box>
-                    )}
-                  </Center>
-                  <Spacer />
-                  <HStack gap="2" justifyContent="flex-end">
-                    <IconButton
-                      icon={<Icon as={MdOutlineSettingsBackupRestore} />}
-                      onClick={handleResetSettings}
-                      colorScheme="red"
-                      variant="ghost"
-                      title="放弃未储存的更改，将设定还原未储存前的状态。"
-                      aria-label="放弃未储存的更改"
-                    />
-                    <Button onClick={handleApplySettings}>保存</Button>
-                  </HStack>
-                </Flex>
-              </VStack>
-            </Flex>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </Flex>
+        <div className="flex flex-row gap-2">
+          <button
+            className="btn btn-sm btn-ghost text-error"
+            onClick={handleResetSettings}
+            title="放弃未储存的更改，将设定还原未储存前的状态。"
+          >
+            <MdOutlineSettingsBackupRestore className="size-4" />
+          </button>
+          <button className="btn btn-sm btn-primary" onClick={handleApplySettings}>
+            保存
+          </button>
+        </div>
+      </footer>
+
+      {/*        <VStack mt="4" alignItems="flex-start" w="full">*/}
+      {/*          <Flex flexDir="row" gap="2" w="full">*/}
+      {/*            <Center>*/}
+      {/*              {isSettingsNotSaved ? (*/}
+      {/*                <Box color="gray">*/}
+      {/*                  有未储存的更改{' '}*/}
+      {/*                  <chakra.span color="red" wordBreak="keep-all">*/}
+      {/*                    设定将在保存后生效*/}
+      {/*                  </chakra.span>*/}
+      {/*                </Box>*/}
+      {/*              ) : (*/}
+      {/*                <Box color="gray">设定将在保存后生效</Box>*/}
+      {/*              )}*/}
+      {/*            </Center>*/}
+      {/*            <Spacer />*/}
+      {/*            <HStack gap="2" justifyContent="flex-end">*/}
+      {/*              <IconButton*/}
+      {/*                icon={<Icon as={MdOutlineSettingsBackupRestore} />}*/}
+      {/*                onClick={handleResetSettings}*/}
+      {/*                colorScheme="red"*/}
+      {/*                variant="ghost"*/}
+      {/*                title="放弃未储存的更改，将设定还原未储存前的状态。"*/}
+      {/*                aria-label="放弃未储存的更改"*/}
+      {/*              />*/}
+      {/*              <Button onClick={handleApplySettings}>保存</Button>*/}
+      {/*            </HStack>*/}
+      {/*          </Flex>*/}
+      {/*        </VStack>*/}
+      {/*      </Flex>*/}
+      {/*    ))}*/}
+      {/*  </TabPanels>*/}
+      {/*</Tabs>*/}
+    </div>
   );
 }
diff --git a/src/features/settings/panels/PanelQMCv2Key.tsx b/src/features/settings/panels/PanelQMCv2Key.tsx
index 2e6c3ad..319f611 100644
--- a/src/features/settings/panels/PanelQMCv2Key.tsx
+++ b/src/features/settings/panels/PanelQMCv2Key.tsx
@@ -1,4 +1,4 @@
-import { Select, useToast } from '@chakra-ui/react';
+import { useToast } from '@chakra-ui/react';
 import { useDispatch, useSelector } from 'react-redux';
 import { qmc2AddKey, qmc2AllowFuzzyNameSearch, qmc2ClearKeys, qmc2ImportKeys } from '../settingsSlice';
 import { selectStagingQMCv2Settings } from '../settingsSelector';
@@ -12,10 +12,11 @@ import { getFileName } from '~/util/pathHelper';
 import { QMCv2QQMusicAllInstructions } from './QMCv2/QMCv2QQMusicAllInstructions';
 import { QMCv2DoubanAllInstructions } from './QMCv2/QMCv2DoubanAllInstructions';
 import { AddKey } from '~/components/AddKey';
-import { Dialog } from '~/components/Dialog';
+import { InfoModal } from '~/components/InfoModal.tsx';
+import { Ruby } from '~/components/Ruby.tsx';
+import { ExtLink } from '~/components/ExtLink.tsx';
 
 export function PanelQMCv2Key() {
-  const [showFuzzyNameSearchInfo, setShowFuzzyNameSearchInfo] = useState(false);
   const toast = useToast();
   const dispatch = useDispatch();
   const { keys: qmc2Keys, allowFuzzyNameSearch } = useSelector(selectStagingQMCv2Settings);
@@ -74,18 +75,13 @@ export function PanelQMCv2Key() {
   };
 
   return (
-    <div className="flex min-h-0 flex-col flex-1">
+    <>
       <h2 className="text-2xl font-bold">QMCv2 解密密钥</h2>
 
-      <p>
-        <span>QQ 音乐、豆瓣 FM 目前采用的加密方案（QMCv2）。</span>
-        <span>
-          在使用「QQ 音乐」安卓、Mac 或 iOS 客户端，以及在使用「豆瓣 FM」安卓客户端的情况下，
-          其「离线加密文件」对应的「密钥」储存在独立的数据库文件内。
-        </span>
-      </p>
+      <p>QQ 音乐、豆瓣 FM 目前采用的加密方案（QMCv2）。</p>
+      <p>「QQ 音乐」安卓、Mac 或 iOS 客户端，或「豆瓣 FM」安卓客户端会将密钥存储在外部的数据库文件内。</p>
 
-      <div className="flex flex-row gap-2 items-center">
+      <div className="flex flex-row gap-2 items-center my-2">
         <label className="label">
           <input
             className="checkbox"
@@ -95,56 +91,51 @@ export function PanelQMCv2Key() {
           />
           允许匹配相似文件名
         </label>
-        <button className="btn btn-info btn-sm" type="button" onClick={() => setShowFuzzyNameSearchInfo(true)}>
-          这是什么?
-        </button>
-        <Dialog
-          closeButton
-          backdropClose
-          show={showFuzzyNameSearchInfo}
-          onClose={() => setShowFuzzyNameSearchInfo(false)}
+        <InfoModal
           title="莱文斯坦距离"
+          description={
+            <div>
+              <p>若文件名匹配失败，则使用相似文件名的密钥。</p>
+              <p>
+                该匹配使用「
+                <ExtLink href="https://zh.wikipedia.org/zh-cn/%E8%90%8A%E6%96%87%E6%96%AF%E5%9D%A6%E8%B7%9D%E9%9B%A2">
+                  <Ruby caption="Levenshtein distance">莱文斯坦距离</Ruby>
+                </ExtLink>
+                」算法来计算文件名的相似程度。
+              </p>
+              <p>若密钥数量过多，匹配时可能会造成浏览器卡顿或无响应一段时间。</p>
+              <p>若不确定，请勾选该项。</p>
+            </div>
+          }
         >
-          <p>若文件名匹配失败，则使用相似文件名的密钥。</p>
-          <p>
-            该匹配使用「
-            <ruby>
-              莱文斯坦距离
-              <rp> (</rp>
-              <rt>Levenshtein distance</rt>
-              <rp>)</rp>
-            </ruby>
-            」算法来计算文件名的相似程度。
-          </p>
-          <p>若密钥数量过多，匹配时可能会造成浏览器卡顿或无响应一段时间。</p>
-          <p>若不确定，请勾选该项。</p>
-        </Dialog>
+          这是什么?
+        </InfoModal>
       </div>
 
       <h3 className="mt-2 text-1xl font-bold">密钥管理</h3>
       <AddKey addKey={addKey} importKeyFromFile={() => setShowImportModal(true)} clearKeys={clearAll} />
 
-      <div className="flex-1 min-h-0 overflow-auto pr-4">
-        <ul className="list bg-base-100 rounded-box shadow-md">
-          {qmc2Keys.map(({ id, ekey, name }, i) => (
-            <QMCv2EKeyItem key={id} id={id} ekey={ekey} name={name} i={i} />
-          ))}
-        </ul>
-        {qmc2Keys.length === 0 && <p className="p-4 pb-2 text-xs tracking-wide">还没有密钥。</p>}
+      <div className="flex-1 min-h-0 overflow-auto pr-4 pt-3">
+        {qmc2Keys.length > 0 && (
+          <ul className="list bg-base-100 rounded-box shadow-md border border-base-300">
+            {qmc2Keys.map(({ id, ekey, name }, i) => (
+              <QMCv2EKeyItem key={id} id={id} ekey={ekey} name={name} i={i} />
+            ))}
+          </ul>
+        )}
+        {qmc2Keys.length === 0 && <p className="p-4 pb-2 tracking-wide">还没有密钥。</p>}
       </div>
 
       <ImportSecretModal
         clientName={
-          <Select
+          <select
             value={secretType}
             onChange={(e) => setSecretType(e.target.value as 'qm' | 'douban')}
-            variant="flushed"
-            display="inline"
-            css={{ paddingLeft: '0.75rem', width: 'auto' }}
+            className="inline mx-1 px-1 border-b border-accent/50 bg-base-100"
           >
             <option value="qm">QQ 音乐</option>
             <option value="douban">豆瓣 FM</option>
-          </Select>
+          </select>
         }
         show={showImportModal}
         onClose={() => setShowImportModal(false)}
@@ -153,6 +144,6 @@ export function PanelQMCv2Key() {
         {secretType === 'qm' && <QMCv2QQMusicAllInstructions />}
         {secretType === 'douban' && <QMCv2DoubanAllInstructions />}
       </ImportSecretModal>
-    </div>
+    </>
   );
 }
diff --git a/src/features/settings/panels/QMCv2/InstructionsPC.tsx b/src/features/settings/panels/QMCv2/InstructionsPC.tsx
index dd7afc1..a566a74 100644
--- a/src/features/settings/panels/QMCv2/InstructionsPC.tsx
+++ b/src/features/settings/panels/QMCv2/InstructionsPC.tsx
@@ -1,10 +1,16 @@
-import { Text } from '@chakra-ui/react';
-
 export function InstructionsPC() {
   return (
     <>
-      <Text>使用 Windows 19.51 或更低版本下载的歌曲文件无需密钥。</Text>
-      <Text>使用 Windows 19.57 或更高版本下载的歌曲文件需要导入密钥，但方法尚未公开。</Text>
+      <p>
+        使用 <span className="text-primary">19.51 或更低版本</span>下载的歌曲文件
+        <mark>无需密钥</mark>。
+      </p>
+      <p className="mt-2">
+        使用 <span className="text-error">19.57 或更高版本</span>下载的歌曲文件
+        <mark>需要导入密钥</mark>。
+        <br />
+        目前未公开密钥获取方式。
+      </p>
     </>
   );
 }
diff --git a/src/features/settings/panels/QMCv2/QMCv2DoubanAllInstructions.tsx b/src/features/settings/panels/QMCv2/QMCv2DoubanAllInstructions.tsx
index b3595c5..33208a1 100644
--- a/src/features/settings/panels/QMCv2/QMCv2DoubanAllInstructions.tsx
+++ b/src/features/settings/panels/QMCv2/QMCv2DoubanAllInstructions.tsx
@@ -1,17 +1,14 @@
-import { Tab, TabList, TabPanel, TabPanels } from '@chakra-ui/react';
 import { AndroidADBPullInstruction } from '~/components/AndroidADBPullInstruction/AndroidADBPullInstruction';
+import { InstructionsTabs, InstructionTab } from '~/components/InstructionsTabs.tsx';
 
 export function QMCv2DoubanAllInstructions() {
-  return (
-    <>
-      <TabList>
-        <Tab>安卓</Tab>
-      </TabList>
-      <TabPanels flex={1} overflow="auto">
-        <TabPanel>
-          <AndroidADBPullInstruction dir="/data/data/com.douban.radio/databases" file="music_audio_play" />
-        </TabPanel>
-      </TabPanels>
-    </>
-  );
+  const tabs: InstructionTab[] = [
+    {
+      id: 'android',
+      label: '安卓',
+      content: <AndroidADBPullInstruction dir="/data/data/com.douban.radio/databases" file="music_audio_play" />,
+    },
+  ];
+
+  return <InstructionsTabs tabs={tabs} />;
 }
diff --git a/src/features/settings/panels/QMCv2/QMCv2EKeyItem.tsx b/src/features/settings/panels/QMCv2/QMCv2EKeyItem.tsx
index a5a742e..1e3c08b 100644
--- a/src/features/settings/panels/QMCv2/QMCv2EKeyItem.tsx
+++ b/src/features/settings/panels/QMCv2/QMCv2EKeyItem.tsx
@@ -1,54 +1,25 @@
-import { MdDelete, MdVpnKey } from 'react-icons/md';
 import { qmc2DeleteKey, qmc2UpdateKey } from '../../settingsSlice';
 import { useAppDispatch } from '~/hooks';
 import { memo } from 'react';
+import { KeyInput } from '~/components/KeyInput.tsx';
 
 export const QMCv2EKeyItem = memo(({ id, name, ekey, i }: { id: string; name: string; ekey: string; i: number }) => {
   const dispatch = useAppDispatch();
 
-  const updateKey = (prop: 'name' | 'ekey', e: React.ChangeEvent<HTMLInputElement>) =>
-    dispatch(qmc2UpdateKey({ id, field: prop, value: e.target.value }));
-  const deleteKey = () => dispatch(qmc2DeleteKey({ id }));
-
-  const isValidEKey = [364, 704].includes(ekey.length);
+  const ekeyLen = ekey.length;
+  const isValidEKey = ekeyLen === 364 || ekeyLen === 704;
 
   return (
-    <li className="list-row items-center">
-      <div className="flex items-center justify-center w-8 h-8 text-sm font-bold text-gray-500 bg-gray-200 rounded-full">
-        {i + 1}
-      </div>
-
-      <div className="join join-vertical flex-1">
-        <label className="input w-full rounded-tl-md rounded-tr-md">
-          <span className="cursor-default select-none">文件名</span>
-          <input
-            type="text"
-            className="font-mono"
-            placeholder="文件名，包括后缀名。如 “AAA - BBB.mflac”"
-            value={name}
-            onChange={(e) => updateKey('name', e)}
-          />
-        </label>
-        <label className="input w-full rounded-bl-md rounded-br-md mt-[-1px]">
-          <span className="cursor-default inline-flex items-center gap-1 select-none">
-            密钥 <MdVpnKey />
-          </span>
-          <input
-            type="text"
-            className="font-mono"
-            placeholder="密钥，通常包含 364 或 704 位字符，没有空格。"
-            value={ekey}
-            onChange={(e) => updateKey('ekey', e)}
-          />
-          <span className={isValidEKey ? 'text-green-600' : 'text-red-600'}>
-            <code>{ekey.length || '?'}</code>
-          </span>
-        </label>
-      </div>
-
-      <button type="button" className="btn btn-error btn-sm px-1 btn-outline" onClick={deleteKey}>
-        <MdDelete className="size-6" />
-      </button>
-    </li>
+    <KeyInput
+      name={name}
+      value={ekey}
+      isValidKey={isValidEKey}
+      onSetName={(value) => dispatch(qmc2UpdateKey({ id, field: 'name', value }))}
+      onSetValue={(value) => dispatch(qmc2UpdateKey({ id, field: 'ekey', value }))}
+      onDelete={() => dispatch(qmc2DeleteKey({ id }))}
+      sequence={i + 1}
+      namePlaceholder="文件名，包括后缀名。如 “AAA - BBB.mflac”"
+      valuePlaceholder="密钥，通常包含 364 或 704 位字符，没有空格。"
+    />
   );
 });
diff --git a/src/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions.tsx b/src/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions.tsx
index 239f1b6..ba46b77 100644
--- a/src/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions.tsx
+++ b/src/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions.tsx
@@ -1,32 +1,20 @@
-import { Tab, TabList, TabPanel, TabPanels } from '@chakra-ui/react';
 import { AndroidADBPullInstruction } from '~/components/AndroidADBPullInstruction/AndroidADBPullInstruction';
 import { InstructionsIOS } from './InstructionsIOS';
 import { InstructionsMac } from './InstructionsMac';
 import { InstructionsPC } from './InstructionsPC';
+import { InstructionsTabs, InstructionTab } from '~/components/InstructionsTabs.tsx';
 
 export function QMCv2QQMusicAllInstructions() {
-  return (
-    <>
-      <TabList>
-        <Tab>安卓</Tab>
-        <Tab>iOS</Tab>
-        <Tab>Mac</Tab>
-        <Tab>Windows</Tab>
-      </TabList>
-      <TabPanels flex={1} overflow="auto">
-        <TabPanel>
-          <AndroidADBPullInstruction dir="/data/data/com.tencent.qqmusic/databases" file="player_process_db" />
-        </TabPanel>
-        <TabPanel>
-          <InstructionsIOS />
-        </TabPanel>
-        <TabPanel>
-          <InstructionsMac />
-        </TabPanel>
-        <TabPanel>
-          <InstructionsPC />
-        </TabPanel>
-      </TabPanels>
-    </>
-  );
+  const tabs: InstructionTab[] = [
+    {
+      id: 'android',
+      label: '安卓',
+      content: <AndroidADBPullInstruction dir="/data/data/com.tencent.qqmusic/databases" file="player_process_db" />,
+    },
+    { id: 'ios', label: 'iOS', content: <InstructionsIOS /> },
+    { id: 'mac', label: 'Mac', content: <InstructionsMac /> },
+    { id: 'windows', label: 'Windows', content: <InstructionsPC /> },
+  ];
+
+  return <InstructionsTabs tabs={tabs} />;
 }
diff --git a/src/features/settings/settingsTabs.tsx b/src/features/settings/settingsTabs.tsx
new file mode 100644
index 0000000..fdc6c61
--- /dev/null
+++ b/src/features/settings/settingsTabs.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import { PanelQMCv2Key } from '~/features/settings/panels/PanelQMCv2Key.tsx';
+import { PanelKWMv2Key } from '~/features/settings/panels/PanelKWMv2Key.tsx';
+import { PanelKGGKey } from '~/features/settings/panels/PanelKGGKey.tsx';
+import { PanelQingTing } from '~/features/settings/panels/PanelQingTing.tsx';
+
+export const SETTINGS_TABS: Record<string, { name: string; Tab: FC }> = {
+  qmc: { name: 'QMCv2 密钥', Tab: PanelQMCv2Key },
+  kwm: { name: 'KWMv2 密钥', Tab: PanelKWMv2Key },
+  kgg: { name: 'KGG 密钥', Tab: PanelKGGKey },
+  qtfm: { name: '蜻蜓 FM', Tab: PanelQingTing },
+  // misc: { name: '其它／待定', Tab: () => <p>这里空空如也～</p> },
+} as const;