网站信息，登录，用户

admin/src/api/consumer.ts

@@ -9,3 +9,8 @@ export function getUserList(params: any) {
 export function getUserDetail(params: any) {
     return request.get({ url: '/user/detail', params })
 }
+
+// 用户编辑
+export function userEdit(params: any) {
+    return request.post({ url: '/user/edit', params })
+}

admin/src/components/popover-input/index.vue

@@ -0,0 +1,108 @@
+<template>
+    <div @mouseenter="inPopover = true" @mouseleave="inPopover = false">
+        <el-popover
+            placement="top"
+            v-model:visible="visible"
+            :width="width"
+            trigger="contextmenu"
+            class="popover-input"
+            :teleported="false"
+        >
+            <div class="flex">
+                <div class="popover-input__input mr-[10px] flex-1">
+                    <el-select
+                        class="flex-1"
+                        size="small"
+                        v-if="type == 'select'"
+                        v-model="inputValue"
+                        :teleported="false"
+                    >
+                        <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                    <el-input
+                        v-else
+                        v-model="inputValue"
+                        :type="type"
+                        size="small"
+                        :placeholder="placeholder"
+                    />
+                </div>
+                <div class="popover-input__btns flex-none">
+                    <el-button link @click="visible = false">取消</el-button>
+                    <el-button type="primary" size="small" @click="handleConfirm">确定</el-button>
+                </div>
+            </div>
+            <template #reference>
+                <div class="inline" @click.stop="handleOpen">
+                    <slot></slot>
+                </div>
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+    value: {
+        type: String
+    },
+    type: {
+        type: String,
+        default: 'text'
+    },
+    width: {
+        type: [Number, String],
+        default: 250
+    },
+    placeholder: String,
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    options: {
+        type: Array as PropType<any[]>,
+        default: () => []
+    }
+})
+const emit = defineEmits(['confirm'])
+const visible = ref(false)
+const inPopover = ref(false)
+const inputValue = ref()
+const handleConfirm = () => {
+    close()
+    emit('confirm', inputValue.value)
+}
+const handleOpen = () => {
+    if (props.disabled) {
+        return
+    }
+    visible.value = true
+}
+const close = () => {
+    visible.value = false
+}
+
+watch(
+    () => props.value,
+    (value) => {
+        inputValue.value = value
+    },
+    {
+        immediate: true
+    }
+)
+useEventListener(document.body, 'click', () => {
+    if (inPopover.value) return
+    close()
+})
+</script>
+
+<style scoped lang="scss"></style>

admin/src/permission.ts

@@ -78,6 +78,6 @@ router.beforeEach(async (to, from, next) => {
 })
 
 router.afterEach(() => {
-    // console.log(router.getRoutes())
+    console.log(router.getRoutes())
     NProgress.done()
 })

admin/src/router/index.ts

@@ -86,6 +86,7 @@ export function findFirstValidRoute(routes: RouteRecordRaw[]): string | undefine
 }
 
 export function getRoutePath(perms: string) {
+    console.log(router.getRoutes())
     console.log(router.getRoutes().find((item) => item.meta?.perms == perms)?.path)
     return router.getRoutes().find((item) => item.meta?.perms == perms)?.path || ''
 }

admin/src/views/article/lists/index.vue

@@ -34,7 +34,7 @@
                 <router-link
                     v-perms="['article:add']"
                     :to="{
-                        path: '/article/lists/edit'
+                        path: getRoutePath('article:edit')
                     }"
                 >
                     <el-button type="primary" class="mb-4">
@@ -57,6 +57,12 @@
                         />
                     </template>
                 </el-table-column>
+                <el-table-column
+                    label="标题"
+                    prop="title"
+                    min-width="160"
+                    show-tooltip-when-overflow
+                />
                 <el-table-column label="栏目" prop="category" min-width="100" />
                 <el-table-column label="作者" prop="author" min-width="120" />
                 <el-table-column label="浏览量" prop="visit" min-width="100" />
@@ -64,10 +70,9 @@
                     <template #default="{ row }">
                         <el-switch
                             v-perms="['article:cate:change']"
