feat 搭建架构骨架

2026-09-24 09:09:47 +08:00
parent dd9f6b77a4
commit 7a2efa3fea
180 changed files with 18967 additions and 9 deletions
--- a/src/views/service/cpns/ChatInput.vue
+++ b/src/views/service/cpns/ChatInput.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { AppButton } from '@/components'
+
+/** 单文件大小上限 1GB */
+const MAX_FILE_SIZE = 1024 * 1024 * 1024
+
+const content = ref('')
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const emit = defineEmits<{
+  send: [content: string]
+  sendFile: [file: File]
+}>()
+
+async function doSend(): Promise<void> {
+  const text = content.value.trim()
+  if (!text) return
+  emit('send', text)
+  content.value = ''
+  await nextTick()
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    void doSend()
+  }
+}
+
+function openFilePicker(): void {
+  fileInputRef.value?.click()
+}
+
+function onFileChange(event: Event): void {
+  const target = event.target
+  if (!(target instanceof HTMLInputElement)) return
+  const file = target.files?.[0]
+  target.value = ''
+  if (!file) return
+  if (file.size > MAX_FILE_SIZE) {
+    ElMessage.warning('文件大小不能超过1G')
+    return
+  }
+  emit('sendFile', file)
+}
+</script>
+
+<template>
+  <div class="chat-input">
+    <textarea
+      v-model="content"
+      class="chat-input__textarea"
+      placeholder="输入消息，按Enter发送，Shift+Enter换行..."
+      rows="3"
+      @keydown="onKeydown"
+    />
+    <div class="chat-input__bar">
+      <span class="chat-input__hint text-secondary">
+        按Enter发送 | 支持拖拽上传文件
+      </span>
+      <div class="chat-input__actions">
+        <button
+          type="button"
+          class="chat-input__attach"
+          aria-label="上传附件"
+          title="上传附件"
+          @click="openFilePicker"
+        >
+          📎
+        </button>
+        <input
+          ref="fileInputRef"
+          type="file"
+          class="chat-input__file"
+          @change="onFileChange"
+        >
+        <AppButton type="primary" @click="doSend">
+          发送
+        </AppButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.chat-input {
+  .flex(column, flex-start);
+  gap: @spacing-sm;
+  padding: @spacing-base;
+  border-top: 1px solid @border-color;
+  background: @white;
+
+  &__textarea {
+    width: 100%;
+    padding: @spacing-sm @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+    color: @text-color;
+    font-size: @font-size-base;
+    line-height: 1.6;
+    resize: none;
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: @primary-color;
+    }
+
+    &::placeholder {
+      color: @text-color-disabled;
+    }
+  }
+
+  &__bar {
+    .flex(row, space-between);
+    gap: @spacing-base;
+  }
+
+  &__hint {
+    font-size: @font-size-sm;
+  }
+
+  &__actions {
+    .flex(row, flex-end, center);
+    gap: @spacing-sm;
+  }
+
+  &__attach {
+    .flex(row, center);
+    width: 32px;
+    height: 32px;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
+    background: @white;
+    font-size: @font-size-lg;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: @primary-color;
+    }
+  }
+
+  &__file {
+    display: none;
+  }
+}
+</style>