Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
R
rrpgLink_FrontEnd
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kesaubeeire
rrpgLink_FrontEnd
Commits
18296ed9
Commit
18296ed9
authored
Oct 22, 2023
by
KesaubeEire
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 分类搜索 & Tag 搜索 in 侧边栏 & 导航栏.
parent
25eeb5db
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
186 additions
and
54 deletions
+186
-54
README.md
README.md
+3
-3
src/App.svelte
src/App.svelte
+181
-49
src/Content.svelte
src/Content.svelte
+2
-2
No files found.
README.md
View file @
18296ed9
...
...
@@ -70,15 +70,15 @@ npm run build:prod
-
[x] Tag
-
[x] Category
-
[x] Title
-
[
] TODO:
导航栏 Drawer -> 分类搜索 & Tag 搜索
-
[
] TODO:
侧边栏 Drawer -> 分类搜索 & Tag 搜索
-
[
x]
导航栏 Drawer -> 分类搜索 & Tag 搜索
-
[
x]
侧边栏 Drawer -> 分类搜索 & Tag 搜索
-
[ ] TODO: 回退上一级搜索
-
[x] 主题切换
-
[x] 基础切换
-
[x] localstorage 记忆
-
[ ] Toast 系统
-
[x] 基本 Toast
-
[
] TODO: 图片加载错误: 显示名字 & 序号...
-
[
x] 图片加载错误: 寻找 info.json 的图片并加载第一个, 顺表 log 显示详情
## Bugs
...
...
src/App.svelte
View file @
18296ed9
<script>
import { onMount } from 'svelte';
import { _theme, _env } from './stores';
import { _theme, _env
, _category, _tagTrans
} from './stores';
import { SvelteToast, toast } from '@zerodevx/svelte-toast';
import Content from './Content.svelte';
...
...
@@ -11,6 +11,9 @@
*/
window.toast = toast;
/**Content.svelte DOM*/
let contentDom;
/**主题*/
const themes = [
'light',
...
...
@@ -51,8 +54,7 @@
text: '搜索',
hint: '搜索相关的游戏',
click: () => {
console.log('启动搜索按钮:\t', searchInputDom.value);
content.searchTitle(searchInputDom.value);
searchInput();
}
},
{
...
...
@@ -85,14 +87,12 @@
// -----------------------------
/**search
input DOM元素
*/
let search
InputDom
;
/**search
文本
*/
let search
Msg
;
/**执行搜索
* @param event 事件对象
*/
function searchInput(event) {
const searchMsg = event.target.value;
function searchInput() {
if (!searchMsg) {
toast.push('没搜索东西捏~');
return;
...
...
@@ -101,7 +101,7 @@
console.log('搜索:\t', searchMsg);
// debounce(() => {
content.searchTitle(searchMsg);
content
Dom
.searchTitle(searchMsg);
// }, 1000);
}
...
...
@@ -139,14 +139,12 @@
const has_darkreader = document.querySelector('.darkreader');
if (has_darkreader) toast.push('检测到 dark reader, 建议关闭当前网站的 darkreader, 可点击导航栏的主题更改相应的主题', { initial: 0 });
});
let content;
let searchTextArea;
</script>
<!-- ----------------------------------------------- DOM ----------------------------------------------- -->
<!-- 导航栏 -->
<!-- NOTE: 这行别删, DEBUG 侧边栏用 -->
<!-- <div class="drawer lg:drawer-open"> -->
<div class="drawer">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
...
...
@@ -174,7 +172,7 @@
<div
class="rounded-full btn-xs border-none cursor-pointer flex items-center justify-center
bg-primary text-primary-content hover:bg-neutral hover:text-neutral-content"
on:click={content.searchDefault}
on:click={content
Dom
.searchDefault}
on:keypress={() => {}}
>
<svg fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
...
...
@@ -186,42 +184,96 @@
</div>
</div>
<div class="flex-none hidden lg:block">
<ul class="menu menu-horizontal">
<div class="h-10 flex items-center">
<!-- NOTE: 输入搜索框 -->
<svg
class="pointer-events-none absolute z-10 my-3.5 ml-4 stroke-current opacity-80 text-primary-content"
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
type="text"
class="input-bordered rounded-box bg-primary text-primary-content h-full w-60 pl-10 pr-4 focus:outline-none"
on:change={searchInput}
bind:this={searchInputDom}
/>
</div>
<ul class="menu menu-horizontal items-center">
<!-- NOTE: (导航栏) 功能区遍历 -->
{#each injectText as Item}
<li>
<div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
<button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
{#if Item.id == 'search'}
<!-- NOTE: 输入搜索框 -->
<div class="h-9 flex items-center relative">
<svg
class="pointer-events-none absolute z-10 my-3.5 ml-4 stroke-current opacity-80 text-primary-content"
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
type="text"
class="input-bordered rounded-box bg-primary text-primary-content h-full w-60 pl-10 pr-4 focus:outline-none"
bind:value={searchMsg}
on:keydown={key => {
// console.log(key);
if (key.code == 'Enter') {
searchInput();
}
}}
/>
</div>
</li>
{/each}
<li>
<div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
<button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
</div>
</li>
<!-- DEBUG: 正常情况下隐藏吧 -->
{#if process.env.APP_ENV == 'dev'}
<li>
<button class="p-3" on:click={() => toast.push('Hello world!')}>TEST TOAST</button>
</li>
{/if}
<!-- NOTE: 分类搜索 -->
<li>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="dropdown dropdown-bottom dropdown-left p-0">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label tabindex="0" class="p-3">分类</label>
<ul tabindex="0" class="dropdown-content z-[31] p-2 shadow bg-base-100 rounded-box w-48 max-h-[70vh] overflow-y-auto">
<li>
<details>
<summary>语言</summary>
<ul>
{#each $_category as cate}
<li>
<button
on:click={() => {
contentDom.searchCategory(cate.id);
}}
on:keypress={() => {}}
>
{cate.category_name}
</button>
</li>
{/each}
</ul>
</details>
</li>
<li>
<details>
<summary>标签</summary>
<ul>
{#each $_tagTrans as tag}
<li>
<button
on:click={() => {
contentDom.searchTag(tag.jp_tag_name);
}}
on:keypress={() => {}}
>
{tag.cn_tag_name ?? tag.jp_tag_name}
</button>
</li>
{/each}
</ul>
</details>
</li>
</ul>
</div>
</li>
{:else}
<li>
<div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
<button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
</div>
</li>
{/if}
{/each}
<!-- NOTE: 主题 -->
<li>
...
...
@@ -259,16 +311,96 @@
</div>
</div>
<!-- NOTE: 内容单独提出来到另外的 svelte sfc -->
<Content bind:this={content} />
<Content bind:this={content
Dom
} />
</div>
<div class="drawer-side z-[40]">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay" />
<ul class="menu p-4 w-60 min-h-full bg-base-200">
<!-- NOTE: (侧边栏) 功能区遍历 -->
{#each injectText as Item}
<li>
<button on:click={Item.click}>{Item.text}</button>
</li>
{#if Item.id == 'search'}
<!-- NOTE: 输入搜索框 -->
<div class="h-9 flex items-center relative">
<svg
class="pointer-events-none absolute z-10 my-3.5 ml-4 stroke-current opacity-80 text-primary-content"
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
type="text"
class="input-bordered rounded-box bg-primary text-primary-content h-full w-full pl-10 pr-4 focus:outline-none"
bind:value={searchMsg}
on:keydown={key => {
// console.log(key);
if (key.code == 'Enter') {
searchInput();
}
}}
/>
</div>
<button
class="h-9 btn btn-sm m-0 flex items-center justify-center border rounded-box"
on:mouseenter={Item.hover}
on:click={Item.click}>{Item.text}</button
>
<!-- NOTE: 分类搜索 -->
<li>
<details>
<summary>分类</summary>
<ul>
<li>
<details>
<summary>语言</summary>
<ul>
{#each $_category as cate}
<li>
<button
on:click={() => {
contentDom.searchCategory(cate.id);
}}
on:keypress={() => {}}
>
{cate.category_name}
</button>
</li>
{/each}
</ul>
</details>
</li>
<li>
<details>
<summary>标签</summary>
<ul>
{#each $_tagTrans as tag}
<li>
<button
on:click={() => {
contentDom.searchTag(tag.jp_tag_name);
}}
on:keypress={() => {}}
>
{tag.cn_tag_name ?? tag.jp_tag_name}
</button>
</li>
{/each}
</ul>
</details>
</li>
</ul>
</details>
</li>
<!-- <li><button on:click={Item.click}>{Item.text}</button></li> -->
{:else}
<li>
<button on:click={Item.click}>{Item.text}</button>
</li>
{/if}
{/each}
<!-- NOTE: 主题 -->
...
...
src/Content.svelte
View file @
18296ed9
...
...
@@ -122,7 +122,7 @@
/**根据 TAG 搜索游戏
* @param {string} tag TAG
*/
function searchTag(tag) {
export
function searchTag(tag) {
if (process.env.APP_ENV === 'dev') console.log(tag, encodeURIComponent(tag));
createFetch(searchTagRequest(tag), data => {
if (process.env.APP_ENV === 'dev') console.log(data);
...
...
@@ -133,7 +133,7 @@
/**根据 category 搜索游戏
* @param {string} category category
*/
function searchCategory(category) {
export
function searchCategory(category) {
if (process.env.APP_ENV === 'dev') console.log(category);
createFetch(searchCategoryRequest(category), data => {
if (process.env.APP_ENV === 'dev') console.log(data);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment