Revert skill list layout and tune leaderboard report

- Revert skill settings to vertical list layout with pinned sorting
- Default leaderboard range 30d -> 7d, hide stats while report generating
- Reframe leaderboard report prompt as user-behavior analysis (cache v5)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend-web/src/components/workspace/settings/skill-settings-page.tsx

@@ -12,11 +12,10 @@ import {
   FileArchive,
   GlobeIcon,
   InfoIcon,
-  Loader2,
-  LockIcon,
-  PinIcon,
-  PinOffIcon,
-  RefreshCwIcon,
+  Loader2,
+  LockIcon,
+  PinIcon,
+  RefreshCwIcon,
   SparklesIcon,
   TagsIcon,
   Trash2Icon,
@@ -27,15 +26,8 @@ import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -203,11 +195,22 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
     };
   }, [skills, currentUserId]);
 
-  const filteredSkills = filter === "mine" ? activeMine : activeAll;
-  const staleCount = staleVisible.length;
-  const archivedCount = archivedVisible.length;
-
-  const totalPages = Math.max(1, Math.ceil(filteredSkills.length / PAGE_SIZE));
+  const filteredSkills = filter === "mine" ? activeMine : activeAll;
+  const orderedSkills = useMemo(
+    () =>
+      filteredSkills
+        .map((skill, index) => ({ skill, index }))
+        .sort((a, b) => {
+          const pinnedDelta = Number(!!b.skill.pinned) - Number(!!a.skill.pinned);
+          return pinnedDelta || a.index - b.index;
+        })
+        .map(({ skill }) => skill),
+    [filteredSkills],
+  );
+  const staleCount = staleVisible.length;
+  const archivedCount = archivedVisible.length;
+
+  const totalPages = Math.max(1, Math.ceil(orderedSkills.length / PAGE_SIZE));
   // Filter / search / tag changes may shrink the result set — pull the page
   // back into range without forcing a reset on every keystroke.
   useEffect(() => {
@@ -216,10 +219,10 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
   useEffect(() => {
     setPage(1);
   }, [search, tagIds, sort]);
-  const pagedSkills = useMemo(
-    () => filteredSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
-    [filteredSkills, page],
-  );
+  const pagedSkills = useMemo(
+    () => orderedSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [orderedSkills, page],
+  );
 
   const handleRescan = async () => {
     try {
@@ -356,32 +359,18 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
       {!isLoading && !error && filteredSkills.length === 0 && (
         <EmptySkill />
       )}
-      
-      {/* —— 原纵向列表布局（保留备查）——
-      {!isLoading && !error &&
-        filteredSkills.length > 0 &&
-        pagedSkills.map((skill) => (
-          <SkillRow
-            key={skill.name}
-            skill={skill}
-            currentUserId={currentUserId}
-            isAdmin={isAdmin}
-          />
-        ))} */}
-     {/* card */}
-      {!isLoading && !error && filteredSkills.length > 0 && (
-        <div className="grid grid-cols-1 items-stretch gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          {pagedSkills.map((skill) => (
-            <SkillRow
-              key={skill.name}
-              skill={skill}
-              currentUserId={currentUserId}
-              isAdmin={isAdmin}
-              className="h-full"
-            />
-          ))}
-        </div>
-      )}
+      {!isLoading && !error && filteredSkills.length > 0 && (
+        <div className="flex flex-col gap-3">
+          {pagedSkills.map((skill) => (
+            <SkillRow
+              key={skill.name}
+              skill={skill}
+              currentUserId={currentUserId}
+              isAdmin={isAdmin}
+            />
+          ))}
+        </div>
+      )}
       {!isLoading && !error && totalPages > 1 && (
         <div className="flex items-center justify-end gap-2 pt-1">
           <Button
@@ -430,17 +419,15 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
   );
 }
 
-export function SkillRow({
-  skill,
-  currentUserId,
-  isAdmin,
-  className,
-}: {
-  skill: Skill;
-  currentUserId: string | null;
-  isAdmin: boolean;
-  className?: string;
-}) {
+export function SkillRow({
+  skill,
+  currentUserId,
+  isAdmin,
+}: {
+  skill: Skill;
+  currentUserId: string | null;
+  isAdmin: boolean;
+}) {
   const { t } = useI18n();
   const setPublished = useSetSkillPublished();
   const setPinned = useSetSkillPinned();
@@ -525,9 +512,7 @@ export function SkillRow({
 
   return (
     <>
-      
-      {/* —— 原 Item 列表行布局（保留备查）——
-      <Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
+      <Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
         <ItemContent
           className="cursor-pointer"
           onClick={() => setDetailOpen(true)}
@@ -633,25 +618,24 @@ export function SkillRow({
             </Button>
           )}
           {canManage && (
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-8 w-8 shrink-0"
-              disabled={setPinned.isPending}
-              onClick={() => void handleTogglePinned()}
-              title={
+            <Button
+              size="icon"
+              variant="ghost"
+              className={cn(
+                "h-8 w-8 shrink-0",
+                skill.pinned && "text-emerald-600 hover:text-emerald-700",
+              )}
+              disabled={setPinned.isPending}
+              onClick={() => void handleTogglePinned()}
+              title={
                 skill.pinned
                   ? t.settings.skills.unpinAction
-                  : t.settings.skills.pinAction
-              }
-            >
-              {skill.pinned ? (
-                <PinOffIcon className="size-3.5" />
-              ) : (
-                <PinIcon className="size-3.5" />
-              )}
-            </Button>
-          )}
+                  : t.settings.skills.pinAction
+              }
+            >
+              <PinIcon className={cn("size-3.5", skill.pinned && "fill-current")} />
+            </Button>
+          )}
           {canTogglePublish && (
             <Button
               size="icon"
@@ -694,206 +678,8 @@ export function SkillRow({
             </Button>
           )}
         </ItemActions>
-      </Item> */}
-
-      <Card
-        className={cn(
-          "group flex h-full min-w-0 cursor-pointer flex-col transition-shadow hover:shadow-md dark:!border-[#213D5E] dark:bg-[#02244C] dark:text-white",
-          className,
-        )}
-        onClick={() => setDetailOpen(true)}
-      >
-        <CardHeader className="min-w-0 flex flex-col gap-0">
-          <div className="flex min-w-0 items-center gap-2">
-            <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
-              <SparklesIcon className="h-5 w-5" />
-            </div>
-            <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2 overflow-hidden">
-              <CardTitle
-                className="min-w-0 flex-1 overflow-hidden text-base text-ellipsis whitespace-nowrap"
-                title={desensitize(skill.name)}
-              >
-                {desensitize(skill.name)}
-              </CardTitle>
-              <Badge variant="secondary" className="shrink-0 text-xs">
-                {isBuiltin
-                  ? t.settings.skills.badgeBuiltin
-                  : skill.category}
-              </Badge>
-            </div>
-          </div>
-
-          <div className="mt-4 mb-1.5 flex min-h-5 flex-wrap items-center gap-1">
-            {isOwned && (
-              <Badge
-                variant="default"
-                className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
-              >
-                {t.settings.skills.badgeMine}
-              </Badge>
-            )}
-            {isFromOthers && (
-              <Badge
-                variant="outline"
-                className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
-                title={
-                  skill.owner_user_id
-                    ? t.settings.skills.badgeFromOthersTitle.replace(
-                        "{user_id}",
-                        skill.owner_user_id,
-                      )
-                    : undefined
-                }
-              >
-                {t.settings.skills.badgeFromOthers}
-              </Badge>
-            )}
-            {isOwned && skill.published && (
-              <Badge
-                variant="outline"
-                className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
-                title={t.settings.skills.badgePublishedTitle}
-              >
-                <GlobeIcon className="size-3" />
-                {t.settings.skills.badgePublished}
-              </Badge>
-            )}
-            {isCustom && !isBuiltin && skill.source === "agent" && (
-              <Badge
-                variant="outline"
-                className="border-cyan-500/30 text-cyan-700 dark:text-cyan-300 text-xs"
-                title={t.settings.skills.badgeSourceAgentTitle}
-              >
-                {t.settings.skills.badgeSourceAgent}
-              </Badge>
-            )}
-            {isCustom && !isBuiltin && skill.source === "upload" && (
-              <Badge
-                variant="outline"
-                className="border-zinc-400/40 text-zinc-600 dark:text-zinc-400 text-xs"
-                title={t.settings.skills.badgeSourceUploadTitle}
-              >
-                {t.settings.skills.badgeSourceUpload}
-              </Badge>
-            )}
-            {skill.pinned && (
-              <Badge
-                variant="outline"
-                className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
-                title={t.settings.skills.badgePinnedTitle}
-              >
-                {t.settings.skills.badgePinned}
-              </Badge>
-            )}
-          </div>
-          <div className="mt-1.5 min-h-10 mb-3">
-            {skill.description ? (
-              <CardDescription className="line-clamp-2 text-sm">
-                {desensitize(skill.description)}
-              </CardDescription>
-            ) : null}
-          </div>
-          <div className="text-muted-foreground mt-0.5 min-h-4 text-xs leading-tight">
-            {skill.use_count !== undefined && skill.use_count > 0
-              ? t.settings.skills.useCountInline.replace(
-                  "{count}",
-                  String(skill.use_count),
-                )
-              : t.settings.skills.useCountInlineZero}
-          </div>
-          <div
-            className={cn(
-              "min-w-0 max-w-full overflow-hidden pb-0",
-              (skill.tags?.length ?? 0) > 0 ? "pt-2.5" : "min-h-4",
-            )}
-          >
-            {(skill.tags?.length ?? 0) > 0 && (
-              <TagChipList tags={skill.tags!} className="w-full" />
-            )}
-          </div>
-        </CardHeader>
-
-        <CardFooter
-            className="cursor-default py-0 pt-1.5"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex w-full flex-wrap items-center justify-end gap-1">
-              {isAdmin && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  onClick={() => setTagPickerOpen(true)}
-                  title={t.adminTags.manageTags}
-                >
-                  <TagsIcon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-              {canManage && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  disabled={setPinned.isPending}
-                  onClick={() => void handleTogglePinned()}
-                  title={
-                    skill.pinned
-                      ? t.settings.skills.unpinAction
-                      : t.settings.skills.pinAction
-                  }
-                >
-                  {skill.pinned ? (
-                    <PinOffIcon className="h-3.5 w-3.5" />
-                  ) : (
-                    <PinIcon className="h-3.5 w-3.5" />
-                  )}
-                </Button>
-              )}
-              {canTogglePublish && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  disabled={setPublished.isPending}
-                  onClick={() => void handleTogglePublished(!skill.published)}
-                  title={
-                    skill.published
-                      ? t.settings.skills.unpublishAction
-                      : t.settings.skills.publishAction
-                  }
-                >
-                  {skill.published ? (
-                    <LockIcon className="h-3.5 w-3.5" />
-                  ) : (
-                    <GlobeIcon className="h-3.5 w-3.5" />
-                  )}
-                </Button>
-              )}
-              <Button
-                size="icon"
-                variant="ghost"
-                className="h-8 w-8 shrink-0"
-                disabled={duplicateSkillMutation.isPending}
-                onClick={handleOpenDuplicate}
-                title="复制为新技能"
-              >
-                <CopyIcon className="h-3.5 w-3.5" />
-              </Button>
-              {canManage && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
-                  onClick={() => setConfirmDeleteOpen(true)}
-                  title={t.settings.skills.deleteAction}
-                >
-                  <Trash2Icon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-            </div>
-          </CardFooter>
-      </Card>
-      <Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
+      </Item>
+      <Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>复制技能</DialogTitle>