opengithubs / weekly Goto Github PK

老师您好，这是我第一次开源项目，有很多不足，但是是我花了晚上休息的时间，精心打磨的，希望自己能有高质量的输出，也希望能帮助到更多的人。

嗨，大家好！欢迎来到C-Shopping，这是一场揭开科技面纱的电商之旅。我是C-Shopping开源作者“继小鹏”，今天将为你介绍一款基于最新技术的开源电商平台。让我们一同探索吧！

项目在线演示地址：

• docker 部署地址：http://shop.huanghanlian.com/
• vercel 部署地址：https://c-shopping-three.vercel.app/

项目传送门：https://github.com/huanghanzhilian/c-shopping

如果你觉得有帮助，请给我一个Star，这会给我更大的鼓励。

项目背景

背景：

• 一直以来前端UI框架被固定形式占据（受限于传统的UI框架），导致视觉疲劳，在开发一些高度自定义的项目时，往往力不从心；
• 多设备适配的web优秀项目很少，学习和维护成本较高；
• 当项目复杂后，在组件需要调用多个 api 时会变得复杂起来，比如需要管理多个 loading 和 error 状态，这会导致产生非常多的 state 声明，还有请求取消、请求竞态等可能存在的问题也容易被忽略；
• 随着项目复杂，样式的开发与维护变得庞大且臃肿；

意图：

改进背景中提到的问题。

目的：

打造一个完整的，适合web端的良好生态。

首先，让我们了解一下C-Shopping的技术背后。我采用了一系列最前沿的技术，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query、JWT和Docker等。这确保了此项目不仅高效，而且具备强大的可扩展性。我们致力于解决传统电商平台的一些痛点：不美观、不适配不同设备、界面单一，等等。C-Shopping通过采用最新的技术和设计理念，为用户打造了一场全响应式技术开发体验。

C-Shopping关注用户体验。我们的界面不仅仅美观，更是响应式设计，让用户可以在任何设备上轻松愉悦地购物。个人中心和订单管理功能也让你的购物更加个性化和方便。

项目亮点

C-Shopping的亮点之一是我们采用了一系列先进的技术，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query等，为用户提供了极致的性能和体验。不仅注重美观，更追求技术上的卓越。

Next.js 驱动的极速体验

C-Shopping采用了 Next.js，这不仅意味着网页加载速度飞快，而且还支持服务端渲染，让你体验到前所未有的流畅度。

🎨 Tailwind CSS 的时尚设计

采用 Tailwind CSS，为 C-Shopping 注入了时尚感。每一次的界面都如同艺术品般精致，让购物成为一场视觉的盛宴。

🔧 Headless UI 自由而灵活

C-Shopping 选择了 Headless UI 风格，让用户可以在购物过程中拥有更多自由。不再受限于传统的UI框架，为你打开了更多定制的大门。

🔐 JWT 安全无忧

安全至上！采用 JWT 进行用户身份验证，为你的购物行为提供了最强有力的保障，让你可以放心尽情购物。

🐳 Docker 容器化的完美部署

C-Shopping 拥抱 Docker，使得项目的部署变得前所未有的简单。容器化技术让整个项目在不同环境中都能如鱼得水地运行。

🔄 Redux Toolkit 和 RTK Query 的状态管理艺术

C-Shopping 使用 Redux Toolkit 和 RTK Query，让状态管理变得更加轻松愉快。你可以更好地追踪应用中的数据流，确保购物体验的稳定性。

功能演示

现在，让我们来看看C-Shopping的一些基本功能。从清晰的导航和商品展示，到方便的搜索和购物车功能，每一个细节都经过精心设计，为用户提供愉悦的购物体验。

用户端

模块	Desktop devices	Mobile devices
首页
二级分类
三级分类
商品详情
登录
注册
搜索
购物车
支付页
个人中心
我的订单
我的评论
地址管理
近期访问

管理端

模块	Desktop devices	Mobile devices
登录
管理中心
用户管理
分类管理
分类管理树状
规格管理
商品管理
订单管理
评论管理
滑块管理
banner管理

项目结构

🏗️ C-Shopping 项目结构：

