Skip to content

Commit 72912f4

Browse files
anghunkanghunk
committed
style(App): 添加 showAuthorName 配置项并更新样式代码
- 在 removePostavatarData 配置中新增 showAuthorName 字段，默认值为 false - 修改了头部插入的 style 样式内容，更新了多项界面布局和按钮样式细节 - 优化了多处组件和元素的视觉表现及交互效果，提升用户体验
1 parent 4cba959 commit 72912f4

8 files changed

Lines changed: 188 additions & 270 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
- style(leveldialog): 修正弹窗宽度及添加响应式样式 #290
1+
- style(App): 添加 showAuthorName 配置项并更新样式代码

‎entrypoints/App.vue‎

Lines changed: 2 additions & 1 deletion
Large diffs are not rendered by default.

‎entrypoints/SettingComponents/BasicSettings/MenuRemovePostAvatar.vue‎

Lines changed: 177 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,184 @@
11
<template>
2-
<div class="item">
3-
<div class="tit">
4-
<!-- 是否保留发帖人仅 PC 端 类主站样式有效，移动端默认只有发帖人 -->
5-
{{ sort }}. 是否移除话题列表上的头像（是否保留发帖人
6-
<input type="checkbox" :checked="modelValue.showAuthor" @change="
7-
$emit('update:modelValue', {
8-
enable: modelValue.enable,
9-
showAuthor: $event.target.checked,
10-
})
11-
" />
12-
）
13-
</div>
14-
<input type="checkbox" :checked="modelValue.enable" @change="
15-
$emit('update:modelValue', {
16-
enable: $event.target.checked,
17-
showAuthor: modelValue.showAuthor,
18-
})
19-
" />
20-
</div>
2+
<div class="item">
3+
<div class="tit">
4+
<!-- 是否保留发帖人仅 PC 端 类主站样式有效，移动端默认只有发帖人 -->
5+
{{ sort }}. 是否移除话题列表上的头像
6+
<br />
7+
<span>
8+
是否保留发帖人头像
9+
<input
10+
type="checkbox"
11+
:checked="modelValue.showAuthor"
12+
@change="
13+
$emit('update:modelValue', {
14+
enable: modelValue.enable,
15+
showAuthor: $event.target.checked,
16+
showAuthorName: modelValue.showAuthorName,
17+
})
18+
"
19+
/>
20+
</span>
21+
22+
<span v-if="modelValue.showAuthor">
23+
是否显示发帖人名称
24+
<input
25+
type="checkbox"
26+
:checked="modelValue.showAuthorName"
27+
@change="
28+
$emit('update:modelValue', {
29+
enable: modelValue.enable,
30+
showAuthor: modelValue.showAuthor,
31+
showAuthorName: $event.target.checked,
32+
})
33+
"
34+
/>
35+
</span>
36+
</div>
37+
<input
38+
type="checkbox"
39+
:checked="modelValue.enable"
40+
@change="
41+
$emit('update:modelValue', {
42+
enable: $event.target.checked,
43+
showAuthor: modelValue.showAuthor,
44+
showAuthorName: modelValue.showAuthorName,
45+
})
46+
"
47+
/>
48+
</div>
2149
</template>
2250

