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 ...@@ -59,9 +59,9 @@ npm run build:prod
- [ ] TODO: 配置面板 - [ ] TODO: 配置面板
- [ ] 卡片相关 - [ ] 卡片相关
- [ ] page 相关 (num & size) - [ ] page 相关 (num & size)
- [ ] TODO: 更新数据 (TAG Category 游戏) - [ ] TODO: 更新数据 (TAG Category 游戏)
- [ ] 主动更新按钮 - [ ] 主动更新按钮
- [ ] 定时更新 - [ ] 定时更新
- [ ] 卡片展示 - [ ] 卡片展示
- [x] 请求 php - [x] 请求 php
- [x] 瀑布流 - [x] 瀑布流
......
src/App.svelte
View file @ aa38fced
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
import { _theme, _env, _category, _tagTrans } from './stores'; import { _theme, _env, _category, _tagTrans } from './stores';
import { SvelteToast, toast } from '@zerodevx/svelte-toast'; import { SvelteToast, toast } from '@zerodevx/svelte-toast';
import Content from './Content.svelte'; 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 * NOTE: 配置 svelteToast
...@@ -219,53 +224,9 @@ ...@@ -219,53 +224,9 @@
</li> </li>
<!-- NOTE: 分类搜索 --> <!-- NOTE: 分类搜索 -->
<li> <MenuWrapNav title="分类" tailwind="w-48 max-h-[70vh]">
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <MenuCateTag {contentDom} />
<div class="dropdown dropdown-bottom dropdown-left p-0"> </MenuWrapNav>
<!-- 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} {:else}
<li> <li>
<div class="p-3 tooltip tooltip-left" data-tip={Item.hint}> <div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
...@@ -276,37 +237,14 @@ ...@@ -276,37 +237,14 @@
{/each} {/each}
<!-- NOTE: 主题 --> <!-- NOTE: 主题 -->
<li> <MenuWrapNav title="主题" tailwind="w-64 max-h-[70vh]">
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <MenuTheme {themes} {setTheme} />
<div class="dropdown dropdown-left p-0"> </MenuWrapNav>
<!-- 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>
<div class="flex h-full flex-shrink-0 flex-wrap gap-1"> <!-- NOTE: 配置 -->
<span class="bg-primary w-4 h-4 rounded-box" /> <MenuWrapNav title="配置" tailwind="w-72 max-h-[70vh]">
<span class="bg-secondary w-4 h-4 rounded-box" /> <MenuConfig />
<span class="bg-accent w-4 h-4 rounded-box" /> </MenuWrapNav>
<span class="bg-neutral w-4 h-4 rounded-box" />
</div>
</button>
</li>
{/each}
</ul>
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -315,7 +253,7 @@ ...@@ -315,7 +253,7 @@
</div> </div>
<div class="drawer-side z-[40]"> <div class="drawer-side z-[40]">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay" /> <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: (侧边栏) 功能区遍历 --> <!-- NOTE: (侧边栏) 功能区遍历 -->
{#each injectText as Item} {#each injectText as Item}
{#if Item.id == 'search' && $_category.length && $_tagTrans.length} {#if Item.id == 'search' && $_category.length && $_tagTrans.length}
...@@ -346,56 +284,15 @@ ...@@ -346,56 +284,15 @@
<button <button
class="h-9 btn btn-sm m-0 flex items-center justify-center border rounded-box" class="h-9 btn btn-sm m-0 flex items-center justify-center border rounded-box"
on:mouseenter={Item.hover} on:mouseenter={Item.hover}
on:click={Item.click}>{Item.text}</button on:click={Item.click}
> >
{Item.text}
</button>
<!-- NOTE: 分类搜索 --> <!-- NOTE: 分类搜索 -->
<li> <MenuWrapSide title="分类">
<details> <MenuCateTag {contentDom} />
<summary>分类</summary> </MenuWrapSide>
<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} {:else}
<li> <li>
<button on:click={Item.click}>{Item.text}</button> <button on:click={Item.click}>{Item.text}</button>
...@@ -404,35 +301,14 @@ ...@@ -404,35 +301,14 @@
{/each} {/each}
<!-- NOTE: 主题 --> <!-- NOTE: 主题 -->
<li> <MenuWrapSide title="主题">
<details> <MenuTheme {themes} {setTheme} />
<summary>主题选择</summary> </MenuWrapSide>
<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>
<div class="flex h-full flex-shrink-0 flex-wrap gap-1"> <!-- NOTE: 配置 -->
<span class="bg-primary w-4 h-4 rounded-box" /> <MenuWrapSide title="配置">
<span class="bg-secondary w-4 h-4 rounded-box" /> <MenuConfig />
<span class="bg-accent w-4 h-4 rounded-box" /> </MenuWrapSide>
<span class="bg-neutral w-4 h-4 rounded-box" />
</div>
</button>
</li>
{/each}
</ul>
</details>
</li>
</ul> </ul>
</div> </div>
</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