feat: 增加about页面

README.md

@@ -2,6 +2,12 @@
 
 english | [中文说明](./README_CHS.md)
 
+## Screenshot
+
+![](https://raw.githubusercontent.com/IronKinoko/assert/master/e-hentai-view/home.png)
+
+![](https://raw.githubusercontent.com/IronKinoko/assert/master/e-hentai-view/menu.png)
+
 > **My english is poor, this article is provided by Google translation**
 
 A mobile website for exhentai, build with Next.js, also can in PC

app/next.config.js

@@ -17,6 +17,9 @@ const nextConfig = {
   devIndicators: {
     autoPrerender: false,
   },
+  env: {
+    VERSION: '2.0.1',
+  },
 }
 
 module.exports = withBundleAnalyzer(nextConfig)

app/pages/about.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import {
+  List,
+  ListItem,
+  ListItemText,
+  useMediaQuery,
+  Link,
+  Paper,
+} from '@material-ui/core'
+
+import { useTheme } from '@material-ui/core/styles'
+import Layout from 'components/Layout'
+
+const About = () => {
+  const theme = useTheme()
+  const matches = useMediaQuery(theme.breakpoints.down('xs'))
+  return (
+    <Layout title="About" noContainer={matches}>
+      <List>
+        <ListItem divider>
+          <ListItemText
+            primary="EhentaiView"
+            secondary="EhentaiView is not affiliated with E-hentai.org in any way"
+          />
+        </ListItem>
+        <ListItem divider>
+          <ListItemText
+            primary="Author"
+            secondary="IronKinoko <[email protected]>"
+            secondaryTypographyProps={{
+              component: Link,
+              href: 'https://github.com/IronKinoko',
+              target: '_blank',
+            }}
+          />
+        </ListItem>
+        <ListItem divider>
+          <ListItemText
+            primary="Source"
+            secondary="https://github.com/IronKinoko/e-hentai-view"
+            secondaryTypographyProps={{
+              component: Link,
+              href: 'https://github.com/IronKinoko/e-hentai-view.git',
+              target: '_blank',
+            }}
+          />
+        </ListItem>
+        <ListItem divider>
+          <ListItemText primary="License" secondary="MIT" />
+        </ListItem>
+        <ListItem>
+          <ListItemText primary="Version" secondary={process.env.VERSION} />
+        </ListItem>
+      </List>
+    </Layout>
+  )
+}
+
+export default About

app/pages/setting/eh.tsx

@@ -6,38 +6,56 @@ import {
   ListItemText,
   useMediaQuery,
   Dialog,
+  Typography,
+  ListSubheader,
+  ListItemSecondaryAction,
+  IconButton,
 } from '@material-ui/core'
 import { useTheme } from '@material-ui/core/styles'
 import Layout from 'components/Layout'
-import ExitToAppIcon from '@material-ui/icons/ExitToApp'
-import AccountCircleIcon from '@material-ui/icons/AccountCircle'
+import LabelIcon from '@material-ui/icons/Label'
 import SettingsIcon from '@material-ui/icons/Settings'
 import { useRouter } from 'next/router'
 import { axios } from 'apis'
-import message from 'components/message'
+import ArrowRightIcon from '@material-ui/icons/ArrowRight'
 import Logout from '@/setting/Logout'
 import UserCookie from '@/setting/UserCookie'
+
 const EHSetting = () => {
   const router = useRouter()
   const theme = useTheme()
   const matches = useMediaQuery(theme.breakpoints.down('xs'))
 
-  const logout = async () => {
-    await axios.post('/api/user/logout')
-    message.success('logout success')
-    router.push('/signin')
-  }
-
+  const goEhConfig = () => router.push('/setting/ehconfig')
+  const goEhTags = () => router.push('/setting/ehtags')
   return (
     <Layout title="EH" noContainer={matches}>
       <List>
+        <ListSubheader>User</ListSubheader>
         <Logout />
         <UserCookie />
-        <ListItem button onClick={() => router.push('/setting/ehconfig')}>
+        <ListSubheader>Setting</ListSubheader>
+        <ListItem button onClick={goEhConfig}>
           <ListItemIcon>
             <SettingsIcon />
           </ListItemIcon>
-          <ListItemText primary="Exhentai Setting" />
+          <ListItemText primary="Ehentai Setting" />
+          <ListItemSecondaryAction>
+            <IconButton onClick={goEhConfig}>
+              <ArrowRightIcon />
+            </IconButton>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <ListItem button onClick={goEhTags}>
+          <ListItemIcon>
+            <LabelIcon />
+          </ListItemIcon>
+          <ListItemText primary="Ehentai Tags" />
+          <ListItemSecondaryAction>
+            <IconButton onClick={goEhTags}>
+              <ArrowRightIcon />
+            </IconButton>
+          </ListItemSecondaryAction>
         </ListItem>
       </List>
     </Layout>

app/pages/setting/ehtags.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react'
+import { setting } from 'apis'
+import { NextPage } from 'next'
+import Layout from 'components/Layout'
+import Loading from 'components/Loading'
+
+const EHTag: NextPage = () => {
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    setting()
+    return () => {
+      setting()
+    }
+  }, [])
+  return (
+    <Layout title="EHentai Tags" noContainer fullScreen>
+      <iframe
+        src="https://exhentai.org/mytags"
+        frameBorder="0"
+        width="100%"
+        height="100%"
+        onLoad={() => {
+          setLoading(false)
+        }}
+      />
+      {loading && <Loading />}
+    </Layout>
+  )
+}
+
+export default EHTag

app/pages/setting/index.tsx

@@ -5,13 +5,20 @@ import {
   ListItemIcon,
   ListItemText,
   useMediaQuery,
+  ListItemSecondaryAction,
+  IconButton,
 } from '@material-ui/core'
 import { useTheme } from '@material-ui/core/styles'
 import Layout from 'components/Layout'
 import AccountCircleIcon from '@material-ui/icons/AccountCircle'
+import ArrowRightIcon from '@material-ui/icons/ArrowRight'
+import InfoIcon from '@material-ui/icons/Info'
 import { useRouter } from 'next/router'
 
-const menu = [{ icon: <AccountCircleIcon />, name: 'EH', path: '/setting/eh' }]
+const menu = [
+  { icon: <AccountCircleIcon />, name: 'EH', path: '/setting/eh' },
+  { icon: <InfoIcon />, name: 'About', path: '/about' },
+]
 const Setting = () => {
   const router = useRouter()
   const theme = useTheme()
@@ -23,6 +30,11 @@ const Setting = () => {
           <ListItem button key={o.path} onClick={() => router.push(o.path)}>
             <ListItemIcon>{o.icon}</ListItemIcon>
             <ListItemText primary={o.name} />
+            <ListItemSecondaryAction>
+              <IconButton onClick={() => router.push(o.path)}>
+                <ArrowRightIcon />
+              </IconButton>
+            </ListItemSecondaryAction>
           </ListItem>
         ))}
       </List>

app/src/setting/UserCookie.tsx

@@ -27,7 +27,7 @@ const UserCookie = () => {
         <DialogTitle>User Cookie</DialogTitle>
         <DialogContent>
           <DialogContentText color="primary" variant="h6">
-            Pay attention to data security
+            KEEP IT SAFE
           </DialogContentText>
           {typeof window !== 'undefined' &&
             document.cookie.split(';').map((t) => (
@@ -39,7 +39,9 @@ const UserCookie = () => {
             ))}
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setOpen(false)}>COPY</Button>
+          <Button color="primary" onClick={() => setOpen(false)}>
+            COPY
+          </Button>
         </DialogActions>
       </Dialog>
     </>