├── .gitignore
├── .vscode
    └── extensions.json
├── README.md
├── doc
    ├── ai-search.png
    ├── col-view.png
    ├── feed-follow.png
    ├── feed-items.png
    ├── img-reader.png
    ├── login.png
    ├── mobile-feed.png
    ├── mobile-reader.png
    ├── podcast-reader.png
    ├── text-reader.png
    └── video-reader.png
├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
    ├── data.json
    ├── favicon.ico
    └── logo.svg
├── src-tauri
    ├── .gitignore
    ├── Cargo.lock
    ├── Cargo.toml
    ├── build.rs
    ├── capabilities
    │   └── default.json
    ├── icons
    │   ├── 128x128.png
    │   ├── 128x128@2x.png
    │   ├── 32x32.png
    │   ├── Square107x107Logo.png
    │   ├── Square142x142Logo.png
    │   ├── Square150x150Logo.png
    │   ├── Square284x284Logo.png
    │   ├── Square30x30Logo.png
    │   ├── Square310x310Logo.png
    │   ├── Square44x44Logo.png
    │   ├── Square71x71Logo.png
    │   ├── Square89x89Logo.png
    │   ├── StoreLogo.png
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    ├── src
    │   ├── lib.rs
    │   └── main.rs
    └── tauri.conf.json
├── src
    ├── App.vue
    ├── api
    │   └── index.ts
    ├── assets
    │   └── vue.svg
    ├── components
    │   ├── ConfirmDialog.vue
    │   ├── Greet.vue
    │   ├── HelpDialog.vue
    │   ├── ImagePreviewDialog.vue
    │   └── MPlayer.vue
    ├── layout
    │   ├── IndexLayout copy.vue
    │   ├── IndexLayout.vue
    │   ├── SideNav.vue
    │   ├── settings
    │   │   ├── Settings.vue
    │   │   └── sub
    │   │   │   ├── SettingsAbout.vue
    │   │   │   ├── SettingsAppearance.vue
    │   │   │   ├── SettingsGeneral.vue
    │   │   │   └── SettingsIntegrated.vue
    │   └── sub
    │   │   ├── FeedDialog.vue
    │   │   ├── HelpDialog.vue
    │   │   ├── PlayList.vue
    │   │   ├── SearchDialog.vue
    │   │   └── SideBar.vue
    ├── main.ts
    ├── plugins
    │   ├── ImgPreview.ts
    │   ├── confirm.ts
    │   ├── index.ts
    │   └── vuetify.ts
    ├── repository
    │   ├── index.ts
    │   ├── model.ts
    │   └── repository.ts
    ├── router
    │   └── index.ts
    ├── service
    │   ├── index.ts
    │   ├── rag.ts
    │   ├── recommend.ts
    │   └── types.ts
    ├── store
    │   ├── base.ts
    │   ├── feeds.ts
    │   ├── index.ts
    │   ├── items.ts
    │   ├── playlist.ts
    │   ├── settings.ts
    │   └── types.ts
    ├── types
    │   └── colorthief.d.ts
    ├── utils
    │   ├── dateFormat.ts
    │   ├── dbHelper.ts
    │   ├── debound.ts
    │   ├── http.ts
    │   ├── mdUtils.ts
    │   ├── scroll.ts
    │   ├── scrollListener.ts
    │   ├── useCalView.ts
    │   ├── useElResize.ts
    │   ├── useHotkeys.ts
    │   ├── useItem.ts
    │   └── useSideChapter.ts
    ├── views
    │   ├── Combo.vue
    │   ├── Discovery.vue
    │   ├── Download.vue
    │   ├── FeedAssistant.vue
    │   ├── InjectionSymbols.ts
    │   ├── Items.vue
    │   ├── Login.vue
    │   ├── RelatedArticles.vue
    │   ├── Welcome.vue
    │   ├── discover
    │   │   ├── RssEditor.vue
    │   │   └── RssList.vue
    │   ├── item
    │   │   ├── CardItem.vue
    │   │   ├── ContentItem.vue
    │   │   ├── Index.vue
    │   │   ├── MagazineItem.vue
    │   │   ├── TextItem.vue
    │   │   └── types.ts
    │   └── reader
    │   │   ├── Index.vue
    │   │   ├── InjectionSymbols.ts
    │   │   ├── Reader.vue
    │   │   ├── index.ts
    │   │   └── sub
    │   │       ├── BasicReader.vue
    │   │       ├── ImageReader.vue
    │   │       ├── PodcastReader.vue
    │   │       └── VideoReader.vue
    └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | dev-dist
15 | 
16 | # Editor directories and files
17 | .vscode/*
18 | !.vscode/extensions.json
19 | .idea
20 | .DS_Store
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "Vue.volar",
4 |     "tauri-apps.tauri-vscode",
5 |     "rust-lang.rust-analyzer"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # webfollow-app
 2 | 
 3 | > RSS reader suppot fever api
 4 | 
 5 | - Strive to be the best reader experience
 6 | - 致力成为体验最佳的阅读器
 7 | 
 8 | ## Feature
 9 | 
10 | **feature**
11 | 
12 | - [x] fever api
13 | - [x] data in local
14 | - [x] ai search
15 | - [x] recommend
16 | - [x] llm summary + llm filter
17 | - [x] pwa
18 | 
19 | **base**
20 | 
21 | - [x] auto-reader
22 | - [x] text-reader
23 | - [x] podcast-reader
24 | - [x] img-reader
25 | - [x] video-reader
26 | - [x] auto-view
27 | - [x] column-view
28 | - [x] list-view
29 | - [x] card-view
30 | - [x] text-view
31 | - [x] content-view
32 | 
33 | **todo list**
34 | 
35 | - [ ] export opml
36 | - [ ] data reset
37 | 
38 | ## Demo
39 | 
40 | [online](https://webfollow.cc)
41 | 
42 | ## Preview
43 | 
44 | **AI**
45 | 
46 | ![](./doc/ai-search.png)
47 | 
48 | **Mobile**
49 | 
50 | ![](./doc/mobile-feed.png)
51 | ![](./doc/mobile-reader.png)
52 | 
53 | **PC**
54 | 
55 | ![](./doc/col-view.png)
56 | ![](./doc/text-reader.png)
57 | ![](./doc/podcast-reader.png)
58 | ![](./doc/video-reader.png)
59 | ![](./doc/img-reader.png)
60 | ![](./doc/feed-items.png)
61 | ![](./doc/login.png)
62 | ![](./doc/feed-follow.png)
63 | 
64 | ## Use
65 | 
66 | ```
67 | npm install
68 | ```
69 | 
70 | ```
71 | npm run dev
72 | ```
73 | 
74 | ## Notice
75 | 
76 | - Enhancements to feed subscription editing for fever
77 | 


--------------------------------------------------------------------------------
/doc/ai-search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/ai-search.png


--------------------------------------------------------------------------------
/doc/col-view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/col-view.png


--------------------------------------------------------------------------------
/doc/feed-follow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/feed-follow.png


--------------------------------------------------------------------------------
/doc/feed-items.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/feed-items.png


--------------------------------------------------------------------------------
/doc/img-reader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/img-reader.png


--------------------------------------------------------------------------------
/doc/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/login.png


--------------------------------------------------------------------------------
/doc/mobile-feed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/mobile-feed.png


--------------------------------------------------------------------------------
/doc/mobile-reader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/mobile-reader.png


--------------------------------------------------------------------------------
/doc/podcast-reader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/podcast-reader.png


--------------------------------------------------------------------------------
/doc/text-reader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/text-reader.png


--------------------------------------------------------------------------------
/doc/video-reader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/doc/video-reader.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <title>WebFollow - 在线 RSS 阅读器</title>
  7 |   <meta name="description" content="简单、高效、全平台、网页版RSS 阅读器">
  8 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  9 |   <meta name="dc.title" content="WebFollow - 在线 RSS 阅读器<">
 10 |   <meta name="dc.description" content="简单、高效、全平台、网页版RSS 阅读器">
 11 |   <meta name="dc.source" content="https://www.webfollow.cc/">
 12 |   <meta name="dc.language" content="zh_CN">
 13 |   <meta name="robots" content="index, follow">
 14 |   <meta name="google-adsense-account" content="ca-pub-1354874712972588">
 15 |   <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
 16 |   <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
 17 |   <meta property="og:url" content="https://www.webfollow.cc/">
 18 |   <meta property="og:site_name" content="webfollow">
 19 |   <meta property="og:locale" content="zh_CN">
 20 |   <meta property="og:type" content="article">
 21 |   <meta name="twitter:card" content="summary_large_image">
 22 |   <meta name="twitter:site" content="@webfollow">
 23 |   <meta name="twitter:creator" content="@webfollow">
 24 |   <meta name="twitter:title" content="WebFollow - 在线 RSS 阅读器">
 25 |   <meta name="twitter:description" content="简单、高效、全平台、网页版RSS 阅读器">
 26 |   <meta name="twitter:image" content="">
 27 |   <!-- 谷歌浏览器 -->
 28 |   <meta name="theme-color" content="#fff">
 29 |   <!-- iOS Safari -->
 30 |   <meta name="apple-mobile-web-app-capable" content="yes">
 31 |   <meta name="apple-mobile-web-app-status-bar-style" content="black">
 32 |   <link rel="icon" type="image" href="/favicon.ico" />
 33 |   <link rel="apple-touch-icon" href="/favicon.ico" sizes="180x180">
 34 |   <link rel="mask-icon" href="/favicon.ico">
 35 |   <title>Webfollow</title>
 36 |   <style>
 37 |     @keyframes r {
 38 |       0% {
 39 |         transform: rotateX(0deg);
 40 |       }
 41 | 
 42 |       30% {
 43 |         transform: rotateZ(0deg);
 44 |       }
 45 | 
 46 |       36% {
 47 |         transform: rotateZ(180deg);
 48 |       }
 49 | 
 50 |       60% {
 51 |         transform: rotateZ(360deg);
 52 |       }
 53 | 
 54 |       100% {
 55 |         transform: rotateZ(360deg);
 56 |       }
 57 |     }
 58 | 
 59 |     @keyframes r-text {
 60 |       0% {
 61 |         opacity: .1;
 62 |       }
 63 | 
 64 |       30% {
 65 |         opacity: .5;
 66 |       }
 67 | 
 68 |       36% {
 69 |         opacity: 1;
 70 |       }
 71 | 
 72 |       50% {
 73 |         opacity: 1;
 74 |       }
 75 | 
 76 |       80% {
 77 |         opacity: .5;
 78 |       }
 79 | 
 80 |       100% {
 81 |         opacity: .1;
 82 |       }
 83 |     }
 84 | 
 85 |     .loading-logo {
 86 |       animation: r 2s infinite;
 87 |     }
 88 | 
 89 |     .loding-text {
 90 |       animation: r-text 3s infinite;
 91 |     }
 92 |   </style>
 93 |   <script>
 94 |     function log(...args) {
 95 |       console.log("%cWebFollow", "padding:3px 5px;border-radius:5px;background:#999;color:#fff;font-size:1em;", ...args)
 96 |     }
 97 |     function info(...args) {
 98 |       console.log("%cWebFollow", "padding:3px 5px;border-radius:5px;background:#ff7a61;color:#fff;font-size:1em;", ...args)
 99 |     }
100 |     function debug(...args) {
101 |       console.log("%cWebFollow", "padding:3px 5px;border-radius:5px;background:green;color:#fff;font-size:1em;", ...args)
102 |     }
103 |     function err(e, ...args) {
104 |       console.error("%cWebFollow", "padding:3px 5px;border-radius:5px;background:#ff7a61;color:#fff;font-size:1em;", ...args, e)
105 |     }
106 | 
107 |     function setTitle(total) {
108 |       if (total) {
109 |         document.title = `WebFollow - 在线 RSS 阅读器`
110 |       } else {
111 |         document.title = `WebFollow - 在线 RSS 阅读器`
112 |       }
113 |     }
114 |     const webfollowApp = {};
115 |     // if (!window.location.host.includes("local")) {
116 |     //   var _hmt = _hmt || [];
117 |     //   (function () {
118 |     //     var hm = document.createElement("script");
119 |     //     hm.src = "https://hm.baidu.com/hm.js?392ac0df04b6b46eb9cc5a38c42b8004";
120 |     //     var s = document.getElementsByTagName("script")[0];
121 |     //     s.parentNode.insertBefore(hm, s);
122 |     //   })();
123 |     // }
124 |   </script>
125 |   <!-- Google tag (gtag.js) -->
126 |   <script async src="https://www.googletagmanager.com/gtag/js?id=G-E4PSK55B0V"></script>
127 |   <script>
128 |     window.dataLayer = window.dataLayer || [];
129 |     function gtag() { dataLayer.push(arguments); }
130 |     gtag('js', new Date());
131 | 
132 |     gtag('config', 'G-E4PSK55B0V');
133 |   </script>
134 |   <script async src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
135 | 
136 | </head>
137 | 
138 | <body>
139 |   <div id="app"></div>
140 |   <div id="loading" style="text-align: center; margin-top: 36vh;">
141 |     <img class="loading-logo" style="width: 5rem;" src="/logo.svg" alt="">
142 |     <p class="loding-text">加载中....</p>
143 |   </div>
144 |   <script>
145 |     window.addEventListener('load', () => document.getElementById('loading').style.display = 'none');
146 |   </script>
147 |   <script type="module" src="/src/main.ts"></script>
148 | 
149 | </body>
150 | 
151 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webfollow",
 3 |   "private": true,
 4 |   "version": "0.1.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vue-tsc --noEmit && vite build",
 9 |     "preview": "vite preview",
10 |     "tauri": "tauri"
11 |   },
12 |   "dependencies": {
13 |     "@mdi/font": "7.0.96",
14 |     "@tauri-apps/api": ">=2.0.0",
15 |     "@tauri-apps/plugin-shell": ">=2.0.0",
16 |     "@types/turndown": "^5.0.5",
17 |     "colorthief": "^2.6.0",
18 |     "core-js": "^3.29.0",
19 |     "marked": "^14.1.3",
20 |     "pinia": "^2.2.4",
21 |     "roboto-fontface": "*",
22 |     "swiper": "^11.1.14",
23 |     "turndown": "^7.2.0",
24 |     "vite-plugin-pwa": "^0.21.1",
25 |     "vue": "^3.3.4",
26 |     "vue-router": "4",
27 |     "vuetify": "^3.0.0"
28 |   },
29 |   "devDependencies": {
30 |     "@tauri-apps/cli": ">=2.0.0",
31 |     "@types/node": "^22.7.5",
32 |     "@vitejs/plugin-vue": "^5.0.5",
33 |     "sass": "^1.60.0",
34 |     "typescript": "^5.2.2",
35 |     "unplugin-fonts": "^1.0.3",
36 |     "vite": "^5.3.1",
37 |     "vite-plugin-vuetify": "^2.0.4",
38 |     "vue-tsc": "^2.0.22"
39 |   }
40 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
 2 |  <g>
 3 |   <title>Layer 1</title>
 4 |   <path transform="rotate(-179.6 83.5895 41.6326)" fill="#4285f4" d="m79.58948,66.13264l14,0l0,-34l-20,-15l0,43c0,3.32 2.69,6 6,6" id="svg_1"/>
 5 |   <path transform="rotate(179.6 15.7325 42.0218)" fill="#34a853" d="m5.7325,66.52176l14,0c3.32,0 6,-2.69 6,-6l0,-43l-20,15" id="svg_2"/>
 6 |   <path transform="rotate(179.982 15.7792 67.3053)" fill="#fbbc04" d="m5.77922,57.31381l0,26l20,-15l0,-8c0,-7.42 -8.47,-11.65 -14.4,-7.2" id="svg_3" stroke="null"/>
 7 |   <path transform="rotate(-179.6 49.7906 55.0292)" fill="#ea4335" d="m25.79056,59.02917l0,-26l24,18l24,-18l0,26l-24,18" id="svg_4"/>
 8 |   <path transform="rotate(179.6 83.5783 67.017)" fill="#c5221f" d="m73.57836,60.02554l0,8l20,15l0,-26l-5.6,-4.2c-5.94,-4.45 -14.4,-0.22 -14.4,7.2" id="svg_5"/>
 9 |  </g>
10 | 
11 | </svg>


--------------------------------------------------------------------------------
/src-tauri/.gitignore:
--------------------------------------------------------------------------------
1 | # Generated by Cargo
2 | # will have compiled files and executables
3 | /target/
4 | 
5 | # Generated by Tauri
6 | # will have schema files for capabilities auto-completion
7 | /gen/schemas
8 | 


--------------------------------------------------------------------------------
/src-tauri/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "webfollow"
 3 | version = "0.1.0"
 4 | description = "A Tauri App"
 5 | authors = ["you"]
 6 | edition = "2021"
 7 | 
 8 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 9 | 
10 | [lib]
11 | # The `_lib` suffix may seem redundant but it is necessary
12 | # to make the lib name unique and wouldn't conflict with the bin name.
13 | # This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
14 | name = "webfollow_lib"
15 | crate-type = ["staticlib", "cdylib", "rlib"]
16 | 
17 | [build-dependencies]
18 | tauri-build = { version = "2.0.0", features = [] }
19 | 
20 | [dependencies]
21 | tauri = { version = "2.0.0", features = [ "protocol-asset"] }
22 | tauri-plugin-shell = "2.0.0"
23 | serde = { version = "1", features = ["derive"] }
24 | serde_json = "1"
25 | tauri-plugin-http = "2"
26 | 
27 | 


--------------------------------------------------------------------------------
/src-tauri/build.rs:
--------------------------------------------------------------------------------
1 | fn main() {
2 |     tauri_build::build()
3 | }
4 | 


--------------------------------------------------------------------------------
/src-tauri/capabilities/default.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../gen/schemas/desktop-schema.json",
 3 |   "identifier": "default",
 4 |   "description": "Capability for the main window",
 5 |   "windows": ["main"],
 6 |   "permissions": [
 7 |     "core:default",
 8 |     "shell:allow-open",
 9 |     "http:allow-fetch"
10 |   ]
11 | }


--------------------------------------------------------------------------------
/src-tauri/icons/128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/128x128.png


--------------------------------------------------------------------------------
/src-tauri/icons/128x128@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/128x128@2x.png


--------------------------------------------------------------------------------
/src-tauri/icons/32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/32x32.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square107x107Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square107x107Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square142x142Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square142x142Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square150x150Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square150x150Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square284x284Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square284x284Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square30x30Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square30x30Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square310x310Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square310x310Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square44x44Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square44x44Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square71x71Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square71x71Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/Square89x89Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/Square89x89Logo.png


--------------------------------------------------------------------------------
/src-tauri/icons/StoreLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/StoreLogo.png


--------------------------------------------------------------------------------
/src-tauri/icons/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/icon.icns


--------------------------------------------------------------------------------
/src-tauri/icons/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/icon.ico


--------------------------------------------------------------------------------
/src-tauri/icons/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weekend-project-space/webfollow-app/0fed22af4ff19802ef497a8053d3e0e0adac642f/src-tauri/icons/icon.png


--------------------------------------------------------------------------------
/src-tauri/src/lib.rs:
--------------------------------------------------------------------------------
 1 | // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 2 | #[tauri::command]
 3 | fn greet(name: &str) -> String {
 4 |     format!("Hello, {}! You've been greeted from Rust!", name)
 5 | }
 6 | 
 7 | #[cfg_attr(mobile, tauri::mobile_entry_point)]
 8 | pub fn run() {
 9 |     tauri::Builder::default()
10 |         .plugin(tauri_plugin_shell::init())
11 |         .invoke_handler(tauri::generate_handler![greet])
12 |         .run(tauri::generate_context!())
13 |         .expect("error while running tauri application");
14 | }
15 | 


--------------------------------------------------------------------------------
/src-tauri/src/main.rs:
--------------------------------------------------------------------------------
1 | // Prevents additional console window on Windows in release, DO NOT REMOVE!!
2 | #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
3 | 
4 | fn main() {
5 |     webfollow_lib::run()
6 | }
7 | 


--------------------------------------------------------------------------------
/src-tauri/tauri.conf.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://schema.tauri.app/config/2.0.0",
 3 |   "productName": "webfollow",
 4 |   "version": "0.1.0",
 5 |   "identifier": "cc.webfollow.app",
 6 |   "build": {
 7 |     "beforeDevCommand": "pnpm dev",
 8 |     "devUrl": "http://localhost:1420",
 9 |     "beforeBuildCommand": "pnpm build",
10 |     "frontendDist": "../dist"
11 |   },
12 | 
13 |   "app": {
14 |     "windows": [{
15 |       "title": "webfollow",
16 |       "width": 800,
17 |       "height": 600
18 | 
19 |     }],
20 |     "security": {
21 |       "csp": {
22 |         "default-src": "'self' customprotocol: asset: https: http: data: 'unsafe-inline' 'unsafe-eval'",
23 |         "img-src": "'self' data: https: http: asset:",
24 |         "connect-src": "'self' ipc: http://ipc.localhost https: http:",
25 |         "font-src": "'self' https: http: data:",
26 |         "style-src": "'self' 'unsafe-inline' https: http:"
27 |       },
28 |       "freezePrototype": true,
29 |       "assetProtocol": {
30 |         "enable": true,
31 |         "scope": {
32 |           "allow": ["$APPDATA/db/**", "$RESOURCE/**"],
33 |           "deny": ["$APPDATA/db/*.stronghold"]
34 |         }
35 |       }
36 |     }
37 |   },
38 |   "bundle": {
39 |     "active": true,
40 |     "targets": "all",
41 |     "icon": [
42 |       "icons/32x32.png",
43 |       "icons/128x128.png",
44 |       "icons/128x128@2x.png",
45 |       "icons/icon.icns",
46 |       "icons/icon.ico"
47 |     ]
48 |   }
49 | }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <router-view />
  3 | </template>
  4 | <script setup></script>
  5 | <style>
  6 | :root {
  7 |   font-size: 14px;
  8 |   --swiper-navigation-size: 20px !important;
  9 |   --sidbar-bg: 248, 250, 253;
 10 |   --v-overlay-opacity: 0.7;
 11 |   --line-clamp: 2;
 12 |   --v-theme-primary: var(--theme-color) !important;
 13 |   --img-min-width: 150px;
 14 |   --reader-main-max-width: 650px;
 15 | }
 16 | .v-theme--dark {
 17 |   --sidbar-bg: 41, 41, 45;
 18 |   --v-overlay-opacity: 0.9;
 19 |   --v-theme-primary: var(--theme-color) !important;
 20 | }
 21 | .v-theme--light {
 22 |   --v-theme-primary: var(--theme-color) !important;
 23 | }
 24 | html {
 25 |   background-color: #fff;
 26 |   overflow-y: auto !important;
 27 |   font-family: var(--font-family) !important;
 28 | }
 29 | #app .v-list-item__spacer,
 30 | .menu .v-list-item__prepend .v-list-item__spacer {
 31 |   width: 1rem !important;
 32 | }
 33 | #app .v-list-group {
 34 |   --prepend-width: 1rem;
 35 | }
 36 | #app .v-list-item--density-default.v-list-item--one-line {
 37 |   min-height: calc(2rem + 4px);
 38 | }
 39 | .reader-warp a {
 40 |   text-decoration: none;
 41 |   word-wrap: break-word;
 42 |   color: rgb(var(--v-theme-primary));
 43 | }
 44 | .reader-warp a:hover {
 45 |   text-decoration: underline;
 46 | }
 47 | .menus {
 48 |   font-size: 0.8rem;
 49 | }
 50 | .page {
 51 |   /* text-align: center; */
 52 |   padding: 1rem 1rem;
 53 |   max-width: 960px;
 54 |   margin: 0 auto;
 55 |   overflow: auto;
 56 |   max-height: 100vh;
 57 | }
 58 | .page h3 {
 59 |   text-align: center;
 60 |   padding: 2rem;
 61 |   font-size: 18px;
 62 | }
 63 | .v-navigation-drawer .v-list {
 64 |   overflow: scroll !important;
 65 | }
 66 | .top-bar .v-btn,
 67 | .top-sider .v-btn {
 68 |   color: rgba(var(--v-theme-surface-variant), 0.8);
 69 | }
 70 | .text-ellipsis {
 71 |   display: -webkit-box;
 72 |   -webkit-box-orient: vertical;
 73 |   -webkit-line-clamp: var(--line-clamp);
 74 |   line-clamp: var(--line-clamp);
 75 |   overflow: hidden;
 76 |   text-overflow: ellipsis;
 77 |   word-break: break-all;
 78 | }
 79 | @media (max-width: 768px) {
 80 |   #app .v-container {
 81 |     padding: 0.5rem;
 82 |   }
 83 |   #app .v-container .v-row {
 84 |     margin: -0.5rem;
 85 |   }
 86 |   :root {
 87 |     --img-min-width: 100px;
 88 |     --sidbar-bg: var(--v-theme-background);
 89 |   }
 90 | }
 91 | /* 滚动条整体区域 */
 92 | ::-webkit-scrollbar {
 93 |   width: 6px;
 94 |   height: 6px;
 95 | }
 96 | 
 97 | /* 滚动条轨道 */
 98 | ::-webkit-scrollbar-track {
 99 |   background: transparent;
100 |   border-radius: 3px;
101 | }
102 | 
103 | /* 滚动条滑块 */
104 | ::-webkit-scrollbar-thumb {
105 |   background: rgba(var(--v-theme-on-code), 0.1); /* 滚动条滑块颜色 */
106 |   border-radius: 3px;
107 | }
108 | 
109 | /* 滚动条滑块悬停效果 */
110 | ::-webkit-scrollbar-thumb:hover {
111 |   background: rgba(var(--v-theme-on-code), 0.3); /* 悬停时滑块的颜色 */
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/api/index.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     request
 3 | } from "../utils/http";
 4 | 
 5 | export function login(token: string) {
 6 |     return request({
 7 |         'api': '1',
 8 |         api_key: token
 9 |     })
10 | }
11 | 
12 | export function groups() {
13 |     return request({
14 |         'groups': '0'
15 |     })
16 | }
17 | 
18 | export function feeds() {
19 |     return request({
20 |         'feeds': '0'
21 |     })
22 | }
23 | 
24 | /**
25 |  * 
26 |  * @param {group_ids:'', feed_ids:'', max_id:0,since_id:0,with_ids:1} params 
27 |  * @returns 
28 |  */
29 | export function items(params: object) {
30 |     return request(Object.assign({
31 |         'items': '0'
32 |     }, params))
33 | }
34 | 
35 | 
36 | export function favicons(params: object): Promise<any> {
37 |     return request(Object.assign({
38 |         'favicons': '0'
39 |     }, params))
40 | }
41 | 
42 | 
43 | export function listUnreadItemIds() {
44 |     return request({
45 |         'unread_item_ids': '0'
46 |     })
47 | }
48 | 
49 | export function listSavedItemIds() {
50 |     return request({
51 |         'saved_item_ids': '0'
52 |     })
53 | }
54 | 
55 | /**
56 |  * 
57 |  * @param {'mark': 'item' | 'feed' | 'group',as:unread|read|saved|unsaved,id,  before:''} params 
58 |  * @returns 
59 |  */
60 | export function mark(params: object) {
61 |     return request(Object.assign({
62 |         mark: 'item'
63 |     }, params))
64 | }
65 | 
66 | // 扩宽接口 {as: create update remove feed_url, group_id, feed_id}
67 | 
68 | export function extFeed(params: object, options = {}) {
69 |     return ext('feeds', params, options)
70 | }
71 | 
72 | 
73 | type extType = 'fail_feed_ids' | 'feeds'
74 | 
75 | /**
76 |  * 扩展接口
77 |  * @param params 
78 |  * @param options 
79 |  * @returns 
80 |  */
81 | export function ext(type: extType, params = {}, options = {}) {
82 |     return request(Object.assign({ [type]: '0' }, params), options)
83 | }


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/ConfirmDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-dialog
 3 |     v-model="dialogVisible"
 4 |     :theme="settingsStore.appearance.themeMode"
 5 |     max-width="400"
 6 |     @keydown="handleKeydown"
 7 |   >
 8 |     <v-card>
 9 |       <v-card-title class="text-h6">{{ title }}</v-card-title>
10 |       <v-card-text>
11 |         {{ message }}
12 |       </v-card-text>
13 |       <v-card-actions>
14 |         <v-spacer></v-spacer>
15 |         <v-btn color="grey-darken-1" variant="text" @click="cancel"
16 |           >n取消</v-btn
17 |         >
18 |         <v-btn color="primary" variant="text" @click="confirm">y确定</v-btn>
19 |       </v-card-actions>
20 |     </v-card>
21 |   </v-dialog>
22 | </template>
23 | 
24 | <script setup lang="ts">
25 | import { onMounted, onUnmounted, computed } from "vue";
26 | import { useSettingsStore } from "@/store";
27 | 
28 | const props = defineProps<{
29 |   title?: string;
30 |   message: string;
31 |   modelValue?: boolean;
32 | }>();
33 | 
34 | const emit = defineEmits(["confirm", "cancel", "update:modelValue"]);
35 | 
36 | const settingsStore = useSettingsStore();
37 | const dialogVisible = computed({
38 |   get: () => props.modelValue ?? false,
39 |   set: (value) => emit("update:modelValue", value),
40 | });
41 | 
42 | const confirm = () => {
43 |   dialogVisible.value = false;
44 |   emit("confirm");
45 | };
46 | 
47 | const cancel = () => {
48 |   dialogVisible.value = false;
49 |   emit("cancel");
50 | };
51 | 
52 | const handleKeydown = (e: KeyboardEvent) => {
53 |   if (!dialogVisible.value) return;
54 |   e.stopPropagation();
55 |   if (e.key.toLowerCase() === "y") {
56 |     confirm();
57 |   } else if (e.key.toLowerCase() === "n") {
58 |     cancel();
59 |   }
60 | };
61 | 
62 | // 全局键盘事件监听
63 | const handleGlobalKeydown = (e: KeyboardEvent) => {
64 |   handleKeydown(e);
65 | };
66 | 
67 | onMounted(() => {
68 |   window.addEventListener("keydown", handleGlobalKeydown);
69 | });
70 | 
71 | onUnmounted(() => {
72 |   window.removeEventListener("keydown", handleGlobalKeydown);
73 | });
74 | </script>
75 | 


