feat: 添加导航徽章

src/components/Subscription/SubscriptionModal.js

@@ -0,0 +1,42 @@
+// src/components/Subscription/SubscriptionModal.js
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  Icon,
+  HStack,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { FiStar } from 'react-icons/fi';
+import PropTypes from 'prop-types';
+import SubscriptionContent from './SubscriptionContent';
+
+export default function SubscriptionModal({ isOpen, onClose }) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered scrollBehavior="inside">
+      <ModalOverlay backdropFilter="blur(4px)" />
+      <ModalContent maxH="90vh">
+        <ModalHeader borderBottomWidth="1px" borderColor={useColorModeValue('gray.200', 'gray.600')}>
+          <HStack>
+            <Icon as={FiStar} color="blue.500" boxSize={5} />
+            <Text>订阅管理</Text>
+          </HStack>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody py={6}>
+          <SubscriptionContent />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+SubscriptionModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};