feat: 删除无用组件

src/components/Navbars/AdminNavbar.js

@@ -1,222 +0,0 @@
-/*!
-
-=========================================================
-* Argon Dashboard Chakra PRO - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
-* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
-
-* Designed and Coded by Simmmple & Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-
-// Chakra Imports
-import {
-  Box,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  Flex,
-  Link,
-  useColorModeValue,
-} from "@chakra-ui/react";
-import { SidebarContext } from "contexts/SidebarContext";
-import PropTypes from "prop-types";
-import React, { useState, useEffect, useContext } from "react";
-import AdminNavbarLinks from "./AdminNavbarLinks";
-import { HamburgerIcon } from "@chakra-ui/icons";
-
-export default function AdminNavbar(props) {
-  const [scrolled, setScrolled] = useState(false);
-
-  const {
-    sidebarWidth,
-    setSidebarWidth,
-    toggleSidebar,
-    setToggleSidebar,
-  } = useContext(SidebarContext);
-
-  useEffect(() => {
-    window.addEventListener("scroll", changeNavbar);
-
-    return () => {
-      window.removeEventListener("scroll", changeNavbar);
-    };
-  });
-
-  const {
-    variant,
-    children,
-    fixed,
-    secondary,
-    brandText,
-    onOpen,
-    ...rest
-  } = props;
-
-  // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
-  let mainText =
-    fixed && scrolled
-      ? useColorModeValue("gray.700", "gray.200")
-      : useColorModeValue("white", "gray.200");
-  let secondaryText =
-    fixed && scrolled
-      ? useColorModeValue("gray.700", "gray.200")
-      : useColorModeValue("white", "gray.200");
-  let navbarPosition = "absolute";
-  let navbarFilter = "none";
-  let navbarBackdrop = "blur(20px)";
-  let navbarShadow = "none";
-  let navbarBg = "none";
-  let navbarBorder = "transparent";
-  let secondaryMargin = "0px";
-  let paddingX = "15px";
-  if (props.fixed === true)
-    if (scrolled === true) {
-      navbarPosition = "fixed";
-      navbarShadow = useColorModeValue(
-        "0px 7px 23px rgba(0, 0, 0, 0.05)",
-        "none"
-      );
-      navbarBg = useColorModeValue(
-        "linear-gradient(112.83deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.8) 110.84%)",
-        "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)"
-      );
-      navbarBorder = useColorModeValue("#FFFFFF", "rgba(255, 255, 255, 0.31)");
-      navbarFilter = useColorModeValue(
-        "none",
-        "drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))"
-      );
-    }
-  if (props.secondary) {
-    navbarBackdrop = "none";
-    navbarPosition = "absolute";
-    mainText = "white";
-    secondaryText = "white";
-    secondaryMargin = "22px";
-    paddingX = "30px";
-  }
-  const changeNavbar = () => {
-    if (window.scrollY > 1) {
-      setScrolled(true);
-    } else {
-      setScrolled(false);
-    }
-  };
-
-  return (
-    <Flex
-      position={navbarPosition}
-      boxShadow={navbarShadow}
-      bg={navbarBg}
-      borderColor={navbarBorder}
-      filter={navbarFilter}
-      backdropFilter={navbarBackdrop}
-      borderWidth="1.5px"
-      borderStyle="solid"
-      transitionDelay="0s, 0s, 0s, 0s"
-      transitionDuration=" 0.25s, 0.25s, 0.25s, 0s"
-      transition-property="box-shadow, background-color, filter, border"
-      transitionTimingFunction="linear, linear, linear, linear"
-      alignItems={{ xl: "center" }}
-      borderRadius="16px"
-      display="flex"
-      minH="75px"
-      justifyContent={{ xl: "center" }}
-      lineHeight="25.6px"
-      mx="auto"
-      mt={secondaryMargin}
-      pb="8px"
-      left={document.documentElement.dir === "rtl" ? "30px" : ""}
-      right={document.documentElement.dir === "rtl" ? "" : "30px"}
-      px={{
-        sm: paddingX,
-        md: "30px",
-      }}
-      ps={{
-        xl: "12px",
-      }}
-      pt="8px"
-      top="18px"
-      w={{ sm: "calc(100vw - 30px)", xl: "calc(100vw - 75px - 275px)" }}
-    >
-      <Flex
-        w="100%"
-        flexDirection={{
-          sm: "column",
-          md: "row",
-        }}
-        alignItems={{ xl: "center" }}
-      >
-        <Box mb={{ sm: "8px", md: "0px" }}>
-          <Breadcrumb>
-            <BreadcrumbItem color={mainText}>
-              <BreadcrumbLink href="#" color={secondaryText}>
-                Pages
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-
-            <BreadcrumbItem color={mainText}>
-              <BreadcrumbLink href="#" color={mainText}>
-                {brandText}
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </Breadcrumb>
-          {/* Here we create navbar brand, based on route name */}
-          <Link
-            color={mainText}
-            href="#"
-            bg="inherit"
-            borderRadius="inherit"
-            fontWeight="bold"
-            _hover={{ color: { mainText } }}
-            _active={{
-              bg: "inherit",
-              transform: "none",
-              borderColor: "transparent",
-            }}
-            _focus={{
-              boxShadow: "none",
-            }}
-          >
-            {brandText}
-          </Link>
-        </Box>
-        <HamburgerIcon
-          w="100px"
-          h="20px"
-          ms="20px"
-          color="#fff"
-          cursor="pointer"
-          display={{ sm: "none", xl: "block" }}
-          onClick={() => {
-            setSidebarWidth(sidebarWidth === 275 ? 120 : 275);
-            setToggleSidebar(!toggleSidebar);
-          }}
-        />
-        <Box ms="auto" w={{ sm: "100%", md: "unset" }}>
-          <AdminNavbarLinks
-            onOpen={props.onOpen}
-            logoText={props.logoText}
-            secondary={props.secondary}
-            fixed={props.fixed}
-            scrolled={scrolled}
-          />
-        </Box>
-      </Flex>
-    </Flex>
-  );
-}
-
-AdminNavbar.propTypes = {
-  brandText: PropTypes.string,
-  variant: PropTypes.string,
-  secondary: PropTypes.bool,
-  fixed: PropTypes.bool,
-  onOpen: PropTypes.func,
-};