--------------------------------------------------------------------------------
/src/components/Greet.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from "vue";
 3 | import { invoke } from "@tauri-apps/api/core";
 4 | 
 5 | const greetMsg = ref("");
 6 | const name = ref("");
 7 | 
 8 | async function greet() {
 9 |   // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
10 |   greetMsg.value = await invoke("greet", { name: name.value });
11 | }
12 | </script>
13 | 
14 | <template>
15 |   <form class="row" @submit.prevent="greet">
16 |     <input id="greet-input" v-model="name" placeholder="Enter a name..." />
17 |     <button type="submit">Greet</button>
18 |   </form>
19 | 
20 |   <p>{{ greetMsg }}</p>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/src/components/HelpDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-dialog v-model="modelValue" max-width="600">
 3 |     <v-card>
 4 |       <v-card-title class="text-h5">
 5 |         快捷键帮助
 6 |         <v-spacer></v-spacer>
 7 |         <v-btn icon @click="$emit('update:modelValue', false)">
 8 |           <v-icon>mdi-close</v-icon>
 9 |         </v-btn>
10 |       </v-card-title>
11 |       <v-card-text>
12 |         <v-list>
13 |           <v-list-subheader>阅读模式</v-list-subheader>
14 |           <v-list-item>
15 |             <v-list-item-title>← 方向键左</v-list-item-title>
16 |             <v-list-item-subtitle>上一篇文章</v-list-item-subtitle>
17 |           </v-list-item>
18 |           <v-list-item>
19 |             <v-list-item-title>→ 方向键右</v-list-item-title>
20 |             <v-list-item-subtitle>下一篇文章</v-list-item-subtitle>
21 |           </v-list-item>
22 |           <v-list-item>
23 |             <v-list-item-title>↑ 方向键上</v-list-item-title>
24 |             <v-list-item-subtitle>向上滚动</v-list-item-subtitle>
25 |           </v-list-item>
26 |           <v-list-item>
27 |             <v-list-item-title>↓ 方向键下</v-list-item-title>
28 |             <v-list-item-subtitle>向下滚动</v-list-item-subtitle>
29 |           </v-list-item>
30 |           <v-list-item>
31 |             <v-list-item-title>Esc</v-list-item-title>
32 |             <v-list-item-subtitle>退出阅读模式</v-list-item-subtitle>
33 |           </v-list-item>
34 | 
35 |           <v-divider></v-divider>
36 | 
37 |           <v-list-subheader>列表模式</v-list-subheader>
38 |           <v-list-item>
39 |             <v-list-item-title>Ctrl + Alt + K</v-list-item-title>
40 |             <v-list-item-subtitle>打开搜索</v-list-item-subtitle>
41 |           </v-list-item>
42 |           <v-list-item>
43 |             <v-list-item-title>Ctrl + Alt + R</v-list-item-title>
44 |             <v-list-item-subtitle>刷新订阅</v-list-item-subtitle>
45 |           </v-list-item>
46 |           <v-list-item>
47 |             <v-list-item-title>Ctrl + Alt + ?</v-list-item-title>
48 |             <v-list-item-subtitle>打开帮助</v-list-item-subtitle>
49 |           </v-list-item>
50 |           <v-list-item>
51 |             <v-list-item-title>↑↓ 方向键</v-list-item-title>
52 |             <v-list-item-subtitle>选择上/下一篇文章</v-list-item-subtitle>
53 |           </v-list-item>
54 |         </v-list>
55 |       </v-card-text>
56 |     </v-card>
57 |   </v-dialog>
58 | </template>
59 | 
60 | <script setup lang="ts">
61 | defineProps<{
62 |   modelValue: boolean;
63 | }>();
64 | 
65 | defineEmits<{
66 |   (e: "update:modelValue", value: boolean): void;
67 | }>();
68 | </script>
69 | 


--------------------------------------------------------------------------------
/src/components/ImagePreviewDialog.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { ref, watch } from "vue";
  3 | import { useSettingsStore } from "@/store";
  4 | 
  5 | const props = defineProps<{
  6 |   modelValue: boolean;
  7 |   imgSrc: string;
  8 |   images: string[];
  9 | }>();
 10 | 
 11 | const emit = defineEmits<{
 12 |   "update:modelValue": [value: boolean];
 13 |   navigate: [direction: "prev" | "next" | "goto" | number];
 14 | }>();
 15 | 
 16 | const settingsStore = useSettingsStore();
 17 | 
 18 | const showThumbnails = ref(false);
 19 | 
 20 | watch(
 21 |   () => props.modelValue,
 22 |   (value) => {
 23 |     if (!value) {
 24 |       showThumbnails.value = false;
 25 |     }
 26 |   },
 27 |   { immediate: true }
 28 | );
 29 | </script>
 30 | 
 31 | <template>
 32 |   <v-dialog
 33 |     :model-value="modelValue"
 34 |     fullscreen
 35 |     @update:model-value="emit('update:modelValue', $event)"
 36 |     :theme="settingsStore.appearance.themeMode"
 37 |   >
 38 |     <div class="preview-container" @click="showThumbnails = false">
 39 |       <v-img
 40 |         :src="imgSrc"
 41 |         max-height="calc(100vh - 3rem)"
 42 |         max-width="calc(100vw - 4rem)"
 43 |       />
 44 | 
 45 |       <!-- 导航按钮 -->
 46 |       <v-btn
 47 |         icon="mdi-chevron-left"
 48 |         class="nav-btn left"
 49 |         @click="emit('navigate', 'prev')"
 50 |       />
 51 |       <v-btn
 52 |         icon="mdi-chevron-right"
 53 |         class="nav-btn right"
 54 |         @click="emit('navigate', 'next')"
 55 |       />
 56 |       <v-btn
 57 |         icon=" mdi-image-filter-center-focus-strong-outline"
 58 |         class="nav-btn bottom"
 59 |         @click="emit('navigate', 'goto')"
 60 |         title="在文章中查看"
 61 |       >
 62 |       </v-btn>
 63 | 
 64 |       <!-- 顶部按钮组 -->
 65 |       <div class="top-buttons">
 66 |         <v-btn
 67 |           icon="mdi-image-multiple-outline"
 68 |           @click.stop="showThumbnails = !showThumbnails"
 69 |         />
 70 |         <v-btn icon="mdi-close" @click="emit('update:modelValue', false)" />
 71 |       </div>
 72 | 
 73 |       <!-- 缩略图面板 -->
 74 |       <div v-if="showThumbnails" class="thumbnails-panel" @click.stop="">
 75 |         <div class="thumbnails-container">
 76 |           <v-img
 77 |             v-for="(img, index) in images"
 78 |             :key="index"
 79 |             :src="img"
 80 |             class="rounded-lg thumbnail"
 81 |             :class="{ active: img === imgSrc }"
 82 |             @click="emit('navigate', index)"
 83 |             cover
 84 |           />
 85 |         </div>
 86 |       </div>
 87 |     </div>
 88 |   </v-dialog>
 89 | </template>
 90 | 
 91 | <style scoped>
 92 | .preview-container {
 93 |   height: 100vh;
 94 |   display: flex;
 95 |   align-items: center;
 96 |   justify-content: center;
 97 |   position: relative;
 98 |   backdrop-filter: blur(10px);
 99 |   background: rgba(var(--v-theme-background), 0.9);
100 | }
101 | 
102 | .nav-btn {
103 |   position: absolute;
104 | }
105 | 
106 | .nav-btn.left {
107 |   left: 1rem;
108 | }
109 | 
110 | .nav-btn.right {
111 |   right: 1rem;
112 | }
113 | 
114 | .nav-btn.bottom {
115 |   bottom: 1rem;
116 | }
117 | 
118 | .top-buttons {
119 |   position: absolute;
120 |   top: 0;
121 |   left: 0;
122 |   width: 100%;
123 |   display: flex;
124 |   justify-content: space-between;
125 |   gap: 0.5rem;
126 |   padding: 1rem;
127 | }
128 | 
129 | .thumbnails-panel {
130 |   position: absolute;
131 |   bottom: 0;
132 |   left: 0;
133 |   right: 0;
134 |   padding: 1.5rem;
135 |   max-height: calc(100vh - 6rem);
136 |   overflow-y: auto;
137 |   border-top-right-radius: 0.5rem;
138 |   border-top-left-radius: 0.5rem;
139 |   background: rgba(var(--v-theme-background), 0.6);
140 |   backdrop-filter: blur(10px);
141 | }
142 | 
143 | .thumbnails-container {
144 |   padding-bottom: 0.5rem;
145 |   column-count: 5;
146 |   column-gap: 1rem;
147 | }
148 | 
149 | .thumbnail {
150 |   cursor: pointer;
151 |   border: 2px solid transparent;
152 |   border-radius: 4px;
153 |   transition: all 0.2s ease;
154 |   background-color: #f0f0f0;
155 |   border: 2px solid #ccc;
156 |   border-radius: 4px;
157 |   padding: 1rem;
158 |   margin-bottom: 1rem; /* 项目间距 */
159 |   break-inside: avoid; /* 防止项目在列中断开 */
160 | }
161 | 
162 | .thumbnail:hover {
163 |   transform: scale(1.05);
164 |   border-color: rgb(var(--v-theme-primary));
165 | }
166 | 
167 | .thumbnail.active {
168 |   border-color: rgb(var(--v-theme-primary));
169 | }
170 | </style>
171 | 


--------------------------------------------------------------------------------
/src/components/MPlayer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="play">
  3 |     <v-img
  4 |       :src="modelValue?.thumbil"
  5 |       cover
  6 |       max-height="160px"
  7 |       max-width="160px"
  8 |       class="d-flex align-center mx-auto"
  9 |       :class="{ 'spinner-2': isPlaying }"
 10 |       style="border-radius: 50%"
 11 |     >
 12 |     </v-img>
 13 | 
 14 |     <v-card-text>
 15 |       <p class="text-body-1" v-text="modelValue?.title"></p>
 16 |       <p
 17 |         class="text-center text-subtitle-2 my-2"
 18 |         v-text="modelValue?.subtitle"
 19 |       ></p>
 20 |       <audio
 21 |         ref="audio"
 22 |         @timeupdate="updateProgress"
 23 |         @loadedmetadata="setDuration"
 24 |         @ended="onEnded"
 25 |         :src="modelValue?.url || ''"
 26 |         controls
 27 |         hidden
 28 |       ></audio>
 29 | 
 30 |       <v-slider
 31 |         v-model="currentTime"
 32 |         :max="duration"
 33 |         @update:modelValue="seek"
 34 |         hide-details
 35 |       ></v-slider>
 36 |       <div class="d-flex align-center justify-space-between">
 37 |         <span>{{ formatTime(currentTime) }}</span>
 38 |         <span>{{ formatTime(duration) }}</span>
 39 |       </div>
 40 |       <div class="d-flex justify-center mt-3">
 41 |         <v-btn
 42 |           @click="togglePlay"
 43 |           :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"
 44 |           color="primary"
 45 |         >
 46 |         </v-btn>
 47 |       </div>
 48 |     </v-card-text>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script setup lang="ts">
 53 | import { ref, defineProps, watch, onMounted } from "vue";
 54 | import { Audio } from "@/store/playlist";
 55 | 
 56 | const props = defineProps<{
 57 |   modelValue: Audio | null;
 58 | }>();
 59 | 
 60 | const emit = defineEmits(["update:modelValue", "onplay"]);
 61 | 
 62 | const isPlaying = ref(false);
 63 | const currentTime = ref(0);
 64 | const duration = ref(0);
 65 | const audio = ref<HTMLAudioElement | null>(null);
 66 | 
 67 | watch(
 68 |   () => props.modelValue?.url,
 69 |   () => {
 70 |     isPlaying.value = false;
 71 |     currentTime.value = props.modelValue?.currentTime || 0;
 72 |     updateMediaSessionMetadata(); // 更新媒体元数据
 73 |   }
 74 | );
 75 | 
 76 | watch(
 77 |   () => props.modelValue?.currentTime,
 78 |   (v) => {
 79 |     if ((v || 0) - currentTime.value > 3 || (v || 0) - currentTime.value < -3) {
 80 |       currentTime.value = v || 0;
 81 |       seek();
 82 |     }
 83 |   }
 84 | );
 85 | 
 86 | onMounted(() => {
 87 |   if (audio.value) {
 88 |     audio.value.currentTime = props.modelValue?.currentTime || 0;
 89 |     currentTime.value = audio.value.currentTime;
 90 |     setupMediaSession(); // 初始化 Media Session
 91 |   }
 92 | });
 93 | 
 94 | // 初始化 Media Session
 95 | const setupMediaSession = () => {
 96 |   if ("mediaSession" in navigator && audio.value) {
 97 |     // 设置媒体控制操作
 98 |     navigator.mediaSession.setActionHandler("play", () => {
 99 |       togglePlay();
100 |     });
101 | 
102 |     navigator.mediaSession.setActionHandler("pause", () => {
103 |       togglePlay();
104 |     });
105 | 
106 |     navigator.mediaSession.setActionHandler("stop", () => {
107 |       if (audio.value) {
108 |         audio.value.pause();
109 |         audio.value.currentTime = 0;
110 |         isPlaying.value = false;
111 |         emit("onplay", false);
112 |       }
113 |     });
114 | 
115 |     navigator.mediaSession.setActionHandler("seekto", (details) => {
116 |       if (audio.value && details.seekTime !== undefined) {
117 |         currentTime.value = details.seekTime;
118 |         seek();
119 |       }
120 |     });
121 | 
122 |     // 更新播放状态
123 |     audio.value.addEventListener("play", () => {
124 |       navigator.mediaSession.playbackState = "playing";
125 |     });
126 | 
127 |     audio.value.addEventListener("pause", () => {
128 |       navigator.mediaSession.playbackState = "paused";
129 |     });
130 | 
131 |     updateMediaSessionMetadata(); // 初始加载时设置元数据
132 |   }
133 | };
134 | 
135 | // 更新 Media Session 元数据
136 | const updateMediaSessionMetadata = () => {
137 |   if ("mediaSession" in navigator && props.modelValue) {
138 |     navigator.mediaSession.metadata = new MediaMetadata({
139 |       title: props.modelValue.title || "未知标题",
140 |       artist: props.modelValue.subtitle || "未知艺术家",
141 |       artwork: [
142 |         {
143 |           src: props.modelValue.thumbil || "",
144 |           sizes: "160x160",
145 |           type: "image/jpeg",
146 |         },
147 |       ],
148 |     });
149 |   }
150 | };
151 | 
152 | const togglePlay = () => {
153 |   if (audio.value) {
154 |     if (isPlaying.value) {
155 |       audio.value.pause();
156 |     } else {
157 |       audio.value.play();
158 |     }
159 |     isPlaying.value = !isPlaying.value;
160 |     emit("onplay", isPlaying.value);
161 |   }
162 | };
163 | 
164 | const updateProgress = () => {
165 |   if (audio.value) {
166 |     currentTime.value = audio.value.currentTime;
167 |     const item = { ...props.modelValue, currentTime: currentTime.value };
168 |     emit("update:modelValue", item);
169 |   }
170 | };
171 | 
172 | const setDuration = () => {
173 |   if (audio.value) {
174 |     duration.value = audio.value.duration;
175 |   }
176 | };
177 | 
178 | const seek = () => {
179 |   if (audio.value) {
180 |     audio.value.currentTime = currentTime.value;
181 |     const item = { ...props.modelValue, currentTime: currentTime.value };
182 |     emit("update:modelValue", item);
183 |   }
184 | };
185 | 
186 | const onEnded = () => {
187 |   isPlaying.value = false;
188 |   emit("onplay", false);
189 | };
190 | 
191 | const formatTime = (value: number) => {
192 |   const minutes = Math.floor(value / 60);
193 |   const seconds = Math.floor(value % 60);
194 |   return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
195 | };
196 | 
197 | defineExpose({ togglePlay });
198 | </script>
199 | 
200 | <style lang="css" scoped>
201 | .play {
202 |   width: 100%;
203 | }
204 | </style>
205 | 


--------------------------------------------------------------------------------
/src/layout/IndexLayout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-responsive @contextmenu.prevent>
  3 |     <v-app :theme="themeMode">
  4 |       <side-nav />
  5 |       <!-- 主体 -->
  6 |       <v-main
  7 |         :class="{
  8 |           hideside: settingsStore.appearance.hideSidebar || mobile,
  9 |           'h-screen': route.matched[1].components.default.__name == 'Items',
 10 |           'm-main': mobile,
 11 |         }"
 12 |       >
 13 |         <div class="v-main-top"></div>
 14 |         <!-- 主体 -->
 15 |         <router-view></router-view>
 16 |       </v-main>
 17 |     </v-app>
 18 |   </v-responsive>
 19 | </template>
 20 | <script setup async>
 21 | import { useDisplay } from "vuetify";
 22 | import { useRoute, useRouter } from "vue-router";
 23 | import { onBeforeMount, onMounted, ref, watch } from "vue";
 24 | import { storeToRefs } from "pinia";
 25 | import { useElResize } from "@/utils/useElResize";
 26 | import { useSettingsStore, useFeedsStore } from "@/store";
 27 | import SideNav from "./SideNav.vue";
 28 | 
 29 | const settingsStore = useSettingsStore();
 30 | const feedStore = useFeedsStore();
 31 | const { appearance } = storeToRefs(settingsStore);
 32 | const router = useRouter();
 33 | const route = useRoute();
 34 | const hideSide = ref(false);
 35 | const { mobile } = useDisplay();
 36 | 
 37 | const themeMode = ref(appearance.value.themeMode);
 38 | 
 39 | // 监听系统主题变化
 40 | watch(
 41 |   () => window.matchMedia("(prefers-color-scheme: dark)").matches,
 42 |   (isDark) => {
 43 |     if (appearance.value.themeMode == "system") {
 44 |       themeMode.value = isDark ? "dark" : "light";
 45 |     }
 46 |   },
 47 |   { immediate: true }
 48 | );
 49 | 
 50 | watch(
 51 |   () => appearance.value.themeMode,
 52 |   () => {
 53 |     themeMode.value = appearance.value.themeMode;
 54 |     if (appearance.value.themeMode == "system") {
 55 |       const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 56 |       themeMode.value = isDark ? "dark" : "light";
 57 |     }
 58 |   }
 59 | );
 60 | const { width: drawerWidth } = useElResize(() =>
 61 |   document.querySelector(".resizable-drawer .v-navigation-drawer__content")
 62 | );
 63 | watch(drawerWidth, (v) => {
 64 |   // 防止抖动
 65 |   if (
 66 |     v - settingsStore.appearance.sidebarWidth > 2 ||
 67 |     settingsStore.appearance.sidebarWidth - v > 2
 68 |   ) {
 69 |     settingsStore.appearance.sidebarWidth = drawerWidth.value;
 70 |     settingsStore.saveToLocalStorage();
 71 |   }
 72 | });
 73 | 
 74 | onMounted(() => {
 75 |   // 默认启动页
 76 |   let startPage = settingsStore.general.startPage;
 77 |   if (route.fullPath == "/") {
 78 |     if (startPage == "all") {
 79 |       router.push("/all");
 80 |     } else if (startPage == "explore") {
 81 |       router.push("/explore");
 82 |     } else if (startPage == "welcome") {
 83 |       router.push("/");
 84 |     } else if (startPage == "next") {
 85 |       router.push("/next");
 86 |     } else if (startPage == "firstfolder") {
 87 |       if (feedStore.subscriptions.length) {
 88 |         const gid = feedStore.subscriptions[0].id;
 89 |         router.push("/c/" + gid);
 90 |       } else {
 91 |         setTimeout(() => {
 92 |           if (feedStore.subscriptions.length) {
 93 |             const gid = feedStore.subscriptions[0].id;
 94 |             router.push("/c/" + gid);
 95 |           }
 96 |         }, 1500);
 97 |       }
 98 |     }
 99 |   }
100 | });
101 | </script>
102 | <style lang="scss">
103 | .hideside {
104 |   .top-bar .v-app-bar-title {
105 |     margin-left: 3rem;
106 |   }
107 | }
108 | </style>
109 | 


--------------------------------------------------------------------------------
/src/layout/settings/Settings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-card max-height="70vh" class="rounded-lg">
  3 |     <v-container fluid>
  4 |       <v-row>
  5 |         <!-- 左侧导航菜单 -->
  6 |         <v-col lg="3" cols="12" class="pr-0">
  7 |           <v-list rounded>
  8 |             <v-list-item
  9 |               subtitle="hello webfollow"
 10 |               :title="appStore.authInfo.username"
 11 |               class="mb-6"
 12 |             >
 13 |               <template #prepend>
 14 |                 <v-avatar
 15 |                   size="36px"
 16 |                   color="secondary"
 17 |                   :title="appStore.authInfo.username"
 18 |                 >
 19 |                   {{ appStore.authInfo.username.substring(0, 2) }}
 20 |                 </v-avatar>
 21 |               </template>
 22 |               <template #append>
 23 |                 <v-btn
 24 |                   to="/login"
 25 |                   title="退出登录"
 26 |                   icon="mdi-exit-to-app"
 27 |                   size="small"
 28 |                   variant="text"
 29 |                   @click="close"
 30 |                 ></v-btn>
 31 |               </template>
 32 |             </v-list-item>
 33 |             <v-list-item
 34 |               v-for="item in menuItems"
 35 |               :key="item.key"
 36 |               :active="currentSection === item.key"
 37 |               @click="currentSection = item.key"
 38 |               color="primary"
 39 |             >
 40 |               <template v-slot:prepend>
 41 |                 <v-icon>{{ item.icon }}</v-icon>
 42 |               </template>
 43 |               <v-list-item-title>{{ item.label }}</v-list-item-title>
 44 |             </v-list-item>
 45 |           </v-list>
 46 |         </v-col>
 47 | 
 48 |         <!-- 右侧内容区域 -->
 49 |         <v-col lg="9" cols="12">
 50 |           <v-card flat>
 51 |             <v-card-title class="d-flex justify-space-between align-center"
 52 |               >{{ getCurrentTitle }}
 53 |               <v-btn @click="close" icon flat>
 54 |                 <v-icon>mdi-close</v-icon>
 55 |               </v-btn>
 56 |             </v-card-title>
 57 |             <div :class="{ scroll: !mobile }">
 58 |               <component :is="currentComponent" />
 59 |             </div>
 60 |           </v-card>
 61 |         </v-col>
 62 |       </v-row>
 63 |     </v-container>
 64 |   </v-card>
 65 | </template>
 66 | 
 67 | <script lang="ts" setup>
 68 | import { useSettingsStore, useAppStore } from "@/store";
 69 | import { ref, computed, onMounted, watch } from "vue";
 70 | import { useDisplay } from "vuetify";
 71 | import SettingsGeneral from "./sub/SettingsGeneral.vue";
 72 | import SettingsAppearance from "./sub/SettingsAppearance.vue";
 73 | import SettingsIntegrated from "./sub/SettingsIntegrated.vue";
 74 | import SettingsAbout from "./sub/SettingsAbout.vue";
 75 | const props = defineProps(["activeMenu"]);
 76 | const settingsStore = useSettingsStore();
 77 | const comps: any = {
 78 |   general: SettingsGeneral,
 79 |   appearance: SettingsAppearance,
 80 |   about: SettingsAbout,
 81 |   integrated: SettingsIntegrated,
 82 | };
 83 | const { mobile } = useDisplay();
 84 | const appStore = useAppStore();
 85 | 
 86 | const currentSection = ref("general");
 87 | const menuItems = [
 88 |   { key: "general", label: "通用设置", icon: "mdi-cog" },
 89 |   // { key: "account", label: "账号设置", icon: "mdi-account" },
 90 |   // { key: "notification", label: "通知设置", icon: "mdi-bell" },
 91 |   // { key: "privacy", label: "隐私设置", icon: "mdi-shield-lock" },
 92 |   { key: "appearance", label: "外观设置", icon: "mdi-palette" },
 93 |   { key: "integrated", label: "集成设置", icon: "mdi-api" },
 94 |   { key: "about", label: "关于", icon: "mdi-information" },
 95 |   // { key: "security", label: "安全设置", icon: "mdi-security" },
 96 | ];
 97 | 
 98 | const currentComponent = computed(() => comps[currentSection.value]);
 99 | 
100 | const getCurrentTitle = computed(() => {
101 |   const currentItem = menuItems.find(
102 |     (item) => item.key === currentSection.value
103 |   );
104 |   return currentItem ? currentItem.label : "";
105 | });
106 | 
107 | const emit = defineEmits(["onclose"]);
108 | const close = () => {
109 |   emit("onclose");
110 |   settingsStore.saveToLocalStorage();
111 | };
112 | 
113 | onMounted(() => {
114 |   currentSection.value = props.activeMenu || "general";
115 | });
116 | 
117 | watch(props.activeMenu, (newVal) => {
118 |   currentSection.value = newVal;
119 | });
120 | </script>
121 | 
122 | <style scoped>
123 | .v-list-item--active {
124 |   border-radius: 0 50px 50px 0;
125 | }
126 | :deep(.scroll) {
127 |   height: 60vh;
128 |   overflow: scroll;
129 |   .v-card--variant-elevated {
130 |     box-shadow: none;
131 |   }
132 |   .v-card-title {
133 |     font-size: 1rem;
134 |   }
135 | }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/src/layout/settings/sub/SettingsAbout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-card flat class="pa-1">
 4 |       <v-list-item subtitle="0.8.1" title="WebFollow" class="mb-6">
 5 |         <template #prepend>
 6 |           <v-img src="/logo.svg" width="64px" class="mr-3"></v-img>
 7 |         </template>
 8 |       </v-list-item>
 9 |       WebFollow是一个基于RSS fever api 协议的开源阅读器，未来将支持google reader
10 |       等开放rss api协议, 开源协议为 GPL协议
11 | 
12 |       <br />
13 |       <br />
14 |       在这里找到我们：
15 |       <br />
16 |       <br />
17 |       <a href="https://github.com/weekend-project-space/webfollow-app">
18 |         <img
19 |           src="https://img.shields.io/github/stars/weekend-project-space/webfollow-app.svg?style=social&amp;label=Stars"
20 |           alt=""
21 |       /></a>
22 |       <br />
23 |       <br />
24 |       遇到问题：
25 |       <br />
26 |       <br />
27 |       <v-btn
28 |         size="small"
29 |         prepend-icon="mdi-help-circle-outline"
30 |         href="https://github.com/weekend-project-space/webfollow-app/issues"
31 |         >反馈</v-btn
32 |       >
33 |     </v-card>
34 |   </v-container>
35 | </template>
36 | 
37 | <script lang="ts" setup>
38 | // 这里可以添加任何需要的逻辑
39 | </script>
40 | 
41 | <style scoped>
42 | /* 这里可以添加样式 */
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/layout/settings/sub/SettingsGeneral.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <!-- 开始页设置 -->
  4 |     <v-card class="mb-4">
  5 |       <v-card-title>开始页</v-card-title>
  6 |       <v-card-text>
  7 |         <v-radio-group v-model="data.startPage">
  8 |           <v-radio label="欢迎页" value="welcome"></v-radio>
  9 |           <v-radio label="发现页面" value="explore"></v-radio>
 10 |           <v-radio label="全部文章" value="all"></v-radio>
 11 |           <v-radio label="稍后阅读" value="next"></v-radio>
 12 |           <v-radio label="第一个文件夹" value="firstfolder"></v-radio>
 13 |         </v-radio-group>
 14 |       </v-card-text>
 15 |     </v-card>
 16 | 
 17 |     <!-- 默认视图设置 -->
 18 |     <v-card class="mb-4">
 19 |       <v-card-title>默认视图</v-card-title>
 20 |       <v-card-text>
 21 |         <v-radio-group v-model="data.defaultView">
 22 |           <v-radio label="跟随文章" value="auto">
 23 |             <template v-slot:label>
 24 |               <div class="d-flex align-center">
 25 |                 跟随文章
 26 |                 <v-icon class="ml-2">mdi-view-dashboard-outline</v-icon>
 27 |               </div>
 28 |             </template>
 29 |           </v-radio>
 30 |           <v-radio label="列表视图" value="list">
 31 |             <template v-slot:label>
 32 |               <div class="d-flex align-center">
 33 |                 列表视图
 34 |                 <v-icon class="ml-2">mdi-list-box-outline</v-icon>
 35 |               </div>
 36 |             </template>
 37 |           </v-radio>
 38 |           <v-radio label="卡片视图" value="card">
 39 |             <template v-slot:label>
 40 |               <div class="d-flex align-center">
 41 |                 卡片视图
 42 |                 <v-icon class="ml-2">mdi-view-grid-outline</v-icon>
 43 |               </div>
 44 |             </template>
 45 |           </v-radio>
 46 |           <v-radio label="三栏视图" value="column">
 47 |             <template v-slot:label>
 48 |               <div class="d-flex align-center">
 49 |                 三栏视图
 50 |                 <v-icon class="ml-2">mdi-view-column-outline </v-icon>
 51 |               </div>
 52 |             </template>
 53 |           </v-radio>
 54 |           <v-radio label="杂志视图" value="magazine">
 55 |             <template v-slot:label>
 56 |               <div class="d-flex align-center">
 57 |                 杂志视图
 58 |                 <v-icon class="ml-2">mdi-view-sequential-outline</v-icon>
 59 |               </div>
 60 |             </template>
 61 |           </v-radio>
 62 |           <v-radio label="清单视图" value="text">
 63 |             <template v-slot:label>
 64 |               <div class="d-flex align-center">
 65 |                 清单视图
 66 |                 <v-icon class="ml-2">mdi-text-box-outline</v-icon>
 67 |               </div>
 68 |             </template>
 69 |           </v-radio>
 70 |         </v-radio-group>
 71 |       </v-card-text>
 72 |     </v-card>
 73 | 
 74 |     <!-- 隐藏已读文章设置 -->
 75 |     <v-card class="mb-4">
 76 |       <v-card-title>隐藏已读文章</v-card-title>
 77 |       <v-card-text>
 78 |         <v-switch
 79 |           v-model="data.hideReadArticles"
 80 |           color="primary"
 81 |           label="自动隐藏已读文章"
 82 |         ></v-switch>
 83 |       </v-card-text>
 84 |     </v-card>
 85 | 
 86 |     <!-- 自动刷新设置 -->
 87 |     <v-card class="mb-4">
 88 |       <v-card-title>自动刷新</v-card-title>
 89 |       <v-card-text>
 90 |         <v-switch
 91 |           v-model="data.autoRefresh"
 92 |           color="primary"
 93 |           label="启用自动刷新"
 94 |         ></v-switch>
 95 |         <v-select
 96 |           v-if="data.autoRefresh"
 97 |           v-model="data.refreshInterval"
 98 |           :items="refreshIntervals"
 99 |           label="刷新间隔"
