4c673d2628
- **Code Organization & Architecture:** - Restructured component with clear sections (Hooks, Constants, Helper Functions, etc.) - Added comprehensive code organization comments for better maintainability - Extracted reusable helper functions and constants for better separation of concerns - **Performance Optimizations:** - Implemented extensive use of useCallback and useMemo hooks for expensive operations - Optimized data processing pipeline with dedicated processing functions - Memoized chart configurations, performance metrics, and grouped stats data - Cached helper functions like getTrendSpec, handleCopyUrl, and modal handlers - **UI/UX Enhancements:** - Added Empty state component with construction illustrations for better UX - Implemented responsive grid layout with conditional API info section visibility - Enhanced button styling with consistent rounded design and hover effects - Added mini trend charts to statistics cards for visual data representation - Improved form field consistency with reusable createFormField helper - **Feature Improvements:** - Added self-use mode detection to conditionally hide/show API information section - Enhanced chart configurations with centralized CHART_CONFIG constant - Improved time handling with dedicated helper functions (getTimeInterval, getInitialTimestamp) - Added comprehensive performance metrics calculation (RPM/TPM trends) - Implemented advanced data aggregation and processing workflows - **Code Quality & Maintainability:** - Extracted complex data processing logic into dedicated functions - Added proper prop destructuring and state organization - Implemented consistent naming conventions and helper utilities - Enhanced error handling and loading states management - Added comprehensive JSDoc-style comments for better code documentation - **Technical Debt Reduction:** - Replaced repetitive form field definitions with reusable components - Consolidated chart update logic into centralized updateChartSpec function - Improved data flow with better state management patterns - Reduced code duplication through strategic use of helper functions This refactor significantly improves component performance, maintainability, and user experience while maintaining backward compatibility and existing functionality.
493 lines
10 KiB
CSS
493 lines
10 KiB
CSS
/* ==================== Tailwind CSS 配置 ==================== */
|
|
@layer tailwind-base, semi, tailwind-components, tailwind-utils;
|
|
|
|
@layer tailwind-base {
|
|
@tailwind base;
|
|
}
|
|
|
|
@layer tailwind-components {
|
|
@tailwind components;
|
|
}
|
|
|
|
@layer tailwind-utils {
|
|
@tailwind utilities;
|
|
}
|
|
|
|
/* ==================== 全局基础样式 ==================== */
|
|
body {
|
|
margin: 0;
|
|
padding-top: 0;
|
|
font-family:
|
|
Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
scrollbar-width: none;
|
|
color: var(--semi-color-text-0) !important;
|
|
background-color: var(--semi-color-bg-0) !important;
|
|
height: 100vh;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
code {
|
|
font-family:
|
|
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
#root {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ==================== 布局相关样式 ==================== */
|
|
.semi-layout-content::-webkit-scrollbar,
|
|
.semi-sider::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.semi-layout-content::-webkit-scrollbar-thumb,
|
|
.semi-sider::-webkit-scrollbar-thumb {
|
|
background: var(--semi-color-tertiary-light-default);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.semi-layout-content::-webkit-scrollbar-thumb:hover,
|
|
.semi-sider::-webkit-scrollbar-thumb:hover {
|
|
background: var(--semi-color-tertiary);
|
|
}
|
|
|
|
.semi-layout-content::-webkit-scrollbar-track,
|
|
.semi-sider::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* ==================== 导航和侧边栏样式 ==================== */
|
|
/* 导航项样式 */
|
|
.semi-navigation-sub-title,
|
|
.semi-chat-inputBox-sendButton,
|
|
.semi-page-item,
|
|
.semi-navigation-item,
|
|
.semi-tag-closable,
|
|
.semi-input-wrapper,
|
|
.semi-tabs-tab-button,
|
|
.semi-select,
|
|
.semi-button,
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
height: 100%;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-chatBox {
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-chatBox-wrap {
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-chatBox-content {
|
|
min-width: auto;
|
|
word-break: break-word;
|
|
max-width: 100% !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.semi-chat-content {
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-list {
|
|
max-width: 100% !important;
|
|
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-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.semi-chat,
|
|
.semi-chat-chatBox,
|
|
.semi-chat-chatBox-wrap,
|
|
.semi-chat-chatBox-content,
|
|
.semi-chat-content,
|
|
.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;
|
|
}
|
|
|
|
/* API信息卡片样式 */
|
|
.api-info-container {
|
|
position: relative;
|
|
}
|
|
|
|
.api-info-fade-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 30px;
|
|
background: linear-gradient(transparent, var(--semi-color-bg-1));
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
/* ==================== 调试面板特定样式 ==================== */
|
|
.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;
|
|
}
|
|
|
|
/* ==================== 滚动条样式统一管理 ==================== */
|
|
/* 表格滚动条样式 */
|
|
.semi-table-body::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.semi-table-body::-webkit-scrollbar-thumb {
|
|
background: rgba(var(--semi-grey-2), 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.semi-table-body::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(var(--semi-grey-2), 0.5);
|
|
}
|
|
|
|
.semi-table-body::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* 侧边抽屉滚动条样式 */
|
|
.semi-sidesheet-body::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.semi-sidesheet-body::-webkit-scrollbar-thumb {
|
|
background: rgba(var(--semi-grey-2), 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.semi-sidesheet-body::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(var(--semi-grey-2), 0.5);
|
|
}
|
|
|
|
.semi-sidesheet-body::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* 隐藏模型设置区域的滚动条 */
|
|
.api-info-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;
|
|
}
|
|
|
|
.api-info-scroll,
|
|
.model-settings-scroll,
|
|
.thinking-content-scroll,
|
|
.custom-request-textarea .semi-input,
|
|
.custom-request-textarea textarea {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* 图片列表滚动条样式 */
|
|
.image-list-scroll::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.image-list-scroll::-webkit-scrollbar-thumb {
|
|
background: var(--semi-color-tertiary-light-default);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.image-list-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: var(--semi-color-tertiary);
|
|
}
|
|
|
|
.image-list-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* ==================== 响应式/移动端样式 ==================== */
|
|
@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);
|
|
}
|
|
} |