From fc87cd03608b9aea050a6a319862a21b2bb9ede9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <i@haozi.net>
Date: Tue, 3 Dec 2024 10:55:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20logo=20=E8=87=AA=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/layout/sidebar/components/SideLogo.vue    | 3 ++-
 web/src/layout/sidebar/components/SideSetting.vue | 3 +++
 web/src/store/modules/theme/helpers.ts            | 3 ++-
 web/src/views/database/CreateDatabaseModal.vue    | 1 +
 web/src/views/database/CreateServerModal.vue      | 1 +
 web/src/views/database/CreateUserModal.vue        | 1 +
 web/src/views/database/IndexView.vue              | 6 +++---
 web/src/views/database/UpdateServerModal.vue      | 1 +
 web/src/views/database/UpdateUserModal.vue        | 1 +
 web/src/views/login/IndexView.vue                 | 5 ++++-
 web/types/theme.d.ts                              | 2 ++
 11 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/web/src/layout/sidebar/components/SideLogo.vue b/web/src/layout/sidebar/components/SideLogo.vue
index 8af722d9..1043766e 100644
--- a/web/src/layout/sidebar/components/SideLogo.vue
+++ b/web/src/layout/sidebar/components/SideLogo.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import logo from '@/assets/images/logo.png'
+import logoImg from '@/assets/images/logo.png'
 import { useThemeStore } from '@/store'
 
 const themeStore = useThemeStore()
+const logo = computed(() => themeStore.logo || logoImg)
 </script>
 
 <template>
