🐛 Fix Hydration problem.

This commit is contained in:
NEO 2024-04-21 10:37:40 +08:00
parent cb44d3db8b
commit 4892b575bd
7 changed files with 53 additions and 28 deletions

View file

@ -48,6 +48,8 @@
</head> </head>
<body> <body>
<div id="app"><!--app-html--></div> <div id="app"><!--app-html--></div>
<script type="module" src="/src/main.ts"></script> <!-- <script type="module" src="/src/main.ts"></script>-->
<script type="module" src="/src/entry-client.ts"></script>
</body> </body>
</html> </html>

View file

@ -1,4 +1,4 @@
/* TEAM */ /* TEAM */
Developer: Corentin Thomasset Developer: Ne0
Site: https://github.com/CorentinTh Site: https://github.com/zeeklog
Twitter: @cthmsst Twitter: @neo2028

View file

@ -18,6 +18,10 @@ syncRef(
locale, locale,
useStorage('locale', locale), useStorage('locale', locale),
); );
onMounted(() => {
console.log('APP MOUNTED');
});
</script> </script>
<template> <template>

View file

@ -30,5 +30,9 @@ app.use(plausible);
app.use(naive); app.use(naive);
router.isReady().then(() => { router.isReady().then(() => {
console.log('---- Router is ready, now mounting the app...');
app.mount('#app', true); app.mount('#app', true);
console.log('---- App has been mounted successfully.');
}).catch((err) => {
console.log(err);
}); });

View file

