mirror of
https://gitee.com/mateos/mateclaw.git
synced 2026-09-13 03:13:41 +08:00
feat(ui): add mobile responsive layout and fix hardcoded i18n strings
This commit is contained in:
matevip
parent
732bb13f47
commit
30f42ca770
@ -45,9 +45,9 @@
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="approval-bar__label">允许</span>
|
||||
<span class="approval-bar__label">{{ t('chat.approvalAllow') }}</span>
|
||||
<span class="approval-bar__tool">{{ pendingApproval.toolName }}</span>
|
||||
<span class="approval-bar__label">执行？</span>
|
||||
<span class="approval-bar__label">{{ t('chat.approvalExecute') }}</span>
|
||||
</div>
|
||||
<div class="approval-bar__actions">
|
||||
<button
|
||||
@ -58,7 +58,7 @@
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
拒绝
|
||||
{{ t('chat.deny') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@ -68,7 +68,7 @@
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
允许
|
||||
{{ t('chat.approve') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -729,4 +729,34 @@ defineExpose({
|
||||
.send-btn.is-interrupt:hover:not(:disabled) {
|
||||
background: #d97706;
|
||||
}
|
||||
|
||||
/* ===== 移动端适配 ===== */
|
||||
@media (max-width: 768px) {
|
||||
.chat-input-wrapper {
|
||||
padding: 10px 12px 14px;
|
||||
}
|
||||
|
||||
.approval-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.approval-bar__info {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.approval-bar__actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.approval-bar__tool {
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.attachment-chip__label span:first-child {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1560,4 +1560,26 @@ watch(isGenerating, (generating) => {
|
||||
font-weight: 600;
|
||||
color: var(--mc-text-primary, #1e293b);
|
||||
}
|
||||
|
||||
/* ===== 移动端适配 ===== */
|
||||
@media (max-width: 768px) {
|
||||
.message-wrapper {
|
||||
max-width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.msg-body {
|
||||
max-width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.msg-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.error-card {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -185,6 +185,8 @@ watch(
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welcome-logo {
|
||||
@ -272,9 +274,10 @@ watch(
|
||||
.suggestion-card__text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.suggestion-card__arrow {
|
||||
@ -334,4 +337,46 @@ watch(
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ===== 移动端适配 ===== */
|
||||
@media (max-width: 768px) {
|
||||
.message-list {
|
||||
padding: 16px 12px 12px;
|
||||
}
|
||||
|
||||
.message-list-content {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.welcome-screen {
|
||||
padding: 24px 12px;
|
||||
}
|
||||
|
||||
.welcome-logo__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.welcome-suggestions {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.suggestion-card {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -145,6 +145,13 @@ export default {
|
||||
streamReconnecting: 'Reconnecting...',
|
||||
streamStopped: 'Stopped',
|
||||
streamCompleted: 'Completed',
|
||||
// Approval bar
|
||||
approvalAllow: 'Allow',
|
||||
approvalExecute: 'to execute?',
|
||||
// Time format
|
||||
timeJustNow: 'Just now',
|
||||
timeMinutesAgo: '{n}m ago',
|
||||
timeHoursAgo: '{n}h ago',
|
||||
},
|
||||
nav: {
|
||||
chat: 'Chat',
|
||||
|
||||
@ -145,6 +145,13 @@ export default {
|
||||
streamReconnecting: '重新连接...',
|
||||
streamStopped: '已停止',
|
||||
streamCompleted: '已完成',
|
||||
// 审批栏
|
||||
approvalAllow: '允许',
|
||||
approvalExecute: '执行？',
|
||||
// 时间格式
|
||||
timeJustNow: '刚刚',
|
||||
timeMinutesAgo: '{n} 分钟前',
|
||||
timeHoursAgo: '{n} 小时前',
|
||||
},
|
||||
nav: {
|
||||
chat: '对话',
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="chat-layout">
|
||||
<!-- 移动端会话面板遮罩 -->
|
||||
<Transition name="fade">
|
||||
<div v-if="isMobile && convPanelOpen" class="conv-backdrop" @click="convPanelOpen = false"></div>
|
||||
</Transition>
|
||||
|
||||
<!-- 会话侧边栏 -->
|
||||
<div class="conversation-panel">
|
||||
<div class="conversation-panel" :class="{ 'mobile-open': convPanelOpen }">
|
||||
<div class="panel-header">
|
||||
<h2 class="panel-title">{{ $t('chat.conversations') }}</h2>
|
||||
<button class="new-chat-btn" @click="newConversation" :title="$t('chat.newChat')">
|
||||
@ -82,7 +87,12 @@
|
||||
<!-- 头部 -->
|
||||
<div class="chat-header">
|
||||
<div class="chat-header-left">
|
||||
<div class="agent-badge" v-if="currentAgent">
|
||||
<button v-if="isMobile" class="conv-toggle-btn" @click="convPanelOpen = !convPanelOpen" :title="$t('chat.conversations')">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="agent-badge" v-if="currentAgent" :title="currentAgent.name">
|
||||
<span class="agent-badge-icon">{{ currentAgent.icon || '🤖' }}</span>
|
||||
<span class="agent-badge-name">{{ currentAgent.name }}</span>
|
||||
<span class="agent-badge-type">{{ currentAgent.agentType === 'react' ? 'ReAct' : 'Plan-Execute' }}</span>
|
||||
@ -196,6 +206,16 @@ import MessageList from '@/components/chat/MessageList.vue'
|
||||
import ChatInput from '@/components/chat/ChatInput.vue'
|
||||
import StreamLoadingBar from '@/components/chat/StreamLoadingBar.vue'
|
||||
|
||||
// ============ 移动端状态 ============
|
||||
const isMobile = ref(false)
|
||||
const convPanelOpen = ref(false)
|
||||
let mobileQuery: MediaQueryList | null = null
|
||||
|
||||
function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
|
||||
isMobile.value = e.matches
|
||||
if (!e.matches) convPanelOpen.value = false
|
||||
}
|
||||
|
||||
// ============ 配置和常量 ============
|
||||
const suggestions = computed(() => [
|
||||
t('chat.suggestionIntro'),
|
||||
@ -443,12 +463,16 @@ const eligibleModels = computed(() => {
|
||||
// ============ 生命周期 ============
|
||||
onMounted(async () => {
|
||||
document.addEventListener('click', handleCodeCopy)
|
||||
mobileQuery = window.matchMedia('(max-width: 768px)')
|
||||
handleMobileChange(mobileQuery)
|
||||
mobileQuery.addEventListener('change', handleMobileChange)
|
||||
await Promise.all([loadAgents(), loadModelState(), loadConversations()])
|
||||
await hydrateStateFromRoute()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleCodeCopy)
|
||||
mobileQuery?.removeEventListener('change', handleMobileChange)
|
||||
stopChatGeneration()
|
||||
})
|
||||
|
||||
@ -567,6 +591,7 @@ function syncRouteState() {
|
||||
}
|
||||
|
||||
async function selectConversation(conv: Conversation) {
|
||||
if (isMobile.value) convPanelOpen.value = false
|
||||
resetStreamingState()
|
||||
currentConversationId.value = conv.conversationId
|
||||
selectedAgentId.value = conv.agentId || selectedAgentId.value
|
||||
@ -1008,12 +1033,12 @@ function parseThinkingContent(raw: string): { content: string; thinking: string;
|
||||
}
|
||||
|
||||
function formatConversationTime(time?: string) {
|
||||
if (!time) return 'just now'
|
||||
if (!time) return t('chat.timeJustNow')
|
||||
const date = new Date(time)
|
||||
const diff = Date.now() - date.getTime()
|
||||
if (diff < 60 * 60 * 1000) return `${Math.max(1, Math.floor(diff / (60 * 1000)))}m ago`
|
||||
if (diff < 24 * 60 * 60 * 1000) return `${Math.floor(diff / (60 * 60 * 1000))}h ago`
|
||||
return date.toLocaleDateString('zh-CN')
|
||||
if (diff < 60 * 60 * 1000) return t('chat.timeMinutesAgo', { n: Math.max(1, Math.floor(diff / (60 * 1000))) })
|
||||
if (diff < 24 * 60 * 60 * 1000) return t('chat.timeHoursAgo', { n: Math.floor(diff / (60 * 60 * 1000)) })
|
||||
return date.toLocaleDateString()
|
||||
}
|
||||
|
||||
function handleCodeCopy(e: MouseEvent) {
|
||||
@ -1379,4 +1404,94 @@ function handleCodeCopy(e: MouseEvent) {
|
||||
.btn-primary:hover {
|
||||
background: var(--mc-primary-hover);
|
||||
}
|
||||
|
||||
/* ===== 移动端元素（桌面端隐藏） ===== */
|
||||
.conv-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conv-toggle-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===== 移动端适配 ===== */
|
||||
@media (max-width: 768px) {
|
||||
.conversation-panel {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.conversation-panel.mobile-open {
|
||||
transform: translateX(0);
|
||||
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.conv-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.conv-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--mc-border);
|
||||
background: var(--mc-bg-elevated);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--mc-text-secondary);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.conv-toggle-btn:hover {
|
||||
border-color: var(--mc-primary);
|
||||
color: var(--mc-primary);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 10px 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chat-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.agent-badge {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.agent-badge-name,
|
||||
.agent-badge-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.model-select {
|
||||
min-width: 0;
|
||||
max-width: 160px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.drop-overlay__content {
|
||||
padding: 24px 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ t('sessions.columns.session') }}</th>
|
||||
<th>{{ t('sessions.columns.source') || '来源' }}</th>
|
||||
<th>{{ t('sessions.columns.source') }}</th>
|
||||
<th>{{ t('sessions.columns.agent') }}</th>
|
||||
<th>{{ t('sessions.columns.messages') }}</th>
|
||||
<th>{{ t('sessions.columns.status') }}</th>
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="app-layout">
|
||||
<!-- 移动端背景遮罩 -->
|
||||
<Transition name="fade">
|
||||
<div v-if="isMobile && mobileMenuOpen" class="sidebar-backdrop" @click="mobileMenuOpen = false"></div>
|
||||
</Transition>
|
||||
|
||||
<!-- 左侧导航栏 -->
|
||||
<aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
|
||||
<aside class="sidebar" :class="{ collapsed: sidebarCollapsed && !isMobile, 'mobile-open': mobileMenuOpen }">
|
||||
<!-- Logo -->
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon">
|
||||
@ -40,6 +45,7 @@
|
||||
class="nav-item"
|
||||
:class="{ active: isNavItemActive(item) }"
|
||||
:title="sidebarCollapsed ? item.label : ''"
|
||||
@click="onNavClick"
|
||||
>
|
||||
<span class="nav-icon" v-html="item.icon"></span>
|
||||
<span v-if="!sidebarCollapsed" class="nav-label">{{ item.label }}</span>
|
||||
@ -85,13 +91,24 @@
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main-content">
|
||||
<!-- 移动端顶部栏 -->
|
||||
<div v-if="isMobile" class="mobile-topbar">
|
||||
<button class="mobile-menu-btn" @click="mobileMenuOpen = true" :title="t('common.expandSidebar')">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||||
<line x1="3" y1="12" x2="21" y2="12"/>
|
||||
<line x1="3" y1="18" x2="21" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="mobile-topbar-title">Mate<span class="logo-name-highlight">Claw</span></span>
|
||||
</div>
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useThemeStore } from '@/stores/useThemeStore'
|
||||
@ -103,6 +120,30 @@ const { t } = useI18n()
|
||||
const themeStore = useThemeStore()
|
||||
const sidebarCollapsed = ref(localStorage.getItem('mc-sidebar-collapsed') === 'true')
|
||||
|
||||
// 移动端状态
|
||||
const isMobile = ref(false)
|
||||
const mobileMenuOpen = ref(false)
|
||||
let mobileQuery: MediaQueryList | null = null
|
||||
|
||||
function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
|
||||
isMobile.value = e.matches
|
||||
if (!e.matches) mobileMenuOpen.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
mobileQuery = window.matchMedia('(max-width: 768px)')
|
||||
handleMobileChange(mobileQuery)
|
||||
mobileQuery.addEventListener('change', handleMobileChange)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
mobileQuery?.removeEventListener('change', handleMobileChange)
|
||||
})
|
||||
|
||||
function onNavClick() {
|
||||
if (isMobile.value) mobileMenuOpen.value = false
|
||||
}
|
||||
|
||||
const username = computed(() => localStorage.getItem('username') || 'User')
|
||||
const role = computed(() => localStorage.getItem('role') || 'user')
|
||||
const userInitial = computed(() => username.value.charAt(0).toUpperCase())
|
||||
@ -527,9 +568,90 @@ function logout() {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ===== 移动端元素（桌面端隐藏） ===== */
|
||||
.sidebar-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active { transition: opacity 0.15s ease; }
|
||||
.fade-enter-from,
|
||||
.fade-leave-to { opacity: 0; }
|
||||
|
||||
/* ===== 移动端适配 ===== */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width: 260px;
|
||||
min-width: 260px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sidebar.mobile-open {
|
||||
transform: translateX(0);
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 260px;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: var(--mc-sidebar-bg);
|
||||
border-bottom: 1px solid var(--mc-border-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-topbar-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--mc-text-primary);
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid var(--mc-border);
|
||||
background: var(--mc-bg-elevated);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--mc-text-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-btn:hover {
|
||||
background: var(--mc-bg-sunken);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user