100 |           variant="outlined"
101 |           density="comfortable"
102 |           class="mt-2"
103 |         ></v-select>
104 |       </v-card-text>
105 |     </v-card>
106 | 
107 |     <!-- 保存按钮 -->
108 |     <v-row class="mt-4">
109 |       <v-col>
110 |         <v-btn color="primary" @click="saveSettings">
111 |           保存设置
112 |           <v-icon right class="ml-2">mdi-content-save</v-icon>
113 |         </v-btn>
114 |         <v-btn
115 |           color="error"
116 |           variant="outlined"
117 |           class="ml-2"
118 |           @click="resetSettings"
119 |         >
120 |           重置默认
121 |           <v-icon right class="ml-2">mdi-refresh</v-icon>
122 |         </v-btn>
123 |       </v-col>
124 |     </v-row>
125 |   </v-container>
126 | </template>
127 | 
128 | <script lang="ts" setup>
129 | import { useSettingsStore } from "@/store";
130 | import { storeToRefs } from "pinia";
131 | const settingsStore = useSettingsStore();
132 | const { general: data } = storeToRefs(settingsStore);
133 | 
134 | // 定义选项数组
135 | const refreshIntervals = [
136 |   { title: "5分钟", value: 5 * 60 },
137 |   { title: "15分钟", value: 15 * 60 },
138 |   { title: "30分钟", value: 30 * 60 },
139 |   { title: "1小时", value: 60 * 60 },
140 |   { title: "2小时", value: 2 * 60 * 60 },
141 | ];
142 | 
143 | // 方法定义
144 | const saveSettings = () => {
145 |   settingsStore.saveToLocalStorage();
146 | };
147 | 
148 | const resetSettings = () => {
149 |   settingsStore.resetGeneralSettings();
150 | };
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/layout/settings/sub/SettingsIntegrated.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <!-- API设置 -->
  4 |     <v-card>
  5 |       <v-card-title class="mb-2">OpenAI 接口设置</v-card-title>
  6 |       <v-card-text>
  7 |         <v-text-field
  8 |           v-model="data.apiUrl"
  9 |           label="API 地址"
 10 |           variant="outlined"
 11 |           placeholder="https://api.openai.com/v1"
 12 |           class="mb-4"
 13 |         ></v-text-field>
 14 | 
 15 |         <v-text-field
 16 |           v-model="data.apiKey"
 17 |           label="API Key"
 18 |           variant="outlined"
 19 |           placeholder="sk-..."
 20 |           :type="showKey ? 'text' : 'password'"
 21 |           :append-inner-icon="showKey ? 'mdi-eye-off' : 'mdi-eye'"
 22 |           @click:append-inner="showKey = !showKey"
 23 |           @focus="handleFocus"
 24 |           :hint="showHint ? '检测到剪贴板中有 API Key，按 Ctrl+V 粘贴' : ''"
 25 |           persistent-hint
 26 |         ></v-text-field>
 27 | 
 28 |         <!-- 添加测试按钮 -->
 29 |         <div class="d-flex mt-2 mb-6">
 30 |           <v-btn
 31 |             color="info"
 32 |             size="small"
 33 |             :loading="testing"
 34 |             @click="testConnection"
 35 |           >
 36 |             <v-icon v-if="data.isApiValid" left color="success" class="mr-2">
 37 |               mdi-check-circle
 38 |             </v-icon>
 39 |             测试连接
 40 |             <v-icon right class="ml-2">mdi-connection</v-icon>
 41 |           </v-btn>
 42 |           <v-chip
 43 |             v-if="data.lastTestTime"
 44 |             size="small"
 45 |             class="ml-6"
 46 |             :color="data.isApiValid ? 'success' : 'error'"
 47 |           >
 48 |             上次检测: {{ formatDate(data.lastTestTime) }}
 49 |           </v-chip>
 50 |         </div>
 51 |         <v-textarea
 52 |           v-model="data.summaryPrompt"
 53 |           label="文章总结提示词"
 54 |           variant="outlined"
 55 |           rows="4"
 56 |           placeholder="请用简洁的语言总结这篇文章的主要内容..."
 57 |         ></v-textarea>
 58 | 
 59 |         <!-- 模型选择部分 -->
 60 |         <div v-if="data.isApiValid">
 61 |           <v-divider class="my-4"></v-divider>
 62 |           <div class="d-flex align-center justify-space-between mb-4">
 63 |             <v-select
 64 |               v-model="data.selectedModel"
 65 |               :items="availableModels"
 66 |               label="选择模型"
 67 |               variant="outlined"
 68 |               :loading="loadingModels"
 69 |               :disabled="loadingModels"
 70 |               class="flex-grow-1"
 71 |               hide-details
 72 |             >
 73 |               <template v-slot:prepend>
 74 |                 <v-icon>mdi-robot-outline</v-icon>
 75 |               </template>
 76 |             </v-select>
 77 |             <v-btn
 78 |               color="primary"
 79 |               variant="text"
 80 |               height="50"
 81 |               class="ml-2"
 82 |               :loading="loadingModels"
 83 |               @click="fetchModels"
 84 |             >
 85 |               <v-icon>mdi-refresh</v-icon>
 86 |             </v-btn>
 87 |           </div>
 88 |         </div>
 89 |       </v-card-text>
 90 |     </v-card>
 91 |     <a href="https://oneapi.jisuai.cn/" target="_blank">
 92 |       <v-btn color="primary" variant="outlined">
 93 |         获取API Key
 94 |         <v-icon right class="ml-2">mdi-key</v-icon>
 95 |       </v-btn>
 96 |     </a>
 97 |     <!-- 保存按钮 -->
 98 |     <v-row class="mt-4">
 99 |       <v-col>
100 |         <v-btn color="primary" @click="saveSettings">
101 |           保存设置
102 |           <v-icon right class="ml-2">mdi-content-save</v-icon>
103 |         </v-btn>
104 |         <v-btn
105 |           color="error"
106 |           variant="outlined"
107 |           class="ml-2"
108 |           @click="resetSettings"
109 |         >
110 |           重置默认
111 |           <v-icon right class="ml-2">mdi-refresh</v-icon>
112 |         </v-btn>
113 |       </v-col>
114 |     </v-row>
115 |   </v-container>
116 | </template>
117 | 
118 | <script lang="ts" setup>
119 | import { ref, onMounted, onUnmounted } from "vue";
120 | import { useSettingsStore } from "@/store";
121 | import { storeToRefs } from "pinia";
122 | import { formatDate } from "@/utils/dateFormat";
123 | 
124 | const settingsStore = useSettingsStore();
125 | const { integrated: data } = storeToRefs(settingsStore);
126 | const showKey = ref(false);
127 | const testing = ref(false);
128 | const loadingModels = ref(false);
129 | const availableModels = ref<string[]>([]);
130 | const showHint = ref(false);
131 | 
132 | // 获取可用模型列表
133 | const fetchModels = async () => {
134 |   loadingModels.value = true;
135 |   try {
136 |     const response = await fetch(`${data.value.apiUrl}/models`, {
137 |       headers: {
138 |         Authorization: `Bearer ${data.value.apiKey}`,
139 |       },
140 |     });
141 | 
142 |     if (response.ok) {
143 |       const result = await response.json();
144 |       availableModels.value = result.data.map((model: any) => model.id).sort();
145 |     } else {
146 |       throw new Error(response.statusText);
147 |     }
148 |   } catch (error: any) {
149 |     alert(`获取模型列表失败：${error.message}`);
150 |   } finally {
151 |     loadingModels.value = false;
152 |   }
153 | };
154 | 
155 | // 修改测试连接方法，成功后自动获取模型列表
156 | const testConnection = async () => {
157 |   testing.value = true;
158 |   try {
159 |     const response = await fetch(`${data.value.apiUrl}/models`, {
160 |       headers: {
161 |         Authorization: `Bearer ${data.value.apiKey}`,
162 |       },
163 |     });
164 | 
165 |     data.value.isApiValid = response.ok;
166 |     data.value.lastTestTime = new Date().toISOString();
167 | 
168 |     if (response.ok) {
169 |       alert("连接成功！API 配置有效。");
170 |       // 连接成功后自动获取模型列表
171 |       await fetchModels();
172 |     } else {
173 |       alert(`连接失败：${response.statusText}`);
174 |     }
175 |   } catch (error: any) {
176 |     data.value.isApiValid = false;
177 |     data.value.lastTestTime = new Date().toISOString();
178 |     alert(`连接错误：${error.message}`);
179 |   } finally {
180 |     testing.value = false;
181 |   }
182 | };
183 | 
184 | // 方法定义
185 | const saveSettings = () => {
186 |   settingsStore.saveToLocalStorage();
187 | };
188 | 
189 | const resetSettings = () => {
190 |   settingsStore.resetIntegratedSettings();
191 | };
192 | 
193 | // 检查剪贴板内容是否像 API Key
194 | const isApiKeyLike = (text: string) => {
195 |   return text.trim().startsWith("sk-");
196 | };
197 | 
198 | // 处理输入框获得焦点
199 | const handleFocus = async () => {
200 |   try {
201 |     const text = await navigator.clipboard.readText();
202 |     showHint.value = isApiKeyLike(text);
203 |   } catch (err) {
204 |     console.log("无法读取剪贴板:", err);
205 |   }
206 | };
207 | 
208 | // 监听粘贴事件
209 | const handlePaste = async (e: ClipboardEvent) => {
210 |   const text = e.clipboardData?.getData("text");
211 |   if (text && isApiKeyLike(text)) {
212 |     e.preventDefault();
213 |     data.value.apiKey = text;
214 |     showHint.value = false;
215 |   }
216 | };
217 | 
218 | onMounted(() => {
219 |   document.addEventListener("paste", handlePaste);
220 | });
221 | 
222 | onUnmounted(() => {
223 |   document.removeEventListener("paste", handlePaste);
224 | });
225 | </script>
226 | 


--------------------------------------------------------------------------------
/src/layout/sub/FeedDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 使用 v-dialog 创建弹框 -->
 3 |   <v-dialog
 4 |     :model-value="modelValue"
 5 |     @update:model-value="$emit('update:modelValue', false)"
 6 |     max-width="500px"
 7 |   >
 8 |     <v-card>
 9 |       <!-- 标题部分 -->
