ljr-cli 1.0.7 → 1.0.9

package/bin/templates/vue3.5.25-2025.12.4/src/pages/index/permission/role.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useRole } from "./role"
+
+const { formData, tableData, onSubmit } = useRole()
+</script>
+
+<template>
+  <div class="c-layout">
+    <!-- 顶部搜索 -->
+    <el-form :inline="true" :model="formData">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="角色">
+            <el-input v-model="formData.user" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="备注">
+            <el-input v-model="formData.user" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="text-right">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+          <el-button @click="onSubmit">重置</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 中间表格 -->
+    <el-table class="c-flex-1 c-overflow-auto" :data="tableData" border height="100%">
+      <el-table-column prop="date" label="日期" width="180" />
+      <el-table-column prop="name" label="姓名" width="180" />
+      <el-table-column prop="address" label="地址" />
+    </el-table>
+
+    <div class="mt-4 flex justify-end">
+      <el-pagination background layout="prev, pager, next" :page-sizes="[10, 20, 50, 100]" :total="1000" />
+    </div>
+  </div>
+</template>

package/bin/templates/vue3.5.25-2025.12.4/src/pages/index/permission/user.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const router = useRouter()
+console.log("router=====>", router)
+</script>
+
+<template>
+  <div>
+    <div class="about">用户管理</div>
+  </div>
+</template>

package/bin/templates/vue3.5.25-2025.12.4/src/pages/index/template/base-info.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="c-layout">基础信息</div>
+</template>

package/bin/templates/vue3.5.25-2025.12.4/src/pages/index/template/base-info2.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="c-layout">基础信息2</div>
+</template>

package/bin/templates/vue3.5.25-2025.12.4/src/pages/index/template/list.ts

@@ -0,0 +1,40 @@
+export function useList() {
+  const formData = reactive({
+    user: "",
+    region: "",
+    date: "",
+  })
+
+  const tableData = ref([
+    {
+      date: "2016-05-03",
+      name: "Tom",
+      address: "No. 189, Grove St, Los Angeles",
+    },
+    {
+      date: "2016-05-02",
+      name: "Tom",
+      address: "No. 189, Grove St, Los Angeles",
+    },
+    {
+      date: "2016-05-04",
+      name: "Tom",
+      address: "No. 189, Grove St, Los Angeles",
+    },
+    {
+      date: "2016-05-01",
+      name: "Tom",
+      address: "No. 189, Grove St, Los Angeles",
+    },
+  ])
+
+  const onSubmit = () => {
+    console.log("submit!")
+  }
+
+  return {
+    formData,
+    tableData,
+    onSubmit,
+  }
+}

package/bin/templates/vue3.5.25-2025.12.4/src/pages/index/template/list.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useList } from "./list"
+
+const { formData, tableData, onSubmit } = useList()
+</script>
+
+<template>
+  <div class="c-layout">
+    <!-- 顶部搜索 -->
+    <el-form :inline="true" :model="formData">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="角色">
+            <el-input v-model="formData.user" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="备注">
+            <el-input v-model="formData.user" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="text-right">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+          <el-button @click="onSubmit">重置</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 中间表格 -->
+    <el-table class="c-flex-1 c-overflow-auto" :data="tableData" border height="100%">
+      <el-table-column prop="date" label="日期" width="180" />
+      <el-table-column prop="name" label="姓名" width="180" />
+      <el-table-column prop="address" label="地址" />
+    </el-table>
+
+    <div class="mt-4 flex justify-end">
+      <el-pagination background layout="prev, pager, next" :page-sizes="[10, 20, 50, 100]" :total="1000" />
+    </div>
+  </div>
+</template>

