forked from bai/curriculum-project-hub
ymy
48 lines
2.0 KiB
Svelte
48 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* 网盘式大图标卡片:文件夹(琥珀填充)/项目(立方体描边)/文件(文档描边)。
|
|
* 单击选中、onopen(双击)、oncontextmenu(右键,回传光标坐标)。
|
|
*/
|
|
let {
|
|
kind,
|
|
name,
|
|
meta = null,
|
|
selected = false,
|
|
onselect,
|
|
onopen,
|
|
oncontextmenu,
|
|
}: {
|
|
kind: "FOLDER" | "PROJECT" | "FILE";
|
|
name: string;
|
|
meta?: string | null;
|
|
selected?: boolean;
|
|
onselect: () => void;
|
|
onopen: () => void;
|
|
oncontextmenu: (x: number, y: number) => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<button
|
|
class="flex cursor-pointer flex-col items-center gap-1.5 rounded-xl px-2 pb-2 pt-3 select-none {selected
|
|
? 'bg-selected'
|
|
: 'hover:bg-hover'}"
|
|
onclick={onselect}
|
|
ondblclick={onopen}
|
|
oncontextmenu={(e) => { e.preventDefault(); e.stopPropagation(); oncontextmenu(e.clientX, e.clientY); }}
|
|
title={name}
|
|
>
|
|
<span class="flex h-20 w-20 items-center justify-center">
|
|
{#if kind === "FOLDER"}
|
|
<svg width="72" height="72" viewBox="0 0 24 24" fill="#f5c94a" stroke="#d9a92b" stroke-width="0.6" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" /></svg>
|
|
{:else if kind === "PROJECT"}
|
|
<svg width="66" height="66" viewBox="0 0 24 24" fill="#e8f0ea" stroke="#4a6741" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
|
{:else}
|
|
<svg width="60" height="60" viewBox="0 0 24 24" fill="#ffffff" stroke="#9c9b96" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z" /><path d="M14 3v5h5" /><path d="M9 13h6M9 17h6" /></svg>
|
|
{/if}
|
|
</span>
|
|
<span class="line-clamp-2 w-full break-all text-center text-[12.5px] leading-snug text-ink">{name}</span>
|
|
{#if meta !== null}
|
|
<span class="-mt-1 text-[10.5px] text-ink-3">{meta}</span>
|
|
{/if}
|
|
</button>
|