TradeMate Dev
417e79c64d
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>
73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<template>
|
|
<div class="wc">
|
|
<div class="wc-header">
|
|
<h2>{{ $t('nav.customers') }}</h2>
|
|
<el-button-group class="wc-tabs">
|
|
<el-button
|
|
v-for="tab in tabs" :key="tab.key"
|
|
:type="activeTab === tab.key ? 'primary' : 'default'"
|
|
size="small"
|
|
@click="activeTab = tab.key"
|
|
>
|
|
<el-icon :size="14"><component :is="tab.icon" /></el-icon>
|
|
{{ tab.label }}
|
|
</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
|
|
<!-- Tab: Customer List -->
|
|
<div v-show="activeTab === 'list'" class="wc-panel">
|
|
<Customers ref="customersRef" />
|
|
</div>
|
|
|
|
<!-- Tab: Discovery -->
|
|
<div v-show="activeTab === 'discovery'" class="wc-panel">
|
|
<Discovery ref="discoveryRef" />
|
|
</div>
|
|
|
|
<!-- Tab: Followups -->
|
|
<div v-show="activeTab === 'followup'" class="wc-panel">
|
|
<Followup ref="followupRef" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import Customers from '@/views/Customers.vue'
|
|
import Discovery from '@/views/Discovery.vue'
|
|
import Followup from '@/views/Followup.vue'
|
|
|
|
const { t } = useI18n()
|
|
const activeTab = ref('list')
|
|
|
|
const tabs = [
|
|
{ key: 'list', label: t('nav.customerList'), icon: 'User' },
|
|
{ key: 'discovery', label: t('nav.discovery'), icon: 'Search' },
|
|
{ key: 'followup', label: t('nav.followup'), icon: 'AlarmClock' },
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wc { height: 100%; display: flex; flex-direction: column; }
|
|
.wc-header {
|
|
display: flex; align-items: center; gap: 12px;
|
|
margin-bottom: 16px; flex-shrink: 0; flex-wrap: wrap;
|
|
}
|
|
.wc-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: #303133; white-space: nowrap; }
|
|
.wc-panel { flex: 1; min-height: 0; }
|
|
|
|
/* Tabs: scrollable on narrow screens, wrap on tablets */
|
|
.wc-tabs { flex-wrap: wrap; }
|
|
|
|
@media (max-width: 768px) {
|
|
.wc-header { flex-direction: column; align-items: stretch; gap: 8px; }
|
|
.wc-header h2 { font-size: 16px; }
|
|
.wc-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; }
|
|
.wc-tabs::-webkit-scrollbar { display: none; }
|
|
.wc-tabs .el-button { flex-shrink: 0; }
|
|
.wc-panel { margin: 0 -12px; /* span full bleed on mobile */ }
|
|
}
|
|
</style>
|