feat: add OSS config tab to site settings (Step 24)

src/view/SiteSettingsView.vue

@@ -2,10 +2,12 @@
 import { onMounted, reactive, ref } from 'vue'
 import { useMetaStore } from '../store'
 import { getMetaController } from '../api/meta-controller'
+import { getSystemConfigController } from '../api/system-config-controller'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 
 const activeTab = ref('basic')
 const formRef = ref<FormInstance>()
+const ossFormRef = ref<FormInstance>()
 
 const { websiteMeta } = useMetaStore()
 
@@ -16,31 +18,44 @@ const form = reactive({
   announcement: '',
 })
 
+const ossForm = reactive({
+  endpoint: '',
+  region: '',
+  bucket: '',
+  accessKey: '',
+  secretKey: '',
+  publicDomain: '',
+})
+
 const rules: FormRules = {
-  title: [
-    { max: 200, message: '网站标题不能超过 200 个字符', trigger: 'blur' },
-  ],
-  logo: [
-    { max: 500, message: 'Logo URL 不能超过 500 个字符', trigger: 'blur' },
-    {
-      pattern: /^(https?):\/\/[^\s$.?#].[^\s]*$/,
-      message: '请输入正确的 URL 格式',
-      trigger: 'blur',
-    },
-  ],
-  statement: [
-    { max: 500, message: '网站声明不能超过 500 个字符', trigger: 'blur' },
-  ],
-  announcement: [
-    { max: 500, message: '网站公告不能超过 500 个字符', trigger: 'blur' },
-  ],
+  title: [{ max: 200, message: '网站标题不能超过 200 个字符', trigger: 'blur' }],
+  logo: [{ max: 500, message: 'Logo URL 不能超过 500 个字符', trigger: 'blur' }],
+  statement: [{ max: 500, message: '网站声明不能超过 500 个字符', trigger: 'blur' }],
+  announcement: [{ max: 500, message: '网站公告不能超过 500 个字符', trigger: 'blur' }],
 }
 
-onMounted(() => {
+const ossSaving = ref(false)
+
+onMounted(async () => {
   form.title = websiteMeta.title
   form.logo = websiteMeta.logo
   form.statement = websiteMeta.statement
   form.announcement = websiteMeta.announcement
+
+  try {
+    const res = await getSystemConfigController().getConfig('oss')
+    if (res.code === 200 && res.data) {
+      const d = res.data as Record<string, unknown>
+      ossForm.endpoint = String(d.endpoint ?? '')
+      ossForm.region = String(d.region ?? '')
+      ossForm.bucket = String(d.bucket ?? '')
+      ossForm.accessKey = String(d.accessKey ?? '')
+      ossForm.secretKey = String(d.secretKey ?? '')
+      ossForm.publicDomain = String(d.publicDomain ?? '')
+    }
+  } catch {
+    // oss config not set yet
+  }
 })
 
 const handleUpload = () => {
@@ -66,11 +81,22 @@ const handleSubmit = async () => {
     ElMessage.error('保存失败')
   }
 }
+
+async function handleOssSave() {
+  ossSaving.value = true
+  try {
+    await getSystemConfigController().updateConfig('oss', { value: ossForm })
+    ElMessage.success('OSS 配置已保存')
+  } catch {
+    ElMessage.error('保存失败')
+  } finally {
+    ossSaving.value = false
+  }
+}
 </script>
 
 <template>
   <div class="site-settings">
-<!--    <h2>网站设置</h2>-->
     <el-tabs v-model="activeTab" class="tabs">
       <el-tab-pane label="网站基础信息" name="basic">
         <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="form">
@@ -98,6 +124,32 @@ const handleSubmit = async () => {
           </el-form-item>
         </el-form>
       </el-tab-pane>
+
+      <el-tab-pane label="OSS 配置" name="oss">
+        <el-form ref="ossFormRef" :model="ossForm" label-width="140px" class="form">
+          <el-form-item label="Endpoint" prop="endpoint">
+            <el-input v-model="ossForm.endpoint" placeholder="例如：s3.amazonaws.com" />
+          </el-form-item>
+          <el-form-item label="Region" prop="region">
+            <el-input v-model="ossForm.region" placeholder="例如：us-east-1" />
+          </el-form-item>
+          <el-form-item label="Bucket" prop="bucket">
+            <el-input v-model="ossForm.bucket" placeholder="存储桶名称" />
+          </el-form-item>
+          <el-form-item label="Access Key" prop="accessKey">
+            <el-input v-model="ossForm.accessKey" placeholder="Access Key" />
+          </el-form-item>
+          <el-form-item label="Secret Key" prop="secretKey">
+            <el-input v-model="ossForm.secretKey" type="password" placeholder="Secret Key" show-password />
+          </el-form-item>
+          <el-form-item label="公开访问域名" prop="publicDomain">
+            <el-input v-model="ossForm.publicDomain" placeholder="例如：https://cdn.example.com" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :loading="ossSaving" @click="handleOssSave">保存 OSS 配置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -106,10 +158,6 @@ const handleSubmit = async () => {
 .site-settings {
   padding: 20px;
 }
-.site-settings h2 {
-  margin: 0 0 20px;
-  font-size: 18px;
-}
 .tabs {
   max-width: 700px;
 }