Home Explore Help
Register Sign In
haiany
/
QMAI
mirror of https://github.com/Mochocyang/QMAI.git
1
0
Fork 0
Files Issues 0 Wiki
Tree: f22b6e05ab
Branches Tags
QMAI
/
ui-design-mockups.html

ui-design-mockups.html 34 KB
History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243 
  1. <!-- Generated by Trae Work -->
    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="zh-CN">
    4. 

  4. <head>
    5. 

  5.   <meta charset="UTF-8">
    6. 

  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.   <title>青幕AI写作 - UI 高保真设计稿参考</title>
    8. 

  8.   <style>
    9. 

  9.     :root {
    10. 

  10.       --bg: #f8f9fb;
    11. 

  11.       --surface: #ffffff;
    12. 

  12.       --ink: #1a1d21;
    13. 

  13.       --muted: #6b7280;
    14. 

  14.       --rule: #e5e7eb;
    15. 

  15.       --accent: #0891b2;
    16. 

  16.       --accent2: #f59e0b;
    17. 

  17.       --radius: 12px;
    18. 

  18.       --shadow: 0 4px 24px rgba(0,0,0,0.06);
    19. 

  19.     }
    20. 

  20. 

  21.     * { box-sizing: border-box; }
    22. 

  22. 

  23.     body {
    24. 

  24.       margin: 0;
    25. 

  25.       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    26. 

  26.       background: var(--bg);
    27. 

  27.       color: var(--ink);
    28. 

  28.       line-height: 1.6;
    29. 

  29.     }
    30. 

  30. 

  31.     .container {
    32. 

  32.       max-width: 1200px;
    33. 

  33.       margin: 0 auto;
    34. 

  34.       padding: 48px 24px;
    35. 

  35.     }
    36. 

  36. 

  37.     header {
    38. 

  38.       text-align: center;
    39. 

  39.       margin-bottom: 64px;
    40. 

  40.     }
    41. 

  41. 

  42.     header h1 {
    43. 

  43.       font-size: 2.5rem;
    44. 

  44.       font-weight: 700;
    45. 

  45.       margin: 0 0 12px;
    46. 

  46.       letter-spacing: -0.02em;
    47. 

  47.     }
    48. 

  48. 

  49.     header p {
    50. 

  50.       font-size: 1.1rem;
    51. 

  51.       color: var(--muted);
    52. 

  52.       max-width: 640px;
    53. 

  53.       margin: 0 auto;
    54. 

  54.     }
    55. 

  55. 

  56.     .section {
    57. 

  57.       margin-bottom: 80px;
    58. 

  58.     }
    59. 

  59. 

  60.     .section-title {
    61. 

  61.       font-size: 1.75rem;
    62. 

  62.       font-weight: 700;
    63. 

  63.       margin-bottom: 8px;
    64. 

  64.     }
    65. 

  65. 

  66.     .section-desc {
    67. 

  67.       color: var(--muted);
    68. 

  68.       margin-bottom: 32px;
    69. 

  69.     }
    70. 

  70. 

  71.     .grid-3 {
    72. 

  72.       display: grid;
    73. 

  73.       grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    74. 

  74.       gap: 24px;
    75. 

  75.     }
    76. 

  76. 

  77.     .card {
    78. 

  78.       background: var(--surface);
    79. 

  79.       border: 1px solid var(--rule);
    80. 

  80.       border-radius: var(--radius);
    81. 

  81.       padding: 28px;
    82. 

  82.       box-shadow: var(--shadow);
    83. 

  83.     }
    84. 

  84. 

  85.     .card h3 {
    86. 

  86.       font-size: 1.25rem;
    87. 

  87.       margin: 0 0 12px;
    88. 

  88.     }
    89. 

  89. 

  90.     .card p {
    91. 

  91.       color: var(--muted);
    92. 

  92.       margin: 0 0 20px;
    93. 

  93.       font-size: 0.95rem;
    94. 

  94.     }
    95. 

  95. 

  96.     .badge {
    97. 

  97.       display: inline-block;
    98. 

  98.       padding: 4px 10px;
    99. 

  99.       border-radius: 20px;
    100. 

  100.       font-size: 0.75rem;
    101. 

  101.       font-weight: 600;
    102. 

  102.       margin-bottom: 12px;
    103. 

  103.     }
    104. 

  104. 

  105.     .badge.recommended {
    106. 

  106.       background: rgba(8, 145, 178, 0.12);
    107. 

  107.       color: var(--accent);
    108. 

  108.     }
    109. 

  109. 

  110.     .badge.alt {
    111. 

  111.       background: rgba(245, 158, 11, 0.12);
    112. 

  112.       color: var(--accent2);
    113. 

  113.     }
    114. 

  114. 

  115.     /* Mockup Base */
    116. 

  116.     .mockup-frame {
    117. 

  117.       border: 1px solid var(--rule);
    118. 

  118.       border-radius: 16px;
    119. 

  119.       overflow: hidden;
    120. 

  120.       background: #fff;
    121. 

  121.       box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    122. 

  122.       margin: 24px 0;
    123. 

  123.     }
    124. 

  124. 

  125.     .mockup-frame.dark {
    126. 

  126.       background: #161b22;
    127. 

  127.       border-color: #30363d;
    128. 

  128.     }
    129. 

  129. 

  130.     .mockup-frame.deep-blue {
    131. 

  131.       background: #0f172a;
    132. 

  132.       border-color: #1e293b;
    133. 

  133.     }
    134. 

  134. 

  135.     /* === Style A: Refined Minimal Professional === */
    136. 

  136. 

  137.     .style-a-welcome {
    138. 

  138.       display: flex;
    139. 

  139.       flex-direction: column;
    140. 

  140.       align-items: center;
    141. 

  141.       justify-content: center;
    142. 

  142.       min-height: 420px;
    143. 

  143.       padding: 48px;
    144. 

  144.       background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    145. 

  145.       text-align: center;
    146. 

  146.     }
    147. 

  147. 

  148.     .style-a-logo {
    149. 

  149.       width: 64px;
    150. 

  150.       height: 64px;
    151. 

  151.       background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    152. 

  152.       border-radius: 18px;
    153. 

  153.       display: flex;
    154. 

  154.       align-items: center;
    155. 

  155.       justify-content: center;
    156. 

  156.       color: white;
    157. 

  157.       font-size: 28px;
    158. 

  158.       font-weight: 700;
    159. 

  159.       margin-bottom: 24px;
    160. 

  160.       box-shadow: 0 8px 24px rgba(8, 145, 178, 0.25);
    161. 

  161.     }
    162. 

  162. 

  163.     .style-a-welcome h2 {
    164. 

  164.       font-size: 2rem;
    165. 

  165.       margin: 0 0 8px;
    166. 

  166.       font-weight: 700;
    167. 

  167.     }
    168. 

  168. 

  169.     .style-a-welcome .subtitle {
    170. 

  170.       color: #6b7280;
    171. 

  171.       margin-bottom: 32px;
    172. 

  172.       font-size: 1rem;
    173. 

  173.     }
    174. 

  174. 

  175.     .style-a-actions {
    176. 

  176.       display: flex;
    177. 

  177.       gap: 12px;
    178. 

  178.       margin-bottom: 40px;
    179. 

  179.     }
    180. 

  180. 

  181.     .btn {
    182. 

  182.       padding: 10px 20px;
    183. 

  183.       border-radius: 10px;
    184. 

  184.       font-size: 0.9rem;
    185. 

  185.       font-weight: 600;
    186. 

  186.       border: none;
    187. 

  187.       cursor: pointer;
    188. 

  188.       transition: all 0.15s ease;
    189. 

  189.     }
    190. 

  190. 

  191.     .btn-primary {
    192. 

  192.       background: #0891b2;
    193. 

  193.       color: white;
    194. 

  194.       box-shadow: 0 4px 12px rgba(8, 145, 178, 0.25);
    195. 

  195.     }
    196. 

  196. 

  197.     .btn-primary:hover {
    198. 

  198.       background: #0e7490;
    199. 

  199.       transform: translateY(-1px);
    200. 

  200.       box-shadow: 0 6px 16px rgba(8, 145, 178, 0.3);
    201. 

  201.     }
    202. 

  202. 

  203.     .btn-outline {
    204. 

  204.       background: white;
    205. 

  205.       color: #374151;
    206. 

  206.       border: 1px solid #e5e7eb;
    207. 

  207.     }
    208. 

  208. 

  209.     .btn-outline:hover {
    210. 

  210.       background: #f9fafb;
    211. 

  211.       border-color: #d1d5db;
    212. 

  212.     }
    213. 

  213. 

  214.     .style-a-recent {
    215. 

  215.       width: 100%;
    216. 

  216.       max-width: 420px;
    217. 

  217.       text-align: left;
    218. 

  218.     }
    219. 

  219. 

  220.     .style-a-recent-header {
    221. 

  221.       font-size: 0.8rem;
    222. 

  222.       color: #9ca3af;
    223. 

  223.       margin-bottom: 10px;
    224. 

  224.       text-transform: uppercase;
    225. 

  225.       letter-spacing: 0.05em;
    226. 

  226.     }
    227. 

  227. 

  228.     .recent-item {
    229. 

  229.       display: flex;
    230. 

  230.       align-items: center;
    231. 

  231.       gap: 12px;
    232. 

  232.       padding: 14px 16px;
    233. 

  233.       background: white;
    234. 

  234.       border: 1px solid #f3f4f6;
    235. 

  235.       border-radius: 12px;
    236. 

  236.       margin-bottom: 8px;
    237. 

  237.       box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    238. 

  238.     }
    239. 

  239. 

  240.     .recent-item:hover {
    241. 

  241.       border-color: #e5e7eb;
    242. 

  242.       box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    243. 

  243.     }
    244. 

  244. 

  245.     .recent-icon {
    246. 

  246.       width: 36px;
    247. 

  247.       height: 36px;
    248. 

  248.       background: #f0fdfa;
    249. 

  249.       border-radius: 10px;
    250. 

  250.       display: flex;
    251. 

  251.       align-items: center;
    252. 

  252.       justify-content: center;
    253. 

  253.       color: #0891b2;
    254. 

  254.       font-size: 16px;
    255. 

  255.     }
    256. 

  256. 

  257.     .recent-info {
    258. 

  258.       flex: 1;
    259. 

  259.     }
    260. 

  260. 

  261.     .recent-title {
    262. 

  262.       font-weight: 600;
    263. 

  263.       font-size: 0.9rem;
    264. 

  264.       margin-bottom: 2px;
    265. 

  265.     }
    266. 

  266. 

  267.     .recent-path {
    268. 

  268.       font-size: 0.75rem;
    269. 

  269.       color: #9ca3af;
    270. 

  270.     }
    271. 

  271. 

  272.     .style-a-main {
    273. 

  273.       display: flex;
    274. 

  274.       height: 420px;
    275. 

  275.       background: #ffffff;
    276. 

  276.     }
    277. 

  277. 

  278.     .style-a-sidebar-icon {
    279. 

  279.       width: 56px;
    280. 

  280.       background: #f8fafc;
    281. 

  281.       border-right: 1px solid #f1f5f9;
    282. 

  282.       display: flex;
    283. 

  283.       flex-direction: column;
    284. 

  284.       align-items: center;
    285. 

  285.       padding: 12px 0;
    286. 

  286.       gap: 8px;
    287. 

  287.     }
    288. 

  288. 

  289.     .icon-btn {
    290. 

  290.       width: 38px;
    291. 

  291.       height: 38px;
    292. 

  292.       border-radius: 10px;
    293. 

  293.       display: flex;
    294. 

  294.       align-items: center;
    295. 

  295.       justify-content: center;
    296. 

  296.       color: #94a3b8;
    297. 

  297.       position: relative;
    298. 

  298.       transition: all 0.15s ease;
    299. 

  299.     }
    300. 

  300. 

  301.     .icon-btn:hover {
    302. 

  302.       background: #f1f5f9;
    303. 

  303.       color: #475569;
    304. 

  304.     }
    305. 

  305. 

  306.     .icon-btn.active {
    307. 

  307.       background: rgba(8, 145, 178, 0.12);
    308. 

  308.       color: #0891b2;
    309. 

  309.     }
    310. 

  310. 

  311.     .icon-btn.active::before {
    312. 

  312.       content: '';
    313. 

  313.       position: absolute;
    314. 

  314.       left: -10px;
    315. 

  315.       top: 50%;
    316. 

  316.       transform: translateY(-50%);
    317. 

  317.       width: 3px;
    318. 

  318.       height: 20px;
    319. 

  319.       background: #0891b2;
    320. 

  320.       border-radius: 0 3px 3px 0;
    321. 

  321.     }
    322. 

  322. 

  323.     .style-a-sidebar {
    324. 

  324.       width: 220px;
    325. 

  325.       background: #ffffff;
    326. 

  326.       border-right: 1px solid #f1f5f9;
    327. 

  327.       display: flex;
    328. 

  328.       flex-direction: column;
    329. 

  329.     }
    330. 

  330. 

  331.     .style-a-sidebar-header {
    332. 

  332.       padding: 16px;
    333. 

  333.       border-bottom: 1px solid #f1f5f9;
    334. 

  334.       font-weight: 600;
    335. 

  335.     }
    336. 

  336. 

  337.     .style-a-tree {
    338. 

  338.       flex: 1;
    339. 

  339.       padding: 12px;
    340. 

  340.     }
    341. 

  341. 

  342.     .tree-item {
    343. 

  343.       padding: 8px 10px;
    344. 

  344.       border-radius: 8px;
    345. 

  345.       font-size: 0.85rem;
    346. 

  346.       color: #475569;
    347. 

  347.       margin-bottom: 4px;
    348. 

  348.       display: flex;
    349. 

  349.       align-items: center;
    350. 

  350.       gap: 8px;
    351. 

  351.     }
    352. 

  352. 

  353.     .tree-item:hover {
    354. 

  354.       background: #f8fafc;
    355. 

  355.     }
    356. 

  356. 

  357.     .tree-item.active {
    358. 

  358.       background: rgba(8, 145, 178, 0.1);
    359. 

  359.       color: #0891b2;
    360. 

  360.       font-weight: 500;
    361. 

  361.     }
    362. 

  362. 

  363.     .style-a-content {
    364. 

  364.       flex: 1;
    365. 

  365.       background: #fdfcfa;
    366. 

  366.       padding: 32px 48px;
    367. 

  367.       overflow: auto;
    368. 

  368.     }
    369. 

  369. 

  370.     .style-a-content h1 {
    371. 

  371.       font-size: 1.75rem;
    372. 

  372.       font-weight: 700;
    373. 

  373.       margin: 0 0 16px;
    374. 

  374.       color: #111827;
    375. 

  375.     }
    376. 

  376. 

  377.     .style-a-content p {
    378. 

  378.       color: #4b5563;
    379. 

  379.       line-height: 1.8;
    380. 

  380.       margin: 0 0 16px;
    381. 

  381.     }
    382. 

  382. 

  383.     .style-a-settings {
    384. 

  384.       display: flex;
    385. 

  385.       height: 420px;
    386. 

  386.       background: #ffffff;
    387. 

  387.     }
    388. 

  388. 

  389.     .style-a-settings-nav {
    390. 

  390.       width: 220px;
    391. 

  391.       background: #f8fafc;
    392. 

  392.       border-right: 1px solid #f1f5f9;
    393. 

  393.       padding: 16px;
    394. 

  394.     }
    395. 

  395. 

  396.     .settings-cat {
    397. 

  397.       padding: 10px 12px;
    398. 

  398.       border-radius: 8px;
    399. 

  399.       font-size: 0.85rem;
    400. 

  400.       color: #475569;
    401. 

  401.       margin-bottom: 4px;
    402. 

  402.       display: flex;
    403. 

  403.       align-items: center;
    404. 

  404.       gap: 10px;
    405. 

  405.     }
    406. 

  406. 

  407.     .settings-cat:hover {
    408. 

  408.       background: white;
    409. 

  409.     }
    410. 

  410. 

  411.     .settings-cat.active {
    412. 

  412.       background: white;
    413. 

  413.       color: #0891b2;
    414. 

  414.       font-weight: 600;
    415. 

  415.       box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    416. 

  416.     }
    417. 

  417. 

  418.     .style-a-settings-body {
    419. 

  419.       flex: 1;
    420. 

  420.       padding: 32px;
    421. 

  421.       overflow: auto;
    422. 

  422.     }
    423. 

  423. 

  424.     .setting-card {
    425. 

  425.       background: white;
    426. 

  426.       border: 1px solid #f1f5f9;
    427. 

  427.       border-radius: 12px;
    428. 

  428.       padding: 24px;
    429. 

  429.       margin-bottom: 20px;
    430. 

  430.       box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    431. 

  431.     }
    432. 

  432. 

  433.     .setting-card h4 {
    434. 

  434.       margin: 0 0 16px;
    435. 

  435.       font-size: 1rem;
    436. 

  436.     }
    437. 

  437. 

  438.     .form-row {
    439. 

  439.       display: flex;
    440. 

  440.       align-items: center;
    441. 

  441.       justify-content: space-between;
    442. 

  442.       margin-bottom: 16px;
    443. 

  443.     }
    444. 

  444. 

  445.     .form-label {
    446. 

  446.       font-size: 0.9rem;
    447. 

  447.       color: #374151;
    448. 

  448.     }
    449. 

  449. 

  450.     .form-input {
    451. 

  451.       width: 280px;
    452. 

  452.       padding: 8px 12px;
    453. 

  453.       border: 1px solid #e5e7eb;
    454. 

  454.       border-radius: 8px;
    455. 

  455.       font-size: 0.85rem;
    456. 

  456.       color: #374151;
    457. 

  457.     }
    458. 

  458. 

  459.     /* === Style B: Immersive Writing Atmosphere === */
    460. 

  460. 

  461.     .style-b-welcome {
    462. 

  462.       display: flex;
    463. 

  463.       flex-direction: column;
    464. 

  464.       align-items: center;
    465. 

  465.       justify-content: center;
    466. 

  466.       min-height: 420px;
    467. 

  467.       padding: 48px;
    468. 

  468.       background: #faf8f3;
    469. 

  469.       text-align: center;
    470. 

  470.     }
    471. 

  471. 

  472.     .style-b-welcome h2 {
    473. 

  473.       font-size: 2.25rem;
    474. 

  474.       margin: 0 0 8px;
    475. 

  475.       font-weight: 700;
    476. 

  476.       color: #2c241b;
    477. 

  477.       font-family: Georgia, "Noto Serif SC", serif;
    478. 

  478.     }
    479. 

  479. 

  480.     .style-b-welcome .subtitle {
    481. 

  481.       color: #8c7e6d;
    482. 

  482.       margin-bottom: 32px;
    483. 

  483.       font-size: 1rem;
    484. 

  484.     }
    485. 

  485. 

  486.     .btn-b-primary {
    487. 

  487.       background: #5c4d3c;
    488. 

  488.       color: #faf8f3;
    489. 

  489.       box-shadow: 0 4px 12px rgba(92, 77, 60, 0.2);
    490. 

  490.     }
    491. 

  491. 

  492.     .btn-b-outline {
    493. 

  493.       background: transparent;
    494. 

  494.       color: #5c4d3c;
    495. 

  495.       border: 1px solid #d6cfc4;
    496. 

  496.     }
    497. 

  497. 

  498.     .style-b-recent-item {
    499. 

  499.       background: #ffffff;
    500. 

  500.       border: 1px solid #efe9df;
    501. 

  501.     }
    502. 

  502. 

  503.     .style-b-main {
    504. 

  504.       display: flex;
    505. 

  505.       height: 420px;
    506. 

  506.       background: #faf8f3;
    507. 

  507.     }
    508. 

  508. 

  509.     .style-b-sidebar-icon {
    510. 

  510.       width: 56px;
    511. 

  511.       background: #f5f1ea;
    512. 

  512.       border-right: 1px solid #efe9df;
    513. 

  513.     }
    514. 

  514. 

  515.     .icon-btn-b {
    516. 

  516.       color: #a89b8c;
    517. 

  517.     }
    518. 

  518. 

  519.     .icon-btn-b:hover {
    520. 

  520.       background: #efe9df;
    521. 

  521.       color: #5c4d3c;
    522. 

  522.     }
    523. 

  523. 

  524.     .icon-btn-b.active {
    525. 

  525.       background: rgba(92, 77, 60, 0.1);
    526. 

  526.       color: #5c4d3c;
    527. 

  527.     }
    528. 

  528. 

  529.     .icon-btn-b.active::before {
    530. 

  530.       background: #5c4d3c;
    531. 

  531.     }
    532. 

  532. 

  533.     .style-b-content {
    534. 

  534.       flex: 1;
    535. 

  535.       background: #fffefb;
    536. 

  536.       padding: 40px 0;
    537. 

  537.       display: flex;
    538. 

  538.       justify-content: center;
    539. 

  539.       overflow: auto;
    540. 

  540.     }
    541. 

  541. 

  542.     .paper {
    543. 

  543.       width: 100%;
    544. 

  544.       max-width: 720px;
    545. 

  545.       background: #fffefb;
    546. 

  546.       padding: 48px 64px;
    547. 

  547.       box-shadow: 0 0 40px rgba(92, 77, 60, 0.06);
    548. 

  548.       border-radius: 4px;
    549. 

  549.     }
    550. 

  550. 

  551.     .paper h1 {
    552. 

  552.       font-family: Georgia, "Noto Serif SC", serif;
    553. 

  553.       font-size: 1.75rem;
    554. 

  554.       color: #2c241b;
    555. 

  555.       margin: 0 0 20px;
    556. 

  556.     }
    557. 

  557. 

  558.     .paper p {
    559. 

  559.       color: #4a4239;
    560. 

  560.       line-height: 2;
    561. 

  561.       font-size: 1rem;
    562. 

  562.       margin: 0 0 18px;
    563. 

  563.     }
    564. 

  564. 

  565.     /* === Style C: Modern Glow / Glassmorphism === */
    566. 

  566. 

  567.     .style-c-welcome {
    568. 

  568.       display: flex;
    569. 

  569.       flex-direction: column;
    570. 

  570.       align-items: center;
    571. 

  571.       justify-content: center;
    572. 

  572.       min-height: 420px;
    573. 

  573.       padding: 48px;
    574. 

  574.       background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    575. 

  575.       text-align: center;
    576. 

  576.       position: relative;
    577. 

  577.       overflow: hidden;
    578. 

  578.     }
    579. 

  579. 

  580.     .style-c-welcome::before {
    581. 

  581.       content: '';
    582. 

  582.       position: absolute;
    583. 

  583.       top: -50%;
    584. 

  584.       left: -50%;
    585. 

  585.       width: 200%;
    586. 

  586.       height: 200%;
    587. 

  587.       background: radial-gradient(circle at 30% 30%, rgba(6, 182, 212, 0.15), transparent 40%),
    588. 

  588.                   radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.12), transparent 40%);
    589. 

  589.       pointer-events: none;
    590. 

  590.     }
    591. 

  591. 

  592.     .style-c-logo {
    593. 

  593.       width: 72px;
    594. 

  594.       height: 72px;
    595. 

  595.       background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    596. 

  596.       border-radius: 20px;
    597. 

  597.       display: flex;
    598. 

  598.       align-items: center;
    599. 

  599.       justify-content: center;
    600. 

  600.       color: white;
    601. 

  601.       font-size: 30px;
    602. 

  602.       font-weight: 700;
    603. 

  603.       margin-bottom: 24px;
    604. 

  604.       box-shadow: 0 0 40px rgba(6, 182, 212, 0.35);
    605. 

  605.       position: relative;
    606. 

  606.       z-index: 1;
    607. 

  607.     }
    608. 

  608. 

  609.     .style-c-welcome h2 {
    610. 

  610.       font-size: 2rem;
    611. 

  611.       margin: 0 0 8px;
    612. 

  612.       font-weight: 700;
    613. 

  613.       color: #f8fafc;
    614. 

  614.       position: relative;
    615. 

  615.       z-index: 1;
    616. 

  616.     }
    617. 

  617. 

  618.     .style-c-welcome .subtitle {
    619. 

  619.       color: #94a3b8;
    620. 

  620.       margin-bottom: 32px;
    621. 

  621.       position: relative;
    622. 

  622.       z-index: 1;
    623. 

  623.     }
    624. 

  624. 

  625.     .btn-c-primary {
    626. 

  626.       background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    627. 

  627.       color: white;
    628. 

  628.       box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
    629. 

  629.       position: relative;
    630. 

  630.       z-index: 1;
    631. 

  631.     }
    632. 

  632. 

  633.     .btn-c-outline {
    634. 

  634.       background: rgba(255,255,255,0.08);
    635. 

  635.       color: #e2e8f0;
    636. 

  636.       border: 1px solid rgba(255,255,255,0.15);
    637. 

  637.       backdrop-filter: blur(8px);
    638. 

  638.       position: relative;
    639. 

  639.       z-index: 1;
    640. 

  640.     }
    641. 

  641. 

  642.     .style-c-recent-item {
    643. 

  643.       background: rgba(255,255,255,0.06);
    644. 

  644.       border: 1px solid rgba(255,255,255,0.1);
    645. 

  645.       backdrop-filter: blur(12px);
    646. 

  646.     }
    647. 

  647. 

  648.     .style-c-recent-title {
    649. 

  649.       color: #e2e8f0;
    650. 

  650.     }
    651. 

  651. 

  652.     .style-c-recent-path {
    653. 

  653.       color: #64748b;
    654. 

  654.     }
    655. 

  655. 

  656.     .style-c-main {
    657. 

  657.       display: flex;
    658. 

  658.       height: 420px;
    659. 

  659.       background: #0f172a;
    660. 

  660.     }
    661. 

  661. 

  662.     .style-c-sidebar-icon {
    663. 

  663.       width: 56px;
    664. 

  664.       background: rgba(255,255,255,0.03);
    665. 

  665.       border-right: 1px solid rgba(255,255,255,0.06);
    666. 

  666.     }
    667. 

  667. 

  668.     .icon-btn-c {
    669. 

  669.       color: #64748b;
    670. 

  670.     }
    671. 

  671. 

  672.     .icon-btn-c:hover {
    673. 

  673.       background: rgba(255,255,255,0.06);
    674. 

  674.       color: #e2e8f0;
    675. 

  675.     }
    676. 

  676. 

  677.     .icon-btn-c.active {
    678. 

  678.       background: rgba(6, 182, 212, 0.15);
    679. 

  679.       color: #22d3ee;
    680. 

  680.       box-shadow: 0 0 16px rgba(6, 182, 212, 0.2);
    681. 

  681.     }
    682. 

  682. 

  683.     .icon-btn-c.active::before {
    684. 

  684.       background: #22d3ee;
    685. 

  685.       box-shadow: 0 0 8px #22d3ee;
    686. 

  686.     }
    687. 

  687. 

  688.     .style-c-content {
    689. 

  689.       flex: 1;
    690. 

  690.       background: #111827;
    691. 

  691.       padding: 32px 48px;
    692. 

  692.       overflow: auto;
    693. 

  693.     }
    694. 

  694. 

  695.     .style-c-content h1 {
    696. 

  696.       color: #f8fafc;
    697. 

  697.     }
    698. 

  698. 

  699.     .style-c-content p {
    700. 

  700.       color: #cbd5e1;
    701. 

  701.     }
    702. 

  702. 

  703.     /* Component Detail Cards */
    704. 

  704. 

  705.     .component-grid {
    706. 

  706.       display: grid;
    707. 

  707.       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    708. 

  708.       gap: 24px;
    709. 

  709.     }
    710. 

  710. 

  711.     .component-demo {
    712. 

  712.       background: var(--surface);
    713. 

  713.       border: 1px solid var(--rule);
    714. 

  714.       border-radius: var(--radius);
    715. 

  715.       padding: 24px;
    716. 

  716.       box-shadow: var(--shadow);
    717. 

  717.     }
    718. 

  718. 

  719.     .component-demo h4 {
    720. 

  720.       margin: 0 0 16px;
    721. 

  721.       font-size: 0.9rem;
    722. 

  722.       color: var(--muted);
    723. 

  723.       text-transform: uppercase;
    724. 

  724.       letter-spacing: 0.05em;
    725. 

  725.     }
    726. 

  726. 

  727.     .chat-bubble {
    728. 

  728.       max-width: 80%;
    729. 

  729.       padding: 12px 16px;
    730. 

  730.       border-radius: 16px;
    731. 

  731.       font-size: 0.85rem;
    732. 

  732.       margin-bottom: 12px;
    733. 

  733.       position: relative;
    734. 

  734.     }
    735. 

  735. 

  736.     .chat-bubble.ai {
    737. 

  737.       background: white;
    738. 

  738.       border: 1px solid #f1f5f9;
    739. 

  739.       color: #374151;
    740. 

  740.       border-bottom-left-radius: 4px;
    741. 

  741.     }
    742. 

  742. 

  743.     .chat-actions {
    744. 

  744.       display: flex;
    745. 

  745.       gap: 8px;
    746. 

  746.       margin-top: 8px;
    747. 

  747.     }
    748. 

  748. 

  749.     .chat-action {
    750. 

  750.       padding: 4px 10px;
    751. 

  751.       border-radius: 6px;
    752. 

  752.       font-size: 0.7rem;
    753. 

  753.       color: #6b7280;
    754. 

  754.       background: #f9fafb;
    755. 

  755.       border: 1px solid #f3f4f6;
    756. 

  756.     }
    757. 

  757. 

  758.     .progress-bar {
    759. 

  759.       height: 6px;
    760. 

  760.       background: #f3f4f6;
    761. 

  761.       border-radius: 3px;
    762. 

  762.       overflow: hidden;
    763. 

  763.       margin-top: 12px;
    764. 

  764.     }
    765. 

  765. 

  766.     .progress-fill {
    767. 

  767.       height: 100%;
    768. 

  768.       width: 65%;
    769. 

  769.       background: linear-gradient(90deg, #0891b2, #06b6d4);
    770. 

  770.       border-radius: 3px;
    771. 

  771.       position: relative;
    772. 

  772.       overflow: hidden;
    773. 

  773.     }
    774. 

  774. 

  775.     .progress-fill::after {
    776. 

  776.       content: '';
    777. 

  777.       position: absolute;
    778. 

  778.       top: 0;
    779. 

  779.       left: 0;
    780. 

  780.       right: 0;
    781. 

  781.       bottom: 0;
    782. 

  782.       background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    783. 

  783.       animation: shimmer 1.5s infinite;
    784. 

  784.     }
    785. 

  785. 

  786.     @keyframes shimmer {
    787. 

  787.       0% { transform: translateX(-100%); }
    788. 

  788.       100% { transform: translateX(100%); }
    789. 

  789.     }
    790. 

  790. 

  791.     .comparison-table {
    792. 

  792.       width: 100%;
    793. 

  793.       border-collapse: collapse;
    794. 

  794.       margin-top: 16px;
    795. 

  795.     }
    796. 

  796. 

  797.     .comparison-table th,
    798. 

  798.     .comparison-table td {
    799. 

  799.       text-align: left;
    800. 

  800.       padding: 12px 16px;
    801. 

  801.       border-bottom: 1px solid var(--rule);
    802. 

  802.       font-size: 0.9rem;
    803. 

  803.     }
    804. 

  804. 

  805.     .comparison-table th {
    806. 

  806.       font-weight: 600;
    807. 

  807.       color: var(--muted);
    808. 

  808.       text-transform: uppercase;
    809. 

  809.       font-size: 0.75rem;
    810. 

  810.       letter-spacing: 0.05em;
    811. 

  811.     }
    812. 

  812. 

  813.     .recommendation {
    814. 

  814.       background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    815. 

  815.       border: 1px solid #a5f3fc;
    816. 

  816.       border-radius: var(--radius);
    817. 

  817.       padding: 28px;
    818. 

  818.       margin-top: 32px;
    819. 

  819.     }
    820. 

  820. 

  821.     .recommendation h3 {
    822. 

  822.       color: #0e7490;
    823. 

  823.       margin: 0 0 12px;
    824. 

  824.     }
    825. 

  825. 

  826.     footer {
    827. 

  827.       text-align: center;
    828. 

  828.       padding: 40px 24px;
    829. 

  829.       color: var(--muted);
    830. 

  830.       font-size: 0.85rem;
    831. 

  831.       border-top: 1px solid var(--rule);
    832. 

  832.       margin-top: 40px;
    833. 

  833.     }
    834. 

  834. 

  835.     @media (max-width: 768px) {
    836. 

  836.       .grid-3,
    837. 

  837.       .component-grid {
    838. 

  838.         grid-template-columns: 1fr;
    839. 

  839.       }
    840. 

  840.       header h1 {
    841. 

  841.         font-size: 1.75rem;
    842. 

  842.       }
    843. 

  843.       .style-a-main,
    844. 

  844.       .style-b-main,
    845. 

  845.       .style-c-main,
    846. 

  846.       .style-a-settings {
    847. 

  847.         flex-direction: column;
    848. 

  848.         height: auto;
    849. 

  849.       }
    850. 

  850.       .style-a-sidebar,
    851. 

  851.       .style-a-sidebar-icon,
    852. 

  852.       .style-a-settings-nav {
    853. 

  853.         width: 100%;
    854. 

  854.       }
    855. 

  855.       .paper {
    856. 

  856.         padding: 24px;
    857. 

  857.       }
    858. 

  858.     }
    859. 

  859.   </style>
    860. 

  860. </head>
    861. 

  861. <body>
    862. 

  862. 

  863.   <div class="container">
    864. 

  864.     <header>
    865. 

  865.       <h1>青幕AI写作 · UI 高保真设计稿参考</h1>
    866. 

  866.       <p>基于「美观度、品牌识别、交互体验、细节完成度」四个维度，提供三种可落地的视觉方向，帮助你确认最终设计基调。</p>
    867. 

  867.     </header>
    868. 

  868. 

  869.     <!-- 设计方向总览 -->
    870. 

  870.     <section class="section">
    871. 

  871.       <h2 class="section-title">三种设计方向</h2>
    872. 

  872.       <p class="section-desc">以下三种方向均在保留现有三栏布局的基础上进行视觉升级，风险可控，迁移成本由低到高排列。</p>
    873. 

  873. 

  874.       <div class="grid-3">
    875. 

  875.         <div class="card">
    876. 

  876.           <span class="badge recommended">推荐</span>
    877. 

  877.           <h3>方向 A：精致简约专业风</h3>
    878. 

  878.           <p>在现有工具风格上做精细化打磨：提升色彩饱和度、统一阴影与圆角、增加微交互动效。最接近当前架构，实施风险最低。</p>
    879. 

  879.           <ul style="padding-left: 18px; color: var(--muted); font-size: 0.9rem;">
    880. 

  880.             <li>主色：青蓝 #0891b2</li>
    881. 

  881.             <li>辅助：暖金 #f59e0b（AI 强调）</li>
    882. 

  882.             <li>字体：Geist + 系统中文字体</li>
    883. 

  883.             <li>氛围：专业、清晰、高效</li>
    884. 

  884.           </ul>
    885. 

  885.         </div>
    886. 

  886. 

  887.         <div class="card">
    888. 

  888.           <span class="badge alt">备选</span>
    889. 

  889.           <h3>方向 B：沉浸式写作氛围风</h3>
    890. 

  890.           <p>弱化工具感，强化创作沉浸感。米白纸张背景、衬线字体、更宽松的行距，适合追求文艺气质的写作者。</p>
    891. 

  891.           <ul style="padding-left: 18px; color: var(--muted); font-size: 0.9rem;">
    892. 

  892.             <li>主色：深褐 #5c4d3c</li>
    893. 

  893.             <li>背景：米白 #faf8f3</li>
    894. 

  894.             <li>字体：思源宋体 / 霞鹜文楷</li>
    895. 

  895.             <li>氛围：温暖、专注、纸墨感</li>
    896. 

  896.           </ul>
    897. 

  897.         </div>
    898. 

  898. 

  899.         <div class="card">
    900. 

  900.           <span class="badge alt">备选</span>
    901. 

  901.           <h3>方向 C：现代微光科技风</h3>
    902. 

  902.           <p>采用深色玻璃拟态与柔和发光效果，突出 AI 科技感。适合年轻用户或偏好暗黑高级感的群体。</p>
    903. 

  903.           <ul style="padding-left: 18px; color: var(--muted); font-size: 0.9rem;">
    904. 

  904.             <li>主色：霓虹青 #06b6d4</li>
    905. 

  905.             <li>辅助：电紫 #8b5cf6</li>
    906. 

  906.             <li>材质：毛玻璃 + 发光</li>
    907. 

  907.             <li>氛围：未来、智能、高级</li>
    908. 

  908.           </ul>
    909. 

  909.         </div>
    910. 

  910.       </div>
    911. 

  911.     </section>
    912. 

  912. 

  913.     <!-- 方向 A -->
    914. 

  914.     <section class="section">
    915. 

  915.       <h2 class="section-title">方向 A：精致简约专业风</h2>
    916. 

  916.       <p class="section-desc">推荐方案。保留工具效率感，通过色彩、阴影、圆角、微动画提升整体质感。</p>
    917. 

  917. 

  918.       <h3 style="font-size: 1.1rem; margin: 24px 0 12px;">欢迎页</h3>
    919. 

  919.       <div class="mockup-frame">
    920. 

  920.         <div class="style-a-welcome">
    921. 

  921.           <div class="style-a-logo">青</div>
    922. 

  922.           <h2>青幕AI写作</h2>
    923. 

  923.           <div class="subtitle">面向长篇小说的 AI 写作桌面端系统</div>
    924. 

  924.           <div class="style-a-actions">
    925. 

  925.             <button class="btn btn-primary">+ 新建小说</button>
    926. 

  926.             <button class="btn btn-outline">打开项目</button>
    927. 

  927.             <button class="btn btn-outline">恢复数据</button>
    928. 

  928.           </div>
    929. 

  929.           <div class="style-a-recent">
    930. 

  930.             <div class="style-a-recent-header">最近项目</div>
    931. 

  931.             <div class="recent-item">
    932. 

  932.               <div class="recent-icon">📄</div>
    933. 

  933.               <div class="recent-info">
    934. 

  934.                 <div class="recent-title">都市异能录</div>
    935. 

  935.                 <div class="recent-path">D:\Works\都市异能录</div>
    936. 

  936.               </div>
    937. 

  937.             </div>
    938. 

  938.             <div class="recent-item">
    939. 

  939.               <div class="recent-icon">📄</div>
    940. 

  940.               <div class="recent-info">
    941. 

  941.                 <div class="recent-title">星海远航</div>
    942. 

  942.                 <div class="recent-path">D:\Works\星海远航</div>
    943. 

  943.               </div>
    944. 

  944.             </div>
    945. 

  945.           </div>
    946. 

  946.         </div>
    947. 

  947.       </div>
    948. 

  948. 

  949.       <h3 style="font-size: 1.1rem; margin: 24px 0 12px;">主界面 · 写作区</h3>
    950. 

  950.       <div class="mockup-frame">
    951. 

  951.         <div class="style-a-main">
    952. 

  952.           <div class="style-a-sidebar-icon">
    953. 

  953.             <div class="icon-btn active">📝</div>
    954. 

  954.             <div class="icon-btn">📁</div>
    955. 

  955.             <div class="icon-btn">🔍</div>
    956. 

  956.             <div class="icon-btn">🧠</div>
    957. 

  957.             <div class="icon-btn">⚙️</div>
    958. 

  958.           </div>
    959. 

  959.           <div class="style-a-sidebar">
    960. 

  960.             <div class="style-a-sidebar-header">章节库</div>
    961. 

  961.             <div class="style-a-tree">
    962. 

  962.               <div class="tree-item">📁 第一卷：觉醒</div>
    963. 

  963.               <div class="tree-item active">&nbsp;&nbsp;📄 第1章 异变</div>
    964. 

  964.               <div class="tree-item">&nbsp;&nbsp;📄 第2章 初识</div>
    965. 

  965.               <div class="tree-item">📁 第二卷：成长</div>
    966. 

  966.               <div class="tree-item">&nbsp;&nbsp;📄 第3章 试炼</div>
    967. 

  967.             </div>
    968. 

  968.           </div>
    969. 

  969.           <div class="style-a-content">
    970. 

  970.             <h1>第1章 异变</h1>
    971. 

  971.             <p>夜色深沉，城市的霓虹灯在雨幕中晕染成模糊的光斑。林默站在天桥上，望着脚下川流不息的车河，手中的咖啡早已凉透。</p>
    972. 

  972.             <p>他不知道，从这一刻起，自己的命运将被彻底改写。</p>
    973. 

  973.             <p>一道闪电划破天际，伴随着震耳欲聋的雷鸣。林默只觉得后颈一阵刺痛，仿佛有什么东西正从他的脊椎深处苏醒……</p>
    974. 

  974.           </div>
    975. 

  975.         </div>
    976. 

  976.       </div>
    977. 

  977. 

  978.       <h3 style="font-size: 1.1rem; margin: 24px 0 12px;">设置页</h3>
    979. 

  979.       <div class="mockup-frame">
    980. 

  980.         <div class="style-a-settings">
    981. 

  981.           <div class="style-a-settings-nav">
    982. 

  982.             <div class="settings-cat active">🤖 模型设置</div>
    983. 

  983.             <div class="settings-cat">🔌 嵌入模型</div>
    984. 

  984.             <div class="settings-cat">🌐 网络代理</div>
    985. 

  985.             <div class="settings-cat">🎨 界面设置</div>
    986. 

  986.             <div class="settings-cat">📖 小说设置</div>
    987. 

  987.             <div class="settings-cat">🔧 维护</div>
    988. 

  988.           </div>
    989. 

  989.           <div class="style-a-settings-body">
    990. 

  990.             <div class="setting-card">
    991. 

  991.               <h4>LLM 提供商</h4>
    992. 

  992.               <div class="form-row">
    993. 

  993.                 <span class="form-label">API 提供商</span>
    994. 

  994.                 <input class="form-input" value="OpenAI" readonly>
    995. 

  995.               </div>
    996. 

  996.               <div class="form-row">
    997. 

  997.                 <span class="form-label">模型</span>
    998. 

  998.                 <input class="form-input" value="gpt-4.1-mini" readonly>
    999. 

  999.               </div>
    1000. 

  1000.               <div class="form-row">
    1001. 

  1001.                 <span class="form-label">API Key</span>
    1002. 

  1002.                 <input class="form-input" value="sk-••••••••" type="password" readonly>
    1003. 

  1003.               </div>
    1004. 

  1004.             </div>
    1005. 

  1005.             <div class="setting-card">
    1006. 

  1006.               <h4>高级选项</h4>
    1007. 

  1007.               <div class="form-row">
    1008. 

  1008.                 <span class="form-label">最大上下文长度</span>
    1009. 

  1009.                 <input class="form-input" value="204800" readonly>
    1010. 

  1010.               </div>
    1011. 

  1011.             </div>
    1012. 

  1012.           </div>
    1013. 

  1013.         </div>
    1014. 

  1014.       </div>
    1015. 

  1015.     </section>
    1016. 

  1016. 

  1017.     <!-- 方向 B -->
    1018. 

  1018.     <section class="section">
    1019. 

  1019.       <h2 class="section-title">方向 B：沉浸式写作氛围风</h2>
    1020. 

  1020.       <p class="section-desc">弱化工具感，让写作区成为绝对主角。适合追求文艺、专注、长时间创作的作者。</p>
    1021. 

  1021. 

  1022.       <div class="mockup-frame">
    1023. 

  1023.         <div class="style-b-welcome">
    1024. 

  1024.           <div class="style-a-logo" style="background: linear-gradient(135deg, #5c4d3c, #8c7e6d);">青</div>
    1025. 

  1025.           <h2>青幕AI写作</h2>
    1026. 

  1026.           <div class="subtitle">于文字之间，寻一方静土</div>
    1027. 

  1027.           <div class="style-a-actions">
    1028. 

  1028.             <button class="btn btn-b-primary">+ 新建小说</button>
    1029. 

  1029.             <button class="btn btn-b-outline">打开项目</button>
    1030. 

  1030.           </div>
    1031. 

  1031.           <div class="style-a-recent">
    1032. 

  1032.             <div class="style-a-recent-header">最近项目</div>
    1033. 

  1033.             <div class="recent-item style-b-recent-item">
    1034. 

  1034.               <div class="recent-info">
    1035. 

  1035.                 <div class="recent-title">山河故人</div>
    1036. 

  1036.                 <div class="recent-path">三天前编辑</div>
    1037. 

  1037.               </div>
    1038. 

  1038.             </div>
    1039. 

  1039.             <div class="recent-item style-b-recent-item">
    1040. 

  1040.               <div class="recent-info">
    1041. 

  1041.                 <div class="recent-title">长安夜雨</div>
    1042. 

  1042.                 <div class="recent-path">一周前编辑</div>
    1043. 

  1043.               </div>
    1044. 

  1044.             </div>
    1045. 

  1045.           </div>
    1046. 

  1046.         </div>
    1047. 

  1047.       </div>
    1048. 

  1048. 

  1049.       <div class="mockup-frame">
    1050. 

  1050.         <div class="style-b-main">
    1051. 

  1051.           <div class="style-a-sidebar-icon style-b-sidebar-icon">
    1052. 

  1052.             <div class="icon-btn icon-btn-b active">📝</div>
    1053. 

  1053.             <div class="icon-btn icon-btn-b">📁</div>
    1054. 

  1054.             <div class="icon-btn icon-btn-b">🔍</div>
    1055. 

  1055.             <div class="icon-btn icon-btn-b">⚙️</div>
    1056. 

  1056.           </div>
    1057. 

  1057.           <div class="style-a-sidebar" style="background: #f5f1ea; border-color: #efe9df;">
    1058. 

  1058.             <div class="style-a-sidebar-header" style="border-color: #efe9df;">章节</div>
    1059. 

  1059.             <div class="style-a-tree">
    1060. 

  1060.               <div class="tree-item" style="color: #8c7e6d;">第一卷：长安</div>
    1061. 

  1061.               <div class="tree-item active" style="background: rgba(92,77,60,0.08); color: #5c4d3c;">第一章 夜雨</div>
    1062. 

  1062.             </div>
    1063. 

  1063.           </div>
    1064. 

  1064.           <div class="style-b-content">
    1065. 

  1065.             <div class="paper">
    1066. 

  1066.               <h1>第一章 夜雨</h1>
    1067. 

  1067.               <p>长安的雨，总是来得悄无声息。夜幕低垂，街边的灯笼在细雨中摇曳，将行人的影子拉得很长很长。</p>
    1068. 

  1068.               <p>少年站在酒肆门口，望着漫天雨丝，心中翻涌着说不清的思绪。今日一别，不知何时才能再回这长安城。</p>
    1069. 

  1069.             </div>
    1070. 

  1070.           </div>
    1071. 

  1071.         </div>
    1072. 

  1072.       </div>
    1073. 

  1073.     </section>
    1074. 

  1074. 

  1075.     <!-- 方向 C -->
    1076. 

  1076.     <section class="section">
    1077. 

  1077.       <h2 class="section-title">方向 C：现代微光科技风</h2>
    1078. 

  1078.       <p class="section-desc">深色玻璃拟态 + 柔和发光，强调 AI 科技感。适合偏好现代、高级、暗黑体验的用户。</p>
    1079. 

  1079. 

  1080.       <div class="mockup-frame dark">
    1081. 

  1081.         <div class="style-c-welcome">
    1082. 

  1082.           <div class="style-c-logo">青</div>
    1083. 

  1083.           <h2>青幕AI写作</h2>
    1084. 

  1084.           <div class="subtitle">AI 驱动的长篇小说创作系统</div>
    1085. 

  1085.           <div class="style-a-actions">
    1086. 

  1086.             <button class="btn btn-c-primary">+ 新建小说</button>
    1087. 

  1087.             <button class="btn btn-c-outline">打开项目</button>
    1088. 

  1088.           </div>
    1089. 

  1089.           <div class="style-a-recent">
    1090. 

  1090.             <div class="style-a-recent-header" style="color: #64748b;">最近项目</div>
    1091. 

  1091.             <div class="recent-item style-c-recent-item">
    1092. 

  1092.               <div class="recent-info">
    1093. 

  1093.                 <div class="recent-title style-c-recent-title">赛博纪元</div>
    1094. 

  1094.                 <div class="recent-path style-c-recent-path">D:\Works\赛博纪元</div>
    1095. 

  1095.               </div>
    1096. 

  1096.             </div>
    1097. 

  1097.             <div class="recent-item style-c-recent-item">
    1098. 

  1098.               <div class="recent-info">
    1099. 

  1099.                 <div class="recent-title style-c-recent-title">量子梦境</div>
    1100. 

  1100.                 <div class="recent-path style-c-recent-path">D:\Works\量子梦境</div>
    1101. 

  1101.               </div>
    1102. 

  1102.             </div>
    1103. 

  1103.           </div>
    1104. 

  1104.         </div>
    1105. 

  1105.       </div>
    1106. 

  1106. 

  1107.       <div class="mockup-frame dark">
    1108. 

  1108.         <div class="style-c-main">
    1109. 

  1109.           <div class="style-a-sidebar-icon style-c-sidebar-icon">
    1110. 

  1110.             <div class="icon-btn icon-btn-c active">📝</div>
    1111. 

  1111.             <div class="icon-btn icon-btn-c">📁</div>
    1112. 

  1112.             <div class="icon-btn icon-btn-c">🔍</div>
    1113. 

  1113.             <div class="icon-btn icon-btn-c">⚙️</div>
    1114. 

  1114.           </div>
    1115. 

  1115.           <div class="style-a-sidebar" style="background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06);">
    1116. 

  1116.             <div class="style-a-sidebar-header" style="border-color: rgba(255,255,255,0.06); color: #e2e8f0;">章节库</div>
    1117. 

  1117.             <div class="style-a-tree">
    1118. 

  1118.               <div class="tree-item" style="color: #64748b;">第一卷：觉醒</div>
    1119. 

  1119.               <div class="tree-item active" style="background: rgba(6,182,212,0.12); color: #22d3ee;">第1章 重启</div>
    1120. 

  1120.             </div>
    1121. 

  1121.           </div>
    1122. 

  1122.           <div class="style-c-content">
    1123. 

  1123.             <h1>第1章 重启</h1>
    1124. 

  1124.             <p>林深的意识从冰冷的培养舱中苏醒。视网膜上跳动着一行行数据流，提醒他：距离上次离线，已经过去了三十二年。</p>
    1125. 

  1125.             <p>窗外是永夜的城市，霓虹广告牌在酸雨中闪烁。他知道，自己已经不再是人类了。</p>
    1126. 

  1126.           </div>
    1127. 

  1127.         </div>
    1128. 

  1128.       </div>
    1129. 

  1129.     </section>
    1130. 

  1130. 

  1131.     <!-- 组件细节对比 -->
    1132. 

  1132.     <section class="section">
    1133. 

  1133.       <h2 class="section-title">关键组件细节</h2>
    1134. 

  1134.       <p class="section-desc">以方向 A 为例，展示按钮、图标栏、通知、聊天等高频组件的优化后效果。</p>
    1135. 

  1135. 

  1136.       <div class="component-grid">
    1137. 

  1137.         <div class="component-demo">
    1138. 

  1138.           <h4>按钮层次</h4>
    1139. 

  1139.           <div style="display: flex; flex-direction: column; gap: 12px; align-items: flex-start;">
    1140. 

  1140.             <button class="btn btn-primary">主要按钮 Primary</button>
    1141. 

  1141.             <button class="btn btn-outline">次要按钮 Outline</button>
    1142. 

  1142.             <button class="btn" style="background: transparent; color: #0891b2;">文字按钮 Text</button>
    1143. 

  1143.           </div>
    1144. 

  1144.         </div>
    1145. 

  1145. 

  1146.         <div class="component-demo">
    1147. 

  1147.           <h4>图标栏激活态</h4>
    1148. 

  1148.           <div style="display: flex; gap: 12px;">
    1149. 

  1149.             <div class="icon-btn active" style="position: relative;">📝</div>
    1150. 

  1150.             <div class="icon-btn">📁</div>
    1151. 

  1151.             <div class="icon-btn">🔍</div>
    1152. 

  1152.           </div>
    1153. 

  1153.           <p style="font-size: 0.8rem; color: var(--muted); margin-top: 12px;">激活项有左侧 3px 指示条 + 背景色高亮</p>
    1154. 

  1154.         </div>
    1155. 

  1155. 

  1156.         <div class="component-demo">
    1157. 

  1157.           <h4>后台任务通知</h4>
    1158. 

  1158.           <div style="background: white; border: 1px solid #f1f5f9; border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.06);">
    1159. 

  1159.             <div style="font-weight: 600; font-size: 0.9rem; margin-bottom: 4px;">正在生成大纲...</div>
    1160. 

  1160.             <div style="font-size: 0.75rem; color: #6b7280; margin-bottom: 12px;">预计需要 1-2 分钟</div>
    1161. 

  1161.             <div class="progress-bar"><div class="progress-fill"></div></div>
    1162. 

  1162.           </div>
    1163. 

  1163.         </div>
    1164. 

  1164. 

  1165.         <div class="component-demo">
    1166. 

  1166.           <h4>AI 聊天消息</h4>
    1167. 

  1167.           <div class="chat-bubble ai">
    1168. 

  1168.             <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
    1169. 

  1169.               <div style="width: 20px; height: 20px; background: #0891b2; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px;">AI</div>
    1170. 

  1170.               <span style="font-weight: 600; font-size: 0.75rem;">青幕助手</span>
    1171. 

  1171.             </div>
    1172. 

  1172.             已为你生成本章续写建议，请查看下方内容。
    1173. 

  1173.           </div>
    1174. 

  1174.           <div class="chat-actions">
    1175. 

  1175.             <span class="chat-action">复制</span>
    1176. 

  1176.             <span class="chat-action">保存到章节库</span>
    1177. 

  1177.             <span class="chat-action">重新生成</span>
    1178. 

  1178.           </div>
    1179. 

  1179.         </div>
    1180. 

  1180.       </div>
    1181. 

  1181.     </section>
    1182. 

  1182. 

  1183.     <!-- 推荐与对比 -->
    1184. 

  1184.     <section class="section">
    1185. 

  1185.       <h2 class="section-title">方向对比与推荐</h2>
    1186. 

  1186. 

  1187.       <table class="comparison-table">
    1188. 

  1188.         <thead>
    1189. 

  1189.           <tr>
    1190. 

  1190.             <th>维度</th>
    1191. 

  1191.             <th>方向 A 精致简约</th>
    1192. 

  1192.             <th>方向 B 沉浸氛围</th>
    1193. 

  1193.             <th>方向 C 微光科技</th>
    1194. 

  1194.           </tr>
    1195. 

  1195.         </thead>
    1196. 

  1196.         <tbody>
    1197. 

  1197.           <tr>
    1198. 

  1198.             <td>实施风险</td>
    1199. 

  1199.             <td>低</td>
    1200. 

  1200.             <td>中</td>
    1201. 

  1201.             <td>中高</td>
    1202. 

  1202.           </tr>
    1203. 

  1203.           <tr>
    1204. 

  1204.             <td>用户学习成本</td>
    1205. 

  1205.             <td>极低</td>
    1206. 

  1206.             <td>低</td>
    1207. 

  1207.             <td>中</td>
    1208. 

  1208.           </tr>
    1209. 

  1209.           <tr>
    1210. 

  1210.             <td>品牌识别提升</td>
    1211. 

  1211.             <td>中</td>
    1212. 

  1212.             <td>高</td>
    1213. 

  1213.             <td>高</td>
    1214. 

  1214.           </tr>
    1215. 

  1215.           <tr>
    1216. 

  1216.             <td>长时间写作舒适度</td>
    1217. 

  1217.             <td>高</td>
    1218. 

  1218.             <td>极高</td>
    1219. 

  1219.             <td>高</td>
    1220. 

  1220.           </tr>
    1221. 

  1221.           <tr>
    1222. 

  1222.             <td>开发工作量</td>
    1223. 

  1223.             <td>2-3 周</td>
    1224. 

  1224.             <td>3-4 周</td>
    1225. 

  1225.             <td>3-4 周</td>
    1226. 

  1226.           </tr>
    1227. 

  1227.         </tbody>
    1228. 

  1228.       </table>
    1229. 

  1229. 

  1230.       <div class="recommendation">
    1231. 

  1231.         <h3>推荐：方向 A + 方向 B 的写作区可选</h3>
    1232. 

  1232.         <p style="margin: 0; color: #0e7490;">建议主界面采用方向 A 的精致简约专业风，保证功能清晰和操作效率；同时为用户提供「写作氛围模式」选项，一键切换到方向 B 的纸张沉浸体验。这样既能提升整体美观度和品牌识别，又不会因为风格过强而牺牲可用性。</p>
    1233. 

  1233.       </div>
    1234. 

  1234.     </section>
    1235. 

  1235. 

  1236.     <footer>
    1237. 

  1237.       <p>青幕AI写作 UI 设计优化方案 · 高保真参考稿 · 2026-06-29</p>
    1238. 

  1238.       <p style="margin-top: 8px;">可在浏览器中打开本文件查看效果</p>
    1239. 

  1239.     </footer>
    1240. 

  1240.   </div>
    1241. 

  1241. 

  1242. </body>
    1243. 

  1243. </html>
    1244.