feat: 新首页

yaklang · Jul 5, 2024 · 5259e51 · 5259e51
1 parent 91dafb4
commit 5259e51
Show file tree

Hide file tree

Showing 27 changed files with 3,871 additions and 1,372 deletions.
diff --git a/app/renderer/src/main/src/assets/icon/outline.tsx b/app/renderer/src/main/src/assets/icon/outline.tsx
@@ -5332,3 +5332,42 @@ const OutlineTrashSecond = () => (
 export const OutlineTrashSecondIcon = (props: Partial<IconProps>) => {
     return <Icon component={OutlineTrashSecond} {...props} />
 }
+
+/**
+ * @description UI Kit/Icon/Outline/端口资产
+ */
+const OutlineModScanPortData = () => (
+    <svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'>
+        <mask id='mask0_30057_207490' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'>
+            <rect width='18' height='18' fill='#D9D9D9' />
+        </mask>
+        <g mask='url(#mask0_30057_207490)'>
+            <path
+                d='M13.5 6H14.5C15.6046 6 16.5 6.89543 16.5 8V13C16.5 14.1046 15.6046 15 14.5 15H3.5C2.39543 15 1.5 14.1046 1.5 13V8C1.5 6.89543 2.39543 6 3.5 6H4.5'
+                stroke='#85899E'
+                strokeLinecap='round'
+                stroke-linejoin='round'
+            />
+            <path
+                d='M13.5 6V4.75C13.5 4.19772 13.0523 3.75 12.5 3.75H12M4.5 6V4.75C4.5 4.19772 4.94772 3.75 5.5 3.75H6'
+                stroke='#85899E'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M12 3.75V3.25C12 2.69772 11.5523 2.25 11 2.25H7C6.44772 2.25 6 2.69772 6 3.25V3.75'
+                stroke='#85899E'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path d='M4.5 9V12' stroke='#85899E' strokeLinecap='round' strokeLinejoin='round' />
+            <path d='M6.75 9V12' stroke='#85899E' strokeLinecap='round' strokeLinejoin='round' />
+            <path d='M9 9V12' stroke='#85899E' strokeLinecap='round' strokeLinejoin='round' />
+            <path d='M11.25 9V12' stroke='#85899E' strokeLinecap='round' strokeLinejoin='round' />
+            <path d='M13.5 9V12' stroke='#85899E' strokeLinecap='round' strokeLinejoin='round' />
+        </g>
+    </svg>
+)
+export const OutlineModScanPortDataIcon = (props: Partial<CustomIconComponentProps>) => {
+    return <Icon component={OutlineModScanPortData} {...props} />
+}
diff --git a/app/renderer/src/main/src/assets/icon/solid.tsx b/app/renderer/src/main/src/assets/icon/solid.tsx
@@ -1715,13 +1715,16 @@ export const SolidDocumentsearchIcon = (props: Partial<IconProps>) => {
 }
 
 const SolidDocumenttext = () => (
-    <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'>
         <path
             fillRule='evenodd'
             clipRule='evenodd'
-            d='M4 4C4 2.89543 4.89543 2 6 2H10.5858C11.1162 2 11.6249 2.21071 12 2.58579L15.4142 6C15.7893 6.37507 16 6.88378 16 7.41421V16C16 17.1046 15.1046 18 14 18H6C4.89543 18 4 17.1046 4 16V4ZM6 10C6 9.44772 6.44772 9 7 9H13C13.5523 9 14 9.44772 14 10C14 10.5523 13.5523 11 13 11H7C6.44772 11 6 10.5523 6 10ZM7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15H13C13.5523 15 14 14.5523 14 14C14 13.4477 13.5523 13 13 13H7Z'
+            d='M4.7998 4.7999C4.7998 3.47442 5.87432 2.3999 7.1998 2.3999H12.7027C13.3393 2.3999 13.9497 2.65276 14.3998 3.10285L18.4969 7.1999C18.9469 7.64999 19.1998 8.26044 19.1998 8.89696V19.1999C19.1998 20.5254 18.1253 21.5999 16.7998 21.5999H7.1998C5.87432 21.5999 4.7998 20.5254 4.7998 19.1999V4.7999Z'
             fill='currentColor'
+            strokeLinejoin='round'
         />
+        <rect x='7.5' y='11.25' width='9' height='1.5' rx='0.75' fill='white' />
+        <rect x='7.5' y='15.75' width='9' height='1.5' rx='0.75' fill='white' />
     </svg>
 )
 /**

diff --git a/app/renderer/src/main/src/assets/mitm-bg.png b/app/renderer/src/main/src/assets/mitm-bg.png
diff --git a/app/renderer/src/main/src/components/HTTPHistory.module.scss b/app/renderer/src/main/src/components/HTTPHistory.module.scss
@@ -24,6 +24,7 @@
 
                 text-orientation: sideways-right;
                 writing-mode: vertical-rl;
+                border-top: 1px solid #fff;
                 svg {
                     width: 16px;
                     height: 16px;

diff --git a/app/renderer/src/main/src/components/layout/FuncDomain.tsx b/app/renderer/src/main/src/components/layout/FuncDomain.tsx
@@ -1165,7 +1165,7 @@ const UIOpUpdateYakit: React.FC<UIOpUpdateProps> = React.memo((props) => {
             <div className={styles["update-header-wrapper"]}>
                 <div className={styles["header-info"]}>
                     <div className={styles["update-icon"]}>
-                        <img src={YakitLogo} width={30} />
+                        <YakitWhiteSvgIcon />
                     </div>
                     {/* 等使用更新内容时，下面"当前版本"-div需要被删除 */}
                     <div>

