5 Commits

Author SHA1 Message Date
IndieKKY
44895a98a6 chore: release 1.11.2 2024-10-07 18:59:16 +08:00
IndieKKY
53d3522fd6 完善 2024-10-07 18:56:39 +08:00
IndieKKY
56bb936aaa 哔哔君 2024-10-07 18:15:20 +08:00
IndieKKY
d52a4e8378 fix 2024-10-07 09:43:38 +08:00
IndieKKY
f69bc7f040 优化 2024-10-07 09:36:48 +08:00
25 changed files with 96 additions and 116 deletions

View File

@@ -65,7 +65,3 @@ node版本18.15.0
## 许可证
该项目采用 **MIT 许可证**,详情请参阅许可证文件。
## 截图
![完整截图](./screenshot/完整截图.png)

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="zh" data-theme="light">
<head>
<title>bilibili-subtitle - 哔哩哔哩字幕</title>
<title>哔哔君 - 哔哩哔哩字幕列表</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" href="/favicon-128x128.png" sizes="128x128">

View File

@@ -12,7 +12,7 @@ const [major, minor, patch, label = '0'] = version
.split(/[.-]/)
export default defineManifest(async (env) => ({
"name": "哔哩哔哩字幕列表",
"name": "哔哔君 - 哔哩哔哩字幕列表",
"description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
"version": `${major}.${minor}.${patch}`,
"manifest_version": 3,

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<title>哔哩哔哩字幕列表选项</title>
<title>哔君 - 哔哩哔哩字幕列表选项</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16">

View File

@@ -1,7 +1,7 @@
{
"private": true,
"name": "bilibili-subtitle",
"version": "1.11.1",
"version": "1.11.2",
"type": "module",
"description": "哔哩哔哩字幕列表",
"main": "index.js",

View File

@@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang="zh" style="width: 500px;">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<img src="shot.jpg" style="width: 100%; object-fit: contain;"/>
</body>
</html>

BIN
public/bibijun.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 278 B

After

Width:  |  Height:  |  Size: 651 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 363 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 400 B

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/favicon-64x64.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 447 B

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

View File

@@ -1,3 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1672795365953" class="icon" viewBox="0 0 1303 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2585"
width="254.4921875" height="200"><path d="M110.964364 1023.720727c-60.509091 0-109.847273-48.872727-109.847273-108.916363V109.009455C1.117091 48.965818 50.455273 0 110.964364 0h1081.902545c60.509091 0 109.847273 48.872727 109.847273 108.916364v805.794909c0 60.043636-49.338182 108.916364-109.847273 108.916363H110.964364z m0-927.650909c-6.609455 0-12.101818 5.771636-12.101819 12.939637v805.794909c0 7.168 5.492364 13.032727 12.101819 13.032727h1081.902545c6.609455 0 12.101818-5.864727 12.101818-13.032727V109.009455c0-7.168-5.492364-13.032727-12.101818-13.032728H110.964364z" fill="#00AEEC" p-id="2586"></path><path d="M1003.054545 520.098909a51.572364 51.572364 0 0 1-50.26909 52.689455h-80.058182a51.572364 51.572364 0 0 1-50.269091-52.689455c0-29.137455 22.434909-52.782545 50.269091-52.782545h80.058182c27.834182 0 50.269091 23.645091 50.26909 52.782545zM1096.610909 270.149818c0 28.858182-22.341818 52.410182-49.989818 52.410182H232.541091a51.293091 51.293091 0 0 1-50.082909-52.410182c0-29.044364 22.434909-52.503273 50.082909-52.503273h814.08c27.648 0 50.082909 23.458909 50.082909 52.503273zM768.744727 520.098909c0 28.858182-22.341818 52.410182-50.082909 52.410182H232.541091a51.293091 51.293091 0 0 1-50.082909-52.410182c0-29.044364 22.434909-52.503273 50.082909-52.503273H718.661818c27.648 0 50.082909 23.458909 50.082909 52.503273zM1096.610909 735.976727c0 29.044364-22.341818 52.503273-49.989818 52.503273H560.500364a51.293091 51.293091 0 0 1-50.082909-52.503273c0-28.951273 22.341818-52.410182 50.082909-52.410182h486.120727c27.648 0 50.082909 23.458909 50.082909 52.410182z" fill="#00AEEC" p-id="2587"></path></svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 867 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 333 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 413 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 KiB

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="zh" data-theme="light">
<head>
<title>哔哩哔哩字幕列表</title>
<title>哔君 - 哔哩哔哩字幕列表</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" href="/favicon-128x128.png" sizes="128x128">

View File

@@ -83,7 +83,8 @@ const Header = (props: {
}
}}>
<div className='shrink-0 flex items-center'>
<span className='shrink-0 text-[15px] font-medium pl-[16px] pr-[14px]'></span>
<img src="bibijun.png" alt="Logo" className="w-auto h-6 ml-2 mr-1" />
{/* <span className='shrink-0 text-[15px] font-medium pl-1 pr-[14px]'>字幕列表</span> */}
<MoreBtn placement={'right-start'}/>
</div>
<div className='flex gap-0.5 items-center mr-[16px]'>

View File

@@ -1,21 +1,19 @@
//extension
interface ExtensionCloseSidePanelMessage extends ExtensionMessage<{}> {
interface ExtensionCloseSidePanelMessage extends ExtensionMessage {
method: 'CLOSE_SIDE_PANEL';
}
interface ExtensionAddTaskMessage extends ExtensionMessage<{ taskDef: TaskDef }> {
interface ExtensionAddTaskMessage extends ExtensionMessage<{ taskDef: TaskDef }, Task> {
method: 'ADD_TASK';
return: Task
}
interface ExtensionGetTaskMessage extends ExtensionMessage<{ taskId: string }> {
interface ExtensionGetTaskMessage extends ExtensionMessage<{ taskId: string }, {
code: 'ok'
task: Task
} | {
code: 'not_found'
}> {
method: 'GET_TASK';
return: {
code: 'ok'
task: Task
} | {
code: 'not_found'
}
}
interface ExtensionShowFlagMessage extends ExtensionMessage<{ show: boolean }> {

View File

@@ -4,13 +4,13 @@ interface Message<T = any, R = any> {
return: R
}
interface ExtensionMessage<T = any> extends Message<T> {
interface ExtensionMessage<T = any, R = any> extends Message<T, R> {
}
interface InjectMessage<T = any> extends Message<T> {
interface InjectMessage<T = any, R = any> extends Message<T, R> {
}
interface AppMessage<T = any> extends Message<T> {
interface AppMessage<T = any, R = any> extends Message<T, R> {
}

View File

@@ -27,17 +27,23 @@ import toast from 'react-hot-toast'
import {useBoolean, useEventTarget} from 'ahooks'
import {useEventChecked} from '@kky002/kky-hooks'
import { useMessage } from '@/hooks/message'
import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
const Section = (props: {
title: ShowElement
htmlFor?: string
} & PropsWithChildren) => {
const {title, htmlFor, children} = props
return <div className='flex flex-col gap-1'>
<label className='font-medium desc-lighter text-sm' htmlFor={htmlFor}>{title}</label>
<div className='flex flex-col gap-1 rounded py-2 px-2 bg-base-200/75'>{children}</div>
</div>
}
const OptionCard = ({ title, children, defaultExpanded = true }: { title: React.ReactNode; children: React.ReactNode; defaultExpanded?: boolean }) => {
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
return (
<div className="card bg-base-200 shadow-xl mb-4">
<div className="card-body p-4">
<h2 className="card-title flex justify-between cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
{title}
{isExpanded ? <FaChevronUp /> : <FaChevronDown />}
</h2>
{isExpanded && <div className="mt-4">{children}</div>}
</div>
</div>
);
};
const FormItem = (props: {
title: ShowElement
@@ -45,14 +51,16 @@ const FormItem = (props: {
htmlFor?: string
} & PropsWithChildren) => {
const {title, tip, htmlFor, children} = props
return <div className='flex items-center gap-2'>
<div className={classNames('basis-3/12 justify-end flex-center', tip && 'tooltip tooltip-right z-[100] underline underline-offset-2 decoration-dashed')} data-tip={tip}>
<label className='font-medium desc' htmlFor={htmlFor}>{title}</label>
return (
<div className='flex items-center gap-4 mb-2'>
<div className={classNames('w-1/3 text-right', tip && 'tooltip tooltip-right z-50')} data-tip={tip}>
<label className={classNames('font-medium', tip && 'border-b border-dotted border-current pb-[2px]')} htmlFor={htmlFor}>{title}</label>
</div>
<div className='w-2/3'>
{children}
</div>
</div>
<div className='basis-9/12 flex items-center'>
{children}
</div>
</div>
)
}
const OptionsPage = () => {
@@ -199,9 +207,9 @@ const OptionsPage = () => {
setAiTypeValue('gemini')
}, [])
return <div className='flex justify-center'>
<div className="w-2/3 max-w-[600px] flex flex-col gap-3 p-2">
<Section title='通用配置'>
return (
<div className='container mx-auto max-w-3xl p-4'>
<OptionCard title="通用配置">
<FormItem title='侧边栏' htmlFor='sidePanel' tip='字幕列表是否显示在侧边栏'>
<input id='sidePanel' type='checkbox' className='toggle toggle-primary' checked={sidePanelValue}
onChange={setSidePanelValue}/>
@@ -216,37 +224,37 @@ const OptionsPage = () => {
</FormItem>}
<FormItem title='主题'>
<div className="btn-group">
<button onClick={onSelTheme1} className={classNames('btn btn-xs no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}></button>
<button onClick={onSelTheme2} className={classNames('btn btn-xs no-animation', themeValue === 'light'?'btn-active':'')}></button>
<button onClick={onSelTheme3} className={classNames('btn btn-xs no-animation', themeValue === 'dark'?'btn-active':'')}></button>
<button onClick={onSelTheme1} className={classNames('btn btn-sm no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}></button>
<button onClick={onSelTheme2} className={classNames('btn btn-sm no-animation', themeValue === 'light'?'btn-active':'')}></button>
<button onClick={onSelTheme3} className={classNames('btn btn-sm no-animation', themeValue === 'dark'?'btn-active':'')}></button>
</div>
</FormItem>
<FormItem title='字体大小'>
<div className="btn-group">
<button onClick={onSelFontSize1} className={classNames('btn btn-xs no-animation', (!fontSizeValue || fontSizeValue === 'normal')?'btn-active':'')}></button>
<button onClick={onSelFontSize2} className={classNames('btn btn-xs no-animation', fontSizeValue === 'large'?'btn-active':'')}></button>
<button onClick={onSelFontSize1} className={classNames('btn btn-sm no-animation', (!fontSizeValue || fontSizeValue === 'normal')?'btn-active':'')}></button>
<button onClick={onSelFontSize2} className={classNames('btn btn-sm no-animation', fontSizeValue === 'large'?'btn-active':'')}></button>
</div>
</FormItem>
<FormItem title='AI类型' tip='OPENAI质量更高'>
<div className="btn-group">
<button onClick={onSelOpenai} className={classNames('btn btn-xs no-animation', (!aiTypeValue || aiTypeValue === 'openai')?'btn-active':'')}>OpenAI</button>
<button onClick={onSelGemini} className={classNames('btn btn-xs no-animation', aiTypeValue === 'gemini'?'btn-active':'')}>Gemini</button>
<button onClick={onSelOpenai} className={classNames('btn btn-sm', (!aiTypeValue || aiTypeValue === 'openai')?'btn-active':'')}>OpenAI</button>
<button onClick={onSelGemini} className={classNames('btn btn-sm', aiTypeValue === 'gemini'?'btn-active':'')}>Gemini</button>
</div>
</FormItem>
</Section>
</OptionCard>
{(!aiTypeValue || aiTypeValue === 'openai') && <Section title='openai配置'>
<FormItem title='ApiKey' htmlFor='apiKey'>
<OptionCard title="AI 配置">
{(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='ApiKey' htmlFor='apiKey'>
<input id='apiKey' type='text' className='input input-sm input-bordered w-full' placeholder='sk-xxx'
value={apiKeyValue} onChange={onChangeApiKeyValue}/>
</FormItem>
<FormItem title='服务器' htmlFor='serverUrl'>
</FormItem>}
{(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='服务器' htmlFor='serverUrl'>
<input id='serverUrl' type='text' className='input input-sm input-bordered w-full'
placeholder={DEFAULT_SERVER_URL_OPENAI} value={serverUrlValue}
onChange={e => setServerUrlValue(e.target.value)}/>
</FormItem>
<div>
<div className='desc text-xs text-center'>
</FormItem>}
{(!aiTypeValue || aiTypeValue === 'openai') && <div>
<div className='desc text-sm text-center'>
<div className='flex justify-center font-semibold'></div>
<div><a className='link link-primary' href='https://platform.openai.com/' target='_blank'
rel="noreferrer">访</a></div>
@@ -262,16 +270,16 @@ const OptionsPage = () => {
{/* rel='noreferrer'>点击设置</a></div> */}
{/* <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前价格不到官方价格的6折<FaGripfire/></div> */}
</div>
</div>
<FormItem title='模型选择' htmlFor='modelSel' tip='注意不同模型有不同价格与token限制'>
</div>}
{(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='模型选择' htmlFor='modelSel' tip='注意不同模型有不同价格与token限制'>
<select id='modelSel' className="select select-sm select-bordered" value={modelValue}
onChange={onChangeModelValue}>
{MODELS.map(model => <option key={model.code} value={model.code}>{model.name}</option>)}
</select>
</FormItem>
<div className='desc text-xs'>
</FormItem>}
{(!aiTypeValue || aiTypeValue === 'openai') && <div className='desc text-sm'>
{MODEL_TIP}
</div>
</div>}
{modelValue === 'custom' && <FormItem title='模型名' htmlFor='customModel'>
<input id='customModel' type='text' className='input input-sm input-bordered w-full' placeholder='llama2'
value={customModelValue} onChange={onChangeCustomModelValue}/>
@@ -282,26 +290,23 @@ const OptionsPage = () => {
value={customModelTokensValue}
onChange={e => setCustomModelTokensValue(e.target.value ? parseInt(e.target.value) : undefined)}/>
</FormItem>}
</Section>}
{aiTypeValue === 'gemini' && <Section title='gemini配置'>
<FormItem title='ApiKey' htmlFor='geminiApiKey'>
{aiTypeValue === 'gemini' && <FormItem title='ApiKey' htmlFor='geminiApiKey'>
<input id='geminiApiKey' type='text' className='input input-sm input-bordered w-full' placeholder='xxx'
value={geminiApiKeyValue} onChange={onChangeGeminiApiKeyValue}/>
</FormItem>
<div>
<div className='desc text-xs'>
</FormItem>}
{aiTypeValue === 'gemini' && <div>
<div className='desc text-sm'>
<div><a className='link link-primary' href='https://makersuite.google.com/app/apikey'
target='_blank'
rel="noreferrer">Google AI Studio</a> ()
</div>
<div className='text-xs text-error flex items-center'><IoWarning className='text-sm text-warning'/>!
<div className='text-sm text-error flex items-center'><IoWarning className='text-sm text-warning'/>!
</div>
</div>
</div>
</Section>}
</div>}
</OptionCard>
<Section title={<div className='flex items-center'>
<OptionCard title={<div className='flex items-center'>
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
<IoWarning className='text-sm text-warning'/>
@@ -320,24 +325,24 @@ const OptionsPage = () => {
<FormItem title='翻译条数' tip='每次翻译条数'>
<div className='flex-1 flex flex-col'>
<input type="range" min={TRANSLATE_FETCH_MIN} max={TRANSLATE_FETCH_MAX} step={TRANSLATE_FETCH_STEP} value={fetchAmountValue} className="range range-primary" onChange={onFetchAmountChange} />
<div className="w-full flex justify-between text-xs px-2">
<div className="w-full flex justify-between text-sm px-2">
{transFetchAmountList.map(amount => <span key={amount}>{amount}</span>)}
</div>
</div>
</FormItem>
<FormItem title='翻译显示'>
<div className="btn-group">
<button onClick={onSel1} className={classNames('btn btn-xs no-animation', (!transDisplayValue || transDisplayValue === 'originPrimary')?'btn-active':'')}></button>
<button onClick={onSel2} className={classNames('btn btn-xs no-animation', transDisplayValue === 'targetPrimary'?'btn-active':'')}></button>
<button onClick={onSel3} className={classNames('btn btn-xs no-animation', transDisplayValue === 'target'?'btn-active':'')}></button>
<button onClick={onSel1} className={classNames('btn btn-sm no-animation', (!transDisplayValue || transDisplayValue === 'originPrimary')?'btn-active':'')}></button>
<button onClick={onSel2} className={classNames('btn btn-sm no-animation', transDisplayValue === 'targetPrimary'?'btn-active':'')}></button>
<button onClick={onSel3} className={classNames('btn btn-sm no-animation', transDisplayValue === 'target'?'btn-active':'')}></button>
</div>
</FormItem>
<FormItem title='隐藏翻译' tip='取消自动翻译时,隐藏已翻译内容' htmlFor='hideOnDisableAutoTranslate'>
<input id='hideOnDisableAutoTranslate' type='checkbox' className='toggle toggle-primary' checked={hideOnDisableAutoTranslateValue}
onChange={onChangeHideOnDisableAutoTranslate}/>
</FormItem>
</Section>
<Section title={<div className='flex items-center'>
</OptionCard>
<OptionCard title={<div className='flex items-center'>
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
<IoWarning className='text-sm text-warning'/>
@@ -360,17 +365,17 @@ const OptionsPage = () => {
<div className='flex-1 flex flex-col'>
<input id='words' type='number' className='input input-sm input-bordered w-full' placeholder={`默认为上限x${WORDS_RATE}`} value={wordsValue??''} onChange={e => setWordsValue(e.target.value?parseInt(e.target.value):undefined)}/>
{/* <input type="range" min={WORDS_MIN} max={WORDS_MAX} step={WORDS_STEP} value={wordsValue} className="range range-primary" onChange={onWordsChange} /> */}
{/* <div className="w-full flex justify-between text-xs px-2"> */}
{/* <div className="w-full flex justify-between text-sm px-2"> */}
{/* {wordsList.map(words => <span key={words}>{words}</span>)} */}
{/* </div> */}
</div>
</FormItem>
<div className='desc text-xs'>
<div className='desc text-sm'>
<span className='font-semibold font-mono'>{aiTypeValue === 'gemini'?GEMINI_TOKENS:(MODEL_MAP[modelValue??MODEL_DEFAULT]?.tokens??'未知')}</span>
</div>
</Section>
<Section title={<div className='flex items-center'>
</OptionCard>
<OptionCard title={<div className='flex items-center'>
</div>}>
<FormItem title='启用搜索' htmlFor='searchEnabled' tip='是否启用字幕搜索功能'>
@@ -381,23 +386,23 @@ const OptionsPage = () => {
<input id='cnSearchEnabled' type='checkbox' className='toggle toggle-primary' checked={cnSearchEnabledValue}
onChange={setCnSearchEnabledValue}/>
</FormItem>
</Section>
<Section title={<div className='flex items-center'>
</OptionCard>
<OptionCard title={<div className='flex items-center'>
</div>}>
<FormItem title='启用提问' htmlFor='askEnabled' tip='是否启用字幕提问功能'>
<input id='askEnabled' type='checkbox' className='toggle toggle-primary' checked={askEnabledValue}
onChange={setAskEnabledValue}/>
</FormItem>
</Section>
</OptionCard>
<Section title='提示词配置'>
<OptionCard title='提示词配置'>
<div className='flex justify-center'>
<a className='text-xs link link-primary' onClick={togglePromptsFold}>{promptsFold ? '展开' : '折叠'}</a>
<a className='text-sm link link-primary' onClick={togglePromptsFold}>{promptsFold ? '展开' : '折叠'}</a>
</div>
{!promptsFold && PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
<div>{item.name}</div>
<div className='link text-xs' onClick={() => {
<div className='link text-sm' onClick={() => {
setPromptsValue({
...promptsValue,
// @ts-expect-error
@@ -414,20 +419,14 @@ const OptionsPage = () => {
})
}}/>
</FormItem>)}
</Section>
</OptionCard>
<div className='flex justify-center gap-5'>
<button className='btn btn-primary btn-sm' onClick={onSave}></button>
<button className='btn btn-sm' onClick={onCancel}></button>
{/* <button className='btn btn-sm' onClick={() => {
dispatch(setTempData({
reviewed: undefined,
// reviewActions: 0
}))
}}>重置</button> */}
<div className='flex flex-col justify-center items-center gap-5 mt-6'>
<button className='btn btn-primary btn-wide' onClick={onSave}></button>
<button className='btn btn-wide' onClick={onCancel}></button>
</div>
</div>
</div>
)
}
export default OptionsPage
export default OptionsPage