Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: ui design #42

Merged
merged 14 commits into from
Aug 8, 2024
Merged

refactor: ui design #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d01d4ad
refactor: ui design
ruibaby Aug 6, 2024
771ee77
Merge remote-tracking branch 'upstream/main' into refactor/ui
ruibaby Aug 7, 2024
ed4b6aa
Refine form ui
ruibaby Aug 7, 2024
a6d618e
Refine global ui
ruibaby Aug 7, 2024
0004ebd
Update build tasks
ruibaby Aug 7, 2024
f5ff0d3
Update build tasks
ruibaby Aug 7, 2024
77f9ed7
Merge branch 'main' into refactor/ui
JohnNiang Aug 7, 2024
0dba8f6
Refine css var
ruibaby Aug 7, 2024
67b6ecf
Update docs
ruibaby Aug 7, 2024
833b265
Fix icons
ruibaby Aug 8, 2024
be99d3c
Prevent body scroll when the search modal opens
ruibaby Aug 8, 2024
5fc02c6
Add Credits
ruibaby Aug 8, 2024
c84833d
rem to em
ruibaby Aug 8, 2024
116ee3b
Add preview image
ruibaby Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 72 additions & 63 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

Halo 2.0 的通用搜索组件插件。

![Preview](./images/preview.png)

## 使用方式

1. 下载，目前提供以下两个下载方式：
Expand Down Expand Up @@ -68,46 +70,54 @@ halo:

目前已提供的 CSS 变量：

| 变量名 | 描述 |
| --------------------------------------------------- | ------------------ |
| `--halo-search-widget-base-font-size` | 基础字体大小 |
| `--halo-search-widget-base-border-radius` | 基础元素的圆角 |
| `--halo-search-widget-base-font-family` | 基础字体族 |
| `--halo-search-widget-color-modal-layer` | 模态层颜色 |
| `--halo-search-widget-color-modal-content-bg` | 模态内容背景颜色 |
| `--halo-search-widget-color-form-input-bg` | 表单输入背景颜色 |
| `--halo-search-widget-color-form-input` | 表单输入文字颜色 |
| `--halo-search-widget-color-form-input-placeholder` | 表单输入占位符颜色 |
| `--halo-search-widget-color-form-divider` | 表单分隔线颜色 |
| `--halo-search-widget-color-result-empty` | 无结果提示颜色 |
| `--halo-search-widget-color-result-item-bg` | 结果项背景颜色 |
| `--halo-search-widget-color-result-item-hover-bg` | 结果项悬停背景颜色 |
| `--halo-search-widget-color-result-item-title` | 结果项标题颜色 |
| `--halo-search-widget-color-result-item-content` | 结果项内容颜色 |
| `--halo-search-widget-color-command-kbd-item` | 命令键盘项颜色 |
| `--halo-search-widget-color-command-kbd-border` | 命令键盘边框颜色 |
| 变量名 | 描述 | 备注 |
|-----------------------------------------------------|------------------|----------------------------------------------------------------------------------|
| `--halo-search-widget-base-font-size` | 基础字体大小 | -- |
| `--halo-search-widget-base-font-family` | 字体 | -- |
| `--halo-search-widget-base-rounded` | 边框圆角 | -- |
| `--halo-search-widget-base-bg-color` | 基础背景色 | -- |
| `--halo-search-widget-primary-color` | 主色 | -- |
| `--halo-search-widget-muted-color` | 辅助色 | -- |
| `--halo-search-widget-content-color` | 文本色 | -- |
| `--halo-search-widget-modal-bg-color` | 模态框背景色 | -- |
| `--halo-search-widget-modal-layer-color` | 模态框遮挡层背景色 | -- |
| `--halo-search-widget-hit-bg-color` | 搜索结果条目背景色 | -- |
| `--halo-search-widget-divider-color` | 分割线颜色 | -- |
| `--halo-search-widget-kbd-border-color` | 快捷键图标边框颜色 | -- |
| `--halo-search-widget-kbd-shadow` | 快捷键图标阴影 | -- |
| `--halo-search-widget-base-border-radius` | 基础元素的圆角 | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-base-rounded` 代替 |
| `--halo-search-widget-color-modal-layer` | 模态层颜色 | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-modal-layer-color` 代替 |
| `--halo-search-widget-color-modal-content-bg` | 模态内容背景颜色 | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-modal-bg-color` 代替 |
| `--halo-search-widget-color-form-input-bg` | 表单输入背景颜色 | 已过时，将在未来的版本移除 |
| `--halo-search-widget-color-form-input` | 表单输入文字颜色 | 已过时，将在未来的版本移除 |
| `--halo-search-widget-color-form-input-placeholder` | 表单输入占位符颜色 | 已过时，将在未来的版本移除 |
| `--halo-search-widget-color-form-divider` | 表单分隔线颜色 | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-divider-color` 代替 |
| `--halo-search-widget-color-result-empty` | 无结果提示颜色 | 已过时，将在未来的版本移除 |
| `--halo-search-widget-color-result-item-bg` | 结果项背景颜色 | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-hit-bg-color` 代替 |
| `--halo-search-widget-color-result-item-hover-bg` | 结果项悬停背景颜色 | 已过时，将在未来的版本移除 |
| `--halo-search-widget-color-result-item-title` | 结果项标题颜色 | 已过时，将在未来的版本移除 |
| `--halo-search-widget-color-result-item-content` | 结果项内容颜色 | 已过时，将在未来的版本移除 |
| `--halo-search-widget-color-command-kbd-item` | 命令键盘项颜色 | 已过时，将在未来的版本移除 |
| `--halo-search-widget-color-command-kbd-border` | 命令键盘边框颜色 | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-kbd-border-color` 代替 |

