Polish settings and mobile layout

Author: zijian-z

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Zijian Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -81,6 +81,8 @@ Worker 配置在 `wrangler.jsonc`：
 - `ALLOWED_HOSTS`：留空表示允许代理所有 http/https RSS 地址；如果要限制来源，可填逗号分隔的主机名。
 - `MAX_BYTES`：最大响应体字节数，默认 `8388608`。
 
+默认代理模板是 `https://api.plunox.site/rss?url={url}`。该代理不会留存用户信息和请求记录；你也可以在设置中替换为自己的代理地址，或清空后直接请求 RSS 地址。
+
 桌面开发：
 
 ```bash
@@ -104,3 +106,7 @@ GitHub Actions 会在 `main` 分支构建 Web 版本，并分别在 Linux、macO
 - `RSS_READER_PAGE_TOKEN`：一个能写入 `zijian-z/rss-reader-page` 的 token。
 
 然后在 `zijian-z/rss-reader-page` 仓库里启用 GitHub Pages，发布来源选择 `main` 分支的根目录。启用后通常可以通过 `https://zijian-z.github.io/rss-reader-page/` 访问。
+
+## 许可证
+
+MIT License. 源代码：<https://github.com/zijian-z/rss-reader>

package-lock.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "description": "A browser and desktop RSS reader built with React and HeroUI.",
+  "license": "MIT",
   "author": {
     "name": "Zijian Zhang",
     "email": "zijian-zhang@outlook.com"

package.json

@@ -43,6 +43,14 @@ const dateOnlyFormatter = new Intl.DateTimeFormat("zh-CN", {
   day: "numeric",
 });
 
+const ACCENT_OPTIONS = [
+  { value: "blue", label: "蓝色" },
+  { value: "slate", label: "石墨" },
+  { value: "violet", label: "紫色" },
+  { value: "rose", label: "玫瑰" },
+  { value: "amber", label: "琥珀" },
+];
+
 function App() {
   const [library, setLibrary] = useState(loadLibrary);
   const [mobilePane, setMobilePane] = useState("sources");
@@ -381,7 +389,10 @@ function App() {
   };
 
   return (
-    <div className={`app ${library.config.density}`} style={cssVars}>
+    <div
+      className={`app ${library.config.density} accent-${library.config.accentColor || "blue"}`}
+      style={cssVars}
+    >
       <header className="topbar">
         <nav className="mobile-switch" aria-label="移动端视图">
           <button
@@ -582,7 +593,13 @@ function SourcesPane({
           </Button>
         </Tooltip>
         <Tooltip content="添加订阅" placement="right">
-          <Button isIconOnly color="primary" aria-label="添加订阅" onPress={onAdd}>
+          <Button
+            isIconOnly
+            className="accent-icon-button"
+            variant="flat"
+            aria-label="添加订阅"
+            onPress={onAdd}
+          >
             <Plus size={18} />
           </Button>
         </Tooltip>
@@ -618,7 +635,13 @@ function SourcesPane({
               </Button>
             </Tooltip>
             <Tooltip content="添加订阅">
-              <Button isIconOnly color="primary" aria-label="添加订阅" onPress={onAdd}>
+              <Button
+                isIconOnly
+                className="accent-icon-button"
+                variant="flat"
+                aria-label="添加订阅"
+                onPress={onAdd}
+              >
                 <Plus size={18} />
               </Button>
             </Tooltip>
@@ -988,7 +1011,7 @@ function AddFeedDialog({ folders, onClose, onSubmit }) {
           <Button variant="flat" onPress={onClose}>
             取消
           </Button>
-          <Button color="primary" type="submit">
+          <Button className="accent-button" type="submit">
             添加
           </Button>
         </div>
@@ -1047,7 +1070,7 @@ function EditFeedDialog({ feed, folders, onClose, onSubmit }) {
           <Button variant="flat" onPress={onClose}>
             取消
           </Button>
-          <Button color="primary" type="submit">
+          <Button className="accent-button" type="submit">
             保存
           </Button>
         </div>
@@ -1094,9 +1117,12 @@ function SettingsDialog({
             <input
               value={config.proxyTemplate}
               onChange={(event) => onConfigChange({ proxyTemplate: event.target.value })}
-              placeholder="https://proxy.example/raw?url={url}"
+              placeholder="留空则直接请求 RSS 地址"
               type="text"
             />
+            <small className="field-note">
+              默认代理不会留存用户信息和请求记录；也可以替换为自己的代理地址，或清空后直接请求 RSS。
+            </small>
           </label>
         </section>
 
@@ -1148,6 +1174,19 @@ function SettingsDialog({
               <option value="dark">深色</option>
             </select>
           </label>
+          <label>
+            <span>强调色</span>
+            <select
+              value={config.accentColor || "blue"}
+              onChange={(event) => onConfigChange({ accentColor: event.target.value })}
+            >
+              {ACCENT_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
           <label>
             <span>密度</span>
             <select
@@ -1195,24 +1234,42 @@ function SettingsDialog({
           </Button>
         </section>
 
-        <section>
+        <section className="data-section">
           <h3>数据</h3>
-          <div className="data-actions">
-            <Button startContent={<Download size={17} />} variant="flat" onPress={onExport}>
+          <div className="data-action-grid">
+            <Button
+              className="data-action-button"
+              startContent={<Download size={17} />}
+              variant="flat"
+              onPress={onExport}
+            >
               导出 JSON
             </Button>
-            <Button startContent={<Upload size={17} />} variant="flat" onPress={onImportClick}>
+            <Button
+              className="data-action-button"
+              startContent={<Upload size={17} />}
+              variant="flat"
+              onPress={onImportClick}
+            >
               导入 JSON
             </Button>
-            <Button color="danger" variant="flat" onPress={onReset}>
+            <Button className="data-action-button danger-action" variant="flat" onPress={onReset}>
               重置
             </Button>
           </div>
         </section>
+
+        <section className="about-section">
+          <h3>关于</h3>
+          <p>Copyright © 2026 Zijian Zhang. Released under the MIT License.</p>
+          <a href="https://github.com/zijian-z/rss-reader" target="_blank" rel="noreferrer">
+            github.com/zijian-z/rss-reader
+          </a>
+        </section>
       </div>
 
       <div className="dialog-actions">
-        <Button color="primary" onPress={onClose}>
+        <Button className="accent-button" onPress={onClose}>
           完成
         </Button>
       </div>

src/App.jsx

@@ -1,6 +1,8 @@
 import { uid } from "./rss.js";
 
 export const STORAGE_KEY = "rss-reader-library-v1";
+export const CURRENT_SCHEMA_VERSION = 2;
+export const DEFAULT_PROXY_TEMPLATE = "https://api.plunox.site/rss?url={url}";
 
 export const DEFAULT_CONFIG = {
   refreshMinutes: 30,
@@ -9,16 +11,17 @@ export const DEFAULT_CONFIG = {
   readerWidth: 780,
   fontFamily: "system",
   theme: "system",
+  accentColor: "blue",
   density: "comfortable",
-  proxyTemplate: "",
+  proxyTemplate: DEFAULT_PROXY_TEMPLATE,
 };
 
 export function createDefaultLibrary() {
   const techFolderId = "folder_tech";
   const cultureFolderId = "folder_culture";
 
   return {
-    schemaVersion: 1,
+    schemaVersion: CURRENT_SCHEMA_VERSION,
     config: { ...DEFAULT_CONFIG },
     folders: [
       { id: techFolderId, name: "科技" },
@@ -79,9 +82,14 @@ export function normalizeLibrary(input) {
     ...DEFAULT_CONFIG,
     ...(typeof input?.config === "object" && input.config ? input.config : {}),
   };
+  const schemaVersion = Number(input?.schemaVersion || 1);
+
+  if (schemaVersion < 2 && !config.proxyTemplate) {
+    config.proxyTemplate = DEFAULT_PROXY_TEMPLATE;
+  }
 
   return {
-    schemaVersion: 1,
+    schemaVersion: CURRENT_SCHEMA_VERSION,
     config,
     folders: folders.map(normalizeFolder).filter(Boolean),
     feeds: feeds.map(normalizeFeed).filter(Boolean),