-                            v-if="row.id != 1"
                             v-model="row.isShow"
-                            :active-value="0"
-                            :inactive-value="1"
+                            :active-value="1"
+                            :inactive-value="0"
                             @change="changeStatus(row.id)"
                         />
                     </template>

admin/src/views/consumer/lists/detail.vue

@@ -10,11 +10,59 @@
                     <el-avatar :src="formData.avatar" :size="58" />
                 </div>
                 <el-form-item label="用户编号："> {{ formData.sn }} </el-form-item>
-                <el-form-item label="用户昵称："> {{ formData.nickname }} </el-form-item>
-                <el-form-item label="账号："> {{ formData.username }} </el-form-item>
-                <el-form-item label="真实姓名："> {{ formData.realName || '-' }} </el-form-item>
-                <el-form-item label="性别："> {{ formData.sex }} </el-form-item>
-                <el-form-item label="联系电话："> {{ formData.mobile || '-' }} </el-form-item>
+                <el-form-item label="用户昵称：">
+                    {{ formData.nickname }}
+                </el-form-item>
+                <el-form-item label="账号：">
+                    {{ formData.username }}
+                    <popover-input class="ml-[10px]" @confirm="handleEdit($event, 'username')">
+                        <el-button type="primary" link v-perms="['user:edit']">
+                            <icon name="el-icon-EditPen" />
+                        </el-button>
+                    </popover-input>
+                </el-form-item>
+                <el-form-item label="真实姓名：">
+                    {{ formData.realName || '-' }}
+                    <popover-input class="ml-[10px]" @confirm="handleEdit($event, 'realName')">
+                        <el-button type="primary" link v-perms="['user:edit']">
+                            <icon name="el-icon-EditPen" />
+                        </el-button>
+                    </popover-input>
+                </el-form-item>
+                <el-form-item label="性别：">
+                    {{ formData.sex }}
+                    <popover-input
+                        class="ml-[10px]"
+                        type="select"
+                        :options="[
+                            {
+                                label: '未知',
+                                value: 0
+                            },
+                            {
+                                label: '男',
+                                value: 1
+                            },
+                            {
+                                label: '女',
+                                value: 0
+                            }
+                        ]"
+                        @confirm="handleEdit($event, 'sex')"
+                    >
+                        <el-button type="primary" link v-perms="['user:edit']">
+                            <icon name="el-icon-EditPen" />
+                        </el-button>
+                    </popover-input>
+                </el-form-item>
+                <el-form-item label="联系电话：">
+                    {{ formData.mobile || '-' }}
+                    <popover-input class="ml-[10px]" @confirm="handleEdit($event, 'mobile')">
+                        <el-button type="primary" link v-perms="['user:edit']">
+                            <icon name="el-icon-EditPen" />
+                        </el-button>
+                    </popover-input>
+                </el-form-item>
                 <el-form-item label="注册来源："> {{ formData.channel }} </el-form-item>
                 <el-form-item label="注册时间："> {{ formData.createTime }} </el-form-item>
                 <el-form-item label="最近登录时间："> {{ formData.lastLoginTime }} </el-form-item>
@@ -25,7 +73,8 @@
 
 <script lang="ts" setup>
 import type { FormInstance } from 'element-plus'
-import { getUserDetail } from '@/api/consumer'
+import { getUserDetail, userEdit } from '@/api/consumer'
+import feedback from '@/utils/feedback'
 
 const route = useRoute()
 const formData = reactive({
@@ -54,5 +103,15 @@ const getDetails = async () => {
     })
 }
 
+const handleEdit = async (value: string, field: string) => {
+    await userEdit({
+        id: route.query.id,
+        field,
+        value
+    })
+    feedback.msgSuccess('编辑成功')
+    getDetails()
+}
+
 getDetails()
 </script>

admin/src/views/consumer/lists/index.vue

@@ -47,10 +47,10 @@
                 <el-table-column label="注册时间" prop="createTime" min-width="120" />
                 <el-table-column label="操作" width="120" fixed="right">
                     <template #default="{ row }">
