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

app/styles/components/card.css

@@ -26,7 +26,7 @@
 
 /* 卡片内容 */
 .card-body {
-  @apply p-5;
+  @apply p-1;
 }
 
 /* 卡片底部 */

app/styles/components/file-icon.css

@@ -0,0 +1,50 @@
+/**
+ * 文件图标组件样式
+ */
+
+/* 文件图标容器 */
+.file-icon {
+  @apply inline-flex items-center justify-center w-10 h-10 rounded-md text-xl;
+}
+
+/* 文件图标类型 */
+.file-icon-doc {
+  @apply bg-blue-100 text-blue-600;
+}
+
+.file-icon-pdf {
+  @apply bg-red-100 text-red-600;
+}
+
+.file-icon-xls {
+  @apply bg-green-100 text-green-600;
+}
+
+.file-icon-ppt {
+  @apply bg-orange-100 text-orange-600;
+}
+
+.file-icon-zip {
+  @apply bg-purple-100 text-purple-600;
+}
+
+.file-icon-img {
+  @apply bg-pink-100 text-pink-600;
+}
+
+.file-icon-txt {
+  @apply bg-gray-100 text-gray-600;
+}
+
+.file-icon-unknown {
+  @apply bg-gray-100 text-gray-600;
+}
+
+/* 文件图标尺寸 */
+.file-icon-sm {
+  @apply w-8 h-8 text-base;
+}
+
+.file-icon-lg {
+  @apply w-12 h-12 text-2xl;
+} 

app/styles/components/file-type-tag.css

@@ -0,0 +1,80 @@
+/**
+ * 文件类型标签组件样式
+ */
+
+/* 文件类型标签基础样式 */
+.file-type-tag {
+  @apply inline-flex items-center px-2 py-1 rounded text-xs font-medium;
+}
+
+/* 文件类型颜色 */
+.file-type-tag-doc {
+  @apply bg-blue-100 text-blue-800;
+}
+
+.file-type-tag-pdf {
+  @apply bg-red-100 text-red-800;
+}
+
+.file-type-tag-xls {
+  @apply bg-green-100 text-green-800;
+}
+
+.file-type-tag-ppt {
+  @apply bg-orange-100 text-orange-800;
+}
+
+.file-type-tag-zip {
+  @apply bg-purple-100 text-purple-800;
+}
+
+.file-type-tag-img {
+  @apply bg-pink-100 text-pink-800;
+}
+
+.file-type-tag-txt {
+  @apply bg-gray-100 text-gray-800;
+}
+
+.file-type-tag-unknown {
+  @apply bg-gray-100 text-gray-800;
+}
+
+/* 特定业务文件类型 */
+.file-type-tag-contract {
+  @apply bg-blue-100 text-blue-800;
+}
+
+.file-type-tag-license {
+  @apply bg-green-100 text-green-800;
+}
+
+.file-type-tag-punishment {
+  @apply bg-orange-100 text-orange-800;
+}
+
+.file-type-tag-report {
+  @apply bg-cyan-100 text-cyan-800;
+}
+
+.file-type-tag-other {
+  @apply bg-purple-100 text-purple-800;
+}
+
+/* 文件类型尺寸 */
+.file-type-tag-sm {
+  @apply px-1.5 py-0 text-xs;
+}
+
+.file-type-tag-lg {
+  @apply px-2.5 py-1 text-sm;
+}
+
+/* 带图标的文件类型标签 */
+.file-type-tag-with-icon {
+  @apply pl-1.5;
+}
+
+.file-type-tag i {
+  @apply mr-1 text-sm;
+} 

app/styles/components/filter-panel.css