📂 c-shopping
  ├── 📁 app
  │   ├── 📁 main
  │   │   ├── 📁 client-layout
  │   │   ├── 📁 empty-layout
  │   │   ├── 📁 admin
  │   │   ├── 📄 layout.js
  │   │   └── 📁 profile
  │   ├── 📄 StoreProvider.js
  │   ├── 📁 api
  │   │   ├── 📁 auth
  │   │   ├── 📁 banner
  │   │   ├── 📁 category
  │   │   ├── 📁 details
  │   │   ├── 📁 order
  │   │   ├── 📁 products
  │   │   ├── 📁 reviews
  │   │   ├── 📁 slider
  │   │   ├── 📁 upload
  │   │   └── 📁 user
  │   ├── 📄 layout.js
  │   └── 📄 not-found.js
  ├── 📄 commitlint.config.js
  ├── 📁 components
  ├── 📄 docker-compose.yml
  ├── 📁 helpers
  │   ├── 📁 api
  │   ├── 📄 auth.js
  │   ├── 📁 db-repo
  │   ├── 📄 db.js
  │   ├── 📄 getQuery.js
  │   └── 📄 index.js
  ├── 📁 hooks
  ├── 📄 jsconfig.json
  ├── 📁 models
  ├── 📄 next.config.js
  ├── 📄 package-lock.json
  ├── 📄 package.json
  ├── 📄 postcss.config.js
  ├── 📂 public
  ├── 📁 store
  ├── 📁 styles
  ├── 📄 tailwind.config.js
  └── 📁 utils

主要结构解释：

• 📁 app: 应用程序的主要代码

  • 📁 main: 主要应用程序组件
    • 📁 client-layout: 用户端通用布局页面
    • 📁 empty-layout: 通用空白布局页面
    • 📁 admin: 管理端页面
    • 📄 layout.js: 主要布局配置
    • 📁 profile: 用户个人资料页面
  • 📄 StoreProvider.js: 全局状态管理提供者
  • 📁 api: API 请求相关路由
    • 📁 auth: 用户认证 API
    • 📁 banner: 广告横幅 API
    • 📁 category: 商品分类 API
    • ...

• 📁 components: 可复用的 React 组件

• 📁 helpers: 辅助函数和工具

  • 📁 api: API 请求相关的辅助函数
  • 📄 auth.js: 用户认证相关的辅助函数
  • ...

• 📁 hooks: 自定义 React hooks

• 📁 models: 数据模型定义

• 📁 public: 静态资源，如图片、字体等

• 📁 store: Redux 状态管理相关配置

  • 📁 services: RTK Query
  • 📁 slices: Redux Toolkit

• 📁 styles: 样式文件

• 📁 utils: 通用工具

• ...

这个结构旨在使项目组织有序，易于维护和扩展。每个部分都按照功能和职责进行划分，使团队成员更容易理解和协作。

部署与使用

开发环境

1. 通过在终端运行以下命令克隆或下载存储库:

   git clone https://github.com/huanghanzhilian/c-shopping.git
   

2. 使用npm或yarn安装项目依赖项:

   npm install
   

   or

   yarn
   

3. 修改.env的文件，在项目根目录，定义所需的环境变量。这个步骤是重要的（图片上传OSS）:

   NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
   NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
   NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
   NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
   NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
   NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
   

4. 在本地机器上安装MongoDB

5. 运行项目

   npm run dev 
   

6. 注册一个账户

   http://localhost:3000/register
   

7. 创建帐户后，在数据库中找到您的帐户，并将root字段修改为true。role字段修改为admin，这将授予您访问所有管理仪表板功能的权限

   http://localhost:3000/admin
   

8. 操作MongoDB，创建根分类

   mongo
   

   use choiceshop
   

   db.categories.insert({
   	"name" : "精选好物",
   	"slug" : "choiceshop",
   	"image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
   	"colors" : {
   		"start" : "#EF394E",
   		"end" : "#EF3F55"
   	},
   	"level" : 0
   })
   

docker 部署

项目根目录已经配置好docker compose，在安装docker环境后，直接运行部署

docker compose up -d --build

公众号

关注公众号获得更多资讯，有任何意见或建议都欢迎提issue，或者到公众号。

许可证

Apache License 2.0

MIT License

Copyright (c) 2024 Jipeng Huang

呼吁行动

C-Shopping是一个开源项目，欢迎更多的开发者加入我们的社区。你可以在我们的GitHub仓库中找到项目源码，提出建议或者一同参与开发。

如果你对项目感兴趣，欢迎加入我们的社区，一同为项目添砖加瓦。

