소스 검색

style(FlowChart): 调整样式以改进布局和交互

- 为控制按钮添加相对定位,防止布局错乱
- 将主内容区域 overflow 改为 hidden 并调整布局方式
- 优化空状态内容的居中对齐
- 移除未使用的 messages 日志,保持控制台整洁
max_liu 3 주 전
부모
커밋
e7a349079b

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 526 - 426
frontend/react-template/src/components/FlowChart/FlowChart.tsx


+ 1 - 0
frontend/react-template/src/components/FlowChart/styles/FlowChart.module.css

@@ -43,6 +43,7 @@
   color: #333;
   color: #333;
   font-size: 14px;
   font-size: 14px;
   cursor: pointer;
   cursor: pointer;
+  position: relative;
 }
 }
 
 
 .controlButton:hover {
 .controlButton:hover {

+ 4 - 3
frontend/react-template/src/components/MainContent/MainContent.module.css

@@ -53,14 +53,15 @@
 
 
 .content {
 .content {
   flex: 1;
   flex: 1;
-  overflow: auto;
+  overflow: hidden;
   background: #fafafa;
   background: #fafafa;
   display: flex;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  position: relative;
 }
 }
 
 
 .empty {
 .empty {
   color: #999;
   color: #999;
   font-size: 14px;
   font-size: 14px;
+  margin: auto;
 }
 }

+ 2 - 2
frontend/react-template/src/components/MainContent/MainContent.tsx

@@ -15,8 +15,8 @@ interface MainContentProps {
 export const MainContent: FC<MainContentProps> = ({ traceId, onNodeClick }) => {
 export const MainContent: FC<MainContentProps> = ({ traceId, onNodeClick }) => {
   const { trace, loading } = useTrace(traceId);
   const { trace, loading } = useTrace(traceId);
   const initialGoals = useMemo(() => trace?.goal_tree?.goals ?? [], [trace]);
   const initialGoals = useMemo(() => trace?.goal_tree?.goals ?? [], [trace]);
-  const { goals, connected, msgGroups, messages } = useFlowChartData(traceId, initialGoals);
-  console.log("%c [ messages ]-19", "font-size:13px; background:pink; color:#bf2c9f;", messages);
+  const { goals, connected, msgGroups } = useFlowChartData(traceId, initialGoals);
+  console.log("%c [ MainContent-goals ]-19", "font-size:13px; background:pink; color:#bf2c9f;", goals);
 
 
   if (!traceId && !loading) {
   if (!traceId && !loading) {
     return (
     return (

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.