From a063e9b1c918afb683460393312d43245ef8e4fc Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Thu, 6 Jan 2022 22:00:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E5=91=BD?=
 =?UTF-8?q?=E5=90=8D=E5=92=8C=E5=93=8D=E5=BA=94=E5=BC=8F=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  17 ++-
 package.json                                  |   2 +-
 src/App.vue                                   |   2 +-
 src/components/navbar.vue                     |  22 ++--
 src/routers/index.js                          |  20 +--
 src/views/Index.vue                           |   4 +-
 .../devepage.vue => index-list/develop.vue}   |   0
 .../download-mould.vue}                       |   2 +
 src/views/index-list/plugin-shop.vue          | 124 ++++++++++++++++++
 src/views/{tablist => index-list}/upload.vue  |  27 ++--
 src/views/tablist/plugshop.vue                | 109 ---------------
 src/views/user/sign-in.vue                    |   2 +-
 yarn.lock                                     |  10 +-
 13 files changed, 178 insertions(+), 163 deletions(-)
 rename src/views/{tablist/devepage.vue => index-list/develop.vue} (100%)
 rename src/views/{tablist/downloadpage.vue => index-list/download-mould.vue} (66%)
 create mode 100644 src/views/index-list/plugin-shop.vue
 rename src/views/{tablist => index-list}/upload.vue (88%)
 delete mode 100644 src/views/tablist/plugshop.vue

diff --git a/package-lock.json b/package-lock.json
index be25be8..18ff6ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "eslint-plugin-html": "^6.2.0",
         "eslint-plugin-import": "^2.25.2",
         "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-vue": "^7.19.1",
+        "eslint-plugin-vue": "^7.20.0",
         "husky": "^7.0.2",
         "lint-staged": "^11.2.3",
         "prettier": "^2.4.1",
@@ -4870,11 +4870,10 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.19.1.tgz",
-      "integrity": "sha1-Q1+yznEoQqlTCyjqy4g2gOjqpPM=",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.20.0.tgz",
+      "integrity": "sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "eslint-utils": "^2.1.0",
         "natural-compare": "^1.4.0",
