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

app/styles/components/status-dot.css

@@ -0,0 +1,83 @@
+/**
+ * 状态点组件样式
+ */
+
+/* 状态点基础样式 */
+.status-dot {
+  @apply inline-block w-2 h-2 rounded-full;
+}
+
+/* 状态点类型 */
+.status-dot-success {
+  @apply bg-green-500;
+}
+
+.status-dot-processing {
+  @apply bg-blue-500;
+}
+
+.status-dot-warning {
+  @apply bg-yellow-500;
+}
+
+.status-dot-error {
+  @apply bg-red-500;
+}
+
+.status-dot-default {
+  @apply bg-gray-400;
+}
+
+/* 状态点尺寸 */
+.status-dot-sm {
+  @apply w-1.5 h-1.5;
+}
+
+.status-dot-lg {
+  @apply w-3 h-3;
+}
+
+/* 带脉冲动画的状态点 */
+.status-dot-pulse {
+  @apply relative;
+}
+
+.status-dot-pulse::after {
+  content: '';
+  @apply absolute w-full h-full rounded-full -left-1 -top-1 animate-ping;
+}
+
+.status-dot-pulse.status-dot-success::after {
+  @apply bg-green-400 opacity-60;
+}
+
+.status-dot-pulse.status-dot-processing::after {
+  @apply bg-blue-400 opacity-60;
+}
+
+.status-dot-pulse.status-dot-warning::after {
+  @apply bg-yellow-400 opacity-60;
+}
+
+.status-dot-pulse.status-dot-error::after {
+  @apply bg-red-400 opacity-60;
+}
+
+/* 带文本的状态点 */
+.status-dot-with-text {
+  @apply flex items-center justify-center;
+}
+
+.status-dot-text {
+  @apply ml-1.5 text-sm;
+  color: inherit;
+}
+
+/* 状态文本颜色 */
+.status-dot-success + .status-dot-text {
+  @apply text-green-600;
+}
+
+.status-dot-default + .status-dot-text {
+  @apply text-gray-500;
+}