Initial commit

src/pages/ToolDetailPage.tsx

@@ -0,0 +1,124 @@
+/**
+ * 工具与技术详情页面
+ * 显示工具被哪些过程使用
+ */
+import { useParams, Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ArrowLeft, Wrench, ArrowRight } from 'lucide-react'
+import { toolMap, getToolUsage, knowledgeAreaMap } from '@/data'
+
+export function ToolDetailPage() {
+  const { id } = useParams()
+  const tool = id ? toolMap.get(id) : null
+  const usedByProcesses = id ? getToolUsage(id) : []
+
+  if (!tool) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          工具未找到
+        </h1>
+        <Link to="/" className="text-indigo-600 dark:text-indigo-400 hover:underline">
+          返回首页
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 返回按钮 */}
+      <Link
+        to="/"
+        className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400"
+      >
+        <ArrowLeft size={16} />
+        返回
+      </Link>
+
+      {/* 工具信息 */}
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-700"
+      >
+        <div className="flex items-center gap-4">
+          <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-amber-500 text-white">
+            <Wrench size={24} />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+              {tool.name}
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400">{tool.nameEn}</p>
+          </div>
+        </div>
+        {tool.description && (
+          <p className="mt-4 text-gray-600 dark:text-gray-300">{tool.description}</p>
+        )}
+        <div className="mt-4 flex gap-2">
+          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
+            {tool.type}
+          </span>
+          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
+            {tool.category}
+          </span>
+        </div>
+      </motion.div>
+
+      {/* 使用此工具的过程 */}
+      {usedByProcesses.length > 0 && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden"
+        >
+          <div className="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-700 bg-amber-50 dark:bg-amber-900/20">
+            <Wrench size={20} className="text-amber-600 dark:text-amber-400" />
+            <h2 className="font-semibold text-gray-900 dark:text-white">
+              使用此工具的过程（{usedByProcesses.length}）
+            </h2>
+          </div>
+          <ul className="divide-y divide-gray-100 dark:divide-gray-700">
+            {usedByProcesses.map((process) => {
+              const ka = knowledgeAreaMap.get(process.knowledgeAreaId)
+              return (
+                <li key={process.id}>
+                  <Link
+                    to={`/process/${process.id}`}
+                    className="flex items-center justify-between px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+                  >
+                    <div className="flex items-center gap-4">
+                      <div
+                        className="flex h-10 w-10 items-center justify-center rounded-lg text-white font-medium"
+                        style={{ backgroundColor: ka?.color }}
+                      >
+                        {process.code}
+                      </div>
+                      <div>
+                        <div className="font-medium text-gray-900 dark:text-white">
+                          {process.name}
+                        </div>
+                        <div className="text-sm text-gray-500 dark:text-gray-400">
+                          {ka?.name}
+                        </div>
+                      </div>
+                    </div>
+                    <ArrowRight size={18} className="text-gray-400" />
+                  </Link>
+                </li>
+              )
+            })}
+          </ul>
+        </motion.div>
+      )}
+
+      {usedByProcesses.length === 0 && (
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-100 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400">
+          暂无使用此工具的过程记录
+        </div>
+      )}
+    </div>
+  )
+}