Skip to content

Commit 78ae2e5

Browse files
ssst0n3ssst0n3
committed
feat(index): restructure index components and optimize menu logic
- Move Index.vue into index/ directory and add Desc.vue - Add @ant-design/icons-vue dependency - Centralize menu definitions in src/data/menu.ts - Update Menu.vue to render dynamic icons and descriptions - Adjust footer and layout text display - Correct theme switch logic for color toggle - Change primary color in blue.css Signed-off-by: Lei Wang <ssst0n3@gmail.com>
1 parent 2a46bec commit 78ae2e5

11 files changed

Lines changed: 154 additions & 57 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"ant-design-vue": "^4.2.6",
14+
"@ant-design/icons-vue": "^7.0.0",
1415
"vue": "^3.5.22",
1516
"vue-router": "^4.6.3"
1617
},

‎public/assets/style/blue.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
:root {
2-
--colorPrimary: #5de164;
2+
--colorPrimary: #80ffec;
33
--colorBgBody: #25242f;
44
}

‎src/components/Index.vue‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/components/index/Desc.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
import {ItemType} from "ant-design-vue";
3+
4+
const props = defineProps<{
5+
menu: ItemType,
6+
}>();
7+
</script>
8+
9+
<template>
10+
<a-row>
11+
<router-link :to="'/' + props.menu.key">
12+
<component :is="props.menu.icon" :style="{color: 'hotpink'}"/>
13+
<span class="graph-title">{{ menu.label }}</span>
14+
</router-link>
15+
</a-row>
16+
<span style="word-wrap: break-word;"> {{ menu.description }}</span>
17+
</template>
18+
19+
<style scoped>
20+
.graph-title {
21+
margin-left: 10px;
22+
}
23+
24+
a {
25+
color: #e1e1e1;
26+
text-decoration: underline;
27+
text-decoration-color: dimgray;
28+
text-underline-offset: 0.4em;
29+
margin-bottom: 10px;
30+
}
31+
32+
a:hover {
33+
color: var(--colorPrimary);
34+
}
35+
</style>

‎src/components/index/Index.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script setup lang="ts">
2+
3+
import ImageWall from "../ImageWall.vue";
4+
import {menu} from "@/data/menu";
5+
import Desc from "@/components/index/Desc.vue";
6+
</script>
7+
8+
<template>
9+
<div class="container">
10+
<ImageWall image="/assets/ctrsploit-cyber.png" height="400px" background-color="#211e32"/>
11+
<div class="content">
12+
<a-row>
13+
<span class="title">
14+
<span>Ctrsploit Landscape</span>
15+
&emsp;
16+
<a target="_blank" href="https://github.com/ctrsploit/ctrsploit/releases">releases</a>
17+
</span>
18+
</a-row>
19+
<a-row>
20+
<a-col v-for="item in menu" :key="'1' + item.key" :span="12" class="graph">
21+
<Desc :menu="item"/>
22+
</a-col>
23+
</a-row>
24+
</div>
25+
</div>
26+
</template>
27+
28+
<style scoped>
29+
.container {
30+
margin: auto;
31+
max-width: 1200px;
32+
padding-left: 100px;
33+
padding-right: 100px;
34+
text-align: left;
35+
word-wrap: break-word;
36+
}
37+
38+
.content {
39+
margin-top: 30px;
40+
}
41+
42+
.title {
43+
font-size: 32px;
44+
font-weight: bold;
45+
}
46+
47+
.graph {
48+
padding-right: 20px;
49+
margin-top: 30px;
50+
}
51+
52+
a {
53+
color: #e1e1e1;
54+
text-decoration: underline;
55+
text-decoration-color: dimgray;
56+
text-underline-offset: 0.2em;
57+
margin-bottom: 10px;
58+
}
59+
60+
a:hover {
61+
color: var(--colorPrimary);
62+
}
63+
</style>