package/bin/templates/vue3.5.25-2025.12.4/src/pages/index/template/store.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useAccountStore, useDDStore } from "@/stores"
+const router = useRouter()
+
+const accountStore = useAccountStore()
+const ddStore = useDDStore()
+function printAccountStore() {
+  console.log("认证仓库=====>", accountStore)
+}
+</script>
+
+<template>
+  <div class="c-card-layout" style="padding: 50px">
+    <el-card class="c-w-full">
+      <template v-slot:header>
+        <div class="clearfix">
+          <span>是否需要登录</span>
+          <el-button class="c-right" size="small" type="primary" @click="accountStore.changeNeedLogin()">
+            改变是否需要登录
+          </el-button>
+        </div>
+      </template>
+      <div>
+        {{ accountStore.needLogin }}
+      </div>
+    </el-card>
+
+    <el-card class="c-w-full">
+      <template v-slot:header>
+        <div class="clearfix">
+          <span>当前登录信息</span>
+          <div class="c-right">
+            <el-button size="small" type="primary" @click="accountStore.login()"> 登录 </el-button>
+            <el-button size="small" type="danger" @click="accountStore.logout()"> 退出登录 </el-button>
+          </div>
+        </div>
+      </template>
+      <div>
+        <h3 class="c-mb-10">用户名称：{{ accountStore.userInfo?.name }}</h3>
+        <h3 class="c-mb-10">token：{{ accountStore.token }}</h3>
+      </div>
+    </el-card>
+
+    <el-card class="c-w-full">
+      <div style="text-align: right">
+        <el-button type="primary" size="small" @click="printAccountStore()"> 打印认证仓库 </el-button>
+      </div>
+    </el-card>
+
+    <el-card class="c-w-full">
+      <div style="text-align: right">
+        <el-button
+          type="primary"
+          size="small"
+          :disabled="accountStore.needLogin && !accountStore.token"
+          @click="router.push('/')"
+        >
+          跳转首页
+        </el-button>
+      </div>
+    </el-card>
+
+    <el-card class="c-w-full">
+      <template v-slot:header>
+        <div class="clearfix">
+          <span>数据字典</span>
+          <el-button class="c-right" size="small" type="primary" @click="ddStore.clearDD()">
+            清空城市和性别字典
+          </el-button>
+        </div>
+      </template>
+      <div>
+        <h3 class="c-mb-10">
+          性别: {{ ddStore.dd.gender }}
+          <el-button class="c-right" size="small" type="primary" @click="ddStore.getDD('gender')">
+            获取性别数据字典
+          </el-button>
+        </h3>
+        <h3 class="c-mb-10">
+          城市: {{ ddStore.dd.city }}
+          <el-button class="c-right" size="small" type="primary" @click="ddStore.getDD('city')">
+            获取城市数据字典
+          </el-button>
+        </h3>
+        <h3 class="c-mb-10">城市字典值转换名称: {{ ddStore.ddValueToName("city", "1") }}</h3>
+      </div>
+    </el-card>
+  </div>
+</template>

package/bin/templates/vue3.5.25-2025.12.4/src/pages/index.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
+import { useLayoutStore } from "@/stores"
 import leftRightLayout from "@/components/layout/left-right.vue"
+import upDownLayout from "@/components/layout/up-down.vue"
+
+const layoutStore = useLayoutStore()
 </script>
 
 <template>
-  <left-right-layout>
+  <!-- 布局 -->
+  <component :is="layoutStore.layout === 'left-right' ? leftRightLayout : upDownLayout">
     <router-view v-slot="{ Component }">
       <transition name="el-fade-in-linear" mode="out-in">
         <component :is="Component" />
       </transition>
     </router-view>
-  </left-right-layout>
+  </component>
 </template>

package/bin/templates/vue3.5.25-2025.12.4/src/pages/login.vue

@@ -1,76 +1,46 @@
 <script setup lang="ts">
-import { useAccountStore, useDDStore } from "@/stores"
-const router = useRouter()
+import loginBg from "@/assets/images/login_bg.jpg"
+import UserLogin from "@/components/login/user-login.vue"
+import ChangePassword from "@/components/login/change-password.vue"
 
-const accountStore = useAccountStore()
-const ddStore = useDDStore()
-function printAccountStore() {
-  console.log("认证仓库=====>", accountStore)
+const isLogin = ref(true)
+const loading = ref(false)
+
+function changeLoading(status = false) {
+  loading.value = status
+}
+
+function changeIsLogin(status = false) {
+  isLogin.value = status
 }
 </script>
 
 <template>
-  <div class="c-card-layout" style="padding: 50px">
-    <el-card class="c-w-full">
-      <template v-slot:header>
-        <div class="clearfix">
-          <span>是否需要登录</span>
-          <el-button class="c-right" size="small" type="primary" @click="accountStore.changeNeedLogin()">
-            改变是否需要登录
-          </el-button>
-        </div>
-      </template>
-      <div>
-        {{ accountStore.needLogin }}
-      </div>
-    </el-card>
-
-    <el-card class="c-w-full">
-      <template v-slot:header>
-        <div class="clearfix">
-          <span>当前登录信息</span>
-          <div class="c-right">
-            <el-button size="small" type="primary" @click="accountStore.login()"> 登录 </el-button>
-            <el-button size="small" type="danger" @click="accountStore.logout()"> 退出登录 </el-button>
-          </div>
-        </div>
-      </template>
-      <div>
-        <h3 class="c-mb-10">用户名称：{{ accountStore.userInfo?.name }}</h3>
-        <h3 class="c-mb-10">token：{{ accountStore.token }}</h3>
-      </div>
-    </el-card>
-
-    <el-card class="c-w-full">
-      <div style="text-align: right">
-        <el-button type="primary" size="small" @click="printAccountStore()"> 打印认证仓库 </el-button>
-      </div>
-    </el-card>
+  <div class="w-full h-full relative">
+    <img class="w-full h-full object-cover" :src="loginBg" alt="登录背景" />
 
-    <el-card class="c-w-full">
-      <div style="text-align: right">
-        <el-button
-          type="primary"
-          size="small"
-          :disabled="accountStore.needLogin && !accountStore.token"
-          @click="router.push('/')"
+    <!-- 操作容器 -->
+    <div class="absolute top-0 right-1/4 h-full flex items-center">
+      <div v-loading="loading" class="relative w-110 overflow-hidden border-2 border-solid border-white/80 rounded-xl">
+        <div
+          class="relative flex flex-col px-10 py-14"
+          style="
+            background:
+              linear-gradient(0deg, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 60%) 100%),
+              radial-gradient(
+                106.7% 134.87% at 3.55% 95.71%,
+                rgb(97 171 255 / 1%) 0%,
+                rgb(78 157 255 / 8%) 31.16%,
+                rgb(97 171 255 / 0%) 100%
+              );
+          "
         >
