zen-gitsync 2.0.4 → 2.0.6

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

@@ -4,7 +4,7 @@ import GitStatus from './components/GitStatus.vue'
 import CommitForm from './components/CommitForm.vue'
 import LogList from './components/LogList.vue'
 import { ElMessage } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Setting } from '@element-plus/icons-vue'
 import logo from './assets/logo.svg'
 import { useGitStore } from './stores/gitStore'
 
@@ -68,7 +68,6 @@ onMounted(async () => {
       ])
       
       // 日志信息通过LogList组件直接加载即可，避免重复调用
-      // 移除 gitLogStore.fetchLog() 调用
     } else {
       ElMessage.warning('当前目录不是Git仓库，部分功能将不可用')
     }
@@ -78,43 +77,15 @@ onMounted(async () => {
     // 标记初始化完成
     initCompleted.value = true
     console.log('---------- 页面初始化完成 ----------')
+    
+    // 无论是否是Git仓库，都应该加载布局比例
+    // 使用短延时确保DOM已完全渲染
+    setTimeout(() => {
+      loadLayoutRatios();
+    }, 100);
   }
 })
 
-// 处理提交成功事件
-function handleCommitSuccess() {
-  // 不再调用gitLogStore.fetchLog()，改用更新LogList组件
-  
-  // 刷新Git状态
-  if (gitStatusRef.value) {
-    gitStatusRef.value.refreshStatus()
-  }
-  
-  // 直接刷新提交历史
-  if (logListRef.value) {
-    logListRef.value.refreshLog()
-  }
-}
-
-// 处理推送成功事件
-function handlePushSuccess() {
-  // 不再调用gitLogStore.fetchLog()，改用更新LogList组件
-  gitStore.getCurrentBranch()
-  
-  // 直接刷新提交历史
-  if (logListRef.value) {
-    logListRef.value.refreshLog()
-  }
-}
-
-// 处理状态更新事件
-function handleStatusUpdate() {
-  // 刷新Git状态
-  if (gitStatusRef.value) {
-    gitStatusRef.value.refreshStatus()
-  }
-}
-
 const createBranchDialogVisible = ref(false)
 const newBranchName = ref('')
 const selectedBaseBranch = ref('')
@@ -164,6 +135,227 @@ async function handleBranchChange(branch: string) {
     }
   }
 }
