add settings.

src/oj/user/setting.vue

@@ -1,67 +1,80 @@
 <script setup lang="ts">
-import { isDesktop } from "~/shared/composables/breakpoints"
+import { UploadCustomRequestOptions, UploadFileInfo } from "naive-ui"
 import { useUserStore } from "~/shared/store/user"
+import { updateProfile, uploadAvatar } from "oj/api"
 
 const userStore = useUserStore()
+const message = useMessage()
 
-function choose() {}
+async function beforeUpload(data: {
+  file: UploadFileInfo
+  fileList: UploadFileInfo[]
+}) {
+  if (!data.file.file) return false
+  if (data.file.file.size > 2 * 1024 * 1024) {
+    message.warning("图片太大啦！不能超过 2 MB 啊")
+    return false
+  }
+  return true
+}
+
+async function upload({ file }: UploadCustomRequestOptions) {
+  try {
+    await uploadAvatar(file.file!)
+    message.success("上传成功")
+    userStore.getMyProfile()
+  } catch (err) {
+    message.error("上传失败")
+  }
+}
+
+async function saveProfile() {
+  try {
+    await updateProfile({
+      real_name: userStore.profile?.real_name ?? "",
+      mood: userStore.profile?.mood ?? "",
+    })
+    message.success("更改成功")
+  } catch (err) {
+    message.error("更改失败")
+  }
+}
 </script>
 <template>
-  <n-grid v-if="userStore.profile" :x-gap="20" :cols="isDesktop ? 3 : 1">
-    <n-gi>
-      <h3>个人信息设置</h3>
-      <n-form>
-        <n-avatar
-          round
-          :size="120"
-          :src="userStore.profile.avatar"
-          alt="头像"
-        />
-        <n-form-item>
-          <n-button @click="choose">更换头像</n-button>
-        </n-form-item>
-        <n-form-item label="真名">
-          <n-input />
-        </n-form-item>
-        <n-form-item label="骚话">
-          <n-input />
-        </n-form-item>
-        <n-button>更改信息</n-button>
-      </n-form>
-    </n-gi>
-    <n-gi>
-      <h3>更改密码</h3>
-      <n-form>
-        <n-form-item label="旧密码">
-          <n-input type="password" />
-        </n-form-item>
-        <n-form-item label="新密码">
-          <n-input type="password" />
-        </n-form-item>
-        <n-form-item label="确认新密码">
-          <n-input type="password" />
-        </n-form-item>
-        <n-button>更改密码</n-button>
-      </n-form>
-    </n-gi>
-    <n-gi>
-      <h3>更改邮箱</h3>
-      <n-form>
-        <n-form-item label="当前密码">
-          <n-input type="password" />
-        </n-form-item>
-        <n-form-item label="旧邮箱">
-          <n-input />
-        </n-form-item>
-        <n-form-item label="新邮箱">
-          <n-input />
-        </n-form-item>
-        <n-button>更改邮箱</n-button>
-      </n-form>
-    </n-gi>
-  </n-grid>
+  <n-space class="container" vertical v-if="userStore.profile">
+    <h3>个人信息设置</h3>
+    <n-form>
+      <n-avatar round :size="120" :src="userStore.profile.avatar" alt="头像" />
+      <n-form-item label="">
+        <n-upload
+          :show-file-list="false"
+          accept="image/*"
+          @before-upload="beforeUpload"
+          :custom-request="upload"
+        >
+          <n-button>上传头像</n-button>
+        </n-upload>
+      </n-form-item>
+      <n-form-item label="真名">
+        <n-input v-model:value="userStore.profile.real_name" />
+      </n-form-item>
+      <n-form-item label="骚话">
+        <n-input v-model:value="userStore.profile.mood" />
+      </n-form-item>
+      <n-button
+        @click="saveProfile"
+        :disabled="!userStore.profile.mood && !userStore.profile.real_name"
+        >更改信息</n-button
+      >
+    </n-form>
+  </n-space>
 </template>
 <style scoped>
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
 h3 {
   font-weight: normal;
 }