10 |       <v-card-title class="d-flex justify-space-between align-center">
11 |         <span>订阅源选项</span>
12 |         <v-btn icon variant="text" @click="$emit('update:modelValue', false)">
13 |           <v-icon>mdi-close</v-icon>
14 |         </v-btn>
15 |       </v-card-title>
16 |       <!-- 内容部分 -->
17 |       <v-card-text>
18 |         <!-- 图标和描述 -->
19 |         <div class="text-center align-center mb-4">
20 |           <v-img :src="feed?.icon" max-width="30" class="mx-auto mb-5"></v-img>
21 |           <div class="mb-4" v-text="feed?.title"></div>
22 |         </div>
23 | 
24 |         <div class="my-4">未读文章: {{ feed?.unreadQty }}</div>
25 |         <!-- 网站和 RSS 链接 -->
26 |         <div>
27 |           <v-subheader>网站</v-subheader>
28 |           <br />
29 |           <a :href="feed?.siteUrl" target="_blank" v-text="feed?.siteUrl"></a
30 |           ><v-icon size="small"> mdi-open-in-new</v-icon>
31 |           <br />
32 |           <br />
33 |           <v-subheader class="mt-2">RSS</v-subheader>
34 |           <br />
35 |           <a :href="feed?.url" target="_blank" v-text="feed?.url"></a
36 |           ><v-icon size="small"> mdi-open-in-new</v-icon>
37 |         </div>
38 |       </v-card-text>
39 |     </v-card>
40 |   </v-dialog>
41 | </template>
42 | 
43 | <script setup lang="ts">
44 | import { SubscriptionFeed } from "@/service/types";
45 | defineProps<{
46 |   modelValue: boolean;
47 |   feed: SubscriptionFeed | undefined;
48 | }>();
49 | 
50 | defineEmits<{
51 |   (e: "update:modelValue", value: boolean): void;
52 | }>();
53 | </script>
54 | 
55 | <style scoped>
56 | /* 自定义样式 */
57 | .v-card-title {
58 |   font-size: 1.25rem;
59 |   font-weight: bold;
60 | }
61 | 
62 | .v-subheader {
63 |   font-size: 1rem;
64 |   font-weight: bold;
65 |   color: #000;
66 | }
67 | 
68 | a {
69 |   text-decoration: none;
70 |   color: rgb(var(--v-theme-surface-variant));
71 | }
72 | 
73 | a:hover {
74 |   text-decoration: underline;
75 | }
76 | 
77 | .v-btn--error {
78 |   background-color: #ff5252 !important;
79 |   color: white !important;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/layout/sub/HelpDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-dialog
  3 |     :model-value="modelValue"
  4 |     @update:model-value="$emit('update:modelValue', false)"
  5 |     max-width="800"
  6 |   >
  7 |     <v-card class="rounded-lg" height="75vh">
  8 |       <v-card-title class="d-flex justify-space-between">
  9 |         <span class="my-2">快捷键帮助</span>
 10 |         <v-spacer></v-spacer>
 11 |         <v-btn variant="text" icon @click="$emit('update:modelValue', false)">
 12 |           <v-icon>mdi-close</v-icon>
 13 |         </v-btn>
 14 |       </v-card-title>
 15 |       <v-card-text class="py-0">
 16 |         <v-row>
 17 |           <v-col cols="6">
 18 |             <v-list-subheader>阅读模式</v-list-subheader>
 19 |             <v-list-item>
 20 |               <v-list-item-title>← 方向键左</v-list-item-title>
 21 |               <v-list-item-subtitle>上一篇文章</v-list-item-subtitle>
 22 |             </v-list-item>
 23 |             <v-list-item>
 24 |               <v-list-item-title>→ 方向键右</v-list-item-title>
 25 |               <v-list-item-subtitle>下一篇文章</v-list-item-subtitle>
 26 |             </v-list-item>
 27 |             <v-list-item>
 28 |               <v-list-item-title>↑ 方向键上</v-list-item-title>
 29 |               <v-list-item-subtitle>向上滚动</v-list-item-subtitle>
 30 |             </v-list-item>
 31 |             <v-list-item>
 32 |               <v-list-item-title>↓ 方向键下</v-list-item-title>
 33 |               <v-list-item-subtitle>向下滚动</v-list-item-subtitle>
 34 |             </v-list-item>
 35 |             <v-list-item>
 36 |               <v-list-item-title>PageUp</v-list-item-title>
 37 |               <v-list-item-subtitle>向上滚动一页</v-list-item-subtitle>
 38 |             </v-list-item>
 39 |             <v-list-item>
 40 |               <v-list-item-title>PageDown</v-list-item-title>
 41 |               <v-list-item-subtitle>向下滚动一页</v-list-item-subtitle>
 42 |             </v-list-item>
 43 | 
 44 |             <v-list-item>
 45 |               <v-list-item-title>F</v-list-item-title>
 46 |               <v-list-item-subtitle>稍后阅读</v-list-item-subtitle>
 47 |             </v-list-item>
 48 |             <v-list-item>
 49 |               <v-list-item-title>M</v-list-item-title>
 50 |               <v-list-item-subtitle>标记为已读/未读</v-list-item-subtitle>
 51 |             </v-list-item>
 52 |             <v-list-item>
 53 |               <v-list-item-title>I</v-list-item-title>
 54 |               <v-list-item-subtitle>内嵌网页</v-list-item-subtitle>
 55 |             </v-list-item>
 56 |             <v-list-item>
 57 |               <v-list-item-title>G</v-list-item-title>
 58 |               <v-list-item-subtitle>生成总结</v-list-item-subtitle>
 59 |             </v-list-item>
 60 |             <v-list-item>
 61 |               <v-list-item-title>V</v-list-item-title>
 62 |               <v-list-item-subtitle>打开原网页</v-list-item-subtitle>
 63 |             </v-list-item>
 64 |             <v-list-item>
 65 |               <v-list-item-title>Esc</v-list-item-title>
 66 |               <v-list-item-subtitle>退出阅读模式</v-list-item-subtitle>
 67 |             </v-list-item></v-col
 68 |           >
 69 |           <v-col cols="6">
 70 |             <v-list-subheader>全局模式</v-list-subheader>
 71 |             <v-list-item>
 72 |               <v-list-item-title>CTRL + K | /</v-list-item-title>
 73 |               <v-list-item-subtitle>打开搜索</v-list-item-subtitle>
 74 |             </v-list-item>
 75 |             <v-list-item>
 76 |               <v-list-item-title>CTRL + ?</v-list-item-title>
 77 |               <v-list-item-subtitle>打开帮助</v-list-item-subtitle>
 78 |             </v-list-item>
 79 |             <v-list-item>
 80 |               <v-list-item-title>CTRL + B</v-list-item-title>
 81 |               <v-list-item-subtitle>打开/关闭侧边栏</v-list-item-subtitle>
 82 |             </v-list-item>
 83 |             <br />
 84 |             <v-divider></v-divider>
 85 |             <br />
 86 |             <v-list-subheader>列表模式</v-list-subheader>
 87 |             <v-list-item>
 88 |               <v-list-item-title>N</v-list-item-title>
 89 |               <v-list-item-subtitle>打开下一个未读订阅源</v-list-item-subtitle>
 90 |             </v-list-item>
 91 |             <v-list-item>
 92 |               <v-list-item-title>Shift + N</v-list-item-title>
 93 |               <v-list-item-subtitle>打开上一个未读订阅源</v-list-item-subtitle>
 94 |             </v-list-item>
 95 |             <v-list-item>
 96 |               <v-list-item-title>A</v-list-item-title>
 97 |               <v-list-item-subtitle>添加订阅源</v-list-item-subtitle>
 98 |             </v-list-item>
 99 |             <v-list-item>
100 |               <v-list-item-title>↑↓ 方向键</v-list-item-title>
101 |               <v-list-item-subtitle>选择上/下一篇文章</v-list-item-subtitle>
102 |             </v-list-item>
103 |             <v-list-item>
104 |               <v-list-item-title>Enter 回车</v-list-item-title>
105 |               <v-list-item-subtitle>打开文章</v-list-item-subtitle>
106 |             </v-list-item>
107 |             <v-list-item>
108 |               <v-list-item-title>R</v-list-item-title>
109 |               <v-list-item-subtitle>刷新订阅</v-list-item-subtitle>
110 |             </v-list-item>
111 |             <v-list-item>
112 |               <v-list-item-title>M</v-list-item-title>
113 |               <v-list-item-subtitle>全部标记为已读</v-list-item-subtitle>
114 |             </v-list-item>
115 |             <v-list-item>
116 |               <v-list-item-title>U</v-list-item-title>
117 |               <v-list-item-subtitle>仅看未读</v-list-item-subtitle>
118 |             </v-list-item>
119 |             <v-list-item>
120 |               <v-list-item-title>V</v-list-item-title>
121 |               <v-list-item-subtitle>切换视图</v-list-item-subtitle>
122 |             </v-list-item>
123 |           </v-col>
124 |         </v-row>
125 |       </v-card-text>
126 |     </v-card>
127 |   </v-dialog>
128 | </template>
129 | 
130 | <script setup lang="ts">
131 | defineProps<{
132 |   modelValue: boolean;
133 | }>();
134 | 
135 | defineEmits<{
136 |   (e: "update:modelValue", value: boolean): void;
137 | }>();
138 | </script>
139 | 


--------------------------------------------------------------------------------
/src/layout/sub/PlayList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="play-list-warp">
 3 |     <div>
 4 |       <v-empty-state
 5 |         icon="mdi-headphones"
 6 |         v-if="!store.currentPlaying"
 7 |         height="480px"
 8 |         text="听你喜爱的内容"
 9 |       >
10 |       </v-empty-state>
11 |       <div v-show="store.currentPlaying" class="podcat-reader">
12 |         <div class="warp">
13 |           <div class="glass">
14 |             <MPlayer
15 |               v-model="store.currentPlaying"
16 |               @onplay="store.setPlaying"
17 |               ref="playerRef"
18 |             ></MPlayer>
19 |           </div>
20 |         </div>
21 |       </div>
22 |     </div>
23 |     <v-list>
24 |       <v-list-subheader>播放列表</v-list-subheader>
25 |     </v-list>
26 |     <div class="play-list">
27 |       <v-list :items="store.playlist" lines="two">
28 |         <template v-for="item in store.playlist" :key="item.id">
29 |           <v-list-item
30 |             @click="store.play(item)"
31 |             :active="store.currentPlaying?.id === item.id"
32 |           >
33 |             <template #prepend>
34 |               <v-avatar :image="item.thumbil || ''"></v-avatar>
35 |             </template>
36 |             <v-list-item-title>{{ item.title }}</v-list-item-title>
37 |             <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
38 |             <template #append>
39 |               <v-btn
40 |                 size="small"
41 |                 color="grey-lighten-1"
42 |                 icon="mdi-delete"
43 |                 variant="text"
44 |                 @click.stop="store.remove(item.id)"
45 |               ></v-btn>
46 |             </template>
47 |           </v-list-item>
48 |         </template>
49 |       </v-list>
50 |     </div>
51 |   </div>
52 | </template>
53 | 
54 | <script lang="ts" setup>
55 | import MPlayer from "@/components/MPlayer.vue";
56 | import { usePlayListStore } from "@/store/playlist";
57 | import { ref, onMounted } from "vue";
58 | 
59 | const store = usePlayListStore();
60 | const playerRef = ref();
61 | 
62 | onMounted(() => {
63 |   store.setTogglePlaying(playerRef.value.togglePlay);
64 | });
65 | </script>
66 | 
67 | <style scoped>
68 | .play-list {
69 |   overflow: scroll;
70 |   height: calc(100vh - 550px);
71 |   margin-left: 0.5rem;
72 | }
73 | .podcat-reader {
74 |   width: 100%;
75 |   position: sticky;
76 |   padding: 1rem;
77 |   height: 480px;
78 |   .warp {
79 |     height: 100%;
80 |     border-radius: 1rem;
81 |     background: linear-gradient(
82 |       to right bottom,
83 |       rgba(var(--v-theme-primary), 0.6),
84 |       rgba(var(--v-theme-primary), 1)
85 |     );
86 |   }
87 |   .glass {
88 |     height: 100%;
89 |     display: flex;
90 |     align-items: center;
91 |     padding: 1rem;
92 |     background: rgba(0, 0, 0, 0.3);
93 |     border-radius: 1rem;
94 |     backdrop-filter: blur(10px);
95 |     -webkit-backdrop-filter: blur(10px);
96 |   }
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import App from "./App.vue";
 3 | // Plugins
 4 | import {
 5 |     registerPlugins
 6 | } from "./plugins/index.ts"
 7 | 
 8 | const app = createApp(App)
 9 | 
10 | registerPlugins(app)
11 | 
12 | app.mount('#app')


--------------------------------------------------------------------------------
/src/plugins/ImgPreview.ts:
--------------------------------------------------------------------------------
  1 | // src/utils/useImgPreview.ts
  2 | 
  3 | import { ref, createApp, h, defineComponent } from 'vue';
  4 | import ImagePreviewDialog from '@/components/ImagePreviewDialog.vue';
  5 | 
  6 | // 添加类型定义
  7 | interface ImgPreviewInstance {
  8 |     destroy: () => void;
  9 |     init: () => void;
 10 | }
 11 | 
 12 | interface ImgPreviewOptions {
 13 |     selector?: string;
 14 |     excludeClass?: string;
 15 | }
 16 | 
 17 | function createImgPreview(vuetify: any, options: ImgPreviewOptions = {}): ImgPreviewInstance {
 18 |     const dialog = ref(false);
 19 |     const imgSrc = ref('');
 20 |     const currentIndex = ref(0);
 21 |     const images = ref<HTMLImageElement[]>([]);
 22 | 
 23 |     const {
 24 |         selector = '.reading .reader-warp',
 25 |         excludeClass = 'noclick'
 26 |     } = options;
 27 | 
 28 |     // 使用 WeakMap 来存储事件监听器引用
 29 |     const eventListeners = new WeakMap();
 30 | 
 31 |     const parent = document.createElement('div');
 32 |     document.body.appendChild(parent);
 33 | 
 34 | 
 35 | 
 36 |     const collectImages = () => {
 37 |         const container = document.querySelector(selector);
 38 |         if (!container) return;
 39 | 
 40 |         try {
 41 |             const imgElements = container.querySelectorAll(`img:not(.${excludeClass})`);
 42 |             const validImages = Array.from(imgElements)
 43 |                 .map(img => (img as HTMLImageElement))
 44 |                 .filter(src => src); // 过滤掉无效的src
 45 | 
 46 |             images.value = validImages;
 47 |         } catch (error) {
 48 |             console.error('Error collecting images:', error);
 49 |         }
 50 |     };
 51 | 
 52 |     // 优化导航逻辑
 53 |     const navigateImage = (direction: 'prev' | 'next') => {
 54 |         if (images.value.length <= 1) return;
 55 |         const delta = direction === 'prev' ? -1 : 1;
 56 |         currentIndex.value = (currentIndex.value + delta + images.value.length) % images.value.length;
 57 |         imgSrc.value = images.value[currentIndex.value].src;
 58 |     };
 59 | 
 60 |     const handleKeyDown = (event: KeyboardEvent) => {
 61 |         if (!dialog.value) return;
 62 | 
 63 |         if (event.key === 'ArrowLeft') {
 64 |             navigateImage('prev');
 65 |         } else if (event.key === 'ArrowRight') {
 66 |             navigateImage('next');
 67 |         } else if (event.key === 'Escape') {
 68 |             closePreview();
 69 |         }
 70 |     };
 71 | 
 72 |     const openPreview = (src: string) => {
 73 |         collectImages();
 74 |         currentIndex.value = images.value.findIndex(img => img.src === src);
 75 |         imgSrc.value = src;
 76 |         dialog.value = true;
 77 |     };
 78 | 
 79 |     const closePreview = () => {
 80 |         dialog.value = false;
 81 |         imgSrc.value = '';
 82 |     };
 83 | 
 84 |     // 使用防抖处理图片点击
 85 |     const handleImageClick = (() => {
 86 |         let timeout: number;
 87 |         return (event: MouseEvent) => {
 88 |             if (timeout) {
 89 |                 window.clearTimeout(timeout);
 90 |             }
 91 | 
 92 |             timeout = window.setTimeout(() => {
 93 |                 const target = event.target as HTMLElement;
 94 |                 if (document.querySelector('.reading')?.contains(target) && target.tagName === 'IMG' && !target.classList.contains(excludeClass)) {
 95 |                     openPreview((target as HTMLImageElement).src);
 96 |                 }
 97 |             }, 100);
 98 |         };
 99 |     })();
100 | 
101 |     const app = createApp(defineComponent({
102 |         setup() {
103 |             return () => h(ImagePreviewDialog, {
104 |                 modelValue: dialog.value,
105 |                 'onUpdate:modelValue': (v: boolean) => dialog.value = v,
106 |                 imgSrc: imgSrc.value,
107 |                 images: images.value.map(img => img.src),
108 |                 onNavigate: (direction: 'prev' | 'next' | 'goto' | number) => {
109 |                     if (typeof direction === 'number') {
110 |                         // 处理点击缩略图的情况
111 |                         currentIndex.value = direction;
112 |                         imgSrc.value = images.value[direction].src;
113 |                     } else if (direction === 'prev' || direction === 'next') {
114 |                         // 处理前进/后退导航
115 |                         navigateImage(direction);
116 |                     } else if (direction === 'goto') {
117 |                         images.value[currentIndex.value].scrollIntoView({ behavior: 'smooth', block: 'center' });
118 |                         closePreview();
119 |                     }
120 |                 }
121 |             });
122 |         }
123 |     }));
124 |     app.use(vuetify)
125 |     app.mount(parent)
126 | 
127 |     const init = () => {
128 |         const mainContainer: HTMLElement | null = document.querySelector('.v-main');
129 |         if (!mainContainer) {
130 |             console.warn('Main container not found');
131 |             return;
132 |         }
133 | 
134 |         // 移除旧的事件监听器
135 |         if (eventListeners.has(mainContainer)) {
136 |             const oldListener = eventListeners.get(mainContainer);
137 |             mainContainer.removeEventListener('click', oldListener);
138 |         }
139 | 
140 |         // 添加新的事件监听器
141 |         mainContainer.addEventListener('click', handleImageClick);
142 |         eventListeners.set(mainContainer, handleImageClick);
143 |         window.addEventListener('keydown', handleKeyDown);
144 |         log('imgPreview init')
145 |     };
146 | 
147 |     const destroy = () => {
148 |         const mainContainer: HTMLElement | null = document.querySelector('.v-main');
149 |         if (mainContainer && eventListeners.has(mainContainer)) {
150 |             const listener = eventListeners.get(mainContainer);
151 |             mainContainer.removeEventListener('click', listener);
152 |             eventListeners.delete(mainContainer);
153 |         }
154 | 
155 |         window.removeEventListener('keydown', handleKeyDown);
156 |         parent.remove();
157 |         app.unmount();
158 |     };
159 | 
160 |     document.addEventListener('DOMContentLoaded', () => {
161 |         setTimeout(init, 1000);
162 |     });
163 | 
164 |     return {
165 |         destroy,
166 |         init
167 |     };
168 | }
169 | 
170 | // 优化插件导出
171 | export default {
172 |     install(app: any, options?: ImgPreviewOptions) {
173 |         const vuetify = app.config.globalProperties.$vuetify;
174 |         app.config.globalProperties.$useImgPreview = createImgPreview(vuetify, options);
175 |     },
176 | };


--------------------------------------------------------------------------------
/src/plugins/confirm.ts:
--------------------------------------------------------------------------------
 1 | import { createApp, h, ref } from "vue";
 2 | import ConfirmDialog from "@/components/ConfirmDialog.vue";
 3 | export interface ConfirmOptions {
 4 |     title?: string;
 5 |     message: string;
 6 | }
 7 | 
 8 | const createConfirm = (vuetify: any) => {
 9 |     return (options: ConfirmOptions): Promise<boolean> => {
10 |         return new Promise((resolve) => {
11 |             const div = document.createElement("div");
12 |             document.body.appendChild(div);
13 | 
14 |             const app = createApp({
15 |                 setup() {
16 |                     const visible = ref(true);
17 | 
18 |                     const destroy = () => {
19 |                         app.unmount();
20 |                         div.remove();
21 |                     };
22 | 
23 |                     const handleConfirm = () => {
24 |                         visible.value = false;
25 |                         destroy();
26 |                         resolve(true);
27 |                     };
28 | 
29 |                     const handleCancel = () => {
30 |                         visible.value = false;
31 |                         destroy();
32 |                         resolve(false);
33 |                     };
34 | 
35 |                     return () =>
36 |                         h(ConfirmDialog, {
37 |                             ...options,
38 |                             modelValue: visible.value,
39 |                             show: () => (visible.value = true),
40 |                             onConfirm: handleConfirm,
41 |                             onCancel: handleCancel,
42 |                         });
43 |                 },
44 |             });
45 |             app.use(vuetify);
46 |             app.mount(div);
47 |         });
48 |     }
49 | };
50 | 
51 | export let confirm: (options: ConfirmOptions) => Promise<boolean>;
52 | 
53 | export default {
54 |     install(app: any) {
55 |         const vuetify = app.config.globalProperties.$vuetify;
56 |         confirm = createConfirm(vuetify);
57 |         app.config.globalProperties.$confirm = confirm;
58 |     },
59 | }; 


--------------------------------------------------------------------------------
/src/plugins/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * plugins/index.js
 3 |  *
 4 |  * Automatically included in `./src/main.js`
 5 |  */
 6 | 
 7 | // Plugins
 8 | import vuetify from './vuetify'
 9 | import router from '../router'
10 | import { createPinia } from 'pinia'
11 | import ConfirmPlugin from './confirm'
12 | import ImgPreviewPlugin from './ImgPreview'
13 | const pinia = createPinia()
14 | export function registerPlugins(app: any) {
15 |   app.config.globalProperties.$vuetify = vuetify;
16 |   app
17 |     .use(pinia)
18 |     .use(vuetify)
19 |     .use(router)
20 |     .use(ConfirmPlugin)
21 |     .use(ImgPreviewPlugin)
22 | }
23 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * plugins/vuetify.js
 3 |  *
 4 |  * Framework documentation: https://vuetifyjs.com`
 5 |  */
 6 | 
 7 | // Styles
 8 | import '@mdi/font/css/materialdesignicons.css'
 9 | import 'vuetify/styles'
10 | 
11 | // Composables
12 | import {
13 |     createVuetify
14 | } from 'vuetify'
15 | import { VBtn } from 'vuetify/components'
16 | 
17 | // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
18 | export default createVuetify({
19 |     theme: {
20 |         themes: {
21 |             light: {
22 |                 colors: {
23 |                     primary: '#27AE60',
24 |                     secondary: '#F39C12',
25 |                     success: '#8E44AD',
26 |                     // info: '#E74C3C',
27 |                 },
28 |             },
29 |             dark: {
30 |                 colors: {
31 |                     background: '#292929',
32 |                     primary: '#27AE60',
33 |                     secondary: '#F39C12',
34 |                     success: '#8E44AD',
35 |                     // info: '#E74C3C'
36 |                 },
37 |             },
38 |         },
39 |     },
40 |     aliases: {
41 |         CBtn: VBtn
42 |     },
43 |     defaults: {
44 |         CBtn: {
45 |             variant: 'text',
46 |             size: '40px'
47 |         },
48 |     },
49 | })
50 | 


--------------------------------------------------------------------------------
/src/repository/index.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     checkDBExists
 3 | } from '@/utils/dbHelper'
 4 | 
 5 | export type { Group, Feed, Item } from './model';
 6 | 
 7 | export { groupRepo, feedRepo, itemRepo, type Page } from './repository'
 8 | 
 9 | export async function isDbExists(): Promise<any> {
10 |     await checkDBExists()
11 | }


--------------------------------------------------------------------------------
/src/repository/model.ts:
--------------------------------------------------------------------------------
 1 | import { DbStore } from '../utils/dbHelper'
 2 | 
 3 | export interface Group extends DbStore {
 4 |     title: string;
 5 | }
 6 | 
 7 | export interface Feed extends DbStore {
 8 |     title: string;
 9 |     url: string;
10 |     siteUrl: string;
11 |     groupId?: number
12 | }
13 | 
14 | export interface Item extends DbStore {
15 |     feedId: number,
16 |     title: string;
17 |     author: string;
18 |     description: string;
19 |     pubDate: number;
20 |     link: string;
21 |     enclosure?: string,
22 |     rank?: number
23 | }
24 | 


--------------------------------------------------------------------------------
/src/repository/repository.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | import { DbStore, IndexedDB, getOne } from '../utils/dbHelper'
  3 | 
  4 | import { Feed, Group, Item } from './model';
  5 | 
  6 | const { create,
  7 |     read,
  8 |     update,
  9 |     remove,
 10 |     getAll,
 11 |     listAll, findAll, count, getIdsInTimeRange, findTimeRange, whereOne, openStore, exists
 12 | } = IndexedDB(db => {
 13 |     // 创建 Groups 对象存储
 14 |     if (!db.objectStoreNames.contains('groups')) {
 15 |         const groupStore = db.createObjectStore('groups', { keyPath: 'id' });
 16 |         groupStore.createIndex('title', 'title', { unique: false });
 17 |     }
 18 | 
 19 |     // 创建 Feeds 对象存储
 20 |     if (!db.objectStoreNames.contains('feeds')) {
 21 |         const feedStore = db.createObjectStore('feeds', { keyPath: 'id' });
 22 |         feedStore.createIndex('title', 'title', { unique: false });
 23 |         feedStore.createIndex('groupId', 'groupId', { unique: false });
 24 |         feedStore.createIndex('siteUrl', 'siteUrl', { unique: false });
 25 |     }
 26 | 
 27 |     // 创建 Items 对象存储
 28 |     if (!db.objectStoreNames.contains('items')) {
 29 |         const itemStore = db.createObjectStore('items', { keyPath: 'id' });
 30 |         itemStore.createIndex('feedId', 'feedId', { unique: false });
 31 |         itemStore.createIndex('author', 'author', { unique: false });
 32 |         itemStore.createIndex('description', 'description', { unique: false });
 33 |         itemStore.createIndex('pubDate', 'pubDate', { unique: false });
 34 |         itemStore.createIndex('link', 'link', { unique: false });
 35 |         itemStore.createIndex('enclosure', 'enclosure', { unique: false });
 36 |     }
 37 | })
 38 | 
 39 | 
 40 | class Repo<T extends DbStore> {
 41 |     protected storename: string;
 42 |     public constructor(storeName: string) {
 43 |         this.storename = storeName
 44 |     }
 45 |     async get(id: number): Promise<T | undefined> {
 46 |         return read(this.storename, id)
 47 |     }
 48 |     async save(data: T): Promise<string> {
 49 |         if (await this.get(data.id)) {
 50 |             return update(this.storename, data.id, data)
 51 |         }
 52 |         return create(this.storename, data)
 53 |     }
 54 |     async del(id: number): Promise<string> {
 55 |         return remove(this.storename, id)
 56 |     }
 57 |     async delAll(): Promise<string[]> {
 58 |         return Promise.all((await this.getAll()).map(t => this.del(t.id)))
 59 |     }
 60 |     async getAll(): Promise<T[]> {
 61 |         return getAll(this.storename)
 62 |     }
 63 |     async listAll(conditionFn: ((item: T) => boolean) | undefined): Promise<T[]> {
 64 |         if (conditionFn) {
 65 |             return await listAll(this.storename, conditionFn)
 66 |         } else {
 67 |             return getAll(this.storename)
 68 |         }
 69 |     }
 70 |     async findAll(conditionFn: (item: T) => boolean, page: number = 0, size: number = 50, sortFn?: (x: T, y: T) => number): Promise<Page<T>> {
 71 |         const data = await findAll(this.storename, conditionFn, size, page, sortFn)
 72 |         return { isLast: data.length != size, data }
 73 |     }
 74 |     async count(): Promise<number> {
 75 |         return count(this.storename)
 76 |     }
 77 |     async maxId(): Promise<number> {
 78 |         return (await whereOne(this.storename, (x: T, y: T) => (x.id > (y ? y.id : 0)) ? x : y))?.id;
 79 |     }
 80 |     async existsId(id: number): Promise<boolean> {
 81 |         return exists(this.storename, id)
 82 |     }
 83 | }
 84 | 
 85 | export interface Page<T> {
 86 |     isLast: boolean,
 87 |     data: T[]
 88 | }
 89 | 
 90 | 
 91 | class ItemRepo extends Repo<Item> {
 92 | 
 93 |     /**
 94 |      * 根据时间过滤按feedrank大小排序
 95 |      * @param time 
 96 |      * @param feedRanks 
 97 |      * @param condition 
 98 |      * @param page 
 99 |      * @param size 
100 |      * @returns 
101 |      */
102 |     // time: number, feedRanks: any | null, 
103 |     async findTimeAll(time: number, condition: ((item: Item) => boolean), page: number = 0, size: number = 50): Promise<Page<Item>> {
104 |         // const store = await openStore(this.storename)
105 |         // const range = IDBKeyRange.lowerBound(time);
106 |         // const request = store.index("pubDate").openCursor(range);
107 |         // const items: Item[] = await withCursor(request, (item: Item) => {
108 |         //     const rank = feedRanks[item.feedId] || 10;
109 |         //     item.rank = rank
110 |         //     if (condition) {
111 |         //         if (condition(item)) {
112 |         //             return [item, true]
113 |         //         } else {
114 |         //             return [null, true]
115 |         //         }
116 |         //     }
117 |         //     return [item, true]
118 |         // }, (a, b) => (a.rank && b.rank ? a.rank - b.rank : 1))
119 |         // const startOffset = page * size;
120 |         // const endOffset = startOffset + size;
121 |         // let data: Item[] = []
122 |         // if (startOffset < items.length) {
123 |         //     data = items.slice(startOffset, endOffset)
124 |         // }
125 |         const data: Item[] = await findTimeRange(this.storename, time, new Date().getTime() / 1000, page, size, condition)
126 |         // console.log(page, data.length, data.length != size)
127 |         return { isLast: data.length != size, data }
128 |     }
129 | 
130 |     async countByFeedId(feedId: number): Promise<number> {
131 |         const store0 = await openStore(this.storename)
132 |         const feedIndex = store0.index('feedId')
133 |         const req = feedIndex.count(feedId)
134 |         return getOne(req)
135 |     }
136 | 
137 |     async getIdsInTimeRange(startTime: number, endTime: number): Promise<number[]> {
138 |         return await getIdsInTimeRange(this.storename, startTime, endTime)
139 |     }
140 | }
141 | 
142 | export const groupRepo = new Repo<Group>('groups')
143 | export const feedRepo = new Repo<Feed>('feeds')
144 | export const itemRepo = new ItemRepo('items')


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | // Composables
 2 | import {
 3 |     createRouter,
 4 |     createWebHistory
 5 | } from 'vue-router'
 6 | 
 7 | const routes = [{
 8 |     path: '/',
 9 |     component: () => import('@/layout/IndexLayout.vue'),
10 |     children: [{
11 |         path: '/:type/:id',
12 |         component: () => import('@/views/Items.vue'),
13 |         props: true
14 |     }, {
15 |         path: '/:type',
16 |         component: () => import('@/views/Items.vue'),
17 |         props: true
18 |     },
19 |     {
20 |         path: '/',
21 |         component: () => import('@/views/Welcome.vue'),
22 |     },
23 |     {
24 |         path: '/welcome',
25 |         component: () => import('@/views/Welcome.vue'),
26 |     },
27 |     {
28 |         path: '/subscribe',
29 |         component: () => import('@/views/Discovery.vue'),
30 |     }, {
31 |         path: '/search',
32 |         component: () => import('@/views/FeedAssistant.vue'),
33 |     }, {
34 |         path: '/filter',
35 |         component: () => import('@/views/RelatedArticles.vue'),
36 |     }, {
37 |         path: '/download',
38 |         component: () => import('@/views/Download.vue'),
39 |     }, {
40 |         path: '/combo',
41 |         component: () => import('@/views/Combo.vue'),
42 |     }, {
43 |         path: '/login',
44 |         component: () => import('@/views/Login.vue'),
45 |     }, {
46 |         path: '/rss',
47 |         name: 'RSSList',
48 |         component: () => import('../views/discover/RssList.vue')
49 |     }]
50 | }]
51 | 
52 | const router = createRouter({
53 |     history: createWebHistory(),
54 |     routes,
55 | })
56 | 
57 | export default router
58 | 


--------------------------------------------------------------------------------
/src/service/recommend.ts:
--------------------------------------------------------------------------------
 1 | import { itemRepo } from "@/repository"
 2 | let feeds = JSON.parse(localStorage.getItem('readfeeds') || '{}')
 3 | 
 4 | // 后期需要根据时间往下掉
 5 | export function readItem(feedId: number, itemId: number) {
 6 |     log('read-item', itemId)
 7 |     if (feeds['itemids']) {
 8 |         feeds.itemids.push(itemId)
 9 |         let feedread = feeds.feedread || {}
10 |         if (feedread.hasOwnProperty(feedId)) {
11 |             feedread[feedId] = feedread[feedId] + 1
12 |         } else {
13 |             feedread[feedId] = 1
14 |         }
15 |     } else {
16 |         if (feeds.hasOwnProperty(feedId)) {
17 |             feeds[feedId] = feeds[feedId] + 1
18 |         } else {
19 |             feeds[feedId] = 1
20 |         }
21 |         feeds = { itemids: [itemId], feedread: feeds }
22 |     }
23 |     localStorage.setItem('readfeeds', JSON.stringify(feeds))
24 | }
25 | 
26 | 
27 | export async function ranks() {
28 |     const feedItemCounts: any = {}
29 |     for await (let feedId of Object.keys(feeds)) {
30 |         feedItemCounts[feedId] = await itemRepo.count()
31 |     }
32 |     return listRank(feedItemCounts)
33 | }
34 | 
35 | function listRank(feedItemCounts: any): any {
36 |     let feedranks: any = {}
37 |     let total = 0
38 |     for (let feedId in feeds) {
39 |         total += feeds[feedId]
40 |     }
41 |     for (let feedId in feeds) {
42 |         let readQty = feeds[feedId]
43 |         if (readQty) {
44 |             const rank = 10 - (readQty > feedItemCounts[feedId] ? 1 : (readQty / feedItemCounts[feedId])) * 7 - (readQty > total ? 1 : readQty / total) * 3
45 |             feedranks[feedId] = rank
46 |         }
47 |     }
48 |     return feedranks
49 | }


--------------------------------------------------------------------------------
/src/service/types.ts:
--------------------------------------------------------------------------------
 1 | import { Item } from '../repository'
 2 | 
 3 | export interface Subscription {
 4 |     id: number,
 5 |     title: string,
 6 |     unreadQty?: number
 7 |     feeds: SubscriptionFeed[]
 8 | }
 9 | 
10 | export interface SubscriptionFeed {
11 |     id: number,
12 |     title: string,
13 |     url: string,
14 |     siteUrl: string,
15 |     unreadQty: number,
16 |     isFailure?: boolean,
17 |     icon?: string,
18 |     groupId?: number
19 | }
20 | 
21 | export enum ItemType { BASIC, IMAGE, VIDEO, PODCAST }
22 | 
23 | 
24 | export enum LsItemType { GROUP, FEED, FILTER, ITEMS, SAVED, ALL, RECOMMEND }
25 | 
26 | export interface FeedItem extends Item {
27 |     isRead?: boolean,
28 |     isSaved?: boolean,
29 |     thumbnail?: string,
30 |     summary: string,
31 |     datestr: string,
32 |     images?: string[],
33 |     type: ItemType | string,
34 |     html: string,
35 |     feed?: SubscriptionFeed
36 | }
37 | 


--------------------------------------------------------------------------------
/src/store/base.ts:
--------------------------------------------------------------------------------
 1 | // stores/counter.js
 2 | import { defineStore } from 'pinia'
 3 | import { reactive, Reactive } from 'vue'
 4 | import { Marked, listSavedIds, listUnreadIds, listFailFeedIds, read as read0, unread as unread0, save as save0, unsave as unsave0 } from '@/service'
 5 | 
 6 | function setItem(key: string, dataset: Set<number>) {
 7 |     localStorage.setItem(key, JSON.stringify(Array.from(dataset)))
 8 | }
 9 | 
10 | export const useBaseStore = defineStore('base', () => {
11 |     const saved_item_ids: Reactive<Set<number>> = reactive(new Set(JSON.parse(localStorage.getItem('sids') || "[]")))
12 |     const unread_item_ids: Reactive<Set<number>> = reactive(new Set(JSON.parse(localStorage.getItem('urids') || "[]")))
13 |     const fail_feed_ids: Reactive<Set<number>> = reactive(new Set(JSON.parse(localStorage.getItem('efids') || "[]")))
14 | 
15 |     async function read(id: number, marked: Marked = Marked.ITEM, before?: number, after?: number, feedId?: number) {
16 |         await read0(id, marked, before, after, feedId)
17 |         if (marked == Marked.ITEM) {
18 |             unread_item_ids.delete(id)
19 |         } else {
20 |             unread_item_ids.clear();
21 |             (await listUnreadIds()).forEach((item: number) => unread_item_ids.add(item));
22 |         }
23 |         setItem('urids', unread_item_ids)
24 |     }
25 | 
26 |     async function unread(id: number, marked: Marked = Marked.ITEM, before?: number) {
27 |         await unread0(id, marked, before)
28 |         if (marked == Marked.ITEM) {
29 |             unread_item_ids.add(id)
30 |         } else {
31 |             unread_item_ids.clear();
32 |             (await listUnreadIds()).forEach((item: number) => unread_item_ids.add(item));
33 |         }
34 |         setItem('urids', unread_item_ids)
35 |     }
36 | 
37 |     async function save(id: number) {
38 |         await save0(id)
39 |         saved_item_ids.add(id)
40 |         setItem('sids', saved_item_ids)
41 |     }
42 | 
43 |     async function unsave(id: number) {
44 |         await unsave0(id)
45 |         saved_item_ids.delete(id)
46 |         setItem('sids', saved_item_ids)
47 |     }
48 | 
49 |     function clearFailFeedIds() {
50 |         fail_feed_ids.clear()
51 |         localStorage.removeItem('efids')
52 |     }
53 | 
54 |     async function initData(urids: number[], sids: number[], efids: number[]) {
55 |         sids.forEach((item: number) => saved_item_ids.add(item));
56 |         urids.forEach((item: number) => unread_item_ids.add(item));
57 |         efids.forEach((item: number) => fail_feed_ids.add(item));
58 |         localStorage.setItem('sids', JSON.stringify(sids))
59 |         localStorage.setItem('urids', JSON.stringify(urids))
60 |         localStorage.setItem('efids', JSON.stringify(efids))
61 |     }
62 | 
63 |     async function refresh(refreshCb: () => Promise<void>, noRefreshCb: () => Promise<void>) {
64 |         const d = await listUnreadIds()
65 |         // 非标准接口
66 |         let fids: number[] = []
67 |         try {
68 |             fids = await listFailFeedIds()
69 |         } catch {
70 | 
71 |         }
72 |         if (d.length != unread_item_ids.size || fids.length != fail_feed_ids.size) {
73 |             unread_item_ids.clear()
74 |             saved_item_ids.clear()
75 |             initData(d, await listSavedIds(), fids)
76 |             await refreshCb()
77 |         } else {
78 |             await noRefreshCb()
79 |         }
80 | 
81 |     }
82 | 
83 |     return { saved_item_ids, unread_item_ids, fail_feed_ids, read, unread, save, unsave, refresh, clearFailFeedIds }
84 | })
85 | 
86 | 


--------------------------------------------------------------------------------
/src/store/feeds.ts:
--------------------------------------------------------------------------------
  1 | // stores/counter.js
  2 | import {
  3 |     defineStore,
  4 |     storeToRefs
  5 | } from 'pinia'
  6 | import {
  7 |     ref,
  8 |     watch,
  9 |     onMounted,
 10 |     Ref,
 11 | } from 'vue'
 12 | import {
 13 |     listSubscription,
 14 |     sumUnread,
 15 | } from '@/service'
 16 | import { extFeed } from '@/api'
 17 | import {
 18 |     useBaseStore
 19 | } from './base'
 20 | import { useSettingsStore } from './settings'
 21 | import { useRoute } from 'vue-router'
 22 | import { Subscription } from '@/service/types'
 23 | import { feedRepo, Group, itemRepo } from '@/repository'
 24 | 
 25 | export const useFeedsStore = defineStore('feeds', () => {
 26 |     const {
 27 |         unread_item_ids,
 28 |         fail_feed_ids,
 29 |         refresh: refreshBase
 30 |     } = useBaseStore()
 31 |     const {
 32 |         automation
 33 |     } = storeToRefs(useSettingsStore())
 34 |     const groups: Ref<Group[]> = ref([])
 35 |     const route = useRoute()
 36 |     const data: Ref<Subscription[] | undefined> = ref([])
 37 | 
 38 |     const subscriptions: Ref<Subscription[] | undefined> = ref([])
 39 |     const nextUnReadUrl = ref('')
 40 | 
 41 |     let readUrls: any[] = []
 42 | 
 43 | 
 44 |     async function buildFeeds() {
 45 |         // init  subscriptions
 46 |         const efids = new Set(fail_feed_ids)
 47 |         const items = await itemRepo.listAll(undefined)
 48 |         // 需要重构，首次加载构建数结构，后期只更新数量
 49 |         const follow = await Promise.all(data.value?.map(async g => {
 50 |             try {
 51 |                 await Promise.all(g.feeds.map(async f => {
 52 |                     f.unreadQty = await sumUnread(items, f.id, unread_item_ids)
 53 |                     f.isFailure = efids.has(f.id)
 54 |                 }));
 55 | 
 56 |                 g.feeds.sort((a, b) => {
 57 |                     //错误的在最后 有未读的进行字母排序 无的放后面 
 58 |                     let a0 = a.isFailure ? 1 : 0
 59 |                     let b0 = b.isFailure ? 1 : 0
 60 |                     if (a0 == 1 || b0 == 1) {
 61 |                         return a0 - b0
 62 |                     }
 63 |                     if (a.unreadQty != 0 && b.unreadQty != 0) {
 64 |                         return a.title.localeCompare(b.title)
 65 |                     } else if (a.unreadQty == 0 && b.unreadQty == 0) {
 66 |                         return a.title.localeCompare(b.title)
 67 |                     } else {
 68 |                         return b.unreadQty - a.unreadQty
 69 |                     }
 70 |                 })
 71 |                 g.unreadQty = g.feeds.map(f => f.unreadQty).reduce((x, y) => x + y)
 72 |                 return g
 73 |             } catch {
 74 |                 return g
 75 |             }
 76 |         }) || [])
 77 |         follow.sort((a, b) => {
 78 |             if (a.unreadQty != 0 && b.unreadQty != 0) {
 79 |                 return a.title.localeCompare(b.title)
 80 |             } else if (a.unreadQty == 0 && b.unreadQty == 0) {
 81 |                 return a.title.localeCompare(b.title)
 82 |             } else {
 83 |                 return (b.unreadQty || 0) - (a.unreadQty || 0)
 84 |             }
 85 |         })
 86 |         subscriptions.value = follow
 87 |         // init readUrls
 88 |         updateReadUrls()
 89 |     }
 90 | 
 91 |     async function refreshFeedUnreadQty() {
 92 |         // 直接使用 unread_item_ids 计算未读数量
 93 |         const items = await itemRepo.listAll(undefined)
 94 |         subscriptions.value?.forEach(async g => {
 95 |             await Promise.all(g.feeds.map(async f => {
 96 |                 f.unreadQty = await sumUnread(items, f.id, unread_item_ids)
 97 |             }))
 98 |             g.unreadQty = g.feeds.map(f => f.unreadQty).reduce((x, y) => x + y, 0)
 99 |             return g
100 |         })
101 | 
102 |         updateReadUrls()
103 |     }
104 | 
105 |     async function refresh() {
106 |         const r = await listSubscription()
107 |         if (r) {
108 |             data.value = r[0]
109 |             groups.value = r[1]
110 |             await buildFeeds()
111 |         }
112 |     }
113 | 
114 |     watch(route, () => {
115 |         updateNextUnReadUrl()
116 |     })
117 |     watch(automation, () => {
118 |         updateReadUrls()
119 |     }, { deep: true })
120 | 
121 | 
122 |     function updateReadUrls() {
123 |         readUrls = [{ url: '/explore', unreadQty: 1 }, { url: '/next', unreadQty: 1 }, ...automation.value.filters.map(f => ({ url: '/filter/' + f.id, unreadQty: 1 })), { url: '/all', unreadQty: unread_item_ids.size }]
124 |         subscriptions.value?.forEach(g => {
125 |             readUrls.push({ url: '/c/' + g.id, unreadQty: g.unreadQty })
126 |             g.feeds.forEach(f => {
127 |                 readUrls.push({ url: '/f/' + f.id, unreadQty: f.unreadQty })
128 |             })
129 |         })
130 |         updateNextUnReadUrl()
131 |     }
132 | 
133 |     function updateNextUnReadUrl() {
134 |         nextUnReadUrl.value = getNextUnReadUrl(route.fullPath)
135 |     }
136 | 
137 |     function getNextUnReadUrl(currentUrl: string): string {
138 |         let canNextUrl = false
139 |         for (let i = 0; i < readUrls.length; i++) {
140 |             if (canNextUrl && readUrls[i].unreadQty && readUrls[i].unreadQty > 0) {
141 |                 return readUrls[i].url
142 |             }
143 |             if (readUrls[i].url == currentUrl) {
144 |                 canNextUrl = true
145 |             }
146 |         }
147 |         return ''
148 |     }
149 | 
150 |     function getPrevUnReadUrl(currentUrl: string): string {
151 |         let prevUrl = ''
152 |         for (let i = 0; i < readUrls.length; i++) {
153 |             if (readUrls[i].url == currentUrl) {
154 |                 return prevUrl
155 |             }
156 |             if (readUrls[i].unreadQty && readUrls[i].unreadQty > 0) {
157 |                 prevUrl = readUrls[i].url
158 |             }
159 |         }
160 |         return ''
161 |     }
162 | 
163 |     webfollowApp.getUnReadUrl = function (currentUrl: string, isNext: boolean = true): string {
164 |         if (isNext) {
165 |             return getNextUnReadUrl(currentUrl)
166 |         }
167 |         return getPrevUnReadUrl(currentUrl)
168 |     }
169 | 
170 |     onMounted(async () => {
171 |         refresh()
172 |         watch(unread_item_ids, refreshFeedUnreadQty)
173 |     })
174 | 
175 |     async function deleteFeed(id: number, auotRefresh: boolean = true) {
176 |         await extFeed({ feed_id: id, as: 'remove' })
177 |         await feedRepo.del(id);
178 |         (await itemRepo.listAll(item => item.feedId == id)).forEach(item => {
179 |             itemRepo.del(item.id)
180 |         })
181 |         if (auotRefresh) {
182 |             await refreshBase(async () => { }, async () => { })
183 |         }
184 |         await refresh()
185 |     }
186 | 
187 |     async function updateFeed(id: number, groupId: number) {
188 |         const feed = await feedRepo.get(id)
189 |         if (feed) {
190 |             await extFeed({ feed_id: id, group_id: groupId, feed_url: feed.url, as: 'update' })
191 |             feed.groupId = groupId
192 |             await feedRepo.save(feed)
193 |             await refresh()
194 |         }
195 |     }
196 | 
197 |     return {
198 |         groups,
199 |         subscriptions,
200 |         deleteFeed,
201 |         updateFeed,
202 |         nextUnReadUrl,
203 |         refresh,
204 |     }
205 | })


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
  1 | // stores/counter.js
  2 | import { defineStore, storeToRefs } from 'pinia'
  3 | import { useBaseStore } from './base'
  4 | import { useFeedsStore } from './feeds'
  5 | import { useItemsStore } from './items'
  6 | import { usePlayListStore } from './playlist'
  7 | import { pull as pulllocal, setRanks } from '@/service'
  8 | import { ranks as getRanks } from '@/service/recommend'
  9 | import { clearIndexedDB } from '@/utils/dbHelper'
 10 | import { computed, Ref, watch, ref, onMounted, reactive, Reactive } from 'vue'
 11 | import { PageRoute, TopNav } from './types'
 12 | import { LsItemType } from '@/service/types'
 13 | import { useSettingsStore } from './settings'
 14 | import { itemRepo } from '@/repository'
 15 | 
 16 | type SyncType = '' | 'sync2local'
 17 | 
 18 | export const useAppStore = defineStore('app', () => {
 19 |     const {
 20 |         saved_item_ids, unread_item_ids, read, unread, save, unsave, refresh, clearFailFeedIds
 21 |     } = useBaseStore()
 22 |     const { clear } = usePlayListStore()
 23 |     const { refresh: refreshFeed } = useFeedsStore()
 24 |     const { subscriptions } = storeToRefs(useFeedsStore())
 25 |     const settingsStore = useSettingsStore()
 26 |     const { refreshItems, pageRoute } = useItemsStore()
 27 |     const loading: Ref<boolean> = ref(false)
 28 |     const lastRefeshTime = ref(0);
 29 |     const authInfo: Ref<any> = ref(JSON.parse(localStorage.getItem('auth') || '{"username":"guest"}'))
 30 |     const nav: Reactive<TopNav> = reactive({ title: 'loading' })
 31 |     const readerMode = ref(false)
 32 | 
 33 |     const item7DayIds: Ref<number[]> = ref([])
 34 | 
 35 |     const item7DayTime = ref(0)
 36 | 
 37 |     async function sync(type: SyncType = '') {
 38 |         async function pullData2Local() {
 39 |             return await pulllocal()
 40 |         }
 41 |         const item7DayStart = new Date()
 42 |         item7DayStart.setDate(item7DayStart.getDate() - 1)
 43 |         item7DayTime.value = Math.round(item7DayStart.getTime() / 1000)
 44 |         lastRefeshTime.value = Math.round(new Date().getTime() / 1000)
 45 |         const tmpPullDataFail = settingsStore.general.pullDataFail
 46 |         settingsStore.general.pullDataFail = true
 47 |         settingsStore.saveToLocalStorage()
 48 |         loading.value = true
 49 |         if (type == '') {
 50 |             await refresh(async () => {
 51 |                 await pullData2Local()
 52 |                 await refreshFeed()
 53 |                 setRanks(await getRanks())
 54 |                 await refreshItems()
 55 |             }, async () => {
 56 |                 if (tmpPullDataFail) {
 57 |                     await pullData2Local()
 58 |                 }
 59 |                 setRanks(await getRanks())
 60 |                 await refreshItems()
 61 |             })
 62 |         } else if (type = 'sync2local') {
 63 |             await pullData2Local()
 64 |             await refreshFeed()
 65 |             setRanks(await getRanks())
 66 |         }
 67 |         item7DayIds.value = await fetch7dayItemId(item7DayStart.getTime())
 68 |         settingsStore.general.pullDataFail = false
 69 |         settingsStore.saveToLocalStorage()
 70 |         loading.value = false
 71 |         setTimeout(() => initNav(pageRoute), 1000)
 72 |         lastRefeshTime.value = Math.round(new Date().getTime() / 1000)
 73 |         info('sync end')
 74 | 
 75 |     }
 76 | 
 77 | 
 78 | 
 79 |     async function reloadBuild() {
 80 |         await clearIndexedDB()
 81 |         saved_item_ids.clear()
 82 |         unread_item_ids.clear()
 83 |         clearFailFeedIds()
 84 |         localStorage.removeItem('app-settings')
 85 |         localStorage.removeItem('readfeeds')
 86 |         clear()
 87 |         setTimeout(async () => {
 88 |             authInfo.value = JSON.parse(localStorage.getItem('auth') || '{"username":"guest"}')
 89 |             await refreshFeed()
 90 |             await sync()
 91 |         }, 1000);
 92 | 
 93 |     }
 94 | 
 95 |     const savedQty = computed(() => saved_item_ids.size)
 96 |     const unReadQty = computed(() => unread_item_ids.size)
 97 |     const item7DayUnReadQty = computed(() => item7DayIds.value.filter(id => unread_item_ids.has(id)).length)
 98 |     watch(unReadQty, () => {
 99 |         setTitle(unReadQty.value)
100 |     })
101 |     onMounted(async () => {
102 |         await sync()
103 |         setTitle(unReadQty.value)
104 |         setTimeout(() => {
105 |             watchAll([pageRoute, subscriptions, savedQty], () => initNav(pageRoute))
106 |         }, 1000);
107 |         // 都是为了更新nav
108 |     })
109 | 
110 | 
111 |     function initNav(v: PageRoute) {
112 |         nav.isFailure = false
113 |         switch (v.type) {
114 |             case LsItemType.ALL:
115 |                 nav.title = '全部文章'
116 |                 nav.qty = unReadQty.value
117 |                 return
118 |             case LsItemType.SAVED:
119 |                 nav.title = '稍后阅读'
120 |                 nav.qty = savedQty.value
121 |                 return
122 |             case LsItemType.GROUP:
123 |                 const ga = subscriptions?.value?.filter(g => g.id == v.id)
124 |                 if (ga?.length) {
125 |                     nav.title = ga[0].title
126 |                     nav.qty = ga[0].unreadQty
127 |                 }
128 |                 return
129 |             case LsItemType.ITEMS:
130 |                 if (v.meta) {
131 |                     nav.title = v.meta.title
132 |                     nav.qty = v.meta.qty
133 |                 }
134 |                 return
135 |             case LsItemType.RECOMMEND:
136 |                 nav.title = '今天'
137 |                 nav.qty = item7DayUnReadQty.value
138 |                 return
139 |             case LsItemType.FEED:
140 |                 let fs = subscriptions?.value?.flatMap(g => g.feeds).filter(f => f.id == v.id)
141 |                 if (fs?.length) {
142 |                     nav.title = fs[0].title
143 |                     nav.qty = fs[0].unreadQty
144 |                     nav.isFailure = fs[0].isFailure
145 |                     nav.url = fs[0].url
146 |                 }
147 |                 return
148 |         }
149 |     }
150 | 
151 |     async function fetch7dayItemId(start: number): Promise<number[]> {
152 | 
153 |         return await itemRepo.getIdsInTimeRange(start / 1000, new Date().getTime() / 1000)
154 |     }
155 | 
156 | 
157 |     return { reloadBuild, sync, loading, read, unread, save, unsave, savedQty, unReadQty, item7DayUnReadQty, authInfo, lastRefeshTime, item7DayTime, nav, readerMode }
158 | })
159 | 
160 | 
161 | 
162 | export { useFeedsStore, useItemsStore, usePlayListStore, useSettingsStore, useBaseStore };
163 | 
164 | type wathRef = Ref<any> | Reactive<any>
165 | 
166 | function watchAll(wathers: wathRef[], call: () => void) {
167 |     wathers.forEach(w => {
168 |         // deep
169 |         watch(w, call, { deep: true })
170 |     })
171 | }


--------------------------------------------------------------------------------
/src/store/items.ts:
--------------------------------------------------------------------------------
 1 | // stores/counter.js
 2 | import {
 3 |     defineStore,
 4 | } from 'pinia'
 5 | import {
 6 |     ref,
 7 |     computed,
 8 |     Ref,
 9 |     reactive,
10 |     Reactive,
11 | } from 'vue'
12 | import {
13 |     listItem,
14 |     syncFeedItem,
15 | } from '@/service'
16 | 
17 | import {
18 |     useBaseStore
19 | } from './base'
20 | import { FeedItem, LsItemType } from '@/service/types'
21 | import { PageRoute, PageRouteMeta } from './types'
22 | 
23 | export const useItemsStore = defineStore('items', () => {
24 |     const {
25 |         saved_item_ids,
26 |         unread_item_ids
27 |     } = useBaseStore()
28 |     const data: Ref<FeedItem[] | undefined> = ref([])
29 | 
30 |     const isLast: Ref<boolean | undefined> = ref(false)
31 |     //  用于导航栏变动
32 |     const pageRoute: Reactive<PageRoute> = reactive({ type: LsItemType.ALL, id: 0 })
33 | 
34 |     let cacheLoadParams: any = {}
35 | 
36 |     const items: Ref<FeedItem[]> = computed(() => data.value ? data.value?.map(item => {
37 |         item.isSaved = saved_item_ids.has(item.id)
38 |         item.isRead = !unread_item_ids.has(item.id)
39 |         return item
40 |     }) : [])
41 | 
42 |     async function loadData(id: any, type: LsItemType, page: number = 0, onlyUnread: boolean = false, meta?: PageRouteMeta) {
43 |         cacheLoadParams = { id, type, page, onlyUnread }
44 |         id = type == LsItemType.SAVED ? saved_item_ids : id
45 |         id = type == LsItemType.ALL ? null : id
46 |         pageRoute.id = id
47 |         pageRoute.type = type
48 |         pageRoute.meta = meta
49 |         const r = await listItem(id, type, page, onlyUnread, unread_item_ids)
50 |         if (page == 0) {
51 |             data.value = []
52 |         }
53 |         r?.data.forEach((item) => data.value?.push(item))
54 |         isLast.value = r?.isLast
55 |     }
56 | 
57 |     async function refreshItems() {
58 |         if (Object.keys(cacheLoadParams).length) {
59 |             await loadData(cacheLoadParams.id, cacheLoadParams.type, cacheLoadParams.page, cacheLoadParams.onlyUnread)
60 |         }
61 |     }
62 | 
63 |     async function pullFeedItems(feedId: number) {
64 |         await syncFeedItem(feedId)
65 |     }
66 | 
67 |     return {
68 |         items,
69 |         isLast,
70 |         loadData,
71 |         refreshItems,
72 |         pullFeedItems,
73 |         pageRoute
74 |     }
75 | })


--------------------------------------------------------------------------------
/src/store/playlist.ts:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia'
  2 | import { ref, onBeforeMount, watch } from 'vue'
  3 | 
  4 | interface Play {
  5 |     currentPlaying: Audio | null,
  6 |     list: Audio[]
  7 | }
  8 | 
  9 | export interface Audio {
 10 |     id: number,
 11 |     url: string | undefined | null,
 12 |     thumbil: string,
 13 |     title: string,
 14 |     subtitle: string
 15 |     feedId?: number,
 16 |     currentTime: number,
 17 | }
 18 | 
 19 | export const usePlayListStore = defineStore('playlist', () => {
 20 | 
 21 |     const currentPlaying = ref<Audio | null>(null);
 22 |     const playlist = ref<Audio[]>([])
 23 |     const isPlaying = ref<boolean>(false);
 24 | 
 25 |     let tmpTogglePlaying: any = null
 26 | 
 27 |     watch(() => currentPlaying.value?.currentTime, () => {
 28 |         saveToLocalStorage()
 29 |     })
 30 | 
 31 |     function play(item: Audio) {
 32 |         if (playlist.value.filter(item0 => item0.id == item.id).length == 0) {
 33 |             add(item)
 34 |         }
 35 |         currentPlaying.value = item;
 36 |         saveToLocalStorage()
 37 |         setTimeout(() => {
 38 |             togglePlaying()
 39 |         }, 600);
 40 |     }
 41 | 
 42 |     function setPlaying(playing: boolean) {
 43 |         isPlaying.value = playing;
 44 |     }
 45 | 
 46 |     function add(item: Audio) {
 47 |         playlist.value.push(item)
 48 |         saveToLocalStorage()
 49 |     }
 50 | 
 51 |     function remove(itemId: number) {
 52 |         playlist.value = playlist.value.filter(item => item.id !== itemId)
 53 |         saveToLocalStorage()
 54 |     }
 55 | 
 56 |     function saveToLocalStorage() {
 57 |         const playinfo: Play = {
 58 |             currentPlaying: currentPlaying.value,
 59 |             list: playlist.value,
 60 |         }
 61 |         localStorage.setItem('playlist', JSON.stringify(playinfo))
 62 |     }
 63 | 
 64 |     function loadFromLocalStorage() {
 65 |         const storedPlayinfo = localStorage.getItem('playlist');
 66 |         if (storedPlayinfo) {
 67 |             const playinfo: Play = JSON.parse(storedPlayinfo);
 68 |             currentPlaying.value = playinfo.currentPlaying
 69 |             playlist.value = playinfo.list || []
 70 |         } else {
 71 |             currentPlaying.value = null
 72 |             playlist.value = []
 73 |         }
 74 |     }
 75 | 
 76 |     function setTogglePlaying(f: any) {
 77 |         tmpTogglePlaying = f
 78 |     }
 79 | 
 80 |     function togglePlaying() {
 81 | 
 82 |         if (tmpTogglePlaying) {
 83 |             tmpTogglePlaying()
 84 |         }
 85 |     }
 86 | 
 87 |     function setCurrentTime(currentTime: number) {
 88 |         if (currentPlaying.value) {
 89 |             currentPlaying.value.currentTime = currentTime
 90 |         }
 91 |     }
 92 | 
 93 |     onBeforeMount(() => {
 94 |         loadFromLocalStorage()
 95 |     })
 96 | 
 97 |     function clear() {
 98 |         localStorage.removeItem('playlist')
 99 |         setTimeout(() => {
100 |             loadFromLocalStorage()
101 |         }, 300);
102 |     }
103 | 
104 |     return {
105 |         playlist,
106 |         currentPlaying,
107 |         isPlaying,
108 |         remove,
109 |         play,
110 |         setPlaying,
111 |         togglePlaying,
112 |         setTogglePlaying,
113 |         setCurrentTime,
114 |         clear
115 |     }
116 | })
117 | 


--------------------------------------------------------------------------------
/src/store/settings.ts:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia'
  2 | import { computed, onBeforeMount, onMounted, ref, } from 'vue'
  3 | import { ViewMode } from './types'
  4 | 
  5 | interface GeneralSettings {
  6 |     startPage: 'welcome' | 'all' | 'next' | 'firstfolder' | 'explore'
  7 |     defaultView: ViewMode
  8 |     hideReadArticles: boolean
  9 |     autoRefresh: boolean
 10 |     refreshInterval: number
 11 |     pullDataFail: boolean
 12 | }
 13 | 
 14 | interface AppearanceSettings {
 15 |     themeMode: 'light' | 'dark' | 'system'
 16 |     themeColor: string
 17 |     fontFamily: string
 18 |     codeFont: string
 19 |     fontSize: number
 20 |     density: 'comfortable' | 'compact' | 'default'
 21 |     // 减少动画
 22 |     lessAnimation: boolean,
 23 |     hideSidebar: boolean
 24 |     sidebarWidth: number
 25 | }
 26 | 
 27 | interface IntegratedSettings {
 28 |     apiUrl: string;
 29 |     apiKey: string;
 30 |     summaryPrompt: string;
 31 |     isApiValid?: boolean;
 32 |     lastTestTime?: string;
 33 |     selectedModel?: string;
 34 | }
 35 | 
 36 | interface FilterItem {
 37 |     id: string;
 38 |     name: string;
 39 |     keywords: KeywordWeight[];
 40 |     createTime: number;
 41 | }
 42 | 
 43 | interface KeywordWeight {
 44 |     keyword: string;
 45 |     weight: number;
 46 | }
 47 | 
 48 | interface AutomationSettings {
 49 |     filters: FilterItem[];
 50 | }
 51 | 
 52 | interface SettingsState {
 53 |     general: GeneralSettings
 54 |     appearance: AppearanceSettings
 55 |     integrated: IntegratedSettings
 56 |     automation: AutomationSettings
 57 | }
 58 | 
 59 | export const useSettingsStore = defineStore('settings', () => {
 60 |     const general = ref<GeneralSettings>({
 61 |         startPage: 'welcome',
 62 |         defaultView: 'auto',
 63 |         hideReadArticles: true,
 64 |         autoRefresh: false,
 65 |         refreshInterval: 30 * 60,
 66 |         pullDataFail: false
 67 |     })
 68 | 
 69 |     const appearance = ref<AppearanceSettings>({
 70 |         themeMode: 'system',
 71 |         themeColor: '39, 174, 96',
 72 |         fontFamily: 'system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, SN Pro',
 73 |         codeFont: 'mono',
 74 |         fontSize: 14,
 75 |         density: 'default',
 76 |         lessAnimation: false,
 77 |         hideSidebar: false,
 78 |         sidebarWidth: 256
 79 |     })
 80 | 
 81 |     const integrated = ref<IntegratedSettings>({
 82 |         apiUrl: 'https://api.openai.com/v1',
 83 |         apiKey: '',
 84 |         summaryPrompt: '请用简洁的语言总结这篇文章的主要内容，突出核心观点和关键信息。',
 85 |         isApiValid: false,
 86 |         lastTestTime: '',
 87 |         selectedModel: 'gpt-4o-mini'
 88 |     })
 89 | 
 90 |     const automation = ref<AutomationSettings>({
 91 |         filters: []
 92 |     })
 93 | 
 94 |     function updateCSSVariables() {
 95 |         const root = document.documentElement
 96 |         const lineHeights = {
 97 |             'comfortable': '1.5rem',
 98 |             'compact': '1rem',
 99 |             'default': '2rem'
100 |         }
101 |         // 更新字体相关变量
102 |         root.style.setProperty('--font-family', appearance.value.fontFamily)
103 |         root.style.setProperty('--code-font', appearance.value.codeFont)
104 |         root.style.setProperty('--font-size', `${appearance.value.fontSize}px`)
105 |         root.style.setProperty('--line-height', `${lineHeights[appearance.value.density]}`)
106 | 
107 |         // 更新主题颜色
108 |         root.style.setProperty('--theme-color', appearance.value.themeColor)
109 |         const metaTheme: any = document.querySelector('meta[name=theme-color]')
110 |         if (metaTheme) {
111 |             if (appearance.value.themeMode == 'dark' || window.matchMedia("(prefers-color-scheme: dark)").matches) {
112 |                 metaTheme.content = '#292929'
113 |             } else {
114 |                 metaTheme.content = '#fff'
115 |             }
116 |         }
117 | 
118 |     }
119 | 
120 |     function saveToLocalStorage() {
121 |         localStorage.setItem('app-settings', JSON.stringify({
122 |             general: general.value,
123 |             appearance: appearance.value,
124 |             integrated: integrated.value,
125 |             automation: automation.value
126 |         }))
127 |         updateCSSVariables()
128 |     }
129 | 
130 |     function loadFromLocalStorage() {
131 |         const settings = localStorage.getItem('app-settings')
132 |         if (settings) {
133 |             const parsed: SettingsState = JSON.parse(settings)
134 |             general.value = { ...general.value, ...parsed.general }
135 |             appearance.value = { ...appearance.value, ...parsed.appearance }
136 |             integrated.value = { ...integrated.value, ...parsed.integrated }
137 |             automation.value = { ...automation.value, ...parsed.automation }
138 |         }
139 |     }
140 | 
141 |     function resetGeneralSettings() {
142 |         general.value = {
143 |             startPage: 'welcome',
144 |             defaultView: 'auto',
145 |             hideReadArticles: true,
146 |             autoRefresh: false,
147 |             refreshInterval: 30 * 60,
148 |             pullDataFail: false
149 |         }
150 |         saveToLocalStorage()
151 |     }
152 | 
153 |     function resetAppearanceSettings() {
154 |         appearance.value = {
155 |             themeMode: 'system',
156 |             themeColor: '39, 174, 96',
157 |             fontFamily: 'system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, SN Pro',
158 |             codeFont: 'mono',
159 |             fontSize: 14,
160 |             density: 'default',
161 |             lessAnimation: false,
162 |             hideSidebar: false,
163 |             sidebarWidth: 256
164 |         }
165 |         saveToLocalStorage()
166 |     }
167 | 
168 |     function resetIntegratedSettings() {
169 |         integrated.value = {
170 |             apiUrl: 'https://api.openai.com/v1',
171 |             apiKey: '',
172 |             summaryPrompt: '请用简洁的语言总结这篇文章的主要内容，突出核心观点和关键信息。',
173 |             isApiValid: false,
174 |             lastTestTime: '',
175 |             selectedModel: 'gpt-4o-mini'
176 |         }
177 |         saveToLocalStorage()
178 |     }
179 | 
180 |     function resetAutomationSettings() {
181 |         automation.value = {
182 |             filters: []
183 |         }
184 |         saveToLocalStorage()
185 |     }
186 | 
187 |     function getFilter(filterId: string): FilterItem | undefined {
188 |         return automation.value.filters.find(f => f.id === filterId);
189 |     }
190 | 
191 |     onBeforeMount(() => {
192 |         loadFromLocalStorage()
193 |     })
194 | 
195 |     onMounted(() => {
196 |         updateCSSVariables()
197 |     })
198 | 
199 |     const proxyIntegrated = computed(() => ({
200 |         ...integrated.value,
201 |         apiUrl: integrated.value.apiKey ? integrated.value.apiUrl : 'https://oneapi.jisuai.cn/v1',
202 |         apiKey: integrated.value.apiKey ? integrated.value.apiKey : 'sk-z6Qddv96AOIsjwGIL5ivKrfxHjojBOkl6z2MvKOgFbooydV7',
203 |         selectedModel: integrated.value.apiKey ? integrated.value.selectedModel : 'deepseek-chat',
204 |         isApiValid: integrated.value.apiKey ? integrated.value.isApiValid : true,
205 |     }))
206 | 
207 |     return {
208 |         general,
209 |         appearance,
210 |         integrated,
211 |         proxyIntegrated,
212 |         automation,
213 |         getFilter,
214 |         saveToLocalStorage,
215 |         resetGeneralSettings,
216 |         resetAppearanceSettings,
217 |         resetIntegratedSettings,
218 |         resetAutomationSettings
219 |     }
220 | })
221 | 


--------------------------------------------------------------------------------
/src/store/types.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     LsItemType,
 3 | } from '@/service/types'
 4 | 
 5 | export interface TopNav {
 6 |     title?: string,
 7 |     qty?: number,
 8 |     isFailure?: boolean
 9 |     url?: string
10 | }
11 | 
12 | export interface PageRoute {
13 |     id?: number,
14 |     type: LsItemType,
15 |     meta?: PageRouteMeta
16 | }
17 | 
18 | export interface PageRouteMeta {
19 |     title?: string
20 |     qty?: number
21 |     isFailure?: boolean
22 |     url?: string
23 | }
24 | 
25 | export type ViewMode = 'text' | 'card' | 'magazine' | 'column' | 'list' | 'auto'


