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;
}
}