Initial commit

src/pages/SettingsPage.tsx

@@ -0,0 +1,87 @@
+import { motion } from 'framer-motion'
+import { Sun, Moon, Palette } from 'lucide-react'
+import { useAppStore } from '@/stores/useAppStore'
+
+export function SettingsPage() {
+  const { darkMode, setDarkMode } = useAppStore()
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">设置</h1>
+        <p className="text-gray-500 dark:text-gray-400 mt-1">
+          自定义您的使用体验
+        </p>
+      </div>
+
+      {/* 主题设置 */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        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">
+          <Palette size={20} className="text-indigo-600 dark:text-indigo-400" />
+          <h2 className="font-semibold text-gray-900 dark:text-white">外观设置</h2>
+        </div>
+        <div className="p-6">
+          <div className="mb-4">
+            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              主题模式
+            </label>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              选择您喜欢的界面主题
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-4 max-w-xs">
+            {[
+              { value: false, label: '浅色', icon: Sun },
+              { value: true, label: '深色', icon: Moon },
+            ].map((option) => {
+              const Icon = option.icon
+              const isSelected = darkMode === option.value
+              return (
+                <button
+                  key={option.label}
+                  onClick={() => setDarkMode(option.value)}
+                  className={`flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all ${
+                    isSelected
+                      ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/30'
+                      : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
+                  }`}
+                >
+                  <Icon
+                    size={24}
+                    className={isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-500'}
+                  />
+                  <span
+                    className={`text-sm font-medium ${
+                      isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-700 dark:text-gray-300'
+                    }`}
+                  >
+                    {option.label}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      </motion.div>
+
+      {/* 关于 */}
+      <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 p-6"
+      >
+        <h2 className="font-semibold text-gray-900 dark:text-white mb-4">关于 ITTOView</h2>
+        <div className="space-y-2 text-sm text-gray-500 dark:text-gray-400">
+          <p>版本：1.0.0</p>
+          <p>基于 PMBOK 第6版</p>
+          <p>包含 49 个项目管理过程的完整 ITTO 数据</p>
+        </div>
+      </motion.div>
+    </div>
+  )
+}