mirror of
https://github.com/certd/certd.git
synced 2026-05-17 22:07:34 +08:00
docs(guide): 更新常见问题解答
- 新增 ping 域名的故障排查步骤 - 添加查看容器日志的方法 - 补充 IPv6网络配置的说明
This commit is contained in:
@@ -11,11 +11,11 @@ interface Props {
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: "ThemeToggleButton"
|
||||
name: "ThemeToggleButton",
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: "normal"
|
||||
type: "normal",
|
||||
});
|
||||
|
||||
const isDark = defineModel<boolean>();
|
||||
@@ -29,13 +29,13 @@ const bindProps = computed(() => {
|
||||
|
||||
return type === "normal"
|
||||
? {
|
||||
variant: "heavy" as const
|
||||
variant: "heavy" as const,
|
||||
}
|
||||
: {
|
||||
class: "rounded-full",
|
||||
size: "icon" as const,
|
||||
style: { padding: "7px" },
|
||||
variant: "icon" as const
|
||||
variant: "icon" as const,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -59,12 +59,12 @@ function toggleTheme(event: MouseEvent) {
|
||||
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark.value ? [...clipPath].reverse() : clipPath
|
||||
clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
|
||||
},
|
||||
{
|
||||
duration: 450,
|
||||
easing: "ease-in",
|
||||
pseudoElement: isDark.value ? "::view-transition-old(root)" : "::view-transition-new(root)"
|
||||
pseudoElement: isDark.value ? "::view-transition-old(root)" : "::view-transition-new(root)",
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
@@ -10,16 +10,16 @@ import { ToggleGroup, ToggleGroupItem, VbenTooltip } from "/@/vben//shadcn-ui";
|
||||
import ThemeButton from "./theme-button.vue";
|
||||
|
||||
defineOptions({
|
||||
name: "ThemeToggle"
|
||||
name: "ThemeToggle",
|
||||
});
|
||||
|
||||
withDefaults(defineProps<{ shouldOnHover?: boolean }>(), {
|
||||
shouldOnHover: false
|
||||
shouldOnHover: false,
|
||||
});
|
||||
|
||||
function handleChange(isDark: boolean) {
|
||||
updatePreferences({
|
||||
theme: { mode: isDark ? "dark" : "light" }
|
||||
theme: { mode: isDark ? "dark" : "light" },
|
||||
});
|
||||
}
|
||||
|
||||
@@ -29,18 +29,18 @@ const PRESETS = [
|
||||
{
|
||||
icon: Sun,
|
||||
name: "light",
|
||||
title: $t("preferences.theme.light")
|
||||
title: $t("preferences.theme.light"),
|
||||
},
|
||||
{
|
||||
icon: MoonStar,
|
||||
name: "dark",
|
||||
title: $t("preferences.theme.dark")
|
||||
title: $t("preferences.theme.dark"),
|
||||
},
|
||||
{
|
||||
icon: SunMoon,
|
||||
name: "auto",
|
||||
title: $t("preferences.followSystem")
|
||||
}
|
||||
title: $t("preferences.followSystem"),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
@@ -49,7 +49,7 @@ const PRESETS = [
|
||||
<template #trigger>
|
||||
<ThemeButton :model-value="isDark" type="icon" @update:model-value="handleChange" />
|
||||
</template>
|
||||
<ToggleGroup :model-value="preferences.theme.mode" class="gap-2" type="single" variant="outline" @update:model-value="(val) => updatePreferences({ theme: { mode: val as ThemeModeType } })">
|
||||
<ToggleGroup :model-value="preferences.theme.mode" class="gap-2" type="single" variant="outline" @update:model-value="val => updatePreferences({ theme: { mode: val as ThemeModeType } })">
|
||||
<ToggleGroupItem v-for="item in PRESETS" :key="item.name" :value="item.name">
|
||||
<component :is="item.icon" class="size-5" />
|
||||
</ToggleGroupItem>
|
||||
|
||||
Reference in New Issue
Block a user