layout.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>{% block title %}知了数学题库系统{% endblock %}</title>
  7. <!-- Favicon -->
  8. <link rel="icon" type="image/jpeg" href="{{ url_for('static', filename='cat.jpg') }}">
  9. <!-- Tailwind CSS -->
  10. <script src="https://cdn.tailwindcss.com"></script>
  11. <!-- KaTeX -->
  12. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
  13. <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
  14. <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
  15. <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
  16. <!-- Remix Icon -->
  17. <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
  18. <style>
  19. @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  20. * {
  21. margin: 0;
  22. padding: 0;
  23. box-sizing: border-box;
  24. }
  25. body {
  26. font-family: 'Inter', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
  27. background-color: #F8F9FA;
  28. color: #1D1D1F;
  29. overflow-x: hidden;
  30. }
  31. /* 左侧导航栏 */
  32. .sidebar {
  33. position: fixed;
  34. left: 0;
  35. top: 0;
  36. width: 260px;
  37. height: 100vh;
  38. background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  39. border-right: 1px solid rgba(0, 0, 0, 0.06);
  40. display: flex;
  41. flex-direction: column;
  42. z-index: 1000;
  43. box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04);
  44. transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  45. overflow: visible;
  46. }
  47. .sidebar.collapsed {
  48. width: 100px;
  49. overflow: visible;
  50. }
  51. .sidebar-header {
  52. padding: 24px 20px;
  53. border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  54. display: flex;
  55. align-items: center;
  56. gap: 12px;
  57. position: relative;
  58. }
  59. .sidebar.collapsed .sidebar-header {
  60. padding: 24px 12px;
  61. justify-content: center;
  62. }
  63. .sidebar-toggle {
  64. position: absolute;
  65. right: -12px;
  66. top: 50%;
  67. transform: translateY(-50%);
  68. width: 24px;
  69. height: 24px;
  70. border-radius: 50%;
  71. background: #FFFFFF;
  72. border: 1px solid rgba(0, 0, 0, 0.1);
  73. display: flex;
  74. align-items: center;
  75. justify-content: center;
  76. cursor: pointer;
  77. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  78. transition: all 0.2s;
  79. z-index: 10;
  80. }
  81. .sidebar-toggle:hover {
  82. background: #F8F9FA;
  83. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  84. }
  85. .sidebar-toggle i {
  86. font-size: 14px;
  87. color: #6366F1;
  88. transition: transform 0.3s;
  89. }
  90. .sidebar.collapsed .sidebar-toggle i {
  91. transform: rotate(180deg);
  92. }
  93. .sidebar-logo {
  94. width: 40px;
  95. height: 40px;
  96. border-radius: 10px;
  97. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  98. display: flex;
  99. align-items: center;
  100. justify-content: center;
  101. font-size: 20px;
  102. color: white;
  103. font-weight: 700;
  104. flex-shrink: 0;
  105. overflow: hidden;
  106. }
  107. .sidebar-title {
  108. flex: 1;
  109. transition: opacity 0.3s;
  110. overflow: hidden;
  111. }
  112. .sidebar.collapsed .sidebar-title {
  113. opacity: 0;
  114. width: 0;
  115. height: 0;
  116. overflow: hidden;
  117. }
  118. .sidebar-title-main {
  119. font-size: 18px;
  120. font-weight: 700;
  121. color: #1D1D1F;
  122. line-height: 1.2;
  123. white-space: nowrap;
  124. }
  125. .sidebar-title-sub {
  126. font-size: 12px;
  127. color: #86868B;
  128. margin-top: 2px;
  129. white-space: nowrap;
  130. }
  131. .sidebar-nav {
  132. flex: 1;
  133. padding: 16px 12px;
  134. overflow-y: auto;
  135. overflow-x: visible;
  136. }
  137. .sidebar.collapsed .sidebar-nav {
  138. overflow-x: visible;
  139. }
  140. .nav-section {
  141. margin-bottom: 24px;
  142. }
  143. .nav-section-title {
  144. font-size: 11px;
  145. font-weight: 600;
  146. color: #86868B;
  147. text-transform: uppercase;
  148. letter-spacing: 0.5px;
  149. padding: 0 12px;
  150. margin-bottom: 8px;
  151. transition: opacity 0.3s;
  152. white-space: nowrap;
  153. overflow: hidden;
  154. }
  155. .sidebar.collapsed .nav-section-title {
  156. opacity: 0;
  157. height: 0;
  158. padding: 0;
  159. margin: 0;
  160. }
  161. .nav-item {
  162. display: flex;
  163. align-items: center;
  164. gap: 12px;
  165. padding: 12px 16px;
  166. margin-bottom: 4px;
  167. border-radius: 10px;
  168. color: #1D1D1F;
  169. text-decoration: none;
  170. font-size: 14px;
  171. font-weight: 500;
  172. transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  173. cursor: pointer;
  174. position: relative;
  175. }
  176. .sidebar.collapsed .nav-item {
  177. padding: 12px;
  178. justify-content: center;
  179. }
  180. .nav-item span {
  181. transition: opacity 0.3s;
  182. white-space: nowrap;
  183. }
  184. .sidebar.collapsed .nav-item span {
  185. opacity: 0;
  186. width: 0;
  187. overflow: hidden;
  188. }
  189. .sidebar.collapsed .nav-item .ml-auto {
  190. display: none;
  191. }
  192. /* Tooltip样式 */
  193. .nav-item-tooltip {
  194. position: fixed;
  195. padding: 6px 10px;
  196. background: #1D1D1F;
  197. color: #FFFFFF;
  198. font-size: 12px;
  199. font-weight: 500;
  200. border-radius: 6px;
  201. white-space: nowrap;
  202. opacity: 0;
  203. pointer-events: none;
  204. transition: opacity 0.2s ease-in-out;
  205. z-index: 99999;
  206. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  207. visibility: hidden;
  208. }
  209. .nav-item-tooltip::before {
  210. content: '';
  211. position: absolute;
  212. right: 100%;
  213. top: 50%;
  214. transform: translateY(-50%);
  215. border: 5px solid transparent;
  216. border-right-color: #1D1D1F;
  217. }
  218. .sidebar:not(.collapsed) .nav-item-tooltip {
  219. display: none !important;
  220. }
  221. .nav-item i {
  222. font-size: 20px;
  223. width: 20px;
  224. height: 20px;
  225. display: flex;
  226. align-items: center;
  227. justify-content: center;
  228. color: #86868B;
  229. transition: color 0.2s;
  230. }
  231. .nav-item:hover {
  232. background: rgba(99, 102, 241, 0.08);
  233. color: #6366F1;
  234. }
  235. .nav-item:hover i {
  236. color: #6366F1;
  237. }
  238. .nav-item.active {
  239. background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
  240. color: #6366F1;
  241. font-weight: 600;
  242. }
  243. .nav-item.active i {
  244. color: #6366F1;
  245. }
  246. .nav-item.active::before {
  247. content: '';
  248. position: absolute;
  249. left: 0;
  250. top: 50%;
  251. transform: translateY(-50%);
  252. width: 3px;
  253. height: 20px;
  254. background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  255. border-radius: 0 2px 2px 0;
  256. }
  257. /* 主内容区 */
  258. .main-content {
  259. margin-left: 260px;
  260. min-height: 100vh;
  261. background: #F8F9FA;
  262. transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  263. position: relative;
  264. z-index: 1;
  265. }
  266. .sidebar.collapsed ~ .main-content {
  267. margin-left: 100px;
  268. }
  269. .main-header {
  270. background: #FFFFFF;
  271. border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  272. padding: 16px 32px;
  273. display: flex;
  274. align-items: center;
  275. justify-content: space-between;
  276. position: sticky;
  277. top: 0;
  278. z-index: 100;
  279. backdrop-filter: blur(20px);
  280. background: rgba(255, 255, 255, 0.8);
  281. }
  282. .main-header-title {
  283. font-size: 20px;
  284. font-weight: 700;
  285. color: #1D1D1F;
  286. }
  287. .main-header-actions {
  288. display: flex;
  289. align-items: center;
  290. gap: 12px;
  291. }
  292. .main-body {
  293. padding: 32px;
  294. max-width: 100%;
  295. }
  296. .apple-card {
  297. background: rgba(255, 255, 255, 0.9);
  298. backdrop-filter: blur(20px);
  299. border-radius: 16px;
  300. border: 1px solid rgba(0,0,0,0.06);
  301. transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  302. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  303. }
  304. .apple-card:hover {
  305. transform: translateY(-2px);
  306. box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  307. }
  308. .btn-apple {
  309. border-radius: 10px;
  310. padding: 10px 20px;
  311. font-weight: 600;
  312. font-size: 14px;
  313. transition: all 0.2s;
  314. }
  315. /* 滚动条样式 */
  316. .sidebar-nav::-webkit-scrollbar {
  317. width: 6px;
  318. }
  319. .sidebar-nav::-webkit-scrollbar-track {
  320. background: transparent;
  321. }
  322. .sidebar-nav::-webkit-scrollbar-thumb {
  323. background: rgba(0, 0, 0, 0.2);
  324. border-radius: 3px;
  325. }
  326. .sidebar-nav::-webkit-scrollbar-thumb:hover {
  327. background: rgba(0, 0, 0, 0.3);
  328. }
  329. /* 修复 SVG 在网页中的显示 */
  330. svg {
  331. max-width: 100%;
  332. height: auto;
  333. margin: 1rem auto;
  334. display: block;
  335. }
  336. /* 题目中的图片尺寸限制 */
  337. .math-render img,
  338. #stem-container img,
  339. .apple-card img:not([class*="rounded-full"]):not([class*="object-cover"]) {
  340. max-width: 400px !important;
  341. max-height: 300px !important;
  342. width: auto !important;
  343. height: auto !important;
  344. object-fit: contain;
  345. display: block;
  346. margin: 0.5rem auto;
  347. }
  348. /* 打印时隐藏 UI 元素 */
  349. @media print {
  350. .no-print { display: none !important; }
  351. .apple-card { border: none; background: white; backdrop-filter: none; }
  352. body { background: white; }
  353. }
  354. /* 数学公式容器样式 */
  355. .math-render {
  356. line-height: 1.8;
  357. font-size: 1.1rem;
  358. }
  359. /* 合格率进度条渐变 */
  360. .progress-gradient {
  361. background: linear-gradient(to right, #ef4444 0%, #f59e0b 50%, #22c55e 100%);
  362. }
  363. /* 响应式 */
  364. @media (max-width: 1024px) {
  365. .sidebar {
  366. transform: translateX(-100%);
  367. transition: transform 0.3s;
  368. }
  369. .sidebar.collapsed {
  370. transform: translateX(0);
  371. width: 100px;
  372. }
  373. .main-content {
  374. margin-left: 0;
  375. }
  376. .sidebar.collapsed ~ .main-content {
  377. margin-left: 100px;
  378. }
  379. }
  380. /* 搜索框折叠样式 */
  381. .sidebar.collapsed .nav-section form {
  382. padding: 0 12px;
  383. }
  384. .sidebar.collapsed .nav-section form input {
  385. opacity: 0;
  386. width: 0;
  387. padding: 0;
  388. }
  389. .sidebar.collapsed .nav-section form .flex {
  390. justify-content: center;
  391. }
  392. .sidebar.collapsed .nav-section form .flex:hover .nav-item-tooltip {
  393. opacity: 1;
  394. }
  395. .nav-item {
  396. position: relative;
  397. }
  398. /* 修复 SVG 在网页中的显示 */
  399. svg {
  400. max-width: 100%;
  401. height: auto;
  402. margin: 1rem auto;
  403. display: block;
  404. }
  405. /* 题目中的图片尺寸限制 */
  406. .math-render img,
  407. #stem-container img,
  408. .apple-card img:not([class*="rounded-full"]):not([class*="object-cover"]) {
  409. max-width: 400px !important;
  410. max-height: 300px !important;
  411. width: auto !important;
  412. height: auto !important;
  413. object-fit: contain;
  414. display: block;
  415. margin: 0.5rem auto;
  416. }
  417. /* 打印时隐藏 UI 元素 */
  418. @media print {
  419. .no-print { display: none !important; }
  420. .apple-card { border: none; background: white; backdrop-filter: none; }
  421. body { background: white; }
  422. .sidebar { display: none !important; }
  423. .main-content { margin-left: 0 !important; }
  424. }
  425. /* 数学公式容器样式 */
  426. .math-render {
  427. line-height: 1.8;
  428. font-size: 1.1rem;
  429. }
  430. /* 合格率进度条渐变 */
  431. .progress-gradient {
  432. background: linear-gradient(to right, #ef4444 0%, #f59e0b 50%, #22c55e 100%);
  433. }
  434. </style>
  435. </head>
  436. <body class="min-h-screen">
  437. <!-- 左侧导航栏 -->
  438. <aside class="sidebar no-print" id="sidebar">
  439. <div class="sidebar-header">
  440. <div class="sidebar-logo">
  441. <img src="{{ url_for('static', filename='cat.jpg') }}" alt="Math Question Bank" class="w-full h-full object-cover rounded-lg" onerror="this.style.display='none'; this.parentElement.innerHTML='M';">
  442. </div>
  443. <div class="sidebar-title">
  444. <div class="sidebar-title-main">知了数学</div>
  445. <div class="sidebar-title-sub">题库管理系统</div>
  446. </div>
  447. <button class="sidebar-toggle" id="sidebar-toggle" onclick="toggleSidebar()" title="折叠/展开菜单">
  448. <i class="ri-arrow-left-s-line"></i>
  449. </button>
  450. </div>
  451. <nav class="sidebar-nav">
  452. <div class="nav-section">
  453. <div class="nav-section-title">主要功能</div>
  454. <a href="/" class="nav-item {% if request.path == '/' %}active{% endif %}">
  455. <i class="ri-home-4-line"></i>
  456. <span>首页</span>
  457. <div class="nav-item-tooltip">首页</div>
  458. </a>
  459. <a href="/question_management" class="nav-item {% if request.path == '/question_management' %}active{% endif %}">
  460. <i class="ri-file-list-line"></i>
  461. <span>题目管理</span>
  462. <div class="nav-item-tooltip">题目管理</div>
  463. </a>
  464. <a href="/kp_management" class="nav-item {% if request.path.startswith('/kp_management') %}active{% endif %}">
  465. <i class="ri-book-open-line"></i>
  466. <span>知识点管理</span>
  467. <div class="nav-item-tooltip">知识点管理</div>
  468. </a>
  469. <a href="/textbook_management" class="nav-item {% if request.path.startswith('/textbook_management') %}active{% endif %}">
  470. <i class="ri-book-2-line"></i>
  471. <span>教材管理</span>
  472. <div class="nav-item-tooltip">教材管理</div>
  473. </a>
  474. <a href="/material_management" class="nav-item {% if request.path.startswith('/material_management') %}active{% endif %}">
  475. <i class="ri-folder-line"></i>
  476. <span>资料管理</span>
  477. <div class="nav-item-tooltip">资料管理</div>
  478. </a>
  479. </div>
  480. <div class="nav-section">
  481. <div class="nav-section-title">常用工具</div>
  482. <a href="https://math-analysis.chunsunqiuzhu.com" target="_blank" rel="noopener noreferrer" class="nav-item">
  483. <i class="ri-file-text-line"></i>
  484. <span>试卷解析工具</span>
  485. <i class="ri-external-link-line ml-auto text-xs"></i>
  486. <div class="nav-item-tooltip">试卷解析工具</div>
  487. </a>
  488. <a href="http://192.168.124.8:9300/" target="_blank" rel="noopener noreferrer" class="nav-item">
  489. <i class="ri-links-line"></i>
  490. <span>题目匹配知识点</span>
  491. <i class="ri-external-link-line ml-auto text-xs"></i>
  492. <div class="nav-item-tooltip">题目匹配知识点</div>
  493. </a>
  494. </div>
  495. <div class="nav-section">
  496. <div class="nav-section-title">快速操作</div>
  497. <form action="/search" method="get" class="mb-2 nav-item-form">
  498. <div class="flex items-center gap-2 px-4 py-2 bg-gray-50 rounded-lg border border-gray-200 relative">
  499. <i class="ri-search-line text-gray-400"></i>
  500. <input
  501. name="q"
  502. type="text"
  503. placeholder="搜索题号"
  504. class="flex-1 bg-transparent border-none outline-none text-sm"
  505. onkeypress="if(event.key==='Enter') this.form.submit()"
  506. />
  507. <div class="nav-item-tooltip">搜索题号</div>
  508. </div>
  509. </form>
  510. <form action="/search_id" method="get" class="mb-2 nav-item-form">
  511. <div class="flex items-center gap-2 px-4 py-2 bg-gray-50 rounded-lg border border-gray-200 relative">
  512. <i class="ri-hashtag text-gray-400"></i>
  513. <input
  514. name="id"
  515. type="text"
  516. placeholder="搜索ID"
  517. class="flex-1 bg-transparent border-none outline-none text-sm"
  518. onkeypress="if(event.key==='Enter') this.form.submit()"
  519. />
  520. <div class="nav-item-tooltip">搜索ID</div>
  521. </div>
  522. </form>
  523. </div>
  524. {% block sidebar_extra %}{% endblock %}
  525. </nav>
  526. </aside>
  527. <!-- 主内容区 -->
  528. <div class="main-content">
  529. <header class="main-header no-print">
  530. <div>
  531. <h1 class="main-header-title">{% block page_title %}知了数学题库管理系统{% endblock %}</h1>
  532. </div>
  533. <div class="main-header-actions">
  534. {% block header_actions %}{% endblock %}
  535. </div>
  536. </header>
  537. <main class="main-body">
  538. {% block content %}{% endblock %}
  539. </main>
  540. </div>
  541. <script>
  542. // 检查并获取用户姓名
  543. function getUserName() {
  544. return localStorage.getItem('user_name') || null;
  545. }
  546. // 设置用户姓名
  547. function setUserName(name) {
  548. if (name && name.trim()) {
  549. localStorage.setItem('user_name', name.trim());
  550. }
  551. }
  552. // 显示姓名输入弹窗
  553. function showNameInputModal() {
  554. const userName = getUserName();
  555. if (userName) {
  556. return; // 已有姓名,不显示弹窗
  557. }
  558. const modal = document.createElement('div');
  559. modal.id = 'name-input-modal';
  560. modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center;';
  561. const dialog = document.createElement('div');
  562. dialog.style.cssText = 'background:white;padding:2rem;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:400px;width:90%;text-align:center;';
  563. const title = document.createElement('div');
  564. title.style.cssText = 'font-size:1.25rem;font-weight:bold;color:#333;margin-bottom:1rem;';
  565. title.textContent = '请输入您的姓名';
  566. const input = document.createElement('input');
  567. input.type = 'text';
  568. input.placeholder = '请输入姓名';
  569. input.style.cssText = 'width:100%;padding:0.75rem;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;margin-bottom:1.5rem;outline:none;transition:border-color 0.2s;';
  570. input.addEventListener('focus', function() {
  571. this.style.borderColor = '#3b82f6';
  572. });
  573. input.addEventListener('blur', function() {
  574. this.style.borderColor = '#e5e7eb';
  575. });
  576. const btn = document.createElement('button');
  577. btn.style.cssText = 'background:#3b82f6;color:white;border:none;padding:0.75rem 2rem;border-radius:8px;font-size:1rem;cursor:pointer;font-weight:600;width:100%;transition:background 0.2s;';
  578. btn.textContent = '确定';
  579. btn.addEventListener('mouseenter', function() {
  580. this.style.background = '#2563eb';
  581. });
  582. btn.addEventListener('mouseleave', function() {
  583. this.style.background = '#3b82f6';
  584. });
  585. const handleConfirm = () => {
  586. const name = input.value.trim();
  587. if (!name) {
  588. input.style.borderColor = '#ef4444';
  589. input.focus();
  590. return;
  591. }
  592. setUserName(name);
  593. document.body.removeChild(modal);
  594. };
  595. btn.onclick = handleConfirm;
  596. input.onkeypress = function(e) {
  597. if (e.key === 'Enter') {
  598. handleConfirm();
  599. }
  600. };
  601. dialog.appendChild(title);
  602. dialog.appendChild(input);
  603. dialog.appendChild(btn);
  604. modal.appendChild(dialog);
  605. document.body.appendChild(modal);
  606. // 聚焦输入框
  607. setTimeout(() => input.focus(), 100);
  608. }
  609. // 侧边栏折叠/展开功能
  610. function toggleSidebar() {
  611. const sidebar = document.getElementById('sidebar');
  612. if (sidebar) {
  613. sidebar.classList.toggle('collapsed');
  614. // 保存状态到localStorage
  615. const isCollapsed = sidebar.classList.contains('collapsed');
  616. localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
  617. }
  618. }
  619. // 恢复侧边栏状态
  620. function restoreSidebarState() {
  621. const sidebar = document.getElementById('sidebar');
  622. const savedState = localStorage.getItem('sidebarCollapsed');
  623. if (sidebar && savedState === 'true') {
  624. sidebar.classList.add('collapsed');
  625. }
  626. }
  627. // Tooltip位置计算和显示
  628. function setupTooltips() {
  629. const sidebar = document.getElementById('sidebar');
  630. if (!sidebar || !sidebar.classList.contains('collapsed')) return;
  631. const navItems = document.querySelectorAll('.sidebar.collapsed .nav-item, .sidebar.collapsed .nav-section form .flex');
  632. navItems.forEach(item => {
  633. const tooltip = item.querySelector('.nav-item-tooltip');
  634. if (!tooltip) return;
  635. item.addEventListener('mouseenter', function(e) {
  636. const rect = item.getBoundingClientRect();
  637. tooltip.style.left = (rect.right + 8) + 'px';
  638. tooltip.style.top = (rect.top + rect.height / 2) + 'px';
  639. tooltip.style.transform = 'translateY(-50%)';
  640. tooltip.style.opacity = '1';
  641. tooltip.style.visibility = 'visible';
  642. });
  643. item.addEventListener('mouseleave', function() {
  644. tooltip.style.opacity = '0';
  645. tooltip.style.visibility = 'hidden';
  646. });
  647. });
  648. }
  649. // 监听侧边栏折叠状态变化
  650. function observeSidebarCollapse() {
  651. const sidebar = document.getElementById('sidebar');
  652. if (!sidebar) return;
  653. const observer = new MutationObserver(function(mutations) {
  654. mutations.forEach(function(mutation) {
  655. if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
  656. setTimeout(setupTooltips, 100);
  657. }
  658. });
  659. });
  660. observer.observe(sidebar, {
  661. attributes: true,
  662. attributeFilter: ['class']
  663. });
  664. }
  665. document.addEventListener("DOMContentLoaded", function() {
  666. // 恢复侧边栏状态
  667. restoreSidebarState();
  668. // 设置tooltip
  669. setTimeout(setupTooltips, 100);
  670. observeSidebarCollapse();
  671. // 检查是否需要显示姓名输入弹窗
  672. showNameInputModal();
  673. renderMathInElement(document.body, {
  674. delimiters: [
  675. {left: "$$", right: "$$", display: true},
  676. {left: "$", right: "$", display: false},
  677. {left: "\\(", right: "\\)", display: false},
  678. {left: "\\[", right: "\\]", display: true}
  679. ],
  680. throwOnError : false
  681. });
  682. });
  683. // 自定义弹窗函数(支持空格键确认)
  684. window.customAlert = function(message, callback) {
  685. const modal = document.createElement('div');
  686. modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:9999;display:flex;align-items:center;justify-content:center;';
  687. const dialog = document.createElement('div');
  688. dialog.style.cssText = 'background:white;padding:2rem;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.2);max-width:400px;text-align:center;';
  689. const msg = document.createElement('div');
  690. msg.style.cssText = 'margin-bottom:1.5rem;font-size:1rem;color:#333;';
  691. msg.textContent = message;
  692. const btn = document.createElement('button');
  693. btn.style.cssText = 'background:#007AFF;color:white;border:none;padding:0.75rem 2rem;border-radius:8px;font-size:1rem;cursor:pointer;font-weight:600;';
  694. btn.textContent = '确定';
  695. const handleConfirm = () => {
  696. document.body.removeChild(modal);
  697. if (callback) callback();
  698. };
  699. btn.onclick = handleConfirm;
  700. // 监听空格键
  701. const handleKeyPress = (e) => {
  702. if (e.code === 'Space' || e.key === ' ') {
  703. e.preventDefault();
  704. handleConfirm();
  705. }
  706. };
  707. document.addEventListener('keydown', handleKeyPress);
  708. btn.addEventListener('click', () => {
  709. document.removeEventListener('keydown', handleKeyPress);
  710. });
  711. dialog.appendChild(msg);
  712. dialog.appendChild(btn);
  713. modal.appendChild(dialog);
  714. document.body.appendChild(modal);
  715. // 点击背景关闭
  716. modal.onclick = (e) => {
  717. if (e.target === modal) {
  718. document.removeEventListener('keydown', handleKeyPress);
  719. handleConfirm();
  720. }
  721. };
  722. btn.focus();
  723. }
  724. async function postAudit(code, reason) {
  725. const res = await fetch('/audit', {
  726. method: 'POST',
  727. headers: {'Content-Type': 'application/json'},
  728. body: JSON.stringify({question_code: code, audit_reason: reason})
  729. });
  730. const result = await res.json();
  731. if(result.success) {
  732. // 自动跳转下一题
  733. const nextBtn = document.getElementById('next-btn');
  734. if(nextBtn) nextBtn.click();
  735. else window.location.reload();
  736. } else {
  737. customAlert('审核失败: ' + result.error);
  738. }
  739. }
  740. // 录入题目按钮处理函数
  741. </script>
  742. </body>
  743. </html>