-          跳转首页
-        </el-button>
-      </div>
-    </el-card>
-
-    <el-card class="c-w-full">
-      <template v-slot:header>
-        <div class="clearfix">
-          <span>数据字典</span>
-          <el-button class="c-right" size="small" type="primary" @click="ddStore.getDD()"> 获取数据字典 </el-button>
+          <transition name="el-fade-in-linear" mode="out-in">
+            <UserLogin v-if="isLogin" @change-loading="changeLoading" @changeIsLogin="changeIsLogin" />
+            <ChangePassword v-else @change-loading="changeLoading" @changeIsLogin="changeIsLogin" />
+          </transition>
         </div>
-      </template>
-      <div>
-        <h3 class="c-mb-10">sex: {{ ddStore.sex }}</h3>
-        <h3 class="c-mb-10">city: {{ ddStore.citys }}</h3>
       </div>
-    </el-card>
+    </div>
   </div>
 </template>

package/bin/templates/vue3.5.25-2025.12.4/src/stores/account(/351/200/211/351/241/271/345/274/217api/345/206/231/346/263/225/347/244/272/344/276/213).ts

@@ -0,0 +1,49 @@
+interface UserInfo {
+  /** 用户名 */
+  name: string
+  /** token */
+  token: string
+}
+
+interface State {
+  /** 是否需要登录 */
+  needLogin: boolean
+  /** 用户名 */
+  userInfo?: UserInfo
+}
+
+/**
+ * 认证数据
+ */
+export const useAccountStore = defineStore("account", {
+  state: (): State => ({
+    needLogin: false,
+    userInfo: undefined,
+  }),
+  getters: {
+    /** token */
+    token(): string {
+      return this.userInfo?.token || ""
+    },
+  },
+  actions: {
+    /** 改变是否需要登录 */
+    changeNeedLogin() {
+      this.needLogin = !this.needLogin
+    },
+    /** 登录 */
+    login() {
+      this.userInfo = {
+        name: "李某铷",
+        token: "我是token-xxxx",
+      }
+    },
+    /** 退出登录 */
+    logout() {
+      this.userInfo = undefined
+    },
+  },
+  persist: {
+    storage: localStorage, // 存储方式（默认localStorage，可选sessionStorage）
+  },
+})

package/bin/templates/vue3.5.25-2025.12.4/src/stores/account.ts

@@ -1,6 +1,10 @@
 interface UserInfo {
   /** 用户名 */
   name: string
+  /** 头像 */
+  avatar?: string
+  /** 角色 */
+  role?: string
   /** token */
   token: string
 }
@@ -13,37 +17,51 @@ interface State {
 }
 
 /**
- * 认证数据
+ * 认证数据，组合式API写法，不管是选项式API写法还是组合式API写法，同一个项目里，最好是同一种写法，此项目统一采用组合式API写法
  */
