diff --git a/index.css b/index.css deleted file mode 100644 index 2642eec..0000000 --- a/index.css +++ /dev/null @@ -1,10 +0,0 @@ -* { - margin: 0; - padding: 0; - list-style: none; -} - -#app{ - width: 100vw; - height: 100vh; -} \ No newline at end of file diff --git a/index.html b/index.html index 1e9d245..00f5173 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ AppSketch - +
diff --git a/index.scss b/index.scss new file mode 100644 index 0000000..e8f2bc6 --- /dev/null +++ b/index.scss @@ -0,0 +1,17 @@ +* { + margin: 0; + padding: 0; + list-style: none; + box-sizing: border-box; +} + + +body{ + color: var(--text); +} + +#app{ + width: 100vw; + height: 100vh; + background-color: var(--background); +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d07f225..a5008e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "app-sketch", "version": "0.0.0", "dependencies": { + "@element-plus/icons-vue": "^2.3.1", "@vueuse/core": "^10.11.0", "axios": "^1.7.2", "codemirror": "^5.65.16", diff --git a/package.json b/package.json index 198e71a..2ee2536 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@element-plus/icons-vue": "^2.3.1", "@vueuse/core": "^10.11.0", "axios": "^1.7.2", "codemirror": "^5.65.16", diff --git a/src/components/layout/avatar.js b/src/components/layout/avatar.js new file mode 100644 index 0000000..490950c --- /dev/null +++ b/src/components/layout/avatar.js @@ -0,0 +1,3 @@ +const avatarUrl = "data:image/png;base64,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" + +export default avatarUrl \ No newline at end of file diff --git a/src/components/layout/index.vue b/src/components/layout/index.vue new file mode 100644 index 0000000..62858ac --- /dev/null +++ b/src/components/layout/index.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/components/layout/layoutHeader.vue b/src/components/layout/layoutHeader.vue new file mode 100644 index 0000000..b2bf673 --- /dev/null +++ b/src/components/layout/layoutHeader.vue @@ -0,0 +1,333 @@ + + + + + + diff --git a/src/components/layout/leftMenu.vue b/src/components/layout/leftMenu.vue new file mode 100644 index 0000000..8360919 --- /dev/null +++ b/src/components/layout/leftMenu.vue @@ -0,0 +1,160 @@ + + + + + diff --git a/src/i18n/en.js b/src/i18n/en.js index 06c255f..722233a 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -6,5 +6,6 @@ export default { edit: 'Edit', save: 'Save', cancel: 'Cancel', - } -} \ No newline at end of file + notFound: 'Not found', + }, +}; diff --git a/src/i18n/zh.js b/src/i18n/zh.js index 55dfe20..c7245fb 100644 --- a/src/i18n/zh.js +++ b/src/i18n/zh.js @@ -6,5 +6,6 @@ export default { edit: '编辑', save: '保存', cancel: '取消', + notFound: '找不到', } } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 4b58229..3d2305b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,17 +1,21 @@ import { createApp } from 'vue' import App from './App.vue' -import './styles/index.scss' import './styles/element/index.scss' +import './styles/index.scss' import router from "./router" import { createPinia } from 'pinia' import ElementPlus from 'element-plus' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' import i18n from '@/i18n/index' const app = createApp(App) app.use(router) app.use(createPinia()) app.use(ElementPlus) +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} app.use(i18n) app.mount('#app') diff --git a/src/router/index.js b/src/router/index.js index 74ec6b4..2e20b71 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,11 +7,48 @@ const router = createRouter({ routes: [ { path: '/', - redirect: '/home', + component: () => import('@/components/layout/index.vue'), + redirect: '/workbooks', + children: [ + { + path: '/workbooks', + component: () => import('@/views/workbooks.vue'), + }, + { + path: '/applications', + component: () => import('@/views/applications.vue'), + }, + { + path: '/signatures', + component: () => import('@/views/signatures.vue'), + }, + { + path: '/pcaps', + component: () => import('@/views/pcaps.vue'), + }, + { + path: '/packages', + component: () => import('@/views/packages.vue'), + }, + { + path: '/jobs', + component: () => import('@/views/jobs.vue'), + }, + { + path: '/playbooks', + component: () => import('@/views/playbooks.vue'), + }, + { + path: '/runners', + component: () => import('@/views/runners.vue'), + }, + ], }, + //404页面捕获 { - path: '/home', - component: () => import('../views/home.vue'), + path: '/:pathMatch(.*)*', + name: 'NotFound', + component: () => import('@/views/404.vue') }, ], }); diff --git a/src/styles/common.scss b/src/styles/common.scss new file mode 100644 index 0000000..a52ecb0 --- /dev/null +++ b/src/styles/common.scss @@ -0,0 +1,4 @@ + +.primary-color{ + color: var(--primary) !important; +} \ No newline at end of file diff --git a/src/styles/components/jsonDiff.scss b/src/styles/components/jsonDiff.scss index 53e460c..ef7cbfb 100644 --- a/src/styles/components/jsonDiff.scss +++ b/src/styles/components/jsonDiff.scss @@ -5,4 +5,7 @@ padding-bottom: 1px; } } + .diff-commandbar{ + display: none; + } } \ No newline at end of file diff --git a/src/styles/element/dark.scss b/src/styles/element/dark.scss index ee1c780..22d5815 100644 --- a/src/styles/element/dark.scss +++ b/src/styles/element/dark.scss @@ -1,7 +1,7 @@ @forward 'element-plus/theme-chalk/src/dark/var.scss' with ( $colors: ( 'primary': ( - 'base': #00ccff, + 'base': #185bdc, ), ), ); diff --git a/src/styles/element/light.scss b/src/styles/element/light.scss index f5861ce..f40968d 100644 --- a/src/styles/element/light.scss +++ b/src/styles/element/light.scss @@ -1,7 +1,7 @@ @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary': ( - 'base': pink, + 'base': #185bdc, ), ), ); diff --git a/src/styles/index.scss b/src/styles/index.scss index 1435a2d..69fd07a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,4 @@ /* 加载主题变量 */ @import './theme/index.scss'; -@import './components/index.scss'; \ No newline at end of file +@import './components/index.scss'; +@import './common.scss'; diff --git a/src/styles/theme/dark.scss b/src/styles/theme/dark.scss index a0b7a25..e7a5885 100644 --- a/src/styles/theme/dark.scss +++ b/src/styles/theme/dark.scss @@ -1,9 +1,48 @@ html.dark{ - /* 1.字色 */ - // 标题字色 - --color-text-primary: #D8D8D8; - // 普通字色 - --color-text-regular: #BEBEBE; - // 次要字色 - --color-text-secondary: #999999; + --primary: #467be1; + --primary_inactive: #283164; + --primary_inactive_hover: #535fa3; + --success: #52db57; + --success_secondary: #cff9d3; + --error: #db5264; + --background: #262836; + --background_secondary: #1e1e29; + --text: #f5f5f5; + --text_secondary: #bcbcbc; + --border: #f7f7f7; + --pcap_input_background: #1e1e29; + --table_border: #505050; + --table_header: #292933; + --folder_background_active: #19294b; + --filter_background: #283164; + --filter_hover: #364289; + --table_row_hover: #283164; + --chart_box_background: #1e1e29; + --table_small_header: #1e1e2d; + --table_small_row: #12121d; + --table_small_border: #272727; + --drag_chart_hover: #30303b; + --timebar_background: #1d223f; + --menu_background: #20212a; + --log_tabs: #505050; + --local_chip: #434343; + --info_background: #535fa3; + --error_background: #db5264; + --error_icon: #ffecec; + --error_secondary: #fae3e3; } + +// 覆盖elmentui主题色 +:root{ + --el-text-color-primary : var(--text); + --el-text-color-regular : var(--text); + --el-text-color-secondary : var(--text); + + .el-input { + --el-input-icon-color: var(--text); + } + + .el-dropdown__popper{ + --el-dropdown-menuItem-hover-fill: var(--primary_inactive); + } +} \ No newline at end of file diff --git a/src/styles/theme/light.scss b/src/styles/theme/light.scss index 7ea0c2e..9d3cfdf 100644 --- a/src/styles/theme/light.scss +++ b/src/styles/theme/light.scss @@ -1,9 +1,48 @@ -:root{ - /* 1.字色 */ - // 标题字色 - --color-text-primary: #333333; - // 普通字色 - --color-text-regular: #666666; - // 标题字色 - --color-text-secondary: #999999; -} \ No newline at end of file +:root { + --primary: #185bdc; + --primary_inactive: #e0eaff; + --primary_inactive_hover: #cddbf8; + --success: #2ca538; + --success_secondary: #cff9d3; + --error: #980f0f; + --background: #f8fbff; + --background_secondary: #fff; + --text: #0e1236; + --text_secondary: #98a0bc; + --border: #ceced2; + --pcap_input_background: #e0eaff; + --table_border: #f7f7f7; + --table_header: #fafafa; + --folder_background_active: #e0eaff; + --filter_background: #e0eaff; + --filter_hover: #cadcff; + --table_row_hover: #f6f9ff; + --chart_box_background: #f2f7ff; + --table_small_header: #e5eeff; + --table_small_row: #f5f9ff; + --table_small_border: #ececec; + --drag_chart_hover: #f1f6ff; + --timebar_background: #f9faff; + --menu_background: #fff; + --log_tabs: #ebeaea; + --local_chip: #ededed; + --info_background: #ecf0ff; + --error_background: #ffecec; + --error_icon: #980f0f; + --error_secondary: #fae3e3; +} + +// 覆盖elmentui主题色 +:root { + --el-text-color-primary: var(--text); + --el-text-color-regular: var(--text); + --el-text-color-secondary: var(--text); + + .el-input { + --el-input-icon-color: var(--text); + } + + .el-dropdown__popper { + --el-dropdown-menuItem-hover-fill: var(--primary_inactive); + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index a1544f0..e69de29 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1 +0,0 @@ -$aaa:green diff --git a/src/views/404.vue b/src/views/404.vue new file mode 100644 index 0000000..69196fb --- /dev/null +++ b/src/views/404.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/views/applications.vue b/src/views/applications.vue new file mode 100644 index 0000000..d5cdb45 --- /dev/null +++ b/src/views/applications.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/home.vue b/src/views/home.vue deleted file mode 100644 index 58a8a8a..0000000 --- a/src/views/home.vue +++ /dev/null @@ -1,104 +0,0 @@ - - - - - diff --git a/src/views/jobs.vue b/src/views/jobs.vue new file mode 100644 index 0000000..8947fe6 --- /dev/null +++ b/src/views/jobs.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/packages.vue b/src/views/packages.vue new file mode 100644 index 0000000..2431ac8 --- /dev/null +++ b/src/views/packages.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/pcaps.vue b/src/views/pcaps.vue new file mode 100644 index 0000000..5f1b9c2 --- /dev/null +++ b/src/views/pcaps.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/playbooks.vue b/src/views/playbooks.vue new file mode 100644 index 0000000..631da08 --- /dev/null +++ b/src/views/playbooks.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/runners.vue b/src/views/runners.vue new file mode 100644 index 0000000..e7dd5cb --- /dev/null +++ b/src/views/runners.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/signatures.vue b/src/views/signatures.vue new file mode 100644 index 0000000..509383f --- /dev/null +++ b/src/views/signatures.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/workbooks.vue b/src/views/workbooks.vue new file mode 100644 index 0000000..07fbdea --- /dev/null +++ b/src/views/workbooks.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/vite.config.js b/vite.config.js index acd27ca..a305dc3 100644 --- a/vite.config.js +++ b/vite.config.js @@ -9,6 +9,7 @@ export default defineConfig({ alias: { //别名配置 "@": path.resolve(__dirname, "./src"), + '~/': `${path.resolve(__dirname, 'src')}/`, }, }, //本地运行配置，以及反向代理配置