├── electron
    ├── fallback.html
    ├── icon.txt
    ├── preload.js
    ├── check-environment.js
    └── static-server.js
├── pnpm-workspace.yaml
├── public
    ├── logo
    │   ├── Qwen.jpg
    │   └── Deepseek.jpg
    └── quiz
    │   └── banks
    │       └── manage
    │           └── index.html
├── resources
    └── icon.jpg
├── postcss.config.mjs
├── src
    ├── lib
    │   ├── utils.ts
    │   └── deepseek.ts
    ├── app
    │   ├── quiz
    │   │   ├── banks
    │   │   │   ├── [bankId]
    │   │   │   │   └── layout.tsx
    │   │   │   └── manage
    │   │   │   │   ├── index.html
    │   │   │   │   └── index
    │   │   │   │       └── page.tsx
    │   │   ├── review
    │   │   │   └── practice
    │   │   │   │   └── page.tsx
    │   │   ├── page.tsx
    │   │   ├── layout.tsx
    │   │   ├── settings
    │   │   │   └── page.tsx
    │   │   └── import-export
    │   │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── page.tsx
    │   ├── api
    │   │   └── ai
    │   │   │   ├── deepseek
    │   │   │       └── route.ts
    │   │   │   └── alibaba
    │   │   │       └── route.ts
    │   └── globals.css
    ├── utils
    │   ├── array.ts
    │   └── quiz.ts
    ├── types
    │   ├── electron.d.ts
    │   └── quiz.ts
    ├── store
    │   ├── themeStore.ts
    │   └── quizStore.ts
    ├── components
    │   ├── ui
    │   │   ├── textarea.tsx
    │   │   ├── progress.tsx
    │   │   ├── input.tsx
    │   │   ├── checkbox.tsx
    │   │   ├── badge.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── alert.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── dialog.tsx
    │   │   └── select.tsx
    │   ├── ThemeSwitcher.tsx
    │   ├── CreateBankModal.tsx
    │   ├── NumQuestionsModal.tsx
    │   ├── quiz
    │   │   ├── WrongQuestionItem.tsx
    │   │   └── SimilarQuestionsModal.tsx
    │   └── QuestionFormModal.tsx
    ├── hooks
    │   └── useElectron.ts
    └── constants
    │   ├── quiz.ts
    │   └── ai.ts
├── .eslintrc.json
├── tailwind.config.js
├── .npmrc
├── next.config.ts
├── eslint.config.mjs
├── components.json
├── .gitignore
├── tsconfig.json
├── offline-electron.md
├── generate
    ├── build-mac.sh
    ├── build-linux.sh
    ├── build-win.sh
    ├── README.md
    └── build-all.sh
├── tauri-guide.md
├── LICENSE
├── README.md
└── package.json


/electron/fallback.html:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - "."
3 |   # 如果有子包或其他目录需要管理，可以在这里添加
4 |   # - "packages/*" 


--------------------------------------------------------------------------------
/public/logo/Qwen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KurodaKayn/AHF-QDS-EOE/HEAD/public/logo/Qwen.jpg


--------------------------------------------------------------------------------
/resources/icon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KurodaKayn/AHF-QDS-EOE/HEAD/resources/icon.jpg


--------------------------------------------------------------------------------
/public/logo/Deepseek.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KurodaKayn/AHF-QDS-EOE/HEAD/public/logo/Deepseek.jpg


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals",
3 |   "rules": {
4 |     "@typescript-eslint/no-explicit-any": "off",
5 |     "@typescript-eslint/no-unused-vars": "off",
6 |     "react-hooks/exhaustive-deps": "warn"
7 |   }
8 | } 


--------------------------------------------------------------------------------
/src/app/quiz/banks/[bankId]/layout.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 为静态导出生成路径参数
 3 |  * 由于这是服务器组件，因此服务端生成的参数用于静态导出
 4 |  */
 5 | export function generateStaticParams() {
 6 |   return [{ bankId: 'default' }];
 7 | }
 8 | 
 9 | export default function BankLayout({ children }: { children: React.ReactNode }) {
10 |   return <>{children}</>;
11 | } 


--------------------------------------------------------------------------------
/src/app/quiz/banks/manage/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="refresh" content="0;url=./" />
 6 |   <title>题库管理</title>
 7 | </head>
 8 | <body>
 9 |   <p>正在跳转到题库管理页面...</p>
10 |   <script>
11 |     window.location.href = './';
12 |   </script>
13 | </body>
14 | </html> 


--------------------------------------------------------------------------------
/src/utils/array.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 使用Fisher-Yates算法对数组进行原地洗牌。
 3 |  * @param array 要洗牌的数组。
 4 |  * @returns 洗牌后的数组（相同实例）。
 5 |  */
 6 | export function shuffleArray<T>(array: T[]): T[] {
 7 |   for (let i = array.length - 1; i > 0; i--) {
 8 |     const j = Math.floor(Math.random() * (i + 1));
 9 |     [array[i], array[j]] = [array[j], array[i]]; // 交换元素
10 |   }
11 |   return array;
12 | } 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 5 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 7 |   ],
 8 |   darkMode: 'class',
 9 |   theme: {
10 |     extend: {},
11 |   },
12 |   plugins: [
13 |     require('@tailwindcss/typography'),
14 |   ],
15 | }; 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
 1 | electron_mirror=https://npmmirror.com/mirrors/electron/
 2 | ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
 3 | registry=https://registry.npmmirror.com/
 4 | electron-builder-binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
 5 | 
 6 | # pnpm配置
 7 | node-linker=hoisted
 8 | strict-peer-dependencies=false
 9 | shamefully-hoist=true
10 | # 可选：如果你希望使用 workspace 功能
11 | # use-node-version=18.x 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextConfig } from "next";
 2 | 
 3 | const nextConfig: NextConfig = {
 4 |   /* config options here */
 5 |   // 恢复静态导出设置
 6 |   output: 'export',
 7 |   distDir: 'out',
 8 |   // 启用图片优化
 9 |   images: {
10 |     unoptimized: true,
11 |   },
12 |   // 禁用React严格模式以避免Electron中的一些问题
13 |   reactStrictMode: false,
14 |   // 导出时生成基于路由的HTML文件
15 |   trailingSlash: true,
16 | };
17 | 
18 | export default nextConfig;
19 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/electron/icon.txt:
--------------------------------------------------------------------------------
 1 | Electron应用图标说明:
 2 | 
 3 | 为了给应用添加图标，请按照以下步骤操作:
 4 | 
 5 | 1. 创建一个名为"build"的文件夹在项目根目录
 6 | 2. 添加以下图标文件到build文件夹:
 7 |    - icon.icns (macOS, 大小至少为512x512像素)
 8 |    - icon.ico (Windows, 大小建议为256x256像素)
 9 |    - icon.png (通用, 大小至少为512x512像素)
10 | 
11 | 这些图标将被electron-builder自动识别并用于构建过程。
12 | 
13 | 图标可以使用图像编辑软件创建，如Photoshop, GIMP或在线工具如:
14 | - https://www.electron.build/icons.html (官方说明)
15 | - https://cloudconvert.com/png-to-icns (转换PNG到ICNS)
16 | - https://cloudconvert.com/png-to-ico (转换PNG到ICO)
17 | 
18 | 注意: 确保图标分辨率足够高，以提供良好的显示效果。 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/src/app/quiz/banks/manage/index/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useEffect } from 'react';
 4 | import { useRouter } from 'next/navigation';
 5 | 
 6 | export default function ManageBankIndexRedirect() {
 7 |   const router = useRouter();
 8 |   
 9 |   useEffect(() => {
10 |     if (typeof window !== 'undefined') {
11 |       // 重定向到上级目录
12 |       router.replace('/quiz/banks/manage/');
13 |     }
14 |   }, [router]);
15 | 
16 |   return (
17 |     <div className="min-h-screen flex items-center justify-center">
18 |       <p>重定向中...</p>
19 |     </div>
20 |   );
21 | } 


--------------------------------------------------------------------------------
/src/types/electron.d.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Electron API 类型声明
 3 |  * 为Electron在渲染进程中提供的API定义接口
 4 |  */
 5 | interface ElectronAPI {
 6 |   /**
 7 |    * 发送消息到主进程
 8 |    * @param channel 通信通道名称
 9 |    * @param data 要发送的数据
10 |    */
11 |   sendMessage: (channel: string, data: any) => void;
12 | 
13 |   /**
14 |    * 接收来自主进程的消息
15 |    * @param channel 通信通道名称
16 |    * @param func 处理接收到消息的回调函数
17 |    */
18 |   receiveMessage: (channel: string, func: (...args: any[]) => void) => void;
19 | }
20 | 
21 | declare global {
22 |   interface Window {
23 |     /**
24 |      * 通过preload脚本暴露的Electron API
25 |      */
26 |     electron: ElectronAPI;
27 |   }
28 | } 


--------------------------------------------------------------------------------
/src/store/themeStore.ts:
--------------------------------------------------------------------------------
 1 | import { create } from 'zustand';
 2 | import { persist } from 'zustand/middleware';
 3 | 
 4 | type Theme = 'light' | 'dark';
 5 | 
 6 | interface ThemeState {
 7 |   theme: Theme;
 8 |   toggleTheme: () => void;
 9 |   setTheme: (theme: Theme) => void;
10 | }
11 | 
12 | /**
13 |  * 主题状态管理
14 |  */
15 | export const useThemeStore = create<ThemeState>()(
16 |   persist(
17 |     (set) => ({
18 |       theme: 'light',
19 |       toggleTheme: () => set((state) => ({ 
20 |         theme: state.theme === 'light' ? 'dark' : 'light' 
21 |       })),
22 |       setTheme: (theme) => set({ theme }),
23 |     }),
24 |     {
25 |       name: 'theme-storage',
26 |     }
27 |   )
28 | ); 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules/
 3 | /.pnp
 4 | .pnp.*
 5 | .yarn/*
 6 | !.yarn/patches
 7 | !.yarn/plugins
 8 | !.yarn/releases
 9 | !.yarn/versions
10 | .pnpm-store/
11 | .pnpm-debug.log*
12 | pnpm-lock.yaml
13 | 
14 | # testing
15 | /coverage
16 | 
17 | # next.js
18 | .next/
19 | out/
20 | 
21 | # production
22 | build/
23 | dist/
24 | 
25 | # misc
26 | .DS_Store
27 | *.pem
28 | 
29 | # debug
30 | npm-debug.log*
31 | yarn-debug.log*
32 | yarn-error.log*
33 | .pnpm-debug.log*
34 | 
35 | # env files (can opt-in for committing if needed)
36 | Frontend/.env*
37 | 
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 
43 | #executable files
44 | *.exe
45 | *.exe~
46 | *.dll
47 | *.so
48 | *.dylib
49 | *.test
50 | *.out
51 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 6 |   return (
 7 |     <textarea
 8 |       data-slot="textarea"
 9 |       className={cn(
10 |         "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | export { Textarea }
19 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const geistSans = Geist({
 6 |   variable: "--font-geist-sans",
 7 |   subsets: ["latin"],
 8 | });
 9 | 
10 | const geistMono = Geist_Mono({
11 |   variable: "--font-geist-mono",
12 |   subsets: ["latin"],
13 | });
14 | 
15 | export const metadata: Metadata = {
16 |   title: "刷题系统",
17 |   description: "练习题目，记录错题并支持导入导出题库",
18 | };
19 | 
20 | export default function RootLayout({
21 |   children,
22 | }: Readonly<{
23 |   children: React.ReactNode;
24 | }>) {
25 |   return (
26 |     <html lang="zh-CN" suppressHydrationWarning>
27 |       <body
28 |         className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen dark:bg-gray-900`}
29 |       >
30 |         {children}
31 |       </body>
32 |     </html>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "noEmit": true,
13 |     "esModuleInterop": true,
14 |     "module": "esnext",
15 |     "moduleResolution": "bundler",
16 |     "resolveJsonModule": true,
17 |     "isolatedModules": true,
18 |     "jsx": "preserve",
19 |     "incremental": true,
20 |     "plugins": [
21 |       {
22 |         "name": "next"
23 |       }
24 |     ],
25 |     "paths": {
26 |       "@/*": [
27 |         "./src/*"
28 |       ]
29 |     }
30 |   },
31 |   "include": [
32 |     "**/*.ts",
33 |     "**/*.tsx",
34 |     ".next/types/**/*.ts",
35 |     "next-env.d.ts",
36 |     "out/types/**/*.ts"
37 |   ],
38 |   "exclude": [
39 |     "node_modules"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Progress({
 9 |   className,
10 |   value,
11 |   ...props
12 | }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
13 |   return (
14 |     <ProgressPrimitive.Root
15 |       data-slot="progress"
16 |       className={cn(
17 |         "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
18 |         className
19 |       )}
20 |       {...props}
21 |     >
22 |       <ProgressPrimitive.Indicator
23 |         data-slot="progress-indicator"
24 |         className="bg-primary h-full w-full flex-1 transition-all"
25 |         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
26 |       />
27 |     </ProgressPrimitive.Root>
28 |   )
29 | }
30 | 
31 | export { Progress }
32 | 


--------------------------------------------------------------------------------
/public/quiz/banks/manage/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>题库管理</title>
 6 |   <script>
 7 |     // 尝试修复路径问题
 8 |     if (typeof window !== 'undefined') {
 9 |       // 判断是否在Electron环境中
10 |       const isElectron = window.navigator.userAgent.toLowerCase().indexOf('electron/') > -1;
11 |       if (isElectron) {
12 |         // 重定向到正确的路径
13 |         window.location.href = window.location.origin + '/out/quiz/banks/manage/index.html';
14 |       } else {
15 |         // 非Electron环境，使用相对路径
16 |         window.location.href = '../../../_next/static/chunks/app/quiz/banks/manage/page.js';
17 |       }
18 |     }
19 |   </script>
20 | </head>
21 | <body>
22 |   <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif;">
23 |     <div style="text-align: center;">
24 |       <h1>题库管理页面加载中...</h1>
25 |       <p>如果页面没有自动跳转，请<a href="/quiz">返回题库列表</a></p>
26 |     </div>
27 |   </div>
28 | </body>
29 | </html> 


--------------------------------------------------------------------------------
/src/components/ThemeSwitcher.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useEffect } from 'react';
 4 | import { FaSun, FaMoon } from 'react-icons/fa';
 5 | import { useThemeStore } from '@/store/themeStore';
 6 | 
 7 | /**
 8 |  * 主题切换按钮
 9 |  */
10 | export default function ThemeSwitcher() {
11 |   const { theme, toggleTheme } = useThemeStore();
12 | 
13 |   // 在客户端应用主题
14 |   useEffect(() => {
15 |     if (theme === 'dark') {
16 |       document.documentElement.classList.add('dark');
17 |     } else {
18 |       document.documentElement.classList.remove('dark');
19 |     }
20 |   }, [theme]);
21 | 
22 |   return (
23 |     <button
24 |       onClick={toggleTheme}
25 |       className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
26 |       title={theme === 'light' ? '切换到深色模式' : '切换到浅色模式'}
27 |     >
28 |       {theme === 'light' ? (
29 |         <FaMoon className="text-gray-700" size={16} />
30 |       ) : (
31 |         <FaSun className="text-yellow-300" size={16} />
32 |       )}
33 |     </button>
34 |   );
35 | } 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 | 


--------------------------------------------------------------------------------
/offline-electron.md:
--------------------------------------------------------------------------------
 1 | # Electron安装指南
 2 | 
 3 | 如果因网络问题无法自动安装Electron，可以尝试手动下载并离线安装。
 4 | 
 5 | ## 步骤
 6 | 
 7 | 1. 查看package.json中electron的版本号（当前为^30.0.4）
 8 | 
 9 | 2. 手动下载对应版本的Electron:
10 |    - 从淘宝镜像下载: https://npmmirror.com/mirrors/electron/
11 |    - 选择版本30.0.4
12 |    - 下载对应系统的zip文件:
13 |      - Mac: electron-v30.0.4-darwin-x64.zip
14 |      - Windows: electron-v30.0.4-win32-x64.zip
15 | 
16 | 3. 设置环境变量告诉npm使用本地文件:
17 | 
18 | ```bash
19 | # Mac/Linux
20 | export ELECTRON_MIRROR="file://绝对路径到下载目录/"
21 | export npm_config_electron_custom_dir="30.0.4"
22 | 
23 | # Windows
24 | set ELECTRON_MIRROR=file://绝对路径到下载目录/
25 | set npm_config_electron_custom_dir=30.0.4
26 | ```
27 | 
28 | 4. 重新安装:
29 | ```bash
30 | npm install
31 | ```
32 | 
33 | ## 另一种方法：使用别的包管理器
34 | 
35 | 有时候使用yarn或pnpm可能会有更好的网络连接结果:
36 | 
37 | ```bash
38 | # 安装yarn
39 | npm install -g yarn
40 | 
41 | # 使用yarn安装依赖
42 | yarn
43 | 
44 | # 或者使用pnpm
45 | npm install -g pnpm
46 | pnpm install
47 | ```
48 | 
49 | ## 如果所有方法都失败
50 | 
51 | 如果以上方法都不起作用，可以尝试:
52 | 
53 | 1. 使用移动热点或其他网络连接
54 | 2. 使用全局VPN
55 | 3. 考虑使用Tauri替代Electron（参见tauri-guide.md） 


--------------------------------------------------------------------------------
/electron/preload.js:
--------------------------------------------------------------------------------
 1 | // 引入Electron相关模块
 2 | const { contextBridge, ipcRenderer } = require('electron');
 3 | 
 4 | /**
 5 |  * 暴露安全的API给渲染进程
 6 |  * 这里我们创建一个可以在渲染进程中访问的安全桥梁
 7 |  */
 8 | contextBridge.exposeInMainWorld('electron', {
 9 |   // 发送消息到主进程
10 |   sendMessage: (channel, data) => {
11 |     // 限制只有特定通道能被使用
12 |     const validChannels = [
13 |       'message-from-renderer', 
14 |       'get-log-path',
15 |       'restart-app'
16 |     ];
17 |     if (validChannels.includes(channel)) {
18 |       ipcRenderer.send(channel, data);
19 |     }
20 |   },
21 |   // 接收来自主进程的消息
22 |   receiveMessage: (channel, func) => {
23 |     const validChannels = [
24 |       'message-from-main', 
25 |       'log-path-response'
26 |     ];
27 |     if (validChannels.includes(channel)) {
28 |       // 删除旧的监听器，避免堆积
29 |       ipcRenderer.removeAllListeners(channel);
30 |       // 添加新的监听器
31 |       ipcRenderer.on(channel, (event, ...args) => func(...args));
32 |     }
33 |   },
34 |   // 获取应用版本信息
35 |   getVersionInfo: () => {
36 |     return {
37 |       electron: process.versions.electron,
38 |       chrome: process.versions.chrome,
39 |       node: process.versions.node
40 |     };
41 |   }
42 | }); 


--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 3 | import { Check } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Checkbox = React.forwardRef<
 8 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10 | >(({ className, ...props }, ref) => (
11 |   <CheckboxPrimitive.Root
12 |     ref={ref}
13 |     className={cn(
14 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
15 |       className
16 |     )}
17 |     {...props}
18 |   >
19 |     <CheckboxPrimitive.Indicator
20 |       className={cn("flex items-center justify-center text-current")}
21 |     >
22 |       <Check className="h-4 w-4" />
23 |     </CheckboxPrimitive.Indicator>
24 |   </CheckboxPrimitive.Root>
25 | ))
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
27 | 
28 | export { Checkbox } 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants } 


--------------------------------------------------------------------------------
/generate/build-mac.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | # 构建macOS版本的Electron应用
 3 | # 作者: KurodaKayn
 4 | # 日期: $(date +"%Y-%m-%d")
 5 | 
 6 | set -e  # 遇到错误立即退出
 7 | 
 8 | # 定义颜色
 9 | GREEN='\033[0;32m'
10 | YELLOW='\033[1;33m'
11 | RED='\033[0;31m'
12 | NC='\033[0m' # 恢复默认颜色
13 | 
14 | echo -e "${YELLOW}准备构建macOS版本...${NC}"
15 | 
16 | # 检查是否在macOS系统上运行
17 | if [[ "$(uname)" != "Darwin" ]]; then
18 |     echo -e "${RED}错误: 此脚本只能在macOS系统上运行${NC}"
19 |     exit 1
20 | fi
21 | 
22 | # 检查是否安装了Node.js
23 | if ! command -v node &> /dev/null; then
24 |     echo -e "${RED}错误: 未找到Node.js，请先安装Node.js${NC}"
25 |     exit 1
26 | fi
27 | 
28 | # 检查是否有次级依赖包
29 | if [ ! -d "node_modules" ]; then
30 |     echo -e "${YELLOW}未找到node_modules，正在安装依赖...${NC}"
31 |     npm install
32 |     if [ $? -ne 0 ]; then
33 |         echo -e "${RED}安装依赖失败${NC}"
34 |         exit 1
35 |     fi
36 | fi
37 | 
38 | echo -e "${GREEN}开始构建macOS应用...${NC}"
39 | 
40 | # 设置Electron镜像源(中国用户可能需要)
41 | export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
42 | 
43 | # 开始构建
44 | echo -e "${YELLOW}执行构建命令: npm run build:electron:mac${NC}"
45 | npm run build:electron:mac
46 | 
47 | if [ $? -eq 0 ]; then
48 |     echo -e "${GREEN}macOS应用构建成功！${NC}"
49 |     echo -e "${YELLOW}构建文件位于: $(pwd)/dist${NC}"
50 | else
51 |     echo -e "${RED}macOS应用构建失败${NC}"
52 |     exit 1
53 | fi 


