From 9f93f9e3d8ee47c3fbbb6b21c7376ffe438c087f Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Tue, 11 Jun 2024 17:56:51 +0800
Subject: [PATCH] eslint Vue template

---
 components/color-picker/ColorPickerPill.vue |  22 +--
 components/i/Create.vue                     | 147 ++++++++++----------
 components/i/Empty.vue                      |   8 +-
 components/i/Exception.vue                  |  20 +--
 components/i/SearchHistory.vue              |  71 +++++-----
 components/i/UserInfo.vue                   | 118 ++++++++--------
 components/i/action/Collect.vue             |  18 +--
 components/i/library/Collect.vue            |  26 ++--
 components/i/library/Edit.vue               |   2 +-
 components/i/library/Select.vue             |  97 ++++++-------
 components/i/search/Article.vue             |  25 ++--
 components/i/search/ExtraInfo.vue           | 102 +++++++-------
 components/i/search/Process.vue             |  62 ++++-----
 components/i/search/ProcessAction.vue       |  32 ++---
 components/md/renderer.vue                  |   6 +-
 components/prose/Chart.global.vue           |   6 +-
 layouts/default.vue                         |  20 +--
 pages/index.vue                             |  40 +++---
 pages/mdc.vue                               |  10 +-
 19 files changed, 417 insertions(+), 415 deletions(-)

diff --git a/components/color-picker/ColorPickerPill.vue b/components/color-picker/ColorPickerPill.vue
index 806ff56..d919b69 100644
--- a/components/color-picker/ColorPickerPill.vue
+++ b/components/color-picker/ColorPickerPill.vue
@@ -1,9 +1,9 @@
 <template>
-	<UTooltip :text="color.value" class="capitalize" :open-delay="500">
-		<UButton
-			color="white"
-			square
-			:ui="{
+  <UTooltip :text="color.value" class="capitalize" :open-delay="500">
+    <UButton
+      color="white"
+      square
+      :ui="{
 				color: {
 					white: {
 						solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
@@ -11,12 +11,12 @@
 					}
 				}
 			}"
-			:variant="color.value === selected.value ? 'solid' : 'ghost'"
-			@click.stop.prevent="$emit('select')"
-		>
-			<span class="inline-block w-3 h-3 rounded-full" :style="{ backgroundColor: color.hex }" />
-		</UButton>
-	</UTooltip>
+      :variant="color.value === selected.value ? 'solid' : 'ghost'"
+      @click.stop.prevent="$emit('select')"
+    >
+      <span class="inline-block w-3 h-3 rounded-full" :style="{ backgroundColor: color.hex }"/>
+    </UButton>
+  </UTooltip>
 </template>
 
 <script setup lang="ts">
diff --git a/components/i/Create.vue b/components/i/Create.vue
index bebec3d..209c1be 100644
--- a/components/i/Create.vue
+++ b/components/i/Create.vue
@@ -1,78 +1,79 @@
 <template>
