diff --git a/package.json b/package.json index d43fe748..6051c74c 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "dependencies": { "@halo-dev/admin-api": "^1.0.0", "@vueuse/core": "^8.5.0", + "floating-vue": "2.0.0-beta.16", "pinia": "^2.0.14", "tippy.js": "^6.3.7", "vue": "^3.2.36", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aaaa40e1..08cc1722 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,6 +21,7 @@ specifiers: eslint: ^8.16.0 eslint-plugin-cypress: ^2.12.1 eslint-plugin-vue: ^8.7.1 + floating-vue: 2.0.0-beta.16 histoire: ^0.4.6 husky: ^8.0.1 jsdom: ^19.0.0 @@ -47,6 +48,7 @@ specifiers: dependencies: '@halo-dev/admin-api': 1.0.0 '@vueuse/core': 8.5.0_vue@3.2.36 + floating-vue: 2.0.0-beta.16_vue@3.2.36 pinia: 2.0.14_7gwbvmtszsbbeay4sidijbp26i tippy.js: 6.3.7 vue: 3.2.36 @@ -1397,13 +1399,11 @@ packages: /@floating-ui/core/0.3.1: resolution: {integrity: sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==} - dev: true /@floating-ui/dom/0.1.10: resolution: {integrity: sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==} dependencies: '@floating-ui/core': 0.3.1 - dev: true /@halo-dev/admin-api/1.0.0: resolution: {integrity: sha512-DkuNK91Let+jPLx9YclhaU0XWKMA96LJNzGtYUq3e5VGuvPYqPY8AJKfQ8DNLA/3gmkF2b20nUCSDsZRz/ZObQ==} @@ -3912,7 +3912,6 @@ packages: '@floating-ui/dom': 0.1.10 vue: 3.2.36 vue-resize: 2.0.0-alpha.1_vue@3.2.36 - dev: true /follow-redirects/1.14.9: resolution: {integrity: sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==} @@ -6573,7 +6572,6 @@ packages: vue: ^3.0.0 dependencies: vue: 3.2.36 - dev: true /vue-router/4.0.15_vue@3.2.36: resolution: {integrity: sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==} diff --git a/src/App.vue b/src/App.vue index 8949e654..dd25f456 100644 --- a/src/App.vue +++ b/src/App.vue @@ -35,4 +35,8 @@ body { *::-webkit-scrollbar-thumb:hover { background-color: #bbb; } + +.v-popper__popper { + outline: none; +} diff --git a/src/core/icons.ts b/src/core/icons.ts index 52b52416..77c6d791 100644 --- a/src/core/icons.ts +++ b/src/core/icons.ts @@ -7,6 +7,10 @@ import IconArrowRight from "~icons/ri/arrow-right-s-line"; // @ts-ignore import IconArrowDown from "~icons/ri/arrow-down-s-fill"; // @ts-ignore +import IconArrowUpLine from "~icons/ri/arrow-up-s-line"; +// @ts-ignore +import IconArrowDownLine from "~icons/ri/arrow-down-s-line"; +// @ts-ignore import IconBookRead from "~icons/ri/book-read-line"; // @ts-ignore import IconPages from "~icons/ri/pages-line"; @@ -82,4 +86,6 @@ export { IconList, IconGrid, IconCheckboxFill, + IconArrowUpLine, + IconArrowDownLine, }; diff --git a/src/main.ts b/src/main.ts index 12010a2f..14599b08 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,10 +4,19 @@ import { createPinia } from "pinia"; import App from "./App.vue"; import router from "./router"; import "@/styles/tailwind.css"; +import { Dropdown, Menu, Tooltip, VClosePopper, VTooltip } from "floating-vue"; +import "floating-vue/dist/style.css"; const app = createApp(App); app.use(createPinia()); app.use(router); +app.directive("tooltip", VTooltip); +app.directive("close-popper", VClosePopper); + +app.component("FloatingDropdown", Dropdown); +app.component("FloatingTooltip", Tooltip); +app.component("FloatingMenu", Menu); + app.mount("#app"); diff --git a/src/views/contents/attachments/AttachmentList.vue b/src/views/contents/attachments/AttachmentList.vue index 4bd5ff17..40418c39 100644 --- a/src/views/contents/attachments/AttachmentList.vue +++ b/src/views/contents/attachments/AttachmentList.vue @@ -5,7 +5,9 @@ import { VModal } from "@/components/base/modal"; import { VCard } from "@/components/base/card"; import { VSpace } from "@/components/base/space"; 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 { IconArrowDown, IconArrowLeft, @@ -299,14 +301,62 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
-
- 上传者 - - - -
+ +
+ 上传者 + + + +
+ +
@@ -323,14 +373,42 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
-
- 排序 - - - -
+ +
+ 排序 + + + +
+ +
{
-
- 分类 - - - -
-
- 标签 - - - -
-
- 作者 - - - -
-
- 排序 - - - -
+ +
+ 分类 + + + +
+ + + +
+ 标签 + + + +
+ + + +
+ 作者 + + + +
+ + + +
+ 排序 + + + +
+ +
diff --git a/src/views/system/plugins/PluginList.vue b/src/views/system/plugins/PluginList.vue index 7d94cb8e..9fee8a67 100644 --- a/src/views/system/plugins/PluginList.vue +++ b/src/views/system/plugins/PluginList.vue @@ -69,38 +69,118 @@ const handleRouteToDetail = (plugin: any) => {
+ +
+ 启用状态 + + + +
+ +
- 启用状态 - - - -
-
类别
-
- 提供方 - - - -
-
- 排序 - - - -
+ +
+ 提供方 + + + +
+ + + +
+ 排序 + + + +
+ +
diff --git a/src/views/system/users/UserList.vue b/src/views/system/users/UserList.vue index dd7067a7..4b696ee1 100644 --- a/src/views/system/users/UserList.vue +++ b/src/views/system/users/UserList.vue @@ -65,14 +65,32 @@ const handleRouteToDetail = (username: string) => {
-
- 状态 - - - -
+ +
+ 状态 + + + +
+ +
@@ -81,14 +99,32 @@ const handleRouteToDetail = (username: string) => {
-
- 排序 - - - -
+ +
+ 排序 + + + +
+ +