feat(style):responsive style

.husky/pre-commit

@@ -2,3 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npm run fmt
+npm run lint

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmmirror.com
+disturl=https://registry.npmmirror.com/dist

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar"]
+  "recommendations": ["Vue.volar", "antfu.unocss"]
 }

packages/iconpub-webapp/.dockerignore

@@ -12,6 +12,8 @@ Dockerfile
 
 # workspace
 index.html
+.eslintignore
+.eslintrc.cjs
 tsconfig.json
 vite.config.ts
 

packages/iconpub-webapp/.env

@@ -1,16 +1,15 @@
-# common
 NODE_ENV = production
-VITE_GA_ID = G-SYF7WXXMDG
 
-# app & website
-VITE_SITE_AUTHOR = guocaoyi
+VITE_NOW = 2023
+VITE_ORG = yalda
+VITE_AUTHOR = guocaoyi
 VITE_SITE_NAME = iconpub
-VITE_SITE_BEGIN = 2022
+VITE_DOMAIN_BEIAN = 苏公网安备32010602011142号
+VITE_DOMAIN_ICP = 苏ICP备2022030674号-1
 
-# social
 VITE_SOCIAL_GMAIL = [email protected]
 VITE_SOCIAL_GITHUB = https://github.com/guocaoyi/iconpub
 VITE_SOCIAL_TWITTER = without_horn
 
-# domain
+VITE_GA_ID = G-SYF7WXXMDG # google analytics id
 VITE_TRACE_ID = 

packages/iconpub-webapp/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+src/components.d.ts

packages/iconpub-webapp/.eslintrc.cjs

@@ -0,0 +1,37 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/eslint-config-prettier',
+  ],
+  env: {
+    'vue/setup-compiler-macros': true,
+  },
+  rules: {
+    // all rules docs https://eslint.org/docs/rules/
+    'prettier/prettier': [
+      'error',
+      {
+        jsxSingleQuote: false,
+        singleQuote: true,
+        trailingComma: 'all',
+        endOfLine: 'lf',
+        printWidth: 100,
+        semi: false,
+        tabWidth: 2,
+        useTabs: false,
+      },
+    ],
+    'vue/multi-word-component-names': [
+      'error',
+      {
+        ignores: ['index'],
+      },
+    ],
+  },
+}

packages/iconpub-webapp/.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar"]
+  "recommendations": ["Vue.volar", "antfu.unocss"]
 }

packages/iconpub-webapp/.vscode/settings.json

@@ -1,4 +1,3 @@
 {
-  "editor.formatOnSave": true,
-  "unocss.root": "packages/iconpub-webapp"
+  "editor.formatOnSave": true
 }

packages/iconpub-webapp/index.html

