From 20750901267c6d62ad6130871d2fba8c3716e03c Mon Sep 17 00:00:00 2001
From: leelaa <leedaisen@hotmail.com>
Date: Sat, 27 Apr 2024 00:55:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=8B=E6=8B=89=E6=A1=86?=
 =?UTF-8?q?=E7=9A=84=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=20(#22)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                           |   1 +
 src/components/DropdownView.vue               |  34 +++++
 src/layouts/components/navbar/NavBar.vue      |  52 ++++++--
 .../components/navbar/modules/LanguageBtn.vue |  52 ++++----
 .../components/navbar/modules/ThemeBtn.vue    | 120 ++++++++----------
 src/pages/other/ChatPage.vue                  |  73 ++++++-----
 6 files changed, 191 insertions(+), 141 deletions(-)
 create mode 100644 src/components/DropdownView.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index ffbd61f..a656ef0 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    DropdownView: typeof import('./components/DropdownView.vue')['default']
     MessageBox: typeof import('./components/MsgBox/MessageBox.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/DropdownView.vue b/src/components/DropdownView.vue
new file mode 100644
index 0000000..6bdce6a
--- /dev/null
+++ b/src/components/DropdownView.vue
@@ -0,0 +1,34 @@
+// 下拉菜单
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  // 下拉的列表
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  //  标题
+  title: { type: String, default: "" },
+  //   弹框的位置
+  position: { type: String, default: "end" },
+  // 打开方式
+  openType: { type: String, default: "click" },
+});
+// 计算属性
+const hover = computed(() => props.openType === "hover");
+</script>
+<template>
+  <!-- <div class="dropdown dropdown-end" :class="{ 'dropdown-open': show }" @click="tabState"> -->
+  <div class="dropdown dropdown-end" :class="{ 'dropdown-hover': hover }">
+    <slot name="title" tabindex="0"></slot>
+    <div v-if="title" tabindex="0" role="button" class="btn m-1">{{ title }}</div>
+    <ul
+      tabindex="0"
+      class="dropdown-content bg-base-200 text-base-content rounded-box top-px mt-16 max-h-[calc(100vh-10rem)] w-56 overflow-y-auto border border-white/5 shadow-2xl outline outline-1 outline-black/5 menu menu-sm gap-1"
+    >
+      <li v-for="(item, index) in list" :key="index">
+        <slot :item="item"></slot>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/src/layouts/components/navbar/NavBar.vue b/src/layouts/components/navbar/NavBar.vue
index 31f73d7..da0f00b 100644
--- a/src/layouts/components/navbar/NavBar.vue
+++ b/src/layouts/components/navbar/NavBar.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { name } from '../../../../package.json';
-import router, { routesList } from '@/router/index.js';
+import { name } from "../../../../package.json";
+import router, { routesList } from "@/router/index.js";
 
-import LanguageBtn from './modules/LanguageBtn.vue';
-import ThemeBtn from './modules/ThemeBtn.vue';
-import MineBtn from './modules/MineBtn.vue';
+import LanguageBtn from "./modules/LanguageBtn.vue";
+import ThemeBtn from "./modules/ThemeBtn.vue";
+import MineBtn from "./modules/MineBtn.vue";
 
 // 设置语言
 
