quickcommandUI样式统一调整

src/components/quickcommandUI/ButtonBox.vue

@@ -1,9 +1,9 @@
 <template>
-  <q-card class="q-dialog-plugin">
+  <q-card class="q-dialog-plugin quickcommand-ui">
-    <q-card-section>
+    <q-card-section v-if="options.title">
-      <div class="text-h5" align="center" v-text="options.title"></div>
+      <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"

src/components/quickcommandUI/ConfirmBox.vue

@@ -1,11 +1,19 @@
 <template>
-  <q-card class="q-dialog-plugin" :style="{
+  <q-card
-    width: options.width ? options.width + 'px' : '450px'
+    class="quickcommand-ui q-dialog-plugin"
-  }">
+    :style="{
-    <q-card-section>
+      width: options.width ? options.width + 'px' : '450px',
-      <div class="text-h5" align="left" v-text="options.title"></div>
+    }"
+  >
+    <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>

src/components/quickcommandUI/InputBox.vue

@@ -1,14 +1,15 @@
 <template>
-  <q-card class="q-dialog-plugin">
+  <q-card class="quickcommand-ui q-dialog-plugin" style="width: 60vw">
-    <q-card-section>
+    <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-card-actions align="right" class="button-container">
-      <q-btn color="negative" label="取消" @click="hide" />
+      <q-btn label="取消" color="grey" flat @click="hide" />
-      <q-btn color="blue-9" label="确定" @click="clickOK" />
+      <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>

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>

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;

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">
+    <div class="fixed-bottom-right q-gutter-xs button-container">
-      <q-btn round color="blue-grey" icon="arrow_back" @click="hide" />
+      <q-btn flat @click="hide" class="action-btn cancel-btn" label="取消" />
-      <q-btn round color="primary" icon="done" @click="clickOK" />
+      <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>