feat

2025-11-05 14:42:50 +08:00 · 2025-11-05 14:42:50 +08:00 · 0f6c1a0094
commit 0f6c1a0094
parent aa900531b6
18 changed files with 3007 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,26 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,104 @@
 # 文本阅读器 - 用户端
 这是一个基于 Vue 3 + TypeScript + Vite + Vant 构建的移动端文本阅读器应用。
 ## 功能特性
 - 📱 响应式设计，自适应各种屏幕尺寸
 - 📖 流畅的文本阅读体验
 - 🔍 文件搜索功能
 - 🎨 多种阅读主题（白色、护眼黄、绿色、灰色、夜间模式）
 - 📏 可调节字体大小和行间距
 - 💾 自动保存阅读设置
 - ⚡ 下拉刷新
 ## 技术栈
 - Vue 3
 - TypeScript
 - Vite
 - Vant 4（移动端组件库）
 - Vue Router
 - Pinia（状态管理）
 - Axios
 - Sass
 ## 快速开始
 ### 安装依赖
 ```bash
 npm install
 # 或
 pnpm install
 ```
 ### 开发模式
 ```bash
 npm run dev
 ```
 ### 生产构建
 ```bash
 npm run build
 ```
 ### 预览生产构建
 ```bash
 npm run preview
 ```
 ## 目录结构
 ```
 src/
 ├── api/              # API 接口
 │   ├── request.ts    # axios 封装
 │   └── reader.ts     # 阅读器相关接口
 ├── router/           # 路由配置
 ├── styles/           # 全局样式
 ├── views/            # 页面组件
 │   ├── Home.vue      # 首页（文件列表）
 │   └── Reader.vue    # 阅读页面
 ├── App.vue           # 根组件
 └── main.ts           # 入口文件
 ```
 ## 配置说明
 ### API 代理配置
 在 `vite.config.ts` 中配置了 API 代理：
 ```typescript
 server: {
  proxy: {
    '/api': {
      target: 'http://localhost:9220',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
 }
 ```
 请根据实际后端服务地址修改 `target`。
 ## 使用说明
 1. 在首页可以查看所有可用的文本文件
 2. 点击文件卡片进入阅读页面
 3. 在阅读页面点击右上角设置图标可以调整阅读设置
 4. 支持下拉刷新文件列表
 5. 支持搜索文件名或描述
 ## 注意事项
 - 确保后端服务已启动并运行在正确的端口
 - 建议使用现代浏览器以获得最佳体验
 - 移动端访问时建议添加到主屏幕以获得类似原生应用的体验
--- a/components.d.ts
+++ b/components.d.ts
@ -0,0 +1,22 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    VanButton: typeof import('vant/es')['Button']
    VanEmpty: typeof import('vant/es')['Empty']
    VanIcon: typeof import('vant/es')['Icon']
    VanLoading: typeof import('vant/es')['Loading']
    VanNavBar: typeof import('vant/es')['NavBar']
    VanPopup: typeof import('vant/es')['Popup']
    VanPullRefresh: typeof import('vant/es')['PullRefresh']
    VanSearch: typeof import('vant/es')['Search']
    VanSlider: typeof import('vant/es')['Slider']
  }
 }
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
 <!doctype html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>文本阅读器</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,30 @@
 {
  "name": "agileboot-reader-mobile",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.2.5",
    "axios": "^1.6.2",
    "pinia": "^2.1.7",
    "vant": "^4.8.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "typescript": "^5.3.0",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.27",
    "unplugin-vue-components": "^0.26.0",
    "unplugin-auto-import": "^0.17.2",
    "@types/node": "^20.10.0",
    "sass": "^1.69.5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,23 @@
 <template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
 </template>
 <script setup lang="ts">
 // App组件
 </script>
 <style scoped>
 #app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
 }
 </style>
--- a/src/api/reader.ts
+++ b/src/api/reader.ts
@ -0,0 +1,54 @@
 import { request } from './request'
 export interface TextFile {
  fileId: number
  fileName: string
  originalFileName: string
  filePath: string
  fileSize: number
  description: string
  status: number
  uploadUserId: number
  uploadUserName: string
  createTime: string
  updateTime: string
 }
 export interface TextFileContent {
  fileId: number
  fileName: string
  content: string
  fileSize: number
 }
 /**
 * 获取所有可用文本文件列表
 */
 export const getAllTextFiles = () => {
  return request<TextFile[]>({
    url: '/reader/public/files',
    method: 'get'
  })
 }
 /**
 * 获取文件详情
 */
 export const getFileDetail = (fileId: number) => {
  return request<TextFile>({
    url: `/reader/public/file/${fileId}`,
    method: 'get'
  })
 }
 /**
 * 读取文件内容
 */
 export const readFileContent = (fileId: number) => {
  return request<TextFileContent>({
    url: `/reader/public/read/${fileId}`,
    method: 'get'
  })
 }
