page/src/components/dashboard/ConfigSection.vue

<script setup>
import { useDashboardStore } from '../../stores/dashboard'
import { ref, watch } from 'vue'
import BasicConfig from './config/BasicConfig.vue'
import FeaturesConfig from './config/FeaturesConfig.vue'
import VersionInfo from './config/VersionInfo.vue'
import VertexConfig from './config/VertexConfig.vue'

const dashboardStore = useDashboardStore()
const isExpanded = ref(true)

// Refs for child components
const basicConfigRef = ref(null)
const featuresConfigRef = ref(null)

// Shared password and messaging
const sharedPassword = ref('')
const overallErrorMsg = ref('')
const overallSuccessMsg = ref('')
const isOverallSaving = ref(false)

// 配置项解释
const configExplanations = {
  maxRequestsPerMinute: '限制每个IP每分钟可以发送的最大请求数量，防止API被滥用',
  maxRequestsPerDayPerIp: '限制每个IP每天可以发送的最大请求数量，防止API被滥用',
  currentTime: '当前服务器时间，用于同步和调试',
  fakeStreaming: '是否启用假流式响应，模拟流式返回效果',
  fakeStreamingInterval: '假流式响应的间隔时间（秒），控制返回速度',
  randomString: '是否启用随机字符串生成，用于伪装请求',
  randomStringLength: '随机字符串的长度，用于伪装请求',
  concurrentRequests: '默认并发请求数量，控制同时处理的请求数',
  increaseConcurrentOnFailure: '请求失败时增加的并发数，提高成功率',
  maxConcurrentRequests: '最大并发请求数量，防止系统过载',
  localVersion: '当前系统版本号',
  remoteVersion: '远程仓库最新版本号',
  hasUpdate: '是否有可用更新',
  searchMode: '是否启用联网搜索功能',
  searchPrompt: '联网搜索提示',
  enableVertexExpress: '是否启用Vertex Express模式',
  vertexExpressApiKey: 'Vertex Express API密钥',
  googleCredentialsJson: 'Google Credentials JSON'
}

// 显示解释的工具提示
const showTooltip = ref(false)
const tooltipText = ref('')
const tooltipPosition = ref({ x: 0, y: 0 })

function showExplanation(text, event) {
  tooltipText.value = text
  tooltipPosition.value = {
    x: event.clientX,
    y: event.clientY
  }
  showTooltip.value = true
}

function hideTooltip() {
  showTooltip.value = false
}

// 获取折叠图标类
const getFoldIconClass = (isVisible) => {
  return isVisible ? 'fold-icon rotated' : 'fold-icon'
}

// 保存所有配置 (Basic 和 Features)
async function handleSaveAllConfigs() {
  if (!sharedPassword.value) {
    overallErrorMsg.value = '请输入管理密码'
    overallSuccessMsg.value = ''
    return
  }

  isOverallSaving.value = true
  overallErrorMsg.value = ''
  overallSuccessMsg.value = ''
  let errors = []
  let successes = []

  try {
    if (basicConfigRef.value && typeof basicConfigRef.value.saveComponentConfigs === 'function') {
      const result = await basicConfigRef.value.saveComponentConfigs(sharedPassword.value)
      if (result.success) {
        successes.push(result.message)
      } else {
        errors.push(result.message)
      }
    } else {
      // console.warn('BasicConfig ref or saveComponentConfigs method not available');
    }

    if (featuresConfigRef.value && typeof featuresConfigRef.value.saveComponentConfigs === 'function') {
      const result = await featuresConfigRef.value.saveComponentConfigs(sharedPassword.value)
      if (result.success) {
        successes.push(result.message)
      } else {
        errors.push(result.message)
      }
    } else {
      // console.warn('FeaturesConfig ref or saveComponentConfigs method not available');
    }

    if (errors.length > 0) {
      overallErrorMsg.value = errors.join('; ')
    } 
    if (successes.length > 0 && errors.length === 0) {
      overallSuccessMsg.value = '所有配置已成功保存: ' + successes.join('; ')
    } else if (successes.length > 0 && errors.length > 0) {
      overallSuccessMsg.value = '部分配置已保存: ' + successes.join('; ') + '. 部分失败.'
    }
    
    // Do not clear password after save attempt

  } catch (error) {
    // This catch block might be redundant if children handle their errors and return status
    overallErrorMsg.value = error.message || '保存过程中发生意外错误'
  } finally {
    isOverallSaving.value = false
  }
}

