优化部分 ui；点击功能选项即可重置组件

Author: Mr-Python-in-China

src/app/features/article/articleViewer.css

@@ -15,3 +15,11 @@
   margin: 0 0 20px;
   border-left: 5px solid #eee;
 }
+.articleViewer a {
+  color: #3498db;
+  text-decoration: none;
+}
+.articleViewer a:hover {
+  color: #0056b3;
+  text-decoration: none;
+}

src/app/index.tsx

@@ -23,7 +23,8 @@ const theme: Theme = {
 
 export default function App() {
   const [nowFeature, setNowFeature] = useState<number>(0);
-  const NowFeatureComponent = Features[nowFeature][1];
+  const NowFeatureComponent =
+    nowFeature >= 0 ? Features[nowFeature][1] : React.Fragment;
 
   const [myInfo, setMyInfo] = useState<UserSummary | null>(null);
   const [fetchError, setFetchError] = useState<unknown | undefined>(undefined);
@@ -38,6 +39,9 @@ export default function App() {
       });
     return () => void (ignore = true);
   }, []);
+  useEffect(() => {
+    if (nowFeature < 0) setNowFeature(-nowFeature - 1);
+  });
 
   return (
     <FluentProvider theme={theme}>
@@ -64,7 +68,8 @@ export default function App() {
               <div>
                 {Features.map((s, i) => (
                   <button
-                    onClick={() => setNowFeature(i)}
+                    type="button"
+                    onClick={() => setNowFeature(-i - 1)}
                     key={i}
                     className="nav-item"
                     style={{ fontWeight: nowFeature === i ? 'bold' : 'normal' }}

src/app/style.css

@@ -1,7 +1,3 @@
-a {
-  color: #3498db;
-  text-decoration: none;
-}
 .root {
   display: flex;
   flex-direction: column;
@@ -13,7 +9,7 @@ a {
   overflow: hidden;
   tab-size: 4;
 }
-nav {
+.root > nav {
   height: 4em;
   align-items: center;
   display: flex;
@@ -22,7 +18,7 @@ nav {
   border-bottom: 1px solid #f0f0f0;
   background-color: white;
 }
-.nav-item {
+.root > nav .nav-item {
   margin-left: 1em;
   margin-right: 1em;
   cursor: pointer;
@@ -32,7 +28,7 @@ nav {
   padding: unset;
 }
 .feature {
-  flex: auto;
+  flex: 1;
   overflow: hidden;
 }
 a:focus,
@@ -45,6 +41,7 @@ a:hover {
   font-size: 16px;
   font-weight: bold;
   text-align: center;
+  text-decoration: none;
 }
 .username-badge {
   display: inline-block;