create-lupine 1.0.13 → 1.0.15

package/templates/responsive-starter/web/src/pages/mine-page.tsx

@@ -0,0 +1,325 @@
+import {
+  CssProps,
+  HtmlVar,
+  PageProps,
+  RefProps,
+  SliderFrame,
+  SliderFrameHookProps,
+  MobileHeaderCenter,
+  MobileHeaderEmptyIcon,
+  MobileHeaderTitleIcon,
+  MobileTopSysIcon,
+} from 'lupine.components';
+import { MineService, MineStats } from '../services/mine-service';
+import { MineSettingsPage } from '../components/mine-settings-page';
+import { MinePremiumPage } from '../components/mine-premium-page';
+
+export const MinePage = async (props: PageProps) => {
+  const dom = new HtmlVar('');
+  const sliderFrameHook: SliderFrameHookProps = {};
+
+  const renderDashboard = () => {
+    const stats: MineStats = MineService.getStats();
+
+    return (
+      <div class='mine-dashboard'>
+        <div class='dashboard-title'>Data Overview</div>
+
+        <div class='stat-grid'>
+          <div class='stat-card' style={{ borderTopColor: 'var(--primary-accent-color)' }}>
+            <div class='stat-icon'>
+              <i class='ifc-icon ma-text-box-outline' style={{ color: 'var(--primary-accent-color)' }} />
+            </div>
+            <div class='stat-value'>{stats.noteCount}</div>
+            <div class='stat-label'>Notes</div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const refreshRender = () => {
+    dom.value = (
+      <div class='mine-page-container'>
+        <SliderFrame hook={sliderFrameHook} />
+
+        {/* Profile Header Block */}
+        <div class='profile-header'>
+          <div class='profile-info'>
+            <div class='avatar'>
+              <i class='ifc-icon ma-account' />
+            </div>
+            <div class='user-details'>
+              <div class='user-name'>Demo User</div>
+              <div class='user-tagline'>Local Workspace Offline</div>
+            </div>
+          </div>
+          <div class='profile-nav'>
+            <div class='flex-1'></div>
+            <div
+              class='settings-btn'
+              onClick={() => {
+                sliderFrameHook.load!(
+                  <MineSettingsPage sliderFrameHook={sliderFrameHook} onDataChanged={refreshRender} />
+                );
+              }}
+            >
+              <i class='ifc-icon ma-cog-outline' />
+            </div>
+          </div>
+        </div>
+
+        <div class='mine-scroll-content'>
+          {/* Dashboard Blocks */}
+          {renderDashboard()}
+
+          {/* Premium Banner Mock */}
+          <div class='premium-banner'>
+            <div class='banner-content'>
+              <div class='banner-title'>
+                <i class='ifc-icon ma-star' /> Upgrade to Premium
+              </div>
+              <div class='banner-desc'>Unlock cloud sync, custom themes, and unlimited media storage.</div>
+            </div>
+            <button
+              class='banner-btn'
+              onClick={() => {
+                sliderFrameHook.load!(<MinePremiumPage sliderFrameHook={sliderFrameHook} />);
+              }}
+            >
+              View Plans
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    position: 'relative',
+
+    '.mine-page-container': {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+    },
+
+    // 1. Profile Header
+    '.profile-header': {
+      padding: '16px 20px 24px 20px',
+      borderBottomLeftRadius: '24px',
+      borderBottomRightRadius: '24px',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
+      zIndex: 10,
+    },
+    '.profile-nav': {
+      display: 'flex',
+      marginBottom: '16px',
+    },
+    '.settings-btn': {
+      width: '36px',
+      height: '36px',
+      borderRadius: '18px',
+      backgroundColor: 'var(--secondary-bg-color)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      color: 'var(--primary-color)',
+      transition: 'background-color 0.2s',
+      '&:active': {
+        backgroundColor: 'rgba(0,0,0,0.05)',
+      },
+    },
+    '.profile-info': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '16px',
+    },
+    '.avatar': {
+      width: '64px',
+      height: '64px',
+      borderRadius: '32px',
+      backgroundColor: 'var(--primary-accent-color)',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '36px',
+      boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)',
+    },
+    '.user-name': {
+      fontSize: '22px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+      marginBottom: '4px',
+    },
+    '.user-tagline': {
+      fontSize: '14px',
+      color: 'var(--secondary-color)',
+      opacity: 0.8,
+    },
+
+    // Scrollable Rest of the Page
+    '.mine-scroll-content': {
+      flex: 1,
+      overflowY: 'auto',
+      padding: '24px 16px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px',
+    },
+
+    // 2. Dashboard
+    '.mine-dashboard': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px',
+    },
+    '.dashboard-title': {
+      fontSize: '18px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+    },
+    '.stat-grid': {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gap: '12px',
+    },
+    '.stat-card': {
+      backgroundColor: 'var(--primary-bg-color)',
+      borderRadius: '12px',
+      padding: '16px 12px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+      borderTop: '4px solid transparent',
+    },
+    '.stat-icon': {
+      fontSize: '24px',
+      marginBottom: '8px',
+    },
+    '.stat-value': {
+      fontSize: '20px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+      marginBottom: '4px',
+    },
+    '.stat-label': {
+      fontSize: '12px',
+      color: 'var(--secondary-color)',
+    },
+
+    '.usage-bar-container': {
+      backgroundColor: 'var(--primary-bg-color)',
+      borderRadius: '12px',
+      padding: '16px',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+    },
+    '.usage-bar-labels': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      fontSize: '13px',
+      color: 'var(--secondary-color)',
+      marginBottom: '12px',
+      fontWeight: '500',
+    },
+    '.usage-bar': {
+      height: '12px',
+      borderRadius: '6px',
+      display: 'flex',
+      overflow: 'hidden',
+      backgroundColor: 'rgba(0,0,0,0.05)',
+      gap: '2px', // tiny visual gap between segments
+    },
+    '.usage-bar-segment': {
+      height: '100%',
+      transition: 'width 0.5s ease',
+    },
+    '.usage-bar-segment.empty': { backgroundColor: 'transparent' },
+    '.usage-bar-segment.note': { backgroundColor: 'var(--primary-accent-color)' },
+    '.usage-bar-segment.diary': { backgroundColor: '#eb2f96' },
+    '.usage-bar-segment.finance': { backgroundColor: '#52c41a' },
+
+    // 3. Premium Banner
+    '.premium-banner': {
+      background: 'linear-gradient(135deg, #FF9A9E 0%, #FECFEF 99%, #FECFEF 100%)',
+      borderRadius: '16px',
+      padding: '20px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px',
+      color: '#333',
+      boxShadow: '0 8px 16px rgba(255, 154, 158, 0.3)',
+      position: 'relative',
+      overflow: 'hidden',
+    },
+    '.banner-content': {
+      position: 'relative',
+      zIndex: 2,
+    },
+    '.banner-title': {
+      fontSize: '18px',
+      fontWeight: 'bold',
+      marginBottom: '8px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+    },
+    '.banner-title i': {
+      color: '#FFD700',
+    },
+    '.banner-desc': {
+      fontSize: '14px',
+      opacity: 0.9,
+      lineHeight: '1.4',
+    },
+    '.banner-btn': {
+      alignSelf: 'flex-start',
+      backgroundColor: '#fff',
+      color: '#FF9A9E',
+      border: 'none',
+      padding: '8px 20px',
+      borderRadius: '20px',
+      fontWeight: 'bold',
+      fontSize: '14px',
+      cursor: 'pointer',
+      boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
+      position: 'relative',
+      zIndex: 2,
+    },
+    '.mine-page-content-wrapper': {
+      flex: 1,
+      overflowY: 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {
+      refreshRender();
+    },
+  };
+
+  return (
+    <div css={css} ref={ref}>
+      <MobileHeaderCenter>
+        <MobileHeaderTitleIcon
+          title='Mine'
+          left={<MobileHeaderEmptyIcon />}
+          right={
+            <div class='flex-center-gap-12'>
+              <MobileTopSysIcon />
+            </div>
+          }
+        />
+      </MobileHeaderCenter>
+      <div class='mine-page-content-wrapper no-scrollbar-container'>{dom.node}</div>
+    </div>
+  );
+};

package/templates/responsive-starter/web/src/pages/tools-page.tsx

@@ -0,0 +1,46 @@
+import {
+  CssProps,
+  MobileHeaderCenter,
+  MobileHeaderEmptyIcon,
+  MobileHeaderTitleIcon,
+  MobileTopSysIcon,
+  PageProps,
+  RefProps,
+} from 'lupine.components';
+
+export const ToolsPage = async (props: PageProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    position: 'relative',
+    '.tools-list-container': {
+      padding: '32px 24px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {},
+  };
+
+  return (
+    <div css={css} ref={ref}>
+      <MobileHeaderCenter>
+        <MobileHeaderTitleIcon
+          title='Tools'
+          left={<MobileHeaderEmptyIcon />}
+          right={
+            <div class='flex-center-gap-12'>
+              <MobileTopSysIcon />
+            </div>
+          }
+        />
+      </MobileHeaderCenter>
+
+      <div class='tools-list-container no-scrollbar-container'>This is a demo tools page.</div>
+    </div>
+  );
+};

package/templates/responsive-starter/web/src/services/local-notes-service.ts

@@ -0,0 +1,87 @@
+export interface LocalNoteProps {
+  id: number;
+  title: string;
+  content: string; // HTML string
+  updatedAt: number;
+  images?: string[]; // Optional base64 strings
+  color?: string; // Optional color tag
+  orderIndex?: number;
+}
+
+const STORAGE_KEY = 'lj_notes';
+
+export const LocalNotesService = {
+  getAllNotes: (): LocalNoteProps[] => {
+    try {
+      const data = localStorage.getItem(STORAGE_KEY);
+      const notes: LocalNoteProps[] = data ? JSON.parse(data) : [];
+      return notes.sort((a, b) => {
+        const orderA = a.orderIndex !== undefined ? a.orderIndex : a.id;
+        const orderB = b.orderIndex !== undefined ? b.orderIndex : b.id;
+        // Default sort: descending (newest/highest first), unless orderIndex dictates otherwise.
+        // If we want manual ordering, let's just sort descending by orderIndex.
+        return orderB - orderA;
+      });
+    } catch (e) {
+      console.error('Failed to load notes', e);
+      return [];
+    }
+  },
+
+  getNoteById: (id: number): LocalNoteProps | undefined => {
+    return LocalNotesService.getAllNotes().find((n) => n.id === id);
+  },
+
+  saveNote: (note: LocalNoteProps): LocalNoteProps => {
+    const notes = LocalNotesService.getAllNotes();
+    note.updatedAt = Date.now();
+
+    if (note.id <= 0) {
+      note.id = Date.now();
+      // Calculate next highest order index
+      const maxOrder = notes.length > 0 ? Math.max(...notes.map((n) => n.orderIndex ?? n.id)) : Date.now();
+      note.orderIndex = maxOrder + 1;
+      notes.unshift(note);
+    } else {
+      const index = notes.findIndex((n) => n.id === note.id);
+      if (index > -1) {
+        notes[index] = note;
+      } else {
+        notes.unshift(note);
+      }
+    }
+
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
+    return note;
+  },
+
+  updateNoteOrders: (orderedIds: number[]): boolean => {
+    // orderedIds is passed from top to bottom. Top has highest orderIndex.
+    const notes = LocalNotesService.getAllNotes();
+    let updated = false;
+    const len = orderedIds.length;
+    orderedIds.forEach((id, idx) => {
+      const note = notes.find((n) => n.id === id);
+      if (note) {
+        note.orderIndex = len - idx; // Highest index for first item
+        updated = true;
+      }
+    });
+
+    if (updated) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
+    }
+    return updated;
+  },
+
+  deleteNote: (id: number): boolean => {
+    let notes = LocalNotesService.getAllNotes();
+    const len = notes.length;
+    notes = notes.filter((n) => n.id !== id);
+    if (notes.length !== len) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
+      return true;
+    }
+    return false;
+  },
+};

