Skip to content

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

feat: follow JoyJ.

parent 7905d588
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 43 deletions
README.md
View file @ 93f8cf6d
......@@ -52,7 +52,8 @@ npm run build:prod
- [x] 展示基础卡片
- [x] 图片
- [ ] TODO: 点击 Cover 预览所有图片
- [ ] TODO: 语言
- [ ] TODO: 懒加载
- [x] 语言
- [x] TAG
- [x] 展示
- [x] 搜索
......
index.html
View file @ 93f8cf6d
......@@ -5,7 +5,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" type="image/png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>决斗编年史 在线RPG分部·里</title>
</head>
<body>
......
src/App.svelte
View file @ 93f8cf6d
......@@ -95,12 +95,12 @@
console.log('环境变量:\t', process.env.APP_ENV);
switch (process.env.APP_ENV) {
case 'dev':
$_env = '/api'
$_env = '/api';
// console.log(0 + 'dev');
break;
case 'prod':
$_env = ''
$_env = '';
// console.log(1 + 'prod');
break;
}
......@@ -119,11 +119,12 @@
<!-- ----------------------------------------------- DOM ----------------------------------------------- -->
<!-- 导航栏 -->
<!-- <div class="drawer lg:drawer-open"> -->
<div class="drawer">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col">
<!-- Navbar -->
<div class="w-full navbar bg-base-300">
<div class="w-full navbar bg-base-300 sticky top-0 z-30">
<div class="flex-none lg:hidden">
<label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current">
......@@ -131,11 +132,21 @@
</svg>
</label>
</div>
<div class="flex-1 px-2 mx-2">在线RPG分部·里</div>
<div
class="flex-1 px-2 mx-2"
on:click={() => {
location.reload();
}}
on:keypress={() => {}}
>
<span class="px-2 rounded-box cursor-pointer hover:bg-neutral hover:text-neutral-content">在线RPG分部·里</span>
</div>
<div class="flex-none hidden lg:block">
<ul class="menu menu-horizontal">
<!-- DEBUG: 正常情况下隐藏吧 -->
<li><button class="p-3" on:click={() => toast.push('Hello world!')}>TEST TOAST</button></li>
{#if process.env.APP_ENV == 'dev'}
<li><button class="p-3" on:click={() => toast.push('Hello world!')}>TEST TOAST</button></li>
{/if}
<!-- Navbar menu content here -->
{#each injectText as Item}
<li>
......@@ -149,7 +160,7 @@
<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-[1] p-2 shadow bg-base-100 rounded-box w-64 h-[70vh] overflow-y-auto">
<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
......@@ -183,9 +194,9 @@
<!-- NOTE: 内容单独提出来到另外的 svelte sfc -->
<Content />
</div>
<div class="drawer-side">
<div class="drawer-side z-[40]">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay" />
<ul class="menu p-4 w-80 min-h-full bg-base-200">
<ul class="menu p-4 w-60 min-h-full bg-base-200">
<!-- Sidebar content here -->
{#each injectText as Item}
<li>
......
src/Content.svelte
View file @ 93f8cf6d
<script>
import Card from './components/card.svelte';
import { SvelteToast, toast } from '@zerodevx/svelte-toast';
import { _env } from './stores';
import { _category, _env } from './stores';
// -----------------------------
// 各种请求封装头 & 请求函数
/**请求封装头 -> 获取语言类别*/
const getLanguageCategory = {
url: `${$_env}/query.php?action=get_category`,
params: { method: 'GET' }
};
/**请求封装头 -> 获取所有资料*/
const getContentsRequest = {
url: `${$_env}/query.php?action=get`,
params: {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': true
}
}
params: { method: 'GET' }
};
/**请求封装头 -> 搜索对应 Tag
* @param tag TAG
/**请求封装头 -> 搜索对应 Tag (函数形式)
* @param {string} tag TAG
* @return {object} 请求封装对象
*/
const searchTagRequest = tag => {
return {
url: `${$_env}/query.php?action=get&tag=${encodeURIComponent(tag)}`,
params: {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': true
}
}
params: { method: 'GET' }
};
};
/**请求封装头 -> 搜索对应 Category分类 (函数形式)
* @param {number} category 分类号
* @return {object} 请求封装对象
*/
const searchCategoryRequest = category => {
return {
url: `${$_env}/query.php?action=get&category=${category}`,
params: { method: 'GET' }
};
};
......@@ -41,10 +47,14 @@
function createFetch({ url, params, payload }, callback = () => {}) {
const msg = {
method: params.method,
headers: params.headers
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': true
}
};
if (params.method == 'POST') msg.body = payload;
if (params.headers) msg.headers = params.headers;
fetch(url, msg)
.then(response => response.json())
......@@ -86,15 +96,21 @@
});
}
/**根据 category 搜索游戏
* @param category category
*/
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);
showList(data);
});
}
/**获取封面图
* @param folder 文件夹路径
*/
function getCover(folder) {
// const jsonLink = $_env + '/' + folder.substring(2) + '/rpg_info/info.json';
// createFetch({ url: jsonLink, params: { method: 'GET' } }, data => {
// console.log(data);
// });
// FIXME: 隐患 -> 可能是 1.png 1.webpage 之类的...
return $_env + '/' + folder.substring(2) + '/rpg_info/1.jpg';
}
......@@ -103,13 +119,21 @@
* @param folder 文件夹路径
*/
function getFolder(folder) {
return $_env + '/' + folder.substring(2) + '/rpg_info/';
return $_env + '/' + folder.substring(2);
}
// -----------------------------
// NOTE: 初始化执行 -> 考虑用 onMount
// 初始化请求 -> 拉取所有分类
// TODO: 搞个记时, 每天一刷
if (!$_category.length) {
createFetch(getLanguageCategory, data => {
if (process.env.APP_ENV === 'dev') console.log(data);
$_category = data;
});
}
// 初始化请求 -> 拉取全部
// 初始化请求 -> 拉取全部条目
createFetch(getContentsRequest, data => {
if (process.env.APP_ENV === 'dev') console.log(data);
showList(data);
......@@ -125,9 +149,11 @@
sub_title={item.jp_name}
cover={getCover(item.folder)}
folder={getFolder(item.folder)}
language={item.category}
category={item.category}
language={$_category[item.category - 1].category_name}
raw_tags={item.tags}
p_searchTag={searchTag}
p_searchCategory={searchCategory}
/>
{/each}
......
src/components/card.svelte
View file @ 93f8cf6d
......@@ -8,12 +8,16 @@
/**父属性: 路径*/
export let folder;
/**父属性: 语言分类*/
export let category;
/**父属性: 语言分类文本*/
export let language;
/**父属性: TAG文本*/
export let raw_tags = '';
/**父方法: 搜索*/
/**父方法: 搜索 tag*/
export let p_searchTag;
/**父方法: 搜索 category*/
export let p_searchCategory;
// ------------------------
......@@ -31,11 +35,11 @@
function getInfoPics() {
console.log(folder);
fetch(folder + '/info.json', { method: 'GET' })
fetch(folder + '/rpg_info/info.json', { method: 'GET' })
.then(response => response.json())
.then(data => {
console.log(data);
// window.open(folder + data[1]);
// window.open(folder + '/rpg_info/' + data[1]);
});
}
</script>
......@@ -56,11 +60,30 @@
/>
</figure>
<div class="card-body">
<h2 class="card-title block">
<h2 class="card-title block text-lg">
<!-- NOTE: 游戏类别 -->
<div class="badge badge-secondary m-auto" style="height: inherit;line-height: inherit;">{language ?? '示例'}</div>
<div
class="badge badge-secondary m-auto"
style="height: inherit;line-height: inherit;"
on:click={p_searchCategory(category)}
on:keypress={() => {}}
>
{language ?? '示例'}
</div>
<!-- NOTE: 游戏名称 -->
{title ?? '无中文名称'}
<span
class="hover:link"
on:click={() => {
window.open(folder);
}}
on:keypress={() => {}}
>
{#if title}
{@html title}
{:else}
无中文名称
{/if}
</span>
</h2>
<p>{sub_title ?? '无日文名称'}</p>
......
src/stores/index.js
View file @ 93f8cf6d
......@@ -37,4 +37,7 @@ function persistStore(key, startValue) {
export const _theme = persistStore('_theme', "light");
/** 环境变量 */
export const _env = persistStore('_env', "");
\ No newline at end of file
export const _env = persistStore('_env', "");
/** 环境变量 */
export const _category = persistStore('_category', {});
\ No newline at end of file
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