完全使用TRAE和AI 开发一款完整的应用----第一周

使用ai 分析 k线，并进行点评，让天底下的韭菜没有看不懂的k线，让ai进行cosplay 扮演各路专家进行点评，这不是一款应用这是一款ai驱动的综艺节目。虽然也在工作使用使用ai 补全代码或者完善代码，但还是没有完全使用ai 做一款应用，不依赖手工编程、不依赖人查找资料。考虑我国复杂的金融监管环境，对股票分析限制非常多，所以对美股和港股还有web3 领域的token 进行分析。所以决定自己写

dfxdtjytnghf

334人浏览 · 2025-09-22 17:10:15

dfxdtjytnghf · 2025-09-22 17:10:15 发布

虽然也在工作使用使用ai 补全代码或者完善代码，但还是没有完全使用ai 做一款应用，不依赖手工编程、不依赖人查找资料

所以决定自己写一个应用玩玩，感受一下全完使用ai开发一款应用的乐趣，跟上时代发展的步伐

不得不说以前写玩具项目挺枯燥，现在用ai写还是挺有意思的

应用的需求：

使用ai 分析 k线，并进行点评，让天底下的韭菜没有看不懂的k线，让ai进行cosplay 扮演各路专家进行点评，这不是一款应用这是一款ai驱动的综艺节目

考虑我国复杂的金融监管环境，对股票分析限制非常多，所以对美股和港股还有web3 领域的token 进行分析

下面是项目和代码文件

主要是一个图表组件TradingChart.tsx和首页 page.tsx

TradingChart.tsx

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

'use client'; // 确保只在客户端渲染

import { useEffect, useRef } from 'react';

import {

createChart,

CandlestickSeries,

HistogramSeries,

} from 'lightweight-charts';

export interface KLine {

time: string; // 'YYYY-MM-DD'

open: number;

high: number;

low: number;

close: number;

volume: number;

}

interface Props {

data: KLine[];

}