package/templates/responsive-starter/web/src/services/mine-service.ts

@@ -0,0 +1,45 @@
+import { LocalNotesService } from './local-notes-service';
+
+export interface MineStats {
+  noteCount: number;
+}
+
+export interface BackupData {
+  notes: any[];
+  timestamp: string;
+}
+
+export const MineService = {
+  getStats: (): MineStats => {
+    const notes = LocalNotesService.getAllNotes();
+
+    return {
+      noteCount: notes.length,
+    };
+  },
+
+  exportBackup: (): string => {
+    const data: BackupData = {
+      notes: LocalNotesService.getAllNotes(),
+      timestamp: new Date().toISOString(),
+    };
+    return JSON.stringify(data, null, 2);
+  },
+
+  importBackup: (jsonStr: string): boolean => {
+    try {
+      const data: BackupData = JSON.parse(jsonStr);
+      if (Array.isArray(data.notes)) {
+        localStorage.setItem('lj_notes', JSON.stringify(data.notes));
+      }
+      return true;
+    } catch (e) {
+      console.error('Failed to import backup', e);
+      return false;
+    }
+  },
+
+  clearAllData: () => {
+    localStorage.removeItem('lj_notes');
+  },
+};

package/templates/responsive-starter/web/src/styles/base-css.ts

