.ul-logo {
  display: inline-flex;
  cursor: pointer;
  user-select: none;

  &__main {
    @include flex(center, center, column);
    width: 60px;
    height: 60px;
    background-color: $color-primary-base;
    color: $color-white;
    border-radius: $radius-md;
    padding: $space-xs;
    box-sizing: border-box;
    transition: background-color 0.3s ease;

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

  // 循环生成主题色
  @each $name, $variants in $theme-color-variants {
    &.#{$name} &__main {
      background-color: map-get($variants, "base");
      color: map-get($variants, "text");

      &:hover {
        background-color: map-get($variants, "hover");
      }
    }
  }

  
  // 圆形修饰符
  &.circle &__main {
    border-radius: $radius-circle;
  }

  &__title {
    font-size: $font-size-xxl;
    font-weight: $font-weight-bold;
    line-height: 1;
  }

  &__plus {
    font-size: $font-size-sm;
    margin-top: 2px;
    white-space: nowrap;
  }
}

.ul-logo {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}
.ul-logo__main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 60px;
  height: 60px;
  background-color: var(--ul-color-primary-base);
  color: var(--ul-color-white);
  border-radius: 6px;
  padding: 4px;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}
.ul-logo__main:hover {
  background-color: var(--ul-color-primary-hover);
}
.ul-logo.primary .ul-logo__main {
  background-color: var(--ul-color-primary-base);
  color: var(--ul-color-primary-text);
}
.ul-logo.primary .ul-logo__main:hover {
  background-color: var(--ul-color-primary-hover);
}
.ul-logo.success .ul-logo__main {
  background-color: var(--ul-color-success-base);
  color: var(--ul-color-success-text);
}
.ul-logo.success .ul-logo__main:hover {
  background-color: var(--ul-color-success-hover);
}
.ul-logo.danger .ul-logo__main {
  background-color: var(--ul-color-danger-base);
  color: var(--ul-color-danger-text);
}
.ul-logo.danger .ul-logo__main:hover {
  background-color: var(--ul-color-danger-hover);
}
.ul-logo.warning .ul-logo__main {
  background-color: var(--ul-color-warning-base);
  color: var(--ul-color-warning-text);
}
.ul-logo.warning .ul-logo__main:hover {
  background-color: var(--ul-color-warning-hover);
}
.ul-logo.info .ul-logo__main {
  background-color: var(--ul-color-info-base);
  color: var(--ul-color-info-text);
}
.ul-logo.info .ul-logo__main:hover {
  background-color: var(--ul-color-info-hover);
}
.ul-logo.dark .ul-logo__main {
  background-color: var(--ul-color-dark-base);
  color: var(--ul-color-dark-text);
}
.ul-logo.dark .ul-logo__main:hover {
  background-color: var(--ul-color-dark-hover);
}
.ul-logo.light .ul-logo__main {
  background-color: var(--ul-color-light-base);
  color: var(--ul-color-light-text);
}
.ul-logo.light .ul-logo__main:hover {
  background-color: var(--ul-color-light-hover);
}
.ul-logo.gray .ul-logo__main {
  background-color: var(--ul-color-gray-base);
  color: var(--ul-color-gray-text);
}
.ul-logo.gray .ul-logo__main:hover {
  background-color: var(--ul-color-gray-hover);
}
.ul-logo.circle .ul-logo__main {
  border-radius: 50%;
}
.ul-logo__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.ul-logo__plus {
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
}

<view class="ul-section ul-flex ul-flex-wrap" style="gap: 16px; align-items: center;">
    <!-- 基础用法 -->
    <view class="ul-logo">
        <view class="ul-logo__main">
            <view class="ul-logo__title">AI</view>
            <view class="ul-logo__plus">AI帮手</view>
        </view>
    </view>
    <!-- 无副标题 -->
    <view class="ul-logo">
        <view class="ul-logo__main">
            <view class="ul-logo__title">UL</view>
        </view>
    </view>
    <!-- 圆形 -->
    <view class="ul-logo circle">
        <view class="ul-logo__main">
            <view class="ul-logo__title">AI</view>
            <view class="ul-logo__plus">AI帮手</view>
        </view>
    </view>
    <!-- 圆形 + 无副标题 -->
    <view class="ul-logo circle">
        <view class="ul-logo__main">
            <view class="ul-logo__title">UL</view>
        </view>
    </view>
</view>
<!-- 所有主题色变体示例 -->
<view class="ul-section">
    <view class="ul-flex ul-flex-wrap" style="gap: 16px; align-items: center;">
        <view class="ul-logo primary">
            <view class="ul-logo__main">
                <view class="ul-logo__title">UL</view>
            </view>
        </view>
        <view class="ul-logo success">
            <view class="ul-logo__main">
                <view class="ul-logo__title">UL</view>
            </view>
        </view>
        <view class="ul-logo danger">
            <view class="ul-logo__main">
                <view class="ul-logo__title">UL</view>
            </view>
        </view>
        <view class="ul-logo warning">
            <view class="ul-logo__main">
                <view class="ul-logo__title">UL</view>
            </view>
        </view>
        <view class="ul-logo info">
            <view class="ul-logo__main">
                <view class="ul-logo__title">UL</view>
            </view>
        </view>
        <view class="ul-logo dark">
            <view class="ul-logo__main">
                <view class="ul-logo__title">UL</view>
            </view>
        </view>
        <view class="ul-logo light">
            <view class="ul-logo__main">
                <view class="ul-logo__title">UL</view>
            </view>
        </view>
        <view class="ul-logo gray">
            <view class="ul-logo__main">
                <view class="ul-logo__title">UL</view>
            </view>
        </view>
    </view>
</view>