From b002db65f18dfd090f7619943e761bc941dba605 Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Sat, 11 Apr 2026 01:21:50 +0800
Subject: [PATCH] fix(ui): replace sidebar footer icons with Element Plus, fix
 collapsed workspace dropdown

---
 .../workspace/WorkspaceSwitcher.vue           | 101 +++++++++++-------
 mateclaw-ui/src/views/layout/MainLayout.vue   |  62 +----------
 2 files changed, 69 insertions(+), 94 deletions(-)

diff --git a/mateclaw-ui/src/components/workspace/WorkspaceSwitcher.vue b/mateclaw-ui/src/components/workspace/WorkspaceSwitcher.vue
index c0eced9c..e0bc3c01 100644
--- a/mateclaw-ui/src/components/workspace/WorkspaceSwitcher.vue
+++ b/mateclaw-ui/src/components/workspace/WorkspaceSwitcher.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="workspace-switcher" :class="{ collapsed }">
     <button
+      ref="triggerRef"
       class="ws-trigger"
       :title="collapsed ? currentLabel : ''"
-      @click="open = !open"
+      @click="toggleOpen"
     >
       <span class="ws-trigger__icon">
         <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -17,11 +18,12 @@
       </template>
     </button>
 
-    <Transition name="fade">
-      <div v-if="open" class="ws-backdrop" @click="open = false"></div>
-    </Transition>
-    <Transition name="ws-dropdown">
-      <div v-if="open" class="ws-dropdown">
+    <Teleport to="body">
+      <Transition name="fade">
+        <div v-if="open" class="ws-backdrop" @click="open = false"></div>
+      </Transition>
+      <Transition name="ws-dropdown">
+        <div v-if="open" class="ws-dropdown" :class="{ 'ws-dropdown--collapsed': collapsed }" :style="dropdownStyle">
         <div
           v-for="ws in workspaces"
           :key="ws.id"
@@ -45,16 +47,17 @@
         </div>
       </div>
     </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useWorkspaceStore } from '@/stores/useWorkspaceStore'
 