@@ -4885,7 +4884,7 @@
         "node": ">=8.10"
       },
       "peerDependencies": {
-        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0-0"
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/semver": {
@@ -12767,9 +12766,9 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.19.1.tgz",
-      "integrity": "sha1-Q1+yznEoQqlTCyjqy4g2gOjqpPM=",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.20.0.tgz",
+      "integrity": "sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==",
       "dev": true,
       "requires": {
         "eslint-utils": "^2.1.0",
diff --git a/package.json b/package.json
index e887d2e..6644b10 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "eslint-plugin-html": "^6.2.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.19.1",
+    "eslint-plugin-vue": "^7.20.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.2.3",
     "prettier": "^2.4.1",
diff --git a/src/App.vue b/src/App.vue
index 32a40a7..e56641a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-config-provider :locale="local">
+  <el-config-provider>
     <el-container>
       <router-view></router-view>
     </el-container>
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 0b83675..2a16add 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -2,10 +2,10 @@
   <div class="flex items-center justify-between pr-5 shadow-sm">
     <!-- <h1 class="text-lg font-medium py-3 px-6"></h1> -->
     <el-menu :default-active="activeIndex" class="el-menu-demo flex-1" mode="horizontal">
-      <el-menu-item index="1" @click="toshop">插件商城</el-menu-item>
-      <el-menu-item index="2" @click="todevelop">开发教程</el-menu-item>
-      <el-menu-item index="3" @click="todown">下载模板</el-menu-item>
-      <el-menu-item index="4" @click="toup">上传插件</el-menu-item>
+      <el-menu-item index="1" @click="toShop">插件商城</el-menu-item>
+      <el-menu-item index="2" @click="toDevelop">开发教程</el-menu-item>
+      <el-menu-item index="3" @click="toDown">下载模板</el-menu-item>
+      <el-menu-item index="4" @click="toUp">上传插件</el-menu-item>
     </el-menu>
     <el-dropdown>
       <span class="flex items-center">
@@ -52,19 +52,19 @@ function signOut() {
   router.push({ name: 'signin' });
 }
 
-function toshop() {
-  router.push({ name: 'plugshop' });
+function toShop() {
+  router.push({ name: 'plugin-shop' });
 }
 
-function todevelop() {
-  router.push({ name: 'devepage' });
+function toDevelop() {
+  router.push({ name: 'develop' });
 }
 
-function todown() {
-  router.push({ name: 'downloadpage' });
+function toDown() {
+  router.push({ name: 'download-mould' });
 }
 
-function toup() {
+function toUp() {
   router.push({ name: 'upload' });
 }
 </script>
diff --git a/src/routers/index.js b/src/routers/index.js
index 5c465be..dc06ab7 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -45,24 +45,24 @@ const router = createRouter({
       component: () => import('views/Index.vue'),
       children: [
         {
-          path: '/store/home/plugshop',
-          name: 'plugshop',
-          component: () => import('views/tablist/plugshop.vue'),
+          path: '/store/home/plugin-shop',
+          name: 'plugin-shop',
+          component: () => import('views/index-list/plugin-shop.vue'),
         },
         {
-          path: '/store/home/devepage',
-          name: 'devepage',
-          component: () => import('views/tablist/devepage.vue'),
+          path: '/store/home/develop',
+          name: 'develop',
+          component: () => import('views/index-list/develop.vue'),
         },
         {
-          path: '/store/home/downloadpage',
-          name: 'downloadpage',
-          component: () => import('views/tablist/downloadpage.vue'),
+          path: '/store/home/download-mould',
+          name: 'download-mould',
+          component: () => import('views/index-list/download-mould.vue'),
         },
         {
           path: '/store/home/upload',
           name: 'upload',
-          component: () => import('views/tablist/upload.vue'),
+          component: () => import('views/index-list/upload.vue'),
         },
       ],
     },
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 99f0814..e9d8cca 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -21,12 +21,12 @@ export default {};
 </script>
 <style>
 .el-main {
-  padding: 5rem 12rem;
+  padding: 2rem 12rem;
   /* background-color: #ff6700; */
   overflow: hidden;
 }
 .top {
-  padding: 5rem 10rem;
+  padding: 2rem 10rem;
   width: 100%;
 }
 </style>
diff --git a/src/views/tablist/devepage.vue b/src/views/index-list/develop.vue
similarity index 100%
rename from src/views/tablist/devepage.vue
rename to src/views/index-list/develop.vue
diff --git a/src/views/tablist/downloadpage.vue b/src/views/index-list/download-mould.vue
similarity index 66%
rename from src/views/tablist/downloadpage.vue
rename to src/views/index-list/download-mould.vue
index 4503b75..d3c2888 100644
--- a/src/views/tablist/downloadpage.vue
+++ b/src/views/index-list/download-mould.vue
@@ -1 +1,3 @@
 <template>下载模板</template>
+
+<style></style>
diff --git a/src/views/index-list/plugin-shop.vue b/src/views/index-list/plugin-shop.vue
new file mode 100644
index 0000000..d071757
--- /dev/null
+++ b/src/views/index-list/plugin-shop.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="flex flex-1 py-10">
+    <el-input v-model="keyword" placeholder="请输入内容" />
+    <el-select v-model="industry" filterable placeholder="请选择行业">
+      <el-option v-for="item in industryList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+    </el-select>
+    <el-select v-model="sort" filterable placeholder="请选择分类">
+      <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+    </el-select>
+    <el-button type="primary" size="small" class="w-60px h-40px">搜索</el-button>
+  </div>
+  <div class="shop-content flex py-5">
+    <img src="@/assets/u1.jpg" alt="" class="shop-left h-90 border-20 p-1 box-border" />
+    <div class="shop-right ml-6">
+      <div>
+        <span class="text-2xl font-semibold">{{ pluginName }}</span> <span class="ml-5">{{ versionNumber }}</span>
+      </div>
+      <p class="h-13 mt-7 desc">
+        <span> 描述：</span> <span>{{ describe }}</span>
+      </p>
+      <div class="mt-7">
+        <el-tag v-for="item in tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag>
+      </div>
+      <p class="mt-7">
+        <span>行业:</span> <span>{{ industryName }}</span> <span class="ml-8">分类:</span> <span>{{ sortName }}</span>
+      </p>
+      <p class="mt-7">
+        <span>更新日期:</span> <span>{{ update }}</span> <span class="ml-8">作者:</span> <span>{{ owner }}</span>
+      </p>
+      <div class="mt-10">
+        <el-button type="primary">下载</el-button>
+      </div>
+    </div>
+  </div>
+  <div class="pagination mt-15 flex flex-row-reverse">
+    <el-config-provider :locale="zhCn">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="200"
+      >
+      </el-pagination>
+    </el-config-provider>
+  </div>
+</template>
+
+<script lang="ts" setup="true">
+import { ref } from 'vue';
+import { ElConfigProvider } from 'element-plus';
+import zhCn from 'element-plus/lib/locale/lang/zh-cn';
+
+const keyword = ref('');
+const industry = ref('');
+const sort = ref('');
+const pluginName = ref('插件名称');
+const versionNumber = ref('版本号');
+const industryName = ref('数字医疗');
+const sortName = ref('签到');
+const update = ref('2021年12月20日');
+const owner = ref('传控电子');
+const describe = ref(
+  'In my dual profession as an educator and health care , I have worked with numerous children infected  with the virus that causes AIDS.',
+);
+const tags = ref([
+  { btnType: '', name: '医疗' },
+  { btnType: 'success', name: '打卡' },
+  { btnType: 'warning', name: '签到' },
+]);
+const industryList = [
+  {
+    value: '行业一',
+    label: '行业一',
+  },
+  {
+    value: '行业二',
+    label: '行业二',
+  },
+  {
+    value: '行业三',
+    label: '行业三',
+  },
+];
+const sortList = [
+  {
+    value: '分类一',
+    label: '分类一',
+  },
+  {
+    value: '分类二',
+    label: '分类二',
+  },
+  {
+    value: '分类三',
+    label: '分类三',
+  },
+];
+
+const handleSizeChange = val => {
+  console.log(val);
+};
+const handleCurrentChange = val => {
+  console.log(val);
+};
+</script>
+
+<style scoped>
+.el-input {
+  width: 20%;
+  margin-right: 2rem;
+}
+.el-select {
+  margin-right: 2rem;
+  width: 20%;
+}
+.desc {
+  overflow: hidden;
+}
+.shop-left {
+  width: 35%;
+}
+</style>
diff --git a/src/views/tablist/upload.vue b/src/views/index-list/upload.vue
similarity index 88%
rename from src/views/tablist/upload.vue
rename to src/views/index-list/upload.vue
index 9d43739..3e99a28 100644
--- a/src/views/tablist/upload.vue
+++ b/src/views/index-list/upload.vue
@@ -32,19 +32,19 @@
           </el-select>
         </el-form-item>
       </div>
-      <el-form-item label="标签：" class="font-semibold tags" prop="tags">
+      <el-form-item label="标签：" class="font-semibold" prop="tags">
         <el-select v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择标签">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="HTML：" class="font-semibold" prop="htmlcodes">
-        <el-input v-model="form.htmlcodes" type="textarea" placeholder="请输入HTML代码片段"></el-input>
+      <el-form-item label="HTML：" class="font-semibold" prop="htmlCodes">
+        <el-input v-model="form.htmlCodes" type="textarea" placeholder="请输入HTML代码片段"></el-input>
       </el-form-item>
-      <el-form-item label="JS：" class="font-semibold" prop="jscodes">
-        <el-input v-model="form.jscodes" type="textarea" placeholder="请输入JS代码片段"></el-input>
+      <el-form-item label="JS：" class="font-semibold" prop="jsCodes">
+        <el-input v-model="form.jsCodes" type="textarea" placeholder="请输入JS代码片段"></el-input>
       </el-form-item>
-      <el-form-item label="CSS：" class="font-semibold" prop="csscodes">
-        <el-input v-model="form.csscodes" type="textarea" placeholder="请输入CSS代码片段"></el-input>
+      <el-form-item label="CSS：" class="font-semibold" prop="cssCodes">
+        <el-input v-model="form.cssCodes" type="textarea" placeholder="请输入CSS代码片段"></el-input>
       </el-form-item>
       <el-form-item> <el-switch v-model="form.delivery" class="mr-3"></el-switch> 是否压缩代码 </el-form-item>
       <el-form-item>
@@ -67,9 +67,9 @@ const form = reactive({
   region: '',
   sort: '',
   tags: '',
-  htmlcodes: '',
-  jscodes: '',
-  csscodes: '',
+  htmlCodes: '',
+  jsCodes: '',
+  cssCodes: '',
   delivery: '',
 });
 
@@ -79,17 +79,16 @@ const rules = {
   region: [{ required: true, message: '请选择行业', trigger: 'blur' }],
   sort: [{ required: true, message: '请选择分类', trigger: 'blur' }],
   tags: [{ required: true, message: '请选择标签', trigger: 'blur' }],
-  htmlcodes: [{ required: true, message: '请输入HTML代码', trigger: 'blur' }],
-  jscodes: [{ required: true, message: '请输入JS代码', trigger: 'blur' }],
+  htmlCodes: [{ required: true, message: '请输入HTML代码', trigger: 'blur' }],
+  jsCodes: [{ required: true, message: '请输入JS代码', trigger: 'blur' }],
 };
 
 const onSubmit = () => {
-  console.log('onSubmit');
+  formRef.value.validate(true);
 };
 const resetForm = () => {
   formRef.value.resetFields();
 };
-
 const options = [
   {
     value: 'HTML',
diff --git a/src/views/tablist/plugshop.vue b/src/views/tablist/plugshop.vue
deleted file mode 100644
index 06143e5..0000000
--- a/src/views/tablist/plugshop.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="serch flex flex-1 py-10">
-    <el-select
-      v-model="value"
-      multiple
-      filterable
-      remote
-      reserve-keyword
-      placeholder="请输入内容"
-      :remote-method="remoteMethod"
-      :loading="loading"
-    >
-      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-    </el-select>
-    <el-select v-model="value" filterable placeholder="请选择行业">
-      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-    </el-select>
-    <el-select
-      v-model="value"
-      multiple
-      filterable
-      remote
-      reserve-keyword
-      placeholder="请选择分类"
-      :remote-method="remoteMethod"
-      :loading="loading"
-    >
-      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-    </el-select>
-    <el-button type="primary" size="small" class="serch-btn w-60px h-40px">搜索</el-button>
-  </div>
-  <div class="shop-content flex py-5">
-    <img src="@/assets/u1.jpg" alt="" class="shop-left w-100 h-90 border-20 p-1 box-border" />
-    <div class="shop-right ml-5">
-      <div><span class="text-2xl font-semibold">插件名称</span> <span class="ml-5">版本号</span></div>
-      <p class="h-13 mt-7 desc">
-        <span> 描述：</span> In my dual profession as an educator and health care provider, I have worked with numerous children infected
-        with the virus that causes AIDS.
-      </p>
-      <div class="mt-7">
-        <el-tag>医疗</el-tag>
-        <el-tag class="ml-2" type="success">打卡</el-tag>
-        <el-tag class="ml-2" type="warning">签到</el-tag>
-      </div>
-      <p class="mt-7"><span>行业:</span> <span>数字医疗</span> <span class="ml-8">分类:</span> <span>签到</span></p>
-      <p class="mt-7"><span>更新日期:</span> <span>2021年12月20日</span> <span class="ml-8">作者:</span> <span>传控电子</span></p>
-      <div class="mt-10">
-        <el-button type="primary">下载</el-button>
-      </div>
-    </div>
-  </div>
-  <div class="pagination mt-15 flex flex-row-reverse">
-    <!-- <el-pagination
-      v-model:currentPage="currentPage4"
-      :page-sizes="[10, 20, 30, 40]"
-      :page-size="20"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="200"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    >
-    </el-pagination> -->
-    <el-config-provider :locale="locale">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage4"
-        :page-sizes="[10, 20, 30, 40]"
-        :page-size="20"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="200"
-      >
-      </el-pagination>
-    </el-config-provider>
-  </div>
-</template>
-
-<script lang="ts">
-// import { reactive, ref, toRefs } from 'vue';
-// 引入vue方法
-import { ElConfigProvider } from 'element-plus';
-// 中文包
-import zhCn from 'element-plus/lib/locale/lang/zh-cn';
-
-export default {
-  props: { pagReviewLength: Number },
-  components: { [ElConfigProvider.name]: ElConfigProvider },
-  setup() {
-    const locale = zhCn;
-    // const state = reactive({
-    //   pageSize: 10,
-    //   total: '',
-    //   currentPage1: 1,
-    // });
-
-    return { locale };
-  },
-};
-</script>
-
-<style scoped>
-.el-select {
-  margin-right: 2rem;
-  width: 20%;
-}
-.desc {
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/user/sign-in.vue b/src/views/user/sign-in.vue
index 127a167..5f80890 100644
--- a/src/views/user/sign-in.vue
+++ b/src/views/user/sign-in.vue
@@ -71,7 +71,7 @@ function onSubmit() {
         ElMessage.success('登录成功， 欢迎回来');
         setTimeout(() => {
           // 跳转到首页
-          router.push({ name: 'plugshop' });
+          router.push({ name: 'plugin-shop' });
         }, 1000);
       } catch (error) {
         ElMessage.error(error);
diff --git a/yarn.lock b/yarn.lock
index 408f5fe..dfdb221 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2316,10 +2316,10 @@
   dependencies:
     "prettier-linter-helpers" "^1.0.0"
 
-"eslint-plugin-vue@^7.19.1":
-  "integrity" "sha1-Q1+yznEoQqlTCyjqy4g2gOjqpPM="
-  "resolved" "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.19.1.tgz"
-  "version" "7.19.1"
+"eslint-plugin-vue@^7.20.0":
+  "integrity" "sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw=="
+  "resolved" "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.20.0.tgz"
+  "version" "7.20.0"
   dependencies:
     "eslint-utils" "^2.1.0"
     "natural-compare" "^1.4.0"
@@ -2356,7 +2356,7 @@
   "resolved" "https://registry.nlark.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz"
   "version" "2.1.0"
 
-"eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^5.16.0 || ^6.8.0 || ^7.2.0", "eslint@^6.2.0 || ^7.0.0 || ^8.0.0-0", "eslint@^7.32.0", "eslint@>=5.0.0", "eslint@>=7.0.0", "eslint@>=7.28.0":
+"eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^5.16.0 || ^6.8.0 || ^7.2.0", "eslint@^6.2.0 || ^7.0.0 || ^8.0.0", "eslint@^7.32.0", "eslint@>=5.0.0", "eslint@>=7.0.0", "eslint@>=7.28.0":
   "integrity" "sha1-xtMooUvj+wjI0dIeEsAv23oqgS0="
   "resolved" "https://registry.npmmirror.com/eslint/download/eslint-7.32.0.tgz?cache=0&sync_timestamp=1634180157931&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint%2Fdownload%2Feslint-7.32.0.tgz"
   "version" "7.32.0"