diff --git a/web/src/layout/sidebar/components/SideSetting.vue b/web/src/layout/sidebar/components/SideSetting.vue
index 492f58fc..3ed3d337 100644
--- a/web/src/layout/sidebar/components/SideSetting.vue
+++ b/web/src/layout/sidebar/components/SideSetting.vue
@@ -76,6 +76,9 @@ const menus = computed<TreeSelectOption[]>(() => {
       <n-form>
         <n-flex vertical>
           <n-alert type="info"> 设置保存在浏览器，清空浏览器缓存后将会重置 </n-alert>
+          <n-form-item label="自定义 Logo">
+            <n-input v-model:value="themeStore.logo" />
+          </n-form-item>
           <n-form-item label="隐藏菜单">
             <n-tree-select
               multiple
diff --git a/web/src/store/modules/theme/helpers.ts b/web/src/store/modules/theme/helpers.ts
index 98f05efa..572dd145 100644
--- a/web/src/store/modules/theme/helpers.ts
+++ b/web/src/store/modules/theme/helpers.ts
@@ -32,7 +32,8 @@ export function defaultSettings(): Theme.Setting {
   }
   const locale = themeSetting.locale || 'zh_CN'
   const name = themeSetting.name || import.meta.env.VITE_APP_TITLE
-  return { isMobile, darkMode, sider, header, tab, primaryColor, otherColor, locale, name }
+  const logo = ''
+  return { isMobile, darkMode, sider, header, tab, primaryColor, otherColor, locale, name, logo }
 }
 
 /** 获取naive的主题颜色 */
diff --git a/web/src/views/database/CreateDatabaseModal.vue b/web/src/views/database/CreateDatabaseModal.vue
index d4be69dc..bc5969bf 100644
--- a/web/src/views/database/CreateDatabaseModal.vue
+++ b/web/src/views/database/CreateDatabaseModal.vue
@@ -96,6 +96,7 @@ watch(
         <n-input
           v-model:value="createModel.password"
           type="password"
+          show-password-on="click"
           @keydown.enter.prevent
           placeholder="输入密码"
         />
diff --git a/web/src/views/database/CreateServerModal.vue b/web/src/views/database/CreateServerModal.vue
index 2774d583..ddd52861 100644
--- a/web/src/views/database/CreateServerModal.vue
+++ b/web/src/views/database/CreateServerModal.vue
@@ -101,6 +101,7 @@ const handleCreate = () => {
         <n-input
           v-model:value="createModel.password"
           type="password"
+          show-password-on="click"
           @keydown.enter.prevent
           placeholder="输入数据库服务器密码"
         />
diff --git a/web/src/views/database/CreateUserModal.vue b/web/src/views/database/CreateUserModal.vue
index 81bf2991..555de53b 100644
--- a/web/src/views/database/CreateUserModal.vue
+++ b/web/src/views/database/CreateUserModal.vue
@@ -77,6 +77,7 @@ watch(
         <n-input
           v-model:value="createModel.password"
           type="password"
+          show-password-on="click"
           @keydown.enter.prevent
           placeholder="输入密码"
         />
diff --git a/web/src/views/database/IndexView.vue b/web/src/views/database/IndexView.vue
index f6a28fd8..a21f81d5 100644
--- a/web/src/views/database/IndexView.vue
+++ b/web/src/views/database/IndexView.vue
@@ -41,13 +41,13 @@ const createServerModalShow = ref(false)
     <n-flex vertical>
       <n-tabs v-model:value="currentTab" type="line" animated>
         <n-tab-pane name="database" tab="数据库">
-          <database-list v-model:type="currentTab" />
+          <database-list />
         </n-tab-pane>
         <n-tab-pane name="user" tab="用户">
-          <user-list v-model:type="currentTab" />
+          <user-list />
         </n-tab-pane>
         <n-tab-pane name="server" tab="服务器">
-          <server-list v-model:type="currentTab" />
+          <server-list />
         </n-tab-pane>
       </n-tabs>
     </n-flex>
diff --git a/web/src/views/database/UpdateServerModal.vue b/web/src/views/database/UpdateServerModal.vue
index d6f9f10d..2469cc48 100644
--- a/web/src/views/database/UpdateServerModal.vue
+++ b/web/src/views/database/UpdateServerModal.vue
@@ -93,6 +93,7 @@ watch(
         <n-input
           v-model:value="updateModel.password"
           type="password"
+          show-password-on="click"
           @keydown.enter.prevent
           placeholder="输入数据库服务器密码"
         />
diff --git a/web/src/views/database/UpdateUserModal.vue b/web/src/views/database/UpdateUserModal.vue
index 7cfc8a8a..4184bcbc 100644
--- a/web/src/views/database/UpdateUserModal.vue
+++ b/web/src/views/database/UpdateUserModal.vue
@@ -48,6 +48,7 @@ watch(
         <n-input
           v-model:value="updateModel.password"
           type="password"
+          show-password-on="click"
           @keydown.enter.prevent
           placeholder="输入密码"
         />
diff --git a/web/src/views/login/IndexView.vue b/web/src/views/login/IndexView.vue
index ac1b8f8e..11911196 100644
--- a/web/src/views/login/IndexView.vue
+++ b/web/src/views/login/IndexView.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import user from '@/api/panel/user'
 import bgImg from '@/assets/images/login_bg.webp'
+import logoImg from '@/assets/images/logo.png'
 import { addDynamicRoutes } from '@/router'
 import { useThemeStore, useUserStore } from '@/store'
 import { getLocal, removeLocal, setLocal } from '@/utils'
@@ -35,6 +36,8 @@ const themeStore = useThemeStore()
 const loging = ref<boolean>(false)
 const isRemember = useStorage('isRemember', false)
 
+const logo = computed(() => themeStore.logo || logoImg)
+
 async function handleLogin() {
   const { username, password, safe_login } = loginInfo.value
   if (!username || !password) {
@@ -105,7 +108,7 @@ watch(
     <div m-auto min-w-345 f-c-c rounded-10 bg-white bg-opacity-60 p-15 card-shadow dark:bg-dark>
       <div w-480 flex-col px-20 py-35>
         <h5 color="#6a6a6a" f-c-c text-24 font-normal>
-          <img class="mr-10" height="50" src="@/assets/images/logo.png" />{{ themeStore.name }}
+          <n-image :src="logo" height="50" preview-disabled mr-10 />{{ themeStore.name }}
         </h5>
         <div mt-30>
           <n-input
diff --git a/web/types/theme.d.ts b/web/types/theme.d.ts
index a991b795..0afefa00 100644
--- a/web/types/theme.d.ts
+++ b/web/types/theme.d.ts
@@ -48,5 +48,7 @@ declare namespace Theme {
     locale: string
     /** 名称 */
     name: string
+    /** Logo */
+    logo: string
   }
 }