📝 docs: update docs (lobehub#2669)

* 📝 docs: update docs

* 📝 docs: update docs

* 📝 docs: update docs

contributing/Basic/Feature-Development.md

@@ -4,14 +4,14 @@ This document aims to guide developers on how to develop a complete feature requ
 
 We will use the implementation of sessionGroup as an example: [✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055), and explain the complete implementation process through the following six main sections:
 
-1. Data Model / Database Definition
-2. Service Implementation / Model Implementation
-3. Frontend Data Flow Store Implementation
-4. UI Implementation and Action Binding
-5. Data Migration
-6. Data Import and Export
+1. [Data Model / Database Definition](#1-data-model--database-definition)
+2. [Service Implementation / Model Implementation](#2-service-implementation--model-implementation)
+3. [Frontend Data Flow Store Implementation](#3-frontend-data-flow-store-implementation)
+4. [UI Implementation and Action Binding](#4-ui-implementation-and-action-binding)
+5. [Data Migration](#5-data-migration)
+6. [Data Import and Export](#6-data-import-and-export)
 
-## 1. Database Section
+## 1. Data Model / Database Definition
 
 To implement the Session Group feature, it is necessary to define the relevant data model and indexes at the database level.
 
@@ -119,7 +119,7 @@ As a result, you can now view the `sessionGroups` table in the `LOBE_CHAT_DB` in
 
 ![](https://github.com/lobehub/lobe-chat/assets/28616219/aea50f66-4060-4a32-88c8-b3c672d05be8)
 
-## 2. Model and Service Section
+## 2. Service Implementation / Model Implementation
 
 ### Define Model
 
@@ -176,7 +176,7 @@ class SessionService {
 }
 ```
 
-## 3. Store Action Section
+## 3. Frontend Data Flow Store Implementation
 
 In the LobeChat application, the Store module is used to manage the frontend state of the application. The Actions within it are functions that trigger state updates, usually by calling methods in the service layer to perform actual data processing operations and then updating the state in the Store. We use `zustand` as the underlying dependency for the Store module. For a detailed practical introduction to state management, you can refer to [📘 Best Practices for State Management](../State-Management/State-Management-Intro.zh-CN.md).
 
@@ -351,7 +351,7 @@ Since all data retrieval in the UI is implemented using syntax like `useSessionS
 >
 > If you are not familiar with the concept and functionality of selectors, you can refer to the section [📘 Data Storage and Retrieval Module](./State-Management-Selectors.en-US) for relevant information.
 
-## IV. UI Section
+## 4. UI Implementation and Action Binding
 
 Bind Store Action in the UI component to implement interactive logic, for example `CreateGroupModal`:
 
@@ -570,7 +570,7 @@ export class LocalDB extends Dexie {
 
 This is our data migration strategy. When performing the migration, it is essential to ensure the correctness of the migration script and validate the migration results through thorough testing.
 
-## VI. Data Import and Export
+## 6. Data Import and Export
 
 In LobeChat, the data import and export feature is designed to ensure that users can migrate their data between different devices. This includes session, topic, message, and settings data. In the implementation of the Session Group feature, we also need to handle data import and export to ensure that the complete exported data can be restored exactly the same on other devices.
 

contributing/Basic/Feature-Development.zh-CN.md

@@ -4,14 +4,14 @@
 
 我们将以 sessionGroup 的实现为示例：[✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055) ， 通过以下六个主要部分来阐述完整的实现流程：
 
-1. 数据模型 / 数据库定义
-2. Service 实现 / Model 实现
-3. 前端数据流 Store 实现
-4. UI 实现与 action 绑定
-5. 数据迁移
-6. 数据导入导出
+1. [数据模型 / 数据库定义](#一数据模型--数据库定义)
+2. [Service 实现 / Model 实现](#二service-实现--model-实现)
+3. [前端数据流 Store 实现](#三前端数据流-store-实现)
+4. [UI 实现与 action 绑定](#四ui-实现与-action-绑定)
+5. [数据迁移](#五数据迁移)
+6. [数据导入导出](#六数据导入导出)
 
-## 一、数据库部分
+## 一、数据模型 / 数据库定义
 
 为了实现 Session Group 功能，首先需要在数据库层面定义相关的数据模型和索引。
 
@@ -119,7 +119,7 @@ export class LocalDB extends Dexie {
 
 ![](https://github.com/lobehub/lobe-chat/assets/28616219/aea50f66-4060-4a32-88c8-b3c672d05be8)
 
-## 二、Model 与 Service 部分
+## 二、Service 实现 / Model 实现
 
 ### 定义 Model
 
@@ -176,7 +176,7 @@ class SessionService {
 }
 ```
 
-## 三、Store Action 部分
+## 三、前端数据流 Store 实现
 
 在 LobeChat 应用中，Store 是用于管理应用前端状态的模块。其中的 Action 是触发状态更新的函数，通常会调用服务层的方法来执行实际的数据处理操作，然后更新 Store 中的状态。我们采用了 `zustand` 作为 Store 模块的底层依赖，对于状态管理的详细实践介绍，可以查阅 [📘 状态管理最佳实践](../State-Management/State-Management-Intro.zh-CN.md)
 
@@ -351,7 +351,7 @@ const customSessionGroups = (s: SessionStore): CustomSessionGroup[] => s.customS
 >
 > 如果你对 Selectors 的概念和功能不太了解，可以查阅 [📘 数据存储取数模块](../State-Management/State-Management-Selectors.zh-CN.md) 部分了解相关内容。
 
-## 四、UI 部分
+## 四、UI 实现与 action 绑定
 
 在 UI 组件中绑定 Store Action 实现交互逻辑，例如 `CreateGroupModal`：
 

contributing/Basic/Intro.md

@@ -1,22 +1,26 @@
 # Technical Development Getting Started Guide
 
-Welcome to the LobeChat technical development getting started guide. LobeChat is an AI conversation application built on the Next.js framework, which integrates a series of technology stacks to achieve diverse functions and features. This guide will provide a detailed introduction to the main technical components of LobeChat and how to configure and use these technologies in your development environment.
+Welcome to the LobeChat Technical Development Getting Started Guide. LobeChat is an AI conversation application built on the Next.js framework, incorporating a range of technology stacks to achieve diverse functionalities and features. This guide will detail the main technical components of LobeChat and how to configure and use these technologies in your development environment.
 
 #### TOC
 
 - [Basic Technology Stack](#basic-technology-stack)
 - [Folder Directory Structure](#folder-directory-structure)
+- [Local Development Environment Setup](#local-development-environment-setup)
+- [Code Style and Contribution Guide](#code-style-and-contribution-guide)
+- [Internationalization Implementation Guide](#internationalization-implementation-guide)
+- [Appendix: Resources and References](#appendix-resources-and-references)
 
 ## Basic Technology Stack
 
-The core technology stack of LobeChat includes:
+The core technology stack of LobeChat is as follows:
 
-- **Framework**: We have chosen [Next.js](https://nextjs.org/), a powerful React framework that provides key features such as server-side rendering, routing framework, and Router Handler for our project.
-- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as the basic component library, and also introduce [lobe-ui](https://github.com/lobehub/lobe-ui) as our business component library.
-- **State Management**: We have opted for [zustand](https://github.com/pmndrs/zustand), a lightweight and easy-to-use state management library.
+- **Framework**: We chose [Next.js](https://nextjs.org/), a powerful React framework that provides key features such as server-side rendering, routing framework, and Router Handler.
+- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as the basic component library, along with [lobe-ui](https://github.com/lobehub/lobe-ui) as our business component library.
+- **State Management**: We selected [zustand](https://github.com/pmndrs/zustand), a lightweight and easy-to-use state management library.
 - **Network Requests**: We use [swr](https://swr.vercel.app/), a React Hooks library for data fetching.
-- **Routing**: For routing management, we directly use the solution provided by [Next.js](https://nextjs.org/) itself.
-- **Internationalization**: We use [i18next](https://www.i18next.com/) to implement multi-language support for the application.
+- **Routing**: For routing management, we directly use the solution provided by [Next.js](https://nextjs.org/).
+- **Internationalization**: We use [i18next](https://www.i18next.com/) to support multiple languages in the application.
 - **Styling**: We use [antd-style](https://github.com/ant-design/antd-style), a CSS-in-JS library that complements Ant Design.
 - **Unit Testing**: We use [vitest](https://github.com/vitest-dev/vitest) for unit testing.
 
@@ -26,18 +30,82 @@ The folder directory structure of LobeChat is as follows:
 
 ```bash
 src
-├── app        # Main logic of the application and code related to state management
+├── app        # Code related to the main logic and state management of the application
 ├── components # Reusable UI components
-├── config     # Application configuration files, including client-side environment variables and server-side environment variables
+├── config     # Application configuration files, including client and server environment variables
 ├── const      # Used to define constants, such as action types, route names, etc.
-├── features   # Function modules related to business features, such as Agent settings, plugin development pop-ups, etc.
-├── hooks      # Custom utility hooks reused throughout the application
+├── features   # Business-related feature modules, such as Agent settings, plugin development pop-ups, etc.
+├── hooks      # Custom utility Hooks reusable across the application
 ├── layout     # Application layout components, such as navigation bars, sidebars, etc.
 ├── locales    # Language files for internationalization
 ├── services   # Encapsulated backend service interfaces, such as HTTP requests
 ├── store      # Zustand store for state management
 ├── types      # TypeScript type definition files
-└── utils      # Common utility functions
+└── utils      # General utility functions
 ```
 
-For a detailed introduction to the directory structure, please refer to: [Folder Directory Structure](Folder-Structure.en-US.md)
+For a detailed introduction to the directory structure, see: [Folder Directory Structure](Folder-Structure.zh-CN.md)
+
+## Local Development Environment Setup
+
+This section outlines setting up the development environment and local development. Before starting, please ensure that Node.js, Git, and your chosen package manager (Bun or PNPM) are installed in your local environment.
+
+We recommend using WebStorm as your integrated development environment (IDE).
+
+1. **Get the code**: Clone the LobeChat code repository locally:
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **Install dependencies**: Enter the project directory and install the required dependencies:
+
+```bash
+cd lobe-chat
+# If you use Bun
+bun install
+# If you use PNPM
+pnpm install
+```
+
+3. **Run and debug**: Start the local development server and begin your development journey:
+
+```bash
+# Start the development server with Bun
+bun run dev
+# Visit http://localhost:3010 to view the application
+```
+
+> \[!IMPORTANT]\
+> If you encounter the error "Could not find 'stylelint-config-recommended'" when installing dependencies with `npm`, please reinstall the dependencies using `pnpm` or `bun`.
+
+Now, you should be able to see the welcome page of LobeChat in your browser. For a detailed environment setup guide, please refer to [Development Environment Setup Guide](Setup-Development.zh-CN.md).
+
+## Code Style and Contribution Guide
+
+In the LobeChat project, we place great emphasis on the quality and consistency of the code. For this reason, we have established a series of code style standards and contribution processes to ensure that every developer can smoothly participate in the project. Here are the code style and contribution guidelines you need to follow as a developer.
+
+- **Code Style**: We use `@lobehub/lint` to unify the code style, including ESLint, Prettier, remarklint, and stylelint configurations. Please adhere to our code standards to maintain code consistency and readability.
+- **Contribution Process**: We use gitmoji and semantic release for code submission and release processes. Please use gitmoji to annotate your commit messages and ensure compliance with the semantic release standards so that our automation systems can correctly handle version control and releases.
+
+All contributions will undergo code review. Maintainers may suggest modifications or requirements. Please respond actively to review comments and make timely adjustments. We look forward to your participation and contribution.
+
+For detailed code style and contribution guidelines, please refer to [Code Style and Contribution Guide](Contributing-Guidelines.zh-CN.md).
+
+## Internationalization Implementation Guide
+
+LobeChat uses `i18next` and `lobe-i18n` to implement multilingual support, ensuring a global user experience.
+
+Internationalization files are located in `src/locales`, containing the default language (Chinese). We generate other language JSON files automatically through `lobe-i18n`.
+
+If you want to add a new language, follow specific steps detailed in [New Language Addition Guide](../Internationalization/Add-New-Locale.zh-CN.md). We encourage you to participate in our internationalization efforts to provide better services to global users.
+
+For a detailed guide on internationalization implementation, please refer to [Internationalization Implementation Guide](../Internationalization/Internationalization-Implementation.zh-CN.md).
+
+## Appendix: Resources and References
+
+To support developers in better understanding and using the technology stack of LobeChat, we provide a comprehensive list of resources and references — [LobeChat Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - Visit our maintained list of resources, including tutorials, articles, and other useful links.
+
+We encourage developers to utilize these resources to deepen their learning and enhance their skills, join community discussions through [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) or [Discord](https://discord.com/invite/AYFPHvv2jT), ask questions, or share your experiences.
+
+If you have any questions or need further assistance, please do not hesitate to contact us through the above channels.

contributing/Basic/Intro.zh-CN.md

@@ -76,6 +76,9 @@ bun run dev
 # 访问 http://localhost:3010 查看应用
 ```
 
+> \[!IMPORTANT]\
+> 如果使用`npm`安装依赖出现`Could not find "stylelint-config-recommended"`错误，请使用 `pnpm` 或者 `bun` 重新安装依赖。
+
 现在，你应该可以在浏览器中看到 LobeChat 的欢迎页面。详细的环境配置指南，请参考 [开发环境设置指南](Setup-Development.zh-CN.md)。
 
 ## 代码风格与贡献指南