Skip to content

新增站点(前端开发版)

先确认你要做哪种站,再选对应模板。

两种站点

电商站咨询站
能干什么浏览商品、加购物车、下单、支付展示页面,纯内容
技术栈Vue 3 + Vite + Pinia纯 HTML
后端需要 API(pk-order-hub)不需要
模板bazaar.techconsult.sitedeals.techconsult.site
新增耗时~15 分钟~5 分钟

前提

  • Node.js ≥ 18
  • pnpm(npm i -g pnpm
  • GitLab 仓库权限

A. 新增电商站

1. 复制模板

bash
cd sites
cp -r bazaar.techconsult.site mydomain.techconsult.site
cd mydomain.techconsult.site
rm -rf node_modules dist .wrangler .gitignore

pnpm install

2. 改品牌信息

编辑 src/config/brand.js

js
export const brandConfig = {
  name: 'mydomain.techconsult.site',
  displayName: 'My Store Name',
  domain: 'mydomain.techconsult.site',

  contact: {
    email: 'info@mydomain.techconsult.site',
    support: 'support@mydomain.techconsult.site',
    phone: '+92 XXX XXXXXXX',
    address: 'City, Pakistan',
  },

  company: {
    name: 'YOUR COMPANY NAME',
    group: 'your-group',       // 和 registry.json 一致
    tagline: 'Your tagline',
  },

  navigation: [
    { label: 'Home', path: '/' },
    { label: 'Shop', path: '/shop' },
    { label: 'Contact', path: '/contact' },
  ],
}

3. 填商品

编辑 src/product.json

json
[
  {
    "id": 1,
    "name": "Product Name",
    "price": "Rs. 2,499",
    "priceValue": 2499,
    "category": "electronics",
    "image": "https://images.unsplash.com/photo-xxxxx?w=600",
    "description": "Description in English.",
    "features": ["Feature 1", "Feature 2"]
  }
]

图片用 Unsplash 直链即可,?w=600 控制宽度。

4. 本地验证

bash
pnpm dev       # 开发服务器
pnpm build     # 确认构建通过

B. 新增咨询站

1. 复制模板

bash
cd sites
cp -r deals.techconsult.site mydomain.techconsult.site

2. 改内容

直接编辑 index.html,替换文案、logo、联系信息。不需要装依赖,不需要 build。

3. 本地预览

bash
open index.html

共同步骤

注册站点

编辑项目根目录 sites/registry.json,加一条:

json
{ "domain": "mydomain.techconsult.site", "company": "your-group", "status": "wip", "deployed": false }

提交

bash
git add sites/mydomain.techconsult.site sites/registry.json
git commit -m "feat: add mydomain.techconsult.site"
git push

提交后告诉我,我来部署。

红线

  • 所有文案、注释、commit 用英文
  • 价格统一 Rs.(PKR),不要用 $ 或 ¥
  • 电商站固定支付:JazzCash / Easypaisa / COD,不需要改支付逻辑
  • 订单状态显示 "Order Processing / Awaiting Review",禁止显示 "Order Success"
  • 移动端优先

我需要做的事(提交后我来)

  • Cloudflare Pages 新建项目
  • DNS 解析 → CF Pages
  • CF Tunnel 加 api.{domain} → 服务器(仅电商站)
  • node scripts/deploy-web.mjs <domain>

PK 电商站群内部台账