2351
<script>
24-
import $ from "jquery";
52+
import $ from 'jquery';
2553
export default {
26-
props: ["modelValue", "sort"],
27-
emits: ["update:modelValue"],
28-
created() {
29-
if (this.modelValue.enable) {
30-
$("head").append(`<style>
31-
.topic-list-data.posters { width: max-content !important; }
32-
.topic-list-content.right { margin-left:0 !important; }
33-
34-
.topic-list-data.posters ${this.modelValue.showAuthor ? "> *:not(:first-child)" : ""
35-
},
36-
.topic-list-avatar.pull-left { display:none !important }
37-
</style>`);
38-
}
39-
},
54+
props: ['modelValue', 'sort'],
55+
emits: ['update:modelValue'],
56+
data() {
57+
return {
58+
updateIntervalId: null,
59+
pollingIntervalId: null,
60+
styleInjected: false,
61+
};
62+
},
63+
methods: {
64+
// 注入样式
65+
injectStyle() {
66+
if (this.styleInjected) return;
67+
$('head').append(`<style id="remove-post-avatar-style">
68+
.topic-list-data.posters { width: max-content !important; }
69+
.topic-list-content.right { margin-left:0 !important; }
70+
.topic-list-data.posters ${this.modelValue.showAuthor ? '> *:not(:first-child)' : ''},
71+
.topic-list-avatar.pull-left { display:none !important }
72+
.topic-list td.topic-list-data.posters a:nth-child(1) span.poster-username{color:#999;font-size:12px;padding-left:2px;}
73+
</style>`);
74+
this.styleInjected = true;
75+
},
76+
// 处理话题列表，添加用户名
77+
processTopicList() {
78+
const showAuthorName = this.modelValue.showAuthorName;
79+
$('.topic-list td.topic-list-data.posters').each(function () {
80+
const $this = $(this);
81+
const $existingUsername = $this.find('.poster-username');
82+
83+
// 如果不显示用户名，移除已存在的
84+
if (!showAuthorName) {
85+
$existingUsername.remove();
86+
return;
87+
}
88+
89+
// 跳过已处理的元素
90+
if ($existingUsername.length > 0) return;
91+
92+
const title = $this.find('a:nth-child(1) img').attr('title');
93+
if (title) {
94+
const username = title.split(' - ')[0].trim();
95+
$this.find('a:nth-child(1)').append(`<span class="poster-username">${username}</span>`);
96+
}
97+
});
98+
},
99+
// 初始化定时器
100+
initTimers() {
101+
this.clearTimers();
102+
103+
// 注入样式
104+
this.injectStyle();
105+
106+
// 立即执行一次
107+
this.processTopicList();
108+
109+
// 设置短间隔更新定时器 (1秒)
110+
this.updateIntervalId = setInterval(() => {
111+
this.processTopicList();
112+
}, 1000);
113+
114+
// 设置长间隔轮询定时器 (10秒)
115+
this.pollingIntervalId = setInterval(() => {
116+
this.processTopicList();
117+
}, 10000);
118+
},
119+
// 清除所有定时器
120+
clearTimers() {
121+
if (this.updateIntervalId) {
122+
clearInterval(this.updateIntervalId);
123+
this.updateIntervalId = null;
124+
}
125+
if (this.pollingIntervalId) {
126+
clearInterval(this.pollingIntervalId);
127+
this.pollingIntervalId = null;
128+
}
129+
},
130+
},
131+
mounted() {
132+
if (this.modelValue.enable) {
133+
this.initTimers();
134+
}
135+
},
136+
beforeUnmount() {
137+
this.clearTimers();
138+
},
139+
// Vue 2 兼容性
140+
beforeDestroy() {
141+
this.clearTimers();
142+
},
143+
watch: {
144+
'modelValue.enable'(newVal) {
145+
if (newVal) {
146+
this.initTimers();
147+
} else {
148+
this.clearTimers();
149+
}
150+
},
151+
'modelValue.showAuthor'() {
152+
// showAuthor 变化时重新注入样式
153+
if (this.modelValue.enable) {
154+
$('#remove-post-avatar-style').remove();
155+
this.styleInjected = false;
156+
this.injectStyle();
157+
}
158+
},
159+
'modelValue.showAuthorName'() {
160+
// showAuthorName 变化时重新处理列表
161+
if (this.modelValue.enable) {
162+
this.processTopicList();
163+
}
164+
},
165+
},
40166
};
41167
</script>
168+
169+
<style scoped lang="less">
170+
#linuxdoscripts .menu-body-item .item .tit {
171+
line-height: 2;
172+
}
173+
174+
#linuxdoscripts .menu-body-item .item .tit span {
175+
width: 100%;
176+
display: inline-flex;
177+
align-items: center;
178+
padding-left: 16px;
179+
180+
input {
181+
margin-left: 5px;
182+
}
183+
}
184+
</style>

‎entrypoints/SettingComponents/BasicSettings/MenuSimpleMode.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ section.post-menu-area{position:absolute!important;bottom:-30px;right:0;transiti
2222
.topic-meta-data .user-status-message-wrap{display:none}
2323
#topic-title h1 a{font-weight:500;font-size:22px}
2424
.more-topics__container{display:none}
25-
#topic-footer-buttons .topic-footer-main-buttons__actions,.global-notice,.topic-list .topic-list-data.posters,.topic-list .views,.topic-notifications-button,.topic-map__contents,.topic-map__additional-contents{display:none!important}
25+
#topic-footer-buttons .topic-footer-main-buttons__actions,.global-notice,.topic-list .views,.topic-notifications-button,.topic-map__contents,.topic-map__additional-contents{display:none!important}
2626
.names>span a,.topic-body .reply-to-tab{font-size:14px;color:silver!important;font-weight:400}
2727
.d-header-wrap{opacity:.2;transition:all .15s linear}
2828
.d-header-wrap:hover{opacity:1}

0 commit comments

Comments
 (0)