feat: 添加用户设置页面

src/components/breadcrumb/bread-crumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-3 mx-5">
+  <div class="">
     <a-breadcrumb>
       <a-breadcrumb-item>
         <i class="icon-park-outline-all-application text-gray-400"></i>

src/components/breadcrumb/bread-page.vue

@@ -1,8 +1,23 @@
 <template>
   <div>
+    <div class="bg-white px-4 py-2">
+      <div class="flex justify-between gap-4">
         <BreadCrumb></BreadCrumb>
+        <div>
+          <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="mx-4 mt-3 p-4 bg-white">
+      <div class="m-4 p-4 bg-white">
         <slot></slot>
       </div>
     </slot>

src/pages/_app/index.vue

@@ -180,7 +180,8 @@ const userButtons = [
 }
 
 .layout-content {
-  min-height: 100vh;
+  // 导致部分内容被截取
+  // min-height: 100vh;
   overflow-y: hidden;
   background-color: var(--color-fill-2);
   transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

src/pages/demo/test.vue

@@ -1,12 +1,28 @@
 <template>
   <bread-page id="list-page">
-    <template #content>
+    <template #default>
-      <AList class="mx-5 mt-3 bg-white" :bordered="true">
+      <div>
+        <div class="flex justify-between items-center gap-4">
+          <span class="text-base font-semibold text-gray-900">媒体素材</span>
+          <div>
+            <a-button type="primary">
+              <template #icon>
+                <i class="icon-park-outline-plus"></i>
+              </template>
+              添加</a-button>
+          </div>
+        </div>
+        <div class="text-sm text-gray-400">
+          用户上传的图片、视频、音频等素材，可用于文章、图文、视频等内容的编辑。
+        </div>
+      </div>
+      <AList class="mt-4 bg-white" :bordered="true">
         <template #header>
           <div class="flex gap-2 items-center justify-between text-sm bg-[#fbfbfc] px-5 py-2">
-            <div class="flex gap-4">
+            <div class="flex gap-4 my-1.5">
-              <ACheckbox></ACheckbox>
+              <ACheckbox>
-              <AInput class="inline-block w-80" placeholder="输入名称关键字"></AInput>
+                全选
+              </ACheckbox>
             </div>
             <div class="flex items-center gap-4 text-gray-500">
               <ADropdown>
@@ -106,16 +122,16 @@
               绝弹
             </span>
             <span class="text-xs text-gray-400">2023-08-17 17:00:01</span>
-            <ADropdown @select="onRowActionsSelect">
+            <ADropdown @select="onRowActionsSelect" position="br">
               <span class="inline-flex p-1 hover:bg-slate-100 rounded cursor-pointer">
                 <i class="icon-park-outline-more"></i>
               </span>
               <template #content>
-                <ADoption value="detail" class="w-32">
+                <ADoption value="detail">
                   <template #icon>
                     <i class="icon-park-outline-repair"></i>
                   </template>
-                  <div class="w-32">详情</div>
+                  <div>详情</div>
                 </ADoption>
                 <ADoption value="delete" class="!text-red-500 !hover-bg-red-50">
                   <template #icon>
@@ -128,6 +144,9 @@
           </template>
         </AListItem>
       </AList>
+      <div class="mt-4 flex justify-end">
+        <a-pagination :total="232" :show-total="true"></a-pagination>
+      </div>
     </template>
   </bread-page>
 </template>

src/pages/my/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <BreadPage>
+    <template #content>
+      <section class="my-page m-5 bg-white p-4">
+        <div>
+          <div class="font-semibold text-lg flex items-center">个人设置</div>
+          <div class="mt-1 text-sm text-gray-400">此表情符号和消息会显示在您的个人资料和界面中。</div>
+        </div>
+        <div>
+          <div class="md:flex md:gap-4 mt-3 border-t pt-6">
+            <div class="md:w-56 text-gray-400">基本信息</div>
+            <div class="flex-1 flex">
+              <a-form layout="vertical">
+                <a-form-item label="个人头像">
+                  <a-avatar :size="64">
+                    <img src="https://github.com/juetan.png" alt="" />
+                    <template #trigger-icon>
+                      <i class="icon-park-outline-edit"></i>
+                    </template>
+                  </a-avatar>
+                </a-form-item>
+                <a-form-item label="用户昵称">
+                  <a-input v-model="user.nickname" placeholder="请输入" class="!w-[432px]"></a-input>
+                  <template #help> 用作系统内显示的名称，可在后台修改 </template>
+                </a-form-item>
+                <a-form-item label="个人描述">
+                  <a-textarea v-model="user.description" placeholder="请输入" class="!w-[432px]"></a-textarea>
+                </a-form-item>
+              </a-form>
+            </div>
+          </div>
+          <div class="md:flex md:gap-4 mt-6 pt-6 border-t">
+            <div class="md:w-56 text-gray-400">联系方式</div>
+            <div class="flex-1">
+              <a-form layout="vertical">
+                <a-form-item label="消息推送">
+                  <div>
+                    <a-checkbox-group direction="vertical" v-model="user.msg">
+                      <a-checkbox v-for="i in 3" :value="i">
+                        <span class="leading-1">站内消息</span>
+                        <div class="text-gray-400 mt-1">当有新的消息时，通过站内信、邮件、短信等方式通知我</div>
+                      </a-checkbox>
+                    </a-checkbox-group>
+                  </div>
+                  <template elp> 用作系统内显示的名称，可在后台修改 </template>
+                </a-form-item>
+                <a-form-item label="邮箱账号">
+                  <a-input v-model="user.email" placeholder="请输入" class="!w-[432px]"></a-input>
+                  <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-56 text-gray-400">偏好设置</div>
+            <div class="flex-1">
+              <a-form layout="vertical">
+                <a-form-item label="主题">
+                  <div>
+                    <a-radio-group v-model="user.theme" direction="vertical">
+                      <a-radio value="dark">
+                        黑曜深空
+                        <div class="text-gray-400 mt-1">浅绿色主题，包含深林、绿叶、河流等内容</div>
+                      </a-radio>
+                      <a-radio value="light">
+                        天空之城
+                        <div class="text-gray-400 mt-1">浅绿色主题，包含深林、绿叶、河流等内容</div>
+                      </a-radio>
+                    </a-radio-group>
+                  </div>
+                </a-form-item>
+              </a-form>
+            </div>
+          </div>
+          <div class="md:flex md:gap-4 mt-6 pt-6 border-t">
+            <div class="md:w-56 text-gray-400"></div>
+            <div class="flex-1">
+              <a-button type="primary">更新设置</a-button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </template>
+  </BreadPage>
+</template>
+
+<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: "选择在公开个人资料中显示私有项目的贡献，但不显示任何项目，仓库或组织信息",
+  theme: "dark",
+  email: "810335188@qq.com",
+  msg: [2],
+
+})
+</script>
+
+<style lang="less" scoped>
+.my-page :deep {
+  .arco-form-item.arco-form-item-error,
+  .arco-form-item.arco-form-item-has-help {
+    margin-bottom: 20px;
+  }
+  .arco-form-item-message {
+    margin-top: 4px;
+  }
+  .arco-checkbox,
+  .arco-radio {
+    align-items: start;
+    line-height: initial;
+    padding-left: 0;
+    &:not(:first-child) {
+      margin-top: 16px;
+    }
+  }
+  .arco-checkbox-icon-hover,
+  .arco-radio-icon-hover {
+    margin-top: 4px;
+  }
+}
+</style>
+
+<route lang="json">
+{
+  "meta": {
+    "sort": 30401,
+    "title": "个人设置",
+    "icon": "icon-park-outline-user"
+  }
+}
+</route>

