refactor add new components

src/components/RemarkComponent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const remark = defineModel<string>('remark', { default: '' });
+
+defineProps<{
+  readonly: boolean;
+}>();
+</script>
+
+<template>
+  <div class="col-12 row">
+    <div class="col-12 q-mb-md text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-asterisk-circle-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t('general.remark') }}
+    </div>
+
+    <div class="col-12">
+      <q-field
+        class="full-width"
+        outlined
+        for="input-detail"
+        id="input-detail"
+        :readonly="readonly"
+        :borderless="readonly"
+        :label="$t('general.remark')"
+        stack-label
+        dense
+      >
+        <q-editor
+          dense
+          :model-value="readonly ? remark || '-' : remark"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (remark = v) : '')
+          "
+          min-height="5rem"
+          class="q-mt-sm q-mb-xs"
+          :flat="!readonly"
+          :readonly="readonly"
+          :toolbar-color="
+            readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
+          "
+          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+          style="
+            cursor: auto;
+            color: var(--foreground);
+            border-color: var(--surface-3);
+          "
+          :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
+        />
+      </q-field>
+    </div>
+  </div>
+</template>