kevin/ops2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
kevin
2025-11-04 11:05:59 +08:00
parent 1fa18f40d7
commit c5f23d84b7
1 changed files with 198 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontent/ops_vue/src/components/HeardMain.vue
+79 -46
View File
@@ -1,48 +1,43 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { myfuncs } from '@/myfunc.ts';
import { onMounted,ref} from 'vue';
import { myfuncs } from '@/myfunc.ts'
import { onMounted, ref } from 'vue'
// 使用 vue-i18n 的 Composition API
const { t ,locale} = useI18n()
const { t, locale } = useI18n()
const theTeme=ref('light');
const lang_sele = ref(null);
const theTeme = ref('light')
const lang_sele = ref(null)
const isLogin =false
const isLogin = false
function set_them(temp:string)
{
theTeme.value=temp;
myfuncs.setTheme(temp,true);
function set_them(temp: string) {
theTeme.value = temp
myfuncs.setTheme(temp, true)
}
function changeLanguage(lang: Event) {
// 切换语言
const selectElement = lang.target as HTMLSelectElement;
const selectedLang = selectElement.value;
locale.value = selectedLang;
myfuncs.save('userLanguage', selectedLang);
const selectElement = lang.target as HTMLSelectElement
const selectedLang = selectElement.value
locale.value = selectedLang
myfuncs.save('userLanguage', selectedLang)
//console.log("selectedLang:",selectedLang);
}
onMounted(() => {
const savedTheme = myfuncs.getThemefromStorge();
theTeme.value=savedTheme;
myfuncs.setTheme(savedTheme, false);
const userLang = myfuncs.load('userLanguage');
const savedTheme = myfuncs.getThemefromStorge()
theTeme.value = savedTheme
myfuncs.setTheme(savedTheme, false)
const userLang = myfuncs.load('userLanguage')
if (userLang) {
locale.value = userLang;
locale.value = userLang
if (lang_sele.value) {
(lang_sele.value as HTMLSelectElement).value = userLang;
;(lang_sele.value as HTMLSelectElement).value = userLang
}
}
});
})
</script>
<template>
@@ -64,7 +59,13 @@ onMounted(() => {
<!-- BEGIN NAVBAR LOGO -->
<div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<router-link to="/" aria-label="Tabler">
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
<svg
xmlns="http://www.w3.org/2000/svg"
width="110"
height="32"
viewBox="0 0 232 68"
class="navbar-brand-image"
>
<path
d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z"
fill="#066fd1"
@@ -75,16 +76,19 @@ onMounted(() => {
fill-rule="evenodd"
clip-rule="evenodd"
fill="#4a4a4a"
/></svg>
/>
</svg>
</router-link>
</div>
<!-- END NAVBAR LOGO -->
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item">
<a @click="set_them('dark')" class="nav-link px-0" :class="{'d-none':theTeme==='dark'}" :title="t('message.dark_mode')">
<a
@click="set_them('dark')"
class="nav-link px-0"
:class="{ 'd-none': theTeme === 'dark' }"
:title="t('message.dark_mode')"
>
<!-- Download SVG icon from http://tabler.io/icons/icon/moon -->
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -98,10 +102,17 @@ onMounted(() => {
stroke-linejoin="round"
class="icon icon-1"
>
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
<path
d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
/>
</svg>
</a>
<a @click="set_them('light')" class="nav-link px-0" :class="{'d-none':theTeme==='light'}" :title="t('message.light_mode')">
<a
@click="set_them('light')"
class="nav-link px-0"
:class="{ 'd-none': theTeme === 'light' }"
:title="t('message.light_mode')"
>
<!-- Download SVG icon from http://tabler.io/icons/icon/sun -->
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -116,19 +127,46 @@ onMounted(() => {
class="icon icon-1"
>
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
<path
d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
/>
</svg>
</a>
</div>
<!-- 这里判断是否已经登陆 是则显示用户信息 否则显示登陆按钮 -->
<div v-if="!isLogin" class="nav-item">
<router-link to="login" class="btn btn-outline-primary" style="width: 120px;">{{t('message.login_or_register')}}</router-link>
<router-link to="login" class="btn btn-outline-primary" >
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
<path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
<path d="M19 22v-6"></path>
<path d="M22 19l-3 -3l-3 3"></path>
</svg>
{{ t('message.login_or_register') }}
</router-link>
</div>
<div v-if="isLogin" class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"> </span>
<a
href="#"
class="nav-link d-flex lh-1 p-0 px-2"
data-bs-toggle="dropdown"
aria-label="Open user menu"
>
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)">
</span>
<div class="d-none d-xl-block ps-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-secondary">UI Designer</div>
@@ -143,7 +181,6 @@ onMounted(() => {
<a href="./sign-in.html" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
@@ -173,12 +210,11 @@ onMounted(() => {
>
<path d="M5 12l-2 0l9 -9l9 9l-2 0" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg></span>
<span class="nav-link-title"> {{t('appname.home')}} </span>
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg
></span>
<span class="nav-link-title"> {{ t('appname.home') }} </span>
</router-link>
</li>
</ul>
<div class="ms-auto">
@@ -187,10 +223,7 @@ onMounted(() => {
<option value="zh-CN">中文</option>
</select>
</div>
</div>
</div>
</div>
</div>