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