update ThemeSetting.vue style

src/pages/setting/ThemeSetting.vue

@@ -1,24 +1,18 @@
 <template>
-	<div class="page">
+	<div class="theme-setting">
-		<section class="card">
+		<t-cell-group theme="card">
-			<div class="head">
+			<t-radio
-				<p class="tag">主题</p>
+				v-for="item in themeModeList"
-				<h2 class="header">界面模式</h2>
+				:key="item.value"
-				<p class="desc">当前提供浅色、深色和跟随系统三种模式。</p>
+				class="block"
-			</div>
+				default-checked
-
+				allow-uncheck
-			<div class="modes">
+				:label="item.label"
-				<t-button
+				icon="line"
-					v-for="item in themeModeList"
+				:checked="globalUIStore.themeMode === item.value"
-					:key="item.value"
+				@click="globalUIStore.setThemeMode(item.value)"
-					theme="primary"
+			/>
-					:variant="globalUIStore.themeMode === item.value ? 'base' : 'outline'"
+		</t-cell-group>
-					@click="globalUIStore.setThemeMode(item.value)"
-				>
-					<span v-text="item.label" />
-				</t-button>
-			</div>
-		</section>
 	</div>
 </template>
 
@@ -39,49 +33,14 @@ const themeModeList: Array<{ label: string; value: ThemeMode }> = [
 </script>
 
 <style scoped lang="less">
-.page {
+.theme-setting {
-	padding: 1rem;
+	padding-top: calc(var(--app-nav-offset) + 1rem);
 
-	.card {
+	:deep(.t-radio:last-child) {
-		gap: 1rem;
-		display: flex;
-		padding: 1rem;
-		border-radius: 1rem;
-		flex-direction: column;
-		border: 1px solid var(--app-line);
-		background: var(--app-card);
-		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
-	}
 
-	.head {
+		.t-radio__border {
-		gap: .5rem;
+			display: none;
-		display: flex;
+		}
-		flex-direction: column;
-	}
-
-	.tag,
-	.desc {
-		margin: 0;
-		color: var(--app-sub);
-	}
-
-	.tag {
-		font-size: .875rem;
-	}
-
-	.header {
-		margin: 0;
-		font-size: 1.25rem;
-	}
-
-	.desc {
-		line-height: 1.6;
-	}
-
-	.modes {
-		gap: .75rem;
-		display: flex;
-		flex-wrap: wrap;
 	}
 }
 </style>

src/pages/tabs/SettingsTab.vue

@@ -1,23 +1,10 @@
 <template>
-	<div class="connect-setting">
+	<div class="settings-tab">
-		<section class="card">
+		<t-cell-group theme="card">
-			<div class="head">
+			<t-cell title="连接配置" arrow @click="router.push('/settings/connect')" />
-				<p class="tag">系统设置</p>
+			<t-cell title="仪表板" arrow @click="router.push('/settings/dashboard')" />
-				<h2 class="header">配置入口</h2>
+			<t-cell title="主题" arrow @click="router.push('/settings/theme')" />
-				<p class="desc">设置页只保留入口，具体配置在独立页面中维护。</p>
+		</t-cell-group>
-			</div>
-			<div class="entries">
-				<t-button block variant="outline" @click="openConnectSetting">
-					连接配置
-				</t-button>
-				<t-button block variant="outline" @click="openDashboardSetting">
-					仪表板
-				</t-button>
-				<t-button block variant="outline" @click="openThemeSetting">
-					主题
-				</t-button>
-			</div>
-		</section>
 	</div>
 </template>
 
@@ -27,73 +14,10 @@ defineOptions({
 });
 
 const router = useRouter();
-
-function openConnectSetting(): void {
-	void router.push("/settings/connect");
-}
-
-function openDashboardSetting(): void {
-	void router.push("/settings/dashboard");
-}
-
-function openThemeSetting(): void {
-	void router.push("/settings/theme");
-}
 </script>
 
 <style scoped lang="less">
-.connect-setting {
+.settings-tab {
-	gap: 1rem;
+	padding-top: calc(var(--app-nav-offset) + 1rem);
-	display: flex;
-	padding: 1rem;
-	flex-direction: column;
-
-	.card {
-		gap: 1rem;
-		display: flex;
-		padding: 1rem;
-		border-radius: 1rem;
-		flex-direction: column;
-		border: 1px solid var(--app-line);
-		background: var(--app-card);
-		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
-	}
-
-	.head {
-		gap: .5rem;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.tag,
-	.desc {
-		margin: 0;
-		color: var(--app-sub);
-	}
-
-	.tag {
-		font-size: .875rem;
-	}
-
-	.header {
-		margin: 0;
-		font-size: 1.25rem;
-	}
-
-	.desc {
-		line-height: 1.6;
-	}
-
-	.entries {
-		gap: .75rem;
-		display: flex;
-		flex-direction: column;
-	}
-}
-
-:global(.theme-dark) .connect-setting {
-	.card {
-		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .2);
-	}
 }
 </style>

src/router/index.ts

@@ -156,7 +156,8 @@ const router = createRouter({
 								navBarVisible: true,
 								navBarCanBack: true,
 								navBarTitle: "主题设置",
-								tabBarVisible: false
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
 							},
 							component: ThemeSetting
 						}

src/router/tabs.ts

@@ -43,7 +43,7 @@ const tabs: RouteRecordRaw[] = [
 			tabBarVisible: true,
 			tabBarRoot: true,
 			tabBarPadding: true,
-			bodyBackground: "#FFF"
+			bodyBackground: "#F4F4F4"
 		},
 		component: SettingsTab
 	}