fix: fix model deployment style issues, lint problems, and i18n gaps. (#2556)

* fix: fix model deployment style issues, lint problems, and i18n gaps. * fix: adjust the key not to be displayed on the frontend, tested via the backend. * fix: adjust the sidebar configuration logic to use the default configuration items if they are not defined.
2026-04-28 00:58:37 +00:00 · 2026-01-03 12:37:50 +08:00
parent e8aaed440c
commit 22d0b73d21
29 changed files with 5258 additions and 2653 deletions
--- a/web/src/components/model-deployments/DeploymentAccessGuard.jsx
+++ b/web/src/components/model-deployments/DeploymentAccessGuard.jsx
@@ -46,7 +46,7 @@ const DeploymentAccessGuard = ({
      <div className='mt-[60px] px-2'>
        <Card loading={true} style={{ minHeight: '400px' }}>
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
-            <Text type="secondary">{t('加载设置中...')}</Text>
+            <Text type='secondary'>{t('加载设置中...')}</Text>
          </div>
        </Card>
      </div>
@@ -55,21 +55,21 @@ const DeploymentAccessGuard = ({

  if (!isEnabled) {
    return (
-      <div 
-        className='mt-[60px] px-4' 
+      <div
+        className='mt-[60px] px-4'
        style={{
          minHeight: 'calc(100vh - 60px)',
          display: 'flex',
          alignItems: 'center',
-          justifyContent: 'center'
+          justifyContent: 'center',
        }}
      >
-        <div 
+        <div
          style={{
            maxWidth: '600px',
            width: '100%',
            textAlign: 'center',
-            padding: '0 20px'
+            padding: '0 20px',
          }}
        >
          <Card
@@ -78,45 +78,49 @@ const DeploymentAccessGuard = ({
              borderRadius: '16px',
              border: '1px solid var(--semi-color-border)',
              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
-              background: 'linear-gradient(135deg, var(--semi-color-bg-0) 0%, var(--semi-color-fill-0) 100%)'
+              background:
+                'linear-gradient(135deg, var(--semi-color-bg-0) 0%, var(--semi-color-fill-0) 100%)',
            }}
          >
            {/* 图标区域 */}
            <div style={{ marginBottom: '32px' }}>
-              <div style={{ 
-                display: 'inline-flex', 
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '120px',
-                height: '120px',
-                borderRadius: '50%',
-                background: 'linear-gradient(135deg, rgba(var(--semi-orange-4), 0.15) 0%, rgba(var(--semi-orange-5), 0.1) 100%)',
-                border: '3px solid rgba(var(--semi-orange-4), 0.3)',
-                marginBottom: '24px'
-              }}>
-                <AlertCircle size={56} color="var(--semi-color-warning)" />
+              <div
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: '120px',
+                  height: '120px',
+                  borderRadius: '50%',
+                  background:
+                    'linear-gradient(135deg, rgba(var(--semi-orange-4), 0.15) 0%, rgba(var(--semi-orange-5), 0.1) 100%)',
+                  border: '3px solid rgba(var(--semi-orange-4), 0.3)',
+                  marginBottom: '24px',
+                }}
+              >
+                <AlertCircle size={56} color='var(--semi-color-warning)' />
              </div>
            </div>

            {/* 标题区域 */}
            <div style={{ marginBottom: '24px' }}>
-              <Title 
-                heading={2} 
-                style={{ 
-                  color: 'var(--semi-color-text-0)', 
+              <Title
+                heading={2}
+                style={{
+                  color: 'var(--semi-color-text-0)',
                  margin: '0 0 12px 0',
                  fontSize: '28px',
-                  fontWeight: '700'
+                  fontWeight: '700',
                }}
              >
                {t('模型部署服务未启用')}
              </Title>
-              <Text 
-                style={{ 
-                  fontSize: '18px', 
+              <Text
+                style={{
+                  fontSize: '18px',
                  lineHeight: '1.6',
                  color: 'var(--semi-color-text-1)',
-                  display: 'block'
+                  display: 'block',
                }}
              >
                {t('访问模型部署功能需要先启用 io.net 部署服务')}
@@ -124,75 +128,99 @@ const DeploymentAccessGuard = ({
            </div>

            {/* 配置要求区域 */}
-            <div 
-              style={{ 
-                backgroundColor: 'var(--semi-color-bg-1)', 
-                padding: '24px', 
+            <div
+              style={{
+                backgroundColor: 'var(--semi-color-bg-1)',
+                padding: '24px',
                borderRadius: '12px',
                border: '1px solid var(--semi-color-border)',
                margin: '32px 0',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
              }}
            >
-              <div style={{ 
-                display: 'flex', 
-                alignItems: 'center', 
-                justifyContent: 'center',
-                gap: '12px', 
-                marginBottom: '16px' 
-              }}>
-                <div style={{
+              <div
+                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
-                  width: '32px',
-                  height: '32px',
-                  borderRadius: '8px',
-                  backgroundColor: 'rgba(var(--semi-blue-4), 0.15)'
-                }}>
-                  <Server size={20} color="var(--semi-color-primary)" />
+                  gap: '12px',
+                  marginBottom: '16px',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '32px',
+                    height: '32px',
+                    borderRadius: '8px',
+                    backgroundColor: 'rgba(var(--semi-blue-4), 0.15)',
+                  }}
+                >
+                  <Server size={20} color='var(--semi-color-primary)' />
                </div>
-                <Text 
-                  strong 
-                  style={{ 
-                    fontSize: '16px', 
-                    color: 'var(--semi-color-text-0)' 
+                <Text
+                  strong
+                  style={{
+                    fontSize: '16px',
+                    color: 'var(--semi-color-text-0)',
                  }}
                >
                  {t('需要配置的项目')}
                </Text>
              </div>
-              
-              <div style={{ 
-                display: 'flex', 
-                flexDirection: 'column', 
-                gap: '12px',
-                alignItems: 'flex-start',
-                textAlign: 'left',
-                maxWidth: '320px',
-                margin: '0 auto'
-              }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                  <div style={{
-                    width: '6px',
-                    height: '6px',
-                    borderRadius: '50%',
-                    backgroundColor: 'var(--semi-color-primary)',
-                    flexShrink: 0
-                  }}></div>
-                  <Text style={{ fontSize: '15px', color: 'var(--semi-color-text-1)' }}>
+
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '12px',
+                  alignItems: 'flex-start',
+                  textAlign: 'left',
+                  maxWidth: '320px',
+                  margin: '0 auto',
+                }}
+              >
+                <div
+                  style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
+                >
+                  <div
+                    style={{
+                      width: '6px',
+                      height: '6px',
+                      borderRadius: '50%',
+                      backgroundColor: 'var(--semi-color-primary)',
+                      flexShrink: 0,
+                    }}
+                  ></div>
+                  <Text
+                    style={{
+                      fontSize: '15px',
+                      color: 'var(--semi-color-text-1)',
+                    }}
+                  >
                    {t('启用 io.net 部署开关')}
                  </Text>
                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                  <div style={{
-                    width: '6px',
-                    height: '6px',
-                    borderRadius: '50%',
-                    backgroundColor: 'var(--semi-color-primary)',
-                    flexShrink: 0
-                  }}></div>
-                  <Text style={{ fontSize: '15px', color: 'var(--semi-color-text-1)' }}>
+                <div
+                  style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
+                >
+                  <div
+                    style={{
+                      width: '6px',
+                      height: '6px',
+                      borderRadius: '50%',
+                      backgroundColor: 'var(--semi-color-primary)',
+                      flexShrink: 0,
+                    }}
+                  ></div>
+                  <Text
+                    style={{
+                      fontSize: '15px',
+                      color: 'var(--semi-color-text-1)',
+                    }}
+                  >
                    {t('配置有效的 io.net API Key')}
                  </Text>
                </div>
@@ -201,9 +229,9 @@ const DeploymentAccessGuard = ({

            {/* 操作链接区域 */}
            <div style={{ marginBottom: '20px' }}>
-              <div 
+              <div
                onClick={handleGoToSettings}
-                style={{ 
+                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: '8px',
@@ -216,17 +244,18 @@ const DeploymentAccessGuard = ({
                  background: 'var(--semi-color-fill-0)',
                  border: '1px solid var(--semi-color-border)',
                  transition: 'all 0.2s ease',
-                  textDecoration: 'none'
+                  textDecoration: 'none',
                }}
                onMouseEnter={(e) => {
-                  e.target.style.background = 'var(--semi-color-fill-1)';
-                  e.target.style.transform = 'translateY(-1px)';
-                  e.target.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
+                  e.currentTarget.style.background = 'var(--semi-color-fill-1)';
+                  e.currentTarget.style.transform = 'translateY(-1px)';
+                  e.currentTarget.style.boxShadow =
+                    '0 2px 8px rgba(0, 0, 0, 0.1)';
                }}
                onMouseLeave={(e) => {
-                  e.target.style.background = 'var(--semi-color-fill-0)';
-                  e.target.style.transform = 'translateY(0)';
-                  e.target.style.boxShadow = 'none';
+                  e.currentTarget.style.background = 'var(--semi-color-fill-0)';
+                  e.currentTarget.style.transform = 'translateY(0)';
+                  e.currentTarget.style.boxShadow = 'none';
                }}
              >
                <Settings size={18} />
@@ -235,12 +264,12 @@ const DeploymentAccessGuard = ({
            </div>

            {/* 底部提示 */}
-            <Text 
-              type="tertiary" 
-              style={{ 
+            <Text
+              type='tertiary'
+              style={{
                fontSize: '14px',
                color: 'var(--semi-color-text-2)',
-                lineHeight: '1.5'
+                lineHeight: '1.5',
              }}
            >
              {t('配置完成后刷新页面即可使用模型部署功能')}
@@ -256,7 +285,7 @@ const DeploymentAccessGuard = ({
      <div className='mt-[60px] px-2'>
        <Card loading={true} style={{ minHeight: '400px' }}>
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
-            <Text type="secondary">{t('Checking io.net connection...')}</Text>
+            <Text type='secondary'>{t('正在检查 io.net 连接...')}</Text>
          </div>
        </Card>
      </div>
@@ -265,12 +294,10 @@ const DeploymentAccessGuard = ({

  if (connectionOk === false) {
    const isExpired = connectionError?.type === 'expired';
-    const title = isExpired
-      ? t('API key expired')
-      : t('io.net connection unavailable');
+    const title = isExpired ? t('接口密钥已过期') : t('无法连接 io.net');
    const description = isExpired
-      ? t('The current API key is expired. Please update it in settings.')
-      : t('Unable to connect to io.net with the current configuration.');
+      ? t('当前 API 密钥已过期，请在设置中更新。')
+      : t('当前配置无法连接到 io.net。');
    const detail = connectionError?.message || '';

    return (
@@ -297,7 +324,8 @@ const DeploymentAccessGuard = ({
              borderRadius: '16px',
              border: '1px solid var(--semi-color-border)',
              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
-              background: 'linear-gradient(135deg, var(--semi-color-bg-0) 0%, var(--semi-color-fill-0) 100%)',
+              background:
+                'linear-gradient(135deg, var(--semi-color-bg-0) 0%, var(--semi-color-fill-0) 100%)',
            }}
          >
            <div style={{ marginBottom: '32px' }}>
@@ -309,12 +337,13 @@ const DeploymentAccessGuard = ({
                  width: '120px',
                  height: '120px',
                  borderRadius: '50%',
-                  background: 'linear-gradient(135deg, rgba(var(--semi-red-4), 0.15) 0%, rgba(var(--semi-red-5), 0.1) 100%)',
+                  background:
+                    'linear-gradient(135deg, rgba(var(--semi-red-4), 0.15) 0%, rgba(var(--semi-red-5), 0.1) 100%)',
                  border: '3px solid rgba(var(--semi-red-4), 0.3)',
                  marginBottom: '24px',
                }}
              >
-                <WifiOff size={56} color="var(--semi-color-danger)" />
+                <WifiOff size={56} color='var(--semi-color-danger)' />
              </div>
            </div>

@@ -342,7 +371,7 @@ const DeploymentAccessGuard = ({
              </Text>
              {detail ? (
                <Text
-                  type="tertiary"
+                  type='tertiary'
                  style={{
                    fontSize: '14px',
                    lineHeight: '1.5',
@@ -355,13 +384,19 @@ const DeploymentAccessGuard = ({
              ) : null}
            </div>

-            <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
-              <Button type="primary" icon={<Settings size={18} />} onClick={handleGoToSettings}>
-                {t('Go to settings')}
+            <div
+              style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}
+            >
+              <Button
+                type='primary'
+                icon={<Settings size={18} />}
+                onClick={handleGoToSettings}
+              >
+                {t('前往设置')}
              </Button>
              {onRetry ? (
-                <Button type="tertiary" onClick={onRetry}>
-                  {t('Retry connection')}
+                <Button type='tertiary' onClick={onRetry}>
+                  {t('重试连接')}
                </Button>
              ) : null}
            </div>