softleader-nuxt-core 1.0.4 → 1.0.6

package/components/auth/LoginForm.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import IButton from '../uiInterface/IButton.vue'
+import ICheckbox from '../uiInterface/ICheckbox.vue'
+import EmailInput from '../uiBusiness/EmailInput.vue'
+import PasswordInput from '../uiBusiness/PasswordInput.vue'
+
+const { $api } = useNuxtApp()
+const router = useRouter()
+
+defineProps<{
+  title?: string
+  subtitle?: string
+}>()
+
+const form = reactive({
+  username: '',
+  password: '',
+  rememberMe: false
+})
+
+const loading = ref(false)
+const errorMsg = ref('')
+
+/**
+ * 處理登入請求
+ */
+async function handleLogin() {
+  loading.value = true
+  errorMsg.value = ''
+
+  try {
+    const { data, error } = await $api.auth.login({
+      username: form.username,
+      password: form.password
+    })
+
+    if (error.value) {
+      throw new Error(error.value.message || '登入失敗')
+    }
+
+    const config = useRuntimeConfig()
+    const token = useCookie(config.public.auth.tokenKey as string, {
+      maxAge: Number(config.public.auth.maxAge)
+    })
+    token.value = (data.value as any)?.accessToken
+
+    router.push('/')
+  } catch (err: any) {
+    errorMsg.value = err.message || '發生未知錯誤'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login-wrapper">
+    <div class="glass-card">
+      <div class="login-header">
+        <h2 class="login-title">
+          {{ title || '歡迎回來' }}
+        </h2>
+        <p class="login-subtitle">
+          {{ subtitle || '請輸入您的帳號密碼以登入系統' }}
+        </p>
+      </div>
+
+      <form
+        class="login-form"
+        @submit.prevent="handleLogin"
+      >
+        <div class="input-stack">
+          <label class="input-label">帳號 / Email</label>
+          <EmailInput
+            v-model="form.username"
+            placeholder="請輸入電子郵件"
+            :disabled="loading"
+            required
+          />
+
+          <label class="input-label">密碼</label>
+          <PasswordInput
+            v-model="form.password"
+            placeholder="••••••••"
+            :disabled="loading"
+            required
+            :show-strength="false"
+          />
+        </div>
+
+        <div class="form-extras">
+          <ICheckbox
+            v-model="form.rememberMe"
+            label="記住我 30 天"
+          />
+          <a
+            href="#"
+            class="forgot-link"
+          >
+            忘記密碼？
+          </a>
+        </div>
+
+        <div
+          v-if="errorMsg"
+          class="error-message"
+        >
+          <span class="error-icon">⚠️</span>
+          {{ errorMsg }}
+        </div>
+
+        <IButton
+          type="submit"
+          block
+          color="white"
+          size="large"
+          :loading="loading"
+          class="submit-btn"
+        >
+          登入
+        </IButton>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-wrapper {
+  width: 100%;
+  max-width: 640px;
+  perspective: 1000px;
+}
+
+/* 
+  Refined Glass Card 
+  Subtle, Premium, Minimalist
+*/
+.glass-card {
+  background: rgba(30, 41, 59, 0.4); /* Very subtle dark slate */
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  padding: 3rem 2.5rem;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 24px 48px -12px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease;
+}
+
+.glass-card:hover {
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.05),
+    0 32px 64px -12px rgba(0, 0, 0, 0.3);
+}
+
+.login-header {
+  margin-bottom: 2.5rem;
+  text-align: center;
+}
+
+.login-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: #f8fafc;
+  margin: 0 0 0.75rem 0;
+  letter-spacing: -0.025em;
+}
+
+.login-subtitle {
+  color: #94a3b8;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.input-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem; /* Slightly more space for card layout */
+}
+
+.input-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600; /* Bolder label for card */
+  color: #cbd5e1;
+  margin-bottom: -0.5rem;
+  margin-left: 0.25rem; /* Align with input curve */
+}
+
+.form-extras {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.875rem;
+  padding: 0 0.25rem;
+}
+
+/* Checkbox text color override */
+/* Checkbox text color override */
+:deep(.i-checkbox__label) {
+  color: #94a3b8 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500;
+}
+
+.forgot-link {
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 500;
+  transition: opacity 0.2s;
+}
+
+.forgot-link:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
+.error-message {
+  background: rgba(239, 68, 68, 0.15);
+  border: 1px solid rgba(239, 68, 68, 0.25);
+  border-radius: 12px;
+  padding: 0.75rem 1rem;
+  color: #fca5a5;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+:deep(.submit-btn) {
+  font-weight: 700 !important;
+  font-size: 1.05rem !important;
+  height: 52px !important;
+  border-radius: 12px !important;
+  border: none !important;
+  margin-top: 0.5rem;
+  transition: all 0.2s !important;
+  /* Removed fixed background/color to let props control it, or default to primary if needed */
+}
+
+:deep(.submit-btn:hover) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
+}
+</style>

package/components/layout/AppFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * 應用程式頁尾 - 框架無關
+ * 框架無關的頁尾
+ */
+import { useAppStore } from '../../stores/app'
+
+const appStore = useAppStore()
+</script>
+
+<template>
+  <footer
+    v-if="appStore.config.footer.visible"
+    class="app-footer"
+  >
+    {{ appStore.config.footer.content }}
+  </footer>
+</template>

package/components/layout/AppHeader.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+/**
+ * 應用程式頁首 - 使用三層架構
+ * 業務層：整合 Store、子元件
+ * UI 層：使用 IAppBar (可替換 UI 框架)
+ */
+import IAppBar from '../uiInterface/layout/IAppBar.vue'
+import { useAppStore } from '../../stores/app'
+import HeaderBreadcrumbs from './header/HeaderBreadcrumbs.vue'
+import HeaderSearch from './header/HeaderSearch.vue'
+import HeaderNotifications from './header/HeaderNotifications.vue'
+import HeaderUserMenu from './header/HeaderUserMenu.vue'
+import HeaderActions from './header/HeaderActions.vue'
+
+const appStore = useAppStore()
+</script>
+
+<template>
+  <IAppBar
+    v-if="appStore.config.header.visible"
+    :fixed="true"
+    :elevation="2"
+    color="white"
+  >
+    <!-- 手機版選單切換 -->
+    <button
+      class="header-nav-toggle"
+      aria-label="Toggle navigation"
+      @click="appStore.toggleDrawer"
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <line
+          x1="3"
+          y1="12"
+          x2="21"
+          y2="12"
+        />
+        <line
+          x1="3"
+          y1="6"
+          x2="21"
+          y2="6"
+        />
+        <line
+          x1="3"
+          y1="18"
+          x2="21"
+          y2="18"
+        />
+      </svg>
+    </button>
+
+    <div class="header-content">
+      <!-- 麵包屑導航 -->
+      <HeaderBreadcrumbs />
+
+      <div class="header-spacer" />
+
+      <!-- 全域搜尋 -->
+      <HeaderSearch />
+
+      <!-- 通用頁首動作 -->
+      <HeaderActions />
+
+      <!-- 通知中心 -->
+      <HeaderNotifications />
+
+      <!-- 使用者選單 -->
+      <HeaderUserMenu />
+    </div>
+  </IAppBar>
+</template>
+
+<style scoped>
+.header-nav-toggle {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: #333;
+  transition: color 0.2s;
+}
+
+.header-nav-toggle:hover {
+  color: #3498db;
+}
+
+@media (max-width: 1023px) {
+  .header-nav-toggle {
+    display: block;
+  }
+}
+
+.header-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-spacer {
+  flex: 1;
+}
+</style>

