@@ -38,8 +38,11 @@ export const useComponentTreeTextbox = () => {
3838 // string 'miniavatarOff' is used by tabsSyncAction function in TemplateEditor.tsx
3939 { name : t `文本框(小头像关闭时)` , class : 'TextBox_main_miniavatarOff' } ,
4040 { name : t `文本框背景` , class : 'TextBox_Background' } ,
41+ { name : t `文本元素(开始)` , class : 'TextBox_textElement_start' } ,
4142 { name : t `外层文本` , class : 'outer' } ,
4243 { name : t `内层文本` , class : 'inner' } ,
44+ { name : t `文本占位` , class : 'zhanwei' } ,
45+ { name : t `文本元素(完成)` , class : 'TextBox_textElement_Settled' } ,
4346 { name : t `角色名文本框` , class : 'TextBox_showName' } ,
4447 { name : t `角色名文本框背景` , class : 'TextBox_ShowName_Background' } ,
4548 { name : t `小头像容器` , class : 'miniAvatarContainer' } ,
@@ -72,6 +75,286 @@ export const useComponentTreeChoose = () => {
7275 } ;
7376} ;
7477
78+ export const useComponentTreeBacklog = ( ) => {
79+ return {
80+ name : t `回想` ,
81+ path : `UI/Backlog/backlog.scss` ,
82+ nodes : [
83+ { name : t `回想主界面` , class : 'Backlog_main' } ,
84+ { name : t `回想主界面(退出)` , class : 'Backlog_main_out' } ,
85+ { name : t `回想主界面(隐藏层级)` , class : 'Backlog_main_out_IndexHide' } ,
86+ { name : t `回想主界面(禁用滚动)` , class : 'Backlog_main_DisableScroll' } ,
87+ { name : t `回想顶部区域` , class : 'backlog_top' } ,
88+ { name : t `回想顶部图标` , class : 'backlog_top_icon' } ,
89+ { name : t `回想标题` , class : 'backlog_title' } ,
90+ { name : t `回想内容区` , class : 'backlog_content' } ,
91+ { name : t `回想条目` , class : 'backlog_item' } ,
92+ { name : t `回想条目(退出)` , class : 'backlog_item_out' } ,
93+ { name : t `回想条目功能区` , class : 'backlog_func_area' } ,
94+ { name : t `回想条目角色名` , class : 'backlog_item_content_name' } ,
95+ { name : t `回想条目内容容器` , class : 'backlog_item_content' } ,
96+ { name : t `回想条目按钮列表` , class : 'backlog_item_button_list' } ,
97+ { name : t `回想条目按钮` , class : 'backlog_item_button_element' } ,
98+ { name : t `回想条目文本` , class : 'backlog_item_content_text' } ,
99+ ] ,
100+ } ;
101+ } ;
102+
103+ export const useComponentTreeBottomControlPanel = ( ) => {
104+ return {
105+ name : t `底部控制栏` ,
106+ path : `UI/BottomControlPanel/bottomControlPanel.scss` ,
107+ nodes : [
108+ { name : t `控制栏主体` , class : 'main' } ,
109+ { name : t `控制栏按钮` , class : 'button' } ,
110+ { name : t `按钮文字` , class : 'button_text' } ,
111+ { name : t `按钮(开启)` , class : 'button_on' } ,
112+ { name : t `单个按钮` , class : 'singleButton' } ,
113+ { name : t `单个按钮(激活)` , class : 'singleButton_active' } ,
114+ { name : t `快存读预览` , class : 'fastSlPreview' } ,
115+ { name : t `预览主体` , class : 'slPreviewMain' } ,
116+ { name : t `预览图片容器` , class : 'imgContainer' } ,
117+ { name : t `预览文本容器` , class : 'textContainer' } ,
118+ ] ,
119+ } ;
120+ } ;
121+
122+ export const useComponentTreeBottomControlPanelFilm = ( ) => {
123+ return {
124+ name : t `底部控制栏(电影模式)` ,
125+ path : `UI/BottomControlPanel/bottomControlPanelFilm.scss` ,
126+ nodes : [
127+ { name : t `标签` , class : 'tag' } ,
128+ { name : t `面板容器` , class : 'container' } ,
129+ { name : t `面板单个按钮` , class : 'singleButton' } ,
130+ { name : t `面板按钮文字` , class : 'button_text' } ,
131+ ] ,
132+ } ;
133+ } ;
134+
135+ export const useComponentTreeDevPanel = ( ) => {
136+ return {
137+ name : t `开发者面板` ,
138+ path : `UI/DevPanel/devPanel.scss` ,
139+ nodes : [
140+ { name : t `面板主体` , class : 'devPanelMain' } ,
141+ { name : t `面板开关` , class : 'devPanelOpener' } ,
142+ ] ,
143+ } ;
144+ } ;
145+
146+ export const useComponentTreeExtra = ( ) => {
147+ return {
148+ name : t `Extra` ,
149+ path : `UI/Extra/extra.scss` ,
150+ nodes : [
151+ { name : t `Extra 主界面` , class : 'extra' } ,
152+ { name : t `Extra 顶部区域` , class : 'extra_top' } ,
153+ { name : t `Extra 顶部图标` , class : 'extra_top_icon' } ,
154+ { name : t `Extra 标题` , class : 'extra_title' } ,
155+ { name : t `Extra 主容器` , class : 'mainContainer' } ,
156+ { name : t `BGM 容器` , class : 'bgmContainer' } ,
157+ { name : t `BGM 列表容器` , class : 'bgmListContainer' } ,
158+ { name : t `BGM 播放器` , class : 'bgmPlayerMain' } ,
159+ { name : t `BGM 控制按钮` , class : 'bgmControlButton' } ,
160+ { name : t `BGM 名称` , class : 'bgmName' } ,
161+ { name : t `BGM 条目` , class : 'bgmElement' } ,
162+ { name : t `BGM 条目(激活)` , class : 'bgmElement_active' } ,
163+ { name : t `CG 主区` , class : 'cgMain' } ,
164+ { name : t `CG 容器` , class : 'cgContainer' } ,
165+ { name : t `CG 条目` , class : 'cgElement' } ,
166+ { name : t `CG 展示区` , class : 'cgShowDiv' } ,
167+ { name : t `CG 展示区外层` , class : 'cgShowDivWarpper' } ,
168+ { name : t `CG 导航` , class : 'cgNav' } ,
169+ { name : t `CG 导航(激活)` , class : 'cgNav_active' } ,
170+ { name : t `全屏展示容器` , class : 'showFullContainer' } ,
171+ { name : t `全屏 CG 主体` , class : 'showFullCgMain' } ,
172+ ] ,
173+ } ;
174+ } ;
175+
176+ export const useComponentTreeGlobalDialog = ( ) => {
177+ return {
178+ name : t `全局对话框` ,
179+ path : `UI/GlobalDialog/globalDialog.scss` ,
180+ nodes : [
181+ { name : t `对话框主体` , class : 'GlobalDialog_main' } ,
182+ { name : t `对话框内层容器` , class : 'glabalDialog_container_inner' } ,
183+ { name : t `对话框容器` , class : 'glabalDialog_container' } ,
184+ { name : t `对话框标题` , class : 'title' } ,
185+ { name : t `对话框按钮列表` , class : 'button_list' } ,
186+ { name : t `对话框按钮` , class : 'button' } ,
187+ ] ,
188+ } ;
189+ } ;
190+
191+ export const useComponentTreeLogo = ( ) => {
192+ return {
193+ name : t `Logo` ,
194+ path : `UI/Logo/logo.scss` ,
195+ nodes : [
196+ { name : t `Logo 主体` , class : 'Logo_main' } ,
197+ { name : t `Logo 背景` , class : 'Logo_Back' } ,
198+ { name : t `Logo 动画激活` , class : 'animationActive' } ,
199+ ] ,
200+ } ;
201+ } ;
202+
203+ export const useComponentTreeMenu = ( ) => {
204+ return {
205+ name : t `菜单` ,
206+ path : `UI/Menu/menu.scss` ,
207+ nodes : [
208+ { name : t `菜单主界面` , class : 'Menu_main' } ,
209+ { name : t `菜单标签内容` , class : 'Menu_TagContent' } ,
210+ ] ,
211+ } ;
212+ } ;
213+
214+ export const useComponentTreeMenuPanel = ( ) => {
215+ return {
216+ name : t `菜单面板` ,
217+ path : `UI/Menu/menuPanel.scss` ,
218+ nodes : [
219+ { name : t `菜单面板主体` , class : 'MenuPanel_main' } ,
220+ { name : t `菜单面板按钮` , class : 'MenuPanel_button' } ,
221+ { name : t `菜单面板按钮图标` , class : 'MenuPanel_button_icon' } ,
222+ { name : t `菜单面板按钮高亮` , class : 'MenuPanel_button_hl' } ,
223+ ] ,
224+ } ;
225+ } ;
226+
227+ export const useComponentTreeNormalButton = ( ) => {
228+ return {
229+ name : t `普通按钮` ,
230+ path : `UI/Menu/normalButton.scss` ,
231+ nodes : [
232+ { name : t `普通按钮` , class : 'NormalButton' } ,
233+ { name : t `普通按钮(选中)` , class : 'NormalButtonChecked' } ,
234+ ] ,
235+ } ;
236+ } ;
237+
238+ export const useComponentTreeNormalOption = ( ) => {
239+ return {
240+ name : t `普通选项` ,
241+ path : `UI/Menu/normalOption.scss` ,
242+ nodes : [
243+ { name : t `普通选项容器` , class : 'NormalOption' } ,
244+ { name : t `普通选项标题` , class : 'NormalOption_title' } ,
245+ { name : t `普通选项标题描边` , class : 'NormalOption_title_bef' } ,
246+ { name : t `普通选项标题阴影` , class : 'NormalOption_title_sd' } ,
247+ { name : t `普通选项按钮列表` , class : 'NormalOption_buttonList' } ,
248+ ] ,
249+ } ;
250+ } ;
251+
252+ export const useComponentTreeOptions = ( ) => {
253+ return {
254+ name : t `选项设置` ,
255+ path : `UI/Menu/options.scss` ,
256+ nodes : [
257+ { name : t `选项主界面` , class : 'Options_main' } ,
258+ { name : t `选项顶部` , class : 'Options_top' } ,
259+ { name : t `选项标题` , class : 'Options_title' } ,
260+ { name : t `选项标题文字` , class : 'Option_title_text' } ,
261+ { name : t `选项标题描边` , class : 'Option_title_text_shadow' } ,
262+ { name : t `选项标题投影` , class : 'Option_title_text_ts' } ,
263+ { name : t `选项内容区` , class : 'Options_main_content' } ,
264+ { name : t `选项内容列` , class : 'Options_main_content_half' } ,
265+ { name : t `关于入口标题` , class : 'About_title_text' } ,
266+ { name : t `关于入口文字` , class : 'About_text' } ,
267+ { name : t `选项分页容器` , class : 'Options_page_container' } ,
268+ { name : t `选项分页按钮列表` , class : 'Options_button_list' } ,
269+ { name : t `选项分页按钮` , class : 'Options_page_button' } ,
270+ { name : t `选项分页按钮(激活)` , class : 'Options_page_button_active' } ,
271+ ] ,
272+ } ;
273+ } ;
274+
275+ export const useComponentTreeSaveAndLoad = ( ) => {
276+ return {
277+ name : t `存读档` ,
278+ path : `UI/Menu/saveAndLoad.scss` ,
279+ nodes : [
280+ { name : t `存读主界面` , class : 'Save_Load_main' } ,
281+ { name : t `存读顶部` , class : 'Save_Load_top' } ,
282+ { name : t `存读标题背景` , class : 'Save_Load_title' } ,
283+ { name : t `存档标题文字` , class : 'Save_title_text' } ,
284+ { name : t `读档标题文字` , class : 'Load_title_text' } ,
285+ { name : t `存读顶部按钮列表` , class : 'Save_Load_top_buttonList' } ,
286+ { name : t `存读顶部按钮` , class : 'Save_Load_top_button' } ,
287+ { name : t `存读顶部按钮文字` , class : 'Save_Load_top_button_text' } ,
288+ { name : t `存读顶部按钮(选中)` , class : 'Save_Load_top_button_on' } ,
289+ { name : t `读档顶部按钮(选中)` , class : 'Load_top_button_on' } ,
290+ { name : t `存读内容区` , class : 'Save_Load_content' } ,
291+ { name : t `存读条目` , class : 'Save_Load_content_element' } ,
292+ { name : t `存读条目顶部` , class : 'Save_Load_content_element_top' } ,
293+ { name : t `存读条目序号` , class : 'Save_Load_content_element_top_index' } ,
294+ { name : t `读档条目序号` , class : 'Load_content_elememt_top_index' } ,
295+ { name : t `存读条目日期` , class : 'Save_Load_content_element_top_date' } ,
296+ { name : t `读档条目日期` , class : 'Load_content_element_top_date' } ,
297+ { name : t `存读条目文本` , class : 'Save_Load_content_text' } ,
298+ { name : t `存读条目文本内边距` , class : 'Save_Load_content_text_padding' } ,
299+ { name : t `存读条目角色名` , class : 'Save_Load_content_speaker' } ,
300+ { name : t `读档条目角色名` , class : 'Load_content_speaker' } ,
301+ { name : t `读档条目文本` , class : 'Load_content_text' } ,
302+ { name : t `存读小立绘` , class : 'Save_Load_content_miniRen' } ,
303+ { name : t `存读小立绘背景` , class : 'Save_Load_content_miniRen_bg' } ,
304+ { name : t `存读小立绘角色` , class : 'Save_Load_content_miniRen_figure' } ,
305+ { name : t `存读小立绘(左)` , class : 'Save_Load_content_miniRen_figLeft' } ,
306+ { name : t `存读小立绘(右)` , class : 'Save_Load_content_miniRen_figRight' } ,
307+ ] ,
308+ } ;
309+ } ;
310+
311+ export const useComponentTreeSlider = ( ) => {
312+ return {
313+ name : t `滑块` ,
314+ path : `UI/Menu/slider.scss` ,
315+ nodes : [
316+ { name : t `选项滑块` , class : 'Option_WebGAL_slider' } ,
317+ { name : t `滑块气泡` , class : 'bubble' } ,
318+ ] ,
319+ } ;
320+ } ;
321+
322+ export const useComponentTreeAbout = ( ) => {
323+ return {
324+ name : t `关于` ,
325+ path : `UI/Menu/about.scss` ,
326+ nodes : [
327+ { name : t `返回按钮` , class : 'backButton' } ,
328+ { name : t `关于内容` , class : 'about' } ,
329+ { name : t `图标` , class : 'icon' } ,
330+ { name : t `标题` , class : 'title' } ,
331+ { name : t `文本` , class : 'text' } ,
332+ { name : t `贡献者` , class : 'contributor' } ,
333+ ] ,
334+ } ;
335+ } ;
336+
337+ export const useComponentTreeTextPreview = ( ) => {
338+ return {
339+ name : t `文本预览` ,
340+ path : `UI/Menu/textPreview.scss` ,
341+ nodes : [
342+ { name : t `文本预览主体` , class : 'textPreviewMain' } ,
343+ { name : t `预览文本框` , class : 'textbox' } ,
344+ ] ,
345+ } ;
346+ } ;
347+
348+ export const useComponentTreePanicOverlay = ( ) => {
349+ return {
350+ name : t `紧急遮罩` ,
351+ path : `UI/PanicOverlay/panicOverlay.scss` ,
352+ nodes : [
353+ { name : t `紧急遮罩主体` , class : 'panic_overlay_main' } ,
354+ ] ,
355+ } ;
356+ } ;
357+
75358export default function ComponentTree ( ) {
76359
77360 useLingui ( ) ;
@@ -83,8 +366,25 @@ export default function ComponentTree() {
83366
84367 const componentTree : IComponentNode [ ] = [
85368 useComponentTreeTitle ( ) ,
369+ useComponentTreeLogo ( ) ,
86370 useComponentTreeTextbox ( ) ,
87371 useComponentTreeChoose ( ) ,
372+ useComponentTreeBacklog ( ) ,
373+ useComponentTreeBottomControlPanel ( ) ,
374+ useComponentTreeBottomControlPanelFilm ( ) ,
375+ useComponentTreeDevPanel ( ) ,
376+ useComponentTreeExtra ( ) ,
377+ useComponentTreeGlobalDialog ( ) ,
378+ useComponentTreeMenu ( ) ,
379+ useComponentTreeMenuPanel ( ) ,
380+ useComponentTreeNormalButton ( ) ,
381+ useComponentTreeNormalOption ( ) ,
382+ useComponentTreeOptions ( ) ,
383+ useComponentTreeSaveAndLoad ( ) ,
384+ useComponentTreeSlider ( ) ,
385+ useComponentTreeAbout ( ) ,
386+ useComponentTreeTextPreview ( ) ,
387+ useComponentTreePanicOverlay ( ) ,
88388 ] ;
89389
90390 const templateDir = useEditorStore . use . subPage ( ) ;
0 commit comments