--------------------------------------------------------------------------------
/src/types/quiz.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 题目类型枚举
 3 |  */
 4 | export enum QuestionType {
 5 |   SingleChoice = 'single-choice', // 单选题
 6 |   MultipleChoice = 'multiple-choice', // 多选题
 7 |   TrueFalse = 'true-false', // 判断题
 8 |   ShortAnswer = 'short-answer', // 简答题
 9 |   FillInBlank = 'fill-in-blank', // 填空题
10 | }
11 | 
12 | /**
13 |  * 题目选项类型
14 |  */
15 | export interface QuestionOption {
16 |   id: string;
17 |   content: string;
18 | }
19 | 
20 | /**
21 |  * 题目类型
22 |  */
23 | export interface Question {
24 |   id: string;
25 |   type: QuestionType;
26 |   content: string;
27 |   options?: QuestionOption[];
28 |   answer: string | string[]; // 单选题/判断题为字符串，多选题为字符串数组, 简答题为字符串
29 |   explanation?: string; // 解析
30 |   tags?: string[]; // 标签，用于分类
31 |   createdAt: number;
32 |   updatedAt: number;
33 | }
34 | 
35 | /**
36 |  * 题库类型
37 |  */
38 | export interface QuestionBank {
39 |   id: string;
40 |   name: string;
41 |   description?: string;
42 |   questions: Question[];
43 |   createdAt: number;
44 |   updatedAt: number;
45 | }
46 | 
47 | /**
48 |  * 用户答题记录
49 |  */
50 | export interface QuestionRecord {
51 |   id?: string;
52 |   questionId: string;
53 |   userAnswer: string | string[];
54 |   isCorrect: boolean;
55 |   answeredAt: number;
56 | }
57 | 
58 | /**
59 |  * API密钥配置
60 |  */
61 | export interface ApiKeyConfig {
62 |   deepseek: string;
63 | }


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import Link from 'next/link';
 4 | 
 5 | export default function Home() {
 6 |   return (
 7 |     <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-gray-50 dark:bg-gray-900">
 8 |       <main className="flex flex-col items-center justify-center w-full flex-1 px-5 sm:px-20 text-center">
 9 |         <h1 className="text-4xl sm:text-6xl font-bold mt-10 mb-8 text-gray-900 dark:text-white">
10 |           欢迎访问
11 |         </h1>
12 |         <p className="mt-3 text-xl text-gray-700 dark:text-gray-300">
13 |           请选择您想要访问的应用:
14 |         </p>
15 |         <div className="flex flex-wrap items-center justify-center max-w-4xl mt-6 sm:w-full">
16 |           <Link
17 |             href="/quiz"
18 |             className="p-6 m-2 text-left border w-72 sm:w-96 rounded-xl hover:text-blue-600 focus:text-blue-600 hover:border-blue-600 transition duration-300 dark:border-gray-700 dark:hover:border-blue-500 dark:focus:border-blue-500 dark:hover:text-blue-400 dark:focus:text-blue-400"
19 |           >
20 |             <h3 className="text-2xl font-bold text-gray-800 dark:text-gray-100">刷题系统 &rarr;</h3>
21 |             <p className="mt-4 text-gray-700 dark:text-gray-400">
22 |               练习题目，记录错题并支持导入导出题库
23 |             </p>
24 |           </Link>
25 |         </div>
26 |       </main>
27 |     </div>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/tauri-guide.md:
--------------------------------------------------------------------------------
 1 | # 使用Tauri替代Electron
 2 | 
 3 | 如果Electron安装遇到困难，可以考虑使用Tauri作为替代方案。Tauri比Electron更轻量级，使用系统原生WebView，体积更小。
 4 | 
 5 | ## 安装步骤
 6 | 
 7 | 1. 首先确保已安装Rust和相关依赖：
 8 |    - macOS: `brew install rust`
 9 |    - Windows: 下载Rust安装器 https://www.rust-lang.org/tools/install
10 | 
11 | 2. 安装Tauri CLI:
12 | ```bash
13 | npm install -g @tauri-apps/cli
14 | ```
15 | 
16 | 3. 初始化Tauri项目:
17 | ```bash
18 | # 在项目根目录运行
19 | npm install --save-dev @tauri-apps/cli @tauri-apps/api
20 | npx tauri init
21 | ```
22 | 
23 | 4. 配置src-tauri/tauri.conf.json文件:
24 | ```json
25 | {
26 |   "build": {
27 |     "distDir": "../out",
28 |     "devPath": "http://localhost:3000"
29 |   },
30 |   "tauri": {
31 |     "bundle": {
32 |       "identifier": "com.ahf-qds-eoe",
33 |       "icon": [
34 |         "icons/32x32.png",
35 |         "icons/128x128.png",
36 |         "icons/128x128@2x.png",
37 |         "icons/icon.icns",
38 |         "icons/icon.ico"
39 |       ]
40 |     },
41 |     "windows": [
42 |       {
43 |         "title": "AHF QDS EOE",
44 |         "width": 1200,
45 |         "height": 800,
46 |         "resizable": true
47 |       }
48 |     ]
49 |   }
50 | }
51 | ```
52 | 
53 | 5. 修改package.json:
54 | ```json
55 | {
56 |   "scripts": {
57 |     "build:tauri": "next build && tauri build",
58 |     "dev:tauri": "concurrently \"npm run dev\" \"tauri dev\""
59 |   }
60 | }
61 | ```
62 | 
63 | ## 构建应用
64 | ```bash
65 | npm run build:tauri
66 | ```
67 | 
68 | ## 优势
69 | - 更小的文件体积（通常比Electron小10倍）
70 | - 更好的性能和更低的内存占用
71 | - 更安全的默认设置
72 | - 更快的启动时间 


--------------------------------------------------------------------------------
/src/hooks/useElectron.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | 
 3 | /**
 4 |  * 判断当前环境是否为Electron
 5 |  * @returns {boolean} 是否在Electron环境中运行
 6 |  */
 7 | export const isElectron = (): boolean => {
 8 |   return typeof window !== 'undefined' && 'electron' in window;
 9 | };
10 | 
11 | /**
12 |  * 提供在React组件中使用Electron功能的钩子
13 |  * @returns 包含Electron API和环境信息的对象
14 |  */
15 | export const useElectron = () => {
16 |   const [isElectronEnv, setIsElectronEnv] = useState<boolean>(false);
17 | 
18 |   useEffect(() => {
19 |     // 在组件挂载时检查是否在Electron环境
20 |     setIsElectronEnv(isElectron());
21 |   }, []);
22 | 
23 |   /**
24 |    * 安全地发送消息到主进程
25 |    * @param channel 通信通道名称
26 |    * @param data 要发送的数据
27 |    */
28 |   const sendMessage = (channel: string, data: any) => {
29 |     if (isElectronEnv) {
30 |       (window as any).electron.sendMessage(channel, data);
31 |     } else {
32 |       console.warn('Electron API not available: sendMessage was called in non-Electron environment');
33 |     }
34 |   };
35 | 
36 |   /**
37 |    * 安全地接收来自主进程的消息
38 |    * @param channel 通信通道名称
39 |    * @param callback 处理接收到消息的回调函数
40 |    */
41 |   const receiveMessage = (channel: string, callback: (...args: any[]) => void) => {
42 |     if (isElectronEnv) {
43 |       (window as any).electron.receiveMessage(channel, callback);
44 |     } else {
45 |       console.warn('Electron API not available: receiveMessage was called in non-Electron environment');
46 |     }
47 |   };
48 | 
49 |   return {
50 |     isElectronEnv,
51 |     sendMessage,
52 |     receiveMessage,
53 |   };
54 | }; 


--------------------------------------------------------------------------------
/src/app/quiz/review/practice/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useEffect } from 'react';
 4 | import { useRouter } from 'next/navigation';
 5 | import { useQuizStore } from '@/store/quizStore';
 6 | 
 7 | export default function ReviewPracticePage() {
 8 |   const router = useRouter();
 9 |   const { questionBanks, records } = useQuizStore();
10 | 
11 |   useEffect(() => {
12 |     // 获取错题记录
13 |     const wrongRecords = records.filter(r => !r.isCorrect);
14 |     
15 |     if (wrongRecords.length === 0) {
16 |       // 如果没有错题，跳转回错题本页面
17 |       router.push('/quiz/review');
18 |       return;
19 |     }
20 |     
21 |     // 找出第一个有错题的题库
22 |     const bankWithWrongQuestions = questionBanks.find(bank => 
23 |       bank.questions.some(q => 
24 |         wrongRecords.some(record => record.questionId === q.id)
25 |       )
26 |     );
27 |     
28 |     if (bankWithWrongQuestions) {
29 |       // 跳转到普通练习页面，但添加参数表示这是错题练习模式
30 |       router.push(`/quiz/practice?bankId=${bankWithWrongQuestions.id}&mode=review`);
31 |     } else {
32 |       // 如果错题记录存在但找不到对应题库中的题目（例如题目或题库被删除）
33 |       // alert('未能找到包含错题的题库，或相关题目已被移除。');
34 |       router.push('/quiz/review'); // 安全返回到错题本
35 |     }
36 |   }, [router, questionBanks, records]);
37 | 
38 |   return (
39 |     <div className="dark:bg-gray-900 min-h-screen p-4 md:p-8 flex flex-col items-center justify-center">
40 |       <div className="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
41 |       <p className="text-gray-600 dark:text-gray-400 mt-4">正在准备错题练习...</p>
42 |     </div>
43 |   );
44 | } 


--------------------------------------------------------------------------------
/src/app/api/ai/deepseek/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server';
 2 | 
 3 | /**
 4 |  * Deepseek API 代理
 5 |  * 该路由将前端请求代理到 Deepseek API，避免跨域问题
 6 |  */
 7 | export async function POST(request: NextRequest) {
 8 |   try {
 9 |     const body = await request.json();
10 |     const { apiKey, baseUrl, messages } = body;
11 |     
12 |     if (!apiKey) {
13 |       return NextResponse.json(
14 |         { error: 'API 密钥不能为空' },
15 |         { status: 400 }
16 |       );
17 |     }
18 | 
19 |     // 默认的 baseUrl
20 |     const apiBaseUrl = baseUrl || 'https://api.deepseek.com';
21 |     
22 |     // 发送请求到 Deepseek API
23 |     const response = await fetch(`${apiBaseUrl}/v1/chat/completions`, {
24 |       method: 'POST',
25 |       headers: {
26 |         'Content-Type': 'application/json',
27 |         'Authorization': `Bearer ${apiKey}`
28 |       },
29 |       body: JSON.stringify({
30 |         model: 'deepseek-chat',
31 |         messages
32 |       })
33 |     });
34 |     
35 |     // 获取响应数据
36 |     const data = await response.json();
37 |     
38 |     // 如果响应失败，返回错误信息
39 |     if (!response.ok) {
40 |       return NextResponse.json(
41 |         { error: data.error?.message || `API 请求失败，状态码: ${response.status}` },
42 |         { status: response.status }
43 |       );
44 |     }
45 |     
46 |     // 返回成功响应
47 |     return NextResponse.json(data);
48 |   } catch (error: any) {
49 |     console.error('Deepseek API 代理错误:', error);
50 |     return NextResponse.json(
51 |       { error: error.message || '处理请求时发生未知错误' },
52 |       { status: 500 }
53 |     );
54 |   }
55 | } 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2025, 黄俊轩
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | 1. Redistributions of source code must retain the above copyright notice,
10 |    this list of conditions and the following disclaimer.
11 | 
12 | 2. Redistributions in binary form must reproduce the above copyright
13 |    notice, this list of conditions and the following disclaimer in the
14 |    documentation and/or other materials provided with the distribution.
15 | 
16 | 3. Neither the name of the 黄俊轩 nor the names of its
17 |    contributors may be used to endorse or promote products derived from
18 |    this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
23 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
24 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
25 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
26 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
27 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
28 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
29 | ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
30 | POSSIBILITY OF SUCH DAMAGE.
31 | 


--------------------------------------------------------------------------------
/src/app/api/ai/alibaba/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server';
 2 | 
 3 | // 阿里云通义千问固定参数
 4 | const ALIBABA_BASE_URL = "https://dashscope.aliyuncs.com/compatible-mode/v1";
 5 | const ALIBABA_MODEL = "qwen-turbo";
 6 | 
 7 | /**
 8 |  * 通义千问 API 代理
 9 |  * 该路由将前端请求代理到阿里云通义千问 API，避免跨域问题
10 |  */
11 | export async function POST(request: NextRequest) {
12 |   try {
13 |     const body = await request.json();
14 |     const { apiKey, messages } = body;
15 |     
16 |     if (!apiKey) {
17 |       return NextResponse.json(
18 |         { error: 'API 密钥不能为空' },
19 |         { status: 400 }
20 |       );
21 |     }
22 |     
23 |     // 发送请求到通义千问 API
24 |     const response = await fetch(`${ALIBABA_BASE_URL}/chat/completions`, {
25 |       method: 'POST',
26 |       headers: {
27 |         'Content-Type': 'application/json',
28 |         'Authorization': `Bearer ${apiKey}`
29 |       },
30 |       body: JSON.stringify({
31 |         model: ALIBABA_MODEL,
32 |         messages
33 |       })
34 |     });
35 |     
36 |     // 获取响应数据
37 |     const data = await response.json();
38 |     
39 |     // 如果响应失败，返回错误信息
40 |     if (!response.ok) {
41 |       return NextResponse.json(
42 |         { error: data.error?.message || `API 请求失败，状态码: ${response.status}` },
43 |         { status: response.status }
44 |       );
45 |     }
46 |     
47 |     // 返回成功响应
48 |     return NextResponse.json(data);
49 |   } catch (error: any) {
50 |     console.error('通义千问 API 代理错误:', error);
51 |     return NextResponse.json(
52 |       { error: error.message || '处理请求时发生未知错误' },
53 |       { status: 500 }
54 |     );
55 |   }
56 | } 


--------------------------------------------------------------------------------
/src/constants/quiz.ts:
--------------------------------------------------------------------------------
 1 | import { QuestionType } from "@/types/quiz";
 2 | 
 3 | /**
 4 |  * 题目类型显示名称
 5 |  */
 6 | export const QUESTION_TYPE_NAMES: Record<QuestionType, string> = {
 7 |   [QuestionType.SingleChoice]: '单选题',
 8 |   [QuestionType.MultipleChoice]: '多选题',
 9 |   [QuestionType.TrueFalse]: '判断题',
10 |   [QuestionType.ShortAnswer]: '简答题',
11 |   [QuestionType.FillInBlank]: '填空题',
12 | };
13 | 
14 | /**
15 |  * 空题库名称
16 |  */
17 | export const DEFAULT_BANK_NAME = '未命名题库';
18 | 
19 | /**
20 |  * 默认导出文件名
21 |  */
22 | export const DEFAULT_EXPORT_FILENAME = '题库导出';
23 | 
24 | /**
25 |  * 示例题库
26 |  */
27 | export const EXAMPLE_QUESTION_TEXT = `1. 以下哪个不是 JavaScript 基本数据类型?( )
28 | A. String
29 | B. Number
30 | C. Array
31 | D. Boolean
32 | 正确答案:C:Array;
33 | 
34 | 2. 哪个 JSP 动作标记用于动态包含另一个 JSP 页面?( )
35 | A. jsp:forward
36 | B. jsp:useBean
37 | C. jsp:setProperty
38 | D. jsp:include
39 | 正确答案:D:jsp:include;
40 | 
41 | 3. 在Java编程中，____是一种面向对象的编程语言，由Sun公司于____年发布。
42 | 正确答案:Java;1995;`;
43 | 
44 | /**
45 |  * 题目标签颜色
46 |  */
47 | export const TAG_COLORS = [
48 |   'bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-200',
49 |   'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-200',
50 |   'bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-200',
51 |   'bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-200',
52 |   'bg-purple-100 text-purple-800 dark:bg-purple-700 dark:text-purple-200',
53 |   'bg-pink-100 text-pink-800 dark:bg-pink-700 dark:text-pink-200',
54 |   'bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-200',
55 | ];
56 | 
57 | /**
58 |  * 获取tag颜色
59 |  */
60 | export const getTagColor = (tag: string): string => {
61 |   // 根据字符串生成一个稳定的索引
62 |   let hash = 0;
63 |   for (let i = 0; i < tag.length; i++) {
64 |     hash = (hash + tag.charCodeAt(i)) % TAG_COLORS.length;
65 |   }
66 |   return TAG_COLORS[hash];
67 | }; 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const ScrollArea = React.forwardRef<
 7 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 9 | >(({ className, children, ...props }, ref) => (
10 |   <ScrollAreaPrimitive.Root
11 |     ref={ref}
12 |     className={cn("relative overflow-hidden", className)}
13 |     {...props}
14 |   >
15 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
16 |       {children}
17 |     </ScrollAreaPrimitive.Viewport>
18 |     <ScrollBar />
19 |     <ScrollAreaPrimitive.Corner />
20 |   </ScrollAreaPrimitive.Root>
21 | ))
22 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
23 | 
24 | const ScrollBar = React.forwardRef<
25 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27 | >(({ className, orientation = "vertical", ...props }, ref) => (
28 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
29 |     ref={ref}
30 |     orientation={orientation}
31 |     className={cn(
32 |       "flex touch-none select-none transition-colors",
33 |       orientation === "vertical" &&
34 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
35 |       orientation === "horizontal" &&
36 |         "h-2.5 border-t border-t-transparent p-[1px]",
37 |       className
38 |     )}
39 |     {...props}
40 |   >
41 |     <ScrollAreaPrimitive.ScrollAreaThumb 
42 |       className="relative flex-1 rounded-full bg-border dark:bg-gray-500" 
43 |     />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar } 


--------------------------------------------------------------------------------
/generate/build-linux.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | # 在Docker中构建Linux版本的Electron应用
 3 | # 作者: KurodaKayn
 4 | # 日期: $(date +"%Y-%m-%d")
 5 | 
 6 | set -e  # 遇到错误立即退出
 7 | 
 8 | # 定义颜色
 9 | GREEN='\033[0;32m'
10 | YELLOW='\033[1;33m'
11 | RED='\033[0;31m'
12 | NC='\033[0m' # 恢复默认颜色
13 | 
14 | echo -e "${YELLOW}准备在Docker中构建Linux版本...${NC}"
15 | 
16 | # 检查Docker是否已安装
17 | if ! command -v docker &> /dev/null; then
18 |     echo -e "${RED}错误: 未找到Docker，请先安装Docker${NC}"
19 |     exit 1
20 | fi
21 | 
22 | # 检查镜像是否存在，不存在则拉取
23 | DOCKER_IMAGE="electronuserland/builder:12"
24 | if ! docker images | grep -q "electronuserland/builder" | grep -q "12"; then
25 |     echo -e "${YELLOW}未找到${DOCKER_IMAGE}镜像，正在拉取...${NC}"
26 |     docker pull ${DOCKER_IMAGE}
27 |     if [ $? -ne 0 ]; then
28 |         echo -e "${RED}拉取镜像失败${NC}"
29 |         exit 1
30 |     fi
31 | fi
32 | 
33 | echo -e "${GREEN}开始构建Linux应用...${NC}"
34 | 
35 | # 获取项目根目录路径和项目名称
36 | PROJECT_DIR=$(pwd)
37 | PROJECT_NAME=$(basename "$PROJECT_DIR")
38 | 
39 | # 运行Docker容器进行构建
40 | docker run --rm -ti \
41 |   --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \
42 |   --env ELECTRON_CACHE="/root/.cache/electron" \
43 |   --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
44 |   -v ${PROJECT_DIR}:/project \
45 |   -v ${PROJECT_NAME}-linux-node-modules:/project/node_modules \
46 |   -v ~/.cache/electron:/root/.cache/electron \
47 |   -v ~/.cache/electron-builder:/root/.cache/electron-builder \
48 |   ${DOCKER_IMAGE} \
49 |   /bin/bash -c "cd /project && npm install && npm run build:electron:linux"
50 | 
51 | if [ $? -eq 0 ]; then
52 |     echo -e "${GREEN}Linux应用构建成功！${NC}"
53 |     echo -e "${YELLOW}构建文件位于: ${PROJECT_DIR}/dist${NC}"
54 | else
55 |     echo -e "${RED}Linux应用构建失败${NC}"
56 |     exit 1
57 | fi 


--------------------------------------------------------------------------------
/generate/build-win.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | # 在Docker中构建Windows版本的Electron应用
 3 | # 作者: KurodaKayn
 4 | # 日期: $(date +"%Y-%m-%d")
 5 | 
 6 | set -e  # 遇到错误立即退出
 7 | 
 8 | # 定义颜色
 9 | GREEN='\033[0;32m'
10 | YELLOW='\033[1;33m'
11 | RED='\033[0;31m'
12 | NC='\033[0m' # 恢复默认颜色
13 | 
14 | echo -e "${YELLOW}准备在Docker中构建Windows版本...${NC}"
15 | 
16 | # 检查Docker是否已安装
17 | if ! command -v docker &> /dev/null; then
18 |     echo -e "${RED}错误: 未找到Docker，请先安装Docker${NC}"
19 |     exit 1
20 | fi
21 | 
22 | # 检查镜像是否存在，不存在则拉取
23 | DOCKER_IMAGE="electronuserland/builder:wine"
24 | if ! docker images | grep -q "electronuserland/builder" | grep -q "wine"; then
25 |     echo -e "${YELLOW}未找到${DOCKER_IMAGE}镜像，正在拉取...${NC}"
26 |     docker pull ${DOCKER_IMAGE}
27 |     if [ $? -ne 0 ]; then
28 |         echo -e "${RED}拉取镜像失败${NC}"
29 |         exit 1
30 |     fi
31 | fi
32 | 
33 | echo -e "${GREEN}开始构建Windows应用...${NC}"
34 | 
35 | # 获取项目根目录路径和项目名称
36 | PROJECT_DIR=$(pwd)
37 | PROJECT_NAME=$(basename "$PROJECT_DIR")
38 | 
39 | # 运行Docker容器进行构建
40 | docker run --rm -ti \
41 |   --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \
42 |   --env ELECTRON_CACHE="/root/.cache/electron" \
43 |   --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
44 |   -v ${PROJECT_DIR}:/project \
45 |   -v ${PROJECT_NAME}-node-modules:/project/node_modules \
46 |   -v ~/.cache/electron:/root/.cache/electron \
47 |   -v ~/.cache/electron-builder:/root/.cache/electron-builder \
48 |   ${DOCKER_IMAGE} \
49 |   /bin/bash -c "cd /project && npm install && npm run build:electron:win"
50 | 
51 | if [ $? -eq 0 ]; then
52 |     echo -e "${GREEN}Windows应用构建成功！${NC}"
53 |     echo -e "${YELLOW}构建文件位于: ${PROJECT_DIR}/dist${NC}"
54 | else
55 |     echo -e "${RED}Windows应用构建失败${NC}"
56 |     exit 1
57 | fi 


--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-card text-card-foreground",
12 |         destructive:
13 |           "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | function Alert({
23 |   className,
24 |   variant,
25 |   ...props
26 | }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
27 |   return (
28 |     <div
29 |       data-slot="alert"
30 |       role="alert"
31 |       className={cn(alertVariants({ variant }), className)}
32 |       {...props}
33 |     />
34 |   )
35 | }
36 | 
37 | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
38 |   return (
39 |     <div
40 |       data-slot="alert-title"
41 |       className={cn(
42 |         "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
43 |         className
44 |       )}
45 |       {...props}
46 |     />
47 |   )
48 | }
49 | 
50 | function AlertDescription({
51 |   className,
52 |   ...props
53 | }: React.ComponentProps<"div">) {
54 |   return (
55 |     <div
56 |       data-slot="alert-description"
57 |       className={cn(
58 |         "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
59 |         className
60 |       )}
61 |       {...props}
62 |     />
63 |   )
64 | }
65 | 
66 | export { Alert, AlertTitle, AlertDescription }
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 项目简介
 2 | ## 项目初衷
 3 | 本项目的设计目的是提高学生效率，在相同时间内能提升到一个更高的做题水平
 4 | 适合直接把自己从各种地方Ctrl C + Ctrl V或者是说爬取的题目拿来反复联系最终打到一个比较理想的死记硬背水平，从而在考试或者是说八股面试中拿到个更好的成绩
 5 | 
 6 | ## 支持的操作系统
 7 | Mac OS: supports Mac OSX 10.12+
 8 | Windows: 还真不晓得理论上来说10跟11是没问题的
 9 | Linux: not yet
10 | 
11 | ## 如何使用
12 | ### 1.下载安装包
13 | 在repo中根据操作系统安装包
14 | ### 2.安装
15 | windows的.exe和Mac的
16 | ### 3.(可选)去Deepseek/阿里云百炼获取AI api密钥
17 | 去deepseek或者是同义千问的api平台获取api key在设置里设置好即可使用AI导入功能即可。推荐阿里，为有免费额度而且回复更快.
18 | 因为更推荐阿里百炼所以我这里就只放它的链接了`https://bailian.console.aliyun.com/`(我每收米所以建议是齁完羊毛就撤退别真付费上了,后续我会增加个更多可以白嫖的API)
19 | 
20 | ## 技术栈
21 | Next.js作为全栈框架，最终用Electron打包生成桌面应用。因为Electron打包next.js的路由似乎有点问题，所以最后只能用Fetch API了(其实也只有调用LLM的时候会向外部发出请求，其他时候都是在本地进行操作)。
22 | 辅助美化的库有tailwindcss
23 | AI辅助导入题库目前只有deepseek和Qwen，未来有空或许会支持更多的AI或者是说调用来自其他平台AI的API
24 | 
25 | ## 数据存储
26 | 因为是网页的技术栈，所以数据是存在网页的localstorage里的。但是因为最后用Electron打包了，所以数据会存在：
27 | Windows:%USERPROFILE%\AppData\Local\ahf-qds-eoe\Local Storage\ 
28 | Mac OS:~/Library/Application Support/ahf-qds-eoe/Local Storage/
29 | 
30 | ## 项目特色
31 | 很多题库的刷错题之类的功能不好用，又不能直接导出。所以我就想做个软件来解决这个问题。大语言模型显然是个不错的解决方案，还可以顺带给判断之类的告诉我这个到底为什么对为什么错，而不是因为你的老师太蠢了，不告诉原因。导致你只能无脑赢背住。
32 | 
33 | ## 未来计划
34 | ### 1.加入题目的图片存储支持
35 | ### 2.也许在很遥远的未来，会搞手机APP(目前已经有了响应式布局，只要导出就行了，但是app的存储挺麻烦的)
36 | 
37 | #开发者食用指南
38 | 本项目支持打包成桌面应用，可以在Windows和macOS系统上运行。当然如果你不是开发者直接就从我放在Releases的包直接拿来用就行了
39 | 
40 | ## 开发环境运行桌面应用
41 | 
42 | ```bash
43 | # 安装依赖
44 | npm install
45 | 
46 | # 开发模式运行桌面应用
47 | npm run electron:dev
48 | ```
49 | 
50 | ## 打包桌面应用
51 | 
52 | ```bash
53 | # 构建并打包桌面应用
54 | npm run build:electron
55 | 
56 | # 或者，先构建然后再打包
57 | npm run build
58 | npm run dist
59 | ```
60 | 
61 | 打包后的应用将会在`dist`目录中生成。
62 | 
63 | ### 打包选项
64 | 
65 | - macOS: 打包为.dmg安装文件和.app应用程序
66 | - Windows: 打包为.exe安装文件
67 | 
68 | ## 自定义应用图标
69 | 
70 | 1. 在项目根目录创建`build`文件夹
71 | 2. 添加以下图标文件:
72 |    - icon.icns (macOS)
73 |    - icon.ico (Windows)
74 |    - icon.png (通用)
75 | 
76 | 更多详细信息请参考`electron/icon.txt`文件。
77 | 


--------------------------------------------------------------------------------
/generate/README.md:
--------------------------------------------------------------------------------
 1 | # Electron 应用多平台构建工具
 2 | 
 3 | 这个目录包含了用于构建不同平台 Electron 应用的脚本集合。这些脚本简化了跨平台构建过程，特别是针对 Windows 和 Linux 版本，它们使用 Docker 容器来避免依赖问题。
 4 | 
 5 | ## 文件说明
 6 | 
 7 | - `build-all.sh`: 主构建脚本，可以选择构建一个或多个平台的应用
 8 | - `build-mac.sh`: 构建 macOS 版本的应用（仅限在 macOS 系统上运行）
 9 | - `build-win.sh`: 使用 Docker 容器构建 Windows 版本的应用
10 | - `build-linux.sh`: 使用 Docker 容器构建 Linux 版本的应用
11 | 
12 | ## 前置条件
13 | 
14 | - **对于所有平台**:
15 |   - 已安装 Node.js 和 npm
16 |   - 项目的 `package.json` 中包含适当的构建脚本（见下文）
17 |   
18 | - **对于 Windows/Linux 构建**:
19 |   - 已安装 Docker
20 |   - 有网络连接以拉取 Docker 镜像（如果尚未下载）
21 | 
22 | ## 使用方法
23 | 
24 | 1. 确保所有脚本有执行权限：
25 |    ```bash
26 |    chmod +x generate/*.sh
27 |    ```
28 | 
29 | 2. 使用主脚本 `build-all.sh` 构建应用：
30 |    ```bash
31 |    # 构建所有平台版本
32 |    ./generate/build-all.sh --all
33 |    
34 |    # 仅构建 macOS 版本
35 |    ./generate/build-all.sh --mac
36 |    
37 |    # 构建 Windows 和 Linux 版本
38 |    ./generate/build-all.sh --windows --linux
39 |    ```
40 | 
41 | 3. 或者，直接使用单个平台的构建脚本：
42 |    ```bash
43 |    # macOS 版本
44 |    ./generate/build-mac.sh
45 |    
46 |    # Windows 版本
47 |    ./generate/build-win.sh
48 |    
49 |    # Linux 版本
50 |    ./generate/build-linux.sh
51 |    ```
52 | 
53 | ## 必要的 package.json 配置
54 | 
55 | 确保您的 `package.json` 中包含以下构建脚本：
56 | 
57 | ```json
58 | "scripts": {
59 |   "build:electron:mac": "next build --no-lint && cross-env ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ electron-builder --mac --publish=never",
60 |   "build:electron:win": "next build --no-lint && cross-env ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ electron-builder --win --x64 --publish=never",
61 |   "build:electron:linux": "next build --no-lint && cross-env ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ electron-builder --linux --publish=never"
62 | }
63 | ```
64 | 
65 | ## 注意事项
66 | 
67 | - macOS 版本只能在 macOS 系统上构建
68 | - Windows 和 Linux 版本使用 Docker 构建，在任何支持 Docker 的平台上都能工作
69 | - 首次运行 Docker 构建时，会自动下载必要的 Docker 镜像（可能需要一些时间）
70 | - 构建完成后，可执行文件将会位于项目根目录下的 `dist` 文件夹中
71 | 
72 | ## 常见问题排查
73 | 
74 | 1. **Docker 镜像下载失败**
75 |    - 检查您的网络连接
76 |    - 尝试使用国内镜像源（脚本中已配置）
77 | 
78 | 2. **构建失败**
79 |    - 检查 Node.js 依赖是否完整
80 |    - 确认 `electron-builder` 已正确安装
81 |    - 查看具体的错误信息进行排查
82 | 
83 | 3. **macOS 构建权限问题**
84 |    - 可能需要为应用签名，请参考 Electron 官方文档 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : "button"
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/src/components/CreateBankModal.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useState, useEffect } from 'react';
 4 | import { FaTimes } from 'react-icons/fa';
 5 | import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
 6 | import { Button } from '@/components/ui/button';
 7 | import { Input } from '@/components/ui/input';
 8 | import { Textarea } from '@/components/ui/textarea';
 9 | 
