mirror of https://github.com/halo-dev/halo
refactor: refine extension settings page (#6231)
#### What type of PR is this? /area ui /kind improvement /milestone 2.17.x #### What this PR does / why we need it: 完善插件扩展设置页面： 1. 完善 i18n。 2. 将入口移动至插件页面右上角的操作按钮区域。 #### Does this PR introduce a user-facing change? ```release-note None ```pull/6211/head
Ryan Wang
GitHub
parent
f3f48e2753
commit
d92bb4398e
|
|
@ -1,6 +1,11 @@
|
|||
<script lang="ts" setup>
|
||||
import { coreApiClient } from "@halo-dev/api-client";
|
||||
import { IconSettings, VCard, VPageHeader } from "@halo-dev/components";
|
||||
import {
|
||||
IconSettings,
|
||||
VButton,
|
||||
VCard,
|
||||
VPageHeader,
|
||||
} from "@halo-dev/components";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { useRouteQuery } from "@vueuse/router";
|
||||
import { computed, watch } from "vue";
|
||||
|
|
@ -41,10 +46,15 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<VPageHeader title="扩展点设置">
|
||||
<VPageHeader :title="$t('core.plugin.extension-settings.title')">
|
||||
<template #icon>
|
||||
<IconSettings class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton size="sm" @click="$router.back()">
|
||||
{{ $t("core.common.buttons.back") }}
|
||||
</VButton>
|
||||
</template>
|
||||
</VPageHeader>
|
||||
|
||||
<div class="m-0 md:m-4">
|
||||
|
|
@ -57,7 +67,13 @@ watch(
|
|||
<div
|
||||
class="sticky top-0 z-10 flex h-12 items-center border-b bg-white px-4"
|
||||
>
|
||||
<h2 class="font-semibold text-gray-900">扩展点定义</h2>
|
||||
<h2 class="font-semibold text-gray-900">
|
||||
{{
|
||||
$t(
|
||||
"core.plugin.extension-settings.extension-point-definition.title"
|
||||
)
|
||||
}}
|
||||
</h2>
|
||||
</div>
|
||||
<ul
|
||||
class="box-border h-full w-full divide-y divide-gray-100 overflow-auto"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
IconAddCircle,
|
||||
IconPlug,
|
||||
IconRefreshLine,
|
||||
IconSettings,
|
||||
VButton,
|
||||
VCard,
|
||||
VDropdown,
|
||||
|
|
@ -160,16 +161,27 @@ onMounted(() => {
|
|||
<IconPlug class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton
|
||||
v-permission="['system:plugins:manage']"
|
||||
type="secondary"
|
||||
@click="pluginInstallationModalVisible = true"
|
||||
>
|
||||
<template #icon>
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
</template>
|
||||
{{ $t("core.common.buttons.install") }}
|
||||
</VButton>
|
||||
<VSpace>
|
||||
<VButton
|
||||
size="sm"
|
||||
@click="$router.push({ name: 'PluginExtensionPointSettings' })"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
{{ $t("core.plugin.actions.extension-point-settings") }}
|
||||
</VButton>
|
||||
<VButton
|
||||
v-permission="['system:plugins:manage']"
|
||||
type="secondary"
|
||||
@click="pluginInstallationModalVisible = true"
|
||||
>
|
||||
<template #icon>
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
</template>
|
||||
{{ $t("core.common.buttons.install") }}
|
||||
</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</VPageHeader>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,11 @@ const { data: extensionDefinitions, isLoading } = useExtensionDefinitionFetch(
|
|||
appear
|
||||
name="fade"
|
||||
>
|
||||
<VEmpty title="当前没有扩展点实现"></VEmpty>
|
||||
<VEmpty
|
||||
:title="
|
||||
$t('core.plugin.extension-settings.extension-definition.empty.title')
|
||||
"
|
||||
></VEmpty>
|
||||
</Transition>
|
||||
<Transition v-else name="fade" appear>
|
||||
<ul
|
||||
|
|
|
|||
|
|
@ -113,7 +113,11 @@ async function onExtensionChange(e: Event) {
|
|||
appear
|
||||
name="fade"
|
||||
>
|
||||
<VEmpty title="当前没有扩展点实现"></VEmpty>
|
||||
<VEmpty
|
||||
:title="
|
||||
$t('core.plugin.extension-settings.extension-definition.empty.title')
|
||||
"
|
||||
></VEmpty>
|
||||
</Transition>
|
||||
<Transition v-else name="fade" appear>
|
||||
<ul
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import BasicLayout from "@console/layouts/BasicLayout.vue";
|
||||
import { IconPlug, IconSettings } from "@halo-dev/components";
|
||||
import { IconPlug } from "@halo-dev/components";
|
||||
import { definePlugin } from "@halo-dev/console-shared";
|
||||
import { markRaw } from "vue";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
|
|
@ -36,12 +36,8 @@ export default definePlugin({
|
|||
name: "PluginExtensionPointSettings",
|
||||
component: PluginExtensionPointSettings,
|
||||
meta: {
|
||||
title: "扩展点设置",
|
||||
title: "core.plugin.extension-settings.title",
|
||||
hideFooter: true,
|
||||
menu: {
|
||||
name: "扩展点设置",
|
||||
icon: markRaw(IconSettings),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1003,6 +1003,15 @@ core:
|
|||
reason: Reason
|
||||
message: Message
|
||||
last_transition_time: Last transition time
|
||||
extension-settings:
|
||||
title: Extension settings
|
||||
extension-point-definition:
|
||||
title: Extension point definitions
|
||||
extension-definition:
|
||||
empty:
|
||||
title: There is currently no extension point implemented
|
||||
actions:
|
||||
extension-point-settings: Extension settings
|
||||
user:
|
||||
title: Users
|
||||
actions:
|
||||
|
|
|
|||
|
|
@ -937,6 +937,15 @@ core:
|
|||
reason: 原因
|
||||
message: 信息
|
||||
last_transition_time: 时间
|
||||
extension-settings:
|
||||
title: 扩展配置
|
||||
extension-point-definition:
|
||||
title: 扩展点定义
|
||||
extension-definition:
|
||||
empty:
|
||||
title: 当前没有扩展点实现
|
||||
actions:
|
||||
extension-point-settings: 扩展配置
|
||||
user:
|
||||
title: 用户
|
||||
actions:
|
||||
|
|
|
|||
|
|
@ -917,6 +917,15 @@ core:
|
|||
reason: 原因
|
||||
message: 訊息
|
||||
last_transition_time: 時間
|
||||
extension-settings:
|
||||
title: 擴展配置
|
||||
extension-point-definition:
|
||||
title: 擴展點定義
|
||||
extension-definition:
|
||||
empty:
|
||||
title: 當前沒有擴展點實現
|
||||
actions:
|
||||
extension-point-settings: 擴展配置
|
||||
user:
|
||||
title: 用戶
|
||||
actions:
|
||||
|
|
|
|||
Loading…
Reference in New Issue