hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

complete aside, header and settings panel i18n

Browse source
This commit is contained in:
KUN1007 2023-05-26 22:08:01 +08:00
parent 2dbc67efee
commit 88f42e7ad7
16 changed files with 107 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/KUNGalgameTopBar.vue
View file

@ -33,11 +33,11 @@ interface topBar {
// 顶部导航栏的项目
const topBarItem: topBar[] = [
{ index: 1, name: '所有帖子', router: '/pool' },
{ index: 2, name: '发布帖子', router: 'edit' },
{ index: 3, name: '技术交流', router: 'technology' },
{ index: 4, name: '关于我们', router: 'kungalgame' },
{ index: 5, name: '返回主页', router: '/' },
{ index: 1, name: 'pool', router: '/pool' },
{ index: 2, name: 'create', router: 'edit' },
{ index: 3, name: 'technique', router: 'technology' },
{ index: 4, name: 'about', router: 'kungalgame' },
{ index: 5, name: 'return', router: '/' },
]
// 初始进入页面 header 没有附加样式
@ -90,7 +90,9 @@ onBeforeMount(() => {})
<ul>
<!-- 顶部单个板块 -->
<li v-for="kun in topBarItem" :key="kun.index">
<router-link :to="{ path: kun.router }">{{ kun.name }}</router-link>
<router-link :to="{ path: kun.router }">{{
$t(`header['${kun.name}']`)
}}</router-link>
</li>
<!-- 顶部板块下部的 hover 效果 -->
<div class="top-bar-box"></div>

12
src/components/setting-panel/KUNGalgameSettingPanel.vue
View file

@ -55,12 +55,12 @@ const handleClose = () => {
<div class="root">
<div class="container">
<div class="title">
<span>设置面板</span>
<span>{{ $t('header.settings.name') }}</span>
<span><Icon class="settings-icon" icon="uiw:setting-o" /></span>
</div>
<div class="mode">
<!-- 白天 / 黑夜模式切换 -->
<span>模式切换</span>
<span>{{ $t('header.settings.mode') }}</span>
<div class="mode-container">
<li>
<Icon
@ -77,7 +77,7 @@ const handleClose = () => {
</div>
</div>
<div class="set-lang">
<span>网站语言设置</span>
<span>{{ $t('header.settings.language') }}</span>
<select class="select" v-model="locale" @change="changeLanguage">
<option value="en">English</option>
<option value="zh">中文</option>
@ -86,7 +86,7 @@ const handleClose = () => {
<div>
<!-- 设置主页的宽度 -->
<div class="width-container">
<span>主页页面宽度设置</span>
<span>{{ $t('header.settings.width') }}</span>
<span>{{ showMainPageWidth }}%</span>
</div>
<div class="page-width">
@ -104,7 +104,9 @@ const handleClose = () => {
<!-- 背景设置组件 -->
<Background />
<div><button class="reset">恢复所有设置为默认</button></div>
<div>
<button class="reset">{{ $t('header.settings.recover') }}</button>
</div>
</div>
<!-- 看板娘组件 -->

12
src/components/setting-panel/components/Background.vue
View file

@ -4,10 +4,10 @@ import { useSettingsPanelStore } from '@/store/modules/settings'
<template>
<div class="kungalgame-background">
<div class="bg-settings">背景设置</div>
<div class="bg-settings">{{ $t('header.settings.background') }}</div>
<ul class="kungalgame-background-container">
<li>
<span>点击使用我们的预设的背景</span>
<span>{{ $t('header.settings.preset') }}</span>
<!-- 预设背景集 -->
<ul class="kungalgame-reset-bg">
<li><img src="@/assets/images/bg/bg1-m.png" /></li>
@ -23,15 +23,15 @@ import { useSettingsPanelStore } from '@/store/modules/settings'
</li>
<!-- 用户自定义背景 -->
<li>
<span>自定义背景</span>
<span>{{ $t('header.settings.custom') }}</span>
<div class="kungalgamer-bg">
<span>请在这里粘贴图片url</span>
<span>{{ $t('header.settings.url') }}</span>
<div class="bg-url-input">
<input type="text" required />
<button>确定</button>
<button>{{ $t('header.settings.confirm') }}</button>
</div>
</div>
<button class="reset-bg">恢复空白背景</button>
<button class="reset-bg">{{ $t('header.settings.restore') }}</button>
</li>
</ul>
</div>

32
src/language/en.ts
View file

@ -1,13 +1,35 @@
export default {
header: {
name: 'KUNGalgame',
allTopic: 'All TOPIC',
createTopic: 'CREATE TOPIC',
technology: 'TECHNOLOGY',
aboutUs: 'ABOUT US',
name: 'KUN Visual Novel',
pool: 'POOL',
create: 'CREATE',
technique: 'TECHNIQUE',
about: 'ABOUT',
return: 'HOME',
settings: {
name: 'Settings',
mode: 'Mode',
language: 'Language',
width: 'Main Page Width',
background: 'Background Setting',
preset: 'Use our preset background',
custom: 'Custom Background',
url: 'Paste the picture url here',
confirm: 'confirm',
restore: 'Restore blank background',
recover: 'Recover all settings to default',
},
},
mainPage: {
asideActive: {
fold: 'Fold Aside',
create: 'CREATE NEW!',
update: 'Update Log',
balance: 'F.S.',
ranking: 'Ranking',
regulations: 'Regulations',
contacts: 'Join Us',
antiMoe: 'Anti-moe',
hot: `Today's Hot Topic`,
new: `Today's New Topic`,
},

25
src/language/zh.ts
View file

@ -1,17 +1,32 @@
export default {
header: {
name: '鲲Galgame',
allTopic: '所有帖子',
createTopic: '发布帖子',
technology: '技术交流',
aboutUs: '关于我们',
pool: '所有帖子',
create: '发布帖子',
technique: '技术交流',
about: '关于我们',
return: '返回主页',
settings: {
name: '设置面板',
mode: '模式切换',
language: '网站语言设置',
width: '主页页面宽度设置',
background: '背景设置',
preset: '点击使用我们预设的背景',
custom: '自定义背景',
url: '请在这里粘贴图片的URL',
confirm: '确定',
restore: '恢复空白背景',
recover: '恢复所有设置为默认',
},
},
mainPage: {
asideActive: {
fold: '折叠左侧区域',
create: '发布帖子',
update: '更新日志',
balance: '收支公示',
rank: '排行榜单',
ranking: '排行榜单',
regulations: '执行条例',
contacts: '加入我们',
antiMoe: '不萌记录',

6
src/router/index.ts
View file

@ -157,9 +157,9 @@ export const constantRoutes: RouteRecordRaw[] = [
},
// KUNGalgame 排行榜
{
name: 'Rank',
path: '/rank',
component: () => import('@/views/rank/Rank.vue'),
name: 'Ranking',
path: '/ranking',
component: () => import('@/views/ranking/Ranking.vue'),
meta: {
title: '排行榜',
transition: 'animate__backInUp',

2
src/views/Home/content/article/content/topic/components/UserPart.vue
View file

@ -11,7 +11,7 @@
<a href="#"><span>鲲最可爱！</span></a>
</div>
<!-- 发布者相关信息 -->
<!-- <div class="kungalgamer-rank"></div> -->
<!-- <div class="kungalgamer-ranking"></div> -->
</div>
</template>
<style lang="scss" scoped>

2
src/views/Home/content/aside/MainPageAside.vue
View file

@ -46,7 +46,7 @@ watch(
style="font-size: 17px"
v-if="!isActive"
/>
<span v-if="isActive">折叠左侧区域</span>
<span v-if="isActive">{{ $t('mainPage.asideActive.fold') }}</span>
</div>
<div class="item-active" v-if="isActive">
<AsideActive :isActive="isActive" />

12
src/views/Home/content/aside/aside-item.ts
View file

@ -9,12 +9,12 @@ interface aside {
// 顶部导航栏的项目 TODO:（i18n）
const asideItem: aside[] = [
{ index: 1, name: '更新日志', router: '/update-log' },
{ index: 2, name: '收支公示', router: '/balance' },
{ index: 3, name: '排行榜单', router: '/rank' },
{ index: 4, name: '执行条例', router: '/regulations' },
{ index: 5, name: '加入我们', router: '/contacts' },
{ index: 6, name: '不萌记录', router: '/anti-moe' },
{ index: 1, name: 'update', router: '/update-log' },
{ index: 2, name: 'balance', router: '/balance' },
{ index: 3, name: 'ranking', router: '/ranking' },
{ index: 4, name: 'regulations', router: '/regulations' },
{ index: 5, name: 'contacts', router: '/contacts' },
{ index: 6, name: 'antiMoe', router: '/anti-moe' },
]
export default asideItem

4
src/views/Home/content/aside/components/Aside.vue
View file

@ -7,7 +7,9 @@ import asideItem from '../aside-item'
<div class="aside">
<!-- 顶部单个板块 -->
<span v-for="kun in asideItem" :key="kun.index">
<router-link :to="{ path: kun.router }">{{ kun.name }}</router-link>
<router-link :to="{ path: kun.router }">{{
$t(`mainPage.asideActive['${kun.name}']`)
}}</router-link>
</span>
</div>
</template>

8
src/views/Home/content/aside/components/AsideActive.vue
View file

@ -15,13 +15,17 @@ const isActive = toRefs(props.isActive)
<!-- 发布新文章 -->
<div class="new-article">
<!-- 发布新文章的按钮 -->
<button class="btn-new-article">发布帖子</button>
<button class="btn-new-article">
{{ $t('mainPage.asideActive.create') }}
</button>
</div>
<!-- 功能盒子容器 -->
<div class="item-box-container">
<!-- 侧边栏单个项目 -->
<span v-for="kun in asideItem" :key="kun.index">
<router-link :to="{ path: kun.router }">{{ kun.name }}</router-link>
<router-link :to="{ path: kun.router }">{{
$t(`mainPage.asideActive['${kun.name}']`)
}}</router-link>
</span>
</div>
</div>

5
src/views/kungalgamer/KUNGalgamer.vue
View file

@ -11,7 +11,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<div class="header">
<!-- 用户头像 -->
<div class="kungalgamer-avatar">
<img src="../img/KUN.jpg" alt="KUN" />
<img src="@/assets/images/KUN.jpg" alt="KUN" />
</div>
<!-- 用户名 -->
<div class="kungalgamer-name">
@ -57,7 +57,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
min-height: 800px;
display: flex;
flex-direction: column;
background-image: url('$/assets/images/bg/bg3.png');
background-image: url('@/assets/images/bg/bg3.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
@ -83,7 +83,6 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
flex-direction: column;
/* 用户页面的所有字体颜色 */
color: $kungalgame-font-color-3;
overflow: hidden;
}
/* 页面的头部 */
.header {

8
src/views/rank/Rank.vue → src/views/ranking/Ranking.vue
View file

@ -10,7 +10,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<!-- 内容区 -->
<div class="article">
<!-- 用户排行 -->
<div class="kungalgamer-rank">
<div class="kungalgamer-ranking">
<!-- 用户排行标题 -->
<div class="kungalgamer-title">最萌的萝莉</div>
<!-- 用户排行的交互 -->
@ -371,7 +371,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</div>
</div>
<!-- 帖子排行 -->
<div class="topic-rank">
<div class="topic-ranking">
<!-- 帖子排行标题 -->
<div class="topic-title">最萌的帖子</div>
<!-- 帖子排行的交互 -->
@ -975,7 +975,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
color: $kungalgame-font-color-3;
}
/* 用户排行 */
.kungalgamer-rank {
.kungalgamer-ranking {
width: 50%;
border-right: 1px solid $kungalgame-blue-4;
box-sizing: border-box;
@ -1074,7 +1074,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
*/
/* 帖子排行 */
.topic-rank {
.topic-ranking {
width: 50%;
}
/* 帖子排行标题 */

4
src/views/topic/content/master/TopicMaster.vue
View file

@ -51,7 +51,7 @@
<!-- 楼主的头像图片 -->
<img src="../img/KUN.jpg" alt="KUN" />
<!-- 楼主的等级 -->
<div class="master-rank">站长</div>
<div class="master-ranking">站长</div>
</div>
<!-- 楼主的名字 -->
<div class="master-name">啊这可海星啊这</div>
@ -355,7 +355,7 @@
margin-top: 17px;
}
/* 楼主的等级 */
.master-rank {
.master-ranking {
font-size: 10px;
position: absolute;
margin-left: 90px;

4
src/views/topic/content/others/single/SingleTopic.vue
View file

@ -26,7 +26,7 @@ import Comments from './comments/Comments.vue'
<!-- 其他人的头像图片 -->
<img src="../img/KUN.jpg" alt="KUN" />
<!-- 其他人的等级 -->
<div class="other-rank">萌葱</div>
<div class="other-ranking">萌葱</div>
</div>
<!-- 其他人的名字 -->
<div class="other-name">啊这可海星啊这</div>
@ -220,7 +220,7 @@ import Comments from './comments/Comments.vue'
width: 100px;
}
/* 其他人的等级 */
.other-rank {
.other-ranking {
font-size: 10px;
position: absolute;
margin-left: 90px;

18
src/views/update-log/UpdateLog.vue
View file

@ -45,7 +45,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>
@ -57,7 +57,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>
@ -69,7 +69,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>
@ -81,7 +81,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>
@ -93,7 +93,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>
@ -105,7 +105,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>
@ -117,7 +117,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>
@ -129,7 +129,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>
@ -141,7 +141,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
<li>
<!-- 更新内容 -->
<div class="performance">
<p>1. 添加新页面 rank page</p>
<p>1. 添加新页面 ranking page</p>
<p>2. 修复关于我们页面缩放 BUG</p>
<p>3. 页面颜色调整</p>
</div>