WuYanBo
/
CodeReview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): 采用中心化常量动态渲染仓库平台选项

This commit is contained in:
vinland100 2025-12-25 14:11:30 +08:00
parent 2f28e7e6eb
commit 84fa2b5266
5 changed files with 40 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/pages/ProjectDetail.tsx
View File

@ -40,7 +40,7 @@ import CreateTaskDialog from "@/components/audit/CreateTaskDialog";
import FileSelectionDialog from "@/components/audit/FileSelectionDialog"; import FileSelectionDialog from "@/components/audit/FileSelectionDialog";
import TerminalProgressDialog from "@/components/audit/TerminalProgressDialog"; import TerminalProgressDialog from "@/components/audit/TerminalProgressDialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { SUPPORTED_LANGUAGES } from "@/shared/constants"; import { SUPPORTED_LANGUAGES, REPOSITORY_PLATFORMS } from "@/shared/constants";
export default function ProjectDetail() { export default function ProjectDetail() {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
@ -529,9 +529,9 @@ export default function ProjectDetail() {
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${task.status === 'completed' ? 'bg-emerald-500/20' : <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${task.status === 'completed' ? 'bg-emerald-500/20' :
task.status === 'running' ? 'bg-sky-500/20' : task.status === 'running' ? 'bg-sky-500/20' :
task.status === 'failed' ? 'bg-rose-500/20' : task.status === 'failed' ? 'bg-rose-500/20' :
'bg-muted' 'bg-muted'
}`}> }`}>
{getStatusIcon(task.status)} {getStatusIcon(task.status)}
</div> </div>
@ -578,9 +578,9 @@ export default function ProjectDetail() {
<div className="flex items-center justify-between mb-4 pb-4 border-b border-border"> <div className="flex items-center justify-between mb-4 pb-4 border-b border-border">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${task.status === 'completed' ? 'bg-emerald-500/20' : <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${task.status === 'completed' ? 'bg-emerald-500/20' :
task.status === 'running' ? 'bg-sky-500/20' : task.status === 'running' ? 'bg-sky-500/20' :
task.status === 'failed' ? 'bg-rose-500/20' : task.status === 'failed' ? 'bg-rose-500/20' :
'bg-muted' 'bg-muted'
}`}> }`}>
{getStatusIcon(task.status)} {getStatusIcon(task.status)}
</div> </div>
@ -674,9 +674,9 @@ export default function ProjectDetail() {
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${issue.severity === 'critical' ? 'bg-rose-500/20 text-rose-600 dark:text-rose-400' : <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${issue.severity === 'critical' ? 'bg-rose-500/20 text-rose-600 dark:text-rose-400' :
issue.severity === 'high' ? 'bg-orange-500/20 text-orange-600 dark:text-orange-400' : issue.severity === 'high' ? 'bg-orange-500/20 text-orange-600 dark:text-orange-400' :
issue.severity === 'medium' ? 'bg-amber-500/20 text-amber-600 dark:text-amber-400' : issue.severity === 'medium' ? 'bg-amber-500/20 text-amber-600 dark:text-amber-400' :
'bg-sky-500/20 text-sky-600 dark:text-sky-400' 'bg-sky-500/20 text-sky-600 dark:text-sky-400'
}`}> }`}>
<AlertTriangle className="w-4 h-4" /> <AlertTriangle className="w-4 h-4" />
</div> </div>
@ -779,10 +779,11 @@ export default function ProjectDetail() {
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent className="cyber-dialog border-border"> <SelectContent className="cyber-dialog border-border">
<SelectItem value="github">GitHub</SelectItem> {REPOSITORY_PLATFORMS.map((platform) => (
<SelectItem value="gitlab">GitLab</SelectItem> <SelectItem key={platform.value} value={platform.value}>
<SelectItem value="gitea">Gitea</SelectItem> {platform.label}
<SelectItem value="other">其他</SelectItem> </SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>

20
frontend/src/pages/Projects.tsx
View File

@ -44,7 +44,7 @@ import { Link } from "react-router-dom";
import { toast } from "sonner"; import { toast } from "sonner";
import CreateTaskDialog from "@/components/audit/CreateTaskDialog"; import CreateTaskDialog from "@/components/audit/CreateTaskDialog";
import TerminalProgressDialog from "@/components/audit/TerminalProgressDialog"; import TerminalProgressDialog from "@/components/audit/TerminalProgressDialog";
import { SUPPORTED_LANGUAGES } from "@/shared/constants"; import { SUPPORTED_LANGUAGES, REPOSITORY_PLATFORMS } from "@/shared/constants";
export default function Projects() { export default function Projects() {
const [projects, setProjects] = useState<Project[]>([]); const [projects, setProjects] = useState<Project[]>([]);
@ -485,10 +485,11 @@ export default function Projects() {
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent className="cyber-dialog border-border"> <SelectContent className="cyber-dialog border-border">
<SelectItem value="github">GitHub</SelectItem> {REPOSITORY_PLATFORMS.map((platform) => (
<SelectItem value="gitlab">GitLab</SelectItem> <SelectItem key={platform.value} value={platform.value}>
<SelectItem value="gitea">Gitea</SelectItem> {platform.label}
<SelectItem value="other">其他</SelectItem> </SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@ -1016,10 +1017,11 @@ export default function Projects() {
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent className="cyber-dialog border-border"> <SelectContent className="cyber-dialog border-border">
<SelectItem value="github">GitHub</SelectItem> {REPOSITORY_PLATFORMS.map((platform) => (
<SelectItem value="gitlab">GitLab</SelectItem> <SelectItem key={platform.value} value={platform.value}>
<SelectItem value="gitea">Gitea</SelectItem> {platform.label}
<SelectItem value="other">其他</SelectItem> </SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>

7
frontend/src/shared/constants/index.ts
View File

@ -62,13 +62,6 @@ export const PROJECT_SOURCE_TYPES = {
ZIP: 'zip', ZIP: 'zip',
} as const; } as const;
// 仓库平台类型
export const REPOSITORY_TYPES = {
GITHUB: 'github',
GITLAB: 'gitlab',
OTHER: 'other',
} as const;
// 分析深度 // 分析深度
export const ANALYSIS_DEPTH = { export const ANALYSIS_DEPTH = {
BASIC: 'basic', BASIC: 'basic',

18
frontend/src/shared/constants/projectTypes.ts
View File

@ -22,17 +22,23 @@ export const PROJECT_SOURCE_TYPES: Array<{
} }
]; ];
// 仓库平台显示名称
export const REPOSITORY_PLATFORM_LABELS: Record<RepositoryPlatform, string> = {
github: 'GitHub',
gitlab: 'GitLab',
gitea: 'Gitea',
other: '其他',
};
// 仓库平台选项 // 仓库平台选项
export const REPOSITORY_PLATFORMS: Array<{ export const REPOSITORY_PLATFORMS: Array<{
value: RepositoryPlatform; value: RepositoryPlatform;
label: string; label: string;
icon?: string; icon?: string;
}> = [ }> = Object.entries(REPOSITORY_PLATFORM_LABELS).map(([value, label]) => ({
{ value: 'github', label: 'GitHub' }, value: value as RepositoryPlatform,
{ value: 'gitlab', label: 'GitLab' }, label
{ value: 'gitea', label: 'Gitea' }, }));
{ value: 'other', label: '其他' }
];
// 项目来源类型的颜色配置 // 项目来源类型的颜色配置
export const SOURCE_TYPE_COLORS: Record<ProjectSourceType, { export const SOURCE_TYPE_COLORS: Record<ProjectSourceType, {

9
frontend/src/shared/utils/projectUtils.ts
View File

@ -4,6 +4,7 @@
*/ */
import type { Project, ProjectSourceType } from '@/shared/types'; import type { Project, ProjectSourceType } from '@/shared/types';
import { REPOSITORY_PLATFORM_LABELS } from '@/shared/constants/projectTypes';
/** /**
* 判断项目是否为仓库类型 * 判断项目是否为仓库类型
@ -45,13 +46,7 @@ export function getSourceTypeBadge(sourceType: ProjectSourceType): string {
* 获取仓库平台的显示名称 * 获取仓库平台的显示名称
*/ */
export function getRepositoryPlatformLabel(platform?: string): string { export function getRepositoryPlatformLabel(platform?: string): string {
const labels: Record<string, string> = { return REPOSITORY_PLATFORM_LABELS[platform as keyof typeof REPOSITORY_PLATFORM_LABELS] || REPOSITORY_PLATFORM_LABELS.other;
github: 'GitHub',
gitlab: 'GitLab',
gitea: 'Gitea',
other: '其他'
};
return labels[platform || 'other'] || '其他';
} }
/** /**