[migrate] Upgrade Bootstrap 6 ecosystem

AGENTS.md

@@ -0,0 +1,37 @@
+# 项目编程规范
+
+## 理解需求
+
+- 实现前先阅读 Issue 及其示例。遵循指定的 API、数据模型和导出类型；先核实已安装依赖的实际接口，必要时升级依赖，不要擅自替换成无关 API。
+- 在整个仓库中搜索相关用法，并一致地落实适用改动。保留现有行为、功能和源码链接；删除空文件、未使用代码、调试输出，以及没有实际效果的配置改动。
+
+## 数据与错误处理
+
+- 将可复用的数据发现、排序和分页逻辑放入共享工具函数。保持工具通用，不要把特定内容目录或页面硬编码进去。
+- 构建时页面应使用框架提供的静态生成 API。缺少必需内容、生成路径无效及其他构建错误都应明确暴露；仅在应用可以恢复时捕获错误，避免静默回退或空的 `catch` 块。
+- 使用类型安全检查和可选链明确处理可选数据。只有在缺失数据属于预期情况时，才显示有意义的占位内容。
+
+## React、TypeScript 与内容
+
+- 使用依赖实际导出的类型和 API。为组件声明明确的属性类型，对象属性应使用解构；不要重复导出依赖本身的类型。
+- 保持组件职责清晰且可复用：将重复 UI 提取为符合领域职责的组件，由父组件决定布局；渲染 MobX 可观察状态的组件应使用 `@observer` 装饰器。
+- 列表项应使用稳定且唯一的业务标识作为 `key`；对于可能变化或重排的集合，不要使用数组索引。
+- 使用语义化且易访问的 HTML：集合使用列表，名称与对应值使用描述列表，日期使用带 `dateTime` 属性的 `<time>`。
+- 所有面向用户的文本都必须接入 i18n，并为全部受支持语言添加对应翻译：`en-US`、`zh-CN` 和 `zh-TW`。
+
+## 样式与依赖
+
+- 优先复用现有 Idea-React 组件、Bootstrap 工具类、响应式断点、共享样式和项目资源，避免重复实现或编写不必要的自定义 CSS。页面专用样式应保持局部，全局样式只用于真正全局的规则。
+- 修改全局样式或主题变量时，检查所有受影响的用法，避免重复规则，并确保框架组件变体及链接文字对比度正常。优先复用已有 Markdown 样式，不要重新实现。
+- 添加或替换共享工具前，优先选择成熟的项目依赖，并核实其维护成熟度、导出 API 和运行时行为。避免重复依赖或重复引入已由全局提供的资源。
+- 项目命令应兼容 NPM，开发时优先使用 PNPM。不要提交 `package-lock.json`、`yarn.lock`；项目锁文件为 `pnpm-lock.yaml`。
+
+## 可靠性与隐私
+
+- 合并前清理临时 `console` 调试输出。不要用看似成功的回退逻辑掩盖失败。
+- 如果遥测或会话回放会采集 URL，必须在所有采集入口（包括回放数据）中一并脱敏敏感查询参数。
+
+## 验证
+
+- 改动后运行相关检查：使用 `npm test` 执行 lint 和 TypeScript 校验；涉及应用行为、静态生成或生产打包时，运行 `pnpm build`。
+- 修改 UI 或全局样式后，检查实际渲染结果，包括共享组件变体和响应式布局。

README.md

@@ -8,13 +8,13 @@
 
 ## Technology stack
 
-- Language: [TypeScript v5][2] + [MDX v3][10]
-- Component engine: [Next.js v15][3]
-- Component suite: [Bootstrap v5][4]
+- Language: [TypeScript v6][2] + [MDX v3][10]
+- Component engine: [Next.js v16][3]
+- Component suite: [Idea-React v3][33] + [Bootstrap v6][4]
 - PWA framework: [Workbox v6][5]
-- State management: [MobX v6][11]
+- State management: [MobX v7][11]
 - CI / CD: GitHub [Actions][12] + [Vercel][13]
-- Monitor service: [Sentry][14]
+- Monitor service: [Sentry v11][14]
 
 ## Major examples
 
@@ -179,3 +179,4 @@ pnpm container
 [30]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#create-initialization-config-files
 [31]: https://open.larksuite.com/document/server-docs/getting-started/api-access-token/app-access-token-development-guide#1f8b587c
 [32]: https://nextjs.org/docs/deployment
+[33]: https://idea-react.pages.dev/

components/Form/JSONEditor/AddBar.tsx

@@ -1,6 +1,5 @@
-import { Icon } from 'idea-react';
+import { Button, Icon } from 'idea-react';
 import { FC } from 'react';