src/components/Navbars/AdminNavbarLinks.js

@@ -1,335 +0,0 @@
-/*!
-
-=========================================================
-* Argon Dashboard Chakra PRO - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
-* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
-
-* Designed and Coded by Simmmple & Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-
-// Chakra Icons
-import { BellIcon } from "@chakra-ui/icons";
-// Chakra Imports
-import {
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Text,
-  Stack,
-  Box,
-  useColorMode,
-  useColorModeValue,
-  Avatar,
-  HStack,
-  Divider,
-} from "@chakra-ui/react";
-// Assets
-import avatar1 from "assets/img/avatars/avatar1.png";
-import avatar2 from "assets/img/avatars/avatar2.png";
-import avatar3 from "assets/img/avatars/avatar3.png";
-// Custom Icons
-import { ProfileIcon, SettingsIcon } from "components/Icons/Icons";
-// Custom Components
-import { ItemContent } from "components/Menu/ItemContent";
-import { SearchBar } from "components/Navbars/SearchBar/SearchBar";
-import { SidebarResponsive } from "components/Sidebar/Sidebar";
-import PropTypes from "prop-types";
-import React from "react";
-import { NavLink, useNavigate } from "react-router-dom";
-import routes from "routes.js";
-import {
-  ArgonLogoDark,
-  ChakraLogoDark,
-  ArgonLogoLight,
-  ChakraLogoLight,
-} from "components/Icons/Icons";
-import { useAuth } from "contexts/AuthContext";
-import SubscriptionBadge from "components/Subscription/SubscriptionBadge";
-import SubscriptionModal from "components/Subscription/SubscriptionModal";
-
-export default function HeaderLinks(props) {
-  console.log('🚀 [AdminNavbarLinks] 组件已加载');
-
-  const {
-    variant,
-    children,
-    fixed,
-    scrolled,
-    secondary,
-    onOpen,
-    ...rest
-  } = props;
-
-  const { colorMode } = useColorMode();
-  const { user, isAuthenticated, logout } = useAuth();
-  const navigate = useNavigate();
-
-  console.log('👤 [AdminNavbarLinks] 用户状态:', { user, isAuthenticated });
-
-  // 订阅信息状态
-  const [subscriptionInfo, setSubscriptionInfo] = React.useState({
-    type: 'free',
-    status: 'active',
-    days_left: 0,
-    is_active: true
-  });
-  const [isSubscriptionModalOpen, setIsSubscriptionModalOpen] = React.useState(false);
-
-  // 加载订阅信息
-  React.useEffect(() => {
-    console.log('🔍 [AdminNavbarLinks] 订阅徽章 - 认证状态:', isAuthenticated, 'userId:', user?.id);
-
-    if (isAuthenticated && user) {
-      const loadSubscriptionInfo = async () => {
-        try {
-          const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
-          console.log('🌐 [AdminNavbarLinks] 订阅徽章 - API:', base + '/api/subscription/current');
-          const response = await fetch(base + '/api/subscription/current', {
-            credentials: 'include',
-          });
-          console.log('📡 [AdminNavbarLinks] 订阅徽章 - 响应:', response.status);
-          if (response.ok) {
-            const data = await response.json();
-            console.log('✅ [AdminNavbarLinks] 订阅徽章 - 完整响应数据:', data);
-            console.log('🔍 [AdminNavbarLinks] 订阅徽章 - data.data:', data.data);
-            console.log('🔍 [AdminNavbarLinks] 订阅徽章 - type值:', data.data?.type, '类型:', typeof data.data?.type);
-
-            if (data.success && data.data) {
-              // 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max'
-              const normalizedData = {
-                type: (data.data.type || data.data.subscription_type || 'free').toLowerCase(),
-                status: data.data.status || 'active',
-                days_left: data.data.days_left || 0,
-                is_active: data.data.is_active !== false,
-                end_date: data.data.end_date || null
-              };
-              console.log('✨ [AdminNavbarLinks] 订阅徽章 - 标准化后:', normalizedData);
-              setSubscriptionInfo(normalizedData);
-            }
-          } else {
-            console.warn('⚠️ [AdminNavbarLinks] 订阅徽章 - API 失败，使用默认值');
-          }
-        } catch (error) {
-          console.error('❌ [AdminNavbarLinks] 订阅徽章 - 错误:', error);
-        }
-      };
-      loadSubscriptionInfo();
-    } else {
-      // 用户未登录时,重置为免费版
-      console.warn('🚫 [AdminNavbarLinks] 订阅徽章 - 用户未登录,重置为免费版');
-      setSubscriptionInfo({
-        type: 'free',
-        status: 'active',
-        days_left: 0,
-        is_active: true
-      });
-    }
-  }, [isAuthenticated, user?.id]); // 只依赖 user.id 而不是整个 user 对象
-
-  // Chakra Color Mode
-  let navbarIcon =
-    fixed && scrolled
-      ? useColorModeValue("gray.700", "gray.200")
-      : useColorModeValue("white", "gray.200");
-  let menuBg = useColorModeValue("white", "navy.800");
-  if (secondary) {
-    navbarIcon = "white";
-  }
-
-  const handleLogout = () => {
-    logout();
-    navigate("/auth/signin");
-  };
-
-  return (
-    <Flex
-      pe={{ sm: "0px", md: "16px" }}
-      w={{ sm: "100%", md: "auto" }}
-      alignItems="center"
-      flexDirection="row"
-    >
-      <SearchBar me="18px" />
-
-      {/* 订阅状态徽章 - 仅登录用户可见 */}
-      {console.log('🎨 [订阅徽章] 渲染:', { isAuthenticated, subscriptionInfo })}
-      {isAuthenticated && (
-        <>
-          <SubscriptionBadge
-            subscriptionInfo={subscriptionInfo}
-            onClick={() => setIsSubscriptionModalOpen(true)}
-          />
-          <SubscriptionModal
-            isOpen={isSubscriptionModalOpen}
-            onClose={() => setIsSubscriptionModalOpen(false)}
-            subscriptionInfo={subscriptionInfo}
-          />
-        </>
-      )}
-
-      {/* 用户认证状态 */}
-      {isAuthenticated ? (
-        // 已登录用户 - 显示用户菜单
-        <Menu>
-          <MenuButton>
-            <HStack spacing={2} cursor="pointer">
-              <Avatar 
-                size="sm" 
-                name={user?.name} 
-                src={user?.avatar}
-                bg="blue.500"
-              />
-              <Text 
-                display={{ sm: "none", md: "flex" }}
-                color={navbarIcon}
-                fontSize="sm"
-                fontWeight="medium"
-              >
-                {user?.name || user?.email}
-              </Text>
-            </HStack>
-          </MenuButton>
-          <MenuList p="16px 8px" bg={menuBg}>
-            <Flex flexDirection="column">
-              <MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/profile")}>
-                <HStack spacing={3}>
-                  <Avatar size="sm" name={user?.name} src={user?.avatar} />
-                  <Box>
-                    <Text fontWeight="bold" fontSize="sm">{user?.name}</Text>
-                    <Text fontSize="xs" color="gray.500">{user?.email}</Text>
-                  </Box>
-                </HStack>
-              </MenuItem>
-              <Divider my={2} />
-              <MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/profile")}>
-                <Text>个人资料</Text>
-              </MenuItem>
-              <MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/settings")}>
-                <Text>设置</Text>
-              </MenuItem>
-              <Divider my={2} />
-              <MenuItem borderRadius="8px" onClick={handleLogout}>
-                <Text color="red.500">退出登录</Text>
-              </MenuItem>
-            </Flex>
-          </MenuList>
-        </Menu>
-      ) : (
-        // 未登录用户 - 显示登录按钮
-        <NavLink to="/auth/signin">
-          <Button
-            ms="0px"
-            px="0px"
-            me={{ sm: "2px", md: "16px" }}
-            color={navbarIcon}
-            variant="no-effects"
-            rightIcon={
-              document.documentElement.dir ? (
-                ""
-              ) : (
-                <ProfileIcon color={navbarIcon} w="22px" h="22px" me="0px" />
-              )
-            }
-            leftIcon={
-              document.documentElement.dir ? (
-                <ProfileIcon color={navbarIcon} w="22px" h="22px" me="0px" />
-              ) : (
-                ""
-              )
-            }
-          >
-            <Text display={{ sm: "none", md: "flex" }}>登录</Text>
-          </Button>
-        </NavLink>
-      )}
-
-      <SidebarResponsive
-        logo={
-          <Stack direction="row" spacing="12px" align="center" justify="center">
-            {colorMode === "dark" ? (
-              <ArgonLogoLight w="74px" h="27px" />
-            ) : (
-              <ArgonLogoDark w="74px" h="27px" />
-            )}
-            <Box
-              w="1px"
-              h="20px"
-              bg={colorMode === "dark" ? "white" : "gray.700"}
-            />
-            {colorMode === "dark" ? (
-              <ChakraLogoLight w="82px" h="21px" />
-            ) : (
-              <ChakraLogoDark w="82px" h="21px" />
-            )}
-          </Stack>
-        }
-        colorMode={colorMode}
-        secondary={props.secondary}
-        routes={routes}
-        {...rest}
-      />
-      <SettingsIcon
-        cursor="pointer"
-        ms={{ base: "16px", xl: "0px" }}
-        me="16px"
-        onClick={props.onOpen}
-        color={navbarIcon}
-        w="18px"
-        h="18px"
-      />
-      <Menu>
-        <MenuButton>
-          <BellIcon color={navbarIcon} w="18px" h="18px" />
-        </MenuButton>
-        <MenuList p="16px 8px" bg={menuBg}>
-          <Flex flexDirection="column">
-            <MenuItem borderRadius="8px" mb="10px">
-              <ItemContent
-                time="13 minutes ago"
-                info="from Alicia"
-                boldInfo="New Message"
-                aName="Alicia"
-                aSrc={avatar1}
-              />
-            </MenuItem>
-            <MenuItem borderRadius="8px" mb="10px">
-              <ItemContent
-                time="2 days ago"
-                info="by Josh Henry"
-                boldInfo="New Album"
-                aName="Josh Henry"
-                aSrc={avatar2}
-              />
-            </MenuItem>
-            <MenuItem borderRadius="8px">
-              <ItemContent
-                time="3 days ago"
-                info="Payment succesfully completed!"
-                boldInfo=""
-                aName="Kara"
-                aSrc={avatar3}
-              />
-            </MenuItem>
-          </Flex>
-        </MenuList>
-      </Menu>
-    </Flex>
-  );
-}
-
-HeaderLinks.propTypes = {
-  variant: PropTypes.string,
-  fixed: PropTypes.bool,
-  secondary: PropTypes.bool,
-  onOpen: PropTypes.func,
-};

