Release

.gitignore

@@ -36,4 +36,10 @@ yarn-error.log*
 next-env.d.ts
 
 # vscode
-.vscode
+.vscode
+
+# idea
+.idea
+
+# pnpm-lock
+pnpm-lock.yaml

README.md

@@ -5,7 +5,7 @@
 ## Team Member
 
 | Name        | Roles                               |
-|-------------|-------------------------------------|
+| ----------- | ----------------------------------- |
 | Aaron Lee   | Technical Officer/Client Liaison    |
 | Emily Zhang | Project Manager/Front-end Developer |
 | Yilin Lyu   | Scrum Mater/Front-end Developer     |
@@ -27,6 +27,10 @@
 - zustand
 - jest
 - husky
+- icons
+  - [lucide](https://lucide.dev/icons/)
+  - [mdi](https://pictogrammers.com/library/mdi/)
+  - [iconfont](https://www.iconfont.cn/)
 
 # Environment and Tools
 

app/dashboard/components/Information-icon-text.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
+import { FaInfoCircle } from "react-icons/fa";
+import Link from "next/link";
+
+interface TooltipWithIconProps {
+  title: string;
+  linkText: string;
+  linkHref: string;
+  description: string;
+}
+
+const TooltipWithIcon: React.FC<TooltipWithIconProps> = ({
+  title,
+  linkText,
+  linkHref,
+  description,
+}) => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="ml-2 relative">
+            {/* Information Icon */}
+            <FaInfoCircle className="text-black cursor-pointer" size={18} />
+          </span>
+        </TooltipTrigger>
+
+        <TooltipContent
+          side="right"
+          align="center"
+          className="bg-white text-black rounded-lg shadow-lg p-4 w-64"
+        >
+          <div className="font-bold mb-2">{title}</div>
+          <div className="font-normal">
+            {description}{" "}
+            <Link
+              href={linkHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-500 hover:underline"
+            >
+              {linkText}
+            </Link>
+            .
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default TooltipWithIcon;

app/dashboard/components/assertion-table.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Avatar } from "@/components/ui/avatar";
+
+interface Assertion {
+  index: number;
+  content: string;
+  type: string;
+  winner: number; // 候选人的 ID
+  name: string; // 候选人名字
+}
+
+interface AssertionTableProps {
+  assertions: Assertion[];
+}
+
+const AssertionTable: React.FC<AssertionTableProps> = ({ assertions }) => {
+  return (
+    <div>
+      <table className="min-w-full table-auto">
+        <thead>
+          <tr>
+            <th className="px-4 py-2 border-b">Index</th>
+            <th className="px-4 py-2 border-b">Content</th>
+            <th className="px-4 py-2 border-b">Type</th>
+          </tr>
+        </thead>
+        <tbody>
+          {assertions.map((assertion) => (
+            <tr key={assertion.index}>
+              <td className="px-4 py-2 text-center border-b">
+                {assertion.index}
+              </td>
+              <td className="px-4 py-2 text-left border-b">
+                <div className="flex items-center justify-start">
+                  <Avatar candidateId={assertion.winner} className="mr-2" />
+                  <span>{assertion.content}</span>
+                </div>
+              </td>
+              <td className="px-4 py-2 text-center border-b">
+                {assertion.type}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default AssertionTable;

app/dashboard/components/assertions-details-modal.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from "react";
+import { Avatar } from "@/components/ui/avatar";
+import { FaInfoCircle } from "react-icons/fa";
+import Link from "next/link";
+import TooltipWithIcon from "@/app/dashboard/components/Information-icon-text";
+
+// 更新 Assertion 接口，添加 candidateId 字段
+interface Assertion {
+  index: number;
+  winner: number;
+  content: string;
+  type: string;
+  difficulty: number;
+  margin: number;
+}
+
+interface AssertionsDetailsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  assertions: Assertion[];
+  maxDifficulty: number;
+  minMargin: number;
+}
+
+const AssertionsDetailsModal: React.FC<AssertionsDetailsModalProps> = ({
+  isOpen,
+  onClose,
+  assertions,
+  maxDifficulty,
+  minMargin,
+}) => {
+  const [isTooltipVisible, setTooltipVisible] = useState(false);
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
+      <div className="bg-white rounded-lg max-w-3xl w-full mx-4 p-6 relative">
+        {/* 关闭按钮 */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-600 hover:text-gray-800"
+          aria-label="Close"
+        >
+          {/* SVG 图标 */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+
+        <h2 className="text-2xl font-bold mb-4 flex items-center relative">
+          Assertions Details
+          <TooltipWithIcon
+            title="Need Help?"
+            description="For detailed guidance on understanding the assertion attributes, please refer to our"
+            linkText="Tutorial"
+            linkHref="/tutorial"
+          />
+        </h2>
+        <div className="mb-4">
+          <p className="text-gray-700 font-bold">
+            <span className="font-semibold">Maximum Difficulty:</span>{" "}
+            {maxDifficulty}{" "}
+            <span className="font-semibold">Minimum Margin:</span> {minMargin}
+          </p>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full table-auto">
+            <thead>
+              <tr>
+                <th scope="col" className="px-4 py-2 border-b text-left">
+                  Index
+                </th>
+                <th scope="col" className="px-4 py-2 border-b text-left">
+                  Content
+                </th>
+                <th scope="col" className="px-4 py-2 border-b text-left">
+                  Type
+                </th>
+                <th scope="col" className="px-4 py-2 border-b text-left">
+                  Difficulty
+                </th>
+                <th scope="col" className="px-4 py-2 border-b text-left">
+                  Margin
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {assertions.map((assertion) => (
+                <tr key={assertion.index}>
+                  <td className="px-4 py-2 border-b">{assertion.index}</td>
+                  <td className="px-4 py-2 text-left border-b">
+                    <div className="flex items-center justify-start">
+                      {/* 使用 Avatar 组件，传入 candidateId */}
+                      <Avatar candidateId={assertion.winner} className="mr-2" />
+                      <span>{assertion.content}</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-2 border-b">{assertion.type}</td>
+                  <td className="px-4 py-2 border-b">{assertion.difficulty}</td>
+                  <td className="px-4 py-2 border-b">{assertion.margin}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AssertionsDetailsModal;

app/dashboard/components/avatar-assign-color.tsx

@@ -0,0 +1,56 @@
+//avatar-assign-color.tsx
+import React, { useEffect, useMemo, useState } from "react";
+import useMultiWinnerDataStore from "@/store/multi-winner-data";
+import { AvatarColor } from "@/utils/avatar-color";
+
+interface AvatarProps {
+  onComplete: () => void;
+}
+
+const AvatarAssignColor: React.FC<AvatarProps> = ({ onComplete }) => {
+  const { candidateList, setCandidateList } = useMultiWinnerDataStore();
+  const avatarColor = useMemo(() => new AvatarColor(), []);
+  const [hasCompleted, setHasCompleted] = useState(false);
+
+  useEffect(() => {
+    if (hasCompleted) return;
+
+    console.log("candidateList:", candidateList);
+
+    if (candidateList.length === 0) {
+      onComplete();
+      setHasCompleted(true);
+      return;
+    }
+
+    let hasUpdated = false;
+
+    const updatedCandidates = candidateList.map((candidate, index) => {
+      if (!candidate.color) {
+        hasUpdated = true;
+        const color = avatarColor.getColor(index);
+        return { ...candidate, color };
+      }
+      return candidate;
+    });
+
+    if (hasUpdated) {
+      setCandidateList(updatedCandidates);
+    }
+
+    onComplete();
+    setHasCompleted(true);
+  }, [candidateList, avatarColor, setCandidateList, onComplete, hasCompleted]);
+
+  return (
+    <div>
+      {candidateList.map((candidate) => (
+        <div key={candidate.id} style={{ backgroundColor: candidate.color }}>
+          {candidate.name}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AvatarAssignColor;

app/dashboard/components/card.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface CardProps {
+  title: string;
+  value: string | number;
+  icon?: React.ReactNode;
+}
+
+const Card: React.FC<CardProps> = ({ title, value, icon }) => {
+  return (
+    <div className="border border-gray-300 rounded-lg p-6 flex items-center justify-between w-full max-w-sm">
+      <div>
+        <h3 className="text-gray-600 text-lg font-medium">{title}</h3>
+        <p className="text-3xl font-bold">{value}</p>
+      </div>
+      {icon && <div className="text-gray-400 text-3xl">{icon}</div>}
+    </div>
+  );
+};
+
+export default Card;