UserhomeFront/src/views/widget/WidgetCard.vue

<template>
    <div
        class="wcard"
        :class="{ off: !item.enabled, dragging, 'drag-over': dragOver }"
        :draggable="draggable"
        @mouseup="draggable = false"
        @dragstart="onDragStart"
        @dragover.prevent="onDragOver"
        @drop.prevent="onDrop"
        @dragend="onDragEnd"
    >
        <div class="wc-top">
            <span class="badge" :class="item.compType === 1 ? 'builtin' : 'custom'">{{ typeLabel }}</span>
            <template v-if="item.compType === 1">
                <span v-if="registryHit" class="badge ok" title="前端 widgetRegistry 已收录该键">注册表 ✓</span>
                <span v-else class="badge warn" title="前端注册表未收录，用户侧会落「暂不可用」空态">⚠ 未收录</span>
            </template>
            <span v-else class="badge mute" title="片段正文存在 widget_catalog.content">内容存库</span>
            <span class="drag" title="按住拖拽排序" @mousedown.stop="draggable = true">
                <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor">
                    <circle cx="9" cy="5.5" r="1.6" />
                    <circle cx="15" cy="5.5" r="1.6" />
                    <circle cx="9" cy="12" r="1.6" />
                    <circle cx="15" cy="12" r="1.6" />
                    <circle cx="9" cy="18.5" r="1.6" />
                    <circle cx="15" cy="18.5" r="1.6" />
                </svg>
            </span>
        </div>

        <div class="wc-name">
            <span>{{ item.name }}</span>
            <span v-if="item.alias" class="badge alias" :title="`校级别名；超管下发名称：${item.originalName || item.name}`">别名</span>
            <span v-if="adaptive" class="tag-adaptive">按角色适配</span>
        </div>
        <div class="wc-code">{{ item.code }}</div>

        <div class="wc-meta">
            <div class="row">
                <span class="k">取数键</span>
                <span class="v">
                    <code v-if="item.dataCode">{{ item.dataCode }}</code>
                    <span v-else class="dim">—</span>
                </span>
            </div>
            <div class="row">
                <span class="k">可见</span>
                <span class="v">
                    <span class="rchip" :class="scopeCls">{{ scopeText }}</span>
                    <span v-if="roleAll" class="rchip all">全角色</span>
                    <template v-else>
                        <span v-for="r in roleList" :key="r" class="rchip">{{ roleNameOf(r) }}</span>
                    </template>
                </span>
            </div>
            <div class="row">
                <span class="k">更新</span>
                <span class="v dim">{{ item.updateTime || "—" }}</span>
            </div>
        </div>

        <div class="wc-ft">
            <span class="wc-ops">
                <a class="op" @click="$emit('edit', item)">{{ isSuperView ? "编辑" : "设置" }}</a>
                <a class="op" @click="$emit('preview', item)">预览</a>
                <a v-if="isSuperView" class="op danger" @click="$emit('del', item)">删除</a>
            </span>
            <span class="wc-sw">
                <span class="sw" :class="{ 'is-on': !!item.enabled }" @click="$emit('toggle', item)"></span>
                <span class="wc-sw-t" :class="{ on: !!item.enabled }">{{ item.enabled ? "已启用" : "已下线" }}</span>
            </span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import type { WidgetCatalog } from "@/types";
import { RoleTypeEnum } from "@/types";

const props = defineProps<{
    item: WidgetCatalog;
    isSuperView: boolean;
    registryHit: boolean;
    schools: { id: number; name: string }[];
    dragging: boolean;
    dragOver: boolean;
}>();

const emit = defineEmits<{
    (e: "edit" | "preview" | "toggle" | "del", item: WidgetCatalog): void;
    (e: "dragstart" | "dragover" | "drop", id: number | undefined): void;
    (e: "dragend"): void;
}>();

const draggable = ref(false);

const typeLabel = computed(() => (props.item.compType === 1 ? "内置组件" : "自定义片段"));
const adaptive = computed(() => props.item.compType === 1 && props.item.code === "syllabus");

const roleKeys = computed(() => {
    const raw = props.item.roleTypes;
    if (!raw) return [] as number[];
    return raw
        .split(",")
        .map(x => Number(x.trim()))
        .filter(x => !isNaN(x))
        .sort();
});
const roleAll = computed(() => roleKeys.value.length === 0 || roleKeys.value.length === 3);
const roleList = computed(() => (roleAll.value ? [] : roleKeys.value));
const roleNameOf = (k: number) => ({ [RoleTypeEnum.Teacher]: "教师", [RoleTypeEnum.SchAdmin]: "校领导", [RoleTypeEnum.Student]: "学生" })[k] || `角色 ${k}`;

const schoolNameOf = (id: number) => props.schools.find(x => x.id === id)?.name || `学校 ${id}`;
const scopeCls = computed(() => (props.item.scopeType === 1 ? "sch" : props.item.scopeType === 2 ? "no" : "all"));
const scopeText = computed(() => {
    const names = (props.item.scopeSchIds || []).map(schoolNameOf).join("、");
    if (props.item.scopeType === 1) return `指定可见 ${names}`;
    if (props.item.scopeType === 2) return `指定不可见 ${names}`;
    return "全部学校";
});

