Skip to content

Commit 63ce592

Browse files
author
nce40202
committed
chore: 添加public目录下的image.png文件
该提交将image.png文件添加到public目录中，用于项目中的静态资源管理。
1 parent 279d62f commit 63ce592

File tree

2 files changed

+131
-218
lines changed

2 files changed

+131
-218
lines changed

‎public/preview.png‎

22.4 KB
Loading

‎src/views/MemoryVisualizer.vue‎

Lines changed: 131 additions & 218 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,136 @@
11
<template>
22
<div class="jvm-memory-visualizer">
3-
<!-- 内存配置区域 -->
4-
<a-form :model="jvmArgs" layout="inline" class="memory-config-panel">
5-
<a-form-item field="value" label="JVM 参数：" style="flex: 1;" :help="jvmArgs.error">
6-
<a-input v-model="jvmArgs.value" placeholder="例如: -Xms512m -Xmx1024m" />
7-
</a-form-item>
8-
<a-form-item>
9-
<a-button @click="showArgsHelp" style="margin: 0 10px">参数说明</a-button>
10-
</a-form-item>
11-
<a-form-item>
12-
<a-button @click="restartJvm" class="restart-button" :loading="isRestarting">重启 JVM</a-button>
13-
</a-form-item>
14-
<a-form-item>
15-
<a-button @click="showLogicTable">内存管理逻辑</a-button>
16-
</a-form-item>
17-
</a-form>
18-
19-
<!-- 对象创建表单 -->
20-
<a-form ref="newObjectFormRef" layout="inline" :model="newObject" class="control-panel">
21-
<a-form-item field="name" label="对象名称：" style="flex: 1;">
22-
<a-input v-model="newObject.name" placeholder="输入对象名称" />
23-
</a-form-item>
24-
<a-form-item field="size" label="对象大小：" style="flex: 1;">
25-
<a-input-number v-model="newObject.size" :min="1" placeholder="输入对象大小" />
26-
<a-select v-model="newObject.unit" style="margin-left: 10px; width: 100px;">
27-
<a-option value="B">B</a-option>
28-
<a-option value="KB">KB</a-option>
29-
<a-option value="MB">MB</a-option>
30-
</a-select>
31-
</a-form-item>
32-
<a-form-item field="isGarbageCollectable">
33-
<a-switch v-model="newObject.isGarbageCollectable">
34-
<template #checked>可回收</template>
35-
<template #unchecked>不可回收</template>
36-
</a-switch>
37-
</a-form-item>
38-
<a-form-item>
39-
<a-dropdown trigger="hover" @click="createObject" :disabled="!isValidObject || isRestarting">
40-
<a-button>创建对象</a-button>
41-
<template #content>
42-
<a-doption @click="createObjects(5)">5 个对象</a-doption>
43-
<a-doption @click="createObjects(10)">10 个对象</a-doption>
44-
</template>
45-
</a-dropdown>
46-
</a-form-item>
47-
</a-form>
48-
49-
<!-- 内存区域可视化 -->
50-
<div class="memory-container">
51-
<div class="memory-visualization">
52-
<h2>堆内存</h2>
53-
<div class="memory-regions">
54-
<!-- 新生代 -->
55-
<div class="young-gen">
56-
<h3>新生代 ({{ formatBytes(youngGenSize) }})</h3>
57-
58-
<!-- Eden区 -->
59-
<MemorySpace class="eden-space" space-name="Eden Space" :total-size="edenSize"
60-
:used-size="getSpaceUsed(MEMORY_SPACE.EDEN)"
61-
:heapObjects="heapObjects.filter(o => o.space === MEMORY_SPACE.EDEN)"
62-
:getObjectStyle="getObjectStyle" @toggleGarbageCollectable="toggleGarbageCollectable">
63-
</MemorySpace>
64-
65-
<!-- Survivor区 -->
66-
<div class="survivor-spaces">
67-
<MemorySpace class="survivor-space" space-name="Survivor 0"
68-
:space-desc="currentFromSpace === MEMORY_SPACE.SURVIVOR_0 ? 'From区' : 'To区'"
69-
:total-size="survivorSize" :used-size="getSpaceUsed(MEMORY_SPACE.SURVIVOR_0)"
70-
:heapObjects="heapObjects.filter(o => o.space === MEMORY_SPACE.SURVIVOR_0)"
71-
:getObjectStyle="getObjectStyle" @toggleGarbageCollectable="toggleGarbageCollectable">
72-
</MemorySpace>
73-
74-
<MemorySpace class="survivor-space" space-name="Survivor 1"
75-
:space-desc="currentFromSpace === MEMORY_SPACE.SURVIVOR_1 ? 'From区' : 'To区'"
76-
:total-size="survivorSize" :used-size="getSpaceUsed(MEMORY_SPACE.SURVIVOR_1)"
77-
:heapObjects="heapObjects.filter(o => o.space === MEMORY_SPACE.SURVIVOR_1)"
78-
:getObjectStyle="getObjectStyle" @toggleGarbageCollectable="toggleGarbageCollectable">
79-
</MemorySpace>
3+
<a-space direction="vertical" :size="16" style="display: block;">
4+
<a-row class="form-row">
5+
<a-col :span="24">
6+
<!-- 内存配置区域 -->
7+
<a-form :model="jvmArgs" layout="inline" class="memory-config-panel">
8+
<a-form-item field="value" label="JVM 参数：" style="flex: 1;" :help="jvmArgs.error">
9+
<a-input v-model="jvmArgs.value" placeholder="例如: -Xms512m -Xmx1024m" />
10+
</a-form-item>
11+
<a-form-item>
12+
<a-button @click="showArgsHelp" style="margin: 0 10px">参数说明</a-button>
13+
</a-form-item>
14+
<a-form-item>
15+
<a-button @click="restartJvm" class="restart-button" :loading="isRestarting">重启
16+
JVM</a-button>
17+
</a-form-item>
18+
<a-form-item>
19+
<a-button @click="showLogicTable">内存管理逻辑</a-button>
20+
</a-form-item>
21+
</a-form>
22+
</a-col>
23+
</a-row>
24+
<a-row class="form-row">
25+
<a-col :span="24">
26+
<!-- 对象创建表单 -->
27+
<a-form ref="newObjectFormRef" layout="inline" :model="newObject" class="control-panel">
28+
<a-form-item field="name" label="对象名称：" style="flex: 1;">
29+
<a-input v-model="newObject.name" placeholder="输入对象名称" />
30+
</a-form-item>
31+
<a-form-item field="size" label="对象大小：" style="flex: 1;">
32+
<a-input-number v-model="newObject.size" :min="1" placeholder="输入对象大小" />
33+
<a-select v-model="newObject.unit" style="margin-left: 10px; width: 100px;">
34+
<a-option value="B">B</a-option>
35+
<a-option value="KB">KB</a-option>
36+
<a-option value="MB">MB</a-option>
37+
</a-select>
38+
</a-form-item>
39+
<a-form-item field="isGarbageCollectable">
40+
<a-switch v-model="newObject.isGarbageCollectable">
41+
<template #checked>可回收</template>
42+
<template #unchecked>不可回收</template>
43+
</a-switch>
44+
</a-form-item>
45+
<a-form-item>
46+
<a-dropdown trigger="hover" @click="createObject"
47+
:disabled="!isValidObject || isRestarting">
48+
<a-button>创建对象</a-button>
49+
<template #content>
50+
<a-doption @click="createObjects(5)">5 个对象</a-doption>
51+
<a-doption @click="createObjects(10)">10 个对象</a-doption>
52+
</template>
53+
</a-dropdown>
54+
</a-form-item>
55+
</a-form>
56+
</a-col>
57+
</a-row>
58+
<a-row class="memory-container">
59+
<!-- 内存区域可视化 -->
60+
<a-col :span="16">
61+
<div class="memory-visualization">
62+
<h2>堆内存</h2>
63+
<div class="memory-regions">
64+
<!-- 新生代 -->
65+
<div class="young-gen">
66+
<h3>新生代 ({{ formatBytes(youngGenSize) }})</h3>
67+
68+
<!-- Eden区 -->
69+
<MemorySpace class="eden-space" space-name="Eden Space" :total-size="edenSize"
70+
:used-size="getSpaceUsed(MEMORY_SPACE.EDEN)"
71+
:heapObjects="heapObjects.filter(o => o.space === MEMORY_SPACE.EDEN)"
72+
:getObjectStyle="getObjectStyle"
73+
@toggleGarbageCollectable="toggleGarbageCollectable">
74+
</MemorySpace>
75+
76+
<!-- Survivor区 -->
77+
<div class="survivor-spaces">
78+
<MemorySpace class="survivor-space" space-name="Survivor 0"
79+
:space-desc="currentFromSpace === MEMORY_SPACE.SURVIVOR_0 ? 'From区' : 'To区'"
80+
:total-size="survivorSize" :used-size="getSpaceUsed(MEMORY_SPACE.SURVIVOR_0)"
81+
:heapObjects="heapObjects.filter(o => o.space === MEMORY_SPACE.SURVIVOR_0)"
82+
:getObjectStyle="getObjectStyle"
83+
@toggleGarbageCollectable="toggleGarbageCollectable">
84+
</MemorySpace>
85+
86+
<MemorySpace class="survivor-space" space-name="Survivor 1"
87+
:space-desc="currentFromSpace === MEMORY_SPACE.SURVIVOR_1 ? 'From区' : 'To区'"
88+
:total-size="survivorSize" :used-size="getSpaceUsed(MEMORY_SPACE.SURVIVOR_1)"
89+
:heapObjects="heapObjects.filter(o => o.space === MEMORY_SPACE.SURVIVOR_1)"
90+
:getObjectStyle="getObjectStyle"
91+
@toggleGarbageCollectable="toggleGarbageCollectable">
92+
</MemorySpace>
93+
</div>
94+
</div>
95+
<!-- 老年代 -->
96+
<div class="old-gen">
97+
<h3>老年代 ({{ formatBytes(oldGenSize) }})</h3>
98+
<MemorySpace class="old-gen" space-name="Old Gen" :total-size="oldGenSize"
99+
:used-size="getSpaceUsed(MEMORY_SPACE.OLD_GEN)"
100+
:heapObjects="heapObjects.filter(o => o.space === MEMORY_SPACE.OLD_GEN)"
101+
:getObjectStyle="getObjectStyle"
102+
@toggleGarbageCollectable="toggleGarbageCollectable">
103+
</MemorySpace>
104+
</div>
105+
</div>
106+
<div class="memory-info">
107+
<p>总容量: {{ formatBytes(heapSize) }}</p>
108+
<p>已使用: {{ formatBytes(usedHeapSize) }}</p>
109+
<p>剩余空间: {{ formatBytes(heapSize - usedHeapSize) }}</p>
80110
</div>
81111
</div>
82-
<!-- 老年代 -->
83-
<div class="old-gen">
84-
<h3>老年代 ({{ formatBytes(oldGenSize) }})</h3>
85-
<MemorySpace class="old-gen" space-name="Old Gen" :total-size="oldGenSize"
86-
:used-size="getSpaceUsed(MEMORY_SPACE.OLD_GEN)"
87-
:heapObjects="heapObjects.filter(o => o.space === MEMORY_SPACE.OLD_GEN)"
88-
:getObjectStyle="getObjectStyle" @toggleGarbageCollectable="toggleGarbageCollectable">
89-
</MemorySpace>
112+
</a-col>
113+
<!-- 运行日志 -->
114+
<a-col :span="8">
115+
<div class="operation-history">
116+
<h2>运行日志</h2>
117+
<ul>
118+
<li v-for="(log, index) in operationLogs" :key="index">
119+
{{ log }}
120+
</li>
121+
</ul>
90122
</div>
91-
</div>
92-
<div class="memory-info">
93-
<p>总容量: {{ formatBytes(heapSize) }}</p>
94-
<p>已使用: {{ formatBytes(usedHeapSize) }}</p>
95-
<p>剩余空间: {{ formatBytes(heapSize - usedHeapSize) }}</p>
96-
</div>
97-
</div>
98-
99-
<!-- 运行日志 -->
100-
<div class="operation-history">
101-
<h2>运行日志</h2>
102-
<ul>
103-
<li v-for="(log, index) in operationLogs" :key="index">
104-
{{ log }}
105-
</li>
106-
</ul>
107-
</div>
123+
</a-col>
124+
</a-row>
125+
</a-space>
126+
</div>
127+
128+
<div class="jvm-memory-visualizer">
129+
130+
<div class="memory-container">
131+
132+
133+
108134
</div>
109135
</div>
110136

