From 6ff04ea4e3ad518adc3fd9c255b8246c6e0f4b34 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Tue, 18 Aug 2026 16:50:27 +0800
Subject: [PATCH] fix: restore skill list styling

---
 .../settings/skill-settings-page.tsx          | 207 ++++++++++--------
 1 file changed, 117 insertions(+), 90 deletions(-)

diff --git a/frontend-web/src/components/workspace/settings/skill-settings-page.tsx b/frontend-web/src/components/workspace/settings/skill-settings-page.tsx
index 42f92a24..3923d67a 100644
--- a/frontend-web/src/components/workspace/settings/skill-settings-page.tsx
+++ b/frontend-web/src/components/workspace/settings/skill-settings-page.tsx
@@ -25,7 +25,8 @@ import {
   Trash2Icon,
   TrendingUpIcon,
   Upload,
-  UserIcon,
+  UserIcon,
+  WorkflowIcon,
   XIcon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -50,13 +51,6 @@ import {
   EmptyTitle,
 } from "@/components/ui/empty";
 
-import {
-  Item,
-  ItemActions,
-  ItemTitle,
-  ItemContent,
-  ItemDescription,
-} from "@/components/ui/item";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -756,7 +750,7 @@ export function SkillRow({
 
   const badgeGroup = (
     <div className="flex flex-wrap items-center gap-2">
-      <span className={cn(isCard && "truncate font-medium")}>
+      <span className="min-w-0 truncate text-[15px] font-semibold tracking-[-0.01em] text-slate-900 dark:text-slate-100">
         {skill.name_zh?.trim() ? skill.name_zh : desensitize(skill.name)}
       </span>
       {skill.name_zh?.trim() && (
@@ -861,65 +855,12 @@ export function SkillRow({
     </div>
   );
 
-  const metaNodes = (
-    <>
-      {!isBuiltin && skill.owner_username && (
-        <button
-          type="button"
-          disabled={!skill.owner_user_id || !onPublisherClick}
-          onClick={(e) => {
-            if (!skill.owner_user_id || !onPublisherClick) return;
-            e.stopPropagation();
-            onPublisherClick({
-              id: skill.owner_user_id,
-              label: desensitize(skill.owner_username!),
-            });
-          }}
-          className={cn(
-            "text-muted-foreground mt-1 flex max-w-full items-center gap-1 text-sm font-medium",
-            skill.owner_user_id && onPublisherClick &&
-              "hover:text-primary cursor-pointer transition-colors hover:underline",
-          )}
-          title={
-            skill.owner_user_id && onPublisherClick
-              ? `点击筛选发布者：${desensitize(skill.owner_username)}`
-              : `发布者：${desensitize(skill.owner_username)}`
-          }
-        >
-          <UserIcon className="size-3.5 shrink-0" />
-          <span className="truncate">发布者：{desensitize(skill.owner_username)}</span>
-        </button>
-      )}
-      {skill.use_count !== undefined && (
-        <div className="text-muted-foreground mt-1 text-xs">
-          {skill.use_count > 0
-            ? t.settings.skills.useCountInline.replace(
-                "{count}",
-                String(skill.use_count),
-              )
-            : t.settings.skills.useCountInlineZero}
-        </div>
-      )}
-      {formatDateTime(skill.created_at) && (
-        <div className="text-muted-foreground mt-1 flex items-center gap-1 text-xs">
-          <ClockIcon className="size-3.5 shrink-0" />
-          <span className="truncate">
-            创建时间：{formatDateTime(skill.created_at)}
-          </span>
-        </div>
-      )}
-      {(skill.tags?.length ?? 0) > 0 && (
-        <TagChipList tags={skill.tags!} className="mt-2" />
-      )}
-    </>
-  );
-
   const actionButtons = (
     <>
       <Button
         size="icon"
         variant="ghost"
-        className="h-8 w-8 shrink-0"
+        className="h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
         onClick={() => setTagPickerOpen(true)}
         title={t.adminTags.manageTags}
       >
@@ -930,7 +871,7 @@ export function SkillRow({
           size="icon"
           variant="ghost"
           className={cn(
-            "h-8 w-8 shrink-0",
+            "h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white",
             skill.featured && "text-amber-600 hover:text-amber-700",
           )}
           disabled={setFeatured.isPending}
@@ -951,7 +892,7 @@ export function SkillRow({
           size="icon"
           variant="ghost"
           className={cn(
-            "h-8 w-8 shrink-0",
+            "h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white",
             skill.pinned && "text-emerald-600 hover:text-emerald-700",
           )}
           disabled={setPinned.isPending}
@@ -972,7 +913,7 @@ export function SkillRow({
           size="icon"
           variant="ghost"
           className={cn(
-            "h-8 w-8 shrink-0",
+            "h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white",
             skill.always_on && "text-amber-600 hover:text-amber-700",
           )}
           disabled={setAlwaysOn.isPending}
@@ -992,7 +933,7 @@ export function SkillRow({
         <Button
           size="icon"
           variant="ghost"
-          className="h-8 w-8 shrink-0"
+          className="h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
           disabled={setPublished.isPending}
           onClick={() => void handleTogglePublished(!skill.published)}
           title={
@@ -1011,7 +952,7 @@ export function SkillRow({
       <Button
         size="icon"
         variant="ghost"
-        className="h-8 w-8 shrink-0"
+        className="h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
         disabled={duplicateSkillMutation.isPending}
         onClick={handleOpenDuplicate}
         title="复制为新技能"
@@ -1022,7 +963,7 @@ export function SkillRow({
         <Button
           size="icon"
           variant="ghost"
-          className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
+          className="text-destructive hover:text-destructive h-8 w-8 shrink-0 rounded-lg hover:bg-red-50 dark:hover:bg-red-950/30"
           onClick={() => setConfirmDeleteOpen(true)}
           title={t.settings.skills.deleteAction}
         >
@@ -1031,39 +972,125 @@ export function SkillRow({
       )}
     </>
   );
+
+  const iconStyle = skill.name.includes("web") || skill.name.includes("search")
+    ? {
+        Icon: GlobeIcon,
+        className: "bg-emerald-600 text-white shadow-[0_6px_16px_rgba(22,163,74,0.22)]",
+      }
+    : skill.name.includes("doc") || skill.name.includes("file")
+      ? {
+          Icon: FileArchive,
+          className: "bg-violet-600 text-white shadow-[0_6px_16px_rgba(124,58,237,0.22)]",
+        }
+      : skill.source === "agent"
+        ? {
+            Icon: WorkflowIcon,
+            className: "bg-[#2166e8] text-white shadow-[0_6px_16px_rgba(37,99,235,0.22)]",
+          }
+        : {
+            Icon: Upload,
+            className: "bg-amber-500 text-white shadow-[0_6px_16px_rgba(245,158,11,0.22)]",
+          };
+  const SkillIcon = iconStyle.Icon;
+  const activityAt = formatDateTime(skill.last_activity_at ?? skill.created_at);
+  const actionArea = (
+    <div
+      className="flex flex-wrap items-center justify-end gap-1"
+      onClick={(event) => event.stopPropagation()}
+    >
+      {actionButtons}
+    </div>
+  );
 
   return (
     <>
       {isCard ? (
-        <div className="flex h-full min-w-0 flex-col rounded-lg border p-3 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
+        <div className="flex h-full min-w-0 flex-col rounded-xl border border-slate-200 bg-white p-5 shadow-[0_5px_18px_rgba(15,23,42,0.035)] transition-[border-color,box-shadow] hover:border-blue-200 hover:shadow-[0_10px_28px_rgba(37,99,235,0.07)] dark:border-slate-800 dark:bg-slate-900 dark:text-white">
           <div
             className="min-w-0 flex-1 cursor-pointer"
             onClick={() => setDetailOpen(true)}
           >
-            {badgeGroup}
-            <p className="text-muted-foreground mt-1 line-clamp-3 text-sm">
-              {desensitize(skill.description ?? "")}
-            </p>
-            {metaNodes}
+            <div className="flex items-start gap-3.5">
+              <div className={cn("flex size-12 shrink-0 items-center justify-center rounded-full", iconStyle.className)}>
+                <SkillIcon className="size-6" />
+              </div>
+              <div className="min-w-0 flex-1">
+                {badgeGroup}
+                <p className="mt-1.5 line-clamp-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
+                  {desensitize(skill.description ?? "")}
+                </p>
+              </div>
+            </div>
+            <div className="mt-4 flex flex-wrap items-center gap-2">
+              <Badge className={cn("border-0 px-2.5 py-1 text-xs font-normal", skill.enabled ? "bg-emerald-50 text-emerald-600 hover:bg-emerald-50 dark:bg-emerald-500/15 dark:text-emerald-300" : "bg-slate-100 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-400")}>
+                <span className={cn("mr-1.5 size-1.5 rounded-full", skill.enabled ? "bg-emerald-500" : "bg-slate-400")} />
+                {skill.enabled ? "已启用" : "未启用"}
+              </Badge>
+              <span className="text-xs text-slate-400">{skill.use_count ? `调用 ${skill.use_count} 次` : "暂无调用"}</span>
+              {activityAt && <span className="text-xs text-slate-400">更新于 {activityAt}</span>}
+            </div>
+            {(skill.tags?.length ?? 0) > 0 && <TagChipList tags={skill.tags!} className="mt-3" />}
           </div>
-          <div className="mt-2 flex flex-wrap items-center justify-end gap-1 border-t pt-2 dark:border-[#213D5E]">
-            {actionButtons}
+          <div className="mt-4 border-t border-slate-100 pt-3 dark:border-slate-800">
+            {actionArea}
           </div>
         </div>
       ) : (
-        <Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
-          <ItemContent
-            className="cursor-pointer"
-            onClick={() => setDetailOpen(true)}
-          >
-            <ItemTitle>{badgeGroup}</ItemTitle>
-            <ItemDescription className="line-clamp-4">
-              {desensitize(skill.description ?? "")}
-            </ItemDescription>
-            {metaNodes}
-          </ItemContent>
-          <ItemActions>{actionButtons}</ItemActions>
-        </Item>
+        <div className="group/skill-card w-full rounded-xl border border-slate-200 bg-white px-5 py-4 shadow-[0_5px_18px_rgba(15,23,42,0.03)] transition-[border-color,box-shadow] hover:border-blue-200 hover:shadow-[0_10px_28px_rgba(37,99,235,0.07)] dark:border-slate-800 dark:bg-slate-900 dark:text-white">
+          <div className="grid min-w-0 grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1.65fr)_minmax(150px,0.72fr)_minmax(100px,0.42fr)_minmax(132px,0.58fr)_auto] xl:items-center xl:gap-x-6">
+            <div className="flex min-w-0 cursor-pointer items-start gap-4" onClick={() => setDetailOpen(true)}>
+              <div className={cn("flex size-[60px] shrink-0 items-center justify-center rounded-full", iconStyle.className)}>
+                <SkillIcon className="size-7" />
+              </div>
+              <div className="min-w-0 flex-1 pt-0.5">
+                {badgeGroup}
+                <p className="mt-1.5 line-clamp-2 text-sm leading-5 text-slate-600 dark:text-slate-400">
+                  {desensitize(skill.description ?? "")}
+                </p>
+                {!isBuiltin && skill.owner_username && (
+                  <button
+                    type="button"
+                    disabled={!skill.owner_user_id || !onPublisherClick}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      if (!skill.owner_user_id || !onPublisherClick) return;
+                      onPublisherClick({ id: skill.owner_user_id, label: desensitize(skill.owner_username!) });
+                    }}
+                    className={cn(
+                      "mt-2 flex max-w-full items-center gap-1 text-xs text-slate-400",
+                      skill.owner_user_id && onPublisherClick && "cursor-pointer hover:text-blue-600 hover:underline",
+                    )}
+                  >
+                    <UserIcon className="size-3.5 shrink-0" />
+                    <span className="truncate">发布者：{desensitize(skill.owner_username)}</span>
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="min-w-0 xl:border-l xl:border-slate-100 xl:pl-5 xl:dark:border-slate-800">
+              {(skill.tags?.length ?? 0) > 0 ? (
+                <TagChipList tags={skill.tags!} />
+              ) : (
+                <span className="text-xs text-slate-400">未设置标签</span>
+              )}
+            </div>
+            <div className="min-w-0 text-sm text-slate-600 dark:text-slate-300">
+              <span className="block text-xs text-slate-400 xl:hidden">使用次数</span>
+              {skill.use_count ? `${skill.use_count} 次` : "暂无调用"}
+            </div>
+            <div className="min-w-0">
+              <Badge className={cn("border-0 px-2.5 py-1 text-xs font-normal", skill.enabled ? "bg-emerald-50 text-emerald-600 hover:bg-emerald-50 dark:bg-emerald-500/15 dark:text-emerald-300" : "bg-slate-100 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-400")}>
+                <span className={cn("mr-1.5 size-1.5 rounded-full", skill.enabled ? "bg-emerald-500" : "bg-slate-400")} />
+                {skill.enabled ? "已启用" : "未启用"}
+              </Badge>
+              {activityAt && <p className="mt-2 truncate text-xs text-slate-400" title={activityAt}>更新于 {activityAt}</p>}
+            </div>
+            <div className="min-w-0 border-t border-slate-100 pt-3 xl:border-t-0 xl:pt-0 dark:border-slate-800">
+              {actionArea}
+            </div>
+          </div>
+        </div>
       )}
       <Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
         <DialogContent>