feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf
This commit is contained in:
fanlv
2025-07-20 17:36:12 +08:00
commit 890153324f
14811 changed files with 1923430 additions and 0 deletions

View File

@@ -0,0 +1,31 @@
import { mergeConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
viteFinal: config =>
mergeConfig(config, {
plugins: [
svgr({
svgrOptions: {
native: false,
},
}),
],
}),
};
export default config;

View File

@@ -0,0 +1,14 @@
/** @type { import('@storybook/react').Preview } */
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;

View File

@@ -0,0 +1,5 @@
const { defineConfig } = require('@coze-arch/stylelint-config');
module.exports = defineConfig({
extends: [],
});

View File

@@ -0,0 +1,16 @@
# @coze-foundation/browser-upgrade-banner
低版本浏览器升级条幅
## Features
- [x] eslint & ts
- [x] esm bundle
- [x] umd bundle
- [x] storybook
## Commands
- init: `rush update`
- dev: `npm run dev`
- build: `npm run build`

View File

@@ -0,0 +1,12 @@
{
"operationSettings": [
{
"operationName": "test:cov",
"outputFolderNames": ["coverage"]
},
{
"operationName": "ts-check",
"outputFolderNames": ["./dist"]
}
]
}

View File

@@ -0,0 +1,7 @@
const { defineConfig } = require('@coze-arch/eslint-config');
module.exports = defineConfig({
packageRoot: __dirname,
preset: 'web',
rules: {},
});

View File

@@ -0,0 +1,46 @@
{
"name": "@coze-foundation/browser-upgrade-banner",
"version": "0.0.1",
"description": "低版本浏览器升级条幅",
"license": "Apache-2.0",
"author": "liushuoyan@bytedance.com",
"maintainers": [],
"main": "src/index.tsx",
"scripts": {
"build": "exit 0",
"lint": "eslint ./ --cache",
"test": "vitest --run --passWithNoTests",
"test:cov": "npm run test -- --coverage"
},
"dependencies": {
"@coze-arch/coze-design": "0.0.6-alpha.346d77",
"@coze-arch/i18n": "workspace:*",
"@coze-arch/logger": "workspace:*",
"@types/detect-browser": "~4.0.0",
"classnames": "^2.3.2",
"detect-browser": "~5.3.0"
},
"devDependencies": {
"@coze-arch/bot-typings": "workspace:*",
"@coze-arch/eslint-config": "workspace:*",
"@coze-arch/stylelint-config": "workspace:*",
"@coze-arch/ts-config": "workspace:*",
"@coze-arch/vitest-config": "workspace:*",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/react-hooks": "^8.0.1",
"@types/react": "18.2.37",
"@types/react-dom": "18.2.15",
"@vitest/coverage-v8": "~3.0.5",
"react": "~18.2.0",
"react-dom": "~18.2.0",
"stylelint": "^15.11.0",
"vite-plugin-svgr": "~3.3.0",
"vitest": "~3.0.5"
},
"peerDependencies": {
"react": ">=18.2.0",
"react-dom": ">=18.2.0"
}
}

View File

