appnify
/
web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化个人设置页面

master
绝弹 2023-09-04 21:06:06 +08:00
parent aa1cb150b8
commit 56efcc0919
5 changed files with 63 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/instance/api.ts
View File

@ -1,7 +1,7 @@
import { IToastOptions, toast } from "@/components";
import { store, useUserStore } from "@/store";
import { Api } from "../service/Api";
import { Message } from "@arco-design/web-vue";
import { Api } from "../service/Api";
class Service extends Api<unknown> {
/**
@ -75,7 +75,7 @@ api.instance.interceptors.response.use(
}
} else if (error.request) {
console.log("request error", error.request);
Message.error(`提示：请求失败，检查网络状态或参数格式!`);
Message.error(`提示：请求失败，检查网络状态或稍后再试!`);
}
return Promise.reject(error);
}

8
src/components/breadcrumb/bread-page.vue
View File

@ -7,14 +7,6 @@
<a-link>需要帮助？</a-link>
</div>
</div>
<!-- <div class="mt-3">
<div class="flex justify-between gap-4 font-bold">
<span class="text-lg text-gray-900">素材列表</span>
</div>
<div class="text-sm text-gray-400 mt-1">
用户上传的图片、视频、音频等素材，可用于文章、图文、视频等内容的编辑。
</div>
</div> -->
</div>
<slot name="content">
<div class="m-4 p-4 bg-white">

65
src/pages/my/index.vue
View File

@ -1,25 +1,9 @@
<template>
<BreadPage>
<template #content>
<section class="my-page m-5 bg-white py-4 px-6 max-w-[980px] mx-auto">
<div class="flex items-end justify-between gap-4 banner">
<div>
<div class="font-semibold text-xl flex items-center">个人设置</div>
<div class="mt-1 text-sm text-gray-400">此表情符号和消息会显示在您的个人资料和界面中。</div>
</div>
<div class=" text-gray-500">
<div class="text-right">绝弹 <span class="text-sm font-normal text-gray-500">(juetan)</span></div>
<div class="mt-0.5 text-gray-400 text-xs">创建于 2023年08月18日 </div>
</div>
</div>
<div>
<div class="md:flex md:gap-4 mt-3 border-t pt-6">
<!-- <div class="md:w-48 text-gray-400">基本信息</div> -->
<!-- <div class="mb-2 md:w-64">
<div class="text-base font-semibold">基本设置</div>
<div class="text-gray-400 mt-1">设置你的基本信息，用于个性化显示</div>
</div> -->
<div class="flex-1 flex">
<section class="my-page m-5 py-4 pr-4 h-full bg-white">
<a-tabs direction="vertical">
<a-tab-pane key="1" title="基本设置">
<a-form :model="user" layout="vertical">
<a-form-item label="个人头像">
<a-avatar :size="64">
@ -51,11 +35,8 @@
<a-date-picker v-model="user.birth"></a-date-picker>
</a-form-item>
</a-form>
</div>
</div>
<div class="md:flex md:gap-4 mt-2 pt-6 border-t">
<!-- <div class="md:w-48 text-gray-400">联系方式</div> -->
<div class="flex-1">
</a-tab-pane>
<a-tab-pane key="5" title="消息推送">
<a-form :model="user" layout="vertical">
<a-form-item label="消息推送">
<div>
@ -73,10 +54,8 @@
<template #help> 推荐使用主流邮箱, 例如: gmail.com, qq.com, 163.com等后缀 </template>
</a-form-item>
</a-form>
</div>
</div>
<div class="md:flex md:gap-4 mt-6 pt-6 border-t">
<!-- <div class="md:w-48 text-gray-400">偏好设置</div> -->
</a-tab-pane>
<a-tab-pane key="2" title="主题偏好">
<div class="flex-1">
<a-form :model="user" layout="vertical">
<a-form-item label="主题">
@ -95,11 +74,8 @@
</a-form-item>
</a-form>
</div>
</div>
<div class="md:flex md:gap-4 mt-6 pt-6 border-t">
<!-- <div class="md:w-48 text-gray-400">
其他功能
</div> -->
</a-tab-pane>
<a-tab-pane key="3" title="额外功能">
<div class="flex-1 grid">
<div class="mb-3">功能列表</div>
<div v-for="i in 3" class="border-t py-4 flex justify-between items-center gap-4">
@ -157,14 +133,8 @@
</div>
</div>
</div>
</div>
<div class="md:flex md:gap-4 mt-6 pt-6 border-t">
<!-- <div class="md:w-48 text-gray-400"></div> -->
<div class="flex-1">
<a-button type="primary">更新设置</a-button>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</section>
</template>
</BreadPage>
@ -173,17 +143,6 @@
<script setup lang="tsx">
import { reactive } from "vue";
const emailOptions = [
{
label: "qq.com",
value: "qq.com",
},
{
label: "163.com",
value: "163.com",
},
];
const user = reactive({
nickname: "绝弹",
description: "选择在公开个人资料中显示私有项目的贡献，但不显示任何项目，仓库或组织信息",
@ -191,7 +150,7 @@ const user = reactive({
email: "810335188@qq.com",
msg: [2],
gender: 1,
birth: '1988-12-18'
birth: "1988-12-18",
});
</script>

18
src/pages/system/permission/index.vue
View File

@ -80,23 +80,7 @@ const table = useTable({
{
field: "description",
label: "个人描述",
type: "input",
},
{
field: "permissions",
label: "关联角色",
type: "select",
options: () => api.permission.getPermissions(),
component: ({ item }) => {
return (
<div class="flex flex-col">
<span>关联角色</span>
<div>
<span></span>
</div>
</div>
);
},
type: "textarea",
},
],
modalProps: {

3
src/types/auto-component.d.ts vendored
View File

@ -9,7 +9,6 @@ declare module '@vue/runtime-core' {
export interface GlobalComponents {
AAlert: typeof import('@arco-design/web-vue')['Alert']
AAvatar: typeof import('@arco-design/web-vue')['Avatar']
ABadge: typeof import('@arco-design/web-vue')['Badge']
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
AButton: typeof import('@arco-design/web-vue')['Button']
@ -41,9 +40,7 @@ declare module '@vue/runtime-core' {
APagination: typeof import('@arco-design/web-vue')['Pagination']
ARadio: typeof import('@arco-design/web-vue')['Radio']
ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
ASelect: typeof import('@arco-design/web-vue')['Select']
ASpace: typeof import('@arco-design/web-vue')['Space']
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
ASwitch: typeof import('@arco-design/web-vue')['Switch']
ATabPane: typeof import('@arco-design/web-vue')['TabPane']
ATabs: typeof import('@arco-design/web-vue')['Tabs']