feat: profile item ui

src/components/profile-item.tsx

@@ -59,6 +59,9 @@ const ProfileItem: React.FC<Props> = (props) => {
   const progress = Math.round(((download + upload) * 100) / (total + 0.1));
   const fromnow = updated > 0 ? dayjs(updated * 1000).fromNow() : "";
 
+  // url or file mode
+  const isUrlMode = itemData.url && extra;
+
   const onView = async () => {
     setAnchorEl(null);
     try {
@@ -111,6 +114,13 @@ const ProfileItem: React.FC<Props> = (props) => {
     event.preventDefault();
   };
 
+  const boxStyle = {
+    height: 26,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+  };
+
   return (
     <>
       <Wrapper
@@ -155,52 +165,63 @@ const ProfileItem: React.FC<Props> = (props) => {
             {name}
           </Typography>
 
-          <IconButton
+          {isUrlMode && (
-            sx={{
+            <IconButton
-              width: 30,
+              sx={{
-              height: 30,
+                width: 26,
-              animation: loading ? `1s linear infinite ${round}` : "none",
+                height: 26,
-            }}
+                animation: loading ? `1s linear infinite ${round}` : "none",
-            color="inherit"
+              }}
-            disabled={loading}
+              color="inherit"
-            onClick={(e) => {
+              disabled={loading}
-              e.stopPropagation();
+              onClick={(e) => {
-              onUpdateWrapper(false)();
+                e.stopPropagation();
-            }}
+                onUpdateWrapper(false)();
-          >
+              }}
-            <RefreshRounded />
+            >
-          </IconButton>
+              <RefreshRounded />
+            </IconButton>
+          )}
         </Box>
 
-        <Box display="flex" justifyContent="space-between" alignItems="center">
+        {isUrlMode ? (
-          <Typography noWrap title={`From: ${from}`}>
+          <>
-            {from}
+            <Box sx={boxStyle}>
-          </Typography>
+              <Typography noWrap title={`From: ${from}`}>
+                {from}
+              </Typography>
 
-          <Typography
+              <Typography
-            noWrap
+                noWrap
-            flex="1 0 auto"
+                flex="1 0 auto"
-            fontSize={14}
+                fontSize={14}
-            textAlign="right"
+                textAlign="right"
-            title="updated time"
+                title="updated time"
-          >
+              >
-            {fromnow}
+                {fromnow}
-          </Typography>
+              </Typography>
-        </Box>
+            </Box>
 
-        <Box
+            <Box sx={{ ...boxStyle, fontSize: 14 }}>
-          sx={{
+              <span title="used / total">
-            my: 0.5,
+                {parseTraffic(upload + download)} / {parseTraffic(total)}
-            fontSize: 14,
+              </span>
-            display: "flex",
+              <span title="expire time">{expire}</span>
-            justifyContent: "space-between",
+            </Box>
-          }}
+          </>
-        >
+        ) : (
-          <span title="used / total">
+          <>
-            {parseTraffic(upload + download)} / {parseTraffic(total)}
+            <Box sx={boxStyle}>
-          </span>
+              <Typography noWrap title={itemData.desc}>
-          <span title="expire time">{expire}</span>
+                {itemData.desc}
-        </Box>
+              </Typography>
+            </Box>
+
+            <Box sx={{ ...boxStyle, fontSize: 14, justifyContent: "flex-end" }}>
+              <span title="updated time">{parseExpire(updated)}</span>
+            </Box>
+          </>
+        )}
 
         <LinearProgress
           variant="determinate"

src/services/types.ts

@@ -87,6 +87,7 @@ export namespace CmdType {
 
   export interface ProfileItem {
     name?: string;
+    desc?: string;
     file?: string;
     mode?: string;
     url?: string;