src/types/auto-component.d.ts

@@ -11,7 +11,9 @@ declare module '@vue/runtime-core' {
     ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
     ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
     AButton: typeof import('@arco-design/web-vue')['Button']
+    ACard: typeof import('@arco-design/web-vue')['Card']
     ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
+    ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
     AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
     ADoption: typeof import('@arco-design/web-vue')['Doption']
     ADrawer: typeof import('@arco-design/web-vue')['Drawer']
@@ -20,7 +22,9 @@ declare module '@vue/runtime-core' {
     AFormItem: typeof import('@arco-design/web-vue')['FormItem']
     AImage: typeof import('@arco-design/web-vue')['Image']
     AInput: typeof import('@arco-design/web-vue')['Input']
+    AInputGroup: typeof import('@arco-design/web-vue')['InputGroup']
     AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
+    AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
     ALayout: typeof import('@arco-design/web-vue')['Layout']
     ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
     ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
@@ -31,9 +35,14 @@ declare module '@vue/runtime-core' {
     AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta']
     AMenu: typeof import('@arco-design/web-vue')['Menu']
     AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
+    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']
     ATag: typeof import('@arco-design/web-vue')['Tag']
+    ATextarea: typeof import('@arco-design/web-vue')['Textarea']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
     BreadCrumb: typeof import('./../components/breadcrumb/bread-crumb.vue')['default']
     BreadPage: typeof import('./../components/breadcrumb/bread-page.vue')['default']