feat: 修改RSS条目样式

webui/src/App.vue

@@ -5,6 +5,17 @@ const theme: GlobalThemeOverrides = {
   Spin: {
     color: '#fff',
   },
+  DataTable: {
+    thColor: 'rgba(255, 255, 255, 0)',
+    thColorHover: 'rgba(255, 255, 255, 0)',
+    tdColorHover: 'rgba(255, 255, 255, 0)',
+  },
+  Checkbox: {
+    colorChecked: '#4e3c94',
+    borderFocus: '#4e3c94',
+    boxShadowFocus: '0 0 0 2px rgba(78, 60, 148, 0.2)',
+    borderChecked: '1px solid #4e3c94',
+  },
 };
 
 const { refresh, isLoggedIn } = useAuth();

webui/src/components/ab-rss-item.vue

@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-withDefaults(
-  defineProps<{
-    id: number;
-    name: string;
-    url: string;
-    enable: boolean;
-    aggregate: boolean;
-    parser: string;
-  }>(),
-  {
-    aggregate: false,
-  }
-);
-
-defineEmits<{
-  (e: 'on-select', checked: boolean, id: number): void;
-}>();
-
-const checked = ref(false);
-</script>
-
-<template>
-  <div flex="~ items-center justify-between gap-4">
-    <!-- left -->
-    <div flex="~ gap-x-40">
-      <ab-checkbox
-        v-model="checked"
-        small
-        @click="() => $emit('on-select', checked, id)"
-      />
-      <div w-200 text-h3 truncate>{{ name }}</div>
-      <div w-300 text-h3 truncate>{{ url }}</div>
-    </div>
-
-    <!-- right -->
-    <div space-x-8>
-      <ab-tag v-if="parser" type="primary" :title="parser" />
-      <ab-tag v-if="aggregate" type="primary" title="aggregate" />
-      <ab-tag v-if="enable" type="active" title="active" />
-      <ab-tag v-if="!enable" type="inactive" title="inactive" />
-    </div>
-  </div>
-</template>

webui/src/i18n/zh-CN.json

@@ -129,7 +129,7 @@
     "selectbox": "选择",
     "status": "状态",
     "title": "RSS 条目",
-    "url": "Url"
+    "url": "链接"
   },
   "sidebar": {
     "calendar": "番剧日历",

webui/src/pages/index/rss.vue

@@ -1,8 +1,12 @@
-<script lang="ts" setup>
+<script lang="tsx" setup>
+import { NDataTable } from 'naive-ui';
+import type { RSS } from '#/rss';
+
 definePage({
   name: 'RSS',
 });
 
+const { t } = useMyI18n();
 const { rss, selectedRSS } = storeToRefs(useRSSStore());
 const { getAll, deleteSelected, disableSelected, enableSelected } =
   useRSSStore();
@@ -11,45 +15,72 @@ onActivated(() => {
   getAll();
 });
 
-function addSelected(checked: boolean, id: number) {
-  if (!checked) {
-    selectedRSS.value.push(id);
-  } else {
-    selectedRSS.value = selectedRSS.value.filter((i) => i !== id);
-  }
-}
+const RSSTableOptions = computed(() => {
+  const columns = [
+    {
+      type: 'selection',
+    },
+    {
+      title: t('rss.name'),
+      key: 'name',
+      className: 'text-h3',
+      ellipsis: {
+        tooltip: true,
+      },
+    },
+    {
+      title: t('rss.url'),
+      key: 'url',
+      className: 'text-h3',
+      minWidth: 200,
+      align: 'center',
+      ellipsis: {
+        tooltip: true,
+      },
+    },
+    {
+      title: t('rss.status'),
+      key: 'status',
+      className: 'text-h3',
+      align: 'right',
+      minWidth: 200,
+      render(rss: RSS) {
+        return (
+          <div flex="~ justify-end gap-x-8">
+            {rss.parser && <ab-tag type="primary" title={rss.parser} />}
+            {rss.aggregate && <ab-tag type="primary" title="aggregate" />}
+            {rss.enabled ? (
+              <ab-tag type="active" title="active" />
+            ) : (
+              <ab-tag type="inactive" title="inactive" />
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rowKey = (rss: RSS) => rss.id;
+
+  return {
+    columns,
+    data: rss.value,
+    pagination: false,
+    bordered: false,
+    rowKey,
+    maxHeight: 500,
+  } as unknown as InstanceType<typeof NDataTable>;
+});
 </script>
 
 <template>
   <div overflow-auto mt-12 flex-grow>
     <ab-container :title="$t('rss.title')">
-      <div flex="~ justify-between">
-        <div flex="~ gap-x-40">
-          <div text-h3>{{ $t('rss.selectbox') }}</div>
-          <div class="spacer-1"></div>
-          <div text-h3>{{ $t('rss.name') }}</div>
-          <div class="spacer-2"></div>
-          <div text-h3>{{ $t('rss.url') }}</div>
-        </div>
-        <div>
-          <div text-h3>{{ $t('rss.status') }}</div>
-        </div>
-      </div>
-      <div line my-12></div>
-      <div space-y-12>
-        <ab-rss-item
-          v-for="i in rss"
-          :id="i.id"
-          :key="i.id"
-          :name="i.name"
-          :url="i.url"
-          :enable="i.enabled"
-          :parser="i.parser"
-          :aggregate="i.aggregate"
-          @on-select="addSelected"
-        >
-        </ab-rss-item>
-      </div>
+      <NDataTable
+        v-bind="RSSTableOptions"
+        @update:checked-row-keys="(e) => (selectedRSS = (e as number[]))"
+      ></NDataTable>
+
       <div v-if="selectedRSS.length > 0">
         <div line my-12></div>
         <div flex="~ justify-end gap-x-10">
@@ -65,13 +96,3 @@ function addSelected(checked: boolean, id: number) {
     </ab-container>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.spacer-1 {
-  width: 32px;
-}
-
-.spacer-2 {
-  width: 200px;
-}
-</style>

webui/src/store/rss.ts

@@ -1,7 +1,7 @@
 import type { RSS } from '#/rss';
 
 export const useRSSStore = defineStore('rss', () => {
-  const rss = ref<RSS[]>();
+  const rss = ref<RSS[]>([]);
   const selectedRSS = ref<number[]>([]);
 
   async function getAll() {
@@ -21,6 +21,7 @@ export const useRSSStore = defineStore('rss', () => {
     showMessage: true,
     onSuccess() {
       getAll();
+      selectedRSS.value = [];
     },
   };
 

webui/unocss.config.ts

@@ -61,6 +61,7 @@ export default defineConfig({
   ],
   shortcuts: [
     [/^wh-(.*)$/, ([, t]) => `w-${t} h-${t}`],
+    [/^text-limit-(\d{0,})$/, ([, n]) => `line-clamp-${n}`],
 
     // position
     {