function onDragStart(e: DragEvent) {
    if (e.dataTransfer) {
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text/plain", String(props.item.id));
    }
    emit("dragstart", props.item.id);
}
function onDragOver() {
    if (draggable.value) emit("dragover", props.item.id);
}
function onDrop() {
    emit("drop", props.item.id);
    draggable.value = false;
}
function onDragEnd() {
    draggable.value = false;
    emit("dragend");
}
</script>

<style lang="scss" scoped>
@use "sass:color";
@use "../../assets/styles/utils/varible" as *;

$wm-brand: $color-primary; // 品牌主色唯一来源 = 项目 SCSS 变量
$wm-brand-weak: color.mix(#ffffff, $wm-brand, 90%);
$wm-brand-line: color.mix(#ffffff, $wm-brand, 78%);

.wcard {
    --wm-t1: #2c3138;
    --wm-t2: #4a4f55;
    --wm-t3: #7a8088;
    --wm-t4: #9aa0a8;
    --wm-line: #eef0f3;
    --wm-line2: #e5e8ee;
    --wm-ok: #12a150;
    --wm-ok-bg: #e8f7ee;
    --wm-warn: #b54708;
    --wm-warn-bg: #fff4e5;
    --wm-danger: #d92d20;
    --wm-danger-bg: #fdecea;

    border: 1px solid var(--wm-line2);
    border-radius: 10px;
    padding: 13px 14px 0;
    background: #fff;
    transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
    position: relative;
    // 同一行卡片等高、底部操作行对齐（网格 stretch + 底部自适应）
    display: flex;
    flex-direction: column;

    &:hover {
        border-color: $wm-brand-line;
        box-shadow: 0 6px 18px rgba($wm-brand, 0.12);
        transform: translateY(-1px);
    }
    &.off {
        background: #fcfcfd;
        .wc-name {
            color: var(--wm-t3);
        }
    }
    &.dragging {
        opacity: 0.4;
    }
    &.drag-over {
        border-color: $wm-brand;
        box-shadow: 0 0 0 2px rgba($wm-brand, 0.22);
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    &.builtin {
        background: $wm-brand-weak;
        color: $wm-brand;
    }
    &.custom {
        background: var(--wm-warn-bg);
        color: var(--wm-warn);
    }
    &.ok {
        background: var(--wm-ok-bg);
        color: var(--wm-ok);
    }
    &.warn {
        background: var(--wm-danger-bg);
        color: var(--wm-danger);
    }
    &.mute {
        background: #f0f1f3;
        color: var(--wm-t3);
    }
    &.alias {
        background: #eaf6ff;
        color: #1677b3;
    }
}

.wc-top {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
}
.drag {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: #c4c9d2;
    transition: all 0.15s;
    flex-shrink: 0;
    &:hover {
        color: $wm-brand;
        background: $wm-brand-weak;
    }
    &:active {
        cursor: grabbing;
    }
}
.wc-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--wm-t1);
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tag-adaptive {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 11px;
    background: #eaf6ff;
    color: #1677b3;
    white-space: nowrap;
}
.wc-code {
    font-size: 11.5px;
    color: var(--wm-t4);
    font-family: Consolas, Menlo, monospace;
    margin-top: 2px;
}
.wc-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--wm-line2);
    display: flex;
    flex-direction: column;
    gap: 7px;
    .row {
        display: flex;
        gap: 8px;
        font-size: 12px;
        line-height: 1.7;
        .k {
            width: 46px;
            flex-shrink: 0;
            color: var(--wm-t4);
        }
        .v {
            color: var(--wm-t2);
            min-width: 0;
        }
        .dim {
            color: var(--wm-t4);
        }
    }
}
.rchip {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    border-radius: 5px;
    font-size: 11px;
    background: #eef1f6;
    color: #5b6472;
    margin-right: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    &.all {
        background: #f0f1f3;
        color: var(--wm-t3);
    }
    &.sch {
        background: #eaf6ff;
        color: #1677b3;
    }
    &.no {
        background: var(--wm-danger-bg);
        color: var(--wm-danger);
    }
}
.wc-ft {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 9px 0 11px;
    border-top: 1px solid var(--wm-line);
}
.wc-ops {
    display: flex;
    gap: 11px;
    min-width: 0;
}
.op {
    font-size: 12.5px;
    color: $wm-brand;
    cursor: pointer;
    white-space: nowrap;
    &:hover {
        text-decoration: underline;
    }
    &.danger {
        color: var(--wm-danger);
    }
}
.wc-sw {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.sw {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 21px;
    border-radius: 11px;
    background: #d5d8de;
    cursor: pointer;
    transition: background 0.18s;
    vertical-align: middle;
    flex-shrink: 0;
    &::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: left 0.18s;
    }
    &.is-on {
        background: $wm-brand;
        &::after {
            left: 19px;
        }
    }
}
.wc-sw-t {
    font-size: 12px;
    color: var(--wm-t4);
    &.on {
        color: var(--wm-ok);
    }
}
</style>