style: optimize ui for login and index pages with modern ios tech style

This commit is contained in:
2026-05-20 16:06:46 +08:00
parent c9ad4ae2ed
commit 485ba7a380
10 changed files with 752 additions and 0 deletions
+26
View File
@@ -0,0 +1,26 @@
import request from '@/utils/request'
// 账号管理 API
export function apiAssetUserList(params: any) {
return request.get({ url: '/asset/AssetUser/lists', params })
}
export function apiAssetUserAdd(params: any) {
return request.post({ url: '/asset/AssetUser/add', params })
}
export function apiAssetUserEdit(params: any) {
return request.post({ url: '/asset/AssetUser/edit', params })
}
export function apiAssetUserDelete(params: any) {
return request.post({ url: '/asset/AssetUser/delete', params })
}
// 资源管理 API
export function apiAssetResourceList(params: any) {
return request.get({ url: '/asset/AssetResource/lists', params })
}
export function apiAssetResourceAdd(params: any) {
return request.post({ url: '/asset/AssetResource/add', params })
}
export function apiAssetResourceDelete(params: any) {
return request.post({ url: '/asset/AssetResource/delete', params })
}
+178
View File
@@ -0,0 +1,178 @@
<template>
<div class="asset-resource-container">
<el-card shadow="never" class="!border-none">
<div class="mb-4">
<el-button type="primary" @click="handleAdd">上传并分发资源</el-button>
</div>
<el-tabs v-model="queryParams.type" @tab-change="handleTabChange">
<el-tab-pane label="图片" name="1"></el-tab-pane>
<el-tab-pane label="视频" name="2"></el-tab-pane>
<el-tab-pane label="语音" name="3"></el-tab-pane>
</el-tabs>
<el-table :data="tableData" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="title" label="标题" />
<el-table-column label="预览">
<template #default="{ row }">
<el-image v-if="row.type == 1" :src="row.file_url" style="width: 50px; height: 50px;" :preview-src-list="[row.file_url]" preview-teleported />
<el-link v-else :href="row.file_url" target="_blank" type="primary">点击预览</el-link>
</template>
</el-table-column>
<el-table-column label="关联账号" show-overflow-tooltip>
<template #default="{ row }">
<span>{{ row.users?.map((u: any) => u.phone).join(', ') || '未关联' }}</span>
</template>
</el-table-column>
<el-table-column prop="create_time" label="上传时间" width="180" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination
v-model:current-page="queryParams.page_no"
v-model:page-size="queryParams.page_size"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="getList"
@current-change="getList"
/>
</div>
</el-card>
<!-- 新增资源弹窗 -->
<el-dialog v-model="dialogVisible" title="新增分发资源" width="600px" destroy-on-close>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="资源类型" prop="type">
<el-radio-group v-model="formData.type">
<el-radio :label="1">图片</el-radio>
<el-radio :label="2">视频</el-radio>
<el-radio :label="3">语音</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入资源标题" />
</el-form-item>
<el-form-item label="文件链接" prop="file_url">
<el-input v-model="formData.file_url" placeholder="请填写文件URL(或接入你们的上传组件)" />
</el-form-item>
<el-form-item label="关联账号" prop="user_ids">
<el-select v-model="formData.user_ids" multiple filterable placeholder="请选择要分发的账号">
<el-option v-for="item in userOptions" :key="item.id" :label="item.phone" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm" :loading="submitLoading">确定发布</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { apiAssetResourceList, apiAssetResourceAdd, apiAssetResourceDelete, apiAssetUserList } from '@/api/asset'
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const queryParams = reactive({
type: '1',
page_no: 1,
page_size: 15
})
const dialogVisible = ref(false)
const submitLoading = ref(false)
const formRef = ref()
const userOptions = ref<any[]>([])
const formData = reactive({
type: 1,
title: '',
file_url: '',
cover_url: '',
user_ids: []
})
const rules = {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
file_url: [{ required: true, message: '请输入或上传文件获取链接', trigger: 'blur' }],
user_ids: [{ type: 'array', required: true, message: '请至少选择一个账号进行分发', trigger: 'change' }]
}
const getList = async () => {
loading.value = true
try {
const res = await apiAssetResourceList(queryParams)
tableData.value = res.lists
total.value = res.count
} catch (e) {
console.error(e)
} finally {
loading.value = false
}
}
const fetchUserOptions = async () => {
try {
const res = await apiAssetUserList({ page_no: 1, page_size: 9999 })
userOptions.value = res.lists
} catch (e) {
console.error(e)
}
}
const handleTabChange = () => {
queryParams.page_no = 1
getList()
}
const handleAdd = () => {
Object.assign(formData, { type: parseInt(queryParams.type), title: '', file_url: '', cover_url: '', user_ids: [] })
fetchUserOptions()
dialogVisible.value = true
}
const handleDelete = async (row: any) => {
try {
await ElMessageBox.confirm('确定要删除该资源吗?用户将无法再看到。', '提示', { type: 'warning' })
await apiAssetResourceDelete({ id: row.id })
ElMessage.success('删除成功')
getList()
} catch (e) {
// canceled
}
}
const submitForm = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid: boolean) => {
if (valid) {
submitLoading.value = true
try {
await apiAssetResourceAdd(formData)
ElMessage.success('上传分发成功')
dialogVisible.value = false
getList()
} catch (e) {
console.error(e)
} finally {
submitLoading.value = false
}
}
})
}
onMounted(() => {
getList()
})
</script>
+151
View File
@@ -0,0 +1,151 @@
<template>
<div class="asset-user-container">
<el-card shadow="never" class="!border-none">
<div class="mb-4">
<el-button type="primary" @click="handleAdd">新增分发账号</el-button>
</div>
<el-table :data="tableData" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="status" label="状态">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '正常' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" width="180" />
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination
v-model:current-page="queryParams.page_no"
v-model:page-size="queryParams.page_size"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="getList"
@current-change="getList"
/>
</div>
</el-card>
<!-- 编辑/新增弹窗 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" destroy-on-close>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="手机号" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入手机号(作为登录账号)" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formData.password" placeholder="为空则默认为 123456" show-password />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm" :loading="submitLoading">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { apiAssetUserList, apiAssetUserAdd, apiAssetUserEdit, apiAssetUserDelete } from '@/api/asset'
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const queryParams = reactive({
page_no: 1,
page_size: 15
})
const dialogVisible = ref(false)
const dialogTitle = ref('')
const submitLoading = ref(false)
const formRef = ref()
const formData = reactive({
id: '',
phone: '',
password: '',
status: 1
})
const rules = {
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
}
const getList = async () => {
loading.value = true
try {
const res = await apiAssetUserList(queryParams)
tableData.value = res.lists
total.value = res.count
} catch (e) {
console.error(e)
} finally {
loading.value = false
}
}
const handleAdd = () => {
dialogTitle.value = '新增账号'
Object.assign(formData, { id: '', phone: '', password: '', status: 1 })
dialogVisible.value = true
}
const handleEdit = (row: any) => {
dialogTitle.value = '编辑账号'
Object.assign(formData, { id: row.id, phone: row.phone, password: '', status: row.status })
dialogVisible.value = true
}
const handleDelete = async (row: any) => {
try {
await ElMessageBox.confirm('确定要删除该账号及其关联资源吗?', '提示', { type: 'warning' })
await apiAssetUserDelete({ id: row.id })
ElMessage.success('删除成功')
getList()
} catch (e) {
// canceled
}
}
const submitForm = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid: boolean) => {
if (valid) {
submitLoading.value = true
try {
if (formData.id) {
await apiAssetUserEdit(formData)
} else {
await apiAssetUserAdd(formData)
}
ElMessage.success('操作成功')
dialogVisible.value = false
getList()
} catch (e) {
console.error(e)
} finally {
submitLoading.value = false
}
}
})
}
onMounted(() => {
getList()
})
</script>
@@ -0,0 +1,101 @@
<?php
namespace app\adminapi\controller\asset;
use app\adminapi\controller\BaseAdminController;
use app\common\model\AssetResource;
use app\common\model\AssetUserResource;
use think\facade\Db;
class AssetResourceController extends BaseAdminController
{
/**
* @notes 资源列表
*/
public function lists()
{
$pageNo = $this->request->get('page_no', 1);
$pageSize = $this->request->get('page_size', 15);
$type = $this->request->get('type');
$where = [];
if ($type) {
$where[] = ['type', '=', $type];
}
$count = AssetResource::where($where)->count();
$lists = AssetResource::with('users')
->where($where)
->order('id', 'desc')
->page($pageNo, $pageSize)
->select();
return $this->data([
'count' => $count,
'lists' => $lists,
'page_no' => $pageNo,
'page_size' => $pageSize,
]);
}
/**
* @notes 添加资源及分配账号
*/
public function add()
{
$params = $this->request->post();
if (empty($params['type']) || empty($params['title']) || empty($params['file_url'])) {
return $this->fail('请填写完整的资源信息');
}
Db::startTrans();
try {
$resource = AssetResource::create([
'type' => $params['type'],
'title' => $params['title'],
'file_url' => $params['file_url'],
'cover_url' => $params['cover_url'] ?? '',
]);
// 绑定用户
if (!empty($params['user_ids']) && is_array($params['user_ids'])) {
$userResources = [];
foreach ($params['user_ids'] as $userId) {
$userResources[] = [
'user_id' => $userId,
'resource_id' => $resource->id,
'create_time' => time(),
];
}
(new AssetUserResource())->saveAll($userResources);
}
Db::commit();
return $this->success('添加并分配成功', ['id' => $resource->id]);
} catch (\Exception $e) {
Db::rollback();
return $this->fail('操作失败: ' . $e->getMessage());
}
}
/**
* @notes 删除资源
*/
public function delete()
{
$id = $this->request->post('id');
if (empty($id)) {
return $this->fail('缺少参数');
}
Db::startTrans();
try {
AssetResource::destroy($id);
AssetUserResource::where('resource_id', $id)->delete();
Db::commit();
return $this->success('删除成功');
} catch (\Exception $e) {
Db::rollback();
return $this->fail('删除失败');
}
}
}
@@ -0,0 +1,109 @@
<?php
namespace app\adminapi\controller\asset;
use app\adminapi\controller\BaseAdminController;
use app\common\model\AssetUser;
class AssetUserController extends BaseAdminController
{
/**
* @notes 账号列表
*/
public function lists()
{
$pageNo = $this->request->get('page_no', 1);
$pageSize = $this->request->get('page_size', 15);
$count = AssetUser::count();
$lists = AssetUser::order('id', 'desc')
->page($pageNo, $pageSize)
->select();
return $this->data([
'count' => $count,
'lists' => $lists,
'page_no' => $pageNo,
'page_size' => $pageSize,
]);
}
/**
* @notes 添加账号
*/
public function add()
{
$params = $this->request->post();
if (empty($params['phone'])) {
return $this->fail('手机号不能为空');
}
$exist = AssetUser::where('phone', $params['phone'])->find();
if ($exist) {
return $this->fail('手机号已存在');
}
// Default password 123456
$password = empty($params['password']) ? '123456' : $params['password'];
$passwordHash = password_hash($password, PASSWORD_DEFAULT);
$user = AssetUser::create([
'phone' => $params['phone'],
'password' => $passwordHash,
'status' => $params['status'] ?? 1,
]);
return $this->success('添加成功', ['id' => $user->id]);
}
/**
* @notes 编辑账号
*/
public function edit()
{
$params = $this->request->post();
if (empty($params['id'])) {
return $this->fail('缺少参数');
}
$user = AssetUser::find($params['id']);
if (!$user) {
return $this->fail('账号不存在');
}
if (!empty($params['phone']) && $params['phone'] != $user->phone) {
$exist = AssetUser::where('phone', $params['phone'])->find();
if ($exist) {
return $this->fail('手机号已存在');
}
$user->phone = $params['phone'];
}
if (!empty($params['password'])) {
$user->password = password_hash($params['password'], PASSWORD_DEFAULT);
}
if (isset($params['status'])) {
$user->status = $params['status'];
}
$user->save();
return $this->success('修改成功');
}
/**
* @notes 删除账号
*/
public function delete()
{
$id = $this->request->post('id');
if (empty($id)) {
return $this->fail('缺少参数');
}
AssetUser::destroy($id);
// 也需要删除关联的资源记录
\app\common\model\AssetUserResource::where('user_id', $id)->delete();
return $this->success('删除成功');
}
}
@@ -0,0 +1,98 @@
<?php
namespace app\api\controller\asset;
use app\api\controller\BaseApiController;
use app\common\model\AssetUser;
use app\common\model\AssetResource;
use app\common\model\AssetUserResource;
use think\facade\Db;
class AssetAppController extends BaseApiController
{
// 免登录验证的接口
public array $notNeedLogin = ['login', 'getResourceList'];
/**
* @notes 小程序端登录
*/
public function login()
{
$phone = $this->request->post('phone');
$password = $this->request->post('password');
if (empty($phone) || empty($password)) {
return $this->fail('手机号或密码不能为空');
}
$user = AssetUser::where('phone', $phone)->find();
if (!$user) {
return $this->fail('账号不存在');
}
if ($user->status != 1) {
return $this->fail('账号已被禁用');
}
if (!password_verify($password, $user->password)) {
return $this->fail('密码错误');
}
// 简单生成 token (实际项目中建议用 JWT 或 Redis 存储 token)
$token = md5($user->id . time() . 'secret');
cache('asset_token_' . $token, $user->id, 86400 * 7);
return $this->success('登录成功', [
'token' => $token,
'user' => [
'id' => $user->id,
'phone' => $user->phone
]
]);
}
/**
* @notes 获取用户关联的资源列表
*/
public function getResourceList()
{
$token = $this->request->header('token');
if (empty($token)) {
return $this->fail('请先登录', [], 401);
}
$userId = cache('asset_token_' . $token);
if (!$userId) {
return $this->fail('登录已过期', [], 401);
}
$type = $this->request->get('type', 1); // 1:图片 2:视频 3:语音
$pageNo = $this->request->get('page_no', 1);
$pageSize = $this->request->get('page_size', 20);
// 获取用户关联的资源 ID 列表
$resourceIds = AssetUserResource::where('user_id', $userId)->column('resource_id');
if (empty($resourceIds)) {
return $this->data([
'lists' => [],
'count' => 0,
'page_no' => $pageNo,
'page_size' => $pageSize,
]);
}
$count = AssetResource::whereIn('id', $resourceIds)->where('type', $type)->count();
$lists = AssetResource::whereIn('id', $resourceIds)
->where('type', $type)
->order('id', 'desc')
->page($pageNo, $pageSize)
->select();
return $this->data([
'lists' => $lists,
'count' => $count,
'page_no' => $pageNo,
'page_size' => $pageSize,
]);
}
}
+36
View File
@@ -0,0 +1,36 @@
<?php
namespace app\common\model;
use app\common\service\FileService;
class AssetResource extends BaseModel
{
protected $name = 'asset_resource';
protected $autoWriteTimestamp = true;
public function getFileUrlAttr($value)
{
return trim($value) ? FileService::getFileUrl($value) : '';
}
public function setFileUrlAttr($value)
{
return trim($value) ? FileService::setFileUrl($value) : '';
}
public function getCoverUrlAttr($value)
{
return trim($value) ? FileService::getFileUrl($value) : '';
}
public function setCoverUrlAttr($value)
{
return trim($value) ? FileService::setFileUrl($value) : '';
}
// Relation to users via asset_user_resource
public function users()
{
return $this->belongsToMany(AssetUser::class, AssetUserResource::class, 'user_id', 'resource_id');
}
}
+13
View File
@@ -0,0 +1,13 @@
<?php
namespace app\common\model;
use think\model\concern\SoftDelete;
class AssetUser extends BaseModel
{
protected $name = 'asset_user';
protected $autoWriteTimestamp = true;
// Optional: Hide password when returning array/json
protected $hidden = ['password'];
}
@@ -0,0 +1,9 @@
<?php
namespace app\common\model;
class AssetUserResource extends BaseModel
{
protected $name = 'asset_user_resource';
protected $autoWriteTimestamp = 'create_time';
protected $updateTime = false;
}
+31
View File
@@ -0,0 +1,31 @@
CREATE TABLE `asset_user` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`phone` varchar(20) NOT NULL COMMENT '手机号(登录账号)',
`password` varchar(255) NOT NULL COMMENT '密码',
`status` tinyint(1) DEFAULT '1' COMMENT '状态:1=正常,0=禁用',
`create_time` int(11) DEFAULT '0' COMMENT '创建时间',
`update_time` int(11) DEFAULT '0' COMMENT '更新时间',
PRIMARY KEY (`id`),
UNIQUE KEY `uk_phone` (`phone`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='私密资产-用户表';
CREATE TABLE `asset_resource` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`type` tinyint(1) NOT NULL DEFAULT '1' COMMENT '资源类型:1=图片,2=视频,3=语音',
`title` varchar(100) NOT NULL COMMENT '资源名称/标题',
`file_url` varchar(500) NOT NULL COMMENT '文件链接',
`cover_url` varchar(500) DEFAULT '' COMMENT '封面图链接(针对视频/语音)',
`create_time` int(11) DEFAULT '0' COMMENT '创建时间',
`update_time` int(11) DEFAULT '0' COMMENT '更新时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='私密资产-资源表';
CREATE TABLE `asset_user_resource` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`user_id` int(11) unsigned NOT NULL COMMENT '用户ID',
`resource_id` int(11) unsigned NOT NULL COMMENT '资源ID',
`create_time` int(11) DEFAULT '0' COMMENT '创建时间',
PRIMARY KEY (`id`),
KEY `idx_user_id` (`user_id`),
KEY `idx_resource_id` (`resource_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='私密资产-用户与资源关联表';