src/components/Navbars/HomeNavbar.js

@@ -626,23 +626,15 @@ export default function HomeNavbar() {
 
     // 加载订阅信息
     React.useEffect(() => {
-        console.log('🔍 [HomeNavbar] 订阅徽章 - 认证状态:', isAuthenticated, 'userId:', user?.id);
-
         if (isAuthenticated && user) {
             const loadSubscriptionInfo = async () => {
                 try {
                     const base = getApiBase();
-                    console.log('🌐 [HomeNavbar] 订阅徽章 - API:', base + '/api/subscription/current');
                     const response = await fetch(base + '/api/subscription/current', {
                         credentials: 'include',
                     });
-                    console.log('📡 [HomeNavbar] 订阅徽章 - 响应:', response.status);
                     if (response.ok) {
                         const data = await response.json();
-                        console.log('✅ [HomeNavbar] 订阅徽章 - 完整响应数据:', data);
-                        console.log('🔍 [HomeNavbar] 订阅徽章 - data.data:', data.data);
-                        console.log('🔍 [HomeNavbar] 订阅徽章 - type值:', data.data?.type, '类型:', typeof data.data?.type);
-
                         if (data.success && data.data) {
                             // 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max'
                             const normalizedData = {
@@ -652,20 +644,16 @@ export default function HomeNavbar() {
                                 is_active: data.data.is_active !== false,
                                 end_date: data.data.end_date || null
                             };
-                            console.log('✨ [HomeNavbar] 订阅徽章 - 标准化后:', normalizedData);
                             setSubscriptionInfo(normalizedData);
                         }
-                    } else {
-                        console.warn('⚠️ [HomeNavbar] 订阅徽章 - API 失败，使用默认值');
                     }
                 } catch (error) {
-                    console.error('❌ [HomeNavbar] 订阅徽章 - 错误:', error);
+                    logger.error('HomeNavbar', '加载订阅信息失败', error);
                 }
             };
             loadSubscriptionInfo();
         } else {
             // 用户未登录时,重置为免费版
-            console.warn('🚫 [HomeNavbar] 订阅徽章 - 用户未登录,重置为免费版');
             setSubscriptionInfo({
                 type: 'free',
                 status: 'active',
@@ -775,7 +763,6 @@ export default function HomeNavbar() {
                             />
 
                             {/* 订阅状态徽章 - 仅登录用户可见 */}
-                            {console.log('🎨 [HomeNavbar] 订阅徽章 - 渲染:', { isAuthenticated, user: !!user, subscriptionInfo })}
                             {isAuthenticated && user && (
                                 <>
                                     <SubscriptionBadge