Skip to content

外壳和 testid

建仓选 Vue,分支用 tailwind-config,不要用默认的 main。那条分支已经装好 Tailwind 4.1.18,src/style.css 里有 @import "tailwindcss"vite.config.js 注册了 @tailwindcss/vite

成品在 ModuleB/。前 15 分钟只做这件事:资源进 public/,四个空视图加上面的 testid,hash 路由能深链。

工具类不生效

模板自己的 CSS 放在 @layer base 里。你如果在组件 <style> 里写不带 layer 的 button { background },它会压过 bg-blue-600,类名看起来像没写上。自定义规则放进 src/style.css@layer components。地图网格就放那里,其余间距、颜色、圆角直接用类。

18 个 testid

全局只放一个 error-message,放在 App.vue,不要每个视图各放一个。

testid放在
nav-schedule nav-map nav-stamps nav-photo底部四个链接
schedule-list会议列表容器
error-message全局唯一
zone-room1 zone-room2 zone-room3 zone-room4 zone-hall地图上可点的五块。是 zone-room1,不是 zone-room-1
room-modal上滑面板,关着也留在 DOM 里
modal-close-btnDone 按钮,带 -btn
photo-upload<input type="file" accept="image/*">
download-btn share-btn两个按钮
ratio-normal ratio-wide比例按钮

贴进控制台。不在当前视图里的可以是 0,出现了就必须是 1,不能是 2。

js
['nav-schedule','nav-map','nav-stamps','nav-photo','schedule-list','error-message',
 'zone-room1','zone-room2','zone-room3','zone-room4','zone-hall',
 'room-modal','modal-close-btn','photo-upload','download-btn','share-btn',
 'ratio-normal','ratio-wide']
 .forEach(t => { const n = document.querySelectorAll(`[data-testid="${t}"]`).length
                 if (n !== 1) console.warn(t, n) })

hash 路由

不要改成 history。模板默认是 createWebHistory,要换成下面这段。

js
import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', redirect: '/schedule' },
    { path: '/schedule', component: () => import('../views/ScheduleView.vue') },
    { path: '/map', component: () => import('../views/MapView.vue') },
    { path: '/stamps', component: () => import('../views/StampsView.vue') },
    { path: '/photo', component: () => import('../views/PhotoView.vue') },
  ],
})

底部用 <RouterLink to="/map" data-testid="nav-map">。高亮用自带的 .router-link-active

资源放哪

拷进 public/,不是 src/assets/。请求不要加前导斜杠:

js
fetch('api/schedule.json')

expert_readme.txt 写清怎么跑、线上地址在哪。漏了这个文件是白丢的分。

深链

地址栏直接打开 #/photo 必须是 Photo,而且 Network 里没有新的 document 请求。