页面优化

2025-05-07 22:23:48 +08:00
parent 814c6d555e
commit f65bcd59f7
4 changed files with 104 additions and 158 deletions
--- a/src/components/common/AuthModal.vue
+++ b/src/components/common/AuthModal.vue
@@ -32,6 +32,7 @@ onMounted(() => {
 })

 const show = () => {
+  loginType.value = 1;
  visible.value = true
  setTimeout(() => {
    document.querySelectorAll('[data-aos]').forEach(el => {
--- a/src/views/admin/Projects.vue
+++ b/src/views/admin/Projects.vue
@@ -42,79 +42,7 @@ const getCategoryOption = () => {
  })
 }

-const dataSource = ref([
-  {
-    id: 1,
-    title: "电商平台",
-    category: { id: 1, name: "Web应用", value: "Web应用" },
-    tags: [
-      {
-        id: 1,
-        name: "Vue",
-        value: "Vue",
-      }
-    ],
-    author: "Admin",
-    price: 29999,
-    status: "已发布",
-    createdAt: "2024-03-20T00:00:00Z",
-    cover: "https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280",
-    description: "基于Vue3和Node.js开发的电商平台，提供完整的购物流程，包括注册、登录、购物、支付等功能。",
-    features: ["响应式设计，支持多端访问", "完整的商品管理系统", "订单处理和物流跟踪"],
-    technicalStack: ["前端：Vue3 + TypeScript", "后端：Node.js + MongoDB", "部署：Docker"],
-    screenshots: [
-      "https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280",
-      "https://img2.baidu.com/it/u=1629222614,1358629025&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
-    ],
-    video_url: "http://d-jy.nailaoyun.cn//storage/video//20250327/2cc1abf9bd69410ce7c69660daf54260.mp4"
-  },
-  {
-    id: 2,
-    title: "CRM系统",
-    category: { id: 4, name: "企业系统", value: "企业系统" },
-    tags: [
-      {
-        id: 1,
-        name: "Vue",
-        value: "Vue",
-      }
-    ],
-    author: "Admin",
-    price: 19999,
-    status: "已发布",
-    createdAt: "2024-03-15T00:00:00Z",
-    cover: "https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280",
-    description: "基于React和Express开发的CRM系统，提供客户管理、销售跟踪和数据分析功能。",
-    features: ["客户信息管理", "销售漏斗跟踪", "数据分析和报表"],
-    technicalStack: ["前端：React + Redux", "后端：Express + MySQL", "部署：AWS"],
-    screenshots: [
-      "https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280"
-    ],
-    video_url: ""
-  },
-  {
-    id: 3,
-    title: "数据分析平台",
-    category: { id: 1, name: "Web应用", value: "Web应用" },
-    tags: [
-      {
-        id: 1,
-        name: "Vue",
-        value: "Vue",
-      }
-    ],
-    author: "Admin",
-    price: 24999,
-    status: "草稿",
-    createdAt: "2024-03-10T00:00:00Z",
-    cover: "https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280",
-    description: "基于Vue3和Python开发的数据分析平台，提供数据可视化和深度分析功能。",
-    features: ["实时数据仪表盘", "自定义报表生成", "数据导入导出"],
-    technicalStack: ["前端：Vue3 + ECharts", "后端：Python + Django", "部署：Docker + Kubernetes"],
-    screenshots: [],
-    video_url: ""
-  },
-])
+const dataSource = ref([])

 const getList = () => {
  projectListApi({
@@ -177,7 +105,7 @@ const showDetailModal = ref(false)
 const currentDetailItem = ref(null)

 const handlePreview = (file) => {
-  previewImage.value = file.url || file.preview
+  previewImage.value = file.url || file.thumbUrl
  previewVisible.value = true
 }

@@ -830,7 +758,7 @@ getList();

                <div>
                  <!-- 标签 -->
-                  <div>
+                  <div class="mt-3">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目标签</label>
                    <div
                        class="w-full px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer">
@@ -849,7 +777,7 @@ getList();
                  </div>

                  <!-- 项目功能 -->
-                  <div>
+                  <div class="mt-3">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">核心功能</label>
                    <div class="flex flex-wrap gap-2 mb-2">
                  <span
@@ -890,7 +818,7 @@ getList();


                  <!-- 项目描述 -->
-                  <div>
+                  <div class="mt-3">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目描述</label>
                    <textarea
                        v-model="currentItem.description"
@@ -1002,6 +930,7 @@ getList();
                        @change="handleScreenshotsUploadChange"
                        :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
                        multiple
+                        :maxCount="10"
                    >
                      <div>
                        <div
@@ -1140,7 +1069,7 @@ getList();
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
-          <img :src="previewImage" class="max-h-[80vh] max-w-full rounded-lg shadow-xl"/>
+          <img :src="previewImage" class="w-full max-h-[80vh] max-w-full rounded-lg shadow-xl"/>
        </div>
      </div>
    </div>
@@ -1342,4 +1271,13 @@ getList();
  font-weight: 600;
  background-color: var(--color-purple-500);
 }
+:where(.css-dev-only-do-not-override-1p3hq3p).ant-select-multiple .ant-select-selection-placeholder {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 11px;
+  inset-inline-end: 11px;
+  transform: translateY(-50%);
+  transition: all 0.3s;
+  color: var(--color-gray-300);
+}
 </style>
--- a/src/views/admin/common/ProjectDetails.vue
+++ b/src/views/admin/common/ProjectDetails.vue
@@ -195,6 +195,35 @@ const stopPropagation = (e) => {
              </span>
            </div>

+            <!-- 演示视频 -->
+            <div v-if="project.video_url" class="space-y-4">
+              <h2 class="text-xl font-semibold text-white flex items-center">
+                <Play class="w-5 h-5 mr-2 text-rose-500"/>
+                演示视频
+              </h2>
+              <div
+                  class="relative rounded-xl overflow-hidden cursor-pointer h-64 bg-gray-700"
+                  @click="handleVideoPreview" :style="{
+                  backgroundImage: `url('${project.cover}')`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                }"
+              >
+                <div class="absolute inset-0 flex items-center justify-center">
+                  <div class="w-16 h-16 rounded-full bg-rose-600 flex items-center justify-center shadow-lg">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white ml-1" fill="none"
+                         viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
+                    </svg>
+                  </div>
+                </div>
+                <div class="absolute bottom-4 left-4 right-4 text-white p-2 rounded-lg">
+                  <p class="text-sm font-medium">点击播放项目演示视频</p>
+                </div>
+              </div>
+            </div>
+
            <!-- 项目描述 -->
            <div class="space-y-3">
              <h2 class="text-xl font-semibold text-white flex items-center">
@@ -206,55 +235,6 @@ const stopPropagation = (e) => {
              </p>
            </div>

-            <!-- 技术栈 -->
-            <div class="space-y-4">
-              <h2 class="text-xl font-semibold text-white flex items-center">
-                <Code class="w-5 h-5 mr-2 text-rose-500" />
-                技术栈
-              </h2>
-              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div class="bg-gray-700/50 p-4 rounded-xl">
-                  <h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
-                    <Monitor class="w-4 h-4 mr-1.5 text-rose-500" />
-                    前端技术
-                  </h3>
-                  <p class="text-gray-200">{{ project.front }}</p>
-                </div>
-                <div class="bg-gray-700/50 p-4 rounded-xl">
-                  <h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
-                    <Server class="w-4 h-4 mr-1.5 text-rose-500" />
-                    后端技术
-                  </h3>
-                  <p class="text-gray-200">{{ project.service }}</p>
-                </div>
-                <div class="bg-gray-700/50 p-4 rounded-xl">
-                  <h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
-                    <Database class="w-4 h-4 mr-1.5 text-rose-500" />
-                    部署架构
-                  </h3>
-                  <p class="text-gray-200">{{ project.deploy }}</p>
-                </div>
-              </div>
-            </div>
-
-            <!-- 核心功能 -->
-            <div class="space-y-4">
-              <h2 class="text-xl font-semibold text-white flex items-center">
-                <Award class="w-5 h-5 mr-2 text-rose-500" />
-                核心功能
-              </h2>
-              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                <div
-                    v-for="(feature, index) in project.features"
-                    :key="index"
-                    class="flex items-start"
-                >
-                  <CheckCircle class="w-5 h-5 text-rose-500 mr-2 flex-shrink-0 mt-0.5" />
-                  <span class="text-gray-300">{{ feature.name }}</span>
-                </div>
-              </div>
-            </div>
-
            <!-- 项目截图 -->
            <div v-if="project.screenshots && project.screenshots.length > 0" class="space-y-4">
              <h2 class="text-xl font-semibold text-white flex items-center">
@@ -285,30 +265,6 @@ const stopPropagation = (e) => {
              </div>
            </div>

-            <!-- 演示视频 -->
-            <div v-if="project.video_url" class="space-y-4">
-              <h2 class="text-xl font-semibold text-white flex items-center">
-                <Play class="w-5 h-5 mr-2 text-rose-500"/>
-                演示视频
-              </h2>
-              <div
-                  class="relative rounded-xl overflow-hidden cursor-pointer h-64 bg-gray-700"
-                  @click="handleVideoPreview"
-              >
-                <div class="absolute inset-0 flex items-center justify-center">
-                  <div class="w-16 h-16 rounded-full bg-rose-600 flex items-center justify-center shadow-lg">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white ml-1" fill="none"
-                         viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
-                    </svg>
-                  </div>
-                </div>
-                <div class="absolute bottom-4 left-4 right-4 text-white bg-black/50 p-2 rounded-lg">
-                  <p class="text-sm font-medium">点击播放项目演示视频</p>
-                </div>
-              </div>
-            </div>
          </div>

          <!-- 右侧信息 -->
@@ -378,6 +334,56 @@ const stopPropagation = (e) => {
                </div>
              </div>
            </div>
+
+            <!-- 技术栈 -->
+            <div class="space-y-4">
+              <h2 class="text-xl font-semibold text-white flex items-center">
+                <Code class="w-5 h-5 mr-2 text-rose-500" />
+                技术栈
+              </h2>
+              <div class="grid grid-cols-1 md:grid-cols-1 gap-4">
+                <div class="bg-gray-700/50 p-4 rounded-xl">
+                  <h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
+                    <Monitor class="w-4 h-4 mr-1.5 text-rose-500" />
+                    前端技术
+                  </h3>
+                  <p class="text-gray-200 break-words">{{ project.front }}</p>
+                </div>
+                <div class="bg-gray-700/50 p-4 rounded-xl">
+                  <h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
+                    <Server class="w-4 h-4 mr-1.5 text-rose-500" />
+                    后端技术
+                  </h3>
+                  <p class="text-gray-200 break-words">{{ project.service }}</p>
+                </div>
+                <div class="bg-gray-700/50 p-4 rounded-xl">
+                  <h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
+                    <Database class="w-4 h-4 mr-1.5 text-rose-500" />
+                    部署架构
+                  </h3>
+                  <p class="text-gray-200 break-words">{{ project.deploy }}</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- 核心功能 -->
+            <div class="space-y-4">
+              <h2 class="text-xl font-semibold text-white flex items-center">
+                <Award class="w-5 h-5 mr-2 text-rose-500" />
+                核心功能
+              </h2>
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div
+                    v-for="(feature, index) in project.features"
+                    :key="index"
+                    class="flex items-start"
+                >
+                  <CheckCircle class="w-5 h-5 text-rose-500 mr-2 flex-shrink-0 mt-0.5" />
+                  <span class="text-gray-300">{{ feature.name }}</span>
+                </div>
+              </div>
+            </div>
+
          </div>
        </div>
      </div>
--- a/vite.config.js
+++ b/vite.config.js
@@ -18,7 +18,8 @@ export default defineConfig({
        port: 8888,
        proxy: {
            '/api': {
-                target: 'http://127.0.0.1:18007/api/',
+                // target: 'http://127.0.0.1:18007/api/',
+                target: 'http://127.0.0.1:18001/api/',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }