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

admin/src/api/asset.ts

@@ -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 })
+}

admin/src/views/asset/resource/index.vue

@@ -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>

admin/src/views/asset/user/index.vue

@@ -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>