<details>
<summary>点击查看 CSS 代码模板</summary>

```css
:root {
--halo-search-widget-base-font-size: ;
--halo-search-widget-base-border-radius: ;
--halo-search-widget-base-font-family: ;
--halo-search-widget-color-modal-layer: ;
--halo-search-widget-color-modal-content-bg: ;
--halo-search-widget-color-form-input-bg: ;
--halo-search-widget-color-form-input: ;
--halo-search-widget-color-form-input-placeholder: ;
--halo-search-widget-color-form-divider: ;
--halo-search-widget-color-result-empty: ;
--halo-search-widget-color-result-item-bg: ;
--halo-search-widget-color-result-item-hover-bg: ;
--halo-search-widget-color-result-item-title: ;
--halo-search-widget-color-result-item-content: ;
--halo-search-widget-color-command-kbd-item: ;
--halo-search-widget-color-command-kbd-border: ;
:root{
--halo-search-widget-base-font-size: ;
--halo-search-widget-base-font-family: ;
--halo-search-widget-base-rounded: ;
--halo-search-widget-base-bg-color: ;
--halo-search-widget-primary-color: ;
--halo-search-widget-muted-color: ;
--halo-search-widget-content-color: ;
--halo-search-widget-modal-bg-color: ;
--halo-search-widget-modal-layer-color: ;
--halo-search-widget-hit-bg-color: ;
--halo-search-widget-divider-color: ;
--halo-search-widget-kbd-border-color: ;
--halo-search-widget-kbd-shadow: ;
}
```

Expand All @@ -121,39 +131,34 @@ halo:

```css
@media (prefers-color-scheme: dark) {
.color-scheme-auto {
.color-scheme-auto,
[data-color-scheme='auto'] {
color-scheme: dark;
--halo-search-widget-color-modal-layer: rgba(0, 0, 0, 0.8);
--halo-search-widget-color-modal-content-bg: rgb(15 23 42);
--halo-search-widget-color-form-input: rgb(255, 255, 255);
--halo-search-widget-color-form-input-placeholder: rgb(148 163 184);
--halo-search-widget-color-form-input-bg: rgb(15 23 42);
--halo-search-widget-color-form-divider: rgb(30 41 59);
--halo-search-widget-color-result-item-bg: rgb(30 41 59);
--halo-search-widget-color-result-item-hover-bg: rgb(51 65 85);
--halo-search-widget-color-result-item-title: rgb(255 255 255);
--halo-search-widget-color-result-item-content: rgb(148 163 184);
--halo-search-widget-color-command-kbd-item: rgb(148 163 184);
--halo-search-widget-color-command-kbd-border: rgb(30 41 59);
--halo-search-widget-color-result-empty: rgb(148 163 184);
--halo-search-widget-muted-color: #cbd5e1;
--halo-search-widget-content-color: #f1f5f9;
--halo-search-widget-hit-bg-color: #090a11;
--halo-search-widget-modal-bg-color: #15172a;
--halo-search-widget-modal-layer-color: #000000cc;
--halo-search-widget-base-bg-color: #090a11;
--halo-search-widget-divider-color: #1e293b;
--halo-search-widget-kbd-border-color: #334155;
--halo-search-widget-kbd-shadow: 0px 2px 0px 0px #ffffff1a;
}
}

.color-scheme-dark {
.color-scheme-dark,
.dark,
[data-color-scheme='dark'] {
color-scheme: dark;
--halo-search-widget-color-modal-layer: rgba(0, 0, 0, 0.8);
--halo-search-widget-color-modal-content-bg: rgb(15 23 42);
--halo-search-widget-color-form-input: rgb(255, 255, 255);
--halo-search-widget-color-form-input-placeholder: rgb(148 163 184);
--halo-search-widget-color-form-input-bg: rgb(15 23 42);
--halo-search-widget-color-form-divider: rgb(30 41 59);
--halo-search-widget-color-result-item-bg: rgb(30 41 59);
--halo-search-widget-color-result-item-hover-bg: rgb(51 65 85);
--halo-search-widget-color-result-item-title: rgb(255 255 255);
--halo-search-widget-color-result-item-content: rgb(148 163 184);
--halo-search-widget-color-command-kbd-item: rgb(148 163 184);
--halo-search-widget-color-command-kbd-border: rgb(30 41 59);
--halo-search-widget-color-result-empty: rgb(148 163 184);
--halo-search-widget-muted-color: #cbd5e1;
--halo-search-widget-content-color: #f1f5f9;
--halo-search-widget-hit-bg-color: #090a11;
--halo-search-widget-modal-bg-color: #15172a;
--halo-search-widget-modal-layer-color: #000000cc;
--halo-search-widget-base-bg-color: #090a11;
--halo-search-widget-divider-color: #1e293b;
--halo-search-widget-kbd-border-color: #334155;
--halo-search-widget-kbd-shadow: 0px 2px 0px 0px #ffffff1a;
}
```

