pcv2s4hl5
/
debate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tabbar样式改进

Browse Source
main
heiferleaf 2 months ago
parent 700e5370b7
commit 1e0cb425f1
46 changed files with 2172 additions and 1112 deletions
Show Stats Download Patch File Download Diff File

2
Debate_backend/src/main/resources/application.yml
Unescape View File

@ -5,7 +5,7 @@ spring:
driver-class-name: com.mysql.cj.jdbc.Driver driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/wx_miniapp?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai url: jdbc:mysql://localhost:3306/wx_miniapp?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
username: root username: root
password: 123456 password: 1234
mybatis: mybatis:
mapper-locations: classpath:mapper/*.xml mapper-locations: classpath:mapper/*.xml

2
Debate_backend/target/classes/application.yml
Unescape View File

@ -5,7 +5,7 @@ spring:
driver-class-name: com.mysql.cj.jdbc.Driver driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/wx_miniapp?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai url: jdbc:mysql://localhost:3306/wx_miniapp?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
username: root username: root
password: 123456 password: 1234
mybatis: mybatis:
mapper-locations: classpath:mapper/*.xml mapper-locations: classpath:mapper/*.xml

BIN
Debate_backend/target/classes/com/learning/newdemo/common/Result.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/controller/WxAIController.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/controller/WxLoginController.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/entity/WxUser.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/service/WxArgumentService.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/service/WxDebateService.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/service/WxReviewService.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/service/impl/WxArgumentServiceImpl.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/service/impl/WxDebateServiceImpl.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/service/impl/WxReviewServiceImpl.class
View File

Binary file not shown.

BIN
Debate_backend/target/classes/com/learning/newdemo/service/impl/WxUserServiceImpl.class
View File

Binary file not shown.

42
Debate_backend/target/classes/db/wx_miniapp.sql
Unescape View File

@ -1,22 +1,22 @@
-- 创建数据库 -- 创建数据库
CREATE DATABASE IF NOT EXISTS wx_miniapp DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; CREATE DATABASE IF NOT EXISTS wx_miniapp DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
-- 使用数据库 -- 使用数据库
USE wx_miniapp; USE wx_miniapp;
-- 创建微信用户表 -- 创建微信用户表
CREATE TABLE IF NOT EXISTS `wx_user` ( CREATE TABLE IF NOT EXISTS `wx_user` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`openid` varchar(100) NOT NULL COMMENT '微信openid', `openid` varchar(100) NOT NULL COMMENT '微信openid',
`nickname` varchar(50) DEFAULT NULL COMMENT '昵称', `nickname` varchar(50) DEFAULT NULL COMMENT '昵称',
`avatar_url` varchar(500) DEFAULT NULL COMMENT '头像URL', `avatar_url` varchar(500) DEFAULT NULL COMMENT '头像URL',
`gender` tinyint(4) DEFAULT NULL COMMENT '性别 0-未知 1-男 2-女', `gender` tinyint(4) DEFAULT NULL COMMENT '性别 0-未知 1-男 2-女',
`country` varchar(50) DEFAULT NULL COMMENT '国家', `country` varchar(50) DEFAULT NULL COMMENT '国家',
`province` varchar(50) DEFAULT NULL COMMENT '省份', `province` varchar(50) DEFAULT NULL COMMENT '省份',
`city` varchar(50) DEFAULT NULL COMMENT '城市', `city` varchar(50) DEFAULT NULL COMMENT '城市',
`language` varchar(50) DEFAULT NULL COMMENT '语言', `language` varchar(50) DEFAULT NULL COMMENT '语言',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', `update_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`), PRIMARY KEY (`id`),
UNIQUE KEY `uk_openid` (`openid`) COMMENT 'openid唯一索引' UNIQUE KEY `uk_openid` (`openid`) COMMENT 'openid唯一索引'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='微信用户表'; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='微信用户表';

114
Debate_backend/target/classes/mapper/WxUserMapper.xml
Unescape View File

@ -1,58 +1,58 @@
<?xml version="1.0" encoding="UTF-8" ?> <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.learning.newdemo.mapper.WxUserMapper"> <mapper namespace="com.learning.newdemo.mapper.WxUserMapper">
<resultMap id="BaseResultMap" type="com.learning.newdemo.entity.WxUser"> <resultMap id="BaseResultMap" type="com.learning.newdemo.entity.WxUser">
<id column="id" property="id" jdbcType="INTEGER"/> <id column="id" property="id" jdbcType="INTEGER"/>
<result column="openid" property="openid" jdbcType="VARCHAR"/> <result column="openid" property="openid" jdbcType="VARCHAR"/>
<result column="nickname" property="nickname" jdbcType="VARCHAR"/> <result column="nickname" property="nickname" jdbcType="VARCHAR"/>
<result column="avatar_url" property="avatarUrl" jdbcType="VARCHAR"/> <result column="avatar_url" property="avatarUrl" jdbcType="VARCHAR"/>
<result column="gender" property="gender" jdbcType="INTEGER"/> <result column="gender" property="gender" jdbcType="INTEGER"/>
<result column="country" property="country" jdbcType="VARCHAR"/> <result column="country" property="country" jdbcType="VARCHAR"/>
<result column="province" property="province" jdbcType="VARCHAR"/> <result column="province" property="province" jdbcType="VARCHAR"/>
<result column="city" property="city" jdbcType="VARCHAR"/> <result column="city" property="city" jdbcType="VARCHAR"/>
<result column="language" property="language" jdbcType="VARCHAR"/> <result column="language" property="language" jdbcType="VARCHAR"/>
<result column="create_time" property="createTime" jdbcType="TIMESTAMP"/> <result column="create_time" property="createTime" jdbcType="TIMESTAMP"/>
<result column="update_time" property="updateTime" jdbcType="TIMESTAMP"/> <result column="update_time" property="updateTime" jdbcType="TIMESTAMP"/>
</resultMap> </resultMap>
<sql id="Base_Column_List"> <sql id="Base_Column_List">
id, openid, nickname, avatar_url, gender, country, province, city, language, create_time, update_time id, openid, nickname, avatar_url, gender, country, province, city, language, create_time, update_time
</sql> </sql>
<select id="selectByOpenid" resultMap="BaseResultMap" parameterType="java.lang.String"> <select id="selectByOpenid" resultMap="BaseResultMap" parameterType="java.lang.String">
select select
<include refid="Base_Column_List"/> <include refid="Base_Column_List"/>
from wx_user from wx_user
where openid = #{openid,jdbcType=VARCHAR} where openid = #{openid,jdbcType=VARCHAR}
</select> </select>
<insert id="insert" parameterType="com.learning.newdemo.entity.WxUser" useGeneratedKeys="true" keyProperty="id"> <insert id="insert" parameterType="com.learning.newdemo.entity.WxUser" useGeneratedKeys="true" keyProperty="id">
insert into wx_user ( insert into wx_user (
openid, nickname, avatar_url, gender, country, province, city, language, create_time openid, nickname, avatar_url, gender, country, province, city, language, create_time
) )
values ( values (
#{openid,jdbcType=VARCHAR}, #{openid,jdbcType=VARCHAR},
#{nickname,jdbcType=VARCHAR}, #{nickname,jdbcType=VARCHAR},
#{avatarUrl,jdbcType=VARCHAR}, #{avatarUrl,jdbcType=VARCHAR},
#{gender,jdbcType=INTEGER}, #{gender,jdbcType=INTEGER},
#{country,jdbcType=VARCHAR}, #{country,jdbcType=VARCHAR},
#{province,jdbcType=VARCHAR}, #{province,jdbcType=VARCHAR},
#{city,jdbcType=VARCHAR}, #{city,jdbcType=VARCHAR},
#{language,jdbcType=VARCHAR}, #{language,jdbcType=VARCHAR},
now() now()
) )
</insert> </insert>
<update id="updateByPrimaryKey" parameterType="com.learning.newdemo.entity.WxUser"> <update id="updateByPrimaryKey" parameterType="com.learning.newdemo.entity.WxUser">
update wx_user update wx_user
set nickname = #{nickname,jdbcType=VARCHAR}, set nickname = #{nickname,jdbcType=VARCHAR},
avatar_url = #{avatarUrl,jdbcType=VARCHAR}, avatar_url = #{avatarUrl,jdbcType=VARCHAR},
gender = #{gender,jdbcType=INTEGER}, gender = #{gender,jdbcType=INTEGER},
country = #{country,jdbcType=VARCHAR}, country = #{country,jdbcType=VARCHAR},
province = #{province,jdbcType=VARCHAR}, province = #{province,jdbcType=VARCHAR},
city = #{city,jdbcType=VARCHAR}, city = #{city,jdbcType=VARCHAR},
language = #{language,jdbcType=VARCHAR}, language = #{language,jdbcType=VARCHAR},
update_time = now() update_time = now()
where id = #{id,jdbcType=INTEGER} where id = #{id,jdbcType=INTEGER}
</update> </update>
</mapper> </mapper>

574
Debate_front/src/components/ArgumentCom.vue
Unescape View File

@ -1,8 +1,29 @@
<template> <template>
<view class="argument-component"> <view class="argument-component">
<view class="content-card"> <!-- 动态背景元素 -->
<view class="card-title">立论功能</view> <view class="animated-bg">
<view class="card-content">在这里可以进行辩题立论和论点整理</view> <view v-for="i in 6" :key="i" class="bg-circle" :style="getRandomCircleStyle()"></view>
</view>
<!-- 顶部卡片 - 可收缩 -->
<view class="content-card" :class="{ 'collapsed': isCardCollapsed }">
<view class="card-header" @click="toggleCard">
<view class="card-icon-wrapper">
<view class="card-icon">
<image src="/static/icons/brain-line.png" mode="aspectFit"></image>
</view>
</view>
<view class="card-text">
<view class="card-title">立论助手</view>
<view class="card-content" v-if="!isCardCollapsed">AI辅助构建辩论框架，智能生成论点与论据</view>
</view>
<view class="collapse-icon">
<image
:src="isCardCollapsed ? '/static/icons/arrow-down-s-line.png' : '/static/icons/arrow-up-s-line.png'"
mode="aspectFit"
></image>
</view>
</view>
</view> </view>
<!-- 聊天展示区 --> <!-- 聊天展示区 -->
@ -19,36 +40,49 @@
class="chat-message" class="chat-message"
:class="msg.role === 'user' ? 'from-user' : 'from-ai'" :class="msg.role === 'user' ? 'from-user' : 'from-ai'"
> >
<view class="avatar" v-if="msg.role === 'ai'">AI</view>
<view class="bubble"> <view class="bubble">
<block v-if="msg.loading"> <block v-if="msg.loading">
<view class="dot-flashing"></view> <view class="loading-animation">
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
</view>
</block> </block>
<block v-else> <block v-else>
{{ msg.content }} {{ msg.content }}
</block> </block>
</view> </view>
<view class="avatar user-avatar" v-if="msg.role === 'user'">我</view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 输入框与发送按钮 --> <!-- 输入框与发送按钮 -->
<view class="chat-input"> <view class="chat-input">
<view class="input-group"> <view class="input-group">
<input <input
class="input-box" class="input-box"
type="text" type="text"
v-model="position" v-model="position"
placeholder="请输入论方，例如：正方" placeholder="请输入论方，例如：正方"
/> />
<textarea <view class="textarea-container">
class="textarea-box" <textarea
v-model="question" class="textarea-box"
placeholder="请输入辩题，例如：应不应该取消作业" v-model="question"
auto-height placeholder="请输入辩题，例如：应不应该取消作业"
/> auto-height
</view> />
<button class="send-button" @click="sendMessage()">发送</button> <button class="send-button-embedded" @click="sendMessage()">
<image src="/static/icons/send-plane-fill.png" mode="aspectFit"></image>
</button>
</view> </view>
</view> </view>
</view>
<!-- 底部安全区域 -->
<view class="safe-area-bottom"></view>
</view>
</template> </template>
<script> <script>
@ -63,12 +97,35 @@ export default {
} }
], ],
scrollToView: "", scrollToView: "",
position: "", position: "",
question: "", question: "",
isCardCollapsed: false, // 控制卡片是否收缩
}; };
}, },
methods: { methods: {
// 切换卡片展开/收缩状态
toggleCard() {
this.isCardCollapsed = !this.isCardCollapsed;
},
// 生成随机背景圆圈样式
getRandomCircleStyle() {
const size = Math.random() * 300 + 100;
const x = Math.random() * 100;
const y = Math.random() * 100;
const delay = Math.random() * 5;
const duration = Math.random() * 10 + 15;
return {
width: `${size}rpx`,
height: `${size}rpx`,
left: `${x}%`,
top: `${y}%`,
animationDelay: `${delay}s`,
animationDuration: `${duration}s`
};
},
async sendMessage() { async sendMessage() {
// 添加用户消息 // 添加用户消息
this.messages.push({ this.messages.push({
@ -83,13 +140,14 @@ export default {
this.messages.push({ role: "ai", content: "", loading: true }); this.messages.push({ role: "ai", content: "", loading: true });
this.scrollToBottom(); this.scrollToBottom();
// 模拟 AI 请求（你可替换为实际接口） // 调用 AI 接口
const reply = await this.callAI(this.position, this.question); const reply = await this.callAI(this.position, this.question);
// 替换 loading 消息为真实 AI 回答 // 替换 loading 消息为真实 AI 回答
this.messages.splice(aiIndex, 1, { role: "ai", content: reply }); this.messages.splice(aiIndex, 1, { role: "ai", content: reply });
this.scrollToBottom(); this.scrollToBottom();
}, },
async callAI(topic, stance) { async callAI(topic, stance) {
this.position = ""; this.position = "";
this.question = ""; this.question = "";
@ -97,7 +155,7 @@ export default {
console.log("callAI:", topic, stance); console.log("callAI:", topic, stance);
uni.request({ uni.request({
url: "http://localhost:8080/api/ai/argument", // ⚠️ 修改为你的真实后端 URL url: "http://localhost:8080/api/ai/argument",
method: "POST", method: "POST",
header: { header: {
"Content-Type": "application/json", "Content-Type": "application/json",
@ -136,175 +194,461 @@ export default {
<style scoped> <style scoped>
.argument-component { .argument-component {
width: 100%; width: 100%;
padding: 20rpx; height: 100vh;
padding: 30rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 78vh; background: linear-gradient(135deg, #4338CA 0%, #7C3AED 100%);
background: linear-gradient(135deg, #2c3e50, #4ca1af); overflow-x: hidden;
box-sizing: border-box;
padding-bottom: 180rpx; /* 为底部TabBar留出空间 */
position: relative;
}
overflow-x: hidden; /* 禁止横向滚动 */ /* 动态背景 */
box-sizing: border-box; /* 避免 padding 导致溢出 */ .animated-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
} }
.bg-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
animation: float 20s infinite ease-in-out;
opacity: 0.4;
/* 添加过渡效果 */
transition: all 1.5s ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(5%, 10%) scale(1.05);
}
50% {
transform: translate(10%, 5%) scale(0.95);
}
75% {
transform: translate(5%, 15%) scale(1.1);
}
}
/* 顶部卡片 */
.content-card { .content-card {
background-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.15);
border-radius: 20rpx;
padding: 30rpx;
width: 90%;
margin: 0 auto 30rpx;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 28rpx;
padding: 20rpx;
width: 100%;
margin-bottom: 30rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
animation: slideDown 0.6s ease-out;
transition: all 0.3s ease;
}
.content-card.collapsed {
padding: 16rpx 20rpx;
margin-bottom: 20rpx;
}
.card-header {
display: flex;
align-items: center;
cursor: pointer;
}
.collapse-icon {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.collapse-icon image {
width: 30rpx;
height: 30rpx;
filter: brightness(0) invert(1);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-30rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-icon-wrapper {
position: relative;
margin-right: 24rpx;
}
.card-icon {
width: 80rpx;
height: 80rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.collapsed .card-icon {
width: 70rpx;
height: 70rpx;
}
.card-icon::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(45deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(45deg);
}
20%, 100% {
transform: translateX(100%) rotate(45deg);
}
}
.card-icon image {
width: 45rpx;
height: 45rpx;
filter: brightness(0) invert(1);
z-index: 1;
transition: all 0.3s ease;
}
.collapsed .card-icon image {
width: 40rpx;
height: 40rpx;
}
.card-text {
flex: 1;
transition: all 0.3s ease;
} }
.card-title { .card-title {
font-size: 36rpx; font-size: 36rpx;
color: #ffffff; color: #FFFFFF;
font-weight: bold; font-weight: 700;
margin-bottom: 20rpx; margin-bottom: 10rpx;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.collapsed .card-title {
font-size: 32rpx;
margin-bottom: 0;
} }
.card-content { .card-content {
font-size: 28rpx; font-size: 26rpx;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
transition: all 0.3s ease;
} }
/* 聊天区域 */ /* 聊天区域 */
.chat-area { .chat-area {
flex: 1; flex: 1;
width: 90%; width: 100%;
margin: 0 auto; background: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.05); border-radius: 28rpx;
border-radius: 20rpx; padding: 30rpx;
padding: 20rpx; margin-bottom: 30rpx;
overflow-y: auto; overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
z-index: 1;
transition: all 0.3s ease;
} }
/* 消息通用样式 */ /* 消息通用样式 */
.chat-message { .chat-message {
display: flex; display: flex;
margin-bottom: 20rpx; margin-bottom: 30rpx;
align-items: flex-start;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
/* 用户消息靠右 */
.from-user { .from-user {
justify-content: flex-end; justify-content: flex-end;
} }
/* AI消息靠左 */
.from-ai { .from-ai {
justify-content: flex-start; justify-content: flex-start;
} }
/* 头像样式 */
.avatar {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24rpx;
font-weight: bold;
margin-right: 16rpx;
flex-shrink: 0;
}
.user-avatar {
background: #F59E0B;
margin-left: 16rpx;
margin-right: 0;
}
/* 气泡样式 */ /* 气泡样式 */
.bubble { .bubble {
max-width: 70%; max-width: 70%;
padding: 20rpx; padding: 20rpx 24rpx;
border-radius: 20rpx; border-radius: 24rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 1.6; line-height: 1.6;
word-break: break-word; word-break: break-word;
box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
position: relative;
transition: all 0.3s ease; /* 添加过渡效果 */
} }
/* 用户气泡颜色 */
.from-user .bubble { .from-user .bubble {
background-color: #00c4ff; background: #F59E0B;
color: white; color: #FFFFFF;
border-bottom-right-radius: 0; border-bottom-right-radius: 4rpx;
font-weight: 500;
}
.from-user .bubble::after {
content: '';
position: absolute;
right: -12rpx;
bottom: 0;
width: 0;
height: 0;
border-left: 16rpx solid #F59E0B;
border-top: 16rpx solid transparent;
transition: all 0.3s ease; /* 添加过渡效果 */
} }
/* AI气泡颜色 */
.from-ai .bubble { .from-ai .bubble {
background-color: #ffd54f; background: rgba(255, 255, 255, 0.2);
color: #333; color: #FFFFFF;
border-bottom-left-radius: 0; border-bottom-left-radius: 4rpx;
min-width: 80rpx;
}
min-width: 80px; .from-ai .bubble::after {
content: '';
position: absolute;
left: -12rpx;
bottom: 0;
width: 0;
height: 0;
border-right: 16rpx solid rgba(255, 255, 255, 0.2);
border-top: 16rpx solid transparent;
transition: all 0.3s ease; /* 添加过渡效果 */
}
/* 加载动画 */
.loading-animation {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 30rpx;
}
.loading-animation .dot {
width: 12rpx;
height: 12rpx;
background-color: #FFFFFF;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out both;
}
.loading-animation .dot:nth-child(1) {
animation-delay: -0.32s;
}
.loading-animation .dot:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
}
} }
/* 输入区域 */ /* 输入区域 */
.chat-input { .chat-input {
display: flex; display: flex;
padding: 20rpx; padding: 16rpx;
background-color: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.15);
border-top: 1rpx solid #ccc; border-radius: 28rpx;
align-items: flex-end; align-items: flex-end;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
margin-bottom: 20rpx;
}
.send-button.left-send {
margin-right: 12rpx;
margin-left: 0;
background: #F59E0B;
width: 70rpx;
height: 70rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 15rpx rgba(245, 158, 11, 0.4);
transition: all 0.3s;
padding: 0;
}
.send-button.left-send:active {
transform: scale(0.95) rotate(-15deg);
box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
}
.send-button.left-send image {
width: 36rpx;
height: 36rpx;
filter: brightness(0) invert(1);
} }
.input-group { .input-group {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10rpx; gap: 16rpx;
} }
.input-box { .input-box {
background-color: #fff; background: rgba(255, 255, 255, 0.2);
border-radius: 10rpx; border-radius: 20rpx;
padding: 10rpx 20rpx; padding: 16rpx 20rpx;
margin-bottom: 20rpx;
font-size: 28rpx; font-size: 28rpx;
border: none; color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s;
height: 70rpx;
} }
.textarea-box { .textarea-container {
background-color: #fff; position: relative;
border-radius: 10rpx; width: 100%;
padding: 10rpx 20rpx;
font-size: 28rpx;
min-height: 80rpx;
border: none;
} }
.send-button { .textarea-box {
margin-left: 20rpx; background: rgba(255, 255, 255, 0.2);
background-color: #00bcd4; border-radius: 20rpx;
color: #fff; padding: 16rpx 20rpx 16rpx 90rpx; /* 增加左侧内边距 */
border-radius: 10rpx;
padding: 20rpx;
font-size: 28rpx; font-size: 28rpx;
white-space: nowrap; color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s;
min-height: 70rpx;
max-height: 180rpx;
width: 100%;
box-sizing: border-box;
} }
/* AI loading 动画 */ .send-button-embedded {
.dot-flashing { position: absolute;
width: 20rpx; bottom: 16rpx;
height: 20rpx; left: 16rpx;
background: transparent;
width: 60rpx;
height: 60rpx;
border-radius: 50%; border-radius: 50%;
background-color: #333; display: flex;
animation: dotFlashing 1s infinite linear alternate; align-items: center;
position: relative; justify-content: center;
transition: all 0.3s;
padding: 0;
z-index: 2;
}
margin-left: auto; .send-button-embedded:active {
margin-right: auto; transform: scale(1.2) rotate(-15deg);
} }
.dot-flashing::before,
.dot-flashing::after { .send-button-embedded image {
content: ""; width: 40rpx;
display: inline-block; height: 40rpx;
position: absolute; filter: invert(72%) sepia(87%) saturate(1242%) hue-rotate(325deg) brightness(101%) contrast(96%);
top: 0;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #333;
} }
.dot-flashing::before {
left: -30rpx; .input-box::placeholder,
animation: dotFlashing 1s infinite linear alternate; .textarea-box::placeholder {
animation-delay: 0.2s; color: burlywood;
} }
.dot-flashing::after {
left: 30rpx; .input-box:focus,
animation: dotFlashing 1s infinite linear alternate; .textarea-box:focus {
animation-delay: 0.4s; border-color: #F59E0B;
outline: none;
background: rgba(255, 255, 255, 0.25);
} }
@keyframes dotFlashing { /* 底部安全区域 */
0% { .safe-area-bottom {
background-color: #333; height: 20rpx;
} height: calc(20rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
50%, height: calc(20rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
100% {
background-color: rgba(51, 51, 51, 0.3);
}
} }
</style> </style>

622
Debate_front/src/components/DebateCom.vue
Unescape View File

@ -1,8 +1,43 @@
<template> <template>
<view class="argument-component"> <view class="debate-component">
<view class="content-card"> <!-- 动态背景元素 -->
<view class="card-title">辩论功能</view> <view class="animated-bg">
<view class="card-content">在这里可以和AI进行激烈的交流~</view> <view v-for="i in 6" :key="i" class="bg-circle" :style="getRandomCircleStyle()"></view>
</view>
<!-- 顶部卡片 - 可收缩 -->
<view class="content-card" :class="{ 'collapsed': isCardCollapsed }">
<view class="card-header" @click="toggleCard">
<view class="card-icon-wrapper">
<view class="card-icon">
<image src="/static/icons/robot-2-line.png" mode="aspectFit"></image>
</view>
</view>
<view class="card-text">
<view class="card-title">模拟辩论</view>
<view class="card-content" v-if="!isCardCollapsed">与AI进行实时辩论对练，提升应变能力</view>
</view>
<view class="collapse-icon">
<image
:src="isCardCollapsed ? '/static/icons/arrow-down-s-line.png' : '/static/icons/arrow-up-s-line.png'"
mode="aspectFit"
></image>
</view>
</view>
</view>
<!-- 辩论主题选择器 -->
<view class="topic-selector" v-if="!isCardCollapsed">
<scroll-view scroll-x class="topic-scroll" show-scrollbar="false">
<view
v-for="(topic, idx) in debateTopics"
:key="idx"
:class="['topic-pill', { active: selectedTopic === idx }]"
@click="selectTopic(idx)"
>
{{ topic }}
</view>
</scroll-view>
</view> </view>
<!-- 聊天展示区 --> <!-- 聊天展示区 -->
@ -19,30 +54,43 @@
class="chat-message" class="chat-message"
:class="msg.role === 'user' ? 'from-user' : 'from-ai'" :class="msg.role === 'user' ? 'from-user' : 'from-ai'"
> >
<view class="avatar" v-if="msg.role === 'ai'">AI</view>
<view class="bubble"> <view class="bubble">
<block v-if="msg.loading"> <block v-if="msg.loading">
<view class="dot-flashing"></view> <view class="loading-animation">
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
</view>
</block> </block>
<block v-else> <block v-else>
{{ msg.content }} {{ msg.content }}
</block> </block>
</view> </view>
<view class="avatar user-avatar" v-if="msg.role === 'user'">我</view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 输入框与发送按钮 --> <!-- 输入框与发送按钮 -->
<view class="chat-input"> <view class="chat-input">
<view class="input-group"> <view class="input-group">
<textarea <view class="textarea-container">
class="textarea-box" <textarea
v-model="content" class="textarea-box"
placeholder="请输入辩论的过程" v-model="content"
auto-height placeholder="输入你的辩论观点，与AI进行思辨交锋"
maxlength="1000" auto-height
/> maxlength="1000"
/>
<button class="send-button-embedded" @click="sendMessage()">
<image src="/static/icons/send-plane-fill.png" mode="aspectFit"></image>
</button>
</view>
</view> </view>
<button class="send-button" @click="sendMessage()">发送</button>
</view> </view>
<!-- 底部安全区域 -->
<view class="safe-area-bottom"></view>
</view> </view>
</template> </template>
@ -53,16 +101,62 @@ export default {
input: "", input: "",
messages: [ messages: [
{ {
role: "ai", role: "ai",
content: "在这里你可以和我进行辩论，现在，辩论开始！" content: "在这里你可以和我进行辩论，现在，辩论开始！请选择一个话题或提出你想讨论的观点。"
} }
], ],
scrollToView: "", scrollToView: "",
content: "", content: "",
debateTopics: [
"教育改革", "环境保护", "人工智能", "社会公平", "文化传承", "科技伦理"
],
selectedTopic: -1,
isCardCollapsed: false, // 控制卡片是否收缩
}; };
}, },
methods: { methods: {
// 切换卡片展开/收缩状态
toggleCard() {
this.isCardCollapsed = !this.isCardCollapsed;
},
// 生成随机背景圆圈样式
getRandomCircleStyle() {
const size = Math.random() * 300 + 100;
const x = Math.random() * 100;
const y = Math.random() * 100;
const delay = Math.random() * 5;
const duration = Math.random() * 10 + 15;
return {
width: `${size}rpx`,
height: `${size}rpx`,
left: `${x}%`,
top: `${y}%`,
animationDelay: `${delay}s`,
animationDuration: `${duration}s`
};
},
// 选择辩论主题
selectTopic(index) {
if (this.selectedTopic === index) return;
this.selectedTopic = index;
const topic = this.debateTopics[index];
// 添加系统消息
this.messages.push({
role: "ai",
content: `已选择「${topic}」作为辩论主题。请分享你对这个话题的观点，我们开始辩论吧！`
});
this.scrollToBottom();
},
async sendMessage() { async sendMessage() {
if (!this.content.trim()) return;
// 添加用户消息 // 添加用户消息
this.messages.push({ this.messages.push({
role: "user", role: "user",
@ -97,6 +191,7 @@ export default {
this.messages.splice(aiIndex, 1, { role: "ai", content: reply }); this.messages.splice(aiIndex, 1, { role: "ai", content: reply });
this.scrollToBottom(); this.scrollToBottom();
}, },
async callAI(history, content) { async callAI(history, content) {
this.content = ""; this.content = "";
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -141,177 +236,478 @@ export default {
</script> </script>
<style scoped> <style scoped>
.argument-component { .debate-component {
width: 100%; width: 100%;
padding: 20rpx; height: 100vh;
padding: 30rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 78vh; background: linear-gradient(135deg, #4338CA 0%, #7C3AED 100%);
background: linear-gradient(135deg, #2c3e50, #c6c333); overflow-x: hidden;
box-sizing: border-box;
padding-bottom: 180rpx; /* 为底部TabBar留出空间 */
position: relative;
}
overflow-x: hidden; /* 禁止横向滚动 */ /* 动态背景 */
box-sizing: border-box; /* 避免 padding 导致溢出 */ .animated-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.bg-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
animation: float 20s infinite ease-in-out;
opacity: 0.4;
/* 添加过渡效果 */
transition: all 1.5s ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(5%, 10%) scale(1.05);
}
50% {
transform: translate(10%, 5%) scale(0.95);
}
75% {
transform: translate(5%, 15%) scale(1.1);
}
} }
/* 顶部卡片 */
.content-card { .content-card {
background-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.15);
border-radius: 20rpx;
padding: 30rpx;
width: 90%;
margin: 0 auto 30rpx;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 28rpx;
padding: 20rpx;
width: 100%;
margin-bottom: 30rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
animation: slideDown 0.6s ease-out;
transition: all 0.3s ease;
}
.content-card.collapsed {
padding: 16rpx 20rpx;
margin-bottom: 20rpx;
}
.card-header {
display: flex;
align-items: center;
cursor: pointer;
}
.collapse-icon {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.collapse-icon image {
width: 30rpx;
height: 30rpx;
filter: brightness(0) invert(1);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-30rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-icon-wrapper {
position: relative;
margin-right: 24rpx;
}
.card-icon {
width: 80rpx;
height: 80rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.collapsed .card-icon {
width: 70rpx;
height: 70rpx;
}
.card-icon::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(45deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(45deg);
}
20%, 100% {
transform: translateX(100%) rotate(45deg);
}
}
.card-icon image {
width: 45rpx;
height: 45rpx;
filter: brightness(0) invert(1);
z-index: 1;
transition: all 0.3s ease;
}
.collapsed .card-icon image {
width: 40rpx;
height: 40rpx;
}
.card-text {
flex: 1;
transition: all 0.3s ease;
} }
.card-title { .card-title {
font-size: 36rpx; font-size: 36rpx;
color: #ffffff; color: #FFFFFF;
font-weight: bold; font-weight: 700;
margin-bottom: 20rpx; margin-bottom: 10rpx;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.collapsed .card-title {
font-size: 32rpx;
margin-bottom: 0;
} }
.card-content { .card-content {
font-size: 28rpx; font-size: 26rpx;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
transition: all 0.3s ease;
}
/* 主题选择器 */
.topic-selector {
margin-bottom: 30rpx;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.topic-scroll {
white-space: nowrap;
padding: 10rpx 0;
}
.topic-pill {
display: inline-block;
padding: 16rpx 30rpx;
background: rgba(255, 255, 255, 0.15);
border-radius: 50rpx;
margin-right: 20rpx;
color: rgba(255, 255, 255, 0.8);
font-size: 26rpx;
transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.topic-pill.active {
background: #F59E0B;
color: #FFFFFF;
box-shadow: 0 4rpx 15rpx rgba(245, 158, 11, 0.4);
transform: scale(1.05);
border-color: #F59E0B;
} }
/* 聊天区域 */ /* 聊天区域 */
.chat-area { .chat-area {
flex: 1; flex: 1;
width: 90%; width: 100%;
margin: 0 auto; background: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.05); border-radius: 28rpx;
border-radius: 20rpx; padding: 30rpx;
padding: 20rpx; margin-bottom: 30rpx;
overflow-y: auto; overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
z-index: 1;
transition: all 0.3s ease;
} }
/* 消息通用样式 */ /* 消息通用样式 */
.chat-message { .chat-message {
display: flex; display: flex;
margin-bottom: 20rpx; margin-bottom: 30rpx;
align-items: flex-start;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
/* 用户消息靠右 */
.from-user { .from-user {
justify-content: flex-end; justify-content: flex-end;
} }
/* AI消息靠左 */
.from-ai { .from-ai {
justify-content: flex-start; justify-content: flex-start;
} }
/* 头像样式 */
.avatar {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24rpx;
font-weight: bold;
margin-right: 16rpx;
flex-shrink: 0;
}
.user-avatar {
background: #F59E0B;
margin-left: 16rpx;
margin-right: 0;
}
/* 气泡样式 */ /* 气泡样式 */
.bubble { .bubble {
max-width: 70%; max-width: 70%;
padding: 20rpx; padding: 20rpx 24rpx;
border-radius: 20rpx; border-radius: 24rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 1.6; line-height: 1.6;
word-break: break-word; word-break: break-word;
box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
position: relative;
transition: all 0.3s ease; /* 添加过渡效果 */
} }
/* 用户气泡颜色 */
.from-user .bubble { .from-user .bubble {
background-color: #00c4ff; background: #F59E0B;
color: white; color: #FFFFFF;
border-bottom-right-radius: 0; border-bottom-right-radius: 4rpx;
font-weight: 500;
}
.from-user .bubble::after {
content: '';
position: absolute;
right: -12rpx;
bottom: 0;
width: 0;
height: 0;
border-left: 16rpx solid #F59E0B;
border-top: 16rpx solid transparent;
transition: all 0.3s ease; /* 添加过渡效果 */
} }
/* AI气泡颜色 */
.from-ai .bubble { .from-ai .bubble {
background-color: #ffd54f; background: rgba(255, 255, 255, 0.2);
color: #333; color: #FFFFFF;
border-bottom-left-radius: 0; border-bottom-left-radius: 4rpx;
min-width: 80rpx;
}
min-width: 80px; .from-ai .bubble::after {
content: '';
position: absolute;
left: -12rpx;
bottom: 0;
width: 0;
height: 0;
border-right: 16rpx solid rgba(255, 255, 255, 0.2);
border-top: 16rpx solid transparent;
transition: all 0.3s ease; /* 添加过渡效果 */
} }
/* 输入区域 */ /* 加载动画 */
.chat-input { .loading-animation {
display: flex; display: flex;
padding: 20rpx; align-items: center;
background-color: rgba(255, 255, 255, 0.05); justify-content: center;
border-top: 1rpx solid #ccc; gap: 8rpx;
align-items: flex-end; height: 30rpx;
} }
.input-group { .loading-animation .dot {
flex: 1; width: 12rpx;
display: flex; height: 12rpx;
flex-direction: column; background-color: #FFFFFF;
gap: 10rpx; border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out both;
}
.loading-animation .dot:nth-child(1) {
animation-delay: -0.32s;
} }
.input-box { .loading-animation .dot:nth-child(2) {
background-color: #fff; animation-delay: -0.16s;
border-radius: 10rpx; }
padding: 10rpx 20rpx;
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
}
}
/* 输入区域 */
.chat-input {
display: flex;
padding: 16rpx;
background: rgba(255, 255, 255, 0.15);
border-radius: 28rpx;
align-items: flex-end;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
margin-bottom: 20rpx; margin-bottom: 20rpx;
font-size: 28rpx;
border: none;
} }
.textarea-box { .textarea-box {
background-color: #fff; background: rgba(255, 255, 255, 0.2);
border-radius: 10rpx; border-radius: 20rpx;
padding: 10rpx 20rpx; padding: 16rpx 20rpx 16rpx 90rpx; /* 增加左侧内边距为发送按钮留出空间 */
font-size: 28rpx; font-size: 28rpx;
min-height: 80rpx; color: #FFFFFF;
border: none; border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s;
min-height: 70rpx;
max-height: 180rpx; /* 限制最大高度 */
width: 100%;
box-sizing: border-box;
} }
.send-button { .textarea-box::placeholder {
margin-left: 20rpx; color: hsla(0, 6%, 15%, 0.877);
background-color: #00bcd4;
color: #fff;
border-radius: 10rpx;
padding: 20rpx;
font-size: 28rpx;
white-space: nowrap;
} }
/* AI loading 动画 */ .textarea-box:focus {
.dot-flashing { border-color: #F59E0B;
width: 20rpx; outline: none;
height: 20rpx; background: rgba(255, 255, 255, 0.25);
}
.send-button.left-send {
margin-right: 12rpx;
margin-left: 0;
background: #F59E0B;
width: 70rpx;
height: 70rpx;
border-radius: 50%; border-radius: 50%;
background-color: #333; display: flex;
animation: dotFlashing 1s infinite linear alternate; align-items: center;
position: relative; justify-content: center;
box-shadow: 0 4rpx 15rpx rgba(245, 158, 11, 0.4);
transition: all 0.3s;
padding: 0;
}
margin-left: auto; .send-button.left-send:active {
margin-right: auto; transform: scale(0.95) rotate(-15deg);
box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
} }
.dot-flashing::before,
.dot-flashing::after { .input-group {
content: ""; flex: 1;
display: inline-block; display: flex;
flex-direction: column;
gap: 16rpx;
}
.textarea-container {
position: relative;
width: 100%;
}
.send-button-embedded {
position: absolute; position: absolute;
top: 0; bottom: 16rpx;
width: 20rpx; left: 16rpx;
height: 20rpx; background: transparent;
width: 60rpx;
height: 60rpx;
border-radius: 50%; border-radius: 50%;
background-color: #333; display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
padding: 0;
z-index: 2;
} }
.dot-flashing::before {
left: -30rpx; .send-button-embedded:active {
animation: dotFlashing 1s infinite linear alternate; transform: scale(1.2) rotate(-15deg);
animation-delay: 0.2s;
} }
.dot-flashing::after {
left: 30rpx; .send-button-embedded image {
animation: dotFlashing 1s infinite linear alternate; width: 40rpx;
animation-delay: 0.4s; height: 40rpx;
filter: invert(72%) sepia(87%) saturate(1242%) hue-rotate(325deg) brightness(101%) contrast(96%);
} }
@keyframes dotFlashing { /* 底部安全区域 */
0% { .safe-area-bottom {
background-color: #333; height: 20rpx;
} height: calc(20rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
50%, height: calc(20rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
100% {
background-color: rgba(51, 51, 51, 0.3);
}
} }
</style> </style>

856
Debate_front/src/components/HomeCom.vue
Unescape View File

@ -1,387 +1,471 @@
<template> <template>
<view class="home-component"> <view class="home-component">
<!-- 添加云的背景图像 --> <!-- 动态背景元素 -->
<image class="cloud-image" src="/static/cloud.png" mode="aspectFit"></image> <view class="animated-bg">
<view v-for="i in 6" :key="i" class="bg-circle" :style="getRandomCircleStyle()"></view>
<!-- 欢迎标题保留 --> </view>
<view class="welcome-section">
<view class="welcome-title">欢迎使用智辩云枢</view> <!-- 顶部欢迎卡片 -->
<view class="welcome-subtitle">AI驱动的辩论助手平台</view> <view class="welcome-card">
</view> <view class="welcome-content">
<view class="welcome-title">智辩云枢</view>
<!-- 三个功能卡片 - 错落布局 --> <view class="welcome-subtitle">AI驱动的辩论训练与分析平台</view>
<view class="feature-cards"> </view>
<!-- 第一张卡片 (奇数 - 靠左) --> </view>
<view class="feature-card card-odd" @click="navigateToFeature(0)">
<view class="card-left"> <!-- 功能卡片区域 -->
<view class="card-icon">🧠</view> <view class="feature-grid">
</view> <view class="feature-card" @click="switchTab(1)">
<view class="card-right"> <view class="feature-icon">
<view class="card-title">立论助手</view> <image src="/static/icons/chat-1-line.png" mode="aspectFit"></image>
<view class="card-description">AI辅助构建辩论框架，智能生成论点与论据</view> </view>
</view> <view class="feature-text">
</view> <view class="feature-title">模拟辩论</view>
<view class="feature-desc">与AI进行实时辩论对练，提升应变能力</view>
<!-- 第二张卡片 (偶数 - 靠右) --> </view>
<view class="feature-card card-even" @click="navigateToFeature(1)"> <view class="feature-arrow">
<view class="card-left"> <image src="/static/icons/arrow-right-s-line.png" mode="aspectFit"></image>
<view class="card-title">复盘分析</view> </view>
<view class="card-description">智能分析辩论过程，提供专业化改进建议</view> </view>
</view>
<view class="card-right"> <view class="feature-card" @click="switchTab(2)">
<view class="card-icon">📊</view> <view class="feature-icon">
</view> <image src="/static/icons/lightbulb-line.png" mode="aspectFit"></image>
</view> </view>
<view class="feature-text">
<!-- 第三张卡片 (奇数 - 靠左) --> <view class="feature-title">立论助手</view>
<view class="feature-card card-odd" @click="navigateToFeature(2)"> <view class="feature-desc">AI辅助构建辩论框架，智能生成论点与论据</view>
<view class="card-left"> </view>
<view class="card-icon">🤖</view> <view class="feature-arrow">
</view> <image src="/static/icons/arrow-right-s-line.png" mode="aspectFit"></image>
<view class="card-right"> </view>
<view class="card-title">模拟辩论</view> </view>
<view class="card-description">与AI进行实时辩论对练，提升应变能力</view>
</view> <view class="feature-card" @click="switchTab(3)">
</view> <view class="feature-icon">
</view> <image src="/static/icons/file-chart-line.png" mode="aspectFit"></image>
</view>
<!-- 底部名句展示 --> <view class="feature-text">
<view class="quote-container"> <view class="feature-title">复盘分析</view>
<view class="quote-icon">❝</view> <view class="feature-desc">分析辩论过程，提供改进建议与优化方向</view>
<view class="quote-content"> </view>
<text class="quote-text">{{ currentQuote.text }}</text> <view class="feature-arrow">
<text class="quote-author">—— {{ currentQuote.author }}</text> <image src="/static/icons/arrow-right-s-line.png" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
</template>
<!-- 最近活动区域 -->
<script setup> <view class="recent-section">
import { ref, onMounted, onUnmounted } from 'vue'; <view class="section-header">
<view class="section-title">最近活动</view>
const emit = defineEmits(['change-tab', 'change-index']); <view class="section-more" @click="showMoreActivities">
<text>查看更多</text>
const tabList = [ <image src="/static/icons/arrow-right-s-line.png" mode="aspectFit"></image>
{ </view>
pageName:'立论', </view>
component:'PageOfArgument'
}, <view class="activity-list">
{ <view class="activity-item" v-for="(activity, index) in recentActivities" :key="index">
pageName:'复盘', <view class="activity-icon" :class="activity.type">
component:'PageOfReview' <image :src="getActivityIcon(activity.type)" mode="aspectFit"></image>
}, </view>
{ <view class="activity-content">
pageName:'辩论', <view class="activity-title">{{ activity.title }}</view>
component:'PageOfDebate' <view class="activity-time">{{ activity.time }}</view>
} </view>
]; <view class="activity-arrow">
<image src="/static/icons/arrow-right-s-line.png" mode="aspectFit"></image>
const changeTab = (index) => { </view>
emit('change-tab', tabList[index].component); </view>
} </view>
</view>
const changeIndex = (index) => {
emit('change-index', index); <!-- 底部安全区域 -->
} <view class="safe-area-bottom"></view>
// 导航到对应功能 </view>
const navigateToFeature = (index) => { </template>
changeTab(index);
changeIndex(index + 1); <script>
}; export default {
data() {
// 经典辩论名句集合 return {
const debateQuotes = [ recentActivities: [
{ {
text: "辩论的艺术不在于赢得争论，而在于不失去朋友", type: 'debate',
author: "爱因斯坦" title: '关于"教育改革"的辩论',
}, time: '今天 14:30'
{ },
text: "真理越辩越明，正义自在人心", {
author: "中国古语" type: 'argument',
}, title: '关于"环境保护"的立论',
{ time: '昨天 09:15'
text: "不要用事实来干扰我的论点", },
author: "辩论格言" {
}, type: 'review',
{ title: '关于"人工智能"的辩论复盘',
text: "辩论是发现真理的艺术，而不是为了胜利", time: '3天前'
author: "苏格拉底" }
}, ]
{ };
text: "思辨是灵魂的对话", },
author: "柏拉图" methods: {
}, // 生成随机背景圆圈样式
{ getRandomCircleStyle() {
text: "辩论不是为了证明谁对谁错，而是为了共同接近真理", const size = Math.random() * 300 + 100;
author: "亚里士多德" const x = Math.random() * 100;
}, const y = Math.random() * 100;
{ const delay = Math.random() * 5;
text: "最好的论点不是说服对手，而是让对手思考", const duration = Math.random() * 10 + 15;
author: "辩论艺术"
}, return {
{ width: `${size}rpx`,
text: "辩论的目的不是为了赢，而是为了真理", height: `${size}rpx`,
author: "苏格拉底" left: `${x}%`,
} top: `${y}%`,
]; animationDelay: `${delay}s`,
animationDuration: `${duration}s`
// 当前显示的名句 };
const currentQuote = ref(debateQuotes[0]); },
let quoteInterval = null;
// 根据活动类型获取对应图标
// 随机切换名句 getActivityIcon(type) {
const changeQuote = () => { const icons = {
const randomIndex = Math.floor(Math.random() * debateQuotes.length); 'debate': '/static/icons/chat-1-line.png',
currentQuote.value = debateQuotes[randomIndex]; 'argument': '/static/icons/lightbulb-line.png',
}; 'review': '/static/icons/file-chart-line.png'
};
onMounted(() => { return icons[type] || icons.debate;
// 初始随机选择一条名句 },
changeQuote();
// 导航到指定页面
// 设置定时器，每15秒切换一次名句 switchTab(index) {
quoteInterval = setInterval(changeQuote, 15000); this.$emit('tab-change', index);
}); },
onUnmounted(() => { // 显示更多活动
// 组件卸载时清除定时器 showMoreActivities() {
if (quoteInterval) { uni.showToast({
clearInterval(quoteInterval); title: '功能开发中',
} icon: 'none'
}); });
</script> }
}
<style scoped> };
.home-component { </script>
width: 100%;
padding: 20rpx; <style scoped>
display: flex; .home-component {
flex-direction: column; width: 100%;
align-items: center; min-height: 100vh;
position: relative; padding: 30rpx;
z-index: 5; display: flex;
border-radius: 20rpx; flex-direction: column;
box-sizing: border-box; background: linear-gradient(135deg, #4338CA 0%, #7C3AED 100%);
max-width: 100vw; overflow-x: hidden;
overflow-x: hidden; box-sizing: border-box;
} padding-bottom: 180rpx; /* 为底部TabBar留出空间 */
position: relative;
/* 云图像样式 */ }
.cloud-image {
position: absolute; /* 动态背景 */
top: 20rpx; .animated-bg {
right: 40rpx; position: absolute;
width: 180rpx; top: 0;
height: 120rpx; left: 0;
opacity: 0.6; width: 100%;
z-index: 1; height: 100%;
animation: float 6s ease-in-out infinite; overflow: hidden;
} z-index: 0;
}
@keyframes float {
0% { .bg-circle {
transform: translateY(0px) translateX(0px); position: absolute;
} border-radius: 50%;
50% { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
transform: translateY(-15px) translateX(10px); animation: float 20s infinite ease-in-out;
} opacity: 0.4;
100% { transition: all 1.5s ease-in-out;
transform: translateY(0px) translateX(0px); }
}
} @keyframes float {
0%, 100% {
.welcome-section { transform: translate(0, 0) scale(1);
width: 90%; }
padding: 40rpx 0; 25% {
text-align: center; transform: translate(5%, 10%) scale(1.05);
margin-bottom: 40rpx; }
position: relative; 50% {
z-index: 2; transform: translate(10%, 5%) scale(0.95);
} }
75% {
.welcome-title { transform: translate(5%, 15%) scale(1.1);
font-size: 42rpx; }
color: #ffffff; }
font-weight: bold;
margin-bottom: 10rpx; /* 欢迎卡片 */
text-shadow: 0 0 10rpx rgba(0, 214, 185, 0.3); .welcome-card {
} background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
.welcome-subtitle { border-radius: 28rpx;
font-size: 28rpx; padding: 30rpx;
color: rgba(255, 255, 255, 0.7); width: 100%;
} margin-bottom: 30rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
.feature-cards { border: 1px solid rgba(255, 255, 255, 0.2);
width: 100%; position: relative;
display: flex; z-index: 1;
flex-direction: column; display: flex;
gap: 40rpx; justify-content: space-between;
margin-bottom: 50rpx; align-items: center;
padding: 0 20rpx; animation: slideDown 0.6s ease-out;
box-sizing: border-box; }
position: relative;
z-index: 3; @keyframes slideDown {
} from {
opacity: 0;
.feature-card { transform: translateY(-30rpx);
width: 90%; }
display: flex; to {
background-color: rgba(255, 255, 255, 0.08); opacity: 1;
border-radius: 20rpx; transform: translateY(0);
padding: 30rpx 20rpx; }
transition: all 0.3s ease; }
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 214, 185, 0.2); .welcome-content {
min-height: 160rpx; flex: 1;
box-sizing: border-box; }
}
.welcome-title {
/* 悬停/触摸效果 */ font-size: 48rpx;
.card-hover { color: #FFFFFF;
transform: translateY(-5rpx) scale(1.02); font-weight: 700;
background-color: rgba(0, 214, 185, 0.15); margin-bottom: 16rpx;
box-shadow: 0 12rpx 25rpx rgba(0, 0, 0, 0.2), 0 0 20rpx rgba(0, 214, 185, 0.3); text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
border-color: rgba(0, 214, 185, 0.5); }
}
.welcome-subtitle {
/* 奇数卡片靠左 */ font-size: 28rpx;
.card-odd { color: rgba(255, 255, 255, 0.8);
align-self: flex-start; line-height: 1.5;
margin-left: 0; }
border-top-left-radius: 0;
border-left: 3px solid #00D6B9;
} /* 功能卡片区域 */
.feature-grid {
/* 偶数卡片靠右 */ display: flex;
.card-even { flex-direction: column;
align-self: flex-end; gap: 20rpx;
margin-right: 0; margin-bottom: 40rpx;
border-top-right-radius: 0; position: relative;
border-right: 3px solid #00D6B9; z-index: 1;
} }
.feature-card:active { .feature-card {
transform: scale(0.98); background: rgba(255, 255, 255, 0.1);
background-color: rgba(0, 214, 185, 0.2); border-radius: 24rpx;
} padding: 24rpx;
display: flex;
.card-left, .card-right { align-items: center;
display: flex; border: 1px solid rgba(255, 255, 255, 0.15);
flex-direction: column; transition: all 0.3s;
justify-content: center; animation: fadeIn 0.5s ease-out;
} animation-fill-mode: both;
}
.card-left {
width: 30%; .feature-card:nth-child(1) {
align-items: center; animation-delay: 0.1s;
} }
.card-right { .feature-card:nth-child(2) {
width: 70%; animation-delay: 0.2s;
padding-left: 20rpx; }
}
.feature-card:nth-child(3) {
/* 在偶数卡片中，反转左右区域的宽度 */ animation-delay: 0.3s;
.card-even .card-left { }
width: 70%;
align-items: flex-start; .feature-card:active {
padding-right: 20rpx; transform: scale(0.98);
} background: rgba(255, 255, 255, 0.15);
}
.card-even .card-right {
width: 30%; @keyframes fadeIn {
align-items: center; from {
padding-left: 0; opacity: 0;
} transform: translateY(20rpx);
}
.card-icon { to {
font-size: 70rpx; opacity: 1;
background: rgba(0, 214, 185, 0.1); transform: translateY(0);
width: 100rpx; }
height: 100rpx; }
border-radius: 50%;
display: flex; .feature-icon {
justify-content: center; width: 80rpx;
align-items: center; height: 80rpx;
margin-bottom: 10rpx; background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15rpx rgba(0, 214, 185, 0.3); border-radius: 20rpx;
transition: all 0.3s ease; display: flex;
} align-items: center;
justify-content: center;
.card-hover .card-icon { margin-right: 20rpx;
background: rgba(0, 214, 185, 0.25); }
box-shadow: 0 0 20rpx rgba(0, 214, 185, 0.5);
transform: scale(1.1); .feature-icon image {
} width: 44rpx;
height: 44rpx;
.card-title { filter: brightness(0) invert(1);
font-size: 32rpx; }
color: #ffffff;
font-weight: bold; .feature-text {
margin-bottom: 15rpx; flex: 1;
} }
.card-description { .feature-title {
font-size: 26rpx; font-size: 32rpx;
color: rgba(255, 255, 255, 0.7); color: #FFFFFF;
line-height: 1.5; font-weight: 600;
} margin-bottom: 8rpx;
}
/* 名句容器样式 */
.quote-container { .feature-desc {
width: 90%; font-size: 24rpx;
display: flex; color: rgba(255, 255, 255, 0.7);
padding: 30rpx; line-height: 1.4;
background-color: rgba(0, 214, 185, 0.1); }
border-radius: 20rpx;
margin-top: 20rpx; .feature-arrow {
position: relative; width: 40rpx;
z-index: 2; height: 40rpx;
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1); display: flex;
border: 1px solid rgba(0, 214, 185, 0.2); align-items: center;
transition: all 0.5s ease; justify-content: center;
overflow: hidden; }
}
.feature-arrow image {
.quote-icon { width: 30rpx;
font-size: 60rpx; height: 30rpx;
color: rgba(0, 214, 185, 0.5); filter: brightness(0) invert(1);
margin-right: 15rpx; opacity: 0.7;
align-self: flex-start; }
line-height: 1;
} /* 最近活动区域 */
.recent-section {
.quote-content { position: relative;
display: flex; z-index: 1;
flex-direction: column; }
flex: 1;
} .section-header {
display: flex;
.quote-text { justify-content: space-between;
font-size: 28rpx; align-items: center;
color: #ffffff; margin-bottom: 20rpx;
line-height: 1.5; }
font-style: italic;
margin-bottom: 10rpx; .section-title {
animation: fadeIn 0.5s ease; font-size: 36rpx;
} color: #FFFFFF;
font-weight: 600;
.quote-author { }
font-size: 24rpx;
color: rgba(255, 255, 255, 0.6); .section-more {
text-align: right; display: flex;
animation: fadeIn 0.5s ease; align-items: center;
} color: rgba(255, 255, 255, 0.7);
font-size: 26rpx;
@keyframes fadeIn { }
from {
opacity: 0; .section-more image {
transform: translateY(10rpx); width: 24rpx;
} height: 24rpx;
to { margin-left: 6rpx;
opacity: 1; filter: brightness(0) invert(1);
transform: translateY(0); opacity: 0.7;
} }
}
.activity-list {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.activity-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 20rpx;
padding: 20rpx;
display: flex;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s;
}
.activity-item:active {
background: rgba(255, 255, 255, 0.15);
}
.activity-icon {
width: 60rpx;
height: 60rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
}
.activity-icon.debate {
background: rgba(245, 158, 11, 0.3);
}
.activity-icon.argument {
background: rgba(16, 185, 129, 0.3);
}
.activity-icon.review {
background: rgba(79, 70, 229, 0.3);
}
.activity-icon image {
width: 36rpx;
height: 36rpx;
filter: brightness(0) invert(1);
}
.activity-content {
flex: 1;
}
.activity-title {
font-size: 28rpx;
color: #FFFFFF;
margin-bottom: 6rpx;
}
.activity-time {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.6);
}
.activity-arrow {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.activity-arrow image {
width: 24rpx;
height: 24rpx;
filter: brightness(0) invert(1);
opacity: 0.7;
}
/* 底部安全区域 */
.safe-area-bottom {
height: 20rpx;
height: calc(20rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
height: calc(20rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
}
</style> </style>

537
Debate_front/src/components/ReviewCom.vue
Unescape View File

@ -1,8 +1,29 @@
<template> <template>
<view class="argument-component"> <view class="review-component">
<view class="content-card"> <!-- 动态背景元素 -->
<view class="card-title">复盘功能</view> <view class="animated-bg">
<view class="card-content">在这里可以进行辩论过程的复盘</view> <view v-for="i in 6" :key="i" class="bg-circle" :style="getRandomCircleStyle()"></view>
</view>
<!-- 顶部卡片 - 可收缩 -->
<view class="content-card" :class="{ 'collapsed': isCardCollapsed }">
<view class="card-header" @click="toggleCard">
<view class="card-icon-wrapper">
<view class="card-icon">
<image src="/static/icons/file-chart-line.png" mode="aspectFit"></image>
</view>
</view>
<view class="card-text">
<view class="card-title">复盘分析</view>
<view class="card-content" v-if="!isCardCollapsed">分析辩论过程，提供改进建议与优化方向</view>
</view>
<view class="collapse-icon">
<image
:src="isCardCollapsed ? '/static/icons/arrow-down-s-line.png' : '/static/icons/arrow-up-s-line.png'"
mode="aspectFit"
></image>
</view>
</view>
</view> </view>
<!-- 聊天展示区 --> <!-- 聊天展示区 -->
@ -19,30 +40,43 @@
class="chat-message" class="chat-message"
:class="msg.role === 'user' ? 'from-user' : 'from-ai'" :class="msg.role === 'user' ? 'from-user' : 'from-ai'"
> >
<view class="avatar" v-if="msg.role === 'ai'">AI</view>
<view class="bubble"> <view class="bubble">
<block v-if="msg.loading"> <block v-if="msg.loading">
<view class="dot-flashing"></view> <view class="loading-animation">
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
</view>
</block> </block>
<block v-else> <block v-else>
{{ msg.content }} {{ msg.content }}
</block> </block>
</view> </view>
<view class="avatar user-avatar" v-if="msg.role === 'user'">我</view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 输入框与发送按钮 --> <!-- 输入框与发送按钮 -->
<view class="chat-input"> <view class="chat-input">
<view class="input-group"> <view class="input-group">
<textarea <view class="textarea-container">
class="textarea-box" <textarea
v-model="content" class="textarea-box"
placeholder="请输入辩论的过程" v-model="content"
auto-height placeholder="粘贴你的辩论记录，AI将为你分析优缺点并提供改进建议"
maxlength="20000" auto-height
/> maxlength="5000"
/>
<button class="send-button-embedded" @click="sendMessage()">
<image src="/static/icons/send-plane-fill.png" mode="aspectFit"></image>
</button>
</view>
</view> </view>
<button class="send-button" @click="sendMessage()">发送</button>
</view> </view>
<!-- 底部安全区域 -->
<view class="safe-area-bottom"></view>
</view> </view>
</template> </template>
@ -54,16 +88,41 @@ export default {
messages: [ messages: [
{ {
role: "ai", role: "ai",
content: content: "欢迎使用辩论复盘分析！请粘贴你的辩论记录，我将为你分析优缺点并提供改进建议。"
"辩论过程复盘功能，可以帮你回顾和总结辩论过程中的关键点、亮点以及可能的改进之处。", }
},
], ],
scrollToView: "", scrollToView: "",
content: "", content: "",
isCardCollapsed: false, // 控制卡片是否收缩
}; };
}, },
methods: { methods: {
// 切换卡片展开/收缩状态
toggleCard() {
this.isCardCollapsed = !this.isCardCollapsed;
},
// 生成随机背景圆圈样式
getRandomCircleStyle() {
const size = Math.random() * 300 + 100;
const x = Math.random() * 100;
const y = Math.random() * 100;
const delay = Math.random() * 5;
const duration = Math.random() * 10 + 15;
return {
width: `${size}rpx`,
height: `${size}rpx`,
left: `${x}%`,
top: `${y}%`,
animationDelay: `${delay}s`,
animationDuration: `${duration}s`
};
},
async sendMessage() { async sendMessage() {
if (!this.content.trim()) return;
// 添加用户消息 // 添加用户消息
this.messages.push({ this.messages.push({
role: "user", role: "user",
@ -77,13 +136,14 @@ export default {
this.messages.push({ role: "ai", content: "", loading: true }); this.messages.push({ role: "ai", content: "", loading: true });
this.scrollToBottom(); this.scrollToBottom();
// 模拟 AI 请求（你可替换为实际接口） // 调用 AI 接口
const reply = await this.callAI(this.content); const reply = await this.callAI(this.content);
// 替换 loading 消息为真实 AI 回答 // 替换 loading 消息为真实 AI 回答
this.messages.splice(aiIndex, 1, { role: "ai", content: reply }); this.messages.splice(aiIndex, 1, { role: "ai", content: reply });
this.scrollToBottom(); this.scrollToBottom();
}, },
async callAI(content) { async callAI(content) {
this.content = ""; this.content = "";
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -127,177 +187,424 @@ export default {
</script> </script>
<style scoped> <style scoped>
.argument-component { .review-component {
width: 100%; width: 100%;
padding: 20rpx; height: 100vh;
padding: 30rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 78vh; background: linear-gradient(135deg, #4338CA 0%, #7C3AED 100%);
background: linear-gradient(135deg, #2c3e50, #337fc6); overflow-x: hidden;
box-sizing: border-box;
padding-bottom: 180rpx; /* 为底部TabBar留出空间 */
position: relative;
}
overflow-x: hidden; /* 禁止横向滚动 */ /* 动态背景 */
box-sizing: border-box; /* 避免 padding 导致溢出 */ .animated-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
} }
.bg-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
animation: float 20s infinite ease-in-out;
opacity: 0.4;
/* 添加过渡效果 */
transition: all 1.5s ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(5%, 10%) scale(1.05);
}
50% {
transform: translate(10%, 5%) scale(0.95);
}
75% {
transform: translate(5%, 15%) scale(1.1);
}
}
/* 顶部卡片 */
.content-card { .content-card {
background-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.15);
border-radius: 20rpx;
padding: 30rpx;
width: 90%;
margin: 0 auto 30rpx;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 28rpx;
padding: 20rpx;
width: 100%;
margin-bottom: 30rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
animation: slideDown 0.6s ease-out;
transition: all 0.3s ease;
}
.content-card.collapsed {
padding: 16rpx 20rpx;
margin-bottom: 20rpx;
}
.card-header {
display: flex;
align-items: center;
cursor: pointer;
}
.collapse-icon {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.collapse-icon image {
width: 30rpx;
height: 30rpx;
filter: brightness(0) invert(1);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-30rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-icon-wrapper {
position: relative;
margin-right: 24rpx;
}
.card-icon {
width: 80rpx;
height: 80rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.collapsed .card-icon {
width: 70rpx;
height: 70rpx;
}
.card-icon::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(45deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(45deg);
}
20%, 100% {
transform: translateX(100%) rotate(45deg);
}
}
.card-icon image {
width: 45rpx;
height: 45rpx;
filter: brightness(0) invert(1);
z-index: 1;
transition: all 0.3s ease;
}
.collapsed .card-icon image {
width: 40rpx;
height: 40rpx;
}
.card-text {
flex: 1;
transition: all 0.3s ease;
} }
.card-title { .card-title {
font-size: 36rpx; font-size: 36rpx;
color: #ffffff; color: #FFFFFF;
font-weight: bold; font-weight: 700;
margin-bottom: 20rpx; margin-bottom: 10rpx;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.collapsed .card-title {
font-size: 32rpx;
margin-bottom: 0;
} }
.card-content { .card-content {
font-size: 28rpx; font-size: 26rpx;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
transition: all 0.3s ease;
} }
/* 聊天区域 */ /* 聊天区域 */
.chat-area { .chat-area {
flex: 1; flex: 1;
width: 90%; width: 100%;
margin: 0 auto; background: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.05); border-radius: 28rpx;
border-radius: 20rpx; padding: 30rpx;
padding: 20rpx; margin-bottom: 30rpx;
overflow-y: auto; overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
z-index: 1;
transition: all 0.3s ease;
} }
/* 消息通用样式 */ /* 消息通用样式 */
.chat-message { .chat-message {
display: flex; display: flex;
margin-bottom: 20rpx; margin-bottom: 30rpx;
align-items: flex-start;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
/* 用户消息靠右 */
.from-user { .from-user {
justify-content: flex-end; justify-content: flex-end;
} }
/* AI消息靠左 */
.from-ai { .from-ai {
justify-content: flex-start; justify-content: flex-start;
} }
/* 头像样式 */
.avatar {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24rpx;
font-weight: bold;
margin-right: 16rpx;
flex-shrink: 0;
}
.user-avatar {
background: #F59E0B;
margin-left: 16rpx;
margin-right: 0;
}
/* 气泡样式 */ /* 气泡样式 */
.bubble { .bubble {
max-width: 70%; max-width: 70%;
padding: 20rpx; padding: 20rpx 24rpx;
border-radius: 20rpx; border-radius: 24rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 1.6; line-height: 1.6;
word-break: break-word; word-break: break-word;
box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
position: relative;
transition: all 0.3s ease; /* 添加过渡效果 */
} }
/* 用户气泡颜色 */
.from-user .bubble { .from-user .bubble {
background-color: #00c4ff; background: #F59E0B;
color: white; color: #FFFFFF;
border-bottom-right-radius: 0; border-bottom-right-radius: 4rpx;
font-weight: 500;
}
.from-user .bubble::after {
content: '';
position: absolute;
right: -12rpx;
bottom: 0;
width: 0;
height: 0;
border-left: 16rpx solid #F59E0B;
border-top: 16rpx solid transparent;
transition: all 0.3s ease; /* 添加过渡效果 */
} }
/* AI气泡颜色 */
.from-ai .bubble { .from-ai .bubble {
background-color: #ffd54f; background: rgba(255, 255, 255, 0.2);
color: #333; color: #FFFFFF;
border-bottom-left-radius: 0; border-bottom-left-radius: 4rpx;
min-width: 80rpx;
}
.from-ai .bubble::after {
content: '';
position: absolute;
left: -12rpx;
bottom: 0;
width: 0;
height: 0;
border-right: 16rpx solid rgba(255, 255, 255, 0.2);
border-top: 16rpx solid transparent;
transition: all 0.3s ease; /* 添加过渡效果 */
}
/* 加载动画 */
.loading-animation {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 30rpx;
}
.loading-animation .dot {
width: 12rpx;
height: 12rpx;
background-color: #FFFFFF;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out both;
}
.loading-animation .dot:nth-child(1) {
animation-delay: -0.32s;
}
min-width: 80px; .loading-animation .dot:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
}
} }
/* 输入区域 */ /* 输入区域 */
.chat-input { .chat-input {
display: flex; display: flex;
padding: 20rpx; padding: 16rpx;
background-color: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.15);
border-top: 1rpx solid #ccc; border-radius: 28rpx;
align-items: flex-end; align-items: flex-end;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
margin-bottom: 20rpx;
} }
.input-group { .input-group {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10rpx; gap: 16rpx;
} }
.input-box { .textarea-container {
background-color: #fff; position: relative;
border-radius: 10rpx; width: 100%;
padding: 10rpx 20rpx;
margin-bottom: 20rpx;
font-size: 28rpx;
border: none;
} }
.textarea-box { .send-button-embedded {
background-color: #fff; position: absolute;
border-radius: 10rpx; bottom: 16rpx;
padding: 10rpx 20rpx; left: 16rpx;
font-size: 28rpx; background: transparent;
min-height: 80rpx; width: 60rpx;
border: none; height: 60rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
padding: 0;
z-index: 2;
} }
.send-button { .send-button-embedded:active {
margin-left: 20rpx; transform: scale(1.2) rotate(-15deg);
background-color: #00bcd4;
color: #fff;
border-radius: 10rpx;
padding: 20rpx;
font-size: 28rpx;
white-space: nowrap;
} }
/* AI loading 动画 */ .send-button-embedded image {
.dot-flashing { width: 40rpx;
width: 20rpx; height: 40rpx;
height: 20rpx; filter: invert(72%) sepia(87%) saturate(1242%) hue-rotate(325deg) brightness(101%) contrast(96%);
border-radius: 50%;
background-color: #333;
animation: dotFlashing 1s infinite linear alternate;
position: relative;
margin-left: auto;
margin-right: auto;
} }
.dot-flashing::before,
.dot-flashing::after { .textarea-box {
content: ""; background: rgba(255, 255, 255, 0.2);
display: inline-block; border-radius: 20rpx;
position: absolute; padding: 16rpx 20rpx 16rpx 90rpx; /* 增加左侧内边距为发送按钮留出空间 */
top: 0; font-size: 28rpx;
width: 20rpx; color: #FFFFFF;
height: 20rpx; border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%; transition: all 0.3s;
background-color: #333; min-height: 120rpx;
max-height: 300rpx; /* 增加最大高度，适合复盘分析的长文本 */
width: 100%;
box-sizing: border-box;
} }
.dot-flashing::before {
left: -30rpx; .textarea-box::placeholder {
animation: dotFlashing 1s infinite linear alternate; color: #362d2de1;
animation-delay: 0.2s;
} }
.dot-flashing::after {
left: 30rpx; .textarea-box:focus {
animation: dotFlashing 1s infinite linear alternate; border-color: #F59E0B;
animation-delay: 0.4s; outline: none;
background: rgba(255, 255, 255, 0.25);
} }
@keyframes dotFlashing { /* 底部安全区域 */
0% { .safe-area-bottom {
background-color: #333; height: 20rpx;
} height: calc(20rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
50%, height: calc(20rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
100% {
background-color: rgba(51, 51, 51, 0.3);
}
} }
</style> </style>

298
Debate_front/src/components/TabBar.vue
Unescape View File

@ -1,136 +1,164 @@
<template> <template>
<view class="tab-bar"> <view class="tab-bar">
<!-- 添加移动的背景块 --> <view
<view class="active-bg" :style="{ transform: `translateX(${100 * props.currentComponentIndex}%)` }"></view> v-for="(tab, index) in tabs"
:key="index"
<view class="tab-item"
class="tab-item" :class="{ active: activeTab === index }"
:class="{ @click="switchTab(index)"
'active': props.currentComponentIndex === index, >
'is-first-tab': index === 0 <view class="tab-icon-container" :class="{ active: activeTab === index }">
}" <view class="tab-icon">
v-for="(item, index) in tabList" <image :src="activeTab === index ? tab.activeIcon : tab.icon" mode="aspectFit"></image>
:key="index" </view>
@click="changeTab(index)"> </view>
<text :class="{'active': props.currentComponentIndex === index}">{{ item.pageName }}</text> <view class="tab-label" :class="{ active: activeTab === index }">{{ tab.label }}</view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script>
export default {
// 定义emit事件 props: {
const emit = defineEmits(['change-tab', 'change-index']); activeTab: {
const props = defineProps(['currentComponentIndex']); type: Number,
default: 0
const tabList = [ }
{ },
pageName:'首页', data() {
component:'PageOfHome' return {
}, tabs: [
{ {
pageName:'立论', label: '首页',
component:'PageOfArgument' icon: '/static/icons/home.png',
}, activeIcon: '/static/icons/home-fill.png'
{ },
pageName:'复盘', {
component:'PageOfReview' label: '辩论',
}, icon: '/static/icons/chat-1-line.png',
{ activeIcon: '/static/icons/chat-1-fill.png'
pageName:'辩论', },
component:'PageOfDebate' {
} label: '立论',
]; icon: '/static/icons/lightbulb-line.png',
activeIcon: '/static/icons/lightbulb-fill.png'
const changeTab = (index) => { },
if(props.currentComponentIndex === index) return; {
// 触发事件并传递当前组件名称和索引 label: '复盘',
emit('change-tab', tabList[index].component); icon: '/static/icons/file-chart-line.png',
emit('change-index', index); activeIcon: '/static/icons/file-chart-fill.png'
}; }
]
</script> };
},
<style scoped> methods: {
.tab-bar { switchTab(index) {
display: flex; if (this.activeTab === index) return;
width: 70%; this.$emit('tab-change', index);
margin: 0 auto; }
height: 70%; }
background-color: #1A2C42; };
border: none; </script>
position: relative;
border-radius: 25rpx; <style scoped>
overflow: hidden; .tab-bar {
box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2); position: fixed;
transform: translateZ(0); bottom: 0;
-webkit-transform: translateZ(0); left: 0;
backface-visibility: hidden; right: 0;
-webkit-backface-visibility: hidden; height: 120rpx;
} background: rgba(255, 255, 255, 0.5);
display: flex;
/* 移动的背景块 */ justify-content: space-around;
.active-bg { align-items: center;
position: absolute; border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 25%; padding-bottom: constant(safe-area-inset-bottom);
height: 100%; padding-bottom: env(safe-area-inset-bottom);
background-color: #00D6B9; z-index: 100;
border-radius: 25rpx; }
transition: transform 0.3s ease;
z-index: 1; .tab-item {
box-shadow: 0 0 20rpx rgba(0, 214, 185, 0.5); display: flex;
/* 添加硬件加速 */ flex-direction: column;
will-change: transform; align-items: center;
} justify-content: center;
position: relative;
.tab-item { flex: 1;
flex: 1; height: 100%;
display: flex; transition: all 0.3s;
justify-content: center; }
align-items: center;
height: 100%; .tab-icon-container {
position: relative; width: 100rpx;
z-index: 2; height: 100rpx;
} display: flex;
align-items: center;
.tab-item::before { justify-content: center;
content: ''; position: relative;
position: absolute; transition: all 0.3s ease;
left: 0; z-index: 2;
top: 50%; border-radius: 50%;
transform: translateY(-50%); min-width: 80rpx; /* 防止 flex 压缩 */
width: 1px; min-height: 80rpx;
height: 60%; flex-shrink: 0; /* 禁止压缩 */
z-index: 2; }
background: linear-gradient(
to bottom, .tab-icon-container.active {
transparent, width: 120rpx;
rgba(0, 214, 185, 0.1) 15%, height: 120rpx;
rgba(0, 214, 185, 0.5) 50%, border-radius: 50%;
rgba(0, 214, 185, 0.1) 85%, background-color: #B59DF1;
transparent transform: translateY(-45rpx);
); border: 14rpx solid #6839E0;
} position: relative;
box-sizing: border-box;
.tab-item.is-first-tab::before { box-shadow: 0 4rpx 20rpx rgba(104, 57, 224, 0.4);
display: none; }
}
.tab-icon {
.tab-item.active { width: 60rpx;
background-color: transparent; height: 60rpx;
} display: flex;
align-items: center;
.tab-item text { justify-content: center;
font-size: 24rpx; transition: all 0.3s;
color: rgba(0, 214, 185, 0.7); }
transition: all 0.3s ease;
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); .tab-icon image {
} width: 50rpx;
height: 50rpx;
.tab-item text.active { filter: brightness(0) invert(0.8);
color: #ffffff; opacity: 0.7;
font-weight: bold; transition: all 0.3s;
text-shadow: 0 1rpx 8rpx rgba(255, 255, 255, 0.4); }
transform: scale(1.05);
} .tab-label {
font-size: 24rpx;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s;
margin-top: 6rpx;
opacity: 0.7;
font-family: 'Poppins' , 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
letter-spacing: 1rpx;
}
.tab-label.active {
color: #FFFFFF;
font-weight: 600;
opacity: 1;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
transform: translateY(-15rpx) scale(1.1);
}
.tab-icon-container.active .tab-icon image {
opacity: 1;
filter: brightness(0) invert(1);
transform: scale(1.1);
}
.tab-item:active {
opacity: 0.7;
}
</style> </style>

47
Debate_front/src/pages.json
Unescape View File

@ -1,22 +1,25 @@
{ {
"pages": [ "pages": [
{ {
"path": "pages/login/index", "path": "pages/login/index",
"style": { "style": {
"navigationBarTitleText": "登录" "navigationBarTitleText": "登录"
} }
}, },
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "首页" "navigationBarTitleText": "首页"
} }
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",
"navigationBarTitleText": "智辩云枢", "navigationBarTitleText": "智辩云枢",
"navigationBarBackgroundColor": "#1a2a6c", "navigationBarBackgroundColor": "#1a2a6c",
"backgroundColor": "#000000" "backgroundColor": "#000000"
} },
} "style": {
"scoped": false
}
}

190
Debate_front/src/pages/index/index.vue
Unescape View File

@ -1,154 +1,52 @@
<template> <template>
<view class="home-page"> <view class="container">
<view class="home-header"> <HomeCom v-if="activeTab === 0" @tab-change="handleTabChange"/>
<text class="home-header-title">智</text> <DebateCom v-if="activeTab === 1" />
<text class="home-header-title">辩</text> <ArgumentCom v-if="activeTab === 2" />
<text class="home-header-title">云</text> <ReviewCom v-if="activeTab === 3" />
<text class="home-header-title">枢</text>
</view>
<view class="home-content"> <TabBar :activeTab="activeTab" @tab-change="handleTabChange" />
<!-- 使用条件渲染替代动态组件 -->
<PageOfHome v-if="currentComponent === 'PageOfHome'" @change-tab="handleTabChange" @change-index="handleIndexChange" />
<PageOfArgument v-else-if="currentComponent === 'PageOfArgument'" />
<PageOfReview v-else-if="currentComponent === 'PageOfReview'" />
<PageOfDebate v-else-if="currentComponent === 'PageOfDebate'" />
</view>
<view class="home-footer">
<TabBar @change-tab="handleTabChange" @change-index="handleIndexChange" :currentComponentIndex="currentComponentIndex"/>
</view>
</view> </view>
</template> </template>
<script setup> <script>
import TabBar from '../../components/TabBar.vue'; import HomeCom from '@/components/HomeCom.vue';
import { ref } from 'vue'; import DebateCom from '@/components/DebateCom.vue';
import ArgumentCom from '@/components/ArgumentCom.vue';
// 导入所有可能的页面组件 import ReviewCom from '@/components/ReviewCom.vue';
import PageOfHome from '../../components/HomeCom.vue'; import TabBar from '@/components/TabBar.vue';
import PageOfArgument from '../../components/ArgumentCom.vue';
import PageOfReview from '../../components/ReviewCom.vue'; export default {
import PageOfDebate from '../../components/DebateCom.vue' components: {
HomeCom,
// 当前组件名称（字符串） DebateCom,
const currentComponent = ref('PageOfHome'); ArgumentCom,
// 当前组件index ReviewCom,
const currentComponentIndex = ref(0); TabBar
},
// 处理标签切换 data() {
const handleTabChange = (componentName) => { return {
currentComponent.value = componentName; activeTab: 0
}; };
const handleIndexChange = (index) => { },
currentComponentIndex.value = index; methods: {
} handleTabChange(index) {
</script> this.activeTab = index;
<style scoped> // 可以更新页面标题
.home-page { const titles = ['首页', '辩论', '立论', '复盘'];
position: relative; uni.setNavigationBarTitle({
width: 100vw; title: titles[index]
height: 100vh; });
background: linear-gradient(135deg, #1a2a6c, #000000);
display: flex;
flex-direction: column;
align-items: center;
}
.home-header {
width: 100%;
height: min(100rpx, fit-content);
/* background-color: #000000; */
margin-top: 20rpx;
margin-left: 25rpx;
margin-bottom: 20rpx;
display: flex;
}
.home-header::after{
content: '';
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(0, 214, 185, 0.1) 15%, rgba(0, 214, 185, 0.5) 50%, rgba(0, 214, 185, 0.1) 85%, transparent);
position: absolute;
top: 100rpx; /* 将分割线定位在header的底部 */
left: 0;
z-index: 1;
transform: translateY(20rpx);
}
.home-header-title {
font-size: 40rpx;
color: #ffffff;
text-align: left;
margin-left: 20rpx;
font-weight: bold;
margin-top: 20rpx;
}
.home-header-title:nth-child(odd) {
animation: float-up-to-down 3s infinite;
}
.home-header-title:nth-child(even) {
animation: float-down-to-up 3s infinite;
}
@keyframes float-up-to-down {
0%{
transform: translateY(-10rpx);
}
20%{
transform: translateY(-7rpx);
}
50%{
transform: translateY(0rpx);
}
70%{
transform: translateY(7rpx);
}
100%{
transform: translateY(-10rpx);
}
}
@keyframes float-down-to-up {
0%{
transform: translateY(10rpx);
}
20%{
transform: translateY(7rpx);
}
50%{
transform: translateY(0rpx);
}
70%{
transform: translateY(-7rpx);
}
100%{
transform: translateY(10rpx);
} }
} }
};
</script>
.home-content { <style>
flex: 1; .container {
width: 100%; width: 100%;
padding: 30rpx 0; min-height: 100vh;
box-sizing: border-box; position: relative;
overflow-y: auto; }
min-height: 400rpx; </style>
position: relative;
z-index: 2;
margin-bottom: 140rpx;
}
.home-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120rpx;
z-index: 100;
}
</style>

BIN
Debate_front/src/static/icons/arrow-down-s-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
Debate_front/src/static/icons/arrow-right-s-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
Debate_front/src/static/icons/arrow-up-s-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
Debate_front/src/static/icons/brain-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
Debate_front/src/static/icons/chat-1-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
Debate_front/src/static/icons/chat-1-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
Debate_front/src/static/icons/comment-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
Debate_front/src/static/icons/comment.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
Debate_front/src/static/icons/edit-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
Debate_front/src/static/icons/edit.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
Debate_front/src/static/icons/emotion-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
Debate_front/src/static/icons/file-chart-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
Debate_front/src/static/icons/file-chart-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
Debate_front/src/static/icons/home-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
Debate_front/src/static/icons/home.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
Debate_front/src/static/icons/lightbulb-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Debate_front/src/static/icons/lightbulb-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
Debate_front/src/static/icons/quote_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
Debate_front/src/static/icons/robot-2-line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
Debate_front/src/static/icons/search-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
Debate_front/src/static/icons/search.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
Debate_front/src/static/icons/send-plane-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
Debate_front/src/static/icons/user-fill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
Debate_front/src/static/icons/user.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

Write Preview
Loading…
Cancel
Save