feat(git): 增强Git面板功能并支持远程仓库操作

- 添加远程仓库URL获取与外部链接打开功能
- 改进git状态显示为可视化文件列表,支持状态分类着色
- 修改git status命令以正确处理特殊字符路径
- 默认提交消息设置为"md helper"
- 在Git面板添加打开远程仓库的快捷按钮
This commit is contained in:
cfq 2026-01-28 19:16:35 +08:00
parent f846aecee5
commit 44a2c54da3
3 changed files with 141 additions and 9 deletions

View File

@ -105,6 +105,11 @@ window.services = {
window.utools.shellShowItemInFolder(itemPath);
},
// 打开外部链接
openExternal(url) {
window.utools.shellOpenExternal(url);
},
// --- Image Service ---
// 保存图片
@ -168,7 +173,7 @@ window.services = {
},
async gitStatus(dirPath) {
return this.execGit("status --short", dirPath);
return this.execGit("-c core.quotePath=false status --short", dirPath);
},
async gitAdd(dirPath, files = ".") {
@ -189,6 +194,48 @@ window.services = {
return this.execGit("pull", dirPath);
},
async gitRemoteUrl(dirPath) {
try {
const configPath = path.join(dirPath, '.git', 'config');
if (!fs.existsSync(configPath)) {
return { success: false, error: 'Config file not found' };
}
const content = await fs.promises.readFile(configPath, 'utf-8');
// 简单解析 ini
// 寻找 [remote "origin"] 及其下的 url
const lines = content.split('\n');
let inRemoteOrigin = false;
let url = null;
for (const line of lines) {
const trimmed = line.trim();
if (trimmed === '[remote "origin"]') {
inRemoteOrigin = true;
continue;
}
if (inRemoteOrigin) {
if (trimmed.startsWith('[')) {
// 进入下一个 section结束查找
break;
}
if (trimmed.startsWith('url =')) {
url = trimmed.substring(5).trim();
break;
}
}
}
if (url) {
return { success: true, stdout: url };
}
return { success: false, error: 'Remote origin url not found' };
} catch (e) {
return { success: false, error: e.message };
}
},
// --- Search Service ---
// 搜索文件 (文件名)

View File

@ -15,6 +15,9 @@
<template #icon><ArrowUpOutlined /></template>
推送
</a-button>
<a-button @click="openRemoteUrl" :disabled="!state.remoteUrl" title="打开 Git 仓库">
<template #icon><GithubOutlined /></template>
</a-button>
</a-button-group>
<a-button @click="handleRefresh" :loading="state.loading">
@ -24,7 +27,13 @@
<div class="git-status">
<h3>状态</h3>
<pre class="status-output">{{ state.statusOutput || '无变更' }}</pre>
<div class="status-list" v-if="state.statusFiles.length > 0">
<div v-for="(file, index) in state.statusFiles" :key="index" class="status-item">
<span class="status-badge" :class="getStatusClass(file.status)">{{ file.status }}</span>
<span class="file-path" :title="file.path">{{ file.path }}</span>
</div>
</div>
<div v-else class="empty-status">无变更</div>
</div>
<div class="git-commit">
@ -51,15 +60,15 @@
<script setup>
import { ref, onMounted, watch } from 'vue';
import { ArrowDownOutlined, ArrowUpOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { ArrowDownOutlined, ArrowUpOutlined, ReloadOutlined, GithubOutlined } from '@ant-design/icons-vue';
import { useGit } from '../composables/useGit';
import { useFileTree } from '../composables/useFileTree';
import { message } from 'ant-design-vue';
const { state, checkGitRepo, getStatus, commit, push, pull } = useGit();
const { state, checkGitRepo, getStatus, commit, push, pull, openRemoteUrl } = useGit();
const { state: fileTreeState } = useFileTree();
const commitMessage = ref('');
const commitMessage = ref(`md helper`);
// Git
watch(() => fileTreeState.rootPath, async (newPath) => {
@ -114,6 +123,13 @@ const handlePull = async () => {
message.error('拉取异常: ' + e.message);
}
};
const getStatusClass = (status) => {
if (status.includes('M')) return 'status-modified';
if (status.includes('A') || status.includes('?')) return 'status-added';
if (status.includes('D')) return 'status-deleted';
return '';
};
</script>
<style scoped>
@ -137,15 +153,51 @@ const handlePull = async () => {
margin-bottom: 20px;
}
.status-output {
background-color: var(--app-background);
color: var(--text-color);
.status-list {
border: 1px solid var(--border-color);
padding: 8px;
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
background-color: var(--app-background);
}
.status-item {
display: flex;
align-items: center;
padding: 4px 8px;
font-size: 12px;
border-bottom: 1px solid var(--border-color);
}
.status-item:last-child {
border-bottom: none;
}
.status-badge {
display: inline-block;
width: 24px;
margin-right: 8px;
font-family: monospace;
font-weight: bold;
}
.status-modified { color: #1890ff; }
.status-added { color: #52c41a; }
.status-deleted { color: #f5222d; }
.file-path {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.empty-status {
text-align: center;
color: #999;
padding: 16px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 12px;
}

View File

@ -3,6 +3,8 @@ import { reactive } from 'vue';
const state = reactive({
isGitRepo: false,
statusOutput: '',
statusFiles: [],
remoteUrl: '',
loading: false
});
@ -14,6 +16,24 @@ export function useGit() {
if (state.isGitRepo) {
// 自动获取一次状态
await getStatus(rootDir);
await getRemoteUrl(rootDir);
}
};
const getRemoteUrl = async (rootDir) => {
try {
const res = await window.services.gitRemoteUrl(rootDir);
if (res.success) {
state.remoteUrl = res.stdout.trim();
}
} catch (e) {
console.error("Failed to get remote url", e);
}
};
const openRemoteUrl = () => {
if (state.remoteUrl) {
window.services.openExternal(state.remoteUrl);
}
};
@ -23,6 +43,17 @@ export function useGit() {
const res = await window.services.gitStatus(rootDir);
if (res.success) {
state.statusOutput = res.stdout;
// 解析状态文件列表
state.statusFiles = res.stdout
.split('\n')
.filter(line => line.trim())
.map(line => {
// git status --short 格式: XY PATH
// 前两个字符是状态,后面是路径
const status = line.substring(0, 2);
const path = line.substring(3);
return { status, path };
});
}
} finally {
state.loading = false;
@ -65,6 +96,8 @@ export function useGit() {
state,
checkGitRepo,
getStatus,
getRemoteUrl,
openRemoteUrl,
commit,
push,
pull