@@ -748,133 +774,21 @@ const handleLogicChange = (logic: { id: string; enabled: boolean }) => {
748774
padding: 20px;
749775
}
750776
751-
.memory-config-panel {
777+
.jvm-memory-visualizer .form-row {
752778
background: white;
753779
padding: 20px;
754780
border-radius: 8px;
755781
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
756782
margin-bottom: 20px;
757783
}
758784
759-
.config-group {
760-
display: flex;
761-
gap: 20px;
762-
flex-wrap: wrap;
763-
}
764-
765-
.config-item {
766-
flex: 1;
767-
min-width: 200px;
768-
}
769-
770-
.config-item label {
771-
display: block;
772-
margin-bottom: 5px;
773-
}
774-
775-
.config-item .size-input-group {
776-
display: flex;
777-
align-items: center;
778-
gap: 10px;
779-
}
780-
781-
.config-item input {
782-
flex: 1;
783-
padding: 8px;
784-
border: 1px solid #ddd;
785-
border-radius: 4px;
786-
}
787-
788-
.config-item .unit {
789-
width: 30px;
790-
color: #666;
791-
}
792-
793-
.control-panel {
794-
background: white;
795-
padding: 20px;
796-
border-radius: 8px;
797-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
798-
margin-bottom: 20px;
799-
display: flex;
800-
flex-wrap: wrap;
801-
gap: 20px;
802-
}
803-
804-
.memory-container {
805-
display: flex;
806-
gap: 20px;
807-
width: 100%;
808-
}
809-
810-
.form-group {
811-
flex: 1;
812-
}
813-
814-
.form-group label {
815-
display: block;
816-
margin-bottom: 5px;
817-
}
818-
819-
.form-group input {
820-
width: 100%;
821-
padding: 8px;
822-
padding-right: 0px;
823-
border: 1px solid #ddd;
824-
border-radius: 4px;
825-
}
826-
827-
.error-message {
828-
color: #dc3545;
829-
font-size: 0.875em;
830-
margin-top: 5px;
831-
}
832-
833-
.size-input-group {
834-
display: flex;
835-
gap: 10px;
836-
}
837-
838-
.size-input-group input {
839-
flex: 1;
840-
}
841-
842-
.size-input-group select {
843-
width: 80px;
844-
padding: 8px;
845-
border: 1px solid #ddd;
846-
border-radius: 4px;
847-
background-color: white;
848-
}
849-
850785
.memory-visualization {
851-
width: 70%;
852-
margin: 0;
853786
padding: 20px;
854787
background: white;
855788
border-radius: 8px;
856789
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
857790
}
858791
859-
.memory-regions {
860-
margin: 20px 0;
861-
width: 100%;
862-
}
863-
864-
.young-gen,
865-
.old-gen {
866-
background: #fff;
867-
border-radius: 8px;
868-
margin-bottom: 20px;
869-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
870-
width: 100%;
871-
}
872-
873-
.eden-space,
874-
.survivor-space {
875-
margin: 10px 0;
876-
}
877-
878792
.survivor-spaces {
879793
display: flex;
880794
gap: 20px;
@@ -893,8 +807,7 @@ const handleLogicChange = (logic: { id: string; enabled: boolean }) => {
893807
}
894808
895809
.operation-history {
896-
width: 30%;
897-
margin: 0;
810+
margin-left: 20px;
898811
background: white;
899812
padding: 20px;
900813
border-radius: 8px;
@@ -906,7 +819,7 @@ const handleLogicChange = (logic: { id: string; enabled: boolean }) => {
906819
list-style: none;
907820
padding: 0;
908821
margin: 0;
909-
height: 500px;
822+
height: 535px;
910823
overflow-y: auto;
911824
font-size: 13px;
912825
}

0 commit comments

Comments
 (0)