export default function TradingChart({ data }: Props) {

console.log(data);

const containerRef = useRef<HTMLDivElement>(null);

useEffect(() => {

if (!containerRef.current || !data.length) return;

const chart = createChart(containerRef.current, {

width: containerRef.current.clientWidth,

height: containerRef.current.clientHeight,

layout: { textColor: '#d1d4dc', background: { color: '#111' } },

grid: { vertLines: { color: '#2a2e39' }, horzLines: { color: '#2a2e39' } },

rightPriceScale: { visible: true },

leftPriceScale: { visible: true },

crosshair: { mode: 1 },

timeScale: {

fixLeftEdge: false,

fixRightEdge: false,

barSpacing: 10,

minBarSpacing: 5,

},

});

chart.applyOptions({

localization:{

dateFormat: 'yyyy-MM-dd',

}

})

/* ---- 蜡烛图 Pane（上方）---- */

const candlePane = chart.panes()[0];

const candleSeries = candlePane.addSeries(CandlestickSeries, {

upColor: '#26a69a',

downColor: '#ef5350',

borderVisible: false,

wickUpColor: '#26a69a',

wickDownColor: '#ef5350',

priceScaleId: 'right',

});

candleSeries.setData(

data.map(({ time, open, high, low, close }) => ({ time, open, high, low, close }))

);

/* ---- 成交量 Pane（下方 30%）---- */

const volumePane = chart.addPane();

volumePane.setHeight(80);

const volumeSeries = volumePane.addSeries(HistogramSeries, {

color: '#26a69a',

priceScaleId: 'right',

base: 0,

});

// 格式化成交量Y轴标签 - 调整为20%高度

volumePane.priceScale('right').applyOptions({

//设置高度

scaleMargins: {

top: 0.2,

bottom: 0,

},

borderVisible: false,

});

// 自定义成交量格式化

volumeSeries.priceScale().applyOptions({

invertScale: false,

borderColor: '#2a2e39',

});

// 使用priceFormatter来格式化成交量数值

volumeSeries.applyOptions({

priceFormat: {

type: 'custom',

minMove: 1,

formatter: (price: number) => {

if (price >= 1000000) {

return (price / 1000000).toFixed(1) + 'M';

} else if (price >= 1000) {

return (price / 1000).toFixed(0) + 'K';

} else {

return price.toFixed(0);

}

});

volumeSeries.setData(

data.map(d => ({

time: d.time,

value: d.volume,

color: d.close >= d.open ? '#26a69a' : '#ef5350',

}))

);

chart.timeScale().fitContent();

/* 自适应窗口大小 */

const ro = new ResizeObserver(() => chart.applyOptions({

width: containerRef.current!.clientWidth,

height: containerRef.current!.clientHeight,

}));

ro.observe(containerRef.current);

return () => {

ro.disconnect();

chart.remove();

};

}, [data]);

return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;

}

　　page.tsx

100

101

102

103

104

105

// app/page.tsx 或 pages/index.tsx

"use client"

import dynamic from 'next/dynamic';

import { KLine } from '@/components/TradingChart';

import TradingChart from '@/components/TradingChart';

import { useState, useEffect } from 'react';

interface Coin {

id: string;

symbol: string;

name: string;

}

export default function HomePage() {

const [kLineData, setKLineData] = useState<KLine[]>([]);

const [coins, setCoins] = useState<Coin[]>([]);

const [selectedCoin, setSelectedCoin] = useState<string>('bitcoin');

useEffect(() => {

const fetchCoins = async () => {

try {

const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false');

const data = await response.json();

setCoins(data);

} catch (error) {

console.error('获取币种列表失败:', error);

}

};

fetchCoins();

}, []);

useEffect(() => {

const fetchData = async () => {

if (!selectedCoin) return;

try {

// 180 天和30天数据

// 并行获取OHLC和成交量数据

const [ohlcRes, volumeRes] = await Promise.all([

fetch(`https://api.coingecko.com/api/v3/coins/${selectedCoin}/ohlc?vs_currency=usd&days=180`),

fetch(`https://api.coingecko.com/api/v3/coins/${selectedCoin}/market_chart?vs_currency=usd&days=180&interval=daily`,{cache:'force-cache'})

]);

const ohlcData = await ohlcRes.json();

const volumeData = await volumeRes.json();

// 合并数据并转换格式

const formattedData = ohlcData.map(([timestamp, open, high, low, close]: [number, number, number, number, number]) => {

// 匹配对应时间戳的成交量

const volumeEntry = volumeData.total_volumes?.find(([volTimestamp]: [number, number]) => volTimestamp === timestamp);

const volume = volumeEntry ? volumeEntry[1] : 0;

// 转换时间戳为YYYY-MM-DD格式

const date = new Date(timestamp);

// const time = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;

return { time:timestamp/1000, open, high, low, close, volume };

});

setKLineData(formattedData);

} catch (error) {

console.error('数据获取失败:', error);

}

};

fetchData();

}, [selectedCoin]);

return (

<div >

<div className='w-[70%]' style={{ height: '600px' }}>

<div className=' flex align-center'>

<select

value={selectedCoin}

onChange={(e) => setSelectedCoin(e.target.value)}

className="px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:border-gray-400 transition-colors duration-200"

>

{coins.map((coin) => (

<option key={coin.id} value={coin.id} className="py-1">

{coin.name} ({coin.symbol.toUpperCase()})

</option>

))}

</select>

{/* 显示下拉列表中选中的币种的current_price */}

<div className='flex items-center'>

{coins.find((coin) => coin.id === selectedCoin)?.current_price} usdt

</div>

<TradingChart data={kLineData} />

</div>

<div className='w-[30%]'>

对话框组件

</div>

);

}

下面是上周工作的成果绘制了k线和显示了下拉列表还有价格

下面说一下我开发的步骤

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

年薪百万的AI架构师都在用的数据安全智能体设计模式

当企业还在靠“防火墙+人工分析师”被动堵漏洞时，年薪百万的AI架构师已经在用数据安全智能体重构安全体系——它像“会思考的智能保安”：能主动感知异常、理解威胁意图、自动采取行动，甚至从经验中学习优化。本文将拆解这套“年薪百万级”设计模式：从核心组件的生活化比喻，到AI算法与安全规则的融合逻辑，再到电商/金融场景的实战落地，最后展望未来多智能体协作、大模型整合的趋势。无论你是AI工程师、安全架构师还是

2048 AI社区

基于C++的HTTP WebServer实现 -- Sourcetrail使用说明（CPP项目）

本文介绍了如何使用Sourcetrail工具分析C++项目代码结构。Sourcetrail是一款跨平台源代码可视化工具，通过解析编译数据库生成交互式关系图，帮助开发者理解大型项目结构。文章详细说明了安装过程、创建项目步骤（包括生成compile_commands.json文件）、以及如何使用搜索框、CustomTrail等功能来查看类图、函数调用关系等。特别针对C++项目可能遇到的编译问题提供了解

2048 AI社区

揭秘全解：提示工程架构师提示工程文档规范指南揭秘全解

提示工程文档是记录提示全生命周期（设计→测试→迭代→协作）的结构化文档沉淀知识：把“个人经验”变成“团队资产”；统一认知：让技术、业务、运营对“AI能力”达成共识；可追溯性：迭代时能快速定位“为什么变”“变了什么”；降低风险：避免因“口口相传”导致的错误。这是文档的“核心”，要写清楚“提示的目标、输入输出、规则、示例”，让所有人都能看懂“这个提示是做什么的”。输入：明确AI需要的“信息项”（必填/