File size: 4,219 Bytes
d0dd276
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<script setup>
import { ref } from 'vue'
import BasicConfig from './BasicConfig.vue'
import FeaturesConfig from './FeaturesConfig.vue'
import VertexConfig from './VertexConfig.vue'

const basicConfigRef = ref(null)
const featuresConfigRef = ref(null)
const managementPassword = ref('')
const saveMessage = ref('')
const messageType = ref('') // 'success' or 'error'

async function handleSaveAllConfigs() {
  saveMessage.value = ''
  messageType.value = ''

  if (!managementPassword.value) {
    saveMessage.value = '请输入管理密码'
    messageType.value = 'error'
    return
  }

  const results = []
  let allSucceeded = true

  if (basicConfigRef.value) {
    const result = await basicConfigRef.value.saveComponentConfigs(managementPassword.value)
    results.push(result)
    if (!result.success) {
      allSucceeded = false
    }
  }

  if (featuresConfigRef.value) {
    const result = await featuresConfigRef.value.saveComponentConfigs(managementPassword.value)
    results.push(result)
    if (!result.success) {
      allSucceeded = false
    }
  }

  const messages = results.map(r => r.message).filter(m => m).join('\n');
  saveMessage.value = messages || (allSucceeded ? '所有配置已成功保存。' : '部分配置保存失败。');
  messageType.value = allSucceeded ? 'success' : 'error';

  // 清空密码
  managementPassword.value = ''
}
</script>

<template>
  <div class="config-section">
    <BasicConfig ref="basicConfigRef" />
    <FeaturesConfig ref="featuresConfigRef" />
    
    <div class="shared-save-area">
      <div class="password-input-group">
        <input 
          type="password" 
          v-model="managementPassword" 
          placeholder="请输入管理密码"
          class="management-password-input"
        />
      </div>
      <button @click="handleSaveAllConfigs" class="save-all-button">保存所有配置</button>
    </div>

    <div v-if="saveMessage" :class="['save-message', messageType]">
      <p v-for="(line, index) in saveMessage.split('\n')" :key="index">{{ line }}</p>
    </div>
    
    <VertexConfig />
  </div>
</template>

<style scoped>
.config-section {
  padding: 20px;
  background-color: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 800px;
  margin: 20px auto;
}

.shared-save-area {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 输入框和按钮之间的间距 */
  padding: 15px;
  background-color: var(--stats-item-bg);
  border-radius: var(--radius-md);
  margin-top: 20px;
  margin-bottom: 15px;
  border: 1px solid var(--card-border);
}

.password-input-group {
  flex-grow: 1; /* 让密码输入框占据更多空间 */
}

.management-password-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-input-bg);
  color: var(--color-text);
  font-size: 14px;
}

.management-password-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 20px;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  white-space: nowrap; /* 防止按钮文字换行 */
}

.save-all-button:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-sm);
}

.save-message {
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: 14px;
  text-align: left;
  white-space: pre-wrap; /* 保留换行符 */
}

.save-message.success {
  background-color: rgba(74, 222, 128, 0.1);
  color: #34d399;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.save-message.error {
  background-color: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

@media (max-width: 768px) {
  .config-section {
    padding: 15px;
  }
  .shared-save-area {
    flex-direction: column; /* 在小屏幕上堆叠 */
    align-items: stretch; /* 在小屏幕上拉伸项目以填充宽度 */
  }
  .save-all-button {
    width: 100%; /* 按钮宽度也100% */
  }
}
</style>