feat: links

src/components/links/LinkCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mdui-card">
     <div class="mdui-card-header">
-      <img class="mdui-card-header-avatar" :src="item.avatar" />
+      <img class="mdui-card-header-avatar no-pe" :src="item.avatar" />
       <div class="mdui-card-header-title">{{ item.name }}</div>
       <div class="mdui-card-header-subtitle">{{ item.slogan }}</div>
     </div>
@@ -15,16 +15,23 @@
       <p>{{ item.description }}</p>
     </div>
 
-    <div class="mdui-card-actions">
-      <button class="mdui-btn mdui-ripple">action 1</button>
-      <button class="mdui-btn mdui-ripple">action 2</button>
+    <div class="mdui-card-actions mdui-p-t-0">
+      <button
+        class="mdui-btn mdui-ripple"
+        v-for="(link, i) in item.links"
+        :key="i"
+        :class="link.primary ? 'mdui-text-color-theme-accent' : 'mdui-text-color-theme-secondary'"
+        @click="() => openLink(link)"
+        >{{ link.name }}</button
+      >
     </div>
   </div>
 </template>
 
 <script setup>
-import { pick } from 'lodash';
-import { computed, inject } from 'vue';
+import { omit } from 'lodash';
+import { computed } from 'vue';
+import { useCeobeApiUtils } from '@/utils/ceobeCanteen';
 
 const props = defineProps({
   item: {
@@ -33,9 +40,7 @@ const props = defineProps({
   },
 });
 
-const isLocaleZH = computed(() => inject('getRoot')?.()?.$root.localeZH);
-
-const getLocalizedText = obj => obj[isLocaleZH.value ? 'zh_CN' : 'en_US'] || obj.zh_CN || obj.en_US;
+const { getLocalizedText } = useCeobeApiUtils();
 
 const item = computed(() => {
   const data = props.item;
@@ -47,11 +52,15 @@ const item = computed(() => {
     tags: getLocalizedText(data.localized_tags),
     avatar: data.icon_url,
     links: data.links.map(link => ({
-      ...pick(link, ['primary', 'regionality', 'url']),
+      ...omit(link, ['localized_name']),
       name: getLocalizedText(link.localized_name),
     })),
   };
 });
+
+const openLink = ({ url }) => {
+  window.open(url, '_blank');
+};
 </script>
 
 <style lang="scss" scoped>
@@ -75,7 +84,19 @@ const item = computed(() => {
   flex-direction: column;
 }
 
+.mdui-card-header {
+  height: unset;
+}
+
+.mdui-card-header-subtitle {
+  white-space: normal;
+}
+
 .mdui-card-actions {
   margin-top: auto;
 }
+
+.mdui-card-header-avatar {
+  object-fit: cover;
+}
 </style>

src/data/changelog.json

@@ -1,4 +1,10 @@
 [
+  {
+    "time": "2024-10-28",
+    "changes": [
+      "增加友情链接页面，感谢<a href=\"https://www.ceobecanteen.top/\" target=\"_blank\">小刻食堂</a>提供支持"
+    ]
+  },
   {
     "time": "2024-08-27",
     "changes": ["【精英材料计算】森空岛功能支持跟随多帐号切换"]

src/locales/jp/app.json

@@ -6,7 +6,8 @@
     "material": "@:(common.operator)育成",
     "level": "レベルアップ計算",
     "riic": "基地スキル",
-    "depot": "倉庫のインポート"
+    "depot": "倉庫のインポート",
+    "links": "リンク集"
   },
   "setting": {
     "rememberLastPage": "最後開いたページを記憶する",

src/locales/kr/app.json

@@ -6,7 +6,8 @@
     "material": "재료 계산기",
     "level": "레벨 업",
     "riic": "기반시설 스킬",
-    "depot": "창고 가져오기"
+    "depot": "창고 가져오기",
+    "links": "링크 모음"
   },
   "setting": {
     "rememberLastPage": "마지막으로 열었던 탭 기억하기",

src/locales/tw/app.json

@@ -6,7 +6,8 @@
     "material": "精英材料計算",
     "level": "幹員升級計算",
     "riic": "基建技能篩選",
-    "depot": "倉庫材料導入"
+    "depot": "倉庫材料導入",
+    "links": "友情連結"
   },
   "setting": {
     "rememberLastPage": "記住最後一次打開的索引標籤",

src/locales/us/app.json

@@ -6,7 +6,8 @@
     "material": "Material Calculation",
     "level": "Level Up",
     "riic": "RIIC Skills",
-    "depot": "Depot Import"
+    "depot": "Depot Import",
+    "links": "Links"
   },
   "setting": {
     "rememberLastPage": "Remember last tab opened",

src/utils/ceobeCanteen.js

@@ -0,0 +1,13 @@
+import { computed, inject } from 'vue';
+
+export const useCeobeApiUtils = () => {
+  const isLocaleZH = computed(() => inject('getRoot')?.()?.$root.localeZH);
+
+  const getLocalizedText = obj =>
+    obj[isLocaleZH.value ? 'zh_CN' : 'en_US'] || obj.zh_CN || obj.en_US || '';
+
+  return {
+    isLocaleZH,
+    getLocalizedText,
+  };
+};

src/views/Links.vue

@@ -1,29 +1,44 @@
 <template>
   <div id="recommended-links">
     <div class="link-list">
-      <LinkCard v-for="item in linkList" :key="item.id" :item="item" />
+      <LinkCard v-for="item in sortedLinkList" :key="item.id" :item="item" />
+    </div>
+    <div v-show="sortedLinkList.length" class="mdui-m-t-2">
+      <small class="mdui-typo"
+        >Powered by <a href="https://www.ceobecanteen.top/" target="_blank">Ceobe Canteen</a></small
+      >
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, shallowRef } from 'vue';
+import { onMounted, shallowRef, computed } from 'vue';
+import { isEqual } from 'lodash';
 import { createInstance } from 'localforage';
 import LinkCard from '@/components/links/LinkCard.vue';
+import { useCeobeApiUtils } from '@/utils/ceobeCanteen';
+
+const { getLocalizedText } = useCeobeApiUtils();
 
 const storage = createInstance({ name: 'recommended-links' });
 
 const linkList = shallowRef([]);
 
+const sortedLinkList = computed(() =>
+  [...linkList.value].sort((a, b) =>
+    getLocalizedText(a.localized_name).localeCompare(getLocalizedText(b.localized_name)),
+  ),
+);
+
 onMounted(() => {
   initLinkList();
 });
 
 const initLinkList = async () => {
-  const { data, timestamp } = storage.getItems(['data', 'timestamp']);
+  const { data, timestamp } = await storage.getItems(['data', 'timestamp']);
 
   if (Array.isArray(data)) {
-    linkList.value = data;
+    setLinkList(data);
   }
   if (!Array.isArray(data) || !data.length || timestamp < Date.now() - 3600e3) {
     await fetchToolLinks();
@@ -44,15 +59,36 @@ const fetchToolLinks = async () => {
   storage.setItem('data', data);
   storage.setItem('timestamp', Date.now());
 
-  linkList.value = data;
+  setLinkList(data);
+};
+
+const setLinkList = data => {
+  const myId = '8be8bfc0-43ed-4bbc-b6da-450804f2bd5b';
+  const ceobeCanteenId = '7811feb6-b473-4ee7-b83c-c8fabe4d1c4d';
+  const ceobeCanteenSlogan = {
+    zh_CN: '赋能小刻，万物皆为饼',
+    en_US: 'Empower Ceobe, where everything is a cookie',
+  };
+  const emptySlogan = {
+    zh_CN: '',
+    en_US: '',
+  };
+
+  linkList.value = data
+    .filter(item => item.id !== myId)
+    .map(item =>
+      item.id !== ceobeCanteenId && isEqual(item.localized_slogan, ceobeCanteenSlogan)
+        ? { ...item, localized_slogan: emptySlogan }
+        : item,
+    );
 };
 </script>
 
 <style lang="scss" scoped>
 .link-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  gap: 16px;
+  gap: 24px;
 }
 
 @media screen and (max-width: 600px) {