新增项目选择弹窗（预设选项），支持变更环境变量

2026-02-10 16:13:04 +08:00
parent 8ea70d04ad
commit 1e8af75b88
6 changed files with 234 additions and 11 deletions
@@ -0,0 +1,146 @@
+import { Title } from "@components/title";
+import {
+  Dialog,
+  DialogContent,
+  DialogActions,
+  Button,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  TextField,
+  Box,
+  Typography,
+  Fade,
+} from "@mui/material";
+import { useState } from "react";
+
+interface ProjectSelectorProps {
+  open: boolean;
+  onSelect: (workspace: string, networkName: string) => void;
+}
+
+const PROJECTS = [
+  { label: "TJWater (默认)", workspace: "TJWater", networkName: "tjwater" },
+  { label: "苏州河", workspace: "szh", networkName: "szh" },
+  { label: "测试项目", workspace: "test", networkName: "test" },
+];
+
+export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
+  open,
+  onSelect,
+}) => {
+  const [workspace, setWorkspace] = useState(PROJECTS[0].workspace);
+  const [networkName, setNetworkName] = useState(PROJECTS[0].networkName);
+  const [customMode, setCustomMode] = useState(false);
+
+  const handleConfirm = () => {
+    onSelect(workspace, networkName);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      disableEscapeKeyDown
+      slotProps={{
+        paper: {
+          sx: {
+            borderRadius: 2,
+            padding: 2,
+            minWidth: 400,
+            background: "rgba(255, 255, 255, 0.95)",
+            backdropFilter: "blur(10px)",
+          }
+        }
+      }}
+      slots={{ transition: Fade }}
+      transitionDuration={500}
+    >
+      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", mb: 2 }}>
+        <Box sx={{ transform: "scale(1.5)", mb: 2, mt: 1 }}>
+          <Title />
+        </Box>
+        <Typography variant="subtitle1" color="text.secondary">
+          请选择项目环境
+        </Typography>
+      </Box>
+
+      <DialogContent sx={{ display: "flex", flexDirection: "column", gap: 3, pt: 1 }}>
+        {!customMode ? (
+          <FormControl fullWidth variant="outlined">
+            <InputLabel>项目</InputLabel>
+            <Select
+              value={workspace}
+              label="项目"
+              onChange={(e) => {
+                const val = e.target.value;
+                if (val === "custom") {
+                  setCustomMode(true);
+                } else {
+                  const p = PROJECTS.find((p) => p.workspace === val);
+                  if (p) {
+                    setWorkspace(p.workspace);
+                    setNetworkName(p.networkName);
+                  }
+                }
+              }}
+            >
+              {PROJECTS.map((p) => (
+                <MenuItem key={p.workspace} value={p.workspace}>
+                  <Box sx={{ display: "flex", flexDirection: "column" }}>
+                    <Typography variant="body1">{p.label}</Typography>
+                    <Typography variant="caption" color="text.secondary">
+                      工作区: {p.workspace} | 管网: {p.networkName}
+                    </Typography>
+                  </Box>
+                </MenuItem>
+              ))}
+              <MenuItem value="custom">
+                <Typography variant="body1">自定义配置...</Typography>
+              </MenuItem>
+            </Select>
+          </FormControl>
+        ) : (
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            <TextField
+              label="Geoserver 工作区"
+              value={workspace}
+              onChange={(e) => setWorkspace(e.target.value)}
+              fullWidth
+              helperText="例如: TJWater"
+            />
+            <TextField
+              label="管网名称"
+              value={networkName}
+              onChange={(e) => setNetworkName(e.target.value)}
+              fullWidth
+              helperText="例如: tjwater"
+            />
+            <Button
+              onClick={() => setCustomMode(false)}
+              size="small"
+              sx={{ alignSelf: "flex-start" }}
+            >
+              返回列表
+            </Button>
+          </Box>
+        )}
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        <Button
+          onClick={handleConfirm}
+          variant="contained"
+          fullWidth
+          size="large"
+          sx={{
+            textTransform: "none",
+            borderRadius: 2,
+            fontWeight: "bold"
+          }}
+        >
+          进入系统
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};