注册页

2024-01-31 10:28:31 +08:00 · 2024-01-31 10:28:31 +08:00 · c1c326f263
commit c1c326f263
60 changed files with 4491 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,2 @@
+VITE_APP_DEV = 'dev-api'
+VITE_API_URL = 'http://192.168.10.166:8096'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,2 @@
+VITE_APP_DEV = 'prod-api'
+VITE_API_URL = 'http://192.168.10.166:8096'
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
--- a/antd-demo/.eslintrc.cjs
+++ b/antd-demo/.eslintrc.cjs
@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
--- a/antd-demo/.gitignore
+++ b/antd-demo/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/antd-demo/README.md
+++ b/antd-demo/README.md
@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
--- a/antd-demo/index.html
+++ b/antd-demo/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/antd-demo/package.json
+++ b/antd-demo/package.json
@ -0,0 +1,28 @@
+{
+  "name": "antd-demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
--- a/antd-demo/public/vite.svg
+++ b/antd-demo/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/antd-demo/src/App.css
+++ b/antd-demo/src/App.css
@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/antd-demo/src/App.tsx
+++ b/antd-demo/src/App.tsx
@ -0,0 +1,35 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App
--- a/antd-demo/src/assets/react.svg
+++ b/antd-demo/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/antd-demo/src/index.css
+++ b/antd-demo/src/index.css
@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/antd-demo/src/main.tsx
+++ b/antd-demo/src/main.tsx
@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/antd-demo/src/vite-env.d.ts
+++ b/antd-demo/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/antd-demo/tsconfig.json
+++ b/antd-demo/tsconfig.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/antd-demo/tsconfig.node.json
+++ b/antd-demo/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/antd-demo/vite.config.ts
+++ b/antd-demo/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,36 @@
+{
+  "name": "neer-app-h5",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "antd-mobile": "^5.34.0",
+    "axios": "^1.6.7",
+    "i18next": "^23.7.20",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.1",
+    "react-router-dom": "^6.21.3",
+    "sass": "^1.70.0",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.7",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,8 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,28 @@
+import "./App.css";
+import { useEffect } from "react";
+import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
+import SignIn from "./pages/SignIn";
+import Download from "./pages/Download";
+import SelectCountry from "./pages/SelectCountry";
+import { useTranslation } from "react-i18next";
+
+function App() {
+  const {i18n} = useTranslation()
+  const lang:string = navigator.language.split('-')[1].toLocaleLowerCase()
+  useEffect(()=>{    
+    i18n.changeLanguage(lang)
+  },[ i18n,lang])
+  return (
+    <Router>
+      <div>
+        <Routes>
+          <Route path="/" Component={SignIn} />
+          <Route path="/Download" Component={Download} />
+          <Route path="/SelectCountry" Component={SelectCountry} />
+        </Routes>
+      </div>
+    </Router>
+  );
+}
+
+export default App;
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -0,0 +1,15 @@
+import { request } from "./request";
+import { AxiosRequestConfig } from 'axios';
+
+//发送验证码
+export const sendCode = <T>(params: any,config:AxiosRequestConfig) =>
+  request.get<T>("/api/account/sendVerificationCode", params, {
+    timeout: 15000,
+    ...config
+  });
+//注册
+export const signUp = <T>(params: any,config:AxiosRequestConfig) =>
+  request.post<T>("/api/account/signUp", params, {
+    timeout: 15000,
+    ...config
+  });
--- a/src/api/request.ts
+++ b/src/api/request.ts
@ -0,0 +1,112 @@
+import axios, { AxiosRequestConfig, AxiosRequestHeaders } from 'axios';
+
+//基础URL，axios将会自动拼接在url前
+//process.env.NODE_ENV 判断是否为开发环境 根据不同环境使用不同的baseURL 方便调试
+const baseURL = import.meta.env.DEV ? import.meta.env.VITE_API_URL : import.meta.env.VITE_API_URL;
+//默认请求超时时间
+const timeout = 30000;
+
+//创建axios实例
+const service = axios.create({
+  timeout,
+  baseURL,
+  //如需要携带cookie 该值需设为true
+  withCredentials: true
+});
+// 统一请求拦截，可配置自定义 headers 例如 language、token 等
+service.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    // 确保 headers 对象存在
+    if (!config.headers) {
+      config.headers = {};
+    }
+    // 配置自定义请求头
+    const customHeaders: Partial<AxiosRequestHeaders> = { 
+      language: 'zh-cn',
+      // 这里可以添加其他自定义头信息，例如 token
+    };
+
+    // 合并自定义头信息到 config.headers 中
+    config.headers = { ...config.headers, ...customHeaders } as AxiosRequestHeaders;
+
+    return config;
+  },
+  error => {
+    console.log(error);
+    return Promise.reject(error);
+  }
+);
+
+//axios返回格式
+interface axiosTypes<T>{
+  data: T;
+  status: number;
+  statusText: string;
+}
+
+//后台响应数据格式
+//###该接口用于规定后台返回的数据格式，意为必须携带code、msg以及result
+//###而result的数据格式 由外部提供。如此即可根据不同需求，定制不同的数据格式
+interface responseTypes<T>{
+  code: number,
+  msg: string,
+  result: T
+}
+
+//核心处理代码 将返回一个promise 调用then将可获取响应的业务数据
+const requestHandler = <T>(method: 'get' | 'post' | 'put' | 'delete', url: string, params: object = {}, config: AxiosRequestConfig = {}): Promise<T> => {
+  let response: Promise<axiosTypes<responseTypes<T>>>;
+  switch(method){
+    case 'get':
+      response = service.get(url, {params: { ...params }, ...config});
+      break;
+    case 'post':
+      response = service.post(url, {...params}, {...config});
+      break;
+    case 'put':
+      response = service.put(url, {...params}, {...config});
+      break;
+    case 'delete':
+      response = service.delete(url, {params: { ...params }, ...config});
+      break;
+  }
+  
+  return new Promise<T>((resolve, reject) => {
+    response.then(res => {
+      //业务代码 可根据需求自行处理
+
+      const data = res.data;
+      if(data.code !== 200 && data.code !== 0){
+        
+        //特定状态码 处理特定的需求
+        if(data.code == 401){
+          console.log('登录异常，执行登出...');
+        }
+
+        const e = JSON.stringify(data);
+        console.log(`请求错误：${e}`)
+        //数据请求错误 使用reject将错误返回
+        reject(data);
+      }else{
+        //数据请求正确 使用resolve将结果返回
+        resolve(res as T);
+      }
+
+    }).catch(error => {
+      const e = JSON.stringify(error);
+      console.log(`网络错误：${e}`)
+      reject(error);
+    })
+  })
+}
+
+// 使用 request 统一调用，包括封装的get、post、put、delete等方法
+const request = {
+  get: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('get', url, params, config),
+  post: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('post', url, params, config),
+  put: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('put', url, params, config),
+  delete: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('delete', url, params, config)
+};
+
+// 导出至外层，方便统一使用
+export { request };
--- a/src/assets/iconfont/email.svg
+++ b/src/assets/iconfont/email.svg
@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
+    version="1.1" width="18" height="18" viewBox="0 0 18 18">
+    <defs>
+        <clipPath id="master_svg0_63_30775">
+            <rect x="0" y="0" width="18" height="18" rx="0" />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#master_svg0_63_30775)">
+        <g>
+            <path
+                d="M15.38570390625,3.583333L2.33317390625,3.583333C2.2623339062500003,3.583333,2.19317390625,3.592083,2.12692390625,3.6091670000000002L8.449003906249999,9.93083C8.61171390625,10.09349,8.87546390625,10.09349,9.03817390625,9.93083L15.38570390625,3.583333ZM16.28690390625,3.86042L11.19520390625,8.952079999999999L16.33070390625,14.0871C16.436903906250002,13.9471,16.49980390625,13.7725,16.49980390625,13.5833L16.49980390625,4.41667C16.49980390625,4.20292,16.41940390625,4.00833,16.28730390625,3.86042L16.28690390625,3.86042ZM15.48150390625,14.4167L10.60650390625,9.54125L9.62733390625,10.52042C9.13916390625,11.00867,8.347593906250001,11.00867,7.85942390625,10.52042L6.88067390625,9.54125L2.05400390625,14.3688C2.14150390625,14.3996,2.23525390625,14.4167,2.33358390625,14.4167L15.48190390625,14.4167L15.48150390625,14.4167ZM1.51275390625,13.7308L6.29150390625,8.95167L1.5306709062500001,4.19167C1.51018390625,4.26491,1.4998099062499999,4.34061,1.49983690625,4.41667L1.49983690625,13.5833C1.49983690625,13.6333,1.50400390625,13.6829,1.51275390625,13.7308ZM2.33317390625,2.75L15.66650390625,2.75C16.58700390625,2.75,17.33320390625,3.4961919999999997,17.33320390625,4.41667L17.33320390625,13.5833C17.33320390625,14.5038,16.58700390625,15.25,15.66650390625,15.25L2.33317390625,15.25C1.41269590625,15.25,0.66650390625,14.5038,0.66650390625,13.5833L0.66650390625,4.41667C0.666503757238,3.4961919999999997,1.41269590625,2.75,2.33317390625,2.75Z"
+                fill="#333333" fill-opacity="1" />
+        </g>
+    </g>
+</svg>
--- a/src/assets/iconfont/email_Select.svg
+++ b/src/assets/iconfont/email_Select.svg
@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
+    version="1.1" width="18" height="18" viewBox="0 0 18 18">
+    <defs>
+        <clipPath id="master_svg0_63_30775">
+            <rect x="0" y="0" width="18" height="18" rx="0" />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#master_svg0_63_30775)">
+        <g>
+            <path
+                d="M15.38570390625,3.583333L2.33317390625,3.583333C2.2623339062500003,3.583333,2.19317390625,3.592083,2.12692390625,3.6091670000000002L8.449003906249999,9.93083C8.61171390625,10.09349,8.87546390625,10.09349,9.03817390625,9.93083L15.38570390625,3.583333ZM16.28690390625,3.86042L11.19520390625,8.952079999999999L16.33070390625,14.0871C16.436903906250002,13.9471,16.49980390625,13.7725,16.49980390625,13.5833L16.49980390625,4.41667C16.49980390625,4.20292,16.41940390625,4.00833,16.28730390625,3.86042L16.28690390625,3.86042ZM15.48150390625,14.4167L10.60650390625,9.54125L9.62733390625,10.52042C9.13916390625,11.00867,8.347593906250001,11.00867,7.85942390625,10.52042L6.88067390625,9.54125L2.05400390625,14.3688C2.14150390625,14.3996,2.23525390625,14.4167,2.33358390625,14.4167L15.48190390625,14.4167L15.48150390625,14.4167ZM1.51275390625,13.7308L6.29150390625,8.95167L1.5306709062500001,4.19167C1.51018390625,4.26491,1.4998099062499999,4.34061,1.49983690625,4.41667L1.49983690625,13.5833C1.49983690625,13.6333,1.50400390625,13.6829,1.51275390625,13.7308ZM2.33317390625,2.75L15.66650390625,2.75C16.58700390625,2.75,17.33320390625,3.4961919999999997,17.33320390625,4.41667L17.33320390625,13.5833C17.33320390625,14.5038,16.58700390625,15.25,15.66650390625,15.25L2.33317390625,15.25C1.41269590625,15.25,0.66650390625,14.5038,0.66650390625,13.5833L0.66650390625,4.41667C0.666503757238,3.4961919999999997,1.41269590625,2.75,2.33317390625,2.75Z"
+                fill="#BF62FF" fill-opacity="1" />
+        </g>
+    </g>
+</svg>
--- a/src/assets/iconfont/goback.svg
+++ b/src/assets/iconfont/goback.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
+    version="1.1" width="8" height="14.9998779296875" viewBox="0 0 8 14.9998779296875">
+    <g
+        transform="matrix(1,-4.2146844236867764e-8,4.2146844236867764e-8,-1,-6.32223243066804e-7,30.0009765625)">
+        <path
+            d="M7.86661,15.84526928125C8.04444,16.03838828125,8.04444,16.35149828125,7.86661,16.54462828125L2.37623,22.507098281250002L7.85544,28.45748828125C8.03327,28.650588281250002,8.03327,28.96368828125,7.85544,29.15678828125L7.21146,29.85618828125C7.03363,30.04928828125,6.74531,30.04928828125,6.56748,29.85618828125L0.141451,22.87757828125C0.0788841,22.80962828125,0.0383307,22.72684828125,0.0197859,22.63965828125C-0.0276793,22.47051828125,0.0101683,22.27919828125,0.133367,22.14540828125L6.57865,15.14591428125C6.75648,14.95279248125,7.0448,14.95279398125,7.22263,15.14591328125L7.86661,15.84526928125Z"
+            fill-rule="evenodd" fill="#1D2129" fill-opacity="1" />
+    </g>
+</svg>
--- a/src/assets/iconfont/phone.svg
+++ b/src/assets/iconfont/phone.svg
--- a/src/assets/iconfont/phone_Select.svg
+++ b/src/assets/iconfont/phone_Select.svg
--- a/src/assets/iconfont/search.svg
+++ b/src/assets/iconfont/search.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
+    version="1.1" width="15.848514556884766" height="16" viewBox="0 0 15.848514556884766 16">
+    <g>
+        <path
+            d="M6.47238,12.9448C7.87795,12.9448,9.17411,12.4903,10.2347,11.7328C10.2347,11.7328,14.2241,15.7223,14.2241,15.7223C14.4092,15.9074,14.6534,16,14.9143,16C15.4613,16,15.8485,15.5791,15.8485,15.0405C15.8485,14.788,15.7644,14.544,15.5791,14.3671C15.5791,14.3671,11.615,10.3946,11.615,10.3946C12.4482,9.30036,12.9448,7.94529,12.9448,6.47238C12.9448,2.91215,10.0326,0,6.47238,0C2.92056,0,0,2.90373,0,6.47238C0,10.0326,2.91215,12.9448,6.47238,12.9448C6.47238,12.9448,6.47238,12.9448,6.47238,12.9448ZM6.47238,11.5476C3.69489,11.5476,1.39716,9.24986,1.39716,6.47238C1.39716,3.69489,3.69489,1.39716,6.47238,1.39716C9.24986,1.39716,11.5476,3.69489,11.5476,6.47238C11.5476,9.24986,9.24986,11.5476,6.47238,11.5476C6.47238,11.5476,6.47238,11.5476,6.47238,11.5476Z"
+            fill="#3C3C43" fill-opacity="0.6000000238418579" />
+    </g>
+</svg>
--- a/src/assets/img/app_store.png
+++ b/src/assets/img/app_store.png
--- a/src/assets/img/go_back.png
+++ b/src/assets/img/go_back.png
--- a/src/assets/img/google.png
+++ b/src/assets/img/google.png
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/EmailForm.tsx
+++ b/src/components/EmailForm.tsx
@ -0,0 +1,164 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Form, Input, Button } from "antd-mobile";
+import "../pages/SignIn.scss";
+import { useCountdown } from "../hooks/useCountdown";
+import { sendCode, signUp } from "../api";
+import { sendCodeTypes, signUpTypes } from "../type/SignIn";
+import { Toast } from "antd-mobile";
+
+function EmailForm() {
+  const { t } = useTranslation();
+  const { start, time } = useCountdown();
+  const [email, setEmail] = useState("");
+  const [authCode, setAuthCode] = useState("");
+  const [shareCode, setShareCode] = useState("");
+  const [remainingTime, setRemainingTime] = useState(0);
+  const config = {
+    headers: {
+      "Accept-Language": navigator.language,
+    },
+  };
+  const sendVerificationCode = async () => {
+    try {
+      if (email === "") {
+        return;
+      }
+      const res = await sendCode<sendCodeTypes>(
+        {
+          account: email,
+          areaCode: "",
+          status: 2,
+        },
+        config
+      );
+      console.log("res", res);
+      if (res.status === 200 && res.data.data.sms) {
+        Toast.show({
+          content: t('send successfully'),
+          afterClose: () => {
+            start(60 * 1000);
+          },
+        });
+      } else {
+        Toast.show({
+          content: t('Send failure'),
+          afterClose: () => {
+            start(60 * 1000);
+          },
+        });
+      }
+    } catch (error) {
+      Toast.show({
+        content: error?.msg,
+        afterClose: () => {
+          start(60 * 1000);
+        },
+      });
+      
+      console.warn(error);
+    }
+  };
+  useEffect(() => {
+    setRemainingTime(time / 1000);
+  }, [time]);
+  const handleSignUp = async () => {
+    if (email === "" || authCode === "") {
+      return;
+    }
+    try {
+      const res = await signUp<signUpTypes>(
+        {
+          account: email,
+          area: "",
+          areaCode: "",
+          authCode: authCode,
+          shareCode: shareCode,
+        },
+        config
+      );
+      console.log("res", res);
+      if (res.status === 200 && res.data.data.token) {
+        Toast.show({
+          content: res.data.msg,
+        });
+      } else {
+        Toast.show({
+          content: res.data.msg,
+        });
+      }
+    } catch (error) {
+      Toast.show({
+        content:  error?.msg,
+        afterClose: () => {
+          start(60 * 1000);
+        },
+      });
+      console.warn(error);
+    }
+  };
+  return (
+    <Form
+      name="form"
+      footer={
+        <Button
+          block
+          className="submit-btn"
+          type="submit"
+          color="primary"
+          size="large"
+          onClick={handleSignUp}
+        >
+          {t("register")}
+        </Button>
+      }
+    >
+      <Form.Item
+        name="account"
+        rules={[
+          { required: true, message: t("Please enter your email address") },
+        ]}
+      >
+        <Input
+          placeholder={t("Please enter your email address")}
+          value={email}
+          onChange={(text) => setEmail(text)}
+        />
+      </Form.Item>
+      <Form.Item
+        name="authCode"
+        rules={[
+          {
+            required: true,
+            message: t("Please enter the email verification code"),
+          },
+        ]}
+      >
+        <Input
+          placeholder={t("Please enter the email verification code")}
+          value={authCode}
+          onChange={(code) => setAuthCode(code)}
+        />
+      </Form.Item>
+      {remainingTime === 0 ? (
+        <p className="send-code" onClick={sendVerificationCode}>
+          {t("Send verification code")}
+        </p>
+      ) : (
+        <p className="send-code">
+          {remainingTime} {t("seconds")}
+        </p>
+      )}
+
+      <Form.Item name="shareCode">
+        <Input
+          placeholder={t("Please enter the invitation code (optional)")}
+          value={shareCode}
+          onChange={(code) => setShareCode(code)}
+        />
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default EmailForm;
--- a/src/components/PhoneForm.tsx
+++ b/src/components/PhoneForm.tsx
@ -0,0 +1,181 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Form, Input, Button } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+import "../pages/SignIn.scss";
+import useUserStore from "../store/user.ts";
+import { useCountdown } from "../hooks/useCountdown";
+import { sendCode, signUp } from "../api";
+import { sendCodeTypes, signUpTypes } from "../type/SignIn";
+import { Toast } from "antd-mobile";
+
+function PhoneForm() {
+  const { t } = useTranslation();
+  const { start, time } = useCountdown();
+  const navigate = useNavigate();
+  const {
+    SelectCountry,
+    CurrentPhoneNumber,
+    UpdateCurrentPhoneNumber,
+    UpdatePreviousPathName,
+  } = useUserStore();
+  const defaultAreaCode = "+1";
+  const [authCode, setAuthCode] = useState("");
+  const [shareCode, setShareCode] = useState("");
+  const [remainingTime, setRemainingTime] = useState(0);
+
+  const gotoSelectCountry = () => {
+    UpdatePreviousPathName("/");
+    navigate("/SelectCountry");
+  };
+  const phoneChange = (val: string) => {
+    UpdateCurrentPhoneNumber(val);
+  };
+  const config = {
+    headers: {
+      "Accept-Language": navigator.language,
+    },
+  };
+  const sendVerificationCode = async () => {
+    try {
+      if (CurrentPhoneNumber === "") {
+        return;
+      }
+      const res = await sendCode<sendCodeTypes>({
+        account: CurrentPhoneNumber,
+        areaCode: SelectCountry?.code,
+        status: 2,
+      },config);
+      console.log("res", res);
+      if (res.status === 200 && res.data.data.sms) {
+        Toast.show({
+          content:t('send successfully'),
+          afterClose: () => {
+            start(60 * 1000);
+          },
+        });
+      } else {
+        Toast.show({
+          content: t('Send failure'),
+          afterClose: () => {
+            start(60 * 1000);
+          },
+        });
+      }
+    } catch (error) {
+      Toast.show({
+        content:  error?.msg,
+        afterClose: () => {
+          start(60 * 1000);
+        },
+      });
+      console.warn(error);
+    }
+  };
+  useEffect(() => {
+    setRemainingTime(time / 1000)
+  }, [time]);
+
+  const handleSignUp = async () =>{    
+    if(CurrentPhoneNumber === '' || authCode === '') {
+     return
+    }
+    try {
+      const res = await signUp<signUpTypes>({
+        account:CurrentPhoneNumber,
+        area:SelectCountry?.cn,
+        areaCode:SelectCountry?.code,
+        authCode:authCode,
+        shareCode:shareCode
+      },config)
+      console.log('res',res)
+      if(res.status === 200 && res.data.data.token) {
+        Toast.show({
+          content: res.data.msg,
+        })
+      }else {
+        Toast.show({
+          content: res.data.msg,
+        })
+      }
+    } catch (error) {
+      Toast.show({
+        content: error?.msg,
+        afterClose: () => {
+          start(60 * 1000);
+        },
+      });
+      console.warn(error);
+    }
+    
+
+  };
+  return (
+    <Form
+      name="form"
+      footer={
+        <Button
+          block
+          className="submit-btn"
+          type="submit"
+          color="primary"
+          size="large"
+          onClick={handleSignUp}
+        >
+          {t("register")}
+        </Button>
+      }
+    >
+      <Form.Item
+        name="account"
+        rules={[
+          { required: true, message: t("Please enter your phone number") },
+        ]}
+      >
+        <div className="phone-box">
+          <span onClick={gotoSelectCountry}>
+            {SelectCountry?.code || defaultAreaCode}
+          </span>
+          <Input
+            placeholder={t("Please enter your phone number")}
+            onChange={(val) => phoneChange(val)}
+            value={CurrentPhoneNumber}
+          />
+        </div>
+      </Form.Item>
+      <Form.Item
+        name="authCode"
+        rules={[
+          {
+            required: true,
+            message: t("Please enter SMS verification code"),
+          },
+        ]}
+      >
+        <Input
+          placeholder={t("Please enter SMS verification code")}
+          value={authCode}
+          onChange={(code) => setAuthCode(code)}
+        />
+      </Form.Item>
+      {remainingTime === 0 ? (
+        <p className="send-code" onClick={sendVerificationCode}>
+          {t("Send verification code")}
+        </p>
+      ) : (
+        <p className="send-code">
+          {remainingTime} {t("seconds")}
+        </p>
+      )}
+      <Form.Item name="shareCode">
+        <Input
+          placeholder={t("Please enter the invitation code (optional)")}
+          value={shareCode}
+          onChange={(code) => setShareCode(code)}
+        />
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default PhoneForm;
--- a/src/hooks/useCountdown.ts
+++ b/src/hooks/useCountdown.ts
@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+
+// 倒计时hook
+export const useCountdown = () => {
+  const [time, setTime] = useState<number>(0);
+  const [timer, setTimer] = useState<NodeJS.Timeout | null>();
+
+  useEffect(() => {
+    if (time == 0) {
+      if (timer) clearInterval(timer);
+      setTimer(null);
+    }
+  }, [time]);
+
+  function start(newTime: number) {
+    // console.log("new time is:", newTime);
+    setTime(newTime);
+    if (timer) {
+      clearInterval(timer);
+      setTimer(null);
+    }
+
+    if (newTime > 0) {
+      setTimer(
+        setInterval(() => {
+          setTime((prevTime: number) => {
+            // console.log("time tick...", prevTime);
+            if (prevTime == 0) {
+              return prevTime;
+            }
+            return prevTime - 1000;
+          });
+        }, 1000)
+      );
+    }
+  }
+
+  return { time, start };
+};
--- a/src/i18n/area/area.json
+++ b/src/i18n/area/area.json
@ -0,0 +1,952 @@
+[
+    {
+        "en": "Angola",
+        "cn": "安哥拉",
+        "code": "+0244"
+    },
+    {
+        "en": "Afghanistan",
+        "cn": "阿富汗",
+        "code": "+93"
+    },
+    {
+        "en": "Albania",
+        "cn": "阿尔巴尼亚",
+        "code": "+335"
+    },
+    {
+        "en": "Algeria",
+        "cn": "阿尔及利亚",
+        "code": "+213"
+    },
+    {
+        "en": "Andorra",
+        "cn": "安道尔共和国",
+        "code": "+376"
+    },
+    {
+        "en": "Anguilla",
+        "cn": "安圭拉岛",
+        "code": "+1254"
+    },
+    {
+        "en": "Antigua and Barbuda",
+        "cn": "安提瓜和巴布达",
+        "code": "+1268"
+    },
+    {
+        "en": "Argentina",
+        "cn": "阿根廷",
+        "code": "+54"
+    },
+    {
+        "en": "Armenia",
+        "cn": "亚美尼亚",
+        "code": "+374"
+    },
+    {
+        "en": "Ascension",
+        "cn": "阿森松",
+        "code": "+247"
+    },
+    {
+        "en": "Australia",
+        "cn": "澳大利亚",
+        "code": "+61"
+    },
+    {
+        "en": "Austria",
+        "cn": "奥地利",
+        "code": "+43"
+    },
+    {
+        "en": "Azerbaijan",
+        "cn": "阿塞拜疆",
+        "code": "+994"
+    },
+    {
+        "en": "Bahamas",
+        "cn": "巴哈马",
+        "code": "+1242"
+    },
+    {
+        "en": "Bahrain",
+        "cn": "巴林",
+        "code": "+973"
+    },
+    {
+        "en": "Bangladesh",
+        "cn": "孟加拉国",
+        "code": "+880"
+    },
+    {
+        "en": "Barbados",
+        "cn": "巴巴多斯",
+        "code": "+1246"
+    },
+    {
+        "en": "Belarus",
+        "cn": "白俄罗斯",
+        "code": "+375"
+    },
+    {
+        "en": "Belgium",
+        "cn": "比利时",
+        "code": "+32"
+    },
+    {
+        "en": "Belize",
+        "cn": "伯利兹",
+        "code": "+501"
+    },
+    {
+        "en": "Benin",
+        "cn": "贝宁",
+        "code": "+229"
+    },
+    {
+        "en": "Bermuda Is",
+        "cn": "百慕大群岛",
+        "code": "+1441"
+    },
+    {
+        "en": "Bolivia",
+        "cn": "玻利维亚",
+        "code": "+591"
+    },
+    {
+        "en": "Botswana",
+        "cn": "博茨瓦纳",
+        "code": "+267"
+    },
+    {
+        "en": "Brazil",
+        "cn": "巴西",
+        "code": "+55"
+    },
+    {
+        "en": "Brunei",
+        "cn": "文莱",
+        "code": "+673"
+    },
+    {
+        "en": "Bulgaria",
+        "cn": "保加利亚",
+        "code": "+359"
+    },
+    {
+        "en": "Burkina Faso",
+        "cn": "布基纳法索",
+        "code": "+226"
+    },
+    {
+        "en": "Burma",
+        "cn": "缅甸",
+        "code": "+95"
+    },
+    {
+        "en": "Burundi",
+        "cn": "布隆迪",
+        "code": "+257"
+    },
+    {
+        "en": "Cameroon",
+        "cn": "喀麦隆",
+        "code": "+237"
+    },
+    {
+        "en": "Canada",
+        "cn": "加拿大",
+        "code": "+1"
+    },
+    {
+        "en": "Cayman Is",
+        "cn": "开曼群岛",
+        "code": "+1345"
+    },
+    {
+        "en": "Central African Republic",
+        "cn": "中非共和国",
+        "code": "+236"
+    },
+    {
+        "en": "Chad",
+        "cn": "乍得",
+        "code": "+235"
+    },
+    {
+        "en": "Chile",
+        "cn": "智利",
+        "code": "+56"
+    },
+    {
+        "en": "China",
+        "cn": "中国",
+        "code": "+86"
+    },
+    {
+        "en": "Colombia",
+        "cn": "哥伦比亚",
+        "code": "+57"
+    },
+    {
+        "en": "Congo",
+        "cn": "刚果",
+        "code": "+242"
+    },
+    {
+        "en": "Cook Is",
+        "cn": "库克群岛",
+        "code": "+682"
+    },
+    {
+        "en": "Costa Rica",
+        "cn": "哥斯达黎加",
+        "code": "+506"
+    },
+    {
+        "en": "Cuba",
+        "cn": "古巴",
+        "code": "+53"
+    },
+    {
+        "en": "Cyprus",
+        "cn": "塞浦路斯",
+        "code": "+357"
+    },
+    {
+        "en": "Czech Republic",
+        "cn": "捷克",
+        "code": "+420"
+    },
+    {
+        "en": "Denmark",
+        "cn": "丹麦",
+        "code": "+45"
+    },
+    {
+        "en": "Djibouti",
+        "cn": "吉布提",
+        "code": "+253"
+    },
+    {
+        "en": "Dominica Rep",
+        "cn": "多米尼加共和国",
+        "code": "+1890"
+    },
+    {
+        "en": "Ecuador",
+        "cn": "厄瓜多尔",
+        "code": "+593"
+    },
+    {
+        "en": "Egypt",
+        "cn": "埃及",
+        "code": "+20"
+    },
+    {
+        "en": "EI Salvador",
+        "cn": "萨尔瓦多",
+        "code": "+503"
+    },
+    {
+        "en": "Estonia",
+        "cn": "爱沙尼亚",
+        "code": "+372"
+    },
+    {
+        "en": "Ethiopia",
+        "cn": "埃塞俄比亚",
+        "code": "+251"
+    },
+    {
+        "en": "Fiji",
+        "cn": "斐济",
+        "code": "+679"
+    },
+    {
+        "en": "Finland",
+        "cn": "芬兰",
+        "code": "+358"
+    },
+    {
+        "en": "France",
+        "cn": "法国",
+        "code": "+33"
+    },
+    {
+        "en": "French Guiana",
+        "cn": "法属圭亚那",
+        "code": "+594"
+    },
+    {
+        "en": "French Polynesia",
+        "cn": "法属玻利尼西亚",
+        "code": "+689"
+    },
+    {
+        "en": "Gabon",
+        "cn": "加蓬",
+        "code": "+241"
+    },
+    {
+        "en": "Gambia",
+        "cn": "冈比亚",
+        "code": "+220"
+    },
+    {
+        "en": "Georgia",
+        "cn": "格鲁吉亚",
+        "code": "+995"
+    },
+    {
+        "en": "Germany",
+        "cn": "德国",
+        "code": "+49"
+    },
+    {
+        "en": "Ghana",
+        "cn": "加纳",
+        "code": "+233"
+    },
+    {
+        "en": "Gibraltar",
+        "cn": "直布罗陀",
+        "code": "+350"
+    },
+    {
+        "en": "Greece",
+        "cn": "希腊",
+        "code": "+30"
+    },
+    {
+        "en": "Grenada",
+        "cn": "格林纳达",
+        "code": "+1809"
+    },
+    {
+        "en": "Guam",
+        "cn": "关岛",
+        "code": "+1671"
+    },
+    {
+        "en": "Guatemala",
+        "cn": "危地马拉",
+        "code": "+502"
+    },
+    {
+        "en": "Guinea",
+        "cn": "几内亚",
+        "code": "+224"
+    },
+    {
+        "en": "Guyana",
+        "cn": "圭亚那",
+        "code": "+592"
+    },
+    {
+        "en": "Haiti",
+        "cn": "海地",
+        "code": "+509"
+    },
+    {
+        "en": "Honduras",
+        "cn": "洪都拉斯",
+        "code": "+504"
+    },
+    {
+        "en": "Hongkong",
+        "cn": "香港",
+        "code": "+852"
+    },
+    {
+        "en": "Hungary",
+        "cn": "匈牙利",
+        "code": "+36"
+    },
+    {
+        "en": "Iceland",
+        "cn": "冰岛",
+        "code": "+354"
+    },
+    {
+        "en": "India",
+        "cn": "印度",
+        "code": "+91"
+    },
+    {
+        "en": "Indonesia",
+        "cn": "印度尼西亚",
+        "code": "+62"
+    },
+    {
+        "en": "Iran",
+        "cn": "伊朗",
+        "code": "+98"
+    },
+    {
+        "en": "Iraq",
+        "cn": "伊拉克",
+        "code": "+964"
+    },
+    {
+        "en": "Ireland",
+        "cn": "爱尔兰",
+        "code": "+353"
+    },
+    {
+        "en": "Israel",
+        "cn": "以色列",
+        "code": "+972"
+    },
+    {
+        "en": "Italy",
+        "cn": "意大利",
+        "code": "+39"
+    },
+    {
+        "en": "Ivory Coast",
+        "cn": "科特迪瓦",
+        "code": "+225"
+    },
+    {
+        "en": "Jamaica",
+        "cn": "牙买加",
+        "code": "+1876"
+    },
+    {
+        "en": "Japan",
+        "cn": "日本",
+        "code": "+81"
+    },
+    {
+        "en": "Jordan",
+        "cn": "约旦",
+        "code": "+962"
+    },
+    {
+        "en": "Kampuchea (Cambodia )",
+        "cn": "柬埔寨",
+        "code": "+855"
+    },
+    {
+        "en": "Kazakstan",
+        "cn": "哈萨克斯坦",
+        "code": "+327"
+    },
+    {
+        "en": "Kenya",
+        "cn": "肯尼亚",
+        "code": "+254"
+    },
+    {
+        "en": "Korea",
+        "cn": "韩国",
+        "code": "+82"
+    },
+    {
+        "en": "Kuwait",
+        "cn": "科威特",
+        "code": "+965"
+    },
+    {
+        "en": "Kyrgyzstan",
+        "cn": "吉尔吉斯坦",
+        "code": "+331"
+    },
+    {
+        "en": "Laos",
+        "cn": "老挝",
+        "code": "+856"
+    },
+    {
+        "en": "Latvia",
+        "cn": "拉脱维亚",
+        "code": "+371"
+    },
+    {
+        "en": "Lebanon",
+        "cn": "黎巴嫩",
+        "code": "+961"
+    },
+    {
+        "en": "Lesotho",
+        "cn": "莱索托",
+        "code": "+266"
+    },
+    {
+        "en": "Liberia",
+        "cn": "利比里亚",
+        "code": "+231"
+    },
+    {
+        "en": "Libya",
+        "cn": "利比亚",
+        "code": "+218"
+    },
+    {
+        "en": "Liechtenstein",
+        "cn": "列支敦士登",
+        "code": "+423"
+    },
+    {
+        "en": "Lithuania",
+        "cn": "立陶宛",
+        "code": "+370"
+    },
+    {
+        "en": "Luxembourg",
+        "cn": "卢森堡",
+        "code": "+352"
+    },
+    {
+        "en": "Macao",
+        "cn": "澳门",
+        "code": "+853"
+    },
+    {
+        "en": "Madagascar",
+        "cn": "马达加斯加",
+        "code": "+261"
+    },
+    {
+        "en": "Malawi",
+        "cn": "马拉维",
+        "code": "+265"
+    },
+    {
+        "en": "Malaysia",
+        "cn": "马来西亚",
+        "code": "+60"
+    },
+    {
+        "en": "Maldives",
+        "cn": "马尔代夫",
+        "code": "+960"
+    },
+    {
+        "en": "Mali",
+        "cn": "马里",
+        "code": "+223"
+    },
+    {
+        "en": "Malta",
+        "cn": "马耳他",
+        "code": "+356"
+    },
+    {
+        "en": "Mariana Is",
+        "cn": "马里亚那群岛",
+        "code": "+1670"
+    },
+    {
+        "en": "Martinique",
+        "cn": "马提尼克",
+        "code": "+596"
+    },
+    {
+        "en": "Mauritius",
+        "cn": "毛里求斯",
+        "code": "+230"
+    },
+    {
+        "en": "Mexico",
+        "cn": "墨西哥",
+        "code": "+52"
+    },
+    {
+        "en": "Moldova",
+        "cn": "摩尔多瓦",
+        "code": "+373"
+    },
+    {
+        "en": "Monaco",
+        "cn": "摩纳哥",
+        "code": "+377"
+    },
+    {
+        "en": "Mongolia",
+        "cn": "蒙古",
+        "code": "+976"
+    },
+    {
+        "en": "Montserrat Is",
+        "cn": "蒙特塞拉特岛",
+        "code": "+1664"
+    },
+    {
+        "en": "Morocco",
+        "cn": "摩洛哥",
+        "code": "+212"
+    },
+    {
+        "en": "Mozambique",
+        "cn": "莫桑比克",
+        "code": "+258"
+    },
+    {
+        "en": "Namibia",
+        "cn": "纳米比亚",
+        "code": "+264"
+    },
+    {
+        "en": "Nauru",
+        "cn": "瑙鲁",
+        "code": "+674"
+    },
+    {
+        "en": "Nepal",
+        "cn": "尼泊尔",
+        "code": "+977"
+    },
+    {
+        "en": "Netheriands Antilles",
+        "cn": "荷属安的列斯",
+        "code": "+599"
+    },
+    {
+        "en": "Netherlands",
+        "cn": "荷兰",
+        "code": "+31"
+    },
+    {
+        "en": "New Zealand",
+        "cn": "新西兰",
+        "code": "+64"
+    },
+    {
+        "en": "Nicaragua",
+        "cn": "尼加拉瓜",
+        "code": "+505"
+    },
+    {
+        "en": "Niger",
+        "cn": "尼日尔",
+        "code": "+227"
+    },
+    {
+        "en": "Nigeria",
+        "cn": "尼日利亚",
+        "code": "+234"
+    },
+    {
+        "en": "North Korea",
+        "cn": "朝鲜",
+        "code": "+850"
+    },
+    {
+        "en": "Norway",
+        "cn": "挪威",
+        "code": "+47"
+    },
+    {
+        "en": "Oman",
+        "cn": "阿曼",
+        "code": "+968"
+    },
+    {
+        "en": "Pakistan",
+        "cn": "巴基斯坦",
+        "code": "+92"
+    },
+    {
+        "en": "Panama",
+        "cn": "巴拿马",
+        "code": "+507"
+    },
+    {
+        "en": "Papua New Cuinea",
+        "cn": "巴布亚新几内亚",
+        "code": "+675"
+    },
+    {
+        "en": "Paraguay",
+        "cn": "巴拉圭",
+        "code": "+595"
+    },
+    {
+        "en": "Peru",
+        "cn": "秘鲁",
+        "code": "+51"
+    },
+    {
+        "en": "Philippines",
+        "cn": "菲律宾",
+        "code": "+63"
+    },
+    {
+        "en": "Poland",
+        "cn": "波兰",
+        "code": "+48"
+    },
+    {
+        "en": "Portugal",
+        "cn": "葡萄牙",
+        "code": "+351"
+    },
+    {
+        "en": "Puerto Rico",
+        "cn": "波多黎各",
+        "code": "+1787"
+    },
+    {
+        "en": "Qatar",
+        "cn": "卡塔尔",
+        "code": "+974"
+    },
+    {
+        "en": "Reunion",
+        "cn": "留尼旺",
+        "code": "+262"
+    },
+    {
+        "en": "Romania",
+        "cn": "罗马尼亚",
+        "code": "+40"
+    },
+    {
+        "en": "Russia",
+        "cn": "俄罗斯",
+        "code": "+7"
+    },
+    {
+        "en": "Saint Lueia",
+        "cn": "圣卢西亚",
+        "code": "+1758"
+    },
+    {
+        "en": "Saint Vincent",
+        "cn": "圣文森特岛",
+        "code": "+1784"
+    },
+    {
+        "en": "Samoa Eastern",
+        "cn": "东萨摩亚(美)",
+        "code": "+684"
+    },
+    {
+        "en": "Samoa Western",
+        "cn": "西萨摩亚",
+        "code": "+685"
+    },
+    {
+        "en": "San Marino",
+        "cn": "圣马力诺",
+        "code": "+378"
+    },
+    {
+        "en": "Sao Tome and Principe",
+        "cn": "圣多美和普林西比",
+        "code": "+239"
+    },
+    {
+        "en": "Saudi Arabia",
+        "cn": "沙特阿拉伯",
+        "code": "+966"
+    },
+    {
+        "en": "Senegal",
+        "cn": "塞内加尔",
+        "code": "+221"
+    },
+    {
+        "en": "Seychelles",
+        "cn": "塞舌尔",
+        "code": "+248"
+    },
+    {
+        "en": "Sierra Leone",
+        "cn": "塞拉利昂",
+        "code": "+232"
+    },
+    {
+        "en": "Singapore",
+        "cn": "新加坡",
+        "code": "+65"
+    },
+    {
+        "en": "Slovakia",
+        "cn": "斯洛伐克",
+        "code": "+421"
+    },
+    {
+        "en": "Slovenia",
+        "cn": "斯洛文尼亚",
+        "code": "+386"
+    },
+    {
+        "en": "Solomon Is",
+        "cn": "所罗门群岛",
+        "code": "+677"
+    },
+    {
+        "en": "Somali",
+        "cn": "索马里",
+        "code": "+252"
+    },
+    {
+        "en": "South Africa",
+        "cn": "南非",
+        "code": "+27"
+    },
+    {
+        "en": "Spain",
+        "cn": "西班牙",
+        "code": "+34"
+    },
+    {
+        "en": "SriLanka",
+        "cn": "斯里兰卡",
+        "code": "+94"
+    },
+    {
+        "en": "Sudan",
+        "cn": "苏丹",
+        "code": "+249"
+    },
+    {
+        "en": "Suriname",
+        "cn": "苏里南",
+        "code": "+597"
+    },
+    {
+        "en": "Swaziland",
+        "cn": "斯威士兰",
+        "code": "+268"
+    },
+    {
+        "en": "Sweden",
+        "cn": "瑞典",
+        "code": "+46"
+    },
+    {
+        "en": "Switzerland",
+        "cn": "瑞士",
+        "code": "+41"
+    },
+    {
+        "en": "Syria",
+        "cn": "叙利亚",
+        "code": "+963"
+    },
+    {
+        "en": "Taiwan",
+        "cn": "台湾省",
+        "code": "+886"
+    },
+    {
+        "en": "Tajikstan",
+        "cn": "塔吉克斯坦",
+        "code": "+992"
+    },
+    {
+        "en": "Tanzania",
+        "cn": "坦桑尼亚",
+        "code": "+255"
+    },
+    {
+        "en": "Thailand",
+        "cn": "泰国",
+        "code": "+66"
+    },
+    {
+        "en": "Togo",
+        "cn": "多哥",
+        "code": "+228"
+    },
+    {
+        "en": "Tonga",
+        "cn": "汤加",
+        "code": "+676"
+    },
+    {
+        "en": "Trinidad and Tobago",
+        "cn": "特立尼达和多巴哥",
+        "code": "+1809"
+    },
+    {
+        "en": "Tunisia",
+        "cn": "突尼斯",
+        "code": "+216"
+    },
+    {
+        "en": "Turkey",
+        "cn": "土耳其",
+        "code": "+90"
+    },
+    {
+        "en": "Turkmenistan",
+        "cn": "土库曼斯坦",
+        "code": "+993"
+    },
+    {
+        "en": "Uganda",
+        "cn": "乌干达",
+        "code": "+256"
+    },
+    {
+        "en": "Ukraine",
+        "cn": "乌克兰",
+        "code": "+380"
+    },
+    {
+        "en": "United Arab Emirates",
+        "cn": "阿拉伯联合酋长国",
+        "code": "+971"
+    },
+    {
+        "en": "United Kiongdom",
+        "cn": "英国",
+        "code": "+44"
+    },
+    {
+        "en": "United States of America",
+        "cn": "美国",
+        "code": "+1"
+    },
+    {
+        "en": "Uruguay",
+        "cn": "乌拉圭",
+        "code": "+598"
+    },
+    {
+        "en": "Uzbekistan",
+        "cn": "乌兹别克斯坦",
+        "code": "+233"
+    },
+    {
+        "en": "Venezuela",
+        "cn": "委内瑞拉",
+        "code": "+58"
+    },
+    {
+        "en": "Vietnam",
+        "cn": "越南",
+        "code": "+84"
+    },
+    {
+        "en": "Yemen",
+        "cn": "也门",
+        "code": "+967"
+    },
+    {
+        "en": "Yugoslavia",
+        "cn": "南斯拉夫",
+        "code": "+381"
+    },
+    {
+        "en": "Zimbabwe",
+        "cn": "津巴布韦",
+        "code": "+263"
+    },
+    {
+        "en": "Zaire",
+        "cn": "扎伊尔",
+        "code": "+243"
+    },
+    {
+        "en": "Zambia",
+        "cn": "赞比亚",
+        "code": "+260"
+    }
+]
--- a/src/i18n/cn/translation.json
+++ b/src/i18n/cn/translation.json
@ -0,0 +1,24 @@
+{
+    "E-mail": "电子邮件",
+    "phone":"电话",
+    "Please enter your email address":"请输入您的电子邮件地址",
+    "Please enter the email verification code":"请输入电子邮件验证码",
+    "Please enter your phone number":"请输入您的电话号码",
+    "Please enter SMS verification code":"请输入短信验证码",
+    "Send verification code":"发送验证码",
+    "Please enter the invitation code (optional)":"请输入邀请码(可选)",
+    "register":"注册",
+    "If you already have an account":"如果你已经有一个帐户",
+    "download the APP directly":"直接下载APP",
+    "Continuing to represent you in agreeing to our":"继续代表你方同意我们的",
+    "Terms of Service":"服务条款",
+    "and":"和",
+    "Privacy Policy":"隐私政策",
+    "Select country/region":"选择国家/地区",
+    "seconds":  "秒",
+    "Official Website":"官方网站",
+    "Download":"下载",
+    "send successfully":"发送成功",
+    "Send failure":"发送失败"
+  }
+  
--- a/src/i18n/config.ts
+++ b/src/i18n/config.ts
@ -0,0 +1,27 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-01-23 10:20:43
+ * @LastEditTime: 2024-01-23 11:02:38
+ * @Author: John
+ */
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import translation_en from "./en/translation.json";
+import translation_cn from "./cn/translation.json";
+const resources = {
+  en:{
+    translation:translation_en,
+  },
+  cn:{
+    translation:translation_cn,
+  },
+}
+i18next.use(initReactI18next).init({
+  resources,
+  lng: "en", // if you're using a language detector, do not define the lng option
+  debug: false,
+  interpolation:{
+    escapeValue:false,
+  }
+});
+export default i18next;
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@ -0,0 +1,23 @@
+{
+  "E-mail": "E-mail",
+  "phone":"phone",
+  "Please enter your email address":"Please enter your email address",
+  "Please enter the email verification code":"Please enter the email verification code",
+  "Please enter your phone number":"Please enter your phone number",
+  "Please enter SMS verification code":"Please enter SMS verification code",
+  "Send verification code":"Send verification code",
+  "Please enter the invitation code (optional)":"Please enter the invitation code (optional)",
+  "register":"register",
+  "If you already have an account":"If you already have an account",
+  "download the APP directly":"download the APP directly",
+  "Continuing to represent you in agreeing to our":"Continuing to represent you in agreeing to our",
+  "Terms of Service":"Terms of Service",
+  "and":"and",
+  "Privacy Policy":"Privacy Policy",
+  "Select country/region":"Select country/region",
+  "seconds":  "s",
+  "Official Website":"Official Website",
+  "Download":"Download",
+  "send successfully":"send successfully",
+  "Send failure":"Send failure"
+}
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,73 @@
+:
+ {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #fafafb;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+#root {
+  padding: 0;
+  background: #fafafb;
+  
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320rpx;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+import './i18n/config.ts'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/src/pages/Download.scss
+++ b/src/pages/Download.scss
@ -0,0 +1,41 @@
+.container {
+    background: #fafafb;
+    width: 100vw;
+    min-height: 100vh;
+    padding: 4.625rem 2.5rem;
+    box-sizing: border-box;
+
+    .logo {
+        width: 4.25rem;
+        height: 4.25rem;
+        background: #bf62ff;
+        border-radius: 50%;
+        margin-left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .btn-box {
+        margin-top: 11.4375rem;
+        .btn-item {
+            width: 18.4375rem;
+            height: 2.75rem;
+            border-radius: .3125rem;
+            box-sizing: border-box;
+            border: .0625rem solid #BF62FF;
+            margin-bottom: 1.25rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                width: 1.5rem;
+                height: 1.5rem;
+                margin-right: .625rem;
+            }
+            a {
+                font-family: PingFang SC;
+                font-size: 1.125rem;
+                color: #333333;
+            }
+        }
+    }
+}
--- a/src/pages/Download.tsx
+++ b/src/pages/Download.tsx
@ -0,0 +1,33 @@
+import googleIcon from '../assets/img/google.png'
+import appStoreIcon from '../assets/img/app_store.png'
+import { useTranslation } from "react-i18next";
+
+import "./Download.scss";
+
+function Download() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="container">
+      <div className="logo"></div>
+      <div className="btn-box">
+        <div className="btn-item">
+            <img src={googleIcon}alt="" />
+            <a href="">Google Play</a>
+        </div>
+        <div className="btn-item">
+            <img src={appStoreIcon} alt="" />
+            <a href="">App Store</a>
+        </div>
+        <div className="btn-item">
+            <a href="http://8.217.122.133/upload/apk/app-release.apk">{t('Download')} APK</a>
+        </div>
+        <div className="btn-item">
+            <a href="">{t('Official Website')}</a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Download;
--- a/src/pages/SelectCountry.scss
+++ b/src/pages/SelectCountry.scss
@ -0,0 +1,78 @@
+.selectCountry-container {
+    background: #fafafb;
+    width: 100vw;
+    min-height: 100vh;
+    position: static;
+    .selectCountry-heder {
+        position: fixed;
+        top: 0;
+        height: 2.75rem;
+        width: 100%;
+        background: #FAFAFB;
+        position: relative;
+        text-align: center;
+        line-height: 2.75rem;
+        box-shadow: 0 1.0625rem .625rem -0.4375rem rgba(243, 243, 244, 0.8);
+        .back-icon {
+            width: .5rem;
+            height: .9375rem;
+            position: absolute;
+            left: 1rem;
+            top: .875rem;
+        }
+    }
+    .selectCountry-content {
+        width: 100%;
+        padding: 1.25rem 1rem;
+        box-sizing: border-box;
+        .search-box {
+            width: 100%;
+            height: 2.25rem;
+            border-radius: 5px;
+            background: #EEEEEF;
+            position: relative;
+            input {
+                position: absolute;
+                width: 100%;
+                height: 2.25rem;
+                left: 0;
+                top: 0;
+                background: #EEEEEF;
+                border-radius: 5px;
+                border-style: none;
+                padding-left: 2.0625rem;
+                box-sizing: border-box;
+                color: #333333;
+                &:focus {
+                    outline: none;
+                }
+            }
+            img {
+                z-index: 1;
+                position: absolute;
+                left: .5rem;
+                top: .625rem;
+            }
+        }
+        .area-box {
+            overflow: scroll;
+            height: calc(100vh - 7.5rem);
+            padding: 0 1.5rem;
+            box-sizing: border-box;
+            .area-item {
+                height: 3.25rem;
+                display: flex;
+                justify-content: space-between;
+                font-family: PingFang SC;
+                font-size: 1rem;
+                color: #333333;
+                line-height: 3.25rem;
+                border-bottom: .0625rem solid #D8D8D8;
+                &.selected {
+                    border-bottom: .0625rem solid  #BF62FF;
+                    color: #BF62FF;
+                }
+            }
+        }
+    }
+}
--- a/src/pages/SelectCountry.tsx
+++ b/src/pages/SelectCountry.tsx
@ -0,0 +1,89 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import gobackIcon from "../assets/iconfont/goback.svg";
+import searchIcon from "../assets/iconfont/search.svg";
+import Area from "../i18n/area/area.json";
+import type { CountryItem } from "../type/SelectCountry";
+import useUserStore from "../store/user.ts";
+import { useNavigate } from "react-router-dom";
+import "./SelectCountry.scss";
+function SelectCountry() {
+  const { t,i18n } = useTranslation();
+  const { UpdateSelectCountry, UpdatePreviousPathName } = useUserStore();
+  const [searchText, setSearchText] = useState<string>("");
+  const [filteredArea, setFilteredArea] = useState<CountryItem[] | []>([]);
+  const lang = i18n.language
+  const filterArea = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text: string = e.target.value;
+    setSearchText(text);
+    const lowerCaseSearchText = String(text).toLowerCase();
+    const areaList = Area.filter(
+      (item) =>
+        item.cn.toLowerCase().includes(lowerCaseSearchText) ||
+        item.en.toLowerCase().includes(lowerCaseSearchText) ||
+        item.code.includes(lowerCaseSearchText)
+    );
+    setFilteredArea(areaList);
+  };
+  const [selectedItemIndex, setSelectedItemIndex] = useState<number>(0);
+  const navigate = useNavigate();
+  const gotoSignIn = () => {
+    UpdatePreviousPathName(window.location.pathname);
+    navigate("/");
+  };
+  const handleSelectCountry = (item: CountryItem, index: number) => {
+    setSelectedItemIndex(index);
+    UpdateSelectCountry(item);
+    gotoSignIn();
+  };
+  return (
+    <div className="selectCountry-container">
+      <div className="selectCountry-heder">
+        <img
+          className="back-icon"
+          src={gobackIcon}
+          alt=""
+          onClick={gotoSignIn}
+        />
+        {t("Select country/region")}
+      </div>
+      <div className="selectCountry-content">
+        <div className="search-box">
+          <img src={searchIcon} alt="" />
+          <input type="text" onChange={(e) => filterArea(e)} />
+        </div>
+        <div className="area-box">
+          {searchText.length > 0
+            ? filteredArea.map((item, index) => {
+                const isSelected = index === selectedItemIndex;
+                return (
+                  <div
+                    key={index}
+                    className={`area-item ${isSelected && "selected"}`}
+                    onClick={() => handleSelectCountry(item, index)}
+                  >
+                    <span>{item[lang]}</span>
+                    <span>{item.code}</span>
+                  </div>
+                );
+              })
+            : Area.map((item, index) => {
+                const isSelected = index === selectedItemIndex;
+                return (
+                  <div
+                    key={index}
+                    className={`area-item ${isSelected && "selected"}`}
+                    onClick={() => handleSelectCountry(item, index)}
+                  >
+                    <span>{item[lang]}</span>
+                    <span>{item.code}</span>
+                  </div>
+                );
+              })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SelectCountry;
--- a/src/pages/SignIn.scss
+++ b/src/pages/SignIn.scss
@ -0,0 +1,138 @@
+.container {
+  background: #fafafb;
+  width: 100vw;
+  min-height: 100vh;
+  padding: 4.625rem 2.5rem;
+  box-sizing: border-box;
+
+  .logo {
+    width: 4.25rem;
+    height: 4.25rem;
+    background: #bf62ff;
+    border-radius: 50%;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .tabs {
+    display: flex;
+    margin-top: 4.875rem;
+
+    .tabs-button {
+      opacity: 1;
+      font-family: PingFang SC;
+      font-size: 18px;
+      font-weight: normal;
+      line-height: normal;
+      color: #333333;
+      display: flex;
+      align-items: center;
+      margin-right: 2.0625rem;
+      &.selected {
+        border-bottom: .0625rem solid #BF62FF;
+        color:#BF62FF;
+      }
+      img {
+        margin-right: .4375rem;
+      }
+    }
+  }
+
+  .adm-list-body {
+    background: transparent;
+    border-style: none !important;
+    padding-top: .9375rem;
+  }
+
+  .adm-list-item {
+    background: #FFFFFF;
+    margin-bottom: 1.7rem;
+    width: 100%;
+    height: 2.75rem;
+    border-radius: .3125rem;
+    box-sizing: border-box;
+    border: 1px solid #999999 !important;
+    box-shadow: 0px 2px 5px 0px rgba(153, 153, 153, 50%);
+    padding-left: 0;
+    .adm-input-element {
+      &::placeholder {
+        font-size: .75rem;
+        color: #999999
+      }
+    }
+  }
+
+  .adm-list-item-content {
+    border-style: none;
+  }
+  .adm-list-item-content-main {
+    padding: 0;
+  }
+  .adm-input {
+    padding: .75rem 0;
+    padding-left: .625rem;
+  }
+  .send-code {
+    font-family: PingFang SC;
+    font-size: .75rem;
+    color: #BF62FF;
+    margin-bottom:.9375rem;
+    text-align: right;
+  }
+  .adm-form-footer {
+    display: flex;
+    justify-content: center;
+  }
+  .submit-btn {
+    width: 6.1875rem;
+    height: 2.75rem;
+    border-radius: .3125rem;
+    background: #BF62FF;
+    font-family: PingFang SC;
+    font-size: .75rem;
+    color: #FFFFFF;
+  }
+  .to-download {
+    font-family: PingFang SC;
+    font-size: .875rem;
+    color: #BF62FF;
+  }
+  .terms-service {
+    font-family: PingFang SC;
+    font-size: .75rem;
+    text-align: center;
+    width: 100%;
+    margin-top: 5rem;
+    p {
+      color: #999999;
+    }
+    span {
+      color:#BF62FF;
+    }
+  }
+  .phone-box {
+    display: flex;
+    align-items: center;
+    border-radius: .3125rem;
+    span {
+      width: 3.75rem;
+      height: 2.6rem;
+      line-height: 2.6rem;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: .75rem;
+      color: #666666;
+      background: #EAEAEA;
+      border-right: .0625rem solid #999999;
+      border-left: .0625rem solid #999999;
+      border-bottom: .0625rem solid #999999;
+      border-top-left-radius: .3125rem;
+      border-bottom-left-radius: .3125rem;
+    }
+    .adm-input {
+      padding-top: 0.55rem;
+      padding-left: 0.625rem;
+      padding-bottom: 0;
+    }
+  }
+}
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@ -0,0 +1,70 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import phoneIconSelect from "../assets/iconfont/phone_Select.svg";
+import phoneIcon from "../assets/iconfont/phone.svg";
+import emailIcon from "../assets/iconfont/email.svg";
+import emailIconSelect from "../assets/iconfont/email_Select.svg";
+import "./SignIn.scss";
+import EmailForm from "../components/EmailForm";
+import PhoneForm from "../components/PhoneForm";
+import { useNavigate } from "react-router-dom";
+import useUserStore from "../store/user.ts";
+
+console.log('language',navigator.language)
+function SignIn() {
+  const { t } = useTranslation();
+
+  const [selectIndex, setSelectIndex] = useState<number>(0);
+  const {previousPathName,UpdatePreviousPathName} = useUserStore()
+  const navigate = useNavigate();
+  const handleTabs = (num: number) => {
+    return () => {
+      UpdatePreviousPathName('/');
+      setSelectIndex(num);
+    };
+  };
+  useEffect(() => {
+      // 当组件加载时，保存当前路径
+      console.log("previousPathName", previousPathName);
+
+      if (previousPathName === "/SelectCountry") {
+        setSelectIndex(1);
+      }
+  }, [previousPathName]);
+  return (
+    <div className="container">
+      <div className="logo"></div>
+      <div className="tabs">
+        <div
+          className={`tabs-button ${selectIndex === 0 && "selected"}`}
+          onClick={handleTabs(0)}
+        >
+          <img src={selectIndex === 0 ? phoneIconSelect : phoneIcon} alt="" />
+          <span>{t("E-mail")}</span>
+        </div>
+        <div
+          className={`tabs-button ${selectIndex === 1 && "selected"}`}
+          onClick={handleTabs(1)}
+        >
+          <img src={selectIndex === 1 ? emailIconSelect : emailIcon} alt="" />
+          <span>{t("phone")}</span>
+        </div>
+      </div>
+      {selectIndex === 0 && <EmailForm></EmailForm>}
+      {selectIndex === 1 && <PhoneForm></PhoneForm>}
+      <div className="to-download" onClick={()=> navigate("/Download")}>
+        <p>{t("If you already have an account")}</p>
+        <p>{t("download the APP directly")}</p>
+      </div>
+      <div className="terms-service">
+        <p>{t("Continuing to represent you in agreeing to our")}</p>
+        <p>
+          <span>{t("Terms of Service")}</span> {t("and")}{" "}
+          <span>{t("Privacy Policy")}</span>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default SignIn;
--- a/src/store/user.ts
+++ b/src/store/user.ts
@ -0,0 +1,45 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-01-19 11:31:12
+ * @LastEditTime: 2024-01-25 15:42:25
+ * @Author: John
+ */
+import { create } from "zustand";
+import { CountryItem } from "../type/SelectCountry";
+// 状态管理器
+export interface UserState {
+  SelectCountry: CountryItem | null;
+  UpdateSelectCountry: (item: CountryItem) => void
+  Token: string;
+  UpdateToken: (token: string) => void;
+  CurrentPhoneNumber:string;
+  UpdateCurrentPhoneNumber: (number: string) => void;
+  previousPathName:string;
+  UpdatePreviousPathName:(number: string) => void;
+}
+
+const useUserStore = create<UserState>()((set) => ({
+  SelectCountry: null,
+  UpdateSelectCountry: (item) =>
+    set((state) => {
+      return { ...state, SelectCountry: item };
+    }),
+
+  Token: "",
+  UpdateToken: (token) =>
+    set((state) => {
+      return { ...state, Token: token };
+    }),
+  CurrentPhoneNumber:'',
+  UpdateCurrentPhoneNumber: (val) =>
+    set((state) => {
+        return { ...state, CurrentPhoneNumber: val };
+      }),
+   previousPathName:'/',
+   UpdatePreviousPathName:(url) =>
+      set((state)=>{
+        return {...state,previousPathName:url}
+      })
+}));
+
+export default useUserStore;
--- a/src/type/SelectCountry.d.ts
+++ b/src/type/SelectCountry.d.ts
@ -0,0 +1,6 @@
+export interface CountryItem {
+  [key: string]: string;
+  en: string;
+  cn: string;
+  code: string;
+}
--- a/src/type/SignIn.d.ts
+++ b/src/type/SignIn.d.ts
@ -0,0 +1,16 @@
+export interface sendCodeTypes {
+    [x: string]: any;
+    account: string;
+    areaCode: string;
+    status: number;
+  }
+  
+export interface signUpTypes {
+    [x: string]: any;
+    account: string;
+    area:string;
+    areaCode: string;
+    authCode:string
+    shareCode: string;
+  }
+   
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>