This commit is contained in:
2025-03-28 14:45:54 +08:00
parent d9b9ce4676
commit 0079786b25
14 changed files with 3718 additions and 6 deletions
@@ -0,0 +1,34 @@
import React from 'react';
interface ActionButtonsProps {
onSave?: () => void;
onSaveDraft?: () => void;
}
export function ActionButtons({ onSave, onSaveDraft }: ActionButtonsProps) {
return (
<div className="flex justify-center space-x-4 mt-8 mb-4">
<button
type="button"
className="ant-btn ant-btn-primary min-w-[120px]"
onClick={onSave}
>
<i className="ri-save-line mr-1"></i>
</button>
<button
type="button"
className="ant-btn ant-btn-default min-w-[120px]"
onClick={onSaveDraft}
>
<i className="ri-draft-line mr-1"></i> 稿
</button>
<button
type="button"
className="ant-btn ant-btn-default min-w-[120px]"
onClick={() => window.history.back()}
>
<i className="ri-arrow-left-line mr-1"></i>
</button>
</div>
);
}
+260
View File
@@ -0,0 +1,260 @@
import { useState } from 'react';
interface BasicInfoProps {
onChange?: (data: Record<string, unknown>) => void;
}
export function BasicInfo({ onChange }: BasicInfoProps) {
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
const [formData, setFormData] = useState({
name: '',
code: '',
riskLevel: 'medium',
type: '',
group: 'contract-base',
enabled: true,
description: '',
lawName: '',
lawArticles: '',
lawContent: ''
});
const toggleDescription = () => {
setIsDescriptionExpanded(!isDescriptionExpanded);
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
const { id, value } = e.target;
let fieldName = id;
// 映射id到表单字段名
switch(id) {
case 'checkpoint-name': fieldName = 'name'; break;
case 'checkpoint-code': fieldName = 'code'; break;
case 'risk-level': fieldName = 'riskLevel'; break;
case 'checkpointType': fieldName = 'type'; break;
case 'rule-group': fieldName = 'group'; break;
case 'is-enabled': fieldName = 'enabled'; break;
case 'checkpoint-description': fieldName = 'description'; break;
case 'law-name': fieldName = 'lawName'; break;
case 'law-articles': fieldName = 'lawArticles'; break;
case 'law-content': fieldName = 'lawContent'; break;
}
const newData = {
...formData,
[fieldName]: id === 'is-enabled' ? value === 'true' : value
};
setFormData(newData);
if (onChange) {
onChange(newData);
}
};
return (
<div className="ant-card">
<div className="ant-card-header">
<h3></h3>
</div>
<div className="ant-card-body">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label className="form-label" htmlFor="checkpoint-name">
<span className="required-mark">*</span>
</label>
<input
id="checkpoint-name"
type="text"
className="form-input"
placeholder="请输入评查点名称"
value={formData.name}
onChange={handleInputChange}
/>
<div className="form-tip">使30</div>
</div>
<div>
<label className="form-label" htmlFor="checkpoint-code">
<span className="required-mark">*</span>
</label>
<input
id="checkpoint-code"
type="text"
className="form-input"
placeholder="请输入评查点编码"
value={formData.code}
onChange={handleInputChange}
/>
<div className="form-tip"></div>
</div>
<div>
<label className="form-label" htmlFor="risk-level">
<span className="required-mark">*</span>
</label>
<select
id="risk-level"
className="form-select"
value={formData.riskLevel}
onChange={handleInputChange}
>
<option value="high"></option>
<option value="medium"></option>
<option value="low"></option>
</select>
<div className="form-tip"></div>
</div>
<div>
<label className="form-label" htmlFor="checkpointType">
<span className="required-mark">*</span>
</label>
<select
className="form-select"
id="checkpointType"
value={formData.type}
onChange={handleInputChange}
>
<option value=""></option>
<option value="essential"></option>
<option value="content"></option>
<option value="format"></option>
<option value="legal"></option>
<option value="business"></option>
</select>
<div className="form-tip">便</div>
</div>
<div>
<label className="form-label" htmlFor="rule-group"></label>
<select
id="rule-group"
className="form-select"
value={formData.group}
onChange={handleInputChange}
>
<option value="contract-base"></option>
<option value="contract-sales"></option>
<option value="contract-purchase"></option>
<option value="license"></option>
<option value="punishment"></option>
</select>
</div>
<div>
<label className="form-label" htmlFor="is-enabled"></label>
<select
id="is-enabled"
className="form-select"
value={formData.enabled ? 'true' : 'false'}
onChange={handleInputChange}
>
<option value="true"></option>
<option value="false"></option>
</select>
<div className="form-tip"></div>
</div>
<div className="col-span-1 md:col-span-3">
<div
className={`flex justify-between items-center cursor-pointer ${isDescriptionExpanded ? 'expanded' : ''}`}
onClick={toggleDescription}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
toggleDescription();
}
}}
aria-expanded={isDescriptionExpanded}
aria-controls="description-section"
>
<h4 className="form-label mb-0"></h4>
<i className="ri-arrow-down-s-line text-lg expand-icon"></i>
</div>
<div id="description-section" className={`mt-2 ${isDescriptionExpanded ? '' : 'hidden'}`}>
<div className="mb-4">
<label className="form-label" htmlFor="checkpoint-description"></label>
<textarea
id="checkpoint-description"
className="form-textarea"
style={{ minHeight: '80px' }}
placeholder="请输入评查点描述,包括适用场景、评查目的等"
value={formData.description}
onChange={handleInputChange}
></textarea>
<div className="form-tip"></div>
</div>
{/* 引用法典输入区域 */}
<div className="border-t border-gray-100 pt-4 mb-4">
<label className="form-label" htmlFor="law-section"></label>
<div className="mb-3" id="law-section">
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-name"></label>
<input
type="text"
className="form-input"
placeholder="例如:《中华人民共和国民法典》"
id="law-name"
value={formData.lawName}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-articles"> <span className="text-xs text-gray-400">()</span></label>
<input
type="text"
className="form-input"
placeholder="例如:第五百八十五条,第五百八十六条"
id="law-articles"
value={formData.lawArticles}
onChange={handleInputChange}
/>
<div className="form-tip"></div>
</div>
<div className="mb-3">
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-content"></label>
<textarea
className="form-textarea"
style={{ minHeight: '60px' }}
placeholder="例如:当事人应当按照约定全面履行自己的义务。"
id="law-content"
value={formData.lawContent}
onChange={handleInputChange}
></textarea>
</div>
<div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700 mb-2">
<i className="ri-information-line mr-1"></i>
</div>
{/* 预览区域 */}
<div className="p-3 border border-gray-200 rounded-md bg-gray-50 mt-3">
<div className="text-sm font-medium mb-2"></div>
<div className="law-reference">
<div className="law-reference-title" id="preview-law-name">
{formData.lawName || '《中华人民共和国民法典》'}
</div>
<div className="law-reference-articles" id="preview-law-articles">
{formData.lawArticles ? formData.lawArticles.split(',').map((article, index) => (
<span key={index} className="law-article">{article.trim()}</span>
)) : (
<>
<span className="law-article"></span>
<span className="law-article"></span>
</>
)}
</div>
<div className="law-reference-content" id="preview-law-content">
{formData.lawContent || '当事人应当按照约定全面履行自己的义务。'}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
+128
View File
@@ -0,0 +1,128 @@
import React, { useState, useEffect } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
interface CodeEditorProps {
id: string;
initialValue?: string;
language?: 'javascript' | 'python';
onChange?: (value: string) => void;
}
export function CodeEditor({
id,
initialValue = '',
language = 'javascript',
onChange
}: CodeEditorProps) {
const [code, setCode] = useState(initialValue);
const [copySuccess, setCopySuccess] = useState(false);
// 当语言变化时更新编辑器
const extensions = [language === 'javascript' ? javascript() : javascript()];
// 处理代码变化
const handleChange = (value: string) => {
setCode(value);
if (onChange) {
onChange(value);
}
};
// 复制代码到剪贴板
const copyToClipboard = () => {
navigator.clipboard.writeText(code).then(() => {
setCopySuccess(true);
setTimeout(() => setCopySuccess(false), 2000);
});
};
// 初始示例代码
const getDefaultCode = (lang: string) => {
if (lang === 'javascript') {
return `// 示例代码
function checkRule(data) {
// data 包含抽取的字段
try {
// 在此编写检查逻辑
if (data.fieldName && condition) {
return {
pass: true,
message: "检查通过"
};
} else {
return {
pass: false,
message: "检查不通过,原因:..."
};
}
} catch (error) {
return {
pass: false,
message: "执行出错:" + error.message
};
}
}`;
} else {
return `# 示例代码
def check_rule(data):
# data 包含抽取的字段
try:
# 在此编写检查逻辑
if 'field_name' in data and condition:
return {
'pass': True,
'message': "检查通过"
}
else:
return {
'pass': False,
'message': "检查不通过,原因:..."
}
except Exception as error:
return {
'pass': False,
'message': f"执行出错:{str(error)}"
}`;
}
};
// 如果初始值为空,则使用默认示例代码
useEffect(() => {
if (!initialValue) {
setCode(getDefaultCode(language));
}
}, [language, initialValue]);
return (
<div>
<div className="code-editor-wrapper">
<div className="code-editor-header">
<div className="code-editor-filename">{language === 'javascript' ? 'script.js' : 'script.py'}</div>
<div className="code-editor-actions">
<i
className="ri-file-copy-line"
title="复制代码"
onClick={copyToClipboard}
></i>
</div>
</div>
<CodeMirror
id={id}
value={code}
height="400px"
theme={oneDark}
extensions={extensions}
onChange={handleChange}
style={{ fontSize: '14px' }}
/>
</div>
{copySuccess && (
<div className="code-copy-success show">
</div>
)}
</div>
);
}
File diff suppressed because it is too large Load Diff
+24
View File
@@ -0,0 +1,24 @@
import React from 'react';
import { Link } from '@remix-run/react';
interface PageHeaderProps {
title: string;
onSave?: () => void;
}
export function PageHeader({ title, onSave }: PageHeaderProps) {
return (
<div className="flex justify-between items-center">
<h1 className="text-xl font-medium text-gray-800">{title}</h1>
<div>
<button
type="button"
className="ant-btn ant-btn-primary"
onClick={onSave}
>
<i className="ri-save-line mr-1"></i>
</button>
</div>
</div>
);
}
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,145 @@
import { useState, useEffect } from 'react';
interface SimpleCodeEditorProps {
id: string;
initialValue?: string;
language?: 'javascript' | 'python';
onChange?: (value: string) => void;
}
export function SimpleCodeEditor({
id,
initialValue = '',
language = 'javascript',
onChange
}: SimpleCodeEditorProps) {
const [code, setCode] = useState(initialValue || getDefaultCode(language));
const [copySuccess, setCopySuccess] = useState(false);
// 复制代码到剪贴板
const copyToClipboard = () => {
navigator.clipboard.writeText(code).then(() => {
setCopySuccess(true);
setTimeout(() => setCopySuccess(false), 2000);
});
};
// 处理代码变化
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
setCode(value);
if (onChange) {
onChange(value);
}
};
// 初始示例代码
function getDefaultCode(lang: string) {
if (lang === 'javascript') {
return `// 示例代码
function checkRule(data) {
// data 包含抽取的字段
try {
// 在此编写检查逻辑
if (data.fieldName && condition) {
return {
pass: true,
message: "检查通过"
};
} else {
return {
pass: false,
message: "检查不通过,原因:..."
};
}
} catch (error) {
return {
pass: false,
message: "执行出错:" + error.message
};
}
}`;
} else {
return `# 示例代码
def check_rule(data):
# data 包含抽取的字段
try:
# 在此编写检查逻辑
if 'field_name' in data and condition:
return {
'pass': True,
'message': "检查通过"
}
else:
return {
'pass': False,
'message': "检查不通过,原因:..."
}
except Exception as error:
return {
'pass': False,
'message': f"执行出错:{str(error)}"
}`;
}
}
// 当语言变化时更新代码
useEffect(() => {
if (!initialValue) {
setCode(getDefaultCode(language));
}
}, [language, initialValue]);
return (
<div>
<div className="code-editor-wrapper">
<div className="code-editor-header">
<div className="code-editor-filename">{language === 'javascript' ? 'script.js' : 'script.py'}</div>
<div className="code-editor-actions">
<button
className="bg-transparent border-0 p-0 cursor-pointer"
title="复制代码"
onClick={copyToClipboard}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
copyToClipboard();
}
}}
aria-label="复制代码"
tabIndex={0}
>
<i className="ri-file-copy-line"></i>
</button>
</div>
</div>
<div className="code-editor-container">
<textarea
id={id}
className="code-editor-textarea"
value={code}
onChange={handleChange}
placeholder="请输入自定义代码"
style={{
fontFamily: 'Consolas, Monaco, Courier New, monospace',
fontSize: '14px',
lineHeight: '1.5',
padding: '12px',
width: '100%',
height: '400px',
backgroundColor: '#272822',
color: '#f8f8f2',
border: 'none',
resize: 'vertical',
tabSize: '4'
}}
></textarea>
</div>
</div>
{copySuccess && (
<div className="code-copy-success show">
</div>
)}
</div>
);
}
+15 -2
View File
@@ -14,7 +14,7 @@ import { Layout } from "~/components/layout/Layout";
import { ErrorBoundary as AppErrorBoundary } from "~/components/error/ErrorBoundary";
import "remixicon/fonts/remixicon.css";
// 导入样式
import styles from "~/styles/main.css?url";
import mainStyles from "~/styles/main.css?url";
// 添加客户端hydration错误处理
// if (typeof window !== "undefined") {
@@ -42,7 +42,7 @@ export const meta: MetaFunction = () => {
// 使用links函数为应用加载CSS和其他资源
export function links() {
return [
{ rel: "stylesheet", href: styles },
{ rel: "stylesheet", href: mainStyles },
{ 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" }
@@ -55,6 +55,19 @@ export default function App() {
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style dangerouslySetInnerHTML={{ __html: `
:root {
--color-primary: #00684a;
--color-primary-hover: #005a3f;
--color-primary-light: rgba(0, 104, 74, 0.1);
--primary-color: #00684a;
/* 成功、警告、错误颜色 */
--color-success: #52c41a;
--color-warning: #faad14;
--color-error: #f5222d;
}
` }} />
<Meta />
<Links />
</head>
+92
View File
@@ -0,0 +1,92 @@
import { type MetaFunction, LinksFunction } from "@remix-run/node";
import { useState } from "react";
import { BasicInfo } from "~/components/rules/new/BasicInfo";
import { ExtractionSettings } from "~/components/rules/new/ExtractionSettings";
import { ReviewSettings, RuleContext } from "~/components/rules/new/ReviewSettings";
import { ActionButtons } from "~/components/rules/new/ActionButtons";
import { PageHeader } from "~/components/rules/new/PageHeader";
import rulesStyles from "~/styles/rules.css";
export const meta: MetaFunction = () => {
return [
{ title: "新增评查点 - 中国烟草AI合同及卷宗审核系统" },
{
name: "description",
content: "创建新的评查点,设置规则参数"
}
];
};
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: rulesStyles }
];
export const handle = {
breadcrumb: "新增评查点"
};
export default function RuleNew() {
// 用于保存抽取字段的状态,在抽取设置和评查设置组件之间共享
const [extractionFields, setExtractionFields] = useState<string[]>([]);
const updateExtractionFields = (fields: string[]) => {
setExtractionFields(fields);
};
const handleSave = () => {
// 实现保存逻辑
console.log('保存评查点');
};
const handleSaveDraft = () => {
// 实现保存草稿逻辑
console.log('保存为草稿');
};
const handleExtractionChange = (data: Record<string, unknown>) => {
// 当抽取设置更新时,获取最新的字段列表
if (data.fields) {
const fieldData = data.fields as Record<string, string[]>;
const currentMethod = data.extractionMethod as string;
// 提取当前抽取方法的字段
if (fieldData[currentMethod]) {
updateExtractionFields(fieldData[currentMethod]);
}
} else if (data.regexFields) {
// 处理正则字段情况
const regexFields = data.regexFields as { id: string; fieldName: string; regex: string }[];
const fieldNames = regexFields
.map(field => field.fieldName)
.filter(name => name.trim() !== '');
updateExtractionFields(fieldNames);
}
};
return (
<RuleContext.Provider value={{ extractionFields, updateExtractionFields }}>
<div className="px-4 py-6 bg-white border-b border-gray-200 shadow-sm">
<PageHeader
title="新增评查点"
onSave={handleSave}
/>
</div>
<div className="container py-6">
<div className="px-4">
<BasicInfo />
<ExtractionSettings onChange={handleExtractionChange} />
<ReviewSettings />
<ActionButtons
onSave={handleSave}
onSaveDraft={handleSaveDraft}
/>
</div>
</div>
</RuleContext.Provider>
);
}
+57
View File
@@ -0,0 +1,57 @@
import { type MetaFunction } from "@remix-run/node";
import { BasicInfo } from "~/components/rules/new/BasicInfo";
import { ExtractionSettings } from "~/components/rules/new/ExtractionSettings";
import { ReviewSettings } from "~/components/rules/new/ReviewSettings";
import { ActionButtons } from "~/components/rules/new/ActionButtons";
import { PageHeader } from "~/components/rules/new/PageHeader";
import rulesStyles from "~/styles/rules.css?url";
export const meta: MetaFunction = () => {
return [
{ title: "新增评查点 - 中国烟草AI合同及卷宗审核系统" },
{
name: "description",
content: "创建新的评查点,设置规则参数"
}
];
};
export function links() {
return [{ rel: "stylesheet", href: rulesStyles }];
}
export const handle = {
breadcrumb: "新增评查点"
};
export default function RuleNew() {
const handleSave = () => {
// 实现保存逻辑
console.log('保存评查点');
};
const handleSaveDraft = () => {
// 实现保存草稿逻辑
console.log('保存为草稿');
};
return (
<div className="container">
<PageHeader
title="新增评查点"
onSave={handleSave}
/>
<BasicInfo />
<ExtractionSettings />
<ReviewSettings />
<ActionButtons
onSave={handleSave}
onSaveDraft={handleSaveDraft}
/>
</div>
);
}
+412
View File
@@ -0,0 +1,412 @@
/* 评查点页面样式 */
/* 卡片组件样式 */
.ant-card {
@apply bg-white border border-gray-200 rounded-md shadow-sm mb-4 overflow-hidden;
}
.ant-card-header {
@apply flex items-center justify-between p-4 border-b border-gray-100 bg-gray-50;
}
.ant-card-header h3 {
@apply text-base font-medium m-0;
}
.ant-card-body {
@apply p-6;
}
/* 表单样式 */
.form-label {
@apply block text-sm font-medium text-gray-700 mb-1;
}
.form-input, .form-select, .form-textarea {
@apply w-full px-3 py-2 text-sm border border-gray-300 rounded-md shadow-sm
focus:outline-none focus:ring-2 focus:ring-[rgba(0,104,74,0.2)] focus:border-[#00684a]
transition-colors duration-200;
}
.form-textarea {
@apply min-h-[80px] resize;
}
.form-tip {
@apply mt-1 text-xs text-gray-500;
}
.required-mark {
@apply text-[#f5222d];
}
/* 按钮样式 */
.ant-btn {
@apply inline-flex items-center px-4 py-2 text-sm font-medium rounded-md border
shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2
focus:ring-offset-2 justify-center cursor-pointer;
}
.ant-btn-primary {
@apply text-white bg-[#00684a] hover:bg-[#005a3f] border-transparent
focus:ring-[#00684a] disabled:bg-[rgba(0,104,74,0.5)] disabled:cursor-not-allowed;
}
.ant-btn-default {
@apply text-gray-700 bg-white hover:bg-gray-50 border-gray-300
focus:ring-[#00684a] disabled:bg-gray-100 disabled:text-gray-400
disabled:cursor-not-allowed;
}
/* 抽取方法切换按钮样式 */
#extraction-method-tabs {
display: flex;
border-bottom: 1px solid #f0f0f0;
background-color: white;
border-radius: 4px;
overflow: hidden;
}
.tab-nav-item {
padding: 10px 16px;
font-size: 14px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s;
display: flex;
align-items: center;
background: transparent;
border: none;
outline: none;
}
.tab-nav-item:hover {
color: #00684a;
background-color: rgba(0, 104, 74, 0.05);
}
.tab-nav-item.active {
color: #00684a;
border-bottom-color: #00684a;
background-color: rgba(0, 104, 74, 0.1);
font-weight: 500;
}
.extraction-config {
padding: 12px;
border: 1px solid #f0f0f0;
border-radius: 4px;
margin-bottom: 12px;
}
/* 字段标签样式 */
.field-tag {
display: inline-flex;
align-items: center;
background-color: #f5f5f5;
color: #333;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 4px 12px;
margin: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.field-tag:hover {
background-color: #e8f5e9;
border-color: #a5d6a7;
}
.field-tag.selected {
background-color: var(--primary-color, #00684a);
color: white;
border-color: var(--primary-color, #00684a);
}
/* 不可用但已选择的字段样式 */
.field-tag.unavailable {
border-style: dashed;
opacity: 0.7;
}
.field-tag.unavailable:hover {
opacity: 0.9;
}
.field-tags-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.chips-container {
padding: 6px;
border: 1px solid #f0f0f0;
border-radius: 4px;
min-height: 36px;
background-color: #fafafa;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.chip {
padding: 3px 6px;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 12px;
display: inline-flex;
align-items: center;
}
.chip .close-btn {
margin-left: 4px;
font-size: 12px;
cursor: pointer;
color: #999;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.chip .close-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #555;
}
.extraction-config .form-input,
.extraction-config .form-select,
.extraction-config button.ant-btn {
padding: 4px 8px;
font-size: 13px;
height: auto;
line-height: 1.5;
}
/* 变量标签样式 */
.var-tag {
display: inline-flex;
align-items: center;
padding: 4px 8px;
background-color: rgba(0, 104, 74, 0.1);
color: #00684a;
border: 1px solid rgba(0, 104, 74, 0.2);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.var-tag:hover {
background-color: rgba(0, 104, 74, 0.2);
border-color: rgba(0, 104, 74, 0.3);
}
.var-tag::before {
content: '{';
margin-right: 1px;
}
.var-tag::after {
content: '}';
margin-left: 1px;
}
/* 法典引用样式 */
.law-reference {
background-color: #f0f9ff;
border: 1px solid #bae0ff;
border-radius: 4px;
padding: 12px;
margin-top: 8px;
}
.law-reference-title {
color: #0958d9;
font-weight: 500;
margin-bottom: 8px;
}
.law-reference-articles {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.law-article {
background-color: #e6f4ff;
border: 1px solid #91caff;
border-radius: 12px;
padding: 2px 8px;
font-size: 12px;
color: #0958d9;
}
.law-reference-content {
font-size: 13px;
color: #434343;
line-height: 1.6;
border-left: 3px solid #bae0ff;
padding-left: 8px;
margin-top: 8px;
}
.expand-icon {
transition: transform 0.3s;
}
.expanded .expand-icon {
transform: rotate(180deg);
}
/* 自定义宽度类 */
.w-3\/10 {
width: 30%;
}
.w-7\/10 {
width: 70%;
}
/* 正则表达式配置行样式优化 */
.regex-field-row {
padding: 6px !important;
margin-bottom: 6px !important;
}
.regex-field-row input {
padding: 3px 6px;
font-size: 12px;
}
/* 隐藏单选按钮 */
.severity-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* 单选表单组 */
.form-radio-group {
@apply flex flex-wrap gap-4;
}
.form-radio-item {
@apply flex items-center cursor-pointer mb-2;
}
.form-radio {
@apply w-4 h-4 mr-2 text-[#00684a] focus:ring-[#00684a];
}
/* 分隔线 */
.divider {
@apply h-px w-full bg-gray-200 my-6;
}
/* 徽章 */
.badge {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
/* 警告信息类型卡片 */
.severity-option {
@apply transition-all duration-200;
}
.severity-option.selected-severity {
@apply shadow-md;
}
/* 提示信息 */
.bg-blue-50 {
@apply bg-[#e6f7ff];
}
.border-blue-200 {
@apply border-[#91d5ff];
}
.text-blue-700 {
@apply text-[#1890ff];
}
/* 容器通用样式 */
.container {
@apply mx-auto px-4;
}
/* 颜色变量 */
:root {
--primary-color: #00684a;
--primary-color-light: rgba(0, 104, 74, 0.1);
--primary-color-hover: rgba(0, 104, 74, 0.2);
--primary-color-border: rgba(0, 104, 74, 0.3);
}
/* 代码编辑器样式 */
.code-editor-wrapper {
border: 1px solid #444;
border-radius: 4px;
overflow: hidden;
background-color: #282c34;
}
.code-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background-color: #21252b;
border-bottom: 1px solid #444;
color: #abb2bf;
}
.code-editor-filename {
font-family: monospace;
font-size: 13px;
color: #abb2bf;
}
.code-editor-actions {
display: flex;
gap: 8px;
}
.code-editor-actions button {
cursor: pointer;
color: #abb2bf;
}
.code-editor-actions button:hover {
color: #ffffff;
}
.code-copy-success {
position: fixed;
bottom: 20px;
right: 20px;
background-color: rgba(0, 104, 74, 0.9);
color: white;
padding: 8px 16px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
opacity: 0;
transform: translateY(20px);
z-index: 1000;
}
.code-copy-success.show {
opacity: 1;
transform: translateY(0);
}
+1 -1
View File
@@ -7,7 +7,7 @@
<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">
<!-- 添加Highlight.js样式 - 使用monokai-sublime主题 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css">
+227 -3
View File
@@ -6,10 +6,14 @@
"": {
"name": "remix_docreview",
"dependencies": {
"@codemirror/lang-javascript": "^6.2.3",
"@codemirror/theme-one-dark": "^6.1.2",
"@remix-run/node": "^2.16.2",
"@remix-run/react": "^2.16.2",
"@remix-run/serve": "^2.16.2",
"@uiw/react-codemirror": "^4.23.10",
"isbot": "^4.1.0",
"prismjs": "^1.30.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"remixicon": "^4.6.0"
@@ -459,7 +463,6 @@
"version": "7.26.10",
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.26.10.tgz",
"integrity": "sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==",
"dev": true,
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
@@ -512,6 +515,104 @@
"node": ">=6.9.0"
}
},
"node_modules/@codemirror/autocomplete": {
"version": "6.18.6",
"resolved": "https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz",
"integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.17.0",
"@lezer/common": "^1.0.0"
}
},
"node_modules/@codemirror/commands": {
"version": "6.8.0",
"resolved": "https://registry.npmmirror.com/@codemirror/commands/-/commands-6.8.0.tgz",
"integrity": "sha512-q8VPEFaEP4ikSlt6ZxjB3zW72+7osfAYW9i8Zu943uqbKuz6utc1+F170hyLUCUltXORjQXRyYQNfkckzA/bPQ==",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.4.0",
"@codemirror/view": "^6.27.0",
"@lezer/common": "^1.1.0"
}
},
"node_modules/@codemirror/lang-javascript": {
"version": "6.2.3",
"resolved": "https://registry.npmmirror.com/@codemirror/lang-javascript/-/lang-javascript-6.2.3.tgz",
"integrity": "sha512-8PR3vIWg7pSu7ur8A07pGiYHgy3hHj+mRYRCSG8q+mPIrl0F02rgpGv+DsQTHRTc30rydOsf5PZ7yjKFg2Ackw==",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.6.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.17.0",
"@lezer/common": "^1.0.0",
"@lezer/javascript": "^1.0.0"
}
},
"node_modules/@codemirror/language": {
"version": "6.11.0",
"resolved": "https://registry.npmmirror.com/@codemirror/language/-/language-6.11.0.tgz",
"integrity": "sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.23.0",
"@lezer/common": "^1.1.0",
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0",
"style-mod": "^4.0.0"
}
},
"node_modules/@codemirror/lint": {
"version": "6.8.5",
"resolved": "https://registry.npmmirror.com/@codemirror/lint/-/lint-6.8.5.tgz",
"integrity": "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.35.0",
"crelt": "^1.0.5"
}
},
"node_modules/@codemirror/search": {
"version": "6.5.10",
"resolved": "https://registry.npmmirror.com/@codemirror/search/-/search-6.5.10.tgz",
"integrity": "sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
},
"node_modules/@codemirror/state": {
"version": "6.5.2",
"resolved": "https://registry.npmmirror.com/@codemirror/state/-/state-6.5.2.tgz",
"integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
"dependencies": {
"@marijn/find-cluster-break": "^1.0.0"
}
},
"node_modules/@codemirror/theme-one-dark": {
"version": "6.1.2",
"resolved": "https://registry.npmmirror.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
"integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/highlight": "^1.0.0"
}
},
"node_modules/@codemirror/view": {
"version": "6.36.4",
"resolved": "https://registry.npmmirror.com/@codemirror/view/-/view-6.36.4.tgz",
"integrity": "sha512-ZQ0V5ovw/miKEXTvjgzRyjnrk9TwriUB1k4R5p7uNnHR9Hus+D1SXHGdJshijEzPFjU25xea/7nhIeSqYFKdbA==",
"dependencies": {
"@codemirror/state": "^6.5.0",
"style-mod": "^4.1.0",
"w3c-keyname": "^2.2.4"
}
},
"node_modules/@emnapi/core": {
"version": "1.3.1",
"resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.3.1.tgz",
@@ -1200,6 +1301,42 @@
"integrity": "sha512-3sRl+pkyFY/kLmHl0cgHiFp2xEqErA8N3ECjMs7serSUBmoJ70lBa0PG5t0IM6WJgdZNyyI0R8YFfi5wM8+mzg==",
"dev": true
},
"node_modules/@lezer/common": {
"version": "1.2.3",
"resolved": "https://registry.npmmirror.com/@lezer/common/-/common-1.2.3.tgz",
"integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA=="
},
"node_modules/@lezer/highlight": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/@lezer/highlight/-/highlight-1.2.1.tgz",
"integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
"dependencies": {
"@lezer/common": "^1.0.0"
}
},
"node_modules/@lezer/javascript": {
"version": "1.4.21",
"resolved": "https://registry.npmmirror.com/@lezer/javascript/-/javascript-1.4.21.tgz",
"integrity": "sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==",
"dependencies": {
"@lezer/common": "^1.2.0",
"@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.0"
}
},
"node_modules/@lezer/lr": {
"version": "1.4.2",
"resolved": "https://registry.npmmirror.com/@lezer/lr/-/lr-1.4.2.tgz",
"integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
"dependencies": {
"@lezer/common": "^1.0.0"
}
},
"node_modules/@marijn/find-cluster-break": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
},
"node_modules/@mdx-js/mdx": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/@mdx-js/mdx/-/mdx-2.3.0.tgz",
@@ -2238,6 +2375,57 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@uiw/codemirror-extensions-basic-setup": {
"version": "4.23.10",
"resolved": "https://registry.npmmirror.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.10.tgz",
"integrity": "sha512-zpbmSeNs3OU/f/Eyd6brFnjsBUYwv2mFjWxlAsIRSwTlW+skIT60rQHFBSfsj/5UVSxSLWVeUYczN7AyXvgTGQ==",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0"
},
"funding": {
"url": "https://jaywcjlove.github.io/#/sponsor"
},
"peerDependencies": {
"@codemirror/autocomplete": ">=6.0.0",
"@codemirror/commands": ">=6.0.0",
"@codemirror/language": ">=6.0.0",
"@codemirror/lint": ">=6.0.0",
"@codemirror/search": ">=6.0.0",
"@codemirror/state": ">=6.0.0",
"@codemirror/view": ">=6.0.0"
}
},
"node_modules/@uiw/react-codemirror": {
"version": "4.23.10",
"resolved": "https://registry.npmmirror.com/@uiw/react-codemirror/-/react-codemirror-4.23.10.tgz",
"integrity": "sha512-AbN4eVHOL4ckRuIXpZxkzEqL/1ChVA+BSdEnAKjIB68pLQvKsVoYbiFP8zkXkYc4+Fcgq5KbAjvYqdo4ewemKw==",
"dependencies": {
"@babel/runtime": "^7.18.6",
"@codemirror/commands": "^6.1.0",
"@codemirror/state": "^6.1.1",
"@codemirror/theme-one-dark": "^6.0.0",
"@uiw/codemirror-extensions-basic-setup": "4.23.10",
"codemirror": "^6.0.0"
},
"funding": {
"url": "https://jaywcjlove.github.io/#/sponsor"
},
"peerDependencies": {
"@babel/runtime": ">=7.11.0",
"@codemirror/state": ">=6.0.0",
"@codemirror/theme-one-dark": ">=6.0.0",
"@codemirror/view": ">=6.0.0",
"codemirror": ">=6.0.0",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@ungap/structured-clone": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -3822,6 +4010,20 @@
"node": ">=0.8"
}
},
"node_modules/codemirror": {
"version": "6.0.1",
"resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.1.tgz",
"integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -3959,6 +4161,11 @@
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
"dev": true
},
"node_modules/crelt": {
"version": "1.0.6",
"resolved": "https://registry.npmmirror.com/crelt/-/crelt-1.0.6.tgz",
"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
},
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -9253,6 +9460,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/prismjs": {
"version": "1.30.0",
"resolved": "https://registry.npmmirror.com/prismjs/-/prismjs-1.30.0.tgz",
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
"engines": {
"node": ">=6"
}
},
"node_modules/proc-log": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/proc-log/-/proc-log-3.0.0.tgz",
@@ -9549,8 +9764,7 @@
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
"dev": true
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
},
"node_modules/regexp.prototype.flags": {
"version": "1.5.4",
@@ -10587,6 +10801,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/style-mod": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/style-mod/-/style-mod-4.1.2.tgz",
"integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
},
"node_modules/style-to-object": {
"version": "0.4.4",
"resolved": "https://registry.npmmirror.com/style-to-object/-/style-to-object-0.4.4.tgz",
@@ -12024,6 +12243,11 @@
"@esbuild/win32-x64": "0.25.1"
}
},
"node_modules/w3c-keyname": {
"version": "2.2.8",
"resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
},
"node_modules/wcwidth": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz",
+4
View File
@@ -11,10 +11,14 @@
"typecheck": "tsc"
},
"dependencies": {
"@codemirror/lang-javascript": "^6.2.3",
"@codemirror/theme-one-dark": "^6.1.2",
"@remix-run/node": "^2.16.2",
"@remix-run/react": "^2.16.2",
"@remix-run/serve": "^2.16.2",
"@uiw/react-codemirror": "^4.23.10",
"isbot": "^4.1.0",
"prismjs": "^1.30.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"remixicon": "^4.6.0"