希望周刊可以开通RSS订阅.
你可以利用Github仓库的Release，把周刊的内容同步到Release中，这样我就可以通过
https://github.com/OpenGithubs/weekly/releases.atom
来订阅。

背景

通过抓包我们可以发现 Github Copilot Chat 其实底层是调用 OpenAI 的 ChatGPT 接口，那么我们就可以将 Github Copilot Chat 的请求转换为 ChatGPT 请求。只要我们拥有 Github Copilot 账号，就能无限制使用 ChatGPT 的 GPT-4 模型。

实现原理

源码地址

https://github.com/aaamoon/copilot-gpt4-service

使用方法

1、访问 https://gpt4copilot.tech

2、在设置的接口地址填入本仓库项目部署出来的api地址 https://gpt4copilot.tech

3、在API Key中填入Github Copilot Token（可以通过copilot-token接口来获取，Token的格式是以ghu_开头）

4、支持各种OpenAI模型选择，目前默认使用的是GPT-4模型

5、接下来我们就可以无限制使用GPT-4模型了~

开源项目自荐模版

1).项目名称：...

2).项目地址： ....

3).项目简介 (100 字以内)：

4).推荐原因:

5)项目图片：介绍图、流程图、架构图 等等都可以

项目介绍:
采用插件化架构的框架设计，宿主程序仅提供基础功能，载入外部扩展jar插件以满足个人定制扩展功能

https://github.com/meteorOSS/wechat-bc

项目介绍：一款基于 AI 的「浏览器翻译插件」，可以基于大语言模型对页面文字进行翻译，帮助使用者能够流畅阅读网页。目前支持的 AI 大模型包括 ChatGPT 、Gemini、moonshot、通义千问、智谱清言、文心一言，插件免费、开源，适用于页面文字翻译与语言学习。

开源地址：https://github.com/Bistutu/FluentRead

京墨』开源、免费、公益性 APP。献给喜欢中华文字、文学、文化的人。

目前的内容有：

1. 古诗词文 10000 首（阙、篇）；

2. 古诗词文名句 10000 句；

3. 歇后语 14026 条；

4. 成语 30895 条；

5. **传统色 161 种；

6. **传统节日 19 个；

7. 二十四节气；

8. 绕口令 45 段；

9. 知识卡片 464 组；

源码仓库：

https://github.com/hefengbao/jingmo

https://gitee.com/hefengbao/jingmo

项目地址

https://github.com/OXeu/Rin

简介

Rin 是一个基于 Cloudflare Pages + Workers + D1 + R2 的博客项目，无需服务器无需备案，只需要一个解析到 Cloudflare 的域名即可部署

演示地址

xeu.life

特性

1. 使用 Github OAuth 登录
2. 支持文章的写作与编辑
3. 支持本地实时保存对任意文章的修改/编辑且多篇文章互不干扰
4. 支持设置为仅自己可见，可以充当云端同步的草稿箱或者记录隐私性较强的内容
5. 支持拖拽/粘贴上传图片到支持 S3 协议的存储桶并生成链接
6. 支持设置文章别名，可通过形如 https://xeu.life/about 链接访问文章
7. 支持文章不列出在首页列表中
8. 支持添加友链，同时后端每间隔 20 分钟定期检查更新友链可访问状态
9. 支持回复评论文章/删除评论
10. 支持通过 Webhook 发送评论通知
11. 支持自动识别文章中的第一张图片并作为头图展示在文章列表中
12. 支持输入形如"#博客 #部署 #Cloudflare"之类的标签文本并自动解析为标签
13. 支持夜间模式切换与跟随系统

求问大佬

项目名称：XIAOJUSURVEY
项目地址：https://github.com/didi/xiaoju-survey
官网地址：https://xiaojusurvey.didi.cn/

项目介绍

XIAOJUSURVEY是一套轻量、安全的问卷系统，提供面向个人和企业的一站式产品级解决方案，快速满足各类线上调研场景。

内部系统已沉淀40+种题型，累积精选模板100+，适用于市场调研、客户满意度调研、在线考试、投票、报道、测评等众多场景。数据能力上，经过上亿量级打磨，沉淀了分题统计、交叉分析、多渠道分析等在线报表能力，快速满足专业化分析。

开源项目以打造调研基座为核心，围绕平台能力、工程架构、研发体系进行建设，大家可以「快速」打造「专属」问卷系统：快速了解生态发展理念和发展计划。

