初始提交: Qihu-AIFlow v2.0.1 完整项目

- 前端 React+TypeScript (源码+构建产物)
- 后端 Python FastAPI
- 数据库迁移 001-015
- Docker部署配置
- 微信ClawBot API频道绑定
- 项目文档 README.md

frontend/src/pages/admin/Ads.tsx

@@ -0,0 +1,493 @@
+import React, { useState, useEffect } from 'react';
+import { adminAPI, marketAPI } from '@/api';
+import type { AdBanner, MarketApp } from '@/types';
+import './Ads.css';
+
+const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    {children}
+  </svg>
+);
+
+const typeLabels: Record<string, string> = { skill: 'Skill', agent: 'Agent', mcp: 'MCP' };
+
+const Ads: React.FC = () => {
+  const [banners, setBanners] = useState<AdBanner[]>([]);
+  const [appOptions, setAppOptions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editingBanner, setEditingBanner] = useState<AdBanner | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [isNew, setIsNew] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [genPrompt, setGenPrompt] = useState('');
+
+  const emptyForm: AdBanner = {
+    id: '', title: '', imageUrl: '',
+    linkAppId: '', linkAppName: '',
+    sortOrder: banners.length + 1, clickCount: 0,
+    status: 'active', createdAt: new Date().toISOString(),
+  };
+
+  const [form, setForm] = useState<AdBanner>(emptyForm);
+
+  const loadBanners = async () => {
+    try {
+      setLoading(true);
+      const res: any = await adminAPI.getAds();
+      const data = Array.isArray(res) ? res : (res.data || []);
+      setBanners(data.map((a: any) => ({
+        id: a.id,
+        title: a.title,
+        imageUrl: a.image_url || a.imageUrl || '',
+        linkAppId: a.link_app_id || a.linkAppId || '',
+        linkAppName: a.link_app_name || a.linkAppName || '',
+        sortOrder: a.sort_order ?? a.sortOrder ?? 0,
+        clickCount: a.click_count ?? a.clickCount ?? 0,
+        status: a.status || 'active',
+        createdAt: a.created_at || a.createdAt || new Date().toISOString(),
+      })));
+    } catch (e) {
+      console.error('加载广告失败:', e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadBanners();
+    // 加载应用列表用于关联选择
+    marketAPI.getApps({}).then((res: any) => {
+      const items = res.data?.items || [];
+      setAppOptions(items);
+    }).catch(() => {});
+  }, []);
+
+  const handleCreate = () => {
+    setIsNew(true);
+    setForm({ ...emptyForm, sortOrder: banners.length + 1 });
+    setEditingBanner(null);
+    setGenPrompt('');
+    setShowModal(true);
+  };
+
+  const handleEdit = (banner: AdBanner) => {
+    setIsNew(false);
+    setEditingBanner(banner);
+    setForm({ ...banner });
+    setGenPrompt('');
+    setShowModal(true);
+  };
+
+  const handleSave = async () => {
+    try {
+      if (isNew) {
+        await adminAPI.addAd({
+          title: form.title,
+          image_url: form.imageUrl || undefined,
+          link_app_id: form.linkAppId || undefined,
+          link_app_name: form.linkAppName || undefined,
+          sort_order: form.sortOrder,
+          status: form.status,
+        });
+      } else if (editingBanner) {
+        await adminAPI.updateAd(editingBanner.id, {
+          title: form.title,
+          image_url: form.imageUrl || undefined,
+          link_app_id: form.linkAppId || undefined,
+          link_app_name: form.linkAppName || undefined,
+          sort_order: form.sortOrder,
+          status: form.status,
+        });
+      }
+      setShowModal(false);
+      setEditingBanner(null);
+      loadBanners();
+    } catch (err: any) {
+      alert('保存失败：' + (err.detail || err.message));
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!window.confirm('确定要删除此广告吗？')) return;
+    try {
+      await adminAPI.deleteAd(id);
+      loadBanners();
+    } catch (err: any) {
+      alert('删除失败：' + (err.detail || err.message));
+    }
+  };
+
+  const toggleStatus = async (id: string, currentStatus: string) => {
+    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
+    try {
+      await adminAPI.updateAd(id, { status: newStatus });
+      loadBanners();
+    } catch (err: any) {
+      alert('切换状态失败：' + (err.detail || err.message));
+    }
+  };
+
+  const handleAppSelect = (appId: string) => {
+    const app = appOptions.find(a => a.id === appId);
+    setForm(prev => ({
+      ...prev,
+      linkAppId: appId,
+      linkAppName: app ? app.name : '',
+    }));
+  };
+
+  // 真实图片上传
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      const token = localStorage.getItem('aiflow_token');
+      const res = await fetch('/app/api/admin/ads/upload-image', {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}` },
+        body: formData,
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ detail: '上传失败' }));
+        throw new Error(err.detail || '上传失败');
+      }
+      const data = await res.json();
+      setForm({ ...form, imageUrl: data.image_url });
+    } catch (err: any) {
+      alert('图片上传失败：' + err.message);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  // AI生成图片
+  const handleAIGenerate = async () => {
+    setGenerating(true);
+    try {
+      const token = localStorage.getItem('aiflow_token');
+      const prompt = genPrompt || form.title || 'AI智能平台广告横幅';
+      const res = await fetch(`/app/api/admin/ads/generate-image?prompt=${encodeURIComponent(prompt)}`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}` },
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ detail: '生成失败' }));
+        throw new Error(err.detail || '生成失败');
+      }
+      const data = await res.json();
+      setForm({ ...form, imageUrl: data.image_url });
+    } catch (err: any) {
+      alert('AI绘图失败：' + err.message);
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  // 生成渐变色预览色块
+  const getPreviewGradient = (appId?: string): string => {
+    const gradients: Record<string, string> = {
+      a1: 'linear-gradient(135deg, #667eea, #764ba2)',
+      a2: 'linear-gradient(135deg, #f093fb, #f5576c)',
+      a3: 'linear-gradient(135deg, #4facfe, #00f2fe)',
+      a4: 'linear-gradient(135deg, #43e97b, #38f9d7)',
+      a5: 'linear-gradient(135deg, #fa709a, #fee140)',
+      a6: 'linear-gradient(135deg, #a18cd1, #fbc2eb)',
+      a8: 'linear-gradient(135deg, #ffecd2, #fcb69f)',
+    };
+    return gradients[appId || ''] || 'linear-gradient(135deg, #5B5FED, #A78BFA)';
+  };
+
+  return (
+    <div style={{ animation: 'fadeIn var(--transition-normal)' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-xl)' }}>
+        <h1 className="admin-page-title" style={{ marginBottom: 0 }}>广告位管理</h1>
+        <button className="admin-btn admin-btn-primary" onClick={handleCreate}>
+          <SVGIcon size={14}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></SVGIcon>
+          新增广告位
+        </button>
+      </div>
+
+      {/* Banner List */}
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: 40 }}>加载中...</div>
+      ) : banners.length === 0 ? (
+        <div className="admin-card" style={{ textAlign: 'center', padding: 40, color: 'var(--color-text-tertiary)' }}>
+          暂无广告位，点击"新增广告位"按钮创建
+        </div>
+      ) : (
+        <div className="admin-card">
+          <div className="admin-card-header">
+            <h3 className="admin-card-title">轮播图广告位列表</h3>
+            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>
+              共 {banners.length} 个广告位，活跃 {banners.filter(b => b.status === 'active').length} 个
+            </span>
+          </div>
+          <div style={{ overflowX: 'auto' }}>
+            <table className="admin-table">
+              <thead>
+                <tr>
+                  <th style={{ width: 60 }}>预览</th>
+                  <th>标题</th>
+                  <th>关联应用</th>
+                  <th>排序</th>
+                  <th>点击次数</th>
+                  <th>状态</th>
+                  <th>创建时间</th>
+                  <th>操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {banners.sort((a, b) => a.sortOrder - b.sortOrder).map(banner => (
+                  <tr key={banner.id}>
+                    <td>
+                      <div
+                        style={{
+                          width: 48, height: 32, borderRadius: 'var(--radius-sm)',
+                          background: getPreviewGradient(banner.linkAppId),
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        }}
+                      >
+                        <SVGIcon size={14}><rect x="1" y="3" width="22" height="16" rx="2"/><polyline points="23 7 13 17 8 12"/></SVGIcon>
+                      </div>
+                    </td>
+                    <td style={{ fontWeight: 600 }}>{banner.title}</td>
+                    <td>
+                      {banner.linkAppName ? (
+                        <span className="admin-badge badge-info" style={{ fontSize: 'var(--text-xs)' }}>
+                          {banner.linkAppName}
+                        </span>
+                      ) : (
+                        <span style={{ color: 'var(--color-text-tertiary)', fontSize: 'var(--text-xs)' }}>未关联</span>
+                      )}
+                    </td>
+                    <td style={{ fontFamily: 'var(--font-mono)', textAlign: 'center' }}>{banner.sortOrder}</td>
+                    <td style={{ fontFamily: 'var(--font-mono)', textAlign: 'center' }}>
+                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                        <SVGIcon size={12}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></SVGIcon>
+                        {banner.clickCount.toLocaleString()}
+                      </span>
+                    </td>
+                    <td>
+                      <span
+                        className={`admin-badge ${banner.status === 'active' ? 'badge-success' : 'badge-neutral'}`}
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => toggleStatus(banner.id, banner.status)}
+                      >
+                        {banner.status === 'active' ? '投放中' : '已暂停'}
+                      </span>
+                    </td>
+                    <td style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>
+                      {new Date(banner.createdAt).toLocaleDateString()}
+                    </td>
+                    <td>
+                      <div style={{ display: 'flex', gap: 'var(--space-xs)' }}>
+                        <button className="admin-btn admin-btn-outline admin-btn-sm" onClick={() => handleEdit(banner)}>
+                          <SVGIcon size={12}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></SVGIcon>
+                          编辑
+                        </button>
+                        <button
+                          className="admin-btn admin-btn-outline admin-btn-sm"
+                          style={{ color: 'var(--color-danger)', borderColor: 'var(--color-danger)' }}
+                          onClick={() => handleDelete(banner.id)}
+                        >
+                          <SVGIcon size={12}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></SVGIcon>
+                          删除
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Edit/Create Modal */}
+      {showModal && (
+        <div
+          className="ads-modal-overlay"
+          onClick={() => { setShowModal(false); setEditingBanner(null); }}
+        >
+          <div className="ads-modal" onClick={e => e.stopPropagation()}>
+            <h3 className="ads-modal-title">
+              {isNew ? '新增广告位' : `编辑 - ${editingBanner?.title}`}
+            </h3>
+
+            {/* Preview */}
+            <div className="ads-form-group">
+              <label className="admin-form-label">广告位预览</label>
+              <div
+                className="ads-preview-card"
+                style={{ background: getPreviewGradient(form.linkAppId) }}
+              >
+                <div className="ads-preview-badge">推荐</div>
+                <h4 className="ads-preview-title">{form.title || '广告标题'}</h4>
+                {form.linkAppName && (
+                  <p className="ads-preview-sub">关联应用: {form.linkAppName}</p>
+                )}
+                <div className="ads-preview-visual">
+                  <div className="ads-vc ads-vc1"/>
+                  <div className="ads-vc ads-vc2"/>
+                  <div className="ads-vc ads-vc3"/>
+                </div>
+              </div>
+            </div>
+
+            {/* Title */}
+            <div className="admin-form-group">
+              <label className="admin-form-label">广告标题</label>
+              <input
+                className="admin-form-input"
+                value={form.title}
+                onChange={e => setForm({ ...form, title: e.target.value })}
+                placeholder="输入轮播图展示标题"
+              />
+            </div>
+
+            {/* Image URL + Upload + AIGC */}
+            <div className="admin-form-group">
+              <label className="admin-form-label">背景图片</label>
+              <div style={{ display: 'flex', gap: 'var(--space-sm)', marginBottom: 'var(--space-sm)' }}>
+                <input
+                  className="admin-form-input"
+                  style={{ flex: 1 }}
+                  value={form.imageUrl}
+                  onChange={e => setForm({ ...form, imageUrl: e.target.value })}
+                  placeholder="图片URL / 上传后自动填入 / 留空使用渐变色"
+                />
+              </div>
+              <div style={{ display: 'flex', gap: 'var(--space-sm)', alignItems: 'center', flexWrap: 'wrap' }}>
+                <label
+                  className="admin-btn admin-btn-outline admin-btn-sm"
+                  style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}
+                >
+                  <SVGIcon size={12}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></SVGIcon>
+                  {uploading ? '上传中...' : '上传图片'}
+                  <input
+                    type="file"
+                    accept="image/*"
+                    style={{ display: 'none' }}
+                    onChange={handleImageUpload}
+                    disabled={uploading}
+                  />
+                </label>
+                <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+                  <input
+                    type="text"
+                    className="admin-form-input"
+                    style={{ width: 180, fontSize: 'var(--text-xs)' }}
+                    value={genPrompt}
+                    onChange={e => setGenPrompt(e.target.value)}
+                    placeholder="AI绘图提示词..."
+                  />
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-outline admin-btn-sm"
+                    style={{ display: 'inline-flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}
+                    onClick={handleAIGenerate}
+                    disabled={generating}
+                  >
+                    <SVGIcon size={12}><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></SVGIcon>
+                    {generating ? '生成中...' : 'AI绘图'}
+                  </button>
+                </div>
+                {form.imageUrl && (
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-outline admin-btn-sm"
+                    style={{ color: 'var(--color-error)', borderColor: 'var(--color-error)', display: 'inline-flex', alignItems: 'center', gap: 4 }}
+                    onClick={() => setForm({ ...form, imageUrl: '' })}
+                  >
+                    <SVGIcon size={12}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></SVGIcon>
+                    清除图片
+                  </button>
+                )}
+              </div>
+              {form.imageUrl && (
+                <div style={{ marginTop: 'var(--space-sm)', borderRadius: 'var(--radius-md)', overflow: 'hidden', border: '1px solid var(--color-border)', maxWidth: 320, height: 80 }}>
+                  <img src={form.imageUrl} alt="预览" style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                    onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
+                </div>
+              )}
+            </div>
+
+            {/* Link App */}
+            <div className="admin-form-group">
+              <label className="admin-form-label">关联应用（点击跳转）</label>
+              <select
+                className="admin-form-input"
+                value={form.linkAppId || ''}
+                onChange={e => handleAppSelect(e.target.value)}
+              >
+                <option value="">-- 不关联应用 --</option>
+                {appOptions.map((app: any) => (
+                  <option key={app.id} value={app.id}>
+                    [{typeLabels[app.type] || 'app'}] {app.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Sort Order */}
+            <div className="admin-form-row">
+              <div className="admin-form-group">
+                <label className="admin-form-label">排序</label>
+                <input
+                  className="admin-form-input"
+                  type="number"
+                  value={form.sortOrder}
+                  onChange={e => setForm({ ...form, sortOrder: Number(e.target.value) })}
+                  min={1}
+                />
+              </div>
+              <div className="admin-form-group">
+                <label className="admin-form-label">状态</label>
+                <div style={{ display: 'flex', gap: 'var(--space-sm)', paddingTop: 4 }}>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-xs)', cursor: 'pointer', fontSize: 'var(--text-sm)' }}>
+                    <input
+                      type="radio"
+                      name="adStatus"
+                      checked={form.status === 'active'}
+                      onChange={() => setForm({ ...form, status: 'active' })}
+                    /> 投放中
+                  </label>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-xs)', cursor: 'pointer', fontSize: 'var(--text-sm)' }}>
+                    <input
+                      type="radio"
+                      name="adStatus"
+                      checked={form.status === 'inactive'}
+                      onChange={() => setForm({ ...form, status: 'inactive' })}
+                    /> 已暂停
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div className="admin-form-actions">
+              <button
+                className="admin-btn admin-btn-primary"
+                onClick={handleSave}
+                disabled={!form.title.trim()}
+              >
+                {isNew ? '创建' : '保存'}
+              </button>
+              <button
+                className="admin-btn admin-btn-outline"
+                onClick={() => { setShowModal(false); setEditingBanner(null); }}
+              >
+                取消
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Ads;