init
This commit is contained in:
YI FANG
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -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?
|
||||||
73
README.md
Normal file
73
README.md
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
# 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) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## React Compiler
|
||||||
|
|
||||||
|
The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
|
||||||
|
// Remove tseslint.configs.recommended and replace with this
|
||||||
|
tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
tseslint.configs.stylisticTypeChecked,
|
||||||
|
|
||||||
|
// Other configs...
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
// Enable lint rules for React
|
||||||
|
reactX.configs['recommended-typescript'],
|
||||||
|
// Enable lint rules for React DOM
|
||||||
|
reactDom.configs.recommended,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
23
eslint.config.js
Normal file
23
eslint.config.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -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>yuanhe-ipad</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4311
package-lock.json
generated
Normal file
4311
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "yuanhe-ipad",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --host 0.0.0.0",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"react-router-dom": "^7.9.6"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.1",
|
||||||
|
"@types/node": "^24.10.1",
|
||||||
|
"@types/react": "^19.2.5",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react-swc": "^4.2.2",
|
||||||
|
"autoprefixer": "^10.4.22",
|
||||||
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.24",
|
||||||
|
"globals": "^16.5.0",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^3.4.14",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"typescript-eslint": "^8.46.4",
|
||||||
|
"vite": "^7.2.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
14
src/App.css
Normal file
14
src/App.css
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
#root {
|
||||||
|
min-height: 100vh;
|
||||||
|
/*文字无法选中*/
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
12
src/App.tsx
Normal file
12
src/App.tsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import './App.css';
|
||||||
|
import { RouterProvider } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { router } from './router';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return <RouterProvider router={router} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
||||||
|
|
||||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
61
src/components/booking/BookingModal.tsx
Normal file
61
src/components/booking/BookingModal.tsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import { BOOKING_DOCTORS } from '../../data/mockData';
|
||||||
|
import { Button, Input } from '../ui';
|
||||||
|
|
||||||
|
interface BookingModalProps {
|
||||||
|
doctor: (typeof BOOKING_DOCTORS)[number];
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BookingModal = ({ doctor, onClose }: BookingModalProps) => (
|
||||||
|
<div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
|
||||||
|
<div className='w-[520px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
|
||||||
|
<div className='px-4 py-3 border-b flex items-center justify-between'>
|
||||||
|
<div className='font-semibold'>预约申请 · {doctor.name}</div>
|
||||||
|
<button className='text-xs text-gray-500' onClick={onClose}>
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='px-4 py-4 bg-gray-50/60 space-y-3 text-xs text-gray-700'>
|
||||||
|
<div className='grid grid-cols-2 gap-3'>
|
||||||
|
<div>
|
||||||
|
付费方式
|
||||||
|
<select className='mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs'>
|
||||||
|
<option>自费</option>
|
||||||
|
<option>单位结算</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
产品名称
|
||||||
|
<Input placeholder='如：专家门诊咨询' className='mt-1' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
是否定制
|
||||||
|
<select className='mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs'>
|
||||||
|
<option>否</option>
|
||||||
|
<option>是</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
期望预约时间
|
||||||
|
<Input placeholder='例如：2025-11-20 上午' className='mt-1' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
备注
|
||||||
|
<textarea
|
||||||
|
className='w-full mt-1 rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[72px]'
|
||||||
|
placeholder='可填写病情简要、既往史、特殊需求等信息'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-between text-[11px] text-gray-500'>
|
||||||
|
<span>
|
||||||
|
医生：{doctor.name}（{doctor.dept}）
|
||||||
|
</span>
|
||||||
|
<Button>提交预约申请</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
104
src/components/booking/BookingSection.tsx
Normal file
104
src/components/booking/BookingSection.tsx
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
import { BOOKING_DOCTORS } from '../../data/mockData';
|
||||||
|
import { Card, CardContent, CardHeader } from '../ui';
|
||||||
|
import { BookingModal } from './BookingModal';
|
||||||
|
import { cls } from '../../utils/cls';
|
||||||
|
|
||||||
|
interface BookingSectionProps {
|
||||||
|
selectedDay: number;
|
||||||
|
onSelectDay: (day: number) => void;
|
||||||
|
bookingDoctor: (typeof BOOKING_DOCTORS)[number] | null;
|
||||||
|
onSelectDoctor: (doctor: (typeof BOOKING_DOCTORS)[number]) => void;
|
||||||
|
onCloseModal: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BookingSection = ({
|
||||||
|
selectedDay,
|
||||||
|
onSelectDay,
|
||||||
|
bookingDoctor,
|
||||||
|
onSelectDoctor,
|
||||||
|
onCloseModal,
|
||||||
|
}: BookingSectionProps) => (
|
||||||
|
<div className='grid grid-cols-12 gap-6'>
|
||||||
|
<div className='col-span-4 space-y-4'>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>预约日历</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='grid grid-cols-6 gap-2 text-sm'>
|
||||||
|
{Array.from({ length: 30 }, (_, i) => i + 1).map((day) => (
|
||||||
|
<button
|
||||||
|
key={day}
|
||||||
|
onClick={() => onSelectDay(day)}
|
||||||
|
className={cls(
|
||||||
|
'h-9 rounded-2xl border flex items-center justify-center',
|
||||||
|
selectedDay === day ? 'bg-gray-900 text-white border-gray-900' : 'bg-white hover:bg-gray-50',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{day}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent>
|
||||||
|
<div className='flex items-center justify-between text-sm'>
|
||||||
|
<span>当日预约数</span>
|
||||||
|
<span className='text-lg font-semibold'>{BOOKING_DOCTORS.length}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='col-span-8 space-y-4'>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<span>预约医生 · {selectedDay} 日</span>
|
||||||
|
<div className='flex items-center gap-2 text-xs'>
|
||||||
|
<span className='text-gray-500'>按科室筛选</span>
|
||||||
|
<select className='border rounded-2xl px-3 py-1 bg-white outline-none text-xs'>
|
||||||
|
<option>全部科室</option>
|
||||||
|
<option>内科</option>
|
||||||
|
<option>外科</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
{BOOKING_DOCTORS.map((doctor) => {
|
||||||
|
const ratio = doctor.total ? (doctor.total - doctor.remain) / doctor.total : 0;
|
||||||
|
const percent = Math.round(Math.max(0, Math.min(1, ratio)) * 100);
|
||||||
|
return (
|
||||||
|
<button key={doctor.id} onClick={() => onSelectDoctor(doctor)} className='text-left w-full'>
|
||||||
|
<Card className='bg-gray-50/40'>
|
||||||
|
<CardContent>
|
||||||
|
<div className='flex items-start justify-between mb-3'>
|
||||||
|
<div>
|
||||||
|
<div className='font-semibold mb-1'>{doctor.name}</div>
|
||||||
|
<div className='text-xs text-gray-500'>{doctor.dept}</div>
|
||||||
|
</div>
|
||||||
|
<span className='px-3 py-1 rounded-2xl border text-xs text-gray-600 bg-white'>{doctor.period}</span>
|
||||||
|
</div>
|
||||||
|
<div className='text-xs text-gray-600 space-y-1 mb-2'>
|
||||||
|
<div>当日号源：{doctor.total} 个</div>
|
||||||
|
<div>
|
||||||
|
剩余预约号 <span className='font-semibold text-gray-900'>{doctor.remain}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='h-2 rounded-full bg-gray-200 overflow-hidden'>
|
||||||
|
<div className='h-full bg-gray-900' style={{ width: `${percent}%` }} />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{bookingDoctor && <BookingModal doctor={bookingDoctor} onClose={onCloseModal} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
375
src/components/exam/ExamModal.tsx
Normal file
375
src/components/exam/ExamModal.tsx
Normal file
@@ -0,0 +1,375 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import type { ExamClient, ExamModalTab } from '../../data/mockData';
|
||||||
|
import { Badge, Button } from '../ui';
|
||||||
|
|
||||||
|
interface ExamModalProps {
|
||||||
|
client: ExamClient;
|
||||||
|
tab: ExamModalTab;
|
||||||
|
onTabChange: (key: ExamModalTab) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ExamModal = ({ client, tab, onTabChange, onClose }: ExamModalProps) => {
|
||||||
|
const tabs: { key: ExamModalTab; label: string }[] = [
|
||||||
|
{ key: 'detail', label: '详情' },
|
||||||
|
{ key: 'sign', label: '签到' },
|
||||||
|
{ key: 'addon', label: '加项' },
|
||||||
|
{ key: 'print', label: '打印导检单' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const signDone = client.signStatus === '已登记' || client.checkedItems.includes('签到');
|
||||||
|
const addonDone = (client.addonCount || 0) > 0;
|
||||||
|
const printDone = !!client.guidePrinted;
|
||||||
|
|
||||||
|
const tabDone: Record<ExamModalTab, boolean> = {
|
||||||
|
detail: false,
|
||||||
|
sign: signDone,
|
||||||
|
addon: addonDone,
|
||||||
|
print: printDone,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
|
||||||
|
<div className='w-[720px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
|
||||||
|
<div className='px-4 py-3 border-b flex items-center justify-between'>
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<span className='font-semibold'>{client.name}</span>
|
||||||
|
<span className='text-xs text-gray-500'>体检号：{client.id}</span>
|
||||||
|
<Badge>{client.level}</Badge>
|
||||||
|
</div>
|
||||||
|
<button className='text-xs text-gray-500' onClick={onClose}>
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='px-4 py-2 border-b flex items-center gap-2 text-xs'>
|
||||||
|
{tabs.map((t) => {
|
||||||
|
const isActive = tab === t.key;
|
||||||
|
const isDone = tabDone[t.key];
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={t.key}
|
||||||
|
onClick={() => onTabChange(t.key)}
|
||||||
|
className={`px-3 py-1 rounded-2xl border text-xs ${
|
||||||
|
isActive
|
||||||
|
? 'bg-gray-900 text-white border-gray-900'
|
||||||
|
: isDone
|
||||||
|
? 'bg-gray-100 text-gray-400 border-gray-200'
|
||||||
|
: 'bg-white text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t.label}
|
||||||
|
{t.key === 'addon' && (client.addonCount || 0) > 0 && (
|
||||||
|
<span className='ml-1 text-[10px] opacity-80'>({client.addonCount})</span>
|
||||||
|
)}
|
||||||
|
{((t.key === 'sign' && signDone) || (t.key === 'print' && printDone)) && <span className='ml-1'>✅</span>}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className='px-4 py-4 bg-gray-50/60'>
|
||||||
|
{tab === 'detail' && <ExamDetailInfo client={client} />}
|
||||||
|
{tab === 'sign' && <ExamSignPanel />}
|
||||||
|
{tab === 'addon' && <ExamAddonPanel client={client} />}
|
||||||
|
{tab === 'print' && <ExamPrintPanel client={client} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ExamSignPanel = () => (
|
||||||
|
<div className='grid grid-cols-2 gap-4 text-sm'>
|
||||||
|
<div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
|
||||||
|
<div className='font-medium'>身份证上传</div>
|
||||||
|
<div className='text-xs text-gray-500'>支持身份证正反面拍照或读取设备，自动识别姓名、证件号等信息。</div>
|
||||||
|
<div className='flex gap-2 text-xs'>
|
||||||
|
<Button className='py-1.5 px-3'>上传身份证正面</Button>
|
||||||
|
<Button className='py-1.5 px-3'>上传身份证反面</Button>
|
||||||
|
</div>
|
||||||
|
<div className='text-[11px] text-gray-400'>上传后进入预览界面，确认无误后返回签到界面。</div>
|
||||||
|
</div>
|
||||||
|
<div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
|
||||||
|
<div className='font-medium'>体检知情同意书</div>
|
||||||
|
<div className='text-xs text-gray-500'>点击后弹出知情同意书全文及签名区域，签署完成后回到签到页面。</div>
|
||||||
|
<div className='flex gap-2 text-xs text-gray-600'>
|
||||||
|
<Badge>阅读记录</Badge>
|
||||||
|
<Badge>签名图片</Badge>
|
||||||
|
</div>
|
||||||
|
<Button className='py-1.5 px-3'>打开知情同意书并签署</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ExamAddonPanel = ({ client }: { client: ExamClient }) => (
|
||||||
|
<div className='grid grid-cols-2 gap-6 text-sm'>
|
||||||
|
<div>
|
||||||
|
<div className='font-medium mb-2'>当前套餐项目</div>
|
||||||
|
<ul className='space-y-1 text-xs text-gray-600'>
|
||||||
|
{client.checkedItems.concat(client.pendingItems).map((item, idx) => (
|
||||||
|
<li key={idx} className='flex items-center justify-between'>
|
||||||
|
<span>{item}</span>
|
||||||
|
<span className='text-gray-400 text-[11px]'>{client.checkedItems.includes(item) ? '已检查' : '未检查'}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className='font-medium mb-2'>可选加项</div>
|
||||||
|
<div className='space-y-2 text-xs text-gray-600'>
|
||||||
|
{['肿瘤标志物筛查', '甲状腺彩超', '骨密度检测'].map((label) => (
|
||||||
|
<label key={label} className='flex items-center gap-2'>
|
||||||
|
<input type='checkbox' className='rounded' /> {label}
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Button className='mt-3'>确认加项并生成费用</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ExamDetailInfo = ({ client }: { client: ExamClient }) => {
|
||||||
|
const [phone, setPhone] = useState((client['mobile' as keyof ExamClient] as string | undefined) || '137****9988');
|
||||||
|
const [marital, setMarital] = useState(
|
||||||
|
(client['maritalStatus' as keyof ExamClient] as string | undefined) || '未婚',
|
||||||
|
);
|
||||||
|
const [phoneEditing, setPhoneEditing] = useState(false);
|
||||||
|
const [maritalEditing, setMaritalEditing] = useState(false);
|
||||||
|
|
||||||
|
const customerChannel = client.customerType === '团客' ? '团体客户' : '散客客户';
|
||||||
|
const familyDoctor = (client['familyDoctor' as keyof ExamClient] as string | undefined) || '—';
|
||||||
|
const groupTag = client['groupTag' as keyof ExamClient] || (client.customerType === '团客' ? '团检' : '—');
|
||||||
|
const bookingTime = client['bookingTime' as keyof ExamClient] || '—';
|
||||||
|
const signTime = client['signTime' as keyof ExamClient] || '—';
|
||||||
|
const addonSummary = client['addonSummary' as keyof ExamClient] || '—';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='space-y-4 text-sm'>
|
||||||
|
<div className='flex items-center gap-4'>
|
||||||
|
<div className='w-14 h-14 rounded-full bg-gray-200 flex-shrink-0 overflow-hidden'>
|
||||||
|
<div className='w-full h-full rounded-full bg-gray-300 flex items-center justify-center text-[10px] text-gray-500'>
|
||||||
|
头像
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='text-xs text-gray-500'>基础信息：头像、姓名、证件号、手机号等（点击图标可进行编辑）</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='space-y-2 text-xs text-gray-700'>
|
||||||
|
<div className='font-medium text-gray-900'>基础信息</div>
|
||||||
|
<div className='grid grid-cols-2 gap-x-8 gap-y-1'>
|
||||||
|
<div>
|
||||||
|
姓名：<span className='text-gray-900'>{client.name}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
证件号：<span className='text-gray-900'>4401********1234</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center'>
|
||||||
|
<span>手机号：</span>
|
||||||
|
{!phoneEditing ? (
|
||||||
|
<span className='text-gray-900 flex items-center'>
|
||||||
|
{phone}
|
||||||
|
<button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setPhoneEditing(true)}>
|
||||||
|
✏️ 编辑
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className='flex items-center gap-1'>
|
||||||
|
<input
|
||||||
|
className='w-28 rounded-xl border px-2 py-0.5 text-[11px] outline-none'
|
||||||
|
value={phone}
|
||||||
|
onChange={(e) => setPhone(e.target.value)}
|
||||||
|
/>
|
||||||
|
<button className='px-2 py-0.5 rounded-xl border text-[11px]' onClick={() => setPhoneEditing(false)}>
|
||||||
|
保存
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
性别/年龄：
|
||||||
|
<span className='text-gray-900'>
|
||||||
|
{client.gender} / {client.age}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
客户级别：<span className='text-gray-900'>{client.level}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
所属渠道：<span className='text-gray-900'>{customerChannel}</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center'>
|
||||||
|
<span>婚姻状况：</span>
|
||||||
|
{!maritalEditing ? (
|
||||||
|
<span className='text-gray-900 flex items-center'>
|
||||||
|
{marital}
|
||||||
|
<button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setMaritalEditing(true)}>
|
||||||
|
✏️ 编辑
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className='flex items-center gap-1'>
|
||||||
|
<input
|
||||||
|
className='w-20 rounded-xl border px-2 py-0.5 text-[11px] outline-none'
|
||||||
|
value={marital}
|
||||||
|
onChange={(e) => setMarital(e.target.value)}
|
||||||
|
/>
|
||||||
|
<button className='px-2 py-0.5 rounded-xl border text-[11px]' onClick={() => setMaritalEditing(false)}>
|
||||||
|
保存
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
家医：<span className='text-gray-900'>{familyDoctor}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
团标签：<span className='text-gray-900'>{groupTag as string}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='space-y-2 text-xs text-gray-700'>
|
||||||
|
<div className='font-medium text-gray-900'>预约信息</div>
|
||||||
|
<div className='grid grid-cols-2 gap-x-8 gap-y-1'>
|
||||||
|
<div>
|
||||||
|
预约时间：<span className='text-gray-900'>{bookingTime as string}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
签到时间：<span className='text-gray-900'>{signTime as string}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
已消耗时长：<span className='text-gray-900'>{client.elapsed}</span>
|
||||||
|
</div>
|
||||||
|
<div className='col-span-2'>
|
||||||
|
体检套餐名称：<span className='text-gray-900'>{client.packageName}</span>
|
||||||
|
</div>
|
||||||
|
<div className='col-span-2'>
|
||||||
|
加项内容：<span className='text-gray-900'>{addonSummary as string}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-2 gap-4 text-xs'>
|
||||||
|
<div className='p-3 rounded-2xl bg-green-50 border'>
|
||||||
|
<div className='font-medium mb-2'>已查项目 共 {client.checkedItems.length} 项</div>
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
{client.checkedItems.map((i) => (
|
||||||
|
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||||
|
{i}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='p-3 rounded-2xl bg-red-50 border'>
|
||||||
|
<div className='font-medium mb-2'>弃检项目 共 0 项</div>
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
<span className='text-gray-400 text-[11px]'>暂无弃检项目</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='p-3 rounded-2xl bg-yellow-50 border'>
|
||||||
|
<div className='font-medium mb-2'>未查项目 共 {client.pendingItems.length} 项</div>
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
{client.pendingItems.map((i) => (
|
||||||
|
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||||
|
{i}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='p-3 rounded-2xl bg-blue-50 border'>
|
||||||
|
<div className='font-medium mb-2'>延期项目 共 0 项</div>
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
<span className='text-gray-400 text-[11px]'>暂无延期项目</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ExamPrintPanel = ({ client }: { client: ExamClient }) => (
|
||||||
|
<div className='flex justify-center'>
|
||||||
|
<div className='w-[520px] max-w-[95%] bg-white rounded-2xl border shadow-sm px-6 py-4 text-xs text-gray-800'>
|
||||||
|
<div className='flex items-center justify-between border-b pb-3 mb-3'>
|
||||||
|
<div>
|
||||||
|
<div className='text-sm font-semibold'>圆和医疗体检中心 · 导检单预览</div>
|
||||||
|
<div className='text-[11px] text-gray-500 mt-1'>此为预览页面，实际打印效果以院内打印机为准。</div>
|
||||||
|
</div>
|
||||||
|
<div className='text-right text-[11px] text-gray-500'>
|
||||||
|
<div>体检号：{client.id}</div>
|
||||||
|
<div>日期：2025-11-18</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-2 gap-y-1 gap-x-6 mb-3'>
|
||||||
|
<div>
|
||||||
|
姓名：<span className='font-medium'>{client.name}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
性别/年龄：
|
||||||
|
<span className='font-medium'>
|
||||||
|
{client.gender} / {client.age}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
体检套餐：<span className='font-medium'>{client.packageName}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
客户类型：<span className='font-medium'>{client.customerType}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='mb-2 font-medium'>检查项目列表（预览）</div>
|
||||||
|
<table className='w-full border text-[11px] mb-3'>
|
||||||
|
<thead>
|
||||||
|
<tr className='bg-gray-50'>
|
||||||
|
<th className='border px-2 py-1 text-left'>序号</th>
|
||||||
|
<th className='border px-2 py-1 text-left'>检查项目</th>
|
||||||
|
<th className='border px-2 py-1 text-left'>科室</th>
|
||||||
|
<th className='border px-2 py-1 text-left'>备注</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{client.checkedItems.map((item, idx) => (
|
||||||
|
<tr key={`c-${idx}`}>
|
||||||
|
<td className='border px-2 py-1'>{idx + 1}</td>
|
||||||
|
<td className='border px-2 py-1'>{item}</td>
|
||||||
|
<td className='border px-2 py-1'>—</td>
|
||||||
|
<td className='border px-2 py-1'>已预约</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
{client.pendingItems.map((item, idx) => (
|
||||||
|
<tr key={`p-${idx}`}>
|
||||||
|
<td className='border px-2 py-1'>{client.checkedItems.length + idx + 1}</td>
|
||||||
|
<td className='border px-2 py-1'>{item}</td>
|
||||||
|
<td className='border px-2 py-1'>—</td>
|
||||||
|
<td className='border px-2 py-1'>待检查</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-2 gap-4 text-[11px] text-gray-600'>
|
||||||
|
<div>
|
||||||
|
<div className='mb-1 font-medium text-gray-800'>导检提示</div>
|
||||||
|
<ul className='list-disc ml-4 space-y-0.5'>
|
||||||
|
<li>请按导检单顺序前往相应科室检查。</li>
|
||||||
|
<li>如有不适或特殊情况，请及时告知导检护士。</li>
|
||||||
|
<li>部分检查项目需空腹或憋尿，请遵从现场指引。</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col items-end justify-between'>
|
||||||
|
<div className='text-right'>
|
||||||
|
<div>导检护士签名：________________</div>
|
||||||
|
<div className='mt-2'>打印时间：2025-11-18 09:30</div>
|
||||||
|
</div>
|
||||||
|
<div className='mt-4 w-24 h-24 border border-dashed flex items-center justify-center text-[10px] text-gray-400'>
|
||||||
|
条码 / 二维码
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
131
src/components/exam/ExamSection.tsx
Normal file
131
src/components/exam/ExamSection.tsx
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
import type { ExamClient, ExamModalTab } from '../../data/mockData';
|
||||||
|
import { EXAM_STATS, EXAM_TAGS } from '../../data/mockData';
|
||||||
|
import { Badge, Card, CardContent, CardHeader, InfoCard } from '../ui';
|
||||||
|
import { cls } from '../../utils/cls';
|
||||||
|
|
||||||
|
interface ExamSectionProps {
|
||||||
|
filteredClients: ExamClient[];
|
||||||
|
selectedExamClient: ExamClient;
|
||||||
|
examFilterTag: (typeof EXAM_TAGS)[number];
|
||||||
|
onFilterChange: (tag: (typeof EXAM_TAGS)[number]) => void;
|
||||||
|
onOpenModal: (id: string, tab: ExamModalTab) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ExamSection = ({
|
||||||
|
filteredClients,
|
||||||
|
selectedExamClient,
|
||||||
|
examFilterTag,
|
||||||
|
onFilterChange,
|
||||||
|
onOpenModal,
|
||||||
|
}: ExamSectionProps) => (
|
||||||
|
<div className='space-y-4'>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>今日体检进度</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='grid grid-cols-4 gap-3'>
|
||||||
|
{EXAM_STATS.map(([label, value]) => (
|
||||||
|
<InfoCard key={label} label={label} value={value} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<span>体检客户列表</span>
|
||||||
|
<div className='flex items-center gap-2 text-xs'>
|
||||||
|
{EXAM_TAGS.map((tag) => (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => onFilterChange(tag)}
|
||||||
|
className={cls(
|
||||||
|
'px-3 py-1 rounded-2xl border',
|
||||||
|
examFilterTag === tag ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-700',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='grid grid-cols-3 gap-3 text-sm'>
|
||||||
|
{filteredClients.map((client) => {
|
||||||
|
const signDone = client.signStatus === '已登记' || client.checkedItems.includes('签到');
|
||||||
|
const addonCount = client.addonCount || 0;
|
||||||
|
const printDone = !!client.guidePrinted;
|
||||||
|
const openModal = (tab: ExamModalTab) => onOpenModal(client.id, tab);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={client.id}
|
||||||
|
onClick={() => openModal('detail')}
|
||||||
|
className={cls(
|
||||||
|
'text-left p-3 rounded-2xl border bg-white hover:bg-gray-50 flex flex-col gap-1',
|
||||||
|
selectedExamClient.id === client.id && 'border-gray-900 bg-gray-50',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-between mb-1'>
|
||||||
|
<span className='font-medium'>{client.name}</span>
|
||||||
|
<Badge>{client.level}</Badge>
|
||||||
|
</div>
|
||||||
|
<div className='text-xs text-gray-500 truncate'>套餐：{client.packageName}</div>
|
||||||
|
<div className='flex items-center justify-between text-xs text-gray-500 mt-1'>
|
||||||
|
<span>状态：{client.status}</span>
|
||||||
|
<span>已耗时：{client.elapsed}</span>
|
||||||
|
</div>
|
||||||
|
<div className='mt-2 flex flex-wrap gap-1 text-[11px]'>
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
openModal('detail');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>详情</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
openModal('sign');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>签到</span>
|
||||||
|
{signDone && <span>✅</span>}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
openModal('addon');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>加项</span>
|
||||||
|
{addonCount > 0 && <span className='opacity-80'>({addonCount})</span>}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
openModal('print');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>打印导检单</span>
|
||||||
|
{printDone && <span>✅</span>}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
104
src/components/home/HomeSection.tsx
Normal file
104
src/components/home/HomeSection.tsx
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
import { B1_ROWS, B1_SUMMARY, HOME_STATS, NORTH3_ROWS, NORTH3_SUMMARY, REVENUE_STATS } from '../../data/mockData';
|
||||||
|
import { Card, CardContent, CardHeader, InfoCard } from '../ui';
|
||||||
|
|
||||||
|
export const HomeSection = () => (
|
||||||
|
<div className='space-y-6'>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>今日体检统计</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='grid grid-cols-5 gap-3'>
|
||||||
|
{HOME_STATS.map(([label, value]) => (
|
||||||
|
<InfoCard key={label} label={label} value={value} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>营收数据统计</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='grid grid-cols-3 gap-3'>
|
||||||
|
{REVENUE_STATS.map(([label, value]) => (
|
||||||
|
<InfoCard key={label} label={label} value={value} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>B1 服务看板</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='grid grid-cols-3 gap-3 mb-3'>
|
||||||
|
<InfoCard label='当前客户总数' value={B1_SUMMARY.totalClients} />
|
||||||
|
<InfoCard label='待检人数' value={B1_SUMMARY.waiting} />
|
||||||
|
<InfoCard label='在检人数' value={B1_SUMMARY.inExam} />
|
||||||
|
</div>
|
||||||
|
<table className='w-full text-xs'>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-500 border-b'>
|
||||||
|
<th className='py-2 text-left'>科室</th>
|
||||||
|
<th className='py-2 text-left'>医生</th>
|
||||||
|
<th className='py-2 text-right'>已检人数</th>
|
||||||
|
<th className='py-2 text-right'>已检部位数</th>
|
||||||
|
<th className='py-2 text-right'>总时长</th>
|
||||||
|
<th className='py-2 text-right'>平均时长</th>
|
||||||
|
<th className='py-2 text-right'>在检</th>
|
||||||
|
<th className='py-2 text-right'>待检</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{B1_ROWS.map(([dept, doctor, done, inExam, waiting, avg]) => {
|
||||||
|
const parts = done * 3;
|
||||||
|
const totalTime = done * avg;
|
||||||
|
return (
|
||||||
|
<tr key={dept} className='border-b last:border-b-0'>
|
||||||
|
<td className='py-2'>{dept}</td>
|
||||||
|
<td className='py-2'>{doctor}</td>
|
||||||
|
<td className='py-2 text-right'>{done}</td>
|
||||||
|
<td className='py-2 text-right'>{parts}</td>
|
||||||
|
<td className='py-2 text-right'>{totalTime}</td>
|
||||||
|
<td className='py-2 text-right'>{avg}</td>
|
||||||
|
<td className='py-2 text-right'>{inExam}</td>
|
||||||
|
<td className='py-2 text-right'>{waiting}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>北3服务看板</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='grid grid-cols-3 gap-3 mb-3'>
|
||||||
|
<InfoCard label='今日家医数' value={NORTH3_SUMMARY.totalDoctor} />
|
||||||
|
<InfoCard label='分配客户数' value={NORTH3_SUMMARY.totalAssigned} />
|
||||||
|
<InfoCard label='面诊数' value={NORTH3_SUMMARY.consult} />
|
||||||
|
</div>
|
||||||
|
<table className='w-full text-xs'>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-500 border-b'>
|
||||||
|
<th className='py-2 text-left'>家医</th>
|
||||||
|
<th className='py-2 text-right'>分配客户数</th>
|
||||||
|
<th className='py-2 text-right'>面诊数</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{NORTH3_ROWS.map(([name, total, consult]) => (
|
||||||
|
<tr key={name} className='border-b last:border-b-0'>
|
||||||
|
<td className='py-2'>{name}</td>
|
||||||
|
<td className='py-2 text-right'>{total}</td>
|
||||||
|
<td className='py-2 text-right'>{consult}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
73
src/components/layout/Sidebar.tsx
Normal file
73
src/components/layout/Sidebar.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import type { QuickActionType } from '../../data/mockData';
|
||||||
|
import { Button } from '../ui';
|
||||||
|
import { cls } from '../../utils/cls';
|
||||||
|
|
||||||
|
export type SectionKey = 'home' | 'exam' | 'booking' | 'support';
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
active: SectionKey;
|
||||||
|
onNavigate: (key: SectionKey) => void;
|
||||||
|
onQuickAction: (action: Exclude<QuickActionType, 'none'>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const IconHome = () => <span className='text-xs'>🏠</span>;
|
||||||
|
const IconHospital = () => <span className='text-xs'>🏥</span>;
|
||||||
|
const IconCalendar = () => <span className='text-xs'>📅</span>;
|
||||||
|
const IconSupport = () => <span className='text-xs'>💬</span>;
|
||||||
|
|
||||||
|
const NAV_ITEMS = [
|
||||||
|
{ key: 'home', icon: IconHome, label: '首页' },
|
||||||
|
{ key: 'exam', icon: IconHospital, label: '体检中心' },
|
||||||
|
{ key: 'booking', icon: IconCalendar, label: '预约中心' },
|
||||||
|
{ key: 'support', icon: IconSupport, label: '客服咨询' },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const Sidebar = ({ active, onNavigate, onQuickAction }: SidebarProps) => (
|
||||||
|
<aside className='bg-white border-r p-4 flex flex-col gap-4'>
|
||||||
|
<div>
|
||||||
|
<div className='text-base font-semibold'>圆和医疗 · 体检中心</div>
|
||||||
|
<div className='text-xs text-gray-500 mt-1'>iPad 首页驾驶舱预览</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className='space-y-1'>
|
||||||
|
{NAV_ITEMS.map((item) => (
|
||||||
|
<Button
|
||||||
|
key={item.key}
|
||||||
|
onClick={() => onNavigate(item.key as SectionKey)}
|
||||||
|
className={cls('w-full justify-start', active === item.key && 'bg-gray-100 border-gray-900 text-gray-900')}
|
||||||
|
>
|
||||||
|
<item.icon />
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section className='mt-2 p-3 rounded-2xl border bg-gray-50/50'>
|
||||||
|
<div className='text-sm text-gray-700 mb-2'>快捷操作</div>
|
||||||
|
<div className='grid grid-cols-2 gap-2 text-xs'>
|
||||||
|
<Button className='justify-center py-1.5' onClick={() => onQuickAction('meal')}>
|
||||||
|
用餐登记
|
||||||
|
</Button>
|
||||||
|
<Button className='justify-center py-1.5' onClick={() => onQuickAction('vip')}>
|
||||||
|
太平VIP认证
|
||||||
|
</Button>
|
||||||
|
<Button className='justify-center py-1.5' onClick={() => onQuickAction('delivery')}>
|
||||||
|
报告寄送
|
||||||
|
</Button>
|
||||||
|
<Button className='justify-center py-1.5' onClick={() => onQuickAction('note')}>
|
||||||
|
备注窗
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className='mt-auto p-3 rounded-2xl border bg-gray-50/70 text-xs flex flex-col gap-2'>
|
||||||
|
<div className='text-sm font-medium flex items-center gap-2'>
|
||||||
|
<span>💻</span>
|
||||||
|
<span>客服 / IT 支持</span>
|
||||||
|
</div>
|
||||||
|
<div className='text-gray-600'>遇到系统问题可一键联系 IT / 运营支持。</div>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
37
src/components/layout/TopBar.tsx
Normal file
37
src/components/layout/TopBar.tsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { Input } from '../ui';
|
||||||
|
|
||||||
|
interface TopBarProps {
|
||||||
|
search: string;
|
||||||
|
onSearch: (value: string) => void;
|
||||||
|
enableSearch?: boolean;
|
||||||
|
operatorName?: string;
|
||||||
|
onLoginClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TopBar = ({ search, onSearch, enableSearch = true, operatorName, onLoginClick }: TopBarProps) => (
|
||||||
|
<header className='flex items-center gap-3 p-4 border-b bg-white'>
|
||||||
|
<div className='flex-1 flex items-center gap-3'>
|
||||||
|
{enableSearch ? (
|
||||||
|
<div className='w-[420px] max-w-[60vw]'>
|
||||||
|
<Input
|
||||||
|
placeholder='搜索姓名 / 体检号 / 套餐'
|
||||||
|
value={search}
|
||||||
|
onChange={(e) => onSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className='text-sm text-gray-500'>圆和医疗 · 体检驾驶舱</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center gap-3 text-xs'>
|
||||||
|
<button
|
||||||
|
onClick={onLoginClick}
|
||||||
|
className='px-3 py-1 rounded-2xl border bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer'
|
||||||
|
>
|
||||||
|
操作员 · {operatorName || '未登录'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
169
src/components/modals/LoginModal.tsx
Normal file
169
src/components/modals/LoginModal.tsx
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Button, Input } from '../ui';
|
||||||
|
|
||||||
|
interface LoginModalProps {
|
||||||
|
onClose: () => void;
|
||||||
|
onLoginSuccess?: (phone: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LoginModal = ({ onClose, onLoginSuccess }: LoginModalProps) => {
|
||||||
|
const [phone, setPhone] = useState('');
|
||||||
|
const [code, setCode] = useState('');
|
||||||
|
const [countdown, setCountdown] = useState(0);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
// 验证码倒计时
|
||||||
|
useEffect(() => {
|
||||||
|
if (countdown > 0) {
|
||||||
|
const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [countdown]);
|
||||||
|
|
||||||
|
// 验证手机号格式
|
||||||
|
const validatePhone = (phoneNumber: string): boolean => {
|
||||||
|
return /^1[3-9]\d{9}$/.test(phoneNumber);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 发送验证码
|
||||||
|
const handleSendCode = async () => {
|
||||||
|
if (!phone) {
|
||||||
|
setError('请输入手机号');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!validatePhone(phone)) {
|
||||||
|
setError('请输入正确的手机号');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setError('');
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// 模拟发送验证码 API 调用
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
setCountdown(60); // 60秒倒计时
|
||||||
|
// 实际项目中，这里应该调用后端 API 发送验证码
|
||||||
|
// 开发环境可以显示验证码（例如：123456）
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log('验证码已发送（开发环境：123456）');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录
|
||||||
|
const handleLogin = async () => {
|
||||||
|
if (!phone) {
|
||||||
|
setError('请输入手机号');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!validatePhone(phone)) {
|
||||||
|
setError('请输入正确的手机号');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!code) {
|
||||||
|
setError('请输入验证码');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (code.length !== 6) {
|
||||||
|
setError('验证码应为6位数字');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setError('');
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// 模拟登录 API 调用
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||||
|
|
||||||
|
// 开发环境：验证码为 123456 时通过
|
||||||
|
if (code === '123456') {
|
||||||
|
setLoading(false);
|
||||||
|
onLoginSuccess?.(phone);
|
||||||
|
onClose();
|
||||||
|
} else {
|
||||||
|
setLoading(false);
|
||||||
|
setError('验证码错误，请重新输入');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const canSendCode = countdown === 0 && !loading && phone.length === 11;
|
||||||
|
const canLogin = phone && code && !loading;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='fixed inset-0 z-50 flex items-center justify-center bg-black/30' onClick={onClose}>
|
||||||
|
<div
|
||||||
|
className='w-[480px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className='px-4 py-3 border-b flex items-center justify-between'>
|
||||||
|
<div className='font-semibold'>操作员登录</div>
|
||||||
|
<button className='text-xs text-gray-500 hover:text-gray-700' onClick={onClose}>
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='px-4 py-6 bg-gray-50/60 space-y-4'>
|
||||||
|
<div className='space-y-2'>
|
||||||
|
<label className='text-xs text-gray-700 font-medium'>手机号</label>
|
||||||
|
<Input
|
||||||
|
type='tel'
|
||||||
|
placeholder='请输入手机号'
|
||||||
|
value={phone}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value.replace(/\D/g, '').slice(0, 11);
|
||||||
|
setPhone(value);
|
||||||
|
setError('');
|
||||||
|
}}
|
||||||
|
maxLength={11}
|
||||||
|
className='text-base'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='space-y-2'>
|
||||||
|
<label className='text-xs text-gray-700 font-medium'>验证码</label>
|
||||||
|
<div className='flex gap-2'>
|
||||||
|
<Input
|
||||||
|
type='text'
|
||||||
|
placeholder='请输入6位验证码'
|
||||||
|
value={code}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value.replace(/\D/g, '').slice(0, 6);
|
||||||
|
setCode(value);
|
||||||
|
setError('');
|
||||||
|
}}
|
||||||
|
maxLength={6}
|
||||||
|
className='text-base flex-1'
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleSendCode}
|
||||||
|
disabled={!canSendCode}
|
||||||
|
className={!canSendCode ? 'opacity-50 cursor-not-allowed' : ''}
|
||||||
|
>
|
||||||
|
{countdown > 0 ? `${countdown}秒` : loading ? '发送中...' : '发送验证码'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className='text-[11px] text-gray-500'>
|
||||||
|
开发环境：验证码为 <span className='font-mono font-semibold'>123456</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className='px-3 py-2 rounded-xl bg-red-50 border border-red-200 text-xs text-red-600'>{error}</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className='pt-2'>
|
||||||
|
<Button
|
||||||
|
onClick={handleLogin}
|
||||||
|
disabled={!canLogin}
|
||||||
|
className={`w-full justify-center ${!canLogin ? 'opacity-50 cursor-not-allowed' : 'bg-gray-900 hover:bg-gray-800'}`}
|
||||||
|
>
|
||||||
|
{loading ? '· · ·' : '登录'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
144
src/components/modals/QuickActionModal.tsx
Normal file
144
src/components/modals/QuickActionModal.tsx
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
import type { ExamClient, QuickActionType } from '../../data/mockData';
|
||||||
|
import { EXAM_CLIENTS } from '../../data/mockData';
|
||||||
|
import { Button, InfoCard, Input } from '../ui';
|
||||||
|
|
||||||
|
interface QuickActionModalProps {
|
||||||
|
action: QuickActionType;
|
||||||
|
noteText: string;
|
||||||
|
onNoteChange: (v: string) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
totalExamCount: number;
|
||||||
|
mealCount: number;
|
||||||
|
notMealCount: number;
|
||||||
|
mealDoneIds: string[];
|
||||||
|
onMealDone: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const QuickActionModal = ({
|
||||||
|
action,
|
||||||
|
noteText,
|
||||||
|
onNoteChange,
|
||||||
|
onClose,
|
||||||
|
totalExamCount,
|
||||||
|
mealCount,
|
||||||
|
notMealCount,
|
||||||
|
mealDoneIds,
|
||||||
|
onMealDone,
|
||||||
|
}: QuickActionModalProps) => {
|
||||||
|
const titleMap: Record<Exclude<QuickActionType, 'none'>, string> = {
|
||||||
|
meal: '用餐登记',
|
||||||
|
vip: '太平 VIP 认证说明',
|
||||||
|
delivery: '报告寄送登记',
|
||||||
|
note: '备注窗',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (action === 'none') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
|
||||||
|
<div className='w-[560px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
|
||||||
|
<div className='px-4 py-3 border-b flex items-center justify-between'>
|
||||||
|
<div className='font-semibold'>{titleMap[action]}</div>
|
||||||
|
<button className='text-xs text-gray-500' onClick={onClose}>
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='px-4 py-4 bg-gray-50/60'>
|
||||||
|
{action === 'meal' && (
|
||||||
|
<div className='space-y-3'>
|
||||||
|
<div className='grid grid-cols-3 gap-3 text-xs'>
|
||||||
|
<InfoCard label='今日体检人数' value={totalExamCount} />
|
||||||
|
<InfoCard label='已用餐人数' value={mealCount} />
|
||||||
|
<InfoCard label='未用餐人数' value={notMealCount} />
|
||||||
|
</div>
|
||||||
|
<div className='text-xs text-gray-600 mt-2 mb-1'>选择已用餐客户进行登记：</div>
|
||||||
|
<div className='max-h-60 overflow-auto border rounded-2xl bg-white p-2 text-xs'>
|
||||||
|
{EXAM_CLIENTS.map((c: ExamClient) => {
|
||||||
|
const checked = mealDoneIds.includes(c.id);
|
||||||
|
return (
|
||||||
|
<label
|
||||||
|
key={c.id}
|
||||||
|
className='flex items-center justify-between px-3 py-1.5 rounded-2xl hover:bg-gray-50 cursor-pointer'
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{c.name} <span className='text-gray-400 text-[11px]'>({c.id})</span>
|
||||||
|
</span>
|
||||||
|
<span className='flex items-center gap-2'>
|
||||||
|
<span className='text-gray-400'>{c.status}</span>
|
||||||
|
<input type='checkbox' checked={checked} onChange={() => onMealDone(c.id)} />
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{action === 'vip' && (
|
||||||
|
<div className='flex gap-4 items-center'>
|
||||||
|
<div className='flex-1 text-xs text-gray-700 space-y-2'>
|
||||||
|
<p>通过「太平 VIP 认证」二维码，可完成太平渠道客户的身份绑定与权益确认。</p>
|
||||||
|
<ul className='list-disc ml-5 space-y-1'>
|
||||||
|
<li>客户出示太平 APP 内会员二维码，由工作人员扫码完成认证。</li>
|
||||||
|
<li>认证成功后，系统会自动标记为「太平 VIP 客户」，并记录在体检档案中。</li>
|
||||||
|
<li>支持后续报告寄送、复查预约等专属服务。</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className='w-40 h-40 rounded-3xl bg-white border flex items-center justify-center text-xs text-gray-500'>
|
||||||
|
太平认证二维码占位
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{action === 'delivery' && (
|
||||||
|
<div className='space-y-3 text-xs text-gray-700'>
|
||||||
|
<div className='grid grid-cols-2 gap-3'>
|
||||||
|
<div>
|
||||||
|
收件人姓名
|
||||||
|
<Input placeholder='请输入收件人姓名' className='mt-1' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
联系电话
|
||||||
|
<Input placeholder='用于快递联系' className='mt-1' />
|
||||||
|
</div>
|
||||||
|
<div className='col-span-2'>
|
||||||
|
寄送地址
|
||||||
|
<Input placeholder='请输入详细寄送地址' className='mt-1' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
备注说明
|
||||||
|
<textarea
|
||||||
|
className='w-full mt-1 rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[72px]'
|
||||||
|
placeholder='如需多份报告、加急寄送等，请在此备注'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='text-right'>
|
||||||
|
<Button>保存寄送信息</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{action === 'note' && (
|
||||||
|
<div className='space-y-3 text-xs text-gray-700'>
|
||||||
|
<div>体检客户服务备注（仅内部可见）</div>
|
||||||
|
<textarea
|
||||||
|
className='w-full rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[96px]'
|
||||||
|
placeholder='例如：客户有既往疾病史、沟通偏好、特殊关怀需求等，可在此记录。'
|
||||||
|
value={noteText}
|
||||||
|
onChange={(e) => onNoteChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
<div className='text-right text-[11px] text-gray-500'>
|
||||||
|
备注内容会同步至客户详情页，供前台和导检护士查看。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
42
src/components/support/SupportSection.tsx
Normal file
42
src/components/support/SupportSection.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import { Card, CardContent, CardHeader } from '../ui';
|
||||||
|
|
||||||
|
export const SupportSection = () => (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>客服咨询 · 圆圆客服台卡</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='grid grid-cols-[1.2fr_1fr] gap-6 items-center'>
|
||||||
|
<div className='space-y-3 text-sm text-gray-700'>
|
||||||
|
<p>通过「圆圆客服」二维码，客户可获得一站式健康服务：包含体检预约、报告查询、报告解读等。</p>
|
||||||
|
<ul className='list-disc ml-5 space-y-1 text-xs text-gray-600'>
|
||||||
|
<li>支持体检当天现场扫码添加，绑定客户信息</li>
|
||||||
|
<li>扫码后可在线查看体检进度、报告结果</li>
|
||||||
|
<li>提供一对一健康咨询与报告解读服务</li>
|
||||||
|
</ul>
|
||||||
|
<div className='text-xs text-gray-500'>注：实际系统中可上传设计好的「圆圆客服二维码台卡」图片，用于前台展示与打印。</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='h-64 rounded-3xl overflow-hidden shadow-inner flex items-center justify-center bg-gradient-to-b from-[#152749] to-[#c73545]'>
|
||||||
|
<div className='flex flex-col items-center gap-3 text-white'>
|
||||||
|
<div className='text-[11px] tracking-[0.2em] opacity-80'>CIRCLE HARMONY · 圆和医疗</div>
|
||||||
|
<div className='text-sm font-medium'>圆圆客服 · 一站式健康服务</div>
|
||||||
|
<div className='w-28 h-28 rounded-full bg-white flex items-center justify-center'>
|
||||||
|
<div className='w-20 h-20 rounded-md bg-gray-200 flex items-center justify-center text-[10px] text-gray-500'>
|
||||||
|
二维码占位
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='text-sm font-semibold'>一对一专属服务</div>
|
||||||
|
<div className='px-4 py-1.5 rounded-full border border-white/70 text-[11px] flex gap-2'>
|
||||||
|
<span>服务预约</span>
|
||||||
|
<span>/</span>
|
||||||
|
<span>报告查询</span>
|
||||||
|
<span>/</span>
|
||||||
|
<span>报告解读</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
7
src/components/ui/Badge.tsx
Normal file
7
src/components/ui/Badge.tsx
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import type { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
export const Badge = ({ children }: PropsWithChildren) => (
|
||||||
|
<span className='px-2 py-0.5 rounded-full border text-xs bg-gray-50'>{children}</span>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
21
src/components/ui/Button.tsx
Normal file
21
src/components/ui/Button.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
import { cls } from '../../utils/cls';
|
||||||
|
|
||||||
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Button = ({ className = '', children, ...rest }: ButtonProps) => (
|
||||||
|
<button
|
||||||
|
className={cls(
|
||||||
|
'inline-flex items-center gap-2 px-4 py-2 rounded-2xl border text-sm bg-white hover:bg-gray-50 transition-colors',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
21
src/components/ui/Card.tsx
Normal file
21
src/components/ui/Card.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import type { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
import { cls } from '../../utils/cls';
|
||||||
|
|
||||||
|
interface CardProps extends PropsWithChildren {
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Card = ({ className = '', children }: CardProps) => (
|
||||||
|
<div className={cls('rounded-2xl border bg-white shadow-sm', className)}>{children}</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const CardHeader = ({ children }: PropsWithChildren) => (
|
||||||
|
<div className='px-5 pt-4 pb-2 font-medium flex items-center justify-between'>{children}</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const CardContent = ({ children }: PropsWithChildren) => (
|
||||||
|
<div className='px-5 pb-5'>{children}</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
13
src/components/ui/InfoCard.tsx
Normal file
13
src/components/ui/InfoCard.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
interface InfoCardProps {
|
||||||
|
label: React.ReactNode;
|
||||||
|
value: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const InfoCard = ({ label, value }: InfoCardProps) => (
|
||||||
|
<div className='p-3 rounded-xl border flex items-center justify-between text-sm'>
|
||||||
|
<span>{label}</span>
|
||||||
|
<span className='text-lg font-semibold'>{value}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
19
src/components/ui/Input.tsx
Normal file
19
src/components/ui/Input.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import type { InputHTMLAttributes } from 'react';
|
||||||
|
|
||||||
|
import { cls } from '../../utils/cls';
|
||||||
|
|
||||||
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Input = ({ className = '', ...rest }: InputProps) => (
|
||||||
|
<input
|
||||||
|
className={cls(
|
||||||
|
'w-full rounded-2xl border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-gray-200',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
7
src/components/ui/index.ts
Normal file
7
src/components/ui/index.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export * from './Badge';
|
||||||
|
export * from './Button';
|
||||||
|
export * from './Card';
|
||||||
|
export * from './InfoCard';
|
||||||
|
export * from './Input';
|
||||||
|
|
||||||
|
|
||||||
138
src/data/mockData.ts
Normal file
138
src/data/mockData.ts
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
export interface ExamClient {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
gender: '男' | '女';
|
||||||
|
age: number;
|
||||||
|
level: string;
|
||||||
|
packageName: string;
|
||||||
|
status: '体检中' | '已签到' | '用餐';
|
||||||
|
elapsed: string;
|
||||||
|
checkedItems: string[];
|
||||||
|
pendingItems: string[];
|
||||||
|
timeSlot: '上午' | '下午';
|
||||||
|
vipType: '高客' | '普客';
|
||||||
|
signStatus: '已登记' | '未登记';
|
||||||
|
customerType: '团客' | '散客';
|
||||||
|
guidePrinted?: boolean;
|
||||||
|
addonCount?: number;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ExamModalTab = 'detail' | 'sign' | 'addon' | 'print';
|
||||||
|
export type QuickActionType = 'none' | 'meal' | 'vip' | 'delivery' | 'note';
|
||||||
|
|
||||||
|
export const HOME_STATS: [string, number][] = [
|
||||||
|
['今日预约', 80],
|
||||||
|
['签到人数', 60],
|
||||||
|
['在检人数', 25],
|
||||||
|
['打印导检单', 40],
|
||||||
|
['已完成人数', 30],
|
||||||
|
];
|
||||||
|
|
||||||
|
export const REVENUE_STATS: [string, string][] = [
|
||||||
|
['体检收入', '¥ 86,000'],
|
||||||
|
['加项收入', '¥ 12,400'],
|
||||||
|
['整体收入', '¥ 98,400'],
|
||||||
|
['目标收入', '¥ 120,000'],
|
||||||
|
['完成百分比', '82%'],
|
||||||
|
['缺口', '¥ 21,600'],
|
||||||
|
];
|
||||||
|
|
||||||
|
export const B1_ROWS: [string, string, number, number, number, number][] = [
|
||||||
|
['B超1', '张医生', 6, 2, 2, 15],
|
||||||
|
['B超2', '李医生', 5, 2, 1, 14],
|
||||||
|
['B超3', '王医生', 4, 2, 2, 16],
|
||||||
|
['耳鼻喉', '王医生', 10, 3, 2, 10],
|
||||||
|
['外科', '周医生', 8, 3, 2, 20],
|
||||||
|
];
|
||||||
|
|
||||||
|
export const B1_SUMMARY = {
|
||||||
|
totalClients: B1_ROWS.reduce((s, r) => s + r[2] + r[3] + r[4], 0),
|
||||||
|
waiting: B1_ROWS.reduce((s, r) => s + r[4], 0),
|
||||||
|
inExam: B1_ROWS.reduce((s, r) => s + r[3], 0),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const NORTH3_ROWS: [string, number, number][] = [
|
||||||
|
['刘医生', 15, 9],
|
||||||
|
['高医生', 12, 7],
|
||||||
|
['马医生', 18, 10],
|
||||||
|
];
|
||||||
|
|
||||||
|
export const NORTH3_SUMMARY = {
|
||||||
|
totalDoctor: NORTH3_ROWS.length,
|
||||||
|
totalAssigned: NORTH3_ROWS.reduce((s, r) => s + r[1], 0),
|
||||||
|
consult: NORTH3_ROWS.reduce((s, r) => s + r[2], 0),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const EXAM_CLIENTS: ExamClient[] = [
|
||||||
|
{
|
||||||
|
id: 'A001',
|
||||||
|
name: '张伟',
|
||||||
|
gender: '男',
|
||||||
|
age: 35,
|
||||||
|
level: 'VIP',
|
||||||
|
packageName: '高端入职体检套餐',
|
||||||
|
status: '体检中',
|
||||||
|
elapsed: '00:45',
|
||||||
|
checkedItems: ['签到', '更衣', '预检', '抽血'],
|
||||||
|
pendingItems: ['家医面诊', 'B超'],
|
||||||
|
timeSlot: '上午',
|
||||||
|
vipType: '高客',
|
||||||
|
signStatus: '已登记',
|
||||||
|
customerType: '团客',
|
||||||
|
guidePrinted: true,
|
||||||
|
addonCount: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A002',
|
||||||
|
name: '李静',
|
||||||
|
gender: '女',
|
||||||
|
age: 29,
|
||||||
|
level: '普通',
|
||||||
|
packageName: '基础体检套餐',
|
||||||
|
status: '已签到',
|
||||||
|
elapsed: '00:10',
|
||||||
|
checkedItems: ['签到'],
|
||||||
|
pendingItems: ['更衣', '预检', '抽血'],
|
||||||
|
timeSlot: '上午',
|
||||||
|
vipType: '普客',
|
||||||
|
signStatus: '已登记',
|
||||||
|
customerType: '散客',
|
||||||
|
guidePrinted: false,
|
||||||
|
addonCount: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A003',
|
||||||
|
name: '孙丽',
|
||||||
|
gender: '女',
|
||||||
|
age: 31,
|
||||||
|
level: 'VIP',
|
||||||
|
packageName: '健康管理套餐',
|
||||||
|
status: '用餐',
|
||||||
|
elapsed: '00:50',
|
||||||
|
checkedItems: ['签到', '更衣', '预检', '抽血', '家医面诊'],
|
||||||
|
pendingItems: ['B超'],
|
||||||
|
timeSlot: '下午',
|
||||||
|
vipType: '高客',
|
||||||
|
signStatus: '已登记',
|
||||||
|
customerType: '团客',
|
||||||
|
guidePrinted: true,
|
||||||
|
addonCount: 1,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const EXAM_STATS: [string, number][] = [
|
||||||
|
['预约人数', EXAM_CLIENTS.length],
|
||||||
|
['已签到', EXAM_CLIENTS.filter((c) => c.status === '已签到').length],
|
||||||
|
['体检中', EXAM_CLIENTS.filter((c) => c.status === '体检中').length],
|
||||||
|
['用餐', EXAM_CLIENTS.filter((c) => c.status === '用餐').length],
|
||||||
|
];
|
||||||
|
|
||||||
|
export const EXAM_TAGS = ['全部', '上午', '下午', '高客', '普客', '已登记', '未登记', '散客', '团客'] as const;
|
||||||
|
|
||||||
|
export const BOOKING_DOCTORS = [
|
||||||
|
{ id: 'zhang', name: '张主任', dept: '内科 · 主任医师', period: '上午', total: 20, remain: 8 },
|
||||||
|
{ id: 'wang', name: '王教授', dept: '外科 · 主任医师', period: '下午', total: 16, remain: 10 },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
17
src/index.css
Normal file
17
src/index.css
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
|
||||||
|
color: #0f172a;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
}
|
||||||
120
src/layouts/MainLayout.tsx
Normal file
120
src/layouts/MainLayout.tsx
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
|
||||||
|
import type { QuickActionType } from '../data/mockData';
|
||||||
|
import { EXAM_CLIENTS } from '../data/mockData';
|
||||||
|
import { QuickActionModal } from '../components/modals/QuickActionModal';
|
||||||
|
import { LoginModal } from '../components/modals/LoginModal';
|
||||||
|
import { Sidebar, type SectionKey } from '../components/layout/Sidebar';
|
||||||
|
import { TopBar } from '../components/layout/TopBar';
|
||||||
|
|
||||||
|
export interface MainLayoutContext {
|
||||||
|
search: string;
|
||||||
|
setSearch: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sectionToRoute: Record<SectionKey, string> = {
|
||||||
|
home: '/home',
|
||||||
|
exam: '/exam',
|
||||||
|
booking: '/booking',
|
||||||
|
support: '/support',
|
||||||
|
};
|
||||||
|
|
||||||
|
const routeToSection = Object.entries(sectionToRoute).reduce<Record<string, SectionKey>>(
|
||||||
|
(acc, [section, route]) => {
|
||||||
|
acc[route] = section as SectionKey;
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
|
||||||
|
export const MainLayout = () => {
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [quickAction, setQuickAction] = useState<QuickActionType>('none');
|
||||||
|
const [noteText, setNoteText] = useState('');
|
||||||
|
const [loginModalOpen, setLoginModalOpen] = useState(false);
|
||||||
|
const [operatorName, setOperatorName] = useState<string>('');
|
||||||
|
const [mealDoneIds, setMealDoneIds] = useState<string[]>(
|
||||||
|
EXAM_CLIENTS.filter((c) => c.status === '用餐').map((c) => c.id),
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalExamCount = EXAM_CLIENTS.length;
|
||||||
|
const mealCount = mealDoneIds.length;
|
||||||
|
const notMealCount = totalExamCount - mealCount;
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const activeSection: SectionKey = useMemo(() => {
|
||||||
|
const matched = Object.entries(routeToSection).find(([path]) => location.pathname.startsWith(path));
|
||||||
|
return (matched?.[1] || 'home') as SectionKey;
|
||||||
|
}, [location.pathname]);
|
||||||
|
|
||||||
|
const handleNavigate = (section: SectionKey) => {
|
||||||
|
navigate(sectionToRoute[section]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMealDone = (id: string) => {
|
||||||
|
setMealDoneIds((prev) => (prev.includes(id) ? prev : prev.concat(id)));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLoginSuccess = (phone: string) => {
|
||||||
|
// 实际项目中应该从后端获取用户信息
|
||||||
|
// 这里暂时使用手机号后4位作为操作员名称
|
||||||
|
const displayName = phone.slice(-4);
|
||||||
|
setOperatorName(displayName);
|
||||||
|
// 可以存储到 localStorage 或状态管理中
|
||||||
|
localStorage.setItem('operatorPhone', phone);
|
||||||
|
localStorage.setItem('operatorName', displayName);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化时检查是否有已登录的操作员
|
||||||
|
useEffect(() => {
|
||||||
|
const savedName = localStorage.getItem('operatorName');
|
||||||
|
if (savedName) {
|
||||||
|
setOperatorName(savedName);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='min-h-screen bg-gray-50 text-gray-900 grid grid-cols-[240px_1fr]'>
|
||||||
|
<Sidebar active={activeSection} onNavigate={handleNavigate} onQuickAction={setQuickAction} />
|
||||||
|
|
||||||
|
<div className='flex flex-col min-h-screen'>
|
||||||
|
<TopBar
|
||||||
|
search={search}
|
||||||
|
onSearch={setSearch}
|
||||||
|
enableSearch={activeSection === 'exam'}
|
||||||
|
operatorName={operatorName}
|
||||||
|
onLoginClick={() => setLoginModalOpen(true)}
|
||||||
|
/>
|
||||||
|
<main className='p-6 space-y-6 flex-1 overflow-auto'>
|
||||||
|
<Outlet context={{ search, setSearch }} />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loginModalOpen && (
|
||||||
|
<LoginModal
|
||||||
|
onClose={() => setLoginModalOpen(false)}
|
||||||
|
onLoginSuccess={handleLoginSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{quickAction !== 'none' && (
|
||||||
|
<QuickActionModal
|
||||||
|
action={quickAction}
|
||||||
|
noteText={noteText}
|
||||||
|
onNoteChange={setNoteText}
|
||||||
|
onClose={() => setQuickAction('none')}
|
||||||
|
totalExamCount={totalExamCount}
|
||||||
|
mealCount={mealCount}
|
||||||
|
notMealCount={notMealCount}
|
||||||
|
mealDoneIds={mealDoneIds}
|
||||||
|
onMealDone={handleMealDone}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
21
src/pages/BookingPage.tsx
Normal file
21
src/pages/BookingPage.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import { BOOKING_DOCTORS } from '../data/mockData';
|
||||||
|
import { BookingSection } from '../components/booking/BookingSection';
|
||||||
|
|
||||||
|
export const BookingPage = () => {
|
||||||
|
const [selectedDay, setSelectedDay] = useState(1);
|
||||||
|
const [bookingDoctor, setBookingDoctor] = useState<(typeof BOOKING_DOCTORS)[number] | null>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BookingSection
|
||||||
|
selectedDay={selectedDay}
|
||||||
|
onSelectDay={setSelectedDay}
|
||||||
|
bookingDoctor={bookingDoctor}
|
||||||
|
onSelectDoctor={setBookingDoctor}
|
||||||
|
onCloseModal={() => setBookingDoctor(null)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
74
src/pages/ExamPage.tsx
Normal file
74
src/pages/ExamPage.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { useOutletContext } from 'react-router-dom';
|
||||||
|
|
||||||
|
import type { ExamClient, ExamModalTab } from '../data/mockData';
|
||||||
|
import { EXAM_CLIENTS, EXAM_TAGS } from '../data/mockData';
|
||||||
|
import { ExamSection } from '../components/exam/ExamSection';
|
||||||
|
import { ExamModal } from '../components/exam/ExamModal';
|
||||||
|
import type { MainLayoutContext } from '../layouts/MainLayout';
|
||||||
|
|
||||||
|
export const ExamPage = () => {
|
||||||
|
const { search } = useOutletContext<MainLayoutContext>();
|
||||||
|
const [examSelectedId, setExamSelectedId] = useState<string>('A001');
|
||||||
|
const [examPanelTab, setExamPanelTab] = useState<ExamModalTab>('detail');
|
||||||
|
const [examModalOpen, setExamModalOpen] = useState(false);
|
||||||
|
const [examFilterTag, setExamFilterTag] = useState<(typeof EXAM_TAGS)[number]>('全部');
|
||||||
|
|
||||||
|
const filteredClients = useMemo(() => {
|
||||||
|
return EXAM_CLIENTS.filter((c) => (c.name + c.packageName + c.id).toLowerCase().includes(search.trim().toLowerCase())).filter(
|
||||||
|
(c) => {
|
||||||
|
switch (examFilterTag) {
|
||||||
|
case '上午':
|
||||||
|
return c.timeSlot === '上午';
|
||||||
|
case '下午':
|
||||||
|
return c.timeSlot === '下午';
|
||||||
|
case '高客':
|
||||||
|
return c.vipType === '高客';
|
||||||
|
case '普客':
|
||||||
|
return c.vipType === '普客';
|
||||||
|
case '已登记':
|
||||||
|
return c.signStatus === '已登记';
|
||||||
|
case '未登记':
|
||||||
|
return c.signStatus !== '已登记';
|
||||||
|
case '散客':
|
||||||
|
return c.customerType === '散客';
|
||||||
|
case '团客':
|
||||||
|
return c.customerType === '团客';
|
||||||
|
default:
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}, [search, examFilterTag]);
|
||||||
|
|
||||||
|
const selectedExamClient: ExamClient = EXAM_CLIENTS.find((c) => c.id === examSelectedId) || EXAM_CLIENTS[0];
|
||||||
|
|
||||||
|
const handleOpenModal = (id: string, tab: ExamModalTab) => {
|
||||||
|
setExamSelectedId(id);
|
||||||
|
setExamPanelTab(tab);
|
||||||
|
setExamModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ExamSection
|
||||||
|
filteredClients={filteredClients}
|
||||||
|
selectedExamClient={selectedExamClient}
|
||||||
|
examFilterTag={examFilterTag}
|
||||||
|
onFilterChange={setExamFilterTag}
|
||||||
|
onOpenModal={handleOpenModal}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{examModalOpen && (
|
||||||
|
<ExamModal
|
||||||
|
client={selectedExamClient}
|
||||||
|
tab={examPanelTab}
|
||||||
|
onTabChange={setExamPanelTab}
|
||||||
|
onClose={() => setExamModalOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
5
src/pages/HomePage.tsx
Normal file
5
src/pages/HomePage.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { HomeSection } from '../components/home/HomeSection';
|
||||||
|
|
||||||
|
export const HomePage = () => <HomeSection />;
|
||||||
|
|
||||||
|
|
||||||
5
src/pages/SupportPage.tsx
Normal file
5
src/pages/SupportPage.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { SupportSection } from '../components/support/SupportSection';
|
||||||
|
|
||||||
|
export const SupportPage = () => <SupportSection />;
|
||||||
|
|
||||||
|
|
||||||
24
src/router.tsx
Normal file
24
src/router.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { createBrowserRouter, Navigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { MainLayout } from './layouts/MainLayout';
|
||||||
|
import { HomePage } from './pages/HomePage';
|
||||||
|
import { ExamPage } from './pages/ExamPage';
|
||||||
|
import { BookingPage } from './pages/BookingPage';
|
||||||
|
import { SupportPage } from './pages/SupportPage';
|
||||||
|
|
||||||
|
export const router = createBrowserRouter([
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <MainLayout />,
|
||||||
|
children: [
|
||||||
|
{ index: true, element: <Navigate to='/home' replace /> },
|
||||||
|
{ path: 'home', element: <HomePage /> },
|
||||||
|
{ path: 'exam', element: <ExamPage /> },
|
||||||
|
{ path: 'booking', element: <BookingPage /> },
|
||||||
|
{ path: 'support', element: <SupportPage /> },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ path: '*', element: <Navigate to='/home' replace /> },
|
||||||
|
]);
|
||||||
|
|
||||||
|
|
||||||
4
src/utils/cls.ts
Normal file
4
src/utils/cls.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export const cls = (...xs: Array<string | false | null | undefined>) =>
|
||||||
|
xs.filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
|
||||||
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
28
tsconfig.app.json
Normal file
28
tsconfig.app.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
26
tsconfig.node.json
Normal file
26
tsconfig.node.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
1352
圆和医疗_体检中心网页原型_2.jsx
Normal file
1352
圆和医疗_体检中心网页原型_2.jsx
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user