新增文件上传页面，新增文件上传的公共组件（进度条，步骤条，上传区域）

app/routes/prompts.new.tsx

@@ -20,9 +20,22 @@ export const meta: MetaFunction = () => {
 
 // 面包屑导航
 export const handle = {
-  breadcrumb: "编辑提示词模板"
+  breadcrumb: (data:LoaderData) => {
+    if (data.mode === "edit") {
+      return "编辑提示词模板";
+    } else if (data.mode === "view") {
+      return "查看提示词模板";
+    } else {
+      return "新增提示词模板";
+    }
+  }
 };
 
+interface LoaderData {
+  template: PromptTemplate;
+  mode: string;
+}
+
 // 从模拟数据中获取模板
 const getTemplateById = (id: string): PromptTemplate | undefined => {
   // 与prompts._index.tsx中的模拟数据保持一致
@@ -87,6 +100,7 @@ const getTemplateById = (id: string): PromptTemplate | undefined => {
       template_name: "采购合同-乙方资质抽取",
       template_type: "Extraction",
       description: "抽取采购合同中乙方的资质信息",
+
       version: "v1.1",
       status: "inactive",
       created_by: "zhangsan",
@@ -417,10 +431,10 @@ export default function PromptsNew() {
         <div>
           <Link to="/prompts" className="mr-2">
             <Button type="default" icon="ri-arrow-left-line">
-              返回
+              返回列表
             </Button>
           </Link>
-          {!isViewMode ? (
+          {!isViewMode && (
             <Button 
               type="primary" 
               icon="ri-save-line" 
@@ -429,12 +443,6 @@ export default function PromptsNew() {
             >
               {isSubmitting ? "保存中..." : "保存"}
             </Button>
-          ) : (
-            <Link to="/prompts">
-              <Button type="default" icon="ri-arrow-left-line">
-                返回列表
-              </Button>
-            </Link>
           )}
         </div>
       </div>
@@ -565,8 +573,8 @@ export default function PromptsNew() {
             <div className="alert alert-warning mb-4">
               <i className="ri-information-line"></i>
               <div>
-                <div>模板内容支持使用变量，变量格式为 <code>{"{varName}"}</code>，在使用时会自动替换。系统将自动识别模板中的变量。</div>
-                <div className="mt-1">例如：<code>请从以下{"{docType}"}文档中抽取关键信息...</code></div>
+                <div>模板内容支持使用变量，变量格式为 &#123;varName&#125;，在使用时会自动替换。系统将自动识别模板中的变量。</div>
+                <div className="mt-1">例如：请从以下&#123;docType&#125;文档中抽取关键信息...</div>
               </div>
             </div>
             
@@ -595,7 +603,7 @@ export default function PromptsNew() {
               <div className="alert alert-info mb-3">
                 <i className="ri-lightbulb-line"></i>
                 <div>
-                  <div>系统已自动识别出模板中的变量。变量以 <code>{"{varName}"}</code> 形式在模板中使用，无需手动定义。</div>
+                  <div>系统已自动识别出模板中的变量。变量以 &#123;varName&#125; 形式在模板中使用，无需手动定义。</div>
                 </div>
               </div>
               
@@ -612,7 +620,7 @@ export default function PromptsNew() {
                   ))
                 ) : (
                   <div className="text-secondary text-sm italic" id="no-vars-message">
-                    暂未识别到任何变量，请在模板内容中使用 {"{变量名}"} 格式添加变量
+                    暂未识别到任何变量，请在模板内容中使用 &#123;变量名&#125; 格式添加变量
                   </div>
                 )}
               </div>