perf: improve forms ui

Signed-off-by: Ryan Wang <i@ryanc.cc>
2022-05-31 16:19:04 +08:00 · 2022-05-31 16:19:04 +08:00 · 89892a9d79
parent b5394f19b9
commit 89892a9d79
16 changed files with 615 additions and 359 deletions
--- a/package.json
+++ b/package.json
@ -21,11 +21,14 @@
  "dependencies": {
    "@halo-dev/admin-api": "^1.0.0",
    "@vueuse/core": "^8.5.0",
+    "filepond": "^4.30.3",
+    "filepond-plugin-image-preview": "^4.6.11",
    "floating-vue": "2.0.0-beta.16",
    "lodash.clonedeep": "^4.5.0",
    "pinia": "^2.0.14",
    "tippy.js": "^6.3.7",
    "vue": "^3.2.36",
+    "vue-filepond": "^7.0.3",
    "vue-grid-layout": "3.0.0-beta1",
    "vue-router": "^4.0.15"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -22,6 +22,8 @@ specifiers:
  eslint: ^8.16.0
  eslint-plugin-cypress: ^2.12.1
  eslint-plugin-vue: ^8.7.1
+  filepond: ^4.30.3
+  filepond-plugin-image-preview: ^4.6.11
  floating-vue: 2.0.0-beta.16
  histoire: ^0.4.6
  husky: ^8.0.1
@ -45,6 +47,7 @@ specifiers:
  vite-plugin-pwa: ^0.12.0
  vitest: ^0.12.9
  vue: ^3.2.36
+  vue-filepond: ^7.0.3
  vue-grid-layout: 3.0.0-beta1
  vue-router: ^4.0.15
  vue-tsc: ^0.34.16
@ -52,11 +55,14 @@ specifiers:
 dependencies:
  '@halo-dev/admin-api': 1.0.0
  '@vueuse/core': 8.5.0_vue@3.2.36
+  filepond: 4.30.3
+  filepond-plugin-image-preview: 4.6.11_filepond@4.30.3
  floating-vue: 2.0.0-beta.16_vue@3.2.36
  lodash.clonedeep: 4.5.0
  pinia: 2.0.14_7gwbvmtszsbbeay4sidijbp26i
  tippy.js: 6.3.7
  vue: 3.2.36
+  vue-filepond: 7.0.3_filepond@4.30.3+vue@3.2.36
  vue-grid-layout: 3.0.0-beta1
  vue-router: 4.0.15_vue@3.2.36

@ -4095,6 +4101,18 @@ packages:
      minimatch: 5.0.1
    dev: true

+  /filepond-plugin-image-preview/4.6.11_filepond@4.30.3:
+    resolution: {integrity: sha512-0EmQ9HnOb/X0xc5rLcNRhhmdUbp7oiicRwQrcr90ZfVmPJOOZoX3ZGUEsEPj7luMI55huguhcVozdESxtqnuRw==}
+    peerDependencies:
+      filepond: '>=4.x <5.x'
+    dependencies:
+      filepond: 4.30.3
+    dev: false
+
+  /filepond/4.30.3:
+    resolution: {integrity: sha512-G2b1LEe90Sq2vH0SYDASTB+vVU735NBctzIaFPlZtb14QAgi/AL89WyQ6LhTfqgyrMyuZur2O9yHAmzS2E9ZnA==}
+    dev: false
+
  /fill-range/7.0.1:
    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
    engines: {node: '>=8'}
@ -6819,6 +6837,16 @@ packages:
      - supports-color
    dev: true

+  /vue-filepond/7.0.3_filepond@4.30.3+vue@3.2.36:
+    resolution: {integrity: sha512-pYZ5TxGwFiiiVlRdzlJl0AyHE0/rEZiHm/0sYhIleFjV2VdGWTyxSqErN/AQwrwv32AeiNbui46vVB06Dl07ow==}
+    peerDependencies:
+      filepond: '>=4.7.4 < 5.x'
+      vue: '>=3 < 4'
+    dependencies:
+      filepond: 4.30.3
+      vue: 3.2.36
+    dev: false
+
  /vue-grid-layout/3.0.0-beta1:
    resolution: {integrity: sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==}
    dependencies:
--- a/src/components/base/modal/Modal.vue
+++ b/src/components/base/modal/Modal.vue
@ -111,7 +111,7 @@ function handleClose() {
  @apply h-full w-full;
  @apply flex flex-row;
  @apply items-center justify-center;
-  z-index: 99999;
+  z-index: 999;

  .modal-layer {
    @apply flex-none;
--- a/src/layouts/SystemSettingsLayout.vue
+++ b/src/layouts/SystemSettingsLayout.vue
@ -46,7 +46,7 @@ const handleTabChange = (id: string) => {
        <IconSettings class="mr-2 self-center" />
      </template>
      <template #actions>
-        <VButton type="secondary">安装</VButton>
+        <VButton type="secondary" class="opacity-0">安装</VButton>
      </template>
    </VPageHeader>

--- a/src/views/contents/attachments/AttachmentList.vue
+++ b/src/views/contents/attachments/AttachmentList.vue
@ -8,6 +8,11 @@ import { VInput } from "@/components/base/input";
 import { VTag } from "@/components/base/tag";
 import { ref } from "vue";
 import { users } from "@/views/system/users/users-mock";
+import vueFilePond from "vue-filepond";
+import "filepond/dist/filepond.min.css";
+import FilePondPluginImagePreview from "filepond-plugin-image-preview";
+import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
+
 import {
  IconArrowDown,
  IconArrowLeft,
@ -30,6 +35,8 @@ const viewTypes = [
  },
 ];

+const FilePond = vueFilePond(FilePondPluginImagePreview);
+
 const viewType = ref("grid");

 const strategyVisible = ref(false);
@ -86,57 +93,104 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
    </template>
  </VPageHeader>

-  <VModal v-model:visible="uploadVisible" :width="800" title="上传附件">
-    <div class="w-full sm:w-96">
-      <VCard :bodyClass="['!p-0']" title="存储策略">
-        <fieldset>
-          <div class="-space-y-px divide-y divide-gray-100 bg-white">
-            <label
-              v-for="(strategy, index) in strategies"
-              :key="index"
-              :class="{
-                'bg-gray-50': selected === strategy.id,
-              }"
-              class="relative flex cursor-pointer p-4 focus:outline-none"
-            >
-              <input
-                v-model="selected"
-                :value="strategy.id"
-                class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer border-gray-300 text-indigo-600 focus:ring-indigo-500"
-                name="privacy"
-                type="radio"
-              />
-              <span class="ml-3 flex flex-1 flex-col">
-                <span
-                  :class="{ 'font-bold': selected === strategy.id }"
-                  class="block text-sm font-medium"
-                >
-                  {{ strategy.name }}
-                </span>
-                <span class="block text-sm text-gray-400">
-                  {{ strategy.description }}
-                </span>
-              </span>
-              <div class="self-center">
-                <IconSettings
-                  class="cursor-pointer transition-all hover:text-blue-600"
-                  @click.stop="strategyVisible = true"
+  <VModal
+    v-model:visible="uploadVisible"
+    :body-class="['!p-0']"
+    :width="1024"
+    title="上传附件"
+  >
+    <div class="w-full">
+      <div class="flex flex-row">
+        <VCard
+          :bodyClass="['!p-0']"
+          class="border-r-1 w-72 border-t-0 border-l-0 border-b-0"
+        >
+          <fieldset>
+            <div class="-space-y-px divide-y divide-gray-100 bg-white">
+              <label
+                v-for="(strategy, index) in strategies"
+                :key="index"
+                :class="{
+                  'bg-gray-50': selected === strategy.id,
+                }"
+                class="relative flex cursor-pointer p-4 focus:outline-none"
+              >
+                <input
+                  v-model="selected"
+                  :value="strategy.id"
+                  class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                  name="privacy"
+                  type="radio"
                />
-              </div>
-            </label>
-          </div>
-        </fieldset>
+                <span class="ml-3 flex flex-1 flex-col">
+                  <span
+                    :class="{ 'font-bold': selected === strategy.id }"
+                    class="block text-sm font-medium"
+                  >
+                    {{ strategy.name }}
+                  </span>
+                  <span class="block text-sm text-gray-400">
+                    {{ strategy.description }}
+                  </span>
+                </span>
+                <div class="self-center">
+                  <IconSettings
+                    class="cursor-pointer transition-all hover:text-blue-600"
+                    @click.stop="strategyVisible = true"
+                  />
+                </div>
+              </label>
+            </div>
+          </fieldset>

-        <template #footer>
-          <VButton block type="secondary" @click="strategyVisible = true">
-            添加策略
-          </VButton>
-        </template>
-      </VCard>
+          <template #footer>
+            <FloatingDropdown>
+              <VButton block type="secondary"> 添加策略</VButton>
+              <template #popper>
+                <div class="w-72 p-4">
+                  <ul class="space-y-1">
+                    <li
+                      class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                    >
+                      <span class="truncate">本地</span>
+                    </li>
+                    <li
+                      class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                      @click="strategyVisible = true"
+                    >
+                      <span class="truncate">阿里云 OSS</span>
+                    </li>
+                    <li
+                      class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                    >
+                      <span class="truncate">Amazon S3</span>
+                    </li>
+                  </ul>
+                </div>
+              </template>
+            </FloatingDropdown>
+          </template>
+        </VCard>
+
+        <div class="flex-1 p-4">
+          <file-pond
+            ref="pond"
+            accepted-file-types="image/jpeg, image/png"
+            label-idle="Drop files here..."
+            name="test"
+            server="/api"
+            v-bind:allow-multiple="true"
+          />
+        </div>
+      </div>
    </div>
  </VModal>

-  <VModal v-model:visible="strategyVisible" title="添加存储策略"></VModal>
+  <VModal
+    v-model:visible="strategyVisible"
+    :width="820"
+    title="添加存储策略"
+  ></VModal>

  <VModal v-model:visible="detailVisible" :width="1000" title="attachment-0">
    <template #actions>
@ -170,7 +224,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
            </dd>
          </div>
          <div
-            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
          >
            <dt class="text-sm font-medium text-gray-900">文件名称</dt>
            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -186,7 +240,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
            </dd>
          </div>
          <div
-            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
          >
            <dt class="text-sm font-medium text-gray-900">文件大小</dt>
            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -210,7 +264,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
            </dd>
          </div>
          <div
-            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
          >
            <dt class="text-sm font-medium text-gray-900">原始链接</dt>
            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -222,7 +276,46 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
          >
            <dt class="text-sm font-medium text-gray-900">引用位置</dt>
            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              https://picsum.photos/1000/700?random=1
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <div
+                    class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-themeable-primary"
+                  >
+                    <RouterLink
+                      :to="{
+                        name: 'Posts',
+                      }"
+                      class="font-medium text-gray-900 hover:text-blue-400"
+                    >
+                      Halo 1.5.3 发布了
+                    </RouterLink>
+                    <div class="text-xs">
+                      <VSpace>
+                        <VTag>文章</VTag>
+                      </VSpace>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div
+                    class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-themeable-primary"
+                  >
+                    <RouterLink
+                      :to="{
+                        name: 'Posts',
+                      }"
+                      class="font-medium text-gray-900 hover:text-blue-400"
+                    >
+                      Halo 1.5.2 发布
+                    </RouterLink>
+                    <div class="text-xs">
+                      <VSpace>
+                        <VTag>文章</VTag>
+                      </VSpace>
+                    </div>
+                  </div>
+                </li>
+              </ul>
            </dd>
          </div>
        </dl>