@@ -26,12 +26,30 @@ const pageTo = (to) => {
     <div class="navbar-start">
       <div class="dropdown">
         <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h8m-8 6h16"
+            />
           </svg>
         </div>
-        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-          <li v-for="(item, index) in routesList" :key="index" :class="isActive(item.path) ? 'active' : ''">
+        <ul
+          tabindex="0"
+          class="dropdown-content menu menu-sm mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+        >
+          <li
+            v-for="(item, index) in routesList"
+            :key="index"
+            :class="isActive(item.path) ? 'active' : ''"
+          >
             <a @click="pageTo(item.path || '/')">{{ item.meta.title }}</a>
             <ul class="p-2">
               <li v-for="(subItem, subIndex) in item.children" :key="subIndex">
@@ -46,12 +64,18 @@ const pageTo = (to) => {
     <!-- pc端布局 -->
     <div class="navbar-center hidden lg:flex">
       <ul class="menu menu-horizontal px-1">
-        <li v-for="(item, index) in routesList" :key="index" :class="isActive(item.path) ? 'active' : ''">
-          <a @click="pageTo(item.path || '/')" v-if="!item.children">{{ item.meta.title }}</a>
+        <li
+          v-for="(item, index) in routesList"
+          :key="index"
+          :class="isActive(item.path) ? 'active' : ''"
+        >
+          <a @click="pageTo(item.path || '/')" v-if="!item.children">{{
+            item.meta.title
+          }}</a>
           <details v-else>
-            <summary tabindex="0">{{ item.meta.title }}</summary>
-            <ul class="p-2 w-40">
-              <li tabindex="0" v-for="(subItem, subIndex) in item.children" :key="subIndex">
+            <summary tabindex="0" role="button">{{ item.meta.title }}</summary>
+            <ul tabindex="0" class="p-2 w-40">
+              <li v-for="(subItem, subIndex) in item.children" :key="subIndex">
                 <a @click="pageTo(subItem.path || '/')">{{ subItem.meta.title }}</a>
               </li>
             </ul>
diff --git a/src/layouts/components/navbar/modules/LanguageBtn.vue b/src/layouts/components/navbar/modules/LanguageBtn.vue
index 9f8fd12..0d09280 100644
--- a/src/layouts/components/navbar/modules/LanguageBtn.vue
+++ b/src/layouts/components/navbar/modules/LanguageBtn.vue
@@ -1,16 +1,17 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
+import DropdownView from "@/components/DropdownView.vue";
 const { t, locale } = useI18n();
 const locList = [
   {
-    code: 'EN',
-    lang: 'English',
-    loc: 'en',
+    code: "EN",
+    lang: "English",
+    loc: "en",
   },
   {
-    code: 'ZH',
-    lang: '中文',
-    loc: 'zh-CN',
+    code: "ZH",
+    lang: "中文",
+    loc: "zh-CN",
   },
 ];
 const setLanguage = (lang) => {
@@ -18,25 +19,20 @@ const setLanguage = (lang) => {
 };
 </script>
 <template>
-  <div class="dropdown dropdown-end">
-    <div tabindex="0" role="button" class="btn m-1">{{ t('nav-bar.tab-lang') }}</div>
-    <div
-      tabindex="0"
-      class="dropdown-content bg-base-200 text-base-content rounded-box top-px mt-16 max-h-[calc(100vh-10rem)] w-56 overflow-y-auto border border-white/5 shadow-2xl outline outline-1 outline-black/5"
-    >
-      <ul class="menu menu-sm gap-1">
-        <li v-for="(item, index) in locList" :key="index">
-          <button class="btn glass flex justify-between w-full" @click="setLanguage(item.loc)">
-            <span
-              class="badge badge-sm badge-outline !pl-1.5 !pr-1 pt-px font-mono !text-[.6rem] font-bold tracking-widest opacity-50"
-              :class="{ 'badge-primary': item.loc === locale }"
-            >
-              {{ item.code }}
-            </span>
-            <span class="font-[sans-serif]">{{ item.lang }}</span>
-          </button>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <DropdownView :list="locList" :title="t('nav-bar.tab-lang')">
+    <template #default="{ item }">
+      <button
+        class="btn glass flex justify-between w-full"
+        @click="setLanguage(item.loc)"
+      >
+        <span
+          class="badge badge-sm badge-outline !pl-1.5 !pr-1 pt-px font-mono !text-[.6rem] font-bold tracking-widest opacity-50"
+          :class="{ 'badge-primary': item.loc === locale }"
+        >
+          {{ item.code }}
+        </span>
+        <span class="font-[sans-serif]">{{ item.lang }}</span>
+      </button>
+    </template>
+  </DropdownView>
 </template>
diff --git a/src/layouts/components/navbar/modules/ThemeBtn.vue b/src/layouts/components/navbar/modules/ThemeBtn.vue
index fb6052b..557ac9a 100644
--- a/src/layouts/components/navbar/modules/ThemeBtn.vue
+++ b/src/layouts/components/navbar/modules/ThemeBtn.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { THEME_LIST, THEME_DEFAULT } from '../../../../../enums/theme.js';
-import { themeChange } from 'theme-change';
-import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-
+import { THEME_LIST, THEME_DEFAULT } from "../../../../../enums/theme.js";
+import { themeChange } from "theme-change";
+import { useI18n } from "vue-i18n";
+import { ref } from "vue";
+import DropdownView from "@/components/DropdownView.vue";
 const { t } = useI18n();
 // 传入主题名，返回style对象
 const getThemeStyle = (themeName) => {
@@ -12,9 +12,9 @@ const getThemeStyle = (themeName) => {
     return {};
   } else {
     return {
-      background: themeDetail['base-100'],
-      color: themeDetail['color-scheme'] === 'light' ? '#000' : '#fff',
-      borderRadius: themeDetail['--rounded-btn'] || '0px',
+      background: themeDetail["base-100"],
+      color: themeDetail["color-scheme"] === "light" ? "#000" : "#fff",
+      borderRadius: themeDetail["--rounded-btn"] || "0px",
     };
   }
 };
@@ -29,67 +29,59 @@ const getThemeColor = (themeName) => {
   }
 };
 // 获取当前主题
-const nowTheme = ref(localStorage.getItem('theme') || 'light');
+const nowTheme = ref(localStorage.getItem("theme") || "light");
 const saveTheme = (themeName) => {
   themeChange(themeName);
   nowTheme.value = themeName;
 };
 </script>
 <template>
-  <div class="dropdown dropdown-end">
-    <div tabindex="0" role="button" class="btn m-1">{{ t('nav-bar.tab-theme') }}</div>
-    <div
-      class="dropdown-content bg-base-200 text-base-content rounded-box top-px h-[24rem] max-h-[calc(100vh-10rem)] w-56 overflow-y-auto border border-white/5 shadow-2xl outline outline-1 outline-black/5 mt-16"
-    >
-      <div class="grid grid-cols-1 gap-3 p-3">
-        <button
-          class="outline-base-content text-start flex items-center outline-offset-4 btn glass"
-          v-for="theme in THEME_LIST"
-          :style="getThemeStyle(theme)"
-          :key="theme"
-          data-choose-theme
-          data-key="theme"
-          :data-set-theme="theme"
-          @click="saveTheme(theme)"
-        >
-          <div class="flex items-center justify-between w-full">
-            <div class="flex items-center">
-              <svg
-                v-if="theme === nowTheme"
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                />
-              </svg>
-              <svg
-                v-else
-                class="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-              </svg>
-              <p class="ml-1">{{ theme }}</p>
-            </div>
-            <div class="flex">
-              <span
-                class="w-3 h-3 bg-red-500 rounded-full mr-1"
-                v-for="(color, idx) in getThemeColor(theme)"
-                :key="idx"
-                :style="{ 'background-color': color }"
-              ></span>
-            </div>
+  <DropdownView :list="THEME_LIST" :title="t('nav-bar.tab-theme')">
+    <template #default="{ item }">
+      <button
+        class="outline-base-content text-start flex items-center outline-offset-4 btn glass mt-2"
+        :style="getThemeStyle(item)"
+        data-choose-theme
+        data-key="theme"
+        :data-set-theme="item"
+        @click="saveTheme(item)"
+      >
+        <div class="flex items-center justify-between w-full">
+          <div class="flex items-center">
+            <svg
+              v-if="item === nowTheme"
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+              />
+            </svg>
+            <svg
+              v-else
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            ></svg>
+            <p class="ml-1">{{ item }}</p>
           </div>
-        </button>
-      </div>
-    </div>
-  </div>
+          <div class="flex">
+            <span
+              class="w-3 h-3 bg-red-500 rounded-full mr-1"
+              v-for="(color, idx) in getThemeColor(item)"
+              :key="idx"
+              :style="{ 'background-color': color }"
+            ></span>
+          </div>
+        </div>
+      </button>
+    </template>
+  </DropdownView>
 </template>
diff --git a/src/pages/other/ChatPage.vue b/src/pages/other/ChatPage.vue
index f124b25..e1fdb14 100644
--- a/src/pages/other/ChatPage.vue
+++ b/src/pages/other/ChatPage.vue
@@ -7,7 +7,8 @@ const message = ref("");
 
 const baseMsg = {
   type: "text",
-  content: "",
+  content: "我强吗？",
+  state: true,
   time: new Date().toLocaleString(),
   avatar: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
   name: "我",
@@ -15,6 +16,7 @@ const baseMsg = {
 };
 onMounted(() => {
   leftMsg.value.push(baseMsg);
+  rightMsg.value.push(baseMsg);
 });
 
 const sendMsg = (msg) => {
@@ -37,43 +39,44 @@ const sendMsg = (msg) => {
 };
 </script>
 <template>
-  <div class="chat chat-end">
-    <div class="chat-image avatar">
-      <div class="w-10 rounded-full">
-        <img
-          alt="Tailwind CSS chat bubble component"
-          src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
-        />
+  <div class="flex">
+    <div class="friend flex-1 bg-white"></div>
+    <div class="chat-view p-3" style="flex: 5">
+      <div class="chat chat-end" v-for="item in leftMsg" :key="item.id">
+        <div class="chat-image avatar">
+          <div class="w-10 rounded-full">
+            <img alt="Tailwind CSS chat bubble component" :src="item.avatar" />
+          </div>
+        </div>
+        <div class="chat-header">
+          {{ item.name }}
+          <time class="text-xs opacity-50">{{ item.time }}</time>
+        </div>
+        <div class="chat-bubble">{{ item.content }}</div>
+        <div class="chat-footer opacity-50">{{ (item.state && "已读") || "未读" }}</div>
       </div>
-    </div>
-    <div class="chat-header">
-      我
-      <time class="text-xs opacity-50">12:46</time>
-    </div>
-    <div class="chat-bubble">我强吗？</div>
-    <div class="chat-footer opacity-50">Seen at 12:46</div>
-  </div>
-  <div class="chat chat-start">
-    <div class="chat-image avatar">
-      <div class="w-10 rounded-full">
-        <img
-          alt="Tailwind CSS chat bubble component"
-          src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
-        />
+      <div class="chat chat-start" v-for="item in rightMsg" :key="item.id">
+        <div class="chat-image avatar">
+          <div class="w-10 rounded-full">
+            <img alt="Tailwind CSS chat bubble component" :src="item.avatar" />
+          </div>
+        </div>
+        <div class="chat-header">
+          {{ item.name }}
+          <time class="text-xs opacity-50">{{ item.time }}</time>
+        </div>
+        <div class="chat-bubble">{{ item.content }}</div>
+        <div class="chat-footer opacity-50">
+          {{ (item.state && "已送达") || "发送中" }}
+        </div>
       </div>
-    </div>
-    <div class="chat-header">
-      天道
-      <time class="text-xs opacity-50">12:45</time>
-    </div>
-    <div class="chat-bubble">你非常强！</div>
-    <div class="chat-footer opacity-50">Delivered</div>
-  </div>
 
-  <div class="fixed bottom-0 left-0 right-0 w-full">
-    <div class="flex justify-between">
-      <input type="text" class="w-full" v-model="message" />
-      <button class="btn btn-primary" @click="sendMsg(message)">Send</button>
+      <div class="fixed bottom-0 left-0 right-0 w-full">
+        <div class="flex justify-between">
+          <input type="text" class="w-full" v-model="message" />
+          <button class="btn btn-primary" @click="sendMsg(message)">发送</button>
+        </div>
+      </div>
     </div>
   </div>
 </template>