Merge pull request #3 from daichen-daisy/main

feat: form dialog & confirm fialog

quasar.config.js

@@ -102,7 +102,7 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: [],
+      plugins: ['Dialog'],
     },
 
     // animations: 'all', // --- includes all animations

src/components/dialog/ConfirmDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <q-dialog ref="dialog" persistent @hide="onDialogHide">
+    <q-card :style="`width: ${width}`" class="q-pa-md">
+      <q-item>
+        <q-item-section avatar class="q-pr-sm">
+          <q-icon name="announcement" color="accent" />
+        </q-item-section>
+        <q-item-section class="q-py-sm">
+          <q-item-label class="text-weight-bold text-subtitle1">
+            {{ title }}
+          </q-item-label>
+        </q-item-section>
+        <q-space />
+      </q-item>
+      <q-card-section class="q-py-md">
+        {{ content }}
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn
+          v-for="button in buttons"
+          :key="button.label"
+          v-bind="button"
+          v-close-popup
+          flat
+          :class="button.class"
+          @click="onClick(button)"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { QDialog } from 'quasar';
+
+import { DialogButton } from './type';
+
+export default defineComponent({
+  name: 'ConfirmDialog',
+
+  props: {
+    title: {
+      type: String,
+      default: '弹窗',
+    },
+    width: {
+      type: String,
+      default: '400px',
+    },
+    content: {
+      type: String,
+      default: '描述',
+    },
+    buttons: {
+      type: Array as PropType<DialogButton[]>,
+      default: () => {
+        return [];
+      },
+    },
+  },
+
+  emits: ['ok', 'hide'],
+
+  methods: {
+    show() {
+      (this.$refs['dialog'] as QDialog).show();
+    },
+
+    hide() {
+      (this.$refs['dialog'] as QDialog).hide();
+    },
+
+    onDialogHide() {
+      this.$emit('hide');
+    },
+
+    onClick(button: DialogButton) {
+      this.$emit('ok', { type: button.actionType });
+      this.hide();
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/dialog/FormDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <q-dialog ref="dialog" persistent @hide="onDialogHide">
+    <q-card :style="`width: ${width}; max-width: 800px`">
+      <q-item>
+        <q-item-section class="q-pa-sm">
+          <q-item-label class="text-weight-bold text-subtitle1">
+            {{ title }}
+          </q-item-label>
+        </q-item-section>
+        <q-space />
+        <q-btn
+          v-close-popup
+          dense
+          flat
+          no-hover
+          size="sm"
+          icon="close"
+          class="no-hover-btn"
+        ></q-btn>
+      </q-item>
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <q-form ref="form" greedy>
+          <slot name="form-content"></slot>
+        </q-form>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn v-if="!hideCancel" v-close-popup flat label="取消" />
+        <q-btn unelevated :label="okLabel" class="primary-btn" @click="save" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { QDialog } from 'quasar';
+
+export default defineComponent({
+  name: 'FormDialog',
+
+  props: {
+    title: {
+      type: String,
+      default: '弹窗',
+    },
+    width: {
+      type: String,
+      default: '500px',
+    },
+    okLabel: {
+      type: String,
+      default: '保存',
+    },
+    hideCancel: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['confirm', 'close'],
+
+  methods: {
+    save() {
+      (this.$refs['form'] as HTMLFormElement)
+        .validate()
+        .then((success: unknown) => {
+          if (success) {
+            this.$emit('confirm');
+          }
+        });
+    },
+
+    hide() {
+      (this.$refs['dialog'] as QDialog).hide();
+    },
+
+    onDialogHide() {
+      this.$emit('close');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/dialog/type.ts

@@ -0,0 +1,6 @@
+export type DialogButton = {
+  /** 选项的显示文本 */
+  label: string;
+  actionType?: string;
+  class?: string;
+};

src/components/table/DataTable.vue

@@ -146,7 +146,7 @@
     </template>
 
     <template
-      v-for="(_, name) in ($slots as Readonly<QTableSlots>)"
+      v-for="(_, name) in ($slots as Readonly<unknown>)"
       #[name]="slotData"
     >
       <slot :name="name" v-bind="slotData || {}" />
@@ -207,7 +207,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
-import { QTableColumn, QTableSlots } from 'quasar';
+import { QTableColumn } from 'quasar';
 
 import { FilterCondition, Pagination } from 'components/table/type';
 

src/css/app.scss

@@ -4,7 +4,7 @@
 }
 
 .q-item__section--avatar {
-  min-width: 36px;
+  min-width: 28px;
 }
 
 /* the style for ticked checkbox */
@@ -13,6 +13,18 @@
   border: 1px solid $primary !important;
 }
 
+.input-label {
+  opacity: 0.5;
+  padding-left: 5px;
+  padding-bottom: 8px;
+}
+
+.no-hover-btn {
+  .q-focus-helper {
+    display: none;
+  }
+}
+
 // Light Mode
 .primary-btn {
   background-color: $primary;
@@ -21,6 +33,13 @@
   }
 }
 
+.accent-btn {
+  background-color: $accent;
+  .q-btn__content {
+    color: $grey-2;
+  }
+}
+
 .secondary-btn {
   .q-btn__content {
     color: $grey-10;
@@ -53,13 +72,21 @@
 .body--dark {
   --q-primary: #215ae5;
   --q-secondary: rgba(255, 255, 255, 0.07);
+  --q-negative: #c95b5b;
 
   .secondary-btn {
     .q-btn__content {
       color: $grey-2;
     }
   }
 
+  .accent-btn {
+    background-color: $accent;
+    .q-btn__content {
+      color: $grey-10;
+    }
+  }
+
   .flat-btn {
     color: $grey-2;
   }

src/layouts/MainLayout.vue

@@ -18,14 +18,14 @@
               class="q-mt-sm"
               src="~assets/logo-dark.png"
               alt="logo"
-              width="120"
+              width="110"
             />
             <img
               v-else
               class="q-mt-sm"
               src="~assets/logo.png"
               alt="logo"
-              width="120"
+              width="110"
             />
           </a>
         </q-toolbar-title>
@@ -57,11 +57,11 @@
       v-model="leftDrawerOpen"
       show-if-above
       bordered
-      :width="200"
+      :width="185"
       :breakpoint="400"
     >
       <q-scroll-area class="fit">
-        <q-list class="q-py-lg main-menu">
+        <q-list class="q-py-lg q-pr-sm main-menu">
           <div v-for="(group, idx) in mainMenu" :key="idx">
             <q-item
               v-for="(item, itemIdx) in group.links"
@@ -73,17 +73,13 @@
               active-class="active-link"
             >
               <q-item-section avatar>
-                <q-icon :name="item.icon" size="xs" />
+                <q-icon :name="item.icon" size="xs" class="q-ml-sm" />
               </q-item-section>
               <q-item-section>
                 <q-item-label>{{ item.title }}</q-item-label>
               </q-item-section>
             </q-item>
-            <q-separator
-              v-if="idx !== mainMenu.length - 1"
-              inset
-              class="q-my-sm"
-            />
+            <q-separator v-if="idx !== mainMenu.length - 1" class="q-my-sm" />
           </div>
         </q-list>
       </q-scroll-area>
@@ -167,12 +163,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.active-link {
-  background: $primary;
-  color: white !important;
+.main-menu {
+  .q-item {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
 
-  .q-icon {
+  .active-link {
+    background: $primary;
     color: white !important;
+
+    .q-icon {
+      color: white !important;
+    }
   }
 }
 </style>