+
+// 添加用户设置相关状态
+const userSettingsDialogVisible = ref(false)
+const tempUserName = ref('')
+const tempUserEmail = ref('')
+
+// 打开用户设置对话框
+function openUserSettingsDialog() {
+  tempUserName.value = gitStore.userName
+  tempUserEmail.value = gitStore.userEmail
+  userSettingsDialogVisible.value = true
+}
+
+// 保存用户设置
+async function saveUserSettings() {
+  if (!tempUserName.value || !tempUserEmail.value) {
+    ElMessage.warning('用户名和邮箱不能为空')
+    return
+  }
+
+  const success = await gitStore.restoreUserConfig(tempUserName.value, tempUserEmail.value)
+  if (success) {
+    userSettingsDialogVisible.value = false
+  }
+}
+
+// 清除用户配置
+async function clearUserSettings() {
+  const success = await gitStore.clearUserConfig()
+  if (success) {
+    tempUserName.value = ''
+    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>
@@ -177,12 +369,33 @@ async function handleBranchChange(branch: string) {
         <span class="user-label">用户:</span>
         <span class="user-name">{{ gitStore.userName }}</span>
         <span class="user-email">&lt;{{ gitStore.userEmail }}&gt;</span>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="openUserSettingsDialog"
+          class="user-settings-btn"
+          circle
+        >
+          <el-icon><Setting /></el-icon>
+        </el-button>
+      </div>
+      <div id="user-info" v-else>
+        <span class="user-label">用户: </span>
+        <span class="user-warning">未配置</span>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="openUserSettingsDialog"
+          class="user-settings-btn"
+          circle
+        >
+          <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">
@@ -192,25 +405,48 @@ async function handleBranchChange(branch: string) {
       </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">
-        <CommitForm 
-          @commit-success="handleCommitSuccess" 
-          @push-success="handlePushSuccess"
-          @status-update="handleStatusUpdate"
-        />
-        <LogList ref="logListRef" />
+      <!-- 垂直分隔条 -->
+      <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>
+          <p>请先配置Git用户信息才能进行提交操作。</p>
+          <div class="tips">
+            <h3>您可以通过以下方式配置：</h3>
+            <ol>
+              <li>点击右上角的设置按钮，配置用户名和邮箱</li>
+              <li>或者使用命令行配置：</li>
+              <div class="code-block">
+                git config --global user.name "您的用户名"<br>
+                git config --global user.email "您的邮箱"
+              </div>
+            </ol>
+            <el-button 
+              type="primary" 
+              @click="openUserSettingsDialog"
+            >
+              立即配置
+            </el-button>
+          </div>
+        </div>
+        <!-- 用户已配置显示提交表单 -->
+        <template v-else>
+          <CommitForm />
+        </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>
@@ -221,6 +457,14 @@ async function handleBranchChange(branch: string) {
           </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
@@ -259,38 +503,84 @@ async function handleBranchChange(branch: string) {
       </el-dialog>
       
     </div>
-  </div>
+  </main>
 
   <footer class="main-footer">
     <div class="branch-info" v-if="gitStore.currentBranch">
-      <span class="branch-label">当前分支:</span>
-      <el-select 
-        v-model="gitStore.currentBranch" 
-        size="small" 
-        @change="handleBranchChange"
-        :loading="gitStore.isChangingBranch"
-        class="branch-select"
-      >
-        <el-option 
-          v-for="branch in gitStore.allBranches" 
-          :key="branch" 
-          :label="branch" 
-          :value="branch"
-        />
-      </el-select>
-      <el-button 
-        type="primary" 
-        size="small" 
-        @click="openCreateBranchDialog"
-        style="margin-left: 5px;"
-      >
-        <el-icon><Plus /></el-icon>
-      </el-button>
+      <div class="branch-wrapper">
+        <span class="branch-label">当前分支:</span>
+        <el-select 
+          v-model="gitStore.currentBranch" 
+          size="small" 
+          @change="handleBranchChange"
+          :loading="gitStore.isChangingBranch"
+          class="branch-select"
+        >
+          <el-option 
+            v-for="branch in gitStore.allBranches" 
+            :key="branch" 
+            :label="branch" 
+            :value="branch"
+          />
+        </el-select>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="openCreateBranchDialog"
+          class="create-branch-btn"
+        >
+          <el-icon><Plus /></el-icon>
+          新建分支
+        </el-button>
+      </div>
     </div>
     <div class="footer-right">
       <!-- <span>Zen GitSync © 2024</span> -->
     </div>
   </footer>
+
+  <!-- 用户设置对话框 -->
+  <el-dialog
+    v-model="userSettingsDialogVisible"
+    title="Git用户设置"
+    width="30%"
+    destroy-on-close
+  >
+    <el-form>
+      <el-form-item label="用户名">
+        <el-input v-model="tempUserName" placeholder="请输入Git用户名" />
+      </el-form-item>
+      <el-form-item label="邮箱">
+        <el-input v-model="tempUserEmail" placeholder="请输入Git邮箱" />
+      </el-form-item>
+      <el-form-item>
+        <el-alert
+          type="info"
+          :closable="false"
+          show-icon
+        >
+          这些设置将影响全局Git配置，对所有Git仓库生效。
+        </el-alert>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button 
+          type="danger" 
+          @click="clearUserSettings"
+        >
+          清除配置
+        </el-button>
+        <el-button @click="userSettingsDialogVisible = false">取消</el-button>
+        <el-button 
+          type="primary" 
+          @click="saveUserSettings"
+        >
+          保存
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <style>
@@ -299,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%;
+}
+
+.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;
 }
-.container {
-  margin: 0 auto;
-  padding: 20px 30px;
+
+.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;
@@ -311,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;
@@ -365,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;
@@ -482,12 +746,12 @@ h1 {
   margin-bottom: 10px;
 }
 
-/* 添加加载中样式 */
+/* 加载中样式 */
 .loading-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 400px;
+  height: 100%;
 }
 
 .loading-card {
@@ -506,16 +770,16 @@ h1 {
   font-size: 18px;
   color: #606266;
 }
-</style>
 
-<style scoped>
-.logo {
-  will-change: filter;
-  transition: filter 300ms;
+.user-settings-btn {
+  margin-left: 10px;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+
+.user-warning {
+  color: #E6A23C;
+  font-weight: bold;
 }
+
 .main-footer {
   background-color: #24292e;
   color: white;
@@ -528,15 +792,191 @@ h1 {
   left: 0;
   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 {
   display: flex;
   align-items: center;
+  gap: 10px;
+}
+
+.branch-wrapper {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  padding: 8px 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s;
+}
+
+.branch-wrapper:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.branch-label {
+  font-weight: bold;
+  margin-right: 10px;
+  color: #ffffff;
+}
+
+.branch-select {
+  width: 200px;
+  margin-right: 10px;
+}
+
+.create-branch-btn {
+  background-color: #2ea44f;
+  border-color: #2ea44f;
+  transition: all 0.3s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.create-branch-btn:hover {
+  background-color: #3bbc63;
+  border-color: #3bbc63;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .footer-right {
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 8px 12px;
+  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>