diff --git a/README.md b/README.md index 51898d6..2f1a9e2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,151 @@ -# DEPRECATED: This theme is now included as a core Discourse theme in https://github.com/discourse/discourse, -# if you have this theme installed, please remove it. +# discourse_theme_ran（Horizon 主题源码） -Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites. +> 该仓库是 Discourse `Horizon (beta)` 主题的源码副本。仓库内原 README 已标注该主题已并入 Discourse Core。 -https://meta.discourse.org/t/horizon-theme/360486 +## 1. 项目作用 + +这是一个 Discourse 主题项目，核心目标是： +- 改造论坛整体视觉（卡片化主题列表、圆角、配色系统、侧边栏样式） +- 增强交互（侧边栏新建主题按钮、颜色方案切换、Composer Peek 模式） +- 调整不同页面体验（分类页、主题页、聊天页、登录页、移动端） +- 提供系统测试，验证主题关键行为 + +--- + +## 2. 目录结构与作用 + +### `.github/` +- `workflows/discourse-theme.yml`：CI 配置，复用 Discourse 官方主题工作流。 + +### `assets/` +- `.gitkeep`：占位目录，预留静态资源（当前无实际资源文件）。 + +### `common/` +- `common.scss`：公共样式入口，按模块聚合 `scss/` 下样式。 +- `color_definitions.scss`：主题色变量定义（基于 tertiary 推导背景、链接、侧边栏等）。 +- `head_tag.html`：注入浏览器兼容检测脚本，不支持 `hsl(from ...)` 时提示升级浏览器。 + +### `desktop/` +- `desktop.scss`：桌面端样式入口。 +- `desktop-full-width.scss`：全宽布局与头部网格布局规则。 +- `desktop-horizon-fixes.scss`：桌面端修复（如 bulk select 样式/布局修正）。 + +### `javascripts/` +- `.gitkeep`：占位。 +- `discourse/api-initializers/`：通过 Discourse API 注入主题行为。 + - `horizon.gjs`：主题主初始化器；注册实验装饰层、配色选择器、站点设置覆盖、管理员弃用提示。 + - `sidebar-new-topic-button-connector.js`：把自定义“新建主题”按钮渲染到侧边栏。 + - `composer-peek-toggle-connector.js`：把 Peek 模式切换按钮挂到 composer 工具区。 + - `full-width-logo-behavior.js`：侧边栏展开时控制 Logo 最小化行为。 + - `reposition-bulk-select.js`：将批量选择入口放到导航控制区。 + - `hamburger-click-outside-transformer.js`：扩展汉堡菜单“点击外部关闭”例外元素。 +- `discourse/components/`：Glimmer 组件。 + - `experimental-screen.gjs`：主内容四角/底部装饰层组件（根据容器位置实时计算）。 + - `sidebar-new-topic-button.gjs`：侧边栏新建主题按钮逻辑（权限、分类只读、草稿、关闭汉堡菜单）。 + - `composer-peek-mode-toggle.gjs`：Composer Peek 模式开关，偏好写入 `keyValueStore`。 + - `user-color-palette-selector.gjs`：用户配色切换主组件（支持匿名/登录、明暗配套、CSS 热替换）。 + - `user-color-palette-menu-item.gjs`：配色菜单项。 +- `discourse/components/card/`：主题列表卡片列组件。 + - `topic-status-column.gjs`：Pinned/Hot 状态徽章。 + - `topic-category-column.gjs`：分类列。 + - `topic-creator-column.gjs`：主题创建者头像列。 + - `topic-replies-column.gjs`：回复数列。 + - `topic-likes-column.gjs`：点赞数列（当前主题列表布局中未启用展示）。 + - `topic-activity-column.gjs`：最近活动信息（回复/创建/更新与时间）。 +- `discourse/initializers/topic-list-columns.gjs`：重排主题列表列、注入卡片列、改写点击行为与移动布局策略。 + +### `locales/` +- `en.yml`：主题文案与元数据（如 `topic_hot`、`topic_pinned`、描述文本）。 + +### `scss/` +按功能拆分的样式模块（由 `common/common.scss` 与 `desktop/desktop.scss` 聚合）： +- `variables.scss`：全局尺寸/圆角/间距变量。 +- `main.scss`：页面主体容器网格与背景结构。 +- `topic-cards.scss`：主题列表卡片化布局核心样式。 +- `topic.scss`：主题阅读页、时间线、帖子流样式。 +- `categories-view.scss`：分类页与分类+最新混合页样式。 +- `sidebar.scss`：侧边栏容器/section/链接样式。 +- `sidebar-new-topic-button.scss`：侧边栏新建主题按钮视觉与状态。 +- `header.scss`：顶部栏、通知菜单、图标交互样式。 +- `nav-pills.scss`：列表导航区（sticky、tab/下拉）样式。 +- `buttons.scss`：按钮体系（默认/主按钮 hover、focus、active）。 +- `composer.scss`：编辑器外观与工具条、翻译 composer 相关样式。 +- `composer-peek-mode.scss`：Peek 模式下 composer 与主布局联动。 +- `chat.scss`：聊天页/聊天抽屉适配。 +- `welcome-banner.scss`：欢迎横幅和搜索区域样式。 +- `mobile-stuff.scss`：移动端/小屏布局调整。 +- `login.scss`：登录类页面布局样式。 +- `misc.scss`：分散组件兼容/补丁样式。 +- `hiddenstuff.scss`：隐藏部分原生 UI 元素。 +- `color-choice.scss`：配色切换菜单样式。 +- `color-exploration.scss`：侧边栏等颜色变量实验定义。 +- `box-view.scss`：实验装饰层（四角遮罩）与聊天相关视觉细节。 +- `desktop-full-width.scss`、`desktop-horizon-fixes.scss`：虽然在 `scss/` 目录下存在同名文件，实际桌面入口使用 `desktop/` 目录版本。 + +### `screenshots/` +- `light.png`、`dark.png`：主题明/暗模式截图，供主题元信息展示。 + +### `spec/` +系统测试（RSpec + Capybara）： +- `system/core_features_spec.rb`：主题与核心能力兼容性基础测试。 +- `system/horizon_high_level_spec.rb`：高层端到端流程（主题列表、导航、配色切换）。 +- `system/sidebar_topic_button_spec.rb`：侧边栏新建主题按钮行为测试。 +- `system/composer_peek_spec.rb`：Peek 模式可见性与持久化测试。 +- `system/user_color_palette_selector_spec.rb`：配色切换在匿名/登录/深色模式下的行为测试。 +- `system/page_objects/components/user_color_palette_selector.rb`：配色选择器的 PageObject 封装。 +- `.gitkeep`：占位。 + +### `test/` +- `acceptance/.gitkeep`：预留前端测试目录（当前无具体测试文件）。 + +--- + +## 3. 根目录文件作用 + +- `about.json`：主题元数据（名称、作者、链接、版本、颜色方案、截图、modifiers）。 +- `settings.yml`：主题设置项（欢迎横幅开关、搜索体验模式）。 +- `README.md`：项目说明文档（本文件）。 +- `LICENSE`：MIT 许可证。 +- `package.json`：前端开发依赖与 Node/pnpm 版本约束。 +- `pnpm-lock.yaml`：前端依赖锁定文件。 +- `Gemfile` / `Gemfile.lock`：Ruby 工具链依赖（rubocop-discourse、syntax_tree 等）。 +- `.discourse-compatibility`：与 Discourse 版本兼容映射。 +- `eslint.config.mjs`：ESLint 配置（继承 `@discourse/lint-configs`）。 +- `stylelint.config.mjs`：Stylelint 配置。 +- `.template-lintrc.cjs`：Ember Template Lint 配置。 +- `.prettierrc.cjs`：Prettier 配置。 +- `.rubocop.yml`：Rubocop 配置（Discourse 规则）。 +- `.streerc`：Syntax Tree 格式化配置。 +- `.npmrc`：npm 行为约束（严格引擎、禁自动 peer 安装）。 +- `.gitignore`：Git 忽略规则。 + +--- + +## 4. 关键功能对应关系（便于快速定位） + +- 主题配色切换： + - 逻辑：`javascripts/discourse/components/user-color-palette-selector.gjs` + - 菜单样式：`scss/color-choice.scss` + - 颜色定义：`about.json` + `common/color_definitions.scss` + +- 侧边栏新建主题按钮： + - 逻辑：`javascripts/discourse/components/sidebar-new-topic-button.gjs` + - 挂载：`javascripts/discourse/api-initializers/sidebar-new-topic-button-connector.js` + - 样式：`scss/sidebar-new-topic-button.scss` + +- 主题列表卡片化： + - 列注册：`javascripts/discourse/initializers/topic-list-columns.gjs` + - 各列组件：`javascripts/discourse/components/card/*.gjs` + - 主样式：`scss/topic-cards.scss` + +- Composer Peek 模式： + - 逻辑：`javascripts/discourse/components/composer-peek-mode-toggle.gjs` + - 挂载：`javascripts/discourse/api-initializers/composer-peek-toggle-connector.js` + - 样式：`scss/composer-peek-mode.scss` + +--- + +## 5. 说明 + +- 此仓库 README 原文已声明：该主题已并入 Discourse Core，生产环境优先使用 Core 内置 Horizon 主题。 +- 当前仓库更适合作为学习/二次开发参考，用于理解 Discourse 主题的样式组织方式与前端扩展点。