create-weapp-vite 2.0.46 → 2.0.48

package/templates/wevu/src/packageB/pages/settings/index.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed } from 'wevu'
+import { useRoute, useRouter } from 'wevu/router'
+
+definePageJson({
+  navigationBarTitleText: '系统设置',
+})
+
+const HOME_PATH = '/pages/index/index'
+const OVERVIEW_PATH = '/pages/overview/index'
+
+const route = useRoute()
+const router = useRouter()
+
+const routeSummary = computed(() => route.fullPath || `/${route.path}`)
+
+const settingGroups = [
+  {
+    title: '通知策略',
+    description: '预留站内消息、邮件提醒和审批通知等配置位置。',
+  },
+  {
+    title: '角色权限',
+    description: '适合接入组织结构、角色分级与操作授权等业务能力。',
+  },
+  {
+    title: '环境信息',
+    description: '可以继续扩展版本号、发布通道和系统参数等正式模块。',
+  },
+]
+
+async function relaunchHome() {
+  await router.nativeRouter.reLaunch({
+    url: HOME_PATH,
+  })
+}
+</script>
+
+<template>
+  <view class="page">
+    <view class="card">
+      <view class="card__eyebrow">
+        Settings
+      </view>
+      <view class="card__title">
+        系统设置
+      </view>
+      <view class="card__desc">
+        独立分包适合作为设置、配置或低频但相对独立的业务模块承载区。
+      </view>
+      <view class="card__summary">
+        当前路由：{{ routeSummary }}
+      </view>
+    </view>
+
+    <view
+      v-for="item in settingGroups"
+      :key="item.title"
+      class="panel-wrap"
+    >
+      <InfoPanel
+        eyebrow="SETTING"
+        :title="item.title"
+        :description="item.description"
+      />
+    </view>
+
+    <button class="action-btn" @tap="router.push(OVERVIEW_PATH)">
+      查看运营概览
+    </button>
+    <button class="action-btn action-btn--ghost" @tap="relaunchHome">
+      reLaunch 回业务门户
+    </button>
+  </view>
+</template>
+
+<style>
+.page {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 34rpx 30rpx;
+  background:
+    radial-gradient(circle at top left, rgb(148 163 184 / 14%), transparent 26%),
+    linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
+}
+
+.card {
+  padding: 30rpx 28rpx;
+  background: #fff;
+  border: 2rpx solid #cbd5e1;
+  border-radius: 30rpx;
+  box-shadow: 0 16rpx 36rpx rgb(15 23 42 / 5%);
+}
+
+.card__eyebrow {
+  font-size: 22rpx;
+  font-weight: 600;
+  color: #475569;
+}
+
+.card__title {
+  margin-top: 10rpx;
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.card__desc,
+.card__summary {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  line-height: 1.6;
+  color: #475569;
+}
+
+.panel-wrap {
+  margin-top: 18rpx;
+}
+
+.action-btn {
+  margin-top: 18rpx;
+  color: #fff;
+  background: #0f172a;
+  border-radius: 999rpx;
+}
+
+.action-btn--ghost {
+  color: #0f172a;
+  background: #e2e8f0;
+}
+</style>

package/templates/wevu/src/pages/index/index.vue

@@ -1,268 +1,130 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'wevu'
-
-interface HelloActionPayload {
-  type: 'toggle' | 'copy' | 'select' | 'stats'
-  value?: string
-}
-
-type HighlightTone = 'up' | 'down' | 'flat'
-
-interface HighlightItem {
-  key: string
-  label: string
-  value: string | number
-  tone?: HighlightTone
-  note?: string
-}
+import { computed } from 'wevu'
+import { useRoute, useRouter } from 'wevu/router'
 
 definePageJson({
-  navigationBarTitleText: '首页示例',
+  navigationBarTitleText: '业务门户',
 })
 
-const count = ref(0)
-const message = ref('Hello WeVU!')
-const activeGroup = ref('概览')
+const HOME_PATH = '/pages/index/index'
+const OVERVIEW_PATH = '/pages/overview/index'
+const WORKSPACE_PATH = '/packageA/pages/workspace/index'
+const SETTINGS_PATH = '/packageB/pages/settings/index'
 
-const todos = ref([
-  {
-    id: 'sfc',
-    title: '自动编译 SFC 到小程序四件套',
-    group: 'template' as const,
-    done: true,
-    level: 'advanced' as const,
-  },
-  {
-    id: 'components',
-    title: '自动注入 usingComponents 与组件类型提示',
-    group: 'template' as const,
-    done: true,
-    level: 'base' as const,
-  },
+const route = useRoute()
+const router = useRouter()
+const routeSummary = computed(() => route.fullPath || `/${route.path}`)
+
+const metrics = [
+  { label: '本周跟进事项', value: '12', detail: '含 3 项需今日确认' },
+  { label: '交付进度', value: '86%', detail: '版本提测准备完成' },
+  { label: '服务可用率', value: '99.95%', detail: '核心链路运行稳定' },
+]
+
+const quickLinks = [
   {
-    id: 'pipeline',
-    title: 'WXML/WXSS/WXS 全链路处理与平台适配',
-    group: 'engineering' as const,
-    done: true,
-    level: 'advanced' as const,
+    title: '运营概览',
+    description: '查看阶段目标、团队协同与项目节奏。',
+    action: '进入概览',
+    path: OVERVIEW_PATH,
   },
   {
-    id: 'events',
-    title: '支持 @tap.catch / @tap.stop 等事件语义',
-    group: 'core' as const,
-    done: true,
-    level: 'base' as const,
+    title: '项目工作台',
+    description: '集中处理待办任务、优先级与排期。',
+    action: '打开工作台',
+    path: WORKSPACE_PATH,
   },
   {
-    id: 'reactivity',
-    title: '通过 wevu 使用 ref/computed/watch 写业务逻辑',
-    group: 'core' as const,
-    done: true,
-    level: 'advanced' as const,
+    title: '系统设置',
+    description: '统一管理通知、权限与环境配置。',
+    action: '前往设置',
+    path: SETTINGS_PATH,
   },
-])
-
-const doubled = computed(() => count.value * 2)
-
-const pageClass = computed(() => {
-  return {
-    'page-empty': count.value === 0,
-    'page-energetic': count.value > 0,
-  }
-})
-
-const pageStyle = computed(() => {
-  return [
-    {
-      background: count.value > 0 ? '#eaf0ff' : '#f6f7ff',
-    },
-    {
-      borderTop: count.value > 0 ? '4rpx solid #4c6ef5' : '4rpx solid transparent',
-    },
-  ]
-})
-
-const cardClass = computed(() => {
-  return [
-    {
-      'card-active': count.value > 0,
-    },
-    count.value >= 3 ? 'card-boost' : '',
-  ]
-})
-
-const cardStyle = computed(() => {
-  return [
-    {
-      borderColor: count.value > 0 ? '#4c6ef5' : 'transparent',
-    },
-    {
-      borderWidth: count.value > 0 ? '2rpx' : '1rpx',
-    },
-  ]
-})
+]
 
-const primaryBtnClass = computed(() => {
-  return [
-    {
-      'btn-boost': count.value > 0,
-    },
-    count.value >= 3 ? 'btn-boost-strong' : '',
-  ]
-})
-
-const primaryBtnStyle = computed(() => {
-  return [
-    {
-      opacity: count.value > 0 ? 0.88 : 1,
-    },
-    count.value > 0
-      ? {
-          boxShadow: '0 8rpx 20rpx rgba(76, 110, 245, 0.28)',
-        }
-      : null,
-  ]
-})
-
-const helloHighlights = computed<HighlightItem[]>(() => {
-  return [
-    {
-      key: 'count',
-      label: '当前计数',
-      value: count.value,
-      tone: 'up' as const,
-      note: '来自 ref 状态',
-    },
-    {
-      key: 'double',
-      label: '双倍值',
-      value: doubled.value,
-      tone: 'flat' as const,
-      note: '来自 computed',
-    },
-    {
-      key: 'feature',
-      label: '能力条目',
-      value: todos.value.length,
-      tone: 'flat' as const,
-      note: '模板清单',
-    },
-    {
-      key: 'title',
-      label: '标题长度',
-      value: message.value.length,
-      tone: message.value.length > 10 ? 'up' : 'down',
-      note: '来自 v-model',
-    },
-  ]
-})
-
-function showToast(title: string) {
-  wx.showToast({
-    title,
-    icon: 'none',
-    duration: 1200,
-  })
+async function pushTo(path: string) {
+  await router.push(path)
 }
 
-function increment() {
-  count.value += 1
-}
-
-function reset() {
-  count.value = 0
-  showToast('计数已重置')
-}
-
-function handleHelloAction(payload: HelloActionPayload) {
-  if (payload.type === 'copy' && payload.value) {
-    wx.setClipboardData({
-      data: payload.value,
-    })
-    return
-  }
-
-  if (payload.type === 'toggle') {
-    showToast(`面板状态：${payload.value === 'true' ? '展开' : '收起'}`)
-    return
-  }
-
-  if (payload.type === 'select' && payload.value) {
-    activeGroup.value = payload.value
-    showToast(`当前焦点：${payload.value}`)
-    return
-  }
-
-  if (payload.type === 'stats' && payload.value) {
-    console.log(`[wevu] hello progress: ${payload.value}%`)
-  }
+async function relaunchToHome() {
+  await router.nativeRouter.reLaunch({
+    url: HOME_PATH,
+  })
 }
-
-watch(count, (newValue, oldValue) => {
-  console.log(`[wevu] count changed: ${oldValue} -> ${newValue}`)
-})
 </script>
 
 <template>
-  <view class="page" :class="pageClass" :style="pageStyle">
-    <InfoBanner
-      :title="message"
-      :description="`group=${activeGroup}, count=${count}, doubled=${doubled}`"
-      badge="Demo"
-    />
+  <view class="page">
+    <view class="hero">
+      <view class="hero__eyebrow">
+        企业业务模板
+      </view>
+      <view class="hero__title">
+        适合作为正式项目起点的首页框架
+      </view>
+      <view class="hero__desc">
+        内置主包与分包页面结构、统一导航入口与简洁信息模块，默认呈现正式、克制且便于继续扩展的业务模板风格。
+      </view>
+      <view class="hero__pills">
+        <StatusPill label="主包首页" tone="accent" />
+        <StatusPill label="可扩展分包" tone="neutral" />
+        <StatusPill label="适合二次开发" tone="success" />
+      </view>
+    </view>
 
-    <HelloWorld
-      :title="`欢迎，${message}`"
-      :subtitle="`HelloWorld 示例面板（当前分组：${activeGroup}）`"
-      :highlights="helloHighlights"
-      :features="todos"
-      @action="handleHelloAction"
-    >
-      <template #footer>
-        <view class="hello-footer">
-          <text class="hello-footer-text">
-            此区域来自父组件 slot，展示 wevu + weapp-vite 组合能力。
-          </text>
+    <view class="section">
+      <view class="section__title">
+        核心指标
+      </view>
+      <view
+        v-for="item in metrics"
+        :key="item.label"
+        class="metric-card"
+      >
+        <view class="metric-card__label">
+          {{ item.label }}
+        </view>
+        <view class="metric-card__value">
+          {{ item.value }}
+        </view>
+        <view class="metric-card__detail">
+          {{ item.detail }}
         </view>
-      </template>
-    </HelloWorld>
-
-    <view class="card" :class="cardClass" :style="cardStyle">
-      <view class="row">
-        <text class="label">
-          当前计数：{{ count }}
-        </text>
-        <text class="label">
-          双倍：{{ doubled }}
-        </text>
       </view>
+    </view>
 
-      <view class="row actions">
-        <button class="btn primary" :class="primaryBtnClass" :style="primaryBtnStyle" @tap.catch="increment">
-          +1
-        </button>
-        <button class="btn danger" @tap.stop="reset">
-          重置
-        </button>
+    <view class="section">
+      <view class="section__title">
+        常用入口
       </view>
-
-      <view class="row">
-        <text class="label">
-          文本双向绑定：
-        </text>
+      <view
+        v-for="link in quickLinks"
+        :key="link.path"
+        class="entry-card"
+      >
+        <InfoPanel
+          eyebrow="PAGE"
+          :title="link.title"
+          :description="link.description"
+        />
+        <button class="action-btn" @tap="pushTo(link.path)">
+          {{ link.action }}
+        </button>
       </view>
-      <input v-model="message" class="input" placeholder="输入标题…">
+    </view>
 
-      <view class="row">
-        <text class="label">
-          Checklist
-        </text>
-      </view>
-      <view class="todo">
-        <view v-for="(todo, index) in todos" :key="index" class="todo-item">
-          <text>• {{ todo.title }}</text>
-        </view>
+    <view class="section">
+      <InfoPanel
+        eyebrow="ROUTER"
+        title="导航状态"
+        description="模板保留路由能力作为底层基础，但将其放在辅助信息层，避免首页呈现为技术功能演示页。"
+      />
+      <view class="route-note">
+        当前路由：{{ routeSummary }}
       </view>
+      <button class="action-btn action-btn--light" @tap="relaunchToHome">
+        reLaunch 当前首页
+      </button>
     </view>
   </view>
 </template>
@@ -271,100 +133,103 @@ watch(count, (newValue, oldValue) => {
 .page {
   box-sizing: border-box;
   min-height: 100vh;
-  padding: 0 32rpx 64rpx;
-  background: #f6f7ff;
+  padding: 28rpx 28rpx 40rpx;
+  background:
+    radial-gradient(circle at top right, rgb(59 130 246 / 12%), transparent 30%),
+    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
 }
 
-.page-empty {
-  opacity: 0.98;
+.hero {
+  padding: 36rpx 30rpx;
+  background: linear-gradient(160deg, #0f172a, #1e293b 72%, #334155);
+  border-radius: 32rpx;
+  box-shadow: 0 24rpx 60rpx rgb(15 23 42 / 18%);
 }
 
-.page-energetic {
-  background: #f1f4ff;
-}
-
-.card {
-  padding: 32rpx;
-  margin-top: 24rpx;
-  background: #fff;
-  border: 2rpx solid transparent;
-  border-radius: 24rpx;
-  box-shadow: 0 12rpx 32rpx rgb(44 44 84 / 10%);
+.hero__eyebrow {
+  font-size: 22rpx;
+  font-weight: 600;
+  color: rgb(226 232 240 / 88%);
+  letter-spacing: 2rpx;
 }
 
-.card-active {
-  box-shadow: 0 14rpx 36rpx rgb(76 110 245 / 14%);
+.hero__title {
+  margin-top: 16rpx;
+  font-size: 42rpx;
+  font-weight: 700;
+  line-height: 1.35;
+  color: #fff;
 }
 
-.card-boost {
-  transform: translateY(-2rpx);
+.hero__desc {
+  margin-top: 16rpx;
+  font-size: 24rpx;
+  line-height: 1.6;
+  color: rgb(226 232 240 / 88%);
 }
 
-.row {
+.hero__pills {
   display: flex;
-  gap: 16rpx;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16rpx;
-}
-
-.label {
-  font-size: 30rpx;
-  color: #1c1c3c;
-}
-
-.actions {
-  margin: 24rpx 0;
+  flex-wrap: wrap;
+  gap: 14rpx;
+  margin-top: 24rpx;
 }
 
-.btn {
-  flex: 1;
-  line-height: 96rpx;
-  color: #fff;
-  border-radius: 16rpx;
+.section {
+  margin-top: 24rpx;
 }
 
-.btn.primary {
-  background: #4c6ef5;
+.section__title {
+  margin-bottom: 16rpx;
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #0f172a;
 }
 
-.btn-boost {
-  transform: scale(1.02);
+.metric-card,
+.entry-card {
+  padding: 24rpx;
+  margin-top: 16rpx;
+  background: rgb(255 255 255 / 92%);
+  border: 2rpx solid rgb(226 232 240 / 88%);
+  border-radius: 28rpx;
+  box-shadow: 0 12rpx 32rpx rgb(15 23 42 / 4%);
 }
 
-.btn-boost-strong {
-  transform: scale(1.04);
+.metric-card__label {
+  font-size: 22rpx;
+  color: #64748b;
 }
 
-.btn.danger {
-  background: #f03e3e;
+.metric-card__value {
+  margin-top: 12rpx;
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #0f172a;
 }
 
-.input {
-  box-sizing: border-box;
-  height: 88rpx;
-  padding: 0 24rpx;
-  margin: 0 0 24rpx;
-  background: #fff;
-  border: 2rpx solid #e9ecef;
-  border-radius: 16rpx;
+.metric-card__detail {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  line-height: 1.6;
+  color: #475569;
 }
 
-.todo-item {
-  margin-bottom: 12rpx;
-  font-size: 26rpx;
-  color: #4f4f7a;
+.route-note {
+  margin-top: 16rpx;
+  font-size: 22rpx;
+  color: #64748b;
 }
 
-.hello-footer {
-  padding: 12rpx 14rpx;
-  margin-top: 16rpx;
-  background: #eef2ff;
-  border-radius: 12rpx;
+.action-btn {
+  margin-top: 18rpx;
+  color: #fff;
+  background: #0f172a;
+  border-radius: 999rpx;
 }
 
-.hello-footer-text {
-  font-size: 22rpx;
-  color: #4f5ea0;
+.action-btn--light {
+  color: #0f172a;
+  background: #e2e8f0;
 }
 </style>