alai-dev/trade-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: aggressive PC workspace UX redesign (consolidated workspaces, CommandK)

Browse Source 
Reduce sidebar from 4-level clutter to 5 clean items. Add global CommandK palette (Ctrl+K). Merge customers/discovery/followup into WorkspaceCustomer. Merge translate/products/quotations/marketing into WorkspaceBiz. Simplify NewHome to dashboard. Redirect old routes.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
TradeMate Dev
2026-06-21 23:08:00 +08:00
parent cb8faed80f
commit 417e79c64d
6 changed files with 733 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user-frontend/src/layouts/UserLayout.vue
+101 -62
View File
@@ -5,9 +5,14 @@
<aside class="sidebar" :class="{ collapsed, 'mobile-show': showMobileMenu }">
<div class="sidebar-header">
<router-link to="/workspace" class="logo">{{ collapsed ? 'TM' : 'TradeMate' }}</router-link>
<el-button v-if="showMobileMenu" text style="color:#999;font-size:20px;margin-left:auto" @click="showMobileMenu = false">
<el-icon><Close /></el-icon>
</el-button>
<div class="sidebar-header-actions">
<el-button text class="collapse-btn dt-only" @click="collapsed = !collapsed">
<el-icon><Fold v-if="!collapsed" /><Expand v-else /></el-icon>
</el-button>
<el-button v-if="showMobileMenu" text class="collapse-btn" @click="showMobileMenu = false">
<el-icon><Close /></el-icon>
</el-button>
</div>
</div>
<el-menu
:default-active="route.path"
@@ -16,24 +21,16 @@
:collapse-transition="false"
@select="showMobileMenu = false"
>
<el-menu-item index="/workspace"><el-icon><Odometer /></el-icon><span>{{ $t('nav.home') || '首页工作台' }}</span></el-menu-item>
<el-menu-item index="/workspace"><el-icon><Odometer /></el-icon><span>{{ $t('nav.home') }}</span></el-menu-item>
<el-menu-item index="/workspace/customers"><el-icon><User /></el-icon><span>{{ $t('nav.customers') }}</span></el-menu-item>
<el-sub-menu index="products-quotations">
<template #title>
<el-icon><Goods /></el-icon>
<span>{{ $t('nav.productsQuotations') || '报价产品' }}</span>
</template>
<el-menu-item index="/workspace/products"><el-icon><Goods /></el-icon><span>{{ $t('nav.products') }}</span></el-menu-item>
<el-menu-item index="/workspace/quotations"><el-icon><DocumentCopy /></el-icon><span>{{ $t('nav.quotations') }}</span></el-menu-item>
</el-sub-menu>
<el-menu-item index="/workspace/translate"><el-icon><ChatLineSquare /></el-icon><span>{{ $t('nav.translate') }}</span></el-menu-item>
<el-menu-item index="/workspace/biz"><el-icon><Goods /></el-icon><span>{{ $t('nav.biz') }}</span></el-menu-item>
<el-menu-item index="/workspace/analytics"><el-icon><DataAnalysis /></el-icon><span>{{ $t('nav.analytics') }}</span></el-menu-item>
<el-sub-menu index="more">
<template #title>
<el-icon><Menu /></el-icon>
<span>{{ $t('nav.more') || '更多' }}</span>
</template>
<el-menu-item index="/workspace/profile"><el-icon><User /></el-icon><span>{{ $t('nav.profile') }}</span></el-menu-item>
<el-menu-item index="/workspace/analytics"><el-icon><DataAnalysis /></el-icon><span>{{ $t('nav.analytics') }}</span></el-menu-item>
<el-menu-item index="/workspace/team"><el-icon><UserFilled /></el-icon><span>{{ $t('nav.team') }}</span></el-menu-item>
</el-sub-menu>
</el-menu>
@@ -62,7 +59,7 @@
<el-dropdown trigger="click">
<el-button text style="display:flex;align-items:center;gap:6px">
<el-icon><User /></el-icon>
<span class="user-name">{{ auth.user?.username || '用户' }}</span>
<span class="user-name">{{ displayName }}</span>
<el-icon><ArrowDown /></el-icon>
</el-button>
<template #dropdown>
@@ -80,41 +77,44 @@
<router-view />
</main>
<footer class="footer">
<div class="footer-content">
<p>&copy; {{ new Date().getFullYear() }} TradeMate</p>
<div class="footer-links">
<a href="http://beian.miit.gov.cn/" target="_blank">{{ beianInfo.icp }}</a>
<a v-if="beianInfo.showGongan" :href="beianInfo.gonganLink" target="_blank" rel="noreferrer" class="gongan-link">
<img src="/images/beian/gongan-beian.png" alt="公安备案" class="gongan-icon" />
{{ beianInfo.gongan }}
</a>
</div>
</div>
</footer>
</div>
<AiAssistant />
<CommandK />
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '@/stores/auth'
import { getUnreadCount, getCreditBalance } from '@/api'
import AiAssistant from '@/components/AiAssistant.vue'
import CommandK from '@/components/CommandK.vue'
import { switchLang } from '@/i18n'
const route = useRoute()
const router = useRouter()
const { locale } = useI18n()
const auth = useAuthStore()
const collapsed = ref(false)
const collapsed = ref(window.innerWidth < 1024)
const showMobileMenu = ref(false)
const unread = ref(0)
const creditBalance = ref(null)
function handleResize() {
const w = window.innerWidth
collapsed.value = w < 1024
if (w >= 768) showMobileMenu.value = false
}
onMounted(() => window.addEventListener('resize', handleResize))
onUnmounted(() => window.removeEventListener('resize', handleResize))
const displayName = computed(() => {
const u = auth.user
if (u && typeof u === 'object' && typeof u.username === 'string') return u.username
return '用户'
})
const currentLang = computed(() => locale.value === 'en' ? 'English' : '中文')
function toggleLang() {
const next = locale.value === 'en' ? 'zh-CN' : 'en'
@@ -136,17 +136,6 @@ onMounted(async () => {
loadCreditBalance()
})
const beianInfo = computed(() => {
const hostname = window.location.hostname
if (hostname === 'yuzhiran.com' || hostname === 'www.yuzhiran.com') {
return { icp: '京ICP备2026007249号-1', gongan: '京公网安备11011502039545号', gonganLink: 'https://beian.mps.gov.cn/#/query/webSearch?code=11011502039545', showGongan: true }
}
if (hostname === 'yuzhiran.com.cn' || hostname === 'www.yuzhiran.com.cn') {
return { icp: '京ICP备2026007249号-2', gongan: '京公网安备11011502039622号', gonganLink: 'https://beian.mps.gov.cn/#/query/webSearch?code=11011502039622', showGongan: true }
}
return { icp: '京ICP备2026007249号-1', gongan: '京公网安备11011502039545号', gonganLink: 'https://beian.mps.gov.cn/#/query/webSearch?code=11011502039545', showGongan: true }
})
function handleLogout() {
auth.logout()
router.push('/')
@@ -154,40 +143,90 @@ function handleLogout() {
</script>
<style scoped>
/* ===== Base Layout ===== */
.user-layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar-mask { display: none; }
.sidebar { width: 220px; background: #fff; border-right: 1px solid #e8e8e8; transition: width 0.25s; flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar.collapsed { width: 64px; }
.sidebar-header { height: 60px; display: flex; align-items: center; padding: 0 16px; color: #1890ff; font-size: 18px; font-weight: 700; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.sidebar :deep(.el-menu) { border-right: none; flex: 1; }
.sidebar :deep(.el-menu-item) { margin: 2px 8px; border-radius: 8px; }
.sidebar :deep(.el-menu-item.is-active) { background: #e6f7ff; color: #1890ff !important; font-weight: 500; }
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 60px; background: #fff; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; gap: 12px; }
.content { flex: 1; padding: 24px; overflow-y: auto; background: #f5f5f5; }
/* ===== Sidebar ===== */
.sidebar {
width: 220px; background: #fff; border-right: 1px solid #e8e8e8;
transition: width 0.25s; flex-shrink: 0; display: flex; flex-direction: column;
position: relative; z-index: 100;
}
.sidebar.collapsed { width: 64px; }
.sidebar-header {
height: 60px; display: flex; align-items: center; padding: 0 12px;
color: #1890ff; font-size: 18px; font-weight: 700; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
gap: 8px;
}
.sidebar-header .logo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-header-actions { display: flex; flex-shrink: 0; }
.collapse-btn { font-size: 18px; color: #999; }
.dt-only { display: none; }
.sidebar :deep(.el-menu) { border-right: none; flex: 1; }
.sidebar :deep(.el-menu-item) { margin: 2px 8px; border-radius: 8px; white-space: nowrap; }
.sidebar :deep(.el-menu-item.is-active) { background: #e6f7ff; color: #1890ff !important; font-weight: 500; }
/* ===== Topbar ===== */
.topbar {
height: 60px; background: #fff; border-bottom: 1px solid #e8e8e8;
display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; gap: 12px;
}
.menu-btn { display: none; font-size: 20px; }
.breadcrumb { flex: 1; min-width: 0; }
.breadcrumb { flex: 1; min-width: 0; overflow: hidden; }
.breadcrumb :deep(.el-breadcrumb__inner) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; display: inline-block; vertical-align: middle; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.notif-badge :deep(.el-badge__content) { top: 8px; right: 4px; }
.content { flex: 1; padding: 24px; overflow-y: auto; background: #f5f5f5; }
.footer { text-align: center; color: #999; font-size: 12px; border-top: 1px solid #e8e8e8; background: #fff; flex-shrink: 0; padding: 8px 24px; }
.footer-content { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 14px; align-items: center; }
.footer-links a { color: #999; text-decoration: none; }
.footer-links a:hover { color: #1890ff; }
.gongan-link { display: inline-flex; align-items: center; gap: 4px; }
.gongan-icon { height: 14px; vertical-align: middle; }
.credit-btn { display: flex; align-items: center; gap: 4px; color: #e6a23c !important; font-weight: 600; }
.credit-text { font-size: 13px; }
/* ===== Desktop: > 1024px ===== */
@media (min-width: 1025px) {
.dt-only { display: inline-flex; }
.sidebar-header { padding: 0 16px; }
.sidebar.collapsed .sidebar-header { justify-content: center; }
.sidebar.collapsed .sidebar-header .logo { font-size: 16px; text-align: center; }
}
/* ===== Tablet: 769-1024px ===== */
@media (min-width: 769px) and (max-width: 1024px) {
.sidebar { width: 64px; }
.sidebar-header { padding: 0; justify-content: center; }
.sidebar-header .logo { font-size: 16px; flex: none; }
.sidebar-header-actions .dt-only { display: none; }
.menu-btn { display: inline-flex; }
.content { padding: 20px; }
}
/* ===== Mobile: < 769px ===== */
@media (max-width: 768px) {
.sidebar { position: fixed; left: -220px; top: 0; bottom: 0; z-index: 1000; transition: left 0.3s; }
.sidebar.mobile-show { left: 0; }
.sidebar {
position: fixed; left: -220px; top: 0; bottom: 0; z-index: 1000;
transition: left 0.3s; width: 220px;
}
.sidebar.collapsed { width: 220px; }
.sidebar.mobile-show { left: 0; }
.sidebar.collapsed.mobile-show { left: 0; }
.sidebar-mask { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.sidebar-header { padding: 0 16px; }
.sidebar-header .logo { font-size: 18px; flex: 1; }
.sidebar-header-actions .dt-only { display: none; }
.sidebar-mask {
display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.3);
z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.sidebar-mask:has(+ .sidebar.mobile-show) { opacity: 1; pointer-events: auto; }
.menu-btn { display: inline-flex; }
.user-name { display: none; }
.content { padding: 16px; }
.breadcrumb :deep(.el-breadcrumb__inner) { max-width: 80px; }
}
/* ===== Tiny: < 480px ===== */
@media (max-width: 480px) {
.topbar-right { gap: 4px; }
.credit-text { display: none; }
.content { padding: 12px; }
.breadcrumb :deep(.el-breadcrumb__inner) { max-width: 60px; }
}
</style>