--- a/src/api/request.ts
+++ b/src/api/request.ts
@ -0,0 +1,59 @@
 import axios from 'axios'
 import { showToast, showLoadingToast, closeToast } from 'vant'
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 interface ResponseData<T = any> {
  code: number
  data: T
  msg: string
 }
 const service: AxiosInstance = axios.create({
  baseURL: '/api',
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
 })
 // 请求拦截器
 service.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
 )
 // 响应拦截器
 service.interceptors.response.use(
  (response: AxiosResponse<ResponseData>) => {
    const { code, data, msg } = response.data
    if (code === 200 || code === 0) {
      return response.data
    } else {
      showToast({
        message: msg || '请求失败',
        type: 'fail'
      })
      return Promise.reject(new Error(msg || '请求失败'))
    }
  },
  (error) => {
    showToast({
      message: error.message || '网络错误',
      type: 'fail'
    })
    return Promise.reject(error)
  }
 )
 export default service
 export const request = <T = any>(config: AxiosRequestConfig): Promise<ResponseData<T>> => {
  return service.request<any, ResponseData<T>>(config)
 }
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@ -0,0 +1,87 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const createPinia: typeof import('pinia')['createPinia']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const defineStore: typeof import('pinia')['defineStore']
  const effectScope: typeof import('vue')['effectScope']
  const getActivePinia: typeof import('pinia')['getActivePinia']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const mapActions: typeof import('pinia')['mapActions']
  const mapGetters: typeof import('pinia')['mapGetters']
  const mapState: typeof import('pinia')['mapState']
  const mapStores: typeof import('pinia')['mapStores']
  const mapWritableState: typeof import('pinia')['mapWritableState']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const resolveComponent: typeof import('vue')['resolveComponent']
  const setActivePinia: typeof import('pinia')['setActivePinia']
  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const storeToRefs: typeof import('pinia')['storeToRefs']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  const toValue: typeof import('vue')['toValue']
  const triggerRef: typeof import('vue')['triggerRef']
  const unref: typeof import('vue')['unref']
  const useAttrs: typeof import('vue')['useAttrs']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useId: typeof import('vue')['useId']
  const useLink: typeof import('vue-router')['useLink']
  const useModel: typeof import('vue')['useModel']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useSlots: typeof import('vue')['useSlots']
  const useTemplateRef: typeof import('vue')['useTemplateRef']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
  // @ts-ignore
  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
  import('vue')
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,15 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import 'vant/lib/index.css'
 import './styles/global.scss'
 const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,33 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: { title: '文本阅读器' }
  },
  {
    path: '/reader/:id',
    name: 'Reader',
    component: () => import('@/views/Reader.vue'),
    meta: { title: '阅读' }
  }
 ]
 const router = createRouter({
  history: createWebHistory(),
  routes
 })
 router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title as string
  }
  next()
 })
 export default router
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -0,0 +1,79 @@
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 html,
 body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f7f8fa;
 }
 #app {
  width: 100%;
  height: 100%;
 }
 /* 滚动条样式 */
 ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
 }
 ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
 }
 ::-webkit-scrollbar-track {
  background-color: transparent;
 }
 /* 列表项动画 */
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 0.3s;
 }
 .fade-enter-from,
 .fade-leave-to {
  opacity: 0;
 }
 /* 文件卡片样式 */
 .file-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  &:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
 }
 /* 阅读器样式 */
 .reader-content {
  line-height: 1.8;
  font-size: 16px;
  color: #333;
  padding: 20px;
  background: #fff;
  p {
    margin-bottom: 1em;
    text-indent: 2em;
  }
 }
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,223 @@
 <template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar title="文本阅读器" fixed placeholder>
      <template #right>
        <van-icon name="search" size="18" @click="showSearch = true" />
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-search
      v-show="showSearch"
      v-model="searchText"
      placeholder="搜索文件名或描述"
      @cancel="showSearch = false"
    />
    <!-- 文件列表 -->
    <div class="file-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-empty
          v-if="filteredFiles.length === 0 && !loading"
          description="暂无文件"
        />
        <div v-else class="file-items">
          <div
            v-for="file in filteredFiles"
            :key="file.fileId"
            class="file-card"
            @click="openFile(file.fileId)"
          >
            <div class="file-header">
              <van-icon name="notes-o" size="24" color="#1989fa" />
              <span class="file-name">{{ file.originalFileName }}</span>
            </div>
            <div v-if="file.description" class="file-description">
              {{ file.description }}
            </div>
            <div class="file-footer">
              <span class="file-size">{{ formatFileSize(file.fileSize) }}</span>
              <span class="file-date">{{ formatDate(file.createTime) }}</span>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <!-- 加载中 -->
    <van-loading v-if="loading" class="loading" size="24px" vertical>
      加载中...
    </van-loading>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { getAllTextFiles, type TextFile } from '@/api/reader'
 import { showToast } from 'vant'
 const router = useRouter()
 const files = ref<TextFile[]>([])
 const loading = ref(false)
 const refreshing = ref(false)
 const showSearch = ref(false)
 const searchText = ref('')
 // 过滤后的文件列表
 const filteredFiles = computed(() => {
  if (!searchText.value) {
    return files.value
  }
  const keyword = searchText.value.toLowerCase()
  return files.value.filter(
    (file) =>
      file.originalFileName.toLowerCase().includes(keyword) ||
      (file.description && file.description.toLowerCase().includes(keyword))
  )
 })
 // 获取文件列表
 const fetchFiles = async () => {
  try {
    loading.value = true
    const response = await getAllTextFiles()
    files.value = response.data || []
  } catch (error) {
    showToast('获取文件列表失败')
  } finally {
    loading.value = false
    refreshing.value = false
  }
 }
 // 下拉刷新
 const onRefresh = () => {
  fetchFiles()
 }
 // 打开文件
 const openFile = (fileId: number) => {
  router.push(`/reader/${fileId}`)
 }
 // 格式化文件大小
 const formatFileSize = (size: number): string => {
  if (size < 1024) {
    return `${size} B`
  } else if (size < 1024 * 1024) {
    return `${(size / 1024).toFixed(2)} KB`
  } else {
    return `${(size / (1024 * 1024)).toFixed(2)} MB`
  }
 }
 // 格式化日期
 const formatDate = (dateStr: string): string => {
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const day = 24 * 60 * 60 * 1000
  if (diff < day) {
    return '今天'
  } else if (diff < 2 * day) {
    return '昨天'
  } else if (diff < 7 * day) {
    return `${Math.floor(diff / day)}天前`
  } else {
    return `${date.getMonth() + 1}-${date.getDate()}`
  }
 }
 onMounted(() => {
  fetchFiles()
 })
 </script>
 <style scoped lang="scss">
 .home-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
 }
 .file-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
 }
 .file-items {
  padding-bottom: 20px;
 }
 .file-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  &:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
 }
 .file-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  .file-name {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
 }
 .file-description {
  font-size: 14px;
  color: #969799;
  margin-bottom: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }
 .file-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #c8c9cc;
  .file-size,
  .file-date {
    display: inline-block;
  }
 }
 .loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
 </style>