@ -301,6 +394,37 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                </div>
                <div class="mt-4 flex sm:mt-0">
                  <VSpace spacing="lg">
+                    <FloatingDropdown>
+                      <div
+                        class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
+                      >
+                        <span class="mr-0.5">存储策略</span>
+                        <span>
+                          <IconArrowDown />
+                        </span>
+                      </div>
+                      <template #popper>
+                        <div class="w-72 p-4">
+                          <ul class="space-y-1">
+                            <li
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                            >
+                              <span class="truncate">本地</span>
+                            </li>
+                            <li
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                            >
+                              <span class="truncate">阿里云 OSS</span>
+                            </li>
+                            <li
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                            >
+                              <span class="truncate">Amazon S3</span>
+                            </li>
+                          </ul>
+                        </div>
+                      </template>
+                    </FloatingDropdown>
                    <FloatingDropdown>
                      <div
                        class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
@ -357,14 +481,32 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                        </div>
                      </template>
                    </FloatingDropdown>
-                    <div
-                      class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
-                    >
-                      <span class="mr-0.5">引用位置</span>
-                      <span>
-                        <IconArrowDown />
-                      </span>
-                    </div>
+                    <FloatingDropdown>
+                      <div
+                        class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
+                      >
+                        <span class="mr-0.5">引用位置</span>
+                        <span>
+                          <IconArrowDown />
+                        </span>
+                      </div>
+                      <template #popper>
+                        <div class="w-72 p-4">
+                          <ul class="space-y-1">
+                            <li
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                            >
+                              <span class="truncate">未被引用</span>
+                            </li>
+                            <li
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                            >
+                              <span class="truncate">文章</span>
+                            </li>
+                          </ul>
+                        </div>
+                      </template>
+                    </FloatingDropdown>
                    <div
                      class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
                    >
