Skip to content

Commit 8ae9e91

Browse files
dalaolaladalaolala
committed
feat: 添加 GitHub 信息卡片组件并优化外部链接拦截处理
1 parent 46cfcc9 commit 8ae9e91

5 files changed

Lines changed: 323 additions & 3 deletions

File tree

‎electron/main.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { app, BrowserWindow, Menu } = require('electron');
1+
const { app, BrowserWindow, Menu, shell } = require('electron');
22
const path = require('path');
33
const net = require('net');
44

@@ -128,6 +128,21 @@ function createWindow() {
128128
backendServer.httpServer.close();
129129
}
130130
});
131+
132+
// 拦截所有非 localhost 的导航和新窗口，用系统浏览器打开
133+
mainWindow.webContents.setWindowOpenHandler(({ url }) => {
134+
if (!url.startsWith(`http://localhost`) && !url.startsWith(`https://localhost`)) {
135+
shell.openExternal(url);
136+
}
137+
return { action: 'deny' };
138+
});
139+
140+
mainWindow.webContents.on('will-navigate', (event, url) => {
141+
if (!url.startsWith(`http://localhost`) && !url.startsWith(`https://localhost`)) {
142+
event.preventDefault();
143+
shell.openExternal(url);
144+
}
145+
});
131146
}
132147