-	<div class="max-w-screen-md w-full flex flex-col space-y-4 p-6">
-		<UCard
-			class="transition-[box-shadow] hover:ring-2 has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-primary-500 dark:has-[textarea:focus]:ring-primary-400"
-			:ui="cardUI"
-		>
-			<UTextarea
-				v-model="query"
-				name="createInput"
-				autoresize
-				placeholder="输入搜索内容..."
-				:rows="5"
-				variant="none"
-				:padded="false"
-				maxlength="2000"
-			/>
-			<div class="flex justify-between items-center">
-				<div class="flex items-center gap-2">
-					<UTooltip class="relative" :text="isPro ? '已开启专家搜索' : '已关闭专家搜索'" :shortcuts="[metaSymbol, 'O']">
-						<div v-show="!isPro" class="absolute w-7 h-0.5 rotate-45 top-3.5 left-1 bg-gray-700 dark:bg-gray-200 hover:bg-gray-900 dark:hover:bg-white rounded"/>
-						<UButton
-							:ui="{ rounded: 'rounded-full' }"
-							:icon="isPro ? 'i-heroicons-sparkles-20-solid' : 'i-heroicons-sparkles-20-solid'"
-							color="gray"
-							variant="ghost"
-							@click="handleTogglePro"
-						/>
-					</UTooltip>
-					<USelectMenu
-						v-model="selectedRepo"
-						:ui-menu="menuUI"
-						:options="$repos"
-						placeholder="选择 GitHub 项目"
-						value-attribute="label"
-						option-attribute="label"
-					>
-						<UTooltip v-if="!selectedRepo" :text="isPro ? '选择 GitHub 项目' : '选择 GitHub 项目（需开启专家搜索）'">
-							<UButton
-								:ui="{ rounded: 'rounded-full' }"
-								icon="i-simple-icons-github"
-								color="gray"
-								variant="ghost"
-								:disabled="!isPro"
-							/>
-						</UTooltip>
+  <div class="max-w-screen-md w-full flex flex-col space-y-4 p-6">
+    <UCard
+      class="transition-[box-shadow] hover:ring-2 has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-primary-500 dark:has-[textarea:focus]:ring-primary-400"
+      :ui="cardUI"
+    >
+      <UTextarea
+        v-model="query"
+        name="createInput"
+        autoresize
+        placeholder="输入搜索内容..."
+        :rows="5"
+        variant="none"
+        :padded="false"
+        maxlength="2000"
+      />
+      <div class="flex justify-between items-center">
+        <div class="flex items-center gap-2">
+          <UTooltip class="relative" :text="isPro ? '已开启专家搜索' : '已关闭专家搜索'" :shortcuts="[metaSymbol, 'O']">
+            <div v-show="!isPro"
+                 class="absolute w-7 h-0.5 rotate-45 top-3.5 left-1 bg-gray-700 dark:bg-gray-200 hover:bg-gray-900 dark:hover:bg-white rounded"/>
+            <UButton
+              :ui="{ rounded: 'rounded-full' }"
+              :icon="isPro ? 'i-heroicons-sparkles-20-solid' : 'i-heroicons-sparkles-20-solid'"
+              color="gray"
+              variant="ghost"
+              @click="handleTogglePro"
+            />
+          </UTooltip>
+          <USelectMenu
+            v-model="selectedRepo"
+            :ui-menu="menuUI"
+            :options="$repos"
+            placeholder="选择 GitHub 项目"
+            value-attribute="label"
+            option-attribute="label"
+          >
+            <UTooltip v-if="!selectedRepo" :text="isPro ? '选择 GitHub 项目' : '选择 GitHub 项目（需开启专家搜索）'">
+              <UButton
+                :ui="{ rounded: 'rounded-full' }"
+                icon="i-simple-icons-github"
+                color="gray"
+                variant="ghost"
+                :disabled="!isPro"
+              />
+            </UTooltip>
 
-						<UButton v-else color="gray" variant="ghost" :class="{ 'group': selectedRepo }">
-							<UIcon name="i-simple-icons-github" />
-							<span>{{ selectedRepo }}</span>
-							<UIcon name="i-heroicons-chevron-down-20-solid" class="text-xl flex group-hover:hidden" />
-							<UButton
-								v-if="selectedRepo"
-								class="hidden group-hover:flex"
-								icon="i-heroicons-x-mark-20-solid"
-								:padded="false"
-								color="gray"
-								variant="link"
-								@click.stop.prevent="handleClearRepo"
-							/>
-						</UButton>
-					</USelectMenu>
-				</div>
-				<UTooltip text="搜索" :shortcuts="[metaSymbol, '↵']">
-					<UButton
-						:ui="{ rounded: 'rounded-full' }"
-						icon="i-heroicons-chevron-right-20-solid"
-						:loading="loading"
-						:disabled="query === ''"
-						size="md"
-						@click="handleSearch"
-					/>
-				</UTooltip>
-			</div>
-		</UCard>
-	</div>
+            <UButton v-else color="gray" variant="ghost" :class="{ 'group': selectedRepo }">
+              <UIcon name="i-simple-icons-github"/>
+              <span>{{ selectedRepo }}</span>
+              <UIcon name="i-heroicons-chevron-down-20-solid" class="text-xl flex group-hover:hidden"/>
+              <UButton
+                v-if="selectedRepo"
+                class="hidden group-hover:flex"
+                icon="i-heroicons-x-mark-20-solid"
+                :padded="false"
+                color="gray"
+                variant="link"
+                @click.stop.prevent="handleClearRepo"
+              />
+            </UButton>
+          </USelectMenu>
+        </div>
+        <UTooltip text="搜索" :shortcuts="[metaSymbol, '↵']">
+          <UButton
+            :ui="{ rounded: 'rounded-full' }"
+            icon="i-heroicons-chevron-right-20-solid"
+            :loading="loading"
+            :disabled="query === ''"
+            size="md"
+            @click="handleSearch"
+          />
+        </UTooltip>
+      </div>
+    </UCard>
+  </div>
 </template>
 <script setup>
 const { $repos } = storeToRefs(useReposStore())
