feat: improve homepage routing

lgou2w · Sep 7, 2023 · 49d7e38 · 49d7e38
1 parent 4bc26cf
commit 49d7e38
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 2 deletions.
diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
@@ -6,12 +6,22 @@ use tauri::{Invoke, Runtime};
 
 pub fn get_handlers<R: Runtime>() -> Box<dyn Fn(Invoke<R>) + Send + Sync> {
   Box::new(tauri::generate_handler![
+    get_current_exe_dir,
     get_version,
     get_latest_version,
     update_app
   ])
 }
 
+#[tauri::command]
+fn get_current_exe_dir() -> Result<std::path::PathBuf> {
+  if cfg!(debug_assertions) {
+    Ok(std::env::current_dir()?)
+  } else {
+    Ok(std::env::current_exe()?.parent().unwrap().to_path_buf())
+  }
+}
+
 #[derive(Debug, Serialize)]
 struct Version {
   version: String, // x.y.z

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -4,11 +4,47 @@ import Layout from '@/components/Layout'
 import Version from '@/components/common/Version'
 import Typography from '@mui/material/Typography'
 import MuiLink from '@mui/material/Link'
+import Divider from '@mui/material/Divider'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import InfoIcon from '@mui/icons-material/InfoOutlined'
+import StorageIcon from '@mui/icons-material/Storage'
+import InfoIcon from '@mui/icons-material/Info'
+import Logo from '@/assets/images/Logo.png'
+import { shell } from '@tauri-apps/api'
+import invoke from '@/utilities/invoke'
+
+const BoxShieldsSx = {
+  display: 'flex',
+  alignItems: 'center',
+  '& > img': {
+    maxWidth: '150px',
+    height: '20px',
+    width: 'auto',
+    marginRight: 1
+  }
+}
+
+const BoxUlSx = {
+  '& > ul': { paddingLeft: 2.5 },
+  '& > ul li': { marginTop: 1 }
+}
+
+const DividerSx = {
+  '&': {
+    fontSize: '1.15rem',
+    fontWeight: 500
+  },
+  '&:before': {
+    width: '1%'
+  }
+}
 
 export default function Index () {
+  const handleClickOpenDatabaseDir = React.useCallback(async () => {
+    const currentExeDir = await invoke<string>('get_current_exe_dir')
+    await shell.open(currentExeDir)
+  }, [])
+
   return (
     <Layout title="主页">
       <Typography variant="h5">
@@ -18,8 +54,77 @@ export default function Index () {
         &nbsp;&nbsp;
         <Version variant="caption" />
       </Typography>
-      <Typography>An unofficial tool for managing and analyzing your miHoYo gacha records.</Typography>
+      <Box sx={BoxShieldsSx}>
+        <img src="https://img.shields.io/github/actions/workflow/status/lgou2w/HoYo.Gacha/build.yml?branch=main&logo=github&style=flat-square" alt="build status" />
+        <img src="https://img.shields.io/github/v/release/lgou2w/HoYo.Gacha?logo=github&style=flat-square&include_prereleases" alt="latest release" />
+        <Typography variant="caption">(Shields.io)</Typography>
+      </Box>
       <Typography>一个非官方的工具，用于管理和分析你的 miHoYo 抽卡记录。</Typography>
+      <Typography variant="body2">无需任何本地代理服务器。只需读取 Chromium 硬盘缓存文件并请求 API 端点。</Typography>
+      <img height={128} width={128} src={Logo} />
+      <Box sx={{
+        ...BoxUlSx,
+        '& > ul li code': {
+          fontSize: '85%',
+          fontWeight: 600,
+          fontStyle: 'normal',
+          fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace',
+          backgroundColor: 'rgba(0, 0, 0, 0.08)',
+          borderRadius: '6px',
+          padding: '0.2em 0.4em'
+        }
+      }}>
+        <Divider textAlign="left" sx={DividerSx}>功能</Divider>
+        <ul>
+          <li>支持 <code>原神</code> 和 <code>崩坏：星穹铁道</code> 游戏抽卡记录。</li>
+          <li>管理游戏的多个账号。</li>
+          <li>获取游戏的抽卡链接。</li>
+          <li>
+            {'获取抽卡记录并保存到本地数据库文件。 '}
+            <Button
+              startIcon={<StorageIcon />}
+              variant="outlined"
+              size="small"
+              color="secondary"
+              onClick={handleClickOpenDatabaseDir}
+            >打开数据库目录</Button>
+          </li>
+          <li>
+            {'实现 '}
+            <MuiLink href="https://uigf.org/zh/standards/UIGF.html" target="_blank" underline="hover">
+              <code>UIGF</code>
+            </MuiLink>
+            {' 统一可交换祈愿记录标准。'}
+          </li>
+          <li>
+            {'实现 '}
+            <MuiLink href="https://uigf.org/zh/standards/SRGF.html" target="_blank" underline="hover">
+              <code>SRGF</code>
+            </MuiLink>
+            {' 星穹铁道抽卡记录标准'}
+          </li>
+          <li>更多开发中...</li>
+        </ul>
+      </Box>
+      <Box sx={BoxUlSx}>
+        <Divider textAlign="left" sx={DividerSx}>特别感谢</Divider>
+        <ul>
+          {[
+            ['https://uigf.org/', 'UIGF organization'],
+            ['https://github.com/DGP-Studio/Snap.Hutao', 'DGP-Studio/Snap.Hutao'],
+            ['https://github.com/YuehaiTeam/cocogoat', 'YuehaiTeam/cocogoat'],
+            ['https://github.com/vikiboss/gs-helper', 'vikiboss/gs-helper']
+          ].map(([href, title], i) => (
+            <li key={i}>
+              <MuiLink href={href} target="_blank" underline="hover" fontSize="0.875rem">{title}</MuiLink>
+            </li>
+          ))}
+        </ul>
+      </Box>
+      <Box>
+        <Divider textAlign="left" sx={DividerSx}>协议</Divider>
+        <Typography marginTop={1}>MIT OR Apache-2.0 仅供个人学习交流使用。请勿用于任何商业或违法违规用途。</Typography>
+      </Box>
       <Box>
         <Button component={Link} to="/setting"
           variant="outlined"