代码修改

2026-05-27 19:43:15 +08:00
1 parent 8f5af46ec2
commit 8f75e12871
@@ -0,0 +1,150 @@
+import { Edit, PlayCircle, Trash2 } from "lucide-react";
+import React, { useState, useMemo, useEffect } from "react";
+import { Popconfirm } from "tdesign-react";
+import { requestCrudService } from "@/service/request-axios-service";
+import { format } from "date-fns";
+import logoSvg from "@/assets/icon/轻应用logo-DB.svg";
+interface analysisListItem {
+  id: number;
+  categoryName: string;
+  category: string;
+  appName: string;
+  appDesc: string;
+  appIcon: string;
+  jumpUrl: string;
+  appType: number;
+}
+
+const service = requestCrudService;
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || "";
+export const AppCard: React.FC<{
+  app: analysisListItem;
+  isDark: boolean;
+  hoverColor: string;
+  btnClass: string;
+  delDataChange: (item: analysisListItem) => void;
+  editShowChange: (item: analysisListItem) => void;
+}> = ({ app, isDark, hoverColor, btnClass, delDataChange, editShowChange }) => {
+  const listDataChange = (item: analysisListItem) => {
+    historyCreateSearch(item);
+    // if (item.appType === 1) {
+    //   internalDataChange(item);
+    // } else if (item.appType === 2) {
+    //   externalDataChange(item);
+    // }
+  };
+
+  const internalDataChange = (item: analysisListItem) => {
+    // 内部接口跳转
+  };
+
+  const externalDataChange = (item: analysisListItem) => {
+    // 外部应用接口跳转
+    window.open(item.jumpUrl);
+  };
+
+  const handleConfirm = (item: analysisListItem) => {
+    // 确认删除逻辑
+    console.log("用户点击了确认");
+    delDataChange(item);
+    return true; // 返回 true 表示确认执行
+  };
+
+  const handleCancel = () => {
+    // 取消删除逻辑
+    console.log("用户点击了取消");
+    return true; // 返回 true 表示取消
+  };
+
+  const historyCreateSearch = async (item: analysisListItem) => {
+    const time = format(new Date(), "yyyy-MM-dd HH:mm:ss");
+    console.log("time", time);
+    const param = {
+      appId: item.id,
+      appName: item.appName,
+      runTime: time,
+    };
+    const res = await service.post(`${zncmUrl}/app/history/create`, param);
+    console.log("res", res);
+  };
+
+  return (
+    <div
+      className={`rounded-xl border p-5 transition-all relative duration-200 hover:shadow-lg group ${
+        isDark
+          ? "bg-slate-800/50 border-slate-700 hover:border-slate-600"
+          : "bg-white border-gray-200 hover:border-gray-300"
+      }`}
+    >
+      {/* 头部信息 */}
+      <div className="flex items-start gap-4 mb-4">
+        <div className="rounded-lg overflow-hidden flex-shrink-0">
+          <img
+            className="w-[47px] h-[47px] object-cover"
+            src={app.appIcon}
+            alt={app.appName}
+            onError={(e) => {
+              const target = e.target as HTMLImageElement;
+              target.src = logoSvg;
+            }}
+          />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3
+            className={`font-semibold truncate transition-colors ${hoverColor} ${
+              isDark ? "text-white" : "text-gray-900"
+            }`}
+          >
+            {app.appName}
+          </h3>
+          <p
+            className={`mt-1 text-sm line-clamp-2 ${
+              isDark ? "text-slate-400" : "text-gray-500"
+            }`}
+          >
+            {app.appDesc}
+          </p>
+        </div>
+        <div className="absolute right-[10px] top-[10px] flex items-center cursor-pointer opacity-100 group-hover:opacity-100 transition-opacity">
+          <Edit
+            className="w-4 h-4 text-[gray] mr-[10px]"
+            onClick={() => editShowChange(app)}
+          ></Edit>
+          <Popconfirm
+            content="确认删除吗"
+            onConfirm={() => handleConfirm(app)}
+            onCancel={handleCancel}
+          >
+            <div>
+              <Trash2 className="w-4 h-4 text-[#ce2d39]"></Trash2>
+            </div>
+          </Popconfirm>
+        </div>
+      </div>
+      {/* 输入输出信息 */}
+      <div
+        className={`text-xs space-y-1 mb-4 ${
+          isDark ? "text-slate-500" : "text-gray-400"
+        }`}
+      >
+        <div className="flex items-start gap-2">
+          <span className="font-medium">输入：</span>
+          <span>信息文本/链接/素材</span>
+        </div>
+        <div className="flex items-start gap-2">
+          <span className="font-medium">输出：</span>
+          <span>信息特征、重点摘要、分析判断</span>
+        </div>
+      </div>
+
+      {/* 按钮 */}
+      <button
+        className={`w-full py-2.5 rounded-lg font-medium flex items-center justify-center gap-2 transition-all border ${btnClass}`}
+        onClick={() => listDataChange(app)}
+      >
+        <PlayCircle className="w-4 h-4" />
+        立即使用
+      </button>
+    </div>
+  );
+};