From 977e2d6a4337b806a702e7d1b68809db3774e269 Mon Sep 17 00:00:00 2001
From: haoxinyan <19103470692@163.com>
Date: Sat, 4 Apr 2026 18:51:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A7=91=E5=AD=A6?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=E5=99=A8Bug=E5=8F=8A=E7=BB=86=E8=8A=82?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json  |  9 ++++++++
 src/App.tsx        | 57 ++++++++++++++++++++++++++++++++++++++++++----
 tailwind.config.js |  3 +++
 3 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d9c37e5..b1c1da9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,6 +81,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.7.tgz",
       "integrity": "sha512-yJ474Zv3cwiSOO9nXJuqzvwEeM+chDuQ8GJirw+pZ91sCGCyOZ3dJkVE09fTV0VEVzXyLWhh3G/AolYTPX7Mow==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.25.7",
@@ -1319,6 +1320,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.8.1.tgz",
       "integrity": "sha512-hQUVn2Lij2NAxVFEdvIGxT9gP1tq2yM83m+by3whWFsWC+1y8pxxxHUFE1UqDu2VsGi2i6RLcv4QvouM84U+ow==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.8.1",
         "@typescript-eslint/types": "8.8.1",
@@ -1535,6 +1537,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1718,6 +1721,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001663",
         "electron-to-chromium": "^1.5.28",
@@ -2001,6 +2005,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.12.0.tgz",
       "integrity": "sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.11.0",
@@ -3083,6 +3088,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.0",
@@ -3261,6 +3267,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3737,6 +3744,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3818,6 +3826,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
       "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/src/App.tsx b/src/App.tsx
index 68ea19e..88d89e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -73,11 +73,45 @@ function App() {
     setOperation(null);
   };
 
+  const handleTrig = (func: string) => {
+    playSound(operationSound);
+    setIsAnimating(true);
+    setTimeout(() => setIsAnimating(false), 150);
+    
+    const value = parseFloat(display);
+    // 将角度转换为弧度
+    const radians = value * Math.PI / 180;
+    let result = 0;
+    
+    switch (func) {
+      case 'sin':
+        result = Math.sin(radians);
+        break;
+      case 'cos':
+        result = Math.cos(radians);
+        break;
+      case 'tan':
+        result = Math.tan(radians);
+        break;
+    }
+    
+    // 处理精度问题，确保sin90°显示1而不是0.9999999999
+    if (Math.abs(result - 1) < 0.000001) {
+      result = 1;
+    } else if (Math.abs(result) < 0.000001) {
+      result = 0;
+    }
+    
+    setDisplay(result.toString());
+    setResetDisplay(true);
+  };
+
   const clear = () => {
     playSound(clearSound);
     setIsAnimating(true);
     setTimeout(() => setIsAnimating(false), 150);
 
+    // 彻底重置所有状态
     setDisplay('0');
     setPreviousValue(null);
     setOperation(null);
@@ -94,7 +128,10 @@ function App() {
       className={`p-4 text-xl rounded-xl transition-all duration-200 
         hover:bg-opacity-80 active:scale-95 ${className}
         transform hover:-translate-y-0.5 hover:shadow-lg
-        ${isAnimating ? 'animate-pulse' : ''}`}
+        ${isAnimating ? 'animate-pulse' : ''}
+        /* 移动端响应式调整 */
+        sm:p-3 sm:text-lg
+        xs:p-2 xs:text-base`}
     >
       {children}
     </button>
@@ -118,7 +155,7 @@ function App() {
       </div>
 
       {/* Calculator */}
-      <div className={`bg-gray-800 p-6 rounded-2xl shadow-2xl w-full max-w-xs relative z-10
+      <div className={`bg-gray-800 p-4 sm:p-6 rounded-2xl shadow-2xl w-full max-w-xs relative z-10
         backdrop-blur-lg bg-opacity-90
         transform transition-all duration-300 hover:shadow-[0_0_30px_rgba(99,102,241,0.2)]
         ${isAnimating ? 'scale-[1.02]' : 'scale-100'}`}>
@@ -137,17 +174,29 @@ function App() {
           </div>
         </div>
         
-        <div className="grid grid-cols-4 gap-3">
-          <Button onClick={clear} className="bg-red-500 text-white col-span-3
+        <div className="grid grid-cols-4 gap-2 sm:gap-3">
+          <Button onClick={clear} className="bg-red-500 text-white col-span-2
             hover:bg-red-600 transition-colors duration-200">
             <div className="flex items-center justify-center gap-2">
               <RotateCcw size={20} className="animate-spin-slow" /> Clear
             </div>
           </Button>
+          <Button onClick={() => handleTrig('sin')} className="bg-purple-600 text-white
+            hover:bg-purple-700 transition-colors duration-200">
+            sin
+          </Button>
+          <Button onClick={() => handleTrig('cos')} className="bg-purple-600 text-white
+            hover:bg-purple-700 transition-colors duration-200">
+            cos
+          </Button>
           <Button onClick={() => handleOperation('/')} className="bg-indigo-600 text-white
             hover:bg-indigo-700 transition-colors duration-200">
             <Divide size={24} />
           </Button>
+          <Button onClick={() => handleTrig('tan')} className="bg-purple-600 text-white
+            hover:bg-purple-700 transition-colors duration-200 col-span-3">
+            tan
+          </Button>
           
           {['7', '8', '9'].map((num) => (
             <Button key={num} onClick={() => handleNumber(num)} className="bg-gray-700 text-white
diff --git a/tailwind.config.js b/tailwind.config.js
index 55a700a..24c0aa1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,9 @@ export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      screens: {
+        'xs': '400px',
+      },
       animation: {
         'spin-slow': 'spin 3s linear infinite',
         'float-1': 'float 20s ease-in-out infinite',