初始化
This commit is contained in:
李琦
210
frontend/src/views/ProjectDetail.vue
Normal file
210
frontend/src/views/ProjectDetail.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ArrowLeft, Code2, GitCommitHorizontal, FolderTree, RefreshCw, Files, MessageSquareText, Rows3, Users, Plus, Minus, HardDrive, Folder, FileWarning, GitBranch, ExternalLink, TriangleAlert, ClipboardCheck } from 'lucide-vue-next'
|
||||
import StatCard from '../components/StatCard.vue'
|
||||
import ChartView from '../components/ChartView.vue'
|
||||
import GitHeatmap from '../components/GitHeatmap.vue'
|
||||
import GitTrend from '../components/GitTrend.vue'
|
||||
import CommitDrawer from '../components/CommitDrawer.vue'
|
||||
import { call } from '../api'
|
||||
import { useAppStore } from '../store'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useAppStore()
|
||||
const { t } = useI18n()
|
||||
const tab = ref('code')
|
||||
const p = ref({ stats: {}, languages: [] })
|
||||
const git = ref({ commits: [], refs: [], contributors: [], heatmap: [] })
|
||||
const diag = ref(null)
|
||||
const structure = ref({ files: [], folders: [], largeFiles: [], extensions: [] })
|
||||
const insights = ref({ healthScore: 0, summary: {}, issues: [] })
|
||||
const loading = ref(true)
|
||||
const gitLoading = ref(false)
|
||||
const insightLoading = ref(false)
|
||||
const selectedDate = ref('')
|
||||
const issueSeverity = ref('all')
|
||||
const issueType = ref('all')
|
||||
const detail = ref(null)
|
||||
const detailLoading = ref(false)
|
||||
const colors = ['#7b73ff', '#4fd1a1', '#4da5ff', '#f4c84a', '#ef6683', '#23b5d3']
|
||||
|
||||
const fmt = n => {
|
||||
n = +n || 0
|
||||
return n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? (n / 1e3).toFixed(1) + 'K' : n.toString()
|
||||
}
|
||||
const bytes = n => n >= 1048576 ? (n / 1048576).toFixed(1) + ' MB' : n >= 1024 ? (n / 1024).toFixed(1) + ' KB' : (n || 0) + ' B'
|
||||
const pie = computed(() => ({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { trigger: 'item' },
|
||||
series: [{ type: 'pie', radius: ['52%', '76%'], label: { show: false }, data: p.value.languages.map((x, i) => ({ name: x.name, value: x.code, itemStyle: { color: colors[i % colors.length] } })) }]
|
||||
}))
|
||||
const visibleCommits = computed(() => selectedDate.value ? git.value.commits.filter(c => c.date?.slice(0, 10) === selectedDate.value) : git.value.commits)
|
||||
const gitErrorCode = computed(() => git.value.error || diag.value?.errorCode || '')
|
||||
const gitErrorText = computed(() => gitErrorCode.value ? t(`errors.${gitErrorCode.value}`) : '')
|
||||
const issueTypes = computed(() => [...new Set((insights.value.issues || []).map(x => x.type))])
|
||||
const filteredIssues = computed(() => (insights.value.issues || []).filter(x => (issueSeverity.value === 'all' || x.severity === issueSeverity.value) && (issueType.value === 'all' || x.type === issueType.value)))
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
;[p.value, git.value, structure.value, insights.value] = await Promise.all([call('GetProject', +route.params.id), call('GetGitStats', +route.params.id), call('GetStructure', +route.params.id), call('GetProjectInsights', +route.params.id)])
|
||||
try { diag.value = await call('GetGitDiagnostics', +route.params.id) } catch { diag.value = null }
|
||||
loading.value = false
|
||||
}
|
||||
async function refreshInsights() {
|
||||
insightLoading.value = true
|
||||
try {
|
||||
insights.value = await call('RefreshProjectInsights', +route.params.id)
|
||||
store.showToast({ type: 'success', key: 'insightDone' })
|
||||
} catch (e) {
|
||||
store.showToast({ type: 'error', text: String(e) })
|
||||
} finally {
|
||||
insightLoading.value = false
|
||||
}
|
||||
}
|
||||
async function analyze(kind = tab.value === 'git' ? 'git' : 'code') {
|
||||
await store.analyze(+route.params.id, kind)
|
||||
}
|
||||
async function selectRef(r) {
|
||||
gitLoading.value = true
|
||||
try {
|
||||
git.value = await call('GetGitStatsForRef', +route.params.id, r.name)
|
||||
diag.value = await call('GetGitDiagnostics', +route.params.id)
|
||||
selectedDate.value = ''
|
||||
} catch (e) {
|
||||
const code = String(e)
|
||||
store.showToast({ type: 'error', key: code ? `errors.${code}` : null, text: code })
|
||||
git.value = { ...git.value, available: false, error: code }
|
||||
} finally {
|
||||
gitLoading.value = false
|
||||
}
|
||||
}
|
||||
async function checkout(r) {
|
||||
if (!confirm(t('checkoutConfirm', { ref: r.name }))) return
|
||||
gitLoading.value = true
|
||||
try {
|
||||
await call('CheckoutBranch', +route.params.id, r.name)
|
||||
store.showToast({ type: 'success', key: 'branchChanged' })
|
||||
git.value = await call('GetGitStatsForRef', +route.params.id, '')
|
||||
await store.analyze(+route.params.id, 'git')
|
||||
} catch (e) {
|
||||
const raw = String(e)
|
||||
store.showToast({ type: 'error', key: raw.includes('GIT_WORKTREE_DIRTY') ? 'dirty' : `errors.${raw}`, text: raw })
|
||||
} finally {
|
||||
gitLoading.value = false
|
||||
}
|
||||
}
|
||||
async function showCommit(c) {
|
||||
detailLoading.value = true
|
||||
detail.value = { ...c, files: [] }
|
||||
try { detail.value = await call('GetCommitDetails', +route.params.id, c.hash) } finally { detailLoading.value = false }
|
||||
}
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page detail-page">
|
||||
<header class="project-head sticky-head detail-sticky-head">
|
||||
<div class="detail-head-row">
|
||||
<button class="back" @click="router.push('/')"><ArrowLeft />{{ t('back') }}</button>
|
||||
<div><h1>{{ p.name }}</h1><p>{{ p.path }}</p></div>
|
||||
</div>
|
||||
<div class="tabs detail-tabs">
|
||||
<button :class="{ active: tab === 'code' }" @click="tab = 'code'"><Code2 />{{ t('code') }}</button>
|
||||
<button :class="{ active: tab === 'git' }" @click="tab = 'git'"><GitCommitHorizontal />{{ t('git') }}</button>
|
||||
<button :class="{ active: tab === 'structure' }" @click="tab = 'structure'"><FolderTree />{{ t('structure') }}</button>
|
||||
<button :class="{ active: tab === 'insights' }" @click="tab = 'insights'"><ClipboardCheck />{{ t('insights') }}</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<template v-if="tab === 'code'">
|
||||
<div class="stats-grid five">
|
||||
<StatCard :icon="Rows3" :value="fmt(p.stats.totalLines)" :label="t('totalLineCount')" />
|
||||
<StatCard :icon="Code2" :value="fmt(p.stats.codeLines)" :label="t('codeLines')" />
|
||||
<StatCard :icon="MessageSquareText" :value="fmt(p.stats.commentLines)" :label="t('commentLines')" />
|
||||
<StatCard :icon="Rows3" :value="fmt(p.stats.blankLines)" :label="t('blankLines')" />
|
||||
<StatCard :icon="Files" :value="fmt(p.stats.fileCount)" :label="t('fileCount')" />
|
||||
</div>
|
||||
<div class="split">
|
||||
<section class="panel shine-card"><h2>{{ t('languageDistribution') }}</h2><ChartView v-if="p.languages.length" :option="pie" /><div v-else class="empty">{{ t('empty') }}</div></section>
|
||||
<section class="panel shine-card"><h2>{{ t('languageDetails') }}</h2><div class="language-list"><div v-for="(x, i) in p.languages" :key="x.name"><b><i :style="{ background: colors[i % colors.length] }" />{{ x.name }}</b><span>{{ x.files }} {{ t('files') }}</span><strong>{{ fmt(x.code) }} {{ t('lines') }}</strong></div></div></section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab === 'git'">
|
||||
<div class="git-context">
|
||||
<span><GitBranch />{{ t('workspaceBranch') }}: <b>{{ git.workspaceBranch || git.currentBranch || diag?.workspaceBranch || '-' }}</b></span>
|
||||
<span>{{ t('viewRef') }}: <b>{{ git.viewRef || git.currentBranch || diag?.viewRef || '-' }}</b></span>
|
||||
<RefreshCw v-if="gitLoading" class="spin" />
|
||||
</div>
|
||||
<section v-if="gitErrorCode" class="panel git-error-panel">
|
||||
<TriangleAlert />
|
||||
<div><h2>{{ t('gitUnavailable') }}</h2><p>{{ gitErrorText || t('gitUnavailableHint') }}</p><code v-if="diag?.detail">{{ t('gitDetail') }}: {{ diag.detail }}</code></div>
|
||||
<button class="btn secondary" @click="analyze('git')"><RefreshCw />{{ t('analyzeGit') }}</button>
|
||||
</section>
|
||||
<div class="stats-grid four">
|
||||
<StatCard :icon="GitCommitHorizontal" :value="git.commitCount" :label="t('commitCount')" />
|
||||
<StatCard :icon="Plus" tone="green" :value="'+' + fmt(git.added)" :label="t('addedLines')" />
|
||||
<StatCard :icon="Minus" tone="red" :value="'-' + fmt(git.deleted)" :label="t('deletedLines')" />
|
||||
<StatCard :icon="Users" tone="blue" :value="git.contributorCount" :label="t('contributors')" />
|
||||
</div>
|
||||
<section class="panel heat-panel shine-card"><div class="section-head"><h2>{{ t('activityHeatmap') }}</h2><button v-if="selectedDate" class="btn secondary" @click="selectedDate = ''">{{ t('selectedDate', { date: selectedDate }) }} · {{ t('clearFilter') }}</button></div><GitHeatmap :days="git.heatmap" :selected="selectedDate" @select="selectedDate = $event" /></section>
|
||||
<div class="split git-split">
|
||||
<section class="panel structure-scroll-panel"><h2>{{ t('branches') }}</h2><div class="branch interactive" v-for="r in git.refs" :key="r.name" :class="{ selected: r.name === git.viewRef }" @click="selectRef(r)"><span :class="{ current: r.current }"><GitCommitHorizontal />{{ r.name }}</span><code>{{ r.hash }}</code><small>{{ r.kind }}</small><button class="checkout-btn" :title="t('checkout')" @click.stop="checkout(r)"><ExternalLink /></button></div><div v-if="!git.refs?.length" class="empty">{{ t('empty') }}</div></section>
|
||||
<section class="panel structure-scroll-panel"><h2>{{ t('recentCommits') }}</h2><button class="commit" v-for="c in visibleCommits.slice(0, 30)" :key="c.hash" @click="showCommit(c)"><span class="avatar">{{ c.author?.[0] }}</span><div><b>{{ c.message }}</b><small>{{ c.author }} · {{ c.hash.slice(0, 7) }} · {{ c.date?.slice(0, 10) }}</small></div><span class="positive">+{{ c.added }}</span><span class="negative">-{{ c.deleted }}</span></button><div v-if="!visibleCommits.length" class="empty">{{ t('empty') }}</div></section>
|
||||
</div>
|
||||
<section class="panel trend shine-card"><h2>{{ t('commitTrend') }}</h2><GitTrend :commits="git.commits" @select="selectedDate = $event" /></section>
|
||||
<section class="panel shine-card"><h2>{{ t('contributorRanking') }}</h2><div class="contributor" v-for="(c, i) in git.contributors" :key="c.email"><b>#{{ i + 1 }}</b><span class="avatar">{{ c.name?.[0] }}</span><div><strong>{{ c.name }}</strong><small>{{ c.email }}</small></div><span>{{ c.commits }} {{ t('commitsUnit') }}</span><span class="positive">+{{ fmt(c.added) }}</span><span class="negative">-{{ fmt(c.deleted) }}</span></div><div v-if="!git.contributors?.length" class="empty">{{ t('empty') }}</div></section>
|
||||
<CommitDrawer v-if="detail" :detail="detail" :loading="detailLoading" @close="detail = null" />
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab === 'structure'">
|
||||
<div class="stats-grid four">
|
||||
<StatCard :icon="Files" :value="structure.totalFiles" :label="t('totalFiles')" />
|
||||
<StatCard :icon="Folder" :value="structure.totalDirs" :label="t('folderCount')" />
|
||||
<StatCard :icon="HardDrive" :value="bytes(structure.totalSize || 0)" :label="t('totalSize')" />
|
||||
<StatCard :icon="FileWarning" tone="red" :value="structure.largeFiles?.length || 0" :label="t('largeFiles')" />
|
||||
</div>
|
||||
<div class="split structure-split">
|
||||
<section class="panel structure-panel"><h2>{{ t('directoryStructure') }}</h2><div class="file-tree"><div v-for="f in structure.files?.slice(0, 300)" :key="f.path" :style="{ paddingLeft: Math.min((f.path.split('/').length - 1) * 16, 160) + 'px' }"><Folder v-if="f.isDir" /><Files v-else /><span :title="f.path">{{ f.name }}</span><small>{{ f.isDir ? '' : bytes(f.size) }}</small></div></div></section>
|
||||
<section class="panel structure-panel"><h2>{{ t('folderSize') }}</h2><div class="folder-size" v-for="f in structure.folders" :key="f.name"><b :title="f.name">{{ f.name }}</b><span>{{ f.files }} {{ t('files') }}</span><i><em :style="{ width: (f.size / Math.max(1, structure.folders[0]?.size) * 100) + '%' }" /></i><strong>{{ bytes(f.size) }}</strong></div></section>
|
||||
</div>
|
||||
<section class="panel large-file-panel"><h2>{{ t('largeFileDetection') }}</h2><div class="large-file" v-for="f in structure.largeFiles" :key="f.path"><div><b>{{ f.name }}</b><small>{{ f.path }}</small></div><strong>{{ bytes(f.size) }}</strong></div><div v-if="!structure.largeFiles?.length" class="empty">{{ t('noLargeFiles') }}</div></section>
|
||||
</template>
|
||||
<template v-else>
|
||||
<section class="panel insights-hero shine-card">
|
||||
<div class="score-ring" :style="{ '--score': insights.healthScore || 0 }"><strong>{{ insights.healthScore || 0 }}</strong><span>{{ t('healthScore') }}</span></div>
|
||||
<div class="insight-summary">
|
||||
<h2>{{ t('deepInsights') }}</h2>
|
||||
<p>{{ t('deepInsightsHint') }}</p>
|
||||
<div class="insight-counts">
|
||||
<span class="high">{{ insights.summary?.high || 0 }} {{ t('highRisk') }}</span>
|
||||
<span class="medium">{{ insights.summary?.medium || 0 }} {{ t('mediumRisk') }}</span>
|
||||
<span class="low">{{ insights.summary?.low || 0 }} {{ t('lowRisk') }}</span>
|
||||
<span>{{ insights.summary?.todoCount || 0 }} TODO</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn secondary" :disabled="insightLoading" @click="refreshInsights"><RefreshCw :class="{ spin: insightLoading }" />{{ t('refresh') }}</button>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<div class="section-head insight-filter">
|
||||
<h2>{{ t('issueList') }}</h2>
|
||||
<div class="actions">
|
||||
<select v-model="issueSeverity"><option value="all">{{ t('allSeverity') }}</option><option value="high">{{ t('highRisk') }}</option><option value="medium">{{ t('mediumRisk') }}</option><option value="low">{{ t('lowRisk') }}</option></select>
|
||||
<select v-model="issueType"><option value="all">{{ t('allTypes') }}</option><option v-for="type in issueTypes" :key="type" :value="type">{{ type }}</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="issue-list">
|
||||
<article v-for="issue in filteredIssues" :key="issue.type + issue.path + issue.line + issue.title" class="issue-card" :class="issue.severity">
|
||||
<span class="issue-severity">{{ t('severity.' + issue.severity) }}</span>
|
||||
<div><h3>{{ issue.title }}</h3><p>{{ issue.detail }}</p><small v-if="issue.path">{{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template></small><code v-if="issue.evidence">{{ issue.evidence }}</code><b>{{ issue.suggestion }}</b></div>
|
||||
</article>
|
||||
<div v-if="!filteredIssues.length" class="empty"><ClipboardCheck />{{ t('noIssues') }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<div class="center-action"><button class="btn secondary" @click="analyze()"><RefreshCw />{{ t('analyze') }}</button></div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user