553 lines
13 KiB
CSS
553 lines
13 KiB
CSS
/**
|
|
* 主样式文件
|
|
* 包含应用所有样式
|
|
*/
|
|
|
|
/* 导入组件样式 */
|
|
@import './components/badge.css';
|
|
@import './components/modal.css';
|
|
@import './components/button.css';
|
|
@import './components/card.css';
|
|
@import './components/form.css';
|
|
@import './components/navigation.css';
|
|
@import './components/table.css';
|
|
@import './components/pagination.css';
|
|
@import './components/search-box.css';
|
|
@import './components/filter-panel.css';
|
|
@import './components/file-icon.css';
|
|
@import './components/status-badge.css';
|
|
@import './components/file-type-tag.css';
|
|
@import './components/status-dot.css';
|
|
@import './components/switch.css';
|
|
@import './components/tag.css';
|
|
@import './components/file-progress.css';
|
|
@import './components/processing-steps.css';
|
|
@import './components/date-range-picker.css';
|
|
@import './components/upload-area.css';
|
|
@import './components/file-tag.css';
|
|
@import './components/message-modal.css';
|
|
@import './components/toast.css';
|
|
@import './components/TooltipStyles.css';
|
|
@import './components/document-version.css';
|
|
@import './components/result-stats.css';
|
|
@import './components/dify-dataset-manager/index.css';
|
|
/* @import './components/modal.css'; */
|
|
|
|
|
|
/* 导入页面特定样式 */
|
|
@import './pages/contract-template.css';
|
|
|
|
/* Tailwind 基础指令 */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* 全局变量和基础样式 */
|
|
@layer base {
|
|
:root {
|
|
/* 主题颜色变量 */
|
|
--color-primary: #00684a;
|
|
--color-primary-hover: #005a3f;
|
|
--color-primary-light: rgba(0, 104, 74, 0.1);
|
|
|
|
/* 成功、警告、错误颜色 */
|
|
--color-success: #52c41a;
|
|
--color-warning: #faad14;
|
|
--color-error: #f5222d;
|
|
|
|
/* 中性色 */
|
|
--color-gray-50: #f8f9fa;
|
|
--color-gray-100: #f1f3f5;
|
|
--color-gray-200: #e9ecef;
|
|
--color-gray-300: #dee2e6;
|
|
--color-gray-400: #ced4da;
|
|
--color-gray-500: #adb5bd;
|
|
--color-gray-600: #868e96;
|
|
--color-gray-700: #495057;
|
|
--color-gray-800: #343a40;
|
|
--color-gray-900: #212529;
|
|
}
|
|
|
|
/* 基本元素样式 */
|
|
html, body {
|
|
@apply text-gray-800 antialiased;
|
|
font-smooth: always;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* 文字选择颜色 */
|
|
::selection {
|
|
@apply bg-[rgba(0,104,74,0.2)] text-[#00684a];
|
|
}
|
|
|
|
/* 滚动条美化 */
|
|
::-webkit-scrollbar {
|
|
@apply w-2 h-2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-gray-100;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-300 rounded-full hover:bg-gray-400;
|
|
}
|
|
|
|
/* 链接样式 */
|
|
a {
|
|
@apply text-[#00684a] hover:text-[#005a3f] transition-colors duration-200;
|
|
}
|
|
|
|
.ant-btn:focus{
|
|
outline: none;
|
|
outline-offset: 0;
|
|
border-color: #00684a;
|
|
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.1);
|
|
}
|
|
|
|
.ant-input:focus,
|
|
.ant-input:active,
|
|
.ant-input-outlined:focus-within,
|
|
.ant-select-focused,
|
|
.ant-select:active,
|
|
.ant-select:hover{
|
|
outline: none;
|
|
outline-offset: 0;
|
|
border-color: #00684a;
|
|
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.1);
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
/* 组件相关样式 */
|
|
@layer components {
|
|
/* 文本颜色工具类 */
|
|
.text-primary {
|
|
@apply !text-[--color-primary];
|
|
}
|
|
.text-error {
|
|
@apply !text-[--color-error];
|
|
}
|
|
|
|
.bg-primary {
|
|
@apply bg-[#00684a];
|
|
}
|
|
|
|
.transition-all-ease {
|
|
@apply transition-all duration-200 ease-in-out;
|
|
}
|
|
|
|
/* === 布局组件 === */
|
|
.layout-container {
|
|
@apply flex min-h-screen bg-gray-50;
|
|
}
|
|
|
|
/* 用户资料 */
|
|
.user-profile {
|
|
@apply p-4 border-b border-gray-100 flex items-center;
|
|
}
|
|
|
|
.avatar {
|
|
@apply w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center;
|
|
}
|
|
|
|
/* === 侧边栏 === */
|
|
.sidebar {
|
|
@apply w-[240px] h-screen bg-white border-r border-gray-100 flex flex-col
|
|
transition-all duration-300 fixed left-0 top-0 z-[100] overflow-y-auto
|
|
shadow-[0_0_15px_rgba(0,0,0,0.05)];
|
|
}
|
|
|
|
/* 侧边栏滚动区域样式 */
|
|
.sidebar-scroll-area {
|
|
}
|
|
|
|
/* 滚动条样式 - 与背景色一致 */
|
|
.sidebar-scroll-area::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.sidebar-scroll-area::-webkit-scrollbar-track {
|
|
@apply bg-white;
|
|
}
|
|
|
|
.sidebar-scroll-area::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-400 rounded;
|
|
}
|
|
|
|
.sidebar-scroll-area::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-gray-500;
|
|
}
|
|
|
|
.sidebar.collapsed {
|
|
@apply w-20;
|
|
}
|
|
|
|
/* 移动端侧边栏遮罩层 */
|
|
.sidebar-overlay {
|
|
@apply fixed inset-0 bg-black bg-opacity-50 z-[99];
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 移动端侧边栏样式 */
|
|
.sidebar-mobile {
|
|
@apply shadow-[0_0_20px_rgba(0,0,0,0.15)];
|
|
}
|
|
|
|
.sidebar-mobile.collapsed {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.sidebar-menu {
|
|
@apply flex-1 overflow-y-auto py-4 px-3;
|
|
}
|
|
|
|
.sidebar-menu-item {
|
|
@apply flex items-center py-3 px-4 text-gray-800 no-underline rounded-md
|
|
cursor-pointer transition-all duration-200 mb-1 relative
|
|
hover:bg-[rgba(0,104,74,0.05)];
|
|
/* 确保点击事件可以正常工作 */
|
|
pointer-events: auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
.sidebar-menu-item i {
|
|
@apply text-base w-6 text-center;
|
|
}
|
|
|
|
.sidebar-menu-text {
|
|
@apply ml-2.5 transition-opacity duration-200;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-menu-text {
|
|
@apply opacity-0 invisible;
|
|
}
|
|
|
|
.sidebar-menu-item.active {
|
|
@apply bg-[rgba(0,104,74,0.1)] text-[#00684A] font-medium;
|
|
}
|
|
|
|
.submenu-container {
|
|
@apply mt-1 mb-2 space-y-1 overflow-hidden border-l border-gray-100 ml-4 pl-3 relative;
|
|
/* 确保子菜单在父菜单之上 */
|
|
z-index: 5;
|
|
}
|
|
|
|
.sidebar.collapsed .submenu-container {
|
|
@apply border-l-0 pl-0;
|
|
}
|
|
|
|
.submenu-container .sidebar-menu-item {
|
|
@apply py-2 pl-2 text-sm;
|
|
}
|
|
|
|
.sidebar-menu-item:hover {
|
|
@apply bg-[rgba(0,104,74,0.05)];
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
@apply bg-transparent border-none text-xl text-gray-500 cursor-pointer p-1
|
|
rounded transition-all duration-200;
|
|
}
|
|
|
|
.sidebar-toggle:hover {
|
|
@apply bg-gray-100;
|
|
}
|
|
|
|
/* === 主内容区域 === */
|
|
.main-content {
|
|
@apply ml-[240px] flex-1 transition-all duration-300 flex flex-col;
|
|
}
|
|
|
|
.main-content.sidebar-collapsed {
|
|
@apply ml-20;
|
|
}
|
|
|
|
/* 应用模块选择器 */
|
|
.app-module-selector {
|
|
@apply bg-white shadow-sm;
|
|
}
|
|
|
|
.app-module-btn {
|
|
@apply transition-all duration-200 text-gray-700 hover:bg-gray-50 font-medium;
|
|
}
|
|
|
|
.app-module-btn.active {
|
|
@apply bg-green-50 text-green-700 border border-green-200;
|
|
}
|
|
|
|
/* 内容容器 */
|
|
.content-container {
|
|
@apply py-6 bg-gray-50 flex-1 overflow-auto;
|
|
}
|
|
|
|
/* === 页面顶部栏 === */
|
|
.page-topbar {
|
|
@apply fixed top-0 right-0 z-[90] border-b border-gray-100 transition-all duration-300;
|
|
left: 240px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 6px 18px rgba(19, 51, 38, 0.08);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.page-topbar.sidebar-collapsed {
|
|
left: 80px;
|
|
}
|
|
|
|
.page-topbar .topbar-content {
|
|
@apply flex items-center justify-between px-6 py-3 gap-4;
|
|
}
|
|
|
|
.page-topbar .topbar-left {
|
|
@apply flex items-center gap-3 flex-1 min-w-0;
|
|
}
|
|
|
|
.page-topbar .topbar-icon {
|
|
@apply inline-flex items-center justify-center w-10 h-10 rounded-md flex-shrink-0;
|
|
color: #00684a;
|
|
background: rgba(0, 104, 74, 0.08);
|
|
border: 1px solid rgba(0, 104, 74, 0.16);
|
|
}
|
|
|
|
.page-topbar .topbar-icon i {
|
|
@apply text-xl;
|
|
}
|
|
|
|
.page-topbar .topbar-heading {
|
|
@apply flex flex-col gap-1 min-w-0;
|
|
}
|
|
|
|
.page-topbar .topbar-title {
|
|
@apply m-0 text-lg font-semibold text-gray-900 whitespace-nowrap;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.page-topbar .topbar-breadcrumb {
|
|
@apply flex items-center gap-2 text-gray-500 text-xs;
|
|
}
|
|
|
|
.page-topbar .topbar-breadcrumb a {
|
|
@apply text-green-700 no-underline transition-colors duration-200;
|
|
}
|
|
|
|
.page-topbar .topbar-breadcrumb a:hover {
|
|
@apply text-green-800 underline;
|
|
}
|
|
|
|
.page-topbar .separator {
|
|
@apply text-gray-400;
|
|
}
|
|
|
|
.page-topbar .topbar-right {
|
|
@apply flex items-center gap-2 flex-shrink-0;
|
|
}
|
|
|
|
.page-topbar .topbar-action {
|
|
@apply inline-flex items-center justify-center gap-1.5 h-9 px-3.5 rounded-md
|
|
text-sm font-medium no-underline transition-all duration-200;
|
|
color: #ffffff;
|
|
background: #00684a;
|
|
border: 1px solid #00684a;
|
|
}
|
|
|
|
.page-topbar .topbar-action:hover {
|
|
color: #ffffff;
|
|
background: #005a3f;
|
|
border-color: #005a3f;
|
|
box-shadow: 0 4px 10px rgba(0, 104, 74, 0.18);
|
|
}
|
|
|
|
.page-topbar .topbar-action.secondary {
|
|
color: #243d32;
|
|
background: #ffffff;
|
|
border-color: #d7e2dc;
|
|
}
|
|
|
|
.page-topbar .topbar-action.secondary:hover {
|
|
color: #00684a;
|
|
background: #f3faf6;
|
|
border-color: rgba(0, 104, 74, 0.32);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.page-topbar .topbar-nav {
|
|
@apply flex items-center gap-2 px-6 py-2.5 border-t border-gray-100 flex-wrap;
|
|
background: #f7faf8;
|
|
}
|
|
|
|
.page-topbar .topbar-nav-link {
|
|
@apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-white text-gray-700
|
|
no-underline text-sm transition-all duration-200 border border-gray-200
|
|
cursor-pointer hover:border-green-700 hover:text-green-700 hover:bg-green-50;
|
|
}
|
|
|
|
.page-topbar .topbar-nav-link i {
|
|
@apply text-base;
|
|
color: #6b7d74;
|
|
}
|
|
|
|
.page-topbar .topbar-nav-link:hover i {
|
|
color: #00684a;
|
|
}
|
|
|
|
.page-topbar .topbar-filter-strip {
|
|
@apply flex items-end gap-3 px-6 py-3 border-t border-gray-100 flex-wrap;
|
|
background: #f7faf8;
|
|
}
|
|
|
|
.page-topbar .topbar-filter-field {
|
|
@apply flex flex-col gap-1.5 min-w-[180px];
|
|
}
|
|
|
|
.page-topbar .topbar-filter-field-search {
|
|
@apply flex-1 min-w-[260px];
|
|
}
|
|
|
|
.page-topbar .topbar-filter-field span {
|
|
@apply text-xs font-medium text-gray-600;
|
|
}
|
|
|
|
.page-topbar .topbar-filter-field select,
|
|
.page-topbar .topbar-filter-field input {
|
|
@apply h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-800
|
|
outline-none transition-all duration-200;
|
|
}
|
|
|
|
.page-topbar .topbar-filter-field select:focus,
|
|
.page-topbar .topbar-filter-field input:focus {
|
|
border-color: #00684a;
|
|
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.1);
|
|
}
|
|
|
|
.main-content.rules-detail-main,
|
|
.main-content.rules-list-main {
|
|
@apply h-screen overflow-hidden;
|
|
}
|
|
|
|
.main-content.rules-detail-main .content-container,
|
|
.main-content.rules-list-main .content-container {
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.main-content.rules-detail-main .content-container {
|
|
padding-top: 132px;
|
|
}
|
|
|
|
.main-content.rules-list-main .content-container {
|
|
padding-top: 156px;
|
|
}
|
|
|
|
/* === 面包屑导航 === */
|
|
.breadcrumb {
|
|
@apply flex items-center text-sm text-gray-500 mb-4;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
.breadcrumb-item:not(:last-child)::after {
|
|
content: "/";
|
|
@apply mx-2;
|
|
}
|
|
|
|
.breadcrumb-item:last-child {
|
|
@apply text-gray-700 font-medium;
|
|
}
|
|
|
|
/* === UI组件 === */
|
|
|
|
/* 卡片组件 */
|
|
.card {
|
|
@apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;
|
|
}
|
|
|
|
/* === 响应式调整 === */
|
|
@screen sm {
|
|
.content-container {
|
|
@apply p-6;
|
|
}
|
|
}
|
|
|
|
/* 移动端响应式样式 (768px以下) */
|
|
@media (max-width: 768px) {
|
|
/* 移动端主内容区域无左边距 */
|
|
.main-content {
|
|
@apply ml-0;
|
|
}
|
|
|
|
.main-content.sidebar-collapsed {
|
|
@apply ml-0;
|
|
}
|
|
|
|
/* 移动端侧边栏默认隐藏 */
|
|
.sidebar {
|
|
@apply w-[280px];
|
|
}
|
|
|
|
/* 移动端侧边栏折叠时完全隐藏 */
|
|
.sidebar.collapsed {
|
|
@apply w-0;
|
|
}
|
|
}
|
|
|
|
@screen md {
|
|
.sidebar-toggle {
|
|
@apply block;
|
|
}
|
|
}
|
|
|
|
/* === 暗色模式 === */
|
|
.dark .layout-container {
|
|
@apply bg-gray-900;
|
|
}
|
|
|
|
.dark .content-container {
|
|
@apply bg-gray-900 text-gray-200;
|
|
}
|
|
}
|
|
|
|
/* RemixIcon 图标保护规则 - 防止被样式隔离覆盖 */
|
|
[class^="ri-"]:before,
|
|
[class*=" ri-"]:before,
|
|
i[class^="ri-"]:before,
|
|
i[class*=" ri-"]:before {
|
|
font-family: 'remixicon' !important;
|
|
font-style: normal !important;
|
|
font-weight: normal !important;
|
|
font-variant: normal !important;
|
|
text-transform: none !important;
|
|
line-height: 1 !important;
|
|
-webkit-font-smoothing: antialiased !important;
|
|
-moz-osx-font-smoothing: grayscale !important;
|
|
speak: none !important;
|
|
}
|
|
|
|
/* 确保RemixIcon元素本身也使用正确的字体 */
|
|
[class^="ri-"],
|
|
[class*=" ri-"],
|
|
i[class^="ri-"],
|
|
i[class*=" ri-"] {
|
|
font-family: 'remixicon' !important;
|
|
font-style: normal !important;
|
|
}
|