2025-04-04 13:15:39 +08:00
|
|
|
ComponentSystem.register('mirrors-table', {
|
|
|
|
|
template: `
|
|
|
|
|
<div>
|
2025-10-12 05:13:57 +08:00
|
|
|
<t-config-provider :global-config="{ table: tableConfig }">
|
|
|
|
|
<t-table
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:data="data"
|
|
|
|
|
row-key="name"
|
|
|
|
|
size="small"
|
|
|
|
|
verticalAlign="bottom"
|
|
|
|
|
@data-change="dataChange"
|
|
|
|
|
>
|
|
|
|
|
<template v-for="col in columns" :key="col.colKey" #[col.title]>
|
|
|
|
|
<div v-if="col.tooltip" class="t-table__th-cell-inner">
|
|
|
|
|
<t-space style="gap: 4px">
|
|
|
|
|
<span>{{ col.title }}</span>
|
|
|
|
|
<t-tooltip :content="col.tooltip" placement="bottom" :show-arrow="false">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M11.95 18q.525 0 .888-.363t.362-.887t-.362-.888t-.888-.362t-.887.363t-.363.887t.363.888t.887.362m.05 4q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m.1-12.3q.625 0 1.088.4t.462 1q0 .55-.337.975t-.763.8q-.575.5-1.012 1.1t-.438 1.35q0 .35.263.588t.612.237q.375 0 .638-.25t.337-.625q.1-.525.45-.937t.75-.788q.575-.55.988-1.2t.412-1.45q0-1.275-1.037-2.087T12.1 6q-.95 0-1.812.4T8.975 7.625q-.175.3-.112.638t.337.512q.35.2.725.125t.625-.425q.275-.375.688-.575t.862-.2"/></svg>
|
|
|
|
|
</t-tooltip>
|
|
|
|
|
</t-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="t-table__th-cell-inner">{{ col.title }}</div>
|
2025-04-04 13:15:39 +08:00
|
|
|
</template>
|
2025-10-12 05:13:57 +08:00
|
|
|
<template v-for="col in columns" :key="col.colKey" #[col.colKey]="{ row }">
|
|
|
|
|
<template v-if="col.colKey === 'name'">
|
|
|
|
|
<t-popup placement="bottom" :show-arrow="false">
|
|
|
|
|
<template #content>
|
|
|
|
|
<t-space direction="vertical" algin="center" style="gap: 2px">
|
|
|
|
|
<span>{{ row.officialName }}</span>
|
|
|
|
|
<a :href="row.url" target="_blank" style="color: var(--md-typeset-a-color)">{{ row.domain }}</a>
|
|
|
|
|
</t-space>
|
|
|
|
|
</template>
|
|
|
|
|
<a :href="row.url" target="_blank">
|
|
|
|
|
<t-space align="center" style="gap: 6px">
|
|
|
|
|
<span style="display: flex; height: 16px; width: 16px; align-items: center; justify-content: center">
|
|
|
|
|
<img v-if="row.icon" :src="\`/assets/images/icon/mirrors/\${row.icon}\`" width="16" height="16">
|
|
|
|
|
</span>
|
|
|
|
|
<span>{{ row.name }}</span>
|
|
|
|
|
</t-space>
|
|
|
|
|
</a>
|
|
|
|
|
</t-popup>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<t-tag v-if="typeof row[col.colKey] === 'boolean'" :theme="row[col.colKey] ? 'success' : 'danger'" variant="light" size="small" style="background-color: transparent; height: 100%; vertical-align: -0.35em">
|
|
|
|
|
<template #icon>
|
|
|
|
|
<svg v-if="row[col.colKey]" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59L21 7Z"></svg>
|
|
|
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="vertical-align: -0.2em"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"></svg>
|
|
|
|
|
</template>
|
|
|
|
|
</t-tag>
|
|
|
|
|
<t-tag v-else theme="warning" variant="light" size="small" style="background-color: transparent; vertical-align: -0.35em">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="vertical-align: -0.1em"><path fill="#F6B604" d="M22.11 21.46L2.39 1.73L1.11 3l2.95 2.95A9.95 9.95 0 0 0 2 12c0 5.5 4.5 10 10 10c2.28 0 4.37-.77 6.05-2.06l2.79 2.79l1.27-1.27M12 20c-4.42 0-8-3.58-8-8c0-1.73.56-3.32 1.5-4.62L16.62 18.5A7.78 7.78 0 0 1 12 20M8.17 4.97L6.72 3.5C8.25 2.56 10.06 2 12 2c5.5 0 10 4.5 10 10c0 1.94-.56 3.75-1.5 5.28l-1.47-1.45c.62-1.14.97-2.44.97-3.83c0-4.42-3.58-8-8-8c-1.39 0-2.69.35-3.83.97Z"></svg>
|
|
|
|
|
</t-tag>
|
|
|
|
|
</template>
|
2025-04-04 13:15:39 +08:00
|
|
|
</template>
|
2025-10-12 05:13:57 +08:00
|
|
|
</t-table>
|
|
|
|
|
</t-config-provider>
|
2025-04-04 13:15:39 +08:00
|
|
|
</div>
|
|
|
|
|
`,
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
columns: mirrorsTableColumns,
|
|
|
|
|
data: mirrorsTableData,
|
2025-10-12 05:13:57 +08:00
|
|
|
tableConfig: mirrorsTableConfig,
|
2025-04-04 13:15:39 +08:00
|
|
|
}
|
|
|
|
|
},
|
2025-06-15 20:18:44 +08:00
|
|
|
methods: {
|
|
|
|
|
dataChange(data) {
|
|
|
|
|
this.data = data
|
|
|
|
|
},
|
|
|
|
|
},
|
2025-04-04 13:15:39 +08:00
|
|
|
})
|
