暂时完成预设部分、开始世界书部分

frontend-react/src/Store/Slices/LeftTabsSlices/PresetSlice.jsx

@@ -29,7 +29,72 @@ const usePresetStore = create((set, get) => ({
   isParametersExpanded: true,
 
   // 预设组件列表
-  promptComponents: [],
+  promptComponents: [
+    {
+      identifier: "dialogueExamples",
+      name: "Chat Examples",
+      system_prompt: true,
+      marker: true,
+      enabled: true,
+      role: 0
+    },
+    {
+      identifier: "chatHistory",
+      name: "Chat History",
+      system_prompt: true,
+      marker: true,
+      enabled: true,
+      role: 0
+    },
+    {
+      identifier: "worldInfoAfter",
+      name: "World Info (after)",
+      system_prompt: true,
+      marker: true,
+      enabled: true,
+      role: 0
+    },
+    {
+      identifier: "worldInfoBefore",
+      name: "World Info (before)",
+      system_prompt: true,
+      marker: true,
+      enabled: true,
+      role: 0
+    },
+    {
+      identifier: "charDescription",
+      name: "Char Description",
+      system_prompt: true,
+      marker: true,
+      enabled: true,
+      role: 0
+    },
+    {
+      identifier: "charPersonality",
+      name: "Char Personality",
+      system_prompt: true,
+      marker: true,
+      enabled: true,
+      role: 0
+    },
+    {
+      identifier: "scenario",
+      name: "Scenario",
+      system_prompt: true,
+      marker: true,
+      enabled: true,
+      role: 0
+    },
+    {
+      identifier: "personaDescription",
+      name: "Persona Description",
+      system_prompt: true,
+      marker: true,
+      enabled: true,
+      role: 0
+    }
+  ],
 
   // 从后端加载预设列表
   fetchPresets: async () => {
@@ -52,8 +117,6 @@ const usePresetStore = create((set, get) => ({
     }
   },
 
-  // 设置选中的预设
-  // 设置选中的预设
   // 设置选中的预设
   setSelectedPreset: async (presetId) => {
     try {

frontend-react/src/components/SideBarLeft/tab/Presets.jsx

@@ -741,6 +741,9 @@ const PresetPanel = () => {
                     >
                       编辑
                     </button>
+                    <span className="token-count">
+                      {component.content ? component.content.length : 0}字
+                    </span>
                     {!component.marker && (
                       <button
                         className="delete-btn"
@@ -753,12 +756,6 @@ const PresetPanel = () => {
                     )}
                   </div>
                 </div>
-
-                <div className="component-footer">
-                  <span className="token-count">
-                    字符数: {component.content ? component.content.length : 0}
-                  </span>
-                </div>
               </div>
             </React.Fragment>
           ))}

frontend-react/src/components/SideBarLeft/tabcss/Presets.css

@@ -331,11 +331,25 @@
   min-height: 0;
 }
 
-.components-header {
+.component-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
+  margin-bottom: 0; /* 移除底部边距 */
+}
+
+.component-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.token-count {
+  font-size: 11px;
+  color: #777;
+  margin: 0 4px;
+  white-space: nowrap;
 }
 
 .add-component-btn {