diff --git a/frontend/src/views/Customers.vue b/frontend/src/views/Customers.vue
new file mode 100644
index 0000000..1638e3e
--- /dev/null
+++ b/frontend/src/views/Customers.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Author: 13895237362 2205451508@qq.com
+ * @Date: 2025-08-12 00:00:00
+ * @LastEditors: 13895237362 2205451508@qq.com
+ * @LastEditTime: 2025-08-12 00:00:00
+ * @FilePath: /frontend/src/views/Customers.vue
+ * @Description: 客户管理页面
+-->
+<template>
+  <Layout app-name="License Manager" :nav-items="navigationItems" :breadcrumb-items="breadcrumbs" page-title="客户管理"
+    @nav-click="handleNavigation">
+    <!-- 页面内容 -->
+    <div>
+      <h1>欢迎你来到客户管理页面</h1>
+    </div>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router';
+import Layout from '@/components/common/layout/Layout.vue';
+import type { NavItem, BreadcrumbItem } from '@/components/common/layout/index';
+const router = useRouter();
+
+const navigationItems = ref<NavItem[]>([
+  { id: "dashboard", label: "仪表盘", href: "/dashboard", icon: "dashboard" },
+  { id: "customers", label: "客户管理", href: "/customers", icon: "customers", active: true },
+  { id: "licenses", label: "授权管理", href: "/licenses", icon: "licenses" },
+  { id: "roles", label: "角色权限", href: "/roles", icon: "roles" },
+  { id: "users", label: "系统用户", href: "/users", icon: "users" }
+]);
+const breadcrumbs = ref<BreadcrumbItem[]>([
+  { title: "客户管理", path: "/customers" }
+]);
+const handleNavigation = (item: NavItem) => {
+  router.push(item.href);
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/frontend/src/views/Licenses.vue b/frontend/src/views/Licenses.vue
new file mode 100644
index 0000000..6a0a81b
--- /dev/null
+++ b/frontend/src/views/Licenses.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Author: 13895237362 2205451508@qq.com
+ * @Date: 2025-08-12 00:00:00
+ * @LastEditors: 13895237362 2205451508@qq.com
+ * @LastEditTime: 2025-08-12 00:00:00
+ * @FilePath: /frontend/src/views/Licenses.vue
+ * @Description: 授权管理页面
+-->
+<template>
+  <Layout app-name="License Manager" :nav-items="navigationItems" :breadcrumb-items="breadcrumbs" page-title="授权管理"
+    @nav-click="handleNavigation">
+    <!-- 页面内容 -->
+    <div>
+      <h1>欢迎你来到授权管理页面</h1>
+    </div>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router';
+import Layout from '@/components/common/layout/Layout.vue';
+import type { NavItem, BreadcrumbItem } from '@/components/common/layout/index';
+const router = useRouter();
+
+const navigationItems = ref<NavItem[]>([
+  { id: "dashboard", label: "仪表盘", href: "/dashboard", icon: "dashboard" },
+  { id: "customers", label: "客户管理", href: "/customers", icon: "customers" },
+  { id: "licenses", label: "授权管理", href: "/licenses", icon: "licenses", active: true },
+  { id: "roles", label: "角色权限", href: "/roles", icon: "roles" },
+  { id: "users", label: "系统用户", href: "/users", icon: "users" }
+]);
+const breadcrumbs = ref<BreadcrumbItem[]>([
+  { title: "授权管理", path: "/licenses" }
+]);
+const handleNavigation = (item: NavItem) => {
+  router.push(item.href);
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/frontend/src/views/Roles.vue b/frontend/src/views/Roles.vue
new file mode 100644
index 0000000..a35ae97
--- /dev/null
+++ b/frontend/src/views/Roles.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Author: 13895237362 2205451508@qq.com
+ * @Date: 2025-08-12 00:00:00
+ * @LastEditors: 13895237362 2205451508@qq.com
+ * @LastEditTime: 2025-08-12 00:00:00
+ * @FilePath: /frontend/src/views/Roles.vue
+ * @Description: 角色权限页面
+-->
+<template>
+  <Layout app-name="License Manager" :nav-items="navigationItems" :breadcrumb-items="breadcrumbs" page-title="角色权限"
+    @nav-click="handleNavigation">
+    <!-- 页面内容 -->
+    <div>
+      <h1>欢迎你来到角色权限页面</h1>
+    </div>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router';
+import Layout from '@/components/common/layout/Layout.vue';
+import type { NavItem, BreadcrumbItem } from '@/components/common/layout/index';
+const router = useRouter();
+
+const navigationItems = ref<NavItem[]>([
+  { id: "dashboard", label: "仪表盘", href: "/dashboard", icon: "dashboard" },
+  { id: "customers", label: "客户管理", href: "/customers", icon: "customers" },
+  { id: "licenses", label: "授权管理", href: "/licenses", icon: "licenses" },
+  { id: "roles", label: "角色权限", href: "/roles", icon: "roles", active: true },
+  { id: "users", label: "系统用户", href: "/users", icon: "users" }
+]);
+const breadcrumbs = ref<BreadcrumbItem[]>([
+  { title: "角色权限", path: "/roles" }
+]);
+const handleNavigation = (item: NavItem) => {
+  router.push(item.href);
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/frontend/src/views/Users.vue b/frontend/src/views/Users.vue
new file mode 100644
index 0000000..87b1323
--- /dev/null
+++ b/frontend/src/views/Users.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Author: 13895237362 2205451508@qq.com
+ * @Date: 2025-08-12 00:00:00
+ * @LastEditors: 13895237362 2205451508@qq.com
+ * @LastEditTime: 2025-08-12 00:00:00
+ * @FilePath: /frontend/src/views/Users.vue
+ * @Description: 系统用户页面
+-->
+<template>
+  <Layout app-name="License Manager" :nav-items="navigationItems" :breadcrumb-items="breadcrumbs" page-title="系统用户"
+    @nav-click="handleNavigation">
+    <!-- 页面内容 -->
+    <div>
+      <h1>欢迎你来到系统用户页面</h1>
+    </div>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router';
+import Layout from '@/components/common/layout/Layout.vue';
+import type { NavItem, BreadcrumbItem } from '@/components/common/layout/index';
+const router = useRouter();
+
+const navigationItems = ref<NavItem[]>([
+  { id: "dashboard", label: "仪表盘", href: "/dashboard", icon: "dashboard" },
+  { id: "customers", label: "客户管理", href: "/customers", icon: "customers" },
+  { id: "licenses", label: "授权管理", href: "/licenses", icon: "licenses" },
+  { id: "roles", label: "角色权限", href: "/roles", icon: "roles" },
+  { id: "users", label: "系统用户", href: "/users", icon: "users", active: true }
+]);
+const breadcrumbs = ref<BreadcrumbItem[]>([
+  { title: "系统用户", path: "/users" }
+]);
+const handleNavigation = (item: NavItem) => {
+  router.push(item.href);
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file