zen-gitsync 2.0.5 → 2.0.6

package/src/ui/client/src/App.vue

@@ -68,7 +68,6 @@ onMounted(async () => {
       ])
       
       // 日志信息通过LogList组件直接加载即可，避免重复调用
-      // 移除 gitLogStore.fetchLog() 调用
     } else {
       ElMessage.warning('当前目录不是Git仓库，部分功能将不可用')
     }
@@ -78,6 +77,12 @@ onMounted(async () => {
     // 标记初始化完成
     initCompleted.value = true
     console.log('---------- 页面初始化完成 ----------')
+    
+    // 无论是否是Git仓库，都应该加载布局比例
+    // 使用短延时确保DOM已完全渲染
+    setTimeout(() => {
+      loadLayoutRatios();
+    }, 100);
   }
 })
 
@@ -164,6 +169,193 @@ async function clearUserSettings() {
     tempUserEmail.value = ''
   }
 }
+
+// 添加分隔条相关逻辑
+let isVResizing = false;
+let isHResizing = false;
+let initialX = 0;
+let initialY = 0;
+let initialGridTemplateColumns = '';
+let initialGridTemplateRows = '';
+
+// 保存布局比例到localStorage
+function saveLayoutRatios() {
+  const gridLayout = document.querySelector('.grid-layout') as HTMLElement;
+  if (!gridLayout) return;
+  
+  // 获取当前的列和行比例
+  const columns = getComputedStyle(gridLayout).gridTemplateColumns.split(' ');
+  const rows = getComputedStyle(gridLayout).gridTemplateRows.split(' ');
+  
+  if (columns.length >= 3 && rows.length >= 3) {
+    // 解析左右区域比例
+    const leftColWidth = parseFloat(columns[0]);
+    const rightColWidth = parseFloat(columns[2]);
+    const totalWidth = leftColWidth + rightColWidth;
+    const leftRatio = leftColWidth / totalWidth;
+    
+    // 解析上下区域比例
+    const topRowHeight = parseFloat(rows[0]);
+    const bottomRowHeight = parseFloat(rows[2]);
+    const totalHeight = topRowHeight + bottomRowHeight;
+    const topRatio = topRowHeight / totalHeight;
+    
+    // 保存到localStorage
+    localStorage.setItem('zen-gitsync-layout-left-ratio', leftRatio.toString());
+    localStorage.setItem('zen-gitsync-layout-top-ratio', topRatio.toString());
+    
+    console.log(`布局比例已保存 - 左侧: ${(leftRatio * 100).toFixed(0)}%, 上方: ${(topRatio * 100).toFixed(0)}%`);
+  }
+}
+
+// 加载布局比例
+function loadLayoutRatios() {
+  const gridLayout = document.querySelector('.grid-layout') as HTMLElement;
+  if (!gridLayout) return;
+  
+  // 从localStorage获取保存的比例
+  const savedLeftRatio = localStorage.getItem('zen-gitsync-layout-left-ratio');
+  const savedTopRatio = localStorage.getItem('zen-gitsync-layout-top-ratio');
+  
+  // 应用左右区域比例
+  if (savedLeftRatio) {
+    const leftRatio = parseFloat(savedLeftRatio);
+    const rightRatio = 1 - leftRatio;
+    gridLayout.style.gridTemplateColumns = `${leftRatio}fr 8px ${rightRatio}fr`;
+    console.log(`已恢复左侧比例: ${(leftRatio * 100).toFixed(0)}%`);
+  } else {
+    // 默认比例 1:3
+    gridLayout.style.gridTemplateColumns = "1fr 8px 3fr";
+  }
+  
+  // 应用上下区域比例
+  if (savedTopRatio) {
+    const topRatio = parseFloat(savedTopRatio);
+    const bottomRatio = 1 - topRatio;
+    gridLayout.style.gridTemplateRows = `${topRatio}fr 8px ${bottomRatio}fr`;
+    console.log(`已恢复上方比例: ${(topRatio * 100).toFixed(0)}%`);
+  }
+}
+
+function startVResize(event: MouseEvent) {
+  isVResizing = true;
+  initialX = event.clientX;
+  
+  const gridLayout = document.querySelector('.grid-layout') as HTMLElement;
+  initialGridTemplateColumns = getComputedStyle(gridLayout).gridTemplateColumns;
+  
+  document.getElementById('v-resizer')?.classList.add('active');
+  
+  document.addEventListener('mousemove', handleVResize);
+  document.addEventListener('mouseup', stopVResize);
+  
+  // 防止文本选择
+  event.preventDefault();
+}
+
+function handleVResize(event: MouseEvent) {
+  if (!isVResizing) return;
+  
+  const gridLayout = document.querySelector('.grid-layout') as HTMLElement;
+  const delta = event.clientX - initialX;
+  
+  // 解析当前的网格模板列值
+  const columns = initialGridTemplateColumns.split(' ');
+  
+  // 确保我们有足够的列
+  if (columns.length >= 3) {
+    // 计算新的左列宽度
+    const leftColWidth = parseFloat(columns[0]);
+    const rightColWidth = parseFloat(columns[2]);
+    
+    // 计算新的左右列比例
+    const totalWidth = leftColWidth + rightColWidth;
+    const newLeftRatio = (leftColWidth + delta / gridLayout.clientWidth * totalWidth) / totalWidth;
+    const newRightRatio = 1 - newLeftRatio;
+    
+    // 确保左侧宽度不小于总宽度的10%且不大于50%
+    const minLeftRatio = 0.1;
+    const maxLeftRatio = 0.5;
+    
+    if (newLeftRatio < minLeftRatio) {
+      gridLayout.style.gridTemplateColumns = `${minLeftRatio}fr 8px ${1 - minLeftRatio}fr`;
+    } else if (newLeftRatio > maxLeftRatio) {
+      gridLayout.style.gridTemplateColumns = `${maxLeftRatio}fr 8px ${1 - maxLeftRatio}fr`;
+    } else {
+      gridLayout.style.gridTemplateColumns = `${newLeftRatio}fr 8px ${newRightRatio}fr`;
+    }
+  }
+}
+
+function stopVResize() {
+  isVResizing = false;
+  document.getElementById('v-resizer')?.classList.remove('active');
+  document.removeEventListener('mousemove', handleVResize);
+  document.removeEventListener('mouseup', stopVResize);
+  
+  // 保存布局比例
+  saveLayoutRatios();
+}
+
+function startHResize(event: MouseEvent) {
+  isHResizing = true;
+  initialY = event.clientY;
+  
+  const gridLayout = document.querySelector('.grid-layout') as HTMLElement;
+  initialGridTemplateRows = getComputedStyle(gridLayout).gridTemplateRows;
+  
+  document.getElementById('h-resizer')?.classList.add('active');
+  
+  document.addEventListener('mousemove', handleHResize);
+  document.addEventListener('mouseup', stopHResize);
+  
+  // 防止文本选择
+  event.preventDefault();
+}
+
+function handleHResize(event: MouseEvent) {
+  if (!isHResizing) return;
+  
+  const gridLayout = document.querySelector('.grid-layout') as HTMLElement;
+  const delta = event.clientY - initialY;
+  
+  // 解析当前的网格模板行值
+  const rows = initialGridTemplateRows.split(' ');
+  
+  // 确保我们有足够的行
+  if (rows.length >= 3) {
+    // 计算新的上行高度
+    const topRowHeight = parseFloat(rows[0]);
+    const bottomRowHeight = parseFloat(rows[2]);
+    
+    // 计算新的上下行比例
+    const totalHeight = topRowHeight + bottomRowHeight;
+    const newTopRatio = (topRowHeight + delta / gridLayout.clientHeight * totalHeight) / totalHeight;
+    const newBottomRatio = 1 - newTopRatio;
+    
+    // 确保上方区域不小于总高度的20%且不大于80%
+    const minTopRatio = 0.2;
+    const maxTopRatio = 0.8;
+    
+    if (newTopRatio < minTopRatio) {
+      gridLayout.style.gridTemplateRows = `${minTopRatio}fr 8px ${1 - minTopRatio}fr`;
+    } else if (newTopRatio > maxTopRatio) {
+      gridLayout.style.gridTemplateRows = `${maxTopRatio}fr 8px ${1 - maxTopRatio}fr`;
+    } else {
+      gridLayout.style.gridTemplateRows = `${newTopRatio}fr 8px ${newBottomRatio}fr`;
+    }
+  }
+}
+
+function stopHResize() {
+  isHResizing = false;
+  document.getElementById('h-resizer')?.classList.remove('active');
+  document.removeEventListener('mousemove', handleHResize);
+  document.removeEventListener('mouseup', stopHResize);
+  
+  // 保存布局比例
+  saveLayoutRatios();
+}
 </script>
 
 <template>
