xto-fronted 0.3.4 → 0.3.6

package/src/components/Layout/Header.vue

@@ -5,6 +5,8 @@ import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
 import { useAuthStore } from '@/stores/auth'
 import { useMenuStore } from '@/stores/menu'
+import { Icon } from '@xto/base'
+import { Drawer } from '@xto/feedback'
 
 type LayoutMode = 'sidebar' | 'top' | 'mix'
 
@@ -16,18 +18,21 @@ const authStore = useAuthStore()
 const menuStore = useMenuStore()
 
 const dropdownVisible = ref(false)
-const layoutDropdownVisible = ref(false)
+const drawerVisible = ref(false)
 const dropdownRef = ref<HTMLElement | null>(null)
 const isFullscreen = ref(false)
 const searchVisible = ref(false)
 const searchKeyword = ref('')
 const searchRef = ref<HTMLElement | null>(null)
 
+// 灰色模式状态
+const greyMode = ref(false)
+
 // 布局模式选项
 const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
-  { value: 'sidebar', label: '左侧菜单', icon: '📋' },
-  { value: 'top', label: '顶部菜单', icon: '☰' },
-  { value: 'mix', label: '混合菜单', icon: '⚡' }
+  { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
+  { value: 'top', label: '顶部菜单', icon: 'menu' },
+  { value: 'mix', label: '混合菜单', icon: 'grid' }
 ]
 
 // 主题色选项
@@ -84,19 +89,24 @@ const toggleTheme = () => {
   appStore.toggleTheme()
 }
 
+// 打开设置抽屉
+const openSettingsDrawer = () => {
+  drawerVisible.value = true
+}
+
 // 切换布局模式
 const handleLayoutChange = (mode: LayoutMode) => {
   appStore.setLayout(mode)
-  layoutDropdownVisible.value = false
 }
 
 // 切换灰色模式
