From 2f710099c7ff5ea3a1fe47dfb24a0cdeb168d9c1 Mon Sep 17 00:00:00 2001
From: Clover You <hi@clovu.me>
Date: Fri, 6 Feb 2026 00:24:10 +0800
Subject: [PATCH] feat(mobile): adapt dark theme

---
 src/components/common/NaiveProvider.vue       |   3 +-
 src/mobile/views/MyQRCode.vue                 |   7 +-
 .../views/community/DynamicDetailPage.vue     |   9 +-
 src/mobile/views/friends/AddFriends.vue       | 250 +++++++++---------
 src/mobile/views/friends/StartGroupChat.vue   |  12 +-
 src/mobile/views/my/EditBio.vue               |  31 +--
 src/mobile/views/my/EditBirthday.vue          |  80 +++---
 src/mobile/views/my/MyAlbum.vue               |   2 +-
 src/mobile/views/my/SimpleBio.vue             |  18 +-
 9 files changed, 190 insertions(+), 222 deletions(-)

diff --git a/src/components/common/NaiveProvider.vue b/src/components/common/NaiveProvider.vue
index bc53a711..42c1c381 100644
--- a/src/components/common/NaiveProvider.vue
+++ b/src/components/common/NaiveProvider.vue
@@ -134,7 +134,8 @@ const commonTheme: GlobalThemeOverrides = {
   Input: {
     borderRadius: '10px',
     borderHover: '0',
-    border: '0',
+    // TODO: 不清楚为什么去掉边框
+    // border: '0',
     borderDisabled: '0',
     borderFocus: '0',
     boxShadowFocus: '0'
diff --git a/src/mobile/views/MyQRCode.vue b/src/mobile/views/MyQRCode.vue
index 0e7e6669..adeebb21 100644
--- a/src/mobile/views/MyQRCode.vue
+++ b/src/mobile/views/MyQRCode.vue
@@ -1,7 +1,6 @@
 <template>
-  <AutoFixHeightPage :show-footer="false" class="dark:bg-red">
+  <AutoFixHeightPage :show-footer="false">
     <template #header>
-      <div class="h-100px"></div>
       <HeaderBar
         :isOfficial="false"
         :hidden-right="true"
@@ -11,10 +10,10 @@
     </template>
 
     <template #container>
-      <div class="flex flex-col overflow-auto h-full relative">
+      <div class="flex flex-col overflow-auto h-full">
         <img
           src="@/assets/mobile/chat-home/background.webp"
-          class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
+          class="absolute fixed top-0 left-0 w-100vw h-100vh z-0 dark:opacity-20" />
 
         <!-- 页面全部内容 -->
         <div class="flex flex-col flex-1 items-center p-15px z-2 my-15">
diff --git a/src/mobile/views/community/DynamicDetailPage.vue b/src/mobile/views/community/DynamicDetailPage.vue
index 9f30ba5d..7a6391ad 100644
--- a/src/mobile/views/community/DynamicDetailPage.vue
+++ b/src/mobile/views/community/DynamicDetailPage.vue
@@ -1,13 +1,8 @@
 <template>
   <MobileLayout :safeAreaTop="true" :safeAreaBottom="true">
-    <div class="flex flex-col h-full bg-gradient-to-b from-#f8f9fa to-#ffffff">
+    <div class="flex flex-col h-full bg-gradient-to-b">
       <!-- 顶部导航栏 -->
-      <HeaderBar
-        :isOfficial="false"
-        class="bg-white"
-        :enable-shadow="false"
-        :hidden-right="true"
-        room-name="动态详情" />
+      <HeaderBar :isOfficial="false" :enable-shadow="false" :hidden-right="true" room-name="动态详情" />
 
       <!-- 动态详情内容 -->
       <div class="flex-1 overflow-y-auto overflow-x-hidden w-full">
diff --git a/src/mobile/views/friends/AddFriends.vue b/src/mobile/views/friends/AddFriends.vue
index b83c7553..2ddbf4f7 100644
--- a/src/mobile/views/friends/AddFriends.vue
+++ b/src/mobile/views/friends/AddFriends.vue
@@ -1,142 +1,138 @@
 <template>
   <div class="flex flex-1 flex-col relative bg-cover bg-center">
-    <MobileLayout>
-      <HeaderBar
-        :isOfficial="false"
-        :hidden-right="true"
-        :enable-default-background="false"
-        :enable-shadow="false"
-        room-name="添加好友/群" />
+    <HeaderBar
+      :isOfficial="false"
+      :hidden-right="true"
+      :enable-default-background="false"
+      :enable-shadow="false"
+      room-name="添加好友/群" />
 
-      <div class="flex flex-col gap-1 overflow-auto h-full">
-        <!-- 主要内容 -->
-        <n-flex vertical :size="14">
-          <!-- 搜索框 -->
-          <div class="px-16px">
-            <n-input
-              v-model:value="searchValue"
-              type="text"
-              size="small"
-              style="border-radius: 8px; border: 1px solid #ccc"
-              :placeholder="searchPlaceholder[searchType]"
-              :maxlength="20"
-              round
-              spellCheck="false"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              clearable
-              @keydown.enter="handleSearch"
-              @clear="handleClear">
-              <template #prefix>
-                <n-icon>
-                  <svg class="icon" aria-hidden="true">
-                    <use href="#search" />
-                  </svg>
-                </n-icon>
-              </template>
-            </n-input>
-          </div>
+    <div class="flex flex-col gap-1 overflow-auto h-full">
+      <!-- 主要内容 -->
+      <n-flex vertical :size="14">
+        <!-- 搜索框 -->
+        <div class="px-16px">
+          <n-input
+            v-model:value="searchValue"
+            type="text"
+            :placeholder="searchPlaceholder[searchType]"
+            :maxlength="20"
+            round
+            spellCheck="false"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            clearable
+            @keydown.enter="handleSearch"
+            @clear="handleClear">
+            <template #prefix>
+              <n-icon>
+                <svg class="icon" aria-hidden="true">
+                  <use href="#search" />
+                </svg>
+              </n-icon>
+            </template>
+          </n-input>
+        </div>
 
-          <!-- 搜索类型切换 -->
-          <n-tabs v-model:value="searchType" animated size="small" @update:value="handleTypeChange">
-            <n-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name" :tab="tab.label">
-              <template>
-                <span>{{ tab.label }}</span>
-              </template>
+        <!-- 搜索类型切换 -->
+        <n-tabs v-model:value="searchType" animated size="small" @update:value="handleTypeChange">
+          <n-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name" :tab="tab.label">
+            <template>
+              <span>{{ tab.label }}</span>
+            </template>
 
-              <!-- 初始加载状态 -->
-              <template v-if="initialLoading">
-                <n-spin class="flex-center" style="height: calc(100vh / var(--page-scale, 1) - 200px)" size="large" />
-              </template>
+            <!-- 初始加载状态 -->
+            <template v-if="initialLoading">
+              <n-spin class="flex-center" style="height: calc(100vh / var(--page-scale, 1) - 200px)" size="large" />
+            </template>
 
-              <!-- 搜索结果 -->
-              <template v-else-if="searchResults.length">
-                <FloatBlockList
-                  :data-source="searchResults"
-                  item-key="id"
-                  :item-height="64"
-                  max-height="calc(100vh / var(--page-scale, 1) - 128px)"
-                  style-id="search-hover-classes">
-                  <template #item="{ item }">
-                    <div class="p-[0_20px] box-border">
-                      <n-flex align="center" :size="12" class="p-[8px_0] rounded-lg">
-                        <n-avatar
-                          :size="48"
-                          :src="AvatarUtils.getAvatarUrl(item.avatar)"
-                          :color="themes.content === ThemeEnum.DARK ? '' : '#fff'"
-                          :fallback-src="themes.content === ThemeEnum.DARK ? '/logoL.png' : '/logoD.png'"
-                          round />
-                        <n-flex vertical justify="center" :size="10" class="flex-1">
-                          <n-space align="center" :size="10">
-                            <span class="text-(14px [--text-color])">{{ item.name }}</span>
-                            <template v-for="account in item.itemIds" :key="account">
-                              <img class="size-20px" :src="cachedStore.badgeById(account)?.img" alt="" />
+            <!-- 搜索结果 -->
+            <template v-else-if="searchResults.length">
+              <FloatBlockList
+                :data-source="searchResults"
+                item-key="id"
+                :item-height="64"
+                max-height="calc(100vh / var(--page-scale, 1) - 128px)"
+                style-id="search-hover-classes">
+                <template #item="{ item }">
+                  <div class="p-[0_20px] box-border">
+                    <n-flex align="center" :size="12" class="p-[8px_0] rounded-lg">
+                      <n-avatar
+                        :size="48"
+                        :src="AvatarUtils.getAvatarUrl(item.avatar)"
+                        :color="themes.content === ThemeEnum.DARK ? '' : '#fff'"
+                        :fallback-src="themes.content === ThemeEnum.DARK ? '/logoL.png' : '/logoD.png'"
+                        round />
+                      <n-flex vertical justify="center" :size="10" class="flex-1">
+                        <n-space align="center" :size="10">
+                          <span class="text-(14px [--text-color])">{{ item.name }}</span>
+                          <template v-for="account in item.itemIds" :key="account">
+                            <img class="size-20px" :src="cachedStore.badgeById(account)?.img" alt="" />
+                          </template>
+                        </n-space>
+                        <n-flex align="center" :size="10">
+                          <span class="text-(12px [--chat-text-color])">{{ `账号：${item.account}` }}</span>
+                          <n-tooltip trigger="hover">
+                            <template #trigger>
+                              <svg
+                                class="size-12px hover:color-#909090 hover:transition-colors"
+                                @click="handleCopy(item.account)">
+                                <use href="#copy"></use>
+                              </svg>
                             </template>
-                          </n-space>
-                          <n-flex align="center" :size="10">
-                            <span class="text-(12px [--chat-text-color])">{{ `账号：${item.account}` }}</span>
-                            <n-tooltip trigger="hover">
-                              <template #trigger>
-                                <svg
-                                  class="size-12px hover:color-#909090 hover:transition-colors"
-                                  @click="handleCopy(item.account)">
-                                  <use href="#copy"></use>
-                                </svg>
-                              </template>
-                              <span>复制账号</span>
-                            </n-tooltip>
-                          </n-flex>
+                            <span>复制账号</span>
+                          </n-tooltip>
                         </n-flex>
-
-                        <!-- 三种状态的按钮 -->
-                        <n-button
-                          secondary
-                          :type="getButtonType(item.uid, item.roomId)"
-                          size="small"
-                          class="action-button"
-                          @click="handleButtonClick(item)">
-                          {{ getButtonText(item.uid, item.roomId) }}
-                        </n-button>
                       </n-flex>
-                    </div>
-                  </template>
-                </FloatBlockList>
-              </template>
 
-              <!-- 搜索中状态 -->
-              <template v-else-if="loading">
-                <n-spin class="flex-center" style="height: calc(100vh / var(--page-scale, 1) - 200px)" size="large" />
-              </template>
+                      <!-- 三种状态的按钮 -->
+                      <n-button
+                        secondary
+                        :type="getButtonType(item.uid, item.roomId)"
+                        size="small"
+                        class="action-button"
+                        @click="handleButtonClick(item)">
+                        {{ getButtonText(item.uid, item.roomId) }}
+                      </n-button>
+                    </n-flex>
+                  </div>
+                </template>
+              </FloatBlockList>
+            </template>
 
-              <!-- 搜索无结果状态 -->
-              <template v-else-if="hasSearched">
-                <n-empty
-                  class="flex-center"
-                  style="height: calc(100vh / var(--page-scale, 1) - 200px)"
-                  description="未找到相关结果" />
-              </template>
+            <!-- 搜索中状态 -->
+            <template v-else-if="loading">
+              <n-spin class="flex-center" style="height: calc(100vh / var(--page-scale, 1) - 200px)" size="large" />
+            </template>
 
-              <!-- 默认空状态 -->
-              <template v-else>
-                <n-empty
-                  style="height: calc(100vh / var(--page-scale, 1) - 200px)"
-                  class="flex-center"
-                  description="输入关键词搜索">
-                  <template #icon>
-                    <n-icon>
-                      <svg>
-                        <use href="#explosion"></use>
-                      </svg>
-                    </n-icon>
-                  </template>
-                </n-empty>
-              </template>
-            </n-tab-pane>
-          </n-tabs>
-        </n-flex>
-      </div>
-    </MobileLayout>
+            <!-- 搜索无结果状态 -->
+            <template v-else-if="hasSearched">
+              <n-empty
+                class="flex-center"
+                style="height: calc(100vh / var(--page-scale, 1) - 200px)"
+                description="未找到相关结果" />
+            </template>
+
+            <!-- 默认空状态 -->
+            <template v-else>
+              <n-empty
+                style="height: calc(100vh / var(--page-scale, 1) - 200px)"
+                class="flex-center"
+                description="输入关键词搜索">
+                <template #icon>
+                  <n-icon>
+                    <svg>
+                      <use href="#explosion"></use>
+                    </svg>
+                  </n-icon>
+                </template>
+              </n-empty>
+            </template>
+          </n-tab-pane>
+        </n-tabs>
+      </n-flex>
+    </div>
   </div>
 </template>
 
diff --git a/src/mobile/views/friends/StartGroupChat.vue b/src/mobile/views/friends/StartGroupChat.vue
index d67690cd..0e235ff7 100644
--- a/src/mobile/views/friends/StartGroupChat.vue
+++ b/src/mobile/views/friends/StartGroupChat.vue
@@ -13,9 +13,9 @@
         <div class="flex-1 py-5px shrink-0">
           <n-input
             v-model:value="keyword"
-            class="rounded-10px w-full bg-gray-100 relative text-14px"
             placeholder="搜索联系人~"
             clearable
+            round
             spellCheck="false"
             autoComplete="off"
             autoCorrect="off"
@@ -26,7 +26,7 @@
           </n-input>
         </div>
         <div class="flex justify-end items-center">
-          <n-button class="py-5px" @click="doSearch">搜索</n-button>
+          <n-button strong secondary round @click="doSearch">搜索</n-button>
         </div>
       </div>
 
@@ -45,7 +45,9 @@
                 class="w-full flex items-center px-5px"
                 :class="[
                   'cursor-pointer select-none transition-colors duration-150',
-                  selectedList.includes(item.uid) ? 'bg-blue-50 border-blue-300' : 'hover:bg-gray-50'
+                  selectedList.includes(item.uid)
+                    ? 'bg-[#f5f5f5] dark:bg-[#404040] border-blue-300'
+                    : 'hover:bg-[#f5f5f5] dark:hover:bg-[#404040] border-gray-200'
                 ]">
                 <template #default>
                   <!-- ✅ 强制一行展示 -->
@@ -65,11 +67,11 @@
                       <div class="text-12px text-gray-500 flex items-center gap-4px truncate">
                         <template v-if="getUserState(item.uid)">
                           <img class="size-12px rounded-50%" :src="getUserState(item.uid)?.url" alt="" />
-                          {{ getUserState(item.uid)?.title }}
+                          <n-text>{{ getUserState(item.uid)?.title }}</n-text>
                         </template>
                         <template v-else>
                           <n-badge :color="item.activeStatus === OnlineEnum.ONLINE ? '#1ab292' : '#909090'" dot />
-                          {{ item.activeStatus === OnlineEnum.ONLINE ? '在线' : '离线' }}
+                          <n-text>{{ item.activeStatus === OnlineEnum.ONLINE ? '在线' : '离线' }}</n-text>
                         </template>
                       </div>
                     </div>
diff --git a/src/mobile/views/my/EditBio.vue b/src/mobile/views/my/EditBio.vue
index 18ee04a2..9103144b 100644
--- a/src/mobile/views/my/EditBio.vue
+++ b/src/mobile/views/my/EditBio.vue
@@ -1,19 +1,16 @@
 <template>
   <AutoFixHeightPage :show-footer="false">
     <template #header>
-      <HeaderBar
-        :isOfficial="false"
-        class="bg-white"
-        style="border-bottom: 1px solid; border-color: #dfdfdf"
-        :hidden-right="true"
-        :room-name="t('mobile_edit_bio.title')" />
+      <HeaderBar :isOfficial="false" border :hidden-right="true" :room-name="t('mobile_edit_bio.title')" />
     </template>
 
     <template #container>
-      <div
-        class="bg-[url('@/assets/mobile/chat-home/background.webp')] bg-cover bg-center flex flex-col overflow-auto h-full">
+      <div class="flex flex-col overflow-auto h-full relative">
+        <img
+          src="@/assets/mobile/chat-home/background.webp"
+          class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
         <div class="flex flex-col flex-1 gap-20px py-15px px-20px">
-          <n-form class="bg-white rounded-15px p-10px shadow" label-placement="left" label-width="100px">
+          <n-form class="rounded-15px p-10px shadow" label-placement="left" label-width="100px">
             <n-form-item>
               <n-input
                 v-model:value="localBio"
@@ -27,21 +24,9 @@
           </n-form>
 
           <div class="flex justify-center">
-            <div
-              class="w-20%"
-              style="
-                background: linear-gradient(145deg, #7eb7ac, #6fb0a4, #5fa89c);
-                border-radius: 30px;
-                padding: 10px 30px;
-                color: white;
-                font-weight: 500;
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-                text-align: center;
-                display: inline-block;
-              "
-              @click="handleSave">
+            <n-button @click="handleSave" block type="primary" strong secondary>
               {{ t('mobile_edit_bio.save_btn') }}
-            </div>
+            </n-button>
           </div>
         </div>
       </div>
diff --git a/src/mobile/views/my/EditBirthday.vue b/src/mobile/views/my/EditBirthday.vue
index 6a9518b3..b6b04038 100644
--- a/src/mobile/views/my/EditBirthday.vue
+++ b/src/mobile/views/my/EditBirthday.vue
@@ -1,66 +1,50 @@
 <template>
   <AutoFixHeightPage :show-footer="false">
     <template #header>
-      <HeaderBar
-        :isOfficial="false"
-        class="bg-white"
-        style="border-bottom: 1px solid; border-color: #dfdfdf"
-        :hidden-right="true"
-        :room-name="t('mobile_edit_brithday.title')" />
+      <HeaderBar :isOfficial="false" border :hidden-right="true" :room-name="t('mobile_edit_brithday.title')" />
     </template>
 
     <template #container>
-      <div
-        class="bg-[url('@/assets/mobile/chat-home/background.webp')] bg-cover bg-center flex flex-col overflow-auto h-full">
+      <div class="flex flex-col overflow-auto h-full relative">
+        <img
+          src="@/assets/mobile/chat-home/background.webp"
+          class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
+
         <div class="flex flex-col flex-1 gap-20px py-15px px-20px">
-          <div class="flex justify-center w-full bg-white rounded-10px shadow">
-            <n-date-picker panel type="date" />
-          </div>
+          <n-date-picker panel type="date" block class="m-auto rounded-16px" />
 
-          <div class="flex bg-white rounded-10px w-full h-auto shadow">
-            <div class="px-15px flex flex-col w-full">
-              <!-- 群号 -->
-              <div
-                style="border-bottom: 1px solid; border-color: #ebebeb"
-                class="flex justify-between py-12px items-center">
-                <div class="text-14px">{{ t('mobile_edit_brithday.options.display_birthday_tag') }}</div>
-                <n-switch />
+          <n-list class="px-15px flex flex-col w-full box-border rounded-16px">
+            <n-list-item>
+              <div class="flex w-full justify-between items-center">
+                <n-text class="text-14px shrink-0">{{ t('mobile_edit_brithday.options.display_birthday_tag') }}</n-text>
+                <n-switch class="shrink-0" />
               </div>
-            </div>
-          </div>
+            </n-list-item>
+          </n-list>
 
-          <div class="flex bg-white rounded-10px w-full h-auto shadow">
-            <div class="px-15px flex flex-col w-full">
-              <div
-                style="border-bottom: 1px solid; border-color: #ebebeb"
-                class="flex justify-between py-12px items-center">
-                <div class="text-14px">{{ t('mobile_edit_brithday.options.displsy_age') }}</div>
-                <n-switch />
+          <n-list class="px-15px flex flex-col w-full box-border rounded-10px">
+            <n-list-item>
+              <div class="flex w-full justify-between items-center">
+                <n-text class="text-14px shrink-0">{{ t('mobile_edit_brithday.options.displsy_age') }}</n-text>
+                <n-switch class="shrink-0" />
               </div>
-              <div
-                style="border-bottom: 1px solid; border-color: #ebebeb"
-                class="flex justify-between py-12px items-center">
-                <div class="text-14px">{{ t('mobile_edit_brithday.options.display_constellation') }}</div>
-                <n-switch />
+            </n-list-item>
+
+            <n-divider class="m-0! p-0!" />
+            <n-list-item>
+              <div class="flex w-full justify-between items-center">
+                <n-text class="text-14px shrink-0">
+                  {{ t('mobile_edit_brithday.options.display_constellation') }}
+                </n-text>
+                <n-switch class="shrink-0" />
               </div>
-            </div>
-          </div>
+            </n-list-item>
+          </n-list>
 
           <div class="flex justify-center mt-20px">
-            <div
-              class="w-20%"
-              style="
-                background: linear-gradient(145deg, #7eb7ac, #6fb0a4, #5fa89c);
-                border-radius: 30px;
-                padding: 10px 30px;
-                color: white;
-                font-weight: 500;
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-                text-align: center;
-                display: inline-block;
-              ">
+            <n-button strong secondary round type="primary" block>
               {{ t('mobile_edit_brithday.save_btn') }}
-            </div>
+            </n-button>
           </div>
         </div>
       </div>
diff --git a/src/mobile/views/my/MyAlbum.vue b/src/mobile/views/my/MyAlbum.vue
index e0fbad6c..d7af9501 100644
--- a/src/mobile/views/my/MyAlbum.vue
+++ b/src/mobile/views/my/MyAlbum.vue
@@ -11,7 +11,7 @@
       </template>
 
       <template #container>
-        <div class="flex flex-col bg-#fefefe overflow-auto h-full">
+        <div class="flex flex-col overflow-auto h-full">
           <div class="flex flex-col p-20px gap-20px">
             <!-- 加载状态 -->
             <div v-if="loading" class="flex justify-center items-center py-40px">
diff --git a/src/mobile/views/my/SimpleBio.vue b/src/mobile/views/my/SimpleBio.vue
index fe6fc88f..9596bec6 100644
--- a/src/mobile/views/my/SimpleBio.vue
+++ b/src/mobile/views/my/SimpleBio.vue
@@ -7,15 +7,21 @@
           <div class="flex flex-col flex-1 p-20px gap-20px">
             <div class="flex items-center">
               <div class="py-15px flex gap-10px w-full items-center justify-end">
-                <div class="bg-#E7EFE6 flex flex-wrap ps-2 items-center rounded-full gap-1 h-24px px-2">
+                <div class="bg-#E7EFE6 dark:bg-gray/20 flex flex-wrap ps-2 items-center rounded-full gap-1 h-24px px-2">
                   <span class="w-12px h-12px rounded-15px bg-#079669"></span>
-                  <span class="text-bold-style" style="font-size: 12px; color: #373838">
+                  <n-text style="font-size: 12px">
                     {{ t('mobile_my.online') }}
-                  </span>
+                  </n-text>
                 </div>
-                <svg @click="toSettings" class="iconpark-icon h-32px w-32px block"><use href="#wode-shezhi"></use></svg>
-                <svg @click="toScanQRCode" class="iconpark-icon h-32px w-32px block"><use href="#saoma"></use></svg>
-                <svg @click="handleBack" class="w-32px h-32px iconpark-icon"><use href="#right"></use></svg>
+                <svg @click="toSettings" class="dark:color-gray-200/90 iconpark-icon h-32px w-32px block">
+                  <use href="#wode-shezhi"></use>
+                </svg>
+                <svg @click="toScanQRCode" class="dark:color-gray-200/90 iconpark-icon h-32px w-32px block">
+                  <use href="#saoma"></use>
+                </svg>
+                <svg @click="handleBack" class="dark:color-gray-200/90 w-32px h-32px iconpark-icon">
+                  <use href="#right"></use>
+                </svg>
               </div>
             </div>
             <n-card size="small" class="rounded-lg" content-class="flex gap-20px items-center">