--------------------------------------------------------------------------------
/src/types/colorthief.d.ts:
--------------------------------------------------------------------------------
1 | declare module "colorthief" {
2 |     export default class ColorThief {
3 |         getColor(img: HTMLImageElement): [number, number, number];
4 |         getPalette(img: HTMLImageElement, colorCount?: number): [number, number, number][];
5 |     }
6 | } 


--------------------------------------------------------------------------------
/src/utils/dateFormat.ts:
--------------------------------------------------------------------------------
 1 | export function formatDate(dateString: string): string {
 2 |     if (!dateString) return '';
 3 | 
 4 |     const date = new Date(dateString);
 5 |     return new Intl.DateTimeFormat('zh-CN', {
 6 |         month: '2-digit',
 7 |         day: '2-digit',
 8 |         hour: '2-digit',
 9 |         minute: '2-digit',
10 |     }).format(date);
11 | }


--------------------------------------------------------------------------------
/src/utils/debound.ts:
--------------------------------------------------------------------------------
 1 | export function debound<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
 2 |     let timeout: number | undefined;
 3 | 
 4 |     return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
 5 |         const context = this;
 6 | 
 7 |         // 清除之前的计时器
 8 |         if (timeout !== undefined) {
 9 |             clearTimeout(timeout);
10 |         }
11 | 
12 |         // 重新设置计时器
13 |         timeout = window.setTimeout(() => {
14 |             func.apply(context, args);
15 |         }, wait);
16 |     };
17 | }


--------------------------------------------------------------------------------
/src/utils/http.ts:
--------------------------------------------------------------------------------
 1 | // src/api/request.js
 2 | 
 3 | const key: string = '352E55075E6B8487D6BC55B6463B9141'
 4 | 
 5 | // const url: string = localStorage.getItem('url') || 'https://api.webfollow.cc/plugins/fever/'
 6 | 
 7 | export async function request(params: any, options: any = {
 8 |     method: "POST",
 9 | }): Promise<any> {
10 |     const api_key = JSON.parse(localStorage.getItem('auth') || '{}')?.token || key
11 |     const url = localStorage.getItem('url') || 'https://api.webfollow.cc/plugins/fever/'
12 |     let fullUrl = url;
13 |     const reqParams = Object.assign({
14 |         api_key,
15 |     }, params)
16 |     if (url.indexOf('fever.php') > 0) {
17 |         options = Object.assign({}, options, { body: param2From(reqParams) })
18 |     } else {
19 |         const paramsStr = params2str(reqParams);
20 |         fullUrl = `${url}?${paramsStr}`;
21 |     }
22 |     try {
23 |         const response = await fetch(fullUrl, options)
24 |         if (!response.ok) {
25 |             throw new Error('Network response was not ok');
26 |         } else {
27 |             return response.json()
28 |         }
29 |     } catch (e) {
30 |         throw e;
31 |     }
32 | 
33 | }
34 | 
35 | function params2str(params: object): string {
36 |     return Object.entries(params)
37 |         .filter(([_, value]) => value)
38 |         .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
39 |         .join('&');
40 | }
41 | 
42 | function param2From(params: object): FormData {
43 |     const formData = new FormData();
44 |     Object.entries(params)
45 |         .filter(([_, value]) => value)
46 |         .forEach(([key, value]) => formData.append(key, value));
47 |     return formData
48 | }


--------------------------------------------------------------------------------
/src/utils/mdUtils.ts:
--------------------------------------------------------------------------------
 1 | import TurndownService from "turndown";
 2 | import { marked } from 'marked';
 3 | 
 4 | const turndownService = new TurndownService();
 5 | 
 6 | export function html2md(html: string): string {
 7 |     return turndownService.turndown(html);
 8 | }
 9 | 
10 | export function md2html(md: string): any {
11 |     return marked(md, undefined);
12 | }


--------------------------------------------------------------------------------
/src/utils/scroll.ts:
--------------------------------------------------------------------------------
 1 | import { onMounted, onUnmounted, Ref, ref } from "vue";
 2 | 
 3 | 
 4 | export function useScroll(el: any) {
 5 |     const scrollTop: Ref<number> = ref(0)
 6 |     const scroll = (e: any) => {
 7 |         scrollTop.value = e.target.scrollTop
 8 |     }
 9 |     onMounted(() => {
10 |         el.value.addEventListener('scroll', scroll);
11 |     })
12 |     onUnmounted(() => {
13 |         if (el.value) {
14 |             el.value.removeEventListener('scroll', scroll);
15 |         }
16 |     })
17 |     function scrollTo(top: number) {
18 |         if (el.value) {
19 |             el.value.scrollTo({
20 |                 top: top,
21 |                 behavior: 'smooth'
22 |             });
23 |         }
24 |     }
25 |     return { scrollTop, scrollTo }
26 | }


--------------------------------------------------------------------------------
/src/utils/scrollListener.ts:
--------------------------------------------------------------------------------
 1 | import { onMounted, onUnmounted, ref, Ref, nextTick } from "vue";
 2 | 
 3 | import { debound } from './debound'
 4 | 
 5 | export function useScroll(el: any): any {
 6 |     let observer: MutationObserver
 7 |     onMounted(() => {
 8 |         nextTick(() => {
 9 |             el.value?.addEventListener('scroll', handleScroll);
10 |         })
11 | 
12 |         observer = new MutationObserver(debound(() => {
13 |             isBottom.value = false
14 |         }, 300));
15 |         const config = { childList: true, subtree: true };
16 |         if (el.value) {
17 |             observer.observe(el.value, config);
18 |         }
19 |     })
20 |     onUnmounted(() => {
21 |         nextTick(() => {
22 |             observer?.disconnect();
23 |             el.value?.removeEventListener('scroll', handleScroll);
24 |         })
25 |     })
26 | 
27 |     let isBottom: Ref<boolean> = ref(false)
28 | 
29 |     const handleScroll = debound(() => {
30 |         const container = el.value;
31 |         let scrollTop = container.scrollTop;
32 | 
33 |         // 容器的总内容高度
34 |         const scrollHeight = container.scrollHeight;
35 |         // 容器的可视高度
36 |         const clientHeight = container.clientHeight;
37 | 
38 |         // 判断是否滚动到底部
39 |         if (scrollTop + clientHeight >= scrollHeight - 300) { // 300 像素缓冲
40 |             isBottom.value = true;
41 |         } else {
42 |             isBottom.value = false;
43 |         }
44 |     }, 300)
45 | 
46 |     return { isBottom }
47 | }


--------------------------------------------------------------------------------
/src/utils/useCalView.ts:
--------------------------------------------------------------------------------
 1 | import { ViewMode } from '@/store/types'
 2 | import { FeedItem, ItemType } from '@/service/types'
 3 | import { Ref, computed } from 'vue'
 4 | 
 5 | /**
 6 |  * 计算视图名称
 7 |  * @param view 视图类型
 8 |  * @param itemsType 项目类型
 9 |  * @returns 视图名称
10 |  */
11 | function useCalView(view: Ref<ViewMode>, itemsType: Ref<ItemType>): { viewMode: Ref<ViewMode> } {
12 |     const viewMode: Ref<ViewMode> = computed(() => {
13 |         return view.value == "auto"
14 |             ? itemsType.value == ItemType.VIDEO
15 |                 ? "card"
16 |                 : itemsType.value == ItemType.IMAGE
17 |                     ? "list"
18 |                     : itemsType.value == ItemType.PODCAST
19 |                         ? "column"
20 |                         : "column"
21 |             : view.value;
22 |     });
23 |     return { viewMode }
24 | }
25 | 
26 | /**
27 |  * 计算entry类型
28 |  * @param items entry列表
29 |  * @returns entry类型
30 |  */
31 | function useCalItemType(items: Ref<FeedItem[]>): { itemsType: Ref<ItemType> } {
32 |     const itemsType: Ref<ItemType> = computed(() => {
33 |         const counts = items.value.slice(0, 50).reduce((acc: any, item: FeedItem) => {
34 |             acc[item.type] = (acc[item.type] || 0) + 1;
35 |             return acc;
36 |         }, {});
37 |         const type = items.value.length > 0 ? Object.entries(counts).sort((a: any, b: any) => b[1] - a[1])[0][0] : 'BASIC';
38 |         return type == "IMAGE" ? ItemType.IMAGE : type == "VIDEO" ? ItemType.VIDEO : type == "PODCAST" ? ItemType.PODCAST : ItemType.BASIC;
39 |     });
40 |     return { itemsType }
41 | }
42 | 
43 | /**
44 |  * 计算视图名称
45 |  * @param view 视图类型
46 |  * @param items entry列表
47 |  * @returns 视图名称
48 |  */
49 | export function useCalViewMode(view: Ref<ViewMode>, items: Ref<FeedItem[]>): { viewMode: Ref<ViewMode>, itemsType: Ref<ItemType> } {
50 |     const { itemsType } = useCalItemType(items);
51 |     const { viewMode } = useCalView(view, itemsType);
52 |     return { viewMode, itemsType }
53 | }


--------------------------------------------------------------------------------
/src/utils/useElResize.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     onMounted,
 3 |     onUnmounted,
 4 |     Ref,
 5 |     ref
 6 | } from 'vue'
 7 | 
 8 | /**
 9 |  * 监控元素宽度变化的 Hook
10 |  * @param {elementRef} 
11 |  * @returns {{
12 |  *   width: Ref<number>,
13 |  *   height: Ref<number>,
14 |  * }}
15 |  */
16 | export function useElResize(elementRef: Ref<HTMLElement> | HTMLElement | (() => HTMLElement)) {
17 |     const width = ref(0)
18 |     const height = ref(0)
19 |     let observer: ResizeObserver | null = null
20 | 
21 |     const handleResize = (entries: ResizeObserverEntry[]) => {
22 |         const entry = entries[0]
23 |         const {
24 |             width: newWidth,
25 |             height: newHeight
26 |         } = entry.contentRect
27 | 
28 |         width.value = Math.round(newWidth)
29 |         height.value = Math.round(newHeight)
30 | 
31 |     }
32 | 
33 |     const watchElement = (el: Element) => {
34 |         if (!el) return
35 | 
36 |         // 如果已经在观察一个元素，先停止观察
37 |         if (observer && el) {
38 |             observer.unobserve(el)
39 |         }
40 | 
41 | 
42 |         // 创建新的观察器
43 |         if (!observer) {
44 |             observer = new ResizeObserver(handleResize)
45 |         }
46 | 
47 |         // 开始观察新元素
48 |         observer.observe(el)
49 |     }
50 | 
51 |     onMounted(() => {
52 |         const el = elementRef instanceof HTMLElement ? elementRef : elementRef instanceof Function ? elementRef() : elementRef.value
53 |         watchElement(el)
54 |     });
55 | 
56 |     onUnmounted(() => {
57 |         if (observer) {
58 |             observer.disconnect()
59 |             observer = null
60 |         }
61 |     })
62 | 
63 |     return {
64 |         width,
65 |         height,
66 |     }
67 | }


--------------------------------------------------------------------------------
/src/utils/useItem.ts:
--------------------------------------------------------------------------------
 1 | import { FeedItem } from "@/service/types";
 2 | import { useBaseStore } from "@/store";
 3 | import { computed, ref } from "vue";
 4 | 
 5 | export const useItem = () => {
 6 |     const item = ref<FeedItem | undefined>();
 7 | 
 8 |     const { saved_item_ids, unread_item_ids } = useBaseStore()
 9 | 
10 |     const setItem = (item0: FeedItem) => {
11 |         item.value = item0;
12 |     };
13 | 
14 |     const currentItem = computed(() => (
15 |         item.value ? { ...item.value, isRead: !isUnread.value, isSaved: isSaved.value } : undefined
16 |     ));
17 | 
18 |     const isSaved = computed(() => saved_item_ids.has(item.value?.id ?? 0));
19 |     const isUnread = computed(() => unread_item_ids.has(item.value?.id ?? 0));
20 | 
21 |     return {
22 |         setItem,
23 |         currentItem
24 |     };
25 | };
26 | 


