change: remove SSR
This commit is contained in:
KUN1007
parent
8c4e97c6f1
commit
c2e3002bbc
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -16,7 +16,6 @@
|
|||
"Codepen",
|
||||
"commonmark",
|
||||
"cout",
|
||||
"crossorigin",
|
||||
"dompurify",
|
||||
"fontawesome",
|
||||
"galgame",
|
||||
|
|
@ -62,7 +61,6 @@
|
|||
"non-moe",
|
||||
"nord",
|
||||
"nprogress",
|
||||
"nuxt",
|
||||
"okaidia",
|
||||
"Otome",
|
||||
"Owaru",
|
||||
|
|
|
|||
14
index.html
14
index.html
|
|
@ -10,18 +10,12 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="KUN Visual Novel | 鲲 Galgame. The CUTEST Visual Novel Forum!世界上最萌的 Galgame 论坛. Topic, Technique. NO ADs Forever. Free Forever"
|
||||
content="The CUTEST Visual Novel Forum!世界上最萌的 Galgame 论坛. Topic, Technique. NO ADs Forever. Free Forever"
|
||||
/>
|
||||
<title>KUN Visual Novel | 鲲 Galgame</title>
|
||||
<!--preload-links-->
|
||||
<title>KUNGalgame</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--ssr-outlet--></div>
|
||||
<div id="teleported"><!--teleports--></div>
|
||||
<script type="module" src="/src/entry-client.ts"></script>
|
||||
|
||||
<script>
|
||||
window.__INITIAL_STATE__ = '__pinia'
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
19
package.json
19
package.json
|
|
@ -13,11 +13,9 @@
|
|||
},
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "ts-node-esm server-dev.ts",
|
||||
"prod": "ts-node-esm server-prod.ts",
|
||||
"build:client": "vite build --outDir dist/client --ssrManifest",
|
||||
"build:server": "vite build --outDir dist/server --ssr src/entry-server.ts",
|
||||
"build": "pnpm build:client && pnpm build:server"
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@milkdown/core": "^7.3.1",
|
||||
|
|
@ -36,12 +34,10 @@
|
|||
"@milkdown/utils": "^7.3.1",
|
||||
"@milkdown/vue": "^7.3.1",
|
||||
"@prosemirror-adapter/vue": "^0.2.6",
|
||||
"@vue/server-renderer": "^3.3.7",
|
||||
"animate.css": "^4.1.1",
|
||||
"dayjs": "^1.11.10",
|
||||
"dompurify": "^3.0.6",
|
||||
"localforage": "^1.10.0",
|
||||
"node-fetch": "^3.3.2",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.0",
|
||||
|
|
@ -52,22 +48,13 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@koa/router": "^12.0.1",
|
||||
"@nuxt/devalue": "^2.0.2",
|
||||
"@types/dompurify": "^3.0.4",
|
||||
"@types/js-cookie": "^3.0.5",
|
||||
"@types/koa": "^2.13.10",
|
||||
"@types/koa-send": "^4.1.5",
|
||||
"@types/node": "^20.8.10",
|
||||
"@types/nprogress": "^0.2.2",
|
||||
"@vitejs/plugin-vue": "^4.4.0",
|
||||
"express": "^4.18.2",
|
||||
"koa": "^2.14.2",
|
||||
"koa-connect": "^2.1.0",
|
||||
"koa-send": "^5.0.1",
|
||||
"rollup-plugin-visualizer": "^5.9.2",
|
||||
"sass": "^1.69.5",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^4.5.0",
|
||||
"vue-tsc": "^1.8.22"
|
||||
|
|
|
|||
936
pnpm-lock.yaml
936
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -1,2 +0,0 @@
|
|||
User-agent: *
|
||||
Allow: /
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
import Koa from 'koa'
|
||||
import koaConnect from 'koa-connect'
|
||||
|
||||
import { createServer as createViteServer } from 'vite'
|
||||
|
||||
const HOST_NAME = '127.0.0.1'
|
||||
const APP_PORT = 1007
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
// Inject teleports in template
|
||||
const injectTeleports = (
|
||||
html: string,
|
||||
teleports: {
|
||||
'#teleported': string
|
||||
}
|
||||
) => {
|
||||
// return html
|
||||
return html.replace('<!--teleports-->', teleports['#teleported'])
|
||||
}
|
||||
|
||||
;(async (hmrPort) => {
|
||||
const app = new Koa()
|
||||
|
||||
const vite = await createViteServer({
|
||||
server: {
|
||||
middlewareMode: true,
|
||||
watch: {
|
||||
// During tests we edit the files too fast and sometimes chokidar
|
||||
// misses change events, so enforce polling for consistency
|
||||
usePolling: true,
|
||||
interval: 107,
|
||||
},
|
||||
hmr: {
|
||||
port: hmrPort,
|
||||
},
|
||||
},
|
||||
appType: 'custom',
|
||||
})
|
||||
|
||||
// Parse accept-language
|
||||
const parseAcceptLanguage = (acceptLanguage: string) => {
|
||||
const languages = acceptLanguage.split(',')
|
||||
const language = languages[0]
|
||||
const country = language.split('-')[1]
|
||||
return { language, country }
|
||||
}
|
||||
|
||||
app.use(koaConnect(vite.middlewares))
|
||||
|
||||
app.use(async (ctx) => {
|
||||
const { language, country } = parseAcceptLanguage(
|
||||
ctx.request.headers['accept-language'] as string
|
||||
)
|
||||
try {
|
||||
let template = fs.readFileSync(
|
||||
path.resolve(__dirname, 'index.html'),
|
||||
'utf-8'
|
||||
)
|
||||
|
||||
template = await vite.transformIndexHtml(ctx.path, template)
|
||||
|
||||
const { render } = await vite.ssrLoadModule('/src/entry-server.ts')
|
||||
|
||||
const [renderedHtml, renderedPinia, renderedLinks, renderedTeleports] =
|
||||
await render(
|
||||
ctx,
|
||||
{},
|
||||
{
|
||||
language,
|
||||
country,
|
||||
}
|
||||
)
|
||||
|
||||
const html = injectTeleports(template, renderedTeleports)
|
||||
.replace('<!--preload-links-->', renderedLinks)
|
||||
.replace('<!--ssr-outlet-->', renderedHtml)
|
||||
.replace('__pinia', renderedPinia)
|
||||
|
||||
ctx.type = 'text/html'
|
||||
ctx.body = html
|
||||
} catch (e) {
|
||||
vite && vite.ssrFixStacktrace(e as Error)
|
||||
ctx.throw(500, e as Error)
|
||||
}
|
||||
})
|
||||
|
||||
app.listen(APP_PORT, () => {
|
||||
console.log(`Server is listening on http://${HOST_NAME}:${APP_PORT}`)
|
||||
})
|
||||
})()
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
|
||||
import Koa from 'koa'
|
||||
import sendFile from 'koa-send'
|
||||
|
||||
import path from 'path'
|
||||
import fs from 'fs'
|
||||
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const HOST_NAME = '127.0.0.1'
|
||||
const APP_PORT = 7777
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
const resolve = (pathName: string) => path.resolve(__dirname, pathName)
|
||||
|
||||
const clientRoot = resolve('dist/client')
|
||||
const template = fs.readFileSync(resolve('dist/client/index.html'), 'utf-8')
|
||||
// @ts-ignore
|
||||
import { render } from './dist/server/entry-server.js'
|
||||
// @ts-ignore
|
||||
import manifest from './dist/client/ssr-manifest.json' assert { type: 'json' }
|
||||
;(async () => {
|
||||
const app = new Koa()
|
||||
|
||||
app.use(async (ctx) => {
|
||||
if (ctx.path.startsWith('/kun')) {
|
||||
await sendFile(ctx, ctx.path, { root: clientRoot })
|
||||
return
|
||||
}
|
||||
|
||||
const [renderedHtml, state, preloadLinks] = await render(ctx, manifest)
|
||||
|
||||
const html = template
|
||||
.replace('<!--preload-links-->', preloadLinks)
|
||||
.replace('<!--ssr-outlet-->', renderedHtml)
|
||||
.replace('__pinia', state)
|
||||
|
||||
ctx.type = 'text/html'
|
||||
ctx.body = html
|
||||
})
|
||||
|
||||
app.listen(APP_PORT, () => {
|
||||
console.log(`Server is listening on http://${HOST_NAME}:${APP_PORT}`)
|
||||
})
|
||||
})()
|
||||
|
|
@ -18,23 +18,21 @@ const handleConfirm = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#teleported" :disabled="showAlert">
|
||||
<Teleport to="body" :disabled="showAlert">
|
||||
<Transition name="alert">
|
||||
<div>
|
||||
<div v-if="showAlert" class="mask">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h3>{{ $t(`${alertMsg}`) }}</h3>
|
||||
</div>
|
||||
<div v-if="showAlert" class="mask">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h3>{{ $t(`${alertMsg}`) }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<button v-if="isShowCancel" class="button" @click="handleClose">
|
||||
{{ $tm('ComponentAlert.cancel') }}
|
||||
</button>
|
||||
<button class="button" @click="handleConfirm">
|
||||
{{ $tm('ComponentAlert.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button v-if="isShowCancel" class="button" @click="handleClose">
|
||||
{{ $tm('ComponentAlert.cancel') }}
|
||||
</button>
|
||||
<button class="button" @click="handleConfirm">
|
||||
{{ $tm('ComponentAlert.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,37 +15,35 @@ const handleClose = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#teleported" :disabled="showInfo">
|
||||
<Teleport to="body" :disabled="showInfo">
|
||||
<Transition
|
||||
enter-active-class="animate__animated animate__fadeInUp animate__faster"
|
||||
leave-active-class="animate__animated animate__fadeOutDown animate__faster"
|
||||
>
|
||||
<div>
|
||||
<div class="container" v-if="showInfo">
|
||||
<Transition
|
||||
enter-active-class="animate__animated animate__swing"
|
||||
appear
|
||||
>
|
||||
<div class="lass">
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<div class="avatar">
|
||||
<img :src="loli" />
|
||||
<div class="container" v-if="showInfo">
|
||||
<Transition
|
||||
enter-active-class="animate__animated animate__swing"
|
||||
appear
|
||||
>
|
||||
<div class="lass">
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<Transition
|
||||
enter-active-class="animate__animated animate__bounceInRight animate__faster"
|
||||
appear
|
||||
>
|
||||
<!-- A ha ha ha! You probably didn't expect that this was inspired by しゅがてん！-Sugarfull tempering- -->
|
||||
<div class="info">{{ `「 ${$t(`${infoMsg}`)} 」` }}</div>
|
||||
</Transition>
|
||||
<div class="avatar">
|
||||
<img :src="loli" />
|
||||
</div>
|
||||
|
||||
<div class="close" @click="handleClose">
|
||||
<Icon icon="line-md:close" />
|
||||
</div>
|
||||
<Transition
|
||||
enter-active-class="animate__animated animate__bounceInRight animate__faster"
|
||||
appear
|
||||
>
|
||||
<!-- A ha ha ha! You probably didn't expect that this was inspired by しゅがてん！-Sugarfull tempering- -->
|
||||
<div class="info">{{ `「 ${$t(`${infoMsg}`)} 」` }}</div>
|
||||
</Transition>
|
||||
|
||||
<div class="close" @click="handleClose">
|
||||
<Icon icon="line-md:close" />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
|
|
|||
|
|
@ -119,67 +119,65 @@ const handleCloseCapture = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#teleported" :disabled="isShowCapture">
|
||||
<Teleport to="body" :disabled="isShowCapture">
|
||||
<Transition name="capture">
|
||||
<div>
|
||||
<!-- Mask -->
|
||||
<div
|
||||
class="mask"
|
||||
@keydown="checkKeyPress($event)"
|
||||
tabindex="0"
|
||||
v-if="isShowCapture"
|
||||
>
|
||||
<div class="validate">
|
||||
<!-- Title -->
|
||||
<div class="title">
|
||||
<!-- <span>{{ `❮` }}</span> -->
|
||||
<h2>{{ $tm('AlertInfo.capture.title') }}</h2>
|
||||
<!-- <span>{{ `❯` }}</span> -->
|
||||
</div>
|
||||
<p class="question">{{ currentQuestion.text }}</p>
|
||||
<!-- Mask -->
|
||||
<div
|
||||
class="mask"
|
||||
@keydown="checkKeyPress($event)"
|
||||
tabindex="0"
|
||||
v-if="isShowCapture"
|
||||
>
|
||||
<div class="validate">
|
||||
<!-- Title -->
|
||||
<div class="title">
|
||||
<!-- <span>{{ `❮` }}</span> -->
|
||||
<h2>{{ $tm('AlertInfo.capture.title') }}</h2>
|
||||
<!-- <span>{{ `❯` }}</span> -->
|
||||
</div>
|
||||
<p class="question">{{ currentQuestion.text }}</p>
|
||||
|
||||
<!-- Options -->
|
||||
<div class="select">
|
||||
<label
|
||||
v-for="(option, index) in currentQuestion.options"
|
||||
:key="index"
|
||||
<!-- Options -->
|
||||
<div class="select">
|
||||
<label
|
||||
v-for="(option, index) in currentQuestion.options"
|
||||
:key="index"
|
||||
>
|
||||
<input type="radio" v-model="userAnswers" :value="option" />
|
||||
{{ option }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Submit buttons -->
|
||||
<div class="btn">
|
||||
<button @click="submitAnswer">
|
||||
{{ $tm('AlertInfo.capture.submit') }}
|
||||
</button>
|
||||
<button @click="handleCloseCapture">
|
||||
{{ $tm('AlertInfo.capture.close') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Hints -->
|
||||
<!-- tabindex allows this element to be focused on the page -->
|
||||
<div class="hint-container">
|
||||
<div v-if="isShowHint" class="hint">
|
||||
<div>{{ $tm('AlertInfo.capture.hint1') }}</div>
|
||||
<div>
|
||||
{{ $tm('AlertInfo.capture.hint2') }}
|
||||
<span>kun</span>
|
||||
{{ $tm('AlertInfo.capture.hint3') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isShowAnswer" class="answer">
|
||||
<div>{{ $tm('AlertInfo.capture.hint4') }}</div>
|
||||
<a
|
||||
href="https://github.com/KUN1007/kun-galgame-vue/tree/remove-server/src/components/capture"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<input type="radio" v-model="userAnswers" :value="option" />
|
||||
{{ option }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Submit buttons -->
|
||||
<div class="btn">
|
||||
<button @click="submitAnswer">
|
||||
{{ $tm('AlertInfo.capture.submit') }}
|
||||
</button>
|
||||
<button @click="handleCloseCapture">
|
||||
{{ $tm('AlertInfo.capture.close') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Hints -->
|
||||
<!-- tabindex allows this element to be focused on the page -->
|
||||
<div class="hint-container">
|
||||
<div v-if="isShowHint" class="hint">
|
||||
<div>{{ $tm('AlertInfo.capture.hint1') }}</div>
|
||||
<div>
|
||||
{{ $tm('AlertInfo.capture.hint2') }}
|
||||
<span>kun</span>
|
||||
{{ $tm('AlertInfo.capture.hint3') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isShowAnswer" class="answer">
|
||||
<div>{{ $tm('AlertInfo.capture.hint4') }}</div>
|
||||
<a
|
||||
href="https://github.com/KUN1007/kun-galgame-vue/tree/remove-server/src/components/capture"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ $tm('AlertInfo.capture.answer') }}
|
||||
</a>
|
||||
</div>
|
||||
{{ $tm('AlertInfo.capture.answer') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import Message from '@/components/alert/Message'
|
|||
|
||||
import { backgroundImages } from './background'
|
||||
import { getBackgroundURL } from '@/hooks/useBackgroundPicture'
|
||||
import { restoreBackground } from '@/hooks/useBackgroundPicture'
|
||||
|
||||
const imageArray = ref<string[]>([])
|
||||
// Use the settings panel store
|
||||
|
|
@ -27,11 +28,6 @@ const handleChangeImage = (index: number) => {
|
|||
showKUNGalgameBackground.value = `bg${index}`
|
||||
}
|
||||
|
||||
// Restore the blank background
|
||||
const restoreBackground = () => {
|
||||
showKUNGalgameBackground.value = 'bg0'
|
||||
}
|
||||
|
||||
// Custom background
|
||||
const url = ref('')
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, onMounted, ref } from 'vue'
|
||||
import { defineAsyncComponent, ref } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import 'animate.css'
|
||||
import { topBarItem } from './topBarItem'
|
||||
|
|
@ -25,8 +25,6 @@ const showKUNGalgamePanel = ref(false)
|
|||
const showKUNGalgameHamburger = ref(false)
|
||||
// Show user panel when clicking on the user's avatar
|
||||
const showKUNGalgameUserPanel = ref(false)
|
||||
// User avatar image link, ssr friendly
|
||||
const userAvatar = ref('')
|
||||
|
||||
// Set the navigation bar width based on the number of navigation items
|
||||
const navItemNum = topBarItem.length
|
||||
|
|
@ -37,102 +35,90 @@ onBeforeRouteLeave(() => {
|
|||
showKUNGalgamePanel.value = false
|
||||
showKUNGalgameHamburger.value = false
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
userAvatar.value = avatarMin.value
|
||||
? avatarMin.value
|
||||
: '/src/assets/images/favicon.webp'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="header">
|
||||
<!-- Top left interactive bar -->
|
||||
<div class="nav-top">
|
||||
<div class="hamburger">
|
||||
<Icon
|
||||
icon="line-md:menu-fold-right"
|
||||
v-if="!showKUNGalgameHamburger"
|
||||
@click="showKUNGalgameHamburger = !showKUNGalgameHamburger"
|
||||
/>
|
||||
<Transition name="hamburger">
|
||||
<Hamburger
|
||||
v-if="showKUNGalgameHamburger"
|
||||
@showKUNGalgameHamburger="showKUNGalgameHamburger = false"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- Website name and logo -->
|
||||
<div class="kungalgame">
|
||||
<RouterLink to="/kun">
|
||||
<img
|
||||
src="@/assets/images/favicon.webp"
|
||||
alt="KUN Visual Novel 鲲 Galgame"
|
||||
/>
|
||||
<span>{{ $tm('header.name') }}</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Navigation bar -->
|
||||
<div class="top-bar">
|
||||
<!-- Top individual sections -->
|
||||
<span v-for="kun in topBarItem" :key="kun.index">
|
||||
<RouterLink :to="{ path: kun.router }">
|
||||
{{ $tm(`header['${kun.name}']`) }}
|
||||
</RouterLink>
|
||||
</span>
|
||||
<!-- Hover effect under the top section -->
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kungalgamer-info">
|
||||
<!-- showKUNGalgamePanel is a boolean value in the store, true/false controls the display and close of the settings panel -->
|
||||
<span
|
||||
class="settings"
|
||||
@click="showKUNGalgamePanel = !showKUNGalgamePanel"
|
||||
>
|
||||
<Icon icon="uiw:setting-o" />
|
||||
</span>
|
||||
|
||||
<div class="avatar">
|
||||
<img
|
||||
@click="showKUNGalgameUserPanel = true"
|
||||
:src="userAvatar"
|
||||
:alt="name"
|
||||
/>
|
||||
|
||||
<!-- For SSR -->
|
||||
<span
|
||||
@click="showKUNGalgameUserPanel = true"
|
||||
v-if="userAvatar === '/src/assets/images/favicon.webp'"
|
||||
>
|
||||
{{ name }}
|
||||
</span>
|
||||
</div>
|
||||
<KUNGalgameUserInfo
|
||||
v-if="showKUNGalgameUserPanel"
|
||||
@close="showKUNGalgameUserPanel = false"
|
||||
<div class="header">
|
||||
<!-- Top left interactive bar -->
|
||||
<div class="nav-top">
|
||||
<div class="hamburger">
|
||||
<Icon
|
||||
icon="line-md:menu-fold-right"
|
||||
v-if="!showKUNGalgameHamburger"
|
||||
@click="showKUNGalgameHamburger = !showKUNGalgameHamburger"
|
||||
/>
|
||||
<Transition name="hamburger">
|
||||
<Hamburger
|
||||
v-if="showKUNGalgameHamburger"
|
||||
@showKUNGalgameHamburger="showKUNGalgameHamburger = false"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- Website name and logo -->
|
||||
<div class="kungalgame">
|
||||
<RouterLink to="/kun">
|
||||
<img
|
||||
src="@/assets/images/favicon.webp"
|
||||
alt="KUN Visual Novel 鲲 Galgame"
|
||||
/>
|
||||
<span>{{ $tm('header.name') }}</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Navigation bar -->
|
||||
<div class="top-bar">
|
||||
<!-- Top individual sections -->
|
||||
<span v-for="kun in topBarItem" :key="kun.index">
|
||||
<RouterLink :to="{ path: kun.router }">
|
||||
{{ $tm(`header['${kun.name}']`) }}
|
||||
</RouterLink>
|
||||
</span>
|
||||
<!-- Hover effect under the top section -->
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-panel">
|
||||
<transition
|
||||
enter-active-class="animate__animated animate__jackInTheBox animate__faster"
|
||||
leave-active-class="animate__animated animate__fadeOutRight animate__faster"
|
||||
<div class="kungalgamer-info">
|
||||
<!-- showKUNGalgamePanel is a boolean value in the store, true/false controls the display and close of the settings panel -->
|
||||
<span
|
||||
class="settings"
|
||||
@click="showKUNGalgamePanel = !showKUNGalgamePanel"
|
||||
>
|
||||
<KeepAlive :exclude="['PageWidth', 'Font']">
|
||||
<KUNGalgameSettingsPanel
|
||||
v-if="showKUNGalgamePanel"
|
||||
@close="showKUNGalgamePanel = false"
|
||||
/>
|
||||
</KeepAlive>
|
||||
</transition>
|
||||
<Icon icon="uiw:setting-o" />
|
||||
</span>
|
||||
|
||||
<div class="avatar">
|
||||
<img
|
||||
v-if="avatarMin"
|
||||
@click="showKUNGalgameUserPanel = true"
|
||||
:src="avatarMin"
|
||||
alt="KUN"
|
||||
/>
|
||||
<span @click="showKUNGalgameUserPanel = true" v-if="!avatarMin">
|
||||
{{ name }}
|
||||
</span>
|
||||
</div>
|
||||
<KUNGalgameUserInfo
|
||||
v-if="showKUNGalgameUserPanel"
|
||||
@close="showKUNGalgameUserPanel = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-panel">
|
||||
<transition
|
||||
enter-active-class="animate__animated animate__jackInTheBox animate__faster"
|
||||
leave-active-class="animate__animated animate__fadeOutRight animate__faster"
|
||||
>
|
||||
<KeepAlive :exclude="['PageWidth', 'Font']">
|
||||
<KUNGalgameSettingsPanel
|
||||
v-if="showKUNGalgamePanel"
|
||||
@close="showKUNGalgamePanel = false"
|
||||
/>
|
||||
</KeepAlive>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
15
src/directives/index.ts
Normal file
15
src/directives/index.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/**
|
||||
* Currently, all directives are not enabled.
|
||||
*/
|
||||
|
||||
import { type App } from 'vue'
|
||||
// Directive for enlarging images on click
|
||||
import { zoom } from './zoom/zoom'
|
||||
// Permission directive
|
||||
import { permission } from './permission/permission'
|
||||
|
||||
// Mount directives
|
||||
export function setupKUNGalgameDirectives(app: App) {
|
||||
app.directive('zoom', zoom)
|
||||
app.directive('permission', permission)
|
||||
}
|
||||
62
src/directives/permission/permission.ts
Normal file
62
src/directives/permission/permission.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import type { Directive, DirectiveBinding } from 'vue'
|
||||
import Message from '@/components/alert/Message'
|
||||
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import router from '@/router'
|
||||
|
||||
const { roles, uid } = storeToRefs(useKUNGalgameUserStore())
|
||||
|
||||
// User roles: Guest 0, User 1, Admin 2, SuperAdmin 3, User Self 4
|
||||
enum UserRole {
|
||||
Guest = 0,
|
||||
User = 1,
|
||||
Admin = 2,
|
||||
SuperAdmin = 3,
|
||||
Self = 4,
|
||||
}
|
||||
|
||||
/**
|
||||
* @roles: User types that can access this resource.
|
||||
* @uid: User ID that needs authorization.
|
||||
*/
|
||||
interface BindingProps {
|
||||
roles: UserRole[]
|
||||
uid?: number
|
||||
}
|
||||
|
||||
const handleUnauthorizedAccess = (element: HTMLElement) => {
|
||||
element.parentNode?.removeChild(element)
|
||||
|
||||
Message(
|
||||
'You do not have sufficient permissions!',
|
||||
'您没有足够的权限！',
|
||||
'error',
|
||||
5000
|
||||
)
|
||||
router.push('/kungalgame403')
|
||||
}
|
||||
|
||||
export const permission: Directive = {
|
||||
mounted(element: HTMLElement, binding: DirectiveBinding<BindingProps>) {
|
||||
const bindingRoles = [...binding.value.roles]
|
||||
const bindingUid = binding.value.uid
|
||||
|
||||
const hasPermission = () => {
|
||||
// User Self
|
||||
if (bindingUid === uid.value) {
|
||||
return true
|
||||
}
|
||||
|
||||
// User has access permission
|
||||
if (bindingRoles.includes(roles.value)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
if (!hasPermission()) {
|
||||
handleUnauthorizedAccess(element)
|
||||
}
|
||||
},
|
||||
}
|
||||
20
src/directives/zoom/zoom.ts
Normal file
20
src/directives/zoom/zoom.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type { Directive, DirectiveBinding } from 'vue'
|
||||
|
||||
/* This plugin is not enabled */
|
||||
|
||||
// Enlarge images in nodes rendered by v-html
|
||||
export const zoom: Directive = {
|
||||
// The binding refers to values passed to the directive; there are none here
|
||||
mounted(element: HTMLElement, binding: DirectiveBinding) {
|
||||
const { scale, time } = binding.value || { scale: 1.2, time: 0.3 }
|
||||
|
||||
element.querySelectorAll('img').forEach((img: HTMLImageElement) => {
|
||||
img.addEventListener('click', () => {
|
||||
img.style.transition = `transform ${time}s ease`
|
||||
img.style.transform = img.classList.contains('zoomed')
|
||||
? 'scale(1)'
|
||||
: `scale(${scale})`
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { createApp } from './main'
|
||||
import { createKUNGalgameRouter } from './router'
|
||||
import { setupPinia } from './store'
|
||||
import createI18n from '@/language/i18n'
|
||||
import '@/styles/index.scss'
|
||||
|
||||
const router = createKUNGalgameRouter()
|
||||
const pinia = setupPinia()
|
||||
|
||||
const { app } = createApp()
|
||||
|
||||
export const i18n = createI18n()
|
||||
|
||||
app.use(router).use(pinia).use(i18n)
|
||||
|
||||
if (window.__pinia) {
|
||||
pinia.state.value = JSON.parse(JSON.stringify(window.__pinia))
|
||||
}
|
||||
|
||||
router.isReady().then(() => {
|
||||
app.mount('#app', true)
|
||||
})
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import { createApp } from './main'
|
||||
|
||||
import { createKUNGalgameRouter } from './router'
|
||||
import { setupPinia } from './store'
|
||||
import createI18n from '@/language/i18n'
|
||||
|
||||
import { renderToString } from '@vue/server-renderer'
|
||||
|
||||
import type { ParameterizedContext } from 'koa'
|
||||
|
||||
import '@/styles/index.scss'
|
||||
|
||||
const renderPreloadLink = (file: string) => {
|
||||
if (file.endsWith('.js')) {
|
||||
return `<link rel="modulepreload" crossorigin href="${file}">`
|
||||
} else if (file.endsWith('.css')) {
|
||||
return `<link rel="stylesheet" href="${file}">`
|
||||
} else if (file.endsWith('.png')) {
|
||||
return ` <link rel="preload" href="${file}" as="image" type="image/png">`
|
||||
} else {
|
||||
// TODO
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const renderPreloadLinks = (
|
||||
modules: undefined | string[],
|
||||
manifest: Record<string, string[]>
|
||||
) => {
|
||||
let links = ''
|
||||
const seen = new Set()
|
||||
if (modules === undefined) throw new Error()
|
||||
modules.forEach((id) => {
|
||||
const files = manifest[id]
|
||||
if (files) {
|
||||
files.forEach((file) => {
|
||||
if (!seen.has(file)) {
|
||||
seen.add(file)
|
||||
links += renderPreloadLink(file)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
return links
|
||||
}
|
||||
|
||||
export const render = async (
|
||||
ctx: ParameterizedContext,
|
||||
manifest: Record<string, string[]>,
|
||||
options: { language: string; country: string }
|
||||
) => {
|
||||
const { app } = createApp()
|
||||
const { language, country } = options
|
||||
|
||||
// router
|
||||
const router = createKUNGalgameRouter()
|
||||
app.use(router)
|
||||
await router.push(ctx.path)
|
||||
await router.isReady()
|
||||
|
||||
// pinia
|
||||
const pinia = setupPinia()
|
||||
app.use(pinia)
|
||||
|
||||
const renderedPinia = JSON.stringify(pinia.state.value)
|
||||
|
||||
// i18n
|
||||
app.use(createI18n(language.includes('zh') ? 'zh' : 'en'))
|
||||
|
||||
const renderCtx: Record<string, string[] | {}> = {}
|
||||
|
||||
const renderedHtml = await renderToString(app, renderCtx)
|
||||
|
||||
const renderedLinks = renderPreloadLinks(
|
||||
renderCtx.modules as string[],
|
||||
manifest
|
||||
)
|
||||
|
||||
const renderedTeleports = renderCtx.teleports as {
|
||||
'#teleported': string
|
||||
}
|
||||
|
||||
return [renderedHtml, renderedPinia, renderedLinks, renderedTeleports]
|
||||
}
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
import { useRouter } from 'vue-router'
|
||||
// Global message component (top)
|
||||
import Message from '@/components/alert/Message'
|
||||
import { generateTokenByRefreshTokenApi } from '@/api'
|
||||
// Use the user store
|
||||
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
|
||||
// Import the router
|
||||
import { createKUNGalgameRouter } from '@/router'
|
||||
import router from '@/router'
|
||||
// Import known error handling functions
|
||||
import { kungalgameErrorHandler } from './errorHandler'
|
||||
|
||||
|
|
@ -29,9 +28,7 @@ export async function onRequestError(response: Response) {
|
|||
if (accessTokenResponse.code === 200 && accessTokenResponse.data.token) {
|
||||
useKUNGalgameUserStore().setToken(accessTokenResponse.data.token)
|
||||
// Set the page to reload with the new token applied
|
||||
if (typeof window !== 'undefined') {
|
||||
location.reload()
|
||||
}
|
||||
location.reload()
|
||||
} else {
|
||||
// Otherwise, prompt the user to log in again
|
||||
Message(
|
||||
|
|
@ -40,7 +37,7 @@ export async function onRequestError(response: Response) {
|
|||
'error'
|
||||
)
|
||||
useKUNGalgameUserStore().removeToken()
|
||||
useRouter().push('/login')
|
||||
router.push('/login')
|
||||
}
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
// Import the settings panel store
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
|
||||
import { saveImage, getImage } from './useLocalforage'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// Use the settings panel store
|
||||
const { showKUNGalgameBackground, showKUNGalgameCustomBackground } =
|
||||
storeToRefs(useKUNGalgameSettingsStore())
|
||||
|
||||
// Fetch background image data from the backend
|
||||
const fetchGetBackground = async (imageName: string): Promise<Blob> => {
|
||||
|
|
@ -33,4 +39,25 @@ const getBackgroundURL = async (imageName: string) => {
|
|||
}
|
||||
}
|
||||
|
||||
export { getBackgroundURL }
|
||||
// The image names here are defined by the backend as bg1.webp (large image) and bg1-m.webp (preview image)
|
||||
const getCurrentBackground = async () => {
|
||||
if (
|
||||
showKUNGalgameBackground.value === 'bg0' ||
|
||||
showKUNGalgameBackground.value === 'none'
|
||||
) {
|
||||
return 'none'
|
||||
}
|
||||
if (showKUNGalgameBackground.value === 'bg1007') {
|
||||
return `${showKUNGalgameCustomBackground.value}`
|
||||
}
|
||||
// Get the image's blob URL
|
||||
const url = await getBackgroundURL(showKUNGalgameBackground.value)
|
||||
return url
|
||||
}
|
||||
|
||||
// Restore the blank background
|
||||
const restoreBackground = () => {
|
||||
showKUNGalgameBackground.value = 'bg0'
|
||||
}
|
||||
|
||||
export { getBackgroundURL, getCurrentBackground, restoreBackground }
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
import { createI18n as _createI18n } from 'vue-i18n'
|
||||
// Get localeStorage language config
|
||||
import { createI18n } from 'vue-i18n'
|
||||
// 读取本地存储中的语言配置
|
||||
import { KUNGalgameLanguage } from '@/utils/getDefaultEnv'
|
||||
|
||||
// Import language file
|
||||
// 引入语言文件
|
||||
import zh from './zh'
|
||||
import en from './en'
|
||||
|
||||
const createI18n = (language?: string) =>
|
||||
_createI18n({
|
||||
locale: language || KUNGalgameLanguage,
|
||||
legacy: false,
|
||||
messages: {
|
||||
zh,
|
||||
en,
|
||||
},
|
||||
})
|
||||
const i18n = createI18n({
|
||||
locale: KUNGalgameLanguage,
|
||||
// 支持 Vue3 composition API
|
||||
legacy: false,
|
||||
// 全局注册 t 方法
|
||||
globalInjection: true,
|
||||
messages: {
|
||||
zh,
|
||||
en,
|
||||
},
|
||||
})
|
||||
|
||||
export default createI18n
|
||||
export default i18n
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { onMounted, watch, ref } from 'vue'
|
||||
// Import animations
|
||||
import 'animate.css'
|
||||
import { getBackgroundURL } from '@/hooks/useBackgroundPicture'
|
||||
import { getCurrentBackground } from '@/hooks/useBackgroundPicture'
|
||||
import KUNGalgameTopBar from '@/components/top-bar/KUNGalgameTopBar.vue'
|
||||
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
|
|
@ -10,20 +10,6 @@ import { storeToRefs } from 'pinia'
|
|||
|
||||
const { showKUNGalgameBackground, showKUNGalgameCustomBackground } =
|
||||
storeToRefs(useKUNGalgameSettingsStore())
|
||||
const getCurrentBackground = async () => {
|
||||
if (
|
||||
showKUNGalgameBackground.value === 'bg0' ||
|
||||
showKUNGalgameBackground.value === 'none'
|
||||
) {
|
||||
return 'none'
|
||||
}
|
||||
if (showKUNGalgameBackground.value === 'bg1007') {
|
||||
return `${showKUNGalgameCustomBackground.value}`
|
||||
}
|
||||
// Get the image's blob URL
|
||||
const url = await getBackgroundURL(showKUNGalgameBackground.value)
|
||||
return url
|
||||
}
|
||||
|
||||
const imageURL = ref('')
|
||||
|
||||
|
|
|
|||
25
src/main.ts
25
src/main.ts
|
|
@ -1,7 +1,22 @@
|
|||
import { createSSRApp } from 'vue'
|
||||
// Vue core
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
// Import vue i18n
|
||||
import i18n from '@/language/i18n'
|
||||
|
||||
export const createApp = () => {
|
||||
const app = createSSRApp(App)
|
||||
return { app }
|
||||
}
|
||||
import { setupRouterGuard } from '@/router/guard'
|
||||
import { setupPinia } from '@/store/index'
|
||||
|
||||
// Import css styles, color, theme, etc.
|
||||
import '@/styles/index.scss'
|
||||
|
||||
// Get vue App instance
|
||||
const app = createApp(App)
|
||||
|
||||
// Setup router guard
|
||||
setupRouterGuard(router)
|
||||
// Setup pinia
|
||||
setupPinia(app)
|
||||
|
||||
app.use(router).use(i18n).mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Router } from 'vue-router'
|
||||
import { createPermission } from './permission'
|
||||
import { i18n } from '@/entry-client'
|
||||
import i18n from '@/language/i18n'
|
||||
|
||||
const createPageTitle = (router: Router) => {
|
||||
router.beforeEach((to) => {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,19 @@
|
|||
import type { RouteRecordRaw, Router } from 'vue-router'
|
||||
import { createWebHistory, createRouter, createMemoryHistory } from 'vue-router'
|
||||
import { type RouteRecordRaw, createWebHistory, createRouter } from 'vue-router'
|
||||
import { constantRoutes } from './router'
|
||||
import { asyncRoutes } from './router'
|
||||
|
||||
export const createKUNGalgameRouter = (): Router =>
|
||||
createRouter({
|
||||
history: import.meta.env.SSR
|
||||
? createMemoryHistory(import.meta.env.BASE_URL)
|
||||
: createWebHistory(import.meta.env.BASE_URL),
|
||||
// Create a Vue Router instance
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [...constantRoutes, ...asyncRoutes] as RouteRecordRaw[],
|
||||
// Scroll to the top of the page with a smooth animation on each page navigation
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
} else {
|
||||
return { top: 0, behavior: 'smooth' }
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
routes: [...constantRoutes, ...asyncRoutes] as RouteRecordRaw[],
|
||||
|
||||
// Scroll to the top of the page with a smooth animation on each page navigation
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
} else {
|
||||
return { top: 0, behavior: 'smooth' }
|
||||
}
|
||||
},
|
||||
})
|
||||
export default router
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
*/
|
||||
import { createPinia } from 'pinia'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
import type { App } from 'vue'
|
||||
|
||||
// Import store for the income and expense public disclosure page
|
||||
import { useKUNGalgameBalanceStore } from './modules/balance'
|
||||
|
|
@ -32,19 +33,16 @@ import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
|||
// Import store for the topic detail page
|
||||
import { useKUNGalgameTopicStore } from './modules/topic'
|
||||
|
||||
const pinia = createPinia()
|
||||
const store = createPinia()
|
||||
|
||||
// Function to set up Pinia, to be called in main.ts
|
||||
export const setupPinia = () => {
|
||||
if (!import.meta.env.SSR) {
|
||||
pinia.use(piniaPluginPersistedstate)
|
||||
}
|
||||
|
||||
return pinia
|
||||
export function setupPinia(app: App<Element>) {
|
||||
store.use(piniaPluginPersistedstate)
|
||||
app.use(store)
|
||||
}
|
||||
|
||||
// Reset all stores, used for logging out
|
||||
export const kungalgameStoreReset = () => {
|
||||
export function kungalgameStoreReset() {
|
||||
const balanceStore = useKUNGalgameBalanceStore()
|
||||
const editStore = useKUNGalgameEditStore()
|
||||
const homeStore = useKUNGalgameHomeStore()
|
||||
|
|
@ -65,3 +63,5 @@ export const kungalgameStoreReset = () => {
|
|||
settingsStore.$reset()
|
||||
topicStore.$reset()
|
||||
}
|
||||
|
||||
export { store }
|
||||
|
|
|
|||
3
src/types/shims-global.d.ts
vendored
3
src/types/shims-global.d.ts
vendored
|
|
@ -1,3 +0,0 @@
|
|||
interface Window {
|
||||
__pinia: string
|
||||
}
|
||||
|
|
@ -3,19 +3,11 @@
|
|||
*/
|
||||
|
||||
// Read language configuration from local storage
|
||||
let localStorageString = ''
|
||||
if (typeof window !== 'undefined') {
|
||||
const storage = localStorage.getItem('KUNGalgameSettings')
|
||||
localStorageString = storage ? storage : ''
|
||||
}
|
||||
const localStorageString = localStorage.getItem('KUNGalgameSettings')
|
||||
|
||||
// To ensure compatibility with various browsers, some browsers have 'zh-CN' as navigator.language, which may cause errors.
|
||||
const getInitLanguage = () => {
|
||||
let userLanguage = ''
|
||||
|
||||
if (typeof navigator !== 'undefined') {
|
||||
userLanguage = navigator.language
|
||||
}
|
||||
const userLanguage = navigator.language
|
||||
|
||||
if (userLanguage.includes('en')) {
|
||||
return 'en'
|
||||
|
|
@ -32,11 +24,6 @@ export const KUNGalgameLanguage = localStorageString
|
|||
: getInitLanguage()
|
||||
|
||||
// Read local day-night mode, this function will return 'true' if it's in dark mode.
|
||||
export const mode = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: ''
|
||||
}
|
||||
return ''
|
||||
}
|
||||
export const mode = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: ''
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
|
|||
|
||||
const successResponseArray = [200, 201, 202, 204, 205, 206]
|
||||
|
||||
export type FetchOptions = RequestInit & {
|
||||
export type FetchOptions = {
|
||||
method: HttpMethod
|
||||
credentials: 'include'
|
||||
headers?: Record<string, string>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const mainPageWidth = computed(() => {
|
|||
|
||||
.content-container {
|
||||
width: v-bind(mainPageWidth);
|
||||
transition: width 0.2s;
|
||||
transition: all 0.2s;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ const getRepliesCount = computed(() => {
|
|||
<span>{{ title }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Topic status, likes, etc. -->
|
||||
<div class="status">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -63,6 +64,7 @@ const getRepliesCount = computed(() => {
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Publication date of the topic -->
|
||||
<div class="time">
|
||||
<span>
|
||||
{{
|
||||
|
|
@ -76,6 +78,7 @@ const getRepliesCount = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview introduction of the topic -->
|
||||
<div class="introduction">
|
||||
<p>
|
||||
{{ plainText }}
|
||||
|
|
|
|||
|
|
@ -47,13 +47,14 @@ const handleClosePanel = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#teleported" :disabled="isEdit">
|
||||
<Teleport to="body" :disabled="isEdit">
|
||||
<Transition
|
||||
enter-active-class="animate__animated animate__fadeInUp animate__faster"
|
||||
leave-active-class="animate__animated animate__fadeOutDown animate__faster"
|
||||
>
|
||||
<div class="root" v-if="isEdit">
|
||||
<div class="container" :style="`width: ${panelWidth}`">
|
||||
<!-- Reply panel - reply to whom -->
|
||||
<div class="title">
|
||||
<h3>
|
||||
<span>{{ $tm('topic.panel.to') + ' @' }}</span>
|
||||
|
|
@ -70,10 +71,12 @@ const handleClosePanel = async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<!-- Reply editor -->
|
||||
<div class="content">
|
||||
<MilkdownEditor :is-show-menu="isShowAdvance" />
|
||||
</div>
|
||||
|
||||
<!-- Reply footer -->
|
||||
<div class="footer">
|
||||
<Tags
|
||||
style="margin-top: 10px; padding: 10px"
|
||||
|
|
|
|||
|
|
@ -24,9 +24,7 @@
|
|||
"src/**/*.d.ts",
|
||||
"src/**/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"server-dev.ts",
|
||||
"server-prod.ts"
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"exclude": ["node_modules", "dist"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
|
|
|
|||
|
|
@ -5,31 +5,26 @@ import vue from '@vitejs/plugin-vue'
|
|||
import { visualizer } from 'rollup-plugin-visualizer'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(({ mode, ssrBuild, command }) => {
|
||||
return {
|
||||
plugins: [vue(), visualizer() as PluginOption],
|
||||
/* Set the 'src' alias to '@' */
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
export default defineConfig({
|
||||
plugins: [vue(), visualizer() as PluginOption],
|
||||
/* Set the 'src' alias to '@' */
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
esbuild:
|
||||
command === 'serve'
|
||||
? {}
|
||||
: {
|
||||
drop: ['console', 'debugger'],
|
||||
},
|
||||
build: {
|
||||
// Dist dir name
|
||||
assetsDir: 'kun',
|
||||
},
|
||||
server: { host: '127.0.0.1', port: 1007 },
|
||||
// Suppress i18n warnings
|
||||
define: {
|
||||
__VUE_I18N_FULL_INSTALL__: true,
|
||||
__VUE_I18N_LEGACY_API__: false,
|
||||
__INTLIFY_PROD_DEVTOOLS__: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
drop: ['console', 'debugger'],
|
||||
},
|
||||
build: {
|
||||
// Dist dir name
|
||||
assetsDir: 'kun',
|
||||
},
|
||||
server: { host: '127.0.0.1', port: 1007 },
|
||||
// Suppress i18n warnings
|
||||
define: {
|
||||
__VUE_I18N_FULL_INSTALL__: true,
|
||||
__VUE_I18N_LEGACY_API__: false,
|
||||
__INTLIFY_PROD_DEVTOOLS__: false,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue