Merge pull request #193 from Prurite/master (0b011f5a) · Commits · sustech-online / sustech-online-ng

docs/.vuepress/components/BusAnnouncement.vue

+18 −14

Original line number	Diff line number	Diff line
		@@ -60,7 +60,6 @@ export default {
		announcement: null,
		error: null,
		appTheme: {}, // 用于控制 antd 主题的对象
		mediaQuery: null, // 用于存储媒体查询对象
		};
		},

		@@ -95,12 +94,9 @@ export default {
		},

		// 更新主题的函数
		updateTheme(event) {
		if (event.matches) {
		this.appTheme = { algorithm: darkAlgorithm };
		} else {
		this.appTheme = {};
		}
		updateTheme() {
		const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
		this.appTheme = isDark ? { algorithm: darkAlgorithm } : {};
		},
		},

		@@ -108,17 +104,25 @@ export default {
		mounted() {
		this.fetchAnnouncement();

		if (window.matchMedia) {
		this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
		this.updateTheme(this.mediaQuery);
		this.mediaQuery.addEventListener('change', this.updateTheme);
		}
		// Initial theme set
		this.updateTheme();

		// Listen for changes to [data-theme] attribute
		this._themeObserver = new MutationObserver(() => {
		this.updateTheme();
		});
		this._themeObserver.observe(document.documentElement, {
		attributes: true,
		attributeFilter: ['data-theme'],
		});
		},

		// 使用 beforeUnmount (Vue 3) 钩子来清理监听器
		beforeUnmount() {
		if (this.mediaQuery) {
		this.mediaQuery.removeEventListener('change', this.updateTheme);
		// Clean up observer
		if (this._themeObserver) {
		this._themeObserver.disconnect();
		this._themeObserver = null;
		}
		},
		};

+506 −288

File changed.

Preview size limit exceeded, changes collapsed.

+9 −9

Original line number	Diff line number	Diff line
		@@ -15,8 +15,7 @@
		<div v-if="currentSelect === 'bus-location'">
		<div class="bus-location-hint" v-if="showMapChart">
		<b>位置每5秒自动刷新。</b>Location refreshes automatically every 5 seconds.<br>
		<b>电瓶车的实时位置暂不可用。</b>Realtime location of Shuttle EVs are not available yet.<br>
		<b>在地图上点击对应的站点，可查看实时到站时间预测。</b>Click on the station on the map to see the realtime ETA.
		<b>（测试中）图上点击对应的站点，可查看实时到站时间预测。</b>Click on the station on the map to see the realtime ETA. (testing)
		</div>
		<RealtimeMapv2 v-if="showMapChart" />
		<BusETAdemo />
		@@ -86,13 +85,6 @@ export default {
		</script>

		<style scoped>
		.ant-segmented {
		color: unset;
		font-size: unset;
		font-variant: unset;
		font-feature-settings: unset;
		}

		.tab-container {
		margin-top: 6px;
		}
		@@ -100,4 +92,12 @@ export default {
		.bus-location-hint {
		padding-bottom: 4px;
		}

		/* Dark mode overrides for Ant Design Segmented */
		[data-theme="dark"] .ant-segmented,
		[data-theme="dark"] .ant-segmented-item
		{
		background: #222 !important;
		color: #eee !important;
		}
		</style>
		No newline at end of file

+3 −0

+2 −0