style: format code

Author: jiazengp

.vitepress/theme/components/Card.vue

@@ -4,8 +4,6 @@ import { computed } from 'vue'
 
 import { isLinkExternal, isRelativeLink } from '../utils'
 
-import '../styles/card.scss'
-
 interface CardProps {
   /** Card title */
   title: string
@@ -167,3 +165,206 @@ const descText = computed(() => {
     <span class="i-logos-google-drive" />
   </div>
 </template>
+
+<style lang="scss">
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-content: flex-start;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 0.75rem;
+  border: 1px solid transparent;
+  background-color: var(--vp-c-bg-alt);
+  color: inherit;
+
+  transition:
+    all 0.5s,
+    box-shadow 0.25s ease,
+    border-color 0.25s ease !important;
+
+  text-decoration: none !important;
+
+  &:hover {
+    border: 1px var(--vp-c-brand-2) solid;
+  }
+}
+
+.card-hover:hover {
+  transform: translate3d(0, -4px, 0);
+  border-color: var(--vp-c-brand-1);
+  box-shadow: var(--vp-shadow-2);
+}
+
+[card-grid] {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  [card-grid] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.card-theme-normal {
+  max-width: 360px;
+  margin: 1rem 0.5rem;
+
+  .card-cover-contanier {
+    position: relative;
+    overflow: hidden;
+    width: auto;
+    margin: 0;
+    height: 160px;
+    border-radius: 0.75rem 0.75rem 0 0;
+  }
+
+  .card-footer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    padding: 1.25rem 1rem;
+    margin: 0;
+  }
+
+  hr {
+    margin: 0.25em 0;
+  }
+}
+
+@media (max-width: 419px) {
+  .card-theme-normal {
+    max-width: 95%;
+  }
+}
+
+.card-icon {
+  width: 2em !important;
+  height: 2em !important;
+  background-color: var(--vp-c-bg-soft);
+  margin-right: 1em;
+  padding: 1em;
+}
+
+.card-logo {
+  width: 3em;
+  height: 3em;
+  margin-right: 1em;
+  border-radius: 50%;
+}
+
+.card-content,
+.card-footer {
+  flex: 1;
+  width: calc(100% - 6em);
+}
+
+.card-title {
+  font-weight: 500;
+  font-size: 1.1em;
+  width: 95%;
+  font-family: var(--vp-font-family-subtitle);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.card-desc {
+  color: #888;
+  font-size: 0.9em;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  align-items: stretch;
+  justify-content: center;
+
+  .card {
+    flex-basis: calc(50% - 3rem);
+    max-width: unset;
+    margin: 0.5rem;
+
+    @media (max-width: 959px) {
+      flex-basis: 100%;
+    }
+
+    @media (max-width: 719px) {
+      font-size: 0.95rem;
+    }
+
+    @media (max-width: 419px) {
+      font-size: 0.9rem;
+    }
+  }
+}
+
+.card-theme-medium {
+  width: auto;
+  margin: 1rem 0.5rem;
+  padding: 0.38rem;
+
+  .card-footer {
+    display: flex;
+    align-items: center;
+  }
+
+  .no-logo {
+    padding-left: 1rem;
+  }
+
+  .card-logo {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-left: 0.4rem;
+  }
+
+  .card-icon {
+    margin-left: 0.5rem;
+  }
+
+  .card-title {
+    font-size: 1rem;
+  }
+
+  .card-desc {
+    width: 95%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &::after {
+    content: '';
+    --card-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 7c0 .55.45 1 1 1h7.59l-8.88 8.88a.996.996 0 1 0 1.41 1.41L16 9.41V17c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1z'/%3E%3C/svg%3E");
+    mask: var(--card-icon) no-repeat !important;
+    -webkit-mask: var(--card-icon) no-repeat !important;
+    mask-position: center;
+    -webkit-mask-position: center;
+    mask-size: 100% 100%;
+    background-color: currentColor;
+    width: 18px !important;
+    height: 18px !important;
+    margin-top: -26px !important;
+    color: #ccc !important;
+    transform: scale(0.85);
+  }
+
+  &[is-external-link='false']::after {
+    display: none;
+  }
+
+  hr {
+    display: none;
+  }
+}
+</style>

.vitepress/theme/components/DocReaction.vue

@@ -34,7 +34,7 @@ const feedbackMessage = computed(() => {
     : theme.value.docReaction.feedbackFailMsg
 })
 
-const additionalMessage = computed(() => {
+const additionalMessage = computed((): string => {
   const isFormEditingOrSuccess = feedbackForm.value?.isEditing || reaction.setReactionResponse?.statusCode === 200
   const isDislikeState = reaction.reactionState === 'dislike'
 
@@ -54,7 +54,7 @@ const styles = computed(() => {
     }
   }
   return {
-    container: 'border-t border-[var(--vp-c-divider)] border-t pt-36px mt-24px grid gap-row-8px',
+    container: 'border-t border-[var(--vp-c-divider)] border-t-solid border-t pt-36px mt-24px grid gap-row-8px',
     message: 'inline-block fill-current-color flex-basis-20px flex-shrink-0 font-size-1rem mr-2 font-[var(--vp-font-family-subtitle)]',
     buttonContainer: 'flex mt-3',
     button: 'font-size-20px h-36px line-height-36px mr-12px text-center w-60px rounded-4px bg-[var(--vp-c-bg-soft)]',

.vitepress/theme/composables/useSSOAuth.ts

@@ -1,7 +1,7 @@
 import type { useTokenManager } from './useTokenManager'
 import { isObject } from 'lodash-es'
 import { toCamelCaseObject } from '@/utils'
-import { oauth as interKnotOauth } from '../apis/inter-knot.site/'
+import { oauth as interKnotOauth } from '../apis/inter-knot.site'
 import { createAuthError } from '../utils/auth-errors'
 import { log, LogGroup } from '../utils/auth-logger'
 

.vitepress/theme/layouts/Headline.vue

@@ -46,15 +46,15 @@ function handleButtonClick() {
 
 <template>
   <div class="slide-enter Headline">
-    <div class="border-b pb-6">
+    <div class="pb-6 border-b">
       <div class="headline-header flex items-start justify-between">
         <div class="headline-content">
           <h1
-            class="title text-3xl font-bold tracking-tight lg:text-5xl sm:text-4xl"
+            class="title text-3xl tracking-tight font-bold lg:text-5xl sm:text-4xl"
           >
             {{ frontmatter.title }}
           </h1>
-          <p class="lead mt-4 text-lg">
+          <p class="lead text-lg mt-4">
             {{ frontmatter.subtext }}
           </p>
           <p v-if="frontmatter.action" class="action">

src/components/admin/AddEntryDialog.vue

@@ -641,15 +641,15 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
         <!-- 键名树状结构 -->
         <div v-if="formData.category || newCategory" class="space-y-2">
           <Label>现有键名结构</Label>
-          <div v-if="availableKeysTree.length > 0" class="max-h-[200px] overflow-auto border rounded p-3">
+          <div v-if="availableKeysTree.length > 0" class="p-3 border rounded max-h-[200px] overflow-auto">
             <KeyTreeView
               :tree="availableKeysTree"
               :selected="formData.key"
               @select="handleKeySelect"
             />
           </div>
-          <div v-else class="border rounded p-3 text-center text-muted-foreground">
-            <i class="i-lucide-folder-open mx-auto mb-2 h-6 w-6 opacity-50" />
+          <div v-else class="text-muted-foreground p-3 text-center border rounded">
+            <i class="i-lucide-folder-open mx-auto mb-2 opacity-50 h-6 w-6" />
             <p class="text-sm">
               该分类下暂无现有键名
             </p>
@@ -662,7 +662,7 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
         <!-- 数据类型选择 -->
         <div class="space-y-2">
           <Label>数据类型</Label>
-          <div class="mb-2 text-xs text-muted-foreground">
+          <div class="text-xs text-muted-foreground mb-2">
             当前选择: {{ formData.dataType }}
           </div>
           <Tabs :model-value="formData.dataType" class="w-full" @update:model-value="formData.dataType = $event">
@@ -709,8 +709,8 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
         </div>
 
         <!-- 重复警告 -->
-        <div v-if="duplicateWarning" class="rounded bg-destructive/10 p-3 text-sm text-destructive">
-          <i class="i-lucide-alert-triangle mr-2 inline h-4 w-4" />
+        <div v-if="duplicateWarning" class="text-sm text-destructive p-3 rounded bg-destructive/10">
+          <i class="i-lucide-alert-triangle mr-2 h-4 w-4 inline" />
           {{ duplicateWarning }}
         </div>
 
@@ -719,7 +719,7 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
           <Label>翻译内容</Label>
 
           <!-- 语言切换标签页 -->
-          <div class="flex gap-2 border-b">
+          <div class="border-b flex gap-2">
             <Button
               v-for="locale in availableLocales"
               :key="locale"
@@ -746,7 +746,7 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
 
             <!-- 正则表达式编辑器 -->
             <div v-else-if="formData.dataType === 'regex'" class="space-y-3">
-              <div class="grid grid-cols-2 gap-4">
+              <div class="gap-4 grid grid-cols-2">
                 <div class="space-y-2">
                   <Label>正则表达式模式</Label>
                   <Input
@@ -770,7 +770,7 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
             <!-- 对象数组编辑器 -->
             <div v-else-if="formData.dataType === 'array'" class="space-y-4">
               <!-- 字段配置 -->
-              <div class="border rounded p-3 space-y-3">
+              <div class="p-3 border rounded space-y-3">
                 <div class="flex items-center justify-between">
                   <Label class="text-sm font-medium">字段配置</Label>
                   <Button
@@ -786,7 +786,7 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
                 <div
                   v-for="(field, index) in arrayFieldConfig.fields"
                   :key="index"
-                  class="grid grid-cols-4 items-end gap-2"
+                  class="gap-2 grid grid-cols-4 items-end"
                 >
                   <div class="space-y-1">
                     <Label class="text-xs">字段名</Label>
@@ -839,11 +839,11 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
               <div
                 v-for="(arrayItem, index) in parsedTranslations[editingLocale] || []"
                 :key="index"
-                class="border rounded-lg p-4 space-y-3"
+                class="p-4 border rounded-lg space-y-3"
               >
                 <div class="flex items-center justify-between">
                   <span class="text-sm text-muted-foreground font-medium">项目 #{{ index + 1 }}</span>
-                  <div class="flex items-center gap-2">
+                  <div class="flex gap-2 items-center">
                     <Button
                       v-if="index > 0"
                       size="sm"
@@ -872,7 +872,7 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
                   </div>
                 </div>
 
-                <div class="grid gap-3" :style="{ gridTemplateColumns: `repeat(${arrayFieldConfig.fields.length}, 1fr)` }">
+                <div class="gap-3 grid" :style="{ gridTemplateColumns: `repeat(${arrayFieldConfig.fields.length}, 1fr)` }">
                   <div
                     v-for="field in arrayFieldConfig.fields"
                     :key="field.name"
@@ -882,14 +882,14 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
                     <Input
                       :model-value="arrayItem[field.name] || ''"
                       :placeholder="field.placeholder"
-                      class="bg-background text-xs font-mono focus:bg-background hover:bg-background"
+                      class="text-xs font-mono bg-background focus:bg-background hover:bg-background"
                       @update:model-value="updateArrayItem(editingLocale, index, field.name, $event)"
                     />
                   </div>
                 </div>
               </div>
 
-              <div v-if="!(parsedTranslations[editingLocale] || []).length" class="py-4 text-center text-muted-foreground">
+              <div v-if="!(parsedTranslations[editingLocale] || []).length" class="text-muted-foreground py-4 text-center">
                 暂无数组项，点击上方"添加项目"按钮开始添加
               </div>
             </div>
@@ -899,8 +899,8 @@ function updateArrayFieldConfig(index: number, field: 'name' | 'displayName' | '
         <!-- JSON数据预览 -->
         <div v-if="jsonPreview" class="space-y-2">
           <Label>JSON数据预览</Label>
-          <div class="max-h-[200px] overflow-auto border rounded bg-muted/30 p-3">
-            <pre class="whitespace-pre-wrap text-xs font-mono">{{ jsonPreview }}</pre>
+          <div class="p-3 border rounded bg-muted/30 max-h-[200px] overflow-auto">
+            <pre class="text-xs font-mono whitespace-pre-wrap">{{ jsonPreview }}</pre>
           </div>
         </div>
       </div>