10 | interface CreateBankModalProps {
11 |   isOpen: boolean;
12 |   onClose: () => void;
13 |   onSubmit: (name: string, description: string) => void;
14 | }
15 | 
16 | /**
17 |  * 创建新题库的模态对话框组件
18 |  */
19 | export default function CreateBankModal({
20 |   isOpen,
21 |   onClose,
22 |   onSubmit,
23 | }: CreateBankModalProps) {
24 |   const [name, setName] = useState('');
25 |   const [description, setDescription] = useState('');
26 |   const [error, setError] = useState('');
27 | 
28 |   useEffect(() => {
29 |     if (isOpen) {
30 |       // 每次打开重置数据
31 |       setName('');
32 |       setDescription('');
33 |       setError('');
34 |     }
35 |   }, [isOpen]);
36 | 
37 |   const handleSubmit = () => {
38 |     if (!name.trim()) {
39 |       setError('题库名称不能为空');
40 |       return;
41 |     }
42 |     
43 |     setError('');
44 |     onSubmit(name.trim(), description.trim());
45 |     onClose();
46 |   };
47 | 
48 |   return (
49 |     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
50 |       <DialogContent className="sm:max-w-[500px]">
51 |         <DialogHeader>
52 |           <DialogTitle className="text-xl font-semibold text-gray-800 dark:text-gray-100">创建新题库</DialogTitle>
53 |         </DialogHeader>
54 | 
55 |         <div className="space-y-4 my-4">
56 |           <div>
57 |             <label htmlFor="bankName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
58 |               题库名称 <span className="text-red-500">*</span>
59 |             </label>
60 |             <Input
61 |               id="bankName"
62 |               value={name}
63 |               onChange={(e) => setName(e.target.value)}
64 |               onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
65 |               placeholder="请输入题库名称"
66 |               className="w-full"
67 |               autoFocus
68 |             />
69 |             {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
70 |           </div>
71 | 
72 |           <div>
73 |             <label htmlFor="bankDescription" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
74 |               题库描述 (可选)
75 |             </label>
76 |             <Textarea
77 |               id="bankDescription"
78 |               value={description}
79 |               onChange={(e) => setDescription(e.target.value)}
80 |               placeholder="请输入题库描述信息..."
81 |               rows={3}
82 |               className="w-full"
83 |             />
84 |           </div>
85 |         </div>
86 | 
87 |         <DialogFooter>
88 |           <Button variant="outline" onClick={onClose} className="mr-2">
89 |             取消
90 |           </Button>
91 |           <Button onClick={handleSubmit}>
92 |             创建
93 |           </Button>
94 |         </DialogFooter>
95 |       </DialogContent>
96 |     </Dialog>
97 |   );
98 | } 


--------------------------------------------------------------------------------
/src/lib/deepseek.ts:
--------------------------------------------------------------------------------
  1 | import axios from 'axios';
  2 | import { Question, QuestionOption, QuestionType } from '@/types/quiz';
  3 | import { generateId } from '@/utils/quiz';
  4 | 
  5 | // DeepSeek API配置
  6 | const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/chat/completions';
  7 | 
  8 | /**
  9 |  * DeepSeek客户端
 10 |  */
 11 | export class DeepseekClient {
 12 |   private apiKey: string;
 13 | 
 14 |   constructor(apiKey: string) {
 15 |     this.apiKey = apiKey;
 16 |   }
 17 | 
 18 |   /**
 19 |    * 设置API密钥
 20 |    */
 21 |   setApiKey(apiKey: string): void {
 22 |     this.apiKey = apiKey;
 23 |   }
 24 | 
 25 |   /**
 26 |    * 调用DeepSeek API
 27 |    */
 28 |   private async callApi(prompt: string): Promise<string> {
 29 |     try {
 30 |       const response = await axios.post(
 31 |         DEEPSEEK_API_URL,
 32 |         {
 33 |           model: 'deepseek-chat',
 34 |           messages: [{ role: 'user', content: prompt }],
 35 |           temperature: 0.1,
 36 |         },
 37 |         {
 38 |           headers: {
 39 |             'Content-Type': 'application/json',
 40 |             'Authorization': `Bearer ${this.apiKey}`,
 41 |           },
 42 |         }
 43 |       );
 44 | 
 45 |       return response.data.choices[0].message.content;
 46 |     } catch (error) {
 47 |       console.error('DeepSeek API调用失败:', error);
 48 |       throw new Error('无法连接到DeepSeek API，请检查您的API密钥和网络连接');
 49 |     }
 50 |   }
 51 | 
 52 |   /**
 53 |    * 解析文本为题目
 54 |    */
 55 |   async parseText(text: string): Promise<Question[]> {
 56 |     const prompt = `
 57 | 请将以下文本解析为结构化试题数据。对于每个题目，请识别题型(单选题、多选题、判断题或简答题)、题目内容、选项(如果有)以及正确答案。
 58 | 
 59 | 请按照以下JSON格式返回结果:
 60 | [
 61 |   {
 62 |     "type": "single-choice", // single-choice(单选题), multiple-choice(多选题), true-false(判断题), short-answer(简答题)
 63 |     "content": "题目内容",
 64 |     "options": [ // 选择题才有选项
 65 |       { "label": "A", "content": "选项内容" },
 66 |       { "label": "B", "content": "选项内容" }
 67 |       // ...更多选项
 68 |     ],
 69 |     "answer": "A" // 单选题答案为选项标签，多选题为标签数组["A","B"]，判断题为"true"/"false"，简答题为文本内容
 70 |   },
 71 |   // ...更多题目
 72 | ]
 73 | 
 74 | 以下是需要解析的文本:
 75 | ${text}
 76 | 
 77 | 只输出JSON格式的结果，不要有任何额外说明。`;
 78 | 
 79 |     try {
 80 |       const response = await this.callApi(prompt);
 81 |       const parsed = JSON.parse(response);
 82 |       
 83 |       return parsed.map((item: any) => {
 84 |         const now = Date.now();
 85 |         
 86 |         // 解析题目类型
 87 |         let questionType: QuestionType;
 88 |         switch (item.type) {
 89 |           case 'single-choice':
 90 |             questionType = QuestionType.SingleChoice;
 91 |             break;
 92 |           case 'multiple-choice':
 93 |             questionType = QuestionType.MultipleChoice;
 94 |             break;
 95 |           case 'true-false':
 96 |             questionType = QuestionType.TrueFalse;
 97 |             break;
 98 |           default:
 99 |             questionType = QuestionType.ShortAnswer;
100 |         }
101 |         
102 |         // 解析选项
103 |         const options: QuestionOption[] = (item.options || []).map((opt: any) => ({
104 |           id: generateId(),
105 |           content: opt.content,
106 |         }));
107 |         
108 |         return {
109 |           id: generateId(),
110 |           type: questionType,
111 |           content: item.content,
112 |           options: options.length > 0 ? options : undefined,
113 |           answer: item.answer,
114 |           createdAt: now,
115 |           updatedAt: now,
116 |         };
117 |       });
118 |     } catch (error) {
119 |       console.error('解析题目失败:', error);
120 |       throw new Error('解析题目失败，请检查文本格式或API响应');
121 |     }
122 |   }
123 | } 


--------------------------------------------------------------------------------
/generate/build-all.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | # 主构建脚本 - 构建所有或选定平台的Electron应用
  3 | # 作者: KurodaKayn
  4 | # 日期: $(date +"%Y-%m-%d")
  5 | 
  6 | set -e  # 遇到错误立即退出
  7 | 
  8 | # 定义颜色
  9 | GREEN='\033[0;32m'
 10 | YELLOW='\033[1;33m'
 11 | BLUE='\033[0;34m'
 12 | RED='\033[0;31m'
 13 | NC='\033[0m' # 恢复默认颜色
 14 | 
 15 | # 设置脚本路径
 16 | SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 17 | MAC_SCRIPT="${SCRIPT_DIR}/build-mac.sh"
 18 | WIN_SCRIPT="${SCRIPT_DIR}/build-win.sh"
 19 | LINUX_SCRIPT="${SCRIPT_DIR}/build-linux.sh"
 20 | 
 21 | # 确保脚本可执行
 22 | chmod +x "${MAC_SCRIPT}" "${WIN_SCRIPT}" "${LINUX_SCRIPT}"
 23 | 
 24 | # 显示帮助信息
 25 | show_help() {
 26 |   echo -e "${BLUE}Electron应用多平台构建工具${NC}"
 27 |   echo -e "用法: $0 [选项]"
 28 |   echo -e "选项:"
 29 |   echo -e "  ${GREEN}-a, --all${NC}      构建所有平台版本 (macOS, Windows, Linux)"
 30 |   echo -e "  ${GREEN}-m, --mac${NC}      仅构建macOS版本"
 31 |   echo -e "  ${GREEN}-w, --windows${NC}  仅构建Windows版本"
 32 |   echo -e "  ${GREEN}-l, --linux${NC}    仅构建Linux版本"
 33 |   echo -e "  ${GREEN}-h, --help${NC}     显示此帮助信息"
 34 |   echo -e "\n示例："
 35 |   echo -e "  $0 --mac --windows  # 构建macOS和Windows版本"
 36 |   echo -e "  $0 -a               # 构建所有平台版本"
 37 | }
 38 | 
 39 | # 没有参数时显示帮助
 40 | if [ $# -eq 0 ]; then
 41 |   show_help
 42 |   exit 0
 43 | fi
 44 | 
 45 | # 解析命令行参数
 46 | BUILD_MAC=false
 47 | BUILD_WIN=false
 48 | BUILD_LINUX=false
 49 | 
 50 | while [ $# -gt 0 ]; do
 51 |   case "$1" in
 52 |     -a|--all)
 53 |       BUILD_MAC=true
 54 |       BUILD_WIN=true
 55 |       BUILD_LINUX=true
 56 |       shift
 57 |       ;;
 58 |     -m|--mac)
 59 |       BUILD_MAC=true
 60 |       shift
 61 |       ;;
 62 |     -w|--windows)
 63 |       BUILD_WIN=true
 64 |       shift
 65 |       ;;
 66 |     -l|--linux)
 67 |       BUILD_LINUX=true
 68 |       shift
 69 |       ;;
 70 |     -h|--help)
 71 |       show_help
 72 |       exit 0
 73 |       ;;
 74 |     *)
 75 |       echo -e "${RED}错误: 未知参数 $1${NC}"
 76 |       show_help
 77 |       exit 1
 78 |       ;;
 79 |   esac
 80 | done
 81 | 
 82 | # 开始构建过程
 83 | echo -e "${BLUE}======================================${NC}"
 84 | echo -e "${BLUE}     Electron应用多平台构建工具      ${NC}"
 85 | echo -e "${BLUE}======================================${NC}"
 86 | 
 87 | STARTED_TIME=$(date +"%T")
 88 | echo -e "${YELLOW}开始时间: ${STARTED_TIME}${NC}"
 89 | echo
 90 | 
 91 | # 构建macOS版本
 92 | if [ "$BUILD_MAC" = true ]; then
 93 |   echo -e "${BLUE}======================================${NC}"
 94 |   echo -e "${BLUE}        构建macOS应用版本           ${NC}"
 95 |   echo -e "${BLUE}======================================${NC}"
 96 |   if [[ "$(uname)" != "Darwin" ]]; then
 97 |     echo -e "${RED}警告: 不在macOS系统上，跳过macOS构建${NC}"
 98 |   else
 99 |     ${MAC_SCRIPT}
100 |   fi
101 |   echo
102 | fi
103 | 
104 | # 构建Windows版本
105 | if [ "$BUILD_WIN" = true ]; then
106 |   echo -e "${BLUE}======================================${NC}"
107 |   echo -e "${BLUE}        构建Windows应用版本         ${NC}"
108 |   echo -e "${BLUE}======================================${NC}"
109 |   ${WIN_SCRIPT}
110 |   echo
111 | fi
112 | 
113 | # 构建Linux版本
114 | if [ "$BUILD_LINUX" = true ]; then
115 |   echo -e "${BLUE}======================================${NC}"
116 |   echo -e "${BLUE}        构建Linux应用版本           ${NC}"
117 |   echo -e "${BLUE}======================================${NC}"
118 |   ${LINUX_SCRIPT}
119 |   echo
120 | fi
121 | 
122 | # 显示总结
123 | FINISHED_TIME=$(date +"%T")
124 | echo -e "${BLUE}======================================${NC}"
125 | echo -e "${BLUE}             构建完成               ${NC}"
126 | echo -e "${BLUE}======================================${NC}"
127 | echo -e "${YELLOW}开始时间: ${STARTED_TIME}${NC}"
128 | echo -e "${YELLOW}结束时间: ${FINISHED_TIME}${NC}"
129 | echo -e "${GREEN}构建文件位于: $(cd "${SCRIPT_DIR}/.." && pwd)/dist${NC}" 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "ahf-qds-eoe",
  3 |   "version": "0.4.0",
  4 |   "description": "题库练习应用 - 一个帮助学习与测试的工具",
  5 |   "author": "KurodaKayn",
  6 |   "private": true,
  7 |   "main": "electron/main.js",
  8 |   "scripts": {
  9 |     "dev": "next dev --turbopack",
 10 |     "build": "next build",
 11 |     "start": "next start",
 12 |     "lint": "next lint",
 13 |     "electron": "electron .",
 14 |     "electron:dev": "concurrently \"pnpm run dev\" \"pnpm run electron\"",
 15 |     "build:electron": "next build --no-lint && electron-builder --publish=never",
 16 |     "dist": "electron-builder --publish=never",
 17 |     "build:electron:win": "next build --no-lint && cross-env ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ electron-builder --win --x64 --publish=never"
 18 |   },
 19 |   "build": {
 20 |     "appId": "com.ahf-qds-eoe",
 21 |     "productName": "AHF QDS EOE",
 22 |     "mac": {
 23 |       "category": "public.app-category.utilities",
 24 |       "target": [
 25 |         "dmg",
 26 |         "zip"
 27 |       ],
 28 |       "icon": "build/icon.icns"
 29 |     },
 30 |     "win": {
 31 |       "target": [
 32 |         "nsis",
 33 |         "portable"
 34 |       ],
 35 |       "icon": "build/icon.jpg",
 36 |       "artifactName": "${productName}-Setup-${version}.${ext}"
 37 |     },
 38 |     "files": [
 39 |       "electron/**/*",
 40 |       "node_modules/**/*",
 41 |       "public/**/*",
 42 |       "package.json",
 43 |       "out/**/*"
 44 |     ],
 45 |     "extraResources": [
 46 |       {
 47 |         "from": "out",
 48 |         "to": "app.asar.unpacked/out"
 49 |       },
 50 |       {
 51 |         "from": "public",
 52 |         "to": "app.asar.unpacked/public"
 53 |       }
 54 |     ],
 55 |     "asar": true,
 56 |     "asarUnpack": [
 57 |       "out/**/*"
 58 |     ],
 59 |     "directories": {
 60 |       "buildResources": "resources",
 61 |       "output": "dist"
 62 |     },
 63 |     "extraMetadata": {
 64 |       "main": "electron/main.js"
 65 |     }
 66 |   },
 67 |   "dependencies": {
 68 |     "@headlessui/react": "^2.2.2",
 69 |     "@radix-ui/react-checkbox": "^1.3.1",
 70 |     "@radix-ui/react-dialog": "^1.1.13",
 71 |     "@radix-ui/react-progress": "^1.1.6",
 72 |     "@radix-ui/react-scroll-area": "^1.2.8",
 73 |     "@radix-ui/react-select": "^2.2.4",
 74 |     "@radix-ui/react-slot": "^1.2.2",
 75 |     "@tailwindcss/typography": "^0.5.16",
 76 |     "@types/uuid": "^10.0.0",
 77 |     "axios": "^1.9.0",
 78 |     "class-variance-authority": "^0.7.1",
 79 |     "clsx": "^2.1.1",
 80 |     "date-fns": "^4.1.0",
 81 |     "electron-serve": "^1.2.0",
 82 |     "express": "^4.18.3",
 83 |     "lucide-react": "^0.509.0",
 84 |     "next": "15.3.2",
 85 |     "node-fetch": "^2.7.0",
 86 |     "openai": "^4.98.0",
 87 |     "papaparse": "^5.5.2",
 88 |     "portfinder": "^1.0.32",
 89 |     "react": "^19.0.0",
 90 |     "react-dom": "^19.0.0",
 91 |     "react-icons": "^5.5.0",
 92 |     "react-markdown": "^10.1.0",
 93 |     "react-spinners": "^0.17.0",
 94 |     "rehype-raw": "^7.0.0",
 95 |     "rehype-sanitize": "^6.0.0",
 96 |     "remark": "^15.0.1",
 97 |     "remark-gfm": "^4.0.1",
 98 |     "remark-html": "^16.0.1",
 99 |     "sharp": "^0.34.1",
100 |     "sonner": "^2.0.3",
101 |     "tailwind-merge": "^3.2.0",
102 |     "uuid": "^11.1.0",
103 |     "xlsx": "^0.18.5",
104 |     "zustand": "^5.0.4"
105 |   },
106 |   "devDependencies": {
107 |     "@eslint/eslintrc": "^3",
108 |     "@tailwindcss/postcss": "^4",
109 |     "@types/node": "^20",
110 |     "@types/papaparse": "^5.3.16",
111 |     "@types/react": "^19",
112 |     "@types/react-dom": "^19",
113 |     "concurrently": "^8.2.2",
114 |     "cross-env": "^7.0.3",
115 |     "electron": "^30.0.4",
116 |     "electron-builder": "^24.9.1",
117 |     "eslint": "^9",
118 |     "eslint-config-next": "15.3.2",
119 |     "tailwindcss": "^4",
120 |     "tw-animate-css": "^1.2.9",
121 |     "typescript": "^5",
122 |     "wait-on": "^7.2.0"
123 |   }
124 | }
125 | 


--------------------------------------------------------------------------------
/electron/check-environment.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 环境检查脚本
  3 |  * 在应用启动时验证所有必要的环境和文件
  4 |  */
  5 | const fs = require('fs');
  6 | const path = require('path');
  7 | 
  8 | /**
  9 |  * 检查应用环境是否正常
 10 |  * @param {string} appPath 应用根目录
 11 |  * @param {Function} logFunc 日志记录函数
 12 |  * @returns {Object} 检查结果，包括状态和错误信息
 13 |  */
 14 | function checkEnvironment(appPath, logFunc) {
 15 |   const result = {
 16 |     success: true,
 17 |     errors: []
 18 |   };
 19 |   
 20 |   try {
 21 |     logFunc('开始环境检查');
 22 |     
 23 |     // 检查必要的目录
 24 |     const requiredDirs = [
 25 |       'out',
 26 |       'node_modules'
 27 |     ];
 28 |     
 29 |     let missingDirs = 0;
 30 |     for (const dir of requiredDirs) {
 31 |       const dirPath = path.join(appPath, dir);
 32 |       if (!fs.existsSync(dirPath)) {
 33 |         const error = `缺少必要目录: ${dir}`;
 34 |         logFunc(error);
 35 |         result.errors.push(error);
 36 |         missingDirs++;
 37 |       }
 38 |     }
 39 |     
 40 |     // 如果缺少所有必要目录，则认为环境检查失败
 41 |     if (missingDirs >= requiredDirs.length) {
 42 |       result.success = false;
 43 |     }
 44 |     
 45 |     // 检查out目录是否包含构建文件
 46 |     const outDir = path.join(appPath, 'out');
 47 |     if (fs.existsSync(outDir)) {
 48 |       const files = fs.readdirSync(outDir);
 49 |       if (files.length === 0) {
 50 |         const error = 'out目录是空的，应用可能未正确构建';
 51 |         logFunc(error);
 52 |         result.errors.push(error);
 53 |         // 不将这个作为失败条件，因为生产环境可能不需要out目录
 54 |       }
 55 |     }
 56 |     
 57 |     // 检查node_modules目录中是否有重要依赖，但不作为失败条件
 58 |     const nodeModulesDir = path.join(appPath, 'node_modules');
 59 |     if (fs.existsSync(nodeModulesDir)) {
 60 |       const criticalDeps = [
 61 |         'next',
 62 |         'react',
 63 |         'react-dom'
 64 |       ];
 65 |       
 66 |       for (const dep of criticalDeps) {
 67 |         const depPath = path.join(nodeModulesDir, dep);
 68 |         if (!fs.existsSync(depPath)) {
 69 |           const warning = `未找到依赖: ${dep}，但这不影响打包后的应用运行`;
 70 |           logFunc(warning);
 71 |           // 不添加到errors中，因为打包后的应用不依赖这些目录
 72 |         }
 73 |       }
 74 |     }
 75 |     
 76 |     // 检查Next.js配置文件 - 同时检查.ts和.js扩展名
 77 |     let hasNextConfig = false;
 78 |     const nextConfigPaths = [
 79 |       path.join(appPath, 'next.config.ts'),
 80 |       path.join(appPath, 'next.config.js'),
 81 |       path.join(appPath, 'next.config.mjs')
 82 |     ];
 83 |     
 84 |     for (const configPath of nextConfigPaths) {
 85 |       if (fs.existsSync(configPath)) {
 86 |         hasNextConfig = true;
 87 |         logFunc(`找到Next.js配置文件: ${configPath}`);
 88 |         break;
 89 |       }
 90 |     }
 91 |     
 92 |     if (!hasNextConfig) {
 93 |       const warning = 'Next.js配置文件不存在，这可能不影响已打包的应用';
 94 |       logFunc(warning);
 95 |       // 不将这个作为失败条件，因为已打包的应用可能不需要配置文件
 96 |     }
 97 |     
 98 |     // 检查package.json文件
 99 |     const packageJsonPath = path.join(appPath, 'package.json');
100 |     if (!fs.existsSync(packageJsonPath)) {
101 |       const warning = 'package.json文件不存在，这可能不影响已打包的应用';
102 |       logFunc(warning);
103 |       // 不将这个作为失败条件，因为已打包的应用可能不需要package.json
104 |     } else {
105 |       // 检查package.json中的关键配置
106 |       try {
107 |         const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
108 |         if (!packageJson.scripts || !packageJson.scripts.start) {
109 |           const warning = 'package.json中未找到start脚本，这可能不影响已打包的应用';
110 |           logFunc(warning);
111 |           // 不将这个作为失败条件
112 |         }
113 |       } catch (err) {
114 |         const warning = `无法解析package.json: ${err.message}，但这可能不影响已打包的应用`;
115 |         logFunc(warning);
116 |         // 不将这个作为失败条件
117 |       }
118 |     }
119 |     
120 |     logFunc(`环境检查${result.success ? '通过' : '失败'}`);
121 |     return result;
122 |   } catch (error) {
123 |     const errorMsg = `环境检查过程中出错: ${error.message}`;
124 |     logFunc(errorMsg);
125 |     // 即使在检查过程中出错，也尝试继续运行应用
126 |     result.success = true;  // 改为true，不让环境检查错误阻止应用启动
127 |     result.errors.push(errorMsg);
128 |     return result;
129 |   }
130 | }
131 | 
132 | module.exports = checkEnvironment; 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { XIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Dialog({
 10 |   ...props
 11 | }: React.ComponentProps<typeof DialogPrimitive.Root>) {
 12 |   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 13 | }
 14 | 
 15 | function DialogTrigger({
 16 |   ...props
 17 | }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
 18 |   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 19 | }
 20 | 
 21 | function DialogPortal({
 22 |   ...props
 23 | }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
 24 |   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 25 | }
 26 | 
 27 | function DialogClose({
 28 |   ...props
 29 | }: React.ComponentProps<typeof DialogPrimitive.Close>) {
 30 |   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 31 | }
 32 | 
 33 | function DialogOverlay({
 34 |   className,
 35 |   ...props
 36 | }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
 37 |   return (
 38 |     <DialogPrimitive.Overlay
 39 |       data-slot="dialog-overlay"
 40 |       className={cn(
 41 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     />
 46 |   )
 47 | }
 48 | 
 49 | function DialogContent({
 50 |   className,
 51 |   children,
 52 |   ...props
 53 | }: React.ComponentProps<typeof DialogPrimitive.Content>) {
 54 |   return (
 55 |     <DialogPortal data-slot="dialog-portal">
 56 |       <DialogOverlay />
 57 |       <DialogPrimitive.Content
 58 |         data-slot="dialog-content"
 59 |         className={cn(
 60 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 61 |           className
 62 |         )}
 63 |         {...props}
 64 |       >
 65 |         {children}
 66 |         <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
 67 |           <XIcon />
 68 |           <span className="sr-only">Close</span>
 69 |         </DialogPrimitive.Close>
 70 |       </DialogPrimitive.Content>
 71 |     </DialogPortal>
 72 |   )
 73 | }
 74 | 
 75 | function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 76 |   return (
 77 |     <div
 78 |       data-slot="dialog-header"
 79 |       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 80 |       {...props}
 81 |     />
 82 |   )
 83 | }
 84 | 
 85 | function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 86 |   return (
 87 |     <div
 88 |       data-slot="dialog-footer"
 89 |       className={cn(
 90 |         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 91 |         className
 92 |       )}
 93 |       {...props}
 94 |     />
 95 |   )
 96 | }
 97 | 
 98 | function DialogTitle({
 99 |   className,
100 |   ...props
101 | }: React.ComponentProps<typeof DialogPrimitive.Title>) {
102 |   return (
103 |     <DialogPrimitive.Title
104 |       data-slot="dialog-title"
105 |       className={cn("text-lg leading-none font-semibold", className)}
106 |       {...props}
107 |     />
108 |   )
109 | }
110 | 
111 | function DialogDescription({
112 |   className,
113 |   ...props
114 | }: React.ComponentProps<typeof DialogPrimitive.Description>) {
115 |   return (
116 |     <DialogPrimitive.Description
117 |       data-slot="dialog-description"
118 |       className={cn("text-muted-foreground text-sm", className)}
119 |       {...props}
120 |     />
121 |   )
122 | }
123 | 
124 | export {
125 |   Dialog,
126 |   DialogClose,
127 |   DialogContent,
128 |   DialogDescription,
129 |   DialogFooter,
130 |   DialogHeader,
131 |   DialogOverlay,
132 |   DialogPortal,
133 |   DialogTitle,
134 |   DialogTrigger,
135 | }
136 | 


--------------------------------------------------------------------------------
/src/components/NumQuestionsModal.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useState, useEffect } from 'react';
  4 | import { FaTimes } from 'react-icons/fa';
  5 | 
  6 | interface NumQuestionsModalProps {
  7 |   isOpen: boolean;
  8 |   onClose: () => void;
  9 |   onSubmit: (numQuestions: number) => void;
 10 |   totalQuestions: number;
 11 |   bankName?: string;
 12 | }
 13 | 
 14 | const NumQuestionsModal: React.FC<NumQuestionsModalProps> = ({
 15 |   isOpen,
 16 |   onClose,
 17 |   onSubmit,
 18 |   totalQuestions,
 19 |   bankName,
 20 | }) => {
 21 |   const [numQuestions, setNumQuestions] = useState<string>('');
 22 |   const [error, setError] = useState<string>('');
 23 | 
 24 |   useEffect(() => {
 25 |     // 当模态框打开或总题目数量变化时重置输入
 26 |     if (isOpen) {
 27 |       // 默认选择较小的数量或总题目数（如果总数较小）
 28 |       const defaultNum = totalQuestions > 0 ? Math.min(10, totalQuestions).toString() : '1';
 29 |       setNumQuestions(defaultNum);
 30 |       setError('');
 31 |     }
 32 |   }, [isOpen, totalQuestions]);
 33 | 
 34 |   const handleSubmit = () => {
 35 |     const num = parseInt(numQuestions, 10);
 36 |     if (isNaN(num) || num <= 0) {
 37 |       setError('请输入一个大于0的有效数字。');
 38 |       return;
 39 |     }
 40 |     if (num > totalQuestions) {
 41 |       setError(`题目数量不能超过题库总数 (${totalQuestions}题)。`);
 42 |       return;
 43 |     }
 44 |     setError('');
 45 |     onSubmit(num);
 46 |   };
 47 | 
 48 |   if (!isOpen) {
 49 |     return null;
 50 |   }
 51 | 
 52 |   return (
 53 |     <div className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
 54 |       <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md transform transition-all">
 55 |         <div className="flex justify-between items-center mb-4">
 56 |           <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-100">
 57 |             选择刷题数量
 58 |           </h2>
 59 |           <button
 60 |             onClick={onClose}
 61 |             className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
 62 |             aria-label="关闭弹窗"
 63 |           >
 64 |             <FaTimes size={20} />
 65 |           </button>
 66 |         </div>
 67 | 
 68 |         {bankName && (
 69 |           <p className="text-sm text-gray-600 dark:text-gray-300 mb-1">
 70 |             题库: {bankName}
 71 |           </p>
 72 |         )}
 73 |         <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
 74 |           请输入您本次要刷的题目数量。
 75 |         </p>
 76 | 
 77 |         <div className="mb-4">
 78 |           <label htmlFor="numQuestions" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
 79 |             题目数量
 80 |           </label>
 81 |           <div className="flex items-center space-x-2">
 82 |             <input
 83 |               type="number"
 84 |               id="numQuestions"
 85 |               value={numQuestions}
 86 |               onChange={(e) => setNumQuestions(e.target.value)}
 87 |               onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }}
 88 |               className="flex-grow p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100"
 89 |               min="1"
 90 |               max={totalQuestions}
 91 |             />
 92 |             <span className="text-gray-500 dark:text-gray-400 whitespace-nowrap">
 93 |               / {totalQuestions} 题
 94 |             </span>
 95 |           </div>
 96 |           {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
 97 |         </div>
 98 | 
 99 |         <div className="flex justify-end space-x-3">
100 |           <button
101 |             onClick={onClose}
102 |             className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-800"
103 |           >
104 |             取消
105 |           </button>
106 |           <button
107 |             onClick={handleSubmit}
108 |             disabled={totalQuestions === 0}
109 |             className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed dark:focus:ring-offset-gray-800"
110 |           >
111 |             开始刷题
112 |           </button>
113 |         </div>
114 |       </div>
115 |     </div>
116 |   );
117 | };
118 | 
119 | export default NumQuestionsModal; 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --color-background: var(--background);
  8 |   --color-foreground: var(--foreground);
  9 |   --font-sans: var(--font-geist-sans);
 10 |   --font-mono: var(--font-geist-mono);
 11 |   --color-sidebar-ring: var(--sidebar-ring);
 12 |   --color-sidebar-border: var(--sidebar-border);
 13 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 14 |   --color-sidebar-accent: var(--sidebar-accent);
 15 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 16 |   --color-sidebar-primary: var(--sidebar-primary);
 17 |   --color-sidebar-foreground: var(--sidebar-foreground);
 18 |   --color-sidebar: var(--sidebar);
 19 |   --color-chart-5: var(--chart-5);
 20 |   --color-chart-4: var(--chart-4);
 21 |   --color-chart-3: var(--chart-3);
 22 |   --color-chart-2: var(--chart-2);
 23 |   --color-chart-1: var(--chart-1);
 24 |   --color-ring: var(--ring);
 25 |   --color-input: var(--input);
 26 |   --color-border: var(--border);
 27 |   --color-destructive: var(--destructive);
 28 |   --color-accent-foreground: var(--accent-foreground);
 29 |   --color-accent: var(--accent);
 30 |   --color-muted-foreground: var(--muted-foreground);
 31 |   --color-muted: var(--muted);
 32 |   --color-secondary-foreground: var(--secondary-foreground);
 33 |   --color-secondary: var(--secondary);
 34 |   --color-primary-foreground: var(--primary-foreground);
 35 |   --color-primary: var(--primary);
 36 |   --color-popover-foreground: var(--popover-foreground);
 37 |   --color-popover: var(--popover);
 38 |   --color-card-foreground: var(--card-foreground);
 39 |   --color-card: var(--card);
 40 |   --radius-sm: calc(var(--radius) - 4px);
 41 |   --radius-md: calc(var(--radius) - 2px);
 42 |   --radius-lg: var(--radius);
 43 |   --radius-xl: calc(var(--radius) + 4px);
 44 | }
 45 | 
 46 | /* 自定义动画 */
 47 | @keyframes fadeIn {
 48 |   from {
 49 |     opacity: 0;
 50 |     transform: translateY(10px);
 51 |   }
 52 |   to {
 53 |     opacity: 1;
 54 |     transform: translateY(0);
 55 |   }
 56 | }
 57 | 
 58 | .animate-fade-in {
 59 |   animation: fadeIn 0.3s ease-out forwards;
 60 | }
 61 | 
 62 | :root {
 63 |   --radius: 0.625rem;
 64 |   --background: oklch(1 0 0);
 65 |   --foreground: oklch(0.145 0 0);
 66 |   --card: oklch(1 0 0);
 67 |   --card-foreground: oklch(0.145 0 0);
 68 |   --popover: oklch(1 0 0);
 69 |   --popover-foreground: oklch(0.145 0 0);
 70 |   --primary: oklch(0.205 0 0);
 71 |   --primary-foreground: oklch(0.985 0 0);
 72 |   --secondary: oklch(0.97 0 0);
 73 |   --secondary-foreground: oklch(0.205 0 0);
 74 |   --muted: oklch(0.97 0 0);
 75 |   --muted-foreground: oklch(0.556 0 0);
 76 |   --accent: oklch(0.97 0 0);
 77 |   --accent-foreground: oklch(0.205 0 0);
 78 |   --destructive: oklch(0.577 0.245 27.325);
 79 |   --border: oklch(0.922 0 0);
 80 |   --input: oklch(0.922 0 0);
 81 |   --ring: oklch(0.708 0 0);
 82 |   --chart-1: oklch(0.646 0.222 41.116);
 83 |   --chart-2: oklch(0.6 0.118 184.704);
 84 |   --chart-3: oklch(0.398 0.07 227.392);
 85 |   --chart-4: oklch(0.828 0.189 84.429);
 86 |   --chart-5: oklch(0.769 0.188 70.08);
 87 |   --sidebar: oklch(0.985 0 0);
 88 |   --sidebar-foreground: oklch(0.145 0 0);
 89 |   --sidebar-primary: oklch(0.205 0 0);
 90 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 91 |   --sidebar-accent: oklch(0.97 0 0);
 92 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 93 |   --sidebar-border: oklch(0.922 0 0);
 94 |   --sidebar-ring: oklch(0.708 0 0);
 95 | }
 96 | 
 97 | .dark {
 98 |   --background: oklch(0.145 0 0);
 99 |   --foreground: oklch(0.985 0 0);
100 |   --card: oklch(0.205 0 0);
101 |   --card-foreground: oklch(0.985 0 0);
102 |   --popover: oklch(0.205 0 0);
103 |   --popover-foreground: oklch(0.985 0 0);
104 |   --primary: oklch(0.922 0 0);
105 |   --primary-foreground: oklch(0.205 0 0);
106 |   --secondary: oklch(0.269 0 0);
107 |   --secondary-foreground: oklch(0.985 0 0);
108 |   --muted: oklch(0.269 0 0);
109 |   --muted-foreground: oklch(0.708 0 0);
110 |   --accent: oklch(0.269 0 0);
111 |   --accent-foreground: oklch(0.985 0 0);
112 |   --destructive: oklch(0.704 0.191 22.216);
113 |   --border: oklch(1 0 0 / 10%);
114 |   --input: oklch(1 0 0 / 15%);
115 |   --ring: oklch(0.556 0 0);
116 |   --chart-1: oklch(0.488 0.243 264.376);
117 |   --chart-2: oklch(0.696 0.17 162.48);
118 |   --chart-3: oklch(0.769 0.188 70.08);
119 |   --chart-4: oklch(0.627 0.265 303.9);
120 |   --chart-5: oklch(0.645 0.246 16.439);
121 |   --sidebar: oklch(0.205 0 0);
122 |   --sidebar-foreground: oklch(0.985 0 0);
123 |   --sidebar-primary: oklch(0.488 0.243 264.376);
124 |   --sidebar-primary-foreground: oklch(0.985 0 0);
125 |   --sidebar-accent: oklch(0.269 0 0);
126 |   --sidebar-accent-foreground: oklch(0.985 0 0);
127 |   --sidebar-border: oklch(1 0 0 / 10%);
128 |   --sidebar-ring: oklch(0.556 0 0);
129 | }
130 | 
131 | @layer base {
132 |   * {
133 |     @apply border-border outline-ring/50;
134 |   }
135 |   body {
136 |     @apply bg-background text-foreground;
137 |   }
138 | }
139 | 