133148
app.whenReady().then(() => {

‎electron/preload.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
const { contextBridge } = require('electron');
1+
const { contextBridge, shell } = require('electron');
22

33
contextBridge.exposeInMainWorld('electron', {
4-
platform: process.platform
4+
platform: process.platform,
5+
openExternal: (url) => shell.openExternal(url)
56
});

‎frontend/src/App.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,49 @@
4848
0%, 50% { opacity: 1; }
4949
51%, 100% { opacity: 0; }
5050
}
51+
52+
/* GitHub Tooltip 卡片样式 */
53+
.github-popper.el-popper {
54+
padding: 0 !important;
55+
border-radius: 10px !important;
56+
border: 1px solid rgba(0, 0, 0, 0.1) !important;
57+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
58+
background: rgba(255, 255, 255, 0.97) !important;
59+
backdrop-filter: blur(24px) saturate(200%) !important;
60+
-webkit-backdrop-filter: blur(24px) saturate(200%) !important;
61+
overflow: hidden !important;
62+
}
63+
64+
/* 深色模式 */
65+
.dark .github-popper.el-popper,
66+
html.dark .github-popper.el-popper {
67+
background: rgba(36, 36, 38, 0.97) !important;
68+
border-color: rgba(255, 255, 255, 0.1) !important;
69+
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
70+
}
71+
72+
.dark .github-popper .github-card-app-name,
73+
html.dark .github-popper .github-card-app-name {
74+
color: #f0f0f5;
75+
}
76+
77+
.dark .github-popper .github-card-divider,
78+
html.dark .github-popper .github-card-divider {
79+
background: rgba(255, 255, 255, 0.08);
80+
}
81+
82+
.dark .github-popper .github-card-link,
83+
html.dark .github-popper .github-card-link {
84+
color: #e0e0e5;
85+
}
86+
87+
.dark .github-popper .github-card-link:hover,
88+
html.dark .github-popper .github-card-link:hover {
89+
background: rgba(64, 158, 255, 0.14);
90+
}
91+
92+
.dark .github-popper .github-card-link:hover .github-card-link-label,
93+
html.dark .github-popper .github-card-link:hover .github-card-link-label {
94+
color: #409eff;
95+
}
5196
</style>

‎frontend/src/components/GithubCard.vue‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<template>
2+
<div class="aside-footer">
3+
<el-tooltip placement="right-end" :show-arrow="false" trigger="click" popper-class="github-popper" :teleported="false">
4+
<template #default>
5+
<button class="icon-btn github-icon-btn" aria-label="关于 / GitHub">
6+
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" style="width:14px;height:14px;">
7+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
8+
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13
9+
-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66
10+
.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15
11+
-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27
12+
.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12
13+
.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48
14+
0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
15+
</svg>
16+
</button>
17+
</template>
18+
<template #content>
19+
<div class="github-card">
20+
<!-- 头部：app 图标 + 名称 + 副标题 -->
21+
<div class="github-card-header">
22+
<div class="github-card-app-icon">
23+
<svg viewBox="0 0 20 20" fill="currentColor">
24+
<rect x="2" y="5" width="16" height="11" rx="2" fill="none" stroke="currentColor" stroke-width="1.4"/>
25+
<path d="M6 5V4a2 2 0 014 0v1" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round"/>
26+
<circle cx="10" cy="11" r="1.5" fill="currentColor"/>
27+
<path d="M10 12.5v1.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
28+
</svg>
29+
</div>
30+
<div class="github-card-header-text">
31+
<div class="github-card-app-name">WebSSH</div>
32+
<div class="github-card-app-sub">SSH / SFTP 客户端</div>
33+
</div>
34+
</div>
35+
36+
<div class="github-card-divider"></div>
37+
38+
<!-- 链接列表 -->
39+
<a href="https://github.com/dalaolala/webssh" target="_blank" rel="noopener noreferrer" class="github-card-link">
40+
<span class="github-card-link-icon github-card-link-icon--green">
41+
<svg viewBox="0 0 16 16" fill="currentColor">
42+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
43+
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13
44+
-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66
45+
.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15
46+
-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27
47+
.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12
48+
.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48
49+
0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
50+
</svg>
51+
</span>
52+
<span class="github-card-link-label">开源地址</span>
53+
<svg class="github-card-link-arrow" viewBox="0 0 12 12" fill="none" stroke="currentColor">
54+
<path d="M2 6h8M7 3l3 3-3 3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
55+
</svg>
56+
</a>
57+
58+
<a href="https://github.com/dalaolala/webssh/tags" target="_blank" rel="noopener noreferrer" class="github-card-link">
59+
<span class="github-card-link-icon github-card-link-icon--blue">
60+
<svg viewBox="0 0 16 16" fill="currentColor">
61+
<path d="M1 7.775V2.75C1 2.06 1.56 1.5 2.25 1.5h5.025a.75.75 0 01.53.22l6.25 6.25a.75.75 0 010 1.06l-5.025 5.025a.75.75 0 01-1.06 0L1.72 8.305A.75.75 0 011 7.775zm1.5-.31l5.345 5.345 4.965-4.965L7.465 3H2.5v4.465zM4.5 5.5a1 1 0 110-2 1 1 0 010 2z"/>
62+
</svg>
63+
</span>
64+
<span class="github-card-link-label">版本下载</span>
65+
<svg class="github-card-link-arrow" viewBox="0 0 12 12" fill="none" stroke="currentColor">
66+
<path d="M2 6h8M7 3l3 3-3 3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
67+
</svg>
68+
</a>
69+
</div>
70+
</template>
71+
</el-tooltip>
72+
</div>
73+
</template>
74+
75+
<script setup>
76+
// 无需额外逻辑，链接由 electron/main.js 的 setWindowOpenHandler 拦截后用系统浏览器打开
77+
</script>
78+
79+
<style scoped>
80+
/* 底部区域 */
81+
.aside-footer {
82+
flex-shrink: 0;
83+
padding: 8px 10px;
84+
border-top: 1px solid rgba(0, 0, 0, 0.06);
85+
}
86+
87+
.dark-theme .aside-footer {
88+
border-top-color: rgba(255, 255, 255, 0.07);
89+
}
90+
91+
/* 按钮基础样式 */
92+
.icon-btn {
93+
width: 28px;
94+
height: 28px;
95+
display: flex;
96+
align-items: center;
97+
justify-content: center;
98+
border: none;
99+
background: transparent;
100+
border-radius: 7px;
101+
color: #636366;
102+
font-size: 14px;
103+
cursor: pointer;
104+
}
105+
106+
.icon-btn:hover {
107+
background: rgba(0, 0, 0, 0.07);
108+
color: #1c1c1e;
109+
}
110+
111+
.dark-theme .icon-btn {
112+
color: #8e8e93;
113+
}
114+
115+
.dark-theme .icon-btn:hover {
116+
background: rgba(255, 255, 255, 0.1);
117+
color: #f5f5f7;
118+
}
119+
120+
/* GitHub 图标按钮颜色覆盖 */
121+
.github-icon-btn {
122+
color: #c0c0c5;
123+
}
124+
125+
.dark-theme .github-icon-btn {
126+
color: #48484e;
127+
}
128+
129+
/* Popper 卡片内部样式 */
130+
.github-card {
131+
min-width: 192px;
132+
padding: 2px 0;
133+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
134+
}
135+
136+
/* 卡片 header */
137+
.github-card-header {
138+
display: flex;
139+
align-items: center;
140+
gap: 10px;
141+
padding: 10px 12px 10px;
142+
}
143+
144+
.github-card-app-icon {
145+
width: 32px;
146+
height: 32px;
147+
border-radius: 8px;
148+
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
149+
display: flex;
150+
align-items: center;
151+
justify-content: center;
152+
color: #5ac8fa;
153+
flex-shrink: 0;
154+
box-shadow: 0 1px 4px rgba(0,0,0,0.18);
155+
}
156+
157+
.github-card-app-icon svg {
158+
width: 16px;
159+
height: 16px;
160+
}
161+
162+
.github-card-header-text {
163+
display: flex;
164+
flex-direction: column;
165+
gap: 1px;
166+
}
167+
168+
.github-card-app-name {
169+
font-size: 13px;
170+
font-weight: 600;
171+
color: #1c1c1e;
172+
letter-spacing: -0.1px;
173+
line-height: 1.2;
174+
}
175+
176+
.github-card-app-sub {
177+
font-size: 11px;
178+
color: #aeaeb2;
179+
line-height: 1.3;
180+
}
181+
182+
/* 分隔线 */
183+
.github-card-divider {
184+
height: 1px;
185+
background: rgba(0, 0, 0, 0.07);
186+
margin: 0 4px 4px;
187+
}
188+
189+
/* 链接行 */
190+
.github-card-link {
191+
display: flex;
192+
align-items: center;
193+
gap: 9px;
194+
padding: 6px 8px;
195+
border-radius: 6px;
196+
text-decoration: none;
197+
color: #1c1c1e;
198+
font-size: 13px;
199+
font-weight: 400;
200+
transition: background 0.12s;
201+
margin: 0 4px;
202+
}
203+
204+
.github-card-link:hover {
205+
background: rgba(0, 122, 255, 0.08);
206+
}
207+
208+
/* 彩色图标色块 */
209+
.github-card-link-icon {
210+
width: 24px;
211+
height: 24px;
212+
border-radius: 6px;
213+
display: flex;
214+
align-items: center;
215+
justify-content: center;
216+
flex-shrink: 0;
217+
}
218+
219+
.github-card-link-icon svg {
220+
width: 13px;
221+
height: 13px;
222+
}
223+
224+
.github-card-link-icon--green {
225+
background: linear-gradient(145deg, #28a745, #34d058);
226+
color: #fff;
227+
}
228+
229+
.github-card-link-icon--blue {
230+
background: linear-gradient(145deg, #0a84ff, #409eff);
231+
color: #fff;
232+
}
233+
234+
.github-card-link-label {
235+
flex: 1;
236+
color: inherit;
237+
}
238+
239+
.github-card-link:hover .github-card-link-label {
240+
color: #007AFF;
241+
}
242+
243+
.github-card-link-arrow {
244+
width: 11px;
245+
height: 11px;
246+
opacity: 0.25;
247+
flex-shrink: 0;
248+
transition: opacity 0.12s, transform 0.12s;
249+
}
250+
251+
.github-card-link:hover .github-card-link-arrow {
252+
opacity: 0.6;
253+
transform: translateX(2px);
254+
}
255+
</style>

‎frontend/src/views/QuickConnect.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,9 @@
114114
<p class="empty-desc">连接后自动保存到列表</p>
115115
</div>
116116

117+
<!-- GitHub 弹出卡片 -->
118+
<GithubCard />
119+
117120
</aside>
118121

119122
<!-- 右侧：连接表单 -->
@@ -313,6 +316,7 @@ import { useTerminalStore } from '@/stores/terminal'
313316
import { useThemeStore } from '@/stores/theme'
314317
import CryptoJS from 'crypto-js'
315318
import WebdavSync from '@/components/WebdavSync.vue'
319+
import GithubCard from '@/components/GithubCard.vue'
316320
317321
const HISTORY_KEY = 'webssh_quick_connect_history'
318322

0 commit comments

Comments
 (0)