refactor: tab style modified

src/components/dialog/content/setting/WorkspacePanelContent.vue

@@ -9,17 +9,36 @@
         {{ workspaceName }}
       </h1>
     </div>
+    <TabsRoot v-model="activeTab">
       <div class="flex w-full items-center">
-      <TabList v-model="activeTab">
-        <Tab value="plan">{{ $t('workspacePanel.tabs.planCredits') }}</Tab>
-        <Tab value="members">
+        <TabsList class="flex items-center gap-2 pb-1">
+          <TabsTrigger
+            value="plan"
+            :class="
+              cn(
+                tabTriggerBase,
+                activeTab === 'plan' ? tabTriggerActive : tabTriggerInactive
+              )
+            "
+          >
+            {{ $t('workspacePanel.tabs.planCredits') }}
+          </TabsTrigger>
+          <TabsTrigger
+            value="members"
+            :class="
+              cn(
+                tabTriggerBase,
+                activeTab === 'members' ? tabTriggerActive : tabTriggerInactive
+              )
+            "
+          >
             {{
               $t('workspacePanel.tabs.membersCount', {
                 count: isInPersonalWorkspace ? 1 : members.length
               })
             }}
-        </Tab>
-      </TabList>
+          </TabsTrigger>
+        </TabsList>
 
         <Button
           v-if="permissions.canInviteMembers"
@@ -75,15 +94,13 @@
         </template>
       </div>
 
-    <SubscriptionPanelContentWorkspace
-      v-if="activeTab === 'plan'"
-      class="mt-4"
-    />
-    <MembersPanelContent
-      v-else-if="activeTab === 'members'"
-      :key="workspaceRole"
-      class="mt-4"
-    />
+      <TabsContent value="plan" class="mt-4">
+        <SubscriptionPanelContentWorkspace />
+      </TabsContent>
+      <TabsContent value="members" class="mt-4">
+        <MembersPanelContent :key="workspaceRole" />
+      </TabsContent>
+    </TabsRoot>
   </div>
 </template>
 
@@ -93,8 +110,7 @@ import Menu from 'primevue/menu'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Tab from '@/components/tab/Tab.vue'
-import TabList from '@/components/tab/TabList.vue'
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
 
 import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
 import MembersPanelContent from '@/components/dialog/content/setting/MembersPanelContent.vue'
@@ -103,6 +119,14 @@ import SubscriptionPanelContentWorkspace from '@/platform/cloud/subscription/com
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogService } from '@/services/dialogService'
+import { cn } from '@/utils/tailwindUtil'
+
+const tabTriggerBase =
+  'flex items-center justify-center shrink-0 px-2.5 py-2 text-sm rounded-lg cursor-pointer transition-all duration-200 outline-hidden border-none'
+const tabTriggerActive =
+  'bg-interface-menu-component-surface-hovered text-text-primary text-bold'
+const tabTriggerInactive =
+  'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'
 
 const { defaultTab = 'plan' } = defineProps<{
   defaultTab?: string
@@ -128,10 +152,6 @@ const { fetchMembers, fetchPendingInvites } = workspaceStore
 const { workspaceRole, permissions, uiConfig } = useWorkspaceUI()
 const activeTab = ref('plan')
 
-function setActiveTab(tab: string) {
-  activeTab.value = tab
-}
-
 const menu = ref<InstanceType<typeof Menu> | null>(null)
 
 function handleLeaveWorkspace() {
@@ -205,7 +225,7 @@ const menuItems = computed(() => {
 })
 
 onMounted(() => {
-  setActiveTab(defaultTab)
+  activeTab.value = defaultTab
   fetchMembers()
   fetchPendingInvites()
 })