feat: header breadcrumb

Author: phachon

package-lock.json

@@ -15,6 +15,7 @@
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-fast-marquee": "^1.3.5",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

package.json

@@ -8,7 +8,7 @@ interface FrameBreadcrumbUIProps {
 
 const FrameBreadcrumbUI = (props: FrameBreadcrumbUIProps) => {
   return (
-    <div className="admin-breadcrumb">
+    <div className="admin-breadcrumb" style={{ marginTop: props.items.length > 0 ? 8 : 0 }}>
       <div className="admin-breadcrumb-nav">
         <Breadcrumb style={{ margin: '0 4px' }} separator="/">
           {props.items.map(item => (

src/pages/Frame/component/BreadcrumbUI.tsx

@@ -1,3 +1,6 @@
+import { Alert } from 'antd';
+import Marquee from 'react-fast-marquee';
+
 interface MainIndexUIProps {}
 
 /**
@@ -6,7 +9,18 @@ interface MainIndexUIProps {}
  * @returns
  */
 const MainIndexUI = (props: MainIndexUIProps) => {
-  return <div className="panel-body">这里是默认的主页页面</div>;
+  return (
+    <div className="panel-body">
+      <Alert
+        banner
+        message={
+          <Marquee pauseOnHover gradient={false}>
+            公告：xxxxxxxxxxxx
+          </Marquee>
+        }
+      />
+    </div>
+  );
 };
 
 export default MainIndexUI;

src/pages/Main/component/IndexUI.tsx

@@ -28,7 +28,7 @@ interface PrivilegeListTreeUIProps {
  */
 const PrivilegeListTreeUI = (props: PrivilegeListTreeUIProps) => {
   const privilegeList = props.privilegeList;
-  if (privilegeList.length == 0) {
+  if (privilegeList.length === 0) {
     return <Empty></Empty>;
   }
 
@@ -47,7 +47,7 @@ const PrivilegeListTreeUI = (props: PrivilegeListTreeUIProps) => {
         title: (
           <span>
             {privilegeItem.privilege_info.name}
-            <a onClick={() => props.editClickCallback(privilegeItem.privilege_info)}>
+            <a href="#!" onClick={() => props.editClickCallback(privilegeItem.privilege_info)}>
               <EditOutlined style={{ marginLeft: 6 }} />
             </a>
             <Popconfirm
@@ -157,7 +157,7 @@ const PrivilegeListTreeUI = (props: PrivilegeListTreeUIProps) => {
             style={{ marginRight: '6px' }}
           />
           {privilegeListItem.privilege_info.name}
-          <a onClick={() => props.editClickCallback(privilegeListItem.privilege_info)}>
+          <a href="#!" onClick={() => props.editClickCallback(privilegeListItem.privilege_info)}>
             <EditOutlined style={{ marginLeft: 6, marginRight: 0 }} />
           </a>
           <Popconfirm

src/pages/Privilege/component/ListTreeUI.tsx

@@ -96,12 +96,12 @@ const getAllChildPrivilegeIds = (privilegeList: PrivilegeListItemType[]): bigint
  */
 const PrivilegeUI = (props: PrivilegeUIProps) => {
   const privilegeList = props.privilegeList;
-  const defaultPrivilegeIds = props.defaultPrivilegeIds ? props.defaultPrivilegeIds : [];
-  const [checkedPrivilegeIds, setCheckedPrivilegeIds] = useState<string[]>(defaultPrivilegeIds);
+  const [checkedPrivilegeIds, setCheckedPrivilegeIds] = useState<string[]>([]);
 
   useEffect(() => {
+    const defaultPrivilegeIds = props.defaultPrivilegeIds ? props.defaultPrivilegeIds : [];
     setCheckedPrivilegeIds(defaultPrivilegeIds);
-  }, [defaultPrivilegeIds]);
+  }, [props.defaultPrivilegeIds]);
 
   if (privilegeList.length === 0) {
     return <Empty></Empty>;

src/pages/Role/component/PrivilegeUI.tsx

@@ -7807,7 +7807,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@*", "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^18.0.0", "react-dom@^18.1.0", "react-dom@>=16.0.0", "react-dom@>=16.11.0", "react-dom@>=16.8", "react-dom@>=16.9.0":
+"react-dom@*", "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^18.0.0", "react-dom@^18.1.0", "react-dom@>= 16.8.0 || 18.0.0", "react-dom@>=16.0.0", "react-dom@>=16.11.0", "react-dom@>=16.8", "react-dom@>=16.9.0":
   "integrity" "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w=="
   "resolved" "https://registry.npmmirror.com/react-dom/-/react-dom-18.1.0.tgz"
   "version" "18.1.0"
@@ -7820,6 +7820,11 @@
   "resolved" "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   "version" "6.0.11"
 
+"react-fast-marquee@^1.3.5":
+  "integrity" "sha512-eOqLoz4iVVBvi2wN/web8hd2XX9y2Z6CYR7g++7nTVHlTOXBtqyARQJ9rYNpbp179hAzloMx0yBFAo8LpNYmKQ=="
+  "resolved" "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.3.5.tgz"
+  "version" "1.3.5"
+
 "react-is@^16.12.0":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz"
@@ -7932,7 +7937,7 @@
   optionalDependencies:
     "fsevents" "^2.3.2"
 
-"react@*", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.1.0", "react@>= 16", "react@>=16.0.0", "react@>=16.11.0", "react@>=16.8", "react@>=16.9.0":
+"react@*", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0 || 18.0.0", "react@>=16.0.0", "react@>=16.11.0", "react@>=16.8", "react@>=16.9.0":
   "integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ=="
   "resolved" "https://registry.npmmirror.com/react/-/react-18.1.0.tgz"
   "version" "18.1.0"