Skip to content

Commit 88c0f6c

Browse files
LanwyWriteXULanwyWriteXU
committed
backup spa addon
WTF
1 parent 19f5487 commit 88c0f6c

2 files changed

Lines changed: 19 additions & 243 deletions

File tree

‎src/addons/addons/simple-project-analyzer/userscript.js‎

Lines changed: 15 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,6 @@ async function loadChartJS() {
1414
});
1515
}
1616
import icon from '!../../../lib/tw-recolor/build!./SPA.svg'
17-
import SideBar from '../../ui/side-bar/side-bar.js';
18-
19-
// 检测是否启用 VSCode 布局
20-
function isVSCodeLayoutEnabled() {
21-
try {
22-
const settings = localStorage.getItem("AESettings");
23-
if (settings) {
24-
const parsed = JSON.parse(settings);
25-
return parsed.EnableVSCodeLayout === true;
26-
}
27-
} catch (e) {
28-
// ignore
29-
}
30-
return false;
31-
}
32-
3317
export default async function ({ addon, msg, safeMsg, console }) {
3418
// 加载Chart.js库
3519
await loadChartJS();
@@ -40,11 +24,9 @@ export default async function ({ addon, msg, safeMsg, console }) {
4024
this.analyzeButton = null;
4125
this.analyzeModal = null;
4226
this.removeModal = null;
43-
this.sidebarContent = null;
4427
this.chartInstance = null;
4528
this.mathLogicChartInstance = null;
4629
this.drScratchChartInstance = null;
47-
this.isVSCodeLayout = isVSCodeLayoutEnabled();
4830
}
4931

5032
// 创建分析按钮
@@ -75,14 +57,14 @@ export default async function ({ addon, msg, safeMsg, console }) {
7557
others: 'sa-analyze-button'
7658
});
7759

