From f15ec20cc031d809eb930270845696129bf5343c Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Fri, 22 Nov 2024 20:06:36 +0800
Subject: [PATCH] feat: add `size` property to `group-tabs` component

---
 src/renderer/components/DocHistory.vue        | 14 +++----------
 src/renderer/components/ExtensionManager.vue  | 14 +++----------
 src/renderer/components/GroupTabs.vue         | 21 +++++++++++++++----
 src/renderer/components/KeyboardShortcuts.vue | 15 +------------
 src/share/types.ts                            |  7 ++++++-
 5 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/src/renderer/components/DocHistory.vue b/src/renderer/components/DocHistory.vue
index 8b034cec..4a8227a1 100644
--- a/src/renderer/components/DocHistory.vue
+++ b/src/renderer/components/DocHistory.vue
@@ -4,7 +4,7 @@
       <div class="history">
         <div class="versions-wrapper" v-if="versions && versions.length">
           <div v-if="listType === 'all'" class="clear" @click="clearVersions">{{$t('doc-history.clear')}}({{sizeText}})</div>
-          <GroupTabs class="tabs" :tabs="getListTypes()" v-model="listType" />
+          <group-tabs class="x-tabs" size="small" :tabs="getListTypes()" v-model="listType" />
           <div class="versions" v-if="xVersions && xVersions.length">
             <div
               v-for="(version, i) in xVersions"
@@ -31,7 +31,7 @@
           </div>
         </div>
         <div class="content" v-if="content">
-          <GroupTabs class="tabs" :tabs="getDisplayTypes()" v-model="displayType" />
+          <group-tabs class="x-tabs" size="small" :tabs="getDisplayTypes()" v-model="displayType" />
           <div class="diff-tips" v-if="displayType === 'diff'">
             <div>{{$t('doc-history.history')}}</div>
             <div>{{$t('doc-history.current')}}</div>
@@ -524,16 +524,8 @@ onUnmounted(() => {
   pointer-events: none;
 }
 
-.tabs {
-  display: inline-flex;
+.versions-wrapper .x-tabs {
   margin-bottom: 8px;
-  z-index: 1;
-  flex: none;
-
-  ::v-deep(.tab) {
-    line-height: 1.5;
-    font-size: 14px;
-  }
 }
 
 .content {
diff --git a/src/renderer/components/ExtensionManager.vue b/src/renderer/components/ExtensionManager.vue
index 215cff54..4c03b306 100644
--- a/src/renderer/components/ExtensionManager.vue
+++ b/src/renderer/components/ExtensionManager.vue
@@ -3,7 +3,7 @@
     <div class="wrapper">
       <div class="body">
         <div class="side" ref="refSide">
-          <group-tabs class="tabs" :tabs="listTypes" v-model="listType" />
+          <group-tabs class="x-tabs" size="small" :tabs="listTypes" v-model="listType" />
           <div v-if="extensions.length > 0" class="list">
             <div
               v-for="item in extensions"
@@ -157,7 +157,7 @@
               </div>
             </div>
             <div class="content-wrapper">
-              <group-tabs class="tabs" :tabs="contentTypes" v-model="contentType" />
+              <group-tabs class="x-tabs" size="small" :tabs="contentTypes" v-model="contentType" />
               <template v-if="useNpmjsReadmePage">
                 <div v-show="iframeLoaded" class="content">
                   <iframe
@@ -806,16 +806,8 @@ onUnmounted(() => {
   }
 }
 
-.tabs {
-  display: inline-flex;
+.wrapper .body .x-tabs {
   margin-bottom: 8px;
-  z-index: 1;
-  flex: none;
-
-  ::v-deep(.tab) {
-    line-height: 1.5;
-    font-size: 14px;
-  }
 }
 
 .icon-extension {
diff --git a/src/renderer/components/GroupTabs.vue b/src/renderer/components/GroupTabs.vue
index bd55d5e8..ac352a89 100644
--- a/src/renderer/components/GroupTabs.vue
+++ b/src/renderer/components/GroupTabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tabs">
+  <div :class="{ tabs: true, small: size === 'small' }">
     <div
       v-for="tab of tabs"
       :key="tab.value"
@@ -12,15 +12,15 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-
-type Tab = { label: string, value: string }
+import type { LabelValueItem } from '@share/types'
 
 export default defineComponent({
   name: 'group-tabs',
   props: {
     modelValue: String,
+    size: String as () => 'small',
     tabs: {
-      type: Array as () => Tab[],
+      type: Array as () => LabelValueItem<string>[],
       required: true,
     }
   },
@@ -56,6 +56,19 @@ export default defineComponent({
       background: var(--g-color-94);
     }
   }
+
+  &.small {
+    display: inline-flex;
+    margin-bottom: 0;
+    z-index: 1;
+    flex: none;
+    justify-self: center;
+
+    .tab {
+      line-height: 1.5;
+      font-size: 14px;
+    }
+  }
 }
 
 @include dark-theme {
diff --git a/src/renderer/components/KeyboardShortcuts.vue b/src/renderer/components/KeyboardShortcuts.vue
index 804c9edf..c71a8a20 100644
--- a/src/renderer/components/KeyboardShortcuts.vue
+++ b/src/renderer/components/KeyboardShortcuts.vue
@@ -3,7 +3,7 @@
     <div class="wrapper">
       <div class="title-bar">
         <h3>{{ $t('keyboard-shortcuts.keyboard-shortcuts') }}</h3>
-        <group-tabs :tabs="tabs" v-model="tab" />
+        <group-tabs :tabs="tabs" size="small" v-model="tab" />
         <input v-model="filterStr" :placeholder="$t('keyboard-shortcuts.search')" />
       </div>
       <div class="list" ref="listRef">
@@ -413,19 +413,6 @@ onUnmounted(() => {
     max-width: 200px;
     font-size: 14px !important;
   }
-
-  .tabs {
-    display: inline-flex;
-    margin-bottom: 0;
-    z-index: 1;
-    flex: none;
-    justify-self: center;
-
-    ::v-deep(.tab) {
-      line-height: 1.5;
-      font-size: 14px;
-    }
-  }
 }
 
 .list {
diff --git a/src/share/types.ts b/src/share/types.ts
index 102f9a79..b94960f4 100644
--- a/src/share/types.ts
+++ b/src/share/types.ts
@@ -3,6 +3,11 @@ export interface PathItem {
   path: string;
 }
 
+export interface LabelValueItem<T> {
+  label: string;
+  value: T;
+}
+
 export interface FileItem extends PathItem { name: string }
 
 export interface FileStat {
@@ -35,5 +40,5 @@ export interface Doc extends PathItem {
 export interface Repo {
   name: string;
   path: string;
-  enableIndexing: boolean
+  enableIndexing: boolean;
 }