--------------------------------------------------------------------------------
/src/app/quiz/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import Link from 'next/link';
  4 | import { useRouter } from 'next/navigation';
  5 | import { useState, useEffect } from 'react';
  6 | import { FaPlay, FaBook, FaPlus } from 'react-icons/fa';
  7 | import { useQuizStore } from '@/store/quizStore';
  8 | import { QuestionBank } from '@/types/quiz';
  9 | import { formatDistanceToNow } from 'date-fns';
 10 | import { zhCN } from 'date-fns/locale';
 11 | import { Button } from '@/components/ui/button';
 12 | 
 13 | export default function QuizPage() {
 14 |   const router = useRouter();
 15 |   const { questionBanks } = useQuizStore();
 16 | 
 17 |   // 用于强制刷新列表，以便 date-fns 的时间正确更新
 18 |   const [_, setForceUpdate] = useState(0);
 19 |   useEffect(() => {
 20 |     const timer = setInterval(() => {
 21 |       setForceUpdate(prev => prev + 1);
 22 |     }, 60000); // 每分钟更新一次
 23 |     return () => clearInterval(timer);
 24 |   }, []);
 25 | 
 26 |   const quizListItem = (bank: QuestionBank) => (
 27 |     <div 
 28 |         key={bank.id} 
 29 |         className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 hover:shadow-xl transition-shadow duration-300 ease-in-out transform hover:-translate-y-1"
 30 |     >
 31 |       <div className="flex flex-col h-full">
 32 |         <div className="flex-grow">
 33 |             <div className="flex justify-between items-start mb-3">
 34 |                 <h2 className="text-xl font-semibold text-gray-800 dark:text-white truncate pr-2" title={bank.name}>
 35 |                     {bank.name}
 36 |                 </h2>
 37 |             </div>
 38 |             <p className="text-gray-600 dark:text-gray-400 text-sm mb-1 line-clamp-2" title={bank.description}>{bank.description || '暂无描述'}</p>
 39 |             <p className="text-xs text-gray-500 dark:text-gray-500 mb-4">
 40 |                 {bank.questions.length} 道题目  · 更新于 {formatDistanceToNow(bank.updatedAt, { addSuffix: true, locale: zhCN })}
 41 |             </p>
 42 |         </div>
 43 | 
 44 |         <div className="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-3">
 45 |           <button
 46 |             onClick={() => router.push(`/quiz/practice?bankId=${bank.id}`)}
 47 |             disabled={bank.questions.length === 0}
 48 |             className={`flex items-center justify-center px-4 py-2.5 rounded-md text-sm font-medium transition-colors
 49 |                         ${bank.questions.length === 0 
 50 |                             ? 'bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed' 
 51 |                             : 'bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white'}`}
 52 |           >
 53 |             <FaPlay className="mr-2"/> 开始练习
 54 |           </button>
 55 |           <button
 56 |             onClick={() => {
 57 |               // 检测是否为开发环境
 58 |               if (process.env.NODE_ENV === 'development') {
 59 |                 // 开发环境使用Next.js路由，带上题库ID
 60 |                 router.push(`/quiz/banks/manage?bankId=${bank.id}`);
 61 |               } else {
 62 |                 // 生产环境使用表单导航（适用于Electron静态导出）
 63 |                 const form = document.createElement('form');
 64 |                 form.method = 'GET';
 65 |                 form.action = '/quiz/banks/manage/index.html';
 66 |                 // 添加题库ID作为参数
 67 |                 const input = document.createElement('input');
 68 |                 input.type = 'hidden';
 69 |                 input.name = 'bankId';
 70 |                 input.value = bank.id;
 71 |                 form.appendChild(input);
 72 |                 form.style.display = 'none';
 73 |                 document.body.appendChild(form);
 74 |                 form.submit();
 75 |               }
 76 |             }}
 77 |             className="flex items-center justify-center px-4 py-2.5 rounded-md text-sm font-medium border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
 78 |           >
 79 |             <FaBook className="mr-2"/> 管理题库
 80 |           </button>
 81 |         </div>
 82 |       </div>
 83 |     </div>
 84 |   );
 85 | 
 86 |   return (
 87 |     <div className="container mx-auto p-4 md:p-8">
 88 |       <header className="mb-10 text-center md:text-left">
 89 |         <h1 className="text-4xl font-bold text-gray-800 dark:text-white">我的题库</h1>
 90 |         <p className="mt-2 text-lg text-gray-600 dark:text-gray-400">选择一个题库开始您的学习之旅，或前往"题库管理"页面创建和编辑题库。</p>
 91 |       </header>
 92 | 
 93 |       {questionBanks.length === 0 ? (
 94 |         <div className="text-center py-12">
 95 |           <p className="text-xl text-gray-500 dark:text-gray-400 mb-6">
 96 |             您还没有任何题库。
 97 |           </p>
 98 |           <Button 
 99 |             onClick={() => {
100 |               // 检测是否为开发环境
101 |               if (process.env.NODE_ENV === 'development') {
102 |                 // 开发环境使用Next.js路由
103 |                 router.push('/quiz/banks/manage');
104 |               } else {
105 |                 // 生产环境使用表单导航（适用于Electron静态导出）
106 |                 const form = document.createElement('form');
107 |                 form.method = 'GET';
108 |                 form.action = '/quiz/banks/manage/index.html';
109 |                 form.style.display = 'none';
110 |                 document.body.appendChild(form);
111 |                 form.submit();
112 |               }
113 |             }} 
114 |             className="bg-green-600 hover:bg-green-700"
115 |           >
116 |             <FaPlus className="mr-2" /> 前往创建新题库
117 |           </Button>
118 |         </div>
119 |       ) : (
120 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
121 |           {questionBanks.map(quizListItem)}
122 |         </div>
123 |       )}
124 |     </div>
125 |   );
126 | }


--------------------------------------------------------------------------------
/src/constants/ai.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * AI相关常量文件
  3 |  */
  4 | 
  5 | /**
  6 |  * 题库转换AI的系统提示词
  7 |  */
  8 | export const CONVERT_SYSTEM_PROMPT = `你是一个专业的题库转换助手。请将用户提供的文本精准地转换为结构化的题目数据。
  9 | 题目类型包括单选题、多选题、判断题、简答题、填空题。请严格按照以下格式输出，每道题之间用空行分隔：
 10 | 
 11 | 单选题：题目内容
 12 | A. 选项1
 13 | B. 选项2
 14 | C. 选项3
 15 | D. 选项4
 16 | 答案：A
 17 | 解析：可选的解析内容
 18 | 
 19 | 多选题：题目内容
 20 | A. 选项1
 21 | B. 选项2
 22 | C. 选项3
 23 | D. 选项4
 24 | 答案：A, B
 25 | 解析：可选的解析内容
 26 | 
 27 | 判断题：题目内容
 28 | 答案：对 或 错 (或 True/False, 正确/错误)
 29 | 解析：可选的解析内容
 30 | 
 31 | 简答题：题目内容
 32 | 答案：参考答案
 33 | 解析：可选的解析内容
 34 | 
 35 | 填空题：题目内容（使用____表示填空处）
 36 | 答案：参考答案（如有多个可接受的答案，用分号分隔，如：答案1;答案2）
 37 | 解析：可选的解析内容`; 
 38 | 
 39 | /**
 40 |  * 错题解析的AI提示词
 41 |  */
 42 | export const EXPLANATION_PROMPT = `你是一位专业的教育助手，请为以下题目提供一个详细的解析。不要复述题目内容，直接提供解析。
 43 | 
 44 | 请包含以下内容：
 45 | 1. 正确答案的详细解释
 46 | 2. 相关知识点的分析
 47 | 3. 用户错误的原因（如适用）
 48 | 4. 避免类似错误的方法和记忆技巧
 49 | 
 50 | 以Markdown格式输出你的解析，使用适当的标题、列表和强调来组织内容。如有需要，可以使用公式、表格等Markdown元素增强说明。`;
 51 | 
 52 | /**
 53 |  * 生成相似题目的AI系统提示词
 54 |  */
 55 | export const SIMILAR_QUESTIONS_PROMPT = `你是一位专业的出题专家，我将提供一些题目，请你基于这些题目的知识点和考察内容生成相似的新题目，保持难度和风格一致，但避免简单地修改原题。
 56 | 
 57 | 对于每个输入的题目，请生成以下类型的相似题目（每种类型至少一个）：
 58 | 1. 单选题（确保有一个正确答案）
 59 | 2. 多选题（至少两个正确答案）
 60 | 3. 判断题（答案为"true"或"false"）
 61 | 4. 填空题（使用下划线"___"表示填空处，答案是填入空白处的文本数组）
 62 | 5. 简答题（提供简明的参考答案）
 63 | 
 64 | 针对每道生成的题目，必须包含以下字段：
 65 | - content: 题目内容，确保清晰完整
 66 | - type: 题目类型，必须是以下之一: "single-choice", "multiple-choice", "true-false", "fill-in-blank", "short-answer"
 67 | - options: 选项数组（对单选题和多选题），每个选项包含id和content字段
 68 | - answer: 正确答案（对单选题为选项id，对多选题为选项id数组，对判断题为"true"或"false"，对填空题为字符串数组，对简答题为字符串）
 69 | - explanation: 简要解析
 70 | - tags: 题目标签，与原题的标签保持一致
 71 | 
 72 | 请将所有生成的题目按JSON格式输出，形如：
 73 | [
 74 |   {
 75 |     "content": "题目内容",
 76 |     "type": "single-choice",
 77 |     "options": [{"id": "opt1", "content": "选项1"}, {"id": "opt2", "content": "选项2"}...],
 78 |     "answer": "opt1",
 79 |     "explanation": "解析内容",
 80 |     "tags": ["标签1", "标签2"]
 81 |   },
 82 |   ...
 83 | ]
 84 | 
 85 | 确保生成的题目多样化，涵盖输入题目涉及的所有知识点，但避免内容过于重复或简单替换词语。优先创建能够深入测试学生理解程度的题目。`;
 86 | 
 87 | /**
 88 |  * 直接调用AI API的函数
 89 |  * 支持流式响应和普通响应
 90 |  */
 91 | export const callAI = async (
 92 |   provider: 'deepseek' | 'alibaba',
 93 |   messages: { role: string; content: string }[],
 94 |   apiKey: string,
 95 |   baseUrl?: string,
 96 |   streaming: boolean = false,
 97 |   onStreamChunk?: (chunk: string) => void
 98 | ) => {
 99 |   try {
100 |     // 基本请求参数
101 |     const requestOptions: RequestInit = {
102 |       method: 'POST',
103 |       headers: {
104 |         'Content-Type': 'application/json',
105 |       },
106 |     };
107 | 
108 |     let endpoint;
109 |     let requestBody;
110 | 
111 |     if (provider === 'deepseek') {
112 |       endpoint = `${baseUrl || 'https://api.deepseek.com'}/v1/chat/completions`;
113 |       requestBody = {
114 |         model: 'deepseek-chat',
115 |         messages,
116 |         stream: streaming,
117 |       };
118 |       requestOptions.headers = {
119 |         ...requestOptions.headers,
120 |         'Authorization': `Bearer ${apiKey}`
121 |       };
122 |     } else if (provider === 'alibaba') {
123 |       endpoint = "https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions";
124 |       requestBody = {
125 |         model: "qwen-turbo",
126 |         messages,
127 |         stream: streaming,
128 |       };
129 |       requestOptions.headers = {
130 |         ...requestOptions.headers,
131 |         'Authorization': `Bearer ${apiKey}`
132 |       };
133 |     } else {
134 |       throw new Error('不支持的AI提供商');
135 |     }
136 | 
137 |     requestOptions.body = JSON.stringify(requestBody);
138 | 
139 |     if (streaming && onStreamChunk) {
140 |       // 流式处理
141 |       const response = await fetch(endpoint, requestOptions);
142 | 
143 |       if (!response.ok) {
144 |         const errorData = await response.json();
145 |         throw new Error(errorData.error?.message || `API请求失败，状态码: ${response.status}`);
146 |       }
147 | 
148 |       if (!response.body) {
149 |         throw new Error('响应没有包含可读流');
150 |       }
151 | 
152 |       const reader = response.body.getReader();
153 |       const decoder = new TextDecoder();
154 |       let partialLine = '';
155 |       let completeResponse = '';
156 | 
157 |       while (true) {
158 |         const { done, value } = await reader.read();
159 |         if (done) break;
160 | 
161 |         // 解码收到的块
162 |         const chunk = decoder.decode(value, { stream: true });
163 |         partialLine += chunk;
164 | 
165 |         // 逐行处理数据
166 |         let lines = partialLine.split('\n');
167 |         partialLine = lines.pop() || '';
168 | 
169 |         for (const line of lines) {
170 |           if (line.startsWith('data: ') && line !== 'data: [DONE]') {
171 |             try {
172 |               const data = JSON.parse(line.slice(6));
173 |               const content = data.choices?.[0]?.delta?.content || '';
174 |               if (content) {
175 |                 completeResponse += content;
176 |                 onStreamChunk(content);
177 |               }
178 |             } catch (e) {
179 |               console.error('解析流数据时出错:', e);
180 |             }
181 |           }
182 |         }
183 |       }
184 | 
185 |       // 处理可能的最后一行
186 |       if (partialLine && partialLine.startsWith('data: ') && partialLine !== 'data: [DONE]') {
187 |         try {
188 |           const data = JSON.parse(partialLine.slice(6));
189 |           const content = data.choices?.[0]?.delta?.content || '';
190 |           if (content) {
191 |             completeResponse += content;
192 |             onStreamChunk(content);
193 |           }
194 |         } catch (e) {
195 |           console.error('解析最后一块流数据时出错:', e);
196 |         }
197 |       }
198 | 
199 |       return completeResponse;
200 |     } else {
201 |       // 非流式处理
202 |       const response = await fetch(endpoint, requestOptions);
203 | 
204 |       if (!response.ok) {
205 |         const errorData = await response.json();
206 |         throw new Error(errorData.error?.message || `API请求失败，状态码: ${response.status}`);
207 |       }
208 | 
209 |       const data = await response.json();
210 |       return data.choices[0]?.message?.content || '';
211 |     }
212 |   } catch (error: any) {
213 |     console.error('AI API 调用错误:', error);
214 |     throw error;
215 |   }
216 | }; 


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Select({
 10 |   ...props
 11 | }: React.ComponentProps<typeof SelectPrimitive.Root>) {
 12 |   return <SelectPrimitive.Root data-slot="select" {...props} />
 13 | }
 14 | 
 15 | function SelectGroup({
 16 |   ...props
 17 | }: React.ComponentProps<typeof SelectPrimitive.Group>) {
 18 |   return <SelectPrimitive.Group data-slot="select-group" {...props} />
 19 | }
 20 | 
 21 | function SelectValue({
 22 |   ...props
 23 | }: React.ComponentProps<typeof SelectPrimitive.Value>) {
 24 |   return <SelectPrimitive.Value data-slot="select-value" {...props} />
 25 | }
 26 | 
 27 | function SelectTrigger({
 28 |   className,
 29 |   size = "default",
 30 |   children,
 31 |   ...props
 32 | }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
 33 |   size?: "sm" | "default"
 34 | }) {
 35 |   return (
 36 |     <SelectPrimitive.Trigger
 37 |       data-slot="select-trigger"
 38 |       data-size={size}
 39 |       className={cn(
 40 |         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 41 |         className
 42 |       )}
 43 |       {...props}
 44 |     >
 45 |       {children}
 46 |       <SelectPrimitive.Icon asChild>
 47 |         <ChevronDownIcon className="size-4 opacity-50" />
 48 |       </SelectPrimitive.Icon>
 49 |     </SelectPrimitive.Trigger>
 50 |   )
 51 | }
 52 | 
 53 | function SelectContent({
 54 |   className,
 55 |   children,
 56 |   position = "popper",
 57 |   ...props
 58 | }: React.ComponentProps<typeof SelectPrimitive.Content>) {
 59 |   return (
 60 |     <SelectPrimitive.Portal>
 61 |       <SelectPrimitive.Content
 62 |         data-slot="select-content"
 63 |         className={cn(
 64 |           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
 65 |           position === "popper" &&
 66 |             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 67 |           className
 68 |         )}
 69 |         position={position}
 70 |         {...props}
 71 |       >
 72 |         <SelectScrollUpButton />
 73 |         <SelectPrimitive.Viewport
 74 |           className={cn(
 75 |             "p-1",
 76 |             position === "popper" &&
 77 |               "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
 78 |           )}
 79 |         >
 80 |           {children}
 81 |         </SelectPrimitive.Viewport>
 82 |         <SelectScrollDownButton />
 83 |       </SelectPrimitive.Content>
 84 |     </SelectPrimitive.Portal>
 85 |   )
 86 | }
 87 | 
 88 | function SelectLabel({
 89 |   className,
 90 |   ...props
 91 | }: React.ComponentProps<typeof SelectPrimitive.Label>) {
 92 |   return (
 93 |     <SelectPrimitive.Label
 94 |       data-slot="select-label"
 95 |       className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
 96 |       {...props}
 97 |     />
 98 |   )
 99 | }
100 | 
101 | function SelectItem({
102 |   className,
103 |   children,
104 |   ...props
105 | }: React.ComponentProps<typeof SelectPrimitive.Item>) {
106 |   return (
107 |     <SelectPrimitive.Item
108 |       data-slot="select-item"
109 |       className={cn(
110 |         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
111 |         className
112 |       )}
113 |       {...props}
114 |     >
115 |       <span className="absolute right-2 flex size-3.5 items-center justify-center">
116 |         <SelectPrimitive.ItemIndicator>
117 |           <CheckIcon className="size-4" />
118 |         </SelectPrimitive.ItemIndicator>
119 |       </span>
120 |       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
121 |     </SelectPrimitive.Item>
122 |   )
123 | }
124 | 
125 | function SelectSeparator({
126 |   className,
127 |   ...props
128 | }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
129 |   return (
130 |     <SelectPrimitive.Separator
131 |       data-slot="select-separator"
132 |       className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
133 |       {...props}
134 |     />
135 |   )
136 | }
137 | 
138 | function SelectScrollUpButton({
139 |   className,
140 |   ...props
141 | }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
142 |   return (
143 |     <SelectPrimitive.ScrollUpButton
144 |       data-slot="select-scroll-up-button"
145 |       className={cn(
146 |         "flex cursor-default items-center justify-center py-1",
147 |         className
148 |       )}
149 |       {...props}
150 |     >
151 |       <ChevronUpIcon className="size-4" />
152 |     </SelectPrimitive.ScrollUpButton>
153 |   )
154 | }
155 | 
156 | function SelectScrollDownButton({
157 |   className,
158 |   ...props
159 | }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
160 |   return (
161 |     <SelectPrimitive.ScrollDownButton
162 |       data-slot="select-scroll-down-button"
163 |       className={cn(
164 |         "flex cursor-default items-center justify-center py-1",
165 |         className
166 |       )}
167 |       {...props}
168 |     >
169 |       <ChevronDownIcon className="size-4" />
170 |     </SelectPrimitive.ScrollDownButton>
171 |   )
172 | }
173 | 
174 | export {
175 |   Select,
176 |   SelectContent,
177 |   SelectGroup,
178 |   SelectItem,
179 |   SelectLabel,
180 |   SelectScrollDownButton,
181 |   SelectScrollUpButton,
182 |   SelectSeparator,
183 |   SelectTrigger,
184 |   SelectValue,
185 | }
186 | 


