ui-design-mockups-v2.html 34 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196
  1. <!-- Generated by Trae Work -->
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>青幕AI写作 · UI 高保真设计稿 v2</title>
  8. <style>
  9. :root {
  10. --bg: #fafafa;
  11. --surface: #ffffff;
  12. --ink: #1a1a1a;
  13. --ink-secondary: #4a4a4a;
  14. --muted: #8a8a8a;
  15. --rule: #e8e8e8;
  16. --rule-strong: #d0d0d0;
  17. --accent: #2563eb;
  18. --accent-muted: rgba(37, 99, 235, 0.08);
  19. --paper: #f7f5f0;
  20. --charcoal: #2d2d2d;
  21. --cinnabar: #c45c48;
  22. --radius-sm: 6px;
  23. --radius-md: 8px;
  24. --radius-lg: 12px;
  25. --shadow-soft: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  26. }
  27. * { box-sizing: border-box; }
  28. html { scroll-behavior: smooth; }
  29. body {
  30. margin: 0;
  31. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  32. background: var(--bg);
  33. color: var(--ink);
  34. line-height: 1.6;
  35. -webkit-font-smoothing: antialiased;
  36. }
  37. .container {
  38. max-width: 1160px;
  39. margin: 0 auto;
  40. padding: 64px 32px;
  41. }
  42. header {
  43. text-align: center;
  44. margin-bottom: 80px;
  45. padding-bottom: 48px;
  46. border-bottom: 1px solid var(--rule);
  47. }
  48. header h1 {
  49. font-size: 2rem;
  50. font-weight: 600;
  51. margin: 0 0 12px;
  52. letter-spacing: -0.01em;
  53. color: var(--ink);
  54. }
  55. header p {
  56. font-size: 1rem;
  57. color: var(--muted);
  58. max-width: 560px;
  59. margin: 0 auto;
  60. line-height: 1.7;
  61. }
  62. .section {
  63. margin-bottom: 96px;
  64. }
  65. .section-title {
  66. font-size: 1.5rem;
  67. font-weight: 600;
  68. margin-bottom: 12px;
  69. color: var(--ink);
  70. }
  71. .section-desc {
  72. color: var(--muted);
  73. margin-bottom: 40px;
  74. font-size: 0.95rem;
  75. line-height: 1.7;
  76. }
  77. .two-col {
  78. display: grid;
  79. grid-template-columns: repeat(2, 1fr);
  80. gap: 32px;
  81. }
  82. @media (max-width: 900px) {
  83. .two-col { grid-template-columns: 1fr; }
  84. .container { padding: 40px 20px; }
  85. }
  86. /* === Mockup Frames === */
  87. .frame {
  88. background: var(--surface);
  89. border: 1px solid var(--rule);
  90. border-radius: var(--radius-lg);
  91. overflow: hidden;
  92. box-shadow: var(--shadow-soft);
  93. }
  94. .frame-label {
  95. font-size: 0.75rem;
  96. color: var(--muted);
  97. margin-bottom: 12px;
  98. text-transform: uppercase;
  99. letter-spacing: 0.08em;
  100. }
  101. /* === SVG Icons === */
  102. .icon {
  103. width: 20px;
  104. height: 20px;
  105. stroke: currentColor;
  106. stroke-width: 1.5;
  107. fill: none;
  108. stroke-linecap: round;
  109. stroke-linejoin: round;
  110. }
  111. .icon-sm { width: 16px; height: 16px; stroke-width: 1.5; }
  112. .icon-lg { width: 24px; height: 24px; }
  113. /* === Direction 1: Editorial / Oriental Writing === */
  114. .dir1 {
  115. --dir-bg: #f7f5f0;
  116. --dir-surface: #fdfcf9;
  117. --dir-ink: #2b2b2b;
  118. --dir-muted: #8c8279;
  119. --dir-rule: #e5e1d8;
  120. --dir-accent: #c45c48;
  121. }
  122. .dir1-welcome {
  123. min-height: 460px;
  124. background: var(--dir-bg);
  125. display: grid;
  126. grid-template-columns: 1fr 360px;
  127. }
  128. @media (max-width: 900px) {
  129. .dir1-welcome { grid-template-columns: 1fr; }
  130. }
  131. .dir1-welcome-left {
  132. padding: 64px;
  133. display: flex;
  134. flex-direction: column;
  135. justify-content: center;
  136. }
  137. .dir1-mark {
  138. width: 48px;
  139. height: 48px;
  140. border: 2px solid var(--dir-ink);
  141. display: flex;
  142. align-items: center;
  143. justify-content: center;
  144. font-family: "Songti SC", "Noto Serif SC", serif;
  145. font-size: 22px;
  146. font-weight: 700;
  147. margin-bottom: 32px;
  148. }
  149. .dir1-welcome-left h2 {
  150. font-family: "Songti SC", "Noto Serif SC", "SimSun", serif;
  151. font-size: 2.5rem;
  152. font-weight: 700;
  153. margin: 0 0 12px;
  154. color: var(--dir-ink);
  155. letter-spacing: 0.04em;
  156. }
  157. .dir1-welcome-left .lead {
  158. font-size: 1.05rem;
  159. color: var(--dir-muted);
  160. margin-bottom: 40px;
  161. line-height: 1.8;
  162. }
  163. .dir1-actions {
  164. display: flex;
  165. gap: 16px;
  166. }
  167. .btn-dir1 {
  168. padding: 12px 24px;
  169. border-radius: var(--radius-sm);
  170. font-size: 0.9rem;
  171. font-weight: 500;
  172. cursor: pointer;
  173. transition: all 0.15s ease;
  174. border: none;
  175. }
  176. .btn-dir1-primary {
  177. background: var(--dir-ink);
  178. color: var(--dir-surface);
  179. }
  180. .btn-dir1-primary:hover {
  181. background: #000;
  182. }
  183. .btn-dir1-secondary {
  184. background: transparent;
  185. color: var(--dir-ink);
  186. border: 1px solid var(--dir-rule);
  187. }
  188. .btn-dir1-secondary:hover {
  189. border-color: var(--dir-ink);
  190. }
  191. .dir1-welcome-right {
  192. background: var(--dir-surface);
  193. border-left: 1px solid var(--dir-rule);
  194. padding: 48px;
  195. display: flex;
  196. flex-direction: column;
  197. }
  198. .dir1-section-title {
  199. font-size: 0.7rem;
  200. color: var(--dir-muted);
  201. text-transform: uppercase;
  202. letter-spacing: 0.1em;
  203. margin-bottom: 24px;
  204. }
  205. .dir1-recent-item {
  206. padding: 18px 0;
  207. border-bottom: 1px solid var(--dir-rule);
  208. cursor: pointer;
  209. transition: opacity 0.15s ease;
  210. }
  211. .dir1-recent-item:hover {
  212. opacity: 0.7;
  213. }
  214. .dir1-recent-title {
  215. font-size: 1rem;
  216. font-weight: 500;
  217. color: var(--dir-ink);
  218. margin-bottom: 4px;
  219. font-family: "Songti SC", "Noto Serif SC", serif;
  220. }
  221. .dir1-recent-meta {
  222. font-size: 0.8rem;
  223. color: var(--dir-muted);
  224. }
  225. .dir1-main {
  226. display: flex;
  227. height: 480px;
  228. background: var(--dir-surface);
  229. }
  230. .dir1-rail {
  231. width: 56px;
  232. background: var(--dir-bg);
  233. border-right: 1px solid var(--dir-rule);
  234. display: flex;
  235. flex-direction: column;
  236. align-items: center;
  237. padding: 16px 0;
  238. gap: 8px;
  239. }
  240. .rail-btn {
  241. width: 40px;
  242. height: 40px;
  243. border-radius: var(--radius-sm);
  244. display: flex;
  245. align-items: center;
  246. justify-content: center;
  247. color: var(--dir-muted);
  248. transition: all 0.15s ease;
  249. cursor: pointer;
  250. }
  251. .rail-btn:hover {
  252. color: var(--dir-ink);
  253. background: rgba(0,0,0,0.03);
  254. }
  255. .rail-btn.active {
  256. color: var(--dir-accent);
  257. background: rgba(196, 92, 72, 0.08);
  258. }
  259. .dir1-sidebar {
  260. width: 240px;
  261. background: var(--dir-surface);
  262. border-right: 1px solid var(--dir-rule);
  263. display: flex;
  264. flex-direction: column;
  265. }
  266. .dir1-sidebar-header {
  267. padding: 20px 24px;
  268. font-weight: 600;
  269. font-size: 0.95rem;
  270. border-bottom: 1px solid var(--dir-rule);
  271. color: var(--dir-ink);
  272. }
  273. .dir1-tree {
  274. flex: 1;
  275. padding: 12px;
  276. overflow: auto;
  277. }
  278. .dir1-tree-item {
  279. padding: 9px 12px;
  280. border-radius: var(--radius-sm);
  281. font-size: 0.85rem;
  282. color: var(--dir-muted);
  283. margin-bottom: 2px;
  284. display: flex;
  285. align-items: center;
  286. gap: 10px;
  287. cursor: pointer;
  288. transition: all 0.1s ease;
  289. }
  290. .dir1-tree-item:hover {
  291. background: rgba(0,0,0,0.02);
  292. color: var(--dir-ink);
  293. }
  294. .dir1-tree-item.active {
  295. background: rgba(196, 92, 72, 0.06);
  296. color: var(--dir-ink);
  297. font-weight: 500;
  298. }
  299. .dir1-content {
  300. flex: 1;
  301. background: #fffef9;
  302. padding: 48px 64px;
  303. overflow: auto;
  304. }
  305. .dir1-content-inner {
  306. max-width: 720px;
  307. margin: 0 auto;
  308. }
  309. .dir1-content h1 {
  310. font-family: "Songti SC", "Noto Serif SC", "SimSun", serif;
  311. font-size: 1.875rem;
  312. font-weight: 700;
  313. margin: 0 0 32px;
  314. color: var(--dir-ink);
  315. letter-spacing: 0.04em;
  316. }
  317. .dir1-content p {
  318. color: var(--dir-ink);
  319. line-height: 2;
  320. font-size: 1.05rem;
  321. margin: 0 0 20px;
  322. text-align: justify;
  323. }
  324. /* === Direction 2: Modern Editorial Tool === */
  325. .dir2 {
  326. --dir2-bg: #f4f5f7;
  327. --dir2-surface: #ffffff;
  328. --dir2-ink: #1f2937;
  329. --dir2-muted: #6b7280;
  330. --dir2-rule: #e5e7eb;
  331. --dir2-accent: #2563eb;
  332. }
  333. .dir2-welcome {
  334. min-height: 460px;
  335. background: var(--dir2-bg);
  336. display: flex;
  337. flex-direction: column;
  338. align-items: center;
  339. justify-content: center;
  340. text-align: center;
  341. padding: 64px;
  342. }
  343. .dir2-mark {
  344. width: 44px;
  345. height: 44px;
  346. background: var(--dir2-ink);
  347. color: white;
  348. display: flex;
  349. align-items: center;
  350. justify-content: center;
  351. font-size: 18px;
  352. font-weight: 700;
  353. border-radius: var(--radius-md);
  354. margin-bottom: 28px;
  355. }
  356. .dir2-welcome h2 {
  357. font-size: 2rem;
  358. font-weight: 700;
  359. margin: 0 0 8px;
  360. color: var(--dir2-ink);
  361. letter-spacing: -0.02em;
  362. }
  363. .dir2-welcome .lead {
  364. color: var(--dir2-muted);
  365. margin-bottom: 36px;
  366. font-size: 1rem;
  367. }
  368. .dir2-actions {
  369. display: flex;
  370. gap: 12px;
  371. margin-bottom: 48px;
  372. }
  373. .btn-dir2 {
  374. padding: 10px 20px;
  375. border-radius: var(--radius-sm);
  376. font-size: 0.9rem;
  377. font-weight: 500;
  378. cursor: pointer;
  379. transition: all 0.12s ease;
  380. border: none;
  381. }
  382. .btn-dir2-primary {
  383. background: var(--dir2-ink);
  384. color: white;
  385. }
  386. .btn-dir2-primary:hover {
  387. background: #111827;
  388. }
  389. .btn-dir2-secondary {
  390. background: var(--dir2-surface);
  391. color: var(--dir2-ink);
  392. border: 1px solid var(--dir2-rule);
  393. }
  394. .btn-dir2-secondary:hover {
  395. border-color: var(--dir2-muted);
  396. }
  397. .dir2-recent {
  398. width: 100%;
  399. max-width: 520px;
  400. display: grid;
  401. grid-template-columns: repeat(2, 1fr);
  402. gap: 12px;
  403. }
  404. @media (max-width: 600px) {
  405. .dir2-recent { grid-template-columns: 1fr; }
  406. }
  407. .dir2-recent-card {
  408. background: var(--dir2-surface);
  409. border: 1px solid var(--dir2-rule);
  410. border-radius: var(--radius-md);
  411. padding: 20px;
  412. text-align: left;
  413. cursor: pointer;
  414. transition: all 0.15s ease;
  415. }
  416. .dir2-recent-card:hover {
  417. border-color: var(--dir2-muted);
  418. transform: translateY(-1px);
  419. }
  420. .dir2-recent-title {
  421. font-weight: 600;
  422. color: var(--dir2-ink);
  423. margin-bottom: 4px;
  424. font-size: 0.95rem;
  425. }
  426. .dir2-recent-meta {
  427. font-size: 0.8rem;
  428. color: var(--dir2-muted);
  429. }
  430. .dir2-main {
  431. display: flex;
  432. height: 480px;
  433. background: var(--dir2-surface);
  434. }
  435. .dir2-rail {
  436. width: 52px;
  437. background: var(--dir2-bg);
  438. border-right: 1px solid var(--dir2-rule);
  439. display: flex;
  440. flex-direction: column;
  441. align-items: center;
  442. padding: 14px 0;
  443. gap: 6px;
  444. }
  445. .rail-btn2 {
  446. width: 36px;
  447. height: 36px;
  448. border-radius: var(--radius-sm);
  449. display: flex;
  450. align-items: center;
  451. justify-content: center;
  452. color: var(--dir2-muted);
  453. transition: all 0.12s ease;
  454. cursor: pointer;
  455. }
  456. .rail-btn2:hover {
  457. color: var(--dir2-ink);
  458. background: rgba(0,0,0,0.04);
  459. }
  460. .rail-btn2.active {
  461. color: var(--dir2-accent);
  462. background: rgba(37, 99, 235, 0.08);
  463. }
  464. .dir2-sidebar {
  465. width: 260px;
  466. background: var(--dir2-surface);
  467. border-right: 1px solid var(--dir2-rule);
  468. display: flex;
  469. flex-direction: column;
  470. }
  471. .dir2-sidebar-header {
  472. padding: 18px 20px;
  473. font-weight: 600;
  474. font-size: 0.9rem;
  475. border-bottom: 1px solid var(--dir2-rule);
  476. color: var(--dir2-ink);
  477. display: flex;
  478. align-items: center;
  479. justify-content: space-between;
  480. }
  481. .dir2-tree {
  482. flex: 1;
  483. padding: 10px;
  484. overflow: auto;
  485. }
  486. .dir2-tree-group {
  487. margin-bottom: 16px;
  488. }
  489. .dir2-tree-group-title {
  490. font-size: 0.7rem;
  491. font-weight: 600;
  492. color: var(--dir2-muted);
  493. text-transform: uppercase;
  494. letter-spacing: 0.08em;
  495. padding: 8px 12px;
  496. }
  497. .dir2-tree-item {
  498. padding: 8px 12px;
  499. border-radius: var(--radius-sm);
  500. font-size: 0.85rem;
  501. color: var(--dir2-muted);
  502. margin-bottom: 2px;
  503. display: flex;
  504. align-items: center;
  505. gap: 10px;
  506. cursor: pointer;
  507. transition: all 0.1s ease;
  508. }
  509. .dir2-tree-item:hover {
  510. background: rgba(0,0,0,0.03);
  511. color: var(--dir2-ink);
  512. }
  513. .dir2-tree-item.active {
  514. background: rgba(37, 99, 235, 0.08);
  515. color: var(--dir2-accent);
  516. font-weight: 500;
  517. }
  518. .dir2-content {
  519. flex: 1;
  520. background: #fafafa;
  521. padding: 48px 56px;
  522. overflow: auto;
  523. }
  524. .dir2-content-inner {
  525. max-width: 680px;
  526. margin: 0 auto;
  527. }
  528. .dir2-content h1 {
  529. font-size: 1.75rem;
  530. font-weight: 700;
  531. margin: 0 0 28px;
  532. color: var(--dir2-ink);
  533. letter-spacing: -0.01em;
  534. }
  535. .dir2-content p {
  536. color: var(--dir2-ink);
  537. line-height: 1.85;
  538. font-size: 1rem;
  539. margin: 0 0 18px;
  540. }
  541. /* === Component Details === */
  542. .detail-grid {
  543. display: grid;
  544. grid-template-columns: repeat(3, 1fr);
  545. gap: 24px;
  546. }
  547. @media (max-width: 900px) {
  548. .detail-grid { grid-template-columns: 1fr; }
  549. }
  550. .detail-card {
  551. background: var(--surface);
  552. border: 1px solid var(--rule);
  553. border-radius: var(--radius-md);
  554. padding: 28px;
  555. }
  556. .detail-card h4 {
  557. font-size: 0.75rem;
  558. color: var(--muted);
  559. text-transform: uppercase;
  560. letter-spacing: 0.08em;
  561. margin: 0 0 20px;
  562. font-weight: 600;
  563. }
  564. .btn-row {
  565. display: flex;
  566. flex-direction: column;
  567. gap: 12px;
  568. align-items: flex-start;
  569. }
  570. .btn-refined {
  571. padding: 9px 18px;
  572. border-radius: var(--radius-sm);
  573. font-size: 0.85rem;
  574. font-weight: 500;
  575. cursor: pointer;
  576. transition: all 0.12s ease;
  577. }
  578. .btn-refined-dark {
  579. background: var(--ink);
  580. color: white;
  581. border: none;
  582. }
  583. .btn-refined-dark:hover {
  584. background: #000;
  585. }
  586. .btn-refined-light {
  587. background: white;
  588. color: var(--ink);
  589. border: 1px solid var(--rule-strong);
  590. }
  591. .btn-refined-light:hover {
  592. border-color: var(--ink);
  593. }
  594. .rail-demo {
  595. display: flex;
  596. gap: 8px;
  597. }
  598. .rail-demo-btn {
  599. width: 38px;
  600. height: 38px;
  601. border-radius: var(--radius-sm);
  602. display: flex;
  603. align-items: center;
  604. justify-content: center;
  605. color: var(--muted);
  606. border: 1px solid transparent;
  607. transition: all 0.12s ease;
  608. }
  609. .rail-demo-btn:hover {
  610. color: var(--ink);
  611. background: rgba(0,0,0,0.03);
  612. }
  613. .rail-demo-btn.active {
  614. color: var(--accent);
  615. background: var(--accent-muted);
  616. }
  617. .notification-demo {
  618. background: white;
  619. border: 1px solid var(--rule);
  620. border-radius: var(--radius-md);
  621. padding: 18px;
  622. }
  623. .notification-header {
  624. display: flex;
  625. align-items: center;
  626. justify-content: space-between;
  627. margin-bottom: 10px;
  628. }
  629. .notification-title {
  630. font-weight: 600;
  631. font-size: 0.9rem;
  632. color: var(--ink);
  633. }
  634. .notification-meta {
  635. font-size: 0.75rem;
  636. color: var(--muted);
  637. }
  638. .progress-subtle {
  639. height: 4px;
  640. background: var(--rule);
  641. border-radius: 2px;
  642. overflow: hidden;
  643. }
  644. .progress-subtle-fill {
  645. height: 100%;
  646. width: 62%;
  647. background: var(--ink);
  648. border-radius: 2px;
  649. }
  650. .chat-demo {
  651. display: flex;
  652. flex-direction: column;
  653. gap: 12px;
  654. }
  655. .chat-msg {
  656. max-width: 90%;
  657. padding: 14px 18px;
  658. border-radius: var(--radius-md);
  659. font-size: 0.85rem;
  660. line-height: 1.6;
  661. }
  662. .chat-msg.ai {
  663. background: white;
  664. border: 1px solid var(--rule);
  665. color: var(--ink);
  666. border-bottom-left-radius: 2px;
  667. }
  668. .chat-msg-header {
  669. display: flex;
  670. align-items: center;
  671. gap: 8px;
  672. margin-bottom: 6px;
  673. }
  674. .chat-avatar {
  675. width: 20px;
  676. height: 20px;
  677. border-radius: 50%;
  678. background: var(--ink);
  679. display: flex;
  680. align-items: center;
  681. justify-content: center;
  682. color: white;
  683. font-size: 8px;
  684. font-weight: 700;
  685. }
  686. .chat-name {
  687. font-size: 0.75rem;
  688. font-weight: 600;
  689. color: var(--ink);
  690. }
  691. .chat-actions-refined {
  692. display: flex;
  693. gap: 12px;
  694. margin-top: 10px;
  695. opacity: 0.7;
  696. }
  697. .chat-action-refined {
  698. font-size: 0.7rem;
  699. color: var(--muted);
  700. cursor: pointer;
  701. transition: color 0.12s ease;
  702. }
  703. .chat-action-refined:hover {
  704. color: var(--ink);
  705. }
  706. /* === Comparison Table === */
  707. .comparison {
  708. width: 100%;
  709. border-collapse: collapse;
  710. margin-top: 16px;
  711. }
  712. .comparison th,
  713. .comparison td {
  714. text-align: left;
  715. padding: 14px 18px;
  716. border-bottom: 1px solid var(--rule);
  717. font-size: 0.9rem;
  718. }
  719. .comparison th {
  720. font-weight: 600;
  721. color: var(--muted);
  722. text-transform: uppercase;
  723. font-size: 0.7rem;
  724. letter-spacing: 0.08em;
  725. }
  726. .comparison td:first-child {
  727. font-weight: 500;
  728. color: var(--ink);
  729. }
  730. .recommendation {
  731. background: #f0f4ff;
  732. border: 1px solid #dbe4ff;
  733. border-radius: var(--radius-md);
  734. padding: 28px;
  735. margin-top: 36px;
  736. }
  737. .recommendation h3 {
  738. color: #1e40af;
  739. margin: 0 0 10px;
  740. font-size: 1.1rem;
  741. }
  742. .recommendation p {
  743. margin: 0;
  744. color: #3730a3;
  745. line-height: 1.7;
  746. }
  747. footer {
  748. text-align: center;
  749. padding: 48px 24px;
  750. color: var(--muted);
  751. font-size: 0.85rem;
  752. border-top: 1px solid var(--rule);
  753. }
  754. </style>
  755. </head>
  756. <body>
  757. <div class="container">
  758. <header>
  759. <h1>青幕AI写作 · UI 高保真设计稿 v2</h1>
  760. <p>这一版去掉了 emoji、渐变和大阴影,转向更克制、更专业的设计语言。参考 Ulysses、iA Writer、Linear 等工具的极简美学,强调留白、排版和材质质感。</p>
  761. </header>
  762. <!-- Direction 1 -->
  763. <section class="section">
  764. <h2 class="section-title">方案一:东方书写美学</h2>
  765. <p class="section-desc">以宣纸、墨、朱砂为灵感。标题使用宋体,正文使用系统黑体,营造文人写作氛围。没有渐变,只有克制的黑白灰与一点朱红。</p>
  766. <div class="frame-label">欢迎页</div>
  767. <div class="frame dir1">
  768. <div class="dir1-welcome">
  769. <div class="dir1-welcome-left">
  770. <div class="dir1-mark">青</div>
  771. <h2>青幕AI写作</h2>
  772. <div class="lead">面向长篇小说的 AI 写作桌面端系统</div>
  773. <div class="dir1-actions">
  774. <button class="btn-dir1 btn-dir1-primary">新建小说</button>
  775. <button class="btn-dir1 btn-dir1-secondary">打开项目</button>
  776. <button class="btn-dir1 btn-dir1-secondary">恢复数据</button>
  777. </div>
  778. </div>
  779. <div class="dir1-welcome-right">
  780. <div class="dir1-section-title">最近项目</div>
  781. <div class="dir1-recent-item">
  782. <div class="dir1-recent-title">都市异能录</div>
  783. <div class="dir1-recent-meta">D:\Works\都市异能录 · 2 小时前</div>
  784. </div>
  785. <div class="dir1-recent-item">
  786. <div class="dir1-recent-title">星海远航</div>
  787. <div class="dir1-recent-meta">D:\Works\星海远航 · 昨天</div>
  788. </div>
  789. <div class="dir1-recent-item">
  790. <div class="dir1-recent-title">山河故人</div>
  791. <div class="dir1-recent-meta">D:\Works\山河故人 · 3 天前</div>
  792. </div>
  793. </div>
  794. </div>
  795. </div>
  796. <div class="frame-label" style="margin-top: 32px;">主界面 · 写作区</div>
  797. <div class="frame dir1">
  798. <div class="dir1-main">
  799. <div class="dir1-rail">
  800. <div class="rail-btn active">
  801. <svg class="icon" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
  802. </div>
  803. <div class="rail-btn">
  804. <svg class="icon" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
  805. </div>
  806. <div class="rail-btn">
  807. <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
  808. </div>
  809. <div class="rail-btn">
  810. <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
  811. </div>
  812. <div style="flex:1"></div>
  813. <div class="rail-btn">
  814. <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
  815. </div>
  816. </div>
  817. <div class="dir1-sidebar">
  818. <div class="dir1-sidebar-header">章节库</div>
  819. <div class="dir1-tree">
  820. <div class="dir1-tree-item">
  821. <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
  822. 第一卷:觉醒
  823. </div>
  824. <div class="dir1-tree-item active">
  825. <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
  826. 第1章 异变
  827. </div>
  828. <div class="dir1-tree-item">
  829. <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
  830. 第2章 初识
  831. </div>
  832. <div class="dir1-tree-item">
  833. <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
  834. 第二卷:成长
  835. </div>
  836. <div class="dir1-tree-item">
  837. <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
  838. 第3章 试炼
  839. </div>
  840. </div>
  841. </div>
  842. <div class="dir1-content">
  843. <div class="dir1-content-inner">
  844. <h1>第1章 异变</h1>
  845. <p>夜色深沉,城市的霓虹灯在雨幕中晕染成模糊的光斑。林默站在天桥上,望着脚下川流不息的车河,手中的咖啡早已凉透。</p>
  846. <p>他不知道,从这一刻起,自己的命运将被彻底改写。</p>
  847. <p>一道闪电划破天际,伴随着震耳欲聋的雷鸣。林默只觉得后颈一阵刺痛,仿佛有什么东西正从他的脊椎深处苏醒。</p>
  848. </div>
  849. </div>
  850. </div>
  851. </div>
  852. </section>
  853. <!-- Direction 2 -->
  854. <section class="section">
  855. <h2 class="section-title">方案二:现代编辑工具</h2>
  856. <p class="section-desc">参考 Linear 与 Notion 的冷静美学。以中性灰为基底,单一蓝色作为功能点缀,整体更像一款原生桌面应用。信息密度适中,操作层级清晰。</p>
  857. <div class="frame-label">欢迎页</div>
  858. <div class="frame dir2">
  859. <div class="dir2-welcome">
  860. <div class="dir2-mark">青</div>
  861. <h2>青幕AI写作</h2>
  862. <div class="lead">面向长篇小说的 AI 写作桌面端系统</div>
  863. <div class="dir2-actions">
  864. <button class="btn-dir2 btn-dir2-primary">新建小说</button>
  865. <button class="btn-dir2 btn-dir2-secondary">打开项目</button>
  866. <button class="btn-dir2 btn-dir2-secondary">恢复数据</button>
  867. </div>
  868. <div class="dir2-recent">
  869. <div class="dir2-recent-card">
  870. <div class="dir2-recent-title">都市异能录</div>
  871. <div class="dir2-recent-meta">2 小时前编辑</div>
  872. </div>
  873. <div class="dir2-recent-card">
  874. <div class="dir2-recent-title">星海远航</div>
  875. <div class="dir2-recent-meta">昨天编辑</div>
  876. </div>
  877. </div>
  878. </div>
  879. </div>
  880. <div class="frame-label" style="margin-top: 32px;">主界面 · 写作区</div>
  881. <div class="frame dir2">
  882. <div class="dir2-main">
  883. <div class="dir2-rail">
  884. <div class="rail-btn2 active">
  885. <svg class="icon" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
  886. </div>
  887. <div class="rail-btn2">
  888. <svg class="icon" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
  889. </div>
  890. <div class="rail-btn2">
  891. <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
  892. </div>
  893. <div class="rail-btn2">
  894. <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
  895. </div>
  896. <div style="flex:1"></div>
  897. <div class="rail-btn2">
  898. <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
  899. </div>
  900. </div>
  901. <div class="dir2-sidebar">
  902. <div class="dir2-sidebar-header">
  903. 章节库
  904. <svg class="icon icon-sm" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  905. </div>
  906. <div class="dir2-tree">
  907. <div class="dir2-tree-group">
  908. <div class="dir2-tree-group-title">第一卷:觉醒</div>
  909. <div class="dir2-tree-item active">
  910. <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
  911. 第1章 异变
  912. </div>
  913. <div class="dir2-tree-item">
  914. <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
  915. 第2章 初识
  916. </div>
  917. </div>
  918. <div class="dir2-tree-group">
  919. <div class="dir2-tree-group-title">第二卷:成长</div>
  920. <div class="dir2-tree-item">
  921. <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
  922. 第3章 试炼
  923. </div>
  924. </div>
  925. </div>
  926. </div>
  927. <div class="dir2-content">
  928. <div class="dir2-content-inner">
  929. <h1>第1章 异变</h1>
  930. <p>夜色深沉,城市的霓虹灯在雨幕中晕染成模糊的光斑。林默站在天桥上,望着脚下川流不息的车河,手中的咖啡早已凉透。</p>
  931. <p>他不知道,从这一刻起,自己的命运将被彻底改写。</p>
  932. <p>一道闪电划破天际,伴随着震耳欲聋的雷鸣。林默只觉得后颈一阵刺痛,仿佛有什么东西正从他的脊椎深处苏醒。</p>
  933. </div>
  934. </div>
  935. </div>
  936. </div>
  937. </section>
  938. <!-- Component Details -->
  939. <section class="section">
  940. <h2 class="section-title">关键组件细节</h2>
  941. <p class="section-desc">以方案二为例,展示更克制、更精致的按钮、图标栏、通知与聊天组件。</p>
  942. <div class="detail-grid">
  943. <div class="detail-card">
  944. <h4>按钮层次</h4>
  945. <div class="btn-row">
  946. <button class="btn-refined btn-refined-dark">主要操作</button>
  947. <button class="btn-refined btn-refined-light">次要操作</button>
  948. <button class="btn-refined" style="background: transparent; color: var(--muted);">文字按钮</button>
  949. </div>
  950. </div>
  951. <div class="detail-card">
  952. <h4>图标栏状态</h4>
  953. <div class="rail-demo">
  954. <div class="rail-demo-btn active">
  955. <svg class="icon" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
  956. </div>
  957. <div class="rail-demo-btn">
  958. <svg class="icon" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
  959. </div>
  960. <div class="rail-demo-btn">
  961. <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
  962. </div>
  963. </div>
  964. <p style="font-size: 0.8rem; color: var(--muted); margin-top: 16px;">激活态使用 8% 透明度的背景色,无渐变、无阴影。</p>
  965. </div>
  966. <div class="detail-card">
  967. <h4>后台通知</h4>
  968. <div class="notification-demo">
  969. <div class="notification-header">
  970. <span class="notification-title">正在生成章节大纲</span>
  971. <span class="notification-meta">62%</span>
  972. </div>
  973. <div class="progress-subtle">
  974. <div class="progress-subtle-fill"></div>
  975. </div>
  976. </div>
  977. </div>
  978. <div class="detail-card">
  979. <h4>AI 消息</h4>
  980. <div class="chat-demo">
  981. <div class="chat-msg ai">
  982. <div class="chat-msg-header">
  983. <div class="chat-avatar">AI</div>
  984. <span class="chat-name">青幕助手</span>
  985. </div>
  986. 已生成本章续写建议,你可以直接复制或保存到章节库。
  987. <div class="chat-actions-refined">
  988. <span class="chat-action-refined">复制</span>
  989. <span class="chat-action-refined">保存</span>
  990. <span class="chat-action-refined">重试</span>
  991. </div>
  992. </div>
  993. </div>
  994. </div>
  995. </div>
  996. </section>
  997. <!-- Comparison -->
  998. <section class="section">
  999. <h2 class="section-title">方案对比</h2>
  1000. <table class="comparison">
  1001. <thead>
  1002. <tr>
  1003. <th>维度</th>
  1004. <th>方案一 东方书写美学</th>
  1005. <th>方案二 现代编辑工具</th>
  1006. </tr>
  1007. </thead>
  1008. <tbody>
  1009. <tr>
  1010. <td>视觉气质</td>
  1011. <td>文人、温润、有书卷气</td>
  1012. <td>冷静、专业、高效</td>
  1013. </tr>
  1014. <tr>
  1015. <td>主色</td>
  1016. <td>墨黑 + 宣纸白 + 朱砂红点缀</td>
  1017. <td>深灰 + 白 + 单一蓝点缀</td>
  1018. </tr>
  1019. <tr>
  1020. <td>标题字体</td>
  1021. <td>思源宋体 / 霞鹜文楷</td>
  1022. <td>系统无衬线(PingFang / SF Pro)</td>
  1023. </tr>
  1024. <tr>
  1025. <td>装饰元素</td>
  1026. <td>无渐变、无阴影、仅线条与留白</td>
  1027. <td>极淡阴影、1px 边框、无渐变</td>
  1028. </tr>
  1029. <tr>
  1030. <td>适用用户</td>
  1031. <td>偏好文艺、古风、严肃文学创作者</td>
  1032. <td>偏好现代、效率、类型文学创作者</td>
  1033. </tr>
  1034. <tr>
  1035. <td>实施风险</td>
  1036. <td>中</td>
  1037. <td>低</td>
  1038. </tr>
  1039. </tbody>
  1040. </table>
  1041. <div class="recommendation">
  1042. <h3>推荐:方案二 作为默认,方案一 作为可选主题</h3>
  1043. <p>方案二更接近当前软件的工具属性,迁移成本低,用户接受度高;方案一的东方美学可以作为「专注写作模式」或可选主题提供。两者都避免了渐变、emoji 和大阴影,呈现出真正专业软件应有的克制与质感。</p>
  1044. </div>
  1045. </section>
  1046. <footer>
  1047. <p>青幕AI写作 UI 设计优化方案 · 高保真参考稿 v2 · 2026-06-29</p>
  1048. <p style="margin-top: 8px;">去掉了 emoji、渐变和大阴影,强调留白、排版与材质质感</p>
  1049. </footer>
  1050. </div>
  1051. </body>
  1052. </html>