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

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>
2026-06-21 23:08:00 +08:00
parent cb8faed80f
commit 417e79c64d
6 changed files with 733 additions and 639 deletions
@@ -0,0 +1,72 @@
+<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>