1 Commits

Author SHA1 Message Date
9ef6da3efb [Feature]
All checks were successful
Node.js CI / build-and-test (push) Successful in 43s
增加文章信息和状态显示

[Base]
为 BetterHr 组件添加 class 透传 (未测试)
精简 server.js
2025-05-17 22:48:20 +08:00
5 changed files with 112 additions and 11 deletions

View File

@ -33,9 +33,9 @@ if (!isProduction) {
}) })
app.use(vite.middlewares) app.use(vite.middlewares)
} else { } else {
const compression = (await import('compression')).default //const compression = (await import('compression')).default
const sirv = (await import('sirv')).default const sirv = (await import('sirv')).default
app.use(compression()) //app.use(compression())
app.use(base, sirv('./dist/client', { extensions: [] })) app.use(base, sirv('./dist/client', { extensions: [] }))
} }

View File

@ -21,8 +21,8 @@ body {
// MDUI 组件样式 // MDUI 组件样式
mdui-card { mdui-card {
width: 100%; width: 98%;
padding: 0 16px 16px; padding: 8px;
} }
mdui-text-field { mdui-text-field {

View File

@ -12,14 +12,27 @@ export const useWorkReadState = defineStore('workRead', () => {
const pesud = ref(null) const pesud = ref(null)
const title = ref(null) const title = ref(null)
const text = ref(null) const text = ref(null)
const publishedTime = ref(null)
const state = ref('') const state = ref('')
const publishedTime = ref(null)
const wordCount = ref(0)
const kudoCount = ref(0)
const hitCount = ref(0)
const category = ref([])
const fandom = ref([])
const lang = ref(null)
function setData(data) { function setData(data) {
id.value = data.workId id.value = data.workId
title.value = data.title title.value = data.title
summary.value = [escapeAndFormatText(data.summary)] summary.value = [escapeAndFormatText(data.summary)]
pesud.value = data.pesud pesud.value = data.pesud
text.value = data.text.split('\n\n') text.value = data.text.split('\n\n')
publishedTime.value = data.stats.publishedTime
wordCount.value = data.stats.wordCount
kudoCount.value = data.stats.kudoCount
hitCount.value = data.stats.hitCount
category.value = data.category
fandom.value = data.fandom
lang.value = data.lang
} }
async function loadWork(target) { async function loadWork(target) {
if (target == id.value || state.value == 'loading') return if (target == id.value || state.value == 'loading') return
@ -39,8 +52,14 @@ export const useWorkReadState = defineStore('workRead', () => {
summary, summary,
pesud, pesud,
text, text,
publishedTime,
state, state,
publishedTime,
wordCount,
kudoCount,
hitCount,
category,
fandom,
lang,
setData, setData,
loadWork loadWork
} }

View File

@ -1,11 +1,19 @@
<script setup>import 'mdui/components/divider.js'</script> <script setup>
import 'mdui/components/divider.js'
defineProps(['class']) // 接收外部 class 属性
</script>
<template> <template>
<ClientOnly><mdui-divider class='hr-divider'></mdui-divider> <ClientOnly>
<template #ssr><hr/></template></ClientOnly> <!-- class 传入 mdui-divider -->
<mdui-divider :class="['hr-divider', $attrs.class]"></mdui-divider>
<template #ssr><hr :class="['hr-divider', $attrs.class]" /></template>
</ClientOnly>
</template> </template>
<style scoped> <style scoped>
.hr-divider { .hr-divider {
margin: 8px 0px; margin: 8px 0px;
} }
</style> </style>

View File

@ -22,6 +22,9 @@ import 'mdui/components/button.js'
import 'mdui/components/dropdown.js' import 'mdui/components/dropdown.js'
import 'mdui/components/menu.js' import 'mdui/components/menu.js'
import 'mdui/components/menu-item.js' import 'mdui/components/menu-item.js'
import 'mdui/components/collapse.js'
import 'mdui/components/collapse-item.js'
import 'mdui/components/card.js'
import '@mdui/icons/bookmark.js' import '@mdui/icons/bookmark.js'
@ -47,6 +50,12 @@ let bookmarkStore = null
let paragraphs = [] let paragraphs = []
let currentParagraph = null let currentParagraph = null
const categoryName = {
mm: "男/男",
ff: "女/女",
fm: '女/男'
}
async function addBookmark() { async function addBookmark() {
if (currentParagraph) { if (currentParagraph) {
const id = await bookmarkStore.add(workReadState.id, readIndex, currentParagraph.textContent.slice(0,20), '') const id = await bookmarkStore.add(workReadState.id, readIndex, currentParagraph.textContent.slice(0,20), '')
@ -187,10 +196,42 @@ onBeforeUnmount(() => {
<article> <article>
<h1 style="margin: auto">{{ workReadState.title }}</h1> <h1 style="margin: auto">{{ workReadState.title }}</h1>
<h4>{{ workReadState.pesud }}</h4> <h4>{{ workReadState.pesud }}</h4>
<mdui-card style="margin: 8px; padding: 0px;"><mdui-collapse acc>
<mdui-collapse-item value="info"><mdui-list-item class="infoblockhead" slot="header">
作品信息
</mdui-list-item><div class="infoblock"><dl>
<dt>分类</dt><ul>
<li v-for="item in workReadState.category" :key="item">
{{ categoryName[item] }}</li>
</ul>
<dt>原著</dt><ul>
<li v-for="item in workReadState.fandom" :key="item">
{{ item }}</li>
</ul>
<dt>语言</dt><dd>
{{ workReadState.lang }}
</dd>
</dl></div></mdui-collapse-item>
<mdui-collapse-item value="stats"><mdui-list-item class="infoblockhead" slot="header">
作品状态
</mdui-list-item><div class="infoblock"><dl>
<dt>发布时间</dt><dd>
{{ workReadState.publishedTime.year }} -
{{ workReadState.publishedTime.month }} -
{{ workReadState.publishedTime.date }}
</dd>
<dt>字数</dt><dd>
{{ workReadState.wordCount }}
</dd>
<dt>点击</dt><dd>
{{ workReadState.hitCount }}
</dd>
</dl></div></mdui-collapse-item>
</mdui-collapse></mdui-card>
<blockquote> <blockquote>
<p v-for="para in workReadState.summary" :key="para" v-html='para'></p> <p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
</blockquote> </blockquote>
<Hr/> <Hr />
<div ref='content'> <div ref='content'>
<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p> <p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
</div> </div>
@ -237,6 +278,31 @@ onBeforeUnmount(() => {
<template v-if="workReadState.state == 'ready'"> <template v-if="workReadState.state == 'ready'">
<h1>{{ workReadState.title }}</h1> <h1>{{ workReadState.title }}</h1>
<h2>{{ workReadState.pesud }}</h2> <h2>{{ workReadState.pesud }}</h2>
<dl>
<dt>分类</dt><ul>
<li v-for="item in workReadState.category" :key="item">
{{ categoryName[item] }}</li>
</ul>
<dt>原著</dt><ul>
<li v-for="item in workReadState.fandom" :key="item">
{{ item }}</li>
</ul>
<dt>语言</dt><dd>
{{ workReadState.lang }}
</dd>
<dt>发布时间</dt><dd>
{{ workReadState.publishedTime.year }} -
{{ workReadState.publishedTime.month }} -
{{ workReadState.publishedTime.date }}
</dd>
<dt>字数</dt><dd>
{{ workReadState.wordCount }}
</dd>
<dt>点击</dt><dd>
{{ workReadState.hitCount }}
</dd>
</dl>
<Hr />
<blockquote> <blockquote>
<p v-for="para in workReadState.summary" :key="para" v-html='para'></p> <p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
</blockquote> </blockquote>
@ -254,4 +320,12 @@ onBeforeUnmount(() => {
z-index: 1000; /* 确保悬浮按钮在其他内容上方 */ z-index: 1000; /* 确保悬浮按钮在其他内容上方 */
animation: slideInFromRight var(--mdui-motion-duration-medium2) var(--mdui-motion-easing-standard); /* 动画时长和缓动效果 */ animation: slideInFromRight var(--mdui-motion-duration-medium2) var(--mdui-motion-easing-standard); /* 动画时长和缓动效果 */
} }
.infoblock {
margin: 8px 16px;
}
.infoblockhead {
background-color: rgb(var(--mdui-color-primary-container));
}
</style> </style>