refactor: batch 3

src/components/AndroidADBPullInstruction/AdbInstructionTemplate.tsx

@@ -0,0 +1,57 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import hljsStyleGitHub from 'react-syntax-highlighter/dist/esm/styles/hljs/github';
+import { ExtLink } from '../ExtLink';
+import PowerShellAdbDumpCommandTemplate from './adb_dump.ps1?raw';
+import ShellAdbDumpCommandTemplate from './adb_dump.sh?raw';
+import { applyTemplate } from '~/util/applyTemplate';
+
+export interface AdbInstructionTemplateProps {
+  dir: string;
+  file: string;
+  platform: 'win32' | 'linux';
+}
+
+const URL_USB_DEBUGGING = 'https://developer.android.com/studio/debug/dev-options?hl=zh-cn#Enable-debugging';
+
+const LANGUAGE_MAP = {
+  win32: { language: 'ps1', template: PowerShellAdbDumpCommandTemplate },
+  linux: { language: 'sh', template: ShellAdbDumpCommandTemplate },
+};
+
+export function AdbInstructionTemplate({ dir, file, platform }: AdbInstructionTemplateProps) {
+  const { language, template } = LANGUAGE_MAP[platform];
+  const command = applyTemplate(template, { dir, file });
+
+  return (
+    <ol className="list-decimal pl-4">
+      <li>
+        <p>
+          确保 <code>adb</code> 命令可用。
+        </p>
+
+        {platform === 'win32' && (
+          <div>
+            <span>
+              💡 如果没有，可以
+              <ExtLink href="https://scoop.sh/#/apps?q=adb">使用 Scoop 安装</ExtLink>。
+            </span>
+          </div>
+        )}
+      </li>
+      <li>启动终端，进入 PowerShell 环境。</li>
+      <li>
+        在手机<ExtLink href={URL_USB_DEBUGGING}>启用 USB 调试</ExtLink>
+      </li>
+      <li>将安卓设备连接到电脑。</li>
+      <li>
+        <p>粘贴执行下述代码执行。若设备提示「是否允许 USB 调试」或「超级用户请求」，选择允许：</p>
+        <SyntaxHighlighter language={language} style={hljsStyleGitHub}>
+          {command}
+        </SyntaxHighlighter>
+      </li>
+      <li>
+        提交当前目录下的 <code>{file}</code> 文件。
+      </li>
+    </ol>
+  );
+}