-import { Button } from 'react-bootstrap';
 
 const type_map = {
   string: { title: 'Inline text', icon: 'input-cursor' },
@@ -16,13 +15,7 @@ export interface AddBarProps {
 export const AddBar: FC<AddBarProps> = ({ onSelect }) => (
   <nav className="d-flex gap-1">
     {Object.entries(type_map).map(([key, { title, icon }]) => (
-      <Button
-        key={key}
-        size="sm"
-        variant="success"
-        title={title}
-        onClick={onSelect.bind(null, key)}
-      >
+      <Button key={key} size="sm" theme="success" title={title} onClick={onSelect.bind(null, key)}>
         <Icon name={icon} />
       </Button>
     ))}

components/Form/JSONEditor/index.tsx

@@ -1,8 +1,8 @@
+import { FormControl, FormTextArea } from 'idea-react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { DataObject } from 'mobx-restful';
 import { ChangeEvent, Component, ReactNode } from 'react';
-import { Form } from 'react-bootstrap';
 
 import { AddBar } from './AddBar';
 
@@ -133,16 +133,15 @@ export class ListField extends Component<FieldProps> {
     switch (type) {
       case 'string':
         return (
-          <Form.Control
+          <FormControl
             defaultValue={value}
             placeholder="Value"
             onBlur={this.setValue.bind(this, index)}
           />
         );
       case 'text':
         return (
-          <Form.Control
-            as="textarea"
+          <FormTextArea
             defaultValue={value}
             placeholder="Value"
             onBlur={this.setValue.bind(this, index)}
@@ -170,7 +169,7 @@ export class ListField extends Component<FieldProps> {
         {children.map(({ type, key, value }, index) => (
           <li key={key} className="d-flex align-items-center gap-3">
             {field_type === 'object' && (
-              <Form.Control
+              <FormControl
                 defaultValue={key}
                 required
                 placeholder="Key"

components/Git/ArticleEditor.tsx

@@ -1,15 +1,13 @@
-import { Loading } from 'idea-react';
+import { Button, Col, Form, FormGroup, FormTextArea, Loading } from 'idea-react';
 import { readAs } from 'koajax';
 import { debounce } from 'lodash';
-import { marked } from 'marked';
 import { computed, observable } from 'mobx';
 import { Content, ContentModel } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { ObservedComponent } from 'mobx-react-helper';
 import { DataObject } from 'mobx-restful';
 import { SearchableInput } from 'mobx-restful-table';
 import { ChangeEvent, FormEvent } from 'react';
-import { Button, Col, Form } from 'react-bootstrap';
 import { blobOf, encodeBase64, formatDate, uniqueID } from 'web-utility';
 import YAML from 'yaml';
 
@@ -120,6 +118,8 @@ export class ArticleEditor extends ObservedComponent<{}, typeof i18n> {
       if (meta[1]) await this.setPostMeta(meta[1]);
     }
 
+    const { marked } = await import('marked');
+
     this.editorContent = marked(content) as string;
   };
 
@@ -237,8 +237,8 @@ export class ArticleEditor extends ObservedComponent<{}, typeof i18n> {
       <Form className="my-3 d-flex flex-column gap-3" onReset={this.reset} onSubmit={this.submit}>
         {loading && <Loading />}
 
-        <Form.Group className="row">
-          <label className="col-sm-2 col-form-label">{t('repository')}</label>
+        <FormGroup className="row">
+          <label className="sm:col-2 col-form-label">{t('repository')}</label>
           <SearchableInput
             translator={i18n}
             store={this.repositorySearchStore}
@@ -247,9 +247,9 @@ export class ArticleEditor extends ObservedComponent<{}, typeof i18n> {
             placeholder="Search owner/repository"
             onChange={([{ label } = {}]) => (this.repository = label || '')}
           />
-        </Form.Group>
-        <Form.Group className="row">
-          <label className="col-sm-2 col-form-label">{t('file_path')}</label>
+        </FormGroup>
+        <FormGroup className="row">
+          <label className="sm:col-2 col-form-label">{t('file_path')}</label>
 
           {repository && (
             <SearchableInput
@@ -262,30 +262,32 @@ export class ArticleEditor extends ObservedComponent<{}, typeof i18n> {
               onChange={([{ label }]) => this.loadFile(label)}
             />
           )}
-        </Form.Group>
-        <Form.Group className="row align-items-center">
-          <label className="col-sm-2 col-form-label">{t('commit_message')}</label>
+        </FormGroup>
+        <FormGroup className="row align-items-center">
+          <label className="sm:col-2 col-form-label">{t('commit_message')}</label>
           <Col sm={7}>
-            <Form.Control as="textarea" name="message" required />
+            <FormTextArea name="message" required />
           </Col>
           <Col sm={3} className="d-flex flex-wrap gap-2 justify-content-around align-items-center">
-            <Button type="submit">{t('commit')}</Button>
-            <Button type="reset" variant="danger">
+            <Button type="submit" theme="primary">
+              {t('commit')}
+            </Button>
+            <Button type="reset" theme="danger">
               {t('clear')}
             </Button>
           </Col>
-        </Form.Group>
+        </FormGroup>
 
         {meta && (
-          <Form.Group>
+          <FormGroup>
             <label>{t('meta')}</label>
             <ListField
               value={meta}
               onChange={({ currentTarget: { value } }) => (this.meta = value as PostMeta)}
             />
-          </Form.Group>
+          </FormGroup>
         )}
-        <Form.Group onInput={this.fixURL}>
+        <FormGroup onInput={this.fixURL}>
           <div className="d-flex justify-content-between align-items-center my-2">
             <label>{t('content')}</label>
           </div>
@@ -295,7 +297,7 @@ export class ArticleEditor extends ObservedComponent<{}, typeof i18n> {
               onChange={value => (this.editorContent = value || '<br>')}
             />
           )}
-        </Form.Group>
+        </FormGroup>
       </Form>
     );
   }

components/Git/Card.tsx

@@ -1,14 +1,26 @@
-import { text2color } from 'idea-react';
+import {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardProps,
+  CardText,
+  CardTitle,
+  Col,
+  Row,
+  text2color,
+} from 'idea-react';
 import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { FC, useContext } from 'react';
-import { Badge, Button, Card, CardProps, Col, Row } from 'react-bootstrap';
 
 import { I18nContext } from '../../models/Translation';
 import { GitLogo } from './Logo';
 
 export interface GitCardProps
-  extends Omit<CardProps, 'id'>,
+  extends
+    Omit<CardProps, 'id'>,
     Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
     Partial<Pick<GitRepository, 'topics' | 'description' | 'homepage'>> {
   className?: string;
@@ -29,19 +41,19 @@ export const GitCard: FC<GitCardProps> = observer(
 
     return (
       <Card className={className} {...props}>
-        <Card.Body className="d-flex flex-column gap-3">
-          <Card.Title as="h3" className="h5">
+        <CardBody className="d-flex flex-column gap-3">
+          <CardTitle as="h3" className="h5">
             <a target="_blank" href={html_url} rel="noreferrer">
               {full_name}
             </a>
-          </Card.Title>
+          </CardTitle>
 
           <nav className="flex-fill">
             {topics.map(topic => (
               <Badge
                 key={topic}
                 className="me-1 text-decoration-none"
-                bg={text2color(topic, ['light'])}
+                theme={text2color(topic, ['light'])}
                 as="a"
                 target="_blank"
                 href={`https://github.com/topics/${topic}`}
@@ -57,15 +69,15 @@ export const GitCard: FC<GitCardProps> = observer(
               </Col>
             ))}
           </Row>
-          <Card.Text>{description}</Card.Text>
-        </Card.Body>
-        <Card.Footer className="d-flex justify-content-between align-items-center">
+          <CardText>{description}</CardText>
+        </CardBody>
+        <CardFooter className="d-flex justify-content-between align-items-center">
           {homepage && (
-            <Button variant="success" target="_blank" href={homepage}>
+            <Button theme="success" target="_blank" href={homepage}>
               {t('home_page')}
             </Button>
           )}
-        </Card.Footer>
+        </CardFooter>
       </Card>
     );
   },

components/Git/IssueCard.tsx

@@ -1,7 +1,16 @@
+import {
+  Badge,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardProps,
+  CardText,
+  CardTitle,
+} from 'idea-react';
 import { Issue } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { FC, useContext } from 'react';
-import { Badge, Card, CardProps } from 'react-bootstrap';
 
 import { I18nContext } from '../../models/Translation';
 import styles from './IssueCard.module.less';
@@ -15,39 +24,39 @@ export const IssueCard: FC<IssueCardProps> = observer(
 
     return (
       <Card className={`shadow-sm ${styles.issueCard} ${className}`}>
-        <Card.Header className="d-flex justify-content-between align-items-center">
-          <Badge bg={state === 'open' ? 'success' : 'secondary'}>
+        <CardHeader className="d-flex justify-content-between align-items-center">
+          <Badge theme={state === 'open' ? 'success' : 'secondary'}>
             {state === 'open' ? t('open') : t('closed')}
           </Badge>
-          <small className="text-muted">#{number}</small>
-        </Card.Header>
+          <small className="text-body-secondary">#{number}</small>
+        </CardHeader>
 
-        <Card.Body className="d-flex flex-column gap-3">
-          <Card.Title className="h5">
+        <CardBody className="d-flex flex-column gap-3">
+          <CardTitle className="h5">
             <a
               href={`/weekly/${number}`}
               className={`text-decoration-none text-dark ${styles.issueTitle}`}
             >
               {title}
             </a>
-          </Card.Title>
+          </CardTitle>
 
           {body && (
-            <Card.Text className="text-muted flex-grow-1">
+            <CardText className="text-body-secondary flex-grow-1">
               {body.slice(0, 150)}
               {body.length > 150 && '...'}
-            </Card.Text>
+            </CardText>
           )}
           {labels?.[0] && <LabelBar labels={labels} />}
-        </Card.Body>
+        </CardBody>
 
-        <Card.Footer
-          className={`d-flex justify-content-between align-items-center small text-muted ${styles.authorInfo}`}
+        <CardFooter
+          className={`d-flex justify-content-between align-items-center small text-body-secondary ${styles.authorInfo}`}
         >
           <span>{user && `${t('weekly_author')}: ${user.login}`}</span>
 
           <time dateTime={created_at}>{new Date(created_at).toLocaleDateString('zh-CN')}</time>
-        </Card.Footer>
+        </CardFooter>
       </Card>
     );
   },