‎src/components/layout/Footer.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@ import {version} from "@/components/version.ts";
1313
>
1414
<a-layout-footer class="footer">
1515
<span style="font-weight: bold; font-size: large">ctrsploit</span>
16-
<br><br>
17-
<p>
18-
{{ version.time }}
19-
</p>
16+
<br>
2017
{{ version.version }}
18+
<br>
19+
<span>compiled at: {{ version.time }}</span>
2120
</a-layout-footer>
2221
</a-config-provider>
2322
</div>

‎src/components/layout/Layout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const theme = inject<Theme>('theme', themes.blue);
2323
>
2424
<a-layout id="layout">
2525
<a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
26-
<router-link to="/" class="logo">CTRSploit Landscape</router-link>
26+
<router-link to="/" class="logo">Ctrsploit Landscape</router-link>
2727
<div class="header-right">
2828
<Menu/>
2929
<ThemeSwitch/>

‎src/components/layout/Menu.vue‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
11
<script setup lang="ts">
22
import {inject} from "vue";
3-
import { themes } from "@/theme";
4-
import type { Theme } from "@/theme";
3+
import {themes} from "@/theme";
4+
import type {Theme} from "@/theme";
55
import {useRouter} from "vue-router";
6+
import {menu} from "@/data/menu"
7+
import {ItemType} from "ant-design-vue";
68
79
const theme = inject<Theme>('theme', themes.blue);
810
const router = useRouter()
9-
const go = (item: any) => {
11+
const go = (item: ItemType) => {
1012
router.push('/' + String(item?.key));
1113
}
12-
const menu = [
13-
{
14-
label: 'Vulnerability',
15-
key: 'vul',
16-
},
17-
{
18-
label: 'CheckSec',
19-
key: 'checksec',
20-
},
21-
{
22-
label: 'Env',
23-
key: 'env',
24-
},
25-
{
26-
label: 'Roadmap',
27-
key: 'roadmap',
28-
}
29-
];
14+
3015
</script>
3116

3217
<template>
@@ -44,12 +29,16 @@ const menu = [
4429
},
4530
}"
4631
>
47-
<a-menu
48-
class="menu"
49-
@click="go"
50-
mode="horizontal"
51-
:items="menu"
52-
/>
32+
<a-menu class="menu" mode="horizontal">
33+
<a-menu-item
34+
v-for="item in menu"
35+
:key="item.key"
36+
@click="() => go(item)"
37+
>
38+
<component :is="item.icon" style="margin-right:8px;"/>
39+
{{ item.label }}
40+
</a-menu-item>
41+
</a-menu>
5342
</a-config-provider>
5443
</template>
5544

‎src/components/layout/ThemeSwitch.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const toggleTheme = function () {
1515
themeLink.rel = 'stylesheet';
1616
document.head.appendChild(themeLink);
1717
}
18-
themeLink.href = mode.value ? `/assets/style/blue.css` : `/assets/style/pink.css`;
19-
theme.value = mode.value ? themes.blue : themes.pink;
18+
themeLink.href = mode.value ? `/assets/style/pink.css` : `/assets/style/blue.css`;
19+
theme.value = mode.value ? themes.pink : themes.blue;
2020
}
2121
2222
onMounted(() => {

‎src/data/menu.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {BugOutlined, FlagOutlined, InfoCircleOutlined, SecurityScanOutlined} from "@ant-design/icons-vue";
2+
import {ItemType} from "ant-design-vue";
3+
4+
const menu: ItemType = [
5+
{
6+
label: 'Vulnerability',
7+
key: 'vul',
8+
icon: BugOutlined,
9+
description: 'vulnerabilities list supported by ctrsploit',
10+
},
11+
{
12+
label: 'CheckSec',
13+
key: 'checksec',
14+
icon: SecurityScanOutlined,
15+
description: 'check whether vulnerability exists',
16+
},
17+
{
18+
label: 'Env',
19+
key: 'env',
20+
icon: InfoCircleOutlined,
21+
description: 'collect environment information'
22+
},
23+
{
24+
label: 'Roadmap',
25+
key: 'roadmap',
26+
icon: FlagOutlined,
27+
description: 'development progress'
28+
}
29+
];
30+
31+
export {menu};

0 commit comments

Comments
 (0)