--------------------------------------------------------------------------------
/src/app/quiz/layout.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import React, { useState, useEffect } from 'react';
  4 | import Link from 'next/link';
  5 | import { usePathname } from 'next/navigation';
  6 | import { 
  7 |   FaBook, 
  8 |   FaPencilAlt, 
  9 |   FaExchangeAlt, 
 10 |   FaExclamationTriangle, 
 11 |   FaCog, 
 12 |   FaListUl, 
 13 |   FaBars, 
 14 |   FaTimes, 
 15 |   FaChevronLeft,
 16 |   FaChevronRight,
 17 |   FaRandom,
 18 |   FaSyncAlt
 19 | } from 'react-icons/fa';
 20 | import ThemeSwitcher from '@/components/ThemeSwitcher';
 21 | import { cn } from '@/lib/utils';
 22 | 
 23 | // 导航项定义
 24 | const navItems = [
 25 |   { href: '/quiz', icon: <FaListUl />, label: '刷题，启动！' },
 26 |   { href: '/quiz/import-export', icon: <FaExchangeAlt />, label: '导入/导出' },
 27 |   { href: '/quiz/review', icon: <FaExclamationTriangle />, label: '错题本' },
 28 |   { href: '/quiz/convert', icon: <FaSyncAlt />, label: '题目转换' },
 29 |   { href: '/quiz/settings', icon: <FaCog />, label: '应用设置' },
 30 | ];
 31 | 
 32 | /**
 33 |  * 刷题系统的布局组件
 34 |  * 支持响应式设计，侧边栏可收起，移动端底部导航
 35 |  */
 36 | export default function QuizLayout({ children }: { children: React.ReactNode }) {
 37 |   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 38 |   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 39 |   const [isMobile, setIsMobile] = useState(false);
 40 |   const pathname = usePathname();
 41 | 
 42 |   // 检测屏幕尺寸
 43 |   useEffect(() => {
 44 |     const checkIsMobile = () => {
 45 |       setIsMobile(window.innerWidth < 768);
 46 |       if (window.innerWidth < 768) {
 47 |         setSidebarCollapsed(true);
 48 |       }
 49 |     };
 50 | 
 51 |     // 初始检查
 52 |     checkIsMobile();
 53 | 
 54 |     // 监听窗口大小变化
 55 |     window.addEventListener('resize', checkIsMobile);
 56 |     
 57 |     // 清理
 58 |     return () => window.removeEventListener('resize', checkIsMobile);
 59 |   }, []);
 60 | 
 61 |   // 切换侧边栏状态
 62 |   const toggleSidebar = () => {
 63 |     setSidebarCollapsed(!sidebarCollapsed);
 64 |   };
 65 | 
 66 |   // 切换移动菜单
 67 |   const toggleMobileMenu = () => {
 68 |     setMobileMenuOpen(!mobileMenuOpen);
 69 |   };
 70 | 
 71 |   return (
 72 |     <div className="flex flex-col md:flex-row min-h-screen bg-gray-50 dark:bg-gray-900">
 73 |       {/* 移动端顶部导航栏 */}
 74 |       <div className="md:hidden flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md">
 75 |         <div className="flex items-center">
 76 |           <button 
 77 |             onClick={toggleMobileMenu} 
 78 |             className="mr-3 text-gray-700 dark:text-gray-200"
 79 |             aria-label="打开菜单"
 80 |           >
 81 |             {mobileMenuOpen ? <FaTimes size={20} /> : <FaBars size={20} />}
 82 |           </button>
 83 |           <h1 className="text-xl font-bold text-gray-800 dark:text-white">刷题系统</h1>
 84 |         </div>
 85 |         <ThemeSwitcher />
 86 |       </div>
 87 | 
 88 |       {/* 侧边栏 - 桌面版 */}
 89 |       <aside 
 90 |         className={cn(
 91 |           "fixed md:static inset-y-0 left-0 z-30 bg-white dark:bg-gray-800 shadow-md transition-all duration-300",
 92 |           sidebarCollapsed ? "w-16" : "w-64",
 93 |           isMobile && "hidden"
 94 |         )}
 95 |       >
 96 |         <div className={cn(
 97 |           "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center",
 98 |           sidebarCollapsed ? "justify-center" : "justify-between"
 99 |         )}>
100 |           {!sidebarCollapsed && <h1 className="text-xl font-bold text-gray-800 dark:text-white">刷题系统</h1>}
101 |           <div className="flex items-center">
102 |             {!sidebarCollapsed && <ThemeSwitcher />}
103 |             <button 
104 |               onClick={toggleSidebar} 
105 |               className={cn(
106 |                 "ml-2 p-1 rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
107 |                 sidebarCollapsed && "mx-auto"
108 |               )}
109 |               aria-label={sidebarCollapsed ? "展开侧边栏" : "收起侧边栏"}
110 |             >
111 |               {sidebarCollapsed ? <FaChevronRight /> : <FaChevronLeft />}
112 |             </button>
113 |           </div>
114 |         </div>
115 |         <nav className="p-2">
116 |           <ul className="space-y-2">
117 |             {navItems.map((item) => (
118 |               <li key={item.href}>
119 |                 <Link 
120 |                   href={item.href} 
121 |                   className={cn(
122 |                     "flex items-center px-4 py-2 rounded-md transition-colors",
123 |                     "hover:bg-gray-100 dark:hover:bg-gray-700",
124 |                     pathname === item.href 
125 |                       ? "bg-blue-50 text-blue-600 dark:bg-gray-700 dark:text-blue-400" 
126 |                       : "text-gray-700 dark:text-gray-200",
127 |                     sidebarCollapsed && "justify-center"
128 |                   )}
129 |                 >
130 |                   <span className={sidebarCollapsed ? "text-lg" : "mr-3"}>{item.icon}</span>
131 |                   {!sidebarCollapsed && <span>{item.label}</span>}
132 |                 </Link>
133 |               </li>
134 |             ))}
135 |           </ul>
136 |         </nav>
137 |       </aside>
138 |       
139 |       {/* 移动端菜单 - 侧滑抽屉 */}
140 |       {isMobile && mobileMenuOpen && (
141 |         <>
142 |           <div 
143 |             className="fixed inset-0 bg-black bg-opacity-50 z-40"
144 |             onClick={toggleMobileMenu}
145 |           />
146 |           <aside className="fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-lg">
147 |             <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
148 |               <h1 className="text-xl font-bold text-gray-800 dark:text-white">刷题系统</h1>
149 |               <button 
150 |                 onClick={toggleMobileMenu}
151 |                 className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
152 |                 aria-label="关闭菜单"
153 |               >
154 |                 <FaTimes size={20} />
155 |               </button>
156 |             </div>
157 |             <nav className="p-4">
158 |               <ul className="space-y-2">
159 |                 {navItems.map((item) => (
160 |                   <li key={item.href}>
161 |                     <Link 
162 |                       href={item.href} 
163 |                       className={cn(
164 |                         "flex items-center px-4 py-3 rounded-md",
165 |                         "hover:bg-gray-100 dark:hover:bg-gray-700",
166 |                         pathname === item.href 
167 |                           ? "bg-blue-50 text-blue-600 dark:bg-gray-700 dark:text-blue-400" 
168 |                           : "text-gray-700 dark:text-gray-200"
169 |                       )}
170 |                       onClick={toggleMobileMenu}
171 |                     >
172 |                       <span className="mr-3 text-lg">{item.icon}</span>
173 |                       <span>{item.label}</span>
174 |                     </Link>
175 |                   </li>
176 |                 ))}
177 |               </ul>
178 |             </nav>
179 |           </aside>
180 |         </>
181 |       )}
182 |       
183 |       {/* 主内容区 */}
184 |       <main className={cn(
185 |         "flex-1 p-4 md:p-8 dark:text-gray-100 transition-all duration-300",
186 |         !isMobile && sidebarCollapsed && "md:ml-16"
187 |       )}>
188 |         {children}
189 |       </main>
190 | 
191 |       {/* 移动端底部导航 */}
192 |       {isMobile && (
193 |         <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg z-30">
194 |           <div className="flex justify-around">
195 |             {navItems.map((item) => (
196 |               <Link 
197 |                 key={item.href}
198 |                 href={item.href} 
199 |                 className={cn(
200 |                   "flex flex-col items-center py-3 px-2",
201 |                   pathname === item.href 
202 |                     ? "text-blue-600 dark:text-blue-400" 
203 |                     : "text-gray-600 dark:text-gray-400"
204 |                 )}
205 |               >
206 |                 <span className="text-lg">{item.icon}</span>
207 |                 <span className="text-xs mt-1">{item.label}</span>
208 |               </Link>
209 |             ))}
210 |           </div>
211 |         </nav>
212 |       )}
213 |     </div>
214 |   );
215 | } 