-defineProps<{
+const props = defineProps<{
   collapsed?: boolean
 }>()
 
@@ -62,6 +65,40 @@ const { t } = useI18n()
 const store = useWorkspaceStore()
 const router = useRouter()
 const open = ref(false)
+const triggerRef = ref<HTMLElement | null>(null)
+const dropdownPos = ref({ top: 0, left: 0 })
+
+const dropdownStyle = computed(() => {
+  return {
+    position: 'fixed' as const,
+    top: `${dropdownPos.value.top}px`,
+    left: `${dropdownPos.value.left}px`,
+    right: 'auto',
+    width: props.collapsed ? '200px' : '212px',
+  }
+})
+
+function toggleOpen() {
+  open.value = !open.value
+  if (open.value && triggerRef.value) {
+    nextTick(() => {
+      const triggerRect = triggerRef.value!.getBoundingClientRect()
+      if (props.collapsed) {
+        const sidebar = triggerRef.value!.closest('.sidebar')
+        const sidebarRight = sidebar ? sidebar.getBoundingClientRect().right : triggerRect.right
+        dropdownPos.value = {
+          top: triggerRect.top,
+          left: sidebarRight + 6,
+        }
+      } else {
+        dropdownPos.value = {
+          top: triggerRect.bottom + 4,
+          left: triggerRect.left,
+        }
+      }
+    })
+  }
+}
 const workspaces = computed(() => store.workspaces)
 const currentWorkspaceId = computed(() => store.currentWorkspaceId)
 const currentLabel = computed(() => store.currentWorkspace?.name || 'Workspace')
@@ -152,20 +189,22 @@ function onManage() {
   transform: rotate(180deg);
 }
 
-/* Backdrop */
+/* Transitions */
+.fade-enter-active, .fade-leave-active { transition: opacity 0.15s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+.ws-dropdown-leave-to { opacity: 0; transform: translateY(-4px) scale(0.98); }
+</style>
+
+<style>
+/* Teleported to body — must be non-scoped */
 .ws-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 99;
+  z-index: 199;
 }
 
-/* Dropdown */
 .ws-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 12px;
-  right: 12px;
-  z-index: 100;
+  z-index: 200;
   background: var(--mc-bg-elevated);
   border: 1px solid var(--mc-border);
   border-radius: 14px;
@@ -175,13 +214,7 @@ function onManage() {
   overflow-y: auto;
 }
 
-.collapsed .ws-dropdown {
-  left: 6px;
-  right: auto;
-  min-width: 200px;
-}
-
-.ws-item {
+.ws-dropdown .ws-item {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -193,56 +226,52 @@ function onManage() {
   color: var(--mc-text-primary);
 }
 
-.ws-item:hover {
+.ws-dropdown .ws-item:hover {
   background: var(--mc-bg-sunken);
 }
 
-.ws-item.active {
+.ws-dropdown .ws-item.active {
   background: var(--mc-primary-bg);
   color: var(--mc-primary);
   font-weight: 600;
 }
 
-.ws-item__icon {
+.ws-dropdown .ws-item__icon {
   flex-shrink: 0;
   opacity: 0.5;
 }
 
-.ws-item.active .ws-item__icon {
+.ws-dropdown .ws-item.active .ws-item__icon {
   opacity: 1;
   color: var(--mc-primary);
 }
 
-.ws-item__name {
+.ws-dropdown .ws-item__name {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.ws-item__check {
+.ws-dropdown .ws-item__check {
   flex-shrink: 0;
   color: var(--mc-primary);
 }
 
-.ws-divider {
+.ws-dropdown .ws-divider {
   height: 1px;
   background: var(--mc-border-light);
   margin: 4px 8px;
 }
 
-.ws-item--manage {
+.ws-dropdown .ws-item--manage {
   color: var(--mc-text-secondary);
 }
 
-.ws-item--manage:hover {
+.ws-dropdown .ws-item--manage:hover {
   color: var(--mc-text-primary);
 }
 
-/* Transitions */
-.fade-enter-active, .fade-leave-active { transition: opacity 0.15s; }
-.fade-enter-from, .fade-leave-to { opacity: 0; }
-
 .ws-dropdown-enter-active { transition: all 0.15s ease-out; }
 .ws-dropdown-leave-active { transition: all 0.1s ease-in; }
 .ws-dropdown-enter-from { opacity: 0; transform: translateY(-6px) scale(0.97); }
diff --git a/mateclaw-ui/src/views/layout/MainLayout.vue b/mateclaw-ui/src/views/layout/MainLayout.vue
index 891d5c4d..e1a4e27e 100644
--- a/mateclaw-ui/src/views/layout/MainLayout.vue
+++ b/mateclaw-ui/src/views/layout/MainLayout.vue
@@ -106,10 +106,7 @@
               <div class="user-role">{{ roleLabel }}</div>
             </div>
             <button class="logout-btn" @click="logout" :title="t('nav.logout')">
-              <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"/><line x1="21" y1="12" x2="9" y2="12"/>
-              </svg>
+              <el-icon :size="16"><SwitchButton /></el-icon>
             </button>
           </div>
         </template>
@@ -119,62 +116,10 @@
             <button class="footer-icon-btn" :class="healthStatus" @click="showDoctor = true" :title="t('doctor.title')">
               <span class="health-dot"></span>
             </button>
-            <button class="footer-icon-btn footer-icon-btn--accent" :title="t('nav.appearance')" @click="footerPanelOpen = !footerPanelOpen">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M12 20h9"/><path d="M12 4h9"/><path d="M4 9h16"/><path d="M4 15h16"/><circle cx="8" cy="4" r="2"/><circle cx="16" cy="20" r="2"/><circle cx="6" cy="15" r="2"/><circle cx="18" cy="9" r="2"/>
-              </svg>
+            <button class="footer-icon-btn" :title="t('nav.logout')" @click="logout">
+              <el-icon :size="16"><SwitchButton /></el-icon>
             </button>
           </div>
-
-          <Transition name="fade">
-            <div v-if="footerPanelOpen" class="sidebar-utility-panel">
-              <div class="panel-section">
-                <div class="utility-label">{{ t('nav.themeLabel') }}</div>
-                <div class="panel-option-list">
-                  <button
-                    v-for="opt in themeOptions"
-                    :key="opt.value"
-                    class="panel-option-btn"
-                    :class="{ active: themeStore.mode === opt.value }"
-                    @click="themeStore.setMode(opt.value)"
-                  >
-                    <span class="panel-option-icon" v-html="opt.icon"></span>
-                    <span>{{ opt.label }}</span>
-                  </button>
-                </div>
-              </div>
-
-              <div class="panel-section">
-                <div class="utility-label">{{ t('nav.languageLabel') }}</div>
-                <div class="panel-option-list">
-                  <button
-                    v-for="opt in localeOptions"
-                    :key="opt.value"
-                    class="panel-option-btn"
-                    :class="{ active: currentLocaleValue === opt.value }"
-                    @click="changeLocale(opt.value)"
-                  >
-                    <span class="language-abbr">{{ opt.short }}</span>
-                    <span>{{ opt.label }}</span>
-                  </button>
-                </div>
-              </div>
-
-              <div class="panel-user">
-                <div class="user-avatar">{{ userInitial }}</div>
-                <div class="panel-user-meta">
-                  <div class="user-name">{{ username }}</div>
-                  <div class="user-role">{{ roleLabel }}</div>
-                </div>
-                <button class="logout-btn logout-btn--panel" @click="logout" :title="t('nav.logout')">
-                  <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"/><line x1="21" y1="12" x2="9" y2="12"/>
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </Transition>
         </template>
       </div>
     </aside>
@@ -213,6 +158,7 @@ import DoctorDrawer from '@/views/Doctor/DoctorDrawer.vue'
 import WorkspaceSwitcher from '@/components/workspace/WorkspaceSwitcher.vue'
 import { useWorkspaceStore } from '@/stores/useWorkspaceStore'
 import { applyLocale, currentLocale, type AppLocale } from '@/i18n'
+import { SwitchButton } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const route = useRoute()