Skip to content

Commit 2ee6779

Browse files
lanshuizhiyuelanshuizhiyue
committed
refactor: split AddTask page into modular components
1 parent 9f5882c commit 2ee6779

8 files changed

Lines changed: 1787 additions & 1442 deletions

File tree

‎src/frontEnd/src/views/AddTask/components/ConfigTriggerBar.vue‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<template>
2+
<div class="config-trigger-section">
3+
<div class="config-summary">
4+
<div class="config-summary-left">
5+
<i class="pi pi-sliders-h"></i>
6+
<span class="config-status-label">当前配置:</span>
7+
<span class="config-status-text">{{ configStatusText }}</span>
8+
</div>
9+
<div class="cmdline-preview-inline" v-if="cmdlineArgs.length > 0">
10+
<span class="cmdline-prefix-inline">sqlmap</span>
11+
<span
12+
v-for="(arg, index) in inlinePreviewArgs"
13+
:key="index"
14+
class="cmdline-arg-inline"
15+
:class="getArgClass(arg)"
16+
>{{ arg }}</span>
17+
<span v-if="cmdlineArgs.length > 6" class="cmdline-more">... (+{{ cmdlineArgs.length - 6 }})</span>
18+
</div>
19+
<div class="cmdline-preview-inline cmdline-default-inline" v-else>
20+
<span class="cmdline-prefix-inline">sqlmap</span>
21+
<span class="cmdline-hint">(默认参数)</span>
22+
</div>
23+
</div>
24+
<div class="config-trigger-actions">
25+
<Button
26+
label="配置扫描参数"
27+
icon="pi pi-cog"
28+
severity="secondary"
29+
outlined
30+
@click="$emit('openConfig')"
31+
/>
32+
<Button
33+
label="提交扫描任务"
34+
icon="pi pi-send"
35+
:loading="submitting"
36+
:disabled="!canSubmit"
37+
@click="$emit('submit')"
38+
v-tooltip.top="!canSubmit ? submitDisabledReason : ''"
39+
/>
40+
</div>
41+
</div>
42+
</template>
43+
44+
<script setup lang="ts">
45+
import { computed } from 'vue'
46+
import Button from 'primevue/button'
47+
48+
interface Props {
49+
configStatusText: string
50+
cmdlineArgs: string[]
51+
canSubmit: boolean
52+
submitDisabledReason?: string
53+
submitting: boolean
54+
}
55+
56+
const props = defineProps<Props>()
57+
58+
defineEmits<{
59+
openConfig: []
60+
submit: []
61+
}>()
62+
63+
// 计算属性
64+
const inlinePreviewArgs = computed(() => props.cmdlineArgs.slice(0, 6))
65+
66+
// 方法
67+
function getArgClass(arg: string): string {
68+
if (/^-[a-zA-Z]=?/.test(arg)) return 'arg-short'
69+
if (/^--(level|risk|technique|dbms|os|prefix|suffix|tamper)/.test(arg)) return 'arg-detection'
70+
if (/^--(threads|timeout|retries|delay|time-sec)/.test(arg)) return 'arg-performance'
71+
if (/^--(banner|current-user|current-db|is-dba|dbs|tables|columns|dump)/.test(arg)) return 'arg-enumerate'
72+
if (/^--(proxy|tor|cookie|user-agent|random-agent)/.test(arg)) return 'arg-network'
73+
if (/^--(batch|smart|text-only|forms|flush-session|fresh-queries)/.test(arg)) return 'arg-switch'
74+
return 'arg-long'
75+
}
76+
</script>
77+
78+
<style scoped>
79+
.config-trigger-section {
80+
display: flex;
81+
align-items: center;
82+
justify-content: space-between;
83+
gap: 1.5rem;
84+
padding: 1rem 1.25rem;
85+
background: var(--p-surface-50);
86+
border: 1px solid var(--surface-border);
87+
border-radius: 10px;
88+
margin-top: 0.5rem;
89+
}
90+
91+
.config-summary {
92+
flex: 1;
93+
min-width: 0;
94+
display: flex;
95+
flex-direction: column;
96+
gap: 0.5rem;
97+
}
98+
99+
.config-summary-left {
100+
display: flex;
101+
align-items: center;
102+
gap: 0.5rem;
103+
}
104+
105+
.config-summary-left i {
106+
color: var(--p-primary-color);
107+
font-size: 1.1rem;
108+
}
109+
110+
.config-status-label {
111+
font-weight: 500;
112+
color: var(--text-color-secondary);
113+
font-size: 0.85rem;
114+
}
115+
116+
.config-status-text {
117+
font-weight: 600;
118+
color: var(--text-color);
119+
font-size: 0.85rem;
120+
}
121+
122+
.cmdline-preview-inline {
123+
display: flex;
124+
flex-wrap: wrap;
125+
gap: 0.35rem;
126+
align-items: baseline;
127+
padding: 0.4rem 0.65rem;
128+
background: #1e1e2e;
129+
border-radius: 6px;
130+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
131+
font-size: 0.75rem;
132+
line-height: 1.5;
133+
overflow: hidden;
134+
}
135+
136+
.cmdline-prefix-inline {
137+
color: #89b4fa;
138+
font-weight: 600;
139+
}
140+
141+
.cmdline-arg-inline {
142+
padding: 1px 4px;
143+
border-radius: 3px;
144+
color: #cba6f7;
145+
}
146+
147+
.cmdline-arg-inline.arg-detection { background: rgba(249, 115, 22, 0.15); }
148+
.cmdline-arg-inline.arg-performance { background: rgba(34, 197, 94, 0.15); }
149+
.cmdline-arg-inline.arg-enumerate { background: rgba(168, 85, 247, 0.15); }
150+
.cmdline-arg-inline.arg-network { background: rgba(59, 130, 246, 0.15); }
151+
.cmdline-arg-inline.arg-switch { background: rgba(236, 72, 153, 0.15); }
152+
.cmdline-arg-inline.arg-short { background: rgba(251, 191, 36, 0.15); }
153+
154+
.cmdline-more {
155+
color: #6c7086;
156+
font-style: italic;
157+
}
158+
159+
.cmdline-default-inline {
160+
opacity: 0.7;
161+
}
162+
163+
.cmdline-hint {
164+
color: #6c7086;
165+
font-style: italic;
166+
}
167+
168+
.config-trigger-actions {
169+
display: flex;
170+
gap: 0.75rem;
171+
flex-shrink: 0;
172+
}
173+
174+
@media (max-width: 900px) {
175+
.config-trigger-section {
176+
flex-direction: column;
177+
align-items: stretch;
178+
}
179+
180+
.config-trigger-actions {
181+
justify-content: center;
182+
}
183+
}
184+
</style>

0 commit comments

Comments
 (0)