From 139d2db5f922ec8fc0cb1f71c60233115a08be67 Mon Sep 17 00:00:00 2001 From: zhangjianjun Date: Wed, 15 Jul 2026 09:43:49 +0800 Subject: [PATCH] ud --- CLAUDE.md | 47 --------- GEMINI.md | 165 ------------------------------ src/pages/landing/index.config.ts | 2 +- src/pages/landing/index.tsx | 17 ++- 4 files changed, 7 insertions(+), 224 deletions(-) delete mode 100644 CLAUDE.md delete mode 100644 GEMINI.md diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index 4d338a6..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,47 +0,0 @@ -# CLAUDE.md - -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - -`corp-mp` is a **Taro 4.2** cross-platform app (React 18 + TypeScript + SCSS, compiled with **Vite**). The primary target is the WeChat mini-program (`weapp`); Taro also compiles it to H5, Alipay, Swan, TT, QQ, JD, RN, and Harmony. - -## Commands - -Package manager is **pnpm** (a `pnpm-lock.yaml` is committed). - -```bash -pnpm install # install deps -pnpm dev:weapp # WeChat mini-program dev build with --watch → ./dist -pnpm build:weapp # production mini-program build → ./dist -pnpm dev:h5 / build:h5 # H5 target -``` - -Other targets follow `pnpm dev:` / `pnpm build:` (`alipay`, `swan`, `tt`, `qq`, `jd`, `rn`, `harmony-hybrid`). - -**Running the mini-program:** builds output to `./dist`. Open `./dist` in WeChat DevTools (`project.config.json` already points `miniprogramRoot` there; appId `wx6d4f6f29c41aff93`). - -**There is no test runner and no lint script in `package.json`.** ESLint (`taro/react`) and Stylelint are configured but run manually. The only enforced gate is a Husky `commit-msg` hook running **commitlint** (Conventional Commits) — non-conforming commit messages are rejected. - -## Architecture - -The app is a thin native shell around a business H5, with a native payment bridge. Two pages, registered in `src/app.config.ts`: - -**1. `pages/index/index.tsx` — auth + WebView host.** On load it calls `Taro.login()` to get the WeChat `code`, then renders a full-screen `` pointing at the business H5 (`http://niubsw.com/...?mpCode=`). All business UI lives in that remote H5, not in this repo. - -**2. `pages/pay/index.tsx` — native payment bridge.** The H5 cannot invoke WeChat JSAPI pay while running inside the mini-program WebView, so it hands off to this native page. The handoff contract: - - The H5 detects it's inside the mini-program and calls `wxSdk.miniProgram.navigateTo({ url: '/pages/pay/index?order=&formInfo=' })`. - - Params are **base64-encoded JSON**, produced H5-side by `utf8ToBase64(v) = btoa(unescape(encodeURIComponent(JSON.stringify(v))))`. - - `order` already contains the complete WeChat JSAPI fields (`timeStamp`/`nonceStr`/`package`/`signType`/`paySign`). The page decodes it, auto-fires `Taro.requestPayment`, then `navigateBack()`s to the H5 on success. No backend call is made here. - - `temp.txt` (repo root) holds the H5-side snippet documenting this contract — keep the two sides in sync. - -**`src/utils/base64.ts`** is the strict inverse of the H5 encoder. It hand-rolls a base64 decoder because **weapp has no global `atob`**, and normalizes `+`→space mangling from URL routing. Reuse `decodeOrderParam(raw)` for any future base64 route params. - -## Conventions - -- **Page = folder** under `src/pages//` with `index.tsx` + `index.scss` + `index.config.ts`. New pages **must** be added to the `pages` array in `src/app.config.ts` or they won't route. -- **Lifecycle:** use Taro hooks — `useLoad` for page init (reads route params via `Taro.getCurrentInstance().router?.params`), `useLaunch` for app init — not bare `useEffect`. -- **Native API calls must be env-guarded:** wrap `weapp`-only APIs (e.g. `Taro.requestPayment`) in `if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP)` with a fallback branch for other targets. -- **Styling:** SCSS with BEM (`block__element--modifier`); CSS Modules are disabled. Design width is `750`, so author dimensions in `px` — Taro converts to `rpx`/`rem` at compile time. -- **Imports:** `@/*` is aliased to `src/*` (see `tsconfig.json`). -- `strictNullChecks`, `noUnusedLocals`, and `noUnusedParameters` are on; `noImplicitAny` is off. - -A more verbose Chinese-language version of these notes lives in `GEMINI.md`. diff --git a/GEMINI.md b/GEMINI.md deleted file mode 100644 index 7d088e9..0000000 --- a/GEMINI.md +++ /dev/null @@ -1,165 +0,0 @@ -# GEMINI.md - 项目开发规范与上下文指南 - -本文件是 `corp-mp` 项目的基础开发规范与指令上下文，用于指导未来 AI 助手及团队成员的高效协作。 - ---- - -## 1. 项目概述 - -`corp-mp` 是一个基于 **Taro 4.2.0** 跨端开发框架构建的移动端/小程序项目，核心技术栈为 **React 18 + TypeScript + SCSS + Vite**。 - -### 核心功能模块 -1. **微信快捷授权与 WebView 承载 (`pages/index/index`)**： - - 页面加载时自动调用 `Taro.login()` 获取微信授权 `code`（即 `wxCode`）。 - - 将 `code` 作为 Query 参数拼接至特定业务 H5 URL（例如 `mpCode=xxx`），使用 `` 组件进行全屏承载。 -2. **模拟微信原生支付 (`pages/pay/index`)**： - - 接收后端支付预订单数据。 - - 在微信小程序环境下安全调用 `Taro.requestPayment` 发起微信官方原生支付。 - - 提供优雅的支付状态管理（准备、支付中、支付成功、取消、失败等）和完备的异常捕获与友好提示。 - ---- - -## 2. 环境依赖与包管理 - -- **包管理器**：推荐且必须使用 **`pnpm`**（根目录下存在 `pnpm-lock.yaml`）。 -- **Node.js 版本**：建议使用 Node.js v18 或更高版本。 -- **运行框架**：Taro 4.2.0。 -- **构建编译工具**：Vite 4.x (`@tarojs/vite-runner`)。 - ---- - -## 3. 核心命令指南 - -在执行命令前，请确保已全局安装了 `pnpm`。 - -### 3.1 依赖安装 -```bash -pnpm install -``` - -### 3.2 微信小程序开发与编译 -```bash -# 本地开发（带热更新监听） -pnpm dev:weapp - -# 生产环境打包构建 -pnpm build:weapp -``` -> **提示**：编译产物将默认输出至根目录下的 `/dist` 目录。在微信开发者工具中，应将项目根目录或指定小程序根目录指向该 `/dist`。 - -### 3.3 H5/Web 端开发与编译 -```bash -# 本地 H5 开发 -pnpm dev:h5 - -# 生产 H5 打包 -pnpm build:h5 -``` - -### 3.4 其它跨端支持 -项目同样提供了对百度小程序 (`swan`)、支付宝小程序 (`alipay`)、字节小程序 (`tt`)、QQ 小程序 (`qq`)、京东小程序 (`jd`)、React Native (`rn`)、鸿蒙 Hybrid (`harmony-hybrid`) 等多端编译指令，其格式均为 `pnpm dev:` 或 `pnpm build:`。 - ---- - -## 4. 目录结构解析 - -```text -D:\frontendProject\corp-mp\ -├───config\ # Taro 编译配置文件目录 -│ ├───dev.ts # 开发环境特定配置 -│ ├───index.ts # 公共基础配置（Vite 编译器、设计稿尺寸等） -│ └───prod.ts # 生产环境特定配置 -├───dist\ # 编译后的输出目录（不可提交至 Git） -├───src\ # 源代码主体目录 -│ ├───app.config.ts # 小程序全局应用配置（包括页面路由 pages、window 样式等） -│ ├───app.scss # 全局公共样式文件 -│ ├───app.ts # 小程序生命周期与应用入口 -│ ├───index.html # H5 编译使用的 HTML 模版 -│ └───pages\ # 页面模块目录 -│ ├───index\ # 授权 WebView 页面 -│ │ ├───index.config.ts # 页面特定配置 -│ │ ├───index.scss # 页面样式（BEM 命名） -│ │ └───index.tsx # 页面逻辑代码 -│ └───pay\ # 微信支付页面 -│ ├───index.config.ts -│ ├───index.scss -│ └───index.tsx -├───types\ # TypeScript 全局声明目录 -│ └───global.d.ts # Taro 相关的全局补丁与自定义声明 -├───.env.development # 开发环境变量（如 TARO_APP_ID、BASE_URL） -├───.env.production # 生产环境变量 -├───.env.test # 测试环境变量 -├───project.config.json # 微信开发者工具项目配置文件 -├───tsconfig.json # TypeScript 配置 -├───.eslintrc # ESLint 配置（继承 taro/react） -├───stylelint.config.mjs # Stylelint CSS/SCSS 样式规范配置 -└───commitlint.config.mjs # Git Commit 规范约束配置 -``` - ---- - -## 5. 开发与编码守则 - -### 5.1 React 18 编写规范 -1. **函数式组件优先**：所有页面和组件均采用 Function Component 与 React Hooks 风格。 -2. **Taro 专属生命周期 Hooks**： - - 页面加载逻辑使用 `useLoad`（而非普通的 `useEffect`），用于准确捕获页面入参和执行初始化。 - - 应用启动钩子使用 `useLaunch`。 -3. **状态声明与操作**： - - 保持 state 尽量扁平，避免无谓的深层嵌套。 - - 在进行非安全型异步操作（如接口请求、支付拉起）时，务必伴随 `loading` 状态的管理，防止用户重复触发。 - -### 5.2 样式规范 -1. **SCSS 与 BEM 命名法**： - - 为避免多端渲染时的类名冲突，样式推荐采用传统的 **BEM (Block-Element-Modifier)** 规范进行书写。 - - 示例： - ```scss - .pay-page { - .pay-card { - &--success { color: green; } - &--failed { color: red; } - } - .pay-row { - &__label { font-weight: bold; } - &__value { color: #333; } - } - } - ``` -2. **移动端自适应**： - - 默认设计稿尺寸为 `750px`（在 `config/index.ts` 中设定了 `designWidth: 750`）。 - - 在编写 CSS 时，所有尺寸可以直接编写 `px`，Taro 在编译时会根据配置自动将其转换为 `rpx` (小程序端) 或 `rem` (H5 端)。 - -### 5.3 多端兼容安全调用 -在调用一些微信/小程序特有的原生 API（如 `Taro.requestPayment`）时，务必先通过环境判断确保执行安全： -```typescript -if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) { - // 仅在微信小程序环境下执行 - await Taro.requestPayment(...) -} else { - // 其它环境降级或模拟逻辑 -} -``` - -### 5.4 代码校验与规范化 -项目配置了严苛的 Lint 和 Git 提交约束，提交前请确保代码不报错： -- **ESLint 校验**：继承自 `taro/react`，并在其中免除了 `react-in-jsx-scope` 限制（允许不显式 `import React`）。 -- **Stylelint 校验**：保持 SCSS 代码的整洁性。 -- **Commit 规范**：使用 Husky + Commitlint。在进行 Git 提交时，Commit 消息必须严格遵守 Conventional Commits 规范（如 `feat: 新增支付渠道`, `fix: 修复支付状态未更新` 等），否则会导致提交失败。 - ---- - -## 6. 新增页面/组件工作流 - -1. **新建页面目录**：在 `src/pages/` 下新建页面文件夹（如 `src/pages/member/`），并准备 `index.tsx`、`index.scss`、`index.config.ts`。 -2. **注册路由**：在 `src/app.config.ts` 的 `pages` 数组中添加页面路径。 - ```typescript - export default defineAppConfig({ - pages: [ - 'pages/index/index', - 'pages/pay/index', - 'pages/member/index', // 新增 - ], - // ... - }) - ``` -3. **保持状态与路由极简**：对于非必要的全局状态，尽量维持页面局部 State，避免全局状态污染。 diff --git a/src/pages/landing/index.config.ts b/src/pages/landing/index.config.ts index 64fd653..cb6951f 100644 --- a/src/pages/landing/index.config.ts +++ b/src/pages/landing/index.config.ts @@ -1,5 +1,5 @@ export default definePageConfig({ - navigationBarTitleText: '门店管理服务', + navigationBarTitleText: '门店企业标注快办', navigationBarBackgroundColor: '#05256e', navigationBarTextStyle: 'white', backgroundColor: '#f3f7ff', diff --git a/src/pages/landing/index.tsx b/src/pages/landing/index.tsx index c7208d6..7ecbd2a 100644 --- a/src/pages/landing/index.tsx +++ b/src/pages/landing/index.tsx @@ -12,20 +12,15 @@ const INDUSTRIES = [ ] const SERVICES = [ - { - mark: '关', - name: '公关', - description: '协助门店沟通与活动协调', - }, { mark: '推', name: '推广', - description: '支持门店推广与现场执行', + description: '为门店推广提供支持', }, { - mark: '调', - name: '市场调查', - description: '开展门店走访、信息采集与反馈', + mark: '曝', + name: '门店曝光', + description: '提高门店曝光量', }, ] @@ -64,9 +59,9 @@ export default function Landing () { - 门店管理服务 + 门店企业标注快办 - 面向百货、超市与便利店，提供公关、推广与市场调查服务。 + 面向百货、超市与便利店，提供门店企业标注快办服务。