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