Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

♻️ 样式调整，慢慢改吧

Browse Source
This commit is contained in:
BTMuli
2023-09-01 16:55:43 +08:00
parent 2c129351c1
commit 343c83b185
17 changed files with 119 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@@ -13,8 +13,8 @@
<script lang="ts" setup>
// vue
import { onBeforeMount, onMounted, ref } from "vue";
import TSidebar from "./components/main/t-sidebar.vue";
import TBackTop from "./components/main/t-backTop.vue";
import TSidebar from "./components/app/t-sidebar.vue";
import TBackTop from "./components/app/t-backTop.vue";
// tauri
import { app, event, fs, window } from "@tauri-apps/api";
// store
@@ -69,6 +69,7 @@ async function createDataDir(): Promise<void> {
if (!(await fs.exists("userData", { dir: fs.BaseDirectory.AppLocalData }))) {
await fs.createDir("userData", { dir: fs.BaseDirectory.AppLocalData, recursive: true });
}
// todo 弃置 tempData dir
if (!(await fs.exists("tempData", { dir: fs.BaseDirectory.AppLocalData }))) {
await fs.createDir("tempData", { dir: fs.BaseDirectory.AppLocalData, recursive: true });
}
@@ -78,12 +79,7 @@ async function createDataDir(): Promise<void> {
<style lang="css">
.app-container {
height: 100%;
background: #f9e9cd; /* 米色 */
color: #132c33; /* 深灰蓝 */
}
.dark .app-container {
background: #363433; /* 长石灰 */
color: #f9e9cd; /* 米色 */
background: var(--app-page-bg);
color: var(--app-page-content);
}
</style>

26
src/assets/index.css
View File

@@ -2,7 +2,7 @@
* @file assets index.css
* @description 全局样式文件
* @author BTMuli <bt-muli@outlook.com>
* @since Alpha v0.2.1
* @since Beta v0.3.0
*/
@import "fonts/index.css";
@@ -22,6 +22,30 @@
--common-color-yellow: #fec90b;
--common-color-grey: #96979a;
--common-color-grey-2: #b3b3b3;
/* color white */
--tgc-white-1: #ffffff; /* normal white */
--tgc-white-2: #f0f1f6; /* Github mobile bg */
--tgc-white-3: #f6f8fa; /* Github web bg */
--tgc-white-4: #f4f6f7; /* Github web option */
/* color grey */
/* color dark */
--tgc-dark-1: #000000; /* normal dark */
--tgc-dark-2: #202020; /* Tauri app nav */
--tgc-dark-3: #010409; /* Github web nav */
--tgc-dark-4: #0d1117; /* Github web bg */
--tgc-dark-5: #161b22; /* Github web list nav */
--tgc-dark-6: #21262d; /* Github web btn bg */
/* color other */
--tgc-green-1: #238636; /* Github web btn */
--tgc-blue-1: #3572a5; /* Github web lang bar */
--tgc-blue-2: #00aeec; /* Bilibili btn bg */
--tgc-pink-1: #fb7299; /* Bilibili btn bg */
/* text color */
--tgc-text-1: #faf7e8; /* Genshin color from ? */
}
html {

17
src/assets/themes/dark.css
View File

@@ -1,12 +1,21 @@
/**
* @file assets themes light.css
* @description 主题样式文件
* @file assets themes dark.css
* @description 主题样式文件-深色主题
* @author BTMuli <bt-muli@outlook.com>
* @since Alpha v0.2.3
* @since Beta v0.3.0
*/
/* 主题色 */
/* dark mode */
html.dark {
/* app container */
--app-page-bg: var(--tgc-dark-4);
--app-page-content: var(--tgc-white-3);
--app-side-bg: var(--tgc-dark-3);
--app-side-content: var(--tgc-white-4);
/* content */
--content-box-bg-1: var(--tgc-dark-5);
/* box-shadow */
--common-shadow-1: rgb(255 255 255 / 10%);
--common-shadow-2: rgb(255 255 255 / 20%);

17
src/assets/themes/default.css
View File

@@ -1,12 +1,21 @@
/**
* @file assets themes dark.css
* @description 主题样式文件
* @file assets themes default.css
* @description 主题样式文件-默认（浅色）主题
* @author BTMuli <bt-muli@outlook.com>
* @since Alpha v0.2.3
* @since Beta v0.3.0
*/
/* 主题色 */
/* default(light) theme */
html.default {
/* app container */
--app-page-bg: var(--tgc-white-3);
--app-page-content: var(--tgc-dark-5); /* todo 这边直接反色，需要调整 */
--app-side-bg: var(--tgc-white-4);
--app-side-content: var(--tgc-dark-4);
/* content */
--content-box-bg-1: var(--tgc-white-4);
/* box-shadow */
--common-shadow-1: rgb(0 0 0 / 10%);
--common-shadow-2: rgb(0 0 0 / 20%);

0
src/components/main/t-backTop.vue → src/components/app/t-backTop.vue
View File

8
src/components/main/t-sidebar.vue → src/components/app/t-sidebar.vue
View File

@@ -185,12 +185,8 @@ async function switchTheme(): Promise<void> {
<style lang="css" scoped>
.tsb-box {
background: #4e7ca1; /* 蝴蝶蓝 */
color: #e2e1e4; /* 芡食白 */
}
.dark .tsb-box {
background: #21373d; /* 灰蓝 */
background: var(--app-side-bg);
color: var(--app-side-content);
}
.side-list {

0
src/components/main/t-switchTheme.vue → src/components/app/t-switchTheme.vue
View File

6
src/components/main/t-calendar.vue → src/components/home/t-calendar.vue
View File

@@ -49,7 +49,7 @@
<script lang="ts" setup>
// vue
import { computed, onMounted, ref } from "vue";
import TSubLine from "./t-subline.vue";
import TSubLine from "../main/t-subline.vue";
import ToCalendar from "../overlay/to-calendar.vue";
import TibCalendarItem from "../itembox/tib-calendar-item.vue";
// data
@@ -166,9 +166,9 @@ async function share(): Promise<void> {
<style lang="css" scoped>
.calendar-box {
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
background: var(--common-shadow-t-2);
}
.calendar-title {

48
src/components/main/t-pool.vue → src/components/home/t-pool.vue
View File

@@ -23,21 +23,18 @@
</div>
</div>
<div class="pool-time">
<div class="pool-time-dur">
<div>
<v-icon>mdi-calendar-clock</v-icon>
{{ pool.time.start }}~{{ pool.time.end }}
</div>
<v-progress-linear :model-value="poolTimePass[pool.postId]" :rounded="true">
</v-progress-linear>
<div
v-if="poolTimeGet[pool.postId] === '已结束'"
:style="{ color: poolColor[pool.postId] }"
>
<div v-if="poolTimeGet[pool.postId] === '已结束'">
{{ poolTimeGet[pool.postId] }}
</div>
<div v-else>
<span>剩余时间：</span>
<span :style="{ color: poolColor[pool.postId] }">
<span>
{{ poolTimeGet[pool.postId] }}
</span>
</div>
@@ -58,6 +55,7 @@ import { useRouter } from "vue-router";
import { useHomeStore } from "../../store/modules/home";
// utils
import { createTGWindow } from "../../utils/TGWindow";
import { stamp2LastTime } from "../../utils/toolFunc";
// plugins
import Mys from "../../plugins/Mys";
@@ -78,7 +76,6 @@ const barColor = ref<string>("error");
const poolCards = ref<TGApp.Plugins.Mys.Gacha.RenderCard[]>([]);
const poolTimeGet = ref<Record<number, string>>({});
const poolTimePass = ref<Record<number, number>>({});
const poolColor = ref<Record<number, string>>({});
const timer = ref<Record<number, any>>({});
// expose
@@ -93,12 +90,11 @@ function poolLastInterval(postId: number): TGApp.Plugins.Mys.Gacha.RenderCard |
if (poolTimeGet.value[postId] === "未开始") {
const isStart = pool.time.startStamp - Date.now();
if (isStart > 0) return;
poolTimeGet.value[postId] = getLastPoolTime(pool.time.endStamp - Date.now());
poolTimeGet.value[postId] = stamp2LastTime(pool.time.endStamp - Date.now());
poolTimePass.value[postId] = pool.time.endStamp - Date.now();
poolColor.value[postId] = "#90caf9";
} else {
const isEnd = pool.time.endStamp - Date.now();
poolTimeGet.value[postId] = getLastPoolTime(isEnd);
poolTimeGet.value[postId] = stamp2LastTime(isEnd);
poolTimePass.value[postId] =
((pool.time.endStamp - Date.now()) / (pool.time.endStamp - pool.time.startStamp)) * 100;
if (isEnd >= 0) return;
@@ -106,7 +102,6 @@ function poolLastInterval(postId: number): TGApp.Plugins.Mys.Gacha.RenderCard |
timer.value[postId] = null;
poolTimePass.value[postId] = 100;
poolTimeGet.value[postId] = "已结束";
poolColor.value[postId] = "#f44336";
}
return pool;
}
@@ -131,18 +126,14 @@ onMounted(async () => {
poolCards.value = await Mys.Gacha.card(gachaData, homeStore.poolCover);
}
poolCards.value.map((pool) => {
poolTimeGet.value[pool.postId] = getLastPoolTime(pool.time.endStamp - Date.now());
poolTimeGet.value[pool.postId] = stamp2LastTime(pool.time.endStamp - Date.now());
poolTimePass.value[pool.postId] = pool.time.endStamp - Date.now();
if (poolTimePass.value[pool.postId] <= 0) {
poolTimeGet.value[pool.postId] = "已结束";
poolTimePass.value[pool.postId] = 100;
poolColor.value[pool.postId] = "#f44336";
} else if (pool.time.startStamp - Date.now() > 0) {
poolTimeGet.value[pool.postId] = "未开始";
poolTimePass.value[pool.postId] = 100;
poolColor.value[pool.postId] = "#32A9CA";
} else {
poolColor.value[pool.postId] = "#90caf9";
}
timer.value[pool.postId] = setInterval(() => {
poolLastInterval(pool.postId);
@@ -187,13 +178,6 @@ async function toOuter(url: string, title: string): Promise<void> {
createTGWindow(url, "祈愿", title, 1200, 800, true, true);
}
function getLastPoolTime(time: number): string {
const hour = Math.floor(time / 1000 / 60 / 60);
const minute = Math.floor((time / 1000 / 60 / 60 - hour) * 60);
const second = Math.floor(((time / 1000 / 60 / 60 - hour) * 60 - minute) * 60);
return `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
}
function toPost(pool: TGApp.Plugins.Mys.Gacha.RenderCard): void {
const path = router.resolve({
name: "帖子详情",
@@ -216,15 +200,13 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
gap: 10px;
}
.pool-title {
display: flex;
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
}
@@ -234,7 +216,7 @@ onUnmounted(() => {
height: 25px;
border-radius: 50%;
margin-right: 10px;
background: var(--common-shadow-2);
background: var(--common-shadow-4);
transform: translate(0, 2px);
}
@@ -250,8 +232,7 @@ onUnmounted(() => {
overflow: hidden;
width: 50%;
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
box-shadow: 0 0 5px var(--common-shadow-4);
}
.pool-cover {
@@ -285,7 +266,6 @@ onUnmounted(() => {
align-items: center;
justify-content: space-between;
backdrop-filter: blur(20px);
background: rgb(0 0 0/20%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@@ -306,8 +286,8 @@ onUnmounted(() => {
.pool-icon {
width: 60px;
height: 60px;
border: 1px solid rgb(255 255 255 / 50%);
border-radius: 5px;
border: 1px solid var(--tgc-white-1);
border-radius: 8px;
box-shadow: 0 0 5px rgb(0 0 0/20%);
transition: all ease-in-out 0.3s;
}
@@ -320,7 +300,7 @@ onUnmounted(() => {
.pool-icon img {
width: 100%;
height: 100%;
border-radius: 5px;
border-radius: 8px;
cursor: pointer;
}
@@ -330,7 +310,7 @@ onUnmounted(() => {
align-items: flex-start;
justify-content: flex-start;
margin-right: 10px;
color: #faf7e8;
color: var(--tgc-text-1);
font-size: 12px;
gap: 10px;
text-align: left;

21
src/components/main/t-position.vue → src/components/home/t-position.vue
View File

@@ -47,6 +47,7 @@ import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
// utils
import { createTGWindow } from "../../utils/TGWindow";
import { stamp2LastTime } from "../../utils/toolFunc";
// plugins
import Mys from "../../plugins/Mys";
@@ -79,7 +80,7 @@ function positionLastInterval(postId: number): void {
if (timeLast <= 0) {
positionTimeGet.value[postId] = "已结束";
} else {
positionTimeGet.value[postId] = getLastPositionTime(timeLast);
positionTimeGet.value[postId] = stamp2LastTime(timeLast);
}
}
@@ -94,7 +95,7 @@ onMounted(async () => {
if (card.time.endStamp === 0) {
positionTimeGet.value[card.postId] = "未知";
} else {
positionTimeGet.value[card.postId] = getLastPositionTime(card.time.endStamp - Date.now());
positionTimeGet.value[card.postId] = stamp2LastTime(card.time.endStamp - Date.now());
}
positionTimeEnd.value[card.postId] = card.time.endStamp;
positionTimer.value[card.postId] = setInterval(() => {
@@ -104,16 +105,6 @@ onMounted(async () => {
loading.value = false;
});
function getLastPositionTime(time: number): string {
const day = Math.floor(time / (24 * 3600 * 1000));
const hour = Math.floor((time % (24 * 3600 * 1000)) / (3600 * 1000));
const minute = Math.floor((time % (3600 * 1000)) / (60 * 1000));
const second = Math.floor((time % (60 * 1000)) / 1000);
return `${day}天 ${hour.toFixed(0).padStart(2, "0")}:${minute
.toFixed(0)
.padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
}
async function toPost(card: TGApp.Plugins.Mys.Position.RenderCard): Promise<void> {
// 获取路由路径
const path = router.resolve({
@@ -136,16 +127,14 @@ onUnmounted(() => {
<style lang="css" scoped>
.position-box {
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
}
.position-title {
display: flex;
align-items: center;
justify-content: start;
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
}
@@ -165,7 +154,7 @@ onUnmounted(() => {
.position-card {
border-radius: 5px;
background: var(--common-bg-1);
background: var(--content-box-bg-1);
color: var(--common-bgt-1);
}

17
src/pages/common/Home.vue
View File

@@ -1,15 +1,17 @@
<template>
<ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
<component :is="item" v-for="item in components" :key="item" :ref="setItemRef" />
<div class="home-container">
<component :is="item" v-for="item in components" :key="item" :ref="setItemRef" />
</div>
</template>
<script lang="ts" setup>
// vue
import { markRaw, onBeforeMount, onMounted, onUnmounted, onUpdated, ref } from "vue";
import ToLoading from "../../components/overlay/to-loading.vue";
import TPool from "../../components/main/t-pool.vue";
import TPosition from "../../components/main/t-position.vue";
import TCalendar from "../../components/main/t-calendar.vue";
import TPool from "../../components/home/t-pool.vue";
import TPosition from "../../components/home/t-position.vue";
import TCalendar from "../../components/home/t-calendar.vue";
// store
import { useHomeStore } from "../../store/modules/home";
import { useAppStore } from "../../store/modules/app";
@@ -96,3 +98,10 @@ onUnmounted(() => {
itemRefs.value = [];
});
</script>
<style lang="css" scoped>
.home-container {
display: flex;
flex-direction: column;
gap: 10px;
}
</style>

21
src/utils/toolFunc.ts Normal file
View File

@@ -0,0 +1,21 @@
/**
* @file utils toolFunc.ts
* @description 一些工具函数
* @author BTMuli <bt-muli@outlook.com>
* @since Beta v0.3.0
*/
/**
* @description 时间戳转换为时间字符串
* @returns {string} 时间字符串 d天 hh:mm:ss
* @param time
*/
export function stamp2LastTime(time: number): string {
const day = Math.floor(time / (24 * 3600 * 1000));
const hour = Math.floor((time % (24 * 3600 * 1000)) / (3600 * 1000));
const minute = Math.floor((time % (3600 * 1000)) / (60 * 1000));
const second = Math.floor((time % (60 * 1000)) / 1000);
return `${day === 0 ? "" : `${day}天`} ${hour.toFixed(0).padStart(2, "0")}:${minute
.toFixed(0)
.padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
}

2
src/views/t-anno-json.vue
View File

@@ -14,7 +14,7 @@ import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import JsonViewer from "vue-json-viewer";
import ToLoading from "../components/overlay/to-loading.vue";
import TSwitchTheme from "../components/main/t-switchTheme.vue";
import TSwitchTheme from "../components/app/t-switchTheme.vue";
// tauri
import { appWindow } from "@tauri-apps/api/window";
// utils

2
src/views/t-anno.vue
View File

@@ -24,7 +24,7 @@
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import ToLoading from "../components/overlay/to-loading.vue";
import TSwitchTheme from "../components/main/t-switchTheme.vue";
import TSwitchTheme from "../components/app/t-switchTheme.vue";
import TShareBtn from "../components/main/t-shareBtn.vue";
// tauri
import { appWindow } from "@tauri-apps/api/window";

2
src/views/t-lottery.vue
View File

@@ -57,7 +57,7 @@ import { computed, onMounted, onUpdated, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import JsonViewer from "vue-json-viewer";
import ToLoading from "../components/overlay/to-loading.vue";
import TSwitchTheme from "../components/main/t-switchTheme.vue";
import TSwitchTheme from "../components/app/t-switchTheme.vue";
// tauri
import { appWindow } from "@tauri-apps/api/window";
// store

2
src/views/t-post-json.vue
View File

@@ -12,7 +12,7 @@ import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import JsonViewer from "vue-json-viewer";
import ToLoading from "../components/overlay/to-loading.vue";
import TSwitchTheme from "../components/main/t-switchTheme.vue";
import TSwitchTheme from "../components/app/t-switchTheme.vue";
// tauri
import { appWindow } from "@tauri-apps/api/window";
// plugins

2
src/views/t-post.vue
View File

@@ -24,7 +24,7 @@
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import ToLoading from "../components/overlay/to-loading.vue";
import TSwitchTheme from "../components/main/t-switchTheme.vue";
import TSwitchTheme from "../components/app/t-switchTheme.vue";
import TShareBtn from "../components/main/t-shareBtn.vue";
// tauri
import { appWindow } from "@tauri-apps/api/window";