Upload 54 files

src/components/PromptGroup/PromptGroupCard.tsx

@@ -17,7 +17,12 @@ const PromptGroupCard: React.FC<PromptGroupCardProps> = ({
   const navigate = useNavigate();
   const { categories } = useApp();
   
-  const category = categories.find(c => c._id === promptGroup.category);
+  // 查找分类对象 - 支持两种可能的数据结构
+  const categoryId = typeof promptGroup.category === 'object' 
+    ? promptGroup.category._id 
+    : promptGroup.category;
+    
+  const category = categories.find(c => c._id === categoryId);
   
   const handleClick = () => {
     navigate(`/prompt-group/${promptGroup._id}`);

src/components/PromptGroup/PromptGroupDetail.tsx

@@ -23,7 +23,12 @@ const PromptGroupDetail: React.FC<PromptGroupDetailProps> = ({
   const { categories } = useApp();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   
-  const category = categories.find(c => c._id === promptGroup.category);
+  // 查找分类对象 - 支持两种可能的数据结构  
+  const categoryId = typeof promptGroup.category === 'object' 
+    ? promptGroup.category._id 
+    : promptGroup.category;
+    
+  const category = categories.find(c => c._id === categoryId);
   
   const formatDate = (date: string | Date) => {
     const dateObj = typeof date === 'string' ? new Date(date) : date;

src/components/PromptGroup/PromptGroupList.tsx

@@ -1,101 +1,106 @@
-import React, { useState } from 'react';
-// eslint-disable-next-line
-import { PromptGroup } from '../../types';
-import PromptGroupCard from './PromptGroupCard';
-import { useApp } from '../../contexts/AppContext';
-import CategorySelector from '../Category/CategorySelector';
-import Input from '../common/Input';
-
-const PromptGroupList: React.FC = () => {
-  // eslint-disable-next-line
-  const { promptGroups, categories } = useApp();
-  const [searchTerm, setSearchTerm] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState<string>('');
-  
-  // 搜索和过滤提示词组
-  const filteredPromptGroups = promptGroups.filter((group) => {
-    const matchesSearch = 
-      group.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      group.description.toLowerCase().includes(searchTerm.toLowerCase());
-    
-    const matchesCategory = 
-      selectedCategory === '' || group.category === selectedCategory;
-    
-    return matchesSearch && matchesCategory;
-  });
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
-  };
-
-  const handleCategoryChange = (categoryId: string) => {
-    setSelectedCategory(categoryId);
-  };
-
-  const resetFilters = () => {
-    setSearchTerm('');
-    setSelectedCategory('');
-  };
-
-  return (
-    <div>
-      <div className="mb-4 flex flex-col sm:flex-row gap-3">
-      <Input
-        placeholder="搜索提示词组..."
-        value={searchTerm}
-        onChange={handleSearch}
-        className="flex-1"
-        style={{ paddingLeft: "40px" }} /* Add explicit inline padding */
-        icon={
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="11" cy="11" r="8"></circle>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-          </svg>
-        }
-      />
-        <div className="flex gap-2">
-          <CategorySelector
-            selectedCategory={selectedCategory}
-            onChange={handleCategoryChange}
-          />
-          {(searchTerm || selectedCategory) && (
-            <button 
-              className="ios-navbar-button" 
-              onClick={resetFilters}
-            >
-              清除筛选
-            </button>
-          )}
-        </div>
-      </div>
-
-      {filteredPromptGroups.length === 0 ? (
-        <div className="ios-empty-state">
-          <div className="ios-empty-state-icon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <circle cx="11" cy="11" r="8"></circle>
-              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-            </svg>
-          </div>
-          <h3 className="ios-empty-state-title">未找到提示词组</h3>
-          <p className="ios-empty-state-text">
-            {searchTerm || selectedCategory 
-              ? '请尝试调整筛选条件' 
-              : '点击底部的"新建"按钮创建您的第一个提示词组'}
-          </p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {filteredPromptGroups.map((group) => (
-            <PromptGroupCard 
-              key={group._id} 
-              promptGroup={group} 
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
+import React, { useState } from 'react';
+// eslint-disable-next-line
+import { PromptGroup } from '../../types';
+import PromptGroupCard from './PromptGroupCard';
+import { useApp } from '../../contexts/AppContext';
+import CategorySelector from '../Category/CategorySelector';
+import Input from '../common/Input';
+
+const PromptGroupList: React.FC = () => {
+  // eslint-disable-next-line
+  const { promptGroups, categories } = useApp();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  
+  // 搜索和过滤提示词组
+  const filteredPromptGroups = promptGroups.filter((group) => {
+    const matchesSearch = 
+      group.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      (group.description?.toLowerCase() || '').includes(searchTerm.toLowerCase());
+    
+    // 处理 category 可能是对象或字符串的情况
+    const groupCategoryId = typeof group.category === 'object' 
+      ? group.category._id 
+      : group.category;
+    
+    const matchesCategory = 
+      selectedCategory === '' || groupCategoryId === selectedCategory;
+    
+    return matchesSearch && matchesCategory;
+  });
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const handleCategoryChange = (categoryId: string) => {
+    setSelectedCategory(categoryId);
+  };
+
+  const resetFilters = () => {
+    setSearchTerm('');
+    setSelectedCategory('');
+  };
+
+  return (
+    <div>
+      <div className="mb-4 flex flex-col sm:flex-row gap-3">
+      <Input
+        placeholder="搜索提示词组..."
+        value={searchTerm}
+        onChange={handleSearch}
+        className="flex-1"
+        style={{ paddingLeft: "40px" }} /* Add explicit inline padding */
+        icon={
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+        }
+      />
+        <div className="flex gap-2">
+          <CategorySelector
+            selectedCategory={selectedCategory}
+            onChange={handleCategoryChange}
+          />
+          {(searchTerm || selectedCategory) && (
+            <button 
+              className="ios-navbar-button" 
+              onClick={resetFilters}
+            >
+              清除筛选
+            </button>
+          )}
+        </div>
+      </div>
+
+      {filteredPromptGroups.length === 0 ? (
+        <div className="ios-empty-state">
+          <div className="ios-empty-state-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+          </div>
+          <h3 className="ios-empty-state-title">未找到提示词组</h3>
+          <p className="ios-empty-state-text">
+            {searchTerm || selectedCategory 
+              ? '请尝试调整筛选条件' 
+              : '点击底部的"新建"按钮创建您的第一个提示词组'}
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filteredPromptGroups.map((group) => (
+            <PromptGroupCard 
+              key={group._id} 
+              promptGroup={group} 
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
 export default PromptGroupList;

src/pages/SettingsPage.tsx

@@ -1,184 +1,184 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Layout from '../components/Layout/Layout';
-import Card, { CardHeader, CardContent } from '../components/common/Card';
-import Button from '../components/common/Button';
-import { useAuth } from '../contexts/AuthContext';
-
-const SettingsPage: React.FC = () => {
-  const navigate = useNavigate();
-  const { logout } = useAuth();
-  const [dataExported, setDataExported] = useState(false);
-  
-  // 导出所有数据
-  const handleExportAllData = () => {
-    const promptGroups = localStorage.getItem('promptGroups');
-    const categories = localStorage.getItem('categories');
-    
-    const allData = {
-      promptGroups: promptGroups ? JSON.parse(promptGroups) : [],
-      categories: categories ? JSON.parse(categories) : []
-    };
-    
-    const jsonString = JSON.stringify(allData, null, 2);
-    const blob = new Blob([jsonString], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `prompt-manager-backup-${new Date().toISOString().split('T')[0]}.json`;
-    document.body.appendChild(a);
-    a.click();
-    
-    // 清理
-    setTimeout(() => {
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-      setDataExported(true);
-      
-      // 重置状态
-      setTimeout(() => setDataExported(false), 3000);
-    }, 0);
-  };
-  
-  // 导入数据文件
-  const handleImportData = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-    
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const data = JSON.parse(e.target?.result as string);
-        
-        if (data.promptGroups && Array.isArray(data.promptGroups)) {
-          localStorage.setItem('promptGroups', JSON.stringify(data.promptGroups));
-        }
-        
-        if (data.categories && Array.isArray(data.categories)) {
-          localStorage.setItem('categories', JSON.stringify(data.categories));
-        }
-        
-        alert('数据导入成功，应用将刷新以加载新数据。');
-        window.location.reload();
-      } catch (error) {
-        alert('导入失败，文件格式不正确。');
-        console.error('导入错误:', error);
-      }
-    };
-    reader.readAsText(file);
-  };
-  
-  // 清除所有数据
-  const handleClearAllData = () => {
-    if (window.confirm('确定要清除所有数据吗？此操作不可撤销。')) {
-      localStorage.removeItem('promptGroups');
-      localStorage.removeItem('categories');
-      alert('所有数据已清除，应用将刷新。');
-      window.location.reload();
-    }
-  };
-  
-  // 退出登录
-  const handleLogout = () => {
-    if (window.confirm('确定要退出登录吗？')) {
-      logout();
-      navigate('/login');
-    }
-  };
-
-  return (
-    <Layout title="设置">
-      <div className="space-y-4">
-        {/* 账户管理卡片 */}
-        <Card>
-          <CardHeader title="账户管理" />
-          <CardContent>
-            <div className="space-y-4">
-              <Button
-                variant="danger"
-                fullWidth
-                onClick={handleLogout}
-              >
-                退出登录
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-        
-        {/* 数据管理卡片 */}
-        <Card>
-          <CardHeader title="数据管理" />
-          <CardContent>
-            <div className="space-y-4">
-              <div>
-                <h3 className="font-medium mb-2">备份数据</h3>
-                <p className="text-gray-600 text-sm mb-2">
-                  导出所有提示词组和分类数据为JSON文件，可用于备份或迁移。
-                </p>
-                <Button
-                  variant="primary"
-                  onClick={handleExportAllData}
-                >
-                  {dataExported ? '✓ 导出成功' : '导出所有数据'}
-                </Button>
-              </div>
-              
-              <div className="ios-divider"></div>
-              
-              <div>
-                <h3 className="font-medium mb-2">导入数据</h3>
-                <p className="text-gray-600 text-sm mb-2">
-                  从之前导出的JSON文件中恢复数据。将覆盖当前所有数据。
-                </p>
-                <input
-                  type="file"
-                  id="import-file"
-                  accept=".json"
-                  style={{ display: 'none' }}
-                  onChange={handleImportData}
-                />
-                <Button
-                  variant="secondary"
-                  onClick={() => document.getElementById('import-file')?.click()}
-                >
-                  导入数据
-                </Button>
-              </div>
-              
-              <div className="ios-divider"></div>
-              
-              <div>
-                <h3 className="font-medium mb-2">清除数据</h3>
-                <p className="text-gray-600 text-sm mb-2">
-                  删除所有存储的提示词组和分类数据。此操作不可撤销。
-                </p>
-                <Button
-                  variant="danger"
-                  onClick={handleClearAllData}
-                >
-                  清除所有数据
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        
-        <Card>
-          <CardHeader title="关于" />
-          <CardContent>
-            <h3 className="font-medium mb-2">提示词管理应用</h3>
-            <p className="text-gray-600 text-sm mb-4">
-              版本 1.0.0
-            </p>
-            <p className="text-gray-600 text-sm">
-              这是一个用于管理提示词、工作流和DSL文件的本地应用。所有数据均存储在浏览器的本地存储中。
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-    </Layout>
-  );
-};
-
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Layout from '../components/Layout/Layout';
+import Card, { CardHeader, CardContent } from '../components/common/Card';
+import Button from '../components/common/Button';
+import { useAuth } from '../contexts/AuthContext';
+
+const SettingsPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { logout } = useAuth();
+  const [dataExported, setDataExported] = useState(false);
+  
+  // 导出所有数据
+  const handleExportAllData = () => {
+    const promptGroups = localStorage.getItem('promptGroups');
+    const categories = localStorage.getItem('categories');
+    
+    const allData = {
+      promptGroups: promptGroups ? JSON.parse(promptGroups) : [],
+      categories: categories ? JSON.parse(categories) : []
+    };
+    
+    const jsonString = JSON.stringify(allData, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `prompt-manager-backup-${new Date().toISOString().split('T')[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    
+    // 清理
+    setTimeout(() => {
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      setDataExported(true);
+      
+      // 重置状态
+      setTimeout(() => setDataExported(false), 3000);
+    }, 0);
+  };
+  
+  // 导入数据文件
+  const handleImportData = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const data = JSON.parse(e.target?.result as string);
+        
+        if (data.promptGroups && Array.isArray(data.promptGroups)) {
+          localStorage.setItem('promptGroups', JSON.stringify(data.promptGroups));
+        }
+        
+        if (data.categories && Array.isArray(data.categories)) {
+          localStorage.setItem('categories', JSON.stringify(data.categories));
+        }
+        
+        alert('数据导入成功，应用将刷新以加载新数据。');
+        window.location.reload();
+      } catch (error) {
+        alert('导入失败，文件格式不正确。');
+        console.error('导入错误:', error);
+      }
+    };
+    reader.readAsText(file);
+  };
+  
+  // 清除所有数据
+  const handleClearAllData = () => {
+    if (window.confirm('确定要清除所有数据吗？此操作不可撤销。')) {
+      localStorage.removeItem('promptGroups');
+      localStorage.removeItem('categories');
+      alert('所有数据已清除，应用将刷新。');
+      window.location.reload();
+    }
+  };
+  
+  // 退出登录
+  const handleLogout = () => {
+    if (window.confirm('确定要退出登录吗？')) {
+      logout();
+      navigate('/login');
+    }
+  };
+
+  return (
+    <Layout title="设置">
+      <div className="space-y-4">
+        {/* 账户管理卡片 */}
+        <Card>
+          <CardHeader title="账户管理" />
+          <CardContent>
+            <div className="space-y-4">
+              <Button
+                variant="danger"
+                fullWidth
+                onClick={handleLogout}
+              >
+                退出登录
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+        
+        {/* 数据管理卡片 */}
+        <Card>
+          <CardHeader title="数据管理" />
+          <CardContent>
+            <div className="space-y-4">
+              <div>
+                <h3 className="font-medium mb-2">备份数据</h3>
+                <p className="text-gray-600 text-sm mb-2">
+                  导出所有提示词组和分类数据为JSON文件，可用于备份或迁移。
+                </p>
+                <Button
+                  variant="primary"
+                  onClick={handleExportAllData}
+                >
+                  {dataExported ? '✓ 导出成功' : '导出所有数据'}
+                </Button>
+              </div>
+              
+              <div className="ios-divider"></div>
+              
+              <div>
+                <h3 className="font-medium mb-2">导入数据</h3>
+                <p className="text-gray-600 text-sm mb-2">
+                  从之前导出的JSON文件中恢复数据。将覆盖当前所有数据。
+                </p>
+                <input
+                  type="file"
+                  id="import-file"
+                  accept=".json"
+                  style={{ display: 'none' }}
+                  onChange={handleImportData}
+                />
+                <Button
+                  variant="secondary"
+                  onClick={() => document.getElementById('import-file')?.click()}
+                >
+                  导入数据
+                </Button>
+              </div>
+              
+              <div className="ios-divider"></div>
+              
+              <div>
+                <h3 className="font-medium mb-2">清除数据</h3>
+                <p className="text-gray-600 text-sm mb-2">
+                  删除所有存储的提示词组和分类数据。此操作不可撤销。
+                </p>
+                <Button
+                  variant="danger"
+                  onClick={handleClearAllData}
+                >
+                  清除所有数据
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        
+        <Card>
+          <CardHeader title="关于" />
+          <CardContent>
+            <h3 className="font-medium mb-2">提示词管理应用</h3>
+            <p className="text-gray-600 text-sm mb-4">
+              版本 1.0.0
+            </p>
+            <p className="text-gray-600 text-sm">
+              这是一个用于管理提示词、工作流和DSL文件的本地应用。所有数据均存储在浏览器的本地存储中。
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+};
+
 export default SettingsPage;