UserhomeFront/src/components/widgets/EvaluateWidget.vue

<template>
    <div class="wg-evaluate" ref="refRoot">
        <Skeleton
            v-if="loading"
            style="padding: 15px"
            :loading="true"
            :title="false"
            :paragraph="{ rows: 4 }"
            animated
        />
        <ul v-else-if="list.length > 0" class="tpk-ul">
            <li v-for="item in list" :key="item.id">
                <a :href="courseDetailUrl(item.id)" target="_blank" rel="noopener noreferrer" :title="item.title">
                    <span class="title">{{ item.title }}</span>
                    <span class="sub">{{ item.lectureteaName }} | {{ item.subName }}</span>
                    <span class="date">{{ formatDate(item.lectureTime) }}</span>
                </a>
            </li>
        </ul>
        <div v-else class="no-data">暂无数据</div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import UserSettingApi from "@/api/UserSettingApi";

defineProps<{ widgetId: number }>();
const emit = defineEmits(["loaded"]);

const refRoot = ref<HTMLElement | null>(null);
const loading = ref(true);
const list = ref<any[]>([]);
let observer: ResizeObserver | null = null;

onMounted(async () => {
    if (window.ResizeObserver && refRoot.value) {
        observer = new ResizeObserver(reportHeight);
        observer.observe(refRoot.value);
    }
    try {
        const data: any = await UserSettingApi.getWidgetData("evaluate", "page=0&count=5");
        list.value = (data && data.list) || [];
    } catch (e) {
        console.warn("[widget] evaluate 取数失败", e);
    }
    loading.value = false;
    reportHeight();
});

onUnmounted(() => {
    if (observer) observer.disconnect();
});

function reportHeight() {
    if (refRoot.value) emit("loaded", refRoot.value.offsetHeight);
}

function formatDate(lectureTime: string) {
    return (lectureTime || "").slice(0, 10);
}

/** 跳转链接由前端拼（口径同旧 evaluate_index.js getLinkUrl），候选池不再下发任何 html 地址 */
function courseDetailUrl(id: number) {
    return window.location.origin + "/EvaluateCourese/front/#/courseDetail?id=" + id;
}
</script>

<style lang="scss" scoped>
.wg-evaluate {
    padding: 6px 0 4px;
}
.tpk-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
        margin: 0 15px;
        padding: 6px 0;
        border-bottom: 1px solid #eee;
        &:last-child {
            border-bottom: 0;
        }
        a {
            display: flex;
            align-items: center;
            text-decoration: none;
        }
    }
    .title {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 26px;
        color: #333;
    }
    .sub {
        flex: 0 0 auto;
        font-size: 12px;
        color: #bbb;
        line-height: 26px;
        margin-left: 10px;
    }
    .date {
        flex: 0 0 auto;
        font-size: 12px;
        color: #666;
        line-height: 26px;
        margin-left: 10px;
    }
}
.no-data {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9c2cc;
    font-size: 13px;
}
</style>