// 监听数据刷新, 如果密码不清空则不需要重置认证
// watch(() => dashboardStore.isRefreshing, (newValue, oldValue) => {
//   if (oldValue === true && newValue === false) {
//     // hasAuthenticated.value = false // No longer used
//   }
// });
</script>

<template>
  <div class="info-box">
    <!-- Vertex模式只显示版本信息和Vertex配置 -->
    <div v-if="dashboardStore.status.enableVertex">
      <VertexConfig />
      <VersionInfo />
    </div>
    
    <!-- 非Vertex模式显示环境配置和折叠内容 -->
    <div v-else>
      <h3 class="section-title fold-header" @click="isExpanded = !isExpanded">
        ⚙️ 环境配置
        <span :class="getFoldIconClass(isExpanded)">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </span>
      </h3>
      
      <!-- 默认显示的简略配置 (只读) -->
      <div v-if="!isExpanded" class="stats-grid">
        <div class="stat-card">
          <div class="stat-value">{{ dashboardStore.config.maxRequestsPerMinute }}</div>
          <div class="stat-label">每分钟请求限制</div>
          <!-- 编辑按钮已移除 -->
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ dashboardStore.config.concurrentRequests }}</div>
          <div class="stat-label">并发请求数</div>
          <!-- 编辑按钮已移除 -->
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ dashboardStore.config.currentTime }}</div>
          <div class="stat-label">当前服务器时间</div>
        </div>
      </div>
      
      <!-- 展开后显示的所有配置项 -->
      <transition name="fold">
        <div v-if="isExpanded" class="fold-content">
          <BasicConfig ref="basicConfigRef" />
          <FeaturesConfig ref="featuresConfigRef" />


          <!-- Shared Save Section -->
          <div class="shared-save-section">
            <div class="password-input-group">
              <label for="sharedPasswordInput" class="shared-password-label">管理密码</label>
              <input 
                type="password" 
                id="sharedPasswordInput"
                v-model="sharedPassword" 
                placeholder="请输入管理密码以保存更改" 
                class="config-input"
              >
            </div>
            <button 
              class="save-all-button" 
              @click="handleSaveAllConfigs" 
              :disabled="isOverallSaving"
            >
              {{ isOverallSaving ? '保存中...' : '保存基本与功能配置' }}
            </button>
          </div>
          
          <!-- Overall Messages -->
          <div v-if="overallErrorMsg" class="overall-error-message">{{ overallErrorMsg }}</div>
          <div v-if="overallSuccessMsg" class="overall-success-message">{{ overallSuccessMsg }}</div>

        </div>
      </transition>
      <VersionInfo />
    </div>
    
    <!-- 旧的编辑对话框和工具提示已移除 -->

  </div>
</template>

<style scoped>
.info-box {
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
  opacity: 0.8;
}

/* 移动端优化 - 减小外边距 */
@media (max-width: 768px) {
  .info-box {
    margin-bottom: 12px;
    padding: 15px 10px;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .info-box {
    margin-bottom: 8px;
    padding: 12px 8px;
    border-radius: var(--radius-md);
  }
}

.section-title {
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  font-weight: 600;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--gradient-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 15px;
  margin-bottom: 20px;
}

/* 移动端优化 - 保持三栏但减小间距 */
@media (max-width: 768px) {
  .stats-grid {
    gap: 8px;
  }
}

.stat-card {
  background-color: var(--stats-item-bg);
  padding: 10px 15px;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-secondary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--button-primary);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--button-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  margin-bottom: 5px;
  position: relative;
  display: inline-block;
}

.stat-label {
  font-size: 14px;
  color: var(--color-text);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.stat-card:hover .stat-label {
  opacity: 1;
  color: var(--color-heading);
}

/* 编辑按钮样式 */
.edit-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.3s ease;
  padding: 4px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.edit-btn:hover {
  opacity: 1;
  transform: scale(1.1) rotate(15deg);
  background-color: var(--color-background-mute);
  color: var(--button-primary);
}

/* 编辑对话框样式 */
.edit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.edit-dialog-content {
  background-color: var(--card-background);
  border-radius: var(--radius-xl);
  padding: 25px;
  width: 90%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
  animation: dialogAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dialogAppear {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.edit-dialog-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
}

.edit-dialog-content h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--color-heading);
  font-size: 1.3rem;
  position: relative;
  padding-bottom: 10px;
}