@@ -42,7 +42,6 @@
 
     <style>
       body {
-        height: 100vh;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
           'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
         -webkit-font-smoothing: antialiased;
@@ -64,7 +63,8 @@
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=/%VITE_GA_ID%/"></script>
     <script>
-      location.host.includes('icons.pub') && // for production
+      location.host.includes('icons.pub') &&
+        '/%VITE_GA_ID%/' &&
         (() => {
           window.dataLayer = window.dataLayer || []
           function gtag() {

packages/iconpub-webapp/package.json

@@ -7,26 +7,35 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "typecheck": "vue-tsc --noEmit"
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.cjs,.ts --fix --ignore-path .gitignore",
+    "fmt": "prettier --write '**/*.{ts,vue,cjs,mjs,json}'"
   },
   "dependencies": {
     "@vueuse/core": "^9.2.0",
     "axios": "^0.27.2",
+    "dayjs": "^1.11.5",
+    "marked": "^4.1.0",
     "normalize.css": "^8.0.1",
     "unocss": "^0.45.23",
-    "vue": "^3.2.38"
+    "vue": "^3.2.38",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
+    "@rushstack/eslint-patch": "^1.2.0",
     "@types/node": "^14.18.28",
     "@unocss/preset-attributify": "^0.45.23",
     "@unocss/preset-uno": "^0.45.23",
     "@vitejs/plugin-vue": "^3.1.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "sass": "^1.54.8",
+    "eslint": "^8.23.1",
+    "eslint-plugin-vue": "^9.5.1",
     "typescript": "^4.8.2",
     "unplugin-vue-components": "^0.22.4",
     "vite": "^3.1.0",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.5",
     "vue-tsc": "^0.40.10"
   }
 }

packages/iconpub-webapp/src/App.vue

@@ -1,6 +1,4 @@
-<script lang="ts" setup>
-import Vue from 'vue'
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <LayoutHeader />

packages/iconpub-webapp/src/components/BaseModal/index.vue

@@ -1,29 +1,42 @@
 <script lang="ts" setup>
 interface Props {
   title: string
-  dispaly: boolean
+  display?: boolean
 }
-
-const props = defineProps({
-  title: String,
-  dispaly: Boolean,
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  display: false,
 })
+
+defineEmits(['ok', 'cancle'])
 </script>
 
 <template>
   <Transition name="modal">
     <div
-      v-if="dispaly"
+      v-if="display"
       class="modal-mask"
       z-36
       fixed
       width="w-1/1"
       height="h-1/1"
-      bg-black
-      bg-op-50
+      bg="black op-50"
+      top-0
+      left-0
+      table
+      transition="opacity 30 ease"
     >
-      <div table-cell v-middle>
-        <div class="modal-container" w-80 px-8 py-5 c-white rd-1 shadow>
+      <div v-middle table-cell>
+        <div
+          class="modal-container"
+          w-80
+          p="x-8 y-5"
+          c-white
+          rd-1
+          shadow
+          margin-a
+          transition="all 30 ease"
+        >
           <div mt-0 c-balck>
             <slot name="header">{{ props.title }}</slot>
           </div>
@@ -47,15 +60,10 @@ const props = defineProps({
 
 <style>
 .modal-mask {
-  top: 0;
-  left: 0;
-
-  display: table;
   transition: opacity 0.3s ease;
 }
 
 .modal-container {
-  margin: 0px auto;
   transition: all 0.3s ease;
 }
 

packages/iconpub-webapp/src/components/BaseModal/locale.ts

@@ -1,12 +1,12 @@
 export const en = {
-  'base.modal': {
+  modal: {
     cancel: 'Cancel',
     ok: 'OK',
   },
 }
 
 export const zh = {
-  'base.about': {
+  modal: {
     cancel: '取消',
     ok: '确认',
   },

packages/iconpub-webapp/src/components/LayoutBlank/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@/components/utils'
+import { withInstall } from '@/components/install'
 
 import Blank from './index.vue'
 

packages/iconpub-webapp/src/components/LayoutFooter/BaseAbout.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
 import config from '@/config'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const abouts = [
   {
     title: 'about.project.label',
     items: [
       { label: 'about.project.about', link: config.host.site },
       { label: 'about.project.readme', link: '' },
-      { label: 'about.project.issues', link: '' },
-      { label: 'about.project.license', link: '' },
+      { label: 'about.project.issues', link: '/feedback' },
+      { label: 'about.project.license', link: '/' },
     ],
   },
   {
@@ -23,21 +26,50 @@ const abouts = [
     title: 'about.source.label',
     items: [
       { label: 'about.source.react', link: config.host.site },
-      { label: 'about.source.docker', link: config.host.site },
+      {
+        label: 'about.source.docker',
+        link: `https://hub.docker.com/search?q=${config.org}/${config.siteName}`,
+      },
+    ],
+  },
+  {
+    title: 'about.social.label',
+    items: [
+      { label: 'about.social.github', link: config.host.site },
+      { label: 'about.social.twitter', link: `https://twitter.com/${config.socialTwitter}` },
     ],
   },
-  { title: 'about.social.label', items: [{ label: 'about.dev.github', link: config.host.site }] },
 ]
 </script>
 
 <template>
-  <div ml-20 w-300 p="y-8" flex text-xs>
-    <div w-50 mr-12 block v-for="(about, index) in abouts" :key="index">
-      <div font-400 mb-5 mt-1>{{ $t(about.title) }}</div>
+  <div
+    bg="light dark:dark-800"
+    c="dark-800 dark:light"
+    pt-1
+    mx-4
+    flex
+    flex-col
+    text-xs
+    md:pt-2
+    md:mx-10
+    md:flex-row
+    xl:pt-2
+    xl:mx-20
+    xl:flex-row
+  >
+    <div v-for="(about, index) in abouts" :key="index" w-50 mr-12 block bg="light dark:dark-800">
+      <div font-600 pt-5 mt-1>{{ t(about.title) }}</div>
       <p v-for="(item, i) in about.items" :key="i">
-        <a c-black decoration-none target="_blank" rel="noopener" :href="item.link">{{
-          $t(item.label)
-        }}</a>
+        <a
+          decoration-none
+          :target="item.link.startsWith('/') ? '_self' : '_blank'"
+          rel="noopener"
+          :href="item.link"
+          c="dark-800 dark:light"
+        >
+          {{ t(item.label) }}
+        </a>
       </p>
     </div>
   </div>

packages/iconpub-webapp/src/components/LayoutFooter/BaseFooter.vue

@@ -1,20 +1,46 @@
 <script lang="ts" setup>
 import config from '@/config'
 
+const id = config.domainBeian.match(/\d+/gi)?.[0] ?? ''
 const licenses = [
   {
-    src: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32010602011142',
-    lable: 'about.license.police',
+    lable: config.domainBeian,
+    type: 'police',
+    link: `http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${id}`,
   },
-  { src: 'https://beian.miit.gov.cn/#/integrated/index', lable: 'about.license.icp' },
-]
+  {
+    lable: config.domainIcp,
+    type: 'icp',
+    link: 'https://beian.miit.gov.cn',
+  },
+].filter((license) => !!license.lable)
 </script>
 
 <template>
-  <footer h-12 flex justify-center items-center text-xs>
-    <span>©Copyright 2022-{{ config.siteBegin }} {{ config.siteName.toUpperCase() }} &nbsp;</span>
-    <a c-black decoration-none mr-1 v-for="(item, index) in licenses" :key="index" :href="item.src">
-      {{ $t(item.lable) }}</a
+  <footer
+    bg="light dark:dark-800"
+    mx-4
+    flex
+    flex-col
+    text-xs
+    md:mx-20
+    md:h-12
+    md:flex-col
+    xl:flex-col
+  >
+    <span c="dark-800 dark:light" mr-2>
+      ©Copyright 2022-{{ config.now }} {{ config.siteName.toUpperCase() }}
+    </span>
+    <a
+      v-for="(item, i) in licenses"
+      :key="i"
+      :href="item.link"
+      target="_blank"
+      decoration-none
+      mr-2
+      c="dark-800 dark:light"
     >
+      {{ $t(item.lable) }}
+    </a>
   </footer>
 </template>

packages/iconpub-webapp/src/components/LayoutFooter/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@/components/utils'
+import { withInstall } from '@/components/install'
 
 import Index from './index.vue'
 
@@ -8,3 +8,4 @@ export default LayoutIndex
 export * from './index.vue'
 export * from './BaseAbout.vue'
 export * from './BaseFooter.vue'
+export * from './BaseHeader.vue'