diff --git a/packages/components/src/components/modal/Modal.vue b/packages/components/src/components/modal/Modal.vue index 6b8572df0..b9e319b0a 100644 --- a/packages/components/src/components/modal/Modal.vue +++ b/packages/components/src/components/modal/Modal.vue @@ -103,6 +103,9 @@ watch(
{{ title }}
+
+ +
diff --git a/packages/components/src/components/tabs/Tabbar.story.vue b/packages/components/src/components/tabs/Tabbar.story.vue index 71122c095..a6b0a7de2 100644 --- a/packages/components/src/components/tabs/Tabbar.story.vue +++ b/packages/components/src/components/tabs/Tabbar.story.vue @@ -3,11 +3,14 @@ import { VTabbar } from "./index"; function initState() { return { - activeId: "johnniang", + activeId: "general", items: [ - { label: "Ryan Wang", id: "ryanwang" }, - { label: "JohnNiang", id: "johnniang" }, - { label: "guqing", id: "guqing" }, + { label: "基本设置", id: "general" }, + { label: "文章设置", id: "post" }, + { label: "SEO 设置", id: "seo" }, + { label: "评论设置", id: "comment" }, + { label: "主题路由设置", id: "theme-route" }, + { label: "代码注入", id: "code-inject" }, ], }; } diff --git a/packages/components/src/components/tabs/Tabbar.vue b/packages/components/src/components/tabs/Tabbar.vue index 749e96ea6..f1ac5e574 100644 --- a/packages/components/src/components/tabs/Tabbar.vue +++ b/packages/components/src/components/tabs/Tabbar.vue @@ -60,18 +60,45 @@ const handleChange = (id: number | string) => { .tabbar-items { @apply flex items-center - flex-row; + flex-row + overflow-x-auto + py-0.5; + + &::-webkit-scrollbar-track-piece { + background-color: #f8f8f8; + -webkit-border-radius: 2em; + -moz-border-radius: 2em; + border-radius: 2em; + } + + &::-webkit-scrollbar { + width: 4px; + height: 4px; + } + + &::-webkit-scrollbar-thumb { + background-color: #ddd; + background-clip: padding-box; + -webkit-border-radius: 2em; + -moz-border-radius: 2em; + border-radius: 2em; + } + + &::-webkit-scrollbar-thumb:hover { + background-color: #bbb; + } } .tabbar-item { - @apply flex + @apply inline-flex cursor-pointer self-center transition-all text-sm justify-center gap-2 - h-9; + h-9 + whitespace-nowrap; .tabbar-item-label, .tabbar-item-icon { @@ -126,7 +153,8 @@ const handleChange = (id: number | string) => { } &.tabbar-outline { - @apply p-1 + @apply px-1 + py-0.5 bg-gray-100 rounded-base; diff --git a/packages/components/src/icons/icons.ts b/packages/components/src/icons/icons.ts index 7ceecb076..d50146f47 100644 --- a/packages/components/src/icons/icons.ts +++ b/packages/components/src/icons/icons.ts @@ -51,6 +51,7 @@ import IconMotionLine from "~icons/ri/emotion-line"; import IconReplyLine from "~icons/ri/reply-line"; import IconExternalLinkLine from "~icons/ri/external-link-line"; import IconRefreshLine from "~icons/ri/refresh-line"; +import IconWindowLine from "~icons/ri/window-line"; export { IconDashboard, @@ -106,4 +107,5 @@ export { IconReplyLine, IconExternalLinkLine, IconRefreshLine, + IconWindowLine, }; diff --git a/src/modules/dashboard/widgets/QuickLinkWidget.vue b/src/modules/dashboard/widgets/QuickLinkWidget.vue index 220d32e92..b69a92125 100644 --- a/src/modules/dashboard/widgets/QuickLinkWidget.vue +++ b/src/modules/dashboard/widgets/QuickLinkWidget.vue @@ -7,86 +7,113 @@ import { IconPlug, IconUserSettings, IconPalette, + IconWindowLine, VCard, IconUserLine, } from "@halo-dev/components"; -import { inject, markRaw, type Component } from "vue"; +import { inject, markRaw, ref, type Component } from "vue"; import { useRouter } from "vue-router"; -import type { RouteLocationRaw } from "vue-router"; import type { User } from "@halo-dev/api-client"; +import ThemePreviewModal from "@/modules/interface/themes/components/preview/ThemePreviewModal.vue"; interface Action { icon: Component; title: string; - route: RouteLocationRaw; + action: () => void; permissions?: string[]; } const currentUser = inject("currentUser"); +const router = useRouter(); + +const themePreviewVisible = ref(false); + const actions: Action[] = [ { icon: markRaw(IconUserLine), title: "个人资料", - route: { name: "UserDetail", params: { name: currentUser?.metadata.name } }, + action: () => { + router.push({ + name: "UserDetail", + params: { name: currentUser?.metadata.name }, + }); + }, + }, + { + icon: markRaw(IconWindowLine), + title: "查看站点", + action: () => { + themePreviewVisible.value = true; + }, }, { icon: markRaw(IconBookRead), title: "创建文章", - route: { - name: "PostEditor", + action: () => { + router.push({ + name: "PostEditor", + }); }, permissions: ["system:posts:manage"], }, { icon: markRaw(IconPages), title: "创建页面", - route: { - name: "SinglePageEditor", + action: () => { + router.push({ + name: "SinglePageEditor", + }); }, permissions: ["system:singlepages:manage"], }, { icon: markRaw(IconFolder), title: "附件上传", - route: { - name: "Attachments", - query: { - action: "upload", - }, + action: () => { + router.push({ + name: "Attachments", + query: { + action: "upload", + }, + }); }, permissions: ["system:attachments:manage"], }, { icon: markRaw(IconPalette), title: "主题管理", - route: { - name: "ThemeDetail", + action: () => { + router.push({ + name: "ThemeDetail", + }); }, permissions: ["system:themes:view"], }, { icon: markRaw(IconPlug), title: "插件管理", - route: { - name: "Plugins", + action: () => { + router.push({ + name: "Plugins", + }); }, permissions: ["system:plugins:view"], }, { icon: markRaw(IconUserSettings), title: "新建用户", - route: { - name: "Users", - query: { - action: "create", - }, + action: () => { + router.push({ + name: "Users", + query: { + action: "create", + }, + }); }, permissions: ["system:users:manage"], }, ]; - -const router = useRouter(); diff --git a/src/modules/interface/themes/Visual.vue b/src/modules/interface/themes/Visual.vue deleted file mode 100644 index 16aab450b..000000000 --- a/src/modules/interface/themes/Visual.vue +++ /dev/null @@ -1,175 +0,0 @@ - - diff --git a/src/modules/interface/themes/components/ThemeListModal.vue b/src/modules/interface/themes/components/ThemeListModal.vue index c473e9296..b4e7a6e0f 100644 --- a/src/modules/interface/themes/components/ThemeListModal.vue +++ b/src/modules/interface/themes/components/ThemeListModal.vue @@ -2,8 +2,6 @@ import { IconAddCircle, IconGitHub, - IconArrowLeft, - IconArrowRight, Dialog, VButton, VEmpty, @@ -17,7 +15,7 @@ import { VTabs, } from "@halo-dev/components"; import LazyImage from "@/components/image/LazyImage.vue"; -import UrlPreviewModal from "@/components/preview/UrlPreviewModal.vue"; +import ThemePreviewModal from "./preview/ThemePreviewModal.vue"; import ThemeUploadModal from "./ThemeUploadModal.vue"; import { computed, ref, watch } from "vue"; import type { Theme } from "@halo-dev/api-client"; @@ -32,18 +30,18 @@ const { currentUserHasPermission } = usePermission(); const props = withDefaults( defineProps<{ visible: boolean; - selectedTheme: Theme | null; + selectedTheme?: Theme; }>(), { visible: false, - selectedTheme: null, + selectedTheme: undefined, } ); const emit = defineEmits<{ (event: "update:visible", visible: boolean): void; (event: "close"): void; - (event: "update:selectedTheme", theme: Theme | null): void; + (event: "update:selectedTheme", theme?: Theme): void; (event: "select", theme: Theme | null): void; }>(); @@ -193,48 +191,12 @@ defineExpose({ handleFetchThemes, }); -const preview = ref(false); +const previewVisible = ref(false); const selectedPreviewTheme = ref(); -const previewUrl = computed(() => { - if (!selectedPreviewTheme.value) { - return ""; - } - return `${import.meta.env.VITE_API_URL}/?preview-theme=${ - selectedPreviewTheme.value.metadata.name - }`; -}); - -const previewModalTitle = computed(() => { - if (!selectedPreviewTheme.value) { - return ""; - } - return `预览主题：${selectedPreviewTheme.value.spec.displayName}`; -}); - const handleOpenPreview = (theme: Theme) => { selectedPreviewTheme.value = theme; - preview.value = true; -}; - -const handleSelectPreviousPreviewTheme = async () => { - const index = themes.value.findIndex( - (theme) => theme.metadata.name === selectedPreviewTheme.value?.metadata.name - ); - if (index > 0) { - selectedPreviewTheme.value = themes.value[index - 1]; - return; - } -}; - -const handleSelectNextPreviewTheme = () => { - const index = themes.value.findIndex( - (theme) => theme.metadata.name === selectedPreviewTheme.value?.metadata.name - ); - if (index < themes.value.length - 1) { - selectedPreviewTheme.value = themes.value[index + 1]; - return; - } + previewVisible.value = true; }; diff --git a/src/modules/interface/themes/components/preview/ThemeListItem.vue b/src/modules/interface/themes/components/preview/ThemeListItem.vue new file mode 100644 index 000000000..e805fc02e --- /dev/null +++ b/src/modules/interface/themes/components/preview/ThemeListItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/src/modules/interface/themes/components/preview/ThemePreviewModal.vue b/src/modules/interface/themes/components/preview/ThemePreviewModal.vue new file mode 100644 index 000000000..571646627 --- /dev/null +++ b/src/modules/interface/themes/components/preview/ThemePreviewModal.vue @@ -0,0 +1,383 @@ + + diff --git a/src/modules/interface/themes/layouts/ThemeLayout.vue b/src/modules/interface/themes/layouts/ThemeLayout.vue index a0b65df5c..f33ce73a6 100644 --- a/src/modules/interface/themes/layouts/ThemeLayout.vue +++ b/src/modules/interface/themes/layouts/ThemeLayout.vue @@ -26,6 +26,7 @@ import { VTabbar, } from "@halo-dev/components"; import ThemeListModal from "../components/ThemeListModal.vue"; +import ThemePreviewModal from "../components/preview/ThemePreviewModal.vue"; import type { SettingForm, Theme } from "@halo-dev/api-client"; import { usePermission } from "@/utils/permission"; import { useThemeStore } from "@/stores/theme"; @@ -53,8 +54,9 @@ const initialTabs: ThemeTab[] = [ ]; const tabs = ref(cloneDeep(initialTabs)); -const selectedTheme = ref(); +const selectedTheme = ref(); const themesModal = ref(false); +const previewModal = ref(false); const activeTab = ref(""); const { loading, isActivated, handleActiveTheme } = @@ -181,15 +183,11 @@ onMounted(() => { > 启用 - + - 可视化编辑 + 预览 @@ -242,5 +240,7 @@ onMounted(() => {
+ + diff --git a/src/modules/interface/themes/module.ts b/src/modules/interface/themes/module.ts index 1c7c35f46..4a1e611ca 100644 --- a/src/modules/interface/themes/module.ts +++ b/src/modules/interface/themes/module.ts @@ -1,9 +1,7 @@ import { definePlugin } from "@halo-dev/console-shared"; -import BlankLayout from "@/layouts/BlankLayout.vue"; import ThemeLayout from "./layouts/ThemeLayout.vue"; import ThemeDetail from "./ThemeDetail.vue"; import ThemeSetting from "./ThemeSetting.vue"; -import Visual from "./Visual.vue"; import { IconPalette } from "@halo-dev/components"; import { markRaw } from "vue"; @@ -42,19 +40,5 @@ export default definePlugin({ }, ], }, - { - path: "/theme/visual", - component: BlankLayout, - children: [ - { - path: "", - name: "ThemeVisual", - component: Visual, - meta: { - title: "可视化编辑", - }, - }, - ], - }, ], });