项目技术

前后端全开源：
前端：Vue3、跨端（在建）
后端：Node、Java（在建）
智能化基座：（在建）

项目特性

一、具备全面的综合性和专业性
制定了问卷标准化协议规范
领域标准保障概念互通，是全系统的基础和核心。基于实际业务经验，沉淀了两大类：
业务描述：问卷协议、题型协议
物料描述：题型物料协议，包含题型和设置器
制定了问卷UI/UX规范
设计语言是系统灵活性、一致性的基石，保障系统支撑的实际业务运转拥有极高的用户体验。包含两部分：
设计规范：灵活、降噪、统一
交互规范：遵循用户行为特征，遵循产品定位，遵循成熟的用户习惯
所见即所得，搭建渲染一致性高
实际业务使用上包含问卷生成和投放使用，即对于系统的搭建端和渲染端。我们将题型场景化设计，以满足一份问卷从加工生产到投放应用的高度一致。
题型物料化设计，自由定制扩展
题型是问卷最核心的组成部分，而题型可配置化能力决定了上层业务可扩展的场景以及系统自身可复用的场景。 题型架构设计上，主打每一类题型拥有通用基础能力，每一种题型拥有原子化特性能力，并保障高度定制化。
合规建设沉淀积累，安全能力拓展性高
数据加密传输、敏感信息精细化检测、投票防刷等能力，保障问卷发布、数据回收链路安全性。

二、轻量化设计，快速接入、灵活扩展
产品级开源方案，快速产出一套调研流程
围绕问卷生命周期提供了完整的产品化能力，包含用户管理: 登录、注册、问卷权限，问卷管理: 创、编、投、收、数据分析，可快速构建特定领域的调研类解决方案。
问卷设计开箱即用，降低领域复杂度
问卷组成具有高灵活性，此业务特征带来问卷编辑能力的高复杂性设计。我们将问卷编辑划分为五大子领域，进行产品能力聚类，同时指导系统模块化设计和开发。基于模块编排和管理，能够开箱即用。
二次开发成本低，轻松定制专属调研系统
全系统设计原则基于协议标准化、功能模块化、管理配置化，并提供了一些列完整的文档和开发及扩展手册。
部署成本低，快速上线
前后端分离，提供Docker化方案，提供了完善的部署指导手册。

部分内容展示

1).项目名称：VersionFox

2).项目地址：https://github.com/version-fox/vfox

3).项目简介 (100 字以内)：VersionFox 是一款用于管理 SDK 版本的跨平台工具。通过它，您可以使用命令行在不同版本的 SDK 之间快速安装和切换。VersionFox提供了简单高效的插件系统, 允许您自定义自己的拓展脚本.

4).推荐原因: 每种编程语言都有对应的版本管理工具，如nvm、fvm、gvm、sdkman等，它们的核心功能大同小异。对于开发者来说，这意味着需要学习和记忆各种不同的命令，增加了学习成本。通过VersionFox，可以无需再学习这些繁杂的工具，从而降低学习成本，节省时间。

5)项目图片：

这是以Node为例的演示视频

项目名称：Infinity

项目地址： https://github.com/infiniflow/infinity

项目简介 (100 字以内)：

AI 原生数据库 Infinity 是一款全新的专为大模型服务的数据库。提供了向量检索、全文检索、结构化数据检索在内的搜索能力，可以为包括搜索、推荐系统、问答机器人、对话 AI、copilot、内容生成以及许多其他的 RAG（检索增强的内容生成）应用提供强大的支持。

项目截图 (6张以内)：

• 项目名称：Magic-Byte

• 项目地址： https://github.com/MisterChangRay/magic-byte

• 项目简介 (100 字以内)：
  在当代物联网行业中，由于隐私和安全问题，很多的公司选择使用自定义的私有二进制协议。 在C语言中，由于有结构体的加持，对象和字节数组转换起来就特别简单；但在java中，在没有原生支持的情况下，开发人员就只能够靠码力去读取解析数据然后转译成为对象

• 项目截图 (6张以内)：
  

• 项目名称：开源书籍《深入架构原理与实践》
• 项目地址：https://github.com/isno/theByteBook/
• 项目简介：深入讲解内核网络、Kubernetes、ServiceMesh、容器技术、分布式概论等现代化架构技术。也是经历实践检验的 DevOps、SRE 指南。
• 项目截图 ：