@@ -0,0 +1,65 @@
+import { CssProps } from 'lupine.web';
+import { appIconsCss } from '../app-icons';
+
+export const baseCss: CssProps = {
+  ...appIconsCss,
+  '.user-page-placeholder': {
+    width: '100%',
+    height: '100%',
+  },
+  '.flex-center-gap-12': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+  },
+  '.icon-14': {
+    fontSize: '14px',
+  },
+  '.icon-20-pointer': {
+    fontSize: '20px',
+    cursor: 'pointer',
+  },
+  '.icon-btn-secondary': {
+    fontSize: '14px',
+    marginLeft: '8px',
+    color: 'var(--secondary-color)',
+  },
+  '.text-danger': {
+    color: '#ff4d4f',
+  },
+  '.color-preview-box': {
+    width: '20px',
+    height: '20px',
+    borderRadius: '4px',
+    border: '1px solid var(--primary-border-color)',
+  },
+  '.fab-button': {
+    position: 'absolute',
+    right: '24px',
+    bottom: '24px',
+    width: '56px',
+    height: '56px',
+    borderRadius: '28px',
+    color: 'white',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
+    cursor: 'pointer',
+    zIndex: 10,
+    fontFamily: 'monospace',
+  },
+  '.fab-icon': {
+    fontSize: '32px',
+    lineHeight: '1',
+  },
+  '.note-card-wrapper': {
+    position: 'relative',
+    marginBottom: '16px',
+    borderRadius: '12px',
+    overflow: 'hidden',
+    boxShadow: 'var(--cover-box-shadow)',
+    backgroundColor: 'transparent',
+    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+  },
+};