封装公共组件，调整样式文件的布局，修改路由页面样式

app/styles/components/status-badge.css

@@ -0,0 +1,72 @@
+/**
+ * 状态徽章组件样式
+ */
+
+/* 状态徽章基础样式 */
+.status-badge {
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+}
+
+/* 状态徽章尺寸 */
+.status-badge-sm {
+  @apply px-2 py-0.5 text-xs;
+}
+
+.status-badge-lg {
+  @apply px-3 py-1 text-sm;
+}
+
+/* 状态徽章类型 */
+.status-badge-success {
+  @apply bg-green-100 text-green-800;
+}
+
+.status-badge-processing {
+  @apply bg-blue-100 text-blue-800;
+}
+
+.status-badge-warning {
+  @apply bg-yellow-100 text-yellow-800;
+}
+
+.status-badge-error {
+  @apply bg-red-100 text-red-800;
+}
+
+.status-badge-default {
+  @apply bg-gray-100 text-gray-800;
+}
+
+/* 带图标的状态徽章 */
+.status-badge-with-icon {
+  @apply pl-1.5;
+}
+
+.status-badge i {
+  @apply mr-1;
+}
+
+/* 可点击的状态徽章 */
+.status-badge-clickable {
+  @apply cursor-pointer transition-colors duration-200;
+}
+
+.status-badge-clickable.status-badge-success:hover {
+  @apply bg-green-200;
+}
+
+.status-badge-clickable.status-badge-processing:hover {
+  @apply bg-blue-200;
+}
+
+.status-badge-clickable.status-badge-warning:hover {
+  @apply bg-yellow-200;
+}
+
+.status-badge-clickable.status-badge-error:hover {
+  @apply bg-red-200;
+}
+
+.status-badge-clickable.status-badge-default:hover {
+  @apply bg-gray-200;
+}