@@ -0,0 +1,81 @@
.flex-helper {
/* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
/* stylelint-disable-next-line value-no-vendor-prefix */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
.flex-1-helper {
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-flex: 1; /* Chrome */
/* stylelint-disable-next-line property-no-vendor-prefix */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}
.flex-direction-row-helper {
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-flex-direction: row;
/* stylelint-disable-next-line property-no-vendor-prefix */
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
.flex-items-center {
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-align-items: center; /* Chrome 21+, Safari 6.1+, Opera 15+ */
align-items: center; /* 新语法 */
-ms-flex-align: center; /* IE 10 */
}
.flex-justify-center {
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-justify-content: center; /* Chrome 21+, Safari 6.1+ */
justify-content: center; /* 新版浏览器 */
-webkit-box-pack: center; /* iOS 6-, Safari 3.1-6 */
-moz-box-pack: center; /* 早期版本的 Firefox */
-ms-flex-pack: center; /* IE 10 */
}
.banner-wrapper {
width: 100%;
min-height: 48px;
padding: 0 64px;
background: #E5B65C;
}
.banner-item {
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #FFF;
text-align: center;
}
.banner-upgrade-button {
cursor: pointer;
margin-left: 6px;
font-weight: bold;
text-decoration-line: underline;
text-underline-offset: 4px;
}
.close {
cursor: pointer;
color: #FFF;
}

View File

@@ -0,0 +1,137 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
useEffect,
useRef,
useState,
type FC,
type PropsWithChildren,
} from 'react';
import classNames from 'classnames';
import { reporter } from '@coze-arch/logger';
import { I18n } from '@coze-arch/i18n';
import { IconCozCross } from '@coze-arch/coze-design/icons';
import { testLowVersionBrowse } from '../../utils';
import { EventNames } from '../../constants';
import styles from './index.module.less';
type IProps = Record<string, unknown>;
interface BannerInfo {
url: string;
visible: boolean;
}
export const BrowserUpgradeWrap: FC<PropsWithChildren<IProps>> = props => {
const { children } = props;
const [bannerInfo, setBannerInfo] = useState<BannerInfo>({
url: '',
visible: false,
});
const [bannerHeight, setBannerHeight] = useState(0);
const bannerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const result = testLowVersionBrowse();
if (!result) {
return;
}
const { downloadUrl } = result;
reporter.event({
eventName: EventNames.BrowserUpgradeTipsVisible,
});
setBannerInfo({ url: downloadUrl, visible: !!downloadUrl });
}, []);
useEffect(() => {
if (!bannerRef.current) {
setBannerHeight(0);
return;
}
setBannerHeight(bannerRef.current.getBoundingClientRect().height ?? 0);
}, [bannerInfo]);
const handleClick = () => {
if (!bannerInfo.url) {
return;
}
reporter.event({
eventName: EventNames.BrowserUpgradeClick,
});
window.open(bannerInfo.url);
};
const handleBannerClose = () => {
setBannerInfo(prevState => ({ ...prevState, visible: false }));
};
return (
<>
{bannerInfo.visible ? (
<div
className={classNames(
styles['banner-wrapper'],
styles['flex-helper'],
styles['flex-direction-row-helper'],
styles['flex-items-center'],
)}
ref={bannerRef}
>
<div
className={classNames(
styles['banner-item'],
styles['flex-1-helper'],
styles['flex-items-center'],
styles['flex-justify-center'],
)}
>
<span>{I18n.t('browser_upgrade')}: </span>
<span
className={styles['banner-upgrade-button']}
onClick={handleClick}
>
{I18n.t('browser_upgrade_button')}
</span>
</div>
<div onClick={handleBannerClose}>
<IconCozCross className={styles.close} />
</div>
</div>
) : null}
<div
style={{
height: `calc(100% - ${bannerHeight}px)`,
position: 'relative',
}}
>
{children}
</div>
</>
);
};

View File

@@ -0,0 +1,20 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const enum EventNames {
BrowserUpgradeTipsVisible = 'browserUpgradeTipsVisible',
BrowserUpgradeClick = 'browserUpgradeClick',
}

View File

@@ -0,0 +1,17 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { BrowserUpgradeWrap } from './components/browser-upgrade-wrap';

View File

@@ -0,0 +1,17 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/// <reference types='@coze-arch/bot-typings' />

View File

@@ -0,0 +1,42 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export function compareVersion(version1: string, version2: string): number {
// 将版本号字符串分割成数字数组这里使用map(Number)确保转换为数字类型
const parts1 = version1.split('.').map(Number);
const parts2 = version2.split('.').map(Number);
// 计算出最长的版本号长度
const maxLength = Math.max(parts1.length, parts2.length);
// 逐个比较版本号中的每个部分
for (let i = 0; i < maxLength; i++) {
// 如果某个版本号在这个位置没有对应的数字则视为0
const part1 = i < parts1.length ? parts1[i] : 0;
const part2 = i < parts2.length ? parts2[i] : 0;
// 比较两个版本号的当前部分
if (part1 > part2) {
return 1;
}
if (part1 < part2) {
return -1;
}
}
// 如果所有部分都相等,则版本号相等
return 0;
}

View File

