20260701171607

This commit is contained in:
oneao committed 2026-07-01 17:16:07 +08:00
1 parent cebbd3f92c
commit 13116a12cb
83 files changed
+6217

No files matched your search

+24
View 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?
+54
View File
@@ -0,0 +1,54 @@
# 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/) 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
## 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 tseslint.config({
extends: [
// 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,
],
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
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 tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
})
```
+28
View File
@@ -0,0 +1,28 @@
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'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
+13
View 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>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
+4184
View File
File diff suppressed because it is too large. Load diff
+34
View File
@@ -0,0 +1,34 @@
{
"name": "test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"autoprefixer": "^10.5.2",
"lucide-react": "^1.22.0",
"postcss": "^8.5.16",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"tailwindcss": "^3.4.14",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.5"
}
}
+6
View File
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
+1
View 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

View File
Whitespace-only changes.
+350
View File
@@ -0,0 +1,350 @@
import React, { useState, useRef } from 'react';
import { useLocalStorage } from './hooks/useLocalStorage';
import { SchoolForm } from './components/SchoolForm';
import { MajorGroupForm } from './components/MajorGroupForm';
import { DataTable } from './components/DataTable';
import { Toast } from './components/Toast';
import {
exportToCSV,
exportToExcel,
importFromCSV,
importFromExcel,
} from './utils/importExport';
import type { School, ToastMessage } from './types';
import {
Plus,
Download,
Upload,
GraduationCap,
RefreshCw,
} from 'lucide-react';
function App() {
const {
data,
loading,
addSchool,
updateSchool,
deleteSchool,
addMajorGroup,
updateMajorGroup,
deleteMajorGroup,
saveData,
} = useLocalStorage();
const [showSchoolForm, setShowSchoolForm] = useState(false);
const [editingSchool, setEditingSchool] = useState<School | null>(null);
const [showMajorGroupForm, setShowMajorGroupForm] = useState(false);
const [editingMajorGroup, setEditingMajorGroup] = useState<{
schoolId: string;
majorGroup: School['majorGroups'][0];
} | null>(null);
const [addingMajorGroupToSchool, setAddingMajorGroupToSchool] =
useState<string | null>(null);
const [toastMessages, setToastMessages] = useState<ToastMessage[]>([]);
const [importing, setImporting] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const addToast = (type: ToastMessage['type'], message: string) => {
const id = Date.now().toString();
setToastMessages((prev) => [...prev, { id, type, message }]);
};
const removeToast = (id: string) => {
setToastMessages((prev) => prev.filter((msg) => msg.id !== id));
};
const handleAddSchool = (schoolData: Omit<School, 'id' | 'createdAt' | 'updatedAt'>) => {
addSchool(schoolData);
setShowSchoolForm(false);
addToast('success', '学校添加成功');
};
const handleEditSchool = (schoolData: Omit<School, 'id' | 'createdAt' | 'updatedAt'>) => {
if (editingSchool) {
updateSchool(editingSchool.id, schoolData);
setEditingSchool(null);
setShowSchoolForm(false);
addToast('success', '学校信息更新成功');
}
};
const handleDeleteSchool = (id: string) => {
if (window.confirm('确定要删除这所学校及其所有专业组吗?')) {
deleteSchool(id);
addToast('success', '学校删除成功');
}
};
const handleAddMajorGroup = (majorGroupData: Omit<School['majorGroups'][0], 'id'>) => {
if (addingMajorGroupToSchool) {
addMajorGroup(addingMajorGroupToSchool, majorGroupData);
setAddingMajorGroupToSchool(null);
setShowMajorGroupForm(false);
addToast('success', '专业组添加成功');
}
};
const handleEditMajorGroup = (majorGroupData: Omit<School['majorGroups'][0], 'id'>) => {
if (editingMajorGroup) {
updateMajorGroup(
editingMajorGroup.schoolId,
editingMajorGroup.majorGroup.id,
majorGroupData
);
setEditingMajorGroup(null);
setShowMajorGroupForm(false);
addToast('success', '专业组信息更新成功');
}
};
const handleDeleteMajorGroup = (schoolId: string, majorGroupId: string) => {
if (window.confirm('确定要删除这个专业组吗?')) {
deleteMajorGroup(schoolId, majorGroupId);
addToast('success', '专业组删除成功');
}
};
const handleExportCSV = () => {
const csv = exportToCSV(data);
const blob = new Blob([`\uFEFF${csv}`], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `志愿意向数据_${new Date().toISOString().slice(0, 10)}.csv`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
addToast('success', 'CSV导出成功');
};
const handleExportExcel = () => {
const blob = exportToExcel(data);
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `志愿意向数据_${new Date().toISOString().slice(0, 10)}.xlsx`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
addToast('success', 'Excel导出成功');
};
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
setImporting(true);
try {
let importedData: School[];
if (file.name.endsWith('.csv')) {
const text = await file.text();
importedData = importFromCSV(text);
} else if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
importedData = await importFromExcel(file);
} else {
throw new Error('不支持的文件格式,请上传CSV或Excel文件');
}
saveData(importedData);
addToast('success', `成功导入${importedData.length}所学校数据`);
} catch (error) {
addToast('error', (error as Error).message);
} finally {
setImporting(false);
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
}
};
const handleRefresh = () => {
window.location.reload();
};
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
<header className="bg-white shadow-sm border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center gap-3">
<div className="bg-blue-600 p-2 rounded-lg">
<GraduationCap className="w-6 h-6 text-white" />
</div>
<div>
<h1 className="text-xl font-bold text-gray-900">志愿意向录入系统</h1>
<p className="text-sm text-gray-500">管理您的志愿填报信息</p>
</div>
</div>
<div className="flex items-center gap-3">
<button
onClick={handleRefresh}
className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
title="刷新页面"
>
<RefreshCw className="w-5 h-5" />
</button>
<button
onClick={() => fileInputRef.current?.click()}
className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50"
disabled={importing}
>
{importing && (
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
fill="none"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
)}
<Upload className="w-4 h-4" />
导入数据
</button>
<input
ref={fileInputRef}
type="file"
accept=".csv,.xlsx,.xls"
onChange={handleFileChange}
className="hidden"
/>
<button
onClick={handleExportCSV}
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<Download className="w-4 h-4" />
导出CSV
</button>
<button
onClick={handleExportExcel}
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
>
<Download className="w-4 h-4" />
导出Excel
</button>
<button
onClick={() => {
setEditingSchool(null);
setShowSchoolForm(true);
}}
className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
>
<Plus className="w-4 h-4" />
添加学校
</button>
</div>
</div>
</div>
</header>
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{loading ? (
<div className="flex items-center justify-center py-12">
<svg className="animate-spin h-10 w-10 text-blue-600" viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
fill="none"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
) : (
<DataTable
data={data}
onEditSchool={(school) => {
setEditingSchool(school);
setShowSchoolForm(true);
}}
onDeleteSchool={handleDeleteSchool}
onAddMajorGroup={(schoolId) => {
setAddingMajorGroupToSchool(schoolId);
setEditingMajorGroup(null);
setShowMajorGroupForm(true);
}}
onEditMajorGroup={(schoolId, majorGroup) => {
setEditingMajorGroup({ schoolId, majorGroup });
setAddingMajorGroupToSchool(null);
setShowMajorGroupForm(true);
}}
onDeleteMajorGroup={handleDeleteMajorGroup}
/>
)}
<div className="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<h3 className="text-lg font-semibold text-gray-800 mb-4">数据统计</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="bg-blue-50 rounded-lg p-4">
<div className="text-2xl font-bold text-blue-600">{data.length}</div>
<div className="text-sm text-blue-600">学校总数</div>
</div>
<div className="bg-green-50 rounded-lg p-4">
<div className="text-2xl font-bold text-green-600">
{data.reduce((sum, s) => sum + s.majorGroups.length, 0)}
</div>
<div className="text-sm text-green-600">专业组总数</div>
</div>
<div className="bg-purple-50 rounded-lg p-4">
<div className="text-2xl font-bold text-purple-600">
{data.filter((s) => s.type === '双一流').length}
</div>
<div className="text-sm text-purple-600">双一流院校</div>
</div>
<div className="bg-orange-50 rounded-lg p-4">
<div className="text-2xl font-bold text-orange-600">
{data.filter((s) => s.type === '985').length}
</div>
<div className="text-sm text-orange-600">985院校</div>
</div>
</div>
</div>
</main>
{showSchoolForm && (
<SchoolForm
school={editingSchool}
onSubmit={editingSchool ? handleEditSchool : handleAddSchool}
onCancel={() => {
setShowSchoolForm(false);
setEditingSchool(null);
}}
/>
)}
{showMajorGroupForm && (
<MajorGroupForm
majorGroup={editingMajorGroup?.majorGroup || null}
onSubmit={editingMajorGroup ? handleEditMajorGroup : handleAddMajorGroup}
onCancel={() => {
setShowMajorGroupForm(false);
setEditingMajorGroup(null);
setAddingMajorGroupToSchool(null);
}}
/>
)}
<Toast messages={toastMessages} onRemove={removeToast} />
</div>
);
}
export default App;
+1
View 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

+262
View File
@@ -0,0 +1,262 @@
import React, { useState } from 'react';
import type { School } from '../types';
import {
ChevronDown,
ChevronRight,
Edit,
Trash2,
Plus,
Building2,
} from 'lucide-react';
interface DataTableProps {
data: School[];
onEditSchool: (school: School) => void;
onDeleteSchool: (id: string) => void;
onAddMajorGroup: (schoolId: string) => void;
onEditMajorGroup: (schoolId: string, majorGroup: School['majorGroups'][0]) => void;
onDeleteMajorGroup: (schoolId: string, majorGroupId: string) => void;
}
export const DataTable: React.FC<DataTableProps> = ({
data,
onEditSchool,
onDeleteSchool,
onAddMajorGroup,
onEditMajorGroup,
onDeleteMajorGroup,
}) => {
const [expandedSchools, setExpandedSchools] = useState<Set<string>>(
new Set(data.map((s) => s.id))
);
const toggleExpand = (schoolId: string) => {
const newExpanded = new Set(expandedSchools);
if (newExpanded.has(schoolId)) {
newExpanded.delete(schoolId);
} else {
newExpanded.add(schoolId);
}
setExpandedSchools(newExpanded);
};
const getTypeColor = (type: string) => {
switch (type) {
case '双一流':
return 'bg-red-100 text-red-700';
case '985':
return 'bg-orange-100 text-orange-700';
case '211':
return 'bg-blue-100 text-blue-700';
case '普通本科':
return 'bg-green-100 text-green-700';
case '专科':
return 'bg-gray-100 text-gray-700';
default:
return 'bg-gray-100 text-gray-700';
}
};
if (data.length === 0) {
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<div className="text-center">
<Building2 className="mx-auto h-12 w-12 text-gray-400 mb-4" />
<p className="text-gray-500">暂无数据,请添加学校信息</p>
</div>
</div>
);
}
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12">
展开
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
学校名称
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
所在地
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
学校类型
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
专业组数量
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
操作
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{data.map((school) => (
<React.Fragment key={school.id}>
<tr className="hover:bg-gray-50 transition-colors">
<td className="px-6 py-4">
<button
onClick={() => toggleExpand(school.id)}
className="text-gray-400 hover:text-gray-600 transition-colors"
>
{expandedSchools.has(school.id) ? (
<ChevronDown className="w-5 h-5" />
) : (
<ChevronRight className="w-5 h-5" />
)}
</button>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">
{school.name}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-500">{school.location}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getTypeColor(
school.type
)}`}
>
{school.type}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-500">
{school.majorGroups.length}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div className="flex items-center justify-end gap-2">
<button
onClick={() => onEditSchool(school)}
className="text-blue-600 hover:text-blue-900 px-2 py-1 rounded transition-colors"
>
<Edit className="w-4 h-4" />
</button>
<button
onClick={() => onDeleteSchool(school.id)}
className="text-red-600 hover:text-red-900 px-2 py-1 rounded transition-colors"
>
<Trash2 className="w-4 h-4" />
</button>
</div>
</td>
</tr>
{expandedSchools.has(school.id) && school.majorGroups.length > 0 && (
<tr>
<td colSpan={6} className="px-6 py-0 bg-gray-50/50">
<div className="border-t border-gray-200">
<table className="w-full">
<thead className="bg-gray-100">
<tr>
<th className="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
专业组代码
</th>
<th className="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
专业名称
</th>
<th className="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
分数线
</th>
<th className="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
备注
</th>
<th className="px-6 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
操作
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{school.majorGroups.map((majorGroup) => (
<tr
key={majorGroup.id}
className="hover:bg-blue-50/50 transition-colors"
>
<td className="px-6 py-3 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">
{majorGroup.groupCode}
</div>
</td>
<td className="px-6 py-3 whitespace-nowrap">
<div className="text-sm text-gray-500">
{majorGroup.majorName}
</div>
</td>
<td className="px-6 py-3 whitespace-nowrap">
<div className="text-sm text-gray-500">
{majorGroup.scoreLine}
</div>
</td>
<td className="px-6 py-3">
<div className="text-sm text-gray-500 max-w-xs truncate">
{majorGroup.remark || '-'}
</div>
</td>
<td className="px-6 py-3 whitespace-nowrap text-right text-sm font-medium">
<div className="flex items-center justify-end gap-2">
<button
onClick={() =>
onEditMajorGroup(school.id, majorGroup)
}
className="text-blue-600 hover:text-blue-900 px-2 py-1 rounded transition-colors"
>
<Edit className="w-4 h-4" />
</button>
<button
onClick={() =>
onDeleteMajorGroup(school.id, majorGroup.id)
}
className="text-red-600 hover:text-red-900 px-2 py-1 rounded transition-colors"
>
<Trash2 className="w-4 h-4" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
<div className="px-6 py-3 border-t border-gray-200">
<button
onClick={() => onAddMajorGroup(school.id)}
className="flex items-center gap-1 text-sm text-blue-600 hover:text-blue-900 transition-colors"
>
<Plus className="w-4 h-4" />
添加专业组
</button>
</div>
</div>
</td>
</tr>
)}
{expandedSchools.has(school.id) && school.majorGroups.length === 0 && (
<tr>
<td colSpan={6} className="px-6 py-4 bg-gray-50/50">
<div className="flex items-center justify-between">
<p className="text-sm text-gray-500">该学校暂无专业组</p>
<button
onClick={() => onAddMajorGroup(school.id)}
className="flex items-center gap-1 text-sm text-blue-600 hover:text-blue-900 transition-colors"
>
<Plus className="w-4 h-4" />
添加专业组
</button>
</div>
</td>
</tr>
)}
</React.Fragment>
))}
</tbody>
</table>
</div>
</div>
);
};
+214
View File
@@ -0,0 +1,214 @@
import React, { useState, useEffect } from 'react';
import type { MajorGroup, FormErrors } from '../types';
import { X, Save } from 'lucide-react';
interface MajorGroupFormProps {
majorGroup?: MajorGroup | null;
onSubmit: (data: Omit<MajorGroup, 'id'>) => void;
onCancel: () => void;
loading?: boolean;
}
export const MajorGroupForm: React.FC<MajorGroupFormProps> = ({
majorGroup,
onSubmit,
onCancel,
loading,
}) => {
const [formData, setFormData] = useState({
groupCode: '',
majorName: '',
scoreLine: '',
remark: '',
});
const [errors, setErrors] = useState<FormErrors>({});
useEffect(() => {
if (majorGroup) {
setFormData({
groupCode: majorGroup.groupCode,
majorName: majorGroup.majorName,
scoreLine: majorGroup.scoreLine.toString(),
remark: majorGroup.remark,
});
}
}, [majorGroup]);
const validate = (): boolean => {
const newErrors: FormErrors = {};
if (!formData.groupCode.trim()) {
newErrors.groupCode = '请输入专业组代码';
}
if (!formData.majorName.trim()) {
newErrors.majorName = '请输入专业名称';
}
const scoreLineNum = parseFloat(formData.scoreLine);
if (!formData.scoreLine.trim()) {
newErrors.scoreLine = '请输入分数线';
} else if (isNaN(scoreLineNum) || scoreLineNum <= 0 || scoreLineNum > 750) {
newErrors.scoreLine = '分数线必须是0-750之间的数字';
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validate()) {
onSubmit({
...formData,
scoreLine: parseFloat(formData.scoreLine),
});
}
};
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
if (errors[name]) {
setErrors((prev) => ({ ...prev, [name]: '' }));
}
};
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md transform transition-all">
<div className="flex items-center justify-between px-6 py-4 border-b">
<h2 className="text-xl font-semibold text-gray-800">
{majorGroup ? '编辑专业组' : '添加专业组'}
</h2>
<button
onClick={onCancel}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
>
<X className="w-5 h-5 text-gray-500" />
</button>
</div>
<form onSubmit={handleSubmit} className="p-6 space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
专业组代码 <span className="text-red-500">*</span>
</label>
<input
type="text"
name="groupCode"
value={formData.groupCode}
onChange={handleChange}
className={`w-full px-4 py-2 border rounded-lg transition-colors ${
errors.groupCode
? 'border-red-500 focus:ring-red-500 focus:border-red-500'
: 'border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
}`}
placeholder="如:A01"
disabled={loading}
/>
{errors.groupCode && (
<p className="mt-1 text-sm text-red-500">{errors.groupCode}</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
专业名称 <span className="text-red-500">*</span>
</label>
<input
type="text"
name="majorName"
value={formData.majorName}
onChange={handleChange}
className={`w-full px-4 py-2 border rounded-lg transition-colors ${
errors.majorName
? 'border-red-500 focus:ring-red-500 focus:border-red-500'
: 'border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
}`}
placeholder="请输入专业名称"
disabled={loading}
/>
{errors.majorName && (
<p className="mt-1 text-sm text-red-500">{errors.majorName}</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
分数线 <span className="text-red-500">*</span>
</label>
<input
type="number"
name="scoreLine"
value={formData.scoreLine}
onChange={handleChange}
className={`w-full px-4 py-2 border rounded-lg transition-colors ${
errors.scoreLine
? 'border-red-500 focus:ring-red-500 focus:border-red-500'
: 'border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
}`}
placeholder="请输入分数线"
min="0"
max="750"
disabled={loading}
/>
{errors.scoreLine && (
<p className="mt-1 text-sm text-red-500">{errors.scoreLine}</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
备注
</label>
<textarea
name="remark"
value={formData.remark}
onChange={handleChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
placeholder="请输入备注信息(可选)"
rows={3}
disabled={loading}
/>
</div>
<div className="flex gap-3 pt-4">
<button
type="button"
onClick={onCancel}
className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
disabled={loading}
>
取消
</button>
<button
type="submit"
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
disabled={loading}
>
{loading && (
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
fill="none"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
)}
<Save className="w-5 h-5" />
保存
</button>
</div>
</form>
</div>
</div>
);
};
+192
View File
@@ -0,0 +1,192 @@
import React, { useState, useEffect } from 'react';
import type { School, FormErrors } from '../types';
import { X, Save } from 'lucide-react';
interface SchoolFormProps {
school?: School | null;
onSubmit: (data: Omit<School, 'id' | 'createdAt' | 'updatedAt'>) => void;
onCancel: () => void;
loading?: boolean;
}
const schoolTypes = ['双一流', '985', '211', '普通本科', '专科'];
export const SchoolForm: React.FC<SchoolFormProps> = ({ school, onSubmit, onCancel, loading }) => {
const [formData, setFormData] = useState({
name: '',
location: '',
type: '',
});
const [errors, setErrors] = useState<FormErrors>({});
useEffect(() => {
if (school) {
setFormData({
name: school.name,
location: school.location,
type: school.type,
});
}
}, [school]);
const validate = (): boolean => {
const newErrors: FormErrors = {};
if (!formData.name.trim()) {
newErrors.name = '请输入学校名称';
}
if (!formData.location.trim()) {
newErrors.location = '请输入学校所在地';
}
if (!formData.type) {
newErrors.type = '请选择学校类型';
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validate()) {
onSubmit({
...formData,
majorGroups: school?.majorGroups || [],
});
}
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
if (errors[name]) {
setErrors((prev) => ({ ...prev, [name]: '' }));
}
};
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md transform transition-all">
<div className="flex items-center justify-between px-6 py-4 border-b">
<h2 className="text-xl font-semibold text-gray-800">
{school ? '编辑学校' : '添加学校'}
</h2>
<button
onClick={onCancel}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
>
<X className="w-5 h-5 text-gray-500" />
</button>
</div>
<form onSubmit={handleSubmit} className="p-6 space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
学校名称 <span className="text-red-500">*</span>
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
className={`w-full px-4 py-2 border rounded-lg transition-colors ${
errors.name
? 'border-red-500 focus:ring-red-500 focus:border-red-500'
: 'border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
}`}
placeholder="请输入学校名称"
disabled={loading}
/>
{errors.name && (
<p className="mt-1 text-sm text-red-500">{errors.name}</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
所在地 <span className="text-red-500">*</span>
</label>
<input
type="text"
name="location"
value={formData.location}
onChange={handleChange}
className={`w-full px-4 py-2 border rounded-lg transition-colors ${
errors.location
? 'border-red-500 focus:ring-red-500 focus:border-red-500'
: 'border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
}`}
placeholder="请输入学校所在地"
disabled={loading}
/>
{errors.location && (
<p className="mt-1 text-sm text-red-500">{errors.location}</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
学校类型 <span className="text-red-500">*</span>
</label>
<select
name="type"
value={formData.type}
onChange={handleChange}
className={`w-full px-4 py-2 border rounded-lg transition-colors ${
errors.type
? 'border-red-500 focus:ring-red-500 focus:border-red-500'
: 'border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
}`}
disabled={loading}
>
<option value="">请选择学校类型</option>
{schoolTypes.map((type) => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
{errors.type && (
<p className="mt-1 text-sm text-red-500">{errors.type}</p>
)}
</div>
<div className="flex gap-3 pt-4">
<button
type="button"
onClick={onCancel}
className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
disabled={loading}
>
取消
</button>
<button
type="submit"
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
disabled={loading}
>
{loading && (
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
fill="none"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
)}
<Save className="w-5 h-5" />
保存
</button>
</div>
</form>
</div>
</div>
);
};
+78
View File
@@ -0,0 +1,78 @@
import React, { useEffect } from 'react';
import type { ToastMessage } from '../types';
import { CheckCircle, XCircle, Info, X } from 'lucide-react';
interface ToastProps {
messages: ToastMessage[];
onRemove: (id: string) => void;
}
export const Toast: React.FC<ToastProps> = ({ messages, onRemove }) => {
useEffect(() => {
messages.forEach((msg) => {
const timer = setTimeout(() => {
onRemove(msg.id);
}, 3000);
return () => clearTimeout(timer);
});
}, [messages, onRemove]);
const getIcon = (type: ToastMessage['type']) => {
switch (type) {
case 'success':
return <CheckCircle className="w-5 h-5 text-green-500" />;
case 'error':
return <XCircle className="w-5 h-5 text-red-500" />;
case 'info':
return <Info className="w-5 h-5 text-blue-500" />;
}
};
const getStyle = (type: ToastMessage['type']) => {
switch (type) {
case 'success':
return 'bg-green-50 border-green-200 text-green-800';
case 'error':
return 'bg-red-50 border-red-200 text-red-800';
case 'info':
return 'bg-blue-50 border-blue-200 text-blue-800';
}
};
return (
<div className="fixed top-4 right-4 z-50 flex flex-col gap-2">
{messages.map((msg) => (
<div
key={msg.id}
className={`flex items-center gap-3 px-4 py-3 rounded-lg border shadow-lg animate-slide-in ${getStyle(
msg.type
)}`}
style={{
animation: 'slideIn 0.3s ease-out',
}}
>
{getIcon(msg.type)}
<p className="text-sm font-medium">{msg.message}</p>
<button
onClick={() => onRemove(msg.id)}
className="ml-auto p-1 hover:bg-black/10 rounded transition-colors"
>
<X className="w-4 h-4" />
</button>
</div>
))}
<style>{`
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
`}</style>
</div>
);
};
+177
View File
@@ -0,0 +1,177 @@
import { useState, useEffect, useCallback } from "react";
import type { School } from "../types";
const STORAGE_KEY = "volunteer_intent_data";
const defaultData: School[] = [
{
id: "1",
name: "清华大学",
location: "北京",
type: "双一流",
majorGroups: [
{
id: "m1",
groupCode: "A01",
majorName: "计算机科学与技术",
scoreLine: 680,
remark: "王牌专业",
},
{
id: "m2",
groupCode: "A02",
majorName: "人工智能",
scoreLine: 675,
remark: "热门专业",
},
],
createdAt: Date.now(),
updatedAt: Date.now(),
},
{
id: "2",
name: "北京大学",
location: "北京",
type: "双一流",
majorGroups: [
{
id: "m3",
groupCode: "B01",
majorName: "经济学",
scoreLine: 678,
remark: "",
},
{
id: "m4",
groupCode: "B02",
majorName: "法学",
scoreLine: 672,
remark: "国家级重点学科",
},
],
createdAt: Date.now(),
updatedAt: Date.now(),
},
];
export const useLocalStorage = () => {
const [data, setData] = useState<School[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
setData(JSON.parse(stored));
} else {
setData(defaultData);
localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultData));
}
} catch {
setData(defaultData);
} finally {
setLoading(false);
}
}, []);
const saveData = useCallback((newData: School[]) => {
setData(newData);
localStorage.setItem(STORAGE_KEY, JSON.stringify(newData));
}, []);
const addSchool = useCallback(
(school: Omit<School, "id" | "createdAt" | "updatedAt">) => {
const newSchool: School = {
...school,
id: Date.now().toString(),
createdAt: Date.now(),
updatedAt: Date.now(),
};
saveData([...data, newSchool]);
return newSchool;
},
[data, saveData],
);
const updateSchool = useCallback(
(id: string, updates: Partial<School>) => {
saveData(
data.map((school) =>
school.id === id
? { ...school, ...updates, updatedAt: Date.now() }
: school,
),
);
},
[data, saveData],
);
const deleteSchool = useCallback(
(id: string) => {
saveData(data.filter((school) => school.id !== id));
},
[data, saveData],
);
const addMajorGroup = useCallback(
(schoolId: string, majorGroup: Omit<School["majorGroups"][0], "id">) => {
updateSchool(schoolId, {
majorGroups: [
...(data.find((s) => s.id === schoolId)?.majorGroups || []),
{ ...majorGroup, id: Date.now().toString() },
],
});
},
[data, updateSchool],
);
const updateMajorGroup = useCallback(
(
schoolId: string,
majorGroupId: string,
updates: Partial<School["majorGroups"][0]>,
) => {
const school = data.find((s) => s.id === schoolId);
if (school) {
updateSchool(schoolId, {
majorGroups: school.majorGroups.map((mg) =>
mg.id === majorGroupId ? { ...mg, ...updates } : mg,
),
});
}
},
[data, updateSchool],
);
const deleteMajorGroup = useCallback(
(schoolId: string, majorGroupId: string) => {
const school = data.find((s) => s.id === schoolId);
if (school) {
updateSchool(schoolId, {
majorGroups: school.majorGroups.filter(
(mg) => mg.id !== majorGroupId,
),
});
}
},
[data, updateSchool],
);
const clearAllData = useCallback(() => {
saveData([]);
localStorage.removeItem(STORAGE_KEY);
}, [saveData]);
return {
data,
loading,
addSchool,
updateSchool,
deleteSchool,
addMajorGroup,
updateMajorGroup,
deleteMajorGroup,
clearAllData,
saveData,
};
};
+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+10
View 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>,
)
+27
View File
@@ -0,0 +1,27 @@
export interface MajorGroup {
id: string;
groupCode: string;
majorName: string;
scoreLine: number;
remark: string;
}
export interface School {
id: string;
name: string;
location: string;
type: string;
majorGroups: MajorGroup[];
createdAt: number;
updatedAt: number;
}
export interface FormErrors {
[key: string]: string;
}
export interface ToastMessage {
id: string;
type: 'success' | 'error' | 'info';
message: string;
}
+221
View File
@@ -0,0 +1,221 @@
import * as XLSX from 'xlsx';
import type { School } from '../types';
export const exportToCSV = (data: School[]): string => {
const headers = [
'学校名称',
'所在地',
'学校类型',
'专业组代码',
'专业名称',
'分数线',
'备注',
];
let csvContent = headers.join(',') + '\n';
data.forEach((school) => {
if (school.majorGroups.length === 0) {
csvContent += `${escapeCSV(school.name)},${escapeCSV(school.location)},${escapeCSV(school.type)},,,,` + '\n';
} else {
school.majorGroups.forEach((majorGroup) => {
csvContent += `${escapeCSV(school.name)},${escapeCSV(school.location)},${escapeCSV(school.type)},${escapeCSV(majorGroup.groupCode)},${escapeCSV(majorGroup.majorName)},${majorGroup.scoreLine},${escapeCSV(majorGroup.remark)}` + '\n';
});
}
});
return csvContent;
};
export const exportToExcel = (data: School[]): Blob => {
const headers = [
'学校名称',
'所在地',
'学校类型',
'专业组代码',
'专业名称',
'分数线',
'备注',
];
const rows: string[][] = [headers];
data.forEach((school) => {
if (school.majorGroups.length === 0) {
rows.push([school.name, school.location, school.type, '', '', '', '']);
} else {
school.majorGroups.forEach((majorGroup) => {
rows.push([
school.name,
school.location,
school.type,
majorGroup.groupCode,
majorGroup.majorName,
majorGroup.scoreLine.toString(),
majorGroup.remark,
]);
});
}
});
const worksheet = XLSX.utils.aoa_to_sheet(rows);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, '志愿意向数据');
const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
return new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
};
export const importFromCSV = (csvContent: string): School[] => {
const lines = csvContent.split('\n').filter((line) => line.trim());
if (lines.length < 2) {
throw new Error('CSV文件内容为空');
}
const schools: Map<string, School> = new Map();
for (let i = 1; i < lines.length; i++) {
const line = lines[i];
const parts = parseCSVLine(line);
if (parts.length < 3) continue;
const schoolName = parts[0] || '';
const location = parts[1] || '';
const type = parts[2] || '';
const groupCode = parts[3] || '';
const majorName = parts[4] || '';
const scoreLine = parts[5] ? parseFloat(parts[5]) : 0;
const remark = parts[6] || '';
if (!schoolName.trim()) continue;
let school = schools.get(schoolName);
if (!school) {
school = {
id: Date.now().toString() + '-' + i,
name: schoolName,
location,
type,
majorGroups: [],
createdAt: Date.now(),
updatedAt: Date.now(),
};
schools.set(schoolName, school);
}
if (groupCode.trim() && majorName.trim()) {
school.majorGroups.push({
id: Date.now().toString() + '-' + i + '-mg',
groupCode,
majorName,
scoreLine: isNaN(scoreLine) ? 0 : scoreLine,
remark,
});
}
}
return Array.from(schools.values());
};
export const importFromExcel = (file: File): Promise<School[]> => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
try {
const data = new Uint8Array(e.target?.result as ArrayBuffer);
const workbook = XLSX.read(data, { type: 'array' });
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
if (rows.length < 2) {
reject(new Error('Excel文件内容为空'));
return;
}
const schools: Map<string, School> = new Map();
for (let i = 1; i < rows.length; i++) {
const row = rows[i] as string[];
if (!row || row.length < 3) continue;
const schoolName = row[0] || '';
const location = row[1] || '';
const type = row[2] || '';
const groupCode = row[3] || '';
const majorName = row[4] || '';
const scoreLine = row[5] ? parseFloat(String(row[5])) : 0;
const remark = row[6] || '';
if (!schoolName.toString().trim()) continue;
let school = schools.get(schoolName.toString());
if (!school) {
school = {
id: Date.now().toString() + '-' + i,
name: schoolName.toString(),
location: location.toString(),
type: type.toString(),
majorGroups: [],
createdAt: Date.now(),
updatedAt: Date.now(),
};
schools.set(schoolName.toString(), school);
}
if (groupCode.toString().trim() && majorName.toString().trim()) {
school.majorGroups.push({
id: Date.now().toString() + '-' + i + '-mg',
groupCode: groupCode.toString(),
majorName: majorName.toString(),
scoreLine: isNaN(scoreLine) ? 0 : scoreLine,
remark: remark.toString(),
});
}
}
resolve(Array.from(schools.values()));
} catch (error) {
reject(new Error('解析Excel文件失败'));
}
};
reader.onerror = () => {
reject(new Error('读取文件失败'));
};
reader.readAsArrayBuffer(file);
});
};
const escapeCSV = (value: string): string => {
if (value.includes(',') || value.includes('"') || value.includes('\n')) {
return `"${value.replace(/"/g, '""')}"`;
}
return value;
};
const parseCSVLine = (line: string): string[] => {
const result: string[] = [];
let current = '';
let inQuotes = false;
for (let i = 0; i < line.length; i++) {
const char = line[i];
if (char === '"') {
if (inQuotes && line[i + 1] === '"') {
current += '"';
i++;
} else {
inQuotes = !inQuotes;
}
} else if (char === ',' && !inQuotes) {
result.push(current);
current = '';
} else {
current += char;
}
}
result.push(current);
return result;
};
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
+11
View File
@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
+27
View File
@@ -0,0 +1,27 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"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
View File
@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
+25
View File
@@ -0,0 +1,25 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"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"]
}
+10
View File
@@ -0,0 +1,10 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 5176,
},
});