--------------------------------------------------------------------------------
/src/utils/quiz.ts:
--------------------------------------------------------------------------------
  1 | import { v4 as uuidv4 } from 'uuid';
  2 | import Papa from 'papaparse';
  3 | import * as XLSX from 'xlsx';
  4 | import { Question, QuestionBank, QuestionType } from '@/types/quiz';
  5 | 
  6 | /**
  7 |  * 生成唯一ID
  8 |  */
  9 | export const generateId = (): string => uuidv4();
 10 | 
 11 | /**
 12 |  * 创建空题库
 13 |  */
 14 | export const createEmptyBank = (name: string, description?: string): QuestionBank => {
 15 |   const now = Date.now();
 16 |   return {
 17 |     id: generateId(),
 18 |     name,
 19 |     description,
 20 |     questions: [],
 21 |     createdAt: now,
 22 |     updatedAt: now
 23 |   };
 24 | };
 25 | 
 26 | /**
 27 |  * 创建新题目
 28 |  */
 29 | export const createQuestion = (
 30 |   type: QuestionType,
 31 |   content: string,
 32 |   options: { content: string }[] = [],
 33 |   answer: string | string[] = '',
 34 |   explanation?: string,
 35 |   tags: string[] = []
 36 | ): Question => {
 37 |   const now = Date.now();
 38 |   return {
 39 |     id: generateId(),
 40 |     type,
 41 |     content,
 42 |     options: options.map(opt => ({ id: generateId(), content: opt.content })),
 43 |     answer,
 44 |     explanation,
 45 |     tags,
 46 |     createdAt: now,
 47 |     updatedAt: now
 48 |   };
 49 | };
 50 | 
 51 | /**
 52 |  * 导出题库为CSV
 53 |  */
 54 | export const exportToCSV = (bank: QuestionBank): string => {
 55 |   const rows = bank.questions.map(q => {
 56 |     // 格式化答案
 57 |     let formattedAnswer = q.answer;
 58 |     if (q.type === QuestionType.MultipleChoice && Array.isArray(q.answer)) {
 59 |       // 对于多选题，将选项ID数组转换为逗号分隔的字符串
 60 |       formattedAnswer = q.answer.join(',');
 61 |     } else if (q.type === QuestionType.TrueFalse && typeof q.answer === 'string') {
 62 |       // 确保判断题答案是小写的true/false
 63 |       formattedAnswer = q.answer.toLowerCase();
 64 |     }
 65 | 
 66 |     const baseRow = {
 67 |       type: q.type,
 68 |       content: q.content,
 69 |       answer: formattedAnswer,
 70 |       explanation: q.explanation || '',
 71 |       tags: q.tags?.join(',') || ''
 72 |     };
 73 |     
 74 |     // 为选择题添加选项
 75 |     if (q.options && q.options.length > 0) {
 76 |       const optionsObj = q.options.reduce((acc, opt, index) => {
 77 |         const optKey = `option${String.fromCharCode(65 + index)}`; // 选项A, B, C...
 78 |         return { ...acc, [optKey]: opt.content };
 79 |       }, {});
 80 |    
 81 |       return { ...baseRow, ...optionsObj };
 82 |     }
 83 |     
 84 |     return baseRow;
 85 |   });
 86 |   
 87 |   return Papa.unparse(rows);
 88 | };
 89 | 
 90 | /**
 91 |  * 导出题库为Excel
 92 |  */
 93 | export const exportToExcel = (bank: QuestionBank): Blob => {
 94 |   const rows = bank.questions.map(q => {
 95 |     // 格式化答案
 96 |     let formattedAnswer = q.answer;
 97 |     if (q.type === QuestionType.MultipleChoice && Array.isArray(q.answer)) {
 98 |       // 对于多选题，将选项ID数组转换为逗号分隔的字符串
 99 |       formattedAnswer = q.answer.join(',');
100 |     } else if (q.type === QuestionType.TrueFalse && typeof q.answer === 'string') {
101 |       // 确保判断题答案是小写的true/false
102 |       formattedAnswer = q.answer.toLowerCase();
103 |     }
104 | 
105 |     const baseRow: Record<string, any> = {
106 |       type: q.type,
107 |       content: q.content,
108 |       answer: formattedAnswer,
109 |       explanation: q.explanation || '',
110 |       tags: q.tags?.join(',') || ''
111 |     };
112 |     
113 |     // 为选择题添加选项
114 |     if (q.options && q.options.length > 0) {
115 |       q.options.forEach((opt, index) => {
116 |         const optKey = `option${String.fromCharCode(65 + index)}`; // 选项A, B, C...
117 |         baseRow[optKey] = opt.content;
118 |       });
119 |     }
120 |     
121 |     return baseRow;
122 |   });
123 |   
124 |   const worksheet = XLSX.utils.json_to_sheet(rows);
125 |   const workbook = XLSX.utils.book_new();
126 |   XLSX.utils.book_append_sheet(workbook, worksheet, bank.name);
127 |   
128 |   const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
129 |   return new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
130 | };
131 | 
132 | /**
133 |  * 从CSV导入题库
134 |  */
135 | export const importFromCSV = (csvString: string, bankName: string): QuestionBank => {
136 |   const parsed = Papa.parse(csvString, { header: true });
137 |   const questions: Question[] = parsed.data
138 |     .filter((row: any) => row.content && row.type) // 过滤无效行
139 |     .map((row: any) => {
140 |       const type = row.type as QuestionType;
141 |       const content = row.content;
142 |       
143 |       // 处理不同类型题目的答案
144 |       let answer: string | string[] = row.answer;
145 |       if (type === QuestionType.MultipleChoice) {
146 |         // 处理多选题答案，可能以逗号分隔的字符串或带有双引号的格式
147 |         answer = typeof row.answer === 'string' 
148 |           ? row.answer.replace(/["']/g, '').split(/\s*,\s*/).filter(Boolean)
149 |           : row.answer;
150 |       } else if (type === QuestionType.TrueFalse) {
151 |         // 确保判断题答案为小写的 'true' 或 'false'
152 |         if (typeof row.answer === 'string') {
153 |           const answerText = row.answer.toString().trim().toLowerCase();
154 |           // 处理各种可能的表示形式
155 |           if (['true', 't', '1', '正确', '对', 'yes', 'y', '√'].includes(answerText)) {
156 |             answer = 'true';
157 |           } else if (['false', 'f', '0', '错误', '错', 'no', 'n', '×'].includes(answerText)) {
158 |             answer = 'false';
159 |           } else {
160 |             answer = answerText; // 保留原值
161 |           }
162 |         }
163 |       }
164 |       
165 |       // 查找所有选项 (optionA, optionB, ...)
166 |       const optionKeys = Object.keys(row).filter(key => /^option[A-Z]$/.test(key));
167 |       const options = optionKeys
168 |         .filter(key => row[key]?.trim())
169 |         .map(key => ({
170 |           id: key.replace('option', ''), // 使用选项字母作为ID
171 |           content: row[key]
172 |         }));
173 |       
174 |       const tags = row.tags ? row.tags.split(',').map((tag: string) => tag.trim()) : [];
175 |       
176 |       const now = Date.now();
177 |       return {
178 |         id: generateId(),
179 |         type,
180 |         content,
181 |         options: options.length > 0 ? options : undefined,
182 |         answer,
183 |         explanation: row.explanation || undefined,
184 |         tags: tags.length > 0 ? tags : undefined,
185 |         createdAt: now,
186 |         updatedAt: now
187 |       };
188 |     });
189 |   
190 |   const now = Date.now();
191 |   return {
192 |     id: generateId(),
193 |     name: bankName,
194 |     questions,
195 |     createdAt: now,
196 |     updatedAt: now
197 |   };
198 | };
199 | 
200 | /**
201 |  * 从Excel导入题库
202 |  */
203 | export const importFromExcel = (buffer: ArrayBuffer, bankName: string): QuestionBank => {
204 |   const workbook = XLSX.read(buffer, { type: 'array' });
205 |   const sheetName = workbook.SheetNames[0];
206 |   const worksheet = workbook.Sheets[sheetName];
207 |   const data = XLSX.utils.sheet_to_json(worksheet);
208 |   
209 |   const questions: Question[] = data
210 |     .filter((row: any) => row.content && row.type)
211 |     .map((row: any) => {
212 |       const type = row.type as QuestionType;
213 |       const content = row.content;
214 |       
215 |       // 处理不同类型题目的答案
216 |       let answer: string | string[] = row.answer;
217 |       if (type === QuestionType.MultipleChoice) {
218 |         // 处理多选题答案，可能以逗号分隔的字符串或带有双引号的格式
219 |         answer = typeof row.answer === 'string' 
220 |           ? row.answer.replace(/["']/g, '').split(/\s*,\s*/).filter(Boolean)
221 |           : row.answer;
222 |       } else if (type === QuestionType.TrueFalse) {
223 |         // 确保判断题答案为小写的 'true' 或 'false'
224 |         if (typeof row.answer === 'string') {
225 |           const answerText = row.answer.toString().trim().toLowerCase();
226 |           // 处理各种可能的表示形式
227 |           if (['true', 't', '1', '正确', '对', 'yes', 'y', '√'].includes(answerText)) {
228 |             answer = 'true';
229 |           } else if (['false', 'f', '0', '错误', '错', 'no', 'n', '×'].includes(answerText)) {
230 |             answer = 'false';
231 |           } else {
232 |             answer = answerText; // 保留原值
233 |           }
234 |         }
235 |       }
236 |       
237 |       // 查找所有选项 (optionA, optionB, ...)
238 |       const optionKeys = Object.keys(row).filter(key => /^option[A-Z]$/.test(key));
239 |       const options = optionKeys
240 |         .filter(key => row[key]?.trim())
241 |         .map(key => ({
242 |           id: key.replace('option', ''), // 使用选项字母作为ID
243 |           content: row[key]
244 |         }));
245 |       
246 |       const tags = row.tags ? row.tags.split(',').map((tag: string) => tag.trim()) : [];
247 |       
248 |       const now = Date.now();
249 |       return {
250 |         id: generateId(),
251 |         type,
252 |         content,
253 |         options: options.length > 0 ? options : undefined,
254 |         answer,
255 |         explanation: row.explanation || undefined,
256 |         tags: tags.length > 0 ? tags : undefined,
257 |         createdAt: now,
258 |         updatedAt: now
259 |       };
260 |     });
261 |   
262 |   const now = Date.now();
263 |   return {
264 |     id: generateId(),
265 |     name: bankName,
266 |     questions,
267 |     createdAt: now,
268 |     updatedAt: now
269 |   };
270 | }; 


--------------------------------------------------------------------------------
/src/components/quiz/WrongQuestionItem.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { FaCheck, FaTimes } from 'react-icons/fa';
  4 | import { Question, QuestionType, QuestionOption } from '@/types/quiz';
  5 | import { QUESTION_TYPE_NAMES, getTagColor } from '@/constants/quiz';
  6 | import ReactMarkdown from 'react-markdown';
  7 | import remarkGfm from 'remark-gfm';
  8 | import rehypeRaw from 'rehype-raw';
  9 | import rehypeSanitize from 'rehype-sanitize';
 10 | import type { Components } from 'react-markdown';
 11 | 
 12 | // 定义错题项的扩展类型
 13 | export interface WrongQuestionDisplay extends Question {
 14 |   bankId: string;
 15 |   bankName: string;
 16 |   userAnswer: string | string[];
 17 |   answeredAt: number;
 18 | }
 19 | 
 20 | interface WrongQuestionItemProps {
 21 |   question: WrongQuestionDisplay | null; // 使用更精确的类型
 22 |   formatDate: (timestamp: number) => string;
 23 |   // 新增props
 24 |   isSelected?: boolean;
 25 |   onSelect?: (question: WrongQuestionDisplay) => void;
 26 |   isGeneratingExplanation?: boolean;
 27 | }
 28 | 
 29 | /**
 30 |  * 移除 Markdown 字符串开头和结尾的完整代码块标记。
 31 |  * 例如，将 '```markdown\nHello\n```' 转换为 'Hello'。
 32 |  * 确保始终返回一个字符串。
 33 |  */
 34 | function stripMarkdownCodeFences(markdown: string): string {
 35 |   if (typeof markdown !== 'string') {
 36 |     return '';
 37 |   }
 38 |   let newMarkdown = markdown.trim();
 39 |   const fenceRegex = /^```(?:[a-zA-Z0-9_\-+.]*\r?\n)?([\s\S]*?)\r?\n```$/;
 40 |   const match = newMarkdown.match(fenceRegex);
 41 |   if (match && typeof match[1] === 'string') {
 42 |     newMarkdown = match[1].trim(); 
 43 |   } else {
 44 |     newMarkdown = markdown.trim(); 
 45 |   }
 46 |   return newMarkdown;
 47 | }
 48 | 
 49 | /**
 50 |  * 为流式输出准备Markdown内容。
 51 |  * 如果内容以未闭合的```开头，则尝试移除该开头的标记部分。
 52 |  * 如果内容是一个已闭合的短代码块，则剥离它。
 53 |  */
 54 | function stripOpeningFenceForStream(markdown: string): string {
 55 |   if (typeof markdown !== 'string') {
 56 |     return '';
 57 |   }
 58 |   let newMarkdown = markdown.trimStart(); // 保留行尾空格，因为可能还在构建中
 59 | 
 60 |   const fullFenceRegex = /^```(?:[a-zA-Z0-9_\-+.]*\r?\n)?([\s\S]*?)\r?\n```$/;
 61 |   const fullMatch = newMarkdown.match(fullFenceRegex);
 62 |   if (fullMatch && typeof fullMatch[1] === 'string') {
 63 |     return fullMatch[1].trim(); 
 64 |   }
 65 | 
 66 |   const openingFenceStartRegex = /^```(?:[a-zA-Z0-9_\-+.]*)?(\r?\n)?/;
 67 |   const openingMatch = newMarkdown.match(openingFenceStartRegex);
 68 | 
 69 |   if (openingMatch) {
 70 |     let contentAfterOpeningFence = newMarkdown.substring(openingMatch[0].length);
 71 |     if (contentAfterOpeningFence.trim() === '' && !openingMatch[1]) {
 72 |       return ""; // AI仅发送了 ```lang 这样的起始标记，后面还没内容或换行
 73 |     }
 74 |     return contentAfterOpeningFence.trimStart();
 75 |   }
 76 | 
 77 |   return newMarkdown; // 如果不以```开头，或者不是完整代码块，直接返回处理过的字符串
 78 | }
 79 | 
 80 | export default function WrongQuestionItem({ 
 81 |   question: q, 
 82 |   formatDate, 
 83 |   isSelected = false, 
 84 |   onSelect, 
 85 |   isGeneratingExplanation = false 
 86 | }: WrongQuestionItemProps) {
 87 |   if (!q) return null;
 88 |   
 89 |   const rawExplanation = q.explanation || '';
 90 |   let markdownToDisplay;
 91 | 
 92 |   if (isGeneratingExplanation) {
 93 |     markdownToDisplay = stripOpeningFenceForStream(rawExplanation);
 94 |   } else {
 95 |     markdownToDisplay = stripMarkdownCodeFences(rawExplanation);
 96 |   }
 97 | 
 98 |   const customComponents: Components = {
 99 |     a: (props) => (
100 |       <a 
101 |         {...props} 
102 |         target="_blank" 
103 |         rel="noopener noreferrer"
104 |         className="text-blue-600 hover:underline"
105 |       />
106 |     ),
107 |     // code: (props) => { // 仍然注释掉，以确保不是自定义代码组件引起的问题
108 |     //   const isInline = !props.className || !props.className.includes('language-');
109 |     //   const codeClass = isInline 
110 |     //     ? 'bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm' 
111 |     //     : 'block bg-gray-100 dark:bg-gray-800 p-2 rounded text-sm overflow-x-auto';
112 |     //   return <code {...props} className={`${codeClass} ${props.className || ''}`} />;
113 |     // },
114 |     // table: (props) => ( // Temporarily commented out for debugging table rendering
115 |     //   <div className="overflow-x-auto">
116 |     //     <table className="min-w-full border border-gray-300 dark:border-gray-700" {...props} />
117 |     //   </div>
118 |     // ),
119 |     // th: (props) => ( // Temporarily commented out for debugging table rendering
120 |     //   <th className="bg-gray-100 dark:bg-gray-800 px-3 py-2 text-left font-semibold border border-gray-300 dark:border-gray-700" {...props} />
121 |     // ),
122 |     // td: (props) => ( // Temporarily commented out for debugging table rendering
123 |     //   <td className="px-3 py-2 border border-gray-300 dark:border-gray-700" {...props} />
124 |     // )
125 |   };
126 | 
127 |   return (
128 |     <div className={`bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md ${isSelected ? 'border-2 border-blue-500' : ''} ${isGeneratingExplanation ? 'opacity-70' : ''}`}>
129 |       <div className="flex justify-between items-start mb-3">
130 |         <div className="flex items-center text-sm text-gray-500 dark:text-gray-400 flex-wrap gap-2">
131 |           {onSelect && (
132 |             <div 
133 |               className="flex items-center mr-2 cursor-pointer" 
134 |               onClick={(e) => {
135 |                 e.stopPropagation();
136 |                 if (q) onSelect(q);
137 |               }}
138 |             >
139 |               <div className={`w-5 h-5 border rounded flex items-center justify-center ${isSelected ? 'bg-blue-500 border-blue-500' : 'border-gray-400 dark:border-gray-500'}`}>
140 |                 {isSelected && <FaCheck className="text-white text-xs" />}
141 |               </div>
142 |             </div>
143 |           )}
144 |           <span className={`px-2 py-1 text-xs rounded-md ${getTagColor(QUESTION_TYPE_NAMES[q.type])}`}>
145 |             {QUESTION_TYPE_NAMES[q.type]}
146 |           </span>
147 |           <span className={`px-2 py-1 text-xs rounded-md ${getTagColor(q.bankName || '未知题库')}`}>
148 |             {q.bankName || '未知题库'}
149 |           </span>
150 |           {q.tags && q.tags.length > 0 && (
151 |             q.tags.map((tag: string) => (
152 |               <span
153 |                 key={tag}
154 |                 className={`px-1.5 py-0.5 text-xs rounded-full ${getTagColor(tag)}`}
155 |               >
156 |                 {tag}
157 |               </span>
158 |             ))
159 |           )}
160 |         </div>
161 |         <div className="text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">
162 |           答错时间: {formatDate(q.answeredAt)}
163 |         </div>
164 |       </div>
165 |       
166 |       <h3 className="text-lg font-medium text-gray-800 dark:text-white mb-3">
167 |         {q.content}
168 |       </h3>
169 |       
170 |       {q.options && q.options.length > 0 && (q.type === QuestionType.SingleChoice || q.type === QuestionType.MultipleChoice) && (
171 |         <div className="space-y-1 mb-3 text-sm">
172 |           {q.options.map((option: QuestionOption, idx: number) => {
173 |             const optionId = option.id; 
174 |             const isCorrectOption = Array.isArray(q.answer) 
175 |               ? q.answer.includes(optionId) 
176 |               : q.answer === optionId;
177 |             const isUserSelected = Array.isArray(q.userAnswer) 
178 |               ? q.userAnswer.includes(optionId) 
179 |               : q.userAnswer === optionId;
180 |             let optionStyle = 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300';
181 |             if (isCorrectOption) {
182 |               optionStyle = 'bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200';
183 |             }
184 |             if (isUserSelected && !isCorrectOption) {
185 |               optionStyle = 'bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-200';
186 |             }
187 |             if (isUserSelected && isCorrectOption) {
188 |               optionStyle = 'bg-green-200 dark:bg-green-700 text-green-900 dark:text-green-100 font-semibold';
189 |             }
190 |             return (
191 |               <div
192 |                 key={option.id}
193 |                 className={`p-2 rounded-md flex items-center ${optionStyle}`}
194 |               >
195 |                 <span className="font-medium mr-2">{String.fromCharCode(65 + idx)}.</span>
196 |                 <span>{option.content}</span>
197 |                 {isUserSelected && !isCorrectOption && (
198 |                   <FaTimes className="inline ml-auto text-red-500 dark:text-red-400" />
199 |                 )}
200 |                 {isCorrectOption && !isUserSelected && (
201 |                   <span className="ml-auto text-xs text-green-600 dark:text-green-400">(正确答案)</span>
202 |                 )}
203 |                  {isCorrectOption && isUserSelected && (
204 |                   <FaCheck className="inline ml-auto text-green-600 dark:text-green-400" />
205 |                 )}
206 |               </div>
207 |             );
208 |           })}
209 |         </div>
210 |       )}
211 |       
212 |       {q.type === QuestionType.TrueFalse && (
213 |         <div className="text-sm mb-3">
214 |           <p className={`${q.userAnswer === q.answer ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
215 |             您的答案: {q.userAnswer === 'true' ? '正确' : '错误'}
216 |           </p>
217 |           <p className="text-green-600 dark:text-green-400">
218 |             正确答案: {q.answer === 'true' ? '正确' : '错误'}
219 |           </p>
220 |         </div>
221 |       )}
222 | 
223 |       {q.type === QuestionType.ShortAnswer && (
224 |           <div className="text-sm mb-3">
225 |               <div className="p-2 rounded-md bg-red-50 dark:bg-red-900 text-red-700 dark:text-red-300 mb-1">
226 |                   <span className="font-medium">您的答案: </span>{Array.isArray(q.userAnswer) ? q.userAnswer.join(', ') : q.userAnswer || '未作答'}
227 |               </div>
228 |               <div className="p-2 rounded-md bg-green-50 dark:bg-green-900 text-green-700 dark:text-green-300">
229 |                   <span className="font-medium">正确答案: </span>{typeof q.answer === 'string' ? q.answer : Array.isArray(q.answer) ? q.answer.join(', ') : ''}
230 |               </div>
231 |           </div>
232 |       )}
233 |       
234 |       {markdownToDisplay && (
235 |         <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
236 |           <p className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">解析:</p>
237 |           <div className="text-sm text-gray-600 dark:text-gray-400 prose dark:prose-invert prose-sm max-w-none">
238 |             <ReactMarkdown 
239 |               key={`markdown-${q.id}-${markdownToDisplay.length}-${isGeneratingExplanation}`}
240 |               remarkPlugins={[remarkGfm]} 
241 |               rehypePlugins={[rehypeRaw, rehypeSanitize]}
242 |               components={customComponents} 
243 |             >
244 |               {markdownToDisplay}
245 |             </ReactMarkdown>
246 |           </div>
247 |         </div>
248 |       )}
249 |       
250 |       {isGeneratingExplanation && !markdownToDisplay && (
251 |         <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
252 |           <div className="flex items-center space-x-2">
253 |             <div className="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent"></div>
254 |             <p className="text-sm text-blue-600 dark:text-blue-400">正在生成AI解析...</p>
255 |           </div>
256 |         </div>
257 |       )}
258 |     </div>
259 |   );
260 | } 


--------------------------------------------------------------------------------
/src/app/quiz/settings/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useQuizStore, QuizSettings } from '@/store/quizStore';
  4 | import Image from 'next/image'; // Import Image component for logos
  5 | // FiChevronLeft is no longer needed
  6 | 
  7 | // Helper component for individual boolean settings
  8 | interface SettingRowProps {
  9 |   label: string;
 10 |   description?: string;
 11 |   settingKey: keyof Pick<QuizSettings, 'shufflePracticeOptions' | 'shuffleReviewOptions' | 'shufflePracticeQuestionOrder' | 'shuffleReviewQuestionOrder' | 'markMistakeAsCorrectedOnReviewSuccess'>;
 12 |   currentValue: boolean;
 13 |   onToggle: (key: SettingRowProps['settingKey'], value: boolean) => void;
 14 | }
 15 | 
 16 | const SettingRow: React.FC<SettingRowProps> = ({ 
 17 |   label, 
 18 |   description,
 19 |   settingKey,
 20 |   currentValue, 
 21 |   onToggle 
 22 | }) => {
 23 |   return (
 24 |     <div className="py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
 25 |       <div>
 26 |         <h3 className="text-lg font-medium text-gray-800 dark:text-gray-100">{label}</h3>
 27 |         {description && (
 28 |           <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{description}</p>
 29 |         )}
 30 |       </div>
 31 |       <button 
 32 |         onClick={() => onToggle(settingKey, !currentValue)}
 33 |         className={`px-4 py-2 rounded-full font-semibold text-sm transition-colors w-24 text-center
 34 |           ${currentValue ? 'bg-green-500 hover:bg-green-600 text-white' : 'bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-200'}
 35 |         `}
 36 |       >
 37 |         {currentValue ? '已启用' : '已禁用'}
 38 |       </button>
 39 |     </div>
 40 |   );
 41 | };
 42 | 
 43 | // Helper component for text input settings
 44 | interface TextInputSettingProps {
 45 |   label: string;
 46 |   settingKey: keyof Pick<QuizSettings, 'deepseekApiKey' | 'deepseekBaseUrl' | 'alibabaApiKey'>;
 47 |   currentValue: string;
 48 |   placeholder?: string;
 49 |   onUpdate: (key: TextInputSettingProps['settingKey'], value: string) => void;
 50 |   type?: string;
 51 | }
 52 | 
 53 | const TextInputSetting: React.FC<TextInputSettingProps> = ({ 
 54 |   label, 
 55 |   settingKey, 
 56 |   currentValue, 
 57 |   placeholder,
 58 |   onUpdate,
 59 |   type = 'text' 
 60 | }) => {
 61 |   return (
 62 |     <div className="py-4 border-b border-gray-200 dark:border-gray-700">
 63 |       <label htmlFor={settingKey} className="block text-lg font-medium text-gray-800 dark:text-gray-100">{label}</label>
 64 |       <form onSubmit={(e) => e.preventDefault()} className="m-0 p-0">
 65 |         <input 
 66 |           type={type}
 67 |           id={settingKey}
 68 |           value={currentValue}
 69 |           onChange={(e) => onUpdate(settingKey, e.target.value)}
 70 |           placeholder={placeholder}
 71 |           className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
 72 |         />
 73 |       </form>
 74 |     </div>
 75 |   );
 76 | };
 77 | 
 78 | // 添加这个函数用于获取资源路径
 79 | function getAssetPath(filename: string) {
 80 |   // 检查是否在Electron环境中
 81 |   const isElectron = typeof window !== 'undefined' && window && 'electron' in window;
 82 |   
 83 |   if (isElectron) {
 84 |     // 在Electron打包环境中，logo可能位于不同位置
 85 |     return `/app.asar.unpacked/public/logo/${filename}`;
 86 |   }
 87 |   
 88 |   // 普通Web环境
 89 |   return `/logo/${filename}`;
 90 | }
 91 | 
 92 | export default function SettingsPage() {
 93 |   const { settings, setQuizSetting, resetQuizSettings } = useQuizStore();
 94 | 
 95 |   // Explicitly type the key for boolean settings
 96 |   type BooleanSettingKey = Extract<keyof QuizSettings, 'shufflePracticeOptions' | 'shuffleReviewOptions' | 'shufflePracticeQuestionOrder' | 'shuffleReviewQuestionOrder' | 'markMistakeAsCorrectedOnReviewSuccess'>;
 97 |   type StringSettingKey = Extract<keyof QuizSettings, 'deepseekApiKey' | 'deepseekBaseUrl' | 'alibabaApiKey'>;
 98 |   type AiProviderKey = Extract<keyof QuizSettings, 'aiProvider'>;
 99 | 
100 |   const handleBooleanSettingToggle = (key: BooleanSettingKey, value: boolean) => {
101 |     setQuizSetting(key, value);
102 |   };
103 | 
104 |   const handleStringSettingUpdate = (key: StringSettingKey, value: string) => {
105 |     setQuizSetting(key, value);
106 |   };
107 |   
108 |   const handleAiProviderChange = (value: 'deepseek' | 'alibaba') => {
109 |     setQuizSetting('aiProvider', value);
110 |   };
111 | 
112 |   const ALIBABA_BASE_URL = "https://dashscope.aliyuncs.com/compatible-mode/v1";
113 | 
114 |   return (
115 |     <>
116 |       <header className="mb-8">
117 |         <div className="max-w-3xl mx-auto flex items-center justify-center"> {/* Modified for centering title */}
118 |             <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100">
119 |               应用设置
120 |             </h1>
121 |         </div>
122 |       </header>
123 | 
124 |       <main className="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 md:p-8 divide-y divide-gray-200 dark:divide-gray-700">
125 |         {/* General Practice/Review Settings */}
126 |         <div className="space-y-4 py-6">
127 |           <h2 className="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">练习与复习设置</h2>
128 |           <SettingRow 
129 |             label="练习模式：打乱选项顺序"
130 |             description="单选题和多选题的选项将随机排列。"
131 |             settingKey="shufflePracticeOptions"
132 |             currentValue={settings.shufflePracticeOptions}
133 |             onToggle={handleBooleanSettingToggle}
134 |           />
135 |           <SettingRow 
136 |             label="错题回顾：打乱选项顺序"
137 |             description="错题练习中，单选题和多选题的选项将随机排列。"
138 |             settingKey="shuffleReviewOptions"
139 |             currentValue={settings.shuffleReviewOptions}
140 |             onToggle={handleBooleanSettingToggle}
141 |           />
142 |           <SettingRow 
143 |             label="练习模式：打乱题目顺序"
144 |             description="进入练习时，题库中的题目将以随机顺序出现。"
145 |             settingKey="shufflePracticeQuestionOrder"
146 |             currentValue={settings.shufflePracticeQuestionOrder}
147 |             onToggle={handleBooleanSettingToggle}
148 |           />
149 |           <SettingRow 
150 |             label="错题回顾：打乱题目顺序"
151 |             description="进行错题回顾时，错题将以随机顺序出现。"
152 |             settingKey="shuffleReviewQuestionOrder"
153 |             currentValue={settings.shuffleReviewQuestionOrder}
154 |             onToggle={handleBooleanSettingToggle}
155 |           />
156 |           <SettingRow 
157 |             label="错题订正后从错题本移除"
158 |             description="在错题回顾中答对题目后，是否将其视为已订正。"
159 |             settingKey="markMistakeAsCorrectedOnReviewSuccess"
160 |             currentValue={settings.markMistakeAsCorrectedOnReviewSuccess}
161 |             onToggle={handleBooleanSettingToggle}
162 |           />
163 |           <SettingRow
164 |             label="导入题目时查重"
165 |             description="开启后，导入题库时会自动跳过重复题目（题干完全一致视为重复）"
166 |             settingKey={"checkDuplicateQuestion" as any}
167 |             currentValue={settings.checkDuplicateQuestion}
168 |             onToggle={handleBooleanSettingToggle as any}
169 |           />
170 |         </div>
171 | 
172 |         {/* AI Provider Settings */}
173 |         <div className="py-6 space-y-6">
174 |           <h2 className="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">题目转换 AI 设置</h2>
175 |           
176 |           {/* Provider Selection */}
177 |           <div className="space-y-2">
178 |             <label className="block text-lg font-medium text-gray-800 dark:text-gray-100">选择 AI 服务商:</label>
179 |             <div className="flex flex-col sm:flex-row gap-4">
180 |               {([
181 |                 { id: 'deepseek', name: 'Deepseek', logoFile: 'Deepseek.jpg' },
182 |                 { id: 'alibaba', name: '通义千问 (Alibaba)', logoFile: 'Qwen.jpg' },
183 |               ] as const).map((provider) => (
184 |                 <button 
185 |                   key={provider.id} 
186 |                   onClick={() => handleAiProviderChange(provider.id)}
187 |                   className={`flex-1 p-4 border rounded-lg flex items-center justify-center space-x-3 transition-all duration-200 ease-in-out 
188 |                     ${settings.aiProvider === provider.id 
189 |                       ? provider.id === 'deepseek'
190 |                         ? 'bg-blue-800 border-blue-900 text-white shadow-lg ring-2 ring-blue-700 ring-offset-2 dark:ring-offset-gray-800' 
191 |                         : 'bg-purple-800 border-purple-900 text-white shadow-lg ring-2 ring-purple-700 ring-offset-2 dark:ring-offset-gray-800'
192 |                       : 'bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600'}
193 |                   `}
194 |                 >
195 |                   <span className="font-medium">{provider.name}</span>
196 |                 </button>
197 |               ))}
198 |             </div>
199 |           </div>
200 | 
201 |           {/* Deepseek Settings - Conditional on provider or always show and disable? For now, conditional */}
202 |           {settings.aiProvider === 'deepseek' && (
203 |             <div className="p-4 border border-blue-200 dark:border-blue-900 rounded-lg bg-blue-50 dark:bg-blue-900/20 space-y-4">
204 |               <h3 className="text-lg font-semibold text-blue-700 dark:text-blue-300">Deepseek 设置</h3>
205 |               <TextInputSetting 
206 |                 label="Deepseek API Key"
207 |                 settingKey="deepseekApiKey"
208 |                 currentValue={settings.deepseekApiKey}
209 |                 onUpdate={handleStringSettingUpdate}
210 |                 placeholder="输入您的 Deepseek API Key"
211 |                 type="password"
212 |               />
213 |               <TextInputSetting 
214 |                 label="Deepseek Base URL"
215 |                 settingKey="deepseekBaseUrl"
216 |                 currentValue={settings.deepseekBaseUrl}
217 |                 onUpdate={handleStringSettingUpdate}
218 |                 placeholder="例如: https://api.deepseek.com"
219 |               />
220 |             </div>
221 |           )}
222 | 
223 |           {/* Alibaba Settings - Conditional on provider */}
224 |           {settings.aiProvider === 'alibaba' && (
225 |             <div className="p-4 border border-purple-200 dark:border-purple-900 rounded-lg bg-purple-50 dark:bg-purple-900/20 space-y-4">
226 |               <h3 className="text-lg font-semibold text-purple-700 dark:text-purple-300">通义千问 (Alibaba) 设置</h3>
227 |               <TextInputSetting 
228 |                 label="Alibaba API Key (DashScope)"
229 |                 settingKey="alibabaApiKey"
230 |                 currentValue={settings.alibabaApiKey}
231 |                 onUpdate={handleStringSettingUpdate}
232 |                 placeholder="输入您的 DashScope API Key (sk-...)"
233 |                 type="password"
234 |               />
235 |               <div>
236 |                 <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Base URL (固定)</label>
237 |                 <p className="mt-1 text-sm text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 p-2 rounded-md">{ALIBABA_BASE_URL}</p>
238 |               </div>
239 |                <div>
240 |                 <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">默认模型 (固定)</label>
241 |                 <p className="mt-1 text-sm text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 p-2 rounded-md">qwen-turbo (兼容 OpenAI SDK)</p>
242 |               </div>
243 |             </div>
244 |           )}
245 |         </div>
246 | 
247 |         {/* Reset Settings Button */}
248 |         <div className="mt-8 pt-6 flex justify-end">
249 |           <button 
250 |             onClick={resetQuizSettings}
251 |             className="px-6 py-2 bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 text-white rounded-md font-medium transition-colors"
252 |           >
253 |             恢复默认设置
254 |           </button>
255 |         </div>
256 |       </main>
257 |     </>
258 |   );
259 | } 


--------------------------------------------------------------------------------
/src/app/quiz/import-export/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useState, useRef } from 'react';
  4 | import { FaFileImport, FaFileExport, FaCheck, FaExclamationTriangle } from 'react-icons/fa';
  5 | import { useQuizStore } from '@/store/quizStore';
  6 | import { exportToCSV, exportToExcel, importFromCSV, importFromExcel } from '@/utils/quiz';
  7 | import { DEFAULT_EXPORT_FILENAME } from '@/constants/quiz';
  8 | import { QuestionBank, Question } from '@/types/quiz';
  9 | 
 10 | /**
 11 |  * 导入/导出题库页面
 12 |  */
 13 | export default function ImportExportPage() {
 14 |   const { questionBanks, addQuestionBank, addQuestionToBank } = useQuizStore();
 15 |   const [selectedBankId, setSelectedBankId] = useState<string>('');
 16 |   const [importFormat, setImportFormat] = useState<'csv' | 'excel'>('csv');
 17 |   const [exportFormat, setExportFormat] = useState<'csv' | 'excel'>('csv');
 18 |   const [importName, setImportName] = useState<string>('');
 19 |   const fileInputRef = useRef<HTMLInputElement>(null);
 20 |   const [importSuccess, setImportSuccess] = useState(false);
 21 |   const [exportSuccess, setExportSuccess] = useState(false);
 22 |   const [importResult, setImportResult] = useState<{ total: number; added: number; duplicates: number } | null>(null);
 23 | 
 24 |   /**
 25 |    * 处理文件导入
 26 |    */
 27 |   const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
 28 |     const file = event.target.files?.[0];
 29 |     if (!file || !importName.trim()) {
 30 |         alert('请输入题库名称并选择文件。');
 31 |         return;
 32 |     }
 33 | 
 34 |     const reader = new FileReader();
 35 | 
 36 |     reader.onload = (e) => {
 37 |       try {
 38 |         let importedData: QuestionBank | null = null; 
 39 |         
 40 |         if (importFormat === 'csv') {
 41 |           const content = e.target?.result as string;
 42 |           importedData = importFromCSV(content, importName.trim());
 43 |         } else {
 44 |           const content = e.target?.result as ArrayBuffer;
 45 |           importedData = importFromExcel(content, importName.trim());
 46 |         }
 47 |         
 48 |         if (!importedData) {
 49 |             throw new Error('无法从文件解析数据。');
 50 |         }
 51 | 
 52 |         const newBank: QuestionBank = addQuestionBank(importedData.name, importedData.description);
 53 |         
 54 |         let addedCount = 0;
 55 |         let duplicateCount = 0;
 56 |         const totalCount = importedData.questions ? importedData.questions.length : 0;
 57 | 
 58 |         if (newBank && importedData.questions && importedData.questions.length > 0) {
 59 |             importedData.questions.forEach((question: Question) => {
 60 |                 const { id, ...questionData } = question;
 61 |                 const result = addQuestionToBank(newBank.id, questionData);
 62 |                 if (result.isDuplicate) {
 63 |                     duplicateCount++;
 64 |                 } else if (result.question) {
 65 |                     addedCount++;
 66 |                 }
 67 |             });
 68 |         }
 69 |         
 70 |         setImportResult({
 71 |             total: totalCount,
 72 |             added: addedCount,
 73 |             duplicates: duplicateCount
 74 |         });
 75 |         
 76 |         setImportName('');
 77 |         if (fileInputRef.current) fileInputRef.current.value = '';
 78 |         
 79 |         setImportSuccess(true);
 80 |         setTimeout(() => {
 81 |             setImportSuccess(false);
 82 |             // 5秒后清除导入结果
 83 |             setTimeout(() => setImportResult(null), 5000);
 84 |         }, 3000);
 85 |       } catch (error: any) {
 86 |         console.error('导入失败:', error);
 87 |         alert(`导入失败: ${error.message || '请检查文件格式是否正确'}`);
 88 |       }
 89 |     };
 90 | 
 91 |     if (importFormat === 'csv') {
 92 |       reader.readAsText(file);
 93 |     } else {
 94 |       reader.readAsArrayBuffer(file);
 95 |     }
 96 |   };
 97 | 
 98 |   /**
 99 |    * 处理导出操作
100 |    */
101 |   const handleExport = () => {
102 |     if (!selectedBankId) return;
103 |     
104 |     const bank = questionBanks.find(b => b.id === selectedBankId);
105 |     if (!bank) return;
106 | 
107 |     try {
108 |       if (exportFormat === 'csv') {
109 |         const csv = exportToCSV(bank);
110 |         const blob = new Blob([csv], { type: 'text/csv' });
111 |         const url = URL.createObjectURL(blob);
112 |         const a = document.createElement('a');
113 |         a.href = url;
114 |         a.download = `${bank.name || DEFAULT_EXPORT_FILENAME}.csv`;
115 |         a.click();
116 |         URL.revokeObjectURL(url);
117 |       } else {
118 |         const blob = exportToExcel(bank);
119 |         const url = URL.createObjectURL(blob);
120 |         const a = document.createElement('a');
121 |         a.href = url;
122 |         a.download = `${bank.name || DEFAULT_EXPORT_FILENAME}.xlsx`;
123 |         a.click();
124 |         URL.revokeObjectURL(url);
125 |       }
126 |       
127 |       setExportSuccess(true);
128 |       setTimeout(() => setExportSuccess(false), 3000);
129 |     } catch (error) {
130 |       console.error('导出失败:', error);
131 |       alert('导出失败，请稍后重试');
132 |     }
133 |   };
134 | 
135 |   return (
136 |     <div>
137 |       <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-8">导入/导出题库</h1>
138 |       
139 |       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
140 |         {/* 导入题库 */}
141 |         <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
142 |           <div className="flex items-center mb-4">
143 |             <FaFileImport className="text-blue-600 dark:text-blue-400 mr-2" size={20} />
144 |             <h2 className="text-lg font-semibold dark:text-white">导入题库</h2>
145 |           </div>
146 |           
147 |           <div className="space-y-4">
148 |             <div>
149 |               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
150 |                 题库名称
151 |               </label>
152 |               <input
153 |                 type="text"
154 |                 value={importName}
155 |                 onChange={(e) => setImportName(e.target.value)}
156 |                 className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
157 |                 placeholder="输入导入后的题库名称"
158 |               />
159 |             </div>
160 |             
161 |             <div>
162 |               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
163 |                 导入格式
164 |               </label>
165 |               <div className="flex space-x-4">
166 |                 <label className="inline-flex items-center">
167 |                   <input
168 |                     type="radio"
169 |                     className="form-radio"
170 |                     name="importFormat"
171 |                     checked={importFormat === 'csv'}
172 |                     onChange={() => setImportFormat('csv')}
173 |                   />
174 |                   <span className="ml-2 dark:text-gray-300">CSV</span>
175 |                 </label>
176 |                 <label className="inline-flex items-center">
177 |                   <input
178 |                     type="radio"
179 |                     className="form-radio"
180 |                     name="importFormat"
181 |                     checked={importFormat === 'excel'}
182 |                     onChange={() => setImportFormat('excel')}
183 |                   />
184 |                   <span className="ml-2 dark:text-gray-300">Excel</span>
185 |                 </label>
186 |               </div>
187 |             </div>
188 |             
189 |             <div>
190 |               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
191 |                 选择文件
192 |               </label>
193 |               <input
194 |                 type="file"
195 |                 ref={fileInputRef}
196 |                 accept={importFormat === 'csv' ? '.csv' : '.xlsx,.xls'}
197 |                 onChange={handleImport}
198 |                 className="w-full text-sm text-gray-500 dark:text-gray-400
199 |                          file:mr-4 file:py-2 file:px-4
200 |                          file:rounded-md file:border-0
201 |                          file:text-sm file:font-semibold
202 |                          file:bg-blue-50 file:text-blue-700 dark:file:bg-blue-900 dark:file:text-blue-300
203 |                          hover:file:bg-blue-100 dark:hover:file:bg-blue-800"
204 |               />
205 |             </div>
206 |             
207 |             {importSuccess && (
208 |               <div className="flex items-center text-green-600 dark:text-green-400">
209 |                 <FaCheck className="mr-1" />
210 |                 <span>导入成功</span>
211 |               </div>
212 |             )}
213 |             
214 |             {importResult && (
215 |               <div className="mt-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-100 dark:border-blue-800">
216 |                 <p className="text-blue-700 dark:text-blue-300 text-sm">
217 |                   共导入 {importResult.total} 题，成功添加 {importResult.added} 题
218 |                 </p>
219 |                 {importResult.duplicates > 0 && (
220 |                   <p className="flex items-center mt-1 text-amber-600 dark:text-amber-400 text-sm">
221 |                     <FaExclamationTriangle className="mr-1" size={12} />
222 |                     跳过 {importResult.duplicates} 个重复题目
223 |                   </p>
224 |                 )}
225 |               </div>
226 |             )}
227 |           </div>
228 |         </div>
229 |         
230 |         {/* 导出题库 */}
231 |         <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
232 |           <div className="flex items-center mb-4">
233 |             <FaFileExport className="text-green-600 dark:text-green-400 mr-2" size={20} />
234 |             <h2 className="text-lg font-semibold dark:text-white">导出题库</h2>
235 |           </div>
236 |           
237 |           <div className="space-y-4">
238 |             <div>
239 |               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
240 |                 选择题库
241 |               </label>
242 |               <select
243 |                 value={selectedBankId}
244 |                 onChange={(e) => setSelectedBankId(e.target.value)}
245 |                 className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
246 |               >
247 |                 <option value="">-- 请选择题库 --</option>
248 |                 {questionBanks.map((bank) => (
249 |                   <option key={bank.id} value={bank.id}>
250 |                     {bank.name} ({bank.questions.length}题)
251 |                   </option>
252 |                 ))}
253 |               </select>
254 |             </div>
255 |             
256 |             <div>
257 |               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
258 |                 导出格式
259 |               </label>
260 |               <div className="flex space-x-4">
261 |                 <label className="inline-flex items-center">
262 |                   <input
263 |                     type="radio"
264 |                     className="form-radio"
265 |                     name="exportFormat"
266 |                     checked={exportFormat === 'csv'}
267 |                     onChange={() => setExportFormat('csv')}
268 |                   />
269 |                   <span className="ml-2 dark:text-gray-300">CSV</span>
270 |                 </label>
271 |                 <label className="inline-flex items-center">
272 |                   <input
273 |                     type="radio"
274 |                     className="form-radio"
275 |                     name="exportFormat"
276 |                     checked={exportFormat === 'excel'}
277 |                     onChange={() => setExportFormat('excel')}
278 |                   />
279 |                   <span className="ml-2 dark:text-gray-300">Excel</span>
280 |                 </label>
281 |               </div>
282 |             </div>
283 | 
284 |             <button 
285 |               onClick={handleExport}
286 |               disabled={!selectedBankId}
287 |               className={`w-full flex items-center justify-center px-4 py-2 rounded-md text-white font-medium
288 |                         ${!selectedBankId ? 'bg-gray-400 dark:bg-gray-600 cursor-not-allowed' : 'bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800'}`}
289 |             >
290 |               <FaFileExport className="mr-2" />
291 |               导出
292 |             </button>
293 |             
294 |             {exportSuccess && (
295 |               <div className="flex items-center text-green-600 dark:text-green-400">
296 |                 <FaCheck className="mr-1" />
297 |                 <span>导出成功</span>
298 |               </div>
299 |             )}
300 |           </div>
301 |         </div>
302 |       </div>
303 |     </div>
304 |   );
305 | } 


--------------------------------------------------------------------------------
/electron/static-server.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 静态文件服务器模块
  3 |  * 用于在Electron应用中提供HTML和静态资源服务
  4 |  */
  5 | const express = require('express');
  6 | const path = require('path');
  7 | const fs = require('fs');
  8 | const fetch = require('node-fetch');
  9 | 
 10 | /**
 11 |  * 创建静态文件服务器
 12 |  * @param {Object} options 服务器选项
 13 |  * @param {string} options.staticDir 静态文件目录路径
 14 |  * @param {string} options.publicDir 公共资源目录路径
 15 |  * @param {number} options.port 服务器端口
 16 |  * @param {Function} options.logFunc 日志函数
 17 |  * @returns {Promise<{server: Object, port: number}>} 返回服务器实例和端口
 18 |  */
 19 | function createStaticServer({staticDir, publicDir, port = 3000, logFunc = console.log}) {
 20 |   return new Promise((resolve, reject) => {
 21 |     try {
 22 |       // 检查静态目录是否存在
 23 |       const dirExists = doesDirectoryExist(staticDir);
 24 |       logFunc(`静态目录 ${staticDir} ${dirExists ? '存在' : '不存在'}`);
 25 |       
 26 |       if (!dirExists) {
 27 |         // 尝试查找其他可能的静态目录
 28 |         const alternativeDirs = findAlternativeStaticDirs();
 29 |         if (alternativeDirs.length === 0) {
 30 |           return reject(new Error(`静态目录不存在: ${staticDir}`));
 31 |         }
 32 |         
 33 |         // 使用找到的第一个目录
 34 |         staticDir = alternativeDirs[0];
 35 |         logFunc(`使用替代静态目录: ${staticDir}`);
 36 |       }
 37 | 
 38 |       // 检查公共资源目录是否存在
 39 |       const publicDirExists = publicDir && doesDirectoryExist(publicDir);
 40 |       logFunc(`公共资源目录 ${publicDir} ${publicDirExists ? '存在' : '不存在'}`);
 41 |       
 42 |       // 检查是否是Next.js导出的结构
 43 |       const isNextExport = fs.existsSync(path.join(staticDir, '_next'));
 44 |       logFunc(`Next.js导出结构: ${isNextExport ? '是' : '否'}`);
 45 |       
 46 |       // 创建Express应用
 47 |       const app = express();
 48 |       
 49 |       // 添加JSON解析中间件
 50 |       app.use(express.json());
 51 |       
 52 |       // 设置日志中间件
 53 |       app.use((req, res, next) => {
 54 |         logFunc(`收到请求: ${req.method} ${req.url}`);
 55 |         next();
 56 |       });
 57 | 
 58 |       // 处理公共资源目录
 59 |       if (publicDirExists) {
 60 |         // 检查logo目录
 61 |         const logoDir = path.join(publicDir, 'logo');
 62 |         if (doesDirectoryExist(logoDir)) {
 63 |           logFunc(`设置logo目录: ${logoDir}`);
 64 |           // 设置多个路径访问logo
 65 |           app.use('/logo', express.static(logoDir));
 66 |           app.use('/public/logo', express.static(logoDir));
 67 |           app.use('/app.asar.unpacked/public/logo', express.static(logoDir));
 68 |         }
 69 | 
 70 |         // 一般公共资源
 71 |         app.use('/public', express.static(publicDir));
 72 |       }
 73 |       
 74 |       if (isNextExport) {
 75 |         // 处理Next.js导出的静态文件
 76 |         setupNextExportRoutes(app, staticDir, logFunc);
 77 |       } else {
 78 |         // 普通静态文件服务
 79 |         setupStaticRoutes(app, staticDir, logFunc);
 80 |       }
 81 |       
 82 |       // 启动服务器
 83 |       const server = app.listen(port, () => {
 84 |         logFunc(`静态文件服务器在端口 ${port} 上启动成功`);
 85 |         resolve({server, port});
 86 |       });
 87 |       
 88 |       server.on('error', (err) => {
 89 |         logFunc(`静态文件服务器启动错误: ${err.message}`);
 90 |         reject(err);
 91 |       });
 92 |     } catch (err) {
 93 |       logFunc(`创建静态文件服务器时出错: ${err.message}`);
 94 |       reject(err);
 95 |     }
 96 |   });
 97 | }
 98 | 
 99 | /**
100 |  * 设置Next.js导出的路由
101 |  * @param {Object} app Express应用
102 |  * @param {string} staticDir 静态文件目录
103 |  * @param {Function} logFunc 日志函数
104 |  */
105 | function setupNextExportRoutes(app, staticDir, logFunc) {
106 |   // 静态文件服务
107 |   app.use('/_next', express.static(path.join(staticDir, '_next')));
108 |   app.use('/images', express.static(path.join(staticDir, 'images')));
109 |   app.use('/assets', express.static(path.join(staticDir, 'assets')));
110 |   
111 |   // 读取html文件的帮助函数
112 |   const serveHtml = (filePath, res) => {
113 |     try {
114 |       if (fs.existsSync(filePath)) {
115 |         const html = fs.readFileSync(filePath, 'utf8');
116 |         res.send(html);
117 |       } else {
118 |         throw new Error(`文件不存在: ${filePath}`);
119 |       }
120 |     } catch (err) {
121 |       logFunc(`读取HTML文件失败: ${err.message}`);
122 |       res.status(404).send(getFallbackHtml('页面未找到', filePath));
123 |     }
124 |   };
125 |   
126 |   // 处理API路由
127 |   app.post('/api/ai/deepseek', async (req, res) => {
128 |     try {
129 |       logFunc('接收到 Deepseek API 请求');
130 |       const { apiKey, baseUrl, messages } = req.body;
131 |       
132 |       if (!apiKey) {
133 |         return res.status(400).json({ error: 'API 密钥不能为空' });
134 |       }
135 |       
136 |       const apiBaseUrl = baseUrl || 'https://api.deepseek.com';
137 |       
138 |       // 转发请求到 Deepseek API
139 |       const response = await fetch(`${apiBaseUrl}/v1/chat/completions`, {
140 |         method: 'POST',
141 |         headers: {
142 |           'Content-Type': 'application/json',
143 |           'Authorization': `Bearer ${apiKey}`
144 |         },
145 |         body: JSON.stringify({
146 |           model: 'deepseek-chat',
147 |           messages
148 |         })
149 |       });
150 |       
151 |       const data = await response.json();
152 |       
153 |       if (!response.ok) {
154 |         return res.status(response.status).json({
155 |           error: data.error?.message || `API请求失败，状态码: ${response.status}`
156 |         });
157 |       }
158 |       
159 |       return res.json(data);
160 |     } catch (error) {
161 |       logFunc(`Deepseek API 代理错误: ${error.message}`);
162 |       return res.status(500).json({ error: error.message || '处理请求时发生未知错误' });
163 |     }
164 |   });
165 |   
166 |   app.post('/api/ai/alibaba', async (req, res) => {
167 |     try {
168 |       logFunc('接收到通义千问 API 请求');
169 |       const { apiKey, messages } = req.body;
170 |       
171 |       if (!apiKey) {
172 |         return res.status(400).json({ error: 'API 密钥不能为空' });
173 |       }
174 |       
175 |       const ALIBABA_BASE_URL = "https://dashscope.aliyuncs.com/compatible-mode/v1";
176 |       const ALIBABA_MODEL = "qwen-turbo";
177 |       
178 |       // 转发请求到通义千问 API
179 |       const response = await fetch(`${ALIBABA_BASE_URL}/chat/completions`, {
180 |         method: 'POST',
181 |         headers: {
182 |           'Content-Type': 'application/json',
183 |           'Authorization': `Bearer ${apiKey}`
184 |         },
185 |         body: JSON.stringify({
186 |           model: ALIBABA_MODEL,
187 |           messages
188 |         })
189 |       });
190 |       
191 |       const data = await response.json();
192 |       
193 |       if (!response.ok) {
194 |         return res.status(response.status).json({
195 |           error: data.error?.message || `API请求失败，状态码: ${response.status}`
196 |         });
197 |       }
198 |       
199 |       return res.json(data);
200 |     } catch (error) {
201 |       logFunc(`通义千问 API 代理错误: ${error.message}`);
202 |       return res.status(500).json({ error: error.message || '处理请求时发生未知错误' });
203 |     }
204 |   });
205 |   
206 |   // 处理主页请求
207 |   app.get('/', (req, res) => {
208 |     logFunc('接收到首页请求');
209 |     serveHtml(path.join(staticDir, 'index.html'), res);
210 |   });
211 |   
212 |   // 处理404页面
213 |   app.get('/404', (req, res) => {
214 |     serveHtml(path.join(staticDir, '404.html'), res);
215 |   });
216 |   
217 |   // 处理动态路由页面
218 |   app.get('/quiz/banks/:bankId', (req, res) => {
219 |     logFunc(`接收到题库详情页请求: ${req.params.bankId}`);
220 |     const bankHtmlPath = path.join(staticDir, 'quiz/banks', req.params.bankId + '.html');
221 |     
222 |     // 检查文件是否存在
223 |     if (fs.existsSync(bankHtmlPath)) {
224 |       serveHtml(bankHtmlPath, res);
225 |     } else {
226 |       // 尝试使用默认文件
227 |       const defaultBankPath = path.join(staticDir, 'quiz/banks/default.html');
228 |       if (fs.existsSync(defaultBankPath)) {
229 |         logFunc(`使用默认题库页面: ${defaultBankPath}`);
230 |         serveHtml(defaultBankPath, res);
231 |       } else {
232 |         // 找不到页面时展示备用HTML
233 |         logFunc(`无法找到题库页面: ${bankHtmlPath}`);
234 |         res.status(404).send(getFallbackHtml('题库页面未找到', req.path));
235 |       }
236 |     }
237 |   });
238 |   
239 |   // 处理其他固定路由
240 |   const routePaths = [
241 |     '/quiz',
242 |     '/quiz/convert',
243 |     '/quiz/import-export',
244 |     '/quiz/practice',
245 |     '/quiz/review',
246 |     '/quiz/review/practice',
247 |     '/quiz/settings'
248 |   ];
249 |   
250 |   routePaths.forEach(routePath => {
251 |     app.get(routePath, (req, res) => {
252 |       logFunc(`接收到路由请求: ${routePath}`);
253 |       const htmlPath = path.join(staticDir, routePath.substring(1) + '.html');
254 |       
255 |       if (fs.existsSync(htmlPath)) {
256 |         serveHtml(htmlPath, res);
257 |       } else {
258 |         // 尝试使用备用路径
259 |         const fallbacks = [
260 |           path.join(staticDir, routePath.substring(1), 'index.html'),
261 |           path.join(staticDir, 'index.html')
262 |         ];
263 |         
264 |         for (const fallbackPath of fallbacks) {
265 |           if (fs.existsSync(fallbackPath)) {
266 |             logFunc(`使用备用路径: ${fallbackPath}`);
267 |             return serveHtml(fallbackPath, res);
268 |           }
269 |         }
270 |         
271 |         // 找不到页面时展示备用HTML
272 |         logFunc(`无法找到路由页面: ${htmlPath}`);
273 |         res.status(404).send(getFallbackHtml('页面未找到', req.path));
274 |       }
275 |     });
276 |   });
277 |   
278 |   // 通用路由处理 - 尝试直接匹配HTML文件
279 |   app.get('*', (req, res) => {
280 |     logFunc(`尝试匹配未知路由: ${req.path}`);
281 |     const htmlPath = path.join(staticDir, req.path.substring(1));
282 |     
283 |     // 尝试多种可能的路径
284 |     const possiblePaths = [
285 |       htmlPath,
286 |       htmlPath + '.html',
287 |       path.join(htmlPath, 'index.html'),
288 |     ];
289 |     
290 |     for (const tryPath of possiblePaths) {
291 |       if (fs.existsSync(tryPath)) {
292 |         return serveHtml(tryPath, res);
293 |       }
294 |     }
295 |     
296 |     // 找不到页面时展示备用HTML页面
297 |     logFunc(`无法找到路由对应的页面: ${req.path}`);
298 |     res.status(404).send(getFallbackHtml('页面未找到', req.path));
299 |   });
300 | }
301 | 
302 | /**
303 |  * 设置普通静态文件路由
304 |  * @param {Object} app Express应用
305 |  * @param {string} staticDir 静态文件目录
306 |  * @param {Function} logFunc 日志函数
307 |  */
308 | function setupStaticRoutes(app, staticDir, logFunc) {
309 |   // 普通静态文件服务
310 |   logFunc('使用一般静态文件服务');
311 |   app.use(express.static(staticDir));
312 |   
313 |   // 通配符路由处理
314 |   app.get('*', (req, res) => {
315 |     logFunc(`处理通配符路由: ${req.path}`);
316 |     
317 |     // 检查SPA单页应用的索引页
318 |     const indexPath = path.join(staticDir, 'index.html');
319 |     if (fs.existsSync(indexPath)) {
320 |       logFunc(`返回SPA索引页: ${indexPath}`);
321 |       return res.sendFile(indexPath);
322 |     }
323 |     
324 |     // 找不到页面时展示备用HTML
325 |     logFunc(`无法找到页面: ${req.path}`);
326 |     res.status(404).send(getFallbackHtml('页面未找到', req.path));
327 |   });
328 | }
329 | 
330 | /**
331 |  * 生成备用HTML页面
332 |  * @param {string} title 错误标题
333 |  * @param {string} path 请求路径
334 |  * @returns {string} HTML页面内容
335 |  */
336 | function getFallbackHtml(title, path) {
337 |   return `
338 |     <!DOCTYPE html>
339 |     <html lang="zh">
340 |     <head>
341 |       <meta charset="UTF-8">
342 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
343 |       <title>${title}</title>
344 |       <style>
345 |         body {
346 |           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
347 |           display: flex;
348 |           align-items: center;
349 |           justify-content: center;
350 |           height: 100vh;
351 |           margin: 0;
352 |           background-color: #f5f5f5;
353 |           color: #333;
354 |           text-align: center;
355 |         }
356 |         .container {
357 |           max-width: 600px;
358 |           padding: 40px;
359 |           background: white;
360 |           border-radius: 8px;
361 |           box-shadow: 0 4px 12px rgba(0,0,0,0.1);
362 |         }
363 |         h1 { color: #3182ce; }
364 |         .btn {
365 |           background: #3182ce;
366 |           color: white;
367 |           border: none;
368 |           padding: 8px 16px;
369 |           border-radius: 4px;
370 |           cursor: pointer;
371 |           margin-top: 20px;
372 |           font-size: 16px;
373 |         }
374 |       </style>
375 |     </head>
376 |     <body>
377 |       <div class="container">
378 |         <h1>${title}</h1>
379 |         <p>无法找到请求的页面。</p>
380 |         <p>请求路径: ${path}</p>
381 |         <button class="btn" onclick="window.location.href='/'">返回首页</button>
382 |       </div>
383 |     </body>
384 |     </html>
385 |   `;
386 | }
387 | 
388 | /**
389 |  * 检查目录是否存在
390 |  * @param {string} dirPath 目录路径
391 |  * @returns {boolean} 目录是否存在
392 |  */
393 | function doesDirectoryExist(dirPath) {
394 |   try {
395 |     return fs.existsSync(dirPath) && fs.statSync(dirPath).isDirectory();
396 |   } catch (err) {
397 |     return false;
398 |   }
399 | }
400 | 
401 | /**
402 |  * 查找替代的静态文件目录
403 |  * @returns {string[]} 可用的静态目录列表
404 |  */
405 | function findAlternativeStaticDirs() {
406 |   const { app } = require('electron');
407 |   const possibleDirs = [
408 |     path.join(process.resourcesPath, 'app.asar.unpacked', 'out'),
409 |     path.join(process.resourcesPath, 'out'),
410 |     path.join(__dirname, '..', 'out')
411 |   ];
412 |   
413 |   return possibleDirs.filter(dir => doesDirectoryExist(dir));
414 | }
415 | 
416 | module.exports = { createStaticServer }; 


--------------------------------------------------------------------------------
/src/components/quiz/SimilarQuestionsModal.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { Question, QuestionBank, QuestionType } from '@/types/quiz'; // 假设 QuestionBank 类型已定义
  3 | import { FaTimes } from 'react-icons/fa';
  4 | // import QuestionItemDisplay from './QuestionItemDisplay'; // 假设有一个通用的题目展示组件
  5 | 
  6 | interface SimilarQuestionsModalProps {
  7 |   isOpen: boolean;
  8 |   onClose: () => void;
  9 |   originalQuestions: Question[]; // 用于参考或显示用户基于哪些题目生成的
 10 |   generatedQuestions: Question[];
 11 |   isLoading: boolean;
 12 |   availableBanks: QuestionBank[]; // 题库列表
 13 |   onImport: (selectedQuestions: Question[], targetBankId: string) => Promise<void>;
 14 | }
 15 | 
 16 | /**
 17 |  * AI生成相似题目结果展示与导入操作的模态框。
 18 |  */
 19 | const SimilarQuestionsModal: React.FC<SimilarQuestionsModalProps> = ({
 20 |   isOpen,
 21 |   onClose,
 22 |   originalQuestions,
 23 |   generatedQuestions,
 24 |   isLoading,
 25 |   availableBanks,
 26 |   onImport,
 27 | }) => {
 28 |   const [selectedQuestionsMap, setSelectedQuestionsMap] = useState<Record<string, boolean>>({});
 29 |   const [targetBankId, setTargetBankId] = useState<string>('');
 30 |   const [isImporting, setIsImporting] = useState(false);
 31 | 
 32 |   useEffect(() => {
 33 |     // 当可用题库列表变化时，默认选中第一个（如果存在）
 34 |     if (availableBanks && availableBanks.length > 0) {
 35 |       setTargetBankId(availableBanks[0].id);
 36 |     } else {
 37 |       setTargetBankId('');
 38 |     }
 39 |   }, [availableBanks]);
 40 | 
 41 |   useEffect(() => {
 42 |     // Modal打开时，清空之前的选择
 43 |     if (isOpen) {
 44 |       setSelectedQuestionsMap({});
 45 |       // 如果可用题库列表不为空，且当前没有选中的目标题库，则默认选中第一个
 46 |       if (availableBanks && availableBanks.length > 0 && !targetBankId) {
 47 |         setTargetBankId(availableBanks[0].id);
 48 |       }
 49 |     }
 50 |   }, [isOpen, availableBanks, targetBankId]);
 51 | 
 52 |   const handleToggleSelectQuestion = (questionId: string) => {
 53 |     setSelectedQuestionsMap(prev => ({
 54 |       ...prev,
 55 |       [questionId]: !prev[questionId],
 56 |     }));
 57 |   };
 58 | 
 59 |   const selectedCount = Object.values(selectedQuestionsMap).filter(Boolean).length;
 60 | 
 61 |   const handleImportClick = async () => {
 62 |     const questionsToImport = generatedQuestions.filter(q => q.id && selectedQuestionsMap[q.id]);
 63 |     if (questionsToImport.length === 0) {
 64 |       alert('请至少选择一道题目进行导入。'); // 后续可以替换为更友好的提示组件
 65 |       return;
 66 |     }
 67 |     if (!targetBankId) {
 68 |       alert('请选择目标题库。');
 69 |       return;
 70 |     }
 71 | 
 72 |     setIsImporting(true);
 73 |     try {
 74 |       await onImport(questionsToImport, targetBankId);
 75 |       // 可以在这里添加成功提示，然后关闭Modal或清空列表
 76 |       onClose(); // 导入成功后关闭 Modal
 77 |     } catch (error) {
 78 |       console.error('Failed to import questions:', error);
 79 |       alert('导入题目失败，请稍后再试。'); // 错误处理
 80 |     } finally {
 81 |       setIsImporting(false);
 82 |     }
 83 |   };
 84 | 
 85 |   if (!isOpen) {
 86 |     return null;
 87 |   }
 88 | 
 89 |   return (
 90 |     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
 91 |       <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-3xl max-h-[90vh] flex flex-col">
 92 |         <div className="flex justify-between items-center mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
 93 |           <h2 className="text-xl font-semibold text-gray-800 dark:text-white">
 94 |             AI 生成的相似题目
 95 |           </h2>
 96 |           <button
 97 |             onClick={onClose}
 98 |             className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
 99 |             aria-label="关闭"
100 |           >
101 |             <FaTimes size={20} />
102 |           </button>
103 |         </div>
104 | 
105 |         {isLoading && (
106 |           <div className="flex flex-col items-center justify-center h-64">
107 |             <div className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full border-t-transparent mb-4"></div>
108 |             <p className="text-gray-600 dark:text-gray-300">正在努力生成相似题目，请稍候...</p>
109 |           </div>
110 |         )}
111 | 
112 |         {!isLoading && generatedQuestions.length === 0 && (
113 |           <div className="text-center py-10 flex-grow flex flex-col justify-center items-center">
114 |             <p className="text-lg text-gray-500 dark:text-gray-400">未能生成相似题目。</p>
115 |             {originalQuestions.length > 0 && (
116 |                  <p className="text-sm text-gray-400 dark:text-gray-500 mt-2">
117 |                     基于 {originalQuestions.length} 道原始题目尝试生成。
118 |                  </p>
119 |             )}
120 |              <button 
121 |                 onClick={onClose}
122 |                 className="mt-6 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
123 |             >
124 |                 关闭
125 |             </button>
126 |           </div>
127 |         )}
128 | 
129 |         {!isLoading && generatedQuestions.length > 0 && (
130 |           <>
131 |             <div className="mb-3">
132 |                 <p className="text-sm text-gray-700 dark:text-gray-300">
133 |                 基于 {originalQuestions.length} 道原始题目，为您生成了以下 <span className="font-semibold text-blue-600 dark:text-blue-400">{generatedQuestions.length}</span> 道相似题目：
134 |                 </p>
135 |                 <p className="text-xs text-gray-500 dark:text-gray-400">
136 |                 请勾选您想要保留的题目，并选择目标题库进行导入。
137 |                 </p>
138 |             </div>
139 |             <div className="overflow-y-auto flex-grow mb-4 pr-2 -mr-2 space-y-3 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-gray-100 dark:scrollbar-track-gray-700">
140 |               {generatedQuestions.map((q, index) => (
141 |                 <div 
142 |                   key={q.id || `gen-q-${index}`} 
143 |                   className={`p-3 border rounded-md transition-all duration-150 ease-in-out ${selectedQuestionsMap[q.id ?? ''] ? 'border-blue-500 bg-blue-50 dark:bg-gray-700 shadow-md' : 'border-gray-200 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-sm'}`}
144 |                 >
145 |                   <label className="flex items-start space-x-3 cursor-pointer">
146 |                     <input
147 |                       type="checkbox"
148 |                       checked={!!selectedQuestionsMap[q.id ?? '']}
149 |                       onChange={() => q.id && handleToggleSelectQuestion(q.id)}
150 |                       disabled={!q.id}
151 |                       className="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
152 |                     />
153 |                     <div className="flex-1 text-sm">
154 |                        <p className="font-medium text-gray-800 dark:text-white">{index + 1}. {q.content}</p>
155 |                        
156 |                        {/* Options for Single/Multiple Choice */}
157 |                        {(q.type === QuestionType.SingleChoice || q.type === QuestionType.MultipleChoice) && q.options && q.options.length > 0 && (
158 |                         <div className="mt-2 space-y-1 text-xs pl-4">
159 |                             {q.options.map((opt, optIdx) => {
160 |                                 const isCorrectOption = Array.isArray(q.answer)
161 |                                                         ? q.answer.includes(opt.id)
162 |                                                         : q.answer === opt.id;
163 |                                 
164 |                                 let optionStyle = "block text-gray-600 dark:text-gray-400 py-0.5";
165 |                                 if (isCorrectOption) {
166 |                                     optionStyle = "block font-semibold text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-700 dark:bg-opacity-40 px-2 py-0.5 rounded-sm";
167 |                                 }
168 |                                 return (
169 |                                     <span key={opt.id || `opt-${optIdx}`} className={optionStyle}>
170 |                                         {String.fromCharCode(65 + optIdx)}. {opt.content}
171 |                                     </span>
172 |                                 );
173 |                             })}
174 |                         </div>
175 |                        )}
176 | 
177 |                        {/* Answer for True/False if no options shown */}
178 |                        {q.type === QuestionType.TrueFalse && (!q.options || q.options.length === 0) && (
179 |                          <div className="mt-2 text-xs pl-4">
180 |                            <p className="font-semibold text-gray-700 dark:text-gray-300">参考答案：
181 |                              <span className="text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-700 dark:bg-opacity-40 px-2 py-0.5 rounded-sm ml-1">
182 |                                {q.answer === 'true' ? '正确' : (q.answer === 'false' ? '错误' : String(q.answer))}
183 |                              </span>
184 |                            </p>
185 |                          </div>
186 |                        )}
187 | 
188 |                        {/* Answer for Fill-in-the-Blank */}
189 |                        {q.type === QuestionType.FillInBlank && Array.isArray(q.answer) && q.answer.length > 0 && (
190 |                         <div className="mt-2 text-xs pl-4">
191 |                           <p className="font-semibold text-gray-700 dark:text-gray-300">参考答案：
192 |                             {q.answer.map((ans, ansIdx) => (
193 |                               <span key={ansIdx} className="text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-700 dark:bg-opacity-40 px-2 py-0.5 rounded-sm ml-1 mb-0.5 inline-block">
194 |                                 {ans}
195 |                               </span>
196 |                             ))}
197 |                           </p>
198 |                         </div>
199 |                        )}
200 | 
201 |                        {/* Answer for Short Answer */}
202 |                        {q.type === QuestionType.ShortAnswer && typeof q.answer === 'string' && q.answer.trim() !== '' && (
203 |                         <div className="mt-2 text-xs pl-4">
204 |                           <p className="font-semibold text-gray-700 dark:text-gray-300">参考答案：
205 |                             <span className="block whitespace-pre-wrap text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-700 dark:bg-opacity-40 px-2 py-1 rounded-sm mt-1">
206 |                               {q.answer}
207 |                             </span>
208 |                           </p>
209 |                         </div>
210 |                        )}
211 | 
212 |                        <div className="mt-2 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap gap-x-2 gap-y-1 items-center">
213 |                             <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-sm">类型: {q.type}</span>
214 |                             {q.tags && q.tags.length > 0 && 
215 |                                 <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-sm">考点: {q.tags.join(', ')}</span>
216 |                             }
217 |                        </div>
218 |                     </div>
219 |                   </label>
220 |                 </div>
221 |               ))}
222 |             </div>
223 | 
224 |             <div className="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
225 |               <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
226 |                 <div className="flex items-center gap-2 w-full sm:w-auto">
227 |                   <label htmlFor="targetBank" className="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
228 |                     导入到题库:
229 |                   </label>
230 |                   <select
231 |                     id="targetBank"
232 |                     value={targetBankId}
233 |                     onChange={(e) => setTargetBankId(e.target.value)}
234 |                     disabled={availableBanks.length === 0 || isImporting}
235 |                     className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md disabled:opacity-50"
236 |                   >
237 |                     {availableBanks.length === 0 && <option value="">暂无可用题库</option>}
238 |                     {availableBanks.map(bank => (
239 |                       <option key={bank.id} value={bank.id}>{bank.name}</option>
240 |                     ))}
241 |                   </select>
242 |                 </div>
243 |                 <button
244 |                   onClick={handleImportClick}
245 |                   disabled={selectedCount === 0 || !targetBankId || isImporting || isLoading}
246 |                   className="w-full sm:w-auto px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors duration-150 ease-in-out"
247 |                 >
248 |                   {isImporting ? (
249 |                     <span className="flex items-center justify-center">
250 |                         <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
251 |                             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
252 |                             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
253 |                         </svg>
254 |                         正在导入...
255 |                     </span>
256 |                   ) : `导入选中的 ${selectedCount} 道题目`}
257 |                 </button>
258 |               </div>
259 |             </div>
260 |           </>
261 |         )}
262 |       </div>
263 |     </div>
264 |   );
265 | };
266 | 
267 | export default SimilarQuestionsModal; 


--------------------------------------------------------------------------------
/src/components/QuestionFormModal.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useState, useEffect, useMemo } from 'react';
  4 | import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@/components/ui/dialog';
  5 | import { Button } from '@/components/ui/button';
  6 | import { Input } from '@/components/ui/input';
  7 | import { Textarea } from '@/components/ui/textarea';
  8 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
  9 | import { Question, QuestionType, QuestionOption } from '@/types/quiz';
 10 | import { QUESTION_TYPE_NAMES } from '@/constants/quiz';
 11 | import { useQuizStore } from '@/store/quizStore';
 12 | import { toast } from 'sonner';
 13 | import { v4 as uuidv4 } from 'uuid';
 14 | import { FaTrash, FaPlus } from 'react-icons/fa';
 15 | 
 16 | interface QuestionFormModalProps {
 17 |   isOpen: boolean;
 18 |   onClose: () => void;
 19 |   bankId: string;
 20 |   questionToEdit?: Question | null;
 21 |   onSubmitSuccess?: () => void;
 22 | }
 23 | 
 24 | const defaultQuestionOptions: QuestionOption[] = [
 25 |   { id: uuidv4(), content: '' },
 26 |   { id: uuidv4(), content: '' },
 27 |   { id: uuidv4(), content: '' },
 28 |   { id: uuidv4(), content: '' },
 29 | ];
 30 | 
 31 | export default function QuestionFormModal({
 32 |   isOpen,
 33 |   onClose,
 34 |   bankId,
 35 |   questionToEdit,
 36 |   onSubmitSuccess,
 37 | }: QuestionFormModalProps) {
 38 |   const { addQuestionToBank, updateQuestionInBank } = useQuizStore();
 39 | 
 40 |   const [content, setContent] = useState('');
 41 |   const [type, setType] = useState<QuestionType>(QuestionType.SingleChoice);
 42 |   const [options, setOptions] = useState<QuestionOption[]>(defaultQuestionOptions);
 43 |   const [answer, setAnswer] = useState<string | string[]>('');
 44 |   const [explanation, setExplanation] = useState('');
 45 |   const [isLoading, setIsLoading] = useState(false);
 46 | 
 47 |   const isEditMode = useMemo(() => !!questionToEdit, [questionToEdit]);
 48 | 
 49 |   useEffect(() => {
 50 |     if (isOpen) {
 51 |       if (isEditMode && questionToEdit) {
 52 |         setContent(questionToEdit.content);
 53 |         setType(questionToEdit.type);
 54 |         setOptions(questionToEdit.options && questionToEdit.options.length > 0 ? questionToEdit.options.map(opt => ({...opt})) : defaultQuestionOptions.map(opt => ({...opt})));
 55 |         setAnswer(questionToEdit.answer);
 56 |         setExplanation(questionToEdit.explanation || '');
 57 |       } else {
 58 |         // 重置新题目的表单
 59 |         setContent('');
 60 |         setType(QuestionType.SingleChoice);
 61 |         setOptions(defaultQuestionOptions.map(opt => ({...opt, content: ''}))); // 确保内容被清空
 62 |         setAnswer('');
 63 |         setExplanation('');
 64 |       }
 65 |       setIsLoading(false);
 66 |     }
 67 |   }, [isOpen, isEditMode, questionToEdit]);
 68 | 
 69 |   const handleTypeChange = (newType: QuestionType) => {
 70 |     setType(newType);
 71 |     // 根据类型重置选项和答案
 72 |     if (newType === QuestionType.TrueFalse) {
 73 |       setOptions([
 74 |         { id: 'true', content: '正确' }, // 为判断题使用固定ID，便于答案映射
 75 |         { id: 'false', content: '错误' },
 76 |       ]);
 77 |       setAnswer(''); // 单个字符串答案
 78 |     } else if (newType === QuestionType.ShortAnswer || newType === QuestionType.FillInBlank) {
 79 |       setOptions([]);
 80 |       setAnswer(''); // 单个字符串答案
 81 |     } else { // 单选题，多选题
 82 |       // 如果从非选择题切换回选择题，如果当前选项为空或是判断题选项，则恢复默认选项
 83 |       if (options.length < 2 || options.some(o => o.id === 'true' || o.id === 'false')) {
 84 |          setOptions(defaultQuestionOptions.map(opt => ({...opt, content: ''})));
 85 |       }
 86 |       setAnswer(newType === QuestionType.MultipleChoice ? [] : '');
 87 |     }
 88 |   };
 89 | 
 90 |   const handleOptionContentChange = (optionId: string, value: string) => {
 91 |     setOptions(prevOptions => 
 92 |       prevOptions.map(opt => opt.id === optionId ? { ...opt, content: value } : opt)
 93 |     );
 94 |   };
 95 | 
 96 |   const handleAddOption = () => {
 97 |     setOptions(prevOptions => [...prevOptions, { id: uuidv4(), content: '' }]);
 98 |   };
 99 | 
100 |   const handleRemoveOption = (optionId: string) => {
101 |     setOptions(prevOptions => prevOptions.filter(opt => opt.id !== optionId));
102 |     // 如果被删除的选项是已选答案，也移除答案
103 |     if (type === QuestionType.SingleChoice && answer === optionId) {
104 |       setAnswer('');
105 |     }
106 |     if (type === QuestionType.MultipleChoice && Array.isArray(answer) && answer.includes(optionId)) {
107 |       setAnswer(prevAns => (prevAns as string[]).filter(id => id !== optionId));
108 |     }
109 |   };
110 | 
111 |   const handleAnswerSelection = (optionId: string) => {
112 |     if (type === QuestionType.SingleChoice || type === QuestionType.TrueFalse) {
113 |       setAnswer(optionId);
114 |     } else if (type === QuestionType.MultipleChoice) {
115 |       setAnswer(prevAns => {
116 |         const currentAnswers = Array.isArray(prevAns) ? prevAns : [];
117 |         if (currentAnswers.includes(optionId)) {
118 |           return currentAnswers.filter(id => id !== optionId);
119 |         }
120 |         return [...currentAnswers, optionId];
121 |       });
122 |     }
123 |   };
124 | 
125 |   const handleSubmit = async () => {
126 |     if (!content.trim()) {
127 |       toast.error('题目内容不能为空。');
128 |       return;
129 |     }
130 |     if ((type === QuestionType.SingleChoice || type === QuestionType.MultipleChoice) && options.some(opt => !opt.content.trim())) {
131 |       toast.error('选择题的选项内容不能为空。');
132 |       return;
133 |     }
134 |     if ((type === QuestionType.SingleChoice || type === QuestionType.TrueFalse) && !answer) {
135 |       toast.error('请为单选题或判断题选择一个答案。');
136 |       return;
137 |     }
138 |     if (type === QuestionType.MultipleChoice && (!Array.isArray(answer) || answer.length === 0)) {
139 |       toast.error('请为多选题选择至少一个答案。');
140 |       return;
141 |     }
142 |     if ((type === QuestionType.ShortAnswer || type === QuestionType.FillInBlank) && !(answer as string).trim()) {
143 |         toast.error('请输入简答题或填空题的答案。');
144 |         return;
145 |     }
146 | 
147 |     setIsLoading(true);
148 |     const questionData: Omit<Question, 'id'> = {
149 |       content: content.trim(),
150 |       type,
151 |       options: (type === QuestionType.ShortAnswer || type === QuestionType.FillInBlank) ? [] : options.map(o => ({id: o.id, content: o.content.trim()})),
152 |       answer, // 已经是正确的格式（字符串或字符串数组）
153 |       explanation: explanation.trim(),
154 |       createdAt: questionToEdit?.createdAt || Date.now(),
155 |       updatedAt: Date.now(),
156 |       tags: questionToEdit?.tags || [], // 保留现有标签或默认为空
157 |     };
158 | 
159 |     try {
160 |       if (isEditMode && questionToEdit) {
161 |         updateQuestionInBank(bankId, questionToEdit.id, questionData);
162 |         toast.success('题目已成功更新。');
163 |       } else {
164 |         const result = addQuestionToBank(bankId, questionData);
165 |         if (result.isDuplicate) {
166 |           toast.error('题目添加失败：题库中已存在相同题干的题目。');
167 |           setIsLoading(false);
168 |           return;
169 |         } else if (result.question) {
170 |           toast.success('题目已成功添加。');
171 |         } else {
172 |           toast.error('题目添加失败，请稍后重试。');
173 |           setIsLoading(false);
174 |           return;
175 |         }
176 |       }
177 |       if (onSubmitSuccess) onSubmitSuccess();
178 |       onClose(); // 成功后关闭模态框
179 |     } catch (error) {
180 |       toast.error('操作失败，请稍后重试。');
181 |       console.error('Failed to save question:', error);
182 |     }
183 |     setIsLoading(false);
184 |   };
185 |   
186 |   if (!isOpen) return null;
187 | 
188 |   return (
189 |     <Dialog open={isOpen} onOpenChange={(open: boolean) => !open && onClose()}>
190 |       <DialogContent className="sm:max-w-[600px] max-h-[90vh] flex flex-col">
191 |         <DialogHeader>
192 |           <DialogTitle>{isEditMode ? '编辑题目' : '添加新题目'}</DialogTitle>
193 |         </DialogHeader>
194 |         
195 |         <div className="space-y-4 py-3 overflow-y-auto flex-grow pr-2">
196 |           {/* 题目类型 */}
197 |           <div>
198 |             <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">题目类型</label>
199 |             <Select value={type} onValueChange={(value) => handleTypeChange(value as QuestionType)}>
200 |               <SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
201 |               <SelectContent>
202 |                 {Object.entries(QUESTION_TYPE_NAMES).map(([value, name]) => (
203 |                   <SelectItem key={value} value={value}>{name}</SelectItem>
204 |                 ))}
205 |               </SelectContent>
206 |             </Select>
207 |           </div>
208 | 
209 |           {/* 题目内容 */}
210 |           <div>
211 |             <label htmlFor="questionContent" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">题目内容</label>
212 |             <Textarea 
213 |               id="questionContent" 
214 |               value={content} 
215 |               onChange={(e) => setContent(e.target.value)} 
216 |               placeholder="请输入题目内容..."
217 |               rows={4}
218 |               className="text-base"
219 |             />
220 |           </div>
221 | 
222 |           {/* 单选题、多选题、判断题的选项 */}
223 |           {(type === QuestionType.SingleChoice || type === QuestionType.MultipleChoice || type === QuestionType.TrueFalse) && (
224 |             <div>
225 |               <div className="flex justify-between items-center mb-2">
226 |                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">选项</label>
227 |                  {(type === QuestionType.SingleChoice || type === QuestionType.MultipleChoice) && (
228 |                     <Button type="button" variant="outline" size="sm" onClick={handleAddOption} className="text-xs">
229 |                         <FaPlus className="mr-1" /> 添加选项
230 |                     </Button>
231 |                  )}
232 |               </div>
233 |               <div className="space-y-2">
234 |                 {options.map((option, index) => (
235 |                   <div key={option.id} className="flex items-center space-x-2">
236 |                     <span className="text-sm text-gray-500 dark:text-gray-400 min-w-[20px]">
237 |                       {type !== QuestionType.TrueFalse ? String.fromCharCode(65 + index) + '.' : ''}
238 |                     </span>
239 |                     <Input 
240 |                       value={option.content} 
241 |                       onChange={(e) => handleOptionContentChange(option.id, e.target.value)} 
242 |                       placeholder={`选项 ${String.fromCharCode(65 + index)} 内容`}
243 |                       disabled={type === QuestionType.TrueFalse} // 判断题选项是固定的
244 |                       className="text-base flex-grow"
245 |                     />
246 |                     {(type === QuestionType.SingleChoice || type === QuestionType.MultipleChoice) && (
247 |                         <Button 
248 |                             type="button" 
249 |                             variant="ghost" 
250 |                             size="icon" 
251 |                             onClick={() => handleRemoveOption(option.id)} 
252 |                             disabled={options.length <= (type === QuestionType.SingleChoice ? 2 : 1)} // MC can have 1 option, SC needs 2
253 |                             className="h-8 w-8 text-red-500 hover:text-red-700 disabled:text-gray-400"
254 |                         >
255 |                             <FaTrash className="h-4 w-4" />
256 |                         </Button>
257 |                     )}
258 |                   </div>
259 |                 ))}
260 |               </div>
261 |             </div>
262 |           )}
263 | 
264 |           {/* Answer Selection/Input */}
265 |           <div>
266 |             <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">正确答案</label>
267 |             {(type === QuestionType.SingleChoice || type === QuestionType.TrueFalse) && (
268 |               <Select value={answer as string} onValueChange={handleAnswerSelection}>
269 |                 <SelectTrigger className="w-full"><SelectValue placeholder="选择正确答案..." /></SelectTrigger>
270 |                 <SelectContent>
271 |                   {options.map((option, index) => (
272 |                     <SelectItem key={option.id} value={option.id}>
273 |                       {type !== QuestionType.TrueFalse ? String.fromCharCode(65 + index) + '. ' : ''}{option.content}
274 |                     </SelectItem>
275 |                   ))}
276 |                 </SelectContent>
277 |               </Select>
278 |             )}
279 |             {type === QuestionType.MultipleChoice && (
280 |               <div className="space-y-2 p-2 border dark:border-gray-600 rounded-md">
281 |                 {options.map((option, index) => (
282 |                   <label key={option.id} className="flex items-center space-x-2 p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
283 |                     <input 
284 |                       type="checkbox" 
285 |                       checked={Array.isArray(answer) && answer.includes(option.id)}
286 |                       onChange={() => handleAnswerSelection(option.id)}
287 |                       className="form-checkbox h-4 w-4 text-blue-600 dark:text-blue-500 border-gray-300 dark:border-gray-500 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
288 |                     />
289 |                     <span>{String.fromCharCode(65 + index)}. {option.content}</span>
290 |                   </label>
291 |                 ))}
292 |               </div>
293 |             )}
294 |             {(type === QuestionType.ShortAnswer || type === QuestionType.FillInBlank) && (
295 |               <>
296 |                 <Textarea 
297 |                   value={answer as string} 
298 |                   onChange={(e) => setAnswer(e.target.value)} 
299 |                   placeholder={type === QuestionType.FillInBlank 
300 |                     ? "请输入答案，多个可接受的答案请用分号(;)分隔..."
301 |                     : "请输入答案..."}
302 |                   rows={3}
303 |                   className="text-base"
304 |                 />
305 |                 {type === QuestionType.FillInBlank && (
306 |                   <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
307 |                     提示：填空题支持多个答案，不同答案之间用分号(;)分隔。学生只需要输入其中任意一个答案即可被判定为正确。
308 |                     如果答案本身包含多个连续分号，只有最后一个分号会被视为分隔符。
309 |                   </p>
310 |                 )}
311 |               </>
312 |             )}
313 |           </div>
314 |           
315 |           {/* Explanation */}
316 |           <div>
317 |             <label htmlFor="questionExplanation" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">题目解析 (可选)</label>
318 |             <Textarea 
319 |               id="questionExplanation" 
320 |               value={explanation} 
321 |               onChange={(e) => setExplanation(e.target.value)} 
322 |               placeholder="请输入题目解析..."
323 |               rows={3}
324 |               className="text-base"
325 |             />
326 |           </div>
327 |         </div>
328 | 
329 |         <DialogFooter className="pt-3 border-t dark:border-gray-700">
330 |           <DialogClose asChild>
331 |             <Button type="button" variant="outline" onClick={onClose}>取消</Button>
332 |           </DialogClose>
333 |           <Button type="submit" onClick={handleSubmit} disabled={isLoading}>
334 |             {isLoading ? '保存中...' : (isEditMode ? '保存更改' : '添加题目')}
335 |           </Button>
336 |         </DialogFooter>
337 |       </DialogContent>
338 |     </Dialog>
339 |   );
340 | }
341 | 


--------------------------------------------------------------------------------
/src/store/quizStore.ts:
--------------------------------------------------------------------------------
  1 | import { create } from 'zustand';
  2 | import { persist, createJSONStorage } from 'zustand/middleware';
  3 | import { Question, QuestionBank, QuestionRecord, QuestionType, QuestionOption } from '@/types/quiz';
  4 | import { v4 as uuidv4 } from 'uuid';
  5 | import { SIMILAR_QUESTIONS_PROMPT, callAI } from '@/constants/ai';
  6 | 
  7 | // 定义设置的接口
  8 | export interface QuizSettings {
  9 |   shufflePracticeOptions: boolean;
 10 |   shuffleReviewOptions: boolean;
 11 |   shufflePracticeQuestionOrder: boolean;
 12 |   shuffleReviewQuestionOrder: boolean;
 13 |   markMistakeAsCorrectedOnReviewSuccess: boolean;
 14 | 
 15 |   // 新的AI提供商设置
 16 |   aiProvider: 'deepseek' | 'alibaba';
 17 |   deepseekApiKey: string;
 18 |   deepseekBaseUrl: string; // 例如：https://api.deepseek.com
 19 |   alibabaApiKey: string;
 20 |   // 新增：题目查重开关
 21 |   checkDuplicateQuestion: boolean;
 22 |   // 阿里巴巴基础URL是固定的："https://dashscope.aliyuncs.com/compatible-mode/v1"
 23 |   // 阿里巴巴模型可以在这里存储，例如：qwenModel: string;
 24 | }
 25 | 
 26 | export interface QuizState {
 27 |   questionBanks: QuestionBank[];
 28 |   records: QuestionRecord[];
 29 |   settings: QuizSettings; // 设置状态，包括AI提供商配置
 30 | 
 31 |   // >>> 新增状态，用于相似题目功能
 32 |   isSimilarQuestionsModalOpen: boolean;
 33 |   generatingSimilarQuestions: boolean;
 34 |   similarQuestionsList: Question[]; 
 35 |   selectedOriginalQuestionsForSimilarity: Question[]; 
 36 |   // <<< 新增状态结束
 37 | 
 38 |   addQuestionBank: (name: string, description?: string) => QuestionBank;
 39 |   getQuestionBankById: (id: string) => QuestionBank | undefined;
 40 |   updateQuestionBank: (id: string, name: string, description?: string) => void;
 41 |   deleteQuestionBank: (id: string) => void;
 42 |   addQuestionToBank: (bankId: string, question: Omit<Question, 'id'>) => { question: Question | null; isDuplicate: boolean };
 43 |   updateQuestionInBank: (bankId: string, questionId: string, questionData: Partial<Omit<Question, 'id'>>) => Question | null;
 44 |   deleteQuestionFromBank: (bankId: string, questionId: string) => void;
 45 |   getQuestionById: (questionId: string) => { question: Question, bank: QuestionBank } | undefined;
 46 |   addRecord: (record: Omit<QuestionRecord, 'id'>) => void;
 47 |   clearRecords: (bankId?: string) => void;
 48 |   removeWrongRecordsByQuestionId: (questionIdToRemove: string) => void;
 49 |   
 50 |   // 通用设置操作
 51 |   setQuizSetting: <K extends keyof QuizSettings>(key: K, value: QuizSettings[K]) => void;
 52 |   resetQuizSettings: () => void;
 53 | 
 54 |   // >>> 新增操作，用于相似题目功能
 55 |   toggleSimilarQuestionsModal: (isOpen?: boolean) => void;
 56 |   setSelectedOriginalQuestionsForSimilarity: (questions: Question[]) => void;
 57 |   generateSimilarQuestions: (originalQuestions: Question[]) => Promise<void>; 
 58 |   importGeneratedQuestions: (selectedQuestions: Question[], targetBankId: string) => Promise<{ success: boolean; importedCount: number; skippedCount: number; error?: string }>;
 59 |   // <<< 新增操作结束
 60 | }
 61 | 
 62 | // 初始设置
 63 | const initialSettings: QuizSettings = {
 64 |   shufflePracticeOptions: false,
 65 |   shuffleReviewOptions: false,
 66 |   shufflePracticeQuestionOrder: false,
 67 |   shuffleReviewQuestionOrder: false,
 68 |   markMistakeAsCorrectedOnReviewSuccess: true,
 69 | 
 70 |   // AI提供商默认值
 71 |   aiProvider: 'deepseek',
 72 |   deepseekApiKey: '',
 73 |   deepseekBaseUrl: 'https://api.deepseek.com', // 默认为常用公共API
 74 |   alibabaApiKey: '',
 75 |   // 新增
 76 |   checkDuplicateQuestion: true,
 77 | };
 78 | 
 79 | export const useQuizStore = create<QuizState>()(
 80 |   persist(
 81 |     (set, get) => ({
 82 |       questionBanks: [],
 83 |       records: [],
 84 |       settings: initialSettings, // 初始化设置
 85 | 
 86 |       // >>> 初始化新增状态
 87 |       isSimilarQuestionsModalOpen: false,
 88 |       generatingSimilarQuestions: false,
 89 |       similarQuestionsList: [],
 90 |       selectedOriginalQuestionsForSimilarity: [],
 91 |       // <<< 初始化新增状态结束
 92 | 
 93 |       addQuestionBank: (name, description = '') => {
 94 |         const newBank: QuestionBank = { id: uuidv4(), name, description, questions: [], createdAt: Date.now(), updatedAt: Date.now() };
 95 |         set((state) => ({ questionBanks: [...state.questionBanks, newBank] }));
 96 |         return newBank;
 97 |       },
 98 |       getQuestionBankById: (id) => get().questionBanks.find(bank => bank.id === id),
 99 |       updateQuestionBank: (id, name, description) => {
100 |         set((state) => ({
101 |           questionBanks: state.questionBanks.map(bank =>
102 |             bank.id === id ? { ...bank, name, description: description ?? bank.description, updatedAt: Date.now() } : bank
103 |           ),
104 |         }));
105 |       },
106 |       deleteQuestionBank: (id) => {
107 |         set((state) => ({
108 |           questionBanks: state.questionBanks.filter(bank => bank.id !== id),
109 |           records: state.records.filter(record => {
110 |             const questionBank = state.questionBanks.find(qb => qb.questions.some(q => q.id === record.questionId));
111 |             return questionBank ? questionBank.id !== id : true;
112 |           })
113 |         }));
114 |       },
115 |       addQuestionToBank: (bankId, questionData) => {
116 |         const bank = get().getQuestionBankById(bankId);
117 |         if (!bank) {
118 |           return { question: null, isDuplicate: false };
119 |         }
120 |         // 只有开启查重时才查重
121 |         const checkDuplicate = get().settings.checkDuplicateQuestion;
122 |         let duplicateQuestion = undefined;
123 |         if (checkDuplicate) {
124 |           duplicateQuestion = bank.questions.find(
125 |             q => q.content.trim() === questionData.content.trim()
126 |           );
127 |         }
128 |         if (duplicateQuestion) {
129 |           return { question: null, isDuplicate: true };
130 |         }
131 |         // 不存在重复，添加新题目
132 |         const newQuestion: Question = { ...questionData, id: uuidv4() };
133 |         let updatedBank: QuestionBank | undefined;
134 |         set((state) => ({
135 |           questionBanks: state.questionBanks.map(bank => {
136 |             if (bank.id === bankId) {
137 |               updatedBank = { 
138 |                 ...bank, 
139 |                 questions: [...bank.questions, newQuestion], 
140 |                 updatedAt: Date.now() 
141 |               };
142 |               return updatedBank;
143 |             }
144 |             return bank;
145 |           }),
146 |         }));
147 |         return { 
148 |           question: updatedBank ? newQuestion : null, 
149 |           isDuplicate: false 
150 |         };
151 |       },
152 |       updateQuestionInBank: (bankId, questionId, questionData) => {
153 |         let updatedQuestion : Question | null = null;
154 |         set((state) => ({
155 |           questionBanks: state.questionBanks.map(bank => {
156 |             if (bank.id === bankId) {
157 |               return {
158 |                 ...bank,
159 |                 questions: bank.questions.map(q => {
160 |                   if (q.id === questionId) {
161 |                     updatedQuestion = { ...q, ...questionData, id: questionId };
162 |                     return updatedQuestion;
163 |                   }
164 |                   return q;
165 |                 }),
166 |                 updatedAt: Date.now(),
167 |               };
168 |             }
169 |             return bank;
170 |           }),
171 |         }));
172 |         return updatedQuestion;
173 |       },
174 |       deleteQuestionFromBank: (bankId, questionId) => {
175 |         set((state) => ({
176 |           questionBanks: state.questionBanks.map(bank =>
177 |             bank.id === bankId
178 |               ? { ...bank, questions: bank.questions.filter(q => q.id !== questionId), updatedAt: Date.now() }
179 |               : bank
180 |           ),
181 |           records: state.records.filter(record => record.questionId !== questionId)
182 |         }));
183 |       },
184 |       getQuestionById: (questionId) => {
185 |         for (const bank of get().questionBanks) {
186 |           const question = bank.questions.find(q => q.id === questionId);
187 |           if (question) {
188 |             return { question, bank };
189 |           }
190 |         }
191 |         return undefined;
192 |       },
193 |       addRecord: (record) => {
194 |         const newRecord: QuestionRecord = { ...record, id: uuidv4() };
195 |         set((state) => ({ records: [...state.records, newRecord] }));
196 |       },
197 |       clearRecords: (bankId) => {
198 |         if (bankId) {
199 |             const bank = get().getQuestionBankById(bankId);
200 |             if (!bank) return;
201 |             const questionIdsInBank = bank.questions.map(q => q.id);
202 |             set(state => ({
203 |                 records: state.records.filter(r => !questionIdsInBank.includes(r.questionId))
204 |             }));
205 |         } else {
206 |             set({ records: [] });
207 |         }
208 |       },
209 |       removeWrongRecordsByQuestionId: (questionIdToRemove) => {
210 |         set((state) => ({
211 |           records: state.records.filter(record => 
212 |             !(record.questionId === questionIdToRemove && !record.isCorrect)
213 |           ),
214 |         }));
215 |       },
216 |       
217 |       // Settings actions
218 |       setQuizSetting: (key, value) => {
219 |         set((state) => ({
220 |           settings: {
221 |             ...state.settings,
222 |             [key]: value,
223 |           },
224 |         }));
225 |       },
226 |       resetQuizSettings: () => {
227 |         set((state) => ({ // Pass the current state to ensure other parts of the state are not affected
228 |             ...state, 
229 |             settings: initialSettings 
230 |         }));
231 |       },
232 | 
233 |       // >>> 实现新增操作
234 |       toggleSimilarQuestionsModal: (isOpen) => {
235 |         set((state) => ({ isSimilarQuestionsModalOpen: isOpen === undefined ? !state.isSimilarQuestionsModalOpen : isOpen }));
236 |       },
237 |       setSelectedOriginalQuestionsForSimilarity: (questions) => {
238 |         set({ selectedOriginalQuestionsForSimilarity: questions });
239 |       },
240 |       generateSimilarQuestions: async (originalQuestions) => {
241 |         set({
242 |           generatingSimilarQuestions: true,
243 |           similarQuestionsList: [], 
244 |           selectedOriginalQuestionsForSimilarity: originalQuestions,
245 |         });
246 |         if (!get().isSimilarQuestionsModalOpen) {
247 |           set({ isSimilarQuestionsModalOpen: true });
248 |         }
249 | 
250 |         try {
251 |           // 获取AI提供商相关配置
252 |           const { aiProvider, deepseekApiKey, deepseekBaseUrl, alibabaApiKey } = get().settings;
253 |           const apiKey = aiProvider === 'deepseek' ? deepseekApiKey : alibabaApiKey;
254 |           const baseUrl = aiProvider === 'deepseek' ? deepseekBaseUrl : undefined;
255 |           
256 |           if (!apiKey) {
257 |             throw new Error(`未配置${aiProvider === 'deepseek' ? 'DeepSeek' : '阿里云'}的API密钥`);
258 |           }
259 | 
260 |           // 准备输入数据：将原题转换为适当格式
261 |           const originalQuestionsData = originalQuestions.map(q => {
262 |             return {
263 |               content: q.content,
264 |               type: q.type,
265 |               options: q.options,
266 |               answer: q.answer,
267 |               tags: q.tags || []
268 |             };
269 |           });
270 | 
271 |           // 构建消息
272 |           const messages = [
273 |             { role: 'system', content: SIMILAR_QUESTIONS_PROMPT },
274 |             { role: 'user', content: `请基于以下题目生成相似题目：\n${JSON.stringify(originalQuestionsData, null, 2)}` }
275 |           ];
276 | 
277 |           console.log('Calling AI to generate similar questions based on:', originalQuestionsData);
278 |           
279 |           // 调用AI接口
280 |           const response = await callAI(aiProvider, messages, apiKey, baseUrl);
281 |           console.log('AI Response:', response);
282 |           
283 |           // 解析API返回的JSON
284 |           let generatedQuestionsData;
285 |           try {
286 |             // 尝试直接解析返回的内容为JSON
287 |             generatedQuestionsData = JSON.parse(response);
288 |           } catch (e) {
289 |             console.error('解析AI返回的JSON失败，尝试提取JSON部分', e);
290 |             
291 |             // 如果直接解析失败，尝试从返回的文本中提取JSON部分
292 |             const jsonMatch = response.match(/\[\s*\{[\s\S]*\}\s*\]/);
293 |             if (jsonMatch) {
294 |               try {
295 |                 generatedQuestionsData = JSON.parse(jsonMatch[0]);
296 |               } catch (e2) {
297 |                 console.error('从返回文本中提取JSON失败', e2);
298 |                 throw new Error('无法解析AI返回的数据');
299 |               }
300 |             } else {
301 |               throw new Error('AI返回的数据不包含有效的JSON');
302 |             }
303 |           }
304 | 
305 |           if (!Array.isArray(generatedQuestionsData)) {
306 |             throw new Error('AI返回的数据格式不正确，应为题目数组');
307 |           }
308 | 
309 |           // 处理返回的题目数据，补充必要的字段
310 |           const processedQuestions: Question[] = generatedQuestionsData.map(q => {
311 |             // 确保选项有ID
312 |             let processedOptions: QuestionOption[] = [];
313 |             if (q.options && Array.isArray(q.options)) {
314 |               processedOptions = q.options.map((opt: any, idx: number) => {
315 |                 // 如果选项没有ID，生成一个
316 |                 if (!opt.id) {
317 |                   return { ...opt, id: uuidv4() };
318 |                 }
319 |                 return opt;
320 |               });
321 |             }
322 | 
323 |             // 填充完整的题目对象
324 |             return {
325 |               id: uuidv4(),
326 |               content: q.content,
327 |               type: q.type,
328 |               options: processedOptions,
329 |               answer: q.answer,
330 |               explanation: q.explanation || '',
331 |               tags: q.tags || [],
332 |               createdAt: Date.now(),
333 |               updatedAt: Date.now()
334 |             };
335 |           });
336 | 
337 |           console.log('Processed generated questions:', processedQuestions);
338 |           
339 |           // 更新状态
340 |           set({
341 |             similarQuestionsList: processedQuestions,
342 |             generatingSimilarQuestions: false,
343 |           });
344 |         } catch (error) {
345 |           console.error('生成相似题目失败:', error);
346 |           // 出错时显示一个提示，并重置状态
347 |           alert(`生成相似题目失败: ${error instanceof Error ? error.message : '未知错误'}`);
348 |           set({
349 |             similarQuestionsList: [],
350 |             generatingSimilarQuestions: false,
351 |           });
352 |         }
353 |       },
354 |       importGeneratedQuestions: async (selectedQuestions, targetBankId) => {
355 |         const { addQuestionToBank, getQuestionBankById } = get();
356 |         let importedCount = 0;
357 |         let skippedCount = 0;
358 | 
359 |         if (!getQuestionBankById(targetBankId)) {
360 |             return { success: false, importedCount, skippedCount, error: "目标题库不存在" };
361 |         }
362 | 
363 |         for (const question of selectedQuestions) {
364 |           const { id, ...questionData } = question; // id is not needed for addQuestionToBank
365 |           const result = addQuestionToBank(targetBankId, questionData);
366 |           if (result.question) {
367 |             importedCount++;
368 |           } else if (result.isDuplicate) {
369 |             skippedCount++;
370 |             console.warn(`Question (content starting with "${question.content.substring(0,30)}...") was a duplicate and skipped.`);
371 |           } else {
372 |             console.error(`Failed to import question (content starting with "${question.content.substring(0,30)}...") for unknown reasons.`);
373 |           }
374 |         }
375 |         return { success: true, importedCount, skippedCount };
376 |       },
377 |       // <<< 实现新增操作结束
378 |     }),
379 |     {
380 |       name: 'quiz-storage', 
381 |       storage: createJSONStorage(() => localStorage),
382 |       partialize: (state) => ({ 
383 |         questionBanks: state.questionBanks, 
384 |         records: state.records, 
385 |         settings: state.settings, // Persist the entire settings object
386 |       }),
387 |       merge: (persistedState, currentState) => {
388 |         const merged = { ...currentState, ...(persistedState as Partial<QuizState>) };
389 |         if (!(persistedState as QuizState)?.settings) {
390 |           merged.settings = initialSettings;
391 |         } else {
392 |           merged.settings = { ...initialSettings, ...(persistedState as QuizState).settings };
393 |         }
394 |         return merged;
395 |       },
396 |     }
397 |   )
398 | );
399 | 


--------------------------------------------------------------------------------