From d64f00a8b442056286bbf060bbbb831e1d064e2d Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Mon, 20 Jan 2025 16:55:43 +0800
Subject: [PATCH] =?UTF-8?q?quickcommandUI=E6=A0=B7=E5=BC=8F=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/quickcommandUI/ButtonBox.vue   |  8 +-
 src/components/quickcommandUI/ConfirmBox.vue  | 28 +++++--
 src/components/quickcommandUI/InputBox.vue    | 28 +++++--
 .../quickcommandUI/QuickCommand.vue           | 12 ++-
 src/components/quickcommandUI/SelectList.vue  | 10 +--
 src/components/quickcommandUI/TextArea.vue    | 77 ++++++++++++++++---
 6 files changed, 124 insertions(+), 39 deletions(-)

diff --git a/src/components/quickcommandUI/ButtonBox.vue b/src/components/quickcommandUI/ButtonBox.vue
index 9f941b6..e40b4fb 100644
--- a/src/components/quickcommandUI/ButtonBox.vue
+++ b/src/components/quickcommandUI/ButtonBox.vue
@@ -1,9 +1,9 @@
 <template>
-  <q-card class="q-dialog-plugin">
-    <q-card-section>
-      <div class="text-h5" align="center" v-text="options.title"></div>
+  <q-card class="q-dialog-plugin quickcommand-ui">
+    <q-card-section v-if="options.title">
+      <div class="text-h8" align="center" v-text="options.title"></div>
     </q-card-section>
-    <q-card-section class="q-gutter-lg">
+    <q-card-section class="q-gutter-md">
       <div v-for="(label, index) in options.labels" :key="index">
         <q-btn
           class="full-width"
diff --git a/src/components/quickcommandUI/ConfirmBox.vue b/src/components/quickcommandUI/ConfirmBox.vue
index fa6136d..6a5930d 100644
--- a/src/components/quickcommandUI/ConfirmBox.vue
+++ b/src/components/quickcommandUI/ConfirmBox.vue
@@ -1,11 +1,19 @@
 <template>
-  <q-card class="q-dialog-plugin" :style="{
-    width: options.width ? options.width + 'px' : '450px'
-  }">
-    <q-card-section>
-      <div class="text-h5" align="left" v-text="options.title"></div>
+  <q-card
+    class="quickcommand-ui q-dialog-plugin"
+    :style="{
+      width: options.width ? options.width + 'px' : '450px',
+    }"
+  >
+    <q-card-section class="row items-center q-gutter-sm">
+      <q-img src="logo.png" width="1.5rem" />
+      <div class="text-h8" align="left" v-text="options.title"></div>
     </q-card-section>
-    <q-card-section v-if="options.isHtml" v-html="options.message" class="content" />
+    <q-card-section
+      v-if="options.isHtml"
+      v-html="options.message"
+      class="content"
+    />
     <q-card-section v-else v-text="options.message" class="content" />
     <q-card-section class="flex justify-end q-gutter-sm">
       <q-btn flat label="取消" color="grey" @click="hide" />
@@ -36,4 +44,12 @@ export default {
   overflow: auto;
   max-height: 350px;
 }