diff --git a/app/renderer/src/main/src/components/layout/UILayout.tsx b/app/renderer/src/main/src/components/layout/UILayout.tsx
@@ -1233,11 +1233,13 @@ const UILayout: React.FC<UILayoutProp> = (props) => {
                                     >
                                         {performanceSamplingInfo.log.map((item, index) => (
                                             <div className={classNames(styles["sampling-info"])} key={index}>
-                                                <Tooltip title='点击打开所在目录' placement="top" align={{offset: [40, 0]}}>
+                                                <Tooltip
+                                                    title='点击打开所在目录'
+                                                    placement='top'
+                                                    align={{targetOffset: [-10, -15]}}
+                                                >
                                                     <span
-                                                        className={classNames(
-                                                            styles["sampling-info-item"]
-                                                        )}
+                                                        className={classNames(styles["sampling-info-item"])}
                                                         onClick={() => {
                                                             ipcRenderer
                                                                 .invoke("is-file-exists", item.path)
@@ -1251,7 +1253,12 @@ const UILayout: React.FC<UILayoutProp> = (props) => {
                                                                 .catch(() => {})
                                                         }}
                                                     >
-                                                        {item.path.substring(item.path.lastIndexOf("\\") + 1)}
+                                                        {item.path.substring(
+                                                            Math.max(
+                                                                item.path.lastIndexOf("/"),
+                                                                item.path.lastIndexOf("\\")
+                                                            ) + 1
+                                                        )}
                                                     </span>
                                                 </Tooltip>
                                                 <CopyComponents copyText={item.path} />
@@ -1288,18 +1295,20 @@ const UILayout: React.FC<UILayoutProp> = (props) => {
                                     if (!visible) setIsShowSamplingInfo(false)
                                 }}
                             >
-                                <YakitButton
-                                    type='primary'
-                                    colors='success'
-                                    className={styles["stop-screen-recorder"]}
-                                    size='middle'
-                                    onClick={() => setIsShowSamplingInfo(true)}
-                                >
-                                    <div className={styles["stop-icon"]}>
-                                        <SolidCheckCircleIcon />
-                                    </div>
-                                    <span className={styles["stop-text"]}>采样完成</span>
-                                </YakitButton>
+                                <Tooltip title='采样完成' placement='bottom'>
+                                    <YakitButton
+                                        type='primary'
+                                        colors='success'
+                                        className={styles["stop-screen-recorder"]}
+                                        size='middle'
+                                        onClick={() => setIsShowSamplingInfo(true)}
+                                    >
+                                        <div className={styles["stop-icon"]}>
+                                            <SolidCheckCircleIcon />
+                                        </div>
+                                        <span className={styles["stop-text"]}>采样完成</span>
+                                    </YakitButton>
+                                </Tooltip>
                             </YakitPopover>
                         ) : (
                             <></>

diff --git a/app/renderer/src/main/src/components/layout/uiLayout.module.scss b/app/renderer/src/main/src/components/layout/uiLayout.module.scss
@@ -247,7 +247,7 @@
 
 .sampling-popover {
     width: 272px;
-    padding-top: 3px;
+    padding-top: 10px;
     border-radius: 4px;
     overflow: hidden;
     border: 1px solid var(--yakit-border-color);

diff --git a/app/renderer/src/main/src/pages/assetViewer/EnterpriseReportViewer.module.scss b/app/renderer/src/main/src/pages/assetViewer/EnterpriseReportViewer.module.scss
@@ -1,3 +1,3 @@
-.enterprise-report-viewer{
+.enterprise-report-viewer {
     height: 100%;
 }
diff --git a/app/renderer/src/main/src/pages/fuzzer/FuzzerSequence/FuzzerSequence.tsx b/app/renderer/src/main/src/pages/fuzzer/FuzzerSequence/FuzzerSequence.tsx
@@ -2079,7 +2079,7 @@ const SequenceResponse: React.FC<SequenceResponseProps> = React.memo(
 
 // 序列动画演示
 interface SequenceAnimationAemonstrationProps {}
-const SequenceAnimationAemonstration: React.FC<SequenceAnimationAemonstrationProps> = React.memo((props) => {
+export const SequenceAnimationAemonstration: React.FC<SequenceAnimationAemonstrationProps> = React.memo((props) => {
     return (
         <div className={styles["sequence-animation-aemonstration"]}>
             <div className={styles["animation-cont-wrap"]}>

diff --git a/app/renderer/src/main/src/pages/fuzzer/HTTPFuzzerPage.module.scss b/app/renderer/src/main/src/pages/fuzzer/HTTPFuzzerPage.module.scss
@@ -363,10 +363,10 @@
 
 .blasting-animation-aemonstration {
     padding: 16px;
+    padding-top: 0;
     .animation-cont-wrap {
         margin-top: 16px;
         width: 100%;
-        height: 310px;
         border-radius: 10px;
         border: 1px solid var(--yakit-border-color);
         overflow: hidden;

diff --git a/app/renderer/src/main/src/pages/fuzzer/HTTPFuzzerPage.tsx b/app/renderer/src/main/src/pages/fuzzer/HTTPFuzzerPage.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useRef, useState} from "react"
+import React, {CSSProperties, useEffect, useMemo, useRef, useState} from "react"
 import {Form, Modal, Result, Space, Popover, Tooltip, Divider, Descriptions} from "antd"
 import {
     IMonacoEditor,
@@ -3128,9 +3128,12 @@ const ResponseViewerSecondNode: React.FC<ResponseViewerSecondNodeProps> = React.
 })
 
 // 爆破动画演示
-interface BlastingAnimationAemonstrationProps {}
-const BlastingAnimationAemonstration: React.FC<BlastingAnimationAemonstrationProps> = React.memo((props) => {
-    const [animationType, setAnimationType] = useState<string>("id")
+interface BlastingAnimationAemonstrationProps {
+    animationType?: string
+    videoStyle?: CSSProperties
+}
+export const BlastingAnimationAemonstration: React.FC<BlastingAnimationAemonstrationProps> = React.memo((props) => {
+    const [animationType, setAnimationType] = useState<string>(props.animationType || "id")
 
     const [animationResources, setAnimationResources] = useState<string>(blastingIdmp4)
 
@@ -3146,28 +3149,31 @@ const BlastingAnimationAemonstration: React.FC<BlastingAnimationAemonstrationPro
 
     return (
         <div className={styles["blasting-animation-aemonstration"]}>
-            <YakitRadioButtons
-                size='large'
-                buttonStyle='solid'
-                value={animationType}
-                options={[
-                    {
-                        value: "id",
-                        label: "爆破 ID"
-                    },
-                    {
-                        value: "pwd",
-                        label: "爆破密码"
-                    },
-                    {
-                        value: "count",
-                        label: "爆破账号"
-                    }
-                ]}
-                onChange={(e) => setAnimationType(e.target.value)}
-            />
+            {!props.animationType && (
+                <YakitRadioButtons
+                    size='large'
+                    buttonStyle='solid'
+                    value={animationType}
+                    options={[
+                        {
+                            value: "id",
+                            label: "爆破 ID"
+                        },
+                        {
+                            value: "pwd",
+                            label: "爆破密码"
+                        },
+                        {
+                            value: "count",
+                            label: "爆破账号"
+                        }
+                    ]}
+                    onChange={(e) => setAnimationType(e.target.value)}
+                />
+            )}
+
             <div className={styles["animation-cont-wrap"]}>
-                <video src={animationResources} autoPlay loop></video>
+                <video src={animationResources} autoPlay loop style={props.videoStyle}></video>
             </div>
         </div>
     )

diff --git a/app/renderer/src/main/src/pages/fuzzer/WebFuzzerPage/WebFuzzerPage.module.scss b/app/renderer/src/main/src/pages/fuzzer/WebFuzzerPage/WebFuzzerPage.module.scss
@@ -22,6 +22,7 @@
             color: var(--yakit-header-color);
             cursor: pointer;
             background-color: #f0f1f3;
+            border-bottom: 1px solid #fff;
             &:hover {
                 background-color: rgba(204, 210, 222, 0.5);
             }