feat(web): api key & space config ui upgrade

2026-03-30 11:41:18 +08:00
parent 167c915631
commit f9f302dd2a
15 changed files with 256 additions and 114 deletions
--- a/web/src/views/ApiKeyManagement/index.tsx
+++ b/web/src/views/ApiKeyManagement/index.tsx
@@ -6,20 +6,22 @@
 */
 import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, App, Space } from 'antd';
+import { Button, App, Dropdown, Flex } from 'antd';
 import clsx from 'clsx';
 import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
 import copy from 'copy-to-clipboard'
+import type { MenuInfo } from 'rc-menu/lib/interface';

 import type { ApiKey, ApiKeyModalRef } from './types';
 import ApiKeyModal from './components/ApiKeyModal';
 import ApiKeyDetailModal from './components/ApiKeyDetailModal';
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getApiKeyListUrl, deleteApiKey } from '@/api/apiKey';
 import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
 import { formatDateTime } from '@/utils/format';
 import Tag from '@/components/Tag'
 import { maskApiKeys } from '@/utils/apiKeyReplacer';
+import RbDescriptions from '@/components/RbDescriptions';

 /**
 * API Key Management page component
@@ -87,59 +89,85 @@ const ApiKeyManagement: React.FC = () => {
  }
  return (
    <>
-      <div className="rb:flex rb:justify-end rb:mb-3 rb:p-4">
+      <Flex justify="flex-end" className="rb:mb-3!">
        <Button type="primary" onClick={() => handleEdit()}>
          {t('apiKey.createApiKey')}
        </Button>
-      </div>
+      </Flex>

      <PageScrollList<ApiKey, { is_active: boolean; type: string }>
        ref={scrollListRef}
        url={getApiKeyListUrl}
        query={{ is_active: true, type: 'service' }}
-        column={2}
+        column={3}
        renderItem={(apiKeyItem) => {
          return (
-            <RbCard 
-              title={apiKeyItem.name}
-          >
-            {['id', 'is_expired', 'created_at'].map((key, index) => (
-              <div key={key} className={clsx("rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px]", {
-                'rb:mt-3': index !== 0
-              })}>
-                <span className="rb:text-[#5B6167] rb:w-20">{t(`apiKey.${key}`)}</span>
-                <span className="rb:flex-1 rb:text-left rb:py-px rb:rounded rb:font-medium">
-                  { key === 'created_at'
-                    ? formatDateTime(apiKeyItem[key], 'YYYY-MM-DD HH:mm:ss')
-                    : key === 'is_expired'
-                      ? <Tag color={apiKeyItem[key] ? 'error' : 'processing'}>{apiKeyItem[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
-                    : String(apiKeyItem[key as keyof ApiKey])
-                  }
-                </span>
-              </div>
-            ))}
+            <RbCard
+              title={
+                <Flex justify="space-between">
+                  <Flex gap={4} vertical>
+                    {apiKeyItem.name}
+                    <Flex gap={6}>
+                      {apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
+                      {apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
+                      {!apiKeyItem.scopes?.includes('memory') && !apiKeyItem.scopes?.includes('rag') && <div>{t('apiKey.noScopes')}</div>}
+                    </Flex>
+                  </Flex>
+                  <Dropdown
+                    menu={{
+                      items: [
+                        {
+                          key: 'edit',
+                          icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
+                          label: t('common.edit'),
+                          onClick: () => handleEdit(apiKeyItem),
+                        },
+                        {
+                          key: 'view',
+                          icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/eye.svg')]" />,
+                          label: t('common.view'),
+                          onClick: () => handleView(apiKeyItem),
+                        },
+                        {
+                          key: 'delete',
+                          danger: true,
+                          icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
+                          label: t('common.delete'),
+                          onClick: () => handleDelete(apiKeyItem),
+                        },
+                      ]
+                    }}
+                    placement="bottomRight"
+                  >
+                    <div className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
+                  </Dropdown>
+                </Flex>
+              }
+              isNeedTooltip={false}
+              headerClassName="rb:min-h-[78px]!"
+            >
+              <RbDescriptions
+                items={['id', 'is_expired', 'created_at'].map(key => ({
+                  key,
+                  label: t(`apiKey.${key}`),
+                  children: <span className={clsx({
+                    'rb:font-medium': key === 'id',
+                  })}>
+                    {key === 'created_at'
+                      ? formatDateTime(apiKeyItem[key], 'YYYY-MM-DD HH:mm:ss')
+                      : key === 'is_expired'
+                        ? <Tag color={apiKeyItem[key] ? 'error' : 'processing'}>{apiKeyItem[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
+                        : String(apiKeyItem[key as keyof ApiKey])
+                    }
+                  </span>
+                }))}
+              />

-            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[8px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
-              {maskApiKeys(apiKeyItem.api_key)}
-              
-              <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(apiKeyItem.api_key)}>
-                <div 
-                  className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
-                ></div>
-                {t('common.copy')}
-              </Button>
-            </div>
-
-            <Space className="rb:pt-2 rb:min-h-6.25">
-              {apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
-              {apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
-            </Space>
-
-            <div className="rb:mt-5 rb:flex rb:justify-end rb:gap-2.5">
-              <Button icon={<EyeOutlined />} onClick={() => handleView(apiKeyItem)}></Button>
-              <Button icon={<EditOutlined />} onClick={() => handleEdit(apiKeyItem)}></Button>
-              <Button icon={<DeleteOutlined />} onClick={() => handleDelete(apiKeyItem)}></Button>
-            </div>
+              <Flex align="center" justify="space-between" className="rb:h-8! rb:mt-4! rb:py-1! rb:pl-2.5! rb:pr-1! rb:bg-[#F6F6F6] rb:rounded-md rb:leading-5">
+                {maskApiKeys(apiKeyItem.api_key)}
+                
+                <div onClick={() => handleCopy(apiKeyItem.api_key)} className="rb:cursor-pointer rb:rounded-md rb:size-6 rb:bg-[url('@/assets/images/common/copy_dark.svg')] rb:bg-size-[16px_16px] rb:bg-center rb:bg-no-repeat" style={{ backgroundColor: 'rgba(0,0,0,0.08)' }}></div>
+              </Flex>
            </RbCard>
          );
        }}
--- a/web/src/views/MemberManagement/index.tsx
+++ b/web/src/views/MemberManagement/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:42:12 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-26 15:48:43
+ * @Last Modified time: 2026-03-30 11:38:42
 */
 /**
 * Member Management Page
@@ -106,9 +106,10 @@ const MemberManagement: React.FC = () => {

  return (
    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
-      <Flex justify="end" className="rb:px-1! rb:mb-3!">
+      <Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
+        <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('member.memberList')}</div>
        <Button type="primary" onClick={() => handleEdit()}>
-          {t('member.createMember')}
+          + {t('member.createMember')}
        </Button>
      </Flex>
      <Table<Member>
--- a/web/src/views/Prompt/index.tsx
+++ b/web/src/views/Prompt/index.tsx
@@ -188,7 +188,7 @@ const Prompt: FC = () => {

            <RbCard
              title={t('prompt.chatTitle')}
-              headerClassName="rb:min-h-[52px]! rb:font-[MiSans-Bold] rb:gont-bold"
+              headerClassName="rb:min-h-[52px]! rb:font-[MiSans-Bold] rb:font-bold"
              headerType="borderless"
              bodyClassName="rb:px-4! rb:pt-0! rb:pb-3!"
            >
@@ -249,7 +249,7 @@ const Prompt: FC = () => {
            </Flex>
            <RbCard
              title={t('prompt.conversationOptimizationPrompt')}
-              headerClassName="rb:min-h-[52px]! rb:font-[MiSans-Bold] rb:gont-bold"
+              headerClassName="rb:min-h-[52px]! rb:font-[MiSans-Bold] rb:font-bold"
              headerType="borderless"
              bodyClassName="rb:px-4! rb:pt-0! rb:pb-3!"
              extra={
--- a/web/src/views/SpaceConfig/index.tsx
+++ b/web/src/views/SpaceConfig/index.tsx
@@ -1,8 +1,8 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 17:48:03 
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 17:01:59
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-03-30 11:36:24 
 */
 /**
 * Space Configuration Page
@@ -15,9 +15,7 @@ import { useTranslation } from 'react-i18next';

 import type { SpaceConfigData } from './types'
 import { getWorkspaceModels, updateWorkspaceModels } from '@/api/workspaces'
-import { getModelListUrl } from '@/api/models'
-import CustomSelect from '@/components/CustomSelect'
-import RbAlert from '@/components/RbAlert';
+import ModelSelect from '@/components/ModelSelect';

 const SpaceConfig: FC = () => {
  const { t } = useTranslation();
@@ -63,7 +61,9 @@ const SpaceConfig: FC = () => {
  }

  return (
-    <div className="rb:w-250 rb:bg-white rb:rounded-lg rb:py-3 rb:px-3">
+    <div className="rb:bg-white rb:rounded-lg rb:p-6 rb:pb-8">
+      <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('menu.spaceConfig')}</div>
+      <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-2 rb:mb-6">{t('space.configAlert')}</div>
      {pageLoading
        ? <Skeleton active />
        : <Form
@@ -71,55 +71,42 @@ const SpaceConfig: FC = () => {
          layout="vertical"
        >
          <Form.Item 
-            label={t('space.llmModel')} 
+            label={t('space.llmModel')}
+            className="rb:font-medium rb:text-[#212332] rb:mb-6!"
            name="llm"
            rules={[{ required: true, message: t('common.pleaseSelect') }]}
          >
-            <CustomSelect
-              url={getModelListUrl}
-              params={{ type: 'llm', pagesize: 100, is_active: true }}
-              valueKey="id"
-              labelKey="name"
-              hasAll={false}
-              style={{width: '100%'}}
+            <ModelSelect
+              params={{ type: 'llm' }}
+              className="rb:w-137.5!"
            />
          </Form.Item>
          <Form.Item 
-            label={t('space.embeddingModel')} 
+            label={t('space.embeddingModel')}
+            className="rb:font-medium rb:text-[#212332] rb:mb-6!"
            name="embedding"
            rules={[{ required: true, message: t('common.pleaseSelect') }]}
          >
-            <CustomSelect
-              url={getModelListUrl}
-              params={{ type: 'embedding', pagesize: 100, is_active: true }}
-              valueKey="id"
-              labelKey="name"
-              hasAll={false}
-              style={{width: '100%'}}
+            <ModelSelect
+              params={{ type: 'embedding' }}
+              className="rb:w-137.5!"
            />
          </Form.Item>
          <Form.Item 
-            label={t('space.rerankModel')} 
+            label={t('space.rerankModel')}
+            className="rb:font-medium rb:text-[#212332] rb:mb-6!"
            name="rerank"
            rules={[{ required: true, message: t('common.pleaseSelect') }]}
          >
-            <CustomSelect
-              url={getModelListUrl}
-              params={{ type: 'rerank', pagesize: 100, is_active: true }}
-              valueKey="id"
-              labelKey="name"
-              hasAll={false}
-              style={{width: '100%'}}
+            <ModelSelect
+              params={{ type: 'rerank' }}
+              className="rb:w-137.5!"
            />
          </Form.Item>

-          <RbAlert>{t('space.configAlert')}</RbAlert>
-
-          <Form.Item className="rb:text-right">
-            <Button type="primary" className="rb:mt-6" onClick={handleSave} loading={loading}>
-              {t('common.save')}
-            </Button>
-          </Form.Item>
+          <Button type="primary" className="rb:mt-1" onClick={handleSave} loading={loading}>
+            {t('common.save')}
+          </Button>
        </Form>
      }
    </div>
--- a/web/src/views/UserManagement/index.tsx
+++ b/web/src/views/UserManagement/index.tsx
@@ -144,7 +144,7 @@ const UserManagement: React.FC = () => {
  return (
    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
      <Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
-        <div className="rb:gont-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('user.userList')}</div>
+        <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('user.userList')}</div>
        <Button type="primary" onClick={handleCreate}>
          + {t('user.createUser')}
        </Button>