廖力工作日志 2025-12-22 07:57:26 星期一
上周主线:完成所有workbanchv2静态页的重构，完成80%从静态页到组件化的工作。
本周主线：给组件化收尾，并搭建ai会话（workbanchv2）的单例模式。并开始绑定数据.
##今天的任务:
1.组件化任务列表:第三期
1.完成一个创作记录列表卡片 使其可以在鼠标放上去时播放视频内容 -- 完成
2.完成一个创作记录列表卡片组件 -- 完成
3.完成创作记录的组件化 -- 完成
4.完成一个radiobutton组件 -- 完成
5.完成一个radiobutton列表组件 -- 完成
6.完成一个时间选择器组件 -- 完成
7.完成一个普通的文本框组件 -- 完成
8.完成一个普通的textarea组件 -- 完成
9.完成一个文件上传组件 -- 完成
10.完成一个form组件提供器，方便快速编写和维护组件 -- 完成
需要一个单选下拉框
聊天流鼠标hover视频需要可以预览播放片段 --完成
脚本创作和短视频创作的表单一致 --- 完成2.完成ai会话单例模式的搭建
已经初步完成会话单例模式的搭建
会话单例模式使用的是zustand（vanilla）的方式来做的
做法就是使用create一个store并使用context挂载到特定树的节点上去
使用时就使用context提供器里写的context并useContext --> useStore 来获取数据
后续问题:
1.是否涉及到树的合并
2.action中是否可以做ajax操作
3.这个store中的action除了用来更新状态还能不能用来做一些业务操作
4.这个action里是否可以使用reactquery3.大概梳理一下现有接口和新需求接口的对齐度
1.自然聊天接口
参数： 聊天内容
2.短视频创作接口
参数：
车系
产品曝光
亮点
平台
话题
画面比例
3.脚本创作任务接口
参数：聊天内容
车系接口有
产品曝光是现有写死的
平台写死的
亮点需要找现有接口来做
促销话题也是
屏幕尺寸写死的
对话接口和现有的对话接口一致
有音色接口
看目前智能混剪的界面
混剪这块
聊天接口是一个，但是按照不同的标志来发送请求
不同的类型对应不同的提示词模版4.优化selectionList.tsx的布局和分页的短发使其可以通过动态获取屏幕大小来计算当前一行可以显示几列元素
##明天的任务:
1.做对话列表的数据绑定
2.做对话框的数据绑定
3.拉取话题列表数据
4.给正在加载数据的下拉框一个加载中状态
长期任务:
1.大概梳理一下现有接口和新需求接口的对齐度 – 把界面重构完就做这个
2.把现有的工作台的功能和业务理通 – 把界面重构完就做这个3.修复主界面的边栏收起 ~– 已经确认不需要修改
4.适配一个移动端版本
5.selectionList组件的分页换行的感觉不太对，可能需要优化
设计稿规格为:1440*900
需要重构的页面数量：
1.工作台初始界面 – 已经完成
1.1.工作台初始界面聊天对话框 – 聊天对话框中多个样式看起来有冲突，需要找产品经理询问 – 已经完成
1.2.重新整理一个多选下拉框组件 – 已经完成
2.工作台主界面
2.1 工作台主界面左边聊天序列 – 已经完成
2.2 工作台主界面中间文件选择 – 已经完成
2.3 工作台主界面右边脚本编辑界面
2.3.1 镜头列表编辑组件
2.3.2 画面描述ai对话框
2.4 工作台主界面右边视频编辑界面
2.4.1 单选框列表组件
2.4.2 点状分页
2.4.3 支持宽/窄 两种视图模式
2.5 工作台主界面右边影片编辑界面
--明天让产品讲一下这个界面的设计和想法当前计划是先快速重构静态页面，不要关心组件化的问题，
把业务模块用静态也重构的方式先快速过一遍，之后又结构
上的问题还能留下考虑时间及时更改
—————————————————————-其它内容———————————————————————–
<Icon
name=”fileIcon”
width={21.6}
height={24}
style={{
color: “var(–color-brand-accent)”,
}}
/>
className={styles.videoItemUnselected}
style={{
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
backgroundSize: "contain",
backgroundImage: `url(${
require("@/app/(workBanchV2)/asset/images/vFile.jpg").default
.src
})`,
}}
<div
className={styles.videoPlayButton}
style={{
backgroundSize: "0.3125rem 0.365rem",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
backgroundImage: `url(${
require("@/app/(workBanchV2)/asset/images/playIcon_2.svg")
.default.src
})`,
}}
></div>
<Icon
name="imageIcon"
width={24}
height={24}
style={{
color: "var(--color-icon-secondary)",
}}
/>@index.tsx (153-181) 请为此结构编写tw样式代码到@styles.ts
这是一个buttonList 用于对素材列表进行分类
整体高度为:29px
flex 横向排列 纵向子元素居中
tab宽度自适应
buttonListItem(默认)：
整体高度为:29px
行高为29px
font-size: 12px
字体颜色:var(–color-text-buttonList)
没有背景颜色
padding:0 8px;
tab项目（items）(选中)：
字体颜色 ：var（–color-brand-accent）
背景颜色:var(–color-button-ghost-hover-bg)
searchBtn :
整体往右靠
flex布局
间距27.42px
子项目垂直居中
@index.tsx (153-181) 请为此结构编写tw样式代码到@styles.ts
这是一个tab栏
tab赠题高度为:40px
tab宽度自适应
tab项目（items）(默认)：
高度为40px
行高为40px
font-size: 16px;
font-weight: 500;
字体颜色:var(–color-text-strong)
没有背景颜色
padding:0 16px;
tab项目（items）(选中)：
背景颜色:var(–color-bg-surface)
tabContros :
整体往右靠
flex布局
间距27.42px
子项目垂直居中
我现在需要一个树形多选下下拉框列表（仅列表）
它支持将以下数据类型:
[
{
label:”11111”
id:”1”
children:[
{
label:”1_11111”
id:”1_1”
children:[
{
label:”1_1_11111”
id:”1_1_1”
}
]
},
{
label:”1_22222”
id:”1_2”
},
{
label:”1_333333”
id:”1_3”
},
]
},
{
label:”22222”
id:”2”
},
{
label:”333333”
id:”3”
children:[
{
label:”3_111111”
id:”3_1”
},
{
label:”3_222222”
id:”3_2”
},
]
},
]
显示成这样
11111
1_11111
1_1_11111
1_22222
1_333333
22222
333333
3_111111
3_222222
使用起来像这样 ：
//用“treeDropdownList”包围目标触发组件
<treeDropdownList
value={“2”} //当前id
treeItems={…}
onChange={function(value){
//更改值处理
}}
>
//目标触发组件
<div>点击选择</div>
</treeDropdownList>我希望这个里面大概是这样
return (
//这是背景层 zindex = 1
//这是弹出层 zindex=2
//下面渲染TreeCheckItem组件
{treeItems.map(function(index,item){
return <TreeCheckItem key={index} {…item} checkedIdArr={checkedIdArr} />
})}
)
每次完成一个check就返回：
{
allCheckedIdArr:[“1”,”2”,”3”]
allCheckedItem:[
{
label:”11111”
id:”1”
},
{
label:”11111”
id:”2”
}
,
{
label:”11111”
id:”3”
}
],
//这一组只输出没有子节点的项目
bottomCheckedIdArr:[“1”,”2”,”3”]
bottomcheckedItem:[
{
label:”11111”
id:”1”
},
{
label:”11111”
id:”2”
}
,
{
label:”11111”
id:”3”
}
],
//这一组只输出有子节点的项目
parentCheckedIdArr:[“1”,”2”,”3”]
parentcheckedItem:[
{
label:”11111”
id:”1”
},
{
label:”11111”
id:”2”
}
,
{
label:”11111”
id:”3”
}
]
}
范式要求
依照chadcn/ui的范式编写
不要编写类似 isEnabled && (<div>...</div>) 这种代码
应该写成 (function(){ if(isEnabled === true){ return (<div>...</div>)}return null; })()
不要写三元表达式
判断空必须这样写 if(typeof value !== 'undefined' && value !== null){}
不能写作 if(!value){} 这种判断非常模糊
编写匿名函数时尽量不要使用肩头函数，应该使用(function(){ })()
请在编写参数的interface中写好注释，调用时可以看到
请在每个函数上方写好注释
样式要求(所有像素高度转换成 rem 以16px字体为基础进行转换)(所有下面说明的样式尽量使用tw格式编写)
选中的节点前方打勾
本节点下子节点选中部分:本节点打横杠. 子选中全部:本直接打勾
选中文字和 横杠/勾 的 颜色为 var(--color-brand-accent)
未选中文字颜色为 var(--color-pagination-dot-active) 横杠/勾 的 颜色为 var(--color-button-disabled-bg)
容器整体背景色为 var(--color-bg-surface)
容器边框颜色为 var(--color-border-subtle)
容器padding为8px
行为
点击锚定元素时显示
显示在锚定元素的下方
如果下拉框显示在锚定元素下方时超过当前显示范围就显示在锚定元素的上方
点击某个CheckItem后 使用onChange函数告诉父级当前选中的id是哪个
参数:
checkedIdArr(values) :string[]
treeItems
onChange
distance (距离锚定元素多远 默认10px)
文件要求：
这个组件需要创建两个文件:
index.tsx -- treeDropdown组件主文件
treeCheckItem.tsx -- 项目/列表组件
如果有的话就不用创建了，没有的话再创建@textArea.tsx 帮忙在这里实现一个textArea文本框
范式要求
依照chadcn/ui的范式编写
不要编写类似 isEnabled && (<div>...</div>) 这种代码
应该写成 (function(){ if(isEnabled === true){ return (<div>...</div>)}return null; })()
不要写三元表达式
判断空必须这样写 if(typeof value !== 'undefined' && value !== null){}
不能写作 if(!value){} 这种判断非常模糊
样式要求(所有像素高度转换成 rem 以16px字体为基础进行转换)
初始高度为20px
默认就是一行字所以默认行高为20px
输入框背景色为var(--color-bg-surface)
placeholder颜色为var(--color-text-muted)
正文颜色为var(--color-text-ai)
placeholder默认为"请输入内容"
行为
当用户输入的文字大于一行时，行高设为自动适应高度
当用户输入的文字大于一行时，文本框高度随文字内容自适应高度
当用户输入的文字小于一行时，行高设为20px
当用户输入的文字为空时，行高设为20px
当用户输入的文字为空时，placeholder显示"请输入内容"
输入参数:
value:
onChange:
onKeyDown:
onFocus:
onBlur:
我看到了你给出的组件的使用方式
看起来非常复杂且充满了冗余代码
我希望实现一个tooltip组件，这样的组件使用时类似于mui提供的tioolTip组件:
import Tooltip from "../../tooltip"
使用就这么使用就行:
<Tooltip title="点击查看详情" >
<span>查看详情</span>
</Tooltip>
你可以帮忙在这里实现一个tooltip吗
范式要求
依照chadcn/ui的范式编写
不要编写类似 isEnabled && (<div>...</div>) 这种代码
应该写成 (function(){ if(isEnabled === true){ return (<div>...</div>)}return null; })()
不要写三元表达式
判断空必须这样写 if(typeof value !== 'undefined' && value !== null){}
不能写作 if(!value){} 这种判断非常模糊
编写匿名函数时尽量不要使用肩头函数，应该使用(function(){ })()
样式要求(所有像素高度转换成 rem 以16px字体为基础进行转换)
高度 22px
行高 22px
字体大小 16px
默认文字颜色 var(--color-button-primary-fg)
默认背景颜色 var(--color-brand-accent)
默认和children元素的距离 10px
默认的border-radius 为 8px
行为
鼠标放到children中时显示tooltip 离开时tooltip消失
显示和消失时淡入淡出
输入参数:
children
//tooltip这一边应该出现在children上的左边还是右边
position-x: left | right
//tooltip这一边应该出现在children上的上面还是下面
position-y: top | bottom
//tooltip这一边应该挂在children上的左边缘还是右边缘
attch-x: left | right
//tooltip这一边应该挂在children上的上边缘还是下边缘
attch-y: top | bottom
className我需要实现一个下拉框组件
这个组件可以套在任意组件上
点击后打开
使用起来像这样 ：
//用“dropdownList”包围目标触发组件
<dropdownList
title=”选择”
value={“2”}
items={
[
{
value:”1”
name:”功能1”
iconName:”xxxx”
},
{
value:”2”
name:”功能1”
iconName:”xxxx”
}
]
}
onChange={function(value){
//更改值处理
}}
>
//目标触发组件
<div>点击选择</div>
</dropDownList>我希望这个里面大概是这样
return (
//这是背景层 zindex = 1
//这是弹出层 zindex=2
//下面渲染checkItem组件
{items.map(function(index,item){
return <CheckItem key={index} {…item} isSelected={…} />
})}
)
这是checkItem组件的使用方式:
<CheckItem
value=”taskMode”
name=”任务模式”
iconName=”commandKeyIcon”
isChecked={false}
disabled={true}
onClick={function (
event: React.MouseEvent
value: string
) {
console.log(value);
}}
/>
范式要求
依照chadcn/ui的范式编写
不要编写类似 isEnabled && (<div>...</div>) 这种代码
应该写成 (function(){ if(isEnabled === true){ return (<div>...</div>)}return null; })()
不要写三元表达式
判断空必须这样写 if(typeof value !== 'undefined' && value !== null){}
不能写作 if(!value){} 这种判断非常模糊
编写匿名函数时尽量不要使用肩头函数，应该使用(function(){ })()
请在编写参数的interface中写好注释，调用时可以看到
样式要求(所有像素高度转换成 rem 以16px字体为基础进行转换)(所有下面说明的样式尽量使用tw格式编写)
高度为 自动
宽度为 自动
默认背景颜色为 var(--color-bg-dropDown)
padding:4
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
border-radius: 8px;
组件内容分为三个部分
1.标题
padding-left:4px
height:20px
line-height:20px
font-size:10px;
color:--color-text-muted
2.CheckItem列表
间隔 4px
行为
点击锚定元素时显示
显示在锚定元素的下方
如果下拉框显示在锚定元素下方时超过当前显示范围就显示在锚定元素的上方
点击某个CheckItem后 使用onChange函数告诉父级当前选中的id是哪个
参数:
title
value
items
onChange
distance (距离锚定元素多远 默认10px)
我需要一个CheckItem组件:
范式要求
依照chadcn/ui的范式编写
不要编写类似 isEnabled && (<div>...</div>) 这种代码
应该写成 (function(){ if(isEnabled === true){ return (<div>...</div>)}return null; })()
不要写三元表达式
判断空必须这样写 if(typeof value !== 'undefined' && value !== null){}
不能写作 if(!value){} 这种判断非常模糊
编写匿名函数时尽量不要使用肩头函数，应该使用(function(){ })()
请在编写参数的interface中写好注释，调用时可以看到
样式要求(所有像素高度转换成 rem 以16px字体为基础进行转换)(所有下面说明的样式尽量使用tw格式编写)
高度为 24px
行高为 24px
默认背景颜色为 透明
选中时背景为 var(--color-brand-accent)
容器的padding为 上下2px 左边6px 右边10px
border-radius: 4px;
组件内容分为三个部分
1.图标(Icon组件)
10px * 10px
2.文字
字体颜色为 var(--color-text-inverse)
字体大小 14px
3.是否选中的那个勾勾
图片为:../../../startPage/images/checkIcon.svg 图片大小为 9.9px * 7.01px
请使用div + 背景的方式设置图片，不要用image
未选中时不显示它（opacity:0）但要占位
行为
可点击
参数
value:string
name:string
iconName:string
isChecked:boolean需要在这里写一个taglist textArea
总的来说就是一个正常textarea的样子
刚开始里面没内容
输入某些内容后，比如”123123”
然后按下回车，123123就会成为一个标签 并带个x号，可以用TagDeleteableBtn来做
当用户使用退格键的时候，不仅可以像普通的textarea那样删除未变成标签的文字，也可以将TagDeleteableBtn 标签删掉
范式要求
依照chadcn/ui的范式编写
不要编写类似 isEnabled && (
应该写成 (function(){ if(isEnabled === true){ return (
不要写三元表达式
判断空必须这样写 if(typeof value !== ‘undefined’ && value !== null){}
不能写作 if(!value){} 这种判断非常模糊
编写匿名函数时尽量不要使用肩头函数，应该使用(function(){ })()
请在编写参数的interface中写好注释，调用时可以看到
样式要求(所有像素高度转换成 rem 以16px字体为基础进行转换)(所有下面说明的样式尽量使用tw格式编写)
textarea的部分：
w-full
h-[1.375rem]
leading-[1.375rem]
text-indent-[.5rem]
border-[.0625rem]
border-[var(–color-border-subtle)]
rounded-[.25rem]
p-[.5rem]
min-h-[90px]
box-border
text-[.875rem]
text-[var(–color-text-strong)]
outline-none
行为
用户输入文字，点击Enter键在里面创建tag
tag可通过鼠标点击删除
也可以通过退格键删除
在显示tag的同时不影响文字编辑
输入参数
value=[
{tagName:”123123”}
{tagName:”123123”}
…
]
onchange //只在用户创建了tag的情况下响应这个回调函数
className
style
要求将组件本体的ref暴露出去