--- a/src/views/contents/sheets/SheetList.vue
+++ b/src/views/contents/sheets/SheetList.vue
@ -3,7 +3,7 @@ import { VButton } from "@/components/base/button";
 import { VCard } from "@/components/base/card";
 import { VSpace } from "@/components/base/space";
 import { VTag } from "@/components/base/tag";
-import { VTabItem, VTabs } from "@/components/base/tabs";
+import { VTabbar } from "@/components/base/tabs";
 import { VInput } from "@/components/base/input";
 import { VPageHeader } from "@/components/base/header";
 import {
@ -77,50 +77,62 @@ const activeId = ref("advanced");
  </VPageHeader>

  <div class="m-0 md:m-4">
-    <VTabs v-model:active-id="activeId" type="outline">
-      <VTabItem id="advanced" label="功能页面">
-        <VCard :body-class="['!p-0']">
-          <ul
-            class="box-border h-full w-full divide-y divide-gray-100"
-            role="list"
-          >
-            <li v-for="(sheet, index) in advancedSheets" :key="index">
-              <div
-                class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-              >
-                <div class="relative flex flex-row items-center">
-                  <div class="flex-1">
-                    <div class="flex flex-row">
-                      <span
-                        class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
-                      >
-                        {{ sheet.name }}
-                      </span>
-                      <VTag>{{ sheet.url }}</VTag>
-                    </div>
-                  </div>
-                  <div class="flex">
-                    <div
-                      class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+    <VCard :body-class="['!p-0']">
+      <template #header>
+        <VTabbar
+          v-model:active-id="activeId"
+          :items="[
+            { id: 'advanced', label: '功能页面' },
+            { id: 'custom', label: '自定义页面' },
+          ]"
+          class="w-full !rounded-none"
+          type="outline"
+        ></VTabbar>
+      </template>
+      <div v-if="activeId === 'advanced'">
+        <ul
+          class="box-border h-full w-full divide-y divide-gray-100"
+          role="list"
+        >
+          <li v-for="(sheet, index) in advancedSheets" :key="index">
+            <div
+              class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
+            >
+              <div class="relative flex flex-row items-center">
+                <div class="flex-1">
+                  <div class="flex flex-row">
+                    <span
+                      class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
                    >
