From a7bb5b964a8c9ded87dcbefb9803e60e71b3346c Mon Sep 17 00:00:00 2001
From: oeyoews <jyao4783@gmail.com>
Date: Sat, 6 Jul 2024 11:34:48 +0800
Subject: [PATCH] feat: update ui

---
 .vscode/extensions.json             |  7 +++--
 components.d.ts                     |  2 ++
 entrypoints/sidepanel/Sidepanel.vue | 47 +++++++++++++++++++----------
 package.json                        |  2 +-
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index a7cea0b..55c57a1 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,6 @@
 {
-  "recommendations": ["Vue.volar"]
-}
+  "recommendations": [
+    "Vue.volar",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index 86da9ff..4d08b34 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,6 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
diff --git a/entrypoints/sidepanel/Sidepanel.vue b/entrypoints/sidepanel/Sidepanel.vue
index c0e2c0a..215b8bd 100644
--- a/entrypoints/sidepanel/Sidepanel.vue
+++ b/entrypoints/sidepanel/Sidepanel.vue
@@ -12,7 +12,7 @@ import * as WI from '@/utils/icons';
 import saveMarkdown from '@/utils/saveMarkdown';
 import save2TiddlyWiki from '@/utils/save2TiddlyWiki';
 import { html2md, md2html } from '@/utils/parser';
-import { ElMessage as notify } from 'element-plus';
+import { ElButton, ElMessage as notify } from 'element-plus';
 import { checkStatus } from '@/utils/checkStatus';
 import {
   isCheckTw5Storage,
@@ -381,27 +381,42 @@ const toggleInfoDialog = () => {
           <div>
             <h2>TiddlyWiki5 登录认证</h2>
             <div class="flex gap-2">
-              <ElInput v-model.trim.number="username" />
-              <ElInput
-                v-model.trim.number="password"
-                type="password"
-                show-password />
-              <ElButton
-                @click="
-                  saveAuth({
-                    username,
-                    password,
-                  })
-                "
-                >保存</ElButton
-              >
+              <el-form label-width="68px">
+                <el-form-item label="用户名">
+                  <ElInput
+                    v-model.trim.number="username"
+                    clearable />
+                </el-form-item>
+                <el-form-item label="密码">
+                  <ElInput
+                    v-model.trim.number="password"
+                    type="password"
+                    clearable
+                    show-password />
+                </el-form-item>
+                <el-form-item label="">
+                  <ElButton
+                    type="success"
+                    plain
+                    @click="
+                      saveAuth({
+                        username,
+                        password,
+                      })
+                    "
+                    >保存</ElButton
+                  >
+                </el-form-item>
+              </el-form>
             </div>
           </div>
 
           <div>
             <h2>Nodejs TiddlyWiki5 端口</h2>
             <div class="flex gap-2">
-              <ElInput v-model.trim.number="port" />
+              <ElInput
+                v-model.trim.number="port"
+                clearable />
               <ElButton
                 type="success"
                 plain
diff --git a/package.json b/package.json
index e3a0066..f1810b3 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "usewiki2",
   "description": "Convert HTML to Markdown, and save to your computer, support nodejs tiddlywiki",
   "private": true,
-  "version": "3.5.0",
+  "version": "3.5.1",
   "type": "module",
   "scripts": {
     "dev": "wxt",