feat: 支持智能体置顶配置

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

@@ -1,9 +1,10 @@
 "use client";
 
 import {
-  AlertCircle,
-  ArchiveIcon,
-  CheckCircle2,
+  AlertCircle,
+  ArchiveIcon,
+  ArrowDownUpIcon,
+  CheckCircle2,
   ChevronLeftIcon,
   ChevronRightIcon,
   ClockIcon,
@@ -51,8 +52,9 @@ import {
   ItemContent,
   ItemDescription,
 } from "@/components/ui/item";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
 import { TagChipList } from "@/components/workspace/tags/tag-chip";
 import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
@@ -91,7 +93,16 @@ export function SkillSettingsPage({ onClose }: { onClose?: () => void } = {}) {
   );
 }
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 10;
+type SkillSort =
+  | "time_desc"
+  | "time_asc"
+  | "activity_desc"
+  | "activity_asc"
+  | "usage_desc"
+  | "usage_asc"
+  | "name_asc"
+  | "name_desc";
 
 /** 重新扫描成功 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
 const rescanSuccessToastDarkOptions = {
@@ -134,12 +145,13 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
   const [installOpen, setInstallOpen] = useState(false);
   const [staleSheetOpen, setStaleSheetOpen] = useState(false);
   const [archiveSheetOpen, setArchiveSheetOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const [tagIds, setTagIds] = useState<string[]>([]);
-  const [page, setPage] = useState(1);
-  const reconcileMutation = useReconcileCustomSkills();
-  // Name + tag filtering is resolved server-side via the /api/skills query.
-  const { skills, isLoading, error } = useSkills({ search, tagIds });
+  const [search, setSearch] = useState("");
+  const [tagIds, setTagIds] = useState<string[]>([]);
+  const [sort, setSort] = useState<SkillSort>("time_desc");
+  const [page, setPage] = useState(1);
+  const reconcileMutation = useReconcileCustomSkills();
+  // Name + tag filtering is resolved server-side via the /api/skills query.
+  const { skills, isLoading, error } = useSkills({ search, tagIds, sort });
 
   const storedAuth = useMemo(() => getStoredAuth(), []);
   const currentUserId = storedAuth?.user_id ?? null;
@@ -191,9 +203,12 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
   const totalPages = Math.max(1, Math.ceil(filteredSkills.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(() => {
-    if (page > totalPages) setPage(totalPages);
-  }, [page, totalPages]);
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+  }, [page, totalPages]);
+  useEffect(() => {
+    setPage(1);
+  }, [search, tagIds, sort]);
   const pagedSkills = useMemo(
     () => filteredSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
     [filteredSkills, page],
@@ -309,12 +324,33 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
           </Button>
         </div>
       </header>
-      <TagSearchBar
-        targetType="skill"
-        onSearchChange={setSearch}
-        tagIds={tagIds}
-        onTagIdsChange={setTagIds}
-      />
+      <TagSearchBar
+        targetType="skill"
+        onSearchChange={setSearch}
+        tagIds={tagIds}
+        onTagIdsChange={setTagIds}
+        actions={
+          <Select value={sort} onValueChange={(v) => setSort(v as SkillSort)}>
+            <SelectTrigger
+              className="h-9 w-full gap-2 px-3 text-xs sm:w-[148px]"
+              title="排序"
+            >
+              <ArrowDownUpIcon className="text-muted-foreground size-3.5" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent position="popper" side="bottom" sideOffset={4}>
+              <SelectItem value="time_desc">最新创建</SelectItem>
+              <SelectItem value="time_asc">最早创建</SelectItem>
+              <SelectItem value="activity_desc">最近使用</SelectItem>
+              <SelectItem value="activity_asc">最早使用</SelectItem>
+              <SelectItem value="usage_desc">使用最多</SelectItem>
+              <SelectItem value="usage_asc">使用最少</SelectItem>
+              <SelectItem value="name_asc">名称 A-Z</SelectItem>
+              <SelectItem value="name_desc">名称 Z-A</SelectItem>
+            </SelectContent>
+          </Select>
+        }
+      />
       {isLoading && (
         <div className="text-muted-foreground text-sm">{t.common.loading}</div>
       )}