-export const useAccountStore = defineStore("account", {
-  state: (): State => ({
-    needLogin: false,
-    userInfo: undefined,
-  }),
-  getters: {
-    /** token */
-    token(): string {
-      return this.userInfo?.token || ""
-    },
-  },
-  actions: {
-    /** 改变是否需要登录 */
-    changeNeedLogin() {
-      this.needLogin = !this.needLogin
-    },
-    /** 登录 */
-    login() {
-      this.userInfo = {
+export const useAccountStore = defineStore(
+  "account",
+  () => {
+    const needLogin = ref<State["needLogin"]>(true)
+    const userInfo = ref<State["userInfo"]>(undefined)
+
+    const token = computed(() => userInfo.value?.token || "")
+
+    function changeNeedLogin() {
+      needLogin.value = !needLogin.value
+    }
+
+    function login() {
+      userInfo.value = {
         name: "李某铷",
         token: "我是token-xxxx",
+        role: "管理员",
       }
-    },
-    /** 退出登录 */
-    logout() {
-      this.userInfo = undefined
-    },
+    }
+
+    /** 退出登录
+     * @author ljr <395181403@qq.com>
+     * @param { Boolean } jumpHome 是否跳转到首页
+     * @returns { void }
+     * @example
+     * logout() // 退出登录
+     */
+    function logout() {
+      userInfo.value = undefined
+    }
+
+    return {
+      needLogin,
+      userInfo,
+      token,
+      changeNeedLogin,
+      login,
+      logout,
+    }
   },
-  persist: {
-    storage: localStorage, // 存储方式（默认localStorage，可选sessionStorage）
+  {
+    persist: {
+      storage: localStorage,
+    },
   },
-})
+)

package/bin/templates/vue3.5.25-2025.12.4/src/stores/dd.ts

@@ -1,35 +1,91 @@
-interface DD {
-  /** 标签 */
+/** 数据字典项 */
+interface DDOption {
+  /** 字典名称 */
   label: string
-  /** 值 */
+  /** 字典编码 */
   value: string | number
 }
 
-interface State {
-  /** 性别 */
-  sex: DD[]
-  /** 城市 */
-  citys?: DD[]
-}
+/** 数据字典已知字段 */
+type DDField = "city" | "gender"
+type DDFieldArr = Array<DDField>
+
+export const useDDStore = defineStore("dd", () => {
+  const dd = ref<Record<DDField, DDOption[]>>({
+    city: [],
+    gender: [],
+  })
+
+  /** 获取数据字典
+   * @param { string | string[] } fields 字典的字段，支持单个字符串用逗号隔开
+   * @example
+   * getDD("city") // 获取城市的数据字典
+   * getDD(["city", "gender"]) // 获取城市和性别的数据字典
+   */
+  function getDD(field: DDField | DDFieldArr) {
+    const fieldArr = typeof field === "string" ? [field] : field
+
+    // 通过fieldArr去获取对应的数据字典，以下跳过请求，直接赋值
+    if (fieldArr.length) {
+      fieldArr.forEach((e) => {
+        if (e.includes("city")) {
+          nextTick(() => {
+            if (!dd.value[e]?.length) {
+              dd.value[e] = [
+                { label: "北京", value: "1" },
+                { label: "上海", value: "2" },
+                { label: "广州", value: "3" },
+                { label: "深圳", value: "4" },
+                { label: "厦门", value: "5" },
+              ]
+            }
+          })
+        }
+        if (e.includes("gender")) {
+          nextTick(() => {
+            if (!dd.value[e]?.length) {
+              dd.value[e] = [
+                { label: "男", value: "1" },
+                { label: "女", value: "0" },
+              ]
+            }
+          })
+        }
+      })
+    }
+  }
+
+  function clearDD(field: DDField | DDFieldArr = ["gender", "city"]) {
+    const fieldArr = typeof field === "string" ? [field] : field
+
+    fieldArr.forEach((e) => {
+      dd.value[e] = []
+    })
+  }
+
+  /** 数据字典值转换名称
+   * @param { DDField } field 字段
+   * @param { string | number } fieldValue 字段值
+   * @returns { String } 对应的label或空串
+   * @example
+   * ddValueToName("city", "1")
+   */
+  function ddValueToName(field: DDField, fieldValue: string | number) {
+    const currentDD = dd.value[field]
+    if (currentDD?.length) {
+      return currentDD.find((f) => f.value === fieldValue)?.label
+    }
+
+    return fieldValue ?? ""
+  }
+
+  /** 初始化 */
+  function init() {
+    getDD(["city", "gender"])
+  }
+
+  // 创建 store 时直接初始化
+  init()
 
-/**
- * 数据字典
- */
-export const useDDStore = defineStore("dd", {
-  state: (): State => ({ sex: [], citys: [] }),
-  actions: {
-    getDD() {
-      this.citys = [
-        { label: "北京", value: "1" },
-        { label: "上海", value: "2" },
-        { label: "广州", value: "3" },
-        { label: "深圳", value: "4" },
-        { label: "厦门", value: "5" },
-      ]
-      this.sex = [
-        { label: "男", value: "1" },
-        { label: "女", value: "0" },
-      ]
-    },
-  },
+  return { dd, getDD, clearDD, ddValueToName, init }
 })