Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
R
rrpgLink_FrontEnd
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kesaubeeire
rrpgLink_FrontEnd
Commits
93f8cf6d
Commit
93f8cf6d
authored
Oct 21, 2023
by
KesaubeEire
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: follow JoyJ.
parent
7905d588
Changes
6
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
107 additions
and
43 deletions
+107
-43
README.md
README.md
+2
-1
index.html
index.html
+1
-1
src/App.svelte
src/App.svelte
+19
-8
src/Content.svelte
src/Content.svelte
+52
-26
src/components/card.svelte
src/components/card.svelte
+29
-6
src/stores/index.js
src/stores/index.js
+4
-1
No files found.
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: 正常情况下隐藏吧 -->
{#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-[
3
1] 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-
8
0 min-h-full bg-base-200">
<ul class="menu p-4 w-
6
0 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
...
...
@@ -38,3 +38,6 @@ export const _theme = persistStore('_theme', "light");
/** 环境变量 */
export
const
_env
=
persistStore
(
'
_env
'
,
""
);
/** 环境变量 */
export
const
_category
=
persistStore
(
'
_category
'
,
{});
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment