fix: 修复 ESLint 错误，完善 SDK 代码规范

src/components/SDKDemo/index.tsx

+// 直接使用 SDK 示例代码的简化版本
+import React, { useEffect, useState } from 'react'
+import { createSimpleSDK } from '../../sdk'
+import aiIcon from '@/assets/ai-icon.png'
+
+const SDKDemo: React.FC = () => {
+  const [sdk, setSdk] = useState<any>(null)
+
+  useEffect(() => {
+    // 初始化 SDK - 直接使用示例代码的模式
+    const sdkInstance = createSimpleSDK({
+      apiBaseUrl: 'https://api.example.com',
+      apiKey: 'demo-key',
+    })
+    setSdk(sdkInstance)
+  }, [])
+
+  // 处理图标点击事件 - 与您提供的Vue示例逻辑一致
+  const handleIconClick = async () => {
+    if (!sdk) {
+      return
+    }
+
+    try {
+      // 调用 SDK 的测试方法
+      const result = await sdk.test()
+      // 显示 alert
+      sdk.showAlert(result.data || 'SDK 测试成功！')
+    }
+    catch (error) {
+      // 显示错误信息
+      sdk.showAlert(`错误: ${error instanceof Error ? error.message : '未知错误'}`)
+    }
+  }
+
+  return (
+    <div
+      onClick={handleIconClick}
+      style={{
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: 50,
+        cursor: 'pointer',
+        transition: 'transform 0.2s ease',
+      }}
+    >
+      <img
+        src={aiIcon}
+        alt="AI Icon"
+        style={{
+          width: '60px',
+          height: '60px',
+        }}
+      />
+    </div>
+  )
+}
+
+export default SDKDemo

src/pages/Chat/Chat.tsx

@@ -18,6 +18,7 @@ import { useAppDispatch, useAppSelector } from '@/store/hook'
 import ScrollBtoIcon from '@/assets/svg/scrollBto.svg?react'
 import ScrollBtoIcon from '@/assets/svg/scrollBto.svg?react'
 import { setIsAsking } from '@/store/chatSlice'
 import { setIsAsking } from '@/store/chatSlice'
 import SdreamLoading from '@/components/SdreamLoading'
 import SdreamLoading from '@/components/SdreamLoading'
+import SDKDemo from '@/components/SDKDemo'
 
 
 export const Chat: React.FC = () => {
 export const Chat: React.FC = () => {
   const { id } = useParams<{ id: string }>()
   const { id } = useParams<{ id: string }>()
@@ -337,6 +338,8 @@ export const Chat: React.FC = () => {
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
+      {/* SDK 演示组件 - 右下角固定位置 */}
+      <SDKDemo />
     </div>
     </div>
   )
   )
 }
 }

src/pages/Home/Home.tsx

@@ -63,8 +63,8 @@ export const Home: React.FC = () => {
                 <div className="gap-[20px] flex justify-center flex-row flex-wrap  mt-[22px] sm:mt-[62px] lg:mt-[112px]">
                 <div className="gap-[20px] flex justify-center flex-row flex-wrap  mt-[22px] sm:mt-[62px] lg:mt-[112px]">
 
 
                   <motion.div className="w-full sm:w-auto" {...getAnimationProps(1)}><WelcomeWord /></motion.div>
                   <motion.div className="w-full sm:w-auto" {...getAnimationProps(1)}><WelcomeWord /></motion.div>
-                  <motion.div className="w-full hidden sm:block sm:w-auto" {...getAnimationProps(2)}><QuestionList questions={RECOMMEND_QUESTIONS_PRODUCT} dotColor="#D4CCFF" title="产品问答" iconImg={HomeIcon1} /></motion.div>
-                  <motion.div className="w-full sm:w-auto" {...getAnimationProps(3)}><QuestionList questions={RECOMMEND_QUESTIONS_OTHER} dotColor="#CBECFF" title="您可以试着问我" iconImg={HomeIcon2} /></motion.div>
+                  <motion.div className="w-full hidden sm:block sm:w-auto" {...getAnimationProps(2)}><QuestionList questions={RECOMMEND_QUESTIONS_PRODUCT} dotColor="#D4CCFF" title="产品问答" iconImg={HomeIcon1} background="linear-gradient(135deg, #D4CCFF 0%, #E8E2FF 100%)" /></motion.div>
+                  <motion.div className="w-full sm:w-auto" {...getAnimationProps(3)}><QuestionList questions={RECOMMEND_QUESTIONS_OTHER} dotColor="#CBECFF" title="您可以试着问我" iconImg={HomeIcon2} background="linear-gradient(135deg, #CBECFF 0%, #E1F5FE 100%)" /></motion.div>
                 </div>
                 </div>
               </div>
               </div>
             </div>
             </div>

src/sdk/build.js

+#!/usr/bin/env node
+
+const fs = require('node:fs')
+const path = require('node:path')
+
+// 创建 dist 目录
+const distDir = path.join(__dirname, 'dist')
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir)
+}
+
+// 复制文件到 dist 目录
+const files = ['index.ts', 'types.ts', 'errors.ts']
+files.forEach((file) => {
+  const srcPath = path.join(__dirname, file)
+  const distPath = path.join(distDir, file)
+
+  if (fs.existsSync(srcPath)) {
+    fs.copyFileSync(srcPath, distPath)
+    // eslint-disable-next-line no-console
+    console.log(`Copied ${file} to dist/`)
+  }
+})
+
+// eslint-disable-next-line no-console
+console.log('SDK build completed!')

