feat: 优化个人设置页面

src/api/instance/api.ts

@@ -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);
   }

src/components/breadcrumb/bread-page.vue

@@ -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">

src/pages/my/index.vue

@@ -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">
+      <section class="my-page m-5 py-4 pr-4 h-full bg-white">
-        <div class="flex items-end justify-between gap-4 banner">
+        <a-tabs direction="vertical">
-          <div>
+          <a-tab-pane key="1" title="基本设置">
-            <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">
             <a-form :model="user" layout="vertical">
               <a-form-item label="个人头像">
                 <a-avatar :size="64">
@@ -38,7 +22,7 @@
                 <a-textarea v-model="user.description" placeholder="请输入" class="!w-[432px] h-24"></a-textarea>
               </a-form-item>
               <a-form-item label="密码">
-                  <a-button >修改密码</a-button>
+                <a-button>修改密码</a-button>
               </a-form-item>
               <a-form-item label="性别">
                 <a-radio-group v-model="user.gender" type="button">
@@ -51,11 +35,8 @@
                 <a-date-picker v-model="user.birth"></a-date-picker>
               </a-form-item>
             </a-form>
-            </div>
+          </a-tab-pane>
-          </div>
+          <a-tab-pane key="5" title="消息推送">
-          <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-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>
+          </a-tab-pane>
-          </div>
+          <a-tab-pane key="2" title="主题偏好">
-          <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-form :model="user" layout="vertical">
                 <a-form-item label="主题">
@@ -95,11 +74,8 @@
                 </a-form-item>
               </a-form>
             </div>
-          </div>
+          </a-tab-pane>
-          <div class="md:flex md:gap-4 mt-6 pt-6 border-t">
+          <a-tab-pane key="3" title="额外功能">
-            <!-- <div class="md:w-48 text-gray-400">
-              其他功能
-            </div> -->
             <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>
+          </a-tab-pane>
-          <div class="md:flex md:gap-4 mt-6 pt-6 border-t">
+        </a-tabs>
-            <!-- <div class="md:w-48 text-gray-400"></div> -->
-            <div class="flex-1">
-              <a-button type="primary">更新设置</a-button>
-            </div>
-          </div>
-        </div>
       </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>
 

src/pages/system/permission/index.vue

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

src/types/auto-component.d.ts

@@ -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']