From abb9a4dbe70a663e5f5a674fc388bc461fd51941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Sat, 1 Mar 2025 14:04:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E7=A4=BE=E5=8C=BA?=
 =?UTF-8?q?=E6=9D=BF=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/cms/cmsArticle/model/index.ts |   2 +
 assets/css/base.css               |  11 ++
 components/Content.vue            |   4 +-
 nuxt.config.ts                    |   5 +-
 pages/ask/[id].vue                |   7 +-
 pages/ask/add.vue                 | 298 ++++++++++++++++++++++++++++++
 pages/ask/detail/[id].vue         | 263 ++++++++++++++++++++++++++
 pages/ask/index.vue               | 129 +++++++++++++
 pages/case/[id].vue               |  13 --
 9 files changed, 710 insertions(+), 22 deletions(-)
 create mode 100644 pages/ask/add.vue
 create mode 100644 pages/ask/detail/[id].vue
 create mode 100644 pages/ask/index.vue

diff --git a/api/cms/cmsArticle/model/index.ts b/api/cms/cmsArticle/model/index.ts
index 822a2e3..f262036 100644
--- a/api/cms/cmsArticle/model/index.ts
+++ b/api/cms/cmsArticle/model/index.ts
@@ -74,6 +74,8 @@ export interface CmsArticle {
   toUsers?: string;
   // 文章内容
   content?: string;
+  // 多语言
+  lang?: string;
   // 是否翻译
   translation?: boolean;
   // 编辑器
diff --git a/assets/css/base.css b/assets/css/base.css
index 4e54bba..dbff945 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -23,3 +23,14 @@ table, th, td {vertical-align: middle}
 h1,h2,h3,h4{font-size:12px;font-weight:bold;}
 hr {border: 0;border-top:1px solid #ccc;height:0;}
 
+/* 修复编辑器样式 */
+.md-editor-footer{
+  height: auto !important;
+}
+.md-editor-preview-wrapper{
+  padding: 0 !important;
+}
+svg.md-editor-icon{
+  width: 20px !important;
+  height: 20px !important;
+}
diff --git a/components/Content.vue b/components/Content.vue
index ca6a77d..721a6b4 100644
--- a/components/Content.vue
+++ b/components/Content.vue
@@ -1,6 +1,6 @@
 <template>
-  <MdPreview v-if="editor === 2" :id="id" :modelValue="data" />
-  <div v-else v-html="data"></div>
+  <div v-if="editor === 1" v-html="data"></div>
+  <MdPreview v-else :id="id" :modelValue="data" />
 </template>
 
 <script setup lang="ts">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cfbfec6..033d786 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,7 +19,7 @@ const appName = '网宿软件';
 
 const isDev = process.env.NODE_ENV === 'development'
 if(isDev){
-    apiBaseUrl = 'http://127.0.0.1:9000/api'
+    // apiBaseUrl = 'http://127.0.0.1:9000/api'
 }
 
 export default defineNuxtConfig({
@@ -62,8 +62,7 @@ export default defineNuxtConfig({
                 },
                 { name: 'apple-mobile-web-app-capable', content: 'yes'},
                 { name: 'apple-mobile-web-app-status-bar-style', content: 'black'},
-                { charset: 'utf-8' },
-                { viewport: 'width=device-width, initial-scale=1' },
+                { charset: 'utf-8' }
             ],
             link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
             script: [
diff --git a/pages/ask/[id].vue b/pages/ask/[id].vue
index f6d0b02..3b816f9 100644
--- a/pages/ask/[id].vue
+++ b/pages/ask/[id].vue
@@ -7,12 +7,11 @@
         <span class="text-large font-600 line-clamp-1"> 技术社区 </span>
       </template>
       <template #extra>
-        <FormOutlined />
-        <el-button :icon="Search">发布文章</el-button>
+        <el-button :icon="EditPen" type="primary" @click="navigateTo('/ask/add')">发布文章</el-button>
       </template>
       <el-row id="container" :gutter="24" class="clearfix">
         <el-col v-for="(item,index) in list" :key="index" :sm="6" :xs="24" class="left mb-8">
-          <el-card :body-style="{ padding: '0px' }" class=" hover:bg-gray-50 cursor-pointer" shadow="hover" @click="navigateTo(`/detail/${item.articleId}.html`)">
+          <el-card :body-style="{ padding: '0px' }" class=" hover:bg-gray-50 cursor-pointer" shadow="hover" @click="navigateTo(`/ask/detail/${item.articleId}`)">
             <el-image
               :lazy="true"
               :src="item.image"
@@ -43,7 +42,7 @@
 
 </template>
 <script lang="ts" setup>
-import {ArrowLeft, Search} from '@element-plus/icons-vue'
+import {ArrowLeft, Search, EditPen} from '@element-plus/icons-vue'
 import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
 import dayjs from "dayjs";
 import type {CmsWebsite, CmsWebsiteParam} from "~/api/cms/cmsWebsite/model";
diff --git a/pages/ask/add.vue b/pages/ask/add.vue
new file mode 100644
index 0000000..badb4f8
--- /dev/null
+++ b/pages/ask/add.vue
@@ -0,0 +1,298 @@
+<template>
+
+  <!-- 主体部分 -->
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
+    <el-page-header :icon="ArrowLeft" @back="goBack">
+      <template #content>
+        <span class="text-large font-600 line-clamp-1"> 发布文章 </span>
+      </template>
+
+      <div class="my-5 sm:my-10">
+        <el-form :model="form" label-width="auto" size="large">
+          <el-form-item label-position="left" label-width="0">
+            <el-input v-model="form.title" placeholder="文章标题"/>
+          </el-form-item>
+          <el-form-item label-position="left" label-width="0">
+            <!-- 编辑器 -->
+            <MdEditor v-model="form.content" @onUploadImg="onUploadImg"/>
+          </el-form-item>
+          <el-form-item label="关联栏目" label-position="left">
+            <el-switch v-model="hasCategory" />
+            <div v-if="hasCategory" class="mx-5">
+              <el-cascader v-model="category" :options="categoryList" placeholder="选项关联的栏目" @change="handleCategory" />
+            </div>
+          </el-form-item>
+          <el-form-item label="选择话题" label-position="left">
+            <div class="w-lg">
+              <el-select
+                v-model="topic"
+                multiple
+                placeholder="选择话题"
+              >
+                <el-option
+                  v-for="item in topicList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label-position="left" label-width="0">
+            <div class="m-auto text-center flex justify-center text-center items-center">
+              <el-button size="large" @click="saveDraft">存草稿</el-button>
+              <el-button class="sm:w-auto w-full" size="large" type="primary" @click="onRelease">发布</el-button>
+            </div>
+          </el-form-item>
+
+
+          <div class="flex flex-col">
+            <el-form-item class="my-4" label-position="left">
+
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+
+    </el-page-header>
+  </div>
+
+</template>
+<script lang="ts" setup>
+import {ArrowLeft, Search, EditPen} from '@element-plus/icons-vue'
+import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
+import dayjs from "dayjs";
+import {MdEditor} from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import type {CmsWebsite, CmsWebsiteParam} from "~/api/cms/cmsWebsite/model";
+import {addCmsArticle, pageCmsArticle, updateCmsArticle} from "~/api/cms/cmsArticle";
+import type {UploadUserFile} from 'element-plus'
+import useFormData from "~/utils/use-form-data";
+import {uploadOss} from "~/api/system/file";
+import {updateCmsWebsiteAll} from "~/api/cms/cmsWebsite";
+import {addShopMerchantApply, updateShopMerchantApply} from "~/api/shop/shopMerchantApply";
+import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
+import {listDictData} from "~/api/system/dict-data";
+import {getLang} from "~/utils/common";
+
+const route = useRoute();
+const router = useRouter();
+// 页面信息
+const list = ref<CmsArticle[]>([]);
+const total = ref(0);
+const id = ref<number>();
+const hasCategory = ref<boolean>(false);
+const files = ref<UploadUserFile[]>([])
+const isUpdate = ref<boolean>(false);
+const categoryList = ref<CmsNavigation[]>([])
+const category = ref<any>()
+const topic = ref<string>()
+const topicList = ref<any[]>()
+const srcList = ref<string[]>([])
+const inputWidth = ref<string>('180px');
+const showSearch = ref<boolean>(false);
+const loading = ref(false)
+
+// 搜索表单
+const where = reactive<CmsWebsiteParam>({
+  keywords: '',
+  page: 1,
+  limit: 12,
+  status: undefined,
+  recommend: undefined,
+  search: true,
+  websiteType: undefined,
+  categoryId: undefined,
+  lang: undefined
+});
+
+
+// 配置信息
+const {form, assignFields} = useFormData<CmsArticle>({
+  // 文章id
+  articleId: undefined,
+  // 文章模型
+  model: undefined,
+  // 文章标题
+  title: undefined,
+  // 分类类型
+  type: undefined,
+  // 展现方式
+  showType: undefined,
+  // 文章类型
+  categoryId: 4094,
+  // 文章分类
+  categoryName: undefined,
+  parentId: undefined,
+  // 封面图
+  image: undefined,
+  // 附件
+  files: undefined,
+  // 附件
+  fileList: [],
+  // 缩列图
+  thumbnail: undefined,
+  // 视频地址
+  video: undefined,
+  // 上传的文件类型
+  accept: undefined,
+  // 来源
+  source: undefined,
+  // 标签
+  tags: undefined,
+  // 文章内容
+  content: undefined,
+  // 文章编辑器
+  editor: 2,
+  // 多语言
+  lang: getLang(),
+  // 虚拟阅读量
+  virtualViews: undefined,
+  // 实际阅读量
+  actualViews: undefined,
+  // 访问权限
+  permission: 0,
+  // 访问密码
+  password: undefined,
+  password2: undefined,
+  // 用户ID
+  userId: undefined,
+  // 用户昵称
+  nickname: undefined,
+  // 账号
+  username: undefined,
+  // 用户头像
+  // userAvatar: undefined,
+  author: undefined,
+  // 所属门店ID
+  shopId: undefined,
+  //
+  likes: undefined,
+  // 排序
+  sortNumber: undefined,
+  // 备注
+  comments: undefined,
+  // 状态
+  status: undefined,
+  // 创建时间
+  createTime: undefined,
+  // 更新时间
+  updateTime: undefined,
+  // 租户ID
+  tenantId: undefined,
+  // 租户名称
+  tenantName: undefined,
+  // 租户logo
+  logo: undefined,
+  // 详情页路径
+  detail: undefined
+});
+
+const goBack = () => {
+  router.back();
+}
+
+const handleCategory = () => {
+
+}
+const handleFocus = () => {
+  inputWidth.value = '400px'; // 聚焦时宽度
+}
+const handleBlur = () => {
+  inputWidth.value = '180px'; // 聚焦时宽度
+}
+
+const showDomain = (item: CmsWebsite) => {
+  id.value = Number(item.websiteId);
+};
+
+const hideDomain = () => {
+  id.value = 0;
+};
+
+// 加载页面数据
+const reload = async () => {
+  // 字典Topics
+  listDictData({dictCode: 'Topics'}).then(data => {
+    topicList.value = data;
+  })
+  listDictData({dictCode: 'AskColumn'}).then(data => {
+    categoryList.value = data;
+  })
+  await pageCmsArticle({
+    ...where,
+    model: 'ask'
+  }).then(response => {
+    if (response?.list) {
+      list.value = response?.list;
+      total.value = response.count;
+    }
+  }).catch(() => {
+  }).finally(() => showSearch.value = false)
+}
+
+/**
+ * 搜索
+ * @param data
+ */
+const search = (data: CmsArticleParam) => {
+  where.page = data.page;
+  reload();
+}
+
+// 图片上传
+const onUploadImg = async (files: any, callback: any) => {
+  const res = await Promise.all(
+    files.map((file: any) => {
+      return new Promise((rev, rej) => {
+        const form = new FormData();
+        form.append('file', file);
+        uploadOss(file).then((res: any) => rev(res))
+          .catch((error: any) => rej(error));
+      });
+    })
+  );
+  callback(res.map((item) => item.url));
+};
+
+const saveDraft = () => {
+
+}
+
+const onRelease = () => {
+  if (loading.value) return // 防止重复提交
+
+  form.files = undefined;
+  if (srcList.value.length > 0) {
+    form.files = JSON.stringify(srcList.value)
+  }
+  // if(!form.developer){
+  //   form.developer = developer.value;
+  // }
+
+  loading.value = true
+  const saveOrUpdate = isUpdate.value ? updateCmsArticle : addCmsArticle;
+  saveOrUpdate(form).then(() => {
+    ElMessage.success('发布成功');
+  });
+
+}
+
+watch(
+  () => route.query.id,
+  (id) => {
+    if (id) {
+      isUpdate.value = true;
+    }
+    reload();
+  },
+  {immediate: true}
+);
+</script>
+<style lang="scss">
+.el-input {
+  transition: width 0.3s ease;
+}
+</style>
+
+
diff --git a/pages/ask/detail/[id].vue b/pages/ask/detail/[id].vue
new file mode 100644
index 0000000..c93eaa1
--- /dev/null
+++ b/pages/ask/detail/[id].vue
@@ -0,0 +1,263 @@
+<!-- 文章详情 -->
+<template>
+  <!-- 主体部分 -->
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
+    <el-page-header :icon="ArrowLeft" @back="goBack">
+      <template #content>
+        <span class="font-600 mr-3"> 文章详情 </span>
+      </template>
+
+      <el-card class="my-5 sm:my-10 sm:px-2" shadow="hover">
+
+        <!-- 新闻详细 -->
+        <div class=" bg-white">
+          <h1 class="pt-5 text-3xl">{{ form.title }}</h1>
+          <div class="flex items-center justify-between py-4">
+            <el-space class="text-gray-400" size="large">
+              <span>{{ $t('createTime') }}：{{ dayjs(form.createTime).format('YYYY-MM-DD') }}</span>
+              <span>{{ $t('author') }}：{{ form.author }}</span>
+              <span>{{ $t('click') }}：{{ getViews(form) }}</span>
+              <span v-if="form.source">文章来源：{{ form.source }}</span>
+            </el-space>
+            <!-- Baidu Button BEGIN -->
+            <el-space class="flex items-center">
+<!--              <a href="#" class="bds_more" data-cmd="more">朋友圈</a>-->
+<!--              <a href="#" class="bds_qzone" data-cmd="qzone">QQ空间</a>-->
+<!--              <a href="#" class="bds_tsina" data-cmd="tsina">新浪</a>-->
+<!--              <a href="#" class="bds_tqq" data-cmd="tqq">腾讯</a>-->
+<!--              <a href="#" class="bds_weixin" data-cmd="weixin">微信</a>-->
+            </el-space>
+          </div>
+          <!-- 文章摘要 -->
+          <div v-if="form.comments" class="screen-item bg-orange-50 text-gray-600 p-3 text-lg">
+            {{ form.comments }}
+          </div>
+          <!-- 文章附件 -->
+          <div v-if="form.files" class="screen-item">
+            <div class="text-gray-400 py-3 text-sm">图片附件</div>
+            <el-scrollbar>
+              <div class="flex">
+                <el-image
+                    v-for="(item,index) in JSON.parse(form.files)"
+                    :key="index"
+                    :initial-index="4"
+                    :max-scale="7"
+                    :min-scale="0.2"
+                    :preview-src-list="srcList"
+                    :src="item"
+                    :zoom-rate="1.2"
+                    class="scrollbar-item w-[240px] max-h-[180px] mr-4 mb-4"
+                    fit="contain"
+                />
+              </div>
+            </el-scrollbar>
+          </div>
+          <!-- 内容组件 -->
+          <Content :data="form.content" :editor="form?.editor" class="content text-lg py-5" />
+          <NextArticle :articleId="articleId" />
+          <h3 class="tag">{{ $t('articleUrl') }}：{{ locationUrl() }} </h3>
+          <Tags :data="form.tags" />
+        </div>
+      </el-card>
+
+
+      <!-- 最近浏览 -->
+      <CmsArticleRecently :data="form" type="article" />
+      <!-- 相关产品和相关新闻 -->
+      <div class="relate_list">
+        <CmsProductRelated :data="form" />
+        <CmsArticleRelated :data="form" />
+      </div>
+
+    </el-page-header>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
+import type {BreadcrumbItem} from "~/types/global";
+import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
+import {getNavIdByParamsId, getViews, locationUrl, navTo, paramsId} from "~/utils/common";
+import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
+import useFormData from "~/utils/use-form-data";
+import dayjs from "dayjs";
+import type {Layout} from "~/api/layout/model";
+import {
+  getCmsArticle
+} from "~/api/cms/cmsArticle";
+import {listCmsNavigation} from "~/api/cms/cmsNavigation";
+import CmsArticleRecently from "~/components/CmsRecently.vue";
+import Tags from "~/components/Tags.vue";
+import Content from "~/components/Content.vue";
+
+// 引入状态管理
+const route = useRoute();
+const router = useRouter();
+const layout = ref<Layout>({});
+const articleId = ref();
+const i18n = useI18n();
+const breadcrumb = ref<BreadcrumbItem>();
+const showPassword = ref<boolean>();
+const category = ref<CmsNavigation[]>([]);
+const srcList = ref<any[]>([]);
+
+// 配置信息
+const {form, assignFields} = useFormData<CmsArticle>({
+  // 文章id
+  articleId: undefined,
+  // 文章模型
+  model: undefined,
+  // 文章标题
+  title: undefined,
+  // 分类类型
+  type: undefined,
+  // 展现方式
+  showType: undefined,
+  // 文章类型
+  categoryId: undefined,
+  // 文章分类
+  categoryName: undefined,
+  parentId: undefined,
+  // 封面图
+  image: undefined,
+  // 附件
+  files: undefined,
+  // 附件
+  fileList: [],
+  // 缩列图
+  thumbnail: undefined,
+  // 视频地址
+  video: undefined,
+  // 上传的文件类型
+  accept: undefined,
+  // 来源
+  source: undefined,
+  // 标签
+  tags: undefined,
+  // 文章内容
+  content: undefined,
+  // 文章编辑器
+  editor: undefined,
+  // 虚拟阅读量
+  virtualViews: undefined,
+  // 实际阅读量
+  actualViews: undefined,
+  // 访问权限
+  permission: undefined,
+  // 访问密码
+  password: undefined,
+  password2: undefined,
+  // 用户ID
+  userId: undefined,
+  // 用户昵称
+  nickname: undefined,
+  // 账号
+  username: undefined,
+  // 用户头像
+  // userAvatar: undefined,
+  author: undefined,
+  // 所属门店ID
+  shopId: undefined,
+  //
+  likes: undefined,
+  // 排序
+  sortNumber: undefined,
+  // 备注
+  comments: undefined,
+  // 状态
+  status: undefined,
+  // 创建时间
+  createTime: undefined,
+  // 更新时间
+  updateTime: undefined,
+  // 租户ID
+  tenantId: undefined,
+  // 租户名称
+  tenantName: undefined,
+  // 租户logo
+  logo: undefined,
+  // 详情页路径
+  detail: undefined
+});
+
+// 搜索表单
+const where = reactive<CmsArticleParam>({
+  keywords: '',
+  page: 1,
+  limit: 20,
+  status: 0,
+  parentId: undefined,
+  categoryId: undefined,
+  lang: i18n.locale.value
+});
+
+const goBack = () => {
+  router.back(); // 返回上一页
+  // window.history.back();
+}
+
+// 请求数据
+const reload = async () => {
+  await getCmsArticle(articleId.value).then(data => {
+    assignFields(data)
+    layout.value.banner = data?.banner;
+    // 应用截图
+    if(data.files){
+      const imgArr = JSON.parse(data.files);
+      imgArr.map((item: any) => {
+        srcList.value.push(item)
+      })
+    }
+    // 二级栏目分类
+    if (data.parentId) {
+      listCmsNavigation({parentId: data.parentId}).then(list => {
+        category.value = list;
+      })
+    }
+
+    if(form.permission === 1){
+      console.log('登录可见')
+      return;
+    }
+    if(form.permission === 2){
+      console.log('需要密码')
+      showPassword.value = true;
+      return;
+    }
+  }).catch(() => {
+    navigateTo('/404');
+  })
+
+  // seo
+  useSeoMeta({
+    description: form?.comments,
+    keywords: form.title,
+    titleTemplate: `${form?.title}` + ' - %s',
+  })
+
+  // 面包屑
+  breadcrumb.value = form
+}
+
+watch(
+    () => route.params.id,
+    (id) => {
+      articleId.value = getNavIdByParamsId(id);
+      reload();
+    },
+    { immediate: true }
+);
+</script>
+
+<style lang="scss">
+
+.scrollbar-flex-content {
+  display: flex;
+}
+.scrollbar-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+</style>
diff --git a/pages/ask/index.vue b/pages/ask/index.vue
new file mode 100644
index 0000000..4997d27
--- /dev/null
+++ b/pages/ask/index.vue
@@ -0,0 +1,129 @@
+<template>
+
+  <!-- 主体部分 -->
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
+    <el-page-header :icon="ArrowLeft" @back="goBack">
+      <template #content>
+        <span class="text-large font-600 line-clamp-1"> 技术社区 </span>
+      </template>
+      <template #extra>
+        <el-button :icon="EditPen" type="primary" @click="navigateTo('/ask/add')">发布文章</el-button>
+      </template>
+      <el-row id="container" :gutter="24" class="clearfix">
+        <el-col v-for="(item,index) in list" :key="index" :sm="6" :xs="24" class="left mb-8">
+          <el-card :body-style="{ padding: '0px' }" class=" hover:bg-gray-50 cursor-pointer" shadow="hover" @click="navigateTo(`/detail/${item.articleId}.html`)">
+            <el-image
+              :lazy="true"
+              :src="item.image"
+              class="w-full md:h-[166px] h-[199px] cursor-pointer bg-gray-50 transition-transform duration-300 ease-in-out hover:scale-110" fit="cover"/>
+            <div class="flex-1 px-4 py-5 sm:p-6 !p-4">
+              <div class="text-gray-700 dark:text-white text-base font-semibold  flex flex-col gap-1.5">
+                <div class="flex-1 text-xl cursor-pointer flex min-h-[56px]">
+                  {{ item.title }}
+                </div>
+              </div>
+              <div class="button-group flex justify-between items-center mt-3 text-sm">
+                <el-space class="flex items-end">
+                  <div class="text-gray-400 gap-1 flex items-center"><el-icon><View /></el-icon><span>{{ getViews(item) }}</span></div>
+                </el-space>
+                <div class="text-gray-400">
+                  <el-avatar v-if="item.avatar" :src="`${item.avatar}`" size="small" />
+                  {{ dayjs(item.createTime).format('YYYY-MM-DD') }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-page-header>
+
+    <Pagination :total="total" @done="search"/>
+  </div>
+
+</template>
+<script lang="ts" setup>
+import {ArrowLeft, Search, EditPen} from '@element-plus/icons-vue'
+import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
+import dayjs from "dayjs";
+import type {CmsWebsite, CmsWebsiteParam} from "~/api/cms/cmsWebsite/model";
+import {pageCmsArticle} from "~/api/cms/cmsArticle";
+import {getViews} from "~/utils/common";
+
+const route = useRoute();
+const router = useRouter();
+// 页面信息
+const list = ref<CmsArticle[]>([]);
+const total = ref(0);
+const id = ref<number>();
+const inputWidth = ref<string>('180px');
+const showSearch = ref<boolean>(false);
+
+// 搜索表单
+const where = reactive<CmsWebsiteParam>({
+  keywords: '',
+  page: 1,
+  limit: 12,
+  status: undefined,
+  recommend: undefined,
+  search: true,
+  websiteType: undefined,
+  categoryId: undefined,
+  lang: undefined
+});
+
+const goBack = () => {
+  router.back();
+}
+const handleFocus = () => {
+  inputWidth.value = '400px'; // 聚焦时宽度
+}
+const handleBlur = () => {
+  inputWidth.value = '180px'; // 聚焦时宽度
+}
+
+const showDomain = (item: CmsWebsite) => {
+  id.value = Number(item.websiteId);
+};
+
+const hideDomain = () => {
+  id.value = 0;
+};
+
+// 加载页面数据
+const reload = async () => {
+  await pageCmsArticle({
+    ...where,
+    model: 'ask'
+  }).then(response => {
+    if (response?.list) {
+      list.value = response?.list;
+      total.value = response.count;
+    }
+  }).catch(() => {
+  }).finally(() => showSearch.value = false)
+}
+
+/**
+ * 搜索
+ * @param data
+ */
+const search = (data: CmsArticleParam) => {
+  where.page = data.page;
+  reload();
+}
+
+watch(
+  () => route.params.id,
+  () => {
+    reload();
+  },
+  {immediate: true}
+);
+</script>
+<style lang="scss">
+.el-input {
+  transition: width 0.3s ease;
+}
+</style>
+
+
diff --git a/pages/case/[id].vue b/pages/case/[id].vue
index 72451cd..7549f07 100644
--- a/pages/case/[id].vue
+++ b/pages/case/[id].vue
@@ -6,19 +6,6 @@
       <template #content>
         <span class="text-large font-600"> {{ page.title }} </span>
       </template>
-      <template #extra>
-        <el-space class="flex items-center">
-          <el-select v-model="value" clearable placeholder="筛选" style="width: 200px">
-            <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-          <el-input v-model="where.keywords" :placeholder="`${$t('searchKeywords')}...`" :suffix-icon="Search" @change="reload"/>
-        </el-space>
-      </template>
       <el-row :gutter="24" id="container" class="clearfix">
         <el-col v-for="(item,index) in list" :key="index" :span="6" class="left mb-8">
           <el-card :body-style="{ padding: '0px' }" class=" hover:bg-gray-50 cursor-pointer" shadow="hover" @click="navigateTo(`/detail/${item.articleId}.html`)">