From 5310c54d47b9dfa87ef9e5dd7b716032825b0828 Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Tue, 17 Mar 2026 14:21:00 +0800
Subject: [PATCH] chore: fix api usage style

---
 web/src/views/notify/components/ApiUsage.vue | 34 +++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/web/src/views/notify/components/ApiUsage.vue b/web/src/views/notify/components/ApiUsage.vue
index badc72f..257b051 100644
--- a/web/src/views/notify/components/ApiUsage.vue
+++ b/web/src/views/notify/components/ApiUsage.vue
@@ -252,7 +252,7 @@ const currentExample = computed(() => {
         <CardDescription>用于外部脚本或工具调用 API 时的安全凭证</CardDescription>
       </CardHeader>
       <CardContent class="space-y-4">
-        <div class="flex items-center gap-3">
+        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
           <div class="relative flex-1 group">
             <Input :model-value="apiToken" readonly placeholder="尚未生成 Token"
               class="h-10 pr-10 bg-muted/30 border-muted-foreground/20 focus-visible:ring-primary/30 font-code text-sm tracking-tight" />
@@ -285,7 +285,7 @@ const currentExample = computed(() => {
               <div class="p-1.5 rounded-md bg-emerald-500/10 text-emerald-600">
                 <FileJson class="w-4 h-4" />
               </div>
-              <CardTitle class="text-sm font-bold uppercase tracking-wider">API 接口说明</CardTitle>
+              <CardTitle class="text-sm font-bold uppercase tracking-wider whitespace-nowrap">API 接口说明</CardTitle>
             </div>
           </div>
         </CardHeader>
@@ -357,27 +357,29 @@ const currentExample = computed(() => {
       <!-- 调用示例 -->
       <Card class="border bg-card shadow-sm flex flex-col overflow-hidden h-[520px]">
         <Tabs v-model="activeLang" class="w-full flex flex-col h-full overflow-hidden">
-          <CardHeader class="pb-3 shrink-0 border-b">
-            <div class="flex items-center justify-between">
+          <CardHeader class="pb-3 shrink-0 border-b px-4">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
               <div class="flex items-center gap-2">
                 <div class="p-1.5 rounded-md bg-sky-500/10 text-sky-600">
                   <Terminal class="w-4 h-4" />
                 </div>
-                <CardTitle class="text-sm font-bold uppercase tracking-wider">脚本调用示例</CardTitle>
+                <CardTitle class="text-sm font-bold uppercase tracking-wider whitespace-nowrap">脚本调用示例</CardTitle>
               </div>
-              <div class="flex items-center gap-3">
-                <TabsList class="h-8 p-0.5 bg-muted/50 border">
-                  <TabsTrigger v-for="lang in examples" :key="lang.id" :value="lang.id"
-                    class="h-7 px-2.5 text-[11px] data-[state=active]:bg-background data-[state=active]:shadow-sm">
-                    {{ lang.name }}
-                  </TabsTrigger>
-                </TabsList>
+              <div class="flex items-center gap-2 sm:gap-3 justify-between sm:justify-end overflow-hidden">
+                <div class="overflow-x-auto hide-scrollbar shrink-0">
+                  <TabsList class="h-8 p-0.5 bg-muted/50 border flex-nowrap">
+                    <TabsTrigger v-for="lang in examples" :key="lang.id" :value="lang.id"
+                      class="h-7 px-2.5 text-[11px] data-[state=active]:bg-background data-[state=active]:shadow-sm whitespace-nowrap">
+                      {{ lang.name }}
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
                 <Button variant="outline" size="sm"
-                  class="h-8 px-2.5 text-[11px] border-muted-foreground/30 hover:bg-muted transition-all"
+                  class="h-8 px-2.5 text-[11px] border-muted-foreground/30 hover:bg-muted transition-all shrink-0"
                   @click="copyToClipboard(currentExample, 'example')">
-                  <Check v-if="copiedBlock === 'example'" class="w-3.5 h-3.5 text-emerald-500 mr-1.5" />
-                  <Copy v-else class="w-3.5 h-3.5 mr-1.5" />
-                  复制代码
+                  <Check v-if="copiedBlock === 'example'" class="w-3.5 h-3.5 text-emerald-500 sm:mr-1.5" />
+                  <Copy v-else class="w-3.5 h-3.5 sm:mr-1.5" />
+                  <span class="hidden sm:inline">复制代码</span>
                 </Button>
               </div>
             </div>