From dadc2cf329e294a3b1eccf56e0393daf898e4006 Mon Sep 17 00:00:00 2001 From: "Apple\\Apple" Date: Sun, 25 May 2025 12:53:00 +0800 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8Frefactor(EditChannel=20&=20Ed?= =?UTF-8?q?itTagModal):=20enhance=20UI/UX=20and=20optimize=20code=20struct?= =?UTF-8?q?ure?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: None - UI Improvements: - Add gradient backgrounds to card headers - Enhance visual hierarchy with decorative elements - Improve button styles with rounded corners and icons - Standardize input field sizes and styles - Add consistent border radius to components - Code Optimizations: - Remove unused imports (IconHelpCircle, IconKey, IconPlus) - Remove unused showWarning import - Remove unused loadChannelModels import - Remove unused useRef and useParams hooks - Clean up whitespace and formatting - Style Enhancements: - Convert static colors to gradient backgrounds - Add floating circle decorations for visual interest - Improve text contrast with white text on gradient backgrounds - Add semi-transparent white backgrounds to icons - Standardize card header layouts - Accessibility: - Improve text contrast ratios - Maintain consistent visual hierarchy - Add relative positioning for better overlay handling This refactor focuses on modernizing the UI while maintaining all existing functionality. The changes are purely presentational and do not affect the component's behavior. --- web/src/i18n/locales/en.json | 27 +- web/src/index.css | 3 +- web/src/pages/Channel/EditChannel.js | 1471 ++++++++++++------------- web/src/pages/Channel/EditTagModal.js | 343 +++--- 4 files changed, 973 insertions(+), 871 deletions(-) diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json index 67f46e5f..178e3229 100644 --- a/web/src/i18n/locales/en.json +++ b/web/src/i18n/locales/en.json @@ -1115,7 +1115,7 @@ "请输入组织org-xxx": "Please enter organization org-xxx", "默认测试模型": "Default Test Model", "不填则为模型列表第一个": "First model in list if empty", - "是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道：": "Auto-disable (only effective when auto-disable is enabled). When turned off, this channel will not be automatically disabled:", + "是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道": "Auto-disable (only effective when auto-disable is enabled). When turned off, this channel will not be automatically disabled", "状态码复写（仅影响本地判断，不修改返回到上游的状态码）": "Status Code Override (only affects local judgment, does not modify status code returned upstream)", "此项可选，用于复写返回的状态码，比如将claude渠道的400错误复写为500（用于重试），请勿滥用该功能，例如：": "Optional, used to override returned status codes, e.g. rewriting Claude channel's 400 error to 500 (for retry). Do not abuse this feature. Example:", "渠道标签": "Channel Tag", @@ -1492,5 +1492,28 @@ "共": "Total", "确定要测试所有通道吗？": "Are you sure you want to test all channels?", "确定要更新所有已启用通道余额吗？": "Are you sure you want to update the balance of all enabled channels?", - "已选择 ${count} 个渠道": "Selected ${count} channels" + "已选择 ${count} 个渠道": "Selected ${count} channels", + "渠道的基本配置信息": "Channel basic configuration information", + "API 配置": "API Configuration", + "API 地址和相关配置": "API URL and related configuration", + "模型配置": "Model Configuration", + "模型选择和映射设置": "Model selection and mapping settings", + "高级设置": "Advanced Settings", + "渠道的高级配置选项": "Advanced channel configuration options", + "设置说明": "Setting Description", + "此项可选，用于配置渠道特定设置，为一个 JSON 字符串，例如：": "This is optional, used to configure channel-specific settings, as a JSON string, for example:", + "此项可选，用于覆盖请求参数。不支持覆盖 stream 参数。为一个 JSON 字符串，例如：": "This is optional, used to override request parameters. Does not support overriding the stream parameter. As a JSON string, for example:", + "编辑标签": "Edit Tag", + "标签信息": "Tag Information", + "标签的基本配置": "Tag basic configuration", + "所有编辑均为覆盖操作，留空则不更改": "All edits are overwrite operations, leaving blank will not change", + "标签名称": "Tag Name", + "请选择该渠道所支持的模型，留空则不更改": "Please select the models supported by the channel, leaving blank will not change", + "此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，留空则不更改": "This is optional, used to modify the model name in the request body, as a JSON string, the key is the model name in the request, the value is the model name to be replaced, leaving blank will not change", + "清空重定向": "Clear redirect", + "不更改": "Not change", + "用户分组配置": "User group configuration", + "请选择可以使用该渠道的分组，留空则不更改": "Please select the groups that can use this channel, leaving blank will not change", + "启用全部": "Enable all", + "禁用全部": "Disable all" } \ No newline at end of file diff --git a/web/src/index.css b/web/src/index.css index a9bcc233..64906180 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -272,6 +272,7 @@ code { /* min-height: 100%;*/ /*}*/ +.semi-tag-closable, .semi-datepicker-range-input { border-radius: 9999px; -} \ No newline at end of file +} diff --git a/web/src/pages/Channel/EditChannel.js b/web/src/pages/Channel/EditChannel.js index f7fab057..810df9dc 100644 --- a/web/src/pages/Channel/EditChannel.js +++ b/web/src/pages/Channel/EditChannel.js @@ -1,5 +1,5 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; +import React, { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { API, @@ -7,17 +7,14 @@ import { showError, showInfo, showSuccess, - showWarning, verifyJSON, } from '../../helpers'; import { CHANNEL_OPTIONS } from '../../constants'; -import Title from '@douyinfe/semi-ui/lib/es/typography/title'; import { SideSheet, Space, Spin, Button, - Tooltip, Input, Typography, Select, @@ -26,9 +23,20 @@ import { Banner, Modal, ImagePreview, + Card, + Tag, } from '@douyinfe/semi-ui'; -import { getChannelModels, loadChannelModels } from '../../components/utils.js'; -import { IconHelpCircle } from '@douyinfe/semi-icons'; +import { getChannelModels } from '../../components/utils.js'; +import { + IconSave, + IconClose, + IconServer, + IconSetting, + IconCode, + IconGlobe, +} from '@douyinfe/semi-icons'; + +const { Text, Title } = Typography; const MODEL_MAPPING_EXAMPLE = { 'gpt-3.5-turbo': 'gpt-3.5-turbo-0125', @@ -307,7 +315,7 @@ const EditChannel = (props) => { fetchModels().then(); fetchGroups().then(); if (isEdit) { - loadChannel().then(() => {}); + loadChannel().then(() => { }); } else { setInputs(originInputs); let localModels = getChannelModels(inputs.type); @@ -403,27 +411,44 @@ const EditChannel = (props) => { return ( <> - {isEdit ? t('更新渠道信息') : t('创建新的渠道')} - + + {isEdit ? t('编辑') : t('新建')} + + {isEdit ? t('更新渠道信息') : t('创建新的渠道')} + + } - headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} - bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} + headerStyle={{ + borderBottom: '1px solid var(--semi-color-border)', + padding: '24px' + }} + bodyStyle={{ + backgroundColor: 'var(--semi-color-bg-0)', + padding: '0' + }} visible={props.visible} + width={isMobile() ? '100%' : 600} footer={ -
+
- @@ -432,735 +457,709 @@ const EditChannel = (props) => { } closeIcon={null} onCancel={() => handleCancel()} - width={isMobile() ? '100%' : 600} > -
- {t('类型')}： -
- { - handleInputChange('base_url', value); - }} - value={inputs.base_url} - autoComplete='new-password' - /> -
- {t('默认 API 版本')}： -
- { - handleInputChange('other', value); - }} - value={inputs.other} - autoComplete='new-password' - /> - - )} - {inputs.type === 8 && ( - <> -
- -
-
- - {t('完整的 Base URL，支持变量{model}')}： - -
- { - handleInputChange('base_url', value); - }} - value={inputs.base_url} - autoComplete='new-password' - /> - - )} - {inputs.type === 37 && ( - <> -
- -
- - )} -
- {t('名称')}： -
- { - handleInputChange('name', value); - }} - value={inputs.name} - autoComplete='new-password' - /> - {inputs.type !== 3 && - inputs.type !== 8 && - inputs.type !== 22 && - inputs.type !== 36 && - inputs.type !== 45 && ( - <> -
- {t('API地址')}： +
+ +
+
+
+
- - { - handleInputChange('base_url', value); - }} - value={inputs.base_url} - autoComplete='new-password' +
+ +
+
+ {t('基本信息')} +
{t('渠道的基本配置信息')}
+
+
+ +
+
+ {t('类型')} +