@@ -0,0 +1,105 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { detect, type Browser } from 'detect-browser';
import { compareVersion } from './compare-version';
type VersionConfig = {
[K in Browser]?: string;
};
type DownloadConfig = {
[K in Browser]?: string;
};
const PC_VERSION_CONFIG: VersionConfig = {
['chrome']: '87.0.0',
['edge-chromium']: '100.0.0',
['edge']: '100.0.0',
['safari']: '14.0.0',
['firefox']: '79.0.0',
['ie']: '999999.0.0',
};
// cp-disable-next-line
const CN_CHROME_URL = 'https://www.google.cn/chrome/';
// cp-disable-next-line
const INTERNATIONAL_CHROME_URL = 'https://www.google.com/chrome/';
// cp-disable-next-line
const CN_EDGE_URL = 'https://www.microsoft.com/zh-cn/edge';
// cp-disable-next-line
const INTERNATIONAL_EDGE_URL = 'https://www.microsoft.com/edge';
const CN_BROWSER_DOWNLOAD_CONFIG: DownloadConfig = {
['chrome']: CN_CHROME_URL,
['edge-chromium']: CN_EDGE_URL,
['edge']: CN_EDGE_URL,
// cp-disable-next-line
['safari']: 'https://apps.apple.com/cn/app/safari/id1146562112',
// cp-disable-next-line
['firefox']: 'https://www.mozilla.org/zh-CN/firefox/new/',
['ie']: CN_CHROME_URL,
};
const INTERNATIONAL_BROWSER_DOWNLOAD_CONFIG: DownloadConfig = {
['chrome']: INTERNATIONAL_CHROME_URL,
['edge-chromium']: INTERNATIONAL_EDGE_URL,
['edge']: INTERNATIONAL_EDGE_URL,
// cp-disable-next-line
['safari']: 'https://apps.apple.com/app/safari/id1146562112',
// cp-disable-next-line
['firefox']: 'https://www.mozilla.org/firefox/new/',
['ie']: INTERNATIONAL_CHROME_URL,
};
/**
* 目前看起来 移动端 / PC 版本一致无需区分,后期如果区分,在这里通过条件区分
*/
export const testLowVersionBrowse = () => testPCVersion();
const testPCVersion = () => {
const browserInfo = detect(navigator.userAgent);
if (!browserInfo) {
return null;
}
const { name, version } = browserInfo;
// 显示的判断,用 includes 类型推断不正确
if (name === 'bot' || name === 'react-native' || name === 'node') {
return null;
}
const configVersion = PC_VERSION_CONFIG[name];
if (!configVersion) {
return null;
}
if (compareVersion(version, configVersion) >= 0) {
return null;
}
return {
downloadUrl: IS_OVERSEA
? (INTERNATIONAL_BROWSER_DOWNLOAD_CONFIG[name] ??
INTERNATIONAL_CHROME_URL)
: (CN_BROWSER_DOWNLOAD_CONFIG[name] ?? CN_CHROME_URL),
};
};

View File

@@ -0,0 +1,23 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const isMobileFromUA = () => {
const { userAgent } = navigator;
// 检查是否为移动设备
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
userAgent,
);
};

View File

@@ -0,0 +1,36 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@coze-arch/ts-config/tsconfig.web.json",
"compilerOptions": {
"types": [],
"strictNullChecks": true,
"noImplicitAny": true,
"rootDir": "./src",
"outDir": "./dist",
"tsBuildInfoFile": "./dist/tsconfig.build.tsbuildinfo"
},
"include": ["src"],
"references": [
{
"path": "../../arch/bot-typings/tsconfig.build.json"
},
{
"path": "../../arch/i18n/tsconfig.build.json"
},
{
"path": "../../arch/logger/tsconfig.build.json"
},
{
"path": "../../../config/eslint-config/tsconfig.build.json"
},
{
"path": "../../../config/stylelint-config/tsconfig.build.json"
},
{
"path": "../../../config/ts-config/tsconfig.build.json"
},
{
"path": "../../../config/vitest-config/tsconfig.build.json"
}
]
}

View File

@@ -0,0 +1,15 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"compilerOptions": {
"composite": true
},
"references": [
{
"path": "./tsconfig.build.json"
},
{
"path": "./tsconfig.misc.json"
}
],
"exclude": ["**/*"]
}

View File

@@ -0,0 +1,18 @@
{
"extends": "@coze-arch/ts-config/tsconfig.web.json",
"$schema": "https://json.schemastore.org/tsconfig",
"include": ["__tests__", "stories", "vitest.config.ts", "tailwind.config.ts"],
"exclude": ["./dist"],
"references": [
{
"path": "./tsconfig.build.json"
}
],
"compilerOptions": {
"rootDir": "./",
"outDir": "./dist",
"types": ["vitest/globals"],
"strictNullChecks": true,
"noImplicitAny": true
}
}

View File

@@ -0,0 +1,22 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineConfig } from '@coze-arch/vitest-config';
export default defineConfig({
dirname: __dirname,
preset: 'web',
});