feat: input、textare组件替换

2025-09-04 11:07:21 +08:00
parent 1a6fad8bd5
commit cf574da1da
47 changed files with 435 additions and 425 deletions
--- a/src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/index.vue
+++ b/src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/index.vue
@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button } from 'ant-design-vue';
-import { Image, Spin, Input, Textarea, Affix } from '@arco-design/web-vue';
+import { Button, Textarea } from 'ant-design-vue';
+import { Image, Spin, Affix } from '@arco-design/web-vue';
 import TextOverTips from '@/components/text-over-tips';
 import SvgIcon from '@/components/svg-icon/index.vue';
 import DeleteCommentModal from './delete-comment-modal.vue';
@ -125,24 +125,24 @@ export default {
                </div>
              </div>
            )}
-
+            
            <Textarea
              ref={textAreaRef}
-              auto-size
-              class={`max-h-220px overflow-y-auto ${isReplay.value ? 'pt-38px' : ''}`}
+              autoSize
+              class={`max-h-220px overflow-y-auto textarea-box ${isReplay.value ? 'pt-38px' : ''}`}
              size="large"
              placeholder="输入评论"
-              v-model={comment.value}
+              v-model:value={comment.value}
              onPressEnter={onComment}
            />
          </div>

          {comment.value && (
            <div class="flex justify-end mt-12px">
-              <Button type="primary" ghost class="mr-12px rounded-8px" onClick={onClearComment}>
+              <Button type="primary" ghost class="cancel-btn mr-12px !rounded-8px" onClick={onClearComment}>
                取消
              </Button>
-              <Button type="primary" class="rounded-8px" onClick={onComment}>
+              <Button type="primary" class="!rounded-8px" onClick={onComment}>
                发送
              </Button>
            </div>
--- a/src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/style.scss
+++ b/src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/style.scss
@ -19,6 +19,9 @@
        font-family: $font-family-medium;
      }
    }
