Skip to content

R
rrpgLink_FrontEnd
Commit 18296ed9 authored by KesaubeEire's avatar KesaubeEire
Browse files
Options

feat: 分类搜索 & Tag 搜索 in 侧边栏 & 导航栏.

parent 25eeb5db
Show whitespace changes
Inline Side-by-side
Showing with 186 additions and 54 deletions
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 searchInputDom;
/**search文本*/
let searchMsg;
/**执行搜索
* @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);
contentDom.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={contentDom.searchDefault}
on:keypress={() => {}}
>
<svg fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
......@@ -186,9 +184,12 @@
</div>
</div>
<div class="flex-none hidden lg:block">
<ul class="menu menu-horizontal">
<div class="h-10 flex items-center">
<ul class="menu menu-horizontal items-center">
<!-- NOTE: (导航栏) 功能区遍历 -->
{#each injectText as Item}
{#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"
......@@ -202,26 +203,77 @@
<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}
bind:value={searchMsg}
on:keydown={key => {
// console.log(key);
if (key.code == 'Enter') {
searchInput();
}
}}
/>
</div>
<!-- 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>
</div>
</li>
{/each}
<!-- DEBUG: 正常情况下隐藏吧 -->
{#if process.env.APP_ENV == 'dev'}
<!-- 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>
<button class="p-3" on:click={() => toast.push('Hello world!')}>TEST TOAST</button>
<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={contentDom} />
</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}
{#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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment