linfeng
This commit is contained in:
commit
8850795f58
|
|
@ -0,0 +1,73 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
backup
|
||||||
|
# dependencies
|
||||||
|
**/node_modules/
|
||||||
|
volumes
|
||||||
|
web-dist
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
*.tar
|
||||||
|
# testing
|
||||||
|
**/coverage/
|
||||||
|
.env
|
||||||
|
docker-compose.yml
|
||||||
|
packages/common/prisma/migrations
|
||||||
|
packages/common/src/generated
|
||||||
|
# production
|
||||||
|
**/build/
|
||||||
|
**/dist/
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# 快速刷新错误记录
|
||||||
|
.expo/web/cache/development/
|
||||||
|
|
||||||
|
# Expo
|
||||||
|
**/.expo/
|
||||||
|
**/.expo-shared/
|
||||||
|
|
||||||
|
# Android
|
||||||
|
*.apk
|
||||||
|
*.aar
|
||||||
|
*.jks
|
||||||
|
!apps/mobile/android/app/release.jks
|
||||||
|
**/android/.gradle/
|
||||||
|
**/android/app/build/
|
||||||
|
**/android/app/release/
|
||||||
|
**/android/react-native-jsc/build/
|
||||||
|
**/android/react/build/
|
||||||
|
**/android/*/google-services.json
|
||||||
|
**/android/app/src/debug/res/xml/react_native_debug.xml
|
||||||
|
**/android/app/src/dev19/res/xml/react_native_debug.xml
|
||||||
|
**/android/app/src/dev20/res/xml/react_native_debug.xml
|
||||||
|
**/android/app/src/main/assets/shell-app.bundle
|
||||||
|
**/android/app/src/main/res/raw/shell_app_bundle
|
||||||
|
**/android/app/src/release/res/xml/react_native_debug.xml
|
||||||
|
|
||||||
|
# iOS
|
||||||
|
**/ios/Pods/
|
||||||
|
/ios/*.xcworkspace
|
||||||
|
**/ios/DerivedData/
|
||||||
|
**/ios/build/
|
||||||
|
**/ios/Podfile.lock
|
||||||
|
|
||||||
|
# Yarn Plug'n'Play
|
||||||
|
.pnp.*
|
||||||
|
.yarn/cache/
|
||||||
|
.yarn/unplugged/
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
|
||||||
|
# Ignore .idea files in the Expo monorepo
|
||||||
|
**/.idea/
|
||||||
|
uploads
|
||||||
|
packages/mind-elixir-core
|
||||||
|
config/nginx/conf.d/web.conf
|
||||||
|
|
@ -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/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```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,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
@ -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 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
{
|
||||||
|
"name": "my-todolist",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.6.1",
|
||||||
|
"@ant-design/pro-table": "^3.18.6",
|
||||||
|
"@prisma/client": "^6.4.1",
|
||||||
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
|
"antd": "^5.24.2",
|
||||||
|
"echarts": "^5.6.0",
|
||||||
|
"echarts-for-react": "^3.0.3",
|
||||||
|
"pg": "^8.13.3",
|
||||||
|
"prisma": "^6.4.1",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"react-router-dom": "^7.2.0",
|
||||||
|
"tailwindcss": "^4.0.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.21.0",
|
||||||
|
"@types/echarts": "^5.0.0",
|
||||||
|
"@types/react": "^19.0.10",
|
||||||
|
"@types/react-dom": "^19.0.4",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"eslint": "^9.21.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
|
"globals": "^15.15.0",
|
||||||
|
"typescript": "~5.7.2",
|
||||||
|
"typescript-eslint": "^8.24.1",
|
||||||
|
"vite": "^6.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,10 @@
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "Todo" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"completed" BOOLEAN NOT NULL DEFAULT false,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
"content" TEXT NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "Todo_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# Please do not edit this file manually
|
||||||
|
# It should be added in your version-control system (e.g., Git)
|
||||||
|
provider = "postgresql"
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
// This is your Prisma schema file,
|
||||||
|
// learn more about it in the docs: https://pris.ly/d/prisma-schema
|
||||||
|
|
||||||
|
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
|
||||||
|
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
|
||||||
|
|
||||||
|
generator client {
|
||||||
|
provider = "prisma-client-js"
|
||||||
|
}
|
||||||
|
|
||||||
|
datasource db {
|
||||||
|
provider = "postgresql"
|
||||||
|
url = env("DATABASE_URL")
|
||||||
|
}
|
||||||
|
|
||||||
|
model Todo{
|
||||||
|
id String @id @default(uuid())
|
||||||
|
completed Boolean @default(false)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
content String
|
||||||
|
}
|
||||||
|
|
@ -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 |
|
|
@ -0,0 +1 @@
|
||||||
|
@import "tailwindcss"
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import { RouterProvider } from 'react-router-dom'
|
||||||
|
import { router } from './router/router.tsx'
|
||||||
|
// import Dashboard from './test.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<RouterProvider router={router}></RouterProvider>
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
import { Button, Form, Input, Select } from "antd"
|
||||||
|
import "../index.css"
|
||||||
|
import { useState } from "react"
|
||||||
|
import form from "antd/es/form"
|
||||||
|
import { Avatar } from "antd" // 新增Avatar组件
|
||||||
|
function App() {
|
||||||
|
const [status, setStatus] = useState("未提交")
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [form] = Form.useForm()
|
||||||
|
const handleReset = () => {
|
||||||
|
setStatus("未提交")
|
||||||
|
form.resetFields()
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex bg-slate-900"> {/* 改为flex布局 */}
|
||||||
|
{/* 新增导航栏 */}
|
||||||
|
<div className="w-96 flex flex-col border-r border-sky-400/30 bg-gradient-to-b from-gray-800/70 to-gray-900/70 shadow-[0_0_30px_rgba(14,165,235,0.1)]">
|
||||||
|
{/* 头像区域 */}
|
||||||
|
<div className="p-4 border-b border-sky-400/20 hover:bg-gray-700/30 transition-colors cursor-pointer"
|
||||||
|
onClick={() => {/* 基本信息设置逻辑 */ }}>
|
||||||
|
<div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-r from-sky-400 to-cyan-500 shadow-lg cursor-pointer overflow-hidden">
|
||||||
|
{/* 替换为实际头像 */}
|
||||||
|
<div className="w-full h-full bg-gray-700" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 导航菜单 */}
|
||||||
|
<div className="flex-1 space-y-2 p-4">
|
||||||
|
{[1, 2, 3].map((item) => (
|
||||||
|
<div
|
||||||
|
key={item}
|
||||||
|
className="px-4 py-3 rounded-lg text-sky-300/90 hover:text-cyan-400
|
||||||
|
bg-gray-700/30 hover:bg-gray-700/50 cursor-pointer transition-all
|
||||||
|
hover:shadow-[0_0_10px_rgba(14,165,235,0.3)] border border-sky-400/20"
|
||||||
|
>
|
||||||
|
导航栏 {item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 原有内容容器 */}
|
||||||
|
<div className="flex-1 flex flex-col">
|
||||||
|
{/* 头部科技感改造 */}
|
||||||
|
<div className="bg-gradient-to-r from-sky-500 to-cyan-600 mx-auto px-4 w-full max-w-3xl rounded-b-xl shadow-lg shadow-cyan-500/20">
|
||||||
|
<h1 className="text-center text-2xl md:text-3xl font-bold p-4 md:p-6 bg-gradient-to-r from-sky-400 to-cyan-400 bg-clip-text text-transparent">
|
||||||
|
TodoList
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 表单容器暗黑改造 */}
|
||||||
|
<div className="relative mt-4 md:mt-6 mx-auto px-4 w-full max-w-3xl bg-gray-800 rounded-xl shadow-[0_0_30px_rgba(14,165,235,0.2)] border border-sky-400/50 py-6">
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
onFinish={(e) => {
|
||||||
|
setLoading(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
setStatus("已提交")
|
||||||
|
setLoading(false)
|
||||||
|
}, 1000)
|
||||||
|
console.log(e)
|
||||||
|
}}
|
||||||
|
layout="vertical"
|
||||||
|
className="space-y-6 px-4"
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
label="代办事项："
|
||||||
|
name="todo"
|
||||||
|
className="font-bold text-lg text-sky-200" // 修改文字颜色
|
||||||
|
labelCol={{ style: { color: '#bae6fd' } }} // 新增亮色
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
placeholder="请输入代办事项"
|
||||||
|
size="large"
|
||||||
|
className="w-full bg-gray-700/50 border-sky-400 hover:border-sky-300 focus:border-sky-500 text-gray-100 placeholder-gray-400" // 暗黑风格
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label="状态："
|
||||||
|
name="status"
|
||||||
|
labelCol={{ style: { color: '#bae6fd' } }}
|
||||||
|
className="font-bold text-lg text-sky-200"
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder="请选择状态"
|
||||||
|
size="large"
|
||||||
|
className="w-full [&>.ant-select-selector]:bg-gray-700/50 [&>.ant-select-selector]:border-sky-400 [&>.ant-select-selection-item]:text-gray-100"
|
||||||
|
dropdownClassName="bg-gray-700 [&>.ant-select-item-option-active]:bg-gray-600"
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
value: "优先",
|
||||||
|
label: "优先",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "一般",
|
||||||
|
label: "一般",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
onChange={(e) => { console.log(e) }}
|
||||||
|
>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
{/* 按钮组响应式优化 */}
|
||||||
|
<div className="flex flex-col md:flex-row gap-3 md:gap-4 justify-center">
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
className="h-10 px-6 text-lg w-full md:w-auto
|
||||||
|
bg-gradient-to-r from-sky-400 to-cyan-400 hover:from-sky-500 hover:to-cyan-500 shadow-lg shadow-sky-500/20"
|
||||||
|
disabled={status === "已提交"}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
{status === "未提交" ? "提交" : "已提交"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="default"
|
||||||
|
className="h-10 px-6 text-lg w-full md:w-auto
|
||||||
|
border-sky-400 text-sky-400 hover:border-cyan-400 hover:text-cyan-400"
|
||||||
|
onClick={() => handleReset()}
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
import { Button, FloatButton, Form, Input } from "antd"
|
||||||
|
import { useNavigate } from "react-router-dom"
|
||||||
|
export default function Login() {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
// 修正函数名拼写错误 (handeLogin → handleLogin)
|
||||||
|
const handleLogin = () => {
|
||||||
|
navigate("/path")
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col bg-slate-900">
|
||||||
|
<FloatButton></FloatButton>
|
||||||
|
<div className="bg-gradient-to-r from-sky-500 to-cyan-600 w-full">
|
||||||
|
<div className="mx-auto px-4 max-w-3xl rounded-b-xl shadow-lg shadow-cyan-500/20">
|
||||||
|
<h1 className="text-center text-2xl md:text-3xl font-bold p-4 md:p-6 bg-gradient-to-r from-sky-400 to-cyan-400 bg-clip-text text-transparent">
|
||||||
|
系统登录
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="flex-1 ">
|
||||||
|
{/* 添加响应式边距和最大宽度 */}
|
||||||
|
<div className="relative mx-4 md:mx-[50vh] mt-16 md:mt-[20vh] max-w-[90%] md:max-w-full bg-gray-800 rounded-xl shadow-[0_0_30px_rgba(14,165,235,0.2)] border border-sky-400/50 py-6">
|
||||||
|
<Form
|
||||||
|
className="space-y-6 px-4"
|
||||||
|
onFinish={handleLogin}
|
||||||
|
layout="vertical"
|
||||||
|
>
|
||||||
|
{/* 添加响应式字体大小 */}
|
||||||
|
<h2 className="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-cyan-300 text-xl md:text-3xl font-bold text-center mb-8">
|
||||||
|
请登录
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-8 flex-1">
|
||||||
|
<Form.Item
|
||||||
|
label="用户名"
|
||||||
|
name="username"
|
||||||
|
className="font-bold text-lg text-sky-200"
|
||||||
|
labelCol={{ style: { color: '#bae6fd' } }}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
className="w-full bg-gray-700/50 border-sky-400 hover:border-sky-300 focus:border-sky-500 rounded-lg text-gray-100 placeholder-gray-400 h-12 text-lg px-4" // 移除max-width限制
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label="密码"
|
||||||
|
name="password"
|
||||||
|
className="font-bold text-lg text-sky-200"
|
||||||
|
labelCol={{ style: { color: '#bae6fd' } }}
|
||||||
|
>
|
||||||
|
<Input.Password
|
||||||
|
className="w-full bg-gray-700/50 border-sky-400 hover:border-sky-300 focus:border-sky-500 rounded-lg [&>input]:text-gray-100 h-12 text-lg px-4" // 移除max-width限制
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-8">
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
className="w-full md:w-2/3 bg-gradient-to-r from-sky-400 to-cyan-400 hover:from-sky-500 hover:to-cyan-500 h-12 text-lg font-bold rounded-xl transition-all duration-300 shadow-lg shadow-sky-500/20"
|
||||||
|
>
|
||||||
|
登录
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Card, Row, Col, Spin } from 'antd';
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
// 在顶部import区域添加类型引用
|
||||||
|
import type { EChartsOption } from 'echarts';
|
||||||
|
|
||||||
|
const Dashboard = () => {
|
||||||
|
// 模拟静态数据结构
|
||||||
|
const mockChartData = {
|
||||||
|
// API标记处：需要从/getChartData接口获取
|
||||||
|
xAxis: ['周一', '周二', '周三', '周四', '周五'],
|
||||||
|
series: [120, 200, 150, 80, 70] // 示例数据
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修复类型定义：添加类型断言和正确配置格式
|
||||||
|
const chartOption: EChartsOption = {
|
||||||
|
grid: { top: 20, right: 40, left: 40, bottom: 20 },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: mockChartData.xAxis,
|
||||||
|
axisLine: { lineStyle: { color: '#1890ff' } }
|
||||||
|
},
|
||||||
|
yAxis: { type: 'value' },
|
||||||
|
series: [{
|
||||||
|
data: mockChartData.series,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: { color: '#1890ff22' },
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1890ff',
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
// 添加必要字段
|
||||||
|
name: '数据趋势',
|
||||||
|
symbol: 'none' // 移除数据点标记
|
||||||
|
}]
|
||||||
|
} as EChartsOption;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Row gutter={16} style={{ padding: 24 }}>
|
||||||
|
{/* 数据趋势模块 */}
|
||||||
|
<Col span={16}>
|
||||||
|
<Card title="数据趋势分析" bordered={false}>
|
||||||
|
<ReactECharts
|
||||||
|
option={chartOption}
|
||||||
|
style={{ height: 400 }}
|
||||||
|
showLoading={true}
|
||||||
|
/>
|
||||||
|
{/* API标记处：实际使用时应替换为：
|
||||||
|
<ReactECharts
|
||||||
|
option={chartData}
|
||||||
|
loading={isLoading}
|
||||||
|
/> */}
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{/* 数据表格模块 */}
|
||||||
|
<Col span={8}>
|
||||||
|
<Card title="最新记录" bordered={false}>
|
||||||
|
<Spin spinning={false} /* API标记处：设置loading状态 */>
|
||||||
|
<table className="mock-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>名称</th>
|
||||||
|
<th>状态</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{/* API标记处：需要从/getRecords接口获取 */}
|
||||||
|
<tr>
|
||||||
|
<td colSpan={3} style={{ textAlign: 'center' }}>
|
||||||
|
数据加载中...
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</Spin>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 简易表格样式
|
||||||
|
const mockTableStyle = `
|
||||||
|
.mock-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.mock-table th {
|
||||||
|
background: #fafafa;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.mock-table td {
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import {createBrowserRouter} from "react-router-dom";
|
||||||
|
import Login from "../page/login";
|
||||||
|
import App from "../page/App";
|
||||||
|
|
||||||
|
export const router = createBrowserRouter([
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
element: <Login />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/path",
|
||||||
|
element: <App></App>
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"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,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
tailwindcss(),
|
||||||
|
],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue