@proteus-vue/create-proteus 0.3.0-beta.32 → 0.3.0-beta.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteus-vue/create-proteus",
-  "version": "0.3.0-beta.32",
+  "version": "0.3.0-beta.33",
   "description": "Proteus 脚手架：npm create @proteus-vue/proteus my-app —— 一键生成 Web + 微信小程序（Skyline）双端工程",
   "type": "module",
   "license": "Apache-2.0",

package/templates/package.json

@@ -10,6 +10,15 @@
     "dev:mp": "proteus dev --target skyline",
     "build:mp": "proteus build --target skyline",
     "debug:mp": "PROTEUS_DEBUG=1 proteus build --target skyline",
+    "dev:android": "proteus dev --target android",
+    "build:android": "proteus build --target android",
+    "package:android": "proteus build --target android --package",
+    "dev:ios": "proteus dev --target ios",
+    "build:ios": "proteus build --target ios",
+    "package:ios": "proteus build --target ios --package",
+    "dev:harmony": "proteus dev --target harmony",
+    "build:harmony": "proteus build --target harmony",
+    "package:harmony": "proteus build --target harmony --package",
     "proteus": "proteus"
   },
   "dependencies": {

package/templates/proteus.config.ts

@@ -9,6 +9,9 @@ const config: ProteusConfig = {
     mp: {
       appid: 'wx0000000000', // 替换为真实 AppID
       renderer: 'skyline',
+      // ★全局样式（设计令牌 + 页面基线）：小程序端 → app.wxss；Web 端在 src/main.ts import；
+      //   App 端构建期折进节点样式（一份文件、四端一致——详见 src/styles/global.css）
+      globalStyle: 'src/styles/global.css',
       // ★底线循环 ①③：规则覆盖（改这里立即改变编译行为）
       rules: {
         disabled: [],

package/templates/src/main.ts

@@ -1,5 +1,7 @@
 // src/main.ts —— Web 端入口（Web 原生、零转换：标准 Vue SPA）
 import { createApp } from 'vue'
 import App from './App.vue'
+// 全局样式（与小程序端 app.wxss / App 端编译期折叠**同一份**——proteus.config 的 globalStyle）
+import './styles/global.css'
 
 createApp(App).mount('#app')

package/templates/src/pages/index.vue

@@ -1,4 +1,10 @@
-<!-- src/pages/index.vue —— 首页（路由页面：编译期由 gen-routes 扫描注册） -->
+<!-- src/pages/index.vue —— 首页（路由页面：编译期由 gen-routes 扫描注册，写入 router/auto-routes.ts）
+
+     设计基准：与仓库 css-conformance（全端对齐验收项目）同一套写法——
+       · 原始标签（div / h1 / p / button），不依赖内置组件；
+       · 跨端一致性靠：静态 class（编译期折叠到各端节点）+ 设计令牌
+         （src/styles/global.css 的 :root，App 端编译期展开）+ 满宽页根。
+     » 本文件就是「一份标准 Vue 源码 → 多端真实渲染」的最小样例，可直接改成你的页面。 -->
 <route>
 {
   "meta": {
@@ -7,27 +13,178 @@
   }
 }
 </route>
+
 <script setup lang="ts">
 import { ref } from 'vue'
 
+// 唯一的动态状态：交互演示的计数。
+// ★四端一致：点击实时更新（App 端走内联动作 → 运行期 handler；方法引用 @click="fn" 在 App 端不产出事件）。
 const count = ref(0)
-
-function handleTap() {
-  count.value++
-}
 </script>
 
 <template>
-  <div class="home">
-    <h1>Hello Proteus</h1>
-    <p class="tapped-count">tapped {{ count }} times</p>
-    <button @click="handleTap">tap</button>
+  <div class="page">
+    <!-- ① 品牌区 -->
+    <div class="hero">
+      <div class="badge">PROTEUS</div>
+      <h1 class="hero-title">一次编写，多端运行</h1>
+      <p class="hero-sub">一份标准 Vue 源码，编译到小程序与 App 全端。</p>
+    </div>
+
+    <!-- ② 关键数字 -->
+    <div class="stats">
+      <div class="stat">
+        <div class="stat-value">5</div>
+        <div class="stat-label">目标端</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">1</div>
+        <div class="stat-label">份源码</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">0</div>
+        <div class="stat-label">条件编译</div>
+      </div>
+    </div>
+
+    <!-- ③ 交互演示（验证响应式多端一致） -->
+    <h2 class="section-title">交互演示</h2>
+    <div class="card">
+      <p class="card-desc">点一下，计数实时更新 —— 同一份逻辑在 Web / 小程序 / App 表现一致。</p>
+      <button class="btn" @click="count++">点我 +1</button>
+      <div class="counter">已点击 {{ count }} 次</div>
+    </div>
+
+    <!-- ④ 下一步 -->
+    <h2 class="section-title">下一步</h2>
+    <div class="card step">
+      <div class="step-title">配置目标端</div>
+      <p class="step-desc">在 proteus.config.ts 里设置小程序 AppID 与 App 包名。</p>
+    </div>
+    <div class="card step">
+      <div class="step-title">换成你的界面</div>
+      <p class="step-desc">本页就是普通 Vue SFC —— 直接改 template 与 style 即可。</p>
+    </div>
+    <div class="card step">
+      <div class="step-title">构建到各端</div>
+      <p class="step-desc">npm run build:mp / build:android / build:ios / build:harmony。</p>
+    </div>
   </div>
 </template>
 
 <style>
-.home {
+/* 页面级样式：静态 class + 设计令牌（var(--x) 指向 global.css 的 :root）。
+   编译期折叠到各端节点（App 端 var() 展开为具体值）——四端一致。
+   不使用 :hover / 伪类等 App 端尚不支持的选择器。
+   ↓↓↓ 换成你的品牌色 / 主题：改 src/styles/global.css 的 :root 即可。 */
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 8px 0 4px;
+}
+
+.badge {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  color: var(--brand);
+  background-color: var(--brand-soft);
+  border-radius: 6px;
+  padding: 4px 8px;
+}
+
+.hero-title {
+  display: block;
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1.3;
+  color: var(--text);
+  margin: 14px 0 0;
+}
+
+.hero-sub {
+  display: block;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-2);
+  margin: 8px 0 0;
+}
+
+.stats {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.stat {
+  flex: 1;
+  background-color: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 16px 8px;
+}
+
+.stat-value {
+  display: block;
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--brand);
+  text-align: center;
+}
+
+.stat-label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-3);
+  text-align: center;
+  margin-top: 4px;
+}
+
+.card-desc {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-2);
+  margin: 0 0 12px;
+}
+
+.btn {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  background-color: var(--brand);
+  border-radius: 12px;
+  padding: 13px 20px;
   text-align: center;
-  padding: 48px 0;
+  width: 100%;
+}
+
+.counter {
+  font-size: 13px;
+  color: var(--text-3);
+  text-align: center;
+  margin-top: 12px;
+}
+
+.step {
+  margin-bottom: 10px;
+}
+
+.step-title {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.step-desc {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-2);
+  margin: 4px 0 0;
 }
 </style>

package/templates/src/styles/global.css

@@ -0,0 +1,57 @@
+/* src/styles/global.css —— 全局样式（设计令牌 + 页面骨架）
+   ═══════════════════════════════════════════════════════════════════════════════
+   【四端消费同一份】
+     · Web   —— src/main.ts 里 `import './styles/global.css'`
+     · 小程序 —— proteus.config.ts 的 targets.mp.globalStyle（→ app.wxss）
+     · App   —— 构建期把这里的 `:root` 令牌与 `.class` 规则**折进**各节点样式
+                （App 端无运行时 CSS 引擎，`var()` 在编译期展开为具体值）
+   ⇒ 一份文件、四端一致，无需为任何端分叉。
+
+   本写法（`:root` 令牌 + 静态 class + var()）与仓库 css-conformance（全端对齐验收项目）
+   同一套，已在四端验证。改主题：只改下面 :root 的值。
+   ═══════════════════════════════════════════════════════════════════════════════ */
+
+/* 根重置：浏览器 body 默认 margin 8px 会让灰底四周露白（App / 小程序无此概念）——统一清零。 */
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+/* 设计令牌（全局主题变量）——改这里即可全局换肤 */
+:root {
+  --brand: #4f46e5;
+  --brand-soft: #ede9fe;
+  --bg: #f5f6f8;
+  --surface: #ffffff;
+  --line: #e6e8ec;
+  --text: #16181d;
+  --text-2: #5b616e;
+  --text-3: #8b909c;
+}
+
+/* 页面骨架：满宽 + 安全区避让（App 端状态栏/手势条由 --pf-inset-* 提供，Web/小程序取 0）。 */
+.page {
+  width: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  background-color: var(--bg);
+  padding: calc(var(--pf-inset-top, 0px) + 20px) 16px calc(var(--pf-inset-bottom, 0px) + 40px);
+}
+
+/* 卡片：真实业务里最常见的容器形态（列表项 / 面板 / 区块） */
+.card {
+  background-color: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 16px;
+}
+
+/* 区块小标题 */
+.section-title {
+  display: block;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 24px 0 12px;
+}