feat: update ui

oeyoews · Jul 6, 2024 · a7bb5b9 · a7bb5b9
1 parent c04fcd3
commit a7bb5b9
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 19 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,6 @@
 {
-  "recommendations": ["Vue.volar"]
-}
+  "recommendations": [
+    "Vue.volar",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
diff --git 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
@@ -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
@@ -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",