@@ -0,0 +1,57 @@
+/**
+ * 筛选面板组件样式
+ */
+
+/* 筛选面板容器 */
+.filter-panel {
+  @apply bg-white rounded-lg border border-gray-200 shadow-sm p-4 mb-5;
+}
+
+/* 筛选条件列表 */
+.filter-list {
+  @apply flex flex-wrap items-end gap-3;
+}
+
+/* 筛选项 */
+.filter-item {
+  @apply mb-0;
+}
+
+/* 筛选标签 */
+.filter-label {
+  @apply block text-sm font-medium mb-1 text-gray-700;
+}
+
+/* 筛选控件 */
+.filter-control {
+  @apply w-full;
+}
+
+/* 筛选操作按钮区域 */
+.filter-actions {
+  @apply flex justify-end items-center pt-4 mt-4 border-t border-gray-100 space-x-3;
+}
+
+/* 无分割线的按钮区域 */
+.filter-actions-no-divider {
+  @apply border-t-0 pt-0 mt-2;
+}
+
+/* 收起/展开状态 */
+.filter-panel-collapsed {
+  @apply max-h-[120px] overflow-hidden relative;
+}
+
+.filter-panel-collapsed::after {
+  content: '';
+  @apply absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent;
+}
+
+/* 收起/展开切换按钮 */
+.filter-toggle {
+  @apply text-sm text-[#00684a] cursor-pointer hover:text-[#005a3f] flex items-center;
+}
+
+.filter-toggle i {
+  @apply ml-1;
+} 

app/styles/components/pagination.css

@@ -0,0 +1,60 @@
+/**
+ * 分页组件样式
+ */
+
+/* 分页容器 */
+.ant-pagination {
+  @apply flex items-center space-x-1;
+}
+
+/* 分页项 */
+.ant-pagination-item {
+  @apply flex items-center justify-center min-w-[32px] h-8 px-3 
+         border border-gray-200 rounded-md text-sm text-gray-700
+         transition-all duration-200 cursor-pointer;
+}
+
+.ant-pagination-item:hover {
+  @apply border-[#00684a] text-[#00684a];
+  /* @apply border-[#30184a] text-[#30184a]; */
+}
+
+.ant-pagination-item-active {
+  @apply border-[#00684a] bg-[#00684a] text-white font-medium;
+}
+
+.ant-pagination-item-active:hover {
+  @apply text-white;
+}
+
+/* 上一页/下一页按钮 */
+.ant-pagination-prev,
+.ant-pagination-next {
+  @apply flex items-center justify-center w-8 h-8 
+         border border-gray-200 rounded-md text-gray-600
+         transition-all duration-200;
+}
+
+.ant-pagination-prev:hover,
+.ant-pagination-next:hover {
+  @apply border-[#00684a] text-[#00684a];
+}
+
+/* 禁用状态 */
+.ant-pagination-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.ant-pagination-disabled:hover {
+  @apply border-gray-200 text-gray-600;
+}
+
+/* 显示总数和每页显示条数 */
+.ant-pagination-options {
+  @apply flex items-center text-sm text-gray-500 mr-4;
+}
+
+.ant-pagination-options-size-changer {
+  @apply ml-2 px-2 py-1 border border-gray-200 rounded text-sm
+         focus:outline-none focus:ring-1 focus:ring-[#00684a] focus:border-[#00684a];
+} 

app/styles/components/search-box.css

@@ -0,0 +1,80 @@
+/**
+ * 搜索框组件样式
+ */
+
+/* 搜索框容器 */
+.search-box {
+  @apply relative;
+}
+
+/* 搜索框与按钮并排显示 */
+.search-box-row {
+  @apply flex items-center;
+}
+
+.search-box-row .form-input {
+  @apply rounded-r-none;
+}
+
+.search-box-row .search-button {
+  @apply rounded-l-none h-full flex items-center;
+}
+
+/* 搜索输入框 */
+.form-input {
+  @apply w-full py-2 px-4 border border-gray-200 rounded-md text-sm
+         focus:outline-none focus:ring-1 focus:ring-[#00684a] focus:border-[#00684a]
+         placeholder-gray-400 transition-all duration-200;
+}
+
+/* 搜索按钮 */
+.search-button {
+  @apply bg-[#00684a] text-white px-3 py-2 rounded-md border border-[#00684a];
+}
+
+.search-button:hover {
+  @apply bg-[#005a3f] border-[#005a3f];
+}
+
+.search-button i {
+  @apply mr-1;
+}
+
+/* 仅图标按钮样式 */
+.icon-only-btn {
+  @apply px-2;
+}
+
+.icon-only-btn i {
+  @apply mr-0;
+}
+
+/* 搜索框大小 */
+.search-box-sm .form-input {
+  @apply py-1.5 text-sm;
+}
+
+.search-box-lg .form-input {
+  @apply py-2.5 text-base;
+}
+
+/* 搜索图标 */
+.search-box-icon {
+  @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
+}
+
+/* 清除按钮 */
+.search-box-clear {
+  @apply absolute right-3 top-1/2 transform -translate-y-1/2 
+         text-gray-400 hover:text-gray-600 cursor-pointer transition-colors duration-200;
+}
+
+/* 带边框的搜索框 */
+.search-box-bordered {
+  @apply shadow-sm;
+}
+
+/* 搜索框禁用状态 */
+.form-input:disabled {
+  @apply bg-gray-100 cursor-not-allowed opacity-70;
+} 

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;
+} 

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;
+} 

app/styles/components/table.css

@@ -2,6 +2,67 @@
  * 表格组件样式
  */
 
+/* 表格容器 */
+.ant-table-wrapper {
+  @apply w-full overflow-x-auto relative;
+}
+
+/* 表格 */
+.ant-table {
+  @apply w-full border-collapse text-sm;
+}
+
+/* 表头 */
+.ant-table thead th {
+  @apply bg-gray-50 font-medium py-3 px-4 text-left text-gray-700 border-b border-gray-200;
+}
+
+/* 表格内容 */
+.ant-table tbody td {
+  @apply py-3 px-4 border-b border-gray-100;
+}
+
+/* 表格行 */
+.ant-table tbody tr {
+  @apply bg-white hover:bg-gray-50 transition-colors duration-150;
+}
+
+/* 空状态 */
+.ant-table-empty {
+  @apply py-12 text-center text-gray-500;
+}
+
+/* 带边框的表格 */
+.ant-table-bordered,
+.ant-table-bordered .ant-table thead th,
+.ant-table-bordered .ant-table tbody td {
+  @apply border border-gray-200;
+}
+
+/* 表格加载状态 */
+.ant-table-loading {
+  @apply relative opacity-60;
+}
+
+.ant-table-loading-indicator {
+  @apply absolute inset-0 flex items-center justify-center bg-white bg-opacity-70;
+}
+
+/* 表格行选中状态 */
+.ant-table tr.selected {
+  @apply bg-[rgba(0,104,74,0.05)];
+}
+
+/* 表格排序图标 */
+.ant-table-column-sorter {
+  @apply ml-1 text-gray-400 inline-flex flex-col;
+}
+
+.ant-table-column-sorter-up.active,
+.ant-table-column-sorter-down.active {
+  @apply text-[#00684a];
+}
+
 @layer components {
   /* 基础表格 */
   .table-container {

app/styles/components/tag.css

@@ -0,0 +1,65 @@
+/**
+ * 标签组件样式
+ */
+
+/* 标签基础样式 */
+.tag {
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium;
+}
+
+/* 标签类型 */
+.tag-blue {
+  @apply bg-blue-100 text-blue-800;
+}
+
+.tag-green {
+  @apply bg-green-100 text-green-800;
+}
+
+.tag-red {
+  @apply bg-red-100 text-red-800;
+}
+
+.tag-yellow {
+  @apply bg-yellow-100 text-yellow-800;
+}
+
+.tag-purple {
+  @apply bg-purple-100 text-purple-800;
+}
+
+.tag-gray {
+  @apply bg-gray-100 text-gray-800;
+}
+
+/* 添加新的颜色 */
+.tag-cyan {
+  @apply bg-cyan-100 text-cyan-800;
+}
+
+.tag-orange {
+  @apply bg-orange-100 text-orange-800;
+}
+
+/* 标签尺寸 */
+.tag-sm {
+  @apply px-2 py-0 text-xs;
+}
+
+.tag-lg {
+  @apply px-3 py-1 text-sm;
+}
+
+/* 可关闭的标签 */
+.tag-closable {
+  @apply pr-1;
+}
+
+.tag-close-icon {
+  @apply ml-1 cursor-pointer text-opacity-70 hover:text-opacity-100 transition-opacity duration-200;
+}
+
+/* 可点击的标签 */
+.tag-clickable {
+  @apply cursor-pointer hover:opacity-80 transition-opacity duration-200;
+}