feat: profile item support display updated time

src-tauri/src/cmds/profile.rs

@@ -10,6 +10,7 @@ use crate::{
 };
 use std::fs::File;
 use std::io::Write;
+use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::State;
 
 /// Import the profile from url
@@ -38,6 +39,11 @@ pub async fn import_profile(url: String, lock: State<'_, ProfileLock>) -> Result
   let mut profiles = read_profiles();
   let mut items = profiles.items.unwrap_or(vec![]);
 
+  let now = SystemTime::now()
+    .duration_since(UNIX_EPOCH)
+    .unwrap()
+    .as_secs();
+
   items.push(ProfileItem {
     name: Some(result.name),
     file: Some(result.file),
@@ -45,6 +51,7 @@ pub async fn import_profile(url: String, lock: State<'_, ProfileLock>) -> Result
     url: Some(url),
     selected: Some(vec![]),
     extra: Some(result.extra),
+    updated: Some(now as usize),
   });
   profiles.items = Some(items);
   save_profiles(&profiles)
@@ -82,6 +89,11 @@ pub async fn update_profile(index: usize, lock: State<'_, ProfileLock>) -> Resul
     }
   };
 
+  let now = SystemTime::now()
+    .duration_since(UNIX_EPOCH)
+    .unwrap()
+    .as_secs() as usize;
+
   // update file
   let file_path = &items[index].file.as_ref().unwrap();
   let file_path = app_home_dir().join("profiles").join(file_path);
@@ -90,6 +102,7 @@ pub async fn update_profile(index: usize, lock: State<'_, ProfileLock>) -> Resul
 
   items[index].name = Some(result.name);
   items[index].extra = Some(result.extra);
+  items[index].updated = Some(now);
   profiles.items = Some(items);
   save_profiles(&profiles)
 }

src-tauri/src/config/profiles.rs

@@ -24,6 +24,8 @@ pub struct ProfileItem {
   pub selected: Option<Vec<ProfileSelected>>,
   /// user info
   pub extra: Option<ProfileExtra>,
+  /// updated time
+  pub updated: Option<usize>,
 }
 
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]

src/components/profile-item.tsx

@@ -12,6 +12,9 @@ import {
 import { MenuRounded } from "@mui/icons-material";
 import { ProfileItem } from "../services/command";
 import parseTraffic from "../utils/parse-traffic";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
 
 const Wrapper = styled(Box)(({ theme }) => ({
   width: "100%",
@@ -34,11 +37,12 @@ interface Props {
 const ProfileItemComp: React.FC<Props> = (props) => {
   const { selected, itemData, onClick, onUpdate } = props;
 
-  const { name = "Profile", extra } = itemData;
+  const { name = "Profile", extra, updated = 0 } = itemData;
   const { upload = 0, download = 0, total = 0 } = extra ?? {};
   const from = parseUrl(itemData.url);
   const expire = parseExpire(extra?.expire);
   const progress = Math.round(((download + upload) * 100) / (total + 0.1));
+  const fromnow = updated > 0 ? dayjs(updated * 1000).fromNow() : "";
 
   return (
     <Wrapper
@@ -95,9 +99,21 @@ const ProfileItemComp: React.FC<Props> = (props) => {
         </IconButton>
       </Box>
 
-      <Typography noWrap title={from}>
+      <Box display="flex" justifyContent="space-between" alignItems="center">
-        {from}
+        <Typography noWrap title={`From: ${from}`}>
-      </Typography>
+          {from}
+        </Typography>
+
+        <Typography
+          noWrap
+          flex="1 0 auto"
+          fontSize={14}
+          textAlign="right"
+          title="updated time"
+        >
+          {fromnow}
+        </Typography>
+      </Box>
 
       <Box
         sx={{
@@ -107,10 +123,10 @@ const ProfileItemComp: React.FC<Props> = (props) => {
           justifyContent: "space-between",
         }}
       >
-        <span>
+        <span title="used / total">
           {parseTraffic(upload + download)} / {parseTraffic(total)}
         </span>
-        <span>{expire}</span>
+        <span title="expire time">{expire}</span>
       </Box>
 
       <LinearProgress variant="determinate" value={progress} color="inherit" />

src/services/command.ts

@@ -32,6 +32,7 @@ export interface ProfileItem {
   file?: string;
   mode?: string;
   url?: string;
+  updated?: number;
   selected?: { name?: string; now?: string }[];
   extra?: {
     upload: number;