-                        <el-button v-perms="['consumer:lists:detail']" type="primary" link>
+                        <el-button v-perms="['user:detail']" type="primary" link>
                             <router-link
                                 :to="{
-                                    path: getRoutePath('consumer:lists:detail'),
+                                    path: getRoutePath('user:detail'),
                                     query: {
                                         id: row.id
                                     }

admin/src/views/setting/website/information.vue

@@ -1,8 +1,9 @@
 <!-- 网站信息 -->
 <template>
     <div class="website-information">
-        <el-card shadow="never" class="!border-none">
-            <el-form ref="formRef" :rules="rules" :model="formData" label-width="120px">
+        <el-form ref="formRef" :rules="rules" :model="formData" label-width="120px">
+            <el-card shadow="never" class="!border-none">
+                <div class="text-xl font-medium mb-[20px]">后台设置</div>
                 <el-form-item label="网站名称" prop="name">
                     <div class="w-80">
                         <el-input
@@ -13,27 +14,45 @@
                         ></el-input>
                     </div>
                 </el-form-item>
-                <el-form-item label="网站图标" prop="favicon" required>
+                <el-form-item label="网站图标" prop="favicon">
                     <div>
                         <material-picker v-model="formData.favicon" :limit="1" />
                         <div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
                     </div>
                 </el-form-item>
-                <el-form-item label="网站logo" prop="logo" required>
+                <el-form-item label="网站logo" prop="logo">
                     <div>
                         <material-picker v-model="formData.logo" :limit="1" />
                         <div class="form-tips">建议尺寸：200*200像素，支持jpg，jpeg，png格式</div>
                     </div>
                 </el-form-item>
-                <el-form-item label="登录页广告图" prop="backdrop" required>
+                <el-form-item label="登录页广告图" prop="backdrop">
                     <div>
                         <material-picker v-model="formData.backdrop" :limit="1" />
                         <div class="form-tips">建议尺寸：400*400像素，支持jpg，jpeg，png格式</div>
                     </div>
                 </el-form-item>
-            </el-form>
-        </el-card>
-
+            </el-card>
+            <el-card shadow="never" class="!border-none mt-4">
+                <div class="text-xl font-medium mb-[20px]">商城设置</div>
+                <el-form-item label="商城名称" prop="shopName">
+                    <div class="w-80">
+                        <el-input
+                            v-model="formData.shopName"
+                            placeholder="请输入店铺/商城名称"
+                            maxlength="30"
+                            show-word-limit
+                        ></el-input>
+                    </div>
+                </el-form-item>
+                <el-form-item label="商城LOGO" prop="shopLogo">
+                    <div>
+                        <material-picker v-model="formData.shopLogo" :limit="1" />
+                        <div class="form-tips">建议尺寸：100*100px，支持jpg，jpeg，png格式</div>
+                    </div>
+                </el-form-item>
+            </el-card>
+        </el-form>
         <footer-btns v-perms="['setting:website:save']">
             <el-button type="primary" @click="handleSubmit">保存</el-button>
         </footer-btns>
@@ -51,7 +70,9 @@ const formData = reactive({
     name: '', // 网站名称
     favicon: '', // 网站图标
     logo: '', // 网站logo
-    backdrop: '' // 登录页广告图
+    backdrop: '', // 登录页广告图
+    shopName: '',
+    shopLogo: ''
 })
 
 // 表单验证
@@ -62,6 +83,41 @@ const rules = {
             message: '请输入网站名称',
             trigger: ['blur']
         }
+    ],
+    favicon: [
+        {
+            required: true,
+            message: '请选择网站图标',
+            trigger: ['change']
+        }
+    ],
+    logo: [
+        {
+            required: true,
+            message: '请选择网站logo',
+            trigger: ['change']
+        }
+    ],
+    backdrop: [
+        {
+            required: true,
+            message: '请选择登录页广告图',
+            trigger: ['change']
+        }
+    ],
+    shopName: [
+        {
+            required: true,
+            message: '请输入店铺/商城名称',
+            trigger: ['blur']
+        }
+    ],
+    shopLogo: [
+        {
+            required: true,
+            message: '请选择商城LOGO',
+            trigger: ['change']
+        }
     ]
 }