+    .cancel-btn {
+      background-color: transparent !important;
+    }
    .ai-text {
      font-family: $font-family-medium;
      font-size: 16px;
@ -30,7 +33,7 @@
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
-    :deep(.arco-textarea-wrapper) {
+    .textarea-box {
      min-height: 38px;
      display: flex;
      border-color: transparent !important;
@ -39,14 +42,11 @@
      background-color: #fff;
      color: #211f24 !important;
      transition: all 0.3s;
-      .arco-textarea-mirror,
-      .arco-textarea {
-        padding: 8px 16px !important;
-      }
+      padding: 8px 16px !important;
      &:hover {
        border-color: #6d4cfe !important;
      }
-      &.arco-textarea-focus {
+      &:focus-within {
        border-color: #6d4cfe !important;
      }
    }
--- a/src/views/material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
@ -9,35 +9,35 @@
      <div class="filter-row-item">
        <span class="label">内容稿件标题</span>
        <a-space size="medium">
-          <a-input
-            v-model="query.title"
+          <Input
+            v-model:value="query.title"
            class="!w-240px"
            placeholder="请输入内容稿件标题"
            size="medium"
-            allow-clear
+            allowClear
            @change="handleSearch"
          >
            <template #prefix>
              <icon-search />
            </template>
-          </a-input>
+          </Input>
        </a-space>
      </div>
      <div class="filter-row-item">
        <span class="label">序号</span>
        <a-space size="medium">
-          <a-input
-            v-model="query.uid"
+          <Input
+            v-model:value="query.uid"
            class="!w-160px"
            placeholder="请输入序号"
            size="medium"
-            allow-clear
+            allowClear
            @change="handleSearch"
          >
            <template #prefix>
              <icon-search />
            </template>
-          </a-input>
+          </Input>
        </a-space>
      </div>
      <div class="filter-row-item" v-if="query.audit_status === AuditStatus.Pending">
@ -99,10 +99,12 @@
 </template>

 <script setup>
-import { Button } from 'ant-design-vue';
+import { Button, Input } from 'ant-design-vue';
 import { defineEmits, defineProps } from 'vue';
 import { PLATFORMS } from '@/views/material-center/components/finished-products/manuscript/check-list/constants';
 import { AuditStatus } from '@/views/material-center/components/finished-products/constants';
+import { ref, nextTick } from 'vue';
+import dayjs from 'dayjs';

 const props = defineProps({
  query: {
--- a/src/views/material-center/components/finished-products/manuscript/check/components/content-card/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/index.vue
@ -1,9 +1,9 @@
 <script lang="jsx">
 import axios from 'axios';
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Button, Form, FormItem } from 'ant-design-vue';
+import { Button, Form, Input, FormItem } from 'ant-design-vue';
 import { IconLoading } from '@arco-design/web-vue/es/icon';
-import { Image, Input, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
+import { Image, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
 import TextOverTips from '@/components/text-over-tips';
 import HighlightTextarea from './highlight-textarea';

@ -206,11 +206,11 @@ export default {
        <Form ref={formRef} model={props.modelValue} rules={FORM_RULES} layout="vertical" auto-label-width>
          <FormItem label="标题" name="title" required>
            <Input
-              v-model={props.modelValue.title}
+              v-model:value={props.modelValue.title}
              placeholder="请输入标题"
              size="large"
-              maxLength={30}
-              show-word-limit
+              maxlength={30}
+              showCount
              disabled={isDisabled.value}
            />
          </FormItem>
--- a/src/views/material-center/components/finished-products/manuscript/components/edit-form/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/edit-form/index.vue
@ -1,7 +1,7 @@
 <script lang="jsx">
 import axios from 'axios';
-import { Button, Form, FormItem } from 'ant-design-vue';
-import { Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
+import { Button, Form, FormItem, Input } from 'ant-design-vue';
+import { Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
 // import CommonSelect from '@/components/common-select';
 // import { VueDraggable } from 'vue-draggable-plus';
 import TextOverTips from '@/components/text-over-tips';
@ -310,17 +310,17 @@ export default {
      <Form ref={formRef} model={formData.value} rules={props.rules} layout="vertical" auto-label-width>
        <FormItem label="标题" name="title" required>
          <Input
-            v-model={formData.value.title}
+            v-model:value={formData.value.title}
            onInput={() => {
-              console.log('onInput')
+              console.log('onInput');
              onChange();
              emit('reValidate');
            }}
            placeholder="请输入标题"
            size="large"
            class="!w-500px"
-            maxLength={30}
-            show-word-limit
+            maxlength={30}
+            showCount
          />
        </FormItem>

--- a/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue
@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button, Modal, Form, FormItem } from 'ant-design-vue';
-import { Input, Message as AMessage } from '@arco-design/web-vue';
+import { Button, Modal, Form, FormItem, Input } from 'ant-design-vue';
+import { Message as AMessage } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';

 import { useClipboard } from '@vueuse/core';
@ -147,7 +147,7 @@ export default {
              ),
            }}
          >
-            <Input v-model={formData.value.receiver} class="!w-240px" size="large" placeholder="请输入分享对象" />
+            <Input v-model:value={formData.value.receiver} class="!w-240px" size="large" placeholder="请输入分享对象" />
          </FormItem>
        </Form>
      </Modal>
--- a/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Modal, Button, Form, FormItem, RadioGroup, Radio } from 'ant-design-vue';
-import { Input, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
+import { Modal, Button, Form, FormItem, RadioGroup, Radio, Input } from 'ant-design-vue';
+import { Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
 import { useClipboard } from '@vueuse/core';
 import { getWriterLinksGenerate, getTemplateUrl, postWorksByLink, postWorksByFile } from '@/api/all/generationWorkshop';
 import { generateFullUrl } from '@/utils/tools';
@ -223,7 +223,7 @@ export default {
    // 渲染手写上传表单
    const renderHandwriteForm = () => (
      <FormItem label="上传链接" name="writerLink">
-        <Input v-model={form.value.writerLink} placeholder="请输入上传链接" disabled size="large" />
+        <Input v-model:value={form.value.writerLink} placeholder="请输入上传链接" disabled size="large" />
      </FormItem>
    );

--- a/src/views/material-center/components/finished-products/manuscript/list/components/filter-block/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/list/components/filter-block/index.vue
@ -3,18 +3,17 @@
    <div class="filter-row">
      <div class="filter-row-item">
        <span class="label">内容稿件标题</span>
-        <a-input
-          v-model="query.title"
+        <Input
+          v-model:value="query.title"
          class="!w-240px"
          placeholder="请输入内容稿件标题"
-          size="medium"
-          allow-clear
+          allowClear
          @change="handleSearch"
        >
          <template #prefix>
            <icon-search />
          </template>
-        </a-input>
+        </Input>
      </div>
      <!-- <div class="filter-row-item">
        <span class="label">所属项目</span>
@ -28,20 +27,17 @@
      </div> -->
      <div class="filter-row-item">
        <span class="label">序号</span>
-        <a-space size="medium">
-          <a-input
-            v-model="query.uid"
-            class="!w-160px"
-            placeholder="请输入序号"
-            size="medium"
-            allow-clear
-            @change="handleSearch"
-          >
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
-        </a-space>
+        <Input
+          v-model:value="query.uid"
+          class="!w-160px"
+          placeholder="请输入序号"
+          allowClear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </Input>
      </div>
      <div class="filter-row-item">
        <span class="label">审核状态</span>
@ -68,13 +64,13 @@
      <div class="filter-row-item">
        <Button type="primary" ghost class="mr-12px" size="medium" @click="handleSearch">
          <template #icon>
-            <icon-search class="mr-8px"/>
+            <icon-search class="mr-8px" />
          </template>
          <template #default>搜索</template>
        </Button>
        <Button size="medium" @click="handleReset">
          <template #icon>
-            <icon-refresh class="mr-8px"/>
+            <icon-refresh class="mr-8px" />
          </template>
          <template #default>重置</template>
        </Button>
@ -84,7 +80,7 @@
 </template>

 <script setup>
-import { Button } from 'ant-design-vue';
+import { Button, Input } from 'ant-design-vue';
 import { defineEmits, defineProps } from 'vue';
 import { CHECK_STATUS } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 import CommonSelect from '@/components/common-select';
--- a/src/views/material-center/components/raw-material/components/filter-block/index.vue
+++ b/src/views/material-center/components/raw-material/components/filter-block/index.vue
@ -3,47 +3,26 @@
    <div class="filter-row">
      <div class="filter-row-item">
        <span class="label">文件名称</span>
-        <a-input
-          v-model="query.name"
+        <Input
+          v-model:value="query.name"
          class="!w-240px"
          placeholder="请输入文件名称"
-          size="medium"
-          allow-clear
+          allowClear
          @change="handleSearch"
        >
          <template #prefix>
            <icon-search />
          </template>
-        </a-input>
+        </Input>
      </div>
      <div class="filter-row-item">
        <span class="label">序号</span>
-        <a-space size="medium">
-          <a-input
-            v-model="query.uid"
-            class="!w-160px"
-            placeholder="请输入序号"
-            size="medium"
-            allow-clear
-            @change="handleSearch"
-          >
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
-        </a-space>
+        <Input v-model:value="query.uid" class="!w-160px" placeholder="请输入序号" allowClear @change="handleSearch">
+          <template #prefix>
+            <icon-search />
+          </template>
+        </Input>
      </div>
-      <!-- <div class="filter-row-item">
-        <span class="label">来源</span>
-        <CommonSelect
-          placeholder="请选择所属项目"
-          :options="CHECK_STATUS"
-          v-model="query.audit_status"
-          class="!w-160px"
-          :multiple="false"
-          @change="handleSearch"
-        />
-      </div> -->
      <div class="filter-row-item">
        <span class="label">上传时间</span>
        <a-range-picker
@ -58,13 +37,13 @@
      <div class="filter-row-item">
        <Button type="primary" ghost class="mr-12px" size="medium" @click="handleSearch">
          <template #icon>
-            <icon-search class="mr-8px"/>
+            <icon-search class="mr-8px" />
          </template>
          <template #default>搜索</template>
        </Button>
        <Button size="medium" @click="handleReset">
          <template #icon>
-            <icon-refresh class="mr-8px"/>
+            <icon-refresh class="mr-8px" />
          </template>
          <template #default>重置</template>
        </Button>
@ -74,9 +53,9 @@
 </template>

 <script setup>
-import { defineEmits, defineProps } from 'vue';
-// import CommonSelect from '@/components/common-select';
-import { Button } from 'ant-design-vue';
+import { defineEmits, defineProps, ref, nextTick } from 'vue';
+import { Button, Input } from 'ant-design-vue';
+import dayjs from 'dayjs';

 const props = defineProps({
  query: {
@ -113,10 +92,8 @@ const onDateChange = (value) => {
  handleSearch();
 };

-
 const handleReset = () => {
  created_at.value = [];
  emits('reset');
 };
-
 </script>