up

frontent/ops_vue/src/components/HeardMain.vue

@@ -1,48 +1,43 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import { myfuncs } from '@/myfunc.ts';
+import { myfuncs } from '@/myfunc.ts'
-import { onMounted,ref} from 'vue';
+import { onMounted, ref } from 'vue'
-
-
 
 // 使用 vue-i18n 的 Composition API
 const { t, locale } = useI18n()
 
-const theTeme=ref('light');
+const theTeme = ref('light')
-const lang_sele = ref(null);
+const lang_sele = ref(null)
 
 const isLogin = false
 
-function set_them(temp:string)
+function set_them(temp: string) {
-{
+  theTeme.value = temp
-  theTeme.value=temp;
+  myfuncs.setTheme(temp, true)
-  myfuncs.setTheme(temp,true);
 }
 
 function changeLanguage(lang: Event) {
   // 切换语言
-  const selectElement = lang.target as HTMLSelectElement;
+  const selectElement = lang.target as HTMLSelectElement
-  const selectedLang = selectElement.value;
+  const selectedLang = selectElement.value
-  locale.value = selectedLang;
+  locale.value = selectedLang
-  myfuncs.save('userLanguage', selectedLang);
+  myfuncs.save('userLanguage', selectedLang)
   //console.log("selectedLang:",selectedLang);
 }
 
 onMounted(() => {
-  const savedTheme = myfuncs.getThemefromStorge();
+  const savedTheme = myfuncs.getThemefromStorge()
-  theTeme.value=savedTheme;
+  theTeme.value = savedTheme
-  myfuncs.setTheme(savedTheme, false);
+  myfuncs.setTheme(savedTheme, false)
-  const userLang = myfuncs.load('userLanguage');
+  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">
+          <a
-                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"> </span>
+            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>
+                        <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>