输入区样式调整完毕
This commit is contained in:
parent
7b056d476d
commit
7181da5b7b
@ -74,11 +74,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted, watch } from 'vue'
|
||||||
import { ARTICLE_MAX_COUNT } from '../constants/constants'
|
import { ARTICLE_MAX_COUNT } from '../constants/constants'
|
||||||
import HeaderComponent from './HeaderComponent.vue'
|
import HeaderComponent from './HeaderComponent.vue'
|
||||||
import SelectModel from './SelectModelComponent.vue'
|
import SelectModel from './SelectModelComponent.vue'
|
||||||
|
|
||||||
|
// 使用解构直接获取 isGenerating
|
||||||
const { isGenerating } = defineProps({
|
const { isGenerating } = defineProps({
|
||||||
isGenerating: {
|
isGenerating: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -86,7 +87,7 @@ const { isGenerating } = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['rewrite'])
|
const emit = defineEmits(['rewrite', 'update:model'])
|
||||||
|
|
||||||
const mode = ref('single')
|
const mode = ref('single')
|
||||||
const originalText = ref('')
|
const originalText = ref('')
|
||||||
@ -102,6 +103,10 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
watch(currentModel, (newValue) => {
|
||||||
|
emit('update:model', newValue)
|
||||||
|
})
|
||||||
|
|
||||||
const validateInput = () => {
|
const validateInput = () => {
|
||||||
if (generationCount.value < 1) {
|
if (generationCount.value < 1) {
|
||||||
setGenerationCount(1)
|
setGenerationCount(1)
|
||||||
@ -166,7 +171,20 @@ const handleRewrite = () => {
|
|||||||
background-color: rgba(255, 255, 255, 0.95);
|
background-color: rgba(255, 255, 255, 0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 其他样式从 TextRewritingTool.vue 复制相关的部分 */
|
.section-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
color: #333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.rewrite-mode-section {
|
.rewrite-mode-section {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
@ -177,7 +195,187 @@ const handleRewrite = () => {
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ... 复制其他相关样式 ... */
|
.mode-tab {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 14px;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-tab:hover {
|
||||||
|
border-color: #2ecc71;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-tab.active {
|
||||||
|
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||||
|
border-color: transparent;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generation-count {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 10px;
|
||||||
|
border-left: 4px solid #2ecc71;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-button {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
background-color: white;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-button:first-child {
|
||||||
|
border-radius: 8px 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-button:last-child {
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-button:hover:not(:disabled) {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-button:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-input {
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
|
padding: 8px 0;
|
||||||
|
width: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.original-text-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-count {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input {
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
resize: none;
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
min-height: 150px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
transition: border-color 0.3s, box-shadow 0.3s;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #2ecc71;
|
||||||
|
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rewrite-button {
|
||||||
|
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rewrite-button:hover:not(:disabled) {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rewrite-button:active:not(:disabled) {
|
||||||
|
transform: translateY(1px);
|
||||||
|
box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rewrite-button:disabled {
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: white;
|
||||||
|
animation: spin 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
.input-section {
|
.input-section {
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
<DisclaimerComponent />
|
<DisclaimerComponent />
|
||||||
<InputSection
|
<InputSection
|
||||||
:is-generating="isGenerating"
|
:is-generating="isGenerating"
|
||||||
|
v-model:model="currentModel"
|
||||||
@rewrite="handleRewrite"
|
@rewrite="handleRewrite"
|
||||||
/>
|
/>
|
||||||
<!-- 右侧结果区域 -->
|
<!-- 右侧结果区域 -->
|
||||||
@ -87,22 +88,34 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<FooterComponent />
|
<FooterComponent />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, onMounted, defineComponent } from 'vue'
|
||||||
import DisclaimerComponent from '../components/DisclaimerComponent.vue'
|
import DisclaimerComponent from '../components/DisclaimerComponent.vue'
|
||||||
import InputSection from '../components/InputSection.vue'
|
import InputSection from '../components/InputSection.vue'
|
||||||
import FooterComponent from '../components/FooterComponent.vue'
|
import FooterComponent from '../components/FooterComponent.vue'
|
||||||
|
|
||||||
|
// 使用 defineComponent 包装组件
|
||||||
|
defineComponent({
|
||||||
|
name: 'TextRewritingTool',
|
||||||
|
components: {
|
||||||
|
DisclaimerComponent,
|
||||||
|
InputSection,
|
||||||
|
FooterComponent
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const rewrittenText = ref([])
|
const rewrittenText = ref([])
|
||||||
const expandedResults = reactive({})
|
const expandedResults = reactive({})
|
||||||
const isGenerating = ref(false)
|
const isGenerating = ref(false)
|
||||||
const copiedIndex = ref(null)
|
const copiedIndex = ref(null)
|
||||||
const layoutMode = ref('list')
|
const layoutMode = ref('list')
|
||||||
|
const currentModel = ref('gpt-4o')
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
try {
|
try {
|
||||||
@ -206,14 +219,12 @@ const toggleLayout = (newLayout) => {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
/* 基础布局 */
|
/* 基础布局 */
|
||||||
.text-rewriter-container {
|
.text-rewriter-container {
|
||||||
font-family:
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
/* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
|
|
||||||
background: linear-gradient(135deg, #f0f4fd 0%, #d4e0f7 100%);
|
background: linear-gradient(135deg, #f0f4fd 0%, #d4e0f7 100%);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -223,82 +234,15 @@ const toggleLayout = (newLayout) => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 背景装饰 */
|
|
||||||
.background-decoration {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: -1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-circle {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.5;
|
|
||||||
filter: blur(60px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-circle-1 {
|
|
||||||
width: 400px;
|
|
||||||
height: 400px;
|
|
||||||
background: linear-gradient(45deg, rgba(46, 204, 113, 0.3), rgba(52, 152, 219, 0.3));
|
|
||||||
top: -100px;
|
|
||||||
left: -100px;
|
|
||||||
animation: float 15s ease-in-out infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-circle-2 {
|
|
||||||
width: 600px;
|
|
||||||
height: 600px;
|
|
||||||
background: linear-gradient(45deg, rgba(155, 89, 182, 0.2), rgba(41, 128, 185, 0.2));
|
|
||||||
bottom: -200px;
|
|
||||||
right: -200px;
|
|
||||||
animation: float 20s ease-in-out infinite alternate-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-circle-3 {
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
background: linear-gradient(45deg, rgba(241, 196, 15, 0.2), rgba(231, 76, 60, 0.2));
|
|
||||||
top: 40%;
|
|
||||||
left: 60%;
|
|
||||||
animation: float 18s ease-in-out infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-dots {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
|
||||||
background-size: 30px 30px;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
0% {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(50px, 50px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-rewriter-layout {
|
.text-rewriter-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1800px;
|
max-width: 1800px;
|
||||||
height: calc(100vh - 80px); /* Reduced height to make room for footer */
|
height: calc(100vh - 80px);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin-bottom: 10px; /* Add margin to avoid content being hidden by footer */
|
margin-bottom: 10px;
|
||||||
/* padding-bottom: 10px; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 右侧结果区域 */
|
/* 右侧结果区域 */
|
||||||
@ -345,7 +289,12 @@ const toggleLayout = (newLayout) => {
|
|||||||
color: #2e7d32;
|
color: #2e7d32;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 新增：布局切换按钮样式 */
|
.count-badge {
|
||||||
|
background-color: #e3f2fd;
|
||||||
|
color: #1565c0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 布局切换按钮样式 */
|
||||||
.layout-toggle {
|
.layout-toggle {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -369,197 +318,6 @@ const toggleLayout = (newLayout) => {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.count-badge {
|
|
||||||
background-color: #e3f2fd;
|
|
||||||
color: #1565c0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 标题样式 */
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 4px 0;
|
|
||||||
background: linear-gradient(90deg, #2ecc71, #27ae60);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #666;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0 0 16px 0;
|
|
||||||
color: #333;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-icon {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 字数统计 */
|
|
||||||
.char-count {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
font-weight: normal;
|
|
||||||
margin-left: auto;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 生成数量控制样式 */
|
|
||||||
.generation-count {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border-radius: 10px;
|
|
||||||
border-left: 4px solid #2ecc71;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-control {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-button {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
background-color: white;
|
|
||||||
color: #333;
|
|
||||||
font-size: 18px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-button:first-child {
|
|
||||||
border-radius: 8px 0 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-button:last-child {
|
|
||||||
border-radius: 0 8px 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-button:hover:not(:disabled) {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-button:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-input {
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-left: none;
|
|
||||||
border-right: none;
|
|
||||||
padding: 8px 0;
|
|
||||||
width: 50px;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 输入区域样式 */
|
|
||||||
.original-text-section {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-input {
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
resize: none;
|
|
||||||
width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
min-height: 150px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-wrap: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
transition:
|
|
||||||
border-color 0.3s,
|
|
||||||
box-shadow 0.3s;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #2ecc71;
|
|
||||||
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 按钮样式 */
|
|
||||||
.rewrite-button {
|
|
||||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
|
||||||
border: none;
|
|
||||||
border-radius: 10px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-top: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rewrite-button:hover:not(:disabled) {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rewrite-button:active:not(:disabled) {
|
|
||||||
transform: translateY(1px);
|
|
||||||
box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rewrite-button:disabled {
|
|
||||||
opacity: 0.7;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 加载动画 */
|
|
||||||
.loading-spinner {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top-color: white;
|
|
||||||
animation: spin 1s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 结果区域样式 */
|
/* 结果区域样式 */
|
||||||
.results-container {
|
.results-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -574,7 +332,6 @@ const toggleLayout = (newLayout) => {
|
|||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 新增：网格布局样式 */
|
|
||||||
.results-list.grid-layout {
|
.results-list.grid-layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
@ -596,7 +353,6 @@ const toggleLayout = (newLayout) => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 新增：网格布局中的项目样式 */
|
|
||||||
.result-block.grid-item {
|
.result-block.grid-item {
|
||||||
height: 250px;
|
height: 250px;
|
||||||
transition: height 0.5s ease;
|
transition: height 0.5s ease;
|
||||||
@ -745,17 +501,6 @@ const toggleLayout = (newLayout) => {
|
|||||||
animation-delay: -0.16s;
|
animation-delay: -0.16s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
0%,
|
|
||||||
80%,
|
|
||||||
100% {
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 空状态 */
|
/* 空状态 */
|
||||||
.empty-result-section {
|
.empty-result-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -794,26 +539,20 @@ const toggleLayout = (newLayout) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeInOut {
|
@keyframes bounce {
|
||||||
0% {
|
0%,
|
||||||
opacity: 0;
|
80%,
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
transition:
|
transition: opacity 0.3s, transform 0.3s;
|
||||||
opacity 0.3s,
|
|
||||||
transform 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-from,
|
.fade-enter-from,
|
||||||
@ -822,22 +561,7 @@ const toggleLayout = (newLayout) => {
|
|||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-enter-active,
|
/* Toast 样式 */
|
||||||
.list-leave-active {
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 提示框样式 */
|
|
||||||
:global(.toast-message) {
|
:global(.toast-message) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
@ -856,25 +580,6 @@ const toggleLayout = (newLayout) => {
|
|||||||
transform: translateX(-50%) translateY(0);
|
transform: translateX(-50%) translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 布局切换按钮 */
|
|
||||||
.layout-toggle-button {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-toggle-button:hover {
|
|
||||||
background-color: #e0e0e0;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
.text-rewriter-layout {
|
.text-rewriter-layout {
|
||||||
@ -886,7 +591,6 @@ const toggleLayout = (newLayout) => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 网格布局在小屏幕上调整 */
|
|
||||||
.results-list.grid-layout {
|
.results-list.grid-layout {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
}
|
}
|
||||||
@ -906,16 +610,6 @@ const toggleLayout = (newLayout) => {
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-tabs {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.generation-count {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
@ -939,7 +633,6 @@ const toggleLayout = (newLayout) => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 在手机上强制使用列表布局 */
|
|
||||||
.results-list.grid-layout {
|
.results-list.grid-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -949,50 +642,4 @@ const toggleLayout = (newLayout) => {
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 模式选择样式 */
|
|
||||||
.rewrite-mode-section {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-tabs {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-tab {
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 10px;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
flex: 1;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 14px;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-tab:hover {
|
|
||||||
border-color: #2ecc71;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-tab.active {
|
|
||||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
|
||||||
border-color: transparent;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-icon {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user