@ -8,6 +8,11 @@ import { storeToRefs } from 'pinia';
import HeroGradient from '../assets/hero-gradient.svg?component'; import HeroGradient from '../assets/hero-gradient.svg?component';
import MenuLayout from '../components/MenuLayout.vue'; import MenuLayout from '../components/MenuLayout.vue';
import NavbarButtons from '../components/NavbarButtons.vue'; import NavbarButtons from '../components/NavbarButtons.vue';
import CLink from '@/ui/c-link/c-link.vue';
import CTooltip from '@/ui/c-tooltip/c-tooltip.vue';
import CButton from '@/ui/c-button/c-button.vue';
import CommandPalette from '@/modules/command-palette/command-palette.vue';
import LocaleSelector from '@/modules/i18n/components/locale-selector.vue';
import { useStyleStore } from '@/stores/style.store'; import { useStyleStore } from '@/stores/style.store';
import { config } from '@/config'; import { config } from '@/config';
import type { ToolCategory } from '@/tools/tools.types'; import type { ToolCategory } from '@/tools/tools.types';
@ -50,7 +55,7 @@ const tools = computed<ToolCategory[]>(() => [
<div class="sider-content"> <div class="sider-content">
<div v-if="styleStore.isSmallScreen" flex flex-col items-center> <div v-if="styleStore.isSmallScreen" flex flex-col items-center>
<locale-selector w="90%" /> <LocaleSelector w="90%" />
<div flex justify-center> <div flex justify-center>
<NavbarButtons /> <NavbarButtons />
@ -63,27 +68,27 @@ const tools = computed<ToolCategory[]>(() => [
<div> <div>
IT-Tools IT-Tools
<c-link target="_blank" rel="noopener" :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`"> <CLink target="_blank" rel="noopener" :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`">
v{{ version }} v{{ version }}
</c-link> </CLink>
<template v-if="commitSha && commitSha.length > 0"> <template v-if="commitSha && commitSha.length > 0">
- -
<c-link <CLink
target="_blank" target="_blank"
rel="noopener" rel="noopener"
type="primary" type="primary"
:href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`" :href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`"
> >
{{ commitSha }} {{ commitSha }}
</c-link> </CLink>
</template> </template>
</div> </div>
<div> <div>
© {{ new Date().getFullYear() }} © {{ new Date().getFullYear() }}
<c-link target="_blank" rel="noopener" href="https://github.com/CorentinTh"> <CLink target="_blank" rel="noopener" href="https://github.com/CorentinTh">
Corentin Thomasset Corentin Thomasset
</c-link> </CLink>
</div> </div>
</div> </div>
</div> </div>
@ -91,37 +96,37 @@ const tools = computed<ToolCategory[]>(() => [
<template #content> <template #content>
<div flex items-center justify-center gap-2> <div flex items-center justify-center gap-2>
<c-button <CButton
circle circle
variant="text" variant="text"
:aria-label="$t('home.toggleMenu')" :aria-label="$t('home.toggleMenu')"
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed" @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
> >
<NIcon size="25" :component="Menu2" /> <NIcon size="25" :component="Menu2" />
</c-button> </CButton>
<c-tooltip :tooltip="$t('home.home')" position="bottom"> <CTooltip :tooltip="$t('home.home')" position="bottom">
<c-button to="/" circle variant="text" :aria-label="$t('home.home')"> <CButton to="/" circle variant="text" :aria-label="$t('home.home')">
<NIcon size="25" :component="Home2" /> <NIcon size="25" :component="Home2" />
</c-button> </CButton>
</c-tooltip> </CTooltip>
<c-tooltip :tooltip="$t('home.uiLib')" position="bottom"> <CTooltip :tooltip="$t('home.uiLib')" position="bottom">
<c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')"> <CButton v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
<icon-mdi:brush-variant text-20px /> <icon-mdi:brush-variant text-20px />
</c-button> </CButton>
</c-tooltip> </CTooltip>
<command-palette /> <CommandPalette />
<locale-selector v-if="!styleStore.isSmallScreen" /> <LocaleSelector v-if="!styleStore.isSmallScreen" />
<div> <div>
<NavbarButtons v-if="!styleStore.isSmallScreen" /> <NavbarButtons v-if="!styleStore.isSmallScreen" />
</div> </div>
<c-tooltip position="bottom" :tooltip="$t('home.support')"> <CTooltip position="bottom" :tooltip="$t('home.support')">
<c-button <CButton
round round
href="https://www.buymeacoffee.com/cthmsst" href="https://www.buymeacoffee.com/cthmsst"
rel="noopener" rel="noopener"
@ -132,8 +137,8 @@ const tools = computed<ToolCategory[]>(() => [
> >
{{ $t('home.buyMeACoffee') }} {{ $t('home.buyMeACoffee') }}
<NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 /> <NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
</c-button> </CButton>
</c-tooltip> </CTooltip>
</div> </div>
<slot /> <slot />
</template> </template>

View file

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { createToken } from './token-generator.service'; import { createToken } from './token-generator.service';
import CInputText from '@/ui/c-input-text/c-input-text.vue';
import { useCopy } from '@/composable/copy'; import { useCopy } from '@/composable/copy';
import { useQueryParam } from '@/composable/queryParams'; import { useQueryParam } from '@/composable/queryParams';
import { computedRefreshable } from '@/composable/computedRefreshable'; import { computedRefreshable } from '@/composable/computedRefreshable';
@ -55,7 +56,7 @@ const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied'
<n-slider v-model:value="length" :step="1" :min="1" :max="512" /> <n-slider v-model:value="length" :step="1" :min="1" :max="512" />
</n-form-item> </n-form-item>
<c-input-text <CInputText
v-model:value="token" v-model:value="token"
multiline multiline
:placeholder="t('tools.token-generator.tokenPlaceholder')" :placeholder="t('tools.token-generator.tokenPlaceholder')"

View file

@ -11,6 +11,7 @@ import Icons from 'unplugin-icons/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'; import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite'; import Components from 'unplugin-vue-components/vite';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
// import { VitePWA } from 'vite-plugin-pwa'; // import { VitePWA } from 'vite-plugin-pwa';
import markdown from 'vite-plugin-vue-markdown'; import markdown from 'vite-plugin-vue-markdown';
import svgLoader from 'vite-svg-loader'; import svgLoader from 'vite-svg-loader';
@ -114,5 +115,13 @@ export default defineConfig({
}, },
build: { build: {
target: 'esnext', target: 'esnext',
rollupOptions: {
// 指定入口文件
input: {
main: './src/entry-client.ts',
// 你也可以在这里指定服务器端入口,例如:
server: './src/entry-server.ts',
},
},
}, },
}); });