yss-project/src/app/app.scss

// 全局变量定义
$primary-color: #165DFF;
$primary-dark: #0E42CB;
$secondary-color: #4E5BA6;
$success-color: #00B42A;
$warning-color: #FF7D00;
$danger-color: #F53F3F;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$border-color: #E5E6EB;
$background-primary: #FFFFFF;
$background-secondary: #F2F3F5;
$background-tertiary: #F7F8FA;
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
$shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
$border-radius: 8px;
$transition: all 0.3s ease;

// 全局样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: $text-primary;
  background-color: $background-secondary;
}

// 主容器
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}

// 顶部导航栏
top-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background-color: $background-primary;
  box-shadow: $shadow-sm;
  z-index: 1000;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-title {
  font-size: 20px;
  font-weight: 600;
  color: $primary-color;
  margin: 0;
}

.navbar-center {
  display: flex;
  flex: 1;
  max-width: 400px;
  margin: 0 24px;
}

.search-container {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  font-size: 14px;
  transition: $transition;
}

.search-input:focus {
  outline: none;
  border-color: $primary-color;
  box-shadow: 0 0 0 2px color-mix(in srgb, $primary-color 20%, transparent);
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: $text-tertiary;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: $text-secondary;
  transition: $transition;
}

.notification-btn:hover {
  color: $primary-color;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: $danger-color;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: $primary-color;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.user-name {
  font-size: 14px;
  color: $text-secondary;
}

// 主要内容区
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

// 左侧侧边栏
.sidebar {
  width: 220px;
  background-color: $background-primary;
  border-right: 1px solid $border-color;
  display: flex;
  flex-direction: column;
  transition: $transition;

  .sidebar-nav {
    flex: 1;
    padding: 16px 0;

    .nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 24px;
      color: $text-secondary;
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: $transition;

      &:hover {
        background-color: $background-tertiary;
        color: $primary-color;
      }

      &.active {
        color: $primary-color;
        background-color: color-mix(in srgb, $primary-color 5%, transparent);
        border-left-color: $primary-color;
        font-weight: 500;
      }
    }
  }

  .sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid $border-color;

    .storage-info {
      margin-bottom: 16px;
      font-size: 12px;
      color: $text-tertiary;
    }

    .logout-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: none;
      border: 1px solid $border-color;
      border-radius: $border-radius;
      color: $text-secondary;
      cursor: pointer;
      font-size: 14px;
      transition: $transition;

      &:hover {
        background-color: $background-tertiary;
        border-color: $danger-color;
        color: $danger-color;
      }
    }
  }

  &.collapsed {
    width: 0;
    overflow: hidden;
  }
}

// 设计师页面特定规则 - 彻底隐藏侧边栏
.designer-page .sidebar {
  display: none !important;
  width: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

.designer-page .content-wrapper {
  width: 100% !important;
  margin-left: 0 !important;
  padding: 20px !important;
}

.designer-page .main-content {
  padding: 0 !important;
  margin: 0 !important;
}

// 中间内容区
.content-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

// 响应式设计
@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .top-navbar {
    padding: 0 16px;
  }

  .menu-toggle {
    display: block;
  }

  .app-title {
    font-size: 18px;
  }

  .navbar-center {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    height: calc(100vh - 64px);
    z-index: 900;
    transform: translateX(0);

    &.collapsed {
      transform: translateX(-100%);
    }
  }

  .content-wrapper {
    padding: 16px;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .top-navbar {
    height: 56px;

    .navbar-right {
      gap: 12px;
    }
  }

  .sidebar {
    top: 56px;
    height: calc(100vh - 56px);
  }

  .content-wrapper {
    padding: 12px;
  }
}