Skip to content

Commit 0d9d9de

Browse files
eagleoflqjeagleoflqj
committed
html structure
1 parent 0775bf6 commit 0d9d9de

File tree

3 files changed

+206
-1
lines changed

3 files changed

+206
-1
lines changed

‎docs/im/rime.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ patch:
7979

8080
当您使用 [plum](https://github.com/rime/plum) 管理输入方案时，请指定 `rime_frontend=fcitx5-rime` 或 `rime_dir=~/.local/share/fcitx5/rime`。
8181

82+
## 并击
83+
84+
并击方案依赖按键释放事件，但是 macOS 并不会通知输入法这一事件。
85+
为此小企鹅实现了模拟按键释放，您需要在 `高级` -> `macOS Frontend` 中启用 `模拟按键释放`。
86+
8287
## 命令行接口
8388

8489
::: warning

‎docs/theme/css.md

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
# 定制 CSS
2+
3+
如果主题编辑器提供的定制功能不能满足您的需求，您可以编写 CSS 实现精细控制。
4+
5+
::: warning
6+
请勿修改卷轴的尺寸，否则卷轴模式可能无法按预期工作。
7+
:::
8+
9+
小企鹅定义的所有 id 和 class 都带有 `fcitx-` 前缀，您编写的 CSS 规则可以引用它们。
10+
如果您想通过 JavaScript 为元素添加自定义的 id 和 class，请避开此前缀。
11+
12+
多数 class 是固定的（表示结构），少数 class 由小企鹅在运行时动态设置（表示状态）。后文将使用 * 声明一个 class 是动态设置的。
13+
14+
您可以结合候选窗网页的[源代码](https://github.com/fcitx-contrib/fcitx5-webview)研究探索。
15+
该项目提供了一个可以本地运行调试的 Web App。
16+
17+
您可以在 `主题编辑器` -> `高级` 中指定快捷键复制当前的 HTML。
18+
19+
## 外层结构
20+
```html
21+
<body>
22+
<div id="fcitx-theme" class="fcitx-macos fcitx-basic fcitx-blue fcitx-dark">
23+
<div class="fcitx-decoration">
24+
<div class="fcitx-panel-topleft"></div>
25+
<div class="fcitx-panel-top"></div>
26+
<div class="fcitx-panel-topright"></div>
27+
<div class="fcitx-panel-left"></div>
28+
<div class="fcitx-panel-center">
29+
<div class="fcitx-panel"></div>
30+
</div>
31+
<div class="fcitx-panel-right"></div>
32+
<div class="fcitx-panel-bottomleft"></div>
33+
<div class="fcitx-panel-bottom"></div>
34+
<div class="fcitx-panel-bottomright"></div>
35+
</div>
36+
<div class="fcitx-contextmenu">
37+
<div class="fcitx-menu-item">置顶</div>
38+
<div class="fcitx-menu-item">删词</div>
39+
</div>
40+
</div>
41+
</body>
42+
```
43+
`body` 背景透明，使得内部的面板元素可以自行决定透明/模糊。
44+
45+
`fcitx-theme` 的各个 class 控制候选窗的主题。
46+
47+
`fcitx-macos`* 声明当前候选窗默认使用 macOS 的主题，该主题定义于 [macos.scss](https://github.com/fcitx-contrib/fcitx5-webview/blob/master/page/macos.scss)。
48+
在 Webview 候选窗实现跨平台之前，该 class 将固定出现。
49+
50+
`fcitx-basic` 是供主题编辑器的定制规则覆盖默认规则的。定制规则由 [customize.ts](https://github.com/fcitx-contrib/fcitx5-webview/blob/master/page/customize.ts) 实现。
51+
52+
`fcitx-blue`* 表示系统当前的强调色是蓝色。在 macOS 中，可能的值有 `graphite` `red` `orange` `yellow` `green` `blue` `purple` `pink`。
53+
54+
`fcitx-dark`* 表示当前主题为深色，相应地 `fcitx-light` 表示浅色。仅当您在 `主题编辑器` -> `基础` -> `主题` 中选择 `System` 时，它才反映系统的主题。
55+
56+
`fcitx-decoration` 是 `topleft,top,topright` `left,center,right` `bottomleft,bottom,bottomright` 这 9 个元素的父元素，而这些子元素的主要作用是为异形窗口贴图。它相对父元素 `fcitx-theme` 有 (25px, 25px) 的偏移，目的是留出足够的空间给 `fcitx-panel` 显示阴影。
57+
58+
`fcitx-panel` 是候选词面板，它的结构在下一节介绍。
59+
60+
`fcitx-contextmenu` 是候选词的右键菜单，它拥有 `position: absolute` 以出现在鼠标点击位置。每个 `fcitx-menu-item` 子元素代表一个当前候选词支持的动作。
61+
62+
## 面板结构
63+
```html
64+
<div class="fcitx-panel fcitx-horizontal-tb">
65+
<div class="fcitx-panel-blur-outer fcitx-blur">
66+
<div class="fcitx-panel-blur-inner">
67+
<div class="fcitx-header">
68+
<div class="fcitx-aux-up fcitx-hidden">拼</div>
69+
<div class="fcitx-preedit fcitx-hidden"></div>
70+
</div>
71+
<div class="fcitx-aux-down fcitx-hidden"></div>
72+
<div class="fcitx-hoverables fcitx-horizontal fcitx-horizontal-scroll">
73+
<div class="fcitx-candidate fcitx-hoverable"></div>
74+
<div class="fcitx-divider"></div>
75+
<div class="fcitx-candidate fcitx-hoverable"></div>
76+
<div class="fcitx-divider fcitx-divider-paging"></div>
77+
<div class="fcitx-paging"></div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
```
83+
`fcitx-horizontal-tb`* 表示候选窗的书写模式是按行从上到下，其他可能的值有 `fcitx-vertical-rl` 和 `fcitx-vertical-lr`。
84+
85+
`fcitx-panel-blur-outer` 和 `fcitx-panel-blur-inner` 的作用是为面板提供（可选的）毛玻璃效果。您不应该更改它们的属性，否则可能造成候选窗闪烁。
86+
87+
`fcitx-blur`* 拥有 `backdrop-filter: blur(16px)`（半径可在 `主题编辑器` -> `背景` 调节）。该 class 每 40ms 在 `fcitx-panel-blur-outer` 和 `fcitx-panel-blur-inner` 交替出现，原因是当 DOM 结构保持不变时，背景模糊不会重新计算，导致拖动候选窗时毛玻璃失效。
88+
89+
`fcitx-header` 是面板头部，它的子元素 `fcitx-aux-up` 和 `fcitx-preedit` 同一时刻至多一个处于显示状态。
90+
91+
`fcitx-hidden`* 用于隐藏元素。
92+
93+
`fcitx-preedit` 是面板内预编辑区（与应用内的预编辑相对），它的结构在后文介绍。
94+
95+
`fcitx-aux-up` 用于主要的提示信息，例如切换输入法时提示用户当前的输入法。
96+
97+
`fcitx-aux-down` 用于次要的提示信息，例如 `Ctrl+semicolon` 调出剪贴板时提示用户剪贴板为空。
98+
99+
`fcitx-hoverables` 是候选词、分隔线和翻页按钮的容器。
100+
101+
`fcitx-horizontal`* 表示候选词和翻页按钮水平排列，相应地 `fcitx-vertical` 表示垂直排列。它们和 `fcitx-horizontal-tb` 等书写模式可以产生 6 种组合，在 `主题编辑器` -> `版式` 中设置。
102+
103+
* `fcitx-horizontal-scroll`* 表示当前处于卷轴模式，仅在 `fcitx-horizontal-tb` 和 `fcitx-horizontal` 的组合下可能出现。
104+
105+
`fcitx-hoverable` 表示其内部的 `fcitx-hoverable-inner` 元素可以在鼠标悬浮时产生高亮效果，用于候选词和翻页按钮。
106+
107+
`fcitx-candidate` 是候选词的容器，它的结构在后文介绍。
108+
109+
`fcitx-divider` 是分隔线的容器，它隔开各个 `fcitx-hoverable`。它的结构在后文介绍。
110+
111+
## 预编辑结构
112+
```html
113+
<div class="fcitx-preedit">
114+
<div class="fcitx-pre-cursor">预bian</div>
115+
<div class="fcitx-cursor fcitx-no-text"></div>
116+
<div class="fcitx-post-cursor">ji</div>
117+
</div>
118+
```
119+
`fcitx-pre-cursor` 是光标前的预编辑文字。
120+
121+
`fcitx-cursor` 是光标。
122+
123+
`fcitx-no-text`* 表示非文字形式。当它与 `fcitx-cursor` 结合时，光标是一个（闪烁或静止的）竖条，否则光标是文字形式，如 `‸`。
124+
125+
`fcitx-post-cursor` 是光标后的预编辑文字。
126+
127+
## 候选词结构
128+
```html
129+
<div class="fcitx-candidate fcitx-candidate-first fcitx-highlighted fcitx-highlighted-original fcitx-hoverable">
130+
<div class="fcitx-candidate-inner fcitx-hoverable-inner">
131+
<div class="fcitx-mark fcitx-no-text"></div>
132+
<div class="fcitx-label">1</div>
133+
<div class="fcitx-text">首选词</div>
134+
<div class="fcitx-comment">注释</div>
135+
</div>
136+
</div>
137+
```
138+
`fcitx-candidate-first` 表示常规模式（与卷轴模式相对）下当前页的第一个候选词，相应地 `fcitx-candidate-last` 表示最后一个候选词。
139+
140+
`fcitx-highlighted`* 表示高亮状态。
141+
142+
`fcitx-highlighted-original`* 表示当前页初始高亮状态，因为鼠标悬浮在其他候选词时高亮可以移动（取决于设置的高亮行为），而鼠标离开面板时高亮应恢复初始位置。
143+
144+
`fcitx-candidate-inner` 是候选词内层。区分内外的主要原因是高亮和面板边缘之间可以有空隙（外边距）。
145+
146+
`fcitx-hoverable-inner` 是鼠标可悬浮元素的内层，用来统一候选词和翻页按钮的样式。
147+
148+
`fcitx-mark` 是高亮标记。在垂直排列或卷轴模式下，所有候选词都会包含这一元素，以避免高亮移动时候选词位置偏移；水平排列下仅高亮的候选词包含。与 `fcitx-no-text` 结合时，高亮标记为圆角竖条色块，否则为文字（通常是一个 emoji）。
149+
150+
`fcitx-label` 是候选词序号，仅当序号存在时才绘制这一元素。无论面板的书写模式如何，序号是一律正放的。
151+
152+
`fcitx-text` 是候选词文字。
153+
154+
`fcitx-comment` 是候选词注释，仅当注释存在时才绘制这一元素。
155+
156+
## 分隔线结构
157+
```html
158+
<div class="fcitx-divider">
159+
<div class="fcitx-divider-side"></div>
160+
<div class="fcitx-divider-middle"></div>
161+
<div class="fcitx-divider-side"></div>
162+
</div>
163+
```
164+
* 在水平排列下，候选词间的分隔线隐藏，候选词和翻页按钮之间的垂直分隔线显示。
165+
* 在垂直排列下，候选词间的分隔线若宽度为 0，则相邻的 `fcitx-candidate-inner` 相距 1 个外边距；若宽度大于 0，则相距 2 个外边距 + 宽度。`fcitx-divider-side` 隐藏，且的长度等于外边距，使 `fcitx-divider-middle` 的长度等于 `fcitx-candidate-inner`。
166+
* 在卷轴模式下，没有翻页按钮，分隔线和面板同色，用来填充候选词间的空隙（因为卷轴的宽度是固定的，不像水平排列下宽度由候选词控制而没有空隙）。
167+
168+
## 翻页按钮结构
169+
当 `fcitx-paging` 伴随 `fcitx-arrow` 或 `fcitx-triangle` 时，将展示两个翻页按钮。
170+
171+
```html
172+
<div class="fcitx-paging fcitx-arrow">
173+
<div class="fcitx-prev fcitx-hoverable">
174+
<div class="fcitx-paging-inner">
175+
<svg></svg>
176+
</div>
177+
</div>
178+
<div class="fcitx-next fcitx-hoverable">
179+
<div class="fcitx-paging-inner fcitx-hoverable-inner">
180+
<svg></svg>
181+
</div>
182+
</div>
183+
</div>
184+
```
185+
`fcitx-arrow`* 表示内部的 svg （及其排列方式）是苹果风格的箭头，相应地 `fcitx-triangle` 表示微软风格的三角形。
186+
187+
`fcitx-prev` 是上一页，`fcitx-next` 是下一页。
188+
189+
`fcitx-paging-inner` 和 `fcitx-candidate-inner` 作用类似，与 `fcitx-hoverable-inner` 结合时该按钮可被点击（即当前页有上一页/下一页）。
190+
191+
当 `fcitx-paging` 伴随 `fcitx-scroll` 时，将展示一个卷轴展开按钮。
192+
193+
```html
194+
<div class="fcitx-paging fcitx-scroll fcitx-hoverable">
195+
<div class="fcitx-expand fcitx-hoverable-inner">
196+
<svg></svg>
197+
</div>
198+
</div>
199+
```
200+
`fcitx-scroll`* 表示内部的 svg 是可以展开卷轴的下箭头。注意当前处于普通模式，仅在展开后才会进入卷轴模式。

‎docs/theme/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 主题编辑器
22

3-
小企鹅输入法 macOS 版的候选窗使用原生 Webview 技术（不捆绑浏览器内核）。用户可以用通用技能 CSS/JavsScript 来精细控制样式，甚至编写强大的前端插件。
3+
小企鹅输入法 macOS 版的候选窗使用原生 Webview 技术（不捆绑浏览器内核）。用户可以用通用技能 CSS/JavaScript 来精细控制样式，甚至编写强大的前端插件。
44

55
同时，自带的主题编辑器提供丰富的选项，无需编程也可制作出精美的主题。
66

0 commit comments

Comments
 (0)