本文为对大项目的简单总结，我在其中担任了UI设计的角色，并承担了依赖搜索界面的需求实现，此篇笔记为上篇，主要聚焦于UI设计与页面布局。
UI设计：
项目的UX设计参考了Google的搜索界面与npmgraph的功能/布局，由于这是一款to D的“产品”，组内的成员也同时是产品的用户，在功能上也大量采纳了他们的意见。此处与项目实现无关，略过。
UI设计则参考了Ant Design的组件库，由于组员不希望直接使用组件库，因此在设计参考了Ant Design的设计规范的前提下，组件均自己实现。搜索界面使用过的组件包含按钮（default, hover, focus, active四种状态），搜索栏，拖拽上传栏等。icon则使用UnoCSS的preset icon，大部分来源于Google Material Design库。由于没有过于复杂的交互表现，实现起来较为简单，大部分暂且略过。
但是在实现搜索栏处遇到了一些问题，由于调用了react-autosuggest库，样式调整受到库本身的限制，suggestion panel的收放，search logo的插入与input边框的隐藏，以及高亮，键盘操作的支持，都花费了大量时间搜索尝试解决方案，此处贴入当时遇到问题或尚未解决的CSS问题作为记录：
...
input.input:focus {
// 此处无法直接使用伪类选择器，原因未知
outline-width: 0;
}
}
...
&::-webkit-scrollbar-track {
width: 6px;
margin: 0 3px 23px;
//此处margin作用未及预期，原因未知
}
...
&:hover {
background-color: var(--control-item-bg-hover);
// 此处高亮部分会超出圆角范围，未找到合适的解决方案
}
...
页面布局：
我实现的部分为搜索界面，布局分为三个板块：
header - main navigation - icons (internationalization, dark/light mode, history page)
search page - logo - search bar - search button/drag and drop
footer - contributor
此外还有浮动于整体布局的history panel黏附于history page的icon附近， 由于该工具只使用于Web端/命令行，无需进行移动端适配，响应式方面要求也比较低。
