新增配置列表和配置新增页面
This commit is contained in:
@@ -97,6 +97,12 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
|
||||
path: '/settings',
|
||||
icon: 'ri-settings-4-line',
|
||||
children: [
|
||||
{
|
||||
id: 'config-lists',
|
||||
title: '配置列表',
|
||||
path: '/config-lists',
|
||||
icon: 'ri-list-check-3'
|
||||
},
|
||||
{
|
||||
id: 'basic-settings',
|
||||
title: '基础设置',
|
||||
|
||||
+3
-3
@@ -43,9 +43,9 @@ export const meta: MetaFunction = () => {
|
||||
export function links() {
|
||||
return [
|
||||
{ rel: "stylesheet", href: styles },
|
||||
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
||||
{ rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
|
||||
{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" }
|
||||
// { rel: "preconnect", href: "https://fonts.googleapis.com" },
|
||||
// { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
|
||||
// { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" }
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -3,9 +3,10 @@ import { type MetaFunction } from "@remix-run/node";
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import homeStyles from "~/styles/pages/home.css?url";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: "app/styles/pages/home.css" }
|
||||
{ rel: "stylesheet", href: homeStyles }
|
||||
];
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
@@ -255,7 +256,7 @@ function StatusBadge({ status }: StatusBadgeProps) {
|
||||
warning: {
|
||||
label: '警告',
|
||||
className: 'status-badge status-warning',
|
||||
icon: 'ri-error-warning-line'
|
||||
icon: 'ri-alert-line'
|
||||
},
|
||||
fail: {
|
||||
label: '不通过',
|
||||
@@ -264,7 +265,7 @@ function StatusBadge({ status }: StatusBadgeProps) {
|
||||
},
|
||||
pending: {
|
||||
label: '待确认',
|
||||
className: 'status-badge',
|
||||
className: 'status-badge status-processing',
|
||||
icon: 'ri-time-line'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,605 @@
|
||||
import { json, type MetaFunction, type LoaderFunctionArgs, type ActionFunctionArgs } from "@remix-run/node";
|
||||
import { useLoaderData, useSearchParams, useSubmit, Link } from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
|
||||
import { Pagination } from "~/components/ui/Pagination";
|
||||
import { Table } from "~/components/ui/Table";
|
||||
import { Tag } from "~/components/ui/Tag";
|
||||
import configListsStyles from "~/styles/pages/config-lists_index.css?url";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: configListsStyles }
|
||||
];
|
||||
|
||||
// export const handle = {
|
||||
// breadcrumb: "系统配置管理"
|
||||
// };
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "系统配置管理 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "管理系统配置，包括数据库、文件存储、AI引擎等配置项" },
|
||||
{ name: "keywords", content: "系统配置,配置管理,中国烟草,参数设置" }
|
||||
];
|
||||
};
|
||||
|
||||
// 配置环境枚举
|
||||
export enum ConfigEnvironment {
|
||||
DEV = 'dev',
|
||||
TEST = 'test',
|
||||
PROD = 'prod'
|
||||
}
|
||||
|
||||
// 配置模块枚举
|
||||
export enum ConfigModule {
|
||||
SYSTEM = 'system',
|
||||
AUTH = 'auth',
|
||||
FILE = 'file',
|
||||
AI = 'ai',
|
||||
NOTIFICATION = 'notification'
|
||||
}
|
||||
|
||||
// 环境标签映射
|
||||
export const ENVIRONMENT_LABELS: Record<ConfigEnvironment, string> = {
|
||||
[ConfigEnvironment.DEV]: '开发环境',
|
||||
[ConfigEnvironment.TEST]: '测试环境',
|
||||
[ConfigEnvironment.PROD]: '生产环境'
|
||||
};
|
||||
|
||||
// 模块标签映射
|
||||
export const MODULE_LABELS: Record<ConfigModule, string> = {
|
||||
[ConfigModule.SYSTEM]: '系统',
|
||||
[ConfigModule.AUTH]: '认证',
|
||||
[ConfigModule.FILE]: '文件',
|
||||
[ConfigModule.AI]: 'AI配置',
|
||||
[ConfigModule.NOTIFICATION]: '通知'
|
||||
};
|
||||
|
||||
// 配置数据类型
|
||||
interface ConfigDataType {
|
||||
[key: string]: string | number | boolean | string[] | ConfigDataType | ConfigDataType[];
|
||||
}
|
||||
|
||||
// 配置项模型
|
||||
interface ConfigItem {
|
||||
id: string;
|
||||
configName: string;
|
||||
module: ConfigModule;
|
||||
environment: ConfigEnvironment;
|
||||
isActive: boolean;
|
||||
configData: ConfigDataType;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface LoaderData {
|
||||
configs: ConfigItem[];
|
||||
totalCount: number;
|
||||
currentPage: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
const url = new URL(request.url);
|
||||
const configName = url.searchParams.get("configName") || "";
|
||||
const module = url.searchParams.get("module") || "";
|
||||
const environment = url.searchParams.get("environment") || "";
|
||||
const isActive = url.searchParams.get("isActive") || "";
|
||||
const currentPage = parseInt(url.searchParams.get("page") || "1", 10);
|
||||
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
|
||||
|
||||
try {
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const mockConfigs: ConfigItem[] = [
|
||||
{
|
||||
id: "1",
|
||||
configName: "database_connection",
|
||||
module: ConfigModule.SYSTEM,
|
||||
environment: ConfigEnvironment.PROD,
|
||||
isActive: true,
|
||||
configData: {
|
||||
database: {
|
||||
host: "db.cluster.com",
|
||||
port: 5432,
|
||||
pool_size: 20,
|
||||
ssl: true
|
||||
},
|
||||
cache: {
|
||||
ttl: 3600,
|
||||
max_entries: 1000
|
||||
},
|
||||
feature_flags: ["new_ui", "analytics_v2"]
|
||||
},
|
||||
createdAt: "2023-07-10 10:15:23",
|
||||
updatedAt: "2023-07-15 14:30:26"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
configName: "text_extraction_ai",
|
||||
module: ConfigModule.AI,
|
||||
environment: ConfigEnvironment.TEST,
|
||||
isActive: true,
|
||||
configData: {
|
||||
model: "gpt-4",
|
||||
parameters: {
|
||||
temperature: 0.7,
|
||||
max_tokens: 2000
|
||||
},
|
||||
api_key: "sk-**********",
|
||||
timeout: 30
|
||||
},
|
||||
createdAt: "2023-07-12 08:45:12",
|
||||
updatedAt: "2023-07-14 09:15:33"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
configName: "notification_service",
|
||||
module: ConfigModule.NOTIFICATION,
|
||||
environment: ConfigEnvironment.DEV,
|
||||
isActive: false,
|
||||
configData: {
|
||||
email: {
|
||||
smtp_server: "smtp.example.com",
|
||||
port: 587,
|
||||
use_tls: true,
|
||||
sender: "noreply@example.com"
|
||||
},
|
||||
sms: {
|
||||
provider: "aliyun",
|
||||
region: "cn-hangzhou",
|
||||
sign_name: "AI审核系统"
|
||||
}
|
||||
},
|
||||
createdAt: "2023-07-05 13:20:45",
|
||||
updatedAt: "2023-07-10 16:45:19"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
configName: "file_storage",
|
||||
module: ConfigModule.FILE,
|
||||
environment: ConfigEnvironment.PROD,
|
||||
isActive: true,
|
||||
configData: {
|
||||
type: "oss",
|
||||
region: "cn-shanghai",
|
||||
bucket: "contracts-ai-review",
|
||||
access_control: "private",
|
||||
lifecycle_rules: [
|
||||
{
|
||||
prefix: "temp/",
|
||||
ttl_days: 7
|
||||
}
|
||||
]
|
||||
},
|
||||
createdAt: "2023-06-28 09:30:18",
|
||||
updatedAt: "2023-07-08 11:22:07"
|
||||
}
|
||||
];
|
||||
|
||||
// 过滤数据
|
||||
let filteredConfigs = [...mockConfigs];
|
||||
|
||||
if (configName) {
|
||||
filteredConfigs = filteredConfigs.filter(config =>
|
||||
config.configName.toLowerCase().includes(configName.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
if (module) {
|
||||
filteredConfigs = filteredConfigs.filter(config => config.module === module);
|
||||
}
|
||||
|
||||
if (environment) {
|
||||
filteredConfigs = filteredConfigs.filter(config => config.environment === environment);
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
const activeValue = isActive === 'true';
|
||||
filteredConfigs = filteredConfigs.filter(config => config.isActive === activeValue);
|
||||
}
|
||||
|
||||
// 计算分页信息
|
||||
const totalCount = filteredConfigs.length;
|
||||
const totalPages = Math.ceil(totalCount / pageSize);
|
||||
|
||||
// 分页截取
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
const paginatedConfigs = filteredConfigs.slice(startIndex, endIndex);
|
||||
|
||||
return json<LoaderData>({
|
||||
configs: paginatedConfigs,
|
||||
totalCount,
|
||||
currentPage,
|
||||
pageSize,
|
||||
totalPages
|
||||
}, {
|
||||
headers: {
|
||||
"Cache-Control": "max-age=60, s-maxage=180"
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('加载配置列表失败:', error);
|
||||
throw new Response('加载配置列表失败', { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function action({ request }: ActionFunctionArgs) {
|
||||
const formData = await request.formData();
|
||||
const _action = formData.get('_action');
|
||||
const configId = formData.get('configId');
|
||||
|
||||
if (!configId) {
|
||||
return json({ success: false, error: "缺少配置ID" }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
if (_action === 'toggleStatus') {
|
||||
const isActive = formData.get('isActive') === 'true';
|
||||
const newStatus = !isActive;
|
||||
|
||||
// 实际项目中应调用API更新状态
|
||||
console.log(`切换配置 ${configId} 状态为: ${newStatus}`);
|
||||
|
||||
// 模拟API调用
|
||||
// const response = await fetch(`/api/configs/${configId}/status`, {
|
||||
// method: 'PATCH',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
// body: JSON.stringify({ isActive: newStatus }),
|
||||
// });
|
||||
|
||||
// if (!response.ok) {
|
||||
// throw new Error(`状态切换失败: ${response.status}`);
|
||||
// }
|
||||
|
||||
return json({ success: true, newStatus });
|
||||
}
|
||||
|
||||
return json({ success: false, error: "未知操作" }, { status: 400 });
|
||||
} catch (error) {
|
||||
console.error('操作配置失败:', error);
|
||||
return json({ success: false, error: "操作失败" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export function ErrorBoundary() {
|
||||
return (
|
||||
<div className="error-container p-6">
|
||||
<h1 className="text-xl font-bold text-red-500 mb-4">出错了</h1>
|
||||
<p className="mb-4">加载配置列表时发生错误。请稍后再试，或联系管理员。</p>
|
||||
<Button type="primary" to="/">返回首页</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ConfigListsIndex() {
|
||||
const { configs, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const submit = useSubmit();
|
||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
||||
const [selectedConfig, setSelectedConfig] = useState<ConfigItem | null>(null);
|
||||
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
|
||||
if (value) {
|
||||
newParams.set(name, value);
|
||||
} else {
|
||||
newParams.delete(name);
|
||||
}
|
||||
|
||||
// 切换筛选条件时，重置到第一页
|
||||
newParams.set('page', '1');
|
||||
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handleConfigNameSearch = (value: string) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
if (value) {
|
||||
newParams.set('configName', value);
|
||||
} else {
|
||||
newParams.delete('configName');
|
||||
}
|
||||
|
||||
// 搜索时，重置到第一页
|
||||
newParams.set('page', '1');
|
||||
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handleToggleStatus = (config: ConfigItem) => {
|
||||
if (window.confirm(`确定要${config.isActive ? '禁用' : '启用'}该配置吗？`)) {
|
||||
const formData = new FormData();
|
||||
formData.append('_action', 'toggleStatus');
|
||||
formData.append('configId', config.id);
|
||||
formData.append('isActive', String(config.isActive));
|
||||
|
||||
submit(formData, { method: 'post' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewDetail = (config: ConfigItem) => {
|
||||
setSelectedConfig(config);
|
||||
setShowDetailModal(true);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
newParams.set('page', page.toString());
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (size: number) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
newParams.set('pageSize', size.toString());
|
||||
newParams.set('page', '1'); // 更改每页条数时，重置到第一页
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 处理重置筛选
|
||||
const handleReset = () => {
|
||||
setSearchParams(new URLSearchParams());
|
||||
};
|
||||
|
||||
|
||||
// 关闭详情模态框
|
||||
const closeDetailModal = () => {
|
||||
setShowDetailModal(false);
|
||||
setSelectedConfig(null);
|
||||
};
|
||||
|
||||
// 定义表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: "配置名称",
|
||||
dataIndex: "configName" as keyof ConfigItem,
|
||||
key: "configName",
|
||||
width: "20%"
|
||||
},
|
||||
{
|
||||
title: "所属模块",
|
||||
key: "module",
|
||||
width: "10%",
|
||||
render: (_: unknown, record: ConfigItem) => MODULE_LABELS[record.module]
|
||||
},
|
||||
{
|
||||
title: "环境",
|
||||
key: "environment",
|
||||
width: "15%",
|
||||
render: (_: unknown, record: ConfigItem) => {
|
||||
const envClass = `env-tag env-tag-${record.environment}`;
|
||||
return (
|
||||
<span className={envClass}>
|
||||
{ENVIRONMENT_LABELS[record.environment]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "isActive",
|
||||
width: "15%",
|
||||
render: (_: unknown, record: ConfigItem) => (
|
||||
<Tag color={record.isActive ? 'green' : 'red'}>
|
||||
{record.isActive ? '已启用' : '已禁用'}
|
||||
</Tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "最后更新时间",
|
||||
dataIndex: "updatedAt" as keyof ConfigItem,
|
||||
key: "updatedAt",
|
||||
width: "15%"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operation",
|
||||
width: "25%",
|
||||
render: (_: unknown, record: ConfigItem) => (
|
||||
<div className="operations-cell">
|
||||
<button
|
||||
type="button"
|
||||
className="operation-btn"
|
||||
onClick={() => handleViewDetail(record)}
|
||||
>
|
||||
<i className="ri-eye-line"></i> 查看
|
||||
</button>
|
||||
<Link
|
||||
to={`/config-lists/new?id=${record.id}`}
|
||||
type="button"
|
||||
className="operation-btn"
|
||||
>
|
||||
<i className="ri-edit-line"></i> 编辑
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className={`operation-btn ${record.isActive ? '!text-[--color-warning]' : '!text-[--color-success]'}`}
|
||||
onClick={() => handleToggleStatus(record)}
|
||||
>
|
||||
<i className={record.isActive ? `ri-stop-circle-line` : `ri-play-circle-line`}></i>
|
||||
{record.isActive ? '禁用' : '启用'}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
// 生成环境选项
|
||||
const environmentOptions = Object.entries(ENVIRONMENT_LABELS).map(([value, label]) => ({
|
||||
value,
|
||||
label
|
||||
}));
|
||||
|
||||
// 生成模块选项
|
||||
const moduleOptions = Object.entries(MODULE_LABELS).map(([value, label]) => ({
|
||||
value,
|
||||
label
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="config-lists">
|
||||
{/* 页面头部 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-medium">系统配置管理</h2>
|
||||
<Button type="primary" icon="ri-add-line" to="/config-lists/new">
|
||||
新增配置
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 搜索区域 */}
|
||||
<FilterPanel
|
||||
className="mb-4"
|
||||
actions={
|
||||
<>
|
||||
<Button type="default" icon="ri-refresh-line" onClick={handleReset} className="mr-2">
|
||||
重置
|
||||
</Button>
|
||||
<Button type="primary" icon="ri-search-line">
|
||||
查询
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
noActionDivider={true}
|
||||
>
|
||||
<SearchFilter
|
||||
label="配置名称"
|
||||
placeholder="请输入配置名称"
|
||||
value={searchParams.get('configName') || ''}
|
||||
onSearch={handleConfigNameSearch}
|
||||
className="flex-1 min-w-[200px]"
|
||||
instantSearch={true}
|
||||
/>
|
||||
|
||||
<FilterSelect
|
||||
label="所属模块"
|
||||
name="module"
|
||||
value={searchParams.get('module') || ''}
|
||||
options={[{ value: '', label: '全部' }, ...moduleOptions]}
|
||||
onChange={handleFilterChange}
|
||||
className="flex-1 min-w-[200px]"
|
||||
/>
|
||||
|
||||
<FilterSelect
|
||||
label="环境"
|
||||
name="environment"
|
||||
value={searchParams.get('environment') || ''}
|
||||
options={[{ value: '', label: '全部' }, ...environmentOptions]}
|
||||
onChange={handleFilterChange}
|
||||
className="flex-1 min-w-[200px]"
|
||||
/>
|
||||
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
name="isActive"
|
||||
value={searchParams.get('isActive') || ''}
|
||||
options={[
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'true', label: '已启用' },
|
||||
{ value: 'false', label: '已禁用' }
|
||||
]}
|
||||
onChange={handleFilterChange}
|
||||
className="flex-1 min-w-[200px]"
|
||||
/>
|
||||
</FilterPanel>
|
||||
|
||||
{/* 表格区域 */}
|
||||
<Card>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={configs}
|
||||
rowKey="id"
|
||||
emptyText="暂无配置数据"
|
||||
className="config-table"
|
||||
/>
|
||||
|
||||
{/* 分页区域 */}
|
||||
{totalCount > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
total={totalCount}
|
||||
pageSize={pageSize}
|
||||
onChange={handlePageChange}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
showTotal={true}
|
||||
showPageSizeChanger={true}
|
||||
pageSizeOptions={[10, 20, 30, 50]}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 配置详情模态框 */}
|
||||
{showDetailModal && selectedConfig && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 max-w-3xl w-full">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-medium">查看配置详情</h3>
|
||||
<button className="text-gray-500 hover:text-gray-700" onClick={closeDetailModal}>
|
||||
<i className="ri-close-line text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="config-detail-content">
|
||||
<div className="config-detail-item">
|
||||
<div className="config-detail-label">配置名称</div>
|
||||
<div className="config-detail-value">{selectedConfig.configName}</div>
|
||||
</div>
|
||||
|
||||
<div className="config-detail-item">
|
||||
<div className="config-detail-label">所属模块</div>
|
||||
<div className="config-detail-value">{MODULE_LABELS[selectedConfig.module]}</div>
|
||||
</div>
|
||||
|
||||
<div className="config-detail-item">
|
||||
<div className="config-detail-label">环境</div>
|
||||
<div className="config-detail-value">
|
||||
<span className={`env-tag env-tag-${selectedConfig.environment}`}>
|
||||
{ENVIRONMENT_LABELS[selectedConfig.environment]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="config-detail-item">
|
||||
<div className="config-detail-label">状态</div>
|
||||
<div className="config-detail-value">
|
||||
<Tag color={selectedConfig.isActive ? 'green' : 'red'}>
|
||||
{selectedConfig.isActive ? '已启用' : '已禁用'}
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="config-detail-item">
|
||||
<div className="config-detail-label">配置数据</div>
|
||||
<pre className="config-detail-code">
|
||||
{JSON.stringify(selectedConfig.configData, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="config-detail-item">
|
||||
<div className="config-detail-label">创建时间</div>
|
||||
<div className="config-detail-value">{selectedConfig.createdAt}</div>
|
||||
</div>
|
||||
|
||||
<div className="config-detail-item">
|
||||
<div className="config-detail-label">更新时间</div>
|
||||
<div className="config-detail-value">{selectedConfig.updatedAt}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<Button type="default" onClick={closeDetailModal}>关闭</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,682 @@
|
||||
import { json, redirect, type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
|
||||
import { Form, useActionData, useLoaderData, useNavigation } from "@remix-run/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { ConfigModule, MODULE_LABELS, ENVIRONMENT_LABELS } from "./config-lists._index";
|
||||
import configNewStyles from "~/styles/pages/config-lists_new.css?url";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: configNewStyles }
|
||||
];
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: ({ location }: { location: Location }) => {
|
||||
const hasId = new URLSearchParams(location.search).has("id");
|
||||
return hasId ? "编辑配置" : "新增配置";
|
||||
}
|
||||
};
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "新增配置 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "新增或编辑系统配置项" },
|
||||
{ name: "keywords", content: "配置管理,系统配置,新增配置,编辑配置" }
|
||||
];
|
||||
};
|
||||
|
||||
// 扩展环境枚举，添加"通用"选项
|
||||
export enum ExtendedConfigEnvironment {
|
||||
DEV = 'dev',
|
||||
TEST = 'test',
|
||||
PROD = 'prod',
|
||||
COMMON = 'common'
|
||||
}
|
||||
|
||||
// 扩展环境标签映射
|
||||
export const EXTENDED_ENVIRONMENT_LABELS: Record<string, string> = {
|
||||
...ENVIRONMENT_LABELS,
|
||||
[ExtendedConfigEnvironment.COMMON]: '通用'
|
||||
};
|
||||
|
||||
interface ConfigData {
|
||||
id: string;
|
||||
configName: string;
|
||||
module: ConfigModule;
|
||||
environment: string; // 使用扩展的环境类型
|
||||
isActive: boolean;
|
||||
configData: string; // JSON字符串
|
||||
remarks?: string; // 添加备注字段
|
||||
}
|
||||
|
||||
interface LoaderData {
|
||||
config?: ConfigData;
|
||||
isEdit: boolean;
|
||||
}
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
const url = new URL(request.url);
|
||||
const id = url.searchParams.get("id");
|
||||
let config: ConfigData | undefined = undefined;
|
||||
|
||||
if (id) {
|
||||
try {
|
||||
// 实际应用中，应从API获取配置详情
|
||||
// const response = await fetch(`${process.env.API_BASE_URL}/api/configs/${id}`);
|
||||
// if (!response.ok) throw new Error(`获取配置详情失败: ${response.status}`);
|
||||
// config = await response.json();
|
||||
// config.configData = JSON.stringify(config.configData, null, 2);
|
||||
|
||||
// 使用模拟数据
|
||||
if (id === "1") {
|
||||
config = {
|
||||
id: "1",
|
||||
configName: "database_connection",
|
||||
module: ConfigModule.SYSTEM,
|
||||
environment: ExtendedConfigEnvironment.PROD,
|
||||
isActive: true,
|
||||
remarks: "数据库连接配置，包含主库和从库配置",
|
||||
configData: JSON.stringify({
|
||||
database: {
|
||||
host: "db.cluster.com",
|
||||
port: 5432,
|
||||
pool_size: 20,
|
||||
ssl: true
|
||||
},
|
||||
cache: {
|
||||
ttl: 3600,
|
||||
max_entries: 1000
|
||||
},
|
||||
feature_flags: ["new_ui", "analytics_v2"]
|
||||
}, null, 2)
|
||||
};
|
||||
} else if (id === "2") {
|
||||
config = {
|
||||
id: "2",
|
||||
configName: "text_extraction_ai",
|
||||
module: ConfigModule.AI,
|
||||
environment: ExtendedConfigEnvironment.TEST,
|
||||
isActive: true,
|
||||
remarks: "AI文本抽取服务配置",
|
||||
configData: JSON.stringify({
|
||||
model: "gpt-4",
|
||||
parameters: {
|
||||
temperature: 0.7,
|
||||
max_tokens: 2000
|
||||
},
|
||||
api_key: "sk-**********",
|
||||
timeout: 30
|
||||
}, null, 2)
|
||||
};
|
||||
} else if (id === "3") {
|
||||
config = {
|
||||
id: "3",
|
||||
configName: "notification_service",
|
||||
module: ConfigModule.NOTIFICATION,
|
||||
environment: ExtendedConfigEnvironment.DEV,
|
||||
isActive: false,
|
||||
remarks: "通知服务配置，目前处于开发测试阶段",
|
||||
configData: JSON.stringify({
|
||||
email: {
|
||||
smtp_server: "smtp.example.com",
|
||||
port: 587,
|
||||
use_tls: true,
|
||||
sender: "noreply@example.com"
|
||||
},
|
||||
sms: {
|
||||
provider: "aliyun",
|
||||
region: "cn-hangzhou",
|
||||
sign_name: "AI审核系统"
|
||||
}
|
||||
}, null, 2)
|
||||
};
|
||||
} else if (id === "4") {
|
||||
config = {
|
||||
id: "4",
|
||||
configName: "file_storage",
|
||||
module: ConfigModule.FILE,
|
||||
environment: ExtendedConfigEnvironment.COMMON,
|
||||
isActive: true,
|
||||
remarks: "文件存储通用配置，适用于所有环境",
|
||||
configData: JSON.stringify({
|
||||
type: "oss",
|
||||
region: "cn-shanghai",
|
||||
bucket: "contracts-ai-review",
|
||||
access_control: "private",
|
||||
lifecycle_rules: [
|
||||
{
|
||||
prefix: "temp/",
|
||||
ttl_days: 7
|
||||
}
|
||||
]
|
||||
}, null, 2)
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取配置详情失败:", error);
|
||||
// 在实际应用中，应该将错误信息返回给客户端
|
||||
// 这里简单处理，返回空config
|
||||
}
|
||||
}
|
||||
|
||||
return json<LoaderData>({
|
||||
config,
|
||||
isEdit: !!config
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
interface ActionData {
|
||||
success?: boolean;
|
||||
errors?: {
|
||||
configName?: string;
|
||||
module?: string;
|
||||
environment?: string;
|
||||
configData?: string;
|
||||
general?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export async function action({ request }: ActionFunctionArgs) {
|
||||
const formData = await request.formData();
|
||||
const configId = formData.get("id") as string;
|
||||
const configName = formData.get("configName") as string;
|
||||
const module = formData.get("module") as string;
|
||||
const environment = formData.get("environment") as string;
|
||||
const configData = formData.get("configData") as string;
|
||||
const isActive = formData.get("isActive") === "true";
|
||||
const remarks = formData.get("remarks") as string;
|
||||
|
||||
const errors: ActionData["errors"] = {};
|
||||
|
||||
// 表单验证
|
||||
if (!configName || configName.trim() === "") {
|
||||
errors.configName = "配置名称不能为空";
|
||||
}
|
||||
|
||||
if (!module) {
|
||||
errors.module = "请选择所属模块";
|
||||
}
|
||||
|
||||
if (!environment) {
|
||||
errors.environment = "请选择环境";
|
||||
}
|
||||
|
||||
if (!configData || configData.trim() === "") {
|
||||
errors.configData = "配置数据不能为空";
|
||||
} else {
|
||||
try {
|
||||
JSON.parse(configData);
|
||||
} catch (e) {
|
||||
errors.configData = "配置数据必须是有效的JSON格式";
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<ActionData>({ errors });
|
||||
}
|
||||
|
||||
try {
|
||||
// 实际应用中，应调用API保存数据
|
||||
console.log("保存配置:", { configId, configName, module, environment, configData, isActive, remarks });
|
||||
|
||||
// 模拟API调用
|
||||
// const response = await fetch(`${process.env.API_BASE_URL}/api/configs${configId ? `/${configId}` : ''}`, {
|
||||
// method: configId ? "PUT" : "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// },
|
||||
// body: JSON.stringify({
|
||||
// id: configId,
|
||||
// configName,
|
||||
// module,
|
||||
// environment,
|
||||
// configData: JSON.parse(configData),
|
||||
// isActive,
|
||||
// remarks,
|
||||
// }),
|
||||
// });
|
||||
//
|
||||
// if (!response.ok) {
|
||||
// throw new Error(`保存失败: ${response.status}`);
|
||||
// }
|
||||
|
||||
// 保存成功后重定向到列表页
|
||||
return redirect("/config-lists");
|
||||
} catch (error) {
|
||||
console.error("保存配置失败:", error);
|
||||
return json<ActionData>({
|
||||
success: false,
|
||||
errors: {
|
||||
general: "保存配置失败，请稍后重试"
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// JSON模板数据
|
||||
const JSON_TEMPLATES = {
|
||||
database: {
|
||||
database: {
|
||||
host: "localhost",
|
||||
port: 5432,
|
||||
username: "db_user",
|
||||
password: "******",
|
||||
name: "app_database",
|
||||
pool_size: 10,
|
||||
timeout: 5000,
|
||||
ssl: false
|
||||
}
|
||||
},
|
||||
file: {
|
||||
storage: {
|
||||
type: "local", // or "s3", "oss"
|
||||
path: "/data/uploads",
|
||||
allowed_types: ["pdf", "docx", "jpg", "png"],
|
||||
max_size: 10485760, // 10MB
|
||||
backup_enabled: true
|
||||
}
|
||||
},
|
||||
ai: {
|
||||
ai_service: {
|
||||
provider: "openai",
|
||||
api_key: "sk-******",
|
||||
model: "gpt-4",
|
||||
max_tokens: 2000,
|
||||
temperature: 0.7,
|
||||
timeout: 30000,
|
||||
rate_limit: 10 // requests per minute
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function ConfigNew() {
|
||||
const { config, isEdit } = useLoaderData<typeof loader>();
|
||||
|
||||
const actionData = useActionData<typeof action>();
|
||||
const navigation = useNavigation();
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
const [jsonError, setJsonError] = useState<string | null>(null);
|
||||
const [configDataValue, setConfigDataValue] = useState("");
|
||||
const [exampleJsonValue, setExampleJsonValue] = useState("");
|
||||
|
||||
// 标签选择状态
|
||||
const [selectedModule, setSelectedModule] = useState<string>("");
|
||||
const [selectedEnvironment, setSelectedEnvironment] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
// 初始化配置数据
|
||||
if (config?.configData) {
|
||||
setConfigDataValue(config.configData);
|
||||
}
|
||||
|
||||
// 初始化模块和环境的选中状态
|
||||
if (config?.module) {
|
||||
setSelectedModule(config.module);
|
||||
}
|
||||
|
||||
if (config?.environment) {
|
||||
setSelectedEnvironment(config.environment);
|
||||
}
|
||||
|
||||
// 初始化示例JSON
|
||||
setExampleJsonValue(JSON.stringify({
|
||||
database: {
|
||||
host: "db.cluster.com",
|
||||
port: 5432,
|
||||
pool_size: 20,
|
||||
ssl: true
|
||||
},
|
||||
cache: {
|
||||
ttl: 3600,
|
||||
max_entries: 1000
|
||||
},
|
||||
feature_flags: ["new_ui", "analytics_v2"]
|
||||
}, null, 2));
|
||||
|
||||
}, [config]);
|
||||
|
||||
// 处理JSON数据变更
|
||||
const handleConfigDataChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
setConfigDataValue(value);
|
||||
|
||||
if (value.trim() === "") {
|
||||
setJsonError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
JSON.parse(value);
|
||||
setJsonError(null);
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
setJsonError(`配置数据必须是有效的JSON格式: ${error.message}`);
|
||||
} else {
|
||||
setJsonError("配置数据必须是有效的JSON格式");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化JSON
|
||||
const handleFormatJson = () => {
|
||||
if (configDataValue.trim() === "") return;
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(configDataValue);
|
||||
setConfigDataValue(JSON.stringify(parsed, null, 2));
|
||||
setJsonError(null);
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
setJsonError(`当前不是有效的JSON，无法格式化: ${error.message}`);
|
||||
} else {
|
||||
setJsonError("当前不是有效的JSON，无法格式化");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 加载JSON模板
|
||||
const handleLoadTemplate = (type: keyof typeof JSON_TEMPLATES) => {
|
||||
const template = JSON_TEMPLATES[type];
|
||||
setConfigDataValue(JSON.stringify(template, null, 2));
|
||||
setJsonError(null);
|
||||
};
|
||||
|
||||
// 模块标签点击
|
||||
const handleModuleTagClick = (module: string) => {
|
||||
setSelectedModule(module);
|
||||
};
|
||||
|
||||
// 环境标签点击
|
||||
const handleEnvironmentTagClick = (env: string) => {
|
||||
setSelectedEnvironment(env);
|
||||
};
|
||||
|
||||
// 显示JSON语法高亮
|
||||
const renderJsonWithSyntaxHighlight = (json: string) => {
|
||||
try {
|
||||
// 如果是空字符串，直接返回
|
||||
if (!json.trim()) return "";
|
||||
|
||||
// 解析并格式化JSON
|
||||
const parsed = JSON.parse(json);
|
||||
const formatted = JSON.stringify(parsed, null, 2);
|
||||
|
||||
// 添加语法高亮
|
||||
return formatted
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, (match) => {
|
||||
let cls = 'number';
|
||||
if (/^"/.test(match)) {
|
||||
if (/:$/.test(match)) {
|
||||
cls = 'key';
|
||||
match = match.replace(':', '');
|
||||
} else {
|
||||
cls = 'string';
|
||||
}
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = 'boolean';
|
||||
} else if (/null/.test(match)) {
|
||||
cls = 'null';
|
||||
}
|
||||
return `<span class="code-json ${cls}">${match}</span>`;
|
||||
});
|
||||
} catch (e) {
|
||||
// 如果解析失败，返回原始JSON
|
||||
return json;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="config-new-page">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<span className="block text-xl font-medium">{isEdit ? "编辑系统配置" : "新增系统配置"}</span>
|
||||
<div className="form-actions">
|
||||
<Button type="default" to="/config-lists">
|
||||
<i className="ri-arrow-left-line mr-1"></i>
|
||||
返回
|
||||
</Button>
|
||||
<Form method="post" className="inline">
|
||||
{config?.id && <input type="hidden" name="id" value={config.id} />}
|
||||
<input type="hidden" name="configName" value={config?.configName || ''} />
|
||||
<input type="hidden" name="module" value={selectedModule} />
|
||||
<input type="hidden" name="environment" value={selectedEnvironment} />
|
||||
<input type="hidden" name="configData" value={configDataValue} />
|
||||
<input type="hidden" name="isActive" value={config?.isActive !== false ? "true" : "false"} />
|
||||
<input type="hidden" name="remarks" value={config?.remarks || ''} />
|
||||
<Button type="primary" disabled={isSubmitting}>
|
||||
<i className="ri-save-line mr-1"></i>
|
||||
{isSubmitting ? '保存中...' : '保存'}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="config-form-card">
|
||||
<Form method="post" id="configForm" className="config-form">
|
||||
{config?.id && <input type="hidden" name="id" value={config.id} />}
|
||||
|
||||
{/* 配置名称和状态 */}
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="configName" className="form-label required">配置名称</label>
|
||||
<input
|
||||
type="text"
|
||||
id="configName"
|
||||
name="configName"
|
||||
className={`form-input ${actionData?.errors?.configName ? 'input-error' : ''}`}
|
||||
defaultValue={config?.configName || ''}
|
||||
placeholder="请输入配置名称，如database_connection"
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.configName && (
|
||||
<div className="error-message">{actionData.errors.configName}</div>
|
||||
)}
|
||||
<div className="form-help">
|
||||
唯一标识符，配置名称应使用英文，推荐使用下划线命名方式
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="isActive" className="form-label">状态</label>
|
||||
<div className="mt-2">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isActive"
|
||||
name="isActive"
|
||||
value="true"
|
||||
className="form-checkbox"
|
||||
defaultChecked={config?.isActive !== false}
|
||||
/>
|
||||
<label htmlFor="isActive" className="form-checkbox-label">
|
||||
启用此配置
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-help">
|
||||
禁用配置后，系统将不会读取此配置
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 所属模块 */}
|
||||
<div className="form-group">
|
||||
<label htmlFor="module" className="form-label required">所属模块</label>
|
||||
<input
|
||||
type="hidden"
|
||||
name="module"
|
||||
value={selectedModule}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="moduleDisplay"
|
||||
className={`form-input ${actionData?.errors?.module ? 'input-error' : ''}`}
|
||||
value={selectedModule ? MODULE_LABELS[selectedModule as ConfigModule] || selectedModule : ''}
|
||||
placeholder="请输入或选择所属模块"
|
||||
readOnly
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.module && (
|
||||
<div className="error-message">{actionData.errors.module}</div>
|
||||
)}
|
||||
<div className="tag-buttons mt-2">
|
||||
{Object.entries(MODULE_LABELS).map(([value, label]) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
className={`tag-button ${selectedModule === value ? 'active' : ''}`}
|
||||
onClick={() => handleModuleTagClick(value)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="form-help">
|
||||
将配置按功能模块进行分类，便于管理和查找
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 环境 */}
|
||||
<div className="form-group">
|
||||
<label htmlFor="environment" className="form-label required">环境</label>
|
||||
<input
|
||||
type="hidden"
|
||||
name="environment"
|
||||
value={selectedEnvironment}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="environmentDisplay"
|
||||
className={`form-input ${actionData?.errors?.environment ? 'input-error' : ''}`}
|
||||
value={selectedEnvironment ? EXTENDED_ENVIRONMENT_LABELS[selectedEnvironment] || selectedEnvironment : ''}
|
||||
placeholder="请输入或选择环境"
|
||||
readOnly
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.environment && (
|
||||
<div className="error-message">{actionData.errors.environment}</div>
|
||||
)}
|
||||
<div className="tag-buttons mt-2">
|
||||
{Object.entries(EXTENDED_ENVIRONMENT_LABELS).map(([value, label]) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
className={`tag-button ${selectedEnvironment === value ? 'active' : ''}`}
|
||||
onClick={() => handleEnvironmentTagClick(value)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="form-help">
|
||||
不同环境可以使用相同的配置名称，系统会自动识别当前环境并使用对应配置
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 配置数据 */}
|
||||
<div className="form-group">
|
||||
<label htmlFor="configData" className="form-label required">配置数据 (JSON)</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4" style={{ minHeight: '390px' }}>
|
||||
{/* 左侧JSON编辑区 */}
|
||||
<div className="h-full">
|
||||
<textarea
|
||||
id="configData"
|
||||
name="configData"
|
||||
className={`json-editor ${(actionData?.errors?.configData || jsonError) ? 'input-error' : ''}`}
|
||||
value={configDataValue}
|
||||
onChange={handleConfigDataChange}
|
||||
required
|
||||
placeholder='请输入JSON格式的配置数据'
|
||||
/>
|
||||
<div className="editor-actions">
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
onClick={handleFormatJson}
|
||||
>
|
||||
<i className="ri-braces-line mr-1"></i> 格式化JSON
|
||||
</Button>
|
||||
</div>
|
||||
{(actionData?.errors?.configData || jsonError) && (
|
||||
<div className="error-message">{actionData?.errors?.configData || jsonError}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧示例区 */}
|
||||
<div className="h-full">
|
||||
<div className="example-card">
|
||||
<div className="example-header">
|
||||
<div className="example-title">配置示例</div>
|
||||
</div>
|
||||
<div className="example-content">
|
||||
<pre
|
||||
className="example-pre"
|
||||
dangerouslySetInnerHTML={{ __html: renderJsonWithSyntaxHighlight(exampleJsonValue) }}
|
||||
/>
|
||||
</div>
|
||||
<div className="example-footer">
|
||||
<div className="text-sm font-medium mb-2">常用配置模板:</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
onClick={() => handleLoadTemplate('database')}
|
||||
>
|
||||
数据库配置
|
||||
</Button>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
onClick={() => handleLoadTemplate('file')}
|
||||
>
|
||||
文件存储配置
|
||||
</Button>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
onClick={() => handleLoadTemplate('ai')}
|
||||
>
|
||||
AI服务配置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-help">
|
||||
请输入JSON格式的配置数据，支持嵌套结构
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 备注 */}
|
||||
<div className="form-group">
|
||||
<label htmlFor="remarks" className="form-label">备注</label>
|
||||
<textarea
|
||||
id="remarks"
|
||||
name="remarks"
|
||||
className="form-textarea"
|
||||
defaultValue={config?.remarks || ''}
|
||||
rows={2}
|
||||
placeholder="请输入配置备注信息"
|
||||
/>
|
||||
<div className="form-help">
|
||||
可选填项，用于描述配置的用途、注意事项等
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{actionData?.errors?.general && (
|
||||
<div className="form-row">
|
||||
<div className="error-message general-error">{actionData.errors.general}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Outlet } from "@remix-run/react";
|
||||
import { type MetaFunction } from "@remix-run/node";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "配置列表 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{
|
||||
name: "config-lists",
|
||||
content: "配置列表模块，包括配置列表、创建和编辑功能"
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "配置列表"
|
||||
};
|
||||
|
||||
/**
|
||||
* 配置列表路由布局
|
||||
*/
|
||||
export default function ConfigListsLayout() {
|
||||
return <Outlet />;
|
||||
}
|
||||
@@ -1,15 +1,12 @@
|
||||
import { Outlet } from "@remix-run/react";
|
||||
import { type MetaFunction } from "@remix-run/node";
|
||||
|
||||
// export const links = () => [
|
||||
// { rel: "stylesheet", href: "app/styles/pages/rules.css" }
|
||||
// ];
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "评查规则管理 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{
|
||||
name: "description",
|
||||
name: "rules",
|
||||
content: "评查规则管理模块，包括评查点列表、创建和编辑功能"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -1,418 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { redirect, type MetaFunction, type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node';
|
||||
import { useLoaderData, useActionData, Form, useSubmit, useNavigate } from '@remix-run/react';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { Card } from '~/components/ui/Card';
|
||||
import { Breadcrumb } from '~/components/layout/Breadcrumb';
|
||||
import type { Rule, RuleType, RulePriority } from '~/models/rule';
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查规则详情" },
|
||||
{ name: "description", content: "评查规则详情编辑页面" }
|
||||
];
|
||||
};
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: '规则详情'
|
||||
};
|
||||
|
||||
interface LoaderData {
|
||||
rule: Rule;
|
||||
ruleTypes: { label: string; value: RuleType }[];
|
||||
rulePriorities: { label: string; value: RulePriority }[];
|
||||
groupOptions: { label: string; value: string }[];
|
||||
}
|
||||
|
||||
export async function loader({ params }: LoaderFunctionArgs) {
|
||||
const { ruleId } = params;
|
||||
|
||||
// 判断是否为新建规则
|
||||
const isNewRule = ruleId === 'new';
|
||||
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const rule: Rule = isNewRule ? {
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
content: '',
|
||||
type: 'text',
|
||||
priority: 'medium',
|
||||
groupId: '',
|
||||
groupName: '',
|
||||
isActive: true,
|
||||
createdAt: '',
|
||||
updatedAt: ''
|
||||
} : {
|
||||
id: ruleId,
|
||||
name: '许可证编号格式检查',
|
||||
description: '检查烟草专卖零售许可证编号是否符合"烟零许(年份)序号号"的标准格式',
|
||||
content: '许可证编号应当符合"烟零许(年份)序号号"的标准格式，如"烟零许(2023)12345号"',
|
||||
type: 'regex',
|
||||
priority: 'high',
|
||||
groupId: '1',
|
||||
groupName: '专卖许可证规则组',
|
||||
isActive: true,
|
||||
createdAt: '2023-10-15 09:30',
|
||||
updatedAt: '2023-12-10 14:20'
|
||||
};
|
||||
|
||||
// 规则类型选项
|
||||
const ruleTypes = [
|
||||
{ label: '文本匹配', value: 'text' },
|
||||
{ label: '正则表达式', value: 'regex' },
|
||||
{ label: '数值范围', value: 'range' },
|
||||
{ label: '日期检查', value: 'date' },
|
||||
{ label: 'AI智能检查', value: 'ai' }
|
||||
];
|
||||
|
||||
// 规则优先级选项
|
||||
const rulePriorities = [
|
||||
{ label: '低', value: 'low' },
|
||||
{ label: '中', value: 'medium' },
|
||||
{ label: '高', value: 'high' },
|
||||
{ label: '关键', value: 'critical' }
|
||||
];
|
||||
|
||||
// 规则组选项
|
||||
const groupOptions = [
|
||||
{ label: '专卖许可证规则组', value: '1' },
|
||||
{ label: '合同协议规则组', value: '2' },
|
||||
{ label: '财务票据规则组', value: '3' },
|
||||
{ label: '采购订单规则组', value: '4' },
|
||||
{ label: '销售报表规则组', value: '5' }
|
||||
];
|
||||
|
||||
return Response.json({
|
||||
rule,
|
||||
ruleTypes,
|
||||
rulePriorities,
|
||||
groupOptions
|
||||
});
|
||||
}
|
||||
|
||||
interface ActionData {
|
||||
success?: boolean;
|
||||
errors?: {
|
||||
name?: string;
|
||||
description?: string;
|
||||
content?: string;
|
||||
type?: string;
|
||||
priority?: string;
|
||||
groupId?: string;
|
||||
general?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export async function action({ request, params }: ActionFunctionArgs) {
|
||||
const { ruleId } = params;
|
||||
const formData = await request.formData();
|
||||
const isNewRule = ruleId === 'new';
|
||||
|
||||
// 获取表单数据
|
||||
const name = formData.get('name')?.toString() || '';
|
||||
const description = formData.get('description')?.toString() || '';
|
||||
const content = formData.get('content')?.toString() || '';
|
||||
const type = formData.get('type')?.toString() || '';
|
||||
const priority = formData.get('priority')?.toString() || '';
|
||||
const groupId = formData.get('groupId')?.toString() || '';
|
||||
const isActive = formData.get('isActive') === 'true';
|
||||
|
||||
// 表单验证
|
||||
const errors: ActionData['errors'] = {};
|
||||
|
||||
if (!name.trim()) {
|
||||
errors.name = '规则名称不能为空';
|
||||
}
|
||||
|
||||
if (!content.trim()) {
|
||||
errors.content = '规则内容不能为空';
|
||||
}
|
||||
|
||||
if (!type) {
|
||||
errors.type = '必须选择规则类型';
|
||||
}
|
||||
|
||||
if (!priority) {
|
||||
errors.priority = '必须选择规则优先级';
|
||||
}
|
||||
|
||||
if (!groupId) {
|
||||
errors.groupId = '必须选择规则所属组';
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return Response.json({ errors });
|
||||
}
|
||||
|
||||
// 模拟API保存操作，实际项目中应调用API
|
||||
try {
|
||||
// 在这里调用API进行保存
|
||||
console.log('保存规则:', {
|
||||
id: isNewRule ? 'new-id' : ruleId,
|
||||
name,
|
||||
description,
|
||||
content,
|
||||
type,
|
||||
priority,
|
||||
groupId,
|
||||
isActive
|
||||
});
|
||||
|
||||
// 成功后重定向到规则列表页
|
||||
return redirect('/rules');
|
||||
} catch (error) {
|
||||
return Response.json({
|
||||
errors: {
|
||||
general: '保存规则失败，请重试'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default function RuleDetail() {
|
||||
const { rule, ruleTypes, rulePriorities, groupOptions } = useLoaderData<typeof loader>();
|
||||
const actionData = useActionData<typeof action>();
|
||||
const navigate = useNavigate();
|
||||
const submit = useSubmit();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: rule.name,
|
||||
description: rule.description,
|
||||
content: rule.content,
|
||||
type: rule.type,
|
||||
priority: rule.priority,
|
||||
groupId: rule.groupId,
|
||||
isActive: rule.isActive
|
||||
});
|
||||
|
||||
const isNewRule = !rule.id;
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSwitchChange = (name: string, checked: boolean) => {
|
||||
setFormData(prev => ({ ...prev, [name]: checked }));
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate('/rules');
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
// 使用useSubmit提交表单
|
||||
const formElement = e.currentTarget;
|
||||
submit(formElement, { method: 'post' });
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ title: '评查规则', to: '/rules' },
|
||||
{ title: isNewRule ? '新增规则' : '编辑规则', to: `/rules/${rule.id}` }
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-medium">{isNewRule ? '新增评查规则' : '编辑评查规则'}</h2>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Form method="post" onSubmit={handleSubmit}>
|
||||
{actionData?.errors?.general && (
|
||||
<div className="error-message mb-4">
|
||||
<i className="ri-error-warning-line mr-1"></i>
|
||||
{actionData.errors.general}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-section mb-6">
|
||||
<h3 className="form-section-title">基本信息</h3>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group col-span-6">
|
||||
<label htmlFor="name" className="form-label required">规则名称</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
className={`form-input ${actionData?.errors?.name ? 'error' : ''}`}
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.name && (
|
||||
<div className="form-error">{actionData.errors.name}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group col-span-6">
|
||||
<label htmlFor="groupId" className="form-label required">所属规则组</label>
|
||||
<select
|
||||
id="groupId"
|
||||
name="groupId"
|
||||
className={`form-select ${actionData?.errors?.groupId ? 'error' : ''}`}
|
||||
value={formData.groupId}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="">选择规则组</option>
|
||||
{groupOptions.map((option: { value: string; label: string }) => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{actionData?.errors?.groupId && (
|
||||
<div className="form-error">{actionData.errors.groupId}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group col-span-12">
|
||||
<label htmlFor="description" className="form-label">规则描述</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
className="form-textarea"
|
||||
rows={3}
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section mb-6">
|
||||
<h3 className="form-section-title">规则设置</h3>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group col-span-4">
|
||||
<label htmlFor="type" className="form-label required">规则类型</label>
|
||||
<select
|
||||
id="type"
|
||||
name="type"
|
||||
className={`form-select ${actionData?.errors?.type ? 'error' : ''}`}
|
||||
value={formData.type}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="">选择规则类型</option>
|
||||
{ruleTypes.map((option: { value: string; label: string }) => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{actionData?.errors?.type && (
|
||||
<div className="form-error">{actionData.errors.type}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group col-span-4">
|
||||
<label htmlFor="priority" className="form-label required">规则优先级</label>
|
||||
<select
|
||||
id="priority"
|
||||
name="priority"
|
||||
className={`form-select ${actionData?.errors?.priority ? 'error' : ''}`}
|
||||
value={formData.priority}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="">选择优先级</option>
|
||||
{rulePriorities.map((option: { value: string; label: string }) => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{actionData?.errors?.priority && (
|
||||
<div className="form-error">{actionData.errors.priority}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group col-span-4">
|
||||
<label htmlFor="isActive" className="form-label">状态</label>
|
||||
<div className="flex items-center h-10 mt-1">
|
||||
<label className="switch" aria-label="切换规则状态">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
checked={formData.isActive}
|
||||
onChange={(e) => handleSwitchChange('isActive', e.target.checked)}
|
||||
/>
|
||||
<span className="slider round"></span>
|
||||
</label>
|
||||
<input type="hidden" name="isActive" value={formData.isActive ? 'true' : 'false'} />
|
||||
<span className="ml-2">{formData.isActive ? '启用' : '禁用'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group col-span-12">
|
||||
<label htmlFor="content" className="form-label required">规则内容</label>
|
||||
<textarea
|
||||
id="content"
|
||||
name="content"
|
||||
className={`form-textarea code-editor ${actionData?.errors?.content ? 'error' : ''}`}
|
||||
rows={8}
|
||||
value={formData.content}
|
||||
onChange={handleChange}
|
||||
required
|
||||
></textarea>
|
||||
{actionData?.errors?.content && (
|
||||
<div className="form-error">{actionData.errors.content}</div>
|
||||
)}
|
||||
{formData.type === 'regex' && (
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
<i className="ri-information-line mr-1"></i>
|
||||
输入正则表达式，用于匹配文档内容
|
||||
</div>
|
||||
)}
|
||||
{formData.type === 'ai' && (
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
<i className="ri-information-line mr-1"></i>
|
||||
请使用自然语言描述规则检查的要求，AI将自动理解并执行检查
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section mb-6">
|
||||
<h3 className="form-section-title">测试工具</h3>
|
||||
|
||||
<div className="p-4 bg-gray-50 rounded-md">
|
||||
<div className="mb-4">
|
||||
<label htmlFor="testContent" className="form-label">测试内容</label>
|
||||
<textarea
|
||||
id="testContent"
|
||||
className="form-textarea"
|
||||
rows={4}
|
||||
placeholder="粘贴待测试的文本内容..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="default">
|
||||
<i className="ri-test-tube-line mr-1"></i>
|
||||
测试规则
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button type="default" onClick={handleCancel}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
{isNewRule ? '创建规则' : '保存修改'}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,16 @@
|
||||
/**
|
||||
/* *
|
||||
* 按钮组件样式
|
||||
*/
|
||||
|
||||
/* 基础按钮 */
|
||||
/* 基础按钮
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2
|
||||
border border-transparent rounded-md font-medium text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
|
||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
} */
|
||||
|
||||
/* 按钮尺寸 */
|
||||
/* 按钮尺寸
|
||||
.btn-xs {
|
||||
@apply px-2.5 py-1 text-xs;
|
||||
}
|
||||
@@ -21,13 +21,17 @@
|
||||
|
||||
.btn-lg {
|
||||
@apply px-5 py-2.5 text-base;
|
||||
}
|
||||
} */
|
||||
|
||||
/* 按钮类型 */
|
||||
/* 按钮类型
|
||||
.btn-primary {
|
||||
@apply bg-[#00684a] text-white hover:bg-[#005a3f] focus:ring-[#00684a];
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
@apply bg-white text-gray-800 hover:bg-gray-300 focus:ring-gray-300;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300;
|
||||
}
|
||||
@@ -44,9 +48,9 @@
|
||||
.btn-text {
|
||||
@apply bg-transparent text-[#00684a] shadow-none border-none
|
||||
hover:bg-[rgba(0,104,74,0.05)] focus:ring-0;
|
||||
}
|
||||
} */
|
||||
|
||||
/* 图标按钮 */
|
||||
/* 图标按钮
|
||||
.btn-icon {
|
||||
@apply p-2 rounded-full;
|
||||
}
|
||||
@@ -57,9 +61,9 @@
|
||||
|
||||
.btn-icon i, .btn-icon svg {
|
||||
@apply text-current w-5 h-5;
|
||||
}
|
||||
} */
|
||||
|
||||
/* 按钮组 */
|
||||
/* 按钮组
|
||||
.btn-group {
|
||||
@apply inline-flex;
|
||||
}
|
||||
@@ -74,4 +78,29 @@
|
||||
|
||||
.btn-group .btn:last-child {
|
||||
@apply rounded-r-md;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
/* 按钮样式 */
|
||||
.ant-btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2
|
||||
border border-transparent rounded-md font-medium text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
|
||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
@apply bg-[#00684a] text-white hover:bg-[#005a3f] focus:ring-[#00684a];
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
@apply bg-white border border-gray-300 text-gray-800 hover:border-[#00684a] focus:ring-[#00684a];
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
@apply bg-[#f5222d] text-white hover:bg-[#cf1f29] focus:ring-[#f5222d];
|
||||
}
|
||||
|
||||
.ant-btn-sm {
|
||||
@apply px-3 py-1.5 text-sm;
|
||||
}
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@apply pr-10;
|
||||
@apply pr-10 border-gray-300 border-[1px];
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
|
||||
@@ -214,30 +214,6 @@
|
||||
|
||||
/* === UI组件 === */
|
||||
|
||||
/* 按钮样式 */
|
||||
.ant-btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2
|
||||
border border-transparent rounded-md font-medium text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
|
||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
@apply bg-[#00684a] text-white hover:bg-[#005a3f] focus:ring-[#00684a];
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
@apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300;
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
@apply bg-[#f5222d] text-white hover:bg-[#cf1f29] focus:ring-[#f5222d];
|
||||
}
|
||||
|
||||
.ant-btn-sm {
|
||||
@apply px-3 py-1.5 text-sm;
|
||||
}
|
||||
|
||||
/* 卡片组件 */
|
||||
.card {
|
||||
@apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
/**
|
||||
* 配置列表页样式
|
||||
*/
|
||||
|
||||
/* 配置页面容器 */
|
||||
.config-lists {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
/* 表格区域 */
|
||||
.config-lists .config-table {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
/* 选择框focus状态 */
|
||||
.config-lists .form-select:focus {
|
||||
border-color: #00684a;
|
||||
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 环境标签 */
|
||||
.config-lists .env-tag {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.config-lists .env-tag-dev {
|
||||
@apply bg-blue-100 text-blue-900;
|
||||
}
|
||||
|
||||
.config-lists .env-tag-test {
|
||||
@apply bg-yellow-100 text-yellow-900;
|
||||
}
|
||||
|
||||
.config-lists .env-tag-prod {
|
||||
@apply bg-green-100 text-green-900;
|
||||
}
|
||||
|
||||
/* 操作列样式 */
|
||||
.config-lists .operations-cell {
|
||||
@apply flex space-x-2;
|
||||
}
|
||||
|
||||
.config-lists .operation-btn {
|
||||
@apply text-sm flex items-center text-[--color-primary] bg-transparent hover:underline p-2;
|
||||
}
|
||||
|
||||
|
||||
.config-lists .operation-btn i {
|
||||
@apply mr-1;
|
||||
}
|
||||
|
||||
/* 详情模态框样式 */
|
||||
.config-lists .config-detail-content {
|
||||
@apply space-y-4;
|
||||
}
|
||||
|
||||
.config-lists .config-detail-item {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.config-lists .config-detail-label {
|
||||
@apply text-sm text-gray-500 mb-1;
|
||||
}
|
||||
|
||||
.config-lists .config-detail-value {
|
||||
@apply text-base;
|
||||
}
|
||||
|
||||
.config-lists .config-detail-code {
|
||||
@apply bg-gray-50 p-3 rounded text-sm overflow-x-auto;
|
||||
}
|
||||
|
||||
.config-lists .ant-btn-primary{
|
||||
@apply !text-white
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@screen md {
|
||||
.config-lists .config-filter-form {
|
||||
@apply grid-cols-2;
|
||||
}
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
.config-lists .config-filter-form {
|
||||
@apply grid-cols-4;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* 配置新增/编辑页样式
|
||||
*/
|
||||
|
||||
/* 页面容器 */
|
||||
.config-new-page {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
/* 表单卡片 */
|
||||
.config-new-page .config-form-card {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.config-new-page .config-form {
|
||||
@apply space-y-6;
|
||||
}
|
||||
|
||||
.config-new-page .form-row {
|
||||
@apply grid grid-cols-1 md:grid-cols-2 gap-6;
|
||||
}
|
||||
|
||||
.config-new-page .form-row-full {
|
||||
@apply md:col-span-2;
|
||||
}
|
||||
|
||||
.config-new-page .form-group {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.config-new-page .form-label {
|
||||
@apply block text-sm font-medium mb-1 text-gray-700;
|
||||
}
|
||||
|
||||
.config-new-page .form-label.required::after {
|
||||
content: " *";
|
||||
@apply text-red-500;
|
||||
}
|
||||
|
||||
.config-new-page .form-input,
|
||||
.config-new-page .form-select,
|
||||
.config-new-page .form-textarea {
|
||||
@apply block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
|
||||
}
|
||||
|
||||
.config-new-page .form-textarea {
|
||||
@apply font-mono;
|
||||
}
|
||||
|
||||
.config-new-page .form-checkbox {
|
||||
@apply h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary-500;
|
||||
}
|
||||
|
||||
.config-new-page .form-checkbox-label {
|
||||
@apply ml-2 block text-sm text-gray-900;
|
||||
}
|
||||
|
||||
.config-new-page .input-error {
|
||||
@apply border-red-500;
|
||||
}
|
||||
|
||||
.config-new-page .error-message {
|
||||
@apply text-sm text-red-500 mt-1;
|
||||
}
|
||||
|
||||
.config-new-page .general-error {
|
||||
@apply bg-red-50 p-3 rounded text-center;
|
||||
}
|
||||
|
||||
.config-new-page .form-help {
|
||||
@apply text-xs text-gray-500 mt-1;
|
||||
}
|
||||
|
||||
.config-new-page .form-actions {
|
||||
@apply flex justify-end space-x-3;
|
||||
}
|
||||
|
||||
.config-new-page .inline {
|
||||
@apply inline-block;
|
||||
}
|
||||
|
||||
/* 标签按钮样式 */
|
||||
.config-new-page .tag-buttons {
|
||||
@apply flex flex-wrap gap-2;
|
||||
}
|
||||
|
||||
.config-new-page .tag-button {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
|
||||
bg-gray-100 text-gray-700 border border-gray-200 cursor-pointer transition-all duration-200
|
||||
hover:bg-[rgba(0,104,74,0.1)] hover:border-[#00684a] hover:text-[#00684a];
|
||||
}
|
||||
|
||||
.config-new-page .tag-button.active {
|
||||
@apply bg-[rgba(0,104,74,0.15)] border-[#00684a] text-[#00684a];
|
||||
}
|
||||
|
||||
/* JSON编辑器 */
|
||||
.config-new-page .json-editor {
|
||||
@apply w-full min-h-[320px] font-mono text-sm leading-relaxed
|
||||
border border-gray-300 rounded-md p-3 bg-gray-50 text-gray-800
|
||||
focus:outline-none focus:ring-primary-500 focus:border-primary-500;
|
||||
}
|
||||
|
||||
.config-new-page .editor-actions {
|
||||
@apply text-right mt-2;
|
||||
}
|
||||
|
||||
/* 示例卡片 */
|
||||
.config-new-page .example-card {
|
||||
@apply h-full flex flex-col bg-gray-50 rounded-md border border-gray-200 overflow-hidden;
|
||||
}
|
||||
|
||||
.config-new-page .example-header {
|
||||
@apply p-3 border-b border-gray-200 bg-gray-100;
|
||||
}
|
||||
|
||||
.config-new-page .example-title {
|
||||
@apply font-medium text-gray-700;
|
||||
}
|
||||
|
||||
.config-new-page .example-content {
|
||||
@apply p-3 flex-grow overflow-auto;
|
||||
}
|
||||
|
||||
.config-new-page .example-pre {
|
||||
@apply m-0 font-mono text-sm leading-relaxed text-gray-800;
|
||||
}
|
||||
|
||||
.config-new-page .example-footer {
|
||||
@apply p-3 border-t border-gray-200 bg-gray-100;
|
||||
}
|
||||
|
||||
/* 代码语法高亮基础样式 */
|
||||
.config-new-page .code-json .key { @apply text-blue-600; }
|
||||
.config-new-page .code-json .string { @apply text-green-600; }
|
||||
.config-new-page .code-json .number { @apply text-purple-600; }
|
||||
.config-new-page .code-json .boolean { @apply text-blue-600; }
|
||||
.config-new-page .code-json .null { @apply text-gray-500; }
|
||||
@@ -96,22 +96,26 @@
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
/* 状态标签 - 与status-badge.css重复，已注释
|
||||
/* 状态标签 */
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-badge.status-success {
|
||||
@apply bg-[rgba(0,104,74,0.1)] text-[#00684a];
|
||||
@apply bg-green-100 text-green-900;
|
||||
}
|
||||
|
||||
.status-badge.status-warning {
|
||||
@apply bg-[rgba(250,173,20,0.1)] text-[#faad14];
|
||||
@apply bg-yellow-100 text-yellow-900;
|
||||
}
|
||||
|
||||
.status-badge.status-error {
|
||||
@apply bg-[rgba(245,34,45,0.1)] text-[#f5222d];
|
||||
} */
|
||||
@apply bg-red-100 text-red-900;
|
||||
}
|
||||
|
||||
.status-badge.status-processing {
|
||||
@apply bg-blue-100 text-blue-900;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.dashboard-card {
|
||||
|
||||
Binary file not shown.
+5
-3
@@ -4,10 +4,12 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>中国烟草AI合同及卷宗审核系统 - 新增/编辑系统配置</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://unpkg.com/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> -->
|
||||
<!-- 引入外部CSS文件 -->
|
||||
<link href="../css/main.css" rel="stylesheet">
|
||||
<link href="main.css" rel="stylesheet">
|
||||
<style>
|
||||
.json-editor {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user