-const toggleGreyMode = () => {
+const handleGreyModeChange = (value: boolean) => {
+  greyMode.value = value
   const html = document.documentElement
-  if (html.classList.contains('grey-mode')) {
-    html.classList.remove('grey-mode')
-  } else {
+  if (value) {
     html.classList.add('grey-mode')
+  } else {
+    html.classList.remove('grey-mode')
   }
 }
 
@@ -117,19 +127,11 @@ const handleFullscreenChange = () => {
 // 切换下拉菜单
 const toggleDropdown = () => {
   dropdownVisible.value = !dropdownVisible.value
-  layoutDropdownVisible.value = false
-}
-
-// 切换布局下拉菜单
-const toggleLayoutDropdown = () => {
-  layoutDropdownVisible.value = !layoutDropdownVisible.value
-  dropdownVisible.value = false
 }
 
 // 关闭下拉菜单
 const closeDropdowns = () => {
   dropdownVisible.value = false
-  layoutDropdownVisible.value = false
 }
 
 // 显示搜索
@@ -203,6 +205,8 @@ onMounted(() => {
   document.addEventListener('fullscreenchange', handleFullscreenChange)
   document.addEventListener('keydown', handleKeydown)
   appStore.initTheme()
+  // 初始化灰色模式状态
+  greyMode.value = document.documentElement.classList.contains('grey-mode')
 })
 
 onUnmounted(() => {
@@ -218,10 +222,7 @@ onUnmounted(() => {
     <div class="header__left">
       <!-- 折叠按钮 -->
       <div class="header__collapse" @click="toggleCollapse">
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-          <path v-if="appStore.isCollapsed" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
-          <path v-else d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
-        </svg>
+        <Icon :name="appStore.isCollapsed ? 'menu-unfold' : 'menu-fold'" :size="18" />
       </div>
 
       <!-- 面包屑 -->
@@ -239,73 +240,22 @@ onUnmounted(() => {
     <div class="header__right">
       <!-- 搜索按钮 -->
       <div class="header__action" @click="showSearch" title="搜索 (Ctrl+K)">
-        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-        </svg>
+        <Icon name="search" :size="16" />
       </div>
 
       <!-- 全屏切换 -->
       <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
-        <svg v-if="isFullscreen" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-          <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
-        </svg>
-        <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
-        </svg>
+        <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
       </div>
 
-      <!-- 布局切换 -->
-      <div class="header__action header__layout" ref="dropdownRef">
-        <div class="header__action-trigger" @click.stop="toggleLayoutDropdown">
-          <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-            <path d="M3 3h18v18H3V3zm2 2v6h14V5H5zm0 8v6h6v-6H5zm8 0v6h6v-6h-6z"/>
-          </svg>
-        </div>
-
-        <!-- 布局下拉菜单 -->
-        <Transition name="dropdown">
-          <div v-if="layoutDropdownVisible" class="header__layout-dropdown">
-            <div class="header__layout-title">布局模式</div>
-            <div class="header__layout-options">
-              <div
-                v-for="option in layoutOptions"
-                :key="option.value"
-                :class="['header__layout-option', { 'is-active': currentLayout === option.value }]"
-                @click="handleLayoutChange(option.value)"
-              >
-                <span class="layout-icon">{{ option.icon }}</span>
-                <span>{{ option.label }}</span>
-              </div>
-            </div>
-            <div class="header__layout-divider"></div>
-            <div class="header__layout-title">主题色</div>
-            <div class="header__color-options">
-              <div
-                v-for="color in colorOptions"
-                :key="color.value"
-                :class="['header__color-option', { 'is-active': appStore.primaryColor === color.value }]"
-                :style="{ backgroundColor: color.value }"
-                :title="color.label"
-                @click="handleColorChange(color.value)"
-              ></div>
-            </div>
-            <div class="header__layout-divider"></div>
-            <div class="header__layout-item" @click="toggleGreyMode">
-              <span class="layout-icon">🌫️</span>
-              <span>灰色模式</span>
-            </div>
-          </div>
-        </Transition>
+      <!-- 换肤设置 -->
+      <div class="header__action" @click="openSettingsDrawer" title="换肤设置">
+        <Icon name="setting" :size="16" />
       </div>
 
       <!-- 主题切换 -->
       <div class="header__action" @click="toggleTheme" title="切换主题">
-        <svg v-if="appStore.isDark" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-          <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
-        </svg>
-        <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-          <path d="M6.76 4.84l-1.4-1.4-1.41 1.41 1.4 1.4 1.41-1.41zm10.49 10.49l-1.4-1.4-1.41 1.41 1.4 1.4 1.41-1.41zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-9h-2v4h2v-4zm0-6h-2v2h2V5zM4.84 17.24l-1.41 1.41 1.4 1.4 1.41-1.41-1.4-1.4z"/>
-        </svg>
+        <Icon :name="appStore.isDark ? 'sun' : 'moon'" :size="16" />
       </div>
 
       <!-- 用户头像 -->
@@ -333,16 +283,16 @@ onUnmounted(() => {
             <div class="header__dropdown-divider"></div>
             <div class="header__dropdown-menu">
               <div class="header__dropdown-item" @click="handleProfile">
-                <span class="header__dropdown-icon">👤</span>
+                <Icon name="user" :size="16" />
                 <span>个人信息</span>
               </div>
               <div class="header__dropdown-item" @click="handleChangePassword">
-                <span class="header__dropdown-icon">🔐</span>
+                <Icon name="lock" :size="16" />
                 <span>修改密码</span>
               </div>
               <div class="header__dropdown-divider"></div>
               <div class="header__dropdown-item header__dropdown-item--danger" @click="handleLogout">
-                <span class="header__dropdown-icon">🚪</span>
+                <Icon name="logout" :size="16" />
                 <span>退出登录</span>
               </div>
             </div>
@@ -356,9 +306,7 @@ onUnmounted(() => {
       <div v-if="searchVisible" class="header__search-modal" ref="searchRef">
         <div class="search-container">
           <div class="search-input-wrapper">
-            <svg class="search-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
-              <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-            </svg>
+            <Icon class="search-icon" name="search" :size="20" />
             <input
               v-model="searchKeyword"
               type="text"
@@ -376,7 +324,7 @@ onUnmounted(() => {
               :class="['search-result-item', { 'is-first': index === 0 }]"
               @click="handleSearchItemClick(item.path)"
             >
-              <span class="search-result-icon">{{ item.icon || '📄' }}</span>
+              <Icon class="search-result-icon" :name="item.icon || 'file'" :size="20" />
               <div class="search-result-info">
                 <span class="search-result-title">{{ item.title }}</span>
                 <span v-if="item.parentTitle" class="search-result-parent">{{ item.parentTitle }}</span>
@@ -389,6 +337,89 @@ onUnmounted(() => {
         </div>
       </div>
     </Transition>
+
+    <!-- 换肤设置抽屉 -->
+    <Drawer
+      v-model="drawerVisible"
+      title="换肤设置"
+      direction="rtl"
+      size="320px"
+    >
+      <div class="settings-drawer">
+        <!-- 布局模式 -->
+        <div class="settings-section">
+          <div class="settings-title">布局模式</div>
+          <div class="settings-layout-options">
+            <div
+              v-for="option in layoutOptions"
+              :key="option.value"
+              :class="['layout-option', { 'is-active': currentLayout === option.value }]"
+              @click="handleLayoutChange(option.value)"
+            >
+              <div class="layout-option__preview">
+                <div v-if="option.value === 'sidebar'" class="layout-preview-sidebar">
+                  <div class="preview-aside"></div>
+                  <div class="preview-main">
+                    <div class="preview-header"></div>
+                    <div class="preview-content"></div>
+                  </div>
+                </div>
+                <div v-else-if="option.value === 'top'" class="layout-preview-top">
+                  <div class="preview-header-full"></div>
+                  <div class="preview-content-full"></div>
+                </div>
+                <div v-else class="layout-preview-mix">
+                  <div class="preview-header-mix">
+                    <div class="preview-mix-left"></div>
+                  </div>
+                  <div class="preview-mix-body">
+                    <div class="preview-mix-aside"></div>
+                    <div class="preview-mix-content"></div>
+                  </div>
+                </div>
+              </div>
+              <span class="layout-option__label">{{ option.label }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 主题色 -->
+        <div class="settings-section">
+          <div class="settings-title">主题色</div>
+          <div class="settings-color-options">
+            <div
+              v-for="color in colorOptions"
+              :key="color.value"
+              :class="['color-option', { 'is-active': appStore.primaryColor === color.value }]"
+              :style="{ backgroundColor: color.value }"
+              :title="color.label"
+              @click="handleColorChange(color.value)"
+            >
+              <Icon v-if="appStore.primaryColor === color.value" name="check" :size="12" color="#fff" />
+            </div>
+          </div>
+        </div>
+
+        <!-- 功能开关 -->
+        <div class="settings-section">
+          <div class="settings-title">功能设置</div>
+          <div class="settings-switch-list">
+            <div class="settings-switch-item">
+              <span>灰色模式</span>
+              <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeChange(!greyMode)">
+                <span class="switch-core"></span>
+              </div>
+            </div>
+            <div class="settings-switch-item">
+              <span>暗黑模式</span>
+              <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="toggleTheme">
+                <span class="switch-core"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Drawer>
   </div>
 </template>
 
@@ -461,104 +492,6 @@ onUnmounted(() => {
     }
   }
 
-  &__layout {
-    position: relative;
-  }
-
-  &__layout-dropdown {
-    position: absolute;
-    top: calc(100% + 8px);
-    right: 0;
-    min-width: 200px;
-    background-color: var(--bg-color);
-    border-radius: var(--border-radius-base);
-    box-shadow: var(--box-shadow);
-    padding: 12px;
-    z-index: 100;
-  }
-
-  &__layout-title {
-    font-size: 12px;
-    color: var(--color-text-secondary);
-    margin-bottom: 8px;
-    padding-left: 4px;
-  }
-
-  &__layout-options {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &__layout-option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    border-radius: var(--border-radius-base);
-    font-size: 14px;
-    color: var(--color-text-regular);
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: var(--color-fill);
-    }
-
-    &.is-active {
-      color: var(--color-primary);
-      background-color: var(--color-primary-light-9);
-    }
-
-    .layout-icon {
-      font-size: 16px;
-    }
-  }
-
-  &__color-options {
-    display: flex;
-    gap: 8px;
-    padding: 8px 0;
-  }
-
-  &__color-option {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: transform 0.2s;
-
-    &:hover {
-      transform: scale(1.2);
-    }
-
-    &.is-active {
-      box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px currentColor;
-    }
-  }
-
-  &__layout-divider {
-    height: 1px;
-    background-color: var(--color-border-lighter);
-    margin: 8px 0;
-  }
-
-  &__layout-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    border-radius: var(--border-radius-base);
-    font-size: 14px;
-    color: var(--color-text-regular);
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: var(--color-fill);
-    }
-  }
-
   &__user {
     position: relative;
     margin-left: 8px;
@@ -690,10 +623,6 @@ onUnmounted(() => {
         }
       }
     }
-
-    &-icon {
-      font-size: 16px;
-    }
   }
 
   &__search-modal {
@@ -777,7 +706,7 @@ onUnmounted(() => {
   }
 
   .search-result-icon {
-    font-size: 20px;
+    color: var(--color-text-secondary);
   }
 
   .search-result-info {
@@ -805,6 +734,216 @@ onUnmounted(() => {
   font-size: 14px;
 }
 
+// 设置抽屉内容
+.settings-drawer {
+  .settings-section {
+    margin-bottom: 24px;
+  }
+
+  .settings-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 12px;
+  }
+
+  .settings-layout-options {
+    display: flex;
+    gap: 12px;
+  }
+
+  .layout-option {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 12px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-base);
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: var(--color-primary-light-5);
+    }
+
+    &.is-active {
+      border-color: var(--color-primary);
+      background-color: var(--color-primary-light-9);
+    }
+
+    &__preview {
+      width: 48px;
+      height: 36px;
+      border: 1px solid var(--color-border-light);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+
+    &__label {
+      font-size: 12px;
+      color: var(--color-text-regular);
+    }
+  }
+
+  // 布局预览样式
+  .layout-preview-sidebar {
+    display: flex;
+    height: 100%;
+
+    .preview-aside {
+      width: 25%;
+      height: 100%;
+      background-color: var(--color-primary-light-7);
+    }
+
+    .preview-main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .preview-header {
+        height: 20%;
+        background-color: var(--color-border-light);
+      }
+
+      .preview-content {
+        flex: 1;
+        background-color: var(--bg-color-page);
+      }
+    }
+  }
+
+  .layout-preview-top {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .preview-header-full {
+      height: 25%;
+      background-color: var(--color-primary-light-7);
+    }
+
+    .preview-content-full {
+      flex: 1;
+      background-color: var(--bg-color-page);
+    }
+  }
+
+  .layout-preview-mix {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .preview-header-mix {
+      height: 25%;
+      background-color: var(--color-primary-light-7);
+      display: flex;
+
+      .preview-mix-left {
+        width: 30%;
+        background-color: var(--color-primary);
+      }
+    }
+
+    .preview-mix-body {
+      flex: 1;
+      display: flex;
+
+      .preview-mix-aside {
+        width: 25%;
+        background-color: var(--color-primary-light-8);
+      }
+
+      .preview-mix-content {
+        flex: 1;
+        background-color: var(--bg-color-page);
+      }
+    }
+  }
+
+  .settings-color-options {
+    display: flex;
+    gap: 12px;
+  }
+
+  .color-option {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
+    &.is-active {
+      box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--color-primary);
+    }
+  }
+
+  .settings-switch-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .settings-switch-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    span {
+      font-size: 14px;
+      color: var(--color-text-regular);
+    }
+  }
+
+  .switch-wrapper {
+    width: 44px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .switch-core {
+      width: 100%;
+      height: 100%;
+      border-radius: 11px;
+      background-color: var(--color-border);
+      position: relative;
+      transition: background-color 0.2s;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 18px;
+        height: 18px;
+        background-color: #fff;
+        border-radius: 50%;
+        transition: left 0.2s;
+      }
+    }
+
+    &.is-checked {
+      .switch-core {
+        background-color: var(--color-primary);
+
+        &::after {
+          left: 24px;
+        }
+      }
+    }
+  }
+}
+
 // 下拉动画
 .dropdown-enter-active,
 .dropdown-leave-active {