mrlee
278f8267b7
- 公网反代：Nginx 状态卡片（版本 / 运行状态 / 配置校验 / 端口监听） - 部署设置第一、二梯队（HTTPS 开关、安全头、限流、连接数、仅中国大陆 IP） - 隧道检测兼容 frps v0.68 / v0.71（V2 与旧版端点） - 恢复被清空的 internal/frp/store.go、internal/api/ddns_handler.go、web/src/views/DdnsView.vue
73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<template>
|
|
<div class="fonu-card" :class="{ 'fonu-card--flush': flush }">
|
|
<div v-if="title || $slots.title || $slots.header" class="fonu-card__header">
|
|
<div>
|
|
<h3 v-if="title" class="fonu-card__title">{{ title }}</h3>
|
|
<div v-else-if="$slots.title" class="fonu-card__title fonu-card__title-row">
|
|
<slot name="title" />
|
|
</div>
|
|
<p v-if="subtitle" class="fonu-card__subtitle">{{ subtitle }}</p>
|
|
</div>
|
|
<div v-if="$slots.header" class="fonu-card__header-extra">
|
|
<slot name="header" />
|
|
</div>
|
|
</div>
|
|
<div class="fonu-card__body">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
title?: string
|
|
subtitle?: string
|
|
flush?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fonu-card {
|
|
background: var(--fonu-surface);
|
|
border: 1px solid var(--fonu-border);
|
|
border-radius: var(--fonu-radius);
|
|
box-shadow: var(--fonu-shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fonu-card__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--fonu-space-4);
|
|
padding: var(--fonu-space-5) var(--fonu-space-5) 0;
|
|
}
|
|
|
|
.fonu-card__title {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--fonu-text);
|
|
}
|
|
|
|
.fonu-card__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--fonu-space-2);
|
|
}
|
|
|
|
.fonu-card__subtitle {
|
|
margin: var(--fonu-space-1) 0 0;
|
|
font-size: 13px;
|
|
color: var(--fonu-text-secondary);
|
|
}
|
|
|
|
.fonu-card__body {
|
|
padding: var(--fonu-space-5);
|
|
}
|
|
|
|
.fonu-card--flush .fonu-card__body {
|
|
padding-top: 0;
|
|
}
|
|
</style>
|