mirror of https://github.com/halo-dev/halo-admin
Ryan Wang
2 years ago
parent
99c6caa788
commit
2925775c9a
@ -0,0 +1,135 @@
|
||||
<script lang="ts" setup>
|
||||
import { VButton, VCard, VPageHeader, VTabbar } from "@halo-dev/components";
|
||||
import type { RouteLocationRaw } from "vue-router";
|
||||
import { RouterView, useRoute, useRouter } from "vue-router";
|
||||
import type { Ref } from "vue";
|
||||
import { onMounted, provide, ref, watch } from "vue";
|
||||
import type { Plugin } from "@halo-dev/api-client";
|
||||
import type {
|
||||
FormKitSetting,
|
||||
FormKitSettingSpec,
|
||||
} from "@halo-dev/admin-shared";
|
||||
import { apiClient, BasicLayout } from "@halo-dev/admin-shared";
|
||||
|
||||
interface PluginTab {
|
||||
id: string;
|
||||
label: string;
|
||||
route: RouteLocationRaw;
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const plugin = ref<Plugin>({} as Plugin);
|
||||
const tabs = ref<PluginTab[]>([
|
||||
{
|
||||
id: "detail",
|
||||
label: "详情",
|
||||
route: {
|
||||
name: "PluginDetail",
|
||||
},
|
||||
},
|
||||
]);
|
||||
const activeTab = ref<string>();
|
||||
|
||||
provide<Ref<Plugin>>("plugin", plugin);
|
||||
provide<Ref<string | undefined>>("activeTab", activeTab);
|
||||
|
||||
const handleFetchPlugin = async () => {
|
||||
try {
|
||||
const response =
|
||||
await apiClient.extension.plugin.getpluginHaloRunV1alpha1Plugin(
|
||||
route.params.name as string
|
||||
);
|
||||
plugin.value = response.data;
|
||||
|
||||
await handleFetchSettings();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFetchSettings = async () => {
|
||||
if (!plugin.value.spec.settingName) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await apiClient.extension.setting.getv1alpha1Setting(
|
||||
plugin.value.spec.settingName as string
|
||||
);
|
||||
const settings = response.data as FormKitSetting;
|
||||
|
||||
const { spec } = settings;
|
||||
|
||||
if (spec) {
|
||||
spec.forEach((item: FormKitSettingSpec) => {
|
||||
tabs.value.push({
|
||||
id: item.group,
|
||||
label: item.label || "",
|
||||
route: {
|
||||
name: "PluginSetting",
|
||||
params: {
|
||||
group: item.group,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTabChange = (id: string) => {
|
||||
const tab = tabs.value.find((item) => item.id === id);
|
||||
if (tab) {
|
||||
router.push(tab.route);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await handleFetchPlugin();
|
||||
|
||||
// @ts-ignore
|
||||
const tab = tabs.value.find((tab) => tab.route.name === route.name);
|
||||
activeTab.value = tab ? tab.id : tabs.value[0].id;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.name,
|
||||
async (newRouteName) => {
|
||||
// @ts-ignore
|
||||
const tab = tabs.value.find((tab) => tab.route.name === newRouteName);
|
||||
activeTab.value = tab ? tab.id : tabs.value[0].id;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<BasicLayout>
|
||||
<VPageHeader :title="plugin?.spec?.displayName">
|
||||
<template #icon>
|
||||
<img :src="plugin?.spec?.logo" class="mr-2 h-8 w-8" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton class="opacity-0" type="secondary">安装</VButton>
|
||||
</template>
|
||||
</VPageHeader>
|
||||
|
||||
<div class="m-0 md:m-4">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<template #header>
|
||||
<VTabbar
|
||||
v-model:active-id="activeTab"
|
||||
:items="tabs"
|
||||
class="w-full !rounded-none"
|
||||
type="outline"
|
||||
@change="handleTabChange"
|
||||
></VTabbar>
|
||||
</template>
|
||||
</VCard>
|
||||
<div>
|
||||
<RouterView :key="activeTab" />
|
||||
</div>
|
||||
</div>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
@ -0,0 +1,10 @@
|
||||
import type { Setting, SettingSpec } from "@halo-dev/api-client";
|
||||
import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
|
||||
|
||||
export interface FormKitSettingSpec extends Omit<SettingSpec, "formSchema"> {
|
||||
formSchema: FormKitSchemaCondition | FormKitSchemaNode[];
|
||||
}
|
||||
|
||||
export interface FormKitSetting extends Omit<Setting, "spec"> {
|
||||
spec: Array<FormKitSettingSpec>;
|
||||
}
|
||||
@ -0,0 +1,149 @@
|
||||
<script lang="ts" setup>
|
||||
import { VButton } from "@halo-dev/components";
|
||||
import type { Ref } from "vue";
|
||||
import { computed, inject, onMounted, ref, watch } from "vue";
|
||||
import type { ConfigMap, Plugin } from "@halo-dev/api-client";
|
||||
import type {
|
||||
FormKitSetting,
|
||||
FormKitSettingSpec,
|
||||
} from "@halo-dev/admin-shared";
|
||||
import { apiClient } from "@halo-dev/admin-shared";
|
||||
|
||||
const plugin = inject<Ref<Plugin>>("plugin", ref({} as Plugin));
|
||||
const settings = ref<FormKitSetting>({} as FormKitSetting);
|
||||
const configmapFormData = ref<Record<string, Record<string, string>>>({});
|
||||
const configmap = ref<ConfigMap>({
|
||||
data: {},
|
||||
apiVersion: "v1alpha1",
|
||||
kind: "ConfigMap",
|
||||
metadata: {
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
const saving = ref(false);
|
||||
|
||||
const group = inject<Ref<string | undefined>>("activeTab");
|
||||
|
||||
const formSchema = computed(() => {
|
||||
if (!settings.value.spec) {
|
||||
return;
|
||||
}
|
||||
return settings.value.spec.find((item) => item.group === group?.value)
|
||||
?.formSchema;
|
||||
});
|
||||
|
||||
const handleFetchSettings = async () => {
|
||||
if (!plugin.value.spec?.settingName) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await apiClient.extension.setting.getv1alpha1Setting(
|
||||
plugin.value.spec.settingName as string
|
||||
);
|
||||
settings.value = response.data as FormKitSetting;
|
||||
|
||||
const { spec } = settings.value;
|
||||
|
||||
if (spec) {
|
||||
spec.forEach((item: FormKitSettingSpec) => {
|
||||
configmapFormData.value[item.group] = {};
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFetchConfigMap = async () => {
|
||||
if (!plugin.value.spec?.configMapName) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await apiClient.extension.configMap.getv1alpha1ConfigMap(
|
||||
plugin.value.spec?.configMapName as string
|
||||
);
|
||||
configmap.value = response.data;
|
||||
|
||||
const { data } = configmap.value;
|
||||
|
||||
if (data) {
|
||||
Object.keys(data).forEach((key) => {
|
||||
configmapFormData.value[key] = JSON.parse(data[key]);
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveConfigMap = async () => {
|
||||
try {
|
||||
saving.value = true;
|
||||
|
||||
if (!configmap.value.metadata.name && plugin.value.spec.configMapName) {
|
||||
configmap.value.metadata.name = plugin.value.spec.configMapName;
|
||||
}
|
||||
|
||||
settings.value.spec.forEach((item: FormKitSettingSpec) => {
|
||||
// @ts-ignore
|
||||
configmap.value.data[item.group] = JSON.stringify(
|
||||
configmapFormData.value[item.group]
|
||||
);
|
||||
});
|
||||
|
||||
if (!configmap.value.metadata.creationTimestamp) {
|
||||
await apiClient.extension.configMap.createv1alpha1ConfigMap(
|
||||
configmap.value
|
||||
);
|
||||
} else {
|
||||
await apiClient.extension.configMap.updatev1alpha1ConfigMap(
|
||||
configmap.value.metadata.name,
|
||||
configmap.value
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
await handleFetchConfigMap();
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
handleFetchSettings();
|
||||
handleFetchConfigMap();
|
||||
});
|
||||
|
||||
watch([() => plugin.value, () => group?.value], () => {
|
||||
handleFetchConfigMap();
|
||||
handleFetchConfigMap();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-white p-4 sm:px-6">
|
||||
<div class="w-1/3">
|
||||
<FormKit
|
||||
v-if="group && formSchema"
|
||||
:id="group"
|
||||
v-model="configmapFormData[group]"
|
||||
:actions="false"
|
||||
:preserve="true"
|
||||
type="form"
|
||||
@submit="handleSaveConfigMap"
|
||||
>
|
||||
<FormKitSchema :schema="formSchema" />
|
||||
</FormKit>
|
||||
</div>
|
||||
<div class="pt-5">
|
||||
<div class="flex justify-start">
|
||||
<VButton
|
||||
:loading="saving"
|
||||
type="secondary"
|
||||
@click="$formkit.submit(group || '')"
|
||||
>
|
||||
保存
|
||||
</VButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in new issue