feat: add ins & index action buttons.

feat: build dump creation button. perf: improved index list card style. feat: add ins form modal drag tag style. perf: improved lang selector style. feat: init some function pages with their header links.
riccox · Oct 10, 2024 · 98d01cd · 98d01cd
1 parent bc0eb85
commit 98d01cd
Show file tree

Hide file tree

Showing 20 changed files with 310 additions and 54 deletions.
diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx
@@ -7,19 +7,48 @@ export const DashBreadcrumb = () => {
   const { t } = useTranslation();
 
   const insRoute = matchRoute({ to: '/ins/$insID', fuzzy: true }) as unknown as { insID: string };
+  const insKeysRoute = matchRoute({ to: '/ins/$insID/keys', fuzzy: true }) as unknown as { insID: string };
+  const insTasksRoute = matchRoute({ to: '/ins/$insID/tasks', fuzzy: true }) as unknown as { insID: string };
   const indexRoute = matchRoute({ to: '/ins/$insID/index/$indexUID', fuzzy: true }) as unknown as { indexUID: string };
+  const indexDocsRoute = matchRoute({ to: '/ins/$insID/index/$indexUID/documents', fuzzy: true }) as unknown as {
+    indexUID: string;
+  };
+  const indexSettingRoute = matchRoute({ to: '/ins/$insID/index/$indexUID/setting', fuzzy: true }) as unknown as {
+    indexUID: string;
+  };
+  const fieldDistributionRoute = matchRoute({
+    to: '/ins/$insID/index/$indexUID/fieldDistribution',
+    fuzzy: true,
+  }) as unknown as { indexUID: string };
 
   return (
     <Breadcrumbs color="primary" variant="light">
       <BreadcrumbItem href="/">🏠</BreadcrumbItem>
       {insRoute && (
         <BreadcrumbItem href={`/ins/${insRoute.insID}`}>{`${t('common:instance')} #${insRoute.insID}`}</BreadcrumbItem>
       )}
+      {insKeysRoute && <BreadcrumbItem href={`/ins/${insRoute.insID}/keys`}>{`${t('common:keys')}`}</BreadcrumbItem>}
+      {insTasksRoute && <BreadcrumbItem href={`/ins/${insRoute.insID}/tasks`}>{`${t('common:tasks')}`}</BreadcrumbItem>}
       {indexRoute && (
         <BreadcrumbItem
           href={`/ins/${insRoute.insID}/index/${indexRoute.indexUID}`}
         >{`${t('common:indexes')}: ${indexRoute.indexUID}`}</BreadcrumbItem>
       )}
+      {indexDocsRoute && (
+        <BreadcrumbItem
+          href={`/ins/${insRoute.insID}/index/${indexRoute.indexUID}/documents`}
+        >{`${t('documents')}`}</BreadcrumbItem>
+      )}
+      {indexSettingRoute && (
+        <BreadcrumbItem
+          href={`/ins/${insRoute.insID}/index/${indexRoute.indexUID}/setting`}
+        >{`${t('settings')}`}</BreadcrumbItem>
+      )}
+      {fieldDistributionRoute && (
+        <BreadcrumbItem
+          href={`/ins/${insRoute.insID}/index/${indexRoute.indexUID}/fieldDistribution`}
+        >{`${t('index:fieldDistribution.label')}`}</BreadcrumbItem>
+      )}
     </Breadcrumbs>
   );
 };
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -154,7 +154,7 @@ export const Header: FC<Props> = ({ client, className }) => {
           {t('status.label')}: {health ? t('status.available') : t('unknown')}
         </span>
 
-        <LangSelector className="font-medium" />
+        <LangSelector className="font-semibold" />
 
         <HoverCard withinPortal shadow="lg" radius={'lg'} transitionProps={{ transition: 'fade' }}>
           <HoverCard.Target>

diff --git a/src/components/IndexList.tsx b/src/components/IndexList.tsx
@@ -2,7 +2,7 @@
 import { useCurrentInstance } from '@/hooks/useCurrentInstance';
 import { useInstanceStats } from '@/hooks/useInstanceStats';
 import { Pagination, Tag, Tooltip } from '@douyinfe/semi-ui';
-import { Card, CardBody } from '@nextui-org/react';
+import { Card, CardBody, CardHeader } from '@nextui-org/react';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
@@ -70,7 +70,7 @@ export const IndexList: FC<Props> = ({ className = '', client }) => {
           <div className="text-2xl font-bold">{t('common:indexes')}</div>
           <CreateIndexButton afterMutation={() => query.refetch()} />
         </div>
-        <div className="grid grid-cols-6 gap-6 place-content-start place-items-start p-6">
+        <div className="grid grid-cols-6 gap-5 place-content-start place-items-start py-3">
           {listData?.map((item) => {
             return (
               <Card
@@ -79,10 +79,14 @@ export const IndexList: FC<Props> = ({ className = '', client }) => {
                 to={item.href}
                 fullWidth
                 shadow="sm"
-                className="col-span-3 laptop:col-span-2 hover:no-underline h-fit hover:outline-primary-400/80 hover:outline outline-2"
+                className=" group col-span-3 laptop:col-span-2 hover:no-underline h-fit hover:outline-primary-400/80 outline outline-2 outline-transparent"
               >
+                <CardHeader>
+                  <div className="text-xl px-1 group-hover:underline underline-primary underline-offset-3">
+                    {item.uid}
+                  </div>
+                </CardHeader>
                 <CardBody className="space-y-2">
-                  <h1 className="text-large">{item.uid}</h1>
                   <div className="flex">
                     <Tag size="small" color="cyan" className={`mr-auto`}>
                       {t('count')}: {item.numberOfDocuments ?? 0}

diff --git a/src/components/InsHeader.tsx b/src/components/InsHeader.tsx
@@ -7,7 +7,7 @@ export const Header = () => {
     <header className="px-4 py-2 bg-white border-b border-neutral-600/20 overflow-hidden flex items-center gap-4 flex-shrink-0">
       <Logo className="size-8" />
       <DashBreadcrumb />
-      <LangSelector className="ml-auto text-small" />
+      <LangSelector className="ml-auto text-small font-semibold" />
     </header>
   );
 };
diff --git a/src/components/dump.tsx b/src/components/dump.tsx
@@ -0,0 +1,33 @@
+import { useCurrentInstance } from '@/hooks/useCurrentInstance';
+import { useMeiliClient } from '@/hooks/useMeiliClient';
+import { Button } from '@nextui-org/react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showTaskSubmitNotification } from '@/utils/text';
+import { Modal } from '@douyinfe/semi-ui';
+
+export const DumpButton = () => {
+  const { t } = useTranslation('instance');
+  const currentInstance = useCurrentInstance();
+  const client = useMeiliClient();
+
+  const onClickDump = useCallback(() => {
+    Modal.confirm({
+      title: t('instance:dump.dialog.title'),
+      centered: true,
+      content: <p>{t('instance:dump.dialog.tip', { name: currentInstance.name })}</p>,
+      onOk: async () => {
+        showTaskSubmitNotification(await client.createDump());
+      },
+      okText: t('confirm'),
+      cancelText: t('cancel'),
+    });
+  }, [client, currentInstance.name, t]);
+
+  return (
+    <Button onClick={onClickDump} color="default" variant="light" size="sm">
+      <div className="i-lucide:archive-restore w-1em h-1em"></div>
+      Dump
+    </Button>
+  );
+};
diff --git a/src/components/instanceFormModal.tsx b/src/components/instanceFormModal.tsx
@@ -82,7 +82,7 @@ export const InsFormModal: FC<Props> = ({ className = '', children, type = 'crea
       <Drawer.Trigger data-state={visible ? 'open' : 'closed'}>{children}</Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Overlay className="fixed inset-0 bg-black/40" />
-        <Drawer.Content className={cn(className, 'bg-zinc-100 rounded-t-6 mt-24 fixed bottom-0 left-0 right-0')}>
+        <Drawer.Content className={cn(className, 'bg-zinc-100 rounded-t-6 mt-24 fixed bottom-0 left-0 right-0 z-10')}>
           <form
             className={`flex flex-col gap-y-6 w-full p-4 bg-white flex-1 rounded-t-6`}
             onSubmit={form.handleSubmit(onSubmitInstance)}

diff --git a/src/components/lang.tsx b/src/components/lang.tsx
@@ -1,9 +1,10 @@
 'use client';
 import { FC } from 'react';
-import { SUPPORTED_LANGUAGE, SUPPORTED_LANGUAGE_LOCALIZED } from '../utils/i18n';
-import clsx from 'clsx';
+import { SUPPORTED_LANGUAGE, SUPPORTED_LANGUAGE_LOCALIZED, lang2Locale } from '../utils/i18n';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/cn';
+
 interface Props {
   className?: string;
 }
@@ -14,14 +15,15 @@ export const LangSelector: FC<Props> = ({ className = '' }) => {
   return (
     <select
       value={i18n.resolvedLanguage}
-      className={clsx(className, 'w-fit outline-none bg-transparent')}
+      className={cn(className, 'w-fit outline-none bg-transparent')}
       onChange={(ev) => {
         const l = ev.target.value as SUPPORTED_LANGUAGE;
         i18n.changeLanguage(l);
       }}
     >
       {_.entries(SUPPORTED_LANGUAGE_LOCALIZED).map(([k, v]) => (
         <option value={k} key={v}>
+          {lang2Locale(k as SUPPORTED_LANGUAGE)}
           {v}
         </option>
       ))}

diff --git a/src/locales/en/common.json b/src/locales/en/common.json
@@ -16,6 +16,7 @@
   "edit": "Edit",
   "system": "System",
   "instance": "Instance",
+  "documents": "Documents",
   "settings": "Settings",
   "tasks": "Tasks",
   "indexes": "Indexes",

diff --git a/src/locales/en/index.json b/src/locales/en/index.json
@@ -1,7 +1,7 @@
 {
   "fieldDistribution": {
     "label": "Field Distribution",
-    "subtitle": "Go to official docs about “Field Distribution”"
+    "subtitle": "Click me to go for official docs about “Field Distribution”"
   },
   "count": "Count",
   "add_documents": "Add documents",

diff --git a/src/locales/zh/common.json b/src/locales/zh/common.json
@@ -16,6 +16,7 @@
   "edit": "编辑",
   "system": "系统",
   "instance": "实例",
+  "documents": "文档",
   "settings": "设置",
   "tasks": "任务",
   "indexes": "索引",

diff --git a/src/locales/zh/index.json b/src/locales/zh/index.json
@@ -1,7 +1,7 @@
 {
   "fieldDistribution": {
     "label": "字段分布",
-    "subtitle": "转到有关 Field Distribution 的官方文档"
+    "subtitle": "点我转到有关 Field Distribution 的官方文档"
   },
   "count": "文档计数",
   "add_documents": "添加文档",

diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
@@ -17,7 +17,12 @@ import { Route as WarningImport } from './routes/warning'
 import { Route as IndexImport } from './routes/index'
 import { Route as InsInsIDLayoutImport } from './routes/ins/$insID/_layout'
 import { Route as InsInsIDLayoutIndexImport } from './routes/ins/$insID/_layout/index'
+import { Route as InsInsIDLayoutTasksImport } from './routes/ins/$insID/_layout/tasks'
+import { Route as InsInsIDLayoutKeysImport } from './routes/ins/$insID/_layout/keys'
 import { Route as InsInsIDLayoutIndexIndexUIDIndexImport } from './routes/ins/$insID/_layout/index/$indexUID/index'
+import { Route as InsInsIDLayoutIndexIndexUIDSettingImport } from './routes/ins/$insID/_layout/index/$indexUID/setting'
+import { Route as InsInsIDLayoutIndexIndexUIDFieldDistributionImport } from './routes/ins/$insID/_layout/index/$indexUID/fieldDistribution'
+import { Route as InsInsIDLayoutIndexIndexUIDDocumentsImport } from './routes/ins/$insID/_layout/index/$indexUID/documents'
 
 // Create Virtual Routes
 
@@ -50,12 +55,40 @@ const InsInsIDLayoutIndexRoute = InsInsIDLayoutIndexImport.update({
   getParentRoute: () => InsInsIDLayoutRoute,
 } as any)
 
+const InsInsIDLayoutTasksRoute = InsInsIDLayoutTasksImport.update({
+  path: '/tasks',
+  getParentRoute: () => InsInsIDLayoutRoute,
+} as any)
+
+const InsInsIDLayoutKeysRoute = InsInsIDLayoutKeysImport.update({
+  path: '/keys',
+  getParentRoute: () => InsInsIDLayoutRoute,
+} as any)
+
 const InsInsIDLayoutIndexIndexUIDIndexRoute =
   InsInsIDLayoutIndexIndexUIDIndexImport.update({
     path: '/index/$indexUID/',
     getParentRoute: () => InsInsIDLayoutRoute,
   } as any)
 
+const InsInsIDLayoutIndexIndexUIDSettingRoute =
+  InsInsIDLayoutIndexIndexUIDSettingImport.update({
+    path: '/index/$indexUID/setting',
+    getParentRoute: () => InsInsIDLayoutRoute,
+  } as any)
+
+const InsInsIDLayoutIndexIndexUIDFieldDistributionRoute =
+  InsInsIDLayoutIndexIndexUIDFieldDistributionImport.update({
+    path: '/index/$indexUID/fieldDistribution',
+    getParentRoute: () => InsInsIDLayoutRoute,
+  } as any)
+
+const InsInsIDLayoutIndexIndexUIDDocumentsRoute =
+  InsInsIDLayoutIndexIndexUIDDocumentsImport.update({
+    path: '/index/$indexUID/documents',
+    getParentRoute: () => InsInsIDLayoutRoute,
+  } as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -88,13 +121,48 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof InsInsIDLayoutImport
       parentRoute: typeof InsInsIDRoute
     }
+    '/ins/$insID/_layout/keys': {
+      id: '/ins/$insID/_layout/keys'
+      path: '/keys'
+      fullPath: '/ins/$insID/keys'
+      preLoaderRoute: typeof InsInsIDLayoutKeysImport
+      parentRoute: typeof InsInsIDLayoutImport
+    }
+    '/ins/$insID/_layout/tasks': {
+      id: '/ins/$insID/_layout/tasks'
+      path: '/tasks'
+      fullPath: '/ins/$insID/tasks'
+      preLoaderRoute: typeof InsInsIDLayoutTasksImport
+      parentRoute: typeof InsInsIDLayoutImport
+    }
     '/ins/$insID/_layout/': {
       id: '/ins/$insID/_layout/'
       path: '/'
       fullPath: '/ins/$insID/'
       preLoaderRoute: typeof InsInsIDLayoutIndexImport
       parentRoute: typeof InsInsIDLayoutImport
     }
+    '/ins/$insID/_layout/index/$indexUID/documents': {
+      id: '/ins/$insID/_layout/index/$indexUID/documents'
+      path: '/index/$indexUID/documents'
+      fullPath: '/ins/$insID/index/$indexUID/documents'
+      preLoaderRoute: typeof InsInsIDLayoutIndexIndexUIDDocumentsImport
+      parentRoute: typeof InsInsIDLayoutImport
+    }
+    '/ins/$insID/_layout/index/$indexUID/fieldDistribution': {
+      id: '/ins/$insID/_layout/index/$indexUID/fieldDistribution'
+      path: '/index/$indexUID/fieldDistribution'
+      fullPath: '/ins/$insID/index/$indexUID/fieldDistribution'
+      preLoaderRoute: typeof InsInsIDLayoutIndexIndexUIDFieldDistributionImport
+      parentRoute: typeof InsInsIDLayoutImport
+    }
+    '/ins/$insID/_layout/index/$indexUID/setting': {
+      id: '/ins/$insID/_layout/index/$indexUID/setting'
+      path: '/index/$indexUID/setting'
+      fullPath: '/ins/$insID/index/$indexUID/setting'
+      preLoaderRoute: typeof InsInsIDLayoutIndexIndexUIDSettingImport
+      parentRoute: typeof InsInsIDLayoutImport
+    }
     '/ins/$insID/_layout/index/$indexUID/': {
       id: '/ins/$insID/_layout/index/$indexUID/'
       path: '/index/$indexUID'
@@ -112,7 +180,12 @@ export const routeTree = rootRoute.addChildren({
   WarningRoute,
   InsInsIDRoute: InsInsIDRoute.addChildren({
     InsInsIDLayoutRoute: InsInsIDLayoutRoute.addChildren({
+      InsInsIDLayoutKeysRoute,
+      InsInsIDLayoutTasksRoute,
       InsInsIDLayoutIndexRoute,
+      InsInsIDLayoutIndexIndexUIDDocumentsRoute,
+      InsInsIDLayoutIndexIndexUIDFieldDistributionRoute,
+      InsInsIDLayoutIndexIndexUIDSettingRoute,
       InsInsIDLayoutIndexIndexUIDIndexRoute,
     }),
   }),
@@ -147,14 +220,39 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "ins/$insID/_layout.tsx",
       "parent": "/ins/$insID",
       "children": [
+        "/ins/$insID/_layout/keys",
+        "/ins/$insID/_layout/tasks",
         "/ins/$insID/_layout/",
+        "/ins/$insID/_layout/index/$indexUID/documents",
+        "/ins/$insID/_layout/index/$indexUID/fieldDistribution",
+        "/ins/$insID/_layout/index/$indexUID/setting",
         "/ins/$insID/_layout/index/$indexUID/"
       ]
     },
+    "/ins/$insID/_layout/keys": {
+      "filePath": "ins/$insID/_layout/keys.tsx",
+      "parent": "/ins/$insID/_layout"
+    },
+    "/ins/$insID/_layout/tasks": {
+      "filePath": "ins/$insID/_layout/tasks.tsx",
+      "parent": "/ins/$insID/_layout"
+    },
     "/ins/$insID/_layout/": {
       "filePath": "ins/$insID/_layout/index.tsx",
       "parent": "/ins/$insID/_layout"
     },
+    "/ins/$insID/_layout/index/$indexUID/documents": {
+      "filePath": "ins/$insID/_layout/index/$indexUID/documents.tsx",
+      "parent": "/ins/$insID/_layout"
+    },
+    "/ins/$insID/_layout/index/$indexUID/fieldDistribution": {
+      "filePath": "ins/$insID/_layout/index/$indexUID/fieldDistribution.tsx",
+      "parent": "/ins/$insID/_layout"
+    },
+    "/ins/$insID/_layout/index/$indexUID/setting": {
+      "filePath": "ins/$insID/_layout/index/$indexUID/setting.tsx",
+      "parent": "/ins/$insID/_layout"
+    },
     "/ins/$insID/_layout/index/$indexUID/": {
       "filePath": "ins/$insID/_layout/index/$indexUID/index.tsx",
       "parent": "/ins/$insID/_layout"