Skip to content

Commit 2162c73

Browse files
zcj220zcj220
committed
feat: replace settings panel with floating dropdown menu (VS Code style)
1 parent 364d11a commit 2162c73

1 file changed

Lines changed: 70 additions & 44 deletions

File tree

‎extension/src/sidebarProvider.ts‎

Lines changed: 70 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1300,6 +1300,35 @@ ${commonRules}`;
13001300
}
13011301
.gear-btn:hover { background:var(--input-bg); color:var(--fg); border:none; }
13021302
.gear-btn.active-gear { color:var(--btn-bg); }
1303+
/* 设置浮动下拉菜单 */
1304+
.settings-dropdown {
1305+
position:fixed; top:30px; right:6px; z-index:1000;
1306+
min-width:210px;
1307+
background:var(--input-bg); color:var(--fg);
1308+
border:1px solid var(--input-border);
1309+
border-radius:5px;
1310+
box-shadow:0 4px 20px rgba(0,0,0,0.4);
1311+
padding:4px 0;
1312+
display:none;
1313+
}
1314+
.settings-dropdown.open { display:block; }
1315+
.sdrop-section {
1316+
font-size:10px; color:var(--muted);
1317+
padding:6px 12px 2px; letter-spacing:0.5px;
1318+
}
1319+
.sdrop-item {
1320+
display:flex; justify-content:space-between; align-items:center;
1321+
padding:7px 12px; font-size:12px; color:var(--fg); cursor:pointer;
1322+
gap:12px;
1323+
}
1324+
.sdrop-item:hover { background:var(--hover-bg, rgba(128,128,128,0.15)); }
1325+
.sdrop-item.disabled { opacity:0.5; cursor:default; }
1326+
.sdrop-item.disabled:hover { background:transparent; }
1327+
.sdrop-divider { height:1px; background:var(--input-border); margin:4px 0; }
1328+
.sdrop-sublabel {
1329+
font-size:10px; color:var(--muted);
1330+
padding:0 12px 6px; text-align:right;
1331+
}
13031332
* { margin: 0; padding: 0; box-sizing: border-box; }
13041333
body { font-family: var(--vscode-font-family); font-size: 13px; color: var(--fg); padding: 12px; }
13051334
h2 { font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
@@ -1429,8 +1458,32 @@ ${commonRules}`;
14291458
</style>
14301459
</head>
14311460
<body>
1432-
<!-- 右上角设置按钮 -->
1461+
<!-- 右上角设置按钮 + 浮动下拉菜单 -->
14331462
<button class="gear-btn" id="btnGearSettings" title="设置">⚙️</button>
1463+
<div id="settingsDropdown" class="settings-dropdown">
1464+
<div class="sdrop-section">个性化设置</div>
1465+
<div class="sdrop-item" id="settingsThemeRow">
1466+
<span>🌓 界面主题</span>
1467+
<label class="toggle-switch" onclick="event.stopPropagation()">
1468+
<input type="checkbox" id="themeToggle" />
1469+
<span class="toggle-slider"></span>
1470+
</label>
1471+
</div>
1472+
<div class="sdrop-sublabel" id="themeLabel">🌙 深色模式</div>
1473+
<div class="sdrop-divider"></div>
1474+
<div class="sdrop-item disabled">
1475+
<span>🌐 界面语言</span>
1476+
<span class="badge-soon">即将推出</span>
1477+
</div>
1478+
<div class="sdrop-item disabled">
1479+
<span>🔤 字体大小</span>
1480+
<span class="badge-soon">即将推出</span>
1481+
</div>
1482+
<div class="sdrop-item disabled">
1483+
<span>🔑 账户登录</span>
1484+
<span class="badge-soon">即将推出</span>
1485+
</div>
1486+
</div>
14341487
<!-- 引擎状态 -->
14351488
<div class="section">
14361489
<h2>
@@ -1560,30 +1613,6 @@ ${commonRules}`;
15601613
<div id="shareResult" style="font-size:11px;margin-top:4px;display:none"></div>
15611614
</div>
15621615
1563-
<!-- 设置 -->
1564-
<div class="tab-content" id="panelSettings">
1565-
<div style="margin-bottom:12px;font-size:12px;color:var(--muted)">个性化设置</div>
1566-
<div class="settings-row">
1567-
<span>🌓 界面主题</span>
1568-
<label class="toggle-switch">
1569-
<input type="checkbox" id="themeToggle" />
1570-
<span class="toggle-slider"></span>
1571-
</label>
1572-
</div>
1573-
<div style="font-size:11px;color:var(--muted);padding:2px 2px 8px;text-align:right" id="themeLabel">跟随编辑器</div>
1574-
<div class="settings-row">
1575-
<span>🌐 界面语言</span>
1576-
<span class="badge-soon">即将推出</span>
1577-
</div>
1578-
<div class="settings-row">
1579-
<span>🔤 字体大小</span>
1580-
<span class="badge-soon">即将推出</span>
1581-
</div>
1582-
<div class="settings-row">
1583-
<span>🔑 账户登录</span>
1584-
<span class="badge-soon">即将推出</span>
1585-
</div>
1586-
</div>
15871616
</div>
15881617
15891618
<!-- 测试控制 -->
@@ -1668,42 +1697,39 @@ ${commonRules}`;
16681697
const panelBlueprint = document.getElementById("panelBlueprint");
16691698
const panelExplore = document.getElementById("panelExplore");
16701699
const panelCommunity = document.getElementById("panelCommunity");
1671-
const panelSettings = document.getElementById("panelSettings");
16721700
const allTabs = [tabBlueprint, tabExplore, tabCommunity];
16731701
const allPanels = [panelBlueprint, panelExplore, panelCommunity];
16741702
const btnGear = document.getElementById("btnGearSettings");
1675-
let settingsOpen = false;
1703+
const settingsDropdown = document.getElementById("settingsDropdown");
16761704
16771705
function switchTab(activeTab, activePanel) {
16781706
allTabs.filter(Boolean).forEach(t => t.classList.remove("active"));
16791707
allPanels.filter(Boolean).forEach(p => p.classList.remove("active"));
16801708
if (activeTab) activeTab.classList.add("active");
16811709
if (activePanel) activePanel.classList.add("active");
1682-
// 关闭设置面板
1683-
if (panelSettings) panelSettings.classList.remove("active");
16841710
if (btnGear) btnGear.classList.remove("active-gear");
1685-
settingsOpen = false;
1711+
if (settingsDropdown) settingsDropdown.classList.remove("open");
16861712
}
16871713
tabBlueprint.addEventListener("click", () => switchTab(tabBlueprint, panelBlueprint));
16881714
tabExplore.addEventListener("click", () => switchTab(tabExplore, panelExplore));
16891715
if (tabCommunity) tabCommunity.addEventListener("click", () => {
16901716
switchTab(tabCommunity, panelCommunity);
16911717
loadCommunityExperiences();
16921718
});
1693-
// 右上角齿轮：toggle 设置面板
1694-
if (btnGear) btnGear.addEventListener("click", () => {
1695-
settingsOpen = !settingsOpen;
1696-
if (settingsOpen) {
1697-
allTabs.filter(Boolean).forEach(t => t.classList.remove("active"));
1698-
allPanels.filter(Boolean).forEach(p => p.classList.remove("active"));
1699-
if (panelSettings) panelSettings.classList.add("active");
1700-
btnGear.classList.add("active-gear");
1701-
} else {
1702-
if (panelSettings) panelSettings.classList.remove("active");
1703-
btnGear.classList.remove("active-gear");
1704-
// 恢复蓝本模式
1705-
tabBlueprint.classList.add("active");
1706-
panelBlueprint.classList.add("active");
1719+
// 右上角齿轮：弹出浮动下拉菜单
1720+
if (btnGear) btnGear.addEventListener("click", (e) => {
1721+
e.stopPropagation();
1722+
const isOpen = settingsDropdown.classList.contains("open");
1723+
settingsDropdown.classList.toggle("open", !isOpen);
1724+
btnGear.classList.toggle("active-gear", !isOpen);
1725+
});
1726+
// 点击外部关闭下拉菜单
1727+
document.addEventListener("click", (e) => {
1728+
if (settingsDropdown && settingsDropdown.classList.contains("open")) {
1729+
if (!settingsDropdown.contains(e.target) && e.target !== btnGear) {
1730+
settingsDropdown.classList.remove("open");
1731+
if (btnGear) btnGear.classList.remove("active-gear");
1732+
}
17071733
}
17081734
});
17091735

0 commit comments

Comments
 (0)