发布页开发

src/components/TextareaTag/TextareaTag.scss

@@ -0,0 +1,52 @@
+  @use '~@/scss/themeColor.scss' as theme;
+.textarea-tag {
+  background: white;
+  border-radius: 16px;
+  padding: 10px 16px 5px 10px;
+  width: 100%;
+  .input-wrapper {
+    padding-bottom: 10px;
+
+    .additional-input {
+      width: 100%;
+      height: 46px;
+      font-size: 14px;
+      color: #333;
+      background: transparent;
+      border: none;
+      outline: none;
+      line-height: 1.4;
+      resize: none;
+      .textarea-placeholder{
+        color: theme.$textarea-placeholder-color;
+      }
+    }
+  }
+
+  .options-wrapper {
+    .options-label {
+      font-size: 12px;
+      color: #666;
+      margin-bottom: 10px;
+      display: block;
+    }
+
+    .options-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      .nut-checkbox{
+        margin-right: 0;
+        margin-bottom: 5px;
+        .nut-checkbox-button{
+          border: 1px solid theme.$primary-border-color;
+          color: theme.$primary-color;
+          background: transparent;
+          font-size: 12px;
+          padding: 2px 6px;
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+}

src/components/TextareaTag/TextareaTag.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useState } from 'react'
+import { View,  Textarea } from '@tarojs/components'
+
+import { Checkbox } from '@nutui/nutui-react-taro'
+
+import './TextareaTag.scss'
+
+interface TextareaTagProps {
+  value: string
+  onChange: (value: string) => void
+  title?: string
+  showTitle?: boolean
+  placeholder?: string
+  maxLength?: number
+  options?: { label: string; value: any }[] |  null
+}
+
+const TextareaTag: React.FC<TextareaTagProps> = ({ 
+  value, 
+  onChange, 
+  placeholder = '请输入',
+  maxLength = 500,
+  options = []
+}) => {
+  // 处理输入框变化
+  const [tags, setTags] = useState<string[]>([])
+  const handleInputChange = useCallback((e: any) => {
+    onChange(e.detail.value)
+  }, [onChange])
+
+  // 选择预设选项
+  const handleSelectOption = useCallback((option: string) => {
+    let newValue = ''
+    
+    if (value) {
+      // 如果已有内容，用分号分隔添加
+      newValue = value + '；' + option
+    } else {
+      // 如果没有内容，直接添加
+      newValue = option
+    }
+    
+    onChange(newValue)
+  }, [value, onChange])
+
+  return (
+    <View className='textarea-tag'>
+        {/* 输入框 */}
+        <View className='input-wrapper'>
+          <Textarea
+            className='additional-input'
+            placeholder={placeholder}
+            value={value}
+            placeholderClass='textarea-placeholder'
+            onInput={handleInputChange}
+            maxlength={maxLength}
+            autoHeight={false}
+          />
+        </View>
+        
+        {/* 选择选项 */}
+        <View className='options-wrapper'>
+          <View className='options-list'>
+            {
+              <Checkbox.Group
+              labelPosition="left"
+              direction="horizontal"
+              value={tags}
+              onChange={(value) => setTags(value)}
+            >
+              {
+                options?.map((option, index) => (
+                  <Checkbox
+                    key={index}
+                    shape="button"
+                    value={option.value}
+                    label={option.label}
+                  />
+                ))
+              }
+            </Checkbox.Group>
+            }
+          </View>
+        </View>
+      </View>
+  )
+}
+
+export default TextareaTag

src/components/TextareaTag/index.ts

@@ -0,0 +1 @@
+export { default } from './TextareaTag'