.edit-dialog-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--gradient-primary);
}

.edit-field {
  margin-bottom: 20px;
}

.edit-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
}

.edit-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: 14px;
  transition: all 0.3s ease;
}

.edit-input:focus {
  outline: none;
  border-color: var(--button-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.text-area {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}

.boolean-selector {
  display: flex;
  gap: 15px;
  margin-top: 12px;
}

.boolean-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background-color: var(--stats-item-bg);
  transition: all 0.3s ease;
  border: 1px solid var(--color-border);
}

.boolean-option:hover {
  background-color: var(--color-background-mute);
  transform: translateY(-2px);
}

.boolean-option input[type="radio"] {
  accent-color: var(--button-primary);
}

.password-field {
  margin-top: 15px;
  position: relative;
}

.password-field label {
  margin-bottom: 8px;
  display: block;
}

.edit-error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 8px;
  padding-left: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.edit-error::before {
  content: '⚠️';
  font-size: 14px;
}

.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cancel-btn, .save-btn {
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.cancel-btn {
  background-color: var(--button-secondary);
  border: 1px solid var(--color-border);
  color: var(--button-secondary-text);
}

.save-btn {
  background: var(--gradient-primary);
  border: none;
  color: white;
  box-shadow: var(--shadow-sm);
}

.cancel-btn:hover {
  background-color: var(--button-secondary-hover);
  transform: translateY(-2px);
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 工具提示样式 */
.tooltip {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  max-width: 250px;
  z-index: 1000;
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: tooltipAppear 0.2s ease;
}

@keyframes tooltipAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -90%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
}

/* 移动端优化 - 更紧凑的卡片 */
@media (max-width: 768px) {
  .stat-card {
    padding: 8px 8px;
  }
  
  .stat-value {
    font-size: 16px;
  }
  
  .stat-label {
    font-size: 12px;
    margin-top: 2px;
  }
  
  .edit-btn {
    top: 3px;
    right: 3px;
    padding: 2px;
  }
  
  .edit-dialog-content {
    padding: 20px;
  }
  
  .boolean-selector {
    flex-direction: column;
    gap: 8px;
  }
}

/* 小屏幕手机进一步优化 */
@media (max-width: 480px) {
  .stat-card {
    padding: 6px 6px;
  }
  
  .stat-value {
    font-size: 14px;
  }
  
  .stat-label {
    font-size: 11px;
    margin-top: 1px;
  }
  
  .tooltip {
    max-width: 200px;
    font-size: 10px;
  }
  
  .edit-dialog-content {
    padding: 15px;
  }
  
  .edit-dialog-content h3 {
    font-size: 1.1rem;
  }
  
  .edit-input {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .cancel-btn, .save-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* 折叠动画和UI优化 */
.fold-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: var(--radius-lg);
  padding: 10px 15px;
  background-color: var(--stats-item-bg);
  border: 1px solid var(--card-border);
  margin-bottom: 15px;
}

.fold-header:hover {
  background-color: var(--color-background-mute);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.fold-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  color: var(--button-primary);
}

.fold-icon.rotated {
  transform: rotate(180deg);
}

.fold-content {
  overflow: hidden;
}

/* 折叠动画 */
.fold-enter-active,
.fold-leave-active {
  transition: all 0.3s ease;
  max-height: 1000px;
  opacity: 1;
  overflow: hidden;
}

.fold-enter-from,
.fold-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .fold-header {
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  .fold-header {
    padding: 6px 10px;
  }
}

/* Shared Save Section Styles */
.shared-save-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.password-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.shared-password-label {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}

.config-input { /* Re-using existing class for consistency */
  width: 100%;
  padding: 10px 14px; /* Adjusted padding */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: 14px;
  transition: all 0.3s ease;
}

.config-input:focus {
  outline: none;
  border-color: var(--button-primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.save-all-button {
  padding: 10px 18px;
  background: var(--button-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  text-align: center;
}

.save-all-button:hover {
  background: var(--button-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.save-all-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.overall-error-message {
  color: var(--color-error);
  margin-top: 10px;
  font-size: 14px;
  padding: 10px;
  background-color: var(--color-error-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-error);
}

.overall-success-message {
  color: var(--color-success);
  margin-top: 10px;
  font-size: 14px;
  padding: 10px;
  background-color: var(--color-success-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-success);
}
</style>