src/sdk/copy-to-project.bat

+@echo off
+REM SDK 复制到其他项目的 Windows 批处理脚本
+
+echo SDK 复制到其他项目脚本
+echo ================================
+
+REM 检查参数
+if "%~1"=="" (
+    echo 错误: 请提供目标项目路径
+    echo 用法: copy-to-project.bat C:\path\to\target\project
+    exit /b 1
+)
+
+set TARGET_PROJECT=%~1
+set SDK_PATH=%~dp0
+
+REM 检查目标项目是否存在
+if not exist "%TARGET_PROJECT%" (
+    echo 错误: 目标项目路径不存在: %TARGET_PROJECT%
+    exit /b 1
+)
+
+REM 创建目标目录
+set TARGET_SDK_PATH=%TARGET_PROJECT%\src\sdk
+if not exist "%TARGET_SDK_PATH%" mkdir "%TARGET_SDK_PATH%"
+
+REM 复制文件
+echo 正在复制 SDK 文件...
+xcopy "%SDK_PATH%*" "%TARGET_SDK_PATH%\" /E /I /Y
+
+REM 检查复制是否成功
+if %errorlevel% equ 0 (
+    echo ✅ SDK 复制成功！
+    echo 目标路径: %TARGET_SDK_PATH%
+    echo.
+    echo 在目标项目中使用:
+    echo import { createSimpleSDK } from './sdk';
+    echo.
+    echo 示例代码:
+    echo const sdk = createSimpleSDK({
+    echo   apiBaseUrl: 'https://api.example.com',
+    echo   apiKey: 'your-api-key'
+    echo });
+) else (
+    echo ❌ SDK 复制失败！
+    exit /b 1
+)
+
+pause

src/sdk/copy-to-project.sh

