feat:初始化ctool项目

5826e420 · 郭维嘉 · 5826e420 · 5826e420 · 5826e420 · 5826e420
8 changed file
--- a/.gitignore
+++ b/.gitignore
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
\ No newline at end of file
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
--- a/README.md
+++ b/README.md
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
+{
+  "name": "ctool",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite --open",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "p": "npm run build && rm -rf ~/Desktop/time/static/* && cp -rf ~/Desktop/ctool/dist/* ~/Desktop/time/static"
+  },
+  "dependencies": {
+    "element-plus": "^1.2.0-beta.1",
+    "vue": "^3.2.16"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.9.3",
+    "less": "^4.1.2",
+    "vite": "^2.6.4"
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <!-- <el-carousel :autoplay="false" arrow="never" trigger="click" height="120px">
+    <el-carousel-item> -->
+  <div class="tools">
+    <template v-for="(item, index) in tools" :key="index">
+      <div class="tool_item" @click="globalSearch">
+        <el-badge v-if="item.showTag" :value="item.tag">
+          <div
+            :style="{
+              background: `#fff url(${item.icon}) center / cover no-repeat`
+            }"
+            :class="['tool_icon']"
+          ></div>
+          <div :class="['tool_name']">
+            {{ item.name }}
+          </div>
+        </el-badge>
+        <div v-else>
+          <div
+            :style="{
+              background: `#fff url(${item.icon}) center / cover no-repeat`
+            }"
+            :class="['tool_icon']"
+          ></div>
+          <div :class="['tool_name']">{{ item.name }}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <el-card shadow="never" style="border: none; padding: 0">
+    <el-input
+      autofocus
+      v-model="keyword"
+      placeholder="输入搜索关键词"
+      class="input-with-select"
+      @keydown.enter="globalSearch"
+    >
+      <template #append>
+        <div class="search_btn" @click="globalSearch">
+          <img
+            src="https://gitcode.net/uploads/-/system/group/avatar/42/0_csdn.png"
+            alt=""
+            srcset=""
+          />
+        </div>
+      </template>
+    </el-input>
+    <transition name="fade">
+      <el-card v-if="keyword || pageShow" class="result" shadow="never">
+        <iframe v-if="pageShow" :src="iframeSrc" frameborder="0"></iframe>
+        <template v-else>
+          <div
+            class="res_item"
+            @click="clickItem(item)"
+            v-for="(item, index) in list"
+            :key="index"
+          >
+            <img :src="item.icon" alt="" />
+            <ul>
+              <li class="title">{{ item.title }}</li>
+              <li class="desc">{{ item.desc }}</li>
+            </ul>
+          </div>
+        </template>
+      </el-card>
+    </transition>
+  </el-card>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keyword: "",
+      pageShow: false,
+      iframeSrc: "",
+      tools: [
+        {
+          icon: "https://gitcode.net/codechina/operation-work/uploads/48886bea190eb24ef4cf0499e589554c/1_cpongo9_1634797583.gif",
+          name: "CSDN",
+          showTag: true,
+          tag: "new"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/6e49210c084629259f22609980c48ecf.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "待办事项",
+          showTag: true,
+          tag: 7
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/assets/weather/code_100.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "天气",
+          showTag: true,
+          tag: "26℃"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/cee009549b352def723ba09d6da4b742.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "京东",
+          showTag: true,
+          tag: "99+"
+        },
+        {
+          icon: "https://codechina.csdn.net/uploads/-/system/project/avatar/39/logo-1-s.png?width=108",
+          name: "Gitcode",
+          showTag: true,
+          tag: "git"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/f6ec2e6ee20fe198f81cf620413bc35b.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "携程网",
+          showTag: true,
+          tag: "hot"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/37d396f9975e494b10ac8696d64ebb2a.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "Youtube",
+          showTag: true,
+          tag: "hot"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/11ad5726053067fa842833ff0529b680.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "Github",
+          showTag: true,
+          tag: "git"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/24982e111c555d3a4afc44981627925f.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "知乎",
+          showTag: true,
+          tag: "知乎"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/2fc65bd66987ba1596324d55c01bddd7.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "微信",
+          showTag: true,
+          tag: "23"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/8061c93a71355024e801820969e2ecff.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "百度网盘",
+          showTag: true,
+          tag: "100TB"
+        }
+      ],
+      list: [
+        {
+          icon: "https://gitcode.net/uploads/-/system/group/avatar/42/0_csdn.png",
+          title: "全局搜索",
+          code: 1,
+          desc: "在CSDN中全局搜索关键词"
+        },
+        {
+          icon: "https://codechina.csdn.net/uploads/-/system/project/avatar/39/logo-1-s.png?width=108",
+          title: "Gitcode",
+          code: 2,
+          desc: "在Gitcode中根据关键词搜索相关项目或代码"
+        },
+        {
+          icon: "https://img2.baidu.com/it/u=533619884,3358423114&fm=26&fmt=auto",
+          title: "博客",
+          code: 3,
+          desc: "根据关键词搜索CSDN相关博客"
+        },
+        {
+          icon: "https://img0.baidu.com/it/u=3697775148,330223112&fm=253&fmt=auto&app=120&f=PNG?w=208&h=208",
+          title: "问答",
+          code: 4,
+          desc: "在CSDN问答中提问"
+        }
+      ]
+    };
+  },
+  watch: {
+    keyword(val) {
+      if (!val) {
+        this.pageShow = false;
+      }
+    }
+  },
+  methods: {
+    clickItem(item) {
+      switch (item.code) {
+        case 1:
+          this.globalSearch();
+          break;
+        case 2:
+          this.iframeSrc = `https://gitcode.net/courses/detail/2/l`;
+          this.openPage();
+          break;
+        case 3:
+          this.iframeSrc = `https://so.csdn.net/so/search?q=${this.keyword}&t=blog&u=`;
+          this.openPage();
+          break;
+        case 4:
+          this.iframeSrc = `https://so.csdn.net/so/search?q=${this.keyword}&t=ask&u=`;
+          this.openPage();
+          break;
+
+        default:
+          break;
+      }
+    },
+    globalSearch() {
+      this.iframeSrc = `https://so.csdn.net/so/search?q=${
+        this.keyword || ""
+      }&t=&u=`;
+      this.openPage();
+    },
+    openPage() {
+      this.pageShow = true;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.fade-enter-active {
+  transition: all 0.3s ease;
+}
+.fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.fade-enter, .fade-leave-to
+/* .fade-leave-active for below version 2.1.8 */ {
+  transform: translateY(-40px);
+  opacity: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  background: transparent;
+  overflow-y: hidden;
+  // background-color: red;
+}
+#app {
+  padding: 20px;
+  padding-top: 10px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  max-width: 850px;
+  margin: 0 auto;
+  background: #fff;
+}
+
+iframe {
+  width: 100%;
+  height: 1024px;
+  border: none;
+}
+.tools {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin: 0 auto;
+  .tool_item {
+    cursor: pointer;
+    position: relative;
+    &:hover {
+      .tool_icon {
+        bottom: 0;
+      }
+      .tool_name,
+      .el-badge__content {
+        opacity: 1;
+        top: 10px;
+      }
+    }
+    .el-badge__content {
+      opacity: 0;
+      transition: all 0.3s;
+      // transition-delay: 0.1s;
+      top: 0px;
+    }
+    .tool_icon {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      overflow: hidden;
+      position: relative;
+      bottom: -20px;
+      transition: all 0.3s;
+      box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
+    }
+    .tool_name {
+      color: #666;
+      font-size: 14px;
+      text-align: center;
+      margin-top: 10px;
+      opacity: 0;
+      transition: all 0.3s;
+    }
+  }
+}
+.el-card {
+  margin: 0 auto;
+  margin-top: 20px;
+  .el-card__body {
+    padding: 4px;
+  }
+  .el-input {
+    input {
+      height: 52px;
+      font-size: 18px;
+    }
+    .el-input__inner {
+      &:hover,
+      &:focus {
+        border-color: #fc5531;
+      }
+    }
+    .el-input-group__append,
+    .el-input-group__prepend {
+      background-color: #fc5531;
+      border-color: #fc5531;
+      cursor: pointer;
+      padding: 0;
+      .search_btn {
+        width: 70px;
+        text-align: center;
+      }
+    }
+    img {
+      height: 30px;
+      vertical-align: middle;
+      border-radius: 4px;
+    }
+  }
+  .result {
+    width: 100%;
+    .el-card__body {
+      padding: 0;
+    }
+    .res_item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+      box-sizing: border-box;
+      cursor: pointer;
+      &:hover {
+        background: #ecf5ff;
+      }
+      img {
+        width: 44px;
+        border-radius: 4px;
+      }
+      ul {
+        padding-left: 20px;
+        list-style: none;
+        margin: 10px 0;
+        flex: 1;
+        .title {
+          font-size: 18px;
+        }
+        .desc {
+          color: #666;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
+import { createApp } from "vue";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.use(ElementPlus);
+app.mount("#app");
--- a/vite.config.js
+++ b/vite.config.js
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "./",
+  plugins: [vue()],
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: "[name].js",
+        chunkFileNames: "[name].js",
+        assetFileNames: "[name].[ext]"
+      }
+    }
+  }
+});