美化设置页面

dashboard/src/components/settings/RoleList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="role-list-container">
+	<div>
 		<n-card class="settings-card">
 			<ObjectList :options="listOptions" />
 		</n-card>
@@ -246,11 +246,6 @@ function configureRole(row) {
 </script>
 
 <style scoped>
-.role-list-container {
-	width: 100%;
-	padding: 0;
-}
-
 .settings-card {
 	border-radius: 12px;
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

dashboard/src/components/settings/RolePermissions.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="role-permissions-container">
+	<div>
 		<div class="mb-5 flex items-center gap-2">
 			<n-tooltip>
 				<template #trigger>
@@ -349,11 +349,6 @@ async function handleAddPermission() {
 </script>
 
 <style scoped>
-.role-permissions-container {
-	width: 100%;
-	padding: 0;
-}
-
 .settings-card {
 	border-radius: 12px;
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

dashboard/src/components/settings/SettingsPermissions.vue

@@ -9,6 +9,12 @@
 <style scoped>
 .permissions-settings-container {
 	width: 100%;
-	padding: 0;
+	padding: 24px;
+}
+
+@media (max-width: 768px) {
+	.permissions-settings-container {
+		padding: 16px;
+	}
 }
 </style>

dashboard/src/components/settings/profile/ProfileSettings.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="p-5">
+	<div class="profile-settings-container">
 		<AccountProfile />
 	</div>
 </template>
@@ -8,4 +8,17 @@
 import AccountProfile from './AccountProfile.vue';
 
 document.title = '设置 - 个人资料';
-</script>
+</script>
+
+<style scoped>
+.profile-settings-container {
+	width: 100%;
+	padding: 24px;
+}
+
+@media (max-width: 768px) {
+	.profile-settings-container {
+		padding: 16px;
+	}
+}
+</style>