+#!/bin/bash
+
+# SDK 复制到其他项目的脚本
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+echo -e "${GREEN}SDK 复制到其他项目脚本${NC}"
+echo "================================"
+
+# 检查参数
+if [ $# -eq 0 ]; then
+    echo -e "${RED}错误: 请提供目标项目路径${NC}"
+    echo "用法: ./copy-to-project.sh /path/to/target/project"
+    exit 1
+fi
+
+TARGET_PROJECT=$1
+SDK_PATH="/Users/liu/Documents/zkr/vue3-simple-project/src/sdk"
+
+# 检查目标项目是否存在
+if [ ! -d "$TARGET_PROJECT" ]; then
+    echo -e "${RED}错误: 目标项目路径不存在: $TARGET_PROJECT${NC}"
+    exit 1
+fi
+
+# 检查 SDK 路径是否存在
+if [ ! -d "$SDK_PATH" ]; then
+    echo -e "${RED}错误: SDK 路径不存在: $SDK_PATH${NC}"
+    exit 1
+fi
+
+# 创建目标目录
+TARGET_SDK_PATH="$TARGET_PROJECT/src/sdk"
+mkdir -p "$TARGET_SDK_PATH"
+
+# 复制文件
+echo -e "${YELLOW}正在复制 SDK 文件...${NC}"
+cp -r "$SDK_PATH"/* "$TARGET_SDK_PATH/"
+
+# 检查复制是否成功
+if [ $? -eq 0 ]; then
+    echo -e "${GREEN}✅ SDK 复制成功！${NC}"
+    echo -e "${GREEN}目标路径: $TARGET_SDK_PATH${NC}"
+    echo ""
+    echo -e "${YELLOW}在目标项目中使用:${NC}"
+    echo "import { createSimpleSDK } from './sdk';"
+    echo ""
+    echo -e "${YELLOW}示例代码:${NC}"
+    echo "const sdk = createSimpleSDK({"
+    echo "  apiBaseUrl: 'https://api.example.com',"
+    echo "  apiKey: 'your-api-key'"
+    echo "});"
+else
+    echo -e "${RED}❌ SDK 复制失败！${NC}"
+    exit 1
+fi

src/sdk/errors.ts

+// 简化的错误处理
+export class SDKError extends Error {
+  public code: number
+
+  constructor(message: string, code: number = 500) {
+    super(message)
+    this.name = 'SDKError'
+    this.code = code
+  }
+}

src/sdk/examples/react-usage.tsx

+// React 项目中使用 SDK 的示例
+import React, { useEffect, useState } from 'react'
+import { createSimpleSDK } from '../index'
+
+export function ReactComponent() {
+  const [sdk, setSdk] = useState<any>(null)
+
+  useEffect(() => {
+    // 初始化 SDK
+    const sdkInstance = createSimpleSDK({
+      apiBaseUrl: 'https://api.example.com',
+      apiKey: 'your-api-key',
+    })
+    setSdk(sdkInstance)
+  }, [])
+
+  const handleClick = () => {
+    if (sdk) {
+      sdk.showAlert('Hello from React!')
+    }
+  }
+
+  return (
+    <div>
+      <button type="button" onClick={handleClick}>
+        Click me to test SDK
+      </button>
+    </div>
+  )
+}

src/sdk/examples/vanilla-js-usage.js

+// 原生 JavaScript 项目中使用 SDK 的示例
+
+// 1. 通过 script 标签引入
+// <script src="https://cdn.example.com/simple-sdk.js"></script>
+
+// 2. 使用 SDK
+// eslint-disable-next-line no-undef
+const sdk = new SimpleSDK({
+  apiBaseUrl: 'https://api.example.com',
+  apiKey: 'your-api-key',
+})
+
+// 3. 绑定事件
+document.getElementById('myButton').addEventListener('click', () => {
+  sdk.showAlert('Hello from Vanilla JS!')
+})
+
+// 4. 异步使用
+// async function _testSDK() {
+//   try {
+//     const result = await sdk.test()
+//     console.log('SDK test result:', result)
+//   }
+//   catch (error) {
+//     console.error('SDK test failed:', error)
+//   }
+// }

src/sdk/examples/vue3-usage.ts

+// Vue 3 项目中使用 SDK 的示例
+import { createSimpleSDK } from '../index'
+
+// 1. 在 Vue 组件中使用
+export function useSDK() {
+  const sdk = createSimpleSDK({
+    apiBaseUrl: 'https://api.example.com',
+    apiKey: 'your-api-key',
+  })
+
+  const handleClick = () => {
+    sdk.showAlert('Hello from Vue 3!')
+  }
+
+  return {
+    handleClick,
+    sdk,
+  }
+}
+
+// 2. 在组合式 API 中使用
+export function setupSDK() {
+  const sdk = createSimpleSDK({
+    apiBaseUrl: 'https://api.example.com',
+    apiKey: 'your-api-key',
+  })
+
+  return {
+    sdk,
+  }
+}

src/sdk/index.ts

+// 简化的 SDK 主入口
+import type { SDKConfig, SDKResponse } from './types'
+import { SDKError } from './errors'
+
+export class SimpleSDK {
+  private config: SDKConfig
+
+  constructor(config: SDKConfig) {
+    this.config = config
+  }
+
+  // 简单的测试方法
+  async test(): Promise<SDKResponse<string>> {
+    try {
+      // 模拟 API 调用
+      await new Promise(resolve => setTimeout(resolve, 1000))
+
+      return {
+        success: true,
+        data: `SDK 测试成功！API: ${this.config.apiBaseUrl}`,
+      }
+    }
+    catch {
+      throw new SDKError('SDK 测试失败', 500)
+    }
+  }
+
+  // 显示 alert 的方法
+  showAlert(message: string): void {
+    // eslint-disable-next-line no-alert
+    alert(message)
+  }
+}
+
+// 创建 SDK 实例的工厂函数
+export function createSimpleSDK(config: SDKConfig): SimpleSDK {
+  return new SimpleSDK(config)
+}
+
+// 导出类型
+export * from './types'
+export * from './errors'

src/sdk/package.json

+{
+  "name": "simple-sdk",
+  "version": "1.0.0",
+  "description": "A simple SDK for demonstration",
+  "author": "Your Name",
+  "license": "MIT",
+  "keywords": ["sdk", "typescript", "vue"],
+  "main": "index.js",
+  "types": "index.d.ts",
+  "files": [
+    "*.d.ts",
+    "*.js",
+    "*.ts"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  }
+}

src/sdk/tsconfig.json

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "rootDir": "./",
+    "module": "commonjs",
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

src/sdk/types.ts

+// 简化的 SDK 类型定义
+export interface SDKConfig {
+  apiBaseUrl: string
+  apiKey: string
+}
+
+export interface SDKResponse<T = any> {
+  success: boolean
+  data?: T
+  error?: string
+}