@@ -200,11 +392,10 @@ async function clearUserSettings() {
           <el-icon><Setting /></el-icon>
         </el-button>
       </div>
-      <!-- <div id="config-info">{{ configInfo }}</div> -->
     </div>
   </header>
   
-  <div class="container">
+  <main class="main-container">
     <div v-if="!initCompleted" class="loading-container">
       <el-card class="loading-card">
         <div class="loading-spinner">
@@ -214,17 +405,20 @@ async function clearUserSettings() {
       </el-card>
     </div>
     
-    <div v-else class="layout-container">
-      <!-- 左侧Git状态 -->
-      <div class="left-panel">
+    <div v-else class="grid-layout">
+      <!-- 上方左侧Git状态 -->
+      <div class="git-status-panel">
         <GitStatus 
           ref="gitStatusRef" 
           :initial-directory="currentDirectory"
         />
       </div>
       
-      <!-- 右侧提交表单和历史 -->
-      <div class="right-panel" v-if="gitStore.isGitRepo">
+      <!-- 垂直分隔条 -->
+      <div class="vertical-resizer" id="v-resizer" @mousedown="startVResize"></div>
+      
+      <!-- 上方右侧提交表单 -->
+      <div class="commit-form-panel" v-if="gitStore.isGitRepo">
         <!-- 当用户未配置时显示配置提示 -->
         <div v-if="!gitStore.userName || !gitStore.userEmail" class="card">
           <h2>Git用户未配置</h2>
@@ -250,10 +444,9 @@ async function clearUserSettings() {
         <!-- 用户已配置显示提交表单 -->
         <template v-else>
           <CommitForm />
-          <LogList ref="logListRef" />
         </template>
       </div>
-      <div class="right-panel" v-else>
+      <div class="commit-form-panel" v-else>
         <div class="card">
           <h2>Git仓库初始化</h2>
           <p>当前目录不是Git仓库，请先初始化Git仓库或切换到Git仓库目录。</p>
@@ -264,6 +457,14 @@ async function clearUserSettings() {
           </div>
         </div>
       </div>
+      
+      <!-- 水平分隔条 -->
+      <div class="horizontal-resizer" id="h-resizer" @mousedown="startHResize"></div>
+      
+      <!-- 下方提交历史 -->
+      <div class="log-list-panel" v-if="gitStore.isGitRepo">
+        <LogList ref="logListRef" />
+      </div>
 
       <!-- 创建分支对话框 -->
       <el-dialog
@@ -302,7 +503,7 @@ async function clearUserSettings() {
       </el-dialog>
       
     </div>
-  </div>
+  </main>
 
   <footer class="main-footer">
     <div class="branch-info" v-if="gitStore.currentBranch">
@@ -388,11 +589,65 @@ body {
   margin: 0;
   padding: 0;
   background-color: #f5f5f5;
+  overflow: hidden; /* 防止出现滚动条 */
+  height: 100vh;
+}
+
+.main-container {
+  position: fixed;
+  top: 60px; /* 顶部导航栏高度 */
+  bottom: 60px; /* 底部footer高度 */
+  left: 0;
+  right: 0;
+  padding: 10px;
+  overflow: hidden; /* 防止整体滚动 */
+}
+
+.grid-layout {
+  display: grid;
+  grid-template-columns: 1fr 8px 3fr; /* 左右区域比例为1:3 */
+  grid-template-rows: 1fr 8px 1fr;
+  grid-template-areas: 
+    "git-status v-resizer commit-form"
+    "h-resizer h-resizer h-resizer"
+    "log-list log-list log-list";
+  gap: 10px;
+  height: 100%;
 }
-.container {
-  margin: 0 auto;
-  padding: 20px 30px;
+
+.git-status-panel {
+  grid-area: git-status;
+  overflow: hidden;
+  max-height: 100%;
+  padding: 0;
+}
+
+.commit-form-panel {
+  grid-area: commit-form;
+  overflow: hidden;
+  max-height: 100%;
+  padding: 0;
+}
+
+.log-list-panel {
+  grid-area: log-list;
+  overflow: hidden;
+  max-height: 100%;
+  padding: 0;
+}
+
+/* 确保每个卡片内部可以滚动 */
+.card {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.03);
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
+
 .main-header {
   background-color: #24292e;
   color: white;
@@ -400,53 +655,64 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  height: 60px;
+  box-sizing: border-box;
 }
+
 .header-left {
   display: flex;
   align-items: center;
   gap: 10px;
 }
+
 .logo {
   height: 32px;
   width: auto;
 }
+
 h1 {
   margin: 0;
   font-size: 24px;
 }
+
 .header-info {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 5px;
 }
+
 #branch-info, #user-info {
   background-color: rgba(255, 255, 255, 0.1);
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 14px;
 }
+
 .branch-label, .user-label {
   font-weight: bold;
   margin-right: 5px;
 }
+
 .user-name {
   font-weight: bold;
   margin-right: 5px;
 }
+
 .user-email {
   color: #e0e0e0;
 }
+
 .branch-name {
   font-family: monospace;
 }
-.card {
-  background-color: white;
-  border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  margin-bottom: 20px;
-  padding: 20px;
-}
+
 .status-box {
   background-color: #f6f8fa;
   border: 1px solid #e1e4e8;
@@ -454,100 +720,9 @@ h1 {
   padding: 15px;
   white-space: pre-wrap;
   font-family: monospace;
-  max-height: 300px;
   overflow-y: auto;
 }
 
-/* 新增布局样式 */
-.layout-container {
-  display: flex;
-  gap: 20px;
-}
-
-.left-panel {
-  flex: 0 0 30%;
-  max-width: 30%;
-}
-
-.right-panel {
-  flex: 0 0 70%;
-  max-width: 70%;
-}
-
-/* 响应式布局 */
-@media (max-width: 768px) {
-  .layout-container {
-    flex-direction: column;
-  }
-  
-  .left-panel, .right-panel {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  
-  .header-left {
-    gap: 8px;
-  }
-  
-  .logo {
-    height: 24px;
-  }
-  
-  h1 {
-    font-size: 20px;
-  }
-}
-.commit-form {
-  display: flex;
-  margin-bottom: 15px;
-}
-
-.log-item {
-  padding: 10px 0;
-  border-bottom: 1px solid #eee;
-}
-.log-item:last-child {
-  border-bottom: none;
-}
-.log-hash {
-  color: #6f42c1;
-  font-family: monospace;
-}
-.log-author {
-  color: #6a737d;
-}
-.log-date {
-  color: #6a737d;
-}
-.log-message {
-  font-weight: bold;
-}
-.log-branch {
-  display: inline-block;
-  background-color: #0366d6;
-  color: white;
-  border-radius: 3px;
-  padding: 2px 6px;
-  margin-left: 8px;
-  font-size: 12px;
-}
-/* 添加分支选择框样式 */
-/* .branch-select {
-  width: 150px;
-  margin-left: 5px;
-} */
-
-/* 调整下拉选择框在深色背景下的样式 */
-.branch-select :deep(.el-input__inner) {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: white;
-  border: none;
-}
-
-.branch-select :deep(.el-input__suffix) {
-  color: white;
-}
-
 .tips {
   margin-top: 20px;
   padding: 15px;
@@ -571,12 +746,12 @@ h1 {
   margin-bottom: 10px;
 }
 
-/* 添加加载中样式 */
+/* 加载中样式 */
 .loading-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 400px;
+  height: 100%;
 }
 
 .loading-card {
@@ -604,16 +779,7 @@ h1 {
   color: #E6A23C;
   font-weight: bold;
 }
-</style>
 
-<style scoped>
-.logo {
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
 .main-footer {
   background-color: #24292e;
   color: white;
@@ -627,6 +793,62 @@ h1 {
   right: 0;
   z-index: 100;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  height: 60px;
+  box-sizing: border-box;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .grid-layout {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto auto auto;
+    grid-template-areas: 
+      "git-status"
+      "v-resizer"
+      "commit-form"
+      "h-resizer"
+      "log-list";
+    gap: 10px;
+  }
+  
+  .vertical-resizer {
+    height: 10px;
+    cursor: row-resize;
+  }
+
+  .vertical-resizer::after {
+    width: 30px;
+    height: 4px;
+  }
+  
+  .git-status-panel,
+  .commit-form-panel,
+  .log-list-panel {
+    padding: 0;
+    max-height: none;
+  }
+
+  .git-status-panel {
+    max-height: 30vh;
+  }
+  
+  .commit-form-panel {
+    max-height: 30vh;
+  }
+  
+  .log-list-panel {
+    max-height: 40vh;
+  }
+}
+</style>
+
+<style scoped>
+.logo {
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
 }
 
 .branch-info {
@@ -685,4 +907,76 @@ h1 {
   border-radius: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
+
+/* 垂直分隔条样式 */
+.vertical-resizer {
+  grid-area: v-resizer;
+  background-color: #e8e8e8;
+  cursor: col-resize;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  position: relative;
+  z-index: 10;
+  border-radius: 8px; /* 增加圆角 */
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+}
+
+.vertical-resizer::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 50px;
+  background-color: #a0a0a0;
+  border-radius: 4px; /* 增加圆角 */
+  transition: background-color 0.2s, width 0.2s, box-shadow 0.2s;
+}
+
+.vertical-resizer:hover, .vertical-resizer.active {
+  background-color: #d0d0d0;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.vertical-resizer:hover::after, .vertical-resizer.active::after {
+  background-color: #409EFF;
+  width: 6px;
+  box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
+}
+
+/* 水平分隔条样式 */
+.horizontal-resizer {
+  grid-area: h-resizer;
+  background-color: #e8e8e8;
+  cursor: row-resize;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  position: relative;
+  z-index: 10;
+  border-radius: 8px; /* 增加圆角 */
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+}
+
+.horizontal-resizer::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50px;
+  height: 4px;
+  background-color: #a0a0a0;
+  border-radius: 4px; /* 增加圆角 */
+  transition: background-color 0.2s, height 0.2s, box-shadow 0.2s;
+}
+
+.horizontal-resizer:hover, .horizontal-resizer.active {
+  background-color: #d0d0d0;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.horizontal-resizer:hover::after, .horizontal-resizer.active::after {
+  background-color: #409EFF;
+  height: 6px;
+  box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
+}
 </style>