新增提示词列表和提示词修改页面

app/components/ui/Alert.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface AlertProps {
+  type: 'info' | 'success' | 'warning' | 'error';
+  title: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Alert({ type, title, className = '', children }: AlertProps) {
+  const getTypeStyles = () => {
+    switch (type) {
+      case 'info':
+        return {
+          container: 'bg-blue-50 border-blue-200 text-blue-800',
+          icon: 'ri-information-line text-blue-600'
+        };
+      case 'success':
+        return {
+          container: 'bg-green-50 border-green-200 text-green-800',
+          icon: 'ri-checkbox-circle-line text-green-600'
+        };
+      case 'warning':
+        return {
+          container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+          icon: 'ri-alert-line text-yellow-600'
+        };
+      case 'error':
+        return {
+          container: 'bg-red-50 border-red-200 text-red-800',
+          icon: 'ri-error-warning-line text-red-600'
+        };
+      default:
+        return {
+          container: 'bg-gray-50 border-gray-200 text-gray-800',
+          icon: 'ri-information-line text-gray-600'
+        };
+    }
+  };
+
+  const styles = getTypeStyles();
+
+  return (
+    <div 
+      className={`border rounded-md p-3 ${styles.container} ${className}`}
+      role="alert"
+    >
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <i className={`${styles.icon} mr-2 text-lg`}></i>
+        </div>
+        <div>
+          <div className="font-medium">{title}</div>
+          {children && <div className="mt-1 text-sm">{children}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}