优化样式和布局，调整基因时序分析页面的标题和图例位置，更新导航容器样式以适应全宽显示。

embryo-frontend/src/pages/TemporalAnalysis.tsx

@@ -512,8 +512,8 @@ const TemporalAnalysis: React.FC = () => {
 
             {/* 基因时序分析部分 */}
             <div className="visualization-container">
-              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
+              <h3 style={{ marginBottom: "1rem", textAlign: "center" }}>基因时序分析</h3>
-                <h3 style={{ margin: 0 }}>基因时序分析</h3>
+              <div style={{ display: "flex", justifyContent: "center", alignItems: "center", marginBottom: "1rem" }}>
                 <select
                   value={selectedGene}
                   onChange={(e) => {
@@ -585,14 +585,14 @@ const TemporalAnalysis: React.FC = () => {
                     lineWidth={3}
                     legends={[
                       {
-                        anchor: 'bottom-right',
+                        anchor: 'top',
-                        direction: 'column',
+                        direction: 'row',
                         justify: false,
-                        translateX: 60,
+                        translateX: 0,
-                        translateY: 0,
+                        translateY: -30,
-                        itemsSpacing: 1,
+                        itemsSpacing: 45,
-                        itemWidth: 50,
+                        itemWidth: 70,
-                        itemHeight: 14,
+                        itemHeight: 16,
                         itemDirection: 'left-to-right',
                         itemOpacity: 0.75,
                         symbolSize: 8,

embryo-frontend/src/style.css

@@ -60,8 +60,9 @@ body {
 }
 
 .nav-container {
-  max-width: 1200px;
+  /* max-width: 1200px; */
-  margin: 0 auto;
+  /* margin: 0 auto; */
+  width: 100%;
   padding: 0 1rem;
   display: flex;
   align-items: center;