--- a/src/views/Reader.vue
+++ b/src/views/Reader.vue
@ -0,0 +1,320 @@
 <template>
  <div class="reader-container">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="fileInfo?.fileName || '阅读'"
      left-arrow
      fixed
      placeholder
      @click-left="onBack"
    >
      <template #right>
        <van-icon name="setting-o" size="18" @click="showSettings = true" />
      </template>
    </van-nav-bar>
    <!-- 阅读内容 -->
    <div class="reader-wrapper" :style="readerStyle">
      <van-loading v-if="loading" class="loading" size="24px" vertical>
        加载中...
      </van-loading>
      <div v-else class="reader-content" :style="contentStyle">
        <h2 class="file-title">{{ fileInfo?.fileName }}</h2>
        <div class="content-text" v-html="formattedContent"></div>
      </div>
    </div>
    <!-- 设置面板 -->
    <van-popup
      v-model:show="showSettings"
      position="bottom"
      :style="{ height: '40%' }"
      round
    >
      <div class="settings-panel">
        <h3>阅读设置</h3>
        <div class="setting-item">
          <span>字体大小</span>
          <div class="font-size-control">
            <van-button
              size="small"
              @click="changeFontSize(-2)"
              :disabled="fontSize <= 12"
            >
              A-
            </van-button>
            <span class="font-size-value">{{ fontSize }}px</span>
            <van-button
              size="small"
              @click="changeFontSize(2)"
              :disabled="fontSize >= 24"
            >
              A+
            </van-button>
          </div>
        </div>
        <div class="setting-item">
          <span>行间距</span>
          <van-slider
            v-model="lineHeight"
            :min="1.2"
            :max="2.5"
            :step="0.1"
            active-color="#1989fa"
          />
        </div>
        <div class="setting-item">
          <span>背景颜色</span>
          <div class="theme-colors">
            <div
              v-for="theme in themes"
              :key="theme.name"
              class="theme-item"
              :class="{ active: currentTheme === theme.name }"
              :style="{ backgroundColor: theme.bgColor }"
              @click="changeTheme(theme.name)"
            >
              <van-icon
                v-if="currentTheme === theme.name"
                name="success"
                color="#fff"
              />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { readFileContent, type TextFileContent } from '@/api/reader'
 import { showToast } from 'vant'
 const router = useRouter()
 const route = useRoute()
 const fileInfo = ref<TextFileContent | null>(null)
 const loading = ref(false)
 const showSettings = ref(false)
 // 阅读设置
 const fontSize = ref(16)
 const lineHeight = ref(1.8)
 const currentTheme = ref('white')
 const themes = [
  { name: 'white', bgColor: '#ffffff', textColor: '#333333' },
  { name: 'yellow', bgColor: '#fef8e6', textColor: '#333333' },
  { name: 'green', bgColor: '#e3f5e1', textColor: '#333333' },
  { name: 'gray', bgColor: '#f0f0f0', textColor: '#333333' },
  { name: 'dark', bgColor: '#1f1f1f', textColor: '#cccccc' }
 ]
 // 计算样式
 const readerStyle = computed(() => {
  const theme = themes.find((t) => t.name === currentTheme.value)
  return {
    backgroundColor: theme?.bgColor || '#ffffff'
  }
 })
 const contentStyle = computed(() => {
  const theme = themes.find((t) => t.name === currentTheme.value)
  return {
    fontSize: `${fontSize.value}px`,
    lineHeight: lineHeight.value,
    color: theme?.textColor || '#333333'
  }
 })
 // 格式化内容（将换行符转换为段落）
 const formattedContent = computed(() => {
  if (!fileInfo.value?.content) return ''
  return fileInfo.value.content
    .split('\n')
    .filter((line) => line.trim())
    .map((line) => `<p>${line}</p>`)
    .join('')
 })
 // 获取文件内容
 const fetchContent = async () => {
  try {
    loading.value = true
    const fileId = Number(route.params.id)
    const response = await readFileContent(fileId)
    fileInfo.value = response.data
  } catch (error) {
    showToast('获取文件内容失败')
    router.back()
  } finally {
    loading.value = false
  }
 }
 // 返回
 const onBack = () => {
  router.back()
 }
 // 修改字体大小
 const changeFontSize = (delta: number) => {
  const newSize = fontSize.value + delta
  if (newSize >= 12 && newSize <= 24) {
    fontSize.value = newSize
  }
 }
 // 切换主题
 const changeTheme = (themeName: string) => {
  currentTheme.value = themeName
 }
 onMounted(() => {
  fetchContent()
  // 从localStorage读取设置
  const savedSettings = localStorage.getItem('readerSettings')
  if (savedSettings) {
    try {
      const settings = JSON.parse(savedSettings)
      fontSize.value = settings.fontSize || 16
      lineHeight.value = settings.lineHeight || 1.8
      currentTheme.value = settings.theme || 'white'
    } catch (e) {
      console.error('读取设置失败', e)
    }
  }
 })
 // 保存设置
 const saveSettings = () => {
  localStorage.setItem(
    'readerSettings',
    JSON.stringify({
      fontSize: fontSize.value,
      lineHeight: lineHeight.value,
      theme: currentTheme.value
    })
  )
 }
 // 监听设置变化并保存
 watch([fontSize, lineHeight, currentTheme], () => {
  saveSettings()
 })
 </script>
 <style scoped lang="scss">
 .reader-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
 }
 .reader-wrapper {
  flex: 1;
  overflow-y: auto;
  transition: background-color 0.3s;
 }
 .reader-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 16px;
  transition: all 0.3s;
  .file-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
  }
  .content-text {
    :deep(p) {
      margin-bottom: 1em;
      text-indent: 2em;
      word-break: break-word;
    }
  }
 }
 .loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
 .settings-panel {
  padding: 20px;
  h3 {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
  }
  .setting-item {
    margin-bottom: 24px;
    > span {
      display: block;
      font-size: 14px;
      color: #646566;
      margin-bottom: 12px;
    }
  }
  .font-size-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    .font-size-value {
      font-size: 14px;
      color: #323233;
      min-width: 50px;
      text-align: center;
    }
  }
  .theme-colors {
    display: flex;
    gap: 12px;
    .theme-item {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      border: 2px solid #e5e5e5;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      &.active {
        border-color: #1989fa;
        transform: scale(1.1);
      }
      &:active {
        transform: scale(0.95);
      }
    }
  }
 }
 </style>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,33 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    /* Path alias */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,12 @@
 {
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,37 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 import Components from 'unplugin-vue-components/vite'
 import { VantResolver } from 'unplugin-vue-components/resolvers'
 import AutoImport from 'unplugin-auto-import/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:18080',  // 统一通过Gateway访问
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
 })