This commit is contained in:
aaron 2026-03-23 00:21:57 +08:00
parent 64d4e5acdb
commit d246486068
8 changed files with 47 additions and 30 deletions

View File

@ -455,7 +455,7 @@
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;

View File

@ -32,6 +32,7 @@ html, body {
#app {
height: 100vh;
height: 100dvh; /* iOS Safari 动态视口高度 */
display: flex;
align-items: center;
justify-content: center;
@ -43,7 +44,7 @@ html, body {
width: 100%;
max-width: 900px;
height: 100%;
max-height: 900px;
max-height: min(900px, calc(100vh - 40px));
display: flex;
flex-direction: column;
background: var(--bg-secondary);
@ -157,10 +158,10 @@ html, body {
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
animation: pulse 2s ease-in-out infinite;
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes pulse {
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@ -185,7 +186,7 @@ html, body {
.welcome-icon {
margin-bottom: 20px;
opacity: 0.3;
opacity: 0.6;
}
.welcome-icon svg {
@ -224,7 +225,7 @@ html, body {
padding: 10px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
border-radius: 4px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
@ -427,7 +428,7 @@ html, body {
padding: 16px 20px;
background: rgba(0, 255, 65, 0.05);
border: 1px solid rgba(0, 255, 65, 0.2);
border-radius: 6px;
border-radius: 4px;
}
.share-image-question-label {
@ -670,7 +671,7 @@ html, body {
cursor: pointer;
transition: all 0.2s;
padding: 4px 8px;
border-radius: 4px;
border-radius: 2px;
}
.contact-link:hover {
@ -759,6 +760,8 @@ html, body {
@media (max-width: 768px) {
#app {
padding: 0;
height: 100vh;
height: 100dvh;
}
.container {
@ -820,10 +823,10 @@ html, body {
justify-content: center;
z-index: 10000;
padding: 20px;
animation: fadeIn 0.2s ease;
animation: modalFadeIn 0.2s ease;
}
@keyframes fadeIn {
@keyframes modalFadeIn {
from {
opacity: 0;
}
@ -896,14 +899,14 @@ html, body {
justify-content: center;
z-index: 10000;
padding: 20px;
animation: fadeIn 0.2s ease;
animation: modalFadeIn 0.2s ease;
}
.contact-modal-content {
position: relative;
background: var(--bg-primary);
border: 1px solid var(--border-bright);
border-radius: 8px;
border-radius: 4px;
padding: 32px;
max-width: 400px;
width: 100%;
@ -918,7 +921,7 @@ html, body {
height: 32px;
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
border-radius: 2px;
color: var(--text-secondary);
cursor: pointer;
display: flex;
@ -955,7 +958,7 @@ html, body {
padding: 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 6px;
border-radius: 4px;
color: var(--text-secondary);
font-size: 14px;
}
@ -976,7 +979,7 @@ html, body {
padding: 12px;
background: var(--accent-dim);
border: 1px solid var(--accent);
border-radius: 6px;
border-radius: 4px;
color: var(--accent);
font-size: 14px;
font-weight: 500;

View File

@ -38,7 +38,7 @@
<span class="model-name">{{ currentModel.name }}</span>
</div>
<!-- Logout Button -->
<button class="logout-btn" @click="logout" title="登出">
<button class="logout-btn" @click="logout" title="登出" aria-label="登出">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
@ -87,14 +87,14 @@
<!-- Action Buttons for AI Messages (只在流式输出完成后显示) -->
<div v-if="!msg.streaming" class="message-actions">
<button class="action-btn" @click.stop="copyMessage(msg.content)" title="复制内容">
<button class="action-btn" @click.stop="copyMessage(msg.content)" title="复制内容" aria-label="复制内容">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
</svg>
<span>复制</span>
</button>
<button class="action-btn" @click.stop="generateShareImage(msg.content, index)" title="生成分享图">
<button class="action-btn" @click.stop="generateShareImage(msg.content, index)" title="生成分享图" aria-label="生成分享图">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<circle cx="8.5" cy="8.5" r="1.5"/>
@ -153,9 +153,9 @@
</div>
<!-- Image Modal -->
<div v-if="showImageModal" class="image-modal" @click="closeImageModal">
<div v-if="showImageModal" class="image-modal" @click="closeImageModal" role="dialog" aria-modal="true" aria-label="分享图预览">
<div class="image-modal-content" @click.stop>
<button class="modal-close-btn" @click="closeImageModal" title="关闭">
<button class="modal-close-btn" @click="closeImageModal" title="关闭" aria-label="关闭分享图">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
@ -167,9 +167,9 @@
</div>
<!-- Contact Modal -->
<div v-if="showContactModal" class="contact-modal" @click="showContactModal = false">
<div v-if="showContactModal" class="contact-modal" @click="showContactModal = false" role="dialog" aria-modal="true" aria-label="联系作者">
<div class="contact-modal-content" @click.stop>
<button class="modal-close-btn" @click="showContactModal = false" title="关闭">
<button class="modal-close-btn" @click="showContactModal = false" title="关闭" aria-label="关闭联系方式">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
@ -197,10 +197,10 @@
</div>
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<!-- Lightweight Charts -->
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<!-- html2canvas for generating share images -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

View File

@ -25,6 +25,13 @@ createApp({
this.sessionId = this.generateSessionId();
this.autoResizeTextarea();
this.loadModels();
// 键盘 Escape 关闭模态框
document.addEventListener('keydown', this.handleKeydown);
},
beforeUnmount() {
document.removeEventListener('keydown', this.handleKeydown);
},
methods: {
checkAuth() {
@ -40,6 +47,13 @@ createApp({
}
},
handleKeydown(e) {
if (e.key === 'Escape') {
if (this.showImageModal) this.closeImageModal();
else if (this.showContactModal) this.showContactModal = false;
}
},
logout() {
localStorage.removeItem('token');
window.location.href = '/static/login.html';

View File

@ -221,7 +221,7 @@
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;

View File

@ -633,8 +633,8 @@
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
console.log('[DEBUG] Vue global:', typeof Vue);
console.log('[DEBUG] Vue.createApp:', typeof Vue?.createApp);

View File

@ -657,7 +657,7 @@
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;

View File

@ -1689,8 +1689,8 @@
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>