refactor(front): update import paths to use alias for better readability and maintainability

front/components/Drawer/FileShareDrawer.vue

@@ -2,8 +2,8 @@
 import { LucideShare, LucideImage, LucideBot, LucideLanguages, LucideFileText, LucideImageMinus, LucideArrowRightLeft, LucideImagePlus, LucideAudioLines, LucideListMusic } from 'lucide-vue-next'
 import { cx } from 'class-variance-authority'
 import { isObject } from 'lodash-es';
-import showDrawer from '~/lib/showDrawer';
-import FileShareHandle from '~/components/Preprocessing/FileShareHandle.vue';
+import showDrawer from '@/lib/showDrawer';
+import FileShareHandle from '@/components/Preprocessing/FileShareHandle.vue';
 
 const props = defineProps<{
     hide: () => void

front/components/Drawer/TextShareDrawer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { LucideShare, LucideImage, LucideBot, LucideLanguages } from 'lucide-vue-next'
 import { cx } from 'class-variance-authority'
-import showDrawer from '~/lib/showDrawer';
-import TextShareHandle from '~/components/Preprocessing/TextShareHandle.vue';
+import showDrawer from '@/lib/showDrawer';
+import TextShareHandle from '@/components/Preprocessing/TextShareHandle.vue';
 
 const props = defineProps<{
     hide: () => void

front/components/Field/FileUploadField.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FileUpload from '~/components/FileUpload.vue'
+import FileUpload from '@/components/FileUpload.vue'
 import { cx } from 'class-variance-authority'
 import type { RuleExpression } from 'vee-validate'
 

front/components/Field/FormButton.vue

@@ -7,7 +7,7 @@
   </AsyncButton>
 </template>
 <script setup lang="ts">
-import { AsyncButton } from '~/components/ui/button'
+import { AsyncButton } from '@/components/ui/button'
 import { useFormContext } from 'vee-validate'
 const form = useFormContext()
 

front/components/Field/InputField.vue

@@ -7,7 +7,7 @@
   </Field>
 </template>
 <script setup lang="ts">
-import { Input } from '~/components/ui/input'
+import { Input } from '@/components/ui/input'
 const props = defineProps<{
   name: string
   label?: string

front/components/Home/File/FileUploadInputFileView.vue

@@ -3,7 +3,7 @@ import showDrawer from '~/lib/showDrawer'
 import FileShareDrawer from '@/components/Drawer/FileShareDrawer.vue'
 import FileUploadField from '@/components/Field/FileUploadField.vue'
 import FormButton from '@/components/Field/FormButton.vue'
-// const form = useFormContext()
+import PickupShareBtn from '@/components/pickupShareBtn.vue'
 
 const emit = defineEmits<{
     (e: 'change', key: string): void
@@ -32,6 +32,7 @@ const handleFormSubmit = async (form: any) => {
             <FormButton @click="handleFormSubmit">
                 <LucideShare class="size-4" />提交
             </FormButton>
+            <PickupShareBtn />
         </div>
     </div>
 </template>

front/components/Home/File/FileUploadProgressView.vue

@@ -2,7 +2,7 @@
 import CircularProgress from '@/components/CircularProgress.vue'
 import { chunk, shuffle, times } from 'lodash-es';
 import { cx } from 'class-variance-authority'
-import calcFileHash from '~/lib/calcFileHash';
+import calcFileHash from '@/lib/calcFileHash';
 import { filesize } from 'filesize';
 const props = defineProps<{
     data: { file: File, config: any, handle_type: string }

front/components/ui/pin-input/PinInput.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: () => [],
+})
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot
+    data-slot="pin-input"
+    v-bind="forwarded" :class="cn('flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed', props.class)"
+  >
+    <slot />
+  </PinInputRoot>
+</template>

front/components/ui/pin-input/PinInputGroup.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-group"
+    v-bind="forwardedProps"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

front/components/ui/pin-input/PinInputSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Minus } from 'lucide-vue-next'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'
+
+const props = defineProps<PrimitiveProps>()
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-separator"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <Minus />
+    </slot>
+  </Primitive>
+</template>

front/components/ui/pin-input/PinInputSlot.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput
+    data-slot="pin-input-slot"
+    v-bind="forwardedProps"
+    :class="cn('border-input focus:border-ring focus:ring-ring/50 focus:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:focus:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus:aria-invalid:border-destructive relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none text-center first:rounded-l-md first:border-l last:rounded-r-md focus:z-10 focus:ring-[3px]', props.class)"
+  />
+</template>

front/components/ui/pin-input/index.ts

@@ -0,0 +1,4 @@
+export { default as PinInput } from './PinInput.vue'
+export { default as PinInputGroup } from './PinInputGroup.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
+export { default as PinInputSlot } from './PinInputSlot.vue'

front/pages/index.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import FileUploadView from '~/components/Home/File/FileUploadIndexView.vue'
-import TextUploadView from '~/components/Home/Text/TextUploadIndexView.vue'
+import FileUploadView from '@/components/Home/File/FileUploadIndexView.vue'
+import TextUploadView from '@/components/Home/Text/TextUploadIndexView.vue'
 import { isString } from 'lodash-es'
 const route = useRoute()
 const router = useRouter()