+
+.q-card {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+.q-card--dark {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
 </style>
diff --git a/src/components/quickcommandUI/InputBox.vue b/src/components/quickcommandUI/InputBox.vue
index 8eae34f..9887244 100644
--- a/src/components/quickcommandUI/InputBox.vue
+++ b/src/components/quickcommandUI/InputBox.vue
@@ -1,14 +1,15 @@
 <template>
-  <q-card class="q-dialog-plugin">
-    <q-card-section>
+  <q-card class="quickcommand-ui q-dialog-plugin" style="width: 60vw">
+    <q-card-section v-if="options.title">
       <div class="text-h5" align="center" v-text="options.title"></div>
     </q-card-section>
-    <q-card-section class="q-gutter-sm">
+    <q-card-section class="input-container">
       <div v-for="(label, index) in options.labels" :key="index">
+        <div class="q-pa-xs">{{ label }}</div>
         <q-input
           outlined
+          dense
           v-model="results[index]"
-          :label="label"
           :hint="options.hints[index]"
           hide-hint
           :autofocus="index === 0"
@@ -16,9 +17,9 @@
         />
       </div>
     </q-card-section>
-    <q-card-actions align="right">
-      <q-btn color="negative" label="取消" @click="hide" />
-      <q-btn color="blue-9" label="确定" @click="clickOK" />
+    <q-card-actions align="right" class="button-container">
+      <q-btn label="取消" color="grey" flat @click="hide" />
+      <q-btn color="primary" label="确定" flat @click="clickOK" />
     </q-card-actions>
   </q-card>
 </template>
@@ -44,3 +45,16 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.input-container {
+  padding: 15px 15px 0 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.button-container {
+  padding: 5px 15px;
+}
+</style>
diff --git a/src/components/quickcommandUI/QuickCommand.vue b/src/components/quickcommandUI/QuickCommand.vue
index b89b931..731c566 100644
--- a/src/components/quickcommandUI/QuickCommand.vue
+++ b/src/components/quickcommandUI/QuickCommand.vue
@@ -188,7 +188,7 @@ export default {
        *
        * 如需对每个选项单独注册点击事件，可以在initItems的元素中添加id和clickFn，如：
        * initItems = [{id:1, title: "1", description: "1", clickFn:function(e){console.log(e)}}, {id:2, title: "2", description: "2", clickFn:function(e){console.log(e)}}]
-       * 
+       *
        * @example
        * initItems = ["<div>1</div>", "<div>2</div>", "<div>3</div>"]
        * options = {placeholder: "输入进行筛选，支持拼音", optionType: "html", enableSearch: true, showCancelButton: false, closeOnSelect: true}
@@ -315,3 +315,13 @@ export default {
   },
 };
 </script>
+
+<style>
+.quickcommand-ui.q-card {
+  background-color: #f4f4f4;
+}
+
+.body--dark .quickcommand-ui.q-card {
+  background-color: var(--q-dark-page);
+}
+</style>
diff --git a/src/components/quickcommandUI/SelectList.vue b/src/components/quickcommandUI/SelectList.vue
index b0c610d..5fc9918 100644
--- a/src/components/quickcommandUI/SelectList.vue
+++ b/src/components/quickcommandUI/SelectList.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card @mousewheel="mouseHandler">
+  <q-card class="quickcommand-ui q-dialog-plugin" @mousewheel="mouseHandler">
     <q-virtual-scroll
       ref="scrollBar"
       @scroll="scrollHandler"
@@ -258,14 +258,6 @@ export default {
 </script>
 
 <style scoped>
-.q-card {
-  background: #f4f4f4;
-}
-
-.q-card--dark {
-  background: #303133;
-}
-
 .shortcut {
   user-select: none;
   transition: 0;
diff --git a/src/components/quickcommandUI/TextArea.vue b/src/components/quickcommandUI/TextArea.vue
index 6d43d46..8ecc33c 100644
--- a/src/components/quickcommandUI/TextArea.vue
+++ b/src/components/quickcommandUI/TextArea.vue
@@ -1,25 +1,22 @@
 <template>
-  <q-card class="q-dialog-plugin">
+  <q-card class="quickcommand-ui q-dialog-plugin">
     <textarea
       v-model="result"
       :placeholder="options.placeholder"
       autofocus
       class="fixed container"
       :style="{
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        background: '#00000000',
-        fontSize: '16px',
         outline: 'none',
-        border: '3px solid #3577cb',
-        borderRadius: '5px',
       }"
     />
-    <div class="fixed-bottom-right q-pa-md q-gutter-sm">
-      <q-btn round color="blue-grey" icon="arrow_back" @click="hide" />
-      <q-btn round color="primary" icon="done" @click="clickOK" />
+    <div class="fixed-bottom-right q-gutter-xs button-container">
+      <q-btn flat @click="hide" class="action-btn cancel-btn" label="取消" />
+      <q-btn
+        flat
+        @click="clickOK"
+        class="action-btn confirm-btn"
+        label="确定"
+      />
     </div>
   </q-card>
 </template>
@@ -45,3 +42,59 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+textarea {
+  top: 10px;
+  bottom: 10px;
+  left: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.03);
+  font-size: 16px;
+  padding: 16px;
+  border-radius: 4px;
+  border: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+textarea:focus {
+  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.body--dark textarea {
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.body--dark textarea:focus {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.button-container {
+  padding-bottom: 25px;
+  padding-right: 30px;
+}
+
+.action-btn {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 0 5px;
+}
+
+.action-btn:hover {
+  transform: scale(1.05);
+}
+
+.confirm-btn {
+  color: var(--q-primary);
+}
+
+.cancel-btn {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.body--dark .cancel-btn {
+  color: rgba(255, 255, 255, 0.5);
+}
+</style>