feat(chat): 完善运行状态与权限交互

2026-08-06 18:41:53 +08:00
parent 8d7c947897
commit 9e75e2df8a
21 changed files with 1025 additions and 226 deletions
@@ -19,12 +19,12 @@ import TerminalRounded from "@mui/icons-material/TerminalRounded";
 import FolderOpenRounded from "@mui/icons-material/FolderOpenRounded";
 import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
 import BlockRounded from "@mui/icons-material/BlockRounded";
-import PushPinRounded from "@mui/icons-material/PushPinRounded";
 import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
 import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
 import VerifiedUserRounded from "@mui/icons-material/VerifiedUserRounded";
+import GppGoodRounded from "@mui/icons-material/GppGoodRounded";

-import type { PermissionReply } from "@/lib/chatStream";
+import type { PermissionDecision } from "@/lib/chatStream";
 import type { Message } from "./GlobalChatbox.types";

 const getPermissionTitle = (permission: NonNullable<Message["permissions"]>[number]) => {
@@ -58,7 +58,7 @@ const PermissionIcon = ({
 };

 const getPermissionStatusLabel = (status: NonNullable<Message["permissions"]>[number]["status"]) => {
-  if (status === "approved_always") return "已始终允许";
+  if (status === "approved_always") return "已保存授权";
  if (status === "approved_once") return "已允许一次";
  if (status === "rejected") return "已拒绝";
  if (status === "aborted") return "已中断";
@@ -99,7 +99,7 @@ const PermissionRequestCard = ({
 }: {
  permission: NonNullable<Message["permissions"]>[number];
  isRunning: boolean;
-  onReply: (requestId: string, reply: PermissionReply) => void;
+  onReply: (requestId: string, reply: PermissionDecision) => void;
 }) => {
  const theme = useTheme();
  const isPending =
@@ -109,6 +109,9 @@ const PermissionRequestCard = ({
  const accentColor = getPermissionStatusColor(permission.status, theme);
  const statusTextColor = getPermissionStatusTextColor(permission.status, theme);
  const statusLabel = getPermissionStatusLabel(permission.status);
+  const persistentScope = permission.always.length > 0
+    ? permission.always
+    : permission.patterns;

  return (
    <Box
@@ -203,6 +206,29 @@ const PermissionRequestCard = ({
            {primaryValue}
          </Typography>
        </Box>
+        {isPending || isSubmitting ? (
+          <Box
+            sx={{
+              px: 1.25,
+              py: 0.85,
+              borderRadius: 2.5,
+              bgcolor: alpha(theme.palette.success.main, 0.055),
+              border: `1px solid ${alpha(theme.palette.success.main, 0.11)}`,
+            }}
+          >
+            <Typography variant="caption" color="success.dark" fontWeight={800}>
+              保存授权范围
+            </Typography>
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              fontFamily={permission.permission === "bash" ? "monospace" : undefined}
+              sx={{ display: "block", mt: 0.2, lineHeight: 1.45, wordBreak: "break-word", whiteSpace: "pre-wrap" }}
+            >
+              {persistentScope.join("\n")}
+            </Typography>
+          </Box>
+        ) : null}
      </Stack>

      {permission.error ? (
@@ -232,84 +258,84 @@ const PermissionRequestCard = ({
          useFlexGap
          sx={{ px: 1.5, pb: 1.35, pl: 1.75, pt: 0 }}
        >
-            <Button
-              size="small"
-              variant="contained"
-              disableElevation
-              disabled={isSubmitting}
-              onClick={() => onReply(permission.requestId, "once")}
-              startIcon={
-                isSubmitting ? (
-                  <CircularProgress size={14} color="inherit" />
-                ) : (
-                  <CheckCircleRounded fontSize="small" />
-                )
-              }
-              sx={{
-                minWidth: 94,
-                height: 34,
-                borderRadius: "17px",
-                bgcolor: "#00838f",
-                fontWeight: 800,
-                fontSize: "0.78rem",
-                textTransform: "none",
-                boxShadow: `0 4px 12px ${alpha("#00838f", 0.24)}`,
-                "&:hover": {
-                  bgcolor: "#006c78",
-                  boxShadow: `0 6px 16px ${alpha("#00838f", 0.28)}`,
-                },
-              }}
-            >
-              允许一次
-            </Button>
-            <Button
-              size="small"
-              variant="outlined"
-              disabled={isSubmitting}
-              onClick={() => onReply(permission.requestId, "always")}
-              startIcon={<PushPinRounded fontSize="small" />}
-              sx={{
-                height: 34,
-                borderRadius: "17px",
-                px: 1.5,
-                fontWeight: 800,
-                fontSize: "0.78rem",
-                textTransform: "none",
-                color: "#00838f",
-                borderColor: alpha("#00838f", 0.24),
-                bgcolor: alpha("#fff", 0.45),
-                "&:hover": {
-                  borderColor: alpha("#00838f", 0.36),
-                  bgcolor: alpha("#00838f", 0.08),
-                },
-              }}
-            >
-              始终允许
-            </Button>
-            <Button
-              size="small"
-              color="error"
-              variant="outlined"
-              disabled={isSubmitting}
-              onClick={() => onReply(permission.requestId, "reject")}
-              startIcon={<BlockRounded fontSize="small" />}
-              sx={{
-                height: 34,
-                borderRadius: "17px",
-                px: 1.5,
-                fontWeight: 800,
-                fontSize: "0.78rem",
-                textTransform: "none",
-                borderColor: alpha(theme.palette.error.main, 0.22),
-                bgcolor: alpha("#fff", 0.45),
-                "&:hover": {
-                  borderColor: alpha(theme.palette.error.main, 0.34),
-                  bgcolor: alpha(theme.palette.error.main, 0.07),
-                },
-              }}
-            >
-              拒绝
-            </Button>
+          <Button
+            size="small"
+            variant="contained"
+            disableElevation
+            disabled={isSubmitting}
+            onClick={() => onReply(permission.requestId, "once")}
+            startIcon={
+              isSubmitting ? (
+                <CircularProgress size={14} color="inherit" />
+              ) : (
+                <CheckCircleRounded fontSize="small" />
+              )
+            }
+            sx={{
+              minWidth: 94,
+              height: 34,
+              borderRadius: "17px",
+              bgcolor: "#00838f",
+              fontWeight: 800,
+              fontSize: "0.78rem",
+              textTransform: "none",
+              boxShadow: `0 4px 12px ${alpha("#00838f", 0.24)}`,
+              "&:hover": {
+                bgcolor: "#006c78",
+                boxShadow: `0 6px 16px ${alpha("#00838f", 0.28)}`,
+              },
+            }}
+          >
+            允许一次
+          </Button>
+          <Button
+            size="small"
+            color="success"
+            variant="outlined"
+            disabled={isSubmitting}
+            onClick={() => onReply(permission.requestId, "always")}
+            startIcon={<GppGoodRounded fontSize="small" />}
+            sx={{
+              height: 34,
+              borderRadius: "17px",
+              px: 1.5,
+              fontWeight: 800,
+              fontSize: "0.78rem",
+              textTransform: "none",
+              borderColor: alpha(theme.palette.success.main, 0.28),
+              bgcolor: alpha("#fff", 0.45),
+              "&:hover": {
+                borderColor: alpha(theme.palette.success.main, 0.42),
+                bgcolor: alpha(theme.palette.success.main, 0.08),
+              },
+            }}
+          >
+            保存授权
+          </Button>
+          <Button
+            size="small"
+            color="error"
+            variant="outlined"
+            disabled={isSubmitting}
+            onClick={() => onReply(permission.requestId, "reject")}
+            startIcon={<BlockRounded fontSize="small" />}
+            sx={{
+              height: 34,
+              borderRadius: "17px",
+              px: 1.5,
+              fontWeight: 800,
+              fontSize: "0.78rem",
+              textTransform: "none",
+              borderColor: alpha(theme.palette.error.main, 0.22),
+              bgcolor: alpha("#fff", 0.45),
+              "&:hover": {
+                borderColor: alpha(theme.palette.error.main, 0.34),
+                bgcolor: alpha(theme.palette.error.main, 0.07),
+              },
+            }}
+          >
+            拒绝
+          </Button>
        </Stack>
      ) : null}
    </Box>
@@ -323,7 +349,7 @@ export const PermissionRequestGroup = ({
 }: {
  permissions: NonNullable<Message["permissions"]>;
  isRunning: boolean;
-  onReply: (requestId: string, reply: PermissionReply) => void;
+  onReply: (requestId: string, reply: PermissionDecision) => void;
 }) => {
  const theme = useTheme();
  const onceCount = permissions.filter((permission) => permission.status === "approved_once").length;
@@ -348,7 +374,7 @@ export const PermissionRequestGroup = ({
  const summaryItems = [
    { label: "共", value: permissions.length, color: theme.palette.text.secondary },
    { label: "允许一次", value: onceCount, color: getPermissionStatusColor("approved_once", theme), textColor: getPermissionStatusTextColor("approved_once", theme) },
-    { label: "始终允许", value: alwaysCount, color: getPermissionStatusColor("approved_always", theme), textColor: getPermissionStatusTextColor("approved_always", theme) },
+    { label: "保存授权", value: alwaysCount, color: getPermissionStatusColor("approved_always", theme), textColor: getPermissionStatusTextColor("approved_always", theme) },
    { label: "拒绝", value: rejectedCount, color: getPermissionStatusColor("rejected", theme), textColor: getPermissionStatusTextColor("rejected", theme) },
    { label: "中断", value: abortedCount, color: getPermissionStatusColor("aborted", theme), textColor: getPermissionStatusTextColor("aborted", theme) },
  ];