Expand All @@ -167,3 +172,7 @@ halo:
1. `auto`：自动模式，根据系统的暗黑模式自动切换。
2. `dark`：强制暗黑模式。
3. `light`：强制明亮模式。

## Credits

- [Algolia DocSearch](https://github.com/algolia/docsearch): 搜索组件的 UI 设计灵感来源于 DocSearch。
19 changes: 11 additions & 8 deletions build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
plugins {
id 'java'
id "io.freefair.lombok" version "8.0.1"
id "com.github.node-gradle.node" version "5.0.0"
id "run.halo.plugin.devtools" version "0.0.7"
id "com.github.node-gradle.node" version "7.0.2"
id "run.halo.plugin.devtools" version "0.1.1"
}

group 'run.halo.search.widget'
Expand Down Expand Up @@ -31,17 +31,20 @@ node {
nodeProjectDir = file("${project.projectDir}")
}

tasks.register('installDepsForUI', PnpmTask) {
args = ['install']
}

tasks.register('buildFrontend', PnpmTask) {
args = ['build:packages']
dependsOn('installDepsForUI')
}

tasks.named('build').configure {
dependsOn('buildFrontend')
tasks.register('installDepsForUI', PnpmTask) {
args = ['install']
}

build {
// build frontend before build
tasks.named('compileJava').configure {
dependsOn('buildFrontend')
}
}

halo {
Expand Down
Binary file added images/preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@
],
"scripts": {
"build:packages": "pnpm --filter \"./packages/**\" build",
"example:dev": "pnpm --filter \"./packages/example\" dev",
"example:dev": "pnpm --filter \"./packages/search-widget\" dev",
"release:packages": "pnpm --filter \"./packages/**\" release"
},
"devDependencies": {
"@halo-dev/api-client": "2.17.0",
"@rushstack/eslint-patch": "^1.5.1",
"@types/node": "^18.18.6",
"@typescript-eslint/eslint-plugin": "^6.9.0",
"@typescript-eslint/parser": "^6.9.0",
"eslint": "^8.52.0",
"@rushstack/eslint-patch": "^1.10.4",
"@types/node": "^18.19.43",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"eslint": "^8.57.0",
"prettier": "^2.8.8",
"typescript": "^5.2.2",
"vite": "^4.5.0"
"typescript": "^5.5.4",
"vite": "^5.3.5"
}
}
28 changes: 0 additions & 28 deletions packages/example/.gitignore
View file
Open in desktop

This file was deleted.

31 changes: 0 additions & 31 deletions packages/example/index.html
View file
Open in desktop

This file was deleted.

8 changes: 0 additions & 8 deletions packages/example/package.json
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/example/src/main.ts
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions packages/example/tsconfig.json
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions packages/example/vite.config.ts
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion packages/search-widget/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
"plugin:@typescript-eslint/recommended",
"@unocss"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
Expand Down
Loading