feat: enhance order asset selection and previews

src/features/orders/components/resource-picker-card.tsx

@@ -6,59 +6,67 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Select } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
 import type { ResourcePickerOption } from "@/features/orders/resource-picker-options";
 
 type ResourcePickerCardProps = {
   description: string;
   disabled?: boolean;
   isLoading?: boolean;
-  items: ResourcePickerOption[];
   label: string;
+  selectedItem: ResourcePickerOption | null;
   title: string;
-  value: string;
-  onChange: (value: string) => void;
+  onOpenPicker: () => void;
 };
 
 export function ResourcePickerCard({
   description,
   disabled = false,
   isLoading = false,
-  items,
   label,
+  selectedItem,
   title,
-  value,
-  onChange,
+  onOpenPicker,
 }: ResourcePickerCardProps) {
-  const selectedItem = items.find((item) => item.id === value) ?? null;
-
   return (
     <Card>
       <CardHeader>
-        <CardEyebrow>Mock backed selector</CardEyebrow>
+        <CardEyebrow>Resource manager</CardEyebrow>
         <CardTitle>{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
-        <label className="flex flex-col gap-2 text-sm text-[var(--ink-strong)]">
+        <div className="space-y-2 text-sm text-[var(--ink-strong)]">
           <span className="font-medium">{label}</span>
-          <Select
-            aria-label={label}
-            className="min-h-12 rounded-[18px] border-[var(--border-strong)] bg-[var(--surface-muted)] px-4"
+          <Button
+            aria-label={selectedItem ? `更换${label}` : `选择${label}`}
+            className="min-h-12 w-full justify-between rounded-[18px] border-[var(--border-strong)] bg-[var(--surface-muted)] px-4 text-left text-[var(--ink-strong)] shadow-none hover:bg-[var(--surface)]"
             disabled={disabled || isLoading}
-            options={items.map((item) => ({
-              value: item.id,
-              label: item.name,
-            }))}
-            placeholder={isLoading ? "正在加载占位资源..." : "请选择一个资源"}
-            value={value}
-            onValueChange={onChange}
-          />
-        </label>
+            size="lg"
+            variant="secondary"
+            onClick={onOpenPicker}
+          >
+            {isLoading
+              ? "正在加载资源..."
+              : selectedItem
+                ? `更换${label}`
+                : `选择${label}`}
+          </Button>
+        </div>
 
         {selectedItem ? (
           <div className="rounded-[20px] border border-[var(--border-soft)] bg-[var(--surface-muted)] p-4">
-            <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="flex flex-wrap items-start gap-3">
+              <div className="h-20 w-16 overflow-hidden rounded-[14px] bg-[rgba(74,64,53,0.08)]">
+                {selectedItem.previewUri ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    alt={`${selectedItem.name} 预览图`}
+                    className="h-full w-full object-cover"
+                    src={selectedItem.previewUri}
+                  />
+                ) : null}
+              </div>
               <div className="space-y-1">
                 <p className="text-sm font-semibold text-[var(--ink-strong)]">
                   {selectedItem.name}
@@ -67,17 +75,21 @@ export function ResourcePickerCard({
                   {selectedItem.description}
                 </p>
               </div>
-              <span className="rounded-full bg-[var(--accent-soft)] px-3 py-1 font-[var(--font-mono)] text-[11px] uppercase tracking-[0.18em] text-[var(--accent-ink)]">
-                {selectedItem.isMock ? "mock" : "live"}
-              </span>
             </div>
-            <p className="mt-3 font-[var(--font-mono)] text-xs text-[var(--ink-faint)]">
-              {selectedItem.previewUri}
-            </p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              {selectedItem.tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full bg-[rgba(110,98,84,0.08)] px-2.5 py-1 font-[var(--font-mono)] text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)]"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
           </div>
         ) : (
           <p className="text-sm leading-6 text-[var(--ink-muted)]">
-            选择后会在摘要卡中同步显示资源名称与提交 ID。
+            通过资源管理器弹窗直接点选图片，选择后会在摘要卡中同步显示资源名称与提交 ID。
           </p>
         )}
       </CardContent>