暂存

app/components/rules/new/ActionButtons.tsx

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

app/components/rules/new/BasicInfo.tsx

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

app/components/rules/new/CodeEditor.tsx

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

app/components/rules/new/PageHeader.tsx

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

app/components/rules/new/SimpleCodeEditor.tsx

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

app/root.tsx

@@ -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>

app/routes/rule.new.tsx

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

app/routes/rules.new.tsx

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

app/styles/rules.css

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

html/评查点-新增.html

@@ -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">

package-lock.json

@@ -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==",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-      "dev": true
     },
     "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",

package.json

@@ -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"