From 89892a9d79726f9cb8b23cd995006a1d3cde172e Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Tue, 31 May 2022 16:19:04 +0800 Subject: [PATCH] perf: improve forms ui Signed-off-by: Ryan Wang --- package.json | 3 + pnpm-lock.yaml | 28 ++ src/components/base/modal/Modal.vue | 2 +- src/layouts/SystemSettingsLayout.vue | 2 +- .../contents/attachments/AttachmentList.vue | 258 ++++++++++++++---- src/views/contents/sheets/SheetList.vue | 98 ++++--- src/views/dashboard/Dashboard.vue | 5 +- .../dashboard/widgets/QuickLinkWidget.vue | 80 ++++++ src/views/dashboard/widgets/index.ts | 2 + src/views/interface/themes/ThemeDetail.vue | 95 +++++-- src/views/system/plugins/PluginDetail.vue | 32 +-- src/views/system/settings/GeneralSettings.vue | 105 ++++--- .../system/settings/NotificationSettings.vue | 84 +++--- src/views/system/users/PasswordChange.vue | 64 ++--- .../system/users/ProfileModification.vue | 84 +++--- src/views/system/users/UserDetail.vue | 32 +-- 16 files changed, 615 insertions(+), 359 deletions(-) create mode 100644 src/views/dashboard/widgets/QuickLinkWidget.vue diff --git a/package.json b/package.json index 1ee2259c7..487709a10 100644 --- 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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d29b04642..e4f7ce4a1 100644 --- 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: diff --git a/src/components/base/modal/Modal.vue b/src/components/base/modal/Modal.vue index cf5dfd749..acbe28689 100644 --- 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; diff --git a/src/layouts/SystemSettingsLayout.vue b/src/layouts/SystemSettingsLayout.vue index 5303f7840..c4145b637 100644 --- a/src/layouts/SystemSettingsLayout.vue +++ b/src/layouts/SystemSettingsLayout.vue @@ -46,7 +46,7 @@ const handleTabChange = (id: string) => { diff --git a/src/views/contents/attachments/AttachmentList.vue b/src/views/contents/attachments/AttachmentList.vue index b99c4e098..c4762eb0a 100644 --- 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( - -
- -
-
-
+ + + {{ strategy.name }} + + + {{ strategy.description }} + + +
+ +
+ +
+ - - + + + +
+ +
+ - + -
- 引用位置 - - - -
+ +
+ 引用位置 + + + +
+ +
diff --git a/src/views/contents/sheets/SheetList.vue b/src/views/contents/sheets/SheetList.vue index 841c59dd7..3d5284af3 100644 --- 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");
- - - -
    -
  • -
    -
    -
    -
    - - {{ sheet.name }} - - {{ sheet.url }} -
    -
    -
    -
    + +
    +
      +
    • +
      +
      +
      +
      + - - - - -
      + {{ sheet.name }} + + {{ sheet.url }} +
      +
      +
      +
      + + + +
      -
      • -
    - - - - +
    +
    • +
+
+
+ - - +
+
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue index d4ddf519b..eec4b5bc5 100644 --- 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" }, + ], }, ]; diff --git a/src/views/dashboard/widgets/QuickLinkWidget.vue b/src/views/dashboard/widgets/QuickLinkWidget.vue new file mode 100644 index 000000000..7b756e03b --- /dev/null +++ b/src/views/dashboard/widgets/QuickLinkWidget.vue @@ -0,0 +1,80 @@ + + diff --git a/src/views/dashboard/widgets/index.ts b/src/views/dashboard/widgets/index.ts index ab2c4f690..2293a71a6 100644 --- 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; diff --git a/src/views/interface/themes/ThemeDetail.vue b/src/views/interface/themes/ThemeDetail.vue index ceb42638d..7defed850 100644 --- 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) => {
ID
-
+
{{ currentTheme.id }}
作者
-
+
{{ currentTheme.author.name }}
网站
-
+
{{ currentTheme.website }}
源码仓库
-
+
{{ currentTheme.repo }}
当前版本
-
+
{{ currentTheme.version }}
Halo 版本要求
-
+
{{ currentTheme.require }}
存储位置
-
+
{{ currentTheme.themePath }}
插件依赖
-
- 无 +
+ +
    +
  • +
    + + run.halo.plugins.links + +
    + + 已安装 + +
    +
    +
    • +
  • +
    + + run.halo.plugins.photos + +
    + + 未安装 + +
    +
    +
    • +
@@ -243,31 +284,31 @@ const handleChangeTheme = (theme: any) => {
-
-
+ +
-
+
-
+
@@ -275,28 +316,28 @@ const handleChangeTheme = (theme: any) => {
-
+
-
+
diff --git a/src/views/system/plugins/PluginDetail.vue b/src/views/system/plugins/PluginDetail.vue index c39608fc8..a546ad28c 100644 --- a/src/views/system/plugins/PluginDetail.vue +++ b/src/views/system/plugins/PluginDetail.vue @@ -27,7 +27,7 @@ console.log(plugin); @@ -60,7 +60,7 @@ console.log(plugin);
名称
@@ -68,7 +68,7 @@ console.log(plugin);
插件类别
@@ -80,7 +80,7 @@ console.log(plugin);
版本
@@ -88,7 +88,7 @@ console.log(plugin);
Halo 版本要求
@@ -96,7 +96,7 @@ console.log(plugin);
提供方
@@ -106,7 +106,7 @@ console.log(plugin);
协议
@@ -114,7 +114,7 @@ console.log(plugin);
模型定义
@@ -146,10 +146,10 @@ console.log(plugin);
权限定义
-
+
- -
+ +
-
+
-
+
diff --git a/src/views/system/settings/GeneralSettings.vue b/src/views/system/settings/GeneralSettings.vue index 79cae699c..1083cddf0 100644 --- 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";