Merge pull request #1887 from seefs001/fix/stripe

feat: allow stripe promotion code
2025-09-27 15:46:35 +08:00
parent e81005d104 bd6f4dee73
commit 8482b794ed
62 changed files with 1640 additions and 278 deletions
--- a/web/src/components/common/markdown/MarkdownRenderer.jsx
+++ b/web/src/components/common/markdown/MarkdownRenderer.jsx
@@ -181,8 +181,8 @@ export function PreCode(props) {
                e.preventDefault();
                e.stopPropagation();
                if (ref.current) {
-                  const code =
-                    ref.current.querySelector('code')?.innerText ?? '';
+                  const codeElement = ref.current.querySelector('code');
+                  const code = codeElement?.textContent ?? '';
                  copy(code).then((success) => {
                    if (success) {
                      Toast.success(t('代码已复制到剪贴板'));
--- a/web/src/components/layout/headerbar/UserArea.jsx
+++ b/web/src/components/layout/headerbar/UserArea.jsx
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */

-import React from 'react';
+import React, { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Avatar, Button, Dropdown, Typography } from '@douyinfe/semi-ui';
 import { ChevronDown } from 'lucide-react';
@@ -39,6 +39,7 @@ const UserArea = ({
  navigate,
  t,
 }) => {
+  const dropdownRef = useRef(null);
  if (isLoading) {
    return (
      <SkeletonWrapper
@@ -52,90 +53,93 @@ const UserArea = ({

  if (userState.user) {
    return (
-      <Dropdown
-        position='bottomRight'
-        render={
-          <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
-            <Dropdown.Item
-              onClick={() => {
-                navigate('/console/personal');
-              }}
-              className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
-            >
-              <div className='flex items-center gap-2'>
-                <IconUserSetting
-                  size='small'
-                  className='text-gray-500 dark:text-gray-400'
-                />
-                <span>{t('个人设置')}</span>
-              </div>
-            </Dropdown.Item>
-            <Dropdown.Item
-              onClick={() => {
-                navigate('/console/token');
-              }}
-              className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
-            >
-              <div className='flex items-center gap-2'>
-                <IconKey
-                  size='small'
-                  className='text-gray-500 dark:text-gray-400'
-                />
-                <span>{t('令牌管理')}</span>
-              </div>
-            </Dropdown.Item>
-            <Dropdown.Item
-              onClick={() => {
-                navigate('/console/topup');
-              }}
-              className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
-            >
-              <div className='flex items-center gap-2'>
-                <IconCreditCard
-                  size='small'
-                  className='text-gray-500 dark:text-gray-400'
-                />
-                <span>{t('钱包管理')}</span>
-              </div>
-            </Dropdown.Item>
-            <Dropdown.Item
-              onClick={logout}
-              className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-red-500 dark:hover:!text-white'
-            >
-              <div className='flex items-center gap-2'>
-                <IconExit
-                  size='small'
-                  className='text-gray-500 dark:text-gray-400'
-                />
-                <span>{t('退出')}</span>
-              </div>
-            </Dropdown.Item>
-          </Dropdown.Menu>
-        }
-      >
-        <Button
-          theme='borderless'
-          type='tertiary'
-          className='flex items-center gap-1.5 !p-1 !rounded-full hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2'
+      <div className='relative' ref={dropdownRef}>
+        <Dropdown
+          position='bottomRight'
+          getPopupContainer={() => dropdownRef.current}
+          render={
+            <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
+              <Dropdown.Item
+                onClick={() => {
+                  navigate('/console/personal');
+                }}
+                className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
+              >
+                <div className='flex items-center gap-2'>
+                  <IconUserSetting
+                    size='small'
+                    className='text-gray-500 dark:text-gray-400'
+                  />
+                  <span>{t('个人设置')}</span>
+                </div>
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => {
+                  navigate('/console/token');
+                }}
+                className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
+              >
+                <div className='flex items-center gap-2'>
+                  <IconKey
+                    size='small'
+                    className='text-gray-500 dark:text-gray-400'
+                  />
+                  <span>{t('令牌管理')}</span>
+                </div>
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => {
+                  navigate('/console/topup');
+                }}
+                className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
+              >
+                <div className='flex items-center gap-2'>
+                  <IconCreditCard
+                    size='small'
+                    className='text-gray-500 dark:text-gray-400'
+                  />
+                  <span>{t('钱包管理')}</span>
+                </div>
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={logout}
+                className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-red-500 dark:hover:!text-white'
+              >
+                <div className='flex items-center gap-2'>
+                  <IconExit
+                    size='small'
+                    className='text-gray-500 dark:text-gray-400'
+                  />
+                  <span>{t('退出')}</span>
+                </div>
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          }
        >
-          <Avatar
-            size='extra-small'
-            color={stringToColor(userState.user.username)}
-            className='mr-1'
+          <Button
+            theme='borderless'
+            type='tertiary'
+            className='flex items-center gap-1.5 !p-1 !rounded-full hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2'
          >
-            {userState.user.username[0].toUpperCase()}
-          </Avatar>
-          <span className='hidden md:inline'>
-            <Typography.Text className='!text-xs !font-medium !text-semi-color-text-1 dark:!text-gray-300 mr-1'>
-              {userState.user.username}
-            </Typography.Text>
-          </span>
-          <ChevronDown
-            size={14}
-            className='text-xs text-semi-color-text-2 dark:text-gray-400'
-          />
-        </Button>
-      </Dropdown>
+            <Avatar
+              size='extra-small'
+              color={stringToColor(userState.user.username)}
+              className='mr-1'
+            >
+              {userState.user.username[0].toUpperCase()}
+            </Avatar>
+            <span className='hidden md:inline'>
+              <Typography.Text className='!text-xs !font-medium !text-semi-color-text-1 dark:!text-gray-300 mr-1'>
+                {userState.user.username}
+              </Typography.Text>
+            </span>
+            <ChevronDown
+              size={14}
+              className='text-xs text-semi-color-text-2 dark:text-gray-400'
+            />
+          </Button>
+        </Dropdown>
+      </div>
    );
  } else {
    const showRegisterButton = !isSelfUseMode;
--- a/web/src/components/settings/PaymentSetting.jsx
+++ b/web/src/components/settings/PaymentSetting.jsx
@@ -45,6 +45,7 @@ const PaymentSetting = () => {
    StripePriceId: '',
    StripeUnitPrice: 8.0,
    StripeMinTopUp: 1,
+    StripePromotionCodesEnabled: false,
  });

  let [loading, setLoading] = useState(false);
--- a/web/src/components/settings/SystemSetting.jsx
+++ b/web/src/components/settings/SystemSetting.jsx
@@ -29,6 +29,7 @@ import {
  TagInput,
  Spin,
  Card,
+  Radio,
 } from '@douyinfe/semi-ui';
 const { Text } = Typography;
 import {
@@ -44,6 +45,7 @@ import { useTranslation } from 'react-i18next';
 const SystemSetting = () => {
  const { t } = useTranslation();
  let [inputs, setInputs] = useState({
+    
    PasswordLoginEnabled: '',
    PasswordRegisterEnabled: '',
    EmailVerificationEnabled: '',
@@ -87,6 +89,15 @@ const SystemSetting = () => {
    LinuxDOClientSecret: '',
    LinuxDOMinimumTrustLevel: '',
    ServerAddress: '',
+    // SSRF防护配置
+    'fetch_setting.enable_ssrf_protection': true,
+    'fetch_setting.allow_private_ip': '',
+    'fetch_setting.domain_filter_mode': false, // true 白名单，false 黑名单
+    'fetch_setting.ip_filter_mode': false, // true 白名单，false 黑名单
+    'fetch_setting.domain_list': [],
+    'fetch_setting.ip_list': [],
+    'fetch_setting.allowed_ports': [],
+    'fetch_setting.apply_ip_filter_for_domain': false,
  });

  const [originInputs, setOriginInputs] = useState({});
@@ -98,6 +109,11 @@ const SystemSetting = () => {
    useState(false);
  const [linuxDOOAuthEnabled, setLinuxDOOAuthEnabled] = useState(false);
  const [emailToAdd, setEmailToAdd] = useState('');
+  const [domainFilterMode, setDomainFilterMode] = useState(true);
+  const [ipFilterMode, setIpFilterMode] = useState(true);
+  const [domainList, setDomainList] = useState([]);
+  const [ipList, setIpList] = useState([]);
+  const [allowedPorts, setAllowedPorts] = useState([]);

  const getOptions = async () => {
    setLoading(true);
@@ -113,6 +129,37 @@ const SystemSetting = () => {
          case 'EmailDomainWhitelist':
            setEmailDomainWhitelist(item.value ? item.value.split(',') : []);
            break;
+          case 'fetch_setting.allow_private_ip':
+          case 'fetch_setting.enable_ssrf_protection':
+          case 'fetch_setting.domain_filter_mode':
+          case 'fetch_setting.ip_filter_mode':
+          case 'fetch_setting.apply_ip_filter_for_domain':
+            item.value = toBoolean(item.value);
+            break;
+          case 'fetch_setting.domain_list':
+            try {
+              const domains = item.value ? JSON.parse(item.value) : [];
+              setDomainList(Array.isArray(domains) ? domains : []);
+            } catch (e) {
+              setDomainList([]);
+            }
+            break;
+          case 'fetch_setting.ip_list':
+            try {
+              const ips = item.value ? JSON.parse(item.value) : [];
+              setIpList(Array.isArray(ips) ? ips : []);
+            } catch (e) {
+              setIpList([]);
+            }
+            break;
+          case 'fetch_setting.allowed_ports':
+            try {
+              const ports = item.value ? JSON.parse(item.value) : [];
+              setAllowedPorts(Array.isArray(ports) ? ports : []);
+            } catch (e) {
+              setAllowedPorts(['80', '443', '8080', '8443']);
+            }
+            break;
          case 'PasswordLoginEnabled':
          case 'PasswordRegisterEnabled':
          case 'EmailVerificationEnabled':
@@ -140,6 +187,13 @@ const SystemSetting = () => {
      });
      setInputs(newInputs);
      setOriginInputs(newInputs);
+      // 同步模式布尔到本地状态
+      if (typeof newInputs['fetch_setting.domain_filter_mode'] !== 'undefined') {
+        setDomainFilterMode(!!newInputs['fetch_setting.domain_filter_mode']);
+      }
+      if (typeof newInputs['fetch_setting.ip_filter_mode'] !== 'undefined') {
+        setIpFilterMode(!!newInputs['fetch_setting.ip_filter_mode']);
+      }
      if (formApiRef.current) {
        formApiRef.current.setValues(newInputs);
      }
@@ -276,6 +330,46 @@ const SystemSetting = () => {
    }
  };

+  const submitSSRF = async () => {
+    const options = [];
+
+    // 处理域名过滤模式与列表
+    options.push({
+      key: 'fetch_setting.domain_filter_mode',
+      value: domainFilterMode,
+    });
+    if (Array.isArray(domainList)) {
+      options.push({
+        key: 'fetch_setting.domain_list',
+        value: JSON.stringify(domainList),
+      });
+    }
+
+    // 处理IP过滤模式与列表
+    options.push({
+      key: 'fetch_setting.ip_filter_mode',
+      value: ipFilterMode,
+    });
+    if (Array.isArray(ipList)) {
+      options.push({
+        key: 'fetch_setting.ip_list',
+        value: JSON.stringify(ipList),
+      });
+    }
+
+    // 处理端口配置
+    if (Array.isArray(allowedPorts)) {
+      options.push({
+        key: 'fetch_setting.allowed_ports',
+        value: JSON.stringify(allowedPorts),
+      });
+    }
+
+    if (options.length > 0) {
+      await updateOptions(options);
+    }
+  };
+
  const handleAddEmail = () => {
    if (emailToAdd && emailToAdd.trim() !== '') {
      const domain = emailToAdd.trim();
@@ -587,6 +681,179 @@ const SystemSetting = () => {
                </Form.Section>
              </Card>

+              <Card>
+                <Form.Section text={t('SSRF防护设置')}>
+                  <Text extraText={t('SSRF防护详细说明')}>
+                    {t('配置服务器端请求伪造(SSRF)防护，用于保护内网资源安全')}
+                  </Text>
+                  <Row
+                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+                  >
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
+                      <Form.Checkbox
+                        field='fetch_setting.enable_ssrf_protection'
+                        noLabel
+                        extraText={t('SSRF防护开关详细说明')}
+                        onChange={(e) =>
+                          handleCheckboxChange('fetch_setting.enable_ssrf_protection', e)
+                        }
+                      >
+                        {t('启用SSRF防护（推荐开启以保护服务器安全）')}
+                      </Form.Checkbox>
+                    </Col>
+                  </Row>
+                  
+                  <Row
+                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+                    style={{ marginTop: 16 }}
+                  >
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
+                      <Form.Checkbox
+                        field='fetch_setting.allow_private_ip'
+                        noLabel
+                        extraText={t('私有IP访问详细说明')}
+                        onChange={(e) =>
+                          handleCheckboxChange('fetch_setting.allow_private_ip', e)
+                        }
+                      >
+                        {t('允许访问私有IP地址（127.0.0.1、192.168.x.x等内网地址）')}
+                      </Form.Checkbox>
+                    </Col>
+                  </Row>
+                  
+                  <Row
+                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+                    style={{ marginTop: 16 }}
+                  >
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
+                      <Form.Checkbox
+                        field='fetch_setting.apply_ip_filter_for_domain'
+                        noLabel
+                        extraText={t('域名IP过滤详细说明')}
+                        onChange={(e) =>
+                          handleCheckboxChange('fetch_setting.apply_ip_filter_for_domain', e)
+                        }
+                        style={{ marginBottom: 8 }}
+                      >
+                        {t('对域名启用 IP 过滤（实验性）')}
+                      </Form.Checkbox>
+                      <Text strong>
+                        {t(domainFilterMode ? '域名白名单' : '域名黑名单')}
+                      </Text>
+                      <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                        {t('支持通配符格式，如：example.com, *.api.example.com')}
+                      </Text>
+                      <Radio.Group
+                        type='button'
+                        value={domainFilterMode ? 'whitelist' : 'blacklist'}
+                        onChange={(val) => {
+                          const selected = val && val.target ? val.target.value : val;
+                          const isWhitelist = selected === 'whitelist';
+                          setDomainFilterMode(isWhitelist);
+                          setInputs(prev => ({
+                            ...prev,
+                            'fetch_setting.domain_filter_mode': isWhitelist,
+                          }));
+                        }}
+                        style={{ marginBottom: 8 }}
+                      >
+                        <Radio value='whitelist'>{t('白名单')}</Radio>
+                        <Radio value='blacklist'>{t('黑名单')}</Radio>
+                      </Radio.Group>
+                      <TagInput
+                        value={domainList}
+                        onChange={(value) => {
+                          setDomainList(value);
+                          // 触发Form的onChange事件
+                          setInputs(prev => ({
+                            ...prev,
+                            'fetch_setting.domain_list': value
+                          }));
+                        }}
+                        placeholder={t('输入域名后回车，如：example.com')}
+                        style={{ width: '100%' }}
+                      />
+                    </Col>
+                  </Row>
+
+                  <Row
+                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+                    style={{ marginTop: 16 }}
+                  >
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
+                      <Text strong>
+                        {t(ipFilterMode ? 'IP白名单' : 'IP黑名单')}
+                      </Text>
+                      <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                        {t('支持CIDR格式，如：8.8.8.8, 192.168.1.0/24')}
+                      </Text>
+                      <Radio.Group
+                        type='button'
+                        value={ipFilterMode ? 'whitelist' : 'blacklist'}
+                        onChange={(val) => {
+                          const selected = val && val.target ? val.target.value : val;
+                          const isWhitelist = selected === 'whitelist';
+                          setIpFilterMode(isWhitelist);
+                          setInputs(prev => ({
+                            ...prev,
+                            'fetch_setting.ip_filter_mode': isWhitelist,
+                          }));
+                        }}
+                        style={{ marginBottom: 8 }}
+                      >
+                        <Radio value='whitelist'>{t('白名单')}</Radio>
+                        <Radio value='blacklist'>{t('黑名单')}</Radio>
+                      </Radio.Group>
+                      <TagInput
+                        value={ipList}
+                        onChange={(value) => {
+                          setIpList(value);
+                          // 触发Form的onChange事件
+                          setInputs(prev => ({
+                            ...prev,
+                            'fetch_setting.ip_list': value
+                          }));
+                        }}
+                        placeholder={t('输入IP地址后回车，如：8.8.8.8')}
+                        style={{ width: '100%' }}
+                      />
+                    </Col>
+                  </Row>
+
+                  <Row
+                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+                    style={{ marginTop: 16 }}
+                  >
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
+                      <Text strong>{t('允许的端口')}</Text>
+                      <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                        {t('支持单个端口和端口范围，如：80, 443, 8000-8999')}
+                      </Text>
+                      <TagInput
+                        value={allowedPorts}
+                        onChange={(value) => {
+                          setAllowedPorts(value);
+                          // 触发Form的onChange事件
+                          setInputs(prev => ({
+                            ...prev,
+                            'fetch_setting.allowed_ports': value
+                          }));
+                        }}
+                        placeholder={t('输入端口后回车，如：80 或 8000-8999')}
+                        style={{ width: '100%' }}
+                      />
+                      <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                        {t('端口配置详细说明')}
+                      </Text>
+                    </Col>
+                  </Row>
+
+                  <Button onClick={submitSSRF} style={{ marginTop: 16 }}>
+                    {t('更新SSRF防护设置')}
+                  </Button>
+                </Form.Section>
+              </Card>
+
              <Card>
                <Form.Section text={t('配置登录注册')}>
                  <Row
--- a/web/src/components/settings/personal/cards/NotificationSettings.jsx
+++ b/web/src/components/settings/personal/cards/NotificationSettings.jsx
@@ -44,6 +44,7 @@ import CodeViewer from '../../../playground/CodeViewer';
 import { StatusContext } from '../../../../context/Status';
 import { UserContext } from '../../../../context/User';
 import { useUserPermissions } from '../../../../hooks/common/useUserPermissions';
+import { useSidebar } from '../../../../hooks/common/useSidebar';

 const NotificationSettings = ({
  t,
@@ -97,6 +98,9 @@ const NotificationSettings = ({
    isSidebarModuleAllowed,
  } = useUserPermissions();

+  // 使用useSidebar钩子获取刷新方法
+  const { refreshUserConfig } = useSidebar();
+
  // 左侧边栏设置处理函数
  const handleSectionChange = (sectionKey) => {
    return (checked) => {
@@ -132,6 +136,9 @@ const NotificationSettings = ({
      });
      if (res.data.success) {
        showSuccess(t('侧边栏设置保存成功'));
+
+        // 刷新useSidebar钩子中的用户配置，实现实时更新
+        await refreshUserConfig();
      } else {
        showError(res.data.message);
      }
@@ -334,7 +341,7 @@ const NotificationSettings = ({
                loading={sidebarLoading}
                className='!rounded-lg'
              >
-                {t('保存边栏设置')}
+                {t('保存设置')}
              </Button>
            </>
          ) : (
--- a/web/src/components/table/channels/modals/EditChannelModal.jsx
+++ b/web/src/components/table/channels/modals/EditChannelModal.jsx
@@ -85,6 +85,26 @@ const REGION_EXAMPLE = {
  'claude-3-5-sonnet-20240620': 'europe-west1',
 };

+// 支持并且已适配通过接口获取模型列表的渠道类型
+const MODEL_FETCHABLE_TYPES = new Set([
+  1,
+  4,
+  14,
+  34,
+  17,
+  26,
+  24,
+  47,
+  25,
+  20,
+  23,
+  31,
+  35,
+  40,
+  42,
+  48,
+]);
+
 function type2secretPrompt(type) {
  // inputs.type === 15 ? '按照如下格式输入：APIKey|SecretKey' : (inputs.type === 18 ? '按照如下格式输入：APPID|APISecret|APIKey' : '请输入渠道对应的鉴权密钥')
  switch (type) {
@@ -1872,13 +1892,15 @@ const EditChannelModal = (props) => {
                        >
                          {t('填入所有模型')}
                        </Button>
-                        <Button
-                          size='small'
-                          type='tertiary'
-                          onClick={() => fetchUpstreamModelList('models')}
-                        >
-                          {t('获取模型列表')}
-                        </Button>
+                        {MODEL_FETCHABLE_TYPES.has(inputs.type) && (
+                          <Button
+                            size='small'
+                            type='tertiary'
+                            onClick={() => fetchUpstreamModelList('models')}
+                          >
+                            {t('获取模型列表')}
+                          </Button>
+                        )}
                        <Button
                          size='small'
                          type='warning'
--- a/web/src/components/table/channels/modals/MultiKeyManageModal.jsx
+++ b/web/src/components/table/channels/modals/MultiKeyManageModal.jsx
@@ -247,6 +247,32 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
    }
  };

+  // Delete a specific key
+  const handleDeleteKey = async (keyIndex) => {
+    const operationId = `delete_${keyIndex}`;
+    setOperationLoading((prev) => ({ ...prev, [operationId]: true }));
+
+    try {
+      const res = await API.post('/api/channel/multi_key/manage', {
+        channel_id: channel.id,
+        action: 'delete_key',
+        key_index: keyIndex,
+      });
+
+      if (res.data.success) {
+        showSuccess(t('密钥已删除'));
+        await loadKeyStatus(currentPage, pageSize); // Reload current page
+        onRefresh && onRefresh(); // Refresh parent component
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('删除密钥失败'));
+    } finally {
+      setOperationLoading((prev) => ({ ...prev, [operationId]: false }));
+    }
+  };
+
  // Handle page change
  const handlePageChange = (page) => {
    setCurrentPage(page);
@@ -384,7 +410,7 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
      title: t('操作'),
      key: 'action',
      fixed: 'right',
-      width: 100,
+      width: 150,
      render: (_, record) => (
        <Space>
          {record.status === 1 ? (
@@ -406,6 +432,21 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
              {t('启用')}
            </Button>
          )}
+          <Popconfirm
+            title={t('确定要删除此密钥吗？')}
+            content={t('此操作不可撤销，将永久删除该密钥')}
+            onConfirm={() => handleDeleteKey(record.index)}
+            okType={'danger'}
+            position={'topRight'}
+          >
+            <Button
+              type='danger'
+              size='small'
+              loading={operationLoading[`delete_${record.index}`]}
+            >
+              {t('删除')}
+            </Button>
+          </Popconfirm>
        </Space>
      ),
    },
--- a/web/src/components/table/mj-logs/MjLogsFilters.jsx
+++ b/web/src/components/table/mj-logs/MjLogsFilters.jsx
@@ -21,6 +21,8 @@ import React from 'react';
 import { Button, Form } from '@douyinfe/semi-ui';
 import { IconSearch } from '@douyinfe/semi-icons';

+import { DATE_RANGE_PRESETS } from '../../../constants/console.constants';
+
 const MjLogsFilters = ({
  formInitValues,
  setFormApi,
@@ -54,6 +56,11 @@ const MjLogsFilters = ({
              showClear
              pure
              size='small'
+              presets={DATE_RANGE_PRESETS.map(preset => ({
+                text: t(preset.text),
+                start: preset.start(),
+                end: preset.end()
+              }))}
            />
          </div>

--- a/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
+++ b/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
@@ -35,8 +35,9 @@ import {
  Sparkles,
 } from 'lucide-react';
 import {
-  TASK_ACTION_GENERATE,
-  TASK_ACTION_TEXT_GENERATE,
+  TASK_ACTION_FIRST_TAIL_GENERATE,
+  TASK_ACTION_GENERATE, TASK_ACTION_REFERENCE_GENERATE,
+  TASK_ACTION_TEXT_GENERATE
 } from '../../../constants/common.constant';
 import { CHANNEL_OPTIONS } from '../../../constants/channel.constants';

@@ -111,6 +112,18 @@ const renderType = (type, t) => {
          {t('文生视频')}
        </Tag>
      );
+    case TASK_ACTION_FIRST_TAIL_GENERATE:
+      return (
+        <Tag color='blue' shape='circle' prefixIcon={<Sparkles size={14} />}>
+          {t('首尾生视频')}
+        </Tag>
+      );
+    case TASK_ACTION_REFERENCE_GENERATE:
+      return (
+        <Tag color='blue' shape='circle' prefixIcon={<Sparkles size={14} />}>
+          {t('参照生视频')}
+        </Tag>
+      );
    default:
      return (
        <Tag color='white' shape='circle' prefixIcon={<HelpCircle size={14} />}>
@@ -343,7 +356,9 @@ export const getTaskLogsColumns = ({
        // 仅当为视频生成任务且成功，且 fail_reason 是 URL 时显示可点击链接
        const isVideoTask =
          record.action === TASK_ACTION_GENERATE ||
-          record.action === TASK_ACTION_TEXT_GENERATE;
+          record.action === TASK_ACTION_TEXT_GENERATE ||
+          record.action === TASK_ACTION_FIRST_TAIL_GENERATE ||
+          record.action === TASK_ACTION_REFERENCE_GENERATE;
        const isSuccess = record.status === 'SUCCESS';
        const isUrl = typeof text === 'string' && /^https?:\/\//.test(text);
        if (isSuccess && isVideoTask && isUrl) {
--- a/web/src/components/table/task-logs/TaskLogsFilters.jsx
+++ b/web/src/components/table/task-logs/TaskLogsFilters.jsx
@@ -21,6 +21,8 @@ import React from 'react';
 import { Button, Form } from '@douyinfe/semi-ui';
 import { IconSearch } from '@douyinfe/semi-icons';

+import { DATE_RANGE_PRESETS } from '../../../constants/console.constants';
+
 const TaskLogsFilters = ({
  formInitValues,
  setFormApi,
@@ -54,6 +56,11 @@ const TaskLogsFilters = ({
              showClear
              pure
              size='small'
+              presets={DATE_RANGE_PRESETS.map(preset => ({
+                text: t(preset.text),
+                start: preset.start(),
+                end: preset.end()
+              }))}
            />
          </div>

--- a/web/src/components/table/usage-logs/UsageLogsFilters.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsFilters.jsx
@@ -21,6 +21,8 @@ import React from 'react';
 import { Button, Form } from '@douyinfe/semi-ui';
 import { IconSearch } from '@douyinfe/semi-icons';

+import { DATE_RANGE_PRESETS } from '../../../constants/console.constants';
+
 const LogsFilters = ({
  formInitValues,
  setFormApi,
@@ -55,6 +57,11 @@ const LogsFilters = ({
              showClear
              pure
              size='small'
+              presets={DATE_RANGE_PRESETS.map(preset => ({
+                text: t(preset.text),
+                start: preset.start(),
+                end: preset.end()
+              }))}
            />
          </div>