--------------------------------------------------------------------------------
/src/utils/useSideChapter.ts:
--------------------------------------------------------------------------------
  1 | import { onMounted, onUnmounted, Ref, watch } from "vue";
  2 | import { md2html } from "./mdUtils";
  3 | 
  4 | export function useSideChapter(markdownContent: Ref<string>, el: any, chapterEl: any) {
  5 | 
  6 |     function changeCapterEl() {
  7 |         const lines = markdownContent.value.split('\n');
  8 |         const levels: number[] = lines.map(line => {
  9 |             if (line.match(/^#+\s/)) {
 10 |                 const g = line.match(/^#+/)
 11 |                 return g ? g[0].length : 1
 12 |             } else {
 13 |                 return 6
 14 |             }
 15 |         })
 16 |         let topLevel = 1
 17 |         // console.log('topLevel', topLevel)
 18 |         if (levels) {
 19 |             topLevel = Math.min(...levels)
 20 |         }
 21 |         const chapters = lines.reduce((acc: string[], line, index, array) => {
 22 |             if (line.match(/^#+\s/)) {
 23 |                 // 处理 #、##、### 等格式的标题
 24 |                 const g = line.match(/^#+/)
 25 |                 const level = g ? g[0].length : 1;
 26 |                 const title = line.replace(/^#+\s/, '');
 27 |                 acc.push(`<li style="margin-left: ${level - topLevel}rem;" class="toc-link " data-id="chapter${acc.length}">
 28 |                             ${getText(title)}
 29 |                           </li>`);
 30 |             } else if (line.match(/^-{2,}$/) && index > 0 && !array[index - 1].match(/^#+\s/)) {
 31 |                 // 处理 --- 格式的标题（前一行为标题文本）
 32 |                 const title = array[index - 1];
 33 |                 acc.push(`<li style="margin-left: 0em;" class="toc-link " data-id="chapter${acc.length}">
 34 |                             ${getText(title)}
 35 |                           </li>`);
 36 |             }
 37 |             return acc;
 38 |         }, []).join('');
 39 | 
 40 |         chapterContainer = chapterEl.value()
 41 |         if (chapters) {
 42 |             if (chapterContainer) {
 43 |                 chapterContainer.innerHTML = ''
 44 |                 chapterContainer.style['display'] = 'block'
 45 |             }
 46 |             setTimeout(() => {
 47 |                 container = el.value
 48 |                 chapterContainer.innerHTML = '<ul>' + chapters + '</ul>'
 49 |                 // 为每个章节添加 id
 50 |                 const headings = container.querySelectorAll(' h1, h2, h3');
 51 |                 headings.forEach((heading: any, index: number) => {
 52 |                     heading.id = `chapter${index}`;
 53 |                 });
 54 |                 // 点击链接时平滑滚动到对应章节
 55 |                 chapterContainer.querySelectorAll('.toc-link').forEach((link: Element) => {
 56 |                     link.addEventListener('click', toChapter);
 57 |                 });
 58 |                 scroll = () => {
 59 |                     const lis = chapterContainer.querySelectorAll('.toc-link')
 60 |                     lis.forEach((link: any) => link.classList.remove('active'));
 61 |                     let scrollPosition = container.scrollTop + 80;
 62 |                     headings.forEach((heading: any, index: number) => {
 63 |                         const headingTop = heading.offsetTop;
 64 |                         const headingEnd = index == headings.length - 1 ? container.scrollHeight : headings[index + 1].offsetTop;
 65 |                         if (scrollPosition >= headingTop && scrollPosition < headingEnd) {
 66 |                             if (lis.length > index) {
 67 |                                 lis[index].classList.add('active');
 68 |                             }
 69 |                         }
 70 |                     });
 71 |                 }
 72 | 
 73 |             }, 300);
 74 |         } else {
 75 |             if (chapterContainer) {
 76 |                 chapterContainer.style['display'] = 'none'
 77 |                 chapterContainer.innerHTML = ''
 78 |             }
 79 |         }
 80 |         if (scroll) {
 81 |             container.removeEventListener('scroll', scroll);
 82 |         }
 83 |         setTimeout(() => {
 84 |             if (scroll) {
 85 |                 container.addEventListener('scroll', scroll);
 86 |             }
 87 |         }, 500)
 88 |     }
 89 | 
 90 | 
 91 |     function toChapter(this: any, e: any) {
 92 |         e.preventDefault();
 93 |         const targetId = '#' + (this as HTMLAnchorElement).getAttribute('data-id');
 94 |         if (targetId) {
 95 |             const targetElement = container.querySelector(targetId);
 96 |             if (targetElement) {
 97 |                 const targetElementHeight = targetElement.offsetTop;
 98 |                 container.scrollTo({
 99 |                     top: targetElementHeight - 70,
100 |                     behavior: 'smooth'
101 |                 });
102 |             }
103 |             setTimeout(() => {
104 |                 chapterContainer.querySelectorAll('.toc-link').forEach((link: any) => link.classList.remove('active'));
105 |                 this.classList.add('active');
106 |             }, 1000);
107 | 
108 |         }
109 |     }
110 | 
111 |     let scroll: any = null
112 |     let container: any = null
113 |     let chapterContainer: any = null
114 | 
115 |     onMounted(() => {
116 |         watch(markdownContent, () => {
117 |             chapterContainer?.querySelectorAll('.toc-link').forEach((link: Element) => {
118 |                 link.removeEventListener('click', toChapter);
119 |             });
120 |             if (chapterContainer) {
121 |                 changeCapterEl()
122 |             }
123 |         })
124 |         changeCapterEl()
125 |     })
126 | 
127 |     onUnmounted(() => {
128 |         if (scroll) {
129 |             container.removeEventListener('scroll', scroll)
130 |         }
131 |         chapterContainer?.querySelectorAll('.toc-link').forEach((link: Element) => {
132 |             link.removeEventListener('click', toChapter);
133 |         });
134 |     })
135 | }
136 | 
137 | 
138 | function getText(mdstr: string): string {
139 |     const tempDiv = document.createElement('div');
140 |     tempDiv.innerHTML = md2html(mdstr);
141 |     const els = tempDiv.querySelector('p')?.childNodes
142 |     return Array.from(els || []).map((el: any) => el.tagName?.toLowerCase() == 'img' ? el.outerHTML : el.textContent).join(' ')
143 | }


--------------------------------------------------------------------------------
/src/views/Combo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page">
 3 |     <h3>选择你的套餐</h3>
 4 |     <v-row class="mt-2">
 5 |       <v-col v-for="(p, index) in packages" :key="index">
 6 |         <v-card class="package">
 7 |           <v-card-title>{{ p.name }}</v-card-title>
 8 |           <v-card-subtitle>￥{{ p.price }}元</v-card-subtitle>
 9 |           <v-card-text>
10 |             <ol>
11 |               <li v-for="item in p.lines" v-text="item"></li>
12 |             </ol>
13 |           </v-card-text>
14 |           <v-card-text>
15 |             <v-btn
16 |               size="small"
17 |               color="primary"
18 |               href="https://zhidayingxiao.cn/to/06g6yb"
19 |               >选择此套餐</v-btn
20 |             >
21 |           </v-card-text>
22 |         </v-card>
23 |       </v-col>
24 |     </v-row>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |   data() {
31 |     return {
32 |       packages: [
33 |         {
34 |           name: "Pro一月",
35 |           lines: [
36 |             "最高300个订阅",
37 |             "支持离线阅读",
38 |             "支持app阅读器",
39 |             "100个AI搜索过滤项",
40 |             "赠送2元AI Key",
41 |           ],
42 |           price: 8,
43 |         },
44 |         {
45 |           name: "Pro一年",
46 |           lines: [
47 |             "最高1000个订阅",
48 |             "支持离线阅读",
49 |             "支持app阅读器",
50 |             "100个AI搜索过滤项",
51 |             "赠送10元AI Key",
52 |           ],
53 |           price: 60,
54 |         },
55 |       ],
56 |     };
57 |   },
58 | };
59 | </script>
60 | 
61 | <style scoped>
62 | .package {
63 |   margin: 10px 0;
64 | }
65 | 
66 | .package ol {
67 |   padding-left: 20px; /* 左侧内边距 */
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/src/views/Discovery.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-container max-width="800">
  4 |       <div class="text-center my-12">
  5 |         <div class="text-h3">添加订阅源</div>
  6 |         <p class="my-6 text-subtitle-2">看什么您说了算</p>
  7 |       </div>
  8 |       <v-tabs v-model="tab" align-tabs="center">
  9 |         <v-tab value="rss">导入RSS</v-tab>
 10 |         <v-tab value="ompl">导入OPML</v-tab>
 11 |       </v-tabs>
 12 | 
 13 |       <v-card-text class="mt-6">
 14 |         <v-tabs-window v-model="tab">
 15 |           <v-tabs-window-item value="rss">
 16 |             <v-text-field
 17 |               v-model="value"
 18 |               label="RSS网址"
 19 |               required
 20 |               @keyup.enter="add"
 21 |             ></v-text-field>
 22 |             <div class="text-center mx-auto">
 23 |               <v-btn color="primary" :loading="loading" @click="add">
 24 |                 添加
 25 |               </v-btn>
 26 |             </div>
 27 |           </v-tabs-window-item>
 28 | 
 29 |           <v-tabs-window-item value="ompl">
 30 |             <v-file-input
 31 |               v-model="omplFile"
 32 |               label="选择OPML文件"
 33 |               accept=".opml"
 34 |               @change="importOpml"
 35 |               required
 36 |             ></v-file-input>
 37 |             <div class="text-center mx-auto">
 38 |               <v-btn color="primary" :loading="loading" @click="importOpml">
 39 |                 导入OPML
 40 |               </v-btn>
 41 |             </div>
 42 |           </v-tabs-window-item>
 43 |         </v-tabs-window>
 44 |       </v-card-text>
 45 |       <v-btn variant="text" href="https://toprss.webfollow.cc/"
 46 |         >看看别人都订阅什么</v-btn
 47 |       ></v-container
 48 |     >
 49 |     <h3 class="text-center ma-8">订阅列表</h3>
 50 |     <rss-list />
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script setup lang="ts">
 55 | import { ref } from "vue";
 56 | import { extFeed } from "@/api";
 57 | import { useAppStore } from "@/store";
 58 | 
 59 | import RssList from "@/views/discover/RssList.vue";
 60 | const appStore = useAppStore();
 61 | const loading = ref(false);
 62 | const value = ref("");
 63 | const omplFile = ref(null); // 用于存储OMPL文件
 64 | const tab = ref("rss"); // 默认选中导入RSS选项卡
 65 | 
 66 | async function add() {
 67 |   try {
 68 |     loading.value = true;
 69 |     await extFeed({ group_id: 0, feed_url: value.value, as: "create" });
 70 |     value.value = "";
 71 |     setTimeout(() => {
 72 |       appStore.sync();
 73 |     }, 3000);
 74 |   } catch (e) {
 75 |     alert("添加失败，请检查源是添加或是否可访问");
 76 |   }
 77 |   loading.value = false;
 78 | }
 79 | 
 80 | async function importOpml() {
 81 |   if (!omplFile.value) {
 82 |     alert("请先选择OMPL文件");
 83 |     return;
 84 |   }
 85 | 
 86 |   try {
 87 |     loading.value = true;
 88 |     const formData = new FormData();
 89 |     formData.append("file", omplFile.value);
 90 |     await extFeed(
 91 |       { group_id: 0, as: "import_opml" },
 92 |       {
 93 |         body: formData,
 94 |         method: "POST",
 95 |       }
 96 |     );
 97 |     omplFile.value = null; // 清空文件输入
 98 |     setTimeout(() => {
 99 |       appStore.sync("sync2local");
100 |     }, 2000);
101 |   } catch (e) {
102 |     // console.log(e);
103 |     alert("导入失败，请检查OMPL文件是否正确");
104 |   }
105 |   loading.value = false;
106 | }
107 | </script>
108 | 
109 | <style scoped>
110 | .v-card {
111 |   margin-top: 20vh;
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/views/Download.vue:
--------------------------------------------------------------------------------
  1 | <!-- src/views/Download.vue -->
  2 | <template>
  3 |   <div class="page">
  4 |     <h3>下载APP</h3>
  5 |     <!-- <v-card class="mt-5">
  6 |       <v-card-title>
  7 |         <v-icon size="small"> mdi-account-box-outline</v-icon>
  8 |         升级会员
  9 |       </v-card-title>
 10 |       <v-card-text>
 11 |         <div class="line">拥有自己独享的账号</div>
 12 |         <div class="line">支持离线使用</div>
 13 |         <div class="line">跨平台，多客户端</div>
 14 |         <div class="line">网页端支持图文混排</div>
 15 |         <div class="line">网页端支持章节导航</div>
 16 |         <div class="line">一年仅需36元</div>
 17 |         <a
 18 |           target="_blank"
 19 |           href="https://item.taobao.com/item.htm?ft=t&id=847155285226&skuId=5797611030189&spm=a21dvs.23580594.0.0.1d292c1bqz25TM"
 20 |           class="download-link v-btn v-btn--density-default"
 21 |           >开通会员</a
 22 |         >
 23 |       </v-card-text>
 24 |     </v-card> -->
 25 |     <v-card class="mt-5">
 26 |       <v-card-title>
 27 |         <v-icon size="small"> mdi-import</v-icon>
 28 |         免费试用
 29 |       </v-card-title>
 30 |       <v-card-text>
 31 |         <div class="line">
 32 |           支持fever的应用填入网址: https://api.webfollow.cc/plugins/fever/
 33 |         </div>
 34 |         <!-- <div class="line">
 35 |           支持googleReader的应用填入网址:
 36 |           https://api.webfollow.cc/plugins/greader/
 37 |         </div> -->
 38 |         <div class="line">测试账号 guest/123456</div>
 39 |         <div class="line">
 40 |           该账号仅做测试使用，请勿当作正式账号使用，会不定期重置订阅，正式使用请
 41 |           <router-link to="/combo">购买会员</router-link>
 42 |         </div>
 43 |       </v-card-text>
 44 |     </v-card>
 45 |     <v-card class="mt-5">
 46 |       <v-card-title>
 47 |         <v-icon size="small"> mdi-download-box-outline</v-icon>
 48 |         客户端下载
 49 |       </v-card-title>
 50 |       <v-card-text>
 51 |         <v-expansion-panels flat>
 52 |           <v-expansion-panel
 53 |             v-for="item in items"
 54 |             :key="item.title"
 55 |             :title="item.title"
 56 |           >
 57 |             <v-expansion-panel-text>
 58 |               <p v-for="sub in item.data" class="line">
 59 |                 <span v-text="sub.title"></span>
 60 |                 :
 61 |                 <a :href="sub.url">点击下载</a>
 62 |               </p>
 63 |               <p>
 64 |                 <span>使用教程</span>
 65 |                 :
 66 |                 <span class="download-link" @click="dialog = true"
 67 |                   >点击查看</span
 68 |                 >
 69 |               </p>
 70 |             </v-expansion-panel-text>
 71 |           </v-expansion-panel>
 72 |         </v-expansion-panels>
 73 |       </v-card-text>
 74 |     </v-card>
 75 |     <div class="text-center mt-3">
 76 |       <v-btn variant="text" to="/combo">点击查看套餐</v-btn>
 77 |     </div>
 78 |     <v-dialog v-model="dialog" width="auto">
 79 |       <v-card max-width="400" prepend-icon="mdi-tune" title="使用教程">
 80 |         <v-card-text>
 81 |           下载应用后
 82 |           <br />
 83 |           <br />
 84 |           在支持fever api的地方填写
 85 |           <br />
 86 |           https://api.webfollow.cc/plugins/fever/
 87 |           <br />
 88 |           <!-- <br />
 89 |           在支持 googleReader api的地方填写
 90 |           <br />
 91 |           https://api.webfollow.cc/plugins/greader/
 92 |           <br />-->
 93 |           <br />
 94 |           <p>输入账号：guest 密码：123456</p>
 95 |         </v-card-text>
 96 |         <template v-slot:actions>
 97 |           <v-btn class="ms-auto" text="Ok" @click="dialog = false"></v-btn>
 98 |         </template>
 99 |       </v-card>
100 |     </v-dialog>
101 |   </div>
102 | </template>
103 | 
104 | <script>
105 | export default {
106 |   name: "Download",
107 |   data() {
108 |     return {
109 |       dialog: false,
110 |       items: [
111 |         {
112 |           title: "iOS",
113 |           data: [
114 |             {
115 |               title: "Reeder",
116 |               url: "https://apps.apple.com/us/app/reeder/id6475002485",
117 |             },
118 |             {
119 |               title: "Fiery Feeds ",
120 |               url: "https://apps.apple.com/us/app/fiery-feeds-rss-reader/id1158763303",
121 |             },
122 |             {
123 |               title: "Unread",
124 |               url: "https://apps.apple.com/us/app/unread-an-rss-reader/id1363637349",
125 |             },
126 |             {
127 |               title: "NewsBlur",
128 |               url: "https://apps.apple.com/us/app/newsblur/id463981119",
129 |             },
130 |           ],
131 |           useUrl: "",
132 |         },
133 |         {
134 |           title: "安卓",
135 |           data: [
136 |             {
137 |               title: "Read You",
138 |               url: "https://github.com/Ashinch/ReadYou/releases",
139 |             },
140 |             {
141 |               title: "NewsBlur",
142 |               url: "https://play.google.com/store/apps/details?id=com.newsblur",
143 |             },
144 |             {
145 |               title: "FeedMe",
146 |               url: "https://play.google.com/store/apps/details?id=com.seazon.feedme",
147 |             },
148 |             {
149 |               title: "Readrops",
150 |               url: "https://github.com/readrops/Readrops/releases",
151 |             },
152 |             {
153 |               title: "RSS Reader",
154 |               url: " https://play.google.com/store/apps/details?id=com.rss.reader.global",
155 |             },
156 |           ],
157 |           useUrl: "",
158 |         },
159 |         {
160 |           title: "mac",
161 |           data: [
162 |             {
163 |               title: "Reeder",
164 |               url: "https://apps.apple.com/us/app/reeder/id6475002485",
165 |             },
166 |             {
167 |               title: "Fiery Feeds ",
168 |               url: "https://apps.apple.com/us/app/fiery-feeds-rss-reader/id1158763303",
169 |             },
170 |             {
171 |               title: "Unread",
172 |               url: "https://apps.apple.com/us/app/unread-an-rss-reader/id1363637349",
173 |             },
174 |             {
175 |               title: "ReadKit",
176 |               url: "https://apps.apple.com/us/app/readkit-read-later-rss/id1615798039",
177 |             },
178 |           ],
179 |           useUrl: "",
180 |         },
181 |         {
182 |           title: "windows",
183 |           data: [
184 |             {
185 |               title: "QuiteRSS",
186 |               url: "https://github.com/QuiteRSS/quiterss/releases",
187 |             },
188 |             {
189 |               title: "Fiery Feeds ",
190 |               url: "https://apps.apple.com/us/app/fiery-feeds-rss-reader/id1158763303",
191 |             },
192 |           ],
193 |           useUrl: "",
194 |         },
195 |         {
196 |           title: "liunx",
197 |           data: [
198 |             {
199 |               title: "QuiteRSS",
200 |               url: "https://github.com/QuiteRSS/quiterss/releases",
201 |             },
202 |             {
203 |               title: "rssguard ",
204 |               url: "https://github.com/martinrotter/rssguard/releases",
205 |             },
206 |           ],
207 |           useUrl: "",
208 |         },
209 |       ],
210 |     };
211 |   },
212 | };
213 | </script>
214 | 
215 | <style scoped>
216 | .line {
217 |   line-height: 1.8rem;
218 | }
219 | .download-link {
220 |   margin-top: 0.5rem;
221 |   display: inline-block;
222 |   padding: 5px 10px;
223 |   background-color: #28a745;
224 |   color: white;
225 |   text-decoration: none;
226 | }
227 | img {
228 |   /* width: 260px; */
229 |   max-height: 50vh;
230 | }
231 | </style>
232 | 


--------------------------------------------------------------------------------
/src/views/FeedAssistant.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Items ref="itemsRef">
  3 |     <template v-slot="{ openReader }">
  4 |       <div class="warp">
  5 |         <div class="feed-assistant mt-12 pa-3">
  6 |           <div class="text-center my-12">
  7 |             <div class="text-h3">向订阅源提问</div>
  8 |             <p class="my-6 text-subtitle-2">AI帮你回答问题</p>
  9 |           </div>
 10 |           <div class="border rounded-lg pa-5">
 11 |             <v-textarea
 12 |               v-model="query"
 13 |               label="询问你的订阅内容"
 14 |               @keyup.enter="handleQuery"
 15 |               rows="3"
 16 |               variant="plain"
 17 |               auto-grow
 18 |               hide-details
 19 |             >
 20 |             </v-textarea>
 21 |             <div class="d-flex align-center justify-space-between">
 22 |               <div></div>
 23 |               <c-btn
 24 |                 icon="mdi-send"
 25 |                 @click="handleQuery"
 26 |                 :loading="loading"
 27 |                 :disabled="loading"
 28 |               ></c-btn>
 29 |             </div>
 30 |           </div>
 31 |           <v-card
 32 |             v-if="contexts.length || answer || loading"
 33 |             class="mt-4 border rounded-lg"
 34 |             :loading="loading"
 35 |             flat
 36 |           >
 37 |             <!-- AI 回答部分 -->
 38 |             <v-card-text>
 39 |               <div class="text-subtitle-1 mb-2">回答</div>
 40 |               <div
 41 |                 v-if="answer || !loading"
 42 |                 class="answer-content pa-5 text-body-2"
 43 |                 v-html="md2html(answer)"
 44 |               ></div>
 45 |               <v-skeleton-loader v-else type="paragraph"></v-skeleton-loader>
 46 |             </v-card-text>
 47 | 
 48 |             <!-- 参考资料部分 -->
 49 |             <v-divider></v-divider>
 50 |             <v-card-text>
 51 |               <div class="text-subtitle-1 mb-2">参考资料</div>
 52 |               <v-empty-state
 53 |                 v-if="!loading && itemStore.items?.length == 0"
 54 |                 icon="mdi-magnify"
 55 |                 text="请重新尝试提问，有可能是AI调用存在问题导致，可以直接重试"
 56 |                 title="没有找到相关资料"
 57 |               ></v-empty-state>
 58 |               <v-row v-else-if="itemStore.items?.length">
 59 |                 <v-col
 60 |                   cols="12"
 61 |                   md="6"
 62 |                   v-for="(item, index) in itemStore.items"
 63 |                   :key="item.id"
 64 |                 >
 65 |                   <MagazineItem
 66 |                     :item="item"
 67 |                     @click="openReader(index, item)"
 68 |                   ></MagazineItem>
 69 |                 </v-col>
 70 |               </v-row>
 71 |               <v-row v-else>
 72 |                 <v-col cols="12" md="6" v-for="index in 6" :key="index">
 73 |                   <v-skeleton-loader type="paragraph"></v-skeleton-loader>
 74 |                 </v-col>
 75 |               </v-row>
 76 |             </v-card-text>
 77 |           </v-card>
 78 |         </div>
 79 |       </div>
 80 |     </template>
 81 |   </Items>
 82 | </template>
 83 | 
 84 | <script setup lang="ts">
 85 | import Items from "./Items.vue";
 86 | import MagazineItem from "./item/MagazineItem.vue";
 87 | import { ref } from "vue";
 88 | import { queryWithRAG } from "@/service/rag";
 89 | import type { FeedContext } from "@/service/rag";
 90 | import { md2html } from "@/utils/mdUtils";
 91 | import { useItemsStore } from "@/store";
 92 | const query = ref("");
 93 | const answer = ref("");
 94 | const contexts = ref<FeedContext[]>([]);
 95 | const loading = ref(false);
 96 | const itemStore = useItemsStore();
 97 | 
 98 | const itemsRef = ref();
 99 | 
100 | async function handleQuery() {
101 |   if (!query.value.trim()) return;
102 |   loading.value = true;
103 |   init();
104 |   try {
105 |     const { genAnswer, contexts: aiContexts } = await queryWithRAG(query.value);
106 |     contexts.value = aiContexts;
107 |     itemsRef.value.loadData(
108 |       0,
109 |       contexts.value.map((item) => item.id)
110 |     );
111 |     answer.value = (await genAnswer()).answer;
112 |   } catch (error: any) {
113 |     alert(error.message);
114 |   } finally {
115 |     loading.value = false;
116 |   }
117 | }
118 | 
119 | function init() {
120 |   contexts.value = [];
121 |   answer.value = "";
122 |   itemsRef.value.loadData(0, []);
123 | }
124 | </script>
125 | 
126 | <style scoped>
127 | .feed-assistant {
128 |   max-width: 700px;
129 |   margin: 0 auto;
130 | }
131 | 
132 | :deep(.v-list-item) {
133 |   margin-bottom: 8px;
134 | }
135 | :deep(.v-list-item__subtitle) {
136 |   opacity: 0.7;
137 |   font-size: 0.9em;
138 | }
139 | :deep(.v-field__input) {
140 |   font-size: 0.95rem;
141 | }
142 | </style>
143 | 


--------------------------------------------------------------------------------
/src/views/InjectionSymbols.ts:
--------------------------------------------------------------------------------
1 | export const viewModeSymbol = Symbol('viewMode')
2 | export const itemsTypeSymbol = Symbol('itemsType')


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row align="center" justify="center">
  4 |       <v-col cols="12" sm="8" md="4">
  5 |         <v-card>
  6 |           <v-card-title class="headline">登录</v-card-title>
  7 |           <v-card-text>
  8 |             <v-form @submit.prevent="handleLogin">
  9 |               <v-text-field
 10 |                 v-model="username"
 11 |                 label="用户名"
 12 |                 required
 13 |               ></v-text-field>
 14 |               <v-text-field
 15 |                 v-model="password"
 16 |                 label="密码"
 17 |                 type="password"
 18 |                 required
 19 |               ></v-text-field>
 20 |               <a @click="showUrl = !showUrl"
 21 |                 ><small
 22 |                   >我有自建的RSS后端服务且支持fever,点击填写fever URL</small
 23 |                 ></a
 24 |               >
 25 | 
 26 |               <br />
 27 |               <br />
 28 |               <v-text-field
 29 |                 v-if="showUrl"
 30 |                 v-model="url"
 31 |                 label="feverURL"
 32 |                 required
 33 |               ></v-text-field>
 34 |               <v-btn block type="submit" color="primary">登录</v-btn>
 35 |             </v-form>
 36 |           </v-card-text>
 37 |           <v-card-subtitle>
 38 |             <p class="text-center mt-3 mb-3">
 39 |               {{ itemsTotal }}条数据都在您本地，没有网络也可以查看
 40 |             </p>
 41 |           </v-card-subtitle>
 42 |         </v-card>
 43 |         <v-snackbar v-model="snackbar">
 44 |           {{ message }}
 45 |         </v-snackbar>
 46 |       </v-col>
 47 |     </v-row>
 48 |   </v-container>
 49 | </template>
 50 | 
 51 | <script setup lang="ts">
 52 | import { onMounted, ref } from "vue";
 53 | import { login } from "@/api";
 54 | import { useAppStore } from "@/store";
 55 | import { useRouter } from "vue-router";
 56 | import { getItemTotal } from "@/service";
 57 | 
 58 | const appStore = useAppStore();
 59 | const router = useRouter();
 60 | const itemsTotal = ref(0);
 61 | 
 62 | const snackbar = ref(false);
 63 | const message = ref("");
 64 | const username = ref("");
 65 | const password = ref("");
 66 | const url = ref(localStorage.getItem("url") || "");
 67 | const showUrl = ref(false);
 68 | 
 69 | const showMessage = (msg: string) => {
 70 |   message.value = msg; // 设置提示信息
 71 |   snackbar.value = true; // 显示 snackbar
 72 | };
 73 | 
 74 | const handleLogin = async () => {
 75 |   if (url.value) {
 76 |     if (url.value.indexOf("https") != 0) {
 77 |       showMessage("api url 必须是https");
 78 |       return;
 79 |     }
 80 |     localStorage.setItem("url", url.value);
 81 |   } else {
 82 |     localStorage.removeItem("url");
 83 |   }
 84 |   const token = CryptoJS.MD5(username.value + ":" + password.value).toString(); // 更新为使用 window.CryptoJS
 85 |   try {
 86 |     const r = await login(token);
 87 |     if (r.auth !== 1) {
 88 |       showMessage("登录失败");
 89 |     } else {
 90 |       localStorage.setItem(
 91 |         "auth",
 92 |         JSON.stringify({ username: username.value, token })
 93 |       );
 94 |       appStore.reloadBuild();
 95 |       router.push("/");
 96 |     }
 97 |   } catch (e) {
 98 |     showMessage("登录失败 请检查账号及路径或CORS, err:" + e);
 99 |   }
100 | };
101 | 
102 | onMounted(async () => {
103 |   itemsTotal.value = await getItemTotal();
104 | });
105 | </script>
106 | 
107 | <style scoped>
108 | .v-card {
109 |   margin-top: 20vh;
110 | }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/views/RelatedArticles.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Items ref="itemsRef">
  3 |     <template #="{ openReader }">
  4 |       <div class="warp">
  5 |         <div class="feed-assistant mt-12 pa-3">
  6 |           <div class="text-center my-12">
  7 |             <div class="text-h3">文章过滤</div>
  8 |             <p class="my-6 text-subtitle-2">
  9 |               用AI帮你找到相关内容, (由{{
 10 |                 settingsStore.proxyIntegrated.selectedModel
 11 |               }}进行驱动)
 12 |             </p>
 13 |           </div>
 14 | 
 15 |           <div class="border rounded-lg pa-5">
 16 |             <v-textarea
 17 |               v-model="searchQuery"
 18 |               label="输入关键词搜索相关内容"
 19 |               @keyup.enter="handleSearch"
 20 |               rows="3"
 21 |               variant="plain"
 22 |               auto-grow
 23 |               hide-details
 24 |             >
 25 |             </v-textarea>
 26 |             <div class="d-flex align-center justify-space-between">
 27 |               <v-chip-group
 28 |                 v-if="keywords.length"
 29 |                 v-model="selectedKeywords"
 30 |                 @update:model-value="handleKeywordsChange"
 31 |                 column
 32 |                 multiple
 33 |                 selected-class="text-primary"
 34 |               >
 35 |                 <v-chip
 36 |                   v-for="kw in keywords"
 37 |                   :key="kw.keyword"
 38 |                   :text="kw.keyword"
 39 |                   :color="getTagColor(kw.weight)"
 40 |                   class="ma-1"
 41 |                   size="small"
 42 |                   filter
 43 |                 >
 44 |                 </v-chip>
 45 |               </v-chip-group>
 46 |               <div class="d-flex gap-2">
 47 |                 <c-btn
 48 |                   v-if="keywords.length"
 49 |                   icon="mdi-filter-plus-outline"
 50 |                   @click="saveAsFilter"
 51 |                   :disabled="loading"
 52 |                 >
 53 |                 </c-btn>
 54 |                 <c-btn
 55 |                   icon="mdi-magnify"
 56 |                   @click="handleSearch"
 57 |                   :loading="loading"
 58 |                   :disabled="loading"
 59 |                 ></c-btn>
 60 |               </div>
 61 |             </div>
 62 |           </div>
 63 | 
 64 |           <v-card
 65 |             v-if="articles.length || loading || isSearching"
 66 |             class="mt-4 border rounded-lg"
 67 |             :loading="loading"
 68 |             flat
 69 |           >
 70 |             <v-card-text>
 71 |               <div class="text-subtitle-2 ma-2">
 72 |                 {{
 73 |                   loading
 74 |                     ? "加载中..."
 75 |                     : "搜索到 " + articles.length + " 条相关结果"
 76 |                 }}
 77 |               </div>
 78 |               <v-row v-if="loading">
 79 |                 <v-col cols="12" md="12" v-for="index in 6" :key="index">
 80 |                   <v-skeleton-loader type="paragraph"></v-skeleton-loader>
 81 |                   <v-skeleton-loader
 82 |                     type="card-avatar"
 83 |                     class="mx-5"
 84 |                   ></v-skeleton-loader>
 85 |                 </v-col>
 86 |               </v-row>
 87 |               <v-empty-state
 88 |                 v-else-if="articles.length == 0"
 89 |                 icon="mdi-magnify"
 90 |                 text="尝试使用其他关键词"
 91 |                 title="没有找到相关文章"
 92 |               ></v-empty-state>
 93 |               <v-expand-transition>
 94 |                 <v-row v-if="articles.length && !loading">
 95 |                   <v-col
 96 |                     cols="12"
 97 |                     v-for="(item, index) in itemStore.items"
 98 |                     :key="item.id"
 99 |                   >
100 |                     <ContentItem
101 |                       :item="item"
102 |                       @click="openReader(index, item)"
103 |                     ></ContentItem>
104 |                   </v-col>
105 |                 </v-row>
106 |               </v-expand-transition>
107 |             </v-card-text>
108 |           </v-card>
109 |         </div>
110 |       </div>
111 |     </template>
112 |   </Items>
113 | </template>
114 | 
115 | <script setup lang="ts">
116 | import Items from "./Items.vue";
117 | import ContentItem from "./item/ContentItem.vue";
118 | import { ref } from "vue";
119 | import { getRelatedKeywords, retrieveRelevantContexts } from "@/service/rag";
120 | import type { KeywordWeight, FeedContext } from "@/service/rag";
121 | import { useItemsStore } from "@/store";
122 | import { useSettingsStore } from "@/store";
123 | 
124 | const searchQuery = ref("");
125 | const loading = ref(false);
126 | const keywords = ref<KeywordWeight[]>([]);
127 | const selectedKeywords = ref<number[]>([]);
128 | const articles = ref<FeedContext[]>([]);
129 | const itemStore = useItemsStore();
130 | const itemsRef = ref();
131 | const isSearching = ref(false);
132 | const settingsStore = useSettingsStore();
133 | 
134 | const getTagColor = (weight: number) => {
135 |   if (weight >= 50) return "error";
136 |   if (weight >= 20) return "warning";
137 |   if (weight >= 10) return "success";
138 |   return "info";
139 | };
140 | 
141 | async function handleKeywordsChange() {
142 |   const newVal = selectedKeywords.value;
143 |   loading.value = true;
144 |   if (newVal.length > 0) {
145 |     const selectedWords = newVal.map((index) => keywords.value[index]);
146 |     articles.value = await retrieveRelevantContexts("", selectedWords, 300);
147 |     itemsRef.value.loadData(
148 |       0,
149 |       articles.value.map((item) => item.id)
150 |     );
151 |   } else {
152 |     articles.value = [];
153 |     itemsRef.value.loadData(0, [], true);
154 |   }
155 |   loading.value = false;
156 | }
157 | 
158 | async function handleSearch() {
159 |   if (!searchQuery.value.trim()) return;
160 |   loading.value = true;
161 |   isSearching.value = true;
162 |   init();
163 | 
164 |   try {
165 |     // 获取相关关键词
166 |     keywords.value = await getRelatedKeywords(searchQuery.value);
167 |     selectedKeywords.value = keywords.value.map((_, index) => index);
168 |     await handleKeywordsChange();
169 |   } catch (error: any) {
170 |     console.error("搜索失败:", error);
171 |     alert(error.message || "搜索失败");
172 |   } finally {
173 |     loading.value = false;
174 |   }
175 | }
176 | 
177 | function init() {
178 |   keywords.value = [];
179 |   articles.value = [];
180 |   selectedKeywords.value = [];
181 |   itemsRef.value.loadData(0, []);
182 | }
183 | 
184 | async function saveAsFilter() {
185 |   const name = prompt("请输入过滤项名称");
186 |   if (!name) return;
187 | 
188 |   const filter = {
189 |     id: Date.now().toString(),
190 |     name,
191 |     keywords: selectedKeywords.value.map((index) => keywords.value[index]),
192 |     createTime: Date.now(),
193 |   };
194 | 
195 |   settingsStore.automation.filters.push(filter);
196 |   settingsStore.saveToLocalStorage();
197 | 
198 |   alert("保存成功");
199 | }
200 | </script>
201 | 
202 | <style scoped>
203 | .feed-assistant {
204 |   max-width: 700px;
205 |   margin: 0 auto;
206 | }
207 | 
208 | :deep(.v-list-item) {
209 |   margin-bottom: 8px;
210 | }
211 | 
212 | :deep(.v-list-item__subtitle) {
213 |   opacity: 0.7;
214 |   font-size: 0.9em;
215 | }
216 | 
217 | :deep(.v-field__input) {
218 |   font-size: 0.95rem;
219 | }
220 | </style>
221 | 


--------------------------------------------------------------------------------
/src/views/Welcome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="d-flex justify-space-between ma-3">
 3 |     <div>
 4 |       <v-btn prepend-icon="mdi-download" variant="text" to="/download"
 5 |         >下载app</v-btn
 6 |       >
 7 |     </div>
 8 |     <div class="d-flex align-center">
 9 |       <a href="https://github.com/weekend-project-space/webfollow-app">
10 |         <img
11 |           src="https://img.shields.io/github/stars/weekend-project-space/webfollow-app.svg?style=social&amp;label=Stars"
12 |           alt=""
13 |       /></a>
14 |     </div>
15 |   </div>
16 | 
17 |   <v-empty-state height="calc(100vh - 64px)" v-if="appStore.loading">
18 |     <div class="mx-auto text-center">
19 |       <v-icon size="x-large" :class="{ rotating: appStore.loading }"
20 |         >mdi-loading</v-icon
21 |       >
22 |     </div>
23 |     <p class="mt-5">正在为你准备中...</p>
24 |   </v-empty-state>
25 |   <v-empty-state
26 |     height="calc(100vh - 64px)"
27 |     v-else
28 |     icon="mdi-book-open-page-variant-outline"
29 |   >
30 |     <div class="text-center">
31 |       <p class="text-subtitle-2 mb-3">
32 |         AI驱动，智能阅读——您的RSS新体验！<br />(支持过滤、总结、问答)
33 |       </p>
34 |       <v-btn variant="text" to="/explore"> 开始吧 </v-btn>
35 |       <br />
36 |       <v-btn
37 |         v-if="appStore.authInfo.username == 'guest'"
38 |         class="mt-3"
39 |         variant="text"
40 |         to="/download"
41 |         >目前是测试用户,可以下载app试用</v-btn
42 |       >
43 |     </div>
44 |   </v-empty-state>
45 | </template>
46 | <script setup>
47 | import { useAppStore } from "@/store";
48 | const appStore = useAppStore();
49 | </script>
50 | <style scoped>
51 | .rotating {
52 |   animation: rotate 1s linear infinite;
53 | }
54 | 
55 | @keyframes rotate {
56 |   from {
57 |     transform: rotate(0deg);
58 |   }
59 |   to {
60 |     transform: rotate(360deg);
61 |   }
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/views/discover/RssEditor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="rss-config">
  3 |     <!-- 路由信息 -->
  4 |     <v-card-text class="my-3">
  5 |       <code class="route-path">{{ routePath }}</code>
  6 |     </v-card-text>
  7 | 
  8 |     <!-- 参数配置 -->
  9 |     <v-card-text v-if="currentParameters">
 10 |       <v-form ref="form">
 11 |         <div v-for="(param, key) in currentParameters" :key="key">
 12 |           <template v-if="param.options">
 13 |             <v-select
 14 |               v-model="paramValues[key]"
 15 |               :items="param.options"
 16 |               :label="key"
 17 |               item-title="label"
 18 |               item-value="value"
 19 |               density="compact"
 20 |               class="param-select"
 21 |               hide-details
 22 |               :hint="param.description"
 23 |               persistent-hint
 24 |             />
 25 |           </template>
 26 |           <template v-else>
 27 |             <v-text-field
 28 |               v-model="paramValues[key]"
 29 |               :label="key"
 30 |               density="compact"
 31 |               class="param-input"
 32 |               hide-details
 33 |               :hint="param.description"
 34 |               persistent-hint
 35 |             />
 36 |           </template>
 37 |         </div>
 38 |       </v-form>
 39 |     </v-card-text>
 40 | 
 41 |     <!-- 描述信息 -->
 42 |     <v-card-text v-if="currentRoute?.description" class="description">
 43 |       <div v-html="marked(currentRoute.description)"></div>
 44 |     </v-card-text>
 45 | 
 46 |     <!-- 预览按钮组 -->
 47 |     <v-card-actions class="pa-4">
 48 |       <v-btn
 49 |         variant="outlined"
 50 |         @click="copyUrl"
 51 |         prepend-icon="mdi-content-copy"
 52 |       >
 53 |         复制
 54 |       </v-btn>
 55 |       <v-spacer></v-spacer>
 56 |       <v-btn
 57 |         color="primary"
 58 |         variant="outlined"
 59 |         :href="generatedUrl"
 60 |         target="_blank"
 61 |         prepend-icon="mdi-eye"
 62 |       >
 63 |         预览
 64 |       </v-btn>
 65 | 
 66 |       <v-btn
 67 |         color="primary"
 68 |         variant="flat"
 69 |         @click="addToSub"
 70 |         :loading="loading"
 71 |         :disabled="generatedUrl.includes('/:') || loading"
 72 |         prepend-icon="mdi-rss"
 73 |       >
 74 |         {{ loading ? "添加中..." : "添加到订阅" }}
 75 |       </v-btn>
 76 |     </v-card-actions>
 77 | 
 78 |     <!-- 提示消息 -->
 79 |     <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000">
 80 |       {{ snackbar.text }}
 81 |     </v-snackbar>
 82 |   </div>
 83 | </template>
 84 | 
 85 | <script setup lang="ts">
 86 | import { ref, computed, onMounted } from "vue";
 87 | import { marked } from "marked";
 88 | import { useAppStore } from "@/store";
 89 | import { extFeed } from "@/api";
 90 | const rsshub = "https://rsshub.app";
 91 | 
 92 | // 添加 appStore
 93 | const appStore = useAppStore();
 94 | 
 95 | interface Parameter {
 96 |   description?: string;
 97 |   options?: Array<{
 98 |     value: string;
 99 |     label: string;
100 |   }>;
101 |   default?: string;
102 | }
103 | 
104 | interface Route {
105 |   path: string;
106 |   name: string;
107 |   parameters?: Record<string, Parameter>;
108 |   example?: string;
109 |   description?: string;
110 | }
111 | 
112 | interface Service {
113 |   name: string;
114 |   url: string;
115 |   routes: Record<string, Route>;
116 |   description?: string;
117 | }
118 | 
119 | const props = defineProps<{
120 |   serviceKey: string;
121 |   routePath: string;
122 | }>();
123 | 
124 | const jsonData = ref<Record<string, Service>>();
125 | const paramValues = ref<Record<string, string>>({});
126 | 
127 | const snackbar = ref({
128 |   show: false,
129 |   text: "",
130 |   color: "success",
131 | });
132 | 
133 | // 添加 loading 状态
134 | const loading = ref(false);
135 | 
136 | // 获取当前路由对象
137 | const currentRoute = computed(() => {
138 |   if (!jsonData.value?.[props.serviceKey]) return null;
139 |   return jsonData.value[props.serviceKey].routes[props.routePath];
140 | });
141 | 
142 | // 获取当前路由的参数配置
143 | const currentParameters = computed(() => {
144 |   if (!currentRoute.value) return null;
145 |   return currentRoute.value.parameters || {};
146 | });
147 | 
148 | // 生成 RSS URL
149 | const generatedUrl = computed(() => {
150 |   let url = `${rsshub}/${props.serviceKey}${props.routePath}`;
151 | 
152 |   // 替换路径参数
153 |   Object.entries(paramValues.value).forEach(([key, value]) => {
154 |     if (value) {
155 |       url = url.replace(`:${key}`, value);
156 |     }
157 |   });
158 | 
159 |   return url;
160 | });
161 | 
162 | // 复制 URL
163 | const copyUrl = async () => {
164 |   try {
165 |     await navigator.clipboard.writeText(generatedUrl.value);
166 |     snackbar.value = {
167 |       show: true,
168 |       text: "URL已复制到剪贴板",
169 |       color: "info",
170 |     };
171 |   } catch (err) {
172 |     snackbar.value = {
173 |       show: true,
174 |       text: "复制失败",
175 |       color: "error",
176 |     };
177 |   }
178 | };
179 | 
180 | // 添加订阅
181 | const addToSub = async () => {
182 |   if (loading.value) return;
183 |   loading.value = true;
184 | 
185 |   try {
186 |     await extFeed({ group_id: 0, feed_url: generatedUrl.value, as: "create" });
187 |     setTimeout(() => {
188 |       appStore.sync();
189 |     }, 6000);
190 | 
191 |     snackbar.value = {
192 |       show: true,
193 |       text: "已添加到订阅列表",
194 |       color: "info",
195 |     };
196 |   } catch (err) {
197 |     snackbar.value = {
198 |       show: true,
199 |       text: "添加失败",
200 |       color: "error",
201 |     };
202 |   } finally {
203 |     loading.value = false;
204 |   }
205 | };
206 | 
207 | // 加载配置数据
208 | const loadData = async () => {
209 |   try {
210 |     const response = await fetch("/data.json");
211 |     const data = await response.json();
212 |     jsonData.value = data.data;
213 | 
214 |     // 设置默认值
215 |     if (currentParameters.value) {
216 |       Object.entries(currentParameters.value).forEach(([key, param]) => {
217 |         if (param.default) {
218 |           paramValues.value[key] = param.default;
219 |         }
220 |       });
221 |     }
222 |   } catch (error) {
223 |     snackbar.value = {
224 |       show: true,
225 |       text: "加载配置数据失败",
226 |       color: "error",
227 |     };
228 |   }
229 | };
230 | 
231 | onMounted(() => {
232 |   loadData();
233 | });
234 | </script>
235 | 
236 | <style scoped>
237 | .rss-config {
238 |   padding: 16px 0;
239 | }
240 | 
241 | .route-path {
242 |   font-family: monospace;
243 |   font-size: 0.9rem;
244 |   background-color: rgba(0, 0, 0, 0.03);
245 |   padding: 8px 12px;
246 |   border-radius: 4px;
247 |   color: rgba(0, 0, 0, 0.87);
248 | }
249 | 
250 | .param-select,
251 | .param-input {
252 |   margin-bottom: 16px;
253 | }
254 | 
255 | .description {
256 |   font-size: 0.9rem;
257 |   color: rgba(0, 0, 0, 0.6);
258 | }
259 | 
260 | :deep(.description table) {
261 |   width: 100%;
262 |   border-collapse: collapse;
263 |   margin: 16px 0;
264 | }
265 | 
266 | :deep(.description th),
267 | :deep(.description td) {
268 |   border: 1px solid rgba(0, 0, 0, 0.12);
269 |   padding: 8px;
270 |   text-align: left;
271 | }
272 | 
273 | :deep(.description th) {
274 |   background-color: rgba(0, 0, 0, 0.02);
275 | }
276 | 
277 | :deep(.description code) {
278 |   background-color: rgba(0, 0, 0, 0.03);
279 |   padding: 2px 4px;
280 |   border-radius: 4px;
281 |   font-family: monospace;
282 |   font-size: 0.9em;
283 | }
284 | 
285 | :deep(.description blockquote) {
286 |   border-left: 4px solid rgba(0, 0, 0, 0.12);
287 |   margin: 16px 0;
288 |   padding: 8px 16px;
289 |   color: rgba(0, 0, 0, 0.6);
290 | }
291 | </style>
292 | 


--------------------------------------------------------------------------------
/src/views/item/CardItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-list-item v-bind="$attrs" class="pa-0 rounded-lg">
  3 |     <v-card flat class="rounded-lg card">
  4 |       <div
  5 |         v-if="item.thumbnail || isVideoOrPodcast"
  6 |         @mouseover="showIframe = true"
  7 |         @mouseleave="showIframe = false"
  8 |         :style="{
  9 |           maxHeight:
 10 |             item.type == 'VIDEO' && !mobile ? imageHeight + 'px' : 'none',
 11 |         }"
 12 |         class="rounded-lg"
 13 |         :class="{
 14 |           'iframe-container': showIframe && item.type == 'VIDEO',
 15 |         }"
 16 |       >
 17 |         <template v-if="item.type == 'VIDEO' && showIframe">
 18 |           <iframe
 19 |             type="text/html"
 20 |             class="iframe"
 21 |             :src="videoUrl()"
 22 |             :style="{ height: imageHeight + 2 + 'px' }"
 23 |             frameborder="0"
 24 |             allow="fullscreen"
 25 |             mozallowfullscreen="mozallowfullscreen"
 26 |             msallowfullscreen="msallowfullscreen"
 27 |             oallowfullscreen="oallowfullscreen"
 28 |             webkitallowfullscreen="webkitallowfullscreen"
 29 |           ></iframe>
 30 |           <div
 31 |             class="video-warp"
 32 |             :style="{
 33 |               height: imageHeight + 'px',
 34 |             }"
 35 |           ></div>
 36 |         </template>
 37 |         <v-img
 38 |           v-else
 39 |           ref="imageRef"
 40 |           class="align-end text-white rounded-lg play-preview"
 41 |           :title="item.title"
 42 |           :aspect-ratio="
 43 |             mobile ? (item.enclosure ? 1.78 : 0.7) : item.enclosure ? 1.79 : 0
 44 |           "
 45 |           max-height="600px"
 46 |           min-height="80px"
 47 |           :cover="mobile || item.enclosure"
 48 |           :src="item.thumbnail || item.feed?.icon"
 49 |         >
 50 |           <template v-if="isVideoOrPodcast">
 51 |             <div class="play-duration">
 52 |               {{ formatDuration(item.duration) }}
 53 |             </div>
 54 |           </template>
 55 |         </v-img>
 56 |       </div>
 57 |       <div
 58 |         v-else
 59 |         :style="{ '--line-clamp': mobile ? 12 : 7 }"
 60 |         class="text-body-2 px-4 py-3 text-grey border rounded-lg summary-warp"
 61 |       >
 62 |         <p v-text="item.summary" class="text-ellipsis"></p>
 63 |       </div>
 64 |       <!-- 标题信息 -->
 65 |       <div class="my-2 d-flex mx-1">
 66 |         <div class="text-center mr-2 left-info">
 67 |           <v-badge v-if="!item.isRead" color="primary" dot>
 68 |             <img
 69 |               :src="item?.feed?.icon"
 70 |               onerror="this.src='/logo.svg'"
 71 |               style="width: 1.8rem; height: 1.8rem"
 72 |               class="rounded-circle"
 73 |             />
 74 |           </v-badge>
 75 |           <img
 76 |             v-else
 77 |             :src="item?.feed?.icon"
 78 |             onerror="this.src='/logo.svg'"
 79 |             style="width: 1.8rem; height: 1.8rem"
 80 |             class="rounded-circle"
 81 |           />
 82 |           <!-- <v-icon
 83 |             v-if="!item.isRead"
 84 |             style="margin-left: -5px"
 85 |             color="primary"
 86 |             :icon="item.isRead ? '' : 'mdi-circle-medium'"
 87 |           ></v-icon> -->
 88 |         </div>
 89 |         <div>
 90 |           <p class="text-ellipsis">
 91 |             <span v-text="item.title"></span>
 92 |           </p>
 93 |           <div class="mt-2 text-grey">
 94 |             <small>
 95 |               {{ getSubtitle() }}
 96 |             </small>
 97 |             <br />
 98 |             <small v-text="item.datestr"></small>
 99 |           </div>
100 |         </div>
101 |       </div>
102 |     </v-card>
103 |   </v-list-item>
104 | </template>
105 | <script setup lang="ts">
106 | import { ref, onMounted, watch, computed } from "vue";
107 | import { useDisplay } from "vuetify";
108 | const props = defineProps(["item", "type"]);
109 | const { mobile } = useDisplay();
110 | const showIframe = ref(false);
111 | const imageHeight = ref(0);
112 | const imageRef = ref();
113 | 
114 | onMounted(() => {
115 |   const imgElement = imageRef.value;
116 |   if (imgElement) {
117 |     imageHeight.value = imgElement.$el.clientHeight;
118 |   }
119 | });
120 | 
121 | watch(showIframe, (newValue) => {
122 |   if (newValue) {
123 |     const imgElement = imageRef.value;
124 |     if (imgElement) {
125 |       imageHeight.value = imgElement.$el.clientHeight;
126 |     }
127 |   }
128 | });
129 | 
130 | function getSubtitle() {
131 |   const source =
132 |     props.type === "f"
133 |       ? props.item.author || props.item.feed?.title
134 |       : props.item.feed?.title;
135 |   return `${source}`;
136 | }
137 | 
138 | const isVideoOrPodcast = computed(() => {
139 |   return props.item.type === "VIDEO" || props.item.type === "PODCAST";
140 | });
141 | 
142 | function videoUrl() {
143 |   const link = props.item.link;
144 |   return link.indexOf("youtube.com/watch")
145 |     ? `https://www.youtube-nocookie.com/embed/${
146 |         link.split("?v=")[1]
147 |       }?autoplay=1&controls=0&mute=1`
148 |     : link;
149 | }
150 | 
151 | function formatDuration(seconds: number) {
152 |   if (!seconds) return "00:00";
153 |   const minutes = Math.floor(seconds / 60);
154 |   const remainingSeconds = Math.floor(seconds % 60);
155 |   return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
156 |     .toString()
157 |     .padStart(2, "0")}`;
158 | }
159 | </script>
160 | <style lang="scss" scoped>
161 | .summary-warp {
162 |   // min-height: 152px;
163 |   min-height: 10rem;
164 |   box-sizing: border-box;
165 |   background-color: rgba(var(--v-theme-surface-light), 0.2);
166 | }
167 | .iframe-container {
168 |   background-color: #111;
169 |   overflow: hidden;
170 |   position: relative;
171 | }
172 | .video-warp {
173 |   position: absolute;
174 |   top: 0;
175 |   z-index: 10;
176 |   width: 100%;
177 |   background-color: rgba(var(--v-theme-surface-light), 0);
178 | }
179 | iframe {
180 |   width: 100%;
181 |   margin: 0;
182 |   padding: 0;
183 | }
184 | .play-preview {
185 |   overflow: hidden;
186 | 
187 |   .play-duration {
188 |     position: absolute;
189 |     bottom: 8px;
190 |     right: 8px;
191 |     color: rgba(var(--v-theme-background), 0.9);
192 |     background: rgba(var(--v-theme-surface-variant), 0.7);
193 |     padding: 2px 6px;
194 |     border-radius: 4px;
195 |     font-size: 0.8rem;
196 |   }
197 | }
198 | .left-info {
199 |   display: flex;
200 |   justify-content: space-between;
201 |   align-items: center;
202 |   flex-direction: column;
203 | }
204 | </style>
205 | 


--------------------------------------------------------------------------------
/src/views/item/MagazineItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-list-item class="magazine-item py-3" v-bind="$attrs">
  3 |     <div class="magazine" :class="{ readly: item.isRead }">
  4 |       <div class="magazine-left">
  5 |         <img :src="item.feed?.icon" alt="" />
  6 |         <v-icon :color="item.isRead ? '-' : 'primary'">
  7 |           {{ item.isRead ? "" : "mdi-circle-medium" }}
  8 |         </v-icon>
  9 |       </div>
 10 |       <div>
 11 |         <div class="magazine-info mb-2">
 12 |           <div class="text-body-2 text-truncate text-medium-emphasis">
 13 |             <router-link :to="'/f/' + item.feedId" @click.stop="">
 14 |               {{ getSource() }}</router-link
 15 |             >
 16 |           </div>
 17 |           <div class="text-body-2 text-medium-emphasis text-right">
 18 |             {{ item.datestr }}
 19 |           </div>
 20 |         </div>
 21 |         <div
 22 |           class="magazine-sec"
 23 |           :class="{ nomagazinethumb: !item.thumbnail && !isVideoOrPodcast }"
 24 |         >
 25 |           <div class="desc text-ellipsis">
 26 |             <p class="mb-2 text-body-1 title">
 27 |               {{ item.title }}
 28 |             </p>
 29 |             <p class="text-medium-emphasis text-body-2">
 30 |               {{ item.summary }}
 31 |             </p>
 32 |           </div>
 33 |           <div v-if="isVideoOrPodcast">
 34 |             <v-img
 35 |               :src="item.thumbnail || item.feed?.icon"
 36 |               class="play-preview"
 37 |               cover
 38 |               height="80px"
 39 |             >
 40 |               <template v-if="item.type == 'VIDEO' || item.type == 'PODCAST'">
 41 |                 <div class="play-icon-wrapper">
 42 |                   <div class="play-icon">
 43 |                     <v-icon size="20">mdi-play</v-icon>
 44 |                   </div>
 45 |                 </div>
 46 |                 <div class="play-duration">
 47 |                   {{ formatDuration(item.duration) }}
 48 |                 </div>
 49 |               </template>
 50 |             </v-img>
 51 |           </div>
 52 |           <v-img
 53 |             v-else-if="item.thumbnail"
 54 |             :src="item.thumbnail"
 55 |             cover
 56 |             height="80px"
 57 |           >
 58 |           </v-img>
 59 |         </div>
 60 |       </div>
 61 |     </div>
 62 |   </v-list-item>
 63 | </template>
 64 | 
 65 | <script setup lang="ts">
 66 | import { computed } from "vue";
 67 | const props = defineProps(["item", "type"]);
 68 | 
 69 | function getSource() {
 70 |   const source =
 71 |     props.type === "f"
 72 |       ? props.item.author || props.item.feed?.title
 73 |       : props.item.feed?.title;
 74 |   return source;
 75 | }
 76 | function formatDuration(seconds: number) {
 77 |   if (!seconds) return "00:00";
 78 |   const minutes = Math.floor(seconds / 60);
 79 |   const remainingSeconds = Math.floor(seconds % 60);
 80 |   return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
 81 |     .toString()
 82 |     .padStart(2, "0")}`;
 83 | }
 84 | const isVideoOrPodcast = computed(() => {
 85 |   return props.item.type === "VIDEO" || props.item.type === "PODCAST";
 86 | });
 87 | </script>
 88 | 
 89 | <style lang="scss" scoped>
 90 | .magazine-item {
 91 |   padding-left: 5px;
 92 |   padding-right: 10px;
 93 | }
 94 | .magazine {
 95 |   display: grid;
 96 |   grid-template-columns: 1rem auto;
 97 |   align-items: center;
 98 |   grid-gap: 0.5rem;
 99 | 
100 |   .magazine-left {
101 |     display: flex;
102 |     flex-direction: column;
103 |     align-items: center;
104 |     align-self: flex-start;
105 |     justify-content: space-between;
106 |     .v-icon {
107 |       margin-top: 1rem;
108 |     }
109 |     img {
110 |       width: 14px;
111 |       border-radius: 2px;
112 |     }
113 |   }
114 | }
115 | .readly {
116 |   .title {
117 |     opacity: 0.8;
118 |   }
119 |   .text-body-2 {
120 |     opacity: 0.5;
121 |   }
122 | }
123 | .magazine-info {
124 |   display: grid;
125 |   grid-template-columns: auto 6rem;
126 | }
127 | .magazine-sec {
128 |   display: grid;
129 |   grid-template-columns: 3fr minmax(80px, auto);
130 |   grid-gap: 0.5rem;
131 |   .v-img {
132 |     border-radius: 0.5rem;
133 |   }
134 | }
135 | .nomagazinethumb {
136 |   grid-template-columns: 1fr;
137 | }
138 | .text-right {
139 |   text-align: right;
140 | }
141 | .desc {
142 |   --line-clamp: 4;
143 |   width: 100%;
144 |   align-self: flex-start;
145 |   .title {
146 |     font-weight: 500;
147 |   }
148 | }
149 | a {
150 |   text-decoration: none;
151 |   color: rgb(var(--v-theme-surface-variant));
152 |   &:hover {
153 |     text-decoration: underline;
154 |   }
155 | }
156 | .play-preview {
157 |   overflow: hidden;
158 |   background-color: rgba(var(--v-theme-surface-variant), 0.6);
159 |   .play-icon-wrapper {
160 |     position: absolute;
161 |     inset: 0;
162 |     display: flex;
163 |     align-items: center;
164 |     justify-content: center;
165 | 
166 |     .play-icon {
167 |       color: rgba(var(--v-theme-background), 0.9);
168 |       background: rgba(var(--v-theme-surface-variant), 0.9);
169 |       border-radius: 50%;
170 |       padding: 0.3rem;
171 |     }
172 |   }
173 | 
174 |   .play-duration {
175 |     position: absolute;
176 |     bottom: 4px;
177 |     right: 4px;
178 |     color: rgba(var(--v-theme-background), 0.9);
179 |     background: rgba(var(--v-theme-surface-variant), 0.7);
180 |     padding: 2px 6px;
181 |     border-radius: 4px;
182 |     font-size: 0.8rem;
183 |     display: none;
184 |   }
185 | }
186 | </style>
187 | 


--------------------------------------------------------------------------------
/src/views/item/TextItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-list-item :class="{  readly: item.isRead }" class="rounded hover-bg "   >
  3 | 
  4 |     <v-list-item-title class="d-flex justify-space-between align-center">
  5 |       
  6 |       <div class="text-item">
  7 |         <v-icon :color="item.isRead ? 'grey' : 'primary'">
  8 |         {{ item.isRead ? "" : "mdi-circle-medium" }}
  9 |       </v-icon>
 10 |         <div class="d-flex align-center ">
 11 |           <img class="noclick mr-2 rounded" :src=" item?.feed?.icon" onerror="this.src='/logo.svg'" style="width:1rem" >
 12 |             </img>
 13 |         <small
 14 |           class="text-truncate  text-medium-emphasis "
 15 |           v-text="getSource()"
 16 |         ></small>
 17 |         </div>
 18 |         
 19 |         <div class="text-truncate">
 20 |           <span class="mr-2 text-body-1 title" v-text="item.title"></span>
 21 |           <span class="text-body-2 text-medium-emphasis" v-text="item.summary">
 22 |           </span>
 23 |         </div>
 24 |       </div>
 25 |       <span
 26 |         class="sub-text text-caption ml-2 flex-shrink-0"
 27 |         v-text="item.datestr"
 28 |       >
 29 |       </span>
 30 |       <div class="buttons">
 31 |         <!-- <v-btn
 32 |             size="small"
 33 |               variant="text"
 34 |               icon
 35 |               :title="item.feed?.title"
 36 |               :to="'/f/' + item?.feed?.id"
 37 |               @click.stop="()=>{}"
 38 |             >
 39 |             <img class="noclick" :src=" item?.feed?.icon" onerror="this.src='/logo.svg'" style="width:16px">
 40 |             </img>
 41 |         </v-btn> -->
 42 |         <!-- <v-btn
 43 |           size="small"
 44 |           variant="text"
 45 |           icon
 46 |           :title="item.isRead ? '未读' : '已读'"
 47 |           @click.stop="toggleRead"
 48 |         >
 49 |           <v-icon>{{
 50 |             item.isRead ? "mdi-radiobox-blank" : "mdi-radiobox-marked"
 51 |           }}</v-icon>
 52 |         </v-btn> -->
 53 | 
 54 |         <v-btn
 55 |           size="small"
 56 |           height="24"
 57 |           width="24"
 58 |           icon="mdi-open-in-new"
 59 |           variant="text"
 60 |           title="打开原文"
 61 |           class="mr-2"
 62 |           :href="item.link"
 63 |         ></v-btn>
 64 |         <v-btn
 65 |           size="small"
 66 |           variant="text"
 67 |           height="24"
 68 |           width="24"
 69 |           icon
 70 |           title="稍后阅读"
 71 |           @click.stop="toggleSaved"
 72 |         >
 73 |           <v-icon>{{
 74 |             item.isSaved ? "mdi-playlist-minus" : "mdi-playlist-plus"
 75 |           }}</v-icon>
 76 |         </v-btn>
 77 |       </div>
 78 |     </v-list-item-title>
 79 |   </v-list-item>
 80 | </template>
 81 | 
 82 | <script setup lang="ts">
 83 | import { ClickType } from "./types";
 84 | const props = defineProps(["item", "type"]);
 85 | const emit = defineEmits(["click-action"]);
 86 | 
 87 | function toggleSaved() {
 88 |   emit("click-action", ClickType.save, props.item);
 89 | }
 90 | 
 91 | // function toggleRead() {
 92 | //   emit("click-action", ClickType.read, props.item);
 93 | // }
 94 | 
 95 | function getSource() {
 96 |   const source =
 97 |     props.type === "f"
 98 |       ? props.item.author || props.item.feed?.title
 99 |       : props.item.feed?.title;
100 |   return `${source}`;
101 | }
102 | </script>
103 | 
104 | <style scoped>
105 | .readly {
106 |   opacity: 0.6;
107 | }
108 | .readly .title {
109 |   font-weight: none;
110 | }
111 | .hover-bg:hover {
112 |   background-color: rgba(var(--v-theme-surface-variant), 0.1);
113 | }
114 | 
115 | .v-list-item-title,
116 | .v-list-item-subtitle {
117 |   white-space: nowrap;
118 |   overflow: hidden;
119 | }
120 | 
121 | .buttons {
122 |   display: none;
123 | }
124 | .text-item {
125 |   display: grid;
126 |   grid-template-columns: 1.5rem 150px 1fr;
127 |   gap: 1rem;
128 | }
129 | .hover-bg:hover .buttons {
130 |   display: block;
131 | }
132 | .hover-bg:hover .sub-text {
133 |   display: none;
134 | }
135 | 
136 | .v-list-item-title {
137 |   flex: 1;
138 |   min-width: 0;
139 | }
140 | 
141 | .title {
142 |   font-weight: 500;
143 | }
144 | </style>
145 | 


--------------------------------------------------------------------------------
/src/views/item/types.ts:
--------------------------------------------------------------------------------
1 | export enum ClickType {
2 |     read,
3 |     openurl,
4 |     save,
5 |     openfeed
6 | } 


--------------------------------------------------------------------------------
/src/views/reader/InjectionSymbols.ts:
--------------------------------------------------------------------------------
1 | export const summarySymbol = Symbol('summary')
2 | export const summarizingSymbol = Symbol('summarizing')


--------------------------------------------------------------------------------
/src/views/reader/index.ts:
--------------------------------------------------------------------------------
1 | import Reader from './Reader.vue'
2 | export default Reader 


--------------------------------------------------------------------------------
/src/views/reader/sub/BasicReader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="basic-reader">
  3 |     <div class="title-container">
  4 |       <a class="title-warp" :href="item.link">
  5 |         <p class="text-h4 title">{{ item.title }}</p>
  6 |         <p class="text-subtitle-2 mb-2">
  7 |           <router-link
  8 |             @click.stop=""
  9 |             class="a"
 10 |             title="前往订阅源"
 11 |             :to="'/f/' + item?.feed?.id"
 12 |             v-text="props.item.feed?.title"
 13 |           ></router-link>
 14 |           <span v-text="getSource()"></span>
 15 |         </p>
 16 |         <p class="text-subtitle-2 text-body-2" v-text="getDate()"></p>
 17 |       </a>
 18 |     </div>
 19 |     <div class="chapter-warp">
 20 |       <slot></slot>
 21 |     </div>
 22 |     <div class="summary content" v-if="summary || summarizing">
 23 |       <div class="mb-2">
 24 |         <v-icon size="small" class="mr-2">mdi-auto-fix</v-icon>
 25 |         AI 总结
 26 |       </div>
 27 |       <v-skeleton-loader v-if="summarizing" type="article"></v-skeleton-loader>
 28 |       <div v-else v-html="md2html(summary || '')"></div>
 29 |     </div>
 30 |     <div class="content" v-html="item.html"></div>
 31 |   </div>
 32 | </template>
 33 | <script setup lang="ts">
 34 | import { computed, inject } from "vue";
 35 | import { FeedItem } from "@/service/types";
 36 | import { useSideChapter } from "@/utils/useSideChapter";
 37 | import { summarySymbol, summarizingSymbol } from "../InjectionSymbols";
 38 | import { md2html } from "@/utils/mdUtils";
 39 | const props = defineProps<{
 40 |   readonly item: FeedItem;
 41 |   readonly readerRef: HTMLElement | undefined;
 42 | }>();
 43 | const description = computed(() => props.item?.description || "");
 44 | const readerRef = computed(() => props.readerRef);
 45 | useSideChapter(description, readerRef, {
 46 |   value: () => document.getElementById("chapters"),
 47 | });
 48 | function getDate() {
 49 |   const options: any = {
 50 |     year: "numeric",
 51 |     month: "long",
 52 |     day: "numeric",
 53 |     hour: "2-digit",
 54 |     minute: "2-digit",
 55 |     second: "2-digit",
 56 |     hour12: false, // 24小时制
 57 |   };
 58 |   const formattedDate = new Date(props.item.pubDate * 1000).toLocaleString(
 59 |     "zh-CN",
 60 |     options
 61 |   );
 62 |   return `${formattedDate}`;
 63 | }
 64 | function getSource() {
 65 |   return props.item.author ? " - " + props.item.author : "";
 66 | }
 67 | const summary: string | undefined = inject(summarySymbol);
 68 | const summarizing: boolean | undefined = inject(summarizingSymbol);
 69 | </script>
 70 | <style lang="scss" scoped>
 71 | .text-overflow {
 72 |   white-space: nowrap;
 73 |   overflow: hidden;
 74 |   text-overflow: ellipsis;
 75 | }
 76 | .title-container {
 77 |   margin: 0 auto 2rem;
 78 |   text-align: center;
 79 |   max-width: calc(var(--reader-main-max-width) + 42px);
 80 |   padding: 1.5rem;
 81 |   border-radius: 0.5rem;
 82 |   &:hover {
 83 |     background-color: rgb(var(--v-theme-surface-light));
 84 |   }
 85 |   a {
 86 |     text-decoration: none;
 87 |     color: rgb(var(--v-theme-surface-variant));
 88 |   }
 89 |   .title-warp {
 90 |     text-align: start;
 91 |   }
 92 |   .title {
 93 |     margin-bottom: 1rem;
 94 |     line-height: 3rem;
 95 |   }
 96 | }
 97 | 
 98 | .basic-reader {
 99 |   background-color: rgb(var(--v-theme-background));
100 | }
101 | .a {
102 |   color: rgb(var(--v-theme-surface-variant));
103 |   text-decoration: none;
104 |   &:hover {
105 |     text-decoration: underline;
106 |     color: rgb(var(--v-theme-primary));
107 |   }
108 | }
109 | .chapter-warp {
110 |   float: left;
111 |   position: sticky;
112 |   top: 10rem;
113 |   left: calc(50% + var(--reader-main-max-width) / 2 + 2rem);
114 |   max-width: 210px;
115 | }
116 | .summary {
117 |   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
118 |   padding: 1rem !important;
119 |   border-radius: 0.5rem;
120 |   max-width: calc(var(--reader-main-max-width) + 2rem) !important;
121 | }
122 | @media (max-width: 1280px) {
123 |   .chapter-warp {
124 |     position: static;
125 |     float: none;
126 |     right: 0;
127 |     max-width: 100%;
128 |   }
129 | }
130 | </style>
131 | <style lang="scss">
132 | .basic-reader {
133 |   .bar-left {
134 |     width: 150px;
135 |   }
136 |   .summary {
137 |     ol,
138 |     ul {
139 |       padding-inline-start: 1rem;
140 |     }
141 |   }
142 |   h1,
143 |   h2,
144 |   h3,
145 |   h4,
146 |   h5,
147 |   h6 {
148 |     img {
149 |       max-height: 2rem;
150 |       margin-right: 1rem;
151 |     }
152 |   }
153 |   ul {
154 |     li {
155 |       &::marker {
156 |         color: rgb(var(--v-theme-primary));
157 |         opacity: 1;
158 |       }
159 |     }
160 |   }
161 | }
162 | </style>
163 | 


--------------------------------------------------------------------------------
/src/views/reader/sub/ImageReader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="grid">
  3 |     <div>
  4 |       <div class="image-reader">
  5 |         <Swiper
  6 |           :modules="modules"
  7 |           :space-between="30"
  8 |           :slides-per-view="1"
  9 |           navigation
 10 |           pagination
 11 |           @swiper="onSwiper"
 12 |           @slideChange="onSlideChange"
 13 |           ref="swiperRef"
 14 |         >
 15 |           <SwiperSlide v-for="(image, index) in allImages" :key="index">
 16 |             <img :width="300" :src="image" />
 17 |           </SwiperSlide>
 18 |         </Swiper>
 19 |       </div>
 20 |     </div>
 21 |     <div class="text-reader">
 22 |       <basic-reader :item="item" :reader-ref="readerRef"></basic-reader>
 23 |     </div>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script lang="ts" setup>
 28 | import { ref, watch, computed } from "vue";
 29 | import { FeedItem } from "@/service/types";
 30 | import { Swiper, SwiperSlide } from "swiper/vue";
 31 | import { Navigation, Pagination } from "swiper/modules";
 32 | import "swiper/css";
 33 | import "swiper/css/navigation";
 34 | import "swiper/css/pagination";
 35 | import BasicReader from "./BasicReader.vue";
 36 | 
 37 | // 定义 props
 38 | const props = defineProps<{
 39 |   readonly item: FeedItem;
 40 |   readonly readerRef: HTMLElement | undefined;
 41 | }>();
 42 | 
 43 | // 定义 emits（如果需要的话）
 44 | const emit = defineEmits();
 45 | 
 46 | // 定义数据
 47 | const modules = [Navigation, Pagination];
 48 | const swiper = ref<any>({});
 49 | 
 50 | // 计算属性
 51 | const allImages = computed(() => {
 52 |   return props.item.images;
 53 | });
 54 | 
 55 | // 监听器
 56 | watch(
 57 |   () => props.item,
 58 |   () => {
 59 |     swiper.value.slideTo(0);
 60 |   }
 61 | );
 62 | 
 63 | // 方法
 64 | const onSwiper = (swiperInstance: any) => {
 65 |   swiper.value = swiperInstance;
 66 | };
 67 | 
 68 | const onSlideChange = (_: any) => {};
 69 | </script>
 70 | 
 71 | <style scoped>
 72 | .grid {
 73 |   height: 100%;
 74 |   display: grid;
 75 |   grid-gap: 1rem;
 76 |   grid-template-columns: minmax(20vw, 6fr) minmax(15vw, 2fr);
 77 |   background: rgb(var(--v-theme-background));
 78 | }
 79 | 
 80 | .image-reader-card {
 81 |   border-radius: 8px;
 82 |   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 83 |   padding: 20px;
 84 | }
 85 | 
 86 | .image-reader {
 87 |   position: sticky;
 88 |   top: calc(56px + 16px);
 89 | }
 90 | 
 91 | .swiper {
 92 |   border-radius: 8px;
 93 |   height: calc(100vh - 56px - 2.5rem);
 94 |   padding: 1rem;
 95 | }
 96 | 
 97 | .swiper-slide {
 98 |   display: flex;
 99 |   justify-content: center;
100 |   align-items: center;
101 | }
102 | 
103 | .swiper-slide img {
104 |   object-fit: cover;
105 |   transition: transform 0.3s ease;
106 |   max-height: 100vh;
107 |   height: auto;
108 |   width: auto;
109 |   display: none;
110 | }
111 | 
112 | :deep(.swiper-button-next),
113 | :deep(.swiper-button-prev) {
114 |   color: #fff;
115 |   background-color: rgba(var(--v-theme-surface-variant), 0.6);
116 |   padding: 20px;
117 |   border-radius: 50%;
118 | }
119 | 
120 | :deep(.swiper-pagination-bullet) {
121 |   background-color: #333;
122 | }
123 | 
124 | :deep(.swiper-pagination-bullet-active) {
125 |   background-color: rgb(var(--v-theme-primary));
126 | }
127 | .ovf {
128 |   overflow: auto;
129 | }
130 | .swiper-slide-active {
131 |   img {
132 |     display: block;
133 |   }
134 | }
135 | 
136 | @media (max-width: 1200px) {
137 |   .grid {
138 |     display: block;
139 |   }
140 |   .text-reader {
141 |     margin-top: 2rem;
142 |   }
143 | }
144 | </style>
145 | <style lang="scss">
146 | .text-reader {
147 |   img {
148 |     text-align: center;
149 |     margin: 0 auto;
150 |     max-width: 100%;
151 |     display: none;
152 |   }
153 |   .v-card-title {
154 |     display: none;
155 |   }
156 |   .bar-left {
157 |     width: 10px;
158 |   }
159 | }
160 | @media (max-width: 1200px) {
161 |   .text-reader {
162 |     img {
163 |       display: block;
164 |     }
165 |   }
166 | }
167 | </style>
168 | 


--------------------------------------------------------------------------------
/src/views/reader/sub/PodcastReader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="grid">
  3 |     <div>
  4 |       <div class="podcat-reader">
  5 |         <div class="warp">
  6 |           <div class="glass">
  7 |             <v-img
  8 |               :src="item.thumbnail || item.feed?.icon || ''"
  9 |               cover
 10 |               max-height="300px"
 11 |               max-width="300px"
 12 |               class="d-flex align-center mx-auto rounded-lg"
 13 |             >
 14 |               <div class="d-flex justify-center">
 15 |                 <!-- 播放暂停按钮 -->
 16 |                 <v-btn
 17 |                   @click="togglePlay"
 18 |                   :icon="curretIsPlaying ? 'mdi-pause' : 'mdi-play'"
 19 |                   theme="dark"
 20 |                   style="opacity: 0.7"
 21 |                 >
 22 |                 </v-btn>
 23 |               </div>
 24 |             </v-img>
 25 |           </div>
 26 |         </div>
 27 |       </div>
 28 |     </div>
 29 |     <div>
 30 |       <basic-reader :item="item" :reader-ref="readerRef"></basic-reader>
 31 |     </div>
 32 |   </div>
 33 | </template>
 34 | 
 35 | <script lang="ts" setup>
 36 | import BasicReader from "./BasicReader.vue";
 37 | import { FeedItem } from "@/service/types";
 38 | import { usePlayListStore } from "@/store/playlist";
 39 | import { computed, onMounted, onUnmounted, watch, nextTick } from "vue";
 40 | 
 41 | const props = defineProps<{
 42 |   readonly item: FeedItem;
 43 |   readonly readerRef: HTMLElement | undefined;
 44 | }>();
 45 | const store = usePlayListStore();
 46 | 
 47 | const curretIsPlaying = computed(() =>
 48 |   store.currentPlaying?.id == props.item.id ? store.isPlaying : false
 49 | );
 50 | 
 51 | function togglePlay() {
 52 |   const item = props.item;
 53 |   if (store.currentPlaying?.id == item.id) {
 54 |     store.togglePlaying();
 55 |   } else {
 56 |     store.play({
 57 |       id: item.id,
 58 |       url: item.enclosure,
 59 |       thumbil: item.thumbnail || item.feed?.icon || "",
 60 |       title: item.title,
 61 |       subtitle: item.feed?.title || "",
 62 |       feedId: item.feedId,
 63 |       currentTime: 1000,
 64 |     });
 65 |   }
 66 | }
 67 | 
 68 | let aList: Element[] = [];
 69 | onMounted(() => {
 70 |   if (props.readerRef) {
 71 |     aList = Array.from(props.readerRef.querySelectorAll(".content a")).filter(
 72 |       (a) => isTimeStr(a.textContent || "")
 73 |     );
 74 |   }
 75 | 
 76 |   addClass(aList);
 77 |   aList.forEach((a) => {
 78 |     a.addEventListener("click", aclick);
 79 |   });
 80 | });
 81 | onUnmounted(() => {
 82 |   aList.forEach((a) => {
 83 |     a.removeEventListener("click", aclick);
 84 |   });
 85 | });
 86 | 
 87 | watch(
 88 |   () => props.item.id,
 89 |   () => {
 90 |     nextTick(() => {
 91 |       aList.forEach((a) => {
 92 |         a.removeEventListener("click", aclick);
 93 |       });
 94 |       if (props.readerRef) {
 95 |         aList = Array.from(
 96 |           props.readerRef.querySelectorAll(".content a")
 97 |         ).filter((a) => isTimeStr(a.textContent || ""));
 98 |       }
 99 |       addClass(aList);
100 |       aList.forEach((a) => {
101 |         a.addEventListener("click", aclick);
102 |       });
103 |     });
104 |   }
105 | );
106 | 
107 | function aclick(e: Event) {
108 |   if (
109 |     e.target instanceof HTMLAnchorElement &&
110 |     e.target.textContent?.includes(":")
111 |   ) {
112 |     e.preventDefault();
113 |     e.stopPropagation();
114 |     if (store.currentPlaying?.id == props.item.id) {
115 |       store.setCurrentTime(time2seconds(e.target.textContent || "00:00:00"));
116 |     }
117 |   }
118 | }
119 | 
120 | function isTimeStr(str: string) {
121 |   // Matches formats like "HH:MM" (24-hour) or "HH:MM:SS"
122 |   const timeRegex = /^([01]?[0-9]|2[0-3]):([0-5][0-9])(?::([0-5][0-9]))?$/;
123 |   return timeRegex.test(str);
124 | }
125 | 
126 | function time2seconds(time: string) {
127 |   const [hours, minutes, seconds] = time.split(":").map(Number);
128 |   return hours * 3600 + minutes * 60 + seconds;
129 | }
130 | 
131 | function addClass(list: Element[]) {
132 |   list.forEach((a) => {
133 |     a.classList.add("timestamp");
134 |   });
135 | }
136 | </script>
137 | 
138 | <style scoped>
139 | .grid {
140 |   display: grid;
141 |   grid-gap: 1rem;
142 |   grid-template-columns: minmax(20vw, 1fr) 2fr;
143 | }
144 | .podcat-reader {
145 |   width: 100%;
146 |   position: sticky;
147 |   top: calc(56px + 16px);
148 |   padding: 1rem;
149 |   .warp {
150 |     height: calc(100vh - 56px - 5rem);
151 |     border-radius: 1rem;
152 |     background: linear-gradient(
153 |       to right bottom,
154 |       rgba(var(--v-theme-primary), 0.6),
155 |       rgba(var(--v-theme-primary), 1)
156 |     );
157 |   }
158 |   .glass {
159 |     height: 100%;
160 |     display: flex;
161 |     align-items: center;
162 |     padding: 20px;
163 |     color: white;
164 |     font-size: 20px;
165 |     background: rgba(0, 0, 0, 0.3);
166 |     border-radius: 1rem;
167 |     backdrop-filter: blur(10px); /* 模糊效果 */
168 |     -webkit-backdrop-filter: blur(10px);
169 |   }
170 |   .v-card {
171 |     margin: 0 auto;
172 |     background-color: transparent;
173 |   }
174 | }
175 | @media (max-width: 760px) {
176 |   .grid {
177 |     grid-template-columns: 1fr;
178 |     .warp {
179 |       height: 30vh;
180 |     }
181 |   }
182 | }
183 | </style>
184 | <style lang="css">
185 | .timestamp::before {
186 |   content: " ";
187 |   height: 1rem;
188 |   width: 1rem;
189 |   display: inline-flex;
190 |   border: 2px solid rgb(var(--v-theme-primary));
191 |   border-radius: 50%;
192 |   /* box-sizing: border-box; */
193 |   margin-right: 0.5rem;
194 | }
195 | </style>
196 | 


--------------------------------------------------------------------------------
/src/views/reader/sub/VideoReader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="title-container">
  3 |     <a class="title-warp" :href="item.link" target="_blank">
  4 |       <p class="text-h4 title">{{ item.title }}</p>
  5 |       <p class="text-subtitle-2 mb-2">
  6 |         <router-link
  7 |           @click.stop=""
  8 |           class="a"
  9 |           title="前往订阅源"
 10 |           :to="'/f/' + item?.feed?.id"
 11 |           v-text="props.item.feed?.title"
 12 |         ></router-link>
 13 |         <span v-text="getSource()"></span>
 14 |       </p>
 15 |       <p class="text-subtitle-2 text-body-2" v-text="getDate()"></p>
 16 |     </a>
 17 |   </div>
 18 | 
 19 |   <div class="content">
 20 |     <iframe
 21 |       id="ytplayer"
 22 |       type="text/html"
 23 |       class="iframe"
 24 |       :src="videoUrl()"
 25 |       frameborder="0"
 26 |       allow="fullscreen"
 27 |       mozallowfullscreen="mozallowfullscreen"
 28 |       msallowfullscreen="msallowfullscreen"
 29 |       oallowfullscreen="oallowfullscreen"
 30 |       webkitallowfullscreen="webkitallowfullscreen"
 31 |     ></iframe>
 32 |     <div class="mt-6" v-html="item.html"></div>
 33 |   </div>
 34 | </template>
 35 | <script lang="ts" setup>
 36 | import { FeedItem } from "@/service/types";
 37 | 
 38 | const props = defineProps<{
 39 |   item: FeedItem;
 40 | }>();
 41 | 
 42 | function getDate() {
 43 |   const options: any = {
 44 |     year: "numeric",
 45 |     month: "long",
 46 |     day: "numeric",
 47 |     hour: "2-digit",
 48 |     minute: "2-digit",
 49 |     second: "2-digit",
 50 |     hour12: false, // 24小时制
 51 |   };
 52 |   const formattedDate = new Date(props.item.pubDate * 1000).toLocaleString(
 53 |     "zh-CN",
 54 |     options
 55 |   );
 56 |   return ` | ${formattedDate}`;
 57 | }
 58 | function getSource() {
 59 |   return " - " + props.item.author;
 60 | }
 61 | 
 62 | function videoUrl() {
 63 |   const link = props.item.link;
 64 |   return link.indexOf("youtube.com/watch")
 65 |     ? `https://www.youtube-nocookie.com/embed/${
 66 |         link.split("?v=")[1]
 67 |       }?autoplay=1`
 68 |     : link;
 69 | }
 70 | </script>
 71 | <style lang="scss" scoped>
 72 | .title-container {
 73 |   margin: 0 auto 2rem;
 74 |   text-align: center;
 75 |   max-width: 692px;
 76 |   padding: 1.5rem;
 77 |   border-radius: 0.5rem;
 78 |   &:hover {
 79 |     background-color: rgb(var(--v-theme-surface-light));
 80 |   }
 81 |   a {
 82 |     text-decoration: none;
 83 |     color: rgb(var(--v-theme-surface-variant));
 84 |   }
 85 |   .title-warp {
 86 |     text-align: start;
 87 |   }
 88 |   .title {
 89 |     margin-bottom: 1rem;
 90 |     line-height: 3rem;
 91 |   }
 92 | }
 93 | .iframe {
 94 |   position: relative;
 95 |   width: 100%;
 96 |   max-height: 366px;
 97 |   height: 55vw;
 98 |   z-index: 1;
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vite/client" />
 2 | 
 3 | declare module "*.vue" {
 4 |   import type { DefineComponent } from "vue";
 5 |   const component: DefineComponent<{}, {}, any>;
 6 |   export default component;
 7 | }
 8 | declare function info(...args: any): void
 9 | declare function debug(...args: any): void
10 | declare function log(...args: any): void
11 | declare function err(e: Error | unknown, ...args: any): void
12 | 
13 | declare function setTitle(arg: number): void
14 | 
15 | declare namespace CryptoJS {
16 |   function MD5(str: string): string;
17 | }
18 | 
19 | 
20 | declare const webfollowApp: {
21 |   getUnReadUrl: (currentUrl: string, isNext: boolean) => string,
22 |   toogleSidebar: () => void,
23 |   toggleItemView: () => void,
24 |   toggleItemUnread: () => void,
25 |   upItemsToggleRead: ((item: FeedItem, index: number) => void) | undefined,
26 |   view: {
27 |     changeEntryCurrentIndex: (index: number) => void
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "preserve",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true,
22 |     "baseUrl": "./",
23 |     "paths": {"@/*": ["src/*"]}
24 |   },
25 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/store/feeds.ts", "src/store/feeds.ts", "*.js"],
26 |   "references": [{ "path": "./tsconfig.node.json" }]
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
  1 | import { defineConfig } from "vite";
  2 | import vuetify, {
  3 |   transformAssetUrls
  4 | } from 'vite-plugin-vuetify'
  5 | import ViteFonts from 'unplugin-fonts/vite'
  6 | import vue from "@vitejs/plugin-vue";
  7 | import { VitePWA } from 'vite-plugin-pwa';
  8 | 
  9 | import {
 10 |   fileURLToPath,
 11 |   URL
 12 | } from "node:url"
 13 | 
 14 | const host = process.env.TAURI_DEV_HOST;
 15 | 
 16 | // https://vitejs.dev/config/
 17 | export default defineConfig(async () => ({
 18 |   plugins: [vue(),
 19 |   // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
 20 |   vuetify({
 21 |     autoImport: true,
 22 |     // styles: {
 23 |     //   configFile: 'src/styles/settings.scss',
 24 |     // },
 25 |   }),
 26 |   ViteFonts({
 27 |     google: {
 28 |       families: [{
 29 |         name: 'Roboto',
 30 |         styles: 'wght@100;300;400;500;700;900',
 31 |       }],
 32 |     },
 33 |   }),
 34 |   VitePWA({
 35 |     injectRegister: 'auto',
 36 |     registerType: 'autoUpdate',
 37 |     devOptions: {
 38 |       enabled: true
 39 |     },
 40 |     includeAssets: ['favicon.ico', 'logo.svg'],
 41 |     manifest: {
 42 |       name: 'WebFollow',
 43 |       short_name: 'WebFollow',
 44 |       description: '做懂你阅读的RSS阅读器',
 45 |       display: 'standalone',
 46 |       theme_color: '#0000',
 47 |       background_color: '#fff',
 48 |       icons: [
 49 |         {
 50 |           src: 'logo.svg',
 51 |           sizes: '48x48',
 52 |           type: 'image/png',
 53 |         },
 54 |         {
 55 |           src: 'logo.svg',
 56 |           sizes: '192x192',
 57 |           type: 'image/png',
 58 |         },
 59 |         {
 60 |           src: 'logo.svg',
 61 |           sizes: '512x512',
 62 |           type: 'image/png',
 63 |         },
 64 |         {
 65 |           "src": "logo.svg",
 66 |           "sizes": "any"
 67 |         }
 68 |       ],
 69 |     },
 70 |   }),],
 71 |   resolve: {
 72 |     alias: {
 73 |       '@': fileURLToPath(new URL('./src', import.meta.url))
 74 |     }
 75 |   },
 76 |   css: {
 77 |     preprocessorOptions: {
 78 |       scss: {
 79 |         api: 'modern-compiler' // or "modern"
 80 |       }
 81 |     }
 82 |   },
 83 |   // 1. prevent vite from obscuring rust errors
 84 |   clearScreen: false,
 85 |   // 2. tauri expects a fixed port, fail if that port is not available
 86 |   server: {
 87 |     port: 1420,
 88 |     strictPort: true,
 89 |     host: host || false,
 90 |     hmr: host
 91 |       ? {
 92 |         protocol: "ws",
 93 |         host,
 94 |         port: 1421,
 95 |       }
 96 |       : undefined,
 97 |     watch: {
 98 |       // 3. tell vite to ignore watching `src-tauri`
 99 |       ignored: ["**/src-tauri/**"],
100 |     },
101 |     proxy: {
102 |       "/fever/": {
103 |         // target: "https://api.webfollow.cc/api",
104 |         target: "http://127.0.0.1:8086/",
105 | 
106 |         changeOrigin: true,
107 |         // rewrite: (path) => path.replace(/^\/fever/, ""),
108 |       },
109 |     },
110 |   },
111 | }));
112 | 


--------------------------------------------------------------------------------