diff --git a/app/api/files/files-upload.ts b/app/api/files/files-upload.ts
new file mode 100644
index 0000000..c317975
--- /dev/null
+++ b/app/api/files/files-upload.ts
@@ -0,0 +1,211 @@
+import { postgrestGet, postgrestPut, postgrestPost, type PostgrestParams } from '../postgrest-client';
+import dayjs from 'dayjs';
+
+/**
+ * 格式化日期
+ * @param dateString 日期字符串
+ * @returns 格式化后的日期字符串
+ */
+function formatDate(dateString: string): string {
+    if (!dateString) return '';
+    try {
+      return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
+    } catch (error) {
+      console.error('日期格式化失败:', error);
+      return dateString;
+    }
+}
+
+  
+/**
+ * 从不同格式的 API 响应中提取数据
+ * @param responseData API 响应数据
+ * @returns 提取后的数据或 null
+ */
+function extractApiData<T>(responseData: unknown): T | null {
+    if (!responseData) return null;
+
+    // 格式1: { code: number, msg: string, data: T }
+    if (typeof responseData === 'object' && responseData !== null && 
+        'code' in responseData && 
+        'data' in responseData && 
+        (responseData as { data: unknown }).data) {
+        return (responseData as { data: T }).data;
+    }
+
+    // 格式2: 直接是数据对象
+    return responseData as T;
+}
+
+// 文档状态枚举
+export enum DocumentStatus {
+  CUTTING = "Cutting",
+  EXTRACTIONING = "extractioning",
+  REVIEWING = "reviewing",
+  COMPLETED = "completed"
+}
+
+// 文档类型接口
+export interface DocumentType {
+  id: number;
+  name: string;
+}
+
+// 提取结果接口
+interface ExtractedResult {
+  [key: string]: unknown;
+}
+
+// 摘要接口
+interface Summary {
+  [key: string]: unknown;
+}
+
+// 文档接口
+export interface Document {
+  id: number;
+  name: string;
+  type_id: number;
+  file_size: number;
+  status: DocumentStatus;
+  created_at: string;
+  document_number?: string;
+  path?: string;
+  storage_type?: string;
+  is_test_document?: boolean;
+  evaluation_level?: string;
+  ocr_result?: Record<string, string>;
+  extracted_results?: ExtractedResult;
+  sumary?: Summary;
+  remark?: string;
+}
+
+/**
+ * 获取当天的文档列表
+ * @returns 文档列表
+ */
+export async function getTodayDocuments(): Promise<{data: Document[]; error?: never} | {data?: never; error: string; status?: number}> {
+  try {
+    const today = dayjs().startOf('day').format('YYYY-MM-DD');
+    console.log('查询当天文档，日期范围:', today);
+    
+    const params: PostgrestParams = {
+      select: `
+        id,
+        name,
+        type_id,
+        file_size,
+        status,
+        created_at,
+        document_number,
+        path,
+        storage_type,
+        is_test_document,
+        evaluation_level,
+        ocr_result,
+        extracted_results,
+        sumary,
+        remark
+      `,
+      order: 'created_at.desc',
+      filter: {
+        'created_at': `gte.${today}`
+      }
+    };
+
+    // console.log('发送请求参数:', params);
+    const response = await postgrestGet<Document[]>('documents', params);
+    // console.log('API 响应:', response);
+
+    if (response.error) {
+      console.error('API 返回错误:', response.error);
+      return { error: response.error, status: response.status };
+    }
+
+    const extractedData = extractApiData<Document[]>(response.data);
+    // console.log('提取后的数据:', extractedData);
+    
+    if (!extractedData) {
+      console.error('数据提取失败');
+      return { error: '获取数据失败', status: 500 };
+    }
+
+    return { data: extractedData };
+  } catch (error) {
+    console.error('获取当天文档列表失败:', error);
+    return { 
+      error: error instanceof Error ? error.message : '获取当天文档列表失败',
+      status: 500
+    };
+  }
+}
+
+/**
+ * 获取文档类型列表
+ * @returns 文档类型列表
+ */
+export async function getDocumentTypes(): Promise<{data: DocumentType[]; error?: never} | {data?: never; error: string; status?: number}> {
+  try {
+    const params: PostgrestParams = {
+      select: 'id, name'
+    };
+
+    const response = await postgrestGet<DocumentType[]>('document_types', params);
+
+    if (response.error) {
+      return { error: response.error, status: response.status };
+    }
+
+    const extractedData = extractApiData<DocumentType[]>(response.data);
+    if (!extractedData) {
+      return { error: '获取数据失败', status: 500 };
+    }
+
+    return { data: extractedData };
+  } catch (error) {
+    console.error('获取文档类型列表失败:', error);
+    return { 
+      error: error instanceof Error ? error.message : '获取文档类型列表失败',
+      status: 500
+    };
+  }
+}
+
+/**
+ * 获取指定文档的状态
+ * @param documentIds 文档ID列表
+ * @returns 文档状态列表
+ */
+export async function getDocumentsStatus(documentIds: number[]): Promise<{data: Document[]; error?: never} | {data?: never; error: string; status?: number}> {
+  try {
+    if (!documentIds || documentIds.length === 0) {
+      return { data: [] };
+    }
+
+    const params: PostgrestParams = {
+      select: 'id, status',
+      filter: {
+        'id': `in.(${documentIds.join(',')})`
+      }
+    };
+
+    const response = await postgrestGet<Document[]>('documents', params);
+
+    if (response.error) {
+      return { error: response.error, status: response.status };
+    }
+
+    const extractedData = extractApiData<Document[]>(response.data);
+    if (!extractedData) {
+      return { error: '获取数据失败', status: 500 };
+    }
+
+    return { data: extractedData };
+  } catch (error) {
+    console.error('获取文档状态失败:', error);
+    return { 
+      error: error instanceof Error ? error.message : '获取文档状态失败',
+      status: 500
+    };
+  }
+}
\ No newline at end of file
diff --git a/app/api/prompts/prompts.ts b/app/api/prompts/prompts.ts
new file mode 100644
index 0000000..18b4b2d
--- /dev/null
+++ b/app/api/prompts/prompts.ts
@@ -0,0 +1,493 @@
+import { postgrestGet, postgrestPut, postgrestPost, postgrestDelete, type PostgrestParams } from '../postgrest-client';
+import dayjs from 'dayjs';
+
+// 提示词模板接口
+export interface PromptTemplate {
+  id: number;
+  template_name: string;
+  template_type: string;
+  description: string | null;
+  template_content: string;
+  variables: Record<string, string>; // 变量定义
+  status: number;
+  version: string;
+  created_by: number;
+  created_at: string;
+  updated_at: string;
+}
+
+// 提示词模板前端接口
+export interface PromptTemplateUI {
+  id: string;
+  template_name: string;
+  template_type: 'Extraction' | 'Evaluation' | 'Summary' | 'Common';
+  description: string;
+  template_content: string;
+  variables: Record<string, string>; // 变量定义
+  status: 'active' | 'inactive' | 'system';
+  version: string;
+  created_by: number;
+  created_at: string;
+  updated_at: string;
+}
+
+// 搜索参数接口
+export interface PromptSearchParams {
+  name?: string;
+  type?: string;
+  status?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+/**
+ * 格式化日期
+ * @param dateString 日期字符串
+ * @returns 格式化后的日期字符串
+ */
+function formatDate(dateString: string): string {
+  if (!dateString) return '';
+  try {
+    return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
+  } catch (error) {
+    console.error('日期格式化失败:', error);
+    return dateString;
+  }
+}
+
+/**
+ * 从不同格式的 API 响应中提取数据
+ * @param responseData API 响应数据
+ * @returns 提取后的数据或 null
+ */
+function extractApiData<T>(responseData: unknown): T | null {
+  if (!responseData) return null;
+  
+  // 格式1: { code: number, msg: string, data: T }
+  if (typeof responseData === 'object' && responseData !== null && 
+      'code' in responseData && 
+      'data' in responseData && 
+      (responseData as { data: unknown }).data) {
+    return (responseData as { data: T }).data;
+  }
+  
+  // 格式2: 直接是数据对象
+  return responseData as T;
+}
+
+/**
+ * 将API状态值转换为UI状态值
+ * @param status API状态值（数字）
+ * @returns UI状态值（字符串）
+ */
+function mapStatusToUI(status: number): 'active' | 'inactive' | 'system' {
+  switch(status) {
+    case 0: return 'inactive';
+    case 1: return 'active';
+    case 2: return 'system';
+    default: return 'inactive';
+  }
+}
+
+/**
+ * 将UI状态值转换为API状态值
+ * @param status UI状态值（字符串）
+ * @returns API状态值（数字）
+ */
+function mapStatusToAPI(status: string): number {
+  switch(status) {
+    case 'active': return 1;
+    case 'inactive': return 0;
+    case 'system': return 2;
+    default: return 0;
+  }
+}
+
+/**
+ * 将数据库模板转换为UI模板
+ * @param template 数据库模板
+ * @returns UI模板
+ */
+export function convertToUITemplate(template: PromptTemplate): PromptTemplateUI {
+  return {
+    id: template.id ? template.id.toString() : '',
+    template_name: template.template_name,
+    template_type: template.template_type as "Extraction" | "Evaluation" | "Summary" | "Common",
+    description: template.description || '',
+    template_content: template.template_content,
+    variables: template.variables,
+    status: mapStatusToUI(template.status),
+    version: template.version,
+    created_by: template.created_by,
+    created_at: formatDate(template.created_at),
+    updated_at: formatDate(template.updated_at)
+  };
+}
+
+/**
+ * 获取提示词模板列表
+ * @param searchParams 搜索参数
+ * @returns 提示词模板列表和总数
+ */
+export async function getPromptTemplates(searchParams: PromptSearchParams = {}): Promise<{
+  data?: { templates: PromptTemplateUI[], total: number };
+  error?: string;
+  status?: number;
+}> {
+  try {
+    console.log('获取提示词模板列表，参数:', searchParams);
+    
+    const page = searchParams.page || 1;
+    const pageSize = searchParams.pageSize || 10;
+    
+    // 构建查询参数
+    const params: PostgrestParams = {
+      select: `
+        id,
+        template_name,
+        template_type,
+        description,
+        template_content,
+        variables,
+        status,
+        version,
+        created_by,
+        created_at,
+        updated_at
+      `,
+      order: 'updated_at.desc',
+      headers: {
+        'Prefer': 'count=exact'
+      },
+      limit: pageSize,
+      offset: (page - 1) * pageSize,
+      filter: {} as Record<string, string>
+    };
+    
+    // 添加筛选条件
+    const filter: Record<string, string> = {};
+    filter['status'] = `gte.0`;
+    if (searchParams.name) {
+      filter['template_name'] = `ilike.%${searchParams.name}%`;
+    }
+    
+    if (searchParams.type) {
+      filter['template_type'] = `eq.${searchParams.type}`;
+    }
+    
+    if (searchParams.status) {
+      let statusValue: number;
+      switch (searchParams.status) {
+        case 'active': statusValue = 1; break;
+        case 'inactive': statusValue = 0; break;
+        case 'system': statusValue = 2; break;
+        default: statusValue = -1;
+      }
+      
+      if (statusValue >= 0) {
+        filter['status'] = `eq.${statusValue}`;
+      }
+    }
+    params.filter = filter;
+    
+    // 发送API请求
+    console.log('API请求参数:', params);
+    const response = await postgrestGet<PromptTemplate[]>('prompt_templates', params);
+    
+    if (response.error) {
+      console.error('API返回错误:', response.error);
+      return { error: response.error, status: response.status };
+    }
+    
+    // 提取API返回的数据
+    const extractedData = extractApiData<PromptTemplate[]>(response.data);
+    
+    if (!extractedData) {
+      console.error('提取数据失败，原始响应:', response.data);
+      return { error: '获取提示词模板数据失败', status: 500 };
+    }
+    
+    console.log(`成功获取${extractedData.length}条提示词模板数据`);
+    
+    // 从响应头中获取总数
+    let totalCount = 0;
+    const responseWithHeaders = response as { data: PromptTemplate[]; headers: Record<string, string> };
+    if(responseWithHeaders.headers){
+      const rangeHeader = responseWithHeaders.headers['content-range'];
+      if(rangeHeader){
+        const total = rangeHeader.split('/')[1];
+        if(total !== '*'){
+          totalCount = parseInt(total, 10);
+        }
+      }
+    }
+    // 返回转换后的数据
+    return {
+      data: {
+        templates: extractedData.map(convertToUITemplate),
+        total: totalCount
+      }
+    };
+  } catch (error) {
+    console.error('获取提示词模板出错:', error);
+    return {
+      error: error instanceof Error ? error.message : '获取提示词模板失败',
+      status: 500
+    };
+  }
+}
+
+/**
+ * 获取提示词模板详情
+ * @param id 模板ID
+ * @returns 提示词模板详情
+ */
+export async function getPromptTemplate(id: string): Promise<{
+  data?: PromptTemplateUI;
+  error?: string;
+  status?: number;
+}> {
+  try {
+    if (!id) {
+      return { error: '模板ID不能为空', status: 400 };
+    }
+    
+    const params: PostgrestParams = {
+      select: `
+        id,
+        template_name,
+        template_type,
+        description,
+        template_content,
+        variables,
+        status,
+        version,
+        created_by,
+        created_at,
+        updated_at
+      `,
+      filter: {
+        'id': `eq.${id}`
+      }
+    };
+    
+    const response = await postgrestGet<PromptTemplate[]>('prompt_templates', params);
+    
+    if (response.error) {
+      return { error: response.error, status: response.status };
+    }
+    
+    const extractedData = extractApiData<PromptTemplate[]>(response.data);
+    
+    if (!extractedData || extractedData.length === 0) {
+      return { error: '未找到指定模板', status: 404 };
+    }
+    
+    return { data: convertToUITemplate(extractedData[0]) };
+  } catch (error) {
+    console.error('获取提示词模板详情失败:', error);
+    return {
+      error: error instanceof Error ? error.message : '获取提示词模板详情失败',
+      status: 500
+    };
+  }
+}
+
+/**
+ * 创建提示词模板
+ * @param template 提示词模板数据
+ * @returns 创建的提示词模板
+ */
+export async function createPromptTemplate(template: Partial<PromptTemplateUI>): Promise<{
+  data?: PromptTemplateUI;
+  error?: string;
+  status?: number;
+}> {
+  try {
+    // 验证必填字段
+    if (!template.template_name || !template.template_type || !template.template_content) {
+      return { error: '模板名称、类型和内容不能为空', status: 400 };
+    }
+    
+    // 准备变量数据
+    let variablesData: Record<string, string> = {};
+    if (typeof template.variables === 'string') {
+      try {
+        variablesData = JSON.parse(template.variables);
+      } catch (e) {
+        console.error('解析变量JSON失败:', e);
+      }
+    } else if (template.variables) {
+      variablesData = template.variables;
+    }
+    
+    // 准备API数据
+    const apiTemplate: Partial<PromptTemplate> = {
+      template_name: template.template_name,
+      template_type: template.template_type,
+      description: template.description || null,
+      template_content: template.template_content,
+      variables: variablesData,
+      status: mapStatusToAPI(template.status || 'active'),
+      version: template.version || 'v1.0',
+      created_by: 1 // 固定创建者为1
+    };
+
+    if(apiTemplate){
+        console.log('apiTemplate', apiTemplate);
+        // throw new Error('测试错误');
+    }
+    
+    const response = await postgrestPost<PromptTemplate, Partial<PromptTemplate>>(
+      'prompt_templates',
+      apiTemplate
+    );
+    
+    if (response.error) {
+      return { error: response.error, status: response.status };
+    }
+    
+    const extractedData = extractApiData<PromptTemplate>(response.data);
+    
+    if (!extractedData) {
+      return { error: '创建提示词模板失败', status: 500 };
+    }
+    
+    return { data: convertToUITemplate(extractedData) };
+  } catch (error) {
+    console.error('创建提示词模板失败:', error);
+    return {
+      error: error instanceof Error ? error.message : '创建提示词模板失败',
+      status: 500
+    };
+  }
+}
+
+/**
+ * 更新提示词模板
+ * @param id 模板ID
+ * @param template 提示词模板数据
+ * @returns 更新后的提示词模板
+ */
+export async function updatePromptTemplate(id: string, template: Partial<PromptTemplateUI>): Promise<{
+  data?: PromptTemplateUI;
+  error?: string;
+  status?: number;
+}> {
+  try {
+    if (!id) {
+      return { error: '模板ID不能为空', status: 400 };
+    }
+    
+    // 准备变量数据
+    let variablesData: Record<string, string> = {};
+    if (typeof template.variables === 'string') {
+      try {
+        variablesData = JSON.parse(template.variables);
+      } catch (e) {
+        console.error('解析变量JSON失败:', e);
+      }
+    } else if (template.variables) {
+      variablesData = template.variables;
+    }
+    
+    // 准备API数据
+    const apiTemplate: Partial<PromptTemplate> = {};
+    
+    if (template.template_name !== undefined) {
+      apiTemplate.template_name = template.template_name;
+    }
+    
+    if (template.template_type !== undefined) {
+      apiTemplate.template_type = template.template_type;
+    }
+    
+    if (template.description !== undefined) {
+      apiTemplate.description = template.description;
+    }
+    
+    if (template.template_content !== undefined) {
+      apiTemplate.template_content = template.template_content;
+    }
+    
+    if (template.variables !== undefined) {
+      apiTemplate.variables = variablesData;
+    }
+    
+    if (template.status !== undefined) {
+      apiTemplate.status = mapStatusToAPI(template.status);
+    }
+    
+    if (template.version !== undefined) {
+      apiTemplate.version = template.version;
+    }
+
+    // if(apiTemplate){
+    //     console.log('apiTemplate', apiTemplate);
+    //     throw new Error('测试错误');
+    // }
+    
+    const response = await postgrestPut<PromptTemplate, Partial<PromptTemplate>>(
+      'prompt_templates',
+      apiTemplate,
+      { id }
+    );
+    
+    if (response.error) {
+      return { error: response.error, status: response.status };
+    }
+    
+    const extractedData = extractApiData<PromptTemplate>(response.data);
+    
+    if (!extractedData) {
+      return { error: '更新提示词模板失败', status: 500 };
+    }
+    
+    return { data: convertToUITemplate(extractedData) };
+  } catch (error) {
+    console.error('更新提示词模板失败:', error);
+    return {
+      error: error instanceof Error ? error.message : '更新提示词模板失败',
+      status: 500
+    };
+  }
+}
+
+/**
+ * 删除提示词模板
+ * @param id 模板ID
+ * @returns 成功或失败信息
+ */
+export async function deletePromptTemplate(id: string): Promise<{
+  success?: boolean;
+  error?: string;
+  status?: number;
+}> {
+  try {
+    if (!id) {
+      return { error: '模板ID不能为空', status: 400 };
+    }
+    
+    // 使用真实删除替代状态更新
+    const response = await postgrestDelete<PromptTemplate>(
+      'prompt_templates',
+      {
+        filter: {
+          'id': `eq.${id}`
+        }
+      }
+    );
+    
+    if (response.error) {
+      return { error: response.error, status: response.status };
+    }
+    
+    return { success: true };
+  } catch (error) {
+    console.error('删除提示词模板失败:', error);
+    return {
+      error: error instanceof Error ? error.message : '删除提示词模板失败',
+      status: 500
+    };
+  }
+}
\ No newline at end of file
diff --git a/app/api/system_setting/config-lists.ts b/app/api/system_setting/config-lists.ts
index e69de29..cf90cb2 100644
--- a/app/api/system_setting/config-lists.ts
+++ b/app/api/system_setting/config-lists.ts
@@ -0,0 +1,322 @@
+import { postgrestGet, postgrestPut, postgrestPost, type PostgrestParams } from '../postgrest-client';
+import dayjs from 'dayjs';
+// 配置项接口
+export interface ConfigItem {
+  id: number;
+  name: string;
+  type: string;
+  description: string;
+  environment: string;
+  config: Record<string, unknown>;
+  remark: string;
+  is_active: boolean;
+  version: string;
+  created_by: number;
+  created_at: string;
+  updated_at: string;
+}
+/**
+ * 格式化日期
+ * @param dateString 日期字符串
+ * @returns 格式化后的日期字符串
+ */
+function formatDate(dateString: string): string {
+    if (!dateString) return '';
+    try {
+      return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
+    } catch (error) {
+      console.error('日期格式化失败:', error);
+      return dateString;
+    }
+}
+
+  
+/**
+ * 从不同格式的 API 响应中提取数据
+ * @param responseData API 响应数据
+ * @returns 提取后的数据或 null
+ */
+function extractApiData<T>(responseData: unknown): T | null {
+    if (!responseData) return null;
+
+    // 格式1: { code: number, msg: string, data: T }
+    if (typeof responseData === 'object' && responseData !== null && 
+        'code' in responseData && 
+        'data' in responseData && 
+        (responseData as { data: unknown }).data) {
+        return (responseData as { data: T }).data;
+    }
+
+    // 格式2: 直接是数据对象
+    return responseData as T;
+}
+
+
+
+
+
+// 获取配置列表
+export async function getConfigLists(params: {
+  name?: string;
+  type?: string;
+  environment?: string;
+  is_active?: boolean;
+  page?: number;
+  pageSize?: number;
+}): Promise<{data: ConfigItem[]; total: number; error?: never} | {data?: never; error: string}> {
+  try {
+    const { 
+      name, 
+      type, 
+      environment, 
+      is_active, 
+      page = 1, 
+      pageSize = 10 
+    } = params;
+    
+    // 构建查询参数
+    const queryParams: PostgrestParams = {
+      select: '*',
+      order: 'created_at.desc',
+      limit: pageSize,
+      offset: (page-1)*pageSize,
+      filter: {} as Record<string, string>,
+      headers: {
+        'Prefer': 'count=exact'
+      }
+    };
+
+    // 添加筛选条件
+    const filter: Record<string, string> = {};
+    if (name) {
+      filter['name'] = `ilike.%${name}%`;
+    }
+    if (type) {
+      filter['type'] = `eq.${type}`;
+    }
+    if (environment) {
+      filter['environment'] = `eq.${environment}`;
+    }
+    if (is_active !== undefined) {
+      filter['is_active'] = `eq.${is_active}`;
+    }
+    queryParams.filter = filter;
+
+    // 获取数据
+    const response = await postgrestGet<ConfigItem[]>('configurations', queryParams);
+
+    if (response.error) {
+      return { error: response.error };
+    }
+
+    const data = extractApiData<ConfigItem[]>(response.data);
+    if (!data) {
+      return { error: '获取数据失败' };
+    }
+
+    // 格式化日期
+    const formattedData = data.map(item => ({
+      ...item,
+      created_at: formatDate(item.created_at),
+      updated_at: formatDate(item.updated_at)
+    }));
+
+    // 从响应头中获取总数
+    let totalCount = 0;
+    const responseWithHeaders = response as { data: ConfigItem[]; headers: Record<string, string> };
+    if (responseWithHeaders.headers) {
+      const rangeHeader = responseWithHeaders.headers['content-range'];
+      if (rangeHeader) {
+        const total = rangeHeader.split('/')[1];
+        if (total !== '*') {
+          totalCount = parseInt(total, 10);
+        }
+      }
+    }
+
+    return {
+      data: formattedData,
+      total: totalCount
+    };
+  } catch (error) {
+    console.error('获取配置列表失败:', error);
+    return { error: error instanceof Error ? error.message : '获取配置列表失败' };
+  }
+}
+
+// 获取配置类型和环境选项
+export async function getConfigOptions(): Promise<{data: {types: string[]; environments: string[]}; error?: never} | {data?: never; error: string}> {
+  try {
+    // 获取类型选项
+    const typeResponse = await postgrestGet<{type: string}[]>('configurations', {
+      select: 'type'
+    });
+
+    if (typeResponse.error) {
+      return { error: typeResponse.error };
+    }
+
+    const typesData = extractApiData<{type: string}[]>(typeResponse.data);
+    if (!typesData) {
+      return { error: '获取类型选项失败' };
+    }
+
+    // 获取环境选项
+    const envResponse = await postgrestGet<{environment: string}[]>('configurations', {
+      select: 'environment'
+    });
+
+    if (envResponse.error) {
+      return { error: envResponse.error };
+    }
+
+    const envData = extractApiData<{environment: string}[]>(envResponse.data);
+    if (!envData) {
+      return { error: '获取环境选项失败' };
+    }
+
+    // 手动去重
+    const types = [...new Set(typesData.map(item => item.type))];
+    const environments = [...new Set(envData.map(item => item.environment))];
+
+    return {
+      data: {
+        types,
+        environments
+      }
+    };
+  } catch (error) {
+    console.error('获取配置选项失败:', error);
+    return { error: error instanceof Error ? error.message : '获取配置选项失败' };
+  }
+}
+
+// 获取配置详情
+export async function getConfigDetail(id: string): Promise<{data: ConfigItem; error?: never} | {data?: never; error: string}> {
+  try {
+    const response = await postgrestGet<ConfigItem[]>('configurations', {
+      filter: {
+        'id': `eq.${id}`
+      }
+    });
+
+    if (response.error) {
+      return { error: response.error };
+    }
+
+    const data = extractApiData<ConfigItem[]>(response.data);
+    if (!data || data.length === 0) {
+      return { error: '未找到配置' };
+    }
+
+    const config = data[0];
+    return {
+      data: {
+        ...config,
+        created_at: formatDate(config.created_at),
+        updated_at: formatDate(config.updated_at)
+      }
+    };
+  } catch (error) {
+    console.error('获取配置详情失败:', error);
+    return { error: error instanceof Error ? error.message : '获取配置详情失败' };
+  }
+}
+
+// 创建配置
+export async function createConfig(data: {
+  name: string;
+  type: string;
+  environment: string;
+  config: Record<string, unknown>;
+  is_active: boolean;
+  remark?: string;
+}): Promise<{data: ConfigItem; error?: never} | {data?: never; error: string}> {
+  try {
+    const response = await postgrestPost<ConfigItem, typeof data>('configurations', data);
+
+    if (response.error) {
+      return { error: response.error };
+    }
+
+    const createdData = extractApiData<ConfigItem>(response.data);
+    if (!createdData) {
+      return { error: '创建配置失败' };
+    }
+
+    return {
+      data: {
+        ...createdData,
+        created_at: formatDate(createdData.created_at),
+        updated_at: formatDate(createdData.updated_at)
+      }
+    };
+  } catch (error) {
+    console.error('创建配置失败:', error);
+    return { error: error instanceof Error ? error.message : '创建配置失败' };
+  }
+}
+
+// 更新配置
+export async function updateConfig(id: string, data: {
+  name: string;
+  type: string;
+  environment: string;
+  config: Record<string, unknown>;
+  is_active: boolean;
+  remark?: string;
+}): Promise<{data: ConfigItem; error?: never} | {data?: never; error: string}> {
+  try {
+    const response = await postgrestPut<ConfigItem, typeof data>('configurations', data, {
+      id: id.toString()
+    });
+
+    if (response.error) {
+      return { error: response.error };
+    }
+
+    const updatedData = extractApiData<ConfigItem>(response.data);
+    if (!updatedData) {
+      return { error: '更新配置失败' };
+    }
+
+    return {
+      data: {
+        ...updatedData,
+        created_at: formatDate(updatedData.created_at),
+        updated_at: formatDate(updatedData.updated_at)
+      }
+    };
+  } catch (error) {
+    console.error('更新配置失败:', error);
+    return { error: error instanceof Error ? error.message : '更新配置失败' };
+  }
+}
+
+// 更新配置状态
+export async function updateConfigStatus(id: number, is_active: boolean): Promise<{success: boolean; error?: string}> {
+  try {
+    const response = await postgrestPut<ConfigItem, {is_active: boolean}>(
+      'configurations',
+      { is_active },
+      { id: id.toString() }
+    );
+
+    if (response.error) {
+      return { success: false, error: response.error };
+    }
+
+    const updatedData = extractApiData<ConfigItem>(response.data);
+    if (!updatedData) {
+      return { success: false, error: '更新配置状态失败' };
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error('更新配置状态失败:', error);
+    return { 
+      success: false, 
+      error: error instanceof Error ? error.message : '更新配置状态失败' 
+    };
+  }
+}
diff --git a/app/components/layout/Sidebar.tsx b/app/components/layout/Sidebar.tsx
index a819030..663fb02 100644
--- a/app/components/layout/Sidebar.tsx
+++ b/app/components/layout/Sidebar.tsx
@@ -37,12 +37,12 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
           path: '/files/upload',
           icon: 'ri-upload-cloud-line'
         },
-        {
-          id: 'file-list',
-          title: '文件列表',
-          path: '/files',
-          icon: 'ri-file-list-3-line'
-        },
+        // {
+        //   id: 'file-list',
+        //   title: '文件列表',
+        //   path: '/files',
+        //   icon: 'ri-file-list-3-line'
+        // },
         {
           id:'documents',
           title:'文档列表',
@@ -80,15 +80,7 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
           title: '新增评查点',
           path: '/rules/new',
           icon: 'ri-add-circle-line'
-        }
-      ]
-    },
-    {
-      id: 'review-management',
-      title: '评查结果',
-      path: '/reviews',
-      icon: 'ri-bar-chart-box-line',
-      children: [
+        },
         {
           id: 'review-detail',
           title: '评查详情',
@@ -109,12 +101,12 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
           path: '/config-lists',
           icon: 'ri-list-check-3'
         },
-        {
-          id: 'basic-settings',
-          title: '基础设置',
-          path: '/settings',
-          icon: 'ri-equalizer-line'
-        },
+        // {
+        //   id: 'basic-settings',
+        //   title: '基础设置',
+        //   path: '/settings',
+        //   icon: 'ri-equalizer-line'
+        // },
         {
           id: 'document-types',
           title: '文档类型',
diff --git a/app/components/ui/UploadArea.tsx b/app/components/ui/UploadArea.tsx
index 84c01a9..2998412 100644
--- a/app/components/ui/UploadArea.tsx
+++ b/app/components/ui/UploadArea.tsx
@@ -50,7 +50,15 @@ export const UploadArea = forwardRef<UploadAreaRef, UploadAreaProps>(({
   }));
 
   const handleClick = useCallback(() => {
-    if (!disabled && !shouldPreventFileSelect && fileInputRef.current) {
+    if (disabled) return;
+
+    if (shouldPreventFileSelect) {
+      // 如果应该阻止文件选择，则触发表单提交
+      const form = fileInputRef.current?.closest('form');
+      if (form) {
+        form.requestSubmit();
+      }
+    } else if (fileInputRef.current) {
       fileInputRef.current.click();
     }
   }, [disabled, shouldPreventFileSelect]);
@@ -76,7 +84,15 @@ export const UploadArea = forwardRef<UploadAreaRef, UploadAreaProps>(({
     e.preventDefault();
     setIsDragOver(false);
     
-    if (!disabled && !shouldPreventFileSelect && e.dataTransfer.files.length > 0) {
+    if (disabled) return;
+
+    if (shouldPreventFileSelect) {
+      // 如果应该阻止文件选择，则触发表单提交
+      const form = e.currentTarget.closest('form');
+      if (form) {
+        form.requestSubmit();
+      }
+    } else if (e.dataTransfer.files.length > 0) {
       onFilesSelected(e.dataTransfer.files);
     }
   }, [disabled, shouldPreventFileSelect, onFilesSelected]);
diff --git a/app/routes/config-lists._index.tsx b/app/routes/config-lists._index.tsx
index 95d7b9a..764abc5 100644
--- a/app/routes/config-lists._index.tsx
+++ b/app/routes/config-lists._index.tsx
@@ -7,13 +7,13 @@ import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterP
 import { Pagination } from "~/components/ui/Pagination";
 import { Table } from "~/components/ui/Table";
 import { Tag } from "~/components/ui/Tag";
+import { getConfigLists, getConfigOptions, updateConfigStatus, type ConfigItem } from "~/api/system_setting/config-lists";
 import configListsStyles from "~/styles/pages/config-lists_index.css?url";
 
 export const links = () => [
   { rel: "stylesheet", href: configListsStyles }
 ];
 
-
 export const meta: MetaFunction = () => {
   return [
     { title: "系统配置管理 - 中国烟草AI合同及卷宗审核系统" },
@@ -54,165 +54,55 @@ export const MODULE_LABELS: Record<ConfigModule, string> = {
   [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;
+  types: string[];
+  environments: string[];
 }
 
 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 name = url.searchParams.get("name") || "";
+  const type = url.searchParams.get("type") || "";
   const environment = url.searchParams.get("environment") || "";
-  const isActive = url.searchParams.get("isActive") || "";
+  const is_active = url.searchParams.get("is_active") ? url.searchParams.get("is_active") === "true" : undefined;
   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())
-      );
+    // 获取配置列表
+    const configsResponse = await getConfigLists({
+      name,
+      type,
+      environment,
+      is_active,
+      page: currentPage,
+      pageSize
+    });
+
+    if (configsResponse.error || !configsResponse.data) {
+      throw new Error(configsResponse.error || "获取配置列表失败");
     }
-    
-    if (module) {
-      filteredConfigs = filteredConfigs.filter(config => config.module === module);
+
+    // 获取配置选项
+    const optionsResponse = await getConfigOptions();
+
+    if (optionsResponse.error || !optionsResponse.data) {
+      throw new Error(optionsResponse.error || "获取配置选项失败");
     }
-    
-    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,
+      configs: configsResponse.data,
+      totalCount: configsResponse.total,
       currentPage,
       pageSize,
-      totalPages
+      totalPages: Math.ceil(configsResponse.total / pageSize),
+      types: optionsResponse.data.types,
+      environments: optionsResponse.data.environments
     }, {
       headers: {
         "Cache-Control": "max-age=60, s-maxage=180"
@@ -233,28 +123,18 @@ export async function action({ request }: ActionFunctionArgs) {
     return json({ success: false, error: "缺少配置ID" }, { status: 400 });
   }
 
+  // 进行更新启用和禁用的状态
   try {
     if (_action === 'toggleStatus') {
-      const isActive = formData.get('isActive') === 'true';
-      const newStatus = !isActive;
+      const is_active = formData.get('is_active') === 'true';
       
-      // 实际项目中应调用API更新状态
-      console.log(`切换配置 ${configId} 状态为: ${newStatus}`);
+      const response = await updateConfigStatus(parseInt(configId as string), is_active);
       
-      // 模拟API调用
-      // const response = await fetch(`/api/configs/${configId}/status`, {
-      //   method: 'PATCH',
-      //   headers: {
-      //     'Content-Type': 'application/json',
-      //   },
-      //   body: JSON.stringify({ isActive: newStatus }),
-      // });
+      if (!response.success) {
+        return json({ success: false, error: response.error }, { status: 500 });
+      }
       
-      // if (!response.ok) {
-      //   throw new Error(`状态切换失败: ${response.status}`);
-      // }
-      
-      return json({ success: true, newStatus });
+      return json({ success: true });
     }
     
     return json({ success: false, error: "未知操作" }, { status: 400 });
@@ -275,7 +155,7 @@ export function ErrorBoundary() {
 }
 
 export default function ConfigListsIndex() {
-  const { configs, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
+  const { configs, totalCount, currentPage, pageSize, types, environments } = useLoaderData<typeof loader>();
   const [searchParams, setSearchParams] = useSearchParams();
   const submit = useSubmit();
   const [showDetailModal, setShowDetailModal] = useState(false);
@@ -300,9 +180,9 @@ export default function ConfigListsIndex() {
   const handleConfigNameSearch = (value: string) => {
     const newParams = new URLSearchParams(searchParams);
     if (value) {
-      newParams.set('configName', value);
+      newParams.set('name', value);
     } else {
-      newParams.delete('configName');
+      newParams.delete('name');
     }
     
     // 搜索时，重置到第一页
@@ -312,11 +192,11 @@ export default function ConfigListsIndex() {
   };
 
   const handleToggleStatus = (config: ConfigItem) => {
-    if (window.confirm(`确定要${config.isActive ? '禁用' : '启用'}该配置吗？`)) {
+    if (window.confirm(`确定要${config.is_active ? '禁用' : '启用'}该配置吗？`)) {
       const formData = new FormData();
       formData.append('_action', 'toggleStatus');
-      formData.append('configId', config.id);
-      formData.append('isActive', String(config.isActive));
+      formData.append('configId', config.id.toString());
+      formData.append('is_active', String(!config.is_active));
       
       submit(formData, { method: 'post' });
     }
@@ -342,10 +222,20 @@ export default function ConfigListsIndex() {
   
   // 处理重置筛选
   const handleReset = () => {
+    const nameInput = document.querySelector('input[placeholder="请输入配置名称"]') as HTMLInputElement;
+    const typeSelect = document.querySelector('select[name="type"]') as HTMLInputElement;
+    const environmentSelect = document.querySelector('select[name="environment"]') as HTMLInputElement;
+    const statusSelect = document.querySelector('select[name="is_active"]') as HTMLInputElement;
+    
     setSearchParams(new URLSearchParams());
+  
+    if(nameInput) nameInput.value = ''
+    if(typeSelect) typeSelect.value = ''
+    if(environmentSelect) environmentSelect.value = ''
+    if(statusSelect) statusSelect.value = ''
+  
   };
 
-
   // 关闭详情模态框
   const closeDetailModal = () => {
     setShowDetailModal(false);
@@ -356,43 +246,42 @@ export default function ConfigListsIndex() {
   const columns = [
     {
       title: "配置名称",
-      dataIndex: "configName" as keyof ConfigItem,
-      key: "configName",
+      dataIndex: "name" as keyof ConfigItem,
+      key: "name",
       width: "20%"
     },
     {
       title: "所属模块",
-      key: "module",
+      key: "type",
       width: "10%",
-      render: (_: unknown, record: ConfigItem) => MODULE_LABELS[record.module]
+      render: (_: unknown, record: ConfigItem) => record.type
     },
     {
       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 className="env-tag">
+            {record.environment}
           </span>
         );
       }
     },
     {
       title: "状态",
-      key: "isActive",
+      key: "is_active",
       width: "15%",
       render: (_: unknown, record: ConfigItem) => (
-        <Tag color={record.isActive ? 'green' : 'red'}>
-          {record.isActive ? '已启用' : '已禁用'}
+        <Tag color={record.is_active ? 'green' : 'red'}>
+          {record.is_active ? '已启用' : '已禁用'}
         </Tag>
       )
     },
     {
       title: "最后更新时间",
-      dataIndex: "updatedAt" as keyof ConfigItem,
-      key: "updatedAt",
+      dataIndex: "updated_at" as keyof ConfigItem,
+      key: "updated_at",
       width: "15%"
     },
     {
@@ -417,29 +306,17 @@ export default function ConfigListsIndex() {
           </Link>
           <button 
             type="button" 
-            className={`operation-btn ${record.isActive ? '!text-[--color-warning]' : '!text-[--color-success]'}`}
+            className={`operation-btn ${record.is_active ? '!text-[--color-warning]' : '!text-[--color-success]'}`}
             onClick={() => handleToggleStatus(record)}
           >
-            <i className={record.isActive ? `ri-stop-circle-line` : `ri-play-circle-line`}></i>
-            {record.isActive ? '禁用' : '启用'}
+            <i className={record.is_active ? `ri-stop-circle-line` : `ri-play-circle-line`}></i>
+            {record.is_active ? '禁用' : '启用'}
           </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">
       {/* 页面头部 */}
@@ -458,9 +335,9 @@ export default function ConfigListsIndex() {
             <Button type="default" icon="ri-refresh-line" onClick={handleReset} className="mr-2">
               重置
             </Button>
-            <Button type="primary" icon="ri-search-line">
+            {/* <Button type="primary" icon="ri-search-line">
               查询
-            </Button>
+            </Button> */}
           </>
         }
         noActionDivider={true}
@@ -468,7 +345,7 @@ export default function ConfigListsIndex() {
         <SearchFilter
           label="配置名称"
           placeholder="请输入配置名称"
-          value={searchParams.get('configName') || ''}
+          value={searchParams.get('name') || ''}
           onSearch={handleConfigNameSearch}
           className="flex-1 min-w-[200px]"
           instantSearch={true}
@@ -476,9 +353,9 @@ export default function ConfigListsIndex() {
         
         <FilterSelect
           label="所属模块"
-          name="module"
-          value={searchParams.get('module') || ''}
-          options={[{ value: '', label: '全部' }, ...moduleOptions]}
+          name="type"
+          value={searchParams.get('type') || ''}
+          options={[ ...types.map(type => ({ value: type, label: type }))]}
           onChange={handleFilterChange}
           className="flex-1 min-w-[200px]"
         />
@@ -487,17 +364,16 @@ export default function ConfigListsIndex() {
           label="环境"
           name="environment"
           value={searchParams.get('environment') || ''}
-          options={[{ value: '', label: '全部' }, ...environmentOptions]}
+          options={[ ...environments.map(env => ({ value: env, label: env }))]}
           onChange={handleFilterChange}
           className="flex-1 min-w-[200px]"
         />
         
         <FilterSelect
           label="状态"
-          name="isActive"
-          value={searchParams.get('isActive') || ''}
+          name="is_active"
+          value={searchParams.get('is_active') || ''}
           options={[
-            { value: '', label: '全部' },
             { value: 'true', label: '已启用' },
             { value: 'false', label: '已禁用' }
           ]}
@@ -545,19 +421,19 @@ export default function ConfigListsIndex() {
             <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 className="config-detail-value">{selectedConfig.name}</div>
               </div>
               
               <div className="config-detail-item">
                 <div className="config-detail-label">所属模块</div>
-                <div className="config-detail-value">{MODULE_LABELS[selectedConfig.module]}</div>
+                <div className="config-detail-value">{selectedConfig.type}</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 className="env-tag">
+                    {selectedConfig.environment}
                   </span>
                 </div>
               </div>
@@ -565,8 +441,8 @@ export default function ConfigListsIndex() {
               <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 color={selectedConfig.is_active ? 'green' : 'red'}>
+                    {selectedConfig.is_active ? '已启用' : '已禁用'}
                   </Tag>
                 </div>
               </div>
@@ -574,19 +450,19 @@ export default function ConfigListsIndex() {
               <div className="config-detail-item">
                 <div className="config-detail-label">配置数据</div>
                 <pre className="config-detail-code">
-                  {JSON.stringify(selectedConfig.configData, null, 2)}
+                  {JSON.stringify(selectedConfig.config, 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 className="config-detail-value">{selectedConfig.created_at}</div>
                 </div>
                 
                 <div className="config-detail-item">
                   <div className="config-detail-label">更新时间</div>
-                  <div className="config-detail-value">{selectedConfig.updatedAt}</div>
+                  <div className="config-detail-value">{selectedConfig.updated_at}</div>
                 </div>
               </div>
             </div>
diff --git a/app/routes/config-lists.new.tsx b/app/routes/config-lists.new.tsx
index 6e4301d..7689981 100644
--- a/app/routes/config-lists.new.tsx
+++ b/app/routes/config-lists.new.tsx
@@ -4,6 +4,7 @@ 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 { getConfigOptions, getConfigDetail, createConfig, updateConfig } from "~/api/system_setting/config-lists";
 import configNewStyles from "~/styles/pages/config-lists_new.css?url";
 
 export const links = () => [
@@ -39,18 +40,20 @@ export const EXTENDED_ENVIRONMENT_LABELS: Record<string, string> = {
 };
 
 interface ConfigData {
-  id: string;
-  configName: string;
-  module: ConfigModule;
-  environment: string; // 使用扩展的环境类型
-  isActive: boolean;
-  configData: string; // JSON字符串
-  remarks?: string; // 添加备注字段
+  id: number;
+  name: string;
+  type: string;
+  environment: string;
+  is_active: boolean;
+  config: Record<string, unknown>;
+  remark?: string;
 }
 
 interface LoaderData {
   config?: ConfigData;
   isEdit: boolean;
+  types: string[];
+  environments: string[];
 }
 
 export async function loader({ request }: LoaderFunctionArgs) {
@@ -58,193 +61,107 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const id = url.searchParams.get("id");
   let config: ConfigData | undefined = undefined;
   
+  // 获取配置选项
+  const optionsResponse = await getConfigOptions();
+  if (optionsResponse.error) {
+    throw new Error(optionsResponse.error);
+  }
+  
   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
+    // 获取配置详情
+    const detailResponse = await getConfigDetail(id);
+    if (detailResponse.error) {
+      throw new Error(detailResponse.error);
     }
+    config = detailResponse.data;
   }
   
   return Response.json({
     config,
-    isEdit: !!config
+    isEdit: !!config,
+    types: optionsResponse.data?.types || [],
+    environments: optionsResponse.data?.environments || []
   });
 }
 
-
 interface ActionData {
   success?: boolean;
   errors?: {
-    configName?: string;
-    module?: string;
+    name?: string;
+    type?: string;
     environment?: string;
-    configData?: string;
+    config?: 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 id = formData.get("id") as string;
+  const name = formData.get("name") as string;
+  const type = formData.get("type") 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 config = formData.get("config") as string;
+  const is_active = formData.get("is_active") === "true";
+  const remark = formData.get("remark") as string;
   
   const errors: ActionData["errors"] = {};
   
   // 表单验证
-  if (!configName || configName.trim() === "") {
-    errors.configName = "配置名称不能为空";
+  if (!name || name.trim() === "") {
+    errors.name = "配置名称不能为空";
   }
   
-  if (!module) {
-    errors.module = "请选择所属模块";
+  if (!type) {
+    errors.type = "请选择所属模块";
   }
   
   if (!environment) {
     errors.environment = "请选择环境";
   }
   
-  if (!configData || configData.trim() === "") {
-    errors.configData = "配置数据不能为空";
+  if (!config || config.trim() === "") {
+    errors.config = "配置数据不能为空";
   } else {
     try {
-      JSON.parse(configData);
+      JSON.parse(config);
     } catch (e) {
-      errors.configData = "配置数据必须是有效的JSON格式";
+      errors.config = "配置数据必须是有效的JSON格式";
     }
   }
   
   if (Object.keys(errors).length > 0) {
-    return json<ActionData>({ errors });
+    return Response.json({ errors });
   }
   
   try {
-    // 实际应用中，应调用API保存数据
-    console.log("保存配置:", { configId, configName, module, environment, configData, isActive, remarks });
+    const configData = {
+      name,
+      type,
+      environment,
+      config: JSON.parse(config),
+      is_active,
+      remark
+    };
     
-    // 模拟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}`);
-    // }
+    if (id) {
+      // 更新配置
+      const response = await updateConfig(id, configData);
+      if (response.error) {
+        throw new Error(response.error);
+      }
+    } else {
+      // 创建配置
+      const response = await createConfig(configData);
+      if (response.error) {
+        throw new Error(response.error);
+      }
+    }
     
-    // 保存成功后重定向到列表页
     return redirect("/config-lists");
   } catch (error) {
     console.error("保存配置失败:", error);
-    return json<ActionData>({
+    return Response.json({
       success: false,
       errors: {
         general: "保存配置失败，请稍后重试"
@@ -253,18 +170,17 @@ export async function action({ request }: ActionFunctionArgs) {
   }
 }
 
-// JSON模板数据
-const JSON_TEMPLATES = {
+// 配置模板常量
+const CONFIG_TEMPLATES = {
   database: {
-    database: {
-      host: "localhost",
-      port: 5432,
-      username: "db_user",
-      password: "******",
-      name: "app_database",
-      pool_size: 10,
-      timeout: 5000,
-      ssl: false
+    host: "localhost",
+    port: 5432,
+    database: "mydb",
+    username: "admin",
+    password: "******",
+    pool: {
+      min: 2,
+      max: 10
     }
   },
   file: {
@@ -290,8 +206,7 @@ const JSON_TEMPLATES = {
 };
 
 export default function ConfigNew() {
-  const { config, isEdit } = useLoaderData<typeof loader>();
-  
+  const { config, isEdit, types, environments } = useLoaderData<typeof loader>();
   const actionData = useActionData<typeof action>();
   const navigation = useNavigation();
   const isSubmitting = navigation.state === "submitting";
@@ -304,18 +219,14 @@ export default function ConfigNew() {
   const [selectedModule, setSelectedModule] = useState<string>("");
   const [selectedEnvironment, setSelectedEnvironment] = useState<string>("");
   
+  // 在 ConfigNew 组件中添加状态来跟踪当前选中的模板
+  const [selectedTemplate, setSelectedTemplate] = useState<keyof typeof CONFIG_TEMPLATES | null>(null);
+  
   useEffect(() => {
     // 初始化配置数据
-    if (config?.configData) {
-      setConfigDataValue(config.configData);
-    }
-    
-    // 初始化模块和环境的选中状态
-    if (config?.module) {
-      setSelectedModule(config.module);
-    }
-    
-    if (config?.environment) {
+    if (config) {
+      setConfigDataValue(JSON.stringify(config.config, null, 2));
+      setSelectedModule(config.type);
       setSelectedEnvironment(config.environment);
     }
     
@@ -333,7 +244,6 @@ export default function ConfigNew() {
       },
       feature_flags: ["new_ui", "analytics_v2"]
     }, null, 2));
-    
   }, [config]);
   
   // 处理JSON数据变更
@@ -360,6 +270,7 @@ export default function ConfigNew() {
   
   // 格式化JSON
   const handleFormatJson = () => {
+    
     if (configDataValue.trim() === "") return;
     
     try {
@@ -375,60 +286,6 @@ export default function ConfigNew() {
     }
   };
   
-  // 加载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, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .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">
@@ -444,6 +301,12 @@ export default function ConfigNew() {
           </Button>
         </div>
       </div>
+
+      {actionData?.errors?.general && (
+        <div className="mb-4 w-full">
+          <div className="error-message general-error">{actionData.errors.general}</div>
+        </div>
+      )}
       
       <Card className="config-form-card">
         <Form method="post" id="configForm" className="config-form">
@@ -452,18 +315,18 @@ export default function ConfigNew() {
           {/* 配置名称和状态 */}
           <div className="form-row">
             <div className="form-group">
-              <label htmlFor="configName" className="form-label required">配置名称</label>
+              <label htmlFor="name" className="form-label required">配置名称</label>
               <input
                 type="text"
-                id="configName"
-                name="configName"
-                className={`form-input ${actionData?.errors?.configName ? 'input-error' : ''}`}
-                defaultValue={config?.configName || ''}
+                id="name"
+                name="name"
+                className={`form-input ${actionData?.errors?.name ? 'input-error' : ''}`}
+                defaultValue={config?.name || ''}
                 placeholder="请输入配置名称，如database_connection"
                 required
               />
-              {actionData?.errors?.configName && (
-                <div className="error-message">{actionData.errors.configName}</div>
+              {actionData?.errors?.name && (
+                <div className="error-message">{actionData.errors.name}</div>
               )}
               <div className="form-help">
                 唯一标识符，配置名称应使用英文，推荐使用下划线命名方式
@@ -471,18 +334,18 @@ export default function ConfigNew() {
             </div>
             
             <div className="form-group">
-              <label htmlFor="isActive" className="form-label">状态</label>
+              <label htmlFor="is_active" className="form-label">状态</label>
               <div className="mt-2">
                 <div className="flex items-center">
                   <input
                     type="checkbox"
-                    id="isActive"
-                    name="isActive"
+                    id="is_active"
+                    name="is_active"
                     value="true"
                     className="form-checkbox"
-                    defaultChecked={config?.isActive !== false}
+                    defaultChecked={config?.is_active !== false}
                   />
-                  <label htmlFor="isActive" className="form-checkbox-label">
+                  <label htmlFor="is_active" className="form-checkbox-label">
                     启用此配置
                   </label>
                 </div>
@@ -495,33 +358,33 @@ export default function ConfigNew() {
           
           {/* 所属模块 */}
           <div className="form-group">
-            <label htmlFor="module" className="form-label required">所属模块</label>
+            <label htmlFor="type" className="form-label required">所属模块</label>
             <input
               type="hidden"
-              name="module"
+              name="type"
               value={selectedModule}
             />
             <input
               type="text"
-              id="moduleDisplay"
-              className={`form-input ${actionData?.errors?.module ? 'input-error' : ''}`}
-              value={selectedModule ? MODULE_LABELS[selectedModule as ConfigModule] || selectedModule : ''}
+              id="typeDisplay"
+              className={`form-input ${actionData?.errors?.type ? 'input-error' : ''}`}
+              value={selectedModule}
+              onChange={(e) => setSelectedModule(e.target.value)}
               placeholder="请输入或选择所属模块"
-              readOnly
               required
             />
-            {actionData?.errors?.module && (
-              <div className="error-message">{actionData.errors.module}</div>
+            {actionData?.errors?.type && (
+              <div className="error-message">{actionData.errors.type}</div>
             )}
             <div className="tag-buttons mt-2">
-              {Object.entries(MODULE_LABELS).map(([value, label]) => (
+              {types.map((type: string) => (
                 <button
-                  key={value}
+                  key={type}
                   type="button"
-                  className={`tag-button ${selectedModule === value ? 'active' : ''}`}
-                  onClick={() => handleModuleTagClick(value)}
+                  className={`tag-button ${selectedModule === type ? 'active' : ''}`}
+                  onClick={() => setSelectedModule(type)}
                 >
-                  {label}
+                  {type}
                 </button>
               ))}
             </div>
@@ -542,23 +405,23 @@ export default function ConfigNew() {
               type="text"
               id="environmentDisplay"
               className={`form-input ${actionData?.errors?.environment ? 'input-error' : ''}`}
-              value={selectedEnvironment ? EXTENDED_ENVIRONMENT_LABELS[selectedEnvironment] || selectedEnvironment : ''}
+              value={selectedEnvironment}
+              onChange={(e) => setSelectedEnvironment(e.target.value)}
               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]) => (
+              {environments.map((env: string) => (
                 <button
-                  key={value}
+                  key={env}
                   type="button"
-                  className={`tag-button ${selectedEnvironment === value ? 'active' : ''}`}
-                  onClick={() => handleEnvironmentTagClick(value)}
+                  className={`tag-button ${selectedEnvironment === env ? 'active' : ''}`}
+                  onClick={() => setSelectedEnvironment(env)}
                 >
-                  {label}
+                  {env}
                 </button>
               ))}
             </div>
@@ -569,14 +432,14 @@ export default function ConfigNew() {
           
           {/* 配置数据 */}
           <div className="form-group">
-            <label htmlFor="configData" className="form-label required">配置数据 (JSON)</label>
+            <label htmlFor="config" 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' : ''}`}
+                  id="config"
+                  name="config"
+                  className={`json-editor ${(actionData?.errors?.config || jsonError) ? 'input-error' : ''}`}
                   value={configDataValue}
                   onChange={handleConfigDataChange}
                   required
@@ -586,13 +449,16 @@ export default function ConfigNew() {
                   <Button 
                     type="default" 
                     size="small" 
-                    onClick={handleFormatJson}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      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>
+                {(actionData?.errors?.config || jsonError) && (
+                  <div className="error-message">{actionData?.errors?.config || jsonError}</div>
                 )}
               </div>
               
@@ -603,32 +469,62 @@ export default function ConfigNew() {
                     <div className="example-title">配置示例</div>
                   </div>
                   <div className="example-content">
-                    <pre 
-                      className="example-pre" 
-                      dangerouslySetInnerHTML={{ __html: renderJsonWithSyntaxHighlight(exampleJsonValue) }} 
-                    />
+                    <div className="json-display">
+                      {exampleJsonValue.split('\n').map((line, index) => (
+                        <div key={index} className="json-line">
+                          {line.split('').map((char, charIndex) => {
+                            let className = 'json-char';
+                            if (char === '{' || char === '}') className += ' json-brace';
+                            if (char === '[' || char === ']') className += ' json-bracket';
+                            if (char === '"') className += ' json-quote';
+                            if (char === ':') className += ' json-colon';
+                            if (char === ',') className += ' json-comma';
+                            return (
+                              <span key={charIndex} className={className}>
+                                {char}
+                              </span>
+                            );
+                          })}
+                        </div>
+                      ))}
+                    </div>
                   </div>
                   <div className="example-footer">
                     <div className="text-sm font-medium mb-2">常用配置模板:</div>
                     <div className="flex flex-wrap gap-2">
                       <Button 
-                        type="default" 
+                        type="default"
                         size="small" 
-                        onClick={() => handleLoadTemplate('database')}
+                        className={`${selectedTemplate === 'database' ? 'border-[#00684a] text-[#00684a] focus:ring-0' : ''}`}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setExampleJsonValue(JSON.stringify(CONFIG_TEMPLATES.database, null, 2));
+                          setSelectedTemplate('database');
+                        }}
                       >
                         数据库配置
                       </Button>
                       <Button 
-                        type="default" 
+                        type="default"
                         size="small" 
-                        onClick={() => handleLoadTemplate('file')}
+                        className={`${selectedTemplate === 'file' ? 'border-[#00684a] text-[#00684a] focus:ring-0' : ''}`}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setExampleJsonValue(JSON.stringify(CONFIG_TEMPLATES.file, null, 2));
+                          setSelectedTemplate('file');
+                        }}
                       >
                         文件存储配置
                       </Button>
                       <Button 
-                        type="default" 
+                        type="default"
                         size="small" 
-                        onClick={() => handleLoadTemplate('ai')}
+                        className={`${selectedTemplate === 'ai' ? 'border-[#00684a] text-[#00684a] focus:ring-0' : ''}`}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setExampleJsonValue(JSON.stringify(CONFIG_TEMPLATES.ai, null, 2));
+                          setSelectedTemplate('ai');
+                        }}
                       >
                         AI服务配置
                       </Button>
@@ -644,12 +540,12 @@ export default function ConfigNew() {
           
           {/* 备注 */}
           <div className="form-group">
-            <label htmlFor="remarks" className="form-label">备注</label>
+            <label htmlFor="remark" className="form-label">备注</label>
             <textarea
-              id="remarks"
-              name="remarks"
+              id="remark"
+              name="remark"
               className="form-textarea"
-              defaultValue={config?.remarks || ''}
+              defaultValue={config?.remark || ''}
               rows={2}
               placeholder="请输入配置备注信息"
             />
@@ -658,12 +554,6 @@ export default function ConfigNew() {
             </div>
           </div>
           
-          {actionData?.errors?.general && (
-            <div className="form-row">
-              <div className="error-message general-error">{actionData.errors.general}</div>
-            </div>
-          )}
-          
           
         </Form>
       </Card>
diff --git a/app/routes/document-types._index.tsx b/app/routes/document-types._index.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/routes/document-types.tsx b/app/routes/document-types.tsx
new file mode 100644
index 0000000..679e3dd
--- /dev/null
+++ b/app/routes/document-types.tsx
@@ -0,0 +1,22 @@
+import { Outlet } from "react-router-dom";
+import {type MetaFunction} from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+    return [
+        {title: "文档类型列表 - 中国烟草AI合同及卷宗审核系统"},
+        {name: "document-types", content: "文档类型列表,新增,修改"}
+    ]
+}
+
+export const handle = {
+    breadcrumb: "文档类型列表"
+}   
+
+/**
+ * 文档类型列表路由布局
+ */
+export default function DocumentTypesLayout() {
+    return (
+        <Outlet />
+    )
+}
diff --git a/app/routes/files.upload.tsx b/app/routes/files.upload.tsx
index 85257fd..8a29bcb 100644
--- a/app/routes/files.upload.tsx
+++ b/app/routes/files.upload.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef } from "react";
 import { MetaFunction, ActionFunctionArgs, json } from "@remix-run/node";
-import { Form } from "@remix-run/react";
+import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import { Card } from "~/components/ui/Card";
 import { Button } from "~/components/ui/Button";
 import { Table } from "~/components/ui/Table";
@@ -8,6 +8,7 @@ import { UploadArea, UploadAreaRef } from "~/components/ui/UploadArea";
 import { FileProgress} from "~/components/ui/FileProgress";
 import { ProcessingSteps, Step } from "~/components/ui/ProcessingSteps";
 import uploadStyles from "~/styles/pages/files_upload.css?url";
+import { getTodayDocuments, getDocumentTypes, getDocumentsStatus, type Document, type DocumentType, DocumentStatus } from "~/api/files/files-upload";
 
 export function links() {
   return [
@@ -74,6 +75,14 @@ export enum ProcessingStatus {
   ERROR = "error"
 }
 
+// 处理步骤状态定义
+export enum StepStatus {
+  CUTTING = "Cutting",
+  EXTRACTIONING = "extractioning",
+  REVIEWING = "reviewing",
+  COMPLETED = "completed"
+}
+
 // 上传的文件信息接口
 export interface UploadedFile {
   id: string;
@@ -93,9 +102,21 @@ export interface UploadedFile {
 // 文件上传响应接口
 interface FileUploadResponse {
   success: boolean;
-  fileId?: string;
-  message?: string;
-  error?: string;
+  result?: {
+    id: number;
+    file_name: string;
+    file_size: number;
+    file_url: string;
+    type_id: number;
+    type_description: string;
+    document_number: string | null;
+    storage_type: string;
+    is_test_document: boolean;
+    remark: string | null;
+    background_processing: boolean;
+    evaluation_level: string;
+  };
+  error: string | null;
 }
 
 // 将文件转换为二进制数据
@@ -200,6 +221,20 @@ async function uploadFileToServer(
   }
 }
 
+// 定义action返回数据的类型
+type ActionData = {
+  errors?: {
+    fileType?: string;
+    file?: string;
+  };
+  success?: boolean;
+  message?: string;
+  fileId?: string;
+  fileType?: FileType;
+  priority?: Priority;
+  error?: string;
+};
+
 // action处理文件上传请求
 export async function action({ request }: ActionFunctionArgs) {
   try {
@@ -210,22 +245,25 @@ export async function action({ request }: ActionFunctionArgs) {
     const fileType = formData.get("fileType") as FileType;
     const priority = formData.get("priority") as Priority;
     
+    const errors: Record<string, string> = {};
+
     if (!fileType) {
-      return json(
-        { success: false, error: "请选择文件类型" },
-        { status: 400 }
-      );
+      errors.fileType = "上传文件之前请选择文件类型";
     }
     
     if (!fileUpload) {
-      return json(
-        { success: false, error: "未找到上传的文件" },
-        { status: 400 }
-      );
+      errors.file = "未找到上传的文件";
+    }
+    
+    // 如果有错误，返回错误信息
+    if (Object.keys(errors).length > 0) {
+      return json({ errors });
     }
     
     // 获取文件信息
-    console.log(`接收到文件: ${fileUpload.name}, 大小: ${fileUpload.size}, 类型: ${fileUpload.type}`);
+    if (fileUpload) {
+      console.log(`接收到文件: ${fileUpload.name}, 大小: ${fileUpload.size}, 类型: ${fileUpload.type}`);
+    }
     
     // 注意: 在实际的Remix action中，我们无法直接处理文件内容
     // 这里的代码仅用于模拟。在前端组件中，我们将实现实际的文件处理逻辑。
@@ -247,50 +285,52 @@ export async function action({ request }: ActionFunctionArgs) {
   }
 }
 
-// 上传队列中的文件列表模拟数据
-const MOCK_QUEUE_FILES: UploadedFile[] = [
-  {
-    id: "1",
-    name: "烟草产品销售合同（2023版）.pdf",
-    size: 5.2 * 1024 * 1024, // 5.2MB
-    type: "application/pdf",
-    fileType: FileType.CONTRACT,
-    priority: Priority.NORMAL,
-    status: ProcessingStatus.PROCESSING,
-    uploadTime: "2023-10-25 14:25:18",
-    processingInfo: {
-      progress: 60,
-      currentStep: 2
+// 定义 loader 返回的数据类型
+type LoaderData = {
+  documents: Document[];
+  documentTypes: DocumentType[];
+};
+
+// 添加 loader 函数
+export async function loader() {
+  try {
+    console.log('loader: 开始加载数据...');
+    
+    // 并行加载文档和文档类型
+    const [documentsResponse, typesResponse] = await Promise.all([
+      getTodayDocuments(),
+      getDocumentTypes()
+    ]);
+
+    // console.log('loader: 文档加载结果:', documentsResponse);
+    // console.log('loader: 文档类型加载结果:', typesResponse);
+
+    if (documentsResponse.error || typesResponse.error) {
+      throw new Error(documentsResponse.error || typesResponse.error);
     }
-  },
-  {
-    id: "2",
-    name: "专卖许可证申请表.docx",
-    size: 2.8 * 1024 * 1024, // 2.8MB
-    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    fileType: FileType.LICENSE,
-    priority: Priority.HIGH,
-    status: ProcessingStatus.WAITING,
-    uploadTime: "2023-10-25 14:28:45"
-  },
-  {
-    id: "3",
-    name: "XX公司违规处罚决定书.pdf",
-    size: 3.1 * 1024 * 1024, // 3.1MB
-    type: "application/pdf",
-    fileType: FileType.PUNISHMENT,
-    priority: Priority.NORMAL,
-    status: ProcessingStatus.SUCCESS,
-    uploadTime: "2023-10-25 14:15:30"
+
+    return Response.json({
+      documents: documentsResponse.data || [],
+      documentTypes: typesResponse.data || []
+    });
+  } catch (error) {
+    console.error('loader: 加载数据失败:', error);
+    return Response.json({
+      documents: [],
+      documentTypes: []
+    });
   }
-];
+}
 
 // 文件上传页面组件
 export default function FilesUpload() {
+  // 使用 useLoaderData 获取初始数据
+  const { documents, documentTypes } = useLoaderData<LoaderData>();
+  
   // 状态管理
   const [fileType, setFileType] = useState<FileType | "">("");
   const [priority, setPriority] = useState<Priority>(Priority.NORMAL);
-  const [currentFile, setCurrentFile] = useState<File | null>(null);
+  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [uploadSpeed, setUploadSpeed] = useState("0KB/s");
   const [uploadStage, setUploadStage] = useState<"idle" | "uploading" | "processing" | "completed">("idle");
@@ -303,14 +343,14 @@ export default function FilesUpload() {
   ]);
   
   // 队列文件状态
-  const [queueFiles, setQueueFiles] = useState<UploadedFile[]>(MOCK_QUEUE_FILES);
+  const [queueFiles, setQueueFiles] = useState<Document[]>(documents);
+  const [documentTypesState] = useState<DocumentType[]>(documentTypes);
   
-  // 上传完成后的文件信息
-  const [completedFile, setCompletedFile] = useState<UploadedFile | null>(null);
+  // 上传完成后的文件信息列表
+  const [completedFiles, setCompletedFiles] = useState<UploadedFile[]>([]);
   
   // 计时器引用
   const progressIntervalRef = useRef<NodeJS.Timeout | null>(null);
-  const processingIntervalRef = useRef<NodeJS.Timeout | null>(null);
   
   // UploadArea组件引用
   const uploadAreaRef = useRef<UploadAreaRef>(null);
@@ -318,69 +358,106 @@ export default function FilesUpload() {
   // 表单提交引用
   const formRef = useRef<HTMLFormElement>(null);
   
-  // 清理定时器
+  // 获取action返回的数据
+  const actionData = useActionData<ActionData>();
+  
+  // 状态检查定时器引用
+  const statusCheckIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  
+  // useEffect 处理上传队列状态检查定时器 - 只在组件卸载时清除
   useEffect(() => {
+    console.log('设置上传队列状态检查定时器');
+    
+    // 设置定时器检查队列中文件的状态
+    statusCheckIntervalRef.current = setInterval(checkQueueStatus, 10000);
+    
+    // 只在组件卸载时清除
     return () => {
-      if (progressIntervalRef.current) {
-        clearInterval(progressIntervalRef.current);
-      }
-      if (processingIntervalRef.current) {
-        clearInterval(processingIntervalRef.current);
+      console.log('组件卸载，清除上传队列状态检查定时器');
+      if (statusCheckIntervalRef.current) {
+        clearInterval(statusCheckIntervalRef.current);
+        statusCheckIntervalRef.current = null;
       }
     };
   }, []);
   
-  // 处理表单提交
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    
-    if (!currentFile || !fileType) {
-      alert('请选择文件和文件类型');
-      return;
-    }
-    
+  // 检查队列中未完成文档的状态
+  const checkQueueStatus = async () => {
     try {
-      // 设置上传状态
-      setUploadStage('uploading');
+      // console.log('开始检查队列状态，当前队列文件:', queueFiles);
       
-      // 实际上传 - 通过我们自定义的二进制上传方法
-      await startUpload(currentFile);
+      // 获取所有未完成的文档ID
+      const incompleteIds = queueFiles
+        .filter(file => file.status !== DocumentStatus.COMPLETED)
+        .map(file => file.id);
       
+      console.log('未完成的文档ID:', incompleteIds);
+      
+      if (incompleteIds.length === 0) {
+        console.log('没有未完成的文档，跳过状态检查');
+        return;
+      }
+      
+      // 获取这些文档的最新状态
+      const statusResponse = await getDocumentsStatus(incompleteIds);
+      console.log('状态检查响应:', statusResponse);
+      
+      if (statusResponse.data) {
+        // 更新队列中的文档状态
+        setQueueFiles(prevFiles => {
+          const updatedFiles = prevFiles.map(file => {
+            const updatedStatus = statusResponse.data.find(doc => doc.id === file.id);
+            if (updatedStatus) {
+              console.log(`文档 ${file.id} 状态更新: ${file.status} -> ${updatedStatus.status}`);
+              return { ...file, status: updatedStatus.status };
+            }
+            return file;
+          });
+          // console.log('更新后的队列文件:', updatedFiles);
+          return updatedFiles;
+        });
+      }
     } catch (error) {
-      console.error('提交表单错误:', error);
-      alert(`提交表单失败: ${error instanceof Error ? error.message : '未知错误'}`);
+      console.error('检查文档状态失败:', error);
     }
   };
   
   // 处理文件选择
-  const handleFilesSelected = useCallback((selectedFiles: FileList) => {
-    console.log("selectedFiles", selectedFiles);
-    if (selectedFiles.length === 0) return;
-    
-    if (!fileType) {
-      alert("请先选择文件类型");
-      // 重置文件输入框
-      if (uploadAreaRef.current) {
-        uploadAreaRef.current.resetFileInput();
+  const handleFilesSelected = (files: FileList) => {
+    if (files.length > 0) {
+      const newFiles = Array.from(files);
+      setCurrentFiles(newFiles);
+      if (fileType) {
+        startUpload(newFiles);
       }
-      return;
     }
-
-    setCurrentFile(selectedFiles[0]);
-    // 立即开始上传
-    startUpload(selectedFiles[0]);
-  }, [fileType]);
+  };
+  
+  // 处理文件类型变化
+  const handleFileTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newFileType = e.target.value as FileType;
+    setFileType(newFileType);
+    
+    // 如果已经有选中的文件，且选择了文件类型，则开始上传
+    if (currentFiles.length > 0 && newFileType) {
+      startUpload(currentFiles);
+    }
+  };
   
   // 开始上传文件
-  const startUpload = async (file: File) => {
+  const startUpload = async (files: File[]) => {
     try {
       setUploadStage("uploading");
       setUploadProgress(0);
       
+      // 计算总文件大小
+      const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+      let uploadedSize = 0;
+      
       // 更新步骤状态
       const updatedSteps = [...processingSteps];
       updatedSteps[0].status = "active";
-      updatedSteps[0].description = `正在上传文件"${file.name}"到服务器...`;
+      updatedSteps[0].description = `正在上传 ${files.length} 个文件到服务器...`;
       setProcessingSteps(updatedSteps);
       
       // 转换文件为二进制格式
@@ -391,77 +468,98 @@ export default function FilesUpload() {
         clearInterval(progressIntervalRef.current);
       }
       
+      const startTime = Date.now();
+      let lastUploadedSize = 0;
+      
       progressIntervalRef.current = setInterval(() => {
-        setUploadProgress(prev => {
-          const newProgress = prev + 2;
-          // 根据文件大小调整上传速度
-          const speedFactor = Math.min(file.size / (1024 * 1024) + 1, 5);
-          setUploadSpeed(`${Math.floor(Math.random() * 100 * speedFactor) + 50}KB/s`);
-          
-          if (newProgress >= 50) {  // 只模拟到50%，剩下的50%留给实际上传
-            if (progressIntervalRef.current) {
-              clearInterval(progressIntervalRef.current);
-            }
-            return 50;
+        const currentTime = Date.now();
+        const timeElapsed = (currentTime - startTime) / 1000; // 转换为秒
+        const currentSpeed = (uploadedSize - lastUploadedSize) / timeElapsed; // 字节/秒
+        lastUploadedSize = uploadedSize;
+        
+        // 更新上传速度显示
+        setUploadSpeed(`${formatFileSize(currentSpeed)}/s`);
+        
+        // 更新进度
+        const progress = (uploadedSize / totalSize) * 100;
+        setUploadProgress(progress);
+      }, 1000);
+      
+      // 上传所有文件
+      const uploadedFiles: UploadedFile[] = [];
+      
+      for (const file of files) {
+        // 转换文件为二进制格式
+        const binaryData = await uploadFileToBinary(file);
+        
+        // 上传文件
+        const response = await uploadFileToServer(
+          binaryData,
+          file.name,
+          file.type,
+          fileType as FileType,
+          priority
+        );
+        
+        if (!response.success || !response.result) {
+          throw new Error(response.error || "上传失败");
+        }
+        
+        // 更新已上传大小
+        uploadedSize += file.size;
+        
+        // 创建新的文件对象
+        const newFile: UploadedFile = {
+          id: response.result.id.toString(),
+          name: response.result.file_name,
+          size: response.result.file_size,
+          type: file.type,
+          fileType: fileType as FileType,
+          priority,
+          status: ProcessingStatus.PROCESSING,
+          uploadTime: getCurrentTime(),
+          processingInfo: {
+            progress: 0,
+            currentStep: 0
           }
-          
-          return newProgress;
-        });
-      }, 100);
-      
-      // 实际执行二进制转换
-      const binaryData = await uploadFileToBinary(file);
-      console.log(`文件转换为二进制完成，大小: ${binaryData.byteLength} 字节`);
-      
-      // 模拟实际上传
-      setUploadProgress(60); // 转换完成，进度到60%
-      setUploadSpeed(`${Math.floor(Math.random() * 200) + 100}KB/s`);
-      
-      console.log("开始上传文件到服务器...");
-      const response = await uploadFileToServer(
-        binaryData,
-        file.name,
-        file.type,
-        fileType as FileType,
-        priority
-      );
-      
-      if (!response.success) {
-        throw new Error(response.error || "上传失败");
+        };
+        
+        uploadedFiles.push(newFile);
       }
       
-      console.log("文件上传成功:", response);
+      // 清除进度定时器
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+      }
+      
+      // 更新上传状态
       setUploadProgress(100);
       setUploadSpeed("完成");
       
-      // 创建新的文件对象并添加到队列
-      const newFile: UploadedFile = {
-        id: `file_${Date.now()}`,
+      // 更新队列
+      const newDocuments: Document[] = uploadedFiles.map(file => ({
+        id: parseInt(file.id),
         name: file.name,
-        size: file.size,
-        type: file.type,
-        fileType: fileType as FileType,
-        priority,
-        status: ProcessingStatus.PROCESSING,
-        uploadTime: getCurrentTime(),
-        processingInfo: {
-          progress: 0,
-          currentStep: 0
-        }
-      };
+        type_id: parseInt(fileType),
+        file_size: file.size,
+        status: DocumentStatus.CUTTING,
+        created_at: new Date().toISOString()
+      }));
       
-      // 添加到队列中
-      setQueueFiles(prev => [newFile, ...prev]);
+      setQueueFiles(prev => [...newDocuments, ...prev]);
+      
+      // 设置当前文件为已上传的文件
+      setCompletedFiles(uploadedFiles);
       
       // 完成上传后开始处理流程
-      startProcessing(file);
+      startProcessing(uploadedFiles);
     } catch (error) {
       console.error("文件上传错误:", error);
       
       // 更新步骤状态为错误
       const errorSteps = [...processingSteps];
       errorSteps[0].status = "error";
-      errorSteps[0].description = `上传文件"${file.name}"失败: ${error instanceof Error ? error.message : '未知错误'}`;
+      errorSteps[0].description = `上传文件失败: ${error instanceof Error ? error.message : '未知错误'}`;
       setProcessingSteps(errorSteps);
       
       // 清除进度定时器
@@ -474,113 +572,209 @@ export default function FilesUpload() {
     }
   };
   
-  // 开始处理文件
-  const startProcessing = (file: File) => {
+  // 开始处理上传的文件
+  const startProcessing = (files: UploadedFile[]) => {
+    // 更新上传阶段
     setUploadStage("processing");
     
-    // 更新步骤状态 - 将第一步标记为完成
-    const updatedSteps = [...processingSteps];
+    // 更新步骤状态
+    const updatedSteps = processingSteps.map(step => ({...step}));
     updatedSteps[0].status = "done";
-    updatedSteps[0].description = "文件上传已完成";
+    updatedSteps[0].description = "文件已成功上传到服务器";
+    updatedSteps[1].status = "active";
+    updatedSteps[1].description = "正在转换文档格式，拆分文档内容...";
+    
     setProcessingSteps(updatedSteps);
     
-    let currentStepIndex = 1;
+    // 获取文件ID列表
+    const fileIds = files.map(file => parseInt(file.id));
     
-    if (processingIntervalRef.current) {
-      clearInterval(processingIntervalRef.current);
+    console.log('开始处理文件，设置文件处理进度定时器');
+    
+    // 清除之前的进度定时器（如果存在）
+    if (progressIntervalRef.current) {
+      clearInterval(progressIntervalRef.current);
     }
     
-    processingIntervalRef.current = setInterval(() => {
-      if (currentStepIndex >= processingSteps.length) {
-        if (processingIntervalRef.current) {
-          clearInterval(processingIntervalRef.current);
-          completeProcessing(file);
-        }
+    // 立即开始检查状态
+    checkProcessingStatus(fileIds);
+    
+    // 设置文件处理进度定时器，每10秒检查一次状态
+    progressIntervalRef.current = setInterval(() => {
+      console.log('文件处理进度定时器触发，检查文件状态');
+      checkProcessingStatus(fileIds);
+    }, 10000);
+  };
+
+  // 检查文件处理状态
+  const checkProcessingStatus = async (fileIds: number[]) => {
+    try {
+      console.log('检查文件处理状态:', fileIds);
+      
+      // 如果没有文件ID，不执行检查
+      if (!fileIds.length) {
+        console.log('没有需要检查的文件');
         return;
       }
       
-      // 更新当前步骤为活动状态
-      const updatedSteps = [...processingSteps];
-      updatedSteps[currentStepIndex].status = "active";
-      setProcessingSteps(updatedSteps);
+      // 获取文件状态
+      const response = await getDocumentsStatus(fileIds);
       
-      // 2.5秒后标记当前步骤为完成，进入下一步骤
-      setTimeout(() => {
-        const nextUpdatedSteps = [...processingSteps];
-        nextUpdatedSteps[currentStepIndex].status = "done";
+      if (response.error) {
+        console.error('获取文件状态出错:', response.error);
+        return;
+      }
+      
+      console.log('文件状态响应:', response.data);
+      
+      if (!response.data || !response.data.length) {
+        console.log('没有返回文件状态数据');
+        return;
+      }
+      
+      // 检查是否所有文件都已完成处理
+      const allCompleted = response.data.every(doc => doc.status === DocumentStatus.COMPLETED);
+      
+      // 更新步骤状态
+      if (allCompleted) {
+        console.log('所有文件处理完成，更新步骤状态为完成');
         
-        // 更新完成状态的描述
-        switch(currentStepIndex) {
-          case 1:
-            nextUpdatedSteps[currentStepIndex].description = "转换文档格式并拆分文档完成";
-            break;
-          case 2:
-            nextUpdatedSteps[currentStepIndex].description = "DeepSeek 抽取已完成";
-            break;
-          case 3:
-            nextUpdatedSteps[currentStepIndex].description = "DeepSeek 评查已完成";
-            break;
-          case 4:
-            nextUpdatedSteps[currentStepIndex].description = "审核准备已就绪";
-            break;
+        // 清除文件处理进度定时器
+        if (progressIntervalRef.current) {
+          clearInterval(progressIntervalRef.current);
+          progressIntervalRef.current = null;
+          console.log('文件处理完成，清除文件处理进度定时器');
         }
         
-        setProcessingSteps(nextUpdatedSteps);
-        currentStepIndex++;
-      }, 2000);
+        // 更新为全部完成状态
+        const completedSteps = processingSteps.map(step => ({
+          ...step,
+          status: "done" as Step["status"]
+        }));
+        
+        completedSteps[0].description = "文件已成功上传到服务器";
+        completedSteps[1].description = "文档格式转换完成，内容已拆分";
+        completedSteps[2].description = "评查点已成功抽取";
+        completedSteps[3].description = "文档评查已完成";
+        completedSteps[4].description = "文档已准备就绪，可以查看";
+        
+        setProcessingSteps(completedSteps);
+        setUploadStage("completed");
+      } else {
+        // 根据当前状态更新步骤
+        updateProcessingSteps(response.data[0].status);
+      }
       
-    }, 2500);
-  };
-  
-  // 完成处理流程
-  const completeProcessing = (file: File) => {
-    // 设置当前状态为已完成
-    setUploadStage("completed");
-    
-    // 创建完成的文件对象
-    if (file) {
-      console.log("创建完成的文件对象...");
-      const newFile: UploadedFile = {
-        id: `file_${Date.now()}`,
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        fileType: fileType as FileType,
-        priority,
-        status: ProcessingStatus.SUCCESS,
-        uploadTime: getCurrentTime()
-      };
+      // 刷新队列中的文件状态
+      updateQueueFilesStatus(response.data);
       
-      setCompletedFile(newFile);
-      console.log("完成文件设置:", newFile);
-      
-      // 添加到队列中
-      setQueueFiles(prev => [newFile, ...prev]);
-    } else {
-      console.log("没有当前文件");
+    } catch (error) {
+      console.error('检查文件处理状态出错:', error);
     }
   };
-  
-  // 重置上传状态
+
+  // 更新处理步骤状态
+  const updateProcessingSteps = (status: DocumentStatus) => {
+    console.log('更新处理步骤状态:', status);
+    
+    const updatedSteps = [...processingSteps];
+    
+    // 重置所有步骤为等待状态
+    updatedSteps.forEach(step => {
+      step.status = "waiting";
+    });
+    
+    // 第一步始终是完成的
+    updatedSteps[0].status = "done";
+    updatedSteps[0].description = "文件已成功上传到服务器";
+    
+    // 根据状态更新步骤
+    switch (status) {
+      case DocumentStatus.CUTTING:
+        updatedSteps[1].status = "active";
+        updatedSteps[1].description = "正在转换文档格式，拆分文档内容...";
+        break;
+        
+      case DocumentStatus.EXTRACTIONING:
+        updatedSteps[1].status = "done";
+        updatedSteps[1].description = "文档格式转换完成，内容已拆分";
+        updatedSteps[2].status = "active";
+        updatedSteps[2].description = "正在抽取评查点...";
+        break;
+        
+      case DocumentStatus.REVIEWING:
+        updatedSteps[1].status = "done";
+        updatedSteps[1].description = "文档格式转换完成，内容已拆分";
+        updatedSteps[2].status = "done";
+        updatedSteps[2].description = "评查点已成功抽取";
+        updatedSteps[3].status = "active";
+        updatedSteps[3].description = "正在评查文档...";
+        break;
+        
+      case DocumentStatus.COMPLETED:
+        updatedSteps[1].status = "done";
+        updatedSteps[1].description = "文档格式转换完成，内容已拆分";
+        updatedSteps[2].status = "done";
+        updatedSteps[2].description = "评查点已成功抽取";
+        updatedSteps[3].status = "done";
+        updatedSteps[3].description = "文档评查已完成";
+        updatedSteps[4].status = "done";
+        updatedSteps[4].description = "文档已准备就绪，可以查看";
+        break;
+    }
+    
+    setProcessingSteps(updatedSteps);
+  };
+
+  // 更新队列中文件的状态
+  const updateQueueFilesStatus = (updatedDocs: Document[]) => {
+    if (!updatedDocs.length) return;
+    
+    console.log('更新队列中文件状态:', updatedDocs);
+    
+    setQueueFiles(prevFiles => {
+      // 创建文件ID到状态的映射
+      const statusMap = new Map(updatedDocs.map(doc => [doc.id, doc.status]));
+      
+      // 更新队列中的文件状态
+      return prevFiles.map(file => {
+        if (statusMap.has(file.id)) {
+          return { ...file, status: statusMap.get(file.id)! };
+        }
+        return file;
+      });
+    });
+  };
+
+  // 重置上传状态 - 不清除队列状态检查定时器
   const resetUpload = () => {
+    // 清除文件处理进度定时器
+    if (progressIntervalRef.current) {
+      clearInterval(progressIntervalRef.current);
+      progressIntervalRef.current = null;
+    }
+    
+    // 重置状态
     setUploadStage("idle");
     setUploadProgress(0);
     setUploadSpeed("0KB/s");
-    setCurrentFile(null);
-    setCompletedFile(null);
+    setProcessingSteps(steps => steps.map(step => ({ ...step, status: "waiting" })));
+    setCurrentFiles([]);
+    setCompletedFiles([]);
     
     // 重置步骤状态
-    const resetSteps = processingSteps.map(step => ({
-      ...step,
-      status: "waiting" as Step["status"]
-    }));
-    resetSteps[0].description = "等待上传文件到服务器...";
-    resetSteps[1].description = "转换文档格式，拆分文档内容";
-    resetSteps[2].description = "DeepSeek 抽取中";
-    resetSteps[3].description = "DeepSeek 评查中";
-    resetSteps[4].description = "文档已准备就绪，等待审核";
+    setProcessingSteps([
+      { title: "文件上传", description: "等待上传文件到服务器...", status: "waiting" },
+      { title: "文档转换拆分", description: "转换文档格式，拆分文档内容", status: "waiting" },
+      { title: "评查点抽取", description: "DeepSeek 抽取中", status: "waiting" },
+      { title: "评查点审核", description: "DeepSeek 评查中", status: "waiting" },
+      { title: "审核准备", description: "文档已准备就绪，等待审核", status: "waiting" }
+    ]);
     
-    setProcessingSteps(resetSteps);
+    // 重置上传区域
+    if (uploadAreaRef.current) {
+      uploadAreaRef.current.resetFileInput();
+    }
   };
   
   // 获取当前时间字符串
@@ -607,89 +801,74 @@ export default function FilesUpload() {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   };
   
+  // 获取文档类型名称
+  const getDocumentTypeName = (typeId: number) => {
+    const type = documentTypesState.find(t => t.id === typeId);
+    return type ? type.name : '未知类型';
+  };
+  
   // 表格列定义
   const columns = [
     {
       title: "文件名",
       key: "name",
       width: "40%",
-      render: (_: unknown, record: UploadedFile) => (
+      render: (_: unknown, record: Document) => (
         <div className="flex items-center">
-          <i className={`${record.type.includes('pdf') ? 'ri-file-pdf-line text-red-500' : 'ri-file-word-2-line text-blue-500'} mr-2 text-lg`}></i>
+          <i className={`${record.name.includes('.pdf') ? 'ri-file-pdf-line text-red-500' : 'ri-file-word-2-line text-blue-500'} mr-2 text-lg`}></i>
           <span className="truncate">{record.name}</span>
         </div>
       )
     },
     {
       title: "文件类型",
-      key: "fileType",
+      key: "type_id",
       width: "15%",
-      render: (_: unknown, record: UploadedFile) => {
-        let typeClass = "";
-        let typeIcon = "";
-        
-        switch(record.fileType) {
-          case FileType.CONTRACT:
-            typeClass = "file-type-contract";
-            typeIcon = "ri-file-list-3-line";
-            break;
-          case FileType.LICENSE:
-            typeClass = "file-type-license";
-            typeIcon = "ri-vip-crown-line";
-            break;
-          case FileType.PUNISHMENT:
-            typeClass = "file-type-punishment";
-            typeIcon = "ri-scales-line";
-            break;
-          default:
-            typeClass = "file-type-contract";
-            typeIcon = "ri-file-list-3-line";
-        }
-        
+      render: (_: unknown, record: Document) => {
+        const typeName = getDocumentTypeName(record.type_id);
         return (
-          <span className={`file-type-badge ${typeClass}`}>
-            <i className={typeIcon}></i>
-            {FILE_TYPE_LABELS[record.fileType]}
+          <span className="file-type-badge">
+            {typeName}
           </span>
         );
       }
     },
     {
       title: "大小",
-      key: "size",
+      key: "file_size",
       width: "15%",
-      render: (_: unknown, record: UploadedFile) => formatFileSize(record.size)
+      render: (_: unknown, record: Document) => formatFileSize(record.file_size)
     },
     {
       title: "状态",
       key: "status",
       width: "15%",
-      render: (_: unknown, record: UploadedFile) => {
+      render: (_: unknown, record: Document) => {
         let statusClass = "";
         let statusIcon = "";
         let statusText = "";
         
         switch(record.status) {
-          case ProcessingStatus.WAITING:
-            statusClass = "status-waiting";
-            statusIcon = "ri-time-line";
-            statusText = "等待中";
-            break;
-          case ProcessingStatus.PROCESSING:
+          case DocumentStatus.CUTTING:
             statusClass = "status-processing";
             statusIcon = "ri-loader-4-line";
-            statusText = "解析中";
+            statusText = "转换中";
             break;
-          case ProcessingStatus.SUCCESS:
+          case DocumentStatus.EXTRACTIONING:
+            statusClass = "status-processing";
+            statusIcon = "ri-loader-4-line";
+            statusText = "抽取中";
+            break;
+          case DocumentStatus.REVIEWING:
+            statusClass = "status-processing";
+            statusIcon = "ri-loader-4-line";
+            statusText = "审核中";
+            break;
+          case DocumentStatus.COMPLETED:
             statusClass = "status-success";
             statusIcon = "ri-checkbox-circle-line";
             statusText = "已完成";
             break;
-          case ProcessingStatus.ERROR:
-            statusClass = "status-error";
-            statusIcon = "ri-error-warning-line";
-            statusText = "失败";
-            break;
         }
         
         return (
@@ -704,12 +883,11 @@ export default function FilesUpload() {
       title: "操作",
       key: "operation",
       width: "15%",
-      render: (_: unknown, record: UploadedFile) => (
+      render: (_: unknown, record: Document) => (
         <Button 
-          className={record.status !== ProcessingStatus.SUCCESS ? "" : "hover:border-green-700 hover:text-green-700"}
           type="default" 
           size="small" 
-          disabled={record.status !== ProcessingStatus.SUCCESS}
+          disabled={record.status !== DocumentStatus.COMPLETED}
           icon="ri-eye-line"
           onClick={() => alert(`查看文件详情: ${record.name}`)}
         >
@@ -727,7 +905,7 @@ export default function FilesUpload() {
       </div>
       
       {/* 文件类型选择和上传表单 */}
-      <Form method="post" encType="multipart/form-data" onSubmit={handleSubmit} ref={formRef}>
+      <Form method="post" encType="multipart/form-data" ref={formRef}>
         {/* 文件类型选择 */}
         <Card title={<h3>选择文件类型</h3>} className="mb-4">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -736,9 +914,9 @@ export default function FilesUpload() {
               <select 
                 id="file-type-select"
                 name="fileType"
-                className="form-select" 
+                className={`form-select ${actionData?.errors?.fileType ? 'border-red-500' : ''}`} 
                 value={fileType}
-                onChange={(e) => setFileType(e.target.value as FileType)}
+                onChange={handleFileTypeChange}
                 disabled={uploadStage !== "idle"}
               >
                 <option value="">请选择文件类型</option>
@@ -747,6 +925,11 @@ export default function FilesUpload() {
                 <option value={FileType.PUNISHMENT}>{FILE_TYPE_LABELS[FileType.PUNISHMENT]}</option>
                 <option value={FileType.OTHER}>{FILE_TYPE_LABELS[FileType.OTHER]}</option>
               </select>
+              
+              {actionData?.errors?.fileType && (
+                <div className="text-red-500 text-sm mt-1">{actionData.errors.fileType}</div>
+              )}
+              
               <div className="form-tip">不同类型的文档将应用不同的审核规则</div>
             </div>
             <div className="form-group">
@@ -776,7 +959,7 @@ export default function FilesUpload() {
               <UploadArea 
                 ref={uploadAreaRef}
                 onFilesSelected={handleFilesSelected}
-                multiple={false}
+                multiple={true}
                 accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                 tipText="支持单个或批量上传，文件格式：PDF、Word、Excel、图片"
                 shouldPreventFileSelect={!fileType}
@@ -785,10 +968,10 @@ export default function FilesUpload() {
           )}
           
           {/* 上传进度显示 */}
-          {uploadStage !== "completed" && currentFile && (
+          {uploadStage !== "completed" && currentFiles.length > 0 && (
             <FileProgress
-              fileName={currentFile.name}
-              fileSize={formatFileSize(currentFile.size)}
+              fileName={`${currentFiles.length}个文件`}
+              fileSize={formatFileSize(currentFiles.reduce((sum, file) => sum + file.size, 0))}
               progress={uploadProgress}
               speed={uploadSpeed}
             />
@@ -801,9 +984,73 @@ export default function FilesUpload() {
             </div>
           )}
           
-          {/* 完成后的文件信息 */}
-          {uploadStage === "completed" && completedFile && (
+          {/* 文件信息显示 - 上传完成后显示 */}
+          {uploadStage !== "idle" && completedFiles.length > 0 && (
+            <div className="file-info-grid">
+              <div>
+                <h4 className="font-medium mb-3">文件信息</h4>
+                <div className="space-y-4">
+                  {completedFiles.map((file) => (
+                    <div key={file.id} className="bg-white p-4 rounded-md border border-gray-200">
+                      <ul className="file-info-list">
+                        <li className="file-info-item">
+                          <span className="file-info-label">文件名：</span>
+                          <span className="file-info-value">{file.name}</span>
+                        </li>
+                        <li className="file-info-item">
+                          <span className="file-info-label">文件大小：</span>
+                          <span className="file-info-value">{formatFileSize(file.size)}</span>
+                        </li>
+                        <li className="file-info-item">
+                          <span className="file-info-label">上传时间：</span>
+                          <span className="file-info-value">{file.uploadTime}</span>
+                        </li>
+                        <li className="file-info-item">
+                          <span className="file-info-label">文件类型：</span>
+                          <span className="file-info-value">{FILE_TYPE_LABELS[file.fileType]}</span>
+                        </li>
+                        <li className="file-info-item">
+                          <span className="file-info-label">审核规则：</span>
+                          <span className="file-info-value">系统自动选择</span>
+                        </li>
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              
+              <div>
+                <h4 className="font-medium mb-3">解析结果预览</h4>
+                <div className="bg-gray-50 p-3 rounded-md border border-gray-200">
+                  <p className="text-gray-500 text-sm">解析结果将在文件处理完成后显示</p>
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* 上传新文件按钮 - 上传完成后显示 */}
+          {uploadStage !== "idle" && (
             <div className="mt-6">
+              <Button 
+                type="default" 
+                icon="ri-refresh-line"
+                onClick={() => {
+                  // 清除所有定时器
+                  if (progressIntervalRef.current) {
+                    clearInterval(progressIntervalRef.current);
+                  }
+                  // 重置状态
+                  resetUpload();
+                }}
+              >
+                上传新文件
+              </Button>
+            </div>
+          )}
+          
+          {/* 处理完成后的成功提示和查看按钮 - 仅在全部处理完成时显示 */}
+          {uploadStage === "completed" && (
+            <div className="mt-4">
               <div className="bg-green-50 p-4 rounded-md mb-4 border border-green-100">
                 <div className="flex items-center text-green-800 mb-2">
                   <i className="ri-checkbox-circle-line text-xl mr-2"></i>
@@ -812,74 +1059,13 @@ export default function FilesUpload() {
                 <p className="text-sm text-green-700">文件已成功上传并评查完成，请查看结果</p>
               </div>
               
-              <div className="file-info-grid">
-                <div>
-                  <h4 className="font-medium mb-3">文件信息</h4>
-                  <ul className="file-info-list">
-                    <li className="file-info-item">
-                      <span className="file-info-label">文件名：</span>
-                      <span className="file-info-value">{completedFile.name}</span>
-                    </li>
-                    <li className="file-info-item">
-                      <span className="file-info-label">文件大小：</span>
-                      <span className="file-info-value">{formatFileSize(completedFile.size)}</span>
-                    </li>
-                    <li className="file-info-item">
-                      <span className="file-info-label">上传时间：</span>
-                      <span className="file-info-value">{completedFile.uploadTime}</span>
-                    </li>
-                    <li className="file-info-item">
-                      <span className="file-info-label">文件类型：</span>
-                      <span className="file-info-value">{FILE_TYPE_LABELS[completedFile.fileType]}</span>
-                    </li>
-                    <li className="file-info-item">
-                      <span className="file-info-label">审核规则：</span>
-                      <span className="file-info-value">系统自动选择</span>
-                    </li>
-                  </ul>
-                </div>
-                
-                <div>
-                  <h4 className="font-medium mb-3">解析结果预览</h4>
-                  <div className="bg-gray-50 p-3 rounded-md border border-gray-200">
-                    <div className="mb-2">
-                      <span className="text-gray-500 text-sm">合同编号：</span>
-                      <span className="pulse-animation">XS-2023-1025-001</span>
-                    </div>
-                    <div className="mb-2">
-                      <span className="text-gray-500 text-sm">合同名称：</span>
-                      <span className="pulse-animation">烟草制品销售合同</span>
-                    </div>
-                    <div className="mb-2">
-                      <span className="text-gray-500 text-sm">签约日期：</span>
-                      <span className="pulse-animation">2023年10月20日</span>
-                    </div>
-                    <div className="mb-2">
-                      <span className="text-gray-500 text-sm">合同金额：</span>
-                      <span className="pulse-animation">¥ 1,580,000.00</span>
-                    </div>
-                    <div>
-                      <span className="text-gray-500 text-sm">当事人：</span>
-                      <span className="pulse-animation">甲方：XX烟草公司，乙方：YY贸易有限公司</span>
-                    </div>
-                  </div>
-                  
-                  <div className="mt-4 flex justify-between">
-                    <Button 
-                      type="default" 
-                      icon="ri-refresh-line"
-                      onClick={resetUpload}
-                    >
-                      上传新文件
-                    </Button>
-                    <Button 
-                      type="primary" 
-                      icon="ri-file-search-line"
-                    >
-                      查看详情并审核
-                    </Button>
-                  </div>
-                </div>
+              <div className="flex justify-end">
+                <Button 
+                  type="primary" 
+                  icon="ri-file-search-line"
+                >
+                  查看详情并审核
+                </Button>
               </div>
             </div>
           )}
@@ -891,7 +1077,7 @@ export default function FilesUpload() {
         title={
           <div className="flex justify-between items-center">
             <h3>上传队列</h3>
-            <span className="text-gray-500 text-sm">共 {queueFiles.length} 个文件</span>
+            <span className="text-gray-500 text-sm">共 {queueFiles.length > 0 ? queueFiles.length : 0} 个文件</span>
           </div>
         }
       >
diff --git a/app/routes/prompts._index.tsx b/app/routes/prompts._index.tsx
index 1bbebde..017d6fc 100644
--- a/app/routes/prompts._index.tsx
+++ b/app/routes/prompts._index.tsx
@@ -1,11 +1,13 @@
-import { MetaFunction } from "@remix-run/node";
-import { useSearchParams, useNavigate } from "@remix-run/react";
+import { MetaFunction, json, type LoaderFunctionArgs } from "@remix-run/node";
+import { useSearchParams, useNavigate, useLoaderData } from "@remix-run/react";
+import { useState } from "react";
 import indexStyles from "~/styles/pages/prompts_index.css?url";
 import { Card } from "~/components/ui/Card";
 import { Button } from "~/components/ui/Button";
 import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
 import { Table } from "~/components/ui/Table";
 import { Pagination } from "~/components/ui/Pagination";
+import { getPromptTemplates, deletePromptTemplate, type PromptTemplateUI } from "~/api/prompts/prompts";
 
 // 定义提示词模板类型
 export interface PromptTemplate {
@@ -33,123 +35,61 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-
-// 模拟数据
-const MOCK_TEMPLATES: PromptTemplate[] = [
-  {
-    id: "1",
-    template_name: "行政处罚-抽取通用模板",
-    template_type: "Extraction",
-    description: "本模板用于抽取行政处罚决定书编号等信息",
-    version: "v1.0",
-    status: "system",
-    created_by: "system",
-    template_content: `你是一个专业的文档信息抽取助手。请从以下{docType}文档中抽取关键信息:
-1. 处罚决定书编号
-2. 处罚对象名称
-3. 处罚事由
-4. 处罚依据
-5. 处罚内容
-6. 处罚金额
-7. 发文日期
-请将结果以JSON格式输出，包含以上字段。如果某个字段在文档中未找到，则该字段的值设为null。`,
-    variables: JSON.stringify({ "docType": "文档类型" })
-  },
-  {
-    id: "2",
-    template_name: "销售合同-甲方信息评估",
-    template_type: "Evaluation",
-    description: "评估销售合同中甲方信息是否完整",
-    version: "v1.2",
-    status: "active",
-    created_by: "admin",
-    template_content: `你是一个专业的合同审核助手。请评估以下{docType}中甲方信息的完整性:
-请检查以下要素是否存在且完整:
-1. 甲方全称
-2. 注册地址
-3. 统一社会信用代码
-4. 法定代表人
-5. 联系方式
-请给出评估结果，并标明缺失或不完整的信息。`,
-    variables: JSON.stringify({ "docType": "文档类型" })
-  },
-  {
-    id: "3",
-    template_name: "专卖许可证-摘要模板",
-    template_type: "Summary",
-    description: "生成专卖许可证申请文件的内容摘要",
-    version: "v1.0",
-    status: "active",
-    created_by: "admin",
-    template_content: `你是一个专业的文档摘要助手。请为以下{docType}生成一份简洁的摘要:
-摘要应包含以下要点:
-1. 申请人基本信息
-2. 许可证类型
-3. 申请事项
-4. 经营范围
-5. 申请日期
-请控制摘要在200字以内，保留关键信息。`,
-    variables: JSON.stringify({ "docType": "文档类型" })
-  },
-  {
-    id: "4",
-    template_name: "采购合同-乙方资质抽取",
-    template_type: "Extraction",
-    description: "抽取采购合同中乙方的资质信息",
-    version: "v1.1",
-    status: "inactive",
-    created_by: "zhangsan",
-    template_content: `你是一个专业的合同信息抽取助手。请从以下{docType}中抽取乙方的资质信息:
-需要抽取的信息包括:
-1. 乙方全称
-2. 资质证书类型
-3. 资质证书编号
-4. 资质等级
-5. 证书有效期
-请将结果以JSON格式输出，包含以上字段。`,
-    variables: JSON.stringify({ "docType": "文档类型" })
-  },
-  {
-    id: "5",
-    template_name: "合同通用-关键条款评估",
-    template_type: "Evaluation",
-    description: "评估合同中关键条款是否明确、合规",
-    version: "v2.0",
-    status: "active",
-    created_by: "lisi",
-    template_content: `你是一个专业的{industry}行业合同审核助手。请评估以下合同中的关键条款是否明确、合规:
-请重点关注以下条款:
-1. 合同标的
-2. 价格条款
-3. 付款条件
-4. 交付方式
-5. 违约责任
-6. 争议解决
-请对每一项给出评估结果，并指出不明确或存在风险的条款。`,
-    variables: JSON.stringify({ "industry": "行业类型", "docType": "文档类型" })
-  }
-];
+// 定义加载器返回数据类型
+interface LoaderData {
+  templates: PromptTemplateUI[];
+  total: number;
+  pageSize: number;
+  currentPage: number;
+  error?: string;
+}
 
 // 数据加载器
-export async function loader() {
+export async function loader({ request }: LoaderFunctionArgs) {
   try {
-    // 实际应用中，这里应该调用API获取数据
-    // const response = await fetch(`${process.env.API_BASE_URL}/api/prompt-templates`);
-    // if (!response.ok) throw new Error(`获取提示词模板失败: ${response.status}`);
-    // const templates = await response.json();
+    const url = new URL(request.url);
+    const name = url.searchParams.get('name') || undefined;
+    const type = url.searchParams.get('type') || undefined;
+    const status = url.searchParams.get('status') || undefined;
+    const page = parseInt(url.searchParams.get('page') || '1', 10);
+    const pageSize = parseInt(url.searchParams.get('pageSize') || '10', 10);
     
-    // 使用模拟数据
-    const templates = MOCK_TEMPLATES;
+    console.log('加载提示词模板参数:', { name, type, status, page, pageSize });
     
-    return Response.json({ 
-      templates,
-      total: templates.length,
-      pageSize: 10,
-      currentPage: 1
+    // 从 API 获取数据
+    const result = await getPromptTemplates({
+      name,
+      type,
+      status,
+      page,
+      pageSize
+    });
+    
+    if (result.error) {
+      console.error('获取提示词模板失败:', result.error);
+      return json<LoaderData>(
+        { 
+          templates: [],
+          total: 0,
+          pageSize,
+          currentPage: page,
+          error: result.error
+        },
+        { status: result.status || 500 }
+      );
+    }
+    
+    console.log(`成功加载${result.data?.templates.length || 0}条提示词模板数据`);
+    
+    return json<LoaderData>({ 
+      templates: result.data?.templates || [],
+      total: result.data?.total || 0,
+      pageSize,
+      currentPage: page
     });
   } catch (error) {
     console.error("加载提示词模板失败:", error);
-    return Response.json(
+    return json<LoaderData>(
       { 
         templates: [],
         total: 0,
@@ -166,6 +106,8 @@ export async function loader() {
 export default function PromptsIndex() {
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { templates, total, currentPage, pageSize, error } = useLoaderData<typeof loader>();
+  const [isLoading, setIsLoading] = useState(false);
   
   // 处理搜索名称
   const handleNameSearch = (value: string) => {
@@ -210,6 +152,12 @@ export default function PromptsIndex() {
     setSearchParams(new URLSearchParams());
   };
   
+  // 处理搜索按钮点击
+  // const handleSearch = () => {
+  //   // 搜索已经由 URL 参数变化触发，这里不需要额外操作
+  //   console.log('搜索参数:', Object.fromEntries(searchParams.entries()));
+  // };
+  
   // 查看模板详情
   const handleViewTemplate = (id: string) => {
     navigate(`/prompts/new?id=${id}&mode=view`);
@@ -228,23 +176,48 @@ export default function PromptsIndex() {
   };
   
   // 删除模板
-  const handleDeleteTemplate = (id: string) => {
+  const handleDeleteTemplate = async (id: string) => {
     if (confirm('确定要删除该模板吗？删除后无法恢复。')) {
-      // 实际应该调用API删除数据
-      console.log('删除模板ID:', id);
-      alert('删除成功！');
-      // 刷新页面
-      window.location.reload();
+      setIsLoading(true);
+      try {
+        const result = await deletePromptTemplate(id);
+        if (result.error) {
+          alert(`删除失败: ${result.error}`);
+        } else {
+          alert('删除成功！');
+          // 刷新页面
+          window.location.reload();
+        }
+      } catch (error) {
+        alert(`删除失败: ${error instanceof Error ? error.message : '未知错误'}`);
+      } finally {
+        setIsLoading(false);
+      }
     }
   };
 
+  // 处理分页
+  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 columns = [
     {
       title: "模板名称",
       key: "template_name",
       width: "300px",
-      render: (_: unknown, record: PromptTemplate) => (
+      render: (_: unknown, record: PromptTemplateUI) => (
         <div className="flex items-center">
           <i className="ri-file-list-line text-primary mr-2"></i>
           <span className="truncate">{record.template_name}</span>
@@ -255,7 +228,7 @@ export default function PromptsIndex() {
       title: "类型",
       key: "template_type",
       width: "100px",
-      render: (_: unknown, record: PromptTemplate) => {
+      render: (_: unknown, record: PromptTemplateUI) => {
         let typeText = '';
         let typeClass = '';
         
@@ -284,7 +257,7 @@ export default function PromptsIndex() {
     {
       title: "描述",
       key: "description",
-      render: (_: unknown, record: PromptTemplate) => (
+      render: (_: unknown, record: PromptTemplateUI) => (
         <div className="text-secondary text-sm truncate max-w-xs" title={record.description}>
           {record.description}
         </div>
@@ -294,13 +267,13 @@ export default function PromptsIndex() {
       title: "版本",
       key: "version",
       width: "80px",
-      render: (_: unknown, record: PromptTemplate) => record.version
+      render: (_: unknown, record: PromptTemplateUI) => record.version
     },
     {
       title: "状态",
       key: "status",
       width: "80px",
-      render: (_: unknown, record: PromptTemplate) => {
+      render: (_: unknown, record: PromptTemplateUI) => {
         let statusText = '';
         let statusClass = '';
         
@@ -326,14 +299,15 @@ export default function PromptsIndex() {
       title: "创建者",
       key: "created_by",
       width: "100px",
-      render: (_: unknown, record: PromptTemplate) => record.created_by
+      render: (_: unknown, record: PromptTemplateUI) => (
+        <span className="text-secondary">用户 {record.created_by}</span>
+      )
     },
     {
       title: "操作",
       key: "operation",
       width: "150px",
-      // align: "center",
-      render: (_: unknown, record: PromptTemplate) => (
+      render: (_: unknown, record: PromptTemplateUI) => (
         <div>
           {record.status === 'system' ? (
             <>
@@ -361,6 +335,7 @@ export default function PromptsIndex() {
               <button
                 className="operation-btn text-error"
                 onClick={() => handleDeleteTemplate(record.id)}
+                disabled={isLoading}
               >
                 <i className="ri-delete-bin-line"></i> 删除
               </button>
@@ -400,12 +375,13 @@ export default function PromptsIndex() {
             >
               重置
             </Button>
-            <Button 
+            {/* <Button 
               type="primary" 
               icon="ri-search-line"
+              onClick={handleSearch}
             >
               搜索
-            </Button>
+            </Button> */}
           </>
         }
         noActionDivider={true}
@@ -424,7 +400,6 @@ export default function PromptsIndex() {
           name="type"
           value={searchParams.get('type') || ''}
           options={[
-            // { value: "", label: "全部" },
             { value: "Extraction", label: "抽取(Extraction)" },
             { value: "Evaluation", label: "评估(Evaluation)" },
             { value: "Summary", label: "摘要(Summary)" },
@@ -439,7 +414,6 @@ export default function PromptsIndex() {
           name="status"
           value={searchParams.get('status') || ''}
           options={[
-            // { value: "", label: "全部" },
             { value: "active", label: "启用" },
             { value: "inactive", label: "停用" },
             { value: "system", label: "系统预设" }
@@ -449,27 +423,34 @@ export default function PromptsIndex() {
         />
       </FilterPanel>
       
+      {/* 错误信息 */}
+      {error && (
+        <div className="error-alert mb-4 p-4 bg-red-50 text-red-700 rounded-md">
+          <i className="ri-error-warning-line mr-2"></i> {error}
+        </div>
+      )}
+      
       {/* 数据表格 */}
       <Card bodyClassName="px-4 py-4">
         <Table
           columns={columns}
-          dataSource={MOCK_TEMPLATES}
+          dataSource={templates}
           rowKey="id"
           emptyText="暂无提示词模板数据"
+          loading={isLoading}
         />
         
         {/* 分页 */}
         <Pagination
-          currentPage={1}
-          total={MOCK_TEMPLATES.length}
-          pageSize={10}
-          onChange={(page) => {
-            const newParams = new URLSearchParams(searchParams);
-            newParams.set('page', page.toString());
-            setSearchParams(newParams);
-          }}
-          showTotal={true}
-        />
+            currentPage={currentPage}
+            total={total}
+            pageSize={pageSize}
+            onChange={handlePageChange}
+            onPageSizeChange={handlePageSizeChange}
+            showTotal={true}
+            showPageSizeChanger={true}
+            pageSizeOptions={[10, 20, 30, 50]}
+          />
       </Card>
     </div>
   );
diff --git a/app/routes/prompts.new.tsx b/app/routes/prompts.new.tsx
index d1953d4..313a014 100644
--- a/app/routes/prompts.new.tsx
+++ b/app/routes/prompts.new.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { MetaFunction, LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";
-import { Link, useLoaderData, useSubmit, useNavigation } from "@remix-run/react";
+import { MetaFunction, LoaderFunctionArgs, ActionFunctionArgs, json, redirect } from "@remix-run/node";
+import { Link, useLoaderData, useNavigation, useActionData, Form } from "@remix-run/react";
 import { Button } from "~/components/ui/Button";
-import { PromptTemplate } from "./prompts._index";
 import newStyles from "~/styles/pages/prompts_new.css?url";
+import { getPromptTemplate, createPromptTemplate, updatePromptTemplate, type PromptTemplateUI } from "~/api/prompts/prompts";
 
 // 样式链接
 export function links() {
@@ -32,111 +32,34 @@ export const handle = {
 };
 
 interface LoaderData {
-  template: PromptTemplate;
+  template: PromptTemplateUI | null;
   mode: string;
+  error?: string;
 }
 
-// 从模拟数据中获取模板
-const getTemplateById = (id: string): PromptTemplate | undefined => {
-  // 与prompts._index.tsx中的模拟数据保持一致
-  const MOCK_TEMPLATES: PromptTemplate[] = [
-    {
-      id: "1",
-      template_name: "行政处罚-抽取通用模板",
-      template_type: "Extraction",
-      description: "本模板用于抽取行政处罚决定书编号等信息",
-      version: "v1.0",
-      status: "system",
-      created_by: "system",
-      template_content: `你是一个专业的文档信息抽取助手。请从以下{docType}文档中抽取关键信息:
-1. 处罚决定书编号
-2. 处罚对象名称
-3. 处罚事由
-4. 处罚依据
-5. 处罚内容
-6. 处罚金额
-7. 发文日期
-请将结果以JSON格式输出，包含以上字段。如果某个字段在文档中未找到，则该字段的值设为null。`,
-      variables: JSON.stringify({ "docType": "文档类型" })
-    },
-    {
-      id: "2",
-      template_name: "销售合同-甲方信息评估",
-      template_type: "Evaluation",
-      description: "评估销售合同中甲方信息是否完整",
-      version: "v1.2",
-      status: "active",
-      created_by: "admin",
-      template_content: `你是一个专业的合同审核助手。请评估以下{docType}中甲方信息的完整性:
-请检查以下要素是否存在且完整:
-1. 甲方全称
-2. 注册地址
-3. 统一社会信用代码
-4. 法定代表人
-5. 联系方式
-请给出评估结果，并标明缺失或不完整的信息。`,
-      variables: JSON.stringify({ "docType": "文档类型" })
-    },
-    {
-      id: "3",
-      template_name: "专卖许可证-摘要模板",
-      template_type: "Summary",
-      description: "生成专卖许可证申请文件的内容摘要",
-      version: "v1.0",
-      status: "active",
-      created_by: "admin",
-      template_content: `你是一个专业的文档摘要助手。请为以下{docType}生成一份简洁的摘要:
-摘要应包含以下要点:
-1. 申请人基本信息
-2. 许可证类型
-3. 申请事项
-4. 经营范围
-5. 申请日期
-请控制摘要在200字以内，保留关键信息。`,
-      variables: JSON.stringify({ "docType": "文档类型" })
-    },
-    {
-      id: "4",
-      template_name: "采购合同-乙方资质抽取",
-      template_type: "Extraction",
-      description: "抽取采购合同中乙方的资质信息",
+// 定义本地表单数据接口
+interface FormDataState extends Omit<PromptTemplateUI, 'variables'> {
+  variables: string; // 在表单状态中我们保存变量为 JSON 字符串
+}
 
-      version: "v1.1",
-      status: "inactive",
-      created_by: "zhangsan",
-      template_content: `你是一个专业的合同信息抽取助手。请从以下{docType}中抽取乙方的资质信息:
-需要抽取的信息包括:
-1. 乙方全称
-2. 资质证书类型
-3. 资质证书编号
-4. 资质等级
-5. 证书有效期
-请将结果以JSON格式输出，包含以上字段。`,
-      variables: JSON.stringify({ "docType": "文档类型" })
-    },
-    {
-      id: "5",
-      template_name: "合同通用-关键条款评估",
-      template_type: "Evaluation",
-      description: "评估合同中关键条款是否明确、合规",
-      version: "v2.0",
-      status: "active",
-      created_by: "lisi",
-      template_content: `你是一个专业的{industry}行业合同审核助手。请评估以下合同中的关键条款是否明确、合规:
-请重点关注以下条款:
-1. 合同标的
-2. 价格条款
-3. 付款条件
-4. 交付方式
-5. 违约责任
-6. 争议解决
-请对每一项给出评估结果，并指出不明确或存在风险的条款。`,
-      variables: JSON.stringify({ "industry": "行业类型", "docType": "文档类型" })
-    }
-  ];
-  
-  return MOCK_TEMPLATES.find(t => t.id === id);
-};
+interface ActionData {
+  success?: boolean;
+  errors?: {
+    template_name?: string;
+    template_type?: string;
+    template_content?: string;
+    general?: string;
+  };
+  formData?: {
+    template_name: string;
+    template_type: "Extraction" | "Evaluation" | "Summary" | "Common";
+    description: string;
+    template_content: string;
+    variables: string;
+    status: "active" | "inactive" | "system";
+    version: string;
+  };
+}
 
 // 加载函数
 export async function loader({ request }: LoaderFunctionArgs) {
@@ -149,25 +72,27 @@ export async function loader({ request }: LoaderFunctionArgs) {
     let template = null;
     
     if (id) {
-      // 实际应用中，这里应该调用API获取数据
-      // const response = await fetch(`${process.env.API_BASE_URL}/api/prompt-templates/${id}`);
-      // if (!response.ok) throw new Error(`获取提示词模板失败: ${response.status}`);
-      // template = await response.json();
+      // 从API获取数据
+      const result = await getPromptTemplate(id);
       
-      // 使用模拟数据
-      template = getTemplateById(id);
+      if (result.error) {
+        console.error('获取提示词模板失败:', result.error);
+        throw new Error(result.error);
+      }
+      
+      template = result.data || null;
       if (!template) {
         throw new Error(`未找到ID为${id}的模板`);
       }
     }
     
-    return Response.json({
+    return json<LoaderData>({
       template,
       mode
     });
   } catch (error) {
     console.error("加载提示词模板失败:", error);
-    return Response.json(
+    return json<LoaderData>(
       { 
         template: null,
         mode: "create",
@@ -180,69 +105,102 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 // Action函数 - 处理表单提交
 export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const id = formData.get("id") as string;
+  const template_name = formData.get("template_name") as string;
+  const template_type = formData.get("template_type") as "Extraction" | "Evaluation" | "Summary" | "Common";
+  const description = formData.get("description") as string;
+  const template_content = formData.get("template_content") as string;
+  const variables = formData.get("variables") as string;
+  const status = formData.get("status") as string;
+  const version = formData.get("version") as string;
+
+  const errors: ActionData["errors"] = {};
+
+  // 表单验证
+  if (!template_name || template_name.trim() === "") {
+    errors.template_name = "模板名称不能为空";
+  }
+
+  if (!template_type) {
+    errors.template_type = "请选择模板类型";
+  }
+
+  if (!template_content || template_content.trim() === "") {
+    errors.template_content = "模板内容不能为空";
+  }
+
+  if (Object.keys(errors).length > 0) {
+    return json({ errors });
+  }
+
   try {
-    const formData = await request.formData();
-    const templateData = Object.fromEntries(formData);
-    
-    // 表单验证
-    const errors: Record<string, string> = {};
-    
-    if (!templateData.template_name) {
-      errors.template_name = "模板名称不能为空";
-    }
-    
-    if (!templateData.template_type) {
-      errors.template_type = "请选择模板类型";
-    }
-    
-    if (!templateData.template_content) {
-      errors.template_content = "模板内容不能为空";
-    }
-    
-    if (Object.keys(errors).length > 0) {
-      return Response.json({ errors, success: false }, { status: 400 });
-    }
-    
-    // 实际应用中，这里应该调用API保存数据
-    // const apiUrl = templateData.id
-    //   ? `${process.env.API_BASE_URL}/api/prompt-templates/${templateData.id}`
-    //   : `${process.env.API_BASE_URL}/api/prompt-templates`;
-    // 
-    // const response = await fetch(apiUrl, {
-    //   method: templateData.id ? "PUT" : "POST",
-    //   headers: { "Content-Type": "application/json" },
-    //   body: JSON.stringify(templateData)
-    // });
-    // 
-    // if (!response.ok) throw new Error(`保存提示词模板失败: ${response.status}`);
-    // const result = await response.json();
-    
-    // 模拟API响应
-    console.log("提交的模板数据:", templateData);
-    
-    return Response.json({
-      success: true,
-      message: "提示词模板保存成功",
-      template: {
-        ...templateData,
-        id: templateData.id || Math.random().toString(36).substring(2, 10),
-        created_by: "当前用户",
-        created_at: new Date().toISOString()
+    // 准备变量数据
+    let variablesData: Record<string, string> = {};
+    try {
+      if (variables) {
+        variablesData = JSON.parse(variables);
       }
-    });
+    } catch (e) {
+      console.error('解析变量JSON失败:', e);
+    }
+
+    // 准备API数据
+    const apiTemplate: Partial<PromptTemplateUI> = {
+      template_name,
+      template_type,
+      description,
+      template_content,
+      variables: variablesData,
+      status: status === "active" ? "active" : "inactive",
+      version: version || "v1.0"
+    };
+
+    let result;
+    if (id) {
+      // 更新模板
+      result = await updatePromptTemplate(id, apiTemplate);
+    } else {
+      // 创建模板
+      result = await createPromptTemplate(apiTemplate);
+    }
+
+    if (result.error) {
+      return json({ 
+        errors: { general: result.error },
+        formData: {
+          template_name,
+          template_type,
+          description,
+          template_content,
+          variables,
+          status,
+          version
+        }
+      });
+    }
+
+    return redirect("/prompts");
   } catch (error) {
     console.error("保存提示词模板失败:", error);
-    return Response.json(
-      { 
-        success: false, 
-        message: error instanceof Error ? error.message : "保存提示词模板失败" 
+    return json({ 
+      errors: { 
+        general: error instanceof Error ? error.message : "保存提示词模板失败" 
       },
-      { status: 500 }
-    );
+      formData: {
+        template_name,
+        template_type,
+        description,
+        template_content,
+        variables,
+        status,
+        version
+      }
+    });
   }
 }
 
-// 提取变量函数
+// 提取变量函数 例如：{var1} {var2} {var3}
 const extractVariables = (content: string) => {
   const regex = /{([^{}]+)}/g;
   const variables: Record<string, string> = {};
@@ -260,13 +218,13 @@ const extractVariables = (content: string) => {
 
 // 页面组件
 export default function PromptsNew() {
-  const { template, mode } = useLoaderData<typeof loader>();
-  const submit = useSubmit();
+  const { template, mode, error } = useLoaderData<typeof loader>();
+  const actionData = useActionData<ActionData>();
   const navigation = useNavigation();
   const isSubmitting = navigation.state === "submitting";
   
   // 表单状态
-  const [formData, setFormData] = useState<Partial<PromptTemplate>>({
+  const [formData, setFormData] = useState<FormDataState>({
     id: "",
     template_name: "",
     template_type: "Common",
@@ -274,7 +232,10 @@ export default function PromptsNew() {
     version: "v1.0",
     status: "active",
     template_content: "",
-    variables: "{}"
+    created_by: 1,
+    variables: "{}",
+    created_at: "",
+    updated_at: ""
   });
   
   // 模式状态
@@ -282,43 +243,57 @@ export default function PromptsNew() {
   const [pageTitle, setPageTitle] = useState("新增提示词模板");
   
   // 变量相关状态
+  // 检测到的变量
   const [detectedVariables, setDetectedVariables] = useState<Record<string, string>>({});
+  // 示例值
   const [exampleValues, setExampleValues] = useState<Record<string, string>>({});
+  // 预览内容
   const [previewContent, setPreviewContent] = useState("");
   
   // 初始化表单数据
   useEffect(() => {
-    if (template) {
+    if (actionData?.formData) {
+      // 如果有保存失败的表单数据，使用它
+      setFormData(prev => ({
+        ...prev,
+        ...actionData.formData,
+        variables: actionData.formData?.variables || "{}",
+        status: actionData.formData?.status || "active"
+      }));
+    } else if (template) {
+      // 否则使用模板数据
+      const variablesJson = typeof template.variables === 'string'
+        ? template.variables
+        : JSON.stringify(template.variables);
+        
       const newFormData = {
         ...template,
-        // 如果是克隆模式，则清除ID并修改名称
         id: mode === "clone" ? "" : template.id,
         template_name: mode === "clone" ? `${template.template_name} (副本)` : template.template_name,
-        // 如果是克隆模式，重置版本
-        version: mode === "clone" ? "v1.0" : template.version
+        version: mode === "clone" ? "v1.0" : template.version,
+        variables: variablesJson
       };
       
       setFormData(newFormData);
       
       try {
-        // 解析模板变量
-        const vars = JSON.parse(template.variables);
+        const vars = typeof template.variables === 'string' 
+          ? JSON.parse(template.variables) 
+          : template.variables;
+        
         setExampleValues(vars);
       } catch (e) {
         console.error("解析变量失败:", e);
       }
       
-      // 检测模板内容中的变量
       if (template.template_content) {
         const vars = extractVariables(template.template_content);
         setDetectedVariables(vars);
       }
     }
     
-    // 设置页面模式
     setIsViewMode(mode === "view");
     
-    // 设置页面标题
     if (mode === "view") {
       setPageTitle("查看提示词模板");
     } else if (mode === "edit") {
@@ -328,7 +303,7 @@ export default function PromptsNew() {
     } else {
       setPageTitle("新增提示词模板");
     }
-  }, [template, mode]);
+  }, [template, mode, actionData?.formData]);
   
   // 处理输入变化
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
@@ -337,16 +312,18 @@ export default function PromptsNew() {
     // 如果是模板内容，检测变量
     if (name === "template_content") {
       const vars = extractVariables(value);
+      // console.log("检测到的变量：",vars);
       setDetectedVariables(vars);
       
       // 更新变量JSON
       const varsJson = JSON.stringify(
         Object.keys(vars).reduce((acc, key) => {
-          acc[key] = exampleValues[key] || key;
+          acc[key] = exampleValues[key] || "";
           return acc;
         }, {} as Record<string, string>)
       );
-      
+      // console.log("更新变量JSON：",varsJson);
+
       setFormData(prev => ({
         ...prev,
         [name]: value,
@@ -362,11 +339,19 @@ export default function PromptsNew() {
   
   // 处理状态切换
   const handleStatusToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // console.log("状态切换前:", formData.status);
     const status = e.target.checked ? "active" : "inactive";
-    setFormData(prev => ({
-      ...prev,
-      status
-    }));
+    // console.log("新状态值:", status);
+    
+    // 直接更新formData状态
+    setFormData(prev => {
+      const newState = {
+        ...prev,
+        status: status as "active" | "inactive" | "system"
+      };
+      // console.log("状态更新后:", newState.status);
+      return newState;
+    });
   };
   
   // 处理示例值变更
@@ -383,7 +368,7 @@ export default function PromptsNew() {
     
     // 替换变量
     Object.entries(detectedVariables).forEach(([key]) => {
-      const exampleValue = exampleValues[key] || `[${key}]`;
+      const exampleValue = exampleValues[key] || ``;
       const regex = new RegExp(`{${key}}`, 'g');
       content = content.replace(regex, exampleValue);
     });
@@ -395,7 +380,7 @@ export default function PromptsNew() {
   useEffect(() => {
     const varsJson = JSON.stringify(
       Object.keys(detectedVariables).reduce((acc, key) => {
-        acc[key] = exampleValues[key] || key;
+        acc[key] = exampleValues[key] || "";
         return acc;
       }, {} as Record<string, string>)
     );
@@ -405,23 +390,6 @@ export default function PromptsNew() {
       variables: varsJson
     }));
   }, [detectedVariables, exampleValues]);
-  
-  // 处理表单提交
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (isViewMode) {
-      return;
-    }
-    
-    const formElement = e.target as HTMLFormElement;
-    const submittingFormData = new FormData(formElement);
-    
-    // 确保变量JSON被包含在提交中
-    submittingFormData.set("variables", formData.variables || "{}");
-    
-    submit(submittingFormData, { method: "post" });
-  };
 
   return (
     <div className="prompt-new-page">
@@ -439,7 +407,7 @@ export default function PromptsNew() {
               type="primary" 
               icon="ri-save-line" 
               disabled={isSubmitting}
-              onClick={() => document.getElementById("template-form")?.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }))}
+              form="template-form"
             >
               {isSubmitting ? "保存中..." : "保存"}
             </Button>
@@ -447,6 +415,21 @@ export default function PromptsNew() {
         </div>
       </div>
       
+      {/* 错误信息 */}
+      {error && (
+        <div className="alert alert-error mb-4">
+          <i className="ri-error-warning-line"></i>
+          <div>{error}</div>
+        </div>
+      )}
+      
+      {actionData?.errors?.general && (
+        <div className="alert alert-error mb-4">
+          <i className="ri-error-warning-line"></i>
+          <div>{actionData.errors.general}</div>
+        </div>
+      )}
+      
       {/* 查看模式提示 */}
       {isViewMode && (
         <div className="alert alert-info">
@@ -458,7 +441,7 @@ export default function PromptsNew() {
       )}
       
       {/* 模板表单 */}
-      <form id="template-form" method="post" onSubmit={handleSubmit}>
+      <Form id="template-form" method="post">
         {/* 模板ID - 隐藏字段 */}
         <input type="hidden" name="id" value={formData.id || ''} />
         
@@ -474,7 +457,7 @@ export default function PromptsNew() {
                 </label>
                 <input 
                   type="text" 
-                  className={`form-input py-1 ${isViewMode ? 'read-only-field' : ''}`}
+                  className={`form-input py-1 ${isViewMode ? 'read-only-field' : ''} ${actionData?.errors?.template_name ? 'input-error' : ''}`}
                   id="template-name"
                   name="template_name"
                   placeholder="请输入模板名称"
@@ -483,6 +466,9 @@ export default function PromptsNew() {
                   readOnly={isViewMode}
                   required
                 />
+                {actionData?.errors?.template_name && (
+                  <div className="error-message">{actionData.errors.template_name}</div>
+                )}
                 <div className="help-text text-xs">建议使用&quot;文档类型-功能&quot;的命名方式</div>
               </div>
               
@@ -492,7 +478,7 @@ export default function PromptsNew() {
                   模板类型 <span className="text-error">*</span>
                 </label>
                 <select 
-                  className={`form-select py-1 ${isViewMode ? 'read-only-field' : ''}`}
+                  className={`form-select py-1 ${isViewMode ? 'read-only-field' : ''} ${actionData?.errors?.template_type ? 'input-error' : ''}`}
                   id="template-type"
                   name="template_type"
                   value={formData.template_type || ''}
@@ -506,6 +492,9 @@ export default function PromptsNew() {
                   <option value="Evaluation">评估(Evaluation) - 对文档内容进行评估</option>
                   <option value="Summary">摘要(Summary) - 生成文档内容摘要</option>
                 </select>
+                {actionData?.errors?.template_type && (
+                  <div className="error-message">{actionData.errors.template_type}</div>
+                )}
               </div>
               
               {/* 模板描述 */}
@@ -535,15 +524,22 @@ export default function PromptsNew() {
                       <input 
                         type="checkbox" 
                         id="status-toggle"
-                        name="status"
                         checked={formData.status === 'active'}
                         onChange={handleStatusToggle}
                         disabled={isViewMode}
                       />
+                      {/* 移除name属性，只使用隐藏字段传递状态值 */}
                       <span className="slider"></span>
                     </label>
                     <span id="status-text">{formData.status === 'active' ? '启用' : '停用'}</span>
+                    
                   </div>
+                  {/* 使用隐藏字段传递状态值 */}
+                  <input 
+                    type="hidden"
+                    name="status"
+                    value={formData.status}
+                  />
                 </div>
                 
                 {/* 模板版本 */}
@@ -584,7 +580,7 @@ export default function PromptsNew() {
                 模板内容 <span className="text-error">*</span>
               </label>
               <textarea 
-                className={`form-code-editor w-full ${isViewMode ? 'read-only-field' : ''}`}
+                className={`form-code-editor w-full ${isViewMode ? 'read-only-field' : ''} ${actionData?.errors?.template_content ? 'input-error' : ''}`}
                 id="template-content"
                 name="template_content"
                 placeholder="在此输入提示词模板内容..."
@@ -594,6 +590,9 @@ export default function PromptsNew() {
                 rows={15}
                 required
               ></textarea>
+              {actionData?.errors?.template_content && (
+                <div className="error-message">{actionData.errors.template_content}</div>
+              )}
               <div className="help-text">提示词模板是AI完成特定任务的指令，请清晰描述任务需求和输出格式</div>
             </div>
             
@@ -642,6 +641,7 @@ export default function PromptsNew() {
                           className="form-input" 
                           value={varName} 
                           readOnly 
+                          
                         />
                         <input 
                           type="text" 
@@ -703,7 +703,7 @@ export default function PromptsNew() {
             </Link>
             {!isViewMode && (
               <button 
-                type="submit" 
+                form="template-form"
                 className="ant-btn ant-btn-primary" 
                 disabled={isSubmitting}
                 id="save-btn-bottom"
@@ -713,7 +713,7 @@ export default function PromptsNew() {
             )}
           </div>
         </div>
-      </form>
+      </Form>
     </div>
   );
 } 
\ No newline at end of file
diff --git a/app/styles/pages/config-lists_new.css b/app/styles/pages/config-lists_new.css
index db8c050..b6171d6 100644
--- a/app/styles/pages/config-lists_new.css
+++ b/app/styles/pages/config-lists_new.css
@@ -41,7 +41,7 @@
 .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;
+  @apply block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none  sm:text-sm;
 }
 
 .config-new-page .form-textarea {
@@ -97,9 +97,9 @@
 
 /* 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;
+  @apply w-full min-h-[400px] font-mono text-sm leading-relaxed 
+         border rounded-md p-3 bg-gray-50 text-gray-800
+         focus:outline-none focus:border-[#00684a] focus:ring focus:ring-[#00684a] focus:ring-opacity-20;
 }
 
 .config-new-page .editor-actions {
@@ -108,7 +108,7 @@
 
 /* 示例卡片 */
 .config-new-page .example-card {
-  @apply h-full flex flex-col bg-gray-50 rounded-md border border-gray-200 overflow-hidden;
+  @apply h-[500px] flex flex-col bg-gray-50 rounded-md border border-gray-200 overflow-hidden;
 }
 
 .config-new-page .example-header {
@@ -120,7 +120,7 @@
 }
 
 .config-new-page .example-content {
-  @apply p-3 flex-grow overflow-auto;
+  @apply p-3 flex-grow overflow-auto text-sm ;
 }
 
 .config-new-page .example-pre {
@@ -136,4 +136,43 @@
 .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; } 
\ No newline at end of file
+.config-new-page .code-json .null { @apply text-gray-500; } 
+
+.config-new-page .json-display {
+  font-family: monospace;
+  white-space: pre;
+  background-color: #f8fafc;
+  padding: 1rem;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+}
+
+.config-new-page .json-line {
+  line-height: 1.5;
+}
+
+.config-new-page .json-char {
+  color: #334155;
+}
+
+.config-new-page .json-brace {
+  color: #64748b;
+  font-weight: bold;
+}
+
+.config-new-page .json-bracket {
+  color: #64748b;
+  font-weight: bold;
+}
+
+.config-new-page .json-quote {
+  color: #0ea5e9;
+}
+
+.config-new-page .json-colon {
+  color: #64748b;
+}
+
+.config-new-page .json-comma {
+  color: #64748b;
+}
\ No newline at end of file
diff --git a/app/styles/pages/document-types_index.css b/app/styles/pages/document-types_index.css
new file mode 100644
index 0000000..e69de29
diff --git a/app/styles/pages/files_upload.css b/app/styles/pages/files_upload.css
index c685715..7dc7434 100644
--- a/app/styles/pages/files_upload.css
+++ b/app/styles/pages/files_upload.css
@@ -38,7 +38,7 @@
 }
 
 .file-upload-page .form-select {
-  @apply block w-full px-3 py-2 text-base border-gray-300 rounded-md shadow-sm focus:outline-none;
+  @apply block w-full px-3 py-2 text-base  rounded-md shadow-sm focus:outline-none;
 }
 
 .file-upload-page .form-select:focus {
diff --git a/app/styles/pages/prompts_new.css b/app/styles/pages/prompts_new.css
index 2e3586d..5dac2aa 100644
--- a/app/styles/pages/prompts_new.css
+++ b/app/styles/pages/prompts_new.css
@@ -41,7 +41,8 @@
 
 .prompt-new-page .form-input:focus,
 .prompt-new-page .form-select:focus,
-.prompt-new-page .form-textarea:focus {
+.prompt-new-page .form-textarea:focus,
+.prompt-new-page .form-code-editor:focus {
   @apply outline-none border-[var(--primary-color)] shadow-[0_0_0_2px_rgba(0,104,74,0.2)];
 }
 
diff --git a/html/文档类型-列表.html b/html/文档类型-列表.html
index 99f4cb1..300010c 100644
--- a/html/文档类型-列表.html
+++ b/html/文档类型-列表.html
@@ -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://cdnjs.cloudflare.com/ajax/libs/remixicon/2.5.0/remixicon.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/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>
         .type-badge {
             display: inline-flex;
diff --git a/html/文档类型-新增.html b/html/文档类型-新增.html
index b8368ee..51490b9 100644
--- a/html/文档类型-新增.html
+++ b/html/文档类型-新增.html
@@ -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://cdnjs.cloudflare.com/ajax/libs/remixicon/2.5.0/remixicon.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/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>
         .checkbox-group {
             display: flex;