Skip to content

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

feat: 完整重构了导航栏和侧边栏.

parent 3c7733aa
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 156 deletions
README.md
View file @ aa38fced
......@@ -59,9 +59,9 @@ npm run build:prod
- [ ] TODO: 配置面板
- [ ] 卡片相关
- [ ] page 相关 (num & size)
- [ ] TODO: 更新数据 (TAG Category 游戏)
- [ ] 主动更新按钮
- [ ] 定时更新
- [ ] TODO: 更新数据 (TAG Category 游戏)
- [ ] 主动更新按钮
- [ ] 定时更新
- [ ] 卡片展示
- [x] 请求 php
- [x] 瀑布流
......
src/App.svelte
View file @ aa38fced
......@@ -3,6 +3,11 @@
import { _theme, _env, _category, _tagTrans } from './stores';
import { SvelteToast, toast } from '@zerodevx/svelte-toast';
import Content from './Content.svelte';
import MenuWrapNav from './components/MenuWrapNav.svelte';
import MenuWrapSide from './components/MenuWrapSide.svelte';
import MenuCateTag from './components/MenuCateTag.svelte';
import MenuTheme from './components/MenuTheme.svelte';
import MenuConfig from './components/MenuConfig.svelte';
/**
* NOTE: 配置 svelteToast
......@@ -219,53 +224,9 @@
</li>
<!-- 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>
<MenuWrapNav title="分类" tailwind="w-48 max-h-[70vh]">
<MenuCateTag {contentDom} />
</MenuWrapNav>
{:else}
<li>
<div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
......@@ -276,37 +237,14 @@
{/each}
<!-- NOTE: 主题 -->
<li>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="dropdown 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-64 h-[70vh] overflow-y-auto">
{#each themes as theme}
<li>
<button
data-theme={theme}
on:click={() => {
setTheme(theme);
}}
class="rounded my-1 flex justify-between items-center"
>
<div>
{theme}
</div>
<MenuWrapNav title="主题" tailwind="w-64 max-h-[70vh]">
<MenuTheme {themes} {setTheme} />
</MenuWrapNav>
<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
<span class="bg-primary w-4 h-4 rounded-box" />
<span class="bg-secondary w-4 h-4 rounded-box" />
<span class="bg-accent w-4 h-4 rounded-box" />
<span class="bg-neutral w-4 h-4 rounded-box" />
</div>
</button>
</li>
{/each}
</ul>
</div>
</li>
<!-- NOTE: 配置 -->
<MenuWrapNav title="配置" tailwind="w-72 max-h-[70vh]">
<MenuConfig />
</MenuWrapNav>
</ul>
</div>
</div>
......@@ -315,7 +253,7 @@
</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">
<ul class="menu p-4 min-w-60 min-h-full bg-base-200">
<!-- NOTE: (侧边栏) 功能区遍历 -->
{#each injectText as Item}
{#if Item.id == 'search' && $_category.length && $_tagTrans.length}
......@@ -346,56 +284,15 @@
<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
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> -->
<MenuWrapSide title="分类">
<MenuCateTag {contentDom} />
</MenuWrapSide>
{:else}
<li>
<button on:click={Item.click}>{Item.text}</button>
......@@ -404,35 +301,14 @@
{/each}
<!-- NOTE: 主题 -->
<li>
<details>
<summary>主题选择</summary>
<ul>
{#each themes as theme}
<li>
<button
data-theme={theme}
on:click={() => {
setTheme(theme);
}}
class="rounded my-1 flex justify-between items-center"
>
<div>
{theme}
</div>
<MenuWrapSide title="主题">
<MenuTheme {themes} {setTheme} />
</MenuWrapSide>
<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
<span class="bg-primary w-4 h-4 rounded-box" />
<span class="bg-secondary w-4 h-4 rounded-box" />
<span class="bg-accent w-4 h-4 rounded-box" />
<span class="bg-neutral w-4 h-4 rounded-box" />
</div>
</button>
</li>
{/each}
</ul>
</details>
</li>
<!-- NOTE: 配置 -->
<MenuWrapSide title="配置">
<MenuConfig />
</MenuWrapSide>
</ul>
</div>
</div>
......
src/components/MenuCateTag.svelte 0 → 100644
View file @ aa38fced
<script>
import { _theme, _env, _category, _tagTrans } from '../stores';
export let contentDom;
</script>
<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>
src/components/MenuConfig.svelte 0 → 100644
View file @ aa38fced
<script>
let lastUpdatedTimeCategory;
let lastUpdatedTimeTag;
function expiredTimeCategory() {
return new Date().getHours();
}
function expiredTimeTag() {
return new Date().getHours();
}
</script>
<li>
<details open>
<summary>更新数据</summary>
<ul>
<div class="flex flex-col">
<div class="form-control w-60">
<label class="label cursor-pointer w-full inline-flex justify-between">
<span class="label-text">分类: 距离上次 {expiredTimeCategory()} 小时</span>
<button class="btn btn-xs btn-neutral">更新</button>
</label>
</div>
<div class="form-control w-60">
<label class="label cursor-pointer flex justify-between">
<span class="label-text">标签: 距离上次 {expiredTimeTag()} 小时</span>
<button class="btn btn-xs btn-neutral">更新</button>
</label>
</div>
</div>
</ul>
</details>
<details open>
<summary>卡片配置</summary>
<ul>
<div class="flex flex-col">
<div class="form-control w-60">
<label class="label cursor-pointer w-full inline-flex justify-between">
<span class="label-text">显示副标题</span>
<input type="checkbox" class="toggle" checked />
</label>
</div>
<div class="form-control w-60">
<label class="label cursor-pointer flex justify-between">
<span class="label-text">显示标签</span>
<input type="checkbox" class="toggle" checked />
</label>
</div>
</div>
</ul>
</details>
<details open>
<summary>页数配置</summary>
<ul>
<div class="flex items-center justify-between">
<div>每页数量</div>
<div>
<input class="w-44 range" type="range" min="0" max="100" value="25" step="25" />
<div class="w-44 flex justify-between text-xs px-2">
<!-- <span>|</span> -->
<!-- <span>|</span> -->
<!-- <span>|</span> -->
<!-- <span>|</span> -->
<!-- <span>|</span> -->
{#each [1, 2, 3, 4, 5] as num}
<span>{num * 10}</span>
{/each}
</div>
</div>
</div>
</ul>
</details>
</li>
src/components/MenuTheme.svelte 0 → 100644
View file @ aa38fced
<script>
export let themes;
export let setTheme;
</script>
{#each themes as theme}
<li>
<button
data-theme={theme}
on:click={() => {
setTheme(theme);
}}
class="rounded my-1 flex justify-between items-center"
>
<div>
{theme}
</div>
<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
<span class="bg-primary w-4 h-4 rounded-box" />
<span class="bg-secondary w-4 h-4 rounded-box" />
<span class="bg-accent w-4 h-4 rounded-box" />
<span class="bg-neutral w-4 h-4 rounded-box" />
</div>
</button>
</li>
{/each}
src/components/MenuWrapNav.svelte 0 → 100644
View file @ aa38fced
<script>
// 标准导航栏列表容器
/**标题*/
export let title;
/**样式*/
export let tailwind;
</script>
<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">{title}</label>
<ul tabindex="0" class={tailwind + ' dropdown-content z-[31] p-2 shadow bg-base-100 rounded-box overflow-y-auto'}>
<slot />
</ul>
</div>
</li>
src/components/MenuWrapSide.svelte 0 → 100644
View file @ aa38fced
<script>
// 标准侧边栏列表容器
/**标题*/
export let title;
</script>
<li>
<details>
<summary>{title}</summary>
<ul>
<slot />
</ul>
</details>
</li>
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