-                      <img
-                        v-tooltip="`由${sheet.name}插件提供`"
-                        :src="sheet.logo"
-                        class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
-                      />
-                      <span class="cursor-pointer">
-                        <IconSettings />
-                      </span>
-                    </div>
+                      {{ sheet.name }}
+                    </span>
+                    <VTag>{{ sheet.url }}</VTag>
+                  </div>
+                </div>
+                <div class="flex">
+                  <div
+                    class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+                  >
+                    <img
+                      v-tooltip="`由${sheet.name}插件提供`"
+                      :src="sheet.logo"
+                      class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
+                    />
+                    <span class="cursor-pointer">
+                      <IconSettings />
+                    </span>
                  </div>
                </div>
              </div>
-            </li>
-          </ul>
-        </VCard>
-      </VTabItem>
-      <VTabItem id="custom" label="自定义页面">
-        <VCard :body-class="['!p-0']">
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div v-if="activeId === 'custom'">
+        <VCard
+          :body-class="['!p-0']"
+          class="rounded-none border-none shadow-none"
+        >
          <template #header>
            <div class="block w-full bg-gray-50 px-4 py-3">
              <div
@ -393,7 +405,7 @@ const activeId = ref("advanced");
            </div>
          </template>
        </VCard>
-      </VTabItem>
-    </VTabs>
+      </div>
+    </VCard>
  </div>
 </template>
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@ -155,7 +155,10 @@ const widgetsGroup = [
  {
    id: "other",
    label: "其他",
-    widgets: [{ x: 0, y: 0, w: 3, h: 3, i: 0, widget: "ViewsStatsWidget" }],
+    widgets: [
+      { x: 0, y: 0, w: 3, h: 3, i: 0, widget: "ViewsStatsWidget" },
+      { x: 0, y: 0, w: 6, h: 10, i: 1, widget: "QuickLinkWidget" },
+    ],
  },
 ];

--- a/src/views/dashboard/widgets/QuickLinkWidget.vue
+++ b/src/views/dashboard/widgets/QuickLinkWidget.vue
@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { VCard } from "@/components/base/card";
+import {
+  IconArrowRight,
+  IconBookRead,
+  IconFolder,
+  IconPalette,
+  IconPlug,
+  IconUserSettings,
+} from "@/core/icons";
+import { useRouter } from "vue-router";
+
+const actions = [
+  {
+    icon: IconBookRead,
+    title: "创建文章",
+    route: "PostEditor",
+  },
+  {
+    icon: IconFolder,
+    title: "附件上传",
+    route: "Attachments",
+  },
+  {
+    icon: IconPalette,
+    title: "外观编辑",
+    route: "ThemeVisual",
+  },
+  {
+    icon: IconPlug,
+    title: "插件管理",
+    route: "Plugins",
+  },
+  {
+    icon: IconUserSettings,
+    title: "新建用户",
+    route: "Users",
+  },
+];
+
+const router = useRouter();
+</script>
+<template>
+  <VCard
+    :bodyClass="['h-full', 'overflow-y-auto', '!p-0']"
+    class="h-full"
+    title="快捷访问"
+  >
+    <div
+      class="divide-y divide-x divide-gray-100 overflow-hidden sm:grid sm:grid-cols-3 sm:gap-px sm:divide-y-0"
+    >
+      <div
+        v-for="(action, index) in actions"
+        :key="index"
+        class="group relative cursor-pointer bg-white p-6 hover:bg-gray-50"
+        @click="router.push({ name: action.route })"
+      >
+        <div>
+          <span
+            class="inline-flex rounded-lg bg-teal-50 p-3 text-teal-700 ring-4 ring-white"
+          >
+            <component :is="action.icon"></component>
+          </span>
+        </div>
+        <div class="mt-8">
+          <h3 class="text-base font-medium">
+            <span aria-hidden="true" class="absolute inset-0"></span>
+            {{ action.title }}
+          </h3>
+        </div>
+        <span
+          aria-hidden="true"
+          class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
+        >
+          <IconArrowRight />
+        </span>
+      </div>
+    </div>
+  </VCard>
+</template>
--- a/src/views/dashboard/widgets/index.ts
+++ b/src/views/dashboard/widgets/index.ts
@ -7,6 +7,7 @@ import ViewsStatsWidget from "./ViewsStatsWidget.vue";
 import RecentLoginWidget from "./RecentLoginWidget.vue";
 import RecentPublishedWidget from "./RecentPublishedWidget.vue";
 import JournalPublishWidget from "./JournalPublishWidget.vue";
+import QuickLinkWidget from "./QuickLinkWidget.vue";

 const install = (app: App) => {
  app.component("PostStatsWidget", PostStatsWidget);
@ -16,6 +17,7 @@ const install = (app: App) => {
  app.component("RecentLoginWidget", RecentLoginWidget);
  app.component("RecentPublishedWidget", RecentPublishedWidget);
  app.component("JournalPublishWidget", JournalPublishWidget);
+  app.component("QuickLinkWidget", QuickLinkWidget);
 };

 export default install;
--- a/src/views/interface/themes/ThemeDetail.vue
+++ b/src/views/interface/themes/ThemeDetail.vue
@ -16,7 +16,9 @@ import {
  IconPalette,
 } from "@/core/icons";
 import { ref } from "vue";
+import { RouterLink } from "vue-router";
 import { themes } from "@/views/interface/themes/themes-mock";
+import Alert from "@/components/base/alert/Alert.vue";

 const currentTheme = ref(themes[0]);
 const changeTheme = ref(false);
@ -171,71 +173,110 @@ const handleChangeTheme = (theme: any) => {
        <div class="border-t border-gray-200">
          <dl class="divide-y divide-gray-100">
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">ID</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
                {{ currentTheme.id }}
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">作者</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
                {{ currentTheme.author.name }}
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">网站</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
                <a :href="currentTheme.website" target="_blank">
                  {{ currentTheme.website }}
                </a>
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">源码仓库</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
                <a :href="currentTheme.repo" target="_blank">
                  {{ currentTheme.repo }}
                </a>
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">当前版本</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
                {{ currentTheme.version }}
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
                {{ currentTheme.require }}
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">存储位置</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
                {{ currentTheme.themePath }}
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">插件依赖</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                无
+              <dd class="mt-1 text-sm sm:col-span-3 sm:mt-0">
+                <Alert
+                  description="当前有 1 个插件还未安装"
+                  title="提示"
+                ></Alert>
+                <ul class="mt-2 space-y-2">
+                  <li>
+                    <div
+                      class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-themeable-primary"
+                    >
+                      <RouterLink
+                        :to="{
+                          name: 'PluginDetail',
+                          params: { id: 'run.halo.plugins.links' },
+                        }"
+                        class="font-medium text-gray-900 hover:text-blue-400"
+                      >
+                        run.halo.plugins.links
+                      </RouterLink>
+                      <div class="text-xs">
+                        <VSpace>
+                          <VTag> 已安装</VTag>
+                        </VSpace>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div
+                      class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-themeable-primary"
+                    >
+                      <span class="font-medium hover:text-blue-400">
+                        run.halo.plugins.photos
+                      </span>
+                      <div class="text-xs">
+                        <VSpace>
+                          <VTag>未安装</VTag>
+                        </VSpace>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
              </dd>
            </div>
          </dl>
@ -243,31 +284,31 @@ const handleChangeTheme = (theme: any) => {
      </div>

      <div v-if="themeActiveId === 'settings'">
-        <form>
-          <div class="space-y-6 divide-y divide-gray-100 sm:space-y-5">
+        <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+          <div class="space-y-6 space-y-5 divide-y divide-gray-100">
            <div
-              class="px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+              class="px-4 sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5"
            >
              <label
                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
              >
                侧边栏宽度
              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
+              <div class="mt-1 sm:col-span-3 sm:mt-0">
                <div class="flex max-w-lg shadow-sm">
                  <VInput />
                </div>
              </div>
            </div>
            <div
-              class="px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+              class="px-4 sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5"
            >
              <label
                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
              >
                侧边栏背景图
              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
+              <div class="mt-1 sm:col-span-3 sm:mt-0">
                <div class="flex max-w-lg shadow-sm">
                  <VInput />
                </div>
@ -275,28 +316,28 @@ const handleChangeTheme = (theme: any) => {
            </div>

            <div
-              class="px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+              class="px-4 sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5"
            >
              <label
                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
              >
                右上角图标
              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
+              <div class="mt-1 sm:col-span-3 sm:mt-0">
                <div class="flex max-w-lg shadow-sm">
                  <VInput />
                </div>
              </div>
            </div>
            <div
-              class="px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+              class="px-4 sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5"
            >
              <label
                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
              >
                文章代码高亮语言
              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
+              <div class="mt-1 sm:col-span-3 sm:mt-0">
                <div class="flex max-w-lg shadow-sm">
                  <VTextarea modelValue="Halo" />
                </div>
--- a/src/views/system/plugins/PluginDetail.vue
+++ b/src/views/system/plugins/PluginDetail.vue
@ -27,7 +27,7 @@ console.log(plugin);
      <img :src="plugin.spec.logo" class="mr-2 h-8 w-8" />
    </template>
    <template #actions>
-      <VButton type="secondary"> 安装</VButton>
+      <VButton class="opacity-0" type="secondary"> 安装</VButton>
    </template>
  </VPageHeader>

@ -60,7 +60,7 @@ console.log(plugin);
        <div class="border-t border-gray-200">
          <dl class="divide-y divide-gray-100">
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">名称</dt>
              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -68,7 +68,7 @@ console.log(plugin);
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">插件类别</dt>
              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -80,7 +80,7 @@ console.log(plugin);
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">版本</dt>
              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -88,7 +88,7 @@ console.log(plugin);
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt>
              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -96,7 +96,7 @@ console.log(plugin);
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">提供方</dt>
              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -106,7 +106,7 @@ console.log(plugin);
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">协议</dt>
              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
@ -114,7 +114,7 @@ console.log(plugin);
              </dd>
            </div>
            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">模型定义</dt>
              <dd class="mt-1 sm:col-span-2 sm:mt-0">
@ -146,10 +146,10 @@ console.log(plugin);
              </dd>
            </div>
            <div
-              class="bg-gray-50 px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              class="bg-gray-50 px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
            >
              <dt class="text-sm font-medium text-gray-900">权限定义</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-5 sm:mt-0">
                <dl class="divide-y divide-gray-100">
                  <div
                    class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
@ -252,31 +252,31 @@ console.log(plugin);
      </div>

      <div v-if="pluginActiveId === 'settings'">
-        <form>
-          <div class="space-y-6 divide-y divide-gray-100 sm:space-y-5">
+        <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+          <div class="space-y-6 space-y-5 divide-y divide-gray-100">
            <div
-              class="px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+              class="px-4 sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5"
            >
              <label
                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
              >
                设置项 1
              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
+              <div class="mt-1 sm:col-span-3 sm:mt-0">
                <div class="flex max-w-lg shadow-sm">
                  <VInput />
                </div>
              </div>
            </div>
            <div
-              class="px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+              class="px-4 sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5"
            >
              <label
                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
              >
                设置项 2
              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
+              <div class="mt-1 sm:col-span-3 sm:mt-0">
                <div class="flex max-w-lg shadow-sm">
                  <VInput />
                </div>
--- a/src/views/system/settings/GeneralSettings.vue
+++ b/src/views/system/settings/GeneralSettings.vue
@ -3,64 +3,59 @@ import { VInput } from "@/components/base/input";
 import { VButton } from "@/components/base/button";
 </script>
 <template>
-  <form class="space-y-8 divide-y divide-gray-200">
-    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-      <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            站点地址
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput modelValue="https://halo.run" />
-            </div>
-          </div>
-        </div>
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            站点标题
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput modelValue="Halo" />
-            </div>
-          </div>
-        </div>
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            站点副标题
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput modelValue="开源的现代化 CMS 应用" />
-            </div>
+  <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+    <div class="space-y-6 space-y-5 divide-y divide-gray-100">
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          站点地址
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="https://halo.run" />
          </div>
        </div>
+      </div>

-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            Logo
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput modelValue="https://halo.run/logo" />
-            </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          站点标题
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="Halo" />
+          </div>
+        </div>
+      </div>
+
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          站点副标题
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="开源的现代化 CMS 应用" />
+          </div>
+        </div>
+      </div>
+
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          Logo
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="https://halo.run/logo" />
+          </div>
+        </div>
+      </div>
+
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          Favicon
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="https://halo.run/favicon.ico" />
          </div>
        </div>
      </div>
--- a/src/views/system/settings/NotificationSettings.vue
+++ b/src/views/system/settings/NotificationSettings.vue
@ -3,64 +3,46 @@ import { VInput } from "@/components/base/input";
 import { VButton } from "@/components/base/button";
 </script>
 <template>
-  <form class="space-y-8 divide-y divide-gray-200">
-    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-      <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            站点地址
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput modelValue="https://halo.run" />
-            </div>
+  <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+    <div class="space-y-6 space-y-5 divide-y divide-gray-100">
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          站点地址
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="https://halo.run" />
          </div>
        </div>
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            站点标题
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput modelValue="Halo" />
-            </div>
+      </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          站点标题
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="Halo" />
          </div>
        </div>
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            站点副标题
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput modelValue="开源的现代化 CMS 应用" />
-            </div>
+      </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          站点副标题
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="开源的现代化 CMS 应用" />
          </div>
        </div>
+      </div>

-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            Logo
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput modelValue="https://halo.run/logo" />
-            </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          Logo
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput modelValue="https://halo.run/logo" />
          </div>
        </div>
      </div>
--- a/src/views/system/users/PasswordChange.vue
+++ b/src/views/system/users/PasswordChange.vue
@ -3,50 +3,36 @@ import { VButton } from "@/components/base/button";
 import { VInput } from "@/components/base/input";
 </script>
 <template>
-  <form class="space-y-8 divide-y divide-gray-200">
-    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-      <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            原密码
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput />
-            </div>
+  <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+    <div class="space-y-6 space-y-5 divide-y divide-gray-100">
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          原密码
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput />
          </div>
        </div>
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            新密码
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput />
-            </div>
+      </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          新密码
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput />
          </div>
        </div>
+      </div>

-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            确认密码
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput />
-            </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          确认密码
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput />
          </div>
        </div>
      </div>
--- a/src/views/system/users/ProfileModification.vue
+++ b/src/views/system/users/ProfileModification.vue
@ -7,64 +7,46 @@ import { inject } from "vue";
 const user = inject("user");
 </script>
 <template>
-  <form class="space-y-8 divide-y divide-gray-200">
-    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-      <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            用户名
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput :modelValue="user.username" />
-            </div>
+  <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+    <div class="space-y-6 space-y-5 divide-y divide-gray-100">
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          用户名
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput :modelValue="user.username" />
          </div>
        </div>
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            显示名称
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput :modelValue="user.name" />
-            </div>
+      </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          显示名称
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput :modelValue="user.name" />
          </div>
        </div>
+      </div>

-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            电子邮箱
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VInput :modelValue="user.email" />
-            </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          电子邮箱
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VInput :modelValue="user.email" />
          </div>
        </div>
-        <div
-          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-          >
-            个人说明
-          </label>
-          <div class="mt-1 sm:col-span-2 sm:mt-0">
-            <div class="flex max-w-lg shadow-sm">
-              <VTextarea modelValue="Halo" />
-            </div>
+      </div>
+      <div class="sm:grid sm:grid-cols-6 sm:items-start sm:gap-4 sm:pt-5">
+        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+          个人说明
+        </label>
+        <div class="mt-1 sm:col-span-3 sm:mt-0">
+          <div class="flex max-w-lg shadow-sm">
+            <VTextarea modelValue="Halo" />
          </div>
        </div>
      </div>
--- a/src/views/system/users/UserDetail.vue
+++ b/src/views/system/users/UserDetail.vue
@ -12,34 +12,34 @@ const router = useRouter();
  <div class="border-t border-gray-200">
    <dl class="divide-y divide-gray-100">
      <div
-        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
      >
        <dt class="text-sm font-medium text-gray-900">显示名称</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
          {{ user.name }}
        </dd>
      </div>
      <div
-        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
      >
        <dt class="text-sm font-medium text-gray-900">用户名</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
          {{ user.username }}
        </dd>
      </div>
      <div
-        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
      >
        <dt class="text-sm font-medium text-gray-900">电子邮箱</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
          {{ user.email || "未设置" }}
        </dd>
      </div>
      <div
-        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
      >
        <dt class="text-sm font-medium text-gray-900">角色</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
          <VTag @click="router.push({ name: 'RoleDetail', params: { id: 1 } })">
            <template #leftIcon>
              <IconUserSettings />
@ -49,32 +49,32 @@ const router = useRouter();
        </dd>
      </div>
      <div
-        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
      >
        <dt class="text-sm font-medium text-gray-900">描述</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
          Hello Halo
        </dd>
      </div>
      <div
-        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
      >
        <dt class="text-sm font-medium text-gray-900">两步验证</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">已启用</dd>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">已启用</dd>
      </div>
      <div
-        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
      >
        <dt class="text-sm font-medium text-gray-900">注册时间</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
          2022-01-01 00:00:00
        </dd>
      </div>
      <div
-        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
      >
        <dt class="text-sm font-medium text-gray-900">最近登录时间</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
          2022-05-30 12:00:00
        </dd>
      </div>