style_config.py 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. """可配置的样式与辅助开关。
  2. 将样式集中到本文件,方便按需注释或将 `enabled` 置为 False。
  3. 每条规则都给出了针对的语法成分及效果说明,帮助快速定位高亮条件。
  4. """
  5. from dataclasses import dataclass
  6. from typing import Iterable, List
  7. @dataclass
  8. class StyleRule:
  9. selector: str
  10. target: str
  11. description: str
  12. css: str
  13. enabled: bool = True
  14. def to_css(self) -> str:
  15. return f"{self.selector}{{{self.css}}}"
  16. def build_style_block(rules: Iterable["StyleRule"]) -> str:
  17. body = "".join(rule.to_css() for rule in rules if rule.enabled)
  18. return f"<style>{body}</style>"
  19. STYLE_RULES: List[StyleRule] = [
  20. StyleRule(
  21. selector=".analysis",
  22. target="语法分析容器",
  23. description="设置整体行距与字号,并保持换行,保证输出易读。",
  24. css="line-height:1.65;font-size:1rem;font-weight:400",
  25. ),
  26. StyleRule(
  27. selector=".analysis span",
  28. target="所有高亮片段",
  29. description="为每个高亮片段加入适度内边距和圆角,提升视觉分隔感。",
  30. css="padding:.04rem .08rem;border-radius:.15rem",
  31. ),
  32. StyleRule(
  33. selector=".sentence-scope",
  34. target="句子外层容器",
  35. description="包裹整句,方便显示序号与复杂度指示。",
  36. css=(
  37. "position:relative;display:inline;padding:0;margin:0;"
  38. "box-decoration-break:clone"
  39. ),
  40. ),
  41. StyleRule(
  42. selector=".sentence-scope::before",
  43. target="句子编号",
  44. description="在句首展示圈号,快速定位句子编号。",
  45. css=(
  46. "content:attr(data-sid)' ';color:#475569!important;font-size:.85em;"
  47. "margin-right:.4rem;display:inline-flex;align-items:center;justify-content:center;"
  48. "min-width:1.5em;padding:0;background:transparent!important;border:none!important;"
  49. "box-shadow:none!important;text-shadow:none;filter:none;white-space:nowrap"
  50. ),
  51. ),
  52. StyleRule(
  53. selector=".paragraph-scope",
  54. target="段落容器",
  55. description="块级包裹原始段落,保持输入段落分隔并留出下边距。",
  56. css=(
  57. "display:block;padding:0;margin:15px 0 15px 0;background:none;border-radius:0;"
  58. "line-height:1.65;color:inherit;"
  59. ),
  60. ),
  61. StyleRule(
  62. selector=".analysis .paragraph-scope[data-list-kind]",
  63. target="列表容器",
  64. description="当段落来自列表时为其留出项目符号区域并缩进。",
  65. css="position:relative;padding-left:1.35rem;margin-left:.25rem",
  66. ),
  67. StyleRule(
  68. selector=".analysis .paragraph-scope[data-list-kind][data-list-depth='2']",
  69. target="二级列表缩进",
  70. description="二级列表额外缩进。",
  71. css="margin-left:1.5rem",
  72. ),
  73. StyleRule(
  74. selector=".analysis .paragraph-scope[data-list-kind][data-list-depth='3']",
  75. target="三级列表缩进",
  76. description="三级列表额外缩进。",
  77. css="margin-left:2.5rem",
  78. ),
  79. StyleRule(
  80. selector=".analysis .paragraph-scope[data-list-kind][data-list-depth='4']",
  81. target="四级列表缩进",
  82. description="四级列表额外缩进。",
  83. css="margin-left:3.5rem",
  84. ),
  85. StyleRule(
  86. selector=".analysis .paragraph-scope[data-list-kind][data-list-depth='5']",
  87. target="五级以上缩进",
  88. description="更深层级列表保持缩进阶梯。",
  89. css="margin-left:4.25rem",
  90. ),
  91. StyleRule(
  92. selector=".analysis .paragraph-scope[data-list-kind]::before",
  93. target="列表项目符号",
  94. description="绘制原始列表的符号或编号。",
  95. css="content:'';position:absolute;left:0;top:0;color:#475569;font-weight:600",
  96. ),
  97. StyleRule(
  98. selector=".analysis .paragraph-scope[data-list-kind='ul']::before",
  99. target="无序列表",
  100. description="使用圆点恢复无序列表样式。",
  101. css="content:'•';",
  102. ),
  103. StyleRule(
  104. selector=".analysis .paragraph-scope[data-list-kind='ol']::before",
  105. target="有序列表",
  106. description="使用原编号恢复有序列表样式。",
  107. css="content:attr(data-list-index) '. ';",
  108. ),
  109. # StyleRule(
  110. # selector=".sentence-scope[data-complex='1']",
  111. # target="复杂句提示",
  112. # description="复杂句底部加淡橙色阴影,以提示结构较复杂。",
  113. # css="box-shadow:inset 0 -0.2rem 0 rgba(250,209,155,.6)",
  114. # ),
  115. StyleRule(
  116. selector=".analysis[data-helper='on'] .sentence-scope::after",
  117. target="句子辅助说明",
  118. description="在句后输出中文提示,解释成分与从句情况。",
  119. css="content:attr(data-note);display:block;font-size:.85rem;color:#64748b;margin:.2rem 0 .45rem 1.5rem;line-height:1.4",
  120. ),
  121. StyleRule(
  122. selector=".analysis[data-helper='off'] .sentence-scope::after",
  123. target="关闭辅助说明",
  124. description="当 helper 关闭时隐藏说明,避免额外占位。",
  125. css="content:'';display:none",
  126. ),
  127. StyleRule(
  128. selector=".role-subject",
  129. target="主语",
  130. description="淡黄色底纹突出主语位置。",
  131. css="background-color:#fff3bf",
  132. ),
  133. StyleRule(
  134. selector=".role-predicate",
  135. target="谓语动词",
  136. description="深玫红字体并加粗,强调谓语中心。",
  137. css="color:#000000!important;font-weight:700;background-color:rgba(255,235,239,.8)",
  138. ),
  139. StyleRule(
  140. selector=".role-object-do",
  141. target="直接宾语",
  142. description="浅绿底色显示直接宾语。",
  143. css="background-color:#e5ffcc",
  144. ),
  145. StyleRule(
  146. selector=".role-object-io",
  147. target="间接宾语",
  148. description="黄绿底色区分间接宾语。",
  149. css="background-color:#cef0a3",
  150. ),
  151. StyleRule(
  152. selector=".role-complement",
  153. target="表语/主补语",
  154. description="实线下划线指示补语区域。",
  155. css="border-bottom:2px solid #e6a04c",
  156. ),
  157. StyleRule(
  158. selector=".role-object-complement",
  159. target="宾补",
  160. description="虚线下划线提示补充说明的宾补。",
  161. css="border-bottom:2px dashed #e6a04c",
  162. ),
  163. StyleRule(
  164. selector=".role-apposition",
  165. target="同位语",
  166. description="蓝色立线和缩进强调同位语说明。",
  167. css="border-left:2px solid #63a4d4;padding-left:.15rem",
  168. ),
  169. StyleRule(
  170. selector=".role-adverbial",
  171. target="状语短语",
  172. description="黄绿底色突出状语信息。",
  173. css="background-color:#e7fded",
  174. ),
  175. StyleRule(
  176. selector=".role-connector",
  177. target="连接词",
  178. description="灰蓝底纹突出并列/从属连词,避免分散显示。",
  179. css="background-color:#e2e8f0;color:#1f2937",
  180. ),
  181. # StyleRule(
  182. # selector=".role-determiner",
  183. # target="限定词/冠词",
  184. # description="更浅的背景温和提示限定词。",
  185. # css="background-color:#f8fafc;color:#475569",
  186. # ),
  187. StyleRule(
  188. selector=".role-modifier",
  189. target="形容词或并列修饰",
  190. description="虚线下划线标出修饰信息,保证主体和修饰对比。",
  191. css="border-bottom:1px dotted #93c5fd",
  192. ),
  193. StyleRule(
  194. selector=".role-parenthetical",
  195. target="插入语",
  196. description="灰色虚线边框表示插入语。",
  197. css="border:1px dotted #888",
  198. ),
  199. # StyleRule(
  200. # selector=".role-absolute",
  201. # target="独立主格",
  202. # description="淡紫底色展示独立主格结构。",
  203. # css="background-color:#f0e8ff",
  204. # ),
  205. # StyleRule(
  206. # selector=".clause-noun,.clause-relative,.clause-adverbial,.clause-nonfinite",
  207. # target="从句容器(公共样式)",
  208. # description="统一使用彩色立线和左内边距包裹从句内容。",
  209. # css="border-left:2px solid currentColor;padding-left:.25rem;margin-left:.1rem",
  210. # ),
  211. # StyleRule(
  212. # selector=".clause-noun",
  213. # target="名词从句",
  214. # description="绿色配色突出名词性从句。",
  215. # css="color:#5c8f1d;background-color:rgba(158,201,134,.18)",
  216. # ),
  217. StyleRule(
  218. selector=".clause-relative",
  219. target="定语从句",
  220. description="紫色底色标记定语从句,便于和主句区分。",
  221. css="color:#6b4fa1;background-color:rgba(146,132,189,.15)",
  222. ),
  223. StyleRule(
  224. selector=".clause-adverbial",
  225. target="状语从句",
  226. description="灰色底色展示状语从句,配合数据属性显示功能类别。",
  227. css="color:#0f5132;background-color:rgba(128,203,196,.18)",
  228. ),
  229. StyleRule(
  230. selector=".clause-nonfinite",
  231. target="非限定从句 / 非谓语",
  232. description="橙色底纹提示非限定结构。",
  233. css="color:#c7780a;background-color:rgba(253,203,110,.18)",
  234. ),
  235. # StyleRule(
  236. # selector=".analysis[data-helper='on'] .clause-relative[data-modifies]::before,.analysis[data-helper='on'] .clause-adverbial[data-modifies]::before",
  237. # target="从句修饰箭头",
  238. # description="在辅助开启时显示“→”指向被修饰的成分。",
  239. # css="content:'→'attr(data-modifies)' ';color:#666;font-size:.85em",
  240. # ),
  241. # StyleRule(
  242. # selector=".analysis[data-helper='on'] .clause-adverbial[data-function]::after",
  243. # target="状语从句功能标签",
  244. # description="在尾部追加方括号说明(时间/原因等)。",
  245. # css="content:' ['attr(data-function)']';color:#1b5e20;font-size:.85em",
  246. # ),
  247. # StyleRule(
  248. # selector=".analysis[data-helper='on'] .clause-noun[data-clause-role]::after",
  249. # target="名词从句句法角色",
  250. # description="括号提示该名词从句在句中的角色(主语/宾语)。",
  251. # css="content:' ('attr(data-clause-role)')';color:#3f6212;font-size:.78em",
  252. # ),
  253. StyleRule(
  254. selector=".phrase-fixed",
  255. target="固定搭配",
  256. description="米色底与虚线强调固定表达或习语。",
  257. css="background-color:#fff8f0;border-bottom:1px dashed #c28150",
  258. ),
  259. # StyleRule(
  260. # selector=".role-residual",
  261. # target="未分类成分",
  262. # description="浅灰背景提示未归类成分,并通过 data-role 提供中文标签。",
  263. # css="background-color:#f6f8fa;color:#475569;border-bottom:1px dotted #cbd5e1",
  264. # ),
  265. StyleRule(
  266. selector=".lex-rare",
  267. target="低频词",
  268. description="深蓝色字体提示低频或重点词汇。",
  269. css="color:#000080",
  270. ),
  271. ]
  272. STYLE_BLOCK = build_style_block(STYLE_RULES)