package/components/layout/AppSidebar.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+/**
+ * 應用程式側邊欄 - 使用三層架構
+ * 業務層：整合 Store、權限控制、導航邏輯
+ * UI 層：使用 IDrawer + IMenuItem (可替換 UI 框架)
+ */
+import IDrawer from '../uiInterface/layout/IDrawer.vue'
+import AppSidebarItem from './AppSidebarItem.vue'
+
+const sidebarStore = useSidebarStore()
+const userStore = useUserStore()
+const appStore = useAppStore()
+
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const drawer = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+// 確保 sidebar 已經生成,並傳入使用者權限
+watch(
+  () => userStore.permissions,
+  (newPermissions) => {
+    sidebarStore.generate(newPermissions)
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <IDrawer
+    v-model="drawer"
+    :permanent="true"
+    width="256px"
+  >
+    <!-- 品牌 Logo 區塊 -->
+    <div class="sidebar-brand">
+      <div class="sidebar-brand-icon">
+        <img
+          v-if="appStore.config.branding.logo.image"
+          :src="appStore.config.branding.logo.image"
+          alt="Logo"
+          style="width: 100%; height: 100%; object-fit: contain"
+        />
+        <svg
+          v-else
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" />
+        </svg>
+      </div>
+      <div class="sidebar-brand-text">
+        <h1 class="sidebar-brand-title">
+          {{ appStore.config.branding.title }}
+        </h1>
+        <p class="sidebar-brand-subtitle">
+          {{ appStore.config.branding.subtitle }}
+        </p>
+      </div>
+    </div>
+
+    <!-- 導航選單 -->
+    <nav class="sidebar-nav">
+      <div class="sidebar-nav-title">
+        {{ appStore.config.sidebar.mainMenuTitle }}
+      </div>
+      <AppSidebarItem
+        v-for="item in sidebarStore.items"
+        :key="item.label"
+        :item="item"
+      />
+    </nav>
+  </IDrawer>
+</template>
+
+<style scoped>
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.sidebar-brand-icon {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  color: #3498db;
+}
+
+.sidebar-brand-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar-brand-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0;
+  color: #2c3e50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-brand-subtitle {
+  font-size: 0.75rem;
+  color: #7f8c8d;
+  margin: 0.25rem 0 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-nav {
+  padding: 1rem 0;
+}
+
+.sidebar-nav-title {
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #95a5a6;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+</style>

package/components/layout/AppSidebarItem.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * 應用程式側邊欄項目 - 框架無關
+ * 框架無關的側邊欄項目 (支援遞迴巢狀選單)
+ */
+import type { SidebarItem } from '../../core/sidebar/buildSidebar'
+import AppSidebarItem from './AppSidebarItem.vue'
+
+defineOptions({
+  name: 'AppSidebarItem'
+})
+
+const props = defineProps<{
+  item: SidebarItem
+}>()
+
+const route = useRoute()
+const isExpanded = ref(false)
+
+// 判斷是否為目前活動項目
+const isActive = computed(() => {
+  if (!props.item.to) return false
+  return route.path === props.item.to
+})
+
+// 如果有子選單,切換展開狀態
+const toggleExpand = () => {
+  if (props.item.children && props.item.children.length > 0) {
+    isExpanded.value = !isExpanded.value
+  }
+}
+
+// 處理點擊事件
+const handleClick = () => {
+  if (props.item.to) {
+    navigateTo(props.item.to)
+  } else {
+    toggleExpand()
+  }
+}
+</script>
+
+<template>
+  <!-- 如果有子選單 -->
+  <div v-if="item.children && item.children.length > 0">
+    <div
+      class="sidebar-nav-item"
+      :class="{ 'is-disabled': item.disabled }"
+      @click="handleClick"
+    >
+      <svg
+        v-if="item.icon"
+        class="sidebar-nav-icon"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <!-- 簡化的圖標,實際應用中可以根據 item.icon 動態渲染 -->
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+        />
+      </svg>
+      <span style="flex: 1">{{ item.label }}</span>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        :style="{
+          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+          transition: 'transform 0.2s'
+        }"
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </div>
+
+    <!-- 子選單 (遞迴) -->
+    <div
+      v-show="isExpanded"
+      style="padding-left: 1rem"
+    >
+      <AppSidebarItem
+        v-for="child in item.children"
+        :key="child.label"
+        :item="child"
+      />
+    </div>
+  </div>
+
+  <!-- 如果沒有子選單 -->
+  <NuxtLink
+    v-else
+    :to="item.to || '#'"
+    class="sidebar-nav-item"
+    :class="{ 'is-active': isActive, 'is-disabled': item.disabled }"
+    @click.prevent="handleClick"
+  >
+    <svg
+      v-if="item.icon"
+      class="sidebar-nav-icon"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <!-- 簡化的圖標,實際應用中可以根據 item.icon 動態渲染 -->
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+    </svg>
+    <span>{{ item.label }}</span>
+  </NuxtLink>
+</template>