diff --git a/components/i/Empty.vue b/components/i/Empty.vue
index 31c3a6f..27a0327 100644
--- a/components/i/Empty.vue
+++ b/components/i/Empty.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="flex flex-col justify-center h-72 items-center text-gray-300" :class="{ 'h-36': size === 'xs' }">
-		<UIcon name="i-heroicons-inbox" class="text-6xl" />
-		<div>暂无数据</div>
-	</div>
+  <div class="flex flex-col justify-center h-72 items-center text-gray-300" :class="{ 'h-36': size === 'xs' }">
+    <UIcon name="i-heroicons-inbox" class="text-6xl"/>
+    <div>暂无数据</div>
+  </div>
 </template>
 <script setup>
 defineProps({
diff --git a/components/i/Exception.vue b/components/i/Exception.vue
index 2f5fb60..5c10624 100644
--- a/components/i/Exception.vue
+++ b/components/i/Exception.vue
@@ -1,14 +1,14 @@
 <template>
-	<div class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
-		<div class="text-center">
-			<p class="text-base font-semibold text-red-600">{{ code }}</p>
-			<h1 class="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">{{ errorTitle }}</h1>
-			<p class="mt-6 text-base leading-7">{{ errorDescription }}</p>
-			<div class="mt-10 flex items-center justify-center gap-x-6">
-				<UButton to="/" size="lg">返回首页</UButton>
-			</div>
-		</div>
-	</div>
+  <div class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
+    <div class="text-center">
+      <p class="text-base font-semibold text-red-600">{{ code }}</p>
+      <h1 class="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">{{ errorTitle }}</h1>
+      <p class="mt-6 text-base leading-7">{{ errorDescription }}</p>
+      <div class="mt-10 flex items-center justify-center gap-x-6">
+        <UButton to="/" size="lg">返回首页</UButton>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup>
 const props = defineProps({
diff --git a/components/i/SearchHistory.vue b/components/i/SearchHistory.vue
index a17a5d1..bf67d08 100644
--- a/components/i/SearchHistory.vue
+++ b/components/i/SearchHistory.vue
@@ -1,39 +1,40 @@
 <template>
-	<div class="flex flex-col overflow-hidden group">
-		<div class="flex justify-between">
-			<UButton
-				class="flex-grow cursor-default hover:bg-transparent dark:hover:bg-transparent"
-				leading-icon="i-heroicons-queue-list"
-				color="gray"
-				variant="ghost"
-				size="md"
-				label="浏览记录"
-			/>
-			<UButton
-				class="hidden group-hover:flex"
-				label="清空"
-				size="md"
-				variant="link"
-				@click="handleClear"
-			/>
-		</div>
-		<ClientOnly>
-			<div v-auto-animate class="flex overflow-y-auto flex-col gap-1 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
-				<template v-for="item in $searchHistory.reverse()" :key="item.c_id">
-					<UButton
-						class="flex text-gray-400"
-						color="gray"
-						variant="ghost"
-						size="xs"
-						long
-						:to="`/search/${item.c_id}`"
-					>
-						<div class="flex-grow truncate" :title="item.title">{{ item.title }}</div>
-					</UButton>
-				</template>
-			</div>
-		</ClientOnly>
-	</div>
+  <div class="flex flex-col overflow-hidden group">
+    <div class="flex justify-between">
+      <UButton
+        class="flex-grow cursor-default hover:bg-transparent dark:hover:bg-transparent"
+        leading-icon="i-heroicons-queue-list"
+        color="gray"
+        variant="ghost"
+        size="md"
+        label="浏览记录"
+      />
+      <UButton
+        class="hidden group-hover:flex"
+        label="清空"
+        size="md"
+        variant="link"
+        @click="handleClear"
+      />
+    </div>
+    <ClientOnly>
+      <div v-auto-animate
+           class="flex overflow-y-auto flex-col gap-1 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
+        <template v-for="item in $searchHistory.reverse()" :key="item.c_id">
+          <UButton
+            class="flex text-gray-400"
+            color="gray"
+            variant="ghost"
+            size="xs"
+            long
+            :to="`/search/${item.c_id}`"
+          >
+            <div class="flex-grow truncate" :title="item.title">{{ item.title }}</div>
+          </UButton>
+        </template>
+      </div>
+    </ClientOnly>
+  </div>
 </template>
 <script setup>
 const { $searchHistory } = storeToRefs(useSearchStore())
diff --git a/components/i/UserInfo.vue b/components/i/UserInfo.vue
index 72c315f..d756056 100644
--- a/components/i/UserInfo.vue
+++ b/components/i/UserInfo.vue
@@ -1,63 +1,63 @@
 <template>
-	<div class="flex flex-col w-full">
-		<ClientOnly>
-			<template v-if="$isSignIn">
-				<div class="flex flex-grow justify-between items-center p-4">
-					<UDropdown class="flex flex-grow" :items="items">
-						<UButton class="flex flex-grow" color="gray" variant="ghost">
-							<div class="flex flex-grow items-center gap-2">
-								<UAvatar :src="$info.avatar_url" />
-								<div>{{ $info.nickname }}</div>
-								<UBadge v-if="$info.pro" size="xs" color="yellow" variant="soft" label="PRO" />
-								<UBadge v-else size="xs" color="gray" variant="soft" label="FREE" />
-							</div>
-							<UIcon name="i-heroicons-chevron-down-20-solid" class="text-lg" />
-						</UButton>
-					</UDropdown>
-				</div>
-				<UDivider />
-			</template>
-		</ClientOnly>
-		<div class="flex justify-between gap-2 p-4">
-			<UButton
-				color="gray"
-				variant="ghost"
-				label="问题反馈"
-			/>
-			<ClientOnly>
-				<div class="flex">
-					<ColorPicker />
-					<USelectMenu
-						v-model="colorMode.preference"
-						:ui-menu="{ width: 'w-32' }"
-						:options="themeItems"
-						value-attribute="value"
-					>
-						<UButton
-							color="gray"
-							variant="ghost"
-							square
-							:icon="colorMode.value === 'dark' ? 'i-heroicons-moon-16-solid' : 'i-heroicons-sun-16-solid'"
-							aria-label="Theme"
-						/>
-					</USelectMenu>
-					<USelectMenu
-						v-if="false"
-						:ui-menu="{ width: 'w-32' }"
-						:model-value="$lang"
-						:options="$langOptions"
-						value-attribute="value"
-					>
-						<UButton
-							icon="i-heroicons-language-16-solid"
-							color="gray"
-							variant="ghost"
-						/>
-					</USelectMenu>
-				</div>
-			</ClientOnly>
-		</div>
-	</div>
+  <div class="flex flex-col w-full">
+    <ClientOnly>
+      <template v-if="$isSignIn">
+        <div class="flex flex-grow justify-between items-center p-4">
+          <UDropdown class="flex flex-grow" :items="items">
+            <UButton class="flex flex-grow" color="gray" variant="ghost">
+              <div class="flex flex-grow items-center gap-2">
+                <UAvatar :src="$info.avatar_url"/>
+                <div>{{ $info.nickname }}</div>
+                <UBadge v-if="$info.pro" size="xs" color="yellow" variant="soft" label="PRO"/>
+                <UBadge v-else size="xs" color="gray" variant="soft" label="FREE"/>
+              </div>
+              <UIcon name="i-heroicons-chevron-down-20-solid" class="text-lg"/>
+            </UButton>
+          </UDropdown>
+        </div>
+        <UDivider/>
+      </template>
+    </ClientOnly>
+    <div class="flex justify-between gap-2 p-4">
+      <UButton
+        color="gray"
+        variant="ghost"
+        label="问题反馈"
+      />
+      <ClientOnly>
+        <div class="flex">
+          <ColorPicker/>
+          <USelectMenu
+            v-model="colorMode.preference"
+            :ui-menu="{ width: 'w-32' }"
+            :options="themeItems"
+            value-attribute="value"
+          >
+            <UButton
+              color="gray"
+              variant="ghost"
+              square
+              :icon="colorMode.value === 'dark' ? 'i-heroicons-moon-16-solid' : 'i-heroicons-sun-16-solid'"
+              aria-label="Theme"
+            />
+          </USelectMenu>
+          <USelectMenu
+            v-if="false"
+            :ui-menu="{ width: 'w-32' }"
+            :model-value="$lang"
+            :options="$langOptions"
+            value-attribute="value"
+          >
+            <UButton
+              icon="i-heroicons-language-16-solid"
+              color="gray"
+              variant="ghost"
+            />
+          </USelectMenu>
+        </div>
+      </ClientOnly>
+    </div>
+  </div>
 </template>
 <script setup>
 const { $signOut } = useUserStore()
diff --git a/components/i/action/Collect.vue b/components/i/action/Collect.vue
index a4a87ff..335e33e 100644
--- a/components/i/action/Collect.vue
+++ b/components/i/action/Collect.vue
@@ -1,13 +1,13 @@
 <template>
-	<UDropdown class="flex flex-grow" :items="actionItems">
-		<UButton
-			color="gray"
-			variant="ghost"
-			square
-			icon="i-heroicons-ellipsis-horizontal"
-		/>
-	</UDropdown>
-	<ILibraryEdit :id="id" ref="refEdit" />
+  <UDropdown class="flex flex-grow" :items="actionItems">
+    <UButton
+      color="gray"
+      variant="ghost"
+      square
+      icon="i-heroicons-ellipsis-horizontal"
+    />
+  </UDropdown>
+  <ILibraryEdit :id="id" ref="refEdit"/>
 </template>
 <script setup>
 import { IConfirm } from '#components'
diff --git a/components/i/library/Collect.vue b/components/i/library/Collect.vue
index e046bb7..bc924ec 100644
--- a/components/i/library/Collect.vue
+++ b/components/i/library/Collect.vue
@@ -1,17 +1,17 @@
 <template>
-	<ULink :to="`/library/${item.id}`">
-		<UCard :ui="cardUI">
-			<div class="flex flex-col gap-1">
-				<div>{{ item.name }}</div>
-				<div class="flex">
-					<div class="flex items-center text-gray-500 text-sm gap-0.5">
-						<UIcon name="i-heroicons-square-3-stack-3d" />
-						<span>{{ item.record_count }}</span>
-					</div>
-				</div>
-			</div>
-		</UCard>
-	</ULink>
+  <ULink :to="`/library/${item.id}`">
+    <UCard :ui="cardUI">
+      <div class="flex flex-col gap-1">
+        <div>{{ item.name }}</div>
+        <div class="flex">
+          <div class="flex items-center text-gray-500 text-sm gap-0.5">
+            <UIcon name="i-heroicons-square-3-stack-3d"/>
+            <span>{{ item.record_count }}</span>
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </ULink>
 </template>
 <script setup>
 defineProps({
diff --git a/components/i/library/Edit.vue b/components/i/library/Edit.vue
index b35741b..71dd9c2 100644
--- a/components/i/library/Edit.vue
+++ b/components/i/library/Edit.vue
@@ -1,5 +1,5 @@
 <template>
-	<ILibraryCreate :id="id" ref="refCreate" />
+  <ILibraryCreate :id="id" ref="refCreate"/>
 </template>
 <script setup>
 defineProps({
diff --git a/components/i/library/Select.vue b/components/i/library/Select.vue
index 7ee0ecf..18ecfc5 100644
--- a/components/i/library/Select.vue
+++ b/components/i/library/Select.vue
@@ -1,52 +1,53 @@
 <template>
-	<UModal v-model="$isLibrarySelectOpen" :ui="{ width: 'w-96 sm:max-w-screen-md' }">
-		<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-			<template #header>
-				<div class="flex items-center justify-between">
-					<div class="text-xl">选择合集</div>
-					<UButton
-						leading-icon="i-heroicons-x-mark-20-solid"
-						color="gray"
-						variant="ghost"
-						@click="handleClose"
-					/>
-				</div>
-			</template>
-			<div class="flex flex-col gap-4">
-				<UButton
-					leading-icon="i-heroicons-plus-20-solid"
-					label="创建新合集"
-					color="gray"
-					@click="handleOpenCreate"
-				/>
-				<div class="flex flex-col gap-2">
-					<UButton 
-						v-for="item in $collection"
-						:key="item.id" 
-						color="white" 
-						size="md" 
-						class="flex"
-						@click="handleSelected(item.id)"
-					>
-						<div class="flex flex-grow justify-between items-center">
-							<div>{{ item.name }}</div>
-							<UIcon v-if="selected.includes(item.id)" name="i-heroicons-check-circle-20-solid" class="text-primary text-lg" />
-						</div>
-					</UButton>
-				</div>
-			</div>
-			<template #footer>
-				<div class="flex justify-end">
-					<UButton
-						size="md"
-						label="保存"
-						:loading="loading"
-						@click="handleSave"
-					/>
-				</div>
-			</template>
-		</UCard>
-	</UModal>
+  <UModal v-model="$isLibrarySelectOpen" :ui="{ width: 'w-96 sm:max-w-screen-md' }">
+    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div class="text-xl">选择合集</div>
+          <UButton
+            leading-icon="i-heroicons-x-mark-20-solid"
+            color="gray"
+            variant="ghost"
+            @click="handleClose"
+          />
+        </div>
+      </template>
+      <div class="flex flex-col gap-4">
+        <UButton
+          leading-icon="i-heroicons-plus-20-solid"
+          label="创建新合集"
+          color="gray"
+          @click="handleOpenCreate"
+        />
+        <div class="flex flex-col gap-2">
+          <UButton
+            v-for="item in $collection"
+            :key="item.id"
+            color="white"
+            size="md"
+            class="flex"
+            @click="handleSelected(item.id)"
+          >
+            <div class="flex flex-grow justify-between items-center">
+              <div>{{ item.name }}</div>
+              <UIcon v-if="selected.includes(item.id)" name="i-heroicons-check-circle-20-solid"
+                     class="text-primary text-lg"/>
+            </div>
+          </UButton>
+        </div>
+      </div>
+      <template #footer>
+        <div class="flex justify-end">
+          <UButton
+            size="md"
+            label="保存"
+            :loading="loading"
+            @click="handleSave"
+          />
+        </div>
+      </template>
+    </UCard>
+  </UModal>
 </template>
 <script setup>
 const { $isLibrarySelectOpen, $selectCollectionId, $selectThreadId, $collection } = storeToRefs(useLibraryStore())
diff --git a/components/i/search/Article.vue b/components/i/search/Article.vue
index 96c20c1..c6ac670 100644
--- a/components/i/search/Article.vue
+++ b/components/i/search/Article.vue
@@ -1,16 +1,13 @@
 <template>
-	<div class="flex flex-col lg:flex-row gap-6 space-x-0 lg:space-x-6">
-		<div class="flex flex-grow flex-col gap-6">
-			<div class="grid">
-				<slot name="title" />
-			</div>
-			<slot />
-		</div>
-		<div v-if="$slots.extra" class="flex flex-col w-full lg:w-64 flex-shrink-0 gap-6">
-			<slot name="extra" />
-		</div>
-	</div>
+  <div class="flex flex-col lg:flex-row gap-6 space-x-0 lg:space-x-6">
+    <div class="flex flex-grow flex-col gap-6">
+      <div class="grid">
+        <slot name="title"/>
+      </div>
+      <slot/>
+    </div>
+    <div v-if="$slots.extra" class="flex flex-col w-full lg:w-64 flex-shrink-0 gap-6">
+      <slot name="extra"/>
+    </div>
+  </div>
 </template>
-<script setup>
-
-</script>
\ No newline at end of file
diff --git a/components/i/search/ExtraInfo.vue b/components/i/search/ExtraInfo.vue
index 02daf81..7b74d01 100644
--- a/components/i/search/ExtraInfo.vue
+++ b/components/i/search/ExtraInfo.vue
@@ -1,54 +1,56 @@
 <template>
-	<div class="flex flex-col gap-4 sticky top-16">
-		<div class="text-xl flex items-center space-x-1">
-			<UIcon name="i-heroicons-square-3-stack-3d-20-solid" />
-			<span>补充信息</span>
-		</div>
-		<template v-for="(item, index) in data" :key="index">
-			<template v-if="item.ready">
-				<template v-if="item.type === 'search_relate_repo'">
-					<template v-if="item.data.length">
-						<template v-for="(chart, cIndex) in item.data" :key="cIndex">
-							<UCard :ui="cardUI">
-								<template v-if="chart.info">
-									<div class="flex mb-2">
-										<div class="flex items-center gap-1 text-sm overflow-hidden">
-											<UIcon class="flex-shrink-0" name="i-simple-icons-github" />
-											<ULink class="flex-grow truncate underline" :to="chart.info.url" target="_blank" :title="chart.info.description">{{ chart.info.name }}</ULink>
-											<UIcon class="flex-shrink-0" name="i-heroicons-arrow-top-right-on-square" />
-										</div>
-									</div>
-								</template>
-								<ProseChart
-									type="line"
-									:labels="chart.labels"
-									:data="chart.data"
-									:info="chart.info"
-									simple
-								/>
-								<div class="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">{{ item.title }}</div>
-							</UCard>
-						</template>
-					</template>
-					<template v-else>
-						<UCard :ui="cardUI">
-							<IEmpty size="xs"/>
-						</UCard>
-					</template>
-				</template>
-			</template>
-			<template v-else>
-				<UCard :ui="cardUI">
-					<div class="flex flex-col gap-1">
-						<USkeleton class="h-4" />
-						<USkeleton class="h-4 w-2/3" />
-						<USkeleton class="h-4" />
-						<USkeleton class="h-4 w-2/3" />
-					</div>
-				</UCard>
-			</template>
-		</template>
-	</div>
+  <div class="flex flex-col gap-4 sticky top-16">
+    <div class="text-xl flex items-center space-x-1">
+      <UIcon name="i-heroicons-square-3-stack-3d-20-solid"/>
+      <span>补充信息</span>
+    </div>
+    <template v-for="(item, index) in data" :key="index">
+      <template v-if="item.ready">
+        <template v-if="item.type === 'search_relate_repo'">
+          <template v-if="item.data.length">
+            <template v-for="(chart, cIndex) in item.data" :key="cIndex">
+              <UCard :ui="cardUI">
+                <template v-if="chart.info">
+                  <div class="flex mb-2">
+                    <div class="flex items-center gap-1 text-sm overflow-hidden">
+                      <UIcon class="flex-shrink-0" name="i-simple-icons-github"/>
+                      <ULink class="flex-grow truncate underline" :to="chart.info.url" target="_blank"
+                             :title="chart.info.description">{{ chart.info.name }}
+                      </ULink>
+                      <UIcon class="flex-shrink-0" name="i-heroicons-arrow-top-right-on-square"/>
+                    </div>
+                  </div>
+                </template>
+                <ProseChart
+                  type="line"
+                  :labels="chart.labels"
+                  :data="chart.data"
+                  :info="chart.info"
+                  simple
+                />
+                <div class="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">{{ item.title }}</div>
+              </UCard>
+            </template>
+          </template>
+          <template v-else>
+            <UCard :ui="cardUI">
+              <IEmpty size="xs"/>
+            </UCard>
+          </template>
+        </template>
+      </template>
+      <template v-else>
+        <UCard :ui="cardUI">
+          <div class="flex flex-col gap-1">
+            <USkeleton class="h-4"/>
+            <USkeleton class="h-4 w-2/3"/>
+            <USkeleton class="h-4"/>
+            <USkeleton class="h-4 w-2/3"/>
+          </div>
+        </UCard>
+      </template>
+    </template>
+  </div>
 </template>
 <script setup>
 defineProps({
diff --git a/components/i/search/Process.vue b/components/i/search/Process.vue
index 7de0520..33d648a 100644
--- a/components/i/search/Process.vue
+++ b/components/i/search/Process.vue
@@ -1,35 +1,35 @@
 <template>
-	<UCard :ui="{ body: { padding: 'p-4 sm:p-4' } }">
-		<div class="flex justify-between items-center">
-			<div class="flex items-center gap-2 text-lg">
-				<UIcon name="i-heroicons-sparkles-20-solid" />
-				搜索过程
-			</div>
-			<UButton
-				size="md"
-				color="gray"
-				variant="ghost"
-				:icon="openCollapse ? 'i-heroicons-chevron-up-20-solid' : 'i-heroicons-chevron-down-20-solid'"
-				:ui="{ rounded: 'rounded-full' }"
-				@click="handleToggleCollapse"
-			/>
-		</div>
-		<ICollapse :open="openCollapse" class="mt-2">
-			<div v-auto-animate class="flex flex-col gap-2 w-full text-gray-500 dark:text-gray-400">
-				<template v-if="status !== 'finish' && !actions.length">
-					<USkeleton class="h-4" />
-					<USkeleton class="h-4 w-2/3" />
-				</template>
-				<template v-for="(action, index) in actions" :key="action.action">
-					<ISearchProcessAction
-						:action="action"
-						:last="actions.length === index + 1"
-						:status="status"
-					/>
-				</template>
-			</div>
-		</ICollapse>
-	</UCard>
+  <UCard :ui="{ body: { padding: 'p-4 sm:p-4' } }">
+    <div class="flex justify-between items-center">
+      <div class="flex items-center gap-2 text-lg">
+        <UIcon name="i-heroicons-sparkles-20-solid"/>
+        搜索过程
+      </div>
+      <UButton
+        size="md"
+        color="gray"
+        variant="ghost"
+        :icon="openCollapse ? 'i-heroicons-chevron-up-20-solid' : 'i-heroicons-chevron-down-20-solid'"
+        :ui="{ rounded: 'rounded-full' }"
+        @click="handleToggleCollapse"
+      />
+    </div>
+    <ICollapse :open="openCollapse" class="mt-2">
+      <div v-auto-animate class="flex flex-col gap-2 w-full text-gray-500 dark:text-gray-400">
+        <template v-if="status !== 'finish' && !actions.length">
+          <USkeleton class="h-4"/>
+          <USkeleton class="h-4 w-2/3"/>
+        </template>
+        <template v-for="(action, index) in actions" :key="action.action">
+          <ISearchProcessAction
+            :action="action"
+            :last="actions.length === index + 1"
+            :status="status"
+          />
+        </template>
+      </div>
+    </ICollapse>
+  </UCard>
 </template>
 <script setup>
 const props = defineProps({
diff --git a/components/i/search/ProcessAction.vue b/components/i/search/ProcessAction.vue
index b61197a..adf7a42 100644
--- a/components/i/search/ProcessAction.vue
+++ b/components/i/search/ProcessAction.vue
@@ -1,20 +1,20 @@
 <template>
-	<div class="text-base flex items-center gap-1">
-		<UIcon :name="item.icon" />
-		{{ item.name }}
-	</div>
-	<template v-if="['rephrase_question', 'tool_select'].includes((action.action))">
-		<div class="pl-5">
-			<IMdMdc :content="action.output" size="sm" />
-		</div>
-	</template>
-	<template v-else-if="['search_file', 'search_web'].includes(action.action)">
-		<div class="text-xs pl-5">找到 {{ action.output.length }} 条来源</div>
-	</template>
-	<template v-if="last && status !== 'finish'">
-		<USkeleton class="h-4" />
-		<USkeleton class="h-4 w-2/3" />
-	</template>
+  <div class="text-base flex items-center gap-1">
+    <UIcon :name="item.icon"/>
+    {{ item.name }}
+  </div>
+  <template v-if="['rephrase_question', 'tool_select'].includes((action.action))">
+    <div class="pl-5">
+      <IMdMdc :content="action.output" size="sm"/>
+    </div>
+  </template>
+  <template v-else-if="['search_file', 'search_web'].includes(action.action)">
+    <div class="text-xs pl-5">找到 {{ action.output.length }} 条来源</div>
+  </template>
+  <template v-if="last && status !== 'finish'">
+    <USkeleton class="h-4"/>
+    <USkeleton class="h-4 w-2/3"/>
+  </template>
 </template>
 <script setup>
 const props = defineProps({
diff --git a/components/md/renderer.vue b/components/md/renderer.vue
index fd20533..00d0459 100644
--- a/components/md/renderer.vue
+++ b/components/md/renderer.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="grid grid-cols-1">
-		<article class="prose dark:prose-invert max-w-none" v-html="mdHtml"/>
-	</div>
+  <div class="grid grid-cols-1">
+    <article class="prose dark:prose-invert max-w-none" v-html="mdHtml"/>
+  </div>
 </template>
 <script setup>
 import MarkdownIt from 'markdown-it'
diff --git a/components/prose/Chart.global.vue b/components/prose/Chart.global.vue
index f13cba3..8391d6b 100644
--- a/components/prose/Chart.global.vue
+++ b/components/prose/Chart.global.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="w-full relative" style="aspect-ratio: 2/1">
-		<canvas ref="refChart" :aria-label="title"/>
-	</div>
+  <div class="w-full relative" style="aspect-ratio: 2/1">
+    <canvas ref="refChart" :aria-label="title"/>
+  </div>
 </template>
 <script setup>
 import { Chart } from 'chart.js/auto';
diff --git a/layouts/default.vue b/layouts/default.vue
index fb08766..9faaf65 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,14 +1,14 @@
 <template>
-	<div class="flex min-h-screen">
-		<div class="fixed top-0 w-64 hidden md:flex flex-col h-screen">
-			<IAside />
-		</div>
-		<div class="w-full ml-0 md:ml-64 bg-white dark:bg-black flex flex-grow">
-			<slot />
-		</div>
-	</div>
-	<ILibraryCreate />
-	<ILibrarySelect @success="handleCollectSuccess" />
+  <div class="flex min-h-screen">
+    <div class="fixed top-0 w-64 hidden md:flex flex-col h-screen">
+      <IAside/>
+    </div>
+    <div class="w-full ml-0 md:ml-64 bg-white dark:bg-black flex flex-grow">
+      <slot/>
+    </div>
+  </div>
+  <ILibraryCreate/>
+  <ILibrarySelect @success="handleCollectSuccess"/>
 </template>
 <script setup>
 const selectCollectData = ref(null)
diff --git a/pages/index.vue b/pages/index.vue
index b6f48d6..84ff8f9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,24 +1,24 @@
 <template>
-	<div class="flex flex-col items-center justify-center w-full h-full">
-		<ILogo />
-		<div class="mt-2">开源搜索，直达结果</div>
-		<ICreate ref="refCreate" />
-		<div class="max-w-screen-md w-full p-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
-			<template v-for="(item, index) in recommendQuestions" :key="index">
-				<UButton
-					class="flex justify-between"
-					color="gray"
-					variant="soft"
-					size="md"
-					:trailing-icon="item.c_id ? 'i-heroicons-chevron-right-20-solid' : 'i-heroicons-plus-20-solid'"
-					:label="item.title"
-					:to="item.c_id ? `/search/${item.c_id}` : ''"
-					@click="handleSearch(item)"
-				/>
-			</template>
-		</div>
-	</div>
-	<IMenuSider fixed />
+  <div class="flex flex-col items-center justify-center w-full h-full">
+    <ILogo/>
+    <div class="mt-2">开源搜索，直达结果</div>
+    <ICreate ref="refCreate"/>
+    <div class="max-w-screen-md w-full p-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <template v-for="(item, index) in recommendQuestions" :key="index">
+        <UButton
+          class="flex justify-between"
+          color="gray"
+          variant="soft"
+          size="md"
+          :trailing-icon="item.c_id ? 'i-heroicons-chevron-right-20-solid' : 'i-heroicons-plus-20-solid'"
+          :label="item.title"
+          :to="item.c_id ? `/search/${item.c_id}` : ''"
+          @click="handleSearch(item)"
+        />
+      </template>
+    </div>
+  </div>
+  <IMenuSider fixed/>
 </template>
 <script setup>
 const recommendQuestions = [
diff --git a/pages/mdc.vue b/pages/mdc.vue
index de1f673..534d10b 100644
--- a/pages/mdc.vue
+++ b/pages/mdc.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="w-full p-6">
-		<IMdMdc :content="lineChart"/>
-		<UDivider />
-		<IMdMdc :content="tableChart"/>
-	</div>
+  <div class="w-full p-6">
+    <IMdMdc :content="lineChart"/>
+    <UDivider/>
+    <IMdMdc :content="tableChart"/>
+  </div>
 </template>
 <script setup>
 const lineChart = `
-- 
GitLab