feat(test-app): add debug component and optimize build configuration
- Add HomeViewSimple.vue for debugging performance issues - Configure Vite with decorator support and optimization settings - Add babelParserPlugins for legacy decorator support - Optimize dependencies for vue-facing-decorator compatibility Enables debugging of performance issues and optimizes build process.
This commit is contained in:
Matthew Raymer
258
test-apps/daily-notification-test/src/views/HomeViewSimple.vue
Normal file
258
test-apps/daily-notification-test/src/views/HomeViewSimple.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<!--
|
||||
/**
|
||||
* Simple Home View - Minimal Performance Version
|
||||
*
|
||||
* Simplified version to avoid main thread blocking
|
||||
*
|
||||
* @author Matthew Raymer
|
||||
* @version 1.0.0
|
||||
*/
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<!-- Welcome Section -->
|
||||
<div class="welcome-section">
|
||||
<h1 class="welcome-title">
|
||||
🔔 Daily Notification Test
|
||||
</h1>
|
||||
<p class="welcome-subtitle">
|
||||
Vue 3 + vue-facing-decorator + Capacitor
|
||||
</p>
|
||||
<div class="platform-info">
|
||||
<span class="platform-badge">
|
||||
{{ platformName }}
|
||||
</span>
|
||||
<span class="status-badge">
|
||||
{{ statusText }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simple Actions -->
|
||||
<div class="quick-actions">
|
||||
<h2 class="section-title">Quick Actions</h2>
|
||||
<div class="action-grid">
|
||||
<div class="action-card" @click="navigateToSchedule">
|
||||
<div class="card-content">
|
||||
<div class="card-icon">📅</div>
|
||||
<div class="card-text">
|
||||
<h3 class="card-title">Schedule Notification</h3>
|
||||
<p class="card-description">Schedule a new daily notification</p>
|
||||
</div>
|
||||
<div class="card-arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-card" @click="checkSystemStatus">
|
||||
<div class="card-content">
|
||||
<div class="card-icon">📊</div>
|
||||
<div class="card-text">
|
||||
<h3 class="card-title">Check Status</h3>
|
||||
<p class="card-description">View notification system status</p>
|
||||
</div>
|
||||
<div class="card-arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-card" @click="runPluginDiagnostics">
|
||||
<div class="card-content">
|
||||
<div class="card-icon">🔧</div>
|
||||
<div class="card-text">
|
||||
<h3 class="card-title">Plugin Diagnostics</h3>
|
||||
<p class="card-description">Test plugin functionality</p>
|
||||
</div>
|
||||
<div class="card-arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, toNative } from 'vue-facing-decorator'
|
||||
|
||||
@Component
|
||||
class HomeViewSimple extends Vue {
|
||||
platformName = 'Android'
|
||||
statusText = 'Ready'
|
||||
|
||||
navigateToSchedule() {}
|
||||
checkSystemStatus() { alert('System status check - simplified version') }
|
||||
runPluginDiagnostics() { alert('Plugin diagnostics - simplified version') }
|
||||
}
|
||||
export default toNative(HomeViewSimple)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-view {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding: 40px 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
margin: 0 0 24px 0;
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.platform-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.platform-badge, .status-badge {
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.platform-badge {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #4caf50;
|
||||
border: 1px solid rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
background: rgba(33, 150, 243, 0.2);
|
||||
color: #2196f3;
|
||||
border: 1px solid rgba(33, 150, 243, 0.3);
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 24px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-arrow {
|
||||
flex-shrink: 0;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.home-view {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
padding: 30px 16px;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,13 @@ import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vue({
|
||||
script: {
|
||||
defineModel: true,
|
||||
propsDestructure: true,
|
||||
babelParserPlugins: ['decorators-legacy', 'classProperties']
|
||||
}
|
||||
}),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
@@ -15,4 +21,10 @@ export default defineConfig({
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
esbuild: {
|
||||
target: 'es2020'
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['vue-facing-decorator']
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user