🎨 refactor: migrate sidebar inline styles to CSS classes and improve code organization
This commit improves the codebase structure by: - Moving all inline styles from SiderBar.js to CSS classes in index.css - Organizing CSS with clear section comments for better maintainability - Removing unused imports and components - Improving sidebar design with cleaner styling and consistent color management - Restructuring CSS to group related styles together - Adjusting sidebar width from 200px to 180px - Replacing Text components with semantic divs for group labels - Creating a color management function for sidebar icons
This commit is contained in:
Apple\Apple
@@ -1,3 +1,4 @@
|
||||
/* ==================== Tailwind CSS 配置 ==================== */
|
||||
@layer tailwind-base, semi, tailwind-components, tailwind-utils;
|
||||
|
||||
@layer tailwind-base {
|
||||
@@ -12,6 +13,7 @@
|
||||
@tailwind utilities;
|
||||
}
|
||||
|
||||
/* ==================== 全局基础样式 ==================== */
|
||||
body {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
@@ -25,80 +27,6 @@ body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li>span {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-footer>div>a>li {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-footer>div:nth-child(1)>a>li {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.semi-navigation-horizontal .semi-navigation-header {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* 确保移动端内容可滚动 */
|
||||
.semi-layout-content {
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
overscroll-behavior-y: auto !important;
|
||||
}
|
||||
|
||||
/* 修复移动端下拉刷新 */
|
||||
body {
|
||||
overflow: visible !important;
|
||||
overscroll-behavior-y: auto !important;
|
||||
position: static !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* 确保内容区域在移动端可以正常滚动 */
|
||||
#root {
|
||||
overflow: visible !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.semi-table-tbody,
|
||||
.semi-table-row,
|
||||
.semi-table-row-cell {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
padding: 2px !important;
|
||||
}
|
||||
|
||||
.semi-table-row-cell {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.semi-table-tbody>.semi-table-row {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.tableShow {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.tableHiddle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -108,10 +36,14 @@ code {
|
||||
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.custom-footer {
|
||||
font-size: 1.1em;
|
||||
#root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==================== 布局相关样式 ==================== */
|
||||
.semi-layout-content::-webkit-scrollbar,
|
||||
.semi-sider::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
@@ -134,19 +66,161 @@ code {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ==================== 导航和侧边栏样式 ==================== */
|
||||
/* 导航项样式 */
|
||||
.semi-navigation-sub-title,
|
||||
.semi-chat-inputBox-sendButton,
|
||||
.semi-page-item,
|
||||
.semi-navigation-item,
|
||||
.semi-tag-closable,
|
||||
.semi-datepicker-range-input {
|
||||
border-radius: 9999px !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item-icon {
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.semi-navigation-item-icon-info {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.semi-navigation-sub-title {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item-collapsed {
|
||||
height: 44px !important;
|
||||
}
|
||||
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li>span {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* 自定义侧边栏样式 */
|
||||
.sidebar-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background: var(--semi-color-bg-0);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-right: none;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.sidebar-nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 侧边栏导航项样式 */
|
||||
.sidebar-nav-item {
|
||||
border-radius: 6px;
|
||||
margin: 3px 8px;
|
||||
transition: all 0.15s ease;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.sidebar-nav-item:hover {
|
||||
background-color: rgba(var(--semi-blue-0), 0.08);
|
||||
color: var(--semi-color-primary);
|
||||
}
|
||||
|
||||
.sidebar-nav-item-selected {
|
||||
background-color: rgba(var(--semi-blue-0), 0.12);
|
||||
color: var(--semi-color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 图标容器样式 */
|
||||
.sidebar-icon-container {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-sub-icon-container {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
margin-left: 1px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 分割线样式 */
|
||||
.sidebar-divider {
|
||||
margin: 4px 8px;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/* 分组标签样式 */
|
||||
.sidebar-group-label {
|
||||
padding: 4px 15px 8px;
|
||||
color: var(--semi-color-text-2);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 底部折叠按钮 */
|
||||
.sidebar-collapse-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
background-color: var(--semi-color-bg-0);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
|
||||
backdrop-filter: blur(4px);
|
||||
border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
|
||||
}
|
||||
|
||||
.sidebar-collapse-button-inner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--semi-color-fill-0);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.semi-tabs-content {
|
||||
padding: 0 !important;
|
||||
.sidebar-collapse-icon-container {
|
||||
display: inline-block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* 聊天 */
|
||||
/* 侧边栏区域容器 */
|
||||
.sidebar-section {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
/* ==================== 聊天界面样式 ==================== */
|
||||
.semi-chat {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
@@ -183,13 +257,26 @@ code {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.semi-chat-container {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.semi-chat-chatBox-action {
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
|
||||
.semi-chat-inputBox-clearButton.semi-button .semi-icon {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
/* 隐藏所有聊天相关区域的滚动条 */
|
||||
.semi-chat::-webkit-scrollbar,
|
||||
.semi-chat-chatBox::-webkit-scrollbar,
|
||||
.semi-chat-chatBox-wrap::-webkit-scrollbar,
|
||||
.semi-chat-chatBox-content::-webkit-scrollbar,
|
||||
.semi-chat-content::-webkit-scrollbar,
|
||||
.semi-chat-list::-webkit-scrollbar {
|
||||
.semi-chat-list::-webkit-scrollbar,
|
||||
.semi-chat-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -198,40 +285,72 @@ code {
|
||||
.semi-chat-chatBox-wrap,
|
||||
.semi-chat-chatBox-content,
|
||||
.semi-chat-content,
|
||||
.semi-chat-list {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.semi-chat-container {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.semi-chat-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.semi-chat-list,
|
||||
.semi-chat-container {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* ==================== 组件特定样式 ==================== */
|
||||
/* Tabs组件样式 */
|
||||
.semi-tabs-content {
|
||||
padding: 0 !important;
|
||||
height: calc(100% - 40px) !important;
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
.semi-tabs-content .semi-tabs-pane {
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.semi-tabs-content .semi-tabs-pane>div {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.tableShow {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.tableHiddle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
.custom-footer {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* ==================== 调试面板特定样式 ==================== */
|
||||
.debug-panel .semi-tabs {
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.debug-panel .semi-tabs-bar {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.debug-panel .semi-tabs-content {
|
||||
flex: 1 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ==================== 滚动条样式统一管理 ==================== */
|
||||
/* 隐藏模型设置区域的滚动条 */
|
||||
.model-settings-scroll::-webkit-scrollbar {
|
||||
.model-settings-scroll::-webkit-scrollbar,
|
||||
.thinking-content-scroll::-webkit-scrollbar,
|
||||
.custom-request-textarea .semi-input::-webkit-scrollbar,
|
||||
.custom-request-textarea textarea::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.model-settings-scroll {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* 思考内容区域滚动条样式 */
|
||||
.thinking-content-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.thinking-content-scroll {
|
||||
.model-settings-scroll,
|
||||
.thinking-content-scroll,
|
||||
.custom-request-textarea .semi-input,
|
||||
.custom-request-textarea textarea {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
@@ -255,60 +374,58 @@ code {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 隐藏请求体 JSON TextArea 的滚动条 */
|
||||
.custom-request-textarea .semi-input::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* ==================== 响应式/移动端样式 ==================== */
|
||||
@media only screen and (max-width: 767px) {
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-footer>div>a>li {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.custom-request-textarea .semi-input {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.custom-request-textarea textarea::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-footer>div:nth-child(1)>a>li {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.custom-request-textarea textarea {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.semi-navigation-horizontal .semi-navigation-header {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* 调试面板标签样式 */
|
||||
.semi-tabs-content {
|
||||
height: calc(100% - 40px) !important;
|
||||
flex: 1 !important;
|
||||
}
|
||||
/* 确保移动端内容可滚动 */
|
||||
.semi-layout-content {
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
overscroll-behavior-y: auto !important;
|
||||
}
|
||||
|
||||
.semi-tabs-content .semi-tabs-pane {
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
/* 修复移动端下拉刷新 */
|
||||
body {
|
||||
overflow: visible !important;
|
||||
overscroll-behavior-y: auto !important;
|
||||
position: static !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.semi-tabs-content .semi-tabs-pane>div {
|
||||
height: 100% !important;
|
||||
}
|
||||
/* 确保内容区域在移动端可以正常滚动 */
|
||||
#root {
|
||||
overflow: visible !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* 调试面板特定样式 */
|
||||
.debug-panel .semi-tabs {
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
/* 移动端表格样式调整 */
|
||||
.semi-table-tbody,
|
||||
.semi-table-row,
|
||||
.semi-table-row-cell {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
padding: 2px !important;
|
||||
}
|
||||
|
||||
.debug-panel .semi-tabs-bar {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
.semi-table-row-cell {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.debug-panel .semi-tabs-content {
|
||||
flex: 1 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.semi-chat-chatBox-action {
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
|
||||
.semi-chat-inputBox-clearButton.semi-button .semi-icon {
|
||||
font-size: 20px !important;
|
||||
.semi-table-tbody>.semi-table-row {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user