[Feature]

增加文章信息和状态显示

[Base]
为 BetterHr 组件添加 class 透传 (未测试)
精简 server.js

server.js

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

src/main.scss

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

src/stores/workRead.js

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

src/ui/BetterHr.vue

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

src/views/Work.vue

@@ -22,6 +22,9 @@ import 'mdui/components/button.js'
 import 'mdui/components/dropdown.js'
 import 'mdui/components/menu.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'
 
@@ -47,6 +50,12 @@ let bookmarkStore = null
 let paragraphs = []
 let currentParagraph = null
 
+const categoryName = {
+	mm: "男/男",
+	ff: "女/女",
+	fm: '女/男'
+}
+
 async function addBookmark() {
 	if (currentParagraph) {
 		const id = await bookmarkStore.add(workReadState.id, readIndex, currentParagraph.textContent.slice(0,20), '')
@@ -187,10 +196,42 @@ onBeforeUnmount(() => {
 			<article>
 				<h1 style="margin: auto">{{ workReadState.title }}</h1>
 				<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>
 					<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
 				</blockquote>
-				<Hr/>
+				<Hr />
 				<div ref='content'>
 					<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
 				</div>
@@ -237,6 +278,31 @@ onBeforeUnmount(() => {
 		<template v-if="workReadState.state == 'ready'">
 			<h1>{{ workReadState.title }}</h1>
 			<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>
 				<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
 			</blockquote>
@@ -254,4 +320,12 @@ onBeforeUnmount(() => {
     z-index: 1000; /* 确保悬浮按钮在其他内容上方 */
     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>