finstep-template-cli 1.0.1

package/template/src/pages/admin/index.tsx

@@ -0,0 +1,361 @@
+// AI生成的代码 - 管理后台主页组件
+import { Card, Row, Col, Statistic, Progress, Table, Tag, Button } from "antd";
+import { motion, type Variants } from "framer-motion";
+import AdminLayout from "@/components/admin-layout";
+import type { ColumnsType } from "antd/es/table";
+
+interface DashboardCard {
+  title: string;
+  description: string;
+  icon: string;
+  link: string;
+  gradient: string;
+  stats: {
+    total: number;
+    pending: number;
+    completed: number;
+  };
+}
+
+interface RecentActivity {
+  key: string;
+  user: string;
+  action: string;
+  target: string;
+  time: string;
+  status: "success" | "warning" | "error";
+}
+
+const dashboardCards: DashboardCard[] = [
+  {
+    title: "客户申请",
+    description: "管理客户试用申请和审核流程",
+    icon: "ri-file-list-line",
+    link: "/admin/applications",
+    gradient: "from-blue-500 to-cyan-500",
+    stats: {
+      total: 156,
+      pending: 23,
+      completed: 133,
+    },
+  },
+  {
+    title: "用户管理",
+    description: "管理系统用户和权限配置",
+    icon: "ri-user-line",
+    link: "/admin/users",
+    gradient: "from-purple-500 to-pink-500",
+    stats: {
+      total: 1248,
+      pending: 12,
+      completed: 1236,
+    },
+  },
+  {
+    title: "产品配置",
+    description: "配置AI产品参数和功能设置",
+    icon: "ri-settings-line",
+    link: "/admin/products",
+    gradient: "from-green-500 to-teal-500",
+    stats: {
+      total: 8,
+      pending: 2,
+      completed: 6,
+    },
+  },
+  {
+    title: "使用统计",
+    description: "查看系统使用情况和性能数据",
+    icon: "ri-bar-chart-line",
+    link: "/admin/analytics",
+    gradient: "from-orange-500 to-red-500",
+    stats: {
+      total: 99.8,
+      pending: 0.2,
+      completed: 99.6,
+    },
+  },
+];
+
+const recentActivities: RecentActivity[] = [
+  {
+    key: "1",
+    user: "张三",
+    action: "申请试用",
+    target: "智能风控系统",
+    time: "2分钟前",
+    status: "warning",
+  },
+  {
+    key: "2",
+    user: "李四",
+    action: "完成审核",
+    target: "量化交易平台",
+    time: "5分钟前",
+    status: "success",
+  },
+  {
+    key: "3",
+    user: "王五",
+    action: "登录系统",
+    target: "管理后台",
+    time: "10分钟前",
+    status: "success",
+  },
+  {
+    key: "4",
+    user: "赵六",
+    action: "配置失败",
+    target: "数据分析模块",
+    time: "15分钟前",
+    status: "error",
+  },
+  {
+    key: "5",
+    user: "钱七",
+    action: "更新配置",
+    target: "智能投顾系统",
+    time: "20分钟前",
+    status: "success",
+  },
+];
+
+const activityColumns: ColumnsType<RecentActivity> = [
+  {
+    title: "用户",
+    dataIndex: "user",
+    key: "user",
+    render: (text) => (
+      <div className="flex items-center space-x-2">
+        <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center">
+          <span className="text-white text-xs font-medium">{text[0]}</span>
+        </div>
+        <span className="text-white">{text}</span>
+      </div>
+    ),
+  },
+  {
+    title: "操作",
+    dataIndex: "action",
+    key: "action",
+    render: (text) => <span className="text-slate-300">{text}</span>,
+  },
+  {
+    title: "目标",
+    dataIndex: "target",
+    key: "target",
+    render: (text) => <span className="text-blue-400">{text}</span>,
+  },
+  {
+    title: "时间",
+    dataIndex: "time",
+    key: "time",
+    render: (text) => <span className="text-slate-400">{text}</span>,
+  },
+  {
+    title: "状态",
+    dataIndex: "status",
+    key: "status",
+    render: (status) => {
+      const statusConfig: Record<string, { color: string; text: string }> = {
+        success: { color: "green", text: "成功" },
+        warning: { color: "orange", text: "待处理" },
+        error: { color: "red", text: "失败" },
+      };
+      const config = statusConfig[status];
+      return <Tag color={config.color}>{config.text}</Tag>;
+    },
+  },
+];
+
+export default function Admin() {
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.05,
+        delayChildren: 0.05,
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.3,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  };
+
+  return (
+    <AdminLayout>
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="space-y-6"
+      >
+        {/* 页面标题 */}
+        <motion.div variants={itemVariants}>
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-white mb-2">仪表盘</h1>
+            <p className="text-slate-400">
+              欢迎回来，这里是系统概览和快速操作入口
+            </p>
+          </div>
+        </motion.div>
+
+        {/* 统计卡片 */}
+        <motion.div variants={itemVariants}>
+          <Row gutter={[24, 24]} className="mb-8">
+            <Col xs={24} sm={12} lg={6}>
+              <Card className="bg-slate-900/50 border-slate-800 hover:bg-slate-800/50 transition-all duration-300">
+                <Statistic
+                  title={<span className="text-slate-400">今日访问</span>}
+                  value={2847}
+                  prefix={<i className="ri-eye-line text-blue-500"></i>}
+                  valueStyle={{ color: "#3b82f6" }}
+                />
+              </Card>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <Card className="bg-slate-900/50 border-slate-800 hover:bg-slate-800/50 transition-all duration-300">
+                <Statistic
+                  title={<span className="text-slate-400">活跃用户</span>}
+                  value={1248}
+                  prefix={<i className="ri-user-line text-green-500"></i>}
+                  valueStyle={{ color: "#10b981" }}
+                />
+              </Card>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <Card className="bg-slate-900/50 border-slate-800 hover:bg-slate-800/50 transition-all duration-300">
+                <Statistic
+                  title={<span className="text-slate-400">待处理申请</span>}
+                  value={23}
+                  prefix={<i className="ri-file-list-line text-orange-500"></i>}
+                  valueStyle={{ color: "#f59e0b" }}
+                />
+              </Card>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <Card className="bg-slate-900/50 border-slate-800 hover:bg-slate-800/50 transition-all duration-300">
+                <Statistic
+                  title={<span className="text-slate-400">系统健康度</span>}
+                  value={99.8}
+                  suffix="%"
+                  prefix={<i className="ri-heart-pulse-line text-red-500"></i>}
+                  valueStyle={{ color: "#ef4444" }}
+                />
+              </Card>
+            </Col>
+          </Row>
+        </motion.div>
+
+        {/* 功能模块卡片 */}
+        <motion.div variants={itemVariants}>
+          <Row gutter={[24, 24]} className="mb-8">
+            {dashboardCards.map((card) => (
+              <Col key={card.title} xs={24} lg={12}>
+                <motion.div
+                  variants={itemVariants}
+                  whileHover={{ scale: 1.02 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <Card
+                    className="bg-slate-900/50 border-slate-800 hover:bg-slate-800/50 hover:border-slate-700 transition-all duration-300 h-full"
+                    styles={{ body: { padding: "24px" } }}
+                  >
+                    <div className="flex items-start justify-between mb-4">
+                      <div className="flex items-center space-x-4">
+                        <div
+                          className={`w-12 h-12 bg-gradient-to-r ${card.gradient} rounded-xl flex items-center justify-center`}
+                        >
+                          <i className={`${card.icon} text-white text-xl`}></i>
+                        </div>
+                        <div>
+                          <h3 className="text-xl font-semibold text-white mb-1">
+                            {card.title}
+                          </h3>
+                          <p className="text-slate-400 text-sm">
+                            {card.description}
+                          </p>
+                        </div>
+                      </div>
+                      <Button
+                        type="text"
+                        className="text-blue-400 hover:text-blue-300"
+                        icon={<i className="ri-arrow-right-line"></i>}
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-3 gap-4 mb-4">
+                      <div className="text-center">
+                        <div className="text-2xl font-bold text-white">
+                          {card.stats.total}
+                        </div>
+                        <div className="text-xs text-slate-400">总计</div>
+                      </div>
+                      <div className="text-center">
+                        <div className="text-2xl font-bold text-orange-400">
+                          {card.stats.pending}
+                        </div>
+                        <div className="text-xs text-slate-400">待处理</div>
+                      </div>
+                      <div className="text-center">
+                        <div className="text-2xl font-bold text-green-400">
+                          {card.stats.completed}
+                        </div>
+                        <div className="text-xs text-slate-400">已完成</div>
+                      </div>
+                    </div>
+
+                    <Progress
+                      percent={Math.round(
+                        (card.stats.completed / card.stats.total) * 100
+                      )}
+                      strokeColor={{
+                        "0%": card.gradient.split(" ")[1],
+                        "100%": card.gradient.split(" ")[3],
+                      }}
+                      trailColor="#334155"
+                      showInfo={false}
+                    />
+                  </Card>
+                </motion.div>
+              </Col>
+            ))}
+          </Row>
+        </motion.div>
+
+        {/* 最近活动 */}
+        <motion.div variants={itemVariants}>
+          <Card
+            title={
+              <span className="text-white text-lg font-semibold">最近活动</span>
+            }
+            className="bg-slate-900/50 border-slate-800"
+            extra={
+              <Button type="text" className="text-blue-400 hover:text-blue-300">
+                查看全部
+              </Button>
+            }
+          >
+            <Table
+              columns={activityColumns}
+              dataSource={recentActivities}
+              pagination={false}
+              className="bg-transparent"
+              rowClassName="bg-transparent hover:bg-slate-800/30"
+            />
+          </Card>
+        </motion.div>
+      </motion.div>
+    </AdminLayout>
+  );
+}