feat(web): add region info on logo (#1001)

labring · Apr 4, 2023 · 378b0e6 · 378b0e6
1 parent 1c4040a
commit 378b0e6
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 14 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -144,10 +144,10 @@
     "SystemSetting": "Application Settings",
     "UserSetting": "User Info",
     "UpdateConfirm": "Update env will restart application, are you sure?",
-    "BaseInfo": "Basic Information",
+    "BaseInfo": "Basic Info",
     "DB": "Database",
     "Delete": "Delete",
-    "Detail": "Rules details (experimental version)",
+    "Detail": "Spec Detail",
     "Disk": "Hard Disk",
     "Memory": "Memory",
     "Restart": "Restart",
@@ -167,7 +167,8 @@
     "UserInfo": "User Information",
     "noAuth": "Not Authenticated",
     "showAuth": "Go to Auth",
-    "ShutDown": "ShutDown"
+    "ShutDown": "ShutDown",
+    "Subscription": "Subscription Info"
   },
   "StoragePanel": {
     "All": "Total Capacity",
@@ -333,4 +334,4 @@
   "Generating": "Generating",
   "Start": "Start",
   "TryLafAI": "Try 🎉 Laf AI !"
-}
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -167,7 +167,8 @@
     "CodeTip": "请输入四位数字验证码",
     "TelTip": "请输入有效的手机号码",
     "Registered": "注册时间",
-    "ShutDown": "关闭应用"
+    "ShutDown": "关闭应用",
+    "Subscription": "订阅信息"
   },
   "StoragePanel": {
     "All": "总容量",

diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -167,7 +167,8 @@
     "CodeTip": "请输入四位数字验证码",
     "TelTip": "请输入有效的手机号码",
     "Registered": "注册时间",
-    "ShutDown": "关闭应用"
+    "ShutDown": "关闭应用",
+    "Subscription": "订阅信息"
   },
   "StoragePanel": {
     "All": "总容量",

diff --git a/web/src/apis/typing.d.ts b/web/src/apis/typing.d.ts
@@ -22,6 +22,7 @@ export type TApplicationDetail = {
   function_debug_token: string;
   host?: string;
   origin?: string;
+  subscription: TSubscription;
 };
 
 export type TBundle = {

diff --git a/web/src/pages/app/mods/SideBar/index.tsx b/web/src/pages/app/mods/SideBar/index.tsx
@@ -25,12 +25,17 @@ type TIcon = {
 export default function SideBar() {
   const { pageId } = useParams();
   const navigate = useNavigate();
-  const { currentApp, setCurrentPage, userInfo } = useGlobalStore();
-
+  const { currentApp, setCurrentPage, userInfo, regions = [] } = useGlobalStore();
+  const currentRegion = regions.find((item: any) => item.id === currentApp?.regionId) || regions[0];
   const ICONS: TIcon[] = [
     {
       pageId: "nav",
-      component: <img className="mt-2" src="/logo.png" alt="logo" width={34} />,
+      component: (
+        <div className="relative flex flex-col items-center">
+          <img className="mt-2" src="/logo.png" alt="logo" width={34} />
+          <span className="scale-[.65] text-second">{currentRegion.displayName}</span>
+        </div>
+      ),
     },
     {
       pageId: Pages.function,
@@ -79,7 +84,7 @@ export default function SideBar() {
   return (
     <div
       style={{ width: SideBarWidth }}
-      className="absolute top-0 bottom-0 flex flex-col justify-between"
+      className="absolute bottom-0 top-0 flex flex-col justify-between"
     >
       {[ICONS, BOTTOM_ICONS].map((icons, index) => {
         return (
@@ -90,7 +95,9 @@ export default function SideBar() {
                   <Center
                     key={item.pageId}
                     style={{
-                      height: 48,
+                      height: 40,
+                      marginTop: 12,
+                      marginBottom: 24,
                     }}
                     className="cursor-pointer"
                     onClick={() => {

diff --git a/web/src/pages/app/setting/AppInfoList/index.tsx b/web/src/pages/app/setting/AppInfoList/index.tsx
@@ -6,6 +6,7 @@ import { Box, Button, HStack, useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 
 import { APP_PHASE_STATUS } from "@/constants/index";
+import { formatDate } from "@/utils/format";
 
 import InfoDetail from "./InfoDetail";
 
@@ -128,6 +129,23 @@ const AppEnvList = () => {
               },
             ]}
           />
+
+          <InfoDetail
+            className="mt-6"
+            title={t("SettingPanel.Subscription")}
+            leftData={[
+              {
+                key: "创建时间",
+                value: `${formatDate(currentApp?.subscription?.createdAt)}`,
+              },
+            ]}
+            rightData={[
+              {
+                key: "到期时间",
+                value: `${formatDate(currentApp?.subscription?.expiredAt)}`,
+              },
+            ]}
+          />
         </div>
       </div>
     </>

diff --git a/web/src/pages/home/mods/List/index.tsx b/web/src/pages/home/mods/List/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { BsThreeDotsVertical } from "react-icons/bs";
 import { RiCodeBoxFill } from "react-icons/ri";
 import { useNavigate } from "react-router-dom";
@@ -16,7 +17,8 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import { useMutation } from "@tanstack/react-query";
-import { t } from "i18next";
+import clsx from "clsx";
+import dayjs from "dayjs";
 
 import CopyText from "@/components/CopyText";
 import FileTypeIcon from "@/components/FileTypeIcon";
@@ -37,6 +39,7 @@ import useGlobalStore from "@/pages/globalStore";
 
 function List(props: { appListQuery: any; setShouldRefetch: any }) {
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const { setCurrentApp, regions } = useGlobalStore();
 
@@ -95,7 +98,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                 <Box
                   key={item?.appid}
                   bg={bg}
-                  className="group mb-3 flex items-center rounded-lg py-4 px-3 lg:px-6"
+                  className="group mb-3 flex items-center rounded-lg px-3 py-4 lg:px-6"
                 >
                   <div className="w-3/12 ">
                     <div className="text-lg font-bold">
@@ -119,7 +122,14 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                     <p>
                       {t("CreateTime")}: {formatDate(item.createdAt)}{" "}
                     </p>
-                    <p className="mt-1">
+                    <p
+                      className={clsx(
+                        "mt-1",
+                        dayjs().add(3, "day").isAfter(dayjs(item.subscription.expiredAt))
+                          ? "text-red-500"
+                          : "",
+                      )}
+                    >
                       {t("EndTime")}: {formatDate(item.subscription.expiredAt)}
                       <CreateAppModal application={item} type="renewal">
                         <a