3 个 ui 完善

src/components/quickcommandUI/ButtonBox.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-dialog ref="dialog" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin">
+      <q-card-section>
+        <div class="text-h5" align="center" v-text="title"></div>
+      </q-card-section>
+      <q-card-section class="q-gutter-lg">
+        <div v-for="(label, index) in labels" :key="index">
+          <q-btn
+            class="full-width"
+            color="primary"
+            :label="label"
+            @click="onOKClick(label, index)"
+          />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      results: this.values,
+    };
+  },
+  props: {
+    labels: Array,
+    title: String,
+  },
+  emits: ["ok", "hide"],
+  methods: {
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+
+    onDialogHide() {
+      this.$emit("hide");
+    },
+
+    onOKClick(label, index) {
+      this.$emit("ok", { id: index, text: label });
+      this.hide();
+    },
+
+    onCancelClick() {
+      this.hide();
+    },
+  },
+};
+</script>

src/components/quickcommandUI/TextArea.vue

@@ -0,0 +1,69 @@
+<template>
+  <q-dialog maximized ref="dialog" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin">
+      <textarea
+        v-model="result"
+        :placeholder="placeholder"
+        autofocus
+        class="fixed"
+        :style="{
+          top: 0,
+          bottom: '36px',
+          left: 0,
+          right: 0,
+          background: '#00000000',
+          color: $q.dark.isActive ? 'white' : 'black',
+          fontSize: '16px',
+          outline: 'none',
+        }"
+      />
+      <q-btn-group
+        spread
+        class="fixed-bottom"
+        :style="{
+          left: 0,
+          right: 0,
+        }"
+      >
+        <q-btn label="取消" color="negative" @click="onCancelClick" />
+        <q-btn label="确定" color="primary" @click="onOKClick" />
+      </q-btn-group>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      result: this.value,
+    };
+  },
+  props: {
+    placeholder: String,
+    value: String,
+  },
+  emits: ["ok", "hide"],
+  methods: {
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+
+    onDialogHide() {
+      this.$emit("hide");
+    },
+
+    onOKClick() {
+      this.$emit("ok", this.result);
+      this.hide();
+    },
+
+    onCancelClick() {
+      this.hide();
+    },
+  },
+};
+</script>