78-
const img = document.createElement('img');
7960
if (VSCodeLayout) {
8061
// VSCodeLayout 下使用 SVG 图标
62+
const img = document.createElement('img');
8163
img.src = icon();
64+
img.style.filter = "grayscale(100%)"
8265
img.marginTop = '5px';
8366
img.width = '20px';
8467
img.height = '20px';
85-
img.style.filter = "grayscale(100%)";
8668
img.alt = '分析';
8769
this.analyzeButton.appendChild(img);
8870
} else {
@@ -94,22 +76,7 @@ export default async function ({ addon, msg, safeMsg, console }) {
9476
// 禁用时隐藏按钮
9577
addon.tab.displayNoneWhileDisabled(this.analyzeButton);
9678

97-
this.analyzeButton.addEventListener('click', () => {
98-
// 重新检测布局模式
99-
this.isVSCodeLayout = isVSCodeLayoutEnabled();
100-
101-
if (this.isVSCodeLayout) {
102-
// VSCode 布局下，按钮作为切换开关
103-
if (SideBar.getActivePlugin() === 'simple-project-analyzer') {
104-
SideBar.close();
105-
} else {
106-
this.showSidebar(img);
107-
}
108-
} else {
109-
// 非 VSCode 布局下，每次点击都打开新的 modal
110-
this.showModal();
111-
}
112-
});
79+
this.analyzeButton.addEventListener('click', () => this.showAnalysisModal());
11380

11481
// 将按钮添加到目标位置
11582
if (VSCodeLayout) {
@@ -126,85 +93,11 @@ export default async function ({ addon, msg, safeMsg, console }) {
12693

12794
// 显示分析结果模态框
12895
showAnalysisModal() {
129-
// 检测当前布局模式
130-
this.isVSCodeLayout = isVSCodeLayoutEnabled();
131-
132-
if (this.isVSCodeLayout) {
133-
// VSCode 布局下显示在 sidebar
134-
this.showSidebar();
135-
} else {
136-
// 非 VSCode 布局下显示在 Modal
137-
this.showModal();
138-
}
139-
}
140-
141-
// 在 Sidebar 中显示分析结果
142-
showSidebar(img) {
143-
// 检查当前是否已经激活
144-
if (SideBar.getActivePlugin() === 'simple-project-analyzer') {
145-
// 如果已激活，则关闭
146-
SideBar.close();
147-
return;
148-
}
149-
150-
// 如果还没有创建内容，创建并注册
151-
if (!this.sidebarContent) {
152-
this.sidebarContent = document.createElement('div');
153-
this.sidebarContent.className = 'sa-analyze-sidebar-content';
154-
155-
// 生成分析结果HTML
156-
const analysisHTML = this.generateAnalysisHTML();
157-
158-
// 设置 sidebar 内容
159-
this.sidebarContent.innerHTML = `
160-
<div class="sa-analyze-loading" id="saAnalyzeLoading">
161-
<div class="sa-analyze-spinner"></div>
162-
<p>${msg('analyzing')}</p>
163-
</div>
164-
<div class="sa-analyze-results" id="saAnalyzeResults" style="display: none;">
165-
${analysisHTML}
166-
</div>
167-
`;
168-
169-
// 注册插件内容和回调
170-
SideBar.register('simple-project-analyzer', this.sidebarContent, {
171-
onActivate: () => {
172-
// 激活时添加按钮状态
173-
if (this.analyzeButton) {
174-
this.analyzeButton.classList.add('is-selected');
175-
img.style.filter = "grayscale(0%)";
176-
}
177-
},
178-
onDeactivate: () => {
179-
// 停用时移除按钮状态
180-
if (this.analyzeButton) {
181-
this.analyzeButton.classList.remove('is-selected');
182-
img.style.filter = "grayscale(100%)";
183-
}
184-
// 停用时销毁图表
185-
this.destroyCharts();
186-
}
187-
});
188-
}
189-
190-
// 切换到 SPA 插件
191-
SideBar.switchTo('simple-project-analyzer');
192-
193-
// 异步分析项目
194-
this.analyzeProject();
195-
}
196-
197-
// 在 Modal 中显示分析结果
198-
showModal() {
19996
// 如果模态框已存在，先移除
20097
if (this.analyzeModal) {
20198
this.analyzeModal.remove();
20299
}
203100

204-
if (this.analyzeButton) {
205-
this.analyzeButton.classList.add('is-selected');
206-
}
207-
208101
// 使用 addon.tab.createModal 创建模态框
209102
const { backdrop, container, content, closeButton, remove } = addon.tab.createModal(msg('modal-title'), {
210103
isOpen: true
@@ -244,36 +137,20 @@ export default async function ({ addon, msg, safeMsg, console }) {
244137
this.removeModal();
245138
this.analyzeModal = null;
246139
this.removeModal = null;
247-
140+
248141
// 销毁图表实例
249-
this.destroyCharts();
250-
251-
// 移除按钮选中状态
252-
if (this.analyzeButton) {
253-
this.analyzeButton.classList.remove('is-selected');
142+
if (this.chartInstance) {
143+
this.chartInstance.destroy();
144+
this.chartInstance = null;
145+
}
146+
if (this.mathLogicChartInstance) {
147+
this.mathLogicChartInstance.destroy();
148+
this.mathLogicChartInstance = null;
149+
}
150+
if (this.drScratchChartInstance) {
151+
this.drScratchChartInstance.destroy();
152+
this.drScratchChartInstance = null;
254153
}
255-
}
256-
}
257-
258-
// 关闭 Sidebar
259-
closeSidebar() {
260-
// 使用全局 close 方法，会自动触发 onDeactivate 回调
261-
SideBar.close();
262-
}
263-
264-
// 销毁所有图表实例
265-
destroyCharts() {
266-
if (this.chartInstance) {
267-
this.chartInstance.destroy();
268-
this.chartInstance = null;
269-
}
270-
if (this.mathLogicChartInstance) {
271-
this.mathLogicChartInstance.destroy();
272-
this.mathLogicChartInstance = null;
273-
}
274-
if (this.drScratchChartInstance) {
275-
this.drScratchChartInstance.destroy();
276-
this.drScratchChartInstance = null;
277154
}
278155
}
279156

‎src/addons/addons/simple-project-analyzer/userstyle.css‎

Lines changed: 4 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -22,33 +22,18 @@
2222
width: auto;
2323
height: 1.5rem;
2424
margin-left: 10px;
25-
position: relative;
2625
}
2726

2827
.sa-analyze-button:hover {
2928
border-color: var(--motion-primary);
3029
}
3130

32-
/* 按钮激活状态 */
33-
.sa-analyze-button-active {
34-
background-color: var(--ui-primary) !important;
35-
color: var(--ui-white) !important;
36-
border-color: var(--ui-primary) !important;
37-
}
38-
39-
/* 按钮选中状态 */
40-
.sa-analyze-button.is-selected {
41-
background-color: var(--ui-white, white) !important;
42-
box-shadow: inset 3px 0px 0px 0px var(--looks-secondary, #0099ff) !important;
43-
}
44-
4531
/* VSCode 布局下的分析按钮样式 */
4632
[class*="tabs"][class*="vscodeList"] .sa-analyze-button {
4733
width: 40px;
48-
height: auto;
49-
min-height: 40px;
34+
height: 30px;
5035
font-size: 0;
51-
background-color: transparent;
36+
background-color: #00000000;
5237
border: 0;
5338
border-radius: 0 !important;
5439
margin: 0 !important;
@@ -57,101 +42,15 @@
5742
justify-content: center;
5843
align-items: center;
5944
position: relative;
45+
margin-bottom: 10px !important;
46+
6047
}
6148

6249
[class*="tabs"][class*="vscodeList"] .sa-analyze-button img {
6350
width: 2rem;
6451
height: 2rem;
6552
}
6653

67-
/* VSCode 布局下按钮选中状态 */
68-
[class*="tabs"][class*="vscodeList"] .sa-analyze-button.is-selected {
69-
background-color: var(--ui-white, white) !important;
70-
box-shadow: inset 3px 0px 0px 0px var(--looks-secondary, #0099ff) !important;
71-
}
72-
73-
[class*="tabs"][class*="vscodeList"] .sa-analyze-button-active::before {
74-
content: '';
75-
position: absolute;
76-
left: 0;
77-
top: 0;
78-
bottom: 0;
79-
width: 3px;
80-
background-color: var(--motion-primary);
81-
}
82-
83-
/* Sidebar 内容容器样式 */
84-
.sa-analyze-sidebar-content {
85-
max-height: calc(100vh - 80px);
86-
height: 100%;
87-
overflow-y: auto;
88-
padding: 16px;
89-
display: flex;
90-
flex-direction: column;
91-
gap: 20px;
92-
box-sizing: border-box;
93-
}
94-
95-
/* Sidebar 模式下的结果容器 */
96-
.sa-analyze-sidebar-content .sa-analyze-results {
97-
padding: 0;
98-
flex: 1;
99-
overflow-y: auto;
100-
min-height: 0;
101-
}
102-
103-
/* Sidebar 模式下的加载容器 */
104-
.sa-analyze-sidebar-content .sa-analyze-loading {
105-
padding: 40px 20px;
106-
text-align: center;
107-
}
108-
109-
/* Sidebar 模式下的主体容器 */
110-
.sa-analyze-sidebar-content .sa-analyze-modal-body {
111-
display: flex;
112-
flex-direction: column;
113-
gap: 20px;
114-
min-height: 0;
115-
}
116-
117-
/* Sidebar 模式下的节样式调整 */
118-
.sa-analyze-sidebar-content .sa-analyze-section {
119-
padding: 16px;
120-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
121-
}
122-
123-
/* Sidebar 模式下的图表容器调整 */
124-
.sa-analyze-sidebar-content .sa-analyze-chart-container {
125-
height: 250px;
126-
padding: 12px;
127-
}
128-
129-
/* Sidebar 模式下的行调整为单列 */
130-
.sa-analyze-sidebar-content .sa-analyze-row {
131-
flex-direction: column;
132-
gap: 12px;
133-
}
134-
135-
/* Sidebar 模式下的统计网格调整 */
136-
.sa-analyze-sidebar-content .sa-analyze-stats-grid {
137-
grid-template-columns: repeat(2, 1fr);
138-
gap: 12px;
139-
}
140-
141-
/* Sidebar 模式下的统计卡片调整 */
142-
.sa-analyze-sidebar-content .sa-analyze-stat {
143-
padding: 12px;
144-
}
145-
146-
.sa-analyze-sidebar-content .sa-analyze-stat-value {
147-
font-size: 20px;
148-
}
149-
150-
/* Sidebar 模式下的扩展网格调整 */
151-
.sa-analyze-sidebar-content .sa-analyze-extensions-grid {
152-
grid-template-columns: 1fr;
153-
}
154-
15554
/* 模态框样式 */
15655
.sa-analyze-modal-popup {
15756
max-width: 90%;

0 commit comments

Comments
 (0)