diff --git a/public/config.js b/public/config.js index 0c99c80..d185ea6 100644 --- a/public/config.js +++ b/public/config.js @@ -5,12 +5,13 @@ window.$$nazhuaConfig = { // buyBtnText: '购买', // 购买按钮文案 // customBackgroundImage: '', // 自定义的背景图片地址 // lightBackground: true, // 启用了浅色系背景图,会强制关闭点点背景 + // listServerItemTypeToggle: true, // 服务器列表项类型切换 // listServerItemType: 'row', // 服务器列表项类型 card/row row列表模式移动端自动切换至card // listServerStatusType: 'progress', // 服务器状态类型--列表 // listServerRealTimeShowLoad: false, // 列表显示服务器实时负载 // detailServerStatusType: 'progress', // 服务器状态类型--详情页 // serverStatusLinear: true, // 服务器状态渐变线性显示 - // disableSarasaTermSC: false, // 禁用Sarasa Term SC字体 + // disableSarasaTermSC: true, // 禁用Sarasa Term SC字体 // hideWorldMap: false, // 隐藏地图 // hideHomeWorldMap: false, // 隐藏首页地图 // hideDetailWorldMap: false, // 隐藏详情地图 diff --git a/src/layout/components/header.vue b/src/layout/components/header.vue index 3c13d8d..72912dd 100644 --- a/src/layout/components/header.vue +++ b/src/layout/components/header.vue @@ -335,6 +335,10 @@ const dashboardUrl = computed(() => config.nazhua.v1DashboardUrl || '/dashboard' color: #ddd; line-height: 30px; + .value { + font-weight: bold; + } + &.server-count--total { .value { color: #70f3ff; diff --git a/src/views/components/server-detail/server-info-box.vue b/src/views/components/server-detail/server-info-box.vue index bcd4c6a..29bd5ab 100644 --- a/src/views/components/server-detail/server-info-box.vue +++ b/src/views/components/server-detail/server-info-box.vue @@ -212,6 +212,9 @@ v-for="(tag, index) in tagList" :key="`${tag}_${index}`" class="server-info-tag-item" + :class="{ + 'has-sarasa-term': $hasSarasaTerm && config.nazhua.disableSarasaTermSC !== true, + }" > {{ tag }} @@ -605,12 +608,16 @@ const processCount = computed(() => props.info?.State?.ProcessCount); .server-info-tag-item { height: 18px; padding: 0 5px 0 6px; - line-height: 20px; + line-height: 18px; font-size: 12px; color: var(--public-note-tag-color); background: var(--public-note-tag-bg); text-shadow: 1px 1px 2px rgba(#000, 0.2); border-radius: 4px; + + &.has-sarasa-term { + line-height: 20px; + } } } } diff --git a/src/views/components/server-list/card/server-list-item-bill.vue b/src/views/components/server-list/card/server-list-item-bill.vue index 6d9b2f6..f8586de 100644 --- a/src/views/components/server-list/card/server-list-item-bill.vue +++ b/src/views/components/server-list/card/server-list-item-bill.vue @@ -37,7 +37,7 @@ :key="`${tagItem}_${index}`" class="tag-item" :class="{ - 'has-sarasa-term': $hasSarasaTerm, + 'has-sarasa-term': $hasSarasaTerm && config.nazhua.disableSarasaTermSC !== true, }" > {{ tagItem }} diff --git a/src/views/components/server-list/row/server-list-item.vue b/src/views/components/server-list/row/server-list-item.vue index 3f198ac..e11c193 100644 --- a/src/views/components/server-list/row/server-list-item.vue +++ b/src/views/components/server-list/row/server-list-item.vue @@ -156,6 +156,7 @@ function openDetail() { height: 32px; line-height: 34px; font-size: 16px; + font-weight: bold; width: 100%; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/views/components/server-list/server-list-warp.vue b/src/views/components/server-list/server-list-warp.vue index e05d0b6..86c1e4f 100644 --- a/src/views/components/server-list/server-list-warp.vue +++ b/src/views/components/server-list/server-list-warp.vue @@ -90,6 +90,7 @@ defineProps({ flex-direction: column; gap: var(--list-gap-size); width: var(--list-container-width); + padding: 0 var(--list-padding); margin: auto; } diff --git a/src/views/components/server-list/server-option-box.vue b/src/views/components/server-list/server-option-box.vue index cb7ffa0..a5622de 100644 --- a/src/views/components/server-list/server-option-box.vue +++ b/src/views/components/server-list/server-option-box.vue @@ -10,12 +10,22 @@ :key="item.key" class="server-option-item" :class="{ + 'has-icon': item.icon, active: activeValue === item.value, }" :title="item?.title || false" @click="toggleModelValue(item)" > - {{ item.label }} + + {{ item.label }} @@ -85,13 +95,28 @@ function toggleModelValue(item) { background: rgba(#000, 0.3); transition: all 0.3s linear; cursor: pointer; + + &.has-icon { + padding: 0 10px; + border-radius: 4px; + } + @media screen and (max-width: 768px) { + height: 30px; + padding: 0 10px; + border-radius: 3px; background-color: rgba(#000, 0.8); cursor: default; } + .option-icon { + line-height: 1; + font-size: 18px; + } + .option-label { color: #fff; + font-weight: bold; transition: all 0.3s linear; } diff --git a/src/views/home.vue b/src/views/home.vue index 410123d..a0156df 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -31,6 +31,12 @@ v-model="filterFormData.online" :options="onlineOptions" /> + { // 强制开启 if (config.nazhua.forceTransition) { @@ -107,12 +115,18 @@ const showTransition = computed(() => { }); const showListRow = computed(() => { if (windowWidth.value > 1024) { + if (config.nazhua.listServerItemTypeToggle) { + return listType.value === 'row'; + } return config.nazhua.listServerItemType === 'row'; } return false; }); const showListCard = computed(() => { if (windowWidth.value > 1024) { + if (config.nazhua.listServerItemTypeToggle) { + return listType.value !== 'row'; + } return config.nazhua.listServerItemType !== 'row'; } return true; @@ -164,6 +178,18 @@ const onlineOptions = computed(() => { return []; }); +const listTypeOptions = computed(() => [{ + key: 'card', + label: '卡片', + value: 'card', + icon: 'ri-gallery-view-2', +}, { + key: 'row', + label: '列表', + value: 'row', + icon: 'ri-list-view', +}]); + const filterServerList = computed(() => { const fields = {}; const locationMap = {}; @@ -334,10 +360,15 @@ onActivated(() => { justify-content: space-between; gap: 10px 20px; width: var(--list-container-width); + padding: 0 20px; margin: auto; - &.list-